Usar CocoaPods en tu proyecto XCode

Seguimos con los tutoriales para adquirir herramientas para nuestros proyectos con XCode, hoy nos dedicaremos a CocoaPods.

Primero que todo ¿Qué es CocoaPods? Es básicamente un manejador de dependencias de librerías para proyectos de XCode. ¿Esa vaina no te dice nada? bueno, en términos sencillos resulta que hay mucha gente por allí desarrollando código para compartirlo libremente con el resto de humanidad, a eso lo llamamos OpenSource o código abierto; esta gente que te digo ha organizado su código en librerías, que son porciones de código funcional que puedes importar a tus proyectos, conservando sus derechos de autor (que los tienen claro, pero nos dejan usarlo). Para que sea más sencillo aún se han organizado en lugares públicos en internet llamados repositorios. ¿Te es familiar la palabra? Claro, hablamos de ello en el post de GitHub, y les han puesto índices para que podamos encontrarlos según su utilidad. Aja ¿Y CocoaPods? pues es un software que te ayuda a usar esas librerías y a garantizar que haya consistencia en las dependencias, ¿Y qué son las dependencias? Son otras librerías que necesitas para que el código funcione. Más info en https://cocoapods.org

¿Qué cosas podemos encontrar en CocoaPods? Librerías útiles como AFNetworking, que se encarga de hacer por nosotros operaciones de descarga de información de la red para ponerlas a disposición del app, librerías para manejar iBeacons, para tener informes detallados de errores en las aplicaciones y muchas cosas interesantes que te ahorran esfuerzo.

¿CÓMO SE HACE?

Lo primero que necesitamos es abrir la terminal, si, tu Mac tiene línea de comandos y por debajo sigue siendo básicamente un Unix. La puedes encontrar en el Finder en la ruta Aplicaciones -> Utilidades -> Terminal

Los Mac con versiones superiores a 10.7 (Lion) tienen ya instalado Ruby que es necesario para poder instalar CocoaPods, no hablaremos hoy de Ruby, solo lo actualizaremos para garantizar que tenemos la última versión, con el siguiente comando, es probable que te pida tu password:

$ sudo gem update --system

Verás como resultado algo como esto:

Captura de pantalla 2015-11-25 00.10.49

Ahora instalaremos CocoaPods, así:

$ sudo gem install -n /usr/local/bin cocoapods

La instalación puede tomar un tiempo, ten paciencia. Esta forma de instalarlo funciona aun si tienes instalado “El Capitan”.

Si no quieres o no puedes usar privilegios de root para la instalación, puedes consultar instrucciones detalladas (en inglés) en la página de CocoaPods

Suponemos que ya tienes tu proyecto creado, si necesitas un recorderis sobre ello lee el post sobre la primera app sin código. Ahora vamos a crear un archivo llamado PodFile en la carpeta raíz de tu proyecto. ¿Puedes crearlo por la interfaz gráfica? Si, si tienes instalado un editor de texto plano como Sublime Text puedes hacerlo directamente, para quienes no lo tengan lo explicaremos desde la terminal.

Nos ubicaremos en la terminal en la carpeta raíz de tu proyecto, si no sabes donde está ve al Finder y observa la ruta que te muestra abajo.

Captura de pantalla 2015-11-25 00.39.03

Si tu sistema operativo está en español (como el mío) debes saber que el nombre de la ruta original está en inglés, así que para entrar a la ruta mostrada arriba debes hacerlo en la terminal con el comando mostrado a continuación. Esto es Unix, ten cuidado en conservar mayúsculas y minúsculas:

$ cd /users/iyepes/Documents/XCode/hcoportfolio

Para verificar que estás en el lugar correcto puedes digitar el comando pwd que te mostrará tu ruta actual. Luego usaremos “nano” que es un editor de texto plano para crear el archivo así:

$ nano PodFile

Obtendremos una ventana como esta que nos permitirá editar el archivo.

Captura de pantalla 2015-11-25 01.06.21

Agregaremos el siguiente texto al archivo que indica, lugar donde están los el repositorio, versión del sistema operativo destino (fíjate que coincida con el target de tu proyecto) nombre de tu proyecto y el nombre de la librería, en nuestro ejemplo AFNetworking.

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '9.1'
workspace 'hcoportfolio'
pod 'AFNetworking'

Para guardar presionas ctrl+o (la letra o) y para salir ctrl+x

Asegúrate de que tu proyecto esté cerrado en XCode e instala la librería con el siguiente comando:

$ pod install

Si te da el error “pod: Command not found” es necesario cambiar los permisos de la carpeta donde fue instalado CocoaPods, esto puede pasarte si vienes de un upgrade a “El Capitan”. puedes hacerlo así:

$ sudo chmod -R 755 /usr/local/bin

Una vez aceptado el “pod install” debe comenzar la instalación.  Tardará dependiendo de la velocidad de tu conexión a internet, pues lo que hace el instalador es descargar la librería de internet y añadirla a tu proyecto. Al terminar te mostrará algo como esto.

Captura de pantalla 2015-11-25 02.07.47

Captura de pantalla 2015-11-25 02.21.16Observa la advertencia que dice cerrar las sesiones abiertas de tu proyecto y a partir de ahora abrirlo desde el archivo terminado como .xcworkspace, el otro que termina en .xcodeproj no tiene las librerías que acabamos de adicionar. Al abrirlo notarás que ahora hay dos carpetas principales, una con el nombre de tu proyecto y la otra con el nombre Pods

Hay un truco, estamos agregando a un proyecto en Swift una librería que está escrita en Objective-C, ambos son interoperables, es decir puedo usar código en ambos lenguajes en la misma aplicación, para ello crearemos un archivo de enlace del siguiente modo:
Captura de pantalla 2015-11-25 02.27.14

Creamos un nuevo archivo en nuestro Workspace usando File -> New -> File

Captura de pantalla 2015-11-25 02.30.44

 

Seleccionamos un nuevo archivo de Objective-C

 

Captura de pantalla 2015-11-25 02.32.30

 

Le damos cualquier nombre, lo borraremos después así que no importa

Continuamos con Captura de pantalla 2015-11-25 02.32.35 luego Captura de pantalla 2015-11-25 02.32.49 y posteriormente se nos presentará una ventana que nos preguntará como queremos crear el Objective-C bridging header.

Captura de pantalla 2015-11-25 02.34.14

Damos click sobre Create Bridging Header, esto solo hay que hacerlo una vez y aparecerá un archivo con el nombre del proyecto y como Bridging Header.Captura de pantalla 2015-11-25 02.42.34 Allí importaremos las librerías que necesitemos, por ejemplo:
Captura de pantalla 2015-11-25 03.06.26

#import "UIImageView+AFNetworking.h"
#import "UIActivityIndicatorView+AFNetworking.h"

No olvides borrar el archivo dummy.

¿Cómo usaremos esas librerías? Bueno, eso lo veremos en otro post.

UPDATE sobre swift

Si estás agregando un pod a swift vas a obtener este error:

Captura de pantalla 2016-02-26 21.52.33

Debes agregar en la parte superior de tu PodFile lo siguiente al comenzar:

use_frameworks!

source 'https://github.com/CocoaPods/Specs.git'

Tu primera app para iPhone sin usar código

Este post está dirigido a quienes quieren acercarse a la programación para dispositivos móviles pero que todavía no han profundizado mucho en elementos de programación.  El método es ir haciendo para ir aprendiendo y luego si moverse hacia elementos más complejos.  Si ya sabes de programación pero en otra área puede serte interesante esta introducción.

Algunos términos primero:

  • iOS: Sistema operativo que corre en los iPhone/iPad
  • Swift: Lenguaje de programación nuevo para crear programas para productos Apple.
  • Objective-C: Lenguaje de programación anterior para crear programas para productos Apple.
  • XCode: Entorno de desarrollo nativo, es decir provisto por el fabricante, y que se puede descargar en cualquier PC/Laptop Mac desde https://developer.apple.com/xcode/

En este tutorial suponemos que ya tienes XCode instalado, sino simplemente descárgalo de la página antes dicha y sigue los pasos del instalador (next, next), así de simple.

Las imágenes animadas de este tutorial puedes darles click para ver las versiones de mayor resolución.

CONOCIENDO XCode

Xcode inicioLo primero que verás al abrir XCode será una ventana como esta, la cual te permite iniciar un Playground (no hablaremos de eso hoy), crear un nuevo proyecto o iniciar algo desde un repositorio existente (tampoco lo cubriremos hoy). A la derecha, no mostrado en la figura, podrías abrir proyectos que ya hayas comenzado antes, debe estar vacío si tu XCode está recién instalado. Escogeremos la opción de crear un nuevo proyecto de XCode.

Escoger tipo appNos pide entonces escoger una plantilla para la aplicación, a la izquierda está la lista de sistemas operativos para los cuales podemos crear cosas, para nuestro caso escogeremos iOS y que sea una aplicación de una sola vista.

Datos del appLuego debemos identificar la aplicación, escoge un nombre que sea unico, el nombre de la organización es tu empresa o el tuyo propio si desarrollas para ti, el nombre de la organización se escribe como un nombre de dominio pero al revés, debe ser único por lo cual si posees un dominio personal en internet sería lo más indicado para nombrarlo, sino lo posees para efectos de prueba puedes inventarte el dominio que quieras. Escogeremos como lenguaje Swift, como dispositivo iPhone y por ahora deshabilitaremos el Unit Testing y el UI Testing.

Elegir ubicacionElige el lugar donde deseas guardar el proyecto, XCode creará por sí mismo una carpeta con el nombre que le diste al proyecto en el lugar que elijas. Activa la casilla inferior donde dice Source Control -> Create a Git Repository on -> My Mac. Esto va a servir para que XCode administre los cambios en tu código y luego cuando vayas a usar un manejador de versiones ya estén creados los archivos básicos. Si no sabes que es un manejador de versiones no te preocupes por eso ahora.

Menu izquierdaUna vez abierto el proyecto encontrarás tres secciones de XCode, la izquierda tiene varios íconos arriba y cada uno te permite varias cosas, no te preocupes si todavía no conoces algunos términos, si quieres adelantarte puedes darle una googleada a lo que no te sea familliar:

  • Explorar los archivos del proyecto
  • Ver la jerarquía de tus clases
  • Buscar texto en el proyecto
  • Ver errores
  • Ver las pruebas
  • Ver operación del debug
  • Ver los Breakpoints.
  • Ver los logs del proyecto.

Menu centralEn el centro está la identificación del proyecto y la configuración en general aquí seleccionaremos cosas que serán importantes cuando estemos integrando código de terceros y configurando una cuenta que nos permita publicar la aplicación en el App Store.

Menu derechaEl menu de la derecha vamos a usarlo mucho hoy, es donde verás todas las propiedades de lo que estés editando en ese momento y desde donde vamos a extraer los elementos que necesitaremos para crear nuestra aplicación, lo veremos con más detalle luego.

AHORA SI COMENCEMOS A EDITAR LA APLICACIÓN

Ve al menú de la izquierda y selecciona el archivo llamado Main.StoryBoard, este archivo nos va a permitir crear una aplicación desde la interfaz gráfica. Lo que voy a explicar a continuación puedes verlo en la imagen animada siguiente, da click sobre la imagen para que la veas en toda su resolución.

Story board size classes

Al seleccionar el Story Board el menu del centro cambia y te muestra un gran cuadro blanco, y a la izquierda el View Controller Scene, puedes desplegarlo y ver los elementos que tiene.  Por ahora lo cerraremos dando click sobre el botón inferior. Luego seleccionaremos el cuadro grande del centro, al hacerlo sus bordes se vuelven azules. Vamos al ícono en forma de hoja del menu de la derecha y quitamos la selección sobre Use Size Classes, porque nuestra App será solo para iPhone. Nos pregunta de qué tipo la queremos, dejamos iPhone seleccionado y las deshabilitamos. Verás que el cuadro se ha vuelto un rectángulo, en la proporción típica de un iPhone.

Story board elementsEn la parte inferior derecha vas a ver una cantidad de elementos que puedes usar, dales una mirada. Por el momento quiero que veas que existen: Label, button, Image View, y Views. Puedes buscarlos digitando sus nombres.  El cuadro blanco que tienes en el centro es una vista, podemos agregar nuevas vistas desde este mismo menú, hay diferentes tipos de ellas, la más simple que es igual a la que tenemos en el centro es una View Controller. Puedes ver que la View Controller está en amarillo mientras los otros elementos son grises, todos los elementos en amarillo son digámoslo así padres, y puedes arrastrarlos al Story board de forma independiente, los elementos en gris son hijos y solo puedes ponerlos dentro de un elemento en amarillo.

Vamos a cambiarle la apariencia a nuestra vista, lo que voy a describir está en la imagen animada siguiente. Da click sobre la vista y asegúrate que esté a la derecha el ícono que parece un escudo (realmente es un slider, pero digámosle escudo) selecciona el Background y cámbialo a un color que te guste, explora la opción other para personalizarlo como quieras. Busca en la lista inferior una Image View y posiciónala donde quieras, haz lo mismo con tres Buttons y ubícalos según tu deseo.

Story board add elements

Embed in Nav ControllerVamos a introducir un elemento de navegación, esto nos permitirá que XCode cree el código para pasar de una vista a otra por nosotros. El elemento de navegación que usaremos se llama un Navigation Controller. Para introducirlo iremos al Menú Editor -> Embed in -> Navigation Controller. Verás que tu Story Board ha cambiado y ahora aparece un Navigation Controller justo antes de la vista donde tienes el Image View y los Buttons. También verás que le ha aparecido una franja gris a tu vista, allí puedes ponerle un nombre, si tu imagen ha quedado bajo la franja gris muévela hacia abajo.

Agreguemos ahora tres view Controllers nuevas, busca el elemento en el menu derecho y arrástralo tres veces a una zona libre. Toma cada vista y cámbiale el fondo a un color diferente.

Story board add view controllers

Vamos a darle a cada botón el nombre y el color de una vista, porque cada uno va permitirnos navegar a una nueva vista.

Story board change buttons

Para conectar el botón con la vista que abrirá lo seleccionamos con el mouse, luego presionando la tecla ctrl vemos que sale una línea azul, alargamos la línea hasta que toque la vista del color que queremos y esta se ponga con un sombreado azul, soltamos el mouse y nos ofrece varias formas de presentarla, seleccionamos el modo Push.  Vemos que aparece una línea que une las dos vistas con un símbolo raro en la mitad, ese símbolo significa que la presentación es Push, o sea que reemplaza la vista anterior. Hacer igual para los otros dos botones, cada uno con su vista.

Story-board-link-views

VEAMOS EL RESULTADO

select run deviceUna vez hecho con las tres vistas ahora sí, ¡A correr!, es decir que vamos a ver en el simulador como se ejecuta todo. En la parte superior izquierda vemos un ícono como Play, y otro como Stop, junto a ese un ícono que tiene el nombre del proyecto y a la derecha podemos seleccionar el tipo de dispositivo en el cual queremos simular, para este caso hemos escogido iPhone 5s.

Para ver como funciona dale click sobre el ícono de Play y XCode abrirá un emulador según el dispositivo que hayas elegido. En este punto te pido algo de paciencia, es relativamente común que la primera vez que presiones Play el emulador corra pero no veas allí tu proyecto, dale unos 30 segundos, si no arranca dale Stop y lánzalo de nuevo con Play, la segunda suele ser la vencida.

running

Podrás ver los botones y al darle click a cada uno irá a la siguiente vista y habilitará la opción de Back para regresar a la anterior. Parece simple ¿Verdad? pero has creado la navegación necesaria para hacer una especie de multimedia.

Ahora vamos con las imágenes, como los dispositivos pueden ser de distinto tamaño el código se encarga de adaptarlos siempre y cuando al agregarlos sigamos los requisitos necesarios, así toda imagen precargada debería existir tres veces como imagen.png, imagen@2x.png e imagen@3x.png esto significa la imagen, su doble y su triple.

Para agregarlas selecciona en el menú izquierda Assets.xassets, da click derecho sobre el área blanca que se abre el el centro y selecciona Import. En el cuadro de diálogo que se abre selecciona las tres imágenes y quedarán importadas.  Esto de los tres tamaños es muy importante para los íconos e imágenes de botones

import images

icons 3 sizes

Puedes importar imágenes de paisajes y cosas así sin los tres tamaños y con la resolución apropiada la image view se encargará de ella, Vuelve a la image View, fíjate que esté seleccionado en el menú de la derecha el iconito del escudo y selecciona allí una imagen, haz se configure como Aspec Fit, para que no se arruine su relación de aspecto.

Image View

Bueno, nuestra app no se ve muy bonita que digamos, pero ahora es tiempo de que tu juegues y con estos sencillos elementos crees una aplicación que te muestre por ejemplo categorías de productos en una tienda y las imágenes de cada uno, puedes agregar cuantas Image View quieras en una vista. Ensaya con los labels y pon texto descriptivo junto a las imágenes.

Es sencillo, explora y conoce a la herramienta.