Building cross platform mobile applications with PhoneGap. Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles.

1. Desarrollo de Aplicaciones Cross-Platform
para Dispositivos Móviles
Building Cross-Platform Mobile Applications
M.S.C. Raquel Vásquez Ramírez
M.S.C. Cristian A. Rodríguez Enríquez

2. Contenido
• PhoneGap
• PhoneGap Plans
• ¿Aplicaciones Nativas?
• PhoneGap Build
• Registro Gratuito
• First Mobile App with PhoneGap Build
• Conclusiones
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 02 of 15

3. PhoneGap
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 03 of 15
Es un framework para el desarrollo de aplicaciones móviles
producido por Nitobi, y comprado posteriormente por Adobe
Systems. PhoneGap permite a los programadores desarrollar
aplicaciones para dispositivos móviles utilizando JavaScript,
HTML5 y CSS3.

4. PhoneGap Plans
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 04 of 15

5. Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 05 of 15
¿Aplicaciones Nativas?
NO, las aplicaciones resultantes son híbridas. Debido a:
• El renderizado de la UI es realizado mediante un “web
browser engine”
• Pueden acceder a ciertas características del API nativa
• Son empaquetadas como aplicaciones nativas

6. Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 06 of 15
PhoneGap Build

7. Registro [1/5]
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 07 of 15
The first step is to register an account and log in.
https://build.phonegap.com/plans/free
1
private
app
unlimited
open-­‐source
apps
unlimited
collaborators

8. Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 08 of 15
Registro [2/5]

9. Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 09 of 15
Registro [3/5]

10. Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 10 of 15
Registro [4/5]

11. Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 11 of 15
Registro [5/5]

12. Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 12 of 15
First Mobile App with PhoneGap Build
1. Setup del ambiente Android (O el sistema operativo
destino)
2. Crear una “PhoneGap Build Account”
3. Setup Code Editor (Adobe Dreamweaver CS6, Brackets…)
4. Obtener el “Starter Template”
h5ps://github.com/phonegap/phonegap-­‐start.
5. Usar PhoneGap Build para generar la aplicación

13. Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 13 of 15
First Mobile App with PhoneGap Build [1/5]
1)
Usar
un
repositorio
de
Github
o
Subir
un
archivo
ZIP
2)
UClizando
la
opción
de
“Upload
a
.zip
file”
esperar
a
que
cargue
el
proyecto

14. Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 14 of 15
First Mobile App with PhoneGap Build [2/5]
3)
Al
terminar
la
carga
del
proyecto,
indicará
los
parámetros
de
configuración
del
proyecto
4)
Dar
clic
en
“Ready
to
build”

15. Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 14 of 15
First Mobile App with PhoneGap Build [3/5]
5)
Una
vez
generada
la
aplicación
se
muestra
un
código
QR
para
descargar
y
probar
la
aplicación
en
un
disposiCvo

16. Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 14 of 15
First Mobile App with PhoneGap Build [4/5]
6)
Las
plataformas
listas
se
mostrarán
en
color
“Azul
Turquesa”,
las
pendientes
en
color
“Gris”
y
las
que
no
se
pueden
generar
en
“rojo”
En
este
caso
debido
a
que
no
se
cuenta
con
una
key
de
desarrollo
de
iOS
no
es
posible
generar
la
aplicación

17. Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 14 of 15
First Mobile App with PhoneGap Build [5/5]
7)
Detalle
de
los
archivos
instalables
disponibles
para
descarga

18. Conclusiones
• PhoneGap permite crear aplicaciones Híbridas
• Desarrollo para múltiples plataformas
• Para aplicaciones comerciales (privadas) tiene costo
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 15 of 15

19. Recursos
• Brackets Code Editor
– http://download.brackets.io/
• PhoneGap for Brackets
– https://github.com/adobe/brackets-phonegap
– https://github.com/adobe/brackets/wiki/Brackets-
Extensions (How to Install)
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 16 of 16