Utilizzo di Hub di notifica per inviare notizie localizzate

Overview

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. In questa esercitazione verrà utilizzata l'app di Windows Store creata in Utilizzo di Hub di notifica per inviare le ultime notizie. 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.

Lo scenario è composto da due parti:

  • l'app di Windows Store consente ai dispositivi client di specificare una lingua e di sottoscrivere categorie diverse di ultime notizie;
  • il back-end trasmette le notifiche usando le funzionalità relative ai tag e ai modelli di Hub di notifica di Azure.

Prerequisiti

È 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.

È inoltre necessario disporre di Visual Studio 2012 o versione successiva.

Concetti relativi ai modelli

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. Molte app, tuttavia, sono destinate a più mercati ed è necessario localizzarle. Questo significa che il contenuto delle notifiche deve essere localizzato e inviato al set di dispositivi corretto. 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.

Nota: un possibile modo per inviare notifiche localizzate consiste nel creare più versioni di ogni 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". È quindi necessario inviare una versione localizzata delle ultime notizie internazionali a ogni tag. In questo argomento verranno utilizzati i modelli per evitare la proliferazione di tag e la necessità di inviare più messaggi.

In linea generale, i modelli consentono di specificare in che modo uno specifico dispositivo deve ricevere una notifica. Il modello definisce lo specifico formato di payload da utilizzare, facendo riferimento alle proprietà del messaggio inviato dal back-end dell'app. In questo caso verrà inviato un messaggio indipendente dalle impostazioni locali, che contiene tutte le lingue supportate:

{
    "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. 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:

<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.

Interfaccia utente dell'app

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.

Nell'app di Windows Store:

Modificare il file MainPage.xaml in modo da includere una casella combinata per le impostazioni locali:

<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 Store

  1. Nella classe Notifications aggiungere un parametro "locale" ai metodi StoreCategoriesAndSubscribe e SubscribeToCategories.

     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. 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.

    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. 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.

  2. Aggiungere il metodo seguente per recuperare le impostazioni locali archiviate:

     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:

     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:

     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-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:

{
    "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 console

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.

Per inviare notifiche tramite un'app console C#

Modificare il metodo SendTemplateNotificationAsync nell'app console creata in precedenza con il codice seguente. Si noti come in questo caso non sia necessario inviare più notifiche per impostazioni locali e piattaforme diverse.

    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.

Invio della notifica con Servizi mobili

Nell'utilità di pianificazione di Servizi mobili, è possibile utilizzare lo script seguente:

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