Eseguire la migrazione di applicazioni Bing Mappe Enterprise a Mappe di Azure con GitHub Copilot
GitHub Copilot è un assistente al codice basato sull'intelligenza artificiale che consente di scrivere codice migliore più velocemente. GitHub Copilot può generare frammenti di codice dalle richieste e suggerire completamenti per il codice esistente. GitHub Copilot può anche apprendere dal codice e dalle preferenze e adattarsi allo stile e alle esigenze. Anche se GitHub Copilot non è in grado di convertire direttamente il codice da Bing Mappe Web SDK a Mappe di Azure Web SDK o dalle API di Bing Mappe alle API Mappe di Azure, questo articolo illustra come usare GitHub Copilot per generare codice per le applicazioni Mappe di Azure. Ciò può risultare particolarmente utile se si esegue la migrazione da Bing Mappe for Enterprise a Mappe di Azure.
Prerequisiti
- Un account Azure
- Un account Mappe di Azure
- Una chiave di sottoscrizione o un'altra forma di autenticazione con Mappe di Azure
- Conoscenza di base di Mappe di Azure Web SDK
- Conoscenza di base delle API Mappe di Azure
- Un account GitHub e una sottoscrizione per GitHub Copilot
- Una conoscenza di base delle differenze tra Bing Mappe for Enterprise e Mappe di Azure, vedere gli articoli seguenti:
Suggerimento 1: Scrivere le richieste in frasi chiare
Il primo passaggio per usare GitHub Copilot consiste nel scrivere le richieste in frasi semplici. Una richiesta è una breve descrizione di ciò che si vuole fare o ottenere con il codice. Ad esempio, se si vuole visualizzare un file GeoJSON con Mappe di Azure Web SDK, è possibile scrivere un prompt simile al seguente:
Scrivere un programma HTML usando Mappe di Azure WebSDK v3 per visualizzare le funzionalità GeoJSON in un SymbolLayer dall'URL seguente:https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson
GitHub Copilot genera quindi un frammento di codice corrispondente alla richiesta, usando il linguaggio e il framework desiderati. Ad esempio, se si usa HTML e JavaScript, GitHub Copilot potrebbe generare un frammento di codice simile al seguente:
<!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>
Come si può notare, GitHub Copilot può generare un frammento di codice completo e funzionale da un prompt semplice e chiaro. È quindi possibile copiare e incollare il frammento di codice nell'editor di codice o modificarlo nel modo desiderato. È anche possibile chiedere a GitHub Copilot di generare frammenti di codice alternativi o di completare o suggerire modifiche al codice esistente.
Il vantaggio di scrivere richieste in frasi chiare, invece di basarsi su frammenti di codice dell'applicazione Bing Mappe for Enterprise, è che è possibile concentrarsi sulla logica e sulle funzionalità dell'applicazione, rendendola più precisa per GitHub Copilot per comprendere l'obiettivo. È anche possibile evitare di copiare e incollare frammenti di codice che potrebbero essere ambigui e potenzialmente confondere GitHub Copilot.
Nota
È possibile ottenere risultati diversi ogni volta che si esegue la stessa richiesta e talvolta si potrebbero riscontrare imprecisioni, ad esempio un metodo che non esiste. Assicurarsi di controllare la presenza di errori nella console del browser e di regolare il codice, se necessario.
Suggerimento 2: Fornire istruzioni dettagliate e dettagliate
Il secondo suggerimento per l'uso di GitHub Copilot consiste nel fornire istruzioni dettagliate e dettagliate. Si supponga di essere un product manager che scrive specifiche funzionali per il prodotto. Ad esempio, se si vuole geocodificare l'indirizzo, "1 Microsoft Way, Redmond, WA" e aggiungere un marcatore sulla mappa, è possibile scrivere un prompt simile al seguente:
Scrivere un programma HTML usando Mappe di Azure Web SDK v3 per effettuare una richiesta di geocodifica per le coordinate di "1 Microsoft Way, Redmond, WA" e quindi posizionare un marcatore in tale posizione.Passaggio 1: Usare l'endpoint dell'API Geocode: https://atlas.microsoft.com/geocode?api-version=2023-06-01& subscription-key=${subscriptionKey}&query=${query}. Viene fornita una risposta di esempio per riferimento.
{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"address":{"countryRegion":{"name":"Stati Uniti"},"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":" Punto","coordinate":[-122.138681,47.630358]},"calculationMethod":"Roof","usageTypes":["Display"]},{"geometry":{"type"::{"type"::"Punto","coordinate":[-122.1386787,47.6302179]},"calculationMethod":"Roof","usageTypes":["Route"]}]},"geometry"::{"type":"Point","coordinates":[-122.138681,47.630358]},"bbox":[-122.14632282407,1463282407,147.626495282429325,-122.13103917593001,47.63422071757068]}]}
Passaggio 2. Effettuare una richiesta API Geocode per le coordinate di "1 Microsoft Way, Redmond, WA".
Passaggio 3. Usare Mappe di Azure WebSDK per visualizzare una mappa, centrandola sulle coordinate ottenute dalla risposta dell'API Geocode.
Passaggio 4. Attendere che le risorse della mappa siano pronte.
Passaggio 5. Posizionare un marcatore sulla mappa in corrispondenza delle coordinate ottenute dalla risposta dell'API.
GitHub Copilot genera un frammento di codice che corrisponde alle istruzioni, usando Mappe di Azure'API Geocode e Mappe di Azure Web SDK.
<!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>
<script type="text/javascript" src="https://atlas.microsoft.com/sdk/js/atlas.min.js?api-version=3"></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, Seattle';
// 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>
Suddividere un prompt complesso in singoli passaggi semplifica la comprensione e il completamento di GitHub Copilot, offrendo un migliore controllo sul flusso di codice.
Nota
Per creare richieste valide, è necessario personalizzarle per scenari diversi. Il perfezionamento della richiesta in modo iterativo consente di ottenere il risultato migliore possibile.
Suggerimento 3: Includere esempi per gli input delle richieste API e gli output di risposta
Il terzo suggerimento per l'uso di GitHub Copilot consiste nell'includere esempi per input e output dell'API. La fornitura di esempi può migliorare la capacità di Copilot di generare frammenti di codice accurati e pertinenti consentendogli di imparare a gestire i dati.
Per ottenere esempi di input e output per le API Mappe di Azure, è possibile fare riferimento alla documentazione dell'API REST Mappe di Azure. Ad esempio, è possibile visualizzare un corpo e una risposta di richiesta di esempio per l'API Batch di geocodifica Mappe di Azure e l'API directions Mappe di Azure. Se si vuole creare un'applicazione per il routing tra due posizioni usando Mappe di Azure, è possibile scrivere un prompt simile al seguente:
Implementare un programma HTML usando Mappe di Azure Web SDK v3 per visualizzare le indicazioni stradali per le posizioni specificate dall'utente.Passaggio 1: Creare due caselle di input per consentire agli utenti di immettere gli indirizzi iniziali e finali. Aggiungere un pulsante submit per procedere con il passaggio successivo.
Passaggio 2. Usare l'API POST di Batch Geocode: https://atlas.microsoft.com/geocode:batch?api-version=2023-06-01& subscription-key=${subscriptionKey} per trovare le coordinate dei punti iniziale e finale.
Corpo della richiesta di esempio:
{ "batchItems": [ { "addressLine": "1 Microsoft Way, Redmond, WA" }, { "addressLine": "400 Broad St, Seattle, WA" } ] } }
Esempio di risposta:
{"batchItems":[{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-122.128265,47.6393885]},"bbox":[-122.13590814413995,47.63552228242932,-122.120621855586005,47.643247717570674],"properties":{"type":"Address","confidence":"Medium","matchCodes":["Good"],"geocodePoints":[{"calculationMethod":"Roof","usageTypes":["Display"],"geometry":{"type":"Point","coordinates":[-122.128265,47.639385]}},{" calculationMethod":"Roof","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":"Stati Uniti","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":"Roof","usageTypes":["Display"]," geometry":{"type":"Point","coordinates":[-122.349309,47.620498]}},{"calculationMethod":"Roof","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":"Stati Uniti","ISO":"US"},"adminDistricts":[{"shortName":"WA"},{"shortName":"King County"}],"summary":{"successfulRequests":2,"totalRequests":2}}
Passaggio 3. Usare Mappe di Azure WebSDK per visualizzare una mappa.
Passaggio 4. Attendere che le risorse della mappa siano pronte.
Passaggio 5. Creare e aggiungere un oggetto DataSource alla mappa.
Passaggio 6. Creare e aggiungere un SymbolLayer alla mappa.
Passaggio 7. Creare e aggiungere un LineLayer alla mappa.
Passaggio 8. Usare l'API POST di route: https://atlas.microsoft.com/route/directions?api-version=2023-10-01-preview& subscription-key=${subscriptionKey} per trovare la route tra i punti di inizio e di fine. Aggiungere la risposta GeoJSON all'origine dati e regolare la fotocamera della mappa in base al rettangolo di selezione della risposta.
Corpo della richiesta di esempio:
{ "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" }
Esempio di risposta:
{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-122.127124,47.6385522 ]},"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],[-122122.348533,47.620073]]],"bbox":[-122.348533,47.620073,-122.126935,47.646072]},"properties":{"resourceId":"v70,h-1356265451,i0,a0,cen-US,dAAAAAAAAAAAA1,y0,s1,m1,o1,t0,wO6aTEbzRR0CPQintuneMIohewA2 v12,wBmPp6F3PR0AfTybJTpZewA2
:1","trafficCongestion":"None","trafficDataUsed":"None","distanceInMeters":21606,"durationInSeconds" :1455,"departureTime":"2024-03-04T03:05:01+00:00","arrivalTime":"2024-03-034T03:29:16+00:00","type":"RoutePath","legs":[{"distanceInMeters":21606,"durationInSeconds":1455,"partenzaTime":"2024-03-04T03:05:01+00:00","arrivalTime":"2024-03-04T03:29:29 16+00:00","routePathRange":{"legIndex":0,"range":[0,113]},"description":"WA-520 W"}]}}]}v12,k1,qatt
GitHub Copilot può creare il frammento di codice seguente per fornire agli utenti un'interfaccia per immettere gli indirizzi di inizio e di fine e mostrare il percorso sulla mappa usando le API Mappe di Azure in base agli input e agli output di esempio.
<!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=2023-10-01-preview&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>
Fornendo esempi di input e output di risposta delle richieste API Mappe di Azure possono aiutare GitHub Copilot a generare frammenti di codice più accurati e pertinenti. Ridurre il valore JSON per ridurre il numero di token quando necessario. La stessa tecnica può essere applicata anche quando si chiamano i propri servizi API, consentendo a GitHub Copilot di comprendere il funzionamento dell'API.
Limitazioni note
Tenere presente che il frammento di codice generato richiede un'attività di progettazione da esaminare e esistono alcune limitazioni:
- Gli stili CSS in genere non sono inclusi, a meno che non venga esplicitamente indicato a GitHub Copilot di aggiungerlo.
- Se si chiede a Copilot di tradurre il codice di Bing Mappe Web SDK in Mappe di Azure codice web SDK, in genere restituisce risultati scarsi perché non esiste sempre un mapping uno-a-uno tra di essi.
- È possibile riscontrare occasionali imprecisioni e richiede competenze di debug e alcuni tentativi ed errori.
Conclusione
Questa guida pratica illustra come usare GitHub Copilot per generare frammenti di codice per l'applicazione. Questa funzionalità può essere utile quando si esegue la migrazione di applicazioni da Bing Mappe for Enterprise a Mappe di Azure.
Sono stati illustrati gli argomenti seguenti:
- Scrivere le richieste in frasi chiare.
- Fornire istruzioni dettagliate e dettagliate.
- Includere esempi per Mappe di Azure gli input delle richieste API e gli output delle risposte.
Passaggi successivi
Esplorare altre tecniche avanzate di progettazione prompt per facilitare l'affinamento delle richieste.