Rastrillo submarino Desarrollo de SmartTV

Hola Habr!

Durante mucho tiempo fue una idea escribir un artículo sobre los problemas del desarrollo de SmartTV, pero a medida que nos sumergimos en esta área, inventamos nuestra propia bicicleta, que nos ayudó a resolver estos problemas. Por lo tanto, en este artículo, no solo destacaremos algunos de los aspectos problemáticos del desarrollo de SmartTV, sino que también hablaremos sobre cómo resolverlos utilizando el próximo nuevo marco PureQML .

Todos los que estén interesados ​​en este tema o simplemente tengan curiosidad por ver el nuevo marco, que también puede estar en SmartTV, les pedimos un gato.

El zoologico

Para empezar, en la naturaleza hay muchas plataformas SmartTV y muchas de ellas están diseñadas para lanzar aplicaciones web. Esto puede dar la ilusión de que es suficiente escribir el código una vez y usarlo en todas las plataformas. Pero en realidad, todas las plataformas tienen algunas diferencias que deben tenerse en cuenta. Entre estas características, se pueden distinguir las siguientes:

• Manejo de prensas de botón de control remoto . No todos los fabricantes usan los mismos códigos de tecla para los mismos botones de control remoto. Como ejemplo, puede comparar códigos clave para la plataforma orsay y webos . Para tizen, es necesario registrar explícitamente algunos botones para uso futuro.
• Reproductor de video Muchas plataformas admiten el reproductor de video html5, pero, por ejemplo, tizen usa AVPlay y, por lo tanto, usa su propia API para trabajar con el reproductor nativo.
• Información sobre el dispositivo . La obtención de información sobre el dispositivo en cada plataforma también se implementa de manera diferente, en NetCast se crea un objeto especial con un id-shnik especial, en otros casos, se utilizan métodos específicos para cada plataforma.
• Enfoque La aplicación SmartTV se centra principalmente en el control remoto y, por lo tanto, UI / UX debe implementarse teniendo en cuenta el uso de botones de navegación: arriba, abajo, derecha, izquierda, OK y atrás, mientras que es importante no perder el foco e indicar claramente dónde está ahora .

La documentación

Además de la variedad de plataformas y documentación para estas plataformas, el problema es que algunos fabricantes lanzan nuevas versiones que, a veces, pierden compatibilidad en algunos lugares, o incluso cambian a nuevas plataformas que son básicamente incompatibles con las anteriores (como la transición LG con NetCast en WebOS). Al mismo tiempo, existe una promoción intensiva de nuevas plataformas, lo que hace que sea difícil encontrar información en plataformas antiguas, ya que algunas secciones de la documentación se eliminan o transfieren, por lo que a veces puede encontrar enlaces muertos en consejos sobre formularios.

Instalación

Nuevamente, debido a la variedad de plataformas, el proceso de instalación de aplicaciones en los dispositivos de depuración también es diferente. Por ejemplo, para AndroidTV puede usar adb, tizen tiene su propio análogo: sdb , para scripts especiales de WebI CLI, etc. Cada una de estas herramientas necesita ser instalada y configurada. Aquí puede agregar el problema de las actualizaciones intensivas de la plataforma, con la actualización adjunta del SDK e IDE. Un ejemplo de tal problema es el caso de Tizen Studio. Después de descargar la última versión, puede instalar aplicaciones solo en televisores TV-samsung tv4, mientras que no hay una manera fácil de instalar la aplicación en versiones anteriores de televisores, que son de naturaleza mucho más grande (si de repente encuentra este problema, vea el enlace ) e incluso después baile exitoso con una pandereta, el IDE pierde la capacidad de instalar aplicaciones en televisores TV-samsung tv4 ¯ \ _ (ツ) _ / ¯

Moderación

Para publicar la aplicación, es necesario pasar la moderación del fabricante respectivo, y cada uno de ellos tiene sus propias reglas y características. En este caso, debes ser paciente, porque las solicitudes se pueden verificar durante más de una semana y esto debe tenerse en cuenta al planificar los plazos, es decir la aplicación debe publicarse mucho antes del lanzamiento (si de repente le preocupa que las aplicaciones aparezcan antes de cualquier evento de marketing, no tenga miedo, al enviar con moderación hay un punto en el que puede especificar una fecha antes de que la aplicación no se publique).

También debe estar preparado para el hecho de que la causa del rechazo puede ser cualquier cosa, por ejemplo, una respuesta errónea en la lista de verificación automática (una lista de preguntas que el desarrollador debe responder antes de enviar la aplicación, por ejemplo: "¿su aplicación contiene virus", etc.) o debido a un malentendido en la descripción de la aplicación UX. Puede llegar a situaciones divertidas, por ejemplo, hubo un caso en el que cerraron una aplicación con canales de TV en streaming, porque tomaron una línea progresiva en el aire de uno de los canales como un artefacto de gráficos, tomándolo como parte de la OSD .

AndroidTV y tvOS

También debemos mencionar AndroidTV y tvOS, como Estas plataformas no admiten el lanzamiento explícito de aplicaciones web. Para tvOS, se usa su propio lenguaje similar al xml: TVML, y lo que es especialmente interesante, puede componer este idioma, pero solo dentro de un cierto conjunto de plantillas , es bastante difícil hacer algo completamente arbitrario. Con la ayuda de tales restricciones, todas las aplicaciones para tvOS se ven obligadas a adherirse a una sola guía de estilo, y si no se aleja de ella, entonces el proceso de escribir la aplicación será simple.

En Android, la situación es mejor, porque Hay formas de ejecutar aplicaciones web, hablaremos de una de ellas un poco más adelante.

Como hacemos eso

Frente a la realidad, primero estudiamos las soluciones existentes, pero desafortunadamente no me gustó nada universal y conveniente: el smartbox es inconveniente, la reacción no resuelve problemas específicos de TV, como, de hecho, otros marcos que están más orientados a la web.

Ahora veamos cómo trata PureQML con esto (sobre lo que ya escribimos aquí y aquí ). En resumen, este es un marco js que permite describir declarativamente las IU en un lenguaje similar a qml, lo que ayuda a crear rápidamente aplicaciones que abstraen de html, css y otras cosas. Para resolver problemas específicos de SmartTV, se escribió un módulo qmlcore-tv separado bajo la licencia CC-BY-4.0, que admite las siguientes plataformas:

• LG webOS
• LG NetCast
• Samsung Tizen
• Samsung Orsay
• Opera TV
• Hisense
• AndroidTV

Y así es como resuelve los problemas anteriores:

• Procesamiento de botones de control remoto . Para las plataformas compatibles, se implementa la asignación de códigos clave y en el código del cliente es suficiente simplemente escribir el controlador deseado, por ejemplo, para el botón de función rojo del control remoto, puede escribir un controlador:
  

  onRedPressed { /*   */ } 

• Reproductor de video Para trabajar con el reproductor, hay un componente especial de VideoPlayer que describe la interfaz para trabajar con video, y la implementación de la plataforma se selecciona para la plataforma de destino en la etapa de construcción. El siguiente es un ejemplo de uso: reproducir un video en bucle usando un enlace de pantalla completa:
  
  

   VideoPlayer { width: 100%; height: 100%; autoPlay: true; source: "http://media.w3.org/2010/05/bunny/movie.mp4"; } 

• Información sobre el dispositivo . Para obtener información sobre el dispositivo, es suficiente usar el control del dispositivo, por analogía con el reproductor, describe la interfaz y la implementación se toma para la plataforma ensamblada. El siguiente es un código de ejemplo para mostrar texto con la ID del dispositivo en la pantalla:
  
  

   Device { id: device; } Text { text: “DeviceID: ” + device.deviceId; } 

• Enfoque La característica básica del marco en sí ya ayuda aquí, que en un momento hay un solo foco, que existe y no desaparece en ningún lado. Para trabajar con foco, puede usar propiedades declarativas:
  focus - una bandera booleana que indica que este elemento es enfocable o no
  activeFocus: un indicador booleano que es verdadero cuando este elemento contiene foco, y falso en caso contrario
• Instalación Para una instalación conveniente de las aplicaciones PureQML en TV, puede usar el script de despliegue smart-tv, simplemente dóblelo a la raíz del proyecto PureQML. Para construir un proyecto, por ejemplo, para un televisor webos con el nombre "myTV" (justo antes de que necesite configurar un televisor, para obtener más detalles sobre cómo configurar un televisor WebOS, consulte aquí ), debe llamar al comando:
  
  

   ./smart-tv-deployer/build -p webos -t myTV 

• AndroidTV . Aquí, como para Android, el idioma nativo es java, y para portar la aplicación web allí utilizamos el proyecto cordova . Este marco le permite generar una aplicación de Android con un WebView, en el que se inicia la aplicación web en sí. Además, se está trabajando activamente para traducir el código PureQML al nativo.

Ejemplo

Como ejemplo, mostramos cómo portar la aplicación de un artículo anterior a SmartTV.

Como mencionamos anteriormente, UX en TV es diferente de un navegador de escritorio, y tendrá que agregar algunos cambios al código para que funcione con los botones remotos:

 onSelectPressed: { osd.toggleActive() } onBackPressed: { if (osd.active) osd.toggleActive() else _globals.closeApp() } 

En este código, agregamos procesamiento para presionar los botones "Seleccionar" y "Atrás", cuando presiona el primero enciende / apaga el OSD (el que tiene el mapa y el punto de ubicación de la estación) cuando presiona "Atrás", si el OSD está abierto, ciérrelo, si está cerrado, luego cierra la aplicación en sí.
El resultado final se puede ver en el video:

Conclusión

Como resultado, PureQML funcionó bien como una herramienta para desarrollar aplicaciones de SmartTV, y nosotros mismos lo usamos intensamente para estos fines.
Si tiene preguntas o desea más artículos sobre el desarrollo de SmartTV o PureQML, escriba en los comentarios o en el canal de telegramas , trataremos de responder todo.

Gracias por su atencion! =)

Referencias

Sitio del proyecto
Página de Github
Fuentes earth-online
Telegram support channel