Ejercicios de arquitecturas iOS

Tenemos la aplicación para consultar el tiempo que ya usamos en el módulo de tecnologías de desarrollo y queremos cambiarla para que en lugar de usar MVC use MVVM.

Importante:

• Abre el .xcworkspace, no el .xcodeproject. Verás dos proyectos, el principal y otro con las dependencias
• Haz un build del proyecto antes de empezar a trabajar con él, para que se compile la librería Bond y las otras dependencias

Carpetas para los fuentes

Lo primero será crear las "carpetas" necesarias para los fuentes (o groups como se llaman en Xcode)

• Crea un group llamado Vista (File > New group...) y mueve a él la clase ViewController, ya que en MVVM el ViewController es parte de la vista.
• Crear otro group llamado ViewModel y en él crear un archivo TiempoViewModel con una clase del mismo nombre vacía por el momento

Ensamblaje de vista, modelo y viewmodel (0,2 puntos)

En la clase de la vista (el ViewController) añadir una propiedad que represente al viewmodel

let viewModel = TiempoViewModel()

En el TiempoViewModel añadir una propiedad que represente al modelo

let modelo = TiempoModelo()

Mostrar la descripción del tiempo (0,5 puntos)

En este apartado conseguiremos que al pulsar en el botón "consultar tiempo" la descripción en modo texto (p.ej. "sol") aparezca en la pantalla del dispositivo.

En el TiempoViewModel

• Añade un import Bond
• Crear un observable de tipo String llamado estado, con valor inicial la cadena vacía (mira la sintaxis en transparencias/apuntes)
• Crea un método consultarTiempo que admita como parámetro un String con el nombre de la localidad a consultar

func consultarTiempo(de localidad : String) {
  //AQUI
  1. LLama a consultarTiempo del modelo. Tiene dos parámetros, la localidad y una clausura con dos parámetros (estado e icono), que se ejecutará como un *callback* cuando el servidor devuelva el estado del tiempo. Puedes ver en el fuente del modelo más detalles.
  2. Dentro de esa clausura actualiza el observable estado con el valor del primer parámetro. Más tarde nos ocuparemos del icono 
}

De nuevo en la vista (ViewController)

• En el método consultarTiempoPulsado, que se llama cuando se pulsa el botón, sustituir la llamada al modelo por una llamada al consultarTiempo que has implementado antes en el viewmodel.

• en el viewDidLoad(), usando la librería Bond vincula la propiedad estado del viewModel al texto de la etiqueta estadoLabel. Mira apuntes/transparencias para sintaxis.

Una vez hayas hecho todo esto, se debería mostrar el estado del tiempo en la pantalla cuando escribas una localidad y pulses el botón.

Mostrar el icono del tiempo (0,75 puntos)

Ahora haz lo mismo pero para el icono del tiempo, tendrás que:

• En el viewmodel crear otro observable de tipo String para la url del icono, inicialmente a "". Puedes llamarlo icono
• En el método consultarTiempo también del viewmodel actualizar este observable, igual que hacías con el estado.
• En el viewDidLoad() vincula la propiedad icono del viewmodel con la imagen estadoImagen. Ten en cuenta que no puedes hacer un bind directo de una cosa con otra, ya que el observable es un texto y el destino del binding es una imagen (un UIImage). Tendrás que hacer un map para transformar uno en otro

self.viewModel.icono
 .filter {
    //Si la URL es "" la ignoramos
    icono in
    return icono != ""
 }
 .map {
    //Transformamos de String -> clase URL -> datos binarios -> UIImage
    icono in
    let datosIcono = try! Data(contentsOf:URL(string:icono)!)
    let imgIcono = UIImage(data: datosIcono)
    return imgIcono!
  } //AQUI FALTA seguir encadenando para hacer el .bind