Building Platform on Ethereum: How Does Dapp Work?

Any DApp, which is built on Ethereum, uses blockchain and has all the according functionality available. With such a system, you do not need a third party to transfer control of your data. By their very nature, centralized organizations control the data in the networks. Dapps return users their rights, making other companies difficult, if not impossible, to manage data that does not belong to them.

The main principles and characteristics of such an application are such:

• Open code
• Decentralization
• Blockchain
• Smart contracts
• Globalism

Ethereum has become one of the most recognizable brands in the blockchain industry, coming close in popularity (and capitalization) to Bitcoin. Therefore, we will further consider how to make a DApp (both theoretical and practical parts) based on this popular decentralized ecosystem.

How to Build a Dapp on Ethereum

This article is not intended for those who are not at all familiar with building on Ethereum (or blockchain technology in general), so there will be no explanation of basic things like blocks, transactions, or contracts. We hope you are at least a little aware of what is happening. Otherwise, look through the articles that may be useful to you (such as Getting Started in the web3 world, Everything about Ethereum, or Dapps for Beginners), and return to this Ethereum DApp tutorial with a certain amount of knowledge and experience.

Getting Started with the Project: A Toolbox

To build a DApp, you better install the following tools:

• Geth. We will install it using official Docker image:

$ docker pull ethereum/client-go:stable

• Mainnet Ethereum JsonRPC Endpoint. We recommend using the RPC Fast API with this tool.

• Mist for creating and managing currency (decentralized) on wallets, as well as working with smart contacts.
• Remix for developing contracts through the browser at ^{http://remix.ethereum.org}.
• Cosmo (developers used Meteor language for it).
• Etheratom. The last tool on our shortlist is to speed up the development. For its setting, use:
  

$ npm install atom-ethereum-interface

To build DApp, it is recommended to use Solidity since it is formally supported by the ETHDEV.

A contract can be written in Solidity, and a certain environment is required for deployment. Therefore, you may choose how to deploy a smart contract:

• Brownie is such a framework for deploying smart contracts by writing code in Python.
• Hardhat is also a framework, but the code is written in JavaScript.
• Remix is an online IDE for writing and deploying smart contracts.

Set Up Hardhat

We will apply the second option to create a DApp. Hardhat helps in the management and automation of contracts and application creation. Moreover, it can interact directly with RPC Fast Ethereum API.

Before installing this tool on your computer or any other gadget with pre-installed software, ensure you have Node.js and npm installed on any compatible device.

$ curl -o -https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
$ nvm install 15
$ nvm use 15

After you have created a new project directory, you can install this useful tool:

$ cd ~/your-project-folder/
$ mkdir solext$ cd solext
$ npm init -yes
$ npm install --save-dev hardhat
$ npx hardhat

After finishing the installation process, select “^{Create an empty hardhat.config.js}".

Next, run the plugins which you need for testing:

$ npm install --save-dev @nomiclabs/hardhat-waffle 'ethereum-waffle@^3.0.0' @nomiclabs/hardhat-ethers 'ethers@^5.0.0'
$ npm install --save-dev @nomiclabs/hardhat-truffle5 @nomiclabs/hardhat-web3 web3

Now prepare the project files. And remember that your contract will be stored in the contracts directory. It can be created with the standard simple command:
^{mkdir contracts && cd contracts}. You can start creating, compiling and deploying your contracts.

Building and Deploying Contract

Our main goal is to build an Ethereum application, and what kind of decentralized program can exist without a smart contract? Of course, none, so let's look at how to create a DApp and contracts.

Since Geth is already installed, we will build and deploy smart contracts for our application with its help. For educational purposes, we will launch Geth in “development” mode. This creates a single-node Ethereum test network without connections to external peers. It exists solely on the local machine. 

So, start your local Geth node with the next command:

$ docker run --rm -it --name geth -p 8545:8545 ethereum/client-go:stable --http --http.addr 0.0.0.0 --http.api web3,eth,net,personal,miner --http.corsdomain "http://remix.ethereum.org" --dev

The results might be like the following:

Now you can create a smart contract using either http://remix.ethereum.org or ^hardhat and deploy it. We will use Remix for example. You can select the compiler version and compile the code of your smart contract in the “Solidity compiler” tab. To connect to your local Geth node, open the “Deploy & run transactions” tab, in “Environment” choose “External HTTP provider” and leave the provider URL unchanged. 

Then you can deploy your smart contract to the local Ethereum network.

Now, you can attach to Geth console in another terminal window using command:

$ docker exec -it geth geth attach http://localhost:8545

And start mining:

miner.start(1)

Connecting To MetaMask

With its accurate and user-friendly working system, MetaMask has gained a significant user base in the crypto world. 

It works with the Web3 JavaScript authoring library to offer its users full functionality. Web3js, developed and maintained by ConsenSys & Ethereum, operates as a developer community. Therefore, if you want to create DApp, integrate it into this bridge.

To use MetaMask, you must go through three simple steps: installation, configuration, and interaction. First, visit the official plugin or extension store available on your device. There you will find the option to install this extension. 

The first time you open this extension, you are prompted to make a password. MetaMask uses the original 12-word phrase as the password. This is used for backup purposes if you forget your main passphrase. Once your pass is ready, click Unlock Account, and MetaMask will generate a new random address for your wallet. Click "Open Wallet."

Connecting the Smart Contract to the React Frontend

Now you know what is building a platform on Ethereum. And you understand that it also has a frontend that can be created with the help of JavaScript frameworks, CSS, or even HTML. 

Before connecting smart contracts, familiarize yourself with the project structure we suggest as a standard one. But if you need to change the structure to suit your needs, feel free to do so.

Let's focus on the “src” because it's a React app and the folder needed to connect the React app to Metamask and contract.

• ./contracts/abis:
  This folder will store our compiled contract as specified in the truffle-config.js file.
• ./modules/context:
  It contains the application context for our React application. We will use the React context to manage the state.
• ./services:
  This folder has a file that parses the contract of the signer and provider.
• ./utils:
  It contains a service file for converting the values ​​returned from the smart contract into user-readable data.
• .env with the react environment variable.

And now, let's connect the application and our smart contract. This process is quite long and multi-level, so we divide it into three main stages:

1. Installation and customization of the .env file:

2. Obtaining a signer & a supplier:

import { ethers } from 'ethers';
import ContractAbi from '../contract/abis/Crowdfunding.json';

const ContractAddress = process.env.REACT_APP_CONTRACT_ADDRESS;
export const getContractByProvider = async (provider) => {
   try {
       const { abi } = ContractAbi;
       const contract = new ethers. Contract (ContractAddress, abi, provider); 
       return contract;
   } catch (err) {
       throw err;
   }
};
export const getContractBySigner = async (signer) => {
   try {
       const { abi } ContractAbi;
       const contract = new ethers.Contract (ContractAddress, abi, signer); 
       return contract;
   } catch (err) {
       throw err;
   }
};

3.Creating the context of our decentralized application:

a. Definition of actions.

module.exports {
   GET_CONTRACT_BY_PROVIDER: ' GET_CONTRACT_BY_PROVIDER',
   GET_CONTRACT_BY_SIGNER: GET_CONTRACT_BY_SIGNER',
   SET_PROVIDER: 'SET_PROVIDER',
   SET SIGNER: 'SET_SIGNER',
   SET METAMASK ENABLED: 'SET METAMASK_ENABLED',
   SET_WALLET_INFO: 'SET_WALLET_INFO',
};

b. Definition of reducers.

import ACTIONS from './actions';

function reducer(state, action) { 
   switch (action.type) {
       case ACTIONS.SET_PROVIDER: {
            return {
                  ...state, 
                  provider: action.data,
            };
       } 
       case ACTIONS.SET_METAMASK_ENABLED: { 
            return {
                  ...state,
                  metaMaskEnabled: action.data,
            };
       }
       case ACTIONS.SET_WALLET_INFO: {
            return {
                  ...state,
                  currentwallet: action.data,
            };
       }
       case ACTIONS.SET_SIGNER: { 
            return {
                  ...state, 
                  signer: action.data,
            };
       } 
       case ACTIONS.GET_CONTRACT_BY_PROVIDER: {
            return {
                  ...state,
                  providerContract: action.data,
            };
       } 
       case ACTIONS.GET_CONTRACT_BY_SIGNER: {
            return {
                  ...state,
                  signerContract: action.data,
            };
       }
       default:
            return state;
   }
 }
export default reducer;

4. Building a platform on Ethereum and its context.

And that's it; you've created your context. It remains only to change the functionality of our context and make it globally available so that all the components that you have already created or plan to create can see and interact with it.

import React from 'react';
import Main from './Main';
import { AppContextProvider } from './context/App/context';
function App() {
   return (
      //From here we can wrap every component making the state of our context globally available to all the children component...
         <AppContextProvider>
         {/* children component */}
          <Main />
          </AppContextProvider>
   );
}
export default App;

Following all these steps, you have successfully built a Dapp from start to finish. And now you can relax a little. I hope our article gave you insight into how to be a blockchain developer and helped you take the first step toward building a platform on Ethereum. Develop, and our RPC Fast product will help you with this!