Desarrollo de un Widget de Yahoo! Connected TV para
solicitud de Cita Médica en el SAS
María León Bujes
Tutor: Dr. Ramón Cerquides BuenoDepartamento de Teoría de la Señal y Comunicaciones
Escuela Superior de Ingenieros de Sevilla
30 de Marzo de 2012
OBJETIVOS DEL PROYECTO
Widget de Cita Médica:
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
Nueva forma de acceso al servicio de petición de cita médica ofrecido por InterS@S.
Desarrollo de un widget de Yahoo! Connected TV para solicitar, consultar y cancelar cita médica en el SAS desde el televisor.
OBJETIVOS DEL PROYECTO
¿Por qué desarrollar el Widget de Cita Médica?
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
El widget puede servir para hacer llegar el servicio ofertado por InterS@S a un mayor número de usuarios.
PERO, ¿QUÉ ES UN WIDGET?
Definición de Widget
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
Un widget es una pequeña aplicación o programa. Los widgets son ejecutados por un motor de widgets.
SMART TV: CONCEPTO
Connected TVHybrid TVSmart TV
Integración de contenidos y servicios de Internet en los modernos aparatos de televisión o set top boxes.
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
PLATAFORMAS DE SMART TV EXISTENTES
Específicas del fabricante
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
Las compañías de Internethan advertido el potencial de las Connected TVs y han creado sus plataformas.
Disponibles para múltiples fabricantes
De organizaciones de estandarización
De editores específicos
PLATAFORMA YAHOO! CONNECTED TV
Novedades
Yahoo! Connected TV: Plataforma de pequeñas aplicaciones o widgets que adaptan servicios y contenidos de la Red al medio televisivo.
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
Televisores
Interactividad BroadcastNuevo protocolo de comunicación de dispositivos
Set top box
Los widgets de Yahoo! presentan tres vistas básicas
YAHOO! CONNECTED TV: INTERFAZ DE USUARIO
Snippet
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
Sidebar viewFull Screen
Vista de Snippet Vista lateral
Dispositivo de entrada
YAHOO! CONNECTED TV: DISPOSITIVO DE ENTRADA
Dispositivo modalTeclas con distintas
funciones según el modo.
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
Mando a Distancia
VIEWPORTADD A SNIPPETSETTINGSCLOSE
EXITUP ARROWRIGHT ARROWOKLEFT ARROWDOWN ARROWBACK
WIDGETS
¿ JAVASCRIPT EN SMART TVs ?
JavaScript se usa ya en:
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
Navegadores
¿Por qué no usarlo también en televisores conectados?
Dispositivos Móviles
Servidores
FUNCIONAMIENTO DE LA PLATAFORMA
Elementos que intervienen en el funcionamiento de la plataforma Yahoo! Connected TV:
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
Widgets instalados en el televisor
El Motor de Widgets de Yahoo!
Sistema Operativo Linux embebido
El Motor de JavaScript SpiderMonkey
El KONtx Framework
EL KONTX FRAMEWORK (I)
Clases base de vista
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
KONtx.system.SnippetView
Las vistas se crean extendiendo las clases base de vista…
Controles estándar
…y sobrescribiendo los métodos createView() y updateView()
KONtx.system.AnchorSnippetView
KONtx.system.ProfileSnippetView KONtx.system.SidebarView KONtx.system.FullscreenView
Metodología de desarrollo basada en el KONtx Framework
EL KONTX FRAMEWORK (II)
Comunicaciones del widget con el Widget Engine a través del KONtx Framework
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
GESTIÓN DE EVENTOS
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
El widget se suscribe a ellos por medio de subscribeTo()
KONtx.applicationEvento del Widget Engine
Host Events
Child Events
KONtx.system.Event
Es posible construir sistemas de eventos personalizados usando la clase KONtx.system.Event
Enviados al Widget Engine por medio de KONtx.HostEventManager.send()
Comunicación entre el widget y el Widget Engine
FUNCIONAMIENTO DE LA APLICACIÓN
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
FUNCIONAMIENTO DE LA APLICACIÓN
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
1
FUNCIONAMIENTO DE LA APLICACIÓN
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
2
1
FUNCIONAMIENTO DE LA APLICACIÓN
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
3
2
1
FUNCIONAMIENTO DE LA APLICACIÓN
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
1
2
3
4
DESARROLLO CON EL SIMULADOR
Equipo utilizado:
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
Software de Virtualización:
Funcionamiento testeado sobre máquina virtual Ubuntu 10.04
distribuida por Yahoo!Paquete Debian YWE-WDK
(también testeado sobre Virtual Box 4.1.10)
Yahoo Widget Engine-Widget Development Kit
Procesador Intel Core i5 CPU M480 @ 2.67GHz.
4,00 GB de memoria RAM.
S.O. Windows 7 de 64 bits.
Portatil TOSHIBA Satellite L655.
VMware Player 3.0.0
ARCHIVOS DEL WIDGET DE CITA MÉDICA
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
Estructura de carpetas dentro del directorio Contents
widgetID-versionNumber.widget
es.us.widgets.tv.cita8-0.2.8.widget
CÓDIGO JAVASCRIPT DEL WIDGET DE CITA MÉDICA
KONtx.application.init({views: [
{ id: 'view-Main', viewClass: MainView },{ id: 'view-IntroducirDatos', viewClass: VistaIntroducirDatos },{ id: 'view-Esperar', viewClass: VistaEsperar },{ id: 'view-MostrarDias', viewClass: VistaMostrarDias },{ id: 'view-MostrarHoras', viewClass: VistaMostrarHoras },{ id: 'view-CitaAsignada', viewClass: VistaCitaAsignada },{ id: 'view-Informacion', viewClass: VistaInformacion },{ id: 'view-InformacionError', viewClass: VistaInformacionError },{ id: 'view-OtroDia', viewClass: VistaOtroDia },{ id: 'view-About', viewClass: AboutView },{ id: 'snippet-1', viewClass: SnippetView, data: { message1: "Versión 2.0", message2: "Cita Médica" , message3: "Servicio Andaluz de Salud"} },
],defaultViewId: 'view-Main',settingsViewId: 'view-About',
});
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
Inicialización de las vistas en init.js
CÓDIGO JAVASCRIPT DEL WIDGET DE CITA MÉDICA
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
Peticiones con XMLHttpRequest function funcion_xmlhttprequest(o){
if (KONtx.application.isPhysicalNetworkDown()) {KONtx.utility.WaitIndicator.off();return; }
var xhr = new XMLHttpRequest();xhr.autoRedirect = true;xhr.open(o.metodo, o.url, true);xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {if (xhr.status === 200) {
o.success(xhr);KONtx.application.setNetworkRequestFailed(false);
} else {o.error();KONtx.application.setNetworkRequestFailed(true); }
}}
}
CÓDIGO JAVASCRIPT DEL WIDGET DE CITA MÉDICA
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
Gestión de estado de desconexión
var EventHandlers = (function () {return {
onApplicationStartup: function () {funcion_xmlhttprequest(peticion0);
},onActivateSnippet:function () {
KONtx.application.setNetworkRequestFailed(false);funcion_xmlhttprequest(peticion0);
}}
}()); EventHandlers.onApplicationStartup.subscribeTo(KONtx.application,
"onApplicationStartup", EventHandlers);EventHandlers.onActivateSnippet.subscribeTo(KONtx.application,
"onActivateSnippet", EventHandlers);
CÓDIGO JAVASCRIPT DEL WIDGET DE CITA MÉDICA
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
Compatibilidad hacia atrás
if (typeof KONtx.application.isPhysicalNetworkDown === "undefined") {(function () {
var original = KONtx.application.setNetworkRequestFailed,setDownByUser = false;delete KONtx.application.setNetworkRequestFailed;KONtx.application.setNetworkRequestFailed = function (status) {
original(status);setDownByUser = status;
}; KONtx.application.isPhysicalNetworkDown = function () {
if (KONtx.application.getNetworkDownStatus) {return !setDownByUser;
}return false;
};}());
}
CÓDIGO JAVASCRIPT DEL WIDGET DE CITA MÉDICA
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
JSON Parser
JSON
Servidor Intermedio
Función eval() Rápida pero acarrea problemas de seguridad.
Analizador JSON del Yahoo!
Widget Engine
Entre 3 y 4 veces más rápido que la versión JavaScript.
interface JSON {variant parse( string inString );string stringify( variant inValue );
};
Instancia global de la clase llamada JSON.
CÓDIGO JAVASCRIPT DEL WIDGET DE CITA MÉDICA
Tres tipos de almacenamiento persistente para perfiles y widgets:
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
Store currentAppConfig: Datos asociados al widget. Store currentAppData: Datos asociados al widget y al perfil.
Store currentProfileData: Datos asociados al perfil.
Gestión de usuarios guardados. Almacenamiento persistente
Métodos:
Boolean delete (String key)
String get (String key)
Array getIDs()
Boolean set (String key, String value)
WEB API EN EL SERVIDOR INTERMEDIO (PHP)
Libcurl
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
(PHP 4.0.2)
protocolos HTTP, HTTPS, FTP, FTPS, Gopher, Telnet, DICT, FILE, IMAP, IMAPS, LDAP, LDAPS, POP3, POP3S, RTMP, RTSP, SCP, SFTP, SMTP, SMTPS, Telnet y TFTP.
Peticiones al servidor de InterS@S con libcurl
Soporta certificados SSL, HTTP POST, HTTP PUT, subida de ficheros usando FTP, formularios HTTP, proxies y cookies.
$curl = curl_init();curl_setopt ($curl, CURLOPT_URL, $url); curl_setopt ($curl, CURLOPT_RETURNTRANSFER, 1);curl_setopt ($curl, CURLOPT_USERAGENT, $agent);curl_setopt ($curl, CURLOPT_HEADER, 1); curl_setopt ($curl, CURLOPT_SSLVERSION, 3); curl_setopt ($curl, CURLOPT_SSL_VERIFYPEER, true);curl_setopt ($curl, CURLOPT_CAINFO, getcwd().'/FNMTClase2CA-FNMT.crt');curl_setopt ($curl, CURLOPT_SSL_VERIFYHOST, 2);curl_setopt ($curl, CURLOPT_POST, 1);curl_setopt ($curl, CURLOPT_POSTFIELDS, $campos);$codigofuente = curl_exec ($curl);curl_close ($curl);
WEB API EN EL SERVIDOR INTERMEDIO (PHP)
HTTP/1.1 200 OKSet-Cookie: name=valueSet-Cookie: name2=value2; Expires=Wed, 09 Jun 2021 10:18:14 GMTContent-type: text/html; charset=UTF-8(contenido de la página)
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
curl_setopt($curl3, CURLOPT_COOKIE, $cookies_sesion);
$start = strpos($codigofuente2, "Set-Cookie");$end = strpos($codigofuente2, "Content-Type");$parts = split("Set-Cookie: ",substr($codigofuente2, $start, $end-$start));$cookies = array();foreach ($parts as $co){
$cd = split(";",$co);if (!empty($cd[0])){$cookies[] = $cd[0];
}}$cookies_sesion=implode(";",$cookies);
Cabecera HTTP
Mantenimiento de la sesión
Código para extraer las
cookies de la cabecera HTTP
WEB API EN EL SERVIDOR INTERMEDIO (PHP)
Documento HTML
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
include_once('simple_html_dom.php');
Se incluye como cualquier otra librería:
Es importante evitar el derroche de memoria que puede acarrear eliminando los objetos DOM creados al finalizar con ellos.
Simple HTML Dom parser: Librería PHP para manipular HTML
Dato que nos interesa
Parseando la respuesta: librería Simple HTML Dom parser
WEB API EN EL SERVIDOR INTERMEDIO (PHP)
Cadena JSON
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
Producción de cadena JSON en la Web API alojada en el servidor intermedio:
Cadena
Producción de una cadena JSON. json_encode()
Variable numérica
Array (normal o asociativo)
Objetojson_encode()
1 Los datos se almacenan en una Array Asociativo.
2 El array se pasa como parámetro a la función json_encode() de PHP.
3 Se ejecuta print ($json) donde $json=json_encode($array).
SSL 3.0
SEGURIDAD DE LOS DATOS EN EL WIDGET DE CITA MÉDICA
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
Lista de Autoridades Certificadoras reconocidas
almacenada en el Firmware del
televisor
No podemos utilizar:Certificado autofirmadoCertificado de la FNMT
Certificado SSL en el servidor intermedio
¿SSL?
POSIBLES MEJORAS
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
Evitar que las modificaciones en la aplicación web de InterS@S afectasen al Widget de Cita Médica.
Permitir documento identificativo distinto al D.N.I.
Recordatorio de “Cita próxima”.
Mejoras interesantes:
VÍDEO: EL WIDGET EN UN DISPOSITIVO REAL
DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
Testeo en un televisor SAMSUNG UE40B8000XW
Versión del KONtx Framework 1.3.12.CVersión del Widget Engine 5.0.0
Recommended