Crie facilmente um aplicativo NFT usando o novo Infura SDK para NFT TypeScript

ÍNDICE

1. O que é o Infura SDK para NFT?
2. Construção e implantação do NFT ERC721
3. Infura
4. Configurar um projeto IPFS no Infura Dashboard
   1. Configuração e instalação do projeto
   2. Instale as bibliotecas do projeto
5. Configurar autenticação Infura
6. Criar metadados do token
7. Crie os metadados do contrato
8. Crie um novo contrato e cunhe um NFT
9. Verifique o contrato na conta e no Etherscan da Goerli
10. Importar token na MetaMask
11. Verifique NFT cunhado no OpenSea
12. Conclusão

Se você conhece TypeScript, é fácil adicionar a capacidade de criar, cunhar e gerenciar tokens não fungíveis (NFTs) ao seu aplicativo. O SDK NFT da Infura envolve chamadas REST para nós Ethereum, abstraindo as compilações técnicas e possibilitando trabalhar com NFTs com apenas uma conta Infura, algumas configurações e algumas linhas de código. O Infura SDK para NFT também não requer a sobrecarga de aprendizado do Solidity, importação de ABIs, etc. Seja novo na Web3 ou altamente experiente, o Infura SDK para NFT torna os NFTs fáceis.

Vamos começar, construir e implantar um ERC721 NFT para ver como ele funciona.

O que é o Infura SDK para NFT?

O SDK para NFT da Infura é um SDK que permite construir e interagir facilmente com NFTs. É implementado em TypeScript, uma linguagem de programação que é um superconjunto estrito de JavaScript. O SDK inclui criação, cunhagem e gerenciamento de NFTs e consulta de informações sobre eles.

A parte significativa é que ele abstrai os detalhes técnicos para que você possa se concentrar na funcionalidade principal do seu DApp, em vez dos detalhes (muitas vezes complicados). É tudo uma questão de facilidade de uso com os SDKs da Infura!

As cadeias suportadas incluem:

Escrever

• Ethereum: Mainnet, Goerli, Sepolia
• Polygon: Mainnet, Mumbai

Ler

• Ethereum: Mainnet, Goerli, Sepolia
• Polygon: Mainnet, Mumbai
• BSC: Rede principal

Ao usar o Infura SDK para NFT, você também obtém acesso às principais funcionalidades e infraestrutura do Infura, que fornece acesso à Ethereum (e outras blockchains) sem exigir a execução de um nó completo. Com o SDK, você pode aproveitar vários recursos, facilitando a criação e o dimensionamento de seus DApps.

Então, vamos construir um NFT e ver o que o SDK pode fazer.

Construção e implantação do NFT ERC721

Construiremos um DApp e um contrato inteligente na Ethereum e usaremos o SDK para criar um novo NFT. Faremos tudo isso na rede de teste Goerli da Ethereum , para que não tenhamos que nos preocupar com defeitos ou com o custo de implantação na rede principal.

Pré-requisitos

Antes de começar, você precisa dos seguintes pré-requisitos:

• Node.js e seu gerenciador de pacotes NPM. Verifique se você tem o Node.js instalado usando o seguinte comando de terminal: node -v && npm -v.
• TypeScript instalado
• Uma conta Infura
• Uma compreensão básica de TypeScript e JavaScript
• MetaMask

Infura

O Infura SDK para NFT é simples de usar. A maior parte deste tutorial é apenas a instalação e configuração necessárias para criar um DApp. Vamos começar fazendo login na sua conta Infura. Você deverá acessar seu painel, onde poderá criar uma nova chave, conforme mostrado abaixo. Criaremos uma nova chave para este projeto.

Clique no botão Create a new key (Criar uma nova chave) e preencha as informações necessárias.

Depois de criar sua chave, o ID do seu projeto ficará visível em seu painel na seção "API KEY", conforme mostrado abaixo. Copie e guarde em algum lugar; você precisará dele posteriormente neste tutorial.

Configurar um projeto IPFS no Infura Dashboard

Agora, vamos criar um projeto IPFS. IPFS é um sistema de arquivos distribuído P2P para armazenar e acessar arquivos (e outros dados). Funciona bem com blockchain. Precisaremos do IPFS (e dessas credenciais) para carregar e armazenar os metadados do nosso projeto NFT.

Vá para o seu painel e crie outra nova chave clicando em Create new key (Criar uma chave), conforme mostrado abaixo.

Desta vez escolheremos IPFS como rede. Este projeto funcionará na rede principal e (para a função em que o usaremos) na rede de teste.

Depois de criar sua chave, você verá o ID do projeto e o segredo da chave de API na seção "API KEY" do painel. Você também precisará disso mais tarde, então copie-o e guarde-o em algum lugar seguro.

Configuração e instalação do projeto

