desarrollo de un widget de yahoo! connected tv para solicitud de cita médica en el sas

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?


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


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.


PLATAFORMAS DE SMART TV EXISTENTES

Específicas del fabricante


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.


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


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.


Mando a Distancia

VIEWPORTADD A SNIPPETSETTINGSCLOSE

EXITUP ARROWRIGHT ARROWOKLEFT ARROWDOWN ARROWBACK

WIDGETS

¿ JAVASCRIPT EN SMART TVs ?

JavaScript se usa ya en:


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:


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


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


GESTIÓN DE EVENTOS


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




1



2

1



3

2

1



1

2

3

4

DESARROLLO CON EL SIMULADOR

Equipo utilizado:


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


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',

});


Inicialización de las vistas en init.js



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); }

}}

}



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);



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;

};}());

}



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.


Tres tipos de almacenamiento persistente para perfiles y widgets:


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


(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);


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)


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


Documento HTML


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


Cadena JSON


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


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


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


Testeo en un televisor SAMSUNG UE40B8000XW

Versión del KONtx Framework 1.3.12.CVersión del Widget Engine 5.0.0

desarrollo de un widget de yahoo! connected tv para solicitud de cita médica en el sas

Technology