Projecte Final
Tema 10 · Aplicació completa – Sistema SCADA Web
Introducció
En aquest projecte integrador aplicaràs totes les eines del trimestre per construir un sistema SCADA web (Supervisory Control And Data Acquisition). Un SCADA permet supervisar i controlar processos industrials des d'una interfície web. Integraràs HTML5, CSS, JavaScript, DOM, Chart.js, APIs i LocalStorage en una sola aplicació.
Objectiu
Simular el funcionament d'un sistema real de monitorització industrial completament funcional al navegador.
Requisits del Projecte
- Interfície amb HTML5 i CSS Grid/Flexbox responsive
- Targetes KPI amb indicadors en temps real (simulats amb
setInterval) - Gràfics interactius amb Chart.js (línies, barres, sectors)
- Registre d'alarmes amb persistència a LocalStorage
- Consulta a una API externa (meteorològica, preu elèctric...) per a dades contextuals
- Càlculs d'enginyeria en JavaScript (consums, rendiments, etc.)
- Exportació de dades a JSON/CSV
Arquitectura de l'aplicació
| Component | Tecnologies | Descripció |
|---|---|---|
| Interfície (UI) | HTML5, CSS Grid | Disposició de targetes, gràfics i taules |
| Lògica de negoci | JavaScript, DOM | Simulació de sensors, càlculs, alarmes |
| Visualització | Chart.js | Gràfics d'històric i distribució |
| Persistència | LocalStorage, JSON | Registre d'alarmes i configuració |
| Dades externes | API fetch() | Temperatura ambient real o preu de l'energia |
Exemple integrador: generació de dades i alarmes
// Simulador de sensors amb generació d'alarmes
class SensorSimulator {
constructor(nom, unitat, minNormal, maxNormal) {
this.nom = nom;
this.unitat = unitat;
this.minNormal = minNormal;
this.maxNormal = maxNormal;
this.valor = (minNormal + maxNormal) / 2;
}
actualitzar() {
// Variació aleatòria controlada
this.valor += (Math.random() - 0.5) * (this.maxNormal - this.minNormal) * 0.1;
this.valor = Math.round(this.valor * 100) / 100;
return this.valor;
}
estaForaDeRang() {
return this.valor < this.minNormal || this.valor > this.maxNormal;
}
}
// Ús
const sensorTemp = new SensorSimulator('Temperatura', '°C', 15, 28);
setInterval(() => {
const valor = sensorTemp.actualitzar();
document.getElementById('kpi-temp').textContent = valor;
if (sensorTemp.estaForaDeRang()) {
registrarAlarma(sensorTemp.nom, valor, sensorTemp.unitat);
}
}, 2000);Checklist del Projecte Final
HTML5 semàntic i responsive
CSS Grid / Flexbox
Targetes KPI dinàmiques
Gràfics amb Chart.js (≥3)
Registre d'alarmes (LocalStorage)
Consulta API externa
Càlculs d'enginyeria (consums, rendiments)
Exportació de dades (JSON/CSV)
Projecte Final – Sistema SCADA Web per a una planta industrial
Cada alumne desenvoluparà un sistema SCADA per a un tipus de planta diferent:
· Planta solar· Planta eòlica· Central hidroelèctrica
· Depuradora d'aigües· Línia d'envasat· Forn industrial
· Sistema de climatització· Planta de biogàs· Subestació elèctrica
· Fàbrica de ciment· Planta química· Centre de dades
· Planta de reciclatge· Xarxa de distribució· Taller automatitzat
L'aplicació ha d'incloure:
- Dashboard principal amb almenys 4 indicadors KPI i 3 gràfics.
- Simulació realista de sensors (temperatura, pressió, cabal, potència, nivell... segons el tipus de planta).
- Sistema d'alarmes amb registre persistent (LocalStorage) i notificació visual.
- Connexió a una API externa per a dades complementàries (meteorologia, preu elèctric...).
- Secció de configuració on es puguin ajustar els llindars d'alarma.
- Exportació de l'històric d'alarmes a un fitxer descarregable.
- Codi ben comentat i organitzat en funcions reutilitzables.
Lliuraments: fitxer HTML únic autocontingut + breu documentació (README) explicant el funcionament.