Web site - tecnologiadB/MonitoramentoRuidoWiki GitHub Wiki

Documentação Completa – Frontend dBSimaSite

Sistema de Monitoramento de Ruído
Frontend Web desenvolvido em PHP

1. Visão Geral

O dBSimaSite é o frontend web responsável por apresentar:

  • gráficos de níveis de ruído em tempo real e históricos;
  • tabelas de medições minuto/segundo e por período;
  • relatórios consolidados;
  • diagnósticos da estação e status operacional.

Ele integra-se diretamente com a:

  • API Backend (.NET)
  • Banco PostgreSQL
  • Estação Local (SoftwareEnvio / SoftwareExportacao)

Toda a lógica do frontend depende da API para obter as medições.

2. Arquitetura Geral do Frontend

flowchart LR
    User[Usuario Navegador] --> FE[dBSimaSite PHP]
    FE --> API[API Backend DOTNET]
    API --> DB[PostgreSQL]
    FE --> Charts[JavaScript Graficos]
Loading

3. Estrutura Lógica do Sistema

flowchart TB

    subgraph Frontend dBSimaSite
        Index[index.php<br/>Tela Inicial]
        Dashboard[dashboard.php<br/>Gráficos e Indicadores]
        APIClient[cliente_api.php<br/>Chamadas HTTP para a API]
        Config[config.php<br/>URLs e parâmetros]
        Templates[HTML/PHP Templates]
        Assets[JS + CSS]
    end

    Index --> APIClient
    Dashboard --> APIClient
    APIClient --> Config
    Dashboard --> Assets
    Assets --> Charts[Gráficos JS]
Loading

4. Fluxo Principal – Carregamento do Dashboard

Processo típico quando o usuário abre o dashboard:

sequenceDiagram
    participant U as Usuário
    participant B as Navegador
    participant F as PHP Frontend
    participant A as API Backend
    participant D as PostgreSQL

    U->>B: Acessa /dashboard.php
    B->>F: Requisição GET
    F->>F: Ler filtros (estação, datas)
    F->>A: GET /medicoes?estacao=x&inicio=y&fim=z
    A->>D: Consulta banco
    D-->>A: Retorna registros
    A-->>F: JSON com medições
    F->>F: Processa JSON
    F-->>B: HTML com dados + scripts
    B->>B: Renderiza gráficos
Loading

5. Fluxo – Atualização por Filtros

Quando o usuário altera filtros (estação, intervalo, período):

flowchart LR
    Usuario --> Navegador
    Navegador --> PHPFiltro[PHP - Controlador de Filtros]
    PHPFiltro --> API[API Backend]
    API --> DB[(PostgreSQL)]
    DB --> API
    API --> PHPFiltro
    PHPFiltro --> Navegador
    Navegador --> Graficos[Atualização dos Gráficos JS]
Loading

6. Componentes Internos – Documentação Técnica

6.1 Arquivo config.php

  • Define URL da API Backend

  • Chave de acesso (se houver)

  • Timeouts e configurações de segurança

6.2 Controladores PHP

Exemplos:

  • index.php

  • dashboard.php

  • relatorios.php

Responsabilidades:

  • Capturar filtros (GET/POST)

  • Chamar funções de cliente HTTP

  • Renderizar templates

6.3 Cliente HTTP

Funções típicas:

function api_get($rota) {
    $url = API_URL . $rota;
    $json = file_get_contents($url);
    return json_decode($json, true);
}

ou via cURL:

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$resposta = curl_exec($ch);
curl_close($ch);

6.4 JS de Gráficos

Normalmente usa:

  • Chart.js

  • Highcharts

  • ApexCharts

  • Ou gráficos próprios

7. Fluxo – Erros da API Backend

flowchart TD
    A[Chamar API Backend] --> B{Resposta OK?}
    B -- Não --> C[Registrar erro em log local]
    C --> D[Exibir mensagem amigável ao usuário]
    B -- Sim --> E[Processar JSON de medição]
    E --> F[Renderizar gráficos]
Loading

8. Fluxo – Renderização de Gráficos

flowchart TB
    PHP[PHP prepara arrays JSON] --> HTML[HTML embute dados]
    HTML --> JS[Javascript inicializa graficos]
    JS --> ChartLib[Biblioteca de Graficos]
    ChartLib --> Canvas[Renderizacao no Canvas]
Loading

9. Integração com a API – Contratos Prováveis

Com base na arquitetura geral:

GET /medicoes

Retorna lista de medições por intervalo.

GET /medicoes/ultima

Retorna última medição (minuto/segundo).

GET /relatorios?tipo=x

Retorna dados agregados.

GET /status

Verifica se a API está operacional.

10. Diagrama – Fluxo Completo Conta a Conta

flowchart LR
    Usuario --> Navegador
    Navegador --> Frontend[Frontend PHP]
    Frontend --> API[API Backend]
    API --> DB[(PostgreSQL)]
    Frontend --> Charts[JS + Charts]
    Charts --> Usuario
Loading

11. Sugestões Arquiteturais

  • Centralizar cliente HTTP

  • Tratamento robusto de erros

  • Sanitização de entrada e saída

  • Separar template HTML da lógica PHP

  • Cache leve para carregamento rápido

⚠️ **GitHub.com Fallback** ⚠️