Postroenie pipeline skrinshotov v vashem CI/CD: Poshagovoe rukovodstvo

Pochemu skrinshoty dolzhny byt v vashem CI/CD pipeline

Skrinshoty App Store obychno rassmatrivayutsya kak zadacha dizajna, chto-to chto proiskhodit odin raz pered zapuskom i zatem boleznenno obnovlyaetsya kazhdye neskolko mesyatsev. Etot podkhod ne rabotaet, kogda vasha komanda chasto vykatyvaet relizy.

Reshenie — otnositsa k skrinshotam kak k lyubomu drugomu artefaktu sborki. Oni dolzhny generirovatsa avtomaticheski pri izmenenii UI, versionirovatsa vmeste s kodom i deploitsa v magaziny kak chast protsessa reliza.

Obzor arkhitektury

1. Dizajn shablona — Komanda dizajnerov sozdaet shablony v vizualnom redaktore Screenshots.live.
2. Konfiguratsiya — YAML-fajl opredelyaet shablony, yazyki i tekstovye peremennye.
3. Rendering — Pipeline vyzyvaet API Screenshots.live, kotoryj vozvrashchaet ZIP-arkhiv.
4. Post-obrabotka — Pipeline raspakovyvaet ZIP i organizuet fajly.
5. Zagruzka — Fastlane dostavlyaet skrinshoty avtomaticheski.

Nastrojka fajla konfiguratsii

# .screenshots/config.yml

api_key: ${SCREENSHOTS_API_KEY}
base_url: https://api.screenshots.live/v1

templates:
  - id: tpl_hero_screen
    name: "Hero Screenshot"
    devices:
      - iphone67
      - ipad129
      - android_phone
      - android_tablet

locales:
  - code: en
    variables:
      headline: "Track Your Progress"
  - code: ru
    variables:
      headline: "Otslezhivajte svoj progress"

Workflow GitHub Actions

name: Generate App Store Screenshots

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

env:
  SCREENSHOTS_API_KEY: ${{ secrets.SCREENSHOTS_API_KEY }}
  SCREENSHOTS_OUTPUT_DIR: ./fastlane/screenshots

jobs:
  generate-screenshots:
    runs-on: ubuntu-latest
    timeout-minutes: 30
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - uses: actions/cache@v4
        with:
          path: .screenshots/cache
          key: screenshots-${{ hashFiles('.screenshots/config.yml') }}
      - run: npm install js-yaml node-fetch@2 adm-zip
      - run: node .screenshots/generate.js
      - uses: actions/upload-artifact@v4
        with:
          name: app-store-screenshots
          path: ${{ env.SCREENSHOTS_OUTPUT_DIR }}

  upload-ios:
    needs: generate-screenshots
    runs-on: macos-latest
    if: github.ref == 'refs/heads/main'
    steps:
      - uses: actions/checkout@v4
      - uses: actions/download-artifact@v4
        with:
          name: app-store-screenshots
          path: fastlane/screenshots
      - run: gem install fastlane
      - run: fastlane ios upload_screenshots

  upload-android:
    needs: generate-screenshots
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'
    steps:
      - uses: actions/checkout@v4
      - uses: actions/download-artifact@v4
        with:
          name: app-store-screenshots
          path: fastlane/screenshots
      - run: gem install fastlane
      - run: fastlane android upload_screenshots

Integratsiya Fastlane

# fastlane/Fastfile

platform :ios do
  lane :upload_screenshots do
    deliver(
      skip_binary_upload: true,
      skip_metadata: true,
      screenshots_path: "./fastlane/screenshots/ios",
      overwrite_screenshots: true,
    )
  end
end

platform :android do
  lane :upload_screenshots do
    upload_to_play_store(
      skip_upload_apk: true,
      skip_upload_aab: true,
      skip_upload_metadata: true,
      images_path: "./fastlane/screenshots/android",
    )
  end
end

Upravlenie yazykami v pipeline

Kogda vy dobavlyaete novyj yazyk, vy dobavlyaete zapis v config.yml. Sleduyushchij zapusk pipeline generuruet skrinshoty dlya kazhdogo shablona na novom yazyke.

Sovety po keshirovaniyu i optimizatsii

Klyuchi kesha na osnove soderzhaniya. Workflow ispolzuet hashFiles('.screenshots/config.yml') kak klyuch kesha.

Selektivnyj rendering. Esli izmenilsya tolko odin yazyk, razdelite rendery po yazykam.

Parallelnyj rendering:

const renderPromises = config.templates.map(template =>
  renderTemplate(template, config, apiKey)
);
await Promise.all(renderPromises);

Monitoring renderov cherez webhuki

Screenshots.live podderzhivaet webhuki dlya uvedomleniya vashikh sistem o zavershenii ili neudache renderinga.

Sobiraem vse vmeste

1. Dizajner sozdaet ili obnovlyaet shablon.
2. Razrabotchik obnovlyaet konfiguratsiyu i pushit v main.
3. GitHub Actions obnaruzhivaet izmenenie i zapuskaet workflow.
4. Skript renderinga chitaet konfiguratsiyu, vyzyvaet API i skachivat skrinshoty.
5. Fastlane zagruzhaet skrinshoty v oba magazina.
6. Obe stranitsy magazina obnovlyayutsya za minuty.