Getting started with Azure Cloud Synchronization
To use the Telerik Cloud Synchronization mechanism with Azure Mobile Services, you have two options:
- Create a new Windows Phone application by using the Azure Synchronization App for Windows Phone Visual Studio project template
- Manually integrate the mechanism into an existing Windows Phone application project
Note |
---|
The following paragraphs assume that you have Telerik UI for Windows Phone installed on your machine and a valid subscription for Azure Mobile Services.
|
Creating a new Azure Cloud Synchronization Windows Phone application
This topic will use the Telerik Azure Cloud Synchronization Windows Phone app Project
Wizard that comes with the Telerik UI for Windows Phone package. This wizard creates a
sample Windows Phone application that uses the Azure cloud to create, update and delete
Person objects. The app stores the Person items both locally and in the Azure cloud. In
addition it allows offline data access and uses the Telerik Cloud Synchronization Mechanism to synchronize these items among multiple devices.
To create a Telerik Cloud Synchronization enabled application choose the Telerik
Azure Cloud Synchronization Windows Phone App project template in the New Project dialog
of Visual Studio 2012:
The Telerik Azure Cloud Synchronization Windows Phone App template allows you to
create a Windows Phone app project which is configured to use the Azure Cloud Services.
After choosing this project template you will be presented with Wizard which will ask
you for your Azure’s Service Key and Service Uri:
You can obtain the service key and URI from the Azure Mobile Services portal where your Azure Mobile Service
is configured. To do so follow these instructions:
-
Go to https://manage.windowsazure.com/#Workspaces/All/dashboard and log into your Azure account.
-
Go to "Mobile Services"
-
Select the mobile service (this is the equivalent of an Everlive project) you want to connect to and open it:
-
Obtain the Service Uri and Service Key by selecting "Windows Phone 8" and then expanding "Connect to an existing Windows Phone 8 app"
-
Paste the Service Key and Service Uri in the respective fields and hit OK:
-
Once you’ve obtained your Azure service key and service uri, hit OK and Visual Studio will
take care of producing a ready to run application that has the following Azure initialization
in the App.xaml.cs file:
Now that the app has been set up correctly, it is time to feed it with some data. First, you’ll have to create your Azure content type and configure it appropriately. Please follow the instruction below.
-
Go to the Azure Mobile Services dev portal and open the Azure Mobile Service with which you have just associated
your Windows Phone application:
-
Select "Data"
-
Create a new table called Person
-
Select the Person table and explore it
Note |
---|
For the moment, don’t worry about the columns (properties) our Person
object will have. When dynamic schema is enabled on your Azure mobile
service, new columns are created automatically when JSON objects are sent
to the mobile service by an insert or update operation. This means that you
will be able to define your Person’s properties in the Windows Phone app and
Azure will make sure to create the appropriate columns.
|
- This is a very important step, so do not skip it.
To enable the Telerik Cloud Data Synchronization mechanism to work properly
with the Azure cloud, the server-side Insert and Update scripts need to be
configured. Go to the Script tab and examine the default Insert and Update scripts:
The changes that need to be made are as follows:
The Insert script becomes:
CopyJScript.NET
function insert(item, user, request) {
item.createdAt = item.modifiedAt = new Date();
request.execute();
}
The Update script becomes:
CopyJScript.NET
function update(item, user, request) {
item.modifiedAt = new Date();
request.execute();
}
Make sure you save the changes before proceeding further:
This is what you need to do on the Azure Mobile Services portal so that the Telerik Cloud Synchronization mechanism can work with the chosen mobile service.
Utilizing the Azure Cloud Synchronization app
The newly created Windows Phone application project implements a very simple scenario in which
Person instances are created and synchronized with the corresponding Azure Mobile Service.
For that purpose you will find a class called Person in the Models folder
within your project structure. Another MainViewModel class is also defined which exposes the SynchronizationContext instance
that synchronizes with Azure.
You will also notice that the Person class inherits from the AzureSynchronizableCloudItem class. This class provides the needed infrastructure
to synchronize objects with the corresponding Azure Mobile Service:
CopyC#
public class Person : AzureSynchronizableCloudItem
{
private int age;
private string name;
public int Age
{
get
{
return this.age;
}
set
{
if (this.age != value)
{
this.age = value;
this.OnPropertyChanged("Age");
}
}
}
public int Name
{
get
{
return this.name;
}
set
{
if (this.name != value)
{
this.name = value;
this.OnPropertyChanged("Name");
}
}
}
}
Let's run the application and create a new Person and synchronize it with our
Azure Mobile Service:
-
Run the application on the Windows Phone emulator or on a real device. Make sure you have
an Internet connection.
-
When the main page loads, a synchronization is performed as you can see in the MainPage.xaml.cs file:
CopyC#
private async void MainPage_Loaded(object sender, RoutedEventArgs e)
{
await MainViewModel.Instance.Context.SynchronizeAsync();
}
This call will perform a full sync for the Person type as described in this
section The Synchronization Context class.
-
Now let's tap on the Add button and navigate to the page where a new
person can be added:
Fill in the required information and click on the 'Add' button. This will execute the following code:
CopyC#
string name = this.nameBox.Text;
if (string.IsNullOrEmpty(name))
{
await RadMessageBox.ShowAsync("Invalid Name!");
return;
}
double result;
bool success = double.TryParse(this.ageBox.Text, out result);
int age;
if (success && (int)result > 0)
{
age = (int)result;
}
else
{
await RadMessageBox.ShowAsync("Invalid Age!");
return;
}
this.newPerson.Name = name;
this.newPerson.Age = age;
await this.newPerson.SynchronizeAsync();
NavigationService.GoBack();
As you can see, the new Person object is created, populated and a call of the
Person.SynchronizeAsync method is made.
Note |
---|
The SynchronizeAsync method is inherited from the AzureSynchronizableCloudItem class.
|
This call will add the new instance to the local storage of your phone and will upload it into the current Azure Mobile Service: