Tutorials

Building a Stellar Client – Part 1

Today we will learn how to build a minimal Stellar client.

What is a Stellar client?

Basically it is an application that lets you interact with the Stellar network. A Stellar client can be as simple or as complex as you want. Today we are going to focus on building a client that has these simple features.

  • Create Stellar accounts
  • View Stellar accounts
  • Send Payments

So let’s get started.

Requirements

Our client will be built in Javascript so we can either create a Nodejs application or just have it run within a browser. We will go with the browser-based setup.

To get started you don’t need much, just the following

  • Stellar Javascript SDK
  • Jquery
  • Twitter Bootstrap for styling
  • Web Browser: I use google chrome
  • Text Editor : I use sublime text

Note that Stellar has other SDK’s in Go, Java, Python, Ruby and C#. You can find more information on ┬áthe Stellar API reference page.

Setup index.html

Our client will have one index.html file which will be the entry point to the application

In here we will add the following code

<html>
<head>
 <title>Stellar Client</title>
<!-- Bootstrap core CSS -->
 <link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
 <link href="css/navbar.css" rel="stylesheet">
</head>
<body>
 <div class="container">
 <!-- Static navbar -->
 <nav class="navbar navbar-default">
 <div class="container-fluid">
 <div class="navbar-header">
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="#">Stellar Client</a>
 </div>
 <div id="navbar" class="navbar-collapse collapse">
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">Home</a></li>
 
 
 </ul>
 <ul class="nav navbar-nav navbar-right">
 <li><a href="#"></a></li>
 </ul>
 </div><!--/.nav-collapse -->
 </div><!--/.container-fluid -->
 </nav>
 <!-- Client sections -->
 <div class="row">
 <div class="col-md-4 col-xs-12 section">
 <h3>Create Account</h3>
 <p>
 <span class="badge">1.</span>
 <button class="btn btn-success" id="generateKey">Generate Key Pair</button>
 </p>
<div id="generatedKeys"></div>
<p>
 <span class="badge">2.</span>
 <button class="btn btn-info" id="createAccount">Create Account</button>
 </p>
<div id="createResponse"></div>
</div>
 <div class="col-md-4 col-xs-12 section">
 <h3>View Account</h3>
 </div>
 <div class="col-md-4 col-xs-12 section">
 <h3>Send Payment</h3>
 </div>
 </div>
</div>
</div> <!-- /container -->
<script src="jquery-min.js"></script>
<script src="stellar-sdk.js"></script>
<script src="stellar-client.js"></script>
</body>
</html>

Basically we have created a page with 3 columns. Each of these columns will hold our features.

Creating an account

Now that we have our front page setup, lets implement some of the features of our client.

You might have noticed that we included a file called stellar-client.js in our index.html. This file contains the Javascript functions that will called by the various features of our client.

Its content are

jQuery(document).ready( function($){
  var testNetwork = "https://horizon-testnet.stellar.org";
  var liveNetwork = "https://horizon.stellar.org";
  var friendbot = "https://horizon-testnet.stellar.org/friendbot";


  var server = new StellarSdk.Server(testNetwork);
  var keys = false;


  // generate Key Pair
  $('#generateKey').on('click', function() {
    console.log("generateKey");
    keys = StellarSdk.Keypair.random();
      var output = "Account ID:"+keys.accountId()+"Secret Key: "+keys.seed()+""; 
    $('#generatedKeys').html(output); 
  }); 
 // Create Account 
$('#createAccount').on('click', function() { 
  var resp = $('#createResponse'); 
  if (keys) { 
  resp.html('Creating account ...'); 
  $.get(friendbot, { addr: keys.accountId()}) 
     .done(function(data){ 
           console.log("Data: ",data); 
           resp.html('Account created successfully'); 
     }) 
    .fail(function(error) { 
          console.log("error", error); 
          resp.html('Account creation failed'); 
     }); 
  }else{ alert("Please generate keys"); } }); });

We have a jquery function that is called once the page is loaded
Let us look at each part more closely

  var testNetwork = "https://horizon-testnet.stellar.org";
  var liveNetwork = "https://horizon.stellar.org";
  var friendbot = "https://horizon-testnet.stellar.org/friendbot";
  var server = new StellarSdk.Server(testNetwork);
  var keys = false; //to hold generated keys

Here we are defining some variables with global scope. Note the server and keys variables.

Next we generate the public and private keys when the “Generate Key Pair” button is pressed with

keys = StellarSdk.Keypair.random();

Once the Keys are generated, we create the account

$.get(friendbot, { addr: keys.accountId()})
    .done(function(data){
       console.log("Data: ",data);
       resp.html('Account created successfully'); }) 
     .fail(function(error) { 
        console.log("error", error); 
        resp.html('Account creation failed'); 
});

Note that to create an account on Stellar you need to fund it. Hence, you cannot open an account with zero(0) balance.

Here we are creating an account on the test network and the Stellar friend Bot gives us an initial balance of 10,000 Lumens.
For how to create account on the public network see the tutorial on creating accounts on the public network.

If the account is created successfully, a success message is returned to the user. Otherwise the user is notified accordingly.
That’s it!
We have covered the first feature of our Stellar client in the next parts we will focus on viewing accounts and sending payments.
You can get the full code for this part of the tutorial here.

2 Comments

Leave a Comment