I spent the past few days building an Android app for Digital Inspiration and am happy to share that the first version of the app is now ready for use.
If you have an Android based phone, open this link (apk file) in your mobile browser and app should install itself. Since you are not using the Android Market here, make sure the option Untrusted Sources under Settings – > Applications is enabled to allow installation of non-Market apps.
Before I get into the details on how I created the app, let me share a few features of the app that you may find useful:
#1. The app doesn’t just show you the recent items from the blog’s RSS feed but lets you browse through the entire archives – much like a real website.
#2. There’s a “Reading List” feature integrated into the app that lets you save articles for offline reading. While you are on a story page, just hit the Save button to download that story to your mobile phone and read it even without an internet connection.
#3. Alternatively, you may download any of the stories in a reader-friendly PDF format. Just go to Share – > Save as PDF.
#4. The app is integrated with Google Custom Search allowing you to search the content of this blog, and few other sites, from the app itself.
This is just the first version of the app and, based on your feedback, I do plan to include additional features and iron out the bugs.
The big picture for this particular app is something like this.
You create a mobile-friendly page using standard HTML tags and fetch data into the page from WordPress with the help of RSS feeds. You then include the impressive jQuery Mobile library in the page to handle the styling (layout) and navigation across different mobile platforms. Next you convert this HTML page into a native Android App (apk) using Phonegap, another free and awesome tool.
If you would like to have a native Android App for your own blog, here are some of the technical details that you should know. I created an app for WordPress but the process is similar for other platforms as long as they offer content through RSS feeds.
The app is essentially an HTML document where each div section represents the various screen of the app. The page transitions, AJAX effects - notice that “page loading..” message when you move between pages - and even the screen layouts (or CSS styles) are handled automatically by the jQuery Mobile library.
The app fetches data (blog posts) from the WordPress blog using standard RSS feeds. These feed requests to WordPress are routed through Google Feeds API to bypass the security restrictions around cross-domain scripting. If you wish to display image thumbnails alongside the titles, make sure to add the Media RSS element in your WordPress feeds.
If you want your app to work in an offline environment, you can use localStorage (or HTML5 Storage) supported in all modern browsers. This is exactly what I use for the “Reading List” feature of the app – when you hit the Save button, the story gets saved using localStorage that is accessible even in offline environment.
The jQuery Mobile library adds the “slide” transition to pages but this introduces flicker and thus you may want to disable it. I also had problem displaying YouTube videos inside the mobile app that used standard
<embed src\*> tags but this got fixed once I rewrote the video embed code to HTML5 compatible IFRAME code.
Once your basic HTML page for the Android App is ready, you need to convert that page into a native app (or the .apk file). This is actually the easiest part.
A big advantage of using jQuery Mobile is that you write a single HTML document and it will be compatible will all major mobile platforms including Android, iPhone, BlackBerry, Symbian and more. I use can PhoneGap again to create a native iPhone or BlackBerry app using the same code base. That’s hopefully coming next!
- Learning jQuery [Jonathan Chaffer & Karl Swedberg, Packt]
- jQuery: Novice to Ninja [Earle Castledine & Craig Sharkie, O’Reilly]
- jQuery Mobile [Jon Reid, O’Reilly]
- Building Android Apps [Jonathan Stark, O’Reilly]
- Introducing HTML5 [Bruce Lawson & Remy Sharp, New Riders Press]
- HTML5: Up and Running [Mark Pilgrim, O’Reilly]