Problemet med manuella skarmbilder

Om du nagonsin har publicerat en mobilapp kanner du till problemet. Varje releascykel oppnar du Figma eller Sketch, uppdaterar manuellt skarmbilder for varje enhetsstorlek, varje sprak, varje skarm. For en enda app som stodjer iPhone, iPad och Android pa 10 lokaliseringar kan du behova producera hundratals enskilda assets.

De flesta team spenderar en till tre hela dagar pa denna process per release. Och det varsta? Det ar nastan helt repetitivt.

Det finns ett battre satt.

Det automatiserade alternativet: Screenshots.live + Fastlane

I denna guide konfigurerar vi en helt automatiserad skarmbild-pipeline med Screenshots.live och Fastlane.

Du designar dina skarmbildsmallar en gang i den visuella redigeraren i Screenshots.live.
Du definierar variabler (rubriktext, skarmbildsbild, bakgrundsfarg) i varje mall.
Din Fastlane-pipeline anropar Screenshots.live REST API och byter in lokaliserad text och nya skarmbilder.
Fastlane laddar upp de fardiga bilderna direkt till App Store Connect eller Google Play.

Forutsattningar

Ett Screenshots.live-konto med minst en skapad mall.
En API-nyckel fran din Screenshots.live-instrumentpanel.
Fastlane installerat och konfigurerat for ditt projekt.
Ruby 2.7+ (for Fastlane).
En CI/CD-miljo som GitHub Actions, GitLab CI eller Bitrise.

Steg 1: Designa mallar

Nyckelkonceptet ar dynamiska variabler:

{{headline}} for marknadsforingstexten
{{screenshot}} for den faktiska enhetsskarmbilden
{{background_color}} for temaanpassning

Steg 2: Hamta API-uppgifter

export SCREENSHOTS_LIVE_API_KEY="sk_live_din_api_nyckel"

Steg 3: Testa API:et direkt

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": "Folj dina vanor utan anstrangning",
      "screenshot": "https://your-bucket.s3.amazonaws.com/screen1.png"
    },
    "deviceFrames": ["iphone_6.7", "iphone_6.5", "ipad_pro"]
  }'

Steg 4: Lokaliseringskonfiguration

# screenshots.yml
locales:
  en:
    screenshots:
      - template: tpl_abc123
        variables:
          headline: "Track your habits effortlessly"
          screenshot: screens/en/home.png
  sv:
    screenshots:
      - template: tpl_abc123
        variables:
          headline: "Folj dina vanor utan anstrangning"
          screenshot: screens/sv/home.png

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

Steg 5: Skriv Fastlane-integrationen

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

platform :ios do
  desc "Generera och ladda upp lokaliserade skarmbilder"
  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("Renderar #{locale} skarmbild #{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

Steg 6: CI/CD-integration

# .github/workflows/screenshots.yml
name: Generera App Store-skarmbilder

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

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

Fore och efter: Den verkliga effekten

Fore

Designer oppnar Figma, placerar manuellt nya skarmbilder i 6 mallar.
Med 10 sprak: 360 bilder att exportera och organisera.
Tid: 2-3 dagar per releascykel.

Efter

Utvecklare uppdaterar screenshots.yml.
Alla 360+ bilder genererade och uppladdade pa under 15 minuter.
Sparad tid per release: 2+ dagar.

Slutsats

Att automatisera dina App Store-skarmbilder ar en av de mest effektfulla forbattringarna for din releaseprocess. Borja med Screenshots.live och ta tillbaka dina releasedagar.

Hur du automatiserar App Store-skarmbilder med Fastlane och ett REST API