Zelfstudie: Locatiegebaseerde pushmeldingen verzenden met Azure Notification Hubs en ruimtelijke Bing-gegevensTutorial: Push location-based notifications with Azure Notification Hubs and Bing Spatial Data

In deze zelfstudie leert u hoe u locatiegebaseerde pushmeldingen kunt verzenden met Azure Notification Hubs en ruimtelijke Bing-gegevens.In this tutorial, you learn how to deliver location-based push notifications with Azure Notification Hubs and Bing Spatial Data.

In deze zelfstudie voert u de volgende stappen uit:In this tutorial, you take the following steps:

  • De gegevensbron instellenSet up the data source
  • De UWP-toepassing instellenSet up the UWP application
  • De back-end instellenSet up the backend
  • Pushmeldingen testen in de UWP-app (Universal Windows Platform)Test push notifications in the Universal Windows Platform (UWP) app

VereistenPrerequisites

De gegevensbron instellenSet up the data source

  1. Meld u aan bij Bing Maps Dev Center.Log in to the Bing Maps Dev Center.

  2. Selecteer Data sources in de bovenste navigatiebalk en selecteer vervolgens Manage Data Sources.In the top navigation bar, select Data sources, and select Manage Data Sources.

  3. Als u nog geen gegevensbron hebt, ziet u een koppeling voor het maken van een gegevensbron.If you don't have an existing data source, you see a link to create a data source. Selecteer Upload data as a data source.Select Upload data as a data source. U kunt ook het menu Data sources > Upload Data gebruiken.You can also use Data sources > Upload data menu.

  4. Maak een bestand NotificationHubsGeofence.pipe op de harde schijf met de volgende inhoud: In deze zelfstudie gebruikt u een voorbeeldbestand op basis van een pipe waarmee een gebied van de kust van San Francisco wordt afgebakend:Create a file NotificationHubsGeofence.pipe on your hard drive with the following content: In this tutorial, you use a sample pipe-based file that frames an area of the San Francisco waterfront:

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

    Het pipe-bestand vertegenwoordigt deze entiteit:The pipe file represents this entity:

  5. Voer op de pagina Upload a data source de volgende acties uit:In the Upload a data source page, do the following actions:

    1. Selecteer pipe bij Data format.Select pipe for Data format.

    2. Bladeren naar en selecteer het bestand NotificationHubGeofence.pipe dat u in de vorige stap hebt gemaakt.Browse and select the NotificationHubGeofence.pipe file that you created in the previous step.

    3. Selecteer de knop Upload.Select Upload button.

      Notitie

      Mogelijk wordt u gevraagd om een nieuwe sleutel op te geven als hoofdsleutel; deze verschilt van de querysleutel.You might be prompted to specify a new key for the Master Key that is different from the Query Key. Maak een nieuwe sleutel via het dashboard en vernieuw de pagina voor het uploaden van gegevensbronnen.Simply create a new key through the dashboard and refresh the data source upload page.

  6. Wanneer u het gegevensbestand hebt geüpload, moet u niet vergeten de gegevensbron te publiceren.Once you upload the data file, you need to make sure that you publish the data source. Selecteer opnieuw Data sources -> Manage Data Sources.Select Data sources -> Manage Data Sources like you did before.

  7. Selecteer de gegevensbron in de lijst en kies Publish in de kolom Actions.Select your data source in the list, and choose Publish in the Actions column.

  8. Ga naar het tabblad Published Data Sources en controleer of uw gegevensbron in de lijst staat.Switch to the Published Data Sources tab, and confirm that you see your data source in the list.

  9. Selecteer Bewerken.Select Edit. U ziet (in een oogopslag) welke locaties u met de gegevens hebt geïntroduceerd.You see (at a glance) what locations you introduced in the data.

    Op dit moment worden in de portal de grenzen van de geofence die u hebt gemaakt, niet weergegeven. U hoeft alleen nog te bevestigen dat de opgegeven locatie zich in de juiste omgeving bevindt.At this point, the portal does not show you the boundaries for the geofence that you created – all you need is confirmation that the location specified is in the right vicinity.

  10. U hebt nu voldaan aan alle vereisten voor de gegevensbron.Now you have all the requirements for the data source. Voor meer informatie over de aanvraag-URL voor de API-aanroep kiest u in het Bing Kaarten-ontwikkelaarscentrum de optie Gegevensbronnen en selecteert u Gegevensbroninformatie.To get the details on the request URL for the API call, in the Bing Maps Dev Center, choose Data sources and select Data Source Information.

    De waarde bij Query URL is het eindpunt waarop u query’s kunt uitvoeren om te controleren of het apparaat zich momenteel binnen de grenzen van een locatie bevindt of niet.The Query URL is the endpoint against which you can execute queries to check whether the device is currently within the boundaries of a location or not. Als u deze controle wilt uitvoeren, moet u een GET-aanroep uitvoeren voor de query-URL, waarbij u de volgende parameters toevoegt:To perform this check, you just execute a GET call against the query URL, with the following parameters appended:

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

    Bing Kaarten voert automatisch de berekeningen uit om te zien of het apparaat zich binnen de geofence bevindt.Bing Maps automatically performs the calculations to see whether the device is within the geofence. Wanneer u de aanvraag hebt uitgevoerd via een browser (of cURL), ontvangt u een standaard JSON-antwoord:Once you execute the request through a browser (or cURL), you get a standard JSON response:

    Dit antwoord ontvangt u alleen als het punt zich binnen de opgegeven grenzen bevindt.This response only happens when the point is actually within the designated boundaries. Als dat niet het geval is, ontvangt u een lege bucket results:If it is not, you get an empty results bucket:

De UWP-toepassing instellenSet up the UWP application

  1. Open in Visual Studio een nieuw project van het type Lege app (Universeel Windows).In Visual Studio, start a new project of type Blank App (Universal Windows).

    Wanneer het maken van het project is voltooid, beschikt u over de basis voor de app.Once the project creation is complete, you should have the harness for the app itself. U gaat nu alles instellen voor de infrastructuur met geofencing.Now let’s set up everything for the geo-fencing infrastructure. Omdat u Bing-services gaat gebruiken voor deze oplossing, is er een openbaar REST-API-eindpunt waarmee query’s kunnen worden uitgevoerd op specifieke locatiekaders:Because you are going to use Bing services for this solution, there is a public REST API endpoint that allows you to query specific location frames:

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

    Geef de volgende parameters op om hiermee aan de slag te gaan:Specify the following parameters to get it working:

    • De gegevensbron-id en de gegevensbronnaam. In de Bing Kaarten-API bevatten gegevensbronnen verschillende gerangschikte metagegevens, zoals locaties en bedrijfsuren.Data Source ID and Data Source Name – in Bing Maps API, data sources contain various bucketed metadata, such as locations and business hours of operation.

    • Naam van de entiteit: de entiteit die u als verwijzingspunt wilt gebruiken voor de melding.Entity Name – the entity you want to use as a reference point for the notification.

    • Bing Maps API Key: dit is de sleutel die u eerder hebt verkregen tijdens het maken van het Bing Dev Center-account.Bing Maps API Key – The key that you obtained earlier when you created the Bing Dev Center account.

      Nu de gegevensbron klaar is, kunt u aan de slag met de UWP-toepassing.Now that you have the data source ready, you can start working on the UWP application.

  2. Schakel locatieservices in voor uw toepassing.Enable location services for your application. Open het bestand Package.appxmanifest in Solution Explorer.Open the Package.appxmanifest file in Solution Explorer.

  3. Ga in het venster met eigenschappen van het pakket naar het tabblad Capabilities en selecteer Location.In the package properties tab that just opened, switch to the Capabilities tab, and select Location.

  4. Maak een nieuwe map in de oplossing met de naam Core. Voeg er een nieuw bestand aan toe met de naam LocationHelper.cs:Create a new folder in your solution named Core, and add a new file within it, named LocationHelper.cs:

    De klasse LocationHelper bevat code voor het opvragen van de locatie van de gebruiker via de systeem-API:The LocationHelper class has code to obtain the user location through the system API:

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

    Zie Get the user's location (Locatie van de gebruiker opvragen) voor meer informatie over het opvragen van de locatie van de gebruiker in UWP-apps.To learn more about getting the user’s location in UWP apps, seeGet the user's location.

  5. Als u wilt controleren of het ophalen van de locatie werkt, opent u de codezijde van de hoofdpagina (MainPage.xaml.cs).To check that the location acquisition is actually working, open the code side of your main page (MainPage.xaml.cs). Maak een nieuwe gebeurtenis-handler voor de gebeurtenis Loaded in de constructor MainPage.Create a new event handler for the Loaded event in the MainPage constructor.

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

    U implementeert de gebeurtenis-handler als volgt:The implementation of the event handler is as follows:

    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. Voer de toepassing uit en geef deze toegang tot uw locatie.Run the application and allow it to access your location.

  7. Wanneer de toepassing is gestart, ziet u de coördinaten in het venster Uitvoer:Once the application launches, you should be able to see the coordinates in the Output window:

    U weet nu dat de locatie kan worden opgehaald. De gebeurtenis-handler Loaded kunt u daarom desgewenst verwijderen, aangezien u deze toch niet meer nodig hebt.Now you know that location acquisition works, you can remove the Loaded event handler if you like because you won’t be using it anymore.

  8. De volgende stap is het vastleggen van locatiewijzigingen.The next step is to capture location changes. Voeg in de klasse LocationHelper de gebeurtenis-handler voor PositionChanged toe:In the LocationHelper class, add the event handler for PositionChanged:

    geolocator.PositionChanged += Geolocator_PositionChanged;
    

    De implementatie toont de locatiecoördinaten in het venster Output:The implementation shows the location coordinates in the Output window:

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

De back-end instellenSet up the backend

  1. Download het .NET-back-endvoorbeeld via GitHub.Download the .NET Backend Sample from GitHub.

  2. Wanneer het downloaden is voltooid, opent u de map NotifyUsers en opent u vervolgens het bestand NotifyUsers.sln in Visual Studio.Once the download completes, open the NotifyUsers folder, and then open NotifyUsers.sln file in Visual Studio.

  3. Stel het project AppBackend in als StartUp Project open het.Set the AppBackend project as the StartUp Project and launch it.

    Het project is al geconfigureerd voor het versturen van pushmeldingen naar doelapparaten. U hoeft dus nog maar twee dingen te doen: de juiste verbindingsreeks opgeven voor de Notification Hub en grensidentificatie toevoegen zodat de melding alleen wordt verzonden wanneer de gebruiker zich binnen de geofence bevindt.The project is already configured to send push notifications to target devices, so you need to do only two things – specify right connection string for the notification hub and add boundary identification to send the notification only when the user is within the geofence.

  4. Als u de verbindingsreeks wilt configureren, opent u Notifications.cs in de map Models.To configure the connection string, in the Models folder open Notifications.cs. De functie NotificationHubClient.CreateClientFromConnectionString bevat de informatie over de Notification Hub die u ook kunt inzien in Azure Portal (op de pagina Toegangsbeleid in Instellingen).The NotificationHubClient.CreateClientFromConnectionString function should contain the information about your notification hub that you can get in the Azure portal (look inside the Access Policies page in Settings). Sla het bijgewerkte configuratiebestand op.Save the updated configuration file.

  5. Maak een model voor het Bing Kaarten-API-resultaat.Create a model for the Bing Maps API result. Dat kunt u het eenvoudigst doen door de map Models te openen en op Add > Class te klikken.The easiest way to do that is to open the Models folder and choose Add > Class. Noem deze GeofenceBoundary.cs.Name it GeofenceBoundary.cs. Vervolgens kopieert u de JSON uit het API-antwoord dat u in de eerste sectie hebt verkregen.Once done, copy the JSON from the API response that you got in the first section. Gebruik in Visual Studio Edit > Paste Special > Paste JSON as Classes.In Visual Studio, use Edit > Paste Special > Paste JSON as Classes.

    Zo zorgt u ervoor dat het object op de juiste manier wordt gedeserialiseerd.This way you ensure that the object is deserialized exactly as it was intended. De resulterende klasseset moet er ongeveer als volgt uitzien:Your resulting class set should resemble the following class:

    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. Open vervolgens Controllers > NotificationsController.cs.Next, open Controllers > NotificationsController.cs. Werk de POST-aanroep bij om rekening te houden met de lengte- en breedtegraad van de bestemming.Update the Post call to account for the target longitude and latitude. Dit doet u door de tekenreeksen latitude en longitude toe te voegen aan de functiehandtekening.To do so, add two strings to the function signature – latitude and longitude.

    public async Task<HttpResponseMessage> Post(string pns, [FromBody]string message, string to_tag, string latitude, string longitude)
    
  7. Maak een nieuwe klasse in het project met de naam ApiHelper.cs. Deze klasse gebruikt u om verbinding te maken met Bing om te controleren op grensoverschrijdingen.Create a new class within the project called ApiHelper.cs – you use it to connect to Bing to check point boundary intersections. Implementeer de functie IsPointWithinBounds zoals wordt weergegeven in de volgende code:Implement a IsPointWithinBounds function as shown in the following code:

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

    Belangrijk

    Zorg ervoor dat u het API-eindpunt vervangt door de query-URL die u eerder hebt verkregen via het Bing Dev Center (dit geldt ook voor de API-sleutel).Make sure to substitute the API endpoint with the query URL that you obtained earlier from the Bing Dev Center (same applies to the API key).

    Als er resultaten zijn op basis van de query, bevindt het opgegeven punt zich binnen de grenzen van de geofence. In dat geval wordt true geretourneerd.If there are results to the query, that means that the specified point is within the boundaries of the geofence, so the function returns true. Als er geen resultaten zijn, wordt via Bing een melding weergegeven dat het punt zich buiten het kader bevindt, waardoor false wordt geretourneerd.If there are no results, Bing is telling you that the point is outside the lookup frame, so the function returns false.

  8. Voeg in NotificationsController.cs een controle toe vóór de switch-instructie:In NotificationsController.cs, create a check right before the switch statement:

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

Pushmeldingen testen in de UWP-appTest push notifications in the UWP app

  1. In de UWP-app moet u nu meldingen kunnen testen.In the UWP app, you should now be able to test notifications. Maak in de klasse LocationHelper een nieuwe functie (SendLocationToBackend):Within the LocationHelper class, create a new function – 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);
            }
        }
    }
    

    Notitie

    Stel POST_URL in op de locatie van de geïmplementeerde webtoepassing.Set the POST_URL to the location of your deployed web application. U kunt de toepassing nu lokaal uitvoeren. Als u echter een openbare versie wilt implementeren, moet u deze hosten via een externe provider.For now, it’s OK to run it locally, but as you work on deploying a public version, you need to host it with an external provider.

  2. Registreer de UWP-app voor pushmeldingen.Register the UWP app for push notifications. In Visual Studio kiest u Project > Store > Associate app with the store.In Visual Studio, choose Project > Store > Associate app with the store.

  3. Wanneer u zich hebt aangemeld bij uw ontwikkelaarsaccount, selecteert u een bestaande app of maakt u een nieuwe app. Koppel het pakket daaraan.Once you sign in to your developer account, make sure you select an existing app or create a new one and associate the package with it.

  4. Ga naar het Dev Center en open de app die u hebt gemaakt.Go to the Dev Center and open the app that you created. Kies Services > Push Notifications > Live Services site.Choose Services > Push Notifications > Live Services site.

  5. Op de site bekijkt u het toepassingsgeheim en de pakket-SID.On the site, take note of the Application Secret and the Package SID. U hebt deze allebei nodig in Azure Portal. Open de Notification Hub, kies Instellingen > Notification Services > Windows (WNS) en voer de gegevens in de vereiste velden in.You need both in the Azure portal – open your notification hub, choose Settings > Notification Services > Windows (WNS) and enter the information in the required fields.

  6. Kies Opslaan.Choose Save.

  7. Open Verwijzingen in Solution Explorer en selecteer NuGet-pakketten beheren.Open References in Solution Explorer and select Manage NuGet Packages. Voeg een verwijzing naar de beheerde Microsoft Azure Service Bus-bibliotheek toe. Zoek hiervoor naar WindowsAzure.Messaging.Managed en voeg deze vermelding toe aan uw project.Add a reference to the Microsoft Azure Service Bus managed library – simply search for WindowsAzure.Messaging.Managed and add it to your project.

  8. Voor testdoeleinden maakt u de gebeurtenis-handler voor MainPage_Loaded opnieuw. Voeg er nu dit codefragment aan toe:For testing purposes, create the MainPage_Loaded event handler once again, and add this code snippet to it:

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

    Hiermee wordt de app geregistreerd bij de Notification Hub.The code registers the app with the notification hub. U bent er nu klaar voor!You are ready to go!

  9. Voeg in LocationHelper, binnen de handler Geolocator_PositionChanged, een testcodefragment toe waardoor de locatie geforceerd in de geofence wordt geplaatst:In LocationHelper, inside the Geolocator_PositionChanged handler, you can add a piece of test code that forcefully puts the location inside the geofence:

    await LocationHelper.SendLocationToBackend("wns", "TEST_USER", "TEST", "37.7746", "-122.3858");
    
  10. Omdat u niet de echte coördinaten doorgeeft (die misschien niet binnen de grenzen liggen op dat moment) en omdat u vooraf gedefinieerde testwaarden gebruikt, wordt tijdens het bijwerken een melding weergegeven:Because you are not passing the real coordinates (which might not be within the boundaries at the moment) and are using predefined test values, you see a notification show up on update:

Volgende stappenNext steps

Er zijn een aantal stappen die u mogelijk moet uitvoeren om ervoor te zorgen dat de oplossing klaar is voor productie.There are a couple of steps that you might need to follow to make the solution production-ready.

  1. U moet er ten eerste voor zorgen dat de geofences dynamisch zijn.First, you need to ensure that geofences are dynamic. Hiervoor moet u extra bewerkingen uitvoeren met de Bing-API, zodat u nieuwe grenzen kunt uploaden in de bestaande gegevensbron.It requires some extra work with the Bing API to be able to upload new boundaries within the existing data source. Zie voor meer informatie de Engelstalige documentatie over de Bing Spatial Data Services-API.For more information, see Bing Spatial Data Services API documentation.
  2. Ten tweede is het raadzaam de geofences met tags als doel te definiëren omdat u er zeker van wilt zijn dat er aan de juiste deelnemers wordt geleverd.Second, as you are working to ensure that the delivery is done to the right participants, you might want to target them via tagging.

In de oplossing in deze zelfstudie wordt een scenario beschreven waarin u mogelijk veel verschillende doelplatforms hebt; daarom hebben we geofencing niet beperkt tot systeemspecifieke mogelijkheden.The solution shown in this tutorial describes a scenario in which you might have a wide variety of target platforms, so it does not limit the geofencing to system-specific capabilities. Los daarvan is het wel zo dat het universele Windows-platform direct na aanschaf mogelijkheden biedt voor het detecteren van geofences.That said, the Universal Windows Platform offers capabilities to detect geofences right out-of-the-box.