Xay dung pipeline anh chup man hinh trong CI/CD: Huong dan tung buoc

Tai sao anh chup man hinh thuoc ve pipeline CI/CD cua ban

Anh chup man hinh App Store thuong duoc coi la nhiem vu thiet ke, dieu gi do xay ra mot lan truoc khi ra mat va sau do duoc cap nhat mot cach kho khan moi vai thang. Cach tiep can nay that bai ngay khi team ban phat hanh thuong xuyen.

Giai phap la doi xu voi anh chup nhu bat ky artefact build nao khac. Chung nen duoc tao tu dong khi UI thay doi, duoc phien ban cung voi code va duoc deploy len cac cua hang nhu mot phan cua quy trinh release.

Tong quan kien truc

1. Thiet ke template — Team thiet ke tao template trong editor truc quan cua Screenshots.live.
2. Cau hinh — Mot file YAML trong repository dinh nghia template nao can render, ngon ngu nao can tao va bien van ban nao can chen.
3. Rendering — Pipeline CI/CD goi API Screenshots.live, render tat ca cac bien the va tra ve file ZIP.
4. Hau xu ly — Pipeline giai nen ZIP va to chuc file theo cau truc thu muc mong doi.
5. Upload — Fastlane gui anh chup den App Store Connect va Google Play Console tu dong.

Thiet lap file cau hinh

# .screenshots/config.yml

api_key: ${SCREENSHOTS_API_KEY}
base_url: https://api.screenshots.live/v1

templates:
  - id: tpl_hero_screen
    name: "Hero Screenshot"
    devices:
      - iphone67
      - ipad129
      - android_phone
      - android_tablet

locales:
  - code: en
    variables:
      headline: "Track Your Progress"
  - code: vi
    variables:
      headline: "Theo doi tien trinh cua ban"

Workflow GitHub Actions

name: Generate App Store Screenshots

on:
  push:
    branches: [main]
    paths:
      - '.screenshots/**'
  workflow_dispatch:

env:
  SCREENSHOTS_API_KEY: ${{ secrets.SCREENSHOTS_API_KEY }}
  SCREENSHOTS_OUTPUT_DIR: ./fastlane/screenshots

jobs:
  generate-screenshots:
    runs-on: ubuntu-latest
    timeout-minutes: 30
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - uses: actions/cache@v4
        with:
          path: .screenshots/cache
          key: screenshots-${{ hashFiles('.screenshots/config.yml') }}
      - run: npm install js-yaml node-fetch@2 adm-zip
      - run: node .screenshots/generate.js
      - uses: actions/upload-artifact@v4
        with:
          name: app-store-screenshots
          path: ${{ env.SCREENSHOTS_OUTPUT_DIR }}

  upload-ios:
    needs: generate-screenshots
    runs-on: macos-latest
    if: github.ref == 'refs/heads/main'
    steps:
      - uses: actions/checkout@v4
      - uses: actions/download-artifact@v4
        with:
          name: app-store-screenshots
          path: fastlane/screenshots
      - run: gem install fastlane
      - run: fastlane ios upload_screenshots

  upload-android:
    needs: generate-screenshots
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'
    steps:
      - uses: actions/checkout@v4
      - uses: actions/download-artifact@v4
        with:
          name: app-store-screenshots
          path: fastlane/screenshots
      - run: gem install fastlane
      - run: fastlane android upload_screenshots

Tich hop Fastlane

# fastlane/Fastfile

platform :ios do
  lane :upload_screenshots do
    deliver(
      skip_binary_upload: true,
      skip_metadata: true,
      screenshots_path: "./fastlane/screenshots/ios",
      overwrite_screenshots: true,
    )
  end
end

platform :android do
  lane :upload_screenshots do
    upload_to_play_store(
      skip_upload_apk: true,
      skip_upload_aab: true,
      skip_upload_metadata: true,
      images_path: "./fastlane/screenshots/android",
    )
  end
end

Xu ly ngon ngu trong pipeline

Khi ban them ngon ngu moi, ban them mot muc vao config.yml. Lan chay pipeline tiep theo tao anh chup cho moi template bang ngon ngu moi. Khong can thiet ke them.

Meo cache va toi uu hoa

Khoa cache dua tren noi dung. Workflow su dung hashFiles('.screenshots/config.yml') lam khoa cache.

Rendering chon loc. Neu chi mot ngon ngu thay doi, hay chia render theo ngon ngu.

Rendering song song. API xu ly cac yeu cau dong thoi:

const renderPromises = config.templates.map(template =>
  renderTemplate(template, config, apiKey)
);
await Promise.all(renderPromises);

Giam sat render bang webhook

Screenshots.live ho tro webhook thong bao he thong cua ban khi render hoan thanh hoac that bai.

Ket hop tat ca

1. Designer tao hoac cap nhat template trong editor truc quan.
2. Developer cap nhat cau hinh va push len main.
3. GitHub Actions phat hien thay doi va kich hoat workflow.
4. Script rendering doc cau hinh, goi API va tai anh chup xuong.
5. Fastlane tai anh chup len ca hai cua hang.
6. Ca hai danh sach cua hang duoc cap nhat trong vai phut.