Fra Xcode Simulator til App Store: en arbeidsflyt for skjermbilder for utviklere

Skjermbildeproblemet som enhver iOS-utvikler kjenner

Du har brukt uker pa a perfeksjonere appen din. Grensesnittet er polert, animasjonene er jevne, og betatestere er fornoyde. Na kommer delen ingen advarer deg om i veiledninger: a lage App Store-skjermbilder for hvert enhet, hver lokalisering og hver skjermstorrelse Apple krever.

Hvis du har publisert bare en app, kjenner du prosedyren. Apne Xcode Simulator, naviger til riktig skjerm, trykk Cmd+S, gjenta for seks forskjellige enhetsstorrelser, apne deretter Figma eller Photoshop for a legge til tekstoverlegg og bakgrunner. Multipliser det med antall sprak du stotter, og du ser pa timer med repetitivt manuelt arbeid for noe som ikke engang er kode.

Denne artikkelen gar gjennom den tradisjonelle manuelle arbeidsflyten steg for steg, identifiserer flaskehalsene og erstatter systematisk hvert smertefulle steg med automatisering. Til slutt har du en helautomatisert pipeline som gar fra maldesign til App Store Connect-opplasting uten manuell inngripen.

Den manuelle arbeidsflyten: steg for steg

Steg 1: Ta skjermbilder i simulatoren

Reisen starter i Xcode. Du starter simulatoren for hver nodvendig enhet. For hver simulator navigerer du appen til riktig skjerm og trykker Cmd+S.

For en typisk app med 6 skjermbilder pa 5 enhetsstorrelser er det 30 enkeltfangster. Legg til 3 lokaliseringer, og du er pa 90 skjermbilder for du har apnet et designverktoy.

Steg 2: Storrelsesendring og formatering

Apple har strenge storrelseskrav for App Store-skjermbilder. Hver enhetsklasse forventer eksakte pikseldimensjoner. Hvis simulatorutdataene ikke stemmer noyaktig, avviser App Store Connect opplastingen.

Steg 3: Legge til tekstoverlegg og bakgrunner

Ra simulatorskjermbilder er ikke nok for en konkurransedyktig oppforing. De beste appene bruker noye utformede skjermbilder med bildetekster, merkevarebackgrunner og enhetsrammer. Dette steget alene kan ta en hel dag.

Steg 4: Eksportere for hver enhet

Med designene klare eksporterer du hvert bilde i riktig opplosning med riktige navnekonvensjoner.

Steg 5: Laste opp til App Store Connect

Til slutt apner du App Store Connect og begynner a dra skjermbilder til riktige plasser. Finner du en feil, gar du tilbake til Figma, retter, eksporterer pa nytt og laster opp pa nytt.

Identifisere flaskehalsene

• Gjentakelse pa tvers av enheter. Hver handling multipliseres med antall enhetsstorrelser.
• Gjentakelse pa tvers av sprak. Hver tekstendring betyr re-eksport for hvert sprak.
• Ingen enkelt kilde til sannhet. Figma-filen, simulatorfangstene og App Store Connect-opplastingene er frakoblet.

Den automatiserte pipelinen

Steg 1: Design en gang i Screenshots.live

I stedet for a designe i Figma lager du en mal i den visuelle editoren i Screenshots.live. Editoren fungerer direkte i nettleseren og er spesialbygget for App Store-skjermbilder.

Hver mal stotter dynamiske tekst- og bildelag. Hovedfordelen: en mal fungerer for flere enhetsstorrelser. Screenshots.live handterer rendering av enhetsrammer, sa du designer sammensetningen en gang og systemet tilpasser den for hver storrelse.

Steg 2: Definer innhold som data

const screenshots = [
  {
    templateId: "habit-tracker-main",
    layers: {
      headline: "Folg vanene dine uten anstrengelse",
      appScreenshot: "https://your-cdn.com/screens/home.png"
    }
  }
];

Steg 3: Render via API-et

curl -X POST https://api.screenshots.live/v1/render \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "templateId": "habit-tracker-main",
    "format": "png",
    "width": 1290,
    "height": 2796,
    "layers": {
      "headline": "Folg vanene dine uten anstrengelse"
    }
  }'

Steg 4: Automatiser opplasting med Fastlane

Fastlanes deliver-verktoy handterer App Store Connect-opplastinger fra kommandolinjen. Kombinert med Screenshots.live API kan du bygge en helautomatisert pipeline.

Steg 5: Integrer i CI/CD

Det siste steget er a kjore denne pipelinen automatisk i CI-systemet ditt.

Hva med Android?

Hvis du ogsa publiserer pa Google Play, stotter Screenshots.live Android-enhetsrammer, og malporteringsfunksjonen lar deg automatisk konvertere iOS-malene til Android-dimensjoner.

Tidssammenligning

Kom i gang

1. Registrer deg pa Screenshots.live og lag din forste mal i den visuelle editoren.
2. Sett opp innholdsdataene dine som en enkel JSON-fil med overskrifter og skjerm-URL-er for hvert sprak.
3. Skriv et lite renderingsskript som kaller Screenshots.live API for hver variasjon.
4. Kjor Fastlane deliver for a laste opp alt til App Store Connect med en kommando.
5. Legg til i CI for automatiske oppdateringer.

Hele oppsettet tar omtrent en time og betaler seg tilbake forste gang du trenger a oppdatere et skjermbilde pa flere enheter og sprak.