Migración de aplicaciones empresariales de Mapas de Bing a Azure Maps con GitHub Copilot
GitHub Copilot es un asistente de código basado en IA que le ayuda a escribir código mejor y más rápido. GitHub Copilot puede generar fragmentos de código a partir de las indicaciones y sugerir finalizaciones para el código existente. GitHub Copilot también puede aprender del código y las preferencias y adaptarse a su estilo y necesidades. Aunque GitHub Copilot no puede convertir directamente el código del SDK web de Mapas de Bing en el SDK web de Azure Maps o desde las API de Mapas de Bing a las API de Azure Maps, en este artículo de procedimientos se muestra cómo usar GitHub Copilot para generar código para las aplicaciones de Azure Maps. Esto puede ser especialmente útil si va a migrar de Mapas de Bing para la empresa a Azure Maps.
Requisitos previos
- Una cuenta de Azure
- Una cuenta de Azure Maps
- Una clave de suscripción u otra forma de Autenticación con Azure Maps
- Conocimientos básicos del SDK web de Azure Maps
- Conocimientos básicos de las API de Azure Maps
- Una cuenta y suscripción de GitHub para GitHub Copilot
- Una comprensión básica de las diferencias entre Mapas de Bing para la empresa y Azure Maps, consulte los siguientes artículos:
Sugerencia 1: escribir las indicaciones en oraciones claras
El primer paso para usar GitHub Copilot es escribir las indicaciones en oraciones simples. Una solicitud es una breve descripción de lo que desea hacer o lograr con el código. Por ejemplo, si desea mostrar un archivo GeoJSON con el SDK web de Azure Maps, puede escribir una solicitud similar a la siguiente:
Escriba un programa HTML mediante WebSDK v3 de Azure Maps para mostrar las características de GeoJSON en una clase SymbolLayer desde la siguiente dirección URL: https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson
Después, GitHub Copilot genera un fragmento de código que coincide con la solicitud, mediante el lenguaje y el marco de trabajo que prefiera. Por ejemplo, si usa HTML y JavaScript, GitHub Copilot podría generar un fragmento de código similar al siguiente:
<!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>
Como puede ver, GitHub Copilot puede generar un fragmento de código completo y funcional a partir de una solicitud sencilla y clara. A continuación, puede copiar y pegar el fragmento de código en el editor de código o modificarlo como desee. También puede pedir a GitHub Copilot que genere fragmentos de código alternativos o para completar o sugerir cambios en el código existente.
La ventaja de escribir las indicaciones en oraciones claras, en lugar de confiar en fragmentos de código de la aplicación de Mapas de Bing para empresas, es que puede centrarse en la lógica y la funcionalidad de la aplicación, haciendo que GitHub Copilot comprenda el objetivo con mayor precisión. También puede evitar copiar y pegar fragmentos de código que podrían ser ambiguos y potencialmente confundir a GitHub Copilot.
Nota:
Es posible que obtenga resultados diferentes cada vez que ejecute la misma solicitud y, en ocasiones, podría encontrar imprecisiones, como un método que no existe. Asegúrese de comprobar la consola del explorador para ver si hay errores y ajustar el código si es necesario.
Sugerencia 2: proporcionar instrucciones detalladas y paso a paso
La segunda sugerencia para usar GitHub Copilot es proporcionar instrucciones detalladas paso a paso. Imagine que es un administrador de productos que escribe especificaciones funcionales para su producto. Por ejemplo, si desea codificar geográficamente la dirección, ‘1 Microsoft Way, Redmond, WA’ y agregar un marcador en el mapa, puede escribir una solicitud similar a la siguiente:
Escriba un programa HTML con el SDK web de Azure Maps v3 para realizar una solicitud de código geográfico para las coordenadas de "1 Microsoft Way, Redmond, WA" y, a continuación, coloque un marcador en esa ubicación.Paso 1. Uso del punto de conexión de la API de geocodificación: https://atlas.microsoft.com/geocode?api-version=2023-06-01&subscription-key=${subscriptionKey}&query=${query}. Se proporciona una respuesta de ejemplo para referencia.
{"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]}]}
Paso 2. Realice una solicitud de API de geocodificación para las coordenadas de "1 Microsoft Way, Redmond, WA".
Paso 3. Use el SDK web de Azure Maps para mostrar un mapa y centrarlo en las coordenadas obtenidas de la respuesta de la API de geocodificación.
Paso 4. Espere hasta que los recursos del mapa estén listos.
Paso 5. Coloque un marcador en el mapa en las coordenadas obtenidas de la respuesta de la API.
GitHub Copilot genera un fragmento de código que coincide con las instrucciones, usando la API de código geográfico de Azure Maps y el SDK web de 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>
<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>
Desglosar una solicitud compleja en pasos individuales hace que sea más fácil de entender y seguir para GitHub Copilot, dándole un mejor control sobre el flujo de código.
Nota:
Para crear solicitudes efectivas, debe personalizarlas para distintos escenarios. Refinar la solicitud iterativamente le permite lograr el mejor resultado posible.
Sugerencia 3: incluir ejemplos de entradas y salidas de las solicitudes de la API
La tercera sugerencia para usar GitHub Copilot es incluir ejemplos de entradas y salidas de la API. Proporcionar ejemplos puede mejorar la capacidad de Copilot para generar fragmentos de código precisos y relevantes al permitirle aprender a controlar los datos.
Para obtener ejemplos de entradas y salidas para las API de Azure Maps, puede consultar la documentación de la API de REST de Azure Maps. Por ejemplo, puede ver un ejemplo de cuerpo de solicitud y respuesta para la API de geocodificación por lotes de Azure Maps y la API de indicaciones de Azure Maps. Si desea crear una aplicación para la ruta entre dos ubicaciones mediante Azure Maps, puede escribir una solicitud similar a la siguiente:
Implemente un programa HTML mediante el SDK web de Azure Maps v3 para mostrar las indicaciones de ruta de las ubicaciones especificadas por el usuario.Paso 1. Cree dos cuadros de entrada para que los usuarios escriban las direcciones postales iniciales y finales. Agregue un botón enviar para continuar con el paso siguiente.
Paso 2. Use la API POST de geocodificación por lotes: https://atlas.microsoft.com/geocode:batch?api-version=2023-06-01& subscription-key=${subscriptionKey} para buscar las coordenadas de los puntos inicial y final.
Cuerpo de solicitud de ejemplo:
{ "batchItems": [ { "addressLine": "1 Microsoft Way, Redmond, WA" }, { "addressLine": "400 Broad St, Seattle, WA" } ] }
Respuesta de ejemplo:
{"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}}
Paso 3. Use el SDK web de Azure Maps para mostrar un mapa.
Paso 4. Espere hasta que los recursos del mapa estén listos.
Paso 5. Cree y agregue un DataSource al mapa.
Paso 6. Cree y agregue una clase SymbolLayer al mapa.
Paso 7. Cree y agregue una clase LineLayer al mapa.
Paso 8. Use la API POST de ruta: https://atlas.microsoft.com/route/directions?api-version=2023-10-01-preview&subscription-key=${subscriptionKey} para buscar la ruta entre los puntos inicial y final. Agregue la respuesta GeoJSON al DataSource y ajuste la cámara del mapa en función del rectángulo de límite de la respuesta.
Cuerpo de solicitud de ejemplo:
{ "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" }
Respuesta de ejemplo:
{"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,wO6aTEbzRR0CPQkjMIohewA2
v12,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"}]}}]}v12,wBmPp6F3PR0AfTybJTpZewA2
GitHub Copilot puede crear el siguiente fragmento de código para proporcionar una interfaz para que los usuarios escriban direcciones iniciales y finales y muestren la ruta en el mapa mediante las API de Azure Maps basadas en las entradas y salidas de ejemplo.
<!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>
Proporcionar ejemplos de entradas y salidas de respuesta de la API de Azure Maps puede ayudar a GitHub Copilot a generar fragmentos de código más precisos y pertinentes. Minifique el JSON para reducir el número de tokens cuando sea necesario. También se puede aplicar la misma técnica al llamar a sus propios servicios de API, lo que permite a GitHub Copilot comprender cómo funciona la API.
Limitaciones conocidas
Tenga en cuenta que el fragmento de código generado requiere un esfuerzo de ingeniería para revisar y hay algunas limitaciones:
- Normalmente, el estilo CSS no se incluye a menos que indique explícitamente a GitHub Copilot que lo agregue.
- Si pide a Copilot que traduzca el código del SDK web de Mapas de Bing al código del SDK web de Azure Maps, suele generar resultados deficientes porque no siempre existe una correspondencia unívoca entre ambos.
- Es posible que encuentre inexactitudes ocasionales y requiere aptitudes de depuración y algún error y prueba.
Conclusión
En esta guía paso a paso se muestra cómo usar GitHub Copilot para generar fragmentos de código para la aplicación. Esta funcionalidad puede resultar útil al migrar aplicaciones de Mapas de Bing para la empresa a Azure Maps.
Hemos tratado lo siguiente:
- Escribir las solicitudes en oraciones claras.
- Proporcionar instrucciones detalladas paso a paso.
- Incluir ejemplos de entradas y salidas de las solicitudes de la API de Azure Maps.
Pasos siguientes
Explorar otras técnicas avanzadas de ingeniería de solicitudes para ayudarle a refinar las solicitudes.
Comentarios
Próximamente: A lo largo de 2024 iremos eliminando gradualmente GitHub Issues como mecanismo de comentarios sobre el contenido y lo sustituiremos por un nuevo sistema de comentarios. Para más información, vea: https://aka.ms/ContentUserFeedback.
Enviar y ver comentarios de