---
title: "Como desenvolver um visualizador de NFT (tutorial em 5 passos)"
description: "Aprenda a construir um dapp para visualizar NFTs de um determinado endereço de carteira usando a Alchemy NFT API."
---

# Como desenvolver um visualizador de NFT (tutorial em 5 passos)

Um dos aspectos mais marcantes dos smart contracts de NFT é que eles não incluem a arte, as imagens ou os próprios arquivos, mas apenas links ou URIs para eles e seus metadados. Esses tokens identificam locais off-chain para esses arquivos e dados, portanto a blockchain não é responsável por hospedar esse conteúdo.

Como veremos na próxima seção, o ERC-1155 é uma melhoria em relação ao ERC-721 no sentido de que seu código funciona tanto para tokens não fungíveis quanto semi-fungíveis \(NFTs\).

### Requisitos do NFT viewer

- Node >= 16.13.x
- Alchemy
- React.js
- TailwindCSS
- [Repositório GitHub do NFT Viewer](https://github.com/alchemyplatform/Build-Your-NFT-Explorer)

### Tutorial do NFT viewer

Aqui estão os passos para criar um dapp de NFT viewer usando Alchemy.

### 1. Clone o repositório

Para clonar o repositório do NFT Viewer, abra seu terminal e execute o seguinte comando:

<CodeSnippet
  code={`git clone https://github.com/alchemyplatform/Build-Your-NFT-Explorer.git`}
  language="text"
  theme="dark"
/>

### 2. Instale o npm

NPM significa "node package manager". Para instalar o npm, basta executar este comando no seu terminal:

<CodeSnippet code={`npm install`} language="text" theme="dark" />

### 3. Crie uma conta Alchemy na Alchemy

Crie uma [nova conta Alchemy](https://dashboard.alchemy.com/signup/?a=d30817db92) ou crie um novo app se você já for um desenvolvedor Alchemy.

Depois de ter seu app, copie sua API Key.

<ImageBlock
  src="https://media.alchemy.com/1703688790-copy-api-key-on-alchemy.jpeg"
  alt="Painel do Alchemy: criando um novo app e copiando a chave de API"
  width={1223}
  height={1009}
  caption="Crie um novo app no Alchemy e copie sua API Key"
/>

### 4. Substitua sua API key no arquivo fetNFTs.js

A partir daí, atualize const apiKey = "demo"; em src/utils/fetchNFTs.js com sua Alchemy API Key.

Depois execute este comando no seu terminal:

<CodeSnippet code={`npm start`} language="text" theme="dark" />

### 5. Digite um endereço de carteira

Para visualizar os NFTs pertencentes a um determinado endereço de carteira, basta digitar a string do endereço da carteira.

<ImageBlock
  src="https://media.alchemy.com/1703688886-nft-viewer-user-interface.jpg"
  alt="Interface de usuário do Dapp NFT Viewer"
  width={1600}
  height={817}
  caption="Interface de usuário do Dapp NFT Viewer"
/>

Para mais informações sobre este tutorial, veja [este vídeo](https://www.youtube.com/watch?v=YehktV6LSqw)!

### Usando a NFT API da Alchemy

A NFT API da Alchemy permite obter rapidamente todas as informações que você precisa sobre NFTs a partir da blockchain, e funciona em Ethereum, Polygon, Arbitrum, Optimism e testnets da Ethereum.

Em vez de escanear, indexar e armazenar dados manualmente, agora você pode enviar uma única requisição para obter informações específicas de NFT tanto para tokens ERC-721 quanto ERC-1155. Isso inclui obter informações como todos os NFTs pertencentes a um endereço ou metadados/atributos de um determinado token NFT.

Para mais informações, confira a [documentação da NFT API.](https://www.alchemy.com/docs/reference/nft-api-quickstart)

## O que são NFTs \(tokens não fungíveis\)?

**O termo "NFT" se refere a ativos digitais que representam artefatos do mundo real, como arte, música ou itens de videogame.**‍

Mesmo existindo apenas desde 2014, o uso de NFTs para comprar e vender arte digital continua crescendo em popularidade. Hoje existem múltiplas implementações de smart contracts para NFTs na Ethereum, sendo os dois principais padrões de token o [ERC-721 e o ERC-1155](https://www.alchemy.com/blog/comparing-erc-721-to-erc-1155).

### O que são tokens ERC-721?

Desde seu primeiro lançamento como uma Ethereum Improvement Proposal \(EIP\) em setembro de 2017, os tokens ERC721, também conhecidos como Non-Fungible Tokens \(NFTs\), permitem que desenvolvedores tokenizem a propriedade de qualquer dado arbitrário na blockchain Ethereum.

O ERC-721 define a interface mínima que um smart contract deve tecnicamente implementar. Essa interface básica facilita a propriedade, negociação e administração de tokens. O ERC-721 não exige um padrão de informação relacionado ao token e não exclui a instalação de funções que excedam os requisitos mínimos.

O padrão de token ERC-721 expande consideravelmente o espaço de design para tokens. Como cada token não fungível está vinculado a uma identidade distinta, todos são únicos para seu proprietário. Já os tokens que seguem o padrão ERC-20, por outro lado, são fungíveis, o que significa que podem ser usados de forma intercambiável.

Dieter Shirley, o chief technology officer da [Dapper Labs](https://www.alchemy.com/dapps/dapper-labs), projetou o ERC-721 como um rascunho de EIP \(Ethereum Improvement Proposal\), que acabou servindo de base para o jogo [CryptoKitties](https://www.alchemy.com/dapps/cryptokitties). Outros autores do ERC-721 incluem William Entriken, Jacob Evans e Nastassia Sachs.

### O que são ERC-1155s?

**O padrão de token ERC-1155 é para tokens semi-fungíveis, e foi criado por uma equipe de desenvolvedores da Enjin para resolver as limitações dos tokens ERC20 e ERC721.**

Anteriormente, era necessário um contrato separado para cada moeda fungível ou não fungível sob o ERC-20 ou ERC-721, respectivamente. Além disso, os padrões mais antigos restringiam certas capacidades ao dividir cada contrato em um endereço separado. Como resultado, a blockchain Ethereum ficou repleta de bytecode não utilizado.

## Conclusão

Embora os NFTs ainda estejam em estágio inicial, eles estão apresentando aos artistas benefícios extraordinários, como propriedade digital, novas fontes de receita e maior engajamento da comunidade.

Para continuar aprendendo sobre [apps](https://www.alchemy.com/dapps/top/defi-dapps) de NFT, explore tutoriais relacionados como:

1. [Como criar um token ERC-721](https://www.alchemy.com/docs/how-to-interact-with-erc-721-tokens-in-solidity)
1. [Como criar um token ERC-1155](https://www.alchemy.com/docs/how-to-interact-with-erc-20-tokens-in-solidity)
1. [Como fazer batch mint de NFTs com ERC721A](https://www.alchemy.com/overviews/erc721-vs-erc721a-batch-minting-nfts)