Road to Web3: Week 2

BUILD A ‘BUY ME A COFFEE’ dAPP

Week two of Web3 University’s Road to Web3 builds on ideas from the previous week and teaches students how to build a ‘Buy Me a Coffee’ defi (decentralized finance) dApp (decentralized application).  Week two demands more programming knowledge than the previous week.  Students need to have some familiarity using the command line.  Along with npm and node, students will set up their developer environment with Hardhat.  Hardhat will generate template files that includes a Solidity smart contract and JavaScript files.  Replit and EtherJS are used to create a frontend that communicates with the smart contract.

THE COMMAND LINE, NPM, AND NODE

The command line, also referred to as the terminal, is a user interface that incorporates text commands rather than a graphical interface that functions with mouse clicks.

Using the command line students can install NPM (node package manager).  NPM is an open-source software registry that is an extremely useful tool to add libraries to projects.

Students must also download Node.js.  Node.js is an open source server environment that uses JavaScript.  NVM (node version manager) is a version manager that is often recommended as it allows developers to use different versions of node.  This can come in handy when it is necessary to use older versions of node in order to use certain libraries that may not be compatible with the newest Node.js version. 

With npm and Node.js onboard, the next step is to create a package.json file:

The package.json file will contain metadata of all the dependencies that a project will use.  As shown above, the “npm init -y” command creates a json object that contains important information pertaining to the project. As the project grows, the file will be populated with more information.

HARDHAT

Students are introduced to Hardhat which helps create a starting template.  Using the command line and npm, the following screen is presented:

Choosing the JavaScript option creates the following template of files:

SOLIDITY SMART CONTRACT

After setting up the developer environment, the next step is to modify the generated solidity file. Students replace the template code with the following:

This is the smart contract that will exist on the blockchain.  Within the BuyMeACoffee contract are various data structures that together compose the logic of the smart contract.    

JAVASCRIPT FILES

The project includes JavaScript files which assist the solidity smart contract.

The buycoffee.js file is used to test the functions found in the smart contract.  Using hardhat, the test is run locally with the following command:

npx hardhat run scripts/buy-coffee.js

The next JavaScript file works to deploy the contract onto the blockchain:

This command deploys locally through hardhat and returns a hash address that will eventually be used as the contract address. Initially running this command is done for testing purposes. A new hash will be created when the contracted is deployed once again.

npx hardhat run scripts/deploy.js

Next, the hardhat.config.js file contains important private information that will be hidden through the use of dotenv.

The following command adds dotenv to the project:

npm install dotenv

A .env file is created and populated with the following information:

This information will remain hidden and will appear only as variables in the hardhat.config file. The .env will be listed in the gitignore file. Files listed in gitignore will be visible only to the developer in the local environment.

With the information in the hardhat.config file, the deploy command will now deploy the smart contract to the Goerli Test Network:

npx hardhat run scripts/deploy.js --network goerli

Finally, a JavaScript file with the withdraw logic is used to withdraw tips to the owner’s account:

REPLIT AND ETHER.JS

The front end of the website is created using Replit and Ether.js.  A template is provided, and project specific information is inserted into the template.  An index.js file contains information that can be customized specific to the student such as the contract address and the student’s name.  Also, the BuyMeACoffee.json file contains information related to the initial smart contract that was created.  Ether.js links the smart contract to the front end elements of the Replit template.

If everything has been done correctly up to this point, Metamask connected to the Goerli test net will ask for confirmation when the ‘connect wallet’ button is clicked. Once inside the dApp, the connected user can leave a message and give a tip in Eth paying a small gas fee.

CONCLUSION

Week 2 of Road to Web3 challenges students further and introduces new methods to create a smart contract. Students are exposed to the command line and Node.js. Using Hardhat, students are able to create a developer environment to test and deploy their smart contract. Solidity and JavaScript are used in conjunction to deploy the smart contract onto the blockchain. Online IDE Replit is used to create a front end which communicates with the smart contract through Ether.js. Many moving parts function together to create a personal ‘Buy Me a Coffee’ defi dApp.