Aplicaciones Móbiles

Universidad Nacional del Comahue

Facultad de Informatica

Frameworks e Interoperabilidad

Phonegap

Veamos el siguiente ejemplo:

http://meta.fi.uncoma.edu.ar/mrotter/calc/calccosmica/

Phonegap

A tener en cuenta:

• Versiones de phonegap
• Sistemas operativos y sus versiones

Ejemplo Blackberry (deprecate 10/10/2014):

- A partir de phonegap 3.0 se compilan aplicaciones para versión Blackberry 10 en adelante.

- Para la creación de aplicaciones para blackberry 7 es necesario utilizar la versión phonegap 2.9

http://phonegap.com/blog/2014/02/21/platform-deprecation/

http://phonegap.com/blog/2014/10/01/upcoming-deprecations/

Referencias

Phonegap: http://phonegap.com/start

Comunidad habla hispana: http://www.phonegapspain.com/

Compilador en la nube: https://build.phonegap.com

Comparativa app nativia-hibrida-web: http://blogthinkbig.com/aplicaciones-web-nativas-hibridas/

Compilar localmente: http://www.phonegapspain.com/topic/compilar-con-phonegap-build-o-en-local/

http://www.desarrolloweb.com/articulos/compilador-phonegap.html

Config.xml: http://www.phonegapspain.com/configapcomo-crear-tu-config-xml-de-forma-rapida/

http://docs.phonegap.com/es/3.5.0/config_ref_index.md.html

http://configap.com/

Funciones Phonegap: http://docs.phonegap.com/en/3.5.0/cordova_plugins_pluginapis.md.html

Eventos Phonegap: http://docs.phonegap.com/en/3.5.0/cordova_events_events.md.html

Acelerómetro: http://www.xatakamovil.com/varios/el-acelerometro-en-los-moviles

Phonegap: Eventos

Entre otros eventos existen:

deviceready: se desencadena cuando Phonegap

está completamente cargado

pause: se dispara cuando la app se

coloca en background (2do plano)

resume: se dispara cuando la app se recupera del background

backbutton: cuando se presiona el botón “hacia atrás”

menubutton

searchbutton

volumedownbutton

volumeupbutton

batterylow

batterystatus

document.addEventListener(

"backbutton",

yourCallbackFunction,

false);

Phonegap: API

Entre otras funciones existen:

Aplicaciones Móviles

Cámara: Capturar una foto con la cámara del dispositivo.

Contactos: Trabajar con la base de datos de contacto de dispositivos.

Movimiento de dispositivo (acelerómetro):

nos permite detectar el movimiento y el giro. Ej: la wii

Orientación de dispositivo (brújula/compass):

obtener la dirección que apunta el dispositivo.

Sistema de archivos - Transferencia de archivos

Geolocalización: Conocer la ubicación de su aplicación.

Audio: Grabar y reproducir archivos de audio.

Información de red (conexión)

SplashScreen: Mostrar / ocultar la pantalla de presentación.

Vibración: hacer vibrar el dispositivo.

navigator.camera.getPicture

( cameraSuccess,

cameraError,

cameraOptions );

http://www.phonegapspain.com/tutorial/como-capturar-y-obtener-fotos-desde-nuestra-app/

PHONEGAP

Proyecto Phonegap con:

config.xml

• No tenemos que descargar y configurar todos los SDK

• compilamos 1 vez en la nube con: http://build.phonegap.com

• Solo configuramos el config.xml (build.phonegap establece la version y agrega phonegap.js)

App para:

...

PHONEGAP

Proyecto Phonegap con:

Ventaja: escribimos

la app con la misma tecnología para todas

las plataformas

Compilar

localmente con:

SDK iphone en MAC

+ config.xml

+ proyecto phonegap

...

SDK Android

+ config.xml

+ proyecto phonegap

Aptana Studio +

Nokia web Runtime

+ config.xml

+ proyecto phonegap

App para:

...

Build.phonegap.com

Nos registramos en “build.phonegap.com”.

Podemos asociar la cuenta de buil.phonegap.com a nuestra cuenta en Github

Aplicaciones Hibridas:

App Hibridas con

PHONEGAP

¿Conocemos HTML, CSS, JavaScript?

¿Nos interesa poder acceder a las APIs del dispositivo? Usaríamos la cámara, el gps, teléfono, contactos,… Está bueno!...

Podemos tener funcionalidades offline, no requerimos conectarnos con un servidor web como las AppWeb.

No tendriamos el marco de un navegador en la aplicación, estéticamente son similares a las nativas

Tema a investigar: publicación en los

Stores de aplicaciones.

• Framework para desarrollo de app móviles con JavaScript, HTML5 y css3.

Tipos de Aplicaciones Móviles:

• Adquirido por Adobe, por lo que lo podemos escuchar nombrar como Apache Cordova.

Tipos de Aplicaciones Moviles:

• Es una implementación de código abierto de estándares open-source y libres

App Nativas:

App Híbridas:

. Multi-plataforma

. Escritas con tecnologías web (html5, css3, Js)

. Se ejecuta en el dispositivo, soporte offline

. Acceso a las APIs nativas

. Distribución en plataformas de distribución

. Afinidad única plataforma

. Escritas con SDK de la plataforma

. Debe ser escrita para cada plataforma

. Acceso a las APIs nativas

. Mejor performance gráfica

. Distribución a través de plataformas de distribución (appStore, google play, ...)

• Provee una API para acceder a elementos del móvil: cámara, contactos, red, almacenamiento, notificaciones, etc.

Acceso a las características del dispositivo

App Web:

. Multi-plataforma

. Escritas con tecnologías web (html, css, Js,

o en el lado del servidor (php, asp.net, etc.))

. Se ejecuta en un servidor web,

visible en múltiples dispositivos

. Updates centralizados

• Permite que las aplicaciones se ejecuten en el navegador (chrome, mozilla,etc.) e integrarlo con frameworks como Jquery Mobile

Funcionamiento en diferentes plataformas

Tipos de Aplicaciones Moviles:

Nativas:

íntegramente programadas en el entorno de

desarrollo específico para cada sistema operativo.

desarrolladas en HTML5 para el navegador

desarrolladas en parte con el entorno de desarrollo nativo y en parte en lenguaje WEB (HTML5).

Web:

Híbridas:

Phonegap: config.xml

http://docs.phonegap.com/es/3.5.0/config_ref_index.md.html

Ejemplo config.xml

Build.phonegap.com

Podemos subir un .zip con

el proyecto o utilizar github (.git):

Podría usar http://configap.com/

para crear su propio config.xml

Phonegap

La pinta de un proyecto para compilar con buil.Phonegap

Archivo configuración