CreativiU: Cursos Online Para Creativos

Aprende Xcode y crea apps increibles fácilmente

Xcode  incluye todo lo necesario para crear aplicaciones increíbles para iPhone, iPad, Mac, Apple Watch y Apple TV.

Imagen de Wikimedia Commons

Por eso te traigo hoy día este fabuloso tutorial de cómo programar tu primera App con Xcode

Sigueme…

Usaremos Xcode 4.3.2 para trabajar en el tutorial. Sin embargo, también puedes usar Xcode 4.2 para crear la aplicación en caso de que no puedas actualizar a la última versión de Xcode.

Seguramente has oído hablar de “Hello World” si has leído cualquier libro de programación antes.

Se ha convertido en el programa tradicional para que el principiante pueda desarrollar sus proyectos.

Es un programa muy sencillo que suele mostrar “Hello, World” en la pantalla de un dispositivo.
En este tutorial, sigamos la tradición de programación y creemos una aplicación “Hello World” usando Xcode.

A pesar de su simplicidad, el programa “Hello World” sirve para algunos propósitos:

Aprenderás cómo compilar un programa, crear la aplicación y probarlo usando el Simulador.

Por último, te hace pensar que la programación no es difícil.

No quiero ahuyentarte…

Echa un vistazo a tu primera aplicación

Antes de entrar en la parte de codificación, echemos un vistazo a nuestra versión de la aplicación “Hello World”. La entrega final se verá así:

Hola Mundo Entregable

Tu primera aplicación para iPhone – Hello World

Es muy simple y muestra sólo un botón “Hello World”. Cuando se pulsa, la aplicación le solicita un mensaje. Eso es. Nada complejo, pero le ayuda a iniciar su viaje de programación de iOS.

¡Comienza a Codificar!

Primero, ejecuta Xcode. Si has instalado Xcode a través de Mac App Store, deberías poder localizar Xcode en el LaunchPad. Simplemente haz clic en el icono Xcode para iniciarlo.

Xcode Folder

Una vez iniciado, Xcode muestra un diálogo de bienvenida. Desde aquí, elige “Crear un nuevo proyecto Xcode” para iniciar un nuevo proyecto:

Xcode le muestra varias plantillas de proyecto para su selección. Para su primera aplicación, seleccione “Aplicación de vista única” y haz clic en “Siguiente”.

Elegir la plantilla de Xcode

Selección de plantilla de proyecto de Xcode

Esto te llevará a otra pantalla para llenar todas las opciones necesarias para tu proyecto.
Opciones de proyecto Xcode

Opciones de proyecto para la aplicación Hello World

Simplemente puedes rellenar las opciones de la siguiente manera:

Nombre del producto: HelloWorld – Este es el nombre de tu aplicación.

Identificador de la empresa: com.appcoda – Es en realidad el nombre de dominio escrito en sentido inverso. Si tienes un dominio, puedes usar tu propio nombre de dominio. De lo contrario, puedes utilizar el mío o simplemente rellenar “edu.self”.

Prefijo de clase: HelloWorld – Xcode utiliza el prefijo de clase para nombrar la clase automáticamente. En el futuro, puedes elegir tu propio prefijo o incluso dejarlo en blanco. Pero para este tutorial, vamos a mantenerlo sencillo y usar “HelloWorld”.

Familia de dispositivos: iPhone – Sólo usa “iPhone” para este proyecto.

Utilizar Storyboards: [unchecked] – No selecciones esta opción. No necesitas Storyboards para este sencillo proyecto.

Utilizar el recuento automático de referencias: [checked] – De forma predeterminada, debe activarse. Sólo déjalo como está.

Incluir pruebas de unidad: [desmarcada] – Deje esta casilla desmarcada. Por ahora, no necesita la clase de prueba de unidad.

Haz clic en Siguiente para continuar.

Xcode te pregunta entonces dónde guarda el proyecto “Hello World”. Elige cualquier carpeta (por ejemplo, Escritorio) en tu Mac.

Puedes observar que hay una opción para el control de código fuente. Simplemente deselecciona. Haz clic en “Crear” para continuar.

Selecciona Xcode Project Folder

Elige una carpeta para guardar tu proyecto

A medida que confirmes, Xcode crea automáticamente el proyecto “Hello World” basado en todas las opciones que has proporcionado. La pantalla se verá así:

Ventana principal de Xcode para el proyecto Hello World

Familiarizarse con Xcode Workspace

Antes de pasar a codificar tu aplicación, vamos a tomar unos minutos para echar un vistazo rápido al entorno de trabajo de Xcode.

En el panel izquierdo, es el navegador del proyecto. Puede encontrar todos sus archivos bajo esta área.

