如何构建 Web3 ChatGPT Dapp_加密百科

如果您想了解如何构建 Web3 ChatGPT dapp 来铸造 NFT，那么本文适合您！我们即将构建的 ChatGPT dapp 将使您能够查询 ChatGPT 并将提供的答案转换为 NFT。听起来很有挑战性？幸运的是，这非常简单，这要归功于 OpenAI 的 API 和 Moralis Web3 API。现在，关于 ChatGPT 功能的实现，以下代码行完成了大部分繁重的工作：

app.get ( "/" , async ( req, res ) = > {   
  const {查询} = req; 
  尝试{ 
    const response = await openai.createCompletion （{
      型号：“text-davinci-003” ，
      提示：查询.消息，
      最大令牌数: 30 ，
      温度：0 ，
    } ）；
    返回res.status ( 200 ) . json ( response.data ) ;
  }捕获（e ）{   
    console.log ( `出现错误$ {e } ` ) ；
    返回res.status ( 400 ) .json ( ) ;
  }
} ）；

为了将聊天记录创建为 NFT，您必须以去中心化的方式存储它们。在这里，您可以通过 Moralis IPFS API使用 IPFS 。以下是涵盖该部分的代码片段：

app.get ( "/uploadtoipfs" , async ( req, res ) = > {   
  const {查询} = req; 
  尝试{ 
    const response = await Moralis.EvmApi.ipfs.uploadFolder （{
      阿比：[
        {
          路径：“conversation.json” ，
          内容：{聊天：查询。对} ， 
        } ，
      ] ，
    } ）；
    控制台. log (响应 .结果) ;
    返回res.status ( 200 ) . json ( response.result ) ;
  }捕获（e ）{   
    console.log ( `出现错误$ {e } ` ) ；
    返回res.status ( 400 ) .json ( ) ;
  }
} ）；

当然，就实际的 NFT 铸造而言，您还需要一个合适的智能合约。因此，如果您有兴趣通过实现上面介绍的代码行并创建合适的智能合约来创建您的 Web3 ChatGPT dapp，请继续阅读本文或观看上面的视频。只需创建您的免费 Moralis 帐户并跟随我们的脚步！

概述

今天的文章主要包含一个教程，演示如何使用我们的代码创建 Web3 ChatGPT dapp。您将了解您的 JavaScript 技能如何涵盖 ChatGPT dapp 的前端和后端部分。在此过程中，您还将学习如何使用 OpenAI 的 API、Moralis Web3 Data API和 wagmi 等工具。您还将学习 Solidity 的基础知识。毕竟，您需要部署我们的示例智能合约实例来创建您的 ChatGPT 铸币机。

为了本教程的目的，我们将使用 Goerli 测试网。因此，请确保将您的 MetaMask 钱包连接到此以太坊测试网，并在您的钱包中配备一些Goerli ETH。一个可靠的Goerli 水龙头就可以了。

作为奖励，我们还将向您展示如何使用 Moralis NFT API来获取和查看使用 Web3 ChatGTP dapp 铸造的 NFT 的详细信息。在本教程下方，您还可以找到有关 ChatGPT 及其用例的更多详细信息。

教程：构建你的 Web3 ChatGPT NFT Minter Dapp

如果您要从头开始构建 Web3 ChatGPT minter dapp，则需要完成以下步骤：

创建一个 NodeJS 应用程序和一个 Express 服务器。
安装后端所需的所有依赖项：CORS、dotenv、Express、Moralis 和 OpenAI。
创建一个适当的后端“index.js”脚本，涵盖如上所述的 ChatGPT 和 Moralis IPFS API 的后端功能。
构建前端 NextJS 应用程序。
安装所有必需的前端依赖项：Moralis、wagmi、NextAuth 等。
编写几个“.jsx”和“.js”脚本。
编写并部署一个智能合约，一旦你点击上面截图中的“Mint NFT”按钮，就会开始聊天。

但是，您无需执行所有这些步骤，只需访问我们的“ moralis-chatgpt ” GitHub 存储库并克隆整个代码即可。完成此操作并在 Visual Studio Code (VSC) 中打开项目后，您将看到三个文件夹：“backend”、“hardhat”和“nextjs_moralis_auth”：

注意：接下来，我们将像您克隆了我们的项目一样进行，并且我们将对最重要的脚本进行代码演练。

ChatGPT NFT 铸造智能合约

如果您熟悉 Hardhat，您可以采取与我们相同的方法，使用 Hardhat 创建我们的智能合约实例。但是，您也可以使用您最喜欢的浏览器使用 Remix IDE 来编译和部署所需的智能合约。无论哪种方式，请使用位于“hardhat/contracts”文件夹中的示例智能合约模板（“ MessageNFT.sol ”）：

与所有 Solidity 智能合约一样，“MessageNFT.sol”以 MIT 许可证和一行指令开头：

// SPDX 许可证标识符：MIT
编译指示可靠性 ^ 0.8 . 17 ；

接下来，它从 OpenZeppelin 导入三个经过验证的智能合约，以继承 ERC-721 标准、计数 NFT 和分配 NFT ID 的能力，以及仅允许智能合约所有者铸造 NFT 的功能：

导入“@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol” ； 
导入“@openzeppelin/contracts/utils/Counters.sol” ； 
导入“@openzeppelin/contracts/access/Ownable.sol” ； 

导入之后，脚本定义了合约名称和合约类型（ERC-721）。在合约内部，部署合约时会执行“构造函数”，每当调用此合约来铸造相关 NFT 时，就会执行“ mintNFT ”函数：

合约消息NFT 为 ERC721URIStorage，Ownable {
    使用计数器进行计数器。计数器；
    计数器。计数器私有_tokenIds； 
    构造函数（）ERC721 （“第 GPT 章对话” ，“CGPTC” ）{ }  
    函数mintNFT (地址收件人，字符串内存 tokenURI ) 
        民众
        唯一所有者
        返回（uint256 ） 
    {
        _tokenIds.增量（）；
uint256 newItemId =         _tokenIds.current ( ) ；
        _mint （收件人，newItemId ）；
        _setTokenURI ( newItemId, tokenURI ) ;
        返回新的ItemId；
    }
}

查看“ mint ”函数参数，您可以看到它接受收件人的钱包地址和代币 URI。前者将获取连接的钱包的地址，后者将获取 IPFS API 上传相关聊天后返回的 URI。

注意：部署上述智能合约时，请务必关注 Goerli 测试网。

使用 NodeJS 和 Express 构建 Web3 ChatGPT Dapp

Web3 ChatGPT Minter Dapp 的后端

在“backend”文件夹中，您可以找到“index.js”、“package-lock.json”和“package.json”文件。您可以打开后者查看该项目需要哪些依赖项。除了安装所需的依赖项之外，您还需要创建一个“.env”文件。在该文件中，您需要将 Moralis Web3 API 密钥存储在“ MORALIS_API_KEY ”变量下。

要获取 API 密钥，您需要一个 Moralis 帐户。因此，如果您尚未创建，请立即创建您的免费 Moralis 帐户。然后，登录并从您的管理区域复制您的 API 密钥：

有了 Web3 API 密钥，您就可以使用后端“ index.js ”脚本。毕竟，这是包含简介中概述的代码片段的脚本。话虽如此，让我们仔细看看“index.js”。

在顶部，脚本使用 CORS 和 Express 导入所有相关依赖项并导入您的 API 密钥：

const express = require ( "express" ) ;
const app = express ( ) ;
const端口 = 5001 ;
const Moralis = require ( "moralis" ) 。默认;
const cors = require ( "cors" ) ;
需要（“dotenv” ）。config （）；
app.use ( cors ( ) ) ；
应用程序。使用（express。json （））；
const MORALIS_API_KEY = 进程.环境. MORALIS_API_KEY ；

查看上面的代码行，您可以看到您的后端将在 localhost 5001 上运行。导入 Moralis 和您的 API 密钥后，以下代码片段（您可以在“index.js”的底部找到）将初始化 Moralis：

道德。开始（{
  api密钥： MORALIS_API_KEY，
} ) .然后( ( ) => {  
  应用程序。监听（端口，（）=> {  
    console.log ( `监听API 调用` ) ；
  } ）；
} ）；

该脚本还导入了 OpenAI 文档提供的 OpenAI API 配置行：

const {配置， OpenAIApi } = require ( "openai" ) ; 
const配置 =新的配置（{ 
  apiKey : process.env.OPENAI_API_KEY ，
} ）；
const openai = new OpenAIApi (配置) ; 

这也是使简介中的代码片段正常工作的所有相关代码。因此，让我们仔细看看这两个 Express 服务器端点。

Root Express 服务器端点

在构建将您的聊天内容转换为 NFT 的 Web3 ChatGPT dapp 时，您的后端需要涵盖 ChatGPT 功能。这就是 OpenAI API 发挥作用的地方：

app.get ( "/" , async ( req, res ) = > {   
  const {查询} = req; 
  尝试{ 
    const response = await openai.createCompletion （{
      型号：“text-davinci-003” ，
      提示：查询.消息，
      最大令牌数: 30 ，
      温度：0 ，
    } ）；
    返回res.status ( 200 ) . json ( response.data ) ;
  }捕获（e ）{   
    console.log ( `出现错误$ {e } ` ) ；
    返回res.status ( 400 ) .json ( ) ;
  }
} ）；

上述代码行从前端的输入字段获取消息，将其传递给 ChatGPT，并返回 ChatGPT 的回复。

“ /uploadtoipfs ” Express 服务器端点

创建 NFT 时，您不会将 NFT 元数据和代表 NFT 的文件存储在区块链上。相反，您可以使用云存储解决方案为您提供存储在区块链上的 URI。当然，您可以使用任何中心化存储解决方案。但是，如果您想采用更可取的去中心化方法，则应该使用领先的Web3 存储解决方案之一。当您打算公开文件时，IPFS 可以说是最佳选择。因此，我们的后端“index.js”脚本通过 Moralis 的 IPFS API 使用 IPFS。以下是涵盖“ uploadtoipfs ”端点的代码行：

app.get ( "/uploadtoipfs" , async ( req, res ) = > {   
  const {查询} = req; 
  尝试{ 
    const response = await Moralis.EvmApi.ipfs.uploadFolder （{
      阿比：[
        {
          路径：“conversation.json” ，
          内容：{聊天：查询。对} ， 
        } ，
      ] ，
    } ）；
    控制台. log (响应 .结果) ;
    返回res.status ( 200 ) . json ( response.result ) ;
  }捕获（e ）{   
    console.log ( `出现错误$ {e } ` ) ；
    返回res.status ( 400 ) .json ( ) ;
  }
} ）；

上面可以看到“ Moralis.EvmApi.ipfs.uploadFolder ”方法使用“ conversation.json ”作为IPFS路径，以货币ChatGPT对话作为对应内容。

此时，您应该已经部署了“MessageNFT.sol”智能合约实例，并启动并运行了上面介绍的后端。因此，现在是时候解决“Web3 ChatGPT dapp”拼图的最后一块了：前端。

Web3 ChatGPT Minter Dapp 的前端

在位于“nextjs_moralis_auth/pages”文件夹中的“ _app.jsx ”脚本中，您可以看到我们如何将“WagmiConfig”和“SessionProvider”包装在我们的应用程序中。这使您能够在整个应用程序中使用身份验证：

函数MyApp ( {组件， pageProps } ) {  
    返回（ 
        <WagmiConfig 客户端= {客户端} >
            <SessionProvider 会话 = { pageProps.session } refetchInterval = { 0 } >
                <组件{ ...pageProps } />
            </SessionProvider>
        </WagmiConfig>
    ）；
}

当然，为了使上述工作顺利进行，您需要在顶部导入适当的提供程序。

在“ signin.jsx ”脚本中，我们的代码呈现了标题和“连接”按钮。通过“ handleAuth ”，您可以连接或断开 MetaMask。连接后，Web3 ChatGPT dapp 的前端将使用“ user.jsx ”页面，其中包含不同的标题。“user.js”脚本还包含“ loggedIn.js ”组件，该组件在后端和前端之间架起数据桥梁。在此组件的底部，“loggedIn.js”脚本呈现您的前端：

  返回（ 
    <部分>
      <section className = { styles.chat_box } >
        <section className= { style. chat_history } id= "chatHistory" ></section>
        <section className= {样式.消息输入} >
          <输入
            类型= “文本”
            id= "输入字段"
            placeholder= “输入您的消息...”
            onChange= {获取消息}
          />
          <button onClick= { sendMessage } >发送</button>
        </section>
      </section>
      {显示MintBtn && (
<        按钮类名= { styles.mint_btn } onClick= { mint } >
          铸币 NFT
        </按钮>
      ）}
    </section>
  ）；
}

注意：要查看“loggedIn.js”脚本的更详细代码演示，请使用本文顶部的视频（从 5:53 开始）。您还可以在这里了解我们如何使用 ChatGPT 为我们的前端生成样式代码。

最终构建 – ChatGPT Minter 演示

在连接 MetaMask 之前，我们的 ChatGPT NFT minter dapp 的样子如下：

一旦我们点击“通过 MetaMask 进行身份验证”按钮，MetaMask 就会弹出并要求我们签署身份验证消息：

在签署上述签名请求后，我们的 dapp 会显示一个 ChatGPT 框并更改标题：

一旦我们在输入字段中输入消息并点击“发送”，ChatGPT 就会回复。这也会激活底部的“Mint NFT”按钮：

如果我们决定将聊天转换为 NFT，我们需要单击“铸造 NFT”按钮，然后使用我们的 MetaMask 确认铸造交易：

一旦我们的交易完成，我们就可以在 Etherscan 或 OpenSea 上查看我们新的 ChatGPT NFT。当然，我们也可以使用“通过合约获取 NFT ”API 参考页面。在这种情况下，我们只需要粘贴我们的智能合约地址并选择 Goerli 链：

当我们向下滚动“通过合约获取 NFT” API 参考页面时，我们会看到响应，其中包含有关我们的 NFT 的详细信息：

什么是 ChatGPT？

ChatGPT 是 OpenAI 在其 GPT-3 系列基础上开发的一款高级聊天机器人。然而，除了 ChatGPT 本身，没有人能更好地解释 ChatGPT 是什么：

请记住，ChatGPT 尚处于早期阶段，存在一些局限性。例如，它偶尔会提供不正确的信息。例如，它可能提供有害或有偏见的内容，并且对时事的了解有限。考虑到这一点，必须谨慎使用 ChatGPT，并且必须正确检查其答案。

尽管如此，这款工具的强大功能还是令人印象深刻的。毕竟，它能够处理大多数自然语言（尽管它最准确的是英语）以及所有领先的计算机编程语言。让我们来看看一些典型的 ChatGPT 用例。

Web3 ChatGPT 用例

从很多方面来看，这款先进的 AI 工具在写作方面已经取得了长足进步，就像计算器在数学方面一样，是一款功能强大的工具。以下是全球用户使用 ChatGPT 的一些常见示例：

开发/编程以退化 Web2 和 Web3 代码或代码模板并查找/修复代码错误
内容开发
营销和推销
会计和数据分析

以上只是一些最常见的 ChatGPT 用例。当然，我们也可以使用 OpenAI 的 API，将 ChatGPT 的功能实现到各种 dapp 中（就像我们在今天的示例中所做的那样）。此外，由于 ChatGPT 已经证明自己是一个高度可靠的信息来源和先进的合成能力，心理学家和精神病学家等专家已经报告将其用作辅助工具。

如何构建 Web3 ChatGPT Dapp – 摘要

在今天的文章中，您有机会使用我们的示例项目和指南来创建我们的 Web3 ChatGPT NFT 铸造 dapp 的实例。使用我们的脚本，您可以在几分钟内准备好智能合约、后端和前端。本质上，您只需使用 Hardhat 或 Remix 部署我们的智能合约实例，安装所需的前端和后端依赖项，获取 Moralis Web3 API 密钥并将其存储在“.env”文件中，然后启动您的前端和后端应用程序。