The following article covers a presentation and demo at Xamarin Dev Days in Mauritius. The article demonstrates how to get started with Azure Mobile Apps and benefit the powers of the cloud in terms of Scalability, Offline Sync and Data Analytics.

This is the third part of the series where offline sync capabilities shall be added to the application.


Introduction


The objective of this article is to build on the sample app discussed in part 2 and add offline sync capabilities to it.

 People using mobile apps are often on the move and are not always connected. Despite not having connectivity, the application users’ needs to be able to continue working and retrieve their data in offline mode.
To achieve this, the Azure Mobile Service SDK provides offline sync capabilities using SQL Lite as local storage.


Implementation


To add offline sync, both the front end and the back end code of the client needs to be modified. Follow the steps below to proceed with the change.

Install SQL Lite

Install the NuGet package Microsoft.Azure.Mobile.Client.SQLiteStore in both the portable class and all the clients that will consume the service.

Modify the Feedback Manager class


i. Use IMobileServiceSyncTable instead of IMobileServiceTable
This allows the applications to do operations on the local table. Therefore, all the operations will be done against the Sync table.
The objective is to make the application interact primarily with the Sync table and the refresh the Sync table against the cloud database.


ii. Define a MobileServicesSQLLiteStore in the constructor

Add the following code to the constructor. This will create a new local store and define a table to use this store.
var store = new MobileServiceSQLiteStore(“localstore5.db”);store.DefineTable<Feedback>();
//Initializes the SyncContext using the default IMobileServiceSyncHandler.
this.client.SyncContext.InitializeAsync(store);

iii. Add the function SyncAsync
The function SyncAsync will update the server with all the information in the client side and will also update the client if there are any changes.
public async Task SyncAsync()
{
    try
    {
        await this.client.SyncContext.PushAsync();
        await this.feedbackTable.PullAsync(
            //The first parameter is a query name that is used internally by the client SDK to implement incremental sync.
            //Use a different query name for each unique query in your program
            “allFeedbacks”,
            this.feedbackTable.CreateQuery());
    }
    catch (MobileServicePushFailedException exc)
    {
        if (exc.PushResult != null)
        {
             
        }
    }
}
iv. Modify the function GetFeedbacksAsync
Add the following code to the function GetFeedbacksAsync so that the local database is refreshed before sending the list of feedback to the client.
if  (syncItems){
   await this.SyncAsync();
       }

Front End Code changes

On the front end, we add a button to Sync the database.
<Button Text=”Sync” MinimumHeightRequest=”30″ Clicked=”OnSync” />
The sync button will call the method OnSync with parameter SyncItems = true which will then call the method GetFeedbacksAsync which will refresh the local database before displaying the feedbacks.
public async void OnSync(object sender, EventArgs e)
{
    await RefreshItems(true, true);
}

Demo

1. Initially there are no records in the database

       2. Add some records in the application
       3. Run a select statement in the database. There are still no records created. This is because all operations is done in the sync table.

         4. Click on the Sync button in the applicationNow, when the database is queried, the records will appear.
This is because the could database has been updated with the contents of the Sync table.

       5. Update the database
Run the following statement to perform an update in the cloud database.
update [dbo].[Feedbacks] set feedbacktext = ‘xxxx’ where id=’bd6fbb62-db82-4bc9-9241-e92f9aba9b90

6. Sync the application
Now,when the application is synced, the contents of the cloud database will be reflected on the client application.


Conclusion


In this article, offline sync capabilities was added to the sample app. Just like the Facebook and Twitter app, your app will always have data and work offline and will only update as and when you are connected.
What actually happened is that all the read/write is done against the local table and only when there is internet, the offline table is synced to the Server.
In the next article, we’ll see how to make the app smarted by adding machine learning to analyze the user feedback to determine a sentiment score.