关于Web3全栈，你想知道的都在这里了 - quentangle

我们学习了web3/区块链/智能合约应用程序如何在前端使用HTML和Javascript工作。然后我们通过6种不同的方式，将Metamask、Phantom或其他区块链钱包地址连接到前端。我们将看看流行的Nextjs / React软件包，使你的开发生命周期轻松100倍。

翻译：团长（https://twitter.com/quentangle_）

原文：Patrick Collins FullStack Web3 — Everything You Need to Know

将前端与智能合约/web3应用程序/区块链连接起来。

在这篇文章中，我们将了解web3/区块链/智能合约应用程序如何在前端使用HTML和JavaScript工作。

接下来会介绍通过六种不同的方式将Metamask、Phantom或其他区块链钱包地址连接到前端。

最后，我们将了解流行的Nextjs / React软件包，使你的开发生命周期轻松100倍。

那么，让我们开始吧。

介绍

为了使web3能够为大众所接受，需要有用户友好的前端网站。在区块链领域解决这个问题时，全栈软件工程师会遇到一些挑战。

如何将Metamask连接到UI用户界面？(或Walletconnect、Phantom等)
如何从网站上用智能合约执行交易？
高端玩家在用什么工具？

所以，在问自己这个问题并试图弄清楚向开发者推荐什么时，我看了几乎所有最流行的解决方案。因此，在这篇文章中，我们将：

了解当与区块链互动或向区块链发送交易时，浏览器中发生了什么。
了解六种最流行的方法，连接到web3应用程序。
通过代码示例展示该领域所有高级玩家所使用的东西，这样你就可以使用同样的工具了！

如果你想看看现在一些专业的前端是什么样子的，你可以看一下Aave或Uniswap网站。

兴奋吗？我也是。Let’s go.

如何将智能合约连接到Metamask

或浏览器中的另一个钱包，如Phantom、Walletconnect等。

web3/区块链应用程序的大多数 “后端”使用Hardhat、Brownie、DappTools、Anchor或Foundry（或者如果你相信纸牌之心是Remix工具）等框架构建。前端要使用传统web2领域学到的东西。HTML、JavaScript、CSS，以及NextJS、React和Angular等框架。

因此，如果你熟悉传统的Web开发，你将会在游戏中处于领先地位!

使用Metamask在浏览器中进行的工作

现在请安装Metamask。可以通过这个视频，进行更深入的了解。

在浏览器中，右键点击屏幕，点击 “检查 “或 “检查元素”，你会看到这样的东西：

点击 “检查“可以看到所有的浏览器调试工具。

