Posts Tagged ‘cordova’


Windows 10 ha sido lanzado y con esto Microsoft promete un nuevo tipo de aplicaciones: “Universal” que asegura su ejecución en todas las plataformas Windows disponibles, desde teléfonos con Windows 10 Mobile, y Pcs. Lo que no nos está diciendo es que se ha redefinido el concepto de PC.

Las PC eran la primera opción para el trabajo tanto para casa como para oficina, con el tradicional monitor y teclado por un lado y el “CPU” por otro. Si nos hacía falta movilidad, no había problema de cambiar a una laptop. Sin embargo, surgieron los smartphones y las tablets y nos dimos cuenta que iban creciendo en potencia y capacidades al punto que muchas personas pueden quedarse con una tablet como computador principal.

Ahora bien, desde el punto de vista funcional, tener una tablet en lugar de una laptop no es nada del otro mundo. Todo está en función de las necesidades de cada usuario.

Para los desarrolladores el problema es desde donde comenzar.

Si vamos por el ala Apple, comenzamos haciendo programas para iPhone/iPod y luego las hacíamos escalar para soportar tablets iPad, cambiando principalmente las pantallas y las resoluciones soportadas. Si queríamos que nuestra app funcione también en Macs ya teníamos que cambiar el código e incluso las gráficas pues el modelo de programación para Mac OSX es diferente al que tiene iOS.

Para el caso de Microsoft, la separación también era clara, si querías móviles te ibas por un rumbo y si querías PC hacías el desarrollo de siempre. El problema es que siempre que hablamos que Windows Phone, o Windows 10 Mobile hasta ahora siempre hemos hablado de teléfonos que nunca llegaron a ser tablets. Cierto que salió Windows RT donde salieron unas tablets pero esa iniciativa nunca tuvo tanto peso comercial. Lo que si parece que viene con fuerza son las tablets pero con Windows 8.1/Windows 10, es decir, el mismo sistema operativo que tenemos en la PC o en la laptop a un precio incluso menor a las tablets disponibles con sistemas operativos móviles consolidados como iOS o Android.

Con el lanzamiento de Windows 10 se viene otra ola que es la “Aplicación Universal” donde se promete que una misma aplicación podrá ser ejecutada tanto en Windows 10 como en Windows 10 mobile. Hasta el momento no se incluía el soporte para teléfonos con Windows Phone 8/8.1 lo que significa que aún no podrá ser tan universal, pero la presencia en el mercado estas tablets con Windows 8/10 abren la posibilidad de una nueva generación de aplicaciones “super inteligentes” ya que no estamos hablando de apps reducidas para entrar en un equipo móvil, sino la misma app que usamos al sentarnos en la oficina. Si podemos tener la misma app empresarial movilizada con una tablet que cuesta 100 usd ¿Para qué molestarnos en hacer una aplicación en un sistema operativo móvil?

En la última versión de Visual Studio (2015), se incluye también el soporte de Apache Cordova, lo que “oficializa” el soporte de Microsoft de tecnologías abiertas para el desarrollo de aplicaciones multiplataforma. Con Cordova, es posible que nuestra app pueda ejecutarse en iOS, Android, Windows y en otros sistemas operativos móviles en forma limitada. Si bien el funcionamiento tiene aún algunos problemitas, la posibilidad de hacer un sólo código justifica la atención.

De hecho, ya en un post anterior, les he descrito mi aplicación Supercomics basada en Cordova que se ejecuta tanto en Windows Phone, iOS y Android. Aún estoy salvando unos problemitas para publicar la versión para Windows, y para ser específico debo decir que en Windows soporto Windows Phone 8 y 8.1, Windows Phone 10, Windows 8/8.1 y Windows 10. Notarán que puedo ir más allá de lo que ofrece una “Aplicación Universal”.

Por supuesto que una “Universal App” puede darnos opción a integrar APIS empresariales  y más funciones en la parte de desarrollo que aún estoy descubriendo. Hasta el momento he visto que las aplicaciones mientras más desconectadas estén, mejor experiencia de uso brindan, así que empezaremos a comparar las ventajas para sugerir la mejor plataforma para nuestras aplicaciones.

Veamos el siguiente cuadro:movilesCon esto vemos un poco más claramente que significa “Aplicación Universal”.

No es mala idea el Universal App, de hecho, es una gran cosa para el mundo empresarial donde las políticas internas normalmente, favorecen el uso de una misma plataforma para sus aplicaciones internas donde ya Microsoft reina. El tema está en el punto débil de Windows en este momento: la falta de aplicaciones móviles, y la inclusión de Apache Cordova significa que Microsoft ha aceptado que ir por la alternativa de HTML5 es lo más eficiente en este momento.

Como siempre, la pregunta que se hace un desarrollador es sobre la velocidad y las funciones que soportará cada opción pues es obvio que una herramienta “nativa” nos ofrecerá un código más rápido y nos permitirá acceso a los recursos de hardware en el terminal. Siempre al inicio de todo desarrollo se tiene que hacer una evaluación de los requerimientos para nuestra aplicación. Si vamos a desarrollar un juego con alto nivel de procesamiento, la opción nativa se impone, pero si queremos una app tipo red social o capturadora de datos con soporte a múltiples dispositivos entonces podremos “sacrificar” la velocidad por la facilidad de desarrollo pues tenemos que considerar que hay otros aspectos como la velocidad de la red o la cantidad de datos, o la integración a otros sistemas que impactan mas fuertemente en el rendimiento de nuestra aplicación.

Ninguna alternativa es completamente a prueba de balas, todo depende de lo que necesitemos. Es una gran opción usar la misma aplicación en todos nuestros dispositivos, pero la movilidad no está en el dispositivo, está en la forma en la que diseñemos la aplicación. Es necesario que se incluyan paradigmas como sincronización, bases de datos locales, autenticación, encriptación en la que se dejemos de lado de una vez por todas el supuesto que todos los recursos estan disponibles todo el tiempo.


Esta es una continuación de la serie sobre desarrollo en móviles que comencé aquí. Les recomiendo comenzar a escribir el código fuente desde la parte 1 ya que no se publica el código para descarga.

En esta parte, haremos una introducción a lo que creo que es lo más potente que se ha incluido en Ionic, UI-Router. Hay otros componentes que hacen lo mismo, pero creo que lo más importante aquí es el concepto de estados.

Un estado es un conjunto de vista, controlador y modelo que hace una labor específica en nuestro programa. Tenemos que pensar en una labor muy simple para ver la potencia de este concepto. Por ejemplo, listar todos los correos que tenemos, es un estado, o ver un email en particular es otro estado. Mientras más simple que sea, más reutilizable será el estado.

Ahora, quizá me adelante, pero es posible que un conjunto de estados compartan una base común, por ejemplo, la lista de correos tienen que mostrarse dentro de una ventana con un menú de controles. Para eso, existe el concepto de estados abstractos.

Primero vamos por lo más simple, agregemos los estados. En nuestro caso, es simple pues tenemos solamente un estado que lista todas las noticias. Así que modificamos el archivo app.js para definir el estado.

angular.module('starter', ['ionic','controllers'])

.run(function($ionicPlatform,$rootScope) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})
.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('news', {
      url: "/",
      views: {
          "home":{
              templateUrl: "templates/news.html",
              controller: "newsController as news"
          }
      }
  })
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/');
});

Desde la línea 15 se puede ver la definición del estado. En nuestro caso, hemos llamado al estado con el nombre de “news” y le hemos asignado el url “/”, también se le ha asignado una vista llamada “home” que tiene un template llamado news.html en la carpeta templates y tiene asignado el controlador newsController al que le hemos puesto un alias news. ¿Qué significa todo esto?

Traducción: Al invocarse el estado “news”, AngularJS va a tomar el archivo news.html y le va a asignar el controlador newsController para ejecutarlo. Simple.

En la línea 27 se pone que la aplicación tomará la ruta “/” como ruta por defecto, lo que llevará a la aplicación al estado “news”.

Veamos el archivo news.html.

<ion-view view-title="Noticias">
 <ion-header-bar class="bar-stable">
 <h1 class="title">Ionic Blank Starter>/h1>
 </ion-header-bar>
 <ion-content>
 <p> Hay {{notas.length}} noticias</p>
 <div class="list"
 ng-repeat="noticia in notas">
 <div class="card">
 <div class="item item-divider">
 {{noticia.doc.fecha}}</br>{{noticia.doc.titular}}
 </div>
 <div class="item item-text-wrap">
 <b>{{noticia.doc.resumen}}</b>
 </div>
 <div class="item item-divider">
 Autor: {{noticia.doc.autor}}
 </div>
 </div>
 </div>
 </ion-content>
</ion-view>

El contenido es casi todo lo que antes había en el archivo index.html pero con las tags iniciales en lugar de las <ion-content< que habían antes. Esto le indica a AngularJS que estamos definiendo una vista.

Lo que hemos hecho es separar la vista y asignarle un controlador de forma programática lo cual es muy conveniente para poder reutilizar el código.

Ahora, para que todo esto funcione falta indicarle a AngularJS donde vamos a mostrar el resultado del estado, y para eso veamos como queda el archivo “index.html”

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
 <title></title>
 <!-- compiled css output -->
 <link href="css/ionic.app.css" rel="stylesheet">
 <!-- ionic/angularjs js -->
 <script src="lib/ionic/js/ionic.bundle.js"></script>
 <!-- cordova script (this will be a 404 during development) -->
 <script src="cordova.js"></script>
 <!-- your app's js -->
 <script src="js/services.js"></script>
 <script src="js/controllers.js"></script>
 <script src="js/app.js"></script>
 <script src="lib/pouchdb/dist/pouchdb.js"></script>
 </head>
 <body ng-app="starter">
 <ion-nav-view name="home"</ion-view>
 </body>
</html>

En la línea 20 notarán que hemos reemplazado toda la parte que mostraba las noticias por el tag . Aquí le estamos diciendo a AngularJS que queremos que se muestre la vista llamada “home”, que la hemos definido antes en el archivo app.js.

Traducción, AngularJS cargará news.html, le asignará el controlador newsController y la mostrará en el tag denominado “home”.

¿Cuál es la ventaja de todo eso? la respuesta es separación de responsabilidades. El diseñador Web podrá trabajar en la parte de la presentación con el html y el CSS y colores y demás, mientras que el programador podrá trabajar en el controlador, y si por ahí hay nuevas versiones de la vista o el controlador, pues simplemente se cambia en la definición de la vista y nuestra aplicación no sufrirá el cambio.

Ahora bien, regresemos a la pregunta inicial que recibí y que generó todos estos posts. La pregunta fue que si tenemos una lista de objetos de la base de datos, como hacemos para mostrar los detalles de estos objetos. Pues bien, en nuestro ejemplo, ya estamos recuperando todos los datos así que podríamos tener los detalles ocultos mostrando sólo las cabeceras. Para eso podemos usar la ayuda de Angular-bootstrap, así que instalemos rápidamente.

Paso 1: agregar el CSS en el index.html

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

Paso 2: instalar el componente angular-bootstrap con bower

bower install angular-bootstrap --save

Paso 3: agregar la referencia en el archivo index.html

<script src="lib/angular-bootstrap/ui-bootstrap-tpls.js"></script>

Con el angular-bootstrap listo, sólo nos queda modificar el template news.html para utilizar el componente accordion:

<ion-view view-title="Noticias">
 <ion-header-bar class="bar-stable">
 <h1 class="title">Ionic Blank Starter</h1>
 </ion-header-bar>
 <ion-content>
 <p> Hay {{notas.length}} noticias</p>
 <accordion close-others="oneAtATime">
 <accordion-group ng-repeat="noticia in notas"
 heading='{{noticia.doc.fecha}}-{{noticia.doc.titular}}'>
 <b>{{noticia.doc.resumen}}>/b>;
 </br>
 Autor: {{noticia.doc.autor}}
 </accordion-group>
 </accordion>
 </ion-content>
</ion-view>

Y obtendremos algo como esto, donde haciendo click en los títulos se despliega el contenido de la noticia:
gen21

Todo bien, pero hay otra alternativa, sobre todo si es que queremos ver los detalles de la noticia de forma mas flexible sobre todo si hay mucho texto, pues en ese caso deberíamos tener una lista de noticias y al seleccionar un titular, ir a otra pantalla para ver solamente esa noticia en toda la pantalla.

Para esto debemos crear otro estado a nuestra app, así que hagámoslo. En el archivo app.js agregamos ese nuevo estado y nuestro nuevo app.js lucirá así:

angular.module('starter', ['ionic','controllers','ui.bootstrap'])

.run(function($ionicPlatform,$rootScope) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})
.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('news', {
        url: "/",
        views: {
            "home":{
                templateUrl: "templates/news.html",
                controller: "newsController as news"
            }
        }
    })
        .state('detail', {
        url: "/detail/:id",
        views: {
            "home":{
                templateUrl: "templates/detail.html",
                controller: "detailController as detail"
            }
        },
        resolve:{
            detail: function($stateParams){
                return $stateParams.id;
            }
        }
    })
    $urlRouterProvider.otherwise('/');
});

Los puntos de interés son la línea 27 donde fijamos el URL y también indicamos que el url vendrá con el parámetro ‘:id’; la línea 34, donde estamos fijando que la variable “detail” será pasada al controlador y tendrá el valor del parámetro ‘id’.
Ahora veamos como ha quedado el controlador nuevo en el archivo controller.js:

.controller('detailController',function($scope,db,detail){
	db.get(detail).then(function(doc){
        $scope.event=doc;
    })
})

Prestemos atención en la línea 11 que estamos pasando la variable ‘detail’ que definimos en la definición del estado y usamos ese valor para recuperar el objeto desde la base de datos. El valor del parámetro ‘id’ debe ser el id del documento que hemos elegido. La función db.get la estamos invocando desde el servicio que hemos definido en el archivo services.js así que tenemos que agregar este a la definición:

return {
  init: function(){
        db.replicate.from(remote,{live:true,retry:true})
        .on('paused',function(info){
            db.allDocs({startkey:'news_\uffff',endkey:'news_',descending:    true,include_docs:true})
            .then(function(result){
                  $rootScope.$broadcast('refrescar',result.rows);
            });
          });
        },
   get: function(id){
        return db.get(id);
   }
}

El documento resultante lo grabaremos en la variable de escope event para usarla en el template para mostrar.

Para verificar esto, veamos como quedan los templates.
Primero, index.html:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
 <title></title>
 <!-- compiled css output -->
 <link href="css/ionic.app.css" rel="stylesheet">
 <link href="lib/angular-bootstrap/ui-bootstrap-csp.css" rel="stylesheet">
 <link href="css/bootstrap.css" rel="stylesheet">
 <!-- ionic/angularjs js -->
 <script src="lib/ionic/js/ionic.bundle.js"></script>
 <script src="lib/angular-bootstrap/ui-bootstrap-tpls.js"></script>
 <!-- cordova script (this will be a 404 during development) -->
 <script src="cordova.js"></script>
 <!-- your app's js -->
 <script src="js/services.js"></script>
 <script src="js/controllers.js"></script>
 <script src="js/app.js"></script>
 <script src="lib/pouchdb/dist/pouchdb.js"></script>
 </head>
 <body ng-app="starter">
 <ion-nav-bar class="bar-positive">
 <ion-nav-back-button class="button-clear">
 <i class="ion-arrow-left-c"></i> Regresar
 </ion-nav-back-button>
 </ion-nav-bar> 
 <ion-nav-view name="home"></ion-view>
 </body>
</html>

Aquí solamente hemos añadido una cabecera para facilitar la navegación en las líneas 23 a la 27.
Ahora veamos el archivo donde mostramos la lista de noticias: ‘news.html’

<ion-view view-title="Noticias">
 <ion-header-bar class="bar-stable">
 <h1 class="title">Noticias</h1>
 </ion-header-bar>
 <ion-content>
 <ion-list>
 <ion-item ng-repeat="noticia in notas" 
 ui-sref='detail({id:"{{noticia.id}}"})'>
 {{noticia.doc.fecha}}-{{noticia.doc.resumen}}</ion-item>
 </ion-list>
 </ion-content>
</ion-view>

Notaremos en las líneas 6 a la 10 que hemos incluido una lista y cada item tiene una directiva nueva: ui-sref que se encarga de llevarnos al estado que se indica cuando se hace click en el item; además le estamos pasando el parámetro id con el valor del id del documento.
Y ahora, para mostrar la noticia usamos el template detail.html que lucirá así:

<ion-view view-title="Noticia">
 <ion-header-bar class="bar-stable">
 <h1 class="title">Detalle</h1>
 </ion-header-bar>
 <ion-content>
 <div class="card">
 <div class="item-divider">
 <h2>{{event.fecha}} {{event.titular}}</h2>
 </div>
 <div class="item-body">
 {{event.resumen}}
 </div>
 <div class="item-divider">
 <h2>{{event.autor}}</h2>
 </div>
 </div>
 </ion-content>
</ion-view>

Como ven, los detalles del documento recuperado los leemos usando la variable ‘event’.

Y el resultado es una app con dos estados: news que muestra la lista de noticias disponibles y al hacer click en alguna llegamos al segundo estado llamado detail donde se muestra la noticia seleccionada completa, para lo cual recibe un parámetro que nos sirve para recuperar los datos desde la base de datos.

gen22

gen23

Seguramente notaremos que para el ejemplo que he desarrollado, hacer otra llamada a la base de datos puede parecer un desperdicio, pero lo que he tratado de hacer es mostrar como pasar parámetros y como utilizar los estados.Lo mas importante es que tenemos dos estados que podemos reutilizar en el resto de nuestra app.

NOTA: Parece que tengo un lector que ha sido responsable y ha seguido todos los pasos. Muchas gracias a Tercio Santos. Al parecer tiene un problema con el app y luego de pruebas en mi equipo, puedo decir que no hay problema con el código. Sólo por si acaso, recomiendo la instalación del plugin Cordova Whitelist:

ionic plugin add cordova-plugin-whitelist

Sucede que en las últimas versiones de Android, es necesario especificar los lugares donde el app puede ingresar y para eso se puede usar whitelist. Si es que no está, Android puede bloquear el acceso a internet de su app, por eso es mejor que esté aunque no lo utilicen todavía. Para una implementación en producción si es necesario configurar bien esos permisos. Ya llegaremos a eso.
Y para que vean que el código camina, aquí va un pantallazo. Recuerden, corre el app la primera vez con red, se muestran los datos, y listo, ya pueden ponerlo en modo avión si quieren y el app tendrá que mostrarle los datos.


En la semana he recibido un par de consultas que me parecen super importantes y que trataré de responder en un par de post y de pasada repasar los fundamentos.

La segunda pregunta que recibí creo que es mejor tratarla primero: ¿Ionic con PouchDB y Cloudant es más rápido que usar MySQL y websql? Veamos, desde mi punto de vista por más que parece lo mismo, no lo son.

Antes debemos revisar un par de puntos:

Primero, PouchDB es además una capa de abstracción de datos porque puede utilizar varios tipos de archivos para almacenar los datos (Adaptadores), principalmente puede usar IndexedDB, WebSQL y otros menos usados. La recomendación es que le indiquemos a PouchDB que utilice WebSQL si queremos que sea más rápido. En alguna eventualidad, PouchDB nos libra del problema pues puede elegir automáticamente cual es el mejor almacenamiento para nuestros datos.

Segundo, WebSQL, sqlite o como lo quieran llamar, es un estándar que ya está “depreciado”. El consorcio que maneja los estándares de Internet ya ha fijado que IndexedDB sea el estándar. Los navegadores siguen teniendo soporte para WebSQL pero no se sabe exactamente hasta cuando, mas bien IndexedDB es una obligación para todos.

Ahora comparemos:

PouchDB y Cloudant (o CouchDB en general) es realmente una solución de gestión de datos de extremo a extremo que parte del concepto denominado “offline first” donde la aplicación cliente, luego de una sincronización inicial, está preparada para trabajar sin conectarse al Servidor. Incluso, hay otro movimiento más radical denominada “No Backend”, pero no lleguemos a extremos, de alguna manera la base de datos es el backend y, si fuera necesario, se puede colocar una capa de lógica intermedia. Para resumir, PouchDB – CouchDB incluye, gestión de datos, sincronización y segmentación de datos. Un aspecto adicional es que, dado que no hay esquemas, es necesario “transformar” los datos del modelo relacional para que cuadre en el modelo “documental” de CouchDB y para esto pensaremos en la estructura que mejor nos acomode en la aplicación cliente lo que significa que vamos a “limpiar” el modelo para tener solamente lo que nos interesa.

MySQL y WebSQL (o sqlite para los amigos) es en el sentido estricto solamente un gestor de datos. Pasar datos desde MySQL a la base local en WebSQL es algo que tenemos que hacer nosotros, al igual de la segmentación de datos. Además, dado que en sqlite tenemos tablas y un dialecto de SQL, nuestra primera tentación será la de repetir el modelo de datos que tenemos en el backend.

Entonces, para comparar papas con papas, hablemos del aspecto de gestión de datos solamente de ambas soluciones. La verdad dura y simple es que consultar datos con sqlite es más rápido que consultar datos con PouchDB. Hay un documento que explica el rendimiento comparado de las bases de datos en el lado del cliente que pueden consultar Comparación datos móviles

Ahora bien, esto no me parece determinante porque, dependiendo del modelo de datos que tengamos, es muy probable que con el modelo relacional de sqlite tengamos que hacer más consultas que con PouchDB. Esto no tengo como sustentarlo en números, pero en los proyectos que he realizado es algo evidente que si modelas bien, consultas menos y dado que en un “Documento” de CouchDB puedes organizar los datos en más de 1 nivel, puedes traer más datos en una sola consulta.

Otro punto importante es la cantidad de datos. Mientras más datos tengas, será más claro el tema de la velocidad. En mi caso, tengo apps donde guardo mas de 300 documentos en el móvil y la velocidad es aceptable. Debemos considerar que los documentos no son tan simples, incluso la gran mayoría contiene BLOBs de 20K en promedio de tamaño con un tamaño total de 12 MB de la base de datos, lo que sería una locura en un entorno sqlite. Si el volumen de datos que vas a manejar es menor a mi ejemplo, entonces la diferencia de performance no la vas a sentir.

Guardo el tema de índices para el final porque es muy importante. Con Sqlite podemos crear índices donde y cuando nos dé la gana lo cual casi no tiene costo en procesamiento ni en almacenamiento. En el caso de PouchDB, los índices no se hacen por nada: Existe un índice por defecto que solamente contiene el campo _id de todos los documentos en la base de datos, y como no hay tablas pues estamos hablamos de absolutamente todos los registros. Suena a limitación, pero significa que recuperar un registro es super mega extra rápido y recuerden que un registro puede tener mucha información que en Sqlite podría tomar más de una consulta, además, si usamos el ID correcto nuestras consultas pueden beneficiarse de este super índice: la clave es crear los IDs manualmente incluyendo los criterios de búsqueda que necesitemos. Por ejemplo, si queremos guardar un documento para el Comic 1 de la editorial DC que salió en 01 de febrero del 2015, el ID que nos convendría sería com_dc_2015-02-01_01, de esta manera podremos hacer consultas muy rápidas con el método allDocs de PouchDB:

– Todos los comics: startkey: ‘com_’, endkey: ‘com_\uffff’;

– Todos los comics de la editorial DC: startkey: ‘com_dc_’, endkey:’com_dc_\uffff’

– Todos los comics de DC que salieron el 2015: startkey: ‘com_dc_2015_’, endkey: ‘com_dc_2015_\uffff’

La mala palabra en PouchDB es ‘Joins’ al estilo sql. No existe, así de simple, pero no desesperen pues existen muy buenas alternativas. Aquí van dos: Podemos crear vistas que son parecidas a las del mundo relacional pero que siguen el modelo Map/Reduce que es lo mejor en lo referido a escalabilidad, igual la recomendación es usarla solamente en condiciones extremas tal como se explica en este artículo. La segunda opción se llama Mango y es una forma de indexar toda la base de datos de la forma que nos de la gana y podrán encontrar información aquí.

Finalmente, y creo que es la razón definitiva por la cual se debería usar el modelo con PouchDB, es que tenemos que valorar que estamos usando una solución completa para el manejo de datos, no es solamente un modo de tener una base local, es una solución de sincronización. En un modelo Sqlite, la sincronización es un proceso que tiene que ocurrir de modo secuencial, es decir: ingresas datos, modificas datos, parar para sincronizar, lees datos, modificas datos. Con PouchDB, la sincronización es un proceso que se ejecuta en una tarea paralela, por lo que podremos ingresar, leer, modificar datos sin parar.

Si realmente necesitan velocidad, Sqlite no va a estar en el vecindario por mucho tiempo, así que mi recomendación está en mejorar el modelo.


Este post lo hago de urgencia pues acabo de experimentar todo lo que no se debe hacer en el tema de sincronización. Para esto les doy un resumen de mi entorno de desarrollo:

  • Servidor: Instancia en Cloudant.com
  • Cliente: PouchDB como base de datos con sincronización al iniciar el app
  • Framework: Ionic

