Posted on Dec 14, 2023

Cómo Construir una Galería NFT Usando el API NFT GraphQL de QuickNode

Una guía paso a paso en construir una Galería NFT interactiva usando el API NFT GraphQL de QuickNode, icy.tools, JavaScript, Next.js y Tailwind CSS

En este tutorial, construirás una galería NFT usando el API NFT GrapQL de Quicknode, icy.tools, React, JavaScript, Next.js, Vercel y TailwindCSS. La aplicación web de React proporcionará al usuario una interfaz que muestra una vista cuadrícula de todos los NFTs mantenidos por cualquier Servicio de Nombre Ethereum (Ethereum Name Service, ENS). Buscarás datos NFT con ice-nft-tools.

¿Qué es QuickNode?

QuickNode es una plataforma blockchain que proporciona una infraestructura para que los desarrolladores construyan y escalen aplicaciones descentralizadas (DApps). Ofrece un rango de herramientas y servicios, incluyendo un desarrollador API para que sea más fácil para los desarrolladores construir, probar y desplegar DApps en múltiples redes blockchain. QuickNode apunta a simplificar el proceso de construcción en la blockchain y hacer que sea más accesible para los desarrolladores mientras provee una infraestructura de alto rendimiento que apoya la creciente demanda de aplicaciones descentralizadas.

¿Qué es el API NFT GraphQL de QuickNode?

Únete Gratuitamente al API NFT de GraphQL

La API NFT de GraphQL es un conjunto de servicios y herramientas que permite a los desarrolladores interactuar con las plataformas NFT usando el lenguaje de consulta de GraphQL. Esta API proporciona una forma conveniente para que los desarrolladores descubran, rastreen y analicen NFTs en un piso de tiempo real y volúmenes de datos, gráficos de históricos y datos en tendencias, el valor del portafolio NFT en cualquier cartera y más. Este servicio también permite buscar datos de NFTs que son propiedad de una dirección en particular. En este tutorial, explicaremos cómo usar esta característica.

¡Explora el Mercado de QuickNode!

Además del API NFT de GrapQL, QuickNode ofrece muchas más soluciones y herramientas para los desarrolladores Web3 en su mercado. Esto incluye un estimador de precio de gas, la acuñación cruzada de la API NFT, API GoPlus anti fraude y una biblioteca masiva de guías creadas por expertos, tutoriales, documentación y otros recursos para los desarrolladores.

Al final de este tutorial, serás capaz de:

Instalar, configurar e inicializar el icy-nft-hooks.
Crear un nuevo proyecto Next.js y aprende cómo usar el icy-nft-hooks para interactuar con las APIs NFT GraphQL de QuickNode para retirar los datos.
Buscar y almacenar datos NFT retirados por una dirección de una cartera en la variable de estado y mostrar los resultados a la interfaz del usuario.

Las Funcionalidades

Los usuarios pueden entrar el Servicio de Nombre Ethereum (ENS) en el campo “Ethereum Name Service”.
La aplicación interactuará con el endpoint del proveedor API y buscará los datos NFT usando icy.tools.
La aplicación retorna una galería cuadriculada de todos los NFTs que la dirección de la cartera mantiene en la interfaz del usuario.

El Stack de Tecnología

Framework CSS: TailwindCSS
Proporcionador RPC: QuickNode
Biblioteca JavaScript: Icy-nft-hooks, React
Frontend/Framework: JavaScript, Next.js

Los Prerrequisitos

Ten Git, Yarn, TailwindCSS y Node.js instalados en tu máquina.

Tener un entendimiento básico de JavaScript, React y TailwindCSS.

Paso 1: Crea un proyecto Next.js

Vamos a configurar nuestro entorno e instalar las dependencias necesarias. Abre una terminal en tu máquina y navega a la locación del directorio donde te gustaría almacenar tu proyecto Next.js. Luego, ejecuta el siguiente comando:

yarn create next-app .

Este comando crea un nuevo proyecto Next.js inicial en el directorio especificado. Ahora, inicia el servidor de desarrollo local ejecutando el siguiente comando:

yarn dev

El comando de arriba configura tu entorno de desarrollo local. Copia y pega http://localhost:3000/ en tu navegador web para lanzar el siguiente proyecto Next.js inicial. Aquí está cómo tu navegador web debería verse:

La aplicación actual sólo contiene el código inicial proporcionado por Next.js, el cual modificaremos a través de este tutorial para crear el UI del frontend personalizado para el tablero de nuestro mercado NFT.

Ahora, vamos a instalar Tailwind CSS y sus dependencias necesarias usando npm, ejecutando el siguiente comando en este terminal:

npm install -D tailwindcss postcss autoprefixer

Ejecuta el comando init para generar ambos, los archivos tailwind.config.js y postcss.config.js:

npx tailwindcss init -p

En tu archivo tailwind.config.js, añade los caminos a todos los archivos de las plantillas, actualizando el código con lo siguiente:

