create account

Getting started with Steem.js - make the most basic blog possible by jefpatat

View this thread on: hive.blog |  peakd.com |  ecency.com
utopian-io · @jefpatat ·
$15.48
Getting started with Steem.js - make the most basic blog possible
Steem.js is a javascript library to interface the steem blockchain. It is maintained by steemit but unfortunately it is very poorly documented. There is [one document](https://github.com/steemit/steem-js/tree/master/doc) describing the functions available in the API and even that is worth close to nothing. Input and output parameters are not described and if I understand correctly from code reading it doesn't even list all the API. There seem to be async functions as well which are not described in the document. Basically the only way to get somewhere is reading the code, reading the blockchain code, googling and asking for help. Every little piece of information is  more than welcome to newcomers. Here I will give a short example of how to make your own blog on top of the steem blockchain.

#### Content Delivery Network
To keep this example simple I'm not going to install or host anything. To do this we reference the Content Delivery Network or CDN. There are several CDNs available but most of them only host the famous content. We will reference `//cdn.steemjs.com/lib/latest/steem.min.js`. The basic html looks like this:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>   
      </head>
    </html>

#### Fetch the blog posts

I put the javascript code in a separate file because that makes it easier to debug. It only has one function that fetches the last 10 blog entries and logs it to the console:

    function fillBlogEntries(username)
    {
      steem.api.getDiscussionsByBlog({tag: username, limit: 10}, function(err, blog) 
        {
          console.log(blog);
        });
    }

Running this scripts outputs this on the console. An array with 10 elements where each entries has many properties about the blog entry. With this we can build a basic blog.

<center>![Console.PNG](https://res.cloudinary.com/hpiynhbhq/image/upload/v1510314844/n3h5x38x91ftzsvgaih2.png)</center>

#### Adding links to the blog posts on the html page
To put it all together we have to modify the script so that it generates html links and adds them to the html page. To do this we need to change both the html page and the script. The html page needs to have an element with an id we can reference from the code and it will need to call the script.  I also added a reference to json because it's just makes the script easier.

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>
        <script type="text/javascript" src="script.js"></script>   
      </head>
      <body> 
        <div id="blog"></div>
        <script>fillBlogEntries('jefpatat');</script>
      </body>
    </html>

The script is adapted to create the needed html:

    function fillBlogEntries(username)
    {
      steem.api.getDiscussionsByBlog({tag: username, limit: 10}, function(err, blog) 
        {
          var blogContainer = $('#blog');
          for (var i = 0; i < blog.length; i++) 
          {
            blogContainer.append('<div><a target="_blank" href="https://steemit.com' + 
			  blog[i].url + '">'+ blog[i].created + ' ' + blog[i].title  + '</div></a>');
          }
        });
    }

This is all content required. Create two files. Name one blog.html and paste in the html. Name the other script.js and past in the javascript. Put them both in the same folder and open the html file in your favorite browser and you should see the most basic steem blog possible:

<center>![Result.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1510314876/ow0dxghu782q92sq06jj.png)
</center>

I couldn't think of a more basic example. I tried to beautify it a bit by adding the image but that's not as easy as and I left it out. The reason is that the several blockchain interfaces (steemit.com, busy.org, ...) handle them different and it requires some logic to extract.

<br /><hr/><em>Open Source Contribution posted via <a href="https://utopian.io/utopian-io/@jefpatat/getting-started-with-steem-js-make-the-most-basic-blog-possible">Utopian.io</a></em><hr/>
👍  , , , , , , , , , , , , , , , ,
properties (23)
authorjefpatat
permlinkgetting-started-with-steem-js-make-the-most-basic-blog-possible
categoryutopian-io
json_metadata"{"community":"utopian","app":"utopian/1.0.0","format":"markdown","repository":{"id":63857882,"name":"steem-js","full_name":"steemit/steem-js","owner":{"login":"steemit","id":17434692,"avatar_url":"https://avatars3.githubusercontent.com/u/17434692?v=4","gravatar_id":"","url":"https://api.github.com/users/steemit","html_url":"https://github.com/steemit","followers_url":"https://api.github.com/users/steemit/followers","following_url":"https://api.github.com/users/steemit/following{/other_user}","gists_url":"https://api.github.com/users/steemit/gists{/gist_id}","starred_url":"https://api.github.com/users/steemit/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/steemit/subscriptions","organizations_url":"https://api.github.com/users/steemit/orgs","repos_url":"https://api.github.com/users/steemit/repos","events_url":"https://api.github.com/users/steemit/events{/privacy}","received_events_url":"https://api.github.com/users/steemit/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/steemit/steem-js","description":"Steem.js the official JavaScript library for Steem blockchain","fork":false,"url":"https://api.github.com/repos/steemit/steem-js","forks_url":"https://api.github.com/repos/steemit/steem-js/forks","keys_url":"https://api.github.com/repos/steemit/steem-js/keys{/key_id}","collaborators_url":"https://api.github.com/repos/steemit/steem-js/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/steemit/steem-js/teams","hooks_url":"https://api.github.com/repos/steemit/steem-js/hooks","issue_events_url":"https://api.github.com/repos/steemit/steem-js/issues/events{/number}","events_url":"https://api.github.com/repos/steemit/steem-js/events","assignees_url":"https://api.github.com/repos/steemit/steem-js/assignees{/user}","branches_url":"https://api.github.com/repos/steemit/steem-js/branches{/branch}","tags_url":"https://api.github.com/repos/steemit/steem-js/tags","blobs_url":"https://api.github.com/repos/steemit/steem-js/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/steemit/steem-js/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/steemit/steem-js/git/refs{/sha}","trees_url":"https://api.github.com/repos/steemit/steem-js/git/trees{/sha}","statuses_url":"https://api.github.com/repos/steemit/steem-js/statuses/{sha}","languages_url":"https://api.github.com/repos/steemit/steem-js/languages","stargazers_url":"https://api.github.com/repos/steemit/steem-js/stargazers","contributors_url":"https://api.github.com/repos/steemit/steem-js/contributors","subscribers_url":"https://api.github.com/repos/steemit/steem-js/subscribers","subscription_url":"https://api.github.com/repos/steemit/steem-js/subscription","commits_url":"https://api.github.com/repos/steemit/steem-js/commits{/sha}","git_commits_url":"https://api.github.com/repos/steemit/steem-js/git/commits{/sha}","comments_url":"https://api.github.com/repos/steemit/steem-js/comments{/number}","issue_comment_url":"https://api.github.com/repos/steemit/steem-js/issues/comments{/number}","contents_url":"https://api.github.com/repos/steemit/steem-js/contents/{+path}","compare_url":"https://api.github.com/repos/steemit/steem-js/compare/{base}...{head}","merges_url":"https://api.github.com/repos/steemit/steem-js/merges","archive_url":"https://api.github.com/repos/steemit/steem-js/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/steemit/steem-js/downloads","issues_url":"https://api.github.com/repos/steemit/steem-js/issues{/number}","pulls_url":"https://api.github.com/repos/steemit/steem-js/pulls{/number}","milestones_url":"https://api.github.com/repos/steemit/steem-js/milestones{/number}","notifications_url":"https://api.github.com/repos/steemit/steem-js/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/steemit/steem-js/labels{/name}","releases_url":"https://api.github.com/repos/steemit/steem-js/releases{/id}","deployments_url":"https://api.github.com/repos/steemit/steem-js/deployments","created_at":"2016-07-21T09:54:16Z","updated_at":"2017-11-10T02:20:28Z","pushed_at":"2017-11-03T16:00:06Z","git_url":"git://github.com/steemit/steem-js.git","ssh_url":"git@github.com:steemit/steem-js.git","clone_url":"https://github.com/steemit/steem-js.git","svn_url":"https://github.com/steemit/steem-js","homepage":"https://www.npmjs.com/package/steem","size":11329,"stargazers_count":166,"watchers_count":166,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":64,"mirror_url":null,"archived":false,"open_issues_count":32,"forks":64,"open_issues":32,"watchers":166,"default_branch":"master","score":106.8179},"pullRequests":[],"platform":"github","type":"documentation","tags":["utopian-io","steemdev","dev","javascript","nodejse"],"links":["https://github.com/steemit/steem-js/tree/master/doc","https://res.cloudinary.com/hpiynhbhq/image/upload/v1510314844/n3h5x38x91ftzsvgaih2.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1510314876/ow0dxghu782q92sq06jj.png"],"image":["https://res.cloudinary.com/hpiynhbhq/image/upload/v1510314844/n3h5x38x91ftzsvgaih2.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1510314876/ow0dxghu782q92sq06jj.png"]}"
created2017-11-10 12:01:15
last_update2017-11-10 12:01:15
depth0
children17
last_payout2017-11-17 12:01:15
cashout_time1969-12-31 23:59:59
total_payout_value11.410 HBD
curator_payout_value4.073 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length4,203
author_reputation26,609,526,234,408
root_title"Getting started with Steem.js - make the most basic blog possible"
beneficiaries
0.
accountajvest
weight3
1.
accountbillbutler
weight3
2.
accountelear
weight142
3.
accountmasterthematrix
weight2
4.
accountmateria
weight2
5.
accountmisterdelegation
weight641
6.
accountned
weight636
7.
accountwackou
weight62
max_accepted_payout1,000,000.000 HBD
percent_hbd0
post_id19,953,747
net_rshares8,159,086,267,292
author_curate_reward""
vote details (17)
@antonchanning · 
How do you get the next 10 posts in this example? Say after a button press of 'get more posts'. I have tried adding a query option of `start_permlink` set to the permlink of the last of the first ten posts, but it doesn't seem to do anything...
properties (22)
authorantonchanning
permlinkre-jefpatat-getting-started-with-steem-js-make-the-most-basic-blog-possible-20180630t160602234z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-06-30 16:06:03
last_update2018-06-30 16:06:03
depth1
children4
last_payout2018-07-07 16:06:03
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length244
author_reputation7,604,491,257,909
root_title"Getting started with Steem.js - make the most basic blog possible"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id62,888,754
net_rshares0
@jefpatat ·
$0.04
That's the only hint I could have given you. I didn't tried that myself. Maybe you can find a clue in the condensor or busy sourcecode.
👍  
properties (23)
authorjefpatat
permlinkre-antonchanning-re-jefpatat-getting-started-with-steem-js-make-the-most-basic-blog-possible-20180702t133725112z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-07-02 13:37:12
last_update2018-07-02 13:37:12
depth2
children3
last_payout2018-07-09 13:37:12
cashout_time1969-12-31 23:59:59
total_payout_value0.034 HBD
curator_payout_value0.010 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length135
author_reputation26,609,526,234,408
root_title"Getting started with Steem.js - make the most basic blog possible"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd0
post_id63,136,272
net_rshares19,440,091,760
author_curate_reward""
vote details (1)
@antonchanning · 
Its okay, I was hoping someone knew I could ask, but the API is really poorly documented unfortunately.
properties (22)
authorantonchanning
permlinkre-jefpatat-re-antonchanning-re-jefpatat-getting-started-with-steem-js-make-the-most-basic-blog-possible-20180704t175944901z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-07-04 17:59:45
last_update2018-07-04 17:59:45
depth3
children2
last_payout2018-07-11 17:59:45
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length103
author_reputation7,604,491,257,909
root_title"Getting started with Steem.js - make the most basic blog possible"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id63,419,507
net_rshares0
@espoem · 
Thank you for the contribution. It has been approved.

[[utopian-moderator]][moderators]

[moderators]:  https://utopian.io/moderators
properties (22)
authorespoem
permlinkre-jefpatat-getting-started-with-steem-js-make-the-most-basic-blog-possible-20171110t144010103z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2017-11-10 14:40:09
last_update2017-11-10 14:40:09
depth1
children0
last_payout2017-11-17 14:40:09
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length134
author_reputation59,289,149,412,912
root_title"Getting started with Steem.js - make the most basic blog possible"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id19,965,870
net_rshares0
@jrej · 
Thanks for sharing this! I'm currently learning web development and I'm very interested in building Steemit app. This will help immensily. It seems accessible enough...
properties (22)
authorjrej
permlinkre-jefpatat-getting-started-with-steem-js-make-the-most-basic-blog-possible-20190309t171937955z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2019-03-09 17:19:45
last_update2019-03-09 17:19:45
depth1
children0
last_payout2019-03-16 17:19:45
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length168
author_reputation34,006,204,340,070
root_title"Getting started with Steem.js - make the most basic blog possible"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id80,974,157
net_rshares0
@moderators · 
i not uderstand i got error
Uncaught ReferenceError: require is not defined
properties (22)
authormoderators
permlinkre-jefpatat-getting-started-with-steem-js-make-the-most-basic-blog-possible-20180227t130454093z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"busy","app":"busy/2.4.0"}
created2018-02-27 13:04:54
last_update2018-02-27 13:04:54
depth1
children0
last_payout2018-03-06 13:04:54
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length76
author_reputation251,411,212,123
root_title"Getting started with Steem.js - make the most basic blog possible"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,864,756
net_rshares0
@petoz · 
Thanks for your contribution @jefpatat
properties (22)
authorpetoz
permlinkre-jefpatat-getting-started-with-steem-js-make-the-most-basic-blog-possible-20171110t120420208z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"users":["jefpatat"],"app":"steemit/0.1"}
created2017-11-10 12:04:27
last_update2017-11-10 12:04:27
depth1
children0
last_payout2017-11-17 12:04:27
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length38
author_reputation2,296,996,259,218
root_title"Getting started with Steem.js - make the most basic blog possible"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id19,953,971
net_rshares0
@shreyasgune · 
I am trying it out tonight!
I usually try out everything from GitHub and Hiroku. Hope it will be easily deployable by heroku.

Thanks a lot for this tutorial. It's a sincere request: Please make more such tutorial which any noob can understand and learn by directly implementing it. After all we need to brush up our game if we are to seriously contribute to open source software development!
properties (22)
authorshreyasgune
permlinkre-jefpatat-getting-started-with-steem-js-make-the-most-basic-blog-possible-20171110t155048291z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2017-11-10 15:50:51
last_update2017-11-10 15:50:51
depth1
children5
last_payout2017-11-17 15:50:51
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length392
author_reputation4,924,803,411,962
root_title"Getting started with Steem.js - make the most basic blog possible"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id19,971,772
net_rshares0
@jefpatat · 
I plan to make a follow up on it, but that's not always easy because things can getvery complex very fast. We'll see, stay tuned ;-)
properties (22)
authorjefpatat
permlinkre-shreyasgune-re-jefpatat-getting-started-with-steem-js-make-the-most-basic-blog-possible-20171110t155506515z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2017-11-10 15:55:00
last_update2017-11-10 15:55:00
depth2
children4
last_payout2017-11-17 15:55:00
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length132
author_reputation26,609,526,234,408
root_title"Getting started with Steem.js - make the most basic blog possible"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id19,972,078
net_rshares0
@shreyasgune · 
you bet!!
properties (22)
authorshreyasgune
permlinkre-jefpatat-re-shreyasgune-re-jefpatat-getting-started-with-steem-js-make-the-most-basic-blog-possible-20171110t171728907z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"busy","app":"busy/2.0.0"}
created2017-11-10 17:17:30
last_update2017-11-10 17:17:30
depth3
children0
last_payout2017-11-17 17:17:30
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length9
author_reputation4,924,803,411,962
root_title"Getting started with Steem.js - make the most basic blog possible"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id19,979,375
net_rshares0
@shreyasgune · 
I followed the tutorial and I could get the blog. But, I could deploy it through heroku after certain changes but the blog does not show up. Can you check this ?

Here is my github repo for this:

https://github.com/shreyasgune1/steemblog
properties (22)
authorshreyasgune
permlinkre-jefpatat-re-shreyasgune-re-jefpatat-getting-started-with-steem-js-make-the-most-basic-blog-possible-20171111t071233548z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"links":["https://github.com/shreyasgune1/steemblog"],"app":"steemit/0.1"}
created2017-11-11 07:12:33
last_update2017-11-11 07:12:33
depth3
children2
last_payout2017-11-18 07:12:33
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length238
author_reputation4,924,803,411,962
root_title"Getting started with Steem.js - make the most basic blog possible"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id20,030,073
net_rshares0
@steemitboard · 
Congratulations @jefpatat! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

[![](https://steemitimages.com/70x80/http://steemitboard.com/notifications/voted.png)](http://steemitboard.com/@jefpatat) Award for the number of upvotes received

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click [here](https://steemit.com/@steemitboard)

If you no longer want to receive notifications, reply to this comment with the word `STOP`

> By upvoting this notification, you can help all Steemit users. Learn how [here](https://steemit.com/steemitboard/@steemitboard/http-i-cubeupload-com-7ciqeo-png)!
👍  
properties (23)
authorsteemitboard
permlinksteemitboard-notify-jefpatat-20171112t065229000z
categoryutopian-io
json_metadata{"image":["https://steemitboard.com/img/notifications.png"]}
created2017-11-12 06:52:27
last_update2017-11-12 06:52:27
depth1
children0
last_payout2017-11-19 06:52:27
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length695
author_reputation38,975,615,169,260
root_title"Getting started with Steem.js - make the most basic blog possible"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id20,119,255
net_rshares0
author_curate_reward""
vote details (1)
@utopian-io · 
### Hey @jefpatat I am @utopian-io. I have just super-voted you at 8% Power!
#### Suggestions https://utopian.io/rules
- Average amount of information. Good but you can do better!
- Your contribution is less informative than others in this category.
- Utopian has detected 1 bot votes. I am the only bot you should love!!
#### Achievements
- You have less than 500 followers. Just gave you a gift ;)
- Seems like you contribute quite often. AMAZING!
**Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x**
properties (22)
authorutopian-io
permlinkre-jefpatat-getting-started-with-steem-js-make-the-most-basic-blog-possible-20171110t182336252z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2017-11-10 18:23:36
last_update2017-11-10 18:23:36
depth1
children0
last_payout2017-11-17 18:23:36
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length601
author_reputation152,955,367,999,756
root_title"Getting started with Steem.js - make the most basic blog possible"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id19,985,259
net_rshares0
Help/Feedback