Compartilhar via

Migrar aplicativos corporativos do Bing Mapas para o Azure Mapas com o GitHub Copilot

O GitHub Copilot é um assistente de código alimentado por IA que ajuda você a escrever um código melhor mais rapidamente. O GitHub Copilot pode gerar trechos de código a partir de seus prompts e sugerir completamentos para o seu código existente. O GitHub Copilot também pode aprender com seu código e preferências e adaptar-se ao seu estilo e necessidades. Embora o GitHub Copilot não possa converter diretamente seu código do SDK da Web do Bing Mapas para o SDK da Web do Azure Mapas ou de APIs do Bing Mapas para APIs do Azure Mapas, este artigo de instruções mostra como usar o GitHub Copilot para gerar código para seus aplicativos do Azure Mapas. Isso pode ser especialmente útil se você estiver migrando do Bing Mapas para Empresas para o Azure Mapas.

Pré-requisitos

Dica 1: escrever seus prompts em frases claras

A primeira etapa para usar o GitHub Copilot é escrever seus prompts em frases simples. Um prompt é uma breve descrição do que você deseja fazer ou obter com seu código. Por exemplo, se você quiser exibir um arquivo GeoJSON com o SDK da Web do Azure Mapas, você poderá escrever um prompt como este:

Escreva um programa HTML usando o WebSDK do Azure Mapas v3 para exibir recursos GeoJSON em um SymbolLayer da seguinte URL: https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson

Em seguida, o GitHub Copilot gera um snippet de código que corresponde ao seu prompt, usando o idioma e a estrutura de sua escolha. Por exemplo, se você estiver usando HTML e JavaScript, o GitHub Copilot poderá gerar um snippet de código como este:

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

Uma captura de tela de um Azure Mapas mostrando a América do Norte com pinos azuis em locais de terremoto.

Como você pode ver, o GitHub Copilot tem a capacidade de gerar um trecho de código completo e funcional a partir de um prompt simples e claro. Em seguida, você pode copiar e colar o snippet de código em seu editor de código ou modificá-lo conforme desejar. Você também pode pedir ao GitHub Copilot para gerar snippets de código alternativos ou para concluir ou sugerir alterações no código existente.

A vantagem de escrever seus prompts em frases claras, em vez de depender de snippets de código do seu aplicativo Bing Mapas para Empresas, é que você pode se concentrar na lógica e funcionalidade do seu aplicativo, tornando mais preciso que o GitHub Copilot entenda sua meta. Você também pode evitar copiar e colar trechos de código que podem ser ambíguos e podem confundir o GitHub Copilot.

Observação

Você pode obter resultados diferentes sempre que executar o mesmo prompt e, ocasionalmente, pode encontrar imprecisões, como um método que não existe. Verifique se há erros no console do navegador e ajuste o código, se necessário.

Dica 2: fornecer instruções detalhadas passo a passo

A segunda dica para usar o GitHub Copilot é fornecer instruções detalhadas passo a passo. Imagine que você é um gerente de produto escrevendo especificações funcionais para seu produto. Por exemplo, se você quiser codificar geografiamente o endereço '1 Microsoft Way, Redmond, WA' e adicionar um marcador no mapa, você poderá escrever um prompt como o seguinte:

Escreva um programa HTML usando o SDK da Web do Azure Mapas v3 para fazer uma solicitação de código geográfico para as coordenadas de '1 Microsoft Way, Redmond, WA' e, em seguida, coloque um marcador nesse local.

Etapa 1. Utilize o ponto de extremidade da API do Geocode: <https://atlas.microsoft.com/geocode?api-version=2023-06-01&subscription-key=${subscriptionKey}&query=${query}>. Uma resposta de exemplo é fornecida para referência.

{"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]}]}

Etapa 2. Faça uma solicitação de API do Geocode para as coordenadas '1 Microsoft Way, Redmond, WA'.

Etapa 3. Use o WebSDK do Azure Mapas para exibir um mapa, centralizando-o nas coordenadas obtidas da resposta da API do Geocode.

Etapa 4. Aguarde até que os recursos do mapa estejam prontos.

Etapa 5. Coloque um marcador no mapa nas coordenadas obtidas da resposta da API.

O GitHub Copilot gera um snippet de código que corresponde às suas instruções, usando a API do Geocode do Azure Mapas e o SDK da Web do Azure Mapas.

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

Uma captura de tela mostrando os resultados do exemplo de código anterior, um mapa de Redmond, Washington com um pino identificado como 1 Microsoft Way.

Dividir um prompt complexo em etapas individuais torna mais fácil para o GitHub Copilot entender e seguir, oferecendo melhor controle sobre o fluxo de código.

Observação

Para criar prompts efetivos, você precisa personalizá-los para cenários diferentes. Refinar o prompt iterativamente permite que você obtenha o melhor resultado possível.

Dica 3: incluir exemplos para entradas de solicitação de API e saídas de resposta

A terceira dica para usar o GitHub Copilot é incluir exemplos de entradas e saídas de API. Fornecer exemplos pode melhorar a capacidade do Copilot de gerar snippets de código precisos e relevantes, permitindo que ele aprenda a lidar com os dados.

Para obter exemplos de entradas e saídas para APIs do Azure Mapas, você pode consultar a documentação da API REST do Azure Mapas. Por exemplo, você pode ver um corpo de solicitação de exemplo e uma resposta para a API de Geocodificação em Lote dos Mapas do Azure e a API de Direções dos Mapas do Azure. Se você quiser criar um aplicativo para roteamento entre dois locais usando o Azure Mapas, você poderá escrever um prompt como este:

Implemente um programa HTML usando o SDK da Web do Azure Mapas v3 para mostrar as instruções de rota para locais especificados pelo usuário.

Etapa 1. Crie duas caixas de entrada para que os usuários insiram os endereços de rua iniciais e finais. Adicione um botão enviar para prosseguir para a próxima etapa.

Etapa 2. Utilize a API de Lote POST do Geocode: https://atlas.microsoft.com/geocode:batch?api-version=2023-06-01&subscription-key=${subscriptionKey} para localizar as coordenadas dos pontos de início e de término.

Exemplo de corpo de solicitação:

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

Resposta de exemplo:

{"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}}

Etapa 3. Use o WebSDK do Azure Mapas para exibir um mapa.

Etapa 4. Aguarde até que os recursos do mapa estejam prontos.

Etapa 5. Crie e adicione um DataSource ao mapa.

Etapa 6. Crie e adicione um SymbolLayer ao mapa.

Etapa 7. Crie e adicione um LineLayer ao mapa.

Passo 8. Utilize a API de Rota POST: https://atlas.microsoft.com/route/directions?api-version=2025-01-01&subscription-key=${subscriptionKey} para localizar a rota entre os pontos de início e de término. Adicione a resposta GeoJSON ao DataSource e ajuste a câmera do mapa com base na caixa delimitadora da resposta.

Exemplo de corpo de solicitação:

{ "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": "dirigindo" }

Resposta de exemplo:

{"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"}]}}]}

O GitHub Copilot pode criar o snippet de código a seguir para fornecer uma interface para que os usuários insiram endereços de início e término e mostrem a rota no mapa usando APIs do Azure Mapas com base nas entradas e saídas de exemplo.

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

Uma captura de tela de um mapa do Azure Mapas mostrando as direções de Redmond para Seattle Washington.

Fornecer exemplos de entradas de solicitação e saídas de resposta da API do Azure Mapas pode ajudar o GitHub Copilot a gerar snippets de código mais precisos e relevantes. Minifique o JSON para reduzir a contagem de tokens quando necessário. A mesma técnica também pode ser aplicada ao chamar seus próprios serviços de API, permitindo que o GitHub Copilot entenda como sua API funciona.

Limitações conhecidas

Tenha em mente que o snippet de código gerado requer esforço de engenharia para revisão e há algumas limitações:

  1. O estilo CSS normalmente não é incluído, a menos que você instrua explicitamente o GitHub Copilot a adicioná-lo.
  2. Se você pedir ao Copilot para converter o código do SDK da Web do Bing Mapas no código do SDK da Web do Azure Mapas, ele geralmente produzirá resultados ruins porque nem sempre há um mapeamento um-para-um entre eles.
  3. Você pode encontrar imprecisões ocasionais, e isso requer habilidades de depuração e alguma tentativa e erro.

Conclusão

Este guia de instruções demonstra como usar o GitHub Copilot para gerar snippets de código para seu aplicativo. Essa funcionalidade pode ser útil ao migrar aplicativos do Bing Mapas para Empresas para o Azure Mapas.

Abordamos o seguinte:

  • Escreva seus prompts em frases claras.
  • Forneça instruções detalhadas passo a passo.
  • Inclua exemplos para entradas de solicitação e saídas de resposta da API do Azure Mapas.

Próximas etapas

Explore outras técnicas avançadas de engenharia de prompt para obter ajuda ao refinar suas solicitações.

Técnicas de engenharia de prompt

  • Last updated on