Masterclass de Web3 - Construyendo tu primer dApp

Rate this content
Bookmark

En este masterclass, aprenderás cómo construir tu primer dApp de pila completa en la cadena de bloques Ethereum, leyendo y escribiendo datos en la red, y conectando una aplicación de front-end al contrato que has desplegado. Al final del masterclass, entenderás cómo configurar un entorno de desarrollo de pila completa, ejecutar un nodo local, e interactuar con cualquier contrato inteligente utilizando React, HardHat y Ethers.js.

145 min
12 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Este masterclass cubre la construcción de un dApp de React y la programación de pagos en contratos inteligentes. Explora la tecnología Web3, el protocolo Rweave, la red Solana y MetaMask. Los participantes aprenden a instalar dependencias, configurar un entorno de Hard Hat y desplegar contratos en una red local. También interactúan con la red Ethereum, despliegan contratos de tokens y envían tokens utilizando MetaMask. El masterclass destaca los casos de uso de la tecnología blockchain, la permanencia de datos en la cadena de bloques y el potencial de integración de criptomonedas en plataformas de juegos y redes sociales.

Available in English

1. Introducción al Masterclass

Short description:

En este masterclass, construiremos una dApp de React y seguiremos los pasos descritos en el readme. El masterclass tomará aproximadamente tres horas para completarse, con tiempo para explicaciones y preguntas. Al final, habrá un pequeño desafío y recursos adicionales para explorar.

Vale, entonces, sí, si haces clic en el enlace y vas al repositorio de GitHub, verás que tenemos esta dApp de React. Esta es más o menos la base de código que puedes usar como referencia. Pero el material del masterclass en sí está en este readme que estás viendo justo aquí. Y la idea aquí no es clonar esto y hacer algo con ello, sino más bien seguir los pasos a medida que vamos avanzando en todo esto. Y tenemos un buen tiempo reservado para esto. Así que tenemos aproximadamente tres horas para construir esto. Y vamos a cubrir bastante. Así que si solo estuvieras siguiendo esto extremadamente rápido, ya sabes, sin siquiera leer nada, solo copiando y pegando el código, podrías terminar este masterclass en unos 20 o 30 minutos. Pero verás que cuando realmente estemos recorriendo esto, explicando, ya sabes, todas las cosas que están sucediendo y espero respondiendo preguntas, deberíamos ocupar probablemente las tres horas completas. Y luego hay un pequeño desafío al final donde puedes tomar algunas de las cosas que has aprendido hoy e intentar extenderlas un poco. Y luego tengo algunos enlaces a recursos adicionales que puedes seguir cuando hayas terminado con esto.

2. Introducción a Web3 y Pagos en Contratos Inteligentes

Short description:

Bienvenidos a este masterclass donde exploraremos la pila Web3 y sus componentes principales. Soy Nader Dabit, actualmente trabajando en el espacio de criptomonedas, Web3 y blockchain. Llevo aproximadamente cinco meses y medio en este campo, con experiencia previa en DevRel en AWS y capacitación para empresas como Amazon y Microsoft. Me fasciné con Web3 a finales de 2020 y decidí dejar mi trabajo para trabajar en este espacio. En este masterclass, aprenderás los conceptos básicos de programar pagos en contratos inteligentes, que es un aspecto fascinante de la tecnología Web3.

Con eso dicho, bienvenidos a este masterclass. Quería agradecer a todos por tomar tiempo de sus agendas extremadamente ocupadas para asistir a esto. Espero que al finalizar esto, tengan una buena comprensión de cómo funciona gran parte de la pila Web3, o al menos las piezas principales de la pila Web3. Espero que tengan algunos momentos reveladores que los emocionen acerca de trabajar en este espacio, o tal vez simplemente comprendan lo que está sucediendo aquí para decidir si esto es algo que desean seguir persiguiendo o no. Pero, independientemente de lo que suceda, creo que este es un conjunto de habilidades bueno para comprender al menos para el futuro de su carrera y cosas por el estilo, especialmente con toda la atención y emoción que están comenzando a ver en torno a Web3 y cómo las personas están construyendo aplicaciones utilizando muchos de estos protocolos cripto-económicos a los que las personas se refieren típicamente como cripto. Así que sí, puedo dar una introducción sobre mí. Mi nombre es Nader Dabit. Actualmente trabajo en el espacio de criptomonedas, el espacio Web3 y el espacio blockchain. Todas estas cosas se correlacionan entre sí y se superponen. Pero llevo aproximadamente cinco meses y medio en este espacio, creo que desde abril. Antes de esto, trabajé en DevRel en AWS durante más de tres años, realmente tuve una gran experiencia allí y todavía disfruto trabajar con mucha de esa tecnología también. Y antes de eso, estaba brindando capacitación para grandes empresas como Amazon y Microsoft, enseñándoles cómo construir aplicaciones móviles. Y antes de eso, solo era un desarrollador de software. Pero realmente me interesé en el espacio Web3 a fines de 2020, principios de 2021, no hace mucho tiempo. Realmente después de sumergirme en algunos de los proyectos que me interesaban y ver la propuesta de valor para mí como desarrollador de software, porque antes de esto, era un especulador en cripto en el sentido de que compraba y vendía tokens y cosas por el estilo. Y en realidad no estaba al tanto del hecho de que las personas estaban construyendo programas y que muchas cosas podrían cambiar en los próximos años debido a este avance tecnológico. Así que me emocioné mucho e interesé en el espacio y decidí dejar mi trabajo realmente cómodo en AWS y rechazar muchos otros trabajos para trabajar en una startup que solo tenía alrededor de un mes en ese momento. Ha sido muy divertido. En este masterclass, espero que puedas aprender la pila básica para darte una idea de cómo algunas de estas cosas podrían ser interesantes. Y creo que una de las cosas más interesantes que podrías ver en este masterclass es lo fácil que es programar pagos en un programa. Ahora, si alguna vez has trabajado con algo como Stripe o PayPal, o Dios te ayude si has trabajado con una API de un banco real, te das cuenta de lo complejo que es todo para hacer que todas estas cosas funcionen solo para habilitar pagos digitales. Y los pagos en sí son complejos, pero la infraestructura subyacente es mucho más compleja en órdenes de magnitud. Así que lo fácil que es programar pagos en un contrato inteligente para mí fue realmente interesante. Y fue una de las cosas que realmente me emocionó al imaginar todas las futuras posibilidades que las personas podrían construir en este tipo de programas.

3. Descripción general del masterclass y requisitos previos

Short description:

Este masterclass cubrirá un ejemplo básico de hola mundo, la programación de tokens y la transferencia de pagos entre partes. Proporciona una visión general de lo que puedes hacer con contratos inteligentes. Tomaremos un descanso a la hora y media. Los requisitos previos son Node.js y Metamask, que instalaremos desde cero.

Este masterclass va a repasar un ejemplo muy, muy básico de hola mundo, y luego veremos cómo programar tokens y mostraremos cómo transferir tokens o pagos entre partes. Y aunque la implementación real de algunos de estos podría ser más bien un simple hola mundo tipos de implementaciones y es posible que no uses estos contratos inteligentes reales en el mundo real, es una buena visión general o ejemplo de lo que podrías hacer.

Entonces, dicho esto, vamos a comenzar y vamos a tomar un descanso a la hora y media. Tenemos tres horas. Es posible que pasemos las tres horas completas. Es posible que terminemos un poco antes. No estoy seguro. Pero a la hora y media, que para mí será a las 12:30 p.m. hora central, tomaremos un descanso de 10 o 15 minutos para que las personas puedan comer algo o beber o usar el baño o algo así.

Antes de comenzar, los dos requisitos previos para este masterclass son que tengas Node.js instalado en tu máquina. Y recomiendo encarecidamente usar NVM, Node Version Manager, o usar FNM, que es un administrador de versiones de Node escrito en Rust. Y asumo que si estás aquí, probablemente ya lo tengas instalado. Pero si no lo tienes, te recomendaría que lo instales. No requiere mucho instalar Node usando NVM. Y uso estos administradores de versiones de Node porque diferentes entornos requieren diferentes versiones de Node.js y esto facilita mucho cambiar entre ellas. Lo otro que es un requisito previo es Metamask. Pero en realidad vamos a instalar Metamask desde cero. Y Metamask es una billetera de Ethereum y una billetera de criptomonedas. Pero también es cómo te autenticas en aplicaciones Web3.

4. Rweave, Solana y Metamask

Short description:

En esta parte, discutiremos el protocolo Rweave para almacenar datos para siempre y su uso en una plataforma de blogs. También exploraremos la red Solana como una blockchain alternativa con costos de transacción más bajos. Además, presentaremos Metamask, que permite la interacción con varias blockchains de máquinas virtuales Ethereum.

Y aquí puedes ver que también tengo un par de otras billeteras instaladas en mi navegador. Y generalmente anclo todas las diferentes billeteras aquí en mis pines de extensión. Y aquí tengo Rweave, que es un protocolo Web3 para almacenar imágenes. Lo siento, para almacenar datos para siempre. Entonces, en lugar de subir un fragmento de texto o una imagen a S3 donde tienes que pagar una tarifa mensual y si no pagas, es posible que ya no tengas acceso a él. Rweave me resulta interesante porque pagas una tarifa única usando Rweave para almacenar básicamente un fragmento de texto y se queda allí literalmente para siempre. Así que una de las cosas que estoy construyendo en este momento y que pronto compartiré como código abierto es una plataforma de blogs que utiliza Rweave para almacenar publicaciones de blog. Y cuesta alrededor de tres o cuatro centavos almacenar un fragmento de texto grande de un megabyte. Así que tal vez un centavo para almacenar una publicación de blog o algo así. Pero creo que es extremadamente interesante que se quede allí para siempre. Así que estoy construyendo algo así. Entonces verás que cuando comiences a agregar diferentes protocolos y trabajar con diferentes proyectos, tendrás múltiples billeteras. Y esta es una billetera de Phantom y Phantom es para Solana. Y la red Solana es simplemente otra red aparte de Ethereum. Hoy vamos a construir en Ethereum, pero Solana es en realidad otro protocolo de blockchain muy, muy popular que te permite construir contratos inteligentes usando Rust. Y los costos de transacción en Solana son una fracción de lo que son en Ethereum. Y creo que una de las mayores quejas que se están viendo ahora mismo es con Ethereum es que los costos de transacción están empezando a subir. Habrá algunas cosas diferentes que sucederán en Ethereum en los próximos meses para fusionar actualizaciones y hacerlo más escalable y menos costoso. También hay capas superiores en Ethereum que son básicamente el mismo código y se ejecutan por mucho menos costo. Pero también hay blockchains alternativas como Solana que recomendaría revisar. Y hablaré un poco más sobre algunas de estas cosas. Pero lo que vamos a usar es Metamask y Metamask te permite interactuar con cualquier máquina virtual blockchain de Ethereum. Así que Ethereum es como el EVM original, máquina virtual de Ethereum. Pero ahora hay docenas de otras blockchains que usan el EVM. Y solo con tener Metamask puedes interactuar con cualquiera de ellas simplemente cambiando la red. Y lo veremos en un segundo. Dicho esto, ¿alguien tiene alguna pregunta importante antes de comenzar? Y si las tienen, puedo responderlas, si no, continuaremos. Solo voy a abrir el chat rápidamente.

5. Instalación y Configuración de la Cartera Metamask

Short description:

Para comenzar, instalaremos una nueva cartera Metamask y crearemos una nueva cartera con una frase de recuperación. Es importante mantener segura la frase de recuperación y nunca revelarla a nadie. Después de confirmar la frase de recuperación, tendremos nuestra cartera configurada. Podemos acceder a ella a través de la extensión MetaMask, que también nos permite elegir diferentes redes para interactuar.

De acuerdo, genial. Muy bien, entonces si todos quieren seguir, el enlace al código base y el archivo readme y el material del taller están tanto en el chat de Discord como en el chat de Zoom. Lo primero que voy a hacer en lugar de comenzar a construir la aplicación es instalar Metamask. Normalmente ya tengo Metamask instalado, pero lo eliminé antes para poder instalar una nueva Metamask y mostrarte cómo hacer esto. Y si aún no lo has hecho, Metamask me dará básicamente esta frase secreta que, si alguien más la tiene, podrá tomar el dinero que ponga en esta cartera. Así que esta cartera será completamente efímera para mí. La eliminaré cuando termine y mostraré mi frase de paso, pero tú nunca deberías hacer eso realmente. Pero para este taller, lo haré. Pero esto es solo para darte una idea de cómo funciona. Así que voy a continuar. Solo voy a buscar algo como, ya sabes, extensión de cartera Metamask o algo así, y lo primero que debería aparecer es esto. Y ahora puedo hacer clic en descargar y esto lo agregará a Chrome. Y esto me guiará sobre cómo hacerlo. Muy bien, voy a comenzar y crear una nueva cartera aquí. Y voy a configurar una contraseña. Y ahora voy a hacer clic en siguiente y deberíamos obtener nuestra frase de paso. Esta es la frase de recuperación que puedes usar para acceder a tu cartera en cualquier momento en el futuro. La forma en que funcionan estas carteras es que básicamente tienes algo llamado cifrado de clave pública donde se te da una frase semilla y la frase semilla básicamente puede generar una clave privada. La clave privada puede generar una clave pública y la clave pública genera una dirección. Así que con solo tener esta frase de recuperación, puedes revivir y recuperar tu cartera en cualquier momento en el futuro. Por eso recomiendo a las personas que nunca revelen su frase a nadie y especialmente si tienen dinero en ella. Y en segundo lugar, guárdala en un lugar extremadamente seguro. Lo que yo y muchas otras personas hacemos es escribirlo y guardarlo en algún lugar o tal vez tener un par de copias, ponerlo en una caja de seguridad o algo así. Pero básicamente, dependiendo de cuánto dinero tengas allí, por supuesto, supongo. Pero lo que voy a hacer es simplemente copiar esto. Y por supuesto, cuando termine, voy a eliminar esta cartera. Así que voy a hacer clic en siguiente y ahora tengo que confirmar. Así que voy a pegarlo aquí y de esa manera puedo verlo. Así que voy a simplemente, ya sabes, confirmar. Muy bien, después de confirmar esto, deberíamos tener nuestra cartera configurada. Ahora voy a ir a mis extensiones aquí. Y voy a buscar MetaMask, así que ahora debería tener una extensión de MetaMask aquí, y así es como quiero acceder a ella en el futuro. Y verás que tengo cero ETH en mi cartera y ahora deberíamos estar listos para comenzar. Y otra cosa que notarás es que tenemos este menú desplegable aquí y este menú desplegable nos permite elegir en qué red queremos estar. Ahora mismo estamos en la red principal de Ethereum, que es la red de Ethereum. Pero también podemos agregar otras redes. Así que digamos que queremos usar una capa dos de Ethereum como Arbitrum u Optimism. Básicamente podemos agregar eso ya sea desde su sitio web o haciendo clic en RPC personalizado y ingresando la información nosotros mismos. También puedes usar redes que sean compatibles con la máquina virtual EVM o Ethereum como Avalanche o Celo u otras. Así que con solo tener esta cartera, puedes interactuar con todas estas diferentes redes.

6. Construyendo la Aplicación e Instalando Dependencias

Short description:

Utilizaremos Ethers JS y construiremos dos tipos de contratos inteligentes: un contrato de saludo y un contrato de tokens para acuñar y transferir tokens criptográficos. Para comenzar, crea una nueva aplicación React utilizando NPX e instala las dependencias necesarias, incluyendo Ether y Hard Hat. La cartera MetaMask es específica del navegador y se puede utilizar con Chrome, Edge, Brave y Binance Smart Chain. Un contrato es el programa de backend de una aplicación blockchain, también conocido como contrato inteligente.

Muy bien, ahora que tenemos nuestra cartera Ethereum instalada, podemos comenzar a construir nuestra aplicación. Algunas de estas cosas te dan una introducción sobre algunas de las cosas con las que vamos a trabajar. React, vamos a trabajar con MetaMask, ya mencionamos que vamos a trabajar con una biblioteca de cliente web para interactuar con la red. En una aplicación web típica, podrías usar algo como Axios o la biblioteca fetch que es nativa en el navegador en estos días para interactuar con la red. En GraphQL, podrías usar algo como Apollo o Urkel. Pero en Ethereum, en su lugar podrías usar una de las bibliotecas de cliente nativas de Ethereum. Vamos a usar Ethers JS. También está Web3 JS. Y esas son las dos principales con las que podrías interactuar con la red. Pero son muy similares a algo como Axios. Y vamos a construir dos tipos de contratos inteligentes. Uno es un contrato de saludo, y este es el contrato que realmente se te da por el entorno de desarrollo de hard hat con el que vamos a trabajar. Cuando creamos un nuevo proyecto de Ethereum, automáticamente creará un nuevo contrato de ejemplo. Vamos a empezar con ese y usarlo. Y luego, después de eso, vamos a crear un contrato de tokens para acuñar nuestros propios tokens criptográficos. Y luego vamos a transferir esos tokens entre diferentes usuarios. Y creo que eso es realmente interesante porque te muestra cómo transferir estos tokens dentro del contrato inteligente.

Muy bien, para empezar, simplemente queremos crear una aplicación React. Si eres un desarrollador frontend o full stack, probablemente hayas hecho esto un millón de veces, ya sea con React o Vue o cualquier otra cosa. Pero vamos a empezar usando NPX para crear una nueva aplicación React. Copiaré este comando aquí. Y entraré en mi terminal. Y estoy aquí en una carpeta vacía. Y lo que me gustaría hacer es simplemente ejecutar NPX create React app y llamarlo React DEP. Muy bien. Después de haber creado nuestra aplicación, podemos cambiar a ese nuevo directorio. A continuación, queremos instalar nuestras dependencias, puedes usar tanto NPM como Yarn y puedes copiar esto en tu portapapeles si quieres. Y esto pasa por todas las diferentes dependencias que queremos instalar. Voy a copiar eso en mi portapapeles. Solo pégalo aquí. Algunas de las diferentes dependencias aquí es posible que las hayas usado antes, en realidad, tal vez esta es Chai, que es una biblioteca de pruebas. Pero todo lo demás va a ser específico de Ethereum o de blockchain. Es posible que no lo hayas usado antes. Ether es nuevamente la biblioteca de cliente para interactuar con la red de Ethereum o cualquier otra red EVM. Y luego tenemos Hard Hat y Hard Hat es interesante porque es todo el entorno de desarrollo que vas a necesitar para cualquier proyecto EVM o de Ethereum. Esto te proporciona muchas cosas realmente geniales, como un nodo local de Ethereum que puedes implementar y ejecutar programas en su contra. También proporciona un entorno de pruebas y muchas otras cosas. Esas dos cosas son las principales. Y luego estas son dependencias secundarias de algunas de esas cosas que vamos a necesitar. Hard Hat Waffle es para cosas de pruebas locales. Y Hard Hat Ethers es básicamente una biblioteca de Ethers que funciona bien con Hard Hat. Y todas estas cosas no solo están en este tutorial, sino que probablemente las verás en mucha otra documentación también. Voy a instalar eso. Y para aquellos que recién se unen ahora, acabamos de empezar, así que todo lo que tienes que hacer es ejecutar NPX create React app y verás esas instrucciones y el archivo readme de GitHub. No necesitas clonar el proyecto a menos que quieras. Pero, en esencia, solo estamos usando ese readme como referencia para construir este proyecto desde cero. Probablemente debería haber usado Yarn porque NPM es tan lento en estos días. O tal vez necesito actualizar mi versión de NPM. ¿Qué versión de Node? Probablemente usaría al menos 10.X, pero probablemente usaría la última que esté disponible. Así que voy a ir a la versión de Node.js. Sí, quiero decir, parece que la última es como 14.18. No estoy seguro si siquiera estoy en esa versión, pero sí, cualquier cosa como 12.X o incluso 10.X debería estar bien. Sí, recomiendo totalmente usar Yarn en lugar de NPM. Esto es tan lento. No he usado NPM en un tiempo. Nuevamente, tal vez esté en una versión anterior allí. Entonces, ¿la cartera MetaMask es específica del navegador o se puede usar con otros proveedores? Básicamente, sé que hay una extensión de MetaMask para Chrome, Edge y Brave. Estoy bastante seguro de que no hay una extensión para Safari. Puedes interactuar con Binance Smart Chain. Y hay otra cadena de Binance con la que puedes interactuar usando MetaMask. Solo tienes que usar un RPC personalizado. Coinbase también tiene su propia cartera que puedes instalar. Entonces, digamos que tienes tu dinero en Coinbase. Coinbase tiene una cartera de navegador que te permite iniciar sesión y usarla también. Pero diría que la mayoría de las personas recomiendan cuando interactúas con diferentes proyectos desde un navegador web, típicamente usar una cartera descentralizada como MetaMask es probablemente lo mejor. Alguien preguntó, ¿qué es un contrato? Un contrato es esencialmente como el programa de backend de una aplicación blockchain.

7. Configuración del Entorno de Hard Hat

Short description:

Instalamos nuestras dependencias y creamos y configuramos nuestro entorno de Hard Hat para el desarrollo de Ethereum. Hard Hat nos proporcionó un archivo de configuración de Hard Hat, una carpeta de contratos para los contratos inteligentes, una carpeta de scripts para los scripts de implementación y una carpeta de pruebas para pruebas de ejemplo. La blockchain se puede considerar como una base de datos y una computadora distribuida. En una aplicación React, necesitamos configurar la ruta de los artefactos dentro del directorio SRC. Los artefactos son código legible por máquina generado al compilar los contratos inteligentes. Hard Hat simplifica este proceso y nos permite importar los artefactos en nuestra aplicación React. También necesitamos definir el ID de la cadena de la red, que es específico de la configuración predeterminada de MetaMask.

Es el contrato inteligente. Podrías pensar en él como algo así como el servidor. Aquí se encuentra la lógica empresarial para interactuar con el programa en sí. Así que eso tomó mucho tiempo para instalar. Nunca volveré a usar algo como NPM de nuevo. Definitivamente estoy mal acostumbrado por yarn.

Bien, ahora que hemos instalado nuestras dependencias, sigamos adelante. Ahora que hemos configurado nuestro entorno de Hard Hat que, nuevamente, es nuestro entorno de desarrollo de Ethereum. Y para hacer eso, todo lo que necesitamos hacer es ejecutar NPX hard hat. Así que voy a hacer eso. Si ejecuto NPX hard hat, esto debería crear un proyecto de Hard Hat. Y tenemos un par de opciones diferentes. Vamos a usar el proyecto de ejemplo básico. Y una vez que esto esté listo, voy a explicar qué sucedió aquí. Así que haremos clic en crear proyecto de ejemplo básico. Elegiremos la ruta del proyecto. Agregaremos nuestro archivo .gitignore. Y ahora tenemos un entorno de desarrollo local creado para nosotros. Eso fue bastante fácil. Pero, ¿qué sucedió realmente allí? Así que veamos los cambios que se hicieron. Si abrimos nuestro código base y nuestro editor de texto. Podemos echar un vistazo, así que voy a abrir el proyecto en mi editor de texto.

Bien, nuestra aplicación React ya nos dio los módulos node, public y SRC. Básicamente, lo que nos dio Hard Hat fue, en primer lugar, este archivo hardhat.config.js. Esto fue creado para nosotros por Hard Hat. También tenemos esta carpeta de contratos aquí. Y la carpeta de contratos contiene nuestros contratos inteligentes. También tenemos. Esta carpeta de scripts aquí y esta carpeta de scripts tiene un script de ejemplo que podemos usar para implementar nuestro contrato inteligente en la blockchain. Y vamos a ver esas dos cosas en un momento, pero por ahora, solo estamos revisando lo que se agregó para nosotros. Y luego lo último que tenemos ahora es esta carpeta de pruebas y la carpeta de pruebas tiene una prueba de ejemplo que podemos ejecutar si queremos. Alguien preguntó, ¿podemos pensar en una blockchain como una base de datos? Sí, muchas personas la llaman una base de datos. Algunos la llaman una computadora real porque tiene una forma de hacer cálculos y realmente hace cálculos. Entonces puedes ejecutar muchos de los mismos tipos de lógica que escribirías en una aplicación JavaScript en un contrato inteligente. También puedes usarlo solo como una base de datos para almacenar y recuperar datos. Así que sí, es esencialmente una base de datos. Y también se puede pensar en ella como una computadora distribuida que se ejecuta en decenas de miles de nodos diferentes en una red descentralizada. Y escucharás la palabra descentralizada mucho en Web3 porque esencialmente todos los diferentes protocolos como Ethereum son descentralizados. Bien, genial. Pero lo que realmente queremos enfocar es nuestra configuración de Hard Hat. Y esto básicamente es nuestra configuración de entorno de desarrollo local. Y realmente ni siquiera necesitamos todo este código aquí. Así que simplemente lo voy a borrar todo. Lo único que realmente necesitamos para que esto funcione es este módulo que exporta donde definimos la versión de Solidity que queremos. Y vamos a comenzar desde ahí y luego vamos a modificar esto un poco. Lo único que debemos tener en cuenta. Y volvamos aquí es el hecho de que estamos en una aplicación React y en una aplicación React, vamos a trabajar desde este directorio SRC. Y si intentamos importar algo que está fuera de este directorio SRC desde dentro de él, obtenemos un error en React. Entonces, la razón por la que menciono esto es que necesitamos acceder a algunos artefactos que vamos a crear a partir de nuestro contrato inteligente y que necesitaremos para interactuar con nuestro programa. Y queremos que esos artefactos se encuentren en el directorio SRC. Así que necesitamos configurarlo. Básicamente, quiero actualizar las exportaciones del módulo con un par de cosas. En primer lugar, vamos a establecer aquí la ruta. Para nuestros artefactos, y hablaré de qué son estos artefactos en un momento, pero si miramos nuestro taller, verás que esta va a ser nuestra configuración final, así que puedes simplemente copiar y pegar eso en el archivo de configuración de Hard Hat. Pero básicamente, primero queremos establecer este directorio de artefactos y los artefactos básicamente serán nosotros compilando nuestro contrato inteligente aquí. En código legible por máquina para nuestra aplicación JavaScript, cuando piensas en algo como GraphQL, si lo has usado, terminas creando consultas de GraphQL y definiciones de mutación que son texto. Casi como objetos de tipo JSON que definen la operación que se envía a través de la red. Entonces, para una consulta de GraphQL, podrías decir que quieres consultar publicaciones y quieres devolver el ID y el título o algo así. Con Ethereum y nuestro contrato inteligente, tenemos algo muy similar a eso. Y se llama B eyes y B eyes son la abreviatura de Application Binary Interface. Y lo genial de Hard Hat es que podemos pasar nuestro contrato inteligente y él creará y compilará estas cosas por nosotros y luego simplemente podemos importarlas en nuestra aplicación front-end React. Y queremos definir el directorio donde se encontrarán estos artefactos, así que básicamente estamos haciendo eso aquí, simplemente estamos diciendo, está bien. Cuando compilemos nuestro contrato inteligente, queremos que esos artefactos vayan al directorio SRC de esa manera podemos importarlos desde app.js o cualquier otro lugar sin tener un error. Y luego, luego, luego, lo último que queremos actualizar es queremos definir alguna configuración en torno al ID de la cadena de la red. Ahora esto es muy específico a la forma en que Hard Hat, lo siento, la forma en que MetaMask configura localhost de forma predeterminada, básicamente necesitas definir un ID de cadena. Y cuando acabamos de instalar MetaMask, si vuelvo a mi navegador, verás que tenemos la red localhost 8545. Así que podría cambiar a eso.

8. Configuración de Hard Hat y Descripción del Contrato Inteligente

Short description:

En esta parte, discutimos la configuración de Hard Hat y el contrato inteligente con el que trabajaremos. Nos aseguramos de que el ID de la cadena coincida con la configuración de MetaMask e importamos la utilidad de consola de Hard Hat para registrar información. También mencionamos la necesidad de instalar dependencias y verificar la presencia de la carpeta de contratos. El contrato inteligente define una licencia, especifica la versión de Solidity e incluye las funciones de saludo y establecimiento de saludo. La función de saludo devuelve una cadena, mientras que la función de establecimiento de saludo actualiza el estado de saludo. Mencionamos brevemente otras palabras clave y concluimos comprendiendo la funcionalidad del contrato.

Y probablemente en realidad no funcionará porque aún no he iniciado esa red. Pero digamos que cambiamos esa red. Sabrías si miramos en la configuración avanzada que el ID de la cadena está configurado en 1337, por lo tanto, nos aseguramos de que este ID de cadena coincida con lo que MetaMask está configurado para localhost. Y eso es más o menos por qué estamos haciendo eso. Y si miras la documentación de Hard Hat, probablemente haya una explicación un poco más detallada allí. Pero es más como una configuración que simplemente quieres hacer y no preocuparte por por qué lo estamos haciendo en este momento.

Bien, genial. Entonces tenemos nuestra configuración de Hard Hat lista. A continuación, veamos el contrato inteligente con el que vamos a trabajar. El contrato inteligente se encuentra en la carpeta contracts/greeter.sol. Y .sol significa Solidity. Y ese es el lenguaje de programación que estamos utilizando aquí. Hay algunas cosas sucediendo aquí. En primer lugar, en cualquier programa de Solidity, debes definir una licencia o de lo contrario obtendrás un error al intentar implementar esto. Así que simplemente tienes una licencia comentada, lo que quieras que sea. Podrías decir MIT o simplemente dejarlo como estaba antes, lo que sea. A continuación, queremos definir la versión de Solidity que estamos utilizando. Entonces, en nuestra configuración de Hard Hat, ves que tenemos 0.8.4. Y aquí, básicamente estamos diciendo 0.8.0 o superior. Así que esto debería funcionar con nuestra configuración de Hard Hat. Lo siguiente que notamos es que tenemos esta importación de hardhat/console. Ahora, esto es realmente interesante, porque por defecto no hay una forma fácil de registrar información en tu programa de contrato inteligente. En JavaScript, tenemos console.log. Y es bastante sencillo, todos lo entienden y lo usan. Entonces, Hard Hat creó esto, diría que tal vez como una utilidad auxiliar que puedes usar para usar esa misma sintaxis que estamos acostumbrados a usar en JavaScript. Así que en realidad podemos decir console.log y registrar lo que queramos, lo que lo hace realmente, realmente fácil de registrar información. Eso es más o menos lo que estamos importando allí. Alguien dijo que NPX hard hat solo muestra ayuda. ¿Ya has instalado las dependencias antes en la misma carpeta, como npm install o yarn add? Porque si aún no has instalado Hard Hat, entonces eso podría no aparecer. ¿Puedes verificar si ya tienes la carpeta de contratos y las otras carpetas allí? Tal vez funcionó. Bien, genial. Bien, genial. Bueno, echemos un vistazo al contrato. Así que esto es como unas 15 líneas de código más o menos. Y básicamente este es todo el programa. Y hay dos funciones principales. Una es greet y la otra es set greeting. Las veremos en un momento. Y luego básicamente tenemos nuestra configuración aquí, la inicialización, podrías decir. Entonces, cuando se implementa este contrato, primero establecemos una variable llamada greeting. Y la establecemos simplemente la creamos, en realidad no le damos un valor. Private básicamente significa que solo se puede leer desde dentro del contrato. Si quieres que se lea desde fuera del contrato, por ejemplo, desde una aplicación front-end, necesitarías establecerlo como público. Pero en nuestro caso, vamos a tener una función que básicamente lo devuelve y luego esa función es pública y, por lo tanto, podemos leerlo de esa manera. Luego tenemos un constructor porque por defecto no hemos establecido que este saludo sea algo. Y en nuestro constructor, en realidad podemos pasar un argumento que establece ese saludo. Así que eso es más o menos lo que sucede cuando implementamos este contrato, tenemos que pasar algún texto como argumento para establecer el saludo como lo que se pase aquí como argumento. Esto se invocará básicamente cuando implementemos el contrato estableciendo esta variable inicial. Y luego, después de que se haya implementado y lo interactuemos, podemos llamar a dos métodos separados, podemos llamar al método greet, que básicamente solo devuelve esta cadena. Y vemos que es público, lo que significa que se puede leer desde fuera del contrato, lo que significa que podemos llamarlo desde nuestra aplicación front-end. Y luego tenemos view. View básicamente significa que solo está devolviendo algunos datos desde dentro del contrato y no estamos realizando ningún cambio de estado. Con la extensión de VS Code, probablemente solo recomendaría esto. Creo que hay un resaltador de sintaxis de Solidity. Esa es probablemente la principal que descargaría para escribir código de Solidity. Sí, la función greet es bastante básica, simplemente devuelve la cadena. Y luego tenemos la función set greeting. Y esto en realidad va a ser, ya sabes, muy simple, pero en realidad está actualizando el estado, lo que significa que básicamente vamos a tomar un argumento llamado greeting. Y simplemente vamos a actualizar el saludo como sea que pasemos. Así que esto es muy, muy, creo, sencillo. Establecemos el saludo cuando implementamos el contrato, tenemos una función para leer el saludo. Y tenemos una función que puede actualizar el saludo. Alguien preguntó, aparte de view allí, sí, hay algunas otras. Pure. Yo iría a la documentación de Solidity y simplemente buscaría, o tal vez buscaría los diferentes tipos de palabras clave. Sí, probablemente obtendrás una buena descripción general de ellas allí.

9. Implementación del Contrato en una Red Local

Short description:

Implementamos el contrato con un valor inicial, leemos el valor y actualizamos el valor. La interacción con una cadena de bloques es diferente a una base de datos típica, ya que las operaciones en la cadena deben pagarse en el momento de la operación. Las transacciones pueden variar en costo y diferentes protocolos de cadena de bloques ofrecen escalabilidad y ventajas de costo. Implementamos el contrato en una red local utilizando NPX hard hat node, que inicia una red de prueba local con 19 cuentas de prueba. Podemos importar estas cuentas en nuestra billetera Metamask y tener 10,000 ETH para probar nuestro programa. Implementamos nuestro programa en la red de prueba utilizando un script que obtiene una referencia al contrato, lo implementa y establece el valor inicial para el saludo.

Entonces, con esas tres, o dos, supongo, funciones, entendemos cómo funciona este contrato. Básicamente, lo implementamos con un valor inicial, podemos leer el valor y luego podemos actualizar el valor. Entonces, cuando piensas en CRUD, crear, leer, actualizar, eliminar, no puedes realmente eliminar en blockchain, porque cada interacción se guarda para siempre. Pero podemos actualizar, crear y leer. Bien, ahora que entendemos lo que está sucediendo allí, vamos a cerrar esto. Y volveremos a nuestro tutorial aquí. Y podemos continuar.

Lo que queremos hacer a continuación es compilar nuestro contrato inteligente en la ABI o la interfaz binaria de la aplicación. Y para hacer eso, básicamente podemos usar hard hat nuevamente. Y todo lo que necesitamos hacer es ejecutar NPX hard hat compile. Este comando buscará en nuestra configuración de hard hat la carpeta real donde queremos crear estos artefactos. Y configuramos esa carpeta de artefactos como SRC / artefacts. Entonces, después de ejecutar este programa, deberíamos ver una nueva carpeta allí. Entonces, si vuelvo a mi terminal y ejecuto NPX hard hat compile desde la raíz del proyecto. Ahora miro dentro de mi directorio de origen, debería ver esta nueva carpeta llamada artefacts. Y de hecho, lo vemos allí. Y, y los contratos, básicamente veremos, estos dos archivos, no necesitamos realmente modificarlos ni nada. Pero estos son los ABI. En realidad, este es ABI. Es básicamente un JSON que describe lo que está sucediendo. Y básicamente podemos importarlo, nunca realmente necesitamos abrirlo y mirarlo, solo queremos mostrarte qué hay allí. Ahora que hemos compilado nuestro contrato, ahora podemos comenzar a interactuar con él. Entonces, debemos pensar en las interacciones con una blockchain de manera muy diferente a como pensamos en las interacciones con una database típica. Porque cuando escribes data en una database, normalmente vas a usar algún tipo de aplicación que está alojada en AWS, o algo así. Ya sabes, lo que sea super base y la persona que implementó ese programa está pagando por ese servicio de alojamiento. Creo que la diferencia fundamental principal es que en su mayor parte, cuando estás ejecutando o interactuando con una red blockchain, las operaciones que ocurren en la cadena deben pagarse en el momento en que ocurre esa operación. Ahora, a veces realmente ves esto implementado en el servidor en algún lugar donde básicamente tienen una clave privada y puedes llamar, ya sabes, a un back-end y lo están haciendo de esa manera. Pero la mayor parte del tiempo, en realidad vas a estar interactuando con él y pagando por esta transacción tú mismo. Ahora, estas transacciones pueden costar desde una fracción de un centavo, como cuando interactuamos con Solana, o cuando trabajamos con algo como Ethereum, donde es un poco caro en este momento. Y creo que la razón por la que ves un tipo limitado de aplicación construida en Ethereum es por lo limitado que eres en este momento para esos tipos de pagos. Entonces, si vas a hacer algún tipo de finanzas descentralizadas, donde estás realizando transacciones de cientos de dólares, podría tener sentido pagar unos pocos dólares por una transacción. Pero digamos que solo quieres hacer algo muy básico. Cualquier cosa por encima de un par de dólares no tiene mucho sentido. Así que creo que por eso ves, ya sabes, todo tipo de nuevos protocolos de blockchain que son más escalables y tal vez menos costosos y cosas así que surgen para diferentes otros tipos de casos de uso. Y también necesitas entender que la forma en que construyes una de estas aplicaciones va a ser muy diferente. Es posible que solo almacenes información muy importante en la cadena. Y luego puedes usar algún otro tipo de almacenamiento descentralizado que sea gratuito para otros tipos de cosas. Así que eso es solo fundamental, como cosas para pensar mientras avanzamos en esto. Pero básicamente, lo que queremos hacer ahora es implementar nuestro contrato en una red local. Entonces, podemos implementar en la red principal de Ethereum, o también podemos implementar en una de estas redes de prueba que existen. Pero para hacer eso, necesitamos encontrar Ethereum, ya sabes, Ethereum de prueba y enviarlo a nuestra billetera. Y es un poco, ya sabes, una serie de pasos, aunque la mejor manera es implementarlo en una red local. Y la mejor manera, diría yo, para testing y desarrollo local es usar una red local. Y en realidad podemos crear una red local simplemente ejecutando NPX hard hat node. Así que puedo copiar esto y voy a dividir mi terminal en un par de ventanas nuevas, porque vamos a necesitar ejecutar múltiples ventanas. Y voy a borrar esto. Y lo primero que quiero hacer es crear una red local, ejecutar un nodo local de Ethereum. Y puedo hacer eso ejecutando NPX hard hat node. Y esto iniciará una red de prueba local, un nodo local de Ethereum, y me dará 19 cuentas de prueba. Y cada una de estas cuentas puedo importarla en mi billetera Metamask. Y comienzo con 10,000 ETH, lo que significa que puedo tener algo de dinero para probar mi programa. Porque cuando escribo una transacción, necesitaré pagar algún tipo de ETH para escribir en el bloque de la red. Y ahora tengo 10,000 ETH distribuidos o multiplicados por 20 en 20 cuentas diferentes que puedo usar. Bien, lo que vamos a hacer a continuación es volver a nuestro tutorial. Y vamos a implementar nuestro programa en esa red de prueba. Para hacer eso, tenemos un script ubicado en scripts / sample script.js. Así que echemos un vistazo a eso. Y voy a eliminar todos los comentarios y cosas para que sea un poco más fácil de leer. Bien, no hay mucho que hacer aquí. Solo hay realmente cuatro líneas de código, o realmente tres líneas de código que necesitamos para implementar esto. En primer lugar, estamos obteniendo una referencia al contrato diciendo ethers dot get contract factory y pegando la cadena con el nombre del contrato. Ahora podemos hacer esto porque en nuestra configuración de hard hat, básicamente estamos configurando la ruta para los artefactos. Y esto buscará en esa ruta y encontrará el artefacto para el greeter. Y esto esencialmente va a obtener la ABI y hacerla disponible aquí en esta línea de código. La siguiente función que vamos a llamar es greeter dot deploy. Y esto básicamente ahora que tenemos una referencia a este contrato, podemos llamar a deploy y luego podemos pasar el argumento del constructor. En nuestro caso, queremos establecer ese valor inicial para el saludo. Así que esto podría ser lo que sea. Podría decir react. Londres o algo así. Y este será el valor inicial para nuestro programa.

10. Implementación y Configuración de MetaMask

Short description:

Para implementar, ejecuta NPX hard hat run scripts/deployed.js con la red configurada como localizada. El proceso de implementación mostrará información sobre la transacción, la implementación, la dirección del contrato y el uso de gas. Después de una implementación exitosa, configura MetaMask con una cuenta que tenga Ethereum importando una cuenta usando la clave privada proporcionada por el nodo Ethereum. Una vez configurada, la cuenta tendrá un saldo de ETH distinto de cero. La cuenta cero se utiliza para la implementación y deduce Ethereum del saldo, mientras que las demás cuentas tienen los 10,000 ETH completos.

Y luego, básicamente, aquí, lo que vamos a hacer es esperar a que la implementación sea exitosa. Así que vamos a decir await creator.deployed(). Y una vez que esto se haya implementado correctamente, vamos a registrar la dirección de implementación de nuestro contrato. Y necesitamos esta dirección para comunicarnos con nuestro programa. Cuando piensas en una aplicación web típica, cuando implementas un proyecto o implementas una API, diría que te dan un punto final de API. Y típicamente es algo como HTTP dos puntos, ya sabes, mi proyecto punto com barra API. Y en el mundo de la blockchain, en lugar de usar un punto final de API, se utiliza una combinación de dos cosas. Se utiliza una dirección RPC, que es una forma de comunicarse con la red de Ethereum. Entonces, para la red principal de Ethereum, sería algo como lo que sea. Hay algunos de ellos que puedes usar. Hay puntos finales RPC públicos. Y también hay puntos finales RPC privados que las personas están ejecutando su propio nodo de Ethereum o las personas están ejecutando nodos de Ethereum como un servicio. Y obtienes este punto final HTTP. Pero para nuestro ejemplo, estamos ejecutando una red local. Así que ya tenemos nuestra red configurada. Todo lo que necesitamos hacer ahora que estamos ejecutando un nodo local es simplemente cambiar a personalizado. Lo siento, cambiar a local como 8545. Entonces, nuestro nodo de Ethereum o punto final RPC es local como 8545. Ya tenemos eso configurado. Entonces, las dos cosas que necesitamos son el punto final RPC y luego la dirección de implementación del contrato. La forma en que obtenemos eso es simplemente registrándolo aquí. También puedes hacer un script de Node.js o algo aquí donde lo escribas en algún archivo en algún lugar. Y luego puedes leerlo y tenerlo más automatizado. Así que podrías usar algo como el servicio de archivos y escribir para escribir algún JSON o JavaScript y hacerlo disponible. Pero vamos a copiarlo y pegarlo desde aquí. Muy bien. Sí, implementar e implementado son métodos incorporados. Entonces, lo que queremos hacer ahora también es cambiar el nombre de sample script a deploy it porque tiene mucho más sentido. Y ahora podemos decir, OK, queremos implementar ejecutando este script, y eso es lo que realmente está sucediendo. Así que tiene mucho más sentido. Muy bien. Estas dos líneas de código son realmente las cosas principales que suceden. Y luego vamos a esperar esa implementación y luego registrar la dirección del contrato. Muy bien, así que vamos a probar esto. Entonces, para implementar, podemos ejecutar NPX hard hat run scripts/deployed.js y podemos configurar la red como localizada. Y lo que debería suceder es que deberías ver que se registra algo de información. ¿Qué es? Entonces, NPX hard hat run scripts/deployed.js y vamos a configurar la red como localizada. Y si eso se implementa correctamente, deberías ver algo como esto implementando un saludo con saludo. Hola, React Londres. Y tenemos mucha información sobre la transacción, la implementación, la dirección del contrato, la transacción, quién la envía, ya sabes, la cantidad de gas utilizada y así sucesivamente. Entonces, si eso se implementa correctamente, también deberíamos ver que se registra en la consola saludo implementado en. Y luego esta es nuestra dirección de contrato. Entonces, esta es la dirección en la red. Esto es como si se implementara en la red principal de Ethereum que podríamos verlo realmente, pero se implementa en localizada. Pero aún vamos a necesitar esta dirección en un momento. Genial, estamos llegando allí. Ahora que hemos implementado eso, podemos comenzar a interactuar con el programa desde nuestro frontend. Pero para hacer eso, primero queremos asegurarnos de configurar MetaMask con una cuenta. Que tenga algo de Ethereum. Porque en este momento, todas nuestras cuentas no tienen ningún Ethereum. Solo tenemos una cuenta. Entonces, por supuesto, puedes agregar otras cuentas haciendo clic en crear cuenta, pero ninguna de estas tendrá ningún Ethereum. Lo que necesitamos hacer es, ya sabes, una vez que hayas configurado tu red como localhost, queremos importar una de las cuentas que fue creada por el nodo de Ethereum. Y podemos hacer eso simplemente haciendo referencia a esta clave privada. Entonces, tenemos como 20 cuentas diferentes. Cada cuenta tiene una clave privada y una dirección de cuenta. Entonces, lo que queremos hacer es copiar esta clave privada en el portapapeles. Así que voy a resaltarlo, copiarlo, volver al navegador. Y aquí puedes ver a dónde vamos a continuación con esto. Queremos ir a importar cuenta. Así que puedo abrir Ethereum. Lo siento, MetaMask. Y voy a hacer clic en importar cuenta. Y voy a pegar la clave privada. Y hacer clic en importar. Y ahora en nuestra billetera, deberíamos ver que tenemos noventa y nueve coma noventa y nueve ETH. La razón por la que tenemos esa cantidad en lugar de 10,000 es porque si estás usando la cuenta cero, que es lo que estoy usando aquí, cuando implementamos el contrato en sí, usamos algo de nuestro Ethereum para pagar esa implementación.

11. Interactuando con la Red de Ethereum

Short description:

Ahora podemos ejecutar nuestro programa e interactuar con él escribiendo nuestra aplicación React. Configuramos nuestro estado local, definimos la aplicación como nuestro componente principal y creamos una función llamada 'request account' para conectarnos con la billetera Ethereum del usuario. También creamos dos funciones para obtener y escribir el saludo utilizando proveedores para interactuar con la red de Ethereum. Al llamar a 'contract.greet', podemos leer datos del contrato.

Si importaste la cuenta uno o posterior, entonces deberías tener los 10,000 completos en tu dirección de cuenta. Y no importa realmente. Puedes hacerlo de cualquier manera. Y alguien más que no pueda conectarse a localhost. Si ves eso, significa que tu nodo de Ethereum puede que no esté en ejecución. Así que asegúrate de haber ejecutado 'NPX hard hat node'. Y si eso está en ejecución, entonces deberías poder conectarte. Y si no, puedo verificarlo durante el próximo descanso.

De acuerdo, genial. Ahora que nos hemos conectado a localhost y hemos importado una de nuestras cuentas, y vemos que tenemos algo de ETH, ahora podemos ejecutar nuestro programa e interactuar con él. Entonces, lo que queremos hacer es escribir nuestra aplicación React. Nuestro backend está en ejecución, está implementado, estamos listos para continuar. Ahora queremos cambiar nuestro frontend.

Muy bien, voy a copiar y pegar parte de este código y explicarlo. Voy a abrir 'dot.js'. Y aquí estamos importando 'useState' de React, que es lo que vamos a usar para manejar el estado local. Estamos importando la biblioteca 'ethers' de 'ethers', que es la forma en que interactuamos con la red. Y luego estamos importando este 'greeter ABI', que está aquí en 'artifacts/contracts/greeter.sol/Greeter.json'. Así que eso es el ABI. A continuación, queremos definir la dirección de nuestro contrato. Y eso se mostró en la terminal hace un momento. Así que debería poder ir a mi terminal y copiarlo en el portapapeles aquí. pegarlo aquí. Lo siguiente que queremos hacer es definir la aplicación. Y esta será nuestro componente principal. Vamos a configurar nuestra aplicación. Y esta será nuestro componente principal. Vamos a configurar nuestro estado local. Y la única variable de estado con la que necesitamos lidiar ahora es el saludo y establecer el valor del saludo. De esta manera, el usuario puede escribir lo que desea que se actualice el saludo y luego podemos enviar una nueva transacción para actualizar ese valor. Lo siguiente que vamos a hacer es algo interesante, vamos a tener una función llamada 'request account'. Esto es realmente completamente nuevo para la mayoría de las personas y también para mí cuando comencé a trabajar con Ethereum. Es interesante por un par de razones diferentes. En primer lugar, cuando alguien tiene una billetera como MetaMask o Phantom o Arweave instalada en su navegador, lo que básicamente sucede además de tener acceso a esta billetera es que inyecta una variable global en el contexto de la ventana llamada Ethereum o Arweave o en este caso Solana. Así que básicamente tenemos acceso a algo llamado window.ethereum. Y esto tiene muchas cosas diferentes que ahora podemos hacer, ahora que lo tenemos instalado. Y ahora, si intentaras ejecutar esta función en un navegador que no lo tenga, simplemente obtendrías un error. Entonces, lo que podrías hacer si quisieras hacer un manejo de errores, podrías decir 'if window.ethereum' y luego podrías hacer cosas. Pero estamos asumiendo que esto existe. Y vamos a llamar a 'window.ethereum.request'. Y queremos solicitar sus cuentas. Y esto permitirá al usuario elegir la cuenta con la que les gustaría conectarse. Incluso puedes tener un valor de retorno de esto y registrarlo si quieres. Pero realmente no necesitamos ese valor en este momento. Todo lo que queremos hacer es simplemente conectarnos a esa billetera y esto probablemente sea lo único que vamos a hacer. Todo lo que queremos hacer es simplemente conectarnos a esa billetera y esto les solicitará y les permitirá iniciar sesión con su billetera de Ethereum. Y eso es muy, ya sabes, no es mucho código para que eso suceda. Es bastante agradable. Ahora queremos crear dos funciones, una función para obtener el saludo y otra función para escribir el saludo. Y aquí puedes ver que estamos verificando que exista 'window.ethereum'. Y el resto del código está aquí. Y la forma en que interactuamos con el nodo de Ethereum o la red misma es mediante estas cosas llamadas proveedores. Y hay un par de tipos diferentes de proveedores. Tienes un proveedor que te permite tener acceso de lectura para una función completamente pública como la función 'greet' con la que estamos interactuando. Y luego también tienes funciones que deben ser firmadas para crear una transacción real para escribir datos. Y eso es lo que vamos a hacer, un firmante o una transacción de escritura para establecer el saludo. Pero para 'fetch greeting', solo necesitamos leer información. Así que esto es bastante sencillo. Decimos que queremos hacer 'ethers.providers.Web3Provider'. Y estamos pasando el contexto 'window.ethereum'. Y luego obtenemos una referencia al contrato inteligente real llamando a 'ethers.contract', pasando tres argumentos. Pasamos la dirección del contrato, que definimos esta variable anteriormente. Pasamos el ABI, que es casi como una API para este contrato inteligente. Y luego pasamos el proveedor. Y ahora podemos usar esto para llamar a cualquiera de los diferentes métodos en nuestro contrato. Entonces teníamos una función llamada 'fetch'. Esto podría ser realmente cualquier función de lectura. Así que cualquier cosa que queramos leer del contrato, ahora podemos usar este contrato para llamarlo. Por lo que podemos llamar esas funciones directamente. Y lo que estamos haciendo aquí es llamar a 'contract.greet'. Y estamos esperando que esos datos vuelvan.

12. Interactuando con el Contrato y la Interfaz de Usuario

Short description:

Obtenemos acceso al contrato, leemos los datos y los registramos. Creamos la función 'set greeting' creando un firmante y pasándolo a la referencia del contrato. Tenemos una interfaz de usuario básica con botones para obtener y establecer el saludo. Se responde una pregunta del chat sobre la definición dinámica de la dirección del greeter. La lógica de actualización del contrato requiere implementar un nuevo contrato, pero se pueden utilizar contratos proxy para actualizar el puntero del contrato. La interfaz de usuario está completa y se inicia la aplicación. La aplicación interactúa con el contrato obteniendo y actualizando el saludo. Se muestra el costo de la transacción.

Y luego simplemente lo registramos. Cosas muy básicas. Obtenemos acceso al contrato. Leemos los data del contrato y lo registramos.

Muy bien, lo siguiente que vamos a hacer es crear la función 'set greeting'. Y esto es muy similar en el sentido de que estamos creando un proveedor. Y estamos haciendo la misma línea de código aquí donde lo llamamos new ethers.providers.web3provider. Pero en lugar de usar ese proveedor directamente en la creación del contrato, estamos creando un firmante. Y decimos provider.getsigner. Y esto le pedirá al usuario que básicamente pueda firmar esta transacción. Y en lugar de pasar el proveedor, cuando creamos la referencia del contrato, pasamos el firmante. Así que tenemos esto, solo este paso adicional. Y luego llamamos a contract.setGreeting. Al igual que llamamos a contract.greet, simplemente estamos llamando a la función dentro del contrato. Y aquí pasamos un argumento de greeting. Y este greeting es esta variable de estado que establecimos aquí. Así que permitimos al usuario básicamente actualizar el estado local escribiendo. Y lo último que tenemos es una interfaz de usuario muy básica donde tenemos un formulario, donde tenemos dos botones. Uno para obtener el saludo y llamar a fetchGreeting. Y el otro para establecer el saludo. Y tenemos una entrada que permite al usuario actualizar el saludo.

