Video Summary and Transcription
La charla discute la construcción de aplicaciones descentralizadas (DApps) con React y explora los beneficios de la tecnología de contratos inteligentes. Destaca las características y la infraestructura de las aplicaciones Web 3, incluyendo la indexación descentralizada, el almacenamiento de datos fuera de la cadena y el almacenamiento de archivos descentralizado. La charla también aborda la identidad en la Web 3, con un enfoque en la identidad soberana y el uso de la cadena de bloques para la verificación de identidad. Se explica el proceso de construcción de una DApp con React y Hard Hat, junto con la implementación de contratos y la interacción con ellos. En general, la charla proporciona información sobre el mundo de las DApps y las tecnologías involucradas.
1. Introducción a la construcción de DApps con React
Estoy muy emocionado de estar aquí y feliz de hablar sobre algo que me interesa mucho. Quiero compartir algunas de las ideas que he aprendido aquí contigo y mostrarte cómo empezar a trabajar con una pila que puede ser completamente nueva para ti si nunca has explorado el espacio de la cadena de bloques. Mi charla se llama Construyendo DApps con React. Vamos a construir una DApp. Una aplicación descentralizada es una aplicación que se ejecuta en la web descentralizada. Estas aplicaciones descentralizadas presentan casos de uso que nunca antes habíamos visto.
Gracias por esa increíble introducción. Estoy muy emocionado de estar aquí en persona en Londres. Hace unos años tuvimos un taller avanzado de React. Y, por supuesto, ha pasado un tiempo desde que tuvimos eventos en persona. Especialmente aquí. Pero realmente, tal vez en el último mes más o menos, hemos empezado a ver que vuelven. Así que estoy muy emocionado de estar aquí y feliz de hablar sobre algo que me interesa mucho.
Así que sí, espero que aprendas algo aquí. Mi nombre es Nader. Soy un ingeniero de relaciones con desarrolladores en Edge and Node. Edge and Node es una empresa que se encuentra en las categorías de blockchain, cripto y web tres. Y fue creada recién en febrero. Así que es una startup muy nueva. Pero durante los últimos seis meses más o menos desde que me uní, viniendo de un trasfondo más tradicional, he aprendido mucho. Y quiero compartir algunas de las ideas que he aprendido aquí contigo y espero hacerlas lo más concisas posible y mostrarte cómo empezar a trabajar con una pila que puede ser completamente nueva para ti si nunca has explorado el espacio de la cadena de bloques.
Así que mi charla se llama Construyendo DApps con React. Y vamos a construir una DApp. DApp es un acrónimo de aplicación descentralizada. Y una aplicación descentralizada es una aplicación que se ejecuta en la web descentralizada. Y cuando hablamos de muchos de estos términos de los que voy a hablar en un momento, probablemente has escuchado mucho alboroto recientemente sobre Web3, aplicaciones descentralizadas, descentralización, cripto y todas estas cosas. Bueno, como desarrollador, he estado especulando en cripto desde aproximadamente 2015, comprando y vendiendo tokens y cosas así. Pero nunca lo vi como algo más que una herramienta financiera o algo en lo que apostar, básicamente. Nunca entendí realmente que la gente estuviera construyendo software con ello. Así que he estado, diría, escribiendo código durante unos 10 años. ¿Cómo es posible que no haya investigado más sobre esto hasta hace unos meses? Realmente no lo sé. Pero una vez que empecé a sumergirme en algunas de estas plataformas y protocolos, me di cuenta de que la mayoría de estos equipos están tratando de construir nuevas formas para que nosotros construyamos aplicaciones que impulsen la web. Y los cambios que están tratando de hacer realidad o algunas de las cosas que están sucediendo son bastante diferentes a todo lo que hemos visto antes. A menudo escuchas a la gente agrupar estas ideas en algo que llaman web tres, cuando en realidad estamos construyendo aplicaciones descentralizadas. Pero las aplicaciones que estamos construyendo nuevamente son muy diferentes a las que hemos hecho en el pasado. Así que presentan casos de uso que realmente nunca antes habíamos visto en el pasado.
2. Understanding Web 3 and Decentralized Applications
Web 3 es el conjunto de protocolos que permiten que las aplicaciones sean completamente descentralizadas, o permiten a los desarrolladores construir aplicaciones completamente descentralizadas. Es más bien un espectro al que estamos tratando de llegar. Así que profundicemos en esto y luego comenzaremos a escribir algo de código.
Entonces, creo que tiene sentido intentar categorizar este tipo de aplicaciones como algo diferente. Muchos de los objetivos que las personas persiguen son muy diferentes a algunas de las cosas que hemos visto en el pasado. Creo que una de las principales preocupaciones que tienen las personas se refiere a cosas como la recolección de datos y cómo funcionan las redes sociales hoy en día, y cómo la atención es una moneda que se utiliza en contra de los usuarios. Y tenemos cosas como, ya sabes, la vigilancia básicamente, como cuando interactuamos con aplicaciones, nos rastrean y todas esas cosas. Entonces, ¿cómo podemos construir aplicaciones que permitan a los desarrolladores recibir pago, que permitan a las empresas ganar dinero, pero que eliminen algunas de estas restricciones negativas? Web 3 está tratando de lograr eso, podrías pensar, podrías decir. Y realmente, si quieres simplificarlo a algo extremadamente básico, podrías decir que Web 3 es el conjunto de protocolos que permiten que las aplicaciones sean completamente descentralizadas, o permiten a los desarrolladores construir aplicaciones completamente descentralizadas. Ahora, cuando escuchas sobre aplicaciones descentralizadas, es como el objetivo final. No creo que todo pueda construirse de esta manera o deba construirse de esta manera. Es más bien un espectro al que estamos tratando de llegar. Así que profundicemos en esto y luego comenzaremos a escribir algo de código.
3. Benefits of Smart Contract Technology
Internet ha prosperado debido a los protocolos comunes que podemos usar a nivel mundial. Sin embargo, faltaban funcionalidades nativas de pago y estado hasta la implementación de la tecnología de contratos inteligentes en blockchains. La construcción de infraestructuras centralizadas complejas fue la solución para superar estas limitaciones. Con la tecnología de contratos inteligentes, los desarrolladores pueden habilitar programáticamente la escasez digital y el intercambio de activos. Además, la construcción de bases de datos tradicionalmente requiere un esfuerzo significativo y tiene desventajas como puntos únicos de falla. Soluciones como Amplify y SuperBase proporcionan formas más sencillas de construir bases de datos.
Entonces, cuando piensas en Internet y en la forma en que construimos aplicaciones hoy en día, gran parte de la razón por la que Internet ha prosperado y se ha vuelto tan exitoso es que tenemos protocolos comunes que todos podemos usar en todo el mundo, y podemos esperar que funcionen. Conocemos FTP, conocemos SSH, hemos interactuado con todos estos diferentes protocolos, si subimos nuestra aplicación, podemos garantizar que nuestros usuarios puedan acceder a ella desde cualquier parte del mundo con HTTP, y no necesitamos ningún intermediario centralizado para que eso suceda. Simplemente funciona. Estos protocolos son ampliamente adoptados. No están sujetos a cambios y los desarrolladores los comprenden muy bien, y simplemente los damos por sentado en este momento.
Pero había un par de funcionalidades que faltaban, o a las que simplemente no teníamos acceso hasta la implementación y la evolución de la tecnología de contratos inteligentes en blockchains, y eso era el pago nativo y el estado nativo. Entonces, ¿qué hacemos para solucionar esto? Bueno, construimos infraestructuras centralizadas masivamente complejas para solucionar esto. Cuando piensas en los pagos, ¿cómo funcionan los pagos? Si una persona en Estados Unidos decide que quiere despertarse un día y enviar dinero a alguien en otra parte del mundo, ¿qué se necesita para hacer eso, para que eso suceda? Bueno, si esta persona no tiene una cuenta bancaria o una identificación, primero tiene que obtener documentos, ir a alguna autoridad, recibir una identificación. Luego, deben ir a un banco, deben tomar dinero de otro lugar, deben abrir una cuenta, deben proporcionar toda esta información a este banco, poner el dinero allí, y luego pueden o no obtener una cuenta bancaria, dependiendo de dónde vivan, porque todavía hay más de 70 países que no permiten que las mujeres de ciertas categorías o comunidades incluso abran una cuenta bancaria por ley. Pero digamos que viven en un lugar que les permite abrir una cuenta bancaria. Abren esa cuenta bancaria, luego van a su computadora, crean una dirección de correo electrónico, luego van a PayPal o Stripe o lo que sea, luego crean una cuenta, luego vinculan su cuenta. Tal vez intenten vincular su cuenta, pero son bloqueados por alguna razón. Entonces, todas estas cosas tienen que pasar para que esta persona lo haga, y luego la otra persona tiene que hacer lo mismo en el otro lado del mundo. Y luego, tal vez las dos cosas que decidieron usar no son compatibles porque PayPal no funciona en su país. Entonces, para solucionar esto, construimos cada vez más complejidad. Entonces tenemos más personas, más empresas tratando de resolver este problema. Bueno, con la tecnología de contratos inteligentes y blockchains, puedes habilitar programáticamente la escasez digital, lo que resulta en activos que las personas están dispuestas a intercambiar por otras cosas, también conocidos como tokens o moneda. Entonces, ahora tenemos la capacidad de construir esto como desarrolladores. Y podemos hacerlo en un par de líneas de código. Podemos enviar transacciones entre partes en solo un par de líneas de código. Por eso esto es revolucionario. Por eso están sucediendo cosas aquí. Ahora, ¿qué pasa con el pago? Quiero decir, ¿qué pasa con el estado? Bueno, en este momento, si queremos construir una base de datos, ¿cómo sucede esto? Bueno, típicamente, configuraremos una base de datos en nuestra sala de estar, nuestro garaje, o tal vez en AWS. Esto es genial porque permite que cualquiera construya una base de datos sin mucho trabajo. Pero también hay desventajas aquí. En primer lugar, esta base de datos es un único punto central de falla. Entonces, si algo le sucede a nuestra base de datos, nuestra aplicación se cae. Además, cuando piensas en cómo se acceden las aplicaciones desde todo el mundo, si quieres tener almacenamiento en caché o algo así configurado, típicamente tienes que tener redes de borde y todas estas cosas funcionando. Entonces, nuevamente, estoy pasando por alto todos los detalles de una implementación, pero si alguna vez has usado algo como AWS y has configurado una base de datos, sabes lo complejo que es construir todo esto desde cero. Por lo tanto, ahora tienes soluciones realmente excelentes, como Amplify, como SuperBase.
4. Characteristics of New Types of Applications
La tecnología blockchain y los contratos inteligentes te permiten tener programáticamente un estado global distribuido que cualquiera puede leer, y eso es confiable. Entonces, ¿cuáles son los tipos de características que podrías esperar de estos nuevos tipos de aplicaciones?
Están abstrayendo mucho de esto, y Firebase. Ayer tuvimos una charla con SuperBase, y dijeron que mucha de la razón por la que la gente estaba usando Firebase es no porque realmente les gustara la implementación, sino porque es muy fácil de configurar. Porque es complejo configurar todas estas cosas. Básicamente, todos estos están tratando de llenar el vacío que no tenemos un estado nativo en Internet. La tecnología blockchain y los contratos inteligentes te permiten tener programáticamente un estado global distribuido que cualquiera puede leer, y eso es confiable. Podemos asumir que si está ahí, es realmente los datos correctos y cualquiera puede acceder a ellos desde cualquier parte del mundo, y cualquiera puede verificarlo. Entonces, dicho esto, ¿cuáles son los tipos de características que podrías esperar de estos nuevos tipos de aplicaciones? Ahora, no creo que las aplicaciones descentralizadas vayan a conquistar el mundo.
5. Building with Web3 and Decentralized Applications
Ahora tenemos una nueva forma de construir cosas con web tres y aplicaciones descentralizadas. La descentralización es una característica clave que garantiza una infraestructura distribuida, confiable y sin confianza. Los back-ends abiertos y públicos permiten la colaboración y el intercambio de infraestructura. Esto ya está sucediendo, con aplicaciones que se construyen en intercambios descentralizados, DeFi y NFT. Las categorías de aplicaciones incluyen DeFi y monedas estables, protocolos de infraestructura web descentralizada y juegos para ganar dinero.
Creo que es más como si ahora tuviéramos una nueva forma de construir cosas nuevamente. Tenemos cosas que han evolucionado con el tiempo, dándonos cada vez más herramientas para lograr el trabajo que estamos tratando de realizar. Entonces, no estoy diciendo que debas usar web tres o aplicaciones descentralizadas para construir todo, pero ahora tienes un nuevo tipo de aplicación que puedes construir, y también podemos mejorar algunas de las antiguas, pero algunas de las formas antiguas de hacer las cosas están perfectamente bien y no deberíamos recurrir a estas herramientas.
Pero cuando piensas en una aplicación descentralizada, la descentralización está en la discusión porque a menudo tiene que ver con cada parte de lo que estamos haciendo. Estamos descentralizando la infraestructura web, pero también estamos descentralizando la propiedad. Estamos descentralizando los datos. Estamos haciendo todo más equitativo y más distribuido, y muchas de las cosas que surgen de eso son estas otras características. Entonces, una de ellas que es muy importante es esta idea de una infraestructura distribuida, sin confianza y robusta que simplemente no se cae. Entonces, si tienes un solo servidor ejecutándose en algún lugar y se cae, tu aplicación no se puede construir. Pero si tienes esta aplicación replicada en cientos o miles o decenas de miles de nodos, si un nodo o si el 25% de la red se cae, tu aplicación sigue funcionando. No hay un solo punto de falla. Es por eso que cuando piensas en nosotros como desarrolladores de software, esto es lo que destaca más para mí. Si puedo construir en un back-end que nunca se cae realmente, no tengo que preocuparme por muchas de las cosas por las que tengo que preocuparme hoy en día.
Otra cosa que me emociona como desarrollador es esta idea de back-ends abiertos y públicos. Básicamente, tienes código de código abierto hoy. ¿Qué pasaría si tuviéramos infraestructura de código abierto en la que cualquiera pudiera construir? Entonces construyo una aplicación, la despliego en la red. Cualquiera que pueda escribir código front-end ahora puede construir una interfaz encima de eso y todos podemos competir ahora y podemos compartir infraestructura y podemos usar esta infraestructura como bloques de construcción para hacer proyectos cada vez mejores. Y esto ya está sucediendo. Esto no es teórico. Ya estamos viendo que esto comienza a tomar forma. Se están construyendo docenas de aplicaciones en diferentes intercambios descentralizados, DeFi. Estamos empezando a ver, por supuesto, que los NFT han estado en las noticias y cosas así. Creo que es más bien la evolución de esta idea y creo que comenzaremos a ver mejores y más casos de uso del mundo real en el futuro y eso es algo que me emociona. Entonces, ¿cuáles son las categorías reales de aplicaciones? Bueno, DeFi y monedas estables son interesantes porque permiten a cualquier persona que pueda escribir código construir aplicaciones financieras. Protocolos de infraestructura web descentralizada. Trabajo en un protocolo llamado el protocolo Graph que permite a los desarrolladores construir APIs de GraphQL sobre datos de blockchain. Voy a cubrir eso en un momento, en un momento. Juegos para ganar dinero. Entonces, Axie Infinity es un juego Web3. Han realizado más de $750 millones en un solo mes en transacciones.
6. Building DApps and Web Infrastructure
Han realizado más de $750 millones en transacciones. Organizaciones autónomas descentralizadas, arte digital, tokenización de activos físicos, propiedad de contenido transferible. Web3ificación de aplicaciones Web2. Mirror.xyz y Audius son ejemplos de plataformas que permiten a los usuarios monetizar su contenido. El enfoque se centra en la construcción de aplicaciones descentralizadas e infraestructura web. El protocolo Graph se utiliza para indexar y guardar datos en blockchains.
Han realizado más de $750 millones en un solo mes en transacciones. Es como Fortnite, excepto que el 100% del dinero va a la plataforma, el 95% del dinero se queda con los usuarios. Entonces, si invierto $1,000 en la plataforma, o $100, puedo esperar que cuando decida dejar de jugar ese juego, pueda recuperar parte de ese dinero. Y, de nuevo, eso tiene mucho más sentido para mí.
Organizaciones autónomas descentralizadas, arte digital, tokenización de activos físicos como bienes raíces, abriendo el mercado para que más personas participen, reduciendo la barrera de entrada para que las personas puedan invertir en mercados financieros de los que antes estaban excluidas. Y creo que esta idea de propiedad de contenido transferible, aplicando Web3ificación a Web2 es realmente interesante. Entonces, en este momento en YouTube, si subo un video, no tengo control sobre eso. Puedo perder mi contraseña o alguien puede hackear mi cuenta y todo puede desaparecer. Esto sucede muchas veces. Además, si quiero construir mi propio front-end sobre esto, tengo que usar sus APIs, y si las uso mal, puedo tener limitaciones, o incluso pueden no proporcionar la API que quiero. ¿Y si todos nuestros data estuvieran allí para que los usemos para siempre? No tenemos que pedirle a nadie. Y otras personas también pueden construir front-ends sobre esto, y cosas interesantes como esa. Entonces, creo que veremos, y ya hemos comenzado a ver la Web3ificación de aplicaciones Web2. Entonces, Mirror.xyz es una plataforma de blogs que permite a los usuarios hacer todo tipo de cosas financieras dentro de sus publicaciones de blog. Entonces, has visto a personas recaudar fondos, has visto a personas lanzar NFT dentro de sus publicaciones de blog. Recientemente, alguien hizo una publicación de blog donde querían crear una película. Recaudaron más de $3 millones directamente dentro de su publicación de blog. También dan tokens a los escritores. Entonces, si escribes, realmente ganas dinero. Eso es bastante interesante. Música, hay un programa llamado Audius, o una aplicación llamada Audius que es un Spotify descentralizado que permite no solo a los creadores de contenido ganar más dinero, sino también a ti como usuario, si creas una lista de reproducción que a la gente le gusta mucho, entonces realmente ganas dinero por eso. En lugar de que la plataforma, como Spotify, se quede con todo ese dinero, realmente participas y te pagan por ello, y eso me gusta. Entonces, dicho esto, queremos centrarnos en la construcción y en la infraestructura web. Echemos un vistazo a algunas de las piezas para construir una aplicación descentralizada. Entonces, el protocolo Graph es con lo que trabajo en Edge and Node. Cuando piensas en una database típica, está optimizada para indexar y consultar. Las blockchains no están optimizadas para consultas. Solo están optimizadas para indexar. Ni siquiera están realmente optimizadas para indexar. Solo están optimizadas para transacciones, para guardar data.
7. Infrastructure and Identity in Web 3
Los datos de la cadena de bloques se guardan en bloques con un enfoque en alta velocidad de transacción, baja latencia y bajos costos. El Protocolo Graph permite la indexación descentralizada con incentivos para la precisión de los datos. Ceramic Network es una red descentralizada para datos fuera de la cadena. Livepeer es una exitosa plataforma de transmisión en vivo descentralizada. IPFS y RWEV proporcionan almacenamiento de archivos descentralizado. Radical es una versión descentralizada de Git. Las aplicaciones Web 3 desafían las nociones tradicionales de identidad.
Entonces, los datos de la cadena de bloques se guardan en estos bloques a lo largo de días, semanas, meses, años, lo que sea. Y realmente, el enfoque es tener la mayor cantidad de transacciones por segundo, la latencia más baja, y los costos de transacción más bajos. Sin embargo, para consultar estos datos, típicamente solo puedes leer piezas individuales de información en un momento determinado. Si quieres obtener todos estos datos y realizar consultas, como las relacionales, y todas estas otras cosas que típicamente necesitas para una aplicación eficiente, debes indexar esos datos en la base de datos, y luego construir tu propio punto de conexión de API, rompiendo así los principios importantes de seguridad de la descentralización en primer lugar.
El Protocolo Graph es una red descentralizada que permite a los desarrolladores construir API de GraphQL que realizan esta indexación, pero la replican en toda la red, y también proporcionan incentivos para que tus datos sean correctos. Por lo tanto, si proporcionas datos incorrectos, te penalizan en forma de una penalización monetaria, por lo que estás perdiendo dinero. Esa es una pieza de infraestructura.
Ceramic Network es interesante. Es una red descentralizada, pero es para datos fuera de la cadena. Por lo tanto, no quieres almacenar todo, probablemente, en una cadena de bloques. Es posible que desees tener información que esté, por supuesto, disponible para guardar y leer de forma gratuita. Entonces, si quieres guardar algo y no quieres que se escriba con un costo de transacción, puedes usar algo como Ceramic Network.
Tienes transmisión de video. Livepeer es una plataforma de transmisión en vivo descentralizada muy exitosa. Es entre 10 y 50 veces o más menos costoso que usar algo como AWS. La razón por la que es menos costoso es que utiliza las computadoras de las personas que ya están en funcionamiento, haciendo otras cosas para descargar el procesamiento de videos a una red descentralizada de personas que deciden participar, y las personas que ejecutan estos nodos reciben un pago por su procesamiento. Pero es más eficiente porque hay más participación y utiliza la capacidad de cálculo, diría yo, de manera más eficiente de lo que podrías ver en una red centralizada.
Para el almacenamiento de archivos, como videos, imágenes, y cosas así, tienes IPFS y RWEV. También hay algunos otros. RWEV me parece extremadamente interesante porque te permite almacenar un archivo para siempre. Entonces, si quieres almacenar una imagen y quieres leerla dentro de 10 años y no quieres pagar ningún tipo de tarifa de alojamiento o algo así, entonces RWEV es un gran lugar para hacerlo. Actualmente estoy experimentando escribiendo una plataforma de blogs que guarda el texto en RWEV y almacena el ancla del ID para recuperar ese texto en una cadena de bloques como Solana, creando así un blog a prueba de censura para siempre del que nunca tengo que pagar alojamiento. Simplemente vive para siempre.
En cuanto a Git, Git en sí es descentralizado, pero GitHub no lo es. Entonces, Radical es un intento de construir una versión descentralizada de Git. Y de hecho, ya está ahí y funciona. Definitivamente deberías echarle un vistazo.
Entonces, creo que una de las diferencias más interesantes entre las aplicaciones web 2 y las aplicaciones web 3 es cómo pensamos en la identidad. La identidad para nosotros es en realidad nuestro, ya sabes, nombre, dirección de correo electrónico y número de teléfono y todas estas cosas que realmente no deberíamos estar entregando a todas estas personas. Las entregamos cientos y miles de veces a lo largo de nuestras vidas.
8. Identity and Blockchain for Web-3
Cuando trabajas con web-3, te identificas mediante una dirección y billeteras. Las billeteras te permiten crear una billetera utilizando una frase de recuperación, derivar claves privadas y públicas, y luego derivar tu dirección. Esto te permite transferir tu billetera a cualquier parte del mundo y firmar transacciones utilizando cifrado de clave pública. Iniciar sesión con Ethereum e IDX ofrece identidad soberana, lo que te permite controlar y atestar información en tu dirección. Para construir una aplicación, necesitas una cadena de bloques, y la Máquina Virtual Ethereum es una opción popular que se puede aplicar a múltiples cadenas de bloques.
¿Por qué no hay una mejor manera de identificarnos que sea anónima para la mayoría de los casos de uso? Y a veces todavía queremos darle a las personas nuestra dirección, ¿verdad? Porque pueden querer enviarnos algo de comercio electrónico. Así que, vamos a tener más control sobre eso.
Bueno, cuando trabajas con web-3, típicamente te identificarás mediante algo llamado dirección. Y tu identidad típicamente se deriva de esa dirección de varias formas diferentes. Y la forma en que haces eso es a través de, en este momento, algo llamado billeteras. Las billeteras tienen algunas cosas diferentes que puedes hacer con ellas, pero básicamente puedes crear una billetera ya sea obteniendo una frase de recuperación de uno de los proveedores de billeteras, ya sea directamente a través de la billetera o haciéndolo tú mismo utilizando un marco como web3.js o ethers.js.
Pero la idea con la billetera es esta. Se te proporciona una frase de recuperación. Luego puedes derivar matemáticamente una clave privada a partir de esa frase de recuperación. Luego puedes derivar matemáticamente una clave pública a partir de la clave privada. Y luego puedes derivar matemáticamente tu dirección a partir de esa clave pública, lo que significa que puedes transferir tu billetera a cualquier parte del mundo. Todo lo que necesitas es esa frase de recuperación. Así que cada vez que quieras iniciar sesión en cualquier parte del mundo, realmente no tienes que transferir información de inicio de sesión. Si tienes esa frase de recuperación, puedes ingresar y obtener tu información. Y, por lo tanto, puedes firmar transacciones e interpretar esas transacciones utilizando cifrado de clave pública. Y te permite hacer cosas realmente interesantes y con mucha menos complejidad, diría yo, para construir mecanismos de autenticación.
Y una de las cosas que me entusiasma mucho es esta idea de iniciar sesión con Ethereum que aprovecha esto. IDX es un protocolo de identidad. Entonces, digamos que quieres atestar alguna información en tu dirección sobre ti mismo. Puedes hacerlo de manera descentralizada y controlar toda esa información. Es como esta idea de identidad soberana. Puedes decidir qué poner allí y la aplicación típicamente no te pide esa información. Pedirá el puntero, y buscará en ese lugar, y luego decidirá, está bien, necesito esta información basada en lo que has almacenado allí. Y luego puedes volver y cambiar eso como quieras.
Y lo último que probablemente necesitarías para construir una aplicación es, por supuesto, la blockchain. Hay algunas en las que estoy interesado en este momento. Creo que la que la mayoría de las personas comienzan es la Máquina Virtual Ethereum, y la Máquina Virtual Ethereum es la implementación de Ethereum, pero también se puede aplicar a varias otras cadenas de bloques. Es como el React del desarrollo de cadenas de bloques. Si aprendes EVM, puedes escribir para Polygon, Optimism, Arbitrum, Ethereum, por supuesto, pero también Cello, Avalanche. Hay como una docena o más de cadenas de bloques populares de contratos inteligentes en las que puedes construir una vez que aprendas EVM.
9. Building a DApp with React and Hard Hat
Entonces, Web3 podría considerarse como la infraestructura típica a la que estamos acostumbrados, pero descentralizada, y ahora tenemos contratos inteligentes. Así que construyamos una dapp. Queremos tener nuestro marco de cliente, nuestros entornos de desarrollo de Ethereum, nuestra biblioteca de cliente de Ethereum y nuestra billetera. Uno de los proyectos más queridos en el ecosistema EVM es Hard Hat. Para esta demostración, vamos a usar React.js, Hard Hat, Ethers y MetaMask. Vamos a desarrollar una aplicación llamada ReactDApp.
Entonces, Web3 podría considerarse como la infraestructura típica a la que estamos acostumbrados, pero descentralizada, y ahora tenemos contratos inteligentes, por lo que todavía necesitamos todas estas cosas como identidad de cómputo, almacenamiento de datos, alojamiento web, pero ahora tenemos herramientas adicionales a nuestra disposición que nos permiten hacer más cosas.
Así que construyamos una dapp. Cuando comenzamos con la aplicación más básica que podríamos querer construir, solo debemos pensar en estas cosas principales. Queremos tener nuestro marco de cliente, que podría ser algo como React, queremos tener nuestros entornos de desarrollo de Ethereum, y hay un entorno de desarrollo realmente excelente que vamos a ver en un momento que hace todo lo que necesitas. También necesitamos nuestra biblioteca de cliente de Ethereum y nuestra billetera. La billetera es la identidad, la biblioteca de cliente de Ethereum podría considerarse como algo como Axios o Fetch o GraphQL Apollo. Esto envía solicitudes de API a través de nuestros puntos finales de PC a la red con la que estamos interactuando.
Creo que uno de los proyectos más queridos en el ecosistema EVM es Hard Hat. Hard Hat es realmente, realmente, realmente genial para comenzar rápidamente. Puedes configurar una red de blockchain completa localmente en solo unos segundos, y vamos a hacer eso. Para la pila que voy a usar hoy, vamos a usar React.js, Hard Hat, Ethers y MetaMask. En realidad, me gusta Next.js para la mayoría de mis aplicaciones, pero creo que para esta demostración es más simple resolverlo solo con React. Entonces, lo que vamos a hacer es desarrollar una aplicación. ¿Todos pueden ver eso bastante bien? Bien, genial. De acuerdo, tengo una aplicación llamada ReactDApp. Voy a abrir esto. Lo siento, ¿esta será una demostración larga o corta? ¿Cuánto tiempo más tenemos? ¿Cinco minutos? En realidad, ya te has pasado un poco de tiempo. ¿En serio? ¿Sí, es un espacio de 20 minutos, amigo? ¿Oh, es un espacio de 20 minutos? Sí, sí, sí. Puedo hacer esto en unos cinco minutos. ¿Crees que está bien? Um, creo que está bien. Solo recortaremos un poco el tiempo de preguntas y respuestas. De acuerdo, podemos recortar las preguntas y respuestas, está bien. Solo estaré afuera respondiendo preguntas. De acuerdo, lo siento por eso. Sí, no me di cuenta. Pensé que era un espacio de 30 minutos. Entonces, tenemos aquí una aplicación React. Veamos aquí. De acuerdo.
10. Setting up Hard Hat and Deploying the Contract
Estamos en una aplicación React y hemos agregado Hard Hat como nuestro entorno Ethereum. Después de configurar el proyecto, incluyendo la carpeta de contratos y la configuración de Hard Hat, compilamos nuestro contrato inteligente en ABIs. Luego creamos un nodo Ethereum con 20 cuentas, cada una con 10,000 ETH. Al importar la clave privada y desplegar el contrato en localhost, podemos interactuar con él. Nuestra aplicación está desplegada y podemos iniciarla ejecutando npm start. En app.js, importamos los componentes necesarios y establecemos la dirección del contrato para la interacción básica.
Ups, eso no es. De acuerdo, lo siento. En realidad, tenía, de acuerdo, aquí vamos. Entonces, de todos modos, estamos en una aplicación React. Acabo de ejecutar npx create React app. Tenemos nuestra estructura básica allí. Lo que quiero hacer es agregar Hard Hat, que es nuestro entorno Ethereum. Así que puedo ejecutar npx Hard Hat. Esto nos guiará a través de la configuración de Hard Hat. Así que voy a decir que quiero un proyecto de ejemplo básico, la raíz del proyecto y un archivo git ignore. Vamos a hacer eso. Y esto creará una carpeta de contratos con nuestros contratos inteligentes, una configuración de Hard Hat, que tiene la configuración de nuestro proyecto aquí. Y quiero establecer nuestra ruta, para compilar nuestro contrato inteligente en algo llamado ABIs. Podrías pensar en las ABIs como algo similar a una consulta GraphQL. Envía la información a través de la red para que podamos interactuar con nuestro punto final. Ahora que tenemos eso, podemos crear nuestro nodo Ethereum. Así que voy a ejecutar npx Hard Hat node. Esto ejecutará un nodo Ethereum, y nos dará 20 cuentas, cada una con 10,000 ETH. Así que voy a copiar esta clave privada, y vamos a ir a Chrome, y esta clave privada es como la clave privada que mencioné que puede ser tu identidad. Puedes obtenerla a partir de una frase de recuperación o puedes obtenerla de tu entorno local, supongo, cuando lo inicia. Entonces, lo que voy a hacer es importar la cuenta, pegar la clave privada, y ahora vemos que tenemos 10,000 ETH. Ahora quiero desplegar este contrato en localhost, y si voy aquí, deberíamos ver que esto está desplegado localmente. Muy bien, nuestra aplicación está desplegada. Ahora, vamos a ejecutar esto. Voy a decir npm start, y voy a copiar esta dirección, y casi hemos terminado. Solo voy a ir a app.js, y vamos a hacer nuestras importaciones. Establecemos nuestra dirección aquí, y vamos a interactuar con un contrato inteligente realmente básico actualizando, diría yo, un valor que te mostraré en un momento. Tenemos la dirección de nuestro contrato. Esto nos fue dado cuando desplegamos nuestros scripts. Así que solo con ejecutarlo, tenemos todo esto aquí.
11. Interacting with the Contract and Building the App
A continuación, creamos el estado inicial e interactuamos con un contrato básico. Importamos la API ethers.providers y accedemos a la variable window.ethereum. Con la dirección de implementación del contrato, llamamos a funciones dentro del contrato. Construimos la interfaz de usuario y la probamos obteniendo y estableciendo el saludo. Ahora podemos interactuar con nuestra billetera, pagar la transacción y ver el valor actualizado. En solo unos minutos, hemos construido una aplicación básica que interactúa con un contrato inteligente.
A continuación, quiero seguir adelante y crear un estado inicial. El contrato con el que estamos interactuando es bastante básico. Tenemos un saludo y esto debería ser muy familiar si has trabajado con TypeScript antes. Tenemos una variable de estado llamada saludo, tenemos un constructor donde establecemos el saludo y tenemos una función que devuelve el saludo y una función que actualiza el estado estableciendo el saludo. Así que podemos devolver el saludo o establecer el saludo. Entonces, vamos a abrir app.js nuevamente. Vamos a crear una función para conectar nuestras billeteras. Vamos a tener una función para obtener el saludo. Y voy a explicar rápidamente una de estas porque casi se nos acaba el tiempo, nos estamos pasando de tiempo, y tengo una función para establecer el saludo. Para darte una idea rápida de cómo interactuar con el contrato, importamos la API ethers.providers, supongo que podríamos decir de ethers.js, y podemos acceder a esta variable llamada window.ethereum, porque si tienes una billetera instalada en tu navegador, inyecta esta variable global llamada window.ethereum a la que puedes acceder. Luego obtenemos una referencia a nuestra implementación de contrato inteligente utilizando la dirección de nuestra implementación de contrato, la API que se creó cuando compilamos nuestro contrato inteligente en el proveedor que acabamos de crear, y ahora podemos llamar a funciones dentro de nuestro contrato. Así que aquí estamos llamando a contract.dot, cualquier función que queramos llamar. Y finalmente podemos construir nuestra interfaz de usuario. Y, ups, solo voy a hacerlo aquí. Y podemos probar esto. Nuestra interfaz de usuario no es bonita, pero simplemente funciona. Algo básico. Lo que puedo hacer ahora es hacer clic en obtener saludo y deberíamos poder obtener el saludo de la cadena, hola hard hat, y si voy aquí, puedes ver que se hizo esta llamada al contrato, y luego puedo establecer el saludo en hola react avanzado. Y esto debería, sí, esto debería ser interesante porque ahora deberíamos poder interactuar con nuestra billetera. Podemos elegir la dirección con la que queremos interactuar. Ahora podemos pagar esta transacción porque estamos escribiendo algo en la cadena. Podemos confirmarlo. Y ahora, si actualizo, el valor debería ser el valor actualizado. Hemos construido una aplicación realmente básica que interactúa con un contrato inteligente, y lo hicimos en, ¿qué, tres o cuatro minutos, o dos minutos, tal vez un minuto? Eso es todo. Gracias por ver mi charla. Si quieres profundizar, Scaffold ETH es un gran lugar para consultar. Anchor para Solana. Guía de desarrollo de Ethereum de principio a fin. Yo lo escribí. Échale un vistazo. Y eso es todo. Gracias. Muchas gracias. Gracias.
Comments