final - intro a phonegapphonegap

8/18/2019 Final - Intro a PhoneGapPhoneGap

1/28


2/28

AGENDA

1. Desarrollo de Aplicaciones Híbridas

2. PhoneGap

3. PhoneGap - Usos4. PhoneGap - Primeros pasos

5. PhoneGap – Ejercitación

6. Frameworks Front-End para AplicacionesMóviles


3/28

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 unframework (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

Desarrollo de Aplicaciones

Híbridas

3


4/28

Desarrollo de AplicacionesHíbridas

4

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

frameworks. Comúnmentem l comp r dos

.

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/


5/28

Desarrollo de AplicacionesHíbridas

5

Queremos escribir aplicaciones móviles port bles y con capacidad de ccederl s funcion lid des 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-titanium-and-

phonegap/

AppGyver http://www.appgyver.com/

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

http://www.phonegap.com/http://www.appcelerator.com/blog/2012/05/comparing-titanium-and-phonegap/http://www.appcelerator.com/blog/2012/05/comparing-titanium-and-phonegap/http://www.appgyver.com/http://www.appgyver.com/http://www.appcelerator.com/blog/2012/05/comparing-titanium-and-phonegap/http://www.appcelerator.com/blog/2012/05/comparing-titanium-and-phonegap/http://www.appcelerator.com/blog/2012/05/comparing-titanium-and-phonegap/http://www.appcelerator.com/blog/2012/05/comparing-titanium-and-phonegap/http://www.appcelerator.com/blog/2012/05/comparing-titanium-and-phonegap/http://www.appcelerator.com/blog/2012/05/comparing-titanium-and-phonegap/http://www.appcelerator.com/blog/2012/05/comparing-titanium-and-phonegap/http://www.appcelerator.com/blog/2012/05/comparing-titanium-and-phonegap/http://www.phonegap.com/


6/28

AGENDA


2. PhoneGap



6. Frameworks Front-End para Aplicaciones

Móviles


7/28


8/28

PhoneGap

PhoneGap crea una app nativa, compuesta de unWebView encargado de renderizar contenido HTML5,CSS y JavaScript

PhoneGap es portable:- Amazon Fire OS

- Android

- Blackberry 10

- Firefox OS

- iOS- Ubuntu

- Windows Phone 8

- Windows

- Tizen http: www.phonegap.com


9/28


10/28

AGENDA


2. PhoneGap




Móviles


11/28

PhoneGap – Usos

- Aplicaciones informativas

Este tipo de aplicaciones son las que mejor funcionancon PhoneGap, ya que permiten mostrar informaciónestática o dinámica sobre productos y servicios,desplegar textos, vídeos elementos gráficos de altacalidad.

Gran parte de las aplicaciones disponibles en las AppStores entran en esta clasificación. Crearlas conPhoneGap es fácil y rápido, con un resultado final quees prácticamente igual al de una aplicación nativa.


12/28

PhoneGap – Usos

- Ej Aplicacionesinformativas

METAR Reader es una

aplicación para pilotos aéreosque utiliza PhoneGap paramostrar e interpretar informaciónestándar sobre las condicionesmeteorológicas en diferentes

aeropuertos.


13/28

PhoneGap – Usos- Aplicaciones utilitarias

Esta es una de las categorías máspopulares en las App Stores. Van desde locrucial a lo más trivial, pasando porcalculadoras de todo tipo, linternas,monitores de memoria, lectores de códigosQR y miles más.

Entre las aplicaciones utilitarias podemosincluir las que nos ayudan a planificar yorganizar nuestras tareas como DiaryMobile. Esta aplicación creada conPhoneGap permite gestionar tareas yeventos que se sincronizan en la nube.


14/28

PhoneGap – Usos- Adaptaciones de Aplicaciones

Web

Una de las ventajas de PhoneGap es quepueden crear aplicaciones completasusando los mismos lenguajes que se utilizan

para crear sitios web: HTML5, CSS3 yJavascript.

Gracias a esta capacidad, las empresaspueden ahorrar tiempo y dinero reutilizandosus aplicaciones basadas en web.

El mejor ejemplo de este uso es laaplicación de Wikipedia, creada conPhoneGap


15/28

PhoneGap – Usos

- Juegos

Aunque PhoneGap no fue creadocomo una plataforma para juegos,es posible desarrollarlos pero conmuchas restricciones.

El juego Orbium creado conPhoneGap demuestra que es

posible crear juegos básicos enesta plataforma.


16/28

PhoneGap – UsosNo debemos olvidar que PhoneGap trabaja conuna instancia de un navegador.

Existe una carga adicional para el procesadorpues el navegador debe renderizar los elementos

y realizar los cálculos de JavaScript

No se recomiendan aplicaciones que usenanimaciones avanzadas y cálculos intensivos.

Siempre se debe poner especial cuidado a todo loque tiene que ver con el rendimiento, en especialsi se piensa publicar aplicaciones que se ejecutenen equipos antiguos o con procesador lento.


17/28

AGENDA


2. PhoneGap



6. Frameworks Front-End para

Aplicaciones Móviles


18/28

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/os-

nodejs/

Crear un proyecto nuevo:

cordova create [NOMBREPROYECTO]


19/28


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


20/28


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.5Type: Platform

API level: 3Revision: 4Skins: QVGA-L, HVGA-L, HVGA (default), HVGA-P, QVGA-P

- Crear un emulador Androidandroid create avd -n [NOMBREEMULADOR] -t 1

- Donde 1 es el ID del android target

- Ejecutar emulador Android

emulator @[NOMBREEMULADOR]


21/28

AGENDA


2. PhoneGap




Móviles


22/28

22

Ejercicio 1: Calculadora

Tips:

- No necesitamos acceder al dispositivo

- Podemos debuggear con un browser

- Podemos utilizar librerias helpers

PhoneGap – Ejercitación


23/28


Ejercicio 2: Generar un contacto en la agenda del

teléfono desde una aplicación híbrida

Necesitamos indicarle a PhoneGap que utilizaremosel 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' ]


24/28

PhoneGap – EjercitaciónEditamos el archivo js/index.js

var app = {initialize: function() {

this.bindEvents();},bindEvents: function() {

document.addEventListener('deviceready', function (){app.onDeviceReady();

}, true);},receivedEvent: function(id) {

var parentElement = document.getElementById(id);var listeningElement = parentElement.querySelector('.listening');var receivedElement = parentElement.querySelector('.received');

listeningElement.setAttribute('style', 'display:none;');receivedElement.setAttribute('style', 'display:block;');

console.log('Received Event: ' + id);},


25/28


26/28


Editamos el archivo index.html

Apache Cordova

Conectando el dispositivo

Dispositivo listo

Creando contacto

Contacto creado

app.initialize();


27/28

AGENDA


2. PhoneGap



6. Frameworks Front-End para

Aplicaciones Móviles


28/28

Frameworks Front-endpara Aplicaciones Móviles

Existen una gran cantidad de frameworks para móviles que nospueden ayudar a hacer interesantes interfaces móviles

- Ionic- Sencha Touch

- Onsen UI- JqueryMobile- Kendo UI- Ratchet- Dev Extreme – ex PhoneJS

- Intel App Framework –

ex jQMoby- LungoJS- Jo- Chocolate Chip UI- Y muchos más…

final - intro a phonegapphonegap

Documents