Guía para desarrolladores frontend sobre Web3

Bienvenidos, todos, a mi charla, una guía para desarrolladores front-end sobre Web 3. Estoy realmente emocionado de estar aquí en la React Summit, hablando un poco sobre Web 3 y dándoles una introducción a ella. Aquí hay una agenda general de lo que vamos a cubrir hoy. Vamos a hablar sobre qué son los contratos inteligentes, cómo desarrollarlos, vamos a hablar sobre cómo conectarse a la blockchain, hablar sobre cosas como billeteras y puntos finales RPC. Lo veremos en un momento. Veremos cómo obtener datos de la blockchain, y algunas herramientas realmente geniales que puedes usar para construir, adentrándote en el agujero del conejo de Web3 como yo. Un poco sobre mí. Mi nombre es Rahat. Soy un defensor del desarrollador en Polygon. Anteriormente, también he sido desarrollador front-end y un ingeniero Solidity independiente. En general, soy un hacker independiente, un entusiasta de Web3, y estos son los lugares donde puedes encontrarme, Twitter, LinkedIn, GitHub, si alguna vez quieres ver algunos ejemplos de código de algunas de las cosas de las que hablamos durante esta charla.

Polygon, que es la empresa para la que trabajo, vamos a hablar específicamente sobre uno de nuestros productos, que es una blockchain de prueba de participación. Una de nuestras ofertas populares, esta es prácticamente nuestra oferta más popular. Es una blockchain con carbono negativo. Nos esforzamos por ser completamente positivos para el clima, utiliza aproximadamente un 99% menos de energía que Ethereum u otras cadenas de bloques. Es una excelente manera de comenzar a sumergirse en el espacio de Web3 sin tener que preocuparse tanto por el desperdicio y el consumo de energía que se produce con muchas de las otras cadenas de bloques que existen. Pero yendo al meollo de nuestra charla, los contratos inteligentes. Los contratos inteligentes son esencialmente el código de la blockchain. Es solo un archivo que contiene algo de código, algunas instrucciones sobre lo que tu aplicación o tu DApp, que es una aplicación descentralizada, debe hacer cuando se implementa en la blockchain. ¿Cómo escribimos contratos inteligentes? ¿Qué necesitamos saber sobre ellos? Los lenguajes en los que generalmente se escriben los contratos inteligentes incluyen Solidity, Rust, Viper o Go. Voy a hablar principalmente sobre las cadenas EVM durante esta charla. EVM significa Máquina Virtual Ethereum, lo que significa que todo lo que hablamos, todo el código que revisamos y repasamos, es compatible con la Ethereum blockchain. Nuestra blockchain, Polygon, también es compatible con Ethereum, por lo que todo lo que aprendas en ese aspecto es compatible uno a uno en Polygon. Aunque Solidity es generalmente el lenguaje de uso más popular, otro popular es Viper. Entonces, definitivamente, si te dedicas al desarrollo de contratos inteligentes, esos son algunos buenos lenguajes para conocer.

Ahora, supongamos que has escrito tu contrato inteligente, has escrito algo de código en Solidity, y quieres implementarlo en la blockchain. La implementación lleva algunos pasos diferentes. Primero, necesitas el bytecode. El bytecode es esencialmente código legible por máquina que es

Solidity es compilado desde Solidity. Solidity es un lenguaje de muy alto nivel, lo que significa que tiene el código, pero necesita ser compilado a algo que la máquina virtual Ethereum pueda leer. Y eso es lo que es este bytecode. Lo siguiente que necesitas saber es qué es el gas. El gas, no como el que usarías en las bombas, sino las tarifas de gas asociadas al desarrollo de la cadena de bloques, incluyen básicamente una tarifa que debes pagar para realizar transacciones con la cadena de bloques. Esta tarifa está compuesta por una tarifa base que puede quemarse, por lo que una cierta cantidad de monedas o tokens en esa cadena de bloques pueden quemarse durante esta transacción. Y luego una cierta cantidad de eso se entrega a lo que se llaman mineros o validadores. Y estos son personas que tienen nodos o computadoras que básicamente llevan un registro de la cadena de bloques, tienen copias de ella y validan transacciones para agregarlas a la cadena de bloques en general. A continuación, necesitas un script de implementación. Un script de implementación se puede obtener de entornos como HardHat y Truffle, que son herramientas para crear entornos para implementar, probar y crear tus contratos inteligentes en tu máquina local. Por último, necesitas un nodo de Ethereum. Los nodos de Ethereum son básicamente computadoras que tienen una copia de la cadena de bloques de Ethereum. Piensa en la cadena de bloques de Ethereum como esta gigantesca base de datos. El nodo alberga mucha de la información que está en esa cadena de bloques. Tienes todo en lo que se llama una red distribuida. Hay nodos y computadoras en todo el mundo que llevan un registro de las transacciones y juntos forman el consenso de cuál es la información de la cadena de bloques. Polygon funciona de manera muy similar en este caso. Tenemos varios nodos en todo el mundo y en lugar de utilizar mineros que minan estas transacciones, tenemos validadores que las validan. A continuación, hay servicios como Alchemy e Infera que pueden ayudarte a acceder a un nodo de Ethereum. No todos pueden ejecutar su propio nodo de Ethereum o nodo de Polygon en sus propias computadoras. Estos servicios te proporcionan puntos finales o puntos de llamada a procedimiento remoto, que te permiten interactuar con Ethereum y también te permiten interactuar con Polygon. Por último, hablemos de las interacciones. Las interacciones generalmente ocurren con una billetera. Las billeteras suelen estar dentro de tu navegador. Ahora mismo te voy a mostrar una billetera llamada MetaMask, que es una billetera en el navegador. Tengo un poco de Ethan aquí, pero puedo cambiar entre diferentes redes. Voy a cambiar a la red de prueba de Polygon solo para mostrar que esta es la red de Polygon. Puedes tener acceso a diferentes cadenas de bloques a través de esta billetera. Las billeteras interactúan utilizando un punto final RPC, por lo que tienen sus propios puntos finales incorporados de servicios como Inferior y Alchemy. Pero por ahora, vamos a desglosar algunas de estas interacciones. Te mostré un poco sobre las billeteras, que es MetaMask.

