Mi primera aplicación móvil

10 Jul

Nos propusimos un nuevo desafío, armar la primera aplicación para celulares de Comunidad Fusa y en lo sucesivo te vamos a contar los pasos de lo que fuimos aprendiendo para lograrlo.

Hola Fusa

El primer release que nos planteamos fue armar una aplicación instalable para Android, iOS y Blacbkerry que al ingresar despliegue el logo de fusa y el mensaje “Hola Fusa”.

Qué valor le vemos a esto?

Aprender a usar PhoneGap, framework open source que permite crear aplicaciones móviles (para cualquier dispositivo)  ya que ofrece un conjunto de APIs de comunicación con los dispositivos. Básicamente, gracias a este framework no tenemos que preocuparnos por la implementación particular de cada dispositivo móvil, sino que armamos nuestra aplicación web usando HTML, Javascript y CSS.

Construir nuestra primer aplicación open source, vamos a dejar el código en nuestro github. Esto nos representa una nueva responsabilidad, desarrollar pensando que para otros desarrolladores (del mundo uníos ;-D) esto puede ser útil y pueden mejorarlo, sacar sus propias versiones, y criticarlo libremente.

Cómo empezamos?

Lo primero que nos propusimos fue construir la estructura del proyecto, y para esta primera versión,  siguiendo la documentación de PhoneGap, lo que hicimos fue hacer un fork del proyecto phonegap-start

Después, como nos gusta el IDE Netbeans 7.3, decidimos realizar una clonación del proyecto github en nuestro entorno local siguiendo estos pasos:

  1. En Netbeans 7.3, ir a Team –> Git –> Clone.
  2. Ahí completamos la info de conexión y hacemos click en Next.
    1. Repository URL: https://github.com/comunidadfusa/phonegap-start.git
    2. User: comunidadfusa
    3. Password: ***** (la clave no es open source :P)
  3. Elegimos el branch master* y Next.
  4. Completamos:
    1. Parent Directory: D:\Proyectos (directorio raíz donde tenemos los proyectos).
    2. Clone Name: hola-fusa (nombre del proyecto local).
    3. Checkout Branch: master* (el único hasta el momento).
    4. Remote Name: origin (lo dejamos como estaba por defecto)
    5. Scan for Netbeans Projects after Clone: chequeado (así scanea los fuentes del proyecto después del checkout).
  5. Al hacer click en Finish, Netbeans se va a conectar con el respositorio GitHub y comenzará a clonar el proyecto en nuestra PC.
  6. Al finalizar el clonado, hacemos click en Create Project… para crear nuestro proyecto Netbeans.
  7. Ahí elegimos HTML/Javascript –> HTML 5 Application with Existing Sources y hacemos click en Next.
  8. Elegimos como Site root: D:\Proyectos\hola-fusa (ubicación donde se realizó el checkout) y hacemos click en Open. Se van a autocompletar los campos Project Name y Project Directory.
  9. Hacemos click en Finish y vamos a ver el nuevo proyecto en nuestra lista de proyectos.

A construir

Ya tenemos la estructura del proyecto para utilizar en PhoneGap y, mejor aún, ya está integrado con Netbeans. Así que vamos a empezar a configuar la aplicación.

config.xml

Comenzamos con la configuración de la aplicación, mas precisamente el archivo config.xml, siguiendo la documentación de uso del config.xml recomendada. Definimos la info requerida de la aplicación de esta forma:


<?xml version="1.0" encoding="UTF-8"?>

<!-- config.xml reference: https://build.phonegap.com/docs/config-xml -->
<widget xmlns     = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id        = "com.comunidadfusa.hola-fusa"
version   = "1.0.0">

<name>Hola Fusa</name>

<description>
Hola Fusa es la primera aplicación para dispositivos móviles desarrollada por Comunidad Fusa.
</description>

<author href="http://comunidadfusa.com" email="info@comunidadfusa.com">
ComunidadFusa.com
</author>

Los tags <feature>, <preference> y <access> no los cambiamos en principio.

Al continuar analizando notamos que los tags <icon> y <gap:splash> hacían referencia a recursos (iconos e imágenes para los diferentes dispositivos en distintas resoluciones), entonces cambiamos los archivos existentes por imágenes de nuestra aplicación (respetando los nombres, resoluciones y extensiones) en los dispositivos Android, iOS y Blackberry.

 index.html

Terminamos con el archivo config.xml y los recursos de nuestra aplicación reemplazados, así que vamos a ajustar el index.html, que va a ser la página de inicio de nuestra aplicación.

Simplemente modificamos los valores del <title>, <h1> y los <p> de eventos por los datos de nuestra aplicación.

<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

	<link href="css/index.css" rel="stylesheet" type="text/css" />Hola Fusa
<div class="app">
<h1>Hola Fusa!</h1>
<div class="blink" id="deviceready">
<p class="event listening">Conectando al dispositivo</p>
<p class="event received">Dispositivo listo!</p>

</div>
</div>
<script type="text/javascript" src="phonegap.js"></script><script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">// <!&#91;CDATA&#91;
app.initialize();

// &#93;&#93;></script>

Preparen, apunten… compartan

Ya tenemos todo listo para construir la primera versión de hola-fusa, así que vamos a comitear los cambios haciendo click derecho sobre el nombre del proyecto –> Git –>Commit…

Se visualizarán todos los archivos modificados y 2 archivos creados por Netbeans project.properties y project.xml que no debemos comitear. Con lo cual, primero debemos hacer click derecho sobre ambos (1 a la vez) y seleccionar Exclude from commit (quedarán los nombres tachados).

Luego escribimos un Commit Message y hacemos click en el botón Commit.

Por último nos queda contribuir los cambios que hicimos en nuestro repositorio local con el respositorio público de GitHub.

Para esto hacemos click derecho sobre el nombre del proyecto en Netbeans –> Git –> Remote –> Push, se abrirá un cuadro de diálogo. En la primera ventana dejamos seleccionada la opción Selected Configured Git Repository Location (el respositorio de donde hicimos checkout y al que vamos a contribuir). Click en Next.

En el segundo paso dejamos seleccionado el Branch local master -> master [U], o sea, vamos a contribuir desde nuestro master local. Click en Next y por último dejamos seleccionado master -> origin/master [U] como Remote branches, del repositorio público y hacemos click en Finish.

Luego de unos minutos, nuestro código quedará público en GitHub.

La magia de PhoneGap

Pasemos a la parte mas novedosa de este desarrollo, construir los paquetes de instalación para Android, Blackberry e iOS.

1) Ingresamos en build.phonegap.com y al ver la siguientes pantalla  seleccionamos la pestaña “open-source”

Capture1

 

2) Ingresamos la url de nuestro repositorio GitHub, en nuestro caso https://github.com/comunidadfusa/phonegap-start.git y automáticamente PhoneGap revisará el código de la aplicación.

 

Capture2

3) Observamos que la información sea correcta y hacemos click en el botón “Ready to build”, automáticamente comenzará la creación de los paquetes.

 

Capture3

4) Durante el procesamiento veremos un ícono por cada dispositivo móvil representando el estado de creación del paquete: gris, en proceso; azul, finalizado satisfactoriamente; rojo, ocurrió un error.

Capture4

5) Al finalizar con todas las aplicaciones podremos descargar los paquetes construídos correctamente y ver los mensajes de error que arrojaron los dispositivos, en nuestro caso Blacberry e iOS.

Ya casi lo logramos

Como ya comentamos anteriormente, nuestra misión estará cumplida cuando Hola Fusa está instalada y funcionando en lo dispositivos Android, Blackberry y iPhone (iOS), así que, como diría Jack, vamos por partes…

Android

Si tuviera que clasificar la instalación de la aplicación en un celu con Android entre Easy, Medium y Hard, elegiría For dummies, jua!

Esto fue muuuy simple, descargamos el archivo .apk generado por PhoneGap, conectamos el celu a nuestra PC, copiamos el archivo a alguna carpeta, lo ejecutamos desde el celu, instalamos y voilá! Hola Fusa instalado y funcionando! (1/3)

Blackberry

Como pudieron observas, al momento de generar el paquete para Blackberry obtuvimos el mensaje “Invalid CSK password: signing not verified…” así que tuvimos que remar un poco mas que con Android, ya que Blackberry exige unos códigos de registro (Blackberry Signing keys).

Ingresamos en www.blackberry.com/SignedKeys/codesigning.html y seleccionamos la opción “For BlackBerry OS 7.x and Lower” y completamos First name, Last name, Company, Email, Country y PIN (o sea que quien complete este formulario debe tener un Blackberry, ya que el PIN es el código identificador del mismo).

Recibimos un mail como acuse de recibo de nuestra solicitud y un aviso de que dentro de las 2hs. recibiremos las keys.

Pasada la hora y media recibimos 3 emails de BlackBerry con 1 key (archivo .csi) en cada uno y según los pasos indicados en Config Signing Blackberry procedimos a bajar e instalar el BlackBerry WebWorks SDK.

Copiamos los archivos .csi a la carpeta c:\Program Files (x86)\Research In Motion\BlackBerry WebWorks SDK <version>\bin\ (en Win7), nos ubicamos en esa carpeta y ejecutamos el comando (por cada archivo csi).


java -jar SignatureTool.jar <nombre-archivo>.csi

Como era la primera vez que lo hacíamos, tuvimos que crear una clave privada. Entonces ingresamos una clave (de al menos 8 caracteres) y luego se nos solicitó el ingreso del PIN con el cual hicimos el pedido de las keys.

