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