**Outdated: New tutorial can be found on the** [**embark website**](https://embark.status.im/tutorials/token_factory_1.html)

(Disclaimer: this tutorial is for educational purposes only)  
In this tutorial series we’ll create a Token [Factory](https://hackernoon.com/tagged/factory) using [Ethereum](https://hackernoon.com/tagged/ethereum). In part 1 we’ll start by creating a DApp to interact with a single token, on part 2 we’ll adapt the application so it can deploy new tokens on the fly on the web side with user provided parameters.

A Token is typically a unit used to represent a medium of exchange for some service or utility. They can represent a concert ticket, a membership, voting share, reputation points, etc…

note: This tutorial is meant for embark 2.5.2 (not 2.6.0 and above)

### Getting Started

First of all, make sure you have [Go-Ethereum](https://geth.ethereum.org/) and [Embark](http://github.com/iurimatias/embark-framework) installed.

npm -g install embark@2.5.2

Now, let’s create a new dapp

embark new TokenFactory

This will create a directory called TokenFactory, cd to it and run:

embark blockchain

In another console, in the same directory, run:

embark run

You should see something like this:

![](https://hackernoon.com/hn-images/1*wxWsjLLX9YSHAczt0Y4Aow.png)

_note: If you don’t want the console you can instead run:  
 embark run — nodashboard_

Now open your browser at _http://localhost:8000_ , start your favourite editor and let’s get started!

### **Adding the Token Contract**

We’ll add a typical ERC20 token contract to _app/contracts/token.sol_

_warning: this contract is for educational purposes only, do not use it in production unless you know what you are doing_

Embark will automatically detect the new file and deploy the contract. However we quickly notice a problem, in Embark’s console type:

Token.\_supply().toNumber()

![](https://hackernoon.com/hn-images/1*bd-jk-0pACnMEpV2RxUGRA.png)

The supply is zero, that’s because the contract constructor takes a _initial\_balance_ parameter which we haven’t specified:

function Token( **uint** **initial\_balance** ) {  
   \_balances\[msg.sender\] = initial\_balance;  
   **\_supply = initial\_balance;**  
}

Let’s rectify this by specifying the _initial\_balance_ value in _config/contracts.json_

{  
  "default": {  
    "gas": "auto",  
    "contracts": {  
      **"Token": {  
        "args": \[  
          1000  
        \]  
      }**  
    }  
  }  
}

Embark will detect the change and redeploy the contract with the new parameters, afterwards the token supply is 1000 as expected:

![](https://hackernoon.com/hn-images/1*ht7ZSr0FRVRbR7Aizkocug.png)

### Creating the UI

For the sake of brevity, we wouldn’t implement every single functionality in the contract. However, we’ll implement two important features: Checking balance of an address and Transferring Tokens from one address to another.

### Checking address balance

To input the address to query, we’ll edit _app/index.html_ and add a simple form.

<html>  
  <head>  
    <title>Embark</title>  
    <link rel="stylesheet" href="css/app.css">  
    <script src="js/app.js"></script>  
  </head>  
  <body>  
        **<div id="queryBalance">  
      <h3>Query Balance</h3>  
      <input placeholder="enter account address: e.g 0x123" />  
      <button>Query</button>  
      <div class="result"></div>  
    </div>**

  </body>  
</html>

**Adding jQuery**

To simplify the code a bit in this tutorial, we’ll add the jQuery library to our DApp. Download jQuery from [here](https://code.jquery.com/jquery-3.1.1.min.js) and save it in your dapp _app/js/_ folder. Alternatively:

cd app/js/ && wget [https://code.jquery.com/jquery-3.1.1.min.js](https://code.jquery.com/jquery-3.1.1.min.js)

_note: To use libraries such as react, give a look at a plugin such as_ [_embark-babel_](https://github.com/iurimatias/embark-babel)

**Setting the default address**

Let’s add to the input field field our own address as the default text so we can easily query our own balance. create the file app/js/token.js and add:

$(document).ready(function() {

  web3.eth.getAccounts(function(err, accounts) {  
    $('#queryBalance input').val(accounts\[0\]);  
  });

});

This will get the address of the first account and set it as the default text in the input form.

**Querying Balance**

To query the balance, we can see the contract method signature to do this is:

function balanceOf( address who ) constant returns (uint value) {  
    return \_balances\[who\];  
}

This method will be available in the JS code automatically as a promise, like:

Token.balanceOf(address).then(function(balance) { });

So we can simply add a click event to the button, get the address, query the balance and set the result.

$(document).ready(function() {

  web3.eth.getAccounts(function(err, accounts) {  
    $('#queryBalance input').val(accounts\[0\]);  
  });

  **$('#queryBalance button').click(function() {  
    var address = $('#queryBalance input').val();**

    **Token.balanceOf(address).then(function(balance) {  
      $('#queryBalance .result').html(balance.toString());  
    });  
  });**

});

_note: since the balance variable is a Big Integer, to read it it’s necessary to apply either .toNumber() or .toString()_

![](https://hackernoon.com/hn-images/1*JPPDbO0bSa61ZuUz51Um_A.png)

Now go to [http://localhost:](http://localhost:)8000 and click on the Query button, it will return 1000 as expected for our address.

### Transferring Tokens

Now let’s implement transferring tokens!

Now checking the contract, this is the method for transferring tokens:

function transfer( address to, uint value) returns (bool ok)

The method will take two parameters, an address and a value. Like in the previous step, let’s first add a simple form to the html page at _app/index.html_:

<html>  
  <head>  
    <title>Embark</title>  
    <link rel="stylesheet" href="css/app.css">  
    <script src="js/app.js"></script>  
  </head>  
  <body>  
    <h3>Welcome to Embark!</h3>  
    <p>See the <a href="[https://github.com/iurimatias/embark-framework/wiki](https://github.com/iurimatias/embark-framework/wiki)">Wiki</a> to see what you can do with Embark!</p>

    <div id="queryBalance">  
      <h3>Query Balance</h3>  
      <input placeholder="enter account address: e.g 0x123" />  
      <button>Query</button>  
      <div class="result"></div>  
    </div>

    **<div id="transfer">  
      <h3>Transfer Tokens</h3>  
      <input class="address" placeholder="enter account address: e.g 0x123" />  
      <input class="num" placeholder="enter amount to transfer" />  
      <button>Transfer</button>  
      <div class="result"></div>**  
    **</div>**

</body>  
</html>

Then we will add the code to take the address and number of tokens from the inputs and call the contracts transfer method to _app/js/token.js_

$(document).ready(function() {

  web3.eth.getAccounts(function(err, accounts) {  
    $('#queryBalance input').val(accounts\[0\]);  
  });

  $('#queryBalance button').click(function() {  
    var address = $('#queryBalance input').val();

    Token.balanceOf(address).then(function(balance) {  
      $('#queryBalance .result').html(balance.toString());  
    });  
  });

  **$('#transfer button').click(function() {  
    var address = $('#transfer .address').val();  
    var num = $('#transfer .num').val();**

    **Token.transfer(address, num).then(function() {  
      $('#transfer .result').html('Done!');  
    });;  
  });**

});

Let’s go to the UI and transfer 20 tokens to a random address, after clicking Transfer you should see the text ‘Done!’ when the transfer takes effect.

![](https://hackernoon.com/hn-images/1*smDEWwdoQNf8lpe8KzRzWw.png)

We transferred 20 tokens out of our account, let’s see if the balances reflect that.

![](https://hackernoon.com/hn-images/1*JNJZh28OYNVMgAGk2E2crg.png)

![](https://hackernoon.com/hn-images/1*ZYHRwdAzAGkt0qsV9cPf2A.png)

### On to Part 2

In this tutorial we deployed and interacted with single Token. On [part 2](https://medium.com/@iurimatias/how-to-create-a-token-factory-with-ethereum-part-2-ce96a31a5f59#.f1gn45f5m) we will adapt this DApp and create a true factory so new tokens can be dynamically deployed on the application side.

_Donations: If you like this article please consider donating to 0x8811FdF0F988f0CD1B7E9DE252ABfA5b18c1cDb1 (ETH)_

Dapp

Too Long; Didn't Read

Build JavaScript blockchain apps easily with Lisk

How to create a Token Factory with Ethereum — Part 1

Too Long; Didn't Read

Company Mentioned

@iurimatias

RELATED STORIES