fbpx
 

Crea tu Aplicación iOS Cliente-Servidor [Parte 1]

Crea tu Aplicación iOS Cliente-Servidor [Parte 1]

1. Introducción

Lo primero de todo, si has trabajado antes en alguna aplicación iOS cliente-servidor, lo más probable es que hayas trabajado con JSON. Si este es tu caso, puedes pasar directamente al punto 2 de este tutorial

Si por el contrario no tienes experiencia anterior con JSON, aquí tienes una brevísima introducción que te permitirá seguir paso a paso este tutorial.

¿Qué es JSON? 

JSON es el acrónimo de JavaScript Object Notation. Es un formato de texto ligero para el intercambio de datos. Es comúnmente usado para representar datos estructurales y para intercambiar datos en aplicaciones cliente-servidor. Es una alternativa moderna al clásico XML. Una gran cantidad de los servicios que utilizamos todos los días tienen APIs basadas en JSON. La mayor parte de las aplicaciones de iOS como Twitter o Facebook envían datos a los servicios web de sus backends en formato JSON.

Como ejemplo, aquí tenemos una representación de un objeto Película en formato JSON:

En este JSON de ejemplo, podemos observar un objeto Película con los siguientes campos:

  • Título
  • Fecha de lanzamiento
  • Director
  • Reparto (Un array de diccionarios, donde cada diccionario representa a un actor y su personaje)

Como puedes ver, los datos en formato JSON son más fáciles de leer y parsear que en XML.

Si nunca antes habías oído hablar de JSON y quieres aprender más sobre él, puedes echar un vistazo a esta Guía de JSON: Guía de JSON

Desde hace varios años, el SDK de iOS es capaz de trabajar de forma nativa con JSON. En este tutorial veremos como recuperar y parsear datos en formato JSON de la API de Meetup utilizando la clase NSJSONSerialization.

2. ¿Qué vas a aprender en este tutorial?

En este tutorial veremos los siguientes puntos:

  • Diseñar la arquitectura de una aplicación iOS cliente-servidor.
  • Como crear el modelo de datos de nuestra aplicación.
  • Seguir los pasos necesarios para registrarte en la API de Meetup.
  • Realizar peticiones a esta API para poder obtener los datos que necesitamos en formato JSON.
  • Interpretar y parsear esos datos utilizando NSJSONSerialization.
  • Como trabajar con el patrón de diseño Facade.

[caja-gris]Si crees que alguno de estos puntos puede ser interesante para ti, sigue adelante, ¡COMENZAMOS![/caja-gris]

3. Echando un vistazo a nuestra app

En este tutorial vamos a crear una app muy simple llamada BrowseMeetup que consumirá la API pública de Meetup. Si nunca has oído hablar de Meetup, debes saber que es la red más grande del mundo para organizar reuniones de grupos con intereses comunes. A través de ella puedes crear grupos locales o encontrar alguno entre los miles disponibles. Al igual que otras redes sociales ofrece una API pública para acceder a sus datos desde tus propias aplicaciones.

Nuestra app BrowseMeetup consumirá el servicio web de Meetup para buscar grupos en Madrid. La app conectará con la API de Meetup, recuperará los datos y los mostrará por pantalla.

A nivel de interfaz, nuestra aplicación será muy sencilla. Dispondremos de un Navigation Controller y un TableViewController. Simplemente mostrará una TableView, donde se detallará cada uno de los grupos de Meetup disponibles en Madrid.

En este caso lo verdaderamente importante del tutorial sucede de forma invisible al usuario.

Para que te hagas una idea de lo que queremos conseguir, este será el aspecto de nuestra aplicación, una vez que esté terminada:

aplicación iOS cliente-servidor Meetup Project iPhone 6

[caja-gris]Un lector de EfectoApple ha desarrollado este proyecto en Swift. Puedes acceder a este código directamente desde el apartado 9 de la segunda parte del tutorial[/caja-gris]

4. Comenzando

El objetivo de este tutorial es aprender a trabajar con datos en formato JSON utilizando NSJSONSeralization, por lo que vamos a ahorrarnos todo el proceso de configuración del proyecto y creación de la interfaz y a trabajar directamente con este proyecto creado por mi: Descarga el proyecto inicial.

[caja-gris]El proyecto se ha creado para un tamaño de 4,7 pulgadas, por lo que para un funcionamiento óptimo debes ejecutarlo en el simulador para iPhone 6 de Xcode[/caja-gris]

Es simplemente un proyecto creado por mi desde cero, donde ya está creada la interfaz de la aplicación, para poder ahorrarnos tiempo y centrarnos en lo importante: La conexión con la API de Meetup y el tratamiento de los datos que nos devuelve

Descarga el proyecto, ábrelo en Xcode y vamos a echarle un vistazo.

Como puedes ver, se llama MeetupProject. Abre el fichero Main.storyboard para poder ver la interfaz de la aplicación.

aplicación iOS cliente-servidor captura2

Como puedes observar se trata de una interfaz muy simple, donde tendremos una TableView con varias celdas y en cada celda utilizaremos 4 labels para mostrar la información:

  • Label para el nombre del grupo de Meetup (z)
  • Label para el nombre de los organizadores del grupo (Who)
  • Label para la descripción del grupo (Lorem Ipsum…)
  • Label para la localización del grupo (City, Country)

Aparte de la interfaz no hay nada más implementado en este proyecto, por lo que es perfecto para comenzar con nuestro tutorial. Así que sin perder más tiempo… 

!Comenzamos!

5. Trabajando con la API de Meetup

Antes de poder utilizar la API de Meetup, primero deberás crear una nueva cuenta en Meetup. Para comenzar, entra en APIs Doc  y haz click en el botón “Request to join Meetup group”, después elige la forma de registro, ya sea mediante Facebook, Google o por email.

aplicación iOS cliente-servidor captura4

Rellena la información que te vayan solicitando hasta que veas este mensaje en pantalla:

captura5

Eso querrá decir que ya puedes utilizar la API de Meetup en tus aplicaciones.

Dentro de la API de Meetup y en cualquier API en general existen una serie de métodos a los que debemos de llamar para obtener la información que queramos. Cada método devuelve un tipo de información diferente.

En nuestro caso vamos a utilizar el método GET /2/groups

Tal y como se explica en el enlace, éste método permite obtener información sobre los grupos de Meetup. Si echas un vistazo a los parámetros que acepta verás que permite especificar la latitud y longitud de una ubicación determinada para devolver los grupos cercanos a esa localización. Eso será lo que hagamos. Especificaremos la latitud y longitud de un punto concreto y obtendremos los grupos de Meetup que estén ubicados cerca de él.

Meetup además nos ofrece una Consola API donde podemos realizar peticiones de prueba y ver las respuestas que obtenemos. Es perfecto para practicar y entender el funcionamiento de la API.

Te animo a que pruebes la herramienta y veas como modificando los parámetros de entrada varían las respuestas recibidas del servidor.

Como ejemplo, aquí tienes una petición realizada por mí, donde especifico los siguientes parámetros:

  • latitud = 40,396916
  • longitud = -3,608977
  • page = 1 (Éste parámetro se refiere al nº máximo de grupos que quieres recibir en la respuesta)

Y aquí tienes parte de la respuesta que produce (He omitido algunas partes para que sea más legible):

No te preocupes si no eres capaz de entenderlo completamente. De este JSON, lo único con lo que tienes que quedarse es que está dividido en dos partes: results meta. Nosotros únicamente necesitaremos la parte de results, ya que es donde aparece la información que queremos mostrar en nuestra app.

6. Diseño de la aplicación y como funciona

Antes de comenzar a desarrollar, vamos a explicar el diseño de clases nuestra aplicación iOS Cliente-Servidor. Ya hemos mencionado antes que la API de Meetup ofrece este método para obtener los grupos situados cerca de una localización determinada. 

Este método nos devolverá esa información en formato JSON. 

Nuestra aplicación deberá recuperar esta información y construir los objetos que utilizaremos en nuestra app. 

Justo debajo tienes un esquema del diseño de nuestra aplicación, mostrando como están estructuradas las clases y como trabajan juntas para obtener los grupos de Meetup:

aplicación iOS cliente-servidor captura6

Si a primera vista hay partes que no entiendes, no te preocupes, lo vamos a ver en detalle:

  • La clase MeetupManager será la encargada de solicitar los grupos de Meetup para una localización concreta. Aquí la clase MeetupManager actúa como un coordinador de otras clases. Es lo que se conoce como el Patrón de Diseño Facade (Fachada en castellano). Si nunca antes has oído hablar de él no te preocupes, quédate con que se trata de una clase coordinadora de otras clases. El patrón Facade intenta ofrecer una interfaz simplificada al view controller y protegerlo de toda la implementación subyacente.
  • La clase MeetupCommunicator es utilizada para comunicarse con la API de Meetup. Una vez que Meetup ha respondido con datos en formato JSON, pasaremos este JSON a la clase GroupBuilder que será la encargada de construir el objeto Grupo.
  • La clase MasterViewController se encarga de presentar los grupos en su TableView obtenidos a través de la clase MeetupManager. 

7. Creando el Modelo de Datos para gestionar el JSON

Ahora si, vamos a comenzar a crear nuestra aplicación. Para ello comenzaremos creando nuestro modelo de datos. Sabiendo que el método de la API de Meetup que vamos a utilizar devuelve un conjunto de grupos, lo lógico sería que creáramos una clase Grupo para almacenar esa información.

Aquí tienes un ejemplo de respuesta JSON de un objeto Grupo:

Este JSON representa un Grupo en Meetup. No vamos a usar todos los datos que recibimos en este JSON. Simplemente utilizaremos los campos:

  • Name
  • Description
  • Who
  • Country
  • City

Estos campos son suficientes para presentar la información que necesitamos en la TableView de nuestra app.

Una vez que ya sabemos cuales son los campos que necesitamos, ya podemos crear nuestra clase modelo: Group.

Para ello haz en Xcode: File > New File…, elige Cocoa Class, dale el nombre Group, y haz que herede de la clase NSObject

aplicación iOS cliente-servidor creando_clase_Group

Una vez que hayas creado nuestra clase modelo, añade el siguiente código en su fichero header (Group.h):

Estas propiedades serán las que almacenen la información que mostraremos en nuestra app.

Si te das cuenta, al declarar estas propiedades, Xcode mostrará un warning debido a la property description. Esto se debe a que nuestra clase Group hereda de NSObject. NSObject es la clase raíz de la que heredan todas las clases en iOS. Este warning se produce porque la clase NSObject ya tiene una propiedad llamada description (Puedes comprobarlo accediendo a la clase NSObject desde Xcode y haciendo una búsqueda “description”. Por este motivo, Xcode, nos muestra este warning. Para solucionarlo, lo único que tendremos que hacer será sintetizar nuestra propiedad. Es decir, vamos a Group.m y añadimos esta linea:

Volvemos a compilar (Cmd+B) y veremos que el warning ha desaparecido.

8. Resumen de nuestra aplicación iOS cliente-servidor

Hasta ahora, hemos visto como diseñar la arquitectura de clases de nuestra aplicación, como crear el modelo de nuestra app, basándonos en la respuesta JSON  y también hemos seguidos los pasos necesarios para registrarnos en la API de Meetup, lo que nos permitirá obtener los datos que mostraremos por pantalla. Sigue avanzando y pronto tendrás una aplicación cliente-servidor totalmente funcional.

9. ¿Donde ir ahora?

Hasta aquí la primera parte del tutorial Crea tu Aplicación iOS Cliente-Servidor.

Si quieres acabar la aplicación que has comenzado, por favor, continúa a la segunda parte del tutorial.

Sin comentarios

Escribe un comentario

10AppsIpad

Descarga las 10 Aplicaciones

Introduce tu Nombre y tu Email para recibir las Apps en tu Correo

Acabo de enviarte un email. Sigue las instrucciones para descargar las Aplicaciones. Puede que tengas que revisar tu buzón de correo no deseado. Gracias.