Le probleme des captures d'ecran manuelles

Si vous avez deja publie une application mobile, vous connaissez la douleur. A chaque cycle de publication, vous ouvrez Figma ou Sketch, mettez a jour manuellement les captures d'ecran pour chaque taille d'appareil, chaque langue, chaque ecran. Pour une seule application supportant iPhone, iPad et Android dans 10 localisations, vous pouvez avoir des centaines d'assets individuels a produire, exporter et telecharger.

La plupart des equipes consacrent un a trois jours complets a ce processus par publication. Et le pire ? C'est presque entierement repetitif. Le modele de design reste le meme. Les cadres d'appareils restent les memes. Seuls le contenu de la capture et le texte changent.

Il existe une meilleure solution.

L'alternative automatisee : Screenshots.live + Fastlane

Dans ce guide, nous allons configurer un pipeline de captures d'ecran entierement automatise avec Screenshots.live et Fastlane. A la fin, votre pipeline CI/CD generera, localisera et televersera toutes vos captures App Store sans aucune intervention manuelle.

Voici le flux de travail :

Vous concevez vos modeles de captures une fois dans l'editeur visuel de Screenshots.live.
Vous definissez des variables (texte de titre, image de capture, couleur de fond) dans chaque modele.
Votre pipeline Fastlane appelle l'API REST de Screenshots.live, substituant le texte localise et les captures fraisches.
Fastlane televerse les images finies directement vers App Store Connect ou Google Play.

Prerequis

Un compte Screenshots.live avec au moins un modele cree.
Une cle API depuis votre tableau de bord Screenshots.live.
Fastlane installe et configure pour votre projet.
Ruby 2.7+ (pour Fastlane).
Un environnement CI/CD comme GitHub Actions, GitLab CI ou Bitrise.

Etape 1 : Concevoir vos modeles

Connectez-vous a Screenshots.live et ouvrez l'editeur visuel. Creez un modele pour chaque emplacement de capture. Le concept cle est celui des variables dynamiques :

{{headline}} pour le texte marketing
{{screenshot}} pour la capture d'ecran reelle
{{background_color}} pour la personnalisation du theme

Etape 2 : Obtenir vos identifiants API

export SCREENSHOTS_LIVE_API_KEY="sk_live_votre_cle_api_ici"

Etape 3 : Tester l'API directement

curl -X POST https://api.screenshots.live/v1/render \
  -H "Authorization: Bearer $SCREENSHOTS_LIVE_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "templateId": "tpl_abc123",
    "variables": {
      "headline": "Suivez vos habitudes sans effort",
      "screenshot": "https://your-bucket.s3.amazonaws.com/screen1.png"
    },
    "deviceFrames": ["iphone_6.7", "iphone_6.5", "ipad_pro"]
  }'

Etape 4 : Configuration de localisation

# screenshots.yml
locales:
  en:
    screenshots:
      - template: tpl_abc123
        variables:
          headline: "Track your habits effortlessly"
          screenshot: screens/en/home.png
  fr:
    screenshots:
      - template: tpl_abc123
        variables:
          headline: "Suivez vos habitudes sans effort"
          screenshot: screens/fr/home.png

device_frames:
  ios:
    - iphone_6.7
    - iphone_6.5
    - ipad_pro_12_9

Etape 5 : Ecrire l'integration Fastlane

require 'yaml'
require 'net/http'
require 'json'
require 'fileutils'

platform :ios do
  desc "Generer et telecharger les captures localisees"
  lane :screenshots do
    generate_screenshots
    upload_to_app_store(
      skip_binary_upload: true,
      skip_metadata: true,
      screenshots_path: "./fastlane/screenshots"
    )
  end
end

private_lane :generate_screenshots do |options|
  config = YAML.load_file("screenshots.yml")
  api_key = ENV["SCREENSHOTS_LIVE_API_KEY"]
  device_frames = config["device_frames"]["ios"]

  config["locales"].each do |locale, data|
    data["screenshots"].each_with_index do |entry, index|
      UI.message("Rendu #{locale} capture #{index + 1}...")

      uri = URI("https://api.screenshots.live/v1/render")
      http = Net::HTTP.new(uri.host, uri.port)
      http.use_ssl = true

      request = Net::HTTP::Post.new(uri)
      request["Authorization"] = "Bearer #{api_key}"
      request["Content-Type"] = "application/json"
      request.body = {
        templateId: entry["template"],
        variables: entry["variables"],
        deviceFrames: device_frames
      }.to_json

      response = http.request(request)
      result = JSON.parse(response.body)

      result["images"].each do |image|
        output_dir = "./fastlane/screenshots/#{locale}"
        FileUtils.mkdir_p(output_dir)
        File.write(
          "#{output_dir}/#{image['device']}_#{index}.png",
          Net::HTTP.get(URI(image["url"]))
        )
      end
    end
  end
end

Etape 6 : Integrer avec CI/CD

# .github/workflows/screenshots.yml
name: Generer captures App Store

on:
  push:
    branches: [main]
    paths:
      - 'screenshots.yml'
      - 'screens/**'
  workflow_dispatch:

jobs:
  generate:
    runs-on: macos-latest
    steps:
      - uses: actions/checkout@v4
      - name: Configurer Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.2'
          bundler-cache: true
      - name: Generer et telecharger
        env:
          SCREENSHOTS_LIVE_API_KEY: ${{ secrets.SCREENSHOTS_LIVE_API_KEY }}
        run: bundle exec fastlane ios screenshots

Avant et apres : L'impact reel

Avant : Le flux manuel

Le designer ouvre Figma, place manuellement les nouvelles captures dans 6 modeles.
Export pour 3 tailles d'appareil par plateforme = 36 images par langue.
Avec 10 langues : 360 images a exporter et organiser.
Temps : 2 a 3 jours par cycle de publication.

Apres : Le pipeline automatise

Le developpeur met a jour screenshots.yml.
Push sur main. CI/CD s'execute automatiquement.
Toutes les 360+ images generees et televersees en moins de 15 minutes.
Zero intervention manuelle. Zero assets mal places.
Temps economise par publication : 2+ jours.

Conclusion

Automatiser vos captures d'ecran App Store est l'une des ameliorations les plus impactantes pour votre processus de publication. Commencez avec Screenshots.live et recuperez vos journees de publication.

Comment automatiser les captures d'ecran App Store avec Fastlane et une API REST