Trải nghiệm mẫu về API Messenger hỗ trợ Instagram – Original Coast Clothing
Original Coast Clothing (OC) 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 Instagram giúp mang lại trải nghiệm khách hàng tuyệt vời. Lấy cảm hứng từ bản demo này, bất kỳ ai cũng có thể tạo ra trải nghiệm thú vị cho API Messenger hỗ trợ Instagram, tận dụng cả tính năng tự động hóa lẫn hỗ trợ khách hàng trực tiếp. Trải nghiệm này cũng cung cấp mã nguồn mở cho ứng dụng và tài liệu hướng dẫn cách triển khai trải nghiệm trong môi trường cục bộ hoặc trên máy chủ từ xa của bạn. Ngoài ra còn có một trải nghiệm Messenger mẫu. Hãy thử nghiệm ngay bằng cách nhắn tin cho @originalcoastclothing hoặc bình luận về một bài viết. |  |
Tính năng của nền tảng
Trải nghiệm này tận dụng các tính năng sau đây của nền tảng. Nếu bạn quyết định triển khai trải nghiệm này trên Trang của mình, mã sẽ sử dụng tất cả các tính năng:
- Nhắn tin
- Văn bản, hình ảnh và bản xem trước liên kết
- Mẫu chung
Triển khai trải nghiệm này trên Instagram
Khi kết thúc hướng dẫn này, bạn sẽ có ứng dụng Instagram đầy đủ chạy trên máy chủ và trả lời tin nhắn từ tài khoản của bạn.
Mã nguồn mở hỗ trợ trải nghiệm này. Bất kỳ ai cũng có thể dễ dàng bắt đầu xây dựng trải nghiệm nhắn tin tuyệt vời.
Mã được phát hành theo Giấy phép BSD, cho phép bạn thoải mái sử dụng để phục vụ nhu cầu của mình. Mã được lưu trữ trên GitHub để tham khảo thêm.
Các yêu cầu khi triển khai ứng dụng Instagram
- Một Tài khoản công việc trên Instagram (tài khoản Người sáng tạo nội dung hoặc tài khoản Kinh doanh).
- Một Trang Facebookkết nối với tài khoản Instagram đó. Đảm bảo bạn có Trang Facebook đại diện cho danh tính tài khoản Công việc trên Instagram của mình khi kết nối với người dùng. Để tạo Trang mới, hãy truy cập https://www.facebook.com/pages/create. Bạn cũng có thể thiết lập một Trang thử nghiệm để bắt đầu.
- Một Tài khoản nhà phát triển có thể thực hiện các Tác vụ trên Trang của bạn. Một Tài khoản nhà phát triển cho phép bạn tạo ứng dụng mới làm ứng dụng cốt lõi của một tiện ích tích hợp Facebook bất kỳ. Bạn có thể đăng ký với vai trò nhà phát triển bằng cách truy cập vào trang web Facebook Developers và nhấp vào nút "Bắt đầu".
- Một ứng dụng trên Facebook đã được đặt cấu hình cài đặt Cơ bản. Để tạo ứng dụng mới, hãy truy cập https://developers.facebook.com/ và nhấp vào Thêm ứng dụng mới
Các bước thiết lập
Mục đích của phần này là thu thập tất cả các mã truy cập và id cần thiết để ứng dụng Instagram gửi và nhận tin nhắn thành công. Trước khi bắt đầu, hãy đảm bảo bạn đã đáp ứng tất cả các yêu cầu nêu trên. Lúc này, bạn cần có một Trang, một ứng dụng đã đăng ký trên Facebook và một tài khoản Công việc trên Instagram.
Nếu bạn vừa tạo một ứng dụng mới trên Facebook, có thể ứng dụng đó đang ở chế độ phát triển. Lưu ý rằng các ứng dụng ở chế độ này chỉ được phép nhắn tin cho những người đã kết nối với ứng dụng (Quản trị viên, Nhà phát triển và Người dùng thử). Bạn có thể tiếp tục làm theo hướng dẫn nếu ứng dụng của bạn ở chế độ này. Tuy nhiên, khi đã sẵn sàng công khai, ứng dụng đó cần trải qua quy trình xét duyệt để có quyền instagram_manage_messages. Để biết thêm thông tin, hãy xem phần Xét duyệt ứng dụng
- Đặt cấu hình tiện ích tích hợp Instagram bằng cách làm theo tài liệu Bắt đầu.
- Thêm một số tài khoản Instagram thử nghiệm mà bạn sẽ dùng để thử nghiệm trải nghiệm này.
Lúc này, bạn cần có các mục sau
- ID ứng dụng
- Khóa bí mật của ứng dụng
- ID Trang
- Mã truy cập Trang
- Tài khoản Instagram kết nối với Trang
- (Các) Tài khoản Instagram đã đăng ký làm tài khoản thử nghiệm
Triển khai bằng một lần nhấp với Heroku hoặc Glitch
Bạn có thể dùng các nút dưới đây để tự động triển khai trải nghiệm cho Heroku hoặc Glitch. Bạn sẽ được nhắc nhập các biến môi trường cần thiết để hoàn tất thiết lập.
Triển khai trên HerokuTriển khai trên GlitchTriển khai cục bộ qua ngrok
Một dịch vụ đường hầm sẽ hiển thị máy chủ web cục bộ của bạn với một URL bên ngoài mà webhook Facebook có thể tiếp cận. Có nhiều dịch vụ như vậy dành cho bạn. Trong ví dụ này, chúng tôi sẽ sử dụng ngrok.
1. Sao chép kho lưu trữ
Sao chép kho lưu trữ vào máy cục bộ của bạn:
git clone https://github.com/fbsamples/original-coast-clothing-ig.git cd original-coast-clothing-ig
2. Cài đặt dịch vụ đường hầm
Nếu bạn chưa cài đặt, hãy cài đặt ngrok qua trang tải xuống hoặc qua dòng lệnh:
$ npm install -g ngrok
Trong thư mục của kho lưu trữ này, hãy yêu cầu một đường hầm đến máy chủ cục bộ thông qua cổng bạn ưu tiên
$ ngrok http 3000
Màn hình cần hiển thị trạng thái của 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
Hãy ghi lại URL https của máy chủ bên ngoài được chuyển tiếp đến máy cục bộ của bạn. Trong ví dụ ở trên, URL đó là https://1c3b838deacb.ngrok.io.
3. Cài đặt phần phụ thuộc
Mở cả tab thiết bị đầu cuối mới trong thư mục kho lưu trữ.
$ npm install
Hoặc, bạn có thể sử dụng Yarn:
$ yarn install
4. Thiết lập file .env
Sao chép file .sample.env vào .env
$ cp .sample.env .env
Chỉnh sửa file .env để thêm tất cả giá trị cho ứng dụng và trang.
5. Chạy ứng dụng trên máy cục bộ
$ node app.js
Bây giờ, bạn sẽ có thể truy cập vào trang mặc định của ứng dụng trên trình duyệt tại http://localhost:3000
Xác nhận rằng bạn cũng có thể truy cập vào ứng dụng qua URL bên ngoài từ bước 2.
Triển khai qua Heroku
1. Sao chép kho lưu trữ
Sao chép kho lưu trữ vào máy cục bộ của bạn:
git clone https://github.com/fbsamples/original-coast-clothing-ig.git cd original-coast-clothing-ig
2. Cài đặt Heroku CLI
Nếu thư mục chưa có kho lưu trữ git, hãy tạo một kho lưu trữ:
$ git init
Initialized empty Git repository in .git/
$ git add .
$ git commit -m "My first commit"
3. Cài đặt Heroku CLI
Nếu bạn chưa cài đặt, hãy tải xuống và cài đặt Heroku CLI
4. Tạo ứng dụng từ CLI
$ heroku apps:create
Creating app... done, ⬢ mystic-wind-83
Created http://mystic-wind-83.herokuapp.com/ | git@heroku.com:mystic-wind-83.git
Ghi lại tên đặt cho ứng dụng của bạn. Tên trong ví dụ này là mystic-wind-83.
5. Đặt các biến môi trường
Trên Bảng điều khiển ứng dụng Heroku, hãy tìm ứng dụng và thiết lập các biến cấu hình theo bình luận trong file .sample.env
Hoặc, bạn có thể đặt các biến môi trường từ dòng lệnh có dạng như sau:
$ heroku config:set PAGE_ID=XXXX
6. Triển khai mã
$ git push heroku master
7. Xem đầu ra nhật ký
$ heroku logs --tail
Kết nối webhook
Lưu ý rằng khi máy chủ đang chạy, điểm cuối webhook sẽ nằm ở đường dẫn /webhook. Trong ví dụ về Heroku ở trên, đường dẫn này sẽ là http://mystic-wind-83.herokuapp.com/webhook.
Thiết lập webhook bằng cách làm theo [tài liệu về Webhooks cho Nền tảng Messenger](https://developers.facebook.com/docs/messenger-platform/webhooks
Sau khi hoạt động đăng ký webhook được xác thực, hãy đăng ký các sự kiện sau:
- comments
- messages
- messaging_postbacks
Thử nghiệm webhook bằng cách nhấp vào nút "Thử nghiệm" bên cạnh sự kiện được đăng ký. Bạn sẽ nhìn thấy sự kiện thử nghiệm trong đầu ra nhật ký của máy chủ.
Thử nghiệm để đảm bảo bạn đã thiết lập ứng dụng thành công
Sau khi bạn đăng nhập vào một tài khoản có vai trò "Người dùng thử Instagram", hãy thử gửi tin nhắn cho tài khoản Instagram kết nối với Trang của bạn hoặc để lại bình luận về một bài viết.
Nến bạn nhìn thấy phản hồi cho tin nhắn của mình trên Instagram, tức là ứng dụng đã được thiết lập thành công! Thế là xong!
Khắc phục sự cố
Ứng dụng chỉ trả lời tôi chứ không trả lời người khác
Có khả năng ứng dụng 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 này sẽ có thể nhắn tin cho họ. Sau khi sẵn sàng, bạn có thể yêu cầu quyền instagram_manage_messages để có thể trả lời bất kỳ ai.
Các vấn đề khác
Hướng dẫn này có gì chưa đúng không? Hãy cho chúng tôi biết bằng cách gửi một Vấn đề