# Documentación thirdweb: Cómo empezar *En esta guía de iniciación, te mostraremos cómo crear y desplegar una aplicación web3 completa.* By [thirdweb ES](https://paragraph.com/@samusarmiento) · 2023-06-05 thirdweb, thirdweb_es, documentacion-thirdweb --- 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://thirdweb.com/) [https: www.youtube.com @thirdweb\_/videos](https://www.youtube.com/@thirdweb_/videos) y en concreto este de [Jarrot Wats](https://twitter.com/jarrodWattsDev), _Developer experience engineer_ de thirdweb: [![](https://paragraph.xyz/editor/youtube/play.png)](https://www.youtube.com/watch?v=fzsz-b2JV9U) Suscríbete al canal en español si quieres que subamos todo el contenido en video en español [https: www.youtube.com @thirdwebes](https://www.youtube.com/@thirdwebes) * * * ### Antes de empezar Te recomendamos que tengas instaladas las siguientes herramientas antes de empezar: * [Node.js y npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm): Para instalar nuestro SDK en tu proyecto. * [Yarn](https://classic.yarnpkg.com/en/docs/install/#mac-stable): Para ejecutar scripts en nuestra app React. * [Git](https://git-scm.com/downloads): 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_**](https://thirdweb.com/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](https://thirdweb.com/thirdweb.eth/TokenERC721) creado por el equipo de thirdweb: ![](https://storage.googleapis.com/papyrus_images/533b3c8abfed46e18fb08d15dfd2a7a9.png) Desde esta página, podemos descubrir las características del contrato, ver su código fuente, ver qué [extensiones](https://portal.thirdweb.com/solidity/extensions) 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: ![](https://storage.googleapis.com/papyrus_images/bd8bce0b378ed2cf4a70dd737987dd5c.png) Por último, seleccione la red en la que quieres desplegar el contrato inteligente y haz clic en _"Deploy Now"_ ![](https://storage.googleapis.com/papyrus_images/d060e1d62a66be5a89482b49349d9cf5.png) 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](https://portal.thirdweb.com/solidity/base-contracts/erc721base) * Selecciona `None` para las [extensiones](https://portal.thirdweb.com/solidity/extensions) 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](https://portal.thirdweb.com/solidity/base-contracts/erc721base), por: * [Importar](https://solidity-by-example.org/import/) el contrato * [Heredar](https://docs.soliditylang.org/en/v0.8.17/contracts.html#inheritance) el contrato; declarando que nuestro contrato es `ERC721Base` * Implementando los [métodos necesarios](https://docs.soliditylang.org/en/v0.8.17/contracts.html#constructors), 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](https://github.com/thirdweb-dev/contracts/blob/main/contracts/base/ERC721Base.sol); que implementa el estándar [ERC721A](https://github.com/thirdweb-dev/contracts/blob/main/contracts/eip/ERC721A.sol) con varias [extensiones](https://portal.thirdweb.com/solidity/extensions) útiles. ### Añadiendo extensiones Las [extensiones](https://portal.thirdweb.com/solidity/extensions) son una gran manera de añadir piezas individuales de funcionalidad a su contrato, como los [Permisos](https://portal.thirdweb.com/solidity/extensions/permissions). 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](https://portal.thirdweb.com/deploy) 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](https://docs.soliditylang.org/en/v0.8.17/abi-spec.html)) a [IPFS](https://docs.ipfs.tech/concepts/what-is-ipfs/) * Abre el [dashboard](https://portal.thirdweb.com/dashboard) para que selecciones una de nuestras redes soportadas para desplegar en ella ![](https://storage.googleapis.com/papyrus_images/4adb18652190e3065478a849cc890f23.png) thirdweb CLI - thirdweb deploy 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"_. ![Deploying your contract using the thirdweb dashboard](https://storage.googleapis.com/papyrus_images/b565fa50e98194d69a2908b0270cd014.png) 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](https://portal.thirdweb.com/cli) para [desplegar](https://portal.thirdweb.com/deploy) 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](https://docs.soliditylang.org/en/v0.8.17/abi-spec.html)) a [IPFS](https://docs.ipfs.tech/concepts/what-is-ipfs/) * Abre el [dashboard](https://portal.thirdweb.com/dashboard) para que selecciones una de nuestras redes soportadas para desplegar en ella ![](https://storage.googleapis.com/papyrus_images/4adb18652190e3065478a849cc890f23.png) thirdweb CLI - thirdweb deploy 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"_. ![Deploying your contract using the thirdweb dashboard](https://storage.googleapis.com/papyrus_images/b565fa50e98194d69a2908b0270cd014.png) Una vez desplegado tu contrato, se te redirigirá al panel de control de tu contrato. Gestión de contratos ==================== El [panel de control](https://portal.thirdweb.com/dashboard) 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](https://docs.soliditylang.org/en/v0.8.17/contracts.html#events) 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](https://portal.thirdweb.com/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. ![](https://storage.googleapis.com/papyrus_images/f72ddf835ec19636c72a44afb79f833b.png) NFTs ---- Como nuestro contrato implementa el estándar [ERC721](https://portal.thirdweb.com/solidity/extensions/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. ![](https://storage.googleapis.com/papyrus_images/84137139391c7828a96e348a0df4d6ba.png) _Permissions_ ------------- Como nuestro contrato también implementa la extensión [_Permissions_](https://portal.thirdweb.com/solidity/extensions/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. ![](https://storage.googleapis.com/papyrus_images/5e4c5f450e89bcbfc7fad08a84308a64.png) _Builds_ -------- La pestaña _Build_ proporciona los pasos para crear una nueva aplicación con nuestro [SDK](https://portal.thirdweb.com/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](https://portal.thirdweb.com/react) y [TypeScript](https://portal.thirdweb.com/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 ![](https://storage.googleapis.com/papyrus_images/71020878d4e421a8f2915f9b50a6530c.png) > El tutorial, a diferencia de la captura, será con JavaScript. Si quieres conocer más sobre TypeScript tienes más información [aquí](https://portal.thirdweb.com/typescript) 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](https://portal.thirdweb.com/react/react.thirdwebprovider) envolviendo toda la aplicación. Este wrapper nos permite utilizar todos los ganchos de [React SDK](https://portal.thirdweb.com/react) y los [componentes de interfaz de usuario](https://portal.thirdweb.com/react/react.web3button) 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(""); // 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](https://portal.thirdweb.com/solidity/extensions) que implementes en tu contrato inteligente también desbloquea una nueva funcionalidad para que la utilices en el [SDK](https://portal.thirdweb.com/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](https://portal.thirdweb.com/solidity/base-contracts/erc721base) y [ERC721Supply](https://portal.thirdweb.com/solidity/extensions/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(""); const { data: nfts, isLoading: isReadingNfts } = useNFTs(contract); } ### Visualización de datos Utiliza el componente [NFT Media Renderer](https://portal.thirdweb.com/react/react.thirdwebnftmedia) 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(""); const { data: nfts, isLoading: isReadingNfts } = useNFTs(contract); return ( <> {isReadingNfts ? (

Loading...< p> ) : (

{nfts?.map((nft) => ( ))}
)} ); } ### 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](https://portal.thirdweb.com/react/react.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: "} action={(contract) => contract.erc721.mint({ name: "Hello world!", // Coloca aquí cualquier URL o archivo image: "", }) } > Mint NFT ; ### 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_](https://portal.thirdweb.com/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](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](https://portal.thirdweb.com/templates). ### Recursos adicionales * [**Documentación thirdweb**](https://portal.thirdweb.com/) * [**Blog Oficial**](https://blog.thirdweb.com/) * [**Guías Oficiales**](https://blog.thirdweb.com/guides/) * [**Plantillas**](https://portal.thirdweb.com/templates) * [**Youtube Oficial**](https://www.youtube.com/thirdweb) * [**Youtube Español**](https://www.youtube.com/@thirdwebes) * [**Eventos**](https://thirdweb.com/events) * [**Discord Oficial**](https://discord.com/invite/thirdweb) * [Support](https://support.thirdweb.com/) * [Twitter Oficial](https://twitter.com/thirdweb) * [Twitter Oficial ES](https://twitter.com/thirdweb_es) * [Twitter Oficial JP](https://twitter.com/thirdweb_jp) * [Blogs y guías en Español](https://paragraph.xyz/@samusarmiento) * * * [Subscribe](https://paragraph.xyz/@samusarmiento/subscribe) * * * Si tienes alguna pregunta, únete a los más de 36.000 creadores de nuestra comunidad de [Discord](https://discord.com/invite/thirdweb), o [ponte en contacto](https://thirdweb.typeform.com/to/ZV3gUhiP?typeform-source=thirdweb.com&ref=blog.thirdweb.com) 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.png) 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. ](https://thirdweb.com/?ref=blog.thirdweb.com) --- *Originally published on [thirdweb ES](https://paragraph.com/@samusarmiento/thirdweb-como-empezar)*