Aquí apareció una billetera. Lo que realmente hacen las billeteras es solicitar el consentimiento del usuario para acceder a su billetera y conectarse a la cadena de bloques. Muchas de las diferentes interacciones que necesitas hacer requieren a veces algún tipo de tarifa de transacción. Por lo general, esto implica alguna mutación que debe realizarse en la cadena de bloques, o a veces se requiere una firma de tu parte para demostrar tu identidad, para demostrar que eres tú quien está usando tu billetera. Todo esto se hace a través de una billetera como MetaMask o a través de billeteras de hardware como la que ves aquí de Ledger. Estas son excelentes cuando los usuarios necesitan realizar transacciones como la creación o compra de un NFT, transferir tokens, cualquier cosa que requiera interacción entre tú y la cadena de bloques o tú y otras personas que utilizan aplicaciones Web3. El otro tipo de interacción es solo de lectura, como mencionamos antes, los puntos finales RPC. Estos son puntos finales proporcionados por un proveedor de nodos. Son excelentes para dApps que solo tienen transacciones de solo lectura, como un explorador de bloques. Los exploradores de bloques te brindarán esencialmente una interfaz de usuario que actúa como un libro mayor completo para buscar transacciones, para buscar el historial de esas transacciones, para buscar cualquier transacción fallida que puedas tener. Entonces, cuando intentas averiguar qué está sucediendo, qué está pasando con ciertas llamadas en tu aplicación, puedes consultar los exploradores de bloques para ver qué sucedió durante esa llamada. ¿Por qué fue rechazada? ¿Por qué no se realizó? Estos son excelentes para depurar. Veamos un poco de código y veamos cómo interactuar realmente con la edición de la billetera de la cadena de bloques. En mi pantalla tengo una función JavaScript llamada handleWalletConnect. Esto generalmente se adjuntaría a algo como un botón. Entonces, esta es una función asíncrona, y lo que estoy haciendo aquí es sacar el objeto Ethereum de la ventana. Ahora, podrías estar pensando, Rahat, ¿a qué te refieres con objeto Ethereum en la ventana, verdad? Entonces, la razón por la que puedo sacar un objeto Ethereum de la ventana es porque estoy considerando que esta persona podría tener una billetera MetaMask como la que tengo configurada aquí. Mientras tengas una billetera inyectada en el navegador como esa, esa billetera también inyectará el objeto Ethereum en tu ventana. Y luego, solo un poco de plantilla para acceder a la cuenta asociada a esa billetera y luego acceder a la dirección y mostrarla. Si el objeto Ethereum no existe, simplemente mostraremos una alerta de que no se detectó ninguna billetera. La persona debería instalar MetaMask o algo así, y tú puedes proporcionar una alerta mejor que la que yo hice. Así que aquí tienes una demostración rápida de cómo funciona. En esta página, tengo este botón de conexión de billetera. Lo presiono y una vez que eso sucede, mi MetaMask aparece, presiono iniciar sesión y muestra mi dirección en la página. Esto es básicamente la mitad de lo que usarías para algo como iniciar sesión con Ethereum, de lo cual hablaré en un momento. Ahora voy a hablar sobre otro patrón común de conexión de billetera. Esto se hace bastante en muchas aplicaciones descentralizadas donde tomamos esa función handleWalletConnect, no me molesté en volver a escribirla aquí, y la colocamos dentro de un useEffect y la llamamos de inmediato, específicamente al montar la aplicación real. Por favor, no hagas esto si alguna vez te adentras en el espacio Web3. Lo que esto hace es, básicamente, tan pronto como llego al sitio web, el sitio web solicitará automáticamente que conecte mi billetera. Esto es algo así como la misma situación de cuando vas a un sitio web y comienza a reproducirse música o un video se reproduce automáticamente. Nadie realmente quiere que eso suceda de inmediato. Esta es una mala práctica de seguridad y es algo que simplemente conduce a una mala experiencia de usuario en general en tu

, porque elimina la capacidad del usuario de dar su consentimiento. Una de las cosas principales que hablamos sobre las billeteras es que esta es la puerta de entrada para que un usuario consienta en usar la blockchain para realizar ciertas transacciones. Esto elimina esa capacidad. Y algunas personas podrían decir, que aún puedes cancelar la transacción, pero no, debes detenerte, porque si tu billetera aparece de inmediato, no tienes la oportunidad de pasar por la aplicación y comprender qué está sucediendo. Así que mencioné esto un poco, solo un par de diapositivas atrás, yendo más allá de conectar la billetera y usar algo llamado iniciar sesión con Ethereum. Una de mis cosas favoritas que han surgido en el espacio Web 3 es esta verdadera experiencia de inicio de sesión único, donde puedes tomar una billetera, conectarla, validar tu dirección, como vimos antes, y luego desde allí hacer algo como conectarte a un servidor como lo harías normalmente para autenticación, para realmente involucrar a alguien , crear un perfil de usuario para ellos en tu Dapp o aplicación. Y lo genial aquí es que ese perfil de usuario puede viajar con ellos a cualquier lugar. No necesitan crear un nuevo correo electrónico o contraseña cada vez que van a una nueva aplicación. No necesitan confiar sus credenciales a un servicio como iniciar sesión con Google o iniciar sesión con Facebook. Todo es realmente propiedad de ellos. Ese perfil de usuario les pertenece a través de esta billetera. Y la forma en que funciona esa billetera es que te brinda acceso a través de un par clave-valor, una dirección pública y una dirección privada. La dirección pública es la que mostramos en la página. Y luego hay una dirección privada a la que solo ellos tienen acceso y que les permite acceder a la blockchain y les permite aprobar transacciones, ver sus activos y acceder al espacio web tres en general . Entonces hablamos del lado de la billetera, de hacer interacciones, como interacciones reales con el usuario, pero ¿cómo interactuamos con la blockchain, RPC y Point Edition? En este caso, es posible que solo queramos realizar transacciones de solo lectura, tal vez queramos crear nuestro propio explorador de bloques, tal vez queramos simplemente mostrar algunos datos en forma de gráficos, paneles de control, lo que sea. Aquí tengo este proveedor. Y este proveedor es algo que nos brinda el paquete ethers, que es un paquete popular de JavaScript que puedes usar en tus front-end. Y todo lo que realmente tienes que hacer es usar este método e ingresar un punto final RPC. Estos puntos finales RPC son básicamente como una URL, un punto final HTTP, que te proporcionan servicios como los que mencioné anteriormente de alchemy y Azure. Y esto es como un conjunto de información que puedes obtener del punto final RPC. Entonces, aquí, lo que estoy haciendo es obtener la información sobre el último bloque en la blockchain, ¿y qué significa eso? ¿Qué es el último bloque? Entonces, los datos de la blockchain se dividen en estos bloques, todos tienen algún tipo de número asociado a ellos, una marca de tiempo, diferentes valores hash, y esto es lo que alberga todos los datos en este bloque. Entonces, en este bloque específico, hay varias transacciones. Solo se muestra una aquí, esta es una marca de tiempo y solo alguna información sobre el minero que realmente validó esto, así como información adicional como el gas que se utilizó. Y esta es la información que puedes usar para construir algunos de esos paneles de control, parte de esa información. Te mostraré una demostración rápida de algo que construí usando ese conjunto de datos. Esto es solo una lista de los últimos 10 bloques en la blockchain de Polygon , incluido su número de bloque, su marca de tiempo y el número de transacciones en cada uno de esos bloques. Puedes profundizar un poco más en esos datos JSON que se devuelven en algunas de estas llamadas, pero esto es solo una implementación muy básica de cómo podría comenzar un explorador de bloques. Muy bien. Pero, ¿cómo obtenemos realmente datos de los contratos inteligentes, verdad? Seguro, tal vez alguien escribió algún desarrollador de contratos inteligentes escribió un contrato para nosotros y eso alberga alguna información. ¿Cómo accedemos a esa información? Necesitamos un mapa. Entonces, el código de Solidity, como mencioné antes, se compila en bytecode.

