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. We 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.
0 comments:
Post a Comment