Tutorial Swift – Carga de repos desde GitHub con SwiftyJSON y con Alamofire

Últimamente en ratos libres estoy “jugando” con el desarrollo de apps para iOS con Swift y en esta ocasión me he animado a hacer un post con alguno de los temas que he estado viendo por si a alguien le puede interesar. Los temas que me gustaría tratar son:

Para tratar de explicarme voy a crear una aplicación muy sencilla que cargue en un TableView un listado con los repositorios desde mi cuenta en GitHub.

La app tiene un aspecto como el siguiente:

Swift

Hecha la introducción…vamos a empezar con el trabajo!

Creación del proyecto

Empezamos obviamente creando un nuevo proyecto con la plantilla “Single View Application” en Xcode seleccionando el lenguaje Swift.

Swift Swift

Sobre la vista, en nuestro StoryBoard añadimos un componente TableView y linkamos sus propiedades dataSource delegate sobre el ViewController asociado.

Swift06

Para poder manejar el TableView desde nuestro controller, tenemos que realizar las siguientes modificaciones en el ViewController:

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

Donde basicamente añadimos las clases UITableViewDataSource y UITableViewDelegate. Observaréis que enseguida nos sale un error de compilación. Es normal, dado que tenemos que implementar dos métodos obligatorios en la clase UITableViewDataSource (podéis comprobarlo yendo a su definición haciendo Comando + Clic sobre su nombre en Xcode). Las lineas añadir son:

func tableView(tableView: UITableView, numberOfRowsInSection section:    Int) ->; Int {
   return 0
}

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell: UITableViewCell = UITableViewCell(style: UITableViewCellStyle.Subtitle, reuseIdentifier: "IdCelda")
        return cell
    }

Por último, añadiremos un Outlet en el ViewController para tener acceso al TableView. Para ello cambiamos a la vista Assistant Editor y añadiremos la referencia.

Swift

Si tienes dudas sobre cómo hacer todo esto, en este post, lo explican de forma muy detallada.

Añadir SwiftyJSON mediante Carthage

El siguiente punto será añadir la dependencia al paquete SwiftyJSON a través del gestor de dependencias Carthage. Para instalar Carthage lo más sencillo es bajarnos su instalador desde GitHub dado que publican ahí sus releases. Una vez instalado, en nuestro proyecto creamos un fichero con el nombre Cartfile con la siguiente línea:

github "SwiftyJSON/SwiftyJSON" >= 2.1.2

Swift

En este fichero Cartfile es donde definimos los paquetes que se debe bajar dado que son dependencias de nuestro proyecto.

A continuación desde el terminal nos situamos en el directorio de nuestro proyecto y ejecutamos:

carthage update

La salida del comando debería ser algo parecido a esto:

Swift

A continuación en Xcode debemos realizar las siguientes modificaciones:

  1. En la pestaña General y sobre la sección Linked Frameworks and Libraries añadiremos la referencia a la compilación de SwiftyJSON generada por Carthage en el directorio ($SRCROOT)/Carthage/Build/iOS. El fichero a añadir es obviamente SwiftyJSON.framework.
  2. SwiftEn la pestaña Build Phases añadiremos una sección Run script si no existe con lo siguiente:

Swift12

Añadir dependencia Alamofire

Dado que en este caso (y a día de hoy) no podemos añadir Alamofire a través de Carthage vamos a hacerlo manualmente. En primer lugar nos descargamos el repositorio desde GitHub. A continuación desde Xcode añadimos el fichero Alamofire.xcodeproj en nuestro proyecto a través de Add files to (nombreproyecto).

E igual que antes añadimos este framework en General>Linked Frameworks and Libraries.

Pues ahora ya sí estamos en disposición de empezar a codear🙂

Código de la aplicación

En primer lugar tenemos que importar en nuestro ViewController las librerías que hemos añadido anteriormente. Por tanto en la sección de imports ponemos:

import SwiftyJSON
import Alamofire

En segundo lugar definimos una variable de tipo JSON para almacenar los objetos JSON que leeremos desde GitHub.

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    
    var tableData: JSON = JSON.nullJSON

Ahora ya estamos en disposición de escribir el código definitivo en los métodos de clase UITableViewDataSource. Quedarán de la siguiente forma:

    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        NSLog("Table data count \(tableData.count)")
        return tableData.count
    }
    
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        
        let cell: UITableViewCell = UITableViewCell(style: UITableViewCellStyle.Subtitle, reuseIdentifier: "IdCelda")
        
        cell.textLabel?.text = "# " + self.tableData[indexPath.row]["name"].string!
        cell.detailTextLabel?.text = "URL: "+ self.tableData[indexPath.row]["html_url"].string!
        
        return cell
    }

En el primer caso, estamos indicando el número de elementos que tendrá el TableView (que coincidirá con el número de objetos JSON leídos).

En el segundo caso estamos definiendo el contenido de cada celda del TableView, donde mostraremos el nombre del repositorio y su URL.

Por último, sólo nos faltaría realizar la petición a GitHub para consultar los repos. Esto lo haremos al cargar la vista.

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Do any additional setup after loading the view, typically from a nib.
        var url: String = "https://api.github.com/users/programwar/repos"
        
        Alamofire.request(.GET, url, parameters: nil)
            .responseJSON { (req, res, json, error) in
                if(error != nil) {
                    NSLog("Error: \(error)")
                }
                else {
                    NSLog("Success: \(url)")
                    self.tableData = JSON(json!)
                    self.list.reloadData()
                }
        }
        
    }

En este caso, hacemos la petición con Alamofire, que nos permite crear esta petición con un código muy muy claro. Al método request le decimos que queremos hacer una petición a través del verbo HTTP GET y la ruta. Esto lanza una petición asíncrona que cuando finaliza cargamos la respuesta y repintamos el TableView.

Puedes descargar el proyecto de ejemplo en https://github.com/programwar/iRepoLoader.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s