01 building cross platform mobile applications with phonegap / desarrollo de aplicaciones...
DESCRIPTION
Building cross platform mobile applications with PhoneGap. Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles.TRANSCRIPT
![Page 1: 01 Building cross platform mobile applications with PhoneGap / Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles](https://reader033.vdocuments.site/reader033/viewer/2022051609/548129c4b37959442b8b5d95/html5/thumbnails/1.jpg)
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
![Page 2: 01 Building cross platform mobile applications with PhoneGap / Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles](https://reader033.vdocuments.site/reader033/viewer/2022051609/548129c4b37959442b8b5d95/html5/thumbnails/2.jpg)
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
![Page 3: 01 Building cross platform mobile applications with PhoneGap / Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles](https://reader033.vdocuments.site/reader033/viewer/2022051609/548129c4b37959442b8b5d95/html5/thumbnails/3.jpg)
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.
![Page 4: 01 Building cross platform mobile applications with PhoneGap / Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles](https://reader033.vdocuments.site/reader033/viewer/2022051609/548129c4b37959442b8b5d95/html5/thumbnails/4.jpg)
PhoneGap Plans
Building Cross-Plaftform Mobile Applications – PhoneGap Slide 04 of 15
![Page 5: 01 Building cross platform mobile applications with PhoneGap / Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles](https://reader033.vdocuments.site/reader033/viewer/2022051609/548129c4b37959442b8b5d95/html5/thumbnails/5.jpg)
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
![Page 6: 01 Building cross platform mobile applications with PhoneGap / Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles](https://reader033.vdocuments.site/reader033/viewer/2022051609/548129c4b37959442b8b5d95/html5/thumbnails/6.jpg)
Building Cross-Plaftform Mobile Applications – PhoneGap Slide 06 of 15
PhoneGap Build
![Page 7: 01 Building cross platform mobile applications with PhoneGap / Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles](https://reader033.vdocuments.site/reader033/viewer/2022051609/548129c4b37959442b8b5d95/html5/thumbnails/7.jpg)
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
![Page 8: 01 Building cross platform mobile applications with PhoneGap / Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles](https://reader033.vdocuments.site/reader033/viewer/2022051609/548129c4b37959442b8b5d95/html5/thumbnails/8.jpg)
Building Cross-Plaftform Mobile Applications – PhoneGap Slide 08 of 15
Registro [2/5]
![Page 9: 01 Building cross platform mobile applications with PhoneGap / Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles](https://reader033.vdocuments.site/reader033/viewer/2022051609/548129c4b37959442b8b5d95/html5/thumbnails/9.jpg)
Building Cross-Plaftform Mobile Applications – PhoneGap Slide 09 of 15
Registro [3/5]
![Page 10: 01 Building cross platform mobile applications with PhoneGap / Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles](https://reader033.vdocuments.site/reader033/viewer/2022051609/548129c4b37959442b8b5d95/html5/thumbnails/10.jpg)
Building Cross-Plaftform Mobile Applications – PhoneGap Slide 10 of 15
Registro [4/5]
![Page 11: 01 Building cross platform mobile applications with PhoneGap / Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles](https://reader033.vdocuments.site/reader033/viewer/2022051609/548129c4b37959442b8b5d95/html5/thumbnails/11.jpg)
Building Cross-Plaftform Mobile Applications – PhoneGap Slide 11 of 15
Registro [5/5]
![Page 12: 01 Building cross platform mobile applications with PhoneGap / Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles](https://reader033.vdocuments.site/reader033/viewer/2022051609/548129c4b37959442b8b5d95/html5/thumbnails/12.jpg)
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
![Page 13: 01 Building cross platform mobile applications with PhoneGap / Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles](https://reader033.vdocuments.site/reader033/viewer/2022051609/548129c4b37959442b8b5d95/html5/thumbnails/13.jpg)
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
![Page 14: 01 Building cross platform mobile applications with PhoneGap / Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles](https://reader033.vdocuments.site/reader033/viewer/2022051609/548129c4b37959442b8b5d95/html5/thumbnails/14.jpg)
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”
![Page 15: 01 Building cross platform mobile applications with PhoneGap / Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles](https://reader033.vdocuments.site/reader033/viewer/2022051609/548129c4b37959442b8b5d95/html5/thumbnails/15.jpg)
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
![Page 16: 01 Building cross platform mobile applications with PhoneGap / Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles](https://reader033.vdocuments.site/reader033/viewer/2022051609/548129c4b37959442b8b5d95/html5/thumbnails/16.jpg)
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
![Page 17: 01 Building cross platform mobile applications with PhoneGap / Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles](https://reader033.vdocuments.site/reader033/viewer/2022051609/548129c4b37959442b8b5d95/html5/thumbnails/17.jpg)
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
![Page 18: 01 Building cross platform mobile applications with PhoneGap / Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles](https://reader033.vdocuments.site/reader033/viewer/2022051609/548129c4b37959442b8b5d95/html5/thumbnails/18.jpg)
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
![Page 19: 01 Building cross platform mobile applications with PhoneGap / Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles](https://reader033.vdocuments.site/reader033/viewer/2022051609/548129c4b37959442b8b5d95/html5/thumbnails/19.jpg)
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