Workshop Push Protocol - Buildathon - Ethereum Uruguay 2024

Transcript

[Música] Hola Qué tal mi nombre es jedit Romero soy embajadora de Push protocol y el día de hoy vamos a ver cómo poder implementar Push protocol en sus desarrollos Bueno antes de eso voy a mostrarles los servicios y productos que ofrece para que puedan ustedes complementarlos con sus dibs y bueno Push es un protocolo de comunicaciones web 3 e aquí podemos ver por ejemplo que hasta el día de hoy se han enviado 103 millones de notificaciones tenemos más

de 242,000 suscriptores y más de 450 integraciones totales esto significa que al ser un protocolo de comunicación nativa lo que hace es precisamente tener esas notificaciones y mensajes entre cadenas para daps y esto Solamente se puede hacer con una wallet no puede intervenir un número telefónico el nombre de una persona la identidad queda totalmente cubierta por la wallet de este usuario entonces totalmente una integración web 3 y qué es lo que viene a solucionar Push precisamente eh Hay muchas daus que por ejemplo tienen

problemas en la parte de sus sus votaciones porque simplemente los miembros no están enterados de que tienen que realizar esta actividad hay propuestas de gobernanza que se quedan paradas porque la mayoría de los miembros bueno no las conocen entonces la comunicación con las dados está ruta también por ejemplo la parte de defi Eh muchas daps fallan porque no notifican a los usuarios todos esos movimientos que están pasando en el mercado y bueno otra cosa más no por ejemplo los mercados ener sin notificaciones o comunicaciones importantes sobre cualquier metaverso que en el que tú estás participando

puede también que no haya la suficiente comunicación para que puedan interactuar Entonces qué es lo que está solucionando Push Push está solucionando precisamente con una acción que pueda haber por lo menos 10 interacciones más que entonces el usuario también esté informado en todo momento de lo que está pasando en el Canal de suscripción que ha estado O bien en el grupo donde se haya integrado y bueno la falta de comunicación sabemos que muchas de las di Apps web 3 bueno necesitan comunicación y carecen precisamente de esta herramienta tan sencilla y básica que todos utilizamos con día a día Pero

Push viene a solucionar precisamente esta parte y como dice aquí todo Inicia con una notificación y las notificaciones iniciaron precisamente con Push algo tan sencillo como es recibir este tipo de mensajes eh lo puedes recibir en tu móvil lo puedes recibir en tu navegador descargando unas extensiones que más adelante les vamos a compartir en dónde están estos recursos pero es así para que sus daps puedan tener comunicación con sus usuarios necesitan tener algún servicio de Push Cuál es la solución Bueno al ser un protocolo de comunicación abierta esta capa de

comunicación sirve para que puedan comunicarse las personas como les decía de en sus wallets no se revela la identidad de la persona también las comunicaciones son dinámicas pero sobre todo lo más importante es multicadena no solo trabaja sobre la red de eum además es gasfi eso es lo más importante porque sabemos que muchas de las acciones que hacemos en web 3 se cobran en cada transacción no se está cobrando nada al usuario y tampoco se le cobra a la persona que manda la notificación uno de los beneficios que para utilizar Push es precisamente esto no las finanzas descentralizadas pues reciben las notificaciones de las actualizaciones

los equipos de gobernanza pueden ser más funcionales y tener su participación en votos además bueno todo el ecosistema web 3 va a avanzar y mejorar esa experiencia de usuario que tanto se necesita Entonces al ser un protocolo de comunicación abierta y multichain nosotros podemos integrar esto en nuestros desarrollos en las aplicaciones Esta es la página de Push cabe Resaltar que bueno el ejemplo que vamos a ver el día de hoy es un ejemplo de defi pero como ya comenté lo podemos utilizar para múltiples cosas y acciones Los invito a que dice nuestro canal de YouTube donde también pueden ver más recursos pero

aquí en esta página les voy a mostrar e De hecho está en español para que puedan verlo aquí tenemos una integración de notificación de Push que Precisamente es una de las que vamos a utilizar podemos utilizar por ejemplo los servicios de videollamadas también no solamente en los mensajes recordemos que es entonces agnóstico de cada podemos tener eh llamadas en tiempo real también y también podemos utilizar la parte de los Push spaces todo esto sin que se revele la identidad de la persona

aquí en desarrolladores que es la parte que nos interesa para poder hacer las implementaciones Entonces nos vamos a ir a la documentación para video para spaces varios ejemplos y todo lo que vienen los sdk de Push y todo lo que podemos implementar yo los invito a que revisen la documentación en caso de que quieran hacer alguna implementación para su desarrollo Aquí les estoy compartiendo unos tópicos donde pueden ver bastante información de soporte técnico de Push e de hecho vienen estos QR que pueden

escanear tiene la integración aquí bastante código y otra cosa que les vamos les voy a compartir es precisamente estos códigos son los que vamos a estar utilizando en Push notification y en Push chat simplemente esta parte ustedes ya la tienen que integrar a lo que es su Front para que les pueda funcionar en un momento vamos a hacer esta integración [Música] bien ahora lo vamos a hacer en torno a la implementación de parte del Front yo les estoy dejando aquí en el video El enlace de este repositorio de giob pero también va a estar en la plataforma

donde ustedes están consultando precisamente toda la documentación de Push si tienen alguna duda de este repositorio yo Les recomiendo que asistan a los canales de discord que es donde vamos a poderlos asistir de una manera más personalizada respecto a estos dos eh repositorios que vamos a estar compartiendo bolsito y yo tenemos dos formas para poder trabajar sobre este repositorio la primera es pueden hacerlo descargando o clonando este repositorio aquí viene precisamente y bueno eh lo pueden usar con visual code que es lo que básicamente ya todo el mundo usa

o bien lo podemos usar desde el mismo Software que aquí nos ofrece github que es este un jetbot y bueno vamos a hacerlo con una máquina virtual por qué es mejor con una máquina virtual con una máquina en la nube porque de esta forma no estamos utilizando los recursos de nuestra computadora a veces tenemos algunas dependencias o algunos programas que hacen que las cosas que instalamos no funcionen y se rompan pero si nosotros utilizamos una máquina virtual lo que vamos a hacer es que vamos a tener todos los recursos que nos están ofreciendo para nosotros poder eh desarrollar deployar y así ejecutar todos nuestros programas sin gastar

recursos de la máquina recordemos que cuando nosotros estamos haciendo este tipo de trabajo descargamos dependencias y a veces suelen ser pesadas Entonces esto es una gran herramienta no solo para implementaciones de Push sino en general que ojalá puedan experimentar después Bueno vamos a escoger entonces un github code spaces y si se dan cuenta aquí me dan dos opciones si quiero con dos cores 8 Gb en RAM y 32 de almacenamiento para lo que vamos a usar la primera opción es suficiente Y en este momento se va a

empezar a abrir Bueno ahí podemos ver que ya se abrió nuestro repositorio y bueno como toda instalación aunque esté en la nube vamos a instalar la dependencia de yarn que es la que aquí nos recomiendan si no les aparece la parte de la terminal se pueden ir a estos tres tres líneas en terminal nuevo terminal de esta forma les puede aparecer la terminal Entonces vamos a poner jar install y vamos a esperar a que todas las dependencias carguen esto de qué va a depender va a depender mucho de la

velocidad del internet con el que ustedes están manejando entonces aquí sí tenemos que esperar yo lo que voy a hacer es voy a pausar el video y lo voy a regresar una vez que haya ya estado instalado bueno ahora sí ya terminó la instalación ya me dijo que está hecho y antes de darle un Start vamos a a modificar varias cosas de esta de esta programación para que podamos ver la parte de de las notificaciones Entonces vamos a escribir vamos a buscar este archivo

Push notification es lo que vamos a escribir y bueno este es parte de El de lo que yo les estaba mostrando en un principio de las dependencias que están aquí y de todos los recursos que tiene Push el sdk que se puede usar para solamente venir e implementarlo en una programación ya existente aquí qué nos va a interesar en esta programación lo que nos va a interesar es de que Qué ambiente primero vamos a estar trabajando si en staying o en mainet entonces ahorita nosotros lo estamos poniendo en staying este voy a voy a arrancar un

poquito para que vean De qué trata este desarrollo lo que hace Esta diap es mandar tokens hacia otra wallet y te llega la notificación una vez se hizo eso Entonces si se dan cuenta solamente tecl jarn St y me puso en el puerto 3000 un local Host que es el que ahorita se me abrió también me había salido otro mensaje si quería hacerlo eh público o privado eh De preferencia pónganlo público porque cuando no lo aceptan no les carga este este bueno el archivo que ahorita vamos a ver no toda

la página que se tiene que visualizar bien esta es la diap donde nosotros podemos mandar eh tokens De hecho aquí dice interactuar con tus contratos y lo que hace Precisamente es esto no de que una vez de que nosotros mandamos un token entonces eh nos va a llegar a nosotros nuestra notificación entonces parte de lo que tenemos de cambiar es esto yo ya tengo una clave secreta que

hice exclusivamente para este ejemplo Entonces vamos a agregarla De hecho aquí lo pueden encontrar para que les pueda abrir más rápido que bueno ahorita ya lo podemos visualizar así tal cual hacemos control c control B bien Ahora a este archivo que se acaba de copiar lo vamos a renombrar Para dejarle solo el nb y Aquí vamos a poner la eh la clave privada de la wallet que vamos a

usarlo no voy a cambiar de pantalla para que no lo visualicen y por favor cuando ustedes hagan también este tipo de práctica No muestren sus llaves eh privadas porque de esta forma también pueden vaciarle los fondos bueno para entender un poco la estructura de lo que estamos viendo aquí está el firmante y este como les había comentado es importante porque vamos a ver sobre qué sobre qué red es lo que con la que estamos trabajando si es con pruebas esteen o ya en mainet no producción entonces aquí si fuera pues ya mainet sería prod mientras

ahorita lo vamos a dejar así para este ejercicio Este es el pues prácticamente el nombre del Canal ahí le pueden poner lo que quieran en el título es el título que va a recibir la notificación recuerden las comillas es importante que venga como cadena Esta es la parte del Body de el mensaje y aquí es donde se inicializa precisamente la estructura de este mensaje aquí tenemos un cta que puede ser un enlace hacia nuestro aplicativo hacia donde quisiéramos mandarlo no pero realmente esta parte es opcional hay

otra parte que quiero mostrarles que es precisamente donde se validan eh el firmante si es delegado si es una wallet válida por ejemplo aquí que eh la wallet Pues realmente empiece con un 0 x no que recordemos que dependiendo las cadenas Entonces es la también la dirección de la wallet pero prácticamente con todo esto que hicimos nosotros ya está hecho eh la notificación y justo Ahora la vamos a ejecutar Bueno una vez que ejecutamos el jn St

así se visualiza esta diap que es la que va a hacer el envío de tokens hacia otra wallet y nosotros recibir la notificación Entonces vamos a copiar la wallet a donde queremos recibir los fondos que en este caso es esta Recuerden que abro otro navegador porque estoy interactuando con dos wallets diferentes vamos a pegarla y ya me aparece ahí ahora voy a poner una cantidad x para mandar si yo no tengo esos fondos entonces la aplicación me va a decir No tienes esos fondos ni no los cubres y tampoco cubres el

gas lo que les decía me dice cuánto tengo Entonces vamos a ponerle ahora esta cantidad pero vamos a quitarle un numerito para que me quede el gas y justo ya se va a hacer precisamente el envío de este dinero Ya lo voy a mandar hacia esa wallet recordemos que estamos en un ambiente de pruebas Aparte ahorita estamos interactuando en una leer no entonces las comisiones son un poquito más bajas pero este vamos a esperar a que se haga

la transacción y bueno la transacción ya se hizo y para poder ver el resultado Pues aquí está el bloque minado en el que se hizo precisamente esta transacción y así Ahora cuando ustedes interactúen en la parte de las notificaciones van a ver que e ya está recibido esa notificación de que recibieron esta cantidad de tokens

precisamente tienen que instalar lo que es las aplicaciones en su extensión en su browser para que les puedan llegar y bueno Esta es la parte de notificaciones ahora vamos a revisar que efectivamente el mensaje se haya enviado y nos vamos a la parte de El entorno de pruebas porque recordemos que ahí fue donde configuramos nuestro entorno para enviar esta notificación entonces aquí ya tengo un request y recordemos

que tengo que aceptar esto para poder interactuar bueno está nuestro mensaje simplemente le ponos Okay y listo entonces ahí podemos ver que ya tenemos la interacción precisamente de wallet to wallet [Música] Hola soy embajador de P protocol y el día de hoy estaremos realizando una implementación simple de envío de mensajes wallet wallet Qué necesitamos para esto pues una wallet de pruebas la

documentación y el repositorio que les voy a dejar en el enlace para esto lo que vamos a necesitar es de este repositorio va a tener el template con el que nosotros vamos a iniciar la implementación procedemos a descargarnos [Música] en este caso vamos a realizar en este caso vamos a realizar el clonado de repositorio mediante git Clon el nombre del repositorio y le damos enter una vez ya descargado el repositorio vamos a en revisar las

branches que existen notamos que tenemos dos Branch en esta ocasión lo que vamos a elegir va a ser un checkout a la brancha de implementando chats esta Branch como tal Ya contiene muchas de las dependencias que se van a requerir para la implementación por lo que simplemente es realizar ya inst esto descargará a su vez todas las dependencias necesarias dentro de nuestra PC esta implementación se facilitó para que las aquellas personas que quieran ingresar directamente con la implementación puedan tomar al menos la primera base en la carpeta de paquetes

vamos a encontrar la carpeta de nexts que es el Front dentro de esta vamos a encontrar una carpeta llamada Services y dentro la carpeta de chats que es la que nos interesa esta contendrá en principio nuestro p chat e nuestro archivo p chat la cual contiene lo siguiente primero un firmante que es una wallet que se crea aleatoriamente a continuación lo que se debería hacer es lo siguiente es inicializar eh con el sdk de Push y el firmante que nosotros tenemos en un ambiente productivo o en el ambiente de pruebas el wallet recipient no es más que la wallet a la que nosotros estaremos enviando

estaremos enviando en esta ocasión los mensajes simplemente lo hemos nombrado como un pequeño canal que vamos a inicializar mediante su método de chat y a su vez este va a enviar mediante la función llamada sent a la wallet del del recipiente finalmente enviamos un consol para poder ver cuál fue el contenido que estamos enviando en el mensaje y a continuación procedemos a inicializar el Stream el Stream no es más que el flujo de datos que se va a generar dentro del chat es decir todo lo que se está enviando o lo que se está recibiendo lo vamos a encontrar eh gracias al al

Stream lo que vamos a hacer es lo siguiente eh dentro de Stream vamos a conectarnos mediante la función eh on y le vamos a indicar que nos muestre Cuál es el mensaje Eh ya cuando envios el mensaje vamos a validar primero si es que este mensaje es un es un mensaje como tal un Stream o es un objeto y Finalmente nos conectaremos al Stream para garantizar que exista este flujo dentro de la de la diap que nosotros estamos manejando adicionalmente vamos a poder ver dentro de nuestra página de nuestro page que tenemos el el primer inicio que es la parte de iniciar chat que contiene un input donde nosotros enviaremos un

mensaje y un botón que nos servirá para enviar este mensaje inicial como tal nuestra nuestra diap con Start en este caso este es nuestro input aquí tenemos nuestro mensaje y aquí tenemos el botón de enviar si en este momento lo hacemos pues nos producirá un error ya que no tenemos ningún ninguna wallet hacia la que queramos enviar exactamente con esto garantizamos que ya estamos consumiendo el sdk de Push ahora para poder configurar

completamente Vámonos a la al archivo de Push chat y Aquí vamos a primero a utilizar nuestra nuestra wallet del diap lo copiamos y lo pegamos aquí primero debemos saber que estamos utilizando la creación de una wallet de forma randomica lo que significa que cuando nosotros enviamos el mensaje desde este signer Es decir desde una wallet siempre va a ser una nueva wallet cada vez que enviemos el mensaje Vamos a darnos cuenta cuando interactuemos ahora limpiamos nuestra consola le ponemos en mensaje 01 le damos clic en

enviar y como se puede ver ahora ya funciona el mensaje nos indica que tiene toda esta información correspondiente al mensajero y nos dice el tipo de inscripción el chat ID que se utilizó y el mensaje de qué tipo fue en este caso fue una request Ahora sí necesitamos hacerlo desde a.p. org Nos dirigimos a la sección de chats nos conectamos una vez que nos hayamos conectado vamos a tener lo siguiente tenemos una nueva request que nos dice mensaje 01 este mensaje 01 eh debe ser primero aceptado para poder eh garantizar que se pueda tener la interacción entre los chats con esto

Ahora sí yo puedo enviar mi mensaje le puedo decir Saludos y lo envío de esta manera si nosotros regresamos a nuestro eh a nuestro día podemos ver que en el Stream Se ha producido exactamente lo que nosotros esperábamos la lectura del mensaje que se encuentra dentro del objeto que se llama mensaje una vez que ya tenemos esto pues vamos a comenzar a mejorarlo eh nuestra nuestra implementación para esto podemos hacer lo siguiente en la carpeta app vamos a crearnos un pequeño folder que sea por ejemplo chat dentro del mismo vamos a crearnos un archivo que sea page.ts en el mismo que nosotros vamos a

eh simplemente hacer un export de F y la página que nosotros vamos a llamarles se va a llamar Perfecto perfecto no hay que olvidarnos poner export default vamos a tener nuestra nueva página en la que vamos a realizar toda la implementación un poco más pulida para esto qué vamos a necesitar primero vamos a llevarnos este contenido que ya teníamos del chat A la nueva página Perfecto aquí nos va a decir que necesitamos el mensaje el seteo del mensaje la importación de el chat message para lo cual importamos y nos

creamos un pequeño mensaje perfecto importamos todo lo que se necesita y en esta ocasión ya deberíamos tener nuestro nuevo mensaje aquí nos dice que deberíamos agregar el para que no tengamos un tipo de error perfecto una vez que tenemos esto vamos nuevamente a validar lo siguiente revisemos el envío pongámosle esta vez pongámosle mensaje de prueba y realizamos el envío si todo salió bien e el mensaje debería

mostrarse de la siguiente manera dentro de nuestro de nuestro diap como tal vamos a poder ver que ahora tenemos un nuevo request que tiene un nuevo mensaje de prueba verdad no olvidemos conectar siempre nuestra nuestra wallet validamos el request nos dice mensaje de prueba y le damos en aceptar la implementación hasta el momento ha sido bastante sencillo lo que necesitamos ahora es comenzar a configurar ya que hasta el momento nos damos cuenta que cada vez que realizamos una nueva petición o un nuevo envío del mensaje se crea una nueva nueva Por lo tanto nosotros vamos vamos a comenzar a darle forma a esto primero vamos a garantizar que nuestra wallet que se genere de forma

randomica durante la sesión sea una wallet única para lo cual vamos a utilizar el siguiente el signer que nosotros estamos utilizando simplemente lo vamos a colocar como un signer fuera de la función para que se cree una sola vez primero vamos a comenzar a validar aquí lo que vamos a garantizar en esta ocasión es garantizar el envío con la misma wallet lo enviamos nos debe aparecer efectivamente el mensaje que fue enviado Y si regresamos en esta ocasión podemos ver que ya estamos interactuando con la misma web Esto es lo primero que necesitamos

ahora vamos a mejorar un poco la interfaz de aquí en adelante la implementación como tal Es simplemente actuar con cada una de las de las partes que ya existen dentro de esta función para poder captar los mensajes nuevos y si es que es necesario crear un nuevo eh generar el historial como tal de los mensajes que contiene cada una de estos wallets para lo cual lo que primero vamos a utilizar en este caso es en nuestra eh en nuestra diap estamos viendo que la información de mensaje enviado eh contiene todos los siguientes parámetros que significan eh Quién envió Y a quién envió y cuál es el mensaje obviamente este mensaje como lo podemos

ver aquí está cifrado entonces eh Cómo capturamos esta información a través de El stream.on aquí es donde deberíamos poder ver el mensaje que fue enviado ya de forma legible nos indica que todo está bien revisamos [Música] nos conectamos a la diap revisamos este mensaje excelente lo probamos decimos todo

Ok ahora podremos ver dentro de nuestro nuevo Front como ya estamos capturando esta información ahora cómo deberíamos hacer un orial correctamente lo correcto sería que yo pueda tener los mensajes que envío y los mensajes que recibo pero si lo hiciera de manera programática podría resultar algo tedioso y hasta cierto punto difícil de tratarlos para esto p ofrece también dentro de su documentación la creación de directamente de una variable que permita obtener el histórico de una wallet para

el cual vamos a crearnos una nueva constante en la que le vamos a decir que son el history con una wallet que nosotros tenemos y Esto va a ser una función a correspondiente al usuario que yo tengo punto chat punto history y la wallet a la cual yo le estoy enviando los mensajes o con la que yo estoy interactuando esta información cuándo debería mostrarse normalmente debería

mostrarse cuando exista un flujo un cambio directamente en nuestro en nuestro flujo en nuestro chat en la conversación de nuestro chat simplemente vamos agregar como un conso log de esta información perfecto de esta manera vamos a hacer historial historial lo vamos a enviar me dice que fue enviado correctamente reviso la request de mi acepto el historial y le digo nuevo chat si me fijo ahora he recibido este objeto

que se llama e wallsito history wallet en este momento dice que contiene un solo nodo y este nodo me dice que contiene la palabra historial excelente finalmente lo que vamos a realizar ahora es vamos a separar un poco las variables que teníamos en nuestro mensaje de esta manera lo que vamos a lograr es primero identificar el mensaje y el address Cuál es el objetivo simplemente es mejorar un poco la interfaz de del usuario ya que cuando se trata de un eh de un chat como tal uno esperaría que podamos ver quién nos

envió y cuál fue el mensaje simplemente para identificarlo por lo que nosotros vamos a distribuir el mensaje en estos dos parámetros el primero eh corresponde al parámetro de de address Mientras que el segundo corresponde al parámetro de mensaje lo que vamos a hacer es devolver este valor y lo escribimos de mejor manera para que eh evitar cualquier error y al final vamos a agregar estos dos mismos parámetros dentro de elray que se espera dentro del history Eh así que que vamos a proceder a copiar estos dos valores eh

vamos a incluirlos dentro de nuestro mensaje de respuesta y agregamos primero eh la wallet del firmante Es decir de quién está enviando el mensaje y cuál fue el contenido que se está enviando esto simplemente es como para garantizar que todos los la información se encuentre actualizada en este momento lo que vamos a proceder es a realizar una última prueba directamente en el Front con eh una nueva wallet vamos a escribir el siguiente mensaje eh lo enviamos si todo está bien eh debería darnos exactamente este mensaje de confirmación ahora vamos a aceptar la

request y vamos a interactuar un poco con ella le vamos a escribir el siguiente mensaje Una vez que se ha enviado pues vamos a agregar otro mensaje adicional excelente con esto lo que eh vamos a revisar es primero que todo el conjunto de de mensajes que tenemos eh los podemos encontrar directamente en esta eh directamente en esta estructura en este objeto por lo tanto pues hay que recordar que toda esta información o todos estos atributos que nosotros

estamos utilizando directamente los hemos tomado desde la estructura que el mismo eh sdk de protocol nos está entregando perfecto simplemente para garantizar que el mensaje llegue correctamente vamos a crearnos una nueva eh constante la cual va a ser una división como nos hemos dado cuenta existe eh un nombre adicional dentro de nuestra de nuestra wallet for from theid en la que nos indica que tenemos un prefijo conocido como eip con esto lo que vamos a lograr es a

nivel de Front simplemente entregarle la wallet completa que nosotros que el Front mismo espera vamos a hacer el envío del mensaje y si todo está bien ya en este punto podremos eh validar nuevamente actualizamos perfecto e interactuamos con el mensaje envios más de un mensaje para simplemente para garantizar la comunicación y nos dirigimos al Front en este caso podemos ver que los mensajes como tal se están ya actualizando y que no nos debería dar ningún tipo de error hay que acordarnos que este componente que se encuentra eh con elers de la wallet corresponde a a uno de los

componentes del directamente del proyecto template que estamos utilizando exacto de esta manera ahora podemos ver ya el ejemplo un poquito más Pulido lo único que nos restaría en este caso es agregarle algo de estilo así como se realizó en este punto el historial también se puede mejorar otros aspectos a nivel de la ui Todo queda a manos de quien lo está trabajando Al aplicativo como tal bueno eso ha sido todo Espero que este conocimiento sea eh de mucho provecho para ustedes se despide de ustedes eh bolsita [Música]

i