En 4yousee Manager, puedes publicar aplicaciones en HTML5 (plantillas) e integrarlas con variables dinámicas a través de una funcionalidad llamada metadatos. Estas variables se pueden utilizar para personalizar y dinamizar tus contenidos, con datos como ubicación, clima, información de anuncios, entre otros. integración con média 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 la Integración de Metadatos
Al crear un archivo HTML5 para ser mostrado por el reproductor 4yousee, crea un archivo metadados.json en la carpeta: assets/json dentro de tu aplicación, y los campos del tipo clave y valor serán mostrados en el 4yousee Manager para proporcionar las variables dinámicas necesarias para la ejecución de la plantilla.
Pasos para Crear Aplicaciones Integradas con Metadatos
1. Estructura de la Aplicación HTML5
Tu aplicación debe estar comprimida, y la estructura debe incluir obligatoriamente un `index.html` en la raíz, así como una carpeta `assets`.
La aplicación comprimida debe tener esta estructura para la correcta lectura de los campos dinámicos: assets/json/metadados.json
Asegúrate de que la aplicación esté preparada para leer y utilizar los datos del archivo: metadados.json.
2. Definindo Metadatos
Accede a la pantalla de publicación de contenidos
Sube tu aplicación (plantilla).
Accede el área de Metadatos.
3. Formulario de Creación de Metadatos
Para agregar un campo de metadato, debes completar dos valores en el formulario:
Nombre del campo (field_name): El identificador para el campo de metadato. Ejemplo: Ciudad.
Valor do campo (field_value): El valor asociado al campo. Ejemplo: Belo Horizonte.
Después de completar los campos, haz clic en 'Guardar'. Si la plantilla ya tiene un archivo metadados.json será editado con los nuevos valores; si no, se creará un nuevo archivo dentro de la carpeta.assets/json/metadados.json.
4. Generar el Archivo metadados.json (Apenas Programadores)
Después de que los metadatos se guarden, el sistema generará automáticamente un archivo JSON que contendrá los pares clave-valor definidos en el formulario, además de otra información que podrá ser editada, como el título de la aplicación, la descripción, etc. A continuación, se muestra un ejemplo del contenido del archivo JSON:
{
"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 los Datos en la Aplicación
En tu código JavaScript, puedes hacer una solicitud para leer los datos del archivo metadados.json y utilizarlos dentro de la aplicación. Un ejemplo sencillo de cómo cargar y usar estos datos sería:
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. Actualizando los Metadatos
iempre que necesites modificar un valor, simplemente accede nuevamente al formulario de metadatos, realiza el cambio y guarda. El archivo metadados.json será actualizado automáticamente con las nuevas informaciones.
Ejemplo Completo de Utilización
Crear un aplicativo HTML5 que exhibe la ciudad e el tempo actual.
En el panel de metadatos, añadir las claves:
Ciudad con valor "Belo Horizonte".
El archivo metadatos.json será generado automáticamente con esas informaciones.
El código JavaScript dentro del aplicativo cargará el archivo y exhibirá los valores en la interface.
Consideraciones Finales
Esta funcionalidad de metadatos permite que tus aplicaciones sean más dinámicas y personalizadas, facilitando la integración con datos que pueden variar según el contexto de visualización.
Descargue el archivo de ejemplo