Zelfstudie: Gelokaliseerde pushmeldingen verzenden naar Windows-apps met Azure Notification HubsTutorial: Push localized notifications to Windows apps by using Azure Notification Hubs

OverzichtOverview

Deze zelfstudie laat zien hoe u gelokaliseerde pushmeldingen naar mobiele apparaten kunt versturen die zijn geregistreerd bij de Notification Hubs-service.This tutorial shows you how to push localized notifications to mobile devices registered with the Notification Hubs service. U kunt in de zelfstudie toepassingen bijwerken die zijn gemaakt de Zelfstudie: Meldingen verzenden naar specifieke apparaten (Universeel Windows-platform) ter ondersteuning van de volgende scenario's:In the tutorial, you update applications created in the Tutorial: Send notifications to specific devices (Universal Windows Platform) to support the following scenarios:

  • In de Windows Store-app kunnen clientapparaten een taal opgeven en zich abonneren op verschillende nieuwscategorieën.The Windows Store app allows client devices to specify a language, and to subscribe to different breaking news categories.
  • De back-endapp verstuurt meldingen met behulp van de tag- en sjabloon-functies van Azure Notification Hubs.The back-end app broadcasts notifications, using the tag and template features of Azure Notification Hubs.

Wanneer u de zelfstudie hebt voltooid, kunt u in de mobiele toepassing categorieën kiezen waarvoor u zich wilt registreren, evenals de taal waarin u meldingen voor die nieuwscategorieën wilt ontvangen.When you complete the tutorial, the mobile application lets you register for categories you are interested in, and also specify a language in which to receive the notifications. De back-endtoepassing verstuurt meldingen die per taal en apparaat zijn gelokaliseerd.The backend application sends notifications that are localized by language and device.

In deze zelfstudie leert u het volgende:In this tutorial, you learn how to:

  • Windows-app bijwerken om landinstellingen te ondersteunenUpdate Windows app to support locale information
  • Back-endapp bijwerken om gelokaliseerde meldingen te verzendenUpdate back-end app to send localized notifications
  • De app testenTest the app

VereistenPrerequisites

U moet de Zelfstudie: Meldingen verzenden naar specifieke apparaten (Universeel Windows-platform).Complete the Tutorial: Send notifications to specific devices (Universal Windows Platform).

In de Zelfstudie: Meldingen verzenden naar specifieke apparaten (Universeel Windows-platform) hebt u een app gebouwd die tags gebruikt om u te abonneren op meldingen voor verschillende nieuwscategorieën.In the Tutorial: Send notifications to specific devices (Universal Windows Platform), you built an app that used tags to subscribe to notifications for different news categories. In deze zelfstudie gebruikt u de sjabloon-functie van Notification Hubs om eenvoudig gelokaliseerde meldingen van belangrijk nieuws te bezorgen.In this tutorial, you use the template feature of Notification Hubs to easily deliver localized breaking news notifications.

In deze context zijn sjablonen een manier om de indeling op te geven waarin een specifiek apparaat een melding moet ontvangen.At a high level, templates are a way to specify the format in which a specific device should receive a notification. De sjabloon bepaalt de exacte indeling van de payload door te verwijzen naar eigenschappen die deel uitmaken van het bericht dat is verzonden door uw back-endapp.The template specifies the exact payload format by referring to properties that are part of the message sent by your app back-end. In deze zelfstudie verzendt de back-endtoepassing een bericht met alle ondersteunde talen:In this tutorial, the backend application sends a locale-agnostic message containing all supported languages:

{
    "News_English": "...",
    "News_French": "...",
    "News_Mandarin": "..."
}

De apparaten registreren zich bij een sjabloon die naar de juiste eigenschap verwijst.The devices register with a template that refers to the correct property. Een Windows Store-app die een pop-upbericht in het Engels wil ontvangen, registreert zich bijvoorbeeld voor de volgende sjabloon met alle bijbehorende tags:For instance, a Windows Store app that wants to receive a toast message in English registers for the following template with any corresponding tags:

<toast>
    <visual>
    <binding template=\"ToastText01\">
        <text id=\"1\">$(News_English)</text>
    </binding>
    </visual>
</toast>

Zie Push Templates (Pushsjablonen) voor meer informatie over sjablonen.To learn more about templates, see Push Templates.

Windows-app bijwerken om landinstellingen te ondersteunenUpdate Windows app to support locale information

  1. Open in Visual Studio de oplossing die u hebt gemaakt voor de Zelfstudie: Meldingen verzenden naar specifieke apparaten (Universeel Windows-platform).Open the Visual Studio solution you created for the Tutorial: Send notifications to specific devices (Universal Windows Platform).

  2. Werk het bestand MainPage.xaml van de oplossing bij met een keuzelijst met invoervak voor landinstellingen:Update the solution's MainPage.xaml file to include a locale combobox:

    <Grid Margin="120, 58, 120, 80"  
            Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"  TextWrapping="Wrap" Text="Breaking News" FontSize="42" VerticalAlignment="Top"/>
        <ComboBox Name="Locale" HorizontalAlignment="Left" VerticalAlignment="Center" Width="200" Grid.Row="1" Grid.Column="0">
            <x:String>English</x:String>
            <x:String>French</x:String>
            <x:String>Mandarin</x:String>
        </ComboBox>
        <ToggleSwitch Header="World" Name="WorldToggle" Grid.Row="2" Grid.Column="0"/>
        <ToggleSwitch Header="Politics" Name="PoliticsToggle" Grid.Row="3" Grid.Column="0"/>
        <ToggleSwitch Header="Business" Name="BusinessToggle" Grid.Row="4" Grid.Column="0"/>
        <ToggleSwitch Header="Technology" Name="TechnologyToggle" Grid.Row="2" Grid.Column="1"/>
        <ToggleSwitch Header="Science" Name="ScienceToggle" Grid.Row="3" Grid.Column="1"/>
        <ToggleSwitch Header="Sports" Name="SportsToggle" Grid.Row="4" Grid.Column="1"/>
        <Button Content="Subscribe" HorizontalAlignment="Center" Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2" Click="SubscribeButton_Click" />
    </Grid>
    
  3. Voeg in de klasse Notifications een landinstellingenparameter toe aan de methoden StoreCategoriesAndSubscribe en SubscribeToCategories.In the Notifications class, add a locale parameter to the StoreCategoriesAndSubscribe and SubscribeToCategories methods.

    public async Task<Registration> StoreCategoriesAndSubscribe(string locale, IEnumerable<string> categories)
    {
        ApplicationData.Current.LocalSettings.Values["categories"] = string.Join(",", categories);
        ApplicationData.Current.LocalSettings.Values["locale"] = locale;
        return await SubscribeToCategories(locale, categories);
    }
    
    public async Task<Registration> SubscribeToCategories(string locale, IEnumerable<string> categories = null)
    {
        var channel = await PushNotificationChannelManager.CreatePushNotificationChannelForApplicationAsync();
    
        if (categories == null)
        {
            categories = RetrieveCategories();
        }
    
        // Using a template registration. This makes supporting notifications across other platforms much easier.
        // Using the localized tags based on locale selected.
        string templateBodyWNS = String.Format("<toast><visual><binding template=\"ToastText01\"><text id=\"1\">$(News_{0})</text></binding></visual></toast>", locale);
    
        return await hub.RegisterTemplateAsync(channel.Uri, templateBodyWNS, "localizedWNSTemplateExample", categories);
    }
    

    Roep in plaats van methode RegisterNativeAsync methode RegisterTemplateAsync aan.Instead of calling the RegisterNativeAsync method, call RegisterTemplateAsync. U registreert een specifieke indeling voor de melding waarin de sjabloon afhankelijk is van de landinstelling.You register a specific notification format in which the template depends on the locale. U geeft ook een naam op voor de sjabloon ('localizedWNSTemplateExample'), aangezien u misschien meer dan één sjabloon wilt registreren (bijvoorbeeld één voor pop-upmeldingen en één voor tegels).You also provide a name for the template ("localizedWNSTemplateExample"), because you might want to register more than one template (for instance one for toast notifications and one for tiles). U moet ook een naam opgeven om sjablonen te kunnen bijwerken of verwijderen.You also need to name them to update or delete them.

    Als op een apparaat meerdere sjablonen met dezelfde tag zijn geregistreerd, worden er meerdere meldingen verstuurd naar het apparaat (één voor elke sjabloon) als er een bericht binnenkomt dat gericht is op deze tag.If a device registers multiple templates with the same tag, an incoming message targeting that tag results in multiple notifications delivered to the device (one for each template). Dit gedrag is handig wanneer hetzelfde logische bericht moet resulteren in meerdere visual meldingen (bijvoorbeeld een badge en een pop-up weergeven in een Windows Store-toepassing).This behavior is useful when the same logical message has to result in multiple visual notifications, for instance showing both a badge and a toast in a Windows Store application.

  4. Voeg de volgende methode toe om de opgeslagen landinstelling op te halen:Add the following method to retrieve the stored locale:

    public string RetrieveLocale()
    {
        var locale = (string) ApplicationData.Current.LocalSettings.Values["locale"];
        return locale != null ? locale : "English";
    }
    
  5. Werk in het bestand MainPage.xaml.cs de knop-klikhandler bij voor het ophalen van de huidige waarde van de keuzelijst met invoervak voor landinstellingen en geef deze waarde door aan de aanroep van de klasse Notifications:In the MainPage.xaml.cs file, update the button click handler to retrieve the current value of the Locale combo box and provide it to the call to the Notifications class:

    private async void SubscribeButton_Click(object sender, RoutedEventArgs e)
    {
        var locale = (string)Locale.SelectedItem;
    
        var categories = new HashSet<string>();
        if (WorldToggle.IsOn) categories.Add("World");
        if (PoliticsToggle.IsOn) categories.Add("Politics");
        if (BusinessToggle.IsOn) categories.Add("Business");
        if (TechnologyToggle.IsOn) categories.Add("Technology");
        if (ScienceToggle.IsOn) categories.Add("Science");
        if (SportsToggle.IsOn) categories.Add("Sports");
    
        var result = await ((App)Application.Current).notifications.StoreCategoriesAndSubscribe(locale,
                categories);
    
        var dialog = new MessageDialog("Locale: " + locale + " Subscribed to: " + 
            string.Join(",", categories) + " on registration Id: " + result.RegistrationId);
        dialog.Commands.Add(new UICommand("OK"));
        await dialog.ShowAsync();
    }
    
  6. Ten slotte werkt u in het bestand App.xaml.cs de methode InitNotificationsAsync bij om de landinstelling op te halen en gebruikt u deze bij het abonneren:Finally, in the App.xaml.cs file, update the InitNotificationsAsync method to retrieve the locale and use it when subscribing:

    private async void InitNotificationsAsync()
    {
        var result = await notifications.SubscribeToCategories(notifications.RetrieveLocale());
    
        // Displays the registration ID so you know it was successful
        if (result.RegistrationId != null)
        {
            var dialog = new MessageDialog("Registration successful: " + result.RegistrationId);
            dialog.Commands.Add(new UICommand("OK"));
            await dialog.ShowAsync();
        }
    }
    

De UWP-toepassing uitvoerenRun the UWP application

  1. Voer de Universeel Windows-platform-toepassing uit.Run the Universal Windows Platform application. Wacht tot u het bericht ziet dat de registratie is gelukt.Wait until you see the Registration successful message.

    Registratie van mobiele toepassing

  2. Selecteer de categorieën en locale (landinstelling), en klik op Subscribe.Select the categories and locale, and click Subscribe. De app zet de geselecteerde categorieën om in tags en vraagt bij Notification Hubs een nieuwe apparaatregistratie aan voor de geselecteerde tags.The app converts the selected categories into tags and requests a new device registration for the selected tags from the notification hub.

    Mobiele toepassing

  3. U ziet een bevestigingsbericht over de abonnementen.You see a confirmation message about the subscriptions.

    Abonnementsbericht

De console-app bijwerken om gelokaliseerde meldingen te verzendenUpdate console app to send localized notifications

Wanneer u sjabloonmeldingen verstuurt, hoeft u alleen een set eigenschappen op te geven. In deze zelfstudie verstuurt de back-endtoepassing de set eigenschappen met de gelokaliseerde versie van het actuele nieuws, bijvoorbeeld:When you send template notifications you only need to provide a set of properties, in this tutorial, the backend application sends the set of properties containing the localized version of the current news, for instance:

{
    "News_English": "World News in English!",
    "News_French": "World News in French!",
    "News_Mandarin": "World News in Mandarin!"
}

In deze sectie gaat u het consoletoepassingsproject in de oplossing bijwerken.In this section, you update the console application project in the solution. Wijzig de methode SendTemplateNotificationAsync in de console-app die u eerder hebt gemaakt met de volgende code:Modify the SendTemplateNotificationAsync method in the console app you previously created with the following code:

Belangrijk

Geef in de code de naam en verbindingsreeks met volledige toegang op voor uw meldingshub.Specify the name and connection string with full access for your notification hub in the code.

private static async void SendTemplateNotificationAsync()
{
    // Define the notification hub.
    NotificationHubClient hub = NotificationHubClient.CreateClientFromConnectionString(
        "<connection string with full access>", "<hub name>");

    // Sending the notification as a template notification. All template registrations that contain
    // "messageParam" or "News_<local selected>" and the proper tags will receive the notifications.
    // This includes APNS, FCM, WNS, and MPNS template registrations.
    Dictionary<string, string> templateParams = new Dictionary<string, string>();

    // Create an array of breaking news categories.
    var categories = new string[] { "World", "Politics", "Business", "Technology", "Science", "Sports"};
    var locales = new string[] { "English", "French", "Mandarin" };

    foreach (var category in categories)
    {
        templateParams["messageParam"] = "Breaking " + category + " News!";

        // Sending localized News for each tag too...
        foreach( var locale in locales)
        {
            string key = "News_" + locale;

            // Your real localized news content would go here.
            templateParams[key] = "Breaking " + category + " News in " + locale + "!";
        }

        await hub.SendTemplateNotificationAsync(templateParams, category);
    }
}

Met deze eenvoudige aanroep wordt het gelokaliseerde nieuwsbericht bezorgd op alle apparaten, ongeacht het platform. Dit kan doordat uw Notification Hub de juiste payload voor het platform samenstelt en verstuurt naar alle apparaten die zijn geabonneerd op een bepaalde tag.This simple call delivers the localized piece of news to all devices, irrespective of the platform, as your Notification Hub builds and delivers the correct native payload to all the devices subscribed to a specific tag.

Console-app uitvoeren om gelokaliseerde melding te verzendenRun console app to send localized notification

Voer de console-app uit om meldingen te verzenden voor elke categorie en in elke ondersteunde taal.Run the console app to send notifications for each category and in each supported language. Controleer of u alleen een melding krijgt voor de categorieën waarop u zich hebt geabonneerd en of het bericht overeenkomt met de landinstelling die u hebt geselecteerd.Verify that you only receive a notification for the categories you have subscribed to and the message is for the locale you selected.

Meldingen

Volgende stappenNext steps

In deze zelfstudie hebt u geleerd hoe u gelokaliseerde pushmeldingen kunt verzenden naar specifieke apparaten door een tag te koppelen aan hun registraties.In this tutorial, you learned how to push localized notifications to specific devices that have tags associated with their registrations. Als u wilt weten hoe u pushmeldingen kunt verzenden naar specifieke gebruikers die mogelijk meer dan één apparaat gebruiken, gaat u verder met de volgende zelfstudie:To learn how to push notifications to specific users who may be using more than one device, advance to the following tutorial: