Construye aplicaciones Web3 con React

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 hacer que sea fácil para los desarrolladores de React construir 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 React.

51 min
01 Jul, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

El masterclass de hoy se centró en la construcción de aplicaciones Web3 con React utilizando JavaScript, sin la necesidad de código de contrato inteligente. Se presentó el Hyperverse como una plataforma comunitaria, abierta y auditada para contratos inteligentes modulares. El masterclass cubrió temas como los conceptos básicos de blockchain, firmas digitales, billeteras, tarifas y tipos de tokens. Se mostró una demostración de una aplicación Web3, junto con el proceso de confirmación de transacciones y el inicio de una batalla entre tribus. También se discutió la inicialización de Hyperverse y módulos, la conexión de billeteras, unirse y abandonar tribus, crear tribus personalizadas e implementar la funcionalidad de batalla y tokens ERC-721.

Available in English

1. Introducción al desarrollo de aplicaciones Web3

Short description:

Hola a todos. Mi nombre es Shane. Hoy vamos a hablar sobre cómo puedes construir aplicaciones Web3 con React utilizando JavaScript, por lo que no se necesita código de contrato inteligente en absoluto. Nuestra misión es incorporar a 10 millones de desarrolladores de Web2 a Web3. El Hyperverse acelera y simplifica tu viaje de desarrollo en blockchain. El Hyperverse es una plataforma comunitaria, abierta y auditada de contratos inteligentes modulares para todas las principales blockchains.

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

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

2. Creación de módulos inteligentes para Web 3.0

Short description:

Cualquier desarrollador de contratos inteligentes puede crear módulos inteligentes, que son contratos inteligentes de un solo propósito. Los registradores validan estos módulos y los auditores verifican el código. Los desarrolladores de Web 2.0 pueden utilizar JavaScript y bibliotecas para acceder a estos módulos, de manera similar a utilizar APIs. No se necesita conocimiento de código de contrato inteligente.

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

3. Conceptos básicos de Blockchain y Cripto

Short description:

Ahora comparemos las arquitecturas de Web 2.0 y Web 3.0. En Web 2.0, la solicitud del usuario pasa por el servidor web, el servidor de API y el servidor de base de datos. En Web 3.0, la solicitud se envía a un nodo en la cadena de bloques. El flujo de trabajo de la cadena de bloques implica transmitir la transacción, validarla, agregarla a la cadena de bloques y hacerla permanente. Las claves privadas se derivan de números aleatorios y nunca deben compartirse. Las claves públicas se pueden compartir para transacciones. Las cuentas de la cadena de bloques se derivan de claves privadas y públicas. Un escenario de ejemplo implica firmar y recibir un mensaje sin compartir la clave privada.

No se necesita conocimiento de código en absoluto. Ahora podemos adentrarnos en algunos conceptos básicos de blockchain. Aquí tenemos un diagrama del mundo de Web 2.0. Vamos a comparar la arquitectura de Web 2.0 con la de Web 3.0. Aquí, tenemos un diagrama de un usuario intentando acceder a un sitio web, una aplicación o cualquier otra cosa en su dispositivo móvil o de escritorio. Esa solicitud se envía al servidor web, que luego se envía al servidor de API, que a su vez se envía al servidor de base de datos. Una vez que se ha accedido a la solicitud y se ha obtenido los datos, se envía de vuelta al servidor de API, luego al servidor web y finalmente se muestra en el dispositivo del usuario. Ahora, en la arquitectura de Web 3.0, tenemos a alguien intentando acceder a una aplicación descentralizada que se construyó utilizando HTML, JavaScript y CSS. Lo que sucede es que esa solicitud se envía a una computadora o un nodo en la cadena de bloques y, una vez que se ha accedido, se muestra en el dispositivo del usuario.

Ahora que tenemos una visión general de alto nivel de la arquitectura de Web 2.0 y Web 3.0, podemos adentrarnos en el flujo de trabajo de la cadena de bloques y cómo funciona todo. Aquí hay un diagrama de alguien solicitando una transacción. Una vez que se ha transmitido la solicitud de transacción, el primer paso es que se envía a una red que consta de computadoras, también conocidas como nodos. Y lo que hacen estos nodos es validar la transacción y, una vez verificada, la transacción se coloca en un bloque de datos que contiene otros usuarios y otras transacciones, y luego se agrega a la cadena de bloques existente, donde permanece de forma permanente y no se puede cambiar. Y ahí es cuando se completa la transacción.

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

4. Firmas Digitales, Billeteras, Tarifas y Tipos de Tokens

Short description:

Es importante tener en cuenta que las billeteras de blockchain solo están ahí para asegurar el almacenamiento de claves privadas y firmar transacciones. Las transacciones con gas muy bajo probablemente sean ignoradas, y las tarifas de gas más altas resultan en un procesamiento más rápido. Los tokens fungibles son intercambiables, como los dólares o bitcoins, mientras que los tokens no fungibles (NFT) son únicos, como los autos con historial y datos específicos.

Es importante tener en cuenta que no es la clave privada la que se envía a Alice. Es una firma que acaba de ser firmada usando su clave privada la que se envía a Alice. Entonces, ahora cuando 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. Aquí es donde Bob enviaría su clave pública a Alice y luego Alice puede ingresar esa clave pública y verificar que el mensaje realmente proviene de Bob. Ahora que hemos repasado eso, las billeteras son la herramienta para firmar estas transacciones. Es importante tener en cuenta que estas billeteras de blockchain solo están allí por dos razones. Simplemente para asegurar el almacenamiento de tus claves privadas y como herramienta para firmar transacciones. Nuevamente, es importante tener en cuenta que la billetera de blockchain no contiene dinero ni criptomonedas. Simplemente está allí para almacenar tus claves privadas y como herramienta para firmar transacciones. Ahora veamos algunas de las tarifas. Estas tarifas de blockchain, que a menudo se llaman gas, así que repasaré estos tres conceptos. La tarifa en sí misma, cómo se determinan los precios del gas y cómo afecta la velocidad de la transacción a los precios del gas. Bueno, primero, las tarifas de transacción, que a menudo se llaman gas, en realidad puedes especificar cualquier cantidad que desees, pero es importante tener en cuenta que las transacciones con gas muy bajo probablemente sean ignoradas. Y luego también verás más adelante en la velocidad de la transacción cómo esto afecta tu velocidad. El precio del gas en sí mismo. Probablemente te estés preguntando, ¿cómo se determinan estos precios del gas? Bueno, son muy dinámicos y varían según cuántas otras personas estén enviando transacciones en ese momento. Todo depende de cuántas personas estén enviando transacciones en ese momento. Y eso fluctúa mucho, obviamente. Ahora, con respecto a la velocidad de la transacción, las transacciones con tarifas de gas más altas probablemente se procesen más rápido que aquellas con tarifas más bajas. Así como antes, si la tarifa de gas de la transacción es muy baja, es posible que simplemente no se procese en absoluto. Todo depende del precio de la tarifa de gas y las más altas se procesarán más rápido que las más bajas. Ahora, hablemos de los tokens fungibles versus los no fungibles. ¿Y qué significa exactamente eso? Los tokens fungibles son intercambiables. Si piensas en darme un billete de un dólar a cualquiera de ustedes, podría pedir un billete de un dólar a cambio y no tendría que ser ese mismo billete de un dólar. Un dólar sigue siendo un dólar, al igual que un bitcoin siempre será un bitcoin. No importa de dónde obtengas ese bitcoin, de quién lo obtengas. No son únicos. Un bitcoin siempre será un bitcoin. Ahora, en cuanto a los tokens no fungibles o NFT, no son intercambiables. Ahora, si piensas en cosas que son únicas, por ejemplo, tu automóvil sería algo que no es fungible, ¿verdad? Tiene un número de identificación único. Hay partes que tienen un historial específico.

5. Demo de Aplicación Web3

Short description:

Veamos una demostración de una aplicación Web3. Ve a docs.hyperverse.dev y navega hasta la sección de construcción de aplicaciones Web3 y configuración del entorno. Puedes empezar desde cero o usar el Monorepo de Hyperverse. Clona el repositorio, ve al ejemplo de dApp de Tribes, instala las dependencias con yarn y ejecuta yarndev. La dApp de ejemplo permite a los usuarios unirse, abandonar o crear tribus en la blockchain. Conecta tu billetera, únete a una tribu y confirma la transacción en MetaMask.

y data adjuntos que hacen que todo el automóvil sea único. Ese sería un ejemplo de no fungible. Ahora, veamos la parte divertida y realmente veamos una demostración de una aplicación Web3. Primero, vamos a docs.hyperverse.dev, que puedo dejar en el chat para que todos lo vean. Lo que haremos es ir a la sección de construcción de Web3 apps y luego ir a la configuración del entorno. Es importante tener en cuenta los requisitos del sistema, asegurándote de tener Visual Studio Code o cualquier otro IDE para editar JavaScript instalado, y luego obtener node.js y Yarn. Hay dos formas diferentes de hacer esto. Puedes empezar desde cero e importar estos paquetes de NPM a medida que construyes. Este sería el proceso para eso, donde puedes crear una aplicación Next y luego seguir desde allí. O lo que te mostraré hoy, solo por simplicidad, será usar el Monorepo de Hyperverse. Este repositorio consta de todos nuestros ejemplos de dApps, paquetes, todo lo que necesitas, y simplemente puedes ejecutar, ya sabes, yarndev, y luego tendrás una dApp de ejemplo ejecutándose para ti. El primer paso sería clonar este repositorio, lo cual ya he hecho. Y una vez que eso esté completo, puedes ir a la carpeta de Ethereum, y luego al primer ejemplo de dApp que te mostraré hoy, que será Tribes. Así que puedes hacer eso. Y luego lo único que tienes que hacer es ejecutar yarn para instalar las dependencias y luego ejecutar yarndev para que se ejecute. Eso ya lo he hecho por ti. Aquí tenemos la dApp de ejemplo de Tribes ejecutándose. Lo que hace esta dApp de ejemplo es permitir a los usuarios unirse, abandonar o crear tribus. Puedes pensar en las tribus como cualquier cosa, como, sabes, equipos y juegos a los que la gente puede unirse o incluso comunidades a las que la gente puede unirse y abandonar. Y todo esto sucede, obviamente, en la blockchain, hay un módulo inteligente adjunto a ella también. Pero hoy te mostraré cómo puedes interactuar con ese módulo inteligente usando solo JavaScript y llamar a todas estas funciones, actualizar data, actualizar información, todas esas cosas. El primer paso, obviamente, sería que el usuario conecte su billetera. Una vez que la haya conectado, puede unirse a una tribu. Entonces, primero hacemos clic en unirse a una tribu y verás que se está procesando. Lo que realmente está haciendo es obtener información de lectura de la blockchain del contrato inteligente y mostrar las tribus a las que puedes unirte. Es importante tener en cuenta que cuando estás leyendo de la blockchain, eso no cuesta dinero. Pero cuando realmente quieres interactuar y tal vez actualizar o poner información en la blockchain, habrá una transacción involucrada, costará dinero. Lo verás aquí. Así que si queremos unirnos a una tribu, eso sería actualizar la información de que este usuario se ha unido a esta tribu. Verás una ventana emergente de la extensión de la billetera MetaMask que dice `confirmar esta transacción`. Así que vamos a

6. Confirmación de Transacciones y Comienzo de una Batalla

Short description:

Esta parte cubre el proceso de confirmación de transacciones, visualización en el Explorador de Bloques, actualización de información en la blockchain y comienzo de una batalla entre tribus. El código se explica con más detalle más adelante.

y haz clic en eso. Te mostrará la tarifa de gas, los costos de la transacción, vamos a confirmar. Y ahora esto está procesando y actualizando esa información en la blockchain.

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

7. Inicialización de Hyperverse y Módulos

Short description:

Importamos cosas específicas de la blockchain e inicializamos el Hyperverse con la blockchain deseada. Podemos construir en múltiples blockchains agregando los módulos necesarios. El primer módulo es para las tribus, que permite crear, unirse y abandonar tribus. El segundo módulo es para la función de batalla utilizando Chainlink. Después de inicializar el Hyperverse, envolvemos toda la aplicación en el proveedor de Hyperverse para acceder a sus componentes anidados.

todo se está conectando al Hyperverse para que lo usemos. Así que verás aquí mismo que estamos importando algunas cosas específicas de la blockchain así como, ya sabes, el Proveedor de Hyperverse, todas esas cosas para inicializar el Hyperverse y obtener algunas de las funcionalidades que necesitamos para, ya sabes, leer la billetera del usuario y todas esas cosas. Y luego tenemos Tribus, que es el módulo inteligente que estamos importando aquí mismo. Y luego verás aquí mismo donde estamos inicializando realmente el Hyperverse. Así que todo lo que estamos haciendo aquí es asignar, ya sabes, qué blockchain queremos usar. Es importante tener en cuenta que también tenemos, también estamos en Flow, Medus y Algorand. Así que siempre puedes, ya sabes, cambiar eso a lo que quieras, y siempre cambiarías esto a, ya sabes, hyperverse-dash-flow o lo que sea. Así que puedes construir en, ya sabes, múltiples blockchains diferentes y simplemente hacer el mismo proceso de, ya sabes, los mismos módulos y todas esas cosas que desees. Y luego Red, obviamente estamos en Testnet. Y aquí es donde agregarías todos los módulos que estás usando, ¿verdad? Así que si estás usando múltiples módulos por diferentes razones, aquí es donde los agregarías. Así que repasaré ambos módulos. El primero fue Tribus que vimos donde estás, ya sabes, creando, uniéndote y abandonando tribus. Y luego el segundo módulo es esta selección aleatoria. Este módulo es en realidad para la función de batalla que utiliza Chainlink. Así que explicaré todo eso en un momento también. Ahora después de haber inicializado el Hyperverse, envolvemos toda nuestra aplicación en el proveedor de Hyperverse, y eso nos dará acceso a todos sus componentes anidados del Hyperverse. Así que básicamente, toda la aplicación ahora está conectada al Hyperverse en solo, ya sabes, unas pocas líneas

8. Conexión de Billeteras y Obtención de Datos de Tribus

Short description:

En esta parte, exploramos el archivo index.tsx y el componente nav para comprender cómo funciona la funcionalidad de conexión de billeteras. Importamos el gancho use Ethereum, que simplifica el proceso de conexión de billeteras y acceso a la información de la cuenta. Al pasar al archivo all-dash tribes, descubrimos cómo se muestran las tribus mapeando los datos obtenidos del gancho use tribes. Este gancho conecta el contrato inteligente y el código frontend, permitiendo que JavaScript interactúe con la funcionalidad del contrato inteligente. Al llamar a la función get all tribes, obtenemos una lista de las tribus disponibles en el contrato inteligente.

de código. Ahora el primer archivo que veremos es el index.tsx. Y aquí puedes ver que importamos el componente nav. Así que vamos a ver eso. Si vamos aquí al componente nav, podremos ver cómo funciona esta funcionalidad de conexión de billeteras. ¿Cómo logramos que funcione esta conexión de billeteras? Y Heeler ganó, por cierto, felicidades a quien dijo Heeler. ¿Entonces cómo funciona esta función de conexión de billeteras? ¿Y cómo vemos la dirección de la billetera y todas esas cosas? ¿Cómo funciona exactamente esto? En el backend, en realidad estamos usando algo llamado Rainbow kit, que maneja la mayor parte de esa funcionalidad por ti. Pero lo hemos simplificado aún más para ti. Todo lo que tienes que hacer es simplemente importar este gancho use Ethereum, que te da acceso a esta conexión y también te da acceso, ya sabes, a la dirección de la cuenta, todas esas cosas que puedes extraer del gancho use Ethereum como estamos haciendo aquí. Así que simplemente estamos extrayendo la conexión del gancho use Ethereum, y luego usando este componente de conexión aquí. Por sí solo, maneja todo eso por ti, donde se conecta la billetera, conoce la dirección del usuario, el saldo de la cuenta, todas esas cosas se hacen por ti en simplemente, ya sabes, tres líneas de código. Así que sí. Y ahora podemos volver al index.tsx y ver exactamente cómo nos unimos y leemos desde la tribu. Aquí, lo primero que se muestra es que, una vez que el usuario ha iniciado sesión, mostramos un botón para unirse a una tribu. Así que vamos a la ruta all-dash tribes. Y como estamos usando Next JS, eso nos llevaría al archivo all-dash tribes. Una vez que vamos a este archivo, podemos desplazarnos hacia abajo aquí y ver cómo se muestran todas las tribus, ¿verdad? Así que si volvemos aquí, hacemos clic en unirse a una tribu, ¿de dónde vienen estas tribus? ¿Y cómo obtenemos estas tribus? Así que si vemos aquí, estamos mapeando algo llamado data. Y muestra una imagen para cada una. Obviamente, esas serían estas tribus que se muestran en cada una de estas imágenes. ¿De dónde viene este data? Así que si nos desplazamos hacia arriba aquí, y vamos a data, vemos que estamos llamando algo llamado get all tribes en tribes. ¿Y de dónde viene tribes? Viene de este gancho use tribes. Y eso es lo que estamos importando aquí. Así que este gancho use tribes, puedes ver que hay, ya sabes, 15 funcionalidades más que puedes llamar. Todo lo que hace es esencialmente, ya sabes, es un archivo que está conectando entre el contrato inteligente y tu código frontend. Así que extrae toda la funcionalidad del contrato inteligente a JavaScript. Ahora puedes llamar a las funciones que quieras, usando solo JavaScript. Y realmente no necesitas conocer el lenguaje de programación del contrato inteligente en absoluto, ¿verdad? Ya que no estás creando un contrato inteligente, no estás interactuando, estás interactuando con él, pero solo con JavaScript. Así que esto sería como, ya sabes, tu push, fetch, todas esas cosas se harían llamando a estas funciones. Aquí, nuevamente, simplemente estamos extrayendo o usando la función get all tribes del gancho use tribes. Y luego es de donde estamos extrayendo este data. Y eso ya nos da, ya sabes, una lista de todas las tribus disponibles que

9. Unirse y abandonar tribus, Crear tribus personalizadas

Short description:

Mostramos las tribus mapeándolas y permitiendo a los usuarios unirse. La función mutate maneja la funcionalidad de unirse a una tribu, incluyendo la integración de MetaMask y la actualización de la cadena de bloques. Después de unirse a una tribu, podemos leer la información de la tribu usando la función get-tribe-by-account. Los datos incluyen el nombre, la descripción y la imagen de la tribu. La funcionalidad de abandonar una tribu es similar a la de unirse, llamando a la función leave-tribe en el gancho use-tribes. Es posible cambiar de tribus creando tribus personalizadas utilizando la arquitectura de inquilinos en los módulos inteligentes de Hyperverse.

Estamos en el contrato inteligente. Y simplemente mostramos esas tribus mapeándolas. Así que ahora, cuando alguien hace clic en la tribu, estamos poniendo información en la cadena de bloques, ¿verdad? Estamos actualizando la información y haciendo que el usuario se una a la tribu. Aquí es donde, ya sabes, al hacer clic se llama a esta función mutate. Ahora veamos qué hace la función mutate. Si subimos aquí, verás que es un patrón muy similar, ¿verdad? Estamos llamando a esta función join-tribe, que maneja todo por ti en el backend. Así que ya sabes cómo apareció la billetera de MetaMask, todas esas cosas se hacen por ti. Así que de nuevo, si hago clic en esto, todo esto se hace por ti. Todo esto se hace por ti en el backend. Confirma y luego actualiza la información en la cadena de bloques diciendo que te has unido a la tribu. Así que todo se hace con solo un par de líneas y llamando a esta función. Ahora podemos ver qué sucede después de unirnos a una tribu. Todo lo que estamos haciendo es leer, por lo que no hay ninguna transacción involucrada. Solo estamos obteniendo información de la tribu a la que se acaban de unir. Ahora podemos ver eso. Podemos ir al archivo my-tribe y verlo aquí. Verás que es un patrón muy similar. Estamos importando el gancho use-tribes, y todo lo que estamos haciendo es llamar a esta función get-tribe-by-account, que básicamente devuelve estos datos que consisten en el nombre, la descripción y la imagen de la tribu a la que te acabas de unir. Así que si miramos aquí en los datos, vemos que se muestra la imagen, el nombre, la descripción y un botón para abandonar la tribu, que es todo lo que tenemos aquí. Así que ahora puedes suponer, es una funcionalidad muy similar para el botón de abandonar la tribu, al igual que lo fue para unirse. Llamamos a esta función mutate, que simplemente llama a leave-tribe en el gancho use-tribes, y eso hace, nuevamente, todo por ti en el backend. Así que hacemos clic en abandonar tribu, hacemos clic en confirmar, actualiza la información en la cadena de bloques y te lleva de vuelta a la página de inicio. Ahora podemos ver algo en el archivo app.tsx. Probablemente te estés preguntando, ¿qué pasa si quiero cambiar estas tribus? ¿Qué pasa si quiero crear mis propias tribus personalizadas? No quiero usar estas tribus. Quiero crear las mías. Aquí es donde entra en juego esta arquitectura de inquilinos, que está en todos los módulos inteligentes de Hyperverse. Así que en realidad está leyendo desde esta dirección. Cualquiera puede crear una instancia y tenerla como propietario del inquilino y luego crear tribus o la cantidad de tribus que desee. Eso se guardaría en esa dirección. Básicamente está leyendo los datos de esta dirección que se encuentra en el contrato inteligente. Por lo tanto, puedes cambiar esto a tu dirección.

10. Funcionalidad de Batalla y Módulo Inteligente ERC 721

Short description:

Y mostraría todas esas tribus en lugar de las tribus que se muestran actualmente. Así es como tendrías tu propia aplicación personalizada y jugar con ella. Ahora veamos la funcionalidad de batalla. Estamos utilizando el módulo inteligente de selección aleatoria para manejar esto. Nos permite elegir aleatoriamente un número y determinar al ganador entre dos tribus. Ahora pasemos al módulo inteligente ERC 721, que muestra cómo crear y acuñar tu propio NFT. Puedes crear tu propia instancia de un token ERC 721 y gestionarlo utilizando el archivo app.tsx.

Crear una instancia, que sería crear tus propias tribus. Y mostraría todas esas tribus en lugar de las tribus que se muestran actualmente. Así es como tendrías tu propia aplicación personalizada y jugar con ella. Ahora podemos ver realmente esta funcionalidad de batalla y cómo funciona. Así que si volvemos aquí, podemos quedarnos aquí en el archivo App.tsx, y vemos esto, ¿verdad? Este es el módulo inteligente de selección aleatoria que estamos importando. Y luego lo estamos usando aquí. Así que este es el módulo inteligente que maneja esta funcionalidad de batalla.

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

11. Creación y Acuñación de Tokens

Short description:

En esta parte, crearemos una cuenta completamente nueva llamada Shane token y solicitaremos ETH de prueba a faucets.chain link. Después de actualizar, crearemos una nueva instancia con el nombre de token 'Shane codes' y el símbolo 'SC'. Podremos confirmar la transacción y ver el estado pendiente en Ether scan. Una vez creada la instancia, acuñaremos el token y nos aseguraremos de leer desde la dirección correcta actualizando el parámetro ID del inquilino.

podemos seguir adelante y crear nuestra propia instancia desde cero. Así que adelante y te mostraré eso. Lo que podemos hacer es crear una cuenta completamente nueva. Llamémosla, ya sabes, Shane token. Vamos a crearla. Y ya tenemos algo de ETH aquí, pero, ya sabes, un buen sitio web para obtener algo de ETH de prueba en Rinkeby para probar, sería este faucets.chain link. Así que lo que puedes hacer es solicitar ETH de prueba aquí, y luego automáticamente te transferirá algo de ETH de prueba para que puedas usarlo en transacciones, ya que, ya sabes, las transacciones cuestan dinero. Así que podemos hacer eso aquí. Se iniciará y luego pondrá, 0.1 ETH de prueba en mi billetera. Así que volvamos aquí, podemos actualizar, y luego podemos crear una nueva instancia. Así que asegurémonos de estar conectados a Shane token. Y luego podemos crear una nueva instancia. Llamémosla, ya sabes, nombre del token, Shane codes, ya que ese es mi nombre de usuario en Twitter. Y SC sería el símbolo del token. Así que podemos crear esto. Aquí está la transacción ya que estamos creando algo. Así que hacemos clic en confirmar. Y luego podemos ver esto de la misma manera que vimos las tribus. Podemos ver esto como pendiente y todo en Ether scan. Así que podemos ver, ya sabes, quién hizo la transacción, con qué está interactuando. Así que si abrimos esta dirección del contrato, podemos ver todas las interacciones que han ocurrido con este contrato. Así que esperamos a que se cargue esto, y luego volvemos. Y una vez que esto se haya creado, que parece que se ha creado, podemos proceder a acuñar esto. Pero antes de acuñar, tenemos que asegurarnos de que estamos leyendo desde esta dirección en este momento. ¿Correcto? Así que creamos un nuevo token, pero no estamos leyendo desde esta dirección en este momento, tenemos que cambiar eso en el parámetro ID del inquilino. Así que copiemos la dirección que acabamos de usar para crear este token. Vamos a cambiar esto por nuestra dirección. Guardamos eso. Actualizamos. Y ahora

12. Acuñación de Tokens y Acuñación Pública

Short description:

Ahora podemos acuñar el token a nuestra propia dirección y ver si el saldo se actualiza. Podemos ver la transacción en el Explorador de Bloques y ver las interacciones con el contrato. Las transacciones de tokens ERC 721 confirman la creación del token. Podemos transferir el token a otra dirección de billetera y alternar entre la acuñación privada y pública. Esto nos permite construir un sitio de acuñación pública de NFT sin escribir código de contrato inteligente.

asegurémonos de que la instancia se haya creado correctamente. Bien. Y ahora podemos seguir adelante y actualizar esto. Y luego podemos hacer clic en acuñar. Y ahora simplemente debemos ingresar una dirección a la que queramos acuñar este token. Así que lo que podemos hacer es simplemente pegar nuestra propia dirección. Así que podemos acuñarlo para nosotros mismos y ver si el saldo se actualiza a uno. Así que podemos proceder a acuñarlo, y nuevamente, si queremos ver esto, lo verás en el Explorador de Bloques, y verás el contrato con el que interactuamos. Y en realidad nos verás acuñando un token SC también en esta transacción. Pero podemos ver si se ha cargado todavía. Así que hagamos clic en balance de, solo para ver si esta transacción se ha completado todavía. Solo estamos esperando a que Rinkby Testnet complete la transacción. Pero una vez que se haya completado, verás el cambio en el saldo. Parece que está tomando un tiempo. Sí, pero básicamente puedes ver todas las interacciones con este contrato también, ¿verdad? Aquí es donde verías las interacciones. Vemos la dirección de billetera que acabo de usar. Así que puedes ver aquí mismo, mis transacciones y las transacciones de tokens ERC 721. Así que aquí, puedes ver que de hecho se creó el token, Shain codes y SC. Así que puedes ver todo eso aquí. Ahora, si volvemos, puedes ver aquí mismo, ahí lo tienes. Ahora muestra uno ya que hemos acuñado uno. Ahora es importante tener en cuenta que obviamente hay todas estas otras funcionalidades en las que podemos transferir esto a otra dirección de billetera y luego mostrar eso también. También podemos alternar esto para la acuñación pública. Así que en este momento, soy la única persona que puede acuñar porque soy el propietario del inquilino. Pero si quieres que cualquier otra persona venga a tu sitio y pueda acuñar como en un sitio normal de acuñación de NFT, también puedes hacerlo. Así que básicamente puedes tener una acuñación privada o una acuñación pública. Tienes ambas opciones para usar aquí. Esto es muy genial. Y básicamente puedes construir un sitio de acuñación pública de NFT y crear tu propio token NFT sin escribir una sola línea de código de contrato inteligente. Simplemente importas estos modules como cualquier otro NPM modules y luego llamas a estas funciones como desees. Así que, sí, eso fue lo que

13. Otros Módulos y Recursos

Short description:

Tenemos otros módulos como tokens ERC-20, staking y recompensas, y soporte para otras blockchains. Echa un vistazo a nuestro Discord para ver ejemplos de lo que otros han construido, incluyendo un módulo de tribus para comentar y chatear. Visita docs.hyperverse.dev para guías paso a paso sobre cómo construir aplicaciones web3 y nuestro sitio web para blogs sobre autenticación y otras características. No dudes en hacer preguntas en Discord o Twitter. Estamos aquí para ayudar y apoyar a otras blockchains en el futuro.

dos dApps de ejemplo que queríamos revisar hoy. También es importante tener en cuenta, sin embargo, que tenemos otros módulos que puedes utilizar. Obviamente, también tenemos uno para tokens. Así que en lugar de ERC-721, puedes crear tu propio token ERC-20. Y también tenemos un módulo de staking y recompensas, que permite a los usuarios hacer staking de tokens y luego otorgar recompensas en función de cuánto tiempo o lo que sea hayan hecho staking. Y al igual que estos módulos, también los tenemos en otras blockchains, como Flow, Medus y Algorand. Y estaremos agregando más y más blockchains a medida que se conecten a Hyperverse. Así que eso es prácticamente todo para la demostración. Y luego todos los recursos están listados aquí. Así que asegúrate de estar en nuestro Discord. Tenemos un canal para mostrar lo que todos han construido en Hyperverse. Así que hay un canal en el que puedes ver ejemplos de todos los demás que están construyendo en Hyperverse. Hay uno muy interesante que alguien hizo la última vez que hicimos esto llamado Fast Camps, que en realidad lo estaremos realizando muy pronto, que son básicamente mini bootcamps en los que pasamos por algo similar y luego construimos aplicaciones juntos y las mostramos y cosas así. Así que alguien construyó un módulo de tribus donde puedes comentar y chatear con los miembros de tu tribu. Eso estuvo bastante bien y hay muchas otras cosas que se están construyendo que puedes ver en nuestro Discord. Y luego, el más importante probablemente sea este sitio de documentación. Así que docs.hyperverse.dev y eso te mostrará paso a paso cómo clonar, cómo crear una aplicación web3 desde cero, cómo conectarla a Hyperverse, y todas esas cosas buenas. Y también tenemos blogs en nuestro sitio web que puedes acceder y que también van paso a paso desde cero, desde una aplicación básica de Next.js de cómo puedes construir la autenticación, como la función de Conectar Billetera, cómo construir también el módulo de selección aleatoria desde cero, todas esas cosas buenas. Y sí, si tienen alguna pregunta, no duden en contactarnos en Discord o en Twitter. Pueden enviarnos un mensaje directo con cualquier pregunta que tengan. Así que, les doy la palabra, y si alguno de ustedes tiene preguntas, no duden en hacerlas. También tenemos personas del equipo de Decentology aquí que pueden responder cualquier pregunta que tengan. También me encantaría escuchar a las personas que son nuevas y nunca han construido una aplicación Web3. Pueden escribir en el chat si no quieren encender su cámara y decir algo, pero supongo, ¿qué les pareció? ¿Les parece bastante fácil ahora construir aplicaciones Web3? No duden en hacer cualquier pregunta que tengan también en el chat. Aún procesando. No estás fuera del circuito. Nunca había oído el término contrato inteligente antes. ¿Estoy fuera del circuito? No estás fuera del circuito. Los contratos inteligentes son básicamente programas que se ejecutan en la cadena. ¿Tienen planes de soportar otras blockchains como Chia? Sí, planeamos soportar todas las principales blockchains a medida que se conecten a Hyperverse. ¿Qué tipo de aplicaciones se pueden construir utilizando estas herramientas?

14. Construcción de aplicaciones con módulos inteligentes

Short description:

Puedes construir aplicaciones utilizando la aplicación de tribus y combinar varios módulos juntos. La creación de NFT es un caso de uso popular. Los módulos inteligentes son codificados por desarrolladores de contratos inteligentes y verificados por registradores y auditores. Estos módulos pueden integrarse en aplicaciones JavaScript o React. Pronto se proporcionarán los pasos de implementación para producción. El orador creó un token NFT ingresando un nombre y símbolo para el token. Si encuentras errores, asegúrate de cumplir con los requisitos del sistema y busca ayuda en Discord. Es necesario ejecutar una aplicación React y un nodo Ethereum como host.

Entonces, una vez más, hay muchos ejemplos en nuestro Discord. Hay un canal donde las personas han construido aplicaciones. Pero en esencia, puedes construir, por ejemplo, si quisieras construir utilizando la aplicación de tribus, puedes hacer que alguien se una a un equipo o algo así, y luego puedes combinar varios módulos juntos, ¿verdad? Así que puedes tener tokens personalizados para cada equipo que esté en tu aplicación. Tal vez si una persona tiene X cantidad de tokens, obtienen acceso para leer más información, o luego obtienen acceso para chatear con otros miembros. Hay muchas variaciones diferentes que puedes hacer con los módulos que están disponibles en este momento. Pero obviamente, el sitio de creación de NFT sería uno obvio para que las personas lo usen. Y pueden construirlo bastante fácilmente. Y más y más módulos inteligentes, obviamente, vienen a medida que más y más desarrolladores de contratos inteligentes vienen y construyen estos módulos inteligentes para casos de uso específicos. Entonces, para los desarrolladores de JavaScript, todo lo que tendrías que hacer es buscar algunos módulos inteligentes y decir, hey, eso suena como una funcionalidad genial. Quiero agregarla. Y luego simplemente llamarías esas funciones o las importarías y luego las llamarías usando JavaScript y tendrías una aplicación funcional.

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

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

15. Transición a Web3 y Módulos Inteligentes

Short description:

Todo está hecho para ti con solo los paquetes en la red de prueba. Puedes consultar algunos excelentes artículos que te guían desde la construcción de una aplicación desde cero hasta la importación y conexión con Hyperverse. Tenemos publicaciones en el blog sobre imágenes aleatorias, autenticación y más. Estamos aquí para facilitar la transición de los desarrolladores de web dos a web tres utilizando su conocimiento de JavaScript y desarrollo web. Si encuentras algún problema, cambia a la rama de compilación de características. Toda la información está en la documentación, incluido el monorepo de Hyperverse y una introducción a Hyperverse. Los desarrolladores de contratos inteligentes pueden aprender cómo crear sus propios módulos inteligentes.

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

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

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

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.
JSNation 2023JSNation 2023
64 min
Querying Blockchain Data with GraphQL
WorkshopFree
Curious about how data works in the world of blockchain? Join Simon in an engaging session about The Graph, the decentralized indexing protocol that makes it easy for blockchain developers to search and query blockchain data. 
Table of the contents:- Understanding blockchain data- Anatomy of a smart contract- Indexing blockchain data with The Graph- Accessing data on The Graph- Recommended subgraphs- Writing subgraphs overview
React Summit 2022React Summit 2022
161 min
Web Accessibility in JavaScript Apps
Workshop
Often we see JavaScript damaging the accessibility of a website. In this workshop, you’ll learn how to avoid common mistakes and how to use JS in your favor to actually enhance the accessibility of your web apps!
In this workshop we’ll explore multiple real-world examples with accessibility no-nos, and you'll learn how to make them work for people using a mouse or a keyboard. You’ll also learn how screen readers are used, and I'll show you that there's no reason to be afraid of using one!
Join me and let me show you how accessibility doesn't limit your solutions or skills. On the contrary, it will make them more inclusive!
By the end, you will:- Understand WCAG principles and how they're organized- Know common cases where JavaScript is essential to accessibility- Create inclusive links, buttons and toggleble elements- Use live regions for errors and loading states- Integrate accessibility into your team workflow right away- Realize that creating accessible websites isn’t as hard as it sounds ;)
JSNation 2022JSNation 2022
99 min
Finding, Hacking and fixing your NodeJS Vulnerabilities with Snyk
WorkshopFree
npm and security, how much do you know about your dependencies?Hack-along, live hacking of a vulnerable Node app https://github.com/snyk-labs/nodejs-goof, Vulnerabilities from both Open source and written code. Encouraged to download the application and hack along with us.Fixing the issues and an introduction to Snyk with a demo.Open questions.
JSNation 2023JSNation 2023
117 min
How to Convert Crypto Currencies With GRPC Microservices in Node.js
Workshop
The workshop overviews key architecture principles, design patterns, and technologies used to build microservices in the Node.js stack. It covers the theory of the GRPC framework and protocol buffers mechanism, as well as techniques and specifics of building isolated services using the monorepo approach with lerna and yarn workspaces, TypeScript. The workshop includes a live practical assignment to create a currency converter application that follows microservices paradigms. It fits the best developers who want to learn and practice GRPC microservices pattern with the Node.js platform.
Prerequistes:- Good understanding of JavaScript or TypeScript- Experience with Node.js and writing Backend applications- Preinstall Node.js, npm- Preinstall Protocol Buffer Compiler- We prefer to use VSCode for a better experience with JavaScript and TypeScript (other IDEs are also ok)

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

Vue.js London 2023Vue.js London 2023
14 min
Domain Driven Design with Vue Applications
Introduction to Domain Driven Design- What is DDD?- Key principles of DDD- Benefits of using DDD in web application developmentDomain Modeling in Vue 3 Applications- How to design and implement domain models in Vue 3- Strategies for integrating domain logic with Vue's reactive data model and component-based architectureBest Practices for Implementing DDD in Vue 3- Strategies for organizing code in a way that follows DDD principles- Techniques for reducing coupling between domain and application logic- Tips for testing and debugging domain logic in Vue 3 applications
TestJS Summit 2022TestJS Summit 2022
21 min
E2E Tests for Web3 Applications
Top Content
We will go through a brief explanation of what is Web3 and the architecture of a web3 application. Then we will talk about how to end-to-end test, its challenges, some test tools that are available, and a demo using cypress and metamask.Agenda: What is Web3; The Architecture of a Web3 Application; Web3 E2E Tests Introduction; Web3 E2E Tests Challenges; E2E Test Tools; Demo.
React Summit 2022React Summit 2022
7 min
How to Share Code between React Web App and React Native Mobile App in Monorepo
Usually creating web and mobile apps require different tech stacks, and it is pretty hard to share code. This talk will show how I added a React web app and a React Native mobile app in the same monorepo using Nx, and how I optimized codeshare between react web app and react native mobile app.
React Summit 2022React Summit 2022
22 min
A Frontend Developer’s Guide to Web3
There is a lot of hype and interest around diving into the Web3 space, and it can be hard to manage the information overload and the emphasis on learning new languages to work on smart contracts. Many developers in the frontend space ask, “How much of this new information do I need to transition into web3?” The truth is as a React developer, the skills I know are essential in web3. Let’s add some context around how to leverage those existing skills to succeed in this new space.
In this talk, we’re going to explore how to build the correct context and the technologies to understand to help you dive into web3 as a front-end developer. We’ll go over popular packages like Ethers, which can be used in React applications to interact with wallets and existing smart contracts. We will also explore how you can leverage your Javascript skills to build full-stack dApps using managed services like Moralis and Thirdweb.
Let’s demystify some of the concepts in web3 and leverage our existing skills to start building.