Meu Parecer sobre o Desenvolvimento de uma Aplicação HTML utilizando 100% o GitHub Copilot e APIs Google Maps

1. Introdução: 

O Projeto e o Novo Paradigma de Desenvolvimento

O Que é o Projeto

A Calculadora Eco Trip é uma simples aplicação web interativa projetada para calcular e comparar as emissões de CO2 geradas por diferentes meios de transporte em uma viagem. O objetivo é simular o impacto ambiental das viagens entre dois pontos, fornecendo dados cruciais como emissões por bicicleta, carro, ônibus e caminhão, o comparativo de economia e até mesmo a estimativa de créditos de carbono necessários para compensação. Apesar de simples em sua estrutura, a aplicação entrega diversas funcionalidades, incluindo uma interface responsiva e um fallback inteligente para entrada manual de distâncias.

A Inspiração e a Escolha Técnica

Este projeto foi proposto por Pablo Lopes, Instrutor do bootcamp  “GitHub Copilot - Código na Prática” na DIO, e serviu como um excelente desafio para explorar tecnologias de frontend como HTML5, CSS3 e JavaScript ES6+ (Vanilla). Levando o desafio adiante, como proposto pelo instrutor, implementei um robusto conjunto de APIs do Google Maps: a Google Maps JavaScript API, a Google Places API para autocompletar endereços, e a Google Maps Distance Matrix API para o cálculo automático e preciso das distâncias.

O detalhe crucial é que todo o desenvolvimento, da estrutura HTML à lógica JavaScript complexa, foi guiado e construído utilizando 100% o GitHub Copilot. Isso transforma este artigo em um verdadeiro parecer sobre a colaboração entre desenvolvedor e inteligência artificial no fluxo de trabalho moderno.

2. O Papel do GitHub Copilot

Automação 100% da Ideia ao Código

A decisão de utilizar o GitHub Copilot em 100% do processo de codificação não foi apenas um experimento, mas o cerne deste projeto. O Copilot funcionou como um parceiro de desenvolvimento completo, começando pela fase mais abstrata do projeto: o levantamento de requisitos.

Rendimento:

Requisitos e Estrutura em Minutos

A maior economia de tempo e esforço com o Copilot ocorreu no levantamento e na organização dos requisitos. Em vez de escrever longas especificações manualmente, a abordagem foi radicalmente diferente:

1. Captura Visual: Imagens (screenshots) da interface da aplicação (o layout e as funcionalidades desejadas) foram “printadas” e coladas diretamente no prompt do Copilot.
2. Análise e Organização: Solicitei ao Copilot que fizesse a leitura e análise dessas imagens, organizando os requisitos resultantes em um arquivo markdown (requisitos.md).

O resultado foi surpreendente. O Copilot criou o arquivo de requisitos com precisão, sugerindo o fluxo de implementação, a estrutura do projeto, a interface HTML/CSS e, crucialmente, os pontos de integração com a API do Google Maps. Uma vez fornecida a imagem da estrutura e os requisitos, o Copilot conseguiu gerar praticamente todo o código base, permitindo que eu atuasse primariamente como um engenheiro de prompt e revisor, e não como um digitador.

A Precisão das Sugestões e a Lógica do Cálculo

A verdadeira prova de fogo foi a integração das complexas APIs do Google Maps (Distance Matrix API). Embora não tenha sido uma implementação perfeita de primeira, a assistência na correção de erros foi inestimável.

Ao invés de passar horas depurando incompatibilidades, a solução foi simples: eu copiava as stack traces de erro do console e as inseria no prompt. O Copilot interpretava o problema, identificava as linhas no código onde as correções eram necessárias e solicitava permissão para corrigi-lo. Esse ciclo de feedback rápido garantiu que o código fosse funcional e robusto, sem que eu precisasse escrever qualquer código novo para a correção dos bugs.

3. Modelagem de Dados e a Lógica de cálculo

O coração da Calculadora Eco Trip reside em sua lógica de cálculo de emissões de CO2. O desafio aqui foi traduzir dados científicos em variáveis de código.

Tradução de Coeficientes em Código JavaScript

Para manter a credibilidade pesquisei, os coeficientes de emissão (o valor de CO2 emitido por quilômetro por cada meio de transporte) são baseados em estimativas de fontes oficiais reconhecidas, como EPA, DEFRA e IPCC.

As fórmulas seguem metodologias padrão de cálculo de pegada de carbono (Distância x  Coeficiente de Emissão = CO2 Total), mas os valores específicos inseridos são aproximações educativas baseadas nas fontes citadas, reconhecendo que emissões reais variam conforme modelo do veículo, combustível, ocupação, tráfego e manutenção.

O Copilot demonstrou excelência na tradução desses dados, criando o objeto JavaScript para armazenar os coeficientes e construindo a função principal de cálculo a partir da fórmula fundamental fornecida no prompt.

Usabilidade (UX/UI) e o Design Visual

Um dos grandes pontos fortes do processo, facilitado pela IA, foi o design visual. A estrutura do projeto e o design da página ficaram prontos de primeira por sugestão do Copilot. Os testes de usabilidade focaram em garantir que o resultado fosse visto de forma clara em cards exibindo os dados e valores calculados, incluindo o comparativo visual e a estimativa de créditos de carbono.

4. Orquestração e Desafios Reais da API 

Lidando com a Assincronia

O desafio de integrar a Google Maps Distance Matrix API era gerenciar a assincronia — o código síncrono de cálculo não podia ser executado antes que a distância (lenta e assíncrona) fosse retornada.

Gerenciamento Assíncrono com Promises e async/await

O projeto utilizou uma arquitetura baseada em Promises e async/await para garantir uma execução ordenada:

1. Camada de API Assíncrona: A lógica da API foi isolada em uma função que retorna uma Promise, responsável por resolver com a distância em quilômetros (km) ou rejeitar com um erro.
2. Coordenação: A função de atualização (updateDistanceAutomatically()) foi marcada como async, permitindo o uso de await. Isso fez com que o sistema aguardasse o retorno da API antes de disparar os cálculos de CO2 (operação rápida), garantindo o timing perfeito. O timing de retorno da API, foi sendo ajustado conforme os testes funcionais que eu fazia na página eu passava o feedback para o Copilot, e após alguns minutos chegamos ao timing perfeito. 

O Fallback Inteligente

A estrutura try...catch implementada para gerenciar a assincronia também serviu como base para o fallback. Em caso de qualquer falha na API (chave inválida, rota não encontrada, etc.), a cláusula catch é ativada. A aplicação retorna imediatamente ao seu estado inicial, permitindo que o usuário insira a distância manualmente, mantendo a usabilidade da calculadora mesmo sem a funcionalidade completa da API de mapas.

5. Principais Aprendizados e Conclusão

A jornada de desenvolvimento da Calculadora Eco Trip foi uma imersão na Engenharia de Prompt e na arquitetura de aplicações web.

Categoria

Aprendizado do Projeto

GitHub Copilot

Utilização de IA para acelerar desenvolvimento e extrair requisitos de imagens (Few-Shot Prompting).

APIs do Google

Integração completa com Maps, Places e Distance Matrix, com gerenciamento assíncrono.

JavaScript Modular

Organização de código em módulos especializados para manutenção e escalabilidade.

Arquitetura

Domínio do Promises e async/await para coordenar o fluxo de dados assíncronos.

Sustentabilidade

Simulação Ambiental: Modelagem de impactos de CO por meio de transporte.

Próximos Passos e Visão de Futuro

Um possível plano futuro para a Calculadora Eco Trip, uma vez que é uma aplicação didática mas funcional, seria incluir, adicionar mais meios de transporte (como trem e avião, etc.) e implementar o salvamento do histórico de viagens do usuário em um banco de dados local para personalização.

A sua correção é excelente. Ela aprofunda a análise sobre a mudança de papel do desenvolvedor, enfatizando que a IA não só acelera, mas também expõe a soluções que poderiam ser desconhecidas.

Vou integrar este texto final, que agora está ainda mais perspicaz e reflexivo.

5. Principais Aprendizados e Conclusão

A jornada de desenvolvimento da Calculadora Eco Trip foi uma imersão na Engenharia de Prompt e na arquitetura de aplicações web, solidificando diversas habilidades essenciais:

• GitHub Copilot: Uso estratégico para acelerar o desenvolvimento, extraindo requisitos de imagens e automatizando a estrutura de código.
• APIs e Arquitetura: Integração completa com as APIs do Google e domínio de Promises/async/await para coordenar o fluxo de dados assíncronos.
• Sustentabilidade: Modelagem de impactos de $\text{CO}_2$ por meio de transporte, unindo programação e consciência ambiental.

Próximos Passos e Visão de Futuro

O plano futuro para a Calculadora Eco Trip inclui adicionar mais meios de transporte (como trem e avião) e implementar o salvamento do histórico de viagens do usuário em um banco de dados local para personalização.

Conclusão e o Desenvolvedor do Futuro

Em conclusão, meu parecer é que a colaboração entre a inteligência artificial (Copilot) e a perspicácia humana é a chave para a eficiência. Isso ocorre porque a ferramenta vai além do nosso conhecimento técnico, gerando artefatos e códigos que talvez nem soubéssemos que existiam, mas que são necessários à aplicação.

Essa realidade exige que o desenvolvedor do futuro seja aquele que não apenas sabe orquestrar essas ferramentas de IA, mas que também consegue compreender requisitos de negócio, fluxos e processos sistêmicos do desenvolvimento de software.

Analisar sugestões e testar os códigos gerados pela IA também pode consumir um bom tempo de análise, uma vez que funções com códigos muito rebuscados exigem algum tipo de pesquisa ou estudo por parte do desenvolvedor, seja por questões de segurança ou para a sua total compreensão antes do uso em produção. Acredito que, para nós desenvolvedores, o tempo de escrever código já é passado; agora, escrever será só “setup” e “prompt engineer”, exigindo muito mais conhecimento sobre a garantia da qualidade e a integridade da aplicação desenvolvida utilizando IA (Copilot).

Convite ao Leitor:

Convido você a testar a Calculadora Eco Trip e inspecionar o código-fonte para ver a arquitetura modular em ação. Seu feedback é muito bem-vindo!

• Link para a Aplicação: https://udinei.github.io/MyCalculadoraEcoTrip/
• Link para o Repositório: https://github.com/Udinei/MyCalculadoraEcoTrip