Pular para conteúdo

Desenvolvimento Frontend com Angular 💻

Domine a criação de aplicações web modernas com Angular, explorando desde a arquitetura clássica com NgModules até as inovações modernas com Standalone Components, RxJS e APIs REST.

Foco do Curso

Metodologia: Aprendizado prático focado na construção de Single Page Applications (SPA) de alta performance, seguindo as melhores práticas do mercado e do Google.

🎯 O Que Você Vai Aprender

  • Fundamentos e CLI --- Conheça o ecossistema Angular, instale o CLI e crie sua primeira aplicação SPA com a estrutura profissional. Ir para Módulo 1

  • Data Binding e Diretivas --- Domine a manipulação dinâmica de dados com Interpolação, Event Binding e Diretivas Estruturais como *ngIf e *ngFor. Ver Data Binding

  • Standalone Components --- Aprenda a nova forma de desenvolver com Angular 15+, eliminando a complexidade dos NgModules e otimizando o build. Ver Angular Moderno

  • RxJS e HTTP Client --- Consuma APIs de forma reativa, utilizando Observables, Pipes e o poderoso HttpClient para integrações robustas. Ver Reatividade

📚 Jornada de Aprendizado (16 Aulas)

O curso é estruturado para levar você do zero ao deploy profissional.

🧱 Módulo 1: Fundamentos e Estrutura (Aulas 01-04)

⚙️ Módulo 2: Core e Comunicação (Aulas 05-07)

🚀 Módulo 3: Angular Moderno (Aulas 08-11)

🏆 Módulo 4: Profissional e Deploy (Aulas 12-16)

Começar Minha Jornada Angular

Plano de Ensino 📅

Curso: Desenvolvimento Frontend com Angular

Ementa

  1. Fase 1: Abordagem Clássica (NgModule): Arquitetura, Componentes, Data Binding, Diretivas e Serviços.
  2. Fase 2: Angular Moderno (Standalone): Standalone Components, Forms, API consumption, RxJS e Arquitetura Avançada.

Cronograma (16 Aulas)

Módulo 1: Fundamentos e Estrutura

  • Aula 01: Introdução ao Angular e Ecossistema (SPA, CLI, Node.js)
  • Aula 02: Estrutura do Projeto e Componentes (Visão Clássica)
  • Aula 03: Data Binding (Interpolação, Property, Event, Two-way)
  • Aula 04: Diretivas Estruturais (ngIf, ngFor) e de Atributo

Módulo 2: Core e Comunicação

  • Aula 05: Comunicação entre Componentes (@Input, @Output, EventEmitter)
  • Aula 06: Serviços e Injeção de Dependência (ProvidedIn: 'root')
  • Aula 07: Roteamento no Modelo Clássico (RouterModule)

Módulo 3: Angular Standalone e Formulários

  • Aula 08: Standalone Components (O novo padrão do Angular 15+)
  • Aula 09: Roteamento Standalone (provideRouter, loadComponent)
  • Aula 10: Formulários (Reactive Forms e Template-driven)
  • Aula 11: HTTP Client e Integração com APIs REST

Módulo 4: Avançado, RxJS e Deploy

  • Aula 12: RxJS e Programação Reativa (Observables, Subjects)
  • Aula 13: Arquitetura e Organização Profissional (Core/Shared/Features)
  • Aula 14: Estilização Moderna e Angular Material
  • Aula 15: Build de Produção, Deploy e Performance
  • Aula 16: Projeto Final Integrador (CRUD Completo)

Avaliação

  • Exercícios: 16 listas focadas em lógica e implementação Angular.
  • Projetos: 16 etapas de construção de um sistema real.
  • Quizzes: 16 avaliações de conceitos-chave.
  • Projeto Final: Uma aplicação SPA completa publicada em produção.

Aulas

Aula 01: Introdução ao Angular e Ecossistema 🅰️

Nesta aula, vamos mergulhar no universo do Angular, entender o conceito de Single Page Applications (SPA) e preparar nosso ambiente para criar a primeira aplicação profissional.

🌐 O que é SPA (Single Page Application)?

Uma SPA é uma aplicação web que carrega apenas uma única página HTML e atualiza dinamicamente o conteúdo à medida que o usuário interage. Diferente dos sites tradicionais, não há recarregamento total da página (refresh).

Conceito Chave

Em uma SPA, a navegação entre visualizações ocorre no lado do cliente (browser), o que proporciona uma experiência de usuário muito mais fluida e rápida, similar a um aplicativo mobile.

🏛️ Arquitetura do Angular

O Angular segue uma arquitetura baseada em Componentes, onde cada parte da interface é uma peça independente.

graph TD
    A[Aplicação Angular] --> B[Componente Raiz]
    B --> C[Home Component]
    B --> D[Navbar Component]
    B --> E[Footer Component]
    C --> F[Card Component]
    C --> G[List Component]

🛠️ Preparando o Ambiente

Para começar, precisamos instalar o Node.js e o Angular CLI.

1. Instalação com Termynal

# Instalando o Angular CLI globalmente
$ npm install -g @angular/cli

# Verificando a instalação
$ ng version

🚀 Prática: Primeiro Projeto

Vamos criar e rodar nosso primeiro projeto Angular utilizando o terminal.

Dica de Produtividade

Use o comando ng new seguido pelo nome do projeto. O Angular CLI cuidará de toda a estrutura inicial para você.

# 1. Criar projeto
$ ng new meu-primeiro-angular

# 2. Entrar na pasta
$ cd meu-primeiro-angular

# 3. Executar o servidor
$ ng serve --open

📑 Estrutura do Projeto

Ao abrir o projeto no VS Code, você verá uma estrutura organizada:

  • src/: Onde fica o código fonte da aplicação.
  • app/: Contém os componentes e lógica principal.
  • assets/: Imagens e arquivos estáticos.
  • angular.json: Configurações globais do CLI.

Atenção

Não altere arquivos na pasta node_modules manualmente. Todas as dependências devem ser gerenciadas via package.json.

🏁 Mini-Projeto da Aula

Crie uma nova aplicação Angular chamada projeto-aula-01, execute-a no seu navegador e altere o texto "Hello" no arquivo app.component.html.

Aula 02: Estrutura do Projeto e Componentes (Abordagem Clássica) 🏗️

Nesta aula, vamos dissecar a anatomia de um projeto Angular e entender o coração do framework: os Componentes.

📁 Estrutura de Pastas Profissional

Um projeto Angular possui diversos arquivos de configuração. Vamos entender os principais:

  • main.ts: O ponto de entrada da aplicação. É aqui que o Angular inicia o módulo raiz.
  • index.html: A única página física da SPA. Contém a tag <app-root>.
  • angular.json: Configurações do CLI (scripts, estilos globais, caminhos).

🧩 O que é um Componente?

Um componente no Angular é composto por 4 elementos principais:

  1. Classe (.ts): Lógica e dados.
  2. Template (.html): Estrutura visual.
  3. Estilo (.css ou .scss): Design isolado.
  4. Teste (.spec.ts): Validação automatizada.
graph LR
    A[Componente] --> B[HTML/Template]
    A --> C[CSS/Estilos]
    A --> D[TS/Lógica]
    A --> E[Metadados/@Component]

🛠️ Criando Componentes com o CLI

Não criamos arquivos manualmente! Usamos o comando generate (ou o atalho g).

# Gerar um componente chamado 'cabecalho'
$ ng generate component cabecalho

# Atalho rápido
$ ng g c rodape

Comportamento do CLI

Ao gerar um componente, o CLI cria os 4 arquivos, cria uma pasta própria e, na abordagem clássica, o registra automaticamente no app.module.ts.

📦 Introdução ao NgModule

Na abordagem clássica, o Module é o arquivo que agrupa componentes, serviços e outras dependências.

Atenção

Para que um componente possa ser usado no HTML de outro, ele deve estar declarado em um NgModule.

🚀 Prática: Layout com Componentes

Vamos criar uma estrutura de layout simples com múltiplos componentes.

$ ng g c header
$ ng g c footer
$ ng g c content

No arquivo app.component.html, chame os seletores:

<app-header></app-header>
<app-content></app-content>
<app-footer></app-footer>

🏁 Mini-Projeto da Aula

Crie três componentes (Navbar, Sidebar e MainContent). Organize-os no app.component.html para formar o layout de um dashboard simples. Customize as cores de cada um usando arquivos CSS isolados.

Macro Syntax Error

File: aulas/aula-03.md

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

    B --> B1[Interpolação {{ }}]

Aula 04: Diretivas Estruturais e de Atributo 🛠️

Nesta aula, vamos aprender como manipular a estrutura do nosso HTML e o comportamento dos elementos usando as Diretivas do Angular.

🧩 O que são Diretivas?

Diretivas são instruções que o Angular usa para transformar o DOM. Elas se dividem em dois grandes grupos:

  1. Estruturais: Alteram a estrutura do HTML (adicionam ou removem elementos). Usam o prefixo *.
  2. De Atributo: Alteram a aparência ou o comportamento de um elemento existente.

🏗️ Diretivas Estruturais

As mais famosas são o *ngIf e o *ngFor.

1. *ngIf

Renderiza um elemento apenas se uma condição for verdadeira.

<!-- Se logado for true, exibe a mensagem -->
<p *ngIf="logado">Bem-vindo de volta!</p>

2. *ngFor

Cria um loop para repetir um elemento para cada item de uma lista.

<ul>
  <li *ngFor="let item of listaCategorias">
    {{ item }}
  </li>
</ul>

🎨 Diretivas de Atributo

Alteram como o elemento se parece.

1. ngClass

Adiciona ou remove classes CSS dinamicamente.

<!-- Adiciona a classe 'sucesso' se o status for 'ativo' -->
<div [ngClass]="{ 'sucesso': status === 'ativo' }">
  Status do Sistema
</div>

2. ngStyle

Aplica estilos CSS inline dinamicamente.

<p [ngStyle]="{ 'color': corSelecionada, 'font-size': '20px' }">
  Texto Colorido
</p>

🌟 Diagrama de Funcionamento

graph LR
    A[Componente] --> B{Diretiva}
    B -- Estrutural --> C[Muda o DOM: Adiciona/Remove]
    B -- Atributo --> D[Muda o Elemento: Cor/Classe]

🛠️ Criando uma Diretiva Personalizada (Intro)

Você também pode criar suas próprias diretivas para reutilizar comportamentos.

# Gerar uma diretiva
$ ng generate directive destaca-item

🚀 Prática: Listagem Dinâmica

Vamos criar uma lista de "Tarefas" onde podemos marcar como concluídas.

  1. Use *ngFor para listar as tarefas.
  2. Use *ngIf para mostrar um aviso se a lista estiver vazia.
  3. Use ngClass para riscar o texto da tarefa quando ela estiver concluída.

🏁 Mini-Projeto da Aula

Crie uma galeria de produtos. Cada produto deve ser um objeto com nome, preço e disponibilidade. Use *ngFor para exibir os produtos, *ngIf para mostrar o selo "Esgotado" e ngStyle para mudar a cor do preço (vermelho para produtos caros, verde para baratos).

Aula 05: Comunicação entre Componentes 🔄

Nesta aula, vamos aprender como os componentes "conversam" entre si em uma arquitetura hierárquica usando @Input e @Output.

📢 Fluxo de Dados Hierárquico

No Angular, os dados geralmente fluem do pai para o filho e os eventos do filho para o pai.

graph TD
    P[Componente Pai] -- "@Input" --> F[Componente Filho]
    F -- "@Output (EventEmitter)" --> P

📥 Recebendo Dados: @Input()

O decorator @Input() permite que o componente filho receba valores vindo de seu pai.

No Componente Filho (.ts):

import { Component, Input } from '@angular/core';

@Component({ ... })
export class FilhoComponent {
    @Input() mensagemDoPai: string = '';
}

No Componente Pai (.html):

<app-filho [mensagemDoPai]="'Olá, meu filho!'"></app-filho>

📤 Enviando Eventos: @Output()

O decorator @Output() combinado com EventEmitter permite que o filho envie notificações ou dados de volta para o pai.

No Componente Filho (.ts):

import { Component, Output, EventEmitter } from '@angular/core';

@Component({ ... })
export class FilhoComponent {
    @Output() eventoFilho = new EventEmitter<string>();

    notificarPai() {
        this.eventoFilho.emit('Oi, Pai! Eu mudei.');
    }
}

No Componente Pai (.html):

<!-- Escutando o evento (eventoFilho) -->
<app-filho (eventoFilho)="receberNotificacao($event)"></app-filho>

🧠 Smart vs Dumb Components

  • Smart Components (Pai): Gerenciam dados, fazem chamadas de API e cuidam da lógica de negócio.
  • Dumb Components (Filho): Apenas exibem dados recebidos via @Input e notificam o pai via @Output. São altamente reutilizáveis.

🚀 Prática: Lista de Contatos

Vamos construir um sistema onde: 1. O Pai gerencia uma lista de contatos. 2. O Filho exibe o detalhe de um único contato (@Input). 3. O Filho tem um botão "Excluir" que notifica o pai para remover aquele contato da lista (@Output).

🏁 Mini-Projeto da Aula

Crie um componente Contador. O componente pai deve passar o valor inicial do contador para o filho. O filho deve ter botões de "+" e "-". Toda vez que o valor mudar no filho, ele deve emitir um evento para o pai atualizar o total geral na tela dele.

Aula 06: Serviços e Injeção de Dependência 💉

Nesta aula, vamos aprender como compartilhar lógica e dados entre componentes de forma profissional e escalável usando Serviços e o sistema de Injeção de Dependência (DI) do Angular.

🏛️ Por que usar Serviços?

Componentes devem focar na interface (UI). Lógica pesada, como cálculos ou chamadas a banco de dados, deve ser isolada em um Serviço.

  • Reaproveitamento: Vários componentes podem usar o mesmo serviço.
  • Singleton: Por padrão, o Angular cria apenas uma instância do serviço para toda a aplicação.
  • Organização: Separa a "casca" (UI) do "motor" (Lógica).

🛠️ Criando um Serviço com o CLI

Usamos o comando generate service (ou g s).

# Gerar um serviço de autenticação
$ ng generate service auth/auth

# Atalho rápido
$ ng g s data

💉 Injeção de Dependência

Não instanciamos servicos com new Servico(). O Angular faz isso para nós através do Construtor.

1. Definindo o Serviço:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Singleton: disponível em toda a app
})
export class DadosService {
  lista: string[] = ['Angular', 'React', 'Vue'];

  getDados() {
    return this.lista;
  }
}

2. Injetando no Componente:

export class ListaComponent {
  // O Angular injeta automaticamente a instância
  constructor(private service: DadosService) {}

  minhaLista = this.service.getDados();
}

🌟 Diagrama de Injeção

graph TD
    S[Serviço] --> |Injetado| C1[Home Component]
    S --> |Injetado| C2[Navbar Component]
    S --> |Injetado| C3[Dashboard Component]
    C1 -.-> |Compartilha Dados| S
    C3 -.-> |Compartilha Dados| S

🚀 Prática: Gerenciamento de Tarefas

Vamos refatorar nosso código de tarefas para que: 1. A lista de tarefas não fique mais no componente. 2. Crie um TarefaService com métodos adicionar() e listar(). 3. Dois componentes diferentes usem o mesmo serviço para mostrar a mesma lista.

🏁 Mini-Projeto da Aula

Crie um CarrinhoService. Ele deve ter um array privado de itens. Crie métodos para adicionarItem(produto) e exibirTotal(). Use esse serviço em um componente de "Lista de Produtos" e em um componente de "Mini-Carrinho" (que fica no topo da página).

Aula 07: Roteamento (Abordagem Clássica) 🛣️

Nesta aula, vamos aprender como transformar nossa Single Page Application em um site multipágina usando o Angular Router.

📍 O que é o Roteamento?

O roteamento permite que o usuário navegue entre diferentes visualizações (URL /home, /contato) sem que o navegador faça um "refresh" total.

graph LR
    URL[URL do Browser] --> R[Router]
    R --> |/home| C1[HomeComponent]
    R --> |/produtos| C2[ProdutosComponent]
    R --> |/vazio| C3[NotFoundComponent]

🛠️ Configuração Básica (app-routing.module.ts)

Na abordagem clássica, definimos um array de rotas.

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'produtos', component: ProdutosComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' } // Rota padrão
];

🏠 Exibindo as Rotas: router-outlet

Para indicar ao Angular onde os componentes das rotas serão renderizados, usamos a tag <router-outlet>.

<!-- app.component.html -->
<nav>...</nav>

<router-outlet></router-outlet> <!-- Componentes mudam aqui -->

<footer>...</footer>

Não usamos href para links internos! Usamos a diretiva routerLink para que o Angular controle a navegação.

<a routerLink="/home">Início</a>
<a [routerLink]="['/produtos', id]">Ver Produto</a>

🆔 Parâmetros de Rota

Podemos passar valores dinâmicos na URL (ex: /produto/123).

  1. Definição: { path: 'produto/:id', component: DetalheComponent }
  2. Captura: Usamos o serviço ActivatedRoute para ler o ID.

🚀 Prática: Site Institucional

Vamos criar um site com 3 páginas: 1. Home: Boas-vindas. 2. Sobre: Descrição da empresa. 3. Contato: Um formulário de contato.

Adicione um menu de navegação que permita transitar entre elas sem recarregar o browser.

🏁 Mini-Projeto da Aula

Crie um catálogo de filmes. Teremos duas rotas: /filmes (lista todos) e /filme/:id (mostra o detalhe do filme clicado). No componente de detalhe, exiba o ID recebido da URL para confirmar que o roteamento está funcionando.

Aula 08: Standalone Components 📦

Nesta aula, entramos na era do Angular Moderno. Vamos aprender como criar componentes que não precisam mais de um NgModule para funcionar.

🆕 O que mudou no Angular 15+?

Historicamente, todo componente precisava estar declarado em um módulo. Com os Standalone Components, o componente se torna autossuficiente.

graph LR
    A[Componente Clássico] --> B[NgModule]
    B --> C[Aplicação]

    D[Componente Standalone] --> E[Aplicação]
    D -.-> |Importa diretamente| F[CommonModule/Outros]

🛠️ Anatomia de um Standalone Component

A principal diferença está no decorator @Component, onde adicionamos a propriedade standalone: true.

@Component({
  selector: 'app-perfil',
  standalone: true, // A mágica acontece aqui!
  imports: [CommonModule, MeusOutrosComponents], // Importa o que precisa
  templateUrl: './perfil.component.html'
})
export class PerfilComponent {}

🚀 Iniciando a App sem Módulo

No Angular Moderno, o bootstrap da aplicação muda do módulo para o componente raiz diretamente usando bootstrapApplication.

Arquivo main.ts:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent)
  .catch(err => console.error(err));

⚖️ Comparação: Clássico vs Standalone

Característica Clássico (NgModule) Standalone (Moderno)
Declaração Obrigatória no Module Nenhuma (auto-gerido)
Imports Feito no Module Feito no próprio Componente
Complexidade Alta (muitos arquivos) Baixa (mais direto)
Performance Padrão Melhor (Tree-shaking)

🛠️ Gerando no CLI

# Gerar um componente standalone
$ ng generate component meu-comp --standalone

Dica

A partir de versões mais recentes, o Angular CLI pode ser configurado para que todos os componentes novos sejam standalone por padrão.

🚀 Prática: Primeiro Projeto Moderno

  1. Crie um novo componente usando a flag --standalone.
  2. Tente importar o CommonModule dentro dele para usar o *ngIf e o *ngFor.
  3. Note que você não precisou tocar no arquivo app.module.ts!

🏁 Mini-Projeto da Aula

Refatore seu projeto da Aula 02 (que usava módulos) para usar apenas Standalone Components. Remova o arquivo app.module.ts e atualize o main.ts para usar o bootstrapApplication.

Aula 09: Roteamento no Modelo Standalone 🗺️

Nesta aula, vamos aprender como configurar a navegação da nossa aplicação Angular usando o modelo moderno, eliminando a dependência do AppRoutingModule.

📍 Roteamento sem Módulos

No modelo standalone, não usamos mais o RouterModule.forRoot(). Em vez disso, usamos a função provideRouter() durante o bootstrap da aplicação.

Configuração no main.ts:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes) // Configura as rotas aqui!
  ]
});

📁 Organização de Rotas (app.routes.ts)

As rotas continuam sendo um array de objetos, mas agora importamos os componentes diretamente.

export const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'login', component: LoginComponent }
];

🚀 Lazy Loading com loadComponent

No modelo clássico, o lazy loading era feito por módulos (loadChildren). No modelo standalone, podemos carregar componentes individuais sob demanda.

{
  path: 'dashboard',
  loadComponent: () => import('./features/dashboard.component')
    .then(m => m.DashboardComponent)
}

🛠️ O que mudou no HTML?

Absolutamente nada! As diretivas <router-outlet> e [routerLink] continuam funcionando da mesma forma.

Atenção

Como seu componente agora é Standalone, você deve importar explicitamente o RouterModule (ou as diretivas individuais como RouterOutlet) dentro do array imports do seu componente.

@Component({
  standalone: true,
  imports: [RouterOutlet, RouterLink], // Obrigatório importar!
  ...
})

🌟 Vantagens do Roteamento Standalone

  1. Menos arquivos: Não precisa do app-routing.module.ts.
  2. Performance: O Lazy Loading de componentes é mais granular que o de módulos.
  3. Clareza: O main.ts mostra claramente quais serviços e configurações a app possui.

🚀 Prática: Refatoração de Rotas

Vamos pegar o projeto da Aula 07 e: 1. Remover o AppRoutingModule. 2. Mover a constante routes para um arquivo próprio. 3. Configurar o provideRouter no main.ts. 4. Transformar o lazy loading de módulos em lazy loading de componentes.

🏁 Mini-Projeto da Aula

Crie um sistema de abas (Tabs). Cada aba deve ser um componente independente. Configure o roteamento para que cada aba tenha sua própria URL e use o loadComponent para que o código de cada aba só seja baixado quando o usuário clicar nela.

Aula 10: Formulários no Angular 📝

Nesta aula, vamos aprender como coletar e validar dados dos usuários usando as duas abordagens do Angular: Template-driven e Reactive Forms.

🎭 As Duas Abordagens

Característica Template-driven Reactive Forms
Configuração No HTML (Directivas) No TypeScript (Código)
Escalabilidade Indicado para formulários simples Indicado para formulários complexos
Validação No HTML Programática
Previsibilidade Menor (Assíncrono) Maior (Síncrono/Imutável)

1. Template-driven Forms

Usa o ngModel para criar o modelo de dados automaticamente a partir do HTML.

<form #meuForm="ngForm" (ngSubmit)="enviar(meuForm)">
  <input name="email" ngModel required email>
  <button [disabled]="meuForm.invalid">Enviar</button>
</form>

2. Reactive Forms

Você cria e gerencia o estado do formulário explicitamente no TypeScript. Oferece muito mais controle.

No TypeScript (.ts):

import { FormGroup, FormControl, Validators } from '@angular/forms';

meuForm = new FormGroup({
    nome: new FormControl('', [Validators.required]),
    email: new FormControl('', [Validators.required, Validators.email])
});

onSubmit() {
    console.log(this.meuForm.value);
}

No HTML (.html):

<form [formGroup]="meuForm" (ngSubmit)="onSubmit()">
  <input formControlName="nome">
  <input formControlName="email">
  <button type="submit">Cadastrar</button>
</form>

✅ Validações e feedback

O Angular permite verificar o estado de cada campo (dirty, touched, valid, invalid).

<div *ngIf="meuForm.get('email')?.invalid && meuForm.get('email')?.touched">
  Email é obrigatório e deve ser válido.
</div>

🌟 Ciclo do Formulário

graph LR
    A[Usuário Digita] --> B[Estado do Control Muda]
    B --> C{Válido?}
    C -- Sim --> D[Botão Ativado]
    C -- Não --> E[Exibe Erro]
    D --> F[Submit: Dados para o Servidor]

🚀 Prática: Cadastro de Usuário

Vamos construir um formulário de cadastro com: 1. Campos: Nome, Email, Senha e Confirmação de Senha. 2. Validação de obrigatoriedade e máscara de email. 3. Desabilitar o botão de enviar até que tudo esteja correto.

🏁 Mini-Projeto da Aula

Crie um formulário de Feedback. O usuário deve avaliar o serviço de 1 a 5 (Dropdown) e escrever um comentário (Textarea). Use Reactive Forms e exiba uma mensagem de sucesso na tela após o "envio" dos dados.

Aula 11: HTTP Client e Consumo de API REST 🌐

Nesta aula, vamos aprender como conectar nossa aplicação Angular a servidores externos para buscar, criar, atualizar e deletar dados usando o HttpClient.

📡 O que é o HttpClient?

É um serviço nativo do Angular que facilita a realização de requisições HTTP (GET, POST, PUT, DELETE) para APIs REST.

  • Baseado em Observables (RxJS).
  • Trata automaticamente a conversão para JSON.
  • Oferece interceptores para gerenciar tokens e erros.

🛠️ Configuração Standalone

No modelo standalone, habilitamos o cliente HTTP no main.ts usando o provider provideHttpClient().

import { bootstrapApplication } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient() // Ativa o HTTP na app
  ]
});

💉 Usando o HttpClient no Serviço

Sempre isolamos as chamadas de API em serviços para manter o código limpo e reutilizável.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class PostService {
  private url = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) {}

  listarPosts() {
    return this.http.get<any[]>(this.url);
  }

  salvarPost(post: any) {
    return this.http.post(this.url, post);
  }
}

📥 Consumindo no Componente

Como o http.get retorna um Observable, precisamos usar o método .subscribe() para receber os dados.

export class ListaPostsComponent {
  posts: any[] = [];

  constructor(private service: PostService) {}

  ngOnInit() {
    this.service.listarPosts().subscribe(dados => {
      this.posts = dados;
    });
  }
}

🌟 Fluxo da Requisição

graph LR
    A[Componente] --> B[Serviço]
    B --> |http.get| C[API REST]
    C --> |JSON Response| B
    B --> |Observable| A
    A --> |subscribe| D[Atualiza Tela]

🚀 Prática: Consumo de API Real

Vamos utilizar a API gratuita JSONPlaceholder para: 1. Listar uma série de postagens em uma lista. 2. Criar um pequeno formulário para "simular" o envio de um novo post. 3. Implementar um botão de deletar que remove o item da interface.

🏁 Mini-Projeto da Aula

Crie um buscador de CEP usando a API do ViaCEP. O usuário digita o CEP, clica no botão e o seu serviço deve retornar o endereço completo para ser exibido na tela.

Macro Rendering Error

File: aulas/aula-12.md

UndefinedError: 'item' is undefined

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

Aula 13: Arquitetura e Organização Profissional 🏗️

Nesta aula, vamos aprender como estruturar projetos Angular de grande escala seguindo os padrões utilizados pelas maiores empresas de tecnologia.

📁 Padrão LIFT

O Angular recomenda o padrão LIFT: * Locate: Localizar o código rapidamente. * Identify: Identificar o que o arquivo faz pelo nome. * Flat: Manter uma estrutura o mais plana possível (sem pastas infinitas). * Try to be DRY: Evite repetições desnecessárias.

🏛️ Estrutura de Pastas Recomendada

Um projeto profissional geralmente divide as responsabilidades em três pilares:

  1. Core: Serviços globais, interceptores e guards (singleton).
  2. Shared: Componentes visuais genéricos (botões, inputs), pipes e diretivas reutilizáveis.
  3. Features: As funcionalidades do negócio (ex: login, vendas, perfil).
graph TD
    App[src/app] --> Core[core/]
    App --> Shared[shared/]
    App --> Features[features/]
    Features --> Login[login/]
    Features --> Products[products/]

🏷️ Convenções de Nomeclatura

O Angular CLI segue o padrão de kebab-case com sufixos descritivos: * usuario-header.component.ts * auth.service.ts * valida-email.directive.ts

Dica de Ouro

Mantenha cada arquivo com uma única responsabilidade (Single Responsibility Principle). Se um componente tem 1000 linhas, ele deve ser quebrado!

📦 Barrel Files (index.ts)

Para evitar dezenas de linhas de import no topo dos arquivos, usamos arquivos index.ts que exportam tudo de uma pasta.

// features/products/index.ts
export * from './product-list.component';
export * from './product-detail.component';
export * from './product.service';

🧱 Smart vs Dumb (Revisited)

Em arquiteturas profissionais: * Smart Components ficam na pasta features/. * Dumb Components ficam na pasta shared/ ou dentro da pasta de uma feature específica se não forem genéricos.

🚀 Prática: Refatoração de Arquitetura

Vamos reorganizar nosso projeto bagunçado! 1. Crie as pastas core, shared e features. 2. Mova os serviços de autenticação para core. 3. Crie um componente de botão estilizado dentro de shared. 4. Organize as páginas existentes dentro de features.

🏁 Mini-Projeto da Aula

Desenhe um diagrama de pastas para um sistema de E-commerce que contenha: Autenticação, Catálogo, Carrinho e Perfil do Usuário. Aplique os conceitos de Core, Shared e Features.

Aula 14: Estilização Moderna e Componentes de UI 🎨

Nesta aula, vamos aprender como deixar nossa aplicação Angular bonita, profissional e responsiva, explorando o CSS isolado e as bibliotecas de componentes.

👗 Estilização Isolada (View Encapsulation)

Por padrão, o CSS que você escreve em um componente não vaza para o resto da aplicação. O Angular adiciona atributos únicos ao HTML para garantir esse isolamento.

Tipos de Encapsulamento

  • Emulated (Padrão): Simula o isolamento via atributos.
  • None: O CSS se torna global.
  • ShadowDom: Usa a tecnologia nativa do browser para isolamento total.

📦 Bibliotecas de Componentes

Não precisamos reinventar a roda. Podemos usar bibliotecas que já trazem botões, modais e tabelas prontas.

  1. Angular Material: A biblioteca oficial seguindo o Material Design.
  2. PrimeNG: Uma das mais completas, com centenas de componentes.
  3. Tailwind CSS: Uma abordagem baseada em classes utilitárias que está dominando o mercado.

🛠️ Instalando Angular Material

# Adicionando o Material ao projeto
$ ng add @angular/material

Após instalado, basta importar os módulos (ou diretivas standalone) que deseja usar:

import { MatButtonModule } from '@angular/material/button';

@Component({
  standalone: true,
  imports: [MatButtonModule],
  template: `<button mat-raised-button color="primary">Click</button>`
})

🌓 Variáveis CSS e Temas

Use variáveis CSS (--cor-primaria) para facilitar a criação de temas (Light/Dark Mode).

:root {
  --primary-color: #3f51b5;
}

.meu-card {
  background-color: var(--primary-color);
}

🌟 Animações no Angular

O Angular possui um módulo potente para animações de transição de estados.

graph LR
    A[Estado: Inicial] --> |Transição| B[Estado: Final]
    B --> |Trigger| C[Animação na Tela]

🚀 Prática: Interface Premium

Vamos transformar nossa listagem de produtos simples em uma vitrine de luxo: 1. Instale o Angular Material. 2. Use o MatCard para exibir os itens. 3. Adicione um MatToolbar como cabeçalho. 4. Implemente um botão que abre um MatDialog (modal) para ver mais detalhes.

🏁 Mini-Projeto da Aula

Crie uma página de perfil de usuário "Dark Mode" usando apenas variáveis CSS. O usuário deve conseguir alternar entre o tema claro e escuro clicando em um botão que altera uma classe no body da aplicação.

Aula 15: Build, Deploy e Performance 🚀

Nesta aula, vamos aprender como preparar nossa aplicação para o mundo real, otimizando o tamanho do código e publicando o site na internet.

🏗️ O Processo de Build

Quando desenvolvemos, usamos o ng serve. Para produção, precisamos gerar arquivos estáticos (HTML/JS/CSS) otimizados usando o comando build.

# Gerar arquivos para produção
$ ng build

Os arquivos serão gerados na pasta dist/nome-do-projeto.

🌍 Gerenciando Ambientes

Você pode ter configurações diferentes para desenvolvimento e produção (ex: URLs de API). No Angular moderno, usamos as configurações de fileReplacements no angular.json ou arquivos de variáveis de ambiente.

Exemplo de Uso

environment.ts (Dev) vs environment.prod.ts (Produção).

🚀 Deploy no GitHub Pages

Uma das formas mais fáceis de hospedar seu projeto Angular gratuitamente.

# 1. Instale o utilitário
$ npm install -g angular-cli-ghpages

# 2. Faça o build
$ ng build --base-href "https://seu-usuario.github.io/nome-do-repo/"

# 3. Publique
$ npx angular-cli-ghpages --dir=dist/nome-do-projeto

⚡ Performance: Lighthouse

Devemos sempre verificar se nosso site está rápido e acessível. O Lighthouse (no Chrome DevTools) analisa: * Performance (tempo de carregamento). * Acessibilidade (uso de leitores de tela). * Melhores Práticas. * SEO.

🌟 Estratégias de Otimização

  1. Lazy Loading: Já vimos que carregar por demanda reduz o bundle inicial.
  2. Budget: O Angular permite definir alertas se o arquivo JS ficar grande demais.
  3. Images: Use formatos modernos (WebP) e carregamento ocioso (lazy).

🚀 Prática: Deploy da Nossa App

Vamos realizar o ciclo completo: 1. Criar os arquivos de ambiente. 2. Executar o build de produção. 3. Publicar no GitHub Pages (ou simular com um servidor local). 4. Rodar um relatório do Lighthouse e ajustar o que for necessário.

🏁 Mini-Projeto da Aula

Configure as "budgets" no seu arquivo angular.json para emitir um aviso se o pacote principal (main bundle) ultrapassar 1MB. Tente identificar qual parte da sua aplicação (ex: ícones ou bibliotecas pesadas) está consumindo mais espaço.

Aula 16: Projeto Final Integrador 🏆

Chegamos ao fim da nossa jornada! Esta aula é dedicada à consolidação de todo o conhecimento que adquirimos, através do desenvolvimento de uma aplicação completa do zero ao deploy.

📝 O Desafio Final

Você deverá construir um Gerenciador de Filmes/Séries Personalizado utilizando todas as tecnologias estudadas.

Requisitos Técnicos:

  1. Arquitetura: Uso obrigatório de Standalone Components e estrutura de pastas Core/Shared/Features.
  2. Roteamento: Navegação entre Listagem, Detalhes e Cadastro.
  3. Comunicação: Uso de @Input e @Output para criar componentes reutilizáveis (cards e botões).
  4. Serviços e HTTP: Consumir a API do TMDB ou simular com JSON Server.
  5. Formulários: Criar um formulário reativo para "Adicionar aos Favoritos" ou "Avaliar Filme".
  6. RxJS: Implementar uma busca em tempo real com operadores de filtragem e cancelamento.
  7. Estilização: Uso de Angular Material ou Tailwind CSS para uma interface moderna.

🗺️ Mapa de Competências

mindmap
  root((Angular Course))
    Fundamentos
      Componentes
      Módulos vs Standalone
      Data Binding
    Lógica Profissional
      Services
      DI
      HTTP Client
    Reatividade
      RxJS
      Observables
      Async Pipe
    Entrega
      Build
      Performance
      Deploy

🚀 Dicas para o Sucesso

  • Planeje antes: Desenhe as telas e o fluxo de dados no papel ou em uma ferramenta como o Figma.
  • Commit constante: Use o Git para salvar seu progresso passo a passo.
  • Documente: No README do seu projeto final, explique como rodá-lo e quais foram os maiores desafios.

🎁 Próximos Passos na Carreira

Parabéns! Você agora domina o Angular. O que estudar a seguir? * Signals: A novidade que está mudando a reatividade no Angular. * SSR (Server Side Rendering): Usando Angular Universal para SEO. * NGRX: Para gerenciamento de estado global em apps gigantescas.

🏁 Encerramento

Foi um prazer acompanhar você nesta trilha. O mercado de Frontend está sempre evoluindo, e com as bases sólidas que você construiu aqui, o sucesso é apenas uma questão de prática e dedicação.

Boa sorte com seu Projeto Final! 🚀

Exercícios

Banco de Exercícios 🏋️

Pratique os conceitos aprendidos em cada módulo com estas listas de exercícios práticos.

Aula Tópico Material
01 Introdução e Ambiente Acessar Exercícios
02 Estrutura e Componentes Acessar Exercícios
03 Data Binding Acessar Exercícios
04 Diretivas Acessar Exercícios
05 Comunicação @Input/@Output Acessar Exercícios
06 Serviços e DI Acessar Exercícios
07 Roteamento Clássico Acessar Exercícios
08 Standalone Components Acessar Exercícios
09 Roteamento Standalone Acessar Exercícios
10 Formulários Acessar Exercícios
11 HTTP Client Acessar Exercícios
12 RxJS Reativo Acessar Exercícios
13 Arquitetura Profissional Acessar Exercícios
14 Estilização e UI Acessar Exercícios
15 Build e Performance Acessar Exercícios
16 Projeto Integrador Acessar Checklist

Exercícios: Aula 01 📝

Pratique os conceitos básicos de Angular e preparação de ambiente.

Básico

  1. Conceito de SPA: Explique com suas palavras a principal diferença entre uma aplicação SPA e uma aplicação web tradicional (Multi-Page).
  2. Angular CLI: Qual é o comando utilizado para verificar a versão instalada do Angular CLI e do Node.js?

Intermediário

  1. Novo Projeto: Descreva os passos necessários para criar um novo projeto chamado academia-angular, desabilitando os testes iniciais (dica: procure por --skip-tests).
  2. Estrutura de Pastas: Para que serve o arquivo angular.json e por que ele é importante para o desenvolvedor?

Desafio

  1. Execução e Alteração: Crie um projeto, execute-o usando ng serve e altere o conteúdo do título no componente raiz. Adicione também um novo parágrafo <p> com seu nome e o nome da sua cidade no arquivo app.component.html.

Exercícios: Aula 02 📝

Pratique a organização de arquivos e a criação de componentes.

Básico

  1. Componentes: Quais são os quatro arquivos gerados automaticamente pelo comando ng generate component nome-do-componente?
  2. Seletores: Para que serve a propriedade selector nos metadados de um componente?

Intermediário

  1. Registro de Módulo: Na abordagem clássica, em qual array do NgModule o CLI adiciona o novo componente automaticamente?
  2. CLI: Como você criaria um componente dentro de uma subpasta chamada components, usando apenas um comando do CLI? (Exemplo: criar login dentro de src/app/components/login).

Desafio

  1. Layout Aninhado: Crie um componente chamado Pai e outro chamado Filho. Tente exibir o componente Filho dentro do template do componente Pai. Depois, exiba o componente Pai no App.component. Descreva o resultado visual.

Exercícios: Aula 03 📝

Pratique a comunicação entre lógica e visual.

Básico

  1. Interpolação: Crie uma variável titulo no seu componente e exiba-a no HTML usando a sintaxe correta.
  2. Property Binding: Como você alteria dinamicamente a cor de fundo de uma div usando Property Binding com a propriedade style.background-color?

Intermediário

  1. Event Binding: Crie uma função que exiba no console do navegador o que o usuário está digitando em um campo <input>. (Dica: use o evento (input) ou (keyup)).
  2. Two-way Binding: Explique por que o [(ngModel)] é chamado de "Banana in a Box". Qual módulo deve ser importado para que ele funcione?

Desafio

  1. Calculadora Simples: Crie dois campos de input (numéricos) e exiba a soma desses dois valores em tempo real na tela, conforme o usuário digita. Use Two-way binding.

Exercícios: Aula 04 📝

Pratique a manipulação do DOM com diretivas.

Básico

  1. ngIf: Crie um botão "Exibir Detalhes". Ao clicar, um parágrafo de texto deve aparecer ou desaparecer da tela usando *ngIf.
  2. ngFor: Crie um array de strings chamado habilidades. Use o *ngFor para listar essas habilidades em uma lista não ordenada (<ul>).

Intermediário

  1. ngClass: Crie uma variável importante (boolean). Use a diretiva ngClass para aplicar a classe CSS .texto-vermelho a um elemento apenas quando importante for verdadeiro.
  2. ngStyle: Crie um controle de "Tamanho do Texto" (um input range). Use ngStyle para que o tamanho da fonte de um parágrafo mude conforme o valor do input.

Desafio

  1. Filtro Simples: Crie uma lista de números de 1 a 10. Use o *ngFor para exibir os números, mas adicione um *ngIf interno (em um container ou elemento) para que apenas os números pares sejam mostrados na lista final.

Exercícios: Aula 05 📝

Pratique a troca de dados entre componentes.

Básico

  1. Input: No componente Usuario, receba uma variável nome via @Input(). Exiba esse nome no template HTML.
  2. Output: Crie um evento @Output() chamado aoCurtir em um componente de Foto. O evento deve disparar toda vez que o usuário clicar em um ícone de coração.

Intermediário

  1. Objeto Inteiro: É possível passar um objeto inteiro (como um Produto com nome, preco e img) via @Input()? Como seria a sintaxe no componente pai para passar esse objeto?
  2. EventEmitter: Qual a finalidade do comando this.meuEvento.emit(valor) dentro de uma função do componente filho?

Desafio

  1. Carrinho de Compras: Crie um componente ProdutoItem. O pai deve passar as informações do produto via @Input. O filho deve ter um botão "Adicionar ao Carrinho". Ao clicar, o pai deve receber a notificação, receber o ID do produto e aumentar um contador de itens no carrinho que fica no topo da página.

Exercícios: Aula 06 📝

Pratique a criação de serviços e o compartilhamento de dados.

Básico

  1. Geração: Qual o comando CLI completo para gerar um serviço chamado Config dentro da pasta core/services?
  2. ProvidedIn: O que significa o parâmetro { providedIn: 'root' } dentro do decorator @Injectable?

Intermediário

  1. Injeção: Como você injeta um serviço chamado LogService dentro do construtor de um componente? Escreva a linha de código.
  2. Singleton: Se dois componentes diferentes injetarem o mesmo serviço e um deles alterar uma variável dentro desse serviço, o outro componente verá a mudança? Justifique.

Desafio

  1. Simulação de API: Crie um serviço chamado PostService. Ele deve ter um método que retorne um array de objetos (com titulo e autor). Injete esse serviço em um componente e use o *ngFor para exibir esses posts formatados como cards no HTML.

Exercícios: Aula 07 📝

Pratique a navegação em SPAs.

Básico

  1. Tag Principal: Qual é a tag HTML que deve ser colocada no template para que as rotas sejam renderizadas?
  2. Link Interno: Qual diretiva substitui o atributo href do HTML tradicional para evitar o refresh da página?

Intermediário

  1. Parâmetros: Como você define uma rota que aceita um parâmetro chamado username no array de rotas?
  2. Redirect: Como configurar uma rota para que, quando o usuário digitar uma URL inexistente, ele seja redirecionado para a /home?

Desafio

  1. Navegação via Código: Além do routerLink no HTML, como você faria para navegar para a rota /dashboard dentro de uma função no TypeScript? (Dica: Pesquise sobre o serviço Router e o método navigate).

Exercícios: Aula 08 📝

Pratique a transição para o Angular Moderno.

Básico

  1. Flag Standalone: Qual propriedade deve ser adicionada ao decorator @Component para torná-lo um componente independente?
  2. Imports: Onde são importadas as dependências (como CommonModule ou outros componentes) na abordagem Standalone?

Intermediário

  1. Bootstrap: Qual função substitui o platformBrowserDynamic().bootstrapModule() no arquivo main.ts de uma aplicação puramente standalone?
  2. CLI: Escreva o comando do CLI para gerar um componente chamado VideoPlayer que seja standalone desde a sua criação.

Desafio

  1. Migração: Imagine que você tem um componente clássico registrado no AppModule. Liste os 3 passos principais que você faria para transformá-lo em um componente Standalone pronto para ser usado sem módulos.

Exercícios: Aula 09 📝

Pratique a navegação no Angular Moderno.

Básico

  1. Provedor de Rota: Qual função substitui o RouterModule.forRoot() para configurar rotas em uma aplicação standalone?
  2. Importação no Componente: Se eu quero usar o router-outlet em um componente standalone, o que devo adicionar ao seu decorator @Component?

Intermediário

  1. loadComponent: Qual a principal diferença entre a propriedade component e a propriedade loadComponent na definição de uma rota?
  2. Configuração de App: No arquivo main.ts, onde passamos a configuração do roteador para a função bootstrapApplication?

Desafio

  1. Refatoração de Lazy Loading: Transforme a rota abaixo, que usa módulos, para o formato standalone usando componente: 
    // Formato antigo (Módulo)
{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }
    Escreva como ficaria a nova versão.

Exercícios: Aula 10 📝

Pratique a criação de formulários e validações.

Básico

  1. Abordagens: Quais são as duas principais formas de criar formulários no Angular?
  2. ngModel: Em qual das abordagens o ngModel é a peça central para capturar os dados?

Intermediário

  1. Validators: Cite 3 validadores nativos do Angular (ex: Validators.required) e explique o que cada um faz.
  2. FormGroup: No Reactive Forms, para que serve o FormGroup e como ele se relaciona com o FormControl?

Desafio

  1. Formulário Reativo: Crie um pequeno código TypeScript de um FormGroup que tenha dois campos: idade (mínimo 18) e termoAceite (deve ser verdadeiro). Como você configuraria esses validadores?

Exercícios: Aula 11 📝

Pratique a integração com serviços externos.

Básico

  1. Configuração: Qual utilitário devemos adicionar ao array de providers no bootstrap da aplicação para liberar o uso de requisições HTTP?
  2. Verbos HTTP: Quais são os 4 verbos HTTP mais comuns usados em APIs REST para CRUD (Create, Read, Update, Delete)?

Intermediário

  1. Tipagem: Como você definiria a tipagem do retorno de um http.get para que ele retorne um array de uma interface chamada IUsuario?
  2. Assincronismo: O que acontece se você esquecer de chamar o método .subscribe() após uma requisição http.get() no seu componente?

Desafio

  1. Tratamento de Erros: Pesquise como o método .subscribe() pode receber um objeto com next e error. Escreva um exemplo de código que trate o erro caso a API de busca de CEP retorne um erro 404.

Exercícios: Aula 12 📝

Pratique a manipulação de fluxos de dados com RxJS.

Básico

  1. Conceito: Qual a principal diferença entre um Observable e uma Promise?
  2. Async Pipe: Qual o benefício de usar o pipe | async no HTML em vez de fazer o .subscribe() manualmente no TypeScript?

Intermediário

  1. map vs filter: Explique a diferença de comportamento entre o operador map e o operador filter.
  2. BehaviorSubject: Por que o BehaviorSubject é geralmente preferido em relação ao Subject comum para armazenar o estado atual de um usuário logado?

Desafio

  1. Encadeamento: Escreva um exemplo de código usando .pipe() que receba uma lista de números, multiplique cada um por 2 (use map) e depois retorne apenas os números que forem maiores que 10 (use filter).

Exercícios: Aula 13 📝

Pratique a organização de projetos escaláveis.

Básico

  1. LIFT: O que significa o acrônimo LIFT nas recomendações de estilo do Angular?
  2. Pasta Core: Que tipo de arquivos costumamos colocar dentro da pasta core/? Cite 2 exemplos.

Intermediário

  1. Shared vs Core: Qual a principal diferença entre a pasta shared/ e a pasta core/ em termos de instância e uso?
  2. Barrel Files: Explique para que serve um arquivo index.ts dentro de uma pasta de componentes.

Desafio

  1. Proposição de Estrutura: Imagine que você vai criar um módulo de "Gestão de Estoque". Quais pastas e arquivos você criaria para seguir a arquitetura de "Features" ensinada na aula? Descreva a hierarquia.

Exercícios: Aula 14 📝

Pratique a criação de interfaces modernas.

Básico

  1. Isolamento: Explique o que é o "Encapsulamento de Estilo" do Angular e qual a sua principal vantagem.
  2. Angular Material: Qual o comando do CLI para instalar o Angular Material em um projeto existente?

Intermediário

  1. Variáveis CSS: Como você definiria uma variável CSS chamada --main-bg e a utilizaria em um seletor .container?
  2. Tailwind: Qual a principal diferença filosófica entre usar Angular Material e usar Tailwind CSS?

Desafio

  1. Tematização: Escreva um pequeno trecho de código CSS que mude a cor de fundo de um botão quando a classe .dark-theme estiver presente em um elemento pai (como o body).

Exercícios: Aula 15 📝

Pratique a entrega final da sua aplicação.

Básico

  1. Build: Qual o comando do CLI para gerar os arquivos finais de produção de um projeto Angular?
  2. Destino: Para qual pasta (por padrão) o Angular envia os arquivos gerados após o comando de build?

Intermediário

  1. base-href: Para que serve a flag --base-href durante o processo de build para deploy no GitHub Pages?
  2. Otimização: O que o processo de "Minificação" e "Uglification" (ofuscação) faz com o seu código JavaScript final?

Desafio

  1. Análise de Performance: Abra o site que você criou, pressione F12 (DevTools), vá na aba "Lighthouse" e gere um relatório de Desktop. Liste 2 sugestões de melhoria que o relatório deu para o seu projeto.

Projeto Final: Checklist de Entrega 📑

Use este checklist para garantir que seu projeto final atenda a todos os requisitos do curso.

Estrutura

  • [ ] O projeto utiliza apenas Standalone Components?
  • [ ] O projeto segue a organização de pastas Core, Shared e Features?
  • [ ] O arquivo app.module.ts foi removido e o bootstrap ocorre via main.ts?

Funcionalidades

  • [ ] Existe navegação entre pelo menos 3 rotas diferentes?
  • [ ] Há consumo de uma API externa (ou JSONPlaceholder) via HttpClient?
  • [ ] Foi implementado um formulário do tipo Reativo com validações?
  • [ ] Existe uma busca em tempo real usando operadores RxJS?

Design e UX

  • [ ] A interface utiliza Angular Material ou Tailwind CSS?
  • [ ] O site é responsivo (funciona bem em celular e desktop)?
  • [ ] Existe feedback visual para o usuário (loading spinners ou mensagens de erro)?

Finalização

  • [ ] O projeto foi publicado no GitHub Pages?
  • [ ] O README contém instruções de instalação e uso?
  • [ ] Todas as dependências inúteis foram removidas do package.json?

Projetos

Projetos e Portfólio 🚀

Consolide seu conhecimento construindo aplicações do mundo real sugeridas ao final de cada aula.

📝 Mini-Projetos de Aula

Cada aula contém um "Mini-Projeto" específico em seu conteúdo. Verifique as páginas das aulas para os desafios individuais.

🏆 Projeto Final Integrador

O objetivo final é a construção de um Gerenciador de Mídia reativo, integrando todas as fases do curso.

Ir para o Guia do Projeto Final

Projeto 01: Meu Primeiro App Angular 🚀

Objetivo

Criar uma aplicação Angular básica e realizar as primeiras alterações visuais.

Requisitos

  • [ ] Instalar o Angular CLI.
  • [ ] Criar um projeto chamado aula-01-projeto.
  • [ ] Alterar o título no arquivo app.component.html.
  • [ ] Adicionar um parágrafo com uma breve descrição sobre você.
  • [ ] Executar o projeto no navegador usando ng serve.

Desafio Extra

Tente mudar a cor do parágrafo que você criou usando CSS no arquivo app.component.css.

Projeto 02: Layout com Componentes 🏗️

Objetivo

Praticar a criação e organização de componentes para formar um layout de Dashboard.

Requisitos

  • [ ] Criar quatro componentes: Header, Sidebar, Content e Footer.
  • [ ] Organizar o app.component.html para que o Header fique no topo, a Sidebar na esquerda e o Content no centro.
  • [ ] Adicionar cores de fundo diferentes para cada componente para identificá-los.

Desafio Extra

Crie um componente chamado Card e tente repetir ele 3 vezes dentro do componente Content.

Macro Syntax Error

File: projetos/projeto-03.md

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

- [ ] Exibir o resultado do cálculo na tela usando Interpolação `{{ }}`.

Projeto 04: Lista de Tarefas (Todo) v1 ✅

Objetivo

Aplicar diretivas estruturais para gerenciar uma lista de itens.

Requisitos

  • [ ] Criar um array de tarefas no TypeScript.
  • [ ] Usar *ngFor para listar as tarefas na tela.
  • [ ] Usar *ngIf para exibir uma mensagem "Nenhuma tarefa pendente" se a lista estiver vazia.
  • [ ] Criar um input para adicionar novas tarefas à lista.

Desafio Extra

Adicione um botão ao lado de cada tarefa que permita removê-la da lista.

Projeto 05: Galeria de Produtos 🛒

Objetivo

Praticar a comunicação entre componentes usando @Input e @Output.

Requisitos

  • [ ] Criar um componente pai Catalog e um componente filho ProductCard.
  • [ ] O pai deve enviar as informações do produto via @Input para o filho.
  • [ ] O filho deve ter um botão "Comprar" que emite um evento via @Output.
  • [ ] O pai deve exibir um alerta com o nome do produto sempre que o botão for clicado no filho.

Desafio Extra

Crie uma variável "Carrinho" no componente pai que conte quantos produtos foram clicados.

Projeto 06: Controle de Estoque com Serviços 📦

Objetivo

Centralizar a lógica de dados em um serviço para compartilhamento entre componentes.

Requisitos

  • [ ] Criar um EstoqueService com uma lista privada de produtos.
  • [ ] Implementar métodos adicionar() e listar() no serviço.
  • [ ] Criar dois componentes: um formulário para adicionar e uma lista para exibir.
  • [ ] Ambos os componentes devem injetar e usar o mesmo serviço.

Desafio Extra

Implemente um método no serviço para remover um item pelo ID e use-o no componente de lista.

Projeto 07: Site Institucional 🗺️

Objetivo

Configurar o roteamento clássico (NgModule) para criar uma navegação entre páginas.

Requisitos

  • [ ] Criar três componentes representando as páginas: Home, Sobre e Contato.
  • [ ] Configurar o arquivo app-routing.module.ts.
  • [ ] Usar <router-outlet> no layout principal.
  • [ ] Criar uma barra de navegação com routerLink.

Desafio Extra

Adicione uma rota curinga (**) para lidar com páginas não encontradas, exibindo um componente de erro 404.

Projeto 08: Perfil do Usuário Standalone 📦

Objetivo

Migrar a aplicação para o modelo moderno de Standalone Components.

Requisitos

  • [ ] Criar um componente Perfil com a flag --standalone.
  • [ ] Importar o CommonModule diretamente no componente.
  • [ ] Rodar a aplicação usando bootstrapApplication(AppComponent) no main.ts.
  • [ ] Remover o arquivo app.module.ts se possível.

Desafio Extra

Importe um componente standalone dentro de outro componente standalone e use-o no template.

Projeto 09: App de Notícias com Roteamento Moderno 🗺️

Objetivo

Configurar o roteamento em uma aplicação puramente standalone.

Requisitos

  • [ ] Usar a função provideRouter() no main.ts.
  • [ ] Criar rotas para Noticias e Esportes.
  • [ ] Implementar Lazy Loading usando loadComponent.
  • [ ] Importar RouterOutlet e RouterLink nos componentes standalone necessários.

Desafio Extra

Passe um parâmetro de ID na URL da notícia e exiba-o na tela do componente de detalhe.

Projeto 10: Formulário de Contato Reativo 📝

Objetivo

Desenvolver um formulário robusto com validações em tempo real usando Reactive Forms.

Requisitos

  • [ ] Criar um FormGroup com os campos: Nome, E-mail e Assunto.
  • [ ] Adicionar validadores: required para todos e email para o campo de e-mail.
  • [ ] Exibir mensagens de erro apenas quando o campo for "touched" e estiver "invalid".
  • [ ] Desabilitar o botão de envio até que o formulário seja válido.

Desafio Extra

Crie um validador personalizado que impeça o uso de e-mails de domínios específicos (ex: teste.com).

Projeto 11: Buscador de CEP (ViaCEP) 🌐

Objetivo

Conectar a aplicação ao mundo real consumindo uma API REST externa.

Requisitos

  • [ ] Habilitar o provideHttpClient() no bootstrap.
  • [ ] Criar um serviço para realizar a chamada ao https://viacep.com.br/ws/.
  • [ ] Injetar o serviço no componente e processar o retorno no .subscribe().
  • [ ] Exibir o Logradouro, Bairro e Cidade na tela.

Desafio Extra

Trate o erro caso o CEP digitado não exista ou tenha formato inválido, exibindo uma mensagem amigável.

Projeto 12: Barra de Busca Inteligente com RxJS ⚡

Objetivo

Usar operadores de fluxo de dados para otimizar pesquisas em tempo real.

Requisitos

  • [ ] Criar um campo de busca que emite eventos a cada tecla digitada.
  • [ ] Usar debounceTime(300) para não disparar requisições a cada letra.
  • [ ] Usar switchMap para cancelar buscas anteriores se a atual mudar.
  • [ ] Exibir os resultados usando o Async Pipe no HTML.

Desafio Extra

Use o operador distinctUntilChanged para evitar buscas idênticas consecutivas.

Projeto 13: Refactoring para Arquitetura Profissional 🏗️

Objetivo

Reorganizar a estrutura de pastas do projeto seguindo padrões de mercado.

Requisitos

  • [ ] Criar as pastas core/, shared/ e features/.
  • [ ] Mover componentes de layout (NavBar, Footer) para a pasta correta.
  • [ ] Mover serviços de autenticação ou globais para core/.
  • [ ] Implementar Barrel Files (index.ts) para exportar múltiplos componentes de uma pasta.

Desafio Extra

Crie uma pasta models/ dentro de shared/ e defina interfaces TypeScript para as principais entidades do seu projeto.

Projeto 14: Dashboard com Angular Material 🎨

Objetivo

Aplicar bibliotecas de componentes profissionais para elevar o nível visual da app.

Requisitos

  • [ ] Instalar o Angular Material usando ng add.
  • [ ] Usar o componente MatToolbar e MatButton no cabeçalho.
  • [ ] Criar uma listagem de dados usando MatTable ou MatCard.
  • [ ] Implementar um botão de "Excluir" que abre um MatDialog de confirmação.

Desafio Extra

Configure um tema personalizado alterando as cores primária e acento no arquivo de estilos globais.

Projeto 15: Deploy Real no GitHub Pages 🚀

Objetivo

Realizar o build oficial e publicar o projeto integrado na internet.

Requisitos

  • [ ] Configurar os arquivos de environment (dev/prod).
  • [ ] Executar o comando ng build --base-href /seu-repositorio/.
  • [ ] Utilizar a ferramenta angular-cli-ghpages para fazer o upload.
  • [ ] Verificar o site rodando na URL pública do GitHub.

Desafio Extra

Rode um teste de Lighthouse no Chrome DevTools e tente atingir uma pontuação acima de 90 em Performance e Acessibilidade.

Projeto 16: Projeto Final - Gerenciador de Filmes 🏆

Objetivo

Construir uma aplicação completa integrando todos os pilares do curso Angular.

Requisitos

  • [ ] Sistema 100% Standalone com Arquitetura Core/Shared/Features.
  • [ ] Navegação completa entre Home, Busca de Filmes e Detalhes.
  • [ ] Busca reativa (debounce, switchMap) consumindo a API do TMDB.
  • [ ] Formulário de avaliação de filmes com validações.
  • [ ] Design responsivo e moderno usando Material Design ou Tailwind.
  • [ ] Deploy funcional no GitHub Pages.

Desafio Extra

Implemente a funcionalidade de "Favoritos" usando um BehaviorSubject para que o número de filmes favoritos atualize em tempo real no cabeçalho do site.

Quizzes

Quizzes de Conhecimento 🧠

Teste seu aprendizado com nossos quizzes rápidos por 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

Galeria de Slides 📽️

Acesse a base teórica de cada aula em formato de slides interativos.

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

Setup e Ambiente 🛠️

Prepare sua máquina para o desenvolvimento profissional com Angular.

1. Node.js (Motor)

O Angular exige o Node.js em sua versão LTS (Long Term Support).

2. Angular CLI (A Arrumadeira)

Instale a interface de linha de comando oficial globalmente.

$ npm install -g @angular/cli

3. VS Code (O Palácio)

Recomendamos o Visual Studio Code com as seguintes extensões: * Angular Language Service: Inteligência de código para Angular. * ESLint: Para manter o código limpo. * Prettier: Para formatação automática.

4. Extensões Úteis no Chrome

  • Angular DevTools: Essencial para debugar componentes e performance.

Tudo pronto?

Siga para a vAula 01 para criar seu primeiro projeto!

Setup 01: Android Studio 🤖

O Android Studio é a IDE oficial para o desenvolvimento Android.

1. Requisitos de Sistema

  • RAM: Mínimo 8GB (Sugerido 16GB+).
  • Espaço: Mínimo 10GB para IDE + SDKs.
  • Processador: Intel Core i5 ou equivalente.

2. Instalação

  1. Acesse o site oficial: developer.android.com/studio.
  2. Baixe a versão mais recente para o seu Sistema Operacional.
  3. Execute o instalador e escolha a opção "Standard" na configuração inicial.

3. Configurando o SDK

  • Após a instalação, vá em Settings > Languages & Frameworks > Android SDK.
  • Certifique-se de que a versão mais recente do Android (estável) esteja instalada.
  • Na aba SDK Tools, instale o "Android Emulator" e o "Intel x86 Emulator Accelerator (HAXM)" se estiver no Windows com Intel.

4. Criando um Emulador (AVD)

  1. Abra o Device Manager.
  2. Clique em Create Device.
  3. Escolha um dispositivo (ex: Pixel 7).
  4. Selecione uma imagem de sistema (ex: Level 34 - Android 14).
  5. Finalize e clique no "Play" para iniciar o celular virtual.

5. Solução de Problemas ⚠️

  • VT-x is disabled: Você precisa habilitar a virtualização na BIOS do seu computador.
  • Studio muito lento: Adicione a pasta do projeto e as pastas do Android SDK nas exclusões do seu Antivírus.

Setup 02: Xcode (iOS Foundation) 🍎

O Xcode é a ferramenta necessária para compilar e testar apps iOS.

[!IMPORTANT] O Xcode requer um computador Mac (macOS).

1. Instalação

  1. Abra a App Store no seu Mac.
  2. Pesquise por Xcode.
  3. Clique em Obter/Instalar.
  4. Após o download, abra o Xcode para carregar os componentes adicionais do macOS.

2. Configurando Simuladores

  1. Vá em Settings > Platforms.
  2. Verifique se o componente "iOS" está baixado.
  3. Se não estiver, clique em "GET" para baixar a versão mais estável.

3. Comandos de Linha (CLI)

Para que ferramentas de automação funcionem, você precisa instalar os Command Line Tools: 

xcode-select --install

4. Opcional: CocoaPods

Muitos projetos iOS antigos ainda usam CocoaPods para dependências: 

sudo gem install cocoapods

5. Solução de Problemas ⚠️

  • Espaço em Disco: O Xcode é muito grande. Garanta pelo menos 40GB de espaço livre para ele e os simuladores.
  • Build Lento: Use simuladores de modelos mais simples (ex: iPhone SE) para poupar memória RAM se necessário.

Sobre

Sobre o Curso

🎓 Desenvolvimento Frontend com Angular

Este curso foi projetado para capacitar desenvolvedores na criação de SPAs (Single Page Applications) modernas, utilizando o framework Angular do Google. O diferencial é a transição guiada da arquitetura clássica (NgModule) para o modelo moderno e otimizado baseado em Standalone Components.

🎯 Objetivos do Curso

  • Ecossistema Angular --- Compreender a estrutura de projetos, o papel do Angular CLI e a arquitetura baseada em componentes.

  • Manipulação Dinâmica --- Dominar todos os tipos de Data Binding e o uso de diretivas para criar interfaces ricas e interativas.

  • Modernidade Standalone --- Aprender a desenvolver aplicações sem NgModules, simplificando o código e melhorando a performance.

  • Integração Reativa --- Consumir APIs REST de forma profissional utilizando RxJS e as melhores práticas de serviços injetáveis.

📚 O Que Você Vai Aprender

Módulo 1 – Fundamentos e Estrutura

  • Ciclo de vida de um componente
  • Instalação e uso avançado de CLI
  • Arquivos principais (angular.json, main.ts)
  • Templates e estilização isolada

Módulo 2 – Core e Comunicação

  • Hierarquia Pai-Filho (@Input/@Output)
  • Serviços Singleton e DI
  • Diretivas Personalizadas
  • Roteamento e Lazy Loading

Módulo 3 – Standalone e Formulários

  • BootstrapApplication e provideRouter
  • Refatoração de código legado para Standalone
  • Validações síncronas e assíncronas em Forms
  • HttpClient e tratamento de erros

Módulo 4 – RxJS e Deploy

  • Operadores Pipe, Map, Filter
  • BehaviorSubject para estados locais
  • Angular Material e Design System
  • Deploy em plataformas modernsas (Firebase/Vercel)

🛠️ Metodologia

Abordagem "Learning by Doing". Cada aula inclui uma seção teórica consolidada, exercícios progressivos e a construção incremental de um projeto que fará parte do seu portfólio profissional.

Pronto para ser um especialista Angular? Começar Agora

Roadmap do Projeto: Frontend com Angular 🚀

Este documento rastreia a evolução do curso.

✅ Fase 1: Planejamento (Concluído)

  • [x] Definição Syllabus (16 Aulas)
  • [x] Transição para Standalone Components (Angular 15+)
  • [x] Configuração MkDocs Material com layout de cards

✅ Fase 2: Conteúdo Base (Concluído)

  • [x] Criação das 16 Aulas (Markdown)
  • [x] Criação dos 16 Quizzes (HTML)
  • [x] Criação dos 16 Conjuntos de Exercícios
  • [x] Criação dos 16 Slides (RevealJS)

✅ Fase 3: Projetos e UX (Em Andamento)

  • [x] Definição dos 16 Projetos práticos
  • [/] Diagramação Mermaid de arquitetura Angular
  • [ ] Exemplos de integração HTTP reativa

🚀 Fase 4: Lançamento e Deploy

  • [ ] Build e Deploy Gh-pages
  • [ ] Validação de links e acessibilidade
  • [ ] Publicação do Projeto Final

Status Atual: Em Refatoração Última Atualização: 21/02/2026

Materiais Complementares 📚

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

  • Exercícios

    • Pratique a criação de componentes e lógica Angular.

  • Quizzes

    • Valide seu aprendizado com testes rápidos por aula.

  • Projetos

    • Construa aplicações reais do zero ao deploy.

  • Ambiente

    • Guias de instalação (Node.js, CLI, VS Code).

  • Docs Oficial

    • Documentação oficial do Angular para consulta.

Versão para Impressão

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