全棧開發以太坊應用的完整教程指南與原始碼 - Dabit

banq發表於2021-05-28
全棧原始碼

在本文中，您將學習如何使用React，Ethers.js，Solidity和Hardhat構建全棧dApp。
您可以在此處找到該專案的程式碼。本教程的影片課程在這裡。
我最近以開發人員關係工程師的身份加入Edge＆Node，並已與Ethereum一起深入研究智慧合約開發。我已經確定了使用Solidity構建完整堆疊dApp的最佳堆疊：

但是我在解決所有問題時遇到了一個問題。儘管每個工具都有各自不錯的文件，但是並沒有什麼可以幫助您將它們全部組合在一起並瞭解它們如何相互配合的。
裡有一些非常好的樣板，例如scaffold-eth（還包括Ethers，Hardhat和The Graph），但是對於剛入門的人來說，它們可能太多了。
我想要一個端到端的指南，向我展示如何使用最新的資源，庫和工具來構建全棧的以太坊應用程式。
這是我感興趣的：
  1. 如何建立，部署和測試以太坊智慧合約到本地，測試和主網
  2. 如何在本地，測試和生產環境/網路之間切換
  3. 如何使用前端，React，Vue，Svelte或Angular等各種環境連線到合同並與之互動

在花了一些時間弄清楚所有這些內容之後，我終於選擇了自己感到非常滿意的堆疊。然後，我認為寫出如何使用此堆疊構建和測試完整堆疊的以太坊應用程式會很好。
我希望本指南不僅對其他可能對此堆疊感興趣的人有用，也對我自己有幫助，以供將來參考。這就是參考。
 

我們將使用的技術
讓我們看一下將要使用的主要部分以及它們如何裝入堆疊。

  • 1.以太坊開發環境

構建智慧合約時，您將需要一種無需處理實時環境即可部署合約，執行測試和除錯Solidity程式碼的方法。
您還需要一種將Solidity程式碼編譯為可以在客戶端應用程式（在我們的情況下為React應用程式）中執行的程式碼的方法。稍後，我們將詳細瞭解其工作原理。
Hardhat是一個用於全棧開發的以太坊開發環境和框架，這是我將在本教程中使用的框架。
生態系統中的其他類似工具是Ganache和Truffle。
  • 2.以太坊Web客戶端庫

在我們的React應用程式中，我們將需要一種與已部署的智慧合約進行互動的方式。我們將需要一種讀取資料以及傳送新交易的方法。

ethers.js旨在成為一個完整，緊湊的庫，用於透過客戶端JavaScript應用程式（例如React，Vue，Angular或Svelte）與以太坊區塊鏈及其生態系統進行互動。這是我們將要使用的庫。
生態系統中另一個受歡迎的選擇是web3.js

  • 3. Metamask

Metamask可幫助您處理帳戶管理並將當前使用者連線到區塊鏈。MetaMask使使用者能夠以幾種不同的方式管理其帳戶和金鑰，同時將其與站點上下文隔離。
一旦使用者連線了他們的MetaMask錢包，作為開發人員，您就可以與全球可用的以太坊API（window.ethereum）進行互動，該API識別與Web3相容的瀏覽器的使用者（例如MetaMask使用者）。每當您請求交易簽名時，MetaMask都會以一種易於理解的方式提示使用者。

  • 4.React

React是用於構建Web應用程式，使用者介面和UI元件的前端JavaScript庫。它由Facebook以及許多個人開發商和公司維護。
React及其大型的元框架生態系統（如Next.js，Gatsby，Redwood，Blitz.js）和其他實現了所有型別的部署目標，包括傳統SPA，靜態站點生成器，伺服器端渲染以及這三者的組合。
React似乎繼續在前端領域佔據主導地位，而且我認為在不久的將來甚至可能以後，它將繼續保持領先地位。
  • 5.Graph

對於以太坊等區塊鏈上構建的大多數應用程式而言，直接從鏈中讀取資料既費時又費力。因此，在過去，您會看到人們和公司在構建自己的集中式索引伺服器並服務於來自這些伺服器的API請求。這需要大量的工程和硬體資源，並且破壞了分散化所需的安全性。
Graph是用於查詢區塊鏈資料的索引協議，可讓您建立完全去中心化的應用程式。它透過公開應用可以使用的豐富的GraphQL查詢層來解決此問題。
在本指南中，我們不會為我們的應用構建子圖，但將在以後的教程中進行構建。
 

我們將要建設的
在本教程中，我們將構建，部署並連線到幾個基本的智慧合約：

  1. 在以太坊區塊鏈上建立和更新訊息的合同
  2. 鑄造令牌的合同，該合同允許合同所有者將令牌傳送給其他人並讀取令牌餘額，並讓新令牌的所有者也將令牌傳送給其他人。

我們還將構建一個React前端，該前端將允許使用者：
  1. 閱讀部署到區塊鏈的合同中的問候
  2. 更新問候語
  3. 將新鑄造的令牌從其地址傳送到另一個地址
  4. 有人收到令牌後，請允許他們也將令牌傳送給其他人
  5. 從部署到區塊鏈的合同中讀取代幣餘額

 

先決條件

  1. 安裝在本地計算機上的Node.js
  2. 瀏覽器中已安裝MetaMask Chrome擴充套件程式

您無需擁有任何本指南的以太坊，因為我們將在整個教程的測試網路上使用假冒/測試以太坊。
更詳細步驟點選標題


 

相關文章