2《创建您自己的NFT集合并发布一个Web3应用程序来展示它们》启动并运行您的本地环境

Posted 2023-04-09 韩茹_

📚一点区块链入门

首先，我们需要让本地以太坊网络正常工作。就是我们如何编译和测试我们的智能合约代码！你知道你需要如何启动一个本地环境来工作吗？这里也一样！

现在，你只需要知道，智能合约是存在于区块链上的一段代码。区块链是一个公共场所，区块链是一个公共场所，任何人都可以免费安全地读写数据。想想它有点像 AWS 或 Heroku，除了没有人真正拥有它！它由成千上万被称为“矿工”的随机人经营。

这里的大体思路是：

1 – 我们要编写一个智能合约。该合约包含我们 NFT 的所有逻辑。

2 – 我们的智能合约要部署到区块链上。这样，世界上任何人都可以查看和调用我们的智能合约，这个合约是我们会允许他们铸造 NFT 的合约！

3 – 我们将建立一个客户网站，让人们可以轻松地从我们的收藏中铸造 NFT。

我建议您还可以阅读这些文档。在我看来，这些是互联网上了解以太坊如何运作的最佳指南！

⚙️设置本地工具

我们将大量使用名为Hardhat的工具，它让我们能够快速编译智能合约，并在本地进行测试。首先，您需要获取 node/npm。如果你没有它，请到 这里。

注意：我在 node 16 上。我知道有些人在旧版本的节点上遇到“内存不足错误”，所以如果发生这种情况，请获取 node 16！

接下来，让我们前往 terminal 。这里首先在本地创建一个文件夹：epic-nfts，继续并 cd转到这个工作的目录。

终端运行这些命令：

mkdir epic-nfts
cd epic-nfts 
npm init -y 
npm install --save-dev hardhat

运行最后一个命令并安装 Hardhat 后，您可能会看到有关漏洞的消息。每次从 NPM 安装某个软件时，都会进行安全检查，以查看您正在安装的库中的任何软件包是否存在已报告的漏洞。这更像是对你的警告！如果您想了解更多信息，请在 Google 上搜索一下这些漏洞！

然后本地目录结构：

🔨运行示例项目

酷，现在我们已经有 hardhat 了。让我们开始一个示例项目。

npx hardhat

如图：

注意：如果您在 Windows 上使用 Git Bash 安装 hardhat，您可能会在此步骤 (HH1) 遇到错误。如果遇到问题，您可以尝试使用 Windows CMD 执行 HardHat 安装。可以在此处找到其他信息。

选择创建基本示例项目的选项。全部都选择是，也就是输入 y。

示例项目将要求您安装hardhat-waffle和hardhat-ethers. 这些是我们稍后将会用到的。

继续安装其他依赖项，以防它没有自动安装。

npm install --save-dev @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers

您还需要安装一个名为OpenZeppelin的库，这是另一个用于开发安全智能合约的库。后面我们会详细的来了解更多的信息。现在，只需安装它。

npm install @openzeppelin/contracts

然后运行 sample-script.js：

在终端执行：

npx hardhat run scripts/sample-script.js

您应该看到如下内容：

如果您也显示了这个信息，则意味着您的本地环境已设置，并且你也在本地区块链上运行/部署了智能合约。

接下来我们详细的讨论一下，刚刚一步一步发生的事情是：

1. Hardhat 将您的智能合约从solidity 编译为字节码。
2. Hardhat 将在您的计算机上启动“本地区块链”。它就像在您的计算机上运行的以太坊的迷你测试版，可帮助您快速测试东西！
3. 然后，Hardhat 会将您编译的合约“部署”到您的本地区块链。那就是你在最后看到的地址。这是我们在迷你版以太坊上部署的合约。

如果您有兴趣，可以随意查看项目中的代码，看看它是如何工作的。具体来说，查看智能合约文件 Greeter.sol和实际运行的合约文件sample-script.js。

完成探索后，让我们前往下一部分并开始我们自己的 NFT 合约。

Web3 系列开发教程——创建你的第一个 NFT创建一个 NFT DApp，给你的 NFT 赋予属性，例如图片

在本文中，你将构建一个 NFT 铸币机，并学习如何通过使用 Metamask 和 Web3 工具将你的智能合约连接到 React 前端，来创建一个NFT dApp。

我认为，对于具备 Web2 开发背景的开发者来说，最大的挑战之一是弄清楚如何将你的智能合约连接到前端项目并与之交互。

通过构建 NFT 铸币机（它一个简单的 UI，你可以在其中输入数字资产的链接、标题和描述），你将在本文中学习如何：

• 通过你的前端项目连接到 Metamask
• 从你的前端调用智能合约方法
• 使用 Metamask 签署交易

在本文中，我们将使用 React 作为我们的前端框架。 因为本文主要关注 Web3 开发，所以我们不会花太多时间分解 React 基础知识。所以，希望你对 React 有基础的了解，例如知道组件、props、useState/useEffect 和基本的函数调用是如何工作的。

事不宜迟，让我们开始吧！

第 0 步：制作 NFT 101

在开始编写代码之前，有必要了解 NFT 的工作原理，它非常重要。 它包括两个步骤：

1. 在以太坊区块链上发布 NFT 智能合约。 通常这是一个 ERC-721 或 ERC-1155 智能合约。

两种 NFT 智能合约标准的最大区别在于 ERC-1155 是多代币标准，包含批量功能，而 E