A seguir, vamos configurar e inicializar um projeto Typescript do Node.js. Use os seguintes comandos em seu console:

mkdir typescript-nft-demo && cd typescript-nft-demo

npm init -y

npm install -D typescript ts-node

npx tsc --init

Abra o projeto em seu ambiente de desenvolvimento preferido. Por exemplo, se você estiver usando o Visual Studio Code, use o seguinte comando para abrir o projeto automaticamente:

code .

Instale as bibliotecas do projeto

Em seguida, precisamos instalar o Infura SDK e a biblioteca dotenv para leitura das variáveis ​​de ambiente.

Use o seguinte comando:

npm install @infura/sdk dotenv

Seu projeto é semelhante à imagem a seguir.

Crie um arquivo .env na raiz do seu projeto e adicione as seguintes variáveis ​​a ele:

INFURA_PROJECT_ID=<YOUR-INFURA-PROJECT-ID>

INFURA_PROJECT_SECRET=<YOUR-INFURA-PROJECT-API-KEY>

WALLET_PRIVATE_KEY=<YOUR-WALLET-MNEMONIC/PRIVATE-KEY>

EVM_RPC_URL=https://goerli.infura.io/v3/&lt;YOUR-PROJECT-API-KEY>

INFURA_IPFS_PROJECT_ID=<YOUR-INFURA-IPFS-PROJECT-ID>

INFURA_IPFS_PROJECT_SECRET=<YOUR-INFURA-IPFS-PROJECT-SECRET-KEY>

WALLET_PUBLIC_ADDRESS=<YOUR-WALLET-ADDRESS>

• Substitua <YOUR-INFURA-PROJECT-ID> e <YOUR-INFURA-PROJECT-API-KEY> com o ID e chave API do projeto Infura criado anteriormente neste tutorial.
• Substitua <YOUR-INFURA-IPFS-PROJECT-ID> e <YOUR-INFURA-IPFS-PROJECT-SECRET-KEY> com o ID e a chave API do projeto IPFS criado anteriormente neste tutorial.
• Na linha que começa com EVM_RPC_URL, substitua <YOUR-PROJECT-API-KEY> com a sua Infura API key.
• <YOUR-WALLET-ADDRESS> deve ser substituído pelo seu endereço blockchain público.
• <YOUR-WALLET-MNEMONIC/PRIVATE-KEY> é a chave privada da sua carteira.

Observação: nunca compartilhe suas chaves privadas ou frases-semente com ninguém! Mantenha-os seguros.

Você pode encontrar o endereço da sua carteira e a chave privada da sua carteira na MetaMask nas seguintes etapas:

• Abra a MetaMask clicando no ícone da extensão do navegador ou visitando o site.

• Clique nos três pontos no canto superior direito da janela MetaMask.

• Selecione Account details (Detalhes da conta) no menu suspenso e clique no botão Export private key (Exportar chave privada).

• Uma janela pop-up aparecerá solicitando que você insira sua senha. Digite sua senha e clique no botão Unlock (Desbloquear).
• Assim que sua conta for desbloqueada, você poderá ver sua chave privada.

Agora que configuramos nosso projeto com sucesso, crie um novo arquivo TypeScript, nft.ts, no nível raiz.

A estrutura do seu projeto deve ser semelhante à abaixo.

Configurar a autenticação Infura

A autenticação de dentro do nosso DApp requer nosso PROJECT_ID e PROJECT_SECRET.

Vamos carregá-los do nosso novo arquivo .env.

Crie um objeto de autenticação dentro do nft.ts usando o seguinte trecho de código:

import { config as loadEnv } from "dotenv";
import { SDK, Auth, Metadata, TEMPLATES } from "@infura/sdk";

// carrega variáveis ​​de ambiente do arquivo .env
loadEnv();

// Cria uma instância da classe Auth
const auth = new Auth({

  // define o projectId obtido da variável de ambiente INFURA_PROJECT_ID
  projectId: process.env.INFURA_PROJECT_ID,

  // define o secretId obtido da variável de ambiente INFURA_PROJECT_SECRET
  secretId: process.env.INFURA_PROJECT_SECRET,

  // define a chave privada obtida da variável de ambiente WALLET_PRIVATE_KEY
  privateKey: process.env.WALLET_PRIVATE_KEY,

  // define o rpcUrl obtido da variável de ambiente EVM_RPC_URL
  rpcUrl: process.env.EVM_RPC_URL,

  // define o chainId para a rede de teste Goerli
  chainId: 5, // Goerli

  //define as opções para IPFS
  ipfs: {

    // define o ID do projeto obtido da variável de ambiente INFURA_IPFS_PROJECT_ID
    projectId: process.env.INFURA_IPFS_PROJECT_ID,

    // define o segredo da chave API obtido da variável de ambiente INFURA_IPFS_PROJECT_SECRET
    apiKeySecret: process.env.INFURA_IPFS_PROJECT_SECRET,
  },
});

