Posted on Nov 30, 2023

Como Construir uma Galeria NFT Usando a API NFT GraphQL do QuickNode

Um tutorial passo a passo sobre como construir uma galeria NFT interativa usando API NFT GraphQL do QuickNode, icy.tools, JavaScript, Next.js e Tailwind CSS

ÍNDICE

Neste tutorial, você construirá uma galeria de NFTs usando a API NFT GraphQL do QuickNode, Icy.tools, React, JavaScript, Next.js, Vercel e TailwindCSS. O aplicativo da Web React fornecerá uma interface de usuário exibindo uma visualização em grade de todos os NFTs mantidos por qualquer Ethereum Name Service (ENS ou Serviço de Nome de Domínio Ethereum). Você obterá dados do NFT com a icy-nft-tools.

O que é o QuickNode?

O QuickNode é uma plataforma blockchain que fornece infraestrutura para desenvolvedores construírem e escalarem aplicativos descentralizados (DApps). Ele oferece um conjunto de ferramentas e serviços, incluindo uma API de desenvolvedor, para facilitar aos desenvolvedores a construção, teste e implantação de DApps em múltiplas redes blockchain. O QuickNode visa simplificar o processo de construção em blockchain e torná-lo mais acessível para desenvolvedores, ao mesmo tempo que fornece infraestrutura de alto desempenho para suportar a crescente demanda por aplicações descentralizadas.

O Que é a API NFT GraphQL do QuickNode?

Inscreva-se para obter a API NFT GraphQL de forma gratuita!

A API NFT GraphQL é um conjunto de ferramentas e serviços que permite aos desenvolvedores interagir com plataformas de NFT usando a linguagem de consulta GraphQL. Esta API fornece uma maneira conveniente para os desenvolvedores descobrirem, rastrearem e analisarem NFTs com dados de volume e piso em tempo real, gráficos históricos e dados de tendências, valores de portfólio de NFT em qualquer carteira e muito mais. Este serviço também permite buscar os NFTs pertencentes a um endereço específico. Neste tutorial, exploraremos como usar esse recurso.

Explore o Mercado QuickNode!

Além de sua API NFT GraphQL, o QuickNode oferece muito mais ferramentas e soluções para desenvolvedores Web3 em seu mercado. Isso inclui um estimador de preço de gás, Crossmint API NFT , API antifraude GoPlus e uma enorme biblioteca de guias, tutoriais, documentação e outros recursos para desenvolvedores criados por especialistas.

Ao final deste tutorial, você será capaz de:

Instalar, configurar e inicializar as bibliotecas icy-nft-hooks.
Criar um novo projeto Next.js e aprender como usar as icy-nft-hooks para interagir com APIs NFT GraphQL do QuickNode para recuperação de dados.
Buscar e armazenar dados de NFTs recuperados para um endereço de carteira em uma variável de estado e exibir os resultados na interface do usuário.

As Funcionalidades

Os usuários podem inserir Ethereum Name Service (ENS) no campo "Ethereum Name Service".
O aplicativo irá interagir com os pontos de extremidade (endpoints) da API do provedor e buscar os dados do NFT usando Icy.tools.
O aplicativo entrega uma visualização em grade da galeria de todos os NFTs que o endereço da carteira contém para a interface do usuário.

O Stack de Tecnologia

Framework CSS: TailwindCSS
Provedor RPC: QuickNode
Bibliotecas JavaScript: Icy-nft-hooks, React
Front-end/Framework: JavaScript, Next.js

Os Pré-requisitos

Tenha Git, Yarn, TailwindCSS e Node.js instalados em sua máquina.

Compreensão básica de JavaScript, React e TailwindCSS.

Passo 1: Criando o Projeto Next.js

Vamos configurar nosso ambiente e instalar as dependências necessárias. Abra um terminal em sua máquina e navegue até o local do diretório onde deseja armazenar seu projeto Next.js. Em seguida, execute o seguinte comando:


yarn create next-app .

Este comando cria um novo projeto inicial Next.js no diretório especificado. Agora, inicie o servidor de desenvolvimento local executando o seguinte comando:


yarn dev

O comando acima configura seu ambiente de desenvolvimento local. Copie e cole http://localhost:3000 em seu navegador para iniciar o projeto inicial Next.js. Esta é a aparência que seu navegador da Web deve ter:

O aplicativo atual contém apenas o código inicial fornecido pelo Next.js, que modificaremos ao longo deste tutorial para criar a interface de front-end do usuário personalizada para nosso painel de mercado NFT.

Agora, vamos instalar o Tailwind CSS e suas dependências necessárias usando o npm, executando o seguinte comando no terminal:


npm install -D tailwindcss postcss autoprefixer

Execute o comando init para gerar os arquivos tailwind.config.js e postcss.config.js:


npx tailwindcss init -p

No seu arquivo tailwind.config.js, adicione os caminhos para todos os seus arquivos de modelo atualizando o código com o seguinte:

Arquivo: ./tailwind.config.js


/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Adicione as diretivas @tailwind para cada uma das camadas do Tailwind ao seu arquivo globals.css. A parte superior do seu arquivo globals.css deve ficar assim:

Arquivo: ./styles/globals.css


@tailwind base;
@tailwind components;
@tailwind utilities;

...

Passo 2: Instalando a Biblioteca icy-nft-hooks

Buscaremos dados em tempo real usando a API NFT GraphQL. Vamos instalar e configurar a biblioteca de ganchos React icy-nft-hooks como um empacotador para a API GraphQL da icy.tools. Essa biblioteca nos permite obter dados de mercados de NFTs em tempo real, como preço mínimo, vendas, preço médio, volume, valor de mercado, etc.

Instale icy-nft-hooks com o seguinte comando:


yarn add @quicknode/icy-nft-hooks
yarn add @apollo/client graphql

No diretório pages, navegue até o arquivo _app.js. Copie e cole o seguinte código no arquivo _app.js.

Arquivo: ./pages/_app.js


import "../styles/globals.css";
import { IcyProvider } from "@quicknode/icy-nft-hooks";

export default function App({ Component, pageProps }) {
  return (
    <IcyProvider apiKey={process.env.QUICKNODE_NFT_API_KEY}>
      <Component {...pageProps} />
    </IcyProvider>
  );
}

Estamos importando o gancho IcyProvider do pacote icy-nft-hooks e empacotando todo o aplicativo da Web com o gancho IcyProvider.

Passo 3: Obtendo uma Chave de API NFT

Como você pode ver no código acima, precisaremos de uma chave de API para buscar dados de mercados de NFT em tempo real. Para obter a chave de API, siga estas etapas:

Abra o link Icy Tools e clique no botão "Sign Up” (cadastrar-se).

Insira os dados e clique no botão "Sign Up”.

Você chegará à página "Explore” (explorar) do icey.tools, onde verá algo assim:

Clique no botão "Settings” (configurações) no lado esquerdo. Você verá a chave de API.

Passo 4: Instalando o Pacote dotenv

Recomendo armazenar informações sensíveis, como chaves de API, em variáveis de ambiente, em vez de codificá-las rigidamente no código. Usaremos o pacote dotenv para armazenar dados confidenciais. Execute o seguinte comando para instalar o pacote dotenv:


yarn add --dev dotenv

Crie um arquivo .env na pasta raiz. Adicione a variável de ambiente:


QUICKNODE_NFT_API_KEY = "c34kndhiflmln-API-KEY"

Passo 5: Obtendo o NFT

Nesta seção, criaremos a função WalletNFTs que aceita o ENS como entrada do usuário e retorna a coleção de NFTs pertencentes ao endereço de entrada. A biblioteca @quicknode/icy-nft-hook nos fornece o método getNFTsByOwner que iremos implementar e utilizar dentro de nossa função WalletNFTs. O DApp NFT Gallery aceitará endereços de carteira Ethereum como entrada.

Crie um novo arquivo WalletNFTs.js e copie o código abaixo.

Arquivo: ./pages/WalletNFTs.js


import { useWalletNFTs } from "@quicknode/icy-nft-hooks";
import { useState } from "react";

function WalletNFTs() {
  const [ensName, setEnsName] = useState("vitalik.eth"); //vitalik.eth
  const [cursor, setCursor] = useState("");
  const { nfts, isSearchValid, pageInfo } = useWalletNFTs({
    ensName,
    first: 12,
    after: cursor,
  });

  return (
    <div className="p-10 flex flex-col items-center">
      <div className="w-full h-full flex flex-col justify-start gap-5 items-center">
        <h1 className="text-7xl font-bold">NFT Gallery</h1>
        <h3 className="text-xl font-semibold">
          Powered by{" "}
          <a
            className="underline"
            href="https://developers.icy.tools/?utm_source=quicknode&utm_campaign=quicknode-header"
          >
            QuickNode's GraphQL NFT API
          </a>
        </h3>
      </div>
      <div className="flex-left flex-col mt-4">
        <label
          className="text-white text-2xl font-extrabold pb-2"
          htmlFor="wallet-address"
        >
          &nbsp; Ethereum Name Service &nbsp;
        </label>
        <div className="search">
          <input
            className="px-3 py-2 rounded-md"
            type="text"
            value={ensName}
            onChange={(e) => setEnsName(e.target.value)}
            style={{
              outlineColor:
                !isSearchValid && ensName.length > 0 ? "red" : undefined,
            }}
          />
        </div>
      </div>

      <div className="grid grid-cols-4 mt-8 gap-4">
        {console.log(nfts)}
        {nfts.map((nft) => {
          const contract = nft.contract;
          console.log(contract);
          const imageUrl = nft.images.find((i) => !!i.url)?.url;

          return (
            <div
              className="flex flex-col rounded border p-4"
              key={`${nft.tokenId}${nft.contract.address}`}
            >
              <div className="w-full h-full rounded shadow flex justify-center items-center">
                <img
                  className="w-full h-full"
                  src={imageUrl ?? "/web3.png"}
                  alt="awesome nft"
                />
              </div>
              <div>
                <h1 className="font-bold">{contract.name}</h1>
                <h2 className="truncate">
                  {contract.symbol}#{nft.tokenId}
                </h2>
              </div>
            </div>
          );
        })}
      </div>

      {pageInfo?.hasNextPage && (
        <div
          style={{
            alignItems: "flex-end",
            width: "100%",
            justifyContent: "flex-end",
            display: "flex",
          }}
        >
          <button
            onClick={() => {
              setCursor(pageInfo.endCursor ?? undefined);
            }}
          >
            Next
          </button>
        </div>
      )}
    </div>
  );
}

export default WalletNFTs;

Curiosamente, alguns NFTs não possuem imagens associadas a eles. Para resolver isso, adicionamos uma imagem padrão à grade como substituta caso um NFT não tenha uma imagem.

Você pode encontrar a imagem aqui.

Passo 6: Exibir a Galeria de NFTs

Estamos quase terminando nossa galeria de NFTs. Neste passo, vamos importar o componente WalletNFTs do arquivo WalletNFTs.js e utilizá-lo no arquivo index.js.

Arquivo: ./pages/index.js


import Head from "next/head";
import WalletNFTs from "./WalletNFTs";

export default function Home() {
  return (
    <>
      <Head>
        <title> Quicknode NFT Gallery </title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <WalletNFTs />
    </>
  );
}

Agora abra o http://localhost:3000 no seu navegador. Você criou uma galeria de NFTs interativa.

Etapa 7: Implantar a Galeria de NFTs

Agora vamos implantar nosso aplicativo Next.js com Vercel seguindo as etapas abaixo:

Acesse Vercel e faça login com sua conta GitHub.
Clique no botão New Project (novo projeto) e selecione o repositório do seu projeto.
Selecione o Framework como Next.js.
Insira a variável de ambiente, 'QUICKNODE_NFT_API_KEY', e o valor definido para sua chave de API.
Clique em Deploy (implantar) e agora sua Galeria de NFTs está no ar!

Base de Código Completa

Repositório GitHub do projeto completo: Galeria de NFTs

Link do site: site da galeria de NFTs

Fontes Adicionais

https://blog.developerdao.com/how-to-build-an-nft-market-dashboard-using-quicknodes-graphql-nft-api

https://github.com/AAYUSH-GUPTA-coder/nft-gallery-quicknode-tutorial

https://docs.icy.tools/developer-api/api-reference

🎉BOOM🎉

Você concluiu todo o tutorial. Se parabenize! Você aprendeu sobre o seguinte:

Provedor de nó QuickNode;
Configuração de um aplicativo Next.js e integração com Tailwind CSS;
Ganchos NFT da icy.tools: icy-nft-hooks;
Obtenção da API da icy.tools;
Configuração e uso do pacote dotenv;
Busca e exibição de NFTs pertencentes ao endereço.

Espero que você tenha aprendido algo novo ou resolvido um problema. Obrigado por ler. Divirta-se!

Você pode me seguir no Twitter, GitHub e Linkedin. Continue enviando suas sugestões e comentários!

Este artigo foi escrito por Aayush Gupta e traduzido por Isabela Curado Nehme. Seu original pode ser lido aqui.

Top comments (0)

Se inscrever

WEB3DEV