Kuvakaappausputken rakentaminen CI/CD:hen: Vaiheittainen opas

Miksi kuvakaappaukset kuuluvat CI/CD-putkeen

App Storen kuvakaappauksia kohdellaan yleensa suunnittelutehtavana, jotain mika tapahtuu kerran ennen julkaisua ja paivitetaan tuskallisesti muutaman kuukauden valein. Tama lahestymistapa hajoaa kun tiimisi julkaisee usein.

Ratkaisu on kohdella kuvakaappauksia kuten mitä tahansa muuta build-artefaktia. Ne tulisi generoida automaattisesti kun kayttoliittyma muuttuu, versioida koodin rinnalla ja deployata kauppoihin osana julkaisuprosessia.

Arkkitehtuurikatsaus

1. Mallin suunnittelu — Suunnittelutiimi luo malleja Screenshots.live visuaalisessa editorissa.
2. Konfiguraatio — YAML-tiedosto maarittelee mallit, kielet ja tekstimuuttujat.
3. Renderointi — Putkesi kutsuu Screenshots.live APIa joka palauttaa ZIP-arkiston.
4. Jalkikasittely — Putki purkaa ZIPin ja jarjestelee tiedostot.
5. Lataus — Fastlane toimittaa kuvakaappaukset automaattisesti.

Konfiguraatiotiedoston asettaminen

# .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: fi
    variables:
      headline: "Seuraa edistymistasi"

GitHub Actions Workflow

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

Fastlane-integraatio

# 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

Kielten hallinta putkessa

Kun lisat uuden kielen, lisat merkinnnan config.yml-tiedostoon. Seuraava putkiajo generoi kuvakaappaukset jokaiselle mallille uudella kielella.

Valimuisti- ja optimointivinkkeja

Sisaltoon perustuvat valimuistiavaimet. Workflow kayttaa hashFiles('.screenshots/config.yml') valimuistiavaimena.

Valikoiva renderointi. Jos vain yksi kieli muuttui, jaa renderoinnit kielen mukaan.

Rinnakkainen renderointi:

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

Renderointien seuranta webhookeilla

Screenshots.live tukee webhookeja jotka ilmoittavat jarjestelmillesi kun renderoinnit valmistuvat tai epaonnistuvat.

Kaiken yhdistaminen

1. Suunnittelija luo tai paivittaa mallin.
2. Kehittaja paivittaa konfiguraation ja pushaa main-haaraan.
3. GitHub Actions havaitsee muutoksen ja kaynnistaa workflown.
4. Renderointiskripti lukee konfiguraation, kutsuu APIa ja lataa kuvakaappaukset.
5. Fastlane lataa kuvakaappaukset molempiin kauppoihin.
6. Molemmat kauppasivut paivittyvat minuuteissa.