IOS con Swift: Aplicación básica y despliegue de hora

A continuación se mostrará un ejemplo básico de una aplicación funcional en iPhone con código nativo que despliega la hora. Si bien, la app es inútil (nadie descargará una app que solo muestra la hora), este post tiene objetivos muy básicos:

⁃ Crear y configurar la interfaz visual de la aplicación desde cero
⁃ Vincular elementos de la interfaz con el backend
⁃ Con lenguaje de programación nativo, programar el despliegue de la hora
⁃ Actualizar automáticamente cada segundo el despliegue de la hora

Como es costumbre, el contexto del desarrollo y ejemplo es:

Sistema Operativo: macOS High Sierra
Xcode 10.1
Swift 4.2

Además, el proyecto completo se encuentra para descarga libre en GitHub en este enlace.

Comenzando con el desarrollo, abriremos Xcode y configuraremos un nuevo proyecto

Luego, se tiene la estructura del proyecto en Xcode:

Crear y configurar la interfaz visual de la aplicación

Para comenzar configuraremos el LaunchScreen, pantalla que se despliega por defecto al iniciar cualquier aplicación. Para este caso, solo se agregará un Label y un ImageView.

Label: En el costado derecho, menú de Atributos, se configura el texto y tamaño de letra
ImageView: En el costado izquierdo se crea un nuevo grupo (o carpeta) con el nombre de “Imágenes”. Manualmente muevo una imagen descargada desde internet y la agrego a esa carpeta; automáticamente se añade al proyecto y queda accesible. Finalmente en el costado derecho, menú Atributos, se vincula la imagen llamada “clock.png”

Finalmente, el LaunchScreen queda así

Luego, es turno de configurar el MainStory. Para este caso será solo una pantalla, por lo que se trabajará con la que ya muestra el Xcode.

Se añade un ImageView configurado como el del LaunchScreen, un Label que muestra un texto informativo y otro Label que desplegará la hora. El resultado es el siguiente:

Con esto, visualmente ya tenemos los elementos que necesitamos. Ahora a enlazar los elementos visuales con el código.

Vincular elementos de la interfaz con el backend

Este paso en importante, puesto que internamente necesitamos mostrar lo programado en la vista de la app. Para este caso enlazaremos el Label que muestra la hora y lo configuraremos en una variable.

Para esto:

1- Mostramos el editor y vista en la misma pantalla haciendo click como en la imagen.

2- Teniendo el código del ViewController.swift y la vista, con los 2 dedos sobre el touchpad (equivalente de botón derecho en macbook), se arrastra el Label hacia el código, justo bajo la declaración de la clase, y aparecerá una pantalla donde se configura la nueva variable. Finalmente click en connect.

El código queda de la siguiente forma:

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var lblHora: UILabel!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }
}

Con lenguaje de programación nativo, programar el despliegue de la hora Ahora bien, corresponde desplegar la hora. Para esto solo con Calendar podemos obtener una serie de atributos, los cuales se encuentran en la documentación oficial de Developer Apple.

func mostrarHora() {
// here is the label to refresh
let date = Date()
let calendar = Calendar.current
let year = calendar.component(.year, from: date)
let month = calendar.component(.month, from: date)
let day = calendar.component(.day, from: date)

let hour = calendar.component(.hour, from: date)
let minute = calendar.component(.minute, from: date)
let second = calendar.component(.second, from: date)

var strDay:String = ""
var strMonth:String = ""
let strYear:String = String(year)
var strHour:String = ""
var strMinute:String = ""
var strSecond:String = ""

//Forma 1 de anteponer un cero
if day < 10{
strDay = "0" + String(day)
}else{
strDay = String(day)
}

//Forma 2 de anteponer un cero
strMonth = String(format: "%02d", month)
strHour = String(format: "%02d", hour)
strMinute = String(format: "%02d", minute)
strSecond = String(format: "%02d", second)

self.lblHora.text = strDay + "-" + strMonth + "-" + strYear + " " + strHour + ":" + strMinute+":"+strSecond;
}

Actualizar automáticamente cada segundo el despliegue de la hora

Esta función será llamada desde viewDidLoad(), pero funcionará al iniciar la aplicación ¿y cada segundo que pase?. Para esto se debe agregar una línea para llamar esta misma función cada segundo:

   let contentTimer = Timer.scheduledTimer(timeInterval: 1, target: self, selector: #selector(update), userInfo: nil, repeats: true)

Llamaremos a una función llamada update que llamará a nuestra inicial muestraHora(). Nótese el prefijo de @objc, puesto originalmente es un mecanismo de ObjectC (unamos Timer), pero con Swift la podemos usar.

Para Finalizar

Este ejemplo busca servir de ejemplo como inicio de programación con Xcode y Swift. El proceso de aprendizaje en Xcode, creo, es rápido. Es intuitivo y hasta entretenido crear las interfaces, y luego vincularlas con el código fuente. La programación en Swift es historia de cada lenguaje de programación, por lo que solo se debe estudiar. Documentación, video tutoriales, foros, etc, hay hartos, es cosa de investigación.

Recordar que el proyecto se encuentra en GitHub y se pude encontrar acá.