Address
304 North Cardinal St.
Dorchester Center, MA 02124
Work Hours
Monday to Friday: 7AM - 7PM
Weekend: 10AM - 5PM
学习部署 NFT 智能合约、使用 AI 生成 NFT 并构建完整的前端应用程序
下面是我们的智能合约的代码。你可以从这里得到它NFT.sol
现在,根据“集合”实践,您需要将上述合约部署在本地区块链节点(例如:Hardhat 或 Truffle)或像 Goreli 测试网这样的公共测试网上。虽然这没关系,但以下痛点除外:
关于本地节点:
localhost
原因的!所以算了吧。😭2.1. 这就是BuildBear 的用武之地。它为您结合了两个世界的好处:
看看这里:** Localhost 失败的地方和 *赢得 Web3 黑客马拉松,使用 BuildBear Testnet 的分析
2.2. 访问BuildBear 应用程序。使用 Github 或 Google 帐户登录后,您将看到一个类似于下面添加的图片的页面:
2.3. 从以太坊主网创建您的私有节点分叉:
2.4. 使用“添加到 Metamask”按钮将您的私人测试网添加到您的 MetaMask 钱包:
2.5. 从水龙头铸造您的 Eth 代币(使用水龙头 URL):
2.5.1. 铸造代币
3.1. 导航到Remix Online IDE网站并接受条款和条件。
3.2. 创建一个新合约并粘贴智能合约代码,在此处可用 👉 GitHub 链接
3.3. 使用以下图标和详细信息,使用 Solidity 版本 0.8.1 编译智能合约:
请注意,合约的 ABI 仅在合约编译后可用。您可以在上图中看到可以复制的 ABI。请把这个放在手边。我们将暂时需要它。
3.4. 选择“Deploy and Run Transactions”选项卡:并按如下方式部署合约:
3.5. 点击“交易”按钮将合约部署到您的私有节点网络;完成后,您将看到类似于以下内容的内容:
3.6. 复制合约的地址并访问 Blockchain Explorer 以获取您的个人分叉测试网(链接位于home.buildbear.io的仪表板页面上)并找到您的合约。
3.6.1. 提交合约的ABI,方便交互
您可以在 BuildBear 的 Blockchain Explorer 上访问您的合约页面,然后访问 Contract 选项卡。您应该会看到类似于以下内容的内容:
提交我们从步骤 3.3 复制的 ABI;完成后,您应该会在合同页面上看到可供您使用的读取和写入合同按钮:
呜呜呜🎉 🎉
创建新 Next.js 应用程序的最简单方法是使用create-next-app
CLI 工具。您可以通过以下方式安装它npm
:
$ npm 安装创建下一个应用程序
安装后,您可以通过调用该工具并为项目提供名称来初始化新的 Next.js 应用程序:
$ npx create-next-app nft-app
注意:如果您尚未create-next-app
安装 –npx
将提示您自动安装。
工具完成骨架项目的初始化后,让我们转到目录并查看内部结构:
标准的package.json
,package-lock.json
和node_modules
在那里,但是,我们还有/pages
,/public
和/styles
目录,以及一个next.config.js
文件!
让我们来看看这些是什么。
Next.js 最终是 React 的扩展,它确实引入了一些新东西,使 React 应用程序开发更简单、更快——从Next.js 页面开始。
Next.js 通过其默认的基于文件系统的路由器,使得使用 React 创建多页面应用程序变得非常容易。您根本不需要安装任何额外的软件包,例如react-router-dom
或配置路由器。
所有 Next.js 项目都包含一个默认/pages
目录,这是您将使用的所有 React 组件的主目录。对于每个组件 – 路由器将提供基于该组件的页面。
Next.js 项目设置完成
由于在区块链上存储数据非常昂贵,我们将使用 IPFS 上传 NFT 数据,为此我们将使用NFT.storage服务
NFT.Storage 是一种存储服务,可让您免费上传链下 NFT 数据(如元数据、图像和其他资产),目标是将所有 NFT 数据存储为公共产品。
数据永久存储在 Filecoin 去中心化存储网络中,并通过其唯一的内容 ID 在 IPFS 上提供。
npm install nft.storage
StoreMetadata.jsx
并将此代码添加到文件中这是根据我们提供的输入准备元数据的主要组件,然后通过创建的 JS 客户端将其上传到 IPFS。
您可以根据令牌类型的标准自定义元数据例如元数据文件,您可以编辑要添加或选择的数据。
index.js
文件中为输入设置状态(在我们的例子中是名称、描述和图像文件)Home.module.css
让我们看看如何将 DALL-E 2 API 集成到我们的应用程序中。
首先,我们需要访问OpenAI网站。您需要注册才能生成 API 密钥。您还将在您的帐户中获得 18 美元供您使用。
选择您在注册时正在创建应用程序。
因此,在您创建帐户后,转到查看 API 密钥部分,您可以在其中创建您唯一的 API 密钥。检查下图以供参考。
现在在您的下一个应用程序中,创建一个.env文件。这是为了存储 API 密钥。
在那里添加您的 API 密钥。
NEXT_PUBLIC_AI_API_KEY= 您的 Api 密钥在这里
现在添加了 API 密钥,我们需要在 App.js 或 App.jsx 文件中导入一些东西。这些包括来自openai SDK 的Configuration和OpenAIApi。但首先,我们需要将openai SDK安装到 React App 中。
要安装它,只需键入以下命令:
npm 安装 openai
安装可能需要一些时间。然后,像这样导入我们之前提到的两个东西:
从“openai”导入{配置,OpenAIApi};
我们需要创建一个配置变量,它将从 .env 文件中获取 API 密钥。
const configuration = new Configuration({ apiKey: import.meta.env.VITE_Open_AI_Key, });
const openai = new OpenAIApi(配置);
我们需要一些东西将我们的客户端连接到区块链的这些节点之一,这样他们就可以开始使用区块链的全部功能,这正是 ether.js 是一个用 javascript 编写的库,可以创建任何与区块链,因此我们可以使用和创建许多基于去中心化应用程序 (daps) 的应用程序。它本质上是连接您的客户端并允许它连接到区块链的桥梁。
Ether.js 模块
npm install --save 以太币
让我们测试应用程序
连接钱包。输入名称、描述、生成图像,然后按下铸币按钮并签署交易。一个是成功的,您收到了警报。
转到区块浏览器并查看交易详细信息
我们已经成功建立了 NFT Mint!!!🎉🎉🎉
如果您喜欢我们的工作,请给我们一个鼓掌👏。
代码库:https://github.com/BuildBearLabs/Tutorials/tree/main/Ai-mint
-END-
我的文章不為圖利設限,全部開放閱讀。如你喜歡本文,請收藏它的 Writing NFT,支持寫作,保育新聞。
喜欢我的创作和项目分享吗?创作并不容易,别忘了给予更大挺喜欢的地与赞赏,以给大家带来WEB3共富之路!
作者WEB DID:link3.to/chengwf88888
赞赏ETH:chengwf.eth