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:
- Part 1 - Create a Phonegap application which displays tweets
- Part 2 - Add the outline of our background service
- Part 3 - Get our background service to monitor twitter and raise notifications.
Before we start
It is likely to be worth reading my earlier blogs:
- Phonegap Android Background Service Plugin - Getting started
- Phonegap Android Background Service Plugin - Explained
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:
- Application Name: "TwitterExample"
- Package Name: "com.red_folder.sample"
- Activity: "TwitterExampleActivity"
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;
- The $(document).ready sets a handler to run getTweets once the page has loaded.
- The getTweets function first specifies the twitter URL - passing in the search term of "phonegap" and limits it to the latest 3 tweets.
- The jQuery getJSON function is then used to call the URL and map the data returned into the tweets variable
- Handlerbars is called to load and compile the template that we want to load the tweets into (see below for the template).
- The tweets are then run through the compiled template to get the resulting html.
- The html is then appended to an unordered list on the page (again, see below).
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.