🚀 Capítulo 17: RxJS e Programação Reativa

🎯 Objetivo da Aula

Ao final desta aula, você entenderá o conceito de Programação Reativa usando a biblioteca RxJS no Angular, sabendo como manipular fluxos de dados contínuos usando operadores como map e filter.

---

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

O radar da sua nave recebe um fluxo contínuo de sinais do espaço. Nem todos são naves inimigas (alguns são apenas asteroides ou naves aliadas). Seu desafio hoje é usar o RxJS para filtrar esse fluxo de sinais e identificar apenas as naves do Império!

---

🧠 Fundamentos: A Teoria Traduzida

O RxJS é uma biblioteca que o Angular usa para lidar com coisas assíncronas (que não acontecem na hora). Ela usa o conceito de Streams (fluxos de dados).

1. Observable (O Fluxo)

Pense no Observable como uma esteira de fábrica ou uma transmissão de rádio. Os dados vão passando por ali um por um.

2. Operadores (Os Filtros da Esteira)

Antes de os dados chegarem no subscribe (no seu código), você pode passar eles por um “cano” (pipe) e aplicar operadores para transformar ou filtrar os dados:

• map: Transforma o dado (ex: multiplica por 2, ou transforma texto em maiúsculo).
• filter: Deixa passar apenas os dados que atendem a uma condição (ex: apenas números maiores que 10).

---

📖 Exemplo Guiado: Filtrando Sinais de Radar

Vamos simular um fluxo de sinais e filtrá-lo.

🛠️ Passo a Passo (TypeScript)

No seu painel-controle.component.ts:

1. Importe as funções do RxJS:

import { Component, OnInit } from '@angular/core';
import { of } from 'rxjs';
import { map, filter } from 'rxjs/operators';
 
@Component({ /* ... */ })
export class PainelControleComponent implements OnInit {
  
  ngOnInit(): void {
    // Criamos um fluxo de dados de teste (simulando o radar)
    const sinaisRadar = of(
      { tipo: 'Aliado', distancia: 500 },
      { tipo: 'Imperio', distancia: 1200 },
      { tipo: 'Asteroide', distancia: 300 },
      { tipo: 'Imperio', distancia: 800 }
    );
 
    // Aplicamos os operadores usando o pipe
    sinaisRadar.pipe(
      // 1. Filtramos para pegar apenas naves do Imperio
      filter(sinal => sinal.tipo === 'Imperio'),
      // 2. Transformamos o objeto para mostrar apenas um texto de alerta
      map(sinal => `🚨 ALERTA: Nave Imperial detectada a ${sinal.distancia}km!`)
    ).subscribe(mensagem => {
      console.log(mensagem);
    });
  }
}

🕹️ Como Executar e Testar no VS Code

1. Salve o arquivo e abra o navegador.
2. Abra o Console (F12).
3. Você verá apenas duas mensagens de alerta impressas, ignorando o Aliado e o Asteroide!

---

🛠️ Prática Obrigatória 1

Crie um fluxo de números de 1 a 5 usando of(1, 2, 3, 4, 5). Use o operador map para multiplicar cada número por 10 e imprima o resultado no console.

---

🛠️ Prática Obrigatória 2

No mesmo fluxo de números, adicione um operador filter antes do map para deixar passar apenas os números que são maiores que 2.

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

of(1, 2, 3, 4, 5).pipe(
  map(n => n * 10)
).subscribe(val => console.log(val));

Prática 2:

of(1, 2, 3, 4, 5).pipe(
  filter(n => n > 2),
  map(n => n * 10)
).subscribe(val => console.log(val));
// Vai imprimir: 30, 40, 50

---

← Capitulo Anterior | Proximo Capitulo →