Phonegap Service Tutorial - Part 1


This is the first of 3 part blog which will use the Android Background Service Plugin to produce a bespoke service for Phonegap.

I shall take you through the steps to create a new Phonegap application which shall monitor Twitter for phonegap mentions, fire a notification and allow the user to select the notification to see the tweets.

The blogs shall cover the following:

Before we start

It is likely to be worth reading my earlier blogs:

It should also be noted that the blog is using Cordova 1.8.1. Where differences exist for 2.x.x, I have annotated notes as appropriate.

Creating the starting Phonegap Application

For this I am starting with a Application using Eclipse.

I've used the Phonegap Getting Started document here to get started with the following settings:

This should give an Application that displays a simple HTML "Hello World" page.

Displaying the Twitter feed

We will now change our index.html to read and display the last 3 tweets for Phonegap.

Lets start with a fairly empty HTML:

This just gives us some titles and pulls in the cordova-1.8.1.js file. For Cordova 2.x.x, replace with cordova-2.0.0.js)

Run this just to make sure you get what you'd expect: image

Now lets put some contents into it. For this I'm going to use jQuery and Handlebars, so first add the following below the cordova-x.x.x.js import:

You will need to download the latest version of the js files - these can be found with a quick google search.

Below these imports, add the following script block:

A quick summary of the above;

Now add the following to just below the <h1> header, this is our template for the tweet results:

We want the tweets to represented as a Unordered List which we will style.

The outer <ul> provides us the content point that we put the html generated by Handlebars.

The contents of the <script> block define the template. I wont go into the detail of the template other than than to say that Handlebars is taking each of our tweets and creating the content within the <li> block, making substitutions between the placeholder (for example {{url}}) and the contents of each tweet.

Once this done, save the html file.

We then need to make one change to the res\xml\cordova.xml file (for Cordova 2.x.x, this will need to be res\xml\config.xml). Add the following within the <cordova> block:

This is needed to instruct Cordova that the application is allowed to access Without this the getJSON query will just fail with no explanation.

Ok, time to run the Application again. This time you should get something similar to the below: image

Lets put a little styling into the app. Add the following within the <head> block:

This should give us a slightly better looking list:

Next steps ...

This completes Part 1. This gives us a basic Twitter app using Phonegap.

In Part 2 I shall add a mainly empty Background Service to the project. In Part 3 I shall complete the Background Service with a polling mechanism and notifications.

About the author:

Mark Taylor is an experience IT Consultant passionate about helping his clients get better ROI from their Software Development.

He has over 20 years Software Development experience - over 15 of those leading teams. He has experience in a wide variety of technologies and holds certification in Microsoft Development and Scrum.

He operates through Red Folder Consultancy Ltd.