Aplicación de iOS para Abades con gestión de datos en Google App Engine

Detalles de la aplicación para iOS

¿Para qué sirve?

  • Proporciona información de los establecimientos del Grupo Abades
  • Muestra las últimas noticias, promociones, eventos y tweets de las redes de la empresa
  • Se pueden conseguir puntos de Abades, con un número de puntos suficiente, el usuario puede canjear estos por regalos que cada establecimiento pone a disposición de clientes que los frecuentan.

 

Funcionalidades de la aplicación

1.- Información de los establecimientos de la empresa:

El proceso de funcionamiento de la aplicación del Grupo Abades es el siguiente: hay una caché de días en los que la base de datos no se actualiza a menos que el usuario lo requiera. La primera vez que se arranca este número de días y otros parámetros de configuración se ponen a 0, por lo que si entramos en el listado de establecimientos de un tipo: áreas de servicio, hoteles o restaurantes, se descargará de Google App Engine, los datos que se han guardado en el modelo de datos del servidor por los empleados de la empresa en formato XML y se insertarán en la base de datos local en alrededor de un minuto. A partir del momento en que se almacenan estos datos hay 6 dias en los que no se vuelven a actualizar al ser datos de un tipo distinto a las promociones/eventos, noticias o ficheros,  se mantienen actualizados con otra frecuencia distinta.  En el caso de ser una imagen, la primera vez que se descarga se guarda en una caché (* nota programadores: de ASIDownloadCache), que hemos visto en los cursos de programación de este blog, entonces se almacenarán durante el número de días configurado, 31 por defecto, ya que son más estables y no deberían cambiar a menudo. Veréis que hay mucha info que aparece en la aplicación que es replicada en la web, sin embargo hay secciones como los puntos de sitios de interés que es más completa en esta aplicación de iOS. Las subsecciones de esta funcionalidad son las  siguientes:

  1. Información:  es una réplica de la información de un establecimiento, dispone de un texto introductorio para colocar sobre el mapa, el título del establecimiento, su imagen en miniatura, una descripción ampliada junto con la información de los servicios que ofrece y las estrellas o rango establecido en función de lo que sea.
  2. Situación:  sólo abrir la pestaña de situación de un establecimiento encontraremos la posición GPS en el mapa de Google Maps para iPhone. De hecho, si pinchamos sobre la chincheta roja aparecerá un cartel indicando el nombre del establecimiento, su rango y su localización exacta de longitud y langitud en formato de coordenadas geodésicas de gmaps. El botón a la derecha con signo más (+) indica la posición actual del usuario y el de la flecha a la derecha (>) hace que el mapa se posicione donde se encuentra el establecimiento. Por último, sin pinchamos en el icono de información (i) aparece un menú para seleccionar un sitio de interés relacionado con la posición del establecimiento, al seleccionar uno de estos sitios, el mapa “volará” hasta su posición y colocará allí una chincheta violeta, esta, muestra un cartel con el nombre y un botón al pinchar sobre ella, este botón nos muestra un recuadro de información sobre el sitio de interés, que contiene un texto con enlaces que se abrirán en el navegador Safari para ampliar la información, calcular nuestra ruta,etc. El botón de la flecha nos llevará a la aplicación de Google Maps de iPhone para mostrarnos todos los establecimientos de la empresa y poder calcular rutas o realizar cualquier otra operación con dicha aplicación.
            
  3. Imágenes: al pinchar sobre la pestaña aparecería una galería de imágenes con sus respectivos títulos en la parte superior de la ventana, los botones anterior (|< ) y siguiente ( >| ) permiten navegar con transiciones por las distintas imágenes disponibles. El botón de Play ( |> ) hace que comience la reproducción de imágenes en secuencia, hasta que volvamos a pulsar sobre la imagen una vez. Si mantenemos el dedo presionado sobre la imagen unos segundos o pulsamos sobre el icono de compartir ( []=> ) aparecerá un menú que nos brinda la opción de poder guardar la imagen en nuestra galería de imágenes. Si se ejecuta una doble pulsación, agrandaremos la imagen y el gesto de peñizcarla además modificará su tamaño. Podemos arrastrar la imagen por la pantalla o girar el dispositivo para verla con una disposición distinta.
            
  4. Contacto:  esta sección de información de un establecimiento consiste en proporcionar al cliente toda la información referente a aquel, ya sea el teléfono, la web o el email con sus respectivos botones para acceder a estas funcionalidades, hasta la dirección, Fax y por último más información sobre el emplazamiento.
  5. Mediante el uso del botón refrescar en el listado de establecimientos podemos recargar manualmente los datos de la base de datos de estos.
  6. Las opciones de configuración de la aplicación para caché de imágenes, bases de datos, GPS, segundos entre cada pase de imágenes, y otras están en la aplicación de Ajustes de iOS -> Grupo Abades

2.- Promociones y eventos:

los empleados de la empresa, a través de la herramienta web de administración de promociones, colocan en abades.com y sus otras webs una lista de promociones, esta lista es accesible por medio de un fichero XML,tal como en la funcionalidad anterior se almacena una caché temporal de estas que permite visualizar una lista con títulos, centros y una imagen asociada, al pinchar sobre cualquiera de ellas entraríamos en la presentación de la imagen de la promoción ampliada, un texto descriptivo de la misma así como la información de contacto: teléfono, web, mail, etc. Su fecha y el centro de emplazamiento de la promoción o el evento.
     

3.- Mi cuenta en Abades:

Esta sección de la aplicación se utiliza para crear una cuenta con la que poder reunir puntos y reservar, con el fin de,  luego, canjear regalos, que ofrece la empresa a sus clientes, agradeciendo la estancia de estos en sus establecimientos. Lo primero que debemos hacer es entrar en Mi cuenta -> Crear Cuenta , rellenar los datos de: e-mail, contraseña y tu nombre y pulsar en el botón “Crear Cuenta“. Hecho esto nos llegará un e-mail de activación en el que debemos buscar un enlace para activar la cuenta en la aplicación de google app engine. Una vez activada nuestra cuenta, podemos rellenar los datos en “Mi cuenta -> Tengo Cuenta”  y pinchar en “Entrar con mi cuenta“, si todo ha ido bien aparecerá una ventana con los datos de tu cuenta, e-mail, nombre y puntos abades.
Estos puntos se consiguen por medio de checkins usando una cuenta de Foursquare. Es un requisito fundamental ya que todos los establecimientos se encuentran asociados a la cuenta de foursquare. Ahora pincharemos en el activador ON/OFF de Foursquare e introducimos nuestro usuario (email/teléfono) y password de esta red. Al pinchar aceptar debe aparecer un botón “Cerrar sesión“, lo cual nos indica que hemos iniciado la sesión correctamente, podemos usar el icono de cerrar (x) para volver a los datos de nuestra cuenta y ahora el indicador on/off estará activado, ya podemos hacer checkins desde el Mapa de la aplicación.

4.- Mapa:

Esta funcionalidad de la aplicación del Grupo Abades se utiliza para colocar todos los establecimientos de la empresa sobre el mapa y poder encontrar el que esté más próximo a nosotros con objetivo de realizar un checkin (estoy aquí) y recibir los puntos que proporciona el establecimiento por hacerlo cada día.
Hay que tener en cuenta que el cálculo de la distancia se realiza en línea recta por lo que si queremos saber la verdadera medida de distancia para viajar al establecimiento debemos usar otro software de GPS, para eso podemos utilizar el botón Google Maps para ver las posiciones de los establecimientos sobre la aplicación Google Maps de iPhone y calcular una ruta óptima en coche, bici, transporte público o a pie desde nuestra posición actual. Sólo cargar el mapa aparece una chincheta roja y si pulsamos sobre ella veremos que refleja nuestra posición GPS actual,

     

tal como reza el cartel superior derecho de Latitud y Longitud. En este mismo cartel podemos controlar el nivel de zoom del mapa con el deslizador dispuesto a tal efecto. Otros controles útiles son el centrador de posición ,con el botón “Mi posición“,  tendremos actualizada nuestra posición en todo momento, centrando el mapa en esta cada cierto número de segundos. Los botones Mapa|Sat|Híb modifican el formato de visualización de aquel de mapa a satélite o híbrido (mezcla de los dos primeros). Ahora, usaremos el botón con fondo azul y un radar blanco para que la aplicación busque el establecimiento más cercano a nuestra posición (si es que hemos permitido a esta el uso de nuestra localización,claro), y se mostraría una ventana con el título “El sitio más cercano es:” y el título y los kilómetros de distancia, al aceptar observaríamos que el mapa ahora está posicionado con el centro en dicho establecimiento y que pinchando sobre el icono de chincheta de Abades ([a]) aparece un recuadro con el título, categoría y un botón para mostrar una ventana que contiene información del sitio y un botón para hacer Checkin.

    
Al hacer checkin la aplicación intentará conectar con el servidor enviando los datos de nuestra cuenta y si hemos configurado que se muestren nuestros checkins en foursquare y redes sociales twitter y facebook aparecerá un mensaje del tipo “Chekin desde la app de Abades en el establecimiento…., obteniendo … puntos” con la información correspondiente, en estas redes sociales y en una ventana de información que nos confirma que todo ha ido correctamente, con nuestro nuevo saldo de puntos de Abades, ahora podemos consultar nuestra cuenta ,de la funcionalidad anterior y asegurarnos de que efectivamente tenemos esa cantidad de puntos de la que nos han informado. Lógicamente un usuario sólo puede hacer uso de una cuenta de Foursquare, en el momento en que la cuenta se utiliza para hacer un checkin en otra cuenta que no es la suya se borrarán todos los regalos reservados y puntos asociados.En el momento de hacer checkin además seremos informados de las últimas ofertas exclusivas para Foursquare y el Grupo Abades.

5.- Noticias y tweets:

este módulo consiste en la lectura del RSS generado por Yahoo! Pipes pasado a través de Feedburner para gestionar social media de todas las últimas noticias de todos los blogs y webs de la empresa, se muestra un listado de las últimas novedades y al pinchar en una de ellas aparece un resumen,  con título y fecha, podemos leer la noticia ampliada en la misma ventana mediante el icono del mundo o bien abrirla en el navegador Safari por medio del botón de “enviar a”  ([]=>). La sección de tweets accesible desde el logotipo de la empresa es exactamente igual en cuanto a funcionamiento pero sólo de la red Tweeter.
            

6.- Sección de regalos:

quizás la parte más interesante para los clientes, pues reciben algo físico a partir de su acción virtual. Consiste en reunir puntos de Abades por medio de checkins en los distintos establecimientos de la empresa, y ,tras consultar el listado donde aparece con un scroll horizontal, los diferentes premios
 
que podemos conseguir con estos puntos, seleccionamos el que deseemos y lo reservamos, después nos dirigimos al establecimiento donde se encuentra dicho item reservado y lo canjeamos en el punto habilitado para ello. En caso de cancelación se devolverían los puntos a la cuenta.

Para programadores:

El Reto

El reto de esta app consistió en poder crear una herramienta que sincronizara los datos de la web actual (abades.com) con los demás dominios (abadestriana.com, abadesnevadapalace.com) y appspot.com, y después crear un algoritmo para hacer un checkin válido así como sincronizar todos los elementos RSS en un único canal y adjuntarlo al programa de promociones actuales de las webs (blogs, noticias, etc. para cada idioma, inglés y español).

¿Qué usa la aplicación?

  • Un conjunto de servicios webs habilitados en una aplicación en Google App Engine para rellenar el contenido de la base de datos SQLite que trae (populate) instalada.
  • API de Foursquare para hacer checkin (con twitter y facebook habilitados)
  •  CoreLocation de iOS para comprobar la distancia al establecimiento más cercano, enviando si las condiciones se cumplen, un mensaje encriptado al servidor de appspot que los comprueba y aumenta los puntos de la cuenta de usuario que está utilizando la app.

¿Cómo se hizo?

La programación empezó donde véis el artículo de como crear una aplicación productiva y social, el esquema era el mismo, pero había que añadirle toda la parte de programación de servidor, ya que la empresa necesita tener actualizada la información que se comparte con los dispositivos y sus webs, la opción de crear un algoritmo en PHP era tentadora pero una aplicación de móbil necesita una buena respuesta y un servidor web no es precisamente una máquina en la que uno desee confiar plenamente, es decir, no siempre está operativa 100% porque tiene muchos usuarios desde la web, por lo que opté por un servidor de google app engine y usando Java creé todas las estructuras de datos donde almacenar la información de establecimientos como en las guías de los cursos de este blog, después lancé los servicios web que permiten dar de alta todos estos datos, y que son capturados por los analizadores sintácticos de la aplicación móvil, más adelante configuré efectos gráficos, mejoré el diseño y añadí la API de Foursquare gracias a frameworks ya disponibles en la red.

El analizador sintáctico es NSXMLparser, el framework ASIHttp permite descargar imágenes con caché de forma síncrona o asíncrona, el scroll view de regalos usa una caché para poder crear todos los que hagan falta, el modelo de datos es sencillo, contiene elementos transformables para almacenar listas, estas listas en Google App Engine con DataStore son persistentes y embebidas en clases que permiten la serialización de objetos, etc.

En cuanto a los mapas no hay mucho que contar, es lo que se suele hacer, una clase para las anotaciones, se captura el evento del dibujado para dibujar un icono distinto e intercalar un botón en recuadro que se muestra al pulsar sobre una chincheta o anotación, y las animaciones están hechas con QuartzCore, es decir UVAnimation con cambios entre transiciones de opacidad, tamaño y posición,…lo sé ,aún se puede mejorar :)

Puedes descargar la aplicación desde su sección: aquí.

Artículos relacionados:

  1. brave dice:

    Hola. Estoy haciendo una aplicación para un trabajo del instituto y es muy parecido a esta aplicación pero con muchos menos detalles, algo mas a una aproximación de lo que sería esta estupenda aplicación.
    No podriais poner el código de dicha aplicación o alguna parte o alguna versión preiva a la finalización de la aplicación? es que estoy muy atascado y no conozco nadie que pueda explicarme los errores que me da.
    Me gustaria estudiar informatica y dedicarme al desarrollo de aplicaciones pero me esta costando mucho empezar… gracias por todo!!

    • Juan Belón dice:

      Estás haciendo una app de iPhone para el instituto? vaya nivel no?….
      me encantaría poner el código pero pertenece a la empresa que me contrató y no puedo compartir ni una línea del mismo, pero te puedo decir que lo he hecho a partir de la información que hay en los tutoriales de los cursos de programación que encontrarás en esta misma página, y te puedo echar una mano con los errores cuando tenga un hueco, suerte! y ánimo con la carrera!!

      • brave dice:

        bueno, es para una clase de tecnología que el profesor nos dejo elegir un trabajo para final de año. Llevo un tiempo haciendo juegos en c (juegos pero sin imagen, de estos de adivina el nº, su nº es mayor o menor que x¿? jaja, cosas así) .
        Tengo una base de datos en mi ordenador que me descargue de internet y he montado MAMP para ahorrarme configuraciones que no entiendo de sql y eso pero no se como desde la aplicación hacer una petición a esa base de datos y que me muestra en una lista el resultado de la base de datos. una vez mostrado el listado, quiero que cada uno se cargue en otra vista y muestro la imagen del producto con su información y eso. tengo montado el esqueleto pero falta el ingrediente… bueno, pues nada, gracias por todo lo que pones en tu web. Saludos!!

        • Juan Belón dice:

          Pues haz un juego, ahí si que te puedo ayudar, algo sencillo en 3D con el motor Shiva, cuánto tiempo te queda?

          En el caso de que quieras seguir con lo que estás haciendo, si quieres comunicar una base de datos mysql con una app de iphone tendrás que crear un servicio web, por ejemplo en php, que por medio de una url se consuma (lea) en el iphone con formato JSON o XML por ejemplo…creo que ahora mismo se te escapa de las manos…una vez que lees los datos del servicio tienes que guardarlos en un modelo de datos (sqlite) de iOS, que se vincula a una tabla de datos, un tableview, cuando pulsas en una celda, se coge un objeto asociado al modelo de datos y se abre una vista que los muestra…es trabajo, pero una vez que lo haces por primera vez ya todo es más mecánico…
          sin embargo lo del juego es más divertido :)
          tienes alguna idea?

          • brave dice:

            el caso es que empece montando una página con un pequeña base de datos de una biblioteca y queria dejarlo en eso, pero como me quedaban 2 meses para entregar el trabajo le comente al profe si con lo que tenia me valia y me dijo que de sobra. Y como me gusta mucho la informatica, y trabajo con mac y en ratos libres me pongo con Xcode pues me puse a intentar crear una pequeña aplicación que comunicase con esa base de datos y mostrase el contenido de los electrodomesticos.
            Tengo un código de json adaptado a mi base de datos (no se si funciona) de una web que habla de un tal framwork de json o algo así, pero como dices me estoy quedando un poco perdido ;) pero bueno, como ya tengo el aprobado en esa asignatura pues lo tengo mas como un reto que como una obligación.
            Pero bueno, intentare seguir un poco la guía que me dices para ver como va el asunto. Te comento si avanzo! Gracias por todo.

            Por cierto, estoy viendo tus cursos y talleres y son geniales! Gracias por el trabajo!! espero hacer algún día trabajos como los que tiens expuestos.

          • Juan Belón dice:

            Ok, pues nada, ánimo, aún tengo que publicar dos entregas más del curso de aplicaciones de iOS y la parte de ejercicios, a ver si encuentro un poco de tiempo para hacerlo jeje

  2. samuel dice:

    Me gusta mucho tu trabajo se ve que eres un experto en el tema, te agradezco de antemano por tu buena colaboración, además de que ya es mucho con que nos enseñes en tus tutoriales, felicidades, eres de los mejores q he visto.

Please type the characters of this captcha image in the input box

Por favor escriba los caracteres de la imagen captcha en el cuadro de entrada

footer
jbelon © | sitemap.xml