Os tokens não fungíveis (NFTs) são uma das maiores (e mais populares) inovações que saíram da Web3 até agora. Embora suas capacidades ainda estejam sendo exploradas, tanto a indústria da arte quanto o mundo dos jogos se beneficiaram com a tecnologia. Isso porque os NFTs criam um registro indiscutível de propriedade digital.
Construir NFTs não é tão complicado quanto você pensa, especialmente com conjuntos de ferramentas como o Truffle Suite. Este artigo apresentará as ferramentas do Truffle Suite e ensiná-lo como utilizá-las para construir um projeto NFT de ponta a ponta e incluir o seguinte:
- Configuração e instalação do projeto utilizando a Truffle NFT Box.
- Introdução à extensão do Truffle no VS Code.
- Como construir e implantar o contrato inteligente NFT usando o Truffle Dashboard.
- Instruções para cunhar um NFT do cliente React integrado com a Truffle NFT Box.
- Verificação no explorador de blocos e OpenSea/ Rarible.
Introdução ao Truffle Suite
Para facilitar a vida dos desenvolvedores Ethereum, o Truffle oferece um ambiente de desenvolvimento, uma estrutura de testes e um pipeline de ativos.
Ele tem vários recursos que o tornam atraente tanto para os desenvolvedores com experiência quanto para os novos na Web3, e permite que os desenvolvedores construam e implantem dapps para muitos casos de uso. O conjunto de ferramentas Truffle Suite tem vários componentes, incluindo:
- Um pipeline de construção programável usado para construir aplicações de console e web.
- Reconstrução instantânea de ativos durante o desenvolvimento (
truffle watch) - Um console que simplifica o uso de seus contratos compilados (truffle console).
- Compilação e implementação de contrato com suporte integrado a JavaScript, CoffeeScript, ES6 e JSX utilizando o cliente RPC de sua escolha.
Truffle Suite
O Truffle inclui ferramentas essenciais para ajudar qualquer pessoa a construir e implantar rapidamente projetos Web3. As ferramentas na stack incluem:
- Truffle - O ambiente de desenvolvimento e a estrutura de teste.
- Ganache - Uma blockchain pessoal para o desenvolvimento em Ethereum.
- Truffle para extensão do VS Code - Uma extensão que facilita a criação e o gerenciamento de projetos Truffle.
- Truffle Dashboard - Uma maneira fácil de usar sua carteira MetaMask existente para suas implantações e outras transações que você precisa enviar a partir de um contexto de linha de comando.
- Truffel Boxes - Projetos padrão para se colocar em funcionamento rapidamente.
Embora não façam parte do conjunto de ferramentas Truffle Suite, as seguintes ferramentas combinam muito bem com a stack para tornar o desenvolvimento e a implantação ainda mais simplificados:
- Infura - Um provedor de backend Web3 e Infraestrutura como Serviço (IaaS), oferecendo vários serviços e ferramentas para desenvolvedores de blockchain.
- Metamask - Uma carteira criptográfica e gateway (porta de entrada) para aplicações de blockchain.
Como iniciar um projeto NFT de ponta a ponta usando a Truffle Stack
Agora que você tem uma ideia das ferramentas envolvidas, vamos juntá-las para criar um projeto NFT.
Pré-requisitos
Antes de começarmos, precisamos dos seguintes pré-requisitos:
-
Node.js e seu gerenciador de pacotes NPM.
- Verifique se temos o Node.js instalado, utilizando o seguinte comando no terminal:
node -v && npm -v
- Uma conta Infura
- Truffle para extensão do VS Code
- Entendimento básico de JavaScript e Solidity
Crie uma conta Infura para acessar a rede
Visite o site do Infura para registrar uma nova conta ou fazer login se você já tiver uma.
Após o registro com sucesso, a página é redirecionada para nosso painel, onde podemos criar uma nova chave, como mostrado abaixo.
Clique no botão "Criar uma nova chave" e preencha as informações necessárias.
Após criar sua chave, seu identificador do projeto estará visível no painel de controle na seção Chave API, como mostrado abaixo. Copie e guarde-a em algum lugar; você precisará dela mais tarde neste tutorial.
Configure MetaMask com Infura RPC
Precisaremos configurar e configurar uma rede de teste Goerli na MetaMask usando o terminal Infura RPC, uma vez que você construirá e implantará sua aplicação através do Truffle Dashboard.
Vá até metamask.io e baixe a extensão para seu navegador. Entender a segurança da carteira é essencial ao usar uma carteira criptográfica como a MetaMask.
Clique em adicionar uma rede manualmente como mostrado na imagem acima, depois digite as seguintes informações:
Network Name: Goerli Testnet - Infura
New RPC URL: https://goerli.infura.io/v3/<Paste-your-project-id-here>
Chain ID: 5
Currency Symbol: ETH
Block Explorer URL: https://goerli.etherscan.io/
Parabéns, você configurou com sucesso o Goerli Testnet com Infura RPC.
Configuração de Projeto NFT de ponta a ponta com o Truffle NFT Box e a extensão Truffle para o VS Code
Nesta seção, você estabelecerá um projeto NFT com o Truffle NFT Box e a extensão Truffle para o VS Code. Abra o VS Code a partir da pasta em que você deseja trabalhar, navegue até a guia de extensões e procure "Truffle for VS Code".
Com a extensão instalada, você pode facilmente criar um novo projeto Truffle a partir de uma Truffle Box. Pressione ctrl+shift+P para abrir o diálogo de comando e digite "truffle". Isso exibirá uma lista de comandos disponíveis no Truffle.
Selecione Novo Projeto Solidity e depois Crie projeto a partir da Truffle Box. Em seguida, será exibida uma lista de Truffle Boxes disponíveis. Escolha nft-box para criar o projeto.
Alternativamente, se você não estiver usando o VS Code como seu editor principal, você ainda pode seguir adiante. Crie um projeto NFT a partir de um Truffle Box em qualquer diretório de sua escolha, usando os seguintes comandos:
mkdir nft-project-demo && cd nft-project-demo
npx truffle unbox nft-box
Ou você pode instalar o Truffle globalmente e executar o comando unbox.
npm install -g truffle
truffle unbox nft-box
Este comando deve baixar e descompactar o Truffle NFT Box.
Em seguida, cd (mudar diretório) no novo diretório e faça o download de todas as dependências do projeto executando npm install.
Finalmente, abra o projeto em seu editor de código preferido. Independentemente de como você criou o projeto, você deve ter uma estrutura de projeto semelhante ao que é mostrado abaixo.
Upload de Metadados NFT no IPFS
Nossa imagem e metadados NFT serão armazenados usando IPFS. Dirija-se ao seu Painel Infura e crie outro projeto, desta vez selecionando IPFS, como mostrado abaixo.
A seguir, clique em Manage Key para visualizar os detalhes do projeto.
Você precisará do Project ID, do Project Secret e do Endpoint URL para as tarefas seguintes.
Usando o seguinte comando, vamos carregar a imagem para o IPFS. Para enviar a imagem, cd para a pasta onde a imagem está salva.
curl -X POST -F file=@yourfile -u
"PROJECT_ID:PROJECT_SECRET" "[https://ipfs.infura.io:5001/api/v0/add](https://ipfs.infura.io:5001/api/v0/add)"
- Substitua
@yourfilepelo nome do arquivo de imagem na pasta atual, por exemplo,image-name.jpeg. - Substitua
"PROJECT_ID:PROJECT_SECRET"por seu Project ID e Project Secret, nessa ordem.
A saída do comando deve ser semelhante ao que é mostrado abaixo.
Você pode verificar se a imagem foi carregada com sucesso colando aquele Hash na seguinte URL: https://ipfs.io/ipfs/YOUR_HASH_HERE.
Nota: Ao tentar acessar a imagem através da URL pela primeira vez, pode levar alguns minutos para carregar
Vamos obter os metadados armazenados no IPFS agora que a imagem está lá. Para atender aos requisitos do OpenSea, você precisará que seus metadados estejam no seguinte formato JSON:
{
"name": "My Nature NFT",
"description": "Amazing nature NFT deployed to the Goerli Network using Infura RPC",
"image": "ipfs://YOUR_HASH_HERE"
}
Você usará o comando semelhante ao que usou anteriormente para carregar a imagem na etapa anterior com este comando.
curl -X POST -F file=@yourjsonfile -u "PROJECT_ID:PROJECT_SECRET"
"[https://ipfs.infura.io:5001/api/v0/add](https://ipfs.infura.io:5001/api/v0/add)"
- Substitua
@yourjsonfilepelo nome do arquivo json na pasta atual, por exemplo,nft-metadata.json. - Substitua
"PROJECT_ID:PROJECT_SECRET"por seu Project ID e Project Secret, nessa ordem.
Você pode verificar se o arquivo JSON foi carregado com sucesso colando esse Hash na seguinte URL: https://ipfs.io/ipfs/YOUR_HASH_HERE
Você configurou totalmente todas as ferramentas necessárias para construir e implantar um contrato inteligente com a Truffle Dashboard. Vamos fazer isso na etapa seguinte.
Construir e implantar contratos inteligentes com o Truffle Dashboard
Vá para o projeto NFT com a Truffle NFT Box que instalamos anteriormente; você construirá e implantará o contrato inteligente nesta seção.
Dentro do arquivo 1_deploy_contracts.js na pasta migrations, atualize-o com o seguinte trecho de código.
var NFTCollection = artifacts.require("./NFTCollection.sol");
module.exports = function (deployer) {
deployer.deploy(
NFTCollection,
"https://ipfs.io/ipfs/YOUR_IPFS_HASH_HERE",
"NFT DEMO",
"NFTD"
);
};
No trecho de código acima, adicionamos a URL ao arquivo JSON hospedado no IPFS, o nome do token e o símbolo como parâmetro para a função deployer.deploy().
Em seguida, você construirá e compilará usando o Truffle Dashboard, que elimina a necessidade de interagir manualmente com a frase mnemônica de sua carteira ou chaves privadas durante todo o ciclo de vida do desenvolvimento.
Em uma janela separada do terminal, digite o seguinte comando:
truffle dashboard
O comando iniciará automaticamente o Truffle Dashboard em http://localhost:24012 e abrirá uma nova aba em sua sessão existente do navegador.
Após conectar sua carteira, certifique-se de mudar para o Goerli testnet que montamos e configuramos anteriormente usando o Infura RPC. Você deverá ter algo semelhante ao que é mostrado abaixo após a conexão bem sucedida.
Em seguida, compile e implante os contratos inteligentes usando o seguinte comando:
truffle migrate --network dashboard
Aprove a transação através do Truffle Dashboard em seu navegador, conforme solicitado no terminal.
Após a implantação bem-sucedida, você deverá ter algo semelhante ao que é mostrado abaixo em seu terminal.
Verificar a criação do contrato no Goerli Testnet Block Explorer
Nesta seção, verifique a criação do contrato no Goerli Testnet Block Explorer através da URL de teste colando o endereço do contrato ou confirmando na MetaMask, que será redirecionado para o Goerli Testnet Block Explorer, como mostrado abaixo.
Configurar o frontend do cliente e cunhar um NFT
Abra um terminal separado e execute o seguinte comando para configurar o frontend do cliente. Isto nos permitirá cunhar o NFT a partir do contrato inteligente que acabamos de implantar.
cd client
npm install
npm start
Se você encontrar um erro semelhante ao mostrado acima, crie um arquivo .env na pasta do cliente, adicione SKIP_PREFLIGHT_CHECK=true, então execute o seguinte comando.
npm start
O servidor React iniciará automaticamente no navegador em http://localhost:3000/, mostrando algo semelhante à imagem abaixo:
Testar o projeto NFT de ponta a ponta
Nesta seção, vamos testar a aplicação para ver se você pode cunhar com sucesso o NFT, clicando no botão Mint NFT.
Após pressionar o botão, você verá um pop-up da MetaMask semelhante ao que é mostrado abaixo.
Clicando na transação abaixo, você pode confirmar se a cunhagem foi bem sucedida na MetaMask.
Verificar o NFT cunhado no OpenSea e Rarible
Construímos e implantamos com sucesso um projeto NFT de ponta a ponta utilizando a Truffle Stack nas etapas anteriores. Nesta seção, vamos verificar nosso NFT cunhado no OpenSea e Rarible.
Copie o endereço do contrato, conforme mostrado abaixo.
Cole seu endereço de contrato na barra de busca em testnets.opensea.io para conferir seu novo NFT no OpenSea. Se seus metadados foram inseridos corretamente, seu NFT deve ser exibido corretamente.
Nota: O OpenSea às vezes pode ser lento para mostrar seus metadados e imagem NFT.
Você pode colar seu endereço de contrato e consultá-lo em https://testnet.rarible.com/, pois eles recuperam metadados NFT mais rapidamente do que o OpenSea, como mostrado abaixo.
Conclusão
Este artigo o apresentou ao Truffle Suite of Tools e como elas podem ser usadas com Infura e MetaMask para criar um projeto NFT de ponta a ponta. Você também aprendeu que as Truffle Boxes são uma maneira fácil de construir projetos rapidamente.
O desenvolvimento na Web3 não precisa ser difícil, especialmente quando existem ferramentas que você pode usar em cada etapa do processo.
Para saber mais sobre a Truffle Stack ou para continuar construindo, consulte seus documentos.
Tenha um ótimo dia!
Artigo escrito por John Vester. A versão original pode ser encontrada aqui. Traduzido e adaptado por Dimitris Calixto.
Top comments (0)