# 关于Web3全栈，你想知道的都在这里了
By [quentangle](https://paragraph.com/@quentangle) · 2022-03-04
---
我们学习了web3/区块链/智能合约应用程序如何在前端使用HTML和Javascript工作。然后我们通过6种不同的方式，将Metamask、Phantom或其他区块链钱包地址连接到前端。我们将看看流行的Nextjs / React软件包，使你的开发生命周期轻松100倍。
----------------------------------------------------------------------------------------------------------------------------------------
翻译：团长（[https://twitter.com/quentangle\_](https://twitter.com/quentangle_)）
原文：Patrick Collins [FullStack Web3 — Everything You Need to Know](https://betterprogramming.pub/everything-you-need-to-know-about-fullstack-web3-94c0f1b18019)
将前端与智能合约/web3应用程序/区块链连接起来。
在这篇文章中，我们将了解web3/区块链/智能合约应用程序如何在前端使用HTML和JavaScript工作。
接下来会介绍通过六种不同的方式将Metamask、Phantom或其他区块链钱包地址连接到前端。
最后，我们将了解流行的Nextjs / React软件包，使你的开发生命周期轻松100倍。
那么，让我们开始吧。
介绍
--
为了使web3能够为大众所接受，需要有用户友好的前端网站。在区块链领域解决这个问题时，全栈软件工程师会遇到一些挑战。
1. 如何将[Metamask](https://metamask.io/)连接到UI用户界面？(或[Walletconnect](https://walletconnect.com/)、[Phantom](https://phantom.app/)等)
2. 如何从网站上用智能合约执行交易？
3. 高端玩家在用什么工具？
所以，在问自己这个问题并试图弄清楚向开发者推荐什么时，我看了几乎所有最流行的解决方案。因此，在这篇文章中，我们将：
1. 了解当与区块链互动或向区块链发送交易时，浏览器中发生了什么。
2. 了解六种最流行的方法，连接到web3应用程序。
3. 通过代码示例展示该领域所有高级玩家所使用的东西，这样你就可以使用同样的工具了！
如果你想看看现在一些专业的前端是什么样子的，你可以看一下[Aave](https://app.aave.com/#/dashboard)或[Uniswap](https://app.uniswap.org/#/swap?chain=mainnet)网站。
兴奋吗？我也是。Let’s go.
如何将智能合约连接到Metamask
------------------
或浏览器中的另一个钱包，如Phantom、Walletconnect等。
web3/区块链应用程序的大多数 “后端”使用[Hardhat](https://hardhat.org/)、[Brownie](https://eth-brownie.readthedocs.io/en/stable/)、[DappTools](https://medium.com/@patrick.collins_58673/how-to-use-dapptools-code-like-makerdao-fed9909d055b)、[Anchor](https://project-serum.github.io/anchor/getting-started/introduction.html)或[Foundry](https://github.com/gakonst/foundry)（或者如果你相信纸牌之心是[Remix](https://remix.ethereum.org/)工具）等框架构建。前端要使用传统web2领域学到的东西。HTML、JavaScript、CSS，以及NextJS、React和Angular等框架。
因此，如果你熟悉传统的Web开发，你将会在游戏中处于领先地位!
使用Metamask在浏览器中进行的工作
--------------------
现在请安装[Metamask](https://metamask.io/)。可以通过[这个视频](https://www.youtube.com/watch?v=Af_lQ1zUnoM)，进行更深入的了解。
在浏览器中，右键点击屏幕，点击 “检查 “或 “检查元素”，你会看到这样的东西：
点击 “检查“可以看到所有的浏览器调试工具。
这将显示该网站用来呈现屏幕上看到的所有代码。然后，点击顶部栏的`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的文档](https://docs.metamask.io/guide/mobile-best-practices.html#the-provider-window-ethereum)，确切地说是关于`window.ethereum`的。
> 注意：在以前的版本中是`window.web3`，后来改为`window.ethereum`。
这就是所谓的区块链提供方（blockchain provider）或区块链连接 `window.ethereum`将是我们的提供方。那么我们为什么需要这个呢？
区块链连接/提供方
---------
每当从区块链上读取数据，调用函数，或进行交易时，我们需要连接到区块链网络。如果发送一个交易，需要将签名的交易发送到一个区块链节点，这样它就可以将其发送到网络中的所有其他区块链节点。你可以在这个[FreeCodeCamp视频的第0课中了解更多关于区块链101的知识](https://www.youtube.com/watch?v=Qe-3FUxThso)。
你可能以前在区块链应用程序中使用过[Alchemy](https://alchemy.com/?a=673c802981)、[Infura](https://infura.io/)或[Moralis Speedy Nodes](https://moralis.io/speedy-nodes/)的[RPC URL](https://eth.wiki/json-rpc/API)。这些都是 “节点即服务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](https://github.com/PatrickAlphaC/html-js-ethers-connect)这里有一个使用HTML/JavaScript连接到加密货币钱包的完整例子，在我的[GitHub中也有一个所有例子的列表](https://github.com/PatrickAlphaC/full-stack-web3-metamask-connectors)。
首先，创建一个标准的HTML文档，有一个`Connect`按钮。
Javascript Test
通过添加一个`script`标签和创建一个JavaScript函数来为按钮添加一些功能，寻找`window.ethereum`，如果找到它，它就会发出连接请求。
这就是你所需要的全部！`eth_requestAccounts`直接来自Metamask的文档。如果把这个命名为`index.html`并在浏览器中运行，metamask就会弹出要求连接。
发送交易
----
现在我们已经连接了Metamask，是时候发送一个交易了。这时可以使用[ethersjs](https://docs.ethers.io/v5/)和[web3js](https://web3js.readthedocs.io/en/v1.7.0/)等包来连接我们的提供方，然后发送一个交易。通常情况下，在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](https://github.com/PatrickAlphaC/html-js-ethers-connect/tree/7fd43da59ff0c6ba4cf2c3dae0395bc6b8df03ad)例子，这个例子向我们展示了如何自己运行其余部分。你只需要安装以下东西就可以了：
* [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
* [NodeJS](https://nodejs.org/en/)
* [Yarn](https://classic.yarnpkg.com/lang/en/docs/install/)
* 和[Metamask](https://metamask.io/)
然后可以按照[README.md](https://github.com/PatrickAlphaC/html-js-ethers-connect)中的说明进行设置，并使用纯HTML和JavaScript在浏览器中发送交易，做一个完整的例子。
Boom！我们有了一个带有智能合约功能的最简前端了！
5个最佳前端Web3启动工具
--------------
排名不分先后。这是它自己的博客里说的（类似中国top3的大学有5个）…
现在，让我们开始给你提供全栈应用所需的工具。对于每一个启动工具，我都会包括：
* 如何启动它们
* 极简的演示
* 真实的例子
所以你可以选择最适合你的那一个！我们使用[NextJS](https://nextjs.org/)，因为[ReactJS](https://reactjs.org/)是目前地球上最流行的前端框架，而NextJS是建立在它之上的，在我看来，它比原始ReactJS更方便用户使用。然而，你可以100%地用Angular、Svelte或其他方式工作。
你可以找到我所有的简约代码例子[full-stack-web3-metamask-connectors](https://github.com/PatrickAlphaC/full-stack-web3-metamask-connectors) 仓库，其中包括了所有的演示。
设置一个基本的NextJS项目
---------------
所有这些项目都将从一个基本的NextJS项目开始。你需要安装Node、Git和Yarn才能继续前进。此外，你还可以跟着[nextjs的入门文档](https://nextjs.org/docs/getting-started)走。
运行以下程序：
yarn create next-app full-stack-web3
cd full-stack-web3
完成！现在有了一个基本的启动项目。可以运行`yarn dev`，看看现在的网站会是什么样子。最后，删除所有开始时的 “东西”，进入index.js文件，删除所有东西，这样就可以了。
export default function Home() {
return Hi
;
}
现在前端只有一个 “Hi”。
设置一个本地hardhat区块链和合约
-------------------
现在，由于要测试执行函数，需要一个区块链来发送交易，以及一个智能合约来工作。我已经为你设置了一个，在[hardhat-simple-storage GitHub](https://github.com/PatrickAlphaC/hardhat-simple-storage)。要设置这个，可以按照`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](https://github.com/PatrickAlphaC/nextjs-ethers-metamask-connect)
最简单的方法是使用一些你已经熟悉的工具，如Ethers。可以把在HTML设置中的内容复制粘贴到`index.js`文件中。
[https://gist.github.com/BetterProgramming/273c851ec34a50ec6a195e65452ac029#file-index3-js](https://gist.github.com/BetterProgramming/273c851ec34a50ec6a195e65452ac029#file-index3-js)
为此，我们添加了一些额外的功能，以便在连接或用户没有Metamask时显示 “请安装Metamask”或 “已连接”。你还会看到`useState`和`useEffect`这样的命令。这些被称为React Hooks，你可以从这个[Fireship视频](https://www.youtube.com/watch?v=TNhaISOUy6Q)或[react docs](https://reactjs.org/docs/hooks-overview.html)中了解它们的全部内容。尽管没有它们，这个应用程序也能正常工作，但我们无法在重新渲染时保存应用程序的状态。
优点：
* 使用Ethers对用户界面进行最精细的控制
缺点：
* 必须写很多自己的代码，包括[Contexts](https://reactjs.org/docs/context.html)。
* 很难支持非Metamask连接（是的，还有其他方式连接到钱包！）
真实例子
----
[Nader Dabit Explainer](https://dev.to/dabit3/the-complete-guide-to-full-stack-ethereum-development-3j13)
另外，在以后的例子中，我打算从另一个文件中导入`abi`，这样就不会刷屏文章了。
Web3Modal 配置
------------
[🧑💻 Link to my full code here](https://github.com/PatrickAlphaC/nextjs-ethers-metamask-connect)
将基于EVM的区块链应用程序连接到钱包的其他最流行的方式之一是[Walletconnect](https://walletconnect.com/)。我将要展示的所有例子（包括原始Ethers的例子）都可以连接到Walletconnect（而且应该的！），所以Web3Modal设置并不是唯一可以做到这一点的。钱包wallet connect团队的成员创建的一个奇妙的工具是这个[Web3Modal](https://github.com/Web3Modal/web3modal)工具，它允许用一个框架来连接到任何提供方，包括[Ledger](https://www.ledger.com/)、WalletConnect、[Torus](https://app.tor.us/)、[Coinbase Wallet](https://www.coinbase.com/wallet)，以及更多的提供方！我们只需要导入软件包。
导入这个包，`index.js`可能看起来像这样：
[https://gist.github.com/BetterProgramming/c470735cda01332967a65e1dc6d78eb2#file-index4-js](https://gist.github.com/BetterProgramming/c470735cda01332967a65e1dc6d78eb2#file-index4-js)
我们设置了一些`providerOptions`来告诉前端我们要支持哪些钱包哪些链。我们需要设置一个`NEXT_PUBLIC_RPC_URL`，它指向另一个RPC\_URL来连接到区块链。如果使用walletconnect，就不能使用户的metamask的内置区块链节点。
**优点**
* 易于整合多个钱包
* Ethers很棒
**缺点**
* 仍然没有内置的contexts
真实案例
* [Web3Modal-Example](https://github.com/ChangoMan/web3modal-example)
* [Scaffold-ETH](https://github.com/scaffold-eth/scaffold-eth)
* [create-eth-app](https://github.com/paulrberg/create-eth-app)
如果你想看看Web3Modal、区块链等一些前沿的前端应用，请100%确保查看Scaffold-ETH。这是[Austin Griffith](https://austingriffith.com/)的一个了不起的学习工具，你可以用它来解构一些最佳实践。
Moralis
-------
[🧑💻 Link to my full code here](https://github.com/PatrickAlphaC/nextjs-moralis-metamask-connect)
现在Moralis（或者更确切地说，[react-moralis](https://github.com/MoralisWeb3/react-moralis)）是第一个包含上下文管理器的软件包，非常有帮助。这可以让整个应用程序在组件之间轻松共享状态，这是必要的，因为我们需要传递Metamask授权。
Moralis是由[Ivan on Tech](https://www.youtube.com/channel/UCrYmtJBtLdtm2ov84ulV-yg)及其团队创建的，不仅可以帮助开发者连接到Metamask，还可以帮助全栈应用可能需要的任何其他后端系统。[Etherscan](https://etherscan.io/)和[Opensea](https://opensea.io/)都是web3应用程序的例子，它们仍然需要后台和数据库。为什么呢？因为很多时候，你想增加大量的功能，而这些功能在链上做的话成本太高了！因此，需要有足够的后端和数据库。
因此，你仍然想让你的智能合约做所有的主要工作，但Moralis可以做所有围绕它的工作。下面是我们的Moralis的代码可能是这样的：
[https://gist.github.com/BetterProgramming/38c9ee5c05e3775c1c9b509de37a41bf#file-index5-js](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 (
);
}export default MyApp;
Morlais有内置的选项，可以用数据库设置你的前端，然而，如果你只想使用hooks和函数，你可以把`initializeOnMount`设置为false，只有在将来需要时才设置服务器！
**优点**
* Context provider
* 与智能合约互动的极简的内置功能
* 可选后端，以获得更丰富的前台功能
**缺点**
* 必须手动添加你自己的钱包
Real-World Examples
-------------------
* [Ethereum Boilerplate](https://github.com/ethereum-boilerplate/ethereum-boilerplate)
Web3-React
----------
[🧑💻 Link to my full code here](https://github.com/PatrickAlphaC/nextjs-web3-react-metamask-connect/tree/e9fd7e1c1f78441bc25347c37f581170aab14c40)
Uniswap工程负责人Noah Zinsmeister和朋友们建立了一个amazing的软件包，叫做[web3-react](https://github.com/NoahZinsmeister/web3-react)。这是[Uniswap](https://uniswap.org/)、[Aave](https://aave.com/)和[Compound](https://compound.finance/)等顶级项目最广泛使用的软件包之一。它还包含了一个上下文管理器和一些令人难以置信的强大的hooks，让你可以直接上手并开始工作，还有一些web3钱包的内置连接。
下面是`index.js`可能的样子：
[https://gist.github.com/BetterProgramming/834b7d1ad5518bf5d25ad3eee11d7f78#file-index6-js](https://gist.github.com/BetterProgramming/834b7d1ad5518bf5d25ad3eee11d7f78#file-index6-js)
`app.js`
[https://gist.github.com/BetterProgramming/fdcd28af4b039429a98c81a3e00d418a#file-app6-js](https://gist.github.com/BetterProgramming/fdcd28af4b039429a98c81a3e00d418a#file-app6-js)
正如你所看到的，我们仍然使用ethers与智能合约互动，但我们使用hooks来启用Metamask和任何其他我们想要的钱包！
**优点**
* Context provider
* 与智能合约互动的极简的内置功能
* 内置的钱包连接
**缺点**
* 不像web3modal那样容易设置钱包
* 需要编写或使用你自己的hooks来与智能合约互动
真实例子
----
* [Web3 React Example](https://github.com/NoahZinsmeister/web3-react/tree/main/packages/example)
* [Aave](https://github.com/aave/aave-ui)
* [Uniswap](https://github.com/Uniswap/interface)
useDapp
-------
[🧑💻 Link to my full code here](https://github.com/PatrickAlphaC/nextjs-usedapp-metamask-connect)
Ethworks是一些流行的工具背后的团队，比如[waffle](https://github.com/EthWorks/Waffle)，它是最流行的测试框架之一，甚至被[hardhat](https://hardhat.org/)使用。他们又做了一个厉害的工具，一个类似于moralis的框架，有所有的hooks和工具来构建一个前端，还包括一个上下文提供者。
下面是我们的`index.js`可能的样子：
[https://gist.github.com/BetterProgramming/a5788f8b0b416236ba20a13145222b79#file-index7-js](https://gist.github.com/BetterProgramming/a5788f8b0b416236ba20a13145222b79#file-index7-js)
app.js
[https://gist.github.com/BetterProgramming/9f8ccf2f6ddc96b89f3394d86d9036b8#file-app7-js](https://gist.github.com/BetterProgramming/9f8ccf2f6ddc96b89f3394d86d9036b8#file-app7-js)
我们向应用程序传递一个配置，可以包括支持的区块链和其他连接功能。与Moralis类似，`useDapp`带有激活浏览器钱包的功能，以激活metamask/浏览器钱包，以及像`useContractFunction`这样的hooks来与智能合约互动（不使用ethers！）。
优点
* 上下文提供者
* 与智能合约互动的极简的内置功能
缺点
* 不像web3modal那样容易设置钱包
* 没有内置数据库的选项
真实例子
* [defi-stake-yield-brownie](https://github.com/PatrickAlphaC/defi-stake-yield-brownie)
总结
--
我知道这是个长篇大论，但这就是我的工作，我一定要把所有的东西都看一遍，确保我知道发生了什么，给你提供最好的指导。
Happy coding!
---
*Originally published on [quentangle](https://paragraph.com/@quentangle/web3)*