(Part 6) SteemConnect Web API Tutorial - Create A Steem App To Convert SBD To Steem pt6

in #utopian-io • 6 years ago (edited)

Repository

https://github.com/igormuba/SBDConversion

What Will I Learn?

I will teach you a bit of JavaScript and how to use it to create SteemConnect API URLs to make calls to the Steem blockchain and also use the JavaScript for DOM manipulation to create a link that appears only after the user input it's name

  • JavaScript string concatenation
  • SteemConnect URL API call to Steem Blockchain
  • DOM manipulation to show hidden chunks of code

Requirements

It is not necessary to have any prior knowledge, the tutorial is copy and paste friendly, but knowing the following can get you further on developing your own apps

  • Text editor (I am using VS Code)
  • Browser that supports JavaScript (I am using Firefox)
  • JavaScript
  • JSON
  • OAuth or SteemConnect

Difficulty

  • Basic

Tutorial Contents

Here I will teach you how to create yourself a very useful app. When SBD prices are lower than one dollar, you can use a function from the Steem blockchain that converts it into Steem as if it is worth 1 dollar. You get more Steem for your SBD! (this is not financial advice and THERE ARE RISKS doing this operation, for instance, if Steem price goes up or SBD prices go up or both you lose! This tutorial is for educational purpouses!)

We will start by creating the base html file, in most code editors if you open an empty HTML file and type doctype or html and press tab it will fill the body for you, this is useful as our main focus is not HTML

Create a index.html file in a dedicated folder

<!DOCTYPE html>

<head>
<meta charset="utf-8" />
<title></title>
</head>

<body>
</body>

</html>

Adding styles

For this tutorial we will use a CSS library called Bootstrap so we can make our form a little tiny bit prettier, but you do not, at all, need to use it, I just want you to start feeling used to import CSS files and use classes to make things prettier
You can read more about bootstrap at http://getbootstrap.com/

To add the bootstrap library into our page simply put between the head tags

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

Creating the file for the JS logic

On the same folder as the index.html, create a folder called js (or any other pattern you prefer) and inside it create the app.js (or any name you desire) to host the JavaScript logic of the app

The structure:

Importing the JS to the index

Inside the index.html import the JavaScript logic inside the body tags, in the very end (to ensure when it gets loaded it has access to all HTML elements) by using

<script src="js/app.js"></script>

Creating a bootstrap (or not) form

I would like to give you a quick intro to bootstrap.
I do not use this library on a daily basis, but I believe that for prototypping and creating simple applications for myself it is great because is simple, lightweight and easy to use, also there is plenty of documentation and components ready to use online!

Let us take advantage of one of those pre built elements, shall we?

On this tutorial we will edit the form provided by w3schools at
https://www.w3schools.com/bootstrap/bootstrap_forms.asp

 <form action="/action_page.php">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Grab that code and paste inside the HTML body tags

Form personalization

We don't want a login form, so we must change a few things!
Starting by removing the action attribute form the form tag and adding the class formsteem into it for us to later use on the JavaScript logic
So

 <form action="/action_page.php">

becomes

 <form class ="formsteem">

Also, we don't want an e-mail, we want an username, so change

<label for="email">

to

<label for="SteemAccount">

and consequently we must change the ID and type of what formerly was supposed to be the e-mail field!
change the type= attribute and give it the value of text instead of email, and the id change to SteemAccount

Altogether the first field becomes

And it loks like this

But we don't need a password (yet), we need the SBD amount, so again, make the necessary changes to it and to the submit button so the inferface becomes more clear about what it does!

<div class="form-group">
              <label for="SbdAmount">SBD Amount to convert:</label>
              <input type="text" class="form-control" id="SbdAmount">
            </div>
            <button type="submit" class="btn btn-default">Convert</button>

Now we have set the classes, look and IDs and we just need the logic!

Grab the click event on the submit button

To grab the click event, on the app.js we will use the querySelector function

document.querySelector(".formsteem").addEventListener('submit', function(event){
event.preventDefault();
//code logic goes here
});

The above will list to the event submit from the form. By default this would reload the page, this is why we are using the event function event.preventDefault();, we don't want the page to reload!

How is the URL structure of the SBD conversion call

The structure of the URL is as follows

https://steemconnect.com/sign/convert?owner=USERNAME&requestid=OPERATION ID&amount=QUANTITY%20SBD

As you can see, we need the username, the operation ID and the quantity. The operation ID must be unique, that means, at the current moment there should be no other operation in your account with the same ID.

We will get all of the needed data with this code

    let username = document.querySelector('#SteemAccount').value;
    let quantity = parseFloat(document.querySelector('#SbdAmount').value);
    let opId = username+quantity;

