Gerar um NFT com IA e Implantar o contrato inteligente NFT, e uma aplicação Front End

Aprenda a Implantar um contrato inteligente NFT, Gerar NFT com AI e Construir um aplicativo front end completo

Etapa 1: Desenvolvimento do contrato inteligente

Abaixo está o código para nosso contrato inteligente. Você pode obtê-lo a partir daqui NFT.sol

Vamos analisar nosso contrato inteligente muito rapidamente 🏃

• Utilizamos os contratos padrão que nos foram fornecidos pela openzeppelin; uma vez que você tenha um desenvolvimento em tempo integral de contratos inteligentes, você perceberá que os contratos do OpenZeppelin são contratos enviados por Deus. Para utilizar seus contratos, precisamos instalá-los localmente em nosso projeto.
• Em seguida, definimos nosso contrato NFT, que herda do contrato ERC721URIStorage da openzeppelin*.*
• As duas linhas seguintes são usadas para manter um registro do número total de tokens cunhados.
• Então, a função do construtor chama o ERC721 do openzeppelin que leva dois argumentos, ou seja, o nome e símbolo*.* Você é livre para escolher seu próprio nome e símbolo.
• Depois temos nosso amigo, a função de cunhagem. Ela aceita 2 parâmetros. Primeiro, o endereço para o qual o NFT deve ser emitido; segundo, o tokenURI. Explicaremos a parte do tokenURI daqui a pouco.

Etapa 2: Levantando a infraestrutura necessária para implantar e testar nosso contrato inteligente

Agora, de acordo com as práticas do "conjunto", espera-se que você implante o contrato acima em um nó da blockchain local (por exemplo: Hardhat ou Truffle) ou em um testnet público como Goreli Testnet. Embora isso seja aceitável, exceto os seguintes problemas:

• Em relação ao Goreli Testnet:
• Não é uma mainnet 😞, o que significa que não tem o mesmo estado dos tokens ou, para isso, o mais importante
• Faucet(Torneira): Preciso explicar mais? 😤

Em relação ao nó local:

• Mainnet Fork: Verificado ✅
• Faucet: Verificado ✅
• Depurar meu contrato com facilidade: Infelizmente não com facilidade (sim, eu poderia usar alguns consoles.logs, mas em grande parte é sobre isso). 😢
• Compartilhar o estado da minha transação com meus amigos/mentores para obter algum feedback: Bem, é chamado de localhost por uma razão! Por isso, esqueça isso. 😭

2.1 É aí que entra o BuildBear. É gentil - casa com os benefícios de ambos os mundos para você:

• Mainnet fork : Checado ✅
• Faucet: Checado ✅
• Depuração da minha transação: Checado ✅ [vem com um rastreador de transações embutido].
• Compartilhar o estado da minha transação com meus amigos/mentores para obter algum feedback: Checado. É um testnet particular para uma equipe, portanto, tenho a capacidade de convidar meus amigos/mentores para meu próprio testnet e rever minha transação.

Dê uma olhada por aqui: [Onde o Localhost Falha](https://medium.com/p/492f1038883d)** e *Ganhe Hackathons Web3 , usando a análise do BuildBear Testnet

2.2. Visite o aplicativo BuildBear. Uma vez conectado com sua conta Github ou Google, você verá uma página similar à imagem adicionada abaixo:

2.3. Crie seu nó privado fazendo o fork a partir da rede principal Ethereum:

2.4. Adicione seu testnet privado à sua carteira MetaMask usando o botão "Adicionar ao Metamask":

2.5. Cunhe seus tokens de Eth do Faucet (usando a URL do Faucet):

2.5.1. Cunhagem dos Tokens

Passo 3: Implantação do contrato inteligente

3.1. Navegue até o site da Remix Online IDE e aceite os termos e condições.

3.2. Criar um novo contrato e cole o Código do Contrato Inteligente, disponível aqui 👉 GitHub Link

3.3. Compile o Smart Contract, com Solidity Version 0.8.1, usando o seguinte ícone e detalhes:

Observe que a ABI do Contrato só está disponível uma vez que o Contrato é compilado. Você pode ver na imagem acima a ABI que pode ser copiada. Por favor, mantenha isto à mão. Vamos precisar dela momentaneamente.

3.4. Selecione a aba "Deploy and Run Transactions": e implante o contrato da seguinte forma:

• Certifique-se de atualizar o Ambiente para "Injected provider - MetaMask" | CRITICAL,

3.5. Clique no botão "transacionar" para implantar o contrato em sua rede de nós privados; uma vez feito, você verá algo semelhante ao que se segue:

3.6. Copie o endereço do Contrato e visite o Blockchain Explorer para seu testnet pessoal que você fez o fork (link disponível na página do painel em home.buildbear.io) e localize seu contrato.

3.6.1. Envio da ABI do contrato para facilitar a interação

Você pode visitar sua página de contrato no BuildBear's Blockchain Explorer e depois visitar a aba Contrato. Você deve ver algo semelhante ao que se segue:

Envie a ABI que copiamos do passo 3.3; uma vez feito, você deve ver os botões Ler e Escrever Contrato disponibilizados a você na Página de Contrato:

>>>>> gd2md-html alert: inline image link here (to images/image11.png). Store image on your image server and adjust path/filename/extension if necessary.
(Back to top)(Next alert)
>>>>>

WOOT WOOT 🎉 🎉

Etapa 4: Next.js App

Instalação e configuração

A maneira mais fácil de criar uma nova aplicação Next.js é usando a ferramenta CLI create-next-app. Você pode instalá-la via npm:

$ npm install create-next-app

Uma vez instalado, você pode inicializar uma nova aplicação Next.js chamando a ferramenta e fornecendo um nome para seu projeto:

$ npx create-next-app nft-app

Nota: Se você ainda não tiver o create-next-app instalado - o npx o solicitará para instalá-lo automaticamente.

Uma vez que a ferramenta tenha terminado de inicializar um projeto de esqueleto, vamos passar para o diretório e dar uma olhada em seu interior:

O pacote package.json, package-lock.json e node_modules estão lá, entretanto, também temos os diretórios /pages, /public e /styles, bem como um arquivo next.config.js!

Vamos dar uma olhada no que são esses.

Características do Next.js

Next.js é no final das contas uma extensão do React, e introduz algumas coisas novas que tornam o desenvolvimento de aplicações React mais simples e rápido - começando com as páginas Next.js.

Páginas

Next.js torna a criação de aplicações de várias páginas com React ridiculamente fácil com seu roteador padrão baseado no sistema de arquivos. Você não precisa instalar nenhum pacote adicional, como o Reactor-router-dom, ou configurar um roteador em absoluto.

Todos os projetos Next.js incluem um diretório padrão /pages, que é o lar de todos os componentes do React que você estará usando. Para cada componente - um roteador servirá uma página com base nesse componente.

A configuração do projeto Next.js está feita

Etapa 5: Armazenamento NFT

Como o armazenamento de dados em Blockchain é caro, estaremos usando IPFS para carregar os dados NFT, para isso vamos usar o serviço NFT.storage

O que é armazenamento NFT?

NFT.Storage é um serviço de armazenamento que lhe permite carregar dados NFT off-chain (como metadados, imagens e outros ativos) gratuitamente, com o objetivo de armazenar todos os dados NFT como um bem público.

Os dados são armazenados perpetuamente na rede de armazenamento descentralizado Filecoin e disponibilizados via IPFS através de seu ID de conteúdo único.

• Obtenha um token API das API Keys após criar uma conta, você pode usar nossa API KEY para obtê-lo aqui API KEY
• Instalar o pacote com npm install nft.storage
• Crie um Component StoreMetadata.jsx e adicione este código ao arquivo

Este é o principal componente que prepara os metadados a partir das entradas que fornecemos e depois os carrega para o IPFS através do cliente JS criado.


Você pode personalizar os metadados de acordo com as normas para o tipo de Token. Por exemplo, arquivo de Metadados você pode editar quais dados você deseja adicionar ou selecionar.

• No arquivo principal do index.js, os estados do conjunto de entradas (em nosso nome do caso, descrição e arquivo de imagem)

• Então a entrada pode ser obtida desta forma, a partir deste código Html, não se preocupe com a IU copie o código a partir daqui Home.module.css, e cole-o no Home.module.css

Passo 6: Geração de imagem AI

Vamos ver como podemos integrar o DALL-E 2 API em nossa aplicação.

Antes de mais nada, precisamos ir ao site do OpenAI. Você precisa se inscrever para gerar uma chave API. Você também receberá $18 em sua conta que você pode usar.

Escolha que você está criando um aplicativo enquanto você se inscreve.

Assim, depois de criar sua conta, vá para a seção View API Keys, onde você pode criar sua chave API exclusiva. Confira a imagem abaixo para referência.

Agora em seu próximo aplicativo, crie um arquivo .env. Isto é para armazenar a chave API.

Adicione ali sua chave API.

NEXT_PUBLIC_AI_API_KEY= Sua chave Api aqui

Agora que a chave API é adicionada, precisamos importar algumas coisas em nosso arquivo App.js ou App.jsx. Isso inclue a Configuração e o OpenAIApi do openai SDK. Mas primeiro, precisamos instalar o openAIApi SDK no aplicativo React.

Para instalá-lo, basta digitar o comando abaixo:

npm install openai

A instalação pode levar algum tempo. Então, importe assim ambas as coisas que mencionamos anteriormente:

import { Configuration, OpenAIApi } from "openai";

Precisamos criar uma variável de configuração, que pegará a chave API do arquivo .env.

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

• Agora, precisamos passar esta instância de configuração para o OpenAIApi, e criar uma nova instância para o OpenAIApi.

const openai = new OpenAIApi(configuration);

Agora, na função fetchimage, precisamos chamar a instância OpenAIApi que criamos antes.

A UI terá agora um aspecto semelhante a este:

Passo 7: Conectando nossa aplicação com a blockchain

precisamos de algo que conecte nosso cliente a um desses nós da blockchain para que eles possam começar a usar toda a potência da blockchain, é exatamente isso que ether.js uma biblioteca escrita em javascript que permite como criar qualquer aplicação javascript que fale com a blockchain para que possamos usar e criar muitas aplicações que serão baseadas na aplicação descentralizada (daps). É a ponte que essencialmente leva seu cliente e permite que ele se conecte à blockchain.

Módulos Ether.js

• Ether.js consiste em alguns módulos importantes que podem ser usados para interagir facilmente com nós da blockchain, e obter os dados da transação conforme necessário. Para começar com os módulos do Ehter.js, vamos ter uma visão geral de todos os módulos do Ether.js.
• Ethers.Provider: Neste módulo, ele permite inicializar uma conexão com a blockchain Ethereum, e fornece os recursos para emitir consultas e enviar transações assinadas. O gerenciamento do estado da blockchain também é possível através deste módulo.
• Ethers.Contract: Neste módulo, você pode implantar e interagir com contratos inteligentes, durante a parte de implantação de contratos inteligentes e para torná-la bem sucedida é parte do módulo Ethers.Contract. Ele também oferece alguns pacotes únicos de funções que permitem ao desenvolvedor "ouvir" os eventos dos contratos inteligentes e depois de ouvir os contratos você também pode obter informações sobre eles.
• Ethers.Utils: Este módulo permite processar as entradas de dados do usuário e formatá-las de acordo com suas necessidades. O Ether.utils facilita a construção de aplicações descentralizadas.
• Ether.Wallet: Como o nome sugere, ele fornece uma maneira de se conectar a qualquer endereço Ethereum coexistente a uma carteira apropriada. Ele também tem características importantes como permite criar novas carteiras e também fazer transações de sinais também.
• Instalando

npm install --save ethers

• Vamos criar uma função Connectwallet que conecta nossa aplicação Carteira Metmask. Isto verifica se a carteira está instalada se assim for, então a MetaMask irá aparecer para conectar.

• Crie uma função que chama metadados do componente Store e obtenha o link Ipfs do NFT e então a função mint do contrato inteligente é chamada com o link Ipfs do NFT e endereço do usuário

• Esta função pode ser chamada com um botão quando as entradas já tiverem sido definidas.

Vamos testar o aplicativo

Conecte a carteira. digite nome, descrição, gere a imagem, pressione o botão de cunhagem e assine a transação. você recebeu um alerta de sucesso.

Vá até o explorador de blocos e veja os detalhes da Transação

Construímos com sucesso a cunhagem de NFT!!! 🎉🎉🎉

Compartilhe seu projeto no Twitter e no LinkedIn com a tag BuildBear

Se você apreciar o que estamos fazendo, por favor, siga-nos no Twitter, e no LinkedIn e junte-se ao grupo do Telegram se você ainda não o fez.

E por favor, nos dê um 👏 se você gosta de nosso trabalho.

Artigo escrito por Chanda . A versão original pode ser encontrada aqui. Traduzido e adaptado por Dimitris Calixto.