Trải nghiệm Messenger mẫu với Original Coast Clothing

Original Coast Clothing (OCC) là một thương hiệu quần áo giả tưởng, ra đời nhằm mục đích giới thiệu các tính năng chính của Nền tảng Messenger. Hướng dẫn này sẽ chỉ cho bạn cách tải mã xuống cho ứng dụng mẫu đó trên môi trường cục bộ hoặc máy chủ từ xa của mình để tìm hiểu thêm về các tính năng mà Messenger cung cấp.

Để giới thiệu trải nghiệm Messenger đầy đủ qua nhiều điểm bắt đầu, doanh nghiệp giả tưởng của chúng tôi có những tính năng sau:

Trải nghiệm Messenger tự động để tiếp cận tự nhiên
Tìm kiếm khách hàng tiềm năng trên Messenger với tin nhắn trao đổi thêm đã bật API. Chèn quảng cáo tìm kiếm khách hàng tiềm năng này để làm mẫu.
Mã QR kích hoạt chương trình khuyến mãi giảm giá cho bộ sưu tập mùa hè,
Trang Facebook có Quảng cáo click đến Messenger hiển thị dưới dạng bài viết trên Trang
Trải nghiệm Instagram
Trang web thương mại điện tử có Plugin Chat với khách hàng

Xem trải nghiệm Messenger qua OCC

Tính năng của nền tảng

Ứng dụng mẫu này tận dụng những tính năng sau:

Triển khai trải nghiệm này trên Messenger

Khi kết thúc hướng dẫn này, bạn sẽ có ứng dụng Messenger đầy đủ đang chạy trên máy chủ và trả lời tin nhắn từ Trang thử nghiệm của bạn.

Trước khi bạn bắt đầu

Bạn sẽ cần:

Một ID Trang Facebook - Đây có thể là ID cho Trang Facebook chính thức của bạn hoặc một Trang thử nghiệm.
Một Tài khoản nhà phát triển trên Meta
ID ứng dụng trên Meta
Khóa bí mật của ứng dụng trên Meta
Mã truy cập Trang do một người dùng có thể thực hiện tác vụ CREATE_CONTENT trên Trang đó yêu cầu
Các quyền pages_messaging, pages_show_list và pages_manage_metadata

Mã mẫu trên GitHub

Nếu bạn có môi trường phát triển, tách chuyển và chính thức riêng biệt, mỗi môi trường sẽ cần có Ứng dụng trên Meta và Trang Facebook riêng.

Thiết lập môi trường cục bộ

Để chạy ứng dụng mẫu này trên môi trường cục bộ của mình, bạn sẽ cần có NodeJS 10.x trở lên.

Bước 1. Sao chép kho lưu trữ ứng dụng mẫu

Sao chép kho lưu trữ original-coast-clothing trên máy cục bộ của bạn.

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

Bước 2. Cài đặt các phần phụ thuộc của mã

yarn install

Bước 3. Lấy địa chỉ bên ngoài

Để nhận tin nhắn, bạn cần có khả năng nhận webhook đến do Máy chủ của chúng tôi gửi.

Nếu bạn cần có một địa chỉ bên ngoài, hãy sử dụng ngrok vì ngrok sẽ cung cấp địa chỉ https bên ngoài chuyển đến ứng dụng NodeJS của bạn.

Cài đặt ngrok

npm install -g ngrok

Yêu cầu một đường hầm đến máy chủ cục bộ của bạn thông qua cổng bạn ưu tiên

ngrok http 3000

Màn hình sẽ hiển thị trạng thái ngrok như sau:

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

Hãy ghi lại URL https của máy chủ bên ngoài chuyển tiếp đến máy cục bộ của bạn. Trong ví dụ trên đây, URL đó là https://1c3b838deacb.ngrok.io.

Bước 4. Đặt Webhooks và Trang cá nhân Messenger

Sao chép mẫu môi trường mẫu trong ứng dụng của bạn

mv .sample.env .env

Thêm các giá trị môi trường của bạn

Chỉnh sửa file .env để thêm các giá trị cho ID ứng dụng trên Facebook, ID Trang Facebook, mã truy cập Trang và Khóa bí mật của ứng dụng của bạn. Đặt giá trị của VERIFY_TOKEN là một chuỗi ngẫu nhiên. Ứng dụng của bạn sẽ dùng chuỗi này để xác thực các lệnh gọi API.

Bước 5. Chạy ứng dụng

node app.js

Bây giờ, bạn đã có thể truy cập vào ứng dụng trong trình duyệt tại địa chỉ http://localhost:3000

Bước 6. Đặt cấu hình ứng dụng

Chạy lệnh dưới đây để đặt cấu hình cài đặt đăng ký webhooks cho ứng dụng của bạn và Trang cá nhân Messenger trên Trang. Lưu ý rằng bạn cần sử dụng giá trị cho mã VERIFY_TOKEN được thêm vào file .env.

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

Bước 7. Thử nghiệm chế độ thiết lập ứng dụng

Gửi tin nhắn đến Trang của bạn từ Facebook hoặc trong Messenger. Nếu webhook của bạn nhận được sự kiện, nghĩa là bạn đã thiết lập xong ứng dụng của mình!

Thực hiện thay đổi mã

Hãy chỉnh sửa file locales/en_US.json, thay thế tin nhắn trong phần get_started.welcome và thay đổi từ "Hi {{userFirstName}}! Welcome to Original Coast Clothing..." (Xin chào {{userFirstName}}! Chào mừng bạn đến với Original Coast Clothing) thành nội dung khác.

Quay lại thiết bị đầu cuối ban đầu, mỗi khi thay đổi mã, bạn cần khởi động lại máy chủ NodeJS. Dừng máy chủ bằng cách dùng phím Ctrl-C và chạy lại để tải lại mã mới.

node app.js

Mở Messenger và nhắn cho Trang từ "Hi" (Xin chào), bạn sẽ nhận được tin nhắn mới.

Thiết lập Heroku

Phiên bản Heroku có thể hữu ích khi lưu trữ môi trường chính thức hoặc môi trường tách chuyển cho ứng dụng hoặc trang web kinh doanh của bạn.

Bước 1. Tạo ứng dụng trên 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

Bước 2. Triển khai mã vào Heroku

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

Bước 3. Đặt các biến môi trường

Hãy tìm mục Biến cấu hình của ứng dụng trong phần Cài đặt trên bảng điều khiển ứng dụng Heroku. Sau đó, thêm các giá trị cho ID ứng dụng trên Facebook, ID Trang Facebook, mã truy cập Trang, Khóa bí mật của ứng dụng của bạn rồi tạo mã VERIFY_TOKEN.

Bước 4. Đặt webhooks và Trang cá nhân Messenger

Bây giờ, bạn đã có thể truy cập vào ứng dụng của mình. Hãy sử dụng mã VERIFY_TOKEN bạn đã tạo làm biến cấu hình và gọi điểm cuối /profile.

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

Không bắt buộc URL ở trên sẽ trả về ID của các cá nhân đã tải lên. Vì ID được lưu trong bộ nhớ, bạn cần thêm các ID được trả về đó làm Biến cấu hình để chúng vẫn còn nguyên sau khi tải lại.

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

Bước 5. Thử nghiệm ứng dụng

Khắc phục sự cố

Chạy lại ứng dụng cục bộ

Sau khi bạn chạy ngrok, một địa chỉ bên ngoài mới sẽ được cung cấp. Hãy cập nhật địa chỉ APP_URL trong file .env rồi chạy máy chủ NodeJS.

node app.js

Hãy truy cập vào http://localhost:3000/profile?mode=webhook&verify_token=<VERIFY_TOKEN> để cập nhật địa chỉ webhook trong phần Cài đặt ứng dụng Facebook

Trang của tôi chỉ trả lời tôi chứ không trả lời người khác

Có khả năng ứng dụng trên Facebook vẫn ở Chế độ phát triển. Bạn có thể thêm ai đó làm người dùng thử ứng dụng. Nếu họ chấp nhận, ứng dụng sẽ có thể nhắn tin cho họ. Sau khi sẵn sàng, bạn có thể yêu cầu quyền pages_messaging để có thể trả lời bất kỳ ai.