July 03, 2021

The Web3 Developer Stack

Overview

A developer stack is a bag of technologies a developer possesses. For example, MEAN (MongoDB, Express.js, AngularJS/Angular, and Node.js) and MERN (MongoDB, Express.js, React, and Node.js) are common web developer stacks. Similarly, today we will learn more about the web3 developer stack and the tech included.

Prerequisites
  • Node.js installed on your system.
  • Text editor.
  • Terminal aka Command-Line.
  • Willingness to learn. 

The Developer Stack

If we can imagine web3 as a car then, web3 libraries/dApps are the car's chassis, smart contracts/blockchain are the internal hardware components, wallets which act as the driver’s license, and the node is the fuel that is needed to run the car. Let’s break them down one by one.

  1. Web3 libraries/dApps:
Web3 libraries help us interface with the blockchain easily, make transactions, and interact with smart contracts. Using a web3 library we can develop decentralized applications that reside on the blockchain or interact with it, such as web3.js, ethers.js, and web3.py. Learn how to work with different web3 libraries in the ‘Web3 SDKs’ section of our guides.

2. Smart contracts:
Smart contracts are pieces of code that reside on the blockchain. They work within the blockchain and are immutable. Smart contracts are written mainly in Solidity. The majority of developers use Remix IDE to write, compile, and deploy the contracts. However, tools like Truffle, Hardhat, and Brownie are handy when a local development environment is needed. Learn about smart contracts in-depth in the Solidity section of our guides.

3. Nodes/Web3 providers:
Nodes or Web3 providers are needed to get the data from the blockchain; nodes run a copy of the blockchain. Nodes are an essential part of the web3 developer stack as without nodes, a web3 library cannot interact with smart contracts. They’re like the gateway to the blockchain realm. QuickNode runs powerful nodes worldwide. Using this global network, you can get lightning-fast access to blockchain data and send faster transactions. 

4. Wallets:
A Wallet address on a blockchain is the identity of an individual and also holds the owner's various cryptocurrencies. Whenever we want to do a write operation on the blockchain, we need to verify the transaction and pay a fee to the network; this is facilitated using the wallet—for example, MetaMask. You can integrate QuickNode with MetaMask by following this guide here. Or instead create your own ETH address/wallet in either JavaScript, Python, Ruby, Go, or PHP



Now, let’s try to understand these techs with an example. We’ll deploy a smart contract that gets  the live price of ETH-USD from Chainlink’s price feed contract.

The wallet

The Chainlink price feed contract, which we’ll use as an interface in our contract, is deployed on the Kovan Testnet. That means we’ll need to deploy our contract on the Kovan Testnet. 

To get started, you will need the MetaMask browser extension to create an ETH wallet and some test ETH, which you can get by going to the Kovan Faucet. You'll need to select Kovan Test Network on your MetaMask wallet and copy the wallet address, go to the faucet page, log in with GitHub or GitLab, paste the wallet address into the text field in the faucet, then click "Send me KETH!".


You can check if you received the test ETH or not by pasting the address into the Kovan Etherscan. If the transaction has been confirmed you should see your balance displayed here.

The contract

Head over to the Ethereum Remix IDE and make a new Solidity file, for example, ethprice.sol.  

Paste the following code into your new Solidity script:

pragma solidity ^0.6.7;

import "https://github.com/smartcontractkit/chainlink/blob/master/evm-contracts/src/v0.6/interfaces/AggregatorV3Interface.sol";

contract ethprice {

    AggregatorV3Interface internal priceFeed;

    constructor() public {
        priceFeed = AggregatorV3Interface(0x9326BFA02ADD2366b30bacB125260Af641031331);
    }

    function getLatestPrice() public view returns (int) {
        (
            uint80 roundID, 
            int price,
            uint startedAt,
            uint timeStamp,
            uint80 answeredInRound
        ) = priceFeed.latestRoundData();
        return price;
    }
}

Explanation of the code above: 

Line 1: Specifying SPDX license type, which is an addition after Solidity ^0.6.8. 

Whenever the source code of a smart contract is made available to the public, these licenses can help resolve/avoid copyright issues. If you do not wish to specify any license type, you can use a special license UNLICENSED or simply skip the whole comment (it won’t result in an error, just a warning).

Line 2: Declaring the Solidity version.

Line 4: Importing the Chainlink contract AggregatorV3Interface.sol for price feed. 

Line 6: Starting our contract named ethprice.

Line 8: Importing the AggregatorV3Interface contract as priceFeed.