The first line selects the HTML with the ID SteemAccount, the same with the SbdAmount element, but it also parses it into a float.
Then for the unique ID, if you can use some fancy hash generator! But I don't think you are going to make thousands of transactions, so I though that creating a string with the username concatenated with sbd amount should be enough.

Now we will use a neat JavaScript trick to put the variables into the URL string

let url = `https://steemconnect.com/sign/convert?owner=${username}&requestid=${opId}&amount=${quantity}%20SBD`;

Creating a shadow element on HTML

Back on the html code very briefly, on the bottom of the code just above the closing body tag, add an empty anchor tag with an ID and a href attribute, so that we can use DOM manipulation to populate it with the link.

Making the link appear after the user click the button.

The last part is to manipulate the HTML document to make the link appear.

// makes the shadow anchor tag link to the generated url
document.querySelector('#linkToConversor').href = url;
// inserts text so it can appear
document.querySelector('#linkToConversor').innerHTML = "Click here to go to steemconnect";

Using it

Now, if you want to convert your SBD into Steem, you only need to fill your username and how many SBD you want to convert.
Be careful because the same way you can make money if Steem goes down and SBD goes down, the opposite scenario you can also lose money!
@timcliff has an excellent explanation on how does this work and you can read more about it in here
https://steemit.com/sbd/@timcliff/how-to-convert-sbd-into-steem-using-steemconnect

I have, personally, made a few dozen dollars/steem with this and I have a few hundred dollars being converted, but I won't do it anymore, I am afraid the market might turn bullish at any time

Curriculum

Proof of Work Done

index.html
https://github.com/igormuba/SBDConversion/blob/master/index.html

app.js
https://github.com/igormuba/SBDConversion/blob/master/js/app.js

I AM A STEEM WITNESS

To vote for me, simply use the SteemConnect link below
https://steemconnect.com/sign/account-witness-vote?witness=igormuba&approve=1

or go to https://steemit.com/~witnesses

(note, it is /~witnesses, not /witness)
Scroll all the way down to "If you would like to vote for a witness outside of the top 100, enter the account name below to cast a vote."

type igormuba and click vote

#tutorials #money #steem #cryptocurrency
6 years ago in #utopian-io by
$8.12
  • Past Payouts $8.12, 0.00 TRX
  • - Author $6.14, 0.00 TRX
  • - Curators $1.99, 0.00 TRX
32 votes
Reply 8
Sort:  
  • Trending
    • [-]
     6 years ago 

    Thank you for your contribution @igormuba.
    After analyzing your tutorial we suggest the following:

    • The tutorial is quite simple. Try to bring a subject that is of great use to the open source community.

    • There are already some tutorials on this subject. However your tutorial is well explained on how to convert SBD to Steem with JS, HTML and SteemConnect API.

    • The explanation of the form you put here is not ideal. Instead of making a change to a form we suggest you explain how to create the form.

    • Always ident your code. The ident code improves code reading.

    Thank you for developing this tutorial. We look forward to your next tutorial and pay attention to our suggestions.

    Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

    To view those questions and the relevant answers related to your post, click here.

    Need help? Write a ticket on https://support.utopian.io/.
    Chat with us on Discord.
    [utopian-moderator]

    [-]
     6 years ago 

    Thank you for your review, @portugalcoin! Keep up the good work!

    $0.00
      Reply
      [-]
       6 years ago 

      Congratulations @igormuba! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

      You published a post every day of the week

      Click here to view your Board of Honor
      If you no longer want to receive notifications, reply to this comment with the word STOP

      To support your work, I also upvoted your post!

      Support SteemitBoard's project! Vote for its witness and get one more award!

      $0.00
        Reply
        [-]
         6 years ago 

        Hi, @igormuba!

        You just got a 0.26% upvote from SteemPlus!
        To get higher upvotes, earn more SteemPlus Points (SPP). On your Steemit wallet, check your SPP balance and click on "How to earn SPP?" to find out all the ways to earn.
        If you're not using SteemPlus yet, please check our last posts in here to see the many ways in which SteemPlus can improve your Steem experience on Steemit and Busy.

        $0.00
          Reply
          [-]
           6 years ago 

          Hey, @igormuba!

          Thanks for contributing on Utopian.
          We’re already looking forward to your next contribution!

          Get higher incentives and support Utopian.io!
          Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

          Want to chat? Join us on Discord https://discord.gg/h52nFrV.

          Vote for Utopian Witness!

          $0.00
            Reply

            Coin Marketplace

            STEEM 0.20
            TRX 0.13
            JST 0.030
            BTC 66408.50
            ETH 3486.20
            USDT 1.00
            SBD 2.70