Bolt.js⚡ + Firebase🔥기술 투고의 지표를 잘 집계할 수 있는 Slack Bot을 만들었습니다.

이 글은 Slack Advent Calendar 2020 16일째 되는 글이다.
Slack에 적용되는 프레임의 Bolt입니다.js와Firebase를 사용하여 자신이 출력한 지표를 합산하여 좋은 느낌으로 출력을 포맷할 수 있는 Bot를 만들어 봤습니다. 그래서 소개해 드리겠습니다.

만든 물건

자신의 기술로 투고한 계정명을 입력하면 이런 느낌에서 지표를 합산해 반납하는 슬랙봇.

기능은 다음과 같습니다.

/report 명령을 입력하면 입력 모드가 열립니다.

트위터, Qita, Zenn, note의 계정 이름 + 주석

을 모드로 입력할 수 있다.

발언 버튼을 누른 후 입력 내용에 따라 각 지표를 통계하여 결과를 채널에 투고

대응하는 서비스는 이쪽입니다.
서비스
지표
Twitter
트위터 수, 팔로워 수, 팔로워 수
Qiita
기사 수, LGTM 수, 관심 분야 수
Zenn
기사 수, Like 수, 팔로워 수
note
기사 수, Like 수, 팔로워 수
나는 어떻게 쉽게 입력하고 어떻게 자신의 진전을 쉽게 파악하는지에 착안했다.
입력에 관해서, 모든 슬랙 로그아웃은 마지막으로 입력한 내용을 Firestore에 저장하고, 첫 번째 회 이후에는 입력 표시줄의 초기 값으로 입력합니다.
진전 파악에 관해서는 초회 이후에 지난번 집행시의 차이를 나타낼 것이다.따라서 일주일에 한 번씩 지령을 내리면 지난주와 가볍게 비교할 수 있다.

프로비저닝

어떤 구성인지 대충 소개할게요.
Bolt.Firebase for Cloud Function으로 js를 이동하여 Slack과 대화합니다.
그런 다음 양식의 입력 내용, 지표 데이터를 Firestore에 저장합니다.

지표 통계 섹션은 서비스별 API 포인트를 직접 적어 사용했다.
Zenn API 클라이언트
functions/src/lib/zennClient.ts

import {
  ZennArticle,
  Follower,
  ZennMyArticlesResponse,
  ZennMyFollowersResponse,
} from "../types/zennTypes";
import axios from "axios";
import { ApiClient, ZennIndex } from "../types/types";

export class ZennClient implements ApiClient {
  private readonly BASE_API_URL = "https://api.zenn.dev";

  constructor(private userName: string) {
    axios.defaults.baseURL = this.BASE_API_URL;
  }

  async fetchIndex(): Promise<ZennIndex> {
    const articles = await this.fetchMyAllArticles();
    const followers = await this.fetchMyFollowers();

    return {
      postCount: articles.length,
      likeCount: this.tallyUpLikeCount(articles),
      followerCount: followers.length,
    };
  }

  private async fetchMyAllArticles(): Promise<ZennArticle[]> {
    const response = await axios.get<ZennMyArticlesResponse>(
      `/users/${this.userName}/articles`
    );
    return response.data.articles ?? [];
  }

  private async fetchMyFollowers(): Promise<Follower[]> {
    let followers = [] as Follower[];
    let hasNextPage = true;

    try {
      for (let page = 1; hasNextPage; page++) {
        const response = await axios.get<ZennMyFollowersResponse>(
          `/users/${this.userName}/followers?page=${page}`
        );
        hasNextPage = !!response.data.next_page;
        followers = [...followers, ...response.data.users];
      }
    } catch (e) {
      console.error(e);
    }

    return followers;
  }

  private tallyUpLikeCount(articles: ZennArticle[]): number {
    return articles.reduce<number>((count, article) => {
      return count + article.liked_count;
    }, 0);
  }
}
```　

Qiita용 API 클라이언트
functions/src/lib/qiitaClient.ts

import * as functions from "firebase-functions";
import axios from "axios";
import { QiitaItem, QiitaUser } from "../types/qiitaTypes";
import { ApiClient, QiitaIndex } from "../types/types";

export class QiitaClient implements ApiClient {
  private readonly BASE_URL = "https://qiita.com/api/v2";
  private readonly PER_PAGE = 100;

  constructor(private userName: string) {
    axios.defaults.baseURL = this.BASE_URL;
    axios.defaults.headers["Authorization"] = `Bearer ${
      functions.config().token.qiita
    }`;
  }

  async fetchIndex(): Promise<QiitaIndex> {
    const user = await this.fetchUser();
    const items = await this.fetchAllItems(user);
    const lgtmCount = this.tallyUpLgtmCount(items);

    return {
      postCount: user.items_count ?? 0,
      lgtmCount: lgtmCount,
      followerCount: user.followers_count ?? 0,
    };
  }

  private async fetchUser() {
    const response = await axios.get<QiitaUser>(`/users/${this.userName}`);
    return response.data;
  }

  private async fetchAllItems(user: QiitaUser | null) {
    if (!user) {
      return [];
    }
    // 最大ページ数
    const maxPage = Math.ceil(user.items_count / this.PER_PAGE);
    // 投稿一覧の取得
    let allItems = [] as QiitaItem[];
    await Promise.all(
      [...Array(maxPage).keys()].map(async (i) => {
        const items = await this.fetchItems(i + 1, this.PER_PAGE);
        allItems = [...allItems, ...items];
      })
    );
    return allItems;
  }

  private async fetchItems(page: number, perPage: number) {
    const response = await axios.get<QiitaItem[]>(
      `/items?page=${page}&per_page=${perPage}&query=user:${this.userName}`
    );
    return response.data;
  }

  private tallyUpLgtmCount(items: QiitaItem[]) {
    const lgtmCount = items.reduce(
      (result, item) => result + item.likes_count,
      0
    );
    return lgtmCount;
  }
}

te API 클라이언트 없음
functions/src/lib/noteClient.ts

import axios from "axios";
import {
  NoteContent,
  NoteContentsResponse,
  NoteUserResponse,
} from "../types/noteTypes";
import { ApiClient, NoteIndex } from "../types/types";

export class NoteClient implements ApiClient {
  private readonly BASE_URL = "https://note.com/api/v2";

  constructor(private userName: string) {
    axios.defaults.baseURL = this.BASE_URL;
  }

  async fetchIndex(): Promise<NoteIndex> {
    const user = await this.fetchUser();
    const contents = await this.fetchAllContent();

    return {
      postCount: user.noteCount ?? 0,
      likeCount: this.tallyUpLikeCount(contents),
      followerCount: user.followerCount ?? 0,
    };
  }

  private async fetchUser() {
    const response = await axios.get<NoteUserResponse>(
      `/creators/${this.userName}`
    );
    return response.data.data;
  }

  private async fetchAllContent() {
    let contents = [] as NoteContent[];
    let isLastPage = false;

    try {
      for (let page = 1; !isLastPage; page++) {
        const responseData = await this.fetchContents(page);
        isLastPage = responseData.isLastPage;
        contents = [...contents, ...responseData.contents];
      }
    } catch (e) {
      console.log(e);
    }

    return contents;
  }

  private async fetchContents(page: number) {
    const response = await axios.get<NoteContentsResponse>(
      `/creators/${this.userName}/contents?kind=note&page=${page}`
    );
    return response.data.data;
  }

  private tallyUpLikeCount(contents: NoteContent[]) {
    const likeCount = contents.reduce(
      (result, content) => result + content.likeCount,
      0
    );
    return likeCount;
  }
}

Twitter API 클라이언트
functions/src/lib/twitterClient.ts

import axios from "axios";
import { PublicMetrics, UsersResponse } from "../types/twitterTypes";
import * as functions from "firebase-functions";
import { ApiClient, TwitterIndex } from "../types/types";

export class TwitterClient implements ApiClient {
  private readonly BASE_URL = "https://api.twitter.com/2";

  constructor(private userName: string) {
    axios.defaults.baseURL = this.BASE_URL;
    axios.defaults.headers["Authorization"] = `Bearer ${
      functions.config().token.twitter
    }`;
  }

  async fetchIndex(): Promise<TwitterIndex> {
    const metrics = await this.fetchUserMetrics();

    return {
      tweetCount: metrics.tweet_count,
      followersCount: metrics.followers_count,
      followingCount: metrics.following_count,
    };
  }

  private async fetchUserMetrics(): Promise<PublicMetrics> {
    const response = await axios.get<UsersResponse>(
      `/users/by/username/${this.userName}?user.fields=public_metrics`
    );
    return response.data.data.public_metrics;
  }
}

젠, 노트가 공식 API를 공개하지 않았기 때문에 인터넷 정보에서 경로, 응답을 보고 구축한다.각 서비스의 향후 개정은 이용할 수 없을 가능성이 있다.
코드는 모두 창고에서 공개된다.
API 클라이언트 상세 정보, Bolt.js의 설치 등은 아래를 보십시오.
https://github.com/kawamataryo/blog-index

막힌 곳을 실장하다

이번 슬랙봇 작업에서 반한 점이 있는데 제가 소개해 드릴게요.

FaaS에서 볼트.질문

실제로 클라우드 펀션 포 파이어베이스와 AWS 람바다 등 파아스에서 볼트.js의 슬랙봇 구성에 따라 다음과 같은 제약이 있어 조금 공을 들여야 한다.

(1) Slack에서 HTTP 요청을 받으면 3초 안에 HTTP 응답

을 되돌려야 합니다.

(2) HTTP 요청을 터치한FaaS에 시작하면 처리 도중에 응답을 되돌려주면 후속 처리의 실행이 보장되지 않습니다

(1)의 3초 안에 응답 규칙의 제한이 있기 때문에 볼트입니다.js에서 함수 ack() 를 제공합니다.ack()는 200OK의 HTTP 응답을 반환하는 함수로, 이 함수를 실행하면 비동기적으로 후속 처리를 할 수 있습니다.

app.action('approve_button', async ({ ack, say }) => {
  // この時点でレスポンスは返される
  await ack();
  // 以降は非同期で処理される。3秒以内応答の制約はない。
  await superHeavyTask()
});

단, (2)와 같이FaaS는 사용할 수 없습니다.
집행ack()하는 순간 그 환경의 처리가 완성된 것으로 여겨져 후속 처리의 집행을 보장할 수 없기 때문이다.
이 볼트에 대처하기 위해서js 측에서도 ack()의 실행을 처리 완료로 지연시키는 옵션processBeforeResponse이 있지만 이것을 설정하더라도 (1) 3초 이내의 규칙을 지켜야 한다.
이번 Bot은 모드로 수신된 값을 이용하여 각 서비스에 접근한 API를 통해 결과를 집계하기 때문에 도저히 3초 이내의 응답 규칙을 지키지 못해 시간 초과 오류가 발생했습니다.
동기화 처리를 하면 시간 초과 오류가 발생하지만 Function 함수에서 비동기적으로 실행하면FaaS의 디자인에서 실행을 보장할 수 없습니다. 그러면 어떻게 합니까?🤔
Bolt.js Pythhon 버전 bolt-python 에서 이 문제를 해결할 수 있을 것 같습니다.자세한 내용은 아래를 보십시오.
FaaS에서 수행하기 위한 Bolt for Python의 과제 - Qita

해결책

이번에는Queue성으로Firestore를 사용하기 때문에Function 단위로 모드의 응답과 합계 처리의 실행을 분리하는 일로 상술한 문제를 회피하였다.
처리의 실행 절차는 다음과 같다.
사선 명령 실행에서 표시 모드로

슬라이딩 명령 실행

Firestore에서 사용자의 과거 발언을 수행하는 데이터를 얻기

과거 투고가 있으면 표의 초기값

으로 설정합니다.

디스플레이 모드

모드에서 지표 통계, 통로로 투고

모드의 내용 입력/발송

Firestore에 데이터 저장

200 응답 반환 및 닫기 모드

onCreate의 갈고리로 다른 함수 시작하기

합계 각 지표

발표 결과

특히 중요한 것은 모드의 발송부터 시작되는 처리입니다. 여기서Firestore의 데이터 저장->onCreate의 서로 다른 함수로 시작하는 방법으로 Function 단위로 분리 처리하여 상기 제약을 피합니다.
이렇게 하면 지표 통계가 얼마나 걸리든 상관없이 모드에 대한 응답이 완성되었기 때문에 시간을 초과하지 않는다.

끝맺다

이상 "Bolt.js"⚡ + Firebase🔥”.
참가한 커뮤니티엔지니어와 인생의 슬랙도 이용이 가능해 기쁘다.
필요하시면 공개 앱을 사용해 보고 싶습니다.반응을 얻을 수 있다면 나는 매우 기쁠 것이다.

참고 자료

Slack | Bolt for JavaScript

FaaS에서 수행하기 위한 Bolt for Python의 과제 - Qita