Necesitamos instrucciones sobre cómo recorrer realmente ese bytecode. Entonces, lo que necesitamos es una ABI, o una Interfaz Binaria de Aplicación. Esto generalmente es exportado por un desarrollador de Solidity y pasado a un desarrollador de front-end. Y esto es solo un objeto JSON con instrucciones sobre los diferentes tipos de funciones que están disponibles en un contrato inteligente, qué entrada necesitan algunas de esas funciones y los tipos de salidas que te proporcionan. Esto permitirá que JavaScript use ciertas bibliotecas para recorrer la cadena de bloques y obtener la información adecuada que necesita. En lugar de hacer una solicitud HTTP, se utiliza esta ABI, junto con una función proporcionada por un paquete como ethers, para interactuar realmente con la cadena de bloques en sí. ¿Cómo funciona esto? Primero, importarías las dependencias. Esto se hace asumiendo que estás trabajando en una aplicación React. Entonces importarías ethers de la biblioteca ethers y una ABI que algún desarrollador de contratos inteligentes te haya proporcionado. Este es un ejemplo de un contrato que escribí, donde se muestra una pequeña batalla de Pokémon entre dos Pokémon. Lo siguiente que necesitas es la dirección del contrato desplegado. Entonces, cada contrato desplegado, al igual que tu billetera, tiene su propia dirección. Así que necesitamos obtener la dirección para ver dónde en la cadena de bloques vive ese contrato. Suministramos la ABI, la dirección del contrato, así como el objeto Ethereum a este método de contrato proporcionado por ethers. Una vez que suministramos todo eso, luego obtenemos acceso a las funciones reales enumeradas dentro del archivo ABI. Una de esas funciones aquí es esta funcionalidad de ataque, donde nuestro Pokémon va a atacar a los demás, y luego se restarán ciertas cantidades de puntos de golpe o HP. Veamos eso en acción. Entonces, lo que está sucediendo aquí es que decidí, okay, necesito atacar a este Pokémon. Presioné usar lanzallamas. Mi MetaMask va a aparecer. Voy a pagar una pequeña cantidad de gas para asegurarme de que esta transacción se realice en la cadena de bloques, y una vez que se complete, todos los puntos de golpe de los dos Pokémon disminuirán, y todo esto se registra en la cadena de bloques en sí. Entonces, las cosas principales que debes entender aquí son que el desarrollo front-end en web 3 sigue siendo el mismo. La interfaz de usuario todavía se construye utilizando todas las mismas prácticas. Como desarrollador front-end, no necesitas conocer las complejidades profundas de cómo construir tus propios contratos inteligentes. Solo necesitas saber cómo interactuar con ellos, como hemos hablado. Pasas de un cambio de mentalidad de hacer solicitudes HTTP a usar código ABI y bibliotecas para llamar al contrato inteligente, y la otra cosa principal a recordar es que las mutaciones tienen un costo. Las transacciones de solo lectura son gratuitas. Las mutaciones siempre tendrán un costo. Algunas herramientas de desarrollo front-end en web 3 en las que definitivamente puedes profundizar y aprender más son ethers y la biblioteca web 3, así como la biblioteca WAGMI. La biblioteca WAGMI proporciona una

Hay muchos hooks de React para conectarse y realizar transacciones fácilmente con la cadena de bloques. Web3UI es una biblioteca impresionante que te proporciona un montón de componentes de React que también puedes utilizar, así como diferentes exploradores de bloques como PolygonScan si estás interactuando con un contrato inteligente en la red Polygon o Etherscan si estás interactuando con un contrato inteligente en la red Ethereum. Estas son todas herramientas de las que también hablaré durante mi masterclass aquí en React Summit. Así que si quieres aprender más sobre eso, profundizaremos en mayor detalle. En general, si quieres aprender más y descubrir cómo construir en la cadena de bloques, cómo construir en Polygon, tenemos muchos recursos en academy.polygon technology. Hay enfoques gamificados para aprender y construir tus propias Dapps. También quiero mencionar rápidamente Polygon Village. Si decides aprender sobre Web3, aprender cómo desarrollar en él y comenzar a desarrollar tus propios proyectos, ofrecemos subvenciones sin restricciones. Subvenciones para desarrollar tus proyectos. Y si en algún momento quieres ingresar al ecosistema de Web3, también tenemos un tablero de empleo para el ecosistema. Esto no solo se aplica a trabajos en Polygon, sino a todas las personas en el ecosistema de Polygon. Para concluir, soy Rahat. Nuevamente, soy un defensor del desarrollador en Polygon. Estos son solo algunos lugares donde puedes encontrarme. Es genial que todos se sumerjan un poco en Web3 conmigo. Y estoy muy emocionado de verlos posiblemente en mi masterclass también. Gracias.