1. Introducción al desarrollo de aplicaciones Web3
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
Comments