Platform Overview

Modern Web Control Interface

Sireum memanfaatkan React.js/Next.js untuk antarmuka yang reaktif, dipadukan dengan Python sebagai backend pemroses data turbidity dari bak air baku IPA Pakar. Halaman ini merinci arsitektur sistem yang kami gunakan.

Kembali ke Dashboard

Stack Inti

FRONTEND

React.js / Next.js

Membangun UI dashboard SPA (Single Page Application) yang interaktif.

CHARTING

Recharts / Chart.js

Visualisasi grafik real-time turbidity, pH, dan water flow di React.

BACKEND API

Python (FastAPI/Flask)

Menyediakan endpoint REST API dan memproses data menggunakan Pandas.

GEOSPASIAL

React-Leaflet

Memetakan lokasi bak air baku dan reservoir langsung di React.

Struktur File

  • React-app.tsx — entry point utama aplikasi React/Next.js.
  • Main.tsx — file mounting (render root component ke DOM).
  • Dashboard.tsx — komponen antarmuka dashboard UI.
  • app.py — entry point API backend Python (FastAPI/Flask).
  • services/ingest.py — koneksi & penarikan data dari syntrioncore.com/ingest.
  • utils/processing.py — pemrosesan data dengan Pandas (cleaning).

Backend berjalan di atas virtual environment Python 3.10 - 3.12 dengan manajemen dependency melalui requirements.txt.

Import Blueprint

// --- Frontend: React / Next.js ---
import React, { useState, useEffect } from 'react';
import { createRoot } from 'react-dom/client';
import Dashboard from './Dashboard';
import { LineChart } from 'recharts';

// --- Backend: Python (API & Data Processing) ---
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
import pandas as pd
import requests
from datetime import datetime
import uvicorn

Alur Data

Dari Sensor ke Visual (React)

  1. Perangkat keras (PTU8011, PH-300, dan sensor level ultrasonic) mengirimkan data telemetri setiap 2 detik.
  2. Skrip PHP Proxy menangkap data tersebut dan menyimpannya ke database / file JSON.
  3. Backend Python (FastAPI) mengambil data mentah dan membersihkannya menggunakan Pandas.
  4. Backend mengekspos data yang sudah bersih melalui endpoint REST API (contoh: /api/sensors).
  5. Komponen React (Dashboard.tsx) melakukan fetching data via useEffect dan memperbarui grafik secara reaktif tanpa me-reload halaman.