Manuaalisten kuvakaappausten ongelma

Jos olet koskaan julkaissut mobiilisovelluksen, tunnet tuskan. Jokaisessa julkaisusyklissa avaat Figman tai Sketchin, paivitat manuaalisesti kuvakaappaukset jokaiselle laitekoelle, jokaiselle kielelle, jokaiselle nayttolle. Yksittaiselle sovellukselle, joka tukee iPhonea, iPadia ja Androidia 10 lokalisoinnilla, saatat tarvita satoja yksittaisia assetteja.

Useimmat tiimit kayttavat yhdesta kolmeen kokonaista paivaa tahan prosessiin julkaisua kohden. Ja pahin osa? Se on lahes taydellisesti toistavaa.

On parempi tapa.

Automatisoitu vaihtoehto: Screenshots.live + Fastlane

Tassa oppaassa pysytamme taysin automatisoidun kuvakaappausputken kayttaen Screenshots.live ja Fastlane.

Suunnittelet kuvakaappauspohjiasi kerran Screenshots.live-visuaalisessa editorissa.
Maaritat muuttujat (otsikkoteksti, kuvakaappauskuva, taustavari) jokaiseen pohjaan.
Fastlane-putkesi kutsuu Screenshots.live REST APIa, vaihtaen lokalisoitua tekstia ja tuoreita kuvakaappauksia.
Fastlane lataa valmiit kuvat suoraan App Store Connectiin tai Google Playhin.

Esivaatimukset

Screenshots.live-tili, jossa on vahintaan yksi luotu pohja.
API-avain Screenshots.live-hallintapaneelista.
Fastlane asennettuna ja konfiguroituna projektillesi.
Ruby 2.7+ (Fastlanelle).
CI/CD-ymparisto kuten GitHub Actions, GitLab CI tai Bitrise.

Vaihe 1: Pohjien suunnittelu

Avainkonsepti on dynaamiset muuttujat:

{{headline}} markkinointitekstille
{{screenshot}} varsinaiselle laitteen kuvakaappaukselle
{{background_color}} teeman mukautukselle

Vaihe 2: API-tunnusten hakeminen

export SCREENSHOTS_LIVE_API_KEY="sk_live_sinun_api_avaimesi"

Vaihe 3: APIn testaaminen suoraan

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

Vaihe 4: Lokalisointikonfiguraatio

# screenshots.yml
locales:
  en:
    screenshots:
      - template: tpl_abc123
        variables:
          headline: "Track your habits effortlessly"
          screenshot: screens/en/home.png
  fi:
    screenshots:
      - template: tpl_abc123
        variables:
          headline: "Seuraa tapojasi vaivattomasti"
          screenshot: screens/fi/home.png

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

Vaihe 5: Fastlane-integraation kirjoittaminen

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

platform :ios do
  desc "Luo ja lataa lokalisoidut kuvakaappaukset"
  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("Renderoidaan #{locale} kuvakaappaus #{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

Vaihe 6: CI/CD-integraatio

# .github/workflows/screenshots.yml
name: Luo App Store -kuvakaappaukset

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

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

Ennen ja jalkeen: Todellinen vaikutus

Ennen

10 kielella: 360 kuvaa vietavaksi ja jarjestettavaksi.
Aika: 2-3 paivaa julkaisusyklia kohden.

Jalkeen

Kaikki 360+ kuvaa luotu ja ladattu alle 15 minuutissa.
Saastetty aika julkaisua kohden: 2+ paivaa.

Yhteenveto

App Store -kuvakaappausten automatisointi on yksi vaikuttavimmista parannuksista julkaisuprosessiisi. Aloita Screenshots.livella ja ota julkaisupaivasi takaisin.

Kuinka automatisoida App Store -kuvakaappaukset Fastlanella ja REST APIlla