Академический Документы
Профессиональный Документы
Культура Документы
2
Desarrollo de Aplicaciones Híbridas
3
Desarrollo de Aplicaciones Híbridas
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
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
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
9
Phonegap – Usos
- Aplicaciones informativas
11
Phonegap – Usos
- Aplicaciones utilitarias
13
Phonegap – Usos
- Juegos
14
Phonegap – Usos
No debemos olvidar que phonegap trabaja con
una instancia de un navegador.
15
AGENDA
16
Phonegap - Primeros pasos
Instalar cordova:
C:\> npm install -g cordova
17
Phonegap - Primeros pasos
Accedemos al proyecto
cd [NOMBREPROYECTO]
19
AGENDA
20
Actividad 1 - Accediendo al dispositivo
Generar un contacto en la agenda del
teléfono desde una aplicación híbrida
21
Actividad 1 - Accediendo al dispositivo
Editamos el archivo js/index.js
var app = {
onDeviceReady: function() {
app.receivedEvent('deviceready');
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>
23
Actividad 2 (Individual) - Calculadora
Tips:
- No necesitamos
acceder al dispositivo
- Podemos debuggear
con un browser
- Podemos utilizar
librerias helpers
24
AGENDA
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
27