If you want to get into Web3 development and start building dapps, this comprehensive Web3 JavaScript tutorial will walk you through the entire process of creating a dapp from scratch using JavaScript (JS). In addition to breaking down the process, we’ll go over some Web3 and JS fundamentals first. If you have prior experience with these, you can skip ahead to the “Blockchain Developers Web3 JS Tutorial” section and learn how to create a dapp right away!
In addition, the “Blockchain Developers Web3 JS Tutorial” section demonstrates how to create a dapp for fetching and displaying the native token, ERC-20 token, and NFT balances of a given Web3 wallet. In addition, to simplify the process, this article divides the tutorial into three steps:
- Creating a NodeJS dapp, installing Moralis, and setting up an Express server
- Integrating Moralis’ services
- Reading blockchain data
If the above steps sound interesting, stick with us as we tackle this Web3 JS tutorial and demonstrate how to build a dapp quickly!
Getting Started in Web3 Using JavaScript
If you are new to the Web3 development space, you should be aware that there are several similarities between Web2 and Web3 development practices. As a result, if you are an experienced developer, you will most likely be able to use programming languages that you are already familiar with, such as JavaScript (JS)!
On the other hand, if you are completely new to the development space in general, learning JS can be extremely beneficial. Knowing how to use JS is a great way to get started in Web3 and provides a solid foundation for any development endeavor. The academy provides a variety of excellent blockchain courses for both new and experienced developers. For example, “JavaScript Programming 101” is a great JS course to get you started on your Web3 journey.
Furthermore, if you know JS, you can use it in conjunction with Moralis’ excellent development tools, such as the various Web3 APIs, to create sophisticated blockchain projects. For example, you can easily stream blockchain data into the backend of your projects using webhooks using Moralis’ Web3 Streams API.
Furthermore, this article will show you the simplest way to get started in Web3 using JS to create a dapp that retrieves blockchain data from a specific Web3 wallet. However, before doing so, we will return to basics and answer the question, “what is Web3?”.
What is Web3?
Defining Web3 is not always easy, as there are many slightly contradictory definitions on the internet. The fact that most people refer to Web3 as the “third generation of the internet” is a common denominator. Nevertheless, to adequately answer the question, “what is Web3?” and understand the benefits of this new phase, it is a good idea to start by explaining the preceding “generations”.
- Web1 – Web1 was the first generation of the internet, characterized by static information delivery. As a result, Web1 lacked interactive elements, and the internet served primarily as a source of data and information.
- Web2 – With the introduction of social media, the web transitioned from the static nature of Web1 to Web2. Web2 is still the most popular phase, and rather than being static, Web2 shifted the internet to be more dynamic by providing a more interactive web experience.
However, in addition to introducing a more dynamic web experience, Web2 is distinguished by centralization. Unfortunately, this has some disadvantages, such as transparency, privacy, and single points of failure.
The aforementioned issues are some of the factors that are currently driving the transition to Web3, which is characterized by decentralization. As a result, Web3 intends to create a decentralized web powered by blockchain technology. Web3 includes dapps and smart contracts in addition to blockchain technology. Because these are two critical components of the Web3 ecosystem, this article focuses on the former and provides a Web3 JS tutorial for building dapps!
Before proceeding to the main body of this tutorial, we will learn more about JavaScript, which is one of the most commonly used languages in both Web2 and Web3 development!
What is JavaScript?
JavaScript (JS) is an object-oriented programming language that is most commonly used for web development. Furthermore, JS is a well-established language that is currently one of the most popular in Web2 and Web3 development!
JS is often referred to as “the third layer of the web” as the language can update CSS and HTML code. As a result, JS enables developers to incorporate interactive elements into websites/applications. As a result, whenever you come across a webpage or app that does more than just display static content, you can almost always be certain that JS code is present.
Furthermore, because JS is text-based, it is relatively easy to use and learn. Using JS in your Web3 development efforts, however, you can create dynamically updated content. As a result, you can provide a more sophisticated user experience and increase user engagement with JS!
JavaScript Web3 Example
With a better understanding of Web3 and JavaScript, it’s almost time to get into the meat of this tutorial and show you how to make a dapp. However, before doing so, this section briefly discusses the features of a simple dapp, as this provides an excellent example of how a JavaScript Web3 dapp can function. This is also the application you will learn to create if you continue reading!
You can create dapps and other Web3 projects quickly. Moralis’ various tools, such as the Web3 Authentication API, allow for the rapid development of a wide range of projects, from DEXs (decentralized exchanges) to NFT-related platforms.
However, for this Web3 JS tutorial, we will build a simple NodeJS dapp. To demonstrate Moralis’s accessibility, you will learn to create a dapp for fetching and displaying the native token, ERC-20 token, and NFT balances of a specific crypto wallet. Furthermore, because of Moralis’ cross-chain capabilities, this JS tutorial is applicable to almost any blockchain, including Polygon, Ethereum, BNB Chain, and others!
If you finish the Web3 JS tutorial and build the application, you will be able to apply the same principles to any future projects. You will also learn how to create a server-side JS dapp that can query any on-chain data, including NFTs, tokens, balances, transactions, transfers, and more!
Nonetheless, let us jump right into the tutorial and take a closer look at the steps required to create this dapp!
Web3 JS Tutorial – A Step-by-Step Guide for Blockchain Developers
The sections that follow explore the central part of this tutorial to show you how to create your own dapp from the ground up, and it’s divided into three steps to make it easier to follow along:
- Creating a NodeJS dapp, installing Moralis, and setting up an Express server
- Integrating Moralis’ services
- Reading blockchain data
However, before you begin this Web3 JavaScript tutorial, you should be aware of a few prerequisites. First up, you will need a Moralis account to join along.
You will also require an IDE (integrated development environment). VSC will be used in our case (Visual Studio Code). If you choose another IDE, keep in mind that the process may vary from time to time. Finally, you must install NodeJS. The most recent version of the NodeJS installer can be found here.
That concludes the prerequisites! We can now move on to this Web3 JS tutorial, beginning with how to create a NodeJS dapp!
Step 1: Creating a NodeJS Dapp, Installing Moralis, and Setting Up an Express Server
You can start by creating a new folder for your project. Then, open the folder in VSC (or any other IDE you prefer) and create a new project. You can start the project by typing “npm init” into a new terminal window. If you use VSC, open a new terminal by clicking “Terminal” at the top, then “New Terminal”:
Once you run the command, name the file and fill in the details you want. When you press enter for the final option, it should create a new “package.json” file in your local directory with code similar to the following:
{
"name": "simple-nodejs-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
After you’ve completed the project setup, run the following command to install the Moralis and Express dependencies:
npm install moralis express
Finally, create an Express server by adding the following content to a new file called “index.js”:
const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
res.send('Hello World!')
})
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})
From there, add the script below to the ”package.json” file:
"scripts": {
"start": "node index.js"
},
You should then be able to run the server by typing the following command into your terminal and pressing enter:
npm run start
If everything worked correctly, you should now be able to launch the dapp by clicking on the following link: ”http://localhost:3000“. Currently, the dapp should only display the ”Hello World!” message!
That covers the first step of this Web3 JavaScript tutorial. The following step will show you how to integrate Moralis’ services!
Step 2: Integrating Moralis’ Services
Now that you have a standard “Hello World!” project, it’s time to integrate Moralis into your dapp. The first thing you’ll need is your Moralis Web3 API key to get started. Log into Moralis and go to the “Web3 APIs” tab to the left of the admin panel to find the key:
Open your IDE and navigate to the “index.js” file using the API key. You can then import and initialize Moralis by entering the following code:
const express = require('express')
// Import Moralis
const Moralis = require('moralis').default
// Import the EvmChain dataType
const { EvmChain } = require("@moralisweb3/evm-utils")
const app = express()
const port = 3000
// Add a variable for the API key, address, and chain
const MORALIS_API_KEY = "replace_me"
const address = "replace_me"
const chain = EvmChain.ETHEREUM
app.get('/', (req, res) => {
res.send('Hello World!')
})
// Add this a startServer function that initializes Moralis
const startServer = async () => {
await Moralis.start({
apiKey: 'xxx',
})
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})
}
// Call startServer()
startServer()
As you can see from the code snippet above, you will need to add some information to the code. To begin, enter your API key into the “MORALIS API KEY” variable and inside the “Moralis.start()” function.
Additionally, enter the address of the cryptocurrency wallet from which you want to monitor and receive blockchain data. You can also add additional chains to the code if desired. If this is the case, you can replace “EvmChain.ETHEREUM” with “EvmChain.ROPSTEN” or “EvmChain.BSC”.
This section covers all of the code configurations required for Moralis integration. All that is left is to add the functionality for retrieving on-chain data!
see also; How To Build Credit: 5 Ways To Increase Your Credit Fast
Step 3: Reading any Blockchain Data
With the Moralis services integrated, you can easily access on-chain data using Moralis’ Web3 APIs. As a result, it’s time to add functionality for retrieving and displaying native token, ERC-20 token, and NFT balances.
This is a simple task, and you can get all of this data by writing a “getDemoData()” function and inserting it into the “index.js” file just below the “chain” variable. This is the entire function code:
async function getDemoData() {
// Get native balance
const nativeBalance = await Moralis.EvmApi.balance.getNativeBalance({
address,
chain,
})
// Format the native balance formatted in ether via the .ether getter
const native = nativeBalance.result.balance.ether
// Get token balances
const tokenBalances = await Moralis.EvmApi.token.getWalletTokenBalances({
address,
chain,
})
// Format the balances to a readable output with the .display() method
const tokens = tokenBalances.result.map((token) => token.display())
// Get the nfts
const nftsBalances = await Moralis.EvmApi.nft.getWalletNFTs({
address,
chain,
limit: 10,
})
// Format the output to return name, amount and metadata
const nfts = nftsBalances.result.map((nft) => ({
name: nft.result.name,
amount: nft.result.amount,
metadata: nft.result.metadata,
}))
return { native, tokens, nfts }
}
app.get("/demo", async (req, res) => {
try {
// Get and return the crypto data
const data = await getDemoData()
res.status(200)
res.json(data)
} catch (error) {
// Handle errors
console.error(error)
res.status(500)
res.json({ error: error.message })
}
})
If you followed the steps in this Web3 JS tutorial correctly, your “index.js” file should now look like this:
const express = require("express")
const Moralis = require("moralis").default
const { EvmChain } = require("@moralisweb3/evm-utils")
const app = express()
const port = 3000
const MORALIS_API_KEY = "replace_me"
const address = "0x9e8f0f8f8f8f8f8f8f8f8f8f8f8f8f8f8f8f8f8f"
const chain = EvmChain.ETHEREUM
async function getDemoData() {
// Get native balance
const nativeBalance = await Moralis.EvmApi.balance.getNativeBalance({
address,
chain,
})
// Format the native balance formatted in ether via the .ether getter
const native = nativeBalance.result.balance.ether
// Get token balances
const tokenBalances = await Moralis.EvmApi.token.getWalletTokenBalances({
address,
chain,
})
// Format the balances to a readable output with the .display() method
const tokens = tokenBalances.result.map((token) => token.display())
// Get the nfts
const nftsBalances = await Moralis.EvmApi.nft.getWalletNFTs({
address,
chain,
limit: 10,
})
// Format the output to return name, amount and metadata
const nfts = nftsBalances.result.map((nft) => ({
name: nft.result.name,
amount: nft.result.amount,
metadata: nft.result.metadata,
}))
return { native, tokens, nfts }
}
app.get("/demo", async (req, res) => {
try {
// Get and return the crypto data
const data = await getDemoData()
res.status(200)
res.json(data)
} catch (error) {
// Handle errors
console.error(error)
res.status(500)
res.json({ error: error.message })
}
})
const startServer = async () => {
await Moralis.start({
apiKey: MORALIS_API_KEY,
})
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})
}
startServer()
That’s it for this Web3 JavaScript tutorial! You now understand how to use Moralis to create a JavaScript application. If you have any further questions about the Web3 JS tutorial or have encountered any difficulties.
In addition, consider the Moralis YouTube video below for a more detailed guide to setting up a full-stack Web3 dapp. This video demonstrates how to build a full-stack Web3 app with Moralis, React, NodeJS, and web3uikit!
see also; Step-by-Step Guide on How to Buy Ethereum
Summary – Web3 JS Tutorial for Developers
According to the web3.js introductory guide, the JavaScript library for web3 development provides a simple tool for creating web3 applications. Web3.js primarily facilitates communication between websites or clients and the Ethereum blockchain. The web3.js functionalities explained in the web3 JavaScript tutorial give you a good idea of what you can do with it. Web3.js, a popular JavaScript library for web3 development, guarantees higher engagement and simpler user experiences. With the power of JavaScript in web development, web3.js has the potential to significantly improve developers’ capabilities.
