关于Web3全栈，你想知道的都在这里了
我们学习了web3/区块链/智能合约应用程序如何在前端使用HTML和Javascript工作。然后我们通过6种不同的方式，将Metamask、Phantom或其他区块链钱包地址连接到前端。我们将看看流行的Nextjs / React软件包，使你的开发生命周期轻松100倍。
翻译：团长（https://twitter.com/quentangle_）
原文：Patrick Collins FullStack Web3 — Everything You Need to Know
在这篇文章中，我们将了解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，看看我们得到什么。
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！
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配置
最简单的方法是使用一些你已经熟悉的工具，如Ethers。可以把在HTML设置中的内容复制粘贴到index.js文件中。
为此，我们添加了一些额外的功能，以便在连接或用户没有Metamask时显示 “请安装Metamask”或 “已连接”。你还会看到useState和useEffect这样的命令。这些被称为React Hooks，你可以从这个Fireship视频或react docs中了解它们的全部内容。尽管没有它们，这个应用程序也能正常工作，但我们无法在重新渲染时保存应用程序的状态。
优点：
- 使用Ethers对用户界面进行最精细的控制
缺点：
- 必须写很多自己的代码，包括Contexts。
- 很难支持非Metamask连接（是的，还有其他方式连接到钱包！）
真实例子
另外，在以后的例子中，我打算从另一个文件中导入abi，这样就不会刷屏文章了。
Web3Modal 配置
将基于EVM的区块链应用程序连接到钱包的其他最流行的方式之一是Walletconnect。我将要展示的所有例子（包括原始Ethers的例子）都可以连接到Walletconnect（而且应该的！），所以Web3Modal设置并不是唯一可以做到这一点的。钱包wallet connect团队的成员创建的一个奇妙的工具是这个Web3Modal工具，它允许用一个框架来连接到任何提供方，包括Ledger、WalletConnect、Torus、Coinbase Wallet，以及更多的提供方！我们只需要导入软件包。
导入这个包，index.js可能看起来像这样：
我们设置了一些providerOptions来告诉前端我们要支持哪些钱包哪些链。我们需要设置一个NEXT_PUBLIC_RPC_URL，它指向另一个RPC_URL来连接到区块链。如果使用walletconnect，就不能使用户的metamask的内置区块链节点。
优点
- 易于整合多个钱包
- Ethers很棒
缺点
- 仍然没有内置的contexts
真实案例
如果你想看看Web3Modal、区块链等一些前沿的前端应用，请100%确保查看Scaffold-ETH。这是Austin Griffith的一个了不起的学习工具，你可以用它来解构一些最佳实践。
Moralis
现在Moralis（或者更确切地说，react-moralis）是第一个包含上下文管理器的软件包，非常有帮助。这可以让整个应用程序在组件之间轻松共享状态，这是必要的，因为我们需要传递Metamask授权。
Moralis是由Ivan on Tech及其团队创建的，不仅可以帮助开发者连接到Metamask，还可以帮助全栈应用可能需要的任何其他后端系统。Etherscan和Opensea都是web3应用程序的例子，它们仍然需要后台和数据库。为什么呢？因为很多时候，你想增加大量的功能，而这些功能在链上做的话成本太高了！因此，需要有足够的后端和数据库。
因此，你仍然想让你的智能合约做所有的主要工作，但Moralis可以做所有围绕它的工作。下面是我们的Moralis的代码可能是这样的。
可以看到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
Web3-React
Uniswap工程负责人Noah Zinsmeister和朋友们建立了一个amazing的软件包，叫做web3-react。这是Uniswap、Aave和Compound等顶级项目最广泛使用的软件包之一。它还包含了一个上下文管理器和一些令人难以置信的强大的hooks，让你可以直接上手并开始工作，还有一些web3钱包的内置连接。
下面是index.js可能的样子：
app.js
正如你所看到的，我们仍然使用ethers与智能合约互动，但我们使用hooks来启用Metamask和任何其他我们想要的钱包！
优点
- Context provider
- 与智能合约互动的极简的内置功能
- 内置的钱包连接
缺点
- 不像web3modal那样容易设置钱包
- 需要编写或使用你自己的hooks来与智能合约互动
真实例子
useDapp
Ethworks是一些流行的工具背后的团队，比如waffle，它是最流行的测试框架之一，甚至被hardhat使用。他们又做了一个厉害的工具，一个类似于moralis的框架，有所有的hooks和工具来构建一个前端，还包括一个上下文提供者。
下面是我们的index.js可能的样子：
app.js
我们向应用程序传递一个配置，可以包括支持的区块链和其他连接功能。与Moralis类似，useDapp带有激活浏览器钱包的功能，以激活metamask/浏览器钱包，以及像useContractFunction这样的hooks来与智能合约互动（不使用ethers！）。
优点
- 上下文提供者
- 与智能合约互动的极简的内置功能
缺点
- 不像web3modal那样容易设置钱包
- 没有内置数据库的选项
真实例子
总结
我知道这是个长篇大论，但这就是我的工作，我一定要把所有的东西都看一遍，确保我知道发生了什么，给你提供最好的指导。
Happy coding!