Offline Data Sync in Xamarin Forms by using Azure Mobile Service

Introduction

Offline Data Sync in Xamarin Cross platform mobile development by using Azure mobile services. To store data offline where there is no connectivity on mobile. This code will work on Andriod and IOS platform as this is a xamarin cross platform code.

Background

In day to day life, we don't have connectivity all the time, or we can say the connectivity breaks in the middle, so we need a app that can work in offline mode also. So you can take an example of whatsapp.

Using the code

Steps to Create Project in Azure Mobile App

1. Go to the link https://portal.azure.com/ and sign in with whatever account credentials you have.
2. Click on new -> web+mobile-> Mobile app -> give app name-> Select resource group(2 options will be there : 1.create new , 2. Use existing) select any of the option-> click on the check box of pin to dashboard(optional) -> click on create as shown in the following snapshot.
3. Then go to the main windows options and select ‘App Services’ ->select your application over there->in search box type ‘Quick start’ -> there will be options provided for the platforms for which we need to create project (Here I am selecting xamarin.forms option) as shown in snapshots given below:
4. Each platform will provide 3 options for you :
   • Create database.
     1. Now select 1st option ‘create database’ -> click on(+) to create new database.
     2. After clicking on add button you will get ‘Add Data Connection’ window -> in Type select: ‘SQL Database’ -> Then go to the ‘Configure require setting’ -> new window will open there -> select ‘Create New Database’ (or u can use if any existing will be there) -> ‘New Database’ window will be there as shown in the snapshot.
     3. Now give any name to your database -> there is Pricing tier option is present-> select free trial for POC(otherwise u can select other paid version options too). As shown in below fig.
     4. Now go to the next option server(Configure required setting)-> fill all server related details(****But must remember Server admin login and password..You will need it in next process***). And select location as per your requirement. (I have selected ‘Southest asia’..which is near to me..and it will take less time for the creation).

        Then click Ok and your Data connection start creation (It will take some time depending on your location selection or network). In this way you will complete 1st option ‘Create Database’. Now let’s move to the next step ‘Create a table API’.

   • Create a table API.

     Go to this option select ‘C#’ option -> click on the download button -> it will download ‘run time project ’ for you for API’s.

   • Create your client application.

     In this option click on download button , client side project will get download.

5. You will get two zip files given below in your download folder.

   Copy this files and paste it at whatever location you want and unzip both of them and run them independently.

6. Then go to the portal again -> SQL database->show database connection string-> select ADO.NET(SQL).
7. Copy that connection string on notepad and replace username and password by server admin login and password you have given in (a.4) step.
8. Now copy this changed string and paste it to the connection string present in the ‘web.config ’ file( in the solution of runtime project).
9. Now right click on the API runtime project solution -> select publish option.
10. one window will pop up. Go to the profile -> click on 1st option shown in snapshot . inside existing items you will get your created project -> select that project.

    Then connection window will open. Fill all the details,shown below:

    Then go to the setting.

    And finally click on publish.It will Publish your app and you will get path of your project as shown below

11. But in my case my project folder was not present below existing projects. So i did publish by another method.Let’s see it step by step:
    1. Go to the portal-> App services-> select your app-> click on get publish as shown below:
    2. Now you will get one document in your download folder as given below:
12. Go to the API project -> right click on project-> select publish-> select import option -> click on the browse option-> and select that downloaded file
    1. click ok->click on next -> it will go to the connection window
    2. click on validate connection It will switch to the setting page

       Select your database and click on next.

    3. It will go to the preview. Then click on publish. It will publish your app as given below:
13. To see database is created or not, Go to the google-> postman chrome(search)-> click on first link and login with your existing email id ,now you can use postman(By clicking on launch app) to see database related stuff as shown below:
    1. Then you will get below given window
    2. URL present on this window, is the URL we have copied (that we got after publishing the app) personally. Now go to the API (running project)-> controller class-> select any method from it after ‘Get’ copy it and paste it after above give URL and click on ‘Save’. It will generate following given code(2nd snapshot) ,i.e it will create 2 records that are by default present inside the code.(you can check it for each method from controller)
14. Sometimes on click of save button one error may occur, so copy ‘ZUMO-API-VERSION’ name and version ‘2.0.0’ and paste it to the headers present in postman as shown below:
15. Now go to the second project (xamarin form) that we have downloaded. Go to the ‘Constant.cs’ and copy the URL you got after publishing your ap as shown below:
16. Now set android as a start up project -> run it-> you will by default see two records over there.You can see this in database also and you can also add your own records to it too.
17. Now to see all the added records go to the SQL server one window will pop up. Now copy the server name, userId and password from your connection string present in API project’s web config file to this window as shown below. And click on connect.
18. But it will raise error pop up, to solve that go to the main portal page, go to the app services-> select your database-> select set server firewall(We use this to protect our project access to anybody)-> put IP address you got in error pop inside both ‘start IP’ and ‘End Ip’ .click on save and resume to your above given SQL server window and click on connect.
19. Now it will generate your database along with your table as shown below:

    Now select new query option and fire select query as :

    SELECT * FROM [dbo].[TodoItems]

    And you will get all the added records as shown in above snapshot.

20. To work offline you need to do more few tweaks in xamarin forms project. The steps are given below.

    #define OFFLINE_SYNC_ENABLED

    await RefreshItems(true, syncItems: true);

    1. In Visual Studio, right-click the solution > Manage NuGet Packages for Solution..., then search for and install the Microsoft.Azure.Mobile.Client.SQLiteStore NuGet package for all projects in the solution.
    2. In the Solution Explorer, open the TodoItemManager.cs file from the project with Portable in the name, which is Portable Class Library project, then uncomment the following preprocessor directive:
    3. In the Solution Explorer, open the TodoList.xaml.cs file from the Portable project, locate the OnAppearing method, and make sure that true is passed for syncItems when calling RefreshItems, as follows:
    4. (Optional) If you are supporting iOS devices, open the AppDelegate.cs file from the iOS project and uncomment the following line of code in the FinishedLaunching method:
    5. In the second point when you uncomment the preprocessor directive #define line. It uncomments all the code in preprocessor directive #define code.

    In that to work offline correctly you need to comment two line in TodoItemManager.cs in portable class library project.

In SyncAsync Task

//await error.CancelAndUpdateItemAsync(error.Result);

//await error.CancelAndDiscardItemAsync();

Your app is ready with offline sync.

Points of Interest

I found how xamarin cross platform works i.e. write once and run on andriod and ios platform.