Construye aplicaciones Web3 con Javascript

Hola a todos. Soy Shane, y soy el defensor del desarrollador de Decentology. Y hoy, vamos a hablar sobre cómo puedes construir aplicaciones Web3 solo con JavaScript. Así que, no se necesita ningún conocimiento de código de contrato inteligente en absoluto. Y eso es exactamente lo que mostraré después de esta presentación de PowerPoint. Así que empecemos.

Primero, nuestra empresa, obviamente ama a los desarrolladores. Por lo tanto, creamos productos que simplifican sus vidas, que es exactamente lo que les mostraré hoy, que será Hyperverse. Así que nuestra misión es incorporar a 10 millones de desarrolladores de Web2 a Web3. Así que obviamente, ustedes serán parte de esa misión. Y luego nuestro producto, del cual hablaré aún más después, es Hyperverse, que acelera y simplifica tu viaje de desarrollo de blockchain. Así que no tienes que preocuparte por todas las cosas específicas de la blockchain.

Nuestra agenda para hoy, hablaré un poco sobre Hyperverse y luego entraré en algunos conceptos básicos de blockchain y cripto, y luego comenzaré a construir algunas dApps de Hyperverse. Mostraré dos ejemplos. Uno será ERC-721, que es esencialmente un NFT. Así es cómo puedes crear un sitio de acuñación de NFT usando solo JavaScript. Y luego Tribes será el otro ejemplo, del cual también hablaré. Así que empecemos.

Entonces, ¿qué es Hyperverse? Hyperverse es una colección modular, abierta y auditada de contratos inteligentes en cadena para todas las principales blockchains. Sé que es un texto largo y confuso, pero lo explicaré. Así que, ya sabes, hoy en el mundo de web3, si quieres construir una aplicación, necesitas construir una capa de contrato inteligente y también la aplicación del lado del cliente. Ahora, obviamente, para los contratos inteligentes, tendrías que aprender un lenguaje de programación completamente diferente, ya sea Solidity, Cadence, cualquier blockchain para la que quieras construir. Pero también es un paradigma completamente diferente al mundo de Web2, ¿verdad? Tienes que pensar en el código como inmutable. Tienes que pensar en los costos de almacenamiento, todas estas cosas que son completamente diferentes al mundo de Web2. Así que queríamos hacerlo súper simple para los desarrolladores de Web2 construir aplicaciones sin escribir ni una sola línea de código de contrato inteligente y escribir con algo con lo que están familiarizados, que sería JavaScript.

Aquí hay una arquitectura de Hyperverse. Así que vamos a dividirlo en tres secciones. Primero, tendríamos desarrolladores de contratos inteligentes que construirían lo que llamamos módulos inteligentes. Y básicamente, estos módulos inteligentes son solo contratos en cadena empaquetados con un propósito único. Por lo tanto, están destinados a funcionalidades individuales en lugar de tener un contrato inteligente completo que realice múltiples funcionalidades diferentes. Y una vez que el desarrollador de contratos inteligentes ha construido estos módulos inteligentes, se enviarían a nuestra comunidad de registradores, donde realmente validarían el módulo inteligente, asegurándose de que tenga la documentación de metadatos adecuada, ejemplos, etc. Y una vez validado, se enviaría a nuestra comunidad de auditores. Aquí es donde los auditores realmente revisarían el código del contrato inteligente y se asegurarían de que, ya sabes, no haya nada extraño en él. Asegurarse de que confíen en este código y realmente apostarían sus tokens para confirmar que, hey, esto es confiable. Así que puedes pensar en el lado de JavaScript, ya sabes, si están revisando varios módulos inteligentes diferentes, ven un módulo inteligente que realiza una funcionalidad similar a otro. Uno de los módulos inteligentes tiene, ya sabes, 10, 20, 30 auditores que realmente han apostado tokens en ellos. Obviamente, ese sería, ya sabes, más confiable y usarían ese módulo inteligente. Así que esta apuesta también actúa como una capa de seguro, en caso de que ocurra algo. Ahora, para la mayoría de ustedes, los desarrolladores de Web2 realmente solo usarían nuestras bibliotecas de JavaScript preconstruidas para construir estas aplicaciones Web3 simplemente conectando sus módulos inteligentes, como bloques de Lego, ¿verdad? Entonces, eliges qué funcionalidades quieres y las colocas en tu aplicación Web3 y las construyes como desees. Y, ya sabes, si esto te suena familiar, es porque lo es, ¿verdad? Así que si tienes una capa de pago en el mundo de Web2, no la construirías desde cero obviamente. Simplemente usarías Stripe. Entonces usarías esa funcionalidad, la integrarías en tu aplicación Web3 y la usarías. Y si necesitas notificaciones, usarías Twilio. Tomarías esa API, la usarías en tu aplicación como desees. Así que esto es muy similar a lo que está sucediendo aquí. Tendrías varios módulos inteligentes diferentes, todos con diferentes funcionalidades que puedes usar en toda tu aplicación para construir, conectar y actualizar cosas en la blockchain. Entonces, lo que estamos construyendo es básicamente el NPM para un contrato inteligente. Así de fácil es. Y si te preguntas ahora, o si te preguntabas antes, ya sabes, si tengo las habilidades adecuadas para construir, ya sabes, aplicaciones Web3, estoy aquí para decirte que sí las tienes. Absolutamente las tienes. Todo lo que realmente necesitas saber es HTML, CSS y JavaScript con Hyperverse.

Puedes aprovechar los módulos inteligentes que ya han sido construidos por los desarrolladores de contratos inteligentes y utilizarlos como desees, y construir la aplicación del lado del cliente con varias características diferentes utilizando todos los módulos inteligentes.

Así que ahora vamos a adentrarnos en algunos conceptos básicos de blockchain. Aquí tenemos un diagrama de la arquitectura web2. Tenemos a alguien intentando acceder a un sitio web en su dispositivo móvil o de escritorio, lo cual enviaría una solicitud al servidor web, que luego se enviaría al servidor de la API, que luego se enviaría al servidor de base de datos. Una vez que se ha accedido a estos datos, se enviarían de vuelta al servidor de la API, al servidor web y luego aparecerían en la página del usuario, ya sea en su dispositivo móvil o de escritorio o cualquier otro.

Ahora veamos la aplicación web tres. Ahora tenemos a un usuario intentando acceder a una aplicación descentralizada en su dispositivo móvil o de escritorio que fue construida utilizando HTML, JavaScript y CSS. Entonces lo que sucede es que esa solicitud se envía a una computadora o un nodo en la blockchain. Y una vez que se ha accedido a esos datos, aparecerían en el dispositivo móvil o de escritorio del usuario.

Ahora tenemos una descripción general de alto nivel de la arquitectura entre Web 2 y Web 3. Podemos adentrarnos en el flujo de trabajo de la blockchain. Aquí tenemos un diagrama donde alguien solicita una transacción, que luego se transmite a una red que consiste en computadoras, que también se conocen como nodos. Y una vez que estos nodos validan la transacción, se enviaría a un bloque de datos junto con las transacciones de otros usuarios también. Y luego ese bloque se adjuntaría a la blockchain donde permanece para siempre. Es permanente y no se puede cambiar. Y ahí es cuando se completa la transacción.

Ahora adentrémonos en algunos conceptos básicos de cripto. Y lo primero que debemos revisar son las claves públicas y privadas. La clave privada se deriva utilizando un número aleatorio grande con algunas cosas locas y sofisticadas de las que no entraremos en detalles por simplicidad. Pero lo importante es que las claves privadas no están destinadas a ser compartidas. Aquí es donde tu clave privada puede ser explotada por alguien o accidentalmente firmas una transacción, lo que muestra tu clave privada o cualquier otra cosa. Aquí es donde los hackers pueden aprovecharse y básicamente hacer lo que quieran con tu billetera si tienen tu clave privada. Por lo tanto, es muy importante que no compartas una clave privada.

Ahora, cómo se deriva tu clave pública es utilizando una clave privada con algunas matemáticas aún más sofisticadas. Pero es importante tener en cuenta que tu clave pública se puede compartir con cualquier persona si así lo deseas. Y también es importante saber que, obviamente, las cuentas de blockchain son muy diferentes a las cuentas de usuario en Web2. Entonces puedes ver aquí que, ya sabes, las cuentas de blockchain se derivan de tus claves públicas y privadas que se generan al azar. Aquí hay un diagrama rápido de Bob y Alice que están, ya sabes, iniciando sesión y recibiendo mensajes. Así que esto es como un diagrama de flujo. Aquí tenemos a Bob que crea su mensaje para Alice. Puedes ver que Bob usa una aplicación para firmar su mensaje con su clave privada, lo que crea una firma y la envía a Alice. Es importante saber que es la firma la que se envía a Alice. No son, ya sabes, sus claves privadas las que se envían a Alice. Entonces, una vez que Alice recibe el mensaje firmado de Bob, Alice puede usar la aplicación para verificar que este mensaje realmente pertenece a Bob usando su clave pública. Así que aquí es donde Bob puede enviarle a Alice, ya sabes, su clave pública, y luego Alice puede ingresar la clave pública y decir: `OK, este mensaje realmente pertenece a Bob`. Ahora que hemos tenido una descripción general rápida de firmar y recibir mensajes, es hora de hablar sobre la herramienta que realmente hace todo esto, que son las billeteras. Es importante saber que las billeteras solo están destinadas a dos cosas. Es un almacenamiento seguro para tus claves privadas y una herramienta para firmar transacciones. Entonces, nuevamente, esas son las únicas dos razones por las que estaría la billetera. No hay dinero en la billetera. No hay cripto en la billetera. Solo está ahí por esas dos razones, almacenamiento seguro para tus claves privadas y herramienta para firmar transacciones.

Ahora que estamos hablando de transacciones, podemos hablar sobre las tarifas de blockchain, que a menudo se llaman gas. Hablaré sobre los tres conceptos principales, que son las propias tarifas de transacción, el precio del gas y cómo fluctúa, y luego la velocidad de la transacción. Entonces, la tarifa de transacción en sí, a menudo llamada gas, puedes especificar la cantidad que deseas, pero las transacciones con muy poco gas es probable que sean ignoradas. Y luego verás cómo la velocidad también difiere en el precio del gas en sí. Y luego el precio del gas en sí, probablemente te preguntarás cómo se determina el precio del gas. Es muy dinámico y varía según la cantidad de personas que están enviando transacciones en ese momento específico. Y luego la velocidad de la transacción en sí, las transacciones con tarifas de gas más altas es probable que se procesen más rápido que aquellas con tarifas más bajas. Entonces, obviamente, si es demasiado bajo, podría ser ignorado, como mencioné anteriormente.

Ahora podemos hablar un poco sobre los tokens fungibles versus los tokens no fungibles.

Entonces, esto obviamente mostrará el ejemplo de ERC-721, que sería un token no fungible. Así que esta será una descripción general rápida de cuál es la diferencia entre los tokens fungibles y no fungibles. Los tokens fungibles son intercambiables. Por ejemplo, si le diera un billete de un dólar a cualquiera de ustedes y ustedes me dieran un billete de un dólar a cambio, no necesariamente tendría que ser el mismo billete de un dólar que les di. Un dólar sigue siendo un dólar. Al igual que un Bitcoin sigue siendo un Bitcoin, sin importar cómo lo obtuve o de dónde lo obtuve. Todo es intercambiable. Pero los tokens no fungibles no son intercambiables. Cosas como tu automóvil, por ejemplo, tienen un número de identificación único, partes únicas que tienen una historia única. Todo en él es único. No le darías un automóvil aleatorio y esperarías que tenga el mismo valor. ¿Verdad? Querrías que te devuelvan exactamente el mismo automóvil. Así que todos son únicos.

