Repository: https://github.com/bonuschain/byteball.js
In brief, write details of what the user is going to learn in a bullet list.
index.html.State the requirements the user needs in order to follow this tutorial.
Choose one of the following options:
I will be teaching in this post that how to work with Byteball JS library and how to create your first webpage with this library by creating an example of showing bots from the Byteball bot store that will teach you the basics of it.
Create a project directory and inside it create an index.html file. Open the file with any text or code editor and paste the following code in it.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/byteball.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
Below code line in the above code will import Byteball.js liabrary from the soruce.
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/byteball.min.js"></script>
Inside the same project directory, Create a file named index.js. Open the file and add below code in it.
//Printing genesis block details. Find out here:- https://explorer.byteball.org/
const client = new byteball.Client(); // This will initialize the byteball js and if on npm then you need require keyword.
client.api.getJoint('oj8yEksX9Ubq7lLc+p6F2uyHUuynugeVq4+ikT67X6E=', function(err, result) {
console.log(err, result);
});
Now save everything and open the index.html file in a browser by double-clicking over it. Didn't see anything? Press F12 (if on chrome or if on any other browser then search for it to open console window) and go inside the console window expand the output and you should see something like that.
These are a few functions that will print console.log outputs, You can try one by one and try to understand there working. You can do that by removing old code fromindex.js and adding a new one from below.
client.subscribe(function(err, result) {
console.log(result);
});
client.justsaying('light/new_address_to_watch', 'BVVJ2K7ENPZZ3VYZFWQWK7ISPCATFIW3');
client.api.getWitnesses(function(err, result) {
console.log(result);
});
client.api.getPeers(function(err, result) {
console.log(result);
});
client.api.getLastMci(function(err, result) {
console.log(result);
});
client.api.getBots(function(err, result) {
console.log(result);
});
Creating a webpage that will print all the bot names in byteball bot store and their description:-
index.html file and a ul tag, Simply copy and paste the below code inside index.html byte replacing old code.<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul id="bots">
</ul>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/byteball.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
Add the following code in the project's index.js by replacing any old code.
const client = new byteball.Client();
client.api.getBots(function(err, result) {
for(let i=0; i<result.length; i++)
{
$('#bots').append(''
'
+ result[i].description +'
')
}
});
index.html in the browser and you see something like...