Usando thirdweb

En esta guía, aprenderás cómo construir una DApp en Base utilizando la plataforma thirdweb.

Para lograr esto, desplegarás un contrato inteligente para una colección de NFT y crearás una DApp de galería de NFT para ver los detalles de metadatos de cada NFT dentro de la colección.

Objetivos

Al final de esta guía, deberías ser capaz de:

Crear una colección de NFT y acuñar nuevos NFTs usando thirdweb.
Desarrollar una DApp de galería de NFT utilizando plantillas preconstruidas de thirdweb.

Prerrequisitos

Configuración de una Cartera Coinbase

Para comenzar a desarrollar una DApp en Base, primero necesitas configurar una cartera web3. Recomendamos usar la Cartera Coinbase, que se puede crear fácilmente descargando la extensión de navegador de Cartera Coinbase.

Descargar Cartera Coinbase

Financiamiento de la Cartera

Las transacciones de blockchain, incluido el despliegue de contratos inteligentes, requieren una tarifa de gas. Por lo tanto, debes financiar tu cartera con Ether (ETH) para cubrir estos costos. Esta guía se centra en desplegar un contrato en la red de prueba Base Goerli, y puedes financiar tu cartera con ETH de Base Goerli a través de las siguientes opciones:

Faucet de Coinbase (Base Goerli)

Grifos de Cartera Coinbase

Puedes encontrar pasos detallados sobre cómo financiar tu cartera con ETH de Base Goerli en la sección Grifos de Red.

Creando una Colección de NFT

Antes de desarrollar una DApp, necesitas crear una colección de NFT a través de thirdweb.

Sigue estos pasos para configurar tu colección de NFT:

Visita el panel de control de thirdweb.
Haz clic en el botón Conectar Cartera ubicado en la esquina superior derecha para conectar tu cartera.
Desde el panel, selecciona Explorar contratos para ver una lista de contratos inteligentes desplegables.
Navega a la sección de NFTs y selecciona el contrato inteligente de Colección de NFT.
Haz clic en el botón Desplegar ahora.
Proporciona los detalles requeridos para tu colección de NFT:
- Metadatos del contrato (es decir, imagen, nombre, símbolo, descripción)
- Red (Elige Base Goerli Testnet)
Haz clic en Desplegar Ahora.

INFO

Para despliegues en producción / mainnet, selecciona Base (mainnet) como la red en lugar de Base Goerli.

Después del despliegue, puedes gestionar tu contrato inteligente a través del panel de control de thirdweb.

Actualmente, tu Colección de NFT no tiene NFTs. Para poblar nuestra próxima DApp de Galería de NFT, necesitaremos crear varios NFTs.

Sigue los pasos a continuación para acuñar nuevos NFTs:

Visita el panel de control de thirdweb.
Desde el panel, selecciona Ver contratos para ver todos tus contratos previamente desplegados.
Selecciona el contrato inteligente de Colección de NFT que desplegaste.
Navega a la pestaña de NFTs en la barra lateral izquierda.
Haz clic en Acuñar (Mint).
Rellena los detalles de metadatos para el NFT (nombre, medio, descripción, propiedades).
Haz clic en Acuñar NFT (Mint NFT).
Repite estos pasos para acuñar tantos NFTs como desees.

Construyendo una DApp de Galería NFT

Con una Colección de NFT en su lugar, es hora de construir una DApp de Galería NFT. La CLI de thirdweb ofrece varias plantillas preconstruidas e iniciales para casos de uso populares de DApp, lo que puede acelerar significativamente tu proceso de desarrollo de DApp.

En esta guía, utilizaremos la CLI de thirdweb para generar un nuevo proyecto DApp utilizando la plantilla de Galería NFT.

Ejecuta el siguiente comando:

npx thirdweb create --template nft-gallery

Por defecto, la plantilla está configurada para una colección NFT en Ethereum Mainnet. Modificaremos el código para adaptar nuestra colección NFT en Base Goerli Testnet.

Sigue estos pasos para actualizar la plantilla:

Abre el proyecto con tu editor de código preferido.
Abre el archivo src/consts/parameters.ts.
Actualiza la variable contractAddress con la dirección del contrato de tu colección NFT (encontrada en el panel de thirdweb).
Actualiza la variable chain a base-goerli.
Actualiza la variable blockExplorer a https://goerli.basescan.org.
Abre el archivo src/main.tsx.
Reemplaza el contenido del archivo con el siguiente código:

javascriptCopy code
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
import { ThirdwebProvider } from "@thirdweb-dev/react";
import { BaseGoerli } from "@thirdweb-dev/chains";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <ThirdwebProvider activeChain={BaseGoerli}>
      <App />
    </ThirdwebProvider>
  </React.StrictMode>,
);

El código anterior importa y utiliza BaseGoerli como activeChain.

INFO

Para despliegues en producción / mainnet, actualiza la información anterior para que la variable chain sea base (paso ii), el blockExplorer sea https://basescan.org (paso iii) y actualiza ambas instancias de BaseGoerli a Base en el código de ejemplo de javascript.

Ejecutando la Aplicación

Con la cadena Base Goerli Testnet actualizada y la dirección de tu colección NFT, puedes ver tu colección NFT desde la aplicación.

Para iniciar la aplicación, ejecuta el siguiente comando desde el directorio raíz:

yarn dev

Conclusión

¡Felicidades por llegar al final de esta guía! Ahora has aprendido cómo crear una colección NFT usando Thirdweb, acuñar nuevos NFTs y construir una DApp de galería NFT en la blockchain de Base.

Como siguiente paso, consulta otros contratos inteligentes preconstruidos y plantillas iniciales proporcionadas por la plataforma thirdweb que pueden ayudarte a construir tu próxima DApp en Base.

PreviousConstruyendo una dApp NextCorriendo un Nodo en Base

Last updated 1 year ago

javascriptCopy code import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; import "./index.css"; import { ThirdwebProvider } from "@thirdweb-dev/react"; import { BaseGoerli } from "@thirdweb-dev/chains"; ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( <React.StrictMode> <ThirdwebProvider activeChain={BaseGoerli}> <App /> </ThirdwebProvider> </React.StrictMode>, );