Selamat! Aplikasi ZenFocus Anda sudah punya UI cantik (Part 1), Memori Database (Part 2), dan Sistem Keamanan Login (Part 3).
Sekarang, mari kita beri aplikasi ini "Suara".
Bayangkan skenario ini: Anda membuat tugas penting "Meeting Investor jam 9". Tapi karena sibuk, Anda lupa membuka aplikasi ZenFocus. Akibatnya? Meeting terlewat.
Solusinya? Kita akan menghubungkan ZenFocus dengan WhatsApp Anda. Begitu tugas penting dibuat, HP Anda akan bergetar. Kita akan menggunakan alat sakti bernama n8n (Automation Tool).
Persiapan: Strategi "Webhook" (Si Pancingan)
Kita tidak perlu mengubah kode di Lovable. Kita akan menggunakan fitur canggih Supabase bernama Database Webhooks.
Konsepnya sederhana:
- Ada data baru masuk ke tabel
tasks. - Supabase berteriak: "Halo! Ada task nih!" (via Webhook).
- n8n mendengar teriakan itu.
- n8n mengirim pesan ke WhatsApp Anda.
Langkah 1: Siapkan "Otak Automasi" (n8n)
Kita butuh tempat untuk memproses logika ini.
- Daftar akun gratis di n8n.cloud (Trial 30 hari sudah cukup untuk belajar, atau install di laptop sendiri gratis selamanya).
- Buat New Workflow.
- Klik tombol (+) Add first step.
- Cari: Webhook.
- Pilih Webhook (Trigger).
- HTTP Method:
POST - Path:
new-task(atau bebas)
- HTTP Method:
- Anda akan melihat Test URL (misal:
https://hooks.n8n.cloud/...). Copy URL ini. - Klik Listen for Test Event. (Sekarang n8n sedang "menunggu" kiriman data).
Langkah 2: Pasang "CCTV" di Database (Supabase)
Kita akan menyuruh Supabase melapor ke n8n setiap kali ada tugas baru.
- Buka Dashboard Supabase project ZenFocus.
- Klik menu Database (ikon silinder bertumpuk) -> Webhooks.
- Klik Enable Webhook (Bagi kalian yang belum pernah menggunakan Webhook)
- Klik Create a new hook.
- Isi formnya:
Name: notify-n8n
Table: public.tasks
Events: Centang INSERT (kita mau notif saat tugas baru dibuat).
Webhook Configuration:
Method: POST
URL: Paste URL dari n8n tadi.
HTTP Headers: Klik Add new header -> Name: Content-Type, Value: application/json.Klik Create Webhook.
Langkah 3: Tes Koneksi (Ping!)
- Buka aplikasi ZenFocus Anda (di browser/Lovable).
- Buat tugas baru: "Tes Notifikasi WhatsApp".
- Segera cek tab n8n Anda.
- Apakah muncul data hijau bertuliskan "Workflow executed"?
- Jika ya, klik data tersebut. Lihat bagian
body->record. Apakah ada tulisan "Tes Notifikasi WhatsApp"?
Selamat! Database Anda sudah tersambung ke n8n.
Langkah 4: Kirim ke WhatsApp (The Final Act)
Agar gratis dan mudah, kita pakai layanan perantara WA API gratisan (untuk belajar) atau Email dulu jika WA terlalu rumit setup-nya.
Opsi Mudah (Email):
- Di n8n, klik tanda (+) setelah node Webhook.
- Cari Gmail (atau Email).
- Pilih Send a Message (kirim pesan).
- Klik create new credential, lalu login menggunakan akun gmail kalian.
- Isikan formnya
To: Email Anda sendiri. (untuk pengetesan)
(Catatan: Untuk tutorial ini, kita anggap Anda adalah Admin yang ingin memantau semua tugas masuk. Jika ingin mengirim ke masing-masing user, kita butuh langkah tambahan yang lebih lanjut).
Subject: Tugas Baru: {{ $json.body.record.title }} (Drag & Drop dari data webhook).image.png
Email Type: Text
Body: "Hei bos, jangan lupa kerjakan tugas ini ya!"
- Klik Execute Node. Cek inbox email Anda!
Opsi Keren (WhatsApp via FoneAPI/Whapi/Twillio):
(Catatan: API WhatsApp resmi berbayar/rumit. Untuk tutorial pemula, disarankan pakai Email dulu atau layanan pengirim pesan gratis seperti Telegram/Discord Webhook yang jauh lebih mudah).
Saran Penulis: Gunakan Telegram untuk tutorial ini. Gratis, setup bot cuma 1 menit, dan pasti berhasil.
Cara Ganti ke Telegram (Revisi Langkah 4):
- Chat ke @BotFather di Telegram, ketik
/newbot, dapatkan Token. - Di n8n, cari node Telegram.
- Masukkan Token tadi.
- Pilih Operation: Send Message.
- Chat ID: Masukkan ID Telegram Anda (bisa cek di @userinfobot).
- Text:
Tugas Baru Bos: {{ $json.body.record.title }}. - Execute!
Cara Ganti ke Discord
Kita akan membuat bot Discord sederhana yang melapor ke server pribadi Anda.
- Siapkan Discord:
- Bikin Server Discord baru (misal: "My Personal Apps").
- Klik kanan pada channel
#general-> Edit Channel. - Masuk menu Integrations -> Webhooks.
- Klik New Webhook. Beri nama "ZenBot".
- Klik Copy Webhook URL.
- Setting di n8n:
- Klik tanda (+) di n8n.
- Cari node: Discord.
- Pilih Send a Message
- Connection Type: Webhook
Credential: Pilih Predefined Credential URL (atau kosongkan jika diminta Webhook URL langsung di properti).
Webhook URL: Paste URL dari Discord tadi.
Message/Content: "🚨 Tugas Baru Terdeteksi! Tugas: {{ $json.body.record.title }} (Tips: Drag & drop title dari panel Input di kiri).- Klik Execute Node.
- TING! Cek Discord Anda. Pesan dari ZenBot pasti sudah muncul.
Langkah 5: Aktifkan Robot
- Jika tes berhasil, kembali ke node Webhook di n8n.
- Ubah dari Test URL menjadi Production URL.
- Copy URL Production yang baru.
- Update Webhook di Supabase (Langkah 2) dengan URL Production baru ini.
- Di n8n, klik tombol Active (pojok kanan atas) jadi Hijau.
Selesai! Sekarang, coba input tugas di ZenFocus. Dalam 1 detik, Telegram Anda akan bunyi TING!
Kesimpulan: The Power of No-Code
Lihat apa yang baru saja Anda lakukan? Tanpa menulis satu baris kode backend pun, Anda sudah membuat sistem Real-time Notification System.
Biasanya, fitur seperti ini butuh tim backend engineer dan waktu berminggu-minggu. Anda melakukannya sendirian dalam 15 menit.
- Part 1: Kita belajar UI/UX (Tampilan).
- Part 2: Kita belajar Database (Memori).
- Part 3: Kita belajar Security (Privasi).
- Part 4: Kita belajar otomasi (Automaton) (Artikel ini)
