Costruire una pipeline di screenshot nel CI/CD: Guida passo dopo passo

Perche gli screenshot appartengono alla tua pipeline CI/CD

Gli screenshot dell'App Store vengono solitamente trattati come un compito di design, qualcosa che accade una volta prima del lancio e poi viene dolorosamente aggiornato ogni pochi mesi. Questo approccio si rompe nel momento in cui il tuo team rilascia frequentemente.

La soluzione e trattare gli screenshot come qualsiasi altro artefatto di build. Devono essere generati automaticamente quando la tua UI cambia, versionati insieme al codice e deployati negli store come parte del processo di rilascio.

Panoramica dell'architettura

1. Design del template — Il team di design crea template nell'editor visuale di Screenshots.live.
2. Configurazione — Un file YAML nel repository definisce template, lingue e variabili di testo.
3. Rendering — La pipeline CI/CD chiama l'API di Screenshots.live che restituisce un archivio ZIP.
4. Post-elaborazione — La pipeline estrae lo ZIP e organizza i file.
5. Upload — Fastlane consegna gli screenshot ad App Store Connect e Google Play Console.

Configurare il file di configurazione

# .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: it
    variables:
      headline: "Monitora i tuoi progressi"

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

Integrazione 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

Gestione delle lingue nella pipeline

Quando aggiungi una nuova lingua, aggiungi una voce in config.yml. La prossima esecuzione della pipeline genera screenshot per ogni template nella nuova lingua. Nessun lavoro di design necessario.

Suggerimenti per cache e ottimizzazione

Chiavi cache basate sul contenuto. Il workflow usa hashFiles('.screenshots/config.yml') come chiave cache.

Rendering selettivo. Se e cambiata solo una lingua, considera di dividere i render per lingua.

Rendering parallelo. L'API gestisce richieste simultanee:

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

Monitoraggio dei render con webhook

Screenshots.live supporta webhook che notificano i tuoi sistemi quando i render vengono completati o falliscono.

Mettere tutto insieme

1. Un designer crea o aggiorna un template nell'editor visuale.
2. Uno sviluppatore aggiorna la configurazione e fa push su main.
3. GitHub Actions rileva il cambiamento e avvia il workflow.
4. Lo script di rendering legge la configurazione, chiama l'API e scarica gli screenshot.
5. Fastlane carica gli screenshot in entrambi gli store.
6. Entrambe le schede dello store vengono aggiornate in pochi minuti.