Construye aplicaciones Web3 con Javascript

Rate this content
Bookmark

El masterclass está diseñado para ayudar a los desarrolladores Web2 a comenzar a construir para Web3 utilizando el Hyperverse. El Hyperverse es un mercado abierto de módulos inteligentes construidos por la comunidad, auditados y fáciles de descubrir. Nuestro objetivo es facilitar a los desarrolladores de JavaScript la construcción de aplicaciones Web3 sin escribir una sola línea de código de contrato inteligente. Piensa en 'npm para contratos inteligentes'.

Aprende más sobre el Hyperverse aquí.

Repasaremos todos los conceptos básicos de blockchain/crypto que necesitas saber para comenzar a construir en el Hyperverse, por lo que no necesitas tener ningún conocimiento previo sobre el espacio Web3. Solo necesitas tener experiencia en JavaScript.

49 min
04 Jul, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Hyperverse simplifica el desarrollo de blockchain al proporcionar contratos inteligentes modulares en cadena para todas las principales blockchains. Los tokens fungibles son intercambiables, mientras que los tokens no fungibles tienen características únicas. Los desarrolladores pueden construir aplicaciones Web3 utilizando bibliotecas de JavaScript y conectar billeteras utilizando RainbowKit para la interfaz de usuario. La interacción con los contratos se realiza a través de módulos importados y el proveedor de Hyperverse. El módulo inteligente ERC721 permite la creación de NFT y transferencias de tokens. La documentación de Hyperverse proporciona guías paso a paso para construir aplicaciones Web3 e integrar módulos como stake y rewards. Se encuentran disponibles Discord y fast camps para soporte y oportunidades de aprendizaje.

Available in English

1. Introducción a Hyperverse y Desarrollo Web3

Short description:

Hola a todos. Soy Shane, el defensor del desarrollador de Decentology. Hoy hablaremos sobre cómo construir aplicaciones Web3 solo con JavaScript. Nuestra misión es incorporar a 10 millones de desarrolladores a Web3 utilizando Hyperverse. Hyperverse simplifica el desarrollo de blockchain al proporcionar contratos inteligentes modulares en cadena para todas las principales blockchains. Permite a los desarrolladores de Web2 construir aplicaciones sin escribir código de contrato inteligente, utilizando bibliotecas de JavaScript para conectar y construir aplicaciones Web3. Hyperverse es como NPM para contratos inteligentes. Puedes construir aplicaciones Web3 con HTML, CSS y 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.

2. Conceptos básicos de Blockchain y Cripto

Short description:

Puedes aprovechar los módulos inteligentes construidos por desarrolladores de contratos inteligentes y construir aplicaciones del lado del cliente utilizando estos módulos. Los conceptos básicos de blockchain incluyen la diferencia entre las arquitecturas web2 y web3 y el flujo de trabajo de las transacciones en blockchain. Las claves privadas se derivan de números aleatorios y no deben compartirse, mientras que las claves públicas pueden compartirse. Las cuentas de blockchain se derivan de claves públicas y privadas. Las billeteras son herramientas para asegurar las claves privadas y firmar transacciones. Las tarifas de blockchain, también conocidas como gas, incluyen las tarifas de transacción, los precios del gas y la velocidad de la transacción. Las transacciones con poco gas pueden ser ignoradas.

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.

3. Descripción general de los tokens fungibles y no fungibles

Short description:

Esta sección proporciona una descripción general rápida de la diferencia entre los tokens fungibles y no fungibles. Los tokens fungibles son intercambiables, como los dólares o los bitcoins, mientras que los tokens no fungibles, como los autos, tienen características únicas que los hacen no intercambiables.

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.

4. Construcción de ejemplos de dApps y conexión de billeteras

Short description:

Ahora podemos pasar a los ejemplos de dApps. Vamos a docs.hyperverse.dev, nuestro sitio de documentación. Proporciona guías paso a paso para construir aplicaciones Web3 desde cero o utilizando nuestro monorepo. Nos enfocaremos en los desarrolladores de JavaScript. El monorepo incluye ejemplos de dApps y paquetes. Puedes clonarlo, ir al ejemplo de dApp de tribus, instalar las dependencias y ejecutar yarn dev para iniciar la aplicación. La dApp de tribus permite a los usuarios conectar su billetera, unirse o crear tribus y abandonarlas. La conexión de la billetera utiliza RainbowKit para la interfaz de usuario. Unirse a tribus obtiene información de la cadena de bloques sin costo. Actualizar información en la cadena de bloques incurre en tarifas de transacción. Se utiliza la extensión de billetera Metamask para la confirmación. Todo esto se hace utilizando funciones de JavaScript. Después de unirse a una tribu, puedes ver su información. Abandonar una tribu requiere confirmación y procesamiento.

Genial. Ahora podemos pasar a los ejemplos de dApps. Así que vamos a docs.hyperverse.dev. Aquí es donde se encuentra toda nuestra documentación. Explica paso a paso todo lo que te mostraremos hoy. Explica cómo construir aplicaciones Web3 desde cero, así como desde nuestro monorepo. Esto es principalmente para desarrolladores de JavaScript, pero también incluye el lado de los contratos inteligentes y cómo crear módulos inteligentes. Así que vamos a ir allí y también puedo pegarlo en el chat para que puedan seguirlo.

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.

5. Interacción con Contratos y Resumen del Código

Short description:

Vamos a ver la interacción con el contrato en el explorador de bloques. Ether scan te permite ver todas las transacciones en la red de Ethereum. Puedes buscar por dirección de billetera y ver el historial de transacciones. El hash de transacción único muestra la dirección de billetera, la interacción con el contrato y múltiples transacciones. Ahora vamos a ver el código. La aplicación está conectada a Hyperverse utilizando módulos importados y el proveedor de Hyperverse. Inicializamos Hyperverse y especificamos la cadena de bloques y la red. El array de módulos contiene las funcionalidades específicas utilizadas en la aplicación. La funcionalidad de batalla elige aleatoriamente una tribu ganadora. Puedes adivinar la tribu ganadora en el chat. El ID del inquilino es la estructura de almacenamiento de datos en Hyperverse. Puedes crear tus propias tribus subiendo un archivo y actualizando el ID del inquilino. El proveedor de Hyperverse está envuelto en toda la aplicación.

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.

6. Acceso a Hyperverse y Conexión de Billeteras

Short description:

Ahora tenemos acceso a Hyperverse. Extraemos el componente de conexión del gancho de Ethereum del usuario, que proporciona funcionalidad de billetera y maneja la interfaz de Rainbow Kit para conectar billeteras. Con solo tres líneas de código, tenemos funcionalidad de autenticación en el mundo Web3. Los confetti confirman la victoria de Mage.

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.

7. Unirse y Ver Tribus

Short description:

Después de mostrar la barra de navegación, verificamos si hay una dirección para leer. Si está disponible, mostramos el botón 'unirse a una tribu'; de lo contrario, si el usuario ya está en una tribu, mostramos el botón 'ver una tribu'. Al hacer clic en 'unirse a una tribu', vamos a la ruta 'todas-las-tribus', donde obtenemos datos de la cadena. Mapeamos los datos obtenidos del gancho 'use tribes', que actúa como puente entre el contrato inteligente y el código de frontend. El gancho 'use tribes' extrae la funcionalidad del contrato inteligente a JavaScript, lo que permite una fácil interacción con la cadena de bloques. Al hacer clic en una tribu, se activa una función para unirse a la tribu, que actualiza la información en la cadena utilizando la función 'mutate'. De manera similar, en la ruta 'mi-tablero-tribu', importamos el gancho 'use tribes' y obtenemos la información de la tribu para el usuario actual.

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?

8. Funcionalidad de la Tribu y Módulo de Batalla

Short description:

