Repository: https://github.com/bonuschain/byteball.js https://steemitimages.com/0x0/https://ipfs.busy.org/ipfs/QmT9msxL9VDxgs3xrnP1pNBZRTBj51mKHwwKUhg66Bdmwo image taken from :- [src](https://steemit.com/utopian-io/@fabien/byteball-js-the-javascript-library-for-byteball-is-out) #### What Will I Learn? In brief, write details of what the user is going to learn in a bullet list. - How to integrate Byteball JS library in `index.html`. - Get to know the working of basic functions of Byteball JS. - Create a simple website on which you can easily print all the bots available for Byteball in their bot store. #### Requirements State the requirements the user needs in order to follow this tutorial. - Basic understanding of HTML is required - Basic understanding of Javascript. - Any text editor (Atom, VS code, etc.) - Javascript supported any Web browser with an updated version (e.g. Chrome, Mozilla Firefox, edge etc.) #### Difficulty Choose one of the following options: - Basic #### Tutorial Contents 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. ![divider.png](https://cdn.steemitimages.com/DQmXVNikYR3ak9MkrcCkuMESA9FcUsqKfVMQ6Vr97YS5DEe/divider.png) ## Tutorial Begins From Here: #### 1):-- 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. ``` ``` Below code line in the above code will import Byteball.js liabrary from the soruce. ``` ``` ![grey divider.png](https://cdn.steemitimages.com/DQmevTXhVowAqeMrPDattdaNcKrWpmKcA6JrVxJMccXRcH1/grey%20divider.png) #### 2):-- 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. ![2018-08-30 (2).png](https://cdn.steemitimages.com/DQmfKknysSyPRjvv5xa17q59VQZ6q1nshMYgPd811KUNPT8/2018-08-30%20(2).png) ##### As per library said that all the API methods follows the same pattern in case of callback provided. ![grey divider.png](https://cdn.steemitimages.com/DQmevTXhVowAqeMrPDattdaNcKrWpmKcA6JrVxJMccXRcH1/grey%20divider.png) #### 3):-- 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 from` index.js` and adding a new one from below. * ###### Method to Subscribe to WebSocket notifications. ``` client.subscribe(function(err, result) { console.log(result); }); ``` * ###### Method to Send a message to a node that does not require response. ``` client.justsaying('light/new_address_to_watch', 'BVVJ2K7ENPZZ3VYZFWQWK7ISPCATFIW3'); ``` * ###### Method to Get the list of current witnesses. ``` client.api.getWitnesses(function(err, result) { console.log(result); }); ``` * ###### Method to Get the list of the current peers. ``` client.api.getPeers(function(err, result) { console.log(result); }); ``` * ###### Method to Get the last main chain index of the node you logged to. ``` client.api.getLastMci(function(err, result) { console.log(result); }); ``` * ###### Method to Get the list of current chatbots. ``` client.api.getBots(function(err, result) { console.log(result); }); ``` ##### These methods don't require any special input and only return a global outcome. ![grey divider.png](https://cdn.steemitimages.com/DQmevTXhVowAqeMrPDattdaNcKrWpmKcA6JrVxJMccXRcH1/grey%20divider.png) #### 4):-- Creating a webpage that will print all the bot names in **byteball bot store** and their description:- * First, include jquery inside the project's `index.html file` and a `ul` tag, Simply copy and paste the below code inside `index.html` byte replacing old code. ```

``` ###### Note:- Add jquery before any other library so other libraries can easily overwrite any functions of jquery if required... 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[i].name +'

'+ result[i].description +'

') } }); ``` ###### Double-click to open `index.html` in the browser and you see something like... ![2018-08-30 (8).png](https://cdn.steemitimages.com/DQmQQCFGCPph6LM4C8J94ZvGPBaG2XhdX46U5wSwrQ2v6fr/2018-08-30%20(8).png) ![2018-08-30 (7).png](https://cdn.steemitimages.com/DQmWDjVzNK8CNmHiz1tskdkgdMwvSTC1hCi9PYrmvS8WqFv/2018-08-30%20(7).png) ![divider.png](https://cdn.steemitimages.com/DQmXVNikYR3ak9MkrcCkuMESA9FcUsqKfVMQ6Vr97YS5DEe/divider.png) #### Proof of Work Done https://github.com/genievot/byteballjs