Додаток Windows 10 з даними в хмарі за допомогою Microsoft Mobile Apps


Керівництво про те, як за допомогою нескладної конфігурації і кількох рядків коду створити веб сервіс з хмарної базою даних і мобільний додаток з доступом до цим самим даними. Я опишу як створити додаток 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 Microsoft Mobile Apps

Using offline data sync in Mobile Services
У цій статті ви можете прочитати про синхронізацію оффлайн і онлайн баз в Microsoft Mobile Services. Цей сервіс є попередником Mobile Apps можна знайти багато спільного.

" Редагування даних в хмарі базі

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



Для того щоб відкрилося, необхідно натиснути посилання «налаштування брандмауера» і внести відображається IP адреса в правило (це адреса, з якого ви зараз підключені)



Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.