Hacemos clic en confirmar y se muestra la información de la tribu. El botón de abandonar tribu funciona de manera similar al botón de unirse a la tribu, llamando a la función mutate y volviendo a la ruta de inicio. La funcionalidad de batalla combina dos módulos inteligentes en una aplicación. Utiliza un Oráculo, como Chainlink, para generar números aleatorios. Se importa el módulo inteligente de selección aleatoria y el gancho use random pick proporciona funcionalidades como iniciar selección aleatoria y obtener selección aleatoria. La funcionalidad de batalla selecciona dos tribus aleatorias y un número aleatorio para determinar al ganador. El ERC 721 es un sitio de creación de NFT que se puede construir utilizando JavaScript.

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.

9. Módulo Inteligente ERC721 y Creación de Instancias

Short description:

Vamos a ver el módulo inteligente ERC721 y sus funcionalidades. Puedes acuñar un NFT y convertirlo en una acuñación pública. La creación de una instancia requiere un ID de inquilino, que es la dirección de tu billetera. Al actualizar el código con la dirección de tu billetera, puedes leer la información. Verificaremos una instancia existente y luego crearemos una desde cero. Es necesario actualizar la dirección de la billetera en el código para leer la información. También se muestra la dirección del contrato proxy. Vamos al módulo ERC721 en el código y actualicemos la dirección de la billetera predeterminada con la dirección de nuestra billetera de tokens Shane. Después de actualizar, podemos acuñar un nuevo elemento y verificar el saldo de la cuenta, que actualmente muestra cero. Esto confirma que ya tienes una instancia.

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.

10. Acuñación y Transferencia de Tokens

Short description:

Podemos acuñar tokens especificando el ID y la dirección del token, confirmar la transacción y ver los detalles en el Explorador de bloques. También es posible transferir tokens a otra dirección de billetera. El saldo se actualiza en consecuencia.

Ahí vamos. Así que ya tienes una instancia. Ahora podemos ver que se ha actualizado a dos. Correcto. Ahora muestra que, ya sabes, este usuario ya ha acuñado dos de sus propios tokens. Podemos obtener el propietario si podemos poner el ID del token. Ya sea la primera acuñación o la segunda acuñación, algo así. Solo tienes que poner el ID del token real y luego podemos acuñar aquí. Entonces, si estoy acuñando a esta dirección, puedo hacer clic en acuñar. Y verás que, ya sabes, es muy similar. Dado que estamos poniendo información en la blockchain, debemos hacer clic en confirmar. Así que podemos hacer eso también. Ahí está la transacción en proceso. Y luego, cuando vayamos a ver esta funcionalidad de acuñación, podemos ver esto en el Explorador de bloques para que también podamos ver de dónde viene. El contrato con el que interactuó, que también podemos ver en esta otra pestaña. Así que podemos ver que este es el token que fue creado por la cuenta de Shane tokens. Se llamaba Shane codes y el símbolo del token era SC, y puedes ver las transacciones con las que interactuó. Así que podemos ver si obtuviéramos un ID de token, uno o algo así, también lo haría. Y luego, si vamos a transferir tokens, también podemos hacer eso. Entonces, si quisiéramos transferir a otra dirección de billetera y qué ID de token queríamos elegir, también podemos hacer eso. Ahora podemos ver que este ID de token o este saldo se ha actualizado también antes mostraba dos. Ahora muestra tres porque acabamos de acuñar uno también.

11. Resumen del código y la información de Hyperverse

Short description:

Echemos un vistazo al código para ver cómo funciona. Inicializamos el Hyperverse utilizando el módulo ERC 721 y nuestra dirección de billetera como ID de inquilino. Importamos los componentes necesarios y envolvemos la aplicación con nuestro proveedor. El componente contenedor muestra diferentes funcionalidades como obtener la dirección del proxy, crear una instancia y acuñar tokens. El gancho USERC721 nos permite interactuar con las funcionalidades del contrato inteligente en JavaScript. Podemos obtener el saldo de una dirección, obtener el propietario de un ID de token específico y realizar otras funciones como acuñar y transferir tokens. Todo esto se hace fácilmente en JavaScript con el trabajo del backend ya resuelto. Ahora, pasemos a la presentación de PowerPoint para obtener más información sobre Hyperverse y Decentology.

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.

12. Unirse a Discord y Explorar Aplicaciones

Short description:

Puedes unirte a nuestro Discord para explorar las aplicaciones creadas por la comunidad y encontrar ejemplos para construir las tuyas propias. La documentación en docs.hyperverse.dev proporciona guías paso a paso para clonar el monorepo de Hyperverse o comenzar desde cero con una aplicación Next.js. Nuestras publicaciones en el blog cubren diversos temas, incluyendo la construcción de la función Conectar Billetera y el uso del módulo Chainlink Random Pick. Estamos emocionados de ver lo que construyas con Hyperverse. Si tienes alguna pregunta, no dudes en contactarnos en Discord o Twitter. También ofrecemos fast camps, mini boot camps donde puedes construir tu propio sitio web de acuñación ERC721 con nuestra ayuda. En cuanto a agregar lógica personalizada a los contratos inteligentes, depende de la situación. Si la lógica es útil para otros, es beneficioso crear un módulo inteligente que otros puedan usar. Nuestra documentación y blog brindan más información sobre estos temas. Nos esforzamos por hacer que el desarrollo de DApps sea fácil y sencillo, y nuestra consulta de uso maneja la mayor parte de la funcionalidad por ti. Unirse a las tribus permite la interacción social, como chatear con otros miembros de la tribu. Consulta nuestro blog para guías paso a paso sobre diferentes temas, incluyendo la autenticación y la generación de números aleatorios utilizando el módulo Chainlink.

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í.

13. Integrando el Módulo de Stake y Recompensas con las Tribus

Short description:

Puedes integrar el módulo de stake y recompensas con las tribus, permitiendo a los usuarios apostar tokens y ganar recompensas. Los diferentes casos de uso incluyen modelos de suscripción, cuentas premium e interacción con aplicaciones descentralizadas. No necesitas conocer lenguajes de programación de contratos inteligentes para construir en Hyperverse. Necesitas poseer Ethereum o el token respectivo de la cadena para pagar las tarifas de transacción. Hyperverse se expandirá a otras blockchains y hay un kit de construcción disponible para desarrolladores de contratos inteligentes para crear sus propios módulos. Únete a nuestro Discord y síguenos en Twitter y YouTube para obtener actualizaciones y tutoriales. Pronto también estarán disponibles los fast camps.

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.

Watch more workshops on topic

React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
WorkshopFree
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.
Node Congress 2023Node Congress 2023
63 min
0 to Auth in an Hour Using NodeJS SDK
WorkshopFree
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.JS backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
Table of contents- A quick intro to core authentication concepts- Coding- Why passwordless matters
Prerequisites- IDE for your choice- Node 18 or higher
React Summit US 2023React Summit US 2023
96 min
Build a powerful DataGrid in few hours with Ag Grid
WorkshopFree
Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn how to get started with AG Grid, how we can enable sorting and filtering of data in the grid, cell rendering, and more. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid into your React application.
We all know that rolling our own grid solution is not easy, and let's be honest, is not something that we should be working on. We are focused on building a product and driving forward innovation. In this workshop, you'll see just how easy it is to get started with AG Grid.
Prerequisites: Basic React and JavaScript
Workshop level: Beginner
Node Congress 2023Node Congress 2023
49 min
JavaScript-based full-text search with Orama everywhere
Workshop
In this workshop, we will see how to adopt Orama, a powerful full-text search engine written entirely in JavaScript, to make search available wherever JavaScript runs. We will learn when, how, and why deploying it on a serverless function could be a great idea, and when it would be better to keep it directly on the browser. Forget APIs, complex configurations, etc: Orama will make it easy to integrate search on projects of any scale.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.
React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.