Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. iOS
Code

iOS Desde Cero Con Swift: Crea Tu Primera Aplicación iOS

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called iOS From Scratch With Swift.
iOS From Scratch With Swift: How to Test an iOS Application on a Device
iOS From Scratch With Swift: Swift in a Nutshell

Spanish (Español) translation by Nadia Castelli (you can also view the original English article)

Aunque ya hemos aprendido un poco de desarrollo iOS en esta serie, estoy seguro que estás ansioso por comenzar a desarrollar aplicaciones iOS que hagan algo atractivo o útil. En este tutorial, tu deseo será cumplido. Usando Xcode, crearás un proyecto iOS desde cero, modificarás su código fuente, y correrás tu aplicación en un emulador o u dispositivo físico.

Introducción a Colorific

Colorific es el nombre de la aplicación que estás a punto de desarrollar. La idea detrás de Colorific es simple, cada vez que el usuario toque la pantalla del dispositivo, el color de la pantalla cambiará. Si bien el concepto es básico, Colorific es perfecta para comenzar a explorar detalles del desarrollo iOS.

1. Crea un Nuevo Proyecto Xcode

Como vimos tiempo atrás en esta serie, cada aplicación iOS es un proyecto Xcode. ¿Qué es un proyecto Xcode? Un proyecto Xcode es un contenedor o repositorio que contiene los archivos, recursos, e información necesarios para desarrollar uno o más productos.

Debes notar que esto no está limitado exclusivamente al código fuente y recursos, como imágenes y otros archivos, de un proyecto. Un proyecto además lleva cuenta de las conexiones entre sus elementos y conoce cómo construir los productos finales a partir de los mismos.

Inicia Xcode y crea un nuevo proyecto Xcode seleccionando New > Project... desde el menú File. Puedes lograr lo mismo con la combinación Shift + Command + N.

Create a New Xcode Project

Si aparece la pantalla de bienvenida de Xcode al correrlo, te sugiero que la cierres para que puedas aprender a crear un nuevo proyecto utilizando el menú de Xcode.

2. Elige una Plantilla de Aplicación

Comenzar una nueva aplicación o proyecto en Xcode es sencillo gracias a las plantillas que ya vienen incluidas. Para la aplicación que vamos a crear, necesitamos la plantilla Single View Application. Siéntete libre de echar un vistazo a las otras plantillas de aplicación, pero asegúrate de elegir Single View Application para Colorific.

Choose an Application Template

3. Configura el Proyecto

Luego de seleccionar la plantilla Single View Application y clickear el botón Next, Xcode presenta una lista de opciones para configurar tu nuevo proyecto. Echemos un vistazo a estas opciones.

Configure the Project
  • Product Name: El nombre del producto será el nombre de tu aplicación. Yo he llamado Colorific a mi aplicación, pero siéntete libre de nombrar la tuya como prefieras.
  • Organization Name: El nombre de la organización puede ser tu propio nombre o el de tu compañía. Xcode utiliza el nombre de la organización con varios propósitos, como agregar una nota de copyright a cada archivo.
  • Organization Identifier: El identificador de organización es una cadena de caracteres única que usa Xcode (junto con el nombre de producto) para crear el identificador del paquete de la aplicación. Apple recomienda adoptar la notación de nombre de dominio inverso para evitar colisiones de nombre. Ten cuidado que el dominio que utilices no esté vinculado a un DNS (Sistema de Nombres de Dominio). Por ejemplo, mi compañía se llama Code Foundry BVBA y está localizada en Bélgica, lo que significa que su identificador es be.codefoundry. Sin embargo, yo podría utilizar be.code-foundry o com-codefoundry. Para el propósito de este tutorial, he declarado el identificador de la compañía como com.tutsplus.
  • Bundle Identifier: Aunque no puedes especificar el identificador de paquete al crear un nuevo proyecto Xcode, puedes modificarlo una vez que lo has creado. Por defecto, el identificador de paquete es la combinación del identificador de la organización y el nombre de producto. Ten en mente que los espacios en el nombre de producto son reemplazados por guiones en el identificador de paquete, porque este no puede contener espacios en blanco.
  • Language: La versión más reciente de Xcode soporta tanto Objective-C como Swift. Esta serie está enfocada en el desarrollo iOS usando Swift 2.1, por ende esa es la opción que he seleccionado para este proyecto.
  • Devices: En la versión actual de Xcode (7 al momento de escrito esto), el menú de dispositivos contiene tres opciones, Universal, iPhone, e iPad. Esa configuración le informa a Xcode a qué dispositivos apunta tu proyecto. Seleccionando la primera opción, Universal, tu proyecto apunta tanto a la familia de dispositivos iPad e iPhone. El iPod Touch es un miembro de la familia de dispositivos de iPhone, como debes haber adivinado.
  • Use Core Data: Si tildas esta celda, Xcode creará unos pocos archivos adicionales y agregará código plantilla para ayudarte a comenzar con Core Data, el framework de persistencia de Apple para OS X e iOS. Como Core Data no es un tema para principiantes, dejaremos esta celda sin tildar.
  • Include Unit Tests: El testing es un aspecto importante del desarrollo de software. Xcode tiene soporte para testing unitario incluido. Para mantener las cosas simples, sin embargo, vamos a ignorar esta opción por el momento.
  • Include UI Tests: Xcode 7 es la primera versión del IDE de Apple que trae incluido soporte para testing de interfaz de usuario. Esto es muy importante para los desarrolladores OS X e iOS. Sin embargo, el testing de interfaz de usuario está más allá del alcance de esta serie.

Ahora deberías tener una buena aproximación a las diferentes opciones de configuración cuando creas un nuevo proyecto Xcode. Para este proyecto, recomiendo que utilices las opciones como se muestran en la captura anterior. Debes notar que la mayoría de las opciones pueden ser fácilmente modificadas una vez creado el proyecto. Clickea Next cuando hayas terminado de configurar tu proyecto.

4. Guarda el Proyecto

En el próximo paso, Xcode te preguntará dónde deseas guardar tu nuevo proyecto. Habrás notado la pequeña celda al pie de la ventana nombrada Create Git repository on My Mac. El texto gris debajo de la celda dice Xcode will place your project under version control.

Save the Project

Como mencioné anteriormente en esta serie, el control del código es indispensable en el desarrollo de software. Esta serie no cubrirá este tema en detalle, pero si te tomas el desarrollo de software en serio, entonces te recomiendo fuertemente que leas al respecto.

Git es el SCM (Source Code Management o Administración del Código Fuente) más popular en la comunidad Cocoa. Sin embargo, se puede usar perfectamente un sistema SCM diferente, como por ejemplo SVN o Mercurial.

Dile a Xcode dónde deseas guardar tu proyecto, tilda la celda para autorizar a Xcode a crear un repositorio Git para el proyecto, y clickea Create al pie del cuadro de diálogo.

5. Explora la Interfaz de Usuario de Xcode

Antes de continuar, quiero dedicar unos minutos a explorar la interfaz de usuario de Xcode. Posee cuatro áreas diferenciadas:

  • una barra de herramientas arriba
  • una barra lateral a la izquierda
  • una vista principal al centro
  • una barra lateral a la derecha
Exploring the Xcode User Interface

Barra de Herramientas

La barra de herramientas ubicada arriba de todo contiene los botones y menúes de uso más frecuente. Como vimos antes en esta serie, los botones para correr y detener una aplicación también están en la barra de herramientas.

Exploring the Xcode User Interface Toolbar

El recuadro ubicado en el centro de la barra de herramientas es similar al que puedes hallar en iTunes. Muestra información acerca del estado de tu proyecto o lo que Xcode está realizando en segundo plano. Te mostrará, por ejemplo, si una compilación es exitosa o fallida.

Los dos controles segmentados a la derecha de la barra pueden utilizarse para personalizar la interfaz de usuario de Xcode. Prueba jugando con los diferentes controles para descubrir cómo modifican la interfaz de Xcode.

Navegador

El propósito principal de la barra lateral izquierda es para la navegación, y es frecuentemente referida como el navegador de Xcode.

Exploring the Xcode User Interface Navigator

El navegador posee diferentes pestañas, con el Project Navigator ubicado en el extremo izquierdo. La selección en la barra lateral izquierda determina qué se muestra en la vista principal de Xcode, el workspace.

Vista Principal o Workspace

La vista principal o workspace es el área donde pasarás la mayor parte de tu tiempo. Es el caballo de tiro de Xcode y muestra lo que se seleccione en el navegador.

Exploring the Xcode User Interface Main View or Workspace

Inspector

Mientras que la barra lateral izquierda controla lo que se muestra en la vista principal de Xcode, el contenido de la barra lateral derecha refleja lo que se muestra o selecciona en la vista principal.

Exploring the Xcode User Interface Inspector

La barra lateral derecha, también conocida como el inspector, se adapta a lo que el usuario seleccione en la vista principal.

6. Explora el Proyecto

Es momento de echar un vistazo al proyecto en sí. El contenido del mismo se muestra en el Project Navigator, la primera pestaña de la barra lateral izquierda. Selecciona el primer ítem en el Project Navigator para ver los detalles del proyecto en la vista principal.

Exploring the Project

La vista principal está compuesta por dos secciones, una barra lateral a la izquierda, y una vista en detalle a la derecha. En la barra lateral, puedes ver dos ítems, tu proyecto con un ítem, y tus productos (targets) con otro ítem.

Es bueno saber desde ya cuál es la diferencia entre un proyecto y un producto. Recuerda que un proyecto es un repositorio para los archivos, recursos, y datos requeridos para construir uno o más productos. Un target se refiere a uno de esos productos. Un target contiene las instrucciones necesarias para armar un producto con los recursos del proyecto. Esto significa que un proyecto puede contener múltiples targets para construir múltiples productos. Como puedes ver, un proyecto Xcode es más que solamente una carpeta que contiene un manojo de archivos.

7. Compila y Corre: Toma 1

Antes de empezar a modificar el código fuente del proyecto, podría ser interesante compilar y correr tu nuevo proyecto para ver qué nos ha dado por defecto la plantilla de aplicación. Clickea el botón Run en la esquina superior izquierda y asegúrate de que el esquema activo está configurado para correr la aplicación en el simulador, seleccionando iPhone 6 u otro simulador de iPhone.

Selecting the Scheme and Simulator

Si todo marcha bien, el simulador debería correr tu aplicación y mostrar una vista blanca vacía con la familiar barra de estado en la parte superior.

8. Modifica la Interfaz de Usuario

Ensuciemos nuestras manos y modifiquemos la interfaz de la aplicación. Abre el Project Navigator y selecciona el archivo llamado Main.storyboard. Un archivo con extensión .storyboard es un archivo de interfaz de usuario. En este archivo, creamos la interfaz de usuario de la aplicación.

Exploring the Main Storyboard of the Project

El storyboard contiene un ítem, un controlador de vista con la vista en blanco que has observado en el simulador hace un instante. El workspace se compone de una barra lateral que muestra la representación de la escenas del storyboard. La parte más grande del workspace contiene las escenas o la interfaz de usuario de la aplicación.

Selecciona el objeto llamado View en la View Controller Scene ubicada en la barra lateral izquierda y observa cómo el workspace y la barra lateral derecha actualizan su contenido. En la parte superior de la barra lateral derecha aparecen un puñado de pestañas. Cada una de ellas contiene una colección de atributos relacionados con el objeto llamado View.

Exploring the View of the View Controller

La mitad inferior de la barra lateral derecha contiene una sección con cuatro pestañas. La tercera está representada por una imagen de una caja tridimensional. Esta caja es cómo se muestran por lo general los objetos en Xcode.

Exploring the Object Library

Selecciona la pestaña con el ícono de la caja y ve al fondo de la lista que aparece. Esta lista es la Object Library y contiene varios elementos de interfaz de usuario, como botones, barras de desplazamiento, e interruptores.

Al comienzo de este tutorial, dije que ibas a crear una aplicación funcional. El usuario debería ser capaz de tocar la pantalla para cambiar su color.

Existen múltiples maneras de detectar toques en una aplicación iOS. Una solución es emplear un botón. En la Object Library, encuentra el ítem llamado Button y arrástralo desde la Object Library a la vista en blanco en el workspace de Xcode.

Adding a Button

El usuario debería ser capaz de tocar cualquier parte de la pantalla, lo que significa que el botón debería cubrir la totalidad de la pantalla. ¿Has notado los seis cuadraditos en los extremos del botón? Moviéndolos puedes modificar las dimensiones del botón. Ajusta el tamaño del botón de modo que cubra toda la pantalla. No te preocupes por la barra de estado en la parte superior de la pantalla.

Resizing the Button

La vista detrás del botón es la vista que cambiará de color cuando el usuario toque la pantalla. Por el momento, el botón está bloqueando la visualización de la vista por parte del usuario, así que necesitamos modificar los atributos del botón.

Habrás notado que el botón se agregó a la lista de objetos en la barra lateral izquierda, debajo del objeto llamado View. Selecciona el botón en la lista de objetos y selecciona el Attributes Inspector en la barra lateral derecha—la cuarta pestaña contando desde la izquierda. Sólo necesitamos hacer dos ajustes.

Comienza cambiando el tipo del botón de System a Custom. Esto hará que el botón sea transparente.

Change the Type of the Button

El segundo cambio que necesitamos realizar es instruir al usuario mediante el cambio del título del botón. El campo de texto junto a la etiqueta Title ahora dice Button. Reemplázalo por Toca para cambiar el color y configura el Text Color a negro para hacerlo más legible.

Change the Title and Text Color of the Button

9. Agrega una Acción al Controlador de Vista

Si estás familiarizado con el patrón MVC (Modelo-Vista-Controlador), entonces ya tienes ventaja en el aprendizaje de desarrollo iOS. El patrón MVC puede hallarse en varios lenguajes y frameworks, como por ejemplo Laravel y Ruby on Rails.

La vista en nuestra interfaz de usuario cae en la categoría V del patrón MVC. Una vista es controlada por un controlador. Echa un vistazo a los nombres de archivo que contiene el Project Navigator a la izquierda. ViewController.swift representa un controlador de vista que controla la vista en nuestra interfaz de usuario.

¿Qué hace un controlador de vista? Un controlador de vista puede hacer lo que tú quieras, pero en primer lugar es el responsable de manejar todo lo que sucede en la vista a que responde. Esto incluye, por ejemplo, toques del usuario. Si el usuario toca el botón de la vista, la responsabilidad del controlador de la vista es manejar el evento de toque.

¿Cómo manejamos un evento de toque? En el caso de nuestro botón, agregamos una acción al controlador de vista. Una acción es un nombre bonito para un método. ¿Qué es un método? Un método es una función en Swift. Espera. ¿Qué? No te preocupes mucho por la terminología ahora. Los próximos dos posts cubrirán el lenguaje de programación Swift con más detalle. Lo que necesitas recordar es que un método es como un método en Ruby y PHP, o una función en JavaScript.

Si invocas un método de un controlador de vista, efectúa alguna operación como respuesta. En otras palabras, si un usuario toca el botón y conectamos un método a ese evento de toque, el controlador de vista hará algo en respuesta al evento de toque.

Para agregar al controlador de vista una acción que maneje la vista en la interfaz de usuario de la aplicación, necesitamos hacer cambios en el archivo llamado ViewController.swift. Sólo necesitamos agregar unas pocas líneas de código al ViewController.swift. Mira cómo he modificado el contenido del archivo.

Aunque es este tutorial no haremos foco en la sintaxis, es bastante sencillo comprender qué está pasando. El nombre de la acción o método es changeColor(_:) y tiene un parámetro, sender. El tipo del parámetro es UIButton. ¿Qué es UIButton?  Paciencia, pequeño saltamontes.

10. Implementa la Acción

Hemos agregado una acción al controlador de vista, pero por sí misma no hace demasiado. La acción aún no tiene un cuerpo o implementación. Para implementar la acción changeColor(_:), necesitamos agregar una o más sentencias entre las llaves, como se muestra en el siguiente código. No voy a explicar cada línea de código en detalle, pero te daré la idea de lo que está sucediendo.

Como debes saber, es posible descomponer un color en tres colores primarios, rojo, verde, y azul. En nuestra acción, generamos tres números aleatorios entre 0 y 255, y los utilizamos para crear un color aleatorio.

El método que utilizamos para crear el color es muy descriptivo, init(red:green:blue:alpha):. Con la última línea de nuestra acción, establecemos el color de fondo de la vista en nuestra interfaz de usuario a este color nuevo, generado aleatoriamente.

Los comentarios son importantes al escribir código. ¿Te has fijado en los comentarios que añadí a la implementación de changeColor(_:)? Los comentarios de una sola línea comienzan con dos barras, //, mientras que los comentarios multilínea comienzan con /* y terminan con */.

11. Conecta la Acción

El método está implementado, pero no pasará nada espectacular si compilamos y corremos la aplicación. Pruébalo si no me crees.

Lo que falta es una conexión entre el botón y la acción en el controlador de la vista. ¿Cómo podría saber el controlador que la acción changeColor(_:) debe ser disparada al tocar el botón?

Hacer esta conexión es muy sencillo. Abre el storyboard seleccionando Main.storyboard y selecciona el objeto View Controller en la View Controller Scene.

Con el objeto View Controller seleccionado, abre el Connections Inspector ubicado en la barra lateral derecha—la primera pestaña contando desde la derecha. Si has seguido los pasos correctamente, deberías ver la acción que creamos en la sección Received Actions.

Connect the Action

Deberías ver un círculo vacío a la derecha de la acción changeColor(_:). Clickea y arrastra desde el círculo al botón en la vista del controlador de vista.

Connect the Action

Cuando sueltas el mouse, aparece un menú. El menú contiene una lista de tipos de evento de toque. El evento de toque que nos interesa se llama Touch Up Inside. Este evento es disparado cuando un usuario toca el botón y levanta el dedo. Es el comportamiento más común para los botones.

Choose the Touch Event Type

Una vez conectados el botón y la acción, deberías ver que la barra lateral derecha refleja la conexión que acabas de hacer. Genial. Has completado exitosamente tu primera aplicación real.

Connections Inspector Reflects the Connection

12. Compila y Corre: Toma 2

Compila y corre tu aplicación en el simulador y comienza a tocar la pantalla del mismo. Cada vez que tocas la pantalla, su color debería cambiar a un nuevo color aleatorio. ¿No es genial?

Conclusión

Hemos abarcado mucho en este tutorial. Si bien este post fue bastante extenso, en realidad no hicimos demasiado. Si sabes la teoría, puedes crear Colorific en menos de cinco minutos. Si tuviste algún problema durante este tutorial, asegúrate de descargar los archivos fuente de GitHub.

En las dos próximas entregas, exploraremos la parte básica del lenguaje de programación Swift. Esto te preparará para todo el contenido interesante que tendrá el resto de la serie.

Si tienes preguntas o comentarios, puedes dejarlos en la sección debajo, o contactarme vía Twitter.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.