Desarrollo de apps móvil multiplataforma

Desarrollo de apps móvil multiplataforma

Transcript

1. Desarrollo de apps móviles multiplataforma
   José Manuel Ortega Candel
   

   View Slide

2. Desarrollo de apps móviles multiplataforma
   Native VS Hybrid
   vs
   

   View Slide

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
   

   View Slide

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/
   

   View Slide

5. Arquitectura
   

   View Slide

6. Javascript API Reference
   http://docs.phonegap.com/
   

   View Slide

7. Eclipse Plugin-Instalación
   http://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-
   phonegap/tags/r1.2/download
   

   View Slide

8. Eclipse Plugin- Projecto +Librerías
   

   View Slide

9. Proyecto Android
   

   View Slide

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
    <
    
    
    
    
    
    
    
    

    View Slide

11. Javascript
    Inicializar-Capturar el evento deviceready
    Búsqueda de contactos
    Geolocalización (HTML5 || Cordova Native Geolocation)
    https://github.com/apache/cordova-plugin-geolocation
    
    <br/>// Espera a cargar las librerías del API<br/>document.addEventListener("deviceready", onDeviceReady, false);<br/>
    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);
    

    View Slide

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);
    }
    

    View Slide

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);
    }
    

    View Slide

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
    

    View Slide

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”
    
    
    
    Pag. secundaria
    
    
    Pie
    
    
    
    

    View Slide

16. Librerías
    
    
    
    
    
    
    

    View Slide

17. Componentes
    data-role="listview"
    data-filter="true"
    data-role=”list-divider”
    class=”ui-li-count”
    data-role="fieldcontain"
    

    View Slide

18. Componentes
    data-role="collapsible-set"
    data-filter-reveal="true"
    data-role="panel"
    data-filter-placeholder="Search"
    

    View Slide

19. Transiciones y diálogos
    
    
    $.mobile.changePage("index.html", "fade");
    $.mobile.pageLoading
    $('.ui-loader h1').text(„Loading');
    

    View Slide

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() {
    ...
    })
    

    View Slide

21. Codiqa-Prototipado
    

    View Slide

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.
    

    View Slide

23. http://www.jqmgallery.com/
    http://view.jquerymobile.com/1.3.2/dist/demos/examples/
    Demos
    

    View Slide

24. Demo
    

    View Slide

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
    

    View Slide

26. Librerías
    index.html
    
    
    
    
    
    type="text/css" />
    
    
    
    
    

    View Slide

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.
    

    View Slide

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 ‟],
    }
    

    View Slide

29. Proyecto –Look && Feel
    
    
    
    
    
    
    
    
     sencha-touch.js
     sencha-touch.css
    

    View Slide

30. Componentes
    

    View Slide

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'
    }
    }
    }
    );
    

    View Slide

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: '{lenguaje}
    
    {descripcion}'
    }]
    }));
    

    View Slide

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){
    }
    }
    

    View Slide

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);}}});
    

    View Slide

35. Browser support / S.O/ Connection
    <br/>if (!Ext.browser.is.WebKit) {<br/>alert("The current browser is<br/>unsupported.\n\nSupported browsers:\n" +<br/>"Google Chrome\n" +<br/>"Apple Safari\n" +<br/>"Mobile Safari (iOS)\n" +<br/>"Android Browser\n" +<br/>"BlackBerry Browser"<br/>);<br/>}<br/>
    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 ");
    }
    <br/>Ext.device.Connection.isOnline();<br/>Ext.device.Connection.getType();<br/>
    

    View Slide

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
    

    View Slide

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
    

    View Slide

38. Demo
    

    View Slide

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
    

    View Slide

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;
    }});
    
    <br/><div data-role="header"> </div><br/><div data-role="content“> </div><br/><div data-role=“header”> </div><br/>
    

    View Slide

41. Backbone
    • Deshabilitar navegación con Jquery Mobile
    
    $(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();
    });
    });
    

    View Slide

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
    

    View Slide

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
    

    View Slide

44. Appcelerator Titanium Studio
    

    View Slide

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 });
    

    View Slide

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};});
    

    View Slide

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();
    

    View Slide

48. https://github.com/appcelerator/KitchenSink
    

    View Slide

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
    

    View Slide

50. Recomendaciones interfaz usuario
    Responsive web design- CSS media queries
    /* on mobile */
    //para resoluciones menores o iguales a 480px de ancho
    
    /*on tablet */
    //para resoluciones mayores a 480px de ancho
    href=“tablet.css" type="text/css" rel="stylesheet" />
    Viewport optimizado para móviles
    
    
    
    

    View Slide

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/
    

    View Slide

52. Ripple Emulator (Chrome plugin)
    

    View Slide

53. Bibliografia
    Appcelerator
    Appcelerator Titanium Smartphone App
    Development Cookbook.
    Packt Publishing
    Appcelerator Titanium: Up and Running.
    O'Reilly Media
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

57. Bibliografia
    Backbone http://addyosmani.github.io/backbone-fundamentals/
    FREE
    

    View Slide

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
    

    View Slide

59. Google play
    

    View Slide

60. Google play
    

    View Slide