PDF de programación - Introducción a la programación con PhoneGap

Tabla de contenido

Contenidos
Introducción
Instalación
Línea de comandos

Crear una aplicación
Gestión de plataformas
Actualización de PhoneGap
Compilar y probar una aplicación

Ejemplo - Crear nuestra primera aplicación
Configuración

Fichero de configuracion
Personalizar plataformas mediante merges

Eventos
Plugins

Gestión de plugins
Uso de la API de PhoneGap

Ejercicios 1
Ejercicios 2

1.1
1.2
1.3
1.4
1.4.1
1.4.2
1.4.3
1.4.4
1.5
1.6
1.6.1
1.6.2
1.7
1.8
1.8.1
1.8.2
1.9
1.10

2

Contenidos

Contenidos

La tecnología PhoneGap o Apache Cordova permite compilar un código Web (HTML, CSS,
JavaScript etc.) como si fuera una aplicación nativa para móvil. Es decir, con un solo
desarrollo web es posible obtener aplicaciones nativas para diferentes plataformas destino
como Android, iOS, Windows Phone, etc.

Esta herramienta además nos da acceso a los sensores y características nativas de los
dispositivos móviles, como por ejemplo el GPS, acelerómetros, brújula, cámara, etc.

La librería PhoneGap se gestiona de forma muy sencilla mediante línea de comandos,
dispone además de un fichero centralizado de configuración de nuestra aplicación, y la
posibilidad de instalar multitud de plugins para el acceso a sensores o la ampliación de
funcionalidad.

Los contenidos principales del libro son:

Introducción
Instalación
Uso de la línea de comandos

Crear una aplicación
Gestión de plataformas (Android, iOS, etc.)
Actualización de PhoneGap
Compilar y probar/emular una aplicación

Ejemplo - Crear nuestra primera aplicación
Configuración de PhoneGap

Fichero de Configuración (iconos, splashscreens, etc.)
Personalizar plataformas mediante merges

Eventos

deviceready, pause, resume, etc.

Plugins

Gestión de plugins (añadir, buscar, listar, eliminar, etc.)
Uso de la API de PhoneGap (ejemplos).

Ejercicios

3

Introducción

Introducción

PhoneGap es un framework de código abierto para el desarrollo de aplicaciones para
móviles. Su principal característica es ser multiplataforma, es decir, con un solo código de
aplicación podemos utilizarlo en multitud de plataformas móviles, como Android, iOS o
Windows Phone.

Inicialmente PhoneGap fue desarrollado por Nitobi bajo licencia de software libre, pero en
Octubre de 2011 Adobe anunció oficialmente la adquisición de Nitobi, pasando así
PhoneGap al control del gigante del software. Esto generó una gran incertidumbre entre los
desarrolladores, pues el framework podía pasar a ser una tecnología propietaria, pero en
una genial estrategia, Adobe donó PhoneGap a la fundación Apache, conservando de esta
forma la integridad libre de PhoneGap.

En la actualidad, el proyecto en el sitio web de la fundación Apache esta nombrado como:
"Apache Cordova", pero PhoneGap sigue siendo una especie de marca comercial, por lo
que aún se sigue usando ese nombre para identificar al popular framework.

El núcleo de las aplicaciones PhoneGap se crea utilizando lenguajes de programación Web,
como JavaScript, HTML5, CSS3, y con la ayuda de otros frameworks de desarrollo y de la
propia API de PhoneGap. Esta API nos permite acceder mediante código JavaScript a
características nativas del móvil, como por ejemplo: Acelerómetro, cámara, contactos,
eventos, geolocalización, redes o almacenamiento.

Posteriormente, y para cada una de las plataformas móviles para las que queramos generar
nuestra aplicación, tendremos que incluir este núcleo Web como parte de la aplicación
nativa. De esta forma podremos generar una aplicación "nativa" para cada plataforma móvil
aprovechando para todas ellas el mismo núcleo de la aplicación.

4

Introducción

Las aplicaciones desarrolladas con PhoneGap se consideran aplicaciones híbridas. Una
aplicación es híbrida cuando es una aplicación nativa con una capa intermedia de
herramientas que hacen uso de otros lenguajes de programación. Por el contrario se
considera nativa cuando ha sido desarrollada íntegramente utilizando la API y lenguaje de
programación que proporciona la compañía que vende el producto. Esta técnica de
programación tiene varias ventajas: el usuario sentirá que la aplicación es parte del sistema
operativo, nos permitirá distribuir la aplicación como una aplicación nativa, y además nos
ahorrará muchísimo trabajo.

Puedes encontrar más información de PhoneGap en la dirección http://phonegap.com/,
donde podrás descargar la última versión del framework.

Cómo trabaja PhoneGap
El esquema básico de funcionamiento de PhoneGap es el siguiente:

Construir la aplicación usando estándares Web: HTML, HTML 5, CSS, CSS3,
JavaScript o haciendo uso de otros frameworks para el desarrollo de aplicaciones Web.

5

Introducción

Combinar la aplicación Web con PhoneGap, esto nos dará acceso a las características
nativas de los dispositivos móviles.

Configurar la aplicación en cada una de las plataformas para las que queramos generar
la aplicación nativa.

A continuación se incluye un esquema de este proceso:

Es importante utilizar estándares web para que nuestra aplicación funcione en la mayoría
de dispositivos móviles. Para el desarrollo de la aplicación, además de poder utilizar
lenguajes de programación web HTML 5, CSS 3 y JavaScript, también soporta
perfectamente el uso de frameworks de desarrollo web móvil como: Twitter Bootstrap,
jQuery Mobile, Sencha Touch, Dojo, jQTouch, SprountCore, GloveBox, XUI, iScroll, entre
otros.

Además, a través de la librería de PhoneGap se nos brindará el acceso desde la aplicación
web a las diferentes características nativas o hardware de los dispositivos móviles, como
por ejemplo el acelerómetro, la cámara, brújula, etc.

Soporte
Con PhoneGap es posible desarrollar aplicaciones para los siguientes sistemas operativos
para móviles:

Android
iOS
Windows Phone
BlackBerry OS

6

Introducción

Amazon Fire OS
Firefox OS
Ubuntu
Tizen

Permite el acceso a las características nativas o hardware de todas estas plataformas a
través de una API en JavaScript que se comunica con el dispositivo. Las características a
las que nos permite acceder son:

Acelerómetro
Estado de la batería
Cámara
Brújula
Estado de la conexión
Contactos
Datos del dispositivo
Eventos
Gestión de archivos
Geolocalización
Navegador
Contenido multimedia
Sistema de notificaciones
Pantalla de bienvenida o Splashscreen
Almacenamiento
Vibrador

Sin embargo no todas las plataformas soportan el acceso a todas las características nativas
desde una aplicación de este tipo. Los principales sistemas operativos para móvil actuales
(Android, iOS, WP) no presentan apenas problemas (aunque sí algunas particularidades de
configuración), pero otros como Tizen o Firefox OS no permiten el acceso completo. En la
siguiente dirección se puede consultar una tabla con el soporte para cada plataforma:

http://docs.phonegap.com/en/edge/guide_support_index.md.html#Platform%20Support

7

Instalación

Instalación

Entramos a la página de PhoneGap y hacemos 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.

Instalación de Node.Js
Si no tenemos instalado Node.Js entraremos a la página http://nodejs.org/ para descargarlo.
El automáticamente reconocerá nuestro Sistema Operativo y procederá a bajar la última
versión disponible. Los pasos para la instalación son los siguientes:

Entramos en la página http://nodejs.org/ y descargamos la librería.
Descomprimimos el archivo descargado y accedemos al directorio que se genera.
Compilamos la librería. Este último paso dependerá del sistema operativo que
utilicemos:

Si usamos Windows tendremos que ejecutar el script:

vcbuild.bat

Si usamos Linux los siguientes comandos:

./configure
make
make install

8

Instalación

Si usamos Mac simplemente será ejecutar el instalador que se descarga.

Además, si al compilar nos indicara que no encuentra Python tendremos que comprobar
que esté correctamente instalado y que lo encuentre en el PATH: export
PYTHON=/path/to/python . También es posible que nos diese error por cuestión de permisos al
realizar la instalación.

Instalación de PhoneGap
Una vez instalado Node.Js procederemos a descargar PhoneGap. Para esto abrimos una
consola (o en Windows la consola de Node.Js llamada "Node.js command prompt") y
ejecutamos:

$ sudo npm install -g phonegap

Nota: en Windows ejecutaremos el mismo comando pero sin "sudo".

Este comando descargará e instalará automáticamente PhoneGap. Una vez completado el
proceso podemos comprobar que esté correctamente instalado ejecutando el comando
phonegap , el cual debería mostrar una salida similar a la siguiente:

Usage: phonegap [options] [commands]

Description:

PhoneGap command-line tool.

Commands:
...
...

9

Línea de comandos

Interfaz de línea de comandos

Una vez tenemos instalado Node.Js y PhoneGap ya podemos crear nuestra primera
aplicación. Pero para ello antes debemos conocer el funcionamiento de la interfaz de línea
de comandos (CLI) de PhoneGap, el cual utilizaremos para realizar muchas operaciones,
como por ejemplo crear nuevos proyectos, compilar, ejecutar, emular, etc. A continuación
veremos las opciones más importantes de las que disponemos.

Ayuda

Para obtener ayuda de todos los comandos disponibles y su sintaxis tenemos que ejecutar:

$ phonegap help

# O también:
$ phonegap

Si queremos ver la ayuda detallada sobre un comando usaremos:

$ phonegap help <comando>

# O también:
$ phonegap <comando> --help

El comando "info" muestra un listado de información de ayuda como la versión del propio
CLI de PhoneGap y de Node.Js, las plataformas y plugins instalados, las versiones del SDK
de cada plataforma, etc. El ejecutar este comando, además de mostrar la información por
pantalla, la guarda en un fichero "info.txt" en la misma carpeta.

$ phonegap info

10

Crear una aplicación

Crear una aplicación

Para crear una nueva aplicación abriremos una consola (o en Windows la consola de
Node.Js l