Mi primera aplicación iOS (Hola Mundo)

Share if you like...Share on Facebook0Tweet about this on TwitterShare on Google+0Share on LinkedIn3

Requisitos antes de empezar

  • Xcode ( nosotros utilizaremos la versión actual que es la 6.1.1).
  • Tener nociones sobre programación orientada a objetos y MVC.

Los lenguajes de programación que podemos usar para crear nuestras aplicaciones iOS serán Swift y Objective-C. Nosotros utilizaremos Swift.

Swift es un lenguaje de programación multiparadigma creado por Apple enfocado en el desarrollo de aplicaciones para iOS y Mac OS X. Fue presentado en WWDC 20142 y está diseñado para integrarse con los Frameworks Cocoa y Cocoa Touch, puede usar cualquier librería programada en Objective-C y llamar a funciones de C. También es posible desarrollar código en Swift compatible con Objective-C bajo ciertas condiciones. Swift tiene la intención ser un lenguaje seguro, de desarrollo rápido y conciso. Usa el compilador LLVM incluido en Xcode 6.

Mi primera aplicación iOS

Comenzamos!! Lo primero que haremos será descargar Xcode desde el App Store y una vez descargado lo abrimos. Una vez abierto pulsaremos en File -> New -> Project y  veremos una pantalla similar a esta.

crear aplicacion
Crear aplicación #1

Seleccionamos “Single View Application” y pulsamos en “Next“.

A continuación se nos mostrará otra ventana en la cual se nos pide una serie de datos:

  • Product Name: Nombre de la aplicación.
  • Organization Name: Organización de esa aplicación.
  • Organization Identifier: El identificador de esa organización ( este apartado haremos referencia a él como “paquete” o “package“, por defecto podemos poner “com.nuestroNombre” ).
  • Language: El lenguaje de programación que usaremos para desarrollar nuestra aplicación (aquí elegiremos Swift como hemos mencionado anteriormente).
  • Devices: Los dispositivos para los que vamos a desarrollar la aplicación ( iPhone, iPad o ambos).
  • Core Data: Si nuestra aplicación va a trabajar con bases de datos a nivel interno, marcaremos esta casilla.
Storyboard
Crear aplicación #2

 

Una vez rellenado los datos pulsamos “Next” y nos preguntará donde queremos guardar el proyecto. Elegimos el destino y le damos al botón “Create” para crear nuestro proyecto.Cuando creamos un proyecto nuevo tenemos 2 clases por defecto llamadas “AppDelegate.swift” y “ViewController.swift“.

El “AppDelegate.swift” podríamos decir que es como el punto inicial desde donde parte nuestra aplicación (para los que vienen de Android, esto sería similar a la clase Application) y en ella se recogen una serie de eventos referentes a la aplicación como por ejemplo, el evento que se ejecuta cuando se ha terminado de cargar todas las opciones de la aplicación (en este tutorial no vamos a usar esta clase).

El “ViewController.swift” es una vista que nos genera Xcode cuando creamos un proyecto para poder empezar ha desarrollar nuestra aplicación.

Una vez sabemos esto os preguntaréis ¿dónde puedo editar mi vista? ¿cómo puedo crear más vistas?. Para ello Xcode contiene un archivo llamado “Main.storyboard” , el cual contiene todas las vistas de la aplicación y en donde podemos editarlas, añadir nuevas vistas, etc…Si pulsáis sobre este archivo, veréis como se muestra la única vista que tenemos por ahora.

Storyboard #1
Storyboard #1

Para insertar componentes vemos abajo a la derecha todas las opciones que tenemos para agregar, ya sea una vista con su componente de listas como un simple botón. Procedemos entonces ha insertar una etiqueta, un campo de texto y un botón llamados “Label“, “Text Field” y “Button” respectivamente.

Storyboard #2
Storyboard #2

Si pulsamos en algunos de nuestros componentes, podemos editar sus propiedades. Para ello pulsaremos sobre la etiqueta y le cambiaremos su propiedad “text” para que se muestre “Introduce tu nombre:

propiedades
Propiedades

y al botón le pondremos el texto saludar quedando nuestra vista de la siguiente manera.

Storyboard #3
Storyboard #3

Una novedad introducida en iOS 8 es que a partir de un solo storyboard podemos hacer las vistas para iPhone y iPad, para ello tenemos que añadir unas “restricciones“. Para ellos seleccionamos nuestra vista y añadimos esas restricciones.

Restricciones
Restricciones

Una vez tenemos el diseño de la vista, tenemos que referencias esos componentes que hemos añadido con la clase que gestiona esa vista. Para ello primeramente, seleccionaremos la visualización en 2 partes, para así poder tener en la misma pantalla la parte de diseño de la parte de código.

Vista editor
Vista editor

Una vez tenemos la pantalla dividida, tan solo tenemos que localizar en la pantalla de nuestra derecha la clase que gestiona esa vista y que en nuestro caso se trata de “ViewController.swift“.

Storyboard #4
Storyboard #4

Ahora seleccionamos el control que queremos referencias y con nuestra tecla “control” la arrastramos a la pantalla de “ViewController.swift“. Cuando la arrastramos nos saldrá un diálogo en el cual deberemos de asignar un nombre a ese componentes para luego posteriormente poder usarlo. Si os fijáis en el apartado “Connection” tenemos las opciones de “Outlet” y “Action“. Dejaremos la opción en “Outlet” siempre y cuando no se trate de la llamada a un evento  para ese caso utilizaremos la opción “Action” indicando el tipo de evento que se trata. Una vez rellenado los datos, pulsamos en “Connect”.

dialogo conexion
Dialogo de conexión #1
dialogo conexion 2
Dialogo de conexión #2
Diálogo de conexión #3
Diálogo de conexión #3

Ya tenemos referenciados nuestros componentes, vayamos ahora ha desarrollar que lógica tendrán nuestra aplicación. Si nos fijamos ya tenemos implementado el método “onClickSaludar” pero evidentemente sin código alguno, lo que vamos hacer es que el texto que introduzcamos en el campo de texto, se muestre en nuestra etiqueta al pulsar sobre nuestro botón siempre y cuando el campo de texto no este vacío.

Para hacer referencia a los objetos y/o componentes de nuestra vista, tan solo tenemos que escribir “self” seguido de un punto y el nombre que le asignamos a la hora referenciarlo, siendo nuestro caso “tfNombre” y “lblNombre“.

@IBAction func onClickSaludar(sender: UIButton) {
   if(!self.tfNombre.text.isEmpty) {
      self.lblNombre.text = "Hola " + self.tfNombre.text;
   }
}
Hola Iván
Hola Iván

Con esto ya solo tendríamos que ejecutar nuestra aplicación pulsando sobre el botón “Play” situado arriba a la izquierda y teniendo un dispositivo seleccionado como por ejemplo el iPhone 6.

Descargas

Puedes acceder a nuestro repositorio para bajar el proyecto aquí.

Share if you like...Share on Facebook0Tweet about this on TwitterShare on Google+0Share on LinkedIn3
The following two tabs change content below.

Iván Díaz Molina

Desarrollador Android e iOS, colaborador de Proyecto Simio

Latest posts by Iván Díaz Molina (see all)

10 thoughts on “Mi primera aplicación iOS (Hola Mundo)

  1. ¿Podrías hacer un tutorial de cómo hacer una app de stickers?
    Sobre todo, el proceso que va desde que tienes hecha la app hasta que la subes a la app store.

  2. Muchas gracias por el aporte, me pueden ayudar como puedo utilizar mapas en IOS ya que soy nuevo, ya tengo mi app en Android y ahí utilice los API, como sería en IOS. nuevamente gracias

  3. Hola a todos, quisiera saber si podrían decirme como crear una función/clase/método que al apretar un botón pregunte si quiere realizar una llamada al número que el botón contiene. Gracias

  4. Muchas gracias a todos los que colaboran con Proyecto Simio, que bien que sigan haciendo este tipo de posts, y que este Hola Mundo, poco a poco se fuera convirtiendo en una app más completa que involucre más temas del desarrollo con Swift. Gracias.

Deja un comentario