Ionic Framework, PouchDB y Cloudant: la combinación perfecta totalmente expuesta parte 08


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.

Bien, con lo desarrollado en la parte 07 ya tenemos una aplicación funcional que filtra los datos por categoría, pero no está completa pues faltaría una forma de poder elegir la categoría mediante un menú. En Ionic Framework, tenemos una librería de controles interesantes, y para nuestro caso, vamos a utilizar el side menú. Para eso tenemos que hacer la introducción de un concepto nuevo: estado abstracto.

Un estado abstracto es un estado utilizado para cuando lo que se quiere hacer es mostrar una parte del UI que es común para otros estados. Pensemos en que un estado abstracto es un marco donde podremos poner logos y cabeceras, e incluso poner cierta lógica y que tiene una zona donde otros estados podrán mostrar información.

Primero, comencemos cambiando nuestra configuración de estados en el archivo app.js:

.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('app',{
            abstract: true,
            views:{
                "home":{
                    templateUrl:"templates/menu.html",
                    controller:"menuController as menu"
                }
            }
        })
        .state('app.news', {
            url: "/",
            views: {
                "menuContent":{
                    templateUrl: "templates/news.html",
                    controller: "newsController as news"
                }
            }
        })
        .state('app.detail', {
            url: "/detail/:id",
            views: {
                "menuContent":{
                    templateUrl: "templates/detail.html",
                    controller: "detailController as detail"
                }
            },
            resolve:{
                detail: function($stateParams){
                    return $stateParams.id;
                }
            }
        });
        $urlRouterProvider.otherwise('/');
    });

Como pueden ver, hemos agregado un estado en la línea 17 donde el primer atributo es uno nuevo: abstract:true, lo que significa que éste será nuestro estado abstracto que servirá para colocar el side menu.
Una vez que hemos agregado el estado abstracto, ahora hay que indicar a los otros estados que deben tener como estado “padre” al estado “app”. Para eso, simplemente le añadimos “app.” al nombre de cada estado, con eso basta para indicar la dependencia. Fijense como ha cambiado el nombre en la línea 26 y en la línea 35.
Otro punto importante que deben notar es que hemos cambiado el valor del atributo “views” en la definición de cada estado en las líneas 29 y 38. Inicialmente, habíamos indicado que el estado sea mostrado en la vista “home” ahora le estamos diciendo que utilice la vista “menuContent”, puesto que estos estados serán mostrados dentro del estado abstracto, tendremos que indicar una vista definida dentro del estado abstracto. Veremos esto más claro al definir la vista para el menú.

En la configuración de estados hemos indicado que hay un controlador para el estado abstracto, así que agreguemos el controlador al archivo controllers.js:

angular.module('controllers',['services'])
	.controller('menuController',function(){
	})

Por ahora lo mantendremos así sin código.
Ahora agreguemos un template para el menú que hemos definido como el archivo menu.html

<ion-side-menus enable-menu-with-back-views="true">
    <ion-side-menu-content>
        <ion-nav-bar class="bar-stable">
            <ion-nav-buttons side="right">
                <button class="button button-icon icon ion-android-exit " ng-click="salir()"> Salir
                </button>
            </ion-nav-buttons>
            <ion-nav-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
                </button>
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content>

    <ion-side-menu expose-aside-when="large" side="left">
        <ion-header-bar class="bar-stable">

<h1 class="title">Noticias</h1>

        </ion-header-bar>
        <ion-content>
<div align="center">
                <img width="50" src="img/ionic.png">Categorias
            </div>
            <ion-list>
                <ion-item nav-clear menu-close>
                    Nacional
                </ion-item>
                <ion-item nav-clear menu-close>
                    Internacional
                </ion-item>
                <ion-item nav-clear menu-close>
                    Espectáculos
                </ion-item>
                <ion-item nav-clear menu-close>
                    Opinión
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

El componente sidemenu tiene dos partes: el side-menu y el side-menu-content, en nuestro ejemplo, hemos definido primero el side-menu-content donde podrán ver en la línea 13 que hemos definido la vista “menuContent” donde se mostrarán los demás estados dependientes.
En la línea 16 hemos definido el side-menu que es el menú propiamente que aparecerá a un costado. En este caso hemos definido que el estado se muestre a la izquierda “side=left” y que si la pantalla es muy ancha entonces el menú se muestre desplegado por defecto, si la pantalla es angosta, el menú se esconderá a la espera que hagamos un “swipe” o hagamos click en el botón de tres líneas que aparecerá.

Para resumir, tenemos ahora varios niveles de estado:
– Index.html define la vista “home”
– En la configuración de estados, pintamos el estado abstracto “app” definido en el archivo “menu.html” en la vista “home”
– Menu.html define la vista “menuContent”
– Todos los demás estados se hacen dependientes del estado app y serán mostrados en la vista “menuContent”.

El resultado es algo parecido a esto:
Con la pantalla ancha tipo tablet.

menuA

Con la pantalla angosta

menuB01 menuB02

Si hacemos click a una noticia podemos ver como se sigue mostrando dentro del mismo marco. También notarán que la lista de categorías está puesta manualmente y además no hacen mucho. Para no extender mucho el post, primero hacemos que el menú funcione.

Primero revisemos el estado original de nuestro servicio que controla los datos (services.js)

angular.module('services',[])
.factory('db',function($rootScope){
    var key = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
   var pass = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
   var remote = 'https://'+key+':'+pass+'@server.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);
                });
    };
    var mostrarCat = function(catId){
        db.query('news/topic',{key:[catId],include_docs:true,descending:true})
                    .then(function(result){
                    $rootScope.$broadcast('refrescar',result.rows);
                });
    };
    return {
        init: function(){
            if (!db) {
                db = new PouchDB('news');
            }
            mostrarCat("cat_01");
            this.replicate();
        },
        replicate: function(){
            db.replicate.from(remote,{live:true,retry:true})
                .on('paused',function(info){
                mostrarCat("cat_01");
            });
        },
        get: function(id){
            return db.get(id);
        }
    }
});

NOTA: En la línea 14 estoy incluyendo una corrección : he cambiado el parámetro “startkey” por “key”. La diferencia es que “startkey” se usa para cuando se quiere establecer un rango, por lo que “cat_01” con el parámetro descending true devolverá sólo “cat_01”, mientras que “cat_04” mostrará también “cat_03”, “cat_02” y “cat_01” lo que no buscamos. Con “key” solamente se devolverán los valores iguales al id de categoría.

Podemos ver que estamos pasando “en duro” la categoría 1 como parámetro para mostrar, por lo tanto tenemos que crear una variable miembro para almacenar este valor, cosa que al seleccionar un elemento del menú su valor se cambie para mostrar las noticias correspondientes. Por defecto mostraremos todas las noticias y tendremos que agregar un método para actualizar la variable de categoría y refrescar la vista. En el archivo services.js, empecemos agregando la variable cat:

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 cat;

Luego agregamos el método que llamaremos “setCat”

get: function(id){
    return db.get(id);
},
setCat: function(id){
    cat = id;
    mostrarCat(cat);
}

Ahora, tenemos que eliminar las llamadas de mostrarCat con la categoría “en duro”

return {
    init: function(){
        if (!db) {
            db = new PouchDB('news');
        }
        mostrarCat(cat);
        this.replicate();
    },
    replicate: function(){
        db.replicate.from(remote,{live:true,retry:true})
            .on('paused',function(info){
            mostrarCat(cat);
        });
    },

Finalmente, si mostrarCat recibe un valor nulo o vacio debemos mostrar todas las noticias.

var mostrarCat = function(catId){
    if (catId)        
    db.query('news/topic',{key:[catId],include_docs:true,descending:true})
                .then(function(result){$rootScope.$broadcast('refrescar',result.rows);});
    else mostrar();
};

Con eso ya arreglamos el modelo, ahora vamos al controlador en el archivo controllers.js.

angular.module('controllers',['services'])
	.controller('menuController',function($state,$scope,db){
		$scope.setCat = function(id){
			$state.go('app.news');
			db.setCat(id);
		};
	})

Aquí estamos usando una nueva entidad $state que nos va a permitir llamar a un estado.
Ahora, en la vista tenemos que llamar a la función del controlador al momento de hacer click. Como tenemos las categorías “en duro”, seguiremos indicando las claves “en duro”, así que modificamos el archivo menu.html para incluir los links que llamen a la función $scope.setCat(id):

 <ion-list>
     <ion-item nav-clear menu-close ng-click='setCat("cat_01")'>
       Nacional
     </ion-item>
     <ion-item nav-clear menu-close ng-click='setCat("cat_02")'>
       Internacional
     </ion-item>
     <ion-item nav-clear menu-close ng-click='setCat("cat_03")'>
       Espectáculos
     </ion-item>
     <ion-item nav-clear menu-close ng-click='setCat("cat_04")'>
       Opinión
     </ion-item>
</ion-list>

Lo que hemos hecho es agregar la propiedad ng-click para que se ejecute la funcion setCat(id) definida en el controlador tal como lo dijimos.

Y listo. Por ahora tendremos el siguiente comportamiento:

  • La aplicación mostrará todas las noticias al cargar
  • Al hacer click en una categoría, se mostrarán solamente las tareas relacionadas

En el siguiente post veremos como cargar las categorías directamente de la base de datos y ya no “en duro”. Ya saben si encuentran algún error, me avisan.


  1. Tércio Santos

    Excelente Post Vitor! Una sugerencia: Enviar notificaciones Push a los usuarios cuando se ingrese una nueva noticia. Saludos,

  2. Muy bueno Victor me ha servido muchísimo !!! Me faltaría saber, si tengo un login previo, con usuario y clave, como hago para mostrar el usuario en, por ejemplo, la cabeza del menu, o en cualquier opción de este. Gracias !!!

    • En ese caso tendrías que autenticar el usuario y solamente si es válido pasar el usuario como parámetro de la sincronización. En mi ejemplo, los registros son filtrados por el ID del dispositivo, en tu caso, sería el ID de usuario

  3. afghan77

    Excelente, estoy iniciando en esto de Ionic. Puedo tener 2 estados abstract? En mi caso, estoy haciendo que la primer pantalla sea un login con un tab inferior que muestre login o register, una ves ingresado el tab desaparece y me gustaria agregar un sidemenu, entiendo que este ultimo es tambien un estado abstracto para que este visible en todas las vistas que contenga. Saludos!

    • Si puedes. Mientras necesites tener una cabecera significará que tendrás que usar un abstract

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

    […] Part 8 […]




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: