Artículo Desactualizado, no utilices jQuery Mobile,

más bien usa Ionic Framework! :D

http://slides.com/juandavidnicholls/apps-moviles/

Este artículo esta enfocado en explicar como gracias al framework gratis y de código abierto PhoneGap, el cuál también se conoce como Apache Cordova, logramos hoy en día desarrollar aplicaciones móviles para diversas plataformas como iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada y Symbian mediante las tecnologías HTML, CSS y Javascript. Posteriormente observaremos como integrar el servicio Mobile Services de Windows Azure con nuestras aplicaciones.

• PhoneGap/Cordova

PhoneGap es un producto de código abierto (creado por la empresa nitobi la cual fue adquirida por la empresa Adobe) que fue donado a la Fundación Apache, de ahí que se conoce con el nombre de Cordova. Este producto fue pensado para correr aplicaciones nativas en diversas plataformas con un mismo código fuente.

Una breve introducción: Aplicaciones Empresariales con PhoneGap.

Cada aplicación se ejecuta dentro de un componente WebView en una envoltura de una aplicación nativa y mediante la librería de Javascript puede interactuar con diversas características del dispositivo, gracias a los enlaces que proporciona la API. Ver documentación http://docs.phonegap.com/.

Para compilar nuestras aplicaciones existen diversos medios, entre ellos se destaca el Servicio en la Nube PhoneGap Build el cual hace parte del paquete de servicios Adobe Creative Cloud. Entre otras opciones para compilar por nosotros mismos tenemos Android SDK (ver ejemplo http://www.youtube.com/watch?v=8l80rKwaTeg), Xcode para iOS, BlackBerry WebWorks, Nokia Web Tools, Windows Phone SDK, etc.

PhoneGap Build

Gracias a este Servicio en línea que nos brinda la empresa Adobe podemos compilar nuestros archivos HTML, CSS y Javascript que compone nuestra aplicación. Para realizar esto existen diversas maneras:

• Comprimir nuestros archivos en un ZIP y subirlo manualmente en la página de PhoneGap Build.
• Emplear una herramienta como Dreamweaver, Brackets, entre otras que integre el Servicio de PhoneGap Build.
• Desde la versión 3.0.0 de PhoneGap se puede instalar como un módulo más de Node.js, para crear la estructura de nuestras aplicaciones y compilarlas luego con el Servicio de PhoneGap Build muy fácilmente mediante la línea de comandos http://phonegap.com/install/.

Para acceder a este servicio es necesario obtener una cuenta en https://build.phonegap.com/.

Configurar la aplicación

La configuración más básica de nuestras aplicaciones, si estamos utilizando PhoneGap Build, se puede realizar mediante la misma página, en la configuración de nuestra aplicación. También existe una herramienta para realizar la configuración de nuestra aplicación por si no deseamos y no es necesario realizarla manualmente http://aj-software.com/configap/. En todos los casos se esta generando un archivo config.xml con los datos que nosotros mismos estemos proporcionando, así como los permisos que requerirá nuestra aplicación.

Emuladores

Si deseamos emplear emuladores para ejecutar nuestras aplicaciones ya compiladas en el PC, ver aquí http://www.mobilexweb.com/emulators.

También existe una excelente extensión para Chrome la cual te permite emular desde el navegador tu aplicación sin haberse aún compilado, Apache Ripple. Ver ejemplos con la extensión: http://emulate.phonegap.com/

• Creando nuestra primera aplicación móvil con PhoneGap

Entramos a la página de PhoneGap y procedemos a dar Click en Instalar PhoneGap.

Como observaremos PhoneGap desde la versión 3.0 cambió y ya se puede instalar como un módulo de Node.Js, para poder crear mediante la línea de comandos la estructura de nuestras aplicaciones y posteriormente compilarlas.

Por lo cuál, si no lo tenemos instalado entraremos a la página para descargarlo. El automáticamente reconocerá nuestro Sistema Operativo y procederá a bajar la última versión disponible.

Cuando ya este instalado, procedemos a abrir la consola Node.js command prompt.

Nos ubicaremos en la ruta donde estarán los archivos de nuestra nueva aplicación.

 

Como explican en la página de instalación de PhoneGap, para crear una nueva aplicación procedemos a escribir en la consola el siguiente comando. Donde myapp será el nombre que le quieras dar a la carpeta de tu aplicación (Es el comando más básico que hay,  mi recomendación es ver la documentación en la página de PhoneGap).

 

Con esto ya tendremos los archivos iniciales para trabajar con PhoneGap.

Ahora, nosotros nos ubicaremos en la carpeta www, en donde estarán los archivos que nosotros creemos y editemos, los cuales compondrán nuestra aplicación.

Podemos observar que tenemos una estructura simple para nuestro desarrollo, esta se puede modificar perfectamente pero así como esta por defecto es muy limpia, parecida a la que nos aporta la plantilla Boilerplate. Borramos el html “spec” y la carpeta con el mismo nombre, los cuales son utilizados para realizar pruebas unitarias a nuestro código Javascript mediante el Framework Jasmine.

El contenido ubicado en nuestro archivo index.html es por defecto el que se verá al iniciar nuestra aplicación y así como un Sitio Web, puedes tener múltiples páginas html. El archivo config.xml como se explicó previamente tendrá la configuración de nuestra aplicación, permisos que nosotros necesitemos de la API para acceder a las características del dispositivo. Ver documentación en la página de PhoneGap.

En este ejemplo voy a usar jQuery Mobile, pero no es necesario emplear ningún Framework (mejor opción en cuanto al rendimiento).

 

Además existen muchas otras buenas opciones que se pueden emplear, como:

Ahora nos dirigimos al Index.html en nuestro editor de código preferido.

1. <!DOCTYPE html>
2. <html>
3.     <head>
4.         <meta charset="utf-8" /><!-- Segun el lenguaje -->
5.         <meta name="format-detection" content="telephone=no" /><!-- iOS desactiva la deteccion automatica de posibles numeros de telefono en un documento web-->
6.         <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" /><!-- Configura la visualizacion de la pagina -->
7.         <link rel="stylesheet" type="text/css" href="css/index.css" /><!-- Nuestra hoja de estilos -->
8.         <title>Mi primera Aplicacion</title>
9.     </head>
10.     <body>
11.         <!-- Aqui va el contenido -->
12.         <script type="text/javascript" src="phonegap.js"></script><!-- Al compilar se agregara el Javascript de PhoneGap adecuado a la plataforma -->
13.         <script type="text/javascript" src="js/index.js"></script><!-- Nuestro Javascript -->
14.         <script type="text/javascript">
15.             app.initialize();//Inicializamos los Eventos de nuestra app
16.         </script>
17.     </body>
18. </html>

Procedemos a descargar jQuery Mobile, mi recomendación es no bajar todos los temas que vienen por defecto sino ir a la sección de temas y elegir uno solo para personalizarlo a nuestro gusto.

Procedemos a pegar los archivos en la carpeta “css” de nuestra aplicación, además de seguir el procedimiento indicado en el código html del ejemplo con respecto al css, por lo cual también debemos de bajar el jquery.mobile.structure-1.3.2.min.css. Recordar limpiar el index.css o en su defecto borrarlo.

Ahora descargamos la versión reducida de jQuery Mobile (Excepto si deseas cambiar el javascript, lo cual es poco probable). Aunque mi recomendación es que al terminar de desarrollar tu aplicación, procedas a ejecutar el download builder tool para seleccionar únicamente las características que implementaste y descargar la versión más reducida, esto con el fin de mejorar el rendimiento de la aplicación.

Ahora procedemos a descargar el Javascript a la carpeta “js”, tanto la librería jQuery como la librería jQuery Mobile.

  

Ahora ya tenemos todo listo, es solo empezar a diseñar nuestras páginas, un breve ejemplo.

index.html

1. <!DOCTYPE html>
2. <html>
3. <head>
4.     <!-- Segun el lenguaje -->
5.         <meta charset="utf-8" />
6.     <!-- iOS desactiva la deteccion automatica de posibles numeros de telefono en un documento web-->
7.     <meta name="format-detection" content="telephone=no" />
8.     <!-- Configura la visualizacion de la pagina -->
9.         <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" />
10.     <!-- jQuery Mobile y jQuery -->
11.     <link href="css/myapp.min.css" rel="stylesheet" />
12.     <link href="css/jquery.mobile.structure-1.3.2.min.css" rel="stylesheet" />
13.     <script src="js/jquery-1.9.1.min.js"></script>
14.     <script src="js/jquery.mobile-1.3.2.min.js"></script>
15.     <!-- Nuestra hoja de estilos -->
16.         <link rel="stylesheet" type="text/css" href="css/index.css" />
17.     <title>Mi primera Aplicacion</title>
18. </head>
19. <body>
20.     <!-- Aqui va el contenido -->
21.     <div data-role="page" id="index" data-theme="a">
22.         <header data-role="header" data-position="fixed">
23.             <h1>Nicholls</h1>
24.             <a href="#contact" data-transition="slide" data-role="button">Contactar</a>
25.         </header>
26.         <section data-role="content">
27.             <ul data-role="listview" data-inset="true">
28.                 <li>
29.                     <img src="img/nicholls.jpg" alt="Hola!" />Juan David Nicholls
30.                 </li>
31.             </ul>
32.             <div data-role="collapsible-set">
33.                 <div data-role="collapsible" data-collapsed="false">
34.                     <h2>Extracto</h2>
35.                     <p>
36.                         Desarrollador de Software y Aplicaciones Web. Front-end HTML5, CSS3, Javascript(Jquery), Jquery Mobile, PhoneGap y Back-end ASP.NET , NodeJS
37.                     </p>
38.                 </div>
39.                 <div data-role="collapsible" data-collapsed="true">
40.                     <h2>Experiencia</h2>
41.                     <p>
42.                         Desarrollador de Software en Pacifica, julio de 2012 hasta la actualidad.
43.                     </p>
44.                 </div>
45.             </div>
46.             <div id="contacts" class="ui-grid-a">
47.                 <div class="ui-block-a">
48.                     <a href="#" data-role="button" id="beep">Sonar</a>
49.                 </div>
50.             </div>
51.         </section>
52.         <footer data-role="footer" data-position="fixed">
53.             <h1>2013</h1>
54.         </footer>
55.     </div>
56.     <div data-role="page" id="contact" data-add-back-btn="true">
57.         <div data-role="header" data-position="fixed">
58.             <h1>Nicholls</h1>
59.         </div>
60.         <div data-role="content">
61.             <label for="nombre">Nombre</label>
62.             <input type="text" name="nombre" id="nombre" />
63.             <label for="email">Email</label>
64.             <input type="email" name="email" id="email" />
65.             <label for="asunto">Asunto</label>
66.             <input type="text" name="asunto" id="asunto" />
67.             <label for="message">Mensaje</label>
68.             <textarea id="message" name="message"></textarea>
69.         </div>
70.         <footer data-role="footer" class="ui-bar" data-position="fixed">
71.             <div data-role="controlgroup" data-type="horizontal">
72.                 <a id="sendmessage" href="#" data-icon="check" data-role="button">Aceptar</a>
73.                 <a href="#index" data-icon="delete" data-role="button">Cancelar</a>
74.             </div>
75.         </footer>
76.     </div>
77.     <!-- Al compilar se agregara el Javascript de PhoneGap adecuado a la plataforma -->
78.     <script type="text/javascript" src="phonegap.js"></script>
79.     <!-- Nuestro Javascript -->
80.     <script type="text/javascript" src="js/index.js"></script>
81.     <!-- Aqui estara mas adelante el llamado a la API que nos brindara acceso a nuestros Mobile Services de Windows Azure -->
82.     <script type="text/javascript">
83.         app.initialize();//Inicializamos los Eventos de nuestra app
84.     </script>
85. </body>
86. </html>

Nuestro Javascript.

index.js

1. var app = {
2.     // Application Constructor
3.     initialize: function() {
4.         this.bindEvents();
5.     },
6.     // Bind Event Listeners
7.     bindEvents: function () {       
8.         document.addEventListener('deviceready', this.onDeviceReady, false);       
9.     },
10.     // deviceready Event Handler
11.     onDeviceReady: function () {
12.         navigator.notification.alert("Tu aplicacion a inicializado con exito.", function () {
13.         }, "Bienvenido", "Aceptar");
14.         document.getElementById("beep").addEventListener("click", app.Beep, false);
15.         document.getElementById("sendmessage").addEventListener("click", app.SendMessage, false);
16.     },
17.     Beep: function () {
18.         navigator.notification.beep(1);
19.     },
20.     SendMessage: function () {
21.         if ($("#nombre").val().replace(/ /g, "") == "") {
22.             navigator.notification.alert("Ingrese su Nombre.", function () {
23.             }, "Alerta", "Aceptar");
24.             return;
25.         }
26.         if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test($("#email").val())) {
27.             navigator.notification.alert("Ingrese su Email.", function () {
28.             }, "Alerta", "Aceptar");
29.             return;
30.         }
31.         if ($("#asunto").val().replace(/ /g, "") == "") {
32.             navigator.notification.alert("Ingrese su Asunto.", function () {
33.             }, "Alerta", "Aceptar");
34.             return;
35.         }
36.         if ($("#message").val().replace(/ /g, "") == "") {
37.             navigator.notification.alert("Ingrese su Mensaje.", function () {
38.             }, "Alerta", "Aceptar");
39.             return;
40.         }
41.         //Aqui estara el codigo para conectarnos a nuestro Mobile Service e insertar los datos
42.     }
43. };

