Πώς να στείλετε Προσαρμοσμένα μηνύματα στο Slack από την εφαρμογή σας

Το Slack είναι μια δημοφιλής εφαρμογή ανταλλαγής μηνυμάτων που χρησιμοποιείται από πολλές ομάδες. Έρχεται με πολλές υπηρεσίες και ένα API για προγραμματιστές για να το ενσωματώσει με τις εφαρμογές τους. Στη σημερινή ανάρτηση θα δούμε πώς να χρησιμοποιήσετε μία από τις υπηρεσίες της που ονομάζεται Incoming Webhooks, για να στείλετε δεδομένα σε χαλάρωση από μια εξωτερική εφαρμογή.

Με αυτόν τον τρόπο μπορούμε εύκολα να στείλετε μηνύματα στο Slack από οποιαδήποτε εφαρμογή που έχουμε ήδη. μπορούμε να στείλουμε αναφορές, ενημερώσεις, ειδήσεις, ειδοποιήσεις και πολλά άλλα. Για αυτήν την ανάρτηση, έχω χρησιμοποιήσει το JavaScript στο παράδειγμα. Αρχικά, συνδεθείτε στο λογαριασμό Slack της ομάδας σας.

1. Ρυθμίστε την ενοποίηση

Θα πρέπει πρώτα να δημιουργήσετε μια εισερχόμενη ενσωμάτωση webhook. Παω σε yourteam.slack.com/apps/build/customintegration και κάντε κλικ στο Εισερχόμενα Webhooks, στη συνέχεια, επιλέξτε ένα κανάλι ή χρήστη στον οποίο θέλετε να δημοσιεύσετε τα μηνύματά σας (αυτή η επιλογή μπορεί να αντικατασταθεί αργότερα στον κώδικα).

Μόλις τελειώσετε, θα δείτε τη σελίδα διαμόρφωσης της εισερχόμενης σύνδεσης του webhook.

Μετακινηθείτε προς τα κάτω και θα εμφανιστεί μια διεύθυνση URL Webhook στη μορφή https://hooks.slack.com/services/TXXXXXXXX/BXXXXXXXX/token. Αποθηκεύστε τη διεύθυνση URL κάπου, θα τη χρειαστεί αργότερα. Μπορείτε να αλλάξετε περαιτέρω το εικονίδιο και το όνομα της ολοκλήρωσης σε αυτή τη σελίδα, αλλά θα το κάνουμε αυτό στον κώδικα.

2. Δημιουργήστε το μήνυμα

Ας φανταστούμε ότι έχετε ήδη δημιουργήσει μια εφαρμογή ιστού που αναζητά τις πωλήσεις της Ημέρας του Αγίου Βαλεντίνου σε δημοφιλείς ιστότοπους καθώς και τους κωδικούς προσφοράς που θα χρησιμοποιήσετε κατά την πώληση και, για κάποιο λόγο, θέλετε να μοιραστείτε αυτό το αποτέλεσμα με τα μέλη της ομάδας Slack.

Το μόνο που πρέπει να κάνουμε τώρα είναι να χρησιμοποιήσουμε τη διεύθυνση URL webhook που δημιουργήθηκε στο προηγούμενο βήμα και να υποβάλετε ένα αίτημα σε αυτήν από την εφαρμογή σας με δεδομένα JSON, τα οποία θα σχεδιάσουν το μήνυμα προσφοράς πώλησης.

Ας δημιουργήσουμε πρώτα τη συμβολοσειρά JSON που θα μετατραπεί στο μήνυμα Slack. Η παράμετρος που μεταφέρει τα δεδομένα JSON ονομάζεται ωφέλιμο φορτίο, οπότε η συμβολοσειρά JSON θα πρέπει να έχει την εξής μορφή:

var myJSONStr = 'payload = "όνομα χρήστη": "SALE BOT", "icon_url": "example.com/img/icon.jpg", "κανάλι" 

icon_url είναι η διεύθυνση URL της εικόνας που θα εμφανιστεί ως εικόνα προφίλ, μπορείτε επίσης να τη χρησιμοποιήσετε icon_emoji για να εμφανίσετε ένα emoji ως εικόνα προφίλ, για παράδειγμα "icon_emoji": ": δώρο:". "Κανάλι" καθορίζει το κανάλι ή το όνομα χρήστη που θα δει το μήνυμά σας. Για όνομα χρήστη χρησιμοποιήστε τη σύνταξη "@username", για κανάλι "#channelname".

Τώρα για το πραγματικό μήνυμα. μπορείτε είτε να προσθέσετε το "κείμενο" ιδιοκτησία και να γράψετε το μήνυμά σας ως την αξία του και να γίνει με αυτό, ή να χρησιμοποιήσετε την ιδιότητα που ονομάζεται "συνημμένο" για να προσθέσετε κείμενο με πλούσια μορφή, το οποίο θα κάνουμε τώρα.

ο "συνημμένο" Ιδιοκτησία του φορτίο επί πληρωμή πηγαίνει έτσι:

"attachment": ["fallback": "Το προσάρτημα δεν υποστηρίζεται", "title": "OFFER DAY VALENTINE", "color": "# 9C1A22", "pretext" για εσάς "," author_name ":" Preethi "," author_link ":" https://www.hongkiat.com/blog/author/preethi/ "," author_icon ":" https://assets.hongkiat.com/ "*", "mrkdwn_in": ["text", "fields"], "text": "Απλά κάντε κλικ στα ονόματα των τοποθεσιών και αρχίστε να αγοράζετε. "," thumb_url ":" http://example.com/thumbnail.jpg "]

"εφεδρική" είναι το εναλλακτικό κείμενο που θα εμφανίζεται όταν το μήνυμα Slack προβάλλεται σε μια εφαρμογή που δεν υποστηρίζει συνημμένα μηνύματα (όπως στις ειδοποιήσεις για κινητά).

"χρώμα" είναι το αριστερό χρώμα περιγράμματος του μηνύματος.

"πρόσχημα" είναι το κείμενο που εμφανίζεται πριν από το κύριο περιεχόμενο.

"author_link" είναι η υπερσυνδεδεμένη διεύθυνση URL στο όνομα του συντάκτη (εφόσον υπάρχει).

"mrkdwn_in" είναι μια σειρά από ονόματα ιδιοτήτων των οποίων οι τιμές εμφανίζονται μορφοποιημένες στο μήνυμα - με βάση τη σύνταξη της αντιστοίχισης όπως (*) για έντονους χαρακτήρες και (_) για πλάγιους χαρακτήρες. Οι τρεις πιθανές τιμές για "mrkdwn_in" είναι "κείμενο", "πρόσχημα" και "πεδία"

"thumb_url" είναι η διεύθυνση URL της μικρογραφίας.

Δείτε πώς το μήνυμα θα μοιάζει μέχρι τώρα.

Τώρα, προσθέστε τα πεδία στη συστοιχία συνημμένων, τα οποία θα εμφανίζουν τους ιστότοπους και τους κωδικούς προσφοράς σε δύο στήλες.

"πεδία": ["title": "Sites", "value": "__ \ n__ "," short ": true, " title ":" Κωδικός προσφοράς "," value ":" UI90O22 \ n- "," short ": true], 

Χρήση \ n για να προσθέσετε το σπάσιμο γραμμής και τη σύνταξη για να προσθέσετε υπερσυνδέσμους.

Το Underscore χρησιμοποιείται για τη μορφοποίηση κειμένου με πλάγια γραφή.

μικρός Έχει οριστεί αληθής εάν οι τιμές πρόκειται να εμφανιστούν δίπλα-δίπλα (σαν να είναι σύντομη). Συνδυάστε, το JSONString θα μοιάζει με αυτό (κρατήστε τη συμβολοσειρά σε μια γραμμή με τον πραγματικό κώδικα εργασίας)

var myJSONStr = 'payload = "username": "SALE BOT", "icon_url": "example.com/img/icon.jpg", "συνημμένα": ["fallback" "," title ":" ΠΡΟΣΦΟΡΑ ΗΜΕΡΑΣ ΒΑΛΕΝΤΙΝΕ "," χρώμα ":" # 9C1A22 "," πρόσχημα ":" : //www.hongkiat.com/blog/author/preethi/ "," author_icon ":" https://assets.hongkiat.com/uploads/author/preethi.jpg "," fields ": [" title " : "Ιστότοποι", "αξία": "__ \ n__ "," short ": true, " title ":" Κωδικός προσφοράς "," τιμή ":" UI90O22 \ n- "," short ": true]," mrkdwn_in " "]," κείμενο ":" Απλά κάντε κλικ στα ονόματα των τοποθεσιών και αρχίστε να αγοράζετε. Λάβετε * επιπλέον μείωση με τον κωδικό προσφοράς *, εφόσον παρέχεται. "," Thumb_url ":" http://example.com/thumbnail.jpg "] '; 

3. Δημοσίευση της Αίτησης

Τώρα για να κάνετε το αίτημα υποβολής σε JavaScript, χρησιμοποιήστε την παρακάτω λειτουργία:

συνάρτηση postMessageToSlack () var xmlhttp = νέα XMLHttpRequest (), webhook_url = url-you-saved-από-πριν, myJSONStr = json-string-από-παραπάνω; xmlhttp.open ('POST', webhook_url, false); xmlhttp.setRequestHeader ('Content-Type', 'application / x-www-form-urlencoded'). xmlhttp.send (myJSONStr);  

Προσθέστε αυτή τη λειτουργία σε ένα κουμπί κλικ ή φόρτωση σελίδας για να δούμε ότι λειτουργεί.

Η τελική παραγωγή θα μοιάζει κάπως έτσι: