Ancinho subaquático desenvolvimento SmartTV

Olá Habr!

Há muito tempo é uma idéia escrever um artigo sobre os problemas do desenvolvimento de SmartTV, mas, quando mergulhamos nessa área, inventamos nossa própria bicicleta, o que nos ajudou a resolver esses problemas. Portanto, neste artigo, destacaremos não apenas alguns dos aspectos problemáticos do desenvolvimento de SmartTV, mas também falaremos sobre como resolvê-los usando a próxima nova estrutura PureQML .

Todo mundo que está interessado neste tópico ou apenas curioso para ver a nova estrutura, que também pode estar na SmartTV, pedimos um gato.

O zoológico

Para começar, na natureza existem muitas plataformas SmartTV e muitas delas são voltadas para o lançamento de aplicativos da web. Isso pode dar a ilusão de que basta escrever o código uma vez e usá-lo em todas as plataformas. Mas, na realidade, todas as plataformas têm algumas diferenças que devem ser levadas em consideração. Entre esses recursos, é possível distinguir o seguinte:

• Manipulação de botões do controle remoto . Nem todos os fabricantes usam os mesmos códigos de tecla para os mesmos botões do controle remoto. Como exemplo, você pode comparar os códigos-chave da plataforma orsay e webos . Para tizen, é necessário registrar explicitamente alguns botões para uso futuro.
• Video player Muitas plataformas suportam o player de vídeo html5, mas, por exemplo, o tizen usa o AVPlay e, para o orsay, usa sua própria API para trabalhar com o player nativo.
• Informações sobre o dispositivo . A obtenção de informações sobre o dispositivo em cada plataforma também é implementada de maneira diferente. No NetCast, um objeto especial é criado com um id-shnik especial; em outros casos, métodos específicos para cada plataforma são usados.
• Focus O aplicativo SmartTV é focado principalmente no controle remoto e, portanto, a UI / UX deve ser implementada levando em consideração o uso dos botões de navegação: cima, baixo, direita, esquerda, OK e vice-versa, é importante não perder o foco e indicar claramente onde está agora .

A documentação

Além da variedade de plataformas e documentação para essas plataformas, o problema é que alguns fabricantes lançam novas versões que, às vezes, perdem compatibilidade em alguns lugares, ou até mudam para novas plataformas, que são basicamente incompatíveis com as anteriores (como a transição LG com NetCast no WebOS). Ao mesmo tempo, novas plataformas estão sendo intensamente promovidas, o que dificulta a localização de informações em plataformas antigas, pois algumas seções da documentação são excluídas ou transferidas, o que às vezes pode levar a links mortos em dicas de formulários.

Instalação

Novamente, devido à variedade de plataformas, o processo de instalação de aplicativos nos próprios dispositivos de depuração também é diferente. Por exemplo, para AndroidTV, você pode usar adb, tizen tem seu próprio analógico - sdb , para scripts CLI especiais do WebOS, etc. Cada uma dessas ferramentas precisa ser instalada e configurada. Aqui você pode adicionar o problema de atualizações intensivas da plataforma, com a atualização que acompanha o SDK e o IDE. Um exemplo desse problema é o caso do Tizen Studio. Após o download da versão mais recente, você pode instalar aplicativos apenas em TVs samsung tv4, enquanto não há uma maneira fácil de instalar o aplicativo em versões anteriores de TVs, que são muito maiores por natureza (se você encontrar esse problema de repente, consulte o link ) e mesmo depois dança de sucesso com um pandeiro, o IDE perde a capacidade de instalar aplicativos em TVs TV-samsung tv4 ¯ \ _ (ツ) _ / ¯

Moderação

Para publicar o aplicativo, é necessário passar a moderação do respectivo fabricante, e cada um deles tem suas próprias regras e recursos. Nesse caso, você precisa ser paciente, porque as solicitações podem ser verificadas por mais de uma semana e isso deve ser levado em consideração ao planejar prazos, ou seja, o aplicativo precisa ser publicado bem antes do lançamento (se você estiver subitamente preocupado que os aplicativos apareçam antes de qualquer evento de marketing - não tenha medo, ao enviar para moderação, há um ponto em que você pode especificar uma data antes da qual o aplicativo não será publicado).

Você também precisa estar preparado para o fato de que a causa da rejeição pode ser um pouco insignificante, por exemplo, uma resposta incorreta na lista de verificação automática (uma lista de perguntas que o desenvolvedor deve responder antes de enviar o aplicativo, por exemplo: “Seu aplicativo contém vírus” etc.) ou devido a um mal-entendido na descrição do aplicativo UX. Pode ser que isso aconteça em situações engraçadas, por exemplo, houve um caso em que eles encerraram um aplicativo com canais de televisão de streaming, porque pegaram uma linha rastejante no ar de um dos canais como um artefato de gráficos, fazendo parte do OSD .

AndroidTV e tvOS

Também devemos mencionar AndroidTV e tvOS, como essas plataformas não suportam o lançamento explícito de aplicativos da web. Para o tvOS, é usada sua própria linguagem semelhante a xml: TVML, e o que é especialmente interessante, você pode digitar essa linguagem, mas apenas dentro de um certo conjunto de modelos , é bastante difícil fazer algo completamente arbitrário. Com a ajuda de tais restrições, todos os aplicativos do tvOS são forçados a aderir a um único guia de estilo e, se você não for muito longe, o processo de criação do aplicativo será simples.

No android, a situação é melhor, porque Existem maneiras de executar aplicativos da Web, falaremos sobre um deles mais tarde.

Como fazemos isso

Diante da realidade, primeiro estudamos as soluções existentes, mas infelizmente não gostei de nada universal e conveniente: a caixa inteligente é inconveniente, a reação não resolve problemas específicos de TV, como, de fato, outras estruturas mais orientadas para a Web.

Agora vamos ver como o PureQML lida com isso (sobre o qual já escrevemos aqui e aqui ). Em resumo, esta é uma estrutura js que permite descrever declarativamente as UIs em uma linguagem semelhante a qml, o que ajuda a criar rapidamente aplicativos abstraindo de html, css e outras coisas. Para resolver problemas especificamente de SmartTV, um módulo qmlcore-tv separado foi gravado sob a licença CC-BY-4.0, que suporta as seguintes plataformas:

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

E aqui está como ele resolve os problemas acima:

• Processando botões do controle remoto . Para plataformas suportadas, o mapeamento de códigos de chave é implementado e no código do cliente basta escrever o manipulador desejado, por exemplo, para o botão de função vermelho do controle remoto, você pode escrever um manipulador:
  

  onRedPressed { /*   */ } 

• Video player Para trabalhar com o player, existe um componente VideoPlayer especial que descreve a interface para trabalhar com vídeo, e a implementação da plataforma é selecionada para a plataforma de destino no estágio de construção. A seguir, é apresentado um exemplo de uso: reprodução de um vídeo em loop usando um link de tela cheia:
  
  

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

• Informações sobre o dispositivo . Para obter informações sobre o dispositivo, basta usar o controle Device, por analogia com o player, descreve a interface e a implementação é feita para a plataforma montada. A seguir, é apresentado um exemplo de código para exibir texto com o ID do dispositivo na tela:
  
  

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

• Focus O recurso básico da estrutura em si já ajuda aqui, que em um momento existe apenas um único foco, que existe e não desaparece em lugar algum. Para trabalhar com o foco, você pode usar propriedades declarativas:
  focus - um sinalizador booleano indicando que este elemento é focalizável ou não
  activeFocus - um sinalizador booleano que é verdadeiro quando esse elemento contém foco e falso caso contrário
• Instalação Para uma instalação conveniente de aplicativos PureQML na TV, você pode usar o script smart-tv-deployer, apenas dobrá-lo na raiz do projeto PureQML. Para criar um projeto, digamos, para uma TV webos com o nome "myTV" (pouco antes disso, você precisa configurar uma TV, para obter mais detalhes sobre como configurar uma TV WebOS, veja aqui ), você precisa chamar o comando:
  
  

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

• AndroidTV . Aqui, como para o Android, o idioma nativo é o java e, para portar o aplicativo da Web, usamos o projeto cordova . Essa estrutura permite gerar um aplicativo Android com um WebView, no qual o próprio aplicativo Web é iniciado. Além disso, está em andamento um trabalho ativo para converter o código PureQML no nativo.

Exemplo

Como exemplo, mostramos como portar o aplicativo de um artigo anterior para o SmartTV.

Como mencionamos acima, o UX na TV é diferente de um navegador de desktop e você precisará adicionar algumas alterações ao código para oferecer suporte ao trabalho com os botões remotos:

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

Neste código, adicionamos processamento para pressionar os botões "Selecionar" e "Voltar", quando você pressiona o primeiro liga / desliga o OSD (aquele com o mapa e o ponto de localização da estação) quando você pressiona "Voltar", se o OSD estiver aberto, feche-o, se estiver fechado e, em seguida, feche o próprio aplicativo.
O resultado final pode ser visto no vídeo:

Conclusão

Como resultado, o PureQML teve um bom desempenho como uma ferramenta para o desenvolvimento de aplicativos SmartTV, e nós mesmos o usamos intensamente para esses fins.
Se você tiver dúvidas ou quiser mais artigos sobre o desenvolvimento de SmartTV ou PureQML - escreva nos comentários ou no canal de telegrama , tentaremos responder a tudo.

Obrigado pela atenção! =)

Referências

Site do projeto
Página do Github
Fontes on-line
Canal de suporte de telegrama