藉由每次的提交，我們可以使用Github Action來自動跑測試，不過在跑完測試時，不管是成功還是失敗，我們希望快速收到訊息，除了可以透過信件的方式知道外，我們還可以整合到Slack裡。

Init

首先我們可以先寫點測試，讓我們方便去測試：

1
2
3
4
5
6
7
8
9
10
testWidgets('Test MyHomePage', (WidgetTester tester) async {
  F.appFlavor = Flavor.development;

  await runner.main();
  await tester.pumpAndSettle();

  expect(find.text('xxx Development'), findsOneWidget);
  expect(find.text('Hello xxx Production'), findsNothing);
  expect(find.text('Hello xxx Development'), findsOneWidget);
});

接著我們可以在根目錄新增.github資料夾，內部一樣再次新增workflows的資料夾，完成後我們在資料夾內部新增github_action.yaml的檔案。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
name: 'xxx CI/CD'

on:
  push:
    branches:
      - develop
jobs:
  test:
    name: Run Flutter Tests
    strategy:
      matrix:
        os: [ubuntu-latest]
        dart: [3.24.1]
    runs-on: ${{ matrix.os }}
    steps:
      - uses: actions/checkout@v4
      - uses: subosito/flutter-action@v2
        with:
          flutter-version: ${{ matrix.dart }}
          channel: 'stable'

      - name: Get dependencies
        run: flutter pub get
        working-directory: ./xxx

      - name: Run tests for push to develop
        if: github.event_name == 'push'
        run: flutter test --flavor development
        working-directory: ./xxx

透過上述方法，可以上傳到Github Action並進行測試，記得把xxx替換成你專案的名稱。

Slack

完成後我們可以正式處理有關Slack的通知，過去我們常使用WEBHOOK去處理，但後續官方其實不太建議這種做法，比較推薦是建立一個Slack App來處理相關的操作。

首先我們進入以下網址，點選From scratch來新增，完成後會進入到Basic Information頁面，往下滑去修改Display Information，這會是App的名稱，也是進行通知的bot。

填寫完成後進行儲存，接著左邊側欄選擇OAuth & Permissions，此時他們我需要把App安裝到Slack裡面，完成後就會出現Token，後續我們可以把Token新增的Github Secrets。

在那之前我們往下滑，找到Scopes，針對Bot Token Scopes點選新增，並且加入chat:write的權限，這樣才能轉發訊息。

接著我們來到Slack，如果有進行上面步驟，你可以在側欄的Apps找到你剛才建立的Apps，接著我們選擇想要的Channel，透過/invite @app_name的方式，把App加入到頻道裡，另外我們可以點開channel設定，對channel點右鍵，選擇View channel details，在最下面可以看到Channel ID，記得這個待會會用到。

接著我們把剛剛在OAuth Tokens裡的Bot User OAuth Token新增至Github內，我們先到repository進行設定，找到你的專案點選Settings -> Secrets and variables -> Actions，接著點選New repository secret並且新增SLACK_BOT_TOKEN，內容就是剛剛複製的Token，另外還要新增SLACK_BOT_CHANNEL，這樣比較好管理，Apps發送到哪個頻道，裡面內容要填寫Channel ID。

完成之後，我們回到github_action.yaml，接著繼續填寫設定，其中我們可以用if來去控管成功還是失敗：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
steps:
  ...

  # Slack Notify
  - name: Slack Notify Success
    if: success()
    id: slack_notify_success
    uses: slackapi/slack-github-action@v1.27.0
    with:
      channel-id: ${{ secrets.SLACK_BOT_CHANNEL }}
      payload: |
        {
          "text": "「${{ github.repository }}」 ${{ github.ref_name }} 有新的版本！",
          "blocks": [
            {
              "type": "section",
              "text": {
                "type": "mrkdwn",
                "text": "Flutter 測試已完成，並新增至 ${{ github.ref_name }} 分支。"
              }
            },
            {
              "type": "section",
              "text": {
                "type": "mrkdwn",
                "text": "相關更新內容：${{ github.event.head_commit.message }}"
              }
            }
          ]
        }
    env:
      SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
      SLACK_BOT_SCOPES: 'chat:write'

  - name: Slack Notify Failure
    if: failure()
    id: slack_notify_failure
    uses: slackapi/slack-github-action@v1.27.0
    with:
      channel-id: ${{ secrets.SLACK_BOT_CHANNEL }}
      payload: |
        {
          "text": "「${{ github.repository }}」 ${{ github.ref_name }} 上傳有發生錯誤",
          "blocks": [
            {
              "type": "section",
              "text": {
                "type": "mrkdwn",
                "text": "Flutter 測試發生錯誤，請檢查相關錯誤訊息。"
              }
            },
            {
              "type": "section",
              "text": {
                "type": "mrkdwn",
                "text": "相關更新內容：${{ github.event.head_commit.message }}"
              }
            }
          ]
        }
    env:
      SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
      SLACK_BOT_SCOPES: 'chat:write'

上述的secrets就是我們稍早所新增的TOKEN內容，其餘內文可以包含在payload裡面，如果你只有單一訊息，可以把payload，單純使用slack-message，例如：

1
2
3
4
5
6
7
8
9
- name: Post to a Slack channel
  id: slack
  uses: slackapi/slack-github-action@v1.27.0
  with:
    channel-id: ${{ secrets.SLACK_BOT_CHANNEL }}
    # For posting a simple plain text message
    slack-message: "Flutter 測試已完成，並新增至 ${{ github.ref_name }} 分支。"
  env:
    SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}

完成之後我們可以嘗試推送到develop的分支，接著進入到Github Action去查看運行的狀況：

等他跑完就能在Slack收到推送訊息：

因為之前太常用WebHook，他的做法也比較簡單，單純只是設定Token就能使用，不過這樣就無法像Apps一樣透過權限去細部管理，相對的也會比較安全。

以上就是這次教學，我們下次見！

感謝閱讀，See u~