Azure Mobile Services toevoegen aan een Windows Phone-app

Windows Phone-apps die live-tegels gebruiken, gebruikers verifiëren met eenmalige aanmelding en gegevens delen tussen apparaten en gebruikers maken doorgaans gebruik van cloudservices. De meeste cloudplatforms bieden algemene functies voor het opslaan van gegevens en het uitvoeren van code, maar u moet veel infrastructuurcode toevoegen om deze functies samen te lijmen. Met Azure Mobile Services kunt u in enkele minuten cloudservices aan uw app toevoegen.

Invoering

Deze zelfstudie laat zien hoe u een back-endservice aan een Windows Phone-app kunt toevoegen met behulp van Azure Mobile Services. U maakt een nieuwe mobiele service en een eenvoudige to-do-app die zijn gegevens opslaat in de cloud met behulp van de nieuwe mobiele service. In deze tutorial leert u hoe u:

een mobiele service maken en er tabellen aan toevoegen
werk de app bij om de mobiele service te gebruiken
test de mobiele service die wordt gehost op Azure Mobile Services

Om met mij mee te gaan, hebt u een Windows Azure-account nodig. U kunt zich aanmelden voor een Windows Azure-proefversie als u nog geen account hebt.

1. Maak een mobiele service

We moeten eerst een nieuwe mobiele service instellen die kan worden gebruikt door de Windows Phone-app. De mobiele service die u in deze zelfstudie maakt, is een JavaScript-backend-mobiele service. Hiermee kunt u JavaScript gebruiken voor bedrijfslogica op de server. Volg deze stappen om een nieuwe mobiele service te maken met behulp van de Azure Management Portal.

Stap 1: voeg een mobiele service toe

Meld u aan bij de Azure Management Portal en klik op de NIEUWE knop in de navigatiebalk. Uitbreiden Berekenen> Mobiele service en klik op creëren.

Stap 2: Selecteer Databasetype, Regio en Runtime

In de Nieuwe mobiele service wizard, selecteer een gratis 20 MB SQL-database of gebruik een van uw bestaande databases. kiezen JavaScript van de backend menu en voer een subdomein in voor de nieuwe mobiele service in de URL tekstvak.

Merk op dat de naam van de mobiele service uniek moet zijn. Er wordt een fout weergegeven naast URL wanneer de door u ingevoerde naam / subdomein niet beschikbaar is.

Stap 3: geef de database-instellingen op

Wanneer u een nieuwe mobiele service maakt, wordt deze automatisch gekoppeld aan een SQL-database. De back-end van Azure Mobile Services biedt vervolgens ingebouwde ondersteuning waarmee externe apps veilig gegevens kunnen opslaan en ophalen zonder dat u aangepaste servercode hoeft te schrijven of implementeren..

Om de database te configureren, voert u de naam van de database in de Naam veld. Voer vervolgens in Server login naam en Server login wachtwoord voor toegang tot de SQL-databaseserver.

Klik op het vinkje rechtsonder om het proces te voltooien. U hebt nu een nieuwe mobiele service gemaakt die kan worden gebruikt door uw mobiele apps. Voordat u gegevens kunt gaan opslaan, moet u eerst een tabel maken waarin de gegevens van uw toepassing kunnen worden opgeslagen.

Merk op dat het gebruik van een database in een andere regio niet wordt aanbevolen vanwege extra bandbreedtekosten en hogere latenties.

2. Voeg een tabel toe aan de mobiele service

In deze stap zullen we een tabel met de naam toevoegen ToDoItem naar de mobiele service, die door de client-app wordt gebruikt om de actie-items van de gebruiker op te slaan.

Stap 1: Maak een nieuwe tabel

Van de Gegevens tab in de Azure Management Portal, Klik creëren om een nieuwe tabel toe te voegen aan de mobiele service. Geef de tabel een naam ToDoItem en stel een machtigingsniveau in voor elke bewerking. Voor de ToDoItem tabel, ik heb de standaard toestemminginstellingen gebruikt.

Klik op het vinkje rechtsonder om het tabelinstellingsproces te voltooien. In slechts een paar seconden hebt u het ToDoItem tabel naar de mobiele service.

Stap 2: Kolommen aan de tabel toevoegen

De ToDoItem tabel bevat al een aantal kolommen voor het opslaan van id, aanmaakdatum, verwijderde status, bijgewerkte datum en versie-informatie. Om de tabel nuttig te maken voor onze applicatie, moeten we twee extra kolommen toevoegen, één voor het opslaan van de tekst van het taakitem en één voor het opslaan van de status van het actiepunt-item.

Klik op om de extra kolommen toe te voegen Kolom toevoegen van de columns tabblad van de ToDoItem tafel. De tekst kolom is van het type Draad en de voltooid kolom is van het type Boolean.

Dit zijn de kolommen van de ToDoItem tafel.

Nu we onze mobiele service hebben opgezet en een tabel hebben toegevoegd, hebt u twee opties: een nieuwe app maken of een bestaande app verbinden met de mobiele service. In deze zelfstudie zullen we een bestaande Windows Phone-app aanpassen om de mobiele service te gebruiken.

3. Configureer de app om de mobiele service te gebruiken

De app moet correct worden geconfigureerd om de mobiele service te gebruiken. U moet code toevoegen om uw app met uw mobiele service te verbinden en gegevens in de cloud op te slaan.

Klik met de rechtermuisknop op de projectnaam in de Solution Explorer en kies Toevoegen > Connected Service van het menu. In de Voeg Connected Service toe dialoogvenster dat verschijnt, kies Azure Mobile Services en klik configureren.

Kies vervolgens de mobiele service die u eerder hebt gemaakt in de lijst met bestaande services in uw account. U moet uw inloggegevens opgeven om verbinding te maken en de mobiele services in uw Windows Azure-account te vermelden.

Selecteer de mobiele service die we hebben gemaakt en klik op Toevoegen om het proces te voltooien. De wizard voegt vervolgens alle vereiste referenties toe aan uw project. De referenties kunnen ook handmatig worden toegevoegd door het vereiste pakket te installeren met behulp van Nuget. Klik met de rechtermuisknop op uw clientproject en selecteer Beheer NuGet-pakketten, zoek naar de WindowsAzure.MobileServices pakket en voeg een referentie voor het pakket toe.

De wizard installeert de vereiste Nuget pakketten, voegt een verwijzing voor de klantenbibliotheek van de mobiele service toe aan het project en werkt de broncode van het project bij. De wizard voegt ook een nieuw statisch veld toe aan de App klasse die er zo uitziet:

public static Microsoft.WindowsAzure.MobileServices.MobileServiceClient todolistClient = nieuwe Microsoft.WindowsAzure.MobileServices.MobileServiceClient ("https://todolist.azure-mobile.net/", "XXXXXXXXXXXXXXXXXXXXXXXXXXXXX");

Deze code biedt toegang tot uw nieuwe mobiele service in uw app met behulp van een instantie van de MobileServiceClient klasse. De client wordt gemaakt door de URI en de toepassingssleutel van de nieuwe mobiele service te leveren. Dit statische veld is beschikbaar voor alle pagina's in uw app. U moet deze code handmatig toevoegen aan App.xaml.cs als u de wizard niet gebruikt.

4. Werk de app bij om de mobiele service te gebruiken

U moet uw Windows Phone-app bijwerken om de mobiele service te gebruiken als backendservice. U hoeft alleen de wijzigingen aan te brengen MainPage.cs projectbestand.

Stap 1: voeg de `ToDoItem` Klasse definitie

Voeg een nieuwe modelklasse toe, ToDoItem, naar uw project. De modelklasse bevat eigenschappen die overeenkomen met de kolommen in de ToDoItem tabel die we eerder hebben gemaakt.

openbare klasse ToDoItem public string Id get; vast te stellen;  [Newtonsoft.Json.JsonProperty (PropertyName = "text")] public string Tekst get; vast te stellen;  [Newtonsoft.Json.JsonProperty (PropertyName = "complete")] public bool Voltooien get; vast te stellen;  public ToDoItem ()  public ToDoItem (string text, bool status = false) Text = text; Complete = status;

De JsonPropertyAttribute methode wordt gebruikt om de toewijzing tussen eigenschapnamen in de client-app en kolomnamen in de bijbehorende tabel te definiëren. Een verwijzing naar Newtonsoft.Json pakket moet aan het project worden toegevoegd om dit te laten werken.

Stap 2: voeg code toe om items in te voegen en op te halen

Voeg het volgende toe gebruik makend van verklaring voor MainPage.xaml.cs:

met behulp van Microsoft.WindowsAzure.MobileServices;

Voeg de volgende regels toe aan de bovenkant van MainPage.xaml.cs om een bindende verzameling en proxyklasse voor mobiele services voor de databasetabel te maken.

privé MobileServiceCollection items; private IMobileServiceTable todoTable = App.tutsplusdemoClient.GetTable();

Maak vervolgens een InsertToDoItem methode om een nieuw item in de tabel in te voegen. Voeg de toe async modifier voor de methode en voeg de volgende code toe om een item in te voegen.

public async Taak InsertToDoItem (ToDoItem toDoItem) wacht op todoTable.InsertAsync (toDoItem); Items.Add (toDoItem);

Deze code werkt als voor uw tabel machtigingen zijn ingesteld Iedereen met een applicatiesleutel. Als u de machtigingen voor het beveiligen van uw mobiele service wijzigt, moet u ondersteuning voor gebruikersverificatie toevoegen. Zie Verificatie toevoegen met Azure Mobile Services.

Maak een RefreshTodoItems methode die de binding aan de verzameling van items in de ToDoItem tabel, die alle bevat ToDoItem objecten geretourneerd door de mobiele service. We geven een bericht weer als er een probleem optreedt tijdens het uitvoeren van de query.

private async Task RefreshTodoItems () MobileServiceInvalidOperationException exception = null; probeer // Vraag die alle items retourneert. items = wachten op todoTable.ToCollectionAsync ();  catch (MobileServiceInvalidOperationException e) exception = e;  if (exception! = null) wacht op nieuwe MessageDialog (exception.Message, "Fout bij laden van items"). ShowAsync ();  else ListItems.ItemsSource = items; this.ButtonSave.IsEnabled = true;

Stap 3: Voeg besturingselementen toe aan MainPage.xaml

We moeten nu updaten MainPage.xaml om actiepunten weer te geven en de mogelijkheid toe te voegen om actiepunten toe te voegen. Hieronder ziet u hoe de XAML-code eruit zou kunnen zien voor een eenvoudige gebruikersinterface die een Tekstvak om items in te voegen en een Lijstweergave om actiepunten te bekijken.

De InsertToDoItem methode wordt aangeroepen wanneer de Opslaan knop wordt getikt, waarmee het taakitem in de tabel wordt ingevoegd.

private async void ButtonSave_Click (object afzender, RoutedEventArgs e) var todoItem = new TodoItem Text = TextInput.Text; wacht op InsertTodoItem (todoItem);

De RefreshToDoItems methode wordt aangeroepen wanneer de verversen knop is aangetikt. In deze methode halen we alle items in de tabel op.

private async void ButtonRefresh_Click (object afzender, RoutedEventArgs e) ButtonRefresh.IsEnabled = false; // wacht op SyncAsync (); // offline sync wacht op RefreshTodoItems (); ButtonRefresh.IsEnabled = true;

5. Test de mobiele service

De laatste stap van deze zelfstudie is om de gegevens te bekijken die zijn opgeslagen in de mobiele service. Klik in de klassieke Windows Azure-portal op ToDoItem tafel onder de Gegevens tab van uw mobiele dienst. Onder de Blader tab, kunt u alle items in de tabel bekijken.

Conclusie

Deze zelfstudie laat de basis zien van het gebruik van Azure Mobile Services als back-end voor een Windows Phone-app. Het creëren van een mobiele service en het gebruiken ervan in de app om gegevens in de cloud op te slaan, is eenvoudig te implementeren.

Complexere scenario's hebben betrekking op de ondersteuning van offline gegevenssynchronisatie. U kunt ook offline ondersteuning voor gegevenssynchronisatie toevoegen aan de app na deze zelfstudie. U kunt tabelmachtigingen beperken om alleen geverifieerde gebruikers toe te staan de tabel bij te werken die volgt op dit Envato Tuts + -artikel.

Download de bronbestanden van de zelfstudie als naslagwerk. Vergeet niet om de app te configureren om Azure Mobile Services te gebruiken voordat u deze implementeert.

Code