Jak utworzyć i udostępnić aplikację mobilną TWA?

1. Wymagania

2. Tworzenie aplikacji

Pobierz repozytorium z plikami, na podstawie których skonfigurujesz i stworzysz aplikację  swojego e-Sklepu: https://www.ibard.com/d/dc5ebebad7476e198d1d5961fb084fbf52823ed2

Po pobraniu rozpakuj folder z plikami w dowolnej lokalizacji. Następnie pobierz i zainstaluj Android studio na komputerze: https://developer.android.com/studio/install

Otwórz Android Studio, a następnie wybierz opcję Open:

W następnym kroku wskaż folder z plikami ściągniętymi z repozytorium, a w nim svgogm-twa-master oraz wybierz OK.

Jeżeli na komputerze nie jest zainstalowany GIT, po otwarciu projektu w Android Studio w prawym dolnym rogu pojawi się okienko z informacją o jego braku z linkiem do instalacji. Po wybraniu linka i zainstalowaniu GITa przechodzimy do kolejnego kroku.

W Android Studio otwórz plik app/build.gradle . Aby to zrobić w górnej części Android Studio pod menu nawigacji, otwórz folder app oraz znajdujący się w nim plik build.gradle:

Po otwarciu pliku skonfiguruj następujące pola:

1. hostName – adres sklepu internetowego, dla którego tworzysz aplikacje np. „twojadomena.pl”. Sklep musi mieć zainstalowany certyfikat SSL (https) lecz podaj go tutaj bez https,
2. name – jest to nazwa, która pojawiać się będzie pod ikonką aplikacji na telefonach,
3. applicationId – nazwa paczki aplikacji widoczna w Konsoli Google Play

W Android Studio przejdź do File/ Settings/ Appearance & Behavior/ System Setting/ Android SDK oraz na zakładce SDK Platforms wybierz wersję systemu Android, którą posiadasz na komórce i będziesz wykorzystywał w jednym z kolejnych kroków przygotowywania aplikacji swojego sklepu.

Następnie przejdź na zakładkę SDK Tools i zaznacz Android SDK Build-Tools (domyślnie jest zaznaczone jako „-„) i Android SDK Command-line Tools. Resztę pozostaw domyślnie. Zaakceptuj zmiany i zainstaluj komponenty.

Kolejnym krokiem jest utworzenie odcisku cyfrowego certyfikatu SHA-256 koniecznego do podpisania aplikacji TWA. Można to zrobić korzystając z aplikacji KeyStore Explorer. Należy utworzyć nowy plik JKS, a następnie wygenerować klucz RSA. Po naciśnięciu View full certificate fingerprint widoczny będzie utworzony klucz SHA-256.

Na komputerze przejdź do panelu administracyjnego e-sklepu oraz dodaj do plików szablonu (do folderu JS) folder well-known oraz plik assetlink.json. Aby to zrobić przejdź do Wygląd sklepu > Ustawienia > Więcej (ikona 3 kropek) > Edytuj ustawienia zaawansowane > Więcej > Edytuj HTML. Następnie wybierz przycisk Dodaj i wpisz w wymagane pola Ścieżka: js/well-known oraz Nazwa pliku: assetlinks.json oraz wybierz DODAJ.

Po dodaniu pliku przejdź w panelu administracyjnym do niego we wskazanej lokalizacji. Wybierz go. Po prawej stronie widoczna będzie pusta zawartość pliku.

W miejscu tym wklej dane zawierające dane klucza. Twój plik assetlinks.json powinien wyglądać następująco:


[
{
"relation": ["delegate_permission/common.handle_all_urls"],
"target":
"namespace": "android_app"
"package_name": "com.example.comarchtwa"
"sha256_cert_fingerprints": ["12:34:56:78:9A:BC:DE:F0:12:34:56:78:9A:BC:DE:F0:12:34:56:78:9A:BC:DE:F0:12:34:56:78:9A:BC:DE:F0"] }
}
]

Plik assetlinks.json zawiera certyfikat podpisywania aplikacji (Odcisk cyfrowy certyfikatu SHA-256) oraz umożliwia dostęp aplikacji do strony po zweryfikowaniu zgodności odcisku cyfrowego. Podczas dodawania aplikacji w Google Play Console w jednym z kroków należy wybrać sposób podpisywania aplikacji. Jeżeli wybierzemy własny certyfikat należy przekopiować Odcisk cyfrowy certyfikatu SHA-256 znajdujący się w pliku .json.

Jeżeli natomiast wybierzemy, aby google wygenerowało certyfikat to w takim wypadku należy przekopiować z google certyfikat do pliku .json, który dodaliśmy do szablonu.

Narzędzie google dla deweloperów do weryfikacji poprawności dodania pliku .json: https://developers.google.com/digital-asset-links/tools/generator

Ostatnim krokiem, jaki należy wykonać w celu utworzenia aplikacji na potrzeby jej udostępnienia, jest wygenerowanie pliku AAB w Android Studio. Powróć do Android Studio.

Z menu u góry okna programu wybierz Build/ Generate Signed Bundle/APK a następnie wybierz Android App Bundle.

Wypełnij wymagane pola tworząc nowy klucz lub korzystając z już istniejącego (jeżeli już wcześniej tworzyłeś taki klucz np. na potrzeby innych aplikacji).

W ostatnim kroku wybierz „release„.

Po utworzeniu pliku AAB z aplikacją, w prawym dolnym rogu okna Android Studio pojawi się komunikat z możliwością zlokalizowania utworzonego pliku. Skorzystaj z przycisku locate. Plik ten będzie potrzebny do udostępnienia aplikacji w Google Play Store.

3. Udostępnianie aplikacji w Google Play

Zarejestruj konto deweloperskie w Google Play. Opłaty związane z aktywacją kont Google Play ponosi Klient:

• https://play.google.com/apps/publish/signup/ – 25 USD Google Play / bezterminowo

Przed umieszczeniem aplikacji w sklepie Google Play wymagane jest zdefiniowanie informacji o aplikacji w Google Play Console.

Dodawanie aplikacji

Po zalogowaniu do https://play.google.com/apps/publish/ należy przejść do obszaru Wszystkie aplikacje i dodać nową aplikację przyciskiem UTWÓRZ APLIKACJĘ.

Na otwartym formularzu dodawania aplikacji należy wybrać język domyślny i zdefiniować nazwę aplikacji.

Po utworzeniu nowej aplikacji zostanie wyświetlone menu z obszarami konfiguracyjnymi.

W pierwszej kolejności należy zdefiniować Informacje o aplikacji, następnie przejść do Wersji aplikacji i wgrać utworzony we wcześniejszych korkach plik .aab. W kolejnych krokach trzeba wykonać Ocenę treści oraz wybrać opłaty i kraje w obszarze Ceny i dystrybucja. Po prawidłowo przeprowadzonej konfiguracji ikony powyższych obszarów zmienią się na zielone, a z poziomu Wersje aplikacji będzie możliwość udostępnienia Twojej aplikacji w sklepie Google Play.

Więcej na temat konfiguracji aplikacji w Google Play Console możesz przeczytać w pomocy Google: https://support.google.com/googleplay/android-developer/answer/113469?hl=pl&ref_topic=7072031

Dodatkowe informacje na temat aplikacji TWA znajduje się w artykule: Co to jest aplikacja TWA (Trusted Web Activity)?