Here we are gonna build a Voting DAPP which is very basic in DAPP world and easy to understand. For that we will be needing :
Let’s take you through each one step by step,
We will be using remix compiler for our smart contract . we will smart contract in remix IDE only so that we won’t be needing truffle suite for our project.
MetaMask is an extension used in chrome to connect to ethereum network and to conduct transactions . you can install metamask extension on your chrome browser which will enable chrome to interact with ehtereum block-chain
Ganache is for running a test ethereum node on local network . For testing purposes we can use Ganache which acts like a ethereum network node on our local machine, which is very helpful while building a DApp.
You can search about above in depth on internet there is plenty of useful information there.
First Download Ganauche and run it. keep it running in the background .
Add MetaMask Extesnsion in Google Chrome Browser. Add a new network in custom RPC section with url given on Ganache’s RPC server section. Which will connect our Ganache to MetaMask. Now add 2-3 accounts from Ganache into MetaMask by importing them with Private Key for testing purpose.
We need to write our Code on Remix-IDE .
Now MetaMask popup will show up and will ask for connection to our Ganache which is running on our local machine.
With this step we have succesfully deployed our Smart Contract and we can do transactions through MetaMask.
Now we need to build simple webpage to interact with smart Contract and run it on local server with the help of Node .
Create a Directory and create files named as index.html and index.js.
$ mkdir Voting $ cd Voting $ touch index.js $ mkdir public $ cd public $ touch index.html
Now we need to install express framework , to do that first we have to initiate node into our directory so that it will create package.json file.
$ npm init $ npm install express --save
It will create new package.json file with all dependencies and install express framework in locale folder and create a folder as node_modules.
you can now copy paste all the code from index.js and index.html provided in source code or replace with respective files in our folder from source code folder.
With these steps we have all the code in our Voting directory with Ganache running in the background and in our Remix-IDE we have already compiled and deployed code onto ganache block-chain with the Meta-Mask’s help to deploy it from Remix-IDE to Ganache Block-chain
Now with little change in our Index.html we will be ready to take our Voting DAPP into action .
We need two things to be changed/added in our index.html,
All we have to do is replace exsisting ABI and Address with ABI and Address of the contract we compiled From our Remix-IDE .
NOTE : Everytime we compile and deploy contract on Remix , ContractABI and ContractAddress changes . We need to add those two in our code everytime we do changes in our code and compile on Remix.
Now with everything is done all we have to do is run index.js file from our Voting directory.
$ node index.js Server running at port 3000...
Now we can visit our DAPP on http://localhost:3000.
Here we have five sections,
With this we have succesfully completed our Voting DApp .