With cryptocurrencies gaining popularity and new applications based on blockchain technology popping up everyday, I decided to write my own application to get a better understanding of the blockchain technology.
Blockchain is an emerging technology in its very early stage of development. Being a front end developer I wanted to develop a blockchain app with modern web frameworks but did not find a solid source to get started. After trying out different approaches for more than couple of days, I was finally able to put all the pieces together and make a complete application. In this post I have shared the process of developing such an application.
We will use Ethereum as our blockchain platform to make a movie rating application using create-react-app. We will write, compile, deploy and interact with smart contracts and create a working frontend for it !
Note: This post does not explain the blockchain concepts rather it focusses on developing applications using this technology. If you need an understanding of what blockchain technology is, you can refer to these great articles by Preethi Kasireddy:
Bitcoin, Ethereum, Blockchain, Tokens, ICOs: Why should anyone care?
The Crypto market is gaining lots of steam.
Gravity-defying price rallies…
I know what is Ethereum. How to build great apps with it?
Lets get some hands on development then !
Setting up Environment:
npm install -g truffle
Truffle is a development and testing framework for Ethereum with which you can compile, test and deploy smart contracts on Ethereum network.
npm install -g ethereumjs-testrpc
First we will set up our backend with truffle:
mkdir movieRatingApp //make a project directorycd movieRatingAppmkdir rating // backend foldercd rating truffle init //initialize a new truffle project
This will create necessary files and folders to create and deploy smart contracts.
We will start by writing our smart contract called Rating.sol, then we will compile and interact with it by using truffle console.
Inside contracts directory create a new file called Rating.sol with the following code:
Deploy and Truffle Console
To deploy our newly created contract we need to add a file 2_deploy_contract.js file under migrations folder. After creating this file add the following code to it:
The first line prepares our Rating contract to be compiled and migrated on our specified network. We then deploy the truffle artifact giving three movie names as parameters for our constructor in the contract.
Inside our backend directory, open up truffle.js and add the following code:
With this we will be able to modify and deploy our contracts within the test or ethereum main network.
Lets start our testrpc:
You will see a list of 10 accounts and their private keys. testrpc is listening at port 8545. This is the location where we will be migrating our smart contract.
Inside rating folder, type truffle compile.
This will create a new folder called build. This build folder contains JSON objects that will be used to deploy our smart contracts. Finally run truffle migrate
As we are connected and running our testrpc on the same port we will see our smart contracts deployed successfully. Now that we have deployed our contract we can interact with it within the truffle console
Lets see where the contract was deployed:
We will get the address where the contract was deployed in the network. Lets note down few things that we will need in order to connect this contract with our frontend.
inside the truffle console, run
We are accessing the Application Binary Interface of our contract which is a list of functions in our contract in JSON format. This will be used to interact with our contract later.
Copy the returned contents of abi without the single quotes and the contract address at some place.
We will be using create-react-app tool to bootstrap our application. If you dont have it installed, run:
npm install -g create-react-app
Within our movieRatingApp folder run
This will create a react application within appui folder. Inside our appui folder open up package.json and add web3 dependency as shown:
Navigating into appui folder, install the new dependencies and then start the server:
npm installnpm start
Now, we will utilize web3 api to interact with our Rating smart contract on the testrpc network.
Inside appui/src create a new file called setup.js and add the following fields into it.
Replace the ratingABI and ratingAddress values with previously noted values.
In here, we:
- Instantiate a new Web3 instance
- Connect the instance to our blockchain (testrpc at localhost:8545)
- Export the configuration so that we can make api calls from our app
Now our work is to only write the frontend part.
Edit App.js, ShowMovies.js and ShowMovies.css files with the following code:
Now, if you go to localhost:3000 you should see a screen similar to this:
When we click on the names of movies, transactions will be recorded on our blockchain and rating will be updated. You can check this in your testrpc window after up voting for a movie. Thats it! We have developed a blockchain application 🙌
We saw how to write, compile and deploy smart contracts on the Ethereum network using the truffle framework. We then successfully linked our frontend to interact with the contract utilizing the web3 api. If you need to refer to the original source code, here is the github link.
I hope reading this post was enjoyable and useful. If you think this is helpful for someone else, do not forget to share. Also let me know your thoughts on this. Cheers! 🍻 🍻