Commits Semânticos: A Receita Secreta para um Histórico de Código Organizado

Apresentação do Problema: O Caos na Cozinha Digital

Conheça a Equipe da QuickBite

Na vibrante startup QuickBite, uma empresa de delivery de comida que promete entregar refeições em tempo recorde, trabalham quatro profissionais apaixonados por tecnologia:

• Marina Silva 👩‍💻 – Desenvolvedora Frontend Sênior (5 anos de experiência)
• Carlos Santos 👨‍💻 – Desenvolvedor Full-stack Júnior (1 ano de experiência)
• Ana Costa 👩‍💼 – Product Owner (especialista em produtos digitais)
• Bruno Lima 👨‍💼 – CTO (Chief Technology Officer)

O Problema: Uma Terça-feira Caótica

Era uma terça-feira típica no escritório da QuickBite quando Bruno, o CTO, precisava urgentemente encontrar quando foi implementada a funcionalidade de cupons de desconto. O cliente estava relatando um bug crítico e a empresa estava perdendo vendas.

Bruno abriu o repositório Git do projeto e se deparou com este histórico de commits:

fix stuff
update
changes
fix bug
more fixes
ajustes
correção
mudança no css
fix
update file
arrumei

Code language: Bash (bash)

Bruno (frustrado): “Marina, você se lembra quando implementamos os cupons de desconto?”

Marina: “Acho que foi semana passada… ou na retrasada? Olha, tem esse commit aqui ‘fix stuff’, mas não sei se é relacionado…”

Carlos (envergonhado): “Desculpa, Bruno. Alguns desses commits são meus. Eu não sabia que tinha uma forma melhor de escrever…”

Ana (preocupada): “Pessoal, o cliente está ligando a cada 10 minutos. Precisamos resolver isso rapidamente!”

A Analogia da Cozinha Desorganizada

Imagine que o repositório Git é como a cozinha de um restaurante, e cada commit é como uma etiqueta em um recipiente de ingredientes.

Se você tem recipientes etiquetados como:

• “coisa branca”
• “tempero”
• “ingrediente”
• “comida”

Como o chef vai encontrar rapidamente o sal, a pimenta ou o açúcar quando precisar? É exatamente isso que acontece com commits mal escritos!

Agora imagine recipientes etiquetados como:

• “Sal marinho fino – adicionado em 15/03”
• “Pimenta-do-reino moída – para pratos principais”
• “Açúcar cristal – para sobremesas”

A diferença é gritante! 🎯

O Momento da Revelação

Após 2 horas procurando pelo histórico, Marina teve uma ideia:

Marina: “Pessoal, vamos implementar commits semânticos! É como criar um sistema de organização profissional para nossa ‘cozinha digital’. Cada commit terá um propósito claro e será fácil de encontrar.”

Bruno: “Excelente ideia! Vamos aprender isso juntos e aplicar no projeto.”

---

Apresentação do Tema: Commits Semânticos Descomplicados

O que são Commits Semânticos?

Commits semânticos são uma convenção para escrever mensagens de commit que seguem um formato específico e padronizado. É como ter um manual de boas práticas para documentar mudanças no código.

💡 Dica: Um commit é como uma “fotografia” do seu código em um momento específico, registrando exatamente o que foi alterado.

A Estrutura Fundamental

Todo commit semântico segue esta estrutura básica:

<tipo>[escopo opcional]: <descrição>

[corpo opcional]

[rodapé opcional]
Code language: Bash (bash)

Tipos de Commits: Os Ingredientes da Nossa Receita

1. feat (Feature/Funcionalidade) 🆕

• Uso: Quando você adiciona uma nova funcionalidade
• Analogia: É como adicionar um novo prato ao cardápio do restaurante
• Exemplo: feat: adicionar sistema de cupons de desconto

2. fix (Correção) 🔧

• Uso: Quando você corrige um bug
• Analogia: É como consertar um fogão que estava com problema
• Exemplo: fix: corrigir cálculo de taxa de entrega

3. docs (Documentação) 📚

• Uso: Mudanças apenas na documentação
• Analogia: É como atualizar o manual de instruções da cozinha
• Exemplo: docs: atualizar README com instruções de instalação

4. style (Estilo) 💄

• Uso: Mudanças que não afetam a funcionalidade (formatação, espaços, etc.)
• Analogia: É como reorganizar os utensílios da cozinha sem mudar as receitas
• Exemplo: style: formatar código JavaScript com Prettier

5. refactor (Refatoração) ♻️

• Uso: Mudanças no código que não adicionam funcionalidade nem corrigem bugs
• Analogia: É como reorganizar a cozinha para ser mais eficiente
• Exemplo: refactor: simplificar função de validação de cupons

6. test (Testes) 🧪

• Uso: Adição ou modificação de testes
• Analogia: É como criar receitas de teste para garantir que os pratos saiam perfeitos
• Exemplo: test: adicionar testes para validação de formulário

7. chore (Tarefas) 🧹

• Uso: Mudanças em ferramentas, configurações, dependências
• Analogia: É como fazer a manutenção dos equipamentos da cozinha
• Exemplo: chore: atualizar dependências do npm

8. perf (Performance) ⚡

• Uso: Melhorias de performance
• Analogia: É como trocar por equipamentos mais rápidos na cozinha
• Exemplo: perf: otimizar carregamento de imagens

Escopo: Especificando a Área

O escopo é opcional e indica qual parte do projeto foi alterada:

feat(auth): adicionar login com Google
fix(payment): corrigir processamento de cartão
docs(api): atualizar documentação de endpoints

Code language: Bash (bash)

💡 Dica: Pense no escopo como os diferentes setores de um restaurante: cozinha, atendimento, caixa, delivery, etc.

Descrição: A Arte de Ser Claro e Conciso

A descrição deve:

• Usar o imperativo (“adicionar” ao invés de “adicionado”)
• Começar com letra minúscula
• Não terminar com ponto
• Ser clara e específica

❌ Exemplos Ruins:

fix: arrumei
feat: nova feature
update: mudanças

Code language: Bash (bash)

✅ Exemplos Bons:

fix: corrigir validação de email no formulário de cadastro
feat: implementar filtro de restaurantes por categoria
style: padronizar indentação em arquivos CSS

Code language: Bash (bash)

Breaking Changes: Mudanças Que Quebram

Quando você faz uma mudança que pode quebrar código existente, use:

feat!: alterar estrutura da API de usuários

BREAKING CHANGE: o campo 'nome' foi renomeado para 'nomeCompleto'

Code language: Bash (bash)

⚠️ Importante: O ! após o tipo indica uma mudança que quebra compatibilidade.

Diagramas dos Tipos de Commit

Vantagens dos Commits Semânticos

1. Histórico Legível 📖

• Qualquer pessoa da equipe entende rapidamente o que foi alterado
• Facilita code reviews e auditorias

2. Automação 🤖

• Geração automática de changelogs
• Versionamento semântico automatizado
• Deploy automático baseado no tipo de commit

3. Colaboração Melhorada 🤝

• Padronização entre toda a equipe
• Redução de conflitos e mal-entendidos

4. Debugging Eficiente 🔍

• Encontrar rapidamente quando um bug foi introduzido
• Identificar facilmente o contexto de uma mudança

---

🛠️ Solução do Problema: Mão no Código

Configurando o Ambiente de Desenvolvimento

Vamos criar um projeto real da QuickBite para praticar commits semânticos do zero!

O Repositório desse código se encontra no github em: thgbianeck/quickbite-frontend

Pré-requisitos

Antes de começar, certifique-se de ter instalado:

1. Node.js (versão 16 ou superior)
2. Git (versão 2.20 ou superior)
3. Visual Studio Code

Verificando as Instalações

Abra o terminal e execute:

# Verificar versão do Node.js
node --version

# Verificar versão do Git
git --version

# Verificar versão do npm
npm --version

Code language: Bash (bash)

Passo 1: Criando o Projeto QuickBite

1.1 Criando a Estrutura do Projeto

Windows (PowerShell ou Command Prompt):

# Criar diretório do projeto
mkdir quickbite-frontend
cd quickbite-frontend

# Inicializar repositório Git
git init

# Configurar Git (se ainda não configurado)
git config user.name "Seu Nome"
git config user.email "seu.email@exemplo.com"

Code language: Bash (bash)

macOS/Linux (Terminal):

# Criar diretório do projeto
mkdir quickbite-frontend
cd quickbite-frontend

# Inicializar repositório Git
git init

# Configurar Git (se ainda não configurado)
git config user.name "Seu Nome"
git config user.email "seu.email@exemplo.com"

Code language: Bash (bash)

1.2 Criando a Estrutura Inicial de Arquivos

Crie a seguinte estrutura de pastas e arquivos:

quickbite-frontend/
├── index.html
├── css/
│   └── styles.css
├── js/
│   └── main.js
├── images/
├── README.md
└── package.json
Code language: Bash (bash)

No VS Code:

1. Abra o VS Code
2. File → Open Folder → Selecione a pasta quickbite-frontend
3. Crie os arquivos e pastas conforme a estrutura acima

Passo 2: Configurando o package.json

Crie o arquivo package.json:

{
  "name": "quickbite-frontend",
  "version": "1.0.0",
  "description": "Frontend da aplicação QuickBite - Delivery de comida",
  "main": "index.html",
  "scripts": {
    "start": "live-server .",
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": ["delivery", "food", "frontend", "html", "css", "javascript"],
  "author": "Equipe QuickBite",
  "license": "MIT",
  "devDependencies": {
    "live-server": "^1.2.2"
  }
}

Code language: JSON / JSON with Comments (json)

Passo 3: Primeiro Commit Semântico

3.1 Adicionando Arquivos ao Stage

# Adicionar todos os arquivos
git add .

# Verificar status
git status

Code language: Bash (bash)

3.2 Fazendo o Commit Inicial

git commit -m "chore: configurar estrutura inicial do projeto

- Adicionar package.json com configurações básicas
- Criar estrutura de pastas para HTML, CSS e JS
- Configurar live-server para desenvolvimento"

Code language: Bash (bash)

💡 Dica: Usamos chore porque estamos configurando o ambiente de desenvolvimento.

Passo 4: Desenvolvendo a Página Principal

4.1 Criando o HTML Base

Edite o arquivo index.html:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QuickBite - Delivery Rápido</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <header class="header">
        <div class="container">
            <h1 class="logo">🍔 QuickBite</h1>
            <nav class="nav">
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#cardapio">Cardápio</a></li>
                    <li><a href="#sobre">Sobre</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main class="main">
        <section class="hero">
            <div class="container">
                <h2>Comida deliciosa, entrega rápida!</h2>
                <p>Peça agora e receba em até 30 minutos</p>
                <button class="btn-primary">Ver Cardápio</button>
            </div>
        </section>
    </main>

    <script src="js/main.js"></script>
</body>
</html>

Code language: HTML, XML (xml)

4.2 Commit da Estrutura HTML

git add index.html
git commit -m "feat: criar estrutura HTML da página principal

- Adicionar header com logo e navegação
- Implementar seção hero com call-to-action
- Configurar meta tags para responsividade"

Code language: Bash (bash)

Passo 5: Estilizando a Aplicação

5.1 Criando os Estilos CSS

Edite o arquivo css/styles.css:

/* Reset e configurações gerais */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.header {
    background-color: #ff6b35;
    color: white;
    padding: 1rem 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 2rem;
    font-weight: bold;
}

.nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.3s;
}

.nav a:hover {
    opacity: 0.8;
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: white;
    text-align: center;
    padding: 4rem 0;
}

.hero h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

.btn-primary {
    background-color: white;
    color: #ff6b35;
    border: none;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: transform 0.3s;
}

.btn-primary:hover {
    transform: translateY(-2px);
}

/* Responsividade */
@media (max-width: 768px) {
    .header .container {
        flex-direction: column;
        gap: 1rem;
    }
    
    .hero h2 {
        font-size: 2rem;
    }
    
    .nav ul {
        gap: 1rem;
    }
}

Code language: CSS (css)

5.2 Commit dos Estilos

git add css/styles.css
git commit -m "style: implementar design visual da página principal

- Adicionar cores da marca (laranja/vermelho)
- Configurar layout responsivo com flexbox
- Implementar hover effects nos botões e links
- Adicionar gradiente na seção hero"

Code language: Bash (bash)

Passo 6: Adicionando Interatividade com JavaScript

6.1 Criando a Funcionalidade JavaScript

Edite o arquivo js/main.js:

// Configurações da aplicação
const QuickBite = {
    // Elementos do DOM
    elements: {
        btnPrimary: null
    },

    // Inicialização da aplicação
    init() {
        this.bindElements();
        this.bindEvents();
        console.log('QuickBite iniciado com sucesso! 🍔');
    },

    // Vincular elementos do DOM
    bindElements() {
        this.elements.btnPrimary = document.querySelector('.btn-primary');
    },

    // Vincular eventos
    bindEvents() {
        if (this.elements.btnPrimary) {
            this.elements.btnPrimary.addEventListener('click', this.handleMenuClick);
        }
    },

    // Manipular clique no botão do menu
    handleMenuClick(event) {
        event.preventDefault();
        alert('Em breve teremos nosso cardápio online! 🍕');
        
        // Simular loading
        const button = event.target;
        const originalText = button.textContent;
        
        button.textContent = 'Carregando...';
        button.disabled = true;
        
        setTimeout(() => {
            button.textContent = originalText;
            button.disabled = false;
        }, 2000);
    }
};

// Inicializar quando o DOM estiver carregado
document.addEventListener('DOMContentLoaded', () => {
    QuickBite.init();
});

Code language: JavaScript (javascript)

6.2 Commit da Funcionalidade JavaScript

git add js/main.js
git commit -m "feat: adicionar interatividade com JavaScript

- Implementar classe QuickBite para organização do código
- Adicionar evento de clique no botão principal
- Criar feedback visual com loading state
- Configurar inicialização automática da aplicação"

Code language: Bash (bash)

Passo 7: Documentando o Projeto

7.1 Criando o README

Edite o arquivo README.md:

<strong># 🍔 QuickBite - Frontend</strong>

Aplicação frontend para o sistema de delivery QuickBite.

<strong>## 📋 Funcionalidades</strong>

- ✅ Landing page responsiva
- ✅ Design moderno com cores da marca
- ✅ Interatividade com JavaScript
- 🔄 Em desenvolvimento: Sistema de pedidos

<strong>## 🚀 Como executar</strong>

1. Clone o repositório
2. Instale as dependências: `npm install`
3. Execute o servidor local: `npm start`
4. Acesse: `http://localhost:8080`

<strong>## 🛠️ Tecnologias</strong>

- HTML5
- CSS3 (Flexbox, Grid, Media Queries)
- JavaScript ES6+
- Live Server (desenvolvimento)

<strong>## 👥 Equipe</strong>

- Marina Silva - Frontend Senior
- Carlos Santos - Full-stack Junior
- Ana Costa - Product Owner
- Bruno Lima - CTO

<strong>## 📝 Commits Semânticos</strong>

Este projeto utiliza [Conventional Commits](https://www.conventionalcommits.org/):
- `feat:` nova funcionalidade
- `fix:` correção de bug  
- `docs:` documentação
- `style:` formatação
- `refactor:` refatoração
- `test:` testes
- `chore:` manutenção

Code language: Markdown (markdown)

7.2 Commit da Documentação

git add README.md
git commit -m "docs: criar documentação inicial do projeto

- Adicionar descrição das funcionalidades
- Incluir instruções de instalação e execução
- Documentar tecnologias utilizadas
- Explicar convenção de commits semânticos"

Code language: Bash (bash)

Passo 8: Corrigindo um Bug (Simulação)

Vamos simular a correção de um bug comum:

8.1 Identificando o Problema

O botão de loading não está funcionando corretamente em dispositivos móveis. Vamos corrigir:

Edite css/styles.css, adicione no final:

/* Correção para botões em dispositivos móveis */
.btn-primary:disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
    transform: none;
}

.btn-primary:active {
    transform: translateY(0);
}

Code language: CSS (css)

8.2 Commit da Correção

git add css/styles.css
git commit -m "fix: corrigir estilo de botão desabilitado em mobile

- Adicionar estilos para estado disabled
- Corrigir comportamento do transform em active
- Melhorar experiência em dispositivos touch"

Code language: Bash (bash)

Passo 9: Melhorando Performance

9.1 Otimizando o JavaScript

Vamos otimizar o código JavaScript:

Edite js/main.js, substitua a função handleMenuClick:

// Manipular clique no botão do menu (versão otimizada)
handleMenuClick(event) {
    event.preventDefault();
    
    const button = event.target;
    
    // Evitar cliques múltiplos
    if (button.disabled) return;
    
    // Usar requestAnimationFrame para animações suaves
    requestAnimationFrame(() => {
        button.textContent = 'Carregando...';
        button.disabled = true;
    });
    
    // Simular carregamento assíncrono
    setTimeout(() => {
        requestAnimationFrame(() => {
            button.textContent = 'Ver Cardápio';
            button.disabled = false;
            alert('Em breve teremos nosso cardápio online! 🍕');
        });
    }, 1500);
}

Code language: JavaScript (javascript)

9.2 Commit da Otimização

git add js/main.js
git commit -m "perf: otimizar animações do botão principal

