DEV Community: vandrei de lima

Ferramentas de métricas para aplicações frontend: qual escolher?

vandrei de lima — Wed, 09 Jul 2025 14:48:56 +0000

Ferramentas de métricas para aplicações frontend são essenciais para compreender a experiência do usuário e o desempenho da aplicação. Com elas, é possível identificar comportamentos, estabelecer métricas relevantes e realizar análises estratégicas, facilitando a tomada de decisões baseadas em dados.

Pensando nisso, a pedido da empresa, iniciei um estudo para buscar e identificar as ferramentas de métricas que melhor atendessem às nossas necessidades.

Durante meus estudos, encontrei e listei algumas ferramentas, sendo elas:

Hotjar
Google Analytics (GA)
Microsoft Clarity
Crazy Egg
Mixpanel
Amplitude
OpenTelemetry

Foram analisados os seguintes critérios: preço, funcionalidades disponíveis, custo de implementação e riqueza de conteúdo da documentação e da comunidade.

Após identificar as ferramentas e compreender melhor suas funcionalidades e limitações, a equipe de negócios elaborou uma planilha no Excel descrevendo, em uma tabela, os itens que gostaria de medir. Essa etapa foi primordial para a escolha das ferramentas, pois, a partir de cada item solicitado, foi possível analisar qual solução atendia melhor a cada métrica, como mapa de calor, tags de utilização, rastreamento de fluxo, entre outros. Todos esses pontos foram avaliados em conjunto com os critérios iniciais, o que facilitou bastante a escolha da ferramenta mais adequada.

Vou falar um pouco sobre o que achei de cada ferramenta e, em seguida, contar quais foram escolhidas e por quê.

Hotjar

O Hotjar é uma das ferramentas mais completas do mercado para análise de comportamento do usuário. Ele oferece recursos como mapas de calor (heatmaps), gravações de sessões (recordings), funis de conversão, enquetes e pesquisas de feedback. O preço varia de US$ 0 a US$ 171/mês, dependendo do plano e do volume de acessos. Sua interface é intuitiva e a implementação é relativamente simples, tornando-o uma excelente escolha para equipes que buscam insights visuais e qualitativos sobre a experiência do usuário.

Google Analytics 4 (GA4)

O GA4 é a versão mais recente do Google Analytics e é totalmente gratuito. Ele é ideal para sites abertos ao público e oferece uma ampla gama de relatórios, incluindo dados demográficos, retenção de usuários, monetização, engajamento e muito mais. O GA4 permite a personalização avançada de eventos e conversões, além de integração com outras ferramentas do ecossistema Google. Vale a pena explorar mais a fundo as possibilidades de tagueamento e configuração de eventos personalizados para extrair o máximo da ferramenta.

Crazy Egg

O Crazy Egg é uma ferramenta focada em mapas de calor, gravações de sessões e testes A/B. O preço varia de US$ 49/mês a US$ 250/mês. Embora seja uma das soluções mais antigas do mercado, sua documentação de implementação pode ser menos amigável em comparação com concorrentes como o Hotjar. No entanto, oferece recursos sólidos para análise visual do comportamento do usuário, sendo útil para identificar pontos de atrito e oportunidades de melhoria em páginas específicas.

Mixpanel

O Mixpanel se destaca pela análise detalhada de eventos e pelo acompanhamento do funil de conversão. O plano gratuito já oferece uma boa margem para monitoramento, incluindo até 1.000 usuários rastreados por mês, histórico de dados de 90 dias e acesso a todos os recursos de análise, como cortes, fluxos e segmentações avançadas. Os planos pagos começam a partir de US$ 24/mês. O Mixpanel é especialmente indicado para quem deseja acompanhar o engajamento e a jornada do usuário em aplicações web e mobile, com foco em métricas de produto.

Microsoft Clarity

O Clarity é uma ferramenta gratuita da Microsoft que oferece mapas de calor, gravação de sessões e métricas detalhadas de acesso. Sua interface é simples e a documentação é clara, facilitando a implementação. Um diferencial importante é a retenção de dados por até 12 meses, além de não haver limite de acessos monitorados. O Clarity é uma ótima opção para quem busca uma solução robusta, sem custos, para análise de comportamento do usuário e identificação de gargalos de usabilidade.

Ferramentas escolhidas

Após listar e compreender o que cada ferramenta poderia fornecer em relação ao custo, fui anotando as informações na planilha criada pela equipe de negócios. No final, cheguei a uma resposta bastante satisfatória, restando duas ferramentas que atendiam plenamente às nossas necessidades: Microsoft Clarity e Google Analytics. Ambas são gratuitas, completas e de fácil instalação e manutenção.

Começamos a utilizar o Clarity em projetos desenvolvidos com Angular e Next.js. A instalação foi rápida e simples; após a configuração, a ferramenta levou cerca de duas horas para começar a captar informações sobre a utilização da aplicação. Tivemos apenas um problema inicial com o Next.js: as gravações e mapas de calor não estavam 100% fiéis às nossas telas, pois o projeto utilizava styled-components. Foi necessário realizar alguns ajustes para garantir que as gravações refletissem corretamente a interface. Após essas correções, conseguimos utilizar a ferramenta com muito mais precisão.

O Clarity nos proporciona uma visão mais micro, permitindo analisar individualmente o perfil e o comportamento do usuário. Já o Google Analytics oferece uma visão mais macro, possibilitando a análise de grandes fluxos de dados. Criamos alguns relatórios específicos no GA4, que nos geraram informações valiosas para aprimorar nossos fluxos e entregar mais valor ao usuário.

Conclusão

Considerando as necessidades específicas dos nossos projetos e avaliando também o custo mensal, conseguimos, com o apoio da equipe de negócios, identificar quais ferramentas melhor se adequavam à nossa realidade. O objetivo deste artigo foi compartilhar o processo realizado para encontrar a solução mais adequada para nossos projetos, detalhando os critérios de escolha e a experiência prática com cada ferramenta. Acreditamos que essa análise pode servir de referência para outras equipes que estejam em busca de ferramentas de métricas eficientes, equilibrando custo, facilidade de implementação e riqueza de funcionalidades.

Cursor: um editor de código com IA integrada

vandrei de lima — Thu, 26 Jun 2025 19:13:22 +0000

Minha experiência com o Cursor: uma IDE com IA integrada

Com o objetivo de testar uma nova IDE, dediquei duas semanas para estudar e experimentar o Cursor, uma plataforma baseada no Visual Studio Code que se destaca pela sua integração nativa com inteligência artificial. Quis entender seu potencial para aumentar a produtividade e a eficiência no desenvolvimento de software. Durante esse período, utilizei a versão gratuita e a versão Pro em diferentes projetos.

No processo de desenvolvimento, alguns fatores contribuíram para uma boa performance e agilidade na entrega, como o entendimento completo das bibliotecas e frameworks utilizados, a visão holística do projeto e a compreensão dos requisitos das atividades. Tentei explorar a IDE ao máximo para identificar onde ela poderia facilitar e agilizar o processo de desenvolvimento. Neste artigo, explico primeiro as suas funcionalidades e, posteriormente, minha experiência prática com ela.

Primeiras impressões e tutorial inicial

Logo após o primeiro login, a IDE oferece a opção de importar configurações do VS Code — o que facilita bastante para quem já é familiarizado com aquele ambiente. A interface é praticamente idêntica à do VS Code, o que reduz muito a curva de aprendizado.

A instalação inicial é fluida e já conta com opções como terminal personalizado e sugestões inteligentes ativadas por padrão. Ela tem alguns modos de funcionamento como Agent, Ask e Manual.

Agent: a IDE irá conhecer a sua base de código de forma automática e poderá aplicar alterações em todo o seu código de acordo com as suas necessidades, é a forma mais recomendada de ser utilizada.
Ask: é a maneira convencional de se utilizar o Chat IA. Você consegue obter explicações e sugestões pelo chat sem que ele aplique alterações no seu código.
Manual: semelhante ao Agent, porém voltado para um escopo mais específico de alteração. A diferença é que não explora a sua base de código e nem executa comandos no terminal.

A IDE oferece um tutorial direto ao ponto, com atalhos que maximizam a interação com a IA:

Ctrl + K: interações com o código, como refatorações ou criação de funções.
Tab: sugestões inteligentes e autocompletar.
Ctrl + I: geração de estruturas como pastas e componentes.

Além disso, o painel lateral com o chat da IA fornece essas funções de forma interativa. As respostas são rápidas e mostram um entendimento surpreendente das tarefas, muitas vezes antecipando necessidades e oferecendo soluções antes mesmo de serem solicitadas. Claro que descrever o contexto com detalhes importantes ajuda a ter uma resposta mais precisa sobre a necessidade.

Recursos notáveis

Autocompletar inteligente

O recurso de autocompletar do Cursor se destaca por sua inteligência contextual avançada. Ao analisar o código existente e a estrutura do projeto, ele oferece sugestões precisas e contextualmente relevantes. A tecla Tab ativa essas sugestões, que vão desde completar funções e variáveis até gerar blocos de código inteiros baseados no padrão do projeto. O sistema aprende com seu estilo de codificação e se adapta, tornando o desenvolvimento mais fluido e eficiente. Infelizmente, na versão gratuita esse recurso tem limitações significativas de uso, o que pode impactar a experiência completa da ferramenta.

Aprimoramento com contexto

O chat da IDE possui um recurso poderoso de adição de contexto que potencializa significativamente as respostas da IA. Você pode enriquecer suas solicitações de várias formas:

Referências de código: incluir caminhos relativos de arquivos ou nomes de componentes/páginas específicas.
Documentação: anexar documentos técnicos ou especificações.
Referências visuais: adicionar imagens ou mockups para implementação.
Descrições detalhadas: fornecer explicações contextuais sobre o objetivo.

Quanto mais contexto você fornecer, mais precisas e alinhadas serão as sugestões e implementações geradas pela IA. O sistema é flexível, permitindo tanto referências diretas a arquivos quanto descrições verbais do que precisa ser modificado.

Modos de seleção da IA

O Cursor oferece diferentes IAs. Você pode selecioná-las manualmente ou deixar no modo automático e, conforme a sua necessidade, ele avalia qual seria a melhor para te atender.

Modo automático: ótimo para tarefas rotineiras.
Modo MAX: gera respostas mais completas e inteligentes, mas consome rapidamente os créditos da licença Pro.

Meus primeiros usos

Utilizei a IA em dois tipos de projetos: o primeiro iremos chamar de Projeto A, e o segundo, de Projeto B. No Projeto A, com uma interface já planejada e pronta no Figma, componentes e bibliotecas já estabelecidas, e regras de autenticação e permissões já definidas, testei a IA em um ambiente mais "engessado" para ver como ela poderia acelerar e melhorar as entregas. No Projeto B, foi um teste em um escopo aberto na criação de SAAS, onde dei mais liberdade e tentei acelerar o desenvolvimento.

No Projeto A

Após a criação manual do projeto a partir de um template básico com autenticação e configurações de deploy, iniciei a configuração do meu CSS, pedindo a instalação completa do Tailwind CSS. Após isso, expliquei para ela as páginas que eu utilizaria e, em seu contexto, sempre deixando claro as ferramentas que ela poderia utilizar, como Ant Design. Utilizei prints do Figma para ela inicializar os meus componentes. Nesse ponto, tive muita vantagem na organização do projeto, porém, por serem componentes complexos e customizados do Ant Design, consegui aproveitar cerca de 20% do que ela criou.

Para um uso eficiente da IA, ao realizar minhas perguntas, eu mencionava brevemente as ferramentas disponíveis no projeto e alguns componentes já criados para que ela utilizasse como exemplo. No chat, existe um campo para adicionar o contexto, que pode ser qualquer coisa, como um texto ou arquivo, mas o que mais utilizei foi inserir o caminho do local onde eu gostaria que ela aplicasse a alteração ou usasse como exemplo. O caminho pode ser passado diretamente no chat ou colocado nas opções de contexto. A IA consegue usar esses caminhos relativos para entender e gerar componentes com base em outros existentes.

Durante a reorganização de componentes, observei que alguns trechos foram quebrados — o que exigiu correções manuais. O próprio chat permite uma revisão das alterações que poderão ser aprovadas ou rejeitadas, isso facilitou muito a análise das suas implementações.

No Projeto A, ela se mostrou muito útil em atividades como criar e aplicar a tradução nas labels e campos, melhoria e organização do código, identificação de perda de memória ou problemas no ciclo de vida de execução, e melhoria na resolução de bugs e inconsistências. Seu autocompletar fez uma diferença significativa, não consegui mensurar com precisão, mas tive uma melhoria de 15% na velocidade das entregas apenas com o recurso de autocompletar.

No Projeto B

No Projeto B, criei um backend com NestJS apenas explicando o contexto do projeto e com um arquivo da estrutura da base de dados. Ela criou as APIs que solicitei, deixando tudo configurado e até mesmo uma integração com gateway de pagamento, onde tive apenas o trabalho de passar a chave da API. Pedi para que criasse um arquivo de documentação das APIs e dos detalhes de funcionamento. Exportei o chat e usei junto o arquivo de documentação no projeto front já pré-configurado. Pedi para que ela lesse o arquivo de documentação e sozinha criou as implementações de telas para cada API criada no backend, só tive o trabalho de validar o código implementado. Claro que nesse contexto dei a liberdade "artística" na interface e nos componentes. Tive um ganho de tempo super considerável usando-a nesse contexto.

Em resumo, testei sua capacidade de ler imagens e compreender códigos já implementados, com o objetivo de usá-los como referência para novas criações. Nesse processo, identifiquei algumas limitações, que podem ser atenuadas ao formular perguntas mais claras e direcionadas, além de fornecer links para artigos específicos e exemplos alinhados ao padrão de código existente.

Dicas de uso

O seu autocomplete (TAB) é muito poderoso, porém, para a versão gratuita acaba sendo bem limitado. Sugiro analisar bem cada uso para que otimize o que realmente seja vantajoso. Percebo que, em alguns casos, apenas conhecer os atalhos nativos da IDE já seria suficiente. No entanto, sua utilidade se destaca mesmo quando compreende o conceito por trás da lógica e consegue antecipar funções e implementações mais entensas.

Assim como a maioria das IAs, a forma com que geramos as perguntas melhora a entrega e reduz o gasto das requisições. Esclarecer para ela de forma direta e reduzida melhora bastante a performance das entregas. Aqui vão algumas dicas de como montar as suas perguntas:

Tarefa: esclarecer diretamente o que precisa ser feito.
Contexto: dizer brevemente as ferramentas e linguagens que estão sendo utilizadas, ou até o contexto de mercado.
Output: formato de saída, se seria apenas uma resposta simples ou alteração direta no código.
Exemplos: passar exemplos do próprio código, ou até mesmo recursos externos como links para aprendizado ou identificação do padrão de desenvolvimento.
Regras: definir regras para impedir que ela altere pontos críticos ou utilize algum padrão não desejado no desenvolvimento.

Usando esse padrão, consegui aproveitar melhor os tokens fornecidos gratuitamente e da versão Pro do Cursor.

Vale a pena a versão Pro?

A versão Pro custa US$20, cerca de R$118 na cotação da compra. Em testes, criei um CRUD do zero, sem especificações detalhadas de UI,e a IA reduziu em até 80% o esforço bruto. E, diferente da versão gratuita, o uso do autocomplete e das respostas mais complexas acaba não sendo tão limitado. Comparando com a versão gratuita, a maior diferença é perceptível no uso do autocomplete. Nas demais funcionalidades, com o modo "Max" também vemos uma compreensão melhor e respostas com uma qualidade superior.

Na minha experiência, a versão Pro realmente faz diferença para quem busca produtividade máxima e utiliza intensamente recursos de IA no dia a dia. O maior benefício está no desbloqueio do autocompletar inteligente e na liberdade para usar o modo Max sem se preocupar tanto com limites. Para quem trabalha com projetos grandes, precisa de respostas mais completas ou quer acelerar entregas, o investimento se paga rapidamente. No entanto, para usos mais pontuais ou para quem está começando, a versão gratuita já oferece um bom panorama das capacidades da ferramenta, permitindo avaliar se vale a pena migrar para o plano pago.

Nem tudo são flores

Apesar dos muitos pontos positivos, a ferramenta pode apresentar oscilações consideráveis na qualidade das entregas. Em alguns momentos, ela altera arquivos por conta própria, toma decisões inesperadas e até remove funcionalidades importantes, o que pode ser frustrante. No entanto, esses casos não são tão frequentes e, na maioria das vezes, o resultado é satisfatório. É importante sempre revisar as alterações sugeridas pela IA antes de aprová-las, garantindo que nada essencial seja perdido ou modificado indevidamente.

Conclusão

O Cursor se mostrou uma ferramenta poderosa para desenvolvedores que querem aliar produtividade e inteligência artificial no fluxo de trabalho. Sua integração nativa com IA, somada à interface familiar do VS Code, torna a adoção fácil e o ganho de eficiência perceptível desde os primeiros usos. O autocompletar inteligente, o chat contextual e a possibilidade de aplicar alterações diretamente no código são diferenciais que realmente impactam o dia a dia.

Apesar de algumas limitações na versão gratuita, principalmente no uso do autocompletar, a experiência geral é muito positiva. A versão Pro potencializa ainda mais esses ganhos, sendo indicada para quem deseja extrair o máximo da ferramenta. O segredo para aproveitar bem está em saber formular perguntas objetivas, fornecer contexto e explorar os recursos de automação oferecidos.

Recomendo o Cursor para quem já tem um bom conhecimento em programação, seja em projetos pessoais ou profissionais, e quer experimentar o futuro das IDEs com IA integrada. Não recomendo para iniciantes na programação, pois ele poderia até prejudicar seus conhecimentos caso seja usado de maneira inadequada no aprendizado.

🔗 Site oficial do Cursor

Angular v10 vs v15: Principais mudanças e melhorias

vandrei de lima — Mon, 23 Oct 2023 16:38:05 +0000

Olá!

Neste artigo, vou apresentar as principais melhorias e atualizações que ocorreram entre o Angular 10 e a versão 15 do framework. A migração de projetos Angular é crucial para aprimorar o desenvolvimento e a experiência final dos usuários. Para aqueles que atualmente utilizam em seus projetos o Angular 10, especialmente em conjunto com o Angular Material, é fundamental planejar a migração a fim de aproveitar ao máximo os recursos aprimorados disponíveis no Angular 15. O propósito deste artigo é fornecer uma lista das atualizações mais significativas e orientações sobre as migrações.

Dentro das atualizações, tivemos melhorias significativas no core e no processamento do build e melhorias e avanços no NGCC (Angular compatibility compiler) que podem trazer uma velocidade de compilação de até 4x mais rápido, trazendo mais velocidade para o desenvolvimento.

A versão 10 do angular consegue utilizar até a versão 3.9 do typescript e na 15 temos um grande avanço, podendo utilizar até a versão 5.0, trazendo benefícios e novas ferramentas para o desenvolvimento. Além disso, tivemos melhorias visuais na estrutura de log, facilitando a busca de problemas que podem ocorrer no desenvolvimento. Nas versões mais recentes, tivemos a depreciação do TSLint, de forma que agora é necessário migrar para o ESlint.

Foi adicionado também o “Hot Module Reloading”, que uma vez ativado não requer a atualização de toda a tela quando é feita uma mudança em algum módulo ou componente. Isso também traz velocidade para quando estivermos fazendo alterações em alguma tela na qual o tempo de carregamento é alto.

Para ativar o HMR, basta iniciar o server utilizando o parâmetro --hmr:

ng serve --hmr.

Agora, também podemos utilizar a coalescência nula no template e, com isso, além de poder utilizar a condição ternária, também podemos criar condições de forma mais simples. Confira o exemplo abaixo:

Ternario
{{age !== null && age !== undefined ? age : entity.age }}

Coalescência nula
{{ age ?? entity.age }}

A estrutura de um projeto angular é separada por módulos. E isso para quem está iniciando pode gerar um pouco de confusão. Mas não se preocupe, não é nada complexo: o lado positivo dos módulos é conseguir gerar um carregamento por demanda e com isso só será executado o código que for necessário. Isso ajuda a evitar carregamento desnecessário de script.

O problema atual é o seguinte: ao criar um dumb component (componente genérico sem regra de negócio) que seria compartilhado com outros módulos, você precisa criar um módulo apenas para ele e com isso importar nos módulos os locais nos quais gostaria de utilizar. Porém, na versão 14 do angular, foi estabilizado os “standalones” componentes, no qual um componente pode importar outros módulos para utilizar e pode ser importado por qualquer outro módulo, sendo independente de um módulo pai.

Isso ajuda e facilita bastante, sem essa ferramenta alguns projetos criam os “sharedModule” nos quais eles importam e declaram vários componentes. E o problema é que às vezes queremos utilizar apenas um ou dois componentes e precisamos importar o módulo inteiro. Com os “standalones” componentes, isso será resolvido: você apenas importará os componentes necessários, diminuindo a quantidade de código carregado pelo navegador.

Aqui está um exemplo de como seria um "standalone component":

@Component({
  standalone: true,// declara um standalone component
  selector: 'photo-gallery',
  imports: [ImageGridComponent], // importa os modulos utilizados por ele
  template: `
    ... <image-grid [images]="imageList"></image-grid>
  `,
})
export class PhotoGalleryComponent {
  // component logic
}

Agora, basta importar esse componente no módulo que deseja utilizar e pronto: estará pronto para o uso.

Para a injeção de dependência, tivemos algumas melhorias e a maneira de declarar ficou facilitada. A partir de agora, temos o método inject() e a sua principal vantagem é poder realizar a injeção de dependência sem precisar declarar explicitamente o tipo do parâmetro, de forma a tornar o código mais limpo e legível.

Veja o exemplo abaixo:

import { inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

export function getRouteParam(key: string) {
  return inject(ActivatedRoute).snapshot.params[key];
}

@Component({
  selector: 'app-todo-page',
  templateUrl: './todo-page.component.html',
})
export class TodoPageComponent {
  id = getRouteParam('id');

  ngOnInit() {
    console.log(this.id)
  }
}

Tivemos melhorias gerais de acessibilidade, tanto para os componentes como para as rotas, que deixaram os componentes mais estáveis. Além disso, tivemos melhorias nas diretivas, de forma a permitir a inclusão nos elementos host e a estabilizar as diretivas para imagens.

Agora, se você for realizar uma migração extensa como essa partindo do angular 10 para o 15, eu tenho aqui algumas recomendações:

Comece a migração como uma escada, não parta do 10 direto para o 15, vá subindo gradualmente as versões do angular. Isso evita dores de cabeça e facilita identificar caso alguma biblioteca fique estagnada e não possa mais ser utilizada. Verifique a lib dos componentes e, caso esteja utilizando o angular material, fique atento às alterações de certos componentes (alguns mudaram até os seletores).

Conclusão

Neste artigo, exploramos as principais mudanças que ocorreram no Angular, desde a versão 10 até a versão 15. Ao destacar essas transformações, meu objetivo foi proporcionar a você uma compreensão mais clara das novas ferramentas e recursos disponíveis, e mostrar como você pode aproveitá-los para melhorar o desenvolvimento de seus aplicativos Angular.

No entanto, é fundamental notar que o Angular é uma plataforma em constante evolução. A partir da versão 16, testemunhamos mudanças significativas, inclusive na abordagem para o gerenciamento de estado e em muitos outros aspectos.

Portanto, se você estiver considerando a migração para as versões mais recentes do Angular, este artigo serviu como um ponto de partida, mas é altamente recomendável manter-se atualizado com a documentação oficial e as comunidades do Angular para aproveitar ao máximo essas novas oportunidades.