Skip to end of metadata
Go to start of metadata

In this tutorial, you're going to learn how to create a simple to-do app which syncs data from one client to another with the help of SQLite and Crosslight synchronization framework. This way, you can create a simple to-do app that syncs between iOS and Android. This tutorial is a continuation of the the first tutorial: Walkthrough: Create a To-Do App with SQLite Storage. At the end of this tutorial, you should have the following result.

 

Samples:

CrosslightToDoSync.zip

Follow these steps:

Prerequisite

Before starting the walkthrough, it is recommended that you have followed these walkthroughs in order:

It is also recommended that you have read through these conceptual topics in order to get a better understanding:

To use this walkthrough, you will need to use at least Crosslight version 5.0.5000.626-experimental in order to achieve the desired result. You also need to have Mobile Studio for Windows installed. If you haven't done so, download here.

Let's get started. 

Preparing the Project

In this tutorial, we're going to continue from the previous tutorial, where you've learned how to perform various data operations to SQLite storage. Download the sample here (from the previous tutorial). After you've downloaded the sample, create a new Business project using Crosslight Project Wizard. Name it CrosslightToDo.

Click OK. In the next screen, with the Business template selected, deselect all projects. 

So you're going to be left with three projects upon creation: CrosslightToDo.Core, CrosslightToDo.DomainModels and CrosslightToDo.WebAPI. What we need is the last two projects.

Copy those two projects into the solution you've just downloaded. We'll begin from there.

Preparing the Tables and Shared Models

In your solution, you should now have 5 projects:

  • CrosslightToDo.Android
  • CrosslightToDo.Core
  • CrosslightToDo.DomainModels
  • CrosslightToDo.iOS
  • CrosslightToDo.WebAPI

Inside CrosslightToDo.WebAPI, you'll find a folder called App_Data. Right-click on the folder and choose Add, then New Item.

In the dialog that appears, choose Visual C#, Data, then SQL Server Database. Name it ToDo.mdf.

When you click OK, the Server Explorer pane will open. We're going to create a ToDo table that will be used for our target table.

Right-click on the Tables folder, then select Add New Table. Use the following details to create the ToDo table. Don't forge to change the Create Table statement to ToDo.

Your table is now ready. In the last tutorial, we've created a ToDo.cs inside the CrosslightToDo.Core/Models folder. Delete that file as we're going to create a new shared model between the server and the client. First, create a new folder inside CrosslightToDo.DomainModels folder called ToDo. In that folder, add a New Item. From the dialog that appears, choose Visual C# Items, Data, then ADO.NET Entity Data Model. Give it a name of ToDoModel. This is going to be our EDMX file. 

Hit Add afterwards.

Hit OK on the next confirmation dialog.

Hit Yes.

Click Next on the next dialog. 

When prompted to select table, select the ToDo table and hit Finish. You'll end up with the EDMX file. When this prompt appears, hit OK on the consecutive dialogs.

Since you have Mobile Studio installed properly, this will generate the necessary controllers, context and models to be used between the client and the server. This will also open up the EDMX window. 

Click outside of the table (the grey area) and hit F4 on your keyboard. This will open the EDMX properties window. Alternatively, you can right-click on the EDMX file and hit Properties.

First, set the value of IntersoftWebApi Enabled to true, as shown above. Then change, the Code Generation Strategy to V4.

Once that's done, click on the ToDo table and hit F4 to go to the table Properties window.

When the table Properties window opened, change the Repostiory Type to EditableLocalEntityRepository.

Next, set the Synchronization Date Property to ModifiedOn, which corresponds to the ModifiedOn column we've specified in the ToDo table.

Then, set the Logical Delete Property to IsDeleted.

Once you've done that, re-save the file. The code generator dialog might appear several times. Hit OK on all of the dialogs. You'll end up with several new items.

In the Core project, you'll also end up with two new files. If these files didn't appear, simply create a new folder inside CrosslightToDo.Core project and name it DomainModels.

Then add those two items from the DomainModels project by adding them as linked files.

If you get an error during rebuild, set the Build Action of ToDo.Controller.cs inside CrosslightToDo.DomainModels project to None.

Preparing the NuGet Packages

Next, install these NuGet packages onto the WebAPI project.

  • Intersoft.Crosslight
  • Intersoft.Crosslight.Data
  • Intersoft.Data.WebApi.v4
  • Microsoft.AspNet.Web.Optimization
  • Microsoft.AspNet.WebPages
  • System.Web.Providers

If you need help in installing the NuGet packages, consult this documentation.

Running the WebAPI Project

Next, we have to ensure that the WebAPI project can run properly. Set it as the startup project and hit Run

Once this screen pops up, stop running the WebAPI project and open the project folder in Windows Explorer. We need to expose the IIS Express server so that it will be accessible from other devices in the same network. If you're running VS 2015, you should find a hidden folder called .vs. Inside it, you'll find a config folder with applicationhost.config in it. Open the file in a text editor.

You should get the following screen. Scroll all the way down until you find the bindings for your website, which looks similar to the following.

What you need to do is add an additional binding other than :localhost below it. Add :* instead (look at the above shot). Save the file and re-run the WebAPI project. Now your WebAPI project should be accessible from all other devices in the same network. You might need to run ipconfig inside from the Command Prompt to get your current IP address. Once you've done that, test by hitting the following URL address from other devices.

You should a JSON response similar to the following.

If you get a result something similar to the above, that means your WebAPI is ready.

Preparing the Core Project

Now that you have the models ready, let's modify some files. Begin with SimpleViewModel.cs located inside CrosslightToDo.Core/ViewModels folder. Use the following code.

Let's take it from the top. Firstly, now the SimpleViewModel subclasses from DataListViewModelBase(TModel, TRepository) Class with ToDo and IToDoRepository as the generic parameters. In the ViewModel's constructor, we've initialized a QueryDefinition that will be used when the screen loads up. We've set the Title for this view, and enabled the pull-to-refresh feature. In the ExecuteAdd method, we simply call this.Repository.Insert to insert our new entity to SQLite. Then calling this.Repository.SaveChangesAsync(); followed by  this.SynchronizationService.SynchronizeDataAsync(SynchronizeAction.SyncData);. Since this call is quite redundant, these two calls are refactored inside SaveAndSynchronize(ToDo todo) method. Similarly, when deleting, we need to call this.Repository.Delete and call this.OnDataRemoved to notify the UI (especially in iOS). To update a property, simply set the properties that you want to change, then call SaveAndSynchronize method.

Let's move on by creating the ToDoQueryDefinition file. Inside CrosslightToDo.Core project, create a new folder called QueryDefinition, then create a new Crosslight Query Definition file called ToDoQueryDefinition. Use the following code.

Here, we simply defined the SortExpression to sort the ToDos based on the CreatedOn property, in descending order. Next, open up SimpleBindingProvider.cs inside CrosslightToDo.Core/BindingProviders and use the following code.

As you can see, nothing much has changed here except for the addition of this.AddBinding("TableView", BindableProperties.RefreshCommandProperty, "RefreshCommand"); This command is required in iOS to enable pull-to-refresh functionality. Next, open AppService.cs inside CrosslightToDo.Core/Infrastructure folder and modify the constructor to use the following code.

Change the WebServerUrl to the IP of your WebAPI project. The other services are required for the SQLite and sync services to work properly. Here, we've also registered the IToDoRepository so that it can be resolved later in the ViewModel.

Running the iOS Project

To run the iOS project, nothing needs to be changed. With the WebAPI project running, simply run the iOS project. You should get the following result.

Running the Android Project

Similarly, nothing needs to be changed from the Android side. With the WebAPI project still running, run the Android project.

Conclusion

Should you be able to run both of the simulators side by side, you can observe the following interaction.

In the next tutorial, we're going to further enhance this sample with push notification and OS background sync.

Sample

You can also find the resulting sample here: CrosslightToDoSync.zip. Simply open this sample and restore the NuGet packages with Xamarin Studio or Visual Studio and run the project. Consult this documentation should you need help on restoring the NuGet packages.