Archivo ./tailwind.config.js

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

Añade las directivas @tailwind por cada una de las capas de Tailwind a tu archivo globals.css. El tope de tu archivo globals.css debería verse así:

Archivo ./styles/globals.css

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

...

Paso 2: Instalar la biblioteca icy-nft-hooks

Buscaremos datos en tiempo real usando el API NFT de GraphQL. Instalaremos y configuraremos icy-nft-hooks en una biblioteca React hook como envolvedor para la API GraphQL icy.tools. Esta biblioteca nos permite buscar datos de mercado NFT en tiempo real como el precio piso, las ventas, precio promedio, volúmen, capitalización del mercado, etc.

Instala icy-nft-hooks con el siguiente comando:

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

En el directorio pages, navega al archivo _app.js. Copia y pega el siguiente código en el archivo _app.js.

Archivo: ./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>
  );
}

Vamos a importar el hook IcyProvider desde el paquete icy-nft-hooks y envolviendo toda la aplicación web con el hook IcyProvider.

Paso 3: Obtener la clave de la API NFT

Como puedes ver en el código de arriba, necesitaremos una clave API para buscar los datos del mercado NFT en tiempo real. Para obtener la clave API, sigue estos pasos:

Abre el enlace de icy tools y haz click en el botón “Sign Up”

Coloca los detalles y haz click en el botón “Sign Up”

Te llevará a la página “Explore” icy.tools, donde verás algo similar a:

Haz click en el botón “Settings” en el lado izquierdo. Verás la clave API

Paso 4: Instala el paquete dotenv

Recomiendo almacenar la información sensible, como las claves API, en variables de entorno en vez de harcodearlos en el código. Usaremos el paquete dotenv para almacenar los datos sensibles. Ejecuta el siguiente comando para instalar el paquete dotenv:

yarn add --dev dotenv

Crea un archivo .env en el directorio raíz. Añade una variable del entorno:

QUICKNODE_NFT_API_KEY = "c34kndhiflmln-API-KEY"

Paso 5: Buscar el NFT

En esta sección, crearemos la función WalletNFTs que acepta el ENS como la entrada del usuario y retorna la colección de NFTs que son propiedad de la dirección de entrada. La biblioteca de @quicknode/icy-nft-hook nos proporciona con el método getNFTsByOwner que implementaremos y utilizaremos dentro de nuestra función WalletNFTs. La Galería NFT de la dapp aceptará la entrada para las direcciones de la cartera Ethereum.

Crea un nuevo archivo WalletNFTs.js y copia el código de abajo.

Archivo: ./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, algunos NFTs no tienen imágenes asociadas a ellas. Para resolver esto, añadiremos una imagen por defecto a la cuadrícula mientras tanto, en caso que un NFT no tenga una imagen.

Puedes encontrar la imagen aquí.

Paso 6: Muestra la galería NFT

Ya estamos casi listos con nuestra galería NFT. En este paso, importaremos el componente WalletNFTs desde el archivo WalletNFTs.js y usaremos el archivo index.js.

Archivo: ./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 />
    </>
  );
}

Ahora abre http://localhost:3000/ en tu navegador. Haz creado una galería NFT interactiva.

Paso 7: Desplegar la galería NFT

Ahora vamos a desplegar nuestra aplicación Next.js con Vercel, siguiendo estos pasos:

Ve a Vercel y accede usando tu cuenta de GitHub.
Haz click en el botón New Project y selecciona el repositorio de tu proyecto.
Haz click en el Framework como Next.js.
Entra la variable de tu entorno, QUICKNODE_NFT_API_KEY y el valor establecido por tu clave API.
Haz click en Deploy y ahora, ¡tu Galería NFT está en vivo!

Código Base Completo

Repositorio GitHub del proyecto completo: Galería NFT

Enlace de la página web: Página web de la galería NFT

Recursos Adicionales

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🎉

Has completado todo el tutorial. Date una gran palmada en la espalda. Haz aprendido lo siguiente:

Nodo Proveedor de QuickNode
Configurar una aplicación Next.js e integrar Tailwind CSS
Hooks NFT icy.tools: icy-nft-hooks
Obtener la API icy.tools
Configurar y usar el paquete dotenv
Buscar y mostrar los NFTs que son propiedad de la dirección

Espero que hayas aprendido algo nuevo o solventado algún problema. Gracias por leerme. ¡Diviértete!

Puedes seguirme en Twitter, GitHub y Linkedin. ¡Añade tus sugerencias y comentarios!

Este artículo es una traducción de Aayush Gupta, hecha por Héctor Botero. Puedes encontrar el artículo original aquí.
Sería genial escucharte en nuestro Discord, puedes contarnos tus ideas, comentarios, sugerencias y dejarnos saber lo que necesitas.
Si prefieres puedes escribirnos a @web3dev_es en Twitter.

WEB3DEV Español

WEB3DEV Español is a community of amazing gentes