Pabrik Situs

Watsapbles

Oleh PABRIK SITUS 0 (0 ulasan) 16 kali dilihat
ManagementPaid
watsapbles / preview
Watsapbles
Watsapbles

Tentang project

Watsapbles — WhatsApp Campaign Manager & Marketing Automation

Platform self-hosted all-in-one untuk blast campaign, chatbot otomatis, dan AI auto-reply WhatsApp—berjalan penuh di server sendiri (VPS), tanpa biaya bulanan pihak ketiga.

📌 Ringkasan

Watsapbles adalah aplikasi web self-hosted untuk mengelola pemasaran dan komunikasi WhatsApp secara profesional dalam satu dashboard. Dibangun di atas Next.js + React + TypeScript, serta terhubung langsung ke WhatsApp melalui Baileys (WhatsApp Multi-Device Web API). Sistem ini tidak memerlukan Chromium atau emulator sehingga lebih ringan dijalankan di server.

Cocok untuk:

  • Pelaku UMKM
  • Agensi
  • Toko online
  • Developer yang membutuhkan sistem broadcast, chatbot, dan CRM kontak dengan kepemilikan penuh atas source code

Skala proyek: ±18.400 baris kode, 144 file TS/TSX, 49 endpoint API, dan 48 komponen UI siap pakai.

⭐ Fitur Unggulan

  • 🚀 Multi-Device — Hubungkan banyak nomor WhatsApp sekaligus. Setiap perangkat memiliki jalur kirim sendiri sehingga blast dapat berjalan secara paralel.
  • 🤖 Chatbot + AI Hybrid — Mesin auto-reply berbasis keyword atau aturan yang dapat beralih ke AI sebagai fallback. Mendukung OpenAI dan Anthropic/Claude serta dilengkapi memori percakapan.
  • 🛡️ Anti-Ban Engine — Delay acak, jam kerja, simulasi mengetik, cooldown, dan batas harian untuk meniru perilaku manusia.
  • 🔌 REST API + Webhook — Kirim pesan dari aplikasi lain melalui endpoint POST /api/send menggunakan API Key dan validasi tanda tangan HMAC.
  • 📊 Analitik & Dashboard — Dilengkapi heatmap, grafik performa, health status, dan audit log.

🧩 Daftar Fitur Lengkap per Modul

1. Dashboard

Metrik utama secara real-time, grafik performa pengiriman, health status perangkat, dan feed aktivitas terbaru.

2. Perangkat (Multi-Device)

  • Koneksi melalui QR Code maupun Pairing Code berupa kode 8 digit tanpa scan.
  • Status koneksi live, indikator baterai, dan pesan error yang jelas di UI.
  • Auto-reconnect dengan exponential backoff serta auto-restore sesi ketika server restart.
  • Penyimpanan sesi otomatis ke database melalui backup berkala, termasuk penanganan logout dan banned.
  • Impor kontak langsung dari buku alamat WhatsApp dan anggota grup WhatsApp, termasuk ekstraksi nomor asli dari peserta grup.

3. Kontak & Grup (CRM)

  • Manajemen kontak dengan tag, riwayat pesan, dan tracking engagement.
  • Grup hierarkis atau bertingkat (parent–subgroup) dengan tampilan pohon yang dapat dilipat.
  • Import CSV, operasi bulk, deduplikasi, merge kontak duplikat, dan pemisahan grup besar menjadi beberapa bagian.

4. Campaign / Blast

  • Wizard pembuatan campaign dengan preview langsung.
  • Shortcode personalisasi: {name}, {phone}, {date}, dan {group}.
  • Lampiran media berupa gambar, video, audio, dan dokumen.
  • Penjadwalan campaign serta proteksi jadwal terlewat—campaign otomatis menjadi Draft agar tidak terjadi ghost sending.
  • A/B Testing dengan varian A/B, Clone, Retry Failed, dan Archive/Restore.
  • Kontrol status penuh: Start, Pause, Resume, dan Cancel.
  • Estimasi biaya dan durasi pengiriman.
  • Log pesan per kontak, mencakup status terkirim atau gagal beserta alasannya.

5. Chatbot (WABot)

Mesin balasan otomatis berbasis aturan dengan prioritas berikut:

  • Mode Cuti
  • Welcome atau chat pertama
  • Kontak Tidak Dikenal
  • Keyword Persis, Mengandung, atau Diawali
  • Terima Media
  • Fallback

Fitur pendukung:

  • Variasi balasan dalam mode Random atau Sequential dengan delay per bubble dan simulasi mengetik.
  • Reset timeout per aturan, misalnya menyapa ulang setelah 5 jam.
  • Safety guard berupa master toggle, jam senyap, keyword opt-out (STOP), cooldown anti-loop, dan batas balasan harian per kontak.
  • Export dan import aturan chatbot.
  • Copy dan duplicate aturan antarperangkat.

6. AI Chatbot (Fallback Cerdas)

  • AI aktif per perangkat sebagai fallback ketika tidak ada keyword yang cocok.
  • Kompatibel dengan OpenAI Chat Completions dan Anthropic/Claude Messages API.
  • Base URL dapat dikustomisasi untuk mendukung gateway atau proxy.
  • Knowledge base per perangkat dan memori riwayat chat yang menyimpan 20 pesan terakhir per kontak.
  • Injeksi data campaign agar AI dapat memahami balasan pelanggan terkait pesan blast yang baru diterima.
  • Kontrol cooldown balasan, batas pesan AI per kontak, serta keyword /stopai dan /startai.

7. Kalender

Tampilan jadwal campaign bulanan dan dukungan ekspor iCal.

8. Template

Galeri template pesan berkategori dengan hitungan penggunaan (usage count) dan dukungan media.

9. Analitik

Heatmap waktu pengiriman, donut/overview chart, performa delivery, dan ekspor data.

10. Integrasi API

  • Manajemen API Key: buat, hapus, rename, dan lacak pemakaian terakhir.
  • Endpoint publik POST /api/send untuk mengirim pesan dari aplikasi eksternal.
  • Validasi tanda tangan HMAC-SHA256 opsional dengan proses timing-safe.
  • Webhook tester dan contoh perintah curl.

11. Webhook Logs & Audit Log

  • Webhook Logs — Setiap request API dari luar tercatat, termasuk status, kode, waktu respons, IP, nomor, dan preview pesan.
  • Audit Log — Timeline lengkap aktivitas sistem.

12. Pengaturan & Anti-Ban

  • Delay acak antar pesan dengan nilai minimum dan maksimum.
  • Jam kerja (working hours).
  • Jam senyap.
  • Cooldown.
  • Batas harian.
  • Simulasi mengetik.
  • Seeder data demo yang dapat diisi atau dihapus dengan sekali klik.

🛠️ Tech Stack

KategoriTeknologi
FrameworkNext.js 16 (App Router, output: standalone, Turbopack)
UI LibraryReact 19, TypeScript 5
StylingTailwind CSS v4, shadcn/ui, Radix UI, tailwindcss-animate, Framer Motion
WhatsApp Engine@whiskeysockets/baileys 7 (Multi-Device Web API, WebSocket—tanpa Chromium)
Database & ORMMySQL, Prisma 6
State & DataZustand, TanStack React Query, TanStack Table
Form & ValidasiReact Hook Form, Zod 4
AIOpenAI dan Anthropic/Claude compatible API
Grafik & IkonRecharts, Lucide React
Utilitasdate-fns, qrcode, sharp, archiver/unzipper (backup sesi), pino (logging), @dnd-kit (drag & drop), Sonner (toast), next-themes (dark mode)

🏗️ Keunggulan Arsitektur

  • In-process Campaign Engine — Berjalan di dalam server Next.js sehingga dapat mengakses socket WhatsApp yang aktif di memori. Satu jalur kirim (lane) disediakan untuk setiap perangkat sehingga banyak nomor dapat mengirim secara paralel dengan delay anti-ban masing-masing.
  • Scheduler + Dispatcher Otomatis — Campaign terjadwal dapat dimulai otomatis. Perangkat yang memiliki pekerjaan akan diberi lane dan lane berhenti sendiri ketika pekerjaan selesai.
  • Manajemen Sesi Tahan Restart — Socket disimpan di globalThis agar aman dari HMR. Sesi autentikasi di-backup ke database dan dipulihkan otomatis ketika server berjalan kembali.
  • Standalone Build — Siap di-deploy ke berbagai VPS sebagai satu proses Node.js yang berjalan terus-menerus.

💻 Kebutuhan Sistem

  • VPS atau server dengan Node.js yang mendukung proses long-running—bukan serverless atau edge.
  • Database MySQL.
  • Nomor WhatsApp aktif untuk dihubungkan.

📦 Yang Didapat Pembeli

  • Full source code frontend, backend, dan engine WhatsApp tanpa enkripsi.
  • Skema database Prisma dan seeder data demo.
  • File .env.example dan konfigurasi siap jalan.
  • UI berbahasa Indonesia, responsif, mobile-friendly, mendukung dark mode, dan dilengkapi command palette.

⚠️ Catatan Penting

Catatan berikut disampaikan sebagai bentuk transparansi kepada pembeli.

  • Aplikasi bersifat single-tenant untuk penggunaan pribadi atau bisnis sendiri dan belum memiliki sistem login bawaan. Disarankan mengamankannya menggunakan VPN, Basic Auth, atau reverse proxy ketika dipasang di VPS. Bagian ini juga dapat dikembangkan sebagai layanan kustomisasi tambahan.
  • Aplikasi menggunakan Baileys, yaitu WhatsApp Web API tidak resmi yang juga digunakan oleh banyak produk sejenis. Pengguna tetap disarankan mematuhi kebijakan WhatsApp dan menghindari aktivitas spam.

Dokumen ini siap digunakan sebagai deskripsi listing produk di website, CodeCanyon, maupun forum jual-beli source code.

Teknologi yang digunakan

Next.jsReactTypeScriptTailwind CSSshadcn/uiRadix UItailwindcss-animateFramer MotionMySQL