//Instancia o SDK
const sdk = new SDK(auth);

Configurar o arquivo tsconfig.json conforme mostrado. (Você pode receber um erro, mas continue.) O tsconfig.json é um arquivo de configuração para projetos TypeScript. É usado para especificar as opções do compilador e os arquivos que você deve incluir no projeto.

Configure o seu tsconfig.json com o seguinte trecho de código:

{
        "compilerOptions": {

          "target": "ESNext", /* Define a versão da linguagem JavaScript para o JavaScript emitido e inclui declarações de biblioteca compatíveis. */

          "module": "ES2022", /* Especifica qual código do módulo será gerado. */

          // "rootDir": "./",                                  /* Especifica a pasta raiz em seus arquivos de origem. */

          "moduleResolution": "node", /* Especifica como o TypeScript procura um arquivo de um determinado especificador de módulo. */

          "esModuleInterop": true, /* Emite JavaScript adicional para facilitar o suporte à importação de módulos CommonJS. Isso habilita 'allowSyntheticDefaultImports' para compatibilidade de tipo. */

          "forceConsistentCasingInFileNames": true, /* Certifique-se de que o uso de maiúsculas e minúsculas esteja correto nas importações. */

          /* Verificação de tipo */

          "strict": true, /* Habilita todas as opções rigorosas de verificação de tipo. */

          "skipLibCheck": true /* Ignora a verificação de tipo de todos os arquivos .d.ts. */
      }
}

A seguir, adicione o módulo type para o arquivo package.json usando o seguinte trecho de código:

//...

"type": "module",
"scripts": {},

//...

Criar metadados de token

Agora terminamos de configurar. Vamos ao que interessa!

Primeiro, criaremos os metadados do token.

Os metadados do token referem-se a informações ou dados adicionais associados a um token (normalmente um token ERC-721 ou ERC-1155 na blockchain Ethereum). Esses metadados podem incluir informações como nome do token, símbolo, imagem e outros atributos que descrevem o token ou fornecem contexto a ele.

Os metadados são armazenados na cadeia e normalmente representados como URI ou URL que aponta para um arquivo JSON contendo os metadados.

Dentro do arquivo nft.ts, adicione o seguinte trecho de código. Ele criará e armazenará os metadados do token. A classe de metadados é do Infura NFT SDK.

(Nota: o consensys.net external_url é apenas para fins de demonstração aqui, você pode substituí-lo.)

// Define as propriedades do token, incluindo sua descrição, URL externo, imagem, nome e atributos
const tokenMetadata = Metadata.openSeaTokenLevelStandard({

  description: "Criatura fantástica de diferentes emojis",

  external_url: "https://consensys.net/",

  image: await sdk.storeFile({

    // Armazena a imagem da URL fornecida
    metadata: "https://res.cloudinary.com/olanetsoft/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1672327921/demo.jpg",

  }),
  name: "Kandy Jane",
  attributes: [],
});

// Registra o objeto de metadados do token no console
console.log("Token Metadata: ", tokenMetadata);

// Armazena os metadados do token e registra o resultado
const storeTokenMetadata = await sdk.storeMetadata({ metadata: tokenMetadata });

console.log("Store Token Metadata: ", storeTokenMetadata);

Crie os metadados do contrato

Os metadados do contrato referem-se a informações ou dados adicionais associados a um contrato inteligente em uma rede blockchain. Esses metadados podem incluir informações como nome do contrato, símbolo, versão e outros atributos que descrevem o contrato ou lhe dão contexto.

Os metadados são armazenados na cadeia e normalmente representados como URI ou URL que aponta para um arquivo JSON contendo os metadados.

Crie metadados de contrato usando o seguinte trecho de código:

//...

// Define as propriedades da coleção, incluindo sua descrição, URL externo, imagem, nome e atributos
const collectionMetadata = Metadata.openSeaCollectionLevelStandard({

  name: "Emojis collection", // Define o nome da coleção como "Coleção Emojis"

  description:
    "Uma pequena imagem ou ícone digital usado para expressar uma ideia ou emoção na comunicação eletrônica. Os emojis vêm em muitas formas, como carinhas sorridentes, animais, comida e atividades.",// Define a descrição da coleção
  image: await sdk.storeFile({

    // Define a propriedade de imagem da coleção usando o método storeFile
    metadata:
"https://res.cloudinary.com/olanetsoft/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1672327921/demo.jpg", // A URL do arquivo de imagem
  }),

  external_link: "https://google.com/", // Define a propriedade do link externo da coleção
});

// Registra os metadados da coleção no console
console.log("Collection Metadata:- ", collectionMetadata); 

// armazena os metadados usando o método storeMetadata
const storeMetadata = await sdk.storeMetadata({ metadata: collectionMetadata }); 

// Registra os metadados armazenados no console
console.log("Store Metadata: ", storeMetadata);

Este trecho de código acima cria um objeto collectionMetadata usando o método openSeaCollectionLevelStandard da classe Metadata. O método openSeaCollectionLevelStandard cria metadados em nível padrão de coleção compatíveis com OpenSea, um mercado líder para NFTs. Ele define o nome, a descrição, a imagem e as propriedades do link externo da coleção; armazena os metadados usando o método storeMetadata; em seguida, registre-o no console para depuração.

Crie um novo contrato e cunhe um NFT

Adicione o código a seguir para criar um novo contrato e cunhar um NFT usando o Infura NFT SDK. A maior parte dessa funcionalidade vem do nosso novo SDK NFT!

//...

// Criar um novo contrato
const newContract = await sdk.deploy({   // implanta um novo contrato usando o método sdk.deploy
  template: TEMPLATES.ERC721Mintable,     // define o modelo do contrato como ERC721Mintable
  params: {
    name: "1507Contract",                  // define o nome do contrato como "1507Contract"
    symbol: "EMOJI",                        // define o símbolo do contrato como "EMOJI"
    contractURI: storeMetadata,             // define o URI do contrato com storeMetadata
  },
});

console.log("Contract Address: \n", newContract.contractAddress);  // registra o endereço do contrato no console

// cunhe um NFT
const mint = await newContract.mint({  //  cunha um novo NFT usando o método mint do novo contrato
  publicAddress:
    process.env.WALLET_PUBLIC_ADDRESS ??

    "0x510e5EA32386B7C48C4DEEAC80e86859b5e2416C", // define o endereço público da carteira, se não for definido usará o endereço fornecido

  tokenURI: storeTokenMetadata,                // define o URI do token com storeTokenMetadata

});

const minted = await mint.wait();            // aguarda a conclusão do processo de cunhagem

console.log("Minted: ", minted);               // registra o NFT cunhado no console

Este código cria um novo contrato usando o método sdk.deploy e define o modelo do contrato para ERC721Mintable. Em seguida, ele define o nome, o símbolo e o URI do contrato. O endereço do contrato é registrado para depuração.

Em seguida, ele cunha um novo NFT usando ométodo mint do novo contrato e define o endereço público da carteira. Se não for especificado, ele usa o endereço fornecido e então define o URI do token com o storeTokenMetadata.

Por fim, ele aguarda a conclusão do processo de cunhagem e registra o NFT cunhado no console.

Vamos testar!

ts-node-esm nft.ts

Você deverá ver algo semelhante ao que é mostrado abaixo:

Verifique o contrato na conta e no Etherscan da Goerli

Finalmente, vamos verificar o contrato usando um explorador de blockchain no Etherscan da Etherscan. Vá ao Site da rede de teste Goerli da Ethereum e cole o hash da transação da sua saída acima (conforme mostrado abaixo).

Você deverá ver os detalhes.

Essa foi fácil! Utilizamos com sucesso o Infura NFT SDK para construir, implantar e cunhar um NFT na testnet Goerli.

Importar token na MetaMask

Vejamos nosso novo NFT de uma perspectiva front-end usando a MetaMask. Primeiro, temos que importar nossa carteira para a MetaMask. Clique em Import tokens (Importar Tokens), conforme mostrado na MetaMask. (Certifique-se de estar conectado à rede de testes Goerli conforme mostrado.)

Copie e cole o endereço do contrato para importar seu token na MetaMask, conforme mostrado abaixo.

E aí está! Uma maneira fácil e rápida de adicionar NFTs aos seus DApps. Você pode usar o SDK agora para gerenciar os NFTs e muito mais (veja a documentação para saber os recursos atuais).

Verifique NFT cunhado no OpenSea

Importamos com sucesso o NFT cunhado na MetaMask, mas agora vamos verificar na Testnet do OpenSea. Conecte sua carteira e visualize seu novo NFT. Você deve ter algo semelhante ao mostrado abaixo.

Para referência, aqui está o link do OpenSea para o NFT criado. Você pode encontrar o código completo em um repositório GitHub aqui.

Conclusão

Concluindo, o novo Infura NFT SDK para TypeScript é uma ferramenta poderosa para desenvolvedores que desejam incorporar NFTs em seus DApps. Com suas funções fáceis de usar e recursos abrangentes, este SDK simplifica a implantação, cunhagem e gerenciamento de NFTs na blockchain Ethereum. \

Cadastre-se e comece a construir!

Eu adoraria me conectar com você no Twitter |LinkedIn |GitHub |Portfólio

Vejo você no meu próximo artigo do blog. Se cuida!!!

Este artigo foi escrito por Idris Olubisi e traduzido por Diogo Jorge. O artigo original pode ser encontrado aqui.