35. PhoneGap: introducción

PhoneGap

Es un "framework" para la creación de aplicaciones móvil, actualmente desarrollado por Adobe.

Permite la creación de aplicaciones móviles multiplataforma a través de HTML, CSS y JavaScript.

A parte, dependiendo de la plataforma para la que queramos crear la aplicación, tendremos que suministrarle una API u otra. Por ejemplo, si queremos que la aplicación funcione en dispositivos Android, será necesario tener instalados las SDKs correspondientes en el sistema operativo desde donde vamos a construir la aplicación móvil.

Apache Cordova

El "framework" PhoneGap es en realidad una distribución de otro software llamado Apache Cordova, es decir PhoneGap está basado en Apache Cordova.

Es decir, PhoneGap toma como base Cordova, de hecho cuando ejecutamos comandos de PhoneGap, estamos realidad usando comandos de Cordova.

En cualquier caso ambos "software" son de código abierto y gratuitos.

La diferencia está en que PhoneGap provee de un servicios de compilación de las aplicaciones, que en algunos casos son de pago, y en otros casos gratuitos.

Para empezar a programar con PhoneGap

Los pasos para empezar a trabajar con PhoneGap están descritos en la web oficial: https://phonegap.com/, concretamente hay que pulsar en "Start now". En cualquier caso vamos a describir los pasos a continuación.

Para empezar a programar con PhoneGap necesitaremos desactivar los posibles firewall y antivirus que tenga instalado nuestro sistema operativo, ahora veremos porque razón.

Lo segundo es descargarnos en nuestro dispositivo la aplicación de escritorio (Desktop App) de PhoneGap que podremos encontrar en la sección "Products" de la barra de navegación de la página principal. Este es el enlace: https://phonegap.com/products/

Tras intalar la aplicación, la abrimos y veremos lo siguiente:

En realidad, esta aplicación es un servidor web que apunta al directorio donde tenemos nuestro codigo HTML, CSS y JavaScript, del mismo modo que hacen otro servidores web integrados como XAMPP. Veamoslo en funcionamiento: el siguiente paso es crear un nuevo proyecto PhoneGap, para ello pulsamos sobre el boton "+" que aparece en el panel izquierdo, y seleccionamos crear un proyecto "Hello World":

En el siguiente paso aparecerá esto:

En este paso, eligiremos el directorio de nuestro sistema de archivos donde queremos que se instalen los archivos del nuevo proyecto. La ruta que aparece por defecto (el directorio de nuestro usuario) puede ser un buen lugar, y en el siguiente campo del formulario, establecemos el nombre de nuestro proyeto, por ejemplo "MiApp". El tercer campo es opcional: permite establecer el identificador único que la aplicación debe tener en "Google Play Store" (Android) o en "Apple Store" (iOS).

Cada proyecto lleva asociados una serie de archivos que se generan al crear el proyecto. Para visualizar esos archivos podemos clicar sobre el enlace que aparece en la parte superior donde dice "C:\users\tu_usuario\MiApp". Entre los archivos generados, veremos una carpeta que se llama "www". Si pinchamos sobre la carpeta encontraremos las siguientes carpetas: "css", "img", "js",etc, y además un archivo que se llama "index.html".

En la parte inferior de la interfaz anterior hay una franja de color verde intenso, que contiene una linea que dice "Server is running on http://192.168.0.13:3000". Si clicamos sobre esa URL o vamos al navegador y escribimos en la barra de direcciones esa dirección, tendrá que aparecer esto:

Veamos que representa la URL sobre la que acabamos de clicar: dicha URL contiene una dirección IP. Dicha IP es la asignada a nuestro ordenador en la red local a la que esta conectados, probablemente a través del un "router". En la mayoría de nuestras casas o lugares de trabajo, a los dispositivos conectados a la red local se les asigna una IP que comienza por "192.168". A continuación, y separado por dos puntos (:), aparece el número (3000) del puerto sobre el que está corriendo el servidor web que "monta" la "Desktop App". Podemos acceder igualmente a dicho servidor a través de la URL "http://localhost:3000" o "http://127.0.0.1:3000". En estas dos ultimas URLs, tanto la palabra "localhost" como la IP "127.0.0.1" representa a nuestro equipo, cuando no está conectado a una red local y no lleve asignada una IP del estilo "192.168.".

Ahora probamos a abrir, el documento "index.html" que hemos mencionado antes, y echamos un vistazo a su código. Veremos que el código de ese index.html coincide con el contenido que se acaba de mostrar en el navegador. Para combrobarlo, buscamos un texto donde ponga "PHONEGAP" y lo cambiamos por "HOLA PHONEGAP". A continuación refrescamos la página anterior y comprobamos que junto al robot aparece escrito "HOLA PHONEGAP".

Tras instalar esta aplicación, vamos a instarla en nuestro dispositivo, la "Developer Mobile App", desde el Google Play Store (si el sistema operativo de nuestro dispositivo móvil es Android) de nuestro dispositivo móvil. Tras instalarla, debería de aparecer la siguiente interfaz de usario:

En dicha interfaz de usuario, aparece una casilla para que escribamos la IP asociada al servidor web que se ha "montado" al instalar la aplicación "Desktop App". En este tutorial, la IP que se ha asignado al servidor web es "192.168.0.13", así que pondremos dicha IP en la casilla del la interfaz del usuario de la "Developer Mobile App". A continuación pulsamos "CONNECT" y pasados unos 10 segundos debería de aparecer la interfaz de usuario que hemos visto anteriormente en el navegador, es decir la interfaz del nuestro proyecto "Hello world" que acabamos de crear. Para que esta última acción funcione, es necesario también que nuestro dispositivo móvil esté conectado a través de WIFI a la misma red local que lo está el ordenador donde hemos intalado el servidor web.

En realidad, lo que estamos viendo en estos momentos en nuestro dispositivo móvil, no es la "app" móvil, esto es tan solo el resultado de enviar una petición al servidor web "montado" en "Desktop App". Es decir, la aplicación que acabamos de instalar en nuestro dispositivo móvil en en realidad una especie de navegador web.

Compilar el proyecto PhoneGap

Una vez que hemos creado el proyecto PhoneGap y lo hemos visualizado en el navegador y el dispositivo móvil, es hora de crear la aplicación para dispositivos móviles propiamente dicha, que podremos ejecutar en nuestro dispositivo físico o en un emulador. Es algo que vamos a hacer desde la linea de comandos de Windows (Simbolo del sistema).

Para ello, deberemos de instalar el "software" NodeJS que podemos encontrar en su web oficial http://www.nodejs.org. Una vez instalado NodeJS, reiniciamos Windows, y a continuación ejecutamos el "Simbolo del sistema" como "Administradores del sistema", y escribimos "npm -v". Si tras unos segundos aparece un número de versión, quiere decir que hemos instalado correctamente NodeJS.

El siguiente paso es instalar Cordova Avapache a través del comando "npm". Para ello escribimos en el "Simbolo del sistema" esto: "npm -g install cordova" y pulsamos "enter". A continuación, se debería de instalar Cordova.

Si Apache Cordova se ha instalado sin errores, vamos a compilar la app dirigiendonos usando los comando "cd" y "cd .." del "Simbolo del sistema" al directorio raíz del proyecto "Hello world" que hemos creado anteriormente, escribiendo "cordova build android --release" y pulsando "Enter". Si tras esta operación aparece la frase "BUILD SUCCESSUL" abremos compilado la aplicación correctamente. En la linea que aparece a continuación de dicho "BUILD SUCESSFUL", aparece la ruta donde se ha generado el archivo ".apk" correspondiente a la aplicación que acabamos de compilar.

Si en Android Studio hemos creado un emulador, es posible ejecutar la app en él. Para ello ejecutamos desde el "Simbolo del sistema" esto: "cordova run android". Si no tenemos instalado ningún emulador, podemos igualmente ejecutar dicho comando para ejecutar la app en un dispositivo físico que tengamos conectado a nuestro ordenador. Podemos forzar la ejecución del aplicación añadiendo la opcion "--emulator" o "--device" en el comando anterior, por ejemplo "cordova run android --emulator" o "cordova run android --device".

POSIBLES ERRORES DURANTE LA COMPILACIÓN: 

1. Si da un error relativo a un plugin llamado "cordova-plugin-file-transfer", habrá que instalarlo ejecutando esto:

cordova plugin add cordova-plugin-file-transfer --force

2. Si da un error relativo a la versión mínima de las SDKs hay que compilar añadiendo al final del comando "build" esto: "-- --minSdkVersion=16".

Si intentamos instalar nuestra aplicación en nuestro dispositivo físico, será conveniente comprobar primeramente si Android Studio lo esta detectando (una vez lo hayamos conectado a través de un cable USB al ordenador). Para saber si Android Studio esta detectando, cuando pulsamos el boton de "Run" en Android Studio, tendrémos que ver si el dispositivo físico conectado aparece entre las opciones para ejecutar la aplicación. Si no aparece entre las opciones, tampoco podremos ejecutar o "runnear" en él la aplicación que acabamos de crear con PhoneGap.

Para que nuestro dispositivo fisico aparezca como opción más en Android Studio, al igual que aparecen los emuladores, es probable que tengamos que instalar el "driver" del dispositivo para Windows. En esta página: http://www.teamandroid.com/download-android-usb-drivers/ podemos encontrar algunos "drivers" para que Windows detecte nuestro dispositivo físico y podamos instalar en él nuestras "apps".

Si finalmente no conseguimos que Windows detecte nuestro dispositivo es posible pasar el archivo .apk a nuestro dispositivo de manera "manual". Veamos como en el siguiente apartado.

Pasar un .apk a un dispositivo móvil

1. Conectar el dispositivo móvil al ordenador, y darle a "Aceptar" a los mensajes en los que se nos pregunte en el móvil si queremos que el ordenador acceda a los datos del dispositivo móvil.

2. Activar en el dispositivo móvil la posibilidad de instalar aplicaciones que NO provengan del Google Play Store, para ello vamos a "Ajustes" en el dispositivo móvil y buscamos la pestaña de "Seguridad". Si dicha opción no aparece, pulsaremos sobre una que se llame "Ajustes avanzados" y dentro probablemente encontraremos la de seguridad. Dentro de "Seguridad", activamos una opción que se llama "Aplicaciones de origen desconocido".

3. Tras conectar el dispositivo móvil a nuestro ordenador, podremos acceder a él si vamos a "Este equipo" en el explorador de archivos de Windows:

Dentro de la carpeta "Memoria interna" encontraremos una carpeta que se llama "Downloads". En esta última carpeta ("Downloads") vamos a copiar el .apk que hemos generado. Para que no tengamos problemas en encontrar este archivo en el siguiente paso, podemos borrar el resto de archivos que haya en la carpeta "Downloads".

A continuación instalamos desde el Google Play Store una "app" para Android llamada "Astro". "Astro" es un navegador de archivos que nos permitirá encontrar el ".apk" que acabamos de copiar en la carpeta "Downloads" de nuestro dispositivo. Para ello, abrimos "Astro" y en el proceso de configuración, le damos los permisos para que puede acceder a nuestro sistema de archivos. Al finalizar dicho proceso, se abrirá Astro, mostrando en la parte de arriba una sección que se llama "Tipos de archivos", donde encontraremos un icono llamado "Descargas". Pulsamos sobre dicha carpeta y dbería de aparecer nuestro ".apk". Si ahora pulsamos sobre él se nos preguntará si queremos instalarlo, le decimos que "Sí", con lo que nuestra aplicación se instalará y abrirá, mostrandose en pantalla.

Si la aplicación no se ha mostrado, puede haber factores que influyan como la versión de las SDKs que se hayan utilizado para generar el ".apk" y la versión de las mismas que usa nuestro dispositivo móvil.