1. Introducción a la Navegación Espacial
Bienvenidos a la charla sobre Navegación Espacial. Discutiremos los desafíos de implementar la navegación espacial para los controles de TV y por qué se necesita una biblioteca. El mercado de las smart TVs tiene múltiples marcas con sus propios sistemas operativos, lo que hace necesario tener aplicaciones nativas para cada una. Sin embargo, para simplificar el mantenimiento, construimos una aplicación web para la interfaz de usuario. Lamentablemente, este enfoque resultó en la pérdida del soporte nativo de la plataforma para la navegación espacial. Aunque hay una propuesta para proporcionar esta funcionalidad en los navegadores, todavía está en proceso.
Bienvenidos a todos. Muchas gracias por unirse a esta charla. Mi nombre es Sergio Avalos, y vamos a hablar sobre Navegación Espacial. Pero más que hablar, vamos a construir. Soy ingeniero de software en Spotify y hace aproximadamente un año me uní al equipo que trabaja en el cliente de Spotify que se ejecuta en tu smart TV. Eso significa que en esta charla, no vamos a hablar sobre móviles, tampoco vamos a hablar sobre escritorio. Y lo más importante, no vamos a hablar sobre el ratón. En cambio, vamos a hablar sobre el control de la TV, ese dispositivo que apuesto a que todos ustedes tienen en sus salas de estar. La navegación espacial no es más que un nombre elegante para describir lo que haces con el control de la TV cuando presionas las teclas direccionales, las teclas de flecha para seleccionar una aplicación o simplemente navegar a una de ellas. Eso me intrigó mucho cuando me uní al equipo reciente en el que estoy trabajando porque no sabía que, quiero decir, me sorprendió que uno tuviera que crear una biblioteca para eso. Así que decidí profundizar en el código y me fascinó. No porque el código fuera increíble, quiero decir, estaba bien, el código, pero lo más importante es que sentí que era un problema muy interesante de resolver. Así que de eso se trata esta charla. Quiero compartir con ustedes mi aprendizaje de cómo aprendí sobre esta biblioteca y qué mejor manera de aprender que simplemente construyéndola nosotros mismos. Pero en caso de que te lo preguntes, porque esa fue mi primera impresión, ¿por qué necesitamos construir una biblioteca para la navegación espacial? Quiero decir, ¿no es una gran utilidad que debería ser proporcionada por las plataformas? Y la respuesta es sí, totalmente. Si estás construyendo una aplicación nativa. Déjame intentar explicar. El mercado de las smart TVs es bastante cemento, hay muchas marcas y cada una de ellas ejecuta su propio sistema operativo. Eso significa que necesitas tener tu aplicación nativa funcionando para cada una de ellas. Pero, sólo para hacer nuestras vidas más fáciles y reducir los costos de mantenimiento, decidimos construir una interfaz de usuario utilizando una aplicación web que puede ser cargada en cada una de las aplicaciones nativas. Eso nos dio una gran interoperabilidad para enviar el mismo código a todas estas aplicaciones nativas. Pero, vino con el costo de perder el soporte de la plataforma nativa. En ese caso, es obviamente la navegación espacial. Entonces, estaba pensando, okay, okay. Pero, estamos en el año 2023. ¿No debería ser proporcionado por el navegador? Quiero decir, el navegador, hoy en día, es un software muy sofisticado. Y, la respuesta es aún no. Es un trabajo en progreso. Hay una propuesta. Todavía es un borrador para construir esta funcionalidad,
2. Mejorando el Enfoque de la Navegación Espacial
Necesitamos seguir esperando. ¿Existen proyectos de código abierto que podríamos usar? Los medios noruegos lanzaron uno en 2019, pero nuestra aplicación es más antigua. Comencemos a construirlo. Envuelve cada elemento de navegación con un ID y diles a dónde ir. Este enfoque tiene inconvenientes: es difícil con vistas dinámicas, propenso a errores y agrega información extra. Mejoremos este enfoque desarrollando la lógica adicional para conectar el control de la TV con nuestra aplicación.
pero aún no está. Necesitamos seguir esperando. Entonces, estaba pensando, vale, vale. Pero, ¿existen proyectos de
open-source que podríamos usar? Y, de hecho, hay uno. Muchas gracias, Medios Noruegos, por proporcionar esto. Desafortunadamente, lo lanzaron en, no, desafortunadamente, pero lo lanzaron en 2019, y nuestra aplicación es un poco más antigua que eso. Así que, no teníamos ninguno en ese entonces. Bien. Habiendo respondido a esa pregunta, comencemos. Comencemos a construirlo. Si te pregunto así, de la nada, como tu intuición, ¿cómo lo harías? No sé ustedes, pero para mí, fue, quiero decir, lo más simple que pude imaginar, y creo que lo leí en un blog de Medios Noruegos, e incluso de Netflix. Es básicamente, solo envuelves cada uno de lo que llamo elementos de navegación como el elemento con el que el usuario puede interactuar, con solo un ID, solo identifícalos, y luego les dices a dónde ir. Tomemos por ejemplo, la barra lateral de nuestra aplicación, la aplicación Spotify. Cada uno de estos elementos es solo un enlace para la vista de inicio, la búsqueda, y así sucesivamente, y como expliqué antes, los envuelves con un ID, y en ese envoltorio, les dices a dónde ir, así que si vas a la, si estás en la búsqueda y vas a la aplicación, entonces les dices, ve a este ID que es el inicio. Ese enfoque realmente hace el trabajo, pero obviamente tiene algunas advertencias como puedes, imagino, anticipar. Uno es que es difícil trabajar con vistas dinámicas. Piensa por ejemplo, recomendaciones, el desarrollador no sabe lo que van a obtener. Además, es propenso a errores, porque es el papel del desarrollador agregar este ID manualmente, así que los errores pueden ocurrir. Somos humanos. Y finalmente, solo agrega información extra que no está relacionada con la aplicación, como dije, esto es solo una utilidad que debería ser invisible para la capa de la aplicación. Así que mejoremos este enfoque. Para esta presentación, construí una aplicación muy pequeña que básicamente solo tiene dos vistas. Es una bienvenida. Haz clic en este. Luego vas a otra vista que te muestra solo una sorpresa por lo que sea. Y luego tienes el enlace para volver. Y luego vuelves a SMBN. Funciona perfectamente bien con el ratón, pero no funciona con el control de la TV. Así que esto es exactamente lo que vamos a hacer. Vamos a desarrollar la lógica adicional
3. Aplicación de Demostración y Lógica de Navegación Espacial
En la aplicación de demostración, tenemos la página de índice con la configuración del enrutador para la página de bienvenida y la página de sorpresa. Cada vista es un componente de React, como el cuadro de pregunta y el enlace de retroceso. Registramos nodos de navegación, escuchamos eventos del TBControl y seleccionamos el siguiente elemento en función de la dirección. Creamos una clase NavigationEngine para manejar esta lógica y la hacemos disponible para la aplicación utilizando un proveedor de contexto. La API para establecer la referencia del elemento HTML es sencilla, con una función de enfoque.
lógica que necesitamos para conectar el control de TV con nuestra aplicación muy simple. Aplicación de demostración. OK. Genial. Así que solo voy a pasar muy brevemente al código fuente de la aplicación de demostración. Tenemos la página de índice que obtienes de la aplicación
React y creas la aplicación
React, un script. Dentro de él, tenemos el componente para nuestra aplicación que es solo la configuración del enrutador para ir a la página de bienvenida y la página de sorpresa. Para esto, estoy usando la biblioteca
React router DOM.
Y cada uno de estos componentes, lo siento, cada una de estas vistas son solo otro componente de React que tenemos. Por ejemplo, para la página de bienvenida, tenemos un array de 10 elementos vacíos y solo lo usamos para renderizar 10 componentes diferentes que es el cuadro de pregunta. Y para la vista de sorpresa, ya hemos codificado los enlaces de las imágenes que se mostrarán aleatoriamente junto con otro enlace de retroceso. Finalmente, estos dos componentes son el cuadro de pregunta y el enlace de retroceso. Eso no es más que solo usa el componente de enlace del React router. En el caso del cuadro de pregunta, es como renderizar la imagen del cuadro de pregunta y el otro básicamente solo está renderizando los hijos. Eso es el texto que dice, retrocede. Bien. Así que aquí está esto. Pasemos a la lógica de la navegación espacial. Primero, comenzamos registrando todos los nodos de navegación, luego escuchamos los eventos que vienen del TBControl. Finalmente, desde allí seleccionamos el elemento que debería ir dependiendo de la dirección. Y finalmente, solo actualizamos el cursor, ¿cuál es el siguiente elemento que debería estar enfocado? Si pongo todo en un diagrama para que esté muy claro para ustedes desde los pasos 1 al 3, pueden ver que cada uno de los cuadros de pregunta va a ser registrado en una clase llamada NavigationEngine con el método RegisterNode. Agregamos un escuchador de eventos llamado OnKeyDown que llamará al método HandleNavigation de esta clase que acabamos de definir. Bien, paso número uno, vamos a crear una clase de este NavigationEngine que tiene una variable privada llamada Node, y luego un método para agregar nodos a esta variable privada y otro para eliminar. Luego volvemos al script de índice donde instanciamos esta clase NavigationEngine para el propósito de esta charla lo hacemos disponible para todo el global Finalmente, también lo hacemos disponible dentro de nuestra aplicación usando un proveedor de contexto. Espero que no crean que estamos escribiendo directamente desde las Ventanas. Eso es solo para esta presentación. Finalmente, volvemos a la navegación, no finalmente, pero volvemos al elemento de navegación porque quería mostrarles primero la API que encontré. Sentí que era súper simple. Era solo una función de gancho que te devuelve un callback para como establecer la referencia de el elemento HTML que estás renderizando. Y luego hay un enfoque tan simple como eso. No necesitas pensar en IDs.
4. Uso del Hook useFocusRef e Integración del Control de TV
Para usar la función del hook useFocusRef, necesitas crear un valor de referencia con un callback, generar un ID único y obtener una instancia del motor de navegación. El método registerNode se llama cuando se renderiza el componente y se elimina cuando se desmonta para evitar fugas de memoria. Podemos depurar los nodos de navegación para asegurarnos de que se renderizan correctamente. Añadimos un escuchador de eventos al documento para escuchar las pulsaciones de teclas y llamar a la función de callback handleKeyEvent. Usamos un mapa para definir las teclas direccionales e integrarlas con nuestros valores internos en la aplicación.
Eso es todo, eso es lo único que necesitas hacer. ¿Cómo llamas a esta función del hook useFocusRef? Bueno, primero, creas un valor de referencia con el callback para instanciar esta referencia. Luego generas un ID único. Y finalmente obtienes una de las instancias del motor de navegación usando el proveedor de contexto. Y con la ayuda de la función useEffect, cada vez que se renderiza el componente, se monta, perdón, vamos a llamar al método llamado registerNode. Y cuando se desmonta vamos a eliminarlo para evitar tener fugas de memoria.
Genial. Ahora vamos a debug esto. Así que queremos asegurarnos de que todos los nodos de navegación se renderizan y si miramos la variable de los nodos vemos que tenemos 10. Hacemos clic en cada uno de ellos y luego de nuevo solo tenemos uno, así que se está actualizando. Incluso podemos inspeccionar dentro y si vemos que la referencia apunta al elemento HTML. Volvemos atrás y luego de nuevo tenemos 10. Así que está funcionando. Vamos con el paso número dos.
Escucha al control de TV. En donde estamos en nuestra aplicación añadimos un escuchador de eventos al documento para que cada vez que se presione cualquier tecla, simplemente llamamos a esta función de callback llamada handleKeyEvent. Para generar ese callback básicamente solo estamos usando un método que distinguirá si la tecla que estás presionando es una de las direccionales, las flechas, y solo para este paso vamos a hacer un console.log para poder debug it. Para construir estas teclas direccionales ya tenemos un mapa donde definimos qué es una tecla direccional y ese mapa es básicamente la integración entre nuestros valores internos en la aplicación lo que definimos como siendo arriba siguiente y los valores que vienen de la plataforma, en este caso nuestra plataforma es un escritorio, donde puede cambiar dependiendo de si realmente estás ejecutando en una smart tv o en una consola de juegos.
5. Lógica de Integración y Selección de Nodos
Esta parte se centra en la lógica de integración para el componente nativo de la aplicación. Exploramos cómo seleccionar el siguiente nodo después de una pulsación de tecla utilizando el método getBoundingClientRect para obtener las dimensiones y coordenadas de cada nodo. Luego filtramos los nodos por dirección y eje principal, y seleccionamos el más cercano basándonos en la distancia. La clase NavigationEngine se actualiza con el método handleNavigation para implementar esta lógica. Finalmente, actualizamos el curso basado en el diagrama inicial.
ejemplo. Esta es la parte de la lógica de integración que la aplicación nativa necesita saber pero no vamos a hacerlo para esta presentación. Así que vamos a ver si los eventos del control de TV se están registrando y sí, podemos ver aquí que presiono la tecla hacia abajo y está diciéndome que es la tecla de flecha. Voy a la izquierda y luego tenemos la izquierda.
Ahora podemos ir con la parte más divertida de este código que es seleccionar el nodo después de que el usuario presione la tecla. En caso de que te estés preguntando por qué necesitamos la referencia, es porque podemos llamar a este método llamado getBoundingClientRect que te da exactamente las dimensiones y también las coordenadas según el viewport donde se renderiza el elemento. Eso significa que si tomas todos los nodos y llamas a este método uno por uno, entonces obtienes toda la información que necesitas para construir esa lógica, así que puedes olvidarte en este momento de la aplicación o de cualquier renderizado. Con esta información podemos decidir exactamente a dónde debe ir este foco. Entonces, ¿cómo eliges este el siguiente nodo? Primero filtras todos los nodos por la dirección, luego filtras por el eje principal, y finalmente eliges el más cercano solo por la distancia. Vamos paso a paso. Imagina que estamos hablando de otra matriz, una más grande, de cinco por cinco. Estás en el medio y la tecla que se presiona va a la derecha. Entonces filtrarás las dos últimas columnas, perdón, pero si estás presionando hacia arriba entonces eliges las dos primeras filas. De esas, eliges por el eje principal, así que si vas a la derecha entonces eliges esos nodos que están entre el margen superior y el margen inferior. Lo mismo si vas hacia arriba entonces eliges entre el margen derecho y el margen izquierdo. ¡Perdón, debería ser así! Finalmente, una vez que te limitas a esos dos, entonces eliges el más cercano a la distancia. ¿Cómo se ve en el código? Volvemos a la clase NavigationEngine que definimos antes, añadimos el método handleNavigation, y hacemos esto paso a paso. Primero filtramos por la dirección, y lo hacemos con la ayuda de este diccionario que ya tiene el método predefinido que necesitas para filtrar todos esos métodos. Luego de ahí, haces exactamente lo mismo pero vas a hacer el filtro por el eje principal, y luego eliges el elemento más cercano. Y prácticamente hemos terminado. Ahora podemos volver al paso número dos, eliminar el console.log, y llamar al método llamado handleNavigation. Genial. Veamos si esto funciona. Así que si hago clic en el botón de abajo, entonces podemos ver que ya lo tengo, autocompletado. Podemos ver que este es el elemento de la clase. Así que estamos en esta esquina. Si presionamos a la izquierda, entonces tenemos este. Si presionamos hacia abajo, entonces ya sabes lo que va a pasar, ¿verdad? Genial. Así que está funcionando, pero no está seleccionando el elemento que se supone que debe ser seleccionado. Hagamos eso. Paso número cuatro, actualizar el curso. Así que volvemos al diagrama
6. Añadiendo Suscriptores y Comentarios Finales
Así que cada vez que se levanta una nota, añadimos un suscriptor y ejecutamos callbacks para notificar a todos los suscriptores. Actualizamos la función useHook para seguir el estado del elemento enfocado. Demostramos la funcionalidad y mencionamos los desafíos de los arreglos complejos, los molestos pop-ups, y las navegaciones circulares. Proporcionamos enlaces a un informe y a una biblioteca para una exploración más profunda. Animamos a ponerse en contacto y a construir una comunidad en torno al desarrollo de aplicaciones para smart TV.
que mostré al principio y vamos a actualizarlo. Así que cada vez que se levanta una nota, vamos a añadir un suscriptor. Así que la nota puede decir como, Hey, si algo sucede, por favor avísame. Notifícame. Hagamos esto en código. Si volvemos a la clase de motor de navegación, entonces añadimos un método para añadir esas suscripciones. Otro para ejecutar todos esos callbacks llamados notifyAllSubscribers. Y llamamos a este método exactamente después de que encontramos uno de los elementos. Actualizamos la función useHook. Actualizamos el valor que definimos previamente y está enfocado con una nueva función de hook que mantendrá el estado de si ese elemento a su vez está enfocado o no. Y de nuevo, con la ayuda de la función useEffect, cada vez que el componente se monta, primero lo comprobamos inicialmente como, hey, ¿estoy enfocado? Sí o no. Actualizamos el estado. Y también nos suscribimos para cuando el motor de navegación llama a handle navigation, entonces solo compruebo, hey, ¿soy yo quien está enfocado? Y si es así, entonces simplemente actualizamos el estado. Genial, prácticamente hemos terminado. Hagamos una rápida demostración. Así que va de arriba a abajo, va bajando, a la izquierda, a la izquierda, hacemos clic en OK, y de nuevo. Así que perfecto, está funcionando. Tenía miedo de la demo. Así que esto es solo el principio, porque créeme, a partir de aquí, se vuelve mucho más complicado, mucho más divertido. Por ejemplo, tu aplicación no va a ser una matriz de forma perfecta, sino que vas a lidiar con un arreglo más complejo donde tienes la barra lateral o las diferentes columnas, así que literalmente necesitas lidiar con esos casos de esquina. ¿Qué pasa con esos pop-ups molestos e inconvenientes que te dicen hey, ¿quieres comprar premium? Este es un caso interesante porque necesitas enfocar la atención en solo dos elementos, aceptar o comprar. Aunque todas esas notas de navegación están detrás, solo necesitas enfocarte en esos dos. Y finalmente, uno de mis favoritos se llama navegaciones circulares, donde quieres resolver las restricciones en algunas áreas. Por ejemplo, el menú de la barra lateral, si el usuario está pulsando abajo, abajo, abajo, abajo, llega al fondo, solo por conveniencia, queremos que llegue a la parte superior. Créeme, esto es un cambio total de juego. Pero no vamos a continuar porque nos hemos quedado sin tiempo. Pero si te sientes curioso y quieres continuar la fiesta, aquí está el enlace del informe que utilicé para esta presentación para que podamos seguir creando. Por otro lado, si te sientes inspirado y dices como, quiero crear mi primera aplicación inteligente para la smart TV, aquí está el enlace de la biblioteca que puedes usar para que no tengas que construir esto desde cero. Sin embargo, si piensas que has estado pensando como, oh, esto es demasiado complicado, puedes hacerlo de una manera mucho más fácil. Por favor, ponte en contacto. Mi objetivo personal de esta charla es crear una pequeña
community porque construir una aplicación para una smart TV no es fácil. Así que pongámonos en contacto. Ayudémonos mutuamente. Pero eso es todo por ahora. Muchas gracias. Thank you very much. Aquí tienes de nuevo los enlaces a los códigos QR de los enlaces. Y realmente espero oír de ti. Gracias.
React Summit Remote Edition 2021
Comments