PhoneGap and Drupal 7 Data Synchronization for My Caribbean Offers App

In our last blog post we launched the My Caribbean Offers app for Android and Apple iOS.

The app displays offers for all types of tourist related businesses from across the Caribbean and is currently free to download!

We thought we'd share what went into building the app, the modules used and processes involved.

Client side requirements

Phonegap with local database (SQLite in our case), jQuery for ajax operations (http requests)

Module requirements

Views, Services, Custom module to save node deletions

Synchronization basics

The idea was to create a synchronization solution that syncs only the latest changes instead of deleting and downloading high amounts of data everytime.

For this we have to sync the latest content updates/inserts and deletions (the delete part needed the custom module, see later below).

Key element of synchronization is the last sync time that we pass to the server on each sync event. So when the application starts we always synchronize with the database and for the first time the app is opened we have no last sync time so we request all data without any parameters, then we’ll have a save sync time for the next event.

Custom module

We had to create a module to save deleted nodes into a custom table, we also made support for views. After a piece of content is deleted on the server/Drupal site we needed to store the node id and a time stamp when the event occurred, so when the client application requests changes the server can tell what content needs to be deleted in the application database.

Services

In the website we’ve created the appropriate views using the services display format for latest contents and added filters for post date and last change date and we made them to accept params. We did the same with deleted nodes. We made these filters not required because we need all data for the first time sync.

Now we can fetch all needed data based on (but not required) a last synchronization time.

Client side

Our script is doing the following steps:

1. It waits for device ready event (and jqm if you use jquery mobile)
2. Synchronization part
3. Data load and page initialization

Synchronization element

1. We need to request and process deleted content first. Make a request to the server, go through each record and delete it from the database (and downloaded files as well)
2. We make a request for new/changed records and save it into local database. (On updates in our case we didn’t use update queries we just drop the record and recreated it then)
3. If no errors occurred we store the current time stamp in local storage (so we can send it as a param in step 1 and 2 next time)

The client is very happy with the app and we've continued to develop it since launch with new offers being added all the time. He's in the Caribbean this week to promote the app to Caribbean businesses lucky thing!