0
0
Lập trình
Flame Kris
Flame Krisbacodekiller

Xây Dựng Bot Xem Xét Mã Nguồn AI với GitHub Action và Slack

Đăng vào 6 tháng trước

• 10 phút đọc

Giới thiệu

Gần đây, nhiều đội ngũ phát triển thường gặp khó khăn trong việc xem xét mã nguồn do áp lực thời gian và phản hồi không nhất quán. Để giải quyết vấn đề này, tôi đã quyết định tạo ra một bot xem xét mã nguồn sử dụng trí tuệ nhân tạo (AI) giúp tự động hóa quy trình, cung cấp phản hồi nhanh chóng và nhất quán cho các pull request. Trong bài viết này, tôi sẽ hướng dẫn bạn cách xây dựng bot này bằng cách sử dụng GitHub Actions, Slack và các mô hình ngôn ngữ lớn (LLMs).

Những gì bạn sẽ học

  • Cách kích hoạt xem xét mã nguồn AI cho mỗi pull request.
  • Cách gửi kết quả xem xét đến Slack với các nút tương tác.
  • Cách kết nối GitHub, Slack và backend của bạn để tự động hóa liền mạch.
  • Cách sử dụng LLMs (như OpenAI) cho trí tuệ mã nguồn.

Cách hoạt động

Bot xem xét mã nguồn AI sẽ tự động thực hiện các bước sau:

  1. Kích hoạt khi có pull request mới.
  2. Chạy quy trình xem xét mã bằng AI.
  3. Gửi kết quả về Slack.

Công nghệ sử dụng

  • GitHub Actions: để tự động hóa quy trình.
  • Next.js: làm mã nguồn ví dụ.
  • Node.js/Express: cho backend tương tác với Slack.
  • Slack App: để gửi thông báo và thực hiện các hành động (hãy tạo một workspace thử nghiệm và 2 tài khoản để thử nghiệm).
  • Cloudflare Tunnel: dịch vụ miễn phí tạo URL tạm thời, bảo mật cho các dịch vụ chạy trên localhost.
  • OpenAI (hoặc bất kỳ LLM nào khác) cho trí tuệ trong xem xét mã nguồn.

Các yêu cầu cần có

Trước khi bắt đầu, bạn cần có:

  • Tài khoản GitHub.
  • Workspace Slack.
  • Node.js (v18+).
  • Mã thông báo truy cập cá nhân GitHub (với các quyền repo, pull_requests).
  • Mã thông báo bot Slack (với quyền chat:write, commands, interactivity).
  • Khóa API OpenAI (hoặc nhà cung cấp LLM khác).
  • (Tùy chọn) ngrok hoặc Cloudflare Tunnel để thử nghiệm cục bộ.

Cấu trúc dự án

Dưới đây là cấu trúc thư mục của dự án:

Copy
code-review-llm/
├── .github/
│   └── workflows/
│       └── code-review.yml         # Workflow GitHub Actions cho xem xét mã AI
├── src/
│   └── services/
│       ├── reviewRunner.js         # Script chính để chạy xem xét mã LLM
│       ├── llmService.js           # Tích hợp API LLM
│       ├── reviewService.js        # Logic xem xét
│       └── ...                     # Các tiện ích/dịch vụ khác
├── public/
│   └── vite.svg                    # Tài sản tĩnh
├── App.jsx, main.jsx, App.css      # Điểm vào frontend và kiểu dáng
├── package.json, README.md         # Metadata và tài liệu dự án
└── slack-backend/
    ├── index.js                    # Backend Express cho tương tác Slack
    ├── package.json                # Các phụ thuộc backend
    ├── .env                        # Biến môi trường backend (không được cam kết)
    └── README.md                   # Hướng dẫn thiết lập backend

Hướng dẫn từng bước

1. Thiết lập GitHub Action

  • Kích hoạt khi có pull request, thực hiện xem xét AI và gửi thông báo đến Slack.
  • Thêm OPENAI_API_KEYSLACK_BOT_TOKEN làm bí mật của kho lưu trữ.
Copy
name: Xem Xét Mã AI
on:
  pull_request:
    types: [opened, synchronize, reopened]
jobs:
  code-review:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      pull-requests: write
      actions: read
      issues: read
    steps:
      - name: Kiểm tra mã
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
          token: ${{ secrets.GITHUB_TOKEN }}
      - name: Thiết lập Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18'
          cache: 'npm'
      - name: Cài đặt phụ thuộc
        run: npm ci
      - name: Lấy sự khác biệt PR
        id: diff
        run: |
          git fetch origin ${{ github.event.pull_request.base.ref }}
          DIFF=$(git diff origin/${{ github.event.pull_request.base.ref }}...HEAD --unified=3)
          echo "diff<<EOF" >> $GITHUB_OUTPUT
          echo "$DIFF" >> $GITHUB_OUTPUT
          echo "EOF" >> $GITHUB_OUTPUT
      - name: Chạy Xem Xét Mã AI
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
          PR_NUMBER: ${{ github.event.pull_request.number }}
          REPO_OWNER: ${{ github.repository_owner }}
          REPO_NAME: ${{ github.event.repository.name }}
          PR_DIFF: ${{ steps.diff.outputs.diff }}
        run: node src/services/reviewRunner.js
      - name: Gửi tóm tắt xem xét đến Slack
        env:
          SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
        run: |
          SUMMARY=$(cat review-summary.txt 2>/dev/null || echo "Không tìm thấy tệp tóm tắt.")
          curl -X POST https://slack.com/api/chat.postMessage \
            -H "Authorization: Bearer $SLACK_BOT_TOKEN" \
            -H "Content-type: application/json" \
            --data "{\"channel\": \"test-bot\", \"text\": \"$SUMMARY\"}"
      - name: Gửi xem xét LLM đến Slack với các nút
        env:
          SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
        run: |
          curl -X POST https://slack.com/api/chat.postMessage \
            -H "Authorization: Bearer $SLACK_BOT_TOKEN" \
            -H "Content-type: application/json" \
            --data '{
              "channel": "test-bot",
              "text": "Xem xét mã cho PR #${{ github.event.pull_request.number }}: ${{ github.event.pull_request.title }}",
              "blocks": [
                {
                  "type": "section",
                  "text": {
                    "type": "mrkdwn",
                    "text": "*Yêu cầu Xem Xét Mã*\n*PR #${{ github.event.pull_request.number }}:* ${{ github.event.pull_request.title }}\n\n*Xem Xét LLM:*\nKết quả xem xét ở đây\n\nVui lòng xem xét và thực hiện hành động dưới đây:"
                  }
                },
                {
                  "type": "actions",
                  "elements": [
                    {
                      "type": "button",
                      "text": { "type": "plain_text", "text": "✅ Chấp Nhận" },
                      "value": "approve_${{ github.event.pull_request.number }}",
                      "action_id": "approve_action",
                      "style": "primary"
                    },
                    {
                      "type": "button",
                      "text": { "type": "plain_text", "text": "💬 Yêu Cầu Thay Đổi" },
                      "value": "comment_${{ github.event.pull_request.number }}",
                      "action_id": "comment_action",
                      "style": "danger"
                    }
                  ]
                }
              ]
            }'

2. Backend cho Tương Tác Slack

  • Xử lý các nhấp chuột vào nút và cập nhật các PR trên GitHub.
  • Sử dụng tài khoản bot GitHub dành riêng cho mã thông báo API.
Copy
app.post('/slack/interactive', async (req, res) => {
  const payload = JSON.parse(req.body.payload);
  const { actions, user, response_url } = payload;
  const action = actions[0];
  const prNumber = action.value.replace(/^(approve|comment)_/, '');
  if (action.action_id === 'approve_action') {
    // Phê duyệt PR qua API GitHub
});
  • Sử dụng Cloudflare Tunnel hoặc ngrok để thử nghiệm cục bộ.
Copy
npm install -g cloudflared
cloudflared tunnel --url http://localhost:3000
  • Cấu hình ứng dụng Slack với URL của tunnel để tương tác.

3. Tạo một nhánh mới và đẩy một commit

  • Mở một pull request để xem bot hoạt động và bạn sẽ nhận được kết quả như sau:

  • Bot sẽ gửi một tóm tắt đến Slack với các nút để chấp nhận hoặc yêu cầu thay đổi.

  • Nhấp vào "Chấp Nhận" hoặc "Yêu Cầu Thay Đổi" sẽ cập nhật PR tương ứng.

Các bước tiếp theo

  • Mở rộng các hành động Slack (ví dụ: bình luận tùy chỉnh, chỉ định người xem xét).
  • Tích hợp với các công cụ trò chuyện khác (Discord, Teams).

Kho lưu trữ

  • GitHub: code-review-llm

Kết luận

Bạn đã xây dựng một bot xem xét mã nguồn AI giúp tiết kiệm thời gian và tăng năng suất. Hãy thử tùy chỉnh nó cho đội ngũ của bạn và chia sẻ kết quả của bạn!

Bài viết này được xuất bản lần đầu trên TechByCuong - Nếu bạn thấy hướng dẫn này hữu ích, hãy chia sẻ với mạng lưới của bạn và để lại bình luận bên dưới! Chúc bạn lập trình vui vẻ! 🚀

Gợi ý câu hỏi phỏng vấn
Không có dữ liệu

Không có dữ liệu

Bài viết được đề xuất
Bài viết cùng tác giả

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào