Desenvolvimento Frontend com Vue.js 💻

Domine a criação de interfaces modernas, reativas e de alta performance com Vue 3, Vite, Pinia e Vue Router.

Foco do Curso

Metodologia: Aprendizado prático focado na construção de Single Page Applications (SPAs) profissionais, utilizando as melhores práticas do ecossistema Vue.

🎯 O Que Você Vai Aprender

Fundamentos do Vue 3 --- Aprenda reatividade, Data Binding, diretivas e o poder da Composition API no desenvolvimento moderno. Ir para Módulo 1
Componentização --- Crie interfaces modulares e reutilizáveis através de componentes, props, eventos e slots para máxima produtividade. Ver Componentes
Ecossistema Vue --- Domine o gerenciamento de rotas com Vue Router e o estado global da aplicação com Pinia. Ver Ecossistema
Projetos Reais --- Aplique seus conhecimentos em projetos práticos, desde Task Managers até CRUDs consumindo APIs REST. Ver Projetos

📚 Jornada de Aprendizado (16 Aulas)

O curso é estruturado em quatro fases de especialização.

Plano de Ensino 📅

Curso: Desenvolvimento Frontend com Vue.js 3

Ementa

Módulo 1: Fundamentos do Frontend Moderno: Evolução do frontend, SPA vs MPA, Setup com Vite, Reatividade (Composition API) e Diretivas.
Módulo 2: Componentização e Arquitetura: Single File Components (SFC), Props, Emits, Ciclo de Vida (Hooks) e Organização Profissional.
Módulo 3: Roteamento, Estado e Integração: Vue Router, Consumo de API REST (Axios), Gerenciamento de Estado Global (Pinia) e CRUD completo.
Módulo 4: Profissionalização e Boas Práticas: Scoped CSS, Clean Code no Vue, Build para Produção e Deploy Contínuo.

Cronograma (16 Aulas)

Módulo 1: Fundamentos do Frontend Moderno

Aula 01: Introdução ao Frontend Moderno e Vue.js
Aula 02: Estrutura do Projeto Vue 3 com Vite
Aula 03: Reatividade e Data Binding (v-bind, v-model)
Aula 04: Diretivas e Renderização Condicional (v-if, v-for)

Módulo 2: Componentização e Arquitetura

Aula 05: Componentes: Criação, Registro e Props
Aula 06: Comunicação entre Componentes (Emit e Eventos)
Aula 07: Ciclo de Vida e Lifecycle Hooks
Aula 08: Projeto Prático I: Task Manager (SPA)

Módulo 3: Roteamento, Estado e Integração

Aula 09: Roteamento SPA com Vue Router
Aula 10: Consumo de API REST com Axios (HTTP)
Aula 11: Gerenciamento de Estado Global com Pinia
Aula 12: Projeto Prático II: Integração API + Frontend (CRUD)

Módulo 4: Profissionalização e Boas Práticas

Aula 13: Boas Práticas, Clean Code e Arquitetura Vue
Aula 14: Estilização Moderna e Responsividade
Aula 15: Build, Variáveis de Ambiente e Deploy (CI/CD)
Aula 16: Projeto Final: Kanban System e Apresentação

Avaliação

Exercícios: 16 listas de exercícios teóricos e práticos (1 por aula).
Projetos: 16 mini-projetos de aplicação imediata.
Quizzes: 16 testes de conhecimento (10 questões cada).
Projeto Integrador: Desenvolvimento de um Sistema Kanban completo com autenticação simulada e consumo de API.

Aulas

Aula 01 – Introdução ao Frontend Moderno 🚀

Seja bem-vindo à primeira aula do curso de Desenvolvimento Frontend com Vue.js! Hoje vamos entender o que torna o frontend moderno tão poderoso e por que o Vue.js é uma das melhores escolhas para desenvolvedores hoje.

🧠 Conceitos Fundamentais

A Evolução do Frontend

Antigamente, a web era composta por páginas estáticas (HTML) enviadas pelo servidor. Hoje, trabalhamos com aplicações dinâmicas que rodam quase inteiramente no navegador do usuário.

Era	Característica	Tecnologia
Página Estática	Documentos simples	HTML/CSS
Web 2.0	Interatividade básica	jQuery/AJAX
Modern Web	Componentização e Reatividade	Vue/React/Angular

SPA vs MPA

É crucial entender a diferença entre Single Page Application (SPA) e Multi Page Application (MPA).

graph TD
    A[Usuário clica em link] --> B{Tipo de App}
    B -- MPA --> C[Servidor recarrega página inteira]
    B -- SPA --> D[JavaScript atualiza apenas o conteúdo necessário]
    C --> E[Interface "pisca" e demora]
    D --> F[Experiência fluida e instantânea]

[!NOTE] No Vue.js, focamos na construção de SPAs, onde o roteamento e a renderização acontecem no lado do cliente (Client-side Rendering).

📦 O que é Vue.js?

O Vue é um framework progressivo. Isso significa que você pode usá-lo apenas para uma pequena parte do seu site ou para construir uma aplicação inteira do zero.

Pilares do Vue 3:

Reatividade: Os dados e a interface estão sempre sincronizados.
Componentização: A interface é dividida em pequenas peças reutilizáveis.
Fácil Aprendizado: Curva de aprendizado suave comparada a outros frameworks.

💻 Setup do Ambiente

Para começar, precisamos preparar nossa máquina.

# 1. Verifique se o Node.js está instalado
$ node -v
v20.x.x

# 2. Crie seu primeiro projeto usando Vite
$ npm create vite@latest meu-projeto-vue -- --template vue

# 3. Entre na pasta e instale as dependências
$ cd meu-projeto-vue
$ npm install

# 4. Inicie o servidor de desenvolvimento
$ npm run dev

[!IMPORTANT] Certifique-se de ter o Node.js (LTS) instalado em sua máquina antes de prosseguir.

📝 Exercício de Fixação

Explique com suas palavras a principal vantagem de uma SPA sobre uma MPA.
Instale o Node.js em sua máquina e execute os comandos acima para criar seu primeiro projeto "Hello World" com Vite.

🚀 Dica: No próximo encontro, vamos explorar a fundo a estrutura de pastas desse projeto que acabamos de criar!

Aula 02 – Estrutura do Projeto Vue 3 🏗️

Agora que temos o ambiente pronto, vamos entender cada arquivo e pasta gerada pelo Vite. Dominar a estrutura é o primeiro passo para organizar aplicações escaláveis.

📂 Visão Geral do Diretório

Quando você cria um projeto com npm create vite@latest, a seguinte estrutura é gerada:

node_modules/: Onde moram as bibliotecas que o Vue precisa.
public/: Arquivos estáticos que não passam pelo processamento (como o favicon).
src/: Onde a mágica acontece! Todo o seu código Vue ficará aqui.
- assets/: Imagens e estilos globais.
- components/: Seus componentes Vue reutilizáveis.
- App.vue: O componente raiz da aplicação.
- main.js: O ponto de entrada que "monta" o Vue no HTML.
index.html: O arquivo HTML principal (único na SPA).
package.json: Lista de dependências e scripts do projeto.

🔍 O Ponto de Entrada: `main.js`

O arquivo main.js é responsável por inicializar a instância do Vue e conectá-la ao elemento #app do seu index.html.

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

createApp(App).mount('#app')

graph LR
    A[index.html] -- contem --> B["div id='app'"]
    C[main.js] -- importa --> D[App.vue]
    C -- monta em --> B

🧩 Single File Components (SFC)

No Vue, usamos extensões .vue. Eles são chamados de Single File Components porque unem Estrutura, Lógica e Estilo em um único arquivo.

Anatomia de um arquivo `.vue`:

<template>
  <!-- 1. Estrutura (HTML) -->
  <div class="saudacao">
    <h1>{{ mensagem }}</h1>
  </div>
</template>

<script setup>
  // 2. Lógica (JS/Composition API)
  const mensagem = "Olá, Estrutura Vue!"
</script>

<style scoped>
  /* 3. Estilo (CSS) */
  h1 { color: #42b983; }
</style>

[!TIP] O atributo scoped no <style> garante que o CSS deste arquivo não afete outros componentes da aplicação.

💻 Explorando o Projeto

Vamos rodar o projeto e ver as mudanças em tempo real.

# Inicie o modo desenvolvimento
$ npm run dev

# Abra o App.vue no seu editor e mude o texto do h1
# Salve o arquivo e veja o navegador atualizar instantaneamente!

[!WARNING] Nunca delete a div#app do seu index.html, ou o Vue não terá onde renderizar os componentes!

📝 Exercício

Explore a pasta src/components e identifique o componente HelloWorld.vue.
Tente criar um novo arquivo chamado MeuComponente.vue dentro da pasta components seguindo a estrutura (Template, Script, Style).

🚀 Próxima Aula: Vamos aprender como o Vue gerencia dados de forma reativa!

Macro Syntax Error

File: aulas/aula-03.md

Line 12 in Markdown file: Expected an expression, got 'end of print statement'

Para exibir dados simples, usamos as chaves duplas: `{{ }}`.

Macro Syntax Error

File: aulas/aula-04.md

Line 15 in Markdown file: unexpected char '?' at 465

    {{ logado ? 'Sair' : 'Entrar' }}

Aula 05 – Componentes e Props 🧩

A componentização é o coração do Vue.js. Em vez de uma página monolítica, dividimos a UI em pequenas peças independentes e reutilizáveis chamadas Componentes.

🏗️ Criando seu Primeiro Componente

Um componente no Vue é um arquivo .vue que pode ser importado por outros.

Crie src/components/CardUsuario.vue:

<template>
  <div class="card">
    <h2>{{ nome }}</h2>
    <p>{{ profissao }}</p>
  </div>
</template>

<script setup>
// Definindo o que o componente recebe de fora (Props)
defineProps(['nome', 'profissao'])
</script>

<style scoped>
.card { border: 1px solid #ccc; padding: 10px; border-radius: 8px; }
</style>

📥 Props: Comunicação Pai → Filho

As Props são canais de entrada de dados. Servem para passar informações do componente pai para o filho.

No arquivo App.vue (Pai):

<template>
  <h1>Meus contatos:</h1>

  <!-- Usando o componente e passando dados via Props -->
  <CardUsuario nome="Ricardo" profissao="Desenvolvedor" />
  <CardUsuario nome="Maria" profissao="Designer" />
</template>

<script setup>
import CardUsuario from './components/CardUsuario.vue'
</script>

graph TD
    App[App.vue - Pai] -- "Passa: nome='Ricardo'" --> Card[CardUsuario.vue - Filho]

🛡️ Validação de Props

É uma boa prática definir explicitamente o tipo e se a prop é obrigatória para evitar erros de desenvolvimento.

defineProps({
  nome: {
    type: String,
    required: true
  },
  idade: {
    type: Number,
    default: 18 // Valor caso não seja passado
  }
})

🧠 Conceitos Chave

Componentes são Legos

Pense nos componentes como peças de Lego. Cada peça tem uma função específica e pode ser usada em diferentes lugares do "castelo" (sua aplicação).

💻 Mão na Massa

Crie um componente chamado AlertaMensagem.vue que receba uma prop tipo (pode ser 'sucesso' ou 'erro') e uma prop mensagem. Use o v-if para mudar a cor de fundo baseado no tipo.

📝 Exercício

O que são Props e qual a direção que os dados fluem ao usá-las?
Por que é importante usar o atributo scoped no estilo de um componente?
Crie um componente CardProduto.vue que receba nome, preço e uma booleana disponivel.

🚀 Próxima Aula: Como o componente filho avisa o pai que algo aconteceu? Descubra os Emits!

Aula 06 – Eventos e Comunicação entre Componentes 📡

Já sabemos como enviar dados para baixo (Pai → Filho) com Props. Mas e se o filho precisar avisar ao pai que um botão foi clicado ou um formulário foi preenchido? Usamos Events (Emits).

📤 Emitindo Eventos (Filho → Pai)

O componente filho "grita" um evento e o pai fica "ouvindo".

1. No Componente Filho (`BotaoAcao.vue`):

<template>
  <button @click="enviarClique">Clique aqui!</button>
</template>

<script setup>
// Declarando quais eventos este componente pode emitir
const emit = defineEmits(['clicouNoBotao'])

function enviarClique() {
  // Emitindo o evento com um dado opcional
  emit('clicouNoBotao', 'Dados enviados do filho')
}
</script>

2. No Componente Pai (`App.vue`):

<template>
  <!-- Ouvindo o evento com @ (assim como @click) -->
  <BotaoAcao @clicou-no-botao="tratarEvento" />

  <p>Mensagem recebida: {{ mensagem }}</p>
</template>

<script setup>
import { ref } from 'vue'
import BotaoAcao from './components/BotaoAcao.vue'

const mensagem = ref('')

function tratarEvento(payload) {
  mensagem.value = payload
}
</script>

📊 Fluxo de Comunicação

sequenceDiagram
    participant P as Pai (App.vue)
    participant F as Filho (BotaoAcao.vue)
    P->>F: Props (Dados)
    Note over F: Usuário interage
    F-->>P: Emit (Evento)

🔄 Comunicação entre Irmãos

Componentes "irmãos" não se comunicam diretamente. * Padrão: O irmão enviador emite para o pai, e o pai passa para o outro irmão via Prop. * Avançado: Veremos no futuro o uso de Stores (Pinia) para estado global.

🧠 Boas Práticas

Nomes de Eventos

Enquanto props usam camelCase no script e kebab-case no HTML, os eventos devem, por convenção, sempre usar kebab-case nos emits: emit('atualizar-lista').

💻 Mão na Massa

Crie um componente ItemTarefa.vue que tenha um botão para "Remover". Ao clicar, ele deve emitir um evento remover passando o ID da tarefa para o pai.

📝 Exercício

Qual a diretiva usada no pai para "ouvir" um evento emitido pelo filho?
Como passamos dados adicionais junto com um evento emitido?
Explique por que componentes irmãos não se falam diretamente.

🚀 Próxima Aula: Vamos conhecer os momentos "mágicos" do Vue com o Ciclo de Vida!

Aula 07 – Ciclo de Vida e Hooks 🔄

Todo componente Vue passa por uma série de etapas desde o momento em que é criado até ser destruído. Essas etapas são chamadas de Lifecycle Hooks.

🏗️ O Ciclo de Vida

Imagine o componente como um ser vivo: ele nasce (mount), cresce/muda (update) e morre (unmount).

graph TD
    A[Setup] --> B[onMounted]
    B --> C{Dado mudou?}
    C -- Sim --> D[onUpdated]
    D --> C
    C -- Fechou página --> E[onUnmounted]

🎣 Hooks mais comuns

`onMounted`

Chamado quando o componente está pronto na tela. É o lugar perfeito para buscar dados de uma API ou configurar timers.

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log("O componente apareceu na tela! 🚀")
  // Iniciar chamada de API aqui
})
</script>

`onUnmounted`

Chamado logo antes do componente ser removido do DOM. Ótimo para limpar "lixo", como parar intervalos de tempo ou remover event listeners globais.

<script setup>
import { onMounted, onUnmounted } from 'vue'

let intervalId

onMounted(() => {
  intervalId = setInterval(() => console.log("Ping!"), 1000)
})

onUnmounted(() => {
  clearInterval(intervalId) // Limpeza necessária para não travar o navegador
})
</script>

🧠 Por que usar Hooks?

Organização

Os hooks permitem que você execute código em momentos estratégicos, garantindo que sua aplicação seja performática e não tenha vazamentos de memória (memory leaks).

🧱 Organização de Pastas Profissional

À medida que o projeto cresce, a pasta src/ deve ser organizada: * src/components/: Componentes genéricos (Botões, Inputs). * src/views/: Componentes que representam páginas inteiras. * src/services/: Arquivos JavaScript para chamadas de API.

💻 Prática Sugerida

Crie um componente que mostre um relógio digital que atualiza a cada segundo usando setInterval. Lembre-se de usar o onUnmounted para parar o relógio se o usuário sair da página.

📝 Exercício

Em qual hook devemos fazer requisições para o servidor?
O que acontece se não limparmos um setInterval no onUnmounted?
Qual hook é disparado toda vez que um dado reativo exibido na tela é alterado?

🚀 Próxima Aula: Chegou a hora do nosso primeiro Projeto Prático Integrador! Vamos construir um Task Manager do zero.

Aula 08 – Projeto Prático I (Task Manager) 📋

Chegou a hora de consolidar tudo o que aprendemos nos Módulos 1 e 2. Vamos construir uma aplicação de Gerenciamento de Tarefas (Task Manager) aplicando componentização, reatividade, props e emits.

🎯 Escopo do Projeto

Nossa aplicação permitirá: 1. Adicionar novas tarefas. 2. Listar tarefas existentes. 3. Marcar tarefas como concluídas. 4. Remover tarefas. 5. Visualizar o progresso (contador de tarefas).

🏗️ Estrutura de Componentes

Para uma organização profissional, vamos dividir o projeto assim:

App.vue: Gerencia o estado global (a lista de tarefas).
FormTarefa.vue: Componente para entrada de dados.
ListaTarefas.vue: Renderiza a lista de itens.
ItemTarefa.vue: Exibe uma única tarefa com ações de remover/concluir.

graph TD
    App[App.vue - Estado Global]
    App --> Form[FormTarefa.vue - Input]
    App --> Lista[ListaTarefas.vue - Listagem]
    Lista --> Item[ItemTarefa.vue - Detalhe]

💻 Implementação Passo a Passo

# 1. Crie os arquivos vazios na pasta components
$ touch src/components/FormTarefa.vue
$ touch src/components/ItemTarefa.vue

# 2. Foque na lógica do App.vue
# Use ref para a lista de tarefas: const tarefas = ref([])

# 3. Implemente a comunicação
# FormTarefa EMITE 'adicionar' -> App.vue
# App.vue passa PROPS -> ListaTarefas -> ItemTarefa

💡 Dicas de Implementação

ID Único

Ao adicionar uma tarefa, use Date.now() como ID para gerar valores únicos para a :key do v-for.

Persistência Local (Bônus)

Tente usar o localStorage dentro do hook onMounted para carregar as tarefas salvas e um watch para salvar sempre que a lista mudar!

🎨 Desafio Visual

Utilize o que aprendeu sobre CSS Scoped para: * Riscar o texto da tarefa quando estiver concluída (text-decoration: line-through). * Mudar a cor de fundo do botão "Remover" para vermelho.

📝 Checkpoint de Entrega

Ao final desta aula, o aluno deve ter uma pasta src/ organizada, sem erros no console do navegador e com a reatividade funcionando plenamente entre os 4 componentes criados.

🚀 Próxima Aula: Vamos sair da página única e aprender a criar múltiplas rotas com o Vue Router!

Aula 09 – Roteamento com Vue Router 🛣️

Em uma Single Page Application (SPA), não mudamos de arquivo HTML ao navegar. Em vez disso, o JavaScript troca o componente que está sendo exibido na tela. O responsável por isso é o Vue Router.

🏗️ Conceito de Rota

Uma rota mapeia uma URL (ex: /contato) para um componente (ex: ContatoView.vue).

graph LR
    URL["/sobre"] --> Router[Vue Router]
    Router --> Comp[SobreView.vue]
    Comp --> Tela[Interface Atualizada]

⚙️ Configuração Básica

Geralmente configuramos as rotas em um arquivo dedicado: src/router/index.js.

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import SobreView from '../views/SobreView.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: HomeView },
    { path: '/sobre', component: SobreView }
  ]
})

export default router

🧩 Componentes do Router

O Vue Router nos fornece dois componentes essenciais:

<RouterView />: O "buraco" onde o componente da rota ativa será renderizado.
<RouterLink>: O substituto da tag <a> para navegação interna sem recarregar a página.

<!-- App.vue -->
<template>
  <nav>
    <RouterLink to="/">Home</RouterLink> |
    <RouterLink to="/sobre">Sobre</RouterLink>
  </nav>

  <main>
    <RouterView /> <!-- Componente da rota aparece aqui -->
  </main>
</template>

⚡ Navegação Programática

Às vezes, queremos mudar de página via código (ex: após o login).

import { useRouter } from 'vue-router'

const router = useRouter()

function irParaHome() {
  router.push('/')
}

🛡️ Guards de Rota

Podemos impedir que o usuário acesse certas páginas se não estiver logado.

Segurança

router.beforeEach permite verificar permissões antes de carregar a rota. Lembre-se que segurança real deve ser feita no Backend; no Frontend é apenas para UX.

💻 Mão na Massa

Instale o router: npm install vue-router@4.
Crie duas "Views" simples na pasta src/views.
Configure o roteador e use o <RouterView /> no seu App.vue.

📝 Exercício

Qual a diferença entre usar <a> e <RouterLink> em uma SPA?
Para que serve o componente <RouterView />?
Como passamos parâmetros dinâmicos em uma rota (ex: /perfil/123)?

🚀 Próxima Aula: Vamos conectar nosso app ao mundo real consumindo uma API REST!

Aula 10 – Consumo de API REST 🌐

Nenhuma aplicação moderna vive isolada. Precisamos buscar dados de servidores e salvar informações. Para isso, usamos o protocolo HTTP e a biblioteca Axios.

🏗️ O que é uma API REST?

É uma forma padronizada de comunicação entre sistemas. Usamos Verbos HTTP para dizer o que queremos fazer:

GET: Buscar dados.
POST: Criar novos dados.
PUT: Atualizar dados existentes.
DELETE: Remover dados.

🚀 Usando Axios no Vue

O Axios é um cliente HTTP baseado em Promessas que facilita muito as requisições.

# Instale a biblioteca
$ npm install axios

Exemplo de busca de dados no onMounted:

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const usuarios = ref([])

onMounted(async () => {
  try {
    const response = await axios.get('https://api.exemplo.com/users')
    usuarios.value = response.data
  } catch (error) {
    console.error("Erro ao carregar usuários:", error)
  }
})
</script>

📊 Fluxo da Requisição

sequenceDiagram
    participant V as Vue (Client)
    participant A as API (Server)
    V->>A: GET /produtos
    Note right of A: Processa no Banco de Dados
    A-->>V: JSON { id: 1, nome: 'Teclado' }
    Note left of V: Vue atualiza a Ref e a tela muda!

🧱 Organização: O padrão Service

Não é bom espalhar axios.get por todos os componentes. Criamos uma pasta services/ para isolar a lógica de API.

Service Pattern

Crie src/services/api.js para configurar a URL base e reutilizar as funções de chamada.

🧠 Tratamento de Erros e Loading

Experiência do Usuário (UX)

Sempre mostre um "Carregando..." enquanto a API não responde e trate erros com mensagens amigáveis para o usuário caso o servidor caia.

💻 Prática Sugerida

Utilize a JSONPlaceholder (uma API de testes gratuita) para listar posts de um blog falso em seu projeto Vue.

📝 Exercício

Qual a vantagem do Axios sobre o fetch nativo do navegador?
Por que usamos o async/await ao lidar com requisições HTTP?
O que acontece com a interface do Vue quando atribuímos o resultado da API a uma ref?

🚀 Próxima Aula: Como compartilhar dados entre páginas sem ficar passando centenas de props? Conheça o Pinia!

Macro Rendering Error

File: aulas/aula-11.md

UndefinedError: 'carrinho' is undefined

Traceback (most recent call last):
  File "/home/runner/work/ads_spec_frontend_com_vue/ads_spec_frontend_com_vue/.venv/lib/python3.11/site-packages/mkdocs_macros/plugin.py", line 703, in render
    return md_template.render(**page_variables)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/home/runner/work/ads_spec_frontend_com_vue/ads_spec_frontend_com_vue/.venv/lib/python3.11/site-packages/jinja2/environment.py", line 1295, in render
    self.environment.handle_exception()
  File "/home/runner/work/ads_spec_frontend_com_vue/ads_spec_frontend_com_vue/.venv/lib/python3.11/site-packages/jinja2/environment.py", line 942, in handle_exception
    raise rewrite_traceback_stack(source=source)
  File "<template>", line 58, in top-level template code
  File "/home/runner/work/ads_spec_frontend_com_vue/ads_spec_frontend_com_vue/.venv/lib/python3.11/site-packages/jinja2/environment.py", line 490, in getattr
    return getattr(obj, attribute)
           ^^^^^^^^^^^^^^^^^^^^^^^
jinja2.exceptions.UndefinedError: 'carrinho' is undefined

Aula 12 – Projeto Prático II (CRUD Completo) 🚀

Nesta aula prática, vamos aplicar a "Trindade do Vue Moderno": Vue Router + Axios + Pinia. O objetivo é construir um sistema de Gerenciamento de Produtos com persistência em uma API simulada.

🎯 Escopo do Projeto

Vamos desenvolver um CRUD (Create, Read, Update, Delete) que realize: 1. Listagem: Buscar produtos de uma API e exibir em cards (Axios + Pinia). 2. Criação: Formulário para adicionar novos itens (POST). 3. Edição: Alterar dados de um produto existente (PUT). 4. Exclusão: Remover itens da API e da tela (DELETE). 5. Navegação: Páginas separadas para "Home", "Produtos" e "Novo Produto".

🏗️ Arquitetura em Camadas

A organização profissional separa as responsabilidades:

graph TD
    View[Views / Páginas] --> Store[Pinia Stores]
    Store --> Service[Axios Services]
    Service --> API[(API Externa)]

O que cada camada faz?

Service: Apenas faz a requisição axios.get('/produtos').
Store: Chama o service e guarda o resultado na ref([]).
View: Apenas exibe o que está na Store e chama funções de clique.

🖥️ Estrutura de Pastas Recomendada

# Organize seu projeto assim:
src/
  services/
    produtoService.js
  stores/
    produtoStore.js
  views/
    ListagemProdutos.vue
    FormProduto.vue
  router/
    index.js

💡 Dicas de Implementação

API de Teste

Use o JSON Server localmente para ter uma API real rodando em minutos, ou use mocks simples no código se preferir focar apenas no Vue.

Chave Reativa

Ao editar um produto, lembre-se de usar o useRoute().params.id do Vue Router para buscar o ID correto da URL.

📊 Fluxo de Dados do CRUD

sequenceDiagram
    participant U as Usuário
    participant V as View
    participant S as Store
    participant A as API
    U->>V: Clica em 'Excluir'
    V->>S: store.excluir(id)
    S->>A: DELETE /produtos/1
    A-->>S: 200 OK
    S->>S: Remove do array local
    Note right of S: Reatividade atualiza a View automaticamente!

📝 Checkpoint de Entrega

Para concluir esta aula, o aluno deve demonstrar: 1. Navegação fluida entre páginas sem recarregar o browser. 2. Dados sendo buscados de uma fonte externa (real ou mock). 3. Uso do Pinia para gerenciar o array de produtos.

🚀 Próximo Módulo: Vamos profissionalizar ainda mais com Boas Práticas, Estilização e Deploy!

Aula 13 – Boas Práticas e Arquitetura 🏰

Escrever código que funciona é apenas o primeiro passo. Como desenvolvedores profissionais, nosso objetivo é escrever código que seja fácil de ler, testar e manter.

🏛️ Separação de Responsabilidades

Um erro comum é colocar muita lógica dentro do componente (.vue). Siga a regra de ouro: Componentes devem apenas exibir dados e emitir eventos.

Camada	Função	Exemplo
Views	Páginas principais	`HomeView.vue`
Components	Peças reutilizáveis	`BaseButton.vue`
Stores	Estado Compartilhado	`userStore.js`
Services	Comunicação Externa	`authService.js`
Utils	Funções Auxiliares	`formatDate.js`

🧼 Clean Code no Vue

Nomes de Componentes: Use sempre pelo menos duas palavras para evitar conflitos com tags HTML (ex: UserCard em vez de Card).
Props Tipadas: Sempre valide suas props.
Composição over Mixins: No Vue 3, prefira extrair lógica repetida para Composables (useAlgo.js).
Emits Declarados: Use defineEmits para documentar o que o componente faz.

📊 Estrutura de Composable

graph LR
    A[Lógica Repetida] --> B[useCounter.js]
    B --> C[Componente A]
    B --> D[Componente B]
    B --> E[Componente C]

Exemplo de um Composable simples:

// src/composables/useMouse.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse() {
  const x = ref(0)
  const y = ref(0)

  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }

  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

  return { x, y }
}

🧠 Padrão de Nomenclatura

Dica de Ouro

Componentes que são usados apenas uma vez (como Header, Footer) devem ter o prefixo The (ex: TheNavbar.vue). Componentes reutilizáveis devem ter prefixos como Base, App ou V (ex: BaseButton.vue).

📝 Exercício

Qual a vantagem de usar Composables em vez de colocar toda a lógica no componente?
Refatore um componente seu que tenha mais de 100 linhas de lógica para usar um Composable ou um Service.
Por que devemos evitar nomes de uma única palavra para componentes?

🚀 Próxima Aula: Vamos deixar nossa aplicação bonita e responsiva com Scoped CSS e Tailwind!

Aula 14 – Estilização Moderna 🎨

Uma aplicação excelente não apenas funciona bem, mas também é agradável de usar. No Vue.js, temos várias formas de gerenciar estilos de forma organizada.

🔐 Scoped CSS

Como já vimos, o atributo scoped garante que o CSS de um componente não "vaze" para os outros. O Vue faz isso adicionando um atributo único (ex: data-v-123) ao HTML e ao CSS durante o build.

<style scoped>
.titulo { color: blue; } /* Só afeta o .titulo DESTE componente */
</style>

📦 CSS Modules

Uma alternativa ao Scoped CSS, onde as classes se tornam objetos JavaScript.

<template>
  <h1 :class="$style.titulo">Olá Mundo</h1>
</template>

<style module>
.titulo { color: red; }
</style>

🌊 Introdução ao Tailwind CSS

O Tailwind é um framework "utility-first" que permite estilizar sua aplicação sem sair do HTML. Ele é extremamente popular no ecossistema Vue.

Por que usar?

Velocidade: Não precisa inventar nomes de classes.
Consistência: Sistema de design pré-definido.
Responsividade: Prefixos simples como md:, lg:.

Exemplo:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Botão Tailwind
</button>

📱 Responsividade no Vue

graph LR
    A[Layout Único] --> B{Breakpoints}
    B -- "sm (mobile)" --> C[Coluna Única]
    B -- "md (tablet)" --> D[Duas Colunas]
    B -- "lg (desktop)" --> E[Grid Complexo]

🧠 Dicas de UX

Feedback Visual

Sempre adicione estados de :hover, :active e :disabled aos seus botões e links. Isso faz a aplicação parecer "viva".

Transições

O Vue oferece o componente <Transition> para animar a entrada e saída de elementos (ex: ao usar v-if).

💻 Prática Sugerida

Adicione o Tailwind ao seu projeto: npx tailwindcss init -p.
Estilize seu "Task Manager" da Aula 08 usando apenas classes utilitárias do Tailwind.

📝 Exercício

Qual a diferença entre Scoped CSS e CSS Modules?
Como o Tailwind ajuda na manutenção a longo prazo de grandes aplicações?
Crie um componente que mude de cor de fundo dependendo de uma variável reativa isError.

🚀 Próxima Aula: Vamos preparar nosso app para o mundo real com Build e Deploy!

Aula 15 – Build, Deploy e Produção 🚀

Sua aplicação está pronta no seu computador, mas como mostrá-la para o mundo? Nesta aula, aprenderemos o processo de transformar nosso código de desenvolvimento em um pacote otimizado para produção.

🏗️ O Processo de Build

Quando rodamos npm run build, o Vite realiza várias otimizações: 1. Minificação: Remove espaços e encurta nomes de variáveis (diminui o tamanho do arquivo). 2. Tree Shaking: Remove código que não está sendo usado. 3. Chunking: Divide o código em arquivos menores para carregar mais rápido.

# Gere a versão de produção
$ npm run build

# O resultado estará na pasta /dist

🌐 Variáveis de Ambiente (`.env`)

Nunca coloque senhas ou URLs de produção diretamente no código. Use arquivos .env.

# .env.production
VITE_API_URL=https://meu-servidor-real.com/api

No Vue: import.meta.env.VITE_API_URL

🚢 Estratégias de Deploy

Temos várias opções excelentes e gratuitas para hospedar SPAs:

Vercel / Netlify: Conectam ao seu GitHub e fazem deploy automático a cada git push.
GitHub Pages: Ótimo para projetos estáticos e portfólios.
Docker: Para quando você precisa de controle absoluto do servidor.

graph LR
    A[Código no VS Code] --> B[Git Push GitHub]
    B --> C[CI/CD: Build Automático]
    C --> D[Deploy: Vercel/Netlify]
    D --> E[Usuário acessa URL Pública]

🧪 Boas Práticas de Produção

Segurança

Certifique-se de que as ferramentas de desenvolvedor (Vue DevTools) estão desativadas em produção (o Vite faz isso automaticamente no build).

Performance

Use imagens otimizadas e carregamento preguiçoso (Lazy Loading) para rotas que o usuário raramente acessa.

💻 Mão na Massa

Crie uma conta na Vercel ou Netlify.
Conecte seu repositório do GitHub.
Configure o comando de build (npm run build) e a pasta de saída (dist).
Veja seu site ganhar uma URL pública!

📝 Exercício

Para que serve a pasta dist gerada após o build?
Por que devemos usar arquivos .env para URLs de API?
O que é CI/CD e como ele facilita a vida do desenvolvedor?

🚀 Chegou a Hora! Na próxima aula, você apresentará seu Projeto Final: Um sistema Kanban completo!

Aula 16 – Projeto Final e Apresentação 🏆

Parabéns! Você chegou ao final da jornada de Desenvolvimento Frontend com Vue.js. Hoje é o dia de consolidar todo o conhecimento adquirido através do desenvolvimento e apresentação do seu Projeto Final.

🎯 O Desafio: Sistema Kanban (VueFlow)

Você deverá desenvolver um sistema de gerenciamento de tarefas estilo Kanban (colunas: Pendente, Em Andamento, Concluído). O sistema deve permitir que o usuário gerencie suas atividades de forma visual e intuitiva.

Requisitos Obrigatórios:

Componentização: Dividir a interface em colunas e cards reutilizáveis.
Roteamento: Ter pelo menos duas páginas (Dashboard e Configurações/Perfil).
Estado Global (Pinia): Armazenar a lista de tarefas centralizadamente.
Integração (Axios): Simular o consumo de cores ou perfis de uma API.
Estilização: Uso de Tailwind CSS ou Scoped CSS com foco em responsividade.
Interatividade: No mínimo, a funcionalidade de mover tarefas entre colunas e deletá-las.

📊 Arquitetura Esperada

graph TD
    A[App.vue] --> B[Navbar]
    A --> C[RouterView]
    C -- Rota: / --> D[KanbanBoard]
    C -- Rota: /config --> E[ConfigView]
    D --> F[Coluna: ToDo]
    D --> G[Coluna: Doing]
    D --> H[Coluna: Done]
    F --> I[CardTarefa]
    G --> I
    H --> I
    I --> J[Store: TaskStore]

📝 Critérios de Avaliação Técnica

Sua aplicação será avaliada com base nos seguintes pontos: * Organização do Código: Pastas bem estruturadas (views, components, stores, services). * Clean Code: Nomes de variáveis semânticos e funções pequenas. * UX/UI: A interface é amigável? Existem feedbacks visuais de carregamento ou erro? * Versionamento: Histórico de commits no Git (GitHub). * Deploy: Aplicação funcional e acessível via URL pública (Vercel/Netlify).

🧠 Dica para a Apresentação

O Pitch

Ao apresentar, não mostre apenas o código. Mostre o problema que sua aplicação resolve, os desafios técnicos que você enfrentou e como o Vue.js ajudou a superá-los.

🏁 Encerramento

O desenvolvimento frontend é uma área em constante evolução. Dominar o Vue 3 te coloca em uma posição privilegiada no mercado, apto a trabalhar com alta produtividade e qualidade.

Desejamos muito sucesso em sua carreira como desenvolvedor Vue! 🚀✨

Exercícios

Listas de Exercícios 🏋️

Pratique o que aprendeu com desafios graduais para cada aula.

Módulo 1: Fundamentos ---
Módulo 2: Componentização ---
Módulo 3: Ecossistema ---
Módulo 4: Profissional ---

Exercícios: Aula 01 - Introdução ao Frontend Moderno 🏗️

1. Pesquisa: Ecossistema Frontend

Pesquise e descreva com suas palavras qual a diferença entre uma SPA (Single Page Application) e uma MPA (Multi Page Application). Cite um exemplo real de site para cada uma.

2. Por que o Vue?

O Vue.js é conhecido por ser um "Framework Progressivo". O que isso significa na prática para um desenvolvedor que já possui um site em HTML estático e quer começar a usar o Vue?

3. Diferença de Ferramental

Antigamente, usávamos o Vue CLI como ferramenta padrão de criação de projetos. Hoje, a recomendação oficial é o Vite. Liste 3 motivos pelos quais o Vite é considerado superior ao Vue CLI em termos de experiência de desenvolvimento (DX).

4. Renderização CSR vs SSR

Explique o conceito de Client-Side Rendering (CSR). O que acontece no navegador do usuário no momento em que ele acessa um site construído com Vue (sem SSR)?

5. Desafio: Instalação do Ambiente

Instale o Node.js em sua máquina (prefira a versão LTS). No terminal, execute o comando node -v e npm -v e tire um print das versões instaladas. Além disso, instale a extensão Vue - Official (antiga Volar) no seu VS Code.

Exercícios: Aula 02 - Estrutura do Projeto Vue 3 🏗️

1. Anatomia de um SFC

O que é um SFC (Single File Component) no contexto do Vue? Descreva a função de cada uma das 3 tags principais encontradas em um arquivo .vue.

2. Criação de Projeto

Utilizando o terminal, execute o comando para criar um novo projeto Vite: npm create vite@latest meu-primeiro-app-vue. Selecione o framework Vue e a variante JavaScript. Entre na pasta, instale as dependências e inicie o servidor de desenvolvimento.

3. Entendendo o main.js

Abra o arquivo src/main.js. Explique qual a função das seguintes linhas de código:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

4. Pasta Public vs Assets

Qual a diferença entre colocar uma imagem na pasta public/ e na pasta src/assets/? Em qual delas o Vite realiza otimizações durante o processo de build?

5. Desafio: Alterando o Componente Raiz

Abra o arquivo src/App.vue. Limpe o conteúdo original e crie um componente simples que exiba um título <h1> com o seu nome e um parágrafo <p> com a sua frase favorita. Verifique se a mudança foi refletida no navegador instantaneamente.

Exercícios: Aula 03 - Reatividade e Data Binding ⚛️

1. Ref vs Reactive

Explique quando é mais vantajoso usar a função ref() em vez de reactive() para criar variáveis reativas. Cite um exemplo de código para cada uma.

2. Interpolação de Texto

Crie uma variável reativa chamada contador iniciando em 0. Exiba esse valor no HTML dentro de um <h2> utilizando a sintaxe de chaves duplas (Mustache). Adicione um botão que, ao ser clicado, aumente o valor desse contador no script.

3. Atribuição de Atributos (v-bind)

Imagine que você tem uma variável reativa linkImagem contendo a URL de uma foto. Como você faria para aplicar essa URL ao atributo src de uma tag <img> de forma dinâmica? Escreva a sintaxe completa e a sintaxe curta (atalho).

4. Two-Way Data Binding (v-model)

Crie um campo de input de texto e um parágrafo abaixo dele. Use a diretiva v-model para que tudo o que o usuário digitar no input apareça instantaneamente dentro do parágrafo. Qual o nome desse conceito de sincronização bidirecional?

5. Desafio: Profiler Simples

Crie um objeto reativo (usando reactive) chamado usuario com as propriedades nome e idade. Crie dois inputs no HTML (um para nome e outro para idade) ligados a esse objeto via v-model. Exiba uma frase formatada como: "Olá, meu nome é [nome] e tenho [idade] anos".

Exercícios: Aula 04 - Diretivas e Renderização 📜

1. Exibição Condicional

Qual a diferença técnica entre usar v-if e v-show para esconder um elemento na tela? Em qual cenário de performance o v-show é mais recomendado?

2. Renderização de Listas

Crie um array reativo chamado frutas contendo ["Maçã", "Banana", "Uva"]. Use a diretiva v-for para renderizar esses nomes dentro de uma lista não ordenada (<ul> e <li>). Não esqueça de utilizar o atributo :key.

3. Captura de Eventos (v-on)

Crie um botão que dispare um alerta (alert) com a mensagem "Olá Vue!" ao ser clicado. Demonstre o uso da sintaxe completa (v-on:click) e do atalho (@click).

4. Modificadores de Evento

Explique para que serve o modificador .prevent em um evento de submissão de formulário (@submit.prevent). O que acontece se não o utilizarmos em uma SPA?

5. Desafio: Lista de Tarefas Simples (V1)

Crie uma variável reativa novaTarefa (string) e uma lista tarefas (array). - Crie um input ligado à novaTarefa via v-model. - Crie um botão "Adicionar" que pegue o valor de novaTarefa, adicione ao array tarefas e limpe o input. - Renderize a lista na tela usando v-for. - Adicione um v-if para mostrar uma mensagem "Sua lista está vazia" caso não haja tarefas.

Exercícios: Aula 05 - Componentes e Props 🧩

1. Vantagens da Componentização

Explique brevemente por que dividimos uma aplicação em componentes em vez de manter todo o código em um único arquivo gigante. Como isso ajuda no trabalho em equipe?

2. Criando um Componente de Botão

Crie um arquivo chamado BotãoCustomizado.vue na pasta src/components/. - Esse componente deve aceitar uma prop chamada texto (String). - Renderize o texto dentro de uma tag <button>. - No componente App.vue, importe e use esse botão 3 vezes com textos diferentes.

3. Tipagem e Validação de Props

Modifique o defineProps do exercício anterior para que a prop texto seja obrigatória (required) e possua um valor padrão caso não seja enviada. Como o Vue avisa se passarmos um número em vez de uma string para essa prop?

4. Passando Objetos como Prop

Crie um componente CardUsuario.vue que receba um objeto usuario como prop. O objeto deve conter nome, email e cargo. Renderize essas informações de forma organizada (ex: usando <div>, <h3> e <p>).

5. Desafio: Galeria de Produtos

Crie um array de objetos produtos em App.vue. Cada produto deve ter id, nome e preco. - Crie um componente ItemProduto.vue que receba os dados de um produto via prop. - No App.vue, use um v-for para renderizar o componente ItemProduto.vue para cada item do array.

Exercícios: Aula 06 - Eventos e Comunicação 📡

1. Para que serve o Emits?

Explique a diferença entre usar Props e usar Emits. Qual das duas ferramentas é usada para enviar dados do filho para o pai?

2. Disparando um Evento Simples

Crie um componente ContadorFilho.vue com um botão "Incrementar". - Ao clicar no botão, o componente deve emitir um evento chamado aumentar. - No componente Pai (App.vue), escute o evento @aumentar e incremente uma variável reativa local.

3. Enviando Dados (Payload) no Evento

Modifique o exercício anterior para que o filho envie o valor do incremento (ex: 5 ou 10) como argumento do evento. emit('aumentar', 5). Como o pai recebe esse valor na função de tratamento?

4. Comunicação entre Irmãos

Imagine dois componentes filhos (A e B) no mesmo nível dentro de um Pai. O Filho A tem um botão que precisa mudar um texto no Filho B. Descreva os passos necessários para que essa comunicação ocorra seguindo o fluxo padrão do Vue.

5. Desafio: Deletar item da Lista

Utilize a galeria de produtos do exercício da aula anterior. - Adicione um botão "Remover" dentro do componente ItemProduto.vue. - Ao clicar em "Remover", o componente deve emitir um evento remover passando o id do produto. - O componente Pai deve ouvir o evento e remover o produto correspondente do array original.

Exercícios: Aula 07 - Ciclo de Vida e Hooks 🔄

1. O que é o Ciclo de Vida?

Descreva o que acontece em um componente Vue desde o momento em que ele é importado até o momento em que o usuário navega para outra página e ele desaparece da tela.

2. O Hooks onMounted

Qual a utilidade do hook onMounted? Por que não é recomendado fazer chamadas de inicialização de timers ou APIs diretamente no corpo do <script setup> sem o hook?

3. O Hook onUnmounted

Crie um componente que inicie um setInterval no onMounted que imprima uma mensagem no console a cada 1 segundo. Use o hook onUnmounted para limpar esse timer (clearInterval). Por que essa limpeza é fundamental para o navegador?

4. Reatividade vs Lifecycle

Suponha que um dado mude e a tela se atualize. Qual hook do ciclo de vida é disparado APÓS essa atualização visual ocorrer? Cite um exemplo de uso para esse hook.

5. Desafio: Relógio Digital Reativo

Crie um componente de relógio que exiba as horas, minutos e segundos atualizados em tempo real. - Use onMounted para iniciar o relógio. - Use onUnmounted para pará-lo. - Use uma ref para armazenar o horário atual. - Formate a exibição para que sempre tenha dois dígitos (ex: 09:05:01).

Exercícios: Aula 08 - Projeto Prático I: Task Manager (Planejamento) 📝

1. Planejamento de Componentes

Para o nosso Task Manager, quais componentes você acredita serem necessários para manter o projeto organizado? Liste pelo menos 3 e descreva a responsabilidade de cada um.

2. Definição de Dados (State)

Que tipo de informações cada "Tarefa" (Task) deve conter no nosso array de tarefas? Defina um objeto exemplo com as propriedades necessárias (ex: título, status, id).

3. Fluxo de Criação

Descreva o passo a passo lógico (do input do usuário até a atualização da tela) para a funcionalidade de "Adicionar Nova Tarefa". Quais diretivas e eventos serão utilizados?

4. Persistência Local (LocalStorage)

Pesquise como salvar e ler dados do LocalStorage do navegador. Escreva um exemplo de código que salva o array de tarefas e outro que o recupera ao carregar a página.

5. Desafio: Maquete do App

Crie a estrutura visual básica do App em um único arquivo App.vue (sem separar componentes ainda). - Deve ter um título centralizado. - Um input com botão ao lado. - Uma área para listar as tarefas. - Use CSS (pode ser CSS puro ou classes utilitárias) para deixar o layout limpo e agradável. - Implemente apenas a funcionalidade de listar tarefas estáticas por enquanto.

Exercícios: Aula 09 - Roteamento com Vue Router 🛣️

1. SPA vs Roteamento Tradicional

Em uma Single Page Application, o que realmente acontece quando o usuário "muda de página"? Explique o papel do Vue Router nesse processo.

2. Configurando Rotas

Crie um arquivo router/index.js (esquemático) que defina duas rotas: - A rota / que renderiza o componente HomeView.vue. - A rota /sobre que renderiza o componente AboutView.vue. Utilize o createRouter e o createWebHistory.

3. Navegação vs Links

Qual a diferença entre usar <a href="/sobre"> e <router-link to="/sobre"> em uma aplicação Vue? O que acontece com o estado da aplicação no primeiro caso?

4. Parâmetros Dinâmicos

Crie uma rota que receba um ID de produto dinamicamente: /produto/:id. Dentro do componente de destino, como você faria para capturar esse ID e exibi-lo na tela usando a Composition API?

5. Desafio: Barra de Navegação

Crie um componente NavBar.vue que contenha links para "Home", "Produtos" e "Contato". Use classes CSS para destacar o link da página que está ativa no momento (pesquise a classe automática router-link-active).

Exercícios: Aula 10 - Consumo de API REST 🌐

1. Promises e Async/Await

Converta a seguinte estrutura de .then() para uma função usando async/await com bloco try/catch:

axios.get('/api/users').then(res => {
  console.log(res.data)
}).catch(err => {
  console.error(err)
})

2. Configuração do Axios

Instale o Axios no seu projeto (npm install axios). Crie uma instância customizada do Axios em src/services/api.js que já possua uma baseURL definida (ex: https://jsonplaceholder.typicode.com).

3. Exibindo Dados da API

Crie um componente que, ao ser montado (onMounted), dispare uma requisição GET para a rota /posts da API JSONPlaceholder. Armazene o resultado em um array reativo e exiba apenas os títulos dos 10 primeiros posts na tela.

4. Feedback de Carregamento

Adicione uma variável reativa loading (booleana) ao componente anterior. Inicie-a como true, e mude para false após a conclusão da requisição. Use um v-if no HTML para exibir uma mensagem "Carregando..." enquanto os dados não chegam.

5. Desafio: Buscador de Usuário

Crie um input de texto onde o usuário digita um ID. Ao clicar em um botão "Buscar", o app deve fazer um GET para /users/:id. Exiba o nome e o e-mail do usuário encontrado ou uma mensagem "Usuário não encontrado" em caso de erro 404.

Exercícios: Aula 11 - Gerenciamento de Estado (Pinia) 🍍

1. Por que usar Pinia?

Cite uma situação em que o uso do Pinia (Gerenciamento de Estado Global) é preferível em relação ao uso de Props e Events. O que é o problema do "Prop Drilling"?

2. Criando uma Store

Crie uma store chamada useCounterStore usando o estilo Setup Store. - Defina um state (ref) chamado count. - Defina uma action (function) chamada increment. - Defina um getter (computed) chamado doubleCount que retorna o dobro do valor atual.

3. Consumindo a Store

Importe a store criada acima em um componente Vue. Exiba o valor de count e de doubleCount no template. Chame a action increment ao clicar em um botão.

4. Persistência de Estado

Como você faria para que os dados de uma Store do Pinia não fossem perdidos quando o usuário atualiza (F5) a página? Cite uma estratégia ou plugin que ajude nisso.

5. Desafio: Lista de Compras Global

Crie uma useCartStore que gerencie um array de produtos no carrinho. - Crie uma action para adicionar um produto ao array. - Crie um getter que calcule o valor total do carrinho (soma dos preços). - Crie dois componentes diferentes na página: um que adiciona itens e outro que exibe apenas o total acumulado, provando que ambos compartilham o mesmo estado.

Exercícios: Aula 12 - Projeto Prático II: CRUD (Estrutura) 💾

1. Planejando o CRUD

Para um sistema de Gerenciamento de Produtos, quais são os 4 componentes visuais principais que você criaria para representar as ações de Criar, Ler, Atualizar e Deletar?

2. Verbos HTTP vs CRUD

Relacione as ações do CRUD com os verbos HTTP correspondentes: - Criar novo produto -> ? - Listar produtos -> ? - Atualizar produto existente -> ? - Deletar produto -> ?

3. Mockando a API

Utilize o site JSON Server ou uma ferramenta similar para simular uma API REST local. Crie um arquivo db.json com uma lista inicial de produtos contendo id, nome e preco.

4. Tratamento de Erros Profissional

No script de uma action que realiza um axios.post, como você trataria um erro de validação enviado pelo servidor (ex: Status 400)? Como você exibiria esse erro para o usuário final de forma amigável?

5. Desafio: Formulário de Edição

Crie um componente FormularioProduto.vue que sirva tanto para Criar quanto para Editar. - Ele deve receber um objeto produto opcional via prop. - Se a prop estiver presente, preencha os inputs com os dados (Edição). - Se não estiver, os campos devem começar vazios (Criação). - Ao salvar, o componente deve emitir um evento para o pai ou chamar a action da store correspondente.

Exercícios: Aula 13 - Boas Práticas e Arquitetura 🏛️

1. Refatoração de Componentes

Pegue um componente que você criou nos exercícios anteriores que possua mais de 100 linhas. Tente identificar uma parte da interface que se repete ou que possui uma lógica independente e extraia-a para um novo componente menor. Quais os ganhos obtidos?

2. Criando um Composable

Crie um Composable chamado useToggle.js. - Ele deve retornar uma variável reativa isOpen (boolean) e uma função toggle que inverta esse valor. - Importe e use esse composable em dois componentes diferentes para controlar a visibilidade de um modal ou menu.

3. Organização de Pastas

Descreva como você organizaria as pastas de um projeto Vue que possui: - 20 Componentes globais (botão, input, etc). - 5 Páginas principais. - 3 Stores do Pinia. - 10 Ícones SVG. - 1 arquivo de configuração de rotas.

4. Boas Práticas de Props

Por que não devemos alterar o valor de uma Prop diretamente dentro do componente filho? Se precisarmos mudar esse valor, qual técnica (padrão) devemos seguir?

5. Desafio: Documentação de Componente

Escolha o componente mais complexo que você criou neste curso. Escreva um pequeno arquivo README.md (dentro da pasta do componente) explicando quais Props ele recebe, quais Eventos ele emite e qual a sua responsabilidade principal.

Exercícios: Aula 14 - Estilização Moderna 🎨

1. CSS Scoped e Global

Crie um componente que tenha um parágrafo personalizado com uma cor rosa usando <style scoped>. Logo abaixo, crie um parágrafo normal em App.vue. Verifique se o parágrafo do App também ficou rosa. Explique o resultado.

2. Introdução ao Tailwind (Conceitual)

Transforme o seguinte CSS tradicional em classes utilitárias do Tailwind CSS:

.meu-botao {
  background-color: #3b82f6;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  color: white;
  font-weight: bold;
}

3. Classes Dinâmicas

Crie uma lista de alertas. Cada alerta pode ser do tipo "sucesso", "erro" ou "aviso". Use a diretiva :class para mudar a cor de fundo do alerta com base no seu tipo.

4. Variáveis Reativas no CSS

No Vue 3, use o v-bind() dentro da tag <style> para que a largura de uma barra de progresso seja controlada por uma variável reativa do JavaScript. width: v-bind(porcentagem + '%');

5. Desafio: Dark Mode Simples

Crie um botão de "Alternar Tema". - Ao clicar, ele deve adicionar ou remover a classe .dark na tag principal do app ou no body. - Defina variáveis CSS para cor de fundo e cor de texto que mudam quando a classe .dark está ativa. - Use transições CSS para que a mudança de cores seja suave.

Exercícios: Aula 15 - Build, Deploy e Produção 🚢

1. Scripts do NPM

Abra o arquivo package.json. Explique o que cada um dos comandos abaixo faz: - npm run dev - npm run build - npm run preview

2. O Processo de Build

Execute npm run build no seu projeto. Abra a pasta dist/ que foi gerada. O que aconteceu com seus arquivos .vue? Eles ainda existem nesse formato na pasta final?

3. Variáveis de Ambiente

Crie um arquivo .env e defina uma variável VITE_API_URL. Como você acessa esse valor dentro de um componente Vue ou arquivo JS no Vite? Por que não devemos salvar senhas reais nesse arquivo?

4. Preparando para o Deploy

Escolha um serviço de hospedagem gratuito (Vercel ou Netlify). Conecte seu repositório do GitHub e realize o primeiro deploy. Coloque o link do seu site no ar aqui.

5. Desafio: Auditoria com Lighthouse

Abra o seu site publicado no Google Chrome. Vá em "Inspecionar" -> "Lighthouse" e gere um relatório de performance. Identifique um ponto de melhoria sugerido pela ferramenta para o seu projeto Vue.

Exercícios: Aula 16 - Projeto Final: Kanban System 🎓

1. Checklist de Requisitos

Leia os requisitos do Projeto Final na Aula 16. Liste quais as 3 funcionalidades você considera as mais desafiadoras de implementar e por quê.

2. Arquitetura da Store de Tarefas

Desenhe a estrutura da Store do Pinia para o Kanban. Quais propriedades o objeto de tarefa deve ter para que o sistema saiba em qual coluna (To Do, Doing, Done) a tarefa se encontra?

3. Planejamento de Layout

Faça um rascunho (pode ser no papel ou ferramenta de desenho) de como as 3 colunas serão exibidas em telas de computador (desktop) e como elas devem se comportar em telas de celular (mobile). Utilize conceitos de Flexbox ou CSS Grid.

4. Feedback ao Usuário

Como você notificaria o usuário de que uma tarefa foi criada, movida ou excluída com sucesso? (Ex: Toasts, Modais, Alertas). Cite uma biblioteca que ajude com isso.

5. Desafio Final: Estrutura do Repositório

Crie o repositório final do projeto no GitHub. Organize as pastas iniciais, configure o Vue Router e o Pinia. Crie os componentes "casca" para as colunas e para o Header. Realize o primeiro git commit com o título "Initial project structure".

Projetos

Projetos Práticos 🚀

Transforme teoria em prática com desafios progressivos que compõem seu portfólio.

Fase 1: Fundamentos ---
Fase 2: Componentização ---
Fase 3: Ecossistema & Estado ---
Fase 4: Profissional ---

Projeto 01 - Setup e Primeiro Componente 🚀

🎯 Objetivo

Configurar o ambiente de desenvolvimento e criar a estrutura inicial da sua primeira aplicação Vue 3 utilizando o Vite.

🛠️ Requisitos

Instalação: Certifique-se de ter o Node.js instalado.
Bootstrap: Inicie um projeto usando o comando npm create vite@latest.
Configuração:
- Nome do projeto: meu-primeiro-vue
- Framework: Vue
- Variante: JavaScript
Limpeza: Remova os arquivos de exemplo gerados pelo Vite (HelloWorld.vue, estilos padrão em App.vue).

🏗️ Tarefas

No arquivo App.vue, crie uma estrutura básica de HTML usando as tags <template>, <script setup> e <style>.
Exiba uma mensagem de boas-vindas em um <h1>.
Adicione um parágrafo descrevendo qual o seu objetivo com este curso de Vue.js.
Aplique um estilo CSS simples (cor de fundo e fonte) no bloco <style>.

🧪 Verificação

Rode o comando npm run dev e verifique se o seu projeto está rodando em localhost:5173 com as informações que você escreveu.

Projeto 02 - Layout e Estrutura Estática 🏗️

🎯 Objetivo

Organizar a estrutura visual de uma página utilizando as pastas e padrões de um projeto profissional em Vue.

🛠️ Requisitos

Utilizar o projeto criado na aula anterior.
Respeitar a divisão de pastas: src/assets para estilos e src/components para as peças da interface.

🏗️ Tarefas

CSS Global: Crie um arquivo src/assets/main.css com um reset básico (margin: 0, padding: 0) e importe-o no seu main.js.
Header: Crie um componente Header.vue na pasta components que contenha o nome "Meu Portal Vue" e um menu simples (Home, Sobre).
Footer: Crie um componente Footer.vue com os créditos: "Desenvolvido por [Seu Nome] - 2026".
Assemble: Importe e exiba o Header e o Footer dentro do seu App.vue.

🧪 Verificação

O site deve exibir uma barra no topo, um espaço no meio (conteúdo do App) e uma barra no rodapé, sem espaços em branco nas bordas da tela.

Macro Syntax Error

File: projetos/projeto-03.md

Line 8 in Markdown file: Expected an expression, got 'end of print statement'

- Uso de Interpolação `{{ }}` e Bind de atributos `:src`, `:alt`.

Projeto 04 - Lista Dinâmica (Diretivas) 📜

🎯 Objetivo

Dominar o controle de fluxo no template utilizando as diretivas v-if, v-for e @click.

🛠️ Requisitos

Listagem dinâmica de dados.
Modificadores de evento.

🏗️ Tarefas

Lista de Frutas: Crie um array reativo de strings com nomes de frutas.
Renderização: Utilize o v-for para mostrar a lista na tela. Use o index como :key.
Adicionar: Crie um input e um botão para que o usuário possa digitar uma nova fruta e adicioná-la à lista ao clicar ou apertar Enter (@keyup.enter).
Condicional: Se a lista estiver vazia (adicione um botão "Limpar Tudo"), exiba a mensagem: "Nenhuma fruta encontrada. 🧺".

🧪 Verificação

Teste adicionar 3 frutas, verifique se elas aparecem. Limpe a lista e veja se o aviso de lista vazia aparece conforme o esperado.

Projeto 05 - Componentização e Props 🧩

🎯 Objetivo

Quebrar uma interface monolítica em pequenos componentes reutilizáveis, utilizando Props para transferência de dados.

🛠️ Requisitos

Divisão em múltiplos arquivos .vue.
Validação de Props no componente filho.

🏗️ Tarefas

Componente Base: Crie um componente MeuBotao.vue que aceite as props texto (obrigatória) e cor (opcional, com valor padrão).
Componente de Card: Crie um CardProduto.vue que receba um objeto produto (id, nome, preco) e um botão do item 1.
App: No App.vue, renderize uma lista de 3 produtos diferentes utilizando o CardProduto.
Estilização: Utilize o atributo scoped para garantir que o estilo de um card não afete o outro.

🧪 Verificação

Verifique se os cards aparecem de forma independente e se os botões exibem o texto correto enviado pelo componente pai.

Projeto 06 - Eventos e Comunicação 📡

🎯 Objetivo

Estabelecer a comunicação de "baixo para cima" (filho para pai) utilizando defineEmits.

🛠️ Requisitos

Uso de defineEmits no componente filho.
Captura de eventos com @ no componente pai.

🏗️ Tarefas

Filho: Crie um componente TecladoNumerico.vue com botões de 1 a 9.
Ação: Ao clicar em qualquer número, o componente deve disparar um evento clique-numero enviando o valor pressionado como conteúdo (payload).
Pai: No App.vue, receba esses números e vá concatenando-os em uma variável resultado para formar um número de telefone.
Botão Limpar: O pai deve ter um botão para resetar a variável.

🧪 Verificação

Digite uma sequência de números no teclado e verifique se o número completo está sendo montado corretamente na tela do componente pai.

Projeto 07 - Ciclo de Vida e Hooks 🔄

🎯 Objetivo

Utilizar os estágios de vida de um componente para gerenciar recursos do sistema e chamadas externas.

🛠️ Requisitos

Uso de onMounted e onUnmounted.

🏗️ Tarefas

Relógio Reativo: Crie um componente que exiba as horas atuais.
Montagem: No onMounted, inicie um setInterval que atualiza a hora a cada segundo.
Limpeza: No onUnmounted, limpe o intervalo para evitar que ele continue rodando na memória após o componente ser destruído.
Toggle: No App.vue, crie um botão "Mostrar/Esconder Relógio" para testar se a limpeza está funcionando (verifique via logs no console).

🧪 Verificação

Abra o console do navegador. O relógio deve atualizar a cada segundo. Clique em esconder e verifique se as atualizações no console param imediatamente.

Projeto Prático I - Task Manager App 📝

🎯 Objetivo

Construir uma aplicação real de gerenciamento de tarefas, consolidando os conhecimentos de componentes, props, eventos e persistência.

🛠️ Requisitos

Componentização completa (Form, List, Item).
Persistência no localStorage.
Estilização agradável.

🏗️ Tarefas

Estrutura: Crie o componente TaskForm para entrada e TaskItem para exibição.
Lista: O componente Pai (App.vue) deve manter o array de objetos de tarefas.
Funcionalidades:
- Adicionar tarefa.
- Marcar como concluída (visual riscado).
- Deletar tarefa da lista.
Persistência: Ao carregar, verifique o LocalStorage. Ao mudar a lista, salve no LocalStorage.

🧪 Verificação

Feche o navegador e abra novamente. Suas tarefas devem continuar aparecendo na tela exatamente como você as deixou.

Projeto 09 - Roteamento com Vue Router 🛣️

🎯 Objetivo

Transformar sua aplicação em uma SPA (Single Page Application) com múltiplas visualizações e navegação entre elas.

🛠️ Requisitos

Instalação e configuração do vue-router.
Uso de router-link e router-view.

🏗️ Tarefas

Setup: Instale o Vue Router e crie o arquivo src/router/index.js.
Vistas: Crie as pastas src/views e adicione os componentes Home.vue e Sobre.vue.
Navegação: No App.vue, remova o conteúdo central e coloque a tag <router-view />. Crie links de navegação usando <router-link>.
Parâmetros: Crie uma rota /usuario/:id que exiba o ID passado na URL dentro da página.

🧪 Verificação

Clique nos links do menu. A URL deve mudar e o conteúdo no centro da página deve alternar sem que o navegador realize um refresh completo.

Projeto 10 - Consumo de API REST 🌐

🎯 Objetivo

Integrar o frontend com um serviço externo de dados utilizando o Axios.

🛠️ Requisitos

Instalação do axios.
Chamadas assíncronas com async/await.

🏗️ Tarefas

Instalação: Instale o axios e crie uma instância de API apontando para https://jsonplaceholder.typicode.com.
Lista de Usuários: No onMounted de um componente, busque a lista de usuários (/users).
Renderização: Mostre o nome e o e-mail de cada usuário em uma lista.
Loading: Exiba um texto "Carregando..." enquanto os dados não chegam e trate possíveis erros com try/catch.

🧪 Verificação

Ao entrar na página, você deve visualizar a lista real de usuários vinda da API externa.

Projeto 11 - Gerenciamento de Estado (Pinia) 🍍

🎯 Objetivo

Centralizar o estado de informações importantes da aplicação para que elas sejam acessíveis em qualquer tela.

🛠️ Requisitos

Configuração do Pinia.
Criação de uma Store (State, Actions).

🏗️ Tarefas

Setup: Configure o Pinia no main.js.
Store de Perfil: Crie uma store useUserStore que guarde o nome do usuário logado.
Ação: Crie uma função na store para atualizar o nome.
Uso: Exiba o nome do usuário no Header (vindo da store) e crie uma página de "Configurações" onde o usuário possa mudar seu nome.

🧪 Verificação

Mude o nome na página de configurações e verifique se o nome no cabeçalho (Header) atualiza instantaneamente em todas as rotas.

Projeto Prático II - CRUD System 💾

🎯 Objetivo

Desenvolver um sistema completo de Gerenciamento de Produtos, aplicando roteamento, consumo de API e estado global.

🛠️ Requisitos

Rotas para Listagem, Criação e Edição.
Uso de Axios para persistir dados (use o JSON-Server se desejar).
Pinia para gerenciar a lista de produtos em cache.

🏗️ Tarefas

Listagem: Crie uma tela que liste todos os produtos com botões de "Editar" e "Excluir".
Cadastro: Crie um formulário que envie um POST para a API para criar novos produtos.
Edição: Ao clicar em editar, leve o usuário para uma rota /editar/:id, carregue os dados e permita o salvamento via PUT.
Exclusão: Ao clicar em excluir, envie o DELETE e atualize a lista na tela.

🧪 Verificação

Realize o fluxo completo: Crie um produto, edite o nome dele, e por fim, exclua-o da lista. Verifique se todas as requisições na aba "Network" do navegador foram bem-sucedidas.

Projeto 13 - Composables e Clean Code 🏛️

🎯 Objetivo

Melhorar a organização do código extraindo lógicas complexas para funções reusáveis (Composables).

🛠️ Requisitos

Criação de um Composable customizado.
Refatoração de um componente existente.

🏗️ Tarefas

useFetch: Crie um composable chamado useFetch que receba uma URL e retorne { data, error, loading }.
Encapsulamento: Toda a lógica de try/catch e estados de loading devem ficar dentro do composable.
Refatoração: Escolha um componente que faça chamadas de API e substitua o código original pelo uso do seu novo useFetch.
Reuso: Utilize o mesmo composable em um segundo componente para provar que a lógica é genérica.

🧪 Verificação

O componente deve continuar funcionando exatamente como antes, mas o código dentro dele deve estar muito mais limpo e focado apenas na interface.

Projeto 14 - Estilização Moderna (Tailwind) 🎨

🎯 Objetivo

Implementar uma interface profissional e moderna utilizando as classes utilitárias do Tailwind CSS.

🛠️ Requisitos

Configuração do Tailwind CSS no projeto.
Design responsivo.

🏗️ Tarefas

Setup: Instale e configure o Tailwind no seu projeto Vite.
Login Screen: Crie uma tela de Login bonita e centralizada.
Estilos: Use bordas arredondadas, sombras (shadow-md), efeitos de hover nos botões e um fundo suave.
Responsividade: Garanta que o formulário ocupe a largura total no celular e tenha uma largura fixa em telas maiores.

🧪 Verificação

Abra o site e verifique se o layout está alinhado e se os botões e campos possuem o visual "premium" proporcionado pelo Tailwind.

Projeto 15 - Build e Deploy 🚢

🎯 Objetivo

Transformar seu código fonte em um site real e acessível por qualquer pessoa na internet.

🛠️ Requisitos

Processo de build via Vite.
Hosting em plataforma Jamstack.

🏗️ Tarefas

Build: Execute npm run build e explore a pasta dist/.
Environment: Crie um arquivo .env para suas chaves de API.
Deploy: Suba seu projeto para o GitHub e conecte-o ao Netlify ou Vercel.
Auditoria: Rode o Lighthouse do Google Chrome no site já publicado e identifique melhorias de performance.

🧪 Verificação

Envie o link do seu site no ar para um colega ou abra no seu celular para testar o acesso externo.

Projeto Final - Kanban System 🎓

🎯 Objetivo

Construir uma aplicação avançada de produtividade aplicando TODO o conhecimento adquirido no curso.

🛠️ Requisitos

Sistema de colunas (To-Do, Doing, Done).
Drag and Drop para movimentação de tarefas.
Persistência total (Pinia + LocalStorage).
UI profissional com Tailwind.

🏗️ Tarefas

Planejamento: Defina a estrutura da sua store do Pinia para gerenciar as tarefas por status.
Interface: Crie as 3 colunas e o formulário para adicionar novas tarefas.
Movimentação: Implemente a lógica para mudar o status de uma tarefa ao ser movida.
Filtros: Adicione uma busca rápida no topo para filtrar tarefas pelo título.
Finalização: Realize o deploy e documente o projeto em um README caprichado.

🧪 Verificação

Mova uma tarefa da coluna "To-Do" para "Done", atualize a página e verifique se ela permanece na coluna correta.

Quizzes

Quizzes Interativos 🧠

Teste seus conhecimentos rapidamente ao final de cada módulo.

Fase 1 ---
Fase 2 ---
Fase 3 ---
Fase 4 ---

Quiz 01 - Introdução

1. Qual a principal característica de uma arquitetura Monolítica?

É composta por vários serviços independentes

O sistema é um único bloco de código onde tudo está acoplado

É escrita apenas em JavaScript

Não utiliza banco de dados *Explicação: No monólito, todas as funcionalidades residem em um único processo e base de código.*

2. Qual vantagem é mais associada aos Microsserviços?

Simplicidade de deploy inicial

Baixo custo de infraestrutura

Escalabilidade granular e isolamento de falhas

Facilidade em depurar logs centralizados *Explicação: Microsserviços permitem escalar apenas a parte do sistema que precisa de mais fôlego (ex: pagamentos).*

3. O que é "Escalabilidade Horizontal"?

Aumentar a memória RAM de um único servidor

Adicionar mais máquinas ou instâncias para dividir a carga

Trocar o banco de dados SQL por NoSQL

Aumentar o tamanho das tabelas *Explicação: É o ato de adicionar mais "trabalhadores" ao sistema ao invés de aumentar o poder de um só (vertical).*

4. Qual o papel de uma API (Application Programming Interface)?

Criar o design da interface do usuário

Permitir a comunicação e troca de dados entre sistemas

Servir como o sistema operacional do servidor

Substituir o banco de dados *Explicação: APIs são os contratos de comunicação entre o backend e seus clientes ou outros serviços.*

5. Sobre Microsserviços, o que significa ser "Poliglota"?

Falar várias línguas humanas

A liberdade de usar diferentes linguagens/tecnologias para cada serviço

Rodar apenas em servidores internacionais

Usar apenas tradução automática nas rotas *Explicação: Um serviço pode ser em Node.js e outro em Java, dependendo da necessidade técnica.*

6. Qual destas ferramentas é usada para testar requisições para uma API sem precisar de frontend?

Photoshop

Postman / Insomnia

Excel

Docker *Explicação: Clients HTTP como o Postman permitem enviar verbos como GET, POST, etc., e ver a resposta direta.*

7. O que acontece se um módulo de um monólito tiver um "Memory Leak" crítico?

Apenas aquele módulo para de funcionar

O banco de dados se apaga automaticamente

Provavelmente todo o sistema ficará instável ou sairá do ar

O sistema migra sozinho para microsserviços *Explicação: Como tudo roda no mesmo processo, falhas críticas afetam o bloco inteiro.*

8. Qual o formato de dados mais comum usado hoje para comunicação entre serviços?

XML

JSON

CSV

TXT *Explicação: O JSON é leve, legível por humanos e o padrão de facto para APIs REST.*

9. Por que Microsserviços são considerados mais complexos operacionalmente?

Porque exigem mais linhas de código

Devido à necessidade de monitorar muitos serviços, redes e consistência distribuída

Porque só funcionam com Linux

Porque requerem hardware da NASA *Explicação: Manter 50 serviços conversando entre si exige muito mais automação e observabilidade.*

10. Qual ferramenta ajuda a garantir que o ambiente de desenvolvimento seja idêntico ao de produção?

Git

Postman

VS Code

Docker (Containerização) *Explicação: O Docker isola o serviço e suas dependências em um container que roda igual em qualquer lugar.*

Quiz 02 - Introdução

1. O que acontece na comunicação síncrona (Sync)?

O serviço envia a mensagem e esquece

O serviço envia a requisição e aguarda a resposta para continuar

A comunicação só ocorre via rádio

O banco de dados é desligado *Explicação: No modelo síncrono, a execução fica bloqueada até que o destino retorne o dado.*

2. Qual o principal perigo da comunicação síncrona em excesso?

O código fica muito curto

Cascateamento de falhas (um serviço lento trava todos os outros)

Economia exagerada de memória

O sistema fica rápido demais *Explicação: Se um serviço na cadeia falhar ou demorar, todos os serviços "acima" dele também sofrerão.*

3. Qual a função do API Gateway?

Armazenar as senhas dos desenvolvedores

Atuar como ponto único de entrada para roteamento e segurança

Substituir o roteador Wi-Fi da empresa

Processar scripts de interface visual *Explicação: O Gateway centraliza preocupações transversais como autenticação, log e roteamento.*

4. O que é "Rate Limiting"?

Aumentar a velocidade da internet

Limitar a quantidade de requisições que um cliente pode fazer em um tempo

Cobrar por cada clique no botão

Diminuir a fonte do texto *Explicação: Rate limiting protege o sistema contra abusos ou ataques de negação de serviço (DoS).*

5. No Service Discovery, como os serviços são localizados?

Por endereços IP fixos escritos no código

Via um registro dinâmico que mantém os endereços atualizados

Através de busca no Google

Usando GPS *Explicação: Em ambientes elásticos (Docker/K8s), os IPs mudam sempre, exigindo um "Discovery" dinâmico.*

6. Qual o papel do "Load Balancer"?

Medir o peso dos servidores físicos

Distribuir a carga de trabalho entre várias instâncias do mesmo serviço

Equilibrar o gasto de energia

Organizar as pastas do projeto *Explicação: Ele garante que nenhuma instância fique sobrecarregada enquanto outras estão ociosas.*

7. O que caracteriza a comunicação Assíncrona (Async)?

Uso obrigatório de cabos de fibra ótica

O uso de mensageria (filas) onde o chamador não espera a resposta imediata

Comunicação em tempo real por vídeo

Bloqueio total do banco de dados *Explicação: É ideal para processos longos ou para aumentar a resiliência do sistema.*

8. O que é um "Circuit Breaker" (Disjuntor)?

Um fusível físico no servidor

Um padrão que interrompe chamadas para um serviço falho para evitar sobrecarga

Um hacker que invade sistemas

O botão de desligar do computador *Explicação: Ele protege o sistema impedindo que requisições inúteis sejam feitas a um serviço que já se sabe estar fora do ar.*

9. Qual destas é uma responsabilidade típica de um Gateway?

Desenhar o logo da empresa

Compilar código C++

Agregação de respostas e Autenticação

Formatar o HD do servidor *Explicação: O Gateway pode unir dados de 3 serviços diferentes e entregar um único JSON ao frontend.*

10. Qual ferramenta é comumente usada para implementar Service Discovery?

Microsoft Word

Netflix Eureka / Consul

Adobe Photoshop

WhatsApp *Explicação: Eureka e Consul são soluções populares para gerenciar a agenda de serviços em microsserviços.*

Quiz 03 - Introdução

1. O que significa o termo "Stateless" no REST?

O servidor armazena o estado do cliente em variáveis globais

O servidor não guarda informações sobre sessões anteriores; cada requisição é independente

O app não precisa de internet para funcionar

O banco de dados nunca muda *Explicação: Stateless garante que o servidor possa escalar horizontalmente sem se preocupar em sincronizar sessões de usuários entre máquinas.*

2. Qual a regra de ouro para nomear URIs no REST?

Usar verbos de ação (ex: /getUsers)

Usar letras maiúsculas para destacar

Usar substantivos no plural (ex: /usuarios)

Colocar a senha do usuário na URL *Explicação: URIs devem representar recursos (coisas), e não ações. A ação é definida pelo Verbo HTTP.*

3. Qual verbo HTTP deve ser usado para criar um novo recurso?

GET

POST

PUT

DELETE *Explicação: O POST é o método padrão para submeter dados para a criação de novos recursos no servidor.*

4. Qual a diferença fundamental entre PUT e PATCH?

PUT é mais rápido que PATCH

PATCH remove o recurso e PUT cria um novo

PUT substitui o recurso inteiro, enquanto PATCH faz atualizações parciais

Não há diferença, ambos fazem a mesma coisa *Explicação: Use PUT para "trocar" o objeto todo e PATCH para mudar apenas um campo (ex: mudar apenas o preço de um produto).*

5. Qual código de status indica que um recurso foi criado com sucesso?

200 OK

201 Created

204 No Content

404 Not Found *Explicação: O 201 é específico para sinalizar que o POST resultou na criação física de um novo elemento.*

6. O que significa ser um método "Idempotente"?

Que ele gasta muita energia

Que múltiplas requisições idênticas têm o mesmo efeito que uma só

Que ele só funciona com números inteiros

Que ele apaga o banco de dados *Explicação: GET, PUT e DELETE são idempotentes. Se você deletar o mesmo ID 10 vezes, o resultado final (o recurso não existir) é o mesmo.*

7. Por que o JSON é preferido em relação ao XML em APIs modernas?

Porque ele é colorido

Porque é mais leve, menos verboso e mais fácil de ler/processar em JS

Porque o XML foi proibido pelo Google

Porque JSON aceita emojis e XML não *Explicação: O JSON tem uma sintaxe muito mais limpa e mapeia quase diretamente para objetos em linguagens modernas.*

8. O que o status code 403 Forbidden indica?

Que a página não existe

Que o usuário não está logado

Que o usuário está logado, mas não tem permissão para aquele recurso

Que o servidor explodiu *Explicação: Diferente do 401 (sem login), o 403 diz que você é conhecido, mas "não tem entrada permitida aqui".*

9. Em REST, o que compõe uma Interface Uniforme?

Usar a mesma cor em todos os botões

Uso de URIs para recursos, métodos HTTP padrão e representações de dados (JSON/XML)

Ter apenas um arquivo de código para tudo

Usar apenas um tipo de fonte de texto *Explicação: É o conjunto de regras que torna a API previsível e fácil de aprender por outros desenvolvedores.*

10. Qual a função do cabeçalho "Content-Type" em uma requisição?

Dizer o nome do autor da API

Informar ao servidor qual o formato dos dados que estão sendo enviados (ex: application/json)

Aumentar a segurança da senha

Definir a cor de fundo do site *Explicação: Sem o Content-Type, o servidor pode não saber como interpretar o corpo (body) da mensagem recebida.*

Quiz 04 - Introdução

1. O que é o OpenAPI (OAS)?

Uma linguagem de programação para backend

Uma especificação padrão para descrever e documentar APIs RESTful

Um navegador web para desenvolvedores

Um banco de dados em nuvem *Explicação: O OpenAPI define um formato padrão para descrever recursos, rotas e respostas de uma API.*

2. Qual a principal diferença entre OpenAPI e Swagger?

Swagger é pago e OpenAPI é gratuito

OpenAPI é a especificação e Swagger é o conjunto de ferramentas (UI, Editor, etc)

OpenAPI foi substituída pelo Swagger em 2021

Não há diferença, são nomes para a mesma cor *Explicação: Pense no OpenAPI como as "regras" e no Swagger como as "ferramentas" que usam essas regras.*

3. Para que serve o Swagger UI?

Para editar o banco de dados diretamente

Para gerar uma página visual e interativa onde se pode testar os endpoints documentados

Para compilar o código Java para o servidor

Para baixar músicas gratuitas *Explicação: O Swagger UI lê o arquivo YAML/JSON e cria uma interface amigável para humanos.*

4. Qual o objetivo principal de um "Mock de API"?

Substituir o backup do sistema

Simular o comportamento de uma API real para permitir o desenvolvimento paralelo

Aumentar a segurança contra vírus

Esconder o endereço IP do servidor *Explicação: Mocks permitem que o Frontend programe contra um servidor "de mentira" enquanto o real não está pronto.*

5. O que significa "Developer Experience" (DX)?

O tempo que o desenvolvedor gasta jogando videogame

A facilidade e satisfação de um desenvolvedor ao usar sua ferramenta ou API

A quantidade de memória RAM do monitor

O nome do sistema operacional dos servidores *Explicação: Uma boa DX significa documentação clara, erros úteis e facilidade de integração.*

6. Qual formato de arquivo é mais utilizado para escrever especificações OpenAPI?

.html

.yaml ou .json

.docx

.pdf *Explicação: YAML é preferido por ser mais legível por humanos e suportar identação clara.*

7. Por que retornar mensagens de erro explicativas no corpo da resposta (Body) é uma boa prática?

Para o log ficar mais colorido

Para ajudar o consumidor da API a entender exatamente o que errou sem precisar perguntar ao autor

Porque o HTTP obriga a escrever textos longos

Para ocupar mais espaço no servidor *Explicação: Um erro `400` com a mensagem `"Data de nascimento é obrigatória"` economiza horas de suporte.*

8. Qual componente do Swagger permite digitar e validar a especificação da API em tempo real?

Swagger Hub

Swagger Editor

Swagger Inspector

Swagger Play *Explicação: O Editor valida a sintaxe YAML e mostra o preview da documentação instantaneamente.*

9. Em qual fase do projeto o "Design de Contrato" deve ocorrer?

Somente no fim do projeto para arquivar

No início, antes mesmo de começar a codificar as rotas (API First)

Apenas se o cliente pedir

Nunca, é perda de tempo *Explicação: No API First, o contrato é acordado primeiro para que as equipes de Front e Back trabalhem em sintaxe.*

10. Qual ferramenta pode ser usada para subir um mock server local a partir de uma collection?

Microsoft Excel

Postman / Mockoon

Notepad++

Windows Paint *Explicação: Postman e Mockoon facilitam a criação de respostas estáticas baseadas em rotas.*

Quiz 05 - Introdução

1. Qual a principal responsabilidade da camada de Controller?

Salvar dados no banco de dados

Gerenciar a requisição HTTP e retornar a resposta adequada

Fazer cálculos complexos de impostos

Criar a interface gráfica do usuário *Explicação: O Controller age como um intermediário entre o mundo externo (HTTP) e a lógica interna do sistema.*

2. O que é um "Handler" em um sistema de rotas?

Um tipo de vírus de computador

A função específica que é executada quando uma rota é chamada

O nome do servidor de hospedagem

O arquivo onde guardamos as senhas *Explicação: Cada rota (Verbo + Path) é mapeada para um Handler que processa aquela ação específica.*

3. Qual a melhor forma de capturar o ID de um usuário para uma busca individual (ex: /usuarios/10)?

Query Param (?id=10)

Path Param (/usuarios/:id)

Request Body ({ "id": 10 })

Através de um cookie *Explicação: Path Params são ideais para identificar recursos de forma única e hierárquica na URI.*

4. Quando devemos usar "Query Params"?

Para enviar a senha do usuário

Para filtros, ordenação e paginação (ex: ?cor=azul)

Para atualizar o nome de um produto

Para deletar o banco de dados *Explicação: Query Params são usados para modificar ou filtrar a representação dos dados retornados.*

5. Em qual objeto da requisição costuma vir o JSON enviado via POST?

req.params

req.query

req.body

req.headers *Explicação: O Body é a parte da mensagem HTTP reservada para o transporte de dados complexos e volumosos.*

6. Qual analogia melhor define o papel do Controller?

O cozinheiro que prepara o prato

O garçom que anota o pedido e entrega o prato

O dono do restaurante que cuida do banco de dados

O cliente que come a comida *Explicação: O Controller apenas coordena a entrada e a saída, delegando a "preparação" para outras camadas.*

7. Por que a Injeção de Dependência é útil nos Controllers?

Para o código ficar mais pesado e seguro

Para facilitar a troca de comportamentos e a criação de testes automatizados

Para economizar espaço no HD

Porque o Google obriga *Explicação: Receber dependências prontas torna o Controller menos acoplado e mais fácil de manter.*

8. O que acontece se o Controller não retornar um Status Code?

O servidor explode

O cliente pode receber um status padrão (ex: 200) que não condiz com o resultado real

O computador trava

A internet cai *Explicação: É vital ser explícito sobre o que aconteceu (201 para sucesso, 400 para erro, etc).*

9. Onde configuramos o mapeamento de Verbo + Path no backend?

No banco de dados

No arquivo de roteamento (Router)

No arquivo de interface (CSS)

Dentro do arquivo de imagem .png *Explicação: O roteador é quem diz: "Se chegar esse verbo nesse caminho, chame essa função".*

10. Qual a vantagem de padronizar as respostas de erro em JSON?

Para o erro ficar mais bonito

Para que o frontend consiga ler a mensagem e exibir um alerta amigável ao usuário

Para economizar bateria do servidor

Para esconder o código do erro *Explicação: Um JSON de erro estruturado permite que o app reaja de forma inteligente a falhas.*

Quiz 06 - Introdução

1. O que acontece se colocarmos toda a lógica de negócio dentro do Controller?

O app fica mais rápido

O código fica difícil de testar, manter e reutilizar (o famoso "Controller Gordo")

O banco de dados se apaga sozinho

O roteamento para de funcionar *Explicação: Acoplar lógica de negócio ao transporte HTTP cria dívida técnica e dificulta a evolução do sistema.*

2. Qual a principal responsabilidade do Service?

Definir as rotas do app

Executar as regras de negócio, validações e cálculos

Gerar as respostas JSON para o cliente

Configurar a porta do servidor *Explicação: O Service é onde o conhecimento do domínio da aplicação (as regras do "negócio") reside.*

3. Como um Service deve notificar o Controller sobre uma falha de validação?

Retornando um número 400

Lançando uma exceção ou erro (throw Error)

Enviando um e-mail para o administrador

Mudando a cor do console *Explicação: O lançamento de erros permite que o Controller capture o fluxo e decida qual resposta HTTP enviar.*

4. Por que o Service não deve acessar os objetos `req` ou `res`?

Porque eles são secretos

Para manter o Service independente do protocolo de transporte (podendo ser usado em gRPC, CLI, etc)

Porque isso gasta muita internet

Para economizar linhas de código *Explicação: A camada de serviço deve ser "cega" para o transporte, focando apenas nos dados e regras.*

5. O que define uma "Regra de Negócio"?

O nome das variáveis do sistema

As diretrizes que ditam como o serviço deve operar (ex: "só maiores de 18 podem comprar")

O tipo de servidor onde o app está rodando

A cor do logotipo da empresa *Explicação: Regras de negócio são as "leis" do funcionamento daquela aplicação específica.*

6. Qual a vantagem de reutilizar um Service em diferentes Controllers?

Nenhuma, é melhor copiar o código

Consistência: a regra é aplicada da mesma forma em todo o sistema

Economiza espaço de memória no disco

Deixa o site mais colorido *Explicação: Centralizar a regra no Service garante que, se a lei mudar, você só precisa alterar em um lugar.*

7. O que é um DTO (Data Transfer Object)?

Um tipo de cabo para conectar servidores

Um objeto simples usado para transportar dados entre camadas sem expor a lógica interna

O nome do motor de busca do Google

Um comando do terminal Linux *Explicação: DTOs ajudam a filtrar campos sensíveis (como senhas) antes de enviá-los ao mundo externo.*

8. O que significa "Separation of Concerns" (Separação de Preocupações)?

Cada desenvolvedor deve trabalhar sozinho

Cada camada do sistema deve ter uma responsabilidade única e bem definida

O banco de dados deve ficar em outro país

O site deve ter várias cores diferentes *Explicação: Dividir o sistema em Controller, Service e Repository é aplicar esse princípio fundamental.*

9. Qual o momento ideal para chamar o Service dentro de uma rota?

Antes de receber a requisição

Após o Controller validar os parâmetros básicos de entrada

Depois que a resposta já foi enviada ao cliente

Nunca, o Controller deve fazer tudo *Explicação: O Controller "limpa" a entrada e passa os dados "puros" para o Service processar.*

10. Como o Controller deve tratar o retorno de um Service?

Ignorando o resultado

Capturando o dado retornado e devolvendo em um JSON com Status 200/201

Pedindo para o usuário reiniciar o computador

Exibindo o código fonte na tela *Explicação: O Controller é o tradutor final que comunica o sucesso ou erro do Service para o cliente HTTP.*

Quiz 07 - Introdução

1. Qual a função do PostgreSQL em uma arquitetura backend?

Criar a interface visual

Armazenar dados de forma persistente e relacional

Enviar e-mails automaticamente

Compilar o código Javascript *Explicação: O PostgreSQL é um Sistema de Gerenciamento de Banco de Dados (SGBD) que garante que os dados não se percam.*

2. O que significa a sigla CRUD?

Create, Remove, Update, Delete

Create, Read, Update, Delete

Clear, Read, Unit, Deploy

Code, Run, Update, Debug *Explicação: CRUD representa as quatro operações básicas de manipulação de dados em qualquer sistema.*

3. Qual o comando SQL usado para buscar dados em uma tabela?

INSERT

UPDATE

SELECT

DELETE *Explicação: O SELECT é o comando fundamental para realizar consultas no banco de dados.*

4. Para que serve o padrão Repository?

Para salvar arquivos PDF no servidor

Para isolar a lógica de acesso ao banco da lógica de negócio

Para criar rotas no Express

Para acelerar o download do app *Explicação: O Repository centraliza as chamadas ao banco, facilitando a troca de tecnologia sem afetar o resto do sistema.*

5. O que é uma Primary Key (Chave Primária)?

A senha master do servidor

Um identificador único para cada registro (linha) em uma tabela

O nome da tabela principal

O primeiro campo de um formulário HTML *Explicação: A PK garante que não existam dois registros idênticos e facilita a busca rápida.*

6. Quando usamos uma Foreign Key (Chave Estrangeira)?

Para traduzir o banco de dados

Para criar um link (relacionamento) entre duas tabelas diferentes

Para encriptar os dados

Para mudar o nome das colunas *Explicação: A FK é o que permite conectar, por exemplo, um Pedido ao Usuário que o realizou.*

7. O que acontece se rodarmos um `DELETE FROM usuarios` sem a cláusula `WHERE`?

O banco pede confirmação

Todos os registros da tabela "usuarios" serão apagados!

Apenas o primeiro registro é apagado

O comando dá erro de sintaxe *Explicação: Sem o WHERE, o comando afeta todas as linhas da tabela. Muito cuidado!*

8. O que são "Migrations"?

Pessoas que mudam de país

Arquivos que versionam a estrutura do banco de dados (schema)

A troca de servidor de hospedagem

Um tipo de loop em Javascript *Explicação: Migrations garantem que todos os desenvolvedores tenham a mesma versão da estrutura do banco.*

9. Qual o tipo de relacionamento quando um Autor pode escrever vários livros?

1:1 (Um para um)

1:N (Um para muitos)

N:N (Muitos para muitos)

N:1 (Muitos para um) *Explicação: Um único recurso pai (Autor) está ligado a múltiplos recursos filhos (Livros).*

10. Por que o Service deve chamar o Repository em vez de rodar SQL direto?

Para o código ficar mais longo

Para seguir o princípio de responsabilidade única e facilitar testes

Porque SQL é uma linguagem antiga

Porque o computador processa Services mais rápido *Explicação: Separar as camadas torna o sistema modular: o Service dita O QUE fazer, o Repository sabe COMO buscar.*

Quiz 08 - Introdução

1. Por que o backend nunca deve confiar nos dados vindos do frontend?

Para economizar bateria do servidor

Porque a requisição pode ter sido interceptada, alterada ou burlada

Porque o frontend é sempre feito por iniciantes

Porque os navegadores são lentos *Explicação: Segurança baseada em "confiança" no cliente é uma vulnerabilidade grave.*

2. Qual a diferença entre Validar e Sanitizar?

Validar limpa o dado, Sanitizar checa a regra

Validar checa se o dado está correto, Sanitizar "limpa" o dado de impurezas (espaços, tags HTML)

São a mesma coisa com nomes diferentes

Validar é para banco SQL, Sanitizar é para NoSQL *Explicação: Validar diz "SIM ou NÃO", Sanitizar diz "AGORA ESTÁ LIMPO".*

3. Para que servem bibliotecas como Zod ou Joi?

Para acelerar a conexão com o banco

Para definir e aplicar esquemas de validação de forma declarativa e robusta

Para desenhar gráficos no painel do administrador

Para comprimir arquivos PDF *Explicação: Essas bibliotecas removem o excesso de "if/else" e centralizam as regras de entrada.*

4. O que é o princípio DRY (Don't Repeat Yourself)?

Beber água durante o código

Evitar a duplicação de lógica, transformando repetir em funções ou serviços únicos

Escrever o código o mais rápido possível

Não usar a tecla Backspace *Explicação: Código repetido é difícil de manter; se a regra muda, você esquece de atualizar em algum lugar.*

5. O que um Middleware de Erro Global faz?

Impede que o computador trave

Captura qualquer erro não tratado e envia uma resposta padronizada ao cliente

Apaga os logs do servidor

Avisa o usuário que a internet caiu *Explicação: Centralizar o erro evita que o servidor "morra" e permite um tratamento profissional de falhas.*

6. Por que NÃO devemos enviar o Stack Trace (detalhes técnicos do erro) para o usuário final?

Porque gasta muitos dados de internet

Por segurança, pois revela detalhes da estrutura do banco e do código (ajuda hackers)

Porque o usuário não entende inglês

Porque o Stack Trace é feio *Explicação: Informações técnicas sobre o erro devem ser logadas internamente, nunca expostas publicamente.*

7. Qual a vantagem de usar nomes de funções altamente descritivos?

O código fica mais colorido no editor

Melhora a legibilidade e facilita a manutenção por outros desenvolvedores (ou por você no futuro)

O compilador processa nomes longos mais rápido

Ocupa menos espaço no servidor *Explicação: Código deve ser lido como um livro; o nome da função deve dizer exatamente O QUE ela faz.*

8. O que caracteriza um Erro 400 (Bad Request)?

O servidor parou de funcionar

O cliente enviou dados inválidos ou incompletos que o sistema não aceita

O usuário não tem permissão para acessar

A página não existe *Explicação: Erros 400 indicam que a culpa é do "lado de lá" (cliente/requisição).*

9. O que caracteriza um Erro 500 (Internal Server Error)?

O usuário digitou a senha errada

Ocorreu uma falha inesperada na lógica ou infraestrutura do servidor

O link está quebrado

A conta do usuário foi deletada *Explicação: Erros 500 indicam que algo "quebrou" no backend e precisa de reparo.*

10. Como o Clean Code ajuda na escalabilidade de um projeto?

Comprimindo o banco de dados

Mantendo o código organizado e modular, facilitando a adição de novas funcionalidades

Diminuindo o preço da hospedagem

Aumentando o número de acessos simultâneos *Explicação: Um código limpo é como um quebra-cabeça bem encaixado; é fácil adicionar peças novas.*

Quiz 09 - Introdução

1. Qual a diferença entre Autenticação e Autorização?

Autenticação é sobre permissões, Autorização é sobre identidade

Autenticação checa quem você é, Autorização checa o que você pode fazer

Autenticação é para o backend, Autorização é para o frontend

É a mesma coisa, apenas nomes diferentes *Explicação: Primeiro você prova quem é (Login), depois o sistema checa se você tem acesso (Roles).*

2. O que significa a sigla JWT?

Java Web Tool

JSON Web Token

Javascript Web Transfer

Just Web Ticket *Explicação: É um padrão de mercado para transmissão segura de informações como objetos JSON.*

3. Quantas partes compõem um token JWT?

Uma parte única

Duas partes (Dados e Assinatura)

Três partes (Header, Payload e Signature)

Quatro partes (Header, Payload, Signature e Expire) *Explicação: As três partes são unidas por pontos para formar o token completo.*

4. O que é o "Payload" do JWT?

O algoritmo de criptografia

A senha do banco de dados

O corpo do token, onde ficam os dados do usuário (ex: id, nome)

A chave secreta do servidor *Explicação: É aqui que guardamos as "alegações" (claims) sobre o usuário logado.*

5. Por que a "Assinatura" (Signature) é a parte mais importante para a segurança?

Porque ela deixa o token colorido

Porque ela garante que o Payload não foi alterado por terceiros

Porque ela esconde o nome do usuário

Porque ela faz o token expirar mais rápido *Explicação: Se alguém mudar um único caractere no Payload, a assinatura deixará de ser válida.*

6. O que significa dizer que o JWT é "Stateless" (Sem Estado)?

Que o servidor não tem banco de dados

Que o servidor não precisa guardar informações da sessão do usuário na memória

Que o token nunca expira

Que o usuário não precisa de internet *Explicação: Toda a informação necessária para validar o usuário está dentro do próprio token.*

7. Onde o Payload do JWT pode ser lido?

Apenas pelo servidor que tem a chave secreta

Por qualquer pessoa, pois ele é apenas codificado (Base64), não encriptado

Apenas por usuários com permissão de Admin

Em lugar nenhum, ele é invisível *Explicação: CUIDADO! Nunca guarde senhas ou dados sensíveis no Payload, pois qualquer um pode ler.*

8. Qual o objetivo do campo "expiresIn" (ou 'exp')?

Mudar o nome do usuário

Definir um tempo de validade para o token, após o qual ele será rejeitado

Apagar o banco de dados

Aumentar a velocidade da API *Explicação: Tokens não devem ser eternos; limitando a duração, reduzimos riscos de roubo de sessão.*

9. Onde o frontend geralmente envia o JWT para o servidor?

No corpo da mensagem (Body)

No cabeçalho (Header) de autorização: `Authorization: Bearer `

No nome do arquivo

Por e-mail *Explicação: O padrão Bearer Token nos headers HTTP é a forma mais comum de enviar o JWT.*

10. O que acontece se o servidor perder a "Chave Secreta"?

Os usuários ganham acesso livre

Todos os tokens emitidos anteriormente se tornam inválidos instantaneamente

O banco de dados é deletado

Nada, a chave secreta não é importante *Explicação: Sem a chave, o servidor não consegue mais verificar se as assinaturas dos tokens são legítimas.*

Quiz 10 - Introdução

1. O que significa a sigla RBAC?

Real-Binary-Authentication-Code

Role-Based Access Control

Route-Based Authorization Check

Restricted-Backend-Access-Control *Explicação: É o padrão de mercado para gerenciar permissões baseadas em "perfis" ou "papéis" do usuário.*

2. No RBAC, a quem atribuímos as permissões de acesso?

A cada usuário individualmente por seu CPF

A um perfil (Role) que pode ser compartilhado por vários usuários

Apenas ao dono da empresa

Ao endereço IP do computador *Explicação: Atribuir a perfis facilita a manutenção, especialmente em sistemas com muitos usuários.*

3. Qual o código HTTP para "Acesso Negado" (Usuário identificado, mas sem permissão)?

401 Unauthorized

404 Not Found

403 Forbidden

500 Internal Error *Explicação: O 403 indica que o servidor entendeu quem é você, mas proibiu a ação.*

4. Qual a ordem correta dos middlewares em uma rota protegida?

Primeiro Autorização, depois Autenticação

Primeiro Autenticação, depois Autorização

Ambos devem rodar ao mesmo tempo

Apenas um é necessário *Explicação: Primeiro desvendamos QUEM é o usuário (Token), para depois checar O QUE ele pode fazer.*

5. O que um Middleware de Autorização faz se o usuário não tem o nível necessário?

Reinicia o servidor

Interrompe a requisição e retorna um erro 403 ao cliente

Envia a requisição para outra rota aleatória

Formata o banco de dados *Explicação: O middleware age como uma trava que impede a execução do código do Controller.*

6. Por que o Erro 401 (Unauthorized) é retornado quando o token JWT é inválido?

Porque o usuário é feio

Porque a identidade do usuário não pôde ser confirmada

Porque o servidor está desligado

Porque o sistema está em manutenção *Explicação: 401 significa "Quem é você? Não te conheço ou seu crachá é falso".*

7. Em um sistema de E-commerce, quem deve ter permissão para a rota `DELETE /produtos/:id`?

Todos os clientes

Apenas usuários com a Role 'ADMIN' ou 'GERENTE'

Qualquer pessoa sem login

Apenas o programador que criou o site *Explicação: Ações destrutivas devem ser restritas a perfis de alta confiança.*

8. O que é "Hierarquia de Roles"?

Uma lista de nomes em ordem alfabética

Quando perfis superiores (ex: Admin) herdam automaticamente as permissões de perfis inferiores

O tamanho da letra no banco de dados

A ordem de criação dos usuários *Explicação: Facilita o código, evitando ter que listar 'ADMIN' em todas as rotas simples.*

9. O que acontece se chamarmos a função `next()` dentro de um middleware?

O servidor para

O processamento passa para o próximo middleware ou para o Controller

O usuário é deslogado

Uma nova aba abre no navegador *Explicação: O `next()` é o sinal verde para a requisição seguir seu fluxo.*

10. Qual a principal vantagem de centralizar a autorização em middlewares?

O app fica mais bonito

Segurança e Reuso: você protege rotas inteiras com uma única linha de código

O banco de dados fica mais rápido

Os usuários ganham descontos *Explicação: Centralizar evita que você esqueça de colocar "if" em algum Controller, deixando brechas de segurança.*

Quiz 11 - Introdução

1. Por que não é recomendado que o Access Token dure muitos dias?

Porque ele ocupa muito espaço no servidor

Por segurança: se for roubado, o hacker terá acesso por pouco tempo

Porque o navegador apaga tokens longos automaticamente

Porque o Google não permite *Explicação: Tokens curtos minimizam o estrago em caso de vazamento de credenciais.*

2. Para que serve o Refresh Token?

Para mudar a senha do usuário

Para pedir um novo Access Token sem que o usuário tenha que digitar a senha novamente

Para aumentar a velocidade da internet

Para carregar imagens mais rápido *Explicação: Ele garante uma boa experiência de uso (UX) sem sacrificar a segurança.*

3. O que significa a sigla CORS?

Central-Order-Resource-System

Cross-Origin Resource Sharing

Code-Origin-Restriction-Safe

Chrome-Only-Response-System *Explicação: É o mecanismo que define quais sites externos podem acessar sua API.*

4. Quem aplica o bloqueio de CORS?

O Provedor de Internet

O Microprocessador do celular

O Navegador (Chrome, Firefox, Safari)

O Teclado do usuário *Explicação: O navegador bloqueia a leitura da resposta se o servidor não enviar os headers de permissão corretos.*

5. Qual a função da biblioteca Helmet?

Proteger o servidor contra quedas físicas

Configurar automaticamente diversos headers de segurança no HTTP

Aumentar o brilho da tela

Traduzir o app para inglês *Explicação: O Helmet ajuda a esconder detalhes do servidor e prevenir ataques como XSS.*

6. O que é "Rate Limiting"?

O limite de velocidade do Wi-Fi

Uma técnica para limitar o número de requisições que um usuário/IP pode fazer em um tempo

Quando o app fica lento de propósito

O limite de amigos que alguém pode ter *Explicação: É essencial para evitar ataques de força bruta (Brute Force) e ataques de negação de serviço (DoS).*

7. Por que devemos evitar `origin: '*'` no CORS em produção?

Porque o servidor fica pesado

Porque qualquer site malicioso do mundo poderia tentar roubar dados da sua API

Porque o Google penaliza sites assim

Porque os usuários não gostam *Explicação: O ideal é listar apenas os domínios oficiais que você confia.*

8. O que é o ataque XSS (Cross-Site Scripting)?

Quando o banco de dados é deletado

Quando um invasor consegue injetar scripts maliciosos em páginas vistas por outros usuários

Quando o cabo USB desconecta

Quando a senha é muito curta *Explicação: O invasor pode usar isso para roubar tokens ou cookies de outros usuários.*

9. Qual desses é o lugar mais seguro para guardar o Refresh Token no navegador?

localStorage

sessionStorage

Cookie com a flag HttpOnly

No histórico de navegação *Explicação: Cookies HttpOnly não podem ser lidos via Javascript, o que protege contra ataques XSS.*

10. O que acontece em um "Refresh Token Rotation"?

O token muda de cor

Sempre que um novo Access Token é pedido, o Refresh Token antigo é invalidado e um novo é gerado

O usuário é obrigado a trocar a senha

O servidor reinicia *Explicação: É uma camada extra de segurança para detectar se um Refresh Token foi roubado.*

Quiz 12 - Introdução

1. O que é o React?

Uma linguagem de programação nova

Uma biblioteca Javascript para criar interfaces de usuário (UIs)

Um banco de dados que roda no navegador

Uma ferramenta para editar imagens *Explicação: O React ajuda a criar sites dinâmicos e rápidos através de componentes.*

2. O que caracteriza uma Single Page Application (SPA)?

O site tem apenas uma página de texto simples

O site carrega apenas uma vez e troca o conteúdo dinamicamente sem recarregar a página inteira

É um app que só funciona em celulares antigos

É um site que não usa CSS *Explicação: SPAs dão uma experiência fluida de "navegação instantânea" ao usuário.*

3. No React, o que é um "Componente"?

Uma peça física do computador

Uma função Javascript que retorna uma parte da interface (Botão, Menu, Card)

Um erro que acontece no código

A cor de fundo do site *Explicação: Pensar em componentes é como pensar em peças de LEGO que se encaixam.*

4. Qual a função do Vite no desenvolvimento moderno?

Traduzir o site para chinês

Rodar um servidor de desenvolvimento ultra rápido e preparar o projeto para publicação

Criar logotipos automaticamente

Gerenciar a folha de pagamento da empresa *Explicação: O Vite substituiu ferramentas mais lentas, tornando o dia a dia do dev muito melhor.*

5. O que significa JSX?

Java Syntax eXtension

JavaScript XML: uma extensão de sintaxe que permite escrever algo parecido com HTML dentro do JS

Uma nova marca de TV

JavaScript Xtreme *Explicação: O JSX torna a criação de interfaces muito mais visual e fácil de ler.*

6. Qual a regra fundamental ao retornar conteúdo de um componente React?

Deve ter no máximo 10 linhas

Deve retornar apenas um único elemento pai (ou usar um Fragment)

Deve estar todo escrito em letras maiúsculas

Não pode conter números *Explicação: O React precisa de uma raiz única para conseguir montar a árvore de elementos corretamente.*

7. Para que servem as "Props" em um componente?

Para aumentar a performance do site

Para passar informações de um componente pai para um componente filho

Para salvar dados no banco de dados

Para mudar a senha do administrador *Explicação: Props são como "argumentos" que tornam o componente dinâmico e reutilizável.*

8. Por que usamos `className` em vez de `class` no JSX?

Porque `className` é mais bonito

Porque `class` é uma palavra reservada do Javascript para criar classes de objetos

Porque o HTML mudou de nome

Para economizar memória *Explicação: Como o JSX é Javascript, precisamos evitar conflitos com nomes que o JS já usa.*

9. O que é o "Virtual DOM" (Conceito)?

Uma simulação de videogame

Uma cópia em memória da interface que o React usa para saber exatamente o que atualizar na tela real

O nome do servidor da Microsoft

Um tipo de vírus de computador *Explicação: O Virtual DOM é o segredo da velocidade do React, evitando redesenhar a página toda sem necessidade.*

10. Como exibimos uma variável Javascript dentro do JSX?

Usando aspas duplas: "variavel"

Usando parênteses: (variavel)

Usando chaves: {variavel}

Usando um ponto de interrogação: ?variavel *Explicação: Tudo que estiver entre chaves { } no JSX será tratado como código Javascript puro.*

Quiz 13 - Introdução

1. O que acontece quando o valor de um "State" muda no React?

O computador reinicia

O React re-seta (redesenha) o componente na tela com os novos dados

O código Javascript é deletado

Nada, o desenvolvedor deve atualizar a tela manualmente *Explicação: A reatividade automática é um dos maiores poderes do React.*

2. Qual a forma correta de criar um estado para guardar um número?

let x = 0;

const x = 0;

const [x, setX] = useState(0);

val x by state(0); *Explicação: Usamos o "Array Destructuring" para pegar a variável e a função disparadora.*

3. Por que não podemos fazer `contador = contador + 1` diretamente?

Porque gasta muita energia

Porque o Javascript proíbe

Porque o React não ficará sabendo da mudança e não atualizará a tela

Porque isso apaga o banco de dados *Explicação: A função `set...` é quem avisa ao React que algo mudou.*

4. O que é um Hook?

Um erro CSS

Uma função especial (como useState) que permite "enganchar" recursos do React em componentes de função

Um tipo de cabo USB

O vilão do Peter Pan *Explicação: Hooks revolucionaram o React, removendo a necessidade de usar "Classes" complexas.*

5. Qual o evento correto para detectar o clique em um botão no React?

onclick

onClick (com o C maiúsculo)

click

on-press *Explicação: Eventos no React seguem o padrão CamelCase.*

6. Como você adiciona um novo elemento em um array de estado `lista` sem quebrar a imutabilidade?

lista.push(novo)

lista += novo

setLista([...lista, novo])

setLista(novo) *Explicação: Usamos o "Spread Operator" (...) para criar uma cópia da lista original com o novo item.*

7. Em um "Input Controlado", quem manda no valor que aparece na caixinha de texto?

O usuário

O Teclado

O Estado (State)

O CSS *Explicação: O valor do input é amarrado ao estado, garantindo que o JS tenha controle total do que é digitado.*

8. O que o parâmetro `e` em `onChange={(e) => ...}` representa?

Erro

Estilo

O Objeto de Evento que contém dados como `target.value`

Email *Explicação: O evento contém todas as informações sobre a interação que acabou de acontecer.*

9. Qual o valor inicial de `cont` em `const [cont, setCont] = useState(10)`?

0

null

10

undefined *Explicação: O valor dentro dos parênteses do useState define o ponto de partida.*

10. Se um componente pai muda seu estado, o que acontece com seus componentes filhos?

Eles param de funcionar

Eles também são re-renderizados pelo React

Eles ficam travados

Eles mudam de cor sozinhos *Explicação: O fluxo de dados no React é descendente; se o pai muda, a árvore abaixo dele se atualiza.*

Quiz 14 - Introdução

1. O que é um "Efeito Colateral" no React?

É um bug que trava o computador

Uma ação que acontece fora do fluxo normal de renderizar a interface (ex: buscar dados, timers)

É o nome de uma biblioteca de animação

É quando o CSS muda a cor do botão *Explicação: Efeitos saem do campo puro de "desenhar componentes" e tocam o mundo externo.*

2. Qual o segundo parâmetro do `useEffect`?

Um número inteiro

O array de dependências

O nome do componente

Um arquivo CSS *Explicação: Esse array decide quando o efeito deve ser re-executado.*

3. O que acontece se passarmos um array de dependências vazio `[]`?

O efeito nunca roda

O efeito roda em todo "re-render"

O efeito roda apenas uma vez, quando o componente é montado (aparece na tela)

O app fecha com erro *Explicação: É o padrão usado para buscar dados iniciais de uma API.*

4. Como fazemos para que um efeito rode toda vez que o estado `tema` mudar?

useEffect(() => { ... })

useEffect(() => { ... }, [])

useEffect(() => { ... }, [tema])

useEffect([tema], () => { ... }) *Explicação: Incluir a variável no array obriga o React a monitorá-la.*

5. O que a função `fetch()` retorna?

O dado final em formato JSON

Uma Promise (Promessa)

Um número de erro

Uma string de texto *Explicação: Chamadas de rede são assíncronas; o fetch promete que trará o dado no futuro.*

6. Para que serve o `.then(res => res.json())`?

Para salvar o dado no disco

Para fechar a conexão

Para converter a resposta bruta da rede em um objeto Javascript que possamos usar

Para criptografar os dados *Explicação: A resposta inicial é um objeto de rede; precisamos extrair o corpo dela em JSON.*

7. Qual a maneira correta de lidar com o estado de "Carregando"?

Usar um cronômetro de 5 segundos

Criar um estado booleano `isLoading` e exibi-lo enquanto a API não responde

Pedir para o usuário clicar em "Refresh"

Não precisa lidar, o React faz sozinho *Explicação: Feedback para o usuário é essencial para uma boa experiência (UX).*

8. O que acontece se você atualizar um estado dentro de um `useEffect` sem o array `[]`?

O estado não muda

Pode gerar um loop infinito (o efeito muda o estado, que re-renderiza, que roda o efeito...)

O site fica mais rápido

O computador reinicia *Explicação: Este é um dos erros mais comuns de iniciantes no React.*

9. Onde devemos colocar a chamada `fetch` para que ela não rode milhares de vezes sem necessidade?

Fora do componente

No meio do JSX

Dentro de um `useEffect` com dependências controladas

Dentro do CSS *Explicação: O useEffect isola a lógica de disparos de rede.*

10. Se quisermos limpar um timer ou fechar um socket quando o componente sumir da tela, onde fazemos isso?

Em outro componente

No `useState`

Na função de "cleanup" retornada pelo `useEffect`

Deletando o arquivo *Explicação: O useEffect permite retornar uma função que o React chama ao "desmontar" o componente.*

Quiz 15 - Introdução

1. O que é uma SPA (Single Page Application)?

Um site que só funciona em um navegador

Uma aplicação onde o HTML é carregado uma única vez e o Javascript troca o conteúdo da tela

Um site que não tem Javascript

Um aplicativo de celular que não usa internet *Explicação: SPAs oferecem uma experiência fluida, parecida com um app nativo, sem recarregamentos de página.*

2. Qual componente é obrigatório para envolver toda a aplicação que usará rotas?

*Explicação: Ele é o "contexto" que permite ao React monitorar a URL do navegador.*

3. Como definimos uma rota específica para a página de contato?

} />">} />

*Explicação: No React Router v6, usamos os atributos `path` e `element`.*

4. Por que não devemos usar a tag `` para navegar entre rotas no React?

Porque ela é proibida pelo Google

Porque ela gasta mais bateria

Porque ela causa um recarregamento total da página, perdendo o estado do React

Porque ela não aceita CSS *Explicação: O componente `` intercepta o clique para manter a troca de telas interna.*

5. Para que serve o caractere `*` no atributo `path`?

Para indicar uma rota secreta

Como um "coringa" para capturar qualquer URL que não foi definida anteriormente (Página 404)

Para multiplicar o número de páginas

Para aceitar qualquer tipo de arquivo *Explicação: É a forma padrão de lidar com links inexistentes.*

6. Qual hook usamos para capturar parâmetros da URL (ex: o ID em `/post/10`)?

useID()

useRoute()

useParams()

useQuery() *Explicação: Os parâmetros definidos com `:` na rota são extraídos por este hook.*

7. Como redirecionamos o usuário para a Home após ele clicar em um botão de "Sair"?

window.location.href = "/"

const navigate = useNavigate(); navigate("/");

useRoute("/") *Explicação: O hook `useNavigate` permite navegação via lógica de programação.*

8. O que acontece se removermos o componente `` e deixarmos apenas os ``?

O app continua funcionando

O React Router gerará um erro, pois os Route precisam estar dentro de um provedor de rotas

O site fica mais lento

O menu desaparece *Explicação: `` é o componente que escolhe qual rota renderizar baseada na URL atual.*

9. Em qual pacote extra encontramos as ferramentas de roteamento do React?

react-dom

react-router

react-router-dom

vite-plugin-router *Explicação: O `react-router-dom` é a versão específica para navegadores web.*

10. Como definimos um parâmetro dinâmico chamado `slug` na URL?

path="/blog/slug"

path="/blog/:slug"

path="/blog/{slug}"

path="/blog/*slug" *Explicação: O uso dos dois pontos (`:`) sinaliza que aquela parte da URL é uma variável.*

Quiz 16 - Introdução

1. Qual o principal objetivo do "Trabalho de Conclusão de Curso (TCC)" no TecPro?

Ganhar um prêmio em dinheiro

Consolidar o aprendizado em um projeto Full-Stack real para servir de portfólio para o mercado

Escrever o código mais longo do mundo

Criar um site que não use internet *Explicação: O projeto final prova que você sabe conectar o Frontend ao Backend com segurança.*

2. Por que o `README.md` no seu GitHub é considerado seu "Cartão de Visitas"?

Porque ele tem as cores da sua empresa

Porque é a primeira coisa que um recrutador ou tech lead olha para entender seu projeto

Porque ele apaga o resto do código

Porque o GitHub cobra se você não tiver um *Explicação: Um bom README com prints e tecnologias demonstra profissionalismo e clareza.*

3. Como você pode tornar seu projeto "impecável" para o mercado?

Colocando o máximo de animações possível, mesmo que trave

Usando rotas seguras, código limpo, tratamento de erros e um design organizado

Cobrando caro para as pessoas verem o código

Copiando o código de outro site sem mudar nada *Explicação: Qualidade técnica e atenção aos detalhes são o que diferenciam um júnior de um pleno.*

4. O que é o `TypeScript` (citado como próximo passo)?

Um novo tipo de processador

Uma linguagem que adiciona "tipos" ao Javascript, evitando erros comuns em tempo de desenvolvimento

O sucessor do HTML

Uma ferramenta para criar foguetes em 3D *Explicação: TypeScript é o padrão em grandes empresas para projetos robustos.*

5. O que significa ser um desenvolvedor `T-Shaped`?

Ter uma camiseta com estampa de código

Ter conhecimento amplo em várias áreas (Backend, Frontend, UX) e profundo em uma (ex: Node.js)

Programar apenas com a mão esquerda

Saber usar apenas uma linguagem de programação *Explicação: É o perfil mais valorizado pelas empresas modernas de tecnologia.*

6. Qual a importância das `Soft Skills` para um desenvolvedor Full-Stack?

Nenhuma, dev só precisa falar com o computador

Essencial para trabalhar em equipe, entender o cliente e explicar decisões técnicas

Serve apenas para quem trabalha no RH

É o nome de uma biblioteca de animação suave *Explicação: Software é feito por pessoas para pessoas. Saber se comunicar é vital.*

7. O que é o `Next.js`?

Um curso para aprender Javascript em 5 minutos

O framework React mais popular que permite criar sites rápidos com renderização no servidor (SSR)

O nome do navegador do Google

Uma versão do Javascript que roda apenas em smartwatches *Explicação: Next.js é a evolução natural para quem já domina os fundamentos do React.*

8. Como se manter atualizado em um mercado que muda todo mês?

Lendo livros de 20 anos atrás

Acompanhando documentações oficiais, comunidades, newsletters e praticando sempre

Esperando o chefe mandar estudar

Decorando todos os comandos de uma vez *Explicação: Estudo contínuo é parte fundamental da rotina de um desenvolvedor.*

9. O que fazer ao encontrar um bug impossível no seu código?

Chorar e desistir da carreira

Consultar a documentação, fóruns como StackOverflow, usar IA (com sabedoria) e debugar passo a passo

Apagar o Windows e reinstalar tudo

Ignorar o erro e avisar o usuário para não clicar ali *Explicação: Resolver problemas complexos é a alma do trabalho do programador.*

10. Qual a mensagem final do curso para o aluno?

Que agora você já sabe tudo e não precisa mais estudar

Que você construiu uma base sólida e agora tem o poder de criar soluções web completas

Que o mercado de programação vai acabar amanhã

Que o PHP é a única linguagem que existe *Explicação: O curso é apenas o início de uma carreira incrível e cheia de inovação.*

Slides

Slides 📺

Material visual para acompanhamento das vídeo-aulas.

Módulo 1 ---
Módulo 2 ---
Módulo 3 ---
Módulo 4 ---

Aula 01 - Introdução a Microsserviços 🌐

De Monólitos a Sistemas Distribuídos

Agenda de Hoje 📅

Panorama do Software Moderno
Monólitos vs Microsserviços
A Economia das APIs
Escalabilidade Vertical vs Horizontal
Cinto de Utilidades (Ferramentas)
Setup do Ambiente

1. O Mundo Cloud-Native ☁️

Sistemas globais exigem disponibilidade 24/7.
Milhões de requisições por segundo.
Deploy contínuo (várias vezes ao dia).

2. A Evolução da Arquitetura 🏛️➡️🏗️

2.1 O Monólito 🏛️

Um único projeto, um único deploy.
Tudo ou nada: erro em um lugar afeta tudo.
Difícil de escalar partes específicas.
Ideal para: Projetos pequenos, MVPs rápidos.

2.2 Microsserviços 🏗️

Conjunto de serviços independentes.
Comunicação via rede (APIs).
Cada um com seu banco de dados.
Ideal para: Sistemas complexos e escaláveis.

3. O Papel das APIs 📡

Contract-First: Acordo de comunicação.
REST como padrão dominante.
JSON: A língua universal.

Escalabilidade: Vertical vs Horizontal

Vertical (Scale Up)	Horizontal (Scale Out)
Aumenta CPU/RAM	Adiciona mais servidores
Tem limite físico	Virtualmente ilimitada
Causa downtime no upgrade	Zero downtime (Redundância)

Arquitetura de Microsserviços

graph LR
    User[Cliente] --> AGW[API Gateway]
    AGW --> S1[Usuários]
    AGW --> S2[Pedidos]
    AGW --> S3[Pagamentos]
    S1 --> DB1[(DB)]
    S2 --> DB2[(DB)]
    S3 --> DB3[(DB)]

4. Ferramentas Indispensáveis 🛠️

Client HTTP: Postman & Insomnia

Testar rotas sem Frontend.
Analisar Headers e Status Codes.
Simular diferentes cenários de erro.

Containerização: Docker 🐋

"Roda na minha máquina, roda em qualquer lugar".
Isola dependências e versões.
Facilita a subida de múltiplos serviços locais.

5. Estrutura de Projeto Backend 📂

Divisão clara de responsabilidades.
Controllers, Services e Repositories.
Tratamento global de exceções.

6. Setup do Ambiente 🚀

Requisitos:

IDE: VS Code ou IntelliJ.
Postman (Desktop ou Extensão).
Docker Desktop.
Git & GitHub.

Resumo da Aula ✅

Microsserviços trazem resiliência e escala.
APIs são o coração da comunicação moderna.
Ferramentas como Docker mudaram o jogo.
Começamos nossa jornada Fullstack!

Próxima Aula: Arquitetura e Gateway 🏗️

Como os serviços conversam?
O que é Service Discovery?
Protegendo a porta de entrada.

Dúvidas? 🤔

"A arquitetura de hoje é o legado de amanhã. Escolha com sabedoria."

Aula 02 - Arquitetura e Gateway 🏗️

Orquestrando Microsserviços

Agenda 📅

Comunicação entre Serviços
Síncrono vs Assíncrono
O Papel do API Gateway
Service Discovery
Load Balancing
Padrões de Resiliência

1. Como os Serviços Conversam? 💬

Microsserviços são ilhas que precisam de pontes.
Dois mundos: Sync e Async.

1.1 Comunicação Síncrona 🔄

Cliente bloqueia até a resposta.
Uso de HTTP/REST ou gRPC.
Risco: Acoplamento temporal e gargalos.

1.2 Comunicação Assíncrona 📬

Envia e esquece (Eventos).
Uso de Filas e Tópicos (Broker).
Vantagem: Escalabilidade e desacoplamento.

2. API Gateway: O Porteiro 🚪

Única entrada para o mundo exterior.
Esconde a complexidade interna.

Gateway Responsibilities

Roteamento: /p -> Pagamento, /e -> Estoque.
Segurança: Autenticação centralizada.
Rate Limit: Proteção contra flood.
Logs & Monitoramento.

3. Service Discovery 🔎

Onde está o servidor de pagamentos?
Agenda dinâmica de IPs e Portas.
Ferramentas: Netflix Eureka, Consul.

4. Load Balancing ⚖️

Distribuição inteligente da carga.
Evita que um container "morra" de trabalho.

graph TD
    GW[Gateway] --> LB[Load Balancer]
    LB --> S1[Serviço A]
    LB --> S2[Serviço B]
    LB --> S3[Serviço C]

5. Resiliência: Circuit Breaker 🔌

Detecta serviços lentos ou falhos.
Abre o circuito para proteger o resto do sistema.
Evita o cascateamento de erros.

Comparativo: Sync vs Async

Característica	Síncrono 🔄	Assíncrono 📬
Resposta	Imediata	Eventual
Desempenho	Limitado pelo destino	Alto débito
Uso comum	Cadastro/Login	Geração de Relatórios

6. Prática: O "Dashboard" Agregador 💻

Como o Gateway une dados de 3 serviços?
Agregação de respostas (Aggregation Pattern).

Desafio Relâmpago ⚡

O que acontece se o seu API Gateway cair? Ele é um ponto único de falha?

Resumo ✅

Sync é fácil, Async é escalável.
API Gateway protege e organiza.
Service Discovery é essencial em containers.
Resiliência não é opcional!

Próxima Aula: Modelagem REST 📡

Verbos HTTP.
Status Codes.
O contrato ideal.

Dúvidas? 🏗️

Aula 03 - Modelagem de APIs RESTful 📡

Recursos, Verbos e Contratos

Agenda 📅

O que é REST?
Recursos e URIs
Verbos HTTP (GET, POST, PUT...)
Status Codes
JSON: A Linguagem das APIs
Boas Práticas de Design

1. REST: A "Língua" da Web 🌐

Style arquitetural para sistemas distribuídos.
Baseado no protocolo HTTP.
Independência entre Client e Server.

Princípios REST

Stateless: Cada requisição é única.
Uniform Interface: Padrões compartilhados.
Cacheable: Melhore a performance.

2. Identificando Recursos 📍

Um recurso é qualquer coisa que expomos.
URI: O endereço do recurso.

O que NÃO fazer:

GET /obterUsuarios ❌

O que fazer:

GET /usuarios ✅ (Sempre substantivos no plural!)

3. Os Verbos HTTP 🛠️

Eles definem a intenção da chamada:

GET: Buscar dados.
POST: Criar novo dado.
PUT: Atualizar (Trocar tudo).
PATCH: Atualizar (Apenas um pedaço).
DELETE: Remover dado.

Idempotência e Segurança

Verbo	Seguro?	Idempotente?
GET	Sim ✅	Sim ✅
POST	Não ❌	Não ❌
PUT	Não ❌	Sim ✅
DELETE	Não ❌	Sim ✅

4. Status Codes: A Resposta 🚦

2xx: Deu certo! (200, 201, 204).
4xx: Você (cliente) errou algo (400, 401, 404).
5xx: Eu (servidor) quebrei (500, 503).

5. O Formato JSON 🏗️

{
  "nome": "Curso Backend",
  "modulo": 1,
  "ativo": true
}

Leve, legível e universal.

6. Design de URIs Complexas

Como buscar os pedidos de um usuário específico?

GET /usuarios/123/pedidos ✅

Hierarquia lógica e limpa.

7. Prática: Postman em Ação 💻

Testando verbos em APIs reais.
Analisando Headers e Body.

Desafio REST ⚡

Se você quer mudar apenas o e-mail de um usuário, qual verbo deve usar: PUT ou PATCH?

Resumo ✅

REST é sobre recursos e padrões.
URIs usam substantivos no plural.
Status codes guiam o frontend.
JSON é o padrão de facto.

Próxima Aula: Swagger e Mocks 📝

Documentação automática.
Como trabalhar sem o backend pronto?

Dúvidas? 📡

Aula 04 - Documentação e Mocks 📝

Developer Experience e Contratos

Agenda 📅

Por que documentar?
OpenAPI vs Swagger
Swagger UI e Editor
O Poder dos Mocks
Developer Experience (DX)
Ferramentas de Simulação

1. Documentação é DX 🚀

Sua API é seu produto.
Documentar economiza tempo de suporte.
Facilita a integração com Front/Mobile.

2. OpenAPI (OAS) 📜

O padrão mundial.
Arquivo YAML ou JSON descritivo.
Agnóstico de linguagem.

3. Swagger: O Canivete Suíço 🛠️

Editor: Escreva e valide o contrato.
UI: Gere a página visual de testes.
Codegen: Gere código (client/server) automaticamente.

Swagger UI em Ação

Permite testar endpoints no próprio navegador.
Mostra exemplos de JSON de entrada e saída.
Exibe todos os Status Codes possíveis.

4. O Poder dos Mocks 🎭

Development in Parallel: Front não espera pelo Back.
Servidor "Fake" que retorna dados reais.
Valide a experiência antes da implementação complexa.

5. Developer Experience (DX) 👨‍💻

Como ser amado por outros devs:

Nomes de rotas claros.
Erros descritivos no Body.
Exemplos de requisição.
Documentação atualizada (ou gerada pelo código).

6. Ferramentas Recomendadas 🧰

Swagger Editor: Online ou Local.
Mockoon: Mock local amigável.
Prism: Mock via CLI.
Postman: Collections documentadas.

7. Prática: Editando um YAML 💻

Desenhando um endpoint GET /tarefas.
Definindo parâmetros de entrada.
Criando esquemas de dados.

Desafio: Mock vs Stubs ⚡

Qual a principal vantagem de um Mock Server online (como Postman) em relação a um Mock rodando apenas no computador do desenvolvedor?

Resumo ✅

OpenAPI é o contrato.
Swagger UI é a vitrine da sua API.
Mocks destravam o desenvolvimento da equipe.
DX é o diferencial de uma boa API.

Próxima Aula: Implementação Backend! 💻

Módulo 2: Manipulação de Dados

Controllers e Services.
Repositories e Banco de Dados.
Mão na massa com código real!

Dúvidas? 📝

Aula 05 - Implementação de APIs ⚙️

Controllers e Rotas

Agenda 📅

Camadas do Backend
O Papel do Controller
Rotas e Handlers
Capturando Dados (Params/Body)
Status Codes na Prática
Injeção de Dependência

1. Organização em Camadas 🧱

Controller: Trata a entrada (HTTP).
Service: Regras de negócio.
Repository: Acesso ao banco.

2. O Papel do Controller 🎮

Ele é o ponto de entrada.
Não deve ter lógica complexa!
Deve apenas orquestrar a execução.

Controller = Garçom 🤵 Service = Cozinheiro 👨‍🍳

3. Rotas e Handlers 📍

Rota: Verbo HTTP + Path.
Handler: Função executada.

router.post('/login', controller.realizarLogin);

4. Capturando Dados 📥

Path Params: /id/123 (Identificação).
Query Params: ?q=busca (Filtro).
Body: Enviando JSON (Criação/Update).

5. Respostas de Qualidade 📤

Nunca esqueça o Status Code!
Sucesso: 200, 201, 204.
Erro: 400, 401, 404, 500.

6. Injeção de Dependência 💉

Receber serviços prontos.
Facilita testar o Controller "isolado".

7. Prática: O Primeiro Endpoint 💻

Mapeando um GET /ping.
Retornando um pong em JSON.
Testando no Insomnia/Postman.

Desafio: Params vs Query ⚡

Se você quer listar todos os alunos de uma sala com o nome "Pedro", qual tipo de parâmetro você usaria para o nome?

Resumo ✅

Controllers são a porta de entrada.
Devem ser leves e objetivos.
Capturam dados e retornam status/JSON.
Seguem as rotas definidas.

Próxima Aula: Regras de Negócio! 🧠

Services e Validações

Onde o cálculo acontece.
Isolando o código do "mundo externo".

Dúvidas? ⚙️

Aula 06 - Services e Regras de Negócio 🧠

O Cérebro da Aplicação

Agenda 📅

Por que separar as coisas?
Responsabilidades do Service
O Fluxo: Controller -> Service
Tratamento de Erros Profissional
DTOs: Protegendo os Dados
Service vs ViewModel (Mobile)

1. O Problema: "Controller Gordo" 🍔

Lógica de negócio misturada com HTTP.
Código impossível de reutilizar.
Difícil de testar.

2. A Solução: Layered Architecture 🧱

Controller: Trata o transporte (HTTP).
Service: Trata a regra (O QUE fazer).

3. O que vai no Service? ⚖️

Validações complexas.
Cálculos de valores.
Envio de e-mails/notificações.
Integração com repositórios.

4. Tratamento de Erros ⚠️

O Service Lança (Throws).
O Controller Captura (Catches).

// Service
if (!saldo) throw new Error("Saldo Insuficiente");

// Controller
try { ... } catch (e) { res.status(400)... }

5. DTOs: Filtrando a Saída 📦

Nunca envie "tudo" do banco para o cliente.
Proteja campos sensíveis (Ex: senha_hash).
Melhore a performance (menos dados trafegados).

6. Service vs ViewModel 🆚

No Backend: Service é o cérebro.
No Mobile/Front: ViewModel é o cérebro.
Ambos servem para "limpar" a camada de visualização.

7. Prática: Validando um Cadastro 💻

Verificando se o e-mail é válido.
Verificando se o usuário já existe.
Lançando erros específicos.

Desafio: Onde colocar? ⚡

Se uma regra diz: "Usuários VIP ganham 20% de desconto", essa regra deve ficar no Controller ou no Service?

Resumo ✅

Controllers recebem, Services processam.
Mantenha seus Controllers "finos" (Slim Controllers).
Centralize as regras para facilitar a manutenção.
DTOs são as fronteiras dos dados.

Próxima Aula: Onde os dados vivem! 🗄️

Repositories e Banco de Dados

PostgreSQL e SQL básico.
Camada de persistência.

Dúvidas? 🧠

Aula 07 - Repositories e Banco de Dados 🗄️

Onde a informação descansa

Agenda 📅

Por que Bancos de Dados?
PostgreSQL: O Robusto
SQL Básico (SELECT, INSERT...)
Relacionamentos (1:N, N:N)
Camada de Persistence
O Padrão Repository

1. Persistência de Dados 💾

Sem banco, o servidor esquece tudo ao reiniciar.
Precisamos de segurança e integridade.
Estritamente Tipado: O banco garante o formato.

2. Por que PostgreSQL? 🐘

Código Aberto (Open Source).
Extremamente confiável (ACID).
Suporta dados complexos (JSONB).

3. SQL: A Linguagem Universal 🗣️

-- Buscar usuários VIP
SELECT * FROM usuarios 
WHERE tipo = 'VIP' 
ORDER BY nome;

DDL: Define a estrutura (Tabelas).
DML: Manipula os dados (Linhas).

4. O Coração: Relacionamentos 🔗

1:N: Um cliente, muitos pedidos.
N:N: Muitos alunos, muitos cursos.
Foreign Key: A âncora que liga tudo.

5. Camada de Persistence 🧱

O código que conversa com o driver do banco.
Onde as queries são traduzidas para o código.

6. Padrão Repository 📥

"Não me diga como, diga O QUE você quer".
Isola o SQL da regra de negócio.

// No Service
userRepository.findByEmail(email);

7. Migrations 📜

Controle de versão para o Banco.
Permite "voltar no tempo" se algo quebrar.
Mantém o time em sincronia.

Desafio SQL ⚡

Qual comando você usaria para mudar o preço de todos os produtos da categoria 'Games' para 99.90?

Resumo ✅

Bancos de dados dão memória ao sistema.
PostgreSQL é o padrão da indústria.
SQL é habilidade obrigatória para backend.
Repository Pattern traz flexibilidade.

Próxima Aula: Integridade! ✅

Validação e Boas Práticas

Garantindo que dados "sujos" não entrem no banco.
Tratamento de exceções de banco.

Dúvidas? 🗄️

Aula 08 - Boas Práticas e Validação ✅

Qualidade e Segurança no Backend

Agenda 📅

Por que Validar Tudo?
Validação vs Sanitização
Schema Validation (Ex: Zod)
Clean Code (Código Limpo)
Tratamento de Erros Profissional
Middlewares Globais

1. Regra de Ouro: Desconfiança 🛡️

O cliente é o "lado perigoso" da aplicação.
Validações evitam dados corrompidos.
Defesa em Profundidade: Garanta a regra no banco E no código.

2. Validar vs Sanitizar 🧼

Validar: Checar (Idade > 18?).
Sanitizar: Limpar (Remover <script>).

3. Schema Validation 📐

Crie "moldes" para seus dados.
Validação centralizada e reutilizável.

const userSchema = {
    nome: string().min(3),
    email: string().email()
};

4. O Backend Elegante (Clean Code) ✨

DRY: Don't Repeat Yourself (Não repita lógica).
KISS: Keep It Simple, Stupid (Mantenha o simples).
Nomes de funções que explicam o que está acontecendo.

5. Tratamento de Erros 🚨

Controller trata o fluxo, não o detalhe técnico.
Try/Catch Global: Evite crashes.
Mensagens amigáveis para o cliente.

6. Logs vs Mensagens 📜

Terminal/Log: Detalhe técnico completo.
Cliente (JSON): Apenas o que ele precisa saber.

"Ocorreu um erro interno" (Cliente) ✅ "Query failed at line 42 due to NULL constraint" (Logs) ✅

7. Prática: O Schema Perfeito 💻

Validando um produto complexo.
Tratando erros de tipo (String no lugar de Number).

Desafio: Limpeza ⚡

Se você recebe um texto de um post com muitos espaços em branco no final, você deve Validar ou Sanitizar?

Resumo ✅

Backend robusto exige validação rigorosa.
Limpe os dados antes de salvar (Sanitize).
Middleware Global centraliza a gestão de falhas.
Código limpo economiza meses de manutenção.

Próxima Aula: Módulo 3! 🔐

Segurança e Autenticação

Quem é você? (Authentication).
O que você pode fazer? (Authorization).

Dúvidas? ✅

Aula 09 - Segurança e Autenticação com JWT 🔐

Portas trancadas e Crachás Digitais

Agenda 📅

Autenticação vs Autorização
O Fim das Sessões (Stateful)
O que é JWT?
Estrutura: Header, Payload, Signature
Fluxo de Login completo
Melhores Práticas de Segurança

1. Quem é Você? (Autenticação) 🚦

Validar a identidade do usuário.
Login e Senha.
Autorização: O que você PODE fazer? (Níveis de acesso).

2. Por que JWT? 🤔

Abordagem Stateless (Sem estado).
O servidor não guarda sessão na memória (escalável!).
Perfeito para Microserviços e Mobile.

3. Estrutura do Token 🎫

[Header].[Payload].[Signature]

Header: Algoritmo (ex: HS256).
Payload: Os dados (id, role, nome).
Signature: O lacre de segurança.

4. O Coração do JWT: A Assinatura 🖋️

Usa uma SECRET_KEY no servidor.
Garante que o token não foi "hackeado" ou alterado.

Envia credenciais -> 2. Servidor valida -> 3. Gera JWT -> 4. Frontend guarda o Token -> 5. Envia no Header em cada requisição.

6. Segurança em Mobile 📱

Nunca guarde em arquivos de texto!
Use EncryptedSharedPreferences (Android) ou Keychain (iOS).

7. Melhores Práticas 🏆

Use chaves secretas longas e seguras.
Defina tempo de expiração (expiresIn).
Protocolo HTTPS é obrigatório!

Desafio de Segurança ⚡

O Payload do JWT é criptografado ou apenas codificado? Posso guardar a senha do usuário lá?

Resumo ✅

JWT permite autenticação rápida e escalável.
Header + Payload + Signature.
Stateless = Servidor mais leve.

Próxima Aula: Controle de Acesso 🛡️

Quem manda aqui? (RBAC)

Middlewares de autorização.
Protegendo rotas por nível de usuário.

Dúvidas? 🔐

Aula 10 - Controle de Acesso (RBAC) 🛡️

Hierarquia e Segurança em Camadas

Agenda 📅

O que é RBAC? (Roles)
Autenticação vs Autorização
O Fluxo do Middleware
Erros 401 vs 403
Protegendo rotas na prática
Hierarquia de Perfis

1. Role-Based Access Control 👑

Permissões ligadas a Perfis (Roles).
Ex: ADMIN, EDITOR, VIEWER.
Facilita a gestão de milhares de usuários.

2. A Cancela (Middleware) 🚧

O middleware checa se o usuário tem a "chave" certa.
Se não tiver -> 403 Forbidden.
Se tiver -> next().

3. O Fluxo de Segurança 🌊

graph LR
    Req[Request] --> Auth[Autenticação]
    Auth --> |OK| Role[Autorização]
    Role --> |OK| Controller[Recurso Final]

4. 401 vs 403: Não confunda! ❌

401 (Unauthorized): "Quem é você?". Token inválido ou ausente.
403 (Forbidden): "Eu sei quem você é, mas não deixo entrar". Falta de permissão.

5. Implementação Dinâmica 🔒

// Middleware genérico
router.delete('/usuario/:id', 
    autenticar, 
    autorizar(['ADMIN']), 
    userController.remover
);

6. Hierarquia de Acesso 🏛️

Um Admin deve poder acessar rotas de User?
Design de sistema: Roles "Pai" e "Filho".

7. Melhores Práticas 🏆

Centralize a lógica em Middlewares.
Nunca exponha permissões sensíveis no frontend (segurança do lado do servidor).

Desafio: Segurança ⚡

Em um sistema escolar, o Diretor e o Professor podem ver notas. O Aluno só vê as dele. Como você configuraria a Role da rota GET /notas?

Resumo ✅

RBAC organiza permissões por grupos.
Middlewares são os guardiões das rotas.
Diferenciar 401 de 403 é vital para Debug.

Próxima Aula: Segurança Avançada 🏗️

Session vs Token e Refresh Tokens

O que fazer quando o token expira?
Protegendo contra ataques comuns (XSS, CSRF).

Dúvidas? 🛡️

Aula 11 - Refresh Token e Segurança Avançada 🏗️

Blindando sua API contra o mundo

Agenda 📅

O Problema do Token Curto ⏰
Refresh Tokens (O que são?)
CORS: Origens e Destinos
Helmet: Headers de Aço
Rate Limit: Contra Brute Force
Ataques Comuns (XSS, Injection)

1. Por que Tokens Expiram? ⏰

Segurança! Se roubarem o token, ele dura pouco.
Problema: O usuário odeia fazer login toda hora.

2. Refresh Token 🔁

Um token de longa duração (7 dias+).
Serve apenas para trocar por um novo Access Token.
Deve ser invalidado se o usuário deslogar.

"Quem pode me chamar?".
Resolvido via Headers no Servidor.
Nunca use origin: '*' em ambientes reais!

4. Helmet: Proteção de Headers 🪖

Remove o X-Powered-By (não diz que é Express).
Adiciona proteção contra Clickjacking e XSS.

5. Rate Limiting 🔨

5 tentativas de login por minuto? Sim.
Evita que robôs tentem descobrir senhas via "força bruta".

6. Onde salvar os Tokens? 🛡️

Frontend: LocalStorage? Seguro?
Melhor Prática: Cookies HttpOnly + Secure.

7. Melhores Práticas de Segurança 🏆

Use HTTPS sempre.
Valide TODAS as entradas do usuário.
Mantenha as bibliotecas atualizadas.

Desafio de Segurança ⚡

Qual a diferença entre 401 e 403 no contexto de Refresh Tokens? Se eu recebo 401, eu tento o refresh ou deslogo o usuário?

Resumo ✅

Refresh Token equilibra UX e Segurança.
CORS e Helmet são as portas do seu castelo.
Proteja-se contra robôs com Rate Limit.

Próximo Módulo: Front-End Moderno 🎨

Saindo das APIs e indo para a Web!

Introdução ao React/Vite.
Consumindo nossas APIs no navegador.

Dúvidas? 🏗️

Aula 12 - Introdução ao React ⚛️

O Poder dos Componentes Modernos

Agenda 📅

O que são SPAs?
Por que React?
Vite: A Ferramenta Rápida
JSX: JS + HTML
Componentes e LEGO
Props: O Coração Dinâmico

1. Single Page Applications (SPA) 📄

O site que nunca recarrega.
Navegação fluida e instantânea.
Ex: Gmail, Facebook, Spotify Web.

2. Por que o React venceu? ⚔️

Componentização (Foco no Reuso).
Virtual DOM (Foco na Performance).
Gigantesco Ecossistema (Foco no Emprego).

3. Vite: O Novo Padrão ⚡

Inicia o projeto em segundos.
Feedback instantâneo durante o código.

4. JSX: A Mistura Perfeita 🧪

function Titulo() {
  const nome = "React";
  return <h1>Olá, {nome}!</h1>;
}

Parece HTML, mas tem o poder do Javascript.

5. Componentes = LEGO 🧩

Pequenas partes isoladas.
Facilita testes e trabalho em equipe.

6. Props: Passando o Bastão 🎁

Permite que componentes recebam dados do "pai".
Torna componentes genéricos e reutilizáveis.

Resumo ✅

SPA torna a Web parecida com Apps.
React organiza sua UI em componentes.
Vite é seu melhor amigo no desenvolvimento.

Próxima Aula: Dinâmica e Estado 🎣

O que acontece quando o usuário clica?

Hooks: useState.
Reatividade na prática.

Dúvidas? ⚛️

Aula 13 - Estado e Hooks 🎣

Tornando seu App Interativo

Agenda 📅

O que é o Estado (State)?
Hook useState
Lidando com Cliques e Eventos
Inputs Controlados
Imutabilidade e Arrays

1. O Problema da Estática 🧱

Variáveis comuns mudam nos bastidores...
...mas a tela continua a mesma!
O React precisa de um sinal para re-desenhar.

2. useState: O Motor de Mudança 🚀

const [cont, setCont] = useState(0);

cont: O valor atual.
setCont: A função que atualiza.
0: O ponto de partida.

3. Eventos no React ⚡

onClick={funcao}
onChange={(e) => ...}
Sempre em CamelCase!

4. Inputs Controlados ⌨️

O React é quem manda no valor do input.
value={estado} + onChange.
Facilita validação e limpeza de campos.

5. Imutabilidade (Muito Importante!) 💎

Nunca altere o estado original: lista.push(x) ❌
Sempre crie uma cópia nova: setLista([...lista, x]) ✅

6. Fluxo de Dados 🌊

O estado flui do Pai para o Filho via Props.
Se o estado do Pai muda, todo mundo abaixo dele atualiza.

Desafio de Estado ⚡

Se eu tenho um botão que soma +1 ao contador, o que acontece com a interface se eu esquecer de importar o useState e usar uma variável global let contador = 0?

Resumo ✅

useState traz vida aos componentes.
Mudança de estado = Re-renderização.
Use sempre funções disparadoras (set...).

Próxima Aula: Efeitos e APIs 🌐

Buscando dados no mundo real!

Hook: useEffect.
Consumindo nossa API Backend.

Dúvidas? 🎣

Aula 14 - Efeitos e APIs 🌐

Conectando seu App ao Mundo Real

Agenda 📅

O que são Side Effects?
Hook useEffect
O Array de Dependências
Buscando dados com fetch
Estados de Carregamento e Erro

1. Além da Interface 🧪

Efeitos colaterais são ações que tocam o mundo externo ao componente.
Ex: Buscar usuários, mudar o título da aba, iniciar um cronômetro.

2. useState vs useEffect 🥊

useState: Para dados que o usuário vê mudando.
useEffect: Para ações que o componente faz "sozinho".

3. Os 3 Momentos do useEffect 🕒

Montagem: Quando o componente nasce.
Atualização: Quando um dado monitorado muda.
Desmontagem: Quando o componente morre (Cleanup).

4. O Array de Dependências `[]` 🗃️

[] -> Roda só uma vez.
[cont] -> Roda sempre que cont mudar.
Sem array -> Roda em toda atualização (Perigo!).

5. Chamadas de API (Fetch) 📨

useEffect(() => {
  fetch("https://api...")
    .then(res => res.json())
    .then(data => setData(data));
}, []);

6. UX: Estados de Rede 🛡️

Loading: Mostre um Spinner enquanto espera.
Error: Avise se a internet caiu ou o usuário não existe.
Empty: Diga se não há resultados.

Desafio de Efeito ⚡

Se você colocar um alert("Olá") dentro de um useEffect sem o array [], quantas vezes o alerta vai aparecer se o usuário ficar digitando em um campo de texto que atualiza o estado?

Resumo ✅

useEffect organiza as ações assíncronas.
Controle quando rodar via array de dependências.
Trate sempre o carregamento e erros para uma boa UX.

Próxima Aula: Navegação 🚦

Multi-páginas com React Router!

/home, /perfil, /contato.
Links e Navegação Programática.

Dúvidas? 🌐

Aula 15 - React Router 🚦

Criando Apps Multi-Página

Agenda 📅

O que são SPAs?
Multi-páginas (Simuladas)
Componentes de Rota
Navegação (Link e useNavigate)
Parâmetros dinâmicos (:id)

1. O Mundo do SPA ⚛️

O site é uma única página HTML.
O Javascript "troca" a tela sem recarregar.
UX rápida e fluida.

2. React Router Dom ⚙️

npm install react-router-dom

A biblioteca padrão para web.
Permite que a URL combine com o que aparece na tela.

3. A Estrutura Básica 🏗️

BrowserRouter: O container principal.
Routes: O seletor de rotas.
Route: Define o caminho (path) e o componente (element).

4. Navegando sem Recarregar! 🏃‍♂️

Use <Link to="/contato">
NUNCA use <a href="..."> para rotas internas.

5. Navegação Programática 🚀

const navigate = useNavigate();

onClick={() => navigate("/dashboard")}

Ideal para redirecionar após ações (Login, Clique em Card).

6. Rotas Dinâmicas (URL Params) 🆔

path="/perfil/:username"
Hook useParams() captura o valor.
Uma única página que se adapta a mil perfis.

7. Página 404 (Not Found) 👻

path="*"
Garante que o usuário nunca caia em uma tela em branco.

Desafio de Roteamento ⚡

Se eu digitar www.meusite.com/asdfg e não tiver uma rota configurada para isso, o que o usuário vai ver se eu NÃO colocar uma rota com o path="*"?

Resumo ✅

Roteamento traz a sensação de um site real.
Hooks useNavigate e useParams são essenciais.
SPAs são o padrão da indústria moderna.

Próxima Aula: O Grande Final 🏆

Projeto Integrado: Backend + Frontend!

Conectando nossa API Node ao site React.
O Projeto Final do Curso!

Dúvidas? 🚦

Aula 16 - Projeto Final e Conclusão �

De aluno a Desenvolvedor Full-Stack

Agenda 📅

O Desafio Final 🔗
Requisitos Técnicos
Portfólio no GitHub
Onde continuar estudando?
Mensagem de Encerramento

1. O Desafio Final 🚀

Você deve entregar um projeto integrado contendo: - Frontend: SPA em React com rotas. - Backend: API segura em Node.js. - Integração: Conexão real entre os dois. - Design: CSS moderno e responsivo.

2. Sugestões de Temas 💡

Gerenciador de Tarefas �
Mini E-commerce 🛒
Rede Social Simplificada 💬
Dashboard de Monitoramento 📊

3. O README de Elite ✨

Prints ou Vídeos do site funcionando.
Lista detalhada de tecnologias.
Guia: "Como rodar o Projeto".

4. Onde ir agora? 📚

TypeScript: Segurança de tipos.
Bancos SQL: Postgres e MySQL.
Next.js: O rei do mercado React.
Docker: Infraestrutura moderna.

5. Soft Skills 🤝

Não é só saber programar!
Trabalho em equipe.
Resolução de problemas reais.

6. O Mercado Full-Stack 📈

Demanda altíssima por devs completos.
Salários excelentes.
Dashboards e Sistemas Web movem o mundo!

7. Mensagem Final 🌟

"Programar é a arte de criar soluções onde antes só havia problemas."

Você construiu a base sólida.
O código é sua ferramenta de transformação.

Parabéns pela Jornada! 🎓🚀

Vá e construa o futuro da Web.

Dúvidas Finais? 🤔

Configuração

Ambientes de Desenvolvimento 🛠️

Guias para configurar seu computador para o desenvolvimento frontend moderno.

Foundation --- Instalação do Node.js (LTS), NPM e editores de código.
- Setup 01 - Node.js e IDE
Vue Tooling --- Configuração do Vue DevTools e extensões essenciais.
- Setup 02 - Vue DevTools
Build & Tools --- Vite v6, Git e ferramentas de terminal.
- Setup 03 - Vite e Terminal

Setup 01 - Node.js e NPM 🟢

O Node.js é o motor que nos permite rodar ferramentas de desenvolvimento (como o Vite) e gerenciar bibliotecas em nossa máquina.

📥 Instalação

Acesse o site oficial: nodejs.org.
Baixe a versão LTS (Long Term Support). Ela é a mais estável e recomendada para produção.
Siga o instalador padrão ("Next, Next, Finish").

🧪 Verificação

Abra seu terminal (CMD, PowerShell ou Terminal do Mac) e digite:

node -v
npm -v

Se aparecerem as versões, a instalação foi um sucesso!

💡 Dica: NVM (Opcional)

Se você precisar gerenciar várias versões do Node no futuro, pesquise pelo NVM (Node Version Manager). Ele facilita a troca de versões sem precisar desinstalar nada.

Setup 02 - VS Code e Extensões Essenciais 💻

O Visual Studio Code é o editor de código mais popular do mundo, e com as extensões certas, ele se torna uma IDE super poderosa para Vue.

📥 Instalação do VS Code

Baixe em: code.visualstudio.com

🧩 Extensões Obrigatórias para Vue 3

Abra o menu de extensões (Ctrl + Shift + X) e instale:

Vue - Official (antiga Volar): Suporte oficial para arquivos .vue, incluindo realce de sintaxe e autocompletar.
ESLint: Ajuda a identificar erros de código enquanto você digita.
Prettier - Code formatter: Formata seu código automaticamente ao salvar, deixando-o limpo.
Auto Close Tag: Fecha as tags HTML/Vue automaticamente.

🛠️ Configuração Recomendada

Vá em Configurações -> Editor: Format On Save e deixe marcado como ativado. Isso garantirá que o Prettier formate seu código toda vez que você salvar o arquivo.

Setup 03 - Browser e Vue DevTools 🕵️

Para desenvolver frontend, o navegador não é apenas onde vemos o site, mas também nossa principal ferramenta de depuração.

🌐 Navegador Recomendado

Google Chrome ou Microsoft Edge possuem as ferramentas de desenvolvedor mais robustas para o ecossistema Vue.

🛠️ Instalando Vue DevTools

O Vue DevTools permite "enxergar" as variáveis reativas, o estado do Pinia e a árvore de componentes.

Acesse a loja de extensões (Chrome Web Store).
Procure por Vue.js devtools e clique em "Usar no Chrome".
Após instalar, reinicie o navegador.

🚀 Como Usar

No seu projeto Vue rodando: 1. Clique com o botão direito na página e selecione Inspecionar. 2. Procure a aba Vue no menu superior do console. 3. Agora você pode ver todas as suas refs e reactive em tempo real!

Setup 04 - Vite e Scaffolding ⚡

O Vite é a ferramenta que prepara todo o nosso ambiente de desenvolvimento, compila o código e permite que vejamos as mudanças no navegador instantaneamente.

🚀 Criando o Projeto

Abra o terminal na pasta onde deseja salvar seus estudos e digite:

npm create vite@latest

Siga os passos: 1. Project name: dê um nome (ex: meu-app-vue) 2. Select a framework: escolha Vue 3. Select a variant: escolha JavaScript (ou TypeScript, se preferir o desafio)

📦 Iniciando os trabalhos

Entre na pasta criada e instale as dependências:

cd meu-app-vue
npm install
npm run dev

Agora, acesse a URL que aparecerá no terminal (geralmente http://localhost:5173) e veja sua aplicação Vue rodando com performance de ponta!

Setup 05 - Git e GitHub Essentials 🐙

O controle de versão é obrigatório em qualquer projeto profissional. Através dele, você salva o histórico do seu código e compartilha com o mundo.

📥 Instalando o Git

Baixe em: git-scm.com
Durante a instalação, pode manter as opções padrão.

🔑 Configuração Inicial

Execute os comandos abaixo substituindo pelo seu nome e e-mail:

git config --global user.name "Seu Nome"
git config --global user.email "seuemail@exemplo.com"

🚀 Fluxo de Trabalho Básico

git init: Inicia o repositório.
git add .: Prepara todos os arquivos para salvar.
git commit -m "Mensagem": Salva o estado atual.
git push: Envia para o servidor (GitHub).

Dica: Não esqueça de criar o arquivo .gitignore para não enviar a pasta node_modules para o GitHub! O Vite já cria um para você por padrão.

Setup 06 - Terminal Essentials ⌨️

O terminal (ou CLI) é a nossa principal interface com as ferramentas de build e automação no mundo frontend.

🏁 Terminais Recomendados

Windows: Windows Terminal (PowerShell 7) ou Git Bash.
Mac/Linux: iTerm2 ou o Terminal nativo com Zsh (Oh My Zsh).

🚀 Comandos de Sobrevivência

Aprenda estes comandos básicos para navegar livremente: - cd [pasta]: Entra em uma pasta. - cd ..: Volta uma pasta. - ls ou dir: Lista os arquivos da pasta atual. - mkdir [nome]: Cria uma nova pasta. - clear ou cls: Limpa a tela do terminal.

💡 Atalho do VS Code

Você não precisa sair do editor para usar o terminal! Use o atalho Ctrl + ` (crase) para abrir o terminal integrado diretamente no seu código.

Setup 07 - Tailwind CSS IntelliSense 🎨

Se você optar por usar o Tailwind CSS para estilizar seus aplicativos Vue, esta extensão no VS Code é indispensável.

🧩 Por que usar?

Autocompletar: Ela sugere todas as classes do Tailwind enquanto você digita no HTML.
Preview de cor: Mostra um quadradinho com a cor real ao lado do nome da classe (ex: bg-blue-500).
Dicas de sintaxe: Avisa se você estiver usando classes que conflitam entre si.

📥 Instalação

Procure por Tailwind CSS IntelliSense na loja de extensões do seu VS Code.

🛠️ Requisito do Projeto

Para que a extensão funcione, seu projeto precisa ter um arquivo de configuração do Tailwind (gerado via npx tailwindcss init -p). Sem esse arquivo na raiz, a extensão não saberá quais classes sugerir.

Setup 08 - Testando APIs (Postman/Insomnia) 📡

Antes de escrever o código Vue para consumir uma API, é uma boa prática testar se essa API está funcionando e o que ela retorna.

🛠️ Ferramentas

Postman: A mais completa e tradicional.
Insomnia: Mais leve, limpa e focada em UX.
Thunder Client: Uma extensão direta dentro do VS Code (fácil e rápida).

🚀 Como Testar

Coloque a URL da API (ex: https://jsonplaceholder.typicode.com/users).
Selecione o método (GET, POST, etc).
Clique em Send.
Veja o formato do JSON que o servidor responde. Isso ajuda muito na hora de tipar seus dados no Vue!

💡 Dica

Sempre teste suas rotas de POST (Criação) e DELETE nestas ferramentas antes de tentar debugar no código frontend.

Setup 09 - Deploy: Colocando no Ar 🚢

Não guarde seu código apenas no seu computador! Coloque seu projeto no ar para que o mundo (e recrutadores) possa ver.

🌐 Plataformas Recomendadas

As plataformas Vercel e Netlify são especialistas em hospedar aplicações Vue com processo de deploy automático.

🚀 Passo a Passo (Vercel/Netlify)

Crie uma conta gratuita usando seu GitHub.
Clique em Add New Project.
Selecione o repositório do seu projeto Vue.
Clique em Deploy.

🔄 Deploy Contínuo (CI/CD)

O melhor dessas ferramentas é que, de agora em diante, toda vez que você fizer um git push para o GitHub, o seu site será atualizado automaticamente no ar em poucos segundos!

🧪 Domínio Personalizado

Ambas oferecem um link gratuito no formato meu-app.vercel.app. Caso queira, futuramente você pode comprar um domínio .com.br e vincular nestas mesmas ferramentas.

Sobre

Sobre o Curso

🎓 Desenvolvimento Frontend com Vue.js 3

Este curso foi projetado para capacitar desenvolvedores na criação de aplicações web modernas do tipo SPA (Single Page Application), focando na reatividade, componentização e escalabilidade oferecidas pelo ecossistema Vue.js.

🎯 Objetivos do Curso

Framework Progressivo --- Compreender a filosofia do Vue.js e como ele se integra a sistemas existentes ou serve de base para SPAs robustas.
Componentização Extrema --- Dominar a criação de interfaces modulares, reutilizáveis e fáceis de manter utilizando Single File Components (SFC).
Reatividade & Estado --- Implementar sistemas reativos eficientes com Composition API e gerenciamento de estado global com Pinia.
Integração & Deploy --- Consumir APIs RESTful com Axios, gerenciar rotas complexas com Vue Router e realizar builds otimizados para produção.

📚 Módulos de Aprendizado

Módulo 1 – Fundamentos do Frontend Moderno

Evolução do Frontend e Conceito de SPA
Setup de Ambiente com Vite e Node.js
Sintaxe Declarativa e Data Binding (v-bind, v-model)
Diretivas e Renderização Condicional

Módulo 2 – Componentização e Arquitetura

Criação e Registro de Componentes
Comunicação via Props e Emitters (emit)
Ciclo de Vida do Componente (Lifecycle Hooks)
Organização de Projetos e Boas Práticas

Módulo 3 – Roteamento e Estado Global

Configuração do Vue Router e Rotas Dinâmicas
Consumo de APIs REST com Axios
Gerenciamento de Estado Global com Pinia
Integração de Dados em Tempo Real

Módulo 4 – Profissionalização e Ecossistema

Estilização com Scoped CSS e introdução ao Tailwind
Arquitetura de Camadas (Services, Stores, Views)
Otimização de Build e Variáveis de Ambiente
Deploy Contínuo em Vercel ou Netlify

🛠️ Metodologia

Foco 100% prático e orientado a projetos (Learning by Doing). Ao longo das 16 aulas, você desenvolverá desde pequenos componentes até um sistema de tarefas estilo Kanban integrado a uma API, consolidando seu portfólio como desenvolvedor frontend.

Pronto para criar interfaces incríveis? Começar Agora

Roadmap do Projeto: Vue.js 3 🚀

Este documento rastreia a evolução do curso e o status de implementação de cada fase.

🕒 Fase 1: Planejamento & Setup

[x] Definição Syllabus (16 Aulas de Vue.js)
[x] Configuração mkdocs.yml e Metadados
[x] Reformulação de Páginas Globais (Sobre, Plano, Materiais, Roadmap)

✅ Fase 2: Conteúdo Pedagógico

[x] Implementação das 16 Aulas (Padrão Mermaid/Termynal)
[x] Criação dos 16 Conjuntos de Exercícios (5 itens/aula)
[x] Criação dos 16 Quizzes Interativos (10 questões/aula)
[x] Desenvolvimento dos 16 Mini-projetos

✅ Fase 3: Recursos Visuais & Slides

[x] Geração de 16 Slides Reveal.js (Padrão Vue.js)
[x] Padronização de Admonitions e Content Tabs
[x] Validação Visual e UX no Material Theme

✅ Fase 4: Entrega & Deploy

[x] Build Final mkdocs build
[ ] Configuração de Deployment automático (GitHub Actions)
[x] Verificação final de links e integridade

Status Atual: Concluído (Refatoração) Última Atualização: 22/02/2026

Materiais Complementares 📚

Bem-vindo à seção de materiais complementares do curso de Desenvolvimento Frontend com Vue.js. Aqui você encontra recursos adicionais para apoiar seus estudos e aprofundar seu conhecimento técnico.

Slides
- Acompanhe o conteúdo teórico com slides dinâmicos em Reveal.js.
Exercícios
- Pratique a reatividade, componentização e consumo de APIs.
Quizzes
- Valide seu aprendizado com 10 questões rápidas por aula.
Projetos
- Construa um ecossistema frontend completo para seu portfólio.
Ambiente
- Guias de instalação (Node.js, Vite, Vue DevTools).

Versão para Impressão

Esta página foi gerada automaticamente para impressão.

Desenvolvimento Frontend com Vue.js 💻

🎯 O Que Você Vai Aprender

📚 Jornada de Aprendizado (16 Aulas)

🧱 Fase 1: Fundamentos e Estrutura (Aulas 01-04)

🏗️ Fase 2: Componentes e Prática (Aulas 05-08)

🔌 Fase 3: Ecossistema e Integração (Aulas 09-12)

🚀 Fase 4: Profissionalização e Final (Aulas 13-16)

Plano de Ensino 📅

Ementa

Cronograma (16 Aulas)

Módulo 1: Fundamentos do Frontend Moderno

Módulo 2: Componentização e Arquitetura

Módulo 3: Roteamento, Estado e Integração

Módulo 4: Profissionalização e Boas Práticas

Avaliação

Aulas

Aula 01 – Introdução ao Frontend Moderno 🚀

🧠 Conceitos Fundamentais

A Evolução do Frontend

SPA vs MPA

📦 O que é Vue.js?

Pilares do Vue 3:

💻 Setup do Ambiente

📝 Exercício de Fixação

Aula 02 – Estrutura do Projeto Vue 3 🏗️

📂 Visão Geral do Diretório

🔍 O Ponto de Entrada: main.js

🧩 Single File Components (SFC)

Anatomia de um arquivo .vue:

💻 Explorando o Projeto

📝 Exercício

Macro Syntax Error

Macro Syntax Error

Aula 05 – Componentes e Props 🧩

🏗️ Criando seu Primeiro Componente

📥 Props: Comunicação Pai → Filho

🛡️ Validação de Props

🧠 Conceitos Chave

💻 Mão na Massa

📝 Exercício

Aula 06 – Eventos e Comunicação entre Componentes 📡

📤 Emitindo Eventos (Filho → Pai)

1. No Componente Filho (BotaoAcao.vue):

2. No Componente Pai (App.vue):

📊 Fluxo de Comunicação

🔄 Comunicação entre Irmãos

🧠 Boas Práticas

💻 Mão na Massa

📝 Exercício

Aula 07 – Ciclo de Vida e Hooks 🔄

🏗️ O Ciclo de Vida

🎣 Hooks mais comuns

onMounted

onUnmounted

🧠 Por que usar Hooks?

🧱 Organização de Pastas Profissional

💻 Prática Sugerida

📝 Exercício

Aula 08 – Projeto Prático I (Task Manager) 📋

🎯 Escopo do Projeto

🏗️ Estrutura de Componentes

💻 Implementação Passo a Passo

💡 Dicas de Implementação

🎨 Desafio Visual

📝 Checkpoint de Entrega

Aula 09 – Roteamento com Vue Router 🛣️

🏗️ Conceito de Rota

⚙️ Configuração Básica

🧩 Componentes do Router

⚡ Navegação Programática

🛡️ Guards de Rota

💻 Mão na Massa

📝 Exercício

Aula 10 – Consumo de API REST 🌐

🏗️ O que é uma API REST?

🚀 Usando Axios no Vue

📊 Fluxo da Requisição

🧱 Organização: O padrão Service

🧠 Tratamento de Erros e Loading

💻 Prática Sugerida

🔍 O Ponto de Entrada: `main.js`

Anatomia de um arquivo `.vue`:

1. No Componente Filho (`BotaoAcao.vue`):

2. No Componente Pai (`App.vue`):

`onMounted`

`onUnmounted`

🌐 Variáveis de Ambiente (`.env`)