diff --git a/.gitignore b/.gitignore index ed5e96e..45476dd 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,7 @@ resources/ # Editor .vscode/ + +# Obsidian plugin +.obsidian/* + diff --git a/.mdl_style.rb b/.mdl_style.rb index a03394a..26527f3 100644 --- a/.mdl_style.rb +++ b/.mdl_style.rb @@ -14,3 +14,9 @@ # Prefere numeração sequencial (1. 2. 3.) em vez do padrão do mdl (1. 1. 1.). rule "MD029", :style => :ordered +# Título em forma de pergunta é conteúdo legítimo em pt-BR (ex.: "O que é +# Dev Teste?") — o padrão do mdl inclui "?" como pontuação de título a +# evitar, o que soaria estranho removido. Mantém apenas ".,;:!" como +# pontuação acidental de fato. +rule "MD026", :punctuation => ".,;:!" + diff --git a/README.md b/README.md index 4acf62a..24ffa91 100644 --- a/README.md +++ b/README.md @@ -54,6 +54,13 @@ bundle install bundle exec mdl content README.md ``` +O `mdl` só aponta os problemas, não corrige. Pra corrigir automaticamente o que dá pra +corrigir sem risco (ver `scripts/fix_markdown.rb` pra saber exatamente o quê): + +```bash +bundle exec ruby scripts/fix_markdown.rb +``` + ## Changelog e releases O `CHANGELOG.md` (formato [Keep a Changelog](https://keepachangelog.com/en/1.1.0/)) é gerado diff --git a/content/about.md b/content/about.md index 289d9c7..80ab6f5 100644 --- a/content/about.md +++ b/content/about.md @@ -3,4 +3,17 @@ title: About type: about --- -This is the about page. +About this Blog! + +Olá, me chamo Kellen, e meu objetivo com este blog, é te-lo como uma memória +para guardar minhas notas, no futuro ter para consulta-las, relembrar de algum tutorial +de instalação, alguma ferramenta, como eu utilizei na época em que escrevi, voltar nas notas +atualizar, com updates e aprendizados. Também melhorar minha escrita e treinar escrever, fazer explicações +e desenvolver melhor a escrita. + +Este blog não é um tutorial supremo ou fonte da verdade, sempre vou citar as referencias aqui que busquei. +Fique a vontade de abrir uma [Issues aqui](https://github.com/kellen-xavier/ladydebug.github.io/issues) e citar algum erro. + +Fique a vontade para copiar o template como referência. +Segue meus incentivos de blogs: [tecnologia](https://akitaonrails.com/) e [blog que eu lia quando tinha 15 anos](https://www.depoisdosquinze.com/) onde acompanho a algum tempo e ocorreu a vontade (e necessidade) de criar o meu. +O template que peguei pode ser encontrado [aqui](https://themes.gohugo.io/) diff --git a/content/docs/2025/abril/pesquisa-de-sites-mercado-foco-em-academias.md b/content/docs/2025/abril/pesquisa-de-sites-mercado-foco-em-academias.md new file mode 100644 index 0000000..94320ec --- /dev/null +++ b/content/docs/2025/abril/pesquisa-de-sites-mercado-foco-em-academias.md @@ -0,0 +1,49 @@ +--- +title: "Pesquisa de Sites | Mercado com foco em Academias" +date: 2025-04-17 +slug: pesquisa-de-sites-mercado-foco-em-academias +tags: [pesquisa, ux, design] +draft: false +--- + +### Estudos e Análise Geral de Sites de Academias de Atividades Físicas + +Essa breve pesquisa foi realizada para um protótipo de site no nicho de academias, com o objetivo de divulgar um estúdio de academia, focado em objetivos pessoais, voltado a pessoas que não gostam de academias lotadas e sem atenção de instrutores, priorizando a pessoalidade no atendimento. + +--- + +**1. Padrão dos sites de academias:** + +Normalmente, sites de academias são construídos com foco em três grandes pilares: + +- **Apresentação de serviços:** mostrar os tipos de treinos (musculação, funcional, spinning, pilates, yoga etc.). +- **Captação de novos alunos:** destacar promoções, planos, aulas experimentais e formulários rápidos de contato. +- **Prova social:** exibir fotos reais, depoimentos de alunos e resultados alcançados. + +**2. Estrutura comum que aparece nesses sites:** + +- **Página inicial chamativa:** com imagens de pessoas treinando, mensagens motivacionais, e destaque para diferenciais da academia (24h, avaliação física grátis, estacionamento, etc.). +- **Planos e preços:** muita gente procura rapidamente o valor da mensalidade — alguns sites mostram, outros obrigam o usuário a preencher um formulário primeiro (o que pode gerar abandono). +- **Agenda de aulas coletivas:** algumas academias disponibilizam a programação semanal de aulas no próprio site. +- **Localização:** um mapa integrado (Google Maps) é quase obrigatório, já que localização é fator decisivo. +- **Área do aluno:** alguns sites mais modernos oferecem login para alunos acompanharem treinos, pagamentos e evolução física. +- **Blog ou dicas de saúde:** pouco usado, mas quando existe, ajuda no SEO (atrair mais visitantes via Google). +- **Chat ou WhatsApp direto:** muitos sites têm botões flutuantes para contato rápido via WhatsApp. + +**3. Comportamento de quem procura sites de academias:** + +- **Busca por praticidade:** as pessoas querem informações rápidas. Sites lentos ou com excesso de formulários perdem usuários. +- **Comparação:** é comum o usuário abrir vários sites de academias próximas para comparar preços, estrutura e diferenciais. +- **Busca por credibilidade:** fotos de qualidade, estrutura física mostrada e depoimentos reais aumentam a confiança. +- **Interesse em benefícios imediatos:** promoções de matrícula grátis, descontos na primeira mensalidade ou aula experimental gratuita costumam ser gatilhos decisivos. + +**4. SEO e tráfego:** + +- Boa parte das buscas vem de palavras-chave locais, como "**academia em [nome da cidade/bairro]**" ou "**academia perto de mim**". +- Sites otimizados para essas buscas locais têm muito mais chances de serem encontrados organicamente (sem precisar pagar anúncios). + +**5. Design e tendências atuais:** + +- Visual clean e moderno (nada poluído). +- Vídeos curtos na homepage mostrando o ambiente. +- Integração com redes sociais (principalmente Instagram). diff --git a/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/aplicado-value-proposition-canvas.png b/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/aplicado-value-proposition-canvas.png new file mode 100644 index 0000000..992bad0 Binary files /dev/null and b/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/aplicado-value-proposition-canvas.png differ diff --git a/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/chatgpt-1.png b/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/chatgpt-1.png new file mode 100644 index 0000000..7bd393c Binary files /dev/null and b/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/chatgpt-1.png differ diff --git a/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/chatgpt-ideacao.png b/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/chatgpt-ideacao.png new file mode 100644 index 0000000..764e7f4 Binary files /dev/null and b/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/chatgpt-ideacao.png differ diff --git a/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/checklist.png b/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/checklist.png new file mode 100644 index 0000000..18716bf Binary files /dev/null and b/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/checklist.png differ diff --git a/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/index.md b/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/index.md new file mode 100644 index 0000000..86771a5 --- /dev/null +++ b/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/index.md @@ -0,0 +1,157 @@ +--- +title: "Quais ferramentas que estudamos você já experimentou e quais pretende experimentar para promover a inovação em seu ambiente de desenvolvimento de software?" +date: 2025-04-24 +slug: promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software +tags: [design-thinking, ux, inovacao] +draft: false +--- + +Eu estou aplicando o estudo com a estúdio de musculação que frequento, aqui na Zona Norte de Porto Alegre. Solicitei permissão ao dono da academia — que está iniciando o negócio desde janeiro de 2025 — para aplicar estes estudos e desenvolver um projeto em um negócio real, baseado em necessidades reais. + +--- + +**O projeto seria**: criar uma landing page para o estúdio, aplicando as técnicas de Design Thinking e os estudos vistos em aula de Inovação e Empreendedorismo — Inovação e Empreendedorismo - Web 03. + +**Início do projeto:** acompanhei a abertura do estúdio de musculação desde janeiro de 2025, e, desde então, fui a aluna — junto com outro amigo próximo — a treinar no novo local. Primeira coisa que perguntei ao dono foi: como vai funcionar a academia? Vai ter horários flexíveis? Quem vai treinar no local? + +Visando isso, procurei entender melhor, conversando com o dono do negócio — Academia Estúdio de Musculação — e levantei essas perguntas. Outro ponto em destaque é que eu treino lá desde o início — por conhecer o dono, fui a aluna-teste do local 😂 — o que acabou agregando ao projeto, pois tive pessoalmente a visão de alguns pontos importantes. + +### 1. Empatia (entender o problema sob o ponto de vista do usuário) + +Como sou usuária da academia, enfrentei alguns problemas, como: quais são os valores? Como funcionam os pacotes com acompanhamento nutricional? Há parceria com lojas de suplementos? Quanto custa o whey protein? Entre outros. Percebi que os alunos que vieram depois também tinham essas dúvidas. Quando fui recomendar a academia, também tive dificuldades para compartilhar o endereço e informar os valores de cabeça — sabia apenas o que utilizava, no caso o TotalPass. Não havia um local centralizado para consultar essas informações. + +### 2. Definição (refinar o problema) + +Com base nisso, organizei todas as informações que tinha em mãos e conversei com o dono do negócio para entender e refinar as questões. Utilizando técnicas de design thinking, apliquei o **Value Proposition Canvas** para não deixar tudo apenas dentro da minha cabeça e também compartilhar com o envolvido — o dono do negócio. Segue abaixo: + +![Value Proposition Canvas](value-proposition-canvas.png) + +![Value Proposition Canvas aplicado ao projeto do estúdio](aplicado-value-proposition-canvas.png) + +Utilizei também o ChatGPT para estruturar de forma detalhada e organizar todas as informações nos devidos lugares, a fim de não perder o foco nos detalhes. + +### ChatGPT + +![Uso do ChatGPT para organizar as informações](chatgpt-1.png) + +Abaixo, utilizei como um checklist das informações que já havia mapeado, para manter a organização e não me perder no processo: + +![Checklist de informações mapeadas](checklist.png) + +Para tornar a entrevista mais clara, resolvi criar um formulário para enviar ao dono do negócio responder; **isso corresponde às "Definições" citadas e aplicadas aqui.** + +--- + +### 3. Ideação + +Visto acima no ChatGPT temos o seguinte: + +![ChatGPT na fase de ideação](chatgpt-ideacao.png) + +Vou mudar alguns pontos que acho importante reorganizar com base nas necessidades vistas lá no mapeamento com o **Value Proposition Canvas**. + +Brainstorm para soluções da Landing Page: EDITADA + +- Blocos organizados: Quem somos | Planos Diferenciais | Estrutura | Agendamento - Contato | FAQ +- Botão direto para WhatsApp +- Fotos do ambiente com qualidade - passando credibilidade +- Chamada de Ação: destaque no diferencial do negócio, avaliação gratuita física. +- FAQ rápido com as dúvidas levantadas pelos novos usuários (isso vai ser coletado no formulário). + +--- + +### 4. Prototipagem + +![Prototipagem inicial](prototipagem-1.png) + +Eu sou péssima com Design 😭 **então utilizei a ferramenta do Canva para dar vida** a isso, e não deixar isso ser meu impedimento. + +**OBS**: vamos relembrar brevemente da aula ao vivo sobre "legal, vamos lá fazer isso" + +![Aula ao vivo sobre prototipagem](prototipagem-2.png) + +EU não sei design + +![Tentativa de prototipagem no Canva](prototipagem-3.png) + +--- + +## 5. O Teste + +Criação do protótipo: como citado, este protótipo foi feito no Canva, com o objetivo de tornar visual todo o planejamento do Value Proposition Canvas. Abaixo, segue a sequência das telas: + +![Tela 1 do protótipo](teste-prototipo-1.png) + +![Tela 2 do protótipo](teste-prototipo-2.png) + +Incluir parte dos serviços que falta para responder do formulário. + +![Tela 3 do protótipo](teste-prototipo-3.png) + +![Tela 4 do protótipo](teste-prototipo-4.png) + +![Tela 5 do protótipo](teste-prototipo-5.png) + +![Tela 6 do protótipo](teste-prototipo-6.png) + +Foi desenvolvido este rascunho inicial do protótipo, com o objetivo de validar as necessidades do proprietário do negócio em relação ao atendimento de seus clientes. + +A construção do protótipo possibilitou a identificação de pontos relevantes e, sobretudo, representou um avanço significativo ao transformar ideias em uma versão prática e visual. O processo de desenvolvimento mostrou-se ágil e funcional, permitindo direcionar os próximos passos. + +Como continuidade, propõe-se a realização de novos testes com usuários e a execução do site em ambiente real, a fim de avaliar se as funcionalidades implementadas atendem às necessidades previamente mapeadas. + +**Protótipo Canva**: [link](https://testeladybug.my.canva.site/cada-rotina-e-pessoa-diferente-por-isso-nos-certificamos-de-que-voc-possa-escolher-um-plano-que-funcione-melhor-para-voc) + +--- + +## Pesquisa em Formulário para melhor análise e entendimento + +# 2. Questionário baseado no Design Thinking + +(Para usar na fase **Empatia + Definição** com o cliente) + +## Perguntas sobre o Negócio + +1. Como você descreveria a missão e os valores do seu estúdio? +2. Qual a principal diferença do seu estúdio para outras academias? +3. Quais serviços ou vantagens você mais gostaria de destacar para novos alunos? +4. Qual sentimento ou impressão você gostaria que o aluno tivesse ao visitar o estúdio? + +## Perguntas sobre os Clientes + +1. Quem são seus principais clientes hoje? (idade, perfil, objetivos) +2. O que seus alunos costumam elogiar mais no seu serviço? +3. **Quais dúvidas ou receios os novos alunos mais demonstram quando entram em contato?** +4. O que já ouviu de feedback positivo ou negativo sobre a experiência na academia? + +## Perguntas sobre Comunicação + +1. Hoje, quais canais você usa para divulgar seu estúdio? (Instagram, WhatsApp, indicações, etc.) + +## Perguntas sobre Serviços Extras + +1. Como funciona a parceria com a nutricionista? (valores, agendamento, diferenciais) +2. Como funciona a parceria com suplementos? (marcas, descontos, vantagens) + +## Perguntas sobre Experiência + +1. Que tipo de benefícios você gostaria de oferecer para novos alunos? (promoções, aula experimental, desconto na 1ª mensalidade) + +--- + +## Links de Referência + +**Confira o Protótipo do site**: [https://site-academia-app.vercel.app/](https://site-academia-app.vercel.app/) + +Pesquisa de Sites | Mercado com foco em Academias - [Link](/docs/2025/abril/pesquisa-de-sites-mercado-foco-em-academias/) + +**Referências de Estudos**: + +- **Link** sobre qualidade do produto - Rian Dutra: [LinkedIn](https://www.linkedin.com/posts/riandutra_prestes-a-falir-cortam-o-design-e-marketing-activity-7315692085477539840-InMr) +- Livro: Não me faça pensar - Steve Krug +- Livro: O Design do dia a dia - Donald A. Norman +- Livro: Value Proposition Design - pág: 142, 228, 232 +- Pós-graduação Unisinos - Aulas Inovação e Empreendedorismo com a [Profª Rosemary Francisco](https://www.linkedin.com/in/rmaryf) +- Ferramentas: [Canva](https://www.canva.com/), Vercel App para deploy do site +- [Como identificar e resolver pontos de dor (pain points) do usuário no UX Design](https://psicologia.design/como-identificar-e-resolver-pontos-de-dor-user-pain-points-do-usuario-no-ux-design-com-psicologia-aplicada/) +- [Como usar storytelling no UX Design](https://psicologia.design/como-usar-storytelling-no-ux-design/) diff --git a/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/prototipagem-1.png b/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/prototipagem-1.png new file mode 100644 index 0000000..9ca0ecf Binary files /dev/null and b/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/prototipagem-1.png differ diff --git a/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/prototipagem-2.png b/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/prototipagem-2.png new file mode 100644 index 0000000..2aea923 Binary files /dev/null and b/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/prototipagem-2.png differ diff --git a/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/prototipagem-3.png b/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/prototipagem-3.png new file mode 100644 index 0000000..7ce35f6 Binary files /dev/null and b/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/prototipagem-3.png differ diff --git a/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/teste-prototipo-1.png b/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/teste-prototipo-1.png new file mode 100644 index 0000000..7700d7e Binary files /dev/null and b/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/teste-prototipo-1.png differ diff --git a/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/teste-prototipo-2.png b/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/teste-prototipo-2.png new file mode 100644 index 0000000..af659d9 Binary files /dev/null and b/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/teste-prototipo-2.png differ diff --git a/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/teste-prototipo-3.png b/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/teste-prototipo-3.png new file mode 100644 index 0000000..e96a1e4 Binary files /dev/null and b/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/teste-prototipo-3.png differ diff --git a/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/teste-prototipo-4.png b/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/teste-prototipo-4.png new file mode 100644 index 0000000..60fad3c Binary files /dev/null and b/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/teste-prototipo-4.png differ diff --git a/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/teste-prototipo-5.png b/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/teste-prototipo-5.png new file mode 100644 index 0000000..3f5a9a8 Binary files /dev/null and b/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/teste-prototipo-5.png differ diff --git a/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/teste-prototipo-6.png b/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/teste-prototipo-6.png new file mode 100644 index 0000000..c326e3d Binary files /dev/null and b/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/teste-prototipo-6.png differ diff --git a/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/value-proposition-canvas.png b/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/value-proposition-canvas.png new file mode 100644 index 0000000..16089b5 Binary files /dev/null and b/content/docs/2025/abril/promover-a-inovacao-em-seu-ambiente-de-desenvolvimento-de-software/value-proposition-canvas.png differ diff --git a/content/docs/2025/junho/adocao-de-principios-de-design-e-arquitetura.md b/content/docs/2025/junho/adocao-de-principios-de-design-e-arquitetura.md new file mode 100644 index 0000000..098dd05 --- /dev/null +++ b/content/docs/2025/junho/adocao-de-principios-de-design-e-arquitetura.md @@ -0,0 +1,86 @@ +--- +title: "Fórum | Adoção de Princípios de Design e Arquitetura" +date: 2025-06-10 +slug: adocao-de-principios-de-design-e-arquitetura +tags: [arquitetura, design, qualidade] +draft: true +--- + +Trabalho - Pós-graduação | Projeto e Arquitetura de Software + +### Neste módulo, foram apresentados alguns princípios de design e umas implicações na manutenção e evolução de software. Quais desses princípios discutidos vocês já usam? Identifique os benefícios e dificuldades dessas adoções + +--- + +Com base no que foi visto em aula, algumas das coisas que costumo aplicar no dia a dia do meu trabalho, que é na área da qualidade. Várias coisas, quando não existem no projeto, acabo iniciando a conversa no time. Então varia bastante, conforme a cultura do time. Quando chego no projeto, faço uma análise geral do desenvolvimento do time no projeto. Então o passo inicial é aplicar conforme a necessidade, compartilhando a cultura de testes nos times. + +Algumas práticas seriam aplicar o uso de *linters* nos projetos, adicionar essas regras na CI, aplicar CI/CD também quando o projeto não tem. Os **lints automáticos** bloqueiam *pushes* com esses problemas de formatação ou más práticas, e o time acaba evitando diversos erros antes mesmo de mesclar a *branch* ou **executar o código**. + +Dentro do time, sempre busco analisar automação de testes com o time e documentar o projeto com o uso das próprias ferramentas do time, por exemplo: Javadocs, PHPDocs — . + +Compartilho ferramentas e *plugins* para IDEs, analiso processos básicos. Segue um exemplo que já compartilhei: a pirâmide de testes para dev e, aqui com o time de QA, exemplos de configuração do Testing Library. + +Já apliquei testes de API, que acredito que estejam agora voltados à "**Observabilidade**", que seria **a capacidade de entender o que está acontecendo dentro de um sistema apenas com base em sua saída externa**. Geralmente, nas análises, faço um plano de testes e levantamento de cenários de testes. Compartilho com o time para que sejam aplicados os testes. Com base nisso, por exemplo, na API, utilizei a ferramenta do K6 () e o Grafana (). Assim, era criada a automação com base nos cenários, executávamos os testes, e isso era validado dentro de uma *pipeline*, no próprio GitHub Actions. + +### Exemplo com K6 + +```javascript +import http from 'k6/http'; +import { check, sleep } from 'k6'; + +export let options = { + vus: 10, // Número de usuários virtuais simultâneos + duration: '10s', // Duração do teste +}; + +export default function () { + // Realizando a requisição de pagamento com cartão de crédito + const token = login(`${__ENV.USERNAME}`, `${__ENV.PASSWORD}`); + + const data = { + cardToken: "meio-de-buscar-token-exemplo", + providerMeioDePagamento: "um-code-que-defina-seu-meio-de-pagamento-exemplo" + }; + + const responseToken = http.post( + `${__ENV.SERVER}/seu/caminho/token-credit`, + JSON.stringify(data), + { + headers: { + 'Autorization': `Bearer ${token}`, + 'content-type': "application/json", + 'accept': "application/json", + }, + }, + ); + + check(responseToken, { + 'Defina uma mensagem aqui para o exemplo - identificando pagamento bem-sucedido': (response) => response.status === 200 + }); + + let response = http.post('https://sua_loja.com/processar_pagamento', { + cartao_credito: numeroCartao, + produto_id: produtoID, + parcelas: numParcelas + }); + + // Verificando requisição bem sucedida (código de status 200) + check(response, { + 'Defina uma mensagem aqui para o exemplo - Pagamento bem-sucedido': (response) => response.status === 200 + }); + + // Aguardando período de tempo para simular a navegação do usuário + sleep(3); +} +``` + +Hoje em dia, usar linters facilita bastante, pois evita essa "reação em cadeia" de más práticas dentro do projeto. Ao mudar a forma de como fazer, o linter faz o *scanner* no código e te faz pensar em como evitar acoplamento ou funções muito grandes — grandes o suficiente para que se perca o entendimento do que elas fazem, e sem validações. Mas ainda, como apresentar isso de forma gradual, os conceitos para aplicar no desenvolvimento, precisa de bastante conversa e cultura com o pessoal. + +--- + +### Fontes de Estudos - Pesquisa + +**Livros:** + +- Manual do Arquiteto de Software | Discutindo conceitos, **técnicas, tecnologias, padrões e procedimentos** para a boa prática de arquitetura de software. → Link [Aqui](https://elemarjr.com/livros/arquiteturadesoftware/volume-1/) +- Engenharia de Software Moderna — diff --git a/content/docs/2025/junho/api-estudos.md b/content/docs/2025/junho/api-estudos.md new file mode 100644 index 0000000..be4fc9b --- /dev/null +++ b/content/docs/2025/junho/api-estudos.md @@ -0,0 +1,40 @@ +--- +title: "API | Estudos" +date: 2025-06-13 +slug: api-estudos +tags: [api, java, boas-praticas] +draft: true +--- + +### Estudos, construindo uma API básica + +--- + +**Referências | Padronização de Projetos | Estruturas Design** + +- +- + +--- + +**Exemplos de nomes corretos por pasta** ♻️ + + + + + + + + + +
**Pasta****Exemplo de Arquivo**
modelFornecedor.java
dtoFornecedorDTO.java
repositoryFornecedorRepository.java
serviceFornecedorService.java
controllerFornecedorController.java
utilJsonUtil.java
+ +--- + +**Referências:** + +[console.cloud.google.com](https://console.cloud.google.com/apis/credentials?inv=1&invt=Ab0Hnw&project=neural-pattern-272200) +[Google Cloud console](https://console.cloud.google.com/marketplace/product/google/youtube.googleapis.com?q=search&referrer=search&inv=1&invt=Ab0GSw&project=fora-da-caixa-0001) +[YouTube Data API | Google for Developers](https://developers.google.com/youtube/v3?hl=pt-br) +[Guia de início rápido do Java | YouTube Data API | Google for Developers](https://developers.google.com/youtube/v3/quickstart/java?hl=pt-br) +[start.spring.io](https://start.spring.io/) diff --git a/content/docs/2025/junho/asserts-em-testes/image.png b/content/docs/2025/junho/asserts-em-testes/image.png new file mode 100644 index 0000000..259642b Binary files /dev/null and b/content/docs/2025/junho/asserts-em-testes/image.png differ diff --git a/content/docs/2025/junho/asserts-em-testes/index.md b/content/docs/2025/junho/asserts-em-testes/index.md new file mode 100644 index 0000000..83e3bb1 --- /dev/null +++ b/content/docs/2025/junho/asserts-em-testes/index.md @@ -0,0 +1,39 @@ +--- +title: "Asserts Em testes - Uma visão geral" +date: 2025-06-27 +slug: asserts-em-testes +tags: [testes, automacao] +draft: true +--- + +```java +public void suaQuantidadeDeAcordoComTamanhoUltimasPecas(String messageKey) { + aguardoElementoVisivel(txtUltimosProdutos); + String textoNaTela = txtUltimosProdutos.getText(); + Assert.assertEquals(getJsonData("Mensagens", messageKey), textoNaTela); +} +``` + +![Assert de exemplo](image.png) + +Abaixo o assert que existe: + +```java +public void naoSelecionaNenhumaOpcaoCorETam(String messageKey) { + quantidadeDeScroll(1); + //aguardoElementoVisivel(txtTamanhoSku); + String textoNaTela = txtTamanhoSku.getText(); + Assert.assertEquals(getJsonData("Mensagens", messageKey), textoNaTela); +} +``` + +**Como deve ser**: + +```java +public void naoSelecionaNenhumaOpcaoCorETam(String messageKey) { + quantidadeDeScroll(1); + //aguardoElementoVisivel(txtTamanhoSku); + String textoNaTela = messageKey.getText(); + Assert.assertEquals(getJsonData("Mensagens", messageKey), textoNaTela); +} +``` diff --git a/content/docs/2025/junho/comandos-git/entrando-na-pasta.png b/content/docs/2025/junho/comandos-git/entrando-na-pasta.png new file mode 100644 index 0000000..a175faa Binary files /dev/null and b/content/docs/2025/junho/comandos-git/entrando-na-pasta.png differ diff --git a/content/docs/2025/junho/comandos-git/index.md b/content/docs/2025/junho/comandos-git/index.md new file mode 100644 index 0000000..9ecc457 --- /dev/null +++ b/content/docs/2025/junho/comandos-git/index.md @@ -0,0 +1,233 @@ +--- +title: "Aprofundamento sobre: Terminal Comandos Git - Parte 1" +date: 2025-06-17 +slug: comandos-git +tags: [git, terminal, boas-praticas] +draft: false +--- + +Esse post começou com a ideia de ser somente sobre alguns "comandos de Git" que são práticos no dia a dia. Porém, eu não tinha nada por escrito que reunisse um compilado de estudos sobre o assunto de terminais também: o que é um terminal, como usar um, onde ler mais sobre terminais, antes de entrar em comandos Git. + +*Eu sempre comento que é importante saber usar o terminal. Minimamente, precisamos saber usar essas ferramentas; não adianta fugir disso, mesmo que tua IDE seja perfeita e toda visual, pois inevitavelmente vamos ter que lidar com problemas fora da interface visual.* + +Eu gosto da metáfora de dirigir um carro, por exemplo: eu imagino como se tu estivesses dirigindo um carro, ele para depois de apitar e tu precisas abrir o capô do carro para ver o que aconteceu. Pode ser um BYD totalmente automático, mas esse carro contém logs, uma caixa-preta — chamada EDR (Event Data Recorder). Aqui vou usar o termo "sujar as mãos" e não ter medo de comandos assim; entender como funciona por baixo dos panos traz uma clareza muito mais profunda. + +--- + +## Alguns Conceitos Base Importantes + +### O que é um terminal + +Um terminal é uma interface de texto para interação direta com o sistema operacional. Ele envia comandos ao shell (ex.: Bash, Zsh, PowerShell), que interpreta e executa instruções usando as APIs do sistema. + +### Fontes sobre Terminais - Lista de leituras e vídeos + +[Wikipédia](https://pt.wikipedia.org/wiki/Terminal_(inform%C3%A1tica)) +[[Akitando] #70 - Entendendo GIT | (não é um tutorial!)](https://akitaonrails.com/2020/02/05/akitando-70-entendendo-git-nao-e-um-tutorial/) +[[Akitando] #71 - Usando Git Direito | Limpando seus Commits!](https://akitaonrails.com/2020/02/12/akitando-71-usando-git-direito-limpando-seus-commits/) + +### Sistema de arquivos e navegação + +Quando de modo geral, vamos navegar em um terminal, ou seja, entrar e sair de pastas manipular arquivos, é igual como se fosse navegar em uma tela, mas aqui é por comandos. Quando aqui a gente dizer "faça tal coisa no repositório projeto/automação" estamos comentando que é dentro da pasta em questão. + +![Navegando em pastas](navegando-em-pastas.png) + +Visualmente temos, uma tela e onde precisa navegar. Quando abri o terminal (exemplo no ambiente Windows) talvez você veja algo como `C:\Users\meu.nome\Sua-pasta` no exemplo da imagem seria algo como: `C:\Users\kellen.xavier\Documents\Estudos\docs-estudos-obsidian` aqui minha organização pessoal é por em Documentos, dentro da pasta estudo, então aqui quando me referir a "entre no projeto de estudos obsidian, faça o git pull". + +Exemplo abaixo uma pasta qualquer, aí tenho que ir só que agora via terminal: se por acaso (a grande maioria abrir o terminal) vai ser algo parecido assim: + +```text +PS C:\Users\kellen.xavier> +``` + +Então vem os comandos para navegar até ele. + +### Comandos geralmente mais utilizados + +Navegação: + +```text +pwd # mostra o diretório atual +ls # lista arquivos e pastas +ls -la # lista detalhada (inclui ocultos) +cd pasta # entra na pasta +cd .. # volta um nível +cd ~ # vai para a home +``` + +**Se clicar aqui na barra conseguimos ver os caminhos a partir de kellen.xavier** (meu caso) → eu estou aqui: `C:\Users\kellen.xavier\Documents\Estudos\docs-estudos-obsidian` então via terminal: + +```powershell +cd Documents\Estudos\docs-estudos-obsidian +``` + +Aqui entrei na pasta: + +![Entrando na pasta pelo terminal](entrando-na-pasta.png) + +--- + +## GIT + +Segue abaixo uma sequência de comandos para utilizar, quando se (e principalmente) está trabalhando em projetos com mais de uma pessoa atuando. — Não esquecer — + +![PC pegando fogo](pc-fire.png) + +**Para fazer um merge da sua branch atual para a branch principal ("main"), você pode seguir esses passos:** + +```bash +git checkout sua-branch +$ git fetch origin # Puxa as últimas informações do repositório remoto +$ git rebase origin/main +# Atualiza sua branch com as alterações da branch main + +$ git rebase origin/main # Atualiza sua branch com as alterações da branch main +``` + +**Depois de ter sua branch (de desenvolvimento) atualizada, execute o comando git checkout para mudar para a branch "develop" (ou main):** + +```bash +git checkout develop +``` + +**Agora você está na branch "develop". Realize o merge da sua branch de desenvolvimento usando o seguinte comando:** + +```bash +git merge sua-branch +``` + +--- + +## Brevemente sobre Pull Request + +O objetivo de criar um Pull Request (PR) no GitHub (ou em outras plataformas de controle de versão) **é propor mudanças em um projeto de forma colaborativa e controlada**. Ao criar um Pull Request, você está solicitando que suas alterações em um branch (ramo) específico sejam revisadas e, se aprovadas, incorporadas (mescladas) ao branch principal do projeto, como o main ou develop. + +--- + +**Agora vamos para o seguinte cenário**: se caso você precise trabalhar especificamente com uma branch **que não é a main**, você precisará criar uma nova branch local baseada na branch remota desejada. Suponhamos que você queira trabalhar na branch minha-branch: + +**Dado isso, segue o comando git:** + +```bash +git checkout -b minha-branch origin/minha-branch-remota-desejada +``` + +Isso irá criar uma nova branch local chamada `minha-branch` baseada na branch remota `origin/minha-branch-remota-desejada`. + +Com esse comando, pode-se trabalhar com a **branch localmente**, e fazer commits e outras operações como de costume. + +--- + +**Comandos do dia-a-dia:** + +Antes de tudo, quando for iniciar o desenvolvimento no projeto, atualize seu ambiente local com o seu repositório remoto. + +```bash +git pull +``` + +Ao fazer isso, seu ambiente local se atualiza com as demais alterações feitas pelos colaboradores do projeto em que estão envolvidos. + +O comando git pull é usado para buscar (`fetch`) as alterações mais recentes de um repositório remoto e, em seguida, fazer um merge dessas alterações na branch atual em que você está trabalhando. Em outras palavras, ele combina os passos de `git fetch` e `git merge` em um único comando. + +Outro exemplo de git pull: + +```bash +git pull +``` + +Onde `` é o nome do repositório remoto de onde você deseja puxar as alterações (geralmente "`origin`") e `` é a branch remota da qual você deseja puxar as alterações (por exemplo, "`main`", "`develop`", etc.). + +### Alterações feitas + +Para enviar suas alterações para o repositório remoto, é preciso adicionar, seguindo de um comentário do que foi feito. + +Adicionar alteração: + +```bash +git add . +``` + +⚠️ Cuidado ao utilizar o `git add .` pois ele vai adicionar todas alterações realizadas. E isso precisa de atenção. Evite usar, recomenda-se utilizar o: + +```bash +git add nome-do-arquivo-ou-pasta +``` + +Após realizar faça o comentário: + +```bash +git commit -m "padrao-de-commit: minha mensagem" +``` + +**Leia aqui (por link depois) para saber mais sobre padrões de commits.** + +Agora, analise o seu terminal, se caso não tiver nenhum erro ou conflito, pode seguir para subir as alterações: + +```bash +git push +``` + +Para mesclar sua branch com a `main` no repositório, faça: + +```bash +git merge sua-branch +``` + +--- + +## Sobre git stash + +O comando `git stash` é utilizado para armazenar temporariamente as alterações que você fez no seu diretório de trabalho, permitindo que você volte ao estado anterior do repositório sem precisar fazer commit das alterações. Isso é útil quando você deseja alternar rapidamente entre diferentes tarefas ou branches sem comprometer as alterações que não estão prontas para serem confirmadas. + +Aqui estão alguns exemplos de como você pode usar o `git stash`: + +**Armazenar Alterações Temporariamente:** se você fez algumas alterações no seu diretório de trabalho, mas ainda não deseja commitá-las, você pode usar o seguinte comando para armazená-las temporariamente: + +```bash +git stash save "Descrição opcional" +``` + +A descrição é opcional e pode ajudar a identificar por que você armazenou essas alterações. + +**Listar Stashes:** você pode listar os stashes que você criou usando o seguinte comando: + +```bash +git stash list +``` + +**Aplicar Stash:** para aplicar o stash mais recente (ou um `stash` específico), você pode usar: + +```bash +git stash apply # Aplica o stash mais recente +git stash apply stash@{n} # Aplica um stash específico pelo seu índice +``` + +**Remover Stash:** depois de aplicar um stash, você pode removê-lo: + +```bash +git stash drop # Remove o stash mais recente +git stash drop stash@{n} # Remove um stash específico pelo seu índice +``` + +**Criar uma Nova Branch a partir do Stash:** se você quiser criar uma nova branch baseada em um stash, pode usar: + +```bash +git stash branch nova-branch # Cria uma nova branch e aplica o stash nela +``` + +--- + +**Outros pontos importantes:** + +Atualize sua **branch** com **as últimas alterações da branch principal** ("main"). Isso ajudará a **evitar conflitos durante o merge**. Execute os seguintes comandos: + +```bash +git fetch origin # Puxa as últimas informações do repositório remoto + +git rebase origin/main # Atualiza sua branch com as alterações da branch main +``` + +⚠️ **Atenção** + +Não faça git pull nessas situações. Leia novamente o que é **git pull**. diff --git a/content/docs/2025/junho/comandos-git/navegando-em-pastas.png b/content/docs/2025/junho/comandos-git/navegando-em-pastas.png new file mode 100644 index 0000000..e0e02df Binary files /dev/null and b/content/docs/2025/junho/comandos-git/navegando-em-pastas.png differ diff --git a/content/docs/2025/junho/comandos-git/pc-fire.png b/content/docs/2025/junho/comandos-git/pc-fire.png new file mode 100644 index 0000000..93b5d36 Binary files /dev/null and b/content/docs/2025/junho/comandos-git/pc-fire.png differ diff --git a/content/docs/2025/junho/piramide-de-testes-para-dev.md b/content/docs/2025/junho/piramide-de-testes-para-dev.md new file mode 100644 index 0000000..8c56038 --- /dev/null +++ b/content/docs/2025/junho/piramide-de-testes-para-dev.md @@ -0,0 +1,68 @@ +--- +title: "Passo a Passo para Dev Teste (Baseado na Pirâmide de Testes)" +date: 2025-06-05 +slug: piramide-de-testes-para-dev +tags: [testes, qualidade, piramide-de-testes] +draft: false +--- + +### 1. O que é Dev Teste? + +Antes de enviar um card para o status QA, o time de desenvolvimento deve validar o código aplicando testes sistemáticos em diferentes camadas (unitário, integração, funcional). Isso reduz retrabalho e melhora a qualidade do software. + +### 2. Estruturando os Testes + +A pirâmide de testes sugere: + +- Leitura das US/Histórias de Usuário - Leitura dos testes que compõem a US e os critérios de aceite. +- **Testes Unitários (Base da pirâmide):** Validam partes isoladas do código (ex.: funções, métodos). +- **Testes de Integração (Meio da pirâmide):** Garantem que diferentes partes do sistema interagem corretamente. +- **Testes Funcionais/E2E (Topo da pirâmide):** Validam o fluxo completo de usuário. + +### 3. Como aplicar no cenário do bug? + +### Passo 1: Teste Unitário + +✅ Criar testes para a query que busca o domínio correto no banco. + +- Verificar se a query está retornando apenas domínios do tipo *blog*. +- Garantir que não seja selecionado o primeiro domínio indiscriminadamente. + +Exemplo de teste unitário (PHPUnit): + +```php +public function testBuscaDominioCorreto() { + $dominio = new DominioRepository(); + $resultado = $dominio->buscarPorTipo('blog'); + $this->assertNotEmpty($resultado); + $this->assertEquals('blog', $resultado->tipo); +} +``` + +--- + +### Passo 2: Teste de Integração + +✅ Validar se o job `SaveSessionsUrlAnalyticsJob.php` está salvando corretamente os dados na tabela `analytics_session_urls`. + +- Simular uma execução do job com diferentes cenários de domínio. +- Checar se os dados são gravados corretamente. + +### Passo 3: Teste Funcional (Opcional, caso necessário) + +✅ Executar a funcionalidade completa e validar se os relatórios de RPS exibem os dados esperados. + +### 4. Como seguir no Time? + +1. Antes de abrir um bug, garantir que o código passou pelos testes unitários e de integração. +2. Adotar um fluxo de Dev Teste: **Desenvolvedor faz – Code Review – Dev Teste – QA**. +3. Registrar evidências dos testes, ter PR, evitando repassar códigos sem verificação prévia. + +**Como adicionar Evidências:** + +**Teste executando em ambiente dev**: os testes validados localmente, mesmo utilizando docker, não é válido, pois vários fatores de ambiente e rede não são validados nas conformidades. Gerando um falso positivo. Testes locais se enquadram por exemplo em outros tipos de testes, exemplo citado aqui os unitários. + +- Ambiente de dev; +- Capturas de telas caso for testes do tipo End-to-end; +- Ter PRs no card; +- Validar os cenários dos testes no card, caso não tenha, avise o QA responsável; diff --git a/content/docs/2025/junho/praticas-ruins-de-testes-para-evitar-ou/cat-cansado.png b/content/docs/2025/junho/praticas-ruins-de-testes-para-evitar-ou/cat-cansado.png new file mode 100644 index 0000000..0e3e125 Binary files /dev/null and b/content/docs/2025/junho/praticas-ruins-de-testes-para-evitar-ou/cat-cansado.png differ diff --git a/content/docs/2025/junho/praticas-ruins-de-testes-para-evitar-ou/index.md b/content/docs/2025/junho/praticas-ruins-de-testes-para-evitar-ou/index.md new file mode 100644 index 0000000..f36300c --- /dev/null +++ b/content/docs/2025/junho/praticas-ruins-de-testes-para-evitar-ou/index.md @@ -0,0 +1,85 @@ +--- +title: "As práticas ruins que devem ser evitadas em uma automação de testes" +date: 2025-06-05 +slug: praticas-ruins-de-testes-para-evitar-ou +tags: [testes, automacao, qualidade] +draft: false +--- + +Leia isso, imprimir, talvez imprima e cole no computador de uns aí… + +--- + +![Gato cansado](cat-cansado.png) + +## 1. Definição e Planejamento Inadequados + +**Falta de Objetivos Claros:** não definir claramente o objetivo da automação, os riscos envolvidos, o escopo e as partes interessadas. A automação sem objetivos bem definidos pode levar a esforços desperdiçados e resultados insatisfatórios. + +**Estratégia de Automação Mal Definida**: não ter uma estratégia de automação de teste que seja aplicável, personalizável e mantida atualizada. Uma estratégia mal definida pode resultar em testes ineficientes e difíceis de manter. + +**Não Considerar Critérios de Investimento:** ignorar fatores como custo inicial, fase do SDLC, duração do projeto e custo de manutenção ao decidir sobre a automação. A falta de análise desses fatores pode levar a investimentos inadequados e pouco retorno. + +**Não priorizar testes:** não priorizar as condições de teste mais impactantes do ponto de vista do negócio. É preciso focar nos esforços de automação nos testes que trarão mais valor. + +--- + +## 2. Aspectos Técnicos Problemáticos + +**Má Testabilidade do SUT:** automatizar um Sistema em Teste (SUT) que não é facilmente testável, dificultando o acesso às suas interfaces. A testabilidade é essencial para uma automação eficaz. + +**Arquitetura e Framework de Automação Ruins:** não ter uma Arquitetura de Automação de Teste (TAA) clara e um Framework de Automação de Teste (TAF) fácil de usar e manter. Uma má arquitetura e framework podem levar a dificuldades na implementação e manutenção dos testes automatizados. + +**Relatórios de Teste Deficientes:** não gerar relatórios de teste bem definidos, dificultando a solução de problemas e o acompanhamento dos resultados. A falta de relatórios claros impede a tomada de decisões eficazes. + +**Não ter um plano de implantação e execução:** não ter um plano claro de implantação e execução de testes, remoção de testes quando necessário e tratamento eficaz de exceções. Sem esses planos, os testes podem não ser executados corretamente, ou causar problemas na execução. + +**Não Documentar os Casos de Teste:** não documentar adequadamente os casos de teste automatizados, tornando-os difíceis de entender e manter. A documentação clara é crucial para a manutenção e rastreabilidade dos testes. + +--- + +## 3. Escolha e Aplicação Inadequadas da Automação + +**Automatizar Testes Impróprios:** escolher casos de teste para automação sem considerar a viabilidade técnica, esforço de codificação, frequência de execução, repetibilidade e facilidade de manutenção. Nem todos os testes são adequados para automação. + +**Automatizar Testes Difíceis:** tentar automatizar condições de teste difíceis, como validações de design, interações humanas complexas e restrições técnicas no nível do sistema operacional. Alguns testes são mais eficazes quando realizados manualmente. + +**Focar apenas em testes de interface do usuário:** criar uma estratégia que dependa principalmente de testes de interface do usuário (UI), que são caros e de difícil manutenção. Uma estratégia de testes equilibrada deve incluir testes de componentes, contrato e API. + +**Não otimizar a distribuição de testes:** não equilibrar a quantidade de testes nos diferentes níveis (componente, serviço e UI), o que pode resultar em testes lentos e caros. É preciso buscar uma distribuição em forma de pirâmide para melhor eficiência. + +--- + +## 4. Transição e Manutenção Ineficazes + +**Não Monitorar os Custos:** não acompanhar os custos e o crescimento da suíte de testes durante a transição para testes contínuos. O monitoramento dos custos e do crescimento da suíte de testes é necessário para uma transição eficiente. + +**Sobreposição Funcional:** criar scripts de teste com sobreposição funcional, como incluir as mesmas etapas de login em diferentes casos de teste. Isso dificulta a manutenção e aumenta o esforço necessário. + +**Compartilhamento de Dados Inadequados:** não gerenciar corretamente o compartilhamento de dados entre os testes, levando à duplicação ou introdução de erros. Os dados devem ser armazenados e acessados de uma única fonte. + +**Não Documentar Pré-Condições:** não documentar e automatizar as pré-condições necessárias para a execução dos testes, levando a falhas e inconsistências. É essencial definir e automatizar as pré-condições para garantir a repetibilidade dos testes. + +**Não Testar os Testes Automatizados:** esquecer de que a automação é um software que também precisa ser testado. Os scripts de teste devem ser testados para garantir que funcionem corretamente. + +**Não Refatorar a Automação:** não avaliar e refatorar a solução de automação, levando ao acúmulo de dívida técnica e dificuldades na manutenção. É preciso buscar melhorias contínuas e otimizações. + +**Não Adaptar a TAS às Mudanças**: não adaptar a Solução de Automação de Teste (TAS) às novas versões do SUT. A TAS deve ser flexível e adaptável para acompanhar as mudanças no sistema. + +--- + +## 5. Outras Práticas Ruins + +**Abstração Excessiva:** utilizar abstrações excessivas que tornam o código de automação difícil de entender. A abstração deve ser usada com moderação para manter o código compreensível. + +**Tabelas de Dados Complexas:** criar tabelas de dados de teste muito grandes e complexas, dificultando a migração para outros ambientes. Os dados de teste devem ser gerenciados de forma eficiente. + +**Dependências de Bibliotecas:** criar dependências da TAS em bibliotecas ou componentes do sistema operacional que podem não estar disponíveis em todos os ambientes. A TAS deve ser independente e portável entre diferentes ambientes de teste. + +**Ignorar a Importância da Manutenção**: deixar de planejar a manutenção da TAS devido a atualizações no SUT. A manutenção contínua da TAS é essencial para garantir sua eficácia. + +**Não usar métricas:** não acompanhar métricas como taxa de aprovação/reprovação, proporção de falhas e defeitos, tempo de execução da automação, cobertura funcional e de código. Essas métricas ajudam a avaliar e otimizar a TAS. + +**Não aproveitar os resultados dos testes para melhorar o processo:** não analisar os dados gerados nos relatórios de teste para identificar tendências e fazer melhorias no SDLC. Os dados dos testes devem ser usados para tomada de decisões e melhoria contínua. + +Feito por: Kellen Xavier | [Contato](https://keepo.io/ladydebug/) diff --git a/content/docs/2025/junho/processo-shift-left-testing-basico.md b/content/docs/2025/junho/processo-shift-left-testing-basico.md new file mode 100644 index 0000000..679fcd7 --- /dev/null +++ b/content/docs/2025/junho/processo-shift-left-testing-basico.md @@ -0,0 +1,27 @@ +--- +title: "Passo a Passo para Adicionar o Shift-Left Testing no Processo de Qualidade" +date: 2025-06-05 +slug: processo-shift-left-testing-basico +tags: [testes, qualidade, shift-left] +draft: false +--- + +Segue um breve resumo de aplicar um mínimo de processo de qualidade em um time. + +--- + +**Objetivo: Adotar o uso de backlog para refinar User Stories para desenvolvimento:** criar um backlog de tarefas e atividades relacionadas ao teste desde o início do ciclo de desenvolvimento. + +**Escrever User Stories com Critérios de Aceitação (Separar Fluxo Completo em Funcionalidades):** + +Identificar os requisitos de teste para cada funcionalidade através de User Stories. Incluir critérios de aceitação claros e específicos para garantir que cada funcionalidade seja testada adequadamente. + +**Desenvolver Casos de Teste para cada User Story:** escrever casos de teste que abranjam todos os aspectos da funcionalidade descrita na User Story. Incluir casos de teste para cenários de sucesso e cenários de falha, abrangendo diferentes caminhos de uso. + +**Realizar Testes Estáticos e Análises Antes do Desenvolvimento:** realizar revisões de código estáticas e análises de documentos para identificar potenciais problemas antes do início do desenvolvimento. Utilizar ferramentas de análise estática para identificar possíveis vulnerabilidades ou erros no código fonte. + +**Integrar Testes Automatizados na Esteira de Desenvolvimento:** automatizar testes unitários, de integração e de regressão para garantir a estabilidade das funcionalidades desenvolvidas. Integrar os testes automatizados na esteira de desenvolvimento para execução contínua após cada alteração no código. + +**Implementar Revisões Contínuas e Feedback Iterativo:** realizar revisões contínuas de código e funcionalidades em desenvolvimento para identificar e corrigir problemas rapidamente. Fornecer feedback iterativo aos desenvolvedores e equipe de qualidade para melhorar o processo de desenvolvimento. + +**Documentar e Analisar Métricas de Qualidade e Desempenho:** registrar métricas de qualidade, cobertura de testes e desempenho do software para avaliar a eficácia dos testes e identificar áreas de melhoria. Analisar regularmente os resultados dos testes para ajustar estratégias de teste conforme necessário. diff --git a/content/docs/2025/junho/testing-library-exemplos-de-configuracao/cypress-testinglibrary.png b/content/docs/2025/junho/testing-library-exemplos-de-configuracao/cypress-testinglibrary.png new file mode 100644 index 0000000..c5a2a03 Binary files /dev/null and b/content/docs/2025/junho/testing-library-exemplos-de-configuracao/cypress-testinglibrary.png differ diff --git a/content/docs/2025/junho/testing-library-exemplos-de-configuracao/index.md b/content/docs/2025/junho/testing-library-exemplos-de-configuracao/index.md new file mode 100644 index 0000000..fe87155 --- /dev/null +++ b/content/docs/2025/junho/testing-library-exemplos-de-configuracao/index.md @@ -0,0 +1,65 @@ +--- +title: "Quando se tem [data-cy=\"seu-elemento-x\"], precisa ainda instalar o Testing Library?" +date: 2025-06-05 +slug: testing-library-exemplos-de-configuracao +tags: [cypress, testing-library, e2e] +draft: false +--- + +Segue exemplo abaixo de um código que usa o `data-cy` para capturar elementos nas automação E2E com Cypress. + +--- + +O uso do **Testing Library** é interessante quando não temos o elemento definido no E2E, ou seja, sem o data-test/cy. Para que o Testing Library reconheça dentro da automação, precisamos que, não tenha no elemento que vai ser buscado pelo cypress o `data-cy` e então, o Testing Library o reconhece buscando pelo padrão `findByText.('Sua palavra mágica').click();` + +![Cypress e Testing Library](cypress-testinglibrary.png) + +**Opção 1: Configurar no arquivo `setup-tests.js` (Cypress v10+):** + +1. Crie o arquivo `setup-tests.js`: se você ainda não tem esse arquivo, crie-o na raiz do seu projeto ou em outro local especificado na sua configuração do Cypress (veja a documentação para detalhes). +2. Configure o atributo `testIdAttribute`: + +```javascript +// cypress/support/setup-tests.js +import { configure } from '@testing-library/cypress'; + +configure({ testIdAttribute: 'data-cy' }) +``` + +**Opção 2: Configurar diretamente no teste (Cypress v9 e anteriores):** se você estiver usando uma versão mais antiga do Cypress, você pode configurar a biblioteca diretamente no seu arquivo de teste: + +```javascript +// cypress/e2e/seu_teste.cy.js +import { configure } from '@testing-library/cypress'; + +// ... + +describe('Seus testes', () => { + before(() => { + configure({ testIdAttribute: 'data-cy' }) + }) + + // ... seus testes aqui +}) +``` + +**Opção 3: Criar um novo comando:** + +Crie um comando personalizado para usar `findByTestId` sempre com o `data-cy`: + +```javascript +// cypress/support/commands.js +Cypress.Commands.add('findByCy', (value, options) => { + cy.findByTestId(value, { ...options, testIdAttribute: 'data-cy'}) +}) +``` + +--- + +**Referências**: + +[Testing Library](https://testing-library.com/docs/cypress-testing-library/intro/) + + + +**Cypress and Testing Library** [Link](https://docs.cypress.io/app/core-concepts/best-practices#Cypress-and-Testing-Library) diff --git a/content/docs/2025/setembro/bpmn-fluxogramas.md b/content/docs/2025/setembro/bpmn-fluxogramas.md new file mode 100644 index 0000000..ec60e8b --- /dev/null +++ b/content/docs/2025/setembro/bpmn-fluxogramas.md @@ -0,0 +1,56 @@ +--- +title: "Cola do BPMN" +date: 2025-09-01 +slug: bpmn-fluxogramas +tags: [bpmn, fluxogramas, processos] +draft: false +--- + +Para quem esta começando a desenhar fluxogramas, segue as opções para os eventos do BPMN. + +Start inicia o fluxo, intermediate acontece no meio, boundary fica colado numa atividade para tratá-la, e end encerra o caminho. Regra de ouro: catch = espera algo; throw = dispara algo. + +--- + +## Start events (iniciam o processo) + +- **Start event (none):** começa sem condição. +- **Message start:** inicia quando chega uma mensagem (ex.: webhook). +- **Timer start:** agenda/cron (data, atraso, repetição). +- **Conditional start:** começa quando uma expressão fica verdadeira. +- **Signal start:** começa ao receber um "broadcast" (sinal geral). + +## Intermediate events (no meio do fluxo) + +- **Message intermediate (throw):** envia mensagem a outro participante. +- **Timer intermediate (catch):** espera um tempo/data. +- **Escalation intermediate (throw):** avisa/escalona sem tratar como erro. +- **Conditional intermediate (catch):** pausa até a condição ficar verdadeira. +- **Link (catch/throw):** "teletransporte" dentro do mesmo diagrama (conecta pontos). +- **Compensation intermediate (throw):** dispara compensação (desfazer algo). +- **Signal intermediate (catch/throw):** pub/sub (broadcast) – qualquer ouvinte capta. + +## Boundary events (colados numa tarefa/subprocesso) + +- Disparam quando ocorre algo **durante** a atividade. +- **Interrupting (borda contínua):** cancela a atividade e desvia o fluxo. +- **Non-interrupting (borda tracejada):** cria um fluxo alternativo sem cancelar. + +- Tipos comuns: **Timer, Message, Conditional, Signal, Escalation, Compensation**. + +### Especiais + + **Error boundary:** só interruptivo; captura erros do subprocesso. + **Cancel boundary:** só em **Transaction subprocess**. + +- As variações **(non-interrupting)** mantêm a atividade rodando. + +## End events (encerram o caminho) + +- **Message end:** envia mensagem e termina. +- **Escalation end:** notifica o nível acima e termina. +- **Error end:** lança erro; sai do subprocesso até um *error boundary* capturar. +- **Cancel end:** cancela uma **Transaction**. +- **Compensation end:** solicita compensações registradas. +- **Signal end:** emite sinal (broadcast) e termina. +- **Terminate end:** mata **todas** as atividades ativas do processo/subprocesso. diff --git a/content/docs/2025/setembro/20/configurando-o-sonar-qube-localmente/executado-2025-09-20-09-32.png b/content/docs/2025/setembro/configurando-o-sonar-qube-localmente/executado-2025-09-20-09-32.png similarity index 100% rename from content/docs/2025/setembro/20/configurando-o-sonar-qube-localmente/executado-2025-09-20-09-32.png rename to content/docs/2025/setembro/configurando-o-sonar-qube-localmente/executado-2025-09-20-09-32.png diff --git a/content/docs/2025/setembro/20/configurando-o-sonar-qube-localmente/image1.png b/content/docs/2025/setembro/configurando-o-sonar-qube-localmente/image1.png similarity index 100% rename from content/docs/2025/setembro/20/configurando-o-sonar-qube-localmente/image1.png rename to content/docs/2025/setembro/configurando-o-sonar-qube-localmente/image1.png diff --git a/content/docs/2025/setembro/20/configurando-o-sonar-qube-localmente/image2.png b/content/docs/2025/setembro/configurando-o-sonar-qube-localmente/image2.png similarity index 100% rename from content/docs/2025/setembro/20/configurando-o-sonar-qube-localmente/image2.png rename to content/docs/2025/setembro/configurando-o-sonar-qube-localmente/image2.png diff --git a/content/docs/2025/setembro/20/configurando-o-sonar-qube-localmente/image3.png b/content/docs/2025/setembro/configurando-o-sonar-qube-localmente/image3.png similarity index 100% rename from content/docs/2025/setembro/20/configurando-o-sonar-qube-localmente/image3.png rename to content/docs/2025/setembro/configurando-o-sonar-qube-localmente/image3.png diff --git a/content/docs/2025/setembro/20/configurando-o-sonar-qube-localmente/image4.png b/content/docs/2025/setembro/configurando-o-sonar-qube-localmente/image4.png similarity index 100% rename from content/docs/2025/setembro/20/configurando-o-sonar-qube-localmente/image4.png rename to content/docs/2025/setembro/configurando-o-sonar-qube-localmente/image4.png diff --git a/content/docs/2025/setembro/20/configurando-o-sonar-qube-localmente/index.md b/content/docs/2025/setembro/configurando-o-sonar-qube-localmente/index.md similarity index 100% rename from content/docs/2025/setembro/20/configurando-o-sonar-qube-localmente/index.md rename to content/docs/2025/setembro/configurando-o-sonar-qube-localmente/index.md diff --git a/content/docs/2025/setembro/20/configurando-o-sonar-qube-localmente/problema-encontrado-ao-rodar-o-escaneamento-2025-09-20-09-24.png b/content/docs/2025/setembro/configurando-o-sonar-qube-localmente/problema-encontrado-ao-rodar-o-escaneamento-2025-09-20-09-24.png similarity index 100% rename from content/docs/2025/setembro/20/configurando-o-sonar-qube-localmente/problema-encontrado-ao-rodar-o-escaneamento-2025-09-20-09-24.png rename to content/docs/2025/setembro/configurando-o-sonar-qube-localmente/problema-encontrado-ao-rodar-o-escaneamento-2025-09-20-09-24.png diff --git a/content/docs/2025/setembro/20/configurando-o-sonar-qube-localmente/terminal-sucesso-2025-09-20-09-33.png b/content/docs/2025/setembro/configurando-o-sonar-qube-localmente/terminal-sucesso-2025-09-20-09-33.png similarity index 100% rename from content/docs/2025/setembro/20/configurando-o-sonar-qube-localmente/terminal-sucesso-2025-09-20-09-33.png rename to content/docs/2025/setembro/configurando-o-sonar-qube-localmente/terminal-sucesso-2025-09-20-09-33.png diff --git a/content/docs/2026/abril/fluxograma-o-que-e-como-se-utilizar.md b/content/docs/2026/abril/fluxograma-o-que-e-como-se-utilizar.md new file mode 100644 index 0000000..1b13d97 --- /dev/null +++ b/content/docs/2026/abril/fluxograma-o-que-e-como-se-utilizar.md @@ -0,0 +1,39 @@ +--- +title: "Fluxogramas: O que são e como utilizar em um projeto?" +date: 2026-04-01 +slug: fluxograma-o-que-e-como-se-utilizar +tags: [fluxogramas, processos] +draft: true +--- + +O que seria Fluxogramas e como aplicar? Padrões formais de modelagem de fluxos e também tipos de fluxogramas (diagramas) com nomenclaturas distintas, em Engenharia de Software e Processos. Segue uma listagem de quais existem atualmente: + +## 2. Tipos de fluxogramas (classificação prática) + +Esses não são padrões formais, mas **categorias de uso**. + +### Fluxograma de Processo (Process Flowchart) + +- Representa fluxo operacional +- Muito usado em BPM + +### Fluxograma de Sistema (System Flowchart) + +- Mostra interação entre componentes (hardware/software) + +### Fluxograma de Programa (Program Flowchart) + +- Representa lógica de algoritmo +- Próximo ao pseudocódigo + +### Fluxograma de Decisão + +- Foco em regras de negócio (if/else) + +### Fluxograma Funcional (Swimlane) + +- Divide responsabilidades por áreas/atores + +--- + +### Referências diff --git a/content/docs/2026/abril/protondb-com-deepwiki.md b/content/docs/2026/abril/protondb-com-deepwiki.md new file mode 100644 index 0000000..90d3852 --- /dev/null +++ b/content/docs/2026/abril/protondb-com-deepwiki.md @@ -0,0 +1,9 @@ +--- +title: "ProtonDB com DeepWiki" +date: 2026-04-01 +slug: protondb-com-deepwiki +tags: [linux, gaming] +draft: true +--- + +Link: diff --git a/content/docs/2026/abril/repositorio-de-documentacoes-wiki-ia.md b/content/docs/2026/abril/repositorio-de-documentacoes-wiki-ia.md new file mode 100644 index 0000000..6e2b36d --- /dev/null +++ b/content/docs/2026/abril/repositorio-de-documentacoes-wiki-ia.md @@ -0,0 +1,14 @@ +--- +title: "Repositório de Documentações: Wikipédia pessoal. Construindo uma Wiki IA" +date: 2026-04-17 +slug: repositorio-de-documentacoes-wiki-ia +tags: [ia, documentacao] +draft: true +--- + +--- + +### Referências + +**Devin docs:** +**Deep Wiki:** diff --git a/content/docs/2026/agosto/analise-de-codigo-quality-gate-manutencao-e-notas.md b/content/docs/2026/agosto/analise-de-codigo-quality-gate-manutencao-e-notas.md new file mode 100644 index 0000000..d6bf756 --- /dev/null +++ b/content/docs/2026/agosto/analise-de-codigo-quality-gate-manutencao-e-notas.md @@ -0,0 +1,9 @@ +--- +title: "Análise de Código, Quality Gate, Manutenibilidade e Alguns Notas Gerais" +date: 2026-08-26 +slug: analise-de-codigo-quality-gate-manutencao-e-notas +tags: [analise-de-codigo, qualidade] +draft: true +--- + +Quando me solicitam para fazer uma análise de código e entender como está o repositório não é somente ler o repositório por cima — ou mandar uma IA gerar arquivos `.md` tão extensos que ela vai comer todos os tokens possíveis — mas, entender o que foi feito, porque foi feito daquela maneira, entender quais os pontos negativos, e depois, fazer pequenas refatorações e migrações (caso necessário de tecnologia) com responsabilidade, visando a manutenção ao longo prazo. Ah, obviamente, claro, se por acaso isso está ajudando a equipe, ou solução técnica. diff --git a/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-linux/configurando-api-key.png b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-linux/configurando-api-key.png new file mode 100644 index 0000000..51d833c Binary files /dev/null and b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-linux/configurando-api-key.png differ diff --git a/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-linux/crush-aberto-com-repo.png b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-linux/crush-aberto-com-repo.png new file mode 100644 index 0000000..49488f1 Binary files /dev/null and b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-linux/crush-aberto-com-repo.png differ diff --git a/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-linux/examine-code-project.png b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-linux/examine-code-project.png new file mode 100644 index 0000000..039796c Binary files /dev/null and b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-linux/examine-code-project.png differ diff --git a/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-linux/executando-crush.png b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-linux/executando-crush.png new file mode 100644 index 0000000..0d7710c Binary files /dev/null and b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-linux/executando-crush.png differ diff --git a/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-linux/index.md b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-linux/index.md new file mode 100644 index 0000000..c5ddd09 --- /dev/null +++ b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-linux/index.md @@ -0,0 +1,41 @@ +--- +title: "Crush: agente de codificação com (TUI/UI) - Configurações em Linux" +date: 2026-01-15 +slug: crush-agente-de-configuracao-no-terminal-linux +tags: [crush, tui, ia, linux, omarchy] +draft: true +--- + +Estava acompanhando algumas atualizações e também estou estudando mais sobre terminais de comando — resolvi entrar de cabeça no universo de terminais depois de ler sobre TUIs, do inglês **Terminal User Interfaces** ou *Text-based User Interfaces*. Então acabei descobrindo o CRUSH via update do sistema do Omarchy e no [post do DHH](https://world.hey.com/dhh/promoting-ai-agents-3ee04945) e na sequência o [Akita](https://akitaonrails.com/2026/01/09/omarchy-3-um-dos-melhores-agentes-pra-programacao-crush/) também — 😅 acompanho os dois em jornadas de estudos tech. Ainda não testei o [OpenCode](https://opencode.ai/), depois crio uma nota sobre ele aqui. Abaixo seguem notas pessoais e estudo do CRUSH. + +**O que é o CRUSH**: um agente de codificação assistido por IA, porém com o diferencial que ele é projetado para rodar via CLI (CLI / TUI). É uma ferramenta de produtividade para desenvolvedores, oferece suporte para: escrever código, depuração, operações em arquivos de repositórios. Ele utiliza metalinguagem de LLM (Large Language Models) que é definido diretamente pelo usuário da máquina. Suporte a: OpenAI, Claude, Gemini etc. + +--- + +## Instalação e configuração + +No sistema que estou utilizando, o [Omarchy](https://omarchy.org/), ele vem com o CRUSH como opção para instalar nas configurações dele. + +![Opção de instalar o Crush pelas configurações do Omarchy](omarchy-crush-opcao-1.png) + +![Confirmando a instalação do Crush](omarchy-crush-opcao-2.png) + +Então eu simplesmente selecionei a opção e segui a instalação, em seguida no terminal executei o comando `crush`. + +![Executando o Crush pela primeira vez](executando-crush.png) + +Configurei a chave da [API aqui neste tutorial](https://platform.openai.com/docs/quickstart?desktop-os=macOS): clicar em "criar chave de API", gerar e colar no crush após selecionar o seu LLM. + +![Configurando a API key no Crush](configurando-api-key.png) + +--- + +Para esse teste, com o crush peguei o seguinte [repositório setup-linux-mint](https://github.com/kellen-xavier/setup-linux) para fazer uma refatoração. Para isso fui até o caminho do repo localmente, executo o comando crush. Então segue a tela de inicialização. + +![Crush aberto com o repositório](crush-aberto-com-repo.png) + +Veja a frase abaixo: opção de analisar todo o projeto e mostrar o resultado. Porém precisa do arquivo `AGENT.md`. + +![Examinando o código do projeto](examine-code-project.png) + +### Criando o arquivo para o projeto diff --git a/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-linux/omarchy-crush-opcao-1.png b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-linux/omarchy-crush-opcao-1.png new file mode 100644 index 0000000..c17ca26 Binary files /dev/null and b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-linux/omarchy-crush-opcao-1.png differ diff --git a/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-linux/omarchy-crush-opcao-2.png b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-linux/omarchy-crush-opcao-2.png new file mode 100644 index 0000000..a36f57d Binary files /dev/null and b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-linux/omarchy-crush-opcao-2.png differ diff --git a/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/analisando-erros.jpg b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/analisando-erros.jpg new file mode 100644 index 0000000..6f670ee Binary files /dev/null and b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/analisando-erros.jpg differ diff --git a/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/analyze-repo-update-readme.jpg b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/analyze-repo-update-readme.jpg new file mode 100644 index 0000000..b80e3a0 Binary files /dev/null and b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/analyze-repo-update-readme.jpg differ diff --git a/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/configurando-windows.jpg b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/configurando-windows.jpg new file mode 100644 index 0000000..38923bf Binary files /dev/null and b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/configurando-windows.jpg differ diff --git a/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/estrutura-final-projeto.jpg b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/estrutura-final-projeto.jpg new file mode 100644 index 0000000..e905d48 Binary files /dev/null and b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/estrutura-final-projeto.jpg differ diff --git a/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/executando-agent.jpg b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/executando-agent.jpg new file mode 100644 index 0000000..3f9ed05 Binary files /dev/null and b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/executando-agent.jpg differ diff --git a/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/executando-lint.jpg b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/executando-lint.jpg new file mode 100644 index 0000000..7e6b579 Binary files /dev/null and b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/executando-lint.jpg differ diff --git a/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/executando-testes.jpg b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/executando-testes.jpg new file mode 100644 index 0000000..9faceca Binary files /dev/null and b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/executando-testes.jpg differ diff --git a/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/index.md b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/index.md new file mode 100644 index 0000000..6846aa2 --- /dev/null +++ b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/index.md @@ -0,0 +1,185 @@ +--- +title: "Crush: agente de codificação com (TUI/UI) - Configurações de Ambiente em Windows" +date: 2026-01-11 +slug: crush-agente-de-configuracao-no-terminal-tui-ui +tags: [crush, tui, ia, windows] +draft: false +--- + +Seguindo a **saga de estudos em Terminais/TUIs**, aqui vamos para o entendimento sobre o CRUSH em uma máquina Windows: como foi que configurei e como está sendo o uso até o momento, realizando um teste com um repositório open source bem simples, voltado à configuração de ambiente de desenvolvimento no Windows. + +### Objetivo principal + +Permitir que desenvolvedores tenham **assistência de IA diretamente no terminal**, sem precisar alternar para um editor web ou **IDE com plugins integrados** — ou melhor, mais leve ao executar, por exemplo, do que o VS Code. O que a ferramenta oferece: + +- Integração com **múltiplos provedores de modelos de IA** +- **Sessões** com contexto preservado por projeto +- Interface **TUI (Text User Interface)** interativa opcional +- **CLI tradicional** para automação ou uso em scripts +- Extensibilidade via padrões como **Agent Skills** e **MCP** (Model Context Protocol) + +**Fonte**: [github crush](https://github.com/charmbracelet/crush) + +### Segue abaixo o primeiro teste em ambiente Windows + +![Configurando o Crush no Windows](configurando-windows.jpg) + +--- + +## A usabilidade em uma máquina com OS Windows + +**Instalação**: via PowerShell optei por seguir o comando + +```text +# NPM +npm install -g @charmland/crush +``` + +Neste caso, foi tranquilo, para fazer integração com [API da OpenAI](https://openai.com/pt-BR/api/) primeiro precisa criar a [chave da API](https://platform.openai.com/api-keys), eu segui o [tutorial deles aqui](https://platform.openai.com/docs/quickstart?desktop-os=windows) voltado para o windows nesse caso. Então nesse caso, copie a sua chave e reserve em um bloco de Notas. No Windows após instalação do CRUSH, no seguinte caminho: `C:\Users\SEU_USER` conforme o Windows tudo fica sob esse caminho `C:\Users\\.config\crush\` + +Caso ainda não exista essa pasta, então crie: `mkdir $HOME\.config\crush` então pode seguir, fazendo a integração com uma IA — no caso aqui provedor OpenAI — abaixo os comandos para criar uma variável de ambiente primeiro via terminal PowerShell. + +### Criar variável de ambiente + +`setx OPENAI_API_KEY "sua_chave_aqui"` + +Como de costume, feche sempre o terminal e inicie um novo, verifique com o comando: `echo $Env:OPENAI_API_KEY` + +Segue para verificar se o Crush está funcionando: `crush --version` e caso mostrada a versão segue para o uso: + +```powershell +crush +``` + +O terminal PowerShell irá carregar a UI da ferramenta então pode iniciar o uso. Neste exemplo de testes eu decidi refatorar um projeto de setup para Windows: — particularmente não muito interessante mas necessário, e também útil quando precisar reinstalar o mesmo — aqui eu primeiro via VS Code baixei o repositório — sim, neste caso utilizei por agora o editor, mas com os demais [plugins do charmbracelet](https://github.com/charmbracelet) pode-se personalizar; o foco aqui não é esse. + +### Para os usos práticos + +Perguntar sobre código do projeto atual: neste caso fui até a pasta do meu projeto + +```powershell +cd meu-projeto +crush +``` + +Primeira pergunta pedi para analisar o projeto: de forma mais geral, tipo possíveis bugs. Após ele me responder as respostas. + +> analyze possible errors + +![Analisando erros conforme solicitado](analisando-erros.jpg) + +Eu tinha esquecido de criar o arquivo [AGENT.md](https://github.com/kellen-xavier/scripts-config-windows/blob/main/AGENTS.md), o próprio CRUSH recomenda isso em tela, mas aí fui lá criar. + +```powershell +# Arquivo de script PowerShell para configuração Windows +Repositório de scripts voltado para Windows: instalar e personalizar via Shell Script. Este repositório foi criado com o intuito de facilitar a instalação de Aplicativos Windows. Criar o arquivo programas-new-apps.ps1 + +## REGRAS: O script deve conter +- Implementar Testes com Pester +- Usar análise estática de código +- Usar winget como gerenciador principal +- Instale programas com segurança usando winget +- Verificar se o winget está instalado +- Instalar programas de forma idempotente (não reinstalar se já existir) +- Usar parâmetros silenciosos +- Gerar log de execução +- Falhar de forma segura em caso de erro +- Não baixar executáveis diretamente da internet +- Seguir boas práticas de segurança no Windows +- Download e Execução de Script Externo com validação (Win11Debloat) +- Instalar gerenciadores de versão (Instalação de Múltiplas Versões do Java/Node.js) +- Deve conter blocos de help +- Script verifica conectividade antes de tentar downloads +- Adicionar Suporte a -WhatIf e -Confirm +- Transformar scripts em módulo PowerShell com funções reutilizáveis +- Consistência nos Nomes dos Scripts +- Verificação de Código de Saída (uso de $LASTEXITCODE para validar sucesso das operações winget) +- Feedback Visual ao Usuário (uso de Write-Host com cores para indicar status das operações) +- Todos os scripts principais possuem verificação de permissões administrativas no início +``` + +## Liste exemplos comuns de software + +### Trabalho uso VPNs + +- VPN: Netskope Client + +### Aplicativos + +Android Studio, BlueStacks 5, Bitwarden, Cursor, Docker Desktop, DBeaver Community, Discord, Flameshot, Global VPN Cliente, LibreOffice, Powershell, PowerToys Awake, Intellij IDEA Community Edition, ScreenToGif, sqldeveloper, Sublime Text Free, Teams, Insomnia, Obsidian, VS Code, Visual Studio Installer, Logitech G Hub + +### Navegadores + +Google Chrome, Edge, Firefox, Opera + +### Linguagens Desenvolvimento + +- JAVA 11, 17, 18+ +- NodeJS +- Python + +## Documentação README.md + +- Especifica versão mínima do Windows 10 (requer 1809+ para winget) +- Necessidade do App Installer atualizado +- Seção de troubleshooting + +### Registry com Backup + +```shell +$BackupPath = "$PSScriptRoot\backup\registry-$(Get-Date -Format 'yyyyMMdd-HHmmss').reg" +reg export "HKCU\Software\Microsoft\Windows\CurrentVersion\Themes\Personalize" $BackupPath +``` + +## PRIORIDADES DE CORREÇÃO PARA OS SCRIPTS EXISTENTES + +- Prioridade 1 (Segurança): adicionar validação de hash para Win11Debloat, criar backup do registro antes de alterações, implementar Try-Catch em todos os scripts +- Prioridade 2 (Funcionalidade): implementar logging persistente, adicionar verificação de pré-requisitos, corrigir comando de navegador padrão +- Prioridade 3 (Manutenibilidade): adicionar parâmetros aos scripts, implementar idempotência, adicionar comment-based help + +## Referências + +- [Examples of Comment-based Help](https://learn.microsoft.com/en-us/powershell/scripting/developer/help/examples-of-comment-based-help?view=powershell-7.5) +- [Native interoperability best practices](https://learn.microsoft.com/en-us/dotnet/standard/native-interop/best-practices) +- [Approved Verbs for PowerShell Commands](https://learn.microsoft.com/en-us/powershell/scripting/developer/cmdlet/approved-verbs-for-windows-powershell-commands?view=powershell-7.5) +- [PSScriptAnalyzer](https://github.com/PowerShell/PSScriptAnalyzer) +- [The test framework for Powershell](https://pester.dev/) +- [Starting Windows PowerShell](https://learn.microsoft.com/en-us/powershell/scripting/windows-powershell/starting-windows-powershell?view=powershell-7.4#with-administrative-privileges-run-as-administrator) + +Tentei por tudo o que entendi ser o correto desta vez para criar o setup, eu tive que ler as referências também para entender as boas práticas em torno disso, importante entender exatamente como vai montar o arquivo do AGENT pois ele fica mais estruturado. + +**Agora solicitei para executar o arquivo do AGENT**: based on the AGENT.md file execute + +![Executando o AGENT em um repositório de setup Windows com Crush](executando-agent.jpg) + +Com base no primeiro comando ele retornou: + +![Solicitação para correção](solicitacao-correcao.jpg) + +Processando o arquivo AGENT: + +![Processando o AGENT](processando-agent.jpg) + +No VS Code quis dar uma olhada em como ele estava se comportando: + +![Modificações vistas no VS Code](modificacoes-vscode.jpg) + +Executando Lint: + +![Executando lint](executando-lint.jpg) + +Executando Testes: + +![Executando testes](executando-testes.jpg) + +![Analisando o repositório e atualizando o README](analyze-repo-update-readme.jpg) + +Solicitei para fazer um update do README.md: + +![Update no README.md](update-readme.jpg) + +![README atualizado com sucesso](readme-update-ok.jpg) + +Estrutura final do projeto: + +![Estrutura final do projeto](estrutura-final-projeto.jpg) diff --git a/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/modificacoes-vscode.jpg b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/modificacoes-vscode.jpg new file mode 100644 index 0000000..92d216d Binary files /dev/null and b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/modificacoes-vscode.jpg differ diff --git a/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/processando-agent.jpg b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/processando-agent.jpg new file mode 100644 index 0000000..ce9e128 Binary files /dev/null and b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/processando-agent.jpg differ diff --git a/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/readme-update-ok.jpg b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/readme-update-ok.jpg new file mode 100644 index 0000000..074a090 Binary files /dev/null and b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/readme-update-ok.jpg differ diff --git a/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/solicitacao-correcao.jpg b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/solicitacao-correcao.jpg new file mode 100644 index 0000000..cab9a00 Binary files /dev/null and b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/solicitacao-correcao.jpg differ diff --git a/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/update-readme.jpg b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/update-readme.jpg new file mode 100644 index 0000000..a841d3c Binary files /dev/null and b/content/docs/2026/janeiro/crush-agente-de-configuracao-no-terminal-tui-ui/update-readme.jpg differ diff --git a/content/docs/2026/julho/configurando-de-verdade-omarchy-linux.md b/content/docs/2026/julho/configurando-de-verdade-omarchy-linux.md new file mode 100644 index 0000000..dfa54ce --- /dev/null +++ b/content/docs/2026/julho/configurando-de-verdade-omarchy-linux.md @@ -0,0 +1,9 @@ +--- +title: "Configurando de verdade | Omarchy" +date: 2026-07-24 +slug: configurando-de-verdade-omarchy-linux +tags: [linux, omarchy] +draft: true +--- + +Este post serve para poder configurar o Omarchy. Atualmente eu tenho um setup configurado aqui no github: diff --git a/content/docs/2026/julho/correcao-ladingpage-simples-aprendizados/claude-code-preenchendo.png b/content/docs/2026/julho/correcao-ladingpage-simples-aprendizados/claude-code-preenchendo.png new file mode 100644 index 0000000..2c4557e Binary files /dev/null and b/content/docs/2026/julho/correcao-ladingpage-simples-aprendizados/claude-code-preenchendo.png differ diff --git a/content/docs/2026/julho/correcao-ladingpage-simples-aprendizados/correcao-1.png b/content/docs/2026/julho/correcao-ladingpage-simples-aprendizados/correcao-1.png new file mode 100644 index 0000000..7c26da6 Binary files /dev/null and b/content/docs/2026/julho/correcao-ladingpage-simples-aprendizados/correcao-1.png differ diff --git a/content/docs/2026/julho/correcao-ladingpage-simples-aprendizados/correcao-2.png b/content/docs/2026/julho/correcao-ladingpage-simples-aprendizados/correcao-2.png new file mode 100644 index 0000000..6500d4d Binary files /dev/null and b/content/docs/2026/julho/correcao-ladingpage-simples-aprendizados/correcao-2.png differ diff --git a/content/docs/2026/julho/correcao-ladingpage-simples-aprendizados/correcao-3.png b/content/docs/2026/julho/correcao-ladingpage-simples-aprendizados/correcao-3.png new file mode 100644 index 0000000..44cf3c4 Binary files /dev/null and b/content/docs/2026/julho/correcao-ladingpage-simples-aprendizados/correcao-3.png differ diff --git a/content/docs/2026/julho/correcao-ladingpage-simples-aprendizados/correcao-4.png b/content/docs/2026/julho/correcao-ladingpage-simples-aprendizados/correcao-4.png new file mode 100644 index 0000000..9cf114d Binary files /dev/null and b/content/docs/2026/julho/correcao-ladingpage-simples-aprendizados/correcao-4.png differ diff --git a/content/docs/2026/julho/correcao-ladingpage-simples-aprendizados/index.md b/content/docs/2026/julho/correcao-ladingpage-simples-aprendizados/index.md new file mode 100644 index 0000000..0ca3581 --- /dev/null +++ b/content/docs/2026/julho/correcao-ladingpage-simples-aprendizados/index.md @@ -0,0 +1,100 @@ +--- +title: "Correção de Projeto Landingpage Simples - Aprendizados" +date: 2026-07-09 +slug: correcao-ladingpage-simples-aprendizados +tags: [analise-de-codigo, frontend, ia] +draft: true +--- + +Recentemente fui fazer uma varredura completa no meu github pois fazia muito tempo que eu não dava mais suporte aos meus projetos pessoais. + +O selecionado da vez foi o seguinte: onde eu fiz bem simples uma landing page de um site "divulgação". Com estudos em IA resolvi fazer um refactor nele. + +**Objetivo disto:** aplicar estudos com o [Opencode](https://opencode.ai/), estudo com o [claude.ai](http://claude.ai) para realizar alguns testes e economia de tokens (sim, com tarefas bem simples, justamente para por em prova que deve fazer um uso baixo e bom gerenciamento). + +— no dia que foi realizado o claude.ai a versão utilizada é o Opus 4.8 — + +![Repositório original da landing page](repo-original.png) + +Esse repositório foi criado há 2 anos atrás, e eu gostaria de fazer alguns ajustes, mas nunca vinha fazer (tempo não dedicado por falta de importância). Também, por ser simples demais, nunca fui muito à frente. Porém é ótimo como porta de entrada para entendimento de frontend simples e como criar landing pages. O bom é que está tudo versionado e fica registrada a evolução aqui. + +--- + +Analisei o repositório completo (HTML, CSS, JS, README e assets). É um projeto estático simples (landing page do filme "A Viagem de Chihiro"). Foram encontrados os seguintes problemas, **organizados por severidade:** + +## Bugs funcionais + +1. **`index.html:68`** — sobra uma tag `` sem abertura correspondente (confirmei: 10 `
` abertas vs. 11 `
` fechadas). HTML inválido. +2. **Fontes customizadas nunca são carregadas** — `style.css` usa `Open Sans`, `Andada Pro`, `Archivo` e `Roboto` (linhas 65, 74, 83, 117, 132), mas não existe `` do Google Fonts no `index.html` nem `@font-face` no CSS. O navegador cai para fonte padrão, divergindo do design do Figma. +3. **`style.css:25`** — `.header { width: 1200px; }` não é ajustado na media query mobile (só `.conteudo`, `.botoes`, `button` e a imagem são ajustados em `max-width: 768px`). Em telas médias/pequenas o cabeçalho (logo + redes sociais) estoura horizontalmente e fica cortado (mascarado pelo `overflow-x: hidden`, mas o layout quebra). +4. **`assets/js/script.js:19-22`** — o botão fechar chama `player.stopVideo()` sem checar se `player` já foi inicializado. Se o usuário abrir e fechar o modal antes da API do YouTube carregar, gera `TypeError: Cannot read properties of undefined`. +5. **`style.css:5` e `style.css:37`** — `opacity: 0px` é um valor inválido (opacity não aceita unidade, vai de 0 a 1). Provavelmente resíduo de copy/paste do Figma; a propriedade é simplesmente ignorada pelo navegador. + +## Segurança + +1. **5 ocorrências de `target="_blank"`** sem `rel="noopener noreferrer"` (`index.html:17, 20, 23, 26, 52`) — vulnerabilidade conhecida de *reverse tabnabbing*, onde a página aberta pode acessar `window.opener` e redirecionar a aba original para um site malicioso. + +## Acessibilidade + +1. **`index.html:47`** — ``: alt vazio numa imagem de conteúdo (não decorativa). Deveria descrever a cena do filme. +2. **`index.html:52-56`** — `