สร้าง WhatsApp Chatbot ไม่ใช่แอพ

นานมาแล้ว ฉันสร้างเว็บแอปสำหรับองค์กร (พนักงาน 200k+ คน) ความคิดเห็นเกี่ยวกับเว็บแอปกระตุ้นให้ฉันทำการทดสอบ จะเกิดอะไรขึ้นหากฉันต้องสร้างแชทบอทของ WhatsApp เพื่อแก้ปัญหากรณีการใช้งานเฉพาะ แทนที่จะเป็นเว็บแอป คนจะชอบมันดีกว่าไหม? จะมีประโยชน์มากกว่านี้ไหม?

แต่เรื่องราวมันยิ่งใหญ่กว่านั้นมาก Chatbots มีศักยภาพมาก! ในบทช่วยสอนแชทบอทของ WhatsApp นี้ ฉันต้องการแชร์เส้นทางการเรียนรู้ แนวทางปฏิบัติที่ดีที่สุดที่ฉันค้นพบ และการคาดคะเนในแอปกับคำถามแชทบ็อต และอื่นๆ: วันหนึ่งแชทบอทจะมาแทนที่แอปแบบเดิมๆ ทั้งหมดหรือไม่

บริษัทที่ฉันทำงานด้วยมีสำนักงานสำหรับพนักงานประมาณ 2,000 คนในใจกลางเมืองเทลอาวีฟ พื้นที่จอดรถมีจำกัดมาก ดังนั้นผู้คนจึงจอดรถในพื้นที่ที่ออกแบบมาโดยเจตนาสำหรับการจอดรถสองครั้ง โดยที่รถคันหนึ่งจะขวางอีกคันหนึ่ง ในทุกพื้นที่จอดรถสองคัน คนขับคนแรกจะจอดด้านใน และที่จอดรถที่สองจอดด้านนอก

จากไวท์บอร์ดสู่เว็บแอป

ก่อนจะมีแอพ ก็มีบอร์ดใหญ่ๆ คนขับทุกคนทำเครื่องหมายว่าจอดรถที่ไหน พร้อมชื่อและหมายเลขโทรศัพท์ ก่อนออกจากสำนักงาน คนขับต้องตรวจสอบว่ามีใครมาขวางรถของตนหรือไม่ ถ้าเป็นเช่นนั้น พวกเขาจะต้องโทรหาคนขับอีกคนและหวังว่าพวกเขาจะไม่ได้อยู่กลางการประชุมเพื่อที่พวกเขาจะได้ไปและย้ายรถออกไปให้พ้นทาง

เพื่อทำให้กระบวนการดีขึ้น ฉันได้สร้างเว็บแอป

มันง่าย ไม่มีส่วนหลัง. ไม่มีเซิร์ฟเวอร์โฮสติ้ง ไม่มีการบำรุงรักษาฐานข้อมูล ไม่มีแม้แต่กรอบ UI ใด ๆ ไม่มี webpack และไม่มีบันเดิล JS เลย! แค่วานิลลาจาวาสคริปต์

มันถูกโฮสต์โดยใช้การโฮสต์เพจสแตติกฟรีของ GitHub ฐานข้อมูลคือ FireBase ดังนั้นเราจึงมีการสนับสนุนแบบเรียลไทม์และรองรับ JSON และไม่จำเป็นต้องมีแบ็คเอนด์

ส่วนต่อประสานกับผู้ใช้นั้นตรงไปตรงมา ผู้ใช้จะเห็นจุดจอดรถทั้งหมดและคลิกที่จอดรถว่างเพื่อกรอกรายละเอียด หากจอดรถไว้แล้ว จะนำข้อมูลจากที่จัดเก็บในเครื่องของเบราว์เซอร์ หากพวกเขาคลิกที่ช่องที่ลงทะเบียนไว้ พวกเขาจะเห็นรายละเอียดการติดต่อที่เกี่ยวข้องและสามารถเลือกที่จะโทรหาคนขับได้

มันใช้งานได้ดีมาเกือบปีแล้ว การพัฒนาน้อยกว่าหนึ่งวันช่วยและประหยัดเวลาสำหรับคนจำนวนมาก ซึ่งเป็นการลงทุนที่ดี

จาก Web App สู่ Chatbot

อยู่มาวันหนึ่ง Facebook ประกาศว่าพวกเขากำลังจะเปิดตัว API สำหรับ WhatsApp วันรุ่งขึ้น พี่ชายของฉันซื้อ Amazon Echo ร่วมกับ Alexa ในช่วงเวลานั้น ฉันก็เริ่มเห็น Google Assistant ทุกที่เช่นกัน

ฉันเริ่มคิดว่าบางทีโลกกำลังเคลื่อนเข้าหาแชทบอท ดังนั้นฉันควรทดลอง ผู้ใช้ต้องการใช้แชทบอทหรือไม่? ฉันจะต้องให้การสนับสนุนน้อยลงหรือไม่? มันจะแนะนำคุณสมบัติ meta ใหม่ ๆ โดยการใช้ประโยชน์จากโครงสร้างพื้นฐานที่แตกต่างกันหรือไม่?

ฉันได้รับคำติชมเกี่ยวกับเว็บแอปทั่วไป และเชื่อว่าอาจแก้ปัญหานี้ได้หากฉันต้องสร้างแชทบ็อต WhatsApp:

• แอปทำงานได้ไม่ดีในโทรศัพท์มือถือรุ่นเก่าบางรุ่น
• มันไม่ได้ทำงานใต้ดิน (ที่ซึ่งที่จอดรถอยู่—ไม่มีสัญญาณมือถือที่ดีที่นั่น)
• ไดรเวอร์ต้องการส่งข้อความไปยังตัวบล็อกแทนที่จะเปิดแป้นโทรศัพท์
• ผู้ขับขี่ต้องการรับการแจ้งเตือนแบบพุชหากมีคนบล็อกพวกเขา แทนที่จะเปิดเว็บแอปทุกครั้งก่อนออกเดินทาง

สิ่งสำคัญคือต้องจำไว้ว่านักพัฒนาแพลตฟอร์มแชทเช่น Telegram หรือ WhatsApp ได้ทำงานทั้งวันทั้งคืนมาหลายปีเพื่อให้มั่นใจถึงความเสถียรของแอพ ด้วยการใช้ทรัพยากรของพวกเขาและพัฒนาเพียงเครื่องมือขนาดเล็กสำหรับการตอบคำถาม นั่นจะทำให้นักพัฒนาแพลตฟอร์มแชทต้องทำงานหนักในการบำรุงรักษา ทั้งหมดที่ฉันต้องทำคือค้นหาวิธีสร้างแชทบ็อต WhatsApp

ทันทีหลังจากที่ฉันเริ่มพัฒนาแชทบ็อตผู้ช่วยจอดรถ ฉันก็รู้ทันทีว่าแนวคิดนี้ยอดเยี่ยมเพียงใด การเพิ่มคุณสมบัติใหม่ทำได้ง่ายและรวดเร็ว และฉันไม่จำเป็นต้องทำการทดสอบตั้งแต่ต้นจนจบด้วยซ้ำ

ไม่มีสัญญาณ? ไม่มีปัญหา.

ทวีต

ไม่เพียงเท่านั้น ฉันยังไม่ต้องการกระบวนการ CI/CD ที่ซับซ้อนอีกต่อไป ถ้ามันทำงานในโปรแกรมจำลองการแชท มันจะทำงานได้ทุกที่ ไม่มี .apk ไม่มี Xcode ไม่มี App Store หรือ Google Play แชทบอทสามารถส่งข้อความถึงผู้ใช้โดยที่ฉันไม่ต้องลงทะเบียนอุปกรณ์ ใช้ PubSub หรือบริการที่คล้ายกันสำหรับการแจ้งเตือนแบบพุช หรือบันทึกโทเค็นของผู้ใช้ ไม่ต้องใช้ระบบตรวจสอบสิทธิ์ ฉันใช้หมายเลขโทรศัพท์ของผู้ใช้เป็นข้อมูลระบุตัวตน

ไม่มีสัญญาณ? ไม่มีปัญหา. ฉันไม่จำเป็นต้องเพิ่มการสนับสนุนแบบออฟไลน์โดยใช้ไฟล์ Manifest: WhatsApp มอบให้ฉันทันที ข้อความจะออกไปเร็วพอเมื่อผู้ใช้ไปที่ระดับบนที่ wifi ดีกว่า

จากนั้นฉันก็ตระหนักว่าทุกครั้งที่แพลตฟอร์มแชทแนะนำคุณสมบัติใหม่ แอพของฉันก็จะได้รับประโยชน์จากมันทันที ว้าว—เป็นการลงทุนที่ดีจริงๆ (เพื่อความเป็นธรรม ยังมีความเสี่ยงที่ฟีเจอร์ใหม่อาจจำกัดการทำงานหรือสร้างการเปลี่ยนแปลงที่แตกหักซึ่งต้องใช้ความพยายามในการพัฒนามากขึ้น ดังนั้นให้คิดให้รอบคอบก่อนใช้งานที่มีความสำคัญต่อธุรกิจ)

การเขียนผู้ช่วยที่ จอดรถ ต้นแบบ WhatsApp Chatbot

ในการสร้างแชทบ็อต WhatsApp ความท้าทายแรกคือการรับข้อความจาก WhatsApp ไปยังโปรแกรมของคุณ วิธีแก้ปัญหาที่ง่ายที่สุดที่ฉันพบคือการใช้หมายเลขโทรศัพท์ Twilio ที่ใช้ร่วมกัน มีไว้เพื่อการพัฒนาเท่านั้น เมื่อย้ายไปใช้งานจริง นักพัฒนาจะต้องการใช้หมายเลขโทรศัพท์เฉพาะ

หมายเลขฟรีของ Twilio แต่ละหมายเลขจะแชร์กับผู้ใช้ Twilio หลายคน ในการแยกความแตกต่างระหว่างผู้ใช้ปลายทางของแอปจากแอปของผู้ใช้ Twilio รายอื่น ผู้ใช้ปลายทางจะต้องส่งข้อความที่กำหนดไว้ล่วงหน้าไปยังแชทบ็อต

หลังจากที่ผู้ใช้ส่งข้อความพิเศษไปยังหมายเลขที่แบ่งปัน ข้อความทั้งหมดจากหมายเลขของพวกเขาจะถูกส่งไปยังบัญชี Twilio และเว็บฮุคของคุณ ด้วยเหตุนี้จึงต้องใช้หมายเลขเฉพาะในการผลิต จึงไม่รับประกันว่าผู้ใช้รายใดรายหนึ่งจะต้องการใช้เพียงแอปเดียวในหมายเลขที่แชร์เท่านั้น

กำลังส่งข้อความ WhatsApp

ใน "แดชบอร์ด SMS ที่ตั้งโปรแกรมได้" ของ Twilio จะมีลิงก์ "WhatsApp Beta" ในแถบนำทางด้านซ้ายมือ:

เมื่อคลิกเข้าไป นักพัฒนาจะเห็นหน้าที่มีตัวเลือก “Sandbox”

ในการเชื่อมโยงผู้ใช้ พวกเขาจะต้องส่งข้อความพิเศษหนึ่งข้อความไปยังหมายเลขที่ Twilio ให้ไว้ เมื่อผู้ใช้ทำเช่นนั้น เราสามารถเริ่มส่งข้อความถึงพวกเขาและประมวลผลข้อความจากพวกเขาผ่าน Twilio

นี่คือตัวอย่างการส่งข้อความโดยใช้ 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

นี่เป็นข้อความธรรมดา แต่คุณยังสามารถแนบสื่อ (รูปภาพ ฯลฯ) กับข้อความของคุณได้ นี่คือตัวอย่าง 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)) }

เพียงเท่านี้ เราก็เริ่มส่งข้อความถึงลูกค้าได้แล้ว! แต่สิ่งสำคัญคือต้องจำข้อจำกัดทางเทคนิคที่สำคัญที่สุดสองข้อของข้อความ WhatsApp:

1. เมื่อบอทได้รับข้อความ คุณสามารถส่งข้อความตอบกลับได้ฟรีหนึ่งข้อความ มากกว่านั้นเสียเงิน
2. บอทสามารถส่งข้อความถึงผู้ใช้ได้เฉพาะในช่วงเวลา 24 ชั่วโมง โดยเริ่มเมื่อได้รับข้อความจากผู้ใช้ นอกหน้าต่างนี้ บอทสามารถส่งข้อความได้โดยใช้เทมเพลตที่ได้รับอนุมัติเท่านั้น ตามที่เราจะเห็นในภายหลัง

รับข้อความ WhatsApp

การส่งข้อความนั้นค่อนข้างง่าย แต่การรับและประมวลผลข้อความนั้นง่ายยิ่งขึ้น

ในหน้า “แซนด์บ็อกซ์” ของ Twilio นักพัฒนาสามารถกำหนดได้ว่า Twilio ควรส่งข้อความไปที่ใดที่หมายเลข WhatsApp ที่แชร์ ในระหว่างการพัฒนา บริการต่างๆ เช่น Ngrok หรือ Serveo สามารถให้ URL สาธารณะที่กำหนดเส้นทางไปยังเครื่องของนักพัฒนาในพื้นที่

ข้อความ Twilio WhatsApp มีลักษณะดังนี้:

 { "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" }

นั่นคือทั้งหมดที่เราต้องการ เราสามารถใช้ภาษาโปรแกรมใดก็ได้เพื่อรับข้อความนี้ แยกวิเคราะห์ และพยายามทำความเข้าใจว่าผู้ใช้กำลังถามอะไร ซึ่งอาจส่งผลให้เกิดการดำเนินการ CRUD บางอย่างบนฐานข้อมูล หลังจากนั้นบอทสามารถส่งข้อมูลที่เหมาะสม (หรือข้อความแสดงความสำเร็จ/ล้มเหลว) ไปยังผู้ใช้ในการตอบกลับ นี่เป็นพื้นฐานของวิธีสร้างแชทบ็อต WhatsApp

เทมเพลตข้อความ

ดังที่กล่าวไว้ แชทบอทสามารถส่งข้อความฟรีสไตล์ได้เฉพาะกับผู้ใช้ที่ "กำลังโต้ตอบ" กับพวกเขาเท่านั้น กล่าวคือ ในช่วงเวลา 24 ชั่วโมง แต่ถ้าคุณต้องการส่งข้อความถึงผู้ใช้ใหม่ หรือนอกหน้าต่าง คุณต้องใช้เทมเพลตข้อความที่ได้รับการอนุมัติล่วงหน้า นี่คือการป้องกันสแปม

ในกรณีการใช้งานของฉัน ฉันต้องการอัปเดตไดรเวอร์เมื่อมีคนบล็อกพวกเขา แม้ว่าพวกเขาจะไม่ใช่ผู้ใช้แชทบ็อตก็ตาม ใน Twilio ให้คลิกที่ "ผู้ส่ง" และ "กำหนดค่า"

นี่คือเทมเพลตที่ฉันเลือก:

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

หลายวันต่อมา Facebook อนุมัติเทมเพลตของฉัน และฉันสามารถเริ่มส่งข้อความเหล่านั้นไปยังทุกคนที่มี WhatsApp ได้ ไม่ใช่แค่คนขับที่ส่งข้อความไปยังแชทบ็อตเท่านั้น

การส่งข้อความจากเทมเพลตนั้นเหมือนกับการส่งข้อความปกติโดยใช้ API เดียวกัน WhatsApp จะเห็นว่าตรงกับเทมเพลตและอนุมัติข้อความโดยอัตโนมัติ

ไม่เพียงแต่สำหรับ ผู้ช่วยที่จอดรถ

กลยุทธ์นี้น่าตื่นเต้นสำหรับฉันเมื่อนึกถึงร้านค้าออนไลน์: บางทีวันหนึ่งผู้คนจะสามารถซื้ออะไรก็ได้โดยใช้แชทบอท มันจะง่ายเหมือนการส่งข้อความ WhatsApp และแนบรูปภาพ ลองนึกภาพว่าผู้ใช้สามารถแนบเงินจริงกับข้อความ WhatsApp แต่ละข้อความได้หรือไม่ มันจะตรงไปตรงมามากในการซื้อของ ผู้ใช้สามารถซื้ออะไรก็ได้โดยพูดคุยกับแชทบ็อตของซัพพลายเออร์

ลองนึกภาพแชทบ็อตที่มาแทนที่ Waze หรือ Google Maps คุณส่งข้อความถึงปลายทางของคุณ แพลตฟอร์มแชทบอทกำลังติดตามตำแหน่งของคุณ และแชทบอทจะส่งข้อความที่บันทึกไว้ถึงคุณซึ่งเล่นโดยอัตโนมัติพร้อมเสียงบอกทิศทางแบบเรียลไทม์ของการนำทาง

มันไม่ใช่แฟนตาซี ปัจจุบัน WhatsApp รองรับการแชร์ตำแหน่งในแบบเรียลไทม์—ทั้งหมดที่พวกเขาต้องการคือตัวเลือกในการเล่นข้อความที่ได้รับโดยอัตโนมัติและ voila

ลองนึกถึงแชทบอทของ Waze หรือแชทบ็อตแท็กซี่แทนแอป Gett หรือ Uber คุณส่งข้อความบอกว่าคุณอยู่ที่ไหน จากนั้นแท็กซี่ก็มาถึง และคุณชำระเงินโดยใช้ WhatsApp ง่ายมาก

ผู้อ่านบางคนอาจคิดว่า “ผู้ใช้ไม่ชอบอินเทอร์เฟซแบบกราฟิกและไม่ใช่แค่การพิมพ์เหรอ” ฉันเชื่อว่าแพลตฟอร์มแชทบอทจะให้ตัวเลือกแก่เจ้าของแชทบอทในการส่งปุ่ม รูปภาพ และกล่อง HTML แท้ ๆ ระหว่างการแปลง Facebook รองรับ Webview สำหรับ Messenger แล้ว ผู้ใช้ไม่จำเป็นต้องติดตั้งอะไรเลย เพียงแค่ใช้แอพส่งข้อความโต้ตอบแบบทันทีที่ต้องการ

ข้อดีเหล่านี้เป็นสาเหตุที่นักพัฒนาต้องการสร้างแชทบอทของ WhatsApp เพื่อจัดการกับงานที่สำคัญ เช่น ให้คำตอบที่เชื่อถือได้ทันทีเกี่ยวกับการระบาดใหญ่ของโคโรนาไวรัส เพื่อช่วยลดการแพร่กระจายของข้อมูลเท็จ

TL; DR: 7 บทสรุปเกี่ยวกับการย้ายเว็บแอปไปยัง Chatbots

สรุป:

• หลายครั้งที่การพัฒนาแชทบ็อตสามารถลดเวลาในการพัฒนาได้อย่างมาก เนื่องจากไม่จำเป็นต้องออกแบบและวางแผนส่วนต่อประสานกราฟิกกับผู้ใช้ (ที่กล่าวว่า มันคุ้มค่าที่จะดูจุดปลีกย่อยของการออกแบบ chatbot UX ก่อนเริ่มต้น เพื่อเรียนรู้จากความผิดพลาดของผู้อื่น)
• การเพิ่มคุณสมบัติใหม่ให้กับแชทบอทนั้นง่ายกว่ามาก นักพัฒนาไม่จำเป็นต้องออกแบบใหม่หรือเปลี่ยนแปลงองค์ประกอบปัจจุบันใดๆ แชทบอทเพียงแค่ต้องเริ่มทำความเข้าใจกับข้อความประเภทใหม่
• Chatbots สามารถเข้าถึงได้มากขึ้นโดยค่าเริ่มต้นสำหรับผู้ที่มีความต้องการพิเศษ
• ไม่จำเป็นต้องปรับแต่งโซลูชันข้ามแพลตฟอร์ม แพลตฟอร์ม chatbot ทำเช่นนั้นแล้ว
• ผู้ใช้เชื่อถือแชทบอทมากขึ้นในการแบ่งปันข้อมูล คุณไม่จำเป็นต้องขออนุญาตหรือแสดงคำเตือน - เช่น ผู้ใช้สามารถเลือกรูปภาพจากแกลเลอรีและส่งไปที่แชทบ็อตของคุณ สิทธิ์ในการเข้าถึงแกลเลอรีภาพจะมอบให้กับแพลตฟอร์มแชทแล้ว
• แพลตฟอร์มแชทช่วยให้จัดการข้อความ Push ได้ง่าย การแจ้งเตือนแบบพุชคือสิ่งที่สร้างความแตกต่างระหว่างแอปที่ผู้ใช้ลืมและแอปที่ผู้ใช้จะมีส่วนร่วมเป็นประจำ
• แพลตฟอร์มการแชทจะจัดการการเปลี่ยนแปลงระหว่างเงื่อนไขออฟไลน์และออนไลน์สำหรับคุณ

วิธีสร้าง WhatsApp Chatbot: คำแนะนำและแนวทางปฏิบัติที่ดีที่สุด

ข้อดีของการเขียนแชทบ็อตนั้นค่อนข้างชัดเจน นักพัฒนาซอฟต์แวร์ที่พร้อมจะสร้างมันขึ้นมาควรเริ่มต้นจากสิ่งเล็กๆ ด้วยแชทบอทที่เข้าใจข้อความเดียว และรับมือได้ดี

Chatbots ควรยึดติดกับข้อความสั้น ๆ คนไม่อ่านข้อความยาวๆ เมื่อคุณมีสิ่งสำคัญที่จะส่งซึ่งไม่สามารถอธิบายได้กระชับ การแยกข้อความเป็นข้อความเล็กๆ หลายๆ ข้อความจะดีกว่า

แชทบอทที่มีบุคลิกดีขึ้น แม้แต่ "การพูดโดยมนุษย์" ขั้นต่ำสุดบางวิธีก็ยังทำได้ไกลเมื่อเทียบกับแนวทาง "ข้อความของระบบ": "ฉันจะอัปเดตแผนที่ที่จอดรถสำหรับคุณ" แทนที่จะเป็น "ฐานข้อมูลได้รับการอัปเดตแล้ว" แชทบ็อตควรให้ผู้ใช้รู้สึกว่าเป็นเครื่องที่ให้บริการผู้ใช้ แทนที่จะเป็นกล่องดำที่ดำเนินการทางเทคนิคที่พวกเขาอาจไม่เข้าใจ

บทช่วยสอนแชทบอทของ WhatsApp นี้ไม่ได้เจาะจงถึงการแยกวิเคราะห์ข้อความภาษาธรรมชาติที่ผู้ใช้จะส่งไปยังแชทบอท แต่ผู้ให้บริการที่ต้องการพัฒนาแชทบอทสามารถอ่านซอร์สโค้ดของบอท WhatsApp Parking Assistant (โดยเฉพาะ hackparkDialogFlow.ts ซึ่งรับคำขอจากผู้ใช้เป็นการกระทำ) เพื่อให้เข้าใจถึงลักษณะการทำงาน

สำหรับบทความเชิงลึกเกี่ยวกับวิธีตรวจหาข้อความผู้ใช้ประเภทต่างๆ ในขณะที่ปฏิบัติตามแนวทางการแทรกการพึ่งพาในการเขียนโปรแกรม โปรดดูบทแนะนำ Chatbot ของ TypeScript ของ Toptal

ขอให้โชคดีกับการพัฒนาแชทบอท WhatsApp ของคุณเอง!