Capítulo 1: Concepción de la aplicación

1.1 Concepción de la aplicación

La mayor parte del tiempo cuando comienzo a explorar la idea de construir una webapp, realizo unos bocetos de como me gustaría que fuera la interfaz de usuario, pues ello me da muchas ideas al momento de incorporarle nuevas funcionalidades a la misma. Para ello me auxilio de unas hojas que contienen varias formas rectangulares como si fueran las pantallas de un teléfono (sí, todo el tiempo las ideas no me vienen con una PC delante, así que recurrí a la imaginación).

Marcos para bocetos de prototipos de pantallas

En dichas hojas simplemente pinto como me gustaría que quedaran las pantallas de la aplicación. De esta manera las interfaces de usuario de la webapp memo fueron previstas:

Prototipos de pantalla de la aplicación memo

Aunque también es muy cierto que muchas veces la interfaz de usuario termina siendo muy diferente a la idea original.

1.1.1 Prototipo para tablets

Con la nueva versión de la plataforma, la misma aplicación que se desarrolla para un teléfono con Firefox OS, puede funcionar en un tablet del mismo sistema operativo, de esta manera debemos entonces tener en cuenta también las pantallas de las tabletas que son más grandes y por lo general suelen dividirse en 2.

Prototipos de pantallas para tablet

Prototipos de pantallas para tablet 2

1.2 Creando la aplicación

La aplicación a desarrollar es muy simple, una Memo para tomar notas. La misma está compuesta por 2 pantallas, una para mostrar el listado de los memos y otra donde podremos crear, editar o borrar los mismos. Lo primero que haremos será crear el skeleton de la aplicación llamada memo. Para ello nos paramos en el directorio raíz de la plataforma y tecleamos por consola:

Como se puede observar al comando create-application se le pasan 3 parámetros:

• -n: el nombre de la aplicación,
•  -o: la ruta donde se creará la aplicación
• -t: el tipo de aplicación a crear

En este caso el tipo de aplicación es multi-device, debido a que lo mismo se podrá instalar en el teléfono como en el tablet. Una vez creado el skeleton, el siguiente paso es generarlo para pre-compilar las clases y dejarlas listas para futuro desarrollo de otras aplicaciones, para ello nos vamos hasta el directorio raíz de la aplicación creada y tecleamos en la consola:

1.2.1 Tipo de dispositivo

Primeramente la interfaz por línea de comandos nos preguntará para que tipo de dispositivo deseamos visualizar la aplicación cuando levante el simulador. Los diferentes tipos son: mobile, tablet, watch. En caso de que el nombre del dispositivo sea incorrecto, nos lo hará saber mostrándonos un listado con los posibles nombres.

NOTA: En el caso de las aplicaciones multi-dispositivo, siempre se hará esta pregunta.

Para la primera visualización utilizaremos interfaz de dispositivo móvil, escribimos mobile y damos enter. Quizás demore un poquito pues esto pre-compila todas las clases de la plataforma. Una vez que termine la generación se nos mostrarán 2 ventanas, el simulador y la consola de errores.

Generación de la aplicación: dispositivo móvil

Para probar la misma para dispositivos tablet, en el tipo de aplicación ponemos: tablet.

Generación de la aplicación: dispositivo tablet

De esta manera la aplicación está lista para comenzar a ser desarrollada. Por lo general la aplicación se encuentra de última en el homescreen del simulador y su ícono es el logo de CRIAX. El skeleton de la versión móvil, posee 2 páginas, la versión para tablets posee 3.

Aplicación: página 1

Aplicación: páginas

Hasta aquí este primer capítulo bien sencillo, para que vayan llevando una idea de como se crean las aplicaciones con la plataforma y puedan ir jugando con el generador de las mismas, además de ir mirando los skeleton de cada tipo de webapp que puede ser construida, espero sus opiniones.