Il problema degli screenshot manuali

Se hai mai pubblicato un'app mobile, conosci il problema. Ad ogni ciclo di rilascio, apri Figma o Sketch, aggiorni manualmente gli screenshot per ogni dimensione di dispositivo, ogni lingua, ogni schermata. Per una singola app che supporta iPhone, iPad e Android in 10 localizzazioni, potresti dover produrre centinaia di asset individuali.

La maggior parte dei team dedica da uno a tre giorni interi a questo processo per ogni rilascio. E la parte peggiore? E quasi interamente ripetitivo. Il template di design rimane lo stesso. I frame dei dispositivi rimangono gli stessi. Cambiano solo il contenuto dello screenshot e il testo.

C'e un modo migliore.

L'alternativa automatizzata: Screenshots.live + Fastlane

In questa guida, vedremo come configurare una pipeline di screenshot completamente automatizzata usando Screenshots.live e Fastlane. Alla fine, la tua pipeline CI/CD generera, localizera e caricherai tutti gli screenshot dell'App Store senza alcun intervento manuale.

Ecco come funziona il flusso di lavoro:

Progetti i tuoi template di screenshot una volta nell'editor visuale di Screenshots.live.
Definisci variabili (testo del titolo, immagine screenshot, colore di sfondo) in ogni template.
La tua pipeline Fastlane chiama la API REST di Screenshots.live, sostituendo testo localizzato e screenshot aggiornati.
Fastlane carica le immagini finite direttamente su App Store Connect o Google Play.

Prerequisiti

Un account Screenshots.live con almeno un template creato.
Una chiave API dalla dashboard di Screenshots.live (Impostazioni > Chiavi API).
Fastlane installato e configurato per il tuo progetto.
Ruby 2.7+ (per Fastlane).
Un ambiente CI/CD come GitHub Actions, GitLab CI o Bitrise.

Passo 1: Progettare i tuoi template

Accedi a Screenshots.live e apri l'editor visuale. Crea un template per ogni slot di screenshot di cui hai bisogno. Per la maggior parte delle app, si tratta di 4-8 template che coprono le funzionalita chiave.

Il concetto chiave sono le variabili dinamiche:

{{headline}} per il testo marketing sovrapposto
{{screenshot}} per lo screenshot effettivo del dispositivo
{{background_color}} per la personalizzazione del tema

Passo 2: Ottenere le credenziali API

Genera una chiave API dalla tua dashboard. Avrai bisogno di due valori: la tua chiave API e i tuoi ID template.

export SCREENSHOTS_LIVE_API_KEY="sk_live_la_tua_chiave_api"

Passo 3: Testare la API direttamente

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": "Monitora le tue abitudini senza sforzo",
      "screenshot": "https://your-bucket.s3.amazonaws.com/screen1.png"
    },
    "deviceFrames": ["iphone_6.7", "iphone_6.5", "ipad_pro"]
  }'

Passo 4: Configurazione di localizzazione

# screenshots.yml
locales:
  en:
    screenshots:
      - template: tpl_abc123
        variables:
          headline: "Track your habits effortlessly"
          screenshot: screens/en/home.png
  it:
    screenshots:
      - template: tpl_abc123
        variables:
          headline: "Monitora le tue abitudini senza sforzo"
          screenshot: screens/it/home.png

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

Passo 5: Scrivere l'integrazione Fastlane

Aggiungi questo al tuo Fastfile:

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

platform :ios do
  desc "Genera e carica screenshot localizzati"
  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("Rendering #{locale} screenshot #{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

Passo 6: Integrare con CI/CD

# .github/workflows/screenshots.yml
name: Genera screenshot App Store

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

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

Prima e dopo: L'impatto reale

Prima: Il flusso manuale

Il designer apre Figma, posiziona manualmente nuovi screenshot in 6 template.
Esporta per 3 dimensioni di dispositivo per piattaforma = 36 immagini per lingua.
Con 10 lingue: 360 immagini da esportare e organizzare.
Tempo: 2-3 giorni per ciclo di rilascio.

Dopo: La pipeline automatizzata

Lo sviluppatore aggiorna screenshots.yml.
Push su main. CI/CD si esegue automaticamente.
Tutte le 360+ immagini generate e caricate in meno di 15 minuti.
Zero intervento manuale. Zero asset fuori posto.
Tempo risparmiato per rilascio: 2+ giorni.

Conclusione

Automatizzare gli screenshot dell'App Store e uno dei miglioramenti a maggiore impatto che puoi apportare al tuo processo di rilascio. Inizia con Screenshots.live e recupera i tuoi giorni di rilascio.

Come automatizzare gli screenshot dell'App Store con Fastlane e una API REST