Tutorial de VRPN+iPhone (tutorial 1)

He cambiado la dirección de este tutorial, puedes encontrarlo ahora aquí:

http://wwwest.uniandes.edu.co/~d.wilches52/vrpn-and-iphone/

This tutorial has moved !

You can find it here: http://wwwest.uniandes.edu.co/~d.wilches52/vrpn-and-iphone/index-EN.html

Propiedades en Objective C 2.0

Hola,

Les dejo un recurso para aprender un poco más sobre el manejo de propiedades en Objective-C:

• Properties in Objective-C 2.0

Chao!

Primer programa con OpenGL y Cocoa Touch a la vez !

Hola,

Aquí les dejo mi primer programa usando OpenGL y elementos gráficos de Cocoa Touch en iPhone.

Esto se logra usando dos UIView diferentes: uno para la barra de botones, y el otro para todo lo que sea OpenGL.

El código fuente se encuentra aquí.

Por favor no me juzguen por la organización del código ... cuando hago una "prueba de concepto" no soy muy ordenado ...

Para realizar esta prueba me base en estos recursos:

• OpenGL OS Programming Guide for iPhone OS
• OpenGL ES From the Ground Up, Part 2: A Look at Simple Drawing 

Además veo que me serán muy útiles:

• OpenGL ES From the Ground Up: Table of Contents
• 18 OpenGL ES Resources That You Must Know

Chao !

OpenGL for Embedded Systems

Hola,

El siguiente paso para investigar sobre cada tecnologia que necesito usar en mi tesis:

• OpenGL ES Programming Guide for iPhone OS

Próxima semana: cargar algo en OpenGL al mismo tiempo que objetos de UI propios de iPhone.

Chao !

Descargando archivos por HTTP

Hola,

Aquí coloco un ejemplo de cómo descargar archivos por HTTP, este usa la clase NSURL y obtiene todos los bytes de la página Web indicada de manera asíncrona.

Este ejemplo muestra que los datos se pueden ir recibiendo por fragmentos en nuestra aplicación (tan pronto estén disponibles), es decir, no hay que esperar a que llegue todo el contenido de la página para poder tener acceso a ella.

La referencia de Apple en la que me basé fue la siguiente:

• URL Loading System: Introduction to URL Loading System (en especial: URL Loading System: Using NSURLConnection)
• NSURL Class Reference

El código fuente se encuentra aquí y la aplicación se vé así:

 

 

Chao !

Tutorial 2: Hola Mundo++

Hola,

Hoy voy a mostrar como hacer interacción con elementos de la GUI, particularmente con un botón.

La interfaz a desarrollar es esta:

En esta aplicación hay un botón que dice "Hola Mundo" y al darle click queremos que cambie a "Hello World", al darle click de nuevo queremos que cambie a "Hola Mundo" otra vez, y así sucesivamente.

El código fuente del Tutorial 1 nos servirá como punto de partida, por lo que en este tutorial solamente vamos a explicar las conexiones que debemos hacer para que nuestro botón ejecute una pieza de código que modifica el texto contenido dentro del mismo botón.

Cambios en el código fuente

Primero, como dentro de nuestro código vamos a tener que modificar un elemento de la GUI necesitamos crear un atributo dentro de nuestra clase HelloWorldView.h que permita referenciar al elemento gráfico. Esto se logra creando un atributo de tipo UIButton* así:

UIButton *button;

Y declarando una propiedad con el mismo nombre y anotada con IBOutlet así:

@property (nonatomic,retain) IBOutlet UIButton *button;
 
Pero como además vamos a necesitar llamar a nuestro código fuente desde una acción del botón de la GUI, necesitamos declarar una función callback (como un listener de Java), de esta manera:

- (IBAction)buttonCallback:(id)sender;

Hasta aquí no hemos creado conexiones pero la idea es que:

• Cuando queramos cambiar desde el código el texto deel botón de la GUI usemos nuestra propiedad button
• Cuando queramos invocar desde nuestro botón de la GUI el código fuente de la aplicación usaremos la función buttonCallback

Resumiendo, el código fuente es este:

 

Pero si recordamos,  al modificar el ".h" sólo declaramos las propiedades y funciones, mas no las implementamos (el "qué hacen" mas no el "cómo lo hacen"), por lo cual necesitamos modificar también nuestro ".m" para realizar las respectivas implementaciones.

Vamos a crear en HelloWorldView.m la función buttonCallback, tal como se muestra en la siguiente imagen, además de sintetizar nuestra propiedad button (recuerdan el código fuente del tutorial 1?).

También es de tener en cuenta que estamos decrementando el conteo de referencias de nuestra propiedad button en el método dealloc.

 

La función que acabamos de crear usa algunos mensajes que no conocemos:

• button:titleForState
  Este mensaje obtiene el texto que aparece dentro del botón. El "estado" al que hace referencia este método es uno de varios posibles estados en que el botón puede estar ("desactivado" por ejemplo). El valor retornado es un NString, por lo que para comporarlo con otro NSString se debe usar el método NSString:compare:
• button:setTitle::forState
  Este método es el compañero del anterior, en vez de obtener el texto del botón, lo cambia.

No voy a explicar la lógica del método pues es sólo darle una mirada y ya.

Listo, todo el andamiaje de código fuente está terminado, ahora falta construir la respectiva parte en la GUI.

Modificación de la GUI

Recuerdan el "Interface Builder" ? Bueno pues necesitamos abrirlo y seleccionar nuestro botón. Aquí lo que vamos a hacer es decirle a nuestro botón "cuando alguien te "toque adentro" debes invocar el método buttonCallback.

Hacer esto es fácil con el "Interface Builder" pues es sólo Drag n Drop. Seleccionamos entonces neustro botón y en la ventana "Button Components" deben mostrarse todas las posibilidades de acciones que el botón puede realizar, vamos a buscar a "Touch up inside" y vamos a tomar el círculo a su derecha y arrastrarlo hasta el elemento "File's owner" de la ventana HelloWorldView.xib

Esto suena complicado, por lo cual lo muestro gráficamente en esta imagen:

Listo, ya creamos la conexión entre nuestro botón y la función buttonCallback que creamos antes.

Pero aún falta la configuración para que nuestra propiedad button referencie al botón real, esto lo hacemos de la siguiente manera:

Aquí estamos asignando a "New Referencing Outlet" de nuevo a "File's Owner", y cuando nos aparezca la ventana para elegir la propiedad a la que queremos asignar la referencia, escogeremos button.

Al final nuestra ventana debe quedar así:

Listo, ahora si eso es todo. Sólo falta ejecutar la aplicación y dar click en el botón varias veces para ver como cambia su texto cada vez.

Dé click aquí para descargar el código fuente de este tutorial

Chao, hasta la próxima !

Explicación del código fuente de Hola Mundo

Hola,

Hoy explico el código fuente del programa "Hola Mundo".
Para esto posiblemente sea necesario conocer algo de C++ y Java ...

Recordemos el código del archivo "HelloWorldAppDelegate.h":

Vamos a recorrer el archivo explicando qué es cada línea:

• En Objective-C los comentarios de una sola línea comienzan por // tal como en Java y C++. Así que las primeras 7 líneas son sólo comentarios.
• La siguiente línea es una sentencia "import" tal como las de C++. Estas se usan para incluir el contenido compelto de un archivo (en este caso UIKit/UIKit.h) dentro del archivo que usa la sentencia import. Esto sirve para poder usar funciones, clases, variables, etc,. que están declaradas en esos archivos que estamos importando.
• En la siguiente línea comenzamos hacemos un "forward-reference": @class HelloWorldView; La cual es análoga a la sentencia "class HelloWorldView;" de C++. Esta sentencia se usa para indicar que dentro del código vamos a hacer referencia a una clase llamada HelloWorldView, pero tan sólo estamos diciendo que esa clase "existe en algún lugar", sin decir qué métodos o atributos tiene. En Java no hay necesidad de hacer tal cosa.
• La sentencia "@interface" sirve para declarar una clase. Aquí sólo decimos qué atributos, propiedades y métodos tiene la clase, más no decimos qué hace cada uno de esos métodos. A diferencia de C++ y Java, la declaración de la calse no acaba en cuanto cerramos la llave de la declaración. La declaración de una clase en Objective-C va desde la sentencia "@interface" hasta la sentencia "@end". Las llaves que hay en medio son solamente para declarar los atributos de la calse, pero fíjense que propiedades se declaran por fuera (los métodos también pero en este ejemplo no hay ninguno).
• En C++ y Objective-C los punteros a objetos se declaran de la misma manera: HelloWorldView *myView; La declaración equivalente en Java sería: HelloWorldView myView; En cualquier caso, esto indica que estamos declarando una variable que contendrá una referencia a un objeto de clase HelloWorldView. En esta clase se declaran dos punteros (o referencias si venimos del munod Java).
• Ahora continuamos con la declaración de las propiedades, para los que conocen de .NET, se trata del mismo tipo de propiedades. Una propiedad no es más que una maenra de ahorrarnos la esccritura de un código repetitivo: se le indica al compilador que debe crear un método "get" y un método "set" para una variable de nuestra clase, de modo que quede totalmente encapsulada. Debido a que el get y el set pueden ser implementados de muchas maneras diferentes, debemos decirle al compilador de qué forma queremos que los implemente. Para esto se usan las palabras "nonatomic" y "retain". "nonatomic" la explicaré más adelante. "retain" indica que al momento de hacer la asignación del atribuyto de nuestra clase, debemos decrementar el conteo de referencias de este atributo. Para los que vienen de Java, el conteo de referencias es algo automático, eprop para quienes vienen de C++ sabrán el problema que es decidir si una clase es dueña de una referencia, o si el dueño es otro, y quién es responsable de liberar la memoria del objeto referenciado. Objective-C usa una aproximación entre la de Java y C++, en la que se usa el conteo de referencias, pero el programador debe decir exactamente cuándo debe incrementar o decrementar dicho conteo.

Ahora vamos para el segundo archivo de código fuente que modificamos, "HelloWorldAppDelegate.m":



Este archivo es la implementación de la clase que declaramos en "HelloWorldAppDelegate.h".

• De nuevo, sentencias import para traer el contenido de otros archvios necesarios para la compilación.
• La sentencia "@implementation" indica que vamos a implementar una clase. Esta sentencia termina cuando encontramos la sentencia "@end". Dentro de estas sentencias debemos sintetizar las propiedades y declarar los métodos (sinteti...qué?).
• La sintetización de las propiedades no es más que ordenarle al compilador que cree en ese momento los métodos "get" y "set" de cada propiedad que hayamos declarado. Recordemos que en el ".h" sólo declaramos las propiedades, pero todos los métodos (incluidos los get y los set) deben ser implementados en el ".m". Hay que poner especial cuidado a que la sentencia no es "@synthetize" sino "@synthesize", osea, no es como en el español.
• La siguiente línea es:
  - (void) applicationDidFinishLaunching:(UIApplication*)application {
  Así comienza la implementación de un método en Objective-C, el equivalente en C++ y Java sería algo como:
  void applicationDidFinishLaunching(UIApplication* application) {
  Bueno, sin el "*" en Java.
• Para invocar a los métodos en Objective-C (enviar mensajes le llaman en este lenguaje) se usan los corchetes, por tanto la siguiente línea invoca 4 métodos diferentes, todos en una línea (cada invocación es el uso de un "[" y un "]").
  El primer método que se está ejecutando es "[HelloWorldView alloc]". Este es un método estático de la clase "HelloWorldView", el cual funciona como el "malloc" en C++. Normalmente para crear un objeto uno usaría "new" en Java y C++, este "new" realiza la obtención de la memoria para el nuevo objeto e invoca al constructor.
  Bueno, en Objective-C no hay "new" por lo que toca hacer ambos pasos descritos anteriormente por separado: primero obtenemos la memoria para el nuevo objeto (con el "alloc") y luego invocamos al constructor del objeto para que inicialice su estado interno (atributos).
  El constructor aquí se llama "initWithMibName:bundle:" el cual es un constructor con dos parámetros, uno se llama "initWithMibName" y el otro se llama "bundle". Aquí comienzan a aparecer diferencias significativas con Java y C++ ...
• No voy a explicar lo que hace cada uno de esos métodos (mensajes) a excepción de "autorelease". Este es un mensaje que se le envía a un objeto apra decrementar su conteo interno de referencias, de modo que su memoria sea liberada en el futuro (cuándo? aquí con futuro me refiero a ... leer NSAutoreleasePool).
• Por último, el método "dealloc" es el que se llama justo antes de que un objeto sea destruido (cuando su conteo de referencias llega a 0). Aquí se liberan los recursos que haya adquirido el objeto. Es similar al "finalize" en Java y al destructor en C++.

Bueno, no es más para la explicación del código de la primer aplicación, la próxima vez colocaré una aplicación más compleja para demostrar cómo se hace la interacción con elementos gráficos de la UI.

Chao !

Recursos para programadores de iPhone

Hola de nuevo,

Este pequeño post es para dejarles unas rutas de donde se puede obtener información acerca de la programación en iPhone. Todas son oficiales de Apple:

El iPhone Developer Center es la principal fuente de documentación.
De aquí podemos descargar el Xcode y el iPhone SDK (en caso de que no los tengamos ya instalados), además de documentación para comenzar a aprender a programar para iPhone.

Bueno, aquí les dejo los enlaces:

• iPhone Development Quick Start 
• Getting Started with iPhone OS
• Learning Objective-C: A Primer
• Introduction to The Objective-C Programming Language

Chao!

Tutorial 1: Hola Mundo

Hola a todos!

Hoy voy a mostrar cómo se crea una aplicación para iPhone desde 0.

Para mayor información recomiendo mirar la siguiente documentación oficial de Apple:

• Creating an iPhone Application
• Your first iPhone application 

En este tutorial vamos a crear la siguiente aplicación:

Esta aplicación se compone de un botón con el texto "Hola Mundo", que al ser presionado ... no hace nada. Este es el ejemplo más sencillo de aplicación en iPhone.

Puede dar click sobre las imágenes de este tutorial para ver la imagen en su tamaño real.

En el tutorial 2 mostraré cómo darle algún comportamiento a ese botón.

Comencemos ...

Introducción

1. Xcode es la herramienta de desarrollo que usaremos para crear aplicaciones para iPhone. En esta herramienta crearemos el código, e invocaremos al editor de GUI (Interface Builder) y al simulador (iPhone Simulator 3.0) para probar nuestras aplicaciones sin tener que pasarlas a un iPhone real.
   
   Más información sobre Xcode aquí.
   
   Xcode se puede ejecutar desde el menú de aplicaciones o desde el Dock:
   
   
2. Cuando ejecutemos Xcode no veremos la ventana de un IDE, sino tan sólo el nombre de la aplicación en la barra de Mac:
   
   
3. Ahora debemos abrir una ventana del IDE mediante la creación de un proyecto nuevo: File + "New Project...
   
   
4. Luego veremos aparecer una ventana similar a la siguiente, donde se nos pide que seleccionemos el tipo de proyecto que queermos crear. Seleccionaremos "Window-based Application".
   
   
5. Escribimos el nombre del proyecto en el campo correspondiente y damos click en "Save". En este tutorial voy a usar de nombre "HelloWorld" pero pueden usar el nombre que quieran. Los nombres por defecto de las clases y la GUI se forman a partir del nombre del proyecto.
   
   
6. Debe aparecer una ventana parecida a la siguiente:
   
   En la imagen pueden ver los archivos que son creados por XCode por defecto. En este momento los que más nos importan son:
   
   
   • Mainwindow.xib: Es el archivo que contiene la GUI de nuestra aplicación.
   • main.m: Es el archivo que contiene el punto de entrada de nuestra aplicación (la primer función que se ejecuta de la aplicación). Este archivo contiene la función main (funciona tal como en Java y C++).
   • HelloWorldAppDelegate.h: Es el archivo de cabecera de la clase que contendrá la lógica de nuestra aplicación.
   • HelloWorldAppDelegate.m: Es el archivo de implementación de la clase que contendrá la lógica de nuestra aplicación.
   
   Para quienes conozcan de C++, los archivos ".m" son el equivalente a los archivos ".cpp". En Java los archivos ".java" son el equivalente a la unión de los ".h" y los ".m", ya que la clase es declarada en el mismo lugar donde se implementa (declarar: decir qué métodos y atributos tiene la clase, implementar: decir qué hace cada método y qué valores por defecto toma cada atributo).
   
   En el resto de los tutoriales haremos símiles con Java para dar a entender más fácilmente el código que vayamos desarrollando.
   

Creación de la GUI

1. Ahora vamos a crear la GUI para nuestro botón y la clase controladora de esta GUI (aunque por ahora, no vamos a hacer nada en esta clase, recordemos: nuestro botón no hará nada). Para esto vamos de nuevo al menú "File" y seleccionamos "New File...". En la ventana que aparece seleccionamos "UIViewController subclass" para indicar que vamos a crear una nueva clase controladora de GUI (y su respectiva GUI).
   
   
2. Si la casilla "With xib file user interface" no está activada, actívela. Esta le indica a XCode que además del controlador, queremos que cree la GUI. Al dar click en "Next" debemos introducir el nombre de nuestra clase controladora, aquí usaré "HelloWorldView.m". Damos click en "Finish" para finalizar.
   
   
3. Después de esto ya tendremos 3 nuevos archivos en nuestro proyecto, el objetivo de cada archivo ya deben conocerlo, observen sus extensiones.
   
   
4. Ahora vamos a darle una mirada al Interface Builder (el editor de las GUI). Para abrirlo damos doble click en el archivo "HelloWorldView.xib":
   
   Este editor debe mostrar 4 ventanas:
   
   
   • HelloWorld.xib: Es la ventana principal, muestra los componentes que hay dentro del archivo de GUI. Si le damos una mirada veremos que hay un objeto llamado "File's Owner", este nos servirá más adelante para enlazar la GUI con la clase controladora.
   • View: Es la ventana donde diseñamos nuestra GUI, es un editor WYSIWYG. En los siguientes pasos usaremos esta ventana para dibujar nuestro primer botón.
   • Propiedades: Esta ventana aparece como "View attributes" en la imagen ya que su nombre depende de la pestaña seleccionada. Es la ventana donde cambiaremos las propiedades de la GUI (color, título, entre otros) y su comportamiento (qué hacer al tocar el botón por ejemplo). Más tarde (tutorial 2) usaremos esta ventana para decidir qué hacer cuando a nuestro botón sea tocado.
   • Library: Es la ventana que contiene los componentes gráfios que podemos agregar a nuestra interfaz, tales como botones, labels (textos), campos de texto, barras de desplazamiento, entre otros.
5. A continuación agregaremos nuestro primer botón. Busque en la ventana "Library" el siguiente objeto:
   
   Luego arrástrelo hasta la ventana "View" hasta la posición deseada. Debe quedar con una ventana similar a esta:
   
   
6. Ahora dé doble click sobre el botón que acaba de agregar y escriba el texto que desee. Yo escribiré "Hola Mundo".
   
   Esta es toda la configuración que debemos hacer a nuestra GUI mediante el Interface Builder, podemos guardar (Comando+S) y cerrar (Comando+Q). Ahora, vamos a indicarle a nuestra ventana que debe agregar una instancia de la clase HelloWorldView, esto lo hacemos mediante código en los pasos siguientes.
   

Código fuente

1. Si abrimos el archivo "HelloWorldAppDelegate.h" veremos un código similar a este:
   
   Debemos agregar las siguientes líneas en este archivo:
   
   • @class HelloWorldView;
   • HelloWorldView *myView;
   • @property (nonatomic, retain) HelloWorldView *myView;
   En las posiciones que se muestran en la siguiente imagen:
   
   
2. Ahora veamos el archivo "HelloWorldAppDelegate.m":
   
   Aquí debemos agregar las siguientes líneas:
   
   
   • #import "HelloWorldView.h"
   • @synthesize window, myViewController;
   • HelloWorldView *aViewController = [[[HelloWorldView alloc] initWithNibName:@"HelloWorldView" bundle:[NSBundle mainBundle]] autorelease];
   • self.myViewController = aViewController;
   • [window addSubview:[aViewController view]];
   En las posiciones que se muestran a continuación:
   
   
3. Las líneas recién agregadas sirven para indicarle a nuestra aplicación que un objeto de tipo "HelloWorldView" debe ser creado y agregado a nuestra ventana. Más adelante explicaré que hace cada una de estas líneas.
4. Ya tenemos nuestra primer aplicación lista! Ahora debemos ejecutarla, para esto asegurémonos que tenemos seleccionado "iPhone Simulator 3.0" en el campo de selección de plataforma objetivo para compilación:
   
   
   Nota: Si no encuentra la opción que aparece seleccionada en la anterior imagen, observe al final de este post la sección "¿No encuentra iPhone Simulator 3.0?".
   
   Listo, ahora ya podemos compilar y probar nuestra aplicación, presione la tecla Comando+ENTER o el ícono "Build and Go" de la parte superior y deberá ver la siguiente ventana:
   
   
   
   ¡¡ Hemos terminado nuestra primer aplicación para iPhone !!
   

¿No encuentra iPhone Simulator 3.0?
Es posible que no pueda ver la opción "iPhone Simulator 3.0" entre las opciones de dobjetivo de compilación. El menú que usted debería ver es el siguiente:

Si usted en cambio ve el siguiente menú (o alguno parecido):

Entonces es necesario que acceda al menu "Project" y seleccione la opción "Edit Project Settings":

Observe la opción "Base SDK for All Configurations":

Si usted no tiene seleccionado "iPhone Device 3.0" entonces selecciónelo del menú:
 
Después de esto cierre la ventana de configuración. Ya podrá acceder a la opción "iPhone Simulator 3.0" del menú de objetivos de compilación.

Y por último ...
¿Y esas líneas de código que agregamos para qué sirven? Bueno, en el próximo tutorial daré la explicación, pero para los curiosos, les queda de tarea ... :) ... recuerdan los 2 enlaces que día al inicio de este post ?

El código de este primer tutorial no está disponible, para los siguientes tutoriales dejaré el código enlazado dentro del post.

Chao !
Hasta la próxima !

Realidad Aumentada en otras plataformas móviles

Estas aplicaciones no son de iPhone pero me gustaron :) y se relacionan con mi tesis.

Sony Vaio Mini: Augmented Reality Sightseeing (Fraunhofer IGD)

Wikitude AR Travel Guide (Part 1)

Wikitude AR Travel Guide (Part 2)

Browse the world with an AR browser

Programas similares a guías turísticos en iPhone con Realidad Aumentada

Estos son algunos de los programas que tienen alguna relación con lo que deseo que sea mi tesis. En general: basado en el posicionamiento del usuario mostrar datos a su alrededor extraídos de una base de datos y mostrarlos en pantalla.

New York Nearest Subway

Nearest Tube

GeoVector World Surfer

PeakAR - iPhone apps from Salzburg Research on Vimeo.

Peak.Ar (It gives you the name and the height of the mountain and hills around you)

Qué se ha hecho en iPhone con Realidad Aumentada?

Estas son algunas de las aplicaciones que conozco que usan Realidad Aumentada en iPhone. Esto da una idea de lo que podemos llegar a hacer ...

Augmented Reality iPhone Sudoku Grabber


iPhone within an iPhone


ARToolKit v4.4 running on iPhone


Realidade Aumentada Bradesco no iPhone 3GS

Pronto colocaré más videos de Realidad Aumentada en iPhone.

Objetivo del Blog

Hola!

Este blog ha sido creado para publicar los avances que vaya realizando en la investigación de mi Tesis de Maestría.

Aquí colocaré:

• El paso a paso de lo que vaya haciendo para aprender a desarrollar para iPhone
• Manual introductorio a Objective-C, haciendo el símil a la programación en Java.
• Muchos enlaces! De recursos para programadores de iPhone, de videos interesantes de Realidad Aumentada, de otros videos que aporten algo a este blog
  

Si hay algún otro tema que consideres que debe ir aquí, responde a esta entrada de blog.

Daniel W.