En nuestro artículo anterior (parte uno de esta serie), presentamos el Agama AWE SDK, los requisitos necesarios para crear una aplicación sencilla que aporte un uso real a los clientes de Agama y la configuración del proyecto.
En la segunda parte de la serie, profundizamos en cómo crear el layout y el estilo, y también explicamos la lógica de la aplicación.
Hemos creado una aplicación de tipo plantilla y definido los parámetros de configuración que los usuarios podrán adaptar. Ahora es el momento de empezar a crear la funcionalidad real de la aplicación. Una parte importante es el layout y la estructura de la presentación, que para estas aplicaciones se controla mediante HTML, CSS y JavaScript estándar. En el index.html de la aplicación a continuación, hemos modificado la estructura HTML de la plantilla y definido un conjunto de div como marcadores de posición para el nombre del test configurado y un div para el indicador de estado.
El ADE actualizará automáticamente la UI mientras editas y guardas HTML, por lo que los cambios estructurales se mostrarán de inmediato. El resultado no es interesante por ahora, ya que aún no hemos rellenado los div con ningún contenido o estilo, así que el resultado sigue siendo solo una pantalla «vacía».
La lógica de la aplicación
Para empezar a poblar la aplicación con el contenido configurado, la lógica del test y los resultados del estado, necesitamos comenzar a añadir código JavaScript.
El punto de entrada principal de la aplicación, llamado por el framework de Agama, es la función onUpdate. Esta función tiene dos parámetros, state y reason. El parámetro state es un objeto que contiene la configuración de la aplicación. Así, todos los parámetros que definimos en el JSON devuelto en la función onConfiguration estarán disponibles en este objeto. El parámetro reason es un entero que indica por qué se está llamando a la función; nos permite implementar un manejo y un comportamiento diferentes según este. En nuestra aplicación, debemos manejar los motivos de creación y de cambio de configuración. En el código anterior se puede ver lo fácil y obvio que es acceder y usar los distintos parámetros de configuración que hemos definido.
La lógica del programa necesaria para implementar la funcionalidad es bastante simple. Cuando se crea la aplicación, configuramos un temporizador que asegura que nuestra función de test update() se llame en el intervalo configurado por el usuario. La función update() a su vez llama a la API REST definida y compara los códigos de resultado con los configurados, y según el resultado añade la clase CSS fail u ok al div de estado.
El resultado actual es el siguiente. Ya podemos ver el nombre del test definido, en este caso «VoD system» (que es el nombre que configuramos), pero no vemos ningún símbolo de estado. Es correcto y se debe a que aún no hemos añadido el estilo para el div de estado.
Estilo
Añadir estilo CSS para la aplicación es el último paso para tener su apariencia y funcionalidad en su sitio. Usamos el archivo creado automáticamente css/style.css y añadimos lo siguiente.
Es aquí donde definimos que «fail» se indique con un fondo naranja y «ok» con un fondo verde.
¡Sí, ahora se ve más prometedor!
Sobre Anders Svensson
Anders es un exitoso ejecutivo tecnológico con más de 20 años de experiencia en las industrias de las telecomunicaciones, la tecnología de la información y el streaming. Es responsable de las elecciones tecnológicas y trabaja en estrecha colaboración con los equipos de gestión de producto y desarrollo para garantizar las mejores condiciones posibles a la hora de crear las soluciones líderes en la industria de Agama.
