Masterclass Web3 - Construyendo Tu Primer Dapp

Rate this content
Bookmark

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

Nader Dabit
Nader Dabit
145 min
12 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta masterclass cubre la construcción de un dApp 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 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 usando MetaMask. La masterclass destaca los casos de uso de la tecnología blockchain, la permanencia de los datos en la blockchain y el potencial para la integración de cripto en plataformas de juegos y redes sociales.

Available in English

1. Introducción a la Masterclass

Short description:

En esta masterclass, estaremos construyendo una dApp de React y siguiendo los pasos descritos en el readme. La masterclass tomará alrededor de tres horas para completar, con tiempo para explicaciones y preguntas. Al final, habrá un pequeño desafío y recursos adicionales para explorar.

OK, entonces, sí, si haces clic en el enlace y vas al repositorio de GitHub, verás que tenemos esta dApp de React. Esta es una especie de base de code que puedes usar como referencia. Pero el material de la masterclass en sí está en este readme que estás viendo justo aquí. Y la idea aquí no es realmente clonar esto y hacer algo con ello, sino seguir los pasos a medida que avanzamos en todo esto. Y tenemos un buen tiempo reservado para esto. Así que tenemos alrededor de tres horas para construir esto. Y vamos a cubrir bastante. Así que si estuvieras pasando por esto extremadamente rápido, sabes, sin siquiera leer nada, solo copiando y pegando el code, podrías ser capaz de terminar esta masterclass en unos 20 o 30 minutos. Pero vas a ver que cuando realmente estamos caminando a través de esto, explicando, sabes, todas las cosas que están sucediendo y esperamos responder a las preguntas, deberíamos tomar probablemente las tres horas completas. Y luego hay un pequeño challenge al final donde puedes tomar algo de lo que has aprendido hoy e intentar extenderlo un poco. Y luego tengo algunos enlaces a algunos recursos adicionales que podrías querer seguir cuando hayas terminado con esto.

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

Short description:

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

Dicho esto, bienvenidos a esta masterclass. Solo quería agradecer a todos por tomar tiempo de sus extremadamente ocupadas agendas para asistir a esto. Espero que cuando termines con esto, tengas una buena comprensión de cómo funciona gran parte de la pila Web3, o al menos las piezas centrales de la pila Web3. Y es posible que tengas algunos momentos reveladores que te emocionen acerca de, ya sabes, trabajar en este espacio, o tal vez simplemente, ya sabes, entender lo que está pasando aquí para decidir si esto es algo que quieres seguir adelante o no. Pero ya sabes, independientemente de, ya sabes, lo que termine sucediendo, creo que este es un buen conjunto de habilidades para al menos entender para el futuro de tu carrera y cosas así, especialmente con toda la atención y emoción que estás empezando a ver suceder alrededor de Web3 y cómo la gente está construyendo aplicaciones utilizando muchos de estos protocolos económicos de cripto a los que la gente suele referirse como cripto. Entonces sí, puedo presentarme. Mi nombre es Nader Dabit. Actualmente trabajo en el espacio cripto y en el espacio Web3 y en el espacio blockchain. Todas estas cosas se correlacionan entre sí y se superponen. Pero he estado en este espacio durante unos cinco meses y medio, creo que desde abril. Antes de esto, estaba trabajando en DevRel en AWS durante más de tres años, realmente tuve una gran carrera allí y todavía disfruto trabajando con muchas de esas tecnologías también. Y antes de eso, estaba haciendo formación para grandes empresas como Amazon y Microsoft, enseñándoles cómo construir aplicaciones móviles. Y antes de eso, era simplemente un desarrollador de software. Pero realmente me interesé en el espacio Web3 a finales 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 estaba comprando y vendiendo tokens y cosas así. Y no estaba realmente consciente del hecho de que la gente estaba 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é e interesé extremadamente en el espacio y decidí dejar mi cómodo trabajo en AWS y rechazar un montón de otros trabajos para trabajar en una startup que solo tenía un mes de antigüedad en ese momento. Y ha sido realmente divertido. Y en esta masterclass, espero que puedas aprender la pila básica para darte una visión de cómo algunas de estas cosas podrían ser interesantes. Y creo que una de las cosas más interesantes para mí que podrías ver en esta 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 trabajando con una API para un banco real, te das cuenta de lo complejo que es todo para hacer que todo esto funcione solo para habilitar pagos digitales. Y los pagos en sí son complejos, pero la infraestructura subyacente es órdenes de magnitud más complejas. Así que lo fácil que es programar pagos en un contrato inteligente para mí fue realmente, realmente interesante. Y fue una de las cosas que realmente me emocionó para imaginar todas las futuras posibilidades que la gente podría ser capaz de construir en estos tipos de programas.

3. Resumen de la Masterclass y Prerrequisitos

Short description:

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

Entonces, esta masterclass va a repasar un ejemplo realmente 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 tipos básicos de implementaciones de hola mundo y es posible que no uses estos contratos inteligentes reales en el mundo real, es una muy buena visión general o ejemplo de lo que podrías ser capaz de hacer.

Dicho esto, vamos a empezar y vamos a hacer una pausa a la hora y media. Tenemos tres horas. Podríamos pasar las tres horas completas. Podríamos terminar un poco antes. No estoy seguro. Pero a la hora y media, que para mí será a las 1230 p.m. hora central, vamos a hacer una pausa de 10 o 15 minutos para que la gente pueda comer algo o beber o usar el baño o algo así.

Antes de empezar, los dos prerrequisitos para esta masterclass son que tienes Node.js instalado en tu máquina. Y recomiendo encarecidamente usar NVM, Node Version Manager, o FNM, que es un gestor de versiones de Node escrito en Rust. Y supongo que si te presentas a esto, probablemente ya lo tienes instalado. Pero si no lo tienes, te recomendaría que lo revises. No cuesta mucho instalar Node usando NVM. Y uso estos gestores de versiones de Node porque muchos entornos diferentes requieren diferentes versiones de Node.js y simplemente facilita mucho el cambio. La otra cosa que es un prerrequisito es Metamask. Pero en realidad vamos a instalar Metamask desde cero. Y Metamask es una cartera de Ethereum y es una cartera de cripto. Pero también es cómo te autenticas en las aplicaciones de 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 alternativa de blockchain con costos de transacción más bajos. Además, presentaremos Metamask, que permite la interacción con varias blockchains de la máquina virtual Ethereum.

Y como pueden ver aquí, también tengo un par de otras carteras instaladas en mi navegador. Y normalmente anclo todas las diferentes carteras aquí a mis pines de extensión. Y aquí tengo Rweave, que es un protocolo Web3 para almacenar imágenes. Lo siento, para almacenar data para siempre. Entonces, en lugar de subir un texto o una imagen a S3 donde tienes que pagar una tarifa mensual, y si no pagas eso, tal vez ya no tienes acceso a ello. Rweave es interesante para mí porque pagas una tarifa única usando Rweave para almacenar básicamente un pedazo de texto y se queda allí literalmente para siempre. Así que una de las cosas que estoy construyendo ahora mismo y que voy a abrir a la fuente pronto es una plataforma de blogs que utiliza Rweave para almacenar publicaciones de blogs. Y cuesta alrededor de tres o cuatro centavos almacenar un gran pedazo de texto 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. Correcto. Así que estoy construyendo algo así. Así que verás que cuando empieces a añadir diferentes protocolos y a trabajar con diferentes proyectos, tendrás múltiples carteras. Y esta es una cartera fantasma y el fantasma 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 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 estás viendo ahora mismo es con Ethereum es que los costos de transacción están empezando a subir. Hay algunas cosas diferentes que van a estar sucediendo en Ethereum en los próximos meses para fusionar actualizaciones para hacerlo más escalable y menos costoso. También hay capas dos encima de Ethereum que son que puedes escribir básicamente el mismo code y ejecutarlo por mucho menos costoso. 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 estar usando es Metamask y Metamask te permite interactuar con cualquier blockchain de la máquina virtual Ethereum. Así que Ethereum es como la EVM original, la máquina virtual Ethereum. Pero ahora hay docenas de otras blockchains que usan la EVM. Y simplemente tener Metamask te permite interactuar con cualquiera de ellas básicamente simplemente cambiando la red. Y veremos eso en un segundo. Así que dicho esto, ¿alguien tiene alguna pregunta importante antes de empezar? Y si lo hacen, puedo responder a esas, si no, continuaremos. Voy a abrir el chat rápidamente.

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

Short description:

Para empezar, instalaremos una nueva cartera Metamask y crearemos una nueva cartera con una frase de recuperación. Es importante mantener la frase de recuperación segura 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 con las que interactuar.

OK, genial. Entonces, si todos quieren seguir, el enlace a la code base y el readme y el material de la masterclass está tanto en el chat de Discord como en el de Zoom. Así que lo primero que voy a hacer en lugar de empezar a construir la aplicación, quiero instalar primero Metamask. Normalmente ya tengo Metamask instalado, pero lo eliminé antes de esto porque quiero instalar un nuevo Metamask para mostrarles cómo hacer esto. Y si aún no lo han hecho, Metamask me dará básicamente esta frase secreta que si alguien más la tiene, podrá tomar básicamente cualquier dinero que yo pueda poner en esta cartera. Así que esta será para mí una cartera completamente efímera. Como voy a eliminarla cuando termine y voy a mostrarles mi frase de paso, pero nunca deberían hacer eso. Pero para esta masterclass, lo voy a hacer. Pero esto es sólo para darles una idea de cómo funciona. Así que voy a seguir adelante y. Voy a buscar algo como, ya sabes, extensión de cartera Metamask o algo así, y lo primero que debería aparecer es esto aquí. Y lo que puedo hacer ahora es simplemente hacer clic en descargar y esto lo añadirá a Chrome. Y esto me guiará sobre cómo hacer esto. Bien, así que voy a seguir adelante y empezaré y voy a crear una nueva cartera aquí. Y voy a configurar una contraseña. Y ahora voy a hacer clic en siguiente y ahora deberíamos recibir nuestra frase de paso. Ahora, esta es la frase de recuperación que puedes usar para acceder básicamente a tu cartera en cualquier momento en el futuro para siempre. La forma en que estas carteras funcionan es que básicamente tienes algo llamado clave pública de encriptación donde se te da una frase semilla y la frase semilla puede básicamente entonces generar una clave privada. La clave privada puede entonces generar una clave pública y la clave pública genera una dirección. Así que simplemente teniendo esta frase de recuperación, puedes básicamente revivir y recuperar tu cartera en cualquier momento en el futuro para siempre. Así que básicamente lo que recomiendo a la gente es, en primer lugar, nunca revelar tu frase a nadie y especialmente si tienes dinero en ella. Y en segundo lugar, guárdala en un lugar extremadamente seguro. Así que lo que yo, ya sabes, y mucha otra gente hace es que la escribimos y la colocamos en algún lugar o quizás guardamos un par de copias, tal vez la ponemos en una caja de seguridad o algo así. Pero básicamente, dependiendo de cuánto dinero tengas ahí, supongo. Pero lo que voy a hacer es simplemente copiar esto. Y por supuesto, cuando termine, simplemente voy a eliminar esta cartera. Así que voy a hacer clic en siguiente y ahora tengo que confirmar. Así que simplemente voy a pegarlo aquí y así puedo verlo. Así que voy a simplemente, ya sabes, flame. Bien, y después de confirmar esto, deberíamos tener nuestra cartera configurada. Así que lo que voy a hacer ahora es que voy a ir a mis extensiones aquí. Y voy a poner MetaMask, así que ahora debería tener una extensión MetaMask aquí, y esta es la forma en que quiero tener acceso a ella en adelante. Y verás que tengo cero ETH en mi cartera y ahora deberíamos estar listos para ir. Y otra cosa que notarás es que tenemos este menú desplegable aquí y este menú desplegable te permite elegir con qué red quieres estar. Así que ahora estamos en Ethereum mainnet, que es la red Ethereum. Pero también podemos añadir otras redes. Así que digamos que queríamos usar una capa dos de Ethereum como Arbitrum o Optimism. Podemos básicamente añadir 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 son compatibles con la máquina virtual de Ethereum o EVM como Avalanche o Celo o un puñado de otras. Así que simplemente teniendo esta cartera, puedes interactuar con todas estas diferentes redes.

6. Construyendo la Aplicación e Instalando Dependencias

Short description:

Usaremos Ethers JS y construiremos dos tipos de contratos inteligentes: un contrato de saludo y un contrato de token para acuñar y transferir tokens de criptomonedas. Para comenzar, crea una nueva aplicación React usando NPX e instala las dependencias necesarias, incluyendo Ether y Hard Hat. La Cartera MetaMask es específica del navegador y se puede usar con Chrome, Edge, Brave y Binance Smart Chain. Un contrato es el programa de back-end de una aplicación de blockchain, también conocido como un contrato inteligente.

Muy bien, ahora que tenemos instalada nuestra cartera Ethereum, podemos comenzar a desarrollar nuestra aplicación. Algunas de estas cosas simplemente te dan una introducción sobre algunas de las cosas con las que vamos a trabajar. React, vamos a trabajar con Metamask, ya mencioné que vamos a trabajar con una biblioteca de cliente web para interactuar básicamente 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 estos días para interactuar con la red. En GraphQL, podrías usar algo como Apollo o Urkel. Pero en Ethereum, podrías en su lugar usar una de las bibliotecas de cliente nativas de Ethereum. Así que vamos a usar Ethers JS. También está Web3 JS. Y esos son los dos principales con los 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 te da el entorno de desarrollo de Hard Hat con el que vamos a trabajar. Así que cuando creamos un nuevo proyecto Ethereum, automáticamente creará un nuevo contrato de ejemplo. Simplemente vamos a empezar con ese y a usarlo. Y luego, vamos a crear un contrato de token para acuñar nuestros propios tokens de criptomonedas. Y luego vamos a transferir esos tokens entre diferentes usuarios. Y luego creo que eso es realmente interesante porque te muestra cómo transferir básicamente estos tokens dentro del contrato inteligente.

Muy bien, para empezar, básicamente queremos empezar creando una aplicación React. Así que si eres un desarrollador de front end o full stack, probablemente ya has hecho esto un millón de veces, ya sea con React o Vue o lo que sea. Pero vamos a empezar usando NPX para crear una nueva aplicación React. Así que copiaré este comando aquí. Y saltaré a 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. Así que después de haber creado nuestra aplicación. Podemos seguir adelante y simplemente cambiar a ese nuevo directorio. Y luego, queremos instalar nuestras dependencias, así que puedes usar NPM o Yarn y puedes copiar esto a tu portapapeles si quieres. Y esto pasa por todas las diferentes dependencias que queremos instalar. Así que voy a copiar eso a mi portapapeles. Lo pegaré aquí. Algunas de las diferentes dependencias aquí podrías haberlas usado antes, en realidad, solo tal vez esta es Chai, que es una biblioteca de testing. Pero todo lo demás va a ser específico de Ethereum o blockchain. Así que es posible que no lo hayas usado antes. Ether es de nuevo la biblioteca de cliente para interactuar con la red Ethereum o cualquier otra red EVM. Y luego tenemos Hard Hat y Hard Hat es interesante porque es como todo el entorno de desarrollo que vas a necesitar para cualquier proyecto EVM o Ethereum. Esto te proporciona muchas cosas realmente geniales, como un nodo Ethereum local al que puedes desplegar y ejecutar programas. También proporciona un entorno de testing y muchas otras cosas. Así que esas dos cosas son las principales. Y luego estas son subdependencias de algunas de esas cosas que vamos a necesitar. Así que Hard Hat Waffle es básicamente para cosas de testing local. Y Hard Hat Ethers es básicamente una biblioteca Ethers que funciona bien con Hard Hat. Y todo esto no solo está en este tutorial, sino que probablemente lo verás en mucha otra documentation también. Así que voy a instalar eso. Y cualquiera que acabe de entrar ahora, acabamos de empezar, así que todo lo que tienes que hacer es ejecutar NPX create React app y verás esas instrucciones en el GitHub read me. No necesitas clonar el proyecto a menos que quieras. Pero, ya sabes, esencialmente estamos usando ese read me como referencia para construir este proyecto nosotros mismos desde cero. Y probablemente debería haber usado Yarn porque NPM es tan lento estos días. O tal vez necesito actualizar mi versión de NPM. ¿Qué versión de nodo? Probablemente usaría al menos 10.X, pero probablemente usaría la última que está ahí. Así que voy a ir al lanzamiento de Node.js. Así que, sí, parece que la última es como 14.18. No estoy seguro si estoy incluso en esa versión, pero sí, cualquier cosa como 12.X o 10.X debería estar bien. Sí, definitivamente recomendaría usar Yarn en lugar de NPM. Esto es tan lento. No he usado NPM en un tiempo. De nuevo, tal vez estoy en una versión más antigua. ¿Es la Cartera MetaMask específica del navegador? ¿O se puede usar con otros proveedores? Básicamente, sé que hay una extensión 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 tiene su propia cartera también que puedes instalar. Así que 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 la gente recomienda 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 el programa de back-end de una aplicación de blockchain.

7. Configurando el Entorno Hard Hat

Short description:

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

Es el contrato inteligente. Podrías pensar en él como una especie de servidor. Este tiene tu lógica de negocio para interactuar con el programa en sí. Así que tomó mucho tiempo instalar. Nunca volveré a usar NPM. Definitivamente estoy mimado por yarn.

OK, ahora que hemos instalado nuestras dependencias, sigamos adelante. Así que ahora que hemos configurado nuestro proyecto, podemos crear y configurar nuestro entorno Hard Hat que de nuevo 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. Así que si ejecuto NPX hard hat, esto debería ir adelante y crear un proyecto Hard Hat. Y tenemos un par de opciones diferentes. Vamos a usar el proyecto de muestra básico. Y luego, una vez que esto esté hecho, voy a repasar lo que realmente sucedió aquí. Así que haremos clic en crear proyecto de muestra básico. Elegiremos la ruta del proyecto. Añadiremos nuestro get ignore. Y ahora tenemos un entorno de desarrollo local creado para nosotros. Eso fue bastante fácil. Pero, ¿qué sucedió realmente allí? Así que vamos a echar un vistazo a los cambios que se hicieron. Así que si abrimos nuestra base de code y nuestro editor de texto. Podemos echar un vistazo, así que voy a abrir el proyecto en mi editor de texto.

OK, nuestra aplicación React ya nos dio como nodos modules, public y SRC. Básicamente, lo que Hard Hat nos dio fue, en primer lugar, este Hard Hat dot config dot JS. Así que 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 desplegar básicamente nuestro contrato inteligente en la blockchain. Y vamos a ver ambas cosas en un momento, pero por ahora, estamos revisando lo que se añadió 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 database? Sí, mucha gente la referencia como una database. Algunas personas la llaman un ordenador porque tiene una forma de hacer cálculos y hace cálculos. Así que puedes ejecutar mucha de la misma lógica que escribirías en una aplicación de JavaScript y un contrato inteligente. También puedes usarlo simplemente como una database para almacenar y recuperar data. Así que, sí, es esencialmente una database. Y también puedes pensar en ella como un ordenador que está distribuido a través de decenas de miles de nodos diferentes que se ejecutan en una red descentralizada. Y escucharás la palabra descentralizada mucho en Web3 porque esencialmente todos los diferentes protocolos como Ethereum son descentralizados. OK, genial. Así que lo único en lo que queremos centrarnos, sin embargo, es nuestra configuración de Hard Hat. Y esto básicamente es nuestra configuración del entorno de desarrollo local. Y realmente no necesitamos ninguno de este code aquí. Así que voy a borrar todo eso. Así que todo lo que realmente necesitamos para hacer que esto funcione es este módulo que exporta donde definimos la versión de solidity que queremos. Y vamos a empezar por ahí y luego vamos a modificar esto un poco. Lo único que queremos tener en cuenta. Y déjame volver aquí es el hecho de que estamos en una aplicación React y en una aplicación React, vamos a trabajar fuera de este directorio SRC. Y si intentamos importar algo que está fuera de este directorio SRC desde el interior, obtenemos un error en react. La razón por la que menciono eso es que necesitamos tener acceso a algunos artefactos que vamos a crear a partir de nuestro contrato inteligente que necesitarán interactuar con nuestro programa. Y queremos que esos artefactos estén ubicados en el directorio SRC. Así que necesitamos configurar eso. Así que básicamente, quiero seguir adelante y actualizar el. Módulo de exportaciones con un par de cosas. En primer lugar, vamos a establecer la ruta aquí. Para nuestros artefactos, y hablaré de lo que son estos artefactos en un momento, pero si miramos nuestra masterclass, verás que esta va a ser nuestra configuración final, así que estás bienvenido a simplemente copiar y pegar eso en la configuración de Hard Hat. Pero básicamente primero queremos establecer este directorio de artefactos y los artefactos van a ser nosotros compilando nuestro contrato inteligente aquí. En code legible por máquina para nuestra aplicación de JavaScript, cuando piensas en algo como graph QL, si podrías haber usado eso terminas creando definiciones de consultas y mutaciones de graph QL que son texto. Casi como objetos tipo JSON que definen la operación que se envía a través de la red. Así que para una consulta de graph QL, podrías decir quiero consultar posts y quiero devolver el ID y el título o algo así. Con Ethereum con nuestro contrato inteligente, tenemos algo muy similar a eso. Y se llama B eyes y B eyes son abreviaturas de interfaz binaria de aplicación. Y lo genial de Hard Hat es que podemos simplemente pasar nuestro contrato inteligente y creará y compilará estas cosas para nosotros y luego podemos importarlas en nuestra aplicación de front end React. Y queremos definir el directorio donde estos artefactos van a vivir así que básicamente estamos haciendo eso aquí estamos básicamente diciendo ok. Cuando compilamos nuestro contrato inteligente, queremos que esos artefactos vayan en el directorio SRC de esa manera podemos importar esos desde app.js o donde sea sin tener un hilo de error. Y luego, luego, luego lo último que queremos actualizar es que queremos definir alguna configuración alrededor de la ID de la cadena de red. Ahora esto es muy específico para la forma en que Hard Hat lo siento, la forma en que metamask configura localhost por defecto, por defecto, básicamente necesitas definir una 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 seguir adelante y cambiar a eso.

8. Configuración de Hard Hat y Resumen 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 la 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 greet y set greeting. La función greet devuelve una cadena, mientras que la función set greeting actualiza el estado del saludo. Mencionamos brevemente otras palabras clave y concluimos comprendiendo la funcionalidad del contrato.

Y probablemente en realidad no va a funcionar porque aún no he iniciado esa red. Pero digamos que sí cambiamos esa red. Sabrías si miramos en la configuración advanced que la ID de la cadena está configurada en 1337, por lo tanto, solo nos estamos asegurando de que esta ID de la cadena coincida con lo que Metamask tiene configurado para localhost. Y eso es más o menos por qué estamos haciendo eso. Y si miras la documentation de Hard Hat, probablemente haya un poco más de explicación allí. Pero es más bien una configuración que solo quieres hacer y no preocuparte por qué la estamos haciendo ahora mismo.

Muy bien, genial. Así que tenemos nuestra configuración de Hard Hat. A continuación, vamos a echar un vistazo al contrato inteligente con el que vamos a trabajar. Y el contrato inteligente está en contratos / greeter.sol. Y.sol significa solidity. Y ese es el lenguaje de programación que estamos escribiendo aquí. Entonces, un par de cosas que están sucediendo aquí. En primer lugar, en cualquier programa de solidity, tienes que definir una licencia o de lo contrario obtendrás un error cuando intentes desplegar esto. Así que solo tienes una licencia comentada, lo que quieras que sea. Así que 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 escribiendo. Entonces, en nuestra configuración de Hard Hat, ves que tenemos 0.8.4. Y luego aquí, básicamente solo estamos diciendo 0.8.0 o superior. Así que esto debería funcionar. Ya sabes, con nuestra configuración de Hard Hat. Lo siguiente que notamos es que tenemos esta importación hard hat / 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 como, ya sabes, bastante sencillo, y todo el mundo lo entiende y lo usa. Entonces, Hard Hat creó esto, diría que tal vez como una utilidad de ayuda que puedes usar para también 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 facilita mucho el registro de información. Así que eso es más o menos lo que estamos importando allí. Entonces, alguien dijo que NPX hard hat solo imprime 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, eso podría no aparecer. ¿Puedes mirar y ver si tienes la carpeta de contratos y las otras carpetas ya allí? Tal vez sí funcionó. Vale, genial. Vale, genial. Muy bien. Así que echemos un vistazo al contrato. Así que esto es como, unas 15 líneas de code o algo así. Y este es básicamente todo el programa. Y hay como dos funciones principales. Una es greet, y la otra es set greeting. Echaremos un vistazo a esas en un momento. Y luego básicamente tenemos nuestra configuración aquí, la inicialización, podrías decir. Entonces, cuando se despliega este contrato, primero establecemos una variable llamada greeting. Y simplemente la creamos, en realidad, no establecemos realmente un valor en ella. 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 de front end, tendrías que configurarlo en público. Pero en nuestro caso, vamos a tener una función que básicamente devuelve eso y luego esa función es pública y por lo tanto podemos leerla de esa manera. Luego tenemos un constructor porque por defecto, no hemos establecido este saludo para ser algo. Y en nuestro constructor, podemos pasar un argumento que establece ese saludo. Así que eso es más o menos lo que está sucediendo cuando desplegamos este contrato, tenemos que pasar algún texto en el argumento para seguir adelante y establecer el saludo en lo que se pasa aquí como argumento. Así que esto básicamente se va a invocar cuando desplegamos el contrato estableciendo esta variable inicial. Y luego, después de que se ha desplegado, y interactuamos con él, 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 de front end. Y luego tenemos view. View básicamente significa que solo está devolviendo algunos data desde dentro del contrato, y no estamos haciendo ningún cambio de estado. Con la extensión VS Code, probablemente solo recomendaría esto. Creo que hay un resaltador de sintaxis de solidity. Ese es probablemente el principal que descargaría para escribir code de solidity. Sí. Entonces sí, la función greet es bastante básica, solo devuelve la cadena. Y luego tenemos la función set greeting. Y esto en realidad va a ser, ya sabes, muy simple, pero esto en realidad está actualizando el estado, lo que significa que básicamente vamos a estar tomando un argumento llamado saludo. Y simplemente vamos a actualizar el saludo para ser lo que pasamos. Así que esto es muy, muy, creo, sencillo. Ya sabes, estamos estableciendo el saludo cuando desplegamos el contrato, tenemos una función para leer el saludo. Y tenemos una función que puede actualizar el saludo. Alguien preguntó, además de view hay, sí, hay algunas otras. Pure. Yo iría a los docs de solidity y simplemente buscaría, o tal vez buscaría, diría, los diferentes tipos de palabras clave. Sí, probablemente obtendrás una buena visión general de ellos allí.

9. Desplegando el Contrato en una Red Local

Short description:

Desplegamos el contrato con un valor inicial, leemos el valor y actualizamos el valor. Interactuar con una cadena de bloques es diferente de una base de datos típica ya que las operaciones en la cadena deben ser pagadas en el momento de la operación. Las transacciones pueden variar en costo, y diferentes protocolos de cadena de bloques ofrecen ventajas de escalabilidad y costo. Desplegamos 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 cartera Metamask y tener 10,000 ETH para probar nuestro programa. Desplegamos nuestro programa en la red de prueba utilizando un script que obtiene una referencia al contrato, lo despliega 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 desplegamos con un valor inicial, podemos leer el valor y luego podemos actualizar el valor. Entonces, cuando piensas en CRUD, crear, leer, actualizar, eliminar, realmente no puedes eliminar en blockchain, porque cada interacción se guarda para siempre. Pero podemos actualizar y podemos crear y podemos leer. Bien, ahora que entendemos lo que está pasando allí, vamos a cerrar esto. Y volveremos a nuestro tutorial aquí. Y podemos continuar.

Entonces, 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, podemos usar hard hat de nuevo. Y todo lo que necesitamos hacer es ejecutar NPX hard hat compile. Este comando va a mirar en nuestra configuración de hard hat y buscar la carpeta real donde queremos crear estos artefactos. Y establecimos esa carpeta de artefactos para ser SRC / artefactos. Así que 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 mira dentro de mi directorio de origen, ahora debería ver esta nueva carpeta llamada artefactos. Y de hecho, vemos eso allí. Y, y los contratos, vamos a ver básicamente, estos dos archivos, realmente no necesitamos jugar con ellos ni nada. Pero estos son los ABI's. En realidad, este es el ABI. Es básicamente algo de JSON que describe lo que está pasando. Y básicamente podemos importar eso, nunca realmente necesitamos abrir eso y mirarlo, solo quiero mostrarte lo que está allí. Entonces, ahora que hemos compilado nuestro contrato, ahora podemos considerar empezar a interactuar con él. Así que necesitamos pensar en las interacciones con una blockchain de manera muy diferente a como podrías pensar en las interacciones con una database típica. Porque cuando escribes data en una database, normalmente vas a estar usando algún tipo de aplicación que se aloja en AWS, o algo así. Ya sabes, cualquier base súper y la persona que desplegó ese programa está pagando por ese servicio de alojamiento. Creo que la principal diferencia fundamental es que, en su mayor parte, cuando estás ejecutando, o estás interactuando con una red de blockchain, las operaciones que ocurren en la cadena tienen que ser pagadas en el momento de que esa operación ocurra. Ahora, a veces ves esto implementado en el servidor en algún lugar donde básicamente tienen una clave privada, y puedes llamar básicamente a un back end, y lo están haciendo de esa manera. Pero la mayoría de las veces, 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 estamos interactuando con Solana, o are we've, o vas a estar trabajando con algo como aetherium, donde es bastante caro ahora mismo. Y creo que la razón por la que estás viendo un tipo limitado de aplicación que se está construyendo en aetherium es debido a lo limitado que estás ahora mismo, para esos tipos de pagos. Entonces, si vas a hacer algún tipo de cosas de finanzas descentralizadas, donde estás transaccionando, ya sabes, cientos de dólares, podría tener sentido pagar unos pocos dólares por una transacción. Pero digamos que solo quieres hacer algo realmente básico. Cualquier cosa por encima de un par de dólares no tiene mucho sentido. Así que creo que es por eso que estás viendo, ya sabes, todo tipo de nuevos protocolos de blockchain que son más escalables, y quizás menos costosos y cosas así para diferentes otros tipos de casos de uso. Y también, necesitas entender tal vez 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 podrías usar algún otro tipo de almacenamiento descentralizado que sea gratis para otros tipos de cosas. Así que eso es solo fundamental, como cosas en las que pensar mientras estamos haciendo esto. Pero básicamente, lo que queremos hacer ahora es desplegar nuestro contrato en una red local. Así que podemos desplegar en la red principal de aetherium, o también podemos desplegar en una de estas redes de prueba que están ahí. Pero para hacer eso, necesitamos encontrar aetherium de prueba, ya sabes, prueba aetherium y enviarlo a nuestra cartera. Y es un poco, ya sabes, un montón de pasos, aunque la mayoría de las veces, ya sabes, la mejor manera es desplegarlo en una red local. Y la mejor manera diría para las pruebas locales y el desarrollo 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 nuevas ventanas, porque vamos a necesitar ejecutar varias ventanas. Y solo voy a borrar esto. Y lo primero que quiero hacer es crear una red local, ejecutar un nodo local de aetherium. Y puedo hacer eso ejecutando NPX hard hat node. Y esto irá y comenzará una red de prueba local, un nodo local de aetherium, y me dará 19 cuentas de prueba. Y cada una de estas cuentas puedo importarlas en mi cartera metamask. Y estoy comenzando con 10,000, en el 10,000 ETH, lo que significa que tengo algo de dinero para probar mi programa. Porque cuando escribo una transacción, voy a necesitar pagar algo de ETH para escribir en la red de bloques. Y ahora tengo 10,000 ETH repartidos o multiplicados por 20 en 20 cuentas diferentes que puedo usar. Bien, entonces lo que vamos a hacer a continuación es volver a nuestro tutorial. Y vamos a desplegar nuestro programa en esa red de prueba. Entonces, para hacer eso, tenemos un script ubicado en scripts / sample script.js. Así que vamos a echar un vistazo a eso. Y voy a eliminar todos los comentarios y cosas para hacer esto un poco más fácil de leer. Bien, entonces no pasa mucho aquí. Realmente solo hay cuatro líneas de code, o realmente tres líneas de code que necesitamos para desplegar esto. En primer lugar, estamos obteniendo una referencia al contrato diciendo ethers dot get contract factory y pegando la cadena para el nombre del contrato. Ahora podemos hacer esto porque en nuestra configuración de hard hat, básicamente estamos estableciendo la ruta para los artefactos. Y luego esto va a mirar en esa ruta y va a encontrar el artefacto para el greeter. Y esto es esencialmente obtener el ABI y hacerlo disponible aquí en esta línea de code. 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. Así que podría decir react. Londres o algo así. Y este será el valor inicial de nuestro programa.

10. Despliegue y Configuración de MetaMask

Short description:

