Özel Mesajlarınızı Başvurunuzdan Çıkarın

Slack, birçok ekip tarafından kullanılan popüler bir mesajlaşma uygulamasıdır. Geliştiricilerin uygulamaları ile entegre etmeleri için birçok hizmet ve bir API ile birlikte gelir. Bugünün yayınında, harici bir uygulamadan uzak durmak üzere veri göndermek için Gelen Webhooks adlı hizmetlerinden birinin nasıl kullanılacağını göreceğiz..

Bu şekilde yapabiliriz Zaten sahip olduğumuz tüm uygulamalardan kolayca Slack'a mesaj gönderebilirsin.; raporlar, güncellemeler, haberler, bildirimler ve daha fazlasını gönderebiliriz. Bu yazı için, örnekte JavaScript kullandım. Başlamak için ekibinizin Slack hesabına giriş yapın.

1. Entegrasyonu ayarlayın

Önce gelen bir webhook entegrasyonu kurmanız gerekecek. Git yourteam.slack.com/apps/build/custom-integration ve tıklayın Gelen Web Kancaları, daha sonra mesajlarınızı göndermek istediğiniz bir kanalı veya kullanıcıyı seçin (bu seçim daha sonra kodda geçersiz kılınabilir).

Tamamlandıktan sonra, gelen webhook entegrasyonunuzun yapılandırma sayfasını göreceksiniz.

Aşağı kaydırın ve biçiminde bir Webhook URL olacak https://hooks.slack.com/services/TXXXXXXXX/BXXXXXXXX/token. Bu URL'yi bir yere kaydedin, daha sonra ihtiyacımız olacak. Bu sayfadaki entegrasyonun simgesini ve adını daha da değiştirebilirsiniz, ancak bunu kodda yapacağız..

2. Mesajı Oluştur

Sevgililer Günü satışlarını popüler sitelerde ve satış sırasında kullanılacak teklif kodlarını arayan bir web uygulaması oluşturduğunuzu ve bazı nedenlerden dolayı, bu sonucu Slack ekibi üyelerinizle paylaşmak istediğinizi varsayalım..

Şimdi tek yapmamız gereken, önceki adımda oluşturulan webhook URL’sini kullanmak ve başvurunuzdan JSON verileriyle bir istek göndermek, bu da satış teklifi iletisini kabul edecek.

Önce Slack mesajına çevrilecek olan JSON dizesini bir araya getirelim. JSON verilerini taşıyan parametreye yük denir, bu nedenle JSON dizesinin şöyle görünmesi gerekir:

var myJSONStr = 'payload = "kullanıcı adı": "SATIŞ BOTU", "icon_url": "example.com/img/icon.jpg", "channel": "#general"' 

icon_url profil resmi olarak gösterilecek resmin URL’sidir. icon_emoji bir emojiyi profil resmi olarak göstermek için, örneğin "icon_emoji": ": hediye:". "kanal" mesajınızı görecek kanalı veya kullanıcı adını belirtir. Kullanıcı adı için sözdizimini kullanın "@Kullanıcı adı", kanal için "#Kanal ismi".

Şimdi gerçek mesaj için; ya ekleyebilirsiniz "Metin" özelliği ile mesajınızı değeri olarak yazıp, onunla bitirin veya adı verilen özelliği kullanın. "ek dosya" Zengin biçimde biçimlendirilmiş metin eklemek için, şu anda yapacağımız şey budur..

"ek dosya" mülkiyet yük böyle gider:

"ekler": ["fallback": "Ek desteklenmiyor.", "title": "VALENTINE'S GÜN TEKLİF", "renk": "# 9C1A22", "bahane": "Bugünkü harika teklifler listesi seçildi sizin için "," yazar_adı ":" 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 ":" Sadece site adlarına tıklayın ve satın almaya başlayın. Eğer varsa * teklif koduyla * ekstra indirim alın. "," thumb_url ":" http://example.com/thumbnail.jpg "]

"geri çekil" Slack mesajı, mesaj ekini desteklemeyen bir uygulamada görüntülendiğinde görüntülenecek alternatif metindir (mobil bildirimlerde olduğu gibi)..

"renk" mesajın sol kenarlık rengi.

"Bahane" Ana içeriğin önünde gösterilen metin.

"Author_link" yazarın adına köprülü URL (varsa).

"Mrkdwn_in" değerleri mesajda biçimlendirilmiş olarak gösterilen bir özellik adları dizisidir - kalın için (*) ve italik için (_) gibi markdown sözdizimini temel alır. İçin üç olası değer "Mrkdwn_in" "metin", "bahane" ve "alanlar"

"Thumb_url" Küçük resmin URL’si.

Mesaj şimdiye kadarki gibi görünecek.

Şimdi alanları, siteleri görüntüleyecek ve kodları iki sütunda sunacak olan ek dizisine ekleyelim..

"fields": ["title": "Siteler", "değer": "__ \ N__ "," short ": true, " title ":" Teklif Kodu "," value ":" UI90O22 \ n- "," short ": true], 

kullanım \ n Satır sonu ve sözdizimi eklemek için köprü eklemek için.

Alt çizgi, italik olarak metni biçimlendirmek için kullanılır.

kısa ayarlandı doğru Eğer değerler yan yana gösterilecekse (kısa ise) Bir araya getirmek için JSONString şöyle görünecektir (dizgiyi gerçek çalışma kodunda tek bir satırda tutun)

var myJSONStr = 'payload = "kullanıcı adı": "SATIŞ BOT", "icon_url": "example.com/img/icon.jpg", "ekler": ["fallback": "Bu ek desteklenmiyor. "," title ":" VALENTINE'S GÜN TEKLİFİ "," color ":" # 9C1A22 "," pretext ":" Bugünkü müthiş tekliflerin listesi sizin için seçildi "," author_name ":" Preethi "," author_link ":" https : //www.hongkiat.com/blog/author/preethi/ "," author_icon ":" https://assets.hongkiat.com/uploads/author/preethi.jpg "," alanlar ": [" başlık " : "Siteler", "değer": "__ \ N__ "," short ": true, " title ":" Teklif Kodu "," value ":" UI90O22 \ n- "," short ": true]," mrkdwn_in ": [" text "," fields "]," text ":" Sadece site adlarını tıklayın ve satın almaya başlayın. Sağlanıyorsa, teklif kodu * ile * ek indirim alın. "," Thumb_url ":" http://example.com/thumbnail.jpg "] '; 

3. İsteği Gönderin

Şimdi gönderi isteğini JavaScript'te yapmak için aşağıdaki işlevi kullanın:

fonksiyon postMessageToSlack () var xmlhttp = yeni XMLHttpRequest (), webhook_url = önce-url-önce-kurtardığınız, myJSONStr = json-string-from-above; xmlhttp.open ('POST', webhook_url, yanlış); xmlhttp.setRequestHeader ('İçerik Türü', 'uygulama / x-www-form-urlencoded'); xmlhttp.send (myJSONStr);  

Bu işlevi bir düğme tıklatmasına veya sayfa yüklenmesine ekle çalışırken görmek.

Son çıktı şöyle bir şeye benzeyecek: