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/3d9e0a8ba9d90f1c11827cc25294d7c24a864d5d

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

Uwaga

applicationId musi posiadać przynajmniej jedną kropkę w nazwie np. „moja.nazwa”. Odstępy nie są dozwolone.

Wskazówka

Aby dokonać zmian w wyglądzie tła aplikacji, koloru motywu oraz koloru paska nawigacji należy zmienić wartości w polach themeColor, navigationColor, backgroundColor.

Po wypełnieniu wyżej opisanych pól, zapisz zmiany wybierając Sync Now w górnej części okna edycji.

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.

Wskazówka

Obecnie minimalną wersją aplikacji, jaka możliwa jest do umieszczenia w Google Play jest android 12 (API Level 31).

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.

Przygotuj telefon komórkowy do wykonania kolejnych kroków.

Na telefonie komórkowym włącz Debugowanie USB (Ustawienia/Opcje programisty).
Zainstaluj na telefonie Asset Link Tool:  https://play.google.com/store/apps/details?id=dev.conn.assetlinkstool (aplikacja potrzebna do wygenerowania pliku z certyfikatem podpisywania aplikacji „Odcisk cyfrowy certyfikatu SHA-256”).

Podłącz komórkę kablem USB do komputera. Obserwuj komunikaty pojawiające się na telefonie. Telefon może zapytać o dostęp do debugowania dla komputera, do którego został podłączony oraz standardowo o dostęp do aplikacji. Zezwól na debugowanie i dostęp. Po poprawnym wykonaniu powyższych kroków w górnej części okna Android Studio pojawi się nazwa podłączonego urządzenia.

Jeżeli po prawej stronie widoczny jest podłączony telefon a po lewej wybrane „app” wybierz ikonkę zielonej strzałki obok, aby zainstalować aplikację na telefonie. Poczekaj na wynik operacji. Android Studio poinformuje o zakończeniu instalacji, a aplikacja uruchomi się na telefonie oraz będzie widoczna z poziomu dostępnych aplikacji.

Włącz Asset Link Tool i wpisz w wyszukiwarce nazwę, którą podałeś w applicationId (w pliku build.gradle). Kliknij w nią, a następnie wybierz Share Asset Link i udostępnij/wyślij w takim sposób, aby móc pobrać na komputer.

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.

Pobierz na dysk wysłany we wcześniejszym kroku z telefonu komórkowego plik assetlinks.json. Otwórz plik w notatniku, a następnie przekopiuj jego zawartość do pustego pliku w panelu administracyjnym:

Po przekopiowaniu zawartości pliku skorzystaj z opcji zapisania i opublikowania zmian w szablonie (w prawym górnym rogu ekranu).

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)?