Para desplegar, ejecute NPX hard hat run scripts/deployed.js con la red configurada en localizada. El proceso de despliegue registrará información sobre la transacción, el despliegue, la dirección del contrato y el uso de gas. Después del despliegue exitoso, configure MetaMask con una cuenta que tenga Ethereum importando una cuenta utilizando la clave privada proporcionada por el nodo Ethereum. Una vez configurada, la cuenta tendrá un saldo ETH no nulo. La cuenta cero se utiliza para el despliegue y deduce Ethereum del saldo, mientras que las otras cuentas tienen los 10,000 ETH completos.

Y luego básicamente aquí, lo que vamos a hacer es esperar a que el despliegue sea exitoso. Así que vamos a decir un creador de peso desplegado. Y una vez que esto se haya desplegado con éxito, vamos a registrar la dirección de nuestro despliegue de contrato. Y necesitamos esta dirección para hablar con nuestro programa. Cuando piensas en una aplicación web típica, cuando despliegas un proyecto o despliegas una API, te dan un punto final de API. Y normalmente es algo como HTTP colon, ya sabes, mi proyecto punto com barra API. Y en el mundo de la blockchain, en lugar de usar un punto final de API, usas una combinación de dos cosas. Usas una dirección RPC, que es una forma de hablar con la red Ethereum. Así que para la red principal de Ethereum, sería algo como lo que sea. Hay un puñado de ellos que puedes usar. Hay puntos finales de RPC públicos. Y también hay puntos finales de RPC privados que la gente está ejecutando su propio nodo Ethereum o la gente está ejecutando nodos 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 saltar a personalizado. Lo siento, saltar a local como 8545. Así que nuestro nodo Ethereum o punto final de RPC es local como 8545. Ya tenemos eso configurado. Así que las dos cosas que necesitamos son el punto final de RPC y luego la dirección de despliegue del contrato. Así que la forma en que obtenemos eso es simplemente registrándolo aquí. También puedes hacer un script Node.js o algo aquí donde lo estás escribiendo en un archivo en algún lugar. Y luego puedes leerlo y tener eso más automatizado. Así que podrías usar algo como el servicio de archivos y escribir para escribir algo de JSON o JavaScript y hacerlo disponible. Pero básicamente vamos a copiarlo y pegarlo desde aquí. De acuerdo. Sí, desplegar y desplegado son métodos incorporados. Así que lo que queremos hacer ahora es también renombrar el script de muestra a desplegado porque tiene mucho más sentido. Y ahora podemos decir, OK, queremos desplegar ejecutando este script, y eso es lo que realmente está sucediendo. Así que tiene mucho más sentido. De acuerdo. Así que estas dos líneas de code realmente son las cosas principales que están sucediendo. Y luego vamos a esperar a que eso, esperar a que ese despliegue y luego registrar la dirección del contrato. Bueno, vamos a probar esto. Así que para desplegar, podemos ejecutar NPX hard hat run scripts barra desplegado JS y podemos configurar la red para que sea localizada. Y lo que debería suceder es que deberías ver esto registrando algunas cosas. ¿Qué? Así que NPX hard hat run scripts barra desplegado JS y vamos a configurar la red para que sea localizada. Y si eso se despliega con éxito, deberías ver algo como esto desplegando un saludo con saludo. Hola, React Londres. Y tenemos mucha información sobre la transacción, el despliegue, la dirección del contrato, la transacción, de quién es, la cantidad de gas usado y así sucesivamente. Así que si eso se despliega con éxito, también deberíamos tener esto registrado en la consola de saludo desplegado a. Y entonces esta es nuestra dirección de contrato. Así que esta es la dirección en la red. Esto es como un desplegado a la teoría principal y que seríamos capaces de ir a ver esto, pero está empleado para localizar. Pero todavía vamos a necesitar esta dirección en un momento. Genial, así que estamos llegando. Así que ahora que hemos desplegado eso, podemos empezar a interactuar con el programa desde nuestro front end. Pero para hacer eso, primero queremos asegurarnos de que configuramos MetaMask con una cuenta. Que tiene algo de Ethereum. Porque ahora mismo, todas nuestras cuentas no tienen ningún Ethereum. Solo tenemos una cuenta. Así que, por supuesto, puedes añadir otras cuentas simplemente haciendo clic en crear cuenta, pero ninguna de estas va a tener ningún Ethereum tampoco. Lo que necesitamos hacer es, ya sabes, una vez que has configurado tu red para ser el anfitrión local, queremos importar una de las cuentas que fue creada por el nodo Ethereum. Y podemos hacer eso simplemente referenciando esta clave privada. Así que tenemos como 20 cuentas diferentes. Cada cuenta tiene una clave privada y una ID de cuenta o una dirección de cuenta. Así que lo que queremos hacer es copiar esta clave privada a nuestro portapapeles. Así que voy a ir y resaltarla, copiarla, volver al navegador. Y aquí puedes ver a dónde vamos a continuación con esto. Queremos ir a importar cuenta. Así que puedo ir y abrir Ethereum. Lo siento, MetaMask. Y voy a hacer clic en importar cuenta. Y voy a pegar la clave privada. Y hago clic en importar. Y ahora en nuestra cartera, deberíamos ver que tenemos no 99 99 punto algo ETH. La razón por la que tenemos eso en lugar de 10,000 es porque si estás usando la cuenta cero, que es lo que estoy usando aquí, entonces cuando desplegamos el contrato en sí, usamos algo de nuestro Ethereum para pagar ese despliegue.

11. Interactuando con la Red 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 cartera Ethereum del usuario. También creamos dos funciones para obtener y escribir el saludo utilizando proveedores para interactuar con la red 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 en tu cuenta. Y realmente no importa. Puedes hacerlo de cualquier manera. Y alguien más que falló al conectarse a localhost. Si, si estás viendo eso, eso significa que tu nodo Ethereum podría no estar funcionando. Así que asegúrate de haber ejecutado NPX hard hat node. Y si eso está funcionando, entonces deberías poder conectarte. Y si no, entonces puedo revisar eso durante el próximo descanso.

Bueno, genial. Así que ahora que nos hemos conectado a localhost, y hemos importado una de nuestras cuentas, y vemos que tenemos algo de ETH, ahora básicamente podemos seguir adelante y ejecutar nuestro programa e interactuar con él. Así que lo que queremos hacer es seguir adelante y escribir nuestra aplicación react. Así que nuestro back end está funcionando, está desplegado, estamos listos para ir. Ahora queremos cambiar nuestro front end.

Bien, entonces voy a seguir adelante y empezar a copiar y pegar algo de este code y a explicarlo. Así que voy a abrir dot j s. Y aquí estamos importando use state. De react, que va a ser lo que estamos usando para lidiar con el estado local. Estamos importando la biblioteca ethers de ethers, que va a ser cómo interactuamos con la red. Y luego estamos importando este greeter ABI, que está aquí en artifacts slash contracts slash reader dot soul slash reader dot JSON. Así que de nuevo, eso es el ABI. A continuación, queremos seguir adelante y definir la dirección de nuestro contrato. Y eso fue registrado en el terminal hace un segundo. Así que debería poder ir a mi terminal y copiar eso a mi portapapeles aquí. pegarlo allí. Lo siguiente que queremos hacer es seguir adelante y definir la aplicación. Y esto va a ser nuestro componente principal. Vamos a seguir adelante y configurar nuestra aplicación. Y esto va a ser nuestro componente principal. Vamos a seguir adelante y configurar nuestro estado local. Y la única variable de estado con la que necesitamos lidiar ahora mismo va a ser el saludo y establecer el valor del saludo. De esta manera el usuario puede escribir lo que quiere que sea el saludo actualizado y luego podemos básicamente 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. Ahora esto es realmente completamente nuevo para la mayoría de la gente y para mí mismo cuando empecé a trabajar con Ethereum. Es interesante por un par de razones diferentes. En primer lugar, cuando alguien tiene una cartera como MetaMask o Phantom o Arweave instalada en su navegador, lo que básicamente sucede además de que tenemos acceso a esta cartera 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 podemos hacer ahora, ahora que lo tenemos instalado. Y ahora si intentaras ejecutar esto, esta función en un navegador que no lo tuviera, simplemente obtendrías un error. Así que lo que podrías hacer si quisieras hacer un manejo de errores, podrías decir si window.ethereum y luego podrías, ya sabes, hacer cosas. Pero estamos asumiendo que esto existe. Y vamos a llamar a theory of window.ethereum.request. Y queremos solicitar sus cuentas. Y esto va a permitir al usuario elegir la cuenta con la que le gustaría conectarse. Incluso puedes tener un valor de retorno de esto y registrarlo si quieres. Pero realmente no necesitamos ese valor ahora mismo. Todo lo que queremos hacer es simplemente conectarnos a esa cartera y esto será probablemente lo único que vamos a hacer. Todo lo que queremos hacer es simplemente conectarnos a esa cartera y esto les pedirá y les permitirá iniciar sesión con su cartera Ethereum. Y eso es muy, ya sabes, eso no es mucho code para hacer que eso suceda. Es bastante agradable. Queremos seguir adelante ahora y crear dos funciones, una función para obtener el saludo, y luego otra función para escribir el saludo. Y aquí puedes ver que estamos comprobando para asegurarnos de que window.ethereum existe. Y luego el resto del code está aquí. Y la forma en que interactuamos con el nodo Ethereum o la red en sí misma es usando estas cosas que se llaman proveedores. Y hay un par de diferentes tipos 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 necesitan ser firmadas para crear una transacción real para escribir data. Y eso es lo que vamos a hacer un firmante o una transacción de escritura set greeting. Pero para fetch greeting, sólo 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 en sí mismo llamando a ethers.contract, pasando tres argumentos. Pasamos la dirección del contrato, que es definimos esta variable antes. Pasamos el ABI, que es casi como la 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. Así que teníamos una función llamada fetch. Esto sería realmente cualquier función de lectura. Así que cualquier cosa que quisiéramos leer del contrato, ahora podemos usar este contrato para llamarlo. Así que podemos llamar a esas funciones directamente. Y lo que estamos haciendo aquí es que estamos llamando a contract.greet. Y estamos esperando que esos data 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 buscar y establecer el saludo. Se responde una pregunta del chat sobre la definición dinámica de la dirección del saludo. La actualización de la lógica del contrato requiere desplegar 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 buscando y actualizando el saludo. Se muestra el costo de la transacción.

Y luego simplemente lo registramos. Cosas realmente básicas. Estamos obteniendo acceso al contrato. Estamos leyendo los data del contrato y los estamos registrando.

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 code aquí donde llamamos a 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 va a solicitar al usuario básicamente poder firmar esta transacción. Y luego en lugar de pasar el proveedor, cuando creamos la referencia del contrato, estamos pasando el firmante. Así que tenemos este, solo este paso extra. 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í estamos pasando un argumento de saludo. Y este saludo es esta variable de estado que establecimos aquí. Así que estamos permitiendo al usuario básicamente actualizar el estado local escribiendo. Y lo último que tenemos es una interfaz de usuario realmente básica donde tenemos un formulario, donde tenemos dos botones. Uno para buscar el saludo y llamar a fetchGreeting. Y el otro para establecer el saludo. Y tenemos una entrada para permitir al usuario actualizar el saludo.

