Original Coast Clothing (OCC) คือแบรนด์เสื้อผ้าสมมติที่เราสร้างขึ้นเพื่อแสดงให้เห็นฟีเจอร์หลักของแพลตฟอร์ม Messenger คู่มือนี้จะแสดงวิธีดาวน์โหลดโค้ดสำหรับแอพตัวอย่างนี้ในสภาพแวดล้อมบนเครื่องของคุณหรือเซิร์ฟเวอร์ระยะไกลเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับฟีเจอร์ที่ Messenger มีให้ เนื่องจากเราต้องการแสดงประสบการณ์การใช้งาน Messenger อย่างเต็มรูปแบบที่มีจุดเข้าใช้งานหลายจุด ธุรกิจสมมติของเราจึงมีฟีเจอร์ดังต่อไปนี้
|
แอพตัวอย่างนี้ใช้ประโยชน์จากฟีเจอร์ต่อไปนี้
เมื่อปฏิบัติตามคู่มือนี้จนจบ คุณจะมีแอพ Messenger ที่เต็มรูปแบบซึ่งทำงานบนเซิร์ฟเวอร์ของคุณและตอบข้อความจากเพจทดลองของคุณ
คุณจำเป็นต้องมีสิ่งต่อไปนี้
CREATE_CONTENT
งานบนเพจนั้นได้หากคุณมีสภาพแวดล้อมสำหรับพัฒนา สำหรับก่อนใช้จริง และสำหรับใช้งานจริงแยกกัน แต่ละสภาพแวดล้อมจะต้องมีแอพ Meta และเพจ Facebook เป็นของตัวเอง
ในการเรียกใช้งานแอพตัวอย่างในสภาพแวดล้อมเฉพาะที่ของคุณ คุณจะต้องมี NodeJS เวอร์ชั่น 10.x ขึ้นไป
โคลนที่จัดเก็บ original-coast-clothing
ในเครื่องในองค์กรของคุณ
git clone https://github.com/fbsamples/original-coast-clothing.git cd original-coast-clothing
yarn install
หากต้องการรับข้อความ คุณจะต้องสามารถรับ 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
คัดลอกเทมเพลตสภาพแวดล้อมตัวอย่างในแอพของคุณ
mv .sample.env .env
เพิ่มค่าสภาพแวดล้อมของคุณ
แก้ไขไฟล์ .env
เพื่อเพิ่มค่าสำหรับID ของแอพ Facebook ของคุณ, ID ของเพจ Facebook ของคุณ, โทเค็นการเข้าถึงเพจของคุณ และข้อมูลลับของแอพของคุณ ตั้งค่า VERIFY_TOKEN
ลงในสตริงแบบสุ่ม แอพของคุณจะใช้ค่านี้เพื่อตรวจสอบการเรียกใช้ API
node app.js
คุณควรสามารถเข้าถึงแอพพลิเคชั่นในเบราว์เซอร์ของคุณที่ http://localhost:3000
ได้แล้วในตอนนี้
เรียกใช้งานคำสั่งต่อไปนี้เพื่อกำหนดค่าการตั้งค่าการสมัครรับข้อมูล Webhooks สำหรับแอพของคุณและโปรไฟล์ของเพจ Messenger โปรดทราบว่าคุณต้องใช้ค่าสำหรับ VERIFY_TOKEN
ที่เพิ่มลงในไฟล์ .env
http://localhost:3000/profile?mode=all&verify_token=<VERIFY_TOKEN>
ส่งข้อความไปยังเพจของคุณจาก Facebook หรือใน Messenger หาก Webhook ได้รับเหตุการณ์ก็หมายความว่าคุณได้ตั้งค่าแอพของคุณครบทั้งหมดแล้ว!
มาแก้ไขไฟล์ locales/en_US.json กัน โดยเปลี่ยนข้อความในส่วน get_started.welcome และเปลี่ยนจาก “สวัสดี {{userFirstName}} ยินดีต้อนรับสู่ Original Coast Clothing...” เป็นข้อความอื่น
สำหรับเทอร์มินัลแรก คุณจะต้องรีสตาร์ทเซิร์ฟเวอร์ NodeJS ทุกครั้งที่คุณเปลี่ยนแปลงโค้ด ตอนนี้ ให้เราหยุดเซิร์ฟเวอร์โดยใช้ปุ่ม Ctrl-C แล้วเรียกใช้อีกครั้งเพื่อโหลดโค้ดใหม่อีกครั้ง
node app.js
เปิด Messenger แล้วส่งข้อความคำว่า “สวัสดี” ไปยังเพจของคุณ จากนั้นคุณควรจะได้รับข้อความใหม่
อินสแตนซ์ 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
heroku git:remote -a YOUR-APP-NAME git push heroku master
ค้นหาตัวแปรกำหนดค่าของแอพของคุณในแดชบอร์ดแอพ Heroku ของคุณใต้การตั้งค่า เพิ่มค่าสำหรับ ID ของแอพ Facebook ของคุณ, ID ของเพจ Facebook ของคุณ, โทเค็นการเข้าถึงเพจของคุณ, ข้อมูลลับของแอพของคุณ แล้วสร้าง VERIFY_TOKEN
ตอนนี้คุณควรที่จะสามารถเข้าถึงแอพของคุณได้แล้ว ใช้ 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
ส่งข้อความไปยังเพจของคุณจาก 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
เพื่อให้ตอบกลับทุกคนได้