RSS stands for Rich Site Summary.

An RSS web feed includes summarized or full text of a blog.

It also includes metadata like URL, Title, Published date, and time etc.

To build the PhoneGap RSS Reader..

..we’re going to integrate PhoneGap components with Google Feed API.

Google Feed API will fetch the feeds of the website and these feeds will get displayed in the PhoneGap App.

PhoneGap RSS Reader allows you to reach your subscribers and send them news feeds of your latest blog posts through a mobile app..!!

Benefits of PhoneGap RSS Reader

Let’s take a look at the benefits a user/subscriber is going to have by using PhoneGap RSS Reader:

  • Receive Timely Updates: Users/Subscribers will receive timely updates of their favourite websites and blogs on their mobile.
  • No need to check website manually: By subscribing to a website’s RSS feed, the user/subscriber does not need to check the website manually for new content.

phonegap-rss-reader-img


Idea Of The App

Features

  • Fetch blog feeds of FormGet and Inkthemes.
  • Fetch feeds of any website that user entered in the text input box.
  • Opens blog posts in the inappbrowser.

Technologies Used

jQuery Mobile : For Interface / UI Designing

  • We’re going to use jQuery Mobile for designing interface.

Google Feed API

  • We’re going to fetch feeds by using Google Feed API.

Files :

HTML File : Index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

<!--Stylesheet Files : jQuery Mobile CSS File, Customized CSS File and Font Awesome for icons -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">
<link rel="stylesheet" href="css/my.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">

<!--jQuery File : Library, Mobile Library,Google Feed API JS Cordova JS and Customized JS File -->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="js/my.js"></script>
<title>Feeds</title>
</head>

<!--Beginning of the Body-->
<body>
<div data-role="page">
<div data-role="header" data-position="fixed" class="ui-header ui-bar-a ui-header-fixed slidedown" role="banner">
<h1>Feed Me</h1>
</div>
<div data-role="main" class="ui-content" id="main">

<!--Feed URL Text Box-->
<form>
<ul data-role="listview" data-inset="true">
<li class="ui-field-contain">
<label for="name2">Enter a feed URL:</label>
<input type="text" id="feedurl" value="" data-clear-btn="true">
</li>
<li class="ui-body ui-body-b">
<a href="#" id="getfeed" class="ui-shadow ui-btn ui-corner-all">Get Feeds</a>
</li>
</ul>
</form>
<!--End of Feed URL Text Box-->

<center><p><strong>OR</strong></p></center>
<div data-role="tabs">

<!--Navbar containing FormGet and InkThemes Logo Buttons-->
<div data-role="navbar">
<ul>
<li><a id="formget" href="#fg" data-theme="a" data-ajax="false"><img src="img/formget-logo.png"/></a></li>
<li><a id="inkthemes" href="#it" data-theme="a" data-ajax="false"><img width="237" height="49" src="img/inkthemes-logo.png"/></a></li>
</ul>
</div>
<div id="fg" class="ui-content">
<ul data-role="listview" data-inset="true" id="myTable">
</ul>
</div>
<div id="it" class="ui-content">
<ul data-role="listview" data-inset="true" id="myTable1">
</ul>
</div>
<div id="it" class="ui-content">
<ul data-role="listview" data-inset="true" id="myTable2">
</ul>
</div>
<!--End of the navbar-->

</div>
</div>
</div>
</body>
<!--End of the body-->
</html>

JavaScript File : Map.js

document.addEventListener("deviceready", onDeviceReady, false);

<!--Device Ready Function-->
function onDeviceReady() {

<!--Opening the link in the inappbrowser-->
$(document).on('click', '#link', function(){
var website = $("#link").attr("data-link");
alert(website);
window.open = cordova.InAppBrowser.open;
var ref = window.open(website, '_blank', 'location=yes');
ref.addEventListener('loadstart', function(event) { alert('start: ' + event.url); });
ref.addEventListener('loadstop', function(event) { alert('stop: ' + event.url); });
ref.addEventListener('loaderror', function(event) { alert('error: ' + event.message); });
ref.addEventListener('exit', function(event) { alert(event.type); });
});
}

<!--Loading Javascript API-->
google.load("feeds", "1");

<!--Defining initialize method fetching feeds and displaying them-->
function initialize(url) {
if (url == "https://www.formget.com/feed") {
var tab = "myTable";
}
else if(url == "http://www.inkthemes.com/feed"){
var tab = "myTable1";
}
else{
var tab ="myTable2";
}

<!--Calling google's feed method-->
var feed = new google.feeds.Feed(url);

<!--Setting the result format = Json Format-->
feed.setResultFormat(google.feeds.Feed.JSON_FORMAT);

<!--Setting the number of results = 10 -->
feed.setNumEntries(10);

<!--Loading the feeds-->
feed.load(function(result) {
var div1 = "";
var pubdate;
if (!result.error) {
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];

<!--Grabbing Blog URL, Blog title, Blog Category and Publish Date and displaying them-->
div1 += "<li><a class='ui-btn ui-btn-icon-right ui-icon-carat-r' id=\"link\" data-link=\"" + entry.link + "\">" + entry.title + "<p id=\"catp\"><strong id=\"cat\">" + entry.categories + "</strong></p><p>" + entry.publishedDate + "</p>" + "</a></li>";
document.getElementById("myTable").innerHTML = div1;
document.getElementById("myTable1").innerHTML = div1;
}
}
});
}

<!--Grabbing Feed URL entered by the user-->
$(document).ready(function() {
$("#getfeed").click(function() {
var url = $("#feedurl").val();
alert(url);
initialize(url);
});
});

<!--Grabbing FormGet's blog feeds-->
$(document).ready(function() {
$("#formget").click(function() {
var url = $("#formget").attr("id");
url = "http://www." + url + ".com/feed";
initialize(url);
});

<!--Grabbing InkTheme's blog feeds-->
$("#inkthemes").click(function() {
var url = $("#inkthemes").attr("id");
url = "http://www." + url + ".com/feed";
initialize(url);
});
});

CSS File : My.css

.ui-bar-a, .ui-page-theme-a .ui-bar-inherit, html .ui-bar-a .ui-bar-inherit, html .ui-body-a .ui-bar-inherit, html body .ui-group-theme-a .ui-bar-inherit {
border: 1px solid #005994 !important;
background: #0093EA !important;
color: #fff !important;
font-weight: bold !important;
text-shadow: 0 0 #eee !important;
background-image: -webkit-gradient(linear, left top, left bottom, from( #0093EA), to( #007dcd ));
background-image: -webkit-linear-gradient( #0093EA , #007dcd );
background-image: -moz-linear-gradient( #0093EA, #007dcd );
background-image: -ms-linear-gradient( #0093EA , #007dcd );
background-image: -o-linear-gradient( #0093EA , #007dcd );
background-image: linear-gradient( #0093EA , #007dcd );
}
.ui-page-theme-a .ui-btn:hover, html .ui-bar-a .ui-btn:hover, html .ui-body-a .ui-btn:hover, html body .ui-group-theme-a .ui-btn:hover, html head + body .ui-btn.ui-btn-a:hover{
border: 1px solid #007dcd;
background: #333 ;
font-weight: bold;
text-shadow: 0 0 #eee !important;
color: #fff !important;
background-image: -webkit-gradient(linear, left top, left bottom, from( #0093EA ), to( #0093EA ));
background-image: -webkit-linear-gradient( #0093EA , #0093EA );
background-image: -moz-linear-gradient( #0093EA , #0093EA );
background-image: -ms-linear-gradient( #0093EA , #0093EA );
background-image: -o-linear-gradient( #0093EA , #0093EA );
background-image: linear-gradient( #0093EA , #0093EA );
}
.ui-page-theme-a .ui-btn.ui-btn-active, html .ui-bar-a .ui-btn.ui-btn-active, html .ui-body-a .ui-btn.ui-btn-active, html body .ui-group-theme-a .ui-btn.ui-btn-active, html head + body .ui-btn.ui-btn-a.ui-btn-active, .ui-page-theme-a .ui-checkbox-on:after, html .ui-bar-a .ui-checkbox-on:after, html .ui-body-a .ui-checkbox-on:after, html body .ui-group-theme-a .ui-checkbox-on:after, .ui-btn.ui-checkbox-on.ui-btn-a:after, .ui-page-theme-a .ui-flipswitch-active, html .ui-bar-a .ui-flipswitch-active, html .ui-body-a .ui-flipswitch-active, html body .ui-group-theme-a .ui-flipswitch-active, html body .ui-flipswitch.ui-bar-a.ui-flipswitch-active, .ui-page-theme-a .ui-slider-track .ui-btn-active, html .ui-bar-a .ui-slider-track .ui-btn-active, html .ui-body-a .ui-slider-track .ui-btn-active, html body .ui-group-theme-a .ui-slider-track .ui-btn-active, html body div.ui-slider-track.ui-body-a .ui-btn-active {
background-color: #0093EA !important ;
border-color:#0093EA !important;
color: #fff ;
text-shadow: 0 1px 0 #005599 ;
}
img{
padding: 25px;
}
#whatsearch{
padding-bottom: 25px;
}
button.ui-btn, .ui-controlgroup-controls button.ui-btn-icon-notext {
border-radius: 5px !important;
}
#searchbutton{
margin-bottom: 25px;
}
#main{
margin-top: 12% !important ;
}
.ui-collapsible-inset.ui-collapsible-themed-content .ui-collapsible-content
{
background-color: #ddd;
color: #111;
}
th {
border-bottom: 1px solid #d6d6d6 !important;
}
tr:nth-child(even) {
background: #e9e9e9 !important;
}
.ui-table {
margin-top: 5% !important;
border: 1px solid grey !important;
border-radius: 5px !important;
border-collapse: initial !important;
}
label{
font-weight: bold !important;
}
#label{
border: 1px solid #0093EA !important;
background: #fff !important;
color: #005994 !important;
font-weight: bold !important;
text-shadow: 0 0 #eee !important;
background-image: -webkit-gradient(linear, left top, left bottom, from( #0093EA), to( #007dcd ));
background-image: -webkit-linear-gradient( #0093EA , #007dcd );
background-image: -moz-linear-gradient( #0093EA, #007dcd );
background-image: -ms-linear-gradient( #0093EA , #007dcd );
background-image: -o-linear-gradient( #0093EA , #007dcd );
background-image: linear-gradient( #0093EA , #007dcd );
}
strong#cat{
background-color: #009688;
border-color: #1d1d1d;
color: #fff;
text-shadow: 0 1px 0 #111;
padding: 5px !important;
}
p#catp{
padding: 5px !important;
}
.ui-listview > li.ui-last-child > a.ui-btn {
border-bottom-width: 1px;
text-align: center !important;
background-color: #0093EA !important;
border-color: white !important;
}
.ui-body-b{
background-color: white !important;
}
#formget{
background-color: black !important;
}
#inkthemes{
background-color: #21313f !important;
}

Conclusion:

RSS Feed Reader in a mobile app is an addition of extra jam to the bread. It will let you reach to your users on mobiles, ipads and what not. I hope it will help you grow your blog subscribers with PhoneGap RSS Reader. Keep reading our blog posts.