Desarrollo de Aplicaciones

Híbridas para Dispositivos

Móviles
Lic. Lisandro Delía
III-LIDI – Facultad de Informática
UNLP
 AGENDA

1. Desarrollo de Aplicaciones Híbridas

2. Phonegap
3. Phonegap - Usos
4. Phonegap - Primeros pasos
5. Phonegap – Ejercitación
6. Frameworks Front-End para
Aplicaciones Móviles

2
Desarrollo de Aplicaciones Híbridas

 Unen lo mejor de los modelos previos (aplicaciones web

y aplicaciones nativas): uso de HTML, Javascript y CCS
y acceso a las capacidades del dispositivo.
 La ejecución se realiza a través de un webview
generado por un framework (ej: Phonegap) en forma
específica para cada SO, con mayor performance que
una app web pero más lenta que una nativa.
 Un buen ejemplo es facebook

3
 Desarrollo de Aplicaciones Híbridas

 Debemos elegir la/s tecnología/s a utilizar. Existen múltiples

frameworks. Comúnmente mal comparados.

 Ej:
 What mobile framework to choose – PhoneGap, Sencha,
Titanium , jQuery Mobile…
http://altabel.wordpress.com/2013/04/01/what-mobile-
framework-to-choose-phonegap-sencha-titanium-jquery-
mobile/

4
 Desarrollo de Aplicaciones Híbridas
 Queremos escribir aplicaciones móviles portables y con
capacidad de acceder a las funcionalidades del dispositivo

 Phonegap (distribución del proyecto Cordova de Apache

Software Foundation) (http://www.phonegap.com/)

 Titanium Appcelerator
(http://www.appcelerator.com/titanium/)
 Nos concentraremos en Phonegap, merece un curso aparte la
comparación entre estos.
 http://www.appcelerator.com/blog/2012/05/comparing-titani
um-and-phonegap/

 Cooconjs https://www.ludei.com/cocoonjs/

5
 AGENDA

1. Desarrollo de Aplicaciones Híbridas

2. Phonegap
3. Phonegap - Usos
4. Phonegap - Primeros pasos
5. Phonegap – Ejercitación
6. Frameworks Front-End para
Aplicaciones Móviles

6
 Phonegap
Phonegap es un framework gratuito y open source.
Phonegap crea una app nativa, compuesta de un WebView
encargado de renderizar contenido HTML5, CSS y JavaScript

Phonegap es portable:
- Amazon Fire OS
- Android
- Bada ( no al 100% )
- Blackberry 10
- iOS
- Symbian ( no al 100% )
- webOS
- Windows Phone
- Windows 8
- Tizen

7
 Phonegap
Phonegap provee una API JavaScript para acceder a las capacidades del
dispositivo:
- Acelerómetro
- Almacenamiento
- Cámara
- Compás
- Contactos
- Geolocalización
- Notificaciones
- y más…

http://docs.phonegap.com/en/edge/guide_platforms_index.md.html

8
 AGENDA

1. Desarrollo de Aplicaciones Híbridas

2. Phonegap
3. Phonegap - Usos
4. Phonegap - Primeros pasos
5. Phonegap – Ejercitación
6. Frameworks Front-End para
Aplicaciones Móviles

9
 Phonegap – Usos
- Aplicaciones informativas

Este tipo de aplicaciones son las que funcionan mejor

con PhoneGap, ya que permiten mostrar
información estática o dinámica sobre productos y
servicios, desplegar textos, vídeos elementos
gráficos de alta calidad.

Gran parte de las aplicaciones disponibles en las App

Stores entran en esta clasificación. Crearlas con
PhoneGap es fácil y rápido, con un resultado final
que es prácticamente igual al de una aplicación
nativa.
10
 Phonegap – Usos
- Ej Aplicaciones
informativas

METAR Reader es una

aplicación para pilotos
aéreos que utiliza
PhoneGap para mostrar e
interpretar información
estándar sobre las
condiciones meteorológicas
en diferentes aeropuertos.

11
 Phonegap – Usos
- Aplicaciones utilitarias

Esta es una de las categorías más

populares en las App Stores. Van desde lo
crucial a lo más trivial, pasando por
calculadoras de todo tipo, linternas,
monitores de memoria, lectores de
códigos QR y miles más.

Entre las aplicaciones utilitarias podemos

incluir las que nos ayudan a planificar y
organizar nuestras tareas como Diary
Mobile. Esta aplicación creada con
PhoneGap permite gestionar tareas y
eventos que se sincronizan en la nube.
12
 Phonegap – Usos
- Adaptaciones de
Aplicaciones Web
Una de las ventajas de PhoneGap es que
pueden crear aplicaciones completas
usando los mismos lenguajes que se
utilizan para crear sitios web: HTML5,
CSS3 y Javascript.
Gracias a esta capacidad, las empresas
pueden ahorrar tiempo y dinero
reutilizando sus aplicaciones basadas en
web.
El mejor ejemplo de este uso es la
aplicación de Wikipedia, creada con
PhoneGap

13
 Phonegap – Usos
- Juegos

Aunque PhoneGap no fue

creado como una plataforma
para juegos, es posible
desarrollarlos pero con
muchas restricciones.

El juego Orbium creado con

PhoneGap demuestra que es
posible crear juegos básicos
en esta plataforma.

14
 Phonegap – Usos
No debemos olvidar que phonegap trabaja con
una instancia de un navegador.

Existe una carga adicional para el procesador

pues el navegador debe renderizar los elementos
y realizar los cálculos de JavaScript

No se recomiendan aplicaciones que usen

animaciones avanzadas y cálculos intensivos.
Siempre se debe poner especial cuidado a todo lo
que tiene que ver con el rendimiento, en especial
si se piensa publicar aplicaciones que se ejecuten
en equipos antiguos o con procesador lento.

15
 AGENDA

1. Desarrollo de Aplicaciones Híbridas

2. Phonegap
3. Phonegap - Usos
4. Phonegap - Primeros pasos
5. Phonegap – Ejercitación
6. Frameworks Front-End para
Aplicaciones Móviles

16
 Phonegap - Primeros pasos
Instalar cordova:
C:\> npm install -g cordova

Npm es un package manager de la plataforma node.js.

Que es node.js ?
http://www.ibm.com/developerworks/ssa/opensource/library/o
s-nodejs/

Crear un proyecto nuevo:

cordova create [NOMBREPROYECTO]

17
 Phonegap - Primeros pasos
Accedemos al proyecto
cd [NOMBREPROYECTO]

Indicamos con que plataforma queremos trabajar:

cordova platforms add android

Para generar el apk para instalar en android:

cordova build android

Para ejecutar la aplicación en un emulador android:

cordova run android

Si no se reconoce los comandos de android, seguramente este faltando:

export JAVA_HOME=/usr/lib/jvm/java-7-openjdk-i386
export ANDROID_HOME=/opt/adt-bundle-linux-x86_64-20140321/sdk/tools
export ANDROID_PLATFORM_TOOLS=/opt/adt-bundle-linux-x86_64-20140321/sdk/platform-tools
export PATH=$ANDROID_HOME:$ANDRIOD_PLATFORM_TOOLS:$PATH
18
 Phonegap - Primeros pasos
Si aun no tenemos creado un emulador android:
-Verificar las API de Android que estan instaladas
android list targets
-Veremos algo del estilo:
-Available Android targets:
id: 1 or "android-3"
     Name: Android 1.5
     Type: Platform
     API level: 3
     Revision: 4
     Skins: QVGA-L, HVGA-L, HVGA (default), HVGA-P, QVGA-P
-Crear un emulador Android
android create avd -n [NOMBREEMULADOR] -t 1
-Donde 1 es el ID del android target
-Ejecutar emulador Android
emulator @[NOMBREEMULADOR]

19
 AGENDA

1. Desarrollo de Aplicaciones Híbridas

2. Phonegap
3. Phonegap - Usos
4. Phonegap - Primeros pasos
5. Phonegap – Ejercitación
6. Frameworks Front-End para
Aplicaciones Móviles

20
Actividad 1 - Accediendo al dispositivo
Generar un contacto en la agenda del
teléfono desde una aplicación híbrida

Necesitamos indicarle a phonegap que

utilizaremos el plugin de contactos

$ cordova plugin add https://git-wip-

us.apache.org/repos/asf/cordova-plugin-contacts.git
$ cordova plugin ls
    [ 'org.apache.cordova.contacts' ]

21
 Actividad 1 - Accediendo al dispositivo
Editamos el archivo js/index.js
var app = {
    onDeviceReady: function() {
        app.receivedEvent('deviceready');

        var myContact = navigator.contacts.create({"displayName": "TestUser"});

        myContact.note = "This contact has a note.";

        app.receivedEvent('contactcreated');
    
myContact.save(app.onContactSaveSuccess,app.onContactSaveError);
   },
   onContactSaveSuccess: function(contact) {
       window.alert("Save Success");
   },
   onContactSaveError: function(contact) {
       window.alert("Save Failed");
   },
};

22
Actividad 1 - Accediendo al dispositivo
Editamos el archivo index.html
<div class="app">

//………………
<div id="contactcreated" class="blink">
<p class="event listening">Creating Contact</p>
<p class="event received">Contact created</p>
</div>

</div>

Probar funcionamiento mediante: cordova run android

23
 Actividad 2 (Individual) - Calculadora
Tips:

- No necesitamos
acceder al dispositivo

- Podemos debuggear
con un browser

- Podemos utilizar
librerias helpers

24
 AGENDA

1. Desarrollo de Aplicaciones Híbridas

2. Phonegap
3. Phonegap - Usos
4. Phonegap - Primeros pasos
5. Phonegap – Ejercitación
6. Frameworks Front-End para
Aplicaciones Móviles

25
Frameworks Front-end para App Móvil
Existen una gran cantidad de frameworks para móviles que nos
pueden ayudar a hacer interesantes interfaces móviles

-JqueryMobile
-Kendo UI
-Sencha Touch
-LungoJS
-Dev Extreme – ex PhoneJS
-Intel App Framework – ex jQMoby
-Jo
-Chocolate Chip UI
-Y muchos más…

26
Actividad 3 - Generación de app según demo TipCalculator

Un ejemplo concreto con PhoneJS

https://github.com/DevExpress/PhoneJS-TipCalculator

-Descargar la demo y probar en un browser

Mozilla Firefox o chrome.exe --disable-web-

security

-Podemos utilizar el demo en una aplicación

phonegap

-El producto final es el mismo en un browser o en

el emulador?

27