Crea un NFT con IA y despliega el contrato inteligente en una aplicación de Front End

Este artículo es una traducción de BuildBear Team, hecha por Freddy Serrano. 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.

Aprende a desplegar un contrato inteligente de NFT, crear NFT con inteligencia artificial (IA) y a construir una aplicación de Front End completa.

Paso 1: Desarrollar el contrato inteligente

Abajo está el código para nuestro contrato inteligente. Puedes obtenerlo aquí
NFT.sol

Vamos a revisar nuestro contrato inteligente rápidamente 🏃

• Hemos usado los contratos estándar proporcionados por openzeppelin; una vez te vuelvas desarrollador de tiempo completo de contratos inteligentes, vas a darte cuenta que los contratos de Open Zeppelin son una agradable sorpresa. Para usar estos contratos, necesitamos instalarlos localmente en nuestro proyecto.
• Luego, definimos nuestro contrato NFT, el cual es heredado del contrato openzeppelin’s ERC721URIStorage*.*
• Las siguientes dos líneas son usadas para llevar registro de la cantidad de tokens acuñados.
• Después, la función de constructor llama al openzeppelin’s ERC721 el cual toma dos argumentos, por ejemplo, el nombre y símbolo . Eres libre de elegir tu propio nombre y símbolo.
• Luego tenemos a nuestra amiga, la función acuñar. Esta requiere dos parámetros. Primero, la dirección a la cual el NFT se va a emitir; segundo, el tokenURI. Vamos a explicar la parte del tokenURI en un momento.

Paso 2: Preparando la infraestructura necesaria para desplegar y probar nuestro contrato inteligente

Ahora, para las prácticas “set”, se espera que despliegues el contrato de arriba en un nodo blockchain local ( por ejemplo, Hardhat or Truffle) o en una testnet pública como Goreli Testnet. Mientras eso esté bien, excepto por los siguientes puntos problemáticos:

• Relacionado a Goreli Testnet:
• No es una red principal 😞, lo cual significa que no tiene el mismo estado de tokens o para ese tema lo más importante
• Faucet: ¿Necesito seguir explicando?😤 En relación al nodo local:
• Fork de red principal: Verificado✅
• Faucet: Verificado✅
• Depurar mi contrato con facilidad: Tristemente no es fácil (sí, puedo usar algunos console.logs, pero en su mayoría es eso). 😢
• Compartir el estado de mi transacción con mis amigos o mentores para recibir alguna retroalimentación: ¡Pues esto se llama localhost por una razón! Así que olvídalo. 😭

2.1 Ahí es donde BuildBear entra. Combina los beneficios de ambos mundos para ti:

1. Fork de red principal: Verificado ✅
2. Faucet: Verificado ✅
3. Depurar mi transacción: Verificado ✅ [viene con un rastreador de transacciones incorporado]
4. Compartir el estado de mi transacción con mis amigos o mentores para recibir alguna retroalimentación: Verificado. Es un testnet privado para un equipo, por lo tanto, tengo la habilidad de invitar a mis amigos o mentores a mi propio testnet y revisar mi transacción.

Échale un vistazo: Where Localhost Fails y Win Web3 Hackathons, using BuildBear Testnet’s analytics
2.2. Visita la App de BuildBear. Una vez hayas iniciado sesión con tu Github o cuenta de Google, vas a ver una página similar a la imagen de abajo:

2.3.Crea tu nodo privado haciendo un fork de la red principal de Ethereum:

2.4. Agrega tu testnet privado a tu billetera de MetaMask, usando el botón de “Agregar a MetaMask”:

2.5. Acuña tus tokens ETH desde el Faucet (usando el URL del Faucet):

2.5.1. Acuñando los tokens

Paso 3: Desplegando el contrato inteligente

3.1 Navega en la página web Remix Online IDE y acepta los términos y condiciones.

3.2. Crea un nuevo contrato y pega el código de contrato inteligente, disponible acá 👉GitHub Link

3.3 Compila el contrato inteligente con la versión 0.8.1 de Solidity, usando el siguiente icono y detalles:

Por favor, ten presente que el ABI del contrato está disponible solo una vez que el contrato esté compilado. Puedes ver en la imagen anterior el ABI que se puede copiar. Ten esto a la mano, lo necesitaremos momentáneamente.

3.4. Selecciona la pestaña “Deploy and Run Transactions” y despliega el contrato de la siguiente manera:

• Asegurate que actualices el ambiente para “Injected provider MetaMask” | CRITICAL,

3.5. Haz click en el botón “transact” para desplegar el contrato en tu red de nodo privado; una vez hecho, vas a ver algo parecido a lo siguiente:

3.6. Copia la dirección del contrato y visita el explorador de blockchain de tu red de prueba privada (link disponible en la página del dashboard home.builder.io) y ubica tu contrato.

3.6.1. Enviando el ABI del contrato para facilitar la interacción

Puedes visitar la página de tu contrato en BuildBear’s Blockchain Explorer y luego visitar la pestaña del contrato. Deberías ver algo similar a lo siguiente:

Sube el ABI que copiamos del paso 3.3; una vez hecho, deberías ver los botones de leer y escribir contrato, disponibles en la página del contrato:

Paso 4: Next.js App

Instalación y configuración:

La forma más fácil de crear una nueva aplicación Next.js es utilizando la herramienta CLI create-next-app. La puedes instalar via npm:

$ npm install create-next-app

Una vez instalada, puedes inicializar una nueva aplicación Next.js llamando la herramienta y suministrando un nombre para tu proyecto:

$ npx create-next-app nft-app

Nota: Si no tienes todavía create-next-app instalado - npx te pedirá que lo instales automáticamente.

Una vez la herramienta haya terminado de inicializar un proyecto esqueleto , sigamos al directorio y echemos un vistazo adentro:

El package.json estándar, package-lock.json y node_modules están ahí, sin embargo, ¡también tenemos los directorios /pages, /public y /styles, como también el archivo next.config.js!

Veamos qué son estos archivos.

Características de Next.js

Next.js es, en última instancia, una extensión de React, e introduce un par de nuevas cosas que hacen el desarrollo de la aplicación React más rápido y simple, empezando con Next.js pages.

Páginas

Next.js hace que crear aplicaciones multipáginas con React sea ridículamente fácil con su enrutador por defecto file-system-based router. No necesitas instalar ningún paquete adicional, como react-router-dom , ni configurar un enrutador.

Todos los proyectos de Next.js incluyen un directorio de /pages predeterminado, el cual es el hogar de todos los componentes de React que estarás usando. Por cada componente, un enrutador va a servir a una página basada en ese componente.

La configuración del proyecto Next.js está lista.

Paso 5: Almacenamiento del NFT

Ya que almacenar datos en el Blockchain es caro, usaremos IPFS para subir los datos del NFT, para esto vamos a usar el servicio de NFT.storage

¿Qué es almacenamiento de los NFT?

NFT.Storage es un servicio de almacenamiento que te permite cargar datos off-chain de los NFT (como metadatos, imágenes, y otros activos) gratis, con la meta de almacenar todos los datos de los NFT como bien público.

Los datos son almacenados de forma perpetua en la red de almacenamiento descentralizado Filecoin y están disponibles a través de IPFS mediante su identificador de contenido único.

• Obtén un token API en API Keys después de haber creado una cuenta, puedes usar nuestra API KEY para obtenerlo aquí API Key
• Instala el paquete con npm install nft.storage
• Crea un componente StoreMetadata.jsx y añade este código al archivo

Este es el componente principal que prepara los metadatos de los inputs que le damos y luego los carga al IPFS por medio del cliente JS creado.

Puedes personalizar los metadatos de acuerdo a los estándares para el tipo de Token. Por ejemplo, en el archivo de metadatos puedes editar qué datos quieres seleccionar o agregar.

• En el archivo principal index.jsl, declara estados para los inputs (en nuestro caso, nombre, descripción y archivo de la imagen)

• Luego, la entrada se puede tomar, de esta manera, del código HTML. No te preocupes por la interfaz de usuario, copia el código de aquí Home.module.css y pégalo en Home.module.css

Paso 6: Generación de imagen de AI

Vamos a ver cómo se puede integrar el DALL-E 2 API en nuestra aplicación.

Primero que nada, necesitamos que vayas al sitio web OpenAI. Necesitas registrarte para generar una clave API. También recibirás 18$ en tu cuenta que podrás usar.

Elige que estas creando una aplicación mientras te unes.

Entonces, después de haber creado tu cuenta, ve a la sección “View API Keys”, donde puedes crear tu clave API única. Revisa la imagen de abajo para guiarte.

Ahora en la siguiente App, crea un archivo .env. Esto para almacenar tu clave API.

Agrega tu clave API ahí.

NEXT_PUBLIC_AI_API_KEY= Your Api key here

Ahora que la clave API ha sido agregada, necesitamos importar un par de cosas en nuestro archivo App.js o App.jsx. Esto incluye la Configuración y OpenAIApi de openaiSDK. Pero primero tenemos que instalar el openaiSDK en la aplicación de React.

Para instalarlo, solamente escribe el siguiente comando:

npm install openai

Puede tomarte un tiempo en instalarlo. Luego, importa ambas cosas que mencionamos anteriormente de esta manera:

import { Configuration, OpenAIApi } from "openai";

Tenemos que crear una configuración variable, la cual tome la clave API del archivo .env

const configuration = new Configuration({ apiKey: import.meta.env.VITE_Open_AI_Key, });

• Ahora, necesitamos pasar esta instancia de configuración a OpenAIApi y crear una nueva instancia para OpenAIApi.
  const openai = new OpenAIApi(configuration);

• Ahora, en la función fetchimage, tenemos que invocar a la instancia OpenAIApi que creamos anteriormente.

• La interfaz de usuario se verá algo así:

Paso 7: Conectando nuestra aplicación con el blockchain

Necesitamos algo que conecte a nuestro cliente a uno de estos nodos de blockchain para que pueda empezar a usar el poder completo del blockchain, eso es exactamente lo que es ether.js. Es una biblioteca escrita en javascript que permite crear cualquier aplicación de javascript que hable al blockchain para que, podamos usar y crear muchas aplicaciones que van a ser basadas en aplicaciones descentralizadas (daps). Es el puente que, esencialmente, toma a tu cliente y le permite conectarse con el blockchain.

Módulos Ether.js

• Ether.js consiste en algunos módulos importantes que pueden ser usados para interactuar con nodos de blockchain fácilmente y obtener datos de transacción según sea necesario. Para empezar con estos módulos de Ether.js, veamos una descripción general de los módulos Ether.js.
• Ethers.Provider: En este módulo te permite inicializar una conexión con el blockchain de Ethereum, y te provee las funciones para emitir consultas y enviar transacciones firmadas. También es posible gestionar el estado del blockchain a través de este módulo.
• Ethers.Contract: En este módulo, puedes implementar e interactuar con los contratos inteligentes, durante el despliegue del contrato inteligente y, para hacerla exitosa, es una parte del módulo Ethers.Contract. También ofrece paquetes únicos de funciones que le permiten al desarrollador “escuchar” eventos de contratos inteligentes y después de escucharlos, también puede obtener información sobre ellos.
• Ethers.Utils: Este módulo te deja procesar los datos de entrada y formato del usuario de acuerdo a tus requerimientos. Ether.Utils facilita la construcción de aplicaciones descentralizadas.
• Ethers.Wallet: Como el nombre sugiere, provee una manera de conectar con cualquier dirección existente de Ethereum a una billetera adecuada. También tiene características importantes como: permitirte crear nuevas billeteras y también firmar transacciones.
• Instalación npm install --save ethers
• Creemos una función Connectwallet que conecta nuestra aplicación a la billetera Metamask. Esta verificará si la billetera está instalada y , si es así, MetaMask va a aparecer para conectarse.

• Crea una función que llame al almacenamiento de los metadatos del componente y que obtenga el enlace del IPFS del NFT, luego se invoca la función de acuñar del contrato inteligente con el enlace del Ipfs del NFT y la dirección del usuario.

• Esta función puede ser llamada con un botón cuando el input ya haya sido establecido.

Ahora probemos la aplicación

Conecta la billetera, entra el nombre, descripción, generar la imagen y luego presiona el botón de acuñar y firma la transacción. Una vez sea exitosa recibirás una alerta.

Ve al explorador de bloques y mira los detalles de la transacción

¡¡¡Hemos construido satisfactoriamente el NFT Mint!!! 🎉🎉🎉

Comparte tu proyecto en Twitter y LinkedIn y taggea a BuildBear

Si valoras lo que estamos haciendo, por favor siguenos en Twitter, LinkedIn y únete al grupo de Telegram si no lo has hecho todavía.
Y por favor, danos un aplauso 👏 si te gusta nuestro trabajo.
Autores: Chandan

Por cierto, si conoces a alguien que esté interesado en trabajar con BuildBear, ¡echa un vistazo aquí!

Codigo Repo: https://github.com/BuildBearLabs/Tutorials/tree/main/Ai-mint