การสร้าง WhatsApp Chatbot ที่ขับเคลื่อนด้วย AI: คำแนะนำทีละขั้นตอน

เผยแพร่แล้ว: 2024-03-22
AI/ML 9 นาที 4
22 มีนาคม 2024

สรุป:

เรียนรู้วิธีสร้างแชทบอต WhatsApp ที่ขับเคลื่อนด้วย AI ทีละขั้นตอน โดยใช้ประโยชน์จากความสามารถของ Node.js และ OpenAI ตั้งแต่การตั้งค่าบัญชีธุรกิจ Meta ไปจนถึงการผสานรวม WhatsApp API และ OpenAI คู่มือนี้ช่วยให้ธุรกิจต่างๆ ปรับปรุงการโต้ตอบกับลูกค้าและปลดล็อกความเป็นไปได้ใหม่ๆ ในการสื่อสารอัตโนมัติ

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

ไม่ว่าคุณจะเป็นสตาร์ทอัพที่กำลังเติบโตหรือเป็นองค์กรที่จัดตั้งขึ้นแล้ว การไปยังขั้นตอนต่างๆ ของการพัฒนาสามารถทำได้ง่ายขึ้นด้วยแนวทางที่ถูกต้อง ในคู่มือที่ครอบคลุมนี้ เราจะสำรวจหลักการพื้นฐาน ขั้นตอนทีละขั้นตอน และข้อควรพิจารณาที่สำคัญที่จำเป็นสำหรับการรวม WhatsApp Business API เข้ากับแอปพลิเคชัน Node.js ของคุณ ด้วยการควบคุมพลังของความสามารถในการประมวลผลภาษาธรรมชาติของ OpenAI เราจะสร้างประสบการณ์ผู้ใช้ที่ราบรื่นซึ่งโดนใจผู้ชมของคุณ

ตั้งแต่การตั้งค่าบัญชี WhatsApp Business ไปจนถึงการผสานรวม API ของ OpenAI เข้ากับโค้ด Node.js ของคุณ โปรดปฏิบัติตามในขณะที่เราไขปริศนากระบวนการและเสริมพลังให้คุณสร้างโซลูชันที่ขับเคลื่อนด้วย AI ของคุณเอง การเดินทางที่เปลี่ยนแปลงไปสู่ขอบเขตของตัวแทนการสนทนาที่ขับเคลื่อนด้วย AI ไม่ใช่สิ่งที่คุณต้องทำเพียงลำพัง บริษัทพัฒนา AI Chatbot สามารถทำหน้าที่เป็นพันธมิตรที่เชื่อถือได้ของคุณ โดยให้ข้อมูลเชิงลึกและความเชี่ยวชาญอันล้ำค่าไปพร้อมกัน มาเริ่มต้นการเดินทางที่น่าตื่นเต้นนี้ด้วยกัน

ขั้นตอนที่ 1: การตั้งค่าบัญชีธุรกิจและแอพ Meta (Facebook)

  1. ขั้นแรกให้สร้างบัญชีธุรกิจ Meta (คลิกที่นี่)

กรอกรายละเอียดแล้วคลิกส่ง

2. สร้างแอป Meta (Facebook) ใหม่ (คลิกที่นี่)

  • (เข้าสู่ระบบ) บัญชีนักพัฒนา Meta (Facebook) ของคุณ

หลังจากเข้าสู่ระบบแล้วให้คลิกที่ “แอพของฉัน”

คลิกที่แอพของฉัน

3. ตอนนี้คลิกที่ "สร้างแอป"

4. เลือก “อื่นๆ” และคลิก “ถัดไป”

5. เลือกประเภทแอป: “ธุรกิจ” และคลิก “ถัดไป”

6. ระบุรายละเอียดแอปแล้วคลิก "สร้างแอป"

ขั้นตอนที่ 2: การตั้งค่าแอป Meta (Facebook) สำหรับการรวม WhatsApp

1. เพิ่ม WhatsApp ลงในแอป Meta (Facebook) ของคุณ

  • ใน "แดชบอร์ดนักพัฒนา" เลือกแอปของคุณ
  • ค้นหา "เพิ่มผลิตภัณฑ์ลงในแอปของคุณ" ในแท็บแดชบอร์ดของแอป
  • เลือก “WhatsApp” เพื่อตั้งค่า
  • เลือกบัญชีธุรกิจ Meta (Facebook) ของคุณ
  • ไปที่การตั้งค่าแอป > พื้นฐานจากแถบด้านข้าง
  • บันทึกการเปลี่ยนแปลง.
  • ตั้งค่าโหมดแอพเป็น Live

ขั้นตอนที่ 3: สร้างโทเค็น WhatsApp

หากต้องการรับโทเค็นการเข้าถึง WhatsApp แบบถาวร ให้ทำตามขั้นตอน 1 ถึง 3 ขั้นตอน:

1. สร้าง “ผู้ใช้ระบบ”:

  • เยี่ยมชม Meta Business Suite
  • ค้นหาบัญชีธุรกิจของคุณในเมนูแบบเลื่อนลงด้านซ้ายบน แล้วคลิกไอคอนการตั้งค่า (เฟือง)
  • คลิกการตั้งค่าธุรกิจ
  • ไปที่ผู้ใช้ > ผู้ใช้ระบบ
  • เพิ่มผู้ใช้ระบบผู้ดูแลระบบ

2. เพิ่มสินทรัพย์

  • หลังจากสร้างผู้ใช้ระบบแล้วให้คลิกที่เพิ่มสินทรัพย์
  • ไปที่แอพ > “ชื่อแอพของคุณ”
  • เลือกแอปของคุณและให้สิทธิ์การควบคุมเต็มรูปแบบในการจัดการแอป

3. สร้างโทเค็นการเข้าถึงของผู้ใช้ระบบ

  • คลิกปุ่มสร้างโทเค็นใหม่บนผู้ใช้ระบบ

เลือกแอปที่จะใช้โทเค็นและตั้งค่าการหมดอายุของโทเค็นเป็นไม่เลย

  • เลือกสิทธิ์ "whatsapp_business_messaging" และ "whatsapp_business_management"
  • สร้างโทเค็น
  • คัดลอกโทเค็นการเข้าถึงและเก็บไว้อย่างปลอดภัย

4. เพิ่มหมายเลขธุรกิจใหม่สำหรับ WhatsApp

  • คุณสามารถใช้หมายเลขธุรกิจของคุณเองหรือใช้หมายเลขทดสอบที่ให้ไว้สำหรับแชทบอท WhatsApp ของคุณ
  • ในแดชบอร์ดนักพัฒนา WhatsApp ให้ไปที่ WhatsApp > การตั้งค่า API จากแถบด้านข้าง
  • ดำเนินการต่อไปที่ “ขั้นตอนที่ 5: เพิ่มหมายเลขโทรศัพท์” คลิกเพิ่มหมายเลขโทรศัพท์
  • ระบุรายละเอียดที่จำเป็นในแบบฟอร์มต่อไปนี้
  • ยืนยันหมายเลขของคุณโดยใช้รหัสที่ได้รับ
  • เมื่อเพิ่มเรียบร้อยแล้ว ให้เลือกหมายเลขโทรศัพท์ของคุณในขั้นตอนที่ 1 ของการตั้งค่า API

5. เพิ่มวิธีการชำระเงิน

  • หากต้องการส่งข้อความผ่าน WhatsApp คุณต้องมีวิธีการชำระเงินที่ถูกต้อง เยี่ยมชมที่นี่เพื่อดูรายละเอียด
  • หลังจากเพิ่มหมายเลขโทรศัพท์ธุรกิจของคุณแล้ว คลิก "เพิ่มวิธีการชำระเงิน" เพื่อแก้ไขปัญหาการแจ้งเตือน "วิธีการชำระเงินที่ถูกต้องหายไป"
  • คุณจะถูกนำไปที่การตั้งค่าบัญชี WhatsApp ของคุณ คลิก "วิธีการชำระเงิน" > "เพิ่มวิธีการชำระเงินของธุรกิจ" และปฏิบัติตามคำแนะนำเพื่อเพิ่มข้อมูลบัตรของคุณ

6. ทดสอบหมายเลขธุรกิจใหม่ของคุณสำหรับ WhatsApp

  • กลับไปที่แดชบอร์ดนักพัฒนา WhatsApp ไปที่การตั้งค่า API
  • ป้อนหมายเลขทดสอบ "ถึง"
  • คลิก “ส่งข้อความ” เพื่อยืนยันการส่งข้อความสำเร็จ

ขั้นตอนที่ 4: กำหนดการตั้งค่า WhatsApp API Webhook

1. ตรวจสอบการโทรกลับ WhatsApp Webhook

  • ในแดชบอร์ดนักพัฒนา WhatsApp ให้ไปที่การกำหนดค่า
  • ใต้ Webhook ให้คลิกแก้ไข
  • ตอนนี้ เราต้องจัดเตรียม URL และโทเค็นของ webhook แบบสดให้กับ WhatsApp URL ที่เผยแพร่อยู่คือ URL ของแอปพลิเคชันของคุณ และโทเค็นก็ถูกสร้างขึ้นจากฝั่งของคุณด้วย ในภาพด้านล่าง ฉันได้เพิ่ม Ngrok URL ของฉันแล้วเนื่องจากแอปพลิเคชัน Node.js ของฉันทำงานบน Ngrok และฉันใช้ UUID เป็นโทเค็น
  • ในกระบวนการตรวจสอบ WhatsApp จะส่งคำขอ GET ไปยัง URL โทรกลับเพื่อตรวจสอบความถูกต้องของโทเค็นฮับ โค้ดต่อไปนี้เขียนใน Next.js (เฟรมเวิร์ก Node.js) จัดการกระบวนการตรวจสอบนี้ การยืนยันจะสำเร็จก็ต่อเมื่อรหัสของคุณส่งรหัสสถานะ 200 เป็นการตอบกลับ ดังที่แสดงด้านล่าง
ส่งออกฟังก์ชัน async GET (ต้องการ: NextRequest) {

ให้ hubMode = req.nextUrl.searchParams.get("hub.mode");

ให้ hubChallenge = req.nextUrl.searchParams.get("hub.challenge");

ให้ hubToken = req.nextUrl.searchParams.get("hub.verify_token");

//ค้นหาโทเค็นในฐานข้อมูล

ถ้า (

hubMode === "สมัครสมาชิก" &&

hubToken === "<ค่าจาก .env หรือจากฐานข้อมูล>"

) {

console.log("ยืนยันเรียบร้อยแล้ว");

ส่งคืนการตอบสนองใหม่ (hubChallenge);

}

ส่งคืนการตอบกลับใหม่ ("ข้อมูลรับรองไม่ถูกต้อง", { สถานะ: 400 });

}

  • ค้นหาช่อง "ข้อความ" และสมัครรับข้อมูลโดยทำเครื่องหมายในช่อง
  • ตอนนี้เราต้องการโทเค็นการเข้าถึง WhatsApp และแอพ Facebook ที่เราได้รับจากบัญชีธุรกิจ WhatsApp เดียวกัน
  • ในภาพด้านล่างคุณเห็นแอพ Facebook หลั่งออกมา

นอกจากนี้เราจำเป็นต้องเก็บข้อมูลที่ไฮไลต์ต่อไปนี้ไว้ด้วย

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

ขั้นตอนที่ 5: การส่งและรับข้อความผ่าน API

  • ในโค้ด TypeScript ที่ให้มา เราได้รวม WhatsApp API เพื่อส่งและรับข้อความสำเร็จแล้ว นอกจากนี้ ฉันยังได้รวม OpenAI และโมเดล AI ที่ได้รับการฝึกอบรมมาโดยเฉพาะเพื่อตอบสนองต่อข้อความขาเข้าตามเป้าหมายของฉัน
  • URL โทรกลับที่ให้ไว้กับ WhatsApp ใช้สำหรับทั้งคำขอ GET และ POST เมื่อส่งข้อความไปยังหมายเลขธุรกิจ WhatsApp จะเรียกใช้ URL โทรกลับนี้และส่งข้อความพร้อมกับรายละเอียดผู้ใช้ รหัสต่อไปนี้อ่านข้อความนั้นและตอบสนองตามตรรกะที่นำไปใช้
  • ฟังก์ชัน POST เป็นฟังก์ชันอะซิงโครนัสที่จัดการคำขอ POST ที่เข้ามา อันดับแรกจะแยกวิเคราะห์คำขอขาเข้าไปยัง JSON และแยกข้อความที่ผู้ใช้ส่งจาก WhatsApp หากข้อความไม่ได้กำหนดหรือว่างเปล่า ข้อความจะส่งคืนการตอบกลับที่มีสถานะ 200 และจะไม่ดำเนินการต่อไป
  • จากนั้นฟังก์ชันจะดึงหมายเลขโทรศัพท์ธุรกิจและหมายเลขโทรศัพท์ของผู้ส่งจากคำขอ
  • จากนั้นฟังก์ชันจะเตรียมคำขอ POST เพื่อส่งข้อความกลับไปยังผู้ใช้ผ่าน WhatsApp โดยจะสร้าง URL สำหรับคำขอ กำหนดข้อความที่จะส่ง และตั้งค่าตัวเลือกคำขอ รวมถึงวิธีการ ส่วนหัว และเนื้อหา
  • ฟังก์ชันจะส่งคำขอโดยใช้ฟังก์ชันดึงข้อมูล หากคำขอสำเร็จ จะส่งคืนการตอบกลับที่มีสถานะ 200 หากเกิดข้อผิดพลาด ณ จุดใด ๆ คำขอนั้นจะถูกบันทึกลงในคอนโซล
  • ฟังก์ชัน getResponseNumber เป็นฟังก์ชันตัวช่วยที่แยกหมายเลขโทรศัพท์ของผู้ส่งออกจากคำขอที่เข้ามา
  • โค้ดนี้เป็นตัวอย่างพื้นฐานของวิธีผสานรวมแอปพลิเคชัน Node.js เข้ากับ WhatsApp Business API เพื่อให้สามารถส่งและรับข้อความอัตโนมัติได้

// WhatsApp จะกระตุ้นคำขอโพสต์นี้เมื่อผู้ใช้ถามคำถามกับบอทและตอบกลับผู้ใช้ด้วย

ส่งออกฟังก์ชัน async POST (ต้องการ: NextRequest) {

ให้ res: any = รอ req.json();

ให้คำถามจาก Whatsapp =

res?.entry?.[0]?.changes?.[0]?.value?.messages?.[0]?.text?.body; // คำถามที่ได้รับจาก Whatsapp

ถ้า (

คำถามจาก Whatsapp == ไม่ได้กำหนด ||

คำถามFromWhatsapp.trim().length <= 0

) {

//หากคำขอเกี่ยวกับสถานะเท่านั้น อย่าดำเนินการต่อไป

// กลับ NextResponse.json ({ ข้อความ: "ได้รับ" });

ส่งคืนการตอบสนองใหม่ ("ได้รับ", { สถานะ: 200 });

}

//รับรหัสหมายเลขโทรศัพท์จากการตอบกลับ หมายเลขโทรศัพท์นี้เป็นหมายเลขธุรกิจ

const phoneNumberId =

res?.entry?.[0]?.changes?.[0]?.value?.metadata["phone_number_id"];

//เมธอดนี้จะส่งคืนหมายเลขโทรศัพท์ที่ได้รับข้อความ

const responseNumber = getResponseNumber (เรส);

//ดึงรหัสผู้ใช้ออกจากฐานข้อมูล

พยายาม {

รุ่น const = "v18.0";

//ตรวจสอบว่าถึงขีดจำกัดหรือไม่

หมายเลขโทรศัพท์ const;

constผู้รับPhoneNumber = "+" + responseNumber;

// const accessToken = process.env.WHATSAPPTOKEN

const accessToken = "โทเค็นที่คุณได้รับจาก facebook";

พยายาม {

//--------------- รหัสนี้ใช้สำหรับส่งข้อความทางโทรเลข

const url = `https://graph.facebook.com/${version}/${phoneNumberId}/messages`;

// กำหนดข้อมูลที่จะส่งในส่วนเนื้อหาคำขอ

ข้อมูล const = {

message_product: "วอทส์แอพ",

ผู้รับ_ประเภท: "บุคคล",

ถึง: `${recipientPhoneNumber}`,

ประเภท: "ข้อความ",

ข้อความ: {

Preview_url: เท็จ

body: "สวัสดี ฉันเป็นแชทบอท ตอนนี้ฉันยุ่งอยู่ ฉันจะติดต่อกลับไปเร็วๆ นี้",

},

};

// กำหนดตัวเลือกสำหรับคำขอดึงข้อมูล

ตัวเลือก const = {

วิธีการ: "โพสต์"

ส่วนหัว: {

"Content-Type": "application/json",

การอนุญาต: `ผู้ถือ ${accessToken}`,

},

เนื้อความ: JSON.stringify (ข้อมูล)

};

// สร้างคำขอ POST โดยใช้การดึงข้อมูล

พยายาม {

การตอบสนอง const = รอการดึงข้อมูล (url, ตัวเลือก);

ถ้า (!response.ok) {

โยนข้อผิดพลาดใหม่ (`ข้อผิดพลาด HTTP! สถานะ: ${response.status}`);

}

ข้อมูล const = รอการตอบกลับ json();

//จัดการข้อมูลตามต้องการ

} จับ (ข้อผิดพลาด) {

// จัดการข้อผิดพลาดตามความจำเป็น

console.log (ข้อผิดพลาด);

}

ส่งคืนการตอบสนองใหม่ ("ได้รับ", { สถานะ: 200 });

} จับ (ข้อผิดพลาด) {

console.log("ข้อผิดพลาด", ข้อผิดพลาด);

}

} จับ (ข้อผิดพลาด: ใด ๆ ) {

console.log (ข้อผิดพลาด);

//จัดการบันทึกข้อผิดพลาดในฐานข้อมูล ในกรณีที่เกิดข้อผิดพลาดที่ไม่สามารถจัดการได้

}

}

const getResponseNumber = (รายละเอียด: ใด ๆ ) => {

กลับ res?.entry?.[0]?.changes?.[0]?.value?.contacts[0]?.wa_id;

};

บทสรุป

ในคู่มือที่ครอบคลุมนี้ เราได้สำรวจความซับซ้อนของการผสานรวม WhatsApp Business API เข้ากับแอปพลิเคชัน Node.js ตั้งแต่การตั้งค่า webhooks ไปจนถึงการประมวลผลข้อความขาเข้าและการส่งคำตอบที่ได้รับการปรับแต่ง เราได้ครอบคลุมขั้นตอนสำคัญต่างๆ เช่น การจัดการโทเค็นการเข้าถึง ข้อมูลลับของแอป หมายเลขทดสอบ รหัสหมายเลขโทรศัพท์ และรหัสบัญชีธุรกิจ

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

ในขณะที่คุณปรับแต่งความพยายามในการพัฒนาแชทบอท AI ของคุณต่อไป ให้พิจารณาใช้ประโยชน์จากความเชี่ยวชาญของ บริษัท พัฒนา AI Chatbot ข้อมูลเชิงลึกและการสนับสนุนของพวกเขาสามารถกระตุ้นความก้าวหน้าของคุณ ทำให้มั่นใจได้ว่าความพยายามของแชทบอทของคุณจะบรรลุศักยภาพสูงสุด โปรดดู เอกสารอย่างเป็นทางการของ WhatsApp Business API เสมอเพื่อดูข้อมูลที่ครอบคลุมและถูกต้องเมื่อคุณก้าวหน้าในเส้นทางการพัฒนา