Introducción
En esta guía de inicio, te mostraremos cómo construir y desplegar una aplicación web3 completa. Aprenderás a:
Crear y desplegar un contrato inteligente
Gestionar tu contrato desde el panel de control
Construir una aplicación React utilizando el SDK para interactuar con el contrato
Si eres de los que aprendes mejor visualmente te dejo el canal de Youtube de mis compañeros de thirdweb https: www.youtube.com @thirdweb_/videos y en concreto este de Jarrot Wats, Developer experience engineer de thirdweb:
Suscríbete al canal en español si quieres que subamos todo el contenido en video en español
https: www.youtube.com @thirdwebes
Antes de empezar
Te recomendamos que tengas instaladas las siguientes herramientas antes de empezar:
Node.js y npm: Para instalar nuestro SDK en tu proyecto.
Yarn: Para ejecutar scripts en nuestra app React.
Git: Para usar el comando
createen nuestra CLI.
Despliega un contrato inteligente
Es posible que quieras crear un contrato inteligente desde cero o desplegar uno prediseñado que satisfaga tus necesidades; ofrecemos soluciones para crear y desplegar cualquier contrato inteligente.
Explore
Contratos seguros, optimizados para el gas y auditados, listos para desplegarse con un solo clic.
Desde la página Explore, puedes elegir entre una colección curada de contratos inteligentes optimizados para gas, auditados y probados, construidos por protocolos de código abierto de confianza y por el equipo de thirdweb; listos para desplegar en un clic.
Por ejemplo, seleccionemos el contrato inteligente NFT Collection creado por el equipo de thirdweb:
Desde esta página, podemos descubrir las características del contrato, ver su código fuente, ver qué extensiones implementa y desplegarlo en la blockchain de nuestra elección.
Haz clic en el botón "Deploy Now" para entrar en el flujo de despliegue, e introduce los metadatos de tu contrato inteligente; como su nombre, símbolo, imagen y descripción:
Por último, seleccione la red en la que quieres desplegar el contrato inteligente y haz clic en "Deploy Now"
Una vez desplegado tu contrato, se te redirigirá al panel de control de tu contrato.
Construye tu propio SmartContract
Crea contratos personalizados específicos para su caso de uso utilizando el SDK de Solidity.
Creando el proyecto
Podemos utilizar el CLI para crear un nuevo proyecto con un contrato inteligente dentro, y [Solidity SDK]](/solidity) instalado para nosotros.
npx thirdweb create contractEsto iniciará una serie interactiva de preguntas que te ayudarán a empezar:
Dale un nombre a tu proyecto
Selecciona
Hardhatcomo marcoSelecciona
ERC721como contrato baseSelecciona
Nonepara las extensiones opcionales
Explorando el proyecto
El comando create genera un nuevo directorio con el nombre de tu proyecto. Abre este directorio en tu editor de texto.
Dentro de la carpeta contracts, encontrarás un archivo Contract.sol; ¡este es nuestro contrato inteligente escrito en Solidity!
Si echamos un vistazo al código, puedes ver que nuestro contrato está heredando la funcionalidad de ERC721Base, por:
Importar el contrato
Heredar el contrato; declarando que nuestro contrato es
ERC721BaseImplementando los métodos necesarios, como el
constructor
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
import "@thirdweb-dev/contracts/base/ERC721Base.sol";
contract Contract is ERC721Base {
constructor(
string memory _name,
string memory _symbol,
address _royaltyRecipient,
uint128 _royaltyBps
) ERC721Base(_name, _symbol, _royaltyRecipient, _royaltyBps) {}
}Este patrón de herencia nos permite utilizar la funcionalidad de otros contratos dentro del nuestro, modificarla y añadir lógica personalizada.
Por ejemplo, nuestro contrato actualmente implementa toda la lógica dentro del contrato ERC721Base.sol; que implementa el estándar ERC721A con varias extensiones útiles.
Añadiendo extensiones
Las extensiones son una gran manera de añadir piezas individuales de funcionalidad a su contrato, como los Permisos.
Puedes seguir el mismo patrón que seguimos con el contrato base para añadir una extensión:
Importar
import "@thirdweb-dev contracts extension PermissionsEnumerable.sol";Heredad
contract Contract is ERC721Base, PermissionsEnumerable {
// ...
}Implementar
contract Contract is ERC721Base, PermissionsEnumerable {
constructor(
string memory _name,
string memory _symbol,
address _royaltyRecipient,
uint128 _royaltyBps
) ERC721Base(_name, _symbol, _royaltyRecipient, _royaltyBps) {
// Give the contract deployer the "admin" role when the contract is deployed.
_setupRole(DEFAULT_ADMIN_ROLE, msg.sender);
}
// Example: Only allow the "admin" role to call this function.
function helloWorld() external onlyRole(DEFAULT_ADMIN_ROLE) {
// ...
}
}¡Ya está! 🥳 ¡Acabas de hacer un contrato inteligente de cobro ERC721A NFT con controles de permisos!
Desplegar
Vamos a desplegar nuestro contrato en la blockchain, ejecutando el siguiente comando:
¡Ya está! 🥳 Este comando hace lo siguiente:
Compila tu contrato
Abre el dashboard para que selecciones una de nuestras redes soportadas para desplegar en ella
En primer lugar, tenemos que introducir los valores para el constructor de nuestro contrato:
_name: El nombre de nuestro contrato_symbol: El símbolo o "ticker" que se da a los tokens de nuestro contrato_royaltyRecipient: La dirección del monedero que recibirá los royalties de las ventas secundarias_royaltyBps: Los puntos básicos (bps) que se darán al receptor de royalties por cada venta secundaria, por ejemplo 500 = 5%.
Por último, selecciona la red en la que deseas desplegar (recomendamos la red de prueba Mumbai), y haz clic en "Deploy Now".
Una vez desplegado tu contrato, se te redirigirá al panel de control de tu contrato.
Despliegue desde la fuente
¿Ya tiene un contrato listo para desplegar? Aprenda a utilizar nuestro CLI interactivo para enviarlo.
Despliegue de tu contrato inteligente
Utilice el CLI para desplegar su contrato inteligente en la blockchain.
Desde el mismo directorio que tu archivo de contrato inteligente .sol, ejecuta el siguiente comando:
¡Ya está! 🥳 Este comando hace lo siguiente:
Compila tu contrato
Abre el dashboard para que selecciones una de nuestras redes soportadas para desplegar en ella
Abre la URL generada en tu navegador y rellena los campos del constructor de tu contrato inteligente.
Por último, selecciona la red en la que deseas desplegar (recomendamos la red de prueba Mumbai), y haz clic en "Deploy Now".
Una vez desplegado tu contrato, se te redirigirá al panel de control de tu contrato.
Gestión de contratos
El panel de control es una ubicación central donde puedes gestionar y analizar tu contrato inteligente, con herramientas que te permiten realizar operaciones administrativas comunes, con funciones como:
Explorador de contratos: Ejecuta cualquier función en tu contrato y revisa los resultados en tiempo real.
Eventos: Feed actualizado en tiempo real de los eventos emitidos por su contrato.
Ajustes: Actualiza los metadatos del contrato, los royalties y las tarifas de la plataforma, etc.
Fuentes: Vista de todo el código fuente de su contrato y verificación del contrato en Etherscan.
Código: Aprende a utilizar el SDK para interactuar con tu contrato
Cada extensión que implementes desbloqueará funciones adicionales en el panel de control. Por ejemplo, el contrato que implementaste en el paso anterior tiene desbloqueadas las pestañas NFTs y Permissions
Explorador de contratos
Conecta tu monedero y ejecuta cualquier función disponible en tu contrato inteligente directamente desde el panel de control.
NFTs
Como nuestro contrato implementa el estándar ERC721, desbloqueamos la pestaña NFTs en el panel de control.
Aquí podemos ver todos los NFT minteados por nuestro contrato, e incluso mintear nuevos.
Permissions
Como nuestro contrato también implementa la extensión Permissions, desbloqueamos la pestaña Permisos en el panel de control.
Invita fácilmente a los miembros de tu equipo con niveles de permiso escalonados y gestiona su acceso a tu contrato.
Builds
La pestaña Build proporciona los pasos para crear una nueva aplicación con nuestro SDK, e interactuar con tu contrato.
Veamos a continuación cómo podemos utilizar el SDK para crear una aplicación web.
Construye una aplicación Web3
Utiliza el CLI para crear una aplicación web con los SDK de React y TypeScript preconfigurados:
npx thirdweb create appEsto iniciará una serie interactiva de preguntas que te ayudarán a empezar:
Dale un nombre a tu proyecto
Selecciona Next.js como framework
Selecciona JavaScript como lenguaje
El tutorial, a diferencia de la captura, será con JavaScript. Si quieres conocer más sobre TypeScript tienes más información aquí
Explorando el proyecto
El comando create genera un nuevo directorio con el nombre de su proyecto. Abre este directorio en tu editor de texto.
Dentro del archivo index.js, encontrarás el ThirdwebProvider envolviendo toda la aplicación.
Este wrapper nos permite utilizar todos los ganchos de React SDK y los componentes de interfaz de usuario en toda la aplicación, así como configurar un activeChain, que declara en qué cadena se despliegan nuestros contratos inteligentes.
Dado que hemos desplegado nuestro contrato inteligente en la red Mumbai, vamos a establecer el activeChain a "mumbai"
Interactuando con los contratos
Con el SDK instanciado, ya puedes desplegar contratos inteligentes, interactuar con ellos y mucho más.
Para conectarse al contrato, utiliza el método getContract del SDK y el método call para leer/escribir datos.
Las funciones se llaman automáticamente desde la cartera con la que instancias el SDK.
import { useContract } from "@thirdweb-dev/react";
export default function Home() {
const { contract } = useContract("<CONTRACT_ADDRESS>");
// Ahora puedes utilizar el contrato en el resto del componente.
}Ahora puedes llamar a cualquier función de tu contrato inteligente con los hooks useContractRead y useContractWrite. Cada extensión que implementes en tu contrato inteligente también desbloquea una nueva funcionalidad para que la utilices en el SDK.
Veamos cómo funciona esto leyendo los NFTs de nuestro contrato inteligente y acuñando nuevos.
Lectura de datos
El contrato NFT Collection que construimos anteriormente implementa las extensiones ERC721 y ERC721Supply.
Al hacerlo, podemos utilizar la funcionalidad "View All" en nuestra aplicación. En el SDK de React, esto está disponible a través del hook useNFTs, que podemos utilizar proporcionando el objeto del contract al hook de la siguiente manera:
import { useContract, useNFTs } from "@thirdweb-dev react";
export default function Home() {
const { contract } = useContract("<CONTRACT_ADDRESS>");
const { data: nfts, isLoading: isReadingNfts } = useNFTs(contract);
}Visualización de datos
Utiliza el componente NFT Media Renderer para renderizar cada uno de los NFT cargados desde el hook useNFTs, haciendo uso del estado de carga en una sentencia condicional:
import { useContract, useNFTs, ThirdwebNftMedia } from "@thirdweb-dev react";
export default function Home() {
const { contract } = useContract("<CONTRACT_ADDRESS>");
const { data: nfts, isLoading: isReadingNfts } = useNFTs(contract);
return (
<>
{isReadingNfts ? (
<p>Loading...< p>
) : (
<div>
{nfts?.map((nft) => (
<ThirdwebNftMedia metadata={nft.metadata} key={nft.metadata.id} >
))}
</div>
)}
</>
);
}Escritura de transacciones
Dado que nuestro contrato inteligente implementa la extensión ERC721Mintable, la función mint está disponible para nosotros en el SDK.
Utiliza el componente Web3Button para realizar una transacción mint; lo que asegura que el usuario tiene su monedero conectado y está en la red correcta antes de llamar a la función:
// Coloca este import en la parte superior del archivo
import { Web3Button } from "@thirdweb-dev/react";
// ...
// Colóquelo debajo de su lógica de visualización NFT existente:
<Web3Button
contractAddress={"<CONTRACT_ADDRESS>"}
action={(contract) =>
contract.erc721.mint({
name: "Hello world!",
// Coloca aquí cualquier URL o archivo
image: "<your-image-url-here>",
})
}
>
Mint NFT
</Web3Button>;Despliega tu aplicación
Para alojar tu aplicación en IPFS y compartirla con el mundo, ejecuta el siguiente comando:
¡Ya está! 🥳 Este comando utiliza Storage para:
Compilar para producción
Subir la compilación a IPFS
Generar una URL donde tu app esté alojada permanentemente.
Comparte con nosotros tu aplicación
https: twitter.com thirdweb_es
¿Y ahora qué?
¡Enhorabuena por haber llegado hasta aquí! 🎉
Ahora que has aprendido lo básico, lleva tus habilidades al siguiente nivel construyendo sobre nuestras plantillas.
Recursos adicionales
Si tienes alguna pregunta, únete a los más de 36.000 creadores de nuestra comunidad de Discord, o ponte en contacto directamente con el equipo para obtener más información sobre cómo empezar con thirdweb.
Y si quieres empezar a construir aplicaciones web3, empieza con las herramientas web3 y SDKs de thirdweb - ¡son gratis!
thirdweb: The complete web3 development framework
Web3 Developers use thirdweb Total Contracts Deployed Without thirdweb (88 lines) Anyone can use thirdweb tools without our permission. The code for our contracts, SDKs, dashboard and UI components are open source and available to everyone. Apps and contracts built with our tools are completely owned by you.