Voy a revisar el chat rápidamente. Sí, si quieres definir la dirección del saludo dinámicamente, puedes simplemente escribir una función en ese script de despliegue que escriba en el sistema de archivos local. Así que 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 escribas eso en un archivo local para hacerlo un poco más fácil. Es esencialmente una o dos líneas de code. Y luego, pero no está realmente incorporado. No creo que sea ni siquiera. Es un sombrero duro que yo sepa. Hay una extensión que puedes instalar. De hecho, eso lo hace, pero no, no está en el paquete principal. Así que voy a seguir adelante y 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. Vale. No está ahí. Sí, pero no, no está en el paquete principal. ¿Hay alguna manera de actualizar la lógica del contrato sin afectar los data ya almacenados? No, realmente no. Por eso Ethereum. Por eso el desarrollo de blockchain es tan complejo. Esa es una de las razones es que si quieres tener una actualización a la lógica del contrato, necesitas desplegar un nuevo contrato. Y luego también terminas teniendo un nuevo estado. Ahora, hay algunas formas interesantes de hacer cosas que eluden algunas de estas, supongo que podrías llamar restricciones. Una de esas es un contrato proxy, lo que significa que tienes tu contrato proxy que apuntará a otro contrato. Y luego puedes básicamente tener una función en tu proxy que te permita actualizar donde está ese, ese puntero. Así que esa es una forma de hacer eso. Hay, hay algunas otras cosas diferentes que puedes hacer, pero, pero por naturaleza, sí, esa es la idea. Realmente no puedes actualizar cosas. Pero mucha gente sí, sí usa contratos proxy.

OK, genial. Hemos terminado de escribir nuestra interfaz de usuario. Y, ya sabes, pasé por cada función individual para ir a través de, pero en realidad, ya sabes, la mayoría de la funcionalidad que ocurre allí, que es específica de Ethereum o blockchain es solo quizás cuatro o cinco líneas de code. Y vamos a empezar nuestra aplicación ejecutando npm start. Así que lo ejecutaré aquí abajo porque quiero asegurarme. He referenciado todas estas otras cosas que hemos estado haciendo. OK, genial. Así es como se ve nuestra aplicación. Es realmente, realmente básico. No, no hay un bonito design o algo así. Nos estamos enfocando en la funcionalidad en su mayoría aquí. Así que lo que quiero hacer es seguir adelante y simplemente 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. Entonces estamos, estamos, estamos interactuando con el contrato. Y luego queremos seguir adelante y actualizar esto. Así que puedo llamar a set greeting y esto me pedirá que conecte mi billetera y la billetera que quiero conectar es la 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 lo que sea ceros seis tres. Así que si hago clic en confirmar, entonces veo que hemos actualizado el saludo. Y si actualizo. 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 esto registrado en tu nodo de Ethereum que se ha hecho una llamada al contrato, ya sea operaciones de lectura o escritura, todas se registran 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, habilitando 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 carteras de los navegadores. Por último, tocamos el papel del contrato como un servidor que responde a las llamadas de la API y destacamos la función de transferencia como un caso de uso interesante. Mencionamos a Axie Infinity como un ejemplo de un videojuego basado en blockchain que permite a los jugadores ganar y comerciar tokens, mostrando el potencial para la integración de cripto en la industria del juego.

Muy bien, así que no parece que haya ninguna pregunta allí. Déjame revisar el otro chat aquí. Vale, bien. Sí, no hay muchas preguntas ahora. Entonces, ¿alguien tiene alguna pregunta allí antes de que pasemos a la siguiente parte de esta masterclass?

Vale, bien. Así que voy a cerrar esto. Y voy a cerrar esto. Y voy a cerrar esto. Entonces, ¿alguien tiene alguna pregunta allí antes de que pasemos a la siguiente parte de esta masterclass? ¿Alguien tiene algún problema? Vale. Un par de personas están escribiendo, así que voy a esperar a que lleguen esas preguntas. Genial, parece que funciona bien para un par de personas. Así que, para confirmar, somos capaces de escribir esta transacción en el contrato desplegado. Eso es correcto. Sí. Así que estamos escribiendo esto, estamos haciendo cambios de estado en la blockchain cada vez que escribimos una transacción. Ahora, probablemente no tendrías este tipo de aplicación para la red principal de Ethereum. A menudo ves, sabes, transacciones de alto valor en la red principal de Ethereum debido a lo caro que es hacer una transacción. Tienes DeFi, tienes cosas financieras. Tienes arte, sabes, gente vendiendo cosas que valen cientos de dólares. Lo que sí tienes, sin embargo, son las capas dos de Ethereum en las que puedes usar todas las habilidades que estamos aprendiendo para escribir. Y esos costos de transacción son fracciones de un centavo. Y eso básicamente reduce la barrera de entrada a otros casos de uso. Entonces, podrías decir, OK, sólo un cierto tipo de aplicación vale la pena pagar un par de dólares por una transacción, transacciones de alto valor. ¿Y si sólo quisiera 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, los DAOs y cosas así también tienen mucho sentido. Así que 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, puedes configurar estos trabajos Cron o estos disparadores que se invocan cada hora o cada cierto punto en el tiempo cada día. Esto no está incorporado en la máquina virtual de Ethereum. No puedes simplemente decir quiero invocar esta función cada X número de minutos. Pero lo que puedes hacer, sin embargo, es simplemente activar una función Lambda o algo así en AWS. Y puedes llamar al contrato desde allí cada X, sabes, cada cierto tiempo y hacerlo de esa manera. Así que la gente sí 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á ahí window.ethereum? Esa es una buena pregunta. Así que si alguien tiene una cartera de navegador como Metamask instalada, entonces window.ethereum estará disponible allí. Así que digamos que no tienes Metamask, sino quizás una cartera diferente. Siempre y cuando sea una cartera de Ethereum, entonces window.ethereum estará allí. Y si tienes una cartera de Solana como Phantom, tendrás window.Solana allí. Y también puedes llamar a funciones como window.Solana.isPhantom te dirá si la cartera Phantom es el tipo de cartera. Así que todo tipo de cosas así 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 las llamadas de la API. Es exactamente así como podrías pensarlo.

Muy bien, genial. Así que el próximo caso de uso que vamos a ver, y. Así que el punto de este contrato es más bien una introducción a cómo podrías interactuar con la red. En lugar de un caso de uso real del mundo real, incluso este ejemplo de acuñar tokens probablemente no sea el caso de uso más real del mundo. Creo que lo interesante que vamos a ver, sin embargo, es esta función de transferencia. Y esta función de transferencia te da un verdadero. Ejemplo de cómo puedes transferir valor entre partes en sólo 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 las Dapps de Ethereum, ¿qué aplicaciones se están construyendo en Ethereum? Un buen ejemplo o una buena visión de algunos de los 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 interesantes para mí es Axie Infinity. Y estoy tratando de pensar que vi una gráfica 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 la gente ganar tokens mientras juegan. Así que es como jugar para ganar. Pero también puedes comprar y vender objetos dentro del juego. Así que si piensas en Fortnite, tengo un par de hijos y probablemente gasto cientos de dólares al año. O ellos gastan también todo el dinero, mucho de lo que reciben en Fortnite. Consigues estas pieles, pero una vez que se cansan de ellas, las pieles se van. Con Axie Infinity, puedes revender todas las cosas que compras en el juego. Así que ahora creo que tuvieron un mes de crecimiento donde 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 que me dejó boquiabierto. 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 estaba hablando recientemente de cómo están buscando formas de colaborar y hacer cosas con cripto dentro de los juegos y lidiar con ideas de tipo Web3.

15. Casos de Uso de Blockchain y Desarrollo de Aplicaciones

Short description:

Los casos de uso para 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, pronto podríamos ver casos de uso más amplios, incluyendo plataformas de redes sociales que permiten a los usuarios ganar recompensas. Un aspecto interesante de la construcción 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 NFT es otro ejemplo, con múltiples mercados construyendo interfaces en la parte superior de 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, visite graph.com y navegue a través de los subgrafos, que son APIs creadas por los 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 cripto, como Stripe acaba de anunciar hoy que están haciendo un gran impulso para un nuevo equipo cripto y están hiring a un montón de gente para eso dentro de Stripe. Y Stripe ha sido realmente anti cripto hasta hace poco. Así que eso es bastante interesante. Entonces, como ahora, muchos de los casos de uso caen en estas categorías, finanzas, arte y coleccionables, juegos y tecnología. Creo, sin embargo, que con las cadenas menos costosas como Arbitrum y Optimism, Solana e incluso como Avalanche, estás empezando a ver ahora casos de uso más amplios como aún no hemos visto la gran aplicación de redes sociales que permite a la gente ganar por usar la plataforma en sí. Así que creo que eso va a suceder en algún momento pronto. Sí. Y las solicitudes get son gratis. Entonces, sí, las solicitudes get son gratis. Creo que eso es una de las cosas realmente interesantes sobre la construcción en la blockchain es que tus data permanecen allí literalmente para siempre. Mientras la red esté en funcionamiento, Ethereum nunca ha caído. Que yo sepa. Tal vez tal vez lo ha hecho por un corto período de tiempo en algún momento. Pero por lo que entiendo, nunca lo ha hecho. Pero una vez que escribes data a la blockchain, permanece allí para siempre. Así que como mencioné, uno de los proyectos en los que estoy trabajando que creo que va a ser interesante es un blog que una vez que escribo una entrada de blog y pago, creo que fueron 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 hosting, no se cae. Pero también es público y accesible para cualquiera. Y creo que muchas de las ideas están en Web3 o son personas construyendo front ends para competir en diferentes data de back end. Y un buen ejemplo de esto es el espacio NFT donde tienes Foundation, Zora, OpenSea y SuperRare y Rarible. Tienes como media docena de mercados que ahora están construyendo interfaces en la parte superior de todos estos datos de aplicación. Así que creo que eso es un ejemplo realmente básico como NFTs no es aplicable a la mayoría de las cosas, pero verás esa misma idea jugar. Creo que cuando alguien construye el YouTube de Web3, las redes sociales de Web3, Instagram de Web3 y esas cosas. Otro buen lugar para ver tipos de aplicaciones que la gente está construyendo es si vas a the graph.com. Este es en realidad donde trabajo o uno de los protocolos con los que trabajo de cerca, supongo que podrías decir. Y vas a subgrafos. Estos son como APIs que la gente ha construido. Y vas a en realidad voy a ir al servicio alojado porque esto tiene algunas APIs más. Aquí puedes ver un buen ejemplo de algunos de los diferentes tipos de aplicaciones que son populares y las diferentes APIs que la gente está construyendo. Muchas de estas son alrededor de DeFi y juegos.

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

Short description:

Alguien preguntó acerca de un error al enviar una transacción en bruto con una cadena ID inválida. Verifique dos veces que la cadena ID esté configurada en 1337. Si el problema persiste, restablezca el historial de transacciones de su 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 pagos 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.

OK, genial. Entonces alguien preguntó, estoy obteniendo este error al intentar enviar una transacción en bruto con una cadena ID inválida. Entonces. Dos cosas que vamos a hacer para debug eso. En primer lugar, verificaría dos veces que tiene la cadena ID configurada correctamente aquí, es 1337. Y si no, esto está documentado en el readme. Así que asegúrate de tener esto configurado para la cadena ID 1337. Y luego, si eso ya está hecho y aún no funciona, puedes ir a restablecer tu cuenta. Y esto no va a eliminar tu cuenta. Solo va a restablecer el historial de transacciones. Y la forma en que puedes hacer eso es yendo a tu billetera Metamask, abriendo la configuración aquí. Y luego yendo a avanzar. Y luego yendo a avanzar. Y luego haciendo clic en restablecer cuenta. Así que esas son las dos cosas que verificaría dos veces para asegurarme de que estás listo para continuar. Bien. Entonces creo que lo siguiente que vamos a ver son los tokens, pero creo que como estamos a 20 minutos después de la hora, podría ser un buen momento para tomar un descanso para permitir que las personas se pongan al día o para tomar un descanso para ir al baño o beber algo. Entonces, lo que haremos es que comenzaremos de nuevo a los 35 minutos después de la hora. Así que eso es casi exactamente 15 minutos a partir de ahora. Entonces tomemos un descanso de 15 minutos. Volveremos a las 1235 mi tiempo, que será como las 1035 a.m. hora del Pacífico. Será la una y treinta y cinco p.m. hora del Este. Y no estoy seguro de la hora en Europa donde estás, pero digamos 35 minutos después de la hora. Y estaré aquí tomando café y estaré revisando preguntas en Discord. Y estaré aquí tomando café y estaré revisando preguntas en Discord. Y estaré revisando preguntas en Discord. Y estaré revisando preguntas en Discord. Y estaré revisando preguntas en Discord. Bien. Parece que es hora de continuar. Entonces, 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 enviarlas a diferentes cuentas haciendo eso. Entonces, digamos que quería enviar algunos tokens a esta cuenta. Puedo 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 podría querer enviar, ya sabes, 100 ETH a esa dirección. Debería poder ir aquí y ahora ver que tengo 100. Y esto es similar a lo que vamos a hacer en un momento. Pero lo haremos con nuestros propios tokens que creamos y lo haremos de manera programática a través de una aplicación de front end. Bien. Entonces, una de las cosas más interesantes sobre el desarrollo de contratos inteligentes es la capacidad para enviar pagos entre diferentes partes dentro del propio contrato. También para programar cosas como comisiones y tarifas en un contrato que pueden ser enviadas a una cierta dirección, 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 está comprando y vendiendo digitalmente. Entonces, por ejemplo, tienes cosas como, diría, Spotify, tienes YouTube, tienes personas que venden cursos digitales. Tienes, por supuesto, los NFTs, que son como tecnologías Web3. Pero en general, tienes todo tipo de pagos digitales que pueden suceder. Una de las cosas realmente interesantes es que básicamente podemos abstraer eso y hacer que sea parte del propio contrato. Así que no necesitamos tener ningún proveedor de pagos. Simplemente permitimos que las personas realicen transacciones directamente entre diferentes partes sin ningún intermediario. Entonces mencioné antes que esta función de transferencia va a ser lo que está pasando allí. Pero en lugar de solo tocar eso, vamos a copiar todo este contrato. Y vamos a repasar todo este code. Entonces voy a copiar esto y voy a crear un nuevo archivo llamado token.sol. Y esto va a estar en el directorio de contratos. Entonces, si abro mi base de code de proyecto. Y voy a contratos en el nivel raíz aquí. Y creo un nuevo archivo llamado token.sol. Puedo pegar este nuevo contrato aquí. Entonces estamos haciendo todas las mismas cosas cuando comenzamos. Solo estamos importando hardhat.console. Y estamos configurando nuestra versión de Solidity y todo eso. Y nuestra funcionalidad principal está sucediendo en estas 20 líneas de code. Entonces tenemos un contrato llamado token. Establecemos algunas piezas iniciales de estado. Entonces, lo primero que estamos haciendo es establecer el nombre de nuestro token como lazy cats token o lo que quieras. Estamos estableciendo un símbolo. Y aquí simplemente lo estamos configurando como LCT.

17. Contrato de Token y Despliegue

Short description:

Establecemos el suministro a ser 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 implementador. La persona que despliega el contrato se conoce como 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.

Y estamos estableciendo el suministro a ser 1 millón. Así que aquí tenemos un valor que estamos estableciendo como un nombre de variable llamado suministro de token. Y la cantidad es 1 millón. Y luego tenemos algo que es bastante interesante, este mapeo. Y esta es una forma de hacer una operación de tipo par clave-valor en Solidity, casi como un objeto donde tienes un objeto. En nuestro caso, se va a llamar saldos. Y luego los saldos van a tener una clave. Y la clave va a ser una dirección. Y el valor va a ser un entero. De esta manera, podemos agregar múltiples valores si quisiéramos aquí. Pero en realidad, solo vamos a tener uno. Así que puedes pensar en este mapeo como una especie de mapa o un objeto en otro lenguaje de programación.

Y luego en nuestro constructor, tenemos una línea de code donde básicamente vamos a seguir adelante y establecer el suministro total de la persona que está desplegando este contrato para ser el suministro total de lo que establecimos aquí. Y esto va a decir, OK, tenemos este mapeo llamado saldos. Y queremos seguir adelante y establecer que la persona que despliega este contrato tiene un saldo de un millón de estos tokens, esencialmente. Ahora, la forma en que podemos acceder a quién es la persona que despliega este contrato es un valor muy especial que podemos referenciar llamado message.sender. Esto significa que la persona que está interactuando con el contrato va a ser el remitente del mensaje. Así que esto significa que la persona que despliega el contrato o la persona que interactúa con el contrato enviando una transacción va a ser message.sender. Así que obtenemos la capacidad de tener acceso a esa persona. Es casi como si estuvieras haciendo algún tipo de mecanismo de authentication en el servidor, podrías ser capaz de analizar ese JWT o analizar la sesión de la operación y obtener la identidad de ese usuario. Esto es algo así, excepto que es nativo y es parte de cómo funciona la máquina virtual de Ethereum. Y no necesitamos escribir ningún code. 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 esencialmente lo que está sucediendo. Y luego tenemos dos funciones. Una nos permite transferir tokens entre dos partes y una nos permite leer el saldo de la persona que interactúa. Así que el balance de toma una dirección. Y aquí podemos seguir adelante y verificar en ese mapeo para ver los saldos de esa cuenta. Así que cuando despleguemos este contrato, solo va a haber una cuenta y va a ser la persona que lo desplegó y va a tener un saldo de un millón. Pero si empezamos a transaccionar, si empezamos a enviar tokens entre partes, este mapeo tendrá múltiples valores diferentes. Así que tendremos una persona con X número de tokens, otra persona con X número de tokens y así sucesivamente. Pero esta función de transferencia es donde realmente seguimos adelante y enviamos tokens entre diferentes partes. Así que lo que tenemos aquí son tres líneas de code. Lo primero que estamos haciendo es una declaración require. Y si alguna vez has hecho algún tipo de lógica de si en una aplicación de JavaScript, podrías decir si este valor es verdadero, entonces haz eso requiere es como una declaración de si que dice si esto no es verdadero, entonces vamos a detener la ejecución en este punto. Así que este require es esencialmente decir que requerimos que esto sea verdadero. Y si no, vamos a lanzar este error aquí. Así que el requisito es que la persona que está tratando de enviar tokens necesita tener tantos tokens en su saldo. Y si no, por supuesto, no pueden hacer esta operación de todos modos. Así que queremos seguir adelante y lanzar un error. Y luego las dos siguientes cosas que estamos haciendo son bastante básicas. Estamos restando los tokens de la cuenta del usuario y luego depositándolos en la cuenta del remitente. 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 comprobando para asegurarnos de que el remitente tiene 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 simplemente la cantidad. De esta manera, estamos actualizando el saldo del usuario. De los usuarios, supongo que podrías decir plural en este caso.

OK, genial, básicamente tenemos 15 líneas de code, en realidad, eran como 20 líneas de code, y estamos haciendo bastante allí. Así que vamos a seguir adelante y guardar ese contrato y continuar. Ahora podemos llamar a MPX hard hat compile de nuevo porque ahora tenemos un nuevo contrato. Y si esto se compila con éxito, entonces 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 que queremos actualizar nuestro script de despliegue. Porque ahora, nuestro script de despliegue solo está desplegando el saludo y ahora también queremos desplegar el token. Así que. Voy a seguir adelante y obtener una referencia al contrato de token y todo esto está exactamente en la documentación. Vamos a seguir adelante y obtener una referencia al contrato de token. Vamos a seguir adelante y desplegar el token. Vamos a seguir adelante y desplegar el token. Y luego, al igual que lo hicimos antes. Vamos a esperar a que el despliegue sea exitoso, y luego simplemente registraremos la dirección del token. Así que. Exactamente el mismo code que escribimos aquí, creo que la principal diferencia 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 dejamos ese argumento en blanco. Sí, puedes programar múltiples direcciones en un contrato como cuando despliegas esto, básicamente podrías tener un array y podrías distribuir estos tokens entre un cierto número de partes. Muy bien, genial.

18. Desplegando Contrato y Actualizando 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 nuevas piezas de estado para la cantidad de tokens y el número de cuenta para enviar los tokens. Implementamos la función get balance para recuperar 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 las monedas, así como entradas de formulario para la cuenta de usuario y la cantidad. Finalmente, importamos la dirección del token en nuestra billetera MetaMask para ver el saldo del token.

Entonces. Hemos escrito nuestro script de despliegue, por lo que ahora podemos continuar. Acabamos de hacer esta parte aquí. Y ahora queremos desplegar nuestro contrato. A nuestro nodo local de Ethereum de nuevo, porque ahora hemos actualizado algunas cosas, queremos seguir adelante y desplegar de nuevo. La forma en que podemos hacer eso es que podemos ejecutar el mismo script que ejecutamos antes, este script aquí. Así que ejecutamos NPX hard hat. Ejecutamos scripts, slash deploy. Y quieren establecer la red. Como local. Y este script es, ya sabes, y el tutorial y el. Y el material de la masterclass. Así que si ejecuto esto, ahora deberíamos ver que vemos algunos registros aquí y ahora tenemos las dos direcciones de contrato diferentes registradas aquí. Así que tenemos el greeter y ahora tenemos el nuevo para el token. Así que el token ha sido desplegado. Así que ahora actualicemos nuestro front end para empezar a interactuar con eso. Para hacer eso, seguiré adelante e importaré algunas cosas nuevas. Así que voy a abrir SRC slash app dot JS. Voy a ir a la parte superior aquí. Así que ya tenemos el greeter importado, así que ahora voy a importar el token. También tenemos la dirección del greeter. Aún no tenemos la dirección del token. Así que seguiré adelante y la estableceré. Así que si vuelvo a mi terminal. En realidad, déjame seguir adelante y actualizar el greeter también, ya que desplegamos una nueva versión de él. Y luego no creo que tengas que. Creo que ambos seguirán funcionando. Pero de cualquier manera, voy a seguir adelante y establecer la dirección del token aquí.

A continuación, queremos seguir adelante y crear un par de cosas nuevas. A continuación, queremos seguir adelante y crear un par de nuevas piezas de estado. Vamos a tener un formulario que permite al usuario enviar tokens a otra cuenta, por lo que necesitamos mantener dos piezas de estado. Necesitamos la cantidad de tokens y luego 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 está llamando 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 este window.ethereum.request como lo hicimos antes. Pero estamos estableciendo el valor de retorno como una variable. Eso es porque cuando llamas a window.ethereum.request, se te da un array de cuentas que el usuario ha, diría yo, permitido que la aplicación use. Y como sólo hemos permitido que esta aplicación use una sola cuenta, vamos a coger la primera cuenta de ese array. Así que esta debería ser la cuenta que hemos estado usando todo el tiempo. Lo siguiente que hacemos es como hacemos las mismas cosas del proveedor, pero aquí cuando llamamos a contract.balanceof, estamos pasando la cuenta del usuario que está actualmente conectado. Así que esto va a ser nosotros pasando esta variable en el balance de y si vamos a token.sol, verás que balance of 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 ser usando un firmante porque básicamente necesitamos firmar una transacción y aprobar una transferencia entre dos partes. Y lo que vamos a hacer es que queremos llamar a contract.transfer pasando dos argumentos. Uno va a ser la cuenta a la que nos gustaría enviar y el otro es la cantidad. Y establecimos esas variables antes como aquí. Así que tenemos user account, set user account, amount y set amount. Vamos a estar actualizando, ya sabes, set amount y set user account en la UI en un momento, pero esas variables estarán disponibles para nosotros aquí. Y luego esperamos a que esa transacción se complete y luego simplemente registramos, ya sabes, que se transfirió con éxito. Parece que alguien está teniendo un error. Okay, parece que lo tienen funcionando. Bueno, bueno. Lo siguiente que haremos es que actualizaremos nuestra interfaz de usuario ahora. Así que añadimos, ya sabes, get balance. Añadimos send coins. Y ahora queremos añadir este código aquí. Así que seguiré adelante y tal vez copie esto. Okay, tenemos nuestra interfaz de usuario. Así que seguiré adelante y tal vez copie esto. Estoy haciendo todo esto supongo que dentro de este encabezado. Okay, así que estamos añadiendo como un salto de línea aquí. Y luego estamos añadiendo un botón para obtener el saldo, un botón para enviar las monedas, una entrada de formulario que nos permite establecer la cuenta de usuario. Que queremos enviar las monedas a. Y luego tenemos una entrada de formulario que nos permite definir la cantidad que nos gustaría enviar.

Okay, 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. Añadiendo la Dirección del Contrato de Token

Short description:

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

Entonces, la forma de hacerlo es simplemente copiar esto en nuestro portapapeles. Y tengo este tipo de esquema aquí. Pero lo que vamos a hacer es que vamos a ir aquí para añadir token. Y parece que ahora necesitamos, parece que la interfaz quizás ha cambiado desde que hice esto. Así que importar tokens. Así que necesito actualizar eso. Así que importar tokens. Y vamos a pegar la dirección del contrato de token. Y ves que cuando pegamos la dirección, vemos que 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 añadir token personalizado.

20. Importando y Enviando Tokens

Short description:

Ahora tenemos 1 millón de tokens LazyCat en nuestra cartera y podemos importarlos a 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 cartera. Pedimos disculpas por las molestias.

Así que aquí tenemos ahora nuestros tokens LazyCats en nuestra cartera. Así que ahora tenemos 1 millón de tokens LazyCat. Así que tenemos ETH. Oops. Sí, tenemos ETH ahora y LCT. Genial. Así que ahora que tenemos nuestros nuevos tokens en nuestra cartera, podemos importarlos a nuestra cartera MetaMask. Y ahora podemos empezar a enviar estos a otras personas.

Así que lo que haré es que guardaré esto y volveré a mi aplicación React. Y ahora deberíamos ver que tenemos una user interface actualizada. Así que si hacemos clic en obtener saldo, deberíamos ver que tenemos un saldo de 1 millón. Y ahora queremos enviar estos a alguien más. 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 a mi portapapeles. Volveré a la cuenta 3. Y aquí puedo pegar el 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 lo que está pasando. Huh. Interesante. Parece que he tenido un error en MetaMask. ¿Alguien más está teniendo un error? Y no creo que haya guardado la información de mi cartera. Así que es posible que necesite eliminar esta cartera. Y luego reinstalarla. Y no creo que haya guardado la información de mi cartera. Así que es posible que necesite eliminar esta cartera. 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 de nuevo. Así que pido disculpas. Este será todo el proceso de nuevo. Quizás debería guardar esta frase de paso por si acaso. Vale. Parece que he estropeado algo. Déjame intentarlo de nuevo. Oh Dios, he estropeado algo de nuevo. Ahí vamos. Vale, genial. Así que voy a guardar esto. Frase de paso por si acaso que suceda de nuevo. Así que tengo MetaMask instalado. Ahora quiero. Adelante y. Importar esta dirección de cuenta. Lo cual necesito para reiniciar el nodo. Vale. Quiero adelante y volver a desplegar este contrato. Actualizar la dirección del token. Y luego intentar importar la dirección del token aquí. Vale. Déjame intentarlo de nuevo. Vale. Vale. Déjame intentarlo de nuevo. Vale. Um, lo que podría hacer, y no estoy seguro si esto tuvo algo que ver con eso, pero podría adelante e importar otra. Una de estas cuentas para usar en lugar de usar la cuenta 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 a. Vale. Y voy a 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 establecimos en cero. Una vez que corregí el decimal, la transacción se realizó con éxito. Es importante entender el sistema decimal al tratar con Ethereum y los tokens. Open Zeppelin es una empresa que proporciona soluciones de código abierto para el desarrollo seguro y estandarizado de contratos inteligentes.

Y voy a proceder a 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. Lo intentaremos de nuevo. Me encuentro con este error de nuevo. Me pregunto si es la forma en que importé esa cuenta. Déjame intentarlo una vez más. Vale. Bien. Bien. Bien, voy a proceder a copiar esta dirección de token. Y voy a importar el token. Y quizás estableceré el decimal del token en cero. Me pregunto si eso es lo que lo estropeó. Así que estoy estableciendo el decimal del token en cero. Espero que esto solucione el problema y quizás yo estaba. Estaba equivocado acerca del decimal del token. Bien. Así que con eso dicho, intentémoslo una vez más. Procederé a refrescar. Enviar monedas allí. Cien mil. Primero obtener balance. Primero obtener balance. El balance se ve bien. OK, 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, estás realmente como con ETH, que es la moneda nativa, sabes, de interactuar en la blockchain de Ethereum. Estás realmente trabajando con 18 decimales y tienes, sabes, la capacidad de enviar, sabes, porciones de un ETH hasta el decimoctavo decimal. Y estas cosas están un poco más allá del alcance de esta, diría yo, masterclass. Pero definitivamente es algo a tener en cuenta. Y la forma en que somos capaces de lidiar con estos grandes órdenes de números es que tienes esta idea de way y way. Un way es un dieciochoavo de un decimal de éter y un way es ocho decimales. Así que cuando quieres enviar, sabes, estos números masivos de decimales, estás lidiando con estas cosas. Así que normalmente cuando despliegas tu propio token, estableces el token para tener 18 decimales también. Pero en nuestro caso, lo establecimos como cero decimales. Así que creo que cuando intenté transaccionar en punto uno decimales, se dio cuenta de que había algo mal allí. De todos modos, deberíamos poder hacer clic en confirmar y ver que cien mil monedas fueron enviadas con éxito allí. Así que si tuviste el mismo error que yo y estabas escuchándome hacer uno punto uno decimales, ese fue el error. Cuando estás importando el token, debería ser simplemente cero decimales. Y me aseguraré de actualizar el material de la masterclass para reflejar eso. Si estás obteniendo. Sí, si estás enviando 10 y obteniendo punto uno, es porque estropeé los decimales cuando una vez que lo estableces en cero, debería funcionar bien. Estoy obteniendo un balance de cero en lugar de un millón. Sí, quizás se importó a la cuenta equivocada. Asegúrate de que la cuenta que estás importando debería ser esta cuenta cero para que aparezcan los cien mil tokens. No van a aparecer en ninguna de estas otras cuentas, sólo en la cuenta cero. Y la razón de eso es cuando despliegas el contrato. Usando la CLI automáticamente usa la cuenta cero algo. Sí, usé cero como el decimal. Así que lo que ahora debería ser capaz de hacer, sin embargo, cuando chequeo mi balance, ahora debería estar en novecientos mil. Pero si cambio a esta otra cuenta. Conéctate a ella y obtén el balance, ahora debería tener un balance de cien mil. Y, sabes, podríamos seguir enviándolos a otras partes también. Digamos que quería enviar cincuenta mil de vuelta a esta cuenta. Sabes, puedo ir aquí y hacer eso. Y parece que no tengo suficiente. No tengo ningún Ethereum para enviar, así que tienes que tener éter para enviar. OK, genial. Parece que cero está funcionando. Oh, ¿sabes qué? Incluso lo tengo en el tutorial para usar cero. No sé por qué pensé en punto uno de todos modos. Bien, continuemos ahora, la forma en que acabamos de usar tokens es bastante rudimentaria. Codificamos todo. No hay seguridad. No hay muchas cosas que normalmente necesitas para una transacción financiera, especialmente cuando estás tratando con valor real como lo estás en Ethereum. Lo genial del ecosistema de Ethereum es que hay muchas cosas que ya se han resuelto. Y muchas de estas cosas ya son de código abierto y estandarizadas. Y como transaccionar valor es algo tan común cuando estás tratando con moneda digital dentro de contratos inteligentes, tienes muchas cosas que ya han sido probadas y estandarizadas, como dije. Así que una de esas cosas es que tienes 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 Token ERC20 y Open Zeppelin

Short description:

ERC20 es un estándar de token que permite la acuñación fácil 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 asignar. Para usar ERC20, necesitas 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, necesitas 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 y standards que están disponibles para ti. Así que ERC20 es el token que Ethereum es en realidad, ETH en sí, y es un estándar que te permite acuñar tokens muy fácilmente utilizando un conjunto predefinido de funciones y funcionalidades que te dan muchas cosas diferentes. Así que si bajo un poco, cuando usas ERC20 para acuñar un token, estás heredando mucha funcionalidad ya existente. Así que puedes heredar cosas como el nombre del token, el símbolo, tener funciones que puedes llamar para obtener esta información, los decimales. Por defecto, esto se establece en 18. El suministro total, el balance. Tienes una función que te permite transferir. También tienes una función que te permite transferir entre dos direcciones. Y luego tienes approve que te permite dar a otra persona la capacidad de gastar tus propios tokens. Y luego tienes allowance. Así que todas estas van a ser programadas 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 estás importando una biblioteca existente, es muy similar a eso. Y todo lo que necesitamos hacer es instalar los contratos de Open Zeppelin y podemos empezar a usarlos.

Así que lo que voy a hacer es seguir adelante y hacer eso. Voy a llamar a npm install at Open Zeppelin slash contracts. Pero voy a usar Yarn. Espero que esto funcione ya que ya tengo un pack. No tengo un paquete. Así que sí tengo un paquete en JSON. OK, todavía va a funcionar. Bien. Parece que está casi ahí. Bien. Parece que está casi ahí. Bien. Parece que está casi ahí. OK, así que hemos instalado Open Zeppelin. Y lo que podemos hacer ahora es simplemente importarlo. Así. Y luego ahora podemos heredar de ERC20 y tener toda esa funcionalidad. Así que podemos esencialmente crear un token usando cuatro o cinco líneas de code. Así que vamos a copiar esto y volver a nuestro contrato inteligente y simplemente actualizar esto. Así que lo que tenemos ahora es creado toda esa funcionalidad y solo cinco líneas de code. Ahora, la línea de code más importante es esta aquí. Aquí es donde estamos llamando a Mint. Y Mint significa que estamos creando el token real en sí. Y 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 en Google Open Zeppelin ERC20. Así que algunos de los otros tokens o algunos de los otros standards que soportan 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 tipo moneda. Y luego ERC721 es lo que la gente usa para NFTs o tokens no fungibles, que son básicamente identificadores únicos para un token individual. Mientras que con ERC20, puedes acuñar múltiples. Pero si vas a ERC20, verás que tenemos mucha documentation alrededor de lo que está pasando aquí. Así que, por ejemplo, hay una explicación de decimales. Tienes documentation alrededor de la creación de un suministro fijo. También tienes un poco más de información alrededor de la función mint. Si hacemos clic en mint, verás que tenemos todo esto documentado. Pero mint básicamente va a transferir este número de tokens al message dot sender. Esa es la idea general. Así que. Así que.

Dicho esto, 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 antes lo teníamos codificado. Pero en este ejemplo, en realidad vamos a pasar como el constructor. También podrías decidir crear una variable como aquí y luego omitir esto y luego referenciar esas variables aquí mismo. Así que depende de ti. Pero en este caso, simplemente vamos a tomar el estándar tal cual y lo pasaremos al constructor. Así que tenemos token y lo llamamos el token Indy o puedes llamarlo como quieras. Pero, sabes, esto es realmente todo lo que necesitamos para seguir adelante. Así que dicho esto.

Vamos a seguir adelante y. Ir a deploy JS.

23. Actualización del Front End y Recursos Adicionales

Short description:

Para actualizar el front end y usar el nuevo token, necesitas modificar las funciones de obtener balance y enviar puntos. El desafío es utilizar el nuevo token en el front end, lo que requiere importarlo en Metamask. La acuñación se refiere a la creación de tokens o escasez digital en el mundo de Ethereum. Se recomiendan recursos para un aprendizaje más profundo como Ethereum dev speed run, scaffold ETH, Buildspace y el tutorial del mercado NFT. 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. Para esto, voy a seguir adelante y hacer Indy token. O esto sería realmente lo que te gustaría llamarlo, pero necesita 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 simplemente token o algo así. Pero de nuevo, si sigues la masterclass, debería funcionar bien. Creo que solo me estoy confundiendo. Así que con esta actualización, ahora hemos pasado los valores para el 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. Slash deploy y luego set. Vaya. Network como localhost. Entonces deberíamos ver que hemos desplegado con éxito nuestro nuevo token y ahora tenemos un suministro total de. En nuestro caso, 100000 y tenemos 18 decimales por defecto. Así que cuando importamos esto, tenemos que establecer el decimal como 18. Dicho esto, estamos llegando al final de todo lo que hemos estado haciendo aquí. Así que lo que diría que sería el desafío para ti y puedo quedarme en Discord después y responder preguntas es ¿cómo actualizas realmente tu front end para usar este nuevo token que hemos desplegado? Y realmente las dos principales diferencias que necesitas cambiar o considerar cambiar van a ser. Esto. Función para llamar a obtener balance y esta función para llamar a enviar puntos porque. Quizás ya tenemos esta función aquí, así que tenemos balance de. Tenemos transferencia o tal vez ya actualizamos esto para ser 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 luego si puedes conseguir eso, que no debería ser muy difícil porque gran parte de ello ya está hecho por ti, entonces deberías estar listo. Y alguien preguntó acerca de los siguientes pasos que tomarías para profundizar mucho en todo esto. Y enlazé a algunas de las cosas que son los recursos que para mí son bastante buenos y todos son gratuitos. Así que. Existe el Ethereum dev speed run. Esto es algo que fue creado por Austin Griffith y él es un gran educador y él es en realidad la persona que me educó mucho acerca de muchas de estas cosas. Y entonces, sí, alguien mencionó la acuñación o preguntó acerca de la acuñación. Sí. Así que la acuñación es básicamente crear, crear tokens o imprimir dinero, como quieras decir, o crear algo digital, algún tipo de escasez digital en el mundo de Ethereum. Así que. Sí, Ethereum dev speed run es genial. Te introduce a un montón de cosas dentro del ecosistema de Ethereum y solidity. Y también te introduce a su scaffold ETH. Que es un proyecto de inicio realmente genial para trabajar con Ethereum. Tiene ramas para todo tipo de diferentes tipos de aplicaciones en Ethereum. Así que cada una de estas ramas es un tipo diferente de aplicación que se ha escrito. Que es full stack. Así que tienes como Coinbase wallet, tienes cosas de DeFi, tienes NFTs, préstamos flash, todo tipo de cosas. Así que esto es como cientos casi o definitivamente. Probablemente son cientos de aplicaciones que son proyectos de plantilla con los que puedes jugar, lo cual es realmente genial. La otra cosa que recomendaría es Buildspace. Buildspace. Y esto es una escuela de programación gratuita para Web3. Y son realmente geniales. Hacen muchas cosas en Ethereum y ahora están empezando a explorar Solana también. También tenemos este tutorial que escribí, construyendo un mercado NFT full stack en Ethereum con Polygon. Esto utiliza lo que se conoce como una cadena lateral o la gente a menudo clasifica a Polygon como una capa o dos. Esto te permite transaccionar en la red de Ethereum, citando en una red EVM alternativa utilizando lo que se conoce como Polygon por una fracción de lo que normalmente harías en Ethereum. Así que una transacción con Polygon, creo, está en el rango de 0.001 centavos o 2.1 centavos o algo así. Pero puedes usar la misma base de código para construir un mercado NFT en cualquier cadena compatible con EVM, incluso Ethereum layer one. Así que esos son realmente todos lugares geniales. Y finalmente, Use Web3 es un lugar realmente genial en general para ver un montón de diferentes tutoriales y cosas. Así que tienes podcasts, cursos en video, libros, kits de inicio, tutoriales. Así que esas cuatro cosas que enlacé en la parte inferior te mantendrán extremadamente ocupado probablemente durante semanas o meses. Parece que hay mucho contenido genial saliendo últimamente en Web3. Por supuesto, está empezando a explotar finalmente. Y yo diría que sigue a un montón de gente en Twitter. Ve a gente divertida que está creando cosas. Sigue a Austin Griffin. Sigue a algunas de las personas a las que él está retuiteando.

QnA

Preguntas y Respuestas y Recursos Adicionales

Short description:

Estaré disponible durante los próximos 40 minutos para responder preguntas en Discord. Si tienen alguna pregunta final, por favor háganmela saber. Aprecio el tiempo de todos y espero que hayan aprendido mucho. Pueden seguirme en Twitter en dabit3 y contactarme en un momento posterior. Las principales diferencias entre hard hat y truffle radican en la experiencia del desarrollador. Ethers.js tiene una mejor API que Web3.js en mi opinión. Estoy emocionado de estar en Londres la próxima semana para el evento principal. Consulten mi tutorial sobre la construcción de APIs GraphQL en Ethereum utilizando el Protocolo Graph en dev.to.

Todos ellos son excelentes educadores en el espacio. 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 háganmela saber. Y estaré encantado de responderlas, por supuesto, durante los próximos 10 minutos más o menos. No hay manera de agradecerme más que simplemente haberse presentado aquí y haberse quedado para esta masterclass. Saben, realmente aprecio el tiempo de todos en estos días. Sé lo ocupados que estamos todos. Así que estoy contento de que hayan venido y espero que hayan aprendido mucho. Veo algunos comentarios bastante buenos. Me alegra que a todos les haya gustado. Sí, y siempre pueden seguirme en Twitter y contactarme, saben, en un momento posterior. Si tienen alguna pregunta, soy dabit3 en Twitter. Y mis mensajes están cerrados. Mis DMs están cerrados, pero siempre pueden responder a un tweet o algo así. Bien. Así que parece que no veo. OK, aquí hay una pregunta. Así que me quedaré un segundo. ¿Cuáles son las principales diferencias entre hard hat y truffle? Lo mismo para ethers y Web3.js. Así que diría que las principales diferencias son que estoy usando muchas de las mismas cosas. Y Web3.js. Así que diría que las primeras bibliotecas para el desarrollo de Ethereum fueron truffle y ganache y Web3.js. Y son realmente geniales. Y puedes hacer mucho con ellas. Y diría, saben, muchos proyectos definitivamente todavía las usan y tienen un gran financiamiento. Creo que consensus financia Web3.js. Y sí, son geniales. Pero creo que lo que hard hat aporta a la mesa para mí es una mejor experiencia de desarrollador. Esa es solo mi opinión. Hay mucha gente que en realidad 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án interesados en explorar más del ecosistema, también echen un vistazo a truffle. Creo que ethers.js tiene una mejor API que Web3.js. Fue más fácil para mí entenderlo. Web3.js probablemente tiene una API más grande con la que podrías hacer más. Pero ethers para mí fue más fácil de entender. Y pensé que su documentación era un poco mejor. Así que gracias de nuevo por venir. Voy a terminar y salir del chat aquí. Me voy del live stream. Así que sí, fue genial estar aquí. Gracias por venir. Estoy deseando estar en Londres la próxima semana para el evento principal. Y alguien preguntó sobre una introducción al gráfico. Y sí la tengo. Y está en dev.to. Si buscan en Google cómo construir APIs GraphQL en Ethereum, creo que debería aparecer. Así que este es el tutorial que escribí para construir APIs en Ethereum. Es una larga historia, pero es un poco difícil de construir. Sí, es difícil construir aplicaciones front end consultando directamente Ethereum, obteniendo cualquier tipo de datos no triviales que normalmente necesitas. Así que necesitas algún tipo de servidor de indexación. Y el proyecto con el que trabajo se llama el Protocolo Graph. Y permite a los desarrolladores construir rápidamente y fácilmente estas APIs en Ethereum o cualquiera de estas redes descentralizadas. Así que este es un buen tutorial. Si quieren entrar en ese nivel intermedio, tal vez incluso, sí, diría nivel intermedio de desarrollo de Ethereum, revisen este tutorial también. Sí, déjenme compartir el enlace. Es una buena idea.

Watch more workshops on topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
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 🤐)
Concurrent Rendering Adventures in React 18
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
Maurice de Beijer
Maurice de Beijer
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 Hooks Tips Only the Pros Know
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
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, TypeScript, and TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
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.
Designing Effective Tests With React Testing Library
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Top Content
Featured Workshop
Josh Justice
Josh Justice
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
Remix Fundamentals
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Kent C. Dodds
Kent C. Dodds
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

A Guide to React Rendering Behavior
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
Building Better Websites with Remix
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!
Don't Solve Problems, Eliminate Them
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 Compiler - Understanding Idiomatic React (React Forget)
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
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. 
Using useEffect Effectively
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.
Routing in React 18 and Beyond
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.