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 Bueno
Departamento de Teoría de la Señal y Comunicaciones
Escuela Superior de Ingenieros de Sevilla

30 de Marzo de 2012

OBJETIVOS DEL PROYECTO

Desarrollo de un widget de Yahoo! Connected TV para solicitar,
consultar y cancelar cita médica en el SAS desde el televisor.

Widget de Cita Médica:
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 SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES

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 TV Integración de contenidos y servicios
Hybrid TV de Internet en los modernos aparatos
de televisión o set top boxes.
Smart TV


PLATAFORMAS DE SMART TV EXISTENTES

Específicas del fabricante

De organizaciones
Disponibles para de estandarización
múltiples fabricantes
De editores específicos

Las compañías de Internet
han advertido el potencial
de las Connected TVs y han
creado sus plataformas.


PLATAFORMA YAHOO! CONNECTED TV

Yahoo! Connected TV: Plataforma de pequeñas aplicaciones o
widgets que adaptan servicios y contenidos de la Red al medio
televisivo.

Interactividad Broadcast
Novedades
Nuevo protocolo de comunicación de dispositivos

Televisores

Set top box


YAHOO! CONNECTED TV: INTERFAZ DE USUARIO

Snippet
Los widgets de Yahoo! Sidebar view
presentan tres vistas básicas
Full Screen

Vista de Snippet Vista lateral


YAHOO! CONNECTED TV: DISPOSITIVO DE ENTRADA

Dispositivo de entrada

Mando a Distancia

WIDGETS Dispositivo modal
EXIT
UP ARROW Teclas con distintas
RIGHT ARROW
OK
LEFT ARROW
funciones según el modo.
DOWN ARROW
BACK
VIEWPORT
ADD A SNIPPET
SETTINGS
CLOSE


¿ JAVASCRIPT EN SMART TVs ?

JavaScript se usa ya en:

Navegadores

Servidores

Dispositivos Móviles

¿Por qué no usarlo también en
televisores conectados?


FUNCIONAMIENTO DE LA PLATAFORMA

Elementos que intervienen en el funcionamiento
de la plataforma Yahoo! Connected TV:

Widgets instalados en el televisor

El KONtx Framework

El Motor de JavaScript SpiderMonkey

El Motor de Widgets de Yahoo!

Sistema Operativo Linux embebido


EL KONTX FRAMEWORK (I)

Metodología de desarrollo basada en el KONtx Framework

Controles estándar

Las vistas se crean extendiendo las clases base de vista…
KONtx.system.SnippetView
KONtx.system.AnchorSnippetView
Clases base KONtx.system.ProfileSnippetView
de vista KONtx.system.SidebarView
KONtx.system.FullscreenView

…y sobrescribiendo los métodos createView() y updateView()


EL KONTX FRAMEWORK (II)

Comunicaciones del widget
con el Widget Engine a través
del KONtx Framework


GESTIÓN DE EVENTOS

Comunicación entre el widget y el Widget Engine
Evento del KONtx.application KONtx.system.Event
Widget Engine

Host Events
El widget se suscribe a ellos por medio de subscribeTo()

Child Events
Enviados al Widget Engine por medio de KONtx.HostEventManager.send()

Es posible construir sistemas de eventos personalizados
usando la clase KONtx.system.Event


FUNCIONAMIENTO DE LA APLICACIÓN



1



2

1



2

3

1



2

3

4
1


DESARROLLO CON EL SIMULADOR

Yahoo Widget Engine-Widget Development Kit

Funcionamiento testeado sobre
Paquete Debian YWE-WDK máquina virtual Ubuntu 10.04
distribuida por Yahoo!

Equipo utilizado: Portatil TOSHIBA Satellite L655.
Procesador Intel Core i5 CPU M480 @ 2.67GHz.
4,00 GB de memoria RAM.
S.O. Windows 7 de 64 bits.

Software de Virtualización: VMware Player 3.0.0
(también testeado sobre Virtual Box 4.1.10)


ARCHIVOS DEL WIDGET DE CITA MÉDICA

widgetID-versionNumber.widget

es.us.widgets.tv.cita8-0.2.8.widget

Estructura de carpetas dentro
del directorio Contents


CÓDIGO JAVASCRIPT DEL WIDGET DE CITA MÉDICA

Inicialización de las vistas en init.js
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',
});


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, "onApplicatio
nStartup", EventHandlers);
EventHandlers.onActivateSnippet.subscribeTo(KONtx.application, "onActivateSnip
pet", 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.

Entre 3 y 4 veces más rápido que la versión
JavaScript.
Analizador JSON Instancia global de la clase llamada JSON.
del Yahoo!
Widget Engine interface JSON {
variant parse( string inString );
string stringify( variant inValue );
};



Gestión de usuarios guardados. Almacenamiento persistente

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.

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)

Peticiones al servidor de InterS@S con libcurl

Libcurl protocolos
HTTP, HTTPS, FTP, FTPS, Gopher, Telnet, DICT, FILE, IMAP, IMAPS, LD
(PHP 4.0.2) AP, LDAPS, POP3, POP3S, RTMP, RTSP, SCP, SFTP, SMTP, SMTPS, Teln
et y TFTP.
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);


Mantenimiento de la sesión
HTTP/1.1 200 OK
Cabecera Set-Cookie: name=value
Set-Cookie: name2=value2; Expires=Wed, 09 Jun 2021 10:18:14 GMT
HTTP Content-type: text/html; charset=UTF-8
(contenido de la página)

$start = strpos($codigofuente2, "Set-Cookie"); Código para
$end = strpos($codigofuente2, "Content-Type"); extraer las
$parts = split("Set-Cookie: ",substr($codigofuente2, $start, $end-$start)); cookies de la
$cookies = array();
cabecera HTTP
foreach ($parts as $co){
$cd = split(";",$co);
if (!empty($cd[0])){
$cookies[] = $cd[0];
}
}
$cookies_sesion=implode(";",$cookies);

curl_setopt($curl3, CURLOPT_COOKIE, $cookies_sesion);


Parseando la respuesta: librería Simple HTML Dom parser

Documento
HTML Dato que nos interesa

Simple HTML Dom parser: Librería PHP para manipular HTML

Se incluye como cualquier otra librería:

include_once('simple_html_dom.php');

Es importante evitar el derroche de memoria que puede acarrear
eliminando los objetos DOM creados al finalizar con ellos.



Producción de una cadena JSON. json_encode()

Cadena
Variable numérica Cadena JSON
Array (normal o asociativo) json_encode()
Objeto

Producción de cadena JSON en la Web API alojada en el servidor intermedio:

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


SEGURIDAD DE LOS DATOS EN EL WIDGET DE CITA MÉDICA

Certificado SSL en el servidor intermedio

No podemos utilizar:
Certificado autofirmado SSL 3.0
Certificado de la FNMT

¿SSL?

Lista de Autoridades
Certificadoras
reconocidas
almacenada en el
Firmware del
televisor


POSIBLES MEJORAS

Mejoras interesantes:

Permitir documento identificativo distinto al D.N.I.

Evitar que las modificaciones en la aplicación web de
InterS@S afectasen al Widget de Cita Médica.

Recordatorio de “Cita próxima”.


VÍDEO: EL WIDGET EN UN DISPOSITIVO REAL

Testeo en un televisor SAMSUNG UE40B8000XW

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


Desarrollo de un Widget de Yahoo! Connected TV para solicitud de Cita Médica en el SAS

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (13)

Similar a Desarrollo de un Widget de Yahoo! Connected TV para solicitud de Cita Médica en el SAS

Similar a Desarrollo de un Widget de Yahoo! Connected TV para solicitud de Cita Médica en el SAS (20)

Más de José Ramón Cerquides Bueno

Más de José Ramón Cerquides Bueno (15)

Último

Último (20)

Desarrollo de un Widget de Yahoo! Connected TV para solicitud de Cita Médica en el SAS