Mi primera aplicación para iOS o Android

Hacer una aplicación para Android iPad o iPhone nunca fue tan facil.

Como comente en el articulo anterior, hacer una aplicación para móviles con javascript es posible gracias a Titanium Appcelerator. En esta ocasión vamos a realizar nuestra primera aplicación en unos cuantos minutos…

Antes que nada es necesario que instalen el SDK de Android y el de iPhone (si tienes una Mac) esto es bastante facil y el proceso no lo vamos a cubrir en este caso, ya que Titanium Appcelerator tiene un instalador bastante amigable

Basicamente los pasos son los siguientes…


Inicia siempre con Android, recomendado

Una ves que lo tengas listo podemos empezar.

 

¿ Que debo saber para empezar el desarrollo ?

Basicamente que es un metodo y que es una variable, aunque no es necesario aqui te ire explicando que ir haciendo…

 

Conceptos sobre desarrollo móvil en Titanium Appcelerator que debes saber…

Si vienes de desarrollar en un ambiente web, esto te sera facil.

Antes que nada el lienzo maestro se llama Window (ventana) lo cual es comparable con el <body> en una pagina web. Mientras que los <div> seran comparables con “views” (vistas)

Listo, es todo lo que debes saber, ahora empezemos con nuestra primera aplicación, aprenderemos elementos basicos para una aplicacion movil, como son “label” “view” y “window”, tambien veremos como agregar un comportamiento a ciertos botones.

 

Mi primer aplicación movil

 

Antes que nada crearemos un nuevo proyecto…

Esto nos abrira un cuadro de dialogo en donde escogeremos “Titanium Mobile Project”

Seguido de esto, necesitamos llenar los datos de nuestra aplicación, en este caso el nombre sera miPrimerApp, y en el app ID pondremos siempre, com.compañia.nombre-de-la-APP.

y demos FINISH, esto creara una serie de archivos para cada plataforma(cosa que por el momento no nos importa) :D

 

Empecemos a programar nuestra primera App Móvil

  • Debemos abrir el archivo app.js
    • Este archivo tiene código prescrito pero te recomiendo que lo borres y sigas los pasos que nosotros haremos…
    • Lo primero es crear una variable que sera la ventana que vamos a abrir, en esta variable le diremos a Titanium que características básicas va a tener nuestra ventana.

Como puedes ver ahi declare el titulo de la ventana y el color de fondo, despues a la variable win le asigne el metodo open(). Aqui el resultado tanto en Iphone como en Android.

Como puedes ver los resultados son bastantes similares, ahora vamos a ponerle algo a esta ventana, lo clásico un “Hola Mundo

El resultado es el siguiente

Por ultimo veremos una vista, en la cual podemos agregar tanto label como imagenes…

El resultado…

Como puedes ver, es bastante facil hacer este tipo de cosas, asi que hacer la interface grafica es bastante facil, y ademas sirve para ambas plataformas. Por ultimo veremos como agregar imagenes, y una accion a un evento.

En este codigo deben notar el cambio que hice en la variable imagen, convitiendola en in IMAGEVIEW y añadiendo la direccion de la imagen a usar.

Otra nueva implementación es el EventListener asignado a la variable imagen, la cual desencadena el cambio de fuente y texto de la variable textoHola.

El resultado es el siguiente…

¿Que sigue de aqui?

Muy sencillo comenten que tipo de aplicación debemos de hacer y así iremos avanzando con dicha aplicación…


¿ Te Gusto ? Comenta y compartelo!