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
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
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.
PhoneGap Plans
Building Cross-Plaftform Mobile Applications – PhoneGap Slide 04 of 15
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
Building Cross-Plaftform Mobile Applications – PhoneGap Slide 06 of 15
PhoneGap Build
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
Building Cross-Plaftform Mobile Applications – PhoneGap Slide 08 of 15
Registro [2/5]
Building Cross-Plaftform Mobile Applications – PhoneGap Slide 09 of 15
Registro [3/5]
Building Cross-Plaftform Mobile Applications – PhoneGap Slide 10 of 15
Registro [4/5]
Building Cross-Plaftform Mobile Applications – PhoneGap Slide 11 of 15
Registro [5/5]
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
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
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”
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
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
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
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
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