smartthermo-iot

byakun, web

Berikut adalah **prompt versi paling sempurna dan lengkap** yang sudah ditambahkan fitur **Halaman Login**, **Suhu & Kelembaban Ruangan**, serta dioptimalkan khusus agar AI pembuat web menghasilkan kode aplikasi (Node.js/Python/PHP) yang **siap di-deploy langsung ke Cloud Panel** (seperti cPanel, AaPanel, CyberPanel, VPS, atau PaaS): --- ### **Prompt untuk AI Pembuat Web (Tinggal Copy-Paste):** > **Role & Task:** > Bertindaklah sebagai Full-Stack Web Developer profesional dan UI/UX Designer berpengalaman. Tolong buatkan kode lengkap aplikasi web siap saji (*production-ready*) untuk **Web Dashboard Monitoring Suhu Ruangan & Mesin Industri** bernama **"SmartThermo"** berbasis IoT. > Aplikasi web ini harus dirancang agar **siap di-deploy langsung ke Cloud Panel** (seperti cPanel / AaPanel / CyberPanel / VPS) lengkap dengan sistem *Backend API* dan *Frontend Dashboard* interaktif berdesain *Dark Glassmorphism* yang modern, *responsive*, dan kaya animasi. > --- > > > **Konstruksi Sistem & Hardware IoT:** > * **Master Hardware:** Microcontroller ATmega328P (Membaca sensor DHT22 & PT100 serta mengontrol relay/kipas & buzzer secara otomatis). > * **Slave Hardware:** ESP32 (Menerima data dari ATmega328P via komunikasi serial RS485 Modbus RTU, lalu mengirimkan data ke Web/Server Cloud Panel via Wi-Fi/HTTP REST API). > * **Sensor System:** > 1. **DHT22:** Membaca **Suhu (Temperature)** dan **Kelembaban (Humidity)** pada **Ruangan**. > 2. **PT100:** Membaca suhu presisi tinggi pada **Mesin Industri**. > > > * **Aktuator (Sistem Kontrol Otomatis):** > 1. **Kipas 1 (Pendingin Ruangan):** Menyala otomatis jika suhu DHT22 melebihi batas aman ruangan. > 2. **Kipas 2 (Pendingin Mesin):** Menyala otomatis jika suhu PT100 melebihi batas aman mesin. > 3. **Buzzer (Alarm Overheat):** Berbunyi otomatis jika suhu Mesin/Ruangan mencapai kondisi kritis (*danger limit*). > > > > > --- > > > **Spesifikasi & Kebutuhan Fitur Web "SmartThermo":** > **1. Tampilan Visual & UI/UX (Glassmorphism):** > * **Background Utama:** Gunakan gambar latar belakang area pabrik/industri beresolusi tinggi dengan efek *Dark Glassmorphism* (`backdrop-filter: blur()`, kontainer semi-transparan, *glowing border*). Sediakan variabel URL gambar di bagian atas kode agar mudah diganti. > * **Header & Branding:** > * Judul Utama Web: **SmartThermo** (Slogan: *"Smart Industrial Temperature & Humidity Monitoring System"*). > * Sediakan **2 Slot Logo** di bagian Top Navigation: **Logo Sekolah** (sisi kiri) dan **Logo Jurusan** (sisi kanan). > > > * **Animasi:** Terapkan animasi halus (*fade-in*, *smooth gauge transition*, *pulsing alarm glow*) pada setiap komponen widget. > > > **2. Sistem Otentikasi (Halaman Login & Security):** > * **Halaman Login (Landing Page):** Tampilan login terpisah berdesain *Glassmorphic Card* di tengah layar. > * **Form Login:** Input **Username** dan **Password** dengan validasi interaktif. > * **Session Management:** Pengguna harus login terlebih dahulu sebelum bisa mengakses Dashboard Utama (Sediakan sistem *Session/Token Protection* agar halaman dashboard tidak bisa diakses langsung via URL tanpa login). > > > **3. Fitur & Layout Dashboard Utama:** > Buatkan struktur dashboard interaktif yang terdiri dari: > * **Widget Monitoring Ruangan (DHT22):** > * Displays angka digital modern untuk **Suhu Ruangan (°C)** dan **Kelembaban Ruangan (%RH)** secara berdampingan. > > > * **Widget Monitoring Mesin (PT100):** > * **Gauge / Dial Chart Interaktif:** Menampilkan suhu mesin presisi dengan zona indikator warna (*Normal / Warning / Danger*). > > > * **Status Aktuator & Indikator Sistem:** > * **Kipas 1 (Ruangan):** Badge/Lampu Indikator Live (*ON / OFF*). > * **Kipas 2 (Mesin):** Badge/Lampu Indikator Live (*ON / OFF*). > * **Buzzer Alarm:** Badge Indikator Live (*Active / Mute*) dengan efek animasi berkedip merah saat *Overheat*. > * **Modbus RTU & Network Status:** Indikator status koneksi RS485 antara ATmega328P–ESP32–Cloud Server serta *Timestamp* data terakhir. > > > * **Grafik Analisis Real-time (Trend Chart):** > * *Multi-axis Line Chart* interaktif (Chart.js / ApexCharts) yang menampilkan pergerakan **Suhu Mesin**, **Suhu Ruangan**, dan **Kelembaban Ruangan** secara real-time. > * Filter durasi (Live / 1 Jam / 12 Jam / Hari Ini). > > > * **Pengaturan Threshold (Ambang Batas Remote):** > * Form interaktif untuk mengatur *Set Point* batas suhu Kipas 1, Kipas 2, dan Buzzer Alarm yang tersimpan ke database/server. > > > * **Riwayat Data & Export Log:** > * Tabel data historis log sensor (Suhu, Kelembaban, Status Kipas) lengkap dengan fitur *Search*, *Filter Tanggal*, *Pagination*, serta **Tombol Export Data ke CSV / Excel**. > > > > > --- > > > **4. Arsitektur Cloud Panel & Backend API (PENTING):** > Buatkan aplikasi web yang terstruktur rapi untuk di-deploy ke Cloud Panel: > * **API Endpoint RESTful (JSON):** Buat endpoint `POST /api/update-data` yang digunakan oleh ESP32 untuk mengirimkan paket data sensor secara periodik. > * **Payload JSON ESP32:** Tuliskan contoh struktur payload JSON yang dikirimkan ESP32, contoh: > ```json > { > "temp_mesin": 45.2, > "temp_ruangan": 28.5, > "hum_ruangan": 65.0, > "kipas_ruangan": 1, > "kipas_mesin": 0, > "buzzer": 0, > "modbus_status": "OK" > } > > ``` > > > * **Persistensi Data:** Sertakan skema database ringan (SQLite / MySQL) atau *JSON Storage Handler* untuk menyimpan log riwayat suhu dan akun login admin. > > > --- > > > **Deliverables (Output Kode yang Diharapkan):** > 1. Kode backend server lengkap (misal: Node.js/Express, Python/Flask, atau PHP Native) yang siap di-upload ke Cloud Panel. > 2. File HTML/CSS/JS frontend terpisah atau terintegrasi dengan struktur file yang rapi (`public/`, `views/`, `config/`). > 3. Variabel terpisah di bagian awal file konfigurasi untuk: `URL_BG_PABRIK`, `URL_LOGO_SEKOLAH`, dan `URL_LOGO_JURUSAN`. > 4. Panduan langkah singkat (*Step-by-Step Guide*) cara meng-upload dan menjalankan file tersebut di Cloud Panel / cPanel / VPS. > > buatkan daftar file seperti index.html lalu progrtam didalamnya agar bisa saya masukan ke cloud panel,