0%
Tutorial 6 de 10
60% concluído

Colaboração com o GitHub

Domine pull requests, issues e discussions para colaborar de forma eficiente com outros desenvolvedores.

Colaboração com o GitHub

O GitHub revoluciona a colaboração no desenvolvimento de software. Este tutorial ensinará você a usar as ferramentas colaborativas do GitHub: pull requests, issues, discussions e muito mais para trabalhar com eficiência em equipe.

Visão geral da colaboração

ForkClonePushPull RequestReviewMergePullDéveloppeur ADépôt ForkDépôt Local ABranche FeatureDépôt OriginalDéveloppeur BMaintainerDépôt Local B

Issues: gerenciamento de tarefas e bugs

O que é uma Issue?

Uma issue é um ticket para:

  • Reportar bugs
  • Propor funcionalidades
  • Fazer perguntas
  • Organizar tarefas

Criar uma Issue

# Template d'issue pour bug
**Description du bug**
Description claire et concise du problème.

**Étapes pour reproduire**
1. Aller à '...'
2. Cliquer sur '....'
3. Faire défiler jusqu'à '....'
4. Voir l'erreur

**Comportement attendu**
Description de ce qui devrait se passer.

**Captures d'écran**
Si applicable, ajouter des captures d'écran.

**Environnement:**
- OS: [ex: iOS]
- Navigateur: [ex: chrome, safari]
- Version: [ex: 22]

Gerenciamento de Issues

# Avec GitHub CLI
gh issue create --title "Bug dans le login" --body "Description détaillée"
gh issue list
gh issue view 123
gh issue close 123

# Assigner une issue
gh issue edit 123 --add-assignee username

# Ajouter des labels
gh issue edit 123 --add-label bug,priority-high

Labels e organização

Labels padrão:

  • bug: algo não está funcionando
  • enhancement: nova funcionalidade ou solicitação
  • documentation: melhorias na documentação
  • good first issue: bom para novos contribuidores
  • help wanted: ajuda adicional desejada

Labels personalizados:

priority-high (rouge)
priority-medium (orange)
priority-low (vert)
frontend (bleu)
backend (violet)

Pull Requests: propor modificações

Fluxo de trabalho de Pull Request

# 1. Fork du dépôt (via l'interface GitHub)
# 2. Clone de votre fork
git clone https://github.com/VOTRE-USERNAME/projet.git
cd projet

# 3. Créer une branche
git checkout -b feature/nouvelle-fonctionnalite

# 4. Développer et commiter
echo "nouveau code" > feature.js
git add feature.js
git commit -m "feat: add new feature"

# 5. Pousser la branche
git push origin feature/nouvelle-fonctionnalite

# 6. Créer la Pull Request via l'interface GitHub

Anatomia de uma Pull Request

# Template de Pull Request

## Description
Résumé des changements et motivation.

## Type de changement
- [ ] Bug fix (changement non-breaking qui corrige un problème)
- [ ] Nouvelle fonctionnalité (changement non-breaking qui ajoute une fonctionnalité)
- [ ] Breaking change (fix ou feature qui casserait la fonctionnalité existante)
- [ ] Documentation

## Comment cela a-t-il été testé ?
Description des tests effectués.

## Checklist:
- [ ] Mon code suit les guidelines du projet
- [ ] J'ai effectué une auto-review de mon code
- [ ] J'ai commenté mon code, particulièrement dans les zones difficiles
- [ ] J'ai fait les changements correspondants à la documentation
- [ ] Mes changements ne génèrent pas de nouveaux warnings
- [ ] J'ai ajouté des tests qui prouvent que mon fix est efficace
- [ ] Les tests nouveaux et existants passent localement

Comandos do GitHub CLI para PRs

# Créer une PR
gh pr create --title "Add new feature" --body "Description détaillée"

# Lister les PR
gh pr list

# Voir une PR
gh pr view 123

# Checkout d'une PR pour test
gh pr checkout 123

# Merger une PR
gh pr merge 123 --merge  # ou --squash ou --rebase

# Fermer une PR
gh pr close 123

Code Review: revisão de código

Processo de Review

  1. Leitura do código: entender as mudanças
  2. Teste local: verificar se funciona
  3. Feedback construtivo: comentários úteis
  4. Aprovação ou solicitação de mudanças

Tipos de comentários

# Commentaire général
Cette approche est intéressante, mais avez-vous considéré utiliser X au lieu de Y ?

# Suggestion de code
```suggestion
function calculateTotal(items) {
    return items.reduce((sum, item) => sum + item.price, 0);
}

Question

Pourquoi avez-vous choisi cette méthode plutôt que l’API native ?

Nitpick (détail mineur)

nit: Espace manquant après la virgule


### Boas práticas de Review

**Para o reviewer:**
- Seja construtivo e respeitoso
- Explique o "porquê" das suas sugestões
- Aprove rapidamente as boas PRs
- Teste as mudanças importantes

**Para o autor:**
- Responda aos comentários
- Implemente as sugestões pertinentes
- Peça esclarecimentos se necessário
- Agradeça pelas reviews

## Forks e contribuições

### Fork de um projeto

```bash
# 1. Fork via l'interface GitHub
# 2. Clone de votre fork
git clone https://github.com/VOTRE-USERNAME/projet-fork.git
cd projet-fork

# 3. Ajouter le dépôt original comme remote
git remote add upstream https://github.com/AUTEUR-ORIGINAL/projet.git

# 4. Vérifier les remotes
git remote -v

Sincronizar com o upstream

# Récupérer les changements de l'upstream
git fetch upstream

# Merger les changements dans votre main
git checkout main
git merge upstream/main

# Pousser vers votre fork
git push origin main

Fluxo de contribuição

# 1. Synchroniser avec upstream
git fetch upstream
git checkout main
git merge upstream/main

# 2. Créer une branche pour votre contribution
git checkout -b fix/bug-description

# 3. Développer
# ... modifications ...

# 4. Commiter
git add .
git commit -m "fix: resolve issue with user authentication"

# 5. Pousser vers votre fork
git push origin fix/bug-description

# 6. Créer une Pull Request vers l'upstream

GitHub Discussions

Tipos de discussões

  • Q&A: perguntas e respostas
  • Ideas: propostas de ideias
  • General: discussões gerais
  • Show and tell: compartilhar realizações

Criar uma discussão

# Exemple de discussion "Ideas"
**Titre :** Ajouter un mode sombre à l'application

**Description :**
Je propose d'ajouter un mode sombre pour améliorer l'expérience utilisateur, 
particulièrement pour l'utilisation nocturne.

**Avantages :**
- Réduction de la fatigue oculaire
- Économie de batterie sur les écrans OLED
- Tendance moderne du design

**Questions :**
- Quelle palette de couleurs utiliser ?
- Faut-il un toggle automatique basé sur l'heure ?
- Comment gérer la compatibilité avec les thèmes existants ?

Gerenciamento de projetos com o GitHub

GitHub Projects

# Organisation d'un projet
Colonnes typiques :
- Backlog
- To Do
- In Progress
- In Review
- Done

# Automatisation
- Déplacer automatiquement les cartes selon les événements
- Lier les issues et PR aux cartes
- Filtrer par assigné, label, milestone

Milestones

# Organiser les issues par version/sprint
Milestone: Version 2.0
- Issue #45: Ajouter authentification OAuth
- Issue #46: Améliorer les performances
- Issue #47: Corriger le bug de navigation

Due date: 2024-03-15
Progress: 2/3 issues fermées (67%)

Notificações e menções

Sistema de notificações

# Types de notifications
- Mentions (@username)
- Assignations
- Reviews demandées
- Commentaires sur vos PR/Issues
- Activité sur les dépôts watchés

# Gestion des notifications
Settings > Notifications
- Email notifications
- Web notifications
- Mobile notifications

Menções e equipes

# Mentionner un utilisateur
@username pouvez-vous regarder cette PR ?

# Mentionner une équipe
@org/frontend-team cette PR concerne l'interface utilisateur

# Mentionner dans un commit
git commit -m "fix: resolve login issue

Fixes #123
cc @maintainer-team"

Segurança e permissões

Níveis de acesso

  • Read: clonar e ler
  • Triage: gerenciar issues e PRs
  • Write: push e merge
  • Maintain: gerenciar o repositório sem acesso destrutivo
  • Admin: acesso completo

Branch protection

# Règles de protection pour main
- Require pull request reviews before merging
- Require status checks to pass before merging
- Require branches to be up to date before merging
- Require conversation resolution before merging
- Restrict pushes that create files larger than 100MB

Exercícios práticos

Exercício 1: primeira contribuição

# 1. Fork un projet open source simple
# 2. Clone votre fork
git clone https://github.com/VOTRE-USERNAME/projet-fork.git

# 3. Créer une branche
git checkout -b docs/improve-readme

# 4. Améliorer la documentation
echo "## Installation\n\n\`\`\`bash\nnpm install\n\`\`\`" >> README.md

# 5. Commiter et pousser
git add README.md
git commit -m "docs: improve installation instructions"
git push origin docs/improve-readme

# 6. Créer une Pull Request

Exercício 2: gerenciamento de issues

# 1. Créer plusieurs issues dans votre dépôt
gh issue create --title "Bug: Login ne fonctionne pas" --label bug
gh issue create --title "Feature: Ajouter mode sombre" --label enhancement
gh issue create --title "Docs: Améliorer le README" --label documentation

# 2. Assigner et organiser
gh issue edit 1 --add-assignee VOTRE-USERNAME
gh issue edit 2 --add-label "good first issue"

# 3. Lier une PR à une issue
git checkout -b fix/login-bug
# ... développement ...
git commit -m "fix: resolve login authentication issue

Fixes #1"

Exercício 3: Code Review

# 1. Créer une PR avec du code à améliorer
echo "function add(a,b){return a+b}" > math.js
git add math.js
git commit -m "add math function"
git push origin feature/math

# 2. Créer la PR et demander une review
gh pr create --title "Add math utilities" --reviewer ami-reviewer

# 3. Répondre aux commentaires et améliorer
echo "function add(a, b) {
  if (typeof a !== 'number' || typeof b !== 'number') {
    throw new Error('Both arguments must be numbers');
  }
  return a + b;
}" > math.js

git add math.js
git commit -m "improve: add input validation to math function"
git push origin feature/math

Ferramentas e integrações

GitHub Desktop

Interface gráfica para:

  • Visualizar as mudanças
  • Criar commits
  • Gerenciar branches
  • Sincronizar com o GitHub

VS Code + GitHub

Extensões úteis:

  • GitHub Pull Requests and Issues
  • GitLens
  • GitHub Copilot

Integrações de CI/CD

# .github/workflows/ci.yml
name: CI
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'
      - run: npm install
      - run: npm test

Boas práticas colaborativas

Comunicação

  1. Seja claro nas suas descrições
  2. Use os templates para issues e PRs
  3. Responda rapidamente às reviews
  4. Documente suas decisões importantes

Organização

  1. Use labels consistentes
  2. Organize com milestones
  3. Atribua as responsabilidades
  4. Feche as issues resolvidas

Código

  1. Commits atômicos e descritivos
  2. Branches curtas e focadas
  3. Testes para as novas funcionalidades
  4. Documentação atualizada

Solução de problemas colaborativos

Conflitos de merge em uma PR

# 1. Synchroniser avec la branche principale
git fetch origin
git checkout feature-branch
git merge origin/main

# 2. Résoudre les conflits
# ... édition manuelle ...

# 3. Commiter la résolution
git add .
git commit -m "resolve merge conflicts"
git push origin feature-branch

PR bloqueada pelos checks

# Vérifier les status checks
gh pr checks

# Relancer les checks si nécessaire
gh pr ready --undo  # marquer comme draft
gh pr ready         # marquer comme ready

Recursos adicionais

Documentação do GitHub

Ferramentas de terceiros

  • Conventional Commits: padrão para mensagens
  • Semantic Release: automação de versões
  • All Contributors: reconhecimento dos contribuidores

Conclusão

A colaboração no GitHub vai muito além do simples compartilhamento de código. É um ecossistema completo que facilita a comunicação, a organização e a qualidade do desenvolvimento de software. Dominar essas ferramentas tornará você mais eficiente em seus projetos colaborativos.

No próximo tutorial, aprofundaremos a resolução de conflitos, um aspecto crucial da colaboração em equipe.

Tempo de leitura estimado: 25 minutos
Nível: Intermediário
Etapa anterior: Introdução ao GitHub
Próxima etapa: Resolução de conflitos

← Anterior Introdução ao GitHub Próximo → Resolução de conflitos
← Anterior Introdução ao GitHub Próximo → Resolução de conflitos