这将显示该网站用来呈现屏幕上看到的所有代码。然后，点击顶部栏的sources会看到像这样的东西。(如果看不到sources，可以点击>>按钮来显示更多的选项）。

如果浏览器中安装了Metamask，会在左边看到一个 “Metamask”文件。如果安装了Phantom，你会看到 “Phantom”文件。

这些浏览器附加组件/插件做了一些有趣的事情，它们自动 “注入”浏览器，并作为所在网站的一部分显示出来。这可以让网站与它们互动。

每个浏览器中都有一个对象，叫做window对象。可以通过点击控制台选项卡看到这个对象，（类似于点击source的方式）会进入JavaScript控制台，在那里我们可以编写JavaScript并与JavaScript对象互动。

继续输入window，看看我们得到什么。

在 `控制台`选项卡中输入`window `并点击回车。

Awesome! 浏览器中看到了JavaScript window对象。现在，因为我们有一个Metamask源，这应该意味着有一个ethereum属性附加到window对象。输入window.ethereum，看看得到什么（如果是Phantom则是window.solana）。

你会看到一个对象的响应！如果没有Metamask，会得到一个undefined。每个浏览器的钱包都会给window对象添加自己的属性，通常可以在他们的文档中找到它。这里是Metamask的文档，确切地说是关于window.ethereum的。

注意：在以前的版本中是window.web3，后来改为window.ethereum。

这就是所谓的区块链提供方（blockchain provider）或区块链连接 window.ethereum将是我们的提供方。那么我们为什么需要这个呢？

区块链连接/提供方

每当从区块链上读取数据，调用函数，或进行交易时，我们需要连接到区块链网络。如果发送一个交易，需要将签名的交易发送到一个区块链节点，这样它就可以将其发送到网络中的所有其他区块链节点。你可以在这个FreeCodeCamp视频的第0课中了解更多关于区块链101的知识。

你可能以前在区块链应用程序中使用过Alchemy、Infura或Moralis Speedy Nodes的RPC URL。这些都是 “节点即服务node-as-a-service”提供商，他们提供HTTP端点来向区块链节点发送请求。加密货币钱包也是如此，Metamasks内置有与区块链节点的连接。事实上在Metamask “网络”选项卡可以看到你的Metamask正在使用的确切的RPC URL！

Metamask中的网络 — 查看区块链RPC URL

Boom！因此每当用Metamask时，就对这个RPC URL进行API调用。

用HTML和JavaScript连接到加密货币钱包

现在，我们将首先展示这一切是如何在HTML和JavaScript中完成的，然后将转到Nextjs/React例子。在我的Github这里有一个使用HTML/JavaScript连接到加密货币钱包的完整例子，在我的GitHub中也有一个所有例子的列表。

首先，创建一个标准的HTML文档，有一个Connect按钮。

<!DOCTYPE html>
<html>
  <head>
    <title>Javascript Test</title>
  </head><body>
    <button id="connectButton">Connect</button>
  </body>
</html>

通过添加一个script标签和创建一个JavaScript函数来为按钮添加一些功能，寻找window.ethereum，如果找到它，它就会发出连接请求。

这就是你所需要的全部！eth_requestAccounts直接来自Metamask的文档。如果把这个命名为index.html并在浏览器中运行，metamask就会弹出要求连接。

发送交易

现在我们已经连接了Metamask，是时候发送一个交易了。这时可以使用ethersjs和web3js等包来连接我们的提供方，然后发送一个交易。通常情况下，在JavaScript中执行一个函数/发送一个交易的示例看起来像这样：

const etheres = require("ethers")contractAddress = "0x5FbDB2315678afecb367f032d93F642f64180aa3";
const abi = // some big javascript ABI here...const provider = new ethers.providers.JsonRpcProvider(/* alchemy or infura */)
const wallet = new ethers.Wallet(/* Private key */, provider)const contract = new ethers.Contract(contractAddress, abi, wallet)
const contractWithSigner = contract.connect(wallet)
const transactionResponse = contract.someFunction()

在浏览器中发送交易的唯一区别是，将提供方provider改为window.ethereum，wallet现在将直接来自提供方。由于metamask既是provider也是钱包（或签名者signer），代码将看起来像这样：

const etheres = require("ethers")contractAddress = "0x5FbDB2315678afecb367f032d93F642f64180aa3";
const abi = // some big javascript ABI here...const provider = new ethers.providers.Web3Provider(window.ethereum)
const signer = provider.getSigner();const contract = new ethers.Contract(contractAddress, abi, signer)
const contractWithSigner = contract.connect(wallet)
const transactionResponse = contract.someFunction()

你会注意到，只有中间的两行发生了变化，从window.ethereum获取钱包，而签名者来自provider（又名metamask）。

这里有一个问题。浏览器不能理解require（有时import也有问题），所以我们可以添加一些包来帮助我们。

因为我不希望这变成一个以前端为重点的博客，所以我不会只把你指向html-js-ethers-connect例子，这个例子向我们展示了如何自己运行其余部分。你只需要安装以下东西就可以了：

然后可以按照README.md中的说明进行设置，并使用纯HTML和JavaScript在浏览器中发送交易，做一个完整的例子。

Boom！我们有了一个带有智能合约功能的最简前端了！

5个最佳前端Web3启动工具

排名不分先后。这是它自己的博客里说的（类似中国top3的大学有5个）…

现在，让我们开始给你提供全栈应用所需的工具。对于每一个启动工具，我都会包括：

如何启动它们
极简的演示
真实的例子

所以你可以选择最适合你的那一个！我们使用NextJS，因为ReactJS是目前地球上最流行的前端框架，而NextJS是建立在它之上的，在我看来，它比原始ReactJS更方便用户使用。然而，你可以100%地用Angular、Svelte或其他方式工作。

你可以找到我所有的简约代码例子full-stack-web3-metamask-connectors 仓库，其中包括了所有的演示。

设置一个基本的NextJS项目

所有这些项目都将从一个基本的NextJS项目开始。你需要安装Node、Git和Yarn才能继续前进。此外，你还可以跟着nextjs的入门文档走。

运行以下程序：

yarn create next-app full-stack-web3
cd full-stack-web3

完成！现在有了一个基本的启动项目。可以运行yarn dev，看看现在的网站会是什么样子。最后，删除所有开始时的 “东西”，进入index.js文件，删除所有东西，这样就可以了。

export default function Home() {
  return <div>Hi</div>;
}

现在前端只有一个 “Hi”。

设置一个本地hardhat区块链和合约

现在，由于要测试执行函数，需要一个区块链来发送交易，以及一个智能合约来工作。我已经为你设置了一个，在hardhat-simple-storage GitHub。要设置这个，可以按照README.md来操作，或者在一个与运行前端不同的终端中运行以下内容。

git clone https://github.com/PatrickAlphaC/hardhat-simple-storage
cd hardhat-simple-storage
yarn
yarn hardhat node

它将启动一个本地区块链，给你一些临时的假私钥，并部署SimpleStorage合约，它有一个我们要使用的store函数。接受一个uint256 _favoriteNumber作为输入，并将该数字存储到一个公共变量中。可以在SimpleStorage.sol文件中查看该合约。

用本地区块链设置metamask

现在要把Metamask连接到我们的本地假区块链。为什么？这样我们就可以快速发送交易和测试。这类似于一个真正的区块链，但这个区块链是我们控制的。如果你愿意，你可以使用测试网，但代价是你将不得不等待很长时间来处理交易，这是没有人愿意等。

在区块链节点运行的地方，你会看到一个类似的输出：Started HTTP and WebSocket JSON-RPC server at http://127.0.0.1:8545/ 。这是RPC URL，类似于Alchemy。

现在，在一个没有任何真实资金关联的Metamask中（请永远不要使用有真实资金的Metamask进行开发。创建一个新的浏览器配置文件或下载另一个带有Metamask的浏览器）点击顶部的网络按钮，然后 “添加网络”。

像你看到的那样进行设置，然后点击保存。然后确保切换到该网络（在网络下拉菜单中选择它）。

现在点击右上方的大圆圈，然后点击 “导入账户”。

从yarn hardhat node命令的输出中添加一个私钥。现在本地网络上应该有一个账户，并且有一些假的测试ETH。你的Metamask应该看起来像这样：

现在我们已经准备好了：）

重要提示：如果你曾经遇到过你的nonce被关闭的问题，或者交易不能正常发送。当从hardhat导入metamask中的账户被选中时，去右上方的圆圈->设置->高级->重置账户。这将消除nonce的问题。

原生Ethers配置

🧑‍💻 Link to my full code here

最简单的方法是使用一些你已经熟悉的工具，如Ethers。可以把在HTML设置中的内容复制粘贴到index.js文件中。

https://gist.github.com/BetterProgramming/273c851ec34a50ec6a195e65452ac029#file-index3-js

为此，我们添加了一些额外的功能，以便在连接或用户没有Metamask时显示 “请安装Metamask”或 “已连接”。你还会看到useState和useEffect这样的命令。这些被称为React Hooks，你可以从这个Fireship视频或react docs中了解它们的全部内容。尽管没有它们，这个应用程序也能正常工作，但我们无法在重新渲染时保存应用程序的状态。

优点：

使用Ethers对用户界面进行最精细的控制

缺点：

必须写很多自己的代码，包括Contexts。
很难支持非Metamask连接（是的，还有其他方式连接到钱包！）

真实例子

Nader Dabit Explainer

另外，在以后的例子中，我打算从另一个文件中导入abi，这样就不会刷屏文章了。

Web3Modal 配置

🧑‍💻 Link to my full code here

将基于EVM的区块链应用程序连接到钱包的其他最流行的方式之一是Walletconnect。我将要展示的所有例子（包括原始Ethers的例子）都可以连接到Walletconnect（而且应该的！），所以Web3Modal设置并不是唯一可以做到这一点的。钱包wallet connect团队的成员创建的一个奇妙的工具是这个Web3Modal工具，它允许用一个框架来连接到任何提供方，包括Ledger、WalletConnect、Torus、Coinbase Wallet，以及更多的提供方！我们只需要导入软件包。

导入这个包，index.js可能看起来像这样：

https://gist.github.com/BetterProgramming/c470735cda01332967a65e1dc6d78eb2#file-index4-js

我们设置了一些providerOptions来告诉前端我们要支持哪些钱包哪些链。我们需要设置一个NEXT_PUBLIC_RPC_URL，它指向另一个RPC_URL来连接到区块链。如果使用walletconnect，就不能使用户的metamask的内置区块链节点。

优点

易于整合多个钱包
Ethers很棒

缺点

仍然没有内置的contexts

真实案例

如果你想看看Web3Modal、区块链等一些前沿的前端应用，请100%确保查看Scaffold-ETH。这是Austin Griffith的一个了不起的学习工具，你可以用它来解构一些最佳实践。

Moralis

🧑‍💻 Link to my full code here

现在Moralis（或者更确切地说，react-moralis）是第一个包含上下文管理器的软件包，非常有帮助。这可以让整个应用程序在组件之间轻松共享状态，这是必要的，因为我们需要传递Metamask授权。

Moralis是由Ivan on Tech及其团队创建的，不仅可以帮助开发者连接到Metamask，还可以帮助全栈应用可能需要的任何其他后端系统。Etherscan和Opensea都是web3应用程序的例子，它们仍然需要后台和数据库。为什么呢？因为很多时候，你想增加大量的功能，而这些功能在链上做的话成本太高了！因此，需要有足够的后端和数据库。

因此，你仍然想让你的智能合约做所有的主要工作，但Moralis可以做所有围绕它的工作。下面是我们的Moralis的代码可能是这样的：

https://gist.github.com/BetterProgramming/38c9ee5c05e3775c1c9b509de37a41bf#file-index5-js

可以看到Moralis带有强大的hooks，如useWeb3Contract，使获取状态和与合约互动变得更加容易，而且不需要ethers！与其让我们自己编写连接函数，Moralis还提供了一个函数来为我们做这件事，即enableWeb3。

此外，在_app.js中，我们需要用一个Context提供者来包装我们的整个应用，我们可以这样做：

import "../styles/globals.css";
import { MoralisProvider } from "react-moralis";function MyApp({ Component, pageProps }) {
  return (
    <MoralisProvider initializeOnMount={false}>
      <Component {...pageProps} />
    </MoralisProvider>
  );
}export default MyApp;

Morlais有内置的选项，可以用数据库设置你的前端，然而，如果你只想使用hooks和函数，你可以把initializeOnMount设置为false，只有在将来需要时才设置服务器！

优点

Context provider
与智能合约互动的极简的内置功能
可选后端，以获得更丰富的前台功能

缺点

必须手动添加你自己的钱包

Real-World Examples

Ethereum Boilerplate

Web3-React

🧑‍💻 Link to my full code here

Uniswap工程负责人Noah Zinsmeister和朋友们建立了一个amazing的软件包，叫做web3-react。这是Uniswap、Aave和Compound等顶级项目最广泛使用的软件包之一。它还包含了一个上下文管理器和一些令人难以置信的强大的hooks，让你可以直接上手并开始工作，还有一些web3钱包的内置连接。

下面是index.js可能的样子：

https://gist.github.com/BetterProgramming/834b7d1ad5518bf5d25ad3eee11d7f78#file-index6-js

app.js

https://gist.github.com/BetterProgramming/fdcd28af4b039429a98c81a3e00d418a#file-app6-js

正如你所看到的，我们仍然使用ethers与智能合约互动，但我们使用hooks来启用Metamask和任何其他我们想要的钱包！

优点