사용자 지정 메시지를 응용 프로그램에서 불량 전송하는 방법

슬랙은 많은 팀에서 사용되는 인기있는 메시징 앱입니다. 개발자가 자신의 응용 프로그램과 통합 할 수 있도록 많은 서비스와 API를 제공합니다. 오늘의 포스트에서는 Incoming Webhooks라는 서비스 중 하나를 사용하여 외부 애플리케이션에서 데이터를 보내도록하는 방법을 살펴볼 것입니다.

이렇게하면 이미 가지고있는 응용 프로그램에서 Slack으로 메시지를 쉽게 보낼 수 있습니다.; 우리는 보고서, 업데이트, 뉴스, 알림 등을 보낼 수 있습니다. 이 게시물에서는 예제에서 JavaScript를 사용했습니다. 시작하려면 팀의 슬랙 계정에 로그인하십시오..

1. 통합 설정

먼저 들어오는 webhook 통합을 설정해야합니다. 이동 yourteam.slack.com/apps/build/custom-integration 클릭 들어오는 Webhooks, 메시지를 게시 할 채널 또는 사용자를 선택하십시오 (이 선택 사항은 나중에 코드에서 덮어 쓸 수 있음).

완료되면 들어오는 webhook 통합의 구성 페이지가 표시됩니다..

아래로 스크롤하면 형식의 Webhook URL이 표시됩니다. https://hooks.slack.com/services/TXXXXXXXX/BXXXXXXXX/token. 그 URL을 어딘가에 저장하면 나중에 필요할 것입니다. 이 페이지 자체에서 아이콘과 통합 이름을 더 변경할 수 있지만 코드에서이를 수행 할 것입니다..

2. 메시지 작성

인기있는 사이트의 발렌타인 데이 판매와 판매하는 동안 제공되는 쿠폰 코드를 검색하는 웹 앱을 이미 만들었다 고 가정 해 봅니다. 어떤 이유로이 결과를 슬랙 팀 구성원과 공유하고 싶다고 가정 해 보겠습니다..

지금해야 할 일은 이전 단계에서 생성 된 webhook URL을 사용하고 애플리케이션에서 JSON 데이터로 요청을 게시하여 판매 제안 메시지를 작성하는 것입니다..

Slack 메시지로 바뀔 JSON 문자열을 먼저합시다. JSON 데이터를 전달하는 매개 변수를 페이로드라고합니다. 따라서 JSON 문자열은 다음과 같아야합니다.

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

icon_url 프로필 사진으로 표시되는 이미지의 URL입니다. icon_emoji 대신 예를 들어 프로필 사진으로 그림 이모티콘을 표시합니다. "icon_emoji": ": 선물 :". "채널" 메시지를 볼 채널 또는 사용자 이름을 지정합니다. 사용자 이름은 구문을 사용합니다. "@사용자 이름", 채널 용 "#channelname".

이제 실제 메시지입니다. 당신은 "본문" 속성을 사용하고 값으로 메시지를 작성하고이를 사용하여 완료하거나 "부착" 서식있는 텍스트를 추가하는 것입니다. 이것은 우리가 지금하고있는 것입니다..

그만큼 "부착" 의 자산 유효 탑재량 이렇게 간다.

"첨부 파일": [ "fallback": "첨부 파일은 지원되지 않습니다.", "title": "VALENTINE 'S DAY OFFER", "color": "9C1A22", "구실" for your author ","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 ":"사이트 이름을 클릭하고 구매를 시작하십시오. ","thumb_url ":"http://example.com/thumbnail.jpg "]]

"대체" 슬랙 메시지가 메시지 첨부를 지원하지 않는 응용 프로그램 (예 : 모바일 알림)에서 볼 때 표시 할 대체 텍스트입니다..

"색깔" 메시지의 왼쪽 테두리 색상입니다..

"이름" 주 콘텐츠 앞에 표시되는 텍스트입니다..

"author_link" 저자 이름에 하이퍼 링크 된 URL입니다 (제공되는 경우)..

"mrkdwn_in" 굵게는 (*), 기울임 꼴은 (_)과 같은 마트 다운 구문에 따라 메시지에 서식이 지정된 값의 속성 이름 배열입니다. 가능한 세 가지 값은 다음과 같습니다. "mrkdwn_in" "텍스트", "구실"및 "필드"

"thumb_url" 미리보기 이미지의 URL입니다..

메시지가 지금까지와 같이 보이는 방법은 다음과 같습니다..

이제 사이트를 표시하고 두 개의 열로 코드를 제공하는 첨부 파일 배열에 필드를 추가해 보겠습니다..

"fields": [ "title": "사이트", "값": "__\엔__ ","short ": true, "제목 ":"쿠폰 코드 ","값 ":"UI90O22 \ n- ","short ": true], 

용도 \엔 줄 바꿈과 구문을 추가하는 방법 하이퍼 링크를 추가하는 방법.

밑줄은 기울임 꼴로 텍스트 서식을 지정하는 데 사용됩니다..

짧은 에 설정 됨 참된 값이 나란히 표시 될 경우 (짧은 경우와 같이). JSONString은 다음과 같이 보일 것입니다 (실제 작업 코드에서 한 줄에 문자열을 유지하십시오)

var myJSONStr = 'payload =  "username": "SALE BOT", "icon_url": "example.com/img/icon.jpg", "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 ","fields ": ["title " : "사이트", "가치": "__\엔__ ","short ": true, "제목 ":"오퍼 코드 ","값 ":"UI90O22 \ n- ","short ": true],"mrkdwn_in ": ["text ","fields "],"text ":"사이트 이름을 클릭하고 구매를 시작하십시오. 제공되는 쿠폰 코드 *가있는 경우 * 추가 ​​할인 혜택을 받으십시오. ","thumb_url ":"http://example.com/thumbnail.jpg "] ''; 

3. 요청 게시

이제 자바 스크립트로 게시물 요청을하려면 아래 함수를 사용하십시오.

함수 postMessageToSlack () var xmlhttp = new XMLHttpRequest (), webhook_url = 이전에 저장 한 url-myJSONStr = json-string-from-above; xmlhttp.open ( 'POST', webhook_url, false); xmlhttp.setRequestHeader ( 'Content-Type', 'application / x-www-form-urlencoded'); xmlhttp.send (myJSONStr);  

버튼 클릭 또는 페이지로드에이 함수 추가 그것을 볼 수.

최종 출력은 다음과 같습니다.