AULA 14 MÓDULO 0 atividade prática ⏱ 60 min

Atividade: C4 ao Wireframe com IA

Síntese do Módulo 0: modelar sistema com C4, escrever histórias, gerar wireframe com IA e spec OpenAPI. Tudo junto, do processo ao artefato.

C4históriaswireframev0OpenAPISDDatividade

O que você vai construir

Esta é a aula de síntese do Módulo 0. Você vai aplicar tudo que aprendeu nas últimas 13 aulas em um projeto integrado: modelar um sistema do zero, definir histórias, gerar wireframe com IA e exportar a spec OpenAPI.

SISTEMA PROPOSTO: SISTEMA DE BIBLIOTECA UNIVERSITÁRIA
PASSO 1
Desenhar o C4 Context (quem usa, sistemas externos)
PASSO 2
Expandir para C4 Container (app web, API, banco)
PASSO 3
Escrever 3 histórias de usuário com critérios de aceite
PASSO 4
Transformar 1 história em prompt e gerar wireframe com v0 ou Claude
PASSO 5
Escrever spec OpenAPI do endpoint principal

C4 Context do sistema

Comece identificando os atores e sistemas externos. Quem usa o sistema? Com quais serviços externos ele se comunica?

Atores: Aluno, Bibliotecário, Admin
Sistema central: Sistema de Biblioteca
Sistemas externos: Sistema Acadêmico (LDAP), Email (SMTP), Pagamentos (multas)
Interações principais: Aluno busca e reserva livros. Bibliotecário gerencia acervo. Multas integradas ao sistema acadêmico.
💡
sua vez
Agora adapte para outro sistema: e-commerce, delivery, clínica. O importante é identificar: quem usa, o que faz e com quem o sistema se comunica externamente.

Histórias de usuário

Três histórias como ponto de partida. Adicione mais conforme o sistema que você escolheu.

US-01
Como aluno
quero pesquisar livros por título, autor ou ISBN
para encontrar rapidamente o que preciso sem ir à biblioteca
US-02
Como aluno
quero reservar um livro disponível
para garantir que estará disponível quando eu for buscá-lo
US-03
Como bibliotecário
quero registrar devolução de empréstimo
para atualizar o acervo e liberar para outros alunos
javascript 
// Spec OpenAPI — endpoint de busca de livros
openapi: "3.0.0"
info:
  title: Biblioteca API
  version: "1.0.0"

paths:
  /books/search:
    get:
      summary: Buscar livros
      parameters:
        - name: q
          in: query
          required: true
          schema: { type: string, minLength: 2 }
          description: Título, autor ou ISBN
        - name: available
          in: query
          schema: { type: boolean }
          description: Filtrar apenas disponíveis
      responses:
        "200":
          description: Lista de livros encontrados
          content:
            application/json:
              schema:
                type: array
                items:
                  $ref: "#/components/schemas/Book"
        "400": { description: Parâmetro inválido }

components:
  schemas:
    Book:
      properties:
        id:        { type: string }
        titulo:    { type: string }
        autor:     { type: string }
        isbn:      { type: string }
        available: { type: boolean }
⚡
quiz · aula 14
Teste seus conhecimentos
0/3 respondidas
QUESTÃO 01
No fluxo SDD, por que o C4 Context vem antes das histórias de usuário?
QUESTÃO 02
Por que transformar uma história em prompt antes de gerar o wireframe?
QUESTÃO 03
A spec OpenAPI deve ser escrita antes ou depois do código?
0/3
← aula anterior
Ferramentas para Interface
aula 14 de 67
módulo 0
próxima aula →
Ambientes de Desenvolvimento Local