Il problema: 20 app, 20 brand, centinaia di screenshot

Qualche anno fa, lavoravo come sviluppatore in una startup dove costruivamo un'app mobile whitelabel. Un unico codebase, ma 20 clienti diversi — ognuno con il proprio branding, colori, loghi e inserzioni App Store. Ognuno aveva bisogno del proprio set di screenshot curati per App Store e Google Play.

Se hai mai pubblicato un'app, conosci la routine: Apple vuole screenshot per ogni dimensione di dispositivo (6,7", 6,5", 5,5", iPad Pro, iPad...), Google Play vuole il suo set, e se supporti più lingue, moltiplica tutto di nuovo. Ora moltiplica quello per 20 clienti.

Stiamo parlando di migliaia di screenshot che dovevano essere generati, incorniciati in mockup di dispositivi, brandizzati con i colori giusti e caricati — ad ogni singolo ciclo di rilascio.

Cosa avevamo: Screenshot automatizzati nella pipeline

Gli screenshot grezzi non erano il problema. Quella parte l'avevamo risolta. I nostri test UI, in esecuzione nella nostra pipeline GitLab CI, avviavano ogni variante dell'app, navigavano attraverso le schermate principali e catturavano screenshot automaticamente. Il snapshot di Fastlane (iOS) e screengrab (Android) facevano il lavoro pesante.

Quindi avevamo centinaia di file PNG grezzi che atterravano negli artefatti della nostra pipeline dopo ogni build. Ottimo. Ma gli screenshot grezzi non vanno sull'App Store. Devono essere elaborati — posizionati dentro cornici di dispositivi, con uno sfondo che corrisponda al brand del cliente, sovrapposti con testo di marketing ed esportati nelle dimensioni esatte in pixel che ogni store richiede.

I punti dolenti

1. Il collo di bottiglia del designer

Il nostro designer era talentuoso, ma chiedergli di aggiornare manualmente i file Figma per 20 brand ad ogni rilascio era assurdo. Passava giorni semplicemente a scambiare screenshot e regolare colori. E se un cliente cambiava il suo branding a metà ciclo? Ricominciare da capo.

2. Nessun tempo per strumenti interni

Eravamo una startup. Ogni sprint era pieno di funzionalità, correzioni di bug e richieste dei clienti. Costruire un servizio interno di elaborazione screenshot — con sistema di template, rendering di cornici dispositivo, sovrapposizione di testo ed esportazione specifica per store — era un progetto di mesi che semplicemente non potevamo giustificare. Dovevamo consegnare prodotto, non strumenti.

3. Lavoro manuale che non scalava

Per un periodo, provammo un approccio semi-manuale: il designer creava i template, uno script li elaborava in batch, e qualcuno verificava e caricava manualmente. Ma questo si rompeva costantemente. Un font era sbagliato, una cornice non si allineava, il testo traboccava in tedesco ma andava bene in inglese. Ogni caso limite diventava un'emergenza.

4. L'integrazione della pipeline era il pezzo mancante

Volevamo un flusso completamente automatizzato: il codice viene pushato, la pipeline esegue i test, gli screenshot vengono catturati, gli screenshot vengono elaborati con il branding giusto, e Fastlane li carica sugli store. Il pezzo mancante era sempre il passaggio di elaborazione. Non c'era nessun servizio che potessimo semplicemente chiamare dalla nostra pipeline CI con un'API.

Come l'abbiamo risolto

Questa frustrazione è esattamente il motivo per cui Screenshots Live esiste. L'idea era semplice: un servizio di elaborazione che prende screenshot grezzi, applica template creati dal designer con cornici dispositivo e branding, e restituisce immagini pronte per lo store — tutto tramite una semplice chiamata API che si integra in qualsiasi pipeline CI/CD.

L'integrazione GitLab + Fastlane

Ecco come appariva la nostra pipeline dopo aver integrato Screenshots Live:

Fase di Build & Test: GitLab CI compila l'app per ogni variante whitelabel. I test UI vengono eseguiti e catturano screenshot grezzi usando Fastlane snapshot / screengrab.
Fase di elaborazione screenshot: Uno script semplice scorre gli screenshot catturati, chiama Screenshots Live con l'ID template e i parametri di branding corretti per ogni cliente, e scarica le immagini elaborate.
Fase di upload: Fastlane deliver (iOS) e supply (Android) caricano gli screenshot elaborati sui rispettivi store.

L'intero flusso — dal push del codice agli screenshot pronti per lo store — è diventato completamente automatizzato. Nessun coinvolgimento del designer per i rilasci di routine. Nessun QA manuale dei layout degli screenshot. Nessuna emergenza quando un cliente richiedeva un rilascio hotfix alle 17 di venerdì.

Cosa è cambiato

Risparmio di tempo

Quello che prima richiedeva al nostro designer 2-3 giorni per ciclo di rilascio ora richiede zero tempo umano. La pipeline gestisce tutto. Per 20 app con rilasci bisettimanali, sono circa 40-60 giorni-designer risparmiati all'anno — tempo che il nostro designer poteva dedicare al design reale del prodotto invece dell'assemblaggio ripetitivo di screenshot.

Coerenza

Ogni screenshot, per ogni cliente, per ogni dimensione di dispositivo, segue esattamente lo stesso template. Niente più problemi "la versione iPhone 15 Pro Max ha il testo leggermente disallineato". I template sono pixel-perfect, e vengono applicati in modo coerente ogni singola volta.

Indipendenza del designer

Il nostro designer poteva aggiornare i template quando voleva — nuove cornici dispositivo, testo di marketing aggiornato, design stagionali — senza bisogno dell'intervento degli sviluppatori. Aggiornava il template nell'editor visuale, e l'esecuzione successiva della pipeline lo raccoglieva automaticamente.

Onboarding dei clienti

Aggiungere un nuovo cliente whitelabel è passato da "programmare 2 giorni di lavoro di design" a "creare una nuova variante di template con i loro colori di marca e logo". La pipeline si occupava del resto.

Perché lo stiamo rendendo disponibile

Dopo averlo usato internamente e aver visto quanto tempo risparmiava, ci siamo resi conto che questo non era un problema unico per noi. Ogni sviluppatore di app che pubblica sull'App Store o Google Play ha a che fare con la generazione di screenshot. Gli sviluppatori whitelabel hanno la situazione peggiore, ma anche un team con una singola app con supporto multilingua affronta lo stesso problema moltiplicatore.

Quindi l'abbiamo ripulito, abbiamo costruito un'API con documentazione, aggiunto un editor di template che anche i non-sviluppatori possono usare, e l'abbiamo aperto. Se stai spendendo ore a creare manualmente screenshot per l'App Store, o se la tua pipeline ha un vuoto tra "catturare screenshot" e "caricare sullo store", Screenshots Live riempie quel vuoto.

L'abbiamo costruito perché ne avevamo bisogno. Lo condividiamo perché sappiamo che ne hai bisogno anche tu.