Masuk Daftar

Panduan & Tutorial Deeptech

Dari merakit sirkuit virtual hingga membuat server IoT mandiri — pelajari setiap fitur secara terstruktur, langkah demi langkah.

1. Pengenalan Komponen Sirkuit IoT

Deeptech menyediakan perpustakaan komponen lengkap yang dapat Anda gunakan dan kombinasikan. Komponen terbagi menjadi tiga kategori: Mikrokontroler, Sensor, dan Aktuator.

🧠

ESP32 NodeMCU

Otak sirkuit. Memiliki pin digital (D0–D34), pin analog (VP, VN), pin daya (3V3, 5V), dan pin GND. Mendukung WiFi bawaan untuk proyek IoT.

🌡️

Sensor Suhu & Kelembaban DHT22

Membaca suhu (°C) dan kelembaban udara (%). Pin: VCC (3.3V–5V), GND, DATA (digital ke pin D ESP32).

☀️

Sensor Cahaya LDR

Membaca intensitas cahaya lingkungan (analog 0–4095). Pin 1 dan 2 perlu dihubungkan ke pin Analog (VP/VN) ESP32.

💡

Lampu LED

Aktuator penghasil cahaya. Pin A(+) ke GPIO output ESP32 (misal D2), pin K(–) ke GND.

🔀

Relay 5V

Sakelar elektronik untuk mengendalikan perangkat bertegangan tinggi. Pin: VCC→5V, GND→GND, IN→Pin Digital.

📡

Sensor Jarak HC-SR04

Mengukur jarak dengan gelombang ultrasonik. Pin: VCC→5V, GND→GND, TRIG→Digital, ECHO→Digital.

💨

Sensor Gas MQ-2

Mendeteksi kadar gas (asap, LPG). Pin: VCC→5V, GND→GND, A0→Analog (VP).

🪴

Sensor Kelembaban Tanah

Membaca kelembaban tanah (analog 0–1023). Pin: VCC→3.3V, GND→GND, A0→Analog (VP).

⚡

Sumber Daya AC 220V

Representasi catu daya listrik rumah. Hubungkan ke Relay melalui jalur L (Phase) dan N (Neutral).

💡

Lampu AC 220V

Beban listrik tegangan tinggi (bola lampu rumah). Dikendalikan oleh Relay. Pin: L (Input Phase) dan N (Neutral).

2. Merakit Sirkuit pada Kanvas

Navigasi Kanvas Klik kiri tahan → Geser kanvas (Pan). Scroll mouse → Zoom in/out. Klik komponen → Pilih. Tekan R → Putar komponen. Tekan Delete → Hapus.
1
Menambahkan Komponen Tarik (drag-and-drop) nama komponen dari sidebar kiri ke area kanvas, atau klik sekali nama komponen di sidebar, lalu klik posisi tujuan di kanvas.
2
Menghubungkan Kabel (Wiring) Klik sekali pada pin asal (lingkaran di tepi komponen). Kursor berubah menjadi crosshair. Klik pin tujuan pada komponen lain untuk menyelesaikan kabel. Kabel berwarna hijau = valid; merah = error.
3
Memutar Komponen Klik komponen di kanvas untuk memilihnya, lalu tekan tombol R di keyboard, atau gunakan ikon putar (🔄) di toolbar mini yang muncul di atas komponen.
4
Menghapus Komponen / Kabel Klik komponen atau kabel yang ingin dihapus → tekan Delete atau Backspace. Anda juga bisa klik kanan komponen untuk menu konteks.
Rules Engine (Validasi Otomatis) Sistem otomatis memblokir kabel yang tidak valid: sambungan VCC↔GND langsung (short circuit), koneksi pin 5V ke pin 3.3V, atau data analog ke pin digital murni. Pesan error akan muncul di bagian atas kanvas.

3. Pemrograman Logika Blok (Blockly)

Setelah sirkuit selesai dirakit, klik tab 2. Logika Blok di atas untuk masuk ke editor visual. Setiap blok yang Anda susun di sini secara otomatis diterjemahkan menjadi kode C++ Arduino.

📦

Kategori Logika

Blok Jika / maka / selain itu, blok perbandingan (>, <, =), dan blok logika boolean (DAN, ATAU).

🌡️

Sensor (Dinamis)

Blok baca suhu DHT22, baca cahaya LDR, baca gas MQ2, dll — hanya muncul jika sensor tersebut ada di kanvas.

💡

Aktuator (Dinamis)

Blok Set LED ke HIGH/LOW, Set Relay ke HIGH/LOW — hanya muncul jika aktuator tersebut sudah terhubung ke ESP32.

⏱️

Waktu

Blok Tunggu X milidetik untuk membuat LED berkedip (blink) atau memberikan jeda antar perintah.

📱

Blynk IoT

Blok Ketika Blynk Pin V0 menerima status, Nilai Blynk diterima, dan Kirim nilai ke Blynk Pin.

🌐

Web Server

Blok Ketika Web Server menerima alamat /toggle, Kirim respon 200, dan Baca parameter URL.

Pratinjau Kode C++ Real-Time Setiap perubahan blok di workspace otomatis di-transpilasi. Klik ikon Kode C++ di toolbar kanan atas untuk membuka panel pratinjau kode yang siap di-copy ke Arduino IDE!

4. Menjalankan Simulator Sirkuit

Simulator memungkinkan Anda menguji logika program tanpa hardware fisik. Semua komponen di kanvas akan bereaksi secara visual dan real-time.

1
Mulai Simulasi Klik tombol Simulasi di toolbar kanan atas. Sistem akan memvalidasi sirkuit terlebih dahulu. Jika valid, panel Kontrol Simulator akan muncul di sudut kanan bawah layar.
2
Mengatur Nilai Sensor (Slider) Panel simulator menampilkan slider untuk setiap sensor yang ada di kanvas — Suhu DHT22, Kelembaban DHT22, Cahaya LDR, Kadar Gas MQ-2, Kelembaban Tanah, dan Jarak HC-SR04. Geser slider untuk mensimulasikan kondisi lingkungan nyata.
3
Amati Reaksi Sirkuit Ketika kondisi logika terpenuhi, LED akan bercahaya merah terang, Relay akan menyala kuning, dan Lampu AC 220V akan bersinar emas secara otomatis.
4
Menghentikan Simulasi Klik tombol Hentikan untuk mengakhiri simulasi. Semua komponen akan kembali ke keadaan awal (mati).
LED Blink (Berkedip) Untuk membuat LED berkedip, susun blok: Set LED ke HIGH → Tunggu 500ms → Set LED ke LOW → Tunggu 500ms. Simulator akan menjalankan loop ini secara terus-menerus.

5. Mendesain Dasbor Monitoring

Tab 3. Desain Dasbor memungkinkan Anda merancang panel monitoring yang terhubung langsung ke kanvas sirkuit dan simulator. Widget dapat diseret-dan-dijatuhkan secara bebas.

📊

Radial Gauge

Menampilkan nilai sensor (suhu, kelembaban, dll) dalam format angka dengan progress bar. Cocok untuk monitoring nilai tunggal real-time.

📈

Line Chart (Grafik)

Menampilkan riwayat tren data sensor dalam grafik batang bergeser. Setiap tick simulasi menambahkan satu data baru ke grafik.

🔘

Sakelar Kontrol

Tombol ON/OFF interaktif yang langsung mengaktifkan/menonaktifkan Relay atau LED di kanvas simulator ketika diklik.

1
Tambahkan Widget Dari sidebar kiri, tarik widget yang diinginkan (Radial Gauge, Line Chart, atau Sakelar Kontrol) ke area kerja dasbor sebelah kanan.
2
Hubungkan ke Sensor/Pin Setiap widget memiliki dropdown "Hubungkan ke Pin/Sensor". Pilih sensor aktif (misal: dht22_1 - Temperature) atau aktuator aktif (misal: relay_1) dari daftar yang muncul.
3
Jalankan Simulasi & Lihat Update Live Kembali ke tab Kanvas, tekan tombol Simulasi, lalu kembali ke tab Dasbor. Geser slider sensor di panel simulator — widget gauge dan chart akan memperbarui nilainya secara real-time!
4
Kontrol Aktuator dari Dasbor Klik tombol ON pada widget Sakelar Kontrol yang dihubungkan ke Relay → Relay di kanvas akan langsung menyala kuning dan Lampu AC akan bercahaya seketika!

6. Kontrol via HP: Blynk IoT (Opsional)

Blynk adalah platform IoT populer yang memungkinkan kontrol ESP32 Anda melalui aplikasi di HP. Di Deeptech, Anda bisa menyimulasikan interaksi HP ini menggunakan mockup handphone virtual yang muncul saat simulasi berjalan — tanpa perlu akun Blynk!

Blok yang tersedia di kategori "Blynk IoT":

blynk_write_event

Ketika Blynk Pin [V0] menerima status

Blok pemicu (hat block). Kode di dalamnya berjalan ketika pengguna menekan tombol pada pin virtual tersebut di aplikasi HP.

blynk_get_val

Nilai Blynk diterima

Blok nilai (reporter). Mengembalikan nilai yang dikirim tombol HP: 1 untuk ON, 0 untuk OFF. Gunakan di dalam blok kondisi.

blynk_virtual_write

Kirim nilai ke Blynk Pin [V1]

Mengirimkan data (nilai sensor) ke pin virtual Blynk sehingga tampil sebagai gauge di aplikasi HP pengguna.

Simulator Handphone Virtual Ketika simulasi dijalankan dan Anda menggunakan blok Blynk, sebuah mockup handphone hitam akan muncul secara otomatis di layar. Toggle switch pada layar HP tersebut merepresentasikan tombol aplikasi Blynk — klik untuk mengaktifkan/menonaktifkan Relay secara langsung!

Kode C++ yang di-generate otomatis:

#define BLYNK_TEMPLATE_ID "TMPLxxxxxx" #include <WiFi.h> #include <BlynkSimpleEsp32.h> char auth[] = "YourAuthToken"; char ssid[] = "YourNetworkName"; char pass[] = "YourPassword"; // Handler otomatis saat tombol V0 di aplikasi HP ditekan BLYNK_WRITE(V0) { int value = param.asInt(); digitalWrite(2, value); // Relay di pin D2 } void setup() { pinMode(2, OUTPUT); Blynk.begin(auth, ssid, pass); } void loop() { Blynk.run(); // Terus terima event dari HP }

7. Web Server Mandiri ESP32 (Tanpa Pihak Ketiga!)

Fitur paling kuat Deeptech: ESP32 Anda menjadi server web mandiri. Tidak perlu router, tidak perlu platform cloud, tidak perlu internet! ESP32 membuat jaringan WiFi sendiri (Access Point), dan siapa saja yang terhubung ke WiFi tersebut dapat mengakses dasbor kontrol melalui browser biasa.

Cara Kerjanya ESP32 aktif sebagai WiFi Access Point dengan nama "ESP32_Dashboard", password "12345678". Pengguna tinggal terhubung ke WiFi tersebut dari HP/laptop, lalu buka browser ke alamat http://192.168.4.1.

Blok yang tersedia di kategori "Web Server":

webserver_on_route

Ketika Web Server menerima alamat [/toggle]

Menangani request HTTP GET ke path tertentu. Kode di dalamnya dijalankan ketika pengguna mengakses URL tersebut dari browser.

webserver_send_response

Kirim respon status 200 teks [X]

Mengirimkan balasan HTTP ke browser. Gunakan nilai teks atau data sensor sebagai respons yang dapat dibaca browser.

webserver_get_arg

Baca parameter URL [status]

Membaca nilai parameter query URL. Misal jika browser mengakses /toggle?status=on, blok ini mengembalikan nilai "on".

Contoh: Kontrol Relay via URL Browser

Susun blok di editor: "Ketika Web Server menerima alamat /relay" → "Jika Baca parameter URL 'cmd' = 'on'" → "Set Relay ke HIGH" → "Kirim respon 200 teks 'Relay ON'"

#include <WiFi.h> #include <WebServer.h> WebServer server(80); void handle__relay() { String cmd = server.arg("cmd"); if (cmd == "on") { digitalWrite(2, HIGH); server.send(200, "text/plain", "Relay ON"); } else { digitalWrite(2, LOW); server.send(200, "text/plain", "Relay OFF"); } } void setup() { pinMode(2, OUTPUT); WiFi.softAP("ESP32_Dashboard", "12345678"); server.on("/relay", handle__relay); server.begin(); } void loop() { server.handleClient(); // Proses request masuk }
Akses dari Browser Setelah kode di-flash ke ESP32, sambungkan HP/laptop ke WiFi ESP32_Dashboard. Buka browser dan ketik http://192.168.4.1/relay?cmd=on untuk menyalakan relay, atau /relay?cmd=off untuk mematikannya. Respons teks akan tampil di browser!

8. Proyek Lengkap: Sistem Kontrol Otomatis IoT

Panduan lengkap membuat proyek "Sistem Ventilasi Otomatis + Kontrol Manual Web": Kipas (Relay) otomatis menyala jika suhu > 35°C, dan bisa dikontrol manual via browser atau HP.

Proyek: Ventilasi Otomatis + Web Control

Komponen: ESP32 · DHT22 · Relay · Lampu AC 220V · Sumber AC 220V

Fase 1 — Perakitan Sirkuit
Komponen Pin Komponen Warna Kabel → ESP32 Pin
DHT22 VCC 🔴 Merah 3V3
DHT22 GND ⚫ Hitam GND
DHT22 DATA 🔵 Biru D15
Relay VCC 🔴 Merah 5V
Relay GND ⚫ Hitam GND
Relay IN 🟢 Hijau D2
Sumber AC L (Phase) 🟡 Kuning Relay COM
Lampu AC L 🟡 Kuning Relay NO
Fase 2 — Susun Blok Logika (Tab: Logika Blok)
  • Dari Logika: Ambil blok Jika [ ] maka [ ].
  • Dari Logika: Ambil blok pembanding [ ] >= [ ]. Pasang di slot kondisi.
  • Dari Sensor: Ambil blok baca suhu dari dht22_1. Pasang di kiri pembanding.
  • Dari Matematika: Ambil angka 35. Pasang di kanan pembanding.
  • Dari Aktuator: Ambil blok Set Relay relay_1 ke HIGH. Pasang di dalam maka.
  • Tambahkan Selain itu → Set Relay relay_1 ke LOW untuk mematikan otomatis.
  • (Opsional Web Server): Dari kategori Web Server: blok Ketika Web Server menerima /relay → baca parameter cmd → kondisi = "on" → Set Relay HIGH + kirim respon "Relay ON".
Fase 3 — Uji Simulasi
  • Tekan tombol Simulasi di toolbar.
  • Geser slider Suhu DHT22 ke angka 38°C.
  • Amati: Relay di kanvas menyala ✦ kuning, Lampu AC ikut bersinar ✦ emas seketika!
  • Turunkan slider ke 30°C — relay dan lampu otomatis mati.
Fase 4 — Buat Dasbor Monitoring
  • Buka tab 3. Desain Dasbor.
  • Seret widget Radial Gauge → Bind ke dht22_1 - Temperature.
  • Seret widget Line Chart → Bind ke dht22_1 - Humidity.
  • Seret widget Sakelar Kontrol → Bind ke relay_1.
  • Kembali ke tab kanvas, tekan Simulasi, lalu buka tab Dasbor — semua widget langsung terupdate live!
Fase 5 — Ekspor Kode C++ ke Hardware Asli
  • Klik ikon Kode C++ di toolbar editor (pojok kanan atas).
  • Panel kode terbuka dengan firmware C++ lengkap yang siap di-flash.
  • Klik tombol Salin → Tempel di Arduino IDE → Install library yang dibutuhkan → Upload ke ESP32 Anda.
  • ESP32 fisik Anda akan menjalankan logika yang persis sama dengan yang Anda simulasikan di Deeptech! 🎉
Selamat! Anda sudah menguasai Deeptech. Dari merakit sirkuit virtual, memprogram logika blok, mensimulasikan hardware, membangun dasbor monitoring, hingga menghasilkan kode firmware C++ yang siap di-deploy — semuanya tanpa harus menyentuh fisik hardware!