Windows Azure stellt mobilen Anwendungen die über die Cloud vernetzt sind, leistungsfähige Dienste zur Ausführung von Programmlogik, Speicherung von Daten, Authentifizierung etc. zur Verfügung. Windows Azure Mobilie Services machen diese Dienste in wenigen Schritten zugänglich. Mobile Services können Event-gesteuert Push Notifications an die Clients senden.

Nachdem mit dem Update für Visual Studio und diverse Online-Dokumentation die Anleitungen zu Push Notifications mit Windows Azure Mobile Services etwas veraltet sind, habe ich beschlossen, zu eben diesem Thema eine neue Anleitung zu verfassen. Die Erstellung einer mobilen Windows 8 Anwendung, die über Mobile Services Benachrichtigungen erhält, erfolgt in drei Schritten.

  1. Anlegen eines Windows Azure Mobile Service
  2. Erstellung einer Windows 8 App zum Mobile Service
  3. Konfiguration der Push Notifications

Folgende Voraussetzungen mössen gegeben sein, wenn Sie die Anleitungen durchgehen wollen:

Schritt 1: Anlegen eines Windows Azure Mobile Service

  1. Öffnen Sie das Windows Azure Management Portal (http://manage.windowsazure.com/).
  2. Legen Sie einen neuen Windows Azure Mobile Service an. Wählen Sie hierzu im Menü links den Punkt Mobile Services. Klicken Sie im Menü unten auf den Punkt Neu und wählen Sie im erweiterten Menü den Punkt Server / Mobiler Dienst / Erstellen.

    image

    Geben Sie in der Eingabemaske die erforderlichen Daten (URL des mobilen Service, Datenbank, Azure Subscription, Rechenzentrum etc.) ein und bestätigen Sie Ihre Eingabe mit Fertigstellen.

    image image
     
  3. Erstellen Sie eine neue Tabelle zur Datenspeicherung. Klicken Sie hierzu – nachdem der mobile Service angelegt wurde – auf den Namen des Service. Unterhalb des Service-Namen sehen Sie nun Aktionsschaltflächen. Klicken Sie auf Daten und dann auf den Punkt Eine Tabelle hinzufügen. Wählen Sie einen Tabellennamen (z.B. Customer) und bestätigen Sie Ihre Eingabe mit Fertigstellen.
  4. Öffnen Sie die Quick Start Seite für die Code Snippets für die Windows 8 Anwendung. Klicken Sie hierzu auf das kleine Quick Start Icon (die kleine Wolke mit dem Blitz).

Das war’s schon. Der mobile Service ist nun angelegt und kann von einer Windows 8 App verwendet werden, um Kundendaten zu speichern.

Schritt 2: Erstellung einer Windows 8 App zum Mobile Service

Im Folgenden soll nun eine Windows 8 App angelegt werden, die eine Eingabemaske zur Aufnahme von Kundendaten enthält. Diese Daten sollen dann in der zuvor angelgten Tabelle des Mobile Service gespeichert werden.

  1. Öffnen Sie Visual Studio.
  2. Legen Sie eine neue Windows Store Anwendung an. Wählen Sie in Visual Studio den Menüpunkt File / New Project und wählen Sie als Projektvorlage Windows Store / Blank App (XAML) aus.

    image
     
  3. Fügen Sie dem Projekt eine Referenz zur Mobile Services DLL hinzu. Diese finden Sie – sofern Sie das Mobile Services SDK mit Standardeinstellungen installiert haben - unter folgendem Verzeichnis:
    C:\Program Files (x86)\Microsoft SDKs\Windows\v8.0\ExtensionSDKs\MobileServicesManagedClient\0.2.0.0\Redist\CommonConfiguration\neutral\MobileServicesManagedClient
  4. Konfigurieren Sie die Verbindung zum Mobile Service. Öffnen Sie die Datei App.xaml.cs. Fügen Sie folgendes using-Statement hinzu:
    using Microsoft.WindowsAzure.MobileServices;
           
    Wechseln Sie zum Windows Azure Management Portal. Auf der Quick Start Seite des mobilen Service finden Sie ein Code Snippet, welches Sie an den Beginn der Klasse einfügen.
    public static MobileServiceClient MobileService = new MobileServiceClient(
        "https://hsirtlmobile.azure-mobile.net/", 
        "droxIiEYbrJdZnMFYQfzEaoAbtkRpk25"
    );
          
  5. Erstellen Sie eine neue Startseite. Löschen SIe die Datei MainPage.xaml aus dem Projekt. Fügen Sie anschließend eine neue Klasse vom Typ Basic Page zum Projekt hinzu und benennen Sie sie MainPage.xaml.

    image
     
  6. Erstellen Sie eine Datenklasse zur Speicherung der Eingabewerte. Fügen Sie eine neue Klasse hinzu und definieren Sie dort entsprechende Datenwerte.    
    using Microsoft.WindowsAzure.MobileServices;
    using System.Runtime.Serialization;
     
    namespace Win8MobileSvcPushNotification
    {
        [DataTable(Name="Customers")]
        class Customer
        {
            public int Id { get; set; }
            [DataMember(Name = "name")]
            public string Name { get; set; }
            [DataMember(Name = "firstname")]
            public string Firstname { get; set; }
            [DataMember(Name = "address")]
            public string Address { get; set; }
            [DataMember(Name = "email")]
            public string Email { get; set; }
            [DataMember(Name = "channel")]
            public string Channel { get; set; }
        }
    }
           
  7. Implementieren Sie die Speicherung der Benutzereingaben im Mobile Service. Fügen Sie zunächst Eingabefelder in die Hauptseite ein. Fügen Sie hierzu folgenden Code vor das VisualStateManager.VisualStateGroups-Element    
    <StackPanel Margin="120,0,0,0" Grid.Row="1">
        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Name" VerticalAlignment="Top"/>
        <TextBox Name="txtName" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Width="320"/>
        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Vorname" VerticalAlignment="Top"/>
        <TextBox Name="txtFirstname" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Width="320"/>
        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Addresse" VerticalAlignment="Top"/>
        <TextBox Name="txtAddress" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Width="320"/>
        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="E-Mail" VerticalAlignment="Top"/>
        <TextBox Name="txtEmail" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Width="320"/>
        <Button Name="btnSubmit" Content="Speichern" Click="btnSubmit_Click"/>
    </StackPanel>
            
    Doppelklicken Sie nun auf den Button, um zur Ereignisbehandlung des Buttons zu gelangen. Implementieren Sie die Methode wie folgt:
    private async void btnSubmit_Click(object sender, RoutedEventArgs e)
    {
        Customer customer = new Customer
        {
            Name = txtName.Text,
            Firstname = txtFirstname.Text,
            Address = txtAddress.Text,
            Email = txtEmail.Text,
            Channel = ""
        };
     
        await App.MobileService.GetTable<Customer>().InsertAsync(customer);
    }
        
  8. Testen Sie die Anwendung. Führen Sie die Anwendung aus (F5), geben Sie in die EIngabemaske Werte für Name, Vorname, Adresse und E-Mail ein und bestätigen Sie Ihre Eingabe mit Speichern. Schließen Sie die Anwendung (Alt + F4) und wechseln Sie ins Windows Azure Management Portal. Dort sollten Sie (ggf. nach Anklicken der Aktualisieren-Schaltfläche) den/die eingetragenen Datensätze sehen.

    image
     

Sie haben sicher bemerkt, dass wir zwar eine Datenklasse angelegt haben, aber für die Tabelle im Mobile Service kein Schema definiert hatten. Dies ist auch nicht notwendig. Aufgrund der Dynamic-Schemal-Eigenschaft der Datenbank, wird automatisch beim ersten Schreibzugriff eines Datenobjekts, die Tabelle entsprechen konfiguriert, d.h. Spalten mit entsprechenden Typen angelegt.

Schritt 3: Konfiguration der Push Notifications

Jetzt soll dem Anwender noch die erfolgreiche Speicherung der Daten per Push Notification angezeigt werden.

  1. Registrieren Sie Ihre Anwendung im Windows Store. Wechseln Sie hierzu ins Windows Dev Center, melden Sie sich dort an und wählen Sie den Eintrag App Name.

    image
     
    Vergeben Sie für Ihre Anwendung einen Namen und bestätigen Sie Ihre Eingabe mit Reserve app name.

    image
     
  2. Verbinden Sie Ihre Anwendung mit dem Windows Store. Wechseln Sie in Visual Studio, klicken Sie im Solution Explorer mit der rechten Maustaste auf das Projekt und wählen Sie im Kontextmenü den Menüpunkt Store / Associate App with Store…

    image
     
    Melden Sie sich am Store an (klicken Sie in der Eingabemaske auf Sign in).

    image

    Nach Eingabe Ihrer Authentifizierungsdaten sollten sie in der Eingabemaske die oben registrierte App sehen:

    image

    Wählen Sie die App aus, klicken Sie auf Next und bestätigen Sie Ihre Eingabe mit Associate.
     
  3. Ermitteln Sie die Authentifizierungsdaten für den Push Notification Service. Wechseln Sie hierzu zurück ins Windows Dev Center, wählen Sie Ihre Anwendung aus und klicken Sie im Menü Links auf den Punkt Advanced Features.

    image

    Dort finden Sie den Link Push notifications and Live Connect Services Info. Klicken Sie auf diesen Link. Dies bringt Sie auf die Seite zur Konfiguration des Push Notification Service.

    image

    Klicken Sie dort auf den Link Authenticating your Service. Dies zeigt Ihnen die Authentifizierungsdaten, die der Mobile Service zur Anmeldung am Nortification Service benötigt.

    image

    Kopieren Sie sich die beiden Werte für SID und Client secret in die Zwischenablage.
     
  4. Konfigurieren Sie den Mobile Service mit den Authentifizierungsdaten. Wechseln Sie hierzu ins Windows Azure Management Portal und dort zu Ihrem Mobile Service. Klicken Sie auf den Menüpunkt Standard (hier hat es leider einen Übersetzungsfehler aus dem Englischen gegeben; eigentlich sollte da Push stehen).

    image
     
    Fügen Sie die Daten aus der Zwischenablage ein und bestätigen Sie Ihre Eingabe mit Speichern.
     
  5. Implementieren Sie die Logik zum Empfang von Push Notifications in Ihrer Anwendung. Öffnen Sie in Visual Studio die Datei App.xaml.cs und fürgen sie folgendes using-Statement ein:
    using Windows.Networking.PushNotifications;
    Fügen Sie folgenden Code am Beginn der Klasse App.xaml.cs ein:
    public static PushNotificationChannel CurrentChannel { get; private set; }
     
    private async void AcquirePushChannel()
    {
        CurrentChannel =
            await PushNotificationChannelManager.CreatePushNotificationChannelForApplicationAsync();
    }
    Fügen Sie zu Beginn der Methode OnLaunched() folgenden Code ein:
    AcquirePushChannel();
    Erweitern Sie nun die Methode btnSubmit_Click() in der Datei MainPage.xaml.cs wie folgt:
    private async void btnSubmit_Click(object sender, RoutedEventArgs e)
    {
        Customer customer = new Customer
        {
            Name = txtName.Text,
            Firstname = txtFirstname.Text,
            Address = txtAddress.Text,
            Email = txtEmail.Text,
            Channel = App.CurrentChannel.Uri
        };
     
        await App.MobileService.GetTable<Customer>().InsertAsync(customer);
    }
        
  6. Konfigurieren Sie Ihre Anwendung zum Empfang von Push Notifications. Öffnen Sie die Datei Package.appxmanifest. Wählen Sie im Editor unter Visual Assets den Punkt Badge Logo. Setzen Sie den Wert für Toast Capable auf den Wert Yes. Speichern Sie die Datei.
  7. Fügen Sie Logik zum Versenden von Push Notifications in den Mobile Service ein. Wechseln Sie nun wieder ins Windows Azure Management Portal und wechseln Sie bei Ihrem Mobile Service in den Bereich Daten. Wählen Sie die Kundentabelle. Diese wird mit ihren Inhalten angezeigt. Wählen Sie nun den Menüpunkt Skript. Wählen Sie in der Dropdown-Liste den Eintrag Einfügen und ersetzen Sie das JavaScript-Skript durch den folgenden Code:
    function insert(item, user, request) {
        request.execute({
            success: function() {
                request.respond();
                push.wns.sendToastText04(item.channel, {
                    text1: item.text
                }, {
                    success: function(pushResponse) {
                        console.log("Sent push:", pushResponse);
                    }
                });
            }
        });
    }
       
  8. Testen Sie die Anwendung. Rufen Sie sie auf, geben Sie die Daten eines Kunden ein und bestätigen Sie Ihre Eingabe mit Speichern. Nach einem kurzen Moment sollten Sie eine Toast-Benachrichtigung mit der Bestätigung, dass der Kunde erfolgreich hinzugefügt wurde, auf Ihrem Bildschirm sehen.

Das war’s. Wenn Sie das Ganze selbst ausprobieren möchten und noch keinen Windows Azure Account haben, registrieren Sie sich einfach noch heute für einen kostenlosen 90-Tage Windows Azure Testaccount.

Weitere Informationen