Arduino – Alfan Nasrulloh

Dashboard Grafik Pemantauan PLTS

Project personal yang saya inisiasi sejak awal tahun 2025 ini akhirnya mulai terlihat wujudnya. Yang awalnya saya mau belajar mikrokontroller Arduino kemudian ESP dan lanjut ke IoT dan finalnya di penerapan PLTS. Satu per satu mulai dirangkai dan sampai sekarang berhasil membuat dashboard pemantauan PLTS.

Bisa dilihat di grafik diatas berupa summary dari sistem PLTS yang saya kembangkan. Tampilannya masih belum terkonsep dengan matang, masih sesuai dengan ide yang terpikir sesaat. Walaupun demikian, sudah mulai nampak flow kerjanya. Tinggal sedikit-demi sedikit disempurnakan.

Project PLTS ini merupakan tahap lanjut saya dari belajar Arduino dan ESP. Dari awalnya hanya LED, lanjut ke robotika untuk RC Car, hingga ke IoT. Semua hal fisik elektronik ini saya arahkan datanya ke lokal server yang dibangun diatas Raspberry Pi dengan docker yang menangani kontainerisasi layanan.

Ada beberapa layanan yang berjalan diatas docker ini. Diantaranya adalah mosquitto untuk layanan mqtt, influxdb yang menangani basis data, Node-RED sebagai jembatannya, dan Grafana sebagai frontend yang menampilkan datanya. Semuanya bekerja bersama dengan sistem PLTS atap.

Sepertinya sampai akhir tahun ini secara garis besar projectnya sampai tahap ini, tinggal merapikan dan merancang untuk project tahun depan. Diantaranya yang terpikirkan adalah membuat modul hot-swap agar kita bisa pasang dan copot baterai pack untuk menambah kapasitas baterai PLTS. Dulu saya pikir mau tambah kapasitas tinggal paralel baterai pack yang sudah ada BMS nya. Ternyata tidak sesederhana itu.

21 Oct 2025

Menampilkan Halaman HTML dari File Terpisah di ESP8266/ESP32

Dalam proyek ESP8266 Web Server, sering kali kita perlu menampilkan halaman web dengan HTML, CSS, dan JavaScript agar tampilannya lebih menarik dan interaktif. Alih-alih menulis kode HTML langsung di dalam kode Arduino, kita bisa menyimpan file terpisah menggunakan SPIFFS (SPI Flash File System) atau LittleFS. Dengan cara ini, struktur proyek menjadi lebih rapi dan modular.

Pada blog ini, kita akan membahas:

✔ Mengapa menyimpan HTML di file terpisah lebih baik?
✔ Cara menyimpan dan menampilkan file HTML dari ESP
✔ Kode contoh untuk membaca file HTML dari SPIFFS/LittleFS

Mengapa Menyimpan HTML di File Terpisah?

✔ Memudahkan pengeditan – Kamu bisa mengubah tampilan tanpa perlu memodifikasi kode firmware.
✔ Menghemat memori program – HTML disimpan di SPIFFS/LittleFS, bukan di flash yang digunakan oleh program utama.
✔ Lebih rapi dan modular – Bisa memisahkan file CSS, JavaScript, dan HTML seperti dalam aplikasi web normal.

Struktur File Proyek

Sebelum mulai coding, kita buat struktur folder seperti ini:

/ESP8266_WebServer
│── data/                → Folder untuk menyimpan file web
│   ├── index.html       → Halaman utama
│   ├── style.css        → Styling halaman
│   ├── script.js        → JavaScript untuk interaksi
│── ESP8266_WebServer.ino → Kode utama untuk ESP8266

Folder data/ akan digunakan oleh SPIFFS atau LittleFS untuk menyimpan file HTML.

Kode ESP8266/ESP32 untuk Membaca HTML dari SPIFFS/LittleFS

#include <ESP8266WiFi.h>
#include <ESPAsyncWebServer.h>
#include <SPIFFS.h>

const char* ssid = "SSID";
const char* password = "PASSWORD";
AsyncWebServer server(80);

void setup() {
    Serial.begin(115200);
    WiFi.begin(ssid, password);
    while (WiFi.status() != WL_CONNECTED) delay(500);

    SPIFFS.begin();
    
    // Menyajikan file HTML, CSS, dan JS dari SPIFFS
    server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
        request->send(SPIFFS, "/index.html", "text/html");
    });
    server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest *request) {
        request->send(SPIFFS, "/style.css", "text/css");
    });
    server.on("/script.js", HTTP_GET, [](AsyncWebServerRequest *request) {
        request->send(SPIFFS, "/script.js", "application/javascript");
    });

    server.begin();
}

void loop() {}

Upload File ke SPIFFS

Buka Arduino IDE
Instal plugin “ESP8266/ESP32 SPIFFS uploader”
Buka “Tools > ESP8266 Sketch Data Upload”
File HTML, CSS, dan JS akan diunggah ke SPIFFS!

Kesimpulan

✔ Menggunakan SPIFFS atau LittleFS memungkinkan penyimpanan file HTML secara terpisah di ESP.
✔ Metode ini mempermudah pengeditan dan menghemat memori program utama.
✔ Dapat dikembangkan lebih lanjut dengan AJAX atau WebSocket untuk membuat tampilan lebih dinamis.

Cara Memecah Kode Arduino Menjadi Beberapa File

Jika kamu pernah mengembangkan proyek Arduino atau ESP, kamu mungkin sering menghadapi kode yang semakin panjang dan sulit dibaca. Salah satu cara terbaik untuk mengelola proyek dengan lebih baik adalah menggunakan modular programming, yaitu memisahkan kode ke beberapa file.

Dalam artikel ini, kita akan membahas bagaimana cara membuat kode terstruktur untuk menyalakan LED menggunakan Arduino, dengan pendekatan modular coding.

Mengapa Modular Programming?

✔ Membuat kode lebih rapi – Dengan memisahkan kode menjadi beberapa file, setiap bagian dari program menjadi lebih jelas dan mudah dimengerti.
✔ Memudahkan penggunaan ulang – Kamu dapat menggunakan kembali modul tanpa harus menulis ulang seluruh kode.
✔ Mempermudah debugging – Jika terjadi kesalahan, kamu bisa lebih mudah menemukannya tanpa harus mencari di file yang panjang.

Struktur Proyek Arduino dengan Modular Coding

Sebelum mulai coding, kita buat struktur folder seperti ini:

/modular_led
│── modular_led.ino   → Kode utama
│── led.h             → Header LED
│── led.cpp           → Implementasi LED

Di sini, kita akan membuat tiga file utama:

led.h → Deklarasi fungsi dan kelas untuk kontrol LED.
led.cpp → Implementasi fungsi LED.
main.ino → Kode utama yang mengontrol bagaimana LED bekerja.

Membuat Modul LED

1. File led.h (Header untuk LED)

File led.h berisi deklarasi kelas dan fungsi yang kita gunakan:

#ifndef LED_H
#define LED_H

#include <Arduino.h>

class LED {
public:
    LED(int pin);  // Konstruktor
    void begin();  // Inisialisasi LED
    void turnOn(); // Menyalakan LED
    void turnOff(); // Mematikan LED

private:
    int ledPin; // Menyimpan pin LED
};

#endif

✔ Menggunakan kelas LED untuk mengelola fungsi LED dengan lebih efisien.
✔ Menentukan metode begin() untuk inisialisasi, turnOn() untuk menyalakan, dan turnOff() untuk mematikan LED.

2. File led.cpp (Implementasi LED)

Berisi kode implementasi untuk setiap fungsi yang ada di led.h:

#include "led.h"

LED::LED(int pin) {
    ledPin = pin;
}

void LED::begin() {
    pinMode(ledPin, OUTPUT);
}

void LED::turnOn() {
    digitalWrite(ledPin, HIGH);
}

void LED::turnOff() {
    digitalWrite(ledPin, LOW);
}

✔ Fungsi begin() mengatur pin sebagai output, sehingga LED bisa dikontrol.
✔ Metode turnOn() dan turnOff() mengontrol status LED secara langsung.

3. File modular_led.ino (Kode Utama)

Terakhir, kita tuliskan kode utama yang akan menjalankan program:

#include "led.h"

LED led(13);  // Gunakan pin 13 untuk LED

void setup() {
    led.begin();
}

void loop() {
    led.turnOn();
    delay(1000);
    led.turnOff();
    delay(1000);
}

✔ Memanggil kelas LED dengan LED led(13); untuk mengontrol LED di pin 13.
✔ Menyalakan dan mematikan LED setiap 1 detik dengan delay(1000);.

Cara Menjalankan Kode

Pastikan semua file (led.h, led.cpp, maodular_led.ino) berada dalam folder yang sama.
Buka modular_led.ino di Arduino IDE atau PlatformIO.
Upload ke board Arduino, dan lihat LED berkedip setiap 1 detik.

Kesimpulan

✔ Modular programming membantu membuat kode lebih terstruktur, mudah dibaca, dan mudah digunakan kembali.
✔ Dengan memisahkan fungsi LED ke dalam kelas dan file terpisah, program menjadi lebih rapi dan efisien.
✔ Teknik ini bisa digunakan untuk proyek yang lebih kompleks, seperti sensor, komunikasi serial, atau sistem berbasis IoT.

Modul IoT Monitor dan Kontrol

Beberapa hari terakhir saya sedang mengerjakan project untuk memonitor kondisi lingkungan. Lingkungan ini nantinya akan ditempatkan alat elektronik yang bisa mengeluarkan hawa panas. Nah, masalahnya tempat itu adalah tempat semacam kabinet yang teretutup, sehingga perlu dipertimbangkan mekanisme pendinginannya dan pembuangan hawa panas.

Bersambut dengan project saya di tahun ini lebih banyak ke mikrokontroller, saya gabungkan saja dengan konsep IoT dan kontrol. Saya menggunakan mikrokontroller keluarga ESP sebagai otaknya. Kebutuhannya adalah untuk memonitor dan mengontrol pendingin berdasarkan nilai temperatur yang didapat.

Dari berbagai produknya ESP saya pakai ESP-01 untuk kebutuhan ini. Ternyat cukup pakai GPIO yang disediakan. Simple mudah murah.

Koleksi Mikrokontroller

Setelah tulisan saya yang lalu soal explorasi kembali Arduino, sudah banyak hal yang saya explore dan juga peralatan yang saya beli. Belum semua saya coba memang, karena ketika beli komponen di marketplace online, tidak hanya alat yang mau dibeli saja yang terbeli, tetapi komponen lain yang gak terkait sama project ikut kebeli juga, ntah karena menarik atau ada ide yang tiba-tiba muncul untuk pakai komponen tersebut. Selain itu, harga komponen yang kecil-kecil harganya kecil juga sehingga rugi di ongkir.

Saat ini ada beberapa koleksi mikrokontroller yang sudah ada di meja saya:

ESP32 Dev Kit, 1 pcs
ESP-01, 2pcs
ESP-12F, 2pcs
NodeMCU Lolin, 1 pcs
Arduino Uno, 2 pcs compatible version dan 1 pcs ori
Arduino nano
IC lain…

Selain itu masih ada ESP wemos D1 mini yang masih dalam perjalanan.

Memang ada beberapa project yang sedang saya rencanakan untuk dikerjakan pakai masing-masing alat diatas. Masih mengantri satu per satu mana yang akan dikerjakan duluan.