Problemet med manuelle skjermbilder

Hvis du noen gang har publisert en mobilapp, kjenner du smerten. Hver utgivelsessyklus apner du Figma eller Sketch, oppdaterer manuelt skjermbilder for hver enhetsstorrelse, hvert sprak, hver skjerm. For en enkelt app som stotter iPhone, iPad og Android pa 10 lokaliseringer, kan du matte produsere hundrevis av individuelle assets.

De fleste team bruker en til tre hele dager pa denne prosessen per utgivelse. Og det verste? Det er nesten helt repetitivt.

Det finnes en bedre mate.

Det automatiserte alternativet: Screenshots.live + Fastlane

I denne guiden setter vi opp en helautomatisert skjermbilde-pipeline med Screenshots.live og Fastlane.

Du designer skjermbildemalene dine en gang i den visuelle editoren til Screenshots.live.
Du definerer variabler (overskriftstekst, skjermbilde, bakgrunnsfarge) i hver mal.
Fastlane-pipelinen din kaller Screenshots.live REST API og bytter inn lokalisert tekst og ferske skjermbilder.
Fastlane laster opp de ferdige bildene direkte til App Store Connect eller Google Play.

Forutsetninger

En Screenshots.live-konto med minst en opprettet mal.
En API-nokkel fra Screenshots.live-dashboardet ditt.
Fastlane installert og konfigurert for prosjektet ditt.
Ruby 2.7+ (for Fastlane).
Et CI/CD-miljo som GitHub Actions, GitLab CI eller Bitrise.

Steg 1: Design malene

Nokkelbegrepet er dynamiske variabler:

{{headline}} for markedsforingsteksten
{{screenshot}} for det faktiske enhetsskjermbildet
{{background_color}} for tematilpasning

Steg 2: Hent API-legitimasjon

export SCREENSHOTS_LIVE_API_KEY="sk_live_din_api_nokkel"

Steg 3: Test APIet direkte

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": "Folg vanene dine uten anstrengelse",
      "screenshot": "https://your-bucket.s3.amazonaws.com/screen1.png"
    },
    "deviceFrames": ["iphone_6.7", "iphone_6.5", "ipad_pro"]
  }'

Steg 4: Lokaliseringskonfigurasjon

# screenshots.yml
locales:
  en:
    screenshots:
      - template: tpl_abc123
        variables:
          headline: "Track your habits effortlessly"
          screenshot: screens/en/home.png
  nb:
    screenshots:
      - template: tpl_abc123
        variables:
          headline: "Folg vanene dine uten anstrengelse"
          screenshot: screens/nb/home.png

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

Steg 5: Skriv Fastlane-integrasjonen

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

platform :ios do
  desc "Generer og last opp lokaliserte skjermbilder"
  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("Renderer #{locale} skjermbilde #{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-integrasjon

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

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

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

For og etter: Den reelle effekten

For

Med 10 sprak: 360 bilder a eksportere og organisere.
Tid: 2-3 dager per utgivelsessyklus.

Etter

Alle 360+ bilder generert og lastet opp pa under 15 minutter.
Spart tid per utgivelse: 2+ dager.

Konklusjon

Automatisering av App Store-skjermbilder er en av de mest virkningsfulle forbedringene for utgivelsesprosessen din. Kom i gang med Screenshots.live og ta tilbake utgivelsesdagene dine.

Hvordan automatisere App Store-skjermbilder med Fastlane og et REST API