Cara Mengirim Pesan Khusus ke Kendur dari Aplikasi Anda

Slack adalah aplikasi perpesanan populer yang digunakan oleh banyak tim. Muncul dengan banyak layanan dan API untuk pengembang untuk mengintegrasikannya dengan aplikasi mereka. Dalam posting hari ini kita akan melihat bagaimana menggunakan salah satu layanannya yang disebut Incoming Webhooks, untuk mengirim data menjadi kendur dari aplikasi eksternal.

Dengan cara ini kita bisa dengan mudah mengirim pesan ke Slack dari aplikasi apa pun yang sudah kita miliki; kami dapat mengirim laporan, pembaruan, berita, pemberitahuan dan banyak lagi. Untuk posting ini, saya telah menggunakan JavaScript dalam contoh ini. Untuk memulai, masuk ke akun Slack tim Anda.

1. Atur Integrasi

Pertama-tama Anda harus mengatur integrasi webhook yang masuk. Pergi ke yourteam.slack.com/apps/build/custom-integration dan klik Webhook masuk, lalu pilih saluran atau pengguna yang ingin Anda kirimi pesan (pilihan ini dapat ditimpa kemudian dalam kode).

Setelah selesai, Anda akan melihat halaman konfigurasi integrasi webhook yang masuk.

Gulir ke bawah dan akan ada URL Webhook dalam format https://hooks.slack.com/services/TXXXXXXXX/BXXXXXXXX//token. Simpan URL itu di suatu tempat, kita akan membutuhkannya nanti. Anda selanjutnya dapat mengubah ikon dan nama integrasi di halaman ini sendiri, tetapi kami akan melakukannya dalam kode.

2. Buat Pesan

Bayangkan Anda telah membuat aplikasi web yang mencari penjualan Hari Valentine di situs populer serta kode penawaran untuk digunakan selama penjualan, dan untuk beberapa alasan, Anda ingin berbagi hasil ini dengan anggota tim Slack Anda.

Yang harus kita lakukan sekarang adalah menggunakan URL webhook yang dibuat pada langkah sebelumnya dan mengirim permintaan dari aplikasi Anda dengan data JSON, yang akan menyusun pesan penawaran penjualan.

Pertama mari kita kumpulkan string JSON yang akan diubah menjadi pesan Slack. Parameter yang membawa data JSON disebut payload, maka string JSON akan terlihat seperti ini:

var myJSONStr = 'payload = "username": "SALE BOT", "icon_url": "example.com/img/icon.jpg", "channel": "#general"' 

icon_url adalah URL ke gambar yang akan ditampilkan sebagai gambar profil, Anda juga dapat menggunakan icon_emoji untuk menampilkan emoji sebagai gambar profil, misalnya "icon_emoji": ": hadiah:". "saluran" menentukan saluran atau nama pengguna yang akan melihat pesan Anda. Untuk nama pengguna gunakan sintaks "@nama pengguna", untuk saluran "#nama saluran".

Sekarang untuk pesan yang sebenarnya; Anda dapat menambahkan "teks" properti dan tulis pesan Anda sebagai nilainya dan selesaikan, atau gunakan properti yang disebut "lampiran" untuk menambahkan teks berformat kaya, yang akan kita lakukan sekarang.

Itu "lampiran" properti dari muatan seperti ini:

"attachments": ["fallback": "Lampiran tidak didukung.", "title": "VALENTINE'S DAY PENAWARAN", "color": "# 9C1A22", "pretext": "Daftar penawaran menarik hari ini diambil untuk Anda "," author_name ":" Preethi "," author_link ":" https://www.hongkiat.com/blog/author/preethi/ "," author_icon ":" https://assets.hongkiat.com/ uploads / author / preethi.jpg "," mrkdwn_in ": [" text "," fields "]," text ":" Cukup klik nama situs dan mulailah membeli. Dapatkan * pengurangan tambahan dengan kode penawaran *, jika disediakan. "," thumb_url ":" http://example.com/thumbnail.jpg "]

"mundur" adalah teks alternatif yang akan ditampilkan ketika pesan Slack dilihat dalam aplikasi yang tidak mendukung lampiran pesan (seperti pada notifikasi seluler).

"warna" adalah warna batas kiri pesan.

"dalih" adalah teks yang ditampilkan sebelum konten utama.

"author_link" adalah URL yang di-hyperlink dengan nama penulis (jika disediakan).

"mrkdwn_in" adalah array nama properti yang nilainya ditampilkan diformat dalam pesan - berdasarkan sintaksis penurunan harga seperti (*) untuk cetak tebal dan (_) untuk cetak miring. Tiga kemungkinan nilai untuk "mrkdwn_in" adalah "teks", "dalih" dan "bidang"

"thumb_url" adalah URL gambar mini.

Begini bagaimana pesan akan terlihat sejauh ini.

Sekarang mari kita tambahkan bidang ke array lampiran, yang akan menampilkan situs dan menawarkan kode dalam dua kolom.

"fields": ["title": "Sites", "value": "__ \ n__ "," short ": true, " title ":" Offer Code "," value ":" UI90O22 \ n- "," short ": true], 

Menggunakan \ n untuk menambahkan baris dan sintaks untuk menambahkan hyperlink.

Garis bawah digunakan untuk memformat teks dalam huruf miring.

pendek diatur ke benar jika nilai-nilai akan ditampilkan berdampingan (seperti jika itu pendek). Disatukan, JSONString akan terlihat seperti ini (simpan string dalam satu baris dalam kode kerja aktual)

var myJSONStr = 'payload = "username": "SALE BOT", "icon_url": "example.com/img/icon.jpg", "lampiran": ["fallback": "Lampiran ini tidak didukung. "," title ":" VALENTINE'S DAY PENAWARAN "," color ":" # 9C1A22 "," pretext ":" Daftar hari ini penawaran menarik yang Anda pilih "," author_name ":" Preethi "," author_link ":" https : //www.hongkiat.com/blog/author/preethi/ "," author_icon ":" https://assets.hongkiat.com/uploads/author/preethi.jpg "," bidang ": [" title " : "Situs", "nilai": "__ \ n__ "," short ": true, " title ":" Offer Code "," value ":" UI90O22 \ n- "," short ": true]," mrkdwn_in ": [" text "," bidang "]," text ":" Cukup klik nama situs dan mulailah membeli. Dapatkan * pengurangan ekstra dengan kode penawaran *, jika disediakan. "," Thumb_url ":" http://example.com/thumbnail.jpg "] '; 

3. Posting Permintaan

Sekarang untuk membuat permintaan posting dalam JavaScript, gunakan fungsi di bawah ini:

function postMessageToSlack () var xmlhttp = new XMLHttpRequest (), webhook_url = url -Anda-save-from-before, myJSONStr = json-string-from-above; xmlhttp.open ('POST', webhook_url, false); xmlhttp.setRequestHeader ('Tipe-Konten', 'application / x-www-form-urlencoded'); xmlhttp.send (myJSONStr);  

Tambahkan fungsi ini ke klik tombol atau memuat halaman untuk melihatnya bekerja.

Hasil akhir akan terlihat seperti ini: