Este artículo es una traducción de Moralis Blog, hecha por Héctor Botero. Puedes encontrar el artículo original aquí.
Sería genial escucharte en nuestro Discord, puedes contarnos tus ideas, comentarios, sugerencias y dejarnos saber lo que necesitas.
Si prefieres puedes escribirnos a @web3dev_eshttps://twitter.com/web3dev_es en Twitter.
Si te gustaría aprender cómo construir una dapp Web3 con ChatGPT para acuñar NFT, ¡este artículo es para ti! La dapp ChatGPT que vamos a construir te permitirá hacer consultas al ChatGPT y convertir la respuesta proporcionada en un NFT. ¿Suena desafiante? Afortunadamente, es bastante sencillo, gracias a la API de OpenAI y a la API de Moralis Web3. Ahora, en cuanto a la implementación de la funcionalidad de ChatGPT, las siguientes líneas de código hacen la mayor parte del trabajo 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(`Something went wrong ${e}`);
return res.status(400).json();
}
});
Para acuñar chats como NFT, es necesario almacenarlos de una forma descentralizada. Aquí es donde puedes utilizar los IPFS a través de la API de Moralis IPFS. Aquí está el fragmento de código que cubre esa 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(`Something went wrong ${e}`);
return res.status(400).json();
}
});
Por supuesto, en lo que respecta a la acuñación del NFT también necesitarás un contrato inteligente adecuado. Así que, si estás interesado en crear tu propio dapp Web3 con ChatGPT mediante la implementación de las líneas de código presentadas anteriormente y la creación de un contrato inteligente adecuado, sigue este artículo o mira el video anterior. ¡Simplemente crea tu cuenta gratuita en Moralis y sigue nuestro ejemplo!
Resumen
La mayor parte del artículo de hoy consiste en un tutorial que demuestra cómo crear una dapp de Web3 con ChatGPT, utilizando nuestro código. Aprenderás cómo tus habilidades de JavaScript pueden cubrir tanto las partes frontend como backend de tu dapp de ChatGPT. En el camino, también aprenderás a utilizar herramientas como la API de OpenAI, la API de datos web3 de Moralis y wagmi. También aprenderás los conceptos básicos de Solidity. Después de todo, necesitas desplegar tu instancia de nuestro ejemplo de contrato inteligente para crear tu acuñador de ChatGPT.
Para este tutorial, utilizaremos el testnet Goerli. Por lo tanto, asegúrate de conectar tu cartera MetaMask a esta testnet de Ethereum y equipar su billetera con algunos Goerli ETH. Un faucet confiable de Goerli hará el trabajo.
Como bonus, también te mostraremos cómo utilizar la API de NFT de Moralis para buscar y ver los detalles de los NFT acuñados con tu dapp de Web3 con ChatGPT. Debajo del tutorial, también puedes encontrar más detalles sobre ChatGPT y sus casos de uso.
Tutorial: Construye tu dapp acuñador de NFT del ChatGPT de Web3
Si fueras a construir su dapp acuñador del ChatGPT de Web3 desde cero, necesitas completar los siguientes pasos:
- Crea una aplicación NodeJS y un servidor Express.
- Instala todas las dependencias necesarias para tu backend: CORS, dotenv, Express, Moralis y OpenAI.
- Crea un script "index.js" adecuado que cubra las funcionalidades del backend de la incorporación de ChatGPT y la API IPFS de Moralis, como describimos arriba.
- Crea una aplicación frontend de NextJS.
- Instala todas las dependencias requeridas para el frontend: Moralis, wagmi, NextAuth, etc.
- Codea varios scripts ".jsx" y ".js".
- Escribe y despliega un contrato inteligente que acuñe un chat cuando presiones el botón "Mint NFT" de la captura de pantalla anterior.
Sin embargo, en lugar de realizar todos estos pasos, simplemente puedes acceder a nuestro repositorio de GitHub "moralis-chatgpt" y clonar todo el código. Luego que lo hagas y abras el proyecto en Visual Studio Code (VSC), verá tres carpetas: "backend", "hardhat" y "nextjs_moralis_auth":
Nota: De aquí en adelante, procederemos como si hubieras clonado nuestro proyecto y realizaremos un recorrido por el código de los scripts más importantes.
Acuñación de contratos inteligentes de NFT de ChatGPT
Si estás familiarizado con Hardhat, puedes seguir el mismo camino que nosotros y utilizar Hardhat para crear tu instancia de nuestro contrato inteligente. Sin embargo, también puedes utilizar Remix IDE con tu navegador favorito para compilar y desplegar el contrato inteligente requerido. De cualquier modo, utiliza nuestro template de contrato inteligente ("MessageNFT.sol") ubicado dentro de la carpeta "hardhat/contracts":
Al igual que todos los contratos inteligentes de Solidity, "MessageNFT.sol" comienza con una licencia MIT y una línea pragma:
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.17;
Luego, importa tres contratos inteligentes verificados de OpenZeppelin para heredar el ERC-721 estándar, la capacidad de contar NFTs y asignar los IDs de NFT y la funcionalidad que permite sólo al dueño del contrato inteligente para acuñar NFTs:
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/utils/Counters.sol";
import "@openzeppelin/contracts/access/Ownable.sol";
Después de las importaciones, el script define el nombre del contrato y el tipo de contrato (ERC-721). Dentro del contrato, el "constructor" se ejecuta cuando se despliega el contrato, y la función "mintNFT" se ejecuta siempre que se invoque a este contrato para acuñar a un 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;
}
}
Al observar los parámetros de la función "mint", puedes ver que toma la dirección de la cartera del destinatario y el token URI. El primero tomará la dirección de la cartera conectada, y el último buscará el URI de la API del IPFS que retorna después de cargar un chat en cuestión.
Nota: al implementar el contrato inteligente anterior, asegúrate de centrarte en la red de prueba Goerli.
Backend del Web3 con el Dapp ChatGPT Minter##
Dentro de la carpeta "backend", puedes encontrar los archivos "index.js", "package-lock.json" y "package.json". Puedes abrir el último archivo para ver qué dependencias son necesarias para el proyecto. Además de instalar las dependencias requeridas, también necesitarás crear un archivo ".env". Dentro de ese archivo, deberás almacenar tu clave API de Moralis Web3 en la variable "MORALIS_API_KEY".
Para obtener tu clave API, necesitarás una cuenta de Moralis. Entonces, en caso de que aún no lo hayas hecho, crea tu cuenta gratuita de Moralis ahora. Luego, inicia sesión y copia tu clave API desde el área de administración:
Con tu clave API Web3 en su lugar, podrás utilizar el script "index.js" del backend. Después de todo, este es el script que incluye los fragmentos de código descritos en la introducción. Dicho esto, veamos más de cerca a "index.js".
En la parte superior, el script importa todas las dependencias relevantes utilizando CORS y Express e importa tu clave 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;
Al observar las líneas de código de arriba, puedes ver que tu backend se ejecutará en localhost 5001. Después de importar Moralis y tu clave API, el siguiente fragmento de código (que puedes encontrar al final de "index.js") inicializa Moralis:
Moralis.start({
apiKey: MORALIS_API_KEY,
}).then(() => {
app.listen(port, () => {
console.log(`Listening for API Calls`);
});
});
El script también importa las líneas de configuración de la API de OpenAI, proporcionadas por la documentación de OpenAI:
const { Configuration, OpenAIApi } = require("openai");
const configuration = new Configuration({
apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);
Este también es todo el código para hacer que los fragmentos del código de la introducción, funcionen correctamente. Entonces, veamos más de cerca estos dos endpoints del servidor Express.
Endpoint del servidor raíz de Express
Al construir una dapp de Web3 con ChatGPT que acuñe tus chats en NFTs, es necesario que tu backend cubra la funcionalidad de ChatGPT. Aquí es donde entra la API de OpenAI:
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(`Something went wrong ${e}`);
return res.status(400).json();
}
});
Las líneas de arriba recuperan el mensaje del campo de entrada en el frontend, lo pasan al ChatGPT y devuelven la respuesta del ChatGPT.
El endpoint del servidor Express "/uploadtoipfs"
Cuando creas NFT, no se almacenan los metadatos del NFT y los archivos que representan el NFT en el blockchain. En su lugar, utilizan soluciones de almacenamiento en la nube que proporcionan URIs, los cuales son almacenados en el blockchain. Por supuesto, podrías utilizar cualquier solución de almacenamiento centralizado. Sin embargo, si quieres tomar un enfoque descentralizado, que es lo preferible, debes utilizar una de las principales soluciones de almacenamiento de Web3. IPFS es, posiblemente, la mejor opción cuando deseas hacer públicos los archivos. Por esto, nuestro script "index.js" del backend utiliza IPFS a través del API IPFS de Moralis. Estas son las líneas de código que cubren el endpoint "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(`Something went wrong ${e}`);
return res.status(400).json();
}
});
Arriba, puedes ver el método "Moralis.EvmApi.ipfs.uploadFolder" que utiliza "conversation.json" como una ruta IPFS y la conversación del ChatGPT como contenido correspondiente.
En este punto, deberías haber desplegado tu instancia del contrato inteligente "MessageNFT.sol" y tener funcionando el backend presentado anteriormente. Por lo tanto, es hora de abordar la pieza final del rompecabezas del "Web3 ChatGPT dapp": el frontend.
Frontend del Web3 con el Dapp ChatGPT Minter
Dentro del script "_app.jsx", ubicado en la carpeta "nextjs_moralis_auth/pages", puedes ver cómo envolvemos "WagmiConfig" y "SessionProvider" alrededor de nuestra aplicación. Esto te permite utilizar la autenticación en toda la aplicación:
function MyApp({ Component, pageProps }) {
return (
<WagmiConfig client={client}>
<SessionProvider session={pageProps.session} refetchInterval={0}>
<Component {...pageProps} />
</SessionProvider>
</WagmiConfig>
);
}
Por supuesto, para que lo anterior funcione, necesitas importar los proveedores adecuados en la parte superior.
Dentro del script "signin.jsx", nuestro código renderiza el encabezado y el botón "Connect". A través de "handleAuth", puedes conectar o desconectar MetaMask. Una vez conectado, el frontend de la aplicación Web3 ChatGPT utiliza la página "user.jsx", que contiene un encabezado diferente. El script "user.js" también contiene el componente "loggedIn.js", que conecta los datos entre el backend y el frontend. En la parte inferior de este componente, el script "loggedIn.js" renderiza tu 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="Type your message..."
onChange={getMessage}
/>
<button onClick={sendMessage}>Send</button>
</section>
</section>
{showMintBtn && (
<button className={styles.mint_btn} onClick={mint}>
MINT NFT
</button>
)}
</section>
);
}
Nota: Para obtener una explicación más detallada del código del script "loggedIn.js", utiliza el video del principio de este artículo, comenzando en 5:53. Aquí es también donde puedes aprender cómo usamos ChatGPT para generar el código de estilo para nuestro frontend.
Construcción final - Demostración del minter de ChatGPT NFT
Aquí está cómo se ve nuestra aplicación de minter de NFT de ChatGPT antes de conectarlo a MetaMask:
Una vez que hagamos clic en el botón "Authenticate via MetaMask", MetaMask se abre y nos pide que firmemos el mensaje de autenticación.
Después de firmar la solicitud de la firma, nuestra aplicación muestra un cuadro de ChatGPT y cambia el encabezado:
Una vez que escribimos un mensaje en el campo de entrada y hacemos clic en "Send", ChatGPT responde. Esto también activa el botón "Mint NFT" en la parte inferior:
Si decidimos convertir nuestro chat en un NFT, haz clic en el botón "Mint NFT", y luego debemos confirmar la transacción de la acuñación con MetaMask:
Tan pronto como se complete nuestra transacción, podemos ver nuestro nuevo NFT de ChatGPT en Etherscan u OpenSea. Por supuesto, también podemos usar la página de referencia de la API "Get NFTs by contract". En ese caso, solo necesitamos pegar la dirección de nuestro contrato inteligente y seleccionar la cadena Goerli:
A medida que nos desplazamos hacia abajo en la página de referencia de la API "Get NFTs by contract", veremos la respuesta, que contiene los detalles sobre nuestro NFT:
¿Qué es ChatGPT?
ChatGPT es un chatbot avanzado desarrollado por OpenAI sobre su familia GPT-3. Sin embargo, quién mejor para explicar qué es ChatGPT sino el mismo ChatGPT:
Toma en cuenta que ChatGPT está en sus primeras etapas y tiene algunas limitaciones. Por ejemplo, ocasionalmente proporciona información incorrecta. Puede proporcionar contenido dañino o sesgado y tiene conocimiento limitado de los acontecimientos actuales. Por eso, ChatGPT debe ser utilizado con precaución y sus respuestas deben ser verificadas adecuadamente.
Aún así, el poder de esta herramienta es bastante impresionante. Después de todo, habla la mayoría de los idiomas naturales (aunque es más preciso en inglés) así como todos los principales lenguajes de programación informáticos. Veamos algunos casos de uso típicos de ChatGPT.
Casos de uso de Web3 ChatGPT
En muchos aspectos, esta herramienta avanzada de IA está en camino de convertirse en lo que la calculadora es para las matemáticas: una herramienta poderosa. Aquí hay algunos ejemplos comunes en qué los usuarios de todo el mundo están utilizando ChatGPT:
- Desarrollo/programación para generar códigos o templates de código Web2 y Web3 y encontrar/arreglar errores de código
- Desarrollo de contenido
- Ventas y marketing
- Contabilidad y análisis de datos
Estos son solo algunos de los casos de uso más comunes de ChatGPT. Por supuesto, también podemos utilizar la API de OpenAI e implementar el poder de ChatGPT en todo tipo de dapps (como hicimos en el ejemplo de hoy). Además, dado que ChatGPT ya ha demostrado ser una fuente altamente confiable de información con capacidades de síntesis avanzadas, expertos como psicólogos y psiquiatras, han informado que lo utilizan como herramienta de asistencia.
Resumen de Cómo Construir una Dapp Web3 con ChatGPT
En el artículo de hoy, tuviste la oportunidad de usar nuestra guía y el proyecto de ejemplo para crear tu propia instancia de nuestra dapp Web3 con ChatGPT de la acuñación de NFTs. Usando nuestros scripts, pudiste tener tu contrato inteligente, backend y frontend listos en minutos. Básicamente, sólo tuviste que implementar tu instancia de nuestro contrato inteligente con Hardhat o Remix, instalar las dependencias necesarias para el frontend y el backend, obtener tu clave API de Web3 de Moralis y guardarla en un archivo ".env", y lanzar tus aplicaciones frontend y backend. Finalmente, también tuviste la oportunidad de ver la demo de nuestra ejemplo de dapp y ver el poder de uno de los endpoints de la API de NFT de Moralis. No obstante, también explicamos qué es ChatGPT y sus casos de uso comunes.
De cara al futuro, te animamos a usar este artículo como generador de ideas y como ejemplo de pruebas de conceptos para construir dapps únicas que incorporen al ChatGPT. Si necesitas ampliar tus conocimientos y habilidades en el desarrollo de Web3, asegúrate de usar Moralis docs, nuestros videos de desarrollo de blockchain y nuestro blog de cryptos. Algunos de los temas más recientes giran en torno a las herramientas de desarrollo de Ethereum, el uso de IPFS con Ethereum, el desarrollo de aplicaciones blockchain, la seguridad de los contratos inteligentes, el desarrollo de aplicaciones del blockchain Solana, el faucet de prueba de la red Aptos, y mucho más. Además, si estás interesado en obtener una certificación en blockchain, la Academia Moralis es el lugar indicado para ti. Una vez inscrito, asegúrate de primero poner en orden tus fundamentos de blockchain y Bitcoin.
Discussion (0)