Build matrix like Steem Stream with SteemJs
Introduction
This is going to be the first tutorial in the tutorial series I will be starting. I am working on a couple of Steem projects and I will share my learnings from the project as Tutorial Series. This tutorial intends to be the "Hello World" program of coding on Steem Blockchain. In this tutorial we will create a simple activity stream which shows the latest activity on the blockchain. To make things a little interesting I will format it in the Matrix style. You will know what I mean once you look at the demo. If you just want to take sneak peak at what we will be achieving before starting the tutorial take a look at https://nkgokul.github.io/steem-tutorials/SteemStream.html
What will you learn?
In this tutorial you will learn
- How to use SteemJS
- How to use
steem.api.streamTransactionfunction to check for transactions from the latest blocks. - Create a basic HTML that will display the steem stream in a matrix like fashion.
Requirements
These are good to have requirements. Even if you don't know these you can still read the tutorial and make sense out of it.
- Basics of HTML
- Basics of Javascript
Difficulty
- Basic. You can take a look at the code even if you are not from a development background. I will be happy to answer any queries you have in the comments section.
Create a HTML skeleton
<body>
<div id="gokul-details">
<h3>This example was created by <a href="https://www.steemit.com/@gokulnk" target="_blank">@gokulnk</a></h3>
</div>
<div id="steem-data-wrapper">
<h2>Please wait while fetching the data from Steem Blockchian.</h2>
</div>
</body>
Within the body tag create a div which we will use to populate the contents of our data stream from Steem blockchain.
Add relevant javascript files
In your head tag add the following scripts
<script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
The first script is the minified version of SteemJS library which will help us interact with the steem blockchain direction from the javascript/browser.
The second script is the jQuery library file which simplifies DOM manipulations and saves time in performing the frequently used actions in javascript. We will use these two files in all the browser based tutorials going forward.
Understanding steem.api.streamTransactions function
The takeaway from this tutorial will be how to use steem.api.streamTransactions function
console.log('hello, is this working')
var counter = 1;
const BASEURL = 'https://steemit.com/'
const ACCOUNT_NAME = 'gokulnk'
steem.api.setOptions({ url: 'https://api.steemit.com' });
steem.api.streamTransactions('head', function(err, result) {
let txType = result.operations[0][0]
let txData = result.operations[0][1]
jQuery('#steem-data-wrapper').prepend('<div class="stream-activity' + counter + '">' + counter++ + ' ' + getMessagefromTransaction(txType, txData) + '</div>');
});
In this code we are doing a couple of things.
- setup some variables like counter and BASEURL variables which we will be using erstwhile.
steem.api.setOptions({ url: 'https://api.steemit.com' });sets the url of the endpoint to https://api.steemit.com. Recently there were some changes made to the endpoints and a couple of witness servers were not working. In case you are getting any errors google for other endpoints and update them accordingly.- Minitor the blockchain with
steem.api.streamTransactionsfunction, decorate/process them using the functiongetMessagefromTransaction(txType, txData) - Using jQuery prepend the output to the div we created earlier in HTML with id "steem-data-wrapper". We will be using jQuery for prepending this value.
The processing function
The processing function uses a switch case to identify the different types of transactions and returns a relevant activity message.
function getMessagefromTransaction(txType, txData) {
//console.log(txType, txData) ;
//console.log(txType, JSON.stringify(txData)) ;
var custom_json;
switch (txType) {
case 'vote':
return steemAuthorLink(txData.voter) + ' upvoted ' + steemAuthorLink(txData.author) + "'s post " + getLink(txData.title, steemBlogFullurl(txData.author, txData.permlink));
// statements_1
break;
case 'comment':
if (txData.parent_author == ''){
return steemAuthorLink(txData.author) + ' created a post ' + getLink(txData.title, steemBlogFullurl(txData.author, txData.permlink));
}else {
return steemAuthorLink(txData.author) + ' posted a comment' + ' on '+ getLink(txData.permlink, steemBlogFullurl(txData.author, txData.permlink));
}
break;
case 'transfer':
return steemAuthorLink(txData.from) + ' transferred ' + txData.amount + ' to '+ steemAuthorLink(txData.to) + ' with the memo "' + txData.memo + '"';
break;
case 'claim_reward_balance':
return steemAuthorLink(txData.account) + ' claimed his remaining rewards balance of ' + txData.reward_steem + ", "+ txData.reward_sbd + " and " + txData.reward_vests;
console.log(txType, txData) ;
break;
case 'custom_json':
if (txData.id == 'follow') {
custom_json = JSON.parse(txData.json);
return steemAuthorLink(custom_json[1].follower) + ' followed ' + steemAuthorLink(custom_json[1].following);
}
default:
return txType + ' ' + JSON.stringify(txData).substring(0,300) + ((txData.length > 300) ? "....." : "");
break;
}
}
Following Helper functions are used to generate links to the authors and blogs.
function steemBlogFullurl(author, permlink) {
return BASEURL + '@' + author + '/' + permlink;
}
function steemBlogFullurl(author, permlink) {
return BASEURL + '@' + author + '/' + permlink;
}
function steemAuthorFullurl(author) {
return BASEURL + '@' + author;
}
function steemAuthorLink(author) {
return getLink('@' + author, steemAuthorFullurl(author));
}
function getLink(linkText, targetLink) {
if (typeof linkText == "undefined" || linkText == ''){
linkText = targetLink;
}else if (typeof targetLink === "undefined") {
targetLink = linkText;
}
return `<a href = ${targetLink} target="_blank">${linkText}</a>`;
}
Final notes.
You can checkout the final code and the demo to see what you have created with the help of this tutorial.
Curriculum
If you are a developer and would like to kickcstart your learning you can check the following link to set up your dev environments and tools. As I write further tutorials I will add them to the list.
- Steem Development Tools and Details
- For easier I will keep updating the code and demo links on github pages
Credits
@sambillingham tutorials were really helpful for me to get started with Steem Blockchain development. He is working on a slew of great projects and you should check them out when you have a chance. I have used his code samples as a starting point in utility projects that I am working on.
Posted on Utopian.io - Rewarding Open Source Contributors
Thank you for the contribution. It has been approved.
Haven't seen this for sure! Really interesting, thanks for the contribution.
You can contact us on Discord.
[utopian-moderator]
Thank you @deathwing for reviewing. Can you let me know how I can become a moderator so that I can also review some dev projects?
@elear this post doesn't appear under reviewed or flagged or pending . Since this post is under review shouldn't it appear under pending tab ??
Hey @gokulnk I am @utopian-io. I have just upvoted you!
Achievements
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
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