Problem recznych zrzutow ekranu

Jesli kiedykolwiek publikowales aplikacje mobilna, znasz ten bol. W kazdym cyklu wydawniczym otwierasz Figma lub Sketch, recznie aktualizujesz zrzuty ekranu dla kazdego rozmiaru urzadzenia, kazdego jezyka, kazdego ekranu. Dla pojedynczej aplikacji obslugujcej iPhone, iPad i Android w 10 lokalizacjach, mozesz miec do wyprodukowania setki indywidualnych assetow.

Wiekszosc zespolow spedza od jednego do trzech pelnych dni na tym procesie przy kazdym wydaniu. A najgorsze? Jest to prawie calkowicie powtarzalne.

Jest lepszy sposob.

Zautomatyzowana alternatywa: Screenshots.live + Fastlane

W tym przewodniku skonfigurujemy w pelni zautomatyzowany pipeline zrzutow ekranu uzywajac Screenshots.live i Fastlane. Na koncu Twoj pipeline CI/CD bedzie generowal, lokalizowal i przesylal wszystkie zrzuty ekranu App Store bez recznej interwencji.

Projektujesz swoje szablony zrzutow raz w edytorze wizualnym Screenshots.live.
Definiujesz zmienne (tekst naglowka, obraz zrzutu, kolor tla) w kazdym szablonie.
Twoj pipeline Fastlane wywoluje REST API Screenshots.live, podmieniajac zlokalizowany tekst i sweze zrzuty.
Fastlane przesyla gotowe obrazy bezposrednio do App Store Connect lub Google Play.

Wymagania wstepne

Konto Screenshots.live z co najmniej jednym utworzonym szablonem.
Klucz API z panelu Screenshots.live.
Fastlane zainstalowany i skonfigurowany dla Twojego projektu.
Ruby 2.7+ (dla Fastlane).
Srodowisko CI/CD takie jak GitHub Actions, GitLab CI lub Bitrise.

Krok 1: Projektowanie szablonow

Kluczowa koncepcja to zmienne dynamiczne:

{{headline}} dla tekstu marketingowego
{{screenshot}} dla rzeczywistego zrzutu ekranu urzadzenia
{{background_color}} dla dostosowania motywu

Krok 2: Uzyskanie danych uwierzytelniajacych API

export SCREENSHOTS_LIVE_API_KEY="sk_live_twoj_klucz_api"

Krok 3: Testowanie API

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": "Sledz swoje nawyki bez wysilku",
      "screenshot": "https://your-bucket.s3.amazonaws.com/screen1.png"
    },
    "deviceFrames": ["iphone_6.7", "iphone_6.5", "ipad_pro"]
  }'

Krok 4: Konfiguracja lokalizacji

# screenshots.yml
locales:
  en:
    screenshots:
      - template: tpl_abc123
        variables:
          headline: "Track your habits effortlessly"
          screenshot: screens/en/home.png
  pl:
    screenshots:
      - template: tpl_abc123
        variables:
          headline: "Sledz swoje nawyki bez wysilku"
          screenshot: screens/pl/home.png

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

Krok 5: Integracja z Fastlane

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

platform :ios do
  desc "Generuj i przesylaj zlokalizowane zrzuty ekranu"
  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("Renderowanie #{locale} zrzut #{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

Krok 6: Integracja z CI/CD

# .github/workflows/screenshots.yml
name: Generuj zrzuty ekranu App Store

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

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

Przed i po: Rzeczywisty wplyw

Przed

Projektant otwiera Figma, recznie umieszcza nowe zrzuty w 6 szablonach.
Przy 10 jezykach: 360 obrazow do wyeksportowania i zorganizowania.
Czas: 2-3 dni na cykl wydawniczy.

Po

Programista aktualizuje screenshots.yml.
Wszystkie 360+ obrazow wygenerowane i przeslane w ponizej 15 minut.
Zaoszczedzony czas na wydanie: 2+ dni.

Podsumowanie

Automatyzacja zrzutow ekranu App Store to jedna z najbardziej wplywowych ulepszen procesu wydawniczego. Zacznij z Screenshots.live i odzyskaj swoje dni wydawnicze.

Jak automatyzowac zrzuty ekranu App Store za pomoca Fastlane i REST API