Desarrollo de apps móvil multiplataforma

Desarrollo de apps móvil multiplataforma

Transcript

1. Desarrollo de apps móviles multiplataforma José Manuel Ortega Candel
2. Desarrollo de apps móviles multiplataforma Native VS Hybrid vs
3. Web-app Hibrída Nativa Se ejecuta en navegador. HTML,CSS,Javascript Se ejecuta en el componente webview de cada plataforma HTML,CSS,Javascript ObjetiveC for IOS Java for Android Acceso por url Se distribuyen en el market como apps nativas Se distribuyen en el market como apps nativas Limitado acceso a HW Acceso completo a HW y API nativa mediante javascript Acceso completo a HW y API nativa Jquery Mobile  PhoneGap+JavaScript framework  Titanium iOS SDK Android SDK Rápido Rapidez depende del framework Muy Rápido Introducción
4. PhoneGap • Phonegap es un wrapper alrededor del navegador del dispositivo que permite acceder a los recursos del mismo • Pertenece a Adobe • Liberado como projecto open source por la fundación apache bajo el nombre de cordova • Acualmente van por la versión 3.0 • Hay 2 formas para crear el fichero binario de la app  Entornos desarrollo para cada plataforma  PhoneGap Build • No tiene UI. Será necesario emplear alguno de los frameworks javacript (jQuery Mobile, Sencha, Backbone) http://phonegap.com/ http://www.phonegapspain.com/
5. Arquitectura
6. Javascript API Reference http://docs.phonegap.com/
7. Eclipse Plugin-Instalación http://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with- phonegap/tags/r1.2/download
8. Eclipse Plugin- Projecto +Librerías
9. Proyecto Android
10. Configuración Android package com.phonegap.exampleapp; import android.os.Bundle; import com.phonegap.*; public class exampleapp extends DroidGap { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.setIntegerProperty("splashscreen", R.drawable.splash); super.loadUrl(file:///android_asset/www/index.html,4000);}} Permisos AndroidManifest.xml <<uses-permission android:name="android.permission.READ_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_CONTACTS" /> <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.VIBRATE" /> <uses-permissionandroid:name="android.permission.ACCESS_COARSE_LOCATION"/> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
11. Javascript Inicializar-Capturar el evento deviceready Búsqueda de contactos Geolocalización (HTML5 || Cordova Native Geolocation) https://github.com/apache/cordova-plugin-geolocation <script type="text/javascript" charset="utf-8" src="cordova.js"></script> <script type="text/javascript" charset="utf-8"> // Espera a cargar las librerías del API document.addEventListener("deviceready", onDeviceReady, false); </script> function onDeviceReady(){ var options = new ContactFindOptions(); options.filter = «filter»; options.multiple = true; navigator.contacts.find(["displayName","emails"], foundContacts, errorContacts, options); }); function onDeviceReady() { navigator.geolocation.getCurrentPosition(onSuccess, onError); } var geoLocation = cordova.require('cordova/plugin/geolocation'); geoLocation.getCurrentPosition(onSuccess, onError);
12. Acceso a la cámara y galería de imágenes function takeNewImage() { navigator.camera.getPicture(onSuccess, onFail,{ quality: 100, targetWidth: 250, targetHeight: 250 });} function selectImageFromLibrary () { navigator.camera.getPicture(onSuccess, onFail,{ quality: 100, destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.PHOTOLIBRARY, targetWidth: 250, targetHeight: 250 });} function onSuccess(imageURI) { $('#image').attr('src', imageURI); }
13. Check connection / Eventos function checkConnection() { var networkState = navigator connection.type; var states = {}; states[Connection.UNKNOWN] = 'Unknown connection'; states[Connection.ETHERNET] = 'Ethernet connection'; states[Connection.WIFI] = 'WiFi connection'; states[Connection.CELL_2G] = 'Cell 2G connection'; states[Connection.CELL_3G] = 'Cell 3G connection'; states[Connection.CELL_4G] = 'Cell 4G connection'; states[Connection.NONE] = 'No network connection'; return states[networkState]; } function onDeviceReady() { document.addEventListener("online", isOnline, false); document.addEventListener("offline", isOffline, false); }
14. PhoneGap Build http://build.phonegap.com/ • Servicio en la nube que permite crear los ficheros binarios para cada plataforma a partir de un proyecto que contenga las librerías de phonegap • GitHub compatible
15. Arquitectura data-role • data-role=”page” • data-role=”header” • data-role=”footer” • data-role=”navbar” • data-role=”button” • data-role=”listview” • data-role=”controlgroup” • data-role=”fieldcontain” <body> <div data-role="page" id=“pag" data-add-back-btn=”true”> <header data-role="header" data-position="fixed"> Pag. secundaria </header> <div data-role="content“> Esto es la página secundaria </div> <footer data-role="footer" data-position="fixed"> Pie </footer> </div> </body>
16. Librerías <!– jQuery Mobile CSS --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile- 1.3.2.min.css" /> <!– jQuery --> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <!– jQuery Mobile JavaScript --> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile- 1.3.2.min.js"></script>
17. Componentes data-role="listview" data-filter="true" data-role=”list-divider” class=”ui-li-count” data-role="fieldcontain"
18. Componentes data-role="collapsible-set" data-filter-reveal="true" data-role="panel" data-filter-placeholder="Search"
19. Transiciones y diálogos <a href="index.html" data-transition=“fade“></a> <a href="index.html" data-rel=“dialog“ data-transition="pop"></a> $.mobile.changePage("index.html", "fade"); $.mobile.pageLoading $('.ui-loader h1').text(„Loading');
20. Eventos • pageinit • pagebeforeshow • pagebeforehide • pageshow • pagehide //Se ejecuta una vez para el documento entero $(document).ready(function() { //personalizar el mensaje que sale cuando se esperan datos AJAX $.mobile.loadingMessage = "Cargando datos" //personalizar el texto del botón para ir a la página anterior $.mobile.page.prototype.options.backBtnText = "Atrás" }) //Se ejecuta una vez para cada página $('#pagBusqueda').bind('pageinit', function() { $('#botonBuscar').click(buscar) }) // Se ejecuta antes de mostrar una página $('#pagDetalles').bind('pagebeforeshow', function() { ... })
21. Codiqa-Prototipado
22. Ventajas & Desventajas Ventajas • Desarrollo rápido de interfaces. • Elementos de interfaz adaptado a móviles • Sintaxis sencilla. • Efectos prediseñados • Manejo de eventos. • Baja curva de aprendizaje. • Personalización del estilo visual (temas) Desventajas • Agrega peso extra a la aplicación. • Manejo complejo de CSS. • Los efectos como transiciones no funcionan fluidamente en equipos de baja gama. • Las aplicaciones más grandes pueden hacer lenta la carga por trabajar en un solo archivo. • Menos control general del código.
23. http://www.jqmgallery.com/ http://view.jquerymobile.com/1.3.2/dist/demos/examples/ Demos
24. Demo
25. Sencha Touch • Sencha Touch es un framework para el desarrollo de aplicaciones móviles centrado en WebKit • Basado en EXTJS • La apariencia es similar al de las aplicaciones nativas en Android, iOS y BlackBerry • Implementa el patrón de diseño MVC en el lado del cliente • Permite leer datos directamente a través de AJAX, JSON o la capacidad local storage de HTML5 Instalación • Descargar el SDK desde su página web • http://www.sencha.com/products/touch/download Navegadores compatibles • Basados en WebKit: Safari, Chrome, Opera,Epiphany
26. Librerías index.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"> <script src="lib/touch/sencha-touch-all.js" type="text/javascript" /> <link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" /> <script src="app.js" type="text/javascript" /> </head> <body></body> </html>
27. Arquitectura Model: Los modelos representan objetos lógicos con lo que trabaja nuestra aplicación, donde definiremos qué campos tiene y qué métodos actuarán sobre ellos. View: Permiten visualizar los datos en los componentes que ofrece la arquitectura. Controller: Permite interactuar con las acciones del usuario.Responde a los eventos que se producen en las vistas y manejan el traspaso de datos entre Model y Store. Store: Son colecciones de modelos, y serán utilizados por varios componentes. Profile: Permite customizar los elementos UI.
28. MVC var App=new Ext.Application({ name: „MyApp„ //variable global }); Modelo Ext.regModel(„MyApp.models.MyModel', { fields: [ ] }); Vista MyApp.views.viewport = new Ext.Panel( { layout:‟fit‟ //disposición elementos }); Store MyApp.stores.MyStore= new Ext.data.Store({ model: „myModel', proxy: {} }); MyApp.views.* MyApp.controllers.* MyApp.models.* MyApp.stores.* Controlador Ext.define('MyApp.controllers.MyContoller', { extend: 'Ext.app.Controller', config: { models: [„ MyApp.models.MyModel '], stores: [' MyApp.stores.MyStore '], views: [ „MyApp.views.viewport ‟], }
29. Proyecto –Look && Feel <!--The default Sencha Touch style--> <link rel="stylesheet" href="resources/css/sencha-touch.css" /> <!--The default iOS style--> <link rel="stylesheet" href="resources/css/apple.css" /> <!--The default Android style--> <link rel="stylesheet" href="resources/css/android.css" /> <!--The default BlackBerry 6 style--> <link rel="stylesheet" href="resources/css/bb6.css" />  sencha-touch.js  sencha-touch.css
30. Componentes
31. Ext.dataview.Model / Ext.data.Store Ext.application({ launch: function(){ Ext.define('Programming',{ extend:'Ext.data.Model', config:{ fields:['lenguaje', 'descripcion'] } }); var datos = { dataProgramming:[ {lenguaje: 'Java', descripcion: 'Creado por Sun Microsystems'},{lenguaje: 'JavaScript', descripcion: 'Creado por Netscape '},{lenguaje: 'C++', descripcion: 'Creado por Bjarne Stroustrup'},{lenguaje: 'PHP', descripcion: 'Creado por Rasmus Lerdorf'}, ] }; var store = Ext.create('Ext.data.Store',{ model: 'Programming', autoLoad: true, getGroupString : function(record) { return record.get('lenguaje')[0]; }, sorters: ['lenguaje', 'descripcion'], data: datos, proxy:{ type: 'memory', reader:{ type: 'json', rootProperty: „dataProgramming' } } } );
32. Ext.dataview.List Ext.Viewport.add(Ext.create('Ext.Panel', { layout:'fit', items:[{ xtype:'toolbar', docked: 'top', title: 'Lenguajes de programación‟}, { xtype: 'list', grouped : true, onItemDisclosure: true, onItemTap: true, store: store, itemTpl: '<strong>{lenguaje} <br/>{descripcion}</strong>' }] }));
33. Listeners listeners:{ itemtap: function(record,index){ //index es el índice de la fila seleccionada //record representa el objeto //carga el registro en un formulario MyApp.views.myForm.load(record); } itemdoubletap: function(record,index){ } discloure: function(index,record){ } }
34. Ext.Map var mapdemo = Ext.create('Ext.Map', { mapOptions : { center : new google.maps.LatLng(40.3908, -3.6300), zoom : 16, mapTypeId : google.maps.MapTypeId.ROADMAP, navigationControl: true, navigationControlOptions: { style: google.maps.NavigationControlStyle.DEFAULT }}, listeners: { maprender: function(comp, map) { var marker = new google.maps.Marker({ position: new google.maps.LatLng(40.3908, -3.6300), title : 'Campus UPM', map: map }); google.maps.event.addListener(marker, 'click', function() { new google.maps.InfoWindow({ content: 'Campus UPM„ }).open(map, marker); }); setTimeout(function() { map.panTo(position); }, 500);}}});
35. Browser support / S.O/ Connection <script type="text/javascript"> if (!Ext.browser.is.WebKit) { alert("The current browser is unsupported.\n\nSupported browsers:\n" + "Google Chrome\n" + "Apple Safari\n" + "Mobile Safari (iOS)\n" + "Android Browser\n" + "BlackBerry Browser" ); } </script> if (Ext.os.is.Android){ Ext.Msg.alert("INFO", "Android user"); } else if (Ext.os.is.Blackberry){ Ext.Msg.alert("INFO", "Blackberry user"); } else if (Ext.os.is.iPad){ Ext.Msg.alert("INFO", "iPad user"); } else if (Ext.os.is.Windows) { Ext.Msg.alert("INFO"," Win user "); } <script type="text/javascript"> Ext.device.Connection.isOnline(); Ext.device.Connection.getType(); </script>
36. Demos && API Docs http://dev.sencha.com/deploy/touch/examples/production/index.html http://docs-origin.sencha.com/touch/2.2.1/ http://docs.sencha.com/touch/2.2.1/#!/example/kitchen-sink
37. Sencha Touch vs Jquery Mobile Sencha Touch: • API más potente. Todo es personalizable. • Mayor número de controles IU,transiciones y animaciones • Rendimiento en iOS es superior con respecto al resto de librerías • Patrón MVC • Mayor potencia de configuración • Mayor curva de aprendizaje. Más tiempo de desarrollo. • Se necesitan unos conocimientos más avanzados de Javascript • En iOS hay limitaciones como el acceso a la cámara y contactos Jquery Mobile: • Muy sencillo de aprender si ya se conoce jquery • Compatible con mayor número de dispositivos • No emplea ningún patrón. Es necesario utilizar otro framework como Backbone • Rendimiento suele ser inferior • No dispone de muchos controles para el diseño de la interfaz
38. Demo
39. • http://backbonejs.org/ • Permite implementar la lógica a nivel de navegación siguiendo un patrón similar a MVC / MVVM. La vista actúa también de controlador. • Perfecto para usarlo con Jquery Mobile • Pesa muy poco(6 Kb la versión minimizada) • Dependencias:Underscore.js && (Zepto.js || JQuery.js) • Se integra con la mayoría de frameworks javascript para el manejo del DOM • LinedkIn, Soundcloud, Basecamp, Codiqa Backbone Vista HTML + CSS+ Template Controlador Backbone.View Modelo Backbone.Model Manipulación del DOM con Jquery y templates DOM View Events El modelo se actualiza con la interacción del usuario Model Events
40. Backbone $(document).ready(function () { app = new AppRouter(); Backbone.history.start(); }); var AppRouter = Backbone.Router.extend({ routes:{ "":"home“ }, home:function () { this.changePage(new HomeView()); }, changePage:function (page) { $(page.el).attr('data-role', 'page'); page.render(); $('body').append($(page.el)); $.mobile.changePage($(page.el), {changeHash:false}); } }); window.HomeView = Backbone.View.extend({ template:_.template($('#home').html()), render:function (eventName) { $(this.el).html(this.template()); return this; }}); <!-- The Template --> <script type="text/template" id="home"> <div data-role="header"> </div> <div data-role="content“> </div> <div data-role=“header”> </div> </script>
41. Backbone • Deshabilitar navegación con Jquery Mobile <script src="js/jqm-config.js"></script> $(document).bind("mobileinit", function () { $.mobile.ajaxEnabled = false; $.mobile.linkBindingEnabled = false; $.mobile.hashListeningEnabled = false; $.mobile.pushStateEnabled = false; // Elimina del DOM aquellos elementos que contengan // data-role=page $('div[data-role="page"]').live('pagehide', function (event, ui) { $(event.currentTarget).remove(); }); });
42. Appcelerator titanium • FrameWork para crear aplicaciones nativas únicamente con JavaScript • Soporta Android, iOS ,BlackBerry,Tizen • Open source(Apache License 2.0).Soporte de pago • http://appcelerator.com • https://github.com/appcelerator • http://www.appsdev-es.com/ • http://docs.appcelerator.com/titanium/3.0/ Características • Interactuar con audio y video mediante streaming • Interactuar con la cámara • Geolocalización y mapas • Interacción con Redes sociales • Acceso al sistema de ficheros y base de datos
43. Arquitectura La clave reside en la capa titanium bridge que será la encargada de traducir el javascript en código nativo(Java para el caso de android y objetive-c para el caso de iphone/ios).El resultado es una app completamente nativa. UI API Componentes de UI nativos Navbar, Tabbar, Toolbar,Menus Phone API Componentes para las capacidades nativas del teléfono geolocalización, acelerómetro, mapas, sonido ,DB, sistema de ficheros, red
44. Appcelerator Titanium Studio
45. Event-driven && component-oriented Events • click • change • focus • blur • touchstart • ….. var button = Titanium.UI.createButton({ title: Title', top: 10, width: 100, height: 50 }); button.addEventListener('click',function(e) { Titanium.API.info("You clicked the button"); }); Components var picker = Ti.UI.createPicker({ type:Ti.UI.PICKER_TYPE_DATE, minDate:new Date(2012,0,1), maxDate:new Date(2013,11,31), value:new Date(2012,3,12), top:50 }); picker.addEventListener('change',function(e){ Ti.API.info("User selected date: " + e.value.toLocaleString()); }); var tableData = [ {title: 'Alert'}, {title: Options Dialog'}, {title: Window Unfocused'}]; var table = Ti.UI.createTableView({ data: tableData });
46. Geolocalización var mapa = Titanium.Map.createView({ mapType: Titanium.Map.STANDARD_TYPE, animate: true, regionFit: true, userLocation: true }); Titanium.Geolocation.getCurrentPosition (function(event) { var longitud = event.coords.longitude; var latitud = event.coords.latitude; var altitud = event.coords.altitude; mapa.region = {latitude: latitud,longitude: longitud, latitudeDelta:0.5, longitudeDelta:0.5};});
47. Tabs // create tab group var tabGroup = Titanium.UI.createTabGroup(); // create base UI tab and root window var win1 = Titanium.UI.createWindow({ title:'Tab 1', backgroundColor:'#fff' }); var tab1 = Titanium.UI.createTab({ icon:'KS_nav_views.png', title:'Tab 1', window:win1 }); // add tabs tabGroup.addTab(tab1); tabGroup.addTab(tab2); // open tab group tabGroup.open();
48. https://github.com/appcelerator/KitchenSink
49. Tianium vs PhoneGap Titanium: • Ejecuta la aplicación de forma nativa • API más potente. Todo es personalizable. • Mayor número de controles IU, transición y animaciones • Patrón MVC mediante Alloy • Native GUI.Look and Feel de forma nativa • Mayor curva de aprendizaje • Aplicaciones más pesadas(>=5MB) • No soporta HTML5,CSS3,librerías Javascript. • No acceso al DOM. PhoneGap: • Más fácil de aprender con conocimientos básicos de JavaScript • Soporte HTML5,CSS3,librerías Javascript • Debug es más sencillo al poder utilizar herramientas de desarrollo web • Rendimiento suele ser inferior • Ejecuta la aplicación dentro de componente WebView
50. Recomendaciones interfaz usuario Responsive web design- CSS media queries /* on mobile */ //para resoluciones menores o iguales a 480px de ancho <link type="text/css" rel="stylesheet" media="only screen and (max-device-width:480px)" href="mobile.css" /> /*on tablet */ //para resoluciones mayores a 480px de ancho <link media="screen and (min-device-width: 481px)" href=“tablet.css" type="text/css" rel="stylesheet" /> Viewport optimizado para móviles <head> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" /> </head>
51. Modernizr Permite detectar la presencia de prácticamente cualquier funcionalidad de HTML5 y CSS3 en nuestro navegador Modernizr.load([ { load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js', complete: function () { if ( !window.jQuery ) { //si jquery no se ha cargado correctamente Modernizr.load('js/libs/jquery-1.7.1.min.js'); } } }, { // This will wait for the fallback to load and execute if it needs to. load: 'needs-jQuery.js' } ]); http://modernizr.com/download/
52. Ripple Emulator (Chrome plugin)
53. Bibliografia Appcelerator Appcelerator Titanium Smartphone App Development Cookbook. Packt Publishing Appcelerator Titanium: Up and Running. O'Reilly Media
54. Bibliografia Sencha touch Sencha.Touch 2 Up and Running Oreilly 2013 Creating Mobile Apps with Sencha Touch 2 Packt Publishing 2013 Sencha MVC Architecture Packt Publishing 2012 Sencha Touch Mobile JavaScript Framework Packt Publishing 2012
55. Bibliografia Phonegap PhoneGap Beginner's Guide Packt Publishing 2011 Beginning PhoneGap Wrox 2011 Beginning PhoneGap, Mobile Web Framework for JavaScript and HTML5 Apress 2012 PhoneGap Mobile Application Development Cookbook Packt Publishing 2012
56. Bibliografia Jquery mobile jQuery Mobile Up and Running Oreilly 2012 jQuery Mobile O'Reilly 2011 jQuery Mobile First Look Packt 2011 Teach Yourself jQuery Mobile In 24 Hours SAMS
57. Bibliografia Backbone http://addyosmani.github.io/backbone-fundamentals/ FREE
58. Info https://play.google.com/store/apps/developer?id=Jos%C3%A9+Manuel+Ortega+Candel https://github.com/jmortega/apps https://www.linkedin.com/in/jmortega1 jmoc25@gmail.com
59. Google play
60. Google play