Spec Frontend Com Angular • Trilha Progressiva em 4 Níveis

🧭 Navegação Pedagógica

🎯 Nível 1: Fundamentos

Problema 11.1 — Transformação e Filtragem com map() e filter()

Contexto: Transformação e Filtragem com map() e filter() no contexto de Operadores Essenciais do RxJS (switchMap, debounceTime, catchError).

Requisitos de Execução:

  1. Criar pipeline RxJS que filtre números pares e multiplique por 10 com pipe(filter(x => x % 2 === 0), map(x => x * 10)).

Resultado Esperado

Pipeline de transformação matemática de streams executado.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_11_1_SeuNome
  2. Envie na tarefa: Atividade Cap 11 - Operadores Essenciais do RxJS (switchMap, debounceTime, catchError)
🔑 Gabarito de Código & Solução Comentada 
// pipeline-basic.ts
import { of } from 'rxjs';
import { map, filter } from 'rxjs/operators';

of(1, 2, 3, 4, 5, 6).pipe(
  filter(n => n % 2 === 0),
  map(n => n * 10)
).subscribe(res => console.log('Resultado:', res)); // 20, 40, 60

🔍 Nível 2: Prática

Problema 11.2 — Typeahead de Busca com debounceTime() e distinctUntilChanged()

Contexto: Typeahead de Busca com debounceTime() e distinctUntilChanged() no contexto de Operadores Essenciais do RxJS (switchMap, debounceTime, catchError).

Requisitos de Execução:

  1. Tratar input de busca aguardando 300ms de pausa na digitação e ignorando termos repetidos.

Resultado Esperado

Busca disparada apenas quando o usuário terminar de digitar.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_11_2_SeuNome
  2. Envie na tarefa: Atividade Cap 11 - Operadores Essenciais do RxJS (switchMap, debounceTime, catchError)
🔑 Gabarito de Código & Solução Comentada 
// typeahead.ts
import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

export const termoBusca$ = new Subject<string>();

termoBusca$.pipe(
  debounceTime(300),
  distinctUntilChanged()
).subscribe(termo => console.log('Executando busca no servidor por:', termo));

⚡ Nível 3: Integração

Problema 11.3 — Cancelamento de Requisições Obsoletas com switchMap()

Contexto: Cancelamento de Requisições Obsoletas com switchMap() no contexto de Operadores Essenciais do RxJS (switchMap, debounceTime, catchError).

Requisitos de Execução:

  1. Mapear termo de busca para chamada HTTP cancelando a requisição anterior em caso de nova digitação.

Resultado Esperado

Requisição anterior cancelada automaticamente com switchMap.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_11_3_SeuNome
  2. Envie na tarefa: Atividade Cap 11 - Operadores Essenciais do RxJS (switchMap, debounceTime, catchError)
🔑 Gabarito de Código & Solução Comentada 
// switchmap-search.ts
import { Subject, of } from 'rxjs';
import { switchMap, delay } from 'rxjs/operators';

export const searchInput$ = new Subject<string>();

searchInput$.pipe(
  switchMap(q => of(`Resultado para ${q}`).pipe(delay(500)))
).subscribe(console.log);

🏆 Nível 4: Desafio Corporativo

Problema 11.4 — Tratamento Resiliente de Erros com catchError() e retry()

Contexto: Tratamento Resiliente de Erros com catchError() e retry() no contexto de Operadores Essenciais do RxJS (switchMap, debounceTime, catchError).

Requisitos de Execução:

  1. Reexecutar chamada com retry(2) e fornecer fallback elegante com catchError(() => of([])).

Resultado Esperado

Falha de rede tratada com retries automáticos e retorno de lista vazia.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_11_4_SeuNome
  2. Envie na tarefa: Atividade Cap 11 - Operadores Essenciais do RxJS (switchMap, debounceTime, catchError)
🔑 Gabarito de Código & Solução Comentada 
// resilient-stream.ts
import { throwError, of } from 'rxjs';
import { retry, catchError } from 'rxjs/operators';

export function buscarComFallback(source$: any) {
  return source$.pipe(
    retry(2),
    catchError((err) => {
      console.error('Falha persistente:', err);
      return of([]); // Fallback
    })
  );
}
⬅️ Voltar ao Índice de Exercícios 📚 Sumário de Tópicos