Phonegap Service Tutorial - Part 1

Summary

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:


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 search.twitter.com. 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:


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.

Spread the love

If you find the Background Service Plugin useful then spread the love.

All the work I do on the Plugin is done in my spare time - time I would otherwise be spending taking my wife out for a nice meal or helping my lad find vinyl records (he's currently very much into The Smiths, Fleetwood Mac and Kate Bush).

The Plugin is free and will always remain free. I will continue to develop, maintain and distribute the Plugin under the MIT License.

Labels: , , , ,