Cara Menghantar Mesej Tersuai ke Slack dari Aplikasi anda

Slack adalah aplikasi pemesejan popular yang digunakan oleh banyak pasukan. Ia datang dengan banyak perkhidmatan dan API untuk pemaju untuk mengintegrasikannya dengan aplikasi mereka. Dalam siaran hari ini, kita akan melihat cara menggunakan salah satu perkhidmatannya yang disebut Webhooks Masuk, untuk menghantar data ke kendur dari aplikasi luaran.

Dengan cara ini kita boleh dengan mudah menghantar mesej kepada Slack dari mana-mana aplikasi yang kami ada; kami boleh menghantar laporan, kemas kini, berita, pemberitahuan dan banyak lagi. Untuk jawatan ini, saya telah menggunakan JavaScript dalam contohnya. Untuk memulakan, log masuk ke akaun Slack pasukan anda.

1. Sediakan Integrasi

Pertama, anda perlu menyediakan integrasi laman web yang masuk. Pergi ke yourteam.slack.com/apps/build/custom-integration dan klik pada Webhooks masuk, kemudian pilih saluran atau pengguna yang anda ingin siarkan mesej anda (pilihan ini boleh diganti kemudian dalam kod).

Sebaik sahaja selesai, anda akan melihat halaman konfigurasi laman web integrasi masuk anda.

Tatal ke bawah dan akan ada URL Webhook dalam format https://hooks.slack.com/services/TXXXXXXXX/BXXXXXXXX/token. Simpan URL itu di suatu tempat, kami akan memerlukannya kemudian. Anda boleh menukar ikon dan nama integrasi di halaman ini sendiri, tetapi kami akan melakukannya dalam kod.

2. Buat Mesej

Mari kita bayangkan anda telah mencipta aplikasi web yang mencari jualan Hari Valentine di tapak popular serta kod tawaran untuk digunakan semasa jualan, dan atas sebab tertentu, anda ingin berkongsi hasil ini dengan ahli pasukan Slack anda.

Apa yang perlu kita lakukan sekarang adalah menggunakan URL webhook yang dibuat dalam langkah sebelumnya dan menyiarkan permintaan dari aplikasi anda dengan data JSON, yang akan merangkumi mesej tawaran jualan.

Mari buat pertama sekali menyusun tali JSON yang akan diubah menjadi mesej Slack. Parameter yang membawa data JSON dipanggil muatan, oleh itu rentetan JSON harus kelihatan seperti ini:

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

icon_url adalah URL untuk imej yang akan dipaparkan sebagai gambar profil, anda juga boleh menggunakan icon_emoji untuk memaparkan emoji sebagai gambar profil, sebagai contoh "icon_emoji": ": hadiah:". "saluran" menentukan saluran atau nama pengguna yang akan melihat mesej anda. Untuk nama pengguna menggunakan sintaks "@username", untuk saluran "#channelname".

Sekarang untuk mesej sebenar; anda boleh menambahnya "teks" harta dan menulis mesej anda sebagai nilainya dan dilakukan dengannya, atau gunakan harta yang dipanggil "lampiran" untuk menambah teks yang diformat dengan baik, yang akan kami lakukan sekarang.

The "lampiran" harta tanah muatan pergi seperti ini:

"lampiran": ["fallback": "Atase tidak disokong.", "tajuk": "TAWARAN HARI VALENTINE", "warna": "# 9C1A22", "dalih": " untuk anda "," author_name ":" Preethi "," author_link ":" https://www.hongkiat.com/blog/author/preethi/ "," author_icon ":" https://assets.hongkiat.com/ "upload" / pengarang / preethi.jpg "," mrkdwn_in ": [" text "," fields "]," text ":" Hanya klik nama tapak dan mula beli. "," thumb_url ":" http://example.com/thumbnail.jpg "]

"jatuh balik" adalah teks alternatif yang akan ditunjukkan apabila mesej Slack dilihat dalam aplikasi yang tidak menyokong lampiran mesej (seperti dalam pemberitahuan mudah alih).

"warna" adalah warna sempadan kiri mesej.

"dalih" adalah teks yang dipaparkan sebelum kandungan utama.

"author_link" adalah pautan hiperpautan URL dalam nama pengarang (jika disediakan).

"mrkdwn_in" adalah pelbagai nama harta yang nilainya ditunjukkan di dalam mesej - berdasarkan sintaks markiran seperti (*) untuk huruf tebal dan (_) untuk huruf miring. Ketiga nilai yang mungkin untuk "mrkdwn_in" adalah "teks", "dalih" dan "medan"

"thumb_url" adalah URL imej kecil imej.

Begini bagaimana mesej akan kelihatan seperti sejauh ini.

Sekarang mari tambahkan medan ke array lampiran, yang akan memaparkan laman web dan menawarkan kod dalam dua lajur.

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

Guna \ n untuk menambah rehat baris dan sintaks untuk menambah hyperlink.

Underscore digunakan untuk memformat teks dalam huruf miring.

pendek ditetapkan untuk benar jika nilai akan dipaparkan bersebelahan (seperti jika ia pendek). Menyusun bersama, JSONString akan kelihatan seperti ini (menyimpan rentetan dalam satu baris dalam kod kerja sebenar)

var myJSONStr = 'payload = "username": "BOT SALE", "icon_url": "example.com/img/icon.jpg", "attachments": ["fallback": "Attachement ini tidak disokong. , "judul": "TAWARAN HARI VALENTINE", "warna": "# 9C1A22", "dalih": "Senarai tawaran hebat hari ini dipilih untuk anda", "author_name": "Preethi", "author_link" : //www.hongkiat.com/blog/author/preethi/ "," author_icon ":" https://assets.hongkiat.com/uploads/author/preethi.jpg "," fields ": [" title " : "Tapak", "nilai": "__ \ n_"", "" "true", "title": "Code Offer", "value": "UI90O22 \ n-", "short": true], "mrkdwn_in": ["text" "]," text ":" Cukup klik nama tapak dan mula beli. Dapatkan * pengurangan tambahan dengan kod tawaran *, jika disediakan. "," Thumb_url ":" http://example.com/thumbnail.jpg "] '; 

3. Hantar Permintaan

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

fungsi postMessageToSlack () var xmlhttp = new XMLHttpRequest (), webhook_url = url-you-saved-from-before, myJSONStr = json-string-from-above; xmlhttp.open ('POST', webhook_url, false); xmlhttp.setRequestHeader ('Content-Type', 'application / x-www-form-urlencoded'); xmlhttp.send (myJSONStr);  

Tambah fungsi ini ke klik butang atau memuatkan halaman untuk melihatnya berfungsi.

Output akhir akan kelihatan seperti ini: