DS & II

Capítulo 19 - Projeto Final P1

Leitura de 4 min

🚀 Capítulo 19: A Guerra dos Tronos (Tema: Game of Thrones)

NOTE

Este capítulo inicia o projeto final do curso de Full Stack. Reúna os seus exércitos (as tecnologias) e planeje a conquista do Trono de Ferro!

1. 🎯 Objetivo da Aula

Planejar a arquitetura completa de uma aplicação Full Stack, definindo o escopo do projeto, as tabelas do banco de dados e as tecnologias que serão utilizadas antes de começar a escrever o código.

2. 🏢 O Cenário Prático (Seu Desafio)

Na série Game of Thrones, antes de marchar para a guerra, os líderes das grandes famílias nobres se reúnem ao redor de uma mesa de pedra com o mapa do continente esculpido. Eles decidem onde posicionar os navios, quais castelos atacar e como defender as suas terras. Um bom guerreiro sabe que batalhas não são vencidas apenas com força bruta, mas com estratégia e planejamento impecáveis!

Você chegou ao grande desafio final deste curso de Projetos Full Stack!

  • Seu objetivo é construir um aplicativo completo de ponta a ponta.
  • Neste capítulo, nós não vamos escrever nenhuma linha de código! Nós vamos planejar a arquitetura da nossa aplicação, assim como os reis planejam as suas batalhas. Seu desafio é desenhar o plano de conquista!

🧠 Fundamentos: A Teoria Traduzida

Antes de abrir o VS Code, um desenvolvedor Full Stack profissional responde a perguntas de planejamento:

💡 1. O que o aplicativo vai fazer? (O Escopo)

Defina um projeto simples, mas completo. Sugestão: Um sistema de votação para escolher o próximo rei (parecido com o que planejamos no curso de Figma!).

  • O app precisa ter: Uma tela para votar, uma tela para ver o ranking e um backend que salve os votos no banco de dados.

📊 2. Como serão os dados? (A Modelagem)

Desenhe as tabelas que o seu banco de dados vai precisar:

  • Tabela Personagens (ID, Nome, Casa Nobre).
  • Tabela Votos (ID, Personagem_ID, Data).

🥞 3. Qual será a Stack? (As Tecnologias)

Reúna o seu exército! Para este projeto final, sugerimos a stack que aprendemos:

  • Frontend: React (ou HTML/CSS puro).
  • Backend: Node.js com Express.
  • Banco de Dados: PostgreSQL (com Prisma) ou MongoDB.

4. 📖 Exemplo Guiado: O Mapa da Batalha

O planejamento de um projeto Full Stack ideal para portfólio de estudante deve caber em uma página:

  • Nome do Projeto: App Trono de Ferro.
  • Objetivo: Permitir que fãs votem no seu personagem favorito.
  • Telas: Home (Boas-vindas), Votação e Ranking.
  • Rotas da API: GET /personagens e POST /votar.

5. 🛠️ Prática Obrigatória: O Seu Plano de Guerra

Preencha o formulário de planejamento abaixo para o projeto que você deseja construir (pode seguir a nossa sugestão ou inventar o seu próprio tema, como uma Pokédex ou um controle de heróis):

  1. Nome do seu projeto:
  2. Qual banco de dados você vai usar (SQL ou NoSQL) e por quê?
  3. Descreva uma rota (URL e Método HTTP) que o seu backend vai precisar ter.

7. 📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)

  1. Faça o Commit: No GitHub Desktop, digite a mensagem (ex: Finaliza Capítulo 19 FS_GuerraDosTronos) e clique em Commit to main.
  2. Envie para a Nuvem (Push): Clique em Push origin.

8. 📂 Estrutura de Pastas

proj_aplicacoes_full_stack/
├── capitulos/
│   └── capitulo_19_game_of_thrones_p1.md

💡 Checkpoint de Lógica

Gaste tempo planejando! Cada hora gasta planejando a arquitetura do software salva cerca de horas de refatoração de código bagunçado no futuro!

10. 🔥 Desafio de Fixação

Tente desenhar o fluxo completo do seu projeto (Frontend → Backend → Banco) em um papel ou ferramenta de desenho como o Excalidraw.

🔑 Gabarito de Código/Fórmulas

Gabarito da Prática Obrigatória (Exemplo de resposta esperada):

  1. Nome: App Bat-Sinal.
  2. Banco: NoSQL (MongoDB), porque as mensagens de alerta de crimes podem mudar de formato (umas têm fotos, outras apenas texto) e precisamos de flexibilidade.
  3. Rota: POST /criar-alerta (Para o Batman enviar um novo alerta para o servidor).

← Capitulo Anterior | Proximo Capitulo →

Visão de gráfico

Backlinks