├── .gitattributes ├── Mood_ABI.json ├── README.md ├── contracts └── mood.sol ├── favicon.ico ├── index.html ├── remix_deploy_and_test.png └── test └── index.html /.gitattributes: -------------------------------------------------------------------------------- 1 | *.sol linguist-language=Solidity 2 | -------------------------------------------------------------------------------- /Mood_ABI.json: -------------------------------------------------------------------------------- 1 | [{"constant":false,"inputs":[{"name":"_mood","type":"string"}],"name":"setMood","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"getMood","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"}] 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Create An Ethereum Dapp with Ethersjs 2 | 3 | This is a step-by-step tutorial on how to create a front end, deploy a Solidity smart contract, and connect them together. 4 | We will use [Metamask](https://metamask.io), [Remix IDE](https://remix.ethereum.org) and [Ethersjs](https://github.com/ethers-io/ethers.js/). 5 | 6 | By the end of this tutorial you will be able to create a simple HTML front end with buttons that can interact with smart contract functions. The tutorial takes place in 3 stages 7 | 8 | - Create a basic html web page 9 | - Create a basic solidity smart contract 10 | - Connect the web page with the smart contracts using Ethersjs. 11 | 12 | --- 13 | 14 | ### Preparation 15 | 16 | 1. **Download and Install [MetaMask](https://metamask.io)** 17 | - Never used Metamask? Watch [this explainer video](https://youtu.be/wlm4QcA8c4Q?t=66) 18 | 19 | *The important bits for us are: `1:06 to 4:14`* 20 | - Change to the Ropsten Tesnet and get a Copy an account's wallet public address 21 | 22 |

23 | 24 | 25 |

26 | 27 | 28 | 2. **Request some Ropsten Tesnet Ether from a faucet loaded into your Metamask Wallet.** 29 | - [Faucet link to request funds](https://ipfs.io/ipfs/QmVAwVKys271P5EQyEfVSxm7BJDKWt42A2gHvNmxLjZMps/) 30 | - [Blog explaining a faucet and how to use one](https://blog.b9lab.com/when-we-first-built-our-faucet-we-deployed-it-on-the-morden-testnet-70bfbf4e317e) 31 | 32 | 33 | 3. **Install a http server. Use any you like, but we recommend `lite-server` for beginners:** 34 | - Install NPM ([Download and Instructions](https://www.npmjs.com/)) 35 | - Install lite-server (with NPM in a terminal/command prompt): 36 | 37 | ```bash 38 | npm install -g lite-server #install lite-server globally 39 | ``` 40 | --- 41 | 42 | ### Create and Serve a Simple Webpage 43 | 44 | The first step is to create a basic html page. 45 | 46 | 1. Create a new folder (directory) in your terminal using `mkdir ` 47 | 2. In a code editor (e.g. atom, or visual studio), open the folder 48 | 3. Create a new file called `index.html` 49 | 4. Open index.html 50 | 5. Create html and body tags 51 | ```html 52 | 53 | 54 | 55 | 56 | ``` 57 | We will create an app that simply reads and writes a value to the blockchain. We will need a label, an input, and buttons. 58 | 6. Inside the body tag, add some text, a label and input. 59 | ```html 60 | 61 |

This is my dApp!

62 |

Here we can set or get the mood:

63 |
64 | 65 | 66 | ``` 67 | 68 | 7. Inside the body tag add some buttons. 69 | ```html 70 |
71 | 72 |
73 |
74 | 75 |
76 | 77 | ``` 78 | 79 | 8. Serve the webpage via terminal/command prompt from the directory that has `index.html` in it and run: 80 | ```bash 81 | lite-server 82 | ``` 83 | 84 | 9. Go to [http://127.0.0.1:3000/](http://127.0.0.1:3000/) in your browser to see your page! 85 | 86 | 10. Your front end is now complete! 87 | 88 | --- 89 | 90 | ### Create a Basic Smart Contract 91 | 92 | Now it is time to create a solidity smart contract. 93 | 94 | 1. You can use any editor you like to make the contract. For this tutorial we recommend the online IDE [remix.ethereum.org] 95 | - Never used remix before? Checkout [This video](https://www.youtube.com/watch?v=pdJttvcAV1c) 96 | 2. Go to remix.ethereum.org 97 | 3. Check out the "Solidity Compiler", and "Deploy and Run Transactions" tabs. If they are not present, enable them in the plugin manager 98 | 4. Create a new solidity file in remix, named `mood.sol` 99 | 5. Write the contract 100 | - Specify the solidity version 101 | ``` 102 | pragma solidity ^0.8.1; 103 | ``` 104 | - Define the contract 105 | ``` 106 | contract MoodDiary{ 107 | 108 | } 109 | ``` 110 | - Inside the contract create a variable called mood 111 | ``` 112 | string mood; 113 | ``` 114 | - Next, create Read and Write functions 115 | ``` 116 | //create a function that writes a mood to the smart contract 117 | function setMood(string memory _mood) public{ 118 | mood = _mood; 119 | } 120 | 121 | //create a function the reads the mood from the smart contract 122 | function getMood() public view returns(string memory){ 123 | return mood; 124 | } 125 | ``` 126 | - And that's it! your code 127 | like [this](https://github.com/BlockDevsUnited/BasicFrontEndTutorial/blob/master/contracts/mood.sol) 128 | 129 | 6. Deploy the contract on the Ropsten Testnet. 130 | - Make sure your Metamask is connected to the Ropsten Testnet. 131 | - Make sure you select the right compiler version to match the solidity contract. (In the compile tab) 132 | - Compile the code using the "Solidity Compiler" tab. _Note that it may take a moment to load the compiler_ 133 | - Deploy the contract under the "Deploy and Run Transactions" tab 134 | - Under the Deployed Contracts section, you can test out your functions on the Remix Run tab to make sure your contract works as expected! 135 | 136 |

137 |

138 |

139 | 140 | ***Be sure to deploy on Ropsten via Remix under the `Injected Web3` environment and confirm the deployment transaction in Metamask*** 141 | 142 | Make a new temporary file to hold: 143 | - The deployed contract's address 144 | - Copy it via the copy button next to the deployed contracts pulldown in remix's **Run** tab 145 | - The contract ABI ([what is that?](https://solidity.readthedocs.io/en/develop/abi-spec.html)) 146 | - Copy it via the copy button under to the contract in remix's **Compile** tab (also in Details) 147 | 148 | --- 149 | 150 | ### Connect Your Webpage to Your Smart Contract 151 | 152 | Back in your local text editor in `index.html`, add the following code to your html page: 153 | 154 | 1. Import the Ethersjs source into your `index.html` page inside a new set of script tags: 155 | 156 | ```html 157 | 161 | 162 | 19 | 20 | 21 | 22 | 23 | 24 | 26 | 27 |
28 |
29 |

This is my Ethersjs Demo!

30 |

Here we can set or get the mood:

31 |
32 |
33 | 34 | 35 |
36 |
37 |
38 |
39 | 40 |
41 |
42 | 43 |
44 |
45 |
46 |
47 | 48 | 107 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /remix_deploy_and_test.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BlockDevsUnited/BasicFrontEndTutorial/7451d44d48a8dfb04391873a6b43a29cfa7c522b/remix_deploy_and_test.png -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 |
11 |
12 | 13 |
14 | 15 | 16 | 17 | --------------------------------------------------------------------------------