Problema ruchnyh skrinshotov

Esli vy kogda-libo publikovali mobilnoe prilozhenie, vy znaete etu bol. V kazhdom cikle reliza vy otkryvaete Figma ili Sketch, vruchnuju obnovlyaete skrinshoty dlya kazhdogo razmera ustrojstva, kazhdogo yazyka, kazhdogo ekrana. Dlya odnogo prilozheniya, podderzhivajuschego iPhone, iPad i Android v 10 lokalizaciyah, vam mozhet ponadobitsya sozdat sotni otdelnyh assetov.

Bolshinstvo komand tratyat ot odnogo do treh polnyh dnej na etot process pri kazhdom rilize. I samoe huzshee? Eto pochti polnostju povtoryajuscheesya. Dizajn-shablon ostaetsya tem zhe. Ramki ustrojstv ostajutsya temi zhe. Menyayutsya tolko soderzhimoe skrinshotov i tekst.

Est luchshij sposob.

Avtomatizirovannaya alternativa: Screenshots.live + Fastlane

V etom rukovodstve my nastroyim polnostju avtomatizirovanniy pipeline skrinshotov s ispolzovaniem Screenshots.live i Fastlane. V rezultate vash pipeline CI/CD budet generirovat, lokalizovat i zagruzhat vse skrinshoty App Store bez ruchnogo vmeshatelstva.

Vy sozdaete shablony skrinshotov odin raz v vizualnom redaktore Screenshots.live.
Opredelyaete peremennye (tekst zagolovka, izobrazhenie skrinshota, cvet fona) v kazhdom shablone.
Vash pipeline Fastlane vyzyvaet REST API Screenshots.live, zamenyaya lokalizovannyj tekst i svezhie skrinshoty.
Fastlane zagruzhaet gotovye izobrazheniya napryamuyu v App Store Connect ili Google Play.

Predvaritelnye trebovaniya

Uchetnaya zapis Screenshots.live s kak minimum odnim sozdannym shablonom.
API-kljuch iz paneli upravleniya Screenshots.live.
Fastlane ustanovlen i nastrojen dlya vashego proekta.
Ruby 2.7+ (dlya Fastlane).
Sreda CI/CD, takaya kak GitHub Actions, GitLab CI ili Bitrise.

Shag 1: Sozdanie shablonov

Kljuchevaya koncepciya - dinamicheskie peremennye:

{{headline}} dlya marketingovogo teksta
{{screenshot}} dlya realnogo skrinshota ustrojstva
{{background_color}} dlya nastrojki temy

Shag 2: Poluchenie uchyotnyh dannyh API

export SCREENSHOTS_LIVE_API_KEY="sk_live_vash_api_kljuch"

Shag 3: Testirovanie 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": "Otslezhivajte svoi privychki bez usilij",
      "screenshot": "https://your-bucket.s3.amazonaws.com/screen1.png"
    },
    "deviceFrames": ["iphone_6.7", "iphone_6.5", "ipad_pro"]
  }'

Shag 4: Konfiguracija lokalizacii

# screenshots.yml
locales:
  en:
    screenshots:
      - template: tpl_abc123
        variables:
          headline: "Track your habits effortlessly"
          screenshot: screens/en/home.png
  ru:
    screenshots:
      - template: tpl_abc123
        variables:
          headline: "Otslezhivajte svoi privychki bez usilij"
          screenshot: screens/ru/home.png

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

Shag 5: Integraciya s Fastlane

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

platform :ios do
  desc "Sgenerirovat i zagruzit lokalizovannye skrinshoty"
  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("Renderim #{locale} skrinshot #{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

Shag 6: Integraciya s CI/CD

# .github/workflows/screenshots.yml
name: Generaciya skrinshotov App Store

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

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

Do i posle: Realnyj effekt

Do

Dizajner otkryvaet Figma, vruchnuju razmeschaet novye skrinshoty v 6 shablonah.
Pri 10 yazykah: 360 izobrazhenij dlya eksporta i organizacii.
Vremya: 2-3 dnya na cikl reliza.

Posle

Razrabotchik obnovlyaet screenshots.yml.
Vse 360+ izobrazhenij sgeneriovany i zagruzheny za menee 15 minut.
Sehkonomlennoe vremya na reliz: 2+ dnya.

Zakljuchenie

Avtomatizaciya skrinshotov App Store - odno iz samyh effektivnyh uluchshenij vashego processa reliza. Nachnite s Screenshots.live i vernite svoi dni relizov.

Kak avtomatizirovat skrinshoty App Store s pomoschju Fastlane i REST API