Construire un pipeline de captures dans votre CI/CD : Guide etape par etape

Pourquoi les captures d'ecran appartiennent a votre pipeline CI/CD

Les captures d'ecran de l'App Store sont generalement traitees comme une tache de design, quelque chose qui arrive une fois avant le lancement puis est peniblement mis a jour tous les quelques mois. Cette approche echoue des que votre equipe livre frequemment.

La solution est de traiter les captures comme n'importe quel autre artefact de build. Elles doivent etre generees automatiquement quand votre UI change, versionnees avec votre code et deployees dans les stores.

Vue d'ensemble de l'architecture

1. Design du template — Votre equipe de design cree des templates dans l'editeur visuel de Screenshots.live.
2. Configuration — Un fichier YAML definit les templates, langues et variables de texte.
3. Rendu — Votre pipeline appelle l'API Screenshots.live qui retourne un ZIP.
4. Post-traitement — Le pipeline extrait le ZIP et organise les fichiers.
5. Upload — Fastlane livre les captures automatiquement.

Configuration du fichier

# .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: fr
    variables:
      headline: "Suivez vos progres"

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

Integration 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

Gestion des langues dans le pipeline

Quand vous ajoutez une nouvelle langue, ajoutez une entree dans config.yml. La prochaine execution genere des captures pour chaque template dans la nouvelle langue.

Astuces de cache et optimisation

Cles de cache basees sur le contenu. Le workflow utilise hashFiles('.screenshots/config.yml') comme cle de cache.

Rendu selectif. Si une seule langue a change, divisez les rendus par langue.

Rendu parallele :

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

Surveillance des rendus avec webhooks

Screenshots.live supporte les webhooks pour notifier vos systemes quand les rendus sont termines ou echouent.

Assembler le tout

1. Un designer cree ou met a jour un template.
2. Un developpeur met a jour la configuration et pousse sur main.
3. GitHub Actions detecte le changement et lance le workflow.
4. Le script de rendu appelle l'API et telecharge les captures.
5. Fastlane les uploade dans les deux stores.
6. Les fiches sont mises a jour en quelques minutes.