19 Jun Tutorial de Introducción a Alamofire [Parte 1]
1. Introducción
Alamofire. El tutorial de esta semana va a estar basado en Alamofire.
Si nunca has oido hablar de él, no te preocupes, vamos a comenzar desde cero en el uso de esta librería.
Si por el contrario, si que conoces Alamofire o incluso ya lo has utilizado en alguno de tus proyectos, aún así, te recomiendo que sigas leyendo y eches un vistazo a este tutorial. Puede que encuentres algún apartado interesante 😉
En un apartado posterior veremos en detalle en que consiste Alamofire. Por ahora es suficiente con que sepas que se trata de la librería más importante de Networking en Desarrollo iOS, programada íntegramente en Swift.
Por lo que si te interesa el Desarrollo iOS, es importante que conozcas el funcionamiento de Alamofire.
2. ¿Qué vamos a ver en este tutorial?
Vamos a desarrollar una aplicación completa que dispondrá de una UIStackView en pantalla, donde mostraremos información recuperada de servidor utilizando la librería Alamofire.
Se trata de un tutorial bastante completo, donde podrás ver en detalle como obtener datos a través de peticiones de red y como mostrar estos datos en pantalla.
Para no desarrollar un tutorial excesivamente grande, voy a dividirlo en 2 partes. En esta primera parte veremos toda la teoría que necesitas dominar para trabajar con Alamofire. En la segunda parte del tutorial nos centraremos en la parte práctica y será ahí donde aplicaremos lo aprendido, desarrollando nuestra aplicación.
Estos son todos los temas que vamos a ver en el tutorial completo:
- ¿Cuales son las mejores opciones para realizar peticiones a Servidor?
- ¿En qué consisten los verbos HTTP?
- Trabajando con JSON
- Funcionamiento de Alamofire
- Mockea tus servicios con Apiary
- Realizando peticiones con Alamofire
- Parseando la respuesta del servidor
- Mostrando datos en nuestra Aplicación iOS
Como puedes ver, una sencilla aplicación con una UIStackView nos permitirá trabajar con conceptos fundamentales del Desarrollo iOS como peticiones a servidor, parseo de respuestas y muestra de datos recibidos.
3. La Aplicación que vamos a desarrollar
Al terminar el tutorial, nuestra aplicación tendrá este aspecto:
Se trata de una aplicación con una interfaz extremadamente sencilla, ya que lo único que muestra son 3 imágenes y 3 labels. Sin embargo, la parte invisible al usuario es más compleja y es perfecta para entender el funcionamiento de Alamofire.
Lo que haremos realmente será recuperar a través de Alamofire un conjunto de datos en formato JSON y mostrarlos en pantalla a través de una UIStackView.
Se trata de un conjunto pequeño de datos, que consiste en 3 imágenes y 3 nombres. Podríamos añadir una mayor cantidad de datos al tutorial, pero para poder revisar el funcionamiento de Alamofire, es más que suficiente.
4. Peticiones a Servidor en una Aplicación iOS
Si pretendes desarrollar una Aplicación iOS medianamente ambiciosa, necesitas gestionar las peticiones a servidor desde tu App.
Para realizar este trabajo existen infinidad de alternativas.
Voy a mencionar las que son, desde mi punto de vista, las 3 mejores opciones:
URLSession
Se trata de la opción oficial que Apple ofrece a todos los Desarrolladores iOS para gestionar tareas de red.
Es una suite completa de métodos que te permiten gestionar peticiones HTTP desde tu Aplicación iOS.
Puedes ampliar información sobre esta API directamente aquí.
AFNetworking
AFNetworking es la librería de networking más usada en Desarrollo iOS con muchísima diferencia.
Fue desarrollada por Mattt Thompson a modo de envoltorio sobre las propias librerías de Apple.
Su objetivo es hacernos la vida más sencilla a los desarrolladores, ofreciéndonos una sintaxis mas clara y ocupándose de tareas tediosas a las que todo Desarrollador iOS debe enfrentarse en sus peticiones a servidor.
Si estás trabajando en un proyecto que fue creado hace 2 ó 3 años, es muy probable que estés utilizando esta librería para gestionar las peticiones de red.
Puedes ampliar información sobre esta librería, aquí.
Alamofire
De nuevo nuestro amigo Mattt Thompson acaparando la lista.
Alamofire es otra librería creada por él mismo, para ayudarnos en las mismas funciones que AFNetworking.
¿Entonces cual es la diferencia?
Mientras que AFNetworking fue desarrollada en Objective-C, Alamofire está escrita en Swift.
Esto nos permite, utilizar esta librería siempre que estemos trabajando en un proyecto en Swift, de forma que los patrones de la librería y del propio lenguaje de desarrollo encajen perfectamente.
Puedes ampliar información sobre Alamofire, aquí.
Por tanto, ten en cuenta lo siguiente:
5. Los Verbos HTTP
Es importante que conozcas los verbos HTTP antes de comenzar a trabajar con peticiones a servidor.
Cuando trabajamos creando software basado en una arquitectura cliente-servidor, en muchas ocasiones, nos integraremos con un estilo de arquitectura de software conocido como REST.
El objetivo de este tutorial no es el de explicar en detalle en que consiste este tipo de arquitectura, por lo que si quieres ampliar información puedes acceder aquí..
Uno de los pilares básicos de un sistema RESTful es el uso de una serie de verbos que nos permitirán interactuar con el backend de nuestra aplicación y poder realizar así las operaciones que necesitemos en cada momento.
Los 4 verbos principales que te permitirán realizar operaciones en el sistema RESTful son los siguientes:
GET
El verbo GET te permite solicitar y obtener datos del servidor. A través de él puedes recuperar uno o varios elementos.
POST
El verbo POST sirve para enviar y almacenar datos en el servidor.
PUT
Utilizaremos el verbo PUT cuando queramos modificar algún elemento ya creado en el servidor.
DELETE
Por último usaremos el verbo DELETE cuando queramos eliminar contenido del servidor.
Estos 4 verbos son la base de cualquier sistema RESTful y explican gran parte del funcionamiento de Internet.
Seguro que has oido hablar alguna vez del acrónimo CRUD. Cuando hablamos de CRUD nos referimos a:
- Create
- Read
- Update
- Delete
Es decir, las 4 operaciones que podemos realizar con los verbos HTTP que acabamos de ver.
Ahora que ya tienes una base teórica sobre el funcionamiento del protocolo HTTP, pasemos al siguiente concepto que debes dominar.
6. JSON
En este Tutorial vamos a utilizar JSON como formato de intercambio de datos.
Seguramente conozcas de arriba a abajo en que consiste JSON, sin embargo, como uno de los principios de EfectoApple es realizar Tutoriales que cualquiera pueda entender, independientemente de su experiencia y nivel de conocimientos, en este apartado vamos a ver rápidamente lo que es JSON.
JSON es el acrónimo de JavaScript Object Notation.
Se trata un formato de texto ligero para el intercambio de datos. Se utiliza comúnmente 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
{ "title": "X-Men: Apocalipsis", "release_date": "20/05/2016", "director": "Bryan Singer", "cast": [ { "name": "James McAvoy", "character": "Professor Charles Xavier" }, { "name": "Michael Fassbender", "character": "Erik Lehnsherr / Magneto" }, { "name": "Jennifer Lawrence", "character": "Raven / Mystique" } ] } |
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.
7. Funcionamiento de Alamofire
Centrémonos entonces en explicar el funcionamiento de Alamofire.
Funciones de Alamofire
Las 2 funciones principales que nos ofrece Alamofire a los Desarrolladores iOS son:
- Funciones de Networking
Se encarga de todas las operaciones de red (petición y respuesta). Al final de todas las capas que conforman Alamofire, termina utilizando la solución oficial de Apple: URLSession.
- Funciones de Serialización
Nos permite procesar el body de las peticiones y respuestas (json, xml, etc)
Petición Simple en Alamofire
Para realizar una petición simple a una URL haríamos lo siguiente:
1 2 3 |
Alamofire.request("http://...").response { response in //Aquí ya podremos trabajar con los datos de la respuesta } |
Como ves, se trata de un código muy sencillo. Utilizamos el método request() pasándole la URL y al objeto que nos devuelve ese método, podemos hacerle .response y pasarle una closure.
Esta closure recibirá los datos de la respuesta, cuando la respuesta llegue del servidor.
A través del objeto response nosotros podemos obtener toda la información de la petición a servidor. Veamos toda la información que puede darnos el objeto response:
- Obtener la petición que hemos realizado al servidor:
1 |
response.request |
- Obtener la respuesta del servidor:
1 |
response.response |
- Obtener los datos binarios:
1 |
response.data |
- Obtener el error en la petición (en el caso de que se haya producido):
1 |
response.error |
- Obtener estadísticas de tiempos de respuesta, latencia y otras opciones:
1 |
response.timeline |
Esta sería la forma más basica de realizar una petición HTTP con Alamofire.
Serialización de respuestas en Alamofire
Para utilizar los serializadores de Alamofire, en lugar de usar el método response, podemos utilizar cualquiera de estos:
1 |
responseString |
Deserializa los bytes de la respuesta a String.
1 |
responseJSON |
Deserializa los bytes de la respuesta a JSON.
1 |
responsePropertyList |
Deserializa los bytes de la respuesta a plist.
Como puedes ver, no existe por defecto un serializador para XML, pero nosotros mismos podemos crear uno si lo necesitamos.
Configurando el verbo de la petición
¿Qué pasa si en el momento de la petición queremos especificar el verbo HTTP que vamos a utilizar?
Pues que en el momento de la petición, deberemos añadirlo en nuestro código:
1 2 |
Alamofire.request("http://url", method: .post) |
En este caso, hemos realizado una petición POST a través de Alamofire.
Configurando las cabeceras de la petición
Puede que además del método queramos configurar las cabeceras de la petición. Esto podríamos hacerlo así:
1 2 |
Alamofire.request("http://url", headers: ["User-Agent":"xxx"]) |
En este caso estamos especificando que el User-Agent de nuestra cabecera es xxx.
Petición con parámetros en Alamofire
Hemos visto como realizar una petición sencilla desde Alamofire. Pero todas las peticiones que vamos a realizar no van a ser tan simples.
En muchas ocasiones vamos a tener que pasar una serie de parámetros al servidor.
Estos parámetros que vamos a enviar pueden ir en diferentes lugares dentro de nuestra petición.
Los 2 sitios más comunes son:
- Agregar los parámetros a la URL de la petición
- Agregar los parámetros al body de la petición
Nosotros especificaremos donde queremos que vayan a través del objeto encoding.
Si queremos que vayan en la URL, usaremos URLEncoding.default:
1 2 3 |
Alamofire.request("http://url", parameters: ["clave":"valor"], encoding: URLEncoding.default) |
Las parejas clave:valor que pasemos aquí se concatenarán a la URL.
Si por ejemplo, quisiéramos realizar una petición GET a la url www.example.com y pasarle estos 2 parámetros: param1 = 7 y param2 = 2 en la propia URL, haríamos lo siguiente:
1 2 3 |
Alamofire.request("http://www.example.com", parameters: ["param1":"7", "param2":"2"], encoding: URLEncoding.default) |
Y a través de esta request, generaríamos una petición HTTP como esta:
1 |
http://www.example.com/?param1=7¶m2=2 |
Si por el contrario, queremos pasar los parámetros en el body de la petición, usaríamos URLEncoding.httpBody:
1 2 3 4 |
Alamofire.request("http://url", method: .post parameters: ["clave":"valor"], encoding: URLEncoding.httpBody) |
Si te das cuenta hemos añadido, que la petición se trata de un POST.
¿Por qué?
Por esto:
Bonus: Enviando JSON en el body de la petición
Como apartado final, veamos como podríamos enviar un texto en formato json en el body de nuestra petición. Haríamos lo siguiente:
1 2 3 4 |
Alamofire.request("http://url", method: .post parameters: ["clave":"valor"], encoding: JSONEncoding.default) |
Como ves, hemos utilizado JSONEncoding.default.
Esto es algo muy útil que suele utilizarse bastante.
Con esto que acabamos de ver, estás preparado para trabajar con Alamofire. En la segunda parte del tutorial veremos como poner en práctica todos estos conceptos para desarrollar una aplicación iOS.
8. Resumen final
Espero que este tutorial te haya servido para asentar tus conocimientos sobre Alamofire. Por ahora solo hemos visto la parte teórica, pero todo esto nos servirá para tener una buena base a la hora de desarrollar la aplicación iOS usando Alamofire, en la segunda parte del tutorial.
Aquí tienes un pequeño resumen de los puntos más importantes que hemos visto:
- ¿Qué opciones tenemos para realizar peticiones a servidor en Desarrollo iOS?
- ¿Cuales son y en que consisten los verbos HTTP?
- Breve introducción a JSON
- Como realizar peticiones simples con Alamofire
- Serializando las respuestas con Alamofire
- Configurando el verbo de la petición
- Configurar las cabeceras de la petición
- Como realizar peticiones con parámetros con Alamofire
- Como podemos enviar JSON en el body de la petición
9. Has terminado el Tutorial
Has acabado la primera parte del tutorial de esta semana en EfectoApple. Como siempre, aquí tienes tu recompensa en forma de video:
10. ¿Donde ir ahora?
Dentro de muy poco publicaré la segunda parte de este tutorial, donde pondremos en práctica lo que hemos visto y desarrollaremos una app que solicitará datos al servidor.
Además te mostraré una herramienta muy sencilla que te ayudará a mockear tus propios servicios web.
Si no quieres perderte ningún tutorial de EfectoApple, puedes suscribirte a nuestra newsletter, a través del formulario que tienes al final de este post.
Puedes acceder a más tutoriales disponibles en EfectoApple, desde aquí.
Si este artículo te ha parecido útil, me harías un gran favor compartiéndolo en tus redes sociales.
Y como siempre, para cualquier duda, tienes los comentarios a tu disposición.
carlos
Publicado a las 16:24h, 13 julioLuis Capo!!, gracias por tu aporte, yo de igual forma que vos, pero del otro lado del mundo (dese Argentina) luego de 15 años de mi propia empresa de servicios de electricidad, sentí la necesidad de un cambio y decidí estudiar ingeniería en sistema, si bien aprendi muchísimo en la facultad, el aprendizaje en la misma no fue especifico en el desarrollo mobile el cual tengo que aprender de forma autodidacta y tu sitio me es de gran utilidad ya que en Android existe mucha información pero no es el caso de IOs.
Nuevamente gracias por tu aporte!!
Luis R
Publicado a las 19:39h, 13 julioUn placer Carlos!
Me alegro que los tutoriales te sean de utilidad!