Este documento tem o objetivo de instruir desenvolvedores na construção de conteúdos interativos a serem exibidos pelo 4YouSee Player, consequentemente demandam um conhecimento em programação.

Introdução

Os conteúdos interativos são templates construídos em HTML5, JavaScript e CSS, que permitem a interação dos usuários e a geração de informação sobre estas interações. Botões de reação, enquetes e formulários de avaliação são exemplos destes conteúdos.

O processo para a produção de material deste tipo é simples: através do 4YouSee Designer todo o layout, com elementos e animações, pode ser criado rapidamente utilizando uma interface gráfica e então ser exportado para HTML5, JavaScript e CSS. Com o código exportado, basta adicionar algumas poucas linhas de código JavaScript para permitir a interatividade com o conteúdo.

Adicionando Interações

Para adicionar interações aos objetos, deve-se:

1. Nomear no 4YouSee Designer o objeto que permitirá a interação;

2. Exportar o conteúdo e extrair o arquivo zip;

     3. No conteúdo extraído, abra com um editor de código o arquivo designer_events.js localizado dentro da pasta js. Localize na linha 2 a variável _eventsPerObject. As interações devem ser adicionadas nesta variável, conforme o formato abaixo:

var _eventsPerObject = {
  nome_objeto: {
    click: function() {
        // Código a ser executado ao clicar no objeto "nome_objeto"
    }
  }
};

Exemplo

Neste exemplo criaremos um conteúdo que exibe uma promoção e botões de reação. Cada botão, ao ser clicado, envia uma requisição para um webservice.

1. Crie um novo projeto no 4YouSee Designer;
2. Selecione um dos modelos de cenas já existentes;
3. Adicione 3 botões de reação denominados "like", "love" e "dislike";
4. Salve e exporte o projeto;
5. Faça a extração do arquivo zip;
6. Edite o arquivo o arquivo designer_events.js localizado dentro da pasta js e adicione as duas funções a seguir. Elas serão responsáveis por requisitar a persistência dos dados da interação (nome do botão e data/hora da interação) no webservice, e em seguida exibir uma mensagem de sucesso para o usuário;
7. Altere a variável _eventsPerObject da seguinte forma:
   

   var _eventsPerObject = {
       like: {
           click: function() {
               postRequest('like');
           }
       },
       love: {
           click: function() {
               postRequest('love');
           }
       },
       dislike: {
           click: function() {
               postRequest('dislike');
           }
       }
   };

8. Altere também a variável postRequest da seguinte forma:

   var postRequest = function(btnName) {
       var dateTime = new Date().toISOString()
   
       fetch('http://Endereço_da_API/reacoes', {
           method: 'POST',
           headers: {'Content-Type':'application/x-www-form-urlencoded'},
           body: `btnName=${btnName}&dateTime=${dateTime}`
       }).then(function(response) {
           if (response.ok) {
               showSuccessMessage(btnName);
           }
       }).catch(function(error) {
           throw Error("Fetch error. " + error.message);
       });
   };
   
   var showSuccessMessage = function (btnName) {
       alert(`Obrigado por participar!\nVocê clicou no botão "${btnName}".`);
   };

Agora basta salvar as alterações. Seu template já está pronto para ser utilizado.

Nesta documentação aprendemos a criar um conteúdo interativo simples. Através do 4YouSee Designer e da adição de código JavaScript, podemos obter informações dos mais diversos tipos através dos conteúdos e aprimorar ainda mais seus conteúdos digitais!

Dúvidas? Entre em contato com o suporte pelo e-mail suporte@4yousee.com.br