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 create en 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 contract

Esto iniciará una serie interactiva de preguntas que te ayudarán a empezar:

• Dale un nombre a tu proyecto

• Selecciona Hardhat como marco

• Selecciona ERC721 como contrato base

• Selecciona None para 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 ERC721Base

• Implementando 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:

yarn deploy

¡Ya está! 🥳 Este comando hace lo siguiente:

• Compila tu contrato

• Sube el código fuente de tu contrato (ABI) a IPFS

• 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:

npx thirdweb deploy

¡Ya está! 🥳 Este comando hace lo siguiente:

• Compila tu contrato

• Sube el código fuente de tu contrato (ABI) a IPFS

• 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 app

Esto 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:

yarn deploy

¡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

• Documentación thirdweb

• Blog Oficial

• Guías Oficiales

• Plantillas

• Youtube Oficial

• Youtube Español

• Eventos

• Discord Oficial

• Support

• Twitter Oficial

• Twitter Oficial ES

• Twitter Oficial JP

• Blogs y guías en Español

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!

https://thirdweb.com

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.