Tutorial: Mengirim pemberitahuan push berbasis lokasi dengan Notification Hubs dan Data Spasial Bing

  • Artikel

Dalam tutorial ini, Anda pelajari cara mengirim pemberitahuan push berbasis lokasi dengan Azure Notification Hubs dan Data Spasial Bing.

Dalam tutorial ini, Anda lakukan langkah-langkah berikut:

  • Siapkan sumber data
  • Siapkan aplikasi UWP
  • Siapkan ujung belakang
  • Uji pemberitahuan push di aplikasi Universal Windows Platform (UWP)

Prasyarat

Siapkan sumber data

  1. Masuk ke Bing Maps Dev Center.

  2. Di bilah navigasi atas, pilih Sumber data, dan pilih Kelola Sumber Data.

    Cuplikan layar Bing Maps Dev Center di halaman Kelola Sumber Data dengan opsi Unggah data sebagai opsi sumber data digarisi merah.

  3. Jika Anda tidak memiliki sumber data yang sudah ada, Anda akan melihat tautan untuk membuat sumber data. Pilih Unggah data sebagai sumber data. Anda juga dapat menggunakan menu Sumber data>Unggah data.

    Cuplikan layar kotak dialog Unggah sumber data.

  4. Buat file NotificationHubsGeofence.pipe di hard drive Anda dengan konten berikut: Dalam tutorial ini, Anda menggunakan sampel file berbasis pipa yang membingkai area tepi laut San Francisco:

    Bing Spatial Data Services, 1.0, TestBoundaries
EntityID(Edm.String,primaryKey)|Name(Edm.String)|Longitude(Edm.Double)|Latitude(Edm.Double)|Boundary(Edm.Geography)
1|SanFranciscoPier|||POLYGON ((-122.389825 37.776598,-122.389438 37.773087,-122.381885 37.771849,-122.382186 37.777022,-122.389825 37.776598))

    File pipa mewakili entitas ini:

    Cuplikan layar peta tepi laut San Francisco dengan poligon merah menggarisi area dermaga.

  5. Di halamanUnggah sumber data, lakukan tindakan berikut:

    1. Pilih pipa untuk Format data.

    2. Telusuri dan pilih file NotificationHubGeofence.pipe yang Anda buat di langkah sebelumnya.

    3. Pilih tombol Unggah.

      Catatan

      Anda mungkin diminta untuk menentukan kunci baru untuk Kunci Master yang berbeda dari Kunci Kueri. Cukup buat kunci baru melalui dasbor dan refresh halaman unggah sumber data.

  6. Setelah mengunggah file data, Anda harus memastikan bahwa Anda memublikasikan sumber data. Pilih Sumber data ->Kelola Sumber Data seperti yang Anda lakukan sebelumnya.

  7. Pilih sumber data Anda dalam daftar, dan pilih Terbitkan di kolom Tindakan.

    Cuplikan layar Bing Maps Dev Center di halaman Kelola Sumber Data dengan tab Data Geocoded dipilih dan opsi Terbitkan digarisi merah.

  8. Beralihlah ke tab Sumber Data yang Diterbitkan, dan konfirmasi bahwa Anda melihat sumber data Anda dalam daftar.

    Cuplikan layar Bing Maps Dev Center di halaman Kelola Sumber Data dengan tab Sumber Data yang Diterbitkan dipilih.

  9. Pilih Edit. Anda melihat (sekilas) lokasi apa yang Anda perkenalkan dalam data.

    Cuplikan layar halaman Edit data entitas yang memperlihatkan peta amerika serikat bagian barat dan titik magenta di tepi laut San Francisco.

    Pada titik ini, portal tidak menunjukkan batas-batas geofence yang Anda buat - yang Anda butuhkan adalah konfirmasi bahwa lokasi yang ditentukan berada di area yang tepat.

  10. Sekarang Anda memiliki semua persyaratan untuk sumber data. Untuk mendapatkan detail tentang URL permintaan untuk panggilan API, di Bing Maps Dev Center, pilih Sumber data dan pilih Informasi Sumber Data.

    Cuplikan layar Bing Maps Dev Center di halaman informasi Sumber data.

    URL Kueri adalah titik akhir di mana Anda bisa menjalankan kueri untuk memeriksa apakah perangkat saat ini berada dalam batas lokasi atau tidak. Untuk melakukan pemeriksaan ini, Anda cukup menjalankan panggilan GET terhadap URL kueri, dengan parameter berikut ditambahkan:

    ?spatialFilter=intersects(%27POINT%20LONGITUDE%20LATITUDE)%27)&$format=json&key=QUERY_KEY

    Bing Maps secara otomatis melakukan perhitungan untuk melihat apakah perangkat berada dalam geofence. Setelah Anda menjalankan permintaan melalui browser (atau cURL), Anda mendapatkan respons JSON standar:

    Cuplikan layar respons JSON standar.

    Respons ini hanya terjadi ketika titik benar-benar berada dalam batas-batas yang ditentukan. Jika tidak, Anda mendapatkan wadah hasil yang kosong:

    Cuplikan layar respons JSON dengan wadah hasil yang kosong.

Siapkan aplikasi UWP

  1. Di Visual Studio, mulai proyek baru jenis Aplikasi Kosong (Universal Windows) .

    Cuplikan layar kotak dialog Proyek Baru Visual Studio dengan opsi Aplikasi Kosong (Universal Windows Visual C# disorot.

    Setelah pembuatan proyek selesai, Anda harus memiliki harness untuk aplikasi itu sendiri. Sekarang mari kita siapkan semuanya untuk infrastruktur geo-fencing. Karena Anda akan menggunakan layanan Bing untuk solusi ini, ada titik akhir REST API publik yang memungkinkan Anda untuk meminta bingkai lokasi tertentu:

    http://spatial.virtualearth.net/REST/v1/data/

    Tentukan parameter berikut untuk membuatnya berfungsi:

    • ID Sumber Data dan Nama Sumber Data – dalam API Bing Maps, sumber data berisi berbagai metadata yang diwadahi, seperti lokasi dan jam kerja operasi.

    • Nama Entitas – entitas yang ingin Anda gunakan sebagai titik referensi untuk pemberitahuan.

    • Kunci API Bing Maps - Kunci yang Anda peroleh sebelumnya saat Anda membuat akun Bing Dev Center.

      Sekarang setelah Anda menyiapkan sumber data, Anda dapat mulai bekerja pada aplikasi UWP.

  2. Aktifkan layanan lokasi untuk aplikasi Anda. Buka file Package.appxmanifest di Penjelajah Solusi.

    Cuplikan layar Penjelajah Solusi dengan file Package.appxmanifest disorot.

  3. Di tab properti paket yang baru saja dibuka, beralihlah ke tab Kemampuan dan pilih Lokasi.

    Cuplikan layar kotak dialog Properti Paket memperlihatkan tab Kemampuan dengan opsi Lokasi disorot.

  4. Buat folder baru di solusi Anda bernama Core, dan tambahkan file baru di dalamnya, bernama LocationHelper.cs:

    Cuplikan layar Penjelajah Solusi dengan folder Inti baru disorot.

    Kelas LocationHelper memiliki kode untuk mendapatkan lokasi pengguna melalui API sistem:

    using System;
using System.Threading.Tasks;
using Windows.Devices.Geolocation;

namespace NotificationHubs.Geofence.Core
{
    public class LocationHelper
    {
        private static readonly uint AppDesiredAccuracyInMeters = 10;

        public async static Task<Geoposition> GetCurrentLocation()
        {
            var accessStatus = await Geolocator.RequestAccessAsync();
            switch (accessStatus)
            {
                case GeolocationAccessStatus.Allowed:
                    {
                        Geolocator geolocator = new Geolocator { DesiredAccuracyInMeters = AppDesiredAccuracyInMeters };

                        return await geolocator.GetGeopositionAsync();
                    }
                default:
                    {
                        return null;
                    }
            }
        }

    }
}

    Untuk mempelajari lebih lanjut tentang cara mendapatkan lokasi pengguna di aplikasi UWP, lihatMendapatkan lokasi pengguna.

  5. Untuk memeriksa bahwa akuisisi lokasi benar-benar berfungsi, buka sisi kode halaman utama Anda (MainPage.xaml.cs). Buat penanganan aktivitas baru untuk peristiwa Loaded di konstruktor MainPage.

    public MainPage()
{
    this.InitializeComponent();
    this.Loaded += MainPage_Loaded;
}

    Implementasi penanganan aktivitas adalah sebagai berikut:

    private async void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    var location = await LocationHelper.GetCurrentLocation();

    if (location != null)
    {
        Debug.WriteLine(string.Concat(location.Coordinate.Longitude,
            " ", location.Coordinate.Latitude));
    }
}

  6. Jalankan aplikasi dan izinkan untuk mengakses lokasi Anda.

    Cuplikan layar kotak dialog Biarkan Notification Hubs Geo Fence mengakses lokasi Anda.

  7. Setelah aplikasi diluncurkan, Anda seharusnya bisa melihat koordinat di jendela Output :

    Cuplikan layar jendela output menampilkan koordinat.

    Sekarang setelah Anda tahu bahwa akuisisi lokasi berfungsi, Anda bisa menghapus Penanganan aktivitas yang dimuat karena Anda tidak akan menggunakannya lagi.

  8. Langkah selanjutnya adalah mengambil perubahan lokasi. Di dalam kelas LocationHelper, tambahkan penanganan aktivitas untuk PositionChanged:

    geolocator.PositionChanged += Geolocator_PositionChanged;

    Implementasi menunjukkan koordinat lokasi di jendela Output:

    private static async void Geolocator_PositionChanged(Geolocator sender, PositionChangedEventArgs args)
{
    await CoreApplication.MainView.CoreWindow.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
    {
        Debug.WriteLine(string.Concat(args.Position.Coordinate.Longitude, " ", args.Position.Coordinate.Latitude));
    });
}

Siapkan ujung belakang

  1. Unduh Sampel Ujung Belakang .NET dari GitHub.

  2. Setelah pengunduhan selesai, buka folder NotifyUsers, lalu buka file NotifyUsers.sln di Visual Studio.

  3. Set proyek AppBackend sebagai Proyek StartUp dan luncurkan.

    Cuplikan layar menu klik kanan Solusi dengan opsi Set sebagai Proyek StartUp disorot.

    Proyek ini sudah dikonfigurasi untuk mengirim pemberitahuan push ke perangkat target, jadi Anda hanya perlu melakukan dua hal - tentukan string koneksi yang tepat untuk hub pemberitahuan dan tambahkan identifikasi batas untuk mengirim pemberitahuan hanya ketika pengguna berada dalam geofence.

  4. Untuk mengonfigurasi string koneksi, di dalam folder Models buka Notifications.cs. Fungsi NotificationHubClient.CreateClientFromConnectionString harus berisi informasi tentang hub pemberitahuan yang bisa Anda dapatkan di portal Microsoft Azure (lihat di dalam halaman Kebijakan Akses di Pengaturan). Simpan file konfigurasi yang diperbarui.

  5. Buat model untuk hasil API Bing Maps. Cara termudah untuk melakukannya adalah membuka folder Models dan memilih Tambahkan>Kelas. Beri nama GeofenceBoundary.cs. Setelah selesai, salin JSON dari respons API yang Anda dapatkan di bagian pertama. Di Visual Studio, gunakan Edit>Tempel Khusus>Tempel JSON sebagai Kelas.

    Dengan cara ini Anda memastikan bahwa objek dideserialisasi persis seperti yang dimaksudkan. Set kelas yang dihasilkan harus menyerupai kelas berikut:

    namespace AppBackend.Models
{
    public class Rootobject
    {
        public D d { get; set; }
    }

    public class D
    {
        public string __copyright { get; set; }
        public Result[] results { get; set; }
    }

    public class Result
    {
        public __Metadata __metadata { get; set; }
        public string EntityID { get; set; }
        public string Name { get; set; }
        public float Longitude { get; set; }
        public float Latitude { get; set; }
        public string Boundary { get; set; }
        public string Confidence { get; set; }
        public string Locality { get; set; }
        public string AddressLine { get; set; }
        public string AdminDistrict { get; set; }
        public string CountryRegion { get; set; }
        public string PostalCode { get; set; }
    }

    public class __Metadata
    {
        public string uri { get; set; }
    }
}

  6. Berikutnya, buka Controllers>NotificationsController.cs. Perbarui panggilan Pos ke akun untuk bujur dan lintang target. Untuk melakukannya, tambahkan dua string ke tanda tangan fungsi - latitude dan longitude.

    public async Task<HttpResponseMessage> Post(string pns, [FromBody]string message, string to_tag, string latitude, string longitude)

  7. Buat kelas baru dalam proyek yang disebut ApiHelper.cs - Anda menggunakannya untuk menyambungkan ke Bing untuk memeriksa persimpangan batas titik. Terapkan fungsi IsPointWithinBounds seperti yang ditunjukkan dalam kode berikut:

    public class ApiHelper
{
    public static readonly string ApiEndpoint = "{YOUR_QUERY_ENDPOINT}?spatialFilter=intersects(%27POINT%20({0}%20{1})%27)&$format=json&key={2}";
    public static readonly string ApiKey = "{YOUR_API_KEY}";

    public static bool IsPointWithinBounds(string longitude,string latitude)
    {
        var json = new WebClient().DownloadString(string.Format(ApiEndpoint, longitude, latitude, ApiKey));
        var result = JsonConvert.DeserializeObject<Rootobject>(json);
        if (result.d.results != null && result.d.results.Count() > 0)
        {
            return true;
        }
        else
        {
            return false;
        }
    }
}

    Penting

    Pastikan untuk mengganti titik akhir API dengan URL kueri yang Anda peroleh sebelumnya dari Bing Dev Center (hal yang sama berlaku untuk kunci API).

    Jika ada hasil untuk kueri, berarti titik yang ditentukan berada dalam batas-batas dari geofence, sehingga fungsi mengembalikan true. Jika tidak ada hasil, Bing memberi tahu Anda bahwa titik tersebut berada di luar bingkai pencarian, sehingga fungsi mengembalikan false.

  8. Di NotificationsController.cs, buat pemeriksaan tepat sebelum pernyataan switch:

    if (ApiHelper.IsPointWithinBounds(longitude, latitude))
{
    switch (pns.ToLower())
    {
        case "wns":
            //// Windows 8.1 / Windows Phone 8.1
            var toast = @"<toast><visual><binding template=""ToastText01""><text id=""1"">" +
                        "From " + user + ": " + message + "</text></binding></visual></toast>";
            outcome = await Notifications.Instance.Hub.SendWindowsNativeNotificationAsync(toast, userTag);

            // Windows 10 specific Action Center support
            toast = @"<toast><visual><binding template=""ToastGeneric""><text id=""1"">" +
                        "From " + user + ": " + message + "</text></binding></visual></toast>";
            outcome = await Notifications.Instance.Hub.SendWindowsNativeNotificationAsync(toast, userTag);

            break;
    }
}

Uji pemberitahuan push di aplikasi UWP

  1. Di aplikasi UWP, Anda sekarang dapat menguji pemberitahuan. Di dalam kelas LocationHelper, buat fungsi baru – SendLocationToBackend:

    public static async Task SendLocationToBackend(string pns, string userTag, string message, string latitude, string longitude)
{
    var POST_URL = "http://localhost:8741/api/notifications?pns=" +
        pns + "&to_tag=" + userTag + "&latitude=" + latitude + "&longitude=" + longitude;

    using (var httpClient = new HttpClient())
    {
        try
        {
            await httpClient.PostAsync(POST_URL, new StringContent("\"" + message + "\"",
                System.Text.Encoding.UTF8, "application/json"));
        }
        catch (Exception ex)
        {
            Debug.WriteLine(ex.Message);
        }
    }
}

    Catatan

    Set POST_URL ke lokasi aplikasi web yang Anda sebarkan. Untuk saat ini, tidak apa-apa untuk menjalankannya secara lokal, tetapi ketika Anda bekerja pada penyebaran versi publik, Anda perlu menghostingnya dengan penyedia eksternal.

  2. Daftarkan aplikasi UWP untuk pemberitahuan push. Di Visual Studio, pilih Proyek>Simpan>Kaitkan aplikasi dengan penyimpanan.

    Cuplikan layar menu klik kanan Solusi dengan Simpan dan Kaitkan Aplikasi dengan opsi Simpan disorot.

  3. Setelah masuk ke akun pengembang, pastikan Anda memilih aplikasi yang sudah ada atau membuat aplikasi baru dan mengaitkan paket dengannya.

  4. Buka Dev Center dan buka aplikasi yang Anda buat. Pilih Layanan>Pemberitahuan Push>situs Layanan Langsung.

    Cuplikan layar Windows Dev Center menampilkan halaman pemberitahuan Push dengan situs Layanan Langsung disorot.

  5. Di situs, perhatikan Rahasia Aplikasi dan SID Paket. Anda memerlukan keduanya di portal Microsoft Azure – buka hub pemberitahuan Anda, pilih Pengaturan>Notification Services>Windows (WNS) dan masukkan informasi di bidang yang diperlukan.

    Cuplikan layar memperlihatkan halaman Pengaturan dengan opsi Notification Services dan Windows (WNS) yang disorot dan nilai SID Paket dan Kunci Keamanan yang diisi.

  6. Pilih Simpan.

  7. Buka Referensi di Penjelajah Solusi dan pilih Kelola Paket NuGet. Tambahkan referensi ke pustaka terkelola Microsoft Azure Service Bus - cukup cari WindowsAzure.Messaging.Managed dan tambahkan ke proyek Anda.

    Cuplikan layar kotak dialog Kelola Paket Nuget dengan paket WindowsAzure.Messaging.Managed disorot.

  8. Untuk tujuan pengujian, buat penanganan aktivitas MainPage_Loaded sekali lagi, dan tambahkan cuplikan kode ini ke dalamnya:

    var channel = await PushNotificationChannelManager.CreatePushNotificationChannelForApplicationAsync();

var hub = new NotificationHub("HUB_NAME", "HUB_LISTEN_CONNECTION_STRING");
var result = await hub.RegisterNativeAsync(channel.Uri);

// Displays the registration ID so you know it was successful
if (result.RegistrationId != null)
{
    Debug.WriteLine("Reg successful.");
}

    Kode mendaftarkan aplikasi dengan hub pemberitahuan. Anda siap untuk melanjutkan!

  9. Dalam LocationHelper, di dalam penanganan aktivitas Geolocator_PositionChanged, Anda dapat menambahkan sepotong kode uji yang secara paksa menempatkan lokasi di dalam geofence:

    await LocationHelper.SendLocationToBackend("wns", "TEST_USER", "TEST", "37.7746", "-122.3858");

  10. Karena Anda tidak melewati koordinat nyata (yang mungkin tidak berada dalam batas saat ini) dan menggunakan nilai pengujian yang sudah ditentukan sebelumnya, Anda akan melihat pemberitahuan muncul saat pembaruan:

    Cuplikan layar desktop Windows yang menampilkan pesan UJI.

Langkah berikutnya

Ada beberapa langkah yang mungkin perlu Anda lakukan untuk membuat solusi siap produksi.

  1. Pertama, Anda perlu memastikan bahwa geofence dinamis. Ini membutuhkan beberapa pekerjaan ekstra dengan API Bing untuk dapat mengunggah batas baru dalam sumber data yang ada. Untuk informasi selengkapnya, lihat dokumentasi API Bing Spatial Data Services.
  2. Kedua, saat Anda bekerja untuk memastikan bahwa pengiriman dilakukan kepada peserta yang tepat, Anda mungkin ingin menargetkannya melalui pemberian tag.

Solusi yang ditunjukkan dalam tutorial ini menjelaskan skenario di mana Anda mungkin memiliki berbagai platform target, sehingga tidak membatasi geofencing sebatas kemampuan spesifik sistem. Walaupun demikian, Universal Windows Platform menawarkan kemampuan untuk mendeteksi geofence yang langsung siap pakai.