Teknologi

Panduan pengembang untuk membangun obrolan WhatsApp

Panduan pengembang untuk membangun obrolan WhatsApp

 

Panduan pengembang untuk membangun obrolan WhatsApp

Panduan pengembang untuk membangun obrolan WhatsApp

Dulu, saya membangun aplikasi web untuk perusahaan (200k + karyawan). Umpan balik pada aplikasi web mendorong saya untuk melakukan percobaan. Apa yang akan terjadi jika saya membuat WhatsApp  chatbot  untuk menyelesaikan kasus penggunaan khusus, alih-alih aplikasi web? Apakah orang akan lebih menyukainya? Apakah akan lebih bermanfaat?
Tapi ceritanya jauh lebih besar dari itu. Chatbots memiliki banyak potensi! Dalam tutorial WhatsApp chatbot ini, saya ingin berbagi perjalanan belajar saya, praktik terbaik yang saya temukan, dan prediksi saya pada aplikasi vs. pertanyaan chatbot. Dan selanjutnya: Akankah suatu hari chatbot menggantikan semua aplikasi tradisional?
Konferensi TNW Couch
Bergabunglah dengan para pemimpin industri untuk menentukan strategi baru untuk masa depan yang tidak pasti
DAFTAR SEKARANG
Perusahaan tempat saya bekerja memiliki kantor untuk sekitar 2.000 karyawan di tengah kota Tel Aviv. Tempat parkir sangat terbatas, sehingga orang-orang parkir di ruang yang sengaja dirancang untuk parkir ganda, di mana satu mobil menghalangi yang lain. Di setiap ruang parkir ganda, pengemudi pertama memarkir di dalam, dan memarkir kedua 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 yang menghalangi mobil mereka. Jika demikian, mereka harus memanggil pengemudi lain dan berharap bahwa mereka tidak berada di tengah pertemuan sehingga mereka bisa pergi dan memindahkan mobil mereka keluar dari jalan.
Untuk membuat proses lebih baik, saya membuat aplikasi web.
Konsep aplikasi web asli, menampilkan deretan ruang parkir ganda di dalam dan di luar dengan angka dan terkadang nama.  Mereka yang memiliki nama berwarna biru, dan mereka yang tanpa nama berwarna hijau.
Sederhana saja. Tidak ada ujung belakang. Tidak ada server hosting. Tidak ada pemeliharaan basis data. Bahkan tidak ada kerangka UI. Tidak ada webpack dan tidak ada bundel JS sama sekali! Hanya vanilla JavaScript.
Itu di-host dengan menggunakan hosting halaman statis GitHub gratis. Basis datanya adalah FireBase, jadi kami memiliki dukungan waktu nyata dan dukungan JSON, dan tidak perlu back end.
Antarmuka pengguna sangat mudah. Pengguna akan melihat semua tempat parkir dan mengklik yang kosong untuk mengisi rincian mereka. Jika sudah diparkir, itu akan mengambil data dari penyimpanan lokal browser. Jika mereka mengklik slot yang 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 pembangunan membantu dan menghemat waktu bagi banyak orang — investasi yang baik.
Dari aplikasi web ke chatbot
Suatu hari, Facebook mengumumkan bahwa mereka akan merilis API untuk WhatsApp. Keesokan harinya, saudara lelaki saya membeli Amazon Echo, menampilkan Alexa. Sekitar waktu itu, saya juga mulai melihat Google Assistant di mana-mana.
Saya mulai berpikir bahwa mungkin dunia bergerak menuju chatbots, 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 umpan balik pada aplikasi web biasa, dan saya yakin itu mungkin mengatasinya jika saya ingin membuat WhatsApp chatbot:
Aplikasi ini tidak berfungsi dengan baik pada beberapa ponsel lama.
Itu tidak berfungsi di bawah tanah (di mana parkir berada — tidak ada sinyal seluler yang bagus di sana).
Pengemudi ingin mengirim pesan ke pemblokir alih-alih membuka dialer telepon.
Driver 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 mengembangkan hanya mesin kecil untuk menjawab pertanyaan, itu akan meninggalkan kerja keras pemeliharaan untuk pengembang obrolan platform. Yang harus saya lakukan adalah menggali cara membuat WhatsApp chatbot.
Segera setelah saya mulai mengembangkan asisten parkir baru chatbot, saya menyadari betapa fantastisnya ide itu. Sangat mudah dan cepat untuk menambahkan fitur baru, dan saya bahkan tidak perlu melakukan pengujian end-to-end.
Tidak ada sinyal? Tidak masalah.
Tidak hanya itu, saya tidak lagi membutuhkan proses CI / CD yang rumit. Jika itu bekerja di emulator obrolan, itu akan bekerja di mana-mana. Tidak , 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 otentikasi — saya menggunakan nomor telepon pengguna sebagai identifikasi. .apk
Tidak ada sinyal? Tidak masalah. Saya tidak perlu menambahkan dukungan offline menggunakan file manifes: WhatsApp memberikannya kepada saya di luar kotak. Pesan akan segera keluar, ketika pengguna pergi ke tingkat atas di mana wifi lebih baik.
Kemudian saya menyadari bahwa setiap kali platform obrolan akan memperkenalkan fitur baru, aplikasi saya akan segera mendapat manfaat darinya. Wow — sekarang ini investasi yang sangat bagus. (Agar adil, ada juga risiko bahwa fitur-fitur baru dapat membatasi fungsionalitas atau membuat perubahan yang membutuhkan upaya pengembangan lebih lanjut, jadi pikirkan baik-baik sebelum mengimplementasikan tugas-tugas penting bisnis).
Menulis parkir ssistant , prototipe obrolan WhatsApp
Untuk membuat obrolan 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 — ketika beralih ke produksi, pengembang akan ingin menggunakan nomor telepon khusus.
Nomor gratis Twilio masing-masing dibagikan di banyak pengguna Twilio. Untuk membedakan pengguna akhir aplikasi dari aplikasi pengguna Twilio lain, pengguna akhir harus mengirim pesan yang telah ditentukan sebelumnya ke chatbot.
Setelah pengguna mengirim pesan khusus ke nomor bersama, semua pesan dari nomor mereka akan diarahkan ke akun Twilio Anda dan pengait web. 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
Pada “Dasbor SMS yang Dapat Diprogram” dari Twilio, ada tautan “WhatsApp Beta” di navbar sebelah kiri:
Cuplikan layar “Dasbor SMS yang Dapat Diprogram” Twilio, menampilkan grafik pesan terbaru, dan grafik kesalahan dan peringatan terbaru lainnya.  Opsi keempat di navbar adalah “WhatsApp Beta.”
Mengklik itu, pengembang akan melihat halaman dengan opsi “Kotak Pasir.”
Tangkapan layar dari langkah pengaturan kotak pasir WhatsApp Twilio, menunggu pesan WhatsApp khusus untuk dikirim ke nomor tertentu.
Untuk mengaitkan pengguna, mereka perlu mengirim satu pesan khusus ke nomor yang disediakan Twilio. Setelah pengguna melakukan itu, kami dapat mulai mengirim pesan kepada mereka dan memproses pesan dari mereka, melalui Twilio.
Berikut ini 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 ini 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 dapat mulai mengirim pesan ke klien! Tetapi penting untuk mengingat dua batasan teknis paling penting dari pesan WhatsApp:
Ketika bot menerima pesan, Anda dapat mengirim satu balasan teks secara gratis. Lebih dari itu membutuhkan uang.
Bot hanya dapat mengirim pesan ke pengguna selama jendela 24 jam dimulai saat menerima pesan dari pengguna. Di luar jendela ini, bot hanya dapat mengirim pesan menggunakan templat yang disetujui, seperti yang akan kita lihat nanti.
Menerima pesan WhatsApp
Mengirim pesan cukup mudah, tetapi menerima dan memproses pesan bahkan lebih mudah.
Tangkapan layar laman “Twilio Sandbox for WhatsApp”.  Bagian Konfigurasi Kotak Pasir memiliki dua bidang URL titik akhir, untuk “ketika pesan masuk” dan “URL panggilan balik status.”  Bagian Peserta Sandbox mencantumkan id pengguna (dalam format “whatsapp:” diikuti oleh nomor telepon) dan memiliki instruksi yang sama seperti sebelumnya tentang cara mengundang teman ke kotak pasir melalui mengirim pesan khusus.
Pada halaman “kotak pasir” Twilio, pengembang dapat menentukan di mana Twilio harus mengirim pesan yang diterimanya di nomor WhatsApp bersama. Selama pengembangan, layanan seperti Ngrok atau Serveo dapat menyediakan URL publik yang merutekan 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 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 obrolan WhatsApp.
Template pesan
Seperti yang disebutkan, chatbots hanya dapat mengirim pesan gaya bebas ke pengguna yang “saat ini” berinteraksi dengannya, 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. Ini untuk mencegah spam.
Dalam kasus penggunaan saya, saya ingin memperbarui driver ketika seseorang memblokir mereka, bahkan jika mereka bukan pengguna chatbot. Di Twilio, klik “pengirim” dan “konfigurasikan.”
Cuplikan layar halaman “WhatsApp Enabled Senders” Twilio, daftar nomor, nama tampilan bisnis mereka, dan status (satu yang terdaftar ditandai Disetujui, yang lain, “Menunggu Persetujuan dari WhatsApp.”)
Ini adalah templat yang saya pilih:
{{1}} is blocking your exit from the parking lot. I will notify you when they leave.
Beberapa hari kemudian, Facebook menyetujui templat saya, dan saya bisa mulai mengirim pesan-pesan itu kepada semua orang yang memiliki WhatsApp, bukan hanya driver yang telah mengirim pesan ke chatbot.
Mengirim pesan dari templat persis seperti mengirim pesan biasa, menggunakan API yang sama. WhatsApp secara otomatis melihat bahwa itu cocok dengan templat dan menyetujui pesan.
Tidak hanya untuk asisten parkir
Strategi ini menarik bagi saya ketika saya membayangkan toko online: Mungkin suatu hari orang akan dapat membeli apa pun menggunakan chatbots. Ini akan semudah mengirim pesan WhatsApp dan melampirkan gambar. Bayangkan saja jika pengguna dapat melampirkan uang nyata untuk setiap pesan WhatsApp. Akan sangat mudah untuk membeli barang. Pengguna akan dengan mudah dapat membeli apa saja dengan berbicara dengan chatbot pemasok.
Bayangkan chatbot yang menggantikan Waze atau Google Maps. Anda mengirimkannya pesan teks dari tujuan Anda. Platform chatbot melacak lokasi Anda, dan chatbot mengirimi Anda rekaman pesan yang diputar secara otomatis dengan arah navigasi navigasi yang diucapkan secara realtime.
Itu bukan fantasi. WhatsApp saat ini mendukung berbagi lokasi secara real time — yang mereka butuhkan hanyalah opsi untuk memutar ulang pesan yang diterima, dan voila.
Pikirkan tentang obrolan Waze atau obrolan taksi alih-alih 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, “Jangan pengguna lebih suka antarmuka grafis, dan bukan hanya mengetik?” Saya percaya bahwa platform chatbot akan memberikan 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 olahpesan cepat yang mereka sukai.
Keuntungan ini adalah alasan mengapa pengembang ingin membuat WhatsApp chatbots untuk menangani tugas-tugas penting, seperti memberikan jawaban otoritatif instan tentang pandemi coronavirus, untuk membantu mengurangi penyebaran informasi yang salah.
TL; DR: 7 kesimpulan tentang memigrasikan aplikasi web ke chatbots
Singkatnya:

Berkali-kali, mengembangkan chatbot dapat memangkas waktu pengembangan secara signifikan, karena tidak perlu

merancang dan merencanakan antarmuka pengguna grafis. (Yang mengatakan, ada baiknya melihat poin yang lebih baik dari desain UX chatbot sebelum memulai, untuk belajar dari kesalahan orang lain .)
Jauh lebih mudah untuk menambahkan fitur baru ke chatbots. 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 untuk 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 dapat memilih gambar dari galeri mereka dan mengirimkannya ke chatbot Anda — izin untuk mengakses galeri gambar sudah diberikan ke platform obrolan.
Platform obrolan memudahkan untuk menangani pemberitahuan push. Pemberitahuan push adalah apa yang
membuat perbedaan antara aplikasi yang dilupakan pengguna dan aplikasi yang akan digunakan oleh pengguna secara teratur.
Platform obrolan menangani perpindahan antara kondisi offline dan online untuk Anda.
Cara membuat obrolan WhatsApp: Saran perpisahan dan praktik terbaik
Kelebihan menulis chatbot cukup jelas. Pengembang yang siap membangun satu disarankan untuk memulai dari yang kecil, dengan chatbot yang mengerti satu pesan. Dan menanganinya dengan baik.
Chatbots harus menempel pada pesan pendek. Orang tidak membaca pesan panjang. Ketika Anda memiliki sesuatu yang penting untuk dikirim yang tidak dapat diungkapkan secara ringkas, lebih baik membagi pesan menjadi beberapa yang kecil.

Obrolan dengan kepribadian diterima dengan lebih baik. Bahkan beberapa “bicara manusia” minimum berjalan jauh

dibandingkan dengan pendekatan “sistem pesan formalitas”: “Saya akan memperbarui peta parkir untuk Anda,” bukannya, “Database telah diperbarui.” Chatbot harus meninggalkan pengguna dengan perasaan bahwa itu adalah mesin yang ada di sana untuk melayani pengguna, daripada kotak hitam yang melakukan operasi teknis yang mungkin tidak dapat mereka pahami.

Tutorial chatbot WhatsApp ini tidak membahas secara spesifik tentang penguraian pesan bahasa alami yang akan

dikirim pengguna ke chatbot. Tetapi penyedia layanan pengembangan chatbot yang bercita-cita dapat membaca kode sumber dari WhatsApp Parking Assistant bot (khususnya , yang menerima permintaan dari pengguna sebagai tindakan) untuk mengetahui bagaimana aspek tersebut bekerja.       hackparkDialogFlow.ts
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 sukses dengan pengembangan chatbot WhatsApp Anda sendiri!