Tutorial On SteemConnect JS Dsteem And Steem API for JavaScript pt1

igormuba (69)in #tutorial • 6 years ago

The documentation and tutorials I have found are not beginner friendly, so I am compiling the work I am doing and what I am learning in a more friendly way.

I am currently working on a personal project that is using the Steem blockchain. Though I have gone to a software engineering I am a TERRIBLE programmer and I feel lost on what I am supposing to do. So I will keep track on my progress and what I have learned by sharing the knowledge here. I will compile and resume what I have learned so I can review myself and maybe help someone.

This will be a series, so this is the first one, as I learn more I will share more knowledge.

I have a hard time learning what I am teaching here, so I am trying to show in a way even myself in the past could understand.
Also, what I am teaching might be just workarounds I have found, so, please, if you know better, you know something I don't, if I forgot something or you know how to improve something or want to share your knowledge, please please please, comment what you know and help us learn together, I appreciate gathering new knowledge.

Import the APIs to the HTML file

First, an HTML skeleton file looks something like this

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

</body>
</html>

Add the code below before the closing and tags, this MIGHT be redundant, I am currently studying exactly what can I do with dsteem.js, steem.min.js and stemconnect, if you know better, comment down below if this is redundant and what each of the APIs do.

<script src="https://unpkg.com/dsteem@^0.8.0/dist/dsteem.js"></script>
<script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/steemconnect"></script>

The code will look like

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<script src="https://unpkg.com/dsteem@^0.8.0/dist/dsteem.js"></script>
<script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/steemconnect"></script>
</body>
</html>

Using SteemConnect to sign in

This step is not code. You will need to head to https://steemconnect.com/dashboard
Login to SteemConnect on an account that has more than 3 Steem (it is not free to create a new app)

Go to My Apps

Click on New App

Now, the next step will create a Steem account for the app, so you need to keep in mind, as far as I know, you can't change the username, if you are using this for testing purpouses only, this does not matter, but if you want to build a real application, then think twice before choosing a name as this has a cost of 3 Steem (account creation on Steem is not free anymore)

Now the app is created, on the next page you will setup the settings for the app.

Here is what every setting does

App Name: The name of your app, not the username, this can be change at any time
App Description: What is your app about? Usages, etc, like a small pitch about it, like the ones on the app store or google play, it will be shown on the steem apps store if you set it as visible
App Icon: I didn't set this for mine, but I believe this is an url for the icon, or profile picture of your app, correct me if I am wrong, I didn't find size or format specifications
Website: The homepage of your app, if you don't have a website you don't need to fill this, I have put http://127.0.0.1 before I have set a domain and serving for the testing of my project
Redirect URI(s): The URLs the SteemConnect can redirect back after signing in. To avoid having permission issues in the future I have set the main page of the app, the login page and the following pages just in case:
http://localhost:8080
http://localhost:3000
http://social-auth-steemconnect-demo.krzysztofszumny.pl
https://steemconnect.com/api/me
Allowed IPs: I am leaving this blank for now, still studying what it does exactly and will update on new tutorials in the future
Manage the visibility of your application in SteemConnect App Store.: I highly recommend leaving this as "
Not visible" before the launch and the app is fully ready so people won't see a half baked app or something ugly and have a bad first impression before official launch

On the next tutorial

For now this one is already big enough.
On the next tutorial I will show how to get the SteemConnect login URL for your app and how to add a SteemConnect login button on the HTML file. I am working on making something resumed, easy to understand and more practical than the documentation I have found

Hey, I am Witness, did you know?

To vote for me, 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."