Line 10-12: Initializing the constructor interface for AggregatorV3Interface contract with its address, and storing it in priceFeed variable. Doing this we can refer to the AggregatorV3Interface as priceFeed in our contract.

Line 14: Declaring a function getLatestPrice() for type public, which means that it can be accessed outside of the scope of this function and from other contracts. Stating the mutability as view defines that this function will only view and not write or modify any data on the blockchain. The return keyword along with int indicates that the function will return a value in the form of an integer.

Line 16-20: Declaring five variables roundID, price, startedAt, timeStamp, answeredInRound of type integer. These variables are used by the Chainlink contract to store the values returned.

Line 21: Using the function latestRoundData() of Chainlink’s AggregatorV3Interface contract, which we imported as priceFeed. This function will give us the values like price, timestamp of when the price was updated, and store it in variables which we saw in the previous point.

Line 22: Returning the value of price to getLatestPrice() function, so when the getLatestPrice() function is called it’ll return the value of price.

Compile the smart contract by first clicking on the second icon (Solidity icon) on the left menu and then clicking on “Compile ethprice.sol”.


You may see some warnings after compiling the contract. That is because we didn’t use all the variables of method latestRoundData. The function wants all the five variables to be passed into it. We're just asking for the price, which means it'll throw warnings at us, but we shouldn't have anything to worry about. Ensure to copy the ABI using the ABI button and save it; we’ll need it later to interact with the contract.


Now to deploy the contract click on the third icon from the left menu and select injected Web3 from the dropdown under “Environment”. Then click on “Deploy”(make sure to choose Kovan Testnet on MetaMask before deploying the contract). Approve the transaction from MetaMask.



Now that your contract is deployed, you can locate it under the "Deployed Contracts" section, copy the address of the deployed contract by clicking on the copy button and save it; we’ll need it later to interact with the contract.

The Node

We’ll need a Kovan node to interact with our contract, which is deployed on the Kovan blockchain. We’ll sign up for a free trial QuickNode and copy the HTTP PROVIDER URL that we’ll need later to connect to the blockchain.

The Web3 library

We’ll now write a short JavaScript program using the ethers.js library to interact with our deployed contract.

We’ll install ethers using npm (node package manager), which comes with node.js; learn more about ethers.js in the guide on How to connect to Ethereum network with ethers.js. Open your terminal/cmd, make a new project directory, and then make that directory your current working directory.

mkdir priceDapp
cd priceDapp

Let’s install ethers now:

sh 
npm i ethers

The most common issue at this step is an internal failure with `node-gyp`. You can follow node-gyp installation instructions here.

Note: You will need to have your python version match one of the compatible versions listed in the instructions above if you encounter the node-gyp issue. 

Another common issue is a stale cache; clear your npm cache by simply typing the below into your terminal window:

npm cache clean

If you followed the above steps, ethers.js should be installed now.

Create a JavaScript file `price.js`, and copy-paste the following in it:

var ethers = require('ethers');
var url = 'ADD_YOUR_ETHEREUM_NODE_URL’;
var provider = new ethers.providers.JsonRpcProvider(url);
var address  = 'CONTRACT_ADDRESS_FROM_REMIX';
var abi = [
	{
		"inputs": [],
		"stateMutability": "nonpayable",
		"type": "constructor"
	},
	{
		"inputs": [],
		"name": "getLatestPrice",
		"outputs": [
			{
				"internalType": "int256",
				"name": "",
				"type": "int256"
			}
		],
		"stateMutability": "view",
		"type": "function"
	}
];
var contract = new ethers.Contract(address,abi,provider);

contract.getLatestPrice().then((result) =>{
  console.log("$" +result.toNumber()/100000000);
});

Go ahead and replace `ADD_YOUR_ETHEREUM_NODE_URL` with your QuickNode HTTP provider and `CONTRACT_ADDRESS_FROM_REMIX` with the address of the deployed contract from the above section.

Explanation of the code above:

Line 1: Importing the ethers library.

Line 2: Storing our Quicknode’s URL in the url variable.

Line 3: Instantiating new ethers.providers.JsonRpcProvider instance and storing it in the provider variable.

Line 4: Storing the contract address in the address variable.

Line 5-24: Storing the ABI we got from the previous step in the abi variable.

Line 25: Initializing a contract instance in ethers and connecting it to our deployed contract using the address,abi, and provider.

Line 27: Using the getLatestPrice() from our contract to retrieve ETH’s price in USD and storing it in the result variable.

Line 28: The value from the smart contract is in Big Number, so we’ll need to convert the result to a number and divide it by100000000 to get the value in thousands. Printing the final value to console along with a string $.

Save the file, and run it in your terminal/cmd:

node price

You should now see the latest value of ETH in USD:



Note: The price of ETH/USD can change during your execution; the price in the image above is when this guide was written.

Conclusion

Congratulations :D You’ve taken your first step towards becoming a Web3 developer. We learned what wallets, smart contracts, web3 libraries and nodes are. You also deployed a smart contract and interacted with the contract using ethers.js and QuickNode!

Subscribe to our newsletter for more articles and guides on Ethereum. If you have any feedback, feel free to reach out to us via Twitter. You can always chat with us on our Discord community server, featuring some of the coolest developers you’ll ever meet :)
Ready to try QuickNode? Start your 7-day free trial

Related articles 30

Jun 7, 2021 How to integrate IPFS with Ethereum

It can be costly to store massive files on a blockchain mainnet, and this is where decentralized file storing systems like IPFS can come in handy. Sometimes, NFTs use IPFS as well. In this guide, we’ll cover how we can integrate IPFS with...

Continue reading
Jun 8, 2021 How to generate a new Ethereum address in PHP

PHP is very popular in developing the backend of websites or web applications. PHP has a huge crowd of developers trusting it as their go-to language. In this guide, we will see how we can generate a new Ethereum address in...

Continue reading
Jun 8, 2021 Estimating gas price using pending transactions in Python

To send a transaction on the Ethereum network, you need to pay fees for including the transaction in a block as well as the computation necessary in the transaction; this fee is called gas. The transactions are accepted into the block based on the amount of gas they are...

Continue reading
Jun 8, 2021 How to connect to Ethereum network with ethers.js

When someone thinks of developing a dApp the first tool that comes to their mind is web3.js which is pretty common because of its popularity in the community and wide use cases, dApp development has been consistently growing and there are a lot of developers who want to...

Continue reading
Jun 8, 2021 How to connect to the Ethereum network using Ruby

Ruby has a huge fanbase. Ruby was developed by its creator with an intention to create a language people can have fun using. Ruby has been largely accepted by the developers all around the world since it’s launch, in fact, the biggest tech communities in many cities are...

Continue reading
Jun 8, 2021 How to re-send a transaction with higher gas price using ethers.js

Sometimes, you submit a transaction on Ethereum without enough gas due to network congestion or too many pending transactions offering a higher gas price than you have offered on your transaction. If you have a high priority transaction but low gas, you could end up...

Continue reading
Jun 17, 2021 How to get the balance of an ERC-20 token

When a new token is made on the Ethereum network, it usually follows a specification. The most popular of which is the ERC20 specification. To meet this ERC20 standard, one's token must have a multitude of...

Continue reading
Jun 8, 2021 How to connect to Ethereum network with Web3.js

Libraries and frameworks make the development process a lot easier and faster. When it comes to Ethereum development, Web3.js is the go to library. That's because Web3.js is the official library, from the

Continue reading
Jun 8, 2021 How to generate a new Ethereum address in Ruby

With high usage in web applications and straightforward syntax, Ruby is used by a vast number of people. This guide will cover creating an Ethereum address in Ruby using ruby-eth...

Continue reading
Aug 15, 2021 How to Send a Transaction On Solana Using JavaScript

Hello reader! Today is an exhilarating day because we are going on an expedition to the Solana Blockchain. Solana is an up-and-coming blockchain seeking to improve upon the current ecosystem's solutions to the complex problem of providing a secure, scalable, decentralized...

Continue reading
Jun 8, 2021 How to Fork Ethereum Blockchain with Ganache.

Forking and running a local simulated Ethereum environment is essential if you want to work with DeFi or do Ethereum development in general. In this guide, we’ll cover how to fork Ethereum Blockchain with

Continue reading
Jun 8, 2021 How to fetch Ethereum event logs in Ruby

Ethereum log records are very useful to understand and keep track of smart contract events. In this guide, we are going to learn how to fetch ethereum event logs in Ruby using ethereum.rb ruby...

Continue reading
Jun 9, 2021 How to generate a new Ethereum address in Go

Golang is very popular among backend developers for building infrastructures and microservices. Go is a procedural programming language. Developed in 2007 by Robert Griesemer, Rob Pike, and Ken Thompson at Google, then launched in 2009 as...

Continue reading
Jun 9, 2021 How to generate a new Ethereum address in Python

Python is one of the most versatile programming languages out there with an abundance of use cases; We can build many applications with Python from client-side to back end. In this guide, we will cover creating an Ethereum address in Python using the

Continue reading
Jun 9, 2021 How to generate a new Ethereum address in JavaScript

When it comes to programming, there’s hardly anyone who has not used or heard about JavaScript. JavaScript was initially created for client-side scripting but has become a full-featured Object-Oriented...

Continue reading
Jun 9, 2021 How to connect to Ethereum network using Go

Go helps you make faster scalable backends and this guide will show you how to connect your backend to Ethereum (and make it even faster, more reliable, and globally accessible, all thanks to QuickNode’s global infrastructure). What is...

Continue reading
Jun 9, 2021 How to connect to Ethereum network using Java / Web3j

We can say that Java is one of the most versatile languages out there, and it continues to be relevant in today's time. Java is so popular because of its massive user base and use cases. In this guide/tutorial, we'll learn how to connect to the Ethereum Blockchain network...

Continue reading
Jun 9, 2021 How to connect to Ethereum using .NET (Nethereum)

Dotnet or .NET is very popular for the development of desktop applications, most Windows desktop applications are built using .NET, and it also contributes largely to web application’s tech stack. In this guide, let’s see how we can connect to Ethereum using .NET and

Continue reading
Jun 15, 2021 How to connect to Ethereum using PHP

PHP is a very popular choice among developers and has a vast community due to its long presence in web development. In this guide, we’ll cover how to connect to Ethereum with PHP using the web3.php...

Continue reading
Jul 15, 2021 How to Setup Local Development Environment for Solidity

The success story of blockchain started with Bitcoin and was given wings by Ethereum. Ethereum was the first blockchain to introduce programmable software to the immutable ledger; these programs that live on the blockchain are called smart contracts. Solidity is the...

Continue reading
Jun 9, 2021 How to use Subspace with QuickNode

In this guide, we'll understand a bit about reactive development and how to use Subspace with QuickNode.JavaScript is the programming language behind most of the internet apps and websites. JavaScript today has become one of the most used programming languages,...

Continue reading
Jun 9, 2021 How to connect to the Ethereum network using Python using Web3.py

You can build Ethereum applications in different programming languages. In this article, we will connect to the Ethereum network using Python.PrerequisiteEthereum Node (We will use QuickNode’s free...

Continue reading
Jul 24, 2021 How to deploy a smart contract with Brownie

Python is one of the most versatile programming languages; from researchers running their test models to developers using it in heavy production environments, it has use cases in every possible technical field. In today's guide, we will learn about Brownie, a Python-based...

Continue reading
Jul 13, 2021 How To Fork Ethereum Mainnet with Hardhat

Forking the chain at an older block of the blockchain is helpful if you want to simulate the blockchain’s state at that block; Hardhat has this functionality built in. In this guide, let’s go through the process of forking the Ethereum Mainnet at an older...

Continue reading
Jun 26, 2021 How to create and deploy a smart contract with Hardhat

Ethereum development environments like Truffle and Hardhat make it easier to work with smart contracts and Ethereum nodes. They provide a set of tools to seamlessly write, test, and deploy...

Continue reading
Jul 2, 2021 How to do a non-custodial transaction with QuickNode

Private keys are one of the most sensitive pieces of data when it comes to cryptography, cryptocurrencies, and blockchain. However, there has always been debate/confusion about choosing between custodial wallets (where the wallet provider has custody of the user’s private...

Continue reading
Jul 2, 2021 How to generate a new Bitcoin address in JavaScript

To do any type of transaction on the Bitcoin blockchain, you’ll need a public key or a Bitcoin address. In this guide, we’ll cover how to generate a new Bitcoin address in JavaScript using CyrptoCoinJS.

Continue reading
Aug 13, 2021 How to create your own DAO with Aragon

Blockchain provides us with the power of decentralization. Decentralization means the transfer of power to users/members rather than having a single centralized authority governing everything; it enables various use cases in finance, governance, voting, fundraising, etc....

Continue reading
Aug 15, 2021 How to Create an Address in Solana using JavaScript

Hello reader! Welcome to QuickNode's first Solana guide. Solana is an up-and-coming blockchain that seeks to solve the scalability issues that Ethereum has been handling. You will walk through step-by-step how to create a Solana address using the @solana/web3.js...

Continue reading
Sep 10, 2021 How to Mint An NFT On Solana

Hello reader! Welcome to another Solana guide. Solana is an up-and-coming blockchain that seeks to solve the scalability issues that Ethereum has been handling. In this guide, you will walk through step-by-step how to create an NFT on Solana....

Continue reading