How to Develop an Etherium DApp
What is a DApp? DApps are applications built on a decentralized network that combine backend code (smart contracts) with a frontend user.
Many DApps are now available. From gaming, to NFTs to exchanges. You can visit State of the DApps or DappRadar to check out the list of popular and latest dapps.
According to a Stack Overflow 2019 Developer Survey, 68% of web developers have a positive opinion on blockchain tech, with 30% seeing it as having a 'life-changing' effect.
In this article you will learn:
How to develop, evaluate, and deploy Ethereum smart contracts on the local, test, and mainnet
How to change between local, test, and production web3 networks
How to interact with contracts using various front-end environments such as Angular, React, or Vue.
Before we dive into the workflow, there are a few considerations for your DApp.
Is there a user interface for the DApp? Unless, of course, your DApp is a fully automated operation. DApps often have a user interface (UI) feature, such as a web or mobile app, since they are often used by humans to communicate with smart contracts or the Ethereum network. If your DApp is meant to be used in a browser, you'll build your user interface in Javascript, just like a typical Single Page App.
1. Setting up your Ethereum development environment
Remix, formerly known as Browser-Solidity, is a browser-based Smart Contract creation environment. It includes compilers for various Solidity versions as well as a blockchain simulation. It also comes with a slew of other add-ons. It's a fantastic place to start.
However, if you’re an advanced developer, you'll need a way to deploy your smart contracts, run tests, and debug Solidity code without having to deal with live environments while developing smart contracts. You'll also need a way to compile your Solidity code into code that can be used in a client-side programme. Later on, we'll read more about how this works. Testing should not be a last-minute decision. Debugging and checking become first-class citizens of your development workflow with these tools. Without the hassle, you can develop, test, and deploy your Smart Contracts. Use a development environment that handles the groundwork, monitors for improvements, and re-deploys the app as required.
Ethereum development environment and platform for full stack development:
2. Use Ethereum Web Client Libraries
We'll need a way to communicate with the smart contracts that have already been set up. We'll need a way to read data and submit new transactions as well.
ethers.js is a client-side JavaScript library that aims to be a full and compact library for communicating with the Ethereum Blockchain and its ecosystem from client-side JavaScript applications like React, Vue, Angular, or Svelte. It is this library that we will use.
Web3.js exposes a collection of libraries to communicate with Ethereum nodes locally or remotely via a Javascript API. The JSON-RPC protocol is used to communicate with the API over an HTTP or IPC link. For retrieving Ethereum user accounts, purchases, and smart contracts, the Web3 JavaScript library is commonly used.
3. Metamask
Metamask helps to handle account management and connecting the current user to the blockchain. MetaMask enables users to manage their accounts and keys in a few different ways while isolating them from the site context. MetaMask provides a key vault, secure login, token wallet, and token exchange as a browser extension and a mobile app, giving you everything you need to handle your digital assets.
Once a user has connected their MetaMask wallet, you as a developer can interact with the globally available Ethereum API (window.ethereum) that identifies the users of web3-compatible browsers (like MetaMask users), and whenever you request a transaction signature, MetaMask will prompt the user in as comprehensible a way as possible.
If you want to support multiple wallets in addition to MetaMask, check out Web3Modal which makes it easy to implement support for multiple providers in your app with a fairly simple and customizable configuration.
4. Connect with decentralized APIs
For most apps built on blockchains like Ethereum, it's hard and time-intensive to read data directly from the chain, so you used to see people and companies building their own centralized indexing server and serving API requests from these servers. This requires a lot of engineering and hardware resources and breaks the security properties required for decentralization.
The Graph is an indexing protocol for querying blockchain data that enables the creation of fully decentralized applications and solves this problem, exposing a rich GraphQL query layer that apps can consume. In this guide we won't be building a subgraph for our app but will do so in a future tutorial.
API3’s decentrally governed and quantifiably stable data feeds enable you to build powerful decentralised applications. API3 data feeds, also known as dAPIs, collect data from first-party oracles and are provided by some of the world's most reputable API providers.
Conclusion
Solidity, despite its novelty, has gained widespread adoption and is used to compile the byte-code in many of today's Ethereum smart contracts. Blockchain is both innovative and complex, making it difficult to understand. You should not, however, be afraid to learn the fundamentals. This blog will provide you with tips to help you in your blockchain coding journey.
Comments