StartKryptowährung NewsStep by Step Approach to create DAPP—using Ethereum, ReactJS & IPFS — Part 1

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

    In this article, we are going to see the step-by-step approach to creating a Decentralized Application using Ethereum Public Blockchain(using Solidity, ReactJS & IPFS)

    To set up our application, you need to have the following system requirements. I will demonstrate this in Ubuntu 16.04 with enough storage space.

    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

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

    Step 8 : Initialize IPFS Daemon, & integrate that logic in ReactJS

    Step 9: Run ReactJS Application

    Step 10: Ensure MetaMask & Ganache are in Sync

    Step 11 : Trigger “Write” Transaction via reactJS Application & pay Gas Fee to submit the transaction via MetaMask

    Finally, review the results & make sure all are wired up successfully.

    Are you guys, ready for the journey?.. Let’s begin…

    Step 1: Let’s install MetaMask & enable the extensions. Go to Google, find metamask extension, click to install & enable the extensions. Once you are done, you should be able to see “Fox” symbol in your browser

    Make sure that, yo have strong password setup & store it somewhere, without which you cannot restore your old accounts. So keep it strong & store it safe. Through this metamask, you can interact with MainNet(For Production) & few test nets

    Note: For the first time, you will not be able to see this account( — this is the account from Ganache localhost network). So if you dont see that, it is safe to ignore at this moment. We will see to that later. Otherwise, you are GOOD TO proceed with Step 2!

    Step 2: Need to install Ganache

    To install Ganache, Truffle you must need npm(Node Package Manager). So it is assumed that you are holding it ready?, else follow this tutorial to have npm installed first.

    Ok, now give this command from your terminal to install Ganache, this is command line mode. If you are looking for Graphical mode, then choose other options — The graphical version

    npm install -g ganache-cli

    Graphical version — choose appropriate OS version, for Ubuntu, you will see this image downloaded, ganache-1.2.1-x86_64.AppImage once it is downloaded, double click to launch the Graphical mode.

    We will use graphical mode in this article…

    Note : it has so many options, such as “Current Block”, “Gas Price”, “Gas Limit”, “Network ID”, “RPC Server”, Mining Status.

    Current Block: it indicates how many blocks are getting mined. During fresh execution(Whenever you open the Ganache), current block will be 0. Once you deploy your smart contract, this value gets changed accordingly.

    Gas Price / Gas Limit: this is a simulated value & dummy. So it allows us to perform our development work using this gas value. Basically, GAS is very important factor in order to submit our transaction in blockchain. based on this Gas value only, you will be able to submit your transaction and it will be mined.

    Network ID : 5777 (this can be changed in “Setting”(Gear Icon)) through this ID only, we will connect our reactJS application with Ganache.

    RPC Server :

    it will have 10 accounts with 100 ETH(Ether — dummy value :o)) this value is key to connect to our MetaMask. Only with this value, you will be able to connect with Ganache(10 accounts).

    Mnemonic : this is unique, when you uninstall Ganache & re-install,then you will see different Mnemonic value.. this value is important to connect with MetaMask. Metamask is a bridge, that will connect our account from Ganache to Blockchain, through this you will submit your transaction (spend gas fee/eth)

    Blocks: it contains list of blocks that are mined

    Transaction: List of transactions that are submitted

    Ok, these are key factors to remember in Ganache!, let’s dive into Step 3!!

    Step 3: Install Truffle Network

    Truffle is a development environment, testing framework, and asset pipeline for Ethereum, aiming to make life as an Ethereum developer easier. With Truffle, you get: Built-in smart contract compilation, linking, deployment, and binary management.

    To install the truffle you need npm, give the following command from your terminal it will install the truffle globally.

    npm install -g truffle

    Step 4: Create ReacJS Application

    Here, we will use truffle to set up reactjs Application. Reason behind this action is , truffle framework provides boilerplate which bootstraps your development environment much easier than traditional way. Let’s do that now..

    Go to terminal & execute this command

    what’s happening here?

    • first we are creating new folder called mydapp
    • changing our directory into mydapp
    • unboxing the react application using truffle unbox command

    it will take 2 to 3 minutes to unbox & set up your environment, so stay cool.. Once it is done, then use your favorite code editor. I will use Visual Studio code to perform the updates/configuration.

    Step 5: Create & Deploy our first SmartContract using Solidity

    if you unbox the react using truffle, then you will be able to see following folder structure in your code editor.

    Contracts : it holds your smart contract program. Since we are writing using Solidity language, all file extensions inside this folder must be filename.sol. Along with our contracts, we will also have Migrations.sol, this holds the program for initializing your contract deployment.

    Migrations : it holds actual migration js files which deploys the artifacts(smart contract). Note that, each file here is ordered by number(prefixed with 1, 2, & so on).

    Node_modules : it holds all dependency files for your project

    Public : it holds index.html (starting point of your application)

    Scripts: required js files for building, and testing your contracts

    Src : it holds key js files, which you mostly spend your time in setting up your application

    Test : you will setup test file for your smart contract. please ensure that, you have enough test case captured here. We will use Mocha in upcoming steps.

    truffle.js / truffle-config.js : if you are in ubuntu, it will use truffle.js, in windows it will use truffle-config.js

    package.json : it holds all key information with respect to your project. This is key file, in which you will add your dependency & run npm install to download the same.

    Ok, now let’s deploy our default smart contract that is already available

    Step a) Launch Ganache & make sure it is running fine.

    Step b) Go to truffle.js in your project folder & map the network to Ganache & network id to 7545 like below

    Step c) open your terminal(pointing to your project directory) & initiate this command (truffle migrate -network ganache)

    It will deploy your smart contract in local blockchain, to ensure the contracts are successfully deployed. Go to Ganache & check “Current Block”

    If you closely observe Ganache(Blocks) & transactions, you will see set of blocks are mined with respect to our deployment. Here BLOCK 0 is Geneis block(primary), followed by other blocks that are numbered.

    In your project folder, under contracts you would be able to see “Migrations.sol”, which does contains 4 methods, of which 3 functions are write transactions. Pls note that, in blockchain writing something into blockchain costs a fee!, here in Ethereum world we call it a GAS price.

    Ok, we have done enough today, I believe above 5 steps are good enough to get you some insights on how different tools are interconnected. We will see more in my next article, in which we will develop a real-world application.

    Read more: Azure blockchain service september mayfoleyzdnet – Krypto-NFTs

    Source: 🔗