Buat Chatbot WhatsApp, Bukan Aplikasi

Dulu, saya membuat aplikasi web untuk perusahaan (200k+ karyawan). Umpan balik pada aplikasi web mendorong saya untuk melakukan percobaan. Apa yang akan terjadi jika saya membuat chatbot WhatsApp untuk menyelesaikan kasus penggunaan tertentu, alih-alih aplikasi web? Apakah orang akan lebih menyukainya? Apakah akan lebih bermanfaat?

Tapi ceritanya jauh lebih besar dari itu. Chatbots memiliki begitu banyak potensi! Dalam tutorial chatbot WhatsApp ini, saya ingin membagikan perjalanan belajar saya, praktik terbaik yang saya temukan, dan prediksi saya tentang pertanyaan aplikasi vs. chatbot. Dan selanjutnya: Akankah chatbots suatu hari nanti menggantikan semua aplikasi tradisional?

Perusahaan tempat saya bekerja memiliki kantor untuk sekitar 2.000 karyawan di tengah pusat kota Tel Aviv. Tempat parkir sangat terbatas, sehingga orang-orang parkir di tempat yang sengaja dirancang untuk parkir ganda, di mana satu mobil menghalangi yang lain. Di setiap tempat parkir ganda, pengemudi pertama parkir di dalam, dan yang kedua parkir di luar.

Dari Papan Tulis ke Aplikasi Web

Sebelum ada aplikasi, ada papan besar. Semua pengemudi menandai di mana mereka parkir, dan nama serta nomor telepon mereka. Sebelum meninggalkan kantor, seorang pengemudi harus memeriksa apakah ada orang yang menghalangi mobilnya. Jika demikian, mereka harus menelepon pengemudi lain dan berharap bahwa mereka tidak sedang rapat sehingga mereka bisa pergi dan memindahkan mobil mereka dari jalan.

Untuk membuat prosesnya lebih baik, saya membuat aplikasi web.

Itu sederhana. Tidak ada ujung belakang. Tidak ada hosting server. Tidak ada pemeliharaan basis data. Bahkan tidak ada kerangka UI. Tidak ada webpack dan tidak ada bundel JS sama sekali! Hanya vanili JavaScript.

Itu di-host dengan menggunakan hosting halaman statis gratis GitHub. Basis datanya adalah FireBase, jadi kami memiliki dukungan waktu nyata dan dukungan JSON, dan tidak memerlukan back-end.

Antarmuka pengguna sangat mudah. Pengguna akan melihat semua tempat parkir dan mengklik yang kosong untuk mengisi rincian mereka. Jika mereka sudah diparkir, itu akan mengambil data dari penyimpanan lokal browser. Jika mereka mengklik slot terdaftar, mereka akan melihat detail kontak yang relevan dan dapat memilih untuk memanggil pengemudi.

Itu bekerja dengan baik selama hampir satu tahun. Kurang dari satu hari pengembangan membantu dan menghemat waktu bagi banyak orang—investasi yang bagus.

Dari Aplikasi Web ke Chatbot

Suatu hari, Facebook mengumumkan bahwa mereka akan merilis API untuk WhatsApp. Keesokan harinya, saudara laki-laki saya membeli Amazon Echo, yang menampilkan Alexa. Sekitar waktu itu, saya juga mulai melihat Asisten Google di mana-mana.

Saya mulai berpikir bahwa mungkin dunia sedang bergerak menuju chatbot, jadi saya harus bereksperimen. Apakah pengguna lebih suka menggunakan chatbots? Apakah saya perlu memberikan lebih sedikit dukungan? Apakah ini akan memperkenalkan fitur meta baru hanya dengan memanfaatkan infrastruktur yang berbeda?

Saya mendapat beberapa umpan balik tentang aplikasi web biasa, dan saya yakin itu mungkin mengatasinya jika saya membuat chatbot WhatsApp:

• Aplikasi ini tidak bekerja dengan baik di beberapa ponsel lama.
• Itu tidak berfungsi di bawah tanah (tempat parkir—tidak ada sinyal seluler yang bagus di sana).
• Pengemudi ingin mengirim pesan ke pemblokir daripada membuka dialer telepon.
• Pengemudi ingin mendapatkan pemberitahuan push jika seseorang memblokirnya, alih-alih membuka aplikasi web setiap kali sebelum pergi.

Penting untuk diingat bahwa pengembang platform obrolan seperti Telegram atau WhatsApp telah bekerja siang dan malam selama bertahun-tahun untuk memastikan stabilitas aplikasi mereka. Dengan menggunakan sumber daya mereka dan hanya mengembangkan mesin kecil untuk menjawab pertanyaan, itu akan meninggalkan kerja keras pemeliharaan untuk pengembang platform obrolan. Yang harus saya lakukan adalah menggali cara membuat chatbot WhatsApp.

Segera setelah saya mulai mengembangkan chatbot asisten parkir baru, saya menyadari betapa fantastis ide itu. Sangat mudah dan cepat untuk menambahkan fitur baru, dan saya bahkan tidak perlu melakukan pengujian ujung ke ujung.

Tidak ada sinyal? Tidak masalah.

Menciak

Tidak hanya itu, saya tidak lagi membutuhkan proses CI/CD yang rumit. Jika berfungsi di emulator obrolan, itu akan berfungsi di mana saja. Tidak ada .apk , tidak ada Xcode, tidak ada App Store, atau Google Play. Chatbot dapat mengirim pesan ke pengguna tanpa saya perlu mendaftarkan perangkat, menggunakan PubSub atau layanan serupa untuk pemberitahuan push, atau menyimpan token pengguna. Tidak perlu sistem autentikasi—saya menggunakan nomor telepon pengguna sebagai identifikasi.

Tidak ada sinyal? Tidak masalah. Saya tidak perlu menambahkan dukungan offline menggunakan file manifes: WhatsApp memberikannya langsung kepada saya. Pesan akan segera keluar, ketika pengguna akan pergi ke tingkat atas di mana wifi lebih baik.

Kemudian saya menyadari bahwa setiap kali platform obrolan memperkenalkan fitur baru, aplikasi saya akan langsung mendapat manfaat darinya. Wow—ini adalah investasi yang sangat bagus. (Agar adil, ada juga risiko bahwa fitur baru dapat membatasi fungsionalitas atau membuat perubahan yang merusak yang memerlukan lebih banyak upaya pengembangan, jadi pikirkan baik-baik sebelum menerapkan tugas penting bisnis).

Menulis Asisten Parkir , Obrolan Prototipe WhatsApp

Untuk membuat chatbot WhatsApp, tantangan pertama adalah mendapatkan pesan dari WhatsApp ke program Anda. Solusi paling sederhana yang saya temukan adalah menggunakan nomor telepon Twilio bersama. Ini hanya untuk pengembangan—saat beralih ke produksi, pengembang akan ingin menggunakan nomor telepon khusus.

Nomor gratis Twilio masing-masing dibagikan ke banyak pengguna Twilio. Untuk membedakan pengguna akhir aplikasi dari pengguna aplikasi Twilio lainnya, pengguna akhir harus mengirim pesan yang telah ditentukan sebelumnya ke chatbot.

Setelah pengguna mengirim pesan khusus ke nomor yang dibagikan, semua pesan dari nomor mereka akan diarahkan ke akun Twilio dan webhook Anda. Inilah sebabnya mengapa nomor khusus diperlukan dalam produksi—tidak ada jaminan bahwa pengguna tertentu hanya ingin menggunakan satu aplikasi pada nomor bersama yang diberikan.

Mengirim Pesan WhatsApp

Di "Dasbor SMS yang Dapat Diprogram" Twilio, ada tautan "WhatsApp Beta" di bilah navigasi sebelah kiri:

Mengklik itu, pengembang akan melihat halaman dengan opsi "Kotak Pasir."

Untuk menghubungkan pengguna, mereka perlu mengirim satu pesan khusus ke nomor yang disediakan Twilio. Setelah pengguna melakukannya, kami dapat mulai mengirim pesan kepada mereka dan memproses pesan dari mereka, melalui Twilio.

Berikut adalah contoh pengiriman pesan menggunakan cURL:

 curl 'https://api.twilio.com/2010-04-01/Accounts/{user_account}/Messages.json' -X POST \ --data-urlencode 'To=whatsapp:+{to_phone_number}' \ --data-urlencode 'From=whatsapp:+{from_phone_number}' \ --data-urlencode 'Body={escaped_message_body}' \ -u {user_account}:user_token

Ini adalah pesan teks sederhana. Tetapi Anda juga dapat melampirkan media (gambar, dll.) ke pesan Anda. Berikut adalah contoh Node.js:

 function sendWhatsApp(to, body, media) { const auth = "twilio_clientid:twilio_api" const sendURL = "https://api.twilio.com/2010-04-01/Accounts/{account_id}/Messages.json" const res = await fetch(sendURL, { headers: { Authorization: "Basic " + Buffer.from(auth).toString("base64"), }, method: "POST", body: objToFORM( JSONRemoveUndefined({ To: "whatsapp:+972" + to.replace(/-/g, "").replace(/^0/, ""), From: "whatsapp:+18454069614", Body: body, MediaUrl: media, }), ), }) } function objToFORM(obj) { const params = new URLSearchParams() for (var a in obj) { params.append(a, obj[a]) } return params } function JSONRemoveUndefined(obj) { return JSON.parse(JSON.stringify(obj)) }

Itu dia: Sekarang kita bisa mulai mengirim pesan ke klien! Tetapi penting untuk mengingat dua batasan teknis paling penting dari pesan WhatsApp:

1. Saat bot menerima pesan, Anda dapat mengirim satu balasan teks secara gratis. Lebih dari itu membutuhkan uang.
2. Bot dapat mengirim pesan ke pengguna hanya selama jendela 24 jam mulai saat menerima pesan dari pengguna. Di luar jendela ini, bot hanya dapat mengirim pesan menggunakan template yang disetujui, seperti yang akan kita lihat nanti.

Menerima Pesan WhatsApp

Mengirim pesan cukup mudah, tetapi menerima dan memproses pesan bahkan lebih mudah.

Di halaman "kotak pasir" Twilio, pengembang dapat menentukan di mana Twilio harus mengirim pesan yang diterimanya di nomor WhatsApp yang dibagikan. Selama pengembangan, layanan seperti Ngrok atau Serveo dapat menyediakan URL publik yang mengarahkan ke mesin pengembang lokal.

Pesan Twilio WhatsApp terlihat seperti ini:

 { "NumMedia": "0", "SmsSid": "{sms_id}", "SmsStatus": "received", "Body": "Example Message from user", "To": "whatsapp:+{phone_number}", "NumSegments": "1", "MessageSid": "{message_sid}", "AccountSid": "{account_sid}", "From": "whatsapp:+{phone_number}", "ApiVersion": "2010-04-01" }

Itu saja yang kita butuhkan. Kami dapat menggunakan bahasa pemrograman apa pun untuk mendapatkan pesan ini, menguraikannya, dan mencoba memahami apa yang diminta pengguna. Ini mungkin akan menghasilkan beberapa operasi CRUD pada database, setelah itu bot dapat mengirimkan informasi yang sesuai (atau pesan sukses/gagal) kepada pengguna dalam balasannya. Itulah dasar-dasar cara membuat chatbot WhatsApp.

Template Pesan

Seperti disebutkan, chatbots dapat mengirim pesan gaya bebas hanya kepada pengguna yang "saat ini" berinteraksi dengan mereka, yaitu selama jendela 24 jam. Tetapi jika Anda ingin mengirim pesan ke pengguna baru, atau di luar jendela, Anda harus menggunakan templat pesan yang telah disetujui sebelumnya. Ini untuk mencegah spam.

Dalam kasus penggunaan saya, saya ingin memperbarui driver ketika seseorang memblokirnya, bahkan jika mereka bukan pengguna chatbot. Di Twilio, klik "pengirim" dan "konfigurasi."

Ini adalah template yang saya pilih:

 {{1}} is blocking your exit from the parking lot. I will notify you when they leave.

Beberapa hari kemudian, Facebook menyetujui template saya, dan saya dapat mulai mengirim pesan tersebut ke semua orang yang memiliki WhatsApp, bukan hanya pengemudi yang telah mengirim pesan ke chatbot.

Mengirim pesan dari template persis seperti mengirim pesan biasa, menggunakan API yang sama. WhatsApp secara otomatis melihat bahwa itu cocok dengan template dan menyetujui pesan tersebut.

Tidak Hanya untuk Asisten Parkir

Strategi ini menarik bagi saya ketika saya membayangkan sebuah toko online: Mungkin suatu hari orang akan dapat membeli apa saja menggunakan chatbots. Ini akan semudah mengirim pesan WhatsApp dan melampirkan gambar. Bayangkan saja jika pengguna bisa melampirkan uang asli ke setiap pesan WhatsApp. Akan sangat mudah untuk membeli barang-barang. Pengguna akan dengan mudah dapat membeli apa pun dengan berbicara dengan chatbot pemasok.

Bayangkan sebuah chatbot yang menggantikan Waze atau Google Maps. Anda mengirimkannya pesan teks tujuan Anda. Platform chatbot melacak lokasi Anda, dan chatbot mengirimi Anda pesan rekaman yang diputar secara otomatis dengan arah navigasi yang diucapkan secara realtime.

Ini bukan fantasi. WhatsApp saat ini mendukung berbagi lokasi secara real time—yang mereka butuhkan hanyalah opsi untuk memutar otomatis pesan yang diterima, dan voila.

Pikirkan tentang chatbot Waze atau chatbot taksi, bukan aplikasi Gett atau Uber. Anda mengirim pesan yang mengatakan di mana Anda berada, kemudian taksi datang, dan Anda membayar menggunakan WhatsApp. Sangat sederhana.

Beberapa pembaca mungkin berpikir, “Bukankah pengguna lebih menyukai antarmuka grafis, dan bukan hanya mengetik?” Saya percaya bahwa platform chatbot akan memberi pemilik chatbot opsi untuk mengirim tombol, gambar, dan kotak HTML murni selama konversi. Facebook sudah mendukung Webview untuk Messenger. Pengguna tidak perlu menginstal apa pun, cukup gunakan aplikasi pesan instan pilihan mereka.

Keuntungan inilah yang menjadi alasan pengembang mencari cara untuk membuat chatbot WhatsApp untuk menangani tugas-tugas penting, seperti memberikan jawaban otoritatif instan tentang pandemi virus corona, untuk membantu mengekang penyebaran informasi yang salah.

TL;DR: 7 Kesimpulan Tentang Migrasi Aplikasi Web ke Chatbots

Singkatnya:

• Sering kali, mengembangkan chatbot dapat memangkas waktu pengembangan secara signifikan, karena tidak perlu merancang dan merencanakan antarmuka pengguna grafis. (Yang mengatakan, ada baiknya melihat poin-poin terbaik dari desain UX chatbot sebelum memulai, untuk belajar dari kesalahan orang lain.)
• Menambahkan fitur baru ke chatbots jauh lebih mudah. Pengembang tidak perlu mendesain ulang atau mengubah elemen apa pun saat ini. Chatbot hanya perlu mulai memahami jenis pesan baru.
• Chatbots jauh lebih mudah diakses secara default oleh orang-orang dengan kebutuhan khusus.
• Tidak perlu menyesuaikan solusi lintas platform. Platform chatbot sudah melakukannya.
• Pengguna lebih mempercayai chatbots untuk berbagi informasi. Anda tidak perlu meminta izin atau menunjukkan peringatan - misalnya, pengguna cukup memilih gambar dari galeri mereka dan mengirimkannya ke chatbot Anda—izin untuk mengakses galeri gambar sudah diberikan ke platform obrolan.
• Platform obrolan memudahkan penanganan notifikasi push. Pemberitahuan push adalah yang membuat perbedaan antara aplikasi yang dilupakan pengguna dan aplikasi yang akan digunakan pengguna secara teratur.
• Platform obrolan menangani perpindahan antara kondisi offline dan online untuk Anda.

Cara Membuat Chatbot WhatsApp: Saran Perpisahan dan Praktik Terbaik

Manfaat menulis chatbot cukup jelas. Pengembang yang siap untuk membangunnya disarankan untuk memulai dari yang kecil, dengan chatbot yang memahami satu pesan. Dan menanganinya dengan baik.

Chatbots harus tetap berpegang pada pesan singkat. Orang tidak membaca pesan panjang. Saat Anda memiliki sesuatu yang penting untuk dikirim yang tidak dapat diungkapkan secara ringkas, lebih baik bagi pesan menjadi beberapa pesan kecil.

Chatbots dengan kepribadian diterima lebih baik. Bahkan beberapa "pembicaraan manusia" yang sangat minim berjalan jauh dibandingkan dengan pendekatan "formalitas pesan sistem": "Saya akan memperbarui peta parkir untuk Anda," alih-alih, "Database telah diperbarui." Chatbot harus membuat pengguna merasa bahwa itu adalah mesin yang ada untuk melayani pengguna, daripada kotak hitam yang melakukan operasi teknis yang mungkin tidak dapat mereka pahami.

Tutorial chatbot WhatsApp ini tidak membahas secara spesifik penguraian pesan bahasa alami yang akan dikirim pengguna ke chatbots. Tetapi calon penyedia layanan pengembangan chatbot dipersilakan untuk membaca dengan teliti kode sumber bot WhatsApp Parking Assistant (khususnya hackparkDialogFlow.ts , yang menerima permintaan dari pengguna sebagai tindakan) untuk merasakan bagaimana aspek itu bekerja.

Untuk artikel yang lebih mendalam tentang cara mendeteksi berbagai jenis pesan pengguna—sambil juga mengikuti pendekatan injeksi ketergantungan pada pemrograman—lihat tutorial chatbot TypeScript dari Toptal.

Semoga berhasil dengan pengembangan chatbot WhatsApp Anda sendiri!