Previsualización

 

La página del Contactar guardará los registros con el Servicio de Windos Azure, Mobile Services que explicaré más adelante en este artículo.

Siempre te recomiendo minificar todos tus Javascript antes de compilar tu aplicación. Para esto existe una muy buena herramienta llamada Grunt.js 

La cual te permite realizar muchas tareas importantes como concatenar, reducir, validar, remover código, etc. Esta la explicaré en artículos posteriores.

Antes de compilar nuestras aplicaciones procederemos a configurarlas según la plataforma, en este ejemplo estoy haciendo uso de las notificaciones y probaré en un Android, por lo cual esta es mi configuración:

config.xml

1. <?xml version='1.0' encoding='utf-8'?>
2. <widget id="com.phonegap.nicholls" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
3.   <name>Nicholls</name>
4.   <description>
5.     Esta es mi primera aplicacin.
6.   </description>
7.   <author email="jdnichollsc@hotmail.com" href="http://nicholls.azurewebsites.net/">
8.     Juan David Nicholls
9.   </author>
10.   <feature name="http://api.phonegap.com/1.0/device" />
11.   <feature name="Notification">
12.     <param name="android-package" value="org.apache.cordova.Notification" />
13.   </feature>
14.   <icon src="icon.png" />
15.   <icon gap:density="ldpi" gap:platform="android" src="res/icon/android/icon-36-ldpi.png" />
16.   <icon gap:density="mdpi" gap:platform="android" src="res/icon/android/icon-48-mdpi.png" />
17.   <icon gap:density="hdpi" gap:platform="android" src="res/icon/android/icon-72-hdpi.png" />
18.   <icon gap:density="xhdpi" gap:platform="android" src="res/icon/android/icon-96-xhdpi.png" />
19.   <gap:splash gap:density="ldpi" gap:platform="android" src="res/screen/android/screen-ldpi-portrait.png" />
20.   <gap:splash gap:density="mdpi" gap:platform="android" src="res/screen/android/screen-mdpi-portrait.png" />
21.   <gap:splash gap:density="hdpi" gap:platform="android" src="res/screen/android/screen-hdpi-portrait.png" />
22.   <gap:splash gap:density="xhdpi" gap:platform="android" src="res/screen/android/screen-xhdpi-portrait.png" />
23. </widget>

Para compilar nuestras aplicaciones procedemos a escribir en la consola el siguiente comando. Donde android es el nombre de la plataforma en la que queramos compilar nuestra aplicación. Si no puede compilarla localmente con este comando, buscará compilarla de manera remota con el servicio PhoneGap Build.

 

•  Windows Azure Mobile Services

La verdad no me enfocaré en explicar detalladamente este servicio debido a los excelente artículos que pueden encontrar en el Blog Chalalo Land, por lo cual solo mostraré el procedimiento que seguí:

Ingresamos a nuestro Portal de Windows Azure y procedemos a crear un nuevo Servicio Móvil.

Entramos en la sección de Datos de nuestro Servicio Móvil y procedemos a crear una nueva Tabla.

 

Nos dirigimos al administrador de nuestra Base de Datos.

 

En diseñar Editamos nuestra Tabla y agregamos las columnas que necesitemos.

 

Cerramos Sesión y nos dirigimos de nuevo a nuestro Servicio Móvil. Procedemos a descargar el ejemplo de código para la Plataforma HTML/Javascript.

 

Procedemos a copiar el llamado a la API de Windows Azure Mobile Services que viene en el ejemplo y pegarlo en nuestra aplicación.

También entramos al archivo .js del ejemplo y podemos observar como realizar CRUD a la Tabla de nuestra Base de Datos. Nos copiamos el cliente y en este ejemplo solo realizaré una inserción a nuestra Tabla Messages previamente creada.

 

Ya solo queda compilar nuestra aplicación como lo expliqué previamente y si estamos utilizando el Servicio de PhoneGap Build entramos y descargamos el ejecutable correspondiente a la plataforma que hayamos configurado, en mi caso fue Android por lo cual me baja un .apk y pude ejecutarlo perfectamente en el móvil de un amigo (S4 Mini) :D