Non-Coders Who Want To Create Web3 Projects: Successfully Completing The Freshman Track in 1 week with LearnWeb3DAO Part 1
It has been a full year since I embarked on this Web3 journey for a non-coder like myself. I tried to avoid anything dealing with coding. However, I decided to get outside of my comfort zone.
In this article, I’m sharing my experience enrolling in my 1st web3 Developer Decentralized Autonomous Organization LearnWeb3 DAO to build the following projects: a Decentralized Application(dApp), creating a token, and finally, a Non-Fungible Token using ERC-721 completed in one week. This article will cover the dApp.
Building a Decentralized Application with Ethers.js
The freshman track is for beginners who are new to Web 3. From my point of view, since I have already completed a few projects through Odyssey DAO and am familiar with some programming languages, this was an excellent starting point.
The base of the project is to build a Hypertext Markup Language (HMTL) webpage, code a basic smart contract and finally connect with the webpage and smart contact on Ethers.js (Javascript).
Decentralized application (dApp)
A Decentralized Application (dApp) are programs or digital application that runs either on the blockchain or a peer-to-peer (P2P) network. The two major components of a dApp are the front-end and back-end. For this project, the webpage is the front end that communicates with the user, and the smart contract is the back end that runs on the server. Now let’s learn about front-end of the webpage.
Coding in HTML
HTML programming language to build the webpage. If you are old enough to remember the Myspace era, some of us were coding and editing our web pages to fit our personalities. For this, the HTML webpage is the 1st layer. Here are the building blocks for this project, with additional tools to learn along the way.
The first step is downloading and installing the MetaMask wallet if you do not have one already.
Change the Mainnet to a test network. In this project, change to the Goerli test network.
- Request some Goerli Tesnet Ether from a faucet loaded into your Metamask Wallet.
- Install HTTP server
- Install Node.js (Download and Instructions)
Install lite-server (with NPM in a terminal/command prompt):
Now it’s time to write the code for the webpage. If you never coded before, it might be confusing at 1st reading the template to understand what is needed. One way to familiarize yourself is to compare it to the format of an essay outline.
The final outcome of the code is for the application to read write values within the blockchain. To test to see if the code was successful open command prompt and run the command lite-server.
After I put the command in, the dApp loaded successfully. The second layer of this project is to build and deploy a smart contract.
Building and Deploying a Smart Contract
Smart Contract
Smart contracts are self-executing lines of code with the terms of an agreement between buyer and seller automatically verified and executed via a computer network. Or, simply, a program code or transaction on a decentralized platform. Remix IDE is one tool to use to create a smart contract.
Remix IDE
Remix IDE is an open-source web and desktop application developers use to develop smart contracts in Solidity programming language. Since we understand a smart contract and the tool to use, let’s create the code.
Solidity Programming Language
Solidity is an object-oriented, high-level language for implementing smart contracts. This language is also a curly bracket language designed to target the Ethereum Virtual Machine (EVM). An EVM is the runtime environment for smart contracts in Ethereum. According to Solidity Language .org, ensure to use the latest version when deploying contracts to receive security fixes.
Deploy the contract on the Goerli Testnet.
Make sure the Metamask Wallet is connected to the Goerli Testnet.
Make sure you select the right compiler version to match the solidity contract. (In the compile tab)
Compile the code using the “Solidity Compiler” tab. Note that it may take a moment to load the compiler
Deploy the contract under the “Deploy and Run Transactions” tab
Under the Deployed Contracts section, you can test your functions on the Remix Run tab to ensure your contract works as expected!
Connecting the Webpage and Smart Contract
Finally, the 3rd layer is to connect the webpage to the smart contract. As mentioned previously, the tools used so far are Visual Studio Code and Remix IDE for the webpage and the smart contract. Therefore, a connection between these two is needed. To accomplish this, open the index.html file from VSC and add this additional code.
Importing Ethers.js to the webpage
This code is inserted into the index.html file, tested out, and connected with MetaMask.
The outcome is the contract listed on Etherscan.
In summary, this project exposed me to the Web3 Developer career path. As a non-coder being active in the Discord community with LearnWeb3DAO assisted in my success with finishing part 1 of the freshman track. Tune in for Part 2 for Building an NFT Smart Contract using HardHat.
