React en la Industria de la Robótica Autónoma

Hola a todos. Soy Hamza Hawi, ingeniero de software en el Centro de Investigación de Robótica Autónoma en TII. Y lo que me llevó a dar esta charla hoy es que recibí muchas preguntas sobre qué hace un desarrollador de JavaScript en el Centro de Investigación de Robótica Autónoma, o cómo podemos combinar JavaScript y robótica, o cuál es la relación entre JavaScript y robótica. Y para responder a estas preguntas, comenzaré definiendo quiénes somos. Soy parte del Centro de Investigación de Robótica Autónoma en TII, y lo que estamos tratando de hacer es investigar, desarrollar e innovar nuevas tecnologías para robots con el fin de hacer que sean completamente autónomos o realicen tareas específicas de forma individual o combinada. Y tenemos una flota mixta de robots, que pueden ser autos autónomos, drones o incluso barcos. Y también tenemos autos de carreras. Y para poner un poco de contexto a la discusión, mostraré una descripción arquitectónica. Tenemos una flota mixta de robots que envían datos continuamente al servidor, y esos datos se enviarán al lado del cliente a través de web sockets. Y para el lado del cliente, podemos tener estaciones de control, laptops, tablets o cualquier lugar necesario para tomar el control de ese robot. Ahora es cuando entra en juego React, porque estamos tratando de desarrollar lo que se llama un software de planificación de misiones. Un software de planificación de misiones es un software que te permite, digamos, optimizar una ruta o dibujar un camino específico o una meta para que el robot vaya de forma autónoma. Y si intentamos ver la captura de pantalla genérica que tengo a la izquierda, podemos ver que tenemos tres partes principales del sistema. Primero están los mapas y la información geográfica. Y para tener una vista clara de lo que está sucediendo, necesitamos tener una transmisión proveniente del robot. Por eso necesitamos componentes multimedia. Y si queremos, digamos, controlar esos robots y el modo de operación, aún necesitaremos leer algunos datos de los joysticks que tenemos. Y por eso desarrollamos algunos componentes de control para tomar el control de ese robot. Ahora, ¿por qué decidimos elegir React? Como sabemos, las aplicaciones de robótica necesitan un buen rendimiento y capacidad de respuesta que te permita operar fácilmente esos robots. Y si intentamos ver y analizar nuestro software, veremos que recibimos como mínimo 10 mensajes por segundo para un robot, ya sean mensajes de datos o del estado de los sensores. Y también tenemos varios vehículos operando al mismo tiempo. Por lo tanto, en este punto, el rendimiento es muy crucial. Y por eso decidimos usar React, porque React, debido a su memorización y los métodos del ciclo de vida de los componentes, nos ayudará a evitar renders innecesarios eligiendo exactamente cuándo cada componente debe volver a renderizarse. Y también, debido a la memorización, la memorización nos dará, digamos, la capacidad de reducir el consumo de energía computacional simplemente almacenando en caché las operaciones que hicimos antes. Y una de las cosas clave también es el gran apoyo de la comunidad que tiene React, porque como saben, React ha estado aquí durante muchos años, y la comunidad está creciendo y tendrás una amplia selección entre bibliotecas y paquetes que puedes usar. Y esto nos ayudará a evitar reinventar la rueda cada vez. Ahora comencemos con la primera parte, que son los mapas. Como saben, cuando quieres elegir un mapa para comenzar a trabajar con él en React, tenemos múltiples opciones. Pero para nosotros, decidimos elegir Leaflet.

