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

Image for post
Source: Google

Sorry for the delay!!, have been busy with product setup in production… Here we go, my next chapter.

In my last article (), 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

Image for post
Image for post
Default Solidity Program

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 , but IPFS could be seen as a single swarm, exchanging objects within one 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 )

Image for post
Image for post
Image for post
Image for post
Source: 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

Image for post
Image for post
Note: error lines are not actually an error its a space indentation error.

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

Image for post
Image for post
SmartContract Migrated Successfully

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)

Image for post
Image for post
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)

Image for post
Image for post
Contract Address

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)

Image for post
Image for post
web3.js

Create storeMyValue.js and insert following lines

Image for post
Image for post
storeMyValue.Js
  • 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
Image for post
Image for post
Fetch ABI from SampleStorage.Json

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

Image for post
Image for post
storeMyValue.js -> after updating above two params

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(:)).

Part 1->
Fina Part ->

Note : Like this article?, give Logeswaran a thumbs-up(Claps) & follow him on /

To get more updates on next part of this series, tag this story!… See you in my next article.

Coinmonks

Coinmonks is a non-profit Crypto educational publication.

Sign up for Crypto News

By Coinmonks

A newsletter that brings you week's best crypto and blockchain stories and trending news directly in your inbox, by CoinCodeCap.com Take a look

Create a free Medium account to get Crypto News in your inbox.

Logeswaran Audhikesavan

Written by

Happy to learn, what I have experienced in Blockchain & Analytics Space, watch out www.blockchaindreamlab.com & www.zuiverinfotech.com

Coinmonks

Coinmonks

Coinmonks is a non-profit Crypto educational publication. Follow us on Twitter @coinmonks Our other project — https://coincodecap.com

Logeswaran Audhikesavan

Written by

Happy to learn, what I have experienced in Blockchain & Analytics Space, watch out www.blockchaindreamlab.com & www.zuiverinfotech.com

Coinmonks

Coinmonks

Coinmonks is a non-profit Crypto educational publication. Follow us on Twitter @coinmonks Our other project — https://coincodecap.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store