apps ios iphone objective c tutoriales
Xabadu ya cumplió una parte de la promesa, así que vengo para cumplir la otra parte y dar inicio a la saga de tutoriales donde aprenderemos a crear aplicaciones para iOS.
En esta primera parte vamos a ir a lo más simple: La instalación (con revisión) y la primera aplicación, la cual será el siempre bienvenido “Hola Mundo”.
¿Donde?
¡Adivinen!
¡Exacto!, después del salto (Les advierto que salió laaaaaaaargo).
Me robaré Aprovecharé la introducción hecha por Xabadu en Como Aprender a programar apps para Android y les explicaré como lo haremos acá:
Bien, la idea es que luego de este tutorial, empecemos a hacer “mini-aplicaciones” en las cuales aplicaremos distintas cosas que, a medida que se expliquen, iremos aprendiendo.
Con el paso de los números de esta saga, iremos haciendo aplicaciones más complejas (pero no esperen programar Facebook) e ir integrando lo que se vaya aprendiendo en números anteriores.
¿Por que no llevar un orden estilo “libro a programación”?
Hay varias razones, pero las 2 principales son que:
1.- Yo no soy ningún experto.
2.- Ese método, generalmente, se vuelve aburrido y difícil de seguir.
Sí, partiremos de la base que se conocen conceptos básico de programación y que han hecho alguna que otra cosilla con códigos, pero nada complejo, sabiendo las bases y manejando a un nivel medio-bajo algún lenguaje de programación debería bastar para empezar a hacer nuestras aplicaciones nativas.
(Si no manejan los conceptos básicos, pueden partir revisando esta saga: http://www.comolohago.cl/como-aprender-a-programar-y-no-morir-en-el-intento-parte-1/.)
(Descaradamente usaré exactamente lo mismo expuesto por Xabadu. ¡Trabajo en equipo!)
Si, esta saga cubrirá el desarrollo de aplicaciones para iOS de forma nativa. Actualmente hay una serie de aplicaciones y frameworks que permiten crear aplicaciones móviles multiplataforma (Android, iOS, Blackberry, Windows Phone, etc.) utilizando una sola tecnología de desarrollo (habitualmente Javascript o algún otro lenguaje). En este caso no las cubriremos, pero si son una alternativa a tener en cuenta, considerando las ventajas y desventajas que presenta cada una de ellas.
No, no y sobre todo: no.
Como les comenté arriba, yo no soy ningún experto. La mayoría de lo que sé lo aprendí de manera auto-didacta y espero poder ayudar y ser el punto de partida. Sobre esto mismo, no espero no cometer errores y siempre voy a estar feliz de que me corrijan (ahora, si quieren usar insultos, se pueden ir por donde llegaron 😀 ) y aprendamos en conjunto. ¡De eso se trata Como Lo Hago!.
Y bueno, robada hecha la introducción: ¡Hi-yo, Silver!
Lo primero que tienen que saber, es que para hacer aplicaciones en iOS necesitan un Mac. Lo se, tampoco me gusta esta limitación, pero Apple no ha entregado sus herramientas para otras plataformas.
Se de personas que han usado un Hackintosh, pero no he visto ningún caso que se pueda calificar de exitoso.
Sabiendo esto, necesitamos instalar Xcode, pero ¿Que es Xcode? ¿Es un integrante de los X-Men?
Nope, Xcode es el entorno de desarrollo que nos facilita Apple (de manera gratuita) para realizar nuestra aplicaciones, Xcode se instala con varias utilidades extras que iremos viendo en el desarrollo de esta saga ( y si se me olvida, ¡recuérdenmelo!).
Para instalar Xcode, buscamos en el Dock de Mac el icono de la App Store:
Cuando abramos la aplicación de la Appstore, buscamos “Xcode” en el campo de búsqueda arriba a la derecha:
Realizada la búsqueda, luego de unos segundos, aparecerán los resultados:
El primer resultado, el icono del plano con el martillo, ese es Xcode (Sí, el que dice Xcode). En este caso pueden ver que aparece un botón “Actualizar” porque ya esta instalado en mi equipo, pero en caso contrario, el botón dirá “Gratis” (Como se ve en el icono de la derecha).
Si presionan el botón (el que en el caso de ustedes dirá “Gratis”), cambiará de color y el texto dirá “Instalar App”. Presionan el botón nuevamente (con el texto nuevo) y les pedirá que ingresen su cuenta de la AppStore (la misma que usan para descargan aplicaciones).
Luego de ingresar sus credenciales, la descarga se iniciará y en el Dock, en su icono de Launchpad se verá el progreso de la descarga:
Solo nos queda esperar que la descarga termine (puede demorar bastante, son 1.65 GB).
Terminado, abrimos Launchpad y le damos un click al icono de Xcode e iniciamos la instalación. Afortunadamente la instalación no requiere ninguna configuración compleja, es del tipo: Siguiente, siguiente, finalizar.
Nota antes de partir: Durante la explicación me leerán usar “método” y “función” indistintamente, esto es una mala costumbre mía. La diferencia entre ambos, es que el método es un proceso que no retorna ningún resultado, mientras que las funciones sí. Ya están advertidos y me disculpo de antemano.
Al abrir Xcode (desde nuestra carpeta de Aplicaciones), nos recibirá una pantalla de bienvenida mostrándonos nuestros proyectos recientes (que en este caso estará en blanco) y preguntándonos que queremos hacer. Seleccionamos comer hasta morir “Create a new Xcode Project”.
Una vez seleccionada esta opción, aparecerá una ventana pidiéndonos que seleccionemos una plantilla para empezar a trabajar.
Con Xcode no solo podemos crear aplicaciones para iOS (Móviles), sino también para OS X (Escritorio), así que es importante que seleccionemos una plantilla para iOS. Afortunadamente esto esta bien delimitado.
A la izquierda podemos ver un menú dividido en 2 secciones “iOS” y “OS X”, que a su vez tienes sub-menus. Nosotros, como se ve en la imagen, usaremos la opción “Application” dentro del menú “iOS”.
Esta opción nos permite elegir entre 7 plantillas o templates:
No importa que plantilla seleccionemos, ninguna nos priva de hacer algo, solo viene con trabajo armado. Puedo seleccionar la plantilla número 1, pero nada me impedira integrar pestañas en esa aplicación
Como mencioné en el listado, generalmente usaremos la plantilla número 4. Aunque las otras nos ahorren trabajo, lo que intentaremos en esta saga es aprender y lo mejor para aprender, es hacer.
Ya seleccionada la plantilla nos aparecerá una ventana pidiéndonos información de la aplicación que vamos a hacer.
Podemos ver que nos pide algunos cuantos datos, así que pasemos a describirlos:
Completamos la información solicitada y al presionar “Next”, nos preguntará donde queremos guardar la aplicación, aunque les recomiendo que creen alguna carpeta para llevar sus proyectos, la decisión es completamente de ustedes. Seleccionando el lugar donde guardar la aplicación ya habremos creado la base de nuestra aplicación.
Xcode no mostrará bastante más de lo que veremos ahora, sin embargo revisar todo lo que trae nos tomaría demasiado tiempo y para esta número de la saga, veremos lo más básico.
Arriba a la izquierda podemos ver, en un boton “Play”, la acción “Run” con la cual podremos ejecutar la aplicación en el simulador de iPhone, de iPad o en nuestro equipo, pero para esto último necesitaremos haber comprado e instalado un certificado de desarrollo. Si apretamos en “Run” se abrirá el simulador con una aplicación en blanco (en gris realmente).
En este caso, para el ejemplo, estamos simulando un iPhone 5 con una versión de iOS de 6.1.
(Volveré a poner la imagen de Xcode acá para seguir revisando.)
Muy bien, al lado de “Run”, tenemos “Stop” que como se imaginarán sirve para detener la simulación de la aplicación.
A la derecha de esto tenemos una barra donde podemos seleccionar en que dispositivo y en que versión de iOS queremos hacer la simulación, en el ejemplo se ve que estamos simulando en un iPhone con iOS 6.1
Abajo de esto tenemos 3 secciones, aunque en la imagen podemos ver 2:
Podemos crear y eliminar carpetas en la zona de navegación, pero estas solo son virtuales y nos ayudan a mantener un orden visual. Físicamente las carpetas no se crean y nos encontraremos con una ensalada de archivos a medida que vayamos creandolos
Como les había dicho, quedaron muchísimas cosas más por ver en Xcode, pero las iremos viendo a medida que avancemos con la saga. Espero haber cubierto lo más básico para empezar.
Luego de aprender lo más aburrido básico, ¡vamos al código!
Antes de mirar el código, tenemos que saber que el lenguaje de programación es Objective-C, el cual es una extensión de C y es orientado a objetos.
Este lenguaje nos va a cambiar varios paradigmas como la declaración de funciones, la forma de llamar a los métodos, etc… pero sin asustarse, si bien al principio cuesta un poquito acostumbrarse luego lo llegaremos a querer.
Haremos una aplicación que tendrá un campo de texto, en la cual el usuario ingresará un texto y este aparecerá o reemplazará un texto en pantalla.
Si vamos a ViewController.m encontraremos los siguientes:
@interface ViewController ()// 1
@end
@implementation ViewController
- (void)viewDidLoad//2
{
[super viewDidLoad];
}
- (void)didReceiveMemoryWarning//3
{
[super didReceiveMemoryWarning];
}
@end
Dejé algunos comentarios en el código para poder explicar de que se trata cada parte.
Ahora, si vamos a ViewController.h, veremos:
#import <UIKit/UIKit.h> @interface ViewController : UIViewController @end
Acá podemos ver que hay muy poco, una importación del Framework básico, la declaración de la clase ViewControler que hereda de UIViewController (Es decir que tiene todo lo que esta clase tiene, más todo lo que le agreguemos). El nombre es similar, pero ViewController es el nombre que nosotros le dimos a nuestra clase (en verdad lo hizo Xcode), bien podría llamarse LaloLandasController o PanConPalta.
Es aquí donde se declaran los métodos públicos, las variables privadas y las variables públicas (propiedades) como veremos más adelante (pero en este mismo número).
Si seleccionamos ViewController.xib, no veremos código (podríamos, pero no lo haremos) más bien veremos el Interface Builder, que es el entorno de diseño gráfico de las aplicaciones. Interface Builder está integrado en XCode desde, si mal no recuerdo, la versión 4 de este, antes de esto era una aplicación aparte (aunque se instalaban en conjunto) y cuenta la leyenda, que antes de eso, no existía y tenían que hacer todo el diseño en base a XML, lo cual no sería un problema si fuéramos este sujeto:
pero no lo somos.
Como decía, al abrir el . xib, veremos lo siguientes:
Podemos fácilmente ver la imagen dividida en 3 partes:
Uf! Costó pero llegamos, ahora sí que sí, ¡código!.
Wo wo wo wo, ¿que y que pasa con los AppDelegate? ¿No son importantes?. ¡Sí que lo son! ¡y mucho! Pero no deben ser vistos a la rápida y por ahora no los ocuparemos, así que prefiero que esperemos antes de verlos.
¿Ya, puedo ir al código o me seguirán haciendo preguntas?…. Sí, sí pueden ir al baño…..
Ahora que están de vuelta, ¡código!
Lo que hará aplicación, como creo dije antes, será solicitar al usuario ingresar un texto en un campo de texto y al presionar un botón este texto se mostrará en otra otro lado de la vista (o reemplazará al que ya exista).
Entonces, para esto necesitamos 3 cosas:
Les aviso que haré que nos demos la vuelta larga en más de una ocasión, pero todo esa en pro del aprendizaje (¡La educación nos gobierna!).
Entonces, partamos por crear nuestro campo de texto, volvamos al viewController.h y agreguemos lo siguiente:
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
{
__weak IBOutlet UITextField *campoDeTexto;
}
@end
Primero que todo, vemos que agregamos unas llaves, las llaves se usan parar declarar variables privadas, la clase misma puede acceder a ellas, modificarlas, etc… pero si creáramos una instancia de esta clase en otra parte, no podríamos acceder a la variable “campoDeTexto” por ser privada (esta dentro de las llaves).
En segundo lugar, vemos algunas cosas raras:
Una vez que escribamos esta linea (y cerremos con “;”) veremos que a la izquierda aparecerá una circulo vacío, este el aviso de XCode diciendo “¡Hey! Creaste un elemento para el Interface Builder, pero el no tiene que idea que lo hiciste, ¡avísale!” ¿y como le avisamos?. ¡Conectando!
Volvamos al .xib y seleccionemos el File’s Owner y a la izquierda, en la parte donde aparecen las propiedades del objeto seleccionado (donde decía “No Selection”), aparecerán 6 pestañas. La última (con el icono de la flecha) se llama Connections Inspector o Inspector de Conexiones y es precisamente a donde tenemos que ir a buscar nuestro objeto recién creado.
Abajo de esto, donde están los elementos nativos para agregar a las vistas, buscamos un UITextField y lo arrastramos sobre el “view” (el rectángulo gris) y le dan el ancho que deseen. Lo acomodaremos arriba.
(Vamos a hacer algo por ahora, seleccionen nuevamente el File’s Owner, pero ahora vayan a la primera pestaña con el icono de una hoja con la punta doblada, se llama ‘File Inspector’, acá busquen la opción “Use Autolayout” y desmarquenla, esta es una opción que ayuda a organizar los elementos dentro de la vista, pero no esta soportada antes de iOS 6, así que la sacaremos)
Agregado el campo de texto, nuestra vista se verá algo así:
Bien, ahora tenemos el objeto declardo en el .h y agregado en el Interface Builder, con eso debería bastar…¡NO SEÑOR!.
Si volvemos al Connections Inspector del File’s Owner, veremos que “campoDeTexto” tiene un circulo vació a la derecha, que si ponemos el mouse encima, aparece un símbolo de batman “más”.
Tenemos que hacer click en ese circulo y sin soltar arrastramos hasta el campo de texto que pusimos en la vista, cuando ya estemos sobre el campo, soltamos el mouse. Aparecerá una linea conectando ambos elementos.
Si se fijan, solo lo pueden conectar con el campo de texto y no con el view, esto es por “campoDeTexto” esta declarado como UiTextField y no nos dejará que lo conectemos con algo de otro tipo, sin embargo, si tuviésemos más campos de texto, nos dejaría conectarlo con cualquiera (pero solo con uno). Al hacer esto, el círculo se llena y aparece que “campoDeTexto” está conectado con un Text Field.
Ahora si están conectados, por lo que cualquier referencia a “campoDeTexto” será una referencia al elemento que agregamos en al vista.
Vamos ahora a agregar nuestro label, y aquí es donde tengo que confesarles que los hice trabajar de más (Muahahahaha), vamos a hacer las cosas en otra manera
Agreguemos un UILabel a nuestra vista justo debajo del campo de texto. No hemos agregado nada al .h.
En Xcode, arriba a la derecha tenemos 6 botones divididos en 2 grupos: “Editor” y “View” (y un botón solitario al final).
Si presionamos el botón central del grupo “Editor” (el icono donde aparecer un Smoking), dividirá nuestra pantalla en 2, dejando en “lienzo” arriba y una sección que nos muestra el código del archivo viewController.h abajo.
Si seleccionamos nuestro Label y luego presionamos el click derecho (el secundario) y sin soltar arrastramos hasta la sección donde nos muestra el código, veremos algo como esto:
Y al soltar, aparecera esto:
La ventana que nos aparece, nos pregunta por algunos datos:
Introducimos el nombre y presionamos “Connect”, la conexión ya estará realizada y el objeto se agregará automáticamente a nuestro .h, dejándolo así:
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
{
__weak IBOutlet UITextField *campoDeTexto;
__weak IBOutlet UILabel *texto;
}
@end
Podemos ver que el trabajo es mucho más sencillo así.
Ya solo nos queda agregar nuestro botón, en este caso será algo distinto, ya que (en este caso) no necesitamos tener una referencia al botón como tal, sino a la acción que hará cuando sea presionado.
Lo que haremos será agregar un botón (UIButton) de la misma forma que agregamos el Label, pero lo haremos debajo de las llaves y cambiaremos el tipo de “Connection” de “Outlet” a “Action”. Al hacer esto, los datos a llenar cambian a lo siguiente:
Seleccionado todo, presionamos “Connect” y nuestro .h quedará de la siguiente manera:
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
{
__weak IBOutlet UITextField *campoDeTexto;
__weak IBOutlet UILabel *texto;
}
- (IBAction)cambiarTexto:(id)sender;
@end
Aprovechamos de ver como se declara una función:
Les comentaba lo particular del paso de parámetros en este lenguaje, esto es porque los parametros se declaran entre medio del nombre de la función.
Supongamos que queremos declarar un función que suma 2 número y devuelve el resultado (para efectos prácticos, todos serán enteros), esta se declararía así:
“-(int)sumarElNumero:(int)primerNumero conEsteOtroNumero:(int)otroNumero”.
Donde el nombre de la función es “SumarElNumero:ConEsteNumero:” y los parámetros son “primerNumero” de tipo int y “otroNumero” también de tipo int. La función además retorna un entero.
Este lenguaje tiene la característica de tener nombres de funciones muy pero muy largos, aunque eso tiene la ventaja de que es muy fácil saber que hacen
Ok, volvamos a lo nuestro.
Al crear la acción de esta forma (arrastrando), no solo se agrega la declaración del método en el .h, si no que la implementación del mismo en el .m, vamos a ver:
#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
- (IBAction)cambiarTexto:(id)sender {
}
@end
Como ven, la función está ahí y ya está, además, conectada con el botón.
Pero si ejecutamos la aplicación y presionamos el botón, no hará nada. Lo cual es lógico porque dentro de la función no hay nada. Así que agreguemos lo que necesitamos a la función:
- (IBAction)cambiarTexto:(id)sender {
texto.text = campoDeTexto.text;
}
Lo que estamos diciendo es algo como “Al presionar y levantar el dedo en el botón, cambia la propiedad ‘text’ (que es el texto como tal) del objeto ‘texto’ (Que es el label que nosotros creamos) por el contenido de la propiedad ‘text’ (también el texto como tal) del objeto campoDeTexto (el text field que nosotros creamos)“.
No podemos decir:
- (IBAction)cambiarTexto:(id)sender {
texto = campoDeTexto.text;
}
Porque “text” es un objeto de tipo UILabel y el texto de este objeto es una de tantas propiedades que tiene (y se llama ‘text’)
Hay otra forma de hacer que esto funcione, en el fondo le diremos lo mismo pero de otra manera:
- (IBAction)cambiarTexto:(id)sender {
[texto setText:[campoDeTexto text]];
}
Estamos diciendo lo mismo, pero me parece bueno hacerlo de esta forma para que conozcan los paréntesis cuadrados o “corchetes”.
En Objective-C, las funcionen se llaman así:
[deQuienEsLaFuncion NombreDeLaFuncionConParametro:(parametro)];
o si tiene mas de un parametro:
[deQuienEsLaFuncion NombreDeLaFuncionConParametro:(parametro) yConOtroParametro:(otroParametro)];
o sin parámetros:
[deQuienEsLaFuncion NombreDeLaFuncion];
En nuestro ejemplo la función “setText” pertenece al objeto texto y la función “text” pertenece a campoDeTexto. La primera no devuelve ningún valor y la segunda devuelve el valor de la propiedad ‘text’ (Es decir, el texto que este escrito en el campo de texto).
Al estar anidadas (o sea, corchetes dentro de corchetes), pasamos el resultado de la función “text” inmediatamente como parámetro a la función “setText”, evitando tener que declarar una variable donde guardar el resultado.
El resultado es exactamente el mismo que en el caso anterior.
Como detalle final, vamos a ir al .xib, haremos doble click en el botón y cambiaremos el texto “Button” por “Cambiar”.
Además agrandaremos hacia los lados el Label y también haremos doble click para cambiar el texto, pero lo dejaremos en blanco. (No lo van a ver, pero está ahí, se los juro).
Hagan click en Run en Xcode y se abrirá el simulador con la aplicación (a veces se demora).
Escriba un texto en el campo de texto y presionen “Cambiar”:
Luego del tutorial más largo de la historia de la humanidad, les recuerdo que como siempre esto fue:
Cualquier duda y/o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habilitada a continuación.
¡Hasta la próxima!
8:56:39 am
Estimado, muy buen aporte..
solo una duda..
como puedo pasar esta nueva app a mi iphone. ?
para que funciones como una app definitivamente.
8:58:58 am
Estimado muy buen aporte. gracias.
pero como puedo agregar esta app a mi iphone.?
para que funcione como una app definitivamente.?
3:36:54 am
Listo lo logre, me costo mucho trabajo por el tema de que en xcode 5 ya no existen (creo) los xib y ahora todo es por main.
se agradece mucho este gran aporte
6:47:02 pm
Hice mi primera app…. o sea mas o menos la del tutorial… pero ahora lo quiero probar en mi iphone..como lo hago sin tener que pagar 99us$ de desarrollados…????
saludos y excelente
8:20:55 pm
@Jars
Así es, desde Xcode 5 se centra completamente en Storybords, pero aún puedes usar XIBs.
@Walter y @Victor
Para poder probar la app, tiene que tener un certificado de desarrollo. Para esto tiene que ser parte del programa de desarrollo de apple:
https://developer.apple.com/programs/ios/
Teniendo el certificado en su equipo, en la opción donde se selecciona el tipo de Simulador, deben escoger “Device” (Cuando tengan su equipo conectado, saldrá el nombre del equipo, por ej “iPhone de Batman”) y al correr la aplicación, correrá en su teléfono.
1:39:18 pm
Y el tuto num 2 domde está?
7:04:12 pm
Genial el tutorial! Útil y divertido! Muchas gracias por compartir! Soy programador de Android (Java, mucho más senzillo en mi humilde opinión) y estaba buscando exactamente esto. Esta web se va a favoritos ahora mismo!
Un saludo!
PD: VMWare + maveriks funciona a las mil maravillas!
2:27:48 pm
Hola! googleando me tope con este tutorial y me pareció excelente pero cuando lo quise lleva a la practica no me sale el ViewController.xib y cheque que al momento de que yo creo un proyecto con iphone me sale que estoy en el simulador iphone retina… y quería saber que versión usaste de xCode para poder hacerlo yo otra vez, espero me puedan responder, gracias
9:25:04 pm
@Alicia, este tutorial lo realizamos con el SDK de iOS 7. Estamos actualizando esta saga para contar con la nueva versión y algunas novedades de Swift, así que atenta al nuevo contenido que viene 😉 Saludos!
9:02:21 am
Me ha encantado vuestro post y me ha sabido a poco pero ya sabeis lo que dice el dicho “si lo bueno es breve es dos veces bueno”. Me gustara volver a leeros de nuevo.
Saludos