PhoneGap – LAMP Web Development Blog

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

Set up a PhoneGap project, exactly as mentioned here http://phonegap.com/start#android.
Created two folders under /assets/www folder, css and js.
Moved phonegap.xx.js under js folder and also downloaded latest jQuery in this folder from here http://docs.jquery.com/Downloading_jQuery
Created a CSS file named under base.css under css folder.
Updated the reference to phonegap.xx.js and also linked jquery and css stylesheet in assets/www/index.html.

I had done a jQuery driven RSS reader (Code here) and used the code with some modifications, here is the code:

<!DOCTYPE HTML>
<html>
<head>
<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 = 'http://www.kumarchetan.com/blog/feed/';
    $.ajax({
        url: XMLURI,
        success: function(xml){
            setTimeout(
            function(){
                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(
	                function(){
	                    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>';
	            });
	            $('#blogheader').html(blogtitle);
	            $('#blogdescription').html(blogdescription);
	            $('#content').append(feedItem);
                
            }
            , 5000);
        },
        error: function(){
        	$('#blogheader').html('<a href="http://www.youtube.com/watch?v=WUUptX0i55g#t=22s" class="bloglink">PC LOAD LETTER</a>');
        },
        dataType: "xml"
    });
    document.addEventListener("deviceready", onDeviceReady, false);
});
</script>
</head>
<body>
	<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>
		<div data-role="content" id="content">
		</div>
	</div>
</body>
</html>

Modified /res/values/strings.xml
Replaced stock Android icons with my own icons. I had to create folder named drawable in /res folder and placed my own icon.
Then Run > Run As > Androidn Application.
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: https://github.com/kumarldh/My-Blog-Feed-Reader

Share LAMP development tips.