ตัวอย่างประสบการณ์การรองรับ Messenger API สำหรับ Instagram - Original Coast Clothing

Original Coast Clothing (OC) คือแบรนด์เสื้อผ้าสมมติที่สร้างขึ้นเพื่อแสดงฟีเจอร์หลักของแพลตฟอร์ม Instagram ซึ่งจะมอบประสบการณ์ที่ยอดเยี่ยมให้กับลูกค้า การสาธิตนี้จะเป็นแรงบันดาลใจให้คุณได้เห็นว่าใครๆ ก็สามารถสร้างประสบการณ์การรองรับ Messenger API สำหรับ Instagram ที่น่าพึงพอใจซึ่งใช้ทั้งระบบอัตโนมัติและฝ่ายบริการลูกค้าที่พูดคุยสดได้ โดยมีโค้ดโอเพนซอร์สสำหรับแอพพร้อมด้วยคำแนะนำเกี่ยวกับวิธีการปรับใช้ประสบการณ์ในสภาพแวดล้อมเฉพาะที่หรือเซิร์ฟเวอร์ระยะไกล นอกจากนี้ยังมีตัวอย่างประสบการณ์บน Messenger ที่ใช้ร่วมกันด้วย ลองใช้ประสบการณ์นี้โดยส่งข้อความหา @originalcoastclothing หรือแสดงความคิดเห็นบนโพสต์

ฟีเจอร์ของแพลตฟอร์ม

ประสบการณ์นี้ใช้ฟีเจอร์ของแพลตฟอร์มดังต่อไปนี้ หากคุณตัดสินใจที่จะนำประสบการณ์นี้ไปปรับใช้บนเพจของคุณ โค้ดจะใช้ฟีเจอร์เหล่านี้ทั้งหมด:

• การส่งข้อความ

  • ข้อความ รูปภาพ และตัวอย่างลิงก์
  • เทมเพลตทั่วไป
• Webhooks
• ข้อความตอบกลับด่วน
• โปรไฟล์ผู้ใช้
• การตอบกลับส่วนตัว
• ประโยคเริ่มการสนทนา

ปรับใช้ประสบการณ์นี้บน Instagram

เมื่อปฏิบัติตามคู่มือนี้จนจบ คุณจะมีแอพ Instagram ที่สมบูรณ์ที่ทำงานบนเซิร์ฟเวอร์ของคุณและคอยตอบข้อความจากบัญชีของคุณได้

โค้ดที่สนับสนุนประสบการณ์นี้คือโค้ดโอเพนซอร์ส ใครๆ ก็สามารถเริ่มต้นพัฒนาประสบการณ์การส่งข้อความที่ยอดเยี่ยมได้อย่างง่ายดาย

เราเผยแพร่โค้ดภายใต้ใบอนุญาต BSD ซึ่งอนุญาตให้คุณนำโค้ดไปใช้ตามความต้องการได้อย่างอิสระ โค้ดจะโฮสต์อยู่บน GitHub สำหรับใช้เป็นข้อมูลอ้างอิงเพิ่มเติม

ข้อกำหนดในการปรับใช้แอพ Instagram

• บัญชีมืออาชีพบน Instagram (ไม่ว่าจะเป็นบัญชีครีเอเตอร์หรือบัญชีธุรกิจ)
• เพจ Facebookที่เชื่อมต่อกับบัญชี Instagram นั้น ตรวจสอบให้แน่ใจว่าคุณมีเพจ Facebook ที่แสดงตัวตนบัญชีมืออาชีพบน Instagram ของคุณขณะที่ติดต่อกับผู้ใช้ หากต้องการสร้างเพจใหม่ โปรดไปที่ https://www.facebook.com/pages/create ซึ่งคุณสามารถตั้งค่าเพจทดสอบเพื่อเริ่มต้นใช้งานได้อีกด้วย
• บัญชีผู้พัฒนาที่สามารถดำเนินงานในเพจของคุณได้ บัญชีผู้พัฒนาช่วยให้คุณสามารถสร้างแอพใหม่ ซึ่งเป็นส่วนสำคัญในการผสานการทำงานของ Facebook คุณสามารถลงทะเบียนเป็นผู้พัฒนาโดยไปที่เว็บไซต์สำหรับผู้พัฒนาของ Facebook และคลิกปุ่ม "เริ่มต้นใช้งาน"
• แอพ Facebook ที่มีการกำหนดการตั้งค่าพื้นฐานแล้ว หากต้องการสร้างแอพใหม่ โปรดไปที่ https://developers.facebook.com/ และคลิกที่เพิ่มแอพใหม่

ขั้นตอนการตั้งค่า

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

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

1. กำหนดค่าการผสานการทำงานของ Instagram ของคุณโดยปฏิบัติตามเอกสารการเริ่มต้นใช้งาน
2. เพิ่มบัญชีทดสอบ Instagram ที่คุณจะใช้เพื่อทดสอบการใช้งาน

ตอนนี้คุณควรมีสิ่งต่อไปนี้

• ID ของแอพ
• ข้อมูลลับของแอพ
• ID ของเพจ
• โทเค็นการเข้าถึงของเพจ
• บัญชี Instagram ที่เชื่อมต่อกับเพจ
• บัญชี Instagram ที่ลงทะเบียนเป็นบัญชีทดสอบ

การติดตั้ง

คุณจะต้องดำเนินการดังต่อไปนี้

• โหนด 10.x ขึ้นไป
• เซิร์ฟเวอร์สำหรับโค้ดของคุณ ตัวเลือกประกอบด้วย

  • บริการช่องทางการเชื่อมต่อเฉพาะที่ เช่น ngrok
  • บริการเซิร์ฟเวอร์ระยะไกล เช่น Heroku หรือ Glitch
  • เว็บเซิร์ฟเวอร์ของคุณเอง

การนำไปปรับใช้ได้ในคลิกเดียวโดยใช้ Heroku หรือ Glitch

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

ปรับใช้เฉพาะที่โดยใช้ ngrok

บริการช่องอุโมงค์จะทำให้เว็บเซิร์ฟเวอร์เฉพาะที่ของคุณมี URL ภายนอกที่สามารถเข้าถึงได้ด้วย Webhooks ของ Facebook ซึ่งมีบริการดังกล่าวให้ใช้มากมาย ในตัวอย่างนี้ เราจะใช้ ngrok

1. โคลนที่จัดเก็บ

โคลนที่จัดเก็บไปยังเครื่องเฉพาะที่ของคุณ:

git clone https://github.com/fbsamples/original-coast-clothing-ig.git
cd original-coast-clothing-ig

2. ติดตั้งบริการช่องทางการเชื่อมต่อ

หากยังไม่ได้ติดตั้ง ngrok ให้ติดตั้งโดยการดาวน์โหลดหรือใช้บรรทัดคำสั่ง:

$ npm install -g ngrok

ในไดเรกทอรีของที่จัดเก็บนี้ ให้ส่งคำขอช่องทางการเชื่อมต่อไปยังเซิร์ฟเวอร์ภายในของคุณพร้อมพอร์ตที่คุณต้องการ

$ ngrok http 3000

หน้าจอควรแสดงสถานะของ ngrok:

Session Status                online
Account                       Redacted (Plan:iuluufkccebegkhifrlgfhudrtbthgln Free)
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://1c3b838deacb.ngrok.io -> http://localhost:3000
Forwarding                    https://1c3b838deacb.ngrok.io -> http://localhost:3000

บันทึก URL ที่ขึ้นต้นด้วย https ของเซิร์ฟเวอร์ภายนอกที่ส่งต่อไปยังเครื่องของคุณไว้ ในตัวอย่างข้างต้น URL ที่ขึ้นต้นด้วย https คือ https://1c3b838deacb.ngrok.io

3. ติดตั้งส่วนที่จำเป็น

เปิดแท็บเทอร์มินัลใหม่ รวมถึงในไดเรกทอรีของที่จัดเก็บด้วย

$ npm install

หรือคุณสามารถใช้ Yarn ได้เช่นกัน:

$ yarn install

4. ตั้งค่าไฟล์ .env

คัดลอกไฟล์ .sample.env ไปยัง .env

$ cp .sample.env .env

แก้ไขไฟล์ .env เพื่อเพิ่มค่าทั้งหมดสำหรับแอพและเพจของคุณ

5. ใช้แอพของคุณในเครื่อง

$ node app.js

ตอนนี้คุณควรจะสามารถเข้าถึงหน้าเริ่มต้นของแอพพลิเคชั่นในเบราว์เซอร์ของคุณได้ที่ http://localhost:3000

ตรวจสอบให้แน่ใจว่าคุณสามารถเข้าถึงแอพพลิเคชั่นได้ที่ URL ภายนอกตามที่ระบุไว้ในขั้นตอนที่ 2

ปรับใช้ด้วย Heroku

1. โคลนที่จัดเก็บ

โคลนที่จัดเก็บไปยังเครื่องเฉพาะที่ของคุณ:

git clone https://github.com/fbsamples/original-coast-clothing-ig.git
cd original-coast-clothing-ig

2. ติดตั้ง Heroku CLI

หากไดเรกทอรียังไม่ใช่ที่จัดเก็บ Git ให้สร้างขึ้นใหม่:

$ git init
Initialized empty Git repository in .git/
$ git add .
$ git commit -m "My first commit"     

3. ติดตั้ง Heroku CLI

หากยังไม่ได้ติดตั้ง Heroku CLI ให้ดาวน์โหลดและทำการติดตั้งให้เรียบร้อย

4. สร้างแอพจาก CLI

$ heroku apps:create

Creating app... done, ⬢ mystic-wind-83
Created http://mystic-wind-83.herokuapp.com/ | git@heroku.com:mystic-wind-83.git

จดชื่อที่กำหนดให้แอพของคุณ ในตัวอย่างข้างต้น ชื่อคือ mystic-wind-83

5. ตั้งค่าตัวแปรทางสภาพแวดล้อมของคุณ

ค้นหาแอพของคุณบนแดชบอร์ดของแอพ Heroku และตั้งค่าตัวแปรในการกำหนดค่าตามความคิดเห็นในไฟล์ .sample.env

หรือคุณสามารถตั้งค่าตัวแปรทางสภาพแวดล้อมจากบรรทัดคำสั่งได้ดังนี้:

$ heroku config:set PAGE_ID=XXXX

6. ปรับใช้โค้ด

$ git push heroku master

7. ดูเอาต์พุตการลงบันทึก

$ heroku logs --tail

เชื่อมต่อ Webhook ของคุณ

เมื่อเซิร์ฟเวอร์ของคุณกำลังทำงานอยู่ ตำแหน่งข้อมูล Webhook ของคุณจะอยู่ที่พาธ /webhook ในตัวอย่าง Heroku ข้างต้นนี้ พาธจะเป็น http://mystic-wind-83.herokuapp.com/webhook

ตั้งค่า Webhooks ของคุณโดยปฏิบัติตาม [คู่มือ Webhooks ของแพลตฟอร์ม Messenger] (https://developers.facebook.com/docs/messenger-platform/webhooks

หลังจากตรวจสอบการติดตามข้อมูล Webhook แล้ว ให้ติดตามเหตุการณ์ต่อไปนี้

• comments
• messages
• messaging_postbacks

ทดสอบ Webhooks โดยคลิกปุ่ม "ทดสอบ" ที่อยู่ถัดจากเหตุการณ์ที่คุณสมัครรับข้อมูล คุณควรพบเหตุการณ์การทดสอบในเอาต์พุตการลงบันทึกของเซิร์ฟเวอร์ของคุณ

ทดสอบว่าการตั้งค่าแอพของคุณสำเร็จหรือไม่

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

หากคุณเห็นว่ามีการตอบกลับข้อความของคุณใน Instagram แสดงว่าคุณได้ตั้งค่าแอพของคุณเรียบร้อยแล้ว! เรียบร้อย!

การแก้ไขปัญหา

แอพตอบกลับเฉพาะฉัน แต่ไม่ตอบกลับผู้อื่น

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

ปัญหาอื่นๆ

หากคำแนะนำนี้มีข้อผิดพลาด โปรดแจ้งปัญหาให้เราทราบ