
Windows 10 data cloud app with Azure Mobile Apps
- Tutorial

A guide on how to create a web service with a cloud database and a mobile application with access to this very data using a simple configuration and a few lines of code. I will describe how to create a Windows 10 application, although the service allows you to create applications for other popular platforms. The manual will be especially interesting for students, as recently the owners of Microsoft Azure student subscription for DreamSpark can use the Mobile Apps service for free.
We go to portal.azure.com
and create a Mobile App (mobile application). The
application is deployed in a few minutes.
After the deployment is complete, we can proceed to configure the application.
As you can see, it is possible to create applications not only for various platforms, but also in different languages.
Since we have not created a connection to the database, we need to create it.
We create a new database and a new server.
Then we set the name of our connection string and the username under which we will be logged in.
Do not forget wherever the settings were applied, click “OK” .
Now we can create a backend service based on NodeJS or based on a C # application. If you do not want to bother, then choose NodeJS. In this case, you only need to click on the button, and the service will be deployed. This will create a table with demo data. Alternatively, you can download the C # web application, make the changes you need, and then publish it. How to publish a server project read here: A practical guide. Publishing a server project
This is the window where you need to make a choice between NodeJS and C # as a backend.
If you do not want to create a demo table, you can activate and automatically create a web service in another place.
I would prefer to use NodeJS as an example, although for a working application, I would prefer C #, since this is still the language in which I write.
In the same window, you can download an example client application (currently Windows 8.1 applications).
The next step is to work with the data table. We go to the parameters and further to “Simple Tables”.
If you did not create a backend service, you will be prompted to initialize it.
You need to put a checkmark confirming that I am aware that the contents of my site will be replaced by the created service and click Initialize App.
Now in simple tables you can create a new table (I created a table called mydemotable).
When creating a table, some fields are created automatically
I will add 2 fields to them: salary and surname, in which I will, as it were, store information about the salary and surnames of my imaginary employees.
After this, the setup phase is completed (of course, on a real project, you can and will need to configure more access rights and configure the backend to your needs) )
Now you can go to the code.
In Visual Studio, we create a universal application project. In NuGet, we find and install the Microsoft.Azure.Mobile.Client package .
In the App.xaml.cs we add the namespace:
using Microsoft.WindowsAzure.MobileServices;
and announce
public static MobileServiceClient MobileService =
new MobileServiceClient("https://mydemomobservice.azurewebsites.net");
Now we need to create a class with the same structure as our cloud table.
public class mydemotable
{
public string Id { get; set; }
[JsonProperty(PropertyName = "surname")]
public string surname { get; set; }
[JsonProperty(PropertyName = "salary")]
public int salary { get; set; }
}
You may notice that the Id field is indicated here. This field is required, other system fields of the table can be omitted. Using the JsonProperty attribute, you can map the name of a class field to a table column (useful if they differ).
In the MainPage.xaml.cs code (or wherever we need it) we also add a namespace:
using Microsoft.WindowsAzure.MobileServices;
We declare a collection:
private MobileServiceCollection items;
and you can use the following snippets (or you can write your own).
To add an item to the table:
mydemotable item = new mydemotable
{
surname = "Skywalker",
salary = 2244
};
await App.MobileService.GetTable().InsertAsync(item);
For editing:
items = await demoTable
.Where(y => y.salary > 100).ToCollectionAsync();
mydemotable editem;
editem = items.FirstOrDefault(x => x.surname == "Weider");
if (editem != null)
{
editem.surname = "Yoda";
editem.salary = 555;
await App.MobileService.GetTable().UpdateAsync(editem);
}
You can add an element to XAML. For example, such a simple ListView with data binding:
And fill it in:
MobileServiceInvalidOperationException exception = null;
try
{
items = await App.MobileService.GetTable()
.Where(todoItem => todoItem.salary > 100)
.ToCollectionAsync();
}
catch (MobileServiceInvalidOperationException ex)
{
exception = ex;
}
if (exception == null) myListView.DataContext = items;
Synchronization with a local SQLite database
This is all good, but every time I don’t want to pull data from the Internet. Typically, developers create a local database and synchronize. This method is pretty easy to implement in Mobile Apps.
You need to find and additionally install System.Data.SQLite and Microsoft.Azure.Mobile.Client.SQLiteStore in NuGet .
In addition, install the SQLite SDK and add a link to SQLite for UWP
. No changes are required in the App.xaml.cs file.
In MainPage.xaml.cs, add two namespaces:
using Microsoft.WindowsAzure.MobileServices.SQLiteStore;
using Microsoft.WindowsAzure.MobileServices.Sync;
and one ad:
private IMobileServiceSyncTable demoTable = App.MobileService.GetSyncTable();
Add a task to initialize the local database:
private async Task InitLocalStoreAsync()
{
if (!App.MobileService.SyncContext.IsInitialized)
{
var store = new MobileServiceSQLiteStore("localstore.db");
store.DefineTable();
await App.MobileService.SyncContext.InitializeAsync(store);
}
}
We start it after launching the application.
To send data to the Azure database, we can use:
await App.MobileService.SyncContext.PushAsync();
Only modified records of the local database will be sent to the cloud base
In order to update the fully local table:
await demoTable.PullAsync(null, demoTable.CreateQuery());
Before pull, you must push to ensure that both databases have the same relationship.
It is possible to incrementally update the local table by setting the query id as the first parameter, and the query itself as the second parameter:
await demoTable.PullAsync("mydemotableSkywalker", demoTable.Where(u => u.surname=="Skywalker"));
The request id must be unique for each request. Since it is a parameter that preserves the value of when it was this particular update that was last performed.
Cleaning up a local table is possible with:
await demoTable.PurgeAsync();
The table must be cleaned before updating the local database, if any rows in the cloud database were deleted and you do not use soft delete .
A couple of useful links:
Offline Data Sync in Azure Mobile Apps
Using offline data sync in Mobile Services
In this article you can read about synchronizing offline and online databases in Azure Mobile Services. This service is the forerunner of Mobile Apps and you can find a lot in common.
Editing data in the cloud base
If you can use simple tables to view data in a table, you can edit them using Visual Studio. In order to open the database in it, you can go into SQL databases and select “open in Visual Studio” in Tools.
In order to open, you need to click the “configure firewall” link and add the displayed IP address to the rule (this is the address from which you connected now)