Como Construir um Dapp Web3 integrado ao ChatGPT

Índice

1. Visão geral

2. Tutorial: Construa seu Dapp Web3 de cunhagem de NFTs integrado ao ChatGPT

   2.1. Contrato Inteligente de Cunhagem de NFTs integrado ao ChatGPT
   2.2. Backend do Dapp Web3 de cunhagem de NFTs integrado ao ChatGPT
   2.2.1. Ponto de Extremidade do Servidor Express Raiz
   2.2.2. O Ponto de Extremidade do servidor Express “/uploadtoipfs”
   2.3. Frontend do Dapp Web3 de cunhagem de NFTs integrado ao ChatGPT

3. Compilação Final – Demonstração de cunhagem de NFTs integrado ao ChatGPT

4. O que é o ChatGPT?
   4.1 Casos de uso do ChatGPT na Web3

5. Como construir um Dapp Web3 integrado ao ChatGPT – Resumo

Se você gostaria de aprender como construir um dapp Web3 integrado ao ChatGPT para cunhar NFTs, este artigo é para você! O dapp integrado ao ChatGPT que estamos prestes a construir permitirá que você consulte o ChatGPT e converta a resposta fornecida em um NFT. Parece complicado? Felizmente, é bastante simples, graças à API da OpenAI e à API Web3 do Moralis. Agora, com relação à implementação da funcionalidade do ChatGPT, as seguintes linhas de código fazem a maior parte do trabalho pesado:

app.get("/", async (req, res) => {
 const { query } = req;
 try {
   const response = await openai.createCompletion({
     model: "text-davinci-003",
     prompt: query.message,
     max_tokens: 30,
     temperature: 0,
   });
   return res.status(200).json(response.data);
 } catch (e) {
   console.log(`Algo deu errado ${e}`);
   return res.status(400).json();
 }
});

Para cunhar conversas (chats) como NFTs, você deve armazená-los de forma descentralizada. É aqui que você pode usar o IPFS por meio da API IPFS do Moralis. Aqui está o trecho de código que cobre essa parte:

app.get("/uploadtoipfs", async (req, res) => {
 const { query } = req;
 try {
   const response = await Moralis.EvmApi.ipfs.uploadFolder({
     abi: [
       {
         path: "conversation.json",
         content: { chat: query.pair },
       },
     ],
   });
   console.log(response.result);
   return res.status(200).json(response.result);
 } catch (e) {
   console.log(`Algo deu errado ${e}`);
   return res.status(400).json();
 }
});

Claro que, no que diz respeito à cunhagem de NFT, você também precisa de um contrato inteligente adequado. Portanto, se você estiver interessado em criar seu dapp Web3 integrado ao ChatGPT implementando as linhas de código apresentadas acima e criando um contrato inteligente adequado, acompanhe este artigo ou assista ao vídeo acima. Basta criar sua conta gratuita no Moralis e seguir nosso exemplo!

Inscreva-se no Moralis

Visão geral

A maior parte do artigo de hoje consiste em um tutorial demonstrando como criar um dapp Web3 integrado ao ChatGPT usando nosso código. Você aprenderá como suas habilidades em JavaScript podem abranger as partes de frontend e backend do seu dapp ChatGPT. Ao longo do caminho, você também aprenderá a usar ferramentas como a API da OpenAI, a API de dados Web3 do Moralis e a Wagmi (coleção de ganchos do React para a Ethereum). Você também aprenderá os fundamentos do Solidity. Afinal, você precisa implantar sua instância de nosso contrato inteligente de exemplo para criar seu dapp de cunhagem integrado ao ChatGPT.

Para este tutorial, usaremos a rede de testes Goerli. Como tal, certifique-se de conectar sua carteira MetaMask a esta rede de testes Ethereum e equipar sua carteira com algum Goerli ETH. Uma torneira Goerli confiável resolverá o problema.

Como bônus, também mostraremos como usar a API de NFT do Moralis para buscar e visualizar os detalhes dos NFTs cunhados com seu dapp Web3 integrado ao ChatGTP. Abaixo no tutorial, você também poderá encontrar mais detalhes sobre o ChatGPT e seus casos de uso.

Tutorial: Construa seu Dapp Web3 de cunhagem de NFTs integrado ao ChatGPT

Se você fosse construir seu dapp Web3 de cunhagem integrado ao ChatGPT do zero, você precisaria completar as seguintes etapas:

1. Criar um aplicativo NodeJS e um servidor Express.
2. Instalar todas as dependências necessárias para o seu backend: CORS, dotenv, Express, Moralis e OpenAI.
3. Criar um script "index.js" de backend adequado, que cubra as funcionalidades de backend de incorporação do ChatGPT e da API IPFS do Moralis, conforme descrito acima.
4. Criar um aplicativo frontend NextJS.
5. Instalar todas as dependências de frontend necessárias: Moralis, wagmi, NextAuth, etc.
6. Codificar vários scripts “.jsx” e “.js”.
7. Escrever e implantar um contrato inteligente que crie um chat assim que você clicar no botão “Mint NFT” (Cunhar NFT) na captura de tela acima.

No entanto, em vez de seguir todas essas etapas, você pode simplesmente acessar nosso repositório do GitHub “moralis-chatgpt” e clonar todo o código. Depois de fazer isso e abrir o projeto no Visual Studio Code (VSC), você verá três pastas: “backend”, “hardhat” e “nextjs_moralis_auth”:

Nota: seguindo em frente, nós procederemos como se você tivesse clonado nosso projeto e faremos uma caminhada pelo código dos scripts mais significativos.

Contrato Inteligente de Mineração ChatGPT NFT

Se você estiver familiarizado com o Hardhat, poderá seguir o mesmo caminho que fizemos e usar o Hardhat para criar sua instância de nosso contrato inteligente. No entanto, você também pode usar o Remix IDE usando seu navegador favorito para compilar e implantar o contrato inteligente necessário. De qualquer forma, use nosso exemplo de modelo de contrato inteligente (“MessageNFT.sol“) localizado dentro da pasta “hardhat/contracts”:

Como todos os contratos inteligentes do Solidity, “MessageNFT.sol” começa com uma licença MIT e uma linha pragma:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.17;

Em seguida, ele importa três contratos inteligentes verificados do OpenZeppelin para herdar o padrão ERC-721, a capacidade de contar NFTs e atribuir IDs de NFT e a funcionalidade que permite apenas ao proprietário do contrato inteligente cunhar NFTs:

import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/utils/Counters.sol";
import "@openzeppelin/contracts/access/Ownable.sol";

Após as importações, o script define o nome do contrato e o tipo de contrato (ERC-721). Dentro do contrato, o “constructor ” é executado quando o contrato é implantado, e a função “mintNFT ” é executada sempre que este contrato é chamado para cunhar um NFT relevante:

contract messageNFT is ERC721URIStorage, Ownable {
   using Counters for Counters.Counter;
   Counters.Counter private _tokenIds;
   constructor() ERC721("Chapt GPT Conversation", "CGPTC") {}
   function mintNFT(address recipient, string memory tokenURI)
       public
       onlyOwner
       returns (uint256)
   {
       _tokenIds.increment();
       uint256 newItemId = _tokenIds.current();
       _mint(recipient, newItemId);
       _setTokenURI(newItemId, tokenURI);
       return newItemId;
   }
}

Olhando para os parâmetros da função “mint ”, você pode ver que ele leva o endereço da carteira do destinatário e o URI do token. O primeiro pegará o endereço da carteira conectada e o último buscará o URI que a API IPFS retorna após o upload de um chat em questão.

Nota: ao implantar o contrato inteligente acima, certifique-se de focar na rede de teste Goerli.

Backend do Dapp Web3 de cunhagem de NFTs integrado ao ChatGPT

Dentro da pasta “backend”, você pode encontrar os arquivos “index.js”, “package-lock.json” e “package.json”. Você pode abrir o último para ver quais dependências são necessárias para este projeto. Além de instalar as dependências necessárias, você também precisa criar um arquivo “.env”. Dentro desse arquivo, você deve armazenar sua chave de API Web3 do Moralis na variável “MORALIS_API_KEY ”.

Para obter sua chave de API, você precisará de uma conta no Moralis. Portanto, caso ainda não a tenha feito, crie agora sua conta gratuita no Moralis. Em seguida, faça login e copie sua chave de API da sua área de administração:

Com sua chave de API Web3 instalada, você poderá utilizar o script "index.js" de backend. Afinal, esse é o script que inclui os trechos de código descritos na introdução. Com isso dito, vamos dar uma olhada em “index.js”.

Na parte superior, o script importa todas as dependências relevantes usando CORS e Express e importa sua chave de API:

const express = require("express");
const app = express();
const port = 5001;
const Moralis = require("moralis").default;
const cors = require("cors");
require("dotenv").config();
app.use(cors());
app.use(express.json());
const MORALIS_API_KEY = process.env.MORALIS_API_KEY;

Observando as linhas de código acima, você pode ver que seu backend será executado no localhost 5001. Depois de importar o Moralis e sua chave de API, o seguinte trecho (que você pode encontrar na parte inferior de “index.js”) inicializa o Moralis:

Moralis.start({
 apiKey: MORALIS_API_KEY,
}).then(() => {
 app.listen(port, () => {
   console.log(`Ouvindo as chamadas API`);
 });
});

O script também importa as linhas de configuração da API OpenAI fornecidas pela documentação da OpenAI:

const { Configuration, OpenAIApi } = require("openai");
const configuration = new Configuration({
 apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

Este também é todo o código circundante que fará com que os trechos de código da introdução funcionem corretamente. Então, vamos dar uma olhada nesses dois pontos de extremidade do servidor Express.

Ponto de Extremidade do Servidor Express Raiz

Ao criar um dapp Web3 integrado ao ChatGPT que transforma seus chats em NFTs, seu backend precisa cobrir a funcionalidade do ChatGPT. É aqui que a API da OpenAI entra em cena:

app.get("/", async (req, res) => {
 const { query } = req;
 try {
   const response = await openai.createCompletion({
     model: "text-davinci-003",
     prompt: query.message,
     max_tokens: 30,
     temperature: 0,
   });
   return res.status(200).json(response.data);
 } catch (e) {
   console.log(`Algo deu errado ${e}`);
   return res.status(400).json();
 }
});

As linhas de código acima buscam a mensagem do seu campo de entrada no frontend, passam para o ChatGPT e retornam a resposta do ChatGPT.

O Ponto de Extremidade do Servidor Express “/uploadtoipfs”

Ao criar NFTs, você não armazena os metadados NFT e os arquivos que representam o NFT na blockchain. Em vez disso, você usa soluções de armazenamento em nuvem que fornecem URIs, que são armazenados na blockchain. Claro, você pode usar qualquer solução de armazenamento centralizado. No entanto, se você deseja adotar uma abordagem preferencialmente descentralizada, deve usar uma das principais soluções de armazenamento Web3. O IPFS é indiscutivelmente a melhor escolha quando você pretende tornar os arquivos públicos. Por causa disso, nosso script “index.js” de backend utiliza o IPFS por meio da API IPFS do Moralis. Aqui estão as linhas de código que cobrem o ponto de extremidade “uploadtoipfs”:

app.get("/uploadtoipfs", async (req, res) => {
 const { query } = req;
 try {
   const response = await Moralis.EvmApi.ipfs.uploadFolder({
     abi: [
       {
         path: "conversation.json",
         content: { chat: query.pair },
       },
     ],
   });
   console.log(response.result);
   return res.status(200).json(response.result);
 } catch (e) {
   console.log(`Algo deu errado ${e}`);
   return res.status(400).json();
 }
});

Acima, você pode ver o método “Moralis.EvmApi.ipfs.uploadFolder” que usa “conversation.json” como um caminho do IPFS e a conversa atual do ChatGPT com o conteúdo correspondente.

Neste ponto, você já deve ter implantado sua instância do contrato inteligente “MessageNFT.sol” e ter o backend apresentado acima instalado e funcionando. Assim, é hora de enfrentar a peça final do quebra-cabeça “dapp Web3 integrado ao ChatGPT”: o frontend.

Frontend do Dapp Web3 de Cunhagem Integrado ao ChatGPT

Dentro do script “app.jsx”, localizado na pasta “nextjs_moralis_auth/pages”, você pode ver como envolvemos “WagmiConfig” e “SessionProvider” em nosso aplicativo. Isso permite que você use a autenticação em todo o aplicativo:

function MyApp({ Component, pageProps }) {
   return (
       <WagmiConfig client={client}>
           <SessionProvider session={pageProps.session} refetchInterval={0}>
               <Component {...pageProps} />
           </SessionProvider>
       </WagmiConfig>
   );
}

Claro, para fazer o trabalho acima, você precisa importar os provedores (providers) adequados no topo.

Dentro do script “signin.jsx”, nosso código renderiza o cabeçalho e o botão “Connect”. Via “handleAuth“, você pode conectar ou desconectar a MetaMask. Uma vez conectada, o frontend do dapp Web3 integrado ao ChatGPT usa a página “user.jsx”, que contém um cabeçalho diferente. O script “user.js” também contém o componente “logedIn.js”, que conecta os dados entre o backend e o frontend. Na parte inferior deste componente, o script “loggedIn.js” renderiza seu frontend:

return (
    <section>
      <section className={styles.chat_box}>
        <section className={styles.chat_history} id="chatHistory"></section>
        <section className={styles.message_input}>
          <input
            type="text"
            id="inputField"
            placeholder="Digite sua mensagem..."
            onChange={getMessage}
          />
          <button onClick={sendMessage}>Enviar</button>
        </section>
      </section>
      {showMintBtn && (
        <button className={styles.mint_btn} onClick={mint}>
          Cunhar NFT
        </button>
      )}
    </section>
  );
}

Nota: para obter instruções detalhadas sobre o código do script "loggedIn.js", use o vídeo no início deste artigo, começando no minuto 5:53. Também é aqui que você pode aprender como usamos o ChatGPT para gerar o código de estilo para nosso frontend.

Construção Final – Demonstração do dapp de cunhagem integrado ao ChatGPT

Aqui está a aparência do nosso dapp de cunhagem de NFTs integrado ao ChatGPT antes de conectar a MetaMask:

Uma vez que clicarmos no botão “Authenticate via MetaMask” (Autenticar via MetaMask), a MetaMask aparece e nos pede para assinar a mensagem de autenticação:

Depois de assinar a solicitação de assinatura acima, nosso dapp exibe uma caixa do ChatGPT e altera o cabeçalho:

Uma vez que digitarmos uma mensagem no campo de entrada e clicarmos em “Enviar” o ChatGPT responde. Isso também ativa o botão “Cunhar NFT” na parte inferior:

Se decidirmos converter nosso chat em um NFT, precisamos clicar no botão “Mint NFT” e confirmar a transação de cunhagem com nossa MetaMask:

Assim que nossa transação for concluída, podemos visualizar nosso novo NFT do ChatGPT no Etherscan ou na OpenSea. Claro, também podemos usar a página de referência da API “Get NFTs by contract ” (Obter NFTs por contrato). Nesse caso, basta colar o endereço do nosso contrato inteligente e selecionar a cadeia Goerli:

Ao rolar para baixo a página de referência da API “Get NFTs by contract”, vemos a resposta, que contém os detalhes sobre nosso NFT:

O que é o ChatGPT?

O ChatGPT é um chatbot (algoritmos que são usados em chats para imitar uma conversa humana) avançado desenvolvido pela OpenAI no topo de sua família GPT-3. No entanto, quem melhor para explicar o que é o ChatGPT do que o próprio ChatGPT:

Lembre-se de que o ChatGPT está em seus estágios iniciais e contém algumas limitações. Por exemplo, ocasionalmente fornece informações incorretas. Por exemplo, pode fornecer conteúdo prejudicial ou tendencioso e tem conhecimento limitado dos assuntos atuais. Pensando nisso, o ChatGPT deve ser usado com cautela, e suas respostas devem ser verificadas adequadamente.

Ainda assim, o poder desta ferramenta é bastante impressionante. Afinal, ele fala a maioria das línguas naturais (embora seja mais preciso em inglês), bem como todas as principais linguagens de programação de computadores. Vejamos alguns casos típicos de uso do ChatGPT.

Casos de uso do ChatGPT na Web3

De muitas maneiras, esta ferramenta avançada de IA (inteligência artificial) está a caminho de se tornar para a escrita o que a calculadora é para a matemática – uma ferramenta altamente poderosa. Aqui estão alguns exemplos comuns de como os usuários ao redor do mundo estão usando o ChatGPT:

• Desenvolvimento/programação para gerar código Web2 e Web3 ou modelos de código e encontrar/corrigir erros de código;
• Desenvolvimento de conteúdo;
• Lançamentos de marketing e vendas;
• Análise de dados e contabilidade.

Os itens acima são apenas alguns dos casos de uso mais comuns do ChatGPT. Claro, também podemos usar a API da OpenAI e implementar o poder do ChatGPT em todos os tipos de dapps (como fizemos no exemplo de hoje). Além disso, como o ChatGPT já provou ser uma fonte altamente confiável de informações e recursos avançados de síntese, especialistas, como psicólogos e psiquiatras, relataram usá-lo como uma ferramenta de assistência.

Como construir um Dapp Web3 integrado ao ChatGPT – Resumo

No artigo de hoje, você teve a chance de usar nosso exemplo de projeto e orientação para criar sua instância do nosso dapp Web3 integrado ao ChatGPT de cunhagem de NFT. Usando nossos scripts, você conseguiu ter seu contrato inteligente, backend e frontend prontos em minutos. Basicamente, você só precisava implantar sua instância de nosso contrato inteligente com o Hardhat ou Remix, instalar as dependências de frontend e backend necessárias, obter sua chave de API Web3 do Moralis e armazená-la em um arquivo “.env” e iniciar seus aplicativos de frontend e backend. Por fim, você também teve a oportunidade de conferir nosso exemplo de dapp de demonstração e ver o poder de um dos pontos de extremidade da API de NFT do Moralis. No entanto, também explicamos o que é o ChatGPT e seus casos de uso comuns.

Seguindo em frente, encorajamos você a usar este artigo como um gerador de ideias e como um exemplo de prova de conceito e criar dapps exclusivos que incorporam o ChatGPT. Se você precisa expandir seus conhecimentos e habilidades de desenvolvimento Web3 primeiro, certifique-se de usar os documentos do Moralis, nossos vídeos de desenvolvimento de blockchain e nosso blog sobre criptomoedas. Alguns dos tópicos mais recentes giram em torno de ferramentas de desenvolvimento Ethereum, usando IPFS com a Ethereum, desenvolvendo aplicativos blockchain, segurança de contrato inteligente, desenvolvimento de aplicativo blockchain Solana, faucet da rede de testes Aptos, e muito mais. Além disso, se você estiver interessado em se tornar certificado em blockchain, a Moralis Academy é o lugar certo. Uma vez inscrito, certifique-se primeiro de colocar seus fundamentos de blockchain e Bitcoin em ordem.

Artigo original encontra-se no blog do Moralis. Traduzido por Marcelo Panegali