🤖 Admin Main Dashboard 슬랙 봇 제작 과정 정리

걍은서·2022년 2월 7일

💡 2021년 1월, 사내 메신저로 사용하는 슬랙(Slack)의 봇(Bot)을 사용하여 신선 마켓 시스템과 연동되는 기능을 추가하는 것을 싱크 타임 과제로 받게 되어 과정에 대해 정리했습니다.

아이디어 도출 및 선정

기존에는 따로 봇을 사용하지 않고 github, notion 등과 연동하여 슬랙을 사용하고 있었기 때문에, 다른 사람들은 슬랙봇을 어떻게 활용하는지 참고하려고 리서치부터 해보았다. 개인이 작성한 글이 대부분이었는데 다행히 마켓컬리와 스포카에서 기업 내에서 사용하는 슬랙 봇에 대한 글을 기술 블로그에 적어둬서 그 부분을 많이 참고했다.

마켓컬리에서는 신선식품 배달이라는 동일한 키워드를 가진 회사라 글에 작성된 터미널 입고 스캔 오류 알림 봇이라는 아이디어가 인상 깊었으나, 자사에서는 DC에서 스캔 이슈가 있을 때 어떤 방식으로 처리하는지에 대한 프로세스를 정확히 파악하지 못했던 때라서 패스했다.

결론적으로 어드민 메인페이지 대시보드의 데이터를 출력하는 슬랙봇을 만들어보기로 결정했다.

슬랙 앱(봇) 만들기

기존 슬랙은 채널에 사용자와 동등한 위치로 봇이 추가되는 방식이었으나, 지금의 슬랙은 채널에 사용자와 앱을 분리하여 채널에 앱을 설치하는 방식으로 바뀌었다. 따라서 (봇 = 앱)이라는 점을 참고해야 한다.

웹 사이트 설정

https://api.slack.com/apps 접속해서 Create New App 클릭
App Name과 앱을 어떤 Workspace에 추가할지 정하고 Create New App 클릭
Settings > Basic Information > Display Information
슬랙에서 보여질 앱 이름, 아이콘 이미지(512px x 512px ~ 2000px x 2000px), 앱의 배경 색을 입력
Settings > Basic Information > Add features and functionality
필요 시 사용자의 호출을 통해서 대시보드의 데이터를 나타내는 게 이 앱의 목적이었기 때문에, Slash Commands를 통해서 봇을 구현하기로 결정했다.

Incoming Webhooks 외부 소스에서 슬랙으로 요청 전송(봇 유저 추가 필수)
Interactive Components 버튼, 메뉴 등의 요소를 추가해서 슬랙과 상호작용
Slash Commands [/ + 명령어]를 사용하여 슬랙과 상호작용(봇 유저 추가 필수)
Event Subscriptions 슬랙에서 특정 활동이 일어났을 때 앱으로 알림 전송
Bots 사용자가 채널과 대화를 통해 앱과 상호작용
Permissions 앱이 슬랙 API와 상호작용 할 수 있도록 권한 구성
Features > Slash Commands
Create New Command로 명령을 추가한다.
→ 사진에 나온 Request URL은 하단의 [API 제작] 과정 참고

API 제작

Slash 명령을 추가할 때 Request URL을 입력해야 하기 때문에 자바 api부터 추가했다.

슬래시 명령어가 호출되면 슬랙은 지정한 요청 URL로 HTTP POST를 보낸다. 이 요청에는 명령과 이를 호출한 사람을 설명하는 데이터 페이로드가 포함된다. (참고 링크)

이 때 전송된 헤더의 Contet-Type은 x-www-form-urlencoded이기 때문에 컨트롤러에서 @PostMapping 어노테이션에 consumes 속성(수신하고자 하는 데이터 포맷을 정의)을 추가해주었다. consumes 속성을 추가함으로써 지정한 미디어 타입과 일치할 때만 요청이 매칭한다.
@PostMapping(다른 속성, consumes = {MediaType.APPLICATION_FORM_URLENCODED_VALUE})

간단한 메시지를 전송해 api가 정상적으로 작동하는지 확인하기 위해 아래의 데이터를 json 형식으로 리턴하는 코드를 작성했다.
```
slackApiResponse.setResponse_type("in_channel");  // 채널 전체 공유
slackApiResponse.setText("안녕하세요! 어드민 메인 대시보드 데이터를 보여주는 봇 입니다.");
```
그리고 로컬에서 실행중인 서버를 외부에서 접근할 수 있도록 ngrok을 이용해 1319포트를 열고, Request URL에 입력해주었다.
대시보드의 데이터는 현재 루비에서 가공하여 표시해주고 있기 때문에 루비에서 데이터 조회 api를 추가한 후 자바에서 호출하여 슬랙과 연동하기로 했다. 단순히 컨트롤러를 추가해주고 routes.rb에 추가하면 되는 작업인데 어쩌다 보니 루비관리자인 rvm과 rbenv가 꼬여버려서 EG님이 해결에 도움을 주셨다. 🙇‍♀️

Ruby

    class ApiSlackController < ApplicationController
    
      def show
        dashboard_data = LastMileDashboardService.work(Date.current)
        @inventory_dashboard_data = InventoryDashboardService.work(Date.current)
        @sold_out_dashboard_data = InventoryDashboardService.get_sold_out_summary(Date.current)
        @a_day_ago = dashboard_data[:past]
        @today = dashboard_data[:present]
        @a_day_later = dashboard_data[:future]
        @now = Time.zone.now
    
        @dashboards_data = {
            'inventory_dashboard_data' => @inventory_dashboard_data,
            'sold_out_dashboard_data' => @sold_out_dashboard_data,
            'a_day_ago' => @a_day_ago,
            'today' => @today,
            'a_day_later' => @a_day_later,
            'now' => @now
        }
    
        render json: @dashboards_data
      end
    
    end

Java

package com

import com
...

@Slf4j
@RestController
@RequestMapping("[생략]")
public class SlackBotApiController {

    @Autowired
    SlackApiService slackApiService;

    @PostMapping(value = "/dashboard", consumes = {MediaType.APPLICATION_FORM_URLENCODED_VALUE})
    public SlackApiResponse sendMessage(
            @ModelAttribute SlackApiRequest slackApiRequest
    ) {
        return slackApiService.getMessage(slackApiRequest);
    }

}

package com

import com
...

import java.util.Map;

public interface SlackApiService {

    DashboardsDto getDashboardData();

    SlackApiResponse getMessage(SlackApiRequest slackApiRequest);

    Map<String, String> getTextAndTitle(String inputText, DashboardsDto dto);


}

package com

import com
...

@Slf4j
@Transactional
@Service
public class SlackApiServiceImpl implements SlackApiService {

    // 루비 api
    private static final String HOST_URL = "http://localhost:3000/...[생략]";

    // 루비 api 조회
    @Override
    public DashboardsDto getDashboardData() {
        HttpURLConnection connection;
        ObjectMapper mapper = new ObjectMapper();

        try {
            URL url = new URL(HOST_URL);

            connection = (HttpURLConnection)url.openConnection();
            connection.setRequestMethod("GET");

            int statusCode = connection.getResponseCode();

            if (statusCode == HttpURLConnection.HTTP_OK) {
                BufferedReader br = new BufferedReader(new InputStreamReader(connection.getInputStream()));
                StringBuilder sb = new StringBuilder();
                String line = "";
                Map<String, Object> data = new HashMap<>();
                while ((line = br.readLine()) != null) {
                    sb.append(line);
                }
                return mapper.readValue(sb.toString(), DashboardsDto.class);
            } else if (statusCode == HttpURLConnection.HTTP_NOT_FOUND) {
                System.out.println(statusCode + " Error");
            } else {
            }
        } catch (IOException e) {
            e.printStackTrace();
        }

        return null;
    }

    // 슬랙에 전송될 attachments 추가해서 controller에 반환
    @Override
    public SlackApiResponse getMessage(SlackApiRequest slackApiRequest) {
        SlackApiResponse slackApiResponse = new SlackApiResponse();

        if (slackApiRequest.getToken() == null) {
            slackApiResponse.setText("INVALID TOKEN");
            return slackApiResponse;
        }

        try {
            Map<String, String> textAndTitle = getTextAndTitle(slackApiRequest.getText(), getDashboardData());

            ArrayList<Map> fieldArrayList = new ArrayList<Map>();
            Map<String, Object> field = new HashMap<>();
            field.put("title", textAndTitle.get("title"));
            field.put("value", textAndTitle.get("text"));
            fieldArrayList.add(field);

            ArrayList<Map> attachmentArrayList = new ArrayList<Map>();
            Map<String, Object> attachment = new HashMap<>();
            attachment.put("fields", fieldArrayList.stream().collect(Collectors.toList()));
            attachment.put("color", "#aed1ff");
            attachment.put("title", "어드민 메인 대시보드");
            attachment.put("title_link", "https://admin.onul-hoi.com/admin");
            attachmentArrayList.add(attachment);

            slackApiResponse.setResponse_type("in_channel");   // 채널 전체 공유
            slackApiResponse.setText("어드민 메인 대시보드 데이터");
            slackApiResponse.setAttachments(attachmentArrayList);

        } catch (Exception e) {
            e.printStackTrace();
        }

        return slackApiResponse;
    }

    // 슬랙으로 전송될 메시지 텍스트와 타이틀 설정
    public Map<String, String> getTextAndTitle(String inputText, DashboardsDto dto) {
        String title="", text = "";
        DecimalFormat decimalFormat = new DecimalFormat("###,###");
        Map<String, String> textAndTitle = new HashMap<String, String>();

        if(inputText.contains("매출")) {
            InventoryDashboardDataDto.CurrentMonthSalesAmountBean currentMonthSalesAmount = dto.getInventoryDashboardDataDto().getCurrentMonthSalesAmountBean();
            LocalTime cacheDate = ZonedDateTime.parse(currentMonthSalesAmount.getCacheDate()).toLocalTime();

            title = "이번달 매출";
            text = "데이터 집계:...[생략]";
        } else if(inputText.contains("배송")) {
            DashboardsDto.DayBean today = dto.getTodayDto();
            String lastDeliveredTime = today.getLastDeliveredTime() == null ? "-" : today.getLastDeliveredTime().toString();

            title = today.getDateStr() + " 배송현황";
            text = "배송건수:...[생략]";
        } else if(inputText.contains("품절")) {
            InventoryDashboardDataInInventoryDashboardDataDto inventoryData = dto.getInventoryDashboardDataDto().getInventoryDashboardDataInInventoryDashboardDataDto();
            InventoryDashboardDataInInventoryDashboardDataDto.currentDataAndLastWeekDataBean currentInventoryData = inventoryData.getCurrentDataDto();
            SoldOutDashboardDataDto soldOutDashboardData = dto.getSoldOutDashboardDataDto();
            String totalLossRate = soldOutDashboardData.getTotalLossRate() == null ? "0.0" : dto.getSoldOutDashboardDataDto().getTotalLossRate().toString();
            LocalDate targetDate = LocalDate.parse(soldOutDashboardData.getTargetDate());

            title = "품절현황";
            text = "발주 날짜...[생략]"
        } else {
            text = "/dashboard 명령어와 함께 [매출, 배송, 품절] 중 하나를 입력해주세요.";
        }

        textAndTitle.put("title", title);
        textAndTitle.put("text", text);

        return textAndTitle;
    }

}

마치며

1년 전 작성해둔 글이라서 유효하지 않은 부분이 있을 수 있고, 코드도 ~~더럽지만...~~ 기록이라고 생각하니 뿌듯하다. 앞으로 더 발전된 모습을 기록으로 남길 수 있도록 노력해야지 (ง •̀_•́)ง✧

참고자료

슬랙 봇 관련 리서치 자료

Slack Block Kit 활용

슬랙봇, 어디까지 만들어봤니?

Enabling interactivity with Slash Commands

Reference: Secondary message attachments

Formatting text for app surfaces

타입스크립트로 슬랙 앱(봇) 만들기 - 기초편

Google Apps Script를 활용한 Slack Bot 만들기
기타 리서치 자료

페이로드(payload)란? 개념 설명

rbenv 설치

rbenv/rbenv

걍은서

끄적끄적

다음 포스트