En resumen, se inicia una sincronización entre mi base de datos local en PouchDB y la base remota en Cloudant. Y puede ser todo lindo en Producción, pero como estamos en Desarrollo, el proceso normal es parar e iniciar el app a cada rato. Ahora veamos las consecuencias en desarrollo:

  • Costo: Cloudant te cobra por transacciones y te dice que por transacciones “pesadas” te va a cobrar mas, y pone varias transacciones HTTP y las define como pesadas. Lo que no dice es que hay otras transacciones que se utilizan para la sincronización que también se califican como pesadas, principalmente OPTIONS que se manda a cada rato. Por lo tanto, cada sincronización es bastante intensiva en costo.
  • Tráfico: Para un modelo de desarrollo, no es bueno iniciar conexiones de datos muy seguido. Entonces, el modelo debe saber cuando es bueno iniciar la sincronización sin importar que sea en Desarrollo o Producción.
  • Batería: Como consecuencia de la reducción de tráfico, estaremos también bajando el consumo de energía en el móvil.

No malentiendan, CouchDB/PouchDB es muy bueno, y si existe la necesidad, podemos activar la sincronización “live”, pero como no todos tenemos servidores y ancho de banda de sobra, tenemos que pensar en servicios en demanda en la red, como Cloudant en mi caso. Tengan en cuenta que otros servicios como IrisCouch, también cobran por transacciones.

La salida que encontré depende de como se necesita que fluyan los datos:

  • El recolector de datos: si nuestra app necesita solamente capturar datos y no necesito bajar información desde el servidor. En este caso, lo mejor es implementar un contador que incrementaremos cada vez que se actualice o se inserte un dato nuevo. Lo bueno es que para un entorno NoSQL, insertar o actualizar es el mismo método, así que en ese método podremos insertar el incremento del contador. Luego, al momento antes de sincronizar, verificaremos si es que el contador es mayor a 0, de lo contrario no iniciaremos la sincronización. Sincronizar solamente cuando hayan datos locales.
  • El visualizador de datos: Aquí es totalmente al revés, el app jala información del servidor. En este caso, la primera alternativa es la de fijar un tiempo de sincronización relativamente alto, agregar un visor de la última fecha de sincronización y la opción para forzar la sincronización manualmente.
  • Finalmente, como siempre, en la vida real tendremos una combinación de necesidades, así que la recomendación final es la de utilizar un proceso de sincronizacion para descargar datos y otro para subir datos.

Hay una función que no he mencionado aún: Sincronización filtrada. Esto es super útil y lo voy a desarrollar en otro Post, Básicamente es la de descargar solamente la información que me interesa. Esto es tan importante que todos deben usarlo si es que tenemos que descargar datos.

En conclusión, es muy fácil sincronizar sin límites, pero en la vida real, no hay que pedir más de lo que debemos consumir.


Después montones de pruebas, ya publiqué mi app. Por ahora está en Windows Phone Store y en Google Play. Muy pronto en iOS.

Es un catálogo de comics publicados localmente, que les permitirá resolver el problema principal que como coleccionista he tenido que sufrir, ir al puesto de revistas y no saber cual cómic comprar o si es que ya salió el siguiente.

El app es muy simple en el uso, pero detrás tiene un par de cosas interesantes: Sincronización automática de datos y un código para 3 plataformas.

El código único está hecho en Cordova como les dije en un post anterior. Ionic Framework para ser exactos. Las ventajas que trabajar con esta herramienta son innumerables, pero me concentraré en decir que el ahorro de tiempo en programación es de lujo. El punto en contra podría ser que pierdes ciertas funciones nativas, pero me he dado cuenta que el real problema es otro: Interfase de Usuario nativa. Con Ionic, la interfase de usuario es HTML5 donde no hay Panoramas ni Pivots que hay en WP8, por lo demás, hay alternativas que puedes salvar. Entonces, a fin de que sus usuarios no se quejen, aprendan algo de CSS y de SASS y si pueden contraten a un buen diseñador. Si es que no tienen esa virtud de diseñar pantallas bonitas, hagan como yo, manténganlo todo simple. Igual les prometo que contrataré un diseñador para mejorar la presentación.

La sincronización automática se logró mediante la plataforma CouchDB. Para ser exactos, los datos están en un servidor Cloudant y en el cliente utilizo PouchDB, de tal forma que todos los datos son locales para la aplicación. Si es que se publican colecciones o comics nuevos, la data se sincroniza (sólo las diferencias) y desde ese punto todo es local. Ahora bien, existe un modo de sincronización que permite que los datos sean replicados en tiempo real, como resultado de las pruebas he llegado a la conclusión que sólo tiene que ser activado en algunas situaciones limitadas, por dos razones: Costo del tráfico y batería.

CouchDB es super inteligente para sincronizar, y si le dices que quieres hacer una sync “live” se va a encargar de tener los datos en el móvil super actualizados, y con PouchDB eso significa que se mantenga una conexión abierta con el Servidor la mayor parte del tiempo. Esto consume tráfico, batería y todo lo que puedas imaginar. Además, Cloudant te cobra por HTTP Request, lo que significaba, para el caso de mi app, mandar una transacción “pesada” cada 25 segundos por cada móvil. Haciendo las matemáticas, es mucha plata considerando que las publicaciones de comics se hacen por lo general cada semana. En JavaScript hay un método maravilloso llamado SetTimeOut que permite establecer un método donde el app sincroniza todo al iniciar y luego decirle que vuelva a sincronizar a los n minutos. De esa manera puedo hacer que las apps sólo sincronizen cuando es realmente necesario. Como por ahora no se cuantos usuarios pueda tener, mi estrategia de sincronizacion es cada 10 minutos si es que no se ven cambios y cada 100 minutos si es que se obtuvieron cambios, es decir, como los cambios los publico una sola vez, si los descargas, ya no volverás a ver otro lote de cambios hasta dentro de un largo tiempo, así que 100 minutos es el largo tiempo por ahora. Esto debe soportar las nuevas funciones que pienso introducir en el siguiente release.

Entre los principales problemas que tuve es el hecho de trabajar en un código único es posible mientras no tengamos que ver cosas muy pegadas al móvil. Por ejemplo, hay plugins para manejar beeps o para el manejo de estadísticas que sólo funcionan en el móvil haciendo las tareas de debug  bastante tediosas. Así que lo ideal es empezar el proyecto sabiendo que plugins se van a utilizar, para lo cual hay que certificarlos antes y probar que funcionan tal como deben. Por ejemplo, yo les comenté en un Post anterior que utilizaría Angulartics para el manejo de estadísticas, pues resulta que no trabaja tan fácil como lo pensé, y no es que el código sea complicado, simplemente tiene sus lios y listo. Gastar tiempo en investigar esos errores dentro del proyecto es una pesadilla, así que hagan su propio catálogo de plugins que ustedes hayan certificado y tendrán la ventaja.

Por el lado de los datos, PouchDB (o CouchDB como quieran) es un estándar que lo único que tiene fuerte es la sincronización y el manejo de los formatos de base de datos. Quiere decir que consultar los datos puede llegar a ser algo especial. Felizmente PouchDB es manejado por un tipo muy buena onda que se llama Nolan Lawson que está creando librerias y herramientas muy potentes que ayudan a bajar la complejidad, pero lo que si es un hecho es que NO ES SQL, así que hay que meterle algo de cabeza al inicio, como por ejemplo, crear llaves primarias con fecha y datos de la clase padre (plop!) y demás trucos que están todos documentados que en sistemas SQL ni te imaginas. Igual todo vale la pena porque funciona como un reloj suizo.

Un punto importante es el tema de los formatos de base de datos. Hasta ahora, SQLite ha sido la opción única para manejar datos en el móvil y resulta que es un estándar que ya fue. WebSQL definía el uso de archivos sql en aplicaciones HTML5 y actualmente ha sido reemplazado por IndexedDB que es como un super diccionario. El problema aquí es que SQLite sigue siendo muy veloz, y algunas plataformas ya han dejado de lado SQLite, como por ejemplo FirefoxOS y parece que Windows Phone 8.1 también. En fin, para evitar tener que recodificar ese soporte, PouchDB nos facilita la vida haciendo esa gestión por nosotros, si el sistema soporta WebSQL, lo usa y si sólo soporta IndexedDB, cambia todo tras bambalinas, genial. Tiene otros soportes, pero con estos dos es suficiente. Para los curiosos, PouchDB también trabaja en la PC para lo cual utiliza LevelDB que es otro rollo en base de datos para aplicaciones Web.

En conclusión, ya pueden probar mi App que principalmente les permitirá ver que un app puede tener datos actualizados de forma transparente y que comparte un código para todas sus plataformas, así no sean coleccionistas de comics.

Google Play Store:

Get it on Google Play

Windows Phone Store:

154x40_WP_Store_blk

 

Muy pronto para iOS:

 

NOTA FINAL: Disculpen los banners, pero también son parte del experimento

 





%d bloggers like this: