Tutorial : build your first DAPP with Remix and Etherscan

In this tutorial with 7 detailed tasks, we will build a DApp (semi-DApp in this tutorial) step by step.

Task 1: Preparation for building
Task 2: Learn Remix IDE – online smart contract development environment
Task 3: Greeter.sol – First semi-DApp wi…


This content originally appeared on DEV Community and was authored by fangjun

In this tutorial with 7 detailed tasks, we will build a DApp (semi-DApp in this tutorial) step by step.

Task 1: Preparation for building
Task 2: Learn Remix IDE - online smart contract development environment
Task 3: Greeter.sol - First semi-DApp with Remix
Task 4: Second semi-DApp - ERC20 Token
Task 5: Understanding approve, allowance and transferFrom
Task 6: Deploy to public testnet like Ropsten
Optional Task 7: deploy and verify on Polygon

DApp is a web-app with logic in on-chain smart contracts which users can access through their wallet. Ethereum.org explains:

A decentralized application (dapp) is an application built on a decentralized network that combines a smart contract and a frontend user interface.

I have a simple definition of DAPP myself:

DApp =

Smart Contract (on blockchain)

User interface (web app running on server)

Wallet (in browser and mobile app)

DAPP

DAPP = Smart Contract + Web APP + Wallet(user-controlled).

I would like to call what we build in these 8 eight step "semi-DApp", as we will focus on smart contracts while relying on Remix / Etherscan as user interface.

We will build web app using React/Next.js that works with smart contract and wallet such as MetaMask later.

Prerequisite Knowledge and tools

You need basic knowledge and tools before we start.

Knowledge:

  • Blockchain
  • Ethereum
  • Wallet
  • Solidity
  • ERC20 & ERC721

Tools:

  • Remix IDE (https://remix.ethereum.org/)
  • MetaMask (Wallet browser extension)
  • Node.js, yarn, TypeScript
  • OpenZeppelin (Solidity library)
  • Etherscan block explorer

Let's start our journey.

Task 1: Preparation for building

We need tedious preparation to have all the needed tools set:

  • MetaMask and account
  • Hardhat local testnet
  • Remix IDE settings

Task 1.1 Install MetaMask and create account

In this sub-task, we will install MetaMask, create a wallet and write down mnemonics (phrase).

  1. Download and install MetaMask extension from Chrome extension store on your Chrome browser.

  2. Create a wallet following the instructions of MetaMask, with mnemonics written down with pen and paper.

  3. Get to know the usage of MetaMask: 1) switch Network, 2)edit Network, 3) add account 4)change account.

You can also use other browsers MetaMask supports such as Firefox, Brave and Edge.

Task 1.2 Run a local testnet by Hardhat

We will use Hardhat which is an Ethereum development environment to run a local testnet. You can also use Ganache by truffle.

To use Hardhat, you need to have node.js and yarn in your computer.

  • STEP 1: make a directory and install hardhat in it
mkdir hhproject && cd hhproject
mkdir chain && cd chain
yarn add hardhat
  • STEP 2: create a sample Hardhat project
yarn hardhat
//choose: Create an advanced sample project that uses TypeScript

A hardhat project is created with a sample smart contract "Greeter.sol" that we will use in Task 3.

  • STEP 3: run Harhat Network (local testnet) in stand-alone mode
yarn hardhat node

A local testnet will is running (chainId: 31337):

Started HTTP and WebSocket JSON-RPC server at http://127.0.0.1:8545/

It give us 20 accounts each has 10000.0 test ETH:

Account #0: 0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266 (10000 ETH)
Account #1: 0x70997970c51812dc3a010c7d01b50e0d17dc79c8
...

We will organize our project directory as:

- hhproject
  - chain  (working dir for hardhat)
  - webapp (working dir for Next.js app later)

Task 1.3 switch MetaMask network to local testnet

Please make sure Hardhat Network local testnet is still running.

  • STEP 1: In MetaMask browser extension, click the network selector on the top bar. Switch the network from mainnet to localhost 8545.

  • STEP 2: Click the Account icon on the topbar and go to "Settings/Network/". Choose "localhost 8445".

Note: make sure Chain ID is 31337. It may be "1337" by default.

Task 1.4 Add/Import account to MetaMask

  • STEP 1: Click Account icon in the top bar and choose "Import Account". Import Account with Private Key of local testnet Account #0.

Private Key of Account #0 is:

Account #0: 0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266
Private Key: 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80
  • STEP 2: Switch to the added Account with address: 0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266.

There is 10000.0 test ETH in it on ethereum local testnet.

swith metamask network to localhost

Task 2: Learn Remix IDE - online smart contract development environment

Website: https://remix.ethereum.org/

Remix Ethereum IDE (Remix IDE) is the online development environment for Ethereum. Introduction from Remix IDE docs:

  • Remix is used for the entire journey of contract development as well as act as a playground for learning and teaching Ethereum.

  • Remix IDE is a powerful open source tool that helps you write Solidity contracts straight from the browser.

  • Remix IDE has modules for testing, debugging and deploying of smart contracts and much more.

Task 2.1 Have a look at Remix IDE

Take a look at the components we will use:

1) Editor: Open File Explorer of Remix IDE, and click a sample smart contract file "1_Storage.sol"

2) Solidity Compiler: where we compile smart contracts

3) Deploy and Run Transactions: where we deploy smart contracts and interact with smart contracts.

4) Unit Test: the plugin for unit test using Solidity. If not installed, add from plugin button in the bottom-left.

Remix IDE explained

File structure in Remix IDE workspace:

contracts/
scripts/
tests/

There are several sample smart contracts as well as deploy scripts in JavaScript and Unit Test scripts in Solidity in the default workspace of Remix IDE.

Task 2.1 Change Environment to Injected Web3 in Remix

In this sub-task, we will change the "Environment" in Remix "Deploy & Run" tab.

  • STEP 1: make sure MetaMask network is switched to "localhost 8545" and switch account to 0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266

  • STEP 2: change Environment from default "Javascript VM(London)" to "Injected Web3". We told Remix IDE to use injected ethereum provider by MetaMask.

  • SETP 3: check the account in this tab. It should be changed to 0xf39f...2266 same as MetaMask.

Task 2.2 Compile a sample smart contract

It is intuite to compile a smart contract in Remix IDE.

  • STEP 1: In the Editor tab select a smart contract such as "1_Storage.sol".

  • STEP 2: In Solidity Compiler tab, compile the selected smart contract. Leave the option as default.

    • Compiler: 0.8.7+commit.e28d00a7
    • Language: Solidity
    • EVM Version: Compiler default
  • STEP 3: Click Compile button. The selected smart contract will be compiled.

Task 2.3 Run unit test

Remix IDE support unit test written in solidity with a plugin.

  • STEP 1: In Plugin Manager, install "Solidity unit testing" plugin if it is not installed and activated.

  • STEP 2: In Unit Test tab, select "test/4_Ballot_test.sol" click "Run" button.

Note: We usually run unit test in Javascript in popular Ethereum development environments such as Truffle and Hardhat. So will will skip unit test in this tutorial in the following tasks.

We call the smart contract development circle "Compile - Test - Deploy" and will do deployment in the next sub-task.

Task 2.4 Deploy to testnet provided by Remix IDE

Remix IDE also provides a testnet with EVM (ethereum virtual machine) based on @ethereumjs/vm EVM implementation (github repo link).

First, we will try to deploy a smart contract to JavaScript VM(London) provided with Remix IDE.

  • STEP 1: change environment to "JavaScript VM(London)".

  • STEP 2: It provides accounts on the node. We will use account 0x5B3...eddC4 as the deployer.

  • STEP 3: click "deploy" button.

Once deployment is completed, a transaction receipt will be logged on the Remix IDE console at the bottom right of the screen.

The deployed contract will be displayed in the left bottom of the screen. We can interact with it.

  • "store" a number, such as 100
  • "retrieve", get 100

Task 2.5 Deploy to injected testnet provide by MetaMask

In this sub-task, we will deploy the sample smart contract to the injected testnet provided by MetaMask. It is the local testnet running on:

HTTP and WebSocket JSON-RPC server at http://127.0.0.1:8545/

  • STEP 1: In "Deploy & Run" tab, change the environment to "Injected Web3".

  • STEP 2: check if the account is 0xf39...92266 same as the MetaMask.

  • STEP 3: click "deploy" button.

  • STEP 4: confirm in the popup of MetaMask.

deploy to local testnet

The returned receipt of the transaction is:

status  true Transaction mined and execution succeed
transaction hash    0xb4f72c274fdd6bd600e05f5eb0c6c9edc45c61743c732aab867cc50d4719c754
from    0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266
to  Storage.(constructor)
...

You can see that the transaction is sent from 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266.

Task 2.6 Interact with the smart contract

We can call functions of smart contract in Remix IDE.

  • Deep blue button is read-only.

  • Orange button is "write" to change blockchain state which requires user confirmation in wallet.

Let's interact with the smart contract.

  • STEP 1: set number as "100" and click "store" button.

This will send a transaction to the blockchain which needs confirmation in MetaMask.

  • STEP 2: confirm the transaction.

  • STEP 3: click "retrieve" button.

"retrieve" is a read-only call which don't need confirmation in MetaMask.

The result will be displayed on the screen.

Transaction details of Write (send) and Read (call) are logged in the Remix IDE console.

After you finish Task 1 and Task 2, you are fully prepared for the DApp development journey.

Task 3: Greeter - First semi-DApp with Remix

In Task 3, we will begin building our first DAPP using:

  • Remix IDE
  • Hardhat local testnet
  • "Greeter.sol" smart contract

We will not build web front-end by ourselves in this tutorial. Instead, we use Remix IDE as web user interface to interact with smart contracts.

Task 3.1 Sample contract "Greeter.sol"

There is a smart contract "Greeter.sol" in hardhat sample project.

Create a file "contracts/Greeter.sol" in Remix IDE and copy the Greeter.sol in the hardhat project directory to it.

//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.0;

import "hardhat/console.sol";

contract Greeter {
    string private greeting;

    constructor(string memory _greeting) {
        console.log("Deploying a Greeter with greeting:", _greeting);
        greeting = _greeting;
    }

    function greet() public view returns (string memory) {
        return greeting;
    }

    function setGreeting(string memory _greeting) public {
        console.log("Changing greeting from '%s' to '%s'", greeting, _greeting);
        greeting = _greeting;
    }
}

There are also deploy scripts and unit test scripts in hardhat project.

Task 3.2 Compile Greeter.sol

Switch to "Solidity Compiler" tab in Remix IDE.

Compile "Greeter.sol"

Once it is compiled successfully, you will see "Compilation Details" in Remix IDE.

We can also copy "ABI" and "Bytecode" to view if you are interested in them.

These files are stored in the contract/artifacts directory.

Task 3.3 Test

We will skip unit test here.

Task 3.4 Deploy

There are deployment scripts in Remix IDE which we can use by default. We don't need to make any changes.

Go to Deploy and Run Tab in Remix IDE, and deploy "Greeter.sol"

  • STEP 1: make sure "Greeter.sol" has been already compiled successfully.

  • STEP 2: make sure MetaMask switched to localhost network and account switched to the related hardhat account.

  • STEP 3: make sure Environment change to "Injected Web3". And the Account is the related hardhat account.

  • STEP 4: leave Gas Limit and Value as default.

  • STEP 5: choose Contract: "Greeter - contract/Greeter.sol"

  • STEP 6: leave deploy variable string_greeting to be blank or input any string you like.

  • STEP 7: click Deploy Button.

  • STEP 8: confirm the transaction in MetaMask Popup.

  • STEP 9: check deploy receipt in Remix IDE console.

status  true Transaction mined and execution succeed
from    0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266
to  Greeter.(constructor)
gas 505392 gas
transaction cost    505392 gas 
input   0x608...00000
decoded input   {
    "string _greeting": "My first DAPP"
}

deploy greeter.sol

Task 3.5 Interact with the deployed smart contract

  • STEP 1: get initial greet by click greet Deep Blue button which is set in the deployment process.

  • STEP 2: setGreeting to "My first Dapp", and confirm in MetaMask popup.

  • STEP 3: get greet again. It should be: "My first Dapp"

We just finished our first DAPP. In the next task, we will write an ERC20 token smart contract using solidity library OpenZeppelin.

Task 4: Second semi-DApp - ERC20 Token

The most common use case of DAPP is based on tokens (ERC20, ERC721, ERC1155) on ethereum as assets.

We will not write a token smart contract from scratch. Instead, we will inherit from verified and popular solidity library OpenZeppelin. The best practice of token smart contract development is using verified one in contrast to reinventing the wheel.

Task 4.1 ERC20 using OpenZeppelin

Write an ERC20 token "ClassToken" (symbol:CLT) in "contracts/ClassToken.sol"

//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.0;

import "https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/token/ERC20/ERC20.sol";

contract ClassToken is ERC20 {
        constructor() ERC20("ClassToken", "CLT") {
        _mint(msg.sender, 10000*1e18);
        }
}

Please note that we import OpenZeppelin from GitHub files. To write smart contract in local development environments like Hardhat or Truffle, we install OpenZeppelin and import like this:

import "@openzeppelin/contracts/token/ERC20/ERC20.sol";

Information about this ERC20 token:

  • Name and symbol: ClassToken, CLT
  • Decimals: 18
  • InitialSupply: 10000.0 CLT, mint to deployer(msg.sender)

Task 4.2 Compile

Compile "ClassToken.sol" in Compile Tab.

Task 4.3 Test

We skip unit test here.

Task 4.4 Deploy

In Deploy and Run Tab, deploy to local testnet.

Click Deploy Button.

The deployed smart contract is showing on the left panel. Click to show the functions we can "call" and "send".

ERC20 deployed

These are standard interface of ERC20:

FUNCTIONS
name()
symbol()
decimals()
totalSupply()
balanceOf(account)
transfer(recipient, amount)
allowance(owner, spender)
approve(spender, amount)
...

Task 4.5 Read token information

There are several read-only function of ERC20 Standard token smart contract.

  • decimals(), 18
  • name, ClassToken
  • symbol, CLT
  • initialSupply, 10000000000000000000000, which means 10000.0 CLT token.

We can query token balance of a address by calling balanceOf:

  • input: "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266"
  • output: 10000000000000000000000, which means 10000.0 CLT token.

Task 4.6 Send token by calling transfer

Click the arrow of transfer button, enter inputs:

  • input: recipient "0x70997970c51812dc3a010c7d01b50e0d17dc79c8" (Account #1)
  • input: amount 100000000000000000000 (100.0 CLT)

Confirm the transaction in MetaMask popup. After success, the receipt of the transaction will be displayed on Remix IDE console.

Get the balance of CLT of addresses:

  • 0x70997970c51812dc3a010c7d01b50e0d17dc79c8
  • 100000000000000000000 (100.0 CLT)
  • 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266
  • 9900000000000000000000 (9900.0 CLT)

The PrivateKey of 0x70997970c51812dc3a010c7d01b50e0d17dc79c8(Account #1) is 0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d

You can add this account and token to MetaMask to interact with ERC20 smart contract using MetaMask.

Task 4.7 Add token to MetaMask

MetaMask can't show ClassToken(CLT) on assets list automatically. We need to add using contract address(token address).

You can click "import tokens" to add. We will input the token smart contract address: 0xCf7Ed3AccA5a467e9e704C703E8D87F634fB0Fc9. Please input the address of your deployed ClassToken.

We can see the balance of CLT now.

We can send CLT to others using MetaMask.

ClassToken in MetaMask

We also import Account #1 to MetaMask and transfer its CLT to others.

Tips: reset MetaMask account nounce

When we try with localhost and MataMask for several times, we can mess the nounce (transaction count). Sometimes we can't send transactions. When encountering this problem, we need to reset MetaMask account nounce as following:

STEP 1: Go to Setting > Advanced

STEP 2: Reset Account

Explanation in the setting:

Resetting your account will clear your transaction history. This will not change the balances in your accounts or require you to re-enter your Secret Recovery Phrase.

Task 5: Understanding approve, allowance and transferFrom

Task 5.1 Understanding transferFrom

There is an ingenious design in ERC20 token standard:

  • approve
  • transferFrom
  • allowance

What can we do with it:

  • we can grant another person an amount of token he can use by sending approve()

  • he can use it by sending transferFrom()

  • we can check the allowance calling allowance()

There are also two helpers decreaceAllowance() and increaseAllowance() in OpenZeppelin ERC20 implementation.

The definition of TransferFrom is:

transferFrom(address sender, address recipient, uint256 amount)

Let's play with this "approve-transferFrom" design.

5.2 try approve and transferFrom

We will use 3 accounts: Account #0 #1 #2. The private key of Account #1 #2is:

Account #1: 0x70997970c51812dc3a010c7d01b50e0d17dc79c8
Private Key: 0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d

Account #2: 0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC
Private Key: 0x5de4111afa1a4b94908f83103eb1f1706367c2e68ca870fc3fb9a804cdab365a

STEP 1: import Account #1 and #2 to MetaMask

STEP 2: MetaMask in Account #0, approve Account #1 with 1000.0 CLT. Send approve():

  • spender: 0x70997970c51812dc3a010c7d01b50e0d17dc79c8 Account#0
  • amount: 1000000000000000000000 (1000.0 CLT)

amount is uint256 with 18 decimals.

STEP 3: check allowance. Call allowance():

  • owner:0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266 Account#0
  • spender: 0x70997970c51812dc3a010c7d01b50e0d17dc79c8 Account#1

result is: 1000000000000000000000 (1000.0 CLT)

STEP 4: switch to Account#1

STEP 5: MetaMask in Account #1. Account #1 send TransferFrom() to sends token from Account #0 to Account #2:

  • sender: 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266 Account#0
  • recipient: 0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC Account#2
  • amount: 500000000000000000000 (500.0 CLT)

STEP 6: check allowance again. The result is:

  • 500000000000000000000 (500.0 CLT)

STEP 7: switch to Account#0 in MetaMask

STEP 8: set allowance to 0 approve() (called by Account#0):

  • spender: 0x70997970c51812dc3a010c7d01b50e0d17dc79c8 Account#0
  • amount: 0

STEP 9: check allowance. Call allowance():

  • owner:0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266 Account#0
  • spender: 0x70997970c51812dc3a010c7d01b50e0d17dc79c8 Account#1

The result will be 0.

A security notice from OpenZeppelin docs you should know:

Beware that changing an allowance with this method brings the risk that someone may use both the old and the new allowance by unfortunate transaction ordering. One possible solution to mitigate this race condition is to first reduce the spender’s allowance to 0 and set the desired value afterwards: https://github.com/ethereum/EIPs/issues/20#issuecomment-263524729

In the next tasks, we will deploy "ClassToken" to public testnet like Ropsten, Rinkeby, etc. You can also try to deploy it to polygon, BSC and other EVM-compatible chain, as well as L2s like Optimism and Arbitrum.

Task 6: Deploy to public testnet like Ropsten

To deploy smart contract to Ropsten test network, you need "Ropsten test ETH" in wallet. You can get from faucet: https://faucet.metamask.io/

Etherscan provide a block explorer for Ropsten: https://ropsten.etherscan.io/

Task 6.1 Compile / Test / Deploy

Deploy smart contract to Ropsten testnet in 5 steps:

  • STEP 1: switch MetaMask to Ropsten network and switch to your own account.

Note: don't use account provide by Hardhat testnet. Account #0, #1 are default accounts generated by Hardhat and many people know their private key.

  • STEP 2: Get test ETH (Ropsten testnet) at faucet for your account. You will need "test ETH" to pay gas fee.

  • STEP 3: In Remix IDE Deploy & Run Tab, make sure that the environment is "Injected Web3" connecting to network Ropsten (3) network.

  • STEP 4: Click Deploy Button and confirm in MetaMask popup. The deployment to public testnet may take one or two minutes.

  • STEP 5: Once the smart contract is deployed successfully, you can view the transaction details at block explorer: https://ropsten.etherscan.io/

Task 6.2 Interact with contract in Remix

We can interact from Remix IDE just like Task 4.5-7.

  • Read token information

  • transfer token

  • add token to MetaMask and transfer between accounts.

You can view transactions on https://ropsten.etherscan.io/ .

Task 6.3 Verify contract on Etherscan (API key needed)

We can interact with a smart contract directly when it is verified on Etherscan.

In Task 6.3 and 6.4, we will verify our smart contract on https://ropsten.etherscan.io/ and interact with it.

  • STEP 1: create an account at Etherscan.io

  • STEP 2: get API key at: https://etherscan.io/myapikey

  • STEP 3: In Remix IDE Plugin Manager, search and add "Etherscan - Contract Verification"

  • STEP 4: In "Etherscan - Contract Verification" plugin, input etherscan API key.

  • STEP 5: Verify contract. Waiting for the verification to be completed.

Please note that "Verify" means two things:

  • We will publish the source code on etherscan.
  • The code is verified the same as the compiled and deployed code.

verify smart contract

Task 6.4 Interact with contract on Etherscan

When verified successfully, we can interact with smart at https://ropsten.etherscan.io/

  • STEP 1: click "Code" button. You can read the open source code.

  • STEP 2: click "Read Contract" button. We can call read-only functions of this ERC20 smart contract.

  • STEP 3: click "Write Contract" button.

  • STEP 4: connect to Web3. Before we can call state-change functions of the contract, we need to "connect to Web3" first. Connect to MetaMask in the popup.

  • STEP 5: click "transfer", input variable, and confirm in the MetaMask popup.

transfer in etherscan

To deploy smart contract and verify it on Ethereum mainnet is almost the same.

In the next optional task, we will deploy and verify contract on Polygon. The process is a little different.

Optional Task 7: deploy and verify on Polygon

We will try to deploy to Polygon mainnet in Task 7.1-7.3. You need MATIC token on Polygon network to pay for gas fee.

You can add Polygon Mainnet to your MetaMask using Chainlist.org.

Optional Task 7.1 Deploy contract to Polygon mainnet (MATIC needed)

To deploy contract to Polygon mainnet is almost the same as to Ropsten testnet.

  • Switch MetaMask network to Polygon Mainnet

  • Deploy in Environment "Injected Web3" (Connect to Custom(137) network). It may take a few minutes.

  • View contract at block explorer : https://polygonscan.com/

polygonscan.com is also built by the Etherscan team.

Optional Task 7.2 Verify contract on Polygonscan (website)

There is no handy plugin to verify contract on Polygonscan.com . We can do it manually:

  • STEP 1: Create an account at polygonscan.com

  • STEP 2: Search by the deployed contract address and go to contract page.

  • STEP 3: Click "Contract" tab on that page. There is only ByteCode in it. Click the "Verify and Publish" link to verify.

  • STEP 4: Fill out the form to verify contract.

verify contract on polygonscan

  • Compile Type choose: Solidity(Single File)
  • Compiler Version: choose the same one as that in Remix IDE compiler Tab

We need some help to make our smart contract into a single file as we inherit ClassToken from OpenZeppelin ERC20 contract. There is Remix IDE plugin Flattener we can use here.

  • STEP 5: Backup ClassToken.sol first as flattener will change it.

  • STEP 6: In Flattener Plugin, click button "Flatten contracts/ClassToken.sol". It will make the smart contract which inherits from OpenZeppelin ERC20 to one file. This process is called "Flatten".

  • STEP 7: paste the flattened contract code to polygonscan explorer verify page.

  • STEP 8: wait the verify process to be completed. It will take less than a minute.

Optional Task 7.3 Interact with contract on Polygonscan block explorer

Once the contract is verified on Polygonscan, you can interact with it just like Task 6.4

After completing these tasks in this tutorial, you already know how to compile, deploy and interact smart contract with the help of Remix IDE and Etherscan.

The smart contract, Remix IDE / Etherscan and MetaMask wallet together are DApp(or Semi-DApp in this tutorial): smart contract on chain, web app based on Remix IDE / Etherscan, MetaMask wallet controlled by user.

I will publish another two tutorials to build DApp with smart contract and real web front-end user interface using Node.js, ethers.js and Web3-React. Then we will have a real DApp instead of a semi-DAPP here.

If you find this tutorial helpful, you can find me at Twitter @fjun99


This content originally appeared on DEV Community and was authored by fangjun


Print Share Comment Cite Upload Translate Updates
APA

fangjun | Sciencx (2022-02-13T15:20:27+00:00) Tutorial : build your first DAPP with Remix and Etherscan. Retrieved from https://www.scien.cx/2022/02/13/tutorial-build-your-first-dapp-with-remix-and-etherscan/

MLA
" » Tutorial : build your first DAPP with Remix and Etherscan." fangjun | Sciencx - Sunday February 13, 2022, https://www.scien.cx/2022/02/13/tutorial-build-your-first-dapp-with-remix-and-etherscan/
HARVARD
fangjun | Sciencx Sunday February 13, 2022 » Tutorial : build your first DAPP with Remix and Etherscan., viewed ,<https://www.scien.cx/2022/02/13/tutorial-build-your-first-dapp-with-remix-and-etherscan/>
VANCOUVER
fangjun | Sciencx - » Tutorial : build your first DAPP with Remix and Etherscan. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/02/13/tutorial-build-your-first-dapp-with-remix-and-etherscan/
CHICAGO
" » Tutorial : build your first DAPP with Remix and Etherscan." fangjun | Sciencx - Accessed . https://www.scien.cx/2022/02/13/tutorial-build-your-first-dapp-with-remix-and-etherscan/
IEEE
" » Tutorial : build your first DAPP with Remix and Etherscan." fangjun | Sciencx [Online]. Available: https://www.scien.cx/2022/02/13/tutorial-build-your-first-dapp-with-remix-and-etherscan/. [Accessed: ]
rf:citation
» Tutorial : build your first DAPP with Remix and Etherscan | fangjun | Sciencx | https://www.scien.cx/2022/02/13/tutorial-build-your-first-dapp-with-remix-and-etherscan/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.