Primero, vamos a construir aplicaciones Web3 y vamos a configurar el entorno. Asegúrate de tener los requisitos del sistema adecuados, VS code o cualquier otro IDE para editar JavaScript instalado, obtén NodeJS y yarn. Genial. Ahora que tenemos dos caminos diferentes, podemos empezar desde cero y crear una aplicación Next.js recién construida e importar algunos módulos de Hyperverse y construirlo de esa manera. O usar nuestro monorepo de Hyperverse que incluye todos nuestros ejemplos de dApps, todos nuestros paquetes, y simplemente ejecutar yarn dev para comenzar. Es mucho más simple y fácil de usar, así que eso es lo que estaré demostrando hoy. Así que vamos a hacer clic en eso.

Y verás aquí todos los comandos. Puedes clonarlo y luego ir al primer ejemplo de dApp que te mostraré, que es tribus. Entonces puedes ver aquí que estamos yendo a la carpeta de Ethereum ya que también estaré demostrando la blockchain de Ethereum hoy, pero también tenemos soporte para otras blockchains como flow, Algorand, Metis, entre otras. Así que vamos a ir a tribus, y luego todo lo que necesitarías hacer es ejecutar yarn para instalar todas las dependencias y luego ejecutar yarn dev, y tendrás la aplicación funcionando, que es exactamente lo que tengo aquí. Así que puedes ver que esta sería la página de inicio del ejemplo de dApp de tribus que utiliza el módulo inteligente de tribus. Entonces, básicamente, lo que esta dApp te permite hacer es que los usuarios pueden venir, conectar su billetera y unirse, abandonar o crear tribus de cualquier cosa, desde equipos hasta personajes de anime, cualquier cosa que una comunidad de personas pueda unirse y tener su propia comunidad, o incluso si estás construyendo tu propia aplicación y quieres crear la tuya para unirte. Entonces, lo que un usuario haría cuando ingresa por primera vez es conectar su billetera. En este caso, estamos en Ethereum y estamos usando Metamask. Entonces, verás que cuando hago clic en Conectar Billetera, aparecerá nuestro modal de billetera, que en realidad utiliza algo llamado RainbowKit en el backend, que hace toda esta interfaz de usuario, esta bonita interfaz de usuario y todo para ti. Así que podemos hacer clic en Metamask, ya que esa es la billetera que tenemos. Y todo lo que hace es, ya sabes, tengo varias cuentas en mis billeteras de Metamask, solo está preguntando, ya sabes, qué cuenta. Así que vamos a hacer clic en la cuenta de Decentology, y luego solo está pidiendo conectar al sitio. Así que esto es obviamente como autenticación en el mundo Web2, vamos a hacer clic en Conectar. Y luego verás que nuestra dirección de billetera aparece aquí, así como nuestro saldo. Ahora, obviamente, no tengo realmente 11 ETH, esto es todo en la red de prueba, por lo que todo es igual que en la red principal de Ethereum, pero, ya sabes, la versión de pruebas básicamente. Todo esto es ETH falso, básicamente. Así que verás aquí que también ha aparecido el botón Unirse a una Tribu. Entonces, lo que esto hará es que cuando hagamos clic en él, en realidad estará obteniendo, estará leyendo tribus del contrato inteligente, de la blockchain y mostrándote qué tribus están disponibles para unirse. Así que vamos a hacer clic en eso. Unirse a una Tribu. Se procesará y mostrará todas las tribus disponibles para unirse. Es importante tener en cuenta que cuando obtienes o lees información de la blockchain, eso no tiene ningún costo. Cuando realmente quieres actualizar o poner información en la blockchain, entonces hay una transacción involucrada. Por lo tanto, tendría un costo. Eso es exactamente lo que veremos aquí. Si hago clic en cualquiera de estas para unirme, obviamente querrá actualizar la información del usuario en la blockchain y decir que este usuario ahora se ha unido a la tribu del Dragón. Entonces, eso costará una transacción. Verás que aparece la extensión de billetera Metamask. Así que vamos a hacer clic en Dragón, y verás que aparece la extensión de billetera Metamask pidiéndonos confirmar, está el costo del gas, las tarifas, y vamos a hacer clic en confirmar. Y luego se procesará y actualizará esta información en la blockchain. Y es importante saber que todas estas cosas se hacen simplemente utilizando funciones de JavaScript. Así que luego profundizaré en el código también después de esto. Así que puedes ver aquí que ahora muestra la información de la tribu a la que acabamos de unirnos. Muestra el nombre, la imagen, la descripción y todas esas cosas. Por lo que puedes suponer que cuando haga clic en abandonar tribu, también tendrá que actualizar la información nuevamente. Por lo que pedirá confirmación y procesamiento de la transacción también. Así que vamos a hacer clic en abandonar tribu, verás que aparece, podemos hacer clic en confirmar, y luego se procesará y se llevará a cabo.

Y luego volverá a la página de inicio. Pero algo rápido para ver sería la interacción real con el contrato que acabamos de hacer la transacción de abandonar una tribu. Así que puedes ver esto en el explorador de bloques. Básicamente, lo que hace Ether scan es que puedes ver todo y cualquier cosa en la red de Ethereum, puedes buscar por la dirección de billetera de alguien, ver su historial de transacciones, lo que sea. Y también una transacción. Así que este sería el hash de transacción único, que puedes copiar y pegar y luego buscar la transacción si quieres. Entonces te muestra desde qué dirección de billetera viene, hacia dónde va, así que puedes hacer clic en esto para ver con qué contrato interactuó realmente. Y puedes ver que también hay múltiples transacciones diferentes que han ocurrido con este contrato. Así que eso es bastante genial. Y luego podemos volver y podrás ver, ya sabes, cuándo se ha completado esta transacción y demás. Así que genial. Vamos a volver. Y ahora que estamos en la página de inicio, podemos ver el código ahora. Así que vamos a entrar en Ethereum y luego Tribus, y luego vamos a entrar en la carpeta de origen, Páginas, y luego vamos a ver app.tsx. Así es como la aplicación se conecta a Hyperverse para que podamos usar estos módulos e interactuar con ellos. Así que puedes ver aquí que tenemos estos módulos de Hyperverse que estamos importando, ya sea algunas cosas específicas de blockchain, también inicializando Hyperverse y luego el proveedor de Hyperverse, que envolverá con todos sus componentes anidados para que toda la aplicación ahora tenga acceso a Hyperverse. Y luego también verás aquí, que estamos importando el módulo inteligente de Tribus. Entonces, el módulo inteligente es lo que los desarrolladores de contratos inteligentes crearían y empaquetarían en los módulos inteligentes. Y todo lo que estamos haciendo es importar ese módulo inteligente aquí para usarlo en toda nuestra aplicación. Así que aquí es cuando estamos inicializando realmente Hyperverse. Así que puedes ver aquí. Muy simple. Quiero decir, ya sabes, pregunté qué blockchain es. En este caso, estamos usando Ethereum. Pero si quisieras usar, ya sabes, Flow, Algorand, Metas, algo así, simplemente cambiarías esto a Flow, cambiarías esto a Flow, y luego tendrías acceso a Flow. Y puedes, ya sabes, simplemente poner eso aquí también. Y luego la red, ya que estamos en la red de prueba, eso es simplemente network.testnet. Y luego aquí es donde pondrías todos los módulos que estás usando para esta aplicación. Así que una cosa rápida que olvidé mencionar sería la funcionalidad de batalla. Así que si vamos aquí a batalla, elige aleatoriamente qué tribu ganará esta batalla. Así que si adelanto esta batalla, podemos ver esto aparecer. Vamos a confirmar la transacción. Y luego una cosa divertida que me gusta hacer es volver a esto más tarde para que puedan adivinar en el chat qué tribu creen que ganará esta batalla y luego volveremos a ver si adivinaron correctamente. Así que si volvemos al array de módulos, esto sería simplemente el array de todos los diferentes módulos que quieres usar en toda tu aplicación para esas funcionalidades específicas. En este caso, estamos usando tribus y luego la funcionalidad de batalla, que sería la elección aleatoria. Así que ese es el array que se está pasando ahí. Y luego este ID de inquilino, que básicamente es la estructura que está en todo Hyperverse. Puedes pensar en el ID de inquilino como algún tipo de almacenamiento de datos. ¿De acuerdo? Así que vinculado a una dirección. Entonces, en este caso, probablemente estés pensando, ya sabes, ¿por qué esas tribus fueron las únicas que aparecieron? ¿Qué pasa si quiero crear mis propias tribus? Así que puedes hacer eso aquí. Así que ahora mismo está leyendo del inquilino de esta dirección y mostrando esas tribus. Vamos, Alquimista. Sí, ahora mismo está mostrando esas tribus. Pero si quieres crear tu propia instancia, también hay una ruta para eso, llamada configuración. Así que simplemente irías a /configuración, conectarías tu billetera y simplemente subirías tu propio archivo, tu propio nombre, tu propia descripción, y puedes crear tus propias tribus. Y luego simplemente actualizarías este ID de inquilino con la dirección que usaste para crear esas tribus. Y mostrará esas tribus en lugar de estas tribus predeterminadas. ¿De acuerdo? Y luego aquí tenemos el proveedor de Hyperverse, que hemos envuelto en toda la aplicación.

Ahora tenemos acceso a Hyperverse. Creo que Mage ganará esta vez. Veremos, veremos justo después de repasar cómo funciona exactamente Tribus. Así que sigamos adelante y veamos index.tsx. Obviamente, este es el primer archivo que se está ejecutando. Y vemos que el primer componente que estamos importando es la barra de navegación. Así que podemos seguir adelante y ver eso. Vamos a componentes y Nav. Entonces puedes ver aquí que lo único que se muestra es este componente de conexión. Así que podemos ver, ya sabes, cómo y de dónde lo estamos obteniendo. Puedes ver esta línea. Correcto. Lo estamos extrayendo de este gancho de usuario ethereum. ¿Y de dónde viene este gancho de usuario de Ethereum? Simplemente lo estamos importando de Hyperverse. Correcto. Entonces este gancho de usuario ethereum nos da acceso a esta funcionalidad de conexión. Esto es un montón de funcionalidad de billetera para leer la dirección de la billetera, todas esas cosas. Así que puedes seguir adelante y ver todas las diferentes funcionalidades que puedes llamar. Entonces, en esta línea, simplemente extraemos las cosas que deseas del gancho de usuario de Ethereum. En este caso, queremos este componente de conexión, que maneja toda la interfaz de Rainbow Kit del modal de conexión real que aparece, todas esas cosas para ti. Así que todo lo que tienes que hacer es renderizar esto y luego hará todo por ti. Una vez que un usuario hace clic en este botón de conexión de billetera. Bastante genial, bastante fácil. Quiero decir, en tres líneas, básicamente tienes toda la funcionalidad de autenticación en el mundo Web3 hecha para ti. Y puedes ver los confetti aquí. Parece que ahí lo tienes. Mage ganó. Así que volvamos aquí. Y luego vayamos al archivo index.tsx.

Después de mostrar la barra de navegación, verificamos si hay una dirección desde la cual leer, que nuevamente proviene del gancho de usuario Ethereum, ¿verdad? Entonces, el gancho de usuario Ethereum extrae la dirección de la cuenta y luego lee desde esta dirección y dice, sabes, si esta dirección está disponible, muestra el botón 'unirse a una tribu'. De lo contrario, si ya estás en una tribu, muestra el botón 'ver una tribu'. Así que aquí veremos todo esto.

Una vez que alguien hace clic en 'unirse a una tribu', vamos a la ruta 'todas-las-tribus'. Así que vamos a ir a ese archivo y ver exactamente cómo estamos obteniendo datos de la cadena. Así que podemos ir aquí, hacer clic aquí. ¿Cómo se muestran realmente estas tribus? Entonces, si vamos aquí, podemos ver que estamos mapeando a través de data, ¿verdad? Estamos mapeando algo llamado data. Y luego mostramos estas imágenes, que serían las tribus que aparecen. Entonces, ¿de dónde viene realmente este data? Así que podemos buscar aquí, encontrar de dónde viene data. Y verás aquí en esta línea que estamos llamando a esta función 'obtener todas las tribus' en esta variable 'tribus'. Entonces puedes ver aquí de dónde estamos obteniendo estas tribus. Lo estamos obteniendo del gancho 'use tribes'.

Entonces, básicamente, lo que hace este gancho 'use tribes', que hemos importado aquí, es que es básicamente un puente entre el contrato inteligente, el código del módulo inteligente y luego el lado del cliente, el código de frontend. Así que extrae. Como puedes ver, hay 15 funciones más. Extrae toda la funcionalidad del contrato inteligente a JavaScript. Ahora puedes llamar con solo JavaScript las funciones que deseas, sabes, leer, obtener, actualizar, poner lo que quieras en la cadena de bloques en lugar de tener que saber algo, ya sabes, no se necesita código de contrato inteligente en absoluto. Puedes hacerlo solo con JavaScript.

Como puedes ver aquí, todo lo que estamos haciendo es llamar a esta función 'obtener todas las tribus'. Obviamente, eso te dará todas las tribus disponibles. Y luego simplemente extraemos eso en data y lo usamos para mapear. Así que aquí solo estamos mapeando a través de data, que tiene la lista de todas las tribus disponibles, y luego mostrando esta imagen con la URL de la imagen, el nombre y todas esas cosas. Y luego puedes ver aquí qué sucede cuando hacemos clic en una tribu. Nos unimos a una tribu, actualizamos la información en la cadena de bloques. Llamamos o estamos llamando a 'mutate' en este evento de clic. Así que justo cuando alguien hace clic, llamamos a esta función 'mutate'. Ahora, ¿qué hace eso? ¿Verdad? Así que subimos aquí y verás que es un patrón muy similar. Todo lo que estamos haciendo es llamar a esta función 'unirse a una tribu' en la tribu. Entonces, nuevamente, está utilizando este gancho 'use tribes' y luego está descubriendo qué funciones queremos llamar dentro de este gancho 'use tribes', que ya ha extraído toda la funcionalidad para ti. Puedes seguir adelante y hacer unirte a una tribu, obtener todas las tribus y todas esas cosas buenas y hacerlo automáticamente por ti. La billetera de Mana Base se abre, la confirmación de la transacción actualiza la información, todas esas cosas se hacen por ti. Genial. Entonces, después de eso, vamos a ir a la ruta 'mi-tablero-tribu'. Así que vamos a ver eso. Y veremos aquí que, nuevamente, es un patrón muy similar. ¿Verdad? Estamos importando el gancho 'use tribes'. Y luego tenemos esta variable 'tribus' para el gancho 'use tribes'. Y todo lo que estamos haciendo es obtener la información de la tribu en la que se encuentra el usuario actualmente. Entonces, obtener tribu por cuenta. Qué cuenta está utilizando el usuario actualmente. ¿Verdad? Entonces, ya se han unido a una tribu. Ahora solo estamos obteniendo la tribu en la que están accediendo a través de su dirección de cuenta y simplemente leyendo en qué tribu están. Así que eso te dará este data. Entonces, cuando bajamos aquí, podemos mostrar ese data como mostramos anteriormente. ¿Verdad?

Entonces, vamos a hacer clic en esto. Todo esto se está haciendo por ti. Hacemos clic en confirmar. Y luego cuando muestra la imagen de la tribu, el nombre, la descripción, todo eso se hace simplemente llamando a los datos, nombre, descripción, todas esas cosas, que aparecen aquí. Así que ahí vamos. Y ahora puedes asumir, ¿cómo funciona este botón de abandonar tribu? Muy similar a unirse a una tribu. Así que vamos a ver aquí, este botón de abandonar tribu. ¿Qué hacemos cuando alguien hace clic en él? Llamamos a esta función mutate. ¿Qué hace esta función mutate? Llamamos a abandonar tribu en esta función mutate y luego volvemos a la ruta de inicio. Así es como funciona toda la funcionalidad de las tribus. Ahora podemos pasar a ver la funcionalidad de batalla. Así que vamos a hacer clic en confirmar aquí. Y luego, cuando vamos a la funcionalidad de batalla, ¿cómo funciona exactamente esto? Correcto. Así que este es un módulo inteligente completamente nuevo, ¿verdad? Estos son dos módulos inteligentes que se combinan en una aplicación. Este es un ejemplo de cómo puedes incluir decenas y cientos de módulos inteligentes si realmente quisieras, a lo largo de tu aplicación para realizar diferentes aspectos. Así que podemos ver eso. Obviamente, aquí fue donde estaba el primer archivo. Importamos el módulo inteligente de selección aleatoria. Así que podemos ver eso aquí. Todo lo que hace la selección aleatoria en el backend es utilizar algo llamado un Oráculo. Y el más popular es Chainlink. Así es como se utiliza. Pero básicamente, debido a que la cadena de bloques es determinista, no se puede generar un número aleatorio en la cadena de bloques. Así que tenemos que utilizar un Oráculo, que es básicamente un puente entre el mundo real y la cadena de bloques. Así que puede obtener cosas como resultados deportivos, información meteorológica, todas esas cosas. Pero una de las cosas más importantes que puede hacer es generar un número aleatorio. Correcto. Dado que eso no es posible en la cadena de bloques. Así que eso es exactamente lo que tenemos aquí. Estamos utilizando este módulo inteligente de selección aleatoria en este archivo battle.tsx. Así que podemos ver que es un patrón muy similar nuevamente. Estamos utilizando este gancho use random pick en lugar del gancho use tribes. Y puedes ver las funcionalidades que permite el gancho use random pick. Puedes ver el inicio de la selección aleatoria. Puedes ver la obtención de la selección aleatoria. Así que puedes asumir cómo funciona y lo tenemos todo aquí. Así que básicamente lo que estamos haciendo es obtener dos tribus aleatorias y luego elegir un número aleatorio, cero o uno, y luego mostrar esa tribu como ganadora. Así que podemos ver que, ya sabes, se está haciendo la obtención de la selección aleatoria. Así que obtenemos el número aleatorio real después de haberlo iniciado. Así que el inicio de la selección aleatoria, la obtención de la selección aleatoria. Así que es una funcionalidad y un patrón muy similar a las dos tribus. Así que aquí estamos llamando a esta mutación aleatoria en uno y dos. El número es uno y dos para elegir entre uno y dos. Y luego mostramos esa tribu como ganadora. Genial. Ahora que tenemos, ya sabes, la totalidad de las tribus en este módulo de selección aleatoria en este ejemplo de DAP terminado, podemos pasar a ver el ERC 721. Así que esencialmente el sitio de creación y acuñación de NFT que se puede construir utilizando solo JavaScript.

Así que podemos seguir adelante y ver eso. Veremos el resultado de aquí. Y obviamente, si, ya sabes, LS, puedes ver que también hay otros DAP de ejemplo aquí para diferentes escenarios. Tenemos una apuesta en recompensas y todas esas cosas. Pero por el bien de hoy, simplemente vamos a seguir adelante y ver el ERC721. Vamos a ejecutar Yarn Dev ya que ya he ejecutado Yarn anteriormente. Y luego vamos a actualizar esto y comenzar. Genial. Entonces, lo que tenemos aquí es básicamente mostrar todas las diferentes funcionalidades que son posibles con este módulo inteligente ERC721. Este es el DAP de ejemplo que muestra eso de manera más sencilla para ti. Así que puedes ver cómo puedes acuñar un NFT. Puedes convertirlo en una acuñación pública en lugar de una acuñación privada. ¿Correcto? Por ahora, solo el propietario o el creador del NFT pueden acuñar y realmente acuñar para otra persona o transferir el NFT a otra persona o algo así también. Pero puedes ver aquí esta creación de instancia. ¿Correcto? Así como discutí en las tribus, si quisieras crear tus propias tribus, tendrías que crear una instancia. Creas un ID de inquilino, que es básicamente solo la dirección de tu billetera. Con tu dirección de billetera, creas una instancia y luego actualizas el código con el ID de inquilino de tu dirección de billetera. Y luego realmente leeremos la información desde allí. Así que podemos hacer eso. Creo que ya he creado una instancia de un token en una de mis cuentas. Vamos a ver eso primero y luego podemos crear uno desde cero. Shane token, si cambiamos a esto y vamos a conectar. Vamos a conectar Shane token. Haz clic en siguiente, haz clic en conectar. Y luego verás aquí que esto se actualizó, ya sabes, ya tienes una instancia. Sabe que ya tengo una instancia, que esta dirección ya tiene una instancia. Ya se ha creado un token ERC721. Y aquí es donde realmente podemos acuñar o obtener el saldo y todas esas cosas. Pero antes de hacer eso, tenemos que asegurarnos de actualizar la dirección de la billetera en el código. ¿Correcto? Porque de lo contrario no está leyendo, no está mirando esa información. Así que podemos obtener el proxy aquí también. Y muestra la dirección del contrato proxy en el que se encuentra. Así que eso es bastante genial. Así que vamos a ir a los códigos. Vamos al módulo ERC721. Vamos a las páginas. Podemos ir a App.tsx. Aquí es donde se coloca la dirección de billetera predeterminada. En su lugar, queremos nuestra dirección de billetera de tokens Shane. Podemos copiar esto y pegarlo aquí. Así que está leyendo esa información, pégala allí, guarda y actualiza. Y luego lo dejaremos cargar un poco y luego debería aparecer. Pero aquí es donde podemos acuñar algo nuevo. Podemos obtener el saldo de una cuenta para ver, ya sabes, el saldo de la cuenta. Actualmente, vemos que es cero. Permíteme actualizar esto.

Ahora podemos echar un vistazo al código para ver cómo funciona. Si puedes ver aquí, ya sabes, obviamente esto es muy similar. Correcto. Inicializando el Hyperverse. En este caso, todavía estamos utilizando una red de prueba de Ethereum. En este caso, simplemente estamos utilizando un módulo diferente, que sería el módulo ERC 721. Y luego tenemos nuestra propia dirección de billetera como ID de inquilino. Así que podemos ver que, ya sabes, muy similar. Estamos importando estas tres cosas. Y luego envolvemos toda la aplicación con nuestro proveedor. Y luego entramos en el archivo indexed TSX. Vemos que lo primero que estamos haciendo, obviamente, es el componente nav, que, de nuevo, es muy similar a lo que había en tribes. Correcto. Solo se muestra el botón Conectar billetera, que está aquí, que hace todo por ti. Así que volvamos a indexed TSX. Vemos que se está representando el componente contenedor. Así que podemos seguir adelante y ver eso. Y lo que esto mostrará son todas las diferentes funcionalidades, todas estas diferentes cajas que nos permiten, ya sabes, obtener la dirección del proxy, crear una instancia, hacer la acuñación, todas esas cosas. Así que podemos seguir adelante y ver algunas de las cosas también. Entonces puedes ver aquí que están divididos en dos carpetas diferentes, dos carpetas separadas. Puedes ver la función de lectura, las funciones de escritura. Así que obviamente las que nos hacen, ya sabes, confirmar la transacción donde aparece la billetera MetaMask y las que solo son de lectura, que no requieren ninguna transacción. Así que puedes ver cuando intentamos obtener el saldo de. Obviamente, es un patrón muy similar de nuevo, ¿verdad? Así que solo estamos usando el gancho USERC721 en lugar del gancho de tribus, en lugar del gancho aleatorio, todas esas cosas. Puedes ver que hay otras 15 funcionalidades que puedes usar en este gancho que ya ha extraído toda la funcionalidad del contrato inteligente a JavaScript por ti. Así que ahora solo tienes que llamar a todo eso en JavaScript. Aquí es donde lo estamos haciendo. Y luego solo estamos obteniendo el saldo de la dirección que tiene el usuario actual. Así es donde estamos haciendo todo eso. Y luego data es donde lo estamos mostrando también. Y luego solo estamos obteniendo la dirección correcta. Solo llamamos a esa función obtener saldo de la dirección. Así que pondríamos la dirección y automáticamente haría esa función por nosotros. Y luego obtener propietario de, de nuevo, muy similar. Verás un patrón muy similar aquí. Importamos el gancho y luego llamamos a obtener propietario de en este caso en lugar de la otra función. Y luego estamos obteniendo el propietario de un ID de token específico en este caso, así que seguimos adelante y llamamos a eso y eso nos devolverá las direcciones de los propietarios de ese token. Así que sí, no voy a pasar por todo esto ya que, de nuevo, es una funcionalidad muy similar. Solo estamos llamando a diferentes funciones. Así que en este caso, para acuñar, estamos llamando a una función diferente. Ya sabes, .acuñar. Transferir, solo vamos a llamar a .transferir y todas esas cosas. Así que es muy similar. Muy fácil de usar. De nuevo, ya sabes, todo hecho en JavaScript. Todo está prácticamente resuelto en el backend. Solo tienes que llamar a estas funciones. Genial. Así que ahora volvamos a la presentación de PowerPoint. Y ahora, aquí está toda la información sobre Hyperverse y Decentology.

Puedes unirte a nuestro Discord. Hay un canal que muestra todas las diferentes aplicaciones que la community ha construido. También muestra ejemplos para que los revises, veas el repositorio y encuentres ejemplos. Puedes elegir lo que te guste de ellos y construir el tuyo propio o hacer lo que desees.

Y luego tenemos docs.hyperverse.dev, que obviamente es muy importante que tengas a mano. Esto explica paso a paso exactamente lo que te mostré hoy sobre cómo clonar el monorepo de Hyperverse o comenzar desde cero con una aplicación Next.js. También muestra cómo construir un módulo inteligente si eres un desarrollador de contratos inteligentes. También tenemos publicaciones en nuestro blog, tenemos cómo hacerlo paso a paso desde cero, desde una aplicación Next.js. Muestra cómo puedes construir la función Conectar Billetera, cómo hacer el módulo Chainlink Random Pick. Separa todo para que sea mucho más simple y fácil de ver y entender. Todo eso también está disponible para ti.

Estamos muy emocionados de ver lo que construyan con esto. Sé que también hay algunos desarrolladores de contratos inteligentes y algunos desarrolladores de JavaScript aquí. Será interesante ver lo que construyan y lo que les guste. Genial. Ahora abro la sesión para preguntas, si alguien tiene alguna. Siempre puedes contactarnos en Discord o Twitter o cualquier otra cosa. Siempre que tengan preguntas o necesiten acceder a algo o cualquier otra cosa. Sé que toda esta grabación, todo esto se enviará a todos los participantes también. Podemos compartir los enlaces en el chat. Sí, creo que alguien de Decentology también puede hacer eso. Creo que es discord.gg/Decentology. Corrígeme si me equivoco, Sheeley. También se compartió docs.hyperverse.dev anteriormente. Y luego nuestro sitio web principal es decentology.com. Y luego puedes ver nuestras publicaciones en el blog sobre Hyperverse. También tenemos fast camps que comenzarán pronto, que es básicamente un mini boot camp donde hacemos algo similar a esto y luego puedes ir y construir tu propio sitio web de acuñación ERC721 o lo que sea y te ayudaremos en el proceso con horarios de oficina y todas esas cosas. Story tiene una pregunta, creo que ella puede responderla mejor también. ¿Hay startups similares a sell o solid? Sí, sí, hay otras opciones en comparación con construirlo tú mismo. ¿Cuáles son las ventajas de usar Hyperverse? Bueno, en primer lugar, no tendrías que construir todo esto desde cero. Hay muchos pasos diferentes para construir un contrato inteligente y todas esas cosas, pero para JavaScript es mucho más fácil. Si quieres construir tribus sin Hyperverse, tendrías que aprender, obviamente, cómo construir ese contrato inteligente, aprender Solidity o lo que sea, y luego ponerlo en la blockchain de ethereum y conectarlo a tu aplicación del lado del cliente y usarlo allí. Obviamente, esto lo simplifica mucho más, donde solo tienes que llamar a estas funciones de JavaScript e importar estos módulos de NPM y usar las funcionalidades de esa manera, que en realidad están interactuando con los contratos inteligentes en el backend por ti. ¿Qué pasa si necesito agregar lógica personalizada al contrato inteligente? ¿Debería mover toda la lógica de negocio al frontend? Dependerá, pero si esa lógica tiene sentido para alguien más, creo que sería bueno tener un módulo inteligente que también haga eso, esa funcionalidad que estás pensando, de esa manera, otros usuarios también podrían usar ese módulo inteligente. Si desean la lógica que tú quieres en un contrato inteligente. También podemos compartir el enlace de Discord. Hice clic accidentalmente. Ahí vamos, sí. Alguien acaba de hacer una pregunta sobre el uso de la consulta. Sí, la consulta de uso maneja todo por ti. Estamos tratando de hacerlo muy fácil y sencillo para que cualquier persona pueda poner en marcha una DApp en menos de una hora. Y acabas de ver aquí que mostramos dos DApps muy rápidamente. Y obviamente puedes personalizarlo tú mismo actualizando la dirección del ID del inquilino. Y obviamente tienes tu propia DApp personalizada de tribus. Hemos visto muchas cosas interesantes que otras personas han construido, como chatear dentro de las tribus. Una vez que te has unido a una tribu específica, puedes chatear con los miembros de tu tribu, lo que lo hace un poco más social. Eso también es un artículo interesante. El artículo sobre cómo construir estaría en nuestro sitio web decentology.com. Y luego hay una pestaña para los blogs, así que solo tienes que hacer clic en eso y hay varios temas diferentes, como cómo conectarse desde Hyperverse desde cero y cómo construir la autenticación, entre otros. Hay varios artículos diferentes allí.

Había otra idea para las tribus también. Dado que también tenemos un módulo de stake y recompensas donde los usuarios pueden apostar y ganar recompensas de un token específico, puedes intentar integrarlo con las tribus también.

Entonces, sabes, tal vez cada tribu tenga su propio token personalizado. Y una vez que hayas apostado una cantidad X de tokens para esa tribu específica, obtendrás algún tipo de acceso, tal vez acceso a la función de chat o algo así.

Acceso para aprender más sobre las tribus o cualquier otra cosa, por lo que hay diferentes casos de uso que puedes considerar, como un modelo de suscripción o una cuenta premium, donde tengas tokens XML apostados para obtener una cuenta premium o algo similar.

¿Cuáles podrían ser algunos casos de uso para un novato en Hyperverse?

Sí, obviamente cualquier cosa que interactúe con cosas en la cadena, por lo que si quieres construir algo descentralizado, puedes usar nuestros módulos inteligentes para interactuar con esas diferentes funcionalidades y construirlo, solo tienes que saber cómo hacerlo.

Esa es la parte buena. Sí, hay varias aplicaciones descentralizadas por ahí, obviamente hay DeFi, hay aplicaciones sociales que también son descentralizadas, solo depende de qué tipo de aplicación quieras construir.

Pero, en esencia, nuestro objetivo es que el primer lugar al que cualquier persona quiera ir para construir incluso una aplicación descentralizada sea Hyperverse, ya que es muy fácil de poner en marcha.

No necesitas conocer el lenguaje de programación de contratos inteligentes ni nada por el estilo.

Correcto. Sí, alguien en el chat está diciendo que para unirse a una tribu, etc., necesito poseer Ethereum para pagar el gas de la transacción. Correcto, sí, cualquier transacción que necesites realizar, necesitarás poseer Ethereum o cualquier otra cadena en la que se encuentre actualmente para pagar esa tarifa de gas.

En este caso, lo mostré en la red de prueba, por lo que puedes obtener Ethereum de prueba de forma gratuita también.

También puedo dejar ese enlace en el chat de Discord para que puedas obtenerlo fácilmente y transferirlo. ¿Tienen planes de expandirse a otras blockchains? Sí.

Entonces, todas y cada una de las blockchains a las que se expanda Hyperverse se listarán en nuestra carpeta de paquetes. Por ahora, tenemos Algorand, Metis, Ethereum, Flow. Creo que eso es todo. Corrígeme si me equivoco, Sheely. Ahí vamos, Avalanche. Polygon. Genial.

Para cualquier desarrollador de contratos inteligentes, también tenemos un kit que hemos creado llamado el kit de construcción. Es básicamente un módulo inteligente empaquetado y simple para que puedas crear tu propio contrato inteligente en él, y luego tendrás todas las actualizaciones y todo eso, todo está en la documentación.

También vamos a lanzar un tutorial en video sobre eso. Mañana, creo, así que puedes ver nuestro YouTube también para eso, pero básicamente es un kit con plantillas para que construyas módulos inteligentes en Hyperverse y puedas crear tu propio contrato inteligente de prácticamente cualquier cosa que desees, con funcionalidades específicas, y también hacer eso.

Gracias a todos por estar aquí. Nos encantaría ver lo que construyan en Hyperverse, así que estén atentos a nuestras actualizaciones en Twitter, Discord y YouTube, donde siempre publicaremos pequeños fragmentos incluso sobre los temas allí, así como tutoriales.

Y pronto también estarán disponibles los fast camps.

Gracias a todos ustedes.