Hinzufügen von Azure Mobile-Diensten zu einer Windows Phone-App

Windows Phone-Apps, die Live-Kacheln verwenden, Benutzer mit Single-Sign-On authentifizieren und Daten für Geräte freigeben, und Benutzer verwenden normalerweise Cloud-Dienste. Die meisten Cloud-Plattformen bieten allgemeine Funktionen zum Speichern von Daten und zum Ausführen von Code. Sie müssen jedoch viel Infrastrukturcode hinzufügen, um diese Funktionen miteinander zu verbinden. Mit Azure Mobile Services können Sie Ihrer App in wenigen Minuten Cloud-Services hinzufügen.

Einführung

In diesem Lernprogramm erfahren Sie, wie Sie einer Windows Phone-App mithilfe von Azure Mobile Services einen Backend-Dienst hinzufügen. Sie erstellen einen neuen mobilen Dienst und eine einfache To-Do-App, in der die Daten mit dem neuen mobilen Dienst in der Cloud gespeichert werden. In diesem Tutorial lernen Sie, wie Sie:

• Erstellen Sie einen mobilen Dienst und fügen Sie Tabellen hinzu
• Aktualisieren Sie die App, um den mobilen Dienst zu verwenden
• Testen Sie den auf Azure Mobile Services gehosteten mobilen Dienst

Um mit mir zu folgen, benötigen Sie ein Windows Azure-Konto. Sie können sich für eine Windows Azure-Testversion anmelden, wenn Sie noch kein Konto haben. 

1. Erstellen Sie einen mobilen Dienst

Zuerst müssen Sie einen neuen mobilen Dienst einrichten, der von der Windows Phone-App verwendet werden kann. Bei dem mobilen Dienst, den Sie in diesem Lernprogramm erstellen, handelt es sich um einen mobilen Java-Backend-Dienst. Sie können JavaScript für serverseitige Geschäftslogik verwenden. Führen Sie die folgenden Schritte aus, um einen neuen mobilen Dienst mit dem Azure Management Portal zu erstellen.

Schritt 1: Fügen Sie einen mobilen Dienst hinzu

Melden Sie sich beim Azure Management Portal an und klicken Sie auf NEU Schaltfläche in der Navigationsleiste. Erweitern Berechnen Sie> Mobiler Service und klicken Sie auf Erstellen.

 Schritt 2: Wählen Sie Datenbanktyp, Bereich und Laufzeit aus

In dem Neuer mobiler Dienst Wählen Sie eine freie 20-MB-SQL-Datenbank aus oder verwenden Sie eine Ihrer vorhandenen Datenbanken. Wählen JavaScript von dem Backend Menü und geben Sie eine Subdomain für den neuen mobilen Dienst in ein URL Textfeld.

Beachten Sie, dass der Name des mobilen Dienstes eindeutig sein muss. Ein Fehler wird neben angezeigt URL wenn der eingegebene Name / die Subdomain nicht verfügbar ist.

Schritt 3: Datenbankeinstellungen angeben

Wenn Sie einen neuen mobilen Dienst erstellen, wird dieser automatisch einer SQL-Datenbank zugeordnet. Das Backend von Azure Mobile Services bietet dann integrierte Unterstützung, damit Remote-Apps Daten sicher speichern und abrufen können, ohne dass Sie benutzerdefinierten Servercode schreiben oder bereitstellen müssen.

Geben Sie zur Konfiguration der Datenbank den Namen der Datenbank in das Feld ein Name Feld. Als nächstes eingeben Server Login Name und Server Login Passwort um auf den SQL-Datenbankserver zuzugreifen.

Klicken Sie auf das Häkchen rechts unten, um den Vorgang abzuschließen. Sie haben jetzt einen neuen mobilen Dienst erstellt, der von Ihren mobilen Apps verwendet werden kann. Bevor Sie mit dem Speichern von Daten beginnen können, müssen Sie zuerst eine Tabelle erstellen, in der die Daten Ihrer Anwendung gespeichert werden können.

Beachten Sie, dass die Verwendung einer Datenbank in einer anderen Region aufgrund zusätzlicher Bandbreitenkosten und höherer Latenzzeiten nicht empfohlen wird.

2. Fügen Sie dem Mobile Service eine Tabelle hinzu

In diesem Schritt fügen wir eine Tabelle mit dem Namen hinzu ToDoItem an den mobilen Dienst, der von der Client-App zum Speichern der Aufgaben des Benutzers verwendet wird.

Schritt 1: Erstellen Sie eine neue Tabelle

Von dem Daten Tab in der Azure-Verwaltungsportal, klicken Erstellen um eine neue Tabelle zum mobilen Dienst hinzuzufügen. Benennen Sie die Tabelle ToDoItem und legen Sie für jede Operation eine Berechtigungsstufe fest. Für die ToDoItem Tabelle habe ich die Standardeinstellung für die Berechtigung verwendet.

Klicken Sie auf das Häkchen rechts unten, um den Einrichtungsvorgang für die Tabelle abzuschließen. In wenigen Sekunden haben Sie das hinzugefügt ToDoItem Tisch zum mobilen Dienst.

Schritt 2: Fügen Sie der Tabelle Spalten hinzu

Das ToDoItem Die Tabelle enthält bereits eine Reihe von Spalten zum Speichern von ID, Erstellungsdatum, gelöschtem Status, aktualisiertem Datum und Versionsinformationen. Um die Tabelle für unsere Anwendung nützlich zu machen, müssen wir zwei zusätzliche Spalten hinzufügen, eine zum Speichern des Textes des Aufgabenelements und eine zum Speichern des Status des Aufgabenelements.

Klicken Sie auf, um die zusätzlichen Spalten hinzuzufügen Spalte hinzufügen von dem Säulen Tab der ToDoItem Tabelle. Das Text Spalte ist vom Typ String und das abgeschlossen Spalte ist vom Typ Boolean.

Dies sind die Spalten der ToDoItem Tabelle.

Nachdem wir unseren mobilen Dienst eingerichtet und eine Tabelle hinzugefügt haben, haben Sie zwei Möglichkeiten: Erstellen Sie eine neue App oder verbinden Sie eine vorhandene App mit dem mobilen Dienst. In diesem Lernprogramm ändern wir eine vorhandene Windows Phone-App, um den mobilen Dienst zu verwenden.

3. Konfigurieren Sie die App für die Verwendung des mobilen Dienstes

Die App muss richtig konfiguriert sein, um den mobilen Dienst verwenden zu können. Sie müssen Code hinzufügen, um Ihre App mit Ihrem mobilen Dienst zu verbinden und Daten in der Cloud zu speichern.

Klicken Sie mit der rechten Maustaste auf den Projektnamen in der Lösungsforscher und wähle Hinzufügen > Angeschlossener Dienst aus dem menü. In dem Verbundenen Dienst hinzufügen Wählen Sie im angezeigten Dialogfenster Azure Mobile Services und klicken Sie auf Konfigurieren.

Wählen Sie anschließend den zuvor erstellten Mobilfunkdienst aus der Liste der in Ihrem Konto vorhandenen Dienste aus. Sie müssen Ihre Anmeldeinformationen angeben, um eine Verbindung herzustellen und die mobilen Dienste in Ihrem Windows Azure-Konto aufzulisten.

Wählen Sie den von uns erstellten Mobilfunkdienst aus und klicken Sie auf Hinzufügen um den Vorgang abzuschließen. Der Assistent fügt dann alle erforderlichen Referenzen zu Ihrem Projekt hinzu. Die Referenzen können auch manuell hinzugefügt werden, indem das erforderliche Paket mit installiert wird NuGet. Klicken Sie mit der rechten Maustaste auf Ihr Kundenprojekt, und wählen Sie aus NuGet-Pakete verwalten, suche nach dem WindowsAzure.MobileServices Paket und fügen Sie eine Referenz für das Paket hinzu.

Der Assistent installiert die erforderlichen NuGet Packages, fügt dem Projekt eine Referenz für die Client-Bibliothek des mobilen Diensts hinzu und aktualisiert den Quellcode des Projekts. Der Assistent fügt auch ein neues statisches Feld hinzu App Klasse, die so aussieht:

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

Dieser Code ermöglicht den Zugriff auf Ihren neuen mobilen Dienst in Ihrer App mithilfe einer Instanz von MobileServiceClient Klasse. Der Client wird erstellt, indem der URI und der Anwendungsschlüssel des neuen mobilen Dienstes angegeben werden. Dieses statische Feld steht allen Seiten Ihrer App zur Verfügung. Sie müssen diesen Code manuell hinzufügen App.xaml.cs wenn Sie den Assistenten nicht verwenden.

4. Aktualisieren Sie die App, um den mobilen Dienst zu verwenden

Sie müssen Ihre Windows Phone-App aktualisieren, um den mobilen Dienst als Backend-Dienst verwenden zu können. Sie müssen nur Änderungen an der vornehmen MainPage.cs Projektdatei.

Schritt 1: Fügen Sie die hinzu ToDoItem Klassendefinition

Fügen Sie eine neue Modellklasse hinzu, ToDoItem, zu deinem Projekt. Die Modellklasse enthält Eigenschaften, die den Spalten in entsprechen ToDoItem Tabelle, die wir zuvor erstellt haben.

öffentliche Klasse ToDoItem öffentliche Zeichenfolge-ID get; einstellen;  [Newtonsoft.Json.JsonProperty (PropertyName = "text")] öffentliche Zeichenfolge Text get; einstellen;  [Newtonsoft.Json.JsonProperty (PropertyName = "complete")] public bool Complete get; einstellen;  public ToDoItem ()  public ToDoItem (Zeichenfolgentext, bool status = false) Text = Text; Abgeschlossen = Status; 

Das JsonPropertyAttribute Diese Methode wird verwendet, um die Zuordnung zwischen Eigenschaftennamen in der Client-App und Spaltennamen in der entsprechenden Tabelle zu definieren. Ein Verweis auf Newtonsoft.Json Das Paket muss dem Projekt hinzugefügt werden, damit dies funktioniert.

Schritt 2: Fügen Sie Code zum Einfügen und Abrufen von Elementen hinzu

Fügen Sie folgendes hinzu mit Aussage an MainPage.xaml.cs:

using Microsoft.WindowsAzure.MobileServices;

Fügen Sie oben die folgenden Zeilen ein MainPage.xaml.cs So erstellen Sie eine Bindungssammlung und eine Proxy-Klasse für mobile Dienste für die Datenbanktabelle.

private MobileServiceCollection Artikel; private IMobileServiceTable todoTable = App.tutsplusdemoClient.GetTable();

Als nächstes erstellen Sie eine InsertToDoItem Methode, um ein neues Element in die Tabelle einzufügen. Ergänzen Sie die asynchron Modifikator für die Methode und fügen Sie den folgenden Code hinzu, um ein Element einzufügen.

public async Task InsertToDoItem (ToDoItem toDoItem) await todoTable.InsertAsync (toDoItem); items.Add (toDoItem); 

Dieser Code funktioniert, wenn für Ihre Tabelle Berechtigungen festgelegt sind Jeder mit einem Antragsschlüssel. Wenn Sie die Berechtigungen zum Sichern Ihres mobilen Dienstes ändern, müssen Sie die Unterstützung für die Benutzerauthentifizierung hinzufügen. Siehe Hinzufügen der Authentifizierung mithilfe von Azure Mobile Services. 

Ein ... kreieren RefreshTodoItems Methode, die die Bindung an die Auflistung der Elemente im festlegt ToDoItem Tabelle, die alle enthält ToDoItem vom mobilen Dienst zurückgegebene Objekte. Wir zeigen ein Meldungsfeld an, wenn bei der Ausführung der Abfrage ein Problem auftritt.

private async Aufgabe RefreshTodoItems () MobileServiceInvalidOperationException exception = null; try // Abfrage, die alle Elemente zurückgibt. items = warten auf todoTable.ToCollectionAsync ();  catch (MobileServiceInvalidOperationException e) exception = e;  if (exception! = null) erwartet einen neuen MessageDialog (exception.Message, "Fehler beim Laden von Elementen"). ShowAsync ();  else ListItems.ItemsSource = Elemente; this.ButtonSave.IsEnabled = true;  

Schritt 3: Fügen Sie der MainPage.xaml Steuerelemente hinzu

Wir müssen jetzt aktualisieren MainPage.xaml To-Do-Elemente anzeigen und die Möglichkeit hinzufügen, To-Do-Elemente hinzuzufügen. Nachfolgend sehen Sie, wie der XAML-Code für eine einfache Benutzeroberfläche aussehen kann, die eine enthält Textfeld Elemente einfügen und a Listenansicht um Aufgaben anzuzeigen.

           sparen Aktualisierung          

Das InsertToDoItem Methode wird aufgerufen, wenn die sparen Die Schaltfläche wird gedrückt, wodurch der To-Do-Eintrag in die Tabelle eingefügt wird.

private async void ButtonSave_Click (Objektsender, RoutedEventArgs e) var todoItem = new TodoItem Text = TextInput.Text; Erwarte InsertTodoItem (todoItem); 

Das RefreshToDoItems Methode wird aufgerufen, wenn die Aktualisierung Taste wird gedrückt. Bei dieser Methode rufen wir alle Elemente in der Tabelle ab.

private async void ButtonRefresh_Click (Objektsender, RoutedEventArgs e) ButtonRefresh.IsEnabled = false; // erwarte SyncAsync (); // Offline-Synchronisierung await RefreshTodoItems (); ButtonRefresh.IsEnabled = true; 

5. Testen Sie den mobilen Dienst

Der letzte Schritt dieses Lernprogramms besteht darin, die im Mobilfunkdienst gespeicherten Daten zu überprüfen. Klicken Sie im klassischen Windows Azure-Portal auf ToDoItem Tisch unter dem Daten Registerkarte Ihres mobilen Dienstes. Unter dem Durchsuche Auf der Registerkarte können Sie alle Elemente in der Tabelle anzeigen.

Fazit

In diesem Lernprogramm werden die Grundlagen der Verwendung von Azure Mobile Services als Backend für eine Windows Phone-App veranschaulicht. Das Erstellen eines mobilen Dienstes und dessen Verwendung in der App zum Speichern von Daten in der Cloud ist einfach zu implementieren.

Bei komplexeren Szenarien wird die Offline-Datensynchronisation unterstützt. Im Anschluss an dieses Lernprogramm können Sie der App auch Offline-Datensynchronisierungsunterstützung hinzufügen. Sie können die Tabellenberechtigungen einschränken, damit nur authentifizierte Benutzer die Tabelle nach diesem Envato Tuts + -Artikel aktualisieren können.

Fühlen Sie sich frei, die Quelldateien des Tutorials als Referenz herunterzuladen. Denken Sie daran, die App für die Verwendung von Azure Mobile Services zu konfigurieren, bevor Sie sie bereitstellen.