Step by Step Approach to create DAPP — using Ethereum, ReactJS & IPFS — Part 2
Sorry for the delay!!, have been busy with product setup in production… Here we go, my next chapter.
In my last article (Part 1), we have seen below 6 steps on , 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 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.
We will see that option in my next article very soon(:)).
To get more updates on next part of this series, tag this story!… See you in my next article.