Construindo um pipeline de capturas no seu CI/CD: Guia passo a passo

Por que capturas de tela pertencem ao seu pipeline CI/CD

Capturas de tela da App Store geralmente sao tratadas como tarefa de design, algo que acontece uma vez antes do lancamento e depois e dolorosamente atualizado a cada poucos meses. Essa abordagem falha quando seu time lanca com frequencia.

A solucao e tratar capturas como qualquer outro artefato de build. Devem ser geradas automaticamente quando sua UI muda, versionadas junto com seu codigo e deployadas nas lojas como parte do processo de release.

Visao geral da arquitetura

1. Design do template — Seu time de design cria templates no editor visual do Screenshots.live.
2. Configuracao — Um arquivo YAML define templates, idiomas e variaveis de texto.
3. Renderizacao — Seu pipeline chama a API do Screenshots.live que retorna um ZIP.
4. Pos-processamento — O pipeline extrai o ZIP e organiza os arquivos.
5. Upload — Fastlane entrega as capturas automaticamente.

Configurando o arquivo

# .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: pt
    variables:
      headline: "Acompanhe seu progresso"

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

Integracao 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

Gerenciando idiomas no pipeline

Quando voce adiciona um novo idioma, adiciona uma entrada no config.yml. A proxima execucao gera capturas para cada template no novo idioma.

Dicas de cache e otimizacao

Chaves de cache baseadas em conteudo. O workflow usa hashFiles('.screenshots/config.yml') como chave.

Renderizacao seletiva. Se apenas um idioma mudou, divida os renders por idioma.

Renderizacao paralela:

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

Monitoramento de renders com webhooks

Screenshots.live suporta webhooks para notificar seus sistemas quando renders completam ou falham.

Juntando tudo

1. Um designer cria ou atualiza um template.
2. Um desenvolvedor atualiza a configuracao e faz push para main.
3. GitHub Actions detecta a mudanca e dispara o workflow.
4. O script de renderizacao chama a API e baixa as capturas.
5. Fastlane faz upload para ambas as lojas.
6. Ambas as fichas sao atualizadas em minutos.