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 (MetaMask required for trying the app) https://steve-ng.github.io/ 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 with , follow this quick guide: Node npm https://docs.npmjs.com/getting-started/installing-node It allows you to have a local ethereum network running, download from Ganache. http://truffleframework.com/ganache/ It’s a chrome plugin where you will create your eth account from. This is a quick guide on metamask: MetaMask with google chrome: 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 _> cd verify-file/verify-frontend> npm install_ 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 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 , you should see booted up. If you have your meta-mask running, you should see what you seen earlier at . 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 at and it should work. npm start -s localhost:3000 https://steve-ng.github.io/ localhost:3000 If you are adventurous to try the app, try to upload a file hash and view your uploads. Use to minimise the transaction fees. We will explain how the code works shortly. 1 or 2 gwei 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 that you have downloaded earlier. You should see something as below. Ganache 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 and . port number 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 and copy the smart contract at in there. Remix — Solidity IDE https://github.com/steve-ng/verify-file/blob/master/contract/Hashfile.sol Next, click select the tab, and under environment select . 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 run Web3 Provider http://localhost:8545 3. Finally under the same tab, click the pink colour button. Once you have clicked it, follow the screenshot below and click on the icon to the copy the contract address. run Create If you open Ganache, under transaction tab, you should also see 1 transaction. contract creation 4. Lastly go back to the front-end app, and replace the at with the address you have copied and start the app again with hashContractAddress properties/dev.json npm start -s 5. Before proceeding to , 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) http://localhost:3000 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 We will be referencing the file at web3JS . 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 variable myWeb3 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 and by doing so, you allow web3JS to know the methods available in your smart contract. hashContract 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): https://hitbtc.com/?ref_id=59f3f03a31222 https://www.binance.com/register.html?ref=10050322 Alternatively, try out coinbase we get $10 worth of bitcoin each once you traded $100 worth https://www.coinbase.com/join/58e399c5641b9462a2ee6410
