CURSO DE PHONEGAP

Introducción y Creación de Apps

Vicente Antonio Rodríguez Montesinos

Contenido
1. ¿Qué es y para qué sirve PhoneGap?___________________________________ 4
a. ¿Qué es PhoneGap?_____________________________________________________ 4
b. ¿Para qué sirve PhoneGap?_______________________________________________ 4
c. Tipos de aplicaciones ____________________________________________________ 4

2. Licencia y coste ____________________________________________________ 5

a. ¿Qué licencia usa PhoneGap? _____________________________________________ 5
b. ¿Qué beneficios ofrece esta licencia? _______________________________________ 5
c. ¿Qué costes tiene y cómo gana dinero Adobe? _______________________________ 5
d. ¿Qué es PhoneGap Build? ________________________________________________ 5

3. Plataformas para las que podemos desarrollar __________________________ 5

a. Plataformas para las que podemos desarrollar _______________________________ 5
b. ¿Qué plataformas dominan el mercado? ____________________________________ 6
c. ¿Cuánto dinero cuesta desarrollar una aplicación en las plataformas principales? ___ 6

4. IDES con los que podemos desarrollar __________________________________ 6

a. ¿Qué es un IDE? ________________________________________________________ 6
b. Principales IDES y sus costes ______________________________________________ 7

5. ¿Cómo crear nuestra primera App con Eclipse? __________________________ 7

a. Pasos a seguir con Eclipse ________________________________________________ 7
b. Comandos para instalar PhoneGap sin Eclipse ________________________________ 8

6. Pautas para poder empezar a trabajar en el diseño _______________________ 8

a. ¿Quiénes trabajan en el diseño? ___________________________________________ 8
b. Punto estratégico ______________________________________________________ 8
c. Puntos básicos _________________________________________________________ 8
i. Accesibilidad_________________________________________________________________ 8
ii. Usabilidad ___________________________________________________________________ 9
iii. Jugabilidad __________________________________________________________________ 9
iv. Interactividad ________________________________________________________________ 9

7. Lenguajes de programación necesarios para poder desarrollar nuestra app ___ 9

a. Lenguajes principales para programar en PhoneGap __________________________ 9
b. HTML5 _______________________________________________________________ 9
i. ¿Qué es HTML5 y para qué sirve? ________________________________________________ 9
ii. Estructura de un fichero HTML5 _________________________________________________ 9

1
 c. CSS3 ________________________________________________________________ 10
i. ¿Qué es CSS3 y para qué sirve? _________________________________________________ 10
ii. Estructura de un fichero CSS3 __________________________________________________ 10
iii. Responsive Design o Web Adaptativa ____________________________________________ 11

d. JavaScript ____________________________________________________________ 11
i. ¿Qué es JavaScript y para qué sirve? ____________________________________________ 11
ii. ¿Cómo utilizar JavaScript para PhoneGap?________________________________________ 12
iii. AJAX ______________________________________________________________________ 12
iv. Frameworks que podemos utilizar ______________________________________________ 12

8. Principios para entender la maquetación web con código HTML5 y CSS3

orientado a una app __________________________________________________ 14
a. ¿Qué estructura vamos a tomar de base? __________________________________ 14
b. Definición de la estructura (cabecera, cuerpo, menú) _________________________ 14
c. Nº de secciones _______________________________________________________ 15
d. Nº de pantallas por sección ______________________________________________ 15
e. @media only screen ___________________________________________________ 15

9. Consejos para poder desarrollar una app con movimientos fluidos _________ 16
a. Errores de Diseño _____________________________________________________ 16
b. Herramientas Online para nuestro propio CSS_______________________________ 16
c. Sprites ______________________________________________________________ 17
i. ¿Qué es sprite y para qué sirve? ________________________________________________ 17
ii. Herramientas online para crear tu sprite _________________________________________ 17

iii. Ejemplo del uso de un sprite ___________________________________________ 17

d. 3.000 divs, 30.000 .html ________________________________________________ 17
e. Cargas asíncronas _____________________________________________________ 17
f. Animaciones mediante CSS3 _____________________________________________ 18
g. Los problemas de instanciar y destruir… ___________________________________ 18
h. FastClick y los 300ms ___________________________________________________ 18

10. ¿Cómo utilizar la API de PhoneGap? ________________________________ 18

a. ¿Qué es la API de PhoneGap? ____________________________________________ 18
b. ¿Con qué puede interactuar la API? _______________________________________ 18
c. Características por plataformas __________________________________________ 19
d. Practica 1 - GrandQuiz __________________________________________________ 20
e. Practica 2 - Gunman ___________________________________________________ 20

11. ¿Cómo exportar nuestro proyecto en formato apk y firmarlo? ___________ 20

2
a. Compilar nuestro proyecto con Eclipse ____________________________________ 20
b. Instalar en el emulador _________________________________________________ 20
c. Subir al PlayStore______________________________________________________ 20

3
1. ¿Qué es y para qué sirve PhoneGap?

a. ¿Qué es PhoneGap?

PhoneGap es un framework producido por Nitobi, y comprado

posteriormente por Adobe Systems.

Un Framework es un entorno o ambiente de trabajo para desarrollo;

dependiendo del lenguaje normalmente integra componentes que facilitan el
desarrollo de aplicaciones como el soporte de programa, bibliotecas, plantillas
y más.

b. ¿Para qué sirve PhoneGap?

Principalmente, PhoneGap sirve para desarrollar aplicaciones para dispositivos

móviles utilizando herramientas genéricas tales como HTML5, CSS3 y
JavaScript.

PhoneGap maneja una API que hace de intermediario para comunicarse

nuestro JavaScript con el sistema del dispositivo.

c. Tipos de aplicaciones

Para entenderlo mejor, veamos los tres tipos de aplicaciones móviles que
existen:

 Aplicación nativa: una aplicación nativa es la que se desarrolla de

forma específica para un determinado sistema operativo, llamado
Software Development Kit o SDK. Se empaqueta y se instala en el
dispositivo pudiendo interactuar con el hardware del dispositivo.
 Aplicación Web: una aplicación web o webapp es una web adaptativa
que se desarrolla con lenguajes muy conocidos por los programadores,
como es el HTML, CSS y JavaScript. La principal ventaja con respecto a
la nativa es la posibilidad de programar con lenguajes genéricos
independiente del sistema operativo en el que se usará la aplicación.
De esta forma se pueden ejecutar en diferentes dispositivos sin tener
que crear varias aplicaciones. Esta se ejecuta en el propio navegador
sin necesidad de instalarlo. Sus inconvenientes son que necesita tener
conexión a la red, no puede interactuar con el hardware del dispositivo
y no se distribuye en las stores.
 Aplicación Híbrida: una aplicación híbrida es una combinación de las
dos anteriores. Se podría decir que recoge lo mejor de cada una de
ellas. Las apps híbridas se desarrollan con lenguajes propios de las
webapp, es decir, HTML, CSS y JavaScript por lo que permite su uso en
diferentes plataformas, pero también dan la posibilidad de acceder a
gran parte de las características del hardware del dispositivo. La

4
 principal ventaja es que a pesar de estar desarrollada con HTML, CSS y
JavaScript, es posible agrupar los códigos y distribuirla en las tiendas
móviles.

2. Licencia y coste

a. ¿Qué licencia usa PhoneGap?

PhoneGap es libre y de código abierto bajo la licencia de Apache v2.0

distribuido con el nombre de Apache Cordova.

b. ¿Qué beneficios ofrece esta licencia?

 Permite al usuario del software la libertad de usarlo para cualquier

propósito, distribuirlo, modificarlo, y distribuir versiones modificadas
de ese software.
 No exige que las obras derivadas (versiones modificadas) del software
se distribuyan usando la misma licencia, ni siquiera que se tengan que
distribuir como software libre.
 Sólo exige que se mantenga una noticia que informe a los receptores
que en la distribución se ha usado código con la Licencia Apache.

c. ¿Qué costes tiene y cómo gana dinero Adobe?

La utilización para el desarrollo de aplicaciones móviles con PhoneGap no

requiere de ningún gasto económico ya que es libre y de código abierto.

Entonces, ¿cómo gana dinero Adobe? Crea PhoneGap Build.

d. ¿Qué es PhoneGap Build?

Es una plataforma online o en la nube, que lo que hace es compilar tu

aplicación, evitando tener un Mac para compilar para IOS, o un Windows para
compilar para Windows Phone, etc.

Con esta plataforma, ellos ofrecen la opción de compilar una aplicación

gratuitamente, pero si tú quieres compilar más aplicaciones debes de pagar
una cuota. Además, proporcionan un soporte muy grande y costoso para
empresas.

3. Plataformas para las que podemos desarrollar

a. Plataformas para las que podemos desarrollar

 Android
 iOS

5
  WindowsPhone
 Blackberry
 Symbian OS (que es de Nokia)
 Bada (que es un SO de Samsung)
 WebOS (que es un SO que saco HP para algunos móviles en concreto)
 Ubuntu Mobile
 Firefox OS

b. ¿Qué plataformas dominan el mercado?

Actualmente el mercado está liderado por Android (62%) y iOS (23%) con un
85% aproximadamente.

Figura 1. Gráfica de las plataformas en el mercado

c. ¿Cuánto dinero cuesta desarrollar una aplicación en las

plataformas principales?

 En Android cuesta 25$ para toda la vida.

 En iOS y WindowsPhone cuesta 99$/año.
 Blackberry es gratuito por ahora.

4. IDES con los que podemos desarrollar

a. ¿Qué es un IDE?

Un IDE es un Entorno de Desarrollo Integrado, es decir, un programa

informático compuesto por un conjunto de herramientas de programación.

Normalmente, un IDE consiste de un editor de código fuente, herramientas de

construcción automáticas y un depurador. La mayoría de los IDE tienen auto-
completado inteligente de código. Algunos IDE contienen un compilador, un
intérprete, o ambos; otros no.

6
 b. Principales IDES y sus costes

 Eclipse: es un programa de desarrollo en JAVA utilizado también para

programar en Android. Cuando te descargas eclipse, te descargas un
IDE sólo para JAVA. Entonces, tenemos que instalar algún plugin para
que nos detecte los lenguajes de HTML, CSS y JavaScript. Después nos
tendremos que instalar la SDK (Software Development Kit). La SDK
permite que puedas compilar y puedas mediante un emulador ver el
resultado sin tenerlo que instalar en ningún dispositivo.
Por ahora, su coste es 0.
 Android Studio: es el ADT (Android Development Tools) de Android.
Es como un eclipse con todos los accesorios ya instalados y preparados
para programar en Android.
Su coste también es 0.
 XCode: es el IDE de Mac y solo puede ser utilizado en MAC porque es
de Apple.
Su coste del IDE es 0.
 Visual Studio: es de Microsoft y solo puede ser utilizado en Windows.
Cuesta 615€ el paquete básico y nos trae el IDE, la SDK y el emulador.
 JDE: es de Blackberry y es gratuito como su store.
 Dreamweaver: es un IDE para desarrollo de páginas web. Con la
compra de PhoneGap, Adobe amplió el formato para desarrollar
aplicaciones móviles y compilarlos mediante la nube de PhoneGap
Build.
El IDE cuesta anualmente en un solo pago (290€), anualmente con
pago mensual (24€) o sólo un mes (36€).

5. ¿Cómo crear nuestra primera App?

a. Pasos a seguir con Eclipse

 Descargar e instalar JDK (Java Development Kit) de Oracle

 Descargar Eclipse y descomprimir
 Descargar e instalar la SDK de Android
 Abrir Eclipse
 Instalar el ADT de Android
o https://dl-ssl.google.com/android/eclipse/
 Instalar PhoneGap en Eclipse
o http://svn.codespot.com/a/eclipselabs.org/mobile-web-
development-with-phonegap/tags/r1.2/download
 Crear proyecto PhoneGap para Android
 Programar nuestra app

Video de demostración

7
 b. Comandos para instalar PhoneGap sin Eclipse

 npm install –g phonegap // instala la última versión de PhoneGap

 npm install [email protected] // instala una versión en concreto de
PhoneGap
 npm update –g phonegap // actualiza la versión de PhoneGap
 phonegap create nombre_carpeta_app // crea una carpeta y dentro mete
un proyecto vacío de PhoneGap pero sin meter las plataformas para las que
vamos a desarrollar
 cd nombre_carpeta_app // accede a la carpeta de nuestra aplicación

 phonegap run android // ejecuta la aplicación para Android en PhoneGap

Build
 phonegap local run android // ejecuta la aplicación para Android con la SDK
 phonegap local run ios // ejecuta la aplicación para iOS con la SDK

6. Pautas para poder empezar a trabajar en el diseño

a. ¿Quiénes trabajan en el diseño?

En el diseño no sólo trabaja el diseñador, sino también trabaja el programador

porque hay que basarse en unos estándares y en temas de usabilidad, etc.

b. Punto estratégico

La rueda ya está inventada. No hace falta crear un diseño o una estructura de

aplicación complicada que después el usuario no sepa para qué sirve. Las
aplicaciones están estructuradas y como norma general tienen un diseño
básico en base a lo predefinido por el mismo SO.

¿Por qué? porque el mismo usuario lo ha ido pidiendo por usabilidad y tema
de accesibilidad.

c. Puntos básicos

i. Accesibilidad
Es el grado en el que todas las personas pueden utilizar un objeto,
independientemente de sus capacidades técnicas, cognitivas o físicas.

En nuestro caso y dentro de lo posible, todos los usuarios, tengan el

dispositivo móvil que tengan, deben de poder utilizar nuestra
aplicación.

Esto se consigue con una maquetación coherente.

8
 ii. Usabilidad
La facilidad con que las personas pueden utilizar una herramienta y la
eficacia percibida mediante ésta.

Es recomendable utilizar la estructura que proporciona cada SO para

acomodar la usabilidad al usuario ya que es el formato al que está
acostumbrado y se convierte en algo intuitivo.

iii. Jugabilidad
Satisfacción, Aprendizaje, Efectividad, Inmersión, Motivación,
Emoción y Socialización.

Lo que se busca es que el usuario quiera utilizar nuestra aplicación el

mayor tiempo posible. Unos ejemplos claros son el Whatsapp o
Twitter o Facebook.

iv. Interactividad
Es la interacción a modo de diálogo entre la app y el usuario.

7. Lenguajes de programación necesarios para poder

desarrollar nuestra app

a. Lenguajes principales para programar en PhoneGap

Como ya hemos dicho anteriormente, los lenguajes principales son HTML5,

CCS3 y JavaScript.

b. HTML5

i. ¿Qué es HTML5 y para qué sirve?

HTML es el lenguaje que se emplea para el desarrollo de páginas
web. Está compuesto por una serie de etiquetas que el navegador
interpreta y da forma en la pantalla. HTML dispone de etiquetas para
imágenes, hipervínculos que nos permiten dirigirnos a otras páginas,
saltos de línea, listas, tablas, etc.

Podríamos decir que HTML sirve para crear páginas web, darles
estructura y contenido.

ii. Estructura de un fichero HTML5

 DOCTYPE es una instrucción para el navegador acerca de qué
versión de HTML está escrita.
 HTML indica al navegador que se trata de un documento HTML
y representa la raíz del documento.

9
  En HEAD se define el título, icono, estilos, scripts, y otras meta
informaciones.
 BODY define el cuerpo del document. En ella contiene todos
los elementos tales como texto, hipervínculos, imágenes,
tablas, listas, etc.

Figura 2. Estructura de un fichero HTML5

c. CSS3

i. ¿Qué es CSS3 y para qué sirve?

CSS (Cascading Style Sheets) u hoja de estilo en cascada es un lenguaje
usado para definir y crear la presentación de un documento
estructurado escrito en HTML.

Por decirlo de alguna manera: la página web sería lo que hay debajo (el
contenido) y CSS sería un cristal de color que hace que el contenido se
vea de una forma u otra.

ii. Estructura de un fichero CSS3

 El asterisco indica que afectará a cada elemento del
documento.
 El atributo id es como un nombre que identifica al elemento.
Esto significa que el valor de este atributo no puede ser
duplicado. Este nombre debe ser único en todo el documento.
 La mayoría del tiempo, en lugar de utilizar el atributo id para
propósitos de estilos es mejor utilizar class. Este atributo es
más flexible y puede ser asignado a cada elemento HTML en
el documento que comparte un diseño similar.

10
  La pseudo clase hover aplica las propiedades indicadas dentro
de su etiqueta cuando pase el ratón por encima del elemento.

Figura 3. Estructura de un fichero CSS3

iii. Responsive Design o Web Adaptativa

Es una técnica de diseño y desarrollo web que mediante el uso de
estructuras e imágenes fluidas, así como de media-queries en la hoja
de estilo CSS, consigue adaptar el sitio web al entorno del usuario.

Figura 4. Resoluciones de dispositivos

d. JavaScript

i. ¿Qué es JavaScript y para qué sirve?

JavaScript es un lenguaje de programación interpretado, del lado del
cliente, por lo que no es necesario compilar los programas para
ejecutarlos. Se define como orientado a objetos, basado en prototipos
y dinámico.

11
 Sirve principalmente para crear páginas web dinámicas o dicho de otra
forma, para programar el comportamiento de las páginas web.

ii. ¿Cómo utilizar JavaScript para PhoneGap?

Antes que nada debemos entender que es una aplicación móvil. Que la
estamos lanzando en un navegador que está corriendo en una
máquina pequeña. Nosotros no podemos tener 500 funciones.

Por esta razón, debemos ir organizando esas funciones y agrupándolas.

Es decir:

 Organización
 Simplificación

Figura 5. Estructura de un fichero JavaScript

iii. AJAX
AJAX (Asynchronous JavaScript And XML), es una técnica de desarrollo
web para crear aplicaciones interactivas. De esta forma es posible
realizar cambios sobre las páginas sin necesidad de recargarlas,
mejorando la interactividad, velocidad y usabilidad en las aplicaciones.

Ajax es una tecnología asíncrona, en el sentido de que los datos

adicionales se solicitan al servidor y se cargan en segundo plano sin
interferir con la visualización ni el comportamiento de la página,
aunque existe la posibilidad de configurar las peticiones como
síncronas de tal forma que la interactividad de la página se detiene
hasta la espera de la respuesta por parte del servidor.

iv. Frameworks que podemos utilizar

1. XUI
Es un framework preparado para trabajar en navegadores
basados en WebKit, Fennec, Opera, IE Mobile y Blackberry.

Xui a diferencia de otros framework NO intenta imponer un

estilo propio de diseño, SI nos permitirá interactuar con
nuestros elementos de HTML.

Lo ideal de este framework es el peso, ya que es liviano para

tecnologías móviles.

12
2. JQuery
jQuery es una biblioteca de JavaScript, que permite
simplificar la manera de interactuar con los documentos
HTML, manipular el árbol DOM, manejar eventos, desarrollar
animaciones y agregar interacción con la técnica AJAX a
páginas web.

Tiene 10 años de vida y se ha convertido en la librería

JavaScript más utilizada actualmente.

A diferencia de Xui, el peso es mayor ya que está enfocado al

desarrollo de páginas web.

JQuery NO intenta imponer un estilo propio de diseño, SI nos

permitirá interactuar con nuestros elementos de HTML.

Usuarios que lo utilizan: Wikipedia, Google, Microsoft, IBM,

Amazon, Twitter, WordPress, Mozilla o Drupal.

3. jQuery Mobile
JQuery Mobile es un plugin del JQuery original optimizado
para dispositivos táctiles y requiere que éste último esté
instalado previamente para poder funcionar.

JQuery Mobile SI intenta imponer un estilo propio de diseño,

SI nos permitirá interactuar con nuestros elementos de HTML.

El peso de JQuery Mobile es mayor que los dos anteriores.

4. Pros y contras de jQuery Mobile

Pros

 Desarrollo rápido de interfaces.

 Sintaxis sencilla.
 Efectos prediseñados.
 Manejo de eventos.
 Baja curva de aprendizaje.

Contras

 Agrega peso extra a la aplicación.

 Manejo complejo de CSS.
 Los efectos no funcionan fluidamente en algunos
equipos de baja gama.
 Las aplicaciones más grandes pueden hacer lenta la
carga por trabajar en un solo archivo.
 Menos control general del código.

13
8. Principios para entender la maquetación web con código
HTML5 y CSS3 orientado a una app

a. ¿Qué estructura vamos a tomar de base?

Lo primero que tenemos que definir cuando iniciamos un proyecto es ¿Cómo

está divida mi pantalla y cuántas partes va a tener mi aplicación? Para ello,
debemos de seguir los siguientes pasos:

 Definición de la estructura (cabecera, cuerpo, menú)

 Nº de secciones
 Nº de pantallas por sección

Figura 6. Estructura de una aplicación móvil

b. Definición de la estructura (cabecera, cuerpo, menú)

Debemos mantener la estructura para todos los tipos de dispositivos. La

cabecera siempre arriba, seguido de un cuerpo y un menú. Para ello, nos
creamos una plantilla vacía que mantendrá la estructura de nuestra aplicación.

Figura 7. Definición de la estructura

14
c. Nº de secciones

Según el diseñador y el número de secciones, utilizaremos un menú botonera

o un menú desplegable o ambos.

Figura 8. Nº de secciones

d. Nº de pantallas por sección

Nuestras pantallas se dividen en capas como nuestro menú desplegable.

Entonces lo que hacemos es posicionarlo fuera de la pantalla para ocultarlas y
cuando se selecciona la pantalla deseada, la movemos a la posición 0 de
nuestra pantalla.

Figura 9. Nº de pantallas por secciones

e. @media only screen

Media Queries es un módulo CSS3 que permite adaptar la representación del

contenido a características del dispositivo como la resolución de pantalla y es
un principio básico de la tecnología de Diseño web adaptativo.

15
 Figura 10. Estructura Media Queries

9. Consejos para poder desarrollar una app con movimientos

fluidos

Aquí la gente se pregunta por qué su aplicación va lenta o la transición es lamentable,

esto me va a golpes, etc. En esta sección vamos a ver las pautas a seguir para evitar
que pasen estas cosas.

a. Errores de Diseño

7 errores de diseño web que debemos evitar:

 No abusar de tipografías.
 No abusar de los bordes redondeados con CSS.
 No abusar de las sombras de CSS.
 No abusar de los degradados del CSS.
 No utilizar animaciones de JavaScript.
 Nuestras imágenes e iconos deben valer para todas las resoluciones.
 Tratar las imágenes mediante un editor para reducir y ajustar tamaños.

b. Herramientas Online para nuestro propio CSS

Son herramientas online que nos ayudan a crear nuestros botones,

transiciones, textos sombreados, etc.

 css3generator.com
 colorzilla.com/gradient-editor
 border-radius.com
 css3.me
 css-tricks.com/examples/ButtonMaker
 3dcsstext.com

16
c. Sprites

i. ¿Qué es sprite y para qué sirve?

Sprite es un conjunto de imágenes agrupadas en una sola imagen y a
cada una de ellas se accede mediante un desplazamiento respecto del
borde superior izquierdo, cota (0,0), y sus dimensiones absolutas. Es,
por tanto un método de agrupación de imágenes que, posteriormente,
pueden ser tratadas de forma independiente.

ii. Herramientas online para crear tu sprite

 css-sprit.es
 spritegen.website-performance.org
 draeton.github.io/stitches
 spritecow.com

iii. Ejemplo del uso de un sprite

Figura 11. Ejemplo del uso de un sprite

d. 3.000 divs, 30.000 .html

Aquí entra el concepto dicho anteriormente de organización y simplicidad.

Aquí lo que hacemos es que en vez de crear una capa para la pantalla por cada
sección, creamos una única capa lateral a la derecha y lo que hago es cambiar
el contenido de dentro.

El proceso es el siguiente:

 Muevo la capa.
 Muestro el cargando.
 Y después quito el cargando y muestro el contenido.

e. Cargas asíncronas

Es necesario utilizar cargas asíncronas porque de esta forma es posible realizar

cambios sobre las páginas sin necesidad de recargarlas, mejorando la
interactividad, velocidad y usabilidad en las aplicaciones.

No podemos tener nuestra pantalla congelada a la espera de que se cargue ya

que el usuario no sabe si está funcionando. Para ello, mostramos la capa de
cargando para indicarle al usuario que está en proceso su operación y después
le mostramos el contenido.

17
 f. Animaciones mediante CSS3

Debemos de hacer las animaciones con CSS3 y no JavaScript ya que CSS3

utiliza los recursos del hardware y JavaScript no (produciendo un renderización
en las animaciones).

g. Los problemas de instanciar y destruir…

Instanciar un elemento, es decir, crear un elemento o destruirlo consume más

que mover un elemento existente. Por eso, se aconseja mejor ocultar o
mostrar el elemento.

h. FastClick y los 300ms

Cuando trabajamos en una aplicación web, el navegador en sí tiene un retardo

de 300ms que mata a la aplicación. FastClick es un plugin gratuito que nos
ayuda a eliminar el retardo del navegador.

Figura 12. Ejemplo del uso de FastClick

10. ¿Cómo utilizar la API de PhoneGap?

a. ¿Qué es la API de PhoneGap?

Es un conjunto de funciones y procedimientos que ofrece la biblioteca de

PhoneGap para ser utilizada en el desarrollo de una app.

PhoneGap ha preparado como base algunas funciones básicas tales como

poder capturar u obtener una foto, guardarla en la galería del dispositivo,
hacer uso del vibrador, comprobar la conectividad, e incluso guardar
información en el storage.

b. ¿Con qué puede interactuar la API?

 Accelerometer: obtiene los valores del sensor de aceleración del

dispositivo.

18
  Camera: utiliza el módulo de cámara para tomar imágenes o videos.
 Capture: aparte de capturar una foto, un audio o un video, puede
enviarlo directamente a un servidor.
 Compass: accede al sensor de la brújula para indicarnos la dirección en
la que está apuntando el dispositivo.
 Connection: indica el tipo de conexión que está activa.
 Contacts: permite crear, obtener, modificar, guardar y borrar
contactos en el dispositivo.
 Device: obtiene información sobre el dispositivo.
 Events: es un control de eventos que sirve saber si hay conexión o no,
estado de la batería, etc.
 File: sirve para crear, guardar, leer o borrar archivos y carpetas o saber
cuántos archivos tiene una carpeta.
 Geolocation: accede al GPS.
 Globalization: obtiene información y lleva a cabo operaciones de
configuración regional y la zona horaria.
 InAppBrowser: lanza otro navegador a pantalla completa en el cual
puedes embeber una web.
 Media: detecta audio, video, darle al play o al pause, en que parte del
audio está, etc.
 Notification: permite mostrar notificaciones visuales, o mediante
sonido o vibración.
 Splashcreen: es la primera pantalla mientras el dispositivo se prepara y
empieza a cargar la aplicación.
 Storage: para guardar archivos, leer archivos de la SD, etc.

c. Características por plataformas

Figura 13. Características por plataformas

19
 d. Practica 1 - GrandQuiz

Vamos a realizar como práctica una aplicación tipo concurso de preguntas y

respuestas con un ranking de las 7 mejores puntuaciones.

Enlace de la práctica 1

e. Practica 2 - Gunman

En esta práctica vamos a crear una aplicación que simule el duelo en el medio
oeste. Es decir, desenfundar para disparar. Además, contiene una biblioteca
para seleccionar el arma para el duelo.

Enlace de la práctica 2

11. ¿Cómo exportar nuestro proyecto en formato apk y

firmarlo?

a. Compilar nuestro proyecto con Eclipse

 Archivo -> 'Exportar...'

 Escoger 'Exportar Aplicación Android'
 Seleccionar proyecto.
 Usar o crear keystore.
 Si se ha creado un keystore, indicar alias, contraseña, validación de 25
años y el primer y último nombre. El resto de datos son opcionales.
 Guardar el apk en la ruta indicada.

b. Instalar en el emulador

Abrir terminal como Administrador y escribir los siguientes comandos:

 cd C:\Users\nombre_usuario\AppData\Local\Android\android-sdk\platform-tools
 adb devices
 adb install C:\Users\AME2001\Downloads\Labder.apk

c. Subir al PlayStore

Para ver como se realiza la subida de una aplicación al PlayStore, pulsemos en

el enlace que hay a continuación.

Video de demostración

20