Voy a revisar el chat rápidamente. Sí, si quieres definir la dirección del greeter dinámicamente, simplemente puedes escribir una función en ese script de implementación que escriba en el sistema de archivos local. Normalmente uso FS de, ya sabes, de Node, de lo siento. Sí, es como un paquete de Node.js que puedes instalar, llámalo como quieras. Puedes decir FS.writeFileSync. Y tal vez solo escribir eso en un archivo local para que sea un poco más fácil. Es esencialmente una o dos líneas de código. Pero no está realmente integrado. No creo que lo esté en Hard Hat. Hay una extensión que puedes instalar. En realidad, eso hace eso, pero no está, no está en el paquete principal. Así que voy a ejecutar eso. Y luego voy a ejecutar la función. Y luego voy a ejecutar la función. Y luego voy a ejecutar la función. De acuerdo. No está ahí. Sí, pero no está en el paquete principal. ¿Hay alguna forma de actualizar la lógica del contrato sin afectar los data ya almacenados? No, en realidad no. Por eso es el desarrollo de Ethereum. Por eso el desarrollo de blockchain es tan complejo. Esa es una de las razones por las que si quieres tener una actualización de la lógica del contrato, necesitas implementar un nuevo contrato. Y luego también terminas teniendo un nuevo estado. Ahora, hay algunas formas interesantes de hacer cosas que evitan algunas de estas, supongo que podrías llamarlas restricciones. Una de ellas es un contrato proxy, lo que significa que tienes tu contrato proxy que apuntará a otro contrato. Y luego básicamente puedes tener una función en tu proxy que te permita actualizar dónde está ese puntero. Así que esa es una forma de hacerlo. Hay algunas otras cosas diferentes que puedes hacer, pero, pero por naturaleza, sí, esa es toda la idea. No puedes realmente actualizar las cosas. Pero mucha gente usa contratos proxy.

OK, genial. Hemos terminado de escribir nuestra interfaz de usuario. Y, sabes, repasé cada función individualmente para explicarla, pero en realidad, la mayor parte de la funcionalidad que sucede allí, que es específica de Ethereum o de blockchain, es solo tal vez cuatro o cinco líneas de código. Y vamos a iniciar nuestra aplicación ejecutando npm start. Así que lo ejecutaré aquí abajo porque quiero asegurarme. He referenciado todo lo demás que hemos estado haciendo. OK, genial. Así es como se ve nuestra aplicación. Es muy, muy básica. Sin un diseño agradable ni nada. Nos enfocamos principalmente en la funcionalidad. Así que lo que quiero hacer es llamar a fetch greeting.

13. Interactuando con el Contrato

Short description:

Interactuamos con el contrato, actualizamos el saludo y vemos el saludo actualizado. Las llamadas al contrato se registran en el nodo de Ethereum.

Y aquí vemos hola, estamos en Londres. Así que estamos, estamos, estamos interactuando con el contrato. Y luego queremos seguir adelante y actualizar esto. Así que puedo simplemente llamar a set greeting y ahora me pedirá que conecte mi billetera y la billetera que quiero conectar es aquella que tiene Ethereum en ella. Y ahora me va a pedir que pague por esta transacción. Entonces, el costo de la transacción es punto cero cero, seguido de varios ceros y seis tres. Si hago clic en confirmar, entonces veo que hemos actualizado el saludo. Y si actualizo la página. Y llamaré a fetch greeting. Y ahora vemos que tenemos nuestro saludo actualizado. Y otra cosa que notarás es que cuando estás interactuando con el contrato, verás que se registra en tu nodo de Ethereum que se ha realizado una llamada al contrato, ya sea una operación de lectura o escritura, todo se registra aquí.

14. Interactuando con el Contrato y Casos de Uso

Short description:

En esta sección, discutimos la capacidad de escribir transacciones en el contrato desplegado y las implicaciones de costos en la red principal de Ethereum. También exploramos cómo las capas dos de Ethereum proporcionan costos de transacción más bajos, lo que permite diferentes casos de uso. Además, abordamos la pregunta de cómo crear un contrato inteligente con disparadores de tiempo y explicamos el uso de trabajos Cron o funciones externas como Lambda en AWS. También se explicó la presencia de window.ethereum y window.Solana en las billeteras del navegador. Por último, mencionamos el papel del contrato como un servidor que responde a llamadas de API y destacamos la función de transferencia como un caso de uso interesante. Mencionamos Axie Infinity como ejemplo de un videojuego basado en blockchain que permite a los jugadores ganar y comerciar tokens, mostrando el potencial de integración de criptomonedas en la industria de los videojuegos.

Muy bien, parece que no hay preguntas allí. Permítanme revisar el otro chat aquí. De acuerdo, bien. Sí, no hay muchas preguntas en este momento. Entonces, ¿alguien tiene alguna pregunta antes de pasar a la siguiente parte de esto?

De acuerdo, bien. Voy a cerrar esto. Y voy a cerrar esto. Y voy a cerrar esto. Entonces, ¿alguien tiene alguna pregunta antes de pasar a la siguiente parte de esto? ¿Alguien está teniendo algún problema? De acuerdo. Algunas personas están escribiendo, así que esperaré a que lleguen esas preguntas. Genial, parece que funciona bien para algunas personas. Así que para confirmar, en realidad podemos escribir esta transacción en el contrato desplegado. Así es. Sí. Entonces, al escribir esto, estamos realizando cambios de estado en la blockchain cada vez que escribimos una transacción. Ahora, normalmente probablemente no tendrías este tipo de aplicación para la red principal de Ethereum. A menudo se ven transacciones de alto valor en la red principal de Ethereum debido a lo costoso que es tener una transacción. Tienes DeFi, tienes, ya sabes, cosas financieras. Tienes arte, ya sabes, personas que venden cosas que valen cientos de dólares. Sin embargo, lo que sí tienes son las capas dos de Ethereum en las que puedes utilizar todas las habilidades que estamos aprendiendo para escribir en ellas. Y esos costos de transacción son fracciones de un centavo. Y eso básicamente reduce la barrera de entrada a diferentes casos de uso. Entonces, podrías decir básicamente, `OK, solo un cierto tipo de aplicación vale la pena pagar un par de dólares por una transacción, transacciones de alto valor`. ¿Qué pasa si solo quiero enviar cinco dólares o un dólar a uno de mis amigos? Entonces, la fracción de un centavo tiene mucho sentido. O si quieres construir algún tipo de caso de uso financiero que sea menos costoso, las DAO y cosas así también tienen mucho sentido. Entonces, alguien hizo la pregunta, si quiero crear un juego, ¿cómo podemos crear un contrato inteligente con sellos de tiempo para activar el contrato inteligente después de un período de tiempo? Sí, esa es una buena pregunta. Y esa es una de las preguntas que también tenía. La idea de los trabajos Cron, supongo, es algo así como la idea allí. Y cuando piensas en cómo construyes una API basada en servidor o una aplicación basada en servidor típica, puedes configurar estos trabajos Cron o estos disparadores que se invocan cada hora o en cierto momento del día. Esto no está integrado en la máquina virtual de Ethereum. No puedes simplemente decir que quieres invocar esta función cada X minutos. Pero lo que puedes hacer, sin embargo, es simplemente crear una función Lambda o algo así en AWS. Y puedes llamar al contrato desde allí cada cierto tiempo y hacerlo de esa manera. Así que la gente hace trabajos Cron y cosas así, pero no es nativo de cómo no puedes. No puedes escribirlo directamente en el código de Solidity. Alguien preguntó, ¿por qué está window.ethereum ahí? Esa es una buena pregunta. Entonces, si alguien tiene una billetera de navegador como Metamask instalada, entonces window.ethereum estará disponible allí. Así que digamos que no tienes Metamask, pero tal vez tienes una billetera diferente. Mientras sea una billetera de Ethereum, entonces window.ethereum estará allí. Y si tienes una billetera de Solana como Phantom, tendrás window.Solana allí. Y también puedes llamar a funciones como window.Solana.isPhantom para saber si la billetera Phantom es el tipo de billetera. Así que todo tipo de cosas como esas se inyectan en la ventana. Así que si instalas Metamask, window.ethereum estará automáticamente allí. Sí, puedes pensar en el contrato como un servidor que responde a llamadas de API. Es exactamente así como puedes pensarlo.

Muy bien, genial. El próximo caso de uso que vamos a ver y. Entonces, el objetivo principal de este contrato es más como una introducción a cómo podrías interactuar con la red. En lugar de un caso de uso del mundo real, incluso este ejemplo de creación de tokens no es probablemente el caso de uso del mundo real más común. Sin embargo, creo que lo interesante que vamos a ver es esta función de transferencia. Y esta función de transferencia te brinda un ejemplo real. Como ejemplo de cómo puedes transferir valor entre partes en solo cinco líneas de código. En comparación con lo que podrías haber experimentado en cualquier otro tipo de e-commerce tratando de escribir este tipo de código tú mismo. Creo que este es un caso de uso realmente interesante. Ahora, si quieres aprender sobre Ethereum, Dapps, como qué aplicaciones se están construyendo en Ethereum. Un buen ejemplo o una buena vista de algunos ejemplos, si simplemente vas a explorar Dapps en Ethereum.org, puedes ver finanzas, arte y coleccionables, juegos y tecnología. Creo que uno de los más interesantes para mí es Axie Infinity. Y estoy tratando de pensar, vi vi un gráfico hoy donde su crecimiento en los últimos tres meses ha sido un número ridículo. Pero con Axie Infinity, es un juego de video basado en blockchain que permite a las personas ganar tokens mientras juegan. Así que es como jugar para ganar. Pero también puedes comprar y vender objetos dentro del juego. Entonces, si piensas en Fortnite, tengo un par de hijos y probablemente gasto cientos de dólares al año. O ellos también gastan todo el dinero, gran parte de lo que obtienen en Fortnite. Obtienes estas skins, pero una vez que crecen, las skins desaparecen. Con Axie Infinity, en realidad puedes revender todas las cosas que compras en el juego. Así que ahora creo que el crecimiento fue algo así como que tuvieron un mes de crecimiento en el que alcanzaron más de 800 millones de dólares en transacciones el mes pasado. Y han crecido aún más rápido desde que vi eso, porque vi un tweet hoy que fue como algo que me sorprendió. Así que pensé que eso era algo realmente interesante. Y ahora estás empezando a ver que todos los grandes estudios de juegos están empezando a darse cuenta de que esto es un gran potencial. Así que el jefe de YouTube Gaming habló recientemente sobre cómo están buscando formas de colaborar y hacer cosas con criptomonedas dentro de los juegos y tratar con ideas de Web3.

15. Casos de Uso de Blockchain y Desarrollo de Aplicaciones

Short description:

Los casos de uso de la tecnología blockchain actualmente se dividen en categorías como finanzas, arte y coleccionables, juegos y tecnología. Con la aparición de cadenas más asequibles como Arbitrum, Optimism, Solana y Avalanche, es posible que pronto veamos casos de uso más amplios, incluyendo plataformas de redes sociales que permiten a los usuarios ganar recompensas. Un aspecto interesante de construir en la blockchain es que una vez que los datos se escriben en ella, permanecen allí para siempre. Esto abre posibilidades para proyectos como un blog donde las publicaciones se almacenan permanentemente por una pequeña tarifa de transacción. El espacio de los NFT es otro ejemplo, con múltiples mercados construyendo interfaces sobre los datos de la aplicación subyacente. Mirando hacia el futuro, podemos esperar el desarrollo de versiones Web3 de plataformas populares como YouTube, redes sociales e Instagram. Para explorar los tipos de aplicaciones que se están construyendo, visita graph.com y navega por los subgrafos, que son APIs creadas por desarrolladores. Muchas de estas APIs se centran en DeFi y juegos.

También tienes algunos de los grandes estudios de juegos que han estado hablando activamente de ello incluso hoy. En general, como la conciencia de las criptomonedas, Stripe anunció hoy que están haciendo un gran impulso para un nuevo equipo de criptomonedas y están contratando a muchas personas para eso dentro de Stripe. Stripe ha sido realmente anti cripto hasta hace poco, así que eso es bastante interesante. Ahora, muchos de los casos de uso se dividen en estas categorías: finanzas, arte y coleccionables, juegos y tecnología. Sin embargo, creo que con las cadenas menos costosas como Arbitrum y Optimism, Solana e incluso Avalanche, ahora estamos empezando a ver casos de uso más amplios, como aún no hemos visto la gran aplicación de redes sociales que permite a las personas ganar por usar la plataforma en sí. Así que creo que eso va a suceder pronto. Sí, y las solicitudes GET son gratuitas. Entonces, sí, las solicitudes GET son gratuitas. Creo que eso también es una de las cosas realmente interesantes de construir en la blockchain es que tus data permanece allí literalmente para siempre. Siempre que la red esté en funcionamiento, Ethereum nunca ha dejado de funcionar. Al menos eso es lo que sé. Tal vez haya dejado de funcionar durante un corto período de tiempo en algún momento. Pero según entiendo, nunca ha dejado de funcionar. Pero una vez que escribes data en la blockchain, permanece allí para siempre. Como mencioné, uno de los proyectos en los que estoy trabajando y que creo que será interesante es un blog en el que, una vez que escribo una publicación y pago, creo que eran dos o tres centavos por la transacción en Solana y Arweave, vive allí para siempre. Nunca tengo que pagar nada más en el futuro. Y si olvido pagar mi factura de alojamiento, no se cae. Pero también es público y accesible para cualquiera. Creo que muchas de las ideas están en Web3 o las personas están construyendo interfaces para competir en diferentes backends de data. Un buen ejemplo de esto es el espacio de los NFT, donde tienes Foundation, Zora, OpenSea, SuperRare y Rarible. Tienes media docena de mercados que ahora están construyendo interfaces sobre todos estos datos de la aplicación. Así que creo que ese es un ejemplo muy básico, como los NFT no son aplicables a la mayoría de las cosas, pero verás esa misma idea en acción. Creo que cuando alguien construye el YouTube de Web3, la red social de Web3, Instagram de Web3 y esas cosas. Otro buen lugar para ver los tipos de aplicaciones que las personas están construyendo es si vas a graph.com. Este es el lugar donde trabajo o uno de los protocolos con los que trabajo en estrecha colaboración, supongo que podrías decir. Y vas a los subgrafos. Estos son como APIs que las personas han construido. Y vas a, de hecho, voy a ir al servicio alojado porque tiene algunas APIs más. Aquí puedes ver un buen ejemplo de algunos de los diferentes tipos de aplicaciones populares y las diferentes APIs que las personas están construyendo. Muchas de estas se centran en DeFi y juegos.

16. Depuración de Error de Transacción y Contrato de Token

Short description:

Alguien preguntó sobre un error al enviar una transacción en bruto con un ID de cadena no válido. Verifica que el ID de cadena esté configurado en 1337. Si el problema persiste, restablece el historial de transacciones de tu cuenta en la configuración de Metamask. Después del descanso, exploraremos los tokens y el envío de pagos dentro de un contrato. Podemos abstraer la necesidad de proveedores de pago y permitir transacciones directas entre las partes. Repasaremos el código de un contrato de token que establece el nombre, el símbolo y el suministro.

De acuerdo, genial. Alguien preguntó, estoy obteniendo este error al intentar enviar una transacción en bruto con un ID de cadena no válido. Así que. Dos cosas que vamos a hacer para debug eso. En primer lugar, verificaría dos veces que tienes el ID de cadena configurado correctamente aquí, que es 1337. Y si no lo tienes, esto está documentado en el archivo readme. Así que asegúrate de tener esto configurado en el ID de cadena 1337. Y luego, si eso ya está hecho y aún no funciona, puedes restablecer tu cuenta. Y esto no eliminará tu cuenta, solo restablecerá el historial de transacciones. Y la forma en que puedes hacerlo es yendo a tu billetera de Metamask, abriendo la configuración aquí. Y luego yendo a avanzado. Y luego yendo a avanzado. Y luego haciendo clic en restablecer cuenta. Así que esas son las dos cosas que verificaría para asegurarme de que todo esté bien. Muy bien. Así que creo que lo siguiente que vamos a ver son los tokens, pero creo que dado que ya son las 20 minutos después de la hora, podría ser un buen momento para hacer un descanso y permitir que las personas se pongan al día o tomen un descanso para ir al baño o beber algo. Entonces, lo que haremos es volver a empezar a los 35 minutos después de la hora. Eso es casi exactamente 15 minutos a partir de ahora. Así que tomemos un descanso de 15 minutos. Volveremos a las 12:35, hora local, que serían las 10:35 a.m. hora del Pacífico. Serán la 1:35 p.m. hora del este. Y no estoy seguro de la hora en Europa donde te encuentras, pero digamos 35 minutos después de la hora. Y estaré aquí tomando café y revisando las preguntas en Discord. Y estaré aquí tomando café y revisando las preguntas en Discord. Y estaré revisando las preguntas en Discord. Y estaré revisando las preguntas en Discord. Y estaré revisando las preguntas en Discord. Muy bien. Parece que es hora de continuar. Parece que algunas personas se divirtieron durante el descanso, enviándose tokens a otras billeteras, lo cual es genial. Y es una buena manera de experimentar porque tienes varias cuentas y puedes enviarlos a diferentes cuentas haciendo eso. Así que digamos que quiero enviar algunos tokens a esta cuenta. Solo tengo que abrir esta cuenta, copiarla en mi portapapeles, volver aquí y enviar y transferirlos entre mis cuentas o puedo pegar la dirección aquí de cualquier manera. Y tal vez quiera enviar, ya sabes, 100 ETH a esa dirección. Debería poder ir aquí y ver que tengo 100. Y esto es similar a lo que haremos en un momento. Pero lo haremos con nuestros propios tokens que crearemos y lo haremos programáticamente a través de una aplicación de front-end. Muy bien. Una de las cosas más interesantes del desarrollo de contratos inteligentes es la capacidad de enviar pagos entre diferentes partes dentro del propio contrato. También programar cosas como comisiones y tarifas en un contrato que se pueden enviar a una dirección específica, lo cual es bastante interesante cuando piensas en cómo funcionan los mercados hoy en día. Todos los diferentes tipos de mercados digitales que existen hoy en día. Puedes pensar en lo que la gente compra y vende digitalmente. Por ejemplo, tienes cosas como, diría, Spotify, tienes YouTube, tienes personas que venden cursos digitales. Tienes, por supuesto, los NFT, que son como tipos de tecnología Web3. Pero en general, tienes todo tipo de pagos digitales que pueden ocurrir. Una de las cosas realmente interesantes es que podemos básicamente abstraer eso y hacer parte del propio contrato. Por lo tanto, no necesitamos tener ningún proveedor de pago. Solo permitimos que las personas realicen transacciones directamente entre diferentes partes sin intermediarios. Mencioné anteriormente que esta función de transferencia es lo que está sucediendo allí. Pero en lugar de simplemente mencionarlo, vamos a copiar todo este contrato. Y vamos a repasar todo este código. Así que voy a copiar esto y voy a crear un nuevo archivo llamado token.sol. Y esto estará en el directorio de contratos. Así que si voy y abro mi código de proyecto. Y voy a la carpeta de contratos en el nivel raíz aquí. Y creo un nuevo archivo llamado token.sol. Puedo pegar este nuevo contrato aquí. Estamos haciendo lo mismo cuando comenzamos. Solo estamos importando hardhat.console. Y estamos configurando nuestra versión de Solidity y todo eso. Y nuestra funcionalidad principal ocurre en estas 20 líneas de código. Tenemos un contrato llamado token. Establecemos algunas piezas iniciales de estado. Entonces, lo primero que hacemos es establecer el nombre de nuestro token como token de gatos perezosos o como prefieras. Estamos estableciendo un símbolo. Y aquí lo estamos estableciendo como LCT.

17. Contrato de Token y Despliegue

Short description:

Establecemos el suministro en 1 millón y usamos un mapeo para almacenar los saldos de las direcciones como pares clave-valor. En el constructor, establecemos el suministro total de tokens para el desplegador. La persona que despliega el contrato se denomina message.sender. La función de transferencia permite enviar tokens entre partes. Incluye una declaración require para verificar el saldo del remitente y resta tokens de la cuenta del remitente mientras los deposita en la cuenta del destinatario. Tenemos 15 líneas de código que logran esto. Después de guardar el contrato, lo compilamos y actualizamos el script de despliegue para incluir el despliegue del token. Obtenemos una referencia al contrato de token y esperamos que el despliegue sea exitoso, registrando la dirección del token. Se pueden programar múltiples direcciones en el contrato para distribuir tokens entre las partes.

Así que aquí tenemos un valor que establecemos como un nombre de variable llamado suministro de tokens. Y la cantidad es de 1 millón. Y luego tenemos algo interesante, este mapeo. Y esto es una forma de hacer una operación de pares clave-valor en Solidity, casi como un objeto donde tienes un objeto. En nuestro caso, se llamará saldos. Y luego los saldos tendrán una clave. Y la clave será una dirección. Y el valor será un entero. De esta manera, podemos agregar múltiples valores si queremos aquí. Pero en realidad, solo tendremos uno. Entonces, este mapeo se puede pensar como un mapa o un objeto en otro lenguaje de programación.

Y luego, en nuestro constructor, tenemos una línea de código donde básicamente vamos a establecer el suministro total de la persona que está desplegando este contrato como el suministro total que establecimos aquí. Y esto va a decir, OK, tenemos este mapeo llamado saldos. Y queremos establecer que la persona que está desplegando este contrato tiene un saldo de un millón de estos tokens, básicamente. Ahora, la forma en que podemos acceder a la persona que está desplegando este contrato es a través de un valor muy especial al que podemos hacer referencia llamado message.sender. Esto significa que la persona que está interactuando con el contrato va a ser el remitente del mensaje. Entonces, esto significa que la persona que está desplegando el contrato o la persona que interactúa con el contrato enviando una transacción va a ser message.sender. Así que tenemos la capacidad de tener acceso a esa persona. Es casi como si estuvieras haciendo algún tipo de mecanismo de autenticación en el servidor, podrías analizar ese JWT o analizar la sesión de la operación y obtener la identidad del usuario. Es algo así, excepto que es nativo y es parte de cómo funciona la máquina virtual de Ethereum. Y realmente no necesitamos escribir ningún código. Siempre está disponible para nosotros como message.sender. Así que estamos transfiriendo los un millón de tokens a la persona que despliega este contrato. Eso es básicamente lo que está sucediendo. Y luego tenemos dos funciones. Una nos permite transferir tokens entre dos partes y otra nos permite leer el saldo del usuario que interactúa. Entonces, el balanceOf toma una dirección. Y aquí podemos verificar en ese mapeo los saldos de esa cuenta. Entonces, cuando desplegamos este contrato, solo habrá una cuenta y será la persona que desplegó esto y tendrá un saldo de un millón. Pero si comenzamos a hacer transacciones, si comenzamos a enviar tokens entre partes, este mapeo tendrá múltiples valores diferentes. Así que tendremos una persona con X cantidad de tokens, otra persona con X cantidad de tokens y así sucesivamente. Pero esta función de transferencia es donde realmente enviamos tokens entre diferentes partes. Entonces, lo que tenemos aquí son tres líneas de código. Lo primero que hacemos es una declaración require. Y si alguna vez has hecho algún tipo de lógica if en una aplicación JavaScript, podrías decir si este valor es verdadero, entonces haz eso, require es como una declaración if que dice si esto no es verdadero, entonces vamos a detener la ejecución en este punto. Entonces, este require básicamente dice que requerimos que esto sea verdadero. Y si no, vamos a lanzar este error aquí. Así que el requisito es que la persona que intenta enviar tokens debe tener esa cantidad de tokens en su saldo. Y si no, por supuesto, no pueden realizar esta operación de todos modos. Así que queremos lanzar un error. Y luego, las dos cosas siguientes que estamos haciendo son bastante básicas. Estamos restando los tokens de la cuenta del remitente y luego depositándolos en la cuenta del destinatario. Lo siento, estamos restando los tokens de la cuenta del remitente y depositándolos en la cuenta que han especificado, supongo que es una mejor manera de decirlo. Así que estamos verificando que el remitente tenga esa cantidad de tokens en su cuenta. Luego los transferimos fuera de la persona que está enviando esta transacción y los transferimos a la dirección del usuario que se pasa como argumento. Y el otro argumento es solo la cantidad. De esta manera, estamos actualizando el saldo del usuario. De los usuarios, supongo que podrías decir en plural en este caso.

Vale, genial, básicamente tenemos 15 líneas de código, en realidad eran como 20 líneas de código, y estamos haciendo bastante allí. Así que vamos a guardar ese contrato y continuar. Ahora podemos llamar a MPX hard hat compile nuevamente porque ahora tenemos un nuevo contrato. Y si esto se compila correctamente, deberíamos poder ir a nuestro directorio de artefactos y ver que ahora tenemos un nuevo contrato de token. Así que realmente no necesitamos tocar eso, pero es bueno ver que se ha compilado. Lo siguiente que queremos hacer es actualizar nuestro script de despliegue. Porque en este momento, nuestro script de despliegue solo está desplegando el saludo y ahora también queremos desplegar el token. Entonces. Voy a obtener una referencia al contrato de token y todas estas cosas están exactamente en la documentación. Vamos a obtener una referencia al contrato de token. Vamos a desplegar el token. Vamos a desplegar el token. Y luego, al igual que hicimos antes. Vamos a esperar a que el despliegue sea exitoso y luego simplemente registraremos la dirección del token. Entonces. Exactamente el mismo código que escribimos aquí, creo que la diferencia principal es que en la función de despliegue aquí, estamos pasando un valor de constructor. Pero aquí hemos codificado todo. Así que no tenemos ningún valor de constructor. Así que simplemente dejamos ese argumento en blanco. Sí, puedes programar múltiples direcciones en un contrato, como cuando despliegas esto, básicamente podrías tener una matriz y simplemente distribuir estos tokens entre un cierto número de partes. Muy bien, genial.

18. Despliegue del Contrato y Actualización del Front End

Short description:

Hemos escrito nuestro script de despliegue y desplegado nuestro contrato en nuestro nodo local de Ethereum. Actualizamos nuestro front end para comenzar a interactuar con el contrato desplegado importando el token y estableciendo la dirección del token. Creamos nuevos estados para la cantidad de tokens y el número de cuenta a los que enviar los tokens. Implementamos la función get balance para obtener el saldo de tokens del usuario. También implementamos la función send coins para aprobar y transferir tokens entre partes. Actualizamos la interfaz de usuario para incluir botones para obtener el saldo y enviar los tokens, así como formularios para la cuenta de usuario y la cantidad. Por último, importamos la dirección del token en nuestra billetera MetaMask para ver el saldo del token.

Entonces. Hemos escrito nuestro script de despliegue, así que ahora podemos continuar. Ya hemos terminado esta parte aquí. Y ahora queremos desplegar nuestro contrato en nuestro nodo local de Ethereum nuevamente, porque ahora hemos actualizado algunas cosas, queremos desplegarlo de nuevo. La forma en que podemos hacerlo es simplemente ejecutar el mismo script que ejecutamos antes, este script aquí. Ejecutamos NPX hard hat. Ejecutamos scripts/deploy. Y queremos establecer la red como local. Este script está en el tutorial y en el material de la masterclass. Si lo ejecuto, ahora deberíamos ver que se registran algunos mensajes aquí y ahora tenemos las dos direcciones de contrato diferentes registradas aquí. Tenemos el greeter y ahora tenemos el nuevo para el token. El token ha sido desplegado. Ahora actualicemos nuestro front end para comenzar a interactuar con él. Para hacer eso, voy a importar algunas cosas nuevas. Voy a abrir SRC/app.js. Voy a ir a la parte superior aquí. Ya hemos importado el greeter, así que ahora voy a importar el token. También tenemos la dirección del greeter. Todavía no tenemos la dirección del token. Así que voy a establecer eso. Si vuelvo a mi terminal, en realidad puedo, déjame actualizar también el greeter, ya que hemos desplegado una nueva versión. Y luego no creo que tengas que. Creo que ambos seguirán funcionando. Pero de todos modos, voy a establecer la dirección del token aquí.

A continuación, vamos a crear un par de cosas nuevas. A continuación, vamos a crear un par de nuevos estados. Vamos a tener un formulario que permita al usuario enviar tokens a otra cuenta, así que necesitamos mantener dos estados. Necesitamos la cantidad de tokens y el número de cuenta al que queremos enviar los tokens. Lo siguiente que queremos hacer es tener una función para obtener el saldo de tokens del usuario que llama a la función. Así que voy a ir debajo de estas dos funciones. Y voy a crear una nueva función llamada get balance. Y una cosa interesante que estamos haciendo aquí que no hemos hecho antes es que estamos llamando a esta ventana. Solicitud de ethereum como lo hicimos antes. Pero estamos estableciendo el valor de retorno como una variable. Esto se debe a que cuando llamas a la ventana. Solicitud de ethereum, se te da una matriz de cuentas que el usuario ha permitido que la aplicación use. Y como solo hemos permitido que esta aplicación use una sola cuenta, simplemente vamos a tomar la primera cuenta de esa matriz. Así que esta debería ser la cuenta que hemos estado usando todo el tiempo. Lo siguiente que hacemos es, como hacemos lo mismo con el proveedor, pero aquí, cuando llamamos a contract.balanceof, estamos pasando la cuenta del usuario que está actualmente registrado. Así que esto es como si estuviéramos pasando esta variable a balanceof y si vamos a token.sol, verás que balanceof toma, ya sabes, un argumento para una dirección. Y aquí estamos pasando esa dirección. La siguiente función que vamos a escribir es send coins. Esto va a usar un firmante porque básicamente necesitamos firmar una transacción y aprobar una transferencia entre dos partes. Y lo que vamos a hacer es llamar a contract.transfer pasando dos argumentos. Uno será la cuenta a la que nos gustaría enviar y el otro será la cantidad. Y establecemos esas variables antes, como aquí. Así que tenemos user account, set user account, amount y set amount. Vamos a actualizar, ya sabes, set amount y set user account en la interfaz de usuario en un momento, pero esas variables estarán disponibles para nosotros aquí. Y luego esperamos a que se complete esa transacción y simplemente registramos, ya sabes, que se transfirió correctamente. Parece que alguien está teniendo un error. Vale, parece que lo han solucionado. Bien. Lo siguiente que haremos es actualizar nuestra interfaz de usuario ahora. Así que agregamos, ya sabes, get balance. Agregamos send coins. Y ahora queremos agregar este código aquí. Así que simplemente voy a copiar esto. Vale, tenemos nuestra interfaz de usuario. Así que simplemente voy a copiar esto. Estoy haciendo todo esto, supongo, dentro de este encabezado. Vale, así que simplemente estamos agregando un salto de línea aquí. Y luego estamos agregando un botón para obtener el saldo, un botón para enviar los tokens, un formulario de entrada que nos permite establecer la cuenta de usuario a la que queremos enviar los tokens. Que queremos enviar.

Vale, así que tenemos eso. Lo siguiente que estamos haciendo es bastante interesante. Cuando desplegamos este contrato, se nos dio una dirección para este token. Ahora esta es una dirección que ahora podemos importar en nuestra billetera MetaMask y ver ese saldo en nuestra billetera.

19. Agregando la Dirección del Contrato de Token

Short description:

Para agregar la dirección del contrato de token, ve a la sección de agregar token y pega la dirección. El símbolo aparecerá automáticamente. Establece el decimal del token en 0.1 y haz clic en agregar token personalizado.

La forma en que lo hacemos es simplemente copiar esto en nuestro portapapeles. Y tengo este tipo de esquema aquí. Pero lo que vamos a hacer es ir aquí a agregar token. Y parece que ahora necesitamos, parece que la interfaz ha cambiado desde que hice esto. Así que importar tokens. Así que necesito actualizar eso. Importar tokens. Y vamos a pegar la dirección del contrato de token. Y verás que cuando pegamos la dirección, el símbolo aparece automáticamente. Eso significa que se está dando cuenta de eso. Y para el decimal del token, simplemente vamos a poner 0.1. Y luego vamos a hacer clic en agregar token personalizado.

20. Importando y Enviando Tokens

Short description:

Ahora tenemos 1 millón de tokens LazyCat en nuestra billetera y podemos importarlos en MetaMask. Después de actualizar la interfaz de usuario, podemos enviar tokens a otras direcciones. Sin embargo, parece haber un error en MetaMask y es posible que necesitemos reinstalar la billetera. Nos disculpamos por las molestias.

Aquí tenemos ahora nuestros tokens LazyCats en nuestra billetera. Ahora tenemos 1 millón de tokens LazyCat. Así que tenemos ETH. Oops. Sí, ahora tenemos ETH y LCT. Genial. Ahora que tenemos nuestros nuevos tokens en nuestra billetera, podemos importarlos en nuestra billetera de MetaMask. Y ahora podemos comenzar a enviarlos a otras personas.

Lo que haré es guardar esto y volver a mi aplicación React. Y ahora deberíamos ver que tenemos una interfaz de usuario actualizada. Entonces, si hacemos clic en obtener saldo, deberíamos ver que tenemos un saldo de 1 millón. Y ahora queremos enviar estos a otra persona. Así que podría decir, vamos a enviar a otra dirección aquí, supongo. Así que voy a hacer clic en la cuenta 2. Y simplemente copiaré esta dirección en mi portapapeles. Volver a la cuenta 3. Y aquí puedo pegar la ID de la cuenta y luego la cantidad. Voy a enviarles 100,000. Así que si hago clic en enviar monedas. Y parece que tengo algún tipo de error. No estoy seguro de qué está pasando allí. Huh. Interesante. Parece que tengo un error en MetaMask. ¿Alguien más tiene un error? Y no creo que haya guardado la información de mi billetera. Así que es posible que necesite eliminar esta billetera. Y luego reinstalarla. Y no creo que haya guardado la información de mi billetera. Así que es posible que necesite eliminar esta billetera. Y luego reinstalarla. Sí, voy a tener que hacer eso. Así que voy a eliminar. Wow, interesante. Alguien más tuvo el mismo error. Así que tengo que pasar por todo este proceso nuevamente. Así que me disculpo. Este será todo el proceso nuevamente. Tal vez debería guardar esta frase de contraseña por si acaso. De acuerdo. Parece que arruiné algo. Permíteme intentarlo de nuevo. Oh, Dios mío, volví a arruinar algo. Ahí vamos. De acuerdo, genial. Voy a guardar esto. Frase de contraseña por si acaso vuelve a ocurrir. Tengo MetaMask instalado. Ahora quiero. Adelante y. Importar esta dirección de cuenta. Que necesito reiniciar el nodo. De acuerdo. Quiero seguir adelante y volver a implementar este contrato. Actualizar la dirección del token. Y luego intentar importar la dirección del token aquí. De acuerdo. Permíteme intentarlo de nuevo. De acuerdo. De acuerdo. Permíteme intentarlo de nuevo. De acuerdo. Um, lo que podría hacer, y no estoy seguro si esto tuvo algo que ver con eso, pero podría seguir adelante e importar otra. Una de estas cuentas para usar en lugar de usar la cuenta de MetaMask. Así que voy a copiar esta clave privada. Y. Iré aquí y diré importar cuenta. Y voy a usar esta cuenta. Así que para enviar a alguien y copiar esta dirección y volver a la cuenta 2. De acuerdo. Y voy a seguir adelante e importar esta cuenta.

21. Importando Tokens y Open Zeppelin

Short description:

Encontré un error al intentar enviar monedas, pero me di cuenta de que se debía a un error en el decimal del token. Ethereum trabaja con 18 decimales, pero en nuestro caso lo configuramos en cero. Una vez corregido el decimal, la transacción se realizó con éxito. Es importante entender el sistema decimal al tratar con Ethereum y tokens. Open Zeppelin es una empresa que proporciona soluciones de código abierto para el desarrollo seguro y estandarizado de contratos inteligentes.

Voy a proceder e importar esta cuenta. Así que voy a copiar esta dirección y volver a la cuenta dos. Y quiero enviar monedas a esta dirección. Vamos a intentarlo de nuevo. Me encuentro con este error nuevamente. Me pregunto si es la forma en que importé esa cuenta. Déjame intentarlo una vez más. De acuerdo. Muy bien. De acuerdo. De acuerdo, voy a copiar esta dirección del token. Y voy a importar el token. Y tal vez estableceré el decimal del token en cero. Me pregunto si eso fue lo que lo arruinó. Así que estoy estableciendo el decimal del token en cero. Espero que esto solucione el problema y tal vez estaba equivocado acerca del decimal del token. De acuerdo. Así que con eso dicho, intentemos esto una vez más. Voy a actualizar. Enviar monedas allí. Cien mil. Primero obtener saldo. Primero obtener saldo. El saldo se ve bien. De acuerdo, ahí vamos. Creo que por alguna razón me equivoqué con el decimal del token. El decimal importa porque cuando estás tratando con Ethereum, en realidad estás trabajando con ETH, que es la moneda nativa para interactuar en la blockchain de Ethereum. En realidad estás trabajando con 18 decimales y tienes la capacidad de enviar porciones de un ETH hasta el decimoctavo decimal. Y estas cosas están un poco más allá del alcance de este, diría, taller. Pero definitivamente es algo en lo que debes investigar. Y la forma en que podemos lidiar con estos grandes números es mediante el uso de la unidad wei y gwei. Un wei es una dieciochoava parte de un decimal de ether y un gwei son ocho decimales. Así que cuando quieres enviar estas grandes cantidades de decimales, estás tratando con estas cosas. Por lo general, cuando implementas tu propio token, estableces el token con 18 decimales también. Pero en nuestro caso, lo configuramos con cero decimales. Así que creo que cuando intenté hacer una transacción con 0.1 decimales, se dio cuenta de que algo estaba mal. De todos modos, deberíamos poder hacer clic en confirmar y ver que se enviaron cien mil monedas con éxito. Así que si tuviste el mismo error que yo y me escuchaste hacer 0.1 decimales, ese fue el error. Al importar el token, solo debe ser cero decimales. Y me aseguraré de actualizar el material del taller para reflejar eso. Si estás obteniendo... Sí, si estás enviando 10 y obteniendo 0.1, es porque me equivoqué con los decimales. Estoy obteniendo un saldo de cero en lugar de un millón. Sí, tal vez se importó en la cuenta equivocada. Asegúrate de que la cuenta que estás importando sea la cuenta cero, donde deberían aparecer las cien mil monedas. No aparecerán en ninguna de estas otras cuentas, solo en la cuenta cero. Y la razón de esto es que cuando implementas el contrato. Usando la CLI, automáticamente utiliza la cuenta cero. Sí, uso cero como el decimal. Así que ahora debería poder hacer esto, cuando verifique mi saldo, debería ser de novecientos mil. Pero si cambio a esta otra cuenta. Conéctate a ella y obtengo el saldo, ahora debería tener un saldo de cien mil. Y, ya sabes, también podríamos enviar esto a otras partes. Digamos que quiero enviar ciento cincuenta mil de vuelta a esta cuenta. Puedo hacerlo aquí. Y parece que no tengo suficiente. No tengo suficiente Ethereum para enviar, así que debes tener ETH para enviar. De acuerdo, genial. Parece que cero funciona. Oh, ¿sabes qué? Incluso lo tengo en el tutorial para usar cero. No sé por qué pensé en 0.1 de todos modos. Muy bien, continuemos ahora, la forma en que acabamos de usar los tokens es bastante rudimentaria. Lo codificamos todo directamente. No hay seguridad. No hay muchas cosas que normalmente necesitas para una transacción financiera, especialmente cuando estás tratando con un valor real como lo haces en Ethereum. Lo genial del ecosistema de Ethereum es que muchas cosas ya se han resuelto. Y muchas de estas cosas ya son de código abierto y están estandarizadas. Y debido a que las transacciones de valor son algo común cuando se trata de moneda digital dentro de contratos inteligentes, hay muchas cosas que ya se han probado y se han estandarizado, como dije. Entonces, una de esas cosas es esta empresa llamada Open Zeppelin y Open Zeppelin tiene muchas cosas realmente geniales de código abierto que han creado y puesto a disposición de forma gratuita.

22. Creación de Tokens ERC20 y Open Zeppelin

Short description:

ERC20 es un estándar de token que permite la fácil creación de tokens utilizando funciones y funcionalidades predefinidas. Al heredar el estándar ERC20 en tu contrato, obtienes acceso a varias funciones como transferir, aprobar y asignación. Para usar ERC20, debes instalar los contratos de Open Zeppelin e importarlos en tu contrato. Con solo unas pocas líneas de código, puedes crear un token y llamar a la función Mint para crear el token real. La función Mint transfiere un número especificado de tokens al message.sender. ERC20 se utiliza comúnmente para tokens digitales fungibles, mientras que ERC721 se utiliza para tokens no fungibles. La documentación de ERC20 proporciona información detallada sobre las diversas funciones disponibles. En el constructor, debes especificar el nombre y el símbolo del token. Pasa estos argumentos al constructor para crear tu token. Finalmente, en el archivo deploy.js, pasa los argumentos al constructor para completar el proceso de creación del token.

Y luego también tienes algo llamado ERC20 y hay un puñado de otros tipos de tokens ERC y estándares que están disponibles para ti. Entonces, ERC20 es el token que en realidad es Ethereum, ETH en sí, y es un estándar que te permite crear tokens muy fácilmente utilizando un conjunto predefinido de funciones y funcionalidades que te brindan muchas cosas diferentes. Así que si me desplazo un poco hacia abajo, cuando usas ERC20 para crear un token, estás heredando mucha funcionalidad de antemano. Puedes heredar cosas como el nombre del token, el símbolo, tener funciones a las que puedes llamar para obtener esta información, los decimales. Por defecto, esto se establece en 18. El suministro total, el saldo. Tienes una función que te permite transferir. También tienes una función que te permite transferir entre dos direcciones. Y luego tienes aprobar, que te permite darle a otra persona la capacidad de gastar tus propios tokens. Y luego tienes asignación. Todas estas funciones se programarán en ERC20. Todo lo que tienes que hacer es heredar ese estándar en tu contrato. Así que si alguna vez usaste algo en JavaScript donde importas una biblioteca existente, es muy similar a eso. Y todo lo que necesitamos hacer es instalar los contratos de Open Zeppelin y podemos comenzar a usarlos.

Entonces, lo que voy a hacer es seguir adelante y hacer eso. Voy a llamar a npm install en Open Zeppelin/contratos. Pero voy a usar Yarn. Espero que esto funcione ya que ya tengo un paquete. No tengo un paquete. Así que tengo un archivo package.json. OK, todavía va a funcionar. Muy bien. Parece que casi está. Muy bien. Parece que casi está. Muy bien. Parece que casi está. OK, hemos instalado Open Zeppelin. Y ahora podemos importarlo. Así. Y ahora podemos heredar de ERC20 y tener toda esa funcionalidad. Así que básicamente podemos crear un token usando cuatro o cinco líneas de código. Así que vamos a copiar esto y volver a nuestro contrato inteligente y simplemente actualizar esto. Ahora hemos creado toda esa funcionalidad con solo cinco líneas de código. Ahora, la línea de código más importante es esta aquí. Aquí es donde realmente estamos llamando a Mint. Y Mint significa que estamos creando el propio token. Mint toma dos argumentos requeridos. Y si volvemos aquí, veamos aquí. Parece que no tengo Mint listado. Pero en realidad, déjame desviarme aquí por un segundo. Y voy a buscar Open Zeppelin ERC20. Algunos de los otros tokens o dos de los otros estándares que admiten son ERC721, ERC777. Y creo que hay uno o dos más. Pero ERC20 es lo que mucha gente usa para tokens digitales reales que son fungibles o son tokens de tipo de moneda. Y luego ERC721 es lo que la gente usa para NFT o tokens no fungibles, que son básicamente identificadores únicos para un token individual. Mientras que con ERC20, puedes crear varios. Pero si vas a ERC20, verás que tenemos mucha documentación sobre qué está sucediendo aquí. Por ejemplo, hay una explicación de los decimales. Tienes documentación sobre cómo crear un suministro fijo. También tienes un poco más de información sobre la función Mint. Si hacemos clic en Mint, verás que tenemos todo esto documentado. Pero Mint básicamente transferirá este número de tokens al remitente del mensaje. Esa es una idea general. Así que. Así que.

Con eso dicho, vamos a pasar al constructor. Necesitamos especificar un par de argumentos. Uno es el nombre del token y el otro es el símbolo. Y anteriormente lo habíamos codificado. Pero en este ejemplo, en realidad vamos a pasarlos como argumentos al constructor. También podrías decidir crear una variable como aquí y luego omitir esto y simplemente hacer referencia a esas variables aquí mismo. Depende de ti. Pero en este caso, vamos a tomar el estándar tal como está y lo pasaremos al constructor. Así que tenemos token y lo llamamos Indy token o puedes llamarlo como quieras. Pero, ya sabes, esto es realmente todo lo que necesitamos para seguir adelante. Así que dicho esto.

Continuemos. Vamos a deploy JS.

23. Actualización del Front End y Recursos Adicionales

Short description:

Para actualizar el front end y utilizar el nuevo token, debes modificar las funciones de obtener saldo y enviar puntos. El desafío consiste en utilizar el nuevo token en el front end, lo cual requiere importarlo en Metamask. El término 'minting' se refiere a la creación de tokens o escasez digital en el mundo de Ethereum. Se recomiendan los recursos Ethereum dev speed run, scaffold ETH, Buildspace y el tutorial del mercado de NFT para seguir aprendiendo. Use Web3 es una plataforma completa con tutoriales, podcasts, cursos en video, libros y kits de inicio. Sigue a personas influyentes en Twitter, como Austin Griffith, para obtener más información.

Y ahora queremos seguir adelante y pasar los argumentos al constructor. Así que para esto, voy a hacer Indy token. O en realidad puedes llamarlo como quieras, pero debe coincidir con esto. Y luego queremos pasar dos argumentos aquí. En realidad, no, necesitamos pasar dos argumentos aquí. Me estoy confundiendo un poco. No, no, lo siento, tenía razón. Necesitamos pasar dos argumentos aquí. Creo que me confundí porque llamé a esto Indy token en lugar de tal vez solo token o algo así. Pero nuevamente, si sigues la masterclass, debería funcionar correctamente. Solo me estoy confundiendo a mí mismo, creo. Con esta actualización, ahora hemos pasado los valores al constructor. Y deberíamos estar listos para continuar. Así que si ahora ejecutamos, como NPX hard hat compile. Y luego NPX hard hat run scripts/deploy y luego set. ¡Ups! Network como localhost. Luego deberíamos ver que hemos implementado con éxito nuestro nuevo token y ahora tenemos un suministro total de. En nuestro caso, 100,000 y tenemos 18 decimales por defecto. Entonces, cuando importamos esto, tenemos que establecer los decimales en 18. Con eso dicho, estamos llegando al final de todo lo que hemos estado haciendo aquí. Entonces, lo que diría que sería el desafío para ti, y puedo estar en Discord después para responder preguntas, es ¿cómo actualizas realmente tu front end para usar este nuevo token que implementamos? Y realmente las dos principales diferencias que necesitas cambiar o considerar cambiar serán esta función para llamar a obtener saldo y esta función para llamar a enviar puntos porque tal vez ya tengamos esta función aquí, así que tenemos saldo de. Ya hemos actualizado esto para que sea lo mismo, pero de cualquier manera, diría, OK, intentemos actualizar el front end o probar el front end para ver si podemos usar estos nuevos tokens. Pero aún necesitas importarlos en Metamask y todo eso. Así que diría que el desafío es usar este nuevo token en el front end. Y si puedes lograr eso, lo cual no debería ser muy difícil porque gran parte ya está hecho por ti, entonces deberías estar listo. Y alguien preguntó sobre los siguientes pasos que tomarías para profundizar en muchas de estas cosas. Y vinculé algunos de los recursos que son bastante buenos y todos son gratuitos. Entonces, tenemos el Ethereum dev speed run. Esto es algo que creó Austin Griffith y él es un gran educador y en realidad es la persona que me educó mucho en muchas de estas cosas. Y sí, alguien mencionó minting o preguntó sobre minting. Sí. Entonces, minting es básicamente crear tokens o imprimir dinero, como quieras decirlo, o crear alguna forma de escasez digital en el mundo de Ethereum. Sí, el Ethereum dev speed run es genial. Te presenta muchas cosas dentro del ecosistema de Ethereum y Solidity. Y también te presenta su scaffold ETH, que es un gran proyecto inicial para trabajar con Ethereum. Tiene ramas para todo tipo de aplicaciones en Ethereum. Cada una de estas ramas es un tipo diferente de aplicación escrita. Es como full stack. Tienes billetera Coinbase, tienes cosas de DeFi, tienes NFT, préstamos flash, todo tipo de cosas. Así que hay casi cientos o definitivamente. Probablemente sean cientos de aplicaciones que son proyectos de plantilla con los que puedes jugar, lo cual es realmente genial. La otra cosa que recomiendo es Buildspace. Buildspace es una especie de escuela de codificación gratuita para Web3. Son realmente geniales. Hacen muchas cosas en Ethereum y ahora también están comenzando a explorar Solana. También tenemos este tutorial que escribí, construyendo un mercado de NFT de extremo a extremo en Ethereum con Polygon. Esto utiliza lo que se conoce como una cadena lateral o la gente a menudo agrupa a Polygon como una capa adicional o dos. Esto te permite realizar transacciones en la red de Ethereum en una red EVM alternativa utilizando lo que se conoce como Polygon por una fracción de lo que normalmente harías en Ethereum. Creo que una transacción con Polygon está en el rango de 0.001 centavos o 2.1 centavos, algo así. Pero puedes usar el mismo código base para construir un mercado de NFT en cualquier cadena compatible con EVM, incluso Ethereum capa uno. Así que todos estos son realmente buenos lugares. Y finalmente, Use Web3 es un lugar realmente genial en general para ver muchos tutoriales y cosas. Tienes podcasts, cursos en video, libros, kits de inicio, tutoriales. Así que esos cuatro recursos que vinculé al final te mantendrán extremadamente ocupado durante semanas o meses. Parece que últimamente está saliendo mucho contenido genial sobre Web3. Por supuesto, finalmente está comenzando a despegar. Y diría que sigas a muchas personas en Twitter. Sigue a personas divertidas que están creando cosas. Sigue a Austin Griffith. Sigue a algunas de las personas que él retuitea.

QnA

Preguntas y Respuestas y Recursos Adicionales

Short description:

Estaré disponible durante los próximos 40 minutos para responder preguntas en Discord. Si tienes alguna pregunta final, por favor avísame. Agradezco el tiempo de todos y espero que hayan aprendido mucho. Puedes seguirme en Twitter en dabit3 y contactarme en otro momento. Las principales diferencias entre Hard Hat y Truffle radican en la experiencia del desarrollador. En mi opinión, Ethers.js tiene una API mejor que Web3.js. Estoy emocionado de estar en Londres la próxima semana para el evento principal. Echa un vistazo a mi tutorial sobre la construcción de APIs de GraphQL en Ethereum utilizando el Protocolo Graph en dev.to.

Todos ellos son excelentes educadores en el campo. Dicho esto, creo que hemos terminado. Estaré disponible durante los próximos 40 minutos para responder preguntas en Discord. Y si alguien tiene alguna pregunta final, por favor avísame. Estaré encantado de responderlas, por supuesto, durante los próximos 10 minutos aproximadamente. No hay forma de agradecerme más que simplemente haber asistido aquí y haber permanecido durante todo este taller. De verdad, aprecio mucho el tiempo de todos en estos días. Sé lo ocupados que todos estamos. Así que me alegra que hayas venido y participado, y espero que hayas aprendido mucho. Estoy viendo algunos comentarios muy buenos. Me alegra que a todos les haya gustado. Sí, también puedes seguirme en Twitter y contactarme en otro momento. Si tienes alguna pregunta, soy dabit3 en Twitter. Y mis mensajes están un poco cerrados. Mis mensajes directos, pero siempre puedes responder a un tuit o algo así. Muy bien. Parece que no veo... Vale, aquí hay una pregunta. Así que me quedaré un momento más. ¿Cuáles son las principales diferencias entre Hard Hat y Truffle? Lo mismo para Ethers y Web3.js. Diría que la principal diferencia es que estoy usando muchas de las mismas cosas. Y Web3.js. Diría que las bibliotecas anteriores para el desarrollo de Ethereum serían Truffle y Ganache y Web3.js. Y esas son realmente geniales. Y puedes hacer mucho con ellas. Y diría, ya sabes, muchos proyectos definitivamente todavía las usan y tienen un gran financiamiento. Creo que ConsenSys financia Web3.js. Y sí, son geniales. Pero creo que lo que Hard Hat aporta a la mesa para mí es una experiencia de desarrollo ligeramente mejor. Esa es solo mi opinión. Hay mucha gente que no está de acuerdo con eso. Pero Hard Hat está empezando a volverse bastante popular. Así que creo que ambos son igualmente populares. Y sugeriría que si estás interesado en explorar más del ecosistema, también eches un vistazo a Truffle. Creo que ethers.js tiene una API mejor que Web3.js. Fue más fácil para mí aprenderla y entenderla. Web3.js probablemente tiene una superficie de API más grande con la que podrías hacer más cosas. Pero ethers para mí fue más fácil de aprender. Y pensé que su documentación era un poco mejor. Así que gracias de nuevo por haber venido. Voy a terminar y salir del chat. Me desconecto de la transmisión en vivo. Así que sí, fue genial estar aquí. Gracias por haber venido. Estoy deseando estar en Londres la próxima semana para el evento principal. Y alguien preguntó sobre una introducción a The Graph. Y la tengo. Y está en dev.to. Si simplemente buscas 'construir APIs de GraphQL en Ethereum', creo que debería aparecer. Este es el tutorial que escribí para construir APIs sobre Ethereum. Es una historia larga, pero es un poco difícil de construir. Sí, es difícil construir aplicaciones front-end consultando directamente Ethereum y obtener cualquier cosa que no sea trivial, el tipo de datos que normalmente necesitas. Así que necesitas algún tipo de servidor de indexación. Y el proyecto con el que trabajo se llama The Graph Protocol. Y permite a los desarrolladores construir de manera rápida y sencilla estas APIs sobre Ethereum o cualquiera de estas redes descentralizadas. Así que este es un buen tutorial. Si quieres adentrarte en ese nivel intermedio, tal vez incluso, sí, diría que nivel intermedio de desarrollo de Ethereum, te recomendaría que también consultes este tutorial. Sí, déjame compartir el enlace. Es una buena idea.

Watch more workshops on topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.