Construye aplicaciones Web3 con React

Hola a todos. Mi nombre es Shane. Soy el defensor del desarrollador en Decentology. Mi nombre de usuario en Twitter, todo está ahí abajo. Y hoy vamos a hablar sobre cómo puedes construir aplicaciones Web3 con React utilizando JavaScript, por lo que no se necesita código de contrato inteligente en absoluto. No es necesario aprender otro lenguaje de programación. Así que empecemos. Nuestra empresa, obviamente, ama a los desarrolladores. Por eso estamos aquí, y creamos productos que facilitan sus vidas. Nuestra misión, como mencioné antes, es incorporar a 10 millones de desarrolladores de Web2 a Web3. Así que estás en el lugar perfecto si eres nuevo en Web3. Y luego nuestro producto, el Hyperverse, que explicaré más adelante y utilizaré, acelera y simplifica tu viaje de desarrollo en blockchain. Así que verás exactamente cómo a lo largo de este taller.

Entonces, la agenda para hoy, primero compartiré una descripción general del Hyperverse. Así que solo una de cómo funciona el Hyperverse. Y luego entraré en algunos conceptos básicos de blockchain y criptografía. Y luego te mostraré una demostración de dos módulos de aplicaciones Web3 utilizando el Hyperverse. Así que empecemos de inmediato. Entonces, ¿qué es el Hyperverse? El Hyperverse es una plataforma de contratos inteligentes comunitaria, abierta y auditada, modular, para todas las principales blockchains. Así que eso es mucho, pero lo explicaré. En el mundo de Web3 actualmente, obviamente, si alguien quiere construir una aplicación, tiene que haber un aspecto de contrato inteligente y luego el aspecto de la interfaz de usuario. El aspecto del contrato inteligente es un juego completamente diferente al que tenemos en el mundo de Web2. Tienes que pensar en muchos otros casos de uso y casos límite, ya que ese código es inmutable una vez que está en la cadena. Así que eso es muy diferente al mundo de Web2. Y también tienes que aprender un nuevo lenguaje de programación completo. Una vez que se combinan esos dos aspectos, entonces tienes una aplicación Web3. Pero lo que estamos tratando de hacer es hacerlo súper simple para los desarrolladores de Web2 construir aplicaciones sin escribir una sola línea de código de contrato inteligente y utilizando solo JavaScript. Puedes acceder a otros contratos inteligentes utilizando solo JavaScript y llamar a estas funciones solo con JavaScript y crear tu aplicación Web3 de esa manera. En lugar de crear un contrato inteligente desde cero. Así que aquí tienes una descripción general del Hyperverse y cómo funciona la arquitectura.

Primero, cualquier desarrollador de contratos inteligentes puede crear lo que llamamos módulos inteligentes, que básicamente son contratos inteligentes de un solo propósito en la cadena. Luego, tenemos una comunidad de registradores que validará estos paquetes de módulos inteligentes. Estos paquetes de módulos inteligentes consisten en metadatos y ejemplos de cómo funciona la funcionalidad. Luego, tenemos una comunidad de auditores que leerá el código del contrato inteligente que se construyó en el módulo inteligente y apostará sus tokens como indicación de que este código ha sido verificado y no hay nada sospechoso o fraudulento en él. Actúa como una capa de seguro para los módulos inteligentes. Ahora, para los desarrolladores de Web 2.0, todo lo que tienen que hacer es utilizar JavaScript y nuestras bibliotecas para acceder a los módulos inteligentes y utilizarlos como deseen. Y si esto te suena familiar, es porque lo es. En el mundo de Web 2.0, si quieres construir una capa de pago, no la construirías desde cero, ¿verdad? Simplemente llamarías a la API de Stripe. Si quieres notificaciones, simplemente llamarías a Twilio. Con unas pocas líneas de código, tendrías una aplicación funcionando con ambas funcionalidades. Así que es muy similar a lo que estamos construyendo aquí. Simplemente estás conectando estos bloques de Lego, quiero esta funcionalidad de este módulo inteligente, esta funcionalidad de este módulo inteligente. Y puedes conectarlos literalmente como NPM para contratos inteligentes, y luego utilizar esas funcionalidades donde desees en tu aplicación Web 3.0. Así de fácil es. Aquí tienes un diagrama que muestra cómo, básicamente en el mundo de Web 3.0, no necesitas tener conocimientos de lenguaje de programación de contratos inteligentes. Simplemente puedes escribir las aplicaciones del lado del cliente utilizando solo HTML, CSS y JavaScript, y utilizar React o lo que desees para acceder a estos contratos inteligentes que fueron construidos por los desarrolladores de contratos inteligentes en diferentes lenguajes según la blockchain en la que se encuentren. Y puedes utilizar estas funcionalidades como desees en tu aplicación Web 3.0. Nuevamente, no se necesita conocimiento de contrato inteligente.

Ahora podemos adentrarnos en algunos conceptos básicos de cripto. Aquí tenemos la clave privada y la clave pública. Entonces, ¿cómo se deriva la clave privada? Básicamente, es un número aleatorio grande y luego se realiza un proceso matemático complicado del que no entraremos en detalles por simplicidad. Y luego tienes la clave privada. Ahora, lo principal a tener en cuenta aquí es que la clave privada no está destinada a ser compartida. Si alguien tiene acceso a tu clave privada, puede acceder a todo en tu billetera y hacer lo que quiera. Por lo tanto, nunca se debe compartir la clave privada. La clave pública se puede compartir con quien desees. Es para alguien que quiere transferirte algo o cualquier otra cosa, siempre puedes compartir tu clave pública. Y cómo se deriva es utilizando tu clave privada y luego realizando algunos cálculos matemáticos aún más complicados, y luego obtienes tu clave pública. Ahora que tenemos una idea general de las claves privadas y públicas, podemos comparar las cuentas de la cadena de bloques con las cuentas de usuario en Web 2.0. Obviamente, son muy diferentes y no se parecen a las cuentas de usuario en Web 2.0. Aquí, como expliqué anteriormente, las cuentas en la cadena de bloques se derivan de claves privadas y públicas que se generan al azar. Ahora que tenemos una comprensión de las claves públicas y privadas, podemos ver un escenario de ejemplo de firma y recepción de un mensaje. Aquí tenemos a Bob que crea su mensaje para Alice. Bob utiliza una aplicación para firmar su mensaje con su clave privada, lo que crea una firma y la envía a Alice. Es importante tener en cuenta

Una cosa interesante para ver sería la interacción real, la transacción real que podemos ver en el Explorador de Bloques. Así que podemos hacer eso. Todo lo que está sucediendo está en la red de prueba Rinkeby, que es simplemente la red de prueba para la Ethereum blockchain. Aquí verás la transacción real. Y EtherScan, lo que EtherScan puede hacer es que puedes buscar cualquier dirección, cualquier hash de transacción y buscar prácticamente cualquier cosa que desees. En este caso, vemos el hash de la transacción y luego vemos un montón de otra información como el valor del precio del gas, cuál es la dirección de la billetera, quién interactuó con la transacción, es decir, quién la envió, a dónde se dirige, que sería la dirección del contrato. Así que puedes ver que todo está funcionando aquí. Y luego simplemente se carga y luego mostrará cuando el estado se haya completado. Si volvemos aquí, podemos ver que está leyendo la información de la tribu a la que acabamos de unirnos. Vemos el nombre, la imagen, la descripción, todas esas cosas buenas. Ahora probablemente puedas adivinar que cuando haga clic en abandonar tribu, se actualizará la información en la blockchain. Así que nos pedirá una transacción. Si hago clic en abandonar tribu, verás que hacemos clic en confirmar y luego se procesará y nos llevará de vuelta a la página de inicio. Ahora otra cosa divertida que tenemos en este ejemplo de DAP es una cosa llamada batalla. Básicamente elige, ya sabes, dos tribus diferentes para hacer una batalla. Y luego elegirá al azar qué tribu gana. Así que podemos hacer eso. Y explicaré cómo funciona todo esto cuando profundicemos en el código. Así que podemos hacer clic en comenzar batalla. Y nos pedirá una transacción para confirmar. Hacemos clic en confirmar y luego comenzará la batalla. Una cosa divertida que me gusta hacer es, ya sabes, ustedes pueden escribir en el chat quién creen que ganará entre estos dos, y luego volveremos a esto y lo veremos después de analizar el código. Así que siéntanse libres de hacer sus suposiciones en el chat, Hila, seguro. Avísenme si pueden ver bien el código. Genial. Ok, primero, vamos a entrar en la misma carpeta que estaba allí antes, así que nos dirigimos a, ya sabes, las aplicaciones, Ethereum, y luego el ejemplo de DAP de tribus. Y luego el primer archivo que veremos es el archivo app.tsx. Aquí es donde prácticamente

Entonces, si vamos a la batalla, veremos un patrón muy similar. Verás que ahora se importa el gancho use random pick en lugar de use tribes, lo que te da acceso a la funcionalidad del contrato inteligente o, sí, la funcionalidad del contrato inteligente en JavaScript que te permite elegir aleatoriamente un número. Así que en este caso, solo estamos extrayendo números en términos de cuántas tribus hay y luego estamos mostrando o haciendo que el contrato inteligente elija un número aleatorio. Así que verás que aquí es donde estamos haciendo una funcionalidad muy similar a la que estábamos haciendo en use tribes. Estamos usando este use random pick y estamos extrayendo las funciones start random pick y get random pick. Y eso es todo lo que estamos usando para crear o obtener una selección aleatoria, y luego elegir entre una de las dos tribus para mostrar que ganaron. Así que sí, bastante simple, bastante fácil. Todo se hace en JavaScript y, ya sabes, no se necesita código de contrato inteligente en absoluto. Ahora pasaré al segundo módulo inteligente, que mostrará el ERC 721. Así que cómo crear, cómo acuñar y crear tu propio NFT. Así que podemos ir a ERC 721 y simplemente ejecutar yarn dev. Y luego podemos actualizar esto. Así que verás aquí, esto muestra básicamente todas las diferentes funcionalidades que puedes hacer dentro de este módulo inteligente, que es el módulo inteligente ERC 721. Así que puedes ver aquí, podemos crear nuestra propia instancia, que, ya sabes, expliqué antes, que sería crear tu propio token ERC 721. Y luego cambiarías la dirección en el archivo app.tsx para que lea desde tu dirección. Así que muestra el token que acabas de crear. Así que podemos ir realmente a la carpeta ERC 721, podemos ir a las páginas y luego a app.tsx. Así que verás que aquí es donde se muestra el ID del inquilino. Así que aquí es donde se está leyendo actualmente. Así que si fuéramos a obtener el saldo o incluso acuñar, podemos acuñar en una cuenta que está destinada, ya sabes, a la cuenta actual. Así que podemos hacer eso, o podemos simplemente obtener el saldo y ver si hay algún saldo. Así que ahí lo tienes, te dice que, ya sabes, no hay cero de estos tokens ERC 721 en esta dirección, en esta billetera. Así que

La creación es básicamente lo que viste cuando creé el NFT. Esencialmente, es crear el NFT y luego transferirlo a la dirección que ingresé allí. Entonces alguien está preguntando en el chat, los módulos inteligentes conectan tu código a los contratos inteligentes, ¿verdad? ¿Quién codificaría los módulos inteligentes? Los módulos inteligentes serían codificados por desarrolladores de contratos inteligentes. Entonces, si vuelvo aquí, ¿verdad?, estos módulos inteligentes son paquetes con contratos inteligentes construidos que son construidos por estos desarrolladores de contratos inteligentes. Y tenemos un paquete para eso también, que facilita a los desarrolladores de contratos inteligentes construir estos módulos inteligentes. Pero una vez que hayan construido esto y codificado el contrato inteligente para cualquier funcionalidad específica que tengan, también queremos confirmar y asegurarnos de que ese código sea seguro y que no haya fugas ni nada en el código para que los desarrolladores de JavaScript lo usen. Ahí es donde entran nuestros registradores, nuestra comunidad de registradores y nuestra comunidad de auditores, donde apostarán su propio token. Básicamente, poner el dinero donde está su boca y decir que este contrato inteligente, este módulo inteligente está listo para usar. Y eso actuaría como una capa de seguro en caso de que algo suceda.

¿Cualquier tecnología de contrato inteligente puede integrarse con nuestra aplicación JS React para usarla? ¿Cualquier tecnología de contrato inteligente... así que supongo que te refieres, en este caso, estos módulos inteligentes se conectarían a tu aplicación JavaScript o React. Entonces alguien puede, ya sabes, construir un contrato inteligente, al igual que, ya sabes, la funcionalidad de creación de NFT, eso sería un contrato inteligente, que luego se empaqueta con algún código y luego se empaqueta y se construye como un módulo inteligente para nuestra plataforma, y luego cualquier desarrollador de JavaScript puede, ya sabes, importar y usar estos módulos inteligentes. Y sí, sería para cualquiera de las cadenas que Hyperverse admite. ¿Hay algún paso adicional de implementación en producción para implementar una aplicación como esta? Entonces, actualmente todo está en la red de prueba, no en la red principal, pero obviamente eso llegará pronto y Sheely probablemente pueda responder mejor eso, ya que es el jefe de ingeniería de Decentology. No hay preguntas tontas, pero ¿qué fue el NFT que creaste? No entendí eso. Así que básicamente fue la creación de un token NFT, ¿verdad? Ingresé un nombre de token. Ingresé un símbolo de token y creé ese NFT, o ese token a partir de esa función. Entonces alguien está teniendo algunos errores en su repositorio después de ejecutar Yarn. Primero, me aseguraría de que cumplas con todos los requisitos del sistema y si eso es el caso, siempre puedes tomar una captura de pantalla de ese mensaje de error o cualquier cosa que tengas y publicarlo en nuestro Discord, y cualquier miembro de nuestro equipo estará encantado de ayudarte. Para usar todo eso, debes ejecutar una aplicación react como host y un nodo Ethereum. Así que no.

Sí, todo. Sí. Como ella acaba de decir, todo está hecho para ti con solo los paquetes en la red de prueba. Así que no, literalmente no hay nada más que necesites hacer. Permítanme dejar la última pantalla para que puedan ver todos los recursos nuevamente. Pero, ya saben, si quieren ver algunos excelentes artículos que hemos hecho, y que literalmente te llevan desde cero a construir, ya saben, solo la próxima gran aplicación. Y luego, ya saben, importar y conectar con Hyperverse, paso a paso, y luego también cómo, ya saben, hacer la función de conectar billetera, todo eso está en nuestras publicaciones en el blog. Así que tenemos un par de publicaciones en el blog que, ya saben, primero hacen la imagen aleatoria, hacen autenticación, hacen todo eso. Así que, ya saben, eso puede aclararlo. Algunas preguntas más también.

Genial. Así que esperaré aquí un par de minutos más por si hay más preguntas. Si no, entonces estaremos listos para continuar. ¿Tienes algún comentario sobre la transición de web dos a web tres? Supongo que específicamente en términos de qué. Obviamente, estamos tratando de hacerlo, ya saben, muy fácil para que alguien haga la transición de Web dos a web tres, por eso construimos esto, y puedes interactuar con todo esto con tu conocimiento previo de JavaScript y desarrollo web. Así que, ya saben, ese es nuestro objetivo principal, que más y más web dos construyan aplicaciones web dos.

Entonces sí, la última imagen en. Sí, sí. Así que si tienen algún problema después de hacer pull desde la rama principal, intenten cambiar a la rama de compilación de características, que es la actualizada en este momento. Y luego se fusionarán con la principal pronto. Así que si tienen algún problema en la principal, siéntanse libres de cambiar a esa rama. Enlace al repositorio. Así que todo está en la documentación. Si vamos a la documentación, pueden consultar todo aquí. Utilicen el monorepo de Hyperverse. Y luego vamos aquí y lo pegaré aquí también. Esto también explica una introducción a Hyperverse, ya saben qué es. Todas nuestras redes sociales, todo eso. Y luego, si hay algún desarrollador de contratos inteligentes en esta llamada, también hay una pestaña para crear su propio módulo inteligente y cómo funciona eso también. Así que todo eso también está ahí, así como para los desarrolladores de JavaScript para construir aplicaciones Web3.