Step by Step Approach to create DAPP — using Ethereum, ReactJS & IPFS — Part 2

In my last article , we have seen below 6 steps  , if you are reading this article, please ensure you read part 1 before diving into this.

Step 1: We need to install MetaMask & enable the extensions in Chrome

Step 2 : Need to install “Ganache”

Step 3 : Need to install “Truffle Framework” using NPM

Step 4 : Create reactJS application

Step 5 : Create our First SmartContract using Solidity Language

Step 6 : Deploy our contract using Truffle in Ganache Network

We are going to continue with next set of steps.. Let’s begin. We have already unboxed react app & we named it as mydapp. Let’s continue with that

First read our smartcontract and see what it contains

Note: if you are new to smartcontract using solidity, I would recommend to review solidity tutorial in Youtube, you will find plenty of authors explaining solidity language beautifully

Pragma -> this is nothing but a root or fact, in this program it shows that Solidity compiler greater than 0.4.18 should supports. to be precised, compatibility check.

contract -> every smartcontract should start with the keyword “contract” followed by contractname. Always use camelcase or Propcase for better naming convention

datatypes -> datatypes in solidity is many, here we have unsigned integer for “storedData” variable. By default all variables are declared as “public” access. If you want the variable to be not accessed by other contract , then use appropriate access modifier such as “private, protected, internal” etc.

There are two functions in this program, one is “Set” & other is “Get”.

Set function receives an input x and store that value into “StoreData”

Get function returns that “storedData” for display

Note: Writing in blockchain cost fee(gas price), reading is free.. So here “Set” function when you call, will invoke “MetaMask” to transfer gas, where as if you invoke “Get” function it doesn’t..

Using this simple program, let’s play with IPFS and store our document then retrieve the hash back to the end user.

Hold on!, what is IPFS?

IPFS is a peer-to-peer distributed file system that seeks to connect all computing devices with the same system of files. In some ways, IPFS is similar to the World Wide Web, but IPFS could be seen as a single BitTorrent swarm, exchanging objects within one Git repository. (From Wiki)

to put it simple, if you want to upload huge file in Blockchain, it really costs huge money(in terms of Ether) and it’s definitely not possible to spend just to store our soft copy of documents. What you can do is that, upload your document into IPFS, this will cryptographically store it and retrieve back a unique “HASH”. this is what a key to retrieve your file.

So storing this Hash in Blockchain, would be simple & less cost than storing actual file.

Let’s see how IPFS works ( to know more read https://ipfs.io/)

Ok , let’s get over from theory part!. Now we are clear that, content to be stored in IPFS & generated Hash to be stored in blockchain. Let’s see how we are going to achieve. Hash is 32 Bytes alphanumeric value, we should update our smart contract to store this value. I am going to update the smart contract with the data type — String

Let’s compile this smart contract once again using truffle command and check the json file in build folder.

Use following command

truffle migrate --network ganache --reset --compile-all

To verify our contract address, there are two ways, you can use truffle console & get the contract address or simply go to “build” folder, in which you will find your contract.json (in this case, it’s SimpleStorage.json)

Just go to bottom part of this file, you will find “contract address” in networks configuration. If you look at this, it will display network ID : 5777(which is from your Ganache)

This contract address is very important to invoke the function from our smart contract through reactJs application. So keep a note!.

Note: When you are making any changes in smart contract, it is very important to use reset & compile-all flag in order to get rid of old deployed smart contract and create fresh contract address.

Step 7 : Integrate the SmartContract Logic into ReactJS program, so that you can play with front end GUI

Let’s see how to integrate..

Create following two files under “Src” folder in your project structure.

> web3.js (Stick to this naming convention, since we will call this in many file)

> storemyvalue.js (user defined name, you can keep what ever you want)

Create storeMyValue.js and insert following lines

• const address-> is contract address which you can get it from SampleStorage.json under build folder
• abi -> application binary interface which you can get it from SampleStorage.json under build folder

after you update above parameters, your file should look like below

There are two ways, you could import contract address & respective ABI into your reactJS. One, you can setup a separate file like above (storeMyvalue.js) & add ABI(application binary interface) and network address

Second option is , when you migrate your contract a build folder will be generated which will contain contract.json(contract is your contract name). Using this file, you can invoke your contract & respective method.