Home Carbon Ads Create a Feed Reader App using Intel XDK

Create a Feed Reader App using Intel XDK

rss-intel-xdk

This post is a part 45 of Intel XDK Complete Tutorial post series.

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.

<!DOCTYPE html>
<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="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>  
           
            <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>

Screen Shot 2015-01-13 at 9.01.01 pm

Screen Shot 2015-01-13 at 9.01.11 pm

Screen Shot 2015-01-13 at 9.01.47 pm

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.

                <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>

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

        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");
            }
        }

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.

Screen Shot 2015-01-13 at 9.39.44 pm

All Feeds List Page

Here is the code to display all the feeds in the feeds page.

        $("#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;
        });

Screen Shot 2015-01-13 at 10.11.03 pm

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.

        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");
              }
            });
        }

Screen Shot 2015-01-13 at 10.51.40 pm

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

        function display_post(url)
        {
            intel.xdk.device.launchExternal(url);
        }

Screen Shot 2015-01-13 at 10.55.41 pm

Complete Source Code

Here is the complete source code of the app

<!DOCTYPE html>
<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>
Narayan Prusty
Intel XDK Programming Guide to Background ExecutionWordPress Filter Final HTML Output
Comments: 13
  1. Avneesh
    3 years ago

    What if I want to show feeds from a single site and not use it as a reader.

    ReplyCancel
  2. thodoris
    3 years ago

    is it possible to show news only from one page?

    ReplyCancel
  3. zayed
    4 years ago

    How to make app for predefine url for single page, there is no need to add url.only one predefine url .
    when be click to button show display content of url.

    ReplyCancel
  4. shereen
    4 years ago

    I tried this code it is very useful but it works only on emulator not real device
    can you help me please

    ReplyCancel
  5. 5 years ago

    Hi i see this error… when ii try to load feed.
    err::net ERR_FILE_NOT_FOUND but only on my Note3 into emulator all works fine….
    what i can control?

    Regards
    Gianpiero

    ReplyCancel
  6. 5 years ago

    Great tutorial, thanks for posting!

    ReplyCancel
  7. esprit
    5 years ago

    Hi,
    first of all, thank you for this great tutorial. Actually, when I tried to test it, I got a black page with only two links (calendar, profile).
    Here is my source code (it’s almost your same code):
    http://pastebin.com/YULdxKFS

    And here is a screen-shot of my app:
    http://img11.hostingpics.net/pics/836769intelpb.png

    I look at the debug console, I got this:

    Failed to load resource: the server responded with a status of 404
    (Not Found)
    http://127.0.0.1:58889/http-services/ui-builder/web/unit_tests/utils/test_styleparsing.css

    Did I miss something? thanks again

    ReplyCancel
  8. Jared
    5 years ago

    What if I want to show feeds from a single site?? I mean on the front page…and not use it as a reader

    ReplyCancel
  9. julio noguera
    5 years ago

    Thank you, now its works!, but I have a new issue, the app works fine in the emulator but when I run in my s3 mini and the galaxy tab 7, when I try to read the feed in the Display Feeds page don’t accept touch events don’t open the following page.

    ReplyCancel
  10. Jnoguera
    5 years ago

    Hi, when I click in the button Display Feeds dont show any feeds, and if I debug says Jquery is not defined, I am using the same code as you, can you help me?

    ReplyCancel
    • 5 years ago

      Add this

      ReplyCancel
      • asyraf
        5 years ago

        hi narayan. thanks a lot for your tutorial. just want to ask , i’m done add feed, then in display feed i click on feed, the feed dont show any further like your tutorial. can you help me?

        ReplyCancel
      • 4 years ago

        I would have loved to be there at the Okesebrftot. You are killing me with all these mouth watering recipes. I bet you have no trouble getting your family to the table for a meal.

        ReplyCancel

Leave a Reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

Image5 years ago 13 Comments Cordova
Share this
Related Articles