Esercitazione: eseguire il push di notifiche localizzate alle app Windows con Hub di notifica di AzureTutorial: Push localized notifications to Windows apps by using Azure Notification Hubs

PanoramicaOverview

Questa esercitazione illustra come inviare notifiche push localizzate ai dispositivi mobili registrati con il servizio Hub di notifica.This tutorial shows you how to push localized notifications to mobile devices registered with the Notification Hubs service. Nell'esercitazione si esegue l'aggiornamento delle applicazioni create nell'Esercitazione: inviare notifiche a dispositivi specifici (piattaforma UWP (Universal Windows Platform)) per supportare gli scenari seguenti:In the tutorial, you update applications created in the Tutorial: Send notifications to specific devices (Universal Windows Platform) to support the following scenarios:

  • L'app Windows Store consente ai dispositivi client di specificare una lingua e di sottoscrivere categorie diverse di ultime notizie.The Windows Store app allows client devices to specify a language, and to subscribe to different breaking news categories.
  • L'app back-end trasmette le notifiche usando le funzionalità relative ai tag e ai modelli di Hub di notifica di Azure.The back-end app broadcasts notifications, using tag and template features of Azure Notification Hubs.

Dopo aver completato l'esercitazione, l'applicazione per dispositivi mobili consente di registrarsi per le categorie di interesse e anche di specificare una lingua in cui si intende ricevere le notifiche.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. L'applicazione back-end invia le notifiche localizzate in base alla lingua e dispositivo.The backend application sends notifications that are localized by language and device.

In questa esercitazione si apprenderà come:In this tutorial, you learn how to:

  • Aggiornare l'app di Windows per supportare informazioni sulle impostazioni localiUpdate Windows app to support locale information
  • Aggiornare l'app back-end per inviare le notifiche localizzateUpdate back-end app to send localized notifications
  • Testare l'appTest the app

prerequisitiPrerequisites

Completare l'Esercitazione: inviare notifiche a dispositivi specifici (piattaforma UWP (Universal Windows Platform)).Complete the Tutorial: Send notifications to specific devices (Universal Windows Platform).

Nell'Esercitazione: inviare notifiche a dispositivi specifici (piattaforma UWP (Universal Windows Platform)) viene generata un'app che ha usato i tag per sottoscrivere le notifiche a diverse categorie di notizie.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 questa esercitazione viene usata la funzionalità relativa ai modelli di Hub di notifica per inviare facilmente notifiche relative alle ultime notizie localizzate.In this tutorial, you use the template feature of Notification Hubs to easily deliver localized breaking news notifications.

In generale, i modelli rappresentano un modo per specificare il formato in cui un dispositivo specifico deve ricevere una notifica.At a high level, templates are a way to specify the format in which a specific device should receive a notification. Il modello definisce lo specifico formato di payload da utilizzare, facendo riferimento alle proprietà del messaggio inviato dal back-end dell'app.The template specifies the exact payload format by referring to properties that are part of the message sent by your app back-end. In questa esercitazione, l'applicazione back-end invia un messaggio indipendente dalle impostazioni locali che contiene tutte le lingue supportate:In this tutorial, the backend application sends a locale-agnostic message containing all supported languages:

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

I dispositivi effettuano la registrazione con un modello che faccia riferimento alla proprietà corretta.The devices register with a template that refers to the correct property. Ad esempio, un'app Windows Store che vuole ricevere un semplice avviso popup in inglese effettuerà la registrazione per il modello seguente con eventuali tag corrispondenti: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>

Per altre informazioni sui modelli, vedere l'articolo Modelli.To learn more about templates, see Templates article.

