Začíname s Xamarinom, Azure Mobile backendom a mobilným SQLite pre off-line prácu a synchronizáciu.
V dnešnej online dobe je backend pre väčšinu mobilných aplikácií nevyhnutnosťou. Vytvoriť backend je častokrát časovo porovnateľne náročné, ako vytvorenie samotnej aplikácie. V tomto článku si ale ukážeme, ako je vďaka Azure Mobile appsa ichEasy Tables „neboli ľahkým tabuľkám“ možné tento čas minimalizovať, čo vám a vášmu tímu umožní venovať viac času zdokonaľovaniu samotnej mobilnej aplikácie. Základom Mobile Apps backendu je REST API, čo znamená, že na tento backend sa viete napojiť z akéhokoľvek zariadenia schopného http komunikácie. Pre popredné mobilné platformy a nástroje pre tvorbu cross platformových aplikácií je však vďaka dostupným SDK-ačkam prepojenie s backendom výrazne zjednodušené. Vytváranie http požiadaviek a json serializácia dát sú totižto enkapsulované v metódach dostupných v týchto SDKs.
V rámci tohto článku sa budeme venovať aj ďalšej technológií, ktorá nám dokáže uľahčiť život, a ktorá umožňuje tvorbu cross platformových natívnych mobilných aplikácií. Ako je uvedené v nadpise, jedná sa o technológiu Xamarin. Jednou z hlavných výhod Xamarinu je, že vám poskytuje prístup ku všetkým natívnym API pre iOS, Android a Windows s využitím C# a to všetko z vývojového prostredia Visual Studio.
Spojenie týchto technológií si prakticky ukážeme na jednoduchej aplikácii, ktorú som pomenoval Nápadovač, a ktorá umožňuje zapisovať akékoľvek skvelé nápady a ukladať ich s využitím Mobile Apps do backendovej databázy. Aplikácia umožní fungovať aj v offline móde s využitím SQLite , pričom zapísané nápady do aplikácie sa automaticky obojstranne zosynchronizujú s backendom po opätovnom pripojení.
Vytvorenie Azure Mobile App
Ako prvé nakonfigurujeme backend prostredníctvom Azure Portálu. Pre vytvorenie Azure Mobile App vyberte New -> Web + Mobile -> Mobile App.
Pri vytváraní Mobile App je potrebné zvoliť:
- Unikátny názov služby (URL, na ktorej bude váš backend dostupný)
- Azure subskripciu, v rámci ktorej službu vytvoríte
- Resource group (skupinu zdrojov), v našom prípade vytvoríme novú resource group s názvom „napadovac”
- Hostingový plán, ktorý určuje, v ktorom dátovom centre bude náš backend hostovaný a aké výpočtové prostriedky budú nášmu backendu pridelené. Pre náš backend sme zvolili dátové centrum v severnej Európe (North Europe), nakoľko toto dátové centrum je aktuálne najbližšie, čo znamená najrýchlejšiu odozvu. Cenovú hladinu a teda výpočtové zdroje sme zvolil Free, čo znamená, že náš backend bude hostovaný na zdieľanom servery, čo však pre naše potreby postačuje. Ak však budete plánovať vytvorenie a hostovanie produkčného backendu, určite sa odporúča použiť vyššie konfigurácie. Konfiguráciu je možné zmeniť aj po nasadení backendu.
Po stlačení tlačidla Create sa Mobile App začne nasadzovať. Po nasadení sa cez Azure portál navigujte na hlavnú stránku práve nasadenej mobilnej aplikácie. V menu, ktoré sa zobrazí môžete pristúpiť ku konfigurácií vášho backendu. Nás bude zaujímať sekcia Mobile a konkrétne záložka Easy Tables.
Konfigurácia Easy Tables
Po kliknutí na odkaz Easy Tables sa zobrazí hláška, oznamujúca potrebu konfigurácie Easy Tables.
Kliknutím na túto hlášku sa dostaneme na Easy Tables konfiguračnú stránku.
Konfigurácia pozostáva z dvoch krokov. V prvom kroku potrebujeme nakonfigurovať dátové pripojenie, resp. databázu pre náš backend. K tomuto nastaveniu sa dostaneme prostredníctvom kliknutia na hlášku vyznačenú červenou farbou.
Po kliknutí na hlášku sa nám zobrazí karta Data Connections, v ktorej klikneme na tlačidlo Add.
Na novo otvorenej karte máme možnosť vytvoriť databázu pre náš backend kliknutím na Create a new database. Pre novú databázu musíme zvoliť:
- Názov databázy
- Cenovú hladinu, ktorú opäť pre naše účely postačí nastaviť na free, avšak tak ako pre Mobile App, aj tu sa táto hladina neodporúča pre produkčné nasadenie. Produkčnému nasadeniu nevyhovuje ani dostupná veľkosť databázy, ktorá je pre free úroveň maximálne 32 MB.
- Databázový server, pričom môžeme vybrať existujúci alebo vytvoriť nový. Vhodné je vytvoriť alebo použiť server, ktorý sa nachádza v rovnakom dátovom centre, ako vytvorená Mobile App (v našom prípade North Europe). Pri vytváraní databázového servera si nezabudnite uložiť prihlasovacie údaje, nakoľko sa vám v budúcnosti môžu zísť. Taktiež nezabudnite zaškrtnúť check box vyznačený červenou farbou, čím umožníte pripojenie Azure služieb k vášmu databázovému serveru.
Po vytvorení databázy a databázového servera je nutné vytvoriť Connection string . Na karte Add data connection zvoľte voľbu Connection string. Zobrazí sa karta, na ktorej budú automaticky predvyplnené polia Name, User Name a Password (v prípade, že ste vytvorili novú databázu a databázový server. V prípade, že použijete už existujúci databázový server, je potrebné prihlasovacie údaje zadať). Kliknite na tlačidlo OK a následne na tlačidlo OK na karte Add data connection. Týmto inicializujete vytváranie dátového pripojenia, čo môže trvať niekoľko minút.
Stav vytvárania môžete vidieť v notifikačnej záložke:
Po úspešnom vytvorení dátového pripojenia sa toto pripojenie zobrazí na záložke Data Connections. Je čas dokonfigurovať Easy Tables. Vrátime sa preto na kartu Easy Tables, kde zaškrtneme check box a stlačíme tlačidlo Initialize App.
Upozornenie: Ak ste v rámci vašej Mobile App už mali vytvorený váš backend, bude tento backend vymazaný.
Inicializovanie Easy tables znamená, že na pozadí sa vytvorí Node.js backend, ktorý nám po pridaní nových tabuliek automaticky sprístupní OData REST CRUD API nad týmito tabuľkami. Tieto operácie vieme editovať, či už prostredníctvom nástroja Server Explorer v rámci Visual Studia (po pripojení k našej Azure subskripcii a navigovaní sa na Mobile App) alebo vďaka projektu Visual Studio Online Monaco, môžeme cez Azure portál pristúpiť k editácií skriptov priamo v prehliadači. Okrem CRUD operácií nad tabuľkami je samozrejme možné vytvoriť aj vlastné API, resp. služby, ktorých odpoveďou môžu byť dáta získané z viacerých tabuliek, alebo sa nemusia k databáze pripájať vôbec. Pre účely nášho riešenia však využijeme automatickú konfiguráciu, ktorá nám umožňuje využiť backend bez akýchkoľvek zásahov do kódu, ktorý bol na pozadí vygenerovaný.
Po zinicializovaní Easy Tables môžeme vykonať posledný potrebný krok a síce vytvoriť tabuľku. Na karte Easy Tables klikneme na tlačidlo Add a vytvoríme tabuľku s názvom Ideas. Povolenia prístupu k jednotlivým CRUD operáciám ponecháme na prednastavenej hodnote (Allow anonymous access). Toto nastavenie je možné pre produkčné nasadenie zmeniť na hodnotu Authenticated access only, kedy budú operácie prístupné iba v prípade, že sa aplikácia autorizuje prístupovým kľúčom. Vybrané operácie je tiež možné úplne zakázať voľbou disabled.
Týmto sme vytvorili prázdnu tabuľku bez stĺpcov (v skutočnosti nie úplne bez stĺpcov, pretože Azure automaticky vytvoril stĺpce, ktoré sú potrebné pre správne fungovanie vygenerovaného backendu a pre umožnenie správnej synchronizácie záznamov).
Easy tables podporujú tzv. dynamickú schému, kedy sa stĺpce automaticky vytvárajú na základe dát, ktoré sú z aplikácie do backendu posielané. Dynamickú schému je možné deaktivovať priamo v kóde aplikácie cez table.dynamicSchema = false; alebo globálne pre celú aplikáciu cez Azure portál nastavením App Setting MS_DynamicSchema na hodnotu false.
Naša Mobile App je v tejto chvíli nakonfigurovaná a v ďalšej časti článku sa pozrieme na to, ako tento backend konzumovať v Xamarin aplikácií spolu s offline synchronizáciou.
Vytvorenie Xamarin aplikácie a jej pripojenie na Azure Mobile App backend
Na začiatok trochu teórie pre tých z vás, ktorý ešte s Xamarinom nemajú predchádzajúcu skúsenosť. Ako už bolo uvedené Xamarin je nástroj, ktorý umožňuje vytvárať cross platformové mobilné aplikácie s využitím C# a vo Visual Studiu. Základným princípom pri tvorbe Xamarin aplikácií je vyčlenenie aplikačného kódu a aplikačnej logiky spoločnej pre všetky platformy do samostatného Portable Class Library alebo Zdieľaného (Shared) projektu, ktorý sa využíval aj pri tvorbe univerzálnych Windows/Windows Phone 8.1 aplikácií. Využitie Portable projektu sa odporúča v prípade, že predpokladáte znovu použitie funkcionality naprogramovanej v projekte aj v inej aplikácií. Detailne porovnanie výhod a nevýhod týchto prístupov môžete nájsť na tejto stránke: https://developer.xamarin.com/guides/cross-platform/application_fundamentals/building_cross_platform_applications/sharing_code_options/.
Čo sa týka tvorby používateľského rozhrania aplikácie, tá je umožnená dvoma spôsobmi a to natívne, kde pre každú platformu môžeme vytvoriť UI samostatne použitím natívneho prístupu alebo môžeme využiť tzv. Xamarin Forms, ktoré využijeme aj v našom projekte, a ktoré nám umožnia vytvoriť používateľské prostredie jednotne pre všetky platformy využitím XAML jazyku. Xamarin následne automaticky namapuje jednotlivé prvky rozhrania definované v našich XAML súboroch na prvky používateľského rozhrania dostupné na jednotlivých platformách.
Poznámka: Pre kompilovanie aplikácie a vytváranie aplikačných balíčkov pre iOS je potrebné pripojiť sa k Mac zariadeniu, nakoľko Apple neumožňuje kompiláciu mimo Mac zariadenia. Návod na pripojenie môžete nájsť na tejto stránke: https://developer.xamarin.com/guides/ios/getting_started/installation/windows/introduction_to_xamarin_ios_for_visual_studio/
Prerekvizitou pre ďalšiu časť článku sú nainštalované Xamarin nástroje pre Visual Studio. V prípade potreby návod na inštaláciu a konfiguráciu môžete nájsť na tejto stránke: https://msdn.microsoft.com/en-us/library/mt613162.aspx
Upozornenie: Po nainštalovaní nástrojov overte, či vám bolo nainštalované najnovšie Android SDK prostredníctvom Android SDK Managera.
Nápadovač
V prípade, že sa vám podarilo nainštalovať nástroje Xamarin pre Visual Studio, môžeme prejsť k vytváraniu Xamarin aplikácie. Vo Visual Studiu zvolíme File -> New -> Project. Medzi šablónami vyhľadáme Xamarin a zvolíme Blank App (Xamarin.Forms Portable). Projekt nazveme Napadovac.
Už v tejto chvíli máme vytvorenú spustiteľnú aplikáciu, ktorá však nezobrazí nič okrem čiernej obrazovky. Po vytvorení aplikácie, ako prvé, cez Nuget Package Manager nainštalujeme nasledujúce balíčky do projektov Napadovac, Napadovac.Droid, Napadovac.iOS a Napadovac.UWP (Windows 10):
- Microsoft.Azure.Mobile.Client.SQLiteStore – spolu s týmto balíčkom sa automaticky nainštaluje aj balíček Microsoft.Azure.Mobile.Client, pričom tieto dva balíčky nám umožnia napojiť sa jednoducho na Mobile App backend a tiež offline/online synchronizáciu. (Ak by sa pri inštalácií balíčku Microsoft.Azure.Mobile.Client.SQLiteStore do UWP projektu vyskytla chyba, overte, či je v rámci UWP projektu nainštalovaná najnovšia verzia Microsoft.NETCore.UniversalWindowPlatform balíčku, v čase písania tohto članku 5.2.2 ):
- Refractored.MvvmHelpers – tento balíček inštalujeme pre jednoduchšiu implementáciu MVVM architektúry v našej aplikácií
- Xam.Plugin.Connectivity – pre cross platformové získavanie informácií o stave dátového pripojenia
Ako ďalší krok potrebujeme inicializovať Azure Mobile Client SDK v platformových projektoch. Pre iOS je potrebné pridať nasledovný kód do FinishedLaunching metódy triedy AppDelegate
Microsoft.WindowsAzure.MobileServices.CurrentPlatform.Init();
SQLitePCL.CurrentPlatform.Init();
Pre Android pridajte nasledovný kód do OnCreate metódy triedy MainActivity:
Microsoft.WindowsAzure.MobileServices.CurrentPlatform.Init();
Následne v projekte Napadovac (Portable) vytvorte priečinkovú štruktúru v zmysle obrázku uvedeného nižšie.
Dátový model
Ďalším krokom je vytvorenie triedy Ideas v priečinku Model, ktorá bude reprezentovať našu tabuľku, resp. objekty v nej. Triedu pridáme kliknutím pravého tlačidla na priečinokzvolíme Add - > New Item a vyberieme C# triedu.
Kód triedy Ideas je nasledovný:
namespace Napadovac
{
public class Ideas
{
[Newtonsoft.Json.JsonProperty("Id")]
public string Id { get; set; }
[Microsoft.WindowsAzure.MobileServices.Version]
public string AzureVersion { get; set; }
public DateTime DateUtc { get; set; }
public string Title { get; set; }
public string Description { get; set; }
[Newtonsoft.Json.JsonIgnore]
public string TimeDisplay { get { return DateUtc.ToLocalTime().ToString("t"); } }
}
}
Pripojenie k Azure Mobile App
Ako ďalší krok v priečinku Services vytvoríme triedu, ktorá bude sprostredkovať komunikáciu s Mobile App backendom. Táto metóda bude obsahovať objekt typu MobileServiceClient, ktorý nám bude umožňovať vykonávať CRUD operácie. V rámci triedy implementujeme štyri metódy a síce metódu pre inicializáciu, pre získanie zoznamu zapísaných nápadov, pre zapísanie nápadu a metódu, ktorá bude synchronizovať dáta medzi aplikáciou a backendom. Triedu nazveme AzureDataService.cs
Ako prvé, do triedy pridáme tieto usings:
using Microsoft.WindowsAzure.MobileServices;
using Microsoft.WindowsAzure.MobileServices.Sync;
using System.Threading.Tasks;
using Microsoft.WindowsAzure.MobileServices.SQLiteStore;
using System.IO;
using System.Collections;
using Plugin.Connectivity;
Ďalej pridáme property a premennú:
public MobileServiceClient MobileService { get; set; }
IMobileServiceSyncTable ideaTable;
V ďalšom kroku vytvoríme metódu Initialize, ktorá bude slúžiť na inicializáciu objektu typu MobileServiceClient, prostredníctvom ktorého budeme pristupovať k Mobile App backendu. Zároveň inicialuzujeme lokálne SQLite úložisko, v rámci ktorého vytvoríme Ideas tabuľku a nastavíme synchronizačný context, resp. prepojenie medzi tabuľkou vytvorenou v backende a v aplikácií.
public async Task Initialize()
{
//If already initilized return
if(MobileService?.SyncContext?.IsInitialized ?? false
return;
//Create mobile service client
MobileService = new MobileServiceClient("https://.azurewebsites.net");
//setup local sqlite store and intialize Ideas table
string path = "ideassyncstore.db";
path = Path.Combine(MobileServiceClient.DefaultDatabasePath, path);
var store = new MobileServiceSQLiteStore(path);
store.DefineTable();
await MobileService.SyncContext.InitializeAsync(store);
//Get sync table that will call out to azure
ideaTable = MobileService.GetSyncTable();
}
Druhou metódou, ktorú pridáme je metóda SyncIdeas, ktorá nám umožní riadiť synchronizáciu dát medzi backendom a našou aplikáciou. V prvom kroku zistíme, či je k dispozícii dátové pripojenie. Ak áno, vykonáme inicializáciu (ak ešte nebola vykonaná), následne stiahneme záznamy z tabuľky z backendu a ako posledné zosynchronizujeme zmeny, ktoré boli vykonané v rámci aplikácie (nové, vymazané, zeditované nápady):
public async Task SyncIdeas()
{
//If no connection, no sync
if (!CrossConnectivity.Current.IsConnected)
return;
await Initialize();
//pull latest changes and then push new ideas to Azure
await ideaTable.PullAsync("Ideas",ideaTable.CreateQuery());
await MobileService.SyncContext.PushAsync();
}
Ďalšou metódou, ktorú pridáme do AzureDataService triedy, je metóda GetIdeas, ktorej návratovou hodnotou bude zoznam nápadov. IMobileServiceSyncTable nám ponúka asynchrónne API, v rámci ktorého je možné využiť aj Linq dotazy a získať tak zoznam nápadov (záznamov), ktoré používateľ vytvoril.
public async Task GetIdeas()
{
await Initialize();
await SyncIdeas();
//Fetching all ideas and ordering them by date they were created
return await ideaTable.OrderByDescending(i => i.DateUtc).ToEnumerableAsync();
}
Poslednou metódou, ktorú vložíme do triedy AzureDataService je metóda AddIdea, ktorá nám umožní vytvoriť objekt typu Ideas, teda náš nápad, pridať ho do SyncTable a zosynchronizovať dáta.
public async Task AddIdea(string title, string description)
{
await Initialize();
//insert idea
var idea = new Ideas
{
DateUtc = DateTime.UtcNow,
Title = title,
Description = description
};
await ideaTable.InsertAsync(idea);
//Synchronize ideas
await SyncIdeas();
return idea;
}
Používateľské rozhranie
V tejto chvíli máme vytvorený model reprezentujúci nápad a triedu, ktorá nám umožňuje komunikovať s Azure Mobile App. Potrebujeme však ešte vytvoriť používateľské rozhranie, ktoré nám bude túto funkcionalitu sprístupňovať. Pred vytvorením samotného rozhrania vytvoríme View Model triedu, ktorá bude dátovým kontextom pre používateľské rozhranie. Vo View Modely taktiež implementujeme príkazy, ktoré budú inicializované vstupmi z používateľského rozhrania, a ktoré budú volať metódy implementované v rámci AzureDataService triedy. Túto View Model triedu, ako už zrejme správne predpokladáte, vytvoríme v priečinku ViewModel a nazveme ju IdeaViewModel.cs. Implementácia tejto triedy je nasledovná:
using System;
using System.Threading.Tasks;
using Xamarin.Forms;
using Napadovac.Services;
using MvvmHelpers;
using System.Collections.ObjectModel;
using System.Windows.Input;
using System.Diagnostics;
namespace Napadovac.ViewModel
{
public class IdeaViewModel : BaseViewModel
{
AzureDataService azureService;
public IdeaViewModel()
{
azureService = new AzureDataService();
}
//Our local Ideas collection
public ObservableCollection Ideas { get; set; } = new ObservableCollection();
string ideaTitle;
public string IdeaTitle
{
get { return ideaTitle; }
set { SetProperty(ref ideaTitle, value); }
}
string description;
public string Description
{
get { return description; }
set { SetProperty(ref description, value); }
}
ICommand loadIdeasCommand;
public ICommand LoadIdeasCommand =>
loadIdeasCommand ?? (loadIdeasCommand = new Command(async () => await ExecuteLoadIdeasCommandAsync()));
async Task ExecuteLoadIdeasCommandAsync()
{
if (IsBusy)
return;
azureService = new AzureDataService();
try
{
IsBusy = true;
var ideas = await azureService.GetIdeas();
Ideas.Clear();
foreach (var i in ideas)
{
Ideas.Add(i as Ideas);
}
}
catch (Exception ex)
{
await Application.Current.MainPage.DisplayAlert("Synchronization error", "Unable to sync ideas, you may be offline" + ex.Message, "OK");
}
finally
{
IsBusy = false;
}
}
ICommand addIdeaCommand;
public ICommand AddIdeaCommand =>
addIdeaCommand ?? (addIdeaCommand = new Command(async () => await ExecuteAddIdeaCommandAsync()));
async Task ExecuteAddIdeaCommandAsync()
{
if (IsBusy)
return;
try
{
IsBusy = true;
var idea = await azureService.AddIdea(IdeaTitle,Description);
Ideas.Add(idea);
}
catch (Exception ex)
{
Debug.WriteLine(ex);
}
finally
{
IsBusy = false;
IdeaTitle = "";
Description = "";
}
}
}
}
Teraz môžeme pristúpiť k vytvoreniu grafického rozhrania. Pravým tlačidlom myši v Solution Exploreri klikneme na priečinok Views a opäť zvolíme Add -> New Item a vyberieme Forms ContentPage, ktorú nazveme IdeasPage a pridáme.
Týmto sme vytvorili stránku reprezentujúcu naše rozhranie. Táto stránka pozostáva z XAML súboru, ktorý definuje vzhľad používateľského rozhrania a triedu na pozadí, ktorá definuje správanie používateľského rozhrania.
Naše používateľské rozhranie bude pomerne jednoduché a bude obsahovať formulár pre pridanie nového nápadu a zoznam doposiaľ vytvorených nápadov. Do súboru IdeasPage.xaml pridajte tento XAML kód:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns=https://xamarin.com/schemas/2014/forms xmlns:x=https://schemas.microsoft.com/winfx/2009/xaml x:Class="Napadovac.Views.IdeasPage">
<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Grid AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackLayout Padding="12" Spacing="12" BackgroundColor="#028e2c" Grid.Row="0">
<Editor x:Name="Title" Text="{Binding IdeaTitle, Mode=TwoWay}"/>
<Editor x:Name="Description" HeightRequest="100" Text="{Binding Description, Mode=TwoWay}"/>
<Button Text="Add Idea" Command="{Binding AddIdeaCommand}" IsEnabled="{Binding IsNotBusy}" />
</StackLayout>
<ListView
Grid.Row="1"
IsGroupingEnabled="false"
HasUnevenRows ="true"
ItemsSource="{Binding Ideas}"
IsPullToRefreshEnabled="true"
IsRefreshing="{Binding IsBusy, Mode=OneWay}"
RefreshCommand="{Binding LoadIdeasCommand}"
x:Name="ListViewIdeas">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="8,8">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label Text="{Binding TimeDisplay}" HorizontalTextAlignment="End"/>
<Label Text="{Binding Title}" FontSize="16" HorizontalTextAlignment="Start"/>
<Label Grid.Row="1" LineBreakMode="WordWrap" FontSize="16" Text="{Binding Description}" TextColor="#979797" HorizontalTextAlignment="Start"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackLayout Grid.Row="2" x:Name="OfflineStack" Padding="8" IsVisible="false" BackgroundColor="#028e2c">
<Label TextColor="White" Text="No Connection - Offline Mode" HorizontalOptions="Center" VerticalOptions="Center"/>
</StackLayout>
</Grid>
</AbsoluteLayout>
Pre nastavenie kontextu grafického rozhranie na vytvorený ViewModel a odchytenie udalosti zmeny dátového pripojenia (odpojenie/pripojenie) pridáme do triedy na pozadí IdeasPage.xaml.cs nasledovný kód:
using Napadovac.ViewModel;
using Plugin.Connectivity;
using Xamarin.Forms;
namespace Napadovac.Views
{
public partial class IdeasPage : ContentPage
{
IdeaViewModel vm;
public IdeasPage()
{
InitializeComponent();
//Set the binding context to IdeaViewModel
BindingContext = vm = new IdeaViewModel();
//Pull down refresh does not work on Windows 10 ListView, so we need to add refresh command to toolbar
if (Device.OS != TargetPlatform.iOS && Device.OS != TargetPlatform.Android)
{
ToolbarItems.Add(new ToolbarItem
{
Text = "Refresh",
Command = vm.LoadIdeasCommand
});
}
}
protected override void OnAppearing()
{
base.OnAppearing();
CrossConnectivity.Current.ConnectivityChanged += ConnectivityChanged;
OfflineStack.IsVisible = !CrossConnectivity.Current.IsConnected;
if (vm.Ideas.Count == 0 )
vm.LoadIdeasCommand.Execute(null);
}
protected override void OnDisappearing()
{
base.OnDisappearing();
CrossConnectivity.Current.ConnectivityChanged -= ConnectivityChanged;
}
void ConnectivityChanged(object sender, Plugin.Connectivity.Abstractions.ConnectivityChangedEventArgs e)
{
Device.BeginInvokeOnMainThread(() =>
{
OfflineStack.IsVisible = !e.IsConnected;
});
}
}
}
Ako posledné, musíme zmeniť stránku, na ktorú sa bude aplikácia po otvorení navigovať na práve vytvorenú stránku. To spravíme v triede App.cs v projekte Napadovac (Portable) . Jej konštruktor zmeníme nasledovne:
public App()
{
// The root page of your application
MainPage = new IdeasPage();
}
Na začiatok kódu triedy App.cs je taktiež potrebné pridať nasledujúci using
using Napadovac.Views;
V tejto chvíli máme fungujúcu aplikáciu, ktorú môžeme nasadiť na Android, Windows 10, ale aj iOS zariadeniach, a ktorá nám umožňuje zapisovať si svoje nápady a synchronizovať ich s Azure Mobile App backendom. Ako sme už uviedli, pre kompiláciu aplikácie pre platformu iOS je potrebná MAC developerská stanica. Aplikáciu pre Android môžeme otestovať cez Android emulátor pre Visual Studio. Ak v zozname dostupných emulátorov chýba verzia Androidu alebo typ zariadenia, pre ktoré chcete aplikáciu testovať, môžete vytvoriť nový emulátor prostredníctvom nástroja Visual Studio Emulator for Android.
Naša aplikácia Nápadovač vyzerá na Android zariadení nasledovne:
Pre otestovanie aplikácie s využitím Windows 10 mobile emulátora potrebujeme aplikáciu najskôr manuálne nasadiť a až následne ju môžeme spustiť. V hornej lište vyberte Windows 10 emulátor, ktorý chcete použiť a spustite ho. Po spustení emulátora, ako ďalší krok, kliknite pravým tlačidlom na projekt Napadovac.UWP a zvoľte Deploy. Aplikácia sa nasadí a môžete ju spustiť z hlavného menu.
UWP aplikácia vyzerá pri spustení na Windows emulátore nasledovne:
Záver a ďalšie zdroje
V tomto článku sme si stručne predstavili službu Azure Mobile App a technológiu Xamarin. Samozrejme implementovaný scenár je pomerne jednoduchý a ako ďalšie rozšírenie môžete vyskúšať pridať možnosť editovania a vymazávania nápadov.
Čo sa týka Azure Mobile App backendu, ukázali sme si iba jednu z mnohých funkcionalít, ktoré Mobile Apps ponúkajú. Spomenúť môžeme napríklad ľahký spôsob prihlasovania používateľov s prepojením na existujúce účty v rámci iných webových služieb (napr. Microsoft účet, Google účet, Facebook účet atď.), pridanie push notifikácii, vytváranie vlastného API, škálovanie výpočtového výkonu na základe používateľského vyťaženia Mobile App atď. Viac informácií môžete nájsť v dokumentácií https://azure.microsoft.com/en-us/documentation/services/app-service/mobile/ .
Okrem ukážkovej aplikácie Nápadovač, ktorú sme vytvorili, a ktorú môžete nájsť aj na mojom GitHub-e, môžete otestovať Mobile Apps aj prostredníctvom predvytvorených ukážkových aplikácií na tejto stránke: https://tryappservice.azure.com/.