My first Android App or how to develop an Android App using PhoneGap and jQuery?

A small guide to developing Android Apps using PhoneGap and jQuery

I always wanted to do mobile app. The problem is I don’t know Objective C or Java or C or C++ or have those ninja skills. But we live in 21st century. If I can write a script in Python or know jQuery I can write an Android App. My skills in JS are much better than in Python. So I decided to try PhoneGap. That doesn’t mean I will not be tinkering with Python. If you know how to instructions you can develop a small hello world app using PhoneGap and JavaScript in less than 15 minutes. I didn’t want to do a plain hello world app so I decided to take a step further. I decided to develop RSS reader for my blog. And I fired up eclipse. Here is what I did

  1. Set up a PhoneGap project, exactly as mentioned here
  2. Created two folders under /assets/www folder, css and js.
  3. Moved phonegap.xx.js under js folder and also downloaded latest jQuery in this folder from here
  4. Created a CSS file named under base.css under css folder.
  5. Updated the reference to phonegap.xx.js and also linked jquery and css stylesheet in assets/www/index.html.
  6. I had done a jQuery driven RSS reader (Code here) and used the code with some modifications, here is the code:
    <title>My Blog Feed Reader</title>
    <link rel="stylesheet" href="css/base.css" />
    <script type="text/javascript" charset="utf-8" src="js/phonegap-1.2.0.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/jquery-1.6.4.js"></script>
    <script type="text/javascript" charset="utf-8">
    $( function() {
        var XMLURI = '';
            url: XMLURI,
            success: function(xml){
                    var blogdescription = $(xml).find('channel description:first'),
    	                blogtitle = $(xml).find('channel title:first'),
    	                bloglink = $(xml).find('channel link:first'),
    	                blogdescription = blogdescription.text(),
    	                blogtitle = '<a href="' + bloglink.text() +'" class="bloglink">' + blogtitle.text() + '</a>',
    	                feedItem = '';
    	            $(xml).find( "item" ).each(
    	                    var item = $(this), 
    	                        title =  item.find('title').text(),
    	                        link =  item.find('link').text(),
    	                        description =  item.find('description').text(),
    	                        pubDate =  item.find('pubDate').text();
    	                    feedItem = feedItem + '<div class="feeditem">';
    	                    feedItem = feedItem + '<a href="' + link + '" class="feeditemlink">';
    	                    feedItem = feedItem + '<span class="feeditemtitle">' + title+ '</span>';
    	                    feedItem = feedItem + '</a>';
    	                    feedItem = feedItem + '<span class="feeditempubDate">' + pubDate + '</span>';
    	                    feedItem = feedItem + '<p class="feeditemdescription">' + description + '</p>';
    	                    feedItem = feedItem + '</div>';
                , 5000);
            error: function(){
            	$('#blogheader').html('<a href="" class="bloglink">PC LOAD LETTER</a>');
            dataType: "xml"
        document.addEventListener("deviceready", onDeviceReady, false);
    	<div data-role="page" id="home">
    		<div data-role="header">
    			<h1 id="blogheader">Loading...</h1>
                <p id="blogdescription">This application requires a working internet connection.</p>
    		<div data-role="content" id="content">
  7. Modified /res/values/strings.xml
  8. Replaced stock Android icons with my own icons. I had to create folder named drawable in /res folder and placed my own icon.
  9. Then Run > Run As > Androidn Application.
  10. Voila!!!

I had to add sleep or delay or timeout as their was a glitch and I am unable to recall the web page that suggested to do it. Here is the GIT URL for project: