Bygga en screenshot-pipeline i din CI/CD: Steg-for-steg-guide

Varfor skarmbilder hor hemma i din CI/CD-pipeline

App Store-skarmbilder behandlas vanligtvis som en designuppgift, nagot som hander en gang fore lansering och sedan smartsamt uppdateras var nagra manad. Detta tillvagagangssatt bryter samman nar ditt team levererar ofta.

Losningen ar att behandla skarmbilder som vilken annan build-artefakt som helst. De ska genereras automatiskt nar ditt UI andras, versioneras tillsammans med din kod och deployas till butikerna.

Arkitekturoversikt

1. Malldesign — Ditt designteam skapar mallar i Screenshots.live visuella editor.
2. Konfiguration — En YAML-fil definierar mallar, sprak och textvariabler.
3. Rendering — Din pipeline anropar Screenshots.live API som returnerar ett ZIP-arkiv.
4. Efterbehandling — Pipelinen extraherar ZIP och organiserar filer.
5. Uppladdning — Fastlane levererar skarmbilderna automatiskt.

Konfigurera filen

# .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: sv
    variables:
      headline: "Folj dina framsteg"

GitHub Actions Workflow

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

Fastlane-integration

# 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

Hantera sprak i pipelinen

Nar du lagger till ett nytt sprak, lagger du till en post i config.yml. Nasta pipelinekorning genererar skarmbilder for varje mall pa det nya spraket.

Cachning och optimeringstips

Innehallsbaserade cachenycklar. Workflowet anvander hashFiles('.screenshots/config.yml') som cachenyckel.

Selektiv rendering. Om bara ett sprak andrades, dela upp renders per sprak.

Parallell rendering:

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

Overvaka renders med webhooks

Screenshots.live stodjer webhooks som meddelar dina system nar renders slutfors eller misslyckas.

Satta ihop allt

1. En designer skapar eller uppdaterar en mall.
2. En utvecklare uppdaterar konfigurationen och pushar till main.
3. GitHub Actions upptacker andringen och startar workflowet.
4. Renderingsskriptet laser konfigurationen, anropar API:et och laddar ner skarmbilder.
5. Fastlane laddar upp skarmbilderna till bada butikerna.
6. Bada butikssidorna uppdateras inom minuter.