Noticias

Tutorial I iOS: Tu primera aplicación para iPhone

¡Qué tal!, soy Alejandro Tapia estudiante de Ing. Telemática en la UPIITA-IPN actualmente dedico la mayor parte de mi tiempo al desarrollo de aplicaciones móviles en Android y en iOS (iPad, iPhone, e iPod touch).

Aprovechando este espacio que nos brinda el CTIN y motivado por el primer tutorial en el blog de nuestro amigo José Luis Cadena sobre Android, he decidido hacer este primer tutorial, el primero de una serie de tutoriales dedicado a todos aquellos que estén interesados en desarrollar aplicaciones para iOS (iPhone, iPad e iPod touch).

La intención de estos tutoriales es que aprendan de una forma muy practica, por este motivo no detallare algunas cosas, ya que es decisión suya que tanto quieren adentrarse y conocer más a detalle este maravilloso mundo de iOS, por tal motivo les recomiendo que de vez en cuando revisen la documentación de iOS Developer Library. Así nos los aburriré con tutoriales tan extensos, ¿de acuerdo? Bueno ¡manos a la obra!

Antes que nada debemos conocer que herramientas son las que necesitamos para desarrollar en iOS. El IDE que se utiliza es Xcode, en el se programa en lenguaje Objective-C, lo podemos descargar gratis desde el iOS Dev Center. Hay diferentes versiones para Lion y Snow Leopard, recomendable bajar la última versión ¡Ojo! Baja la correspondiente a tu Mac OS (Lion o Snow Leopard). En mi caso tengo Mac OS Lion y me he bajado la última versión 4.3.3 de Xcode.

Lo que descargamos es un .dmg lo abrimos y arrastramos la aplicación Xcode a nuestra carpeta de aplicaciones y ¡listo! Ya tendremos instalado Xcode, en espera para nuestra primera aplicación.

La primera aplicación que desarrollaremos será un texto que muestre el clásico Hello World!! (Jeje no podía faltar).

Abrimos Xcode y nos aparecerá la ventana de Welcome to Xcode, ahí seleccionamos Create a new Xcode project o podemos crear un nuevo proyecto en File -> New -> Project, o con la combinación de teclas , ahora nos aparecerá la siguiente ventana:

Imagen2TutorialiOS

Seleccionamos “Empty Application”, no seleccionaremos algún otra de las plantillas ya que la intención es que entendamos la estructura más básica de una aplicación y no los confunda con tanto código que se genera al seleccionar alguna otra de las plantillas. Ahora le damos en Next.

Imagen3TutorialiOS

En la siguiente ventana, en el campo “Product Name” ahí escribiremos el nombre de nuestro proyecto, podemos nombrar como queramos, incluso podemos poner espacios, estos espacios serán sustituidos por guiones, por supuesto lo mas recomendable es nombrar el proyecto sin espacios, también tendremos que escribir en el campo “Company Identifier” el nombre de nuestra empresa, tranquilos, puede ser cualquier nombre, de igual forma sin espacios. En “Device Family” le indicamos para que dispositivo vamos a desarrollar, iPhone, iPad o Universal (para los dos). Ahora le damos Next.

Al dar Next le indicaremos donde guardara el proyecto, pueden guardarlo donde ustedes gusten, yo creé una carpeta en Documentos llamada XcodeProjects ahí guardo todos mis proyectos de Xcode, les recomiendo que también ustedes lo hagan, esto para tener una mejor organización.

Imagen4TutorialiOS

Después de seleccionar donde se guardara el proyecto, Xcode mostrará la ventana inicial del proyecto donde se muestra un resumen de configuración de nuestra aplicación, en donde podemos configurar la orientación, definir el icono y el launcher de la aplicación, por ahora no moveremos nada de esto.

Ahora agregamos una clase a nuestra aplicación, la cual será la encargada de controlar la interfaz de nuestra aplicación, click derecho sobre la carpeta que tiene el nombre de nuestro proyecto y seleccionamos New File.

Imagen5TutorialiOS

Seleccionamos Objective-C class y Next.

Imagen6TutorialiOS

Nos mostrará una siguiente ventana en donde pondremos el nombre de la clase, yo la nombre MainViewController. Como les comentaba anteriormente esta clase será una pantalla la cual podamos agregar algunos controles, por tanto es importante que en “Subclass of” seleccionemos “UIViewController”. También tendremos que marcar la opción “With XIB for user interface” esto nos generara un archivo .xib, el cual representara la vista de la interfaz y nos permitirá trabajar la parte gráfica de la aplicación.

Imagen7TutorialiOS

Al dar Next le indicaremos donde la queremos guardar, obviamente la guardaremos en la carpeta de nuestro proyecto.

Imagen8TutorialiOS

Al dar Create nos generará tres archivos en mi caso (MainViewController.h, MainViewController.m y MainViewController.xib).

Imagen9TutorialiOS

Por cuestiones de organización les recomiendo guardar estos tres archivos en una carpeta, esto es una buena practica ya que cuando empecemos a desarrollar aplicaciones mas complejas y tengamos varias vistas tendremos muchas clases y después no nos será fácil encontrarlas, se los digo por experiencia.

Seleccionamos los tres archivos, damos click derecho y seleccionamos en “New Group from Selection”, le ponemos a la carpeta el mismo nombre que los archivos , en mi caso MainViewController.

Imagen10TutorialiOS

Bien, ahora seleccionemos el archivo MainViewController.xib, este nos mostrara la parte gráfica de nuestra aplicación, en este caso solo mostraremos un texto que diga Hello World!!

Bien para ello arrastraremos de la barra lateral derecha llamada “Utility Area” un objeto de tipo “Label” en el cual escribiremos Hello World!!

Imagen11TutorialiOS

Imagen12TutorialiOS

Ahora lo que haremos será decirle a nuestra aplicación que inicie con esta vista que acabamos de modificar.

Abrimos el archivo “AppDelegate.m” y lo primero que tenemos que hacer es importar la clase MainViewController.h Ahora dentro de la función “application:didFinishLaunchingWithOptions” crearemos un objeto de la clase MainViewController y lo asignamos a la propiedad “rootViewController” de “window” esto hará que al iniciar la aplicación la primera vista que se mostrara será la que contiene el label.

Imagen13TutorialiOS

¡Listo! Con esto ya terminamos nuestra primera aplicación, ahora solo falta verla funcionar en el emulador. Para ello seleccionamos en la parte de arriba “iPhone 5.1 Simulator” y presionamos el botón de “Run”

Imagen14TutorialiOS

Como podemos observar ¡¡funciona perfectamente!!

Imagen15TutorialiOS

Bueno esto es todo, espero que les haya gustado y no tengan problemas al momento de realizar su propia aplicación.

En esta serie de tutoriales iré subiendo de nivel y trataré temas interesantes, los cuales les serán de gran utilidad para realizar sus propias aplicaciones.

Recuerden dejar sus comentarios, sugerencias o dudas respecto a este tutorial en @ctintelmex sus cometarios son muy valiosos para mi ya que me sirven de motivación para los futuros tutoriales, ¡¡saludos!!

Comentarios