Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Create An RSS Reader Using AngularJS And Ionic Framework

TwitterFacebookRedditLinkedInHacker News

This article was designed to help you apply your knowledge of AngularJS and Ionic Framework and create a functional app rather than learn new concepts.

This tutorial should help you with the following concepts:

To process our RSS XML and convert to JSON, we are going to rely on Google’s Feed API, but we could always include our own XML processor.

Let’s start by creating our project from scratch using the command line:

ionic start ExampleRSSReader blank
cd ExampleRSSReader
ionic platform add android
ionic platform add ios

Please note that if you are not on a Mac, you cannot add the iOS platform. This tutorial will work fine for iOS, but you must be on a Mac. Otherwise, stick to just Android.

Let’s go ahead and install the Apache Cordova InAppBrowser plugin:

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

If you need further information on this plugin, you can see a full description with tutorial via my previous article on the topic.

So let’s get some background information on the Google Feed API. Based on the official documentation our endpoint for the API is GET http://ajax.googleapis.com/ajax/services/feed/load and it expects the following parameters:

ParameterDescription
vThe version of the API. Currently we are on version 1.0
qThe query to be used in the API. The URL with the RSS feed represents our query
numThe number of entries to return. Default is 4 and maximum is 100

If everything was done correctly, we will get a response that looks like this:

{
  "responseData": {
    "feed": {
      "feedUrl": "",
      "title": "",
      "link": "",
      "author": "",
      "description": "",
      "type": "rss20",
      "entries": [
        {
          "title": "",
          "link": "",
          "author": "",
          "publishedDate": "",
          "contentSnippet": "",
          "content": "",
          "categories": [
            ""
          ]
        }
      ]
    }
  },
  "responseDetails": null,
  "responseStatus": 200
}

Now that we know what the API expects and what it will return, we can start coding our application. Jumping into things, open www/js/app.js and add the following controller:

rssApp.controller("FeedController", function($http, $scope) {

    $scope.init = function() {
        $http.get("http://ajax.googleapis.com/ajax/services/feed/load", { params: { "v": "1.0", "q": "https://www.thepolyglotdeveloper.com/feed/" } })
            .success(function(data) {
                $scope.rssTitle = data.responseData.feed.title;
                $scope.rssUrl = data.responseData.feed.feedUrl;
                $scope.rssSiteUrl = data.responseData.feed.link;
                $scope.entries = data.responseData.feed.entries;
            })
            .error(function(data) {
                console.log("ERROR: " + data);
            });
    }

});

The above controller has an init() method that will make an HTTP request to the Google Feed API and store the response for use in our application. You can get more information on how the $http.get() method works from my previous article on the topic.

Now that we have a controller that handles our RSS data, lets worry about displaying it on the screen for the user. Go ahead and crack open your www/index.html file as that is where we will display our data:

<!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>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="cordova.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter">
        <ion-pane>
            <ion-header-bar class="bar-stable">
                <h1 class="title">Simple RSS Reader</h1>
            </ion-header-bar>
            <ion-content ng-controller="FeedController" ng-init="init()">
                <div class="list">
                    <div ng-repeat="entry in entries" class="item">
                        <b>{{entry.title}}</b><br>
                        <span ng-bind-html="entry.contentSnippet"></span>
                    </div>
                </div>
            </ion-content>
        </ion-pane>
    </body>
</html>

In the section above you’ll notice that we’ve added our FeedController and called the initialization function. The response data will be looped and displayed as an item in the list. You’ll notice that I used the ng-bind-html tag because I am expecting our content data to have HTML unsafe characters like single quotation mark. If I didn’t include this tag we would end up with raw HTML entities.

So now we need to make each item in the list take us to the actual entry page. This is where the Apache Cordova InAppBrowser comes into play. Change the following in your www/index.html file:

<a ng-repeat="entry in entries" class="item" ng-click="browse(entry.link)">
    <b>{{entry.title}}</b><br>
    <span ng-bind-html="entry.contentSnippet"></span>
</a>

You’ll notice that the div tags became a tags and that I’ve included an ng-click with a currently undefined method. Let’s define that function in our www/js/app.js file. Inside the FeedController add the following:

$scope.browse = function(v) {
    window.open(v, "_system", "location=yes");
}

Just like that, you can now click on any of the list items and be brought to the link that they summarize.

Ionic Framework RSS Reader

Now the last thing we want to do is cache our data in case there is a time where the user does not have internet access. This will be done by storing the entries in local storage on every successful API attempt, and using the stored items on every failed attempted. Let’s revisit the init() method in our controller:

$scope.init = function() {
        $http.get("http://ajax.googleapis.com/ajax/services/feed/load", { params: { "v": "1.0", "q": "https://www.thepolyglotdeveloper.com/feed/" } })
            .success(function(data) {
                $scope.rssTitle = data.responseData.feed.title;
                $scope.rssUrl = data.responseData.feed.feedUrl;
                $scope.rssSiteUrl = data.responseData.feed.link;
                $scope.entries = data.responseData.feed.entries;
                window.localStorage["entries"] = JSON.stringify(data.responseData.feed.entries);
            })
            .error(function(data) {
                console.log("ERROR: " + data);
                if(window.localStorage["entries"] !== undefined) {
                    $scope.entries = JSON.parse(window.localStorage["entries"]);
                }
            });
    }

Just like that, we have a very functional Ionic Framework app which demonstrates the use of HTTP requests, data caching, external web browsing, and Ionic lists.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.

Search

Follow Us

Support This Site