Een screenshot-pipeline bouwen in je CI/CD: Stapsgewijze handleiding

Waarom screenshots in je CI/CD-pipeline thuishoren

App Store-screenshots worden meestal behandeld als een designtaak, iets dat een keer voor de lancering gebeurt en daarna pijnlijk om de paar maanden wordt bijgewerkt. Deze aanpak faalt zodra je team frequent uitbrengt.

De oplossing is screenshots behandelen als elk ander build-artefact. Ze moeten automatisch worden gegenereerd wanneer je UI verandert, samen met je code worden geversioneerd en naar de stores worden gedeployed.

Architectuuroverzicht

1. Template-ontwerp — Je designteam maakt templates in de visuele editor van Screenshots.live.
2. Configuratie — Een YAML-bestand definieert templates, talen en tekstvariabelen.
3. Rendering — Je pipeline roept de Screenshots.live API aan die een ZIP retourneert.
4. Naverwerking — De pipeline extraheert de ZIP en organiseert bestanden.
5. Upload — Fastlane levert de screenshots automatisch af.

Configuratiebestand instellen

# .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: nl
    variables:
      headline: "Volg je voortgang"

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

# 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

Talen beheren in de pipeline

Wanneer je een nieuwe taal toevoegt, voeg je een item toe aan config.yml. De volgende pipelinerun genereert screenshots voor elk template in de nieuwe taal.

Caching- en optimalisatietips

Inhoudsgebaseerde cachesleutels. De workflow gebruikt hashFiles('.screenshots/config.yml') als cachesleutel.

Selectieve rendering. Als slechts een taal is gewijzigd, splits renders per taal.

Parallelle rendering:

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

Renders monitoren met webhooks

Screenshots.live ondersteunt webhooks die je systemen notificeren wanneer renders voltooid zijn of falen.

Alles samenbrengen

1. Een designer maakt of update een template.
2. Een developer update de configuratie en pusht naar main.
3. GitHub Actions detecteert de wijziging en start de workflow.
4. Het renderscript leest de configuratie, roept de API aan en downloadt screenshots.
5. Fastlane uploadt de screenshots naar beide stores.
6. Beide storevermeldingen worden binnen minuten bijgewerkt.