Partager via

Migrer des applications Bing Maps Enterprise vers Azure Maps avec GitHub Copilot

GitHub Copilot est un assistant de code optimisé pour l’IA qui vous aide à écrire plus rapidement du code. GitHub Copilot peut générer des extraits de code depuis vos invites et suggérer des complétions pour votre code existant. GitHub Copilot peut également apprendre à partir de votre code et de vos préférences et s’adapter à votre style et vos besoins. Bien que GitHub Copilot ne puisse pas convertir directement votre code du Kit de développement logiciel (SDK) web Bing Maps vers le SDK web Azure Maps ou des API Bing Maps vers des API Azure Maps, cet article de procédure vous montre comment utiliser GitHub Copilot pour générer du code pour vos applications Azure Maps. Cela peut être particulièrement utile si vous migrez de Bing Maps pour Entreprise vers Azure Maps.

Conditions préalables

Conseil 1 : Écrivez vos instructions dans des phrases claires

La première étape pour utiliser GitHub Copilot consiste à écrire vos invites dans des phrases simples. Une invite est une brève description de ce que vous souhaitez faire ou obtenir avec votre code. Par exemple, si vous souhaitez afficher un fichier GeoJSON avec le Kit de développement logiciel (SDK) web Azure Maps, vous pouvez écrire une invite comme suit :

Écrivez un programme HTML à l’aide d’Azure Maps WebSDK v3 pour afficher les fonctionnalités GeoJSON dans un SymbolLayer à partir de l’URL suivante : https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson

GitHub Copilot génère ensuite un extrait de code qui correspond à votre invite, à l’aide du langage et de l’infrastructure de votre choix. Par exemple, si vous utilisez HTML et JavaScript, GitHub Copilot peut générer un extrait de code comme suit :

<!DOCTYPE html>
<html>
<head>
    <title>Earthquake Data</title>
    <script src='https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js'></script>
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
    <style>
        #myMap { width: 100%; height: 500px; }
    </style>
</head>
<body>
    <div id="myMap"></div>
    <script>
        var map = new atlas.Map("myMap", {
            center: [-100, 39],
            zoom: 3,
            authOptions: {
                authType: 'subscriptionKey',
                subscriptionKey: 'Your Azure Maps Key'
            }
        });
 
        map.events.add('ready', function() {
            fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson')
            .then(response => response.json())
            .then(data => {
                var dataSource = new atlas.source.DataSource();
                map.sources.add(dataSource);
                dataSource.add(data);
 
                map.layers.add(new atlas.layer.SymbolLayer(dataSource));
            });
        });
    </script>
</body>
</html>

Capture d’écran d’azure Maps montrant l’Amérique du Nord avec des broches bleues à des emplacements de tremblement de terre.

Comme vous pouvez le voir, GitHub Copilot peut générer un extrait de code complet et fonctionnel à partir d’une invite simple et claire. Vous pouvez ensuite copier et coller l’extrait de code dans votre éditeur de code ou le modifier comme vous le souhaitez. Vous pouvez également demander à GitHub Copilot de générer d’autres extraits de code, ou de terminer ou suggérer des modifications à votre code existant.

L’avantage de rédiger vos invites dans des phrases claires, plutôt que d’utiliser des extraits de code de votre application Bing Maps for Enterprise, est que vous pouvez vous concentrer sur la logique et les fonctionnalités de votre application, ce qui permet à GitHub Copilot de comprendre plus précisément votre objectif. Vous pouvez également éviter de copier et coller des extraits de code susceptibles d’être ambigus et susceptibles de confondre GitHub Copilot.

Remarque

Il est possible que vous obteniez des résultats différents chaque fois que vous exécutez la même invite, et vous pouvez parfois rencontrer des inexactitudes, comme une méthode qui n’existe pas. Veillez à vérifier la console du navigateur pour connaître les erreurs et ajuster le code si nécessaire.

Conseil 2 : Fournir des instructions détaillées et pas à pas

Le deuxième conseil pour l’utilisation de GitHub Copilot consiste à fournir des instructions détaillées et pas à pas. Imaginez que vous êtes un responsable de produit écrivant des spécifications fonctionnelles pour votre produit. Par exemple, si vous souhaitez géocoder l’adresse, « 1 Microsoft Way, Redmond, WA », et ajouter un marqueur sur la carte, vous pouvez écrire un message comme suit :

Écrivez un programme HTML à l’aide du Kit de développement logiciel (SDK) web Azure Maps v3 pour effectuer une requête de géocode pour les coordonnées de « 1 Microsoft Way, Redmond, WA », puis placez un marqueur à cet emplacement.

Étape 1. Utilisez le point de terminaison de l’API Geocode : <https://atlas.microsoft.com/geocode?api-version=2023-06-01&subscription-key=${subscriptionKey}&query=${query}>. Un exemple de réponse est fourni pour référence.

{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"address":{"countryRegion":{"name":"United States"},"adminDistricts":[{"shortName":"WA"},{"shortName":"King County"}],"formattedAddress":"15127 NE 24th St, Redmond, WA 98052","locality":"Redmond","postalCode":"98052","addressLine":"15127 NE 24th St"},"type":"Address","confidence":"High","matchCodes":["Good"],"geocodePoints":[{"geometry":{"type":"Point","coordinates":[-122.138681,47.630358]},"calculationMethod":"Rooftop","usageTypes":["Display"]},{"geometry":{"type":"Point","coordinates":[-122.1386787,47.6302179]},"calculationMethod":"Rooftop","usageTypes":["Route"]}]},"geometry":{"type":"Point","coordinates":[-122.138681,47.630358]},"bbox":[-122.14632282407,47.626495282429325,-122.13103917593001,47.63422071757068]}]}

Étape 2. Effectuez une requête d’API Geocode pour les coordonnées de « 1 Microsoft Way, Redmond, WA ».

Étape 3. Utilisez Le WebSDK Azure Maps pour afficher une carte, la centrer sur les coordonnées obtenues à partir de la réponse de l’API Geocode.

Étape 4. Attendez que les ressources cartographiques soient prêtes.

Étape 5. Placez un marqueur sur la carte aux coordonnées obtenues à partir de la réponse de l’API.

GitHub Copilot génère un extrait de code qui correspond à vos instructions, à l’aide de l’API Geocode Azure Maps et du Kit de développement logiciel (SDK) web Azure Maps.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Azure Maps Geocode and Pushpin Example</title>
    <link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" rel="stylesheet" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
    <style>
        #map {
            width: 100%;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        var subscriptionKey = 'YOUR_SUBSCRIPTION_KEY'; // Replace with your Azure Maps subscription key
        var query = '1 Microsoft Way, Redmond';
 
        // Make Geocode API request
        fetch(`https://atlas.microsoft.com/geocode?api-version=2023-06-01&subscription-key=${subscriptionKey}&query=${query}`)
            .then(response => response.json())
            .then(data => {
                // Extract coordinates from the API response
                var coordinates = data.features[0].geometry.coordinates;
 
                // Initialize map
                var map = new atlas.Map('map', {
                    center: coordinates,
                    zoom: 14,
                    view: 'Auto',
                    authOptions: {
                        authType: 'subscriptionKey',
                        subscriptionKey: subscriptionKey
                    }
                });
 
                // Wait until map resources are ready
                map.events.add('ready', function () {
                    // Add pushpin to the map
                    var pushpin = new atlas.HtmlMarker({
                        position: coordinates,
                        htmlContent: '<div style="background-color: #286090; color: #fff; padding: 5px;">1 Microsoft Way</div>'
                    });
                    map.markers.add(pushpin);
                });
            })
            .catch(error => console.error('Error:', error));
    </script>
</body>
</html>

Capture d’écran montrant les résultats de l’exemple de code précédent, une carte de Redmond Washington avec une punaise étiquetée 1 Microsoft Way.

La décomposition d’une invite complexe en étapes individuelles facilite la compréhension et le suivi de GitHub Copilot, ce qui vous permet de mieux contrôler le flux de code.

Remarque

Pour créer des invites efficaces, vous devez les personnaliser pour différents scénarios. Affiner l’invite de manière itérative vous permet d’obtenir le meilleur résultat possible.

Conseil 3 : Inclure des exemples pour les entrées de demande d’API et les sorties de réponse

Le troisième conseil pour l’utilisation de GitHub Copilot consiste à inclure des exemples d’entrées et de sorties d’API. Fournir des exemples peut améliorer la capacité de Copilot à générer des extraits de code précis et pertinents en lui permettant d’apprendre à gérer les données.

Pour obtenir des exemples d’entrées et de sorties pour les API Azure Maps, vous pouvez consulter la documentation de l’API REST Azure Maps. Par exemple, vous pouvez voir un exemple de corps de requête et de réponse pour l’API Azure Maps Geocoding Batch et l’API Directions Azure Maps. Si vous souhaitez créer une application pour le routage entre deux lieux en utilisant Azure Maps, vous pouvez écrire une invite telle que :

Implémentez un programme HTML à l’aide du Kit de développement logiciel (SDK) web Azure Maps v3 pour afficher les itinéraires des emplacements spécifiés par l’utilisateur.

Étape 1. Créez deux zones d’entrée pour permettre aux utilisateurs d’entrer les adresses de début et de fin de rue. Ajoutez un bouton Envoyer pour passer à l’étape suivante.

Étape 2. Utilisez l’API POST Geocode Batch : ;https://atlas.microsoft.com/geocode:batch?api-version=2023-06-01& subscription-key=${subscriptionKey} pour rechercher les coordonnées des points de début et de fin.

Exemple de corps de requête :

{ « batchItems » : [ { « addressLine » : « 1 Microsoft Way, Redmond, WA » }, { « addressLine » : « 400 Broad St, Seattle, WA » } ] }

Exemple de réponse :

{"batchItems":[{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-122.128265,47.639385]},"bbox":[-122.13590814413995,47.63552228242932,-122.12062185586005,47.643247717570674],"properties":{"type":"Address","confidence":"Medium","matchCodes":["Good"],"geocodePoints":[{"calculationMethod":"Rooftop","usageTypes":["Display"],"geometry":{"type":"Point","coordinates":[-122.128265,47.639385]}},{"calculationMethod":"Rooftop","usageTypes":["Route"],"geometry":{"type":"Point","coordinates":[-122.1271239,47.6385519]}}],"address":{"addressLine":"1 Microsoft Way","postalCode":"98052","locality":"Redmond","formattedAddress":"1 Microsoft Way, Redmond, WA 98052","countryRegion":{"name":"United States","ISO":"US"},"adminDistricts":[{"shortName":"WA"},{"shortName":"King County"}]}}}]},{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-122.349309,47.620498]},"bbox":[-122.35694938292329,47.61663528242932,-122.34166861707672,47.624360717570674],"properties":{"type":"Address","confidence":"High","matchCodes":["Good"],"geocodePoints":[{"calculationMethod":"Rooftop","usageTypes":["Display"],"geometry":{"type":"Point","coordinates":[-122.349309,47.620498]}},{"calculationMethod":"Rooftop","usageTypes":["Route"],"geometry":{"type":"Point","coordinates":[-122.3485587,47.6200534]}}],"address":{"addressLine":"400 Broad St","postalCode":"98109","neighborhood":"Queen Anne","locality":"Seattle","formattedAddress":"400 Broad St, Seattle, WA 98109","countryRegion":{"name":"United States","ISO":"US"},"adminDistricts":[{"shortName":"WA"},{"shortName":"King County"}]}}}]}],"summary":{"successfulRequests":2,"totalRequests":2}}

Étape 3. Utilisez Azure Maps WebSDK pour afficher une carte.

Étape 4. Attendez que les ressources cartographiques soient prêtes.

Étape 5. Créez et ajoutez une source de données à la carte.

Étape 6. Créez et ajoutez un SymbolLayer à la carte.

Étape 7. Créez et ajoutez un LineLayer à la carte.

Étape 8 : Utilisez l’API Route POST : https://atlas.microsoft.com/route/directions?api-version=2025-01-01&subscription-key=${subscriptionKey} pour rechercher l’itinéraire entre les points de début et de fin. Ajoutez la réponse GeoJSON à la DataSource et ajustez l’appareil photo de la carte en fonction du cadre englobant de la réponse.

Exemple de corps de requête :

{ "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "coordinates": [ -122.1271239, 47.6385519 ], "type": "Point" }, "properties": { "pointIndex": 0, "pointType": "waypoint" } }, { "type": "Feature", "geometry": { "coordinates": [ -122.3485587, 47.6200534 ], "type": "Point" }, "properties": { "pointIndex": 1, "pointType": "waypoint" } } ], "routeOutputOptions": [ "routePath" ],

« travelMode » : « driving » }

Exemple de réponse :

{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-122.127124,47.638552]},"properties":{"routePathPoint":{"legIndex":0,"pointIndex":0},"order":{"inputIndex":0},"type":"Waypoint"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-122.348533,47.620073]},"properties":{"routePathPoint":{"legIndex":0,"pointIndex":113},"order":{"inputIndex":1},"type":"Waypoint"}},{"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[-122.127123,47.638551],[-122.127236,47.638786],[-122.127778,47.639321],[-122.127588,47.639453],[-122.126935,47.639906],[-122.128569,47.64092],[-122.128269,47.641159],[-122.128004,47.641435],[-122.128064,47.641947],[-122.127464,47.642446],[-122.127433,47.642452],[-122.127358,47.642589],[-122.127333,47.642706],[-122.127044,47.643317],[-122.127,47.646063],[-122.12707,47.646064],[-122.1355,47.646072],[-122.135465,47.645943],[-122.134932,47.644569],[-122.134655,47.643384],[-122.134688,47.64219],[-122.134994,47.640816],[-122.135396,47.640114],[-122.135694,47.639576],[-122.136586,47.638589],[-122.138502,47.637193],[-122.14906,47.631126],[-122.150578,47.630481],[-122.152672,47.629904],[-122.15453,47.629628],[-122.156691,47.629525],[-122.163925,47.630213],[-122.168574,47.629931],[-122.170237,47.629981],[-122.171667,47.630214],[-122.179348,47.631954],[-122.181849,47.632144],[-122.185924,47.632041],[-122.186778,47.632117],[-122.187833,47.632345],[-122.188876,47.632739],[-122.190017,47.633476],[-122.190692,47.634194],[-122.191623,47.635672],[-122.192652,47.636933],[-122.195835,47.639784],[-122.197456,47.640891],[-122.199124,47.641725],[-122.20114,47.642394],[-122.202483,47.642648],[-122.206548,47.643149],[-122.208346,47.643164],[-122.210355,47.642861],[-122.218068,47.640503],[-122.219353,47.64005],[-122.220547,47.639476],[-122.223398,47.637523],[-122.224491,47.636915],[-122.22566,47.636477],[-122.226843,47.636165],[-122.228471,47.635972],[-122.229575,47.636001],[-122.231286,47.636192],[-122.238445,47.637468],[-122.241606,47.638218],[-122.243095,47.638484],[-122.269838,47.642514],[-122.275227,47.643424],[-122.279804,47.644349],[-122.282342,47.644655],[-122.289531,47.645049],[-122.29387,47.645413],[-122.296978,47.645393],[-122.300182,47.645129],[-122.304222,47.64444],[-122.308205,47.64353],[-122.30968,47.64328],[-122.31467,47.643113],[-122.318608,47.64274],[-122.318874,47.642714],[-122.321852,47.642389],[-122.322434,47.642195],[-122.322857,47.641863],[-122.323024,47.641566],[-122.323072,47.641284],[-122.323134,47.638686],[-122.323246,47.637911],[-122.323243,47.637778],[-122.323332,47.636353],[-122.323548,47.635195],[-122.323781,47.634413],[-122.324407,47.632851],[-122.324663,47.632356],[-122.3252,47.631657],[-122.326806,47.630159],[-122.327268,47.629875],[-122.327954,47.629266],[-122.328755,47.628281],[-122.328928,47.627756],[-122.328967,47.626499],[-122.329233,47.626199],[-122.330614,47.625588],[-122.332592,47.625034],[-122.334379,47.624774],[-122.334564,47.624765],[-122.336411,47.624697],[-122.340045,47.624729],[-122.342033,47.624546],[-122.343379,47.624517],[-122.347561,47.624571],[-122.347564,47.624483],[-122.347606,47.62079],[-122.347687,47.620726],[-122.348533,47.620073]]],"bbox":[-122.348533,47.620073,-122.126935,47.646072]},"properties":{"resourceId":"v70,h-1356265451,i0,a0,cen-US,dAAAAAAAAAAA1,y0,s1,m1,o1,t0,wO6aTEbzRR0CPQkjMIohewA2v12,wBmPp6F3PR0AfTybJTpZewA2v12,k1,qatt:1","trafficCongestion":"None","trafficDataUsed":"None","distanceInMeters":21606,"durationInSeconds":1455,"departureTime":"2024-03-04T03:05:01+00:00","arrivalTime":"2024-03-04T03:29:16+00:00","type":"RoutePath","legs":[{"distanceInMeters":21606,"durationInSeconds":1455,"departureTime":"2024-03-04T03:05:01+00:00","arrivalTime":"2024-03-04T03:29:16+00:00","routePathRange":{"legIndex":0,"range":[0,113]},"description":"WA-520 W"}]}}]}

GitHub Copilot peut créer l’extrait de code suivant pour fournir une interface permettant aux utilisateurs d’entrer des adresses de début et de fin et d’afficher l’itinéraire sur la carte à l’aide des API Azure Maps en fonction des exemples d’entrées et de sorties.

<!DOCTYPE html>
<html>
  <head>
    <title>Azure Maps Route Directions</title>
    <meta charset="utf-8" />
    <link
      href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css"
      rel="stylesheet"
    />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
    <style>
      html,
      body,
      #myMap {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
      }
      #inputPanel {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 1;
        background-color: rgba(255, 255, 255, 0.7);
        padding: 10px;
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <div id="inputPanel">
      <input id="startInput" placeholder="Enter starting address" />
      <input id="endInput" placeholder="Enter ending address" />
      <button id="submitBtn">Get Directions</button>
    </div>
    <div id="myMap"></div>
    <script>
      var subscriptionKey = "YOUR_SUBSCRIPTION_KEY";
      var map, dataSource;
 
      function getCoordinates() {
        var startAddress = document.getElementById("startInput").value;
        var endAddress = document.getElementById("endInput").value;
 
        fetch(
          `https://atlas.microsoft.com/geocode:batch?api-version=2023-06-01&subscription-key=${subscriptionKey}`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              batchItems: [
                {
                  addressLine: startAddress,
                },
                {
                  addressLine: endAddress,
                },
              ],
            }),
          }
        )
          .then((response) => response.json())
          .then((data) => {
            var startCoordinates =
              data.batchItems[0].features[0].geometry.coordinates;
            var endCoordinates =
              data.batchItems[1].features[0].geometry.coordinates;
            getRoute(startCoordinates, endCoordinates);
          });
      }
 
      function getRoute(startCoordinates, endCoordinates) {
        fetch(
          `https://atlas.microsoft.com/route/directions?api-version=2025-01-01&subscription-key=${subscriptionKey}`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              type: "FeatureCollection",
              features: [
                {
                  type: "Feature",
                  geometry: {
                    coordinates: startCoordinates,
                    type: "Point",
                  },
                  properties: {
                    pointIndex: 0,
                    pointType: "waypoint",
                  },
                },
                {
                  type: "Feature",
                  geometry: {
                    coordinates: endCoordinates,
                    type: "Point",
                  },
                  properties: {
                    pointIndex: 1,
                    pointType: "waypoint",
                  },
                },
              ],
              routeOutputOptions: ["routePath"],
              travelMode: "driving",
            }),
          }
        )
          .then((response) => response.json())
          .then((data) => {
            dataSource.clear();
            dataSource.add(data);
            map.setCamera({
              bounds: atlas.data.BoundingBox.fromData(data),
              padding: 50,
            });
          });
      }
 
      map = new atlas.Map("myMap", {
        authOptions: {
          authType: "subscriptionKey",
          subscriptionKey: subscriptionKey,
        },
      });
 
      map.events.add("ready", function () {
        dataSource = new atlas.source.DataSource();
        map.sources.add(dataSource);
 
        map.layers.add(new atlas.layer.LineLayer(dataSource));
        map.layers.add(new atlas.layer.SymbolLayer(dataSource));
 
        document
          .getElementById("submitBtn")
          .addEventListener("click", getCoordinates);
      });
    </script>
  </body>
</html>

Capture d’écran d’une carte Azure Maps montrant les itinéraires de Redmond à Seattle Washington.

Fournir des exemples d’entrées de requête d’API Azure Maps et de sorties de réponse peut aider GitHub Copilot à générer des extraits de code plus précis et pertinents. Minifiez le json pour réduire le nombre de jetons si nécessaire. La même technique peut également être appliquée lors de l’appel de vos propres services d’API, ce qui permet à GitHub Copilot de comprendre le fonctionnement de votre API.

Limitations connues

Gardez à l’esprit que l’extrait de code généré nécessite un effort d’ingénierie pour passer en revue et il existe quelques limitations :

  1. Le style CSS n’est généralement pas inclus, sauf si vous demandez explicitement à GitHub Copilot de l’ajouter.
  2. Si vous demandez à Copilot de traduire du code du Kit de développement logiciel (SDK) web Bing Maps en code du Kit de développement logiciel (SDK) web Azure Maps, il génère généralement des résultats médiocres, car il n’existe pas toujours un mappage un-à-un entre eux.
  3. Vous pouvez rencontrer des inexactitudes occasionnelles, et cela nécessite des compétences de débogage et une certaine dose d'essais et d'erreurs.

Conclusion

Ce guide pratique montre comment utiliser GitHub Copilot pour générer des extraits de code pour votre application. Cette fonctionnalité peut être utile lors de la migration d’applications de Bing Maps pour Entreprise vers Azure Maps.

Nous avons abordé les points suivants :

  • Écrivez vos invites en phrases claires.
  • Fournissez des instructions détaillées et pas à pas.
  • Incluez des exemples pour les entrées de demande d’API Azure Maps et les sorties de réponse.

Étapes suivantes

Explorez d’autres techniques avancées de prompt engineering pour vous aider à affiner vos prompts.

Techniques d’ingénierie d’invite

  • Last updated on