Utilizzo di Hub di notifica per inviare notizie localizzateUse Notification Hubs to send localized breaking news

OverviewOverview

In questo argomento viene illustrato come utilizzare la funzionalità relativa ai modelli di Hub di notifica di Azure per trasmettere notifiche relative alle ultime notizie localizzate in base alla lingua e al dispositivo.This topic shows you how to use the template feature of Azure Notification Hubs to broadcast breaking news notifications that have been localized by language and device. In questa esercitazione verrà utilizzata l'app di Windows Store creata in Utilizzo di Hub di notifica per inviare le ultime notizie.In this tutorial you start with the Windows Store app created in [Use Notification Hubs to send breaking news]. Al termine, sarà possibile effettuare la registrazione per le categorie di proprio interesse, specificare la lingua in cui ricevere le notifiche e ricevere solo notifiche push per le categorie selezionate nella lingua scelta.When complete, you will be able to register for categories you are interested in, specify a language in which to receive the notifications, and receive only push notifications for the selected categories in that language.

Lo scenario è composto da due parti:There are two parts to this scenario:

  • l'app di 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;
  • il back-end trasmette le notifiche usando le funzionalità relative ai tag e ai modelli di Hub di notifica di Azure.the back-end broadcasts the notifications, using the tag and template feautres of Azure Notification Hubs.

PrerequisitiPrerequisites

È necessario aver completato l'esercitazione Utilizzo di Hub di notifica per inviare le ultime notizie e disporre del relativo codice, in quanto questa esercitazione è basata direttamente su tale codice.You must have already completed the [Use Notification Hubs to send breaking news] tutorial and have the code available, because this tutorial builds directly upon that code.

È inoltre necessario disporre di Visual Studio 2012 o versione successiva.You also need Visual Studio 2012 or later.

Concetti relativi ai modelliTemplate concepts

In Utilizzo di Hub di notifica per inviare le ultime notizie è stata creata un'app che utilizza i tag per sottoscrivere le notifiche per diverse categorie di notizie.In [Use Notification Hubs to send breaking news] you built an app that used tags to subscribe to notifications for different news categories. Molte app, tuttavia, sono destinate a più mercati ed è necessario localizzarle.Many apps, however, target multiple markets and require localization. Questo significa che il contenuto delle notifiche deve essere localizzato e inviato al set di dispositivi corretto.This means that the content of the notifications themselves have to be localized and delivered to the correct set of devices. In questo argomento verrà illustrato come usare la funzionalità relativa ai modelli di Hub di notifica per inviare facilmente notifiche relative alle ultime notizie localizzate.In this topic we will show how to use the template feature of Notification Hubs to easily deliver localized breaking news notifications.

Nota: un possibile modo per inviare notifiche localizzate consiste nel creare più versioni di ogni tag.Note: one way to send localized notifications is to create multiple versions of each tag. Per supportare l'inglese, il francese e il mandarino, ad esempio, sono necessari tre tag diversi per le ultime notizie internazionali: "world_en", "world_fr" e "world_ch".For instance, to support English, French, and Mandarin, we would need three different tags for world news: "world_en", "world_fr", and "world_ch". È quindi necessario inviare una versione localizzata delle ultime notizie internazionali a ogni tag.We would then have to send a localized version of the world news to each of these tags. In questo argomento verranno utilizzati i modelli per evitare la proliferazione di tag e la necessità di inviare più messaggi.In this topic we use templates to avoid the proliferation of tags and the requirement of sending multiple messages.

In linea generale, i modelli consentono di specificare in che modo uno specifico dispositivo deve ricevere una notifica.At a high level, templates are a way to specify how 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 questo caso verrà inviato un messaggio indipendente dalle impostazioni locali, che contiene tutte le lingue supportate:In our case, we will send a locale-agnostic message containing all supported languages:

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

Si procederà quindi a verificare che i dispositivi effettuino la registrazione con un modello che faccia riferimento alla proprietà corretta.Then we will ensure that devices register with a template that refers to the correct property. Ad esempio, un'app di Windows Store che desidera ricevere un semplice avviso popup effettuerà la registrazione per il modello seguente con eventuali tag corrispondenti:For instance, a Windows Store app that wants to receive a simple toast message will register for the following template with any corresponding tags:

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

I modelli rappresentano uno strumento particolarmente efficace. Per altre informazioni, vedere l'articolo relativo ai Modelli.Templates are a very powerful feature you can learn more about in our Templates article.

Interfaccia utente dell'appThe app user interface

L'app Breaking News creata nell'argomento Utilizzo di Hub di notifica per inviare le ultime notizie verrà ora modificata in modo da inviare notizie localizzate mediante modelli.We will now modify the Breaking News app that you created in the topic [Use Notification Hubs to send breaking news] to send localized breaking news using templates.

Nell'app di Windows Store:In your Windows Store app:

Modificare il file MainPage.xaml in modo da includere una casella combinata per le impostazioni locali:Change 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>

Compilazione dell'app client di Windows StoreBuilding the Windows Store client app

  1. Nella classe Notifications aggiungere un parametro "locale" ai metodi StoreCategoriesAndSubscribe e SubscribeToCategories.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);
     }
    

    Tenere presente che anziché chiamare il metodo RegisterNativeAsync viene chiamato RegisterTemplateAsync: si registra un formato di notifica specifico, in cui il modello dipende dalle impostazioni locali.Note that instead of calling the RegisterNativeAsync method we call RegisterTemplateAsync: we are registering a specific notification format in which the template depends on the locale. Verrà inoltre fornito un nome per il modello ("localizedWNSTemplateExample") in quanto può essere necessario registrare più modelli, ad esempio uno per le notifiche di tipo avviso popup e uno per le notifiche di tipo riquadro. In questo caso, per avere la possibilità di aggiornare o eliminare i modelli è necessario assegnare loro un nome.We also provide a name for the template ("localizedWNSTemplateExample"), because we might want to register more than one template (for instance one for toast notifications and one for tiles) and we need to name them in order to be able to update or delete them.

    Si noti che, 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.Note that if a device registers multiple templates with the same tag, an incoming message targeting that tag will result 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.

  2. 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";
     }
    
  3. 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();
     }
    
  4. 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 solo fornire un set di proprietà. In questo caso verrà inviato 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 our case we will send 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 viene illustrato come inviare notifiche tramite un’app consoleThis section shows how to send notifications using a console app

Il codice incluso trasmette le notifiche sia Windows Store che a dispositivi iOS, poiché il back-end è in grado di trasmettere a qualsiasi dispositivo supportato.The included code broadcasts to both Windows Store and iOS devices, since the backend can broadcast to any of the supported devices.

Per inviare notifiche tramite un'app console C#To send notifications using a C# console app

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. Si noti come in questo caso non sia necessario inviare più notifiche per impostazioni locali e piattaforme diverse.Notice how in this case there is no need to send multiple notifications for different locales and platforms.

    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);
        }
    }

Si noti che questa semplice chiamata distribuirà 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.Note that this simple call will deliver 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.

Invio della notifica con Servizi mobiliSending the notification with Mobile Services

Nell'utilità di pianificazione di Servizi mobili, è possibile utilizzare lo script seguente:In your Mobile Service scheduler, you can use the following script:

var azure = require('azure');
var notificationHubService = azure.createNotificationHubService('<hub name>', '<connection string with full access>');
var notification = {
        "News_English": "World News in English!",
        "News_French": "World News in French!",
        "News_Mandarin", "World News in Mandarin!"
}
notificationHubService.send('World', notification, function(error) {
    if (!error) {
        console.warn("Notification successful");
    }
});