Bygge en screenshot-pipeline i din CI/CD: Trinn-for-trinn-guide

Hvorfor skjermbilder horer hjemme i din CI/CD-pipeline

App Store-skjermbilder behandles vanligvis som en designoppgave, noe som skjer en gang for lansering og deretter smertefullt oppdateres hvert par maneder. Denne tilnaermingen bryter sammen nar teamet ditt leverer ofte.

Losningen er a behandle skjermbilder som ethvert annet build-artefakt. De bor genereres automatisk nar UI-en endres, versjoneres sammen med koden og deployes til butikkene.

Arkitekturoversikt

1. Maldesign — Designteamet lager maler i Screenshots.live sin visuelle editor.
2. Konfigurasjon — En YAML-fil definerer maler, sprak og tekstvariabler.
3. Rendering — Pipelinen kaller Screenshots.live API som returnerer et ZIP-arkiv.
4. Etterbehandling — Pipelinen pakker ut ZIP og organiserer filer.
5. Opplasting — Fastlane leverer skjermbildene automatisk.

Sette opp konfigurasjonsfilen

# .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: nb
    variables:
      headline: "Folg fremgangen din"

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-integrasjon

# 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

Handtere sprak i pipelinen

Nar du legger til et nytt sprak, legger du til en oppforing i config.yml. Neste pipelinekjoring genererer skjermbilder for hver mal pa det nye spraket.

Cache- og optimaliseringstips

Innholdsbaserte cachenokler. Workflowen bruker hashFiles('.screenshots/config.yml') som cachenokkel.

Selektiv rendering. Hvis bare ett sprak endret seg, del opp renders per sprak.

Parallell rendering:

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

Overvake renders med webhooks

Screenshots.live stotter webhooks som varsler systemene dine nar renders fullforers eller feiler.

Sette alt sammen

1. En designer lager eller oppdaterer en mal.
2. En utvikler oppdaterer konfigurasjonen og pusher til main.
3. GitHub Actions oppdager endringen og starter workflowen.
4. Renderingsskriptet leser konfigurasjonen, kaller API-et og laster ned skjermbilder.
5. Fastlane laster opp skjermbildene til begge butikkene.
6. Begge butikksidene oppdateres innen minutter.