Cách gửi tin nhắn tùy chỉnh đến Slack từ ứng dụng của bạn

Slack là một ứng dụng nhắn tin phổ biến được nhiều đội sử dụng. Nó đi kèm với rất nhiều dịch vụ và API cho các nhà phát triển để tích hợp nó với các ứng dụng của họ. Trong bài viết hôm nay, chúng ta sẽ xem cách sử dụng một trong các dịch vụ của nó được gọi là Webhooks đến, để gửi dữ liệu đến chùng từ một ứng dụng bên ngoài.

Bằng cách này chúng ta có thể dễ dàng gửi tin nhắn đến Slack từ bất kỳ ứng dụng nào chúng tôi đã có; chúng tôi có thể gửi báo cáo, cập nhật, tin tức, thông báo và nhiều hơn nữa. Đối với bài đăng này, tôi đã sử dụng JavaScript trong ví dụ. Để bắt đầu, hãy đăng nhập vào tài khoản Slack của nhóm bạn.

1. Thiết lập tích hợp

Trước tiên bạn sẽ phải thiết lập tích hợp webhook đến. Đi đến yourteam.slack.com/apps/build/custom-integration và bấm vào Webhooks đến, sau đó chọn kênh hoặc người dùng bạn muốn đăng tin nhắn của mình (lựa chọn này có thể được ghi đè sau đó trong mã).

Sau khi hoàn tất, bạn sẽ thấy trang cấu hình tích hợp webhook sắp tới của bạn.

Cuộn xuống và sẽ có một URL Webhook ở định dạng https://hooks.slack.com/service/TXXXXXXXX/BXXXXXXXX/token. Lưu URL đó ở đâu đó, chúng tôi sẽ cần nó sau. Bạn có thể thay đổi thêm biểu tượng và tên của tích hợp trong trang này, nhưng chúng tôi sẽ thực hiện điều đó bằng mã.

2. Tạo tin nhắn

Hãy tưởng tượng bạn đã tạo một ứng dụng web tìm kiếm doanh số ngày Valentine trong các trang web phổ biến cũng như mã ưu đãi để sử dụng trong khi bán hàng và vì một số lý do, bạn muốn chia sẻ kết quả này với các thành viên nhóm Slack của mình.

Tất cả những gì chúng ta phải làm bây giờ là sử dụng URL webhook được tạo ở bước trước và gửi yêu cầu từ ứng dụng của bạn với dữ liệu JSON, điều này sẽ tạo ra thông báo ưu đãi bán hàng.

Trước tiên chúng ta hãy kết hợp chuỗi JSON sẽ được chuyển thành thông báo Slack. Tham số mang dữ liệu JSON được gọi là tải trọng, do đó chuỗi JSON sẽ trông như thế này:

var myJSONStr = 'payload = "tên người dùng": "SALE BOT", "icon_url": "example.com/img/icon.jpg", "channel": "#general"' 

icon_url là URL của hình ảnh sẽ hiển thị dưới dạng ảnh hồ sơ, bạn cũng có thể sử dụng icon_emoji thay vào đó, để hiển thị biểu tượng cảm xúc như ảnh đại diện "icon_emoji": ": quà tặng:". "kênh" chỉ định kênh hoặc tên người dùng sẽ thấy tin nhắn của bạn. Đối với tên người dùng, sử dụng cú pháp "@ Tên người dùng", cho kênh "#Tên kênh".

Bây giờ cho tin nhắn thực tế; bạn có thể thêm "bản văn" thuộc tính và viết thông điệp của bạn làm giá trị của nó và được thực hiện với nó, hoặc sử dụng thuộc tính được gọi "tập tin đính kèm" để thêm văn bản có định dạng phong phú, đó là những gì chúng ta sẽ làm bây giờ.

Các "tập tin đính kèm" tài sản của khối hàng đi như thế này:

"tệp đính kèm": ["dự phòng": "Tệp đính kèm không được hỗ trợ.", "tiêu đề": "ƯU ĐÃI NGÀY GIÁ TRỊ", "màu": "# 9C1A22", "cớ" dành cho bạn "," Author_name ":" Preethi "," Author_link ":" https://www.hongkiat.com/blog/author/preethi/ "," Author_icon ":" https://assets.hongkiat.com/ uploads / tác giả / preethi.jpg "," mrkdwn_in ": [" văn bản "," trường "]," văn bản ":" Chỉ cần nhấp vào tên trang web và bắt đầu mua. "," thumb_url ":" http://example.com/thumbnail.jpg "]

"dự phòng" là văn bản thay thế được hiển thị khi thông báo Slack được xem trong một ứng dụng không hỗ trợ tệp đính kèm tin nhắn (như trong thông báo trên thiết bị di động).

"màu" là màu viền trái của tin nhắn.

"cớ" là văn bản được hiển thị trước nội dung chính.

"tác giả_link" là URL siêu liên kết trong tên tác giả (nếu được cung cấp).

"mrkdwn_in" là một mảng các tên thuộc tính có các giá trị được hiển thị được định dạng trong thông báo - dựa trên cú pháp đánh dấu như (*) cho đậm và (_) cho chữ nghiêng. Ba giá trị có thể cho "mrkdwn_in" là "văn bản", "tiền tố" và "trường"

"thumb_url" là URL của hình ảnh thu nhỏ.

Đây là cách tin nhắn sẽ trông như thế nào cho đến nay.

Bây giờ, hãy thêm các trường vào mảng đính kèm, sẽ hiển thị các trang web và cung cấp mã trong hai cột.

"các trường": ["tiêu đề": "Trang web", "giá trị": "__ \ n__ "," short ": true, " title ":" Mã ưu đãi "," value ":" UI90O22 \ n- "," short ": true], 

Sử dụng \ n để thêm ngắt dòng và cú pháp để thêm siêu liên kết.

Gạch dưới được sử dụng để định dạng văn bản in nghiêng.

ngắn được đặt thành thật nếu các giá trị được hiển thị cạnh nhau (như nếu nó ngắn). Kết hợp lại, JSONString sẽ trông như thế này (giữ chuỗi trong một dòng trong mã làm việc thực tế)

var myJSONStr = 'payload = "username": "SALE BOT", "icon_url": "example.com/img/icon.jpg", "tập tin đính kèm": ["fallback": "Phần đính kèm này không được hỗ trợ. "" : //www.hongkiat.com/blog/author/preethi/ "," Author_icon ":" https://assets.hongkiat.com/uploads/author/preethi.jpg "," các trường ": [" title " : "Trang web", "giá trị": "__ \ n__ "," short ": true, " title ":" Mã ưu đãi "," value ":" UI90O22 \ n- "," short ": true]," mrkdwn_in ": [" text "," "]," văn bản ":" Chỉ cần nhấp vào tên trang web và bắt đầu mua. Nhận * giảm thêm với mã ưu đãi *, nếu được cung cấp. "," Thumb_url ":" http://example.com/thumbnail.jpg "] '; 

3. Đăng yêu cầu

Bây giờ để thực hiện yêu cầu bài viết trong JavaScript, hãy sử dụng chức năng dưới đây:

hàm postMessageToSlack () var xmlhttp = new XMLHttpRequest (), webhook_url = url-you-save-from-before, myJSONStr = json-string-from-phía trên; xmlhttp.open ('POST', webhook_url, sai); xmlhttp.setRequestHeader ('Loại nội dung', 'application / x-www-form-urlencoding'); xmlhttp.send (myJSONStr);  

Thêm chức năng này vào một nút bấm hoặc tải trang để xem nó hoạt động.

Đầu ra cuối cùng sẽ trông giống như thế này: