Últimas considerações

Muito já foi falado, mas é preciso entender um conceito muito importante que ainda não foi discutido.

Todo widget é executado no DSME Player como uma mídia DOOH. Apesar de ter a mesma estrutura e usar as mesmas tecnologias, ele não é apresentado como um site ou uma página web convencional. Até porque nenhum usuário irá interagir com o widget enquanto ele estiver sendo exibido no player.

Como ele é uma mídia, que será intercalada com outras mídias dentro de um looping, ele deve estar disponível no momento em que o player o executar. Isso significa que ele não deve fazer requisições externas porque não pode aguardar o download ser concluído.

Imagine o seguinte cenário: um widget está configurado para ser executado durante 15 segundos. Ele será exibido em um player que está instalado em um elevador. No momento em que o player inicia sua execução, ele requisita uma informação de uma fonte de dados qualquer para só então começar a exibir a informação. Acontece que neste exato momento a conexão com a internet está ruim, ou nem mesmo existe. Então essa requisição demora alguns segundos ou sequer é completada. O resultado é que dos 15 segundos totais, boa parte é perdida deixando o widget "travado", apresentado uma interface quebrada ou alguma mensagem de "carregando".

Agora imagine você, usuário final, entrar no elevador e se deparar com uma tela com um loader rodando? Neste tipo de ambiente, mesmo 5 segundos parecem uma eternidade.

Portanto, o widget tem que ser executado levando-se em consideração que ele está offline, e que a informação deve ser apresentada para o usuário o quanto antes, para que o tempo de execução seja aproveitado por completo.

Não faça isto

Resumindo a história acima: não carregue conteúdo externo durante a execução do widget. O widget é executado offline como uma mídia DOOH, e as pessoas que o assistem não devem aguardar por um carregamento demorado para ver sua informação.

Todo conteúdo que ele precisar será disponibilizado durante a compilação. Sendo assim, ele deve ser executado por completo assim que o player o iniciar.

Mas também existe o outro lado. Quando o player carregar o arquivo index.html do widget, todos os arquivos de recurso, como imagens, fontes, CSS e JS precisam ser carregados antes que a informação seja exibida. Isto porque da mesma forma que não é legal que o usuário final veja uma tela de loading no elevador, também não é legal que ele veja o widget sendo "montado", nem que seja por 1 segundo.

Por exemplo, você pode querer utilizar alguma biblioteca MVVM, como Angular ou Vue.js. Neste caso, será primeiro necessário carregar todos os arquivos e depois iniciar a aplicação para que o HTML seja devidamente renderizado. Isso geralmente leva só alguns centésimos de segundo, mas é tempo suficiente para que o usuário perceba o processo.

A ideia então é só exibir a interface depois que absolutamente tudo estiver pronto. Para isto existem dois mecanismos.

O evento ready

Primeiro, você deve escutar o evento ready do objeto Content.

Este evento só é disparado depois que todos os recursos já foram carregados, e depois que o player já fez tudo o que tinha que fazer. Em resumo, ele serve para dizer que da parte do player está tudo pronto.

widget.js

Content.on('ready', function(){
    // tudo pronto chefe!
});

Depois que o evento é disparado, é a vez do widget fazer algum pré-processamento antes de exibir a informação para o usuário. Use este evento para iniciar bibliotecas, carregar dados, compilar templates e o que mais precisar fazer.

Splashscreen ou tela preta

Enquanto o widget não estiver totalmente pronto para exibir a informação, ele deve exibir alguma splashscreen, ou mais fácil ainda, exibir nada.

Tela preta

Por padrão a cor de fundo da tela do player é preto. Isso quer dizer que se você simplesmente colocar um display: none no seu elemento raiz, será exibida uma tela preta para o usuário. No momento em que você decidir exibir a sua interface, é só mudar para display: block.

Você deve configurar seu CSS para exibir uma tela preta por exemplo, e no evento ready, após você fazer tudo o que tinha pra fazer, manipular o CSS para exibir a interface com a informação de fato.

Faça isto

Durante o carregamento dos recursos e o pré-processamento dos dados, escolha por exibir uma splashscreen ou uma tela preta. Configure isto via CSS, e no evento ready exiba a interface com a informação pronta.

Conclusão

Parabéns por ter chegado até aqui! A estrada foi longa, mas nós vimos tudo o que é necessário para criar um widget pronto para execução na plataforma DSME.

Agora cabe a você criar novas experiêncas para impactar as milhares de pessoas que diariamente consomem informação em nossos players.