4yousee Manager, você pode publicar aplicativos em HTML5(templates) e integrá-los com variáveis dinâmicas através de uma funcionalidade chamada metadados. Essas variáveis podem ser usadas para personalizar e dinamizar os seus conteúdos, com dados como localização, tempo, informações de anúncios, integração com programática, entre outros. campos do tipo chave e valor, estes campos estarão disponíveis para uso no aplicativo através de um arquivo JSON, inserido diretamente no zip do seu aplicativo.
Como Funciona a Integração de Metadados
Ao criar um arquivo HTML5 para ser exibido pelo 4yousee player, crie um arquivo metadados.json na pasta assets/json dentro do seu app e os campos do tipo chave e valor serão exibidos no 4yousee Manager para informar as variáveis dinâmicas necessárias para execução do template.
Passos para Criar Aplicativos Integrados com Metadados
1. Estrutura do Aplicativo HTML5
O seu aplicativo deve estar compactado e a estrutura deverá ter obrigatoriamente um index.html na raiz bem como a pasta assets.
O aplicativo comprimido deverá ter esta estrutura para leitura correta dos campos dinamicos assets/json/metadados.json
Certifique-se de que o aplicativo está preparado para ler e utilizar os dados do arquivo metadados.json.
2. Definindo Metadados
Acesse a tela de publicação de conteúdos
Faça upload do seu aplicativo (template)
Acesse a área de Metadados.
3. Formulário de Criação de Metadados
Para adicionar um campo de metadado, você deve preencher dois valores no formulário:
Nome do campo (field_name): O identificador para o campo de metadado. Exemplo: Cidade.
Valor do campo (field_value): O valor associado ao campo. Exemplo: Belo Horizonte.
Após preencher os campos, clique em "Salvar". Caso o template já tenha um arquivo metadados.json ele será editado com os novos valores, caso não, será criado um novo arquivo dentro da pasta assets/json/metadados.json.
4. Geração do Arquivo metadados.json (Apenas Programadores)
Depois que os metadados forem salvos, o sistema automaticamente irá gerar um arquivo JSON contendo os pares de chave-valor definidos no formulário além de outras informações que poderão ser editadas como, título do aplicativo, descrição, etc… Veja abaixo um exemplo do conteúdo do arquivo JSON seria:
{
"fields": {
"Cidade": "Belo Horizonte"
},
"fields_options": {},
"title": "Application Title",
"description": "short description of the purpose of the template",
"thumb": "https://4yousee.com.br/apps/programmatic/thumb.png",
"poster": "https://4yousee.com.br/apps/programmatic/poster.png",
"doc_url": "https://www.youtube.com/watch?v=xBR3q3E2alk",
"templates_name": []
}
5. Manipulando os Dados no Aplicativo
No seu código JavaScript, você pode fazer uma requisição para ler os dados do arquivo metadados.json e utilizá-los dentro do aplicativos. Um exemplo simples de como carregar e usar esses dados seria:
fetch('assets/json/metadados.json')
.then(response => response.json())
.then(data => {
console.log(data); // Aqui você terá acesso aos valores dinâmicos
document.getElementById('cidade').textContent = data.Cidade;
document.getElementById('tempo').textContent = data.Tempo;
})
.catch(error => console.error('Erro ao carregar metadados:', error));
6. Atualizando os Metadados
Sempre que você precisar alterar um valor, basta acessar o formulário de metadados novamente, fazer a alteração e salvar. O arquivo metadados.json será atualizado automaticamente com as novas informações.
Exemplo Completo de Utilização
Criar um aplicativo HTML5 que exibe a cidade e o tempo atual.
No painel de metadados, adicionar as chaves:
Cidade com valor "Belo Horizonte".
O arquivo metadados.json será gerado automaticamente com essas informações.
O código JavaScript dentro do aplicativo carregará o arquivo e exibirá os valores na interface.
Considerações Finais
Essa funcionalidade de metadados permite que seus aplicativos sejam mais dinâmicos e personalizados, permitindo a integração com dados que podem variar conforme o contexto de exibição.
Baixe aqui o arquivo de exemplo