- Implementar requestAnimationFrame para animações suaves
- Prevenir cliques múltiplos durante loading
- Reduzir tempo de loading de 2s para 1.5s"

Code language: Bash (bash)

Passo 10: Refatorando o Código

10.1 Melhorando a Organização

Vamos separar melhor as responsabilidades:

Edite js/main.js, substitua todo o conteúdo:

// Utilitários
const Utils = {
    // Aguardar tempo especificado
    delay(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    },

    // Atualizar elemento com animação
    updateElement(element, text, disabled = false) {
        requestAnimationFrame(() => {
            element.textContent = text;
            element.disabled = disabled;
        });
    }
};

// Gerenciador de UI
const UIManager = {
    // Manipular estado do botão
    async handleButtonClick(event) {
        event.preventDefault();
        
        const button = event.target;
        
        if (button.disabled) return;
        
        // Estado de loading
        Utils.updateElement(button, 'Carregando...', true);
        
        // Simular operação assíncrona
        await Utils.delay(1500);
        
        // Restaurar estado normal
        Utils.updateElement(button, 'Ver Cardápio', false);
        
        // Mostrar mensagem
        alert('Em breve teremos nosso cardápio online! 🍕');
    }
};

// Aplicação principal
const QuickBite = {
    // Elementos do DOM
    elements: {
        btnPrimary: null
    },

    // Inicialização
    init() {
        this.bindElements();
        this.bindEvents();
        console.log('QuickBite iniciado com sucesso! 🍔');
    },

    // Vincular elementos
    bindElements() {
        this.elements.btnPrimary = document.querySelector('.btn-primary');
    },

    // Vincular eventos
    bindEvents() {
        if (this.elements.btnPrimary) {
            this.elements.btnPrimary.addEventListener('click', UIManager.handleButtonClick);
        }
    }
};

// Inicializar aplicação
document.addEventListener('DOMContentLoaded', () => {
    QuickBite.init();
});

Code language: JavaScript (javascript)

10.2 Commit da Refatoração

git add js/main.js
git commit -m "refactor: separar responsabilidades em módulos

- Criar módulo Utils para funções utilitárias
- Implementar UIManager para gerenciar interface
- Melhorar legibilidade e manutenibilidade do código
- Adicionar suporte a Promises para operações assíncronas"

Code language: Bash (bash)

Passo 11: Adicionando Testes Simples

11.1 Criando Arquivo de Testes

Crie o arquivo js/tests.js:

// Testes simples para o QuickBite
const Tests = {
    // Executar todos os testes
    runAll() {
        console.log('🧪 Iniciando testes...');
        
        this.testDOMElements();
        this.testUtilityFunctions();
        
        console.log('✅ Todos os testes passaram!');
    },

    // Testar elementos do DOM
    testDOMElements() {
        const btnPrimary = document.querySelector('.btn-primary');
        
        if (!btnPrimary) {
            throw new Error('Botão principal não encontrado');
        }
        
        console.log('✓ Elementos do DOM encontrados');
    },

    // Testar funções utilitárias
    testUtilityFunctions() {
        // Testar delay
        if (typeof Utils.delay !== 'function') {
            throw new Error('Função Utils.delay não encontrada');
        }
        
        // Testar updateElement
        if (typeof Utils.updateElement !== 'function') {
            throw new Error('Função Utils.updateElement não encontrada');
        }
        
        console.log('✓ Funções utilitárias funcionando');
    }
};

// Executar testes quando solicitado
if (window.location.search.includes('test=true')) {
    document.addEventListener('DOMContentLoaded', () => {
        setTimeout(() => Tests.runAll(), 1000);
    });
}

Code language: JavaScript (javascript)

11.2 Adicionando Script ao HTML

Edite index.html, adicione antes do fechamento de </body>:

    <script src="js/tests.js"></script>
</body>

Code language: HTML, XML (xml)

11.3 Commit dos Testes

git add js/tests.js index.html
git commit -m "test: adicionar testes básicos para DOM e utilities

- Implementar testes para elementos do DOM
- Adicionar validação de funções utilitárias
- Configurar execução condicional com query parameter
- Incluir logging detalhado dos resultados"

Code language: Bash (bash)

Passo 12: Instalando Dependências

12.1 Instalando Live Server

npm install

Code language: Bash (bash)

12.2 Commit das Dependências

git add package-lock.json
git commit -m "chore: instalar dependências de desenvolvimento

- Adicionar live-server para desenvolvimento local
- Gerar package-lock.json para versões fixas"

Code language: Bash (bash)

Passo 13: Visualizando o Histórico

13.1 Verificando os Commits

# Ver histórico completo
git log --oneline

# Ver histórico com gráfico
git log --oneline --graph

# Ver commits por tipo
git log --oneline --grep="feat:"
git log --oneline --grep="fix:"
git log --oneline --grep="docs:"

Code language: Bash (bash)

13.2 Executando o Projeto

# Iniciar servidor de desenvolvimento
npm start

# Ou manualmente
npx live-server .

Code language: Bash (bash)

Acesse http://localhost:8080 para ver o projeto funcionando!

Para testar os testes, acesse: http://localhost:8080?test=true

Resultado Final: Histórico Organizado

Agora nosso histórico está assim:

chore: instalar dependências de desenvolvimento
test: adicionar testes básicos para DOM e utilities
refactor: separar responsabilidades em módulos
perf: otimizar animações do botão principal
fix: corrigir estilo de botão desabilitado em mobile
docs: criar documentação inicial do projeto
feat: adicionar interatividade com JavaScript
style: implementar design visual da página principal
feat: criar estrutura HTML da página principal
chore: configurar estrutura inicial do projeto

Code language: Bash (bash)

Muito melhor que:

fix stuff
update
changes
fix bug
more fixes

Code language: Bash (bash)

Configurando Ferramentas Auxiliares

Commitizen (Opcional)

Para facilitar ainda mais, você pode instalar o Commitizen:

# Instalar globalmente
npm install -g commitizen cz-conventional-changelog

# Configurar no projeto
echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc

Code language: Bash (bash)

Agora, ao invés de git commit -m, use:

git cz

Code language: Bash (bash)

Isso abrirá um assistente interativo para criar commits semânticos!

---

💡 Dicas Importantes

Dica 1 – Imperativo: Use sempre o modo imperativo nas mensagens: “adicionar”, “corrigir”, “atualizar”, não “adicionado”, “corrigido”, “atualizado”.

Dica 2 – Língua: Mantenha consistência na linguagem. Se começou em português, continue em português em todo o projeto.

Dica 3 – Tamanho: Mantenha a primeira linha com até 50 caracteres para melhor legibilidade.

Dica 4 – Contexto: Se necessário, use o corpo do commit para explicar o “porquê”, não o “o quê”.

Dica 5 – Atomic Commits: Cada commit deve representar uma única mudança lógica.

---

📚 Glossário

Atomic Commit: Commit que contém apenas uma mudança lógica e completa, facilitando reversão e debugging.

Breaking Change: Mudança que quebra a compatibilidade com versões anteriores, exigindo alterações no código que usa a API.

Changelog: Documento que lista todas as mudanças feitas no projeto, geralmente organizado por versão e data.

Commit: Operação que salva mudanças no repositório Git, criando um ponto na história do projeto.

Conventional Commits: Especificação para padronizar mensagens de commit, facilitando automação e legibilidade.

Repository: Local onde o código e histórico de mudanças são armazenados, podendo ser local ou remoto.

Scope: Parte opcional do commit que indica qual módulo/área do código foi afetada pela mudança.

Semantic Versioning: Sistema de numeração de versões que usa três números (MAJOR.MINOR.PATCH) para indicar tipos de mudanças.

Stage: Área temporária no Git onde ficam as mudanças preparadas para o próximo commit.

Working Directory: Diretório local onde você edita os arquivos do projeto antes de fazer commit das mudanças.

---

🎉 Conclusão

Parabéns! Você aprendeu a implementar commits semânticos do zero, desde a teoria até a prática. Agora a equipe da QuickBite (e você!) podem:

• ✅ Escrever commits claros e padronizados
• ✅ Encontrar rapidamente mudanças específicas no histórico
• ✅ Automatizar processos como changelogs e versionamento
• ✅ Colaborar de forma mais eficiente em equipe
• ✅ Manter um código mais organizizado e profissional

Lembre-se: commits semânticos são como temperos na cozinha – quando bem utilizados, fazem toda a diferença no resultado final! 🍳✨

Continue praticando e em pouco tempo isso se tornará um hábito natural no seu desenvolvimento diário.

---

“Um código bem documentado é como uma receita bem escrita – qualquer chef pode seguir e criar algo incrível!” – Thiago Bianeck com uma ajudinha da IA