Skip to content
Wszystkie wpisy
Blog25 marca 20264 min read
SL

Screenshots.live

Team

Przestac projektowac recznie: jak zautomatyzowac zrzuty ekranu App Store przez API

Dowiedz sie, jak automatycznie generowac, lokalizowac i integrowac zrzuty ekranu App Store w pipeline CI/CD za pomoca Screenshots.live i API.

Jesli publikujesz aplikacje w App Store lub Google Play, znasz ten problem: kazda aktualizacja, kazdy nowy jezyk, kazde nowe urzadzenie oznacza dziesiatki zrzutow ekranu do recznego utworzenia. To co jest wykonalne przy jednym jezyku, staje sie logistycznym koszmarem przy dziesieciu lub dwudziestu.

W tym artykule pokarzemy, dlaczego reczne tworzenie zrzutow ekranu nie skaluje sie i jak mozesz zautomatyzowac caly proces za pomoca Screenshots.live i rozwiazania opartego na API.

Dlaczego reczne tworzenie zrzutow ekranu nie skaluje sie

Wyobraz sobie, ze Twoja aplikacja obsluguje 15 jezykow i masz 6 zrzutow ekranu na strone sklepu. To 90 obrazow tylko dla jednej platformy. Dla iPhone i iPad liczba sie podwaja. Dodaj Google Play i szybko dochodzisz do kilkuset assetow.

Za kazdym razem, gdy zmienia sie interfejs lub promujesz nowa funkcje, musisz powtorzyc ten proces. To nie tylko kosztuje czas, ale jest tez podatne na bledy. Niepoprawne teksty, nieaktualne zrzuty ekranu lub niespojny branding to typowe konsekwencje.

Podejscie oparte na szablonach Screenshots.live

Screenshots.live rozwiazuje ten problem za pomoca systemu szablonow. Tworzysz wizualny szablon z miejscami na tekst, obrazy i ramki urzadzen. Ten szablon mozna nastepnie wypelnic przez API roznymi tresciami, aby generowac zlokalizowane zrzuty ekranu w kilka sekund.

Podstawowa zasada jest prosta: zaprojektuj raz, renderuj nieograniczenie. Twoj projektant tworzy szablon, a API zajmuje sie reszta.

Jak to dziala

1. Utworz szablon: W edytorze wizualnym Screenshots.live definiujesz uklad, czcionki, kolory i miejsca zastepeze.

2. Skonfiguruj wywolanie API: Wysylasz zadanie POST z pozadanymi tekstami i obrazami.

3. Odbierz zrzut ekranu: API zwraca wyrenderowany obraz gotowy do uzycia w sklepie.

Konfiguracja YAML do lokalizacji

Aby jeszcze bardziej uproscic proces, mozesz uzyc pliku YAML zawierajacego wszystkie teksty wedlug jezyka:

templates:
  - id: "hero-screenshot"
    layers:
      title:
        pl: "Opanuj swoje zadania"
        en: "Stay on Top of Tasks"
        fr: "Gerez vos taches"
      subtitle:
        pl: "Prosto. Szybko. Niezawodnie."
        en: "Simple. Fast. Reliable."
        fr: "Simple. Rapide. Fiable."

Prosty skrypt iteruje po jezykach i wywoluje API dla kazdej kombinacji. W ten sposob generujesz setki zrzutow ekranu w minuty zamiast dni.

Integracja z Fastlane

Jesli juz uzywasz Fastlane do wdrazania aplikacji, Screenshots.live integruje sie bezproblemowo. W swoim Fastfile mozesz zdefiniowac dedykowany lane, ktory generuje zrzuty ekranu i przesyla je bezposrednio:

lane :generate_screenshots do
  screenshots = generate_via_api(
    template_id: "hero-screenshot",
    locales: ["de", "en", "fr", "es"]
  )
  upload_to_app_store(
    screenshots_path: screenshots.output_dir
  )
end

W ten sposob generowanie zrzutow ekranu staje sie czescia istniejacego procesu wydawania.

Konfiguracja pipeline CI/CD

Jeszcze lepiej, gdy zintegrujesz generowanie zrzutow ekranu z pipeline CI/CD. Przy kazdym wydaniu nowe zrzuty sa automatycznie generowane i aktualizowane w sklepie. Typowy workflow wyglada tak:

1. Wyslanie zmiany kodu: Nowy commit uruchamia pipeline.

2. Build i testy: Aplikacja jest budowana i testowana.

3. Generowanie zrzutow ekranu: Pipeline wywoluje API Screenshots.live i generuje wszystkie zlokalizowane obrazy.

4. Upload do sklepu: Gotowe zrzuty ekranu sa automatycznie przesylane do App Store i Google Play.

# GitHub Actions Example
steps:
  - name: Generate Screenshots
    run: |
      python generate_screenshots.py \
        --template hero-screenshot \
        --locales de,en,fr,es,it,pt \
        --output ./screenshots
  - name: Upload to App Store
    run: fastlane deliver --screenshots_path ./screenshots

To podejscie calkowicie eliminuje kroki reczne i zapewnia, ze Twoje strony sklepu sa zawsze aktualne.

Automatyzacja lokalizacji

Najwieksza oszczednosc czasu pochodzi z lokalizacji. Zamiast recznie wstawiac teksty do obrazow dla kazdego jezyka, definiujesz tlumaczenia raz w pliku YAML lub pobierasz je bezposrednio z narzedzia do tlumaczen.

Screenshots.live obsluguje wszystkie popularne jezyki i systemy pisma. Czy to arabski z pismem od prawej do lewej, czy japonski ze zlozonymi znakami, silnik renderowania obsluguje wszystko poprawnie.

Dzieki integracji z platformami do tlumaczen takimi jak Lokalise lub Phrase mozesz calkowicie zautomatyzowac workflow: nowe tlumaczenia automatycznie uruchamiaja generowanie nowych zrzutow ekranu.

Zalety w porownaniu z recznym tworzeniem

Podsumowujac, podejscie zautomatyzowane oferuje nastepujace zalety:

  • Szybkosc: Setki zrzutow ekranu w minuty zamiast dni
  • Spojnosc: Wszystkie zrzuty ekranu sa zgodne z tym samym systemem projektowym
  • Skalowalnosc: Dodanie nowych jezykow lub urzadzen prawie nie wymaga dodatkowego wysilku
  • Redukcja bledow: Zadnych recznych literowek ani nieaktualnych zrzutow ekranu
  • Oszczednosc kosztow: Mniej godzin projektowania, szybszy time-to-market

Podsumowanie

Reczne tworzenie zrzutow ekranu to relikt z czasow, gdy aplikacje byly publikowane w jednym jezyku i na jedno urzadzenie. Dzisiaj, z globalnymi rynkami i dziesiatkami klas urzadzen, potrzebne jest podejscie zautomatyzowane.

Screenshots.live oferuje dokladnie to: system szablonow z poteznym API, ktore bezproblemowo integruje sie z istniejacymi workflow. Czy to Fastlane, GitHub Actions czy inny system CI/CD, integracja jest prosta, a korzysci ogromne.

Zacznij juz dzis i zautomatyzuj swoje zrzuty ekranu App Store. Twoje przyszle ja Ci podziekuje.

Powiązane posty