Trabajo:APP Medialab

De FdIwiki ELP
Revisión a fecha de 23:55 19 ene 2017; Miguel Ángel García (Discusión | contribuciones)

(dif) ← Revisión anterior | Revisión actual (dif) | Revisión siguiente → (dif)
Saltar a: navegación, buscar

Introducción

El objetivo de este trabajo es la realización de una aplicación móvil donde el usuario pueda visionar los eventos próximos del Medialab-Prado (hasta 90 días) con la posibilidad de filtrarlos por fecha, tipo y precio. Mostraremos también la ubicación del centro y como llegar hasta él desde la posición donde se encuentre el dispositivo móvil. Contemplaremos la posibilidad de mostrar la ubicación de los eventos dentro del centro y el recorrido hacia los mismos desde la entrada principal. El alcance de la aplicación será, en un principio, una aplicación para la plataforma Android de Google. Este ejemplo se realizará lo más genérico posible para poder adaptarlo al resto de plataformas (iOS y Windows Phone) de forma sencilla.

¿Qué es Medialab-Prado?

Medialab-Prado es un programa del Área de Las Artes, Deportes y Turismo del Ayuntamiento de Madrid. Se concibe como un laboratorio ciudadano de producción, investigación y difusión de proyectos culturales que explora las formas de experimentación y aprendizaje colaborativo que han surgido de las redes digitales. Sus objetivos son:

  • Habilitar una plataforma abierta que invite y permita a los usuarios configurar, alterar y modificar los procesos de investigación y producción.
  • Sostener una comunidad activa de usuarios a través del desarrollo de esos proyectos colaborativos.
  • Ofrecer diferentes formas de participación que permitan la colaboración de personas con distintos perfiles (artístico,científico, ténico), niveles de especialización (expertos y principiantes) y grados de implicación.

Motivación y utilidad social

Queremos dar a conocer las actividades que se realizan en Medialab-Prado ya que es un espacio que promueve las comunidades muy interesante. Cuanta más gente participe en este espacio mayor será la diversidad ideas, nuevos proyectos y colaboraciones a proyectos existentes. Con esta aplicación pretendemos facilitar que, toda aquella persona que esté interesada en los eventos futuros de Medialab-Prado, pueda realizar su seguimiento desde su dispositivo móvil. Antes de realizar esta aplicación no había ninguna otra disponible con esta funcionalidad.

Obtención de los datos

Para la obtención de los eventos de MediaLab-Prado se utilizará el Portal de datos abiertos del Ayuntamiento de Madrid. Dentro de esta página se encuentra la Agenda de eventos en Medialab-Prado 90 días (datos de Medialab-Prado) que será nuestra fuente de información. Los datos disponibles de cada evento son los siguientes:

  • ID
  • FECHA
  • LUGAR
  • URL-ACTIVIDAD
  • TITULO
  • DESCRIPCION
  • DIA
  • MES
  • AÑO
  • PRECIO
  • GRATUITO
  • URL-INSTALACION
  • NOMBRE-INSTALACION
  • COORDENADA-X
  • COORDENADA-Y
  • LATITUD
  • LONGITUD
  • PROVINCIA
  • C. POSTAL
  • BARRIO
  • DISTRITO
  • TELEFONO
  • CORREO
  • TIPO

Tecnologías utilizadas

Para el desarrollo de la aplicación se usará Ionic2 y las funciones nativas que nos ofrece junto con Angular2, JavaScript y TypeScript, pudiendose adaptar de esta manera fácilmente a todas las plataformas. Los eventos se descargarán en formato xls y se parsearán guardándolos en una base de datos con el plugin nativo SQLite de Ionic 2. Para la localización del dispositivo utilizaremos el plugin nativo Geolocation y para el procesamiento de la ruta al edificio el plugin Google Maps SDK. Se permitirá seleccionar si la ruta se va a hacer a pie, en transporte público o en coche, para este último caso se da la posibilidad de abrir el navegador para que guíe al usuario en la conducción. El recorrido hacia los distintos eventos dentro del propio edificio se realizará sobre un mapa del edificio resaltando la zona donde se realice dicho evento.

Funcionamiento

Al iniciar la aplicación, el usuario accederá a la pantalla principal donde quedan listadas las actividades programadas para los próximos 90 días ordenadas por fecha (más recientes primero). Las actividades estarán organizadas en tarjetas donde se mostrará la fecha (bien visible), el título de la actividad, una imagen orientativa del tipo de actividad (taller, conferencia, mesa redonda, etc) y parte de la descripción que quepa en la tarjeta. Al pulsar sobre una actividad se nos mostrará toda la información relacionada con dicha actividad (fecha, localización dentro del edificio e indicaciones para llegar, descripción, teléfono de contacto, url de la actividad, correo...). En la pantalla principal habrá un botón para aplicar filtros a las actividades disponibles (por fecha, por tipo y por precio). El menú lateral contendrá un apartado "¿Como llegar?" que nos indicará el recorrido desde la ubicación actual del dispositivo hasta el centro Medialab-Prado en distintos tipos de transporte (a pie, en transporte público y en coche).

Framework de diseño

Estos son los modelos (mockups) realizados de la interfaz de la aplicación:

MockUp.png

Desarrollo de la aplicación

Hemos empezado el desarrollo de la aplicación partiendo del código básico que genera el comando ionic start introduciendo las pestañas que íbamos a necesitar.

  • La pestaña Acerca de es una pestaña sencilla con información estática sobre nosotros y Medialab.
  • La pestaña Cómo llegar ha sido mucho más complicada ya que requería trabajo y conocimiento sobre la API de Google Maps y las distintas llamadas a directionsService que nos devuelve las rutas recomendadas en función del medio de transporte. En el caso de transporte público pedimos la ruta con el menor número de transbordos y en el caso del coche utilizamos la opción de ruta óptima en función del tráfico. Además hemos configurado las pestañas para poder cambiar de trasporte fácilmente mediante observadores de dichas pestañas. También hemos incluido dos funciones nativas:

    • Geolocation para geolocalizar el dispositivo.
    • ConnectivityService para saber si el dispositivo tiene acceso a Internet para cargar los mapas. Si el usuario no tiene conexión, se informa de ello en el log.
  • La pestaña Eventos es la más complicada de todas ya que requiere del manejo de la base de datos nativa SQLite. Uno de los problemas más grandes que hemos tenido que afrontar con esta vista es la sincronía de todos los métodos asíncronos de las consultas en la base de datos executeSql. Para ello hemos necesitado buscar mucha información, que por otro lado no es muy abundante ya que es una tecnología puntera y en desarrollo, sobre las Promises de Javascript que permiten hacer esperar al hilo principal hasta que no acaben el resto de hilos cuando se devuelve la 'Promise'. Esto nos ha dado muchos problemas a la hora de cargar por primera vez los eventos y mostrarlos al iniciar la aplicación porque sin Promises el código Javascript se ejecuta mucho mas rápido que las consultas a la base de datos. Actualmente seguimos optimizando el código para mejorar el tiempo de espera al cargar los eventos. Contiene un array (elementList) para trabajar con los eventos durante la ejecución de la aplicación.

  • La creación de la base de datos y la obtención de información. Hemos añadido la base de datos como un proveedor de la aplicación para tener una buena estructura ya que siendo proveedor es accesible por todas las páginas contenidas en la aplicación de forma ordenada.

Dentro de la base de datos se encuentran varios métodos que nos permiten crear la tabla de eventos y la tabla de appInfo (información general de la aplicación) así como otro métodos para el manejo de estas tablas (inserción, borrado y consulta).
El método más importante en esta sección es getXLSRequest que nos permite acceder a la URL donde se encuentra el .xls mediante un objeto XMLhttpRequest. Una vez obtenida la respuesta parseamos el contenido del .xls quedándonos con los eventos de hoy y de los próximos días. Todos estos datos son introducidos en la base de datos para posteriormente trabajar con ellos.

  • El diseño tampoco nos ha resultado sencillo y ha requerido de múltiples iteraciones. Hemos intentado que sea lo más agradable a la vista posible, aunque todavía requiere de más trabajo, y estamos esperando a la próxima reunión con Medialab para que nos den feedback de cómo ajustar la aplicación a sus necesidades. También tenemos que hablar con ellos en esta reunión para que los datos del .xls tengan un formato adecuado y poder mostrar la información correctamente. Comentaremos también la posibilidad de que el .xls contenga una imagen y tipo (taller, conferencia, charla, mesa redonda...) de cada evento ya que haría mucha más vistosa la aplicación.

  • La APK está disponible en el repositorio en el siguiente enlace (Firmar y crear release APK con Ionic2). La aplicación también está disponible en la Play Store aunque, de momento, en beta cerrada. Si estás interesado en probarla puedes contactar con nosotros escribiéndonos a la siguiente dirección de correo electrónico: medialabfdi@gmail.com

Capturas reales de la aplicación

Estos son algunas capturas reales de la aplicación:

Archivo:Splash.png Eventos.png Detalles.png Busqueda.png Mapas.png Acera de.png

Código

Código compartido en GitHub

Integrantes del grupo

Todos los integrantes son de la clase 4ºC, GII y el curso 2016/17.

Marco Antonio Palacios Arauzo

Enrique García Ortiz

Miguel Ángel García Solano

Henar Martín Domínguez

Enlaces de interés

Página de datos abiertos del Ayuntamiento de Madrid

Datos de Medialab-Prado

Página de MediaLab-Prado

Documentación Ionic 2

Código compartido en GitHub

Formato del texto del articulo