Trello 게시 시 자체 시스템에 알림

태스크 관리 툴로서 매우 메이저인 Trello입니다만, 자사 시스템과 제휴하고 싶은 경우가 있지요.

이 기사에서는 다음을 구현하는 방법을 설명합니다.
· Trello에서 코멘트가 게시되면 자사 시스템에 알림

기능을 구현하기 위해 "Trello Webhook API"를 사용합니다.
Webhook이란 무엇인가, 라고 평소 생각하고 있는 분도 있을지도 모릅니다만, 재차 조사해 보면
"웹 응용 프로그램에서 이벤트가 실행될 때 외부 서비스에 HTTP로 알리는 메커니즘"
히트했습니다.

여기서 말하는 「웹 어플리케이션」은 Trello의 것으로 「외부 서비스」는 자사 시스템이군요.
그래서 Trello가 제공하는 Webhook API가 필요합니다.
사용할 때까지의 절차를 부드럽게 설명합니다.

1. h tps : // t ぉ. 이 m/아 p-케 y 방문.

2. Trello 개발 계약을 검토하고 API 키 표시를 클릭합니다.


3. 키가 표시됩니다 (이 키는 나중 단계에서 사용하므로 메모하십시오)
이 화면에서 "Token"링크를 클릭하십시오.


4. 액세스 허가 화면이 표시되므로 「허가」를 클릭.


5. 토큰이 발행됩니다 (이 토큰은 나중 단계에서 사용되므로 메모하십시오)


6. 댓글 게시되면 자사 시스템에 알리고 싶은 보드 ID를 가져옵니다.
명령 프롬프트와 터미널에서 다음 명령을 실행합시다.

curl "https://trello.com/1/members/[ユーザ名]/boards?key=[３で表示されたキー]&token=[５で表示されたトークン]&fields=name"

깨져 버리는 경우는 이하의 방법으로 문자 코드를 변경해 봅시다.
htps : // m / 우세 r0 / ms / a 9116 c7bd7b70 cfb0

"Trello에 오신 것을 환영합니다""테스트"라는 두 개의 보드가 표시되었습니다.
여기에서는 예로서 「테스트」의 보드로 합시다.
'테스트' id를 복사해 둡니다.

7. 그런 다음 Webhook을 생성합니다.
여기에서도 명령 프롬프트와 터미널에서 다음 명령을 실행합시다.

curl -X POST "https://api.trello.com/1/token/[５で表示されたトークン]/webhooks?key=[３で表示されたキー]&callbackURL=[コールバックURL]&idModel=[でコピーしたid]&description=[Webhookの説明]"

콜백 URL은 Trello에서 액션이 있을 경우 알려주시기 바랍니다.
제대로 상태 코드 200을 반환하는 URL로 설정하십시오.

8. 성공적으로 생성되면 Webhook을 확인합시다.
브라우저에서 다음 URL에 액세스하면 성공적으로 생성되었음을 알 수 있습니다.
https://trello.com/1/tokens/[5로 표시된 토큰]/webhooks/


이제 준비가 되었습니다.
해당 보드에서 무언가 액션이 있을 때 콜백 URL에 실시간으로 통지가 되었습니다.
그리고는 자사 시스템측의 처리군요.

Trello에서 액션이 있으면 이런 느낌의 데이터가 날 수 있습니다.


이 각 항목에 대한 참조가 없었기 때문에 이번 시간이 있을 때 정리하고 싶습니다.
조금 해석해 주시면 알 수 있다고 생각합니다.
PHP의 처리측은 이런 느낌.
POST 요청과 Trello의 알림에만 작동합니다.

    function index(){

        // trelloからのアクセスのみ受け付ける
        if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_SERVER['HTTP_X_TRELLO_WEBHOOK'])) {
            $body = file_get_contents("php://input");

            if (!empty($body)) {
                $bodyArray = json_decode($body, true);

                // 登録されたコメント
                // コメント編集時にはここには入らないのでスルー
                if(!empty($bodyArray['action']['data']['text'])){

                    $operatorName = $bodyArray['action']['display']['entities']['memberCreator']['text']; // コメントした人
                    $comment = $bodyArray['action']['data']['text']; // 投稿されたコメント
                    $boardName = $bodyArray['model']['name']; // ボード名
                    $title = $bodyArray['action']['data']['card']['name']; // カードのタイトル
                    $cardId = $bodyArray['action']['data']['card']['id']; // カードID

                    // 以降の処理はご自由に～


                }
            }
        }
    }

이상이 됩니다.
순서에 따라 해 주시면 곧 실장할 수 있으므로 꼭 봐 주세요.