วิธีส่งข้อความที่กำหนดเองไปยัง Slack จากแอปพลิเคชันของคุณ

Slack เป็นแอพส่งข้อความยอดนิยมที่ใช้โดยหลาย ๆ ทีม มันมาพร้อมกับบริการมากมายและ API สำหรับนักพัฒนาเพื่อรวมเข้ากับแอปพลิเคชันของพวกเขา ในโพสต์ของวันนี้เราจะดูวิธีการใช้หนึ่งในบริการที่เรียกว่า Incoming Webhooks เพื่อส่งข้อมูลไปยังการหย่อนจากแอปพลิเคชันภายนอก.

วิธีนี้เราทำได้ ส่งข้อความถึง Slack จากแอปพลิเคชันใด ๆ ที่เรามีอยู่ได้อย่างง่ายดาย; เราสามารถส่งรายงานอัปเดตข่าวสารการแจ้งเตือนและอื่น ๆ สำหรับโพสต์นี้ฉันใช้ JavaScript ในตัวอย่าง ในการเริ่มต้นลงชื่อเข้าใช้บัญชี Slack ของทีมคุณ.

1. ตั้งค่าการรวม

ก่อนอื่นคุณจะต้องตั้งค่าการรวมเว็บบล็อกที่เข้ามา ไปที่ yourteam.slack.com/apps/build/custom-integration และคลิกที่ ขาเข้า Webhooks, จากนั้นเลือกช่องหรือผู้ใช้ที่คุณต้องการโพสต์ข้อความของคุณ (การเลือกนี้สามารถถูกแทนที่ในรหัสภายหลัง).

เมื่อเสร็จแล้วคุณจะเห็นหน้าการกำหนดค่าการรวมเว็บของคุณ.

เลื่อนลงและจะมี Webhook URL ในรูปแบบ https://hooks.slack.com/services/TXXXXXXXX/BXXXXXXXX/token. บันทึก URL นั้นไว้ที่ไหนสักแห่งเราจะต้องการในภายหลัง คุณสามารถเปลี่ยนไอคอนและชื่อของการรวมในหน้านี้ได้เอง แต่เราจะทำอย่างนั้นในรหัส.

2. สร้างข้อความ

สมมติว่าคุณได้สร้างแอปพลิเคชันเว็บที่ค้นหายอดขายในวันวาเลนไทน์ในไซต์ยอดนิยมตลอดจนรหัสข้อเสนอสำหรับใช้ในการขายและด้วยเหตุผลบางอย่างคุณต้องการแบ่งปันผลลัพธ์นี้กับสมาชิกทีม Slack ของคุณ.

สิ่งที่เราต้องทำตอนนี้คือการใช้ URL ของ webhook ที่สร้างขึ้นในขั้นตอนก่อนหน้าและโพสต์คำขอจากแอปพลิเคชันของคุณด้วยข้อมูล JSON ซึ่งจะรวมข้อความข้อเสนอการขาย.

ก่อนอื่นให้รวบรวมสตริง JSON ที่จะเปลี่ยนเป็นข้อความ Slack พารามิเตอร์ที่มีข้อมูล JSON เรียกว่า payload ดังนั้นสตริง JSON ควรมีลักษณะดังนี้:

var myJSONStr = 'payload = "ชื่อผู้ใช้": "ลดราคาบอท", "icon_url": "example.com/img/icon.jpg", "channel": "#general"' 

icon_url เป็น URL ของรูปภาพที่จะปรากฏเป็นรูปภาพโปรไฟล์คุณสามารถใช้ icon_emoji เพื่อแสดงอิโมจิเป็นรูปภาพโปรไฟล์แทนเช่น "icon_emoji": ": ของขวัญ:". "ช่องทาง" ระบุช่องหรือชื่อผู้ใช้ที่จะเห็นข้อความของคุณ สำหรับชื่อผู้ใช้ใช้ไวยากรณ์ "@ ชื่อผู้ใช้", สำหรับช่อง "#channelname".

ตอนนี้สำหรับข้อความจริง คุณสามารถเพิ่ม "ข้อความ" คุณสมบัติและเขียนข้อความของคุณเป็นค่าของมันและจะทำกับมันหรือใช้คุณสมบัติที่เรียกว่า "สิ่งที่แนบมา" เพื่อเพิ่มข้อความที่มีรูปแบบสมบูรณ์ซึ่งเป็นสิ่งที่เราจะทำตอนนี้.

"สิ่งที่แนบมา" ทรัพย์สินของ น้ำหนักบรรทุก ไปเช่นนี้

"Attachments": ["fallback": "ไม่รองรับไฟล์แนบ", "title": "VALENTINE'S DAY OFFER", "color": "# 9C1A22", "ข้ออ้าง": "รายการข้อเสนอที่ยอดเยี่ยมในวันนี้เลือก สำหรับคุณ "," author_name ":" Preethi "," author_link ":" https://www.hongkiat.com/blog/author/preethi/ "," author_icon ":" https://assets.hongkiat.com/ uploads / author / preethi.jpg "," mrkdwn_in ": [" ข้อความ "," ฟิลด์ "]," ข้อความ ":" เพียงคลิกชื่อไซต์และเริ่มซื้อรับ * ลดพิเศษพร้อมรหัสข้อเสนอ * หากมีให้ "," thumb_url ":" http://example.com/thumbnail.jpg "]

"รั้งท้าย" เป็นข้อความทางเลือกที่จะแสดงเมื่อดูข้อความ Slack ในแอปพลิเคชันที่ไม่รองรับไฟล์แนบข้อความ (เช่นในการแจ้งเตือนบนมือถือ).

"สี" เป็นสีเส้นขอบด้านซ้ายของข้อความ.

"ข้ออ้าง" เป็นข้อความที่แสดงก่อนเนื้อหาหลัก.

"author_link" คือ URL ที่เชื่อมโยงหลายมิติในชื่อของผู้แต่ง (ถ้ามี).

"mrkdwn_in" เป็นอาร์เรย์ของชื่อคุณสมบัติที่มีค่าแสดงในรูปแบบข้อความ - ตามไวยากรณ์ markdown เช่น (*) สำหรับตัวหนาและ (_) สำหรับตัวเอียง สามค่าที่เป็นไปได้สำหรับ "mrkdwn_in" คือ "ข้อความ", "ข้ออ้าง" และ "ช่อง"

"thumb_url" คือ URL ของภาพขนาดย่อ.

นี่คือลักษณะของข้อความที่ดูเหมือน.

ตอนนี้ให้เพิ่มเขตข้อมูลลงในอาร์เรย์สิ่งที่แนบซึ่งจะแสดงไซต์และรหัสข้อเสนอในสองคอลัมน์.

"fields": ["title": "Sites", "value": "__ \ n__ "," short ": true, " title ":" รหัสเสนอ "," ค่า ":" UI90O22 \ n- "," short ": true], 

ใช้ \ n เพื่อเพิ่มตัวแบ่งบรรทัดและไวยากรณ์ เพื่อเพิ่มไฮเปอร์ลิงก์.

ขีดล่างใช้เพื่อจัดรูปแบบข้อความเป็นตัวเอียง.

สั้น ถูกตั้งค่าเป็น จริง ถ้าค่าที่จะแสดงเคียงข้างกัน (เช่นถ้ามันสั้น) ใส่กัน JSONString จะมีลักษณะเช่นนี้ (เก็บสตริงในบรรทัดเดียวในรหัสการทำงานจริง)

var myJSONStr = 'payload = "ชื่อผู้ใช้": "ลดราคาบอท", "icon_url": "example.com/img/icon.jpg", "สิ่งที่แนบมา": ["fallback": "ไม่สามารถแนบเอกสารนี้ได้ "," title ":" VALENTINE'S DAY OFFER "," color ":" # 9C1A22 "," ข้ออ้าง ":" รายการวันนี้ของข้อเสนอสุดยอดเลือกสำหรับคุณ "," author_name ":" Preethi "," author_link ":" https : //www.hongkiat.com/blog/author/preethi/ "," author_icon ":" https://assets.hongkiat.com/uploads/author/preethi.jpg "," ฟิลด์ ": [" ชื่อ " : "Sites", "value": "__ \ n__ "," สั้น ": จริง, " ชื่อ ":" รหัสเสนอ "," ค่า ":" UI90O22 \ n- "," สั้น ": จริง]," mrkdwn_in ": [" ข้อความ "," ช่อง "]," text ":" เพียงคลิกชื่อไซต์และเริ่มทำการซื้อ รับ * ลดพิเศษด้วยรหัสข้อเสนอ * หากระบุ "," thumb_url ":" http://example.com/thumbnail.jpg "] '; 

3. โพสต์คำขอ

ตอนนี้ทำการร้องขอการโพสต์ใน JavaScript ใช้ฟังก์ชันด้านล่าง:

ฟังก์ชั่น postMessageToSlack () var xmlhttp = ใหม่ XMLHttpRequest (), webhook_url = url- คุณ - บันทึก - จาก - ก่อน myJSONStr = json- สตริง - จาก - เหนือ; xmlhttp.open ('POST', webhook_url, false); xmlhttp.setRequestHeader ('ประเภทเนื้อหา', 'แอปพลิเคชัน / x-www-form-urlencoded'); xmlhttp.send (myJSONStr);  

เพิ่มฟังก์ชั่นนี้เพื่อคลิกปุ่มหรือโหลดหน้าเว็บ เพื่อดูว่ามันทำงาน.

ผลลัพธ์สุดท้ายจะมีลักษณะดังนี้: