If you would like to create a native Android App (apk) for your own
blog, here are all the things you should know to build the mobile app.
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.
Fortunately, the process for building Android apps wasn’t complicated and anyone with knowledge of HTML and JavaScript can create a native Android App with some effort.
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.
First you to get familiar with jQuery and jQuery Mobile. There are tons of online tutorials for beginners or get one of the excellent books to quickly get started.
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.
My working folder – that has the HTML code, image icons and the associated JavaScript files – is inside a local Dropbox folder and this comes really handy when testing across different screens. Dropbox provides me a public web link of the HTML file and I can use that to test the HTML document in any other desktop and mobile browser. If I change the local HTML file, Dropbox will sync the changes automatically.
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.
There’s a free tool called PhoneGap that takes your HTML, CSS and JavaScript code and packages them all into a native Android App in few easy steps. The Android developers site offers a collection of readymade icons (in Photoshop format) that you can modify and distribute the one you like with your own app.
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!
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.
How to Develop an Android App
I have worked on a couple of web apps before – like sleepingtime.org, ctrlq.org or the AdSense Sandbox – but developing mobile apps for the Android platform was a completely unchartered territory.Fortunately, the process for building Android apps wasn’t complicated and anyone with knowledge of HTML and JavaScript can create a native Android App with some effort.
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.
Android App for your WordPress Blog
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.First you to get familiar with jQuery and jQuery Mobile. There are tons of online tutorials for beginners or get one of the excellent books to quickly get started.
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.
My working folder – that has the HTML code, image icons and the associated JavaScript files – is inside a local Dropbox folder and this comes really handy when testing across different screens. Dropbox provides me a public web link of the HTML file and I can use that to test the HTML document in any other desktop and mobile browser. If I change the local HTML file, Dropbox will sync the changes automatically.
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.
There’s a free tool called PhoneGap that takes your HTML, CSS and JavaScript code and packages them all into a native Android App in few easy steps. The Android developers site offers a collection of readymade icons (in Photoshop format) that you can modify and distribute the one you like with your own app.
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!
Posts
0 comments:
Post a Comment