There are challenges when reading a technical article or blog, but on the other side of the chain (see what I did there), I find that one of the hardest part for the writer is trying to decide when and how to introduce particular pieces and ideas.

Most times, we try to talk about creating an interface as soon as possible. I’m not going to lie, it’s exciting to see the visual results of code, and it makes it feel like you’re making quick progress.

But I’ve gone ahead and taken this away from you by doing all that, let me tell you why:

Sometimes you get so caught up with trying to make the front end look exactly like you want it that you focus less on the back-end. If we talk about the front-end too much, we may lose track of what we are really trying to accomplish, with a lot of “wouldn’t it be cool if I added this input box, or made this fade, etc”.

With that being said, we’ll start by creating and managing a contract within our project. I know this isn’t going to be a mind blowing topic, but if we can just slow it down a bit and get a little bit of an understanding, it will help in building out a strong understanding of Dapps for the future.

Solidity

One of the main features of the scoreboard Dapp is the list of players. Without those names showing in the interface, we can’t really do much. I would say that this is a good place to start. Right now the Dapp is just pulling from a static JSON file, which leaves us 2 things to consider:

1. Where do we really want to store the data associated with each player?

2. How can we then display this information in place of the JSON data within our scoreboard interface

We’ll be answering the second question in the later posts, but when it comes to the first question: “Where do we really want to store the data associated with each player?”

The right answer would be “on the ethereum blockchain”, using a smart contract.

To be specific, we’re going to create a struct, which will contain each type of data used to define a player.

My Note to You: What is a struct exactly? — A struct is a data type used for representing entities that have multiple attributes of potentially different types.

For example:

struct Dog {

string name;

string breed;

string color;

uint age;

}

To do this lets open create a file in the “contracts” folder and name it “Users.sol”.

Everyone has their own style of programming, so by no means do you have to do the same thing that I do. But what I usually do before I start programming, is to just create a simple framework inside the file of what I want to accomplish.

Now let’s go down the list and hash out the rest of the code

//define our version

pragma solidity ^0.4.15;

//initialize our contract (don’t forget the closing curly brace)

contract Users { }

//Create our user struct

struct Participant {

uint id;

bytes32 name;

uint point;

}

//define our stat variables

Participant[] public users;

uint userCount;

//add new users

function addUser(bytes32 userName, uint userPoint) returns (uint userID, bool success) {

userID = userCount++;



Participant memory newUser;

newUser.id = userID;

newUser.name = userName;

newUser.point = userPoint;



users.push(newUser);

return(userID, true);

}

//get a list of users

function getUsers() constant returns (uint[], bytes32[], uint[]) {

uint length = users.length;



uint[] memory usersID = new uint[](length);

bytes32[] memory userNames = new bytes32[](length);

uint[] memory userPoints = new uint[](length);



for (uint i = 0; i < users.length; i++) {

Participant memory showUser;

showUser = users[i];



usersID[i] = showUser.id;

userNames[i] = showUser.name;

userPoints[i] = showUser.point;

}

return(usersID, userNames, userPoints);

}

// change the point total for user

function plusFive(uint id) returns (bool success) {

users[id].point = users[id].point + 5;

return true;

}

Your code should look something like this

My Note to You: In solidity a function cannot return a struct, so you have to return an array of an array. Strings can be any length, and this is an issue in solidity, so we have to change the strings into a fixed length using bytes32. So by changing it to hexadecimal we ensure that we don’t cause any issues in solidity.

Compile and Migrate

Now that we’ve written our contract, lets tap truffle back in to help us compile, migrate and then deploy our contract to the testrpc blockchain so that we can interact with it.

The first thing that we want to do after saving our User.sol file is to let truffle know what file to deploy in our migration. Navigate to the migration directory. In there you’ll see the first file which is “1_inital_migration.js”, this file handles the contract “Migrations.sol”, that observes other contract migrations. We can leave this one alone, and create a new file called, “2_deploy_contract.js” to help us deploy our Users contract.

To achieve this, let’s enter the following:

var Users = artifacts.require("./Users.sol"); module.exports = function(deployer) {

deployer.deploy(Users);

};

Here we’re telling truffle which contract(s) we are interacting with by using the “artifacts.require()” method.

We export our function using the module.exports. The “deployer.deploy()” helps us stage our deployment tasks.

Now that we’ve told truffle what we want to do, we can run the migrate command and then the compile command inside the command prompt terminal.

Inside the terminal, run the following:

truffle compile

This is the command that we use to compile our contracts. We should have an output similar to this:

truffle compile output

Then run the following command in your command prompt:

truffle migrate

You should see the following output:

truffle migration output

If you receive and error message about not being able to connect to the ethereum client, that just means that your testrpc isn’t running. If you’ve stopped it in the other command prompt window, start it again using “testrpc” command, and then try running “truffle migrate” again.

Interacting with Data

When we want to interact with our deployments in truffle we use the truffle console. We can access this by running the following command in the terminal:

truffle console

So there are 2 things that we are looking for when we connect our backend (contract) to our front end in a Dapp.

The deployed contract must have an abi. It also has an address to where it is located on the blockchain.

So let’s go ahead and verify both, to ensure we can move one. To check for you contracts abi, run the following inside the truffle console:

Users.abi

Users.abi output in truffle

What we’ve done is told truffle that in our “Users” deployment, show us the “abi” information.

Let’s pull up our contract information by writing the following the truffle console:

Users.address

Users.address output in truffle

Yours will be different than mine, but Congratulations! You’ve just deployed your first contract to the blockchain (test) using Truffles. Take a minute, that’s a huge step!

Times up! I know what you really want to see, so let’s dive in a little deeper.

Finding Data

This is going to be fast and furious, so let’s get some users in data in and then let’s query it in the console. Working in the console can get a little verbose. So I would have a look at this link to read up on why it’s done this way: Changes from truffle 2 to 3

To add some user data into the contract, write the following command in the truffle console:

Users.deployed().then(function(instance){instance.addUser("john", 26)})

You’ll get a return of “undefined”. Now let’s search for the user, there are 2 ways to do it. We can using our “users” array, which asks for the userID or we can call our getUsers() function, which will display all users.

We can start with the users array. We know that since that was our first entry that the user would be assigned a userID of 0. In the truffle console, write the following:

Users.deployed().then(function(instance){return instance.users(0);})

users(0) function output

Now if you want to get a list of the users, using the getUsers() function, write the following:

Users.deployed().then(function(instance){return instance.getUsers();})

getUsers() function output

Let me go over what we see and why and then we’ll end this one here.

The first line “string 0”, is actually our userID. That second line is actually our user name, but being displayed as bytes (I know…we’ll make it more readable when we connect it to our front end. But if you want to verify, here is a link to a online hex to string converter. Just copy and paste that long line of digits inside the single quote and you’ll see) The third is the point that we entered for the user

I think this is actually a really good place conclude this weeks post and pick it up in the next post of this series.

Final Words

What have we learnt?

The back-end of any true Dapp is actually stored on the blockchain and connects to a front-end or User Interface.

A struct is a data type used for representing entities that have multiple attributes of potentially different types.

When building a Dapp strings can be any length, and this is an issue in solidity, so we have to change the strings into a fixed length using bytes32.

A successfully migrated contract should provide you with an “ABI” and the contracts address in truffle.

Although slightly verbose, you can interact with your contract in truffle using the “truffle console” command.

If you want to get a deeper understanding

Tray creating a function that changes the userName

Using the truffle console, see what other things you can see.

To see the code in its current state, check out the updated branch post4 in the Scoreboard GitHub commit.

Join the conversation, follow us on Twitter: @Tap_Coin, Reddit, or swing by and have a chat with us on Telegram: https://t.co/eIP47QmZ1E to discuss all things Tap Project.

Fueled by gamers, inspired by the community, disruptive to all