Después registramos los siguientes 2 archivos csi ingresando la nueva clave generada y el mismo PIN.

Por último hicimos un backup de los archivos sigtool.csk y sigtool.db (ubicados en c:\Program Files (x86)\Research In Motion\BlackBerry WebWorks SDK <version>\bin\) copiandolos en una carpeta nueva llamada “bk”.

Ahora si….

Una vez generados los certificados (archivos sigtool.csk y sigtool.db) pasamos a configurar nuestra aplicación en PhoneGap. Para eso volvemos a nuestra página de perfil donde nos figura el mensaje de error.

Capture

Hacemos click en “No key selected” en la aplicación Blacbkerry y ahí nos aparecerán los campos Title, un nombre que identifique nuestra key; csk file, buscamos el archivo sigtool.csk previamente generado; y db file, buscamos el archivo sigtool.db en la misma ubicación. Luego hacemos click en submit key y si todo es correcto nos aparecerá un candadito amarillo el cual debemos hacer click para desbloquear el certificado.

Capture2

Ingresamos la clave con la que generamos nuestras keys y presinamos submit key, si todo es correcto desaparecerá el candadito amarillo.

Por último hicimos click en el botón Rebuild y voilá, nuestra aplicación fue generada correctamente para BlackBerry (archivo OTA descargable).

Para instalarlo, PhoneGap nos habilita una página pública (en nuestro caso build.phonegap.com/apps/462427/install), ingresamos con el navegador de BlackBerry y seleccionamos Descargar para que comience la instalación. Hola Fusa instalado y funcionando en BB! (2/3)

 

iOS

Arrancamos dispuestos a generar el paquete para iOS pero al seguir con el tutorial de PhoneGap nos encontramos que para desarrollar aplicaciones para iPhone, iPad y Mac es necesario contar con una Mac (cosa que no está en nuestros planes tener en el corto plazo) y enrolarnos como desarrolladores Mac pagando la módica suma de u$s99 por año (mas info en el sitio oficial de Mac).

Así que por el momento no tendremos Hola Fusa para iOS (2/2)

 

La yapa

Como ya habrán notado, nuestra aplicación para Android quedó sin certificados, con lo cual solo estará disponible desde nuestro sitio de PhoneGap y como queremos que también lo esté en el Android Market vamos a generar los correspondientes.

Seguimos los pasos explicados en el sitio para Desarrolladores Android donde se detalla la diferencia entre los certificados de Debug y los de Release. En nuestro caso vamos a crear uno Release, ya que son los que necesitamos en PhoneGap.

Como pre requisito necesitamos tener instalado el JDK de Java y verificar que en la carpeta donde lo tenemos instalado, dentro de bin tengamos los ejecutables keytool.exe y jarsigner.exe (los cuales necesitamos para genera las claves requeridas por Android).

Entonces nos ubicamos en la carpeta <path de jdk>\bin y ejecutamos


keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

Donde debemos cambiar my-release-key.keystore, por el nombre que queremos que tenga el archivo; y el alias_name, por un nombre que recordemos.

Una vez que lo ejecutemos, nos va a solicitar una serie de información: clave de almacenamiento (recordarla), nombre, organización, ciudad, provincia, código de país, y por último la clave de encriptación (se puede ingresar la misma que la de almacenamiento).

Al finalizar el proceso contaremos con nuestro archivo .keystore, el cual nos conviene guardarlo en un lugar seguro ya que con el vamos a poder firmar nuestras futuras aplicaciones para Android.

Entonces ingresamos en nuestro panel de PhoneGap y hacemos click en Edit Account. Ahí vamos a la pestaña Signing Keys y en la fila de Android hacemos click en el botón “add a key…”

Capture

Ingresamos Title, un nombre representativo para nosotros; Alias, el ingresado en la ejecución de keytool; y buscamos el archivo .keystore en la ubicación donde lo hayamos guardado.

Si todo se realizó correctamente, aparecerá un candadito amarillo a la derecha de Android, y al hacer click sobre el mismo podremos desbloquearlo ingresando la clave de encriptación que seleccionamos durante el procesamiento del keytool.

Por último volvemos a nuestro panel de PhoneGap y hacemos click en el nombre de nuestro proyecto, eso abrirá la página de Builds. Ahí ubicamos la aplicación Android y en la lista que dice “No Key selected” seleccionamos la que creamos recientemente y ejecutamos un último Rebuild de la apk.

Capture

Esto es to to todo amigos (por ahora…)

Esperamos que puedan construir sus aplicaciones móviles fácilmente y compartan con nosotros sus experiencias.

De paso, los invito a conocer la primera aplicación móvil de Fusa (Hola Fusa v1.0 funciona en Android y Blackberry, en tu cara iPhone :P).

Sientanse libres de darnos su feedback!

 

3 Respuestas para “Mi primera aplicación móvil”