11 min leitura • Guide 41 of 877
Coordenando Times de Desenvolvimento Frontend e Backend
Times frontend e backend trabalhando em paralelo frequentemente enfrentam desafios de coordenação: trabalho bloqueado esperando por APIs, surpresas de integração, prioridades inconsistentes e apontar o dedo quando prazos escorregam. GitScrum fornece a visibilidade e estrutura para coordenar essas pistas paralelas, garantindo handoffs suaves e dor reduzida de integração.
Problemas Comuns de Coordenação
Quando times frontend e backend trabalham separadamente:
| Problema | Sintoma | Impacto |
|---|---|---|
| API não pronta | Frontend bloqueado, usando mocks indefinidamente | Atrasos de integração |
| Mudanças de API sem aviso | Frontend quebra após integração | Retrabalho, frustração |
| Prioridades diferentes | Times trabalhando em features não relacionadas | Entrega desalinhada |
| Contratos pouco claros | Ambos times assumem comportamentos diferentes | Integração cheia de bugs |
| Sem visibilidade compartilhada | Cada time cego ao progresso do outro | Surpresas tardias |
| Cultura de culpa | "Estávamos esperando por eles" | Baixa confiança, colaboração ruim |
Estrutura de Coordenação GitScrum
Configuração de Quadro Compartilhado
Board Configuration for Cross-Team Work:
OPÇÃO 1: QUADRO UNIFICADO
┌─────────────────────────────────────────────────────────────┐
│ DESENVOLVIMENTO DE FEATURE │
├─────────────────────────────────────────────────────────────┤
│ │
│ Backlog │ Backend │ Frontend │ Integra- │ Testing │Done│
│ │ Dev │ Dev │ ção │ │ │
│ ───────────┼──────────┼──────────┼──────────┼─────────┼────│
│ [User │ [API: │ │ │ │ │
│ Profile] │ Profile]│ │ │ │ │
│ │ BE: Alex │ │ │ │ │
│ │ │ │ │ │ │
│ [Dash- │ [API: │ [UI: │ │ │ │
│ board] │ Stats] │ Stats │ │ │ │
│ │ BE: Sam │ Widget] │ │ │ │
│ │ │ FE: Kim │ │ │ │
│ │ │ │ │ │ │
│ │ │ [UI: │ [Int: │ │ │
│ │ │ Charts] │ Charts] │ │ │
│ │ │ FE: Pat │ FE+BE │ │ │
└─────────────────────────────────────────────────────────────┘
OPÇÃO 2: QUADROS LINKADOS
┌─────────────────────────────────────────────────────────────┐
│ QUADRO BACKEND QUADRO FRONTEND │
├─────────────────────────────────────────────────────────────┤
│ │
│ To Do│In Prog│Review│Done ║ To Do│In Prog│Review│Done │
│ ─────┼───────┼──────┼──── ║ ─────┼───────┼──────┼──── │
│ [API:│ │ │ ║ [UI: │ │ │ │
│ User│ │ │ ║ User│ │ │ │
│ ────┼───────┼──────┼──────╬───────┼───────┼──────┼──── │
│ Blocks: UI: User Profile] ║ Blocked by: API: User] │
│ ║ │
│ Links mostram dependências entre quadros │
└─────────────────────────────────────────────────────────────┘
Configuração de Dependências de Tarefa
Configurando Dependências Cross-Team:
CONFIGURAÇÃO DEPENDÊNCIA TAREFA:
┌─────────────────────────────────────────────────────────────┐
│ TAREFA: UI - Página Perfil Usuário │
│ Time: Frontend │
│ Assignee: Kim │
├─────────────────────────────────────────────────────────────┤
│ │
│ DEPENDÊNCIAS: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ Blocked By (deve completar primeiro): ││
│ │ ││
│ │ ├── [✓] API: Autenticação Usuário (Done) ││
│ │ ├── [→] API: CRUD Perfil Usuário (In Progress) ││
│ │ │ Assignee: Alex ││
│ │ │ ETA: Amanhã ││
│ │ │ Status: 80% completo ││
│ │ └── [○] API: Upload Imagem Perfil (To Do) ││
│ │ Assignee: Sam ││
│ │ ETA: Próximo sprint ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ Blocks (esperando por isso): ││
│ │ ││
│ │ └── [○] Integration: Testes E2E Perfil Usuário ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ MODO TRABALHO: │
│ ○ Esperar todas dependências │
│ ● Começar com mocks, integrar quando pronto │
│ ○ Começar apenas após blockers feitos │
│ │
│ STATUS MOCK: │
│ Usando mock API: Sim │
│ Endpoint mock: /mocks/user-profile.json │
│ API real pronta: Parcial (2 de 3 endpoints) │
└─────────────────────────────────────────────────────────────┘
VISUALIZAÇÃO DEPENDÊNCIA:
┌─────────────────────────────────────────────────────────────┐
│ GRÁFICO DEPENDÊNCIA │
├─────────────────────────────────────────────────────────────┤
│ │
│ [API: Auth] ────► [API: Profile] ────► [UI: Profile] │
│ ✓ → ○ │
│ │ │ │
│ ▼ ▼ │
│ [API: Image] ───────► [Integration] │
│ ○ ○ │
│ │
│ Legenda: ✓ Done → In Progress ○ Waiting │
└─────────────────────────────────────────────────────────────┘
Gestão de Contratos API
Especificação API como Tarefas
Tracking de Contratos API:
TAREFA DE CONTRATO API:
┌─────────────────────────────────────────────────────────────┐
│ CONTRATO API: Endpoints Perfil Usuário │
│ Tipo: Contrato • Status: Aprovado │
├─────────────────────────────────────────────────────────────┤
│ │
│ ESPECIFICAÇÃO: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ GET /api/v1/users/:id/profile ││
│ │ ││
│ │ Response: ││
│ │ { ││
│ │ "id": "uuid", ││
│ │ "email": "string", ││
│ │ "name": "string", ││
│ │ "avatar_url": "string | null", ││
│ │ "created_at": "ISO8601", ││
│ │ "preferences": { ││
│ │ "theme": "light | dark", ││
│ │ "notifications": "boolean" ││
│ │ } ││
│ │ } ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ STATUS APROVAÇÃO: │
│ ├── Backend: ✓ Aprovado (Alex) │
│ ├── Frontend: ✓ Aprovado (Kim) │
│ └── Data: 15 Jan, 2024 │
│ │
│ STATUS IMPLEMENTAÇÃO: │
│ ├── Backend: ✓ Implementado, deployed para staging │
│ ├── Frontend: → Usando em desenvolvimento │
│ └── Integration tested: Pendente │
│ │
│ CHANGELOG: │
│ v1.1 (20 Jan): Adicionado objeto preferences │
│ v1.0 (15 Jan): Contrato inicial │
└─────────────────────────────────────────────────────────────┘
Workflow de Mudança de Contrato
Gerenciando Mudanças de API:
FLUXO DE SOLICITAÇÃO DE MUDANÇA:
┌─────────────────────────────────────────────────────────────┐
│ │
│ Backend Tarefa de Frontend │
│ propõe ──► revisão ◄── revisa │
│ mudança contrato impacto │
│ │ │
│ ▼ │
│ ┌─────────────┐ │
│ │ Discussão │ │
│ │ na tarefa │ │
│ └─────────────┘ │
│ │ │
│ ┌──────────┼──────────┐ │
│ ▼ ▼ ▼ │
│ [Aprovar] [Negociar] [Rejeitar] │
│ │ │ │ │
│ ▼ │ ▼ │
│ Atualizar │ Manter atual │
│ spec e │ │
│ Implementar │ │
│ │ │ │
│ ▼ ▼ │
│ Notificar times afetados │
│ │
└─────────────────────────────────────────────────────────────┘
Milestones de Integração
Pontos de Integração de Feature
Planejamento de Milestones de Integração:
FEATURE: Dashboard Usuário
┌─────────────────────────────────────────────────────────────┐
│ MILESTONES DE INTEGRAÇÃO │
├─────────────────────────────────────────────────────────────┤
│ │
│ Semana 1 │
│ ├── API: Autenticação ───┐ │
│ │ ├──► INT-1: Auth funciona │
│ └── UI: Fluxo login ───┘ com API real │
│ Data: Jan 22 │
│ Status: ✓ Feito │
│ │
│ Semana 2 │
│ ├── API: Stats dashboard ───┐ │
│ │ ├──► INT-2: Stats display │
│ └── UI: Stats widgets ───┘ Data: Jan 29 │
│ Status: → Hoje │
│ │
│ Semana 3 │
│ ├── API: Dados charts ───┐ │
│ │ ├──► INT-3: Charts live │
│ └── UI: Componentes chart ───┘ Data: Fev 5 │
│ Status: ○ Agendado │
│ │
│ Semana 4 │
│ └── Testing integração full ────► INT-4: E2E completo │
│ Data: Fev 12 │
│ Status: ○ Agendado │
│ │
└─────────────────────────────────────────────────────────────┘
Tarefas de Teste de Integração
Estrutura de Tarefa de Integração:
TAREFA INTEGRAÇÃO:
┌─────────────────────────────────────────────────────────────┐
│ INT-2: Integração Widget Estatísticas │
│ Tipo: Integração • Sprint: 23 │
├─────────────────────────────────────────────────────────────┤
│ │
│ COMPONENTES: │
│ ├── Backend: API-45 Endpoint Estatísticas (Alex) ✓ │
│ ├── Frontend: UI-89 Widget Estatísticas (Kim) ✓ │
│ └── Integração: Esta tarefa (Kim + Alex) │
│ │
│ CHECKLIST: │
│ ☑ Ambos componentes individualmente completos │
│ ☑ Implantar backend para staging │
│ ☑ Conectar frontend para API staging │
│ ☐ Verificar fluxo de dados correto │
│ ☐ Testar tratamento de erros │
│ ☐ Performance aceitável (< 200ms) │
│ ☐ Teste cross-browser │
│ ☐ Responsivo mobile │
│ │
│ AMBIENTE: │
│ URL Staging: staging.app.com │
│ Base API: staging-api.app.com/v1 │
│ │
│ PARTICIPANTES: │
│ Sessão integração: 29 Jan, 14h │
│ @Kim @Alex @QA-Jordan │
│ │
│ NOTAS: │
│ "Encontrado caso edge com dados vazios - Alex adicionando │
│ resposta estado vazio. ETA: 30 min" │
└─────────────────────────────────────────────────────────────┘
Visibilidade Cross-Team
Coordenação no Standup
Usando Team Standup para Updates Cross-Team:
VISTA STANDUP COMBINADA:
┌─────────────────────────────────────────────────────────────┐
│ STANDUP DIÁRIO - 29 Jan, 2024 │
├─────────────────────────────────────────────────────────────┤
│ │
│ TIME BACKEND │
│ ────────────────────────────────────────────────────────────│
│ Alex: │
│ Ontem: Completado endpoint API stats │
│ Hoje: Adicionando tratamento estado vazio │
│ Bloqueadores: Nenhum │
│ 📌 "API Stats pronta para integração @ 3pm" │
│ │
│ TIME FRONTEND │
│ ────────────────────────────────────────────────────────────│
│ Kim: │
│ Ontem: UI widget stats completo │
│ Hoje: Integração com API real │
│ Bloqueadores: Esperando API stats │
│ 📌 "@Alex - pronto quando você estiver para integração" │
│ │
│ ITENS SYNC CROSS-TEAM: │
│ ├── INT-2: Integração stats agendada 2pm │
│ ├── Mudança API: campo last_login aprovado │
│ └── Próxima integração: Charts (Fev 5) │
└─────────────────────────────────────────────────────────────┘
Dashboard de Progresso
Vista Progresso Cross-Team:
PROGRESSO FEATURE: Dashboard Usuário
┌─────────────────────────────────────────────────────────────┐
│ │
│ PROGRESSO BACKEND │
│ ████████████████████░░░░░░░░░░ 65% │
│ ├── API Auth ████████████████████ 100% ✓ │
│ ├── API Stats ████████████████████ 100% ✓ │
│ ├── API Charts ████████████░░░░░░░░ 60% → │
│ └── API Export ░░░░░░░░░░░░░░░░░░░░ 0% ○ │
│ │
│ PROGRESSO FRONTEND │
│ █████████████████░░░░░░░░░░░░░ 55% │
│ ├── UI Login ████████████████████ 100% ✓ │
│ ├── Stats Widgets ████████████████████ 100% ✓ │
│ ├── Chart Display ████████░░░░░░░░░░░░ 40% → │
│ └── Export UI ░░░░░░░░░░░░░░░░░░░░ 0% ○ │
│ │
│ PROGRESSO INTEGRAÇÃO │
│ █████████░░░░░░░░░░░░░░░░░░░░░ 33% │
│ ├── INT-1: Auth ████████████████████ 100% ✓ │
│ ├── INT-2: Stats ████████████░░░░░░░░ 60% → Hoje │
│ ├── INT-3: Charts ░░░░░░░░░░░░░░░░░░░░ 0% ○ Fev 5 │
│ └── INT-4: E2E ░░░░░░░░░░░░░░░░░░░░ 0% ○ Fev 12 │
│ │
│ GERAL: 51% completo │
│ Objetivo: Fev 15 (Beta) │
│ Status: ✓ No Prazo │
└─────────────────────────────────────────────────────────────┘
Padrões de Comunicação
Integração Slack/Teams
Notificações Automatizadas Cross-Team:
REGRAS DE NOTIFICAÇÃO:
┌─────────────────────────────────────────────────────────────┐
│ Configuração Notificação Cross-Team │
├─────────────────────────────────────────────────────────────┤
│ │
│ QUANDO: Tarefa API move para "Done" │
│ NOTIFICAR: Canal #frontend-team │
│ MENSAGEM: "🟢 API pronta: [Título Tarefa] │
│ Staging: [URL] │
│ Docs: [Link] │
│ Bloqueia: [Tarefas FE linkadas]" │
│ │
│ QUANDO: Contrato API criado/atualizado │
│ NOTIFICAR: #frontend-team + #backend-team │
│ MENSAGEM: "📋 Atualização contrato: [Nome API] │
│ Mudança: [Resumo] │
│ Revisão necessária: [Assignees]" │
│ │
│ QUANDO: Tarefa integração criada │
│ NOTIFICAR: Ambos canais de time │
│ MENSAGEM: "🔗 Integração agendada: [Tarefa] │
│ Data: [Data/Hora] │
│ Participantes: [Nomes]" │
│ │
│ QUANDO: Bloqueador adicionado à tarefa │
│ NOTIFICAR: Canal do time bloqueado │
│ MENSAGEM: "🚫 Bloqueado: [Tarefa] está esperando [Bloqueador] │
│ Proprietário: [Assignee] │
│ Impacto: [Lista de tarefas bloqueadas]" │
└─────────────────────────────────────────────────────────────┘
Reuniões de Sincronização
Estrutura de Reunião de Coordenação:
SYNC CROSS-TEAM SEMANAL:
┌─────────────────────────────────────────────────────────────┐
│ AGENDA (30 min máximo) │
├─────────────────────────────────────────────────────────────┤
│ │
│ 1. STATUS DE INTEGRAÇÃO (5 min) │
│ - O que foi integrado esta semana? │
│ - Algum problema de integração? │
│ │
│ 2. HANDOFFS PRÓXIMOS (10 min) │
│ - APIs completando esta semana │
│ - Necessidades frontend do backend │
│ - Necessidades backend do frontend │
│ │
│ 3. ATUALIZAÇÕES DE CONTRATO (5 min) │
│ - Alguma mudança de contrato pendente? │
│ - Mudanças breaking chegando? │
│ │
│ 4. BLOQUEADORES (5 min) │
│ - Bloqueadores cross-team │
│ - Proprietários de resolução │
│ │
│ 5. PRÓXIMA INTEGRAÇÃO (5 min) │
│ - Data, hora, participantes │
│ - O que preparar │
│ │
│ SAÍDA: │
│ - Status de tarefas atualizados no GitScrum │
│ - Itens de ação atribuídos │
│ - Próxima integração agendada │
└─────────────────────────────────────────────────────────────┘
Melhores Práticas
Para Coordenação Suave
- Abordagem API-first — Definir contratos antes de implementação
- Mocks cedo — Frontend não deveria esperar APIs reais
- Integrações pequenas — Integrar frequentemente, não no final
- Ownership claro — Cada ponto integração tem um owner
- Definição compartilhada de done — Ambos times concordam quando "completo"
Anti-Padrões a Evitar
EVITAR ESTES:
✗ Integração "big bang" no final
✗ Acordos API verbais (sem contratos escritos)
✗ Esperar APIs perfeitas antes de iniciar frontend
✗ Backlogs separados sem visibilidade
✗ Integração como "problema de outra pessoa"
✗ Mudar APIs sem notificar consumidores