Pular para conteúdo

Desenvolvimento de APIs e Microsserviços 💻

Domine a criação de arquiteturas modernas de backend com Microsserviços, modelagem RESTful, segurança com JWT e o desenvolvimento de interfaces SPA modernas.

Foco do Curso

Metodologia: Aprendizado prático focado na construção de ecossistemas Fullstack, integrando serviços backend robustos com frontends de alta performance.

🎯 O Que Você Vai Aprender

  • Microsserviços --- Aprenda a decompor monólitos, gerenciar comunicação entre serviços e utilizar API Gateways para escalabilidade. Ir para Módulo 1

  • Modelagem RESTful --- Domine endpoints, status codes, documentação com Swagger/OpenAPI e padrões de projeto para APIs profissionais. Ver Modelagem

  • Autenticação JWT --- Implemente segurança de ponta a ponta com JSON Web Tokens, proteção de rotas e controle de acesso RBAC. Ver Segurança

  • Frontends SPA --- Integre seu backend com Single Page Applications modernas, explorando componentes, estados e roteamento dinâmico. Ver Projetos

📚 Jornada de Aprendizado (16 Aulas)

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

🧱 Módulo 1: Serviços e Microsserviços (Aulas 01-04)

🏗️ Módulo 2: CRUD e Persistência (Aulas 05-08)

🔌 Módulo 3: Autenticação e Segurança (Aulas 09-11)

🚀 Módulo 4: Aplicações Web SPA (Aulas 12-16)

Começar Minha Jornada Fullstack

Plano de Ensino 📅

Curso: Desenvolvimento Frontend com Svelte

Ementa

Capacitar o aluno a desenvolver aplicações web modernas utilizando o framework Svelte, aplicando conceitos de reatividade, componentização, consumo de APIs REST, roteamento, gerenciamento de estado e boas práticas de desenvolvimento frontend.

Cronograma (16 Aulas)

Módulo 1: Fundamentos e Reatividade

  • Aula 01: Introdução ao Desenvolvimento Frontend Moderno
  • Aula 02: Introdução ao Svelte e Compilação
  • Aula 03: Estrutura de Projeto e Sintaxe Básica
  • Aula 04: Reatividade no Svelte ($:)

Módulo 2: Componentização e UI

  • Aula 05: Componentização e Props
  • Aula 06: Loops e Condicionais ({#if}, {#each})
  • Aula 07: Manipulação de Eventos e Formulários
  • Aula 08: Estilização e Escopo de CSS

Módulo 3: Ecossistema e Estado

  • Aula 09: Roteamento SPA na Prática
  • Aula 10: Stores e Gerenciamento de Estado
  • Aula 11: Consumo de API REST (Fetch/Async)
  • Aula 12: CRUD Completo com API

Módulo 4: Avançado e Produção

  • Aula 13: Ciclo de Vida e Performance
  • Aula 14: Boas Práticas e Arquitetura Frontend
  • Aula 15: Build, Deploy e Variáveis de Ambiente
  • Aula 16: Projeto Final (Dashboard/Admin)

Avaliação

  • Exercícios: 16 listas (5 questões cada: 2 Básicas, 2 Intermediárias, 1 Desafio).
  • Projetos: 16 mini-projetos práticos de fixação.
  • Quizzes: 16 testes de 10 perguntas com feedback.
  • Projeto Final: Desenvolvimento de uma aplicação completa avaliada no final do curso.

Aulas

Aulas do Curso 📚

Acesse aqui todo o conteúdo teórico dividido em módulos de aprendizado.

Aula 01 - Introdução ao Desenvolvimento Frontend Moderno 🌐

Objetivo

Objetivo: Compreender a evolução das tecnologias de frontend, entender o conceito de Single Page Applications (SPA) e como a reatividade mudou a forma de construir interfaces web modernas.

1. A Evolução do Frontend 🚀

O desenvolvimento web percorreu um longo caminho desde as páginas HTML estáticas dos anos 90 até as aplicações altamente interativas de hoje.

🏛️ Web 1.0: Páginas Estáticas (MPA)

Antigamente, cada clique em um link solicitava uma página inteira do servidor. * MPA (Multi-Page Application): Todo o processamento era feito no backend. * Experiência: Lenta, com "piscadas" brancas a cada navegação.

⚡ Web 2.0 e o Surgimento do AJAX

Com o AJAX, passamos a atualizar partes da página sem recarregá-la completamente. Isso abriu portas para redes sociais e apps como o Gmail.

📱 Era das SPAs (Single Page Applications)

Aplicações modernas carregam uma única página e usam JavaScript para trocar o conteúdo dinamicamente. * Vantagem: Fluidez de aplicativo nativo no navegador.

2. SPA vs MPA: Qual a diferença? ⚖️

Característica 🏛️ MPA (Tradicional) ⚡ SPA (Moderno)
Carregamento Páginas inteiras a cada clique Carrega uma vez, troca componentes
Processamento Focado no Servidor Focado no Navegador (Cliente)
Experiência Mais lenta, recarregamentos Fluida, transições suaves
SEO Nativo e fácil Exige configurações (SSR/SSG)

Fluxo de Comunicação (Mermaid)

graph LR
    subgraph "Modelo MPA"
        C1[Browser] -- "Solicita Pagina_A.html" --> S1[Servidor]
        S1 -- "Envia HTML Completo" --> C1
    end

    subgraph "Modelo SPA"
        C2[Browser] -- "Solicita dados (JSON)" --> S2[API]
        S2 -- "Envia apenas Dados" --> C2
        C2 -- "JavaScript renderiza UI" --> C2
    end

3. O Conceito de Reatividade 🧠

A reatividade é o "superpoder" dos frameworks modernos. Ela garante que, quando os dados mudam, a interface (UI) atualize automaticamente.

Conceito Chave

Em sistemas tradicionais, você precisava buscar o elemento no DOM e alterar seu texto manualmente. Em frameworks reativos como o Svelte, você apenas altera o valor da variável e o framework cuida do resto.

4. Frameworks Modernos: Onde o Svelte se encaixa? 🧩

Existem três grandes players no mercado (React, Vue, Angular), mas o Svelte trouxe uma abordagem revolucionária:

  • React/Vue: Usam o Virtual DOM (uma cópia da página na memória) para comparar mudanças no navegador.
  • Svelte: É um compilador. Ele transforma seu código em JavaScript puro e eficiente durante o build, eliminando a necessidade de uma "biblioteca" pesada rodando junto com o seu site.

5. Verificando o Ambiente 💻

Antes de começarmos, precisamos garantir que seu computador está pronto para o Svelte.

<div id="termynal" data-termynal>
    <span data-ty="input">node --version</span>
    <span data-ty="progress"></span>
    <span data-ty>v20.10.0</span>
    <span data-ty="input">npm --version</span>
    <span data-ty>10.2.3</span>
</div>

Atenção

Certifique-se de ter o Node.js instalado (versão 18 ou superior). Se não tiver, acesse o guia de Configuração de Ambiente.

6. Mini-Projeto: Seu Primeiro "App" Estático 🚀

Para sentir a diferença, vamos apenas visualizar a estrutura básica que o Vite (nossa ferramenta de build) cria para o Svelte.

  1. Abra seu terminal.
  2. Tente rodar o comando abaixo (não precisa criar agora, apenas observe):
$ npx create-vite meu-projeto --template svelte
$ cd meu-projeto
$ npm install
$ npm run dev

Dica

O Svelte é conhecido por ter "menos código". Você verá que um componente Svelte parece muito com uma página HTML normal, o que facilita muito o aprendizado.

7. Exercício de Fixação 📝

Responda para validar seu conhecimento:

  1. O que define uma Single Page Application (SPA)?
  2. Explique com suas palavras o que é reatividade no frontend.
  3. Qual o principal diferencial do Svelte em relação ao React e Vue (Dica: compile-time vs run-time)?

Próxima Aula: Vamos mergulhar no Svelte e entender como a compilação funciona! 🏗️

Aula 02 - Introdução ao Svelte 🏗️

Objetivo

Objetivo: Compreender o que torna o Svelte único, entender o processo de compilação e criar o seu primeiro projeto utilizando o Vite.

1. O que é o Svelte? 🧩

O Svelte é um framework para a criação de interfaces de usuário, mas com uma diferença fundamental: ele não carrega o peso de uma biblioteca no navegador.

Tradicionalmente, frameworks como React e Vue fazem a maior parte de seu trabalho no navegador do usuário (tempo de execução). O Svelte move esse trabalho para uma fase de compilação que acontece quando você constrói seu aplicativo.

🌟 Principais Vantagens:

  • Performance Absurda: O código resultante é JavaScript puro e altamente otimizado.
  • Menos Código: Você escreve muito menos para fazer a mesma coisa.
  • Sem Virtual DOM: Menos overhead de memória no navegador.

2. Como funciona a Compilação? ⚙️

Enquanto outros frameworks comparam o DOM "virtual" com o real para saber o que mudar, o Svelte gera código que sabe exatamente qual parte do DOM atualizar quando uma variável muda.

Fluxo de Trabalho (Mermaid)

graph TD
    subgraph "Frameworks Tradicionais (React/Vue)"
        A[Código JS] --> B[Biblioteca em Runtime]
        B --> C[Virtual DOM]
        C --> D[Patch no DOM Real]
    end

    subgraph "Svelte (O Compilador)"
        E[Código .svelte] --> F{Svelte Compiler}
        F -- "Build Time" --> G[JS Puro e Direto]
        G -- "Runtime" --> H[Update DOM Real]
    end

3. Virtual DOM vs Svelte 🥊

O Virtual DOM foi uma inovação incrível, mas ele consome recursos. O Svelte provou que podemos ser reativos sem precisar dele.

Característica Frameworks com VDOM Svelte
Peso do Bundle Maior (Apps precisam da biblioteca) Mínimo (Apenas seu código)
Mudanças Compara árvores de objetos Atualiza o nó específico via código gerado
Aprendizado Exige entender JSX ou Hooks complexos Quase HTML/JS puro

4. Criando seu Primeiro Projeto 🚀

Vamos usar o Vite, que é o "motor" mais moderno e rápido para desenvolvimento frontend.

<div id="termynal" data-termynal>
    <span data-ty="input">npm create vite@latest meu-primeiro-app -- --template svelte</span>
    <span data-ty="progress"></span>
    <span data-ty>✔ Done. Now run:</span>
    <span data-ty="input">cd meu-primeiro-app</span>
    <span data-ty="input">npm install</span>
    <span data-ty="input">npm run dev</span>
</div>

Nota

O comando acima cria uma estrutura base pronta para você começar a codar imediatamente.

5. Estrutura de Arquivos Base 📂

Após criar o projeto, você verá uma estrutura parecida com esta:

  • src/main.js: Ponto de entrada da aplicação.
  • src/App.svelte: O componente principal (onde a mágica acontece).
  • public/: Arquivos estáticos (imagens, ícones).
  • index.html: O arquivo HTML que carrega seu app.

6. Mini-Projeto: Ola Mundo com Estilo 🎨

Sua missão nesta aula é: 1. Criar seu projeto com o comando visto acima. 2. Abrir o arquivo App.svelte. 3. Alterar o texto dentro da tag <h1> para "Olá, Svelte!". 4. Rodar o projeto e ver a mudança no navegador.

Dica Visual

O VS Code com a extensão oficial do Svelte é obrigatório para ter coloração de código e sugestões inteligentes!

7. Exercício de Fixação 📝

  1. Por que dizemos que o Svelte é um compilador e não apenas uma biblioteca?
  2. Descreva uma desvantagem do uso do Virtual DOM.
  3. O que é o Vite e qual sua função no desenvolvimento com Svelte?

Próxima Aula: Vamos explorar a Sintaxe Básica e a Estrutura de um Componente! 📜

Aula 03 - Estrutura de Projeto e Sintaxe Básica 📜

Objetivo

Objetivo: Entender a anatomia de um componente Svelte, aprender como organizar seu código unindo lógica, estrutura e estilo em um só lugar, e dominar a exibição de dados dinâmicos.

1. Anatomia de um Componente Svelte 🧬

Diferente de outros frameworks onde você mistura HTML e JavaScript de forma complexa, um arquivo .svelte é extremamente organizado e intuitivo. Ele se divide em três partes principais:

1.1 O Script (<script>)

Onde fica toda a lógica JavaScript do seu componente (variáveis, funções, imports).

1.2 O Markup (HTML)

O corpo do seu componente. É HTML puro, com alguns "superpoderes" do Svelte.

1.3 O Style (<style>)

Onde você coloca o CSS. Importante: Por padrão, o CSS no Svelte é escopado, o que significa que ele só afeta o componente atual.

2. Visualizando a Estrutura (Mermaid) 📊

graph TD
    A[Arquivo .svelte] --> B["script (Lógica)"]
    A --> C["Markup (Estrutura HTML)"]
    A --> D["style (Aparência)"]

    subgraph "Exemplo Prático"
        B1["let nome = 'Mundo';"]
        C1["h1 Olá {nome} /h1"]
        D1["h1 { color: orange; }"]
    end

    B --- B1
    C --- C1
    D --- D1

3. Interpolação de Variáveis {} ✏️

Para exibir um valor do seu JavaScript no HTML, usamos as chaves {}. Isso é chamado de interpolação.

<script>
  let framework = "Svelte";
  let versao = 5;
</script>

<h1>Aprendendo {framework} na versão {versao}!</h1>

Conceito

Tudo o que estiver dentro das chaves é tratado como JavaScript puro. Você pode até fazer cálculos: {2 + 2} resultará em 4 na tela.

4. O Cinto de Utilidades: Estrutura do Projeto 📂

Ao abrir seu projeto no VS Code, você verá muitos arquivos. Vamos focar no essencial:

$ ls -F
node_modules/
public/
src/
  ├── assets/
  ├── lib/
  ├── App.svelte
  └── main.js
index.html
package.json
vite.config.js
  • src/App.svelte: É o coração da sua aplicação no início.
  • vite.config.js: Configurações da ferramenta que compila seu código.

5. Atributos Dinâmicos 🔗

Você também pode usar as chaves para definir atributos HTML, como o src de uma imagem ou o href de um link.

<script>
  let imagemSrc = "logo.png";
  let altText = "Logo do Svelte";
</script>

<img src={imagemSrc} alt={altText} />

6. Mini-Projeto: Perfil de Usuário Dinâmico 🚀

Sua missão agora: 1. No seu projeto, limpe o conteúdo de App.svelte. 2. No <script>, crie variáveis para nome, idade e urlFoto. 3. No markup, crie um card simples que exiba essas informações usando as chaves {}. 4. No <style>, adicione uma cor de fundo ao card.

Dica de Ouro

Se o nome da variável for o mesmo do atributo, você pode usar o atalho: <img {src} /> em vez de <img src={src} />.

7. Exercício de Fixação 📝

  1. Quais são as três seções principais de um arquivo .svelte?
  2. O que acontece com o CSS definido dentro de um componente Svelte?
  3. Como exibimos o resultado da soma de duas variáveis no HTML do Svelte?

Próxima Aula: Vamos aprender sobre o coração do Svelte: a Reatividade! ⚡

Aula 04 - Reatividade no Svelte ⚡

Objetivo

Objetivo: Dominar o conceito de reatividade, aprender a usar a sintaxe $: para criar variáveis dependentes e entender como o Svelte atualiza a interface de forma cirúrgica.

1. O que é Reatividade? 🔄

Reatividade é a capacidade de um sistema responder a mudanças de dados. No Svelte, a reatividade é baseada em atribuições.

Quando você faz count = count + 1, o Svelte sabe que a variável count mudou e agenda uma atualização para todos os lugares onde ela é usada no HTML.

2. Declarações Reativas ($:) 🧠

Às vezes, queremos que uma variável seja recalculada automaticamente sempre que outra variável mudar. Para isso, usamos o prefixo $:.

<script>
  let count = 0;

  // Esta variável SEMPRE será o dobro de count
  $: dobrado = count * 2;
</script>

<button on:click={() => count++}>Clique: {count}</button>
<p>O dobro é {dobrado}</p>

Conceito

O símbolo $: pode ser lido como "sempre que as variáveis usadas aqui mudarem, execute isto de novo".

3. Blocos Reativos 🧱

Você não está limitado a apenas variáveis. Você pode usar $: para executar blocos inteiros de código ou condicionais reativas.

<script>
  let count = 0;

  $: {
    console.log("O contador mudou para:", count);
    if (count >= 10) {
      alert("Você clicou muito!");
      count = 0;
    }
  }
</script>

4. O Fluxo de Reatividade (Mermaid) 📊

graph TD
    A[Ação do Usuário/Evento] --> B[Alteração de Variável]
    B --> C{Compilador Svelte}
    C -- "Detecta dependências ($:)" --> D[Atualiza Variáveis Derivadas]
    D --> E[Sincroniza com o DOM Real]
    E --> F[Interface Atualizada]

5. Dica Pro: Debugging Reativo 💻

Uma forma muito comum e rápida de debugar no Svelte é usar o $: com o console.log.

<div id="termynal" data-termynal>
    <span data-ty="input">$: console.log(minhaVariavel)</span>
    <span data-ty="progress"></span>
    <span data-ty>O contador mudou para: 1</span>
    <span data-ty>O contador mudou para: 2</span>
</div>

6. Mini-Projeto: Calculadora de Área de Retângulo 🚀

Vamos aplicar a reatividade em um exemplo prático: 1. No seu App.svelte, crie duas variáveis: largura e altura (inicie com 10). 2. Crie uma declaração reativa para area que multiplique as duas. 3. No markup, crie dois campos de input vinculados a essas variáveis (usaremos bind:value, que veremos mais a fundo na Aula 07, mas tente usar agora!). 4. Exiba a área na tela. Ela deve mudar instantaneamente enquanto você digita.

Curiosidade

O $: é na verdade uma sintaxe válida do JavaScript chamada "Labeled Statement". O Svelte apenas deu um novo significado a ela para facilitar sua vida!

7. Exercício de Fixação 📝

  1. O que dispara uma atualização reativa no Svelte?
  2. Para que serve o prefixo $:?
  3. Como você criaria um alerta que só aparece quando uma variável nome estiver vazia, usando reatividade?

Próxima Aula: Vamos aprender a organizar nosso código com a Componentização! 🧩

Aula 05 - Componentização 🧩

Objetivo

Objetivo: Entender o conceito de componentes, aprender a quebrar sua interface em partes menores e reutilizáveis, e descobrir como passar dados entre elas usando Props.

1. O que são Componentes? 🏗️

Componentes são blocos de construção independentes de uma aplicação. Em vez de criar um arquivo HTML gigante, dividimos o site em partes como Navbar, Sidebar, CardProduto e Footer.

Por que usar componentes?

  • Reutilização: Crie um botão uma vez e use em todo o site.
  • Organização: Mais fácil de encontrar e consertar bugs em arquivos pequenos.
  • Manutenção: Alterar o estilo de um componente reflete em todas as suas instâncias.

2. Hierarquia de Componentes (Mermaid) 📊

graph TD
    App[App.svelte] --> Nav[Navbar.svelte]
    App --> Hero[HeroSection.svelte]
    App --> List[ProductList.svelte]
    List --> Item1[ProductCard.svelte]
    List --> Item2[ProductCard.svelte]
    List --> Item3[ProductCard.svelte]
    App --> Foot[Footer.svelte]

3. Criando e Importando Componentes 📥

Para usar um componente dentro de outro, precisamos importá-lo na seção <script>.

<script>
  import Header from './Header.svelte';
  import Button from './lib/Button.svelte';
</script>

<Header />
<main>
  <p>Conteúdo principal aqui.</p>
  <Button />
</main>

$ mkdir src/lib
$ touch src/lib/Card.svelte
$ # Agora seu componente está pronto para ser editado!

4. Passando Dados via Props (Props) 🎁

As Props (propriedades) permitem que o componente pai envie informações para o componente filho. No Svelte, declaramos uma prop usando a palavra-chave export.

No filho (Card.svelte):

<script>
  export let titulo = "Título Padrão";
  export let preco;
</script>

<div class="card">
  <h2>{titulo}</h2>
  <p>Preço: R$ {preco}</p>
</div>

No pai (App.svelte):

<Card titulo="Sapatilha" preco={50} />
<Card titulo="Tênis" preco={150} />

Conceito

O export let torna a variável "pública", permitindo que quem usa o componente defina seu valor.

5. Slots: Injetando Conteúdo 📥

Às vezes queremos que o componente seja um "container" para outros elementos. Usamos a tag <slot /> para isso.

<!-- Box.svelte -->
<div class="box">
  <slot></slot> <!-- O conteúdo do pai aparecerá aqui -->
</div>

6. Mini-Projeto: Galeria de Cards 🚀

Vamos colocar em prática: 1. Crie um novo arquivo chamado Card.svelte na pasta lib. 2. Defina props para nome, imagem e descricao. 3. No seu App.svelte, importe este componente. 4. Renderize três instâncias do Card com informações de linguagens de programação diferentes.

Dica

Use nomes de arquivos com a primeira letra maiúscula (PascalCase) para componentes, ex: MeuComponente.svelte. Isso é uma convenção forte no mundo Svelte!

7. Exercício de Fixação 📝

  1. Qual o comando no Svelte para transformar uma variável em uma Prop?
  2. Como você importa um componente chamado Footer.svelte que está na mesma pasta?
  3. Para que serve a tag <slot />?

Próxima Aula: Vamos aprender a lidar com listas e condições usando Loops e Condicionais! 🔁

Aula 06 - Loops e Condicionais 🔁

Objetivo

Objetivo: Aprender a controlar o que aparece na tela usando lógica condicional e como exibir listas de dados de forma dinâmica e eficiente.

1. Renderização Condicional {#if} ❓

No Svelte, não usamos if dentro de tags de script para esconder elementos. Usamos blocos lógicos diretamente no HTML. Eles sempre começam com # e terminam com /.

<script>
  let logado = false;
</script>

{#if logado}
  <h1>Bem-vindo de volta!</h1>
  <button on:click={() => logado = false}>Sair</button>
{:else}
  <h1>Por favor, faça login.</h1>
  <button on:click={() => logado = true}>Entrar</button>
{/if}

2. Lógica de Decisão (Mermaid) 📊

graph TD
    A[Início do Bloco #if] --> B{Condição é verdadeira?}
    B -- Sim --> C[Renderiza conteúdo do IF]
    B -- Não --> D[Renderiza conteúdo do ELSE]
    C --> E[Fim do Bloco /if]
    D --> E

3. Iterando Listas com {#each} 📄

Para exibir uma lista de itens (como produtos ou tarefas), usamos o bloco {#each}.

<script>
  let frutas = ["Maçã", "Banana", "Morango", "Uva"];
</script>

<ul>
  {#each frutas as fruta}
    <li>{fruta}</li>
  {/each}
</ul>

Nota

Você também pode pegar o índice do item na lista: {#each frutas as fruta, i}. O i será 0, 1, 2...

4. O Fluxo de uma Lista Dinâmica 💻

<div id="termynal" data-termynal>
    <span data-ty="input">let tarefas = ['Estudar', 'Cozinhar']</span>
    <span data-ty="input">tarefas = [...tarefas, 'Dormir']</span>
    <span data-ty="progress"></span>
    <span data-ty># Svelte atualiza o DOM instantaneamente!</span>
</div>

5. Chaves nos Loops (Keyed each) 🔑

Sempre que a sua lista mudar (itens removidos ou reordenados), o Svelte precisa de uma forma de identificar cada item de forma única para manter a performance. Usamos um parêntese para passar a chave.

{#each produtos as produto (produto.id)}
  <Card {produto} />
{/each}

Dica de Performance

Sempre use uma chave única (como um ID do banco de dados) em vez do índice i se a sua lista puder ser alterada.

6. Mini-Projeto: Lista de Compras Inteligente 🚀

Sua missão: 1. Crie uma variável itensCompra que seja um array de objetos (ex: {id: 1, nome: 'Café', comprado: false}). 2. Use um {#each} para listar esses itens. 3. Use um {#if} dentro do loop para mostrar um emoji de "✅" se o item estiver comprado ou "❌" se não estiver. 4. Adicione um botão "Alternar" que mude o estado de comprado do item.

7. Exercício de Fixação 📝

  1. Como se fecha um bloco {#if} no Svelte?
  2. Qual a sintaxe para percorrer uma lista de usuarios e mostrar o nome de cada um?
  3. Para que serve a "chave" em um bloco {#each}?

Próxima Aula: Vamos aprender a interagir com o usuário através de Eventos e Formulários! ⌨️

Aula 07 - Eventos e Formulários ⌨️

Objetivo

Objetivo: Aprender a capturar interações do usuário, manipular eventos do DOM e dominar o Two-way Binding para criar formulários reativos e inteligentes.

1. Escutando Eventos com on: 👂

No Svelte, para escutar qualquer evento do DOM (como clique, movimento do mouse ou digitação), usamos a diretiva on:.

<script>
  let contador = 0;
  function incrementar() {
    contador += 1;
  }
</script>

<!-- Chamando uma função -->
<button on:click={incrementar}>
  Cliques: {contador}
</button>

<!-- Código inline -->
<button on:mouseenter={() => console.log('Mouse entrou!')}>
  Passe o mouse
</button>

2. Modificadores de Evento 🛠️

O Svelte facilita a vida permitindo adicionar modificadores aos eventos usando o caractere |.

  • on:click|once: O evento só dispara uma vez.
  • on:submit|preventDefault: Impede que a página recarregue ao enviar um formulário.
  • on:click|stopPropagation: Evita que o evento suba para os elementos pais.

3. Two-way Binding (bind:value) 🔄

Normalmente, a informação flui do JavaScript para o HTML. Com o bind:, fazemos a informação fluir nos dois sentidos. Se o usuário digita no input, a variável muda. Se a variável mudar no código, o input atualiza.

Fluxo de Dados (Mermaid)

graph LR
    subgraph "One-way (Padrão)"
        JS1[Variável JS] -- "Atualiza" --> UI1[Interface]
    end

    subgraph "Two-way (bind:value)"
        JS2[Variável JS] <--> UI2[Interface / Input]
    end
<script>
  let nome = "";
</script>

<input type="text" bind:value={nome} placeholder="Digite seu nome" />
<p>Seu nome é: {nome}</p>

4. Trabalhando com Grupos (Checkboxes e Radios) 🔘

O Svelte torna o trabalho com múltiplos inputs muito simples:

<script>
  let sabores = []; // Array para múltiplos checkboxes
  let tamanho = "M"; // String para rádio único
</script>

<label>
  <input type="radio" bind:group={tamanho} value="P" /> Pequeno
</label>
<label>
  <input type="radio" bind:group={tamanho} value="M" /> Médio
</label>

<p>Tamanho selecionado: {tamanho}</p>

5. Simulação de Formulário em Tempo Real 💻

<div id="termynal" data-termynal>
    <span data-ty="input">bind:value={email}</span>
    <span data-ty="progress"></span>
    <span data-ty># Digitando: r... i... c...</span>
    <span data-ty>email = 'ricardo@'</span>
    <span data-ty># Svelte valida instantaneamente!</span>
</div>

6. Mini-Projeto: Cadastro de Perfil 🚀

Sua missão hoje: 1. Crie um formulário com campos para nome, email e biografia (textarea). 2. Adicione um seletor (select) para o cargo (ex: Estudante, Professor, Desenvolvedor). 3. Use o bind:value em todos os campos. 4. Exiba abaixo do formulário um "Preview" do perfil que atualiza enquanto o usuário digita. 5. Adicione um botão de "Salvar" que limpe as variáveis ao ser clicado.

Atenção

Sempre use bind:value com cuidado em campos muito grandes para evitar problemas de performance, embora o Svelte lide muito bem com isso na maioria dos casos.

7. Exercício de Fixação 📝

  1. Como você impediria um formulário de recarregar a página ao ser enviado?
  2. Qual a diferença entre usar {valor} e bind:value={valor} em um input?
  3. Como capturamos vários valores selecionados em um grupo de checkboxes?

Próxima Aula: Vamos deixar tudo bonito com Estilização e Escopo de CSS! 🎨

Aula 08 - Estilização e Escopo de CSS 🎨

Objetivo

Objetivo: Entender como o Svelte isola estilos automaticamente, aprender a criar estilos globais quando necessário e dominar o uso de classes CSS dinâmicas.

1. CSS Escopado (Local) 🛡️

A característica mais amada do Svelte em relação ao estilo é o Escopo de CSS. Por padrão, qualquer estilo escrito dentro da tag <style> de um componente só afeta aquele componente.

Como funciona?

O Svelte adiciona uma classe única (ex: svelte-xyz123) a todos os elementos do seu componente e aos seus seletores CSS durante a compilação.

<style>
  p {
    color: blue; /* Só afetará parágrafos DESTE arquivo */
  }
</style>

<p>Eu sou azul!</p>

2. Visualizando o Escopo (Mermaid) 📊

graph TD
    A[Código Svelte] --> B{Compilador}
    B -- "HTML" --> C["p class='svelte-abc123'"]
    B -- "CSS" --> D["p.svelte-abc123 { color: blue }"]
    subgraph "Navegador"
        C
        D
    end

3. O Escopo Local na Prática 💻

<div id="termynal" data-termynal>
    <span data-ty="input"># O Svelte transforma seu CSS</span>
    <span data-ty="progress"></span>
    <span data-ty>.btn { color: red }</span>
    <span data-ty># vira:</span>
    <span data-ty>.btn.svelte-hash { color: red }</span>
</div>

4. Estilos Globais 🌍

Às vezes, você quer que um estilo afete elementos fora do componente ou seletores de bibliotecas externas. Para isso, usamos o modificador :global().

<style>
  /* Afeta todos os <h1> da aplicação */
  :global(h1) {
    font-family: 'Arial';
  }

  /* Afeta um .card mesmo se estiver dentro de um componente filho */
  .container :global(.card) {
    border: 1px solid silver;
  }
</style>

5. Classes Condicionais 💡

O Svelte oferece um atalho sensacional para adicionar ou remover classes baseadas em uma condição: a diretiva class:nome.

<script>
  let ativo = true;
</script>

<style>
  .destaque {
    background-color: yellow;
    font-weight: bold;
  }
</style>

<!-- Se 'ativo' for true, a classe 'destaque' é aplicada -->
<button 
  class:destaque={ativo} 
  on:click={() => ativo = !ativo}
>
  Alternar Destaque
</button>

6. Mini-Projeto: Toggle de Tema 🚀

Vamos criar um pequeno sistema de temas: 1. No seu componente, crie uma variável modoNoturno (booleano). 2. No <style>, defina uma classe .dark com fundo preto e texto branco. 3. No markup, use class:dark={modoNoturno} em uma div que envolva todo o conteúdo. 4. Crie um botão que inverta o valor de modoNoturno. 5. Adicione uma transição suave de cor usando CSS padrão.

Dica de Ouro

As variáveis CSS (--minha-cor) funcionam perfeitamente no Svelte e são ótimas para passar valores do JavaScript para o CSS de forma reativa!

7. Exercício de Fixação 📝

  1. Por que é seguro usar seletores simples como p ou h1 no Svelte?
  2. Como você aplicaria um estilo a um elemento que não pertence ao componente atual?
  3. Qual a vantagem da diretiva class:nome em relação à interpolação manual de classes?

Próxima Aula: Entrando no Módulo 3! Vamos aprender sobre o Roteamento SPA na Prática! 🗺️

Aula 09 - Roteamento SPA na Prática 🗺️

Objetivo

Objetivo: Compreender como funciona a navegação em uma Single Page Application, configurar rotas dinâmicas e aprender a transicionar entre páginas sem recarregar o navegador.

1. O que é Roteamento SPA? 🧭

Em um site tradicional, cada link leva a um novo arquivo HTML. Em uma SPA (Single Page Application), existe apenas um index.html. O roteador é o responsável por decidir qual componente mostrar baseado na URL que está no navegador.

Vantagens:

  • Velocidade: A transição é instantânea pois o HTML base já está carregado.
  • Estado Preservado: Você pode manter dados (como um player de música) tocando enquanto navega.

2. Fluxo de Navegação SPA (Mermaid) 📊

graph TD
    A[Usuário clica em Link] --> B[Roteador intercepta o clique]
    B --> C[URL muda no navegador]
    C --> D{Existe rota definida?}
    D -- Sim --> E[Destrói componente antigo]
    E --> F[Renderiza componente novo]
    D -- Não --> G[Mostra Página 404]

3. Instalando um Roteador 💻

No Svelte puro, uma das opções mais simples e robustas para SPAs é o svelte-spa-router.

<div id="termynal" data-termynal>
    <span data-ty="input">npm install svelte-spa-router</span>
    <span data-ty="progress"></span>
    <span data-ty>✔ Pacote instalado com sucesso!</span>
</div>

4. Configurando as Rotas 🛠️

Para configurar, criamos um mapa que liga "Caminhos" a "Componentes".

<script>
  import Router from 'svelte-spa-router';
  import Home from './routes/Home.svelte';
  import Sobre from './routes/Sobre.svelte';
  import NotFound from './routes/NotFound.svelte';

  const routes = {
    '/': Home,
    '/sobre': Sobre,
    '*': NotFound // Rota curinga para 404
  };
</script>

<Router {routes} />

Para navegar, usamos links comuns, mas com uma diretiva especial para garantir que o roteador trate o clique sem recarregar a página.

<script>
  import { link } from 'svelte-spa-router';
</script>

<nav>
  <a href="/" use:link>Início</a>
  <a href="/sobre" use:link>Sobre</a>
</nav>

Conceito

A diretiva use:link evita o comportamento padrão do navegador de recarregar a página completa.

6. Mini-Projeto: Mini Blog SPA 🚀

Sua missão: 1. Instale o svelte-spa-router. 2. Crie uma pasta src/routes. 3. Crie os componentes Home.svelte e Sobre.svelte dentro dessa pasta. 4. No App.svelte, configure o roteador e crie um menu de navegação simples. 5. Adicione um componente NotFound.svelte para lidar com caminhos inexistentes.

Dica

Você pode passar parâmetros na URL como /perfil/:id. O roteador entregará o id para o componente automaticamente!

7. Exercício de Fixação 📝

  1. Por que a página não "pisca" branco ao navegar em uma SPA?
  2. Qual a função da rota * no objeto de configuração?
  3. Como o roteador sabe qual componente exibir se só existe um arquivo index.html?

Próxima Aula: Vamos aprender a compartilhar dados entre componentes distantes com Stores e Estado! 📦

Aula 10 - Stores e Gerenciamento de Estado 📦

Objetivo

Objetivo: Aprender a compartilhar dados entre componentes distantes sem "perfurar" a hierarquia com Props, dominando o uso das Svelte Stores para gerenciar o estado global da aplicação.

1. O Problema: Prop Drilling 🪚

Quando um dado precisa sair do topo da aplicação e chegar a um componente muito profundo, temos que passar esse dado por todos os componentes intermediários. Isso se chama Prop Drilling e torna o código difícil de manter.

A Solução: Stores

Uma Store é um objeto que guarda um valor e permite que qualquer componente da aplicação se "inscreva" para receber atualizações quando esse valor mudar.

2. Writable Stores: O Coração do Estado 💓

A writable store permite que você leia e escreva dados.

// store.js
import { writable } from 'svelte/store';

export const contador = writable(0);

Como manipular:

  • .set(val): Define um novo valor.
  • .update(n => n + 1): Atualiza baseado no valor atual.
  • .subscribe(val => ...): Escuta as mudanças.

3. Fluxo de Dados com Store (Mermaid) 📊

graph LR
    S[Store Global] --> C1[Componente A]
    S --> C2[Componente B]
    S --> C3[Componente C]

    C2 -- "Atualiza Dado" --> S
    S -- "Notifica todos" --> C1
    S -- "Notifica todos" --> C3

4. O Atalho Mágico: O Cifrão $ ✨

Abrir e fechar inscrições manualmente com .subscribe dá trabalho e pode causar vazamento de memória. O Svelte tem um atalho: basta colocar um $ na frente do nome da store no HTML ou script.

<script>
  import { contador } from './store.js';
</script>

<h1>O valor atual é: {$contador}</h1>
<button on:click={() => $contador++}>Incrementar</button>

Conceito

O $ faz o Auto-subscription: ele se inscreve quando o componente aparece e se desinscreve automaticamente quando o componente é destruído.

5. Criando e Usando uma Store 💻

<div id="termynal" data-termynal>
    <span data-ty="input">import { writable } from 'svelte/store';</span>
    <span data-ty="input">export const user = writable({name: 'Visitante'});</span>
    <span data-ty="progress"></span>
    <span data-ty># No componente:</span>
    <span data-ty>$user = {name: 'Ricardo'};</span>
</div>

6. Mini-Projeto: Carrinho de Compras Global 🚀

Sua missão: 1. Crie um arquivo cartStore.js e exporte uma writable store chamada carrinho (iniciando como um array vazio). 2. No componente Produto.svelte, adicione um botão que dê um update na store adicionando um novo item. 3. No componente Navbar.svelte, exiba o total de itens no carrinho usando {$carrinho.length}. 4. Certifique-se de que, ao adicionar um produto, o número na Navbar atualize instantaneamente!

Dica

Você também pode criar Derived Stores (Lojas Derivadas) que dependem de outras stores. Ex: uma store totalPreco que calcula a soma de tudo que está no carrinho.

7. Exercício de Fixação 📝

  1. O que é Prop Drilling e como as Stores resolvem isso?
  2. Diferencie os métodos .set() e .update() de uma writable store.
  3. Qual a importância de usar o prefixo $ ao acessar uma store em um componente?

Próxima Aula: Vamos conectar nosso app ao mundo real com o Consumo de API REST! 🌐

Aula 11 - Consumo de API REST 🌐

Objetivo

Objetivo: Aprender a conectar sua aplicação Svelte ao mundo externo, realizando requisições HTTP para APIs reais, tratando estados de carregamento e erros de forma elegante com o bloco {#await}.

1. O que é uma API REST? 📡

Uma API (Application Programming Interface) permite que seu frontend "converse" com um servidor para buscar ou salvar dados. Usamos o protocolo HTTP e o formato JSON para essa conversa.

2. Fazendo requisições com fetch 🎣

O JavaScript moderno possui a função fetch nativa para fazer requisições. No Svelte, geralmente fazemos isso dentro de uma função async.

async function buscarDados() {
  const resposta = await fetch('https://api.exemplo.com/dados');
  if (resposta.ok) {
    return await resposta.json();
  } else {
    throw new Error('Falha ao carregar dados');
  }
}

3. Fluxo de Requisição Assíncrona (Mermaid) 📊

sequenceDiagram
    participant B as Browser (Svelte)
    participant A as API Externa
    B->>B: Inicia Estado 'Carregando'
    B->>A: GET /produtos
    A-->>B: Retorna JSON (Produtos)
    B->>B: Inicia Estado 'Sucesso'
    B->>B: Renderiza Lista na UI

4. O Superpoder do Svelte: {#await} ⏳

Diferente de outros frameworks onde você precisa criar várias variáveis de estado (loading, error, data), o Svelte tem um bloco nativo que resolve tudo isso de uma vez.

<script>
  let promessa = buscarDados();
</script>

{#await promessa}
  <p>⏳ Carregando dados...</p>
{:then dados}
  <ul>
    {#each dados as item}
      <li>{item.nome}</li>
    {/each}
  </ul>
{:catch erro}
  <p style="color: red">❌ Erro: {erro.message}</p>
{/await}

5. Simulação de Chamada de API 💻

<div id="termynal" data-termynal>
    <span data-ty="input"># Iniciando requisição para API...</span>
    <span data-ty="progress"></span>
    <span data-ty>GET https://api.api-ninjas.com/v1/quotes</span>
    <span data-ty>Status: 200 OK</span>
    <span data-ty># Dados recebidos! Atualizando a tela...</span>
</div>

6. Mini-Projeto: Gerador de Citações Aleatórias 🚀

Vamos colocar em prática: 1. Escolha uma API pública simples (ex: https://api.quotable.io/random ou https://dog.ceo/api/breeds/image/random). 2. No seu componente, crie uma função async que busque um dado dessa API. 3. Use o bloco {#await} para mostrar uma mensagem de carregamento e o resultado final. 4. Adicione um botão "Próxima" que chame a função novamente para atualizar o dado.

Dica

Ao clicar no botão "Próxima", basta fazer: promessa = buscarDados();. O Svelte detectará que a promessa mudou e voltará para o estado de carregamento automaticamente!

7. Exercício de Fixação 📝

  1. Para que serve a palavra-chave await no JavaScript?
  2. Quais são os três estados possíveis dentro de um bloco {#await}?
  3. Como o Svelte decide quando mostrar o bloco {:then}?

Próxima Aula: Vamos construir uma aplicação completa com CRUD Completo e Integração! 🏗️

Aula 12 - CRUD Completo com API 🏗️

Objetivo

Objetivo: Consolidar os conhecimentos de componentes, eventos, binding e APIs para construir uma aplicação funcional completa (CRUD), lidando com a persistência de dados em um servidor.

1. O que é um CRUD? 📝

CRUD é um acrônimo para as quatro operações básicas de gerenciamento de dados: * Create (Criar) -> POST * Read (Ler/Listar) -> GET * Update (Atualizar) -> PUT / PATCH * Delete (Apagar) -> DELETE

2. Ciclo de Vida do CRUD em uma SPA (Mermaid) 📊

graph TD
    A[Lista de Itens] -->|Clique em Novo| B[Formulário de Criação]
    B -->|Submit POST| C{Servidor}
    C -->|Sucesso| A
    A -->|Clique em Editar| D[Formulário de Edição]
    D -->|Submit PUT| C
    A -->|Clique em Excluir| E[Confirmação]
    E -->|Submit DELETE| C

3. Listagem e Exclusão 🗑️

Para listar, usamos o {#each}. Para excluir, chamamos uma função que faz o DELETE e atualiza a lista local.

async function excluir(id) {
  const res = await fetch(`https://api.com/itens/${id}`, { method: 'DELETE' });
  if (res.ok) {
    // Remove da lista local para atualizar a tela instantaneamente
    itens = itens.filter(i => i.id !== id);
  }
}

4. Criação e Envio de JSON 📤

Ao criar um item, precisamos enviar o body da requisição como uma string JSON e definir o cabeçalho correto.

async function salvar() {
  await fetch('https://api.com/itens', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ nome: novoNome })
  });
  // Recarregar a lista ou adicionar o item retornado
}

5. Simulação de Operação CRUD 💻

<div id="termynal" data-termynal>
    <span data-ty="input"># Enviando novo registro...</span>
    <span data-ty="progress"></span>
    <span data-ty>POST /tasks { "title": "Aprender Svelte" }</span>
    <span data-ty>Status: 201 Created</span>
    <span data-ty># Item adicionado com sucesso!</span>
</div>

6. Mini-Projeto: Gerenciador de Contatos 🚀

Vamos construir um sistema de contatos completo: 1. Listagem: Busque uma lista de contatos de uma API de testes (ex: JSONPlaceholder). 2. Criação: Adicione um formulário no topo para inserir o nome e telefone. 3. Remoção: Cada contato na lista deve ter um botão "Excluir". 4. Feedback: Mostre um aviso de "Salvando..." enquanto a API processa o pedido.

Dica de UX

Após uma operação de sucesso (como deletar), você pode simplesmente filtrar o array local em vez de fazer uma nova requisição GET. Isso deixa a aplicação muito mais rápida para o usuário!

7. Exercício de Fixação 📝

  1. Quais os métodos HTTP correspondentes a cada letra do acrônimo CRUD?
  2. Por que precisamos do header Content-Type: application/json ao enviar dados?
  3. Como você atualizaria um item da lista local após receber a confirmação de sucesso do servidor?

Próxima Aula: Vamos entender como otimizar a performance com o Ciclo de Vida e Performance! 🚀

Aula 13 - Ciclo de Vida e Performance ⏳

Objetivo

Objetivo: Entender os momentos em que um componente "nasce", "vive" e "morre" no navegador, e como usar as funções de ciclo de vida para gerenciar recursos e otimizar a performance da aplicação.

1. O que é o Ciclo de Vida? 🧬

Todo componente no Svelte passa por fases. Conhecer essas fases permite que você execute código no momento exato (ex: buscar dados assim que o usuário entra na página).

As principais funções:

  1. onMount: Executa logo após o componente ser renderizado pela primeira vez no DOM.
  2. onDestroy: Executa logo antes do componente ser destruído (removido da tela).
  3. beforeUpdate: Executa momentos antes do DOM ser atualizado.
  4. afterUpdate: Executa logo após o DOM ser sincronizado com os dados.

2. Fases do Componente (Mermaid) 📊

graph TD
    A[Início] --> B[Script Executado]
    B --> C[Renderização Initial]
    C --> D[onMount]
    D --> E{Dados mudaram?}
    E -- Sim --> F[beforeUpdate]
    F --> G[Sincroniza DOM]
    G --> H[afterUpdate]
    H --> E
    E -- Não --> I[Componente removido]
    I --> J[onDestroy]
    J --> K[Fim]

3. O Poder do onMount 🔌

O onMount é a função mais utilizada. É o lugar perfeito para: * Fazer chamadas de API. * Interagir com bibliotecas externas (como mapas ou gráficos). * Focar em um campo de input automaticamente.

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    console.log("O componente está pronto!");
    // Código de inicialização aqui
  });
</script>

4. Limpeza e Performance com onDestroy 🧹

Muitos bugs e lentidões acontecem porque esquecemos de "limpar" a bagunça ao sair de uma página.

import { onDestroy } from 'svelte';

const intervalo = setInterval(() => {
  console.log('Rodando...');
}, 1000);

// Se não limparmos, o intervalo continuará rodando para sempre!
onDestroy(() => {
  clearInterval(intervalo);
});

5. Simulação de Ciclo de Vida 💻

<div id="termynal" data-termynal>
    <span data-ty="input"># Componente carregado no DOM</span>
    <span data-ty="progress"></span>
    <span data-ty>onMount executado!</span>
    <span data-ty="input"># Usuário mudou de rota</span>
    <span data-ty>onDestroy: Limpando memória...</span>
    <span data-ty>✔ Componente removido com segurança.</span>
</div>

6. Mini-Projeto: Monitor de Performance (Timer) 🚀

Sua missão hoje: 1. Crie um componente que exiba um cronômetro na tela (segundos passando). 2. Use um setInterval iniciado dentro de uma função. 3. Garanta que o cronômetro pare e limpe o intervalo ao sair do componente usando onDestroy. 4. Adicione um onMount que mostre um alert("Bem-vindo ao Timer!") apenas uma vez.

Atenção

Não limpar timers ou listeners de eventos pode causar Memory Leaks, fazendo seu site ficar lento ou até travar o navegador do usuário após algum tempo de uso.

7. Exercício de Fixação 📝

  1. Qual a diferença entre o script principal do componente e a função onMount?
  2. Por que devemos usar onDestroy ao trabalhar com setInterval ou addEventListener globais?
  3. Quando o afterUpdate é disparado?

Próxima Aula: Vamos subir o nível com Boas Práticas e Arquitetura Frontend! 🏛️

Aula 14 - Boas Práticas e Arquitetura Frontend 🏛️

Objetivo

Objetivo: Elevar o nível do seu código frontend aplicando princípios de Clean Code, organizando seu projeto de forma profissional e garantindo que sua aplicação seja fácil de escalar e manter.

1. Organização de Pastas Profissional 📂

À medida que o seu app cresce, colocar tudo em src vira um caos. Uma arquitetura padrão ajuda a equipe a se localizar.

Estrutura Sugerida:

  • src/lib/: Componentes reutilizáveis (botões, inputs, cards).
  • src/routes/: Componentes que representam páginas inteiras.
  • src/stores/: Arquivos de gerenciamento de estado global.
  • src/assets/: Imagens, fontes e CSS global.
  • src/utils/: Funções auxiliares (formatadores de data, validadores).
$ ls -F src/
assets/
components/
routes/
stores/
utils/
App.svelte
main.js

2. Arquitetura de Projeto Svelte (Mermaid) 📊

graph TD
    A[App.svelte] --> R[Routes]
    R --> P1[Home.svelte]
    R --> P2[Perfil.svelte]
    P1 --> C[Components /lib]
    P2 --> C
    C --> S[Stores]
    P1 --> S
    P2 --> S

3. Padronização de Código (Naming) ✏️

  • Componentes: Use PascalCase.svelte (ex: UserCard.svelte).
  • Variáveis e Funções: Use camelCase (ex: let isLoading = true).
  • Stores: Use nomes descritivos (ex: authStore.js).
  • Pastas: Use kebab-case ou camelCase (ex: user-profile/).

4. Separação de Interesses (SOC) 🧠

Evite colocar lógica pesada de JavaScript dentro do HTML. Se uma função tem mais de 10 linhas, considere movê-la para um arquivo .js separado na pasta utils.

Princípio DRY

Don't Repeat Yourself: Se você está copiando e colando o mesmo código em três componentes, transforme esse código em um componente reutilizável ou em uma função utilitária.

5. Dica de Performance: Lazy Loading 💻

Não carregue tudo de uma vez. Carregue apenas o que o usuário vai ver.

// Exemplo de carregamento dinâmico de componente (conceitual)
const MeuComponentePesado = async () => (await import('./Pesado.svelte')).default;

6. Mini-Projeto: Refatorando o Caos 🚀

Sua missão: 1. Pegue o código de um dos mini-projetos anteriores. 2. Mova as funções de formatação de data ou moeda para um arquivo src/utils/formatters.js. 3. Mova o componente principal para src/routes/Main.svelte. 4. Certifique-se de que todos os imports continuam funcionando. 5. O App.svelte agora deve ser apenas o "orquestrador", importando o roteador ou o componente principal.

Dica

Um componente "limpo" deve ser lido como um livro. O <script> conta a história (lógica), o markup mostra a cena (estrutura) e o <style> dá o tom (aparência).

7. Exercício de Fixação 📝

  1. Por que devemos separar componentes em uma pasta lib ou components?
  2. O que significa o acrônimo SoC (Separation of Concerns)?
  3. Como o Clean Code ajuda no trabalho em equipe em um projeto frontend?

Próxima Aula: Hora de colocar o site no ar! Build, Deploy e Produção! 🚀

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

Objetivo

Objetivo: Aprender a transformar seu código de desenvolvimento em um pacote otimizado para produção, gerenciar segredos com variáveis de ambiente e colocar sua aplicação no ar para o mundo todo ver.

1. O que é o Build de Produção? 🏗️

Durante o desenvolvimento (npm run dev), o Vite prioriza a velocidade e facilita o seu trabalho. Para o usuário final, precisamos priorizar a performance e o tamanho do arquivo.

O comando npm run build faz: * Minificação: Remove espaços e encurta nomes de variáveis. * Tree Shaking: Remove código que não está sendo usado. * Otimização de Imagens: Reduz o peso dos arquivos estáticos.

2. Diferença entre Dev e Prod (Mermaid) 📊

graph LR
    subgraph "Desenvolvimento (Local)"
        D1[Código Sujo] --> D2[Vite Dev Server]
        D2 --> D3[Navegador]
    end

    subgraph "Produção (Mundo)"
        P1[Código Limpo] -- "npm run build" --> P2[Pasta /dist]
        P2 -- "Upload" --> P3[Servidor Web / CDN]
        P3 --> P4[Usuário Final]
    end

3. Variáveis de Ambiente (.env) 🔐

Nunca coloque senhas ou chaves de API diretamente no código. Use arquivos .env. No Svelte (via Vite), as variáveis devem começar com VITE_.

# Arquivo .env
VITE_API_URL=https://api.meusite.com
VITE_CHAVE_SECRETA=123456

// Acessando no código
const url = import.meta.env.VITE_API_URL;

4. Rodando o Build Localmente 💻

<div id="termynal" data-termynal>
    <span data-ty="input">npm run build</span>
    <span data-ty="progress"></span>
    <span data-ty>✔ Vite v5.0.0 built in 1.4s</span>
    <span data-ty># Uma pasta /dist foi criada!</span>
    <span data-ty="input">npm run preview</span>
    <span data-ty># Testando a versão final no localhost:4173</span>
</div>

5. Onde hospedar meu App? 🌍

Existem serviços que fazem o deploy automático assim que você envia o código para o GitHub:

  1. Vercel / Netlify: Os favoritos para Svelte. Basta conectar o repositório e pronto.
  2. GitHub Pages: Ótimo para sites estáticos e portfólios.
  3. Hospedagem Comum: Você pode apenas dar upload na pasta /dist via FTP.

Nota

A maioria desses serviços oferece um plano gratuito vitalício para projetos pequenos e estudantes.

6. Mini-Projeto: Launch Day 🚀

Sua missão final antes do projeto: 1. Crie um repositório no GitHub para o seu projeto atual. 2. Crie uma conta na Vercel ou Netlify. 3. Conecte seu repositório do GitHub ao serviço escolhido. 4. Veja o build acontecer automaticamente e compartilhe o link do seu site!

Dica de Segurança

Adicione o arquivo .env ao seu .gitignore. Você deve configurar as variáveis de ambiente manualmente no painel de controle da Vercel/Netlify.

7. Exercício de Fixação 📝

  1. Qual a função da pasta /dist gerada após o build?
  2. Por que devemos prefixar variáveis de ambiente com VITE_?
  3. O que é "Minificação" e como ela ajuda o usuário final?

Próxima Aula: O grande encerramento! Projeto Final do Curso 🏆

Aula 16 - Projeto Final 🏆

Objetivo

Objetivo: Aplicar TODO o conhecimento adquirido (Reatividade, Componentes, Stores, Roteamento e APIs) para construir uma aplicação web robusta, funcional e profissional utilizando Svelte.

1. O Desafio: "Svelte Connect" 🚀

Chegou a hora de consolidar seu aprendizado. Você deve escolher um dos temas abaixo para desenvolver sua aplicação final:

📑 Sistema de Tarefas (Task Manager)

  • Funcionalidades: Login, criar categorias, adicionar/remover tarefas, marcar como concluído e salvar tudo em uma API.

📊 Dashboard Administrativo

  • Funcionalidades: Visualização de métricas (gráficos), listagem de usuários de uma API, edição de perfis e controle de tema (Dark Mode).

🛒 Pequeno E-commerce

  • Funcionalidades: Catálogo de produtos vindo de API, filtro por categoria, carrinho de compras (Store) e resumo do pedido.

2. Mapa Mental do Curso (Mermaid) 📊

mindmap
  root((Svelte Master))
    Fundamentos
      Compilação
      Sintaxe .svelte
      Reatividade
    UI e Componentes
      Props
      Slots
      Eventos e Binding
      Estilo Escopado
    Ecossistema
      Roteamento SPA
      Svelte Stores
      Fetch API
    Produção
      Arquitetura
      Build e Otimização
      Deploy

3. Requisitos Obrigatórios 📋

Seu projeto deve conter pelo menos: - [ ] Componentização: Mínimo de 5 componentes reutilizáveis. - [ ] Reatividade: Uso de declarações reativas ($:) e binding de formulários. - [ ] Estado Global: Pelo menos uma Svelte Store (ex: Carrinho ou Perfil do Usuário). - [ ] Consumo de API: Realizar pelo menos uma operação de GET e uma de POST/PUT/DELETE. - [ ] Roteamento: Uso de roteador SPA com pelo menos 3 rotas diferentes. - [ ] Estilização: Uso correto de escopo de CSS e um layout responsivo (mobile-friendly).

4. Dicas para Excelência ✨

  • UX/UI: Use o que você aprendeu em Design para criar algo "limpo" e atraente.
  • Tratamento de Erros: Se a API falhar, não deixe a tela em branco! Mostre uma mensagem amigável para o usuário.
  • README: Capriche na documentação do projeto no GitHub.
  • Performance: Verifique no onDestroy se você limpou todos os recursos necessários.

5. Conclusão da Jornada 🎓

<div id="termynal" data-termynal>
    <span data-ty="input"># Finalizando o curso de Svelte...</span>
    <span data-ty="progress"></span>
    <span data-ty>✔ Módulo de Fundamentos Concluído</span>
    <span data-ty>✔ Módulo de Arquitetura Concluído</span>
    <span data-ty>✔ Projeto Final Publicado</span>
    <span data-ty>🚀 Parabéns, Desenvolvedor Svelte!</span>
</div>

6. Onde continuar? 📚

O Svelte é uma porta de entrada. Para os próximos passos, recomendamos: 1. SvelteKit: O framework Full-Stack oficial para aplicações de grande escala. 2. TypeScript: Para adicionar tipagem e segurança ao seu código. 3. Tailwind CSS: Para uma estilização rápida e moderna.

Mensagem Final

Dominar o Svelte é entender que o navegador deve trabalhar menos para o usuário ver mais. Continue praticando e construindo interfaces incríveis!

FIM DO CURSO 🚀🚀🚀 Desejamos muito sucesso na sua jornada como Desenvolvedor Frontend!

Exercícios

Exercícios Práticos 📝

Lista de exercícios para fixação de conceitos, divididos por aula.

Exercícios 01 - Introdução ao Frontend Moderno 🌐

🟢 Básicos

  1. Conceito: Diferencie MPA (Multi-Page Application) de SPA (Single Page Application) com suas palavras.
  2. História: Por que o surgimento do AJAX foi tão importante para a evolução das interfaces web?

🟡 Intermediários

  1. Processamento: Em uma SPA, onde ocorre a maior parte do processamento da interface? No servidor ou no navegador do cliente? Justifique.
  2. Reatividade: Explique o que acontece com a interface de um framework reativo quando o valor de uma variável vinculada a ela é alterado.

🔴 Desafio

  1. Análise Comparativa: Imagine que você está criando um site de notícias simples (apenas texto e imagens estáticas) e um painel de controle de uma corretora de valores (dados mudando a cada segundo).
    • Qual modelo (MPA ou SPA) você escolheria para cada um?
    • Quais seriam os prós e contras de usar uma SPA para o site de notícias em termos de SEO?

Exercícios 02 - Introdução ao Svelte 🏗️

🟢 Básicos

  1. Diferencial: Qual a principal diferença entre o Svelte e frameworks como React ou Vue em relação ao seu funcionamento?
  2. Vite: Quais as vantagens de usar o Vite para criar um projeto Svelte em vez de ferramentas mais antigas?

🟡 Intermediários

  1. Compilação: Explique por que o fato de o Svelte ser um "compilador" faz com que o pacote final enviado ao usuário seja menor.
  2. Virtual DOM: O Svelte utiliza Virtual DOM? Explique como ele atualiza as informações na tela de forma diferente.

🔴 Desafio

  1. Hands-on - Primeiro Projeto:
    • Use o comando npm create vite@latest para criar seu primeiro projeto Svelte.
    • Navegue até a pasta, instale as dependências e rode o projeto.
    • Abra o arquivo App.svelte, mude o texto do título para "Meu Primeiro App Svelte" e verifique a atualização instantânea no navegador.
    • Qual arquivo é o "ponto de entrada" (entry point) do JavaScript na estrutura gerada pelo Vite?

Exercícios 03 - Estrutura de Projeto e Sintaxe Básica 🧱

🟢 Básicos

  1. Anatomia: Quais são as 3 seções principais que compõem um arquivo .svelte?
  2. Interpolação: Como exibimos o valor de uma variável JavaScript dentro do HTML no Svelte?

🟡 Intermediários

  1. Atributos Dinâmicos: Como você passaria o valor de uma variável chamada caminhoImagem para o atributo src de uma tag <img>?
  2. Lógica no Script: Dentro da tag <script>, crie uma variável nome e uma função dizerOla() que imprima uma mensagem no console usando essa variável.

🔴 Desafio

  1. Mini-Componente de Perfil:
    • Crie um arquivo App.svelte que tenha variáveis para nome, idade e profissao.
    • No HTML (markup), exiba esses dados dentro de uma div com classe card.
    • Adicione um estilo básico na tag <style> para que o card tenha uma borda, sombra e um pouco de espaçamento (padding).
    • O que acontece se você declarar uma variável com let mas não usá-la em lugar nenhum do HTML? O Svelte dá algum aviso?

Exercícios 04 - Reatividade no Svelte ⚡

🟢 Básicos

  1. Gatilho: O que dispara uma atualização automática na interface do Svelte? (Dica: pense no operador =).
  2. Sintaxe $:: Para que serve o prefixo $: no Svelte?

🟡 Intermediários

  1. Variáveis Dependentes: Crie um exemplo de código onde uma variável total é sempre igual à soma de preco e taxa, usando reatividade.
  2. Logs Reativos: Como você usaria a sintaxe $: para imprimir o valor de uma variável no console toda vez que ela mudar?

🔴 Desafio

  1. Lógica de Negócio Reativa: Crie um componente que simule um carrinho de compras simples:
    • Tenha uma variável quantidade (inicie em 1) e uma variável precoUnitario (ex: 50.0).
    • Crie uma variável reativa subtotal que calcule o preço total.
    • Crie um bloco reativo $: { ... } que verifique: se o subtotal passar de 100, exiba um aviso (pode ser um texto na tela ou um console.log) dizendo "Você ganhou frete grátis!".
    • Adicione botões para aumentar e diminuir a quantidade.

Exercícios 05 - Componentização 🧩

🟢 Básicos

  1. Conceito: Por que dividir uma aplicação em componentes é melhor do que ter um único arquivo gigante?
  2. Importação: Escreva a linha de código necessária para importar um componente chamado Header.svelte que está dentro da pasta lib.

🟡 Intermediários

  1. Props: Como você declara uma variável em um componente filho para que o componente pai possa enviar um valor para ela?
  2. Slots: Imagine que você criou um componente Moldura.svelte. Como você faria para que qualquer conteúdo colocado dentro dele (como um texto ou outra imagem) apareça em um lugar específico do seu HTML?

🔴 Desafio

  1. Pai e Filho na Prática:
    • Crie um componente chamado Produto.svelte.
    • Ele deve receber 3 props: nome, preco e disponivel (booleano).
    • No seu App.svelte, use o componente Produto três vezes, passando dados diferentes para cada um.
    • No componente Produto, adicione um estilo que mude a cor do nome para cinza caso o produto não esteja disponivel.

Exercícios 06 - Loops e Condicionais 🔁

🟢 Básicos

  1. Sintaxe If: Como iniciamos e como fechamos um bloco condicional if no Svelte?
  2. Sintaxe Each: Escreva a estrutura básica de um bloco each para percorrer uma lista chamada cores.

🟡 Intermediários

  1. Else If: Crie um exemplo de bloco condicional que verifique uma variável nota e exiba: "Aprovado" (> 7), "Recuperação" (entre 5 e 7) ou "Reprovado" (< 5).
  2. Índice no Each: Como você faz para acessar a posição (índice 0, 1, 2...) de um item dentro de um loop each?

🔴 Desafio

  1. Lista de Filmes Reativa:
    • Crie um array de objetos chamado filmes, onde cada objeto tem titulo e visto (booleano).
    • Use um loop {#each} para listar todos os filmes.
    • Use um {#if} dentro do loop: se o filme já foi visto, risque o nome do filme (ou use um emoji ✅); se não, mostre um botão "Marcar como Visto".
    • Implemente a lógica do botão para que, ao clicar, o status visto desse filme mude para true e a tela atualize.

Exercícios 07 - Eventos e Formulários ⌨️

🟢 Básicos

  1. Evento Click: Qual a diretiva usada para escutar um clique em um botão no Svelte?
  2. Input Binding: Para que serve a diretiva bind:value e qual a diferença entre ela e apenas passar uma variável para o atributo value?

🟡 Intermediários

  1. Prevent Default: Como você impediria um formulário de recarregar a página ao ser enviado, usando apenas um modificador de evento do Svelte?
  2. Múltiplos Inputs: Imagine um conjunto de 3 botões do tipo "Radio" para escolher um tamanho (P, M, G). Como você vincularia todos eles a uma única variável chamada tamanhoSelecionado?

🔴 Desafio

  1. Formulário de Feedback Dinâmico:
    • Crie um formulário com um campo de nome e um comentario (textarea).
    • Crie uma variável reativa contagemCaracteres que mostre quantos caracteres o usuário já digitou no comentário.
    • Impeça o botão "Enviar" de ser clicado (atribute disabled) se o nome estiver vazio ou se o comentário tiver menos de 10 caracteres.
    • Ao enviar, exiba uma mensagem de sucesso na tela e limpe os campos.
    • O que acontece se você remover o bind:value e tentar ler os dados através de uma função? Qual abordagem é mais simples no Svelte?

Exercícios 08 - Estilização e Escopo de CSS 🎨

🟢 Básicos

  1. Escopo: O que significa dizer que o CSS no Svelte é "escopado" por padrão?
  2. Global: Como você define uma regra CSS dentro de um componente para que ela afete elementos em toda a aplicação?

🟡 Intermediários

  1. Classes Condicionais: Escreva a sintaxe da diretiva class: para aplicar a classe ativo apenas se a variável estaLigado for verdadeira.
  2. Variáveis CSS: Como você passaria o valor de uma variável JavaScript para uma propriedade CSS (ex: background-color) de forma que ela mude dinamicamente?

🔴 Desafio

  1. Card de Tema Dinâmico:
    • Crie um componente CardNoticia.svelte.
    • Adicione uma prop chamada urgente (booleano).
    • No <style>, crie uma classe .perigo com fundo vermelho e texto branco.
    • Use a diretiva class:perigo para que o card mude de aparência se a prop urgente for verdadeira.
    • Adicione uma animação de "piscar" (keyframes) que também só seja ativada caso a notícia seja urgente.
    • Como o Svelte lida com seletores de ID (ex: #meu-id) em comparação com seletores de classe? O escopo funciona da mesma forma?

Exercícios 09 - Roteamento SPA na Prática 🗺️

🟢 Básicos

  1. Definição: Por que uma SPA não recarrega a página ao clicar em um link interno?
  2. Instalação: Qual o comando para instalar o svelte-spa-router no seu projeto?

🟡 Intermediários

  1. Configuração: Como você define uma rota curinga (fallback) para exibir uma página "404 - Não Encontrado"?
  2. Links: Se você usar a tag <a href="/sobre">, a página irá recarregar. O que deve ser adicionado a essa tag para que o roteador trate a navegação?

🔴 Desafio

  1. Sistema de Navegação Dinâmico:
    • Crie um objeto routes que tenha as páginas: Home, Contato e Perfil.
    • No componente Perfil, use o parâmetro de rota para que a URL seja /perfil/:usuario.
    • Exiba na tela a mensagem: "Bem-vindo ao perfil de [usuario]!", onde [usuario] vem da URL.
    • Crie um menu lateral (Sidebar) que use um loop {#each} para gerar os links de navegação a partir de um array de objetos.

Exercícios 10 - Stores e Gerenciamento de Estado 📦

🟢 Básicos

  1. Utilidade: Em qual situação é melhor usar uma Store em vez de passar dados via Props?
  2. Atalho: O que o caractere $ faz quando colocado antes do nome de uma store em um componente Svelte?

🟡 Intermediários

  1. Update vs Set: Quando você deve usar o método .update() em vez do .set() em uma writable store?
  2. Inscrição Manual: Escreva o código para se inscrever (subscribe) manualmente em uma store chamada tema e salvar o valor em uma variável local. Não esqueça de mencionar como você faria para "desinscrever".

🔴 Desafio

  1. Sistema de Autenticação Centralizado:
    • Crie um arquivo auth.js com uma store user que guarda um objeto (pode iniciar como null).
    • Crie dois componentes: Login.svelte e Dashboard.svelte.
    • No Login, ao clicar em um botão, atualize a store com um usuário fictício (ex: {nome: 'Fulano', email: 'fulano@teste.com'}).
    • No App.svelte, use um {#if $user} para alternar entre mostrar o Login ou o Dashboard.
    • No Dashboard, exiba o nome do usuário vindo da store e adicione um botão "Logoff" que limpe a store.

Exercícios 11 - Consumo de API REST 🌐

🟢 Básicos

  1. Fetch: Qual o método HTTP padrão usado pela função fetch() se você não especificar nenhum?
  2. JSON: Por que precisamos chamar .json() após receber a resposta de um fetch?

🟡 Intermediários

  1. Bloco Await: Escreva a estrutura básica do bloco {#await} do Svelte, incluindo o estado de carregamento e o tratamento de erro.
  2. Async/Await: Transforme uma sequência de .then() e .catch() em uma função usando as palavras-chave async e await.

🔴 Desafio

  1. Buscador de Personagens:
    • Use a API pública do Rick and Morty (https://rickandmortyapi.com/api/character).
    • Crie um input de texto para o usuário digitar um nome.
    • Use o {#await} para buscar os personagens que coincidam com esse nome sempre que o usuário clicar em um botão "Buscar".
    • Exiba a imagem e o nome do personagem retornado.
    • Adicione uma verificação: se a API não encontrar nada, exiba "Nenhum personagem encontrado".

Exercícios 12 - CRUD Completo com API 🏗️

🟢 Básicos

  1. CRUD: O que significa cada letra da sigla CRUD?
  2. Métodos HTTP: Quais métodos HTTP (GET, POST, etc) são usados para Criar e Atender (Ler) dados?

🟡 Intermediários

  1. Headers: Por que é necessário enviar o cabeçalho Content-Type: application/json ao realizar um POST para uma API?
  2. Refresh Local: Por que é uma boa prática filtrar a lista local ao deletar um item em vez de fazer uma nova requisição de "Listar tudo" ao servidor?

🔴 Desafio

  1. Gerenciador de Estoque:
    • Imagine uma API de produtos: https://api-estoque.com/produtos.
    • Escreva o código da função salvarProduto(novoProduto) que faz um POST com os dados do produto.
    • Escreva o código da função atualizarPreco(id, novoPreco) que faz um PATCH enviando apenas o novo preço.
    • Como você lidaria com o estado de "Salvando..." no botão para evitar que o usuário clique duas vezes seguidas e envie dados duplicados?

Exercícios 13 - Ciclo de Vida e Performance ⏳

🟢 Básicos

  1. Mount: O que acontece quando o código é colocado dentro da função onMount?
  2. Destroy: Em qual momento a função onDestroy é executada?

🟡 Intermediários

  1. Memória: Por que é perigoso deixar um setInterval rodando sem limpá-lo no onDestroy?
  2. Atualização: Diferencie as funções beforeUpdate e afterUpdate. Em que cenário você usaria cada uma?

🔴 Desafio

  1. Relógio com Alarme:
    • Crie um componente que exiba o horário atual (HH:MM:SS) e atualize a cada segundo.
    • Use onMount para iniciar o cronômetro.
    • Adicione uma variável alarme (string no formato HH:MM).
    • Use um bloco reativo $: { ... } para verificar se o horário atual é igual ao alarme. Se for, mostre um alerta na tela.
    • Garanta que o intervalo seja limpo no onDestroy.
    • Como você otimizaria esse componente para que ele não consumisse processamento desnecessário se o usuário mudar de aba? (Pesquise sobre visibilitychange).

Exercícios 14 - Boas Práticas e Arquitetura Frontend 🏛️

🟢 Básicos

  1. Pastas: Qual a utilidade da pasta lib ou components em um projeto Svelte profissional?
  2. Nomenclatura: Qual o padrão de escrita (naming convention) recomendado para nomes de arquivos de componentes?

🟡 Intermediários

  1. SOC: Explique o princípio de Separação de Interesses (SoC) aplicado a um componente .svelte.
  2. REUSABILIDADE: Cite 3 elementos de uma aplicação que você transformaria em componentes reutilizáveis para seguir o princípio DRY.

🔴 Desafio

  1. Refatoração de Arquitetura: Imagine que você tem um arquivo App.svelte com 500 linhas de código, contendo: lógica de autenticação, o menu lateral, o rodapé e a lista de produtos.
    • Como você dividiria esse arquivo em pelo menos 4 novos arquivos?
    • Onde você colocaria a lógica de autenticação para que ela pudesse ser acessada por qualquer componente (em uma pasta utils, stores ou lib)?
    • Escreva como ficaria a nova estrutura de pastas do seu projeto após essa refatoração.

Exercícios 15 - Build, Deploy e Produção 🚀

🟢 Básicos

  1. Build: Qual o comando usado para gerar a versão final do seu site para o usuário?
  2. Variáveis .env: Qual o prefixo obrigatório para variáveis de ambiente que devem ser lidas pelo Svelte via Vite?

🟡 Intermediários

  1. Minificação: Explique por que o arquivo CSS ou JS final gerado pelo build parece estar "embaralhado" ou sem espaços.
  2. Hospedagem: Qual a diferença entre hospedar um site no GitHub Pages (estático) e em uma plataforma como Vercel ou Netlify (com integração com repositório)?

🔴 Desafio

  1. Preparação para Produção:
    • Imagine que seu app consome uma API de desenvolvimento (localhost:3000) e uma de produção (api.meusite.com).
    • Como você configuraria seus arquivos .env para que o código troque automaticamente a URL da API ao fazer o build?
    • Por que é uma falha de segurança gravíssima enviar o arquivo .env para o repositório público do GitHub?
    • Pesquise e explique o que são "Environment Variables" nas configurações de um painel como a Vercel.

Exercícios 16 - Projeto Final 🏆

🟢 Básicos

  1. Recapitulação: Cite os 3 conceitos do Svelte que você considerou mais impactantes durante o curso.
  2. Próximos Passos: O que é o SvelteKit e por que ele seria seu próximo passo de estudo?

🟡 Intermediários

  1. Análise de Requisitos: Pegue a proposta do seu Projeto Final. Liste quais serão os 3 principais componentes que você precisará criar para ele.
  2. Estado Global: Qual dado do seu projeto final será guardado em uma Svelte Store? Por que ele não pode ser apenas uma variável local?

🔴 Desafio

  1. Plano de Execução: Elabore um cronograma (roadmap) de como você vai construir seu projeto final:
    • Fase 1: Estrutura de pastas e navegação básica (Aulas 02, 09, 14).
    • Fase 2: Criação dos componentes visuais e estilização (Aulas 03, 05, 08).
    • Fase 3: Lógica de dados, Stores e integração com API (Aulas 04, 10, 11, 12).
    • Fase 4: Polimento, tratamento de erros e Deploy (Aulas 13, 15).
    • Quais ferramentas externas (bibliotecas de ícones, frameworks CSS, APIs de teste) você planeja utilizar?

Projetos

Projetos Práticos 🚀

Desenvolva aplicações reais para consolidar seu aprendizado.

Projeto 01 - Setup e Inspeção Moderno 🌐

Objetivo: Preparar o terreno para o desenvolvimento frontend e entender como os sites que visitamos são construídos "por baixo do capô".

🚀 Desafio

  1. Instalação do Node.js: Instale a versão LTS do Node.js em sua máquina.
  2. Verificação no Terminal:
    • Abra o terminal (cmd, powershell ou bash).
    • Digite node -v e npm -v para garantir que ambos estão instalados.
  3. Inspeção de Site (DévTools):
    • Acesse um site de sua preferência (ex: YouTube, GitHub ou o site do curso).
    • Clique com o botão direito e selecione "Inspecionar".
    • Vá na aba Network (Rede) e atualize a página.
    • Tente identificar se o site é uma SPA (ele carrega dados sem recarregar a página ao clicar em menus?) ou uma MPA (ele pisca a cada clique?).
  4. Editor de Código: Instale o VS Code e as extensões "Svelte for VS Code" e "Prettier".

📤 O que entregar?

  • Print (screenshot) do terminal mostrando as versões do Node e NPM.
  • Um texto curto (3 linhas) descrevendo se o site que você inspecionou parece ser uma SPA ou MPA e o porquê.
  • Print do VS Code com as extensões instaladas.

Projeto 02 - Meu Primeiro App (Counter 2.0) 🏗️

Objetivo: Criar e rodar seu primeiro projeto Svelte usando o Vite e entender a estrutura de pastas.

🚀 Desafio

  1. Criação: Execute o comando npm create vite@latest meu-primeiro-app -- --template svelte.
  2. Instalação: Entre na pasta e execute npm install.
  3. Execução: Rode o projeto com npm run dev.
  4. Modificação:
    • Abra o arquivo App.svelte.
    • Altere o contador para que ele aumente de 2 em 2 em vez de 1 em 1.
    • Adicione um novo botão "Zerar" que resete o contador para 0.
    • Mude a cor do texto do contador para uma cor de sua escolha no <style>.

📤 O que entregar?

  • Screenshot do seu navegador rodando o projeto com o botão "Zerar" visível.
  • O trecho de código (script e markup) que você alterou para o contador funcionar de 2 em 2.

Projeto 03 - Cartão de Visitas Digital 🧱

Objetivo: Praticar a sintaxe básica do Svelte, interpolação de variáveis e estilização de componentes.

🚀 Desafio

Crie uma página de "Cartão de Visitas" que contenha: 1. Estrutura: Use um arquivo .svelte único para o projeto. 2. JavaScript: - Variáveis para nome, bio, urlFoto e um array de linksRedesSociais. 3. Markup (HTML): - Exiba a imagem (usando src={urlFoto}). - Exiba o nome dentro de uma tag <h1>. - Exiba a biografia em um parágrafo. 4. Estilo (CSS): - Centralize o cartão na tela. - Adicione uma sombra (box-shadow) e uma borda arredondada. - Estilize os links para parecerem botões.

📤 O que entregar?

  • O arquivo App.svelte completo ou o link do repositório no GitHub.
  • Uma screenshot do cartão finalizado no navegador.

Projeto 04 - Calculadora de IMC Reativa ⚡

Objetivo: Aplicar os conceitos de reatividade automática e declarações reativas ($:) em um cenário real.

🚀 Desafio

Crie uma Calculadora de Índice de Massa Corporal (IMC): 1. Entradas: Crie dois sliders (input type="range") ou campos numéricos para Peso e Altura. 2. Cálculo Reativo: - Use a sintaxe $: para criar uma variável imc que calcula o valor automaticamente: peso / (altura * altura). 3. Classificação Reativa: - Use outro bloco $: para definir uma variável resultadoTexto (ex: "Abaixo do peso", "Peso Normal", "Sobrepeso"). 4. Interface: - Exiba os valores de peso e altura enquanto o usuário move os sliders. - Exiba o valor do IMC com apenas duas casas decimais (.toFixed(2)). - Mude a cor do texto do resultado dependendo da gravidade (ex: Vermelho para obesidade).

📤 O que entregar?

  • Arquivo App.svelte.
  • Screenshot da calculadora funcionando com um valor de IMC calculado.

Projeto 05 - Dashboard de Perfil 🧩

Objetivo: Praticar a criação de componentes independentes e a passagem de dados entre eles usando Props.

🚀 Desafio

Crie um dashboard de perfil que utilize pelo menos 3 componentes diferentes: 1. Componente Avatar.svelte: Recebe uma prop urlImagem e exibe a imagem circular. 2. Componente InfoUsuario.svelte: Recebe nome, cargo e localizacao e exibe esses dados estilizados. 3. Componente RedesSociais.svelte: Recebe um array de strings com links e os lista como ícones ou botões. 4. Main (App.svelte): Importe os 3 componentes e monte o layout do dashboard.

📤 O que entregar?

  • A pasta src/lib contendo os componentes criados.
  • Arquivo App.svelte.
  • Screenshot do dashboard finalizado.

Projeto 06 - Lista de Tarefas (To-Do List) 🔁

Objetivo: Dominar o controle de fluxo ({#if}, {#each}) para gerenciar listas dinâmicas de dados.

🚀 Desafio

Crie uma aplicação de Lista de Tarefas (To-Do List) funcional: 1. Estado: Crie um array de objetos tarefas (ex: [{id: 1, texto: 'Estudar', concluida: false}]). 2. Listagem: Use o {#each} para renderizar cada tarefa. 3. Lógica: - Se a tarefa estiver concluída, exiba-a com um risco (text-decoration: line-through). - Adicione um botão para "Remover" a tarefa da lista. - Adicione um botão para "Alternar" o status entre concluída/pendente. 4. Feedback: Se a lista estiver vazia, exiba uma mensagem amigável: "Uhul! Nenhuma tarefa pendente.".

📤 O que entregar?

  • Arquivo App.svelte com a lógica e o markup.
  • Screenshot demonstrando a lista com pelo menos uma tarefa concluída e a mensagem de "Lista Vazia" (ao remover tudo).

Projeto 07 - Simulador de Financiamento ⌨️

Objetivo: Aplicar o Two-way Binding (bind:value) para criar um formulário interativo de simulação financeira.

🚀 Desafio

Crie um simulador de financiamento de veículo: 1. Inputs: - Nome do cliente (texto). - Valor do veículo (número). - Valor da entrada (número). - Número de parcelas (select: 12x, 24x, 36x, 48x). 2. Lógica: - Use o bind:value em todos os campos. - Calcule o valor da parcela mensal (considere uma taxa de juros fixa de 2% ao mês sobre o saldo devedor). 3. Validação: - O botão "Simular" só deve aparecer se o valor da entrada for menor que o valor do veículo. - Se a entrada for zero, exiba um aviso: "Atenção: Financiamentos sem entrada possuem juros maiores.".

📤 O que entregar?

  • Arquivo App.svelte.
  • Screenshot com os dados preenchidos e o valor da parcela calculado na tela.

Projeto 08 - Mini Design System 🎨

Objetivo: Praticar a estilização de componentes, o isolamento de CSS e o uso de classes condicionais.

🚀 Desafio

Crie um "Mini Design System" composto por botões e alertas reutilizáveis: 1. Botão Estilizado: - Crie um componente Button.svelte que receba uma prop tipo (primario, secundario, perigo). - Use class:nomeClasse={condicao} para mudar a cor do botão baseado no tipo. 2. Alerta Dinâmico: - Crie um componente Alerta.svelte que tenha um <slot> para a mensagem. - Adicione uma animação de "fade-in" quando o alerta aparecer. 3. Página de Demonstração: - No App.svelte, coloque várias instâncias dos botões e alertas para demonstrar as variações de cores e estilos.

📤 O que entregar?

  • Pasta src/lib com os componentes de estilo.
  • Screenshot da página de demonstração mostrando as cores diferentes dos botões.

Projeto 09 - SPA de Catálogo de Filmes 🗺️

Objetivo: Implementar o roteamento em uma aplicação Svelte para simular a navegação entre múltiplas páginas.

🚀 Desafio

Crie um catálogo de filmes com 3 páginas: 1. Home (/): Exibe uma mensagem de boas-vindas e os filmes em destaque. 2. Sobre (/sobre): Explica o propósito do site. 3. Detalhes (/filme/:id): Exibe o ID do filme selecionado na URL. 4. Menu de Navegação: Deve estar visível em todas as páginas e usar use:link do svelte-spa-router.

📤 O que entregar?

  • Arquivo App.svelte com a configuração das rotas.
  • Screenshot da página de "Detalhes" mostrando um ID numérico na URL e no texto da página.

Projeto 10 - Sistema de Idiomas Global 📦

Objetivo: Usar Svelte Stores para gerenciar uma configuração que precisa estar acessível em todos os componentes (Internacionalização básica).

🚀 Desafio

Crie um seletor de idiomas que mude os textos do site globalmente: 1. Store: Crie uma store idioma (iniciando como 'pt'). 2. Componente Seletor.svelte: Um conjunto de botões que altera o valor da store. 3. Componentes Variados: - No Header, exiba "Bem-vindo" ou "Welcome". - No Footer, exiba "Contato" ou "Contact". 4. Auto-subscription: Use o prefixo $ para acessar o valor da store de forma simplificada.

📤 O que entregar?

  • Arquivo src/stores/idiomaStore.js.
  • Screenshot do site em Português e outro em Inglês (após clicar no botão).

Projeto 11 - Buscador de Repositórios GitHub 🌐

Objetivo: Integrar o frontend com a API real do GitHub, tratando estados de carregamento com o bloco {#await}.

🚀 Desafio

Crie um buscador de repositórios públicos: 1. Input: O usuário digita o nome de um usuário do GitHub. 2. Chamada de API: Busque os repositórios usando a URL: https://api.github.com/users/[USUARIO]/repos. 3. Interface: - Use {#await} para mostrar um ícone de carregamento ou o texto "Buscando...". - No bloco {:then}, liste o nome de cada repositório e a quantidade de estrelas (stargazers_count). - No bloco {:catch}, mostre a mensagem: "Usuário não encontrado ou erro de conexão".

📤 O que entregar?

  • Arquivo App.svelte contendo a função de fetch e o bloco await.
  • Screenshot da lista de repositórios carregada na tela.

Projeto 12 - Sistema de Gestão de Contatos 🏗️

Objetivo: Construir uma aplicação CRUD completa que interaja com uma API para persistir dados.

🚀 Desafio

Crie um gerenciador de contatos (Agenda): 1. Listagem (Read): Busque os contatos de uma API (ex: JSONPlaceholder). 2. Adicionar (Create): Um formulário que faz um POST e atualiza a lista. 3. Excluir (Delete): Um botão em cada contato que faz um DELETE e remove o item da tela. 4. Feedback: Desabilite o botão de enviar enquanto a requisição estiver em curso para evitar duplicidade.

📤 O que entregar?

  • Código completo do componente principal.
  • Screenshot do console do navegador (aba Network) mostrando a requisição POST sendo enviada com sucesso.

Projeto 13 - Timer com Histórico ⏳

Objetivo: Gerenciar recursos do navegador usando funções de ciclo de vida (onMount e onDestroy) para evitar vazamentos de memória.

🚀 Desafio

Crie uma ferramenta de produtividade (Pomodoro simplificado): 1. Timer: Um cronômetro regressivo que inicia em 25:00. 2. Ciclo de Vida: - O timer deve iniciar apenas quando o componente for montado. - O intervalo (setInterval) deve ser obrigatoriamente limpo quando o usuário mudar de rota ou fechar o componente. 3. Histórico: - Toda vez que o timer chegar a zero, adicione o horário da conclusão em um array de "Sessões Concluídas". - Exiba esse histórico em uma lista.

📤 O que entregar?

  • Arquivo App.svelte contendo as funções onMount e onDestroy.
  • Screenshot do timer rodando e da lista de sessões concluídas.

Projeto 14 - Reorganizando o Dashboard 🏛️

Objetivo: Aplicar padrões de arquitetura e organização de arquivos para tornar um projeto desorganizado em algo profissional.

🚀 Desafio

Refatore seu projeto da Aula 05 (Dashboard de Perfil) seguindo as boas práticas: 1. Estrutura: - Mova todos os componentes visuais para src/lib/components. - Mova a lógica de dados (como arrays de ícones ou formatadores) para src/utils. 2. Padronização: - Renomeie os arquivos para seguir o padrão PascalCase.svelte (ex: UserCard.svelte). 3. Componente Base: - No App.svelte, mantenha apenas a importação dos componentes e a montagem do layout. - Use um <Layout> decorativo se possível para envolver a aplicação.

📤 O que entregar?

  • Print da estrutura de pastas do VS Code aberta (src expandida).
  • O arquivo App.svelte refatorado e limpo.

Projeto 15 - Portfólio no Ar 🚀

Objetivo: Publicar um projeto real na internet, configurando variáveis de ambiente e o processo de build.

🚀 Desafio

Escolha seu melhor mini-projeto feito até aqui e coloque-o em produção: 1. GitHub: Suba o código para um novo repositório público. 2. Variáveis: Se seu projeto usa alguma API, crie um arquivo .env (ex: VITE_API_URL=...) e certifique-se de que ele está no .gitignore. 3. Deploy: - Conecte o repositório na Vercel ou Netlify. - Configure as "Environment Variables" no painel da plataforma. 4. Build: Verifique se o build foi concluído com sucesso e se o site está acessível via URL pública.

📤 O que entregar?

  • Link do seu projeto rodando (URL da Vercel/Netlify).
  • Link do repositório no GitHub.

Projeto 16 - Consolidação Final 🚩

Objetivo: Realizar a entrega final do projeto escolhido na Aula 16, aplicando todos os requisitos técnicos exigidos.

🚀 Desafio

Este é o momento de finalizar sua aplicação escolhida (Task Manager, Dashboard ou E-commerce): 1. Revisão Final: Verifique se todos os requisitos (Componentes, Reatividade, Store, API, Roteamento e Estilo) foram atendidos. 2. Polimento: Adicione feedback de carregamento (loading) e tratamento de erros amigáveis. 3. Documentação: Escreva um arquivo README.md no seu repositório explicando: - O que o projeto faz. - Como rodar localmente (npm install -> npm run dev). - Quais tecnologias foram usadas.

📤 O que entregar?

  • Link do repositório final no GitHub.
  • Vídeo curto (screencast de até 1 minuto) ou GIF demonstrando as principais funcionalidades da aplicação funcionando.
  • Screenshot da estrutura final de componentes e stores.

Quizzes

Quizzes de Conhecimento 🧠

Teste seus conhecimentos após cada aula.

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 das Aulas 📽️

Acompanhe o conteúdo visual das aulas.

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

De Monólitos a Sistemas Distribuídos

Agenda de Hoje 📅

  1. Panorama do Software Moderno
  2. Monólitos vs Microsserviços
  3. A Economia das APIs
  4. Escalabilidade Vertical vs Horizontal
  5. Cinto de Utilidades (Ferramentas)
  6. 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 📅

  1. Comunicação entre Serviços
  2. Síncrono vs Assíncrono
  3. O Papel do API Gateway
  4. Service Discovery
  5. Load Balancing
  6. 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 📅

  1. O que é REST?
  2. Recursos e URIs
  3. Verbos HTTP (GET, POST, PUT...)
  4. Status Codes
  5. JSON: A Linguagem das APIs
  6. 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 📅

  1. Por que documentar?
  2. OpenAPI vs Swagger
  3. Swagger UI e Editor
  4. O Poder dos Mocks
  5. Developer Experience (DX)
  6. 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 📅

  1. Camadas do Backend
  2. O Papel do Controller
  3. Rotas e Handlers
  4. Capturando Dados (Params/Body)
  5. Status Codes na Prática
  6. 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 📅

  1. Por que separar as coisas?
  2. Responsabilidades do Service
  3. O Fluxo: Controller -> Service
  4. Tratamento de Erros Profissional
  5. DTOs: Protegendo os Dados
  6. 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 📅

  1. Por que Bancos de Dados?
  2. PostgreSQL: O Robusto
  3. SQL Básico (SELECT, INSERT...)
  4. Relacionamentos (1:N, N:N)
  5. Camada de Persistence
  6. 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 📅

  1. Por que Validar Tudo?
  2. Validação vs Sanitização
  3. Schema Validation (Ex: Zod)
  4. Clean Code (Código Limpo)
  5. Tratamento de Erros Profissional
  6. 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 📅

  1. Autenticação vs Autorização
  2. O Fim das Sessões (Stateful)
  3. O que é JWT?
  4. Estrutura: Header, Payload, Signature
  5. Fluxo de Login completo
  6. 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.

5. Fluxo de Login 🌊

  1. 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 📅

  1. O que é RBAC? (Roles)
  2. Autenticação vs Autorização
  3. O Fluxo do Middleware
  4. Erros 401 vs 403
  5. Protegendo rotas na prática
  6. 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 📅

  1. O Problema do Token Curto ⏰
  2. Refresh Tokens (O que são?)
  3. CORS: Origens e Destinos
  4. Helmet: Headers de Aço
  5. Rate Limit: Contra Brute Force
  6. 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.

3. CORS: Cross-Origin Resource Sharing 🌍

  • "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 🏆

  1. Use HTTPS sempre.
  2. Valide TODAS as entradas do usuário.
  3. 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 📅

  1. O que são SPAs?
  2. Por que React?
  3. Vite: A Ferramenta Rápida
  4. JSX: JS + HTML
  5. Componentes e LEGO
  6. 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 📅

  1. O que é o Estado (State)?
  2. Hook useState
  3. Lidando com Cliques e Eventos
  4. Inputs Controlados
  5. 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);
  1. cont: O valor atual.
  2. setCont: A função que atualiza.
  3. 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 📅

  1. O que são Side Effects?
  2. Hook useEffect
  3. O Array de Dependências
  4. Buscando dados com fetch
  5. 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 🕒

  1. Montagem: Quando o componente nasce.
  2. Atualização: Quando um dado monitorado muda.
  3. 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 📅

  1. O que são SPAs?
  2. Multi-páginas (Simuladas)
  3. Componentes de Rota
  4. Navegação (Link e useNavigate)
  5. 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 📅

  1. O Desafio Final 🔗
  2. Requisitos Técnicos
  3. Portfólio no GitHub
  4. Onde continuar estudando?
  5. 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

Configuração do Ambiente 🛠️

Siga os guias abaixo para preparar seu computador para o desenvolvimento Svelte moderno.

[!TIP] Dica: Comece sempre pelo Setup 01. Sem o Node.js, as outras ferramentas não funcionarão corretamente.

Setup 01: Node.js e Gerenciadores de Pacotes 🟢

O Svelte requer o ambiente Node.js para rodar o compilador e as ferramentas de build (Vite).

1. Instalando o Node.js

  1. Acesse o site oficial: nodejs.org.
  2. Baixe a versão LTS (Long Term Support) - é a mais estável.
  3. Siga o instalador padrão do seu Sistema Operacional.

2. Verificando a Instalação

Abra o seu terminal (CMD, PowerShell ou Terminal do Linux/Mac) e digite: 

node -v
npm -v
Você deverá ver as versões instaladas (ex: v20.x.x).

3. Gerenciadores Alternativos (Opcional)

Embora o npm venha instalado, muitos desenvolvedores preferem o PNPM por ser mais rápido e economizar espaço em disco. 

npm install -g pnpm

4. NVM (Dica de Pro) 💡

Se você trabalha em vários projetos, instale o NVM (Node Version Manager). Ele permite trocar de versão do Node com um comando. - Windows: nvm-windows. - Linux/Mac: nvm.

Próximo Passo: Instalar o VS Code e Extensões 💻

Setup 02: VS Code e Extensões 💻

O Visual Studio Code é a ferramenta recomendada para desenvolver com Svelte devido ao excelente suporte da comunidade.

1. Instalando o VS Code

  1. Baixe em: code.visualstudio.com.
  2. Instale seguindo as recomendações padrões.

2. Extensões Essenciais para Svelte 🧩

Abra o menu de extensões (Ctrl+Shift+X) e instale:

  1. Svelte for VS Code: Oferece realce de sintaxe e autocompletar. (Obrigatória!)
  2. Prettier - Code formatter: Para organizar seu código automaticamente.
  3. Tailwind CSS IntelliSense: Se você for usar Tailwind.
  4. Error Lens: Ajuda a ver erros direto na linha de código.

3. Configurando o Formatter

Para que o Prettier formate seus arquivos .svelte corretamente: 1. Abra as configurações (Ctrl+,). 2. Pesquise por Default Formatter. 3. Selecione Prettier - Code Formatter. 4. Ative a opção Format on Save.

4. Temas Recomendados (Opcional)

  • One Dark Pro
  • Dracula Official
  • Catppuccin

Próximo Passo: Vite e Estrutura de Projeto 🚀

Setup 03: Vite e Estrutura de Projeto ⚡

O Svelte moderno utiliza o Vite para um desenvolvimento extremamente rápido.

1. Criando um Novo Projeto

No terminal, na pasta onde deseja salvar seus estudos, execute: 

npm create vite@latest meu-projeto-svelte -- --template svelte
1. Entre na pasta: cd meu-projeto-svelte. 2. Instale as dependências: npm install. 3. Rode o projeto: npm run dev.

2. Entendendo a Estrutura 📂

  • node_modules/: Onde ficam as bibliotecas instaladas.
  • public/: Arquivos estáticos (imagens, ícones).
  • src/: Onde você passará 99% do seu tempo.
    • App.svelte: O componente principal.
    • main.js: O ponto de entrada que inicia o Svelte.
  • package.json: A lista de dependências e scripts do projeto.

3. Versionamento com Git

Sempre inicie um repositório Git para seus projetos: 

git init
git add .
git commit -m "Primeiro commit"

4. SvelteKit vs Svelte puro

Neste curso, focamos no Svelte puro com Vite para aprender a base. Projetos maiores e complexos (com rotas no servidor) usam o SvelteKit.

Próximo Passo: DevTools e Debugging 🔍

Setup 04: Svelte DevTools e Debugging 🔍

Para debugar aplicações Svelte de forma eficiente, as ferramentas nativas do navegador são ótimas, mas a extensão oficial do Svelte é ainda melhor.

1. Svelte DevTools

Esta extensão adiciona uma aba "Svelte" ao seu console do desenvolvedor (F12), permitindo inspecionar o estado e as props de cada componente em tempo real. - Chrome: Link Chrome Web Store. - Firefox: Link Firefox Add-ons.

2. Inspecionando Elementos

Com o DevTools instalado: 1. Abra seu projeto rodando em localhost:5173. 2. Abra o console (F12). 3. Vá na aba Svelte. 4. Selecione um componente na árvore para ver suas variáveis atuais.

3. O comando console.log() 📢

No Svelte, você pode usar o log dentro das tags reativas para rastrear mudanças: 

<script>
  let contador = 0;
  $: console.log("O contador mudou para:", contador);
</script>

4. Error Lens no VS Code

Se você seguiu o Setup 02, o Error Lens mostrará erros de sintaxe instantaneamente na tela, sem que você precise rodar o código para descobrir o erro.

Finalizado! Agora seu ambiente está pronto para brilhar com Svelte. ✨

Sobre

Sobre o Curso

🎓 Desenvolvimento Frontend com Svelte

Este curso foi projetado para capacitar desenvolvedores na criação de interfaces web modernas, rápidas e eficientes utilizando o Svelte, um dos frameworks mais inovadores do ecossistema JavaScript.

🎯 Objetivos do Curso

  • Reatividade Nativa --- Compreender como o Svelte move o trabalho para o tempo de compilação, eliminando o Virtual DOM.

  • Componentização --- Dominar a criação de componentes reutilizáveis, encapsulamento de estilos e comunicação entre elementos.

  • Gerenciamento de Estado --- Aprender a utilizar Svelte Stores para gerenciar dados globais de forma simples e poderosa.

  • Integração com APIs --- Conectar o frontend a serviços externos, realizando operações CRUD e tratando estados de carregamento.

📚 O Que Você Vai Aprender

Módulo 1 – Fundamentos e Reatividade

  • Evolução do Frontend e SPA
  • O compilador Svelte vs Virtual DOM
  • Sintaxe Básica e Interpolação
  • Declarações Reativas ($:)

Módulo 2 – Componentização e UI

  • Props e Slot System
  • Loops (#each) e Condicionais (#if)
  • Eventos e Two-way Binding
  • Estilização Local e Global

Módulo 3 – Ecossistema e Estado

  • Roteamento SPA
  • Writable e Derived Stores
  • Consumo de Fetch API e Async/Await
  • Implementação de CRUD Completo

Módulo 4 – Avançado e Produção

  • Ciclo de Vida (onMount, onDestroy)
  • Performance e Lazy Loading
  • Arquitetura de Projetos Frontend
  • Build, Deploy e Variáveis de Ambiente

🛠️ Metodologia

Foco 100% prático. Cada aula introduz um conceito que é imediatamente aplicado em um mini-projeto. Ao final, você terá desenvolvido uma aplicação administrativa completa, pronta para o mercado.

Pronto para dominar o Svelte? Começar Agora

Roadmap do Projeto: Frontend com Svelte 🚀

Este documento rastreia a evolução do curso.

✅ Fase 1: Planejamento (Concluído)

  • [x] Definição Syllabus (16 Aulas)
  • [x] Escolha do Stack (Svelte + Vite)
  • [x] Configuração MkDocs Material com Paleta Teal/Amber

✅ Fase 2: Conteúdo Base (Em Progresso)

  • [/] Criação das 16 Aulas (Markdown + Mermaid)
  • [/] Criação dos 16 Quizzes (Interativos)
  • [/] Criação dos 16 Conjuntos de Exercícios (2B, 2I, 1D)
  • [/] Criação dos 16 Slides (RevealJS)

✅ Fase 3: Projetos e UX

  • [ ] Definição dos 16 Projetos evolutivos
  • [ ] Implementação de exemplos TermynalJS
  • [ ] Diagramação Mermaid corrigida

🚀 Fase 4: Lançamento e Manutenção

  • [ ] Build Final --strict
  • [ ] Deploy GitHub Pages (gh-pages)
  • [ ] Testes de UX e Acessibilidade

Status Atual: Refatoração em Progresso Última Atualização: 22/02/2026

Materiais Complementares 📚

Bem-vindo à seção de materiais complementares do curso de Desenvolvimento Frontend com Svelte. 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.

  • Exercícios

    • Pratique os conceitos de reatividade e componentes.

  • Quizzes

    • Valide seu aprendizado com testes rápidos por módulo.

  • Projetos

    • Construa um ecossistema completo para seu portfólio.

  • Ambiente

    • Guias de instalação (Docker, IDEs, Postman).

Versão para Impressão

Esta página foi gerada automaticamente para impressão.