It’s kindly obvious that if you are a web developer, it will be easier for you to entry into mobile development using web apps (html5 + JS) than native code.
I’m not writing this post to let you figure out all the capabilities and possibilities that web apps gives you instead of native apps, but for me there are. And basing my decision on this I would like to share my code of one of my first test projects/snippets using (in this case) Android, jQuerymobile and Apache Cordova / Phonegap (both names Cordova and Phonegap are used along the post to reference the same).

All the cited and detailed code below can be forked there:
https://github.com/llissssss/wp-feedreader-droidgap

and the working example to install to your phone here:
https://github.com/llissssss/wp-feedreader-droidgap/raw/master/bin/Albert%20Casadessus%20feed-reader.apk

The idea is to create a web app which requests all the posts of a wordpress site, and keep them in local storage, providing readability even when you are offline, and to sync with the site and get new posts when necessary.

What do I need to start?

Create project

Then create a project, with one empty activity. Then, edit your MainActivity.java to look like:

package com.albertcasadessus.albert.casadessus.feed_reader;

import android.os.Bundle;
import org.apache.cordova.DroidGap;
import android.app.Activity;
import android.view.Menu;

public class MainActivity extends DroidGap {

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}

In /assets/www/ you should create your index.html file.
At this point, you don’t need to code java or change android parameters anymore, well I’m mistaken, you need to modify your AndroidMAnifest.xml to add the permissions we’ll request to use on our app:

Not all of them are necessary. For this project we just need to check the internet connection, access to read and write local storage, and notifications.

The code.

All the needed code is linked git. As I said before, you can also fork the project on github.

The code (HTML)

The HTML has no secrets. In <head> I just referenced the necessary files. Body is created using jquerymobile because I didn’t want to spend time creating the visual interface for a test.

https://github.com/llissssss/wp-feedreader-droidgap/blob/master/assets/www/index.html

The code (JS)

First line is the one which fires the applications. When phonegap is ready to access phone utils, is launched.

document.addEventListener("deviceready", onDeviceReady, false);

On that function, I open the database to work with. And I load the data stored in local storage with getJsonDB(), and I try to get data from the wordpress site calling getJsonFromWeb(), using sqlite and key/value pairs.

getJsonDB() , creates the table if not exists (first launch) and tries to retrive the posts stored in local. Calling processJsonDB() checks if there’s local data, if not notificates the user using native phone notifications, but If there’s, generates the page content (see generatePageFromJson())

In parallel, via ajax, I request the posts from the wp site. If request fails and there’s no local data, I show a error, but if not, local posts are displayed.
If everything went okay, I update the local data via updateData() and the page, well the post lists is re-generated with new data calling the previous function generatePageFromJson()

Have a look at the code and everything is going to be clearer for you.

https://github.com/llissssss/wp-feedreader-droidgap/blob/master/assets/www/js/funcions.js

Easy isn’t it? I guess you may be thinking why I not compare the posts date in order to decide if there have been changed, but that’s not the aim of project, so please just note about the use of phone utilities such as notifications, checking internet connectivity, and local storage and how easy is to create just once the logic and the interface and being able to use it in all platforms.

 

To try this example, you can install the app on your phone:

https://github.com/llissssss/wp-feedreader-droidgap/raw/master/bin/Albert%20Casadessus%20feed-reader.apk