Leaflet, como saben, es un paquete de código abierto y tiene múltiples complementos y te brinda la flexibilidad que necesitas para operar en múltiples tipos de vehículos, drones, autos o barcos o lo que sea. Esa flexibilidad nos ayudó a cubrir la mayor cantidad de casos de uso que podemos. Ahora comencemos con la primera funcionalidad que tenemos. Como saben, necesitamos enviar una meta o ruta al vehículo y si estamos operando con drones, necesitamos definir la zona en la que estamos operando. Para eso, utilizamos el paquete llamado react-leaflet-draw. Es un paquete que viene con una larga lista de herramientas de dibujo, desde, no sé, líneas, círculos, rectángulos, marcadores, que puedes usar. Y viene con múltiples conjuntos de devoluciones de llamada para cada evento, para la creación o incluso cuando borras o editas una de las rutas que dibujaste antes. Y te dará el vector que contiene todos los puntos de ruta dibujados antes y puedes usarlos como quieras según tu caso de uso y tu aplicación. Ahora, ¿qué pasa si queremos reducir la cantidad de internet que estamos usando o qué pasa si estamos operando sin internet? Para eso, decidimos usar un paquete llamado react-leaflet-offline, pero antes de hablar sobre ese paquete, intentemos ver y entender cómo Leaflet está representando los mosaicos, que es el diseño que colocamos en la parte superior del mapa. Y si vemos esto, encontraremos que React no está representando todo el mapa al mismo tiempo, sino que los trae como un conjunto de imágenes rectangulares y las carga. Y esto nos permitirá evitar representar un mapa completo al mismo tiempo. Entonces, si queremos almacenar en caché esas imágenes, un enfoque posible es crear tu propio servidor que enviará esas imágenes basadas en X, Y y Z, que es el nivel de zoom, y enviarlas a tu frontend. Y otro enfoque también es utilizando lo que se llama react-leaflet-offline. Como puedes ver aquí en este ejemplo, al usar react-leaflet-offline, tendrás la opción de guardar un área específica en la que estás haciendo zoom en este momento o eliminar esa área y guardarla nuevamente. El mapa se actualiza, si hay alguna actualización en el mapa, y en azul, esos rectángulos en azul, como vemos aquí, son las áreas que guardamos en diferentes niveles de zoom. Y lo siguiente que nos hizo elegir Leaflet es que en algunos casos de uso, tal vez no estemos operando en la Tierra. Tal vez estemos creando alguna aplicación aeroespacial donde estemos operando en un mapa diferente al mapa que estamos utilizando. Entonces, React-Leaflet nos brinda la capacidad de crear nuestro propio sistema de referencia de coordenadas basado en los requisitos que tenemos. Para esto, también puedes definir cuántos píxeles tendrás por cada metro y colocar tu origen del mapa. Puedes elegir el origen, definirlo como quieras. Incluso el sistema de coordenadas, puedes poner tu propio sistema de coordenadas según tu caso de uso. Lo segundo es que después de definir exactamente tus coordenadas y el sistema de referencia, podemos colocar encima nuestra capa personalizada. Por ejemplo, si estamos operando en un almacén o una habitación o cualquier área interior, tendremos que proporcionar el mapa con nuestro propio mosaico. Para eso, puedes usar lo que se llama en Leaflet, superposición de imágenes. Entonces, la superposición de imágenes es la imagen que colocas encima, que es la capa de tu área interior. Y esta capa incluso puede ser un video, por lo que tendrás una superposición de video. Ahora, si te preguntas qué podemos hacer con una superposición de video, por ejemplo, si estamos en algunos pronósticos del tiempo y queremos mostrar la dirección del viento. Para esto, puedes poner una superposición de video en la que especificarás exactamente los límites, como la esquina superior derecha y la esquina inferior izquierda del video.

Y puede ser como vemos en el lado derecho de la diapositiva. Esto es como una superposición de video de un pronóstico del tiempo donde se moverá y podrás ver la dirección del viento y todas esas cosas. Lo siguiente es que, como mencioné en la segunda diapositiva, tenemos una flota mixta de robots, que son barcos, vehículos e incluso drones. Y esto significa que tendremos diferentes tipos de joysticks porque no podemos, por ejemplo, operar un dron con un volante. Por lo tanto, necesitaremos encontrar una forma de optimizar esto. Y para eso, utilizamos el patrón de diseño de estrategia, que fue una muy buena opción para nosotros. Como cada, digamos, cada robot, recibimos los mismos, digamos, los mismos eventos, pero el eje del que estamos leyendo los datos de la API del gamepad del navegador es diferente. Y es por eso que decidimos crear lo que se llama la estrategia del joystick. Entonces, una cosa que puedes hacer es crear un contexto de joystick que renderizará cualquier cosa solo para leer los datos configurando un intervalo que se actualiza cada número especificado de milisegundos y enviar esos datos continuamente al robot o al vehículo. Eso es todo. Gracias por su atención. Y si tienen alguna pregunta, todavía estoy disponible en línea en todas las plataformas mencionadas. Y gracias.