Crea una aplicación móvil para mostrar el contenido RSS de tu sitio web con Ionic

En este tutorial veremos cómo crear una aplicación móvil que muestre el contenido RSS de un sitio web. Configuraremos el URL del RSS y la aplicación lo descargará, lo analizará y mostrará las publicaciones del RSS.

Para crear la aplicación móvil usaremos el framework Ionic v1 junto con AngularJS. Para completar este tutorial necesitas tener algo de experiencia con JavaScript y HTML. Además, haber trabajado antes con AngularJS es de ayuda.

Si nunca antes has trabajado con el framework Ionic, te recomiendo que al menos eches un vistazo a la Guía de inicio, ya que te brinda una idea rápida de cómo funcionan las cosas.

¡Comencemos!

Configurando el proyecto de Ionic

Voy a suponer que ya instalaste Node en tu sistema y que también tienes el npm (el administrador de paquetes de Node). La instalación del framework Ionic es tan fácil como ejecutar lo siguiente:

1

npm install -g cordova ionic

Esto instalará tanto Cordova como Ionic en tu computadora.

Cordova es la tecnología central para Ionic, y básicamente nos permite tener un navegador integrado en nuestra aplicación móvil. En ese navegador podremos ejecutar todo nuestro código HTML y JavaScript. Esto se conoce como aplicación móvil híbrida, ya que la aplicación no ejecuta código nativo, sino que se ejecuta dentro del navegador.

Junto a Cordova, Ionic agrega la posibilidad de usar AngularJS para escribir nuestro código, y también agrega un muy buen framework de interfaz de usuario.

Con Ionic instalado, podemos crear nuestro proyecto usando la CLI de Ionic, una herramienta de línea de comandos muy útil. Ionic proporciona tres plantillas de proyecto predeterminadas que pueden ser usadas como punto de partida:

• vacía: como el nombre lo indica, es un proyecto vacío con tan solo los componentes mínimos necesarios en su lugar.
• pestañas: una aplicación que usa pestañas para navegar a través de sus pantallas.
• menú lateral: una aplicación que usa un menú lateral móvil estándar para navegar.

Para este tutorial usaremos la plantilla de aplicación con pestañas. Para comenzar nuestro proyecto ejecutemos lo siguiente:

1

ionic start myWebsiteOnMobile tabs

Ionic descargará e instalará todos los componentes necesarios, y creará la carpeta de proyecto llamada myWebsiteOnMobile. Ve al directorio del proyecto ejecutando esto:

1

cd myWebsiteOnMobile

Ya que la nuestra es una aplicación móvil híbrida, tenemos la ventaja de poder ejecutarla dentro de un navegador. Para hacer esto, Ionic proporciona un gran servidor web integrado que ejecuta nuestra aplicación de esta manera:

1

ionic serve

Esto abrirá un navegador con nuestra aplicación cargada, y se verá de esta forma:

Para detener el servidor, usa Control-C en tu pantalla de línea de comandos. Para tener una mejor idea de cómo se ve la aplicación en un dispositivo móvil, puedes usar:

1

ionic serve --lab

Esto abrirá la aplicación en el navegador, mostrando una vista previa de la aplicación en iOS y Android una al lado de la otra.

La plantilla para aplicaciones con pestañas de Ionic tiene tres pestañas: Status (Estado), Chats y Account (Cuenta). En los siguientes pasos ajustaremos la aplicación para que se adapte a nuestras necesidades.

Cómo ajustar la aplicación de la plantilla predeterminada con pestañas de Ionic

Para nuestra aplicación tendremos dos pestañas:

• Latest posts (Publicaciones más recientes): mostrando una lista de las publicaciones más recientes obtenidas a partir de la fuente RSS.
• Settings (Configuraciones): en donde el usuario podrá configurar diversos aspectos de la aplicación.

Desde la pestaña Latest posts (Publicaciones más recientes), el usuario podrá hacer clic en cualquiera de las publicaciones más nuevas y ver más información sobre ella, con la posibilidad de abrir la publicación en un navegador externo.

Ya que nuestra pestaña Latest posts (Publicaciones más recientes) es similar a la pestaña Chats proporcionada por la plantilla, vamos a reutilizarla junto con la pestaña Account (Cuenta), que se convertirá en nuestra pestaña Settings (Configuraciones). Podemos hacer todas las modificaciones con el servidor web de Ionic en ejecución, y Ionic volverá a cargar la aplicación para nosotros. Esta es una función muy conveniente que acelerará el proceso de desarrollo.

Como se mencionó anteriormente, Ionic usa AngularJS, y de  hecho la aplicación completa es un módulo de AngularJS. El módulo se define en www/js/app.js, y aquí también es en donde se definen las rutas de la aplicación. Cada pantalla de la aplicación tiene una ruta que le corresponde.

Eliminemos la pestaña Status (Estado), ya que no la necesitaremos. Para hacer esto, primero debemos cambiar la pantalla (o ruta) predeterminada de nuestra aplicación para que apunte a la pantalla Chats, que se convertirá en nuestra pantalla principal. La pantalla predeterminada se configura usando $urlRouterProvider.otherwise(), así que cambiemos eso a:

1

$urlRouterProvider.otherwise('/tab/chats');

Si ahora volvemos a cargar http://localhost:8100 en nuestro navegador, veremos que la pestaña Chats se cargará de forma predeterminada.

Para eliminar la pestaña Status (Estado), necesitamos editar el archivo www/templates/tabs.html que contiene la plantilla para el componente de pestaña. Vamos a eliminar el elemento:

1

  <!-- Dashboard Tab -->

2

  <ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">

3

    <ion-nav-view name="tab-dash"></ion-nav-view>

4

  </ion-tab>

Al guardar, veremos que la aplicación ahora solamente tiene dos pestañas: Chats y Account (Cuenta).

Estando en el archivo www/templates/tabs.html, podemos notar que hay algunas etiquetas HTML que no son HTML estándar, como ion-tabs, ion-tab e ion-nav-view. En realidad estas son directivas de AngularJS definidas por el framework Ionic. Las directivas son etiquetas que empaquetan funcionalidad en ellas, y son maneras muy convenientes de escribir código más estructurado y conciso.

En nuestro caso, la directiva ion-tabs es el componente de las pestañas, el cuál requiere una directiva ion-tab para cada pestaña.

Cambiemos nuestras pestañas de Chat y Account (Cuenta) a los nombres que requerimos, Latest posts (Publicaciones más recientes) y Settings (Configuraciones). Para hacer esto, vamos a modificar varias cosas en el archivo www/templates/tabs.html:

• El atributo title de los elementos ion-tab, que determina el texto que aparece en el botón de la pestaña. Vamos a cambiarlo a Latest posts (Publicaciones más recientes) y Settings (Configuraciones), respectivamente.
• El atributo href de los elementos ion-tab, que apunta a la ruta o URL de la pantalla. Cambiaremos estos a #/tab/latest-posts y #/tab/settings.
• El atributo name de los elementos ion-nav-view a tab-latest-posts y tab-settings. Estos son los identificadores de las plantillas de despliegue que se usan para las pantallas Latest posts (Publicaciones más recientes) y Settings (Configuraciones).

Como resultado, www/templates/tabs.html deberá verse así:

1

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

2

3

  <!-- Latest posts Tab -->

4

  <ion-tab title="Latest posts" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/latest-posts">

5

    <ion-nav-view name="tab-latest-posts"></ion-nav-view>

6

  </ion-tab>

7

8

  <!-- Settings Tab -->

9

  <ion-tab title="Settings" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/settings">

10

    <ion-nav-view name="tab-settings"></ion-nav-view>

11

  </ion-tab>

12

13

14

</ion-tabs>

Después de hacer estos cambios recibiremos algunos errores. Esto es debido a que también tenemos que ajustar nuestras rutas para que usen los nuevos identificadores que hemos empleado. En www/js/app.js necesitamos cambiar los identificadores state (estado), los identificadores view (vista) y el url para cada ruta de acuerdo a lo que hemos establecido anteriormente.

Existe un controlador definido para cada ruta (o pantalla). Este es un patrón de diseño MVC (Modelo-Vista-Controlador) básico. Los controladores están definidos dentro del archivo www/js/controllers.js. Para mantener la coherencia, vamos a cambiar los nombres de los controladores tanto en www/js/app.js como en www/js/controller.js:

• ChatsCtrl se convierte en LatestPostsCtrl.
• ChatDetailCtrl se convierte en PostDetailCtrl.
• AccountCtrl se convierte en SettingsCtrl.
  

Además, para cada ruta tenemos una plantilla de despliegue definida, así que vamos a cambiarlas también. Edita www/js/app.js y modifica templateUrl de esta forma:

• Modifica tab-chats.html para que sea tab-latest-posts.html. También cambia el nombre del archivo www/templates/tab-chats.html para que sea www/templates/tab-latest-posts.html.
• Cambia chat-detail.html para que sea post-detail.html. También cambia el nombre del archivo www/templates/chat-detail.html para que sea www/templates/post-detail.html.
• Cambia tab-account.html para que sea tab-settings.html. También cambia el nombre del archivo www/templates/tab-account.html para que sea www/templates/tab-settings.html.
• Finalmente, cambia la vista que se carga de forma predeterminada a latest-posts usando $urlRouterProvider.otherwise('/tab/latest-posts').

Si todo salió bien, entonces el archivo www/js/app.js deberá verse de esta manera:

1

...

2

// Each tab has its own nav history stack:

3

4

  .state('tab.latest-posts', {

5

      url: '/latest-posts',

6

      views: {

7

        'tab-latest-posts': {

8

          templateUrl: 'templates/tab-latest-posts.html',

9

          controller: 'LatestPostsCtrl'

10

        }

11

      }

12

    })

13

    .state('tab.post-detail', {

14

      url: '/latest-posts/:postId',

15

      views: {

16

        'tab-latest-posts': {

17

          templateUrl: 'templates/post-detail.html',

18

          controller: 'PostDetailCtrl'

19

        }

20

      }

21

    })

22

23

  .state('tab.settings', {

24

    url: '/settings',

25

    views: {

26

      'tab-settings': {

27

        templateUrl: 'templates/tab-settings.html',

28

        controller: 'SettingsCtrl'

29

      }

30

    }

31

  });

32

33

  // if none of the above states are matched, use this as the fallback

34

  $urlRouterProvider.otherwise('/tab/latest-posts');

35

  ...

Y nuestro archivo www/js/controllers.js limpio se ve así:

1

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

2

.controller('LatestPostsCtrl', function($scope) {})

3

.controller('PostDetailCtrl', function($scope, $stateParams) {})

4

.controller('SettingsCtrl', function($scope) {});

Ahora que hemos reestructurado la aplicación para que se ajuste a nuestras necesidades, vayamos a la siguiente parte y agreguemos un poco de funcionalidad.

Cómo recuperar una fuente RSS con Ionic

Para mostrar la lista de las publicaciones más recientes, nuestra aplicación necesitará obtener la fuente RSS a partir de un URL. Como práctica recomendada, es aconsejable que este tipo de funcionalidad resida en la capa de servicio de la aplicación. De esta manera podemos usarla más fácilmente en nuestro controlador y luego presentarla al usuario mediante una vista.

El servicio RSS usará la API REST YQL de Yahoo para recuperar el RSS de nuestro sitio web. Para llamar a la API REST usaremos el proveedor $http ofrecido por AngularJS.

Los servicios de Ionic usualmente están definidos en el archivo www/js/services.js, así que ahí es donde pondremos el nuestro también. El código se verá de esta manera:

1

angular.module('starter.services', [])

2

.service('RSS',function($http){

3

  var self = this;

4

  this.download = function(next){

5

    var feedUrl = "https://tutsplus.com/posts.atom";

6

    var yql_query = "select * from xml where url = '"+feedUrl+"'";

7

    var url = 'https://query.yahooapis.com/v1/public/yql?q='+encodeURIComponent(yql_query)+'&format=json&callback=JSON_CALLBACK';

8

    $http

9

      .jsonp(url)

10

      .success(function(response){

11

        if (response.query.results["feed"]){

12

          next(self.parseAtom(response.query.results));

13

        } else if (response.query.results["rss"]){

14

          next(self.parseRSS(response.query.results));

15

        } else {

16

          throw "Unknown RSS format";

17

        }

18

      })

19

      .error(function(data, status){

20

21

      });

22

  }

23

24

  this.parseAtom = function(atomFeed){

25

    var posts = [];

26

    angular.forEach(atomFeed.feed.entry,function(item,idx){

27

      var post = {

28

        id:idx,

29

        title:item.title,

30

        description:item.content.content,

31

        link:item.link.href

32

      }

33

      posts.push(post);

34

    })

35

    return posts;

36

  }

37

38

  this.parseRSS = function(rssFeed){

39

    var posts = [];

40

    angular.forEach(rssFeed.rss.channel.item,function(item,idx){

41

      var post = {

42

        id:idx,

43

        title:item.title,

44

        description:item.description,

45

        link:item.link

46

      }

47

      posts.push(post);

48

    })

49

    return posts;

50

  }

51

})

Declaramos el servicio usando el método service() proporcionado por AngularJS. Después inyectamos el módulo $http de Angular para poder invocarlo en nuestro servicio.

La variable self es una referencia al servicio RSS para que podamos invocarlo desde el interior de los métodos del servicio. El método principal del servicio es el método download(), que descarga la información de la fuente y la procesa. Existen dos formatos principales usados para fuentes de sitios web: RSS y ATOM. Para nuestra aplicación hemos usado la fuente de los tutoriales de Tuts+ https://tutsplus.com/posts.atom, que se encuentra en format ATOM, pero para completar también hemos tomado en cuenta el formato RSS.

El método download() llama a la API YQL y analiza los resultados usando los métodos parseAtom() o parseRSS(), dependiendo del tipo de fuente. La idea aquí es tener el mismo formato de salida que se enviará a través de la devolución de llamada next(). Con el servicio RSS en su lugar, podemos pasar al controlador.

Conectando el servicio RSS al controlador de publicaciones más recientes

En nuestro archivo www/js/controllers.js necesitamos cargar los datos RSS y enviarlos a nuestra vista. Para hacer esto solamente necesitamos modificar nuestro controlador LatestPostsCtrl de esta forma:

1

.controller('LatestPostsCtrl', function($scope, RSS) {

2

  RSS.download(function(posts){

3

    $scope.posts = posts;

4

  });

5

})

Usando el mecanismo de inyección de dependencias de Angular, solamente necesitamos especificar las variables $scope y RSS como parámetros de método, y así sabrá cómo cargar esos módulos. El módulo $scope nos permite establecer variables en el modelo vinculado a la vista. Cualquier valor establecido en scope puede recuperarse y mostrarse dentro de la vista asociada al controlador.

Cuando se carga la vista de publicaciones más recientes, esta llamará al controlador LatestPostsCtrl que a su vez usará el servicio RSS para descargar la información de la fuente. Los resultados son analizados y se devuelven como una matriz usando la variable posts, que almacenamos en el ámbito actual.

Teniendo todo eso fuera del camino, ahora podemos continuar con la parte del despliegue, mostrando la lista de publicaciones recuperadas de la fuente.

Vinculando la vista de publicaciones más recientes a los datos de la fuente

Ahora necesitamos modificar nuestra vista para las publicaciones más recientes. Si recuerdas, esto se configura en el archivo www/js/app.js a través del atributo templateUrl, y apunta al archivo www/templates/tab-latest-posts.html.

Lo que queremos hacer es mostrar la lista de fuentes. Ya que es posible que la información de la fuente contenga HTML, y esto solamente saturará la lista de publicaciones más recientes, necesitamos algo para extraer el texto sin las etiquetas HTML del contenido de una publicación. La manera más sencilla de hacer eso es definiendo un filtro de AngularJS que elimine las etiquetas HTML del texto. Hagamos eso en www/js/services.js añadiendo:

1

.filter('htmlToPlaintext', function() {

2

    return function(text) {

3

      return  text ? String(text).replace(/<[^>]+>/gm, '') : '';

4

    };

5

  }

6

)

Ahora, de vuelta a nuestra vista dentro del archivo www/templates/tab-latest-posts.html, vamos a modificarla para que se vea así:

1

<ion-view view-title="Latest posts">

2

  <ion-content>

3

    <ion-list>

4

      <ion-item class="item-icon-left item-icon-right" ng-repeat="post in posts" type="item-text-wrap" href="#/tab/latest-posts/{{post.id}}">

5

        <span class="icon ion-social-rss-outline"></span>

6

        <h2>{{post.title}}</h2>

7

        <p>{{post.description | htmlToPlaintext}}</p>

8

        <i class="icon ion-chevron-right icon-accessory"></i>

9

      </ion-item>

10

    </ion-list>

11

  </ion-content>

12

</ion-view>

Estamos usando el componente lista de la interfaz de usuario de Ionic junto con la directiva ng-repeat de Angular, que recorrerá los posts establecidos en el alcance de nuestro controlador. Para cada publicación tendremos un elemento de lista con su título y con la descripción sin las etiquetas HTML, esto mediante el uso del filtro htmlToPlaintext. También toma en consideración que al hacer clic en una publicación debemos ir a los detalles de la misma, debido al atributo href establecido con el valor #/tab/latest-posts/{{post.id}}. Esto aún no funciona, pero nos encargaremos de eso en la siguiente sección.

Si ahora ejecutamos la aplicación usando ionic serve --lab deberíamos obtener algo como esto:

Mostrando los detalles de una publicación

Al hacer clic en una publicación de la lista, vamos a la pantalla de detalles de la aplicación para dicha publicación. Ya que cada pantalla de la aplicación tiene su propio controlador y, por lo tanto, su propio alcance, no podemos acceder a la lista de publicaciones para mostrar una publicación específica. Podemos llamar al servicio RSS de nuevo, pero eso sería ineficiente.

Para resolver este problema podemos usar la directiva $rootScope ofrecida por Angular. Esta hace referencia a un ámbito que abarca a todos los controladores de la aplicación. Vamos a modificar nuestro LatestPostCtrl para establecer las publicaciones en $rootScope y luego a buscar la publicación específica en la que el usuario haya hecho clic en PostDetailCtrl. El código resultante en www/js/controllers.js se verá de esta forma:

1

.controller('LatestPostsCtrl', function($scope, $rootScope, RSS) {

2

  RSS.download(function(posts){

3

    $rootScope.posts = posts;

4

  });

5

})

6

7

.controller('PostDetailCtrl', function($scope,$rootScope, $stateParams) {

8

  angular.forEach($rootScope.posts,function(post){

9

    if (post.id == $stateParams.postId){

10

      $scope.post = post;

11

    }

12

  })

13

})

Simplemente inyectamos $rootScope en ambos controladores y lo usamos para enviar posts entre los dos controladores. Por favor toma en cuenta que no necesitamos hacer ningún cambio en nuestra vista de publicaciones más recientes, ya que es posible acceder tanto a $rootScope como a $scope de la misma manera desde la vista.

Dentro del controlador PostDetailCtrl, simplemente buscamos la publicación que tenga el id enviado en el vínculo al que el usuario hizo clic. Hacemos eso comparando el ID de cada publicación con el valor del URL enviado a través de la variable $stateParams.postId. Si encontramos un valor que coincida, entonces establecemos la publicación en el alcance para que podamos usarla en nuestra vista.

Ahora ajustemos nuestra vista para los detalles de la publicación www/templates/post-detail.html de esta manera:

1

<ion-view view-title="{{post.title}}">

2

  <ion-nav-buttons side="right">

3

    <a ng-href="{{post.link}}" class="button" target="_system">

4

      Open

5

    </a>

6

  </ion-nav-buttons>

7

  <ion-content class="padding">

8

    <h1>{{post.title}}</h1>

9

    <span ng-bind-html="post.description"></span>

10

  </ion-content>

11

</ion-view>

Esto es lo que hicimos en la vista:

• Hemos colocado el título de la publicación en el encabezado de la pantalla.
• Hemos colocado un botón "Open" ("Abrir") en el encabezado a la derecha. Este botón abrirá el vínculo de la publicación en un navegador externo debido al atributo target="_system". Tenemos que hacer esto debido a que la aplicación ya está en ejecución en un navegador gracias a Cordova. Si no hubiéramos establecido ese atributo, la publicación se hubiera abierto en el mismo navegador que la aplicación, y entonces no tendríamos ninguna manera de regresar a ella.
• Mostramos la descripción de la publicación como HTML usando la directiva ng-bind-html de Angular.

Al ejecutar la aplicación noté que si la descripción de la publicación contiene imágenes, algunas de ellas quedan fuera de la pantalla. Esto puede ocurrir con otros elementos HTML como videos. Podemos corregir esto fácilmente agregando la siguiente regla CSS en www/css/style.css.

1

ion-content *{

2

    max-width: 100%;

3

}

Si ahora echamos un vistazo a la aplicación y hacemos clic en una de las publicaciones, deberíamos ver algo como esto:

Y nuestra aplicación está casi terminada. En la siguiente sección echaremos un vistazo a la implementación de la pantalla de configuraciones.

Añadiendo configuraciones a nuestra aplicación de Ionic

Para nuestra pantalla de configuraciones, vamos a implementar una manera de indicar cuántas publicaciones mostrar en la pantalla principal de la aplicación. Vamos a almacenar esta configuración en la memoria localStorage, que no se borra al cerrar la aplicación. Vamos a editar el archivo de los controladores www/js/controllers.js y a cambiar el controlador SettingsCtrl de esta manera:

1

.controller('SettingsCtrl', function($scope,$rootScope) {

2

  $scope.settings = {

3

    maxPosts:  window.localStorage.getItem("myWebsiteOnMobile.maxPosts")

4

  };

5

6

  $scope.$watch('settings.maxPosts',function(){

7

    window.localStorage.setItem("myWebsiteOnMobile.maxPosts",$scope.settings.maxPosts);

8

    $rootScope.maxPosts = window.localStorage.getItem("myWebsiteOnMobile.maxPosts");

9

  });

10

});

Además, necesitamos modificar la pantalla de configuraciones en www/templates/tab-settings.html de esta forma:

1

<ion-view view-title="Settings">

2

  <ion-content>

3

      <div class="item item-divider item-balanced">Maximum posts</div>

4

	<ion-radio ng-model="settings.maxPosts" ng-value="null">Unlimited</ion-radio>

5

	<ion-radio ng-model="settings.maxPosts" ng-value="5">5</ion-radio>

6

	<ion-radio ng-model="settings.maxPosts" ng-value="10">10</ion-radio>

7

  </ion-content>

8

</ion-view>

El controlador recupera la configuración myWebsiteOnMobile.maxPosts de localStorage. Si no existe tendrá un valor null, y consideraremos que no hay límite para el número máximo de publicaciones.

Invocamos al método $scope.$watch() para monitorear cambios en la variable settings.maxPosts, que está vinculada al control de radio en la pantalla de configuraciones.

Con todo esto en su lugar, cada vez que cambiemos el número máximo de publicaciones en la pantalla de configuraciones, dicha configuración será almacenada en localStorage, y su valor se obtendrá de ahí cuando la aplicación reinicie.

Ahora usemos esta configuración. Esto es tan simple como añadir esto en LatestPostsCtrl de www/js/controllers.js:

1

$rootScope.maxPosts = window.localStorage.getItem("myWebsiteOnMobile.maxPosts");

Y añadiendo una directiva en la pantalla de publicaciones más recientes www/templates/tab-latest-posts.html:

1

<ion-item class="item-icon-left item-icon-right" ng-repeat="post in posts|limitTo:maxPosts" type="item-text-wrap" href="#/tab/latest-posts/{{post.id}}">

Presta atención al filtro limitTo:maxPosts de Angular. Este limitará el número de publicaciones mostradas en base al número obtenido de localStorage. De forma predeterminada, este será null, lo que mostrará todas las fuentes obtenidas por el servicio RSS.

¡Enhorabuena! ahora tenemos una aplicación totalmente funcional que muestra una fuente RSS.

Conclusión

En este tutorial hemos visto cómo crear una aplicación móvil híbrida usando el framework Ionic y AngularJS. Solamente hay una cosa más que hacer: ejecutar la aplicación en un dispositivo móvil o un emulador. Esto es muy sencillo con Ionic. Para ejecutar la aplicación en un emulador de Android, simplemente ejecuta:

1

ionic platform add android

2

ionic run

Si quieres descargar una plantilla para aplicaciones Ionic prefabricada para transformar cualquier sitio web a una aplicación móvil, prueba Website to Mobile Ionic Application Template de CodeCanyon.