Aggiornare l'app di Windows per supportare informazioni sulle impostazioni localiUpdate Windows app to support locale information

  1. Aprire la soluzione Visual Studio creata per l'Esercitazione: inviare notifiche a dispositivi specifici (piattaforma UWP (Universal Windows Platform)).Open the Visual Studio solution you created for the Tutorial: Send notifications to specific devices (Universal Windows Platform).
  2. Aggiornare il file MainPage.xaml in modo da includere una casella combinata per le impostazioni locali:Update your MainPage.xaml 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. Nella classe Notifications aggiungere un parametro "locale" ai metodi StoreCategoriesAndSubscribe e SubscribeToCateories.In your Notifications class, add a locale parameter to your StoreCategoriesAndSubscribe and SubscribeToCateories 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(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);
    }
    

    Anziché chiamare il metodo RegisterNativeAsync, chiamare RegisterTemplateAsync.Instead of calling the RegisterNativeAsync method, you call RegisterTemplateAsync. Si registra un formato di notifiche specifico in cui il modello varia a seconda delle impostazioni locali.You register a specific notification format in which the template depends on the locale. Poiché può essere necessario registrare più di un modello, ad esempio uno per le notifiche di tipo avviso popup e uno per i riquadri, specificare anche un nome di modello, ad esempio "simpleWNSTemplateExample".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). È anche necessario assegnare loro un nome per aggiornarli o eliminarli.You also need to name them to update or delete them.

    Se un dispositivo registra più modelli con lo stesso tag, un messaggio in arrivo destinato a tale tag ha come esito il recapito al dispositivo di più notifiche, una per ogni modello.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). Questo comportamento risulta utile quando lo stesso messaggio logico deve avere produrre più notifiche visive, ad esempio visualizzare sia una notifica badge che una notifica di tipo avviso popup in un'app di Windows Store.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. Aggiungere il metodo seguente per recuperare le impostazioni locali archiviate: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. In MainPage.xaml.cs aggiornare il gestore degli eventi clic del pulsante recuperando il valore corrente della casella combinata Locale e fornendolo alla chiamata alla classe Notifications, come illustrato di seguito:In your MainPage.xaml.cs, update your button click handler by retrieving the current value of the Locale combo box and providing it to the call to the Notifications class, as shown:

    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. Infine, nel file App.xaml.cs, assicurarsi di aggiornare il metodo InitNotificationsAsync per recuperare le impostazioni locali e utilizzarle per la sottoscrizione:Finally, in your App.xaml.cs file, make sure to update your 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();
        }
    }
    

Inviare notifiche localizzate dal back-endSend localized notifications from your back-end

Quando si inviano notifiche modello è necessario fornire solo un set di proprietà. In questa esercitazione l'applicazione back-end invia il set di proprietà contenente la versione localizzata delle notizie correnti, ad esempio: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 questa sezione si aggiorna il progetto di applicazione console nella soluzione.In this section, you update the console application project in the solution. Modificare il metodo SendTemplateNotificationAsync nell'app console creata in precedenza con il codice seguente:Modify the SendTemplateNotificationAsync method in the console app you previously created with the following code:

Importante

Specificare il nome e la stringa di connessione con accesso completo per l'hub di notifica nel codice.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, GCM, 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);
    }
}

Questa semplice chiamata distribuisce la notizia localizzata a tutti i dispositivi, indipendentemente dalla piattaforma, in quanto l'Hub di notifica crea il payload nativo corretto e lo distribuisce a tutti i dispositivi che hanno sottoscritto un tag specifico.This simple call delivers the localized piece of news to all your 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.

Testare l'appTest the app

  1. Eseguire l'applicazione di Universal Windows Store.Run the Universal Windows Store application. Attendere fino a visualizzare il messaggio Registrazione completata.Wait until you see the Registration successful message.

    Registrazione e applicazione per dispositivi mobili

  2. Selezionare le categorie e le impostazioni locali, quindi fare clic su Subscribe (Sottoscrivi).Select the categories and locale, and click Subscribe. L'app converte le categorie selezionate in tag e richiede una nuova registrazione del dispositivo per i tag selezionati dall'hub di notifica.The app converts the selected categories into tags and requests a new device registration for the selected tags from the notification hub.

    Applicazione per dispositivi mobili

  3. Viene visualizzato un messaggio di conferma per le sottoscrizioni.You see a confirmation message about the subscriptions.

    Messaggio di sottoscrizione

  4. Dopo aver ricevuto un messaggio di conferma, eseguire la app console per inviare notifiche per ciascuna categoria e in ogni lingua supportata.After receiving a confirmation, run the console app to send notifications for each category and in each supported language. Verificare che venga ricevuta solo una notifica per le categorie sottoscritte e che il messaggio sia relativo alle impostazioni locali selezionate.Verify that you only receive a notification for the categories you have subscribed to and the message is for the locale you selected.

    Messaggi di notifica

Passaggi successiviNext steps

In questa esercitazione è stato descritto come inviare notifiche push a dispositivi specifici che hanno tag associati alle loro registrazioni.In this tutorial, you learned how to push localized notifications to specific devices that have tags associated with their registrations. Per informazioni sulle procedure per eseguire il push di notifiche a utenti specifici, che possono usare diversi dispositivi, passare all'esercitazione seguente:To learn how to push notifications to specific users who may be using more than one device, advance to the following tutorial: