แพลตฟอร์ม Messenger

ตัวอย่างประสบการณ์การใช้งาน Messenger กับ Original Coast Clothing

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

เนื่องจากเราต้องการแสดงประสบการณ์การใช้งาน Messenger อย่างเต็มรูปแบบที่มีจุดเข้าใช้งานหลายจุด ธุรกิจสมมติของเราจึงมีฟีเจอร์ดังต่อไปนี้

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

แอพตัวอย่างนี้ใช้ประโยชน์จากฟีเจอร์ต่อไปนี้

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

เมื่อปฏิบัติตามคู่มือนี้จนจบ คุณจะมีแอพ Messenger ที่เต็มรูปแบบซึ่งทำงานบนเซิร์ฟเวอร์ของคุณและตอบข้อความจากเพจทดลองของคุณ

ก่อนเริ่มต้น

คุณจำเป็นต้องมีสิ่งต่อไปนี้

หากคุณมีสภาพแวดล้อมสำหรับพัฒนา สำหรับก่อนใช้จริง และสำหรับใช้งานจริงแยกกัน แต่ละสภาพแวดล้อมจะต้องมีแอพ Meta และเพจ Facebook เป็นของตัวเอง

การตั้งค่าสำหรับสภาพแวดล้อมเฉพาะที่

ในการเรียกใช้งานแอพตัวอย่างในสภาพแวดล้อมเฉพาะที่ของคุณ คุณจะต้องมี NodeJS เวอร์ชั่น 10.x ขึ้นไป

ขั้นตอนที่ 1 โคลนที่จัดเก็บแอพตัวอย่าง

โคลนที่จัดเก็บ original-coast-clothing ในเครื่องในองค์กรของคุณ

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

ขั้นตอนที่ 2 ติดตั้ง Dependency สำหรับโค้ด

yarn install

ขั้นตอนที่ 3 รับที่อยู่ภายนอก

หากต้องการรับข้อความ คุณจะต้องสามารถรับ Webhooks ขาเข้าจากเซิร์ฟเวอร์ของเราได้

หากคุณต้องการที่อยู่ภายนอก ให้ใช้ ngrok เนื่องจากวิธีนี้จะช่วยให้คุณมีที่อยู่ https ภายนอกไว้สำหรับเข้าสู่แอพ NodeJS ของคุณ

ติดตั้ง ngrok

npm install -g ngrok

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

ngrok http 3000

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

Session Status                online
Account                       Redacted (Plan: 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

Connections                   ttl     opn     rt1     rt5     p50     p90
0       0       0.00    0.00    0.00    0.00

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

ขั้นตอนที่ 4 ตั้งค่า Webhooks และโปรไฟล์ Messenger

คัดลอกเทมเพลตสภาพแวดล้อมตัวอย่างในแอพของคุณ

mv .sample.env .env

เพิ่มค่าสภาพแวดล้อมของคุณ

แก้ไขไฟล์ .env เพื่อเพิ่มค่าสำหรับID ของแอพ Facebook ของคุณ, ID ของเพจ Facebook ของคุณ, โทเค็นการเข้าถึงเพจของคุณ และข้อมูลลับของแอพของคุณ ตั้งค่า VERIFY_TOKEN ลงในสตริงแบบสุ่ม แอพของคุณจะใช้ค่านี้เพื่อตรวจสอบการเรียกใช้ API

ขั้นตอนที่ 5 เรียกใช้งานแอพของคุณ

node app.js

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

ขั้นตอนที่ 6 กำหนดค่าแอพของคุณ

เรียกใช้งานคำสั่งต่อไปนี้เพื่อกำหนดค่าการตั้งค่าการสมัครรับข้อมูล Webhooks สำหรับแอพของคุณและโปรไฟล์ของเพจ Messenger โปรดทราบว่าคุณต้องใช้ค่าสำหรับ VERIFY_TOKEN ที่เพิ่มลงในไฟล์ .env

http://localhost:3000/profile?mode=all&verify_token=<VERIFY_TOKEN>

ขั้นตอนที่ 7 ทดสอบการตั้งค่าแอพของคุณ

ส่งข้อความไปยังเพจของคุณจาก Facebook หรือใน Messenger หาก Webhook ได้รับเหตุการณ์ก็หมายความว่าคุณได้ตั้งค่าแอพของคุณครบทั้งหมดแล้ว!

ทำการเปลี่ยนแปลงโค้ด

มาแก้ไขไฟล์ locales/en_US.json กัน โดยเปลี่ยนข้อความในส่วน get_started.welcome และเปลี่ยนจาก “สวัสดี {{userFirstName}} ยินดีต้อนรับสู่ Original Coast Clothing...” เป็นข้อความอื่น

สำหรับเทอร์มินัลแรก คุณจะต้องรีสตาร์ทเซิร์ฟเวอร์ NodeJS ทุกครั้งที่คุณเปลี่ยนแปลงโค้ด ตอนนี้ ให้เราหยุดเซิร์ฟเวอร์โดยใช้ปุ่ม Ctrl-C แล้วเรียกใช้อีกครั้งเพื่อโหลดโค้ดใหม่อีกครั้ง

node app.js

เปิด Messenger แล้วส่งข้อความคำว่า “สวัสดี” ไปยังเพจของคุณ จากนั้นคุณควรจะได้รับข้อความใหม่

การตั้งค่า Heroku

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

ขั้นตอนที่ 1 สร้างแอพ Heroku

git init
heroku apps:create
# Creating app... done, ⬢ YOUR-APP-NAME
# Created http://YOUR-APP-NAME.herokuapp.com/ | git@heroku.com:YOUR-APP-NAME.git

ขั้นตอนที่ 2 ปรับใช้โค้ดใน Heroku

heroku git:remote -a YOUR-APP-NAME
git push heroku master

ขั้นตอนที่ 3 ตั้งค่าตัวแปรสภาพแวดล้อม

ค้นหาตัวแปรกำหนดค่าของแอพของคุณในแดชบอร์ดแอพ Heroku ของคุณใต้การตั้งค่า เพิ่มค่าสำหรับ ID ของแอพ Facebook ของคุณ, ID ของเพจ Facebook ของคุณ, โทเค็นการเข้าถึงเพจของคุณ, ข้อมูลลับของแอพของคุณ แล้วสร้าง VERIFY_TOKEN

ขั้นตอนที่ 4 ตั้งค่า Webhooks และโปรไฟล์ Messenger

ตอนนี้คุณควรที่จะสามารถเข้าถึงแอพของคุณได้แล้ว ใช้ VERIFY_TOKEN ที่คุณสร้างเป็นตัวแปรกำหนดค่าและเรียกใช้ตำแหน่งข้อมูล /profile

https://YOUR-APP-NAME.herokuapp.com/profile?mode=all&verify_token=<VERIFY_TOKEN>

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

heroku config:set PERSONA_BILLING=<PERSONA_ID> -a YOUR-APP-NAME
heroku config:set PERSONA_ORDER=<PERSONA_ID> -a YOUR-APP-NAME
heroku config:set PERSONA_SALES=<PERSONA_ID> -a YOUR-APP-NAME

ขั้นตอนที่ 5 ทดสอบแอพของคุณ

ส่งข้อความไปยังเพจของคุณจาก Facebook หรือใน Messenger หาก Webhook ของคุณได้รับเหตุการณ์ แสดงว่าคุณตั้งค่าแอพของคุณเสร็จสมบูรณ์แล้ว!

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

เรียกใช้แอพเป็นการภายในอีกครั้ง

หลังจากที่เรียกใช้ ngrok ระบบจะให้ที่อยู่ภายนอกรายการใหม่ อัพเดตที่อยู่ APP_URL บนไฟล์ .env จากนั้นเรียกใช้เซิร์ฟเวอร์ NodeJS

node app.js

อัพเดตที่อยู่ Webhook ในการตั้งค่าแอพ Facebook โดยไปที่ http://localhost:3000/profile?mode=webhook&verify_token=<VERIFY_TOKEN>

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

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

เรียนรู้เพิ่มเติม