In this tutorial I will show you how to build a RSS Feed Reader app using Intel XDK. I will show you how to design a feed reader app using Intel’s APP Framework and then how to parse and display RSS.
Basic APP Template
Here is the basic app template. Its loading fastclick, Intel APIs, Cordova APIs and Intel App Framework.
<html>
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
@-ms-viewport { width: 100vw ; zoom: 100% ; }
@viewport { width: 100vw ; zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; }
@viewport { user-zoom: fixed ; }
</style>
<script src="https://cdn.rawgit.com/ftlabs/fastclick/master/lib/fastclick.js"></script>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="http://cdn.app-framework-software.intel.com/2.1/icons.css">
<link rel="stylesheet" href="http://cdn.app-framework-software.intel.com/2.1/af.ui.base.css">
<link rel="stylesheet" href="http://cdn.app-framework-software.intel.com/2.1/af.ui.css">
</head>
<body>
<script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="js/app.js"></script>
<script src="js/init-app.js"></script>
<script src="js/init-dev.js"></script>
<script src="http://cdn.app-framework-software.intel.com/2.1/af.ui.jquery.min.js"> </script>
<script src="http://cdn.app-framework-software.intel.com/2.1/appframework.min.js"></script>
<script src="http://cdn.app-framework-software.intel.com/2.1/appframework.ui.min.js"></script>
<script>
</script>
</body>
</html>
App Pages
Our app will have 4 screens: home screen, add feed, feeds list and feeds of a single website.
Here is the code to create these four pages. Put this code inside the body tag.
<div id="header">
</div>
<div id="content">
<div id="home" class="panel" data-title="Home" style="text-align: center;">
<a class="button" href="#new_feed">Add Feed</a>
<br>
<a class="button" href="#display_feed">Display Feeds</a>
</div>
<div class="panel" id="new_feed" data-title="Add Feed">
</div>
<div class="panel" id="display_feed" data-title="Display Feeds">
</div>
<div class="panel" id="single_feed" data-title="Feed">
</div>
</div>
<div id="navbar">
<a href="#" class="icon calendar">Calender</a>
<a href="#" class="icon user">Profile</a>
</div>
</div>
Add Feed Page
Here is the code to display form in the add feed page so that user can add a new rss feed url into the app.
Now when user fills the text field and clicks the add button we need to store the url for later use. Here is the code to store it
function add_url()
{
var url = document.getElementById("new_feed_url").value;
var re = /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/;
if (!re.test(url))
{
intel.xdk.notification.alert("Invalud URL");
return false;
}
if(urls.indexOf(url) == -1)
{
urls.push(url);
intel.xdk.notification.alert("URL Added", "Done", "Ok");
}
}
Here we are storing feed urls in a JavaScript variable. But while creating a real app make sure you store the urls in filesystem or local storage.
All Feeds List Page
Here is the code to display all the feeds in the feeds page.
var list = '<ul class="list">';
for(var count = 0; count < urls.length; count++)
{
list = list + '<li><a href="javascript:display_single_feed(\'' + urls[count] + '\')">';
list = list + urls[count];
list = list + '</a></li>';
}
list = list + '</ul>';
document.getElementById("display_feed").innerHTML = list;
});
Display Feed Content of Single Website
Here is the code to display feed content of single website when user clicks on a feed url on the above list. Here we are parsing the RSS file and displaying the list titles.
{
var list = '<ul class="list">';
$.ajax({
url : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
dataType : 'json',
success : function (data) {
if (data.responseData.feed && data.responseData.feed.entries) {
$.each(data.responseData.feed.entries, function (i, e) {
var title = e.title;
var link = e.link;
list = list + '<li><a href="javascript:display_post(\'' + link + '\')">';
list = list + title;
list = list + '</a></li>';
});
}
list = list + '</ul>';
document.getElementById("single_feed").innerHTML = list;
$.ui.loadContent("#single_feed");
}
});
}
Display Single Item
When user clicks on a title from the above list we need to display the url in an InAppBrowser window.
Here is the code to do that
{
intel.xdk.device.launchExternal(url);
}
Complete Source Code
Here is the complete source code of the app
<html>
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
@-ms-viewport { width: 100vw ; zoom: 100% ; }
@viewport { width: 100vw ; zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; }
@viewport { user-zoom: fixed ; }
</style>
<script src="https://cdn.rawgit.com/ftlabs/fastclick/master/lib/fastclick.js"></script>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="http://cdn.app-framework-software.intel.com/2.1/icons.css">
<link rel="stylesheet" href="http://cdn.app-framework-software.intel.com/2.1/af.ui.base.css">
<link rel="stylesheet" href="http://cdn.app-framework-software.intel.com/2.1/af.ui.css">
</head>
<body>
<div id="afui">
<div id="header">
</div>
<div id="content">
<div id="home" class="panel" data-title="Home" style="text-align: center;">
<a class="button" href="#new_feed">Add Feed</a>
<br>
<a class="button" href="#display_feed">Display Feeds</a>
</div>
<div class="panel" id="new_feed" data-title="Add Feed">
<div class="formGroupHead">Add a new feed URL</div>
<form>
<input id="new_feed_url" type="text" placeholder="http://domain.com/feed.xml">
<a class="button" href="javascript:add_url();">Add</a>
</form>
</div>
<div class="panel" id="display_feed" data-title="Display Feeds">
</div>
<div class="panel" id="single_feed" data-title="Feed">
</div>
</div>
<div id="navbar">
<a href="#" class="icon calendar">Calender</a>
<a href="#" class="icon user">Profile</a>
</div>
</div>
<script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="js/app.js"></script>
<script src="js/init-app.js"></script>
<script src="js/init-dev.js"></script>
<script src="http://cdn.app-framework-software.intel.com/2.1/af.ui.jquery.min.js"> </script>
<script src="http://cdn.app-framework-software.intel.com/2.1/appframework.min.js"></script>
<script src="http://cdn.app-framework-software.intel.com/2.1/appframework.ui.min.js"></script>
<script>
var urls = [];
function add_url()
{
var url = document.getElementById("new_feed_url").value;
var re = /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/;
if (!re.test(url))
{
intel.xdk.notification.alert("Invalud URL");
return false;
}
if(urls.indexOf(url) == -1)
{
urls.push(url);
intel.xdk.notification.alert("URL Added", "Done", "Ok");
}
}
$("#display_feed").bind("loadpanel",function(e){
var list = '<ul class="list">';
for(var count = 0; count < urls.length; count++)
{
list = list + '<li><a href="javascript:display_single_feed(\'' + urls[count] + '\')">';
list = list + urls[count];
list = list + '</a></li>';
}
list = list + '</ul>';
document.getElementById("display_feed").innerHTML = list;
});
function display_single_feed(url)
{
var list = '<ul class="list">';
$.ajax({
url : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
dataType : 'json',
success : function (data) {
if (data.responseData.feed && data.responseData.feed.entries) {
$.each(data.responseData.feed.entries, function (i, e) {
var title = e.title;
var link = e.link;
list = list + '<li><a href="javascript:display_post(\'' + link + '\')">';
list = list + title;
list = list + '</a></li>';
});
}
list = list + '</ul>';
document.getElementById("single_feed").innerHTML = list;
$.ui.loadContent("#single_feed");
}
});
}
function display_post(url)
{
intel.xdk.device.launchExternal(url);
}
</script>
</body>
</html>