Hoe je App Store screenshots automatiseert met Fastlane en een REST API

Het probleem van handmatige screenshots

Als je ooit een mobiele app hebt gepubliceerd, ken je de pijn. Elke release-cyclus open je Figma of Sketch, werk je handmatig screenshots bij voor elk apparaatformaat, elke taal, elk scherm. Voor een enkele app die iPhone, iPad en Android ondersteunt in 10 lokalisaties, kun je kijken naar honderden individuele assets die geproduceerd, geexporteerd en geupload moeten worden.

De meeste teams besteden een tot drie volledige dagen aan dit proces per release. En het ergste? Het is bijna volledig repetitief.

Er is een betere manier.

Het geautomatiseerde alternatief: Screenshots.live + Fastlane

In deze gids laten we zien hoe je een volledig geautomatiseerde screenshot-pipeline opzet met Screenshots.live en Fastlane.

1. Je ontwerpt je screenshot-templates eenmalig in de visuele editor van Screenshots.live.
2. Je definieert variabelen (koptekst, screenshot-afbeelding, achtergrondkleur) in elk template.
3. Je Fastlane-pipeline roept de Screenshots.live REST API aan en wisselt gelokaliseerde tekst en verse screenshots in.
4. Fastlane uploadt de voltooide afbeeldingen rechtstreeks naar App Store Connect of Google Play.

Vereisten

• Een Screenshots.live account met minimaal een aangemaakt template.
• Een API-sleutel van je Screenshots.live dashboard.
• Fastlane geinstalleerd en geconfigureerd voor je project.
• Ruby 2.7+ (voor Fastlane).
• Een CI/CD-omgeving zoals GitHub Actions, GitLab CI of Bitrise.

Stap 1: Templates ontwerpen

Het sleutelconcept is dynamische variabelen:

• {{headline}} voor de marketingtekst
• {{screenshot}} voor de eigenlijke apparaat-screenshot
• {{background_color}} voor thema-aanpassing

Stap 2: API-referenties ophalen

export SCREENSHOTS_LIVE_API_KEY="sk_live_jouw_api_sleutel"

Stap 3: De API direct testen

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": "Volg je gewoontes moeiteloos",
      "screenshot": "https://your-bucket.s3.amazonaws.com/screen1.png"
    },
    "deviceFrames": ["iphone_6.7", "iphone_6.5", "ipad_pro"]
  }'

Stap 4: Lokalisatieconfiguratie

# screenshots.yml
locales:
  en:
    screenshots:
      - template: tpl_abc123
        variables:
          headline: "Track your habits effortlessly"
          screenshot: screens/en/home.png
  nl:
    screenshots:
      - template: tpl_abc123
        variables:
          headline: "Volg je gewoontes moeiteloos"
          screenshot: screens/nl/home.png

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

Stap 5: Fastlane-integratie schrijven

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

platform :ios do
  desc "Gelokaliseerde screenshots genereren en uploaden"
  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("Renderen #{locale} screenshot #{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

Stap 6: CI/CD integratie

# .github/workflows/screenshots.yml
name: App Store screenshots genereren

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

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

Voor en na: De echte impact

Voor

• Designer opent Figma, plaatst handmatig nieuwe screenshots in 6 templates.
• Bij 10 talen: 360 afbeeldingen om te exporteren en organiseren.
• Tijd: 2-3 dagen per release-cyclus.

Na

• Ontwikkelaar werkt screenshots.yml bij.
• Alle 360+ afbeeldingen gegenereerd en geupload in minder dan 15 minuten.
• Bespaarde tijd per release: 2+ dagen.

Conclusie

Het automatiseren van je App Store screenshots is een van de meest impactvolle verbeteringen voor je releaseproces. Begin met Screenshots.live en win je releasedagen terug.