Smart Garden

Sistem monitoring dan penyiraman tanaman otomatis berbasis IoT — Kelompok 6

Tentang Projek ini

Smart Garden adalah sistem IoT yang memantau kondisi kebun secara real-time dan mengontrol pompa penyiram tanaman secara otomatis. ESP32 membaca data sensor tanah, suhu, dan kelembaban udara, lalu mengirimkannya ke dashboard web melalui MQTT.

Pengguna bisa memantau sensor, mengontrol pompa, dan mengatur threshold/jadwal siram — semuanya dari browser.

Versi ringan berbasis PHP murni tersedia di branch lite — tanpa Node.js, tanpa build step, cukup PHP + MariaDB.

Full vs Lite

	Full (branch main)	Lite (branch lite)
Tech stack	React + Node.js + Laravel	PHP murni
Build step	`npm run build`	Tidak perlu
Install	10+ langkah	Ekstrak + isi `.env`
Dashboard real-time	✅	✅
Kontrol pompa	✅	✅
Grafik historis	✅	✅
Jadwal siram	✅	✅
Info cuaca	✅	✅
Admin panel	✅	✅
Panduan	✅	✅
Feedback pengguna	✅	❌
Dokumentasi projek	✅	❌
Halaman Tentang	✅	❌
Landing page	✅	❌
PWA (installable)	✅	❌
AI Assistant	✅	❌
OTA firmware update	✅	❌
REST API	✅	❌

Buat projek sekolah/kampus: versi Full cocok karena ada halaman Feedback (pengguna bisa kasih penilaian & komentar) dan Dokumentasi (foto/video dokumentasi projek) — nilai plus buat presentasi.
Kalau cuma butuh monitoring sensor cepat tanpa setup ribet, pakai Lite.

Fitur Utama

Fitur	Deskripsi
📊 Real-time Monitoring	Data sensor langsung dari ESP32 lewat MQTT WebSocket
💧 Kontrol Pompa	Nyala/mati manual + mode AUTO berdasarkan kelembaban tanah
📈 Grafik Historis	Histori sensor dari 1 jam hingga 1 bulan
⏰ Jadwal Siram	Atur hari & jam siram otomatis
🌤️ Info Cuaca	Perkiraan cuaca & peluang hujan lewat Open-Meteo
🔧 OTA Update	Firmware ESP32 update otomatis tanpa kabel
🤖 AI Assistant	Tanya langsung tentang fitur dashboard

Arsitektur Sistem

ESP32 (Firmware)
  ├── DHT11       → Suhu udara & kelembaban
  ├── DS18B20     → Suhu air
  ├── Soil Sensor → Kelembaban tanah
  └── Relay       → Pompa air
       │
       └── MQTT TCP → Mosquitto Broker
                │
                ├── mqttSave.js     → MariaDB (histori sensor)
                ├── serverStats.js  → CPU/RAM/Disk metrik
                └── React Frontend  → WSS (lewat Cloudflare Tunnel)

Tech Stack

Firmware

ESP32 + Arduino IDE
DHT11, DS18B20, PubSubClient, ArduinoJson, WiFiManager, HTTPUpdate

Backend

Laravel (REST API + Admin Panel) — port 8000 via pm2
Node.js (MQTT jobs: mqttSave, serverStats) — via pm2
MariaDB
Mosquitto MQTT Broker

Frontend

React 18 + Vite
Redux Toolkit
Chart.js (react-chartjs-2)
MQTT.js

Infrastruktur

Apache (reverse proxy + SPA serving)
Cloudflare Tunnel (HTTPS tanpa port forwarding)
Linux (OS Server)

Struktur Repo

smart-garden/
├── firmware/          # Kode Arduino ESP32 (firmware.ino)
├── frontend/          # React SPA (Vite)
│   └── src/
│       ├── pages/     # Dashboard, Settings, Sistem, dll
│       ├── redux/     # State management
│       └── components/
├── backend/           # Node.js MQTT jobs (mqttSave, serverStats)
├── laravel/           # Laravel REST API + Admin Panel
└── database/          # Schema SQL (schema.sql)

Download / Clone

Rekomendasi: clone via Git — bisa pull update terbaru kapanpun.

git clone https://github.com/Adri158/smart-garden.git
cd smart-garden

Atau download ZIP dari halaman Releases.

Install

Lihat panduan instalasi lengkap per sistem operasi di INSTALL.md.

Ringkasan langkah:

Install prerequisites (Node.js, PHP, Composer, MariaDB, Mosquitto)
Clone repo
Buat database smartgarden, import database/schema.sql
Copy & isi .env (root + laravel/ + frontend/)
Setup backend Node.js + Laravel via pm2
Build frontend React
Konfigurasi Apache
(Opsional) Flash firmware ke ESP32

Variabel .env

Root .env (dibaca Node.js backend & laravel via config):

DB_HOST=127.0.0.1
DB_NAME=smartgarden
DB_USER=root
DB_PASS=

ADMIN_USER=admin
ADMIN_PASS=ganti_ini

API_KEY=random_string_panjang

OPENAI_API_KEY=sk-...

laravel/.env (copy dari laravel/.env.example):

APP_URL=http://localhost:8000
DB_HOST=127.0.0.1
DB_DATABASE=smartgarden
DB_USERNAME=root
DB_PASSWORD=
API_KEY=sama_dengan_root_env

frontend/.env (copy dari frontend/.env.example):

VITE_APP_URL=http://localhost
VITE_MQTT_URL=ws://localhost:9002
VITE_API_BASE=
VITE_API_KEY=sama_dengan_root_env

Jalankan Services

Setelah setup, semua service dijalankan via pm2:

# Backend (dari root folder smart-garden)
pm2 startOrReload backend/ecosystem.config.js --update-env
pm2 save
pm2 startup

Ecosystem menjalankan 3 proses:

mqtt-save — menyimpan data sensor dari MQTT ke MariaDB
server-stats — memantau CPU/RAM/disk lalu publish ke MQTT
laravel-api — Laravel REST API + Admin Panel (port 8000)

Cek status:

pm2 status
pm2 logs [nama-proses]

Apache Config

Buat file virtual host (misal /etc/httpd/conf/conf.d/smart-garden.conf):

<VirtualHost *:80>
    DocumentRoot /path/ke/smart-garden/frontend/dist

    <Directory /path/ke/smart-garden/frontend/dist>
        AllowOverride All
        Require all granted
        RewriteEngine On
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteRule ^ /index.html [L]
    </Directory>

    ProxyPreserveHost On
    ProxyPass /api http://localhost:8000/api
    ProxyPassReverse /api http://localhost:8000/api
    ProxyPass /admin http://localhost:8000/admin
    ProxyPassReverse /admin http://localhost:8000/admin
</VirtualHost>

Topik MQTT

Topik	Arah	Isi
`smartgarden/{id}/sensor/soil`	ESP → Broker	Kelembaban tanah (%)
`smartgarden/{id}/sensor/dht`	ESP → Broker	Suhu udara (°C)
`smartgarden/{id}/sensor/hum`	ESP → Broker	Kelembaban udara (%)
`smartgarden/{id}/sensor/ds18b20`	ESP → Broker	Suhu air (°C)
`smartgarden/{id}/status/relay`	ESP → Broker	`ON` / `OFF`
`smartgarden/{id}/status/mode`	ESP → Broker	`AUTO` / `MANUAL`
`smartgarden/{id}/control/relay`	Browser → ESP	Toggle pompa
`smartgarden/{id}/control/mode`	Browser → ESP	Ganti mode
`smartgarden/{id}/config`	Browser → ESP	Threshold (JSON)
`smartgarden/{id}/schedules`	Browser → ESP	Jadwal siram (JSON)

Akses Publik via Cloudflare Tunnel

Buat dashboard bisa diakses dari internet tanpa port forwarding atau IP publik.
Butuh domain yang sudah di-manage di Cloudflare.

1 — Install cloudflared

Windows:

winget install --id Cloudflare.cloudflared

Ubuntu/Debian:

curl -L https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64.deb -o cloudflared.deb
sudo dpkg -i cloudflared.deb

Arch/Manjaro:

yay -S cloudflared

macOS:

brew install cloudflared

2 — Login & Buat Tunnel

cloudflared tunnel login
cloudflared tunnel create smart-garden

Catat Tunnel ID yang muncul.

3 — Konfigurasi Tunnel

OS	Path Config
Windows	`C:\Users\<user>\.cloudflared\config.yml`
Linux	`/etc/cloudflared/config.yml`
macOS	`~/.cloudflared/config.yml`

tunnel: <TUNNEL-ID-KAMU>
credentials-file: /path/ke/<TUNNEL-ID-KAMU>.json

ingress:
  - hostname: domainkamu.com
    service: http://localhost:80

  - hostname: api.domainkamu.com
    service: http://localhost:8000

  - hostname: mqtt.domainkamu.com
    service: ws://localhost:9002

  - service: http_status:404

4 — DNS di Cloudflare Dashboard

DNS → Add Record:

Type	Name	Target
CNAME	`@`	`<TUNNEL-ID>.cfargotunnel.com`
CNAME	`api`	`<TUNNEL-ID>.cfargotunnel.com`
CNAME	`mqtt`	`<TUNNEL-ID>.cfargotunnel.com`

Pastikan Proxy status = Proxied (ikon awan oranye).

5 — Jalankan sebagai Service

Windows:

cloudflared service install

Linux:

sudo cloudflared service install
sudo systemctl enable --now cloudflared

macOS:

sudo cloudflared service install

6 — Update frontend/.env untuk Domain Publik

VITE_APP_URL=https://domainkamu.com
VITE_MQTT_URL=wss://mqtt.domainkamu.com

Lalu rebuild:

cd frontend && npm run build

Dukung Projek Ini

Kalau projek ini berguna buat kamu, atau sekadar pengen support, bantuan kecil ini sangat berarti:

⭐ Star — bantu projek ini makin keliatan di GitHub search
🍴 Fork — pengen modif buat projek sendiri? fork aja, bebas!
🐛 Issue — nemuin bug? langsung buka Issues
💡 PR — mau nambahin fitur? fork → implement → buka Pull Request

Kontak

Mau request fitur, tanya-tanya, atau cuman nyapa? Kontak gw:

Lisensi

Klik untuk lihat hak & ketentuan lengkap

Boleh:

Harus:

Tidak boleh:

Singkatnya: bebas pakai, modif, dan distribusikan — asal tetap cantumkan lisensi aslinya.
Detail lengkap di file LICENSE.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Smart Garden

Tentang Projek ini

Full vs Lite

Fitur Utama

Arsitektur Sistem

Tech Stack

Struktur Repo

Download / Clone

Install

Variabel .env

Jalankan Services

Apache Config

Topik MQTT

Akses Publik via Cloudflare Tunnel

1 — Install cloudflared

2 — Login & Buat Tunnel

3 — Konfigurasi Tunnel

4 — DNS di Cloudflare Dashboard

5 — Jalankan sebagai Service

6 — Update frontend/.env untuk Domain Publik

Dukung Projek Ini

Kontak

Lisensi

About

Uh oh!

Releases 1

Packages

Uh oh!

Contributors

Uh oh!

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
backend		backend
database		database
firmware		firmware
frontend		frontend
laravel		laravel
.env.example		.env.example
.gitattributes		.gitattributes
.gitignore		.gitignore
.htaccess		.htaccess
INSTALL.md		INSTALL.md
LICENSE		LICENSE
README.md		README.md

Folders and files

Latest commit

History

Repository files navigation

Smart Garden

Tentang Projek ini

Full vs Lite

Fitur Utama

Arsitektur Sistem

Tech Stack

Struktur Repo

Download / Clone

Install

Variabel .env

Jalankan Services

Apache Config

Topik MQTT

Akses Publik via Cloudflare Tunnel

1 — Install cloudflared

2 — Login & Buat Tunnel

3 — Konfigurasi Tunnel

4 — DNS di Cloudflare Dashboard

5 — Jalankan sebagai Service

6 — Update frontend/.env untuk Domain Publik

Dukung Projek Ini

Kontak

Lisensi

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 1

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages