Ionic Framework, PouchDB y Cloudant: la combinación perfecta totalmente expuesta Parte 05


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.

Veamos, en la parte 4 vimos como mostrar los datos aún cuando no se tenga conexión a la red. Según algún comentario, la conexión era necesaria para comenzar la aplicación. A fin de asegurar que la aplicación pueda mostrar los datos existentes incluso sin red desde el inicio, hay que verificar lo siguiente:

  • Hay que separar la lógica de mostrar datos de la lógica de la replicación
  • La lógica de la replicación debe refrescar los datos.

Para cumplir con estos dos criterios hay que modificar nuestro archivo services.js. Primero agregamos la lógica de mostrar datos como una función privada:

angular.module('services',[])
.factory('db',function($rootScope){
    var key = 'bentareadyessharyinessee';
	var pass = 'OnEixgKgpt8LyEtl0S5DkAon';
	var remote = 'https://'+key+':'+pass+'@supermio.cloudant.com/news';
	var db;
	var mostrar = function(){
        db.allDocs({startkey:'news_\uffff',endkey:'news_',descending: true,include_docs:true})
                    .then(function(result){
                    $rootScope.$broadcast('refrescar',result.rows);
                });
    };

Hemos agregado la funcion “mostrar” y ademas en la línea 6 podrán ver que hemos dejado la variable db sin inicializar. La función “mostrar” lo que hace es consultar todos los registros y generar el evento refrescar pasando el resultado de la consulta al controlador.

Ahora hacemos la separación de la replicación y la lógica de mostrar en el método “init” de esta manera.

init: function(){
            if (!db) {
                db = new PouchDB('news');
            };
            mostrar();
            this.replicate();
        },

La versión modificada del método “init” lo que hace ahora es inicializar la variable db y seguidamente muestra los datos y en un proceso aparte inicia la replicación. Recuerden que en Javascript estos métodos son asíncronos, así que un método no bloquea al otro.

Finalmente, el método de replicación también debe considerar la lógica de mostrar los datos.

replicate: function(){
            db.replicate.from(remote,{live:true,retry:true})
                .on('paused',function(info){
                mostrar();
            });
        },

Listo, ahora ya cumplimos con los criterios y nuestra aplicación mostrará los datos que tenga localmente incluso trabajando sin red.

Un punto importante es que la lógica de refrescar datos es una función privada llamada mostrar. Se hace en una función privada porque según el modelo MVC solamente el controlador puede actualizar la vista, pero no debe manipular los datos. Todo siempre por separado.


  1. Tércio Santos

    Excelente!

  2. Muy buena manera de hacerlo, aún es un poco confuso pero supongo deben ser mis conocimientos empolvados!

  1. 1 Ionic Framework, PouchDB y Cloudant: la combinación perfecta totalmente expuesta | Víctor Pease

    […] Part 5 […]




Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s



%d bloggers like this: