Share via

Tutorial: Mengirimkan pemberitahuan push yang dilokalisasi ke iOS menggunakan Azure Notification Hubs

  • Artikel

Tutorial ini menampilkan kepada Anda cara menggunakan fitur templat Azure Notification Hubs untuk menyiarkan pemberitahuan berita terkini yang telah dilokalisasi berdasarkan bahasa dan perangkat. Dalam tutorial ini, Anda memulai dengan aplikasi iOS yang dibuat di Menggunakan Notification Hubs untuk mengirim berita terkini. Setelah selesai, Anda dapat mendaftar pada kategori yang Anda minati, menentukan bahasa untuk menerima pemberitahuan, dan hanya menerima pemberitahuan push untuk kategori yang dipilih dalam bahasa tersebut.

Ada dua bagian dalam skenario ini:

  • Aplikasi iOS memungkinkan perangkat klien menentukan bahasa, dan berlangganan ke berbagai kategori berita terkini;
  • Back-end menyiarkan pemberitahuan, menggunakan fitur tag dan templat dari Azure Notification Hubs.

Dalam tutorial ini, lakukan langkah-langkah berikut:

  • Memperbarui antarmuka pengguna aplikasi
  • Membangun aplikasi iOS
  • Mengirimkan pemberitahuan templat yang dilokalisasi dari aplikasi konsol .NET
  • Mengirimkan pemberitahuan templat yang dilokalisasi dari perangkat

Gambaran Umum

Di Menggunakan Notification Hubs untuk mengirim berita terkini, Anda membangun aplikasi yang menggunakan tag untuk berlangganan pemberitahuan untuk berbagai kategori berita. Akan tetapi, banyak aplikasi yang menargetkan beberapa pasar dan memerlukan lokalisasi. Artinya konten pemberitahuan itu sendiri harus dilokalisasi dan disampaikan ke set perangkat yang benar. Tutorial ini menampilkan cara menggunakan fitur templat Notification Hubs untuk mengirimkan pemberitahuan berita terkini yang dilokalisasi dengan mudah.

Catatan

Salah satu cara untuk mengirim pemberitahuan yang dilokalisasi adalah dengan membuat beberapa versi dari setiap tag. Misalnya, untuk mendukung bahasa Inggris, Prancis, dan Mandarin, Anda akan membutuhkan tiga tag berbeda untuk berita dunia: "world_en", "world_fr", dan "world_ch". Anda kemudian harus mengirim versi berita dunia yang dilokalisasi ke masing-masing tag ini. Dalam topik ini, Anda menggunakan templat untuk menghindari menjamurnya tag dan persyaratan pengiriman beberapa pesan.

Templat adalah cara untuk menentukan bagaimana perangkat tertentu harus menerima pemberitahuan. Templat menentukan format payload yang tepat dengan merujuk ke properti yang merupakan bagian dari pesan yang dikirim oleh back-end aplikasi Anda. Dalam kasus Anda, Anda mengirim pesan lokal-agnostik yang berisi semua bahasa yang didukung:

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

Kemudian pastikan perangkat mendaftar dengan templat yang mengacu pada properti yang benar. Misalnya, aplikasi iOS yang ingin mendaftar untuk register berita Prancis menggunakan sintaks berikut:

{
    aps: {
        alert: "$(News_French)"
    }
}

Untuk informasi selengkapnya tentang templat, lihat artikel Templat.

Prasyarat

Memperbarui antarmuka pengguna aplikasi

Di bagian ini, Anda memodifikasi aplikasi Breaking News yang Anda buat di topik Menggunakan Notification Hubs untuk mengirim berita terkini untuk mengirim berita terkini yang dilokalisasi menggunakan templat.

Di MainStoryboard_iPhone.storyboard Anda, tambahkan Kontrol Tersegmentasi dengan tiga bahasa: Inggris, Prancis, dan Mandarin.

Membuat papan cerita UI iOS

Kemudian pastikan untuk menambahkan IBOutlet di ViewController.h seperti yang ditampilkan di gambar berikut:

Membuat outlet untuk sakelar

Membangun aplikasi iOS

  1. Di Notification.h Anda, tambahkan metode retrieveLocale, dan ubah metode penyimpanan dan berlangganan seperti yang ditampilkan dalam kode berikut:

    - (void) storeCategoriesAndSubscribeWithLocale:(int) locale categories:(NSSet*) categories completion: (void (^)(NSError* error))completion;

- (void) subscribeWithLocale:(int) locale categories:(NSSet*) categories completion:(void (^)(NSError *))completion;

- (NSSet*) retrieveCategories;

- (int) retrieveLocale;

    Di Notification.m Anda, ubah metode storeCategoriesAndSubscribe, dengan menambahkan parameter locale dan menyimpannya di default pengguna:

    - (void) storeCategoriesAndSubscribeWithLocale:(int) locale categories:(NSSet *)categories completion:(void (^)(NSError *))completion {
    NSUserDefaults* defaults = [NSUserDefaults standardUserDefaults];
    [defaults setValue:[categories allObjects] forKey:@"BreakingNewsCategories"];
    [defaults setInteger:locale forKey:@"BreakingNewsLocale"];
    [defaults synchronize];

    [self subscribeWithLocale: locale categories:categories completion:completion];
}

    Kemudian ubah metode berlangganan untuk menyertakan lokal:

    - (void) subscribeWithLocale: (int) locale categories:(NSSet *)categories completion:(void (^)(NSError *))completion{
    SBNotificationHub* hub = [[SBNotificationHub alloc] initWithConnectionString:@"<connection string>" notificationHubPath:@"<hub name>"];

    NSString* localeString;
    switch (locale) {
        case 0:
            localeString = @"English";
            break;
        case 1:
            localeString = @"French";
            break;
        case 2:
            localeString = @"Mandarin";
            break;
    }

    NSString* template = [NSString stringWithFormat:@"{\"aps\":{\"alert\":\"$(News_%@)\"},\"inAppMessage\":\"$(News_%@)\"}", localeString, localeString];

    [hub registerTemplateWithDeviceToken:self.deviceToken name:@"localizednewsTemplate" jsonBodyTemplate:template expiryTemplate:@"0" tags:categories completion:completion];
}

    Anda menggunakan metode registerTemplateWithDeviceToken, dan bukan registerNativeWithDeviceToken. Ketika Anda mendaftar untuk templat, Anda harus menyediakan templat json dan juga nama untuk templat (karena aplikasi dapat mendaftarkan berbagai templat). Pastikan untuk mendaftarkan kategori Anda sebagai tag, karena Anda ingin memastikan untuk menerima pemberitahuan untuk berita tersebut.

    Tambahkan metode untuk mengambil lokal dari pengaturan default pengguna:

    - (int) retrieveLocale {
    NSUserDefaults* defaults = [NSUserDefaults standardUserDefaults];

    int locale = [defaults integerForKey:@"BreakingNewsLocale"];

    return locale < 0?0:locale;
}

  2. Sekarang setelah Anda mengubah kelas Notifications, Anda harus memastikan bahwa ViewController memanfaatkan UISegmentControl yang baru. Tambahkan baris berikut di metode viewDidLoad untuk memastikan agar lokal yang saat ini dipilih ditampilkan:

    self.Locale.selectedSegmentIndex = [notifications retrieveLocale];

    Kemudian, di metode subscribe Anda, ubah perintah Anda untuk storeCategoriesAndSubscribe ke kode berikut:

    [notifications storeCategoriesAndSubscribeWithLocale: self.Locale.selectedSegmentIndex categories:[NSSet setWithArray:categories] completion: ^(NSError* error) {
    if (!error) {
        UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Notification" message:
                                @"Subscribed!" delegate:nil cancelButtonTitle:
                                @"OK" otherButtonTitles:nil, nil];
        [alert show];
    } else {
        NSLog(@"Error subscribing: %@", error);
    }
}];

  3. Terakhir, Anda harus memperbarui metode didRegisterForRemoteNotificationsWithDeviceToken di AppDelegate.m, sehingga Anda dapat dengan benar me-refresh pendaftaran saat aplikasi dimulai. Ubah perintah Anda untuk metode subscribe dari pemberitahuan dengan kode berikut:

    NSSet* categories = [self.notifications retrieveCategories];
int locale = [self.notifications retrieveLocale];
[self.notifications subscribeWithLocale: locale categories:categories completion:^(NSError* error) {
    if (error != nil) {
        NSLog(@"Error registering for notifications: %@", error);
    }
}];

(opsional) Mengirimkan pemberitahuan templat yang dilokalisasi dari aplikasi konsol .NET

Saat mengirim pemberitahuan templat, Anda hanya perlu menyediakan sekumpulan properti. Dalam skenario ini, kumpulan properti berisi versi lokal berita saat ini.

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

Mengirim pemberitahuan menggunakan aplikasi konsol C#

Bagian ini menunjukkan cara mengirim notifikasi menggunakan aplikasi konsol. Kode menyiarkan pemberitahuan ke perangkat Windows Store dan iOS. Ubah metode SendTemplateNotificationAsync di aplikasi konsol yang sebelumnya Anda buat dengan kode berikut:

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

    // Apple requires the apns-push-type header for all requests
    var headers = new Dictionary<string, string> {{"apns-push-type", "alert"}};

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

Metode SendTemplateNotificationAsync mengirimkan berita yang dilokalkan ke semua perangkat Anda, apa pun platformnya. Hub pemberitahuan Anda akan membuat dan mengirimkan payload native yang benar ke semua perangkat yang berlangganan tag tertentu.

Mengirim pemberitahuan dengan Layanan Seluler

Di penjadwal Layanan Seluler Anda, gunakan skrip berikut:

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

(opsional) Mengirimkan pemberitahuan templat yang dilokalisasi dari perangkat

Jika Anda tidak memiliki akses ke Visual Studio, atau hanya ingin menguji pengiriman pemberitahuan templat yang dilokalisasi langsung dari aplikasi pada perangkat. Anda dapat menambahkan parameter template yang dilokalisasi ke metode SendNotificationRESTAPI yang Anda tentukan di tutorial sebelumnya.

- (void)SendNotificationRESTAPI:(NSString*)categoryTag
{
    NSURLSession* session = [NSURLSession sessionWithConfiguration:[NSURLSessionConfiguration
                                defaultSessionConfiguration] delegate:nil delegateQueue:nil];

    NSString *json;

    // Construct the messages REST endpoint
    NSURL* url = [NSURL URLWithString:[NSString stringWithFormat:@"%@%@/messages/%@", HubEndpoint,
                                        HUBNAME, API_VERSION]];

    // Generated the token to be used in the authorization header.
    NSString* authorizationToken = [self generateSasToken:[url absoluteString]];

    //Create the request to add the template notification message to the hub
    NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:url];
    [request setHTTPMethod:@"POST"];

    // Add the category as a tag
    [request setValue:categoryTag forHTTPHeaderField:@"ServiceBusNotification-Tags"];

    // Template notification
    json = [NSString stringWithFormat:@"{\"messageParam\":\"Breaking %@ News : %@\","
            \"News_English\":\"Breaking %@ News in English : %@\","
            \"News_French\":\"Breaking %@ News in French : %@\","
            \"News_Mandarin\":\"Breaking %@ News in Mandarin : %@\","
            categoryTag, self.notificationMessage.text,
            categoryTag, self.notificationMessage.text,  // insert English localized news here
            categoryTag, self.notificationMessage.text,  // insert French localized news here
            categoryTag, self.notificationMessage.text]; // insert Mandarin localized news here

    // Signify template notification format
    [request setValue:@"template" forHTTPHeaderField:@"ServiceBusNotification-Format"];

    // JSON Content-Type
    [request setValue:@"application/json;charset=utf-8" forHTTPHeaderField:@"Content-Type"];

    //Authenticate the notification message POST request with the SaS token
    [request setValue:authorizationToken forHTTPHeaderField:@"Authorization"];

    //Add the notification message body
    [request setHTTPBody:[json dataUsingEncoding:NSUTF8StringEncoding]];

    // Send the REST request
    NSURLSessionDataTask* dataTask = [session dataTaskWithRequest:request
                completionHandler:^(NSData *data, NSURLResponse *response, NSError *error)
        {
        NSHTTPURLResponse* httpResponse = (NSHTTPURLResponse*) response;
            if (error || httpResponse.statusCode != 200)
            {
                NSLog(@"\nError status: %d\nError: %@", httpResponse.statusCode, error);
            }
            if (data != NULL)
            {
                //xmlParser = [[NSXMLParser alloc] initWithData:data];
                //[xmlParser setDelegate:self];
                //[xmlParser parse];
            }
        }];

    [dataTask resume];
}

Langkah berikutnya

Di tutorial ini, Anda telah mengirimkan pemberitahuan yang dilokalisasi ke perangkat iOS. Untuk mempelajari cara mengirimkan pemberitahuan push ke pengguna iOS tertentu, lanjutkan ke tutorial berikut:

Pemberitahuan push ke pengguna tertentu