{"id":10025,"date":"2024-01-22T19:26:24","date_gmt":"2024-01-22T17:26:24","guid":{"rendered":"https:\/\/forklog.com\/en\/how-to-start-building-web3-applications-in-2024-according-to-getblock\/"},"modified":"2024-01-22T19:26:24","modified_gmt":"2024-01-22T17:26:24","slug":"how-to-start-building-web3-applications-in-2024-according-to-getblock","status":"publish","type":"post","link":"https:\/\/forklog.com\/en\/how-to-start-building-web3-applications-in-2024-according-to-getblock\/","title":{"rendered":"How to start building Web3 applications in 2024, according to GetBlock"},"content":{"rendered":"<p>At the end of 2023, venture firm Andreessen Horowitz published a list of \u201cbig ideas\u201d in crypto. The experts highlighted a reboot of <span data-descr=\"User Experience\" class=\"old_tooltip\">UX<\/span> in crypto-application design, as well as the rise of a modular technology stack in Web3 development.<\/p>\n<p>Together with the <span data-descr=\"Remote Procedure Call\" class=\"old_tooltip\">RPC<\/span>-node provider <a class=\"tracking_link\" href=\"https:\/\/getblock.io\/\" target=\"_blank\" rel=\"noopener\">GetBlock<\/a>, we outline what a Web3 engineer needs to know and do in 2024.<\/p>\n<h2 class=\"wp-block-heading\">The Web3 developer\u2019s technology stack<\/h2>\n<p>A technology stack is a set of technologies, tools and programming languages for building software. For instance, MEAN (MongoDB, Express.js, AngularJS\/Angular, Node.js) and MERN (MongoDB, Express.js, React, Node.js) are popular stacks for web developers.<\/p>\n<p>In Web3, four core components stand out:<\/p>\n<ul class=\"wp-block-list\">\n<li><strong>libraries.<\/strong> They are used to build applications that run on a blockchain or interface with it;<\/li>\n<li><strong>smart contracts.<\/strong> Immutable code that runs within the network;<\/li>\n<li><strong>wallets.<\/strong> An address serves as a user or smart-contract identifier and a store for cryptocurrencies and tokens;<\/li>\n<li><strong>nodes.<\/strong> They store a copy of the blockchain. Without nodes, a Web3 library cannot interact with smart contracts.<\/li>\n<\/ul>\n<p>The following tools are used to work with them:<\/p>\n<ul class=\"wp-block-list\">\n<li><a class=\"tracking_link\" href=\"https:\/\/getblock.io\/\" target=\"_blank\" rel=\"noopener\">GetBlock<\/a> \u2014 a provider that connects to nodes; Remix \u2014 an <span data-descr=\"Integrated Development Environment\" class=\"old_tooltip\">IDE<\/span> for testing, deploying and running smart contracts in the browser;<\/li>\n<li><strong>Hardhat<\/strong> \u2014 a local development environment for Ethereum. It allows you to deploy applications and smart contracts to the Mumbai and Goerli testnets and to Ethereum mainnet;<\/li>\n<li><strong>MetaMask<\/strong> \u2014 a browser-based Web3 wallet. Developers use it to test and deploy <span data-descr=\"decentralized applications\" class=\"old_tooltip\">dapps<\/span>; users \u2014 to store cryptoassets and interact with Web3;<\/li>\n<li><strong>Etherscan<\/strong> \u2014 an Ethereum explorer that shows transaction status and smart-contract details.<\/li>\n<\/ul>\n<p>To build Web3 applications you will also need JavaScript and Solidity.<\/p>\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u201cBy mastering these concepts and tools, a beginner developer will understand how, for instance, a cryptocurrency wallet is built and what it takes to create a similar product,\u201d the GetBlock team comments.<\/em><\/p>\n<\/blockquote>\n<h2 class=\"wp-block-heading\">Node providers<\/h2>\n<p>To exchange data with a blockchain, any crypto service needs a full node to query. A node provides data on transactions, blocks and balances and records subsequent changes<em>.<\/em><\/p>\n<p>For example, for Alice to send Bob 1 ETH, the wallet must check how much money both have before sending, verify that Alice authorised the transaction and that Bob\u2019s wallet is valid, and then \u201ctell\u201d the blockchain that the balances have changed.<\/p>\n<p>You can run a full node yourself: rent a virtual server or buy a physical one, install a node client and wait for it to sync with peers.<\/p>\n<p>This is a fairly laborious process that requires constant upkeep (monitoring, installation, updates). Hence Web3 developers often turn to RPC-node providers. These offer access to a node via an <span data-descr=\"Application programming interface\" class=\"old_tooltip\">API<\/span>. The node address (the URL of the <span data-descr=\"a gateway that connects a node with an application interface\" class=\"old_tooltip\">endpoint<\/span>) is placed in the application code, which then sends requests to it.<\/p>\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u201cRPC nodes are also launched by blockchain teams to grow their audiences. But their public RPC nodes are overloaded and unsuitable for commercial development. Such nodes are better used for research,\u201d GetBlock points out.<\/em><\/p>\n<\/blockquote>\n<p>Providers operate on one model: the client pays for compute (the right to send requests to the blockchain) and the company keeps the node running.<\/p>\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u201cThe first popular RPC provider was Infura, giving access to Ethereum nodes and <\/em><em>EVM<\/em><em>-compatible networks.\u00a0<\/em><\/p>\n<p>GetBlock is a next-generation platform. We support more than <a class=\"tracking_link\" href=\"https:\/\/getblock.io\/nodes\/\" target=\"_blank\" rel=\"noopener\">50 blockchains<\/a>. If a team is building a multi-currency exchange, it can connect to Bitcoin, Ethereum, Tron and other networks through one service,\u201d the project team comments.<\/p>\n<\/blockquote>\n<p>An RPC node simplifies, accelerates and cuts the cost of developing and launching applications, and saves resources on their maintenance.<\/p>\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u201cGetBlock provides access to shared and dedicated nodes. The latter means a node deployed strictly for a client\u2019s tasks, with maximum speed and uptime. It targets projects with solid traffic or scaling plans. For fast RPC-node responses we use servers in Europe, Asia and the US.\u00a0\u00a0<\/em><\/p>\n<p><em>Shared nodes are a solution for regular users. They share infrastructure with others yet still get high-speed access. You can choose plans with request limits (from 5 million blockchain requests) or unlimited plans for a month, half-year or a year,\u201d GetBlock claims.<\/em><\/p>\n<\/blockquote>\n<p>For beginner Web3 developers, GetBlock offers free access capped at 40,000 requests per day. Paid plans start at $29.<\/p>\n<h2 class=\"wp-block-heading\">Web3 libraries<\/h2>\n<p>Libraries are collections of ready-made functions that speed up development of decentralized applications. Their main job is to enable interaction with smart contracts deployed on Ethereum or other networks. Most developers choose Web3.js and Ethers.js for this.<\/p>\n<p>Web3.js is a popular library for working with Ethereum, created in 2015. Many projects use it to connect smart contracts to external JavaScript code, execute transactions and fetch blockchain data.<\/p>\n<p>The library consists of several modules:<\/p>\n<ul class=\"wp-block-list\">\n<li><strong>eth<\/strong> \u2014 helps connect to Ethereum testnets and mainnet, manage transactions, construct Solidity contracts and interact with them;<\/li>\n<li><strong>shh<\/strong> \u2014 enables information exchange between dapps;<\/li>\n<li><strong>utils<\/strong> \u2014 formats and converts data;<\/li>\n<li><strong>bzz<\/strong> \u2014 allows the use of <a class=\"tracking_link\" href=\"https:\/\/www.ethswarm.org\/\" target=\"_blank\" rel=\"noopener\">Swarm<\/a> as a decentralised data-storage system.<\/li>\n<\/ul>\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u201cThe full list of Web3.js functions is huge. It is very popular thanks to compatibility with virtually all existing frameworks,\u201d the GetBlock team notes.<\/em><\/p>\n<\/blockquote>\n<p>You can install the library with a package manager such as <a class=\"tracking_link\" href=\"https:\/\/www.npmjs.com\/package\/web3\" target=\"_blank\" rel=\"noopener\">NPM<\/a> or <a class=\"tracking_link\" href=\"https:\/\/yarnpkg.com\/package?name=web3\" target=\"_blank\" rel=\"noopener\">YARN<\/a>, and then integrate it into various consoles.<\/p>\n<p><a class=\"tracking_link\" href=\"https:\/\/docs.ethers.org\/v6\/getting-started\/\" target=\"_blank\" rel=\"noopener\">Ethers.js<\/a> is an alternative to Web3.js, released in 2016 by developer Richard Moore. It offers a similar set of functions, but boasts additional features, including:<\/p>\n<ul class=\"wp-block-list\">\n<li>built-in support for the Ethereum Name Service;<\/li>\n<li>a <span data-descr=\"developed by the Massachusetts Institute of Technology; permits unrestricted licensing and encourages code sharing\" class=\"old_tooltip\">MIT<\/span> licence allows code to be reused and remixed with minimal restrictions;<\/li>\n<li>a small bundle size that avoids harming frontend performance;<\/li>\n<li>use of TypeScript to increase safety and minimise the likelihood of errors and bugs.<\/li>\n<\/ul>\n<p>The library is updated regularly and installs much like Web3.js. Unlike the latter, Ethers.js does not require loading the full bundle. That can be useful if you plan to use only specific modules.<\/p>\n<h2 class=\"wp-block-heading\">Wallets<\/h2>\n<p>Web3 wallets are needed to interact with dapps. They provide an interface for managing cryptoassets via private keys (MetaMask, Phantom) or smart contracts (Safe, Argent).<\/p>\n<p>As a rule, when interacting with blockchains, non-custodial wallets rely on RPC nodes. MetaMask by default uses the provider Infura (both products belong to ConsenSys).<\/p>\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u201cMetaMask tracks the IP addresses and wallets of users who have chosen Infura as their RPC provider. Thus it becomes much easier for ConsenSys to impose restrictions on the wallet, which does not quite align with the principle of decentralisation.<\/em><\/p>\n<p><em>You can change the RPC provider at any time, for example to GetBlock. We do not share data\/information with third parties and provide 40,000 requests to all blockchains after registration. That is quite enough for personal use,\u201d the provider\u2019s representatives note.<\/em><\/p>\n<\/blockquote>\n<p>The next section explains how to change the RPC provider in MetaMask settings.<\/p>\n<h2 class=\"wp-block-heading\">Smart contracts<\/h2>\n<p>A smart contract is a self-executing program that enables decentralised applications to perform automatic transactions and record data on a blockchain according to predefined conditions.<\/p>\n<p>To create smart contracts on Ethereum and other EVM-compatible blockchains, most developers use the <a class=\"tracking_link\" href=\"https:\/\/www.openzeppelin.com\/\" target=\"_blank\" rel=\"noopener\">OpenZeppelin<\/a> library and the <a class=\"tracking_link\" href=\"https:\/\/remix-project.org\/\" target=\"_blank\" rel=\"noopener\">Remix<\/a> IDE, and for blockchain data access \u2014 RPC-node providers such as <a class=\"tracking_link\" href=\"https:\/\/getblock.io\/\" target=\"_blank\" rel=\"noopener\">GetBlock<\/a>.<\/p>\n<p>Let us create an ERC-721 (NFT) token on Ethereum. Do the following:<\/p>\n<ul class=\"wp-block-list\">\n<li>open the <a class=\"tracking_link\" href=\"https:\/\/docs.openzeppelin.com\/contracts\/5.x\/wizard\" target=\"_blank\" rel=\"noopener\">Contracts Wizard<\/a> and choose one of the available options (ERC-721 in our case), then enter the token name and ticker;<\/li>\n<li>fill in the Base URI field with a link to IPFS (stores NFT metadata) and specify the asset\u2019s properties;<\/li>\n<li>click <strong>Open in Remix<\/strong> to move the contract into the development environment. You can add additional conditions there;<\/li>\n<li>after making changes in Remix, click <strong>Solidity Compiler<\/strong> in the side panel to compile the code.<\/li>\n<\/ul>\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-eu.googleusercontent.com\/LmHv4-ke2ehAs68gzE9zEmFGk3_APKzGvsbGIM0SfZq8avH9HjsMhccplZHSA9ShXP_TEdb0j_peJuKfNrVH-LReIkzr9XG9_sZSXAiBwFrD5JpbA4t8czzg4--nUxxDtKzaI1FnOUMVyBpeWhctHLs\" alt=\"\u0421 \u0447\u0435\u0433\u043e \u043d\u0430\u0447\u0430\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 Web3-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0432 2024 \u0433\u043e\u0434\u0443 \u2015 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 GetBlock\"\/><figcaption class=\"wp-element-caption\">ERC-721 code in Remix. Data: <a class=\"tracking_link\" href=\"https:\/\/getblock.io\/blog\/how-to-create-an-nft-a-step-by-step-guide\/\" target=\"_blank\" rel=\"noopener\">GetBlock<\/a>.<\/figcaption><\/figure>\n<p>The contract is ready to deploy. You can test it on the Sepolia or Goerli testnets. To do this:<\/p>\n<ul class=\"wp-block-list\">\n<li>set GetBlock as the RPC-node provider \u2014 <a class=\"tracking_link\" href=\"https:\/\/account.getblock.io\/sign-in\" target=\"_blank\" rel=\"noopener\">create an account<\/a> and get a free endpoint for Sepolia;<\/li>\n<li>add the network in MetaMask by pasting the RPC link.<\/li>\n<\/ul>\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-eu.googleusercontent.com\/x5rYXIErkDjtRJhb4ncxa94OB2OTx50FyDEA7SKs7jpgXR_7KJ2bP4x-Dpyypnu9KyEozayD52N3zalDxlsl8gzmRSf-8N0WDUMHwVNnifzmy-jF-WHKnE420unHE9gpNoYf51RNj1tKNIGksy43suQ\" alt=\"\u0421 \u0447\u0435\u0433\u043e \u043d\u0430\u0447\u0430\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 Web3-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0432 2024 \u0433\u043e\u0434\u0443 \u2015 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 GetBlock\"\/><figcaption class=\"wp-element-caption\">Adding an RPC link in MetaMask. Data: <a class=\"tracking_link\" href=\"https:\/\/getblock.io\/blog\/how-to-create-an-nft-a-step-by-step-guide\/\" target=\"_blank\" rel=\"noopener\">GetBlock<\/a>.<\/figcaption><\/figure>\n<p>After that, in the side panel go to <strong>Deploy &#038; Run Transactions<\/strong> and select <strong>Injected Provider \u2015 MetaMask<\/strong> in the Environment field. If the Sepolia network is active in the wallet, it will connect to Remix automatically.<\/p>\n<p>Make sure you have ETH to pay for gas. In Sepolia and other testnets it can be obtained for free using <a class=\"tracking_link\" href=\"https:\/\/sepoliafaucet.com\/\" target=\"_blank\" rel=\"noopener\">faucets<\/a>.<\/p>\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-eu.googleusercontent.com\/EpeBwBCgBedFOWkSFga-mDQMMrAgVA-BmETm5sdxEa1eJcH2UtIf4HKpQMARRmuahp-ZAPmCaAXvAIAOhzkeHerR3qg5q1Cw5ZJvy9KpNHP5EfL-_nLNTAu3J6VLtRGDXoOyj-BXNDNHYUoHLsr9W2I\" alt=\"\u0421 \u0447\u0435\u0433\u043e \u043d\u0430\u0447\u0430\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 Web3-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0432 2024 \u0433\u043e\u0434\u0443 \u2015 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 GetBlock\"\/><figcaption class=\"wp-element-caption\">Deploying a smart contract in Remix. Data: <a class=\"tracking_link\" href=\"https:\/\/getblock.io\/blog\/how-to-create-an-nft-a-step-by-step-guide\/\" target=\"_blank\" rel=\"noopener\">GetBlock<\/a>.<\/figcaption><\/figure>\n<p>Finally, click <strong>Deploy<\/strong> and confirm the transaction in the MetaMask extension that appears.<\/p>\n<p>When deployed on mainnet, the created NFT will be displayed in the account at testnets.opensea.io or on OpenSea\u2019s main site.<\/p>\n<h2 class=\"wp-block-heading\">Conclusions<\/h2>\n<p>Web3 development comprises a technology stack of several interlinked components. RPC providers such as GetBlock play a central role: they simplify application development and save maintenance resources.<\/p>\n<p>Even if you do not plan to build decentralised applications, understanding how each technology works will help you better make sense of different cryptocurrency projects.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>At the end of 2023, venture firm Andreessen Horowitz published a list of \u201cbig ideas\u201d in crypto. The experts highlighted a reboot of UX in crypto-application design, as well as the rise of a modular technology stack in Web3 development. Together with the RPC-node provider GetBlock, we outline what a Web3 engineer needs to know [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":10024,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"select":"","news_style_id":"","cryptorium_level":"","_short_excerpt_text":"","creation_source":"","_metatest_mainpost_news_update":false,"footnotes":""},"categories":[1144],"tags":[1192,1110],"class_list":["post-10025","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-longreads","tag-developers","tag-web-3-0"],"aioseo_notices":[],"amp_enabled":true,"views":"38","promo_type":"","layout_type":"","short_excerpt":"","is_update":"","_links":{"self":[{"href":"https:\/\/forklog.com\/en\/wp-json\/wp\/v2\/posts\/10025","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/forklog.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/forklog.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/forklog.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/forklog.com\/en\/wp-json\/wp\/v2\/comments?post=10025"}],"version-history":[{"count":0,"href":"https:\/\/forklog.com\/en\/wp-json\/wp\/v2\/posts\/10025\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/forklog.com\/en\/wp-json\/wp\/v2\/media\/10024"}],"wp:attachment":[{"href":"https:\/\/forklog.com\/en\/wp-json\/wp\/v2\/media?parent=10025"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/forklog.com\/en\/wp-json\/wp\/v2\/categories?post=10025"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/forklog.com\/en\/wp-json\/wp\/v2\/tags?post=10025"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}