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