Thank you for your interest in this post! We’re undergoing a rebranding process, so please excuse us if some names are out of date. Also have in mind that this post might not reference the latest version of our products. For up-to-date guides, please check our documentation site.
Two months ago I was asked to build an Ethereum web application as a work test to join Zeppelin, but I didn’t have any idea about blockchain technology at all. I had barely heard of Bitcoin, so there was no other option but to dive in.
This will be a series of posts aimed at software developers who want to ramp up to Ethereum. Please keep in mind that I do not consider myself an expert in this subject, I’d just like to teach you what I learned and save you some time if you are in the same place I was. By the end of the series you should be able to build a fully-fledged smart-contract-enabled web application (also known as DApp) on your own!
Enjoy, and please do not hesitate to reach out with questions, suggestions or feedback.
Index
1. Taking the first steps
1.1. Introduction
1.2. Web3
2. Interacting with a contract
3. Frameworks & Tools in the real world
4. A real DApp, a token marketplace — coming soon
—
1. Taking the first steps
1.1. Introduction
I’ll assume you have some basic knowledge about computer programming and what a blockchain data structure looks like. If you don’t, please follow this link and come back!
Ethereum
Let’s start by defining Ethereum, or at least, what I understood about it after my research. Ethereum is an open-source public platform, distributed and based on blockchain technology, to run applications without censorship or third-party interference.
Smart Contracts
Smart contracts are just computer programs. We build Ethereum applications based on smart contracts. Bear in mind that even though this concept comes up with Ethereum these days, it was actually proposed by Nick Szabo in 1996 🙂
Ethereum Virtual Machine
The EVM is the sandboxed runtime and completely isolated environment for smart contracts in Ethereum. This means every smart contract running inside the EVM has no access to network, file system or other processes.
Gas
Given that Ethereum is a distributed platform, there must be a way to limit the resources available to a given smart contract, otherwise it could starve the whole network’s computing power. Gas solves that issue by fixing a cost for every instruction executed in the EVM. One important thing, is that every transaction is sent to the network with a “gas budget”. If it runs out, the transaction will fail but still gets mined into the blockchain.
Ether (ETH)
It is the Ethereum cryptocurrency token. There is a gas/Ether dynamic price that measures how much ETH will an operation cost. The fee paid to execute a transaction is calculated by multiplying the gas cost and the gas price (the resulting fee is paid in ETH). You can set the gas price for your transaction to any value. However, if the gas price is too low, no one is going to execute your code.
Accounts
Every account is identified by an address. There are two kinds of accounts sharing the same address space. On one hand, we have external accounts controlled by public-private key pairs, commonly owned by people to store ETH. On the other hand, we have contract accounts that are controlled by the code that it’s stored with it. These have a few differences, but one very important to have in mind, is that only external accounts can initiate transactions.
Transactions
A transaction is a message sent from one account to another account. You can send a transaction to another external account in order to transfer ETH. If the target account is a contract account, its code will be executed as well. Note that every transaction that involves code execution will be executed on all nodes of the network. Furthermore, every code run, or transaction execution, will be recorded in the Ethereum blockchain.
Solidity
Solidity is a contract-oriented high-level language, with similar syntax to JavaScript. It is statically typed, supports inheritance, libraries and complex user-defined types. It compiles to EVM assembly, which is run by the nodes.
1.2. Web3
I decided to start interacting with the Ethereum blockchain, by first simply sending ETH from one account to another. I didn’t want to do it with real ETH since I was probably going to make a mess, so I started looking for some testing/fake environment. Reading Manu’s amazing post I found testrpc, that is a node.js Ethereum client for testing and development. Let’s install it and start playing with it:
npm install -g ethereumjs-testrpc testrpc
You will notice that testrpc has generated 10 addresses with fake ETH you can use without the need to worry about them. This is how testrpc works by default, but you can make a custom initialization following the documentation. It’s important to mention that testrp state is volatile, that is every time you close it, the state of your node and accounts will be cleared.
The next thing you should get to know is Web3.js. It is a JavaScript library that implements the Ethereum JSON RPC. That is, the protocol that we will use to talk to an Ethereum node (in this case, testrpc). To install it, just run:
npm install -g web3@0.20.1
BTW, it is important to install a Web3 0.20.x version, but not the 1.0.0 beta for this exercise. First of all, you need to connect Web3 with your local testing node you are running with testrpc. In order to do that, we will ask Web3 to use a localhost provider. Let’s open a node console and input following lines:
Web3 = require('web3')
provider = new Web3.providers.HttpProvider("http://localhost:8545")
web3 = new Web3(provider)
Please note that we are using the default testrpc port (8545), if you set another one remember to change the provider URL too. Once you have your web3 instance, start by getting the list of accounts you have in your Ethereum node, with their respective balance, by running the following:
web3.eth.accounts.forEach(account => {
balance = web3.eth.getBalance(account);
console.log(balance);
})
You probably noticed that the output is not exactly a list of numbers, that’s because Web3 uses BigNumber objects for number values, since JavaScript is not able to handle big numbers correctly. You can read more about this here.
You should also know that those balances are not expressed in ETH, actually those are wei values, the base unit. 1 ETH is 10¹⁸ wei. Please follow the Ethereum documentation to see more about ETH conversions.
Returning to what we were saying, let’s try to send ETH between two accounts. Just type web3.eth.accounts and pick two of those. Then you can use the sendTransaction method:
from = web3.eth.accounts[0]
to = web3.eth.accounts[1]
transaction = { from: from, to: to, value: 100000 }
transactionHash = web3.eth.sendTransaction(transaction)
That output is the transaction hash, and you can get the transaction information with it:
web3.eth.getTransaction(transactionHash)
You may also want to check that the balances of the accounts that you used have changed. You can validate that with the next commands:
web3.eth.accounts.forEach(account => {
balance = web3.eth.getBalance(account);
console.log(balance);
})
—
Next, I built a simple UI using HTML and jQuery with a little bit of Bootstrap just to make it pretty. You can take a look at it in my repo. This is what we call a DApp, or decentralised application. That is, an application where part of the backend code runs on a decentralized peer-to-peer network; in this case, the Ethereum network.
You will find an index.html file for the UI, and an app.js file hosting the interaction with the Ethereum node, that is basically what we described above in conjunction with some jQuery callbacks to populate the UI. Please feel free to clone my repo and give it a try.
Thank you for reading this post, please remember that any question, feedback or suggestions are welcome! If you liked it, stay tuned for the second part of this guide, focused on smart contracts!
