📚 Pré-requisitos Teóricos: Este projeto prático aplica os conceitos avançados de interfaces reativas lecionados na Especialização em Backend com PHP e Laravel. Recomendamos sua consulta para contextualização sobre o ciclo de vida do Livewire 3 e Alpine.js.

A Aplicação SPA Reativa com Laravel 11 & Livewire 3 demonstra como construir interfaces modernas de alta interatividade sem a complexidade de gerenciar múltiplos ecossistemas desacoplados (como SPAs pesadas em React ou Vue). Através da computação reativa no servidor aliada ao algoritmo de DOM Morphing e Alpine.js, o Livewire entrega uma experiência de usuário instantânea com a segurança e produtividade do ecossistema Laravel.

🏛️ Arquitetura Reativa Server-Driven

O diagrama abaixo ilustra o ciclo de eventos reativos entre o navegador, o motor Livewire e o Eloquent ORM:

📁 Estrutura de Pastas Padronizada

A base de código segue o padrão canônico com nomenclatura anti-colisão:

catalogo_projetos/backend_php_02_livewire_spa/
├── api-laravel/              # Aplicação fullstack Laravel 11 com Livewire 3
│   ├── app/
│   │   ├── Livewire/
│   │   │   └── CatalogoProdutos.php   # Componente reativo server-side
│   │   └── Models/
│   │       └── Produto.php            # Modelo Eloquent
│   ├── resources/
│   │   └── views/
│   │       └── livewire/
│   │           └── catalogo-produtos.blade.php  # Template Blade com Livewire directives
│   └── composer.json                  # Dependências: laravel/framework, livewire/livewire
├── assets/                   # Galeria de diagramas visuais e arquitetura
│   └── arquitetura_laravel_livewire.svg
└── index.md                  # Especificação executiva e Padrão Ouro

🧑‍💼 Engenharia de Software & Requisitos

1. Histórias de Usuário (US)

2. Requisitos Funcionais (RF)

3. Requisitos Não-Funcionais (RNF)

4. Diagrama de Casos de Uso

flowchart TD
    subgraph Atores
        CLI["Usuário / Comprador"]
        SIS["Motor Livewire 3"]
    end

    subgraph "Aplicação Reativa (api-laravel)"
        UC1["Digitar Termo de Busca (wire:model.live)"]
        UC2["Filtrar por Categoria e Preço"]
        UC3["Navegar pelas Páginas de Produtos"]
        UC4["Visualizar Feedback de Carregamento"]
        UC5["Renderizar Patch Cirúrgico no DOM"]
    end

    CLI --> UC1
    CLI --> UC2
    CLI --> UC3
    UC1 --> SIS
    UC2 --> SIS
    UC3 --> SIS
    SIS --> UC4
    SIS --> UC5

5. Matriz de Rastreabilidade (RTM)

🛠️ Implementação do Componente (api-laravel/app/Livewire/CatalogoProdutos.php)

<?php

namespace App\Livewire;

use App\Models\Produto;
use Livewire\Component;
use Livewire\WithPagination;

class CatalogoProdutos extends Component
{
    use WithPagination;

    public string $busca = '';
    public string $categoria = '';
    public float $precoMax = 5000.0;

    protected $queryString = [
        'busca' => ['except' => ''],
        'categoria' => ['except' => ''],
    ];

    public function updatingBusca(): void
    {
        $this->resetPage();
    }

    public function render()
    {
        $produtos = Produto::query()
            ->when($this->busca, fn($q) => $q->where('nome', 'like', "%{$this->busca}%"))
            ->when($this->categoria, fn($q) => $q->where('categoria', $this->categoria))
            ->where('preco', '<=', $this->precoMax)
            ->orderBy('nome')
            ->paginate(12);

        return view('livewire.catalogo-produtos', [
            'produtos' => $produtos,
        ]);
    }
}

🚀 Roteiro de Execução

1. Iniciar Ambiente Laravel com Livewire 3

cd catalogo_projetos/backend_php_02_livewire_spa/api-laravel
composer install
php artisan migrate --seed
php artisan serve --port=8000

2. Acessar a Aplicação no Navegador

Abra http://localhost:8000 e experimente digitar no campo de busca para comprovar a reatividade em tempo real sem reload de página.

🎯 Matriz de Checkpoints de Entrega