PhoneGap RSS Reader - Part 4

For whatever reason, my articles on PhoneGap and RSS (see related entries below) have been incredibly popular. The last entry currently has 163 comments. Some of the comments deal with the fact that RSS, while a standard, does have a bit of variation to it. My code made some assumptions that didn't always work for other feeds. I thought this was a great opportunity to look at ways I could make the code more applicable to other types of feeds, especially Atom. Luckily, there is an awesome service for this - the Google Feed API.

As you can probably guess, the Google Feed API allows you to parse RSS feeds into simple to use data. It takes any valid RSS or Atom feeds and parses it into a simple, standard data model. While the previous code I used wasn't too difficult, it was also very tied to one particular flavor of RSS. I could have continued to add in support for multiple styles of RSS feeds but this seemed far easier to me.

To begin, I added a script tag to load in the Google Loader. This is service Google provides that allows you to dynamically include in JavaScript support for various Google APIs.

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

To load in support for the Feed API, I modified my mainPage pageinit event handler to ask Google Load to go grab the bits. It is very important that you provide the callback option to this API. If you do not, Google Load will blow away the jQuery Mobile DOM completely.

$("#mainPage").live("pageinit", function() {
//Set the title
$("h1", this).text(TITLE);

google.load("feeds", "1",{callback:initialize});
});

Now let's look at initialize. Previously, this is the portion that would have done the Ajax call, used XML parsing on the results, and stored the entries. Because Google's Feed API is doing this for me the code is now somewhat simpler. (I also added support for jQuery Mobile's "showPageLoadingMsg" API to make it obvious to the user that something is happening.) 

function initialize() {
console.log('ready to use google');
var feed = new google.feeds.Feed(RSS);
feed.setNumEntries(10);
$.mobile.showPageLoadingMsg();
feed.load(function(result) {
$.mobile.hidePageLoadingMsg();
if(!result.error) {
entries = result.feed.entries;
localStorage["entries"] = JSON.stringify(entries);
renderEntries(entries);
} else {
console.log("Error - "+result.error.message);
if(localStorage["entries"]) {
$("#status").html("Using cached version...");
entries = JSON.parse(localStorage["entries"]);
renderEntries(entries);
} else {
$("#status").html("Sorry, we are unable to get the RSS and there is no cache.");
}
}
});
}

And that's pretty much it. My previous code stored the content of the RSS item in a key called content. Google uses an key called description so I modified my display code.

As a final enhancement, I decided to make use of PhoneGap Build to create my mobile application. This allowed me to define a simple config.xml file to help define how the executables are generated. For example, I was able to provide simple icon support. (The icons I used were provided by Fast Icon.)

<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
        xmlns:gap = "http://phonegap.com/ns/1.0"
        id = "com.camden.rssviewer4"
        versionCode="10"
        version = "4.0.0">

    <name>RSS Viewer</name>

    <description>
        A simple RSS Viewer.
    </description>

    <author href="http://www.raymondcamden.com" email="raymondcamden@gmail.com">
        Raymond Camden
    </author>

    <icon src="icons/Feed_128x128.png" />

</widget>

You can see my application at the bottom here in the screen shot. And yes - I have a Selena Gomez app. Don't hate me for downloading apps my daughter loves.

Want to download the app yourself? Try the public Build page for every platform but iOS. You can also download all of the bits below.

 Download attached file