All posts by Dan Tamas

Un vistazo al examen de certificación App Developer de Titanium- TCAD

Recientemente me Certifiqué como Desarrollador de Aplicaciones Titanium (Titanium Certified Application Developer – TCAD) y pensé en darles mi opinión acerca del examen a los que deseen tomarlo.

El examen cubre las áreas que existen en el proceso de desarrollo de una aplicación con Titanium Appcelerator:

  • Preguntas de código,
  • Contactos y APIs Sociales,
  • Desarrollo Multi-Platadorma en Titanium,
  • Contenido Web Integrado,
  • Media y Sistema de Archivos,
  • Uso de Servicios de Localización,
  • Trabajo con Datos Locales,
  • Trabajo con Datos Remotos,
  • Ahora que eres un Desarrollador de Aplicaciones Nativas,
  • Recap “Zero To App”,
  • Fundamentos de Interfaz de Usuarios
  • Entrega y Distribución

Para pasar este examen vas a necesitar por supuesto experiencia pero el equipo de Appcelerator ha colocado en linea en Wiki los laboratorios para cada parte del examen. Les sugiero que le den una buena leída, incluso aquellos puntos que quizás ya conozcas porque podrías encontrar cosas realmente útiles.

Algunos de los cursos tienen videos y enlaces a proyectos descargables.

Los proyectos son un buen punto de inicio para aprender cómo hacer las cosas “correctamente” y los mismos explican muy bien algunos principios para aplicar en una App de Appcelerator.

No dejes que la palabra “examen” te asuste porque realmente no es difícil – algunas preguntas son de sentido común.

A por el!

Siete días con Titanium – día 7 – orientación y acelerómetro

La mayoría de los dispositivos de hoy en día vienen con un acelerómetro que detecta la orientación del dispositivo o los movimientos que hace el usuario.

Titanium expone esta funcionalidad a través de sus APIs así que tomemos ventajas de eso 🙂

La orientación

El dispositivo puede reportar 7 estados de orientación, los cuales son definidos en Titanium a continuación:

  • Ti.UI.UNKNOWN – la app no puede detectar la posición
  • Ti.UI.PORTRAIT
  • Ti.UI.UPSIDE_PORTRAIT
  • Ti.UI.LANDSCAPE_LEFT
  • Ti.UI.LANDSCAPE_RIGHT
  • Ti.UI.FACE_DOWN – como reposando en una mesa con la pantalla hacia abajo
  • Ti.UI.FACE_UP – como reposando en una mesa con la pantalla hacia arriba

Aunque tenemos todas estas constantes definidas, hay situaciones en las que quizás no se encuentren disponibles: en iOs cuando el usuario bloquea la orientación, el dispositivo reportará dicha orientación sin importar cómo sea sostenido el dispositivo. En Android, muchos dispositivos pueden detectar sólo las orientaciones PORTRAIT y LANDSCAPE_LEFT.

Desde la versión 1.7.2 del SDK el API de orientación cambió y es establecido por ventana (o actividad). Puedes hacerlo utilimzando la propiedad orientationModes que acepta un arreglo con la orientación permitida para esa ventana. Mira este post en el Blog de Appcelerator.

win.orientationModes = [Ti.UI.PORTRAIT, Ti.UI.LANDSCAPE_RIGHT];

Existe también un evento que dispara los cambios de orientación permitiéndote hacer los cambios que puedas necesitar (adaptar la interfaz de usuario a la nueva orientación por ejemplo.)

Ti.Gesture.addEventListener('orientationchange',function(e) {
    alert(e.orientation);
});

La alerta mostrará un número entre 1 y 7 debido a que las constantes definidas arriba en este artículo son de tipo INT. Una buena práctica es comparar la orientación reportada por el evento con la constante y no directamente con el número. En caso de que algo cambie en el futuro, esto te asegurará que el código seguirá funcionando.

Puedes encontrar más acerca de esto en las páginas de documentación para Titanium.Gesture

El acelerómetro

El acelerómetro es una pieza de hardware que te dará la posición actual del dispositivo en coordenadas 3D (vector x, y, z). Esto te permite por ejemplo controlar los movimientos de un elemento en la pantalla.

Para obtener este vector, todo lo que tienes que hacer es capturar la actualización del evento Titanium.Accelerometer API. Esto retornará el vector del cual estamos hablando.

Ti.Accelerometer.addEventListener('update', function(e) {
    lbl.text = 'x: ' + e.x + 'y:' + e.y + 'z:' + e.z;
});

Nuevamente, es una buena práctica eliminar el evento cuando no lo necesitemos para ahorrar algunos ciclos de CPU.

Eso es todo para el día 7. Code strong y nos vemos en Mobile con Galicia el 9 de Diciembre.

Hackathon Titanium Appcelerator Spain 2011

Hace unos días escribí este post para la Comunidad de Titanium Appcelerator en Español y quiero copiarlo aquí para los que ya no se enteraron de nuestra idea.

Estaba pensando en hacer un pequeño hackathon donde podríamos poner en marcha un proyecto a elegir para aprender cosas nuevas y compartir experiencia. Lo ideal sería que la gente que venga tuviera por lo menos “algo” de experiencia en trabajar con Titanium para que el evento sea un intercambio de ideas y para que cada uno aprenda algo nuevo.

Como es sólo es una idea y depende si la gente quiere participar todavía no tengo muy claro como hacerlo y cuando. Propongo que cada uno que quiere participar deje un comentario con una idea de app que se podría hacer en una noche. Al final hacemos una encuesta y establecemos el tema. Igual con la fecha.

Como no tenemos patrocinadores, para ahorrar un poco, si el número de los participantes no pasa de 6-7 estaba pensando como lugar el salón de mi casa – la tengo en un entorno natural muy bonito a 35km de Oviedo 🙂 . Lo que si hay que pagar sería el transporte desde vuestra casa hasta Oviedo, una noche en una casa rural o hotel y claro la comida en un restaurante. Desde y hasta Oviedo me encargo yo del transporte.

¿Qué os parece la idea?

Espero sus comentarios en la página Hackathon Titanium de TitaniumES.

Tutorial Avanzado de Titanium – Bonjour Networking

Titanium Appceletaror Mobile ha implementado el protocolo de redes Bonjour para iOs (o ZeroConf si lo prefieres) que te permite conectarte a otro dispositivo que se encuentre en la misma red.

Antes de comenzar con la parte aburrida – quiero decir código – veamos un vídeo con una pequeña demostración que nos muestra a 3 dispositivos jugando juntos 🙂

Trabajando en Redes con Titanium Mobile en iOs

Me gustaría mencionar que el iPod es de segunda generación – por lo tanto menos capaz (los retrasos son visibles en el vídeo) y de alguna manera, algunas veces parece perder paquetes. Probé la misma aplicación con un iPad en vez de un iPod y todo funcionó bien.

Bonjour

Basandome en el código que se consigue en KitchenSink he creado una pequeña función que crea la conexión por nosotros y nos retorna un objeto que te permite iniciarlo, cerrarlo y escribir en el socket.

Bonjour es un poco extraño para entender por aquellos con menos experiencia pero en resumen, la cosa es así:

  • Necesitamos un socket en modo lectura-escritura que será usado por localService para publicar su presencia.
  • Cada localService tiene que tener su propio y único nombre para poder identificarse en la red.

Aparte de esto, necesitamos un serviceBrowser para encontrar a los demás dispositivos alrededor (que hayan publicado su presencia por supuesto).

Como todo funciona asíncronamente, tendremos que confiar en los eventos para capturar los datos enviados por alguien o los cambios en el número de dispositivos conectados.

El serviceBrowser tiene el evento updatedServices donde podemos capturar los servicios publicados. En esta función intentaremos capturar el evento de lectura de cada servicio que es el que nos dice qué datos son enviados por la red.

Advertencia: Cierra la conexión de red en el momento en que no la necesites más.

La Función de Conexión de Red

La función que he creado se encarga de esto, de manera que tu solo tienes que usarla como se encuentra el ejemplo debajo:

Titanium.include('bj.js');
 
var connection = bjnet('my_unique_name', function(data){
	var json_data = JSON.parse(data);
	//do something with this data;
});
 
connection.start();

En otro punto de tu app, donde quieras enviar el mensaje, solo tienes que hacer esto:

	connection.write('my_message');

Como dije antes, no olvides limpiar todo:

win.addEventListener('close', function(e) {
	connection.stop();
});

Que sucede en el demo?

El ejemplo en el video es bastante sencillo. Dependiendo de que bola toques (roja, verde o azul) creas una nueva conexión con ese nombre y la inicias. En este momento cualquier mensaje proveniente de la red es parseado en JSON y una pequeña bola es creada con las coordenadas y color específico.

En tu turno, cuando tocas la pantalla, envías tus coordenadas y color por la red para que los demás dispositivos sepan que dibujar. Cada mensaje es un Objeto JSON expreso en texto como el que sigue:

	{coords:{x:100,y:200},player:{name:'red', color:'#f00'}}

Como nota adicional, el demo usa cero imágenes. Ninguna. Todo es nativo y planeo un futuro tutorial sobre cómo hacer esto. 🙂

El código

El código está en Github Github y puedes descargarlo desde aquí.

Todo se encuentra bajo licencia MIT pero me gustaría escuchar lo que tengan que decir.

Siete días con Titanium – día 6 – animaciones y transformaciones

Casi cualquier elemento de la interfaz de usuario puede ser animado y transformado, permitiéndote añadir a tu aplicación ciertas mejoras visuales o simplemente aprovechar las ventajas de los elementos predefinidos y darles un nuevo rol. Para aquellos familiarizados con las animaciones CSS3 esto se les hará fácil porque los conceptos son prácticamente los mismos.

Animaciones

Está de más decir que una animación cambiará uno o más propiedades de la forma de un elemento del actual estado a otro (establecido por nosotros) en un período de tiempo.

var my_view =  Titanium.UI.createView({
    backgroundColor:'#f00',
    height:20
});
my_view.animate({height:100});

El código de arriba animará el alto de la forma My_view de 20 a 100.

Puedes complicar las cosas más al añadirle más propiedades que animar (como el fondo, color, opacidad, etc), una duración (que tiene que ser en ms) y una curva (como ease-out o lineal, etc)

Algunos ejemplos

var view = Titanium.UI.createView({
	width:100,
	height:20,
	backgroundColor:'#f00'
});
 
win.add(view);
 
view.animate({
	height:300, 
	backgroundColor:'#00f', 
	duration:3000, 
	curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT
});

Si necesitas hacer una animación para hacer volver los elementos a su estado original y repetirlo varias veces, hay dos propiedades que podrían interesarte: repeat y autoreverse.

El código siguiente hará que la vista “pulse” 3 veces.

var view = Titanium.UI.createView({
	width:100,
	height:100,
	backgroundColor:'#f00'
});
 
win.add(view);
 
view.animate({
	height:130,
	width:130,
	repeat:3,
	autoreverse:true,
	curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT
});

Las animaciones tienen 2 eventos: start (iniciar) y complete (completo). El evento complete es muy útil porque podemos encadenar más animaciones, una detrás de la otra, o iniciar algunas otras acciones cuando la actual finalice.

Transformaciones

Similar a las transformaciones CSS3, en Titanium puedes usar transformaciones en 2D o 3D.

Básicamente puedes crear una matriz 2D o 3D para la transformación o usar los “atajos” predeterminados – (como escalar “scale” o rotar “rotate“) y pasar esta transformación al objeto que estás creando o a la animación.

Un ejemplo de transformaciones

var tr_start = Titanium.UI.create2DMatrix();
tr_start = tr_start.rotate(30);
 
var tr_end = Titanium.UI.create2DMatrix();
tr_end = tr_end.rotate(-30);
tr_end = tr_end.scale(2);
 
var view = Titanium.UI.createView({
	width:100,
	height:100,
	transform:tr_start,
	backgroundColor:'#f00',
});
 
win.add(view);
 
view.animate({
	transform:tr_end,
	repeat:3,
	autoreverse:true,
	duration:500,
	curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT
});

Los mejores recursos para ver cómo todo funciona son los ejemplos provistos por el equipo de Appceletaror en el KitchenSink:http://bit.ly/eiow0B

Estas animaciones y transformaciones no son apropiadas para un uso intenso (como juegos) pero pueden ser utilizadas exitosamente para mejorar la apariencia de las apps – y con esto, la experiencia del usuario.

Como siempre, espero sus preguntas, sugerencias y lo que se les ocurra 🙂