Hướng Dẫn Gửi RCS Rich Card Carousel Với Node.js

Giới thiệu

Rich Communication Services (RCS) cung cấp cho bạn các công cụ để xây dựng trải nghiệm thương hiệu hiện đại và tương tác ngay bên trong ứng dụng nhắn tin mặc định của người dùng. Một trong những tính năng mạnh mẽ nhất của nó là Rich Card Carousel: một tập hợp các thẻ có thể cuộn ngang bao gồm video, hình ảnh, văn bản và các hành động có thể nhấp vào.

Trong hướng dẫn này, bạn sẽ học cách gửi một carousel RCS bằng Node.js và Vonage Messages API. Bạn sẽ kết hợp các thẻ video và hình ảnh với các hành động để tăng cường sự tham gia.

>> TL;DR: Xem mã hoạt động đầy đủ trên GitHub

Giả sử thương hiệu của bạn đang ra mắt một cửa hàng pop-up thời trang có thời gian giới hạn. Bạn muốn tạo sự chú ý và giới thiệu các mặt hàng chính. Với một carousel RCS, bạn có thể gói tất cả vào một tin nhắn tương tác sạch sẽ.

Carousel RCS của bạn sẽ bao gồm các phương tiện và các hành động gợi ý:

Thẻ 1: Video Khởi Động Sự Kiện
- Video trailer cho popup
- 2 hành động: “Lưu Ngày” và “Xem Địa Điểm”
Thẻ 2: Ảnh Áo Thun:
- Hình ảnh của áo thun nổi bật
- hành động: “Xem Tất Cả Áo”
Thẻ 3: Ảnh Mũ:
- Hình ảnh bộ sưu tập mũ của bạn
- hành động: “Xem Tất Cả Mũ”

RCS Carousel Là Gì?

RCS carousel là một tập hợp các thẻ phong phú có thể vuốt, mỗi thẻ có:

Tiêu đề (tối đa 200 ký tự)
Mô tả (tối đa 2000 ký tự)
Phương tiện: hình ảnh hoặc video
Tối đa bốn phản hồi hoặc hành động gợi ý

Các thẻ xuất hiện theo chiều ngang, cho phép người dùng vuốt qua chúng.

Lưu ý quan trọng:

Tất cả các thẻ trong carousel phải sử dụng cùng loại gợi ý.
Tệp phương tiện phải có thể truy cập công khai và dưới 100MB.
Bạn có thể bao gồm từ 2 đến 10 thẻ.

Điều Kiện Tiên Quyết

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

Node.js được cài đặt trên máy của bạn.
Ngrok được cài đặt để mở rộng máy chủ cục bộ của bạn lên internet.
Tài khoản Vonage API.
Một đại lý RCS Business Messaging (RBM) đã đăng ký, xem các tài khoản quản lý bên dưới.
Một điện thoại có khả năng RCS để kiểm tra.

Tài Khoản Vonage API

Để hoàn thành hướng dẫn này, bạn sẽ cần một tài khoản Vonage API. Nếu bạn chưa có, bạn có thể đăng ký ngay hôm nay và bắt đầu xây dựng với tín dụng miễn phí. Khi bạn có tài khoản, bạn có thể tìm thấy API Key và API Secret của mình ở đầu Bảng điều khiển Vonage API.

Sẵn sàng để bắt đầu xây dựng?

Trải nghiệm kết nối liền mạch, nhắn tin thời gian thực và cuộc gọi thoại cũng như video rõ nét - tất cả chỉ trong tầm tay của bạn.

Cách Liên Hệ Với Quản Lý Tài Khoản Vonage

Để gửi và nhận khả năng RCS trong ứng dụng Vonage của bạn, bạn sẽ cần có một đại lý Rich Business Messaging (RBM) đã đăng ký và một điện thoại có khả năng RCS.

Hiện tại, nhắn tin RCS qua Vonage chỉ có sẵn cho các tài khoản quản lý. Bạn sẽ cần liên hệ với quản lý tài khoản của mình để yêu cầu kích hoạt Chế độ phát triển cho đại lý RBM của bạn. Chế độ phát triển cho phép bạn kiểm tra nhắn tin RCS đến các số đã được cho phép trước khi hoàn tất quy trình xác minh đại lý và ra mắt sản phẩm.

Xin hãy liên hệ với đội ngũ bán hàng của chúng tôi nếu bạn không có tài khoản quản lý.

Hiểu sự khác biệt giữa RCS và RBM.

Cách Thiết Lập Dự Án Node.js Của Bạn

Hướng dẫn này giả định rằng bạn quen thuộc với JavaScript và các khái niệm cơ bản của Node.js.

Khởi Tạo Dự Án

Tạo một thư mục mới và khởi tạo một dự án Node.js:

Cài Đặt Các Gói NPM Cần Thiết

Cài đặt các gói node cần thiết với Node Package Manager (NPM):

express: Tạo máy chủ web
dotenv: Tải các biến môi trường của bạn
@vonage/server-sdk: Gửi tin nhắn qua Vonage Messages API

Tạo Các Tệp Dự Án

Tạo tệp ứng dụng chính và tệp cấu hình môi trường:

Cách Cấu Hình Môi Trường Của Bạn

Trong tệp .env, thêm thông tin xác thực và cấu hình vonage của bạn:

VONAGE_APPLICATION_ID: ID ứng dụng Vonage của bạn.
VONAGE_API_SIGNATURE_SECRET: Bí mật API Vonage của bạn
VONAGE_PRIVATE_KEY: Tệp khóa riêng của ứng dụng Vonage của bạn.
RCS_SENDER_ID: ID người gửi RBM của bạn (Tên của Thương hiệu). SenderID yêu cầu định dạng đặc biệt, chẳng hạn như không có khoảng trắng. Kiểm tra với quản lý tài khoản của bạn nếu bạn không chắc chắn.
PORT: Số cổng cho máy chủ Express.

Bạn sẽ nhận được ID ứng dụng Vonage và tệp private.key của bạn ở dưới đây, trong phần “Cách Tạo và Cấu Hình Ứng Dụng Vonage”. Tìm bí mật API của bạn trong trang chủ bảng điều khiển phát triển.

Cách Gửi Một RCS Carousel

Bây giờ mà môi trường của bạn đã được thiết lập, hãy viết mã thực sự gửi carousel thẻ phong phú RCS của bạn.

Trong bước này, bạn sẽ tạo một máy chủ Express gửi một tin nhắn RCS tùy chỉnh bằng cách sử dụng Vonage Messages API. Carousel sẽ chứa ba thẻ sản phẩm có thể vuốt, mỗi thẻ với phương tiện (video hoặc hình ảnh), tiêu đề và mô tả, cùng với các nút hành động mà người dùng của bạn có thể nhấp vào.

Tải Các Phụ Thuộc và Khởi Tạo Khách Hàng Vonage

Chúng ta sẽ bắt đầu bằng cách nhập các gói cần thiết, tải các biến môi trường của bạn và khởi tạo khách hàng Vonage. Thêm mã sau vào tệp index.js của bạn để bắt đầu:

Định Nghĩa Một Điểm Cuối Express Để Gửi Một RCS Carousel

Một số chi tiết nhỏ nhưng quan trọng cần biết trước khi gửi carousel. Tất cả các tệp phương tiện phải có thể truy cập công khai qua HTTPS, lý tưởng là được lưu trữ trên CDN hoặc lưu trữ đám mây. Chúng tôi đang sử dụng tài sản được lưu trữ trên GitHub để đơn giản trong ví dụ này, nhưng trong sản xuất, bạn sẽ muốn có nơi lưu trữ phương tiện nhanh hơn và đáng tin cậy hơn.

>> Giữ cho từng tệp phương tiện dưới 100MB để đáp ứng các hạn chế của RCS.

Mỗi thẻ bao gồm một hoặc nhiều nút hành động sử dụng postbackData, openUrlAction hoặc createCalendarEventAction. Giá trị postbackData là một chuỗi ngắn (tối đa 50 ký tự) mà máy chủ của bạn có thể sử dụng để theo dõi những gì người dùng đã nhấp vào. Bạn cũng có thể liên kết trực tiếp đến bản đồ hoặc các sự kiện lịch đã được điền trước để tăng cường sự tương tác, làm cho carousel cảm thấy giống như một mini-app hơn là chỉ một tin nhắn.

Cách Nhận Các Hành Động Gợi Ý RCS Qua Webhooks

Gửi đi một carousel thì tuyệt vời! Nhưng còn nếu người dùng của bạn tương tác với carousel của bạn thì sao? Với webhooks của Vonage, bạn có thể làm điều đó.

Tạo điểm cuối sau, sẽ xử lý các yêu cầu RCS đến từ ứng dụng Vonage của chúng tôi. Mã này:

Xác thực rằng yêu cầu đang đến từ Vonage bằng cách sử dụng chữ ký JWT
Tìm thuộc tính nút vì bạn đang mong đợi một hành động thay vì thuộc tính phản hồi, và lưu trữ payload trong userAction
Ghi lại userAction vào máy chủ Node của chúng tôi để xem người dùng đã chọn gì

Cách Định Nghĩa Máy Chủ Express Của Bạn

Ở cuối tệp index.js, thêm mã này để xây dựng máy chủ Express của bạn.

Và cuối cùng chạy máy chủ của bạn từ dòng lệnh:

>> Xem tệp index.js đầy đủ.

Cách Mở Rộng Máy Chủ Của Bạn Với Ngrok

Để nhận webhooks từ Vonage, máy chủ cục bộ của bạn phải có thể truy cập qua internet. Sử dụng ngrok để mở rộng máy chủ của bạn bằng cách chạy lệnh sau trong một tab riêng biệt từ máy chủ Express của bạn:

Ghi chú URL HTTPS do ngrok cung cấp (ví dụ: https://your-ngrok-subdomain.ngrok.io).

Bạn có thể đọc thêm về việc kiểm tra với ngrok trong các công cụ cổng thông tin của chúng tôi.

Cách Tạo và Cấu Hình Ứng Dụng Vonage Của Bạn

Bây giờ mà ứng dụng Node của bạn đã sẵn sàng, bạn cũng cần tạo và thiết lập Ứng dụng Vonage của mình. Đầu tiên, tạo ứng dụng của bạn trong Bảng điều khiển Vonage. Đặt tên cho ứng dụng và bật khả năng Nhắn tin.

Bảng điều khiển Vonage hiển thị việc tạo một ứng dụng mới được cấu hình cho nhắn tin RCS.

Trong cài đặt ứng dụng Vonage của bạn:

Đặt URL Đầu vào thành https://YOUR_NGROK_URL/inbound_rcs.
Đặt URL Trạng thái thành https://example.com/rcs_status. ** Trạng thái tin nhắn sẽ được đề cập trong một bài viết trong tương lai.
Tạo một khóa công khai và riêng tư bằng cách nhấp vào nút. Đảm bảo di chuyển tệp private.key của bạn vào thư mục gốc của dự án (rcs-carousel-node).
Lưu các thay đổi.

Sau đó liên kết đại lý RCS của bạn bằng cách nhấp vào tab “Liên kết tài khoản bên ngoài”:

Giao diện bảng điều khiển hiển thị ứng dụng Vonage-Node-RCS được liên kết với tài khoản bên ngoài Vonage RoR RCS, với khả năng giọng nói và nhắn tin được bật.

Cách Kiểm Tra Ứng Dụng Node Của Bạn

Sử dụng lệnh curl này để kích hoạt điểm cuối của bạn (thay thế các giá trị giữ chỗ):

Trên điện thoại của người nhận, Rich Card Carousel sẽ xuất hiện và họ có thể chọn một hành động!

Ghi Chú Cuối

Bạn đã xây dựng một carousel sản phẩm RCS tương tác với Node.js và Vonage Messages API. Đây là một cách tuyệt vời để giới thiệu sản phẩm, quảng bá sự kiện hoặc cung cấp các lựa chọn động trong một tin nhắn duy nhất.

Muốn đi xa hơn?

Phản hồi lại các nhấp chuột và lựa chọn qua postbackData
Tải các thẻ sản phẩm một cách động từ một API
Thêm bộ lọc hoặc danh mục dựa trên vị trí

Hãy đến và thể hiện những gì bạn đang xây dựng trong cộng đồng Vonage hoặc gắn thẻ chúng tôi trên X (trước đây là Twitter). Chúng tôi rất muốn thấy các carousel của bạn trong thực tế!