El ejemplo Dapplets × NEAR es un Dapplet (una aplicación de aumento) que puede analizar publicaciones de Twitter y almacenarlas en el contrato NEAR. También puede mostrar sus tweets guardados en una página superpuesta.
1. Introducción
Dapplets: aplicaciones que interactúan con páginas web, aumentandolas insertando diferentes widgets, analizan los datos de las páginas y agregan algunas funcionalidades nuevas. Pueden mejorar la experiencia del usuario cuando utiliza redes sociales, servicios de video y otras fuentes.
Los Dapplets usan la extensión que estamos creando. Esta extensión ofrece una API simple para desarrolladores de dapplets y grandes habilidades para la comunidad de dapplets. Nuestra plataforma es descentralizada. Usamos las redes NEAR y Ethereum para nuestros registros y contratos. También utilizamos almacenamientos descentralizados, como Swarm, IPFS y SIA para alojar código dapplets y archivos multimedia.
Para utilizar nuestra plataforma en primer lugar debes instalar la Extensión Dapplets. Actualmente se encuentra en la etapa alfa y no está publicada en Google Chrome ni en ninguna otra tienda. Para instalarla sigue estos pasos:
- Abra uno de los siguientes navegadores: Google Chrome, Firefox, Brave, Tor.
Los siguientes pasos se describen para Google Chrome. Los pasos pueden ser diferentes en otros navegadores.
- Descargue la Extensión Dapplets para navegador.
- Abra chrome://extensions en una nueva pestaña.
- Active el modo de Desarrollador y presione F5 para actualizar la página.
- Arrastre y suelte el archivo descargado en la página de extensiones. La extensión se instalará automáticamente.
- Haz clic en el icono de la extensión Dapplets en la barra de extensiones. Prueba la dapplet: Dapplets × NEAR ejemplo.
2. Tutorial
Estudiemos cómo funciona este dapplet y por qué Dapplets es una plataforma NEAR amigable.
El objetivo de este ejemplo es mostrar la interacción entre NEAR y Dapplets. Si este es tu primer encuentro con Dapplets, te recomendamos que primero pruebes nuestra documentación. Contiene varios ejercicios que explican cómo crear dapplets y adaptadores, desde simples hasta complejos. Recomendamos encarecidamente revisar los ejemplos ex01 y ex04 que describen cómo crear los dapplets y dapplets más básicos con una superposición. El conocimiento que obtendrás te facilitará la comprensión del ejemplo actual.
El código inicial para este ejemplo está en una rama separada: ejercicio.
Puedes clonar este repositorio. Pero no funcionará directamente. Intenta seguir los siguientes pasos para iniciarlo.
Veamos la estructura. Hay tres componentes: dapplet, overlay y contract.
Dapplet es el punto de entrada de la aplicación. Utiliza adaptadores para la interacción con páginas web, definiendo contextos para aumentar y widgets para insertar. Puedes encontrar las funciones principales de la extensión dentro de un dapplet. Usamos TypeScript en nuestro proyecto.
Definimos Overlay como un lugar donde un usuario puede hacer algo con datos analizados, conectarse a las funciones principales de dapplet a través del puente dapplet y administrar los parámetros de aumento. Es una parte importante de la aplicación, pero se ejecuta en otro entorno y se publica como un paquete separado. En la mayoría de los casos usamos React por ser uno de los frameworks más populares. Pero puedes usar el framework que prefieras o JavaScript puro o TypeScript.
El contrato no se conecta directamente con otros módulos y puede estar ubicado fuera del dapplet. Sin embargo, este simple contrato NEAR se crea específicamente para este dapplet. Por eso es conveniente colocarlo en la estructura de la aplicación.
Veamos cada módulo.
2.1. Dapplet
Mire el /dapplet/src/index.ts.
Al principio creamos una clase inyectable con el decorador @Injectable y usamos @Inject para agregar el Adaptador de Twitter como la variable de clase del adaptador. También crea el método activate. Se ejecuta cuando el adaptador seleccionado encuentra un contexto específico y se está cargando. Contendrá toda la lógica principal.
Agrega el botón a cada tweet. Pon este código en activate:
Mira el código. Obtenemos button del widget del adaptador. Luego, ejecuta el método attachConfig del adaptador. Recibe un objeto con los nombres de los contextos, que se utilizarán como claves. Los valores son funciones que reciben contexto analizado como único argumento y devuelven un widget o un arreglo de widgets. También puede devolver null, false o undefined.
Widget es una función que recibe un objeto que consiste de estados de widget. Los parámetros de estado se describen en la documentación de los adaptadores. Puedes encontrar la documentación del Adaptador de Twitter aquí. En nuestro caso agregamos una imagen al botón y la información sobre herramientas. exec es una función que se ejecuta cuando se hace clic en ella. Ahora solo mostramos el contexto analizado en la consola.
Ejecute el dapplet:
⚠️ Dado que el navegador está bloqueando páginas con certificados de seguridad problemáticos, ve a https://localhost:3001/dapplet.json cuando la aplicación se esté ejecutando y acepta ejecutarla en modo inseguro.
Abre la extensión. Ve a la pestaña Desarrollador y enciende el servidor de desarrollo: https://localhost:3001/dapplet.json.
Enciende la pestaña Dapplets. Verás la insignia de desarrollador cerca de nuestro dapplet. Enciéndelo.
Ahora puedes ver botones adicionales en nuestros tweets. Haz clic en el botón y abre la consola. Verás el contexto analizado del tweet.
¡Lo has hecho! ¡¡¡Felicidades!!! Vuelve al código.
Queremos mostrar datos analizados, pero no en la consola sino a los usuarios. Usaremos una superposición para esto. Pero antes de implementar la superposición, agrega la lógica de interacción entre la dapplet y la superposición a la dapplet.
Cambiemos nuestro código. Agrega la variable de clase privada _overlay de tipo any. En la activación agrega el siguiente código:
La función principal Core.overlay (los problemas de escritura se solucionarán pronto) recibe un objeto con un nombre de la superposición y un título de superposición y devuelve el objeto Overlay que guardamos en la variable _overlay.
Agreguemos el método openOverlay a la clase:
En este ejemplo, llamamos al método send de la superposición. Se necesitan dos argumentos: el nombre de estos datos y los datos para enviar a la superposición.
Agrega openOverlay a la función exec y pasa el contexto analizado a la superposición. Este es el código actual del dapplet:
Abre el manifiesto ./dapplet/dapplet.json.
⚠️ Dado que el navegador está bloqueando páginas con certificados de seguridad problemáticos, vaya a https://localhost:3000 cuando la aplicación se esté ejecutando y acepte ejecutarla en modo inseguro.
Aquí vemos la URL de la superposición denominada ‘overlay’ que se utilizará en el modo de desarrolladores. Durante la publicación del dapplet en el registro, la superposición se publicará en el almacenamiento descentralizado.
También vemos el Adaptador de Twitter en las dependencias. Estamos usando la versión 0.9.0 en el ejemplo.
Vayamos a la superposición.
2.2. Overlay
Como mencionamos anteriormente, la superposición se puede crear de la forma que desees. Usamos React en la mayoría de nuestros proyectos. No analizaremos todo el código de superposición, sino solo los puntos importantes para nuestros aspectos arquitectónicos.
Para interactuar con dapplet, instale el paquete npm @dapplets/dapplet-overlay-bridge:
Para obtener los datos del dapplet necesitamos la clase Bridge en la parte de superposición. Mira el módulo ./overlay/src/dappletBridge.ts. Aquí está el método onData donde nos suscribimos al evento ‘data’ que describimos en el dapplet.
Luego lo usamos en el módulo App.tsx.
Ahora guarda los cambios y vuelve a cargar la página de Twitter. Al hacer clic en el botón, verás la superposición con los datos del tweet seleccionado.
¡Eso es genial! Pero nuestro objetivo es guardar estos datos en NEAR y recuperarlos. Así que veamos el contrato.
2.3. Contrato inteligente NEAR
Mira el módulo ./contract. Hay un contrato inteligente NEAR simple escrito en AssemblyScript con create-near-app.
En ./contract/assembly/index.ts vemos un PersistentUnorderedMap llamado tweetsByNearId. Almacena una serie de datos de tweets serializados con el ID de usuario actual. Tiene métodos para guardar, eliminar y recuperar tweets guardados.
Puede encontrar todos los datos necesarios sobre cómo escribir, probar e implementar contratos inteligentes en la documentación oficial y en los cursos y guías de Learn NEAR.
Veamos cómo conectarnos al contrato inteligente y usar sus métodos en el dapplet.
Agregue el siguiente código al método activate del módulo ./dapplet/src/index.ts:
Existe un método Core.contract que recibe 3 parámetros: nombre de la red (“near” o “etherium”), nombre del contrato y objeto con métodos de visualización y cambio.
Ahora haremos que los métodos de contrato estén disponibles en la superposición. Para pasar los métodos a través del puente dapplets, agregue una función listen a la llamada de superposición. No tengas miedo, simplemente copia y pega este código.
Las últimas tres funciones asincrónicas pasan nuestros métodos de contrato a la superposición. Las primeras cuatro funciones deben emparejar la billetera con el dapplet. Para obtener el objeto Wallet usamos el método Core.wallet con el nombre de los parámetros name (near o ethereum) y network. La billetera tiene métodos isConnected, connect, disconnect y parámetro accountId.
El siguiente paso es cambiar ./overlay/src/dappletBridge.ts. Tenemos que hacer que las funciones que se describieron en el dapplet estén disponibles en la superposición. Copia el siguiente código en la clase Bridge:
Ahora podemos usar métodos de contrato en los módulos de superposición. Podemos autorizar el dapplet con la billetera NEAR testnet y guardar los datos de los tweets seleccionados en el contrato inteligente. También podemos ver nuestros datos guardados en la superposición.
Descomprime todo el código comprimido en ./overlay/src/App.tsx. Guarda los cambios y vuelve a cargar la página de Twitter.
Para terminar tendremos la adición de la capacidad de ver los tweets guardados sin analizar los nuevos. Para hacer esto, basta con agregar el método Core.onAction al activate en ./dapplet/src/index.ts y pasarle la función de abrir la superposición.
Ahora verás el icono de inicio cerca del nombre de los dapplets.
Un clic en el botón abre una superposición con los tweets guardados.
¡Felicitaciones a todos los que llegaron al final del tutorial! Esperamos que hayas tenido éxito.
Aquí está el resultado: dapplets-near-example
Si algo no funcionó para ti, o aún tienes algunas preguntas, eres bienvenido a nuestros chats en Discord y Telegram.
Gracias por tu tiempo. Esperamos que este nuevo conocimiento te sea útil, y continues desarrollando aplicaciones impresionantes y exitosas en la plataforma Dapplets utilizando las capacidades de NEAR Protocol.🚀✨
Contacto:
Web: dapplets.org
Docs: docs.dapplets.org
GitHub: github.com/dapplets
Discord: discord.gg/YcxbkcyjMV
Telegram: t.me/dapplets
Twitter: @dappletsproject
