Primeros Pasos con Swift – 6

Como-implementar-un-UIWebView-con-Swift

Curso Primeros Pasos con Swift – Clase 6/6

Mini curso Primeros Pasos con Swift - Clase 6/6

Implementando una Web en nuestra App

Vamos a ver cómo podemos implementar un UIWebView con Swift.

Crear un nuevo proyecto

Cómo siempre vamos a abrir xCode y vamos a crear un nuevo proyecto.

Crear tu primera App con Swift-1

Y vamos a seleccionar la plantilla «Single View Application».

Crear tu primera App con Swift-2

En esta pantalla podemos configurar algunos ajustes de nuestro proyecto, algunos son muy importantes como el «Bundle Identifier» pero no vamos a ver esto en esta entrada.

Pon un nombre a tu proyecto, elige Swift como lenguaje de programación, y haz clic sobre el botón «Next» .

UIwebView-Swift1

Después selecciona el lugar dentro de tu Mac dónde quieres guardar tu proyecto.

Crear la Interfaz de nuestro UIWebView

Hacemos click sobre el icono del Storyboard dentro de nuestro grupo de carpetas y archivos.

Como-implementar-un-UIWebView-con-Swift-2

Para crear la interfaz vamos a hacer algo muy sencillo, pero primero vamos a adaptar nuestra pantalla a la vista de un iPhone.

Como sabéis desde la llegada de xCode 6 podemos adaptar la vista o vistas dependiendo del dispositivo al que va destinado, además de auto ajustar su tamaño. Hacemos clic sobre «wAny hAny» justo debajo de nuestro ViewController, y seleccionamos el tamaño de pantalla adecuado, en este caso iPhone.

Como-implementar-un-UIWebView-con-Swift-3

A continuación vamos a seleccionar el objeto que va a ser el contender de nuestro contenido Web, hacemos clic en el buscador de la parte inferior, y seleccionamos el objeto UIWebView.

Como-implementar-un-UIWebView-con-Swift-4

Debemos centrar el objeto en nuestra vista, fijaos como cuándo movemos el objeto por nuestro vista en el Storyboard, aparecen unas lineas azules indicándonos la posición del UIWebView respecto a nuestra vista.

Como-implementar-un-UIWebView-con-Swift-5

Conectar los puntos 😉

Continuando con la misma metodología de tutoriales anteriores, vamos a conectar los puntos, esto es conectar los objetos que hemos puesto en nuestro Storyboard con el código que va a dar a nuestra aplicación cierta lógica.

Primero vamos a conectar el objeto con el delegado, esto debe hacerse para poder usar algunos métodos dentro de nuestro proyecto, es un poco más complejo de explicar, pero entraría en patrones de diseño, y no es el objetivo de esta entrada, así pues confiar en mi 😉

Hacer clic sobre el objeto UIWebView y pulsa la tecla «ctrl» volved a hacer clic sobre el objeto y no soltéis ese clic, entonces arrastrar la flecha azul hacía el botoncito circular amarillo en la parte superior de nuestra vista, os aparecerá una ventana dónde debéis hacer clic sobre «delegate», y ya está.

Como-implementar-un-UIWebView-con-Swift-9

Para conectar los puntos y crear las siguiente conexión, vamos a dividir la pantalla de trabajo en dos, en la esquina superior derecha tenéis un botón que va a hacer precisamente esto, es el botón que parece un hombre con traje y pajarita.

Crear tu primera App con Swift-17

Ahora hacemos click sobre el objeto UIWebView y después pulsamos la tecla «ctrl», volvemos a hacer clic ¡¡y no soltamos el clic!! entonces aparecerá una linea de color azul, la arrastramos hacía la clase de código que está en la parte derecha de nuestra vista, y ahora sí, soltamos el clic.

Como-implementar-un-UIWebView-con-Swift-8

Al crear la conexión nos aparecerá una ventana modal. Aquí sólo tenemos que poner nombre a nuestro objeto UIWebView en el apartado Name, y hacer clic en «Connect»

Como-implementar-un-UIWebView-con-Swift-7

Lo que acabamos de hacer es declarar una variable de instancia a la clase UIWebView, es decir, hemos puesto nombre al objeto de la clase UIWebView.

Al crear la conexión, en nuestro archivo controlador de vista ViewController.swift, se ha creado una linea de código, es la mencionada declaración de la variable de instancia.

Se crea una variable Optional, pero permitirme que no entre en esta entrada a explicar esto.

Para trabajar de una forma más cómoda, vuelve a poner la vista de xCode a su modo por defecto, para ello pulsa en el botón de la esquina superior derecha, el que tiene tres lineas horizontales.

Crear tu primera App con Swift-17

Implementar la lógica

Una vez hemos creado nuestra interfaz, y hemos conectado a nuestro archivo controlador de vista ViewController.swift, es hora de implementar la lógica de nuestra App.

El objeto de la clase UIWebView, no hace nada de momento, si compiláramos la aplicación en este momento, no haría absolutamente nada, por eso debemos escribir algunas lineas de código para que nuestro objeto muestre algo.

Como en esta aplicación vamos a usar el patrón del delegado, tenemos que ajustar nuestra Clase ViewController.swift al protocolo UIWebViewDelegate, para ello dentro del archivo ViewController.swift, nos situamos en la linea de código:

class ViewController: UIViewController

Y añadimos lo siguiente:

class ViewController: UIViewController, UIWebViewDelegate {

La función viewDidLoad()

Para implementar la lógica en nuestras aplicaciones, esto es, dar instrucciones a cada uno de nuestros objetos para que hagan algo, escribimos secuencias de código dentro de funciones.

Nosotros podemos crear nuestras propias funciones, pero también podemos usar las que ya existen.

La clase ViewController, es decir, los controladores de vista, incorporan una función que es la función viewDidLoad().

Es una función muy útil, pues todo el código que implementemos dentro de esta función, se va a ejecutar una vez ha terminado de cargarse la vista.

Es decir, la App carga la vista, y ViewController ejecuta todo lo que contenga la función  viewDidLoad() ¡Genial! ¿No?

Es en este método dónde vamos a programar el algoritmo que hará que en nuestro objeto de vista Web, se muestre una Web.

Vamos a seleccionar el archivo ViewController.swift y vamos a comenzar a sobreescribir la función viewDidLoad() con lo siguiente:

override func viewDidLoad() {
        super.viewDidLoad()

//Crear una constante que almacenará la URL

let url = «la URL que quieras poner»

//Crear una constante llamada urlRequest

let urlRequest = NSURL (string: url)

//Crear una constante llamada request

let request = NSURLRequest(URL: urlRequest!)

//Cargamos la web en nuestro objeto de la clase UIWebView

miWeb.loadRequest(request)

    }

Vuestro archivo ViewController.swift debería quedar como este:

Como-implementar-un-UIWebView-con-Swift-10

Compilar el proyecto

Pues esto es todo, si compiláis el proyecto en vuestro simulador se debe haber cargado la Web que hayáis puesto en la constante url.

Hagamos un repaso:

  1. Crear la vista en el Storyboard
  2. Conectar el objeto UIWebView como delegado del ViewController, y después conectar el objeto con el código, declarando una variable
  3. Añadir el procotolo UIWebViewDelegate a nuestra clase ViewController.swift
  4. Sobreescribir la función viewDidLoad() añadiendo la lógica de nuestra App
  5. Compilar 😉

VIDEO-TUTORIAL

Bueno, después de la teoría, vamos a ver un videotutorial, dónde os explico más cosas sobre xCode.

¿Estás preparado? ¡Pues vamos allá!