Getting Started With Xamarin And Azure - Offline Sync

Scope

The following article covers a presentation and demo given 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 a sample app discussed in part 2 and add the 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 need to be able to continue working and retrieving 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, codes of the client need to be modified. Follow the steps, given below, to proceed with the changes.

Install the 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

Use IMobileServiceSyncTable instead of IMobileServiceTable

This provides operations on local table. Therefore, all the operations will be done against the Sync table.
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.
1. var store = new MobileServiceSQLiteStore("localstore5.db");
2. store.DefineTable<Feedback>();
4. //Initializes the SyncContext using the default IMobileServiceSyncHandler.
5. this.client.SyncContext.InitializeAsync(store);
Add the function SyncAsync

This function will update the server with all the information in the client side and will also update the client if there are any changes.
1. public async Task SyncAsync()
2. {
3. try
4. {
5. await this.client.SyncContext.PushAsync();
7. await this.feedbackTable.PullAsync(
8. //The first parameter is a query name that is used internally by the client SDK to implement incremental sync.
9. //Use a different query name for each unique query in your program
10. "allFeedbacks",
11. this.feedbackTable.CreateQuery());
12. }
13. catch (MobileServicePushFailedException exc)
14. {
15. if (exc.PushResult != null)
16. {
18. }
19. }
20. }
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.
1. if (syncItems)
2. {
3. await this.SyncAsync();
4. }
Front-end Code change

On the front-end, we add a button to Sync the database.

<Button Text="Sync" MinimumHeightRequest="30" Clicked="OnSync" />

This will call the method OnSync with SyncItems = true which will, then, call the GetFeedbacksAsync that refreshes the local database before displaying the feedback.
1. public async void OnSync(object sender, EventArgs e)
2. {
3. await RefreshItems(true, true);
4. }

Demo

Initially, there are no records in the database.
Add some records in the application.
Select * in the database - there are still no records.
Click on the Sync button in the application.
Select * in the database.
Update the database.

update [dbo].[Feedbacks] set feedbacktext = 'xxxx' where id='bd6fbb62-db82-4bc9-9241-e92f9aba9b90'
Sync the application.

Conclusion

In this article, offline sync capability 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 smarter, by adding machine learning to analyze the user feedback and determine a sentiment score.