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 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.
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:
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.
Open Source Contribution posted via Utopian.io
Thanks for your contribution @jefpatat
Thank you for the contribution. It has been approved.
[utopian-moderator]
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!
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 ;-)
you bet!!
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
Sorry, no experience with heroku. Isn't that a sandbox thing that needs library installation? No idea.
No sweat. Heroku is wonderful though.
I wrote this step by step tutorial for deploying busy app with heroku.
You might find it amazing!!
Basically, it is platform as a service that manages everything related to server.
Hey @jefpatat I am @utopian-io. I have just super-voted you at 8% Power!
Suggestions https://utopian.io/rules
Achievements
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
Congratulations @jefpatat! You have completed some achievement on Steemit and have been rewarded with new badge(s) :
Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here
If you no longer want to receive notifications, reply to this comment with the word
STOPi not uderstand i got error
Uncaught ReferenceError: require is not defined
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_permlinkset to the permlink of the last of the first ten posts, but it doesn't seem to do anything...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.
Its okay, I was hoping someone knew I could ask, but the API is really poorly documented unfortunately.
You could always try the SteemDevs discord. Someone might be able to help you there.
https://discord.gg/RHdcZXx
Thanks, I'll take a look.
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...