Project Navigator en el espacio de trabajo

La parte central del espacio de trabajo es el área de edición. Usted hace todas las cosas de edición (como editar configuración del proyecto, archivo de clase, interfaz de usuario, etc) en esta área dependiendo del tipo de archivo seleccionado.

Editor y área de utilidades en Xcode

El panel de la derecha es el área de utilidad. Esta área muestra las propiedades del archivo y le permite acceder a la Ayuda rápida.

Si Xcode no muestra esta área, puede seleccionar el botón de vista más a la derecha en la barra de herramientas para habilitarlo.
Por último, es la barra de herramientas.

Proporciona varias funciones para que pueda ejecutar su aplicación, el editor de conmutadores y la vista del espacio de trabajo.

Barra de herramientas Xcode

Ejecuta tu aplicación por primera vez

Incluso si no has escrito ningún código, puedes ejecutar tu aplicación para probar el simulador. Esto da una idea de cómo construir y probar tu aplicación en Xcode. Simplemente pulsa el botón “Ejecutar” en la barra de herramientas.

XcoDe Run ButtonRun Button en XcodeXcode construye automáticamente la aplicación y la ejecuta en el Simulador.

¿El Simulador Una pantalla gris con nada dentro ? ¡Eso es normal!

Como tu aplicación está incompleta, el Simulador sólo muestra una pantalla en blanco.

Para terminar la aplicación, simplemente pulsa el botón “Detener” en la barra de herramientas.

Xcode Stop ButtonTerminate la ejecución de AppBack a CodeOkay, vamos a seguir adelante y empezar a agregar el botón Hello World a nuestra aplicación.

Regresa al Project Navigator y selecciona “HelloWorldViewController.xib” .Hello World XIB FileSelect HolaMundo XIB FileAs que seleccionas el archivo, el editor cambia a un Interface Builder y muestra una vista vacía de tu aplicación como a continuación:

Hello World Interface BuilderInterface Builder in Xcode

En la parte inferior del área de utilidad, muestra la biblioteca de objetos.

Desde aquí, puedes elegir cualquiera de los controles de interfaz de usuario, arrastrar y soltar en la vista.

Para la aplicación Hello World, seleccionemos el “Round Rect Button” y arrástralo a la vista. Intenta colocar el botón en el centro de la vista.

Haz doble clic en él y el nombre de “Hello World” para ejecutar el Aplicación de nuevo. Si pulsas el botón, no hace nada.

Necesitaremos agregar el código para mostrar el mensaje “Hello, World”.

Codificación del botón Hello World En el Project Navigator

Selecciona “HelloWorldViewController.h”.

El área del editor ahora muestra el código fuente del archivo seleccionado.

Agrega la siguiente línea de código antes de la línea “@end”: 1- (IBAction) showMessage

Tu código debería verse así después de la edición: HelloWorldViewController Mostrar MessageNext,

selecciona “HelloWordViewController.m” e inserta el código siguiente antes de la opción

“@ End “línea: 12345678- (IBAction) showMessage {UIAlertView * helloWorldAlert = [[UIAlertView alloc] initWithTitle: @” Mi primera aplicación “mensaje: @” Hola, mundo! ” Delegate: nil cancelButtonTitle: @ “OK” otherButtonTitles: nil]; // Mostrar el mensaje Hello World
[helloWorldAlert show];}

Después de EditingForget sobre el significado del código Objective-C anterior.

Te lo explicaré en el próximo post. Por ahora, solo piensa en “showMessage” como una acción y esta acción indica a iOS que muestre un mensaje de “Hello World” en screen.

¿Cómo puede el botón “Hello World” saber qué acción va a invocar cuando alguien toque en él?

Siguiente paso, tendrás que establecer una conexión entre el botón “Hello World” y la acción “showMessage” que acabas de agregar.

Selecciona el archivo “HelloWorldViewController.xib” para volver al Interface Builder. Manten presionada la tecla Control del teclado, haz clic en el botón “Hola mundo” y arrastra hasta “Propietario del archivo”.

Abre el Pop-up del Evento del Propietario del archivo Pop-up desde el OwnerTest del archivo Tu aplicación¡Eso es!

Ya puedes probar tu primera aplicación. Simplemente pulsa el botón “Ejecutar”.

Si todo es correcto, tu aplicación debería ejecutarse correctamente en el Simulator.

Hello World AppHello World AppCongratulation!

Has creado tu primera aplicación de iPhone. Es una aplicación sencilla sin embargo, creo que ya tienes una idea mejor sobre Xcode y cómo se desarrolla una aplicación.

Como siempre, si encuentras algún problema al crear tu aplicación, no dejes de comentar