Руководство о том, как с помощью несложной конфигурации и нескольких строчек кода создать веб сервис с облачной базой данных и мобильное приложение с доступом к этим самым данным. Я опишу как создать приложение Windows 10, хотя сервис позволяет создавать приложения и под другие популярные платформы. Мануал будет особенно интересен студентам, так как с недавних пор обладатели студенческой подписки Microsoft Azure для DreamSpark могут воспользоваться сервисом Mobile Apps бесплатно.

Заходим на portal.azure.com
И создаем Mobile App (мобильное приложение)

Приложение разворачивается несколько минут

После окончания развертывания мы можем приступать к конфигурированию приложения

Как вы можете заметить, имеется возможность создавать приложения не только под различные платформы, но и на различных языках.

Так как у нас не создано подключение к базе данных, то нам нужно его создать

Создаем новую базу и новый сервер

После чего задаем название нашей строке подключения и имя пользователя, под которым будет совершен вход

Не забываем везде, где применили настройки, нажать «ОК».

Теперь мы можем создать бекенд сервис на основе NodeJS или на базе C# приложения. Если вы не хотите заморачиваться, то выбирайте NodeJS. В этом случае вам достаточно будет только нажать на кнопку, и сервис будет развернут. При этом будет создана таблица с демо данными. Альтернативно вы можете скачать веб приложение C#, сделать необходимые вам изменения, после чего опубликовать его. Как опубликовать серверный проект читайте здесь: Практическое руководство. Публикация серверного проекта

Вот так выглядит окошко в котором необходимо сделать выбор между NodeJS и C# в качестве бекенда

Если не хотите создавать демо таблицу, то активировать и автоматически создать веб сервис можно еще и в другом месте.
Я предпочту для примера использовать NodeJS, хотя для рабочего приложения, предпочел бы C#, так как это все-таки язык, на котором я пишу.

В том же окошке вы можете скачать пример клиентского приложения (на данный момент приложения Windows 8.1)

Следующим этапом работаем с таблицей данных. Заходим в параметры и далее в «Простые таблицы»

Если вы не создавали бекенд сервис, то вам будет предложено его инициализировать

Нужно поставить галочку, подтверждающую, что я в курсе, что содержимое моего сайта будет заменено созданным сервисом и нажать Initialize App.

Теперь в простых таблицах можно создать новую таблицу (я создал таблицу с названием mydemotable).

При создании таблицы некоторые поля создаются автоматически

Я добавлю к ним 2 поля: salary и surname, в которых буду как бы хранить информацию о зарплате и фамилиях своих воображаемых сотрудников

После этого этап настройки закончен (конечно, на реальном проекте можно и нужно будет настраивать еще права доступа и конфигурировать бекенд под свои нужды).

Теперь можно перейти к коду.
В Visual Studio создаем проект универсального приложения. В NuGet находим и устанавливаем пакет Microsoft.Azure.Mobile.Client.

В App.xaml.cs добавляем пространство имен:

using Microsoft.WindowsAzure.MobileServices;

и объявляем

 public static MobileServiceClient MobileService =
         new MobileServiceClient("https://mydemomobservice.azurewebsites.net");

Теперь нам нужно создать класс с аналогичной нашей облачной таблице структурой.

    public class mydemotable
    {
        public string Id { get; set; }
        [JsonProperty(PropertyName = "surname")]
        public string surname { get; set; }
        [JsonProperty(PropertyName = "salary")]
        public int salary { get; set; }
    }

Вы можете заметить, что здесь указано поле Id. Это поле обязательно, остальные системные поля таблицы можно не указывать. С помощью атрибута JsonProperty можно сопоставить название поля класса столбцу таблицы (полезно в случае, если они различаются).

В код MainPage.xaml.cs (или туда куда нам нужно) также добавляем пространство имен:

using Microsoft.WindowsAzure.MobileServices;

Объявляем коллекцию:

private MobileServiceCollection<mydemotable, mydemotable> items;

и можно использовать следующие сниппеты (а можно написать свои).

Для добавления элемента в таблицу:

            mydemotable item = new mydemotable
            {
                surname = "Skywalker",
                salary = 2244
            };
            await App.MobileService.GetTable<mydemotable>().InsertAsync(item);

Для редактирования:

      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<mydemotable>().UpdateAsync(editem);
            }

Можно добавить в XAML какой-нибудь элемент. Например, такой вот простой ListView с привязкой данных:

 <ListView x:Name="myListView" Width="400" Height="400"  Margin="20,20,0,0" ItemsSource="{Binding}">
     <ListView.ItemTemplate>
         <DataTemplate>
             <StackPanel>
                 <TextBlock Text="{Binding Path=surname}"></TextBlock>
                 <TextBlock TextWrapping="Wrap" Text="{Binding Path=salary}"></TextBlock>
             </StackPanel>
         </DataTemplate>
     </ListView.ItemTemplate
   </ListView>

И заполнить его:

            MobileServiceInvalidOperationException exception = null;
            try
            {
                items = await App.MobileService.GetTable<mydemotable>()
                    .Where(todoItem => todoItem.salary > 100)
                    .ToCollectionAsync();
            }
            catch (MobileServiceInvalidOperationException ex)
            {
                exception = ex;
            }

            if (exception == null) myListView.DataContext = items;

Синхронизация с локальной базой SQLite

Это все хорошо, но каждый раз тянуть данные из интернета не хочется. Обычно разработчики создают локальную базу и проводят синхронизацию. Этот способ довольно просто реализуется в Mobile Apps.

Необходимо в NuGet найти и дополнительно установить System.Data.SQLite и Microsoft.Azure.Mobile.Client.SQLiteStore
Кроме того установить SQLite SDK и добавить ссылку на SQLite для UWP

В файле App.xaml.cs никаких изменений производить не требуется.
В MainPage.xaml.cs добавляем два пространства имен:

using Microsoft.WindowsAzure.MobileServices.SQLiteStore;  
using Microsoft.WindowsAzure.MobileServices.Sync;

и одно объявление:

 private IMobileServiceSyncTable<mydemotable> demoTable = App.MobileService.GetSyncTable<mydemotable>();

Добавляем таск для инициализации локальной базы:

        private async Task InitLocalStoreAsync()
        {
            if (!App.MobileService.SyncContext.IsInitialized)
            {
                var store = new MobileServiceSQLiteStore("localstore.db");
                store.DefineTable<mydemotable>();
                await App.MobileService.SyncContext.InitializeAsync(store);
            }
        }

Его запускаем после запуска приложения.

Для отправки данных в базу Azure можем использовать:

await App.MobileService.SyncContext.PushAsync();

В облачную базу будут отправлены только измененные записи локальной базы

Для того чтобы обновить полностью локальную таблицу:

await demoTable.PullAsync(null, demoTable.CreateQuery());

Перед pull необходимо выполнять push, для того чтобы была уверенность в том что обе базы имеют одинаковые отношения.

Имеется возможность инкрементального обновления локальной таблицы, задав первым параметром id запроса, а вторым параметром сам запрос:

await demoTable.PullAsync("mydemotableSkywalker", demoTable.Where(u => u.surname=="Skywalker"));

id запроса должен быть уникальным для каждого запроса. Так как он является параметром, сохраняющим значение того когда было в последний раз выполнено именно это конкретное обновление.

Очистка локальной таблицы возможна с помощью:

await demoTable.PurgeAsync();

Очистку таблицы необходимо производить перед обновлением локальной базы, если были удалены какие-то строки в облачной базе и при этом вы не используете soft delete.

Пара полезных ссылок:
Offline Data Sync in Azure Mobile Apps

Using offline data sync in Mobile Services
В этой статье вы можете прочитать про синхронизацию оффлайн и онлайн баз в Azure Mobile Services. Этот сервис является предшественником Mobile Apps и можно найти много общего.

Редактирование данных в облачной базе

Если для просмотра данных в таблице можно воспользоваться простыми таблицами, то редактировать их можно с помощью Visual Studio. Для того чтобы открыть базу в ней можно зайти в базы данных SQL и выбрать в Tools «открыть в Visual Studio»

Для того чтобы открылось, необходимо нажать ссылку «настройка брандмауэра» и внести отображаемый IP адрес в правило (это то адрес, с которого вы сейчас подключены)

Приложение Windows 10 с данными в облаке с помощью Azure Mobile Apps