Web3 开发系列教程—创建你的第一个智能合约将你的智能合约与前端集成

Posted 2022-06-06 前端修罗场

这是本教程系列的最后一部分。这部分，你会将你的的 Hello World 智能合约连接到前端项目并与之交互来创建一个全栈去中心化的应用程序。你会学到以下知识：

• 将 Metamask 钱 包连接到你的前端项目
• 使用 Alchemy Web3 API 从你的智能合约中读取数据
• 使用 Metamask 签署以太坊交易

对于这个应用，我们将使用 React 作为我们的前端框架。但是，重要的是要注意，我们不会花太多时间讲解它的基础，因为我们将主要专注于将 Web3 功能引入我们的项目。当然，作为先决条件，你应该对 React 有初步的了解——知道组件、props、useState/useEffect 和基本的函数调用是如何工作的。 如果你以前从未听说过这些术语，我们建议你查看这个 React 简介教程。

第 1 步：克隆启动文件

首先，先下载此项目的启动文件。 将此仓库克隆到你的本地环境中。

当你打开下载好的 hello-world-part-four 项目时，你会注意到它包含两个文件夹：starter-files 和 completed。

• starter files：包含这个项目的 starter 文件（本质上是 React UI）。 在本教程中，**我们将在此目录中工作，**因为你将学习如何通过将其连接到你的以太坊钱包和你在第 3 部分中在 Etherscan 上发布的 Hello World 智能合约来使此 UI 栩栩如生。
• completed：包含整个已完成的教程

开发者涨薪指南 48位大咖的思考法则、工作方式、逻辑体系