Prepare Your Project & Start Coding: XUMM SDK

Lets install the software and packages needed to run a nodejs application and try to connect with the XUMM platform.

Software Required

1. Visual Studio Code Editor
2. Nodejs

Package To Be Installed

xumm-sdk (install via node package manager).

Video Tutorial: Prepare Your Project & Start Coding: XUMM SDK


[youtube https://www.youtube.com/watch?v=pgSckFopZ6Q]

YouTube Link: https://www.youtube.com/watch?v=pgSckFopZ6Q [Watch the Video In Full Screen.]

Lets test our installation

After installing Visual Studio Code Editor and Nodejs, lets create a new project. Create a file called index.js inside the project folder.
index.js

console.log("WELCOME TO XUMM SDK/API VIDEO TUTORIALS!")

Running Node Application
Command

 >node index.js

Output
WELCOME TO XUMM SDK/API VIDEO TUTORIALS!

If you get above output then your installation is working correctly. Lets move forward.

Installing xumm-sdk Package

Lets install xumm-sdk node package and try to connect with XUMM platform.

npm install xumm-sdk

It might take couple of seconds to couple of minutes depending on your internet connection speed. So you may have to wait patiently.

Error Message: Your npm doesn’t work with the version of Node

If you start getting error messages like: “npm WARN npm npm does not support Node.js” Just download lower version of Nodejs and try to run the program once again. In most of the cases the issue will be resolved.

Source Code: Importing xumm-sdk package into our project

const {XummSdk} = require('xumm-sdk')
const Sdk = new XummSdk('Your-API-Id', 'Your-API-Secret')

const main = async () => {
  console.log('XUMM SDK VIDEO TUTORIALS!')
}

main()

Run The Application
Command

 >node index.js

Output
XUMM SDK VIDEO TUTORIALS!

In the first line, we are importing xumm-sdk package. Next we create an instance of XummSdk, by passing XUMM application credentials.

Next we write a asynchronous function, which creates a child progress or a thread and waits for the response. Meanwhile the main thread or the main process continues to execute the code after it.

In above code, we simply output a message to the console window.

Note: By connecting to XUMM platform we can indirectly interact with XRP Ledger(XRPL).

For full “XUMM SDK/API” free video tutorial list visit: Working With XUMM SDK/API: XRPL

callback methods / anonymous functions: jQuery

Today lets see how callback methods or anonymous functions work. We also show you the anatomy of callback methods.

callback-method-anonymous-function-javascript-jquery-nodejs

callback methods are very important for achieving asynchronous way of coding.

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< !DOCTYPE html>
<html>
<head>
<title>callback or anonymous function</title>
<script src="jquery-1.10.2.min.js"></script>
<script src="myScript.js"></script>
</head>
<body>
 
<p></p>
<div></div>
 
</body>
</html>

Here we have included jQuery library and myScript.js We also have a paragraph tag and a div tag, to be filled with some data by myScript.js file.

JavaScript file
myScript.js

1
2
3
4
$(document).ready(function(){
 $("p").hide("slow");
 alert("Stop!");
});

Here the paragraph hide is called and before it finishes hiding, alert is called and every other operation of the webpage is halt until the user responds to the alert window. But if we want the paragraph to be hidden first and only after the paragraph is completely hidden we need to call the alert, in such case use callback methods as shown below:

JavaScript file: callback method
myScript.js

1
2
3
4
5
$(document).ready(function(){
 $("p").hide("slow", function(){
        alert("Stop!");
 });
});

If you want multiple things to occur after hiding the text(in above case) , you can nest the callback methods.

Anatomy of callback methods
JavaScript file: callback method
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function(){
eat("pizza", "cola", function(){
$("div").html("I had my food!");
});
 
});
 
function eat(food, drink, callback)
{
$("p").html("I ate "+food+" and had a "+drink);
 
if(callback && typeof(callback) === "function" )
{
callback();
}
 
}

Here we have a method called eat, which takes 3 parameters. First two are variable type and the 3rd parameter is a function type argument.

Once the page loads, we call eat method and pass pizza, cola and a callback method to it. After the first 2 variable values are displayed, eat method checks if the 3rd parameter is actually present and is a function – if so, it’ll call the function. So, the callback method is called after its preceding arguments are processed.

Anatomy and Working of Callback methods / anonymous functions


[youtube https://www.youtube.com/watch?v=lIPOER59ZSY]

YouTube Link: https://www.youtube.com/watch?v=lIPOER59ZSY [Watch the Video In Full Screen.]



Examples:
1. If we have calls to Facebook API, Twitter API and Google Finance API’s: Using JavaScript(jQuery or nodejs) we could send the request to all these API’s concurrently and not worry much about its response time. Once any of these API’s respond, the corresponding callback methods are called. So while these scripts are executed, it binds the callback methods to its calls, and then stops worrying about its response!

2. Many ad networks have implemented asynchronous ad codes, since these codes use callback methods and there is no need for the webpage to wait until the ad server responds. If and when the ad server responds with an ad, the page or the ad spot is filled with the ad.