Keen to start a side-project with solidity but have no idea how to get started? I was in the same spot few weeks back. In this post, I’ll guide you all the way from developing a front-end to uploading a smart contract. The demo of the project can be found here https://steve-ng.github.io/ (MetaMask required for trying the app)
This tutorial requires programming experience and you should have a private ETH wallet (perhaps from myEtherWallet)
Example app that we will be building
Getting started (Estimated: 20 mins)
You have to have the following installed, they will take some time
- Node with npm, follow this quick guide: https://docs.npmjs.com/getting-started/installing-node
- Ganache. It allows you to have a local ethereum network running, download from http://truffleframework.com/ganache/
- MetaMask with google chrome: It’s a chrome plugin where you will create your eth account from. This is a quick guide on metamask: https://www.cryptocompare.com/wallets/guides/how-to-use-metamask/
- A text editor such as Sublime text
Running the front-end locally connected to production Ethereum network (10 mins)
First, we are going to try and run the demo app locally connecting to the main Ethereum network. Run the following commands in your terminal
> git clone https://github.com/steve-ng/verify-file
Next, we have to ensure you have the right node version, try the following command and you should get 6.0 and above.> node -v _> cd verify-file/verify-frontend> npm install_
We are going to copy the production config into dev config> cp properties/prod.json properties/dev.json
> npm start -s
After the last command npm start -s , you should see localhost:3000 booted up. If you have your meta-mask running, you should see what you seen earlier at https://steve-ng.github.io/. Otherwise if you see “_metamask not connected, this website requires metamask to be set-up”,_try clicking ur metamask icon in ur chrome and click unlock then refresh your browser atlocalhost:3000 and it should work.
If you are adventurous to try the app, try to upload a file hash and view your uploads. Use 1 or 2 gwei to minimise the transaction fees. We will explain how the code works shortly.
Deploying the smart contract on local Ethereum network (15mins)
Next, we are going to try and run a local Ethereum network and uploading a smart contract. Open Ganache that you have downloaded earlier. You should see something as below.
Ganche screen when booted up. 10 Ethereum wallet will be preloaded with 100 ETH for you. You can click on the key icon on each row to view its private key.
Go to settings (windows -> settings) and take note of your port number and hostname.
In this screenshot, my hostname is localhost and port number is 8545. I’ll be using this config setting.
We are going to upload the smart contract next.
- Visit Remix — Solidity IDE and copy the smart contract at https://github.com/steve-ng/verify-file/blob/master/contract/Hashfile.sol in there.
- Next, click select the run tab, and under environment select Web3 Provider. There will be a pop up asking for ur web3 provider endpoint. Key in your host name and port number. If you have the same port number and hostname as mine, it will be http://localhost:8545
3. Finally under the same run tab, click the pink colour Create button. Once you have clicked it, follow the screenshot below and click on the icon to the copy the contract address.
If you open Ganache, under transaction tab, you should also see 1 contract creation transaction.
4. Lastly go back to the front-end app, and replace the hashContractAddress at properties/dev.json with the address you have copied and start the app again with npm start -s
5. Before proceeding to http://localhost:3000, you have to connect your meta-mask to the local Ethereum network as well. (For reference, see the below screenshot). Also, this is the time where you go back to Ganche and copy an Ethereum wallet private key and import into MetaMask (preloaded with 100 ETH)
That’s it! At this stage, you would have the local front-end application running connected to your local Ethereum network with MetaMask connected to the local network as well!
Calling smart contract from front-end (10mins)
This section is an introduction of how a front-end application would talk to the smart contract uploaded at the Ethereum network. We used a library called web3JS. We will be referencing the file at src/utils/hashContract.js
There are a total of 3 steps that are common in all applications interacting with the smart contract
1) Initialising web3 provider environment
You will notice this at the first few lines of the file:
if (typeof web3 !== 'undefined') {myWeb3 = new Web3(web3.currentProvider);} else {// set the provider you want from Web3.providersconsole.log('No Web3 Detected... using HTTP Provider');return null;}
What it does is to get your metaMask instance and assign it to the variablemyWeb3
2) Initialising smart contract
hashContract = new myWeb3.eth.Contract([{"constant": true,"inputs": [],"name": "getUserHashFile","outputs": [{"name": "","type": "uint256[]"},{"name": "","type": "bytes32[]"},{"name": "","type": "bytes32[]"}],"payable": false,"stateMutability": "view","type": "function"},{"constant": false,"inputs": [{"name": "name","type": "bytes32"},{"name": "md5Hash","type": "bytes32"}],"name": "addHashFile","outputs": [],"payable": false,"stateMutability": "nonpayable","type": "function"}],hashContractAddress,);
3) Lastly, calling smart contract
Notice the above you have declared your contract as hashContract and by doing so, you allow web3JS to know the methods available in your smart contract.
You can call your smart contract using the methods below hashContract.methods.xxx
hashContract.methods.getUserHashFile().call({from: address});
hashContract.methods.addHashFile(nameHash, hexHash).send({from: address})
That’s it! I hope you have gained some insights on how to develop a front-end application which interact with the Ethereum network.
If you like this post or think that it has helped you, you can join an exchange using my referral link (I get some commission if you join and trade):
Alternatively, try out coinbase we get $10 worth of bitcoin each once you traded $100 worth https://www.coinbase.com/join/58e399c5641b9462a2ee6410