Jak zbudować aplikację Ionic przy pomocy Ionic Hub

Jak zbudować aplikację Ionic przy pomocy Ionic Hub

Tworząc aplikację w Ionicu spotykamy się z problemem zbudowania paczki apk dla Androida oraz ipa dla iOS. Sposobów na to jest kilka, załóżmy że pracujemy na komputerze z systemem linux, gdzie nie mamy możliwości zainstalowania XCode. Do zbudowania aplikacji możemy użyć narzędzia dostarczanego przez twórców Ionica i nazwanego Appflow, jest ono dostępne pod adresem ionicframework.com (stronę tą będziemy dalej nazywać Ionic Hub). Wersja “Starter” narzędzia Appflow jest darmowa, natomiast z cenami innych wersji można się zapoznać na stronie https://ionicframework.com/pricing#appflow.

Pierwsze co musimy zrobić to dodać naszą aplikację na stronie https://dashboard.ionicframework.com/personal/apps, po kliknięciu “Add app” mamy dwie możliwości: 

1. Utworzyć zupełnie nową aplikację
2. Powiązać istniejącą aplikację z narzędziem Appflow

W pierwszym przypadku należy jedynie podać nazwę aplikacji, w drugim otrzymamy instrukcję którą należy wykonać aby powiązać istniejącą aplikację. Kiedy już nasza aplikacja jest dodana, pojawi nam się jej Dashboard na którym klikamy “Build a Native Binary”.

Po kliknięciu, pojawi się pytanie:

Odpowiedź zależy od tego co wybraliśmy w pierwszym roku: nową aplikację czy istniejącą. Dla potrzeb tego artykułu wybieram “No, show me how”.

Następne pytanie dotyczy klienta Ionic CLI

Raz jeszcze wybieram “No, show me how”. Oczywiście klienta instalujemy tylko raz, więc jeśli wcześniej już go zainstalowałeś, możesz wybrać “Yes”.

Podążając za instrukcjami które pojawią się na stronie wykonujemy kolejno polecenia:

npm install -g ionic – zainstaluje nam to zestaw konsolowych narzędzi Ionica

ionic start myApp tabs – utworzy nam to nowy projekt Ionic. Ważne żeby uruchomić to w odpowiednim katalogu, w którym chcemy mieć aplikację. Jeśli chcemy utworzyć zupełnie pustą aplikację możemy słowo “tabs” zamienić na “blank”.  Po wykonaniu polecenia zostaną pobrane potrzebne biblioteki, po jego zakończeniu możemy przetestować naszą aplikację w przeglądarce, aby to zrobić należy przejść do nowo-utworzonego katalogu myApp i wykonać polecenie:

ionic serve

Nasza aplikacja działa już w przeglądarce, możemy więc zakończyć proces `ionic serve` przy pomocy CTRL+C i przejść dalej.

Następne polecenie należy wykonać niezależnie czy właśnie stworzyliśmy nowy projekt czy też chcemy zbudować istniejący:

ionic link

Po wykonaniu polecenia, w konsoli pojawi się kilka pytań:

? What would you like to do? (Use arrow keys)

❯ Link an existing app on Ionic Appflow 

  Create a new app on Ionic Appflow 

Utworzyliśmy już wcześniej aplikację na stronie Ionic Hub, więc wybieramy pierwszą odpowiedź. Następnie otrzymamy listę aplikacji do wyboru, wybieramy tą którą wcześniej utworzyliśmy. Następnie pada pytanie:

? Which git host would you like to use? (Use arrow keys)

GitHub 

❯ Ionic Appflow

Ja wybrałem Ionic Appflow. Na koniec otrzymujemy informacje:

> ionic config set id „acfa23d5” –json

[OK] id set to „acfa23d5”!

> ionic git remote

> git remote add ionic git@git.ionicjs.com:polcode/jktest.git

[OK] Added remote ionic.

[OK] Project linked with app acfa23d5!

Od tej pory możemy pushować commity aplikacji do Ionic Hub przy pomocy polecenia:

git push ionic – przy pierwszym uruchomieniu tego polecenia należy podać nazwę brancha: `git push ionic master`, później już wystarczy samo git push ionic.

Co ważne, jeśli nasza aplikacja ma już skonfigurowane repozytorium git, nadal możemy do niego pushować poleceniem `git push`.

Jeśli spushowaliśmy naszą aplikację, powinniśmy zobaczyć commit w sekcji “Commits” w Ionic Hub:

Teraz przejdźmy do sekcji “Deploy” gdzie czeka na nas taki ekran:

Możemy kliknąć “Create your first build” aby stworzyć build ręcznie, ale dużo lepszym rozwiązaniem jest automatyzacja, aby ją skonfigurować przejdź do sekcji “Automate” w menu Ionic Hub:

Kliknij “Create your first Automation”, zobaczysz formularz:

W polu “Name” możesz wpisać dowolną wybraną przez Ciebie nazwę, np. MyAutomation, w polu “Git Branch” podaj “master” (lub inny branch jeśli chcesz), pozostałe pola zostaw bez zmian i kliknij “Create”. Od tej pory po każdym wysłaniu zmian to Ionic Hub (poleceniem git push ionic) build wykona się automatycznie. Dla przykładu utworzyłem plik README.md i wysłałem commit do Ionic Hub, teraz w sekcji Deploy -> Builds widzę że aplikacja się buduje:

Klikając numer w kolumnie “BUILD” możemy zobaczyć szczegóły procesu budowania:

Strona ta pokazuje na bieżąco szczegółowe logi, więc w razie problemów mamy możliwość sprawdzić co się dzieje, na przykład mój build się nie wykonał gdyż nie zainstalowałem Capacitor/Cordova:

Naprawiłem błąd dodając Cordova do projektu:

ionic cordova platform

Przy okazji dodałem też platformy Android i iOS

ionic cordova platform add android
ionic cordova platform add ios

Następnie raz jeszcze wysyłam moje zmiany do Ionic Hub i po chwili widzę pomyślnie wykonany build:

Mała uwaga: Strona “Web builds” czasami nie odświeża się automatycznie, więc jeśli widzimy że nasz build jest długo “in progress” warto spróbować odświeżyć stronę.

Identyfikator aplikacji

Istotną kwestią jest ustalenie identyfikatora naszej aplikacji, ustawiamy go w pliku config.xml w atrybucie “id” tagu “<widget>”, domyślnie jest to “io.ionic.starter” i należy to zmienić na wymyślony przez nas unikalny identyfikator aplikacji.

Standardem jest używanie notacji domenowej z odwrotną kolejnością (reverse domain name notation), np. com.mydomain.myapp. Ważne jest, żeby identyfikator zawierał tylko litery, cyfry i kropki, ponieważ inne znaki mogą powodować problemy przy dystrybucji aplikacji.

Certyfikaty

Następnym krokiem jest utworzenie paczki dla Android/iOS, ale zanim będzie to możliwe musimy utworzyć plik keystore, certyfikat i plik .mobileprovision.

Na początek utworzymy klucze i certyfikaty deweloperskie. 

Android

W przypadku Androida sprowadza się to do wygenerowania keystore poleceniem:

keytool -genkey -v -keystore MY-RELEASE-KEY.keystore -alias MY_ALIAS_NAME -keyalg RSA -keysize 2048 -validity 10000

W miejsce MY-RELEASE-KEY i MY_ALIAS_NAME należy wpisać nazwę naszej aplikacji, np. Myapp. Polecenie to należy wykonać w katalogu gdzie chcemy przechowywać nasze klucze, powinien to być katalog poza katalogiem projektu, warto również trzymać kopię kluczy, ponieważ po ich utraceniu nie będzie możliwości odzyskania!

Kolejną istotną rzeczą jest podanie hasła dla keystore, zostaniemy o nie zapytani po wykonaniu powyższego polecenia. Hasło należy również przechować w trwałym i bezpiecznym miejscu. Kolejne pytania  można pominąć wciskając przy każdym ENTER, jedynie w pytaniu o poprawność danych należy odpowiedzieć “yes”:

Po zakończeniu polecenia w bieżącym katalogu pojawi się plik keystore, w moim przypadku jest to myapp.keystore. Później wgramy go do Ionic Hub, teraz stwórzmy potrzebne pliki dla iOS.

iOS

Procedura dla iOS jest nieco dłuższa, przed przystąpieniem do jej wykonania należy utworzyć konto na stronie: https://developer.apple.com/ jeśli jeszcze takiego nie mamy.

Rejestrujemy identyfikator aplikacji

Na stronie https://developer.apple.com/account/resources/identifiers/list klikamy ikonę z plusem i pojawia nam się formularz:

Wybieramy “App IDs” i przechodzimy dalej. Znajdziemy się na ekranie z kolejnym formularzem:

 Tutaj najważniejsze jest podanie w polu Bundle ID identyfikatora aplikacji zgodnego z tym co mamy w config.xml. Przychodzimy dalej, klikamy “Register” i po chwili na liście “Identifiers” widzimy nasz identyfikator.

Rejestracja urządzenia

W wersji deweloperskiej nasza aplikacja będzie działać tylko na urządzeniach, które do niej przypiszemy. Urządzenie dodajemy klikając ikonę plusa na stronie: https://developer.apple.com/account/resources/devices/list, otwiera się wówczas formularz:

Tutaj podajemy nazwę urządzenia widoczną tylko dla nas i jego “Device ID (UDID)”. Jeśli nie znasz UDID swojego urządzenia, użyj tego narzędzia: https://showmyudid.com/

Certificate Signing Request

Następnym krokiem jest wygenerowanie “Certificate Signing Request” – pliku który będzie potrzebny do wygenerowania certyfikatu.

Przejdźmy raz jeszcze do katalogu z naszymi kluczami i wykonajmy tam polecenia:

openssl genrsa -out <KEY_NAME>.key 2048

openssl req -new -key <KEY_NAME>.key -out CertificateSigningRequest.certSigningRequest

KEY_NAME w obu poleceniach zamieniamy na naszą nazwę, np. Myapp.key

Zostaniesz zapytany o dane kontaktowe, możesz je pominąć, podaj jednak hasło w pytaniu “A challenge password”.

W rezultacie otrzymamy plik CertificateSigningRequest.certSigningRequest, teraz możemy przystąpić do generowania certyfikatu.

Certyfikat

Na stronie https://developer.apple.com/account/resources/certificates/list kliknij ikonę plusa, otworzy się formularz:

Zaznaczamy “iOS App Development”, klikamy “Continue”, pokazuje się “Upload a Certificate Signing Request”, wgrywamy tu nasz poprzednio wygenerowany plik CertificateSigningRequest.certSigningRequest i przechodzimy dalej. Na kolejnym ekranie zobaczysz podsumowanie twojego certyfikatu i przycisk “Download” – kliknij go i zapisz plik z certyfikatem ios_development.cer.

Teraz musimy przekształcić plik, aby uzyskać plik .p12.

Wykonujemy dwa polecenia:

openssl x509 -inform DER -outform PEM -in ios_development.cer -out ios_development.cer.pem

openssl pkcs12 -export -inkey keyname.key -in ios_development.cer.pem -out Certificates.p12

W drugim z powyższych poleceń podajemy hasło, które będziemy musieli później podać w Ionic Hub.

Provisioning Profile

Ostatnią rzeczą, którą musimy zrobić na stronie Apple Developer jest wygenerowanie provisioning profile. Na stronie https://developer.apple.com/account/resources/profiles/list klikamy ikonę plusa i przechodzimy do formularza:

Zaznaczamy “iOS App Development” i klikamy “Continue”, następnie na stronie “Select an App ID” wybieramy z listy rozwijanej nasz identyfikator aplikacji i raz jeszcze klikamy “Continue”, na następnym ekranie zaznaczamy nasz certyfikat i przechodzimy dalej. Na ekranie “Select Devices” zaznaczamy poprzednio dodane urządzenia na których będziemy testować naszą aplikację i przechodzimy do ostatniego kroku, tutaj podajemy nazwę naszego profilu, np. MyProfile i klikamy przycisk “Generate”. Po wygenerowaniu, klikamy Download i zapisujemy plik .mobileprovision.

Ważna uwaga: jeśli w przyszłości będziemy chcieli dodać kolejne urządzenia do naszej aplikacji w wersji deweloperskiej, dodajemy je w zakładce devices a następnie edytujemy provisioning profile, zaznaczając nowe urządzenia, generujemy nowy plik, zapisujemy go ponownie i wgrywamy do Ionic Hub.

Wgranie certyfikatów w Ionic Hub

W tym momencie mamy już wszystkie potrzebne pliki (pamiętaj o utworzeniu kopii zapasowej dla nich i przechowywaniu haseł w bezpiecznym miejscu). Możemy wrócić do Ionic Hub.

W Ionic Hub wchodzimy do Package > Certificates, klikamy “Add Profile”, podajemy przyjazną nazwę, np. MyAppDev, w polu “type” wybieramy “Development” i klikamy create. Pokaże się nam formularz:

W zakładce iOS wypełniamy:

• W polu “App Development/Store Certificate” wgrywamy nasz plik Certificates.p12
• W polu “Provisioning Profile” nasz plik .mobileprovision
• W polu Certificate Password hasło, które podaliśmy tworząc certyfikat

W zakładce Android wypełniamy:

• W polu “Keystore File” wgrywamy nasz plik .keystore
• W polu “Key Alias” podajemy alias taki sam jak podaliśmy tworząc keystore, np. Myapp
• W polu “Keystore Password” podajemy hasło jakie podaliśmy tworząc keystore
• W polu “Key Password” podajemy hasło jakie podaliśmy tworząc klucz

Aby nie pogubić się w hasłach można we wszystkich miejscach podać takie samo hasło, choć ze względów bezpieczeństwa lepiej podawać różne i zapisywać je z odpowiednią adnotacją, pozwalającą określić które hasło jest do czego.

Budowanie paczek ipa i apk

Teraz możemy przystąpić do tworzenia paczki, przechodzimy do Package > Builds i klikamy “New Package Build”, następnie wybieramy commit z którego chcemy stworzyć paczkę, wybieramy OS, dla iOS wybieramy “iOS – XCode 10”, dla Androida wybieramy “Android”, w polu “Build Type” zaznaczamy Development dla iOS lub Debug dla Androida, w przypadku iOS wybieramy też nasz Security Profile (w przypadku androida i typu Debug nie musimy tego robić).

Klikamy “Package Build” i widzimy ekran z informacjami o budowaniu paczki:

Jeśli budowanie przejdzie bez błędów zobaczymy przycisk “Download IPA” lub “Download APK” zależnie od wybranego OS. Po kliknięciu przycisku zapisujemy plik na naszym komputerze.

Dystrybucja w trybie deweloperskim

Teraz, gdy mamy już stworzone paczki, możemy je zainstalować na naszym telefonie i wysłać do testerów. W tym celu polecam serwis https://www.diawi.com/ w którym znajdziemy taki formularz:

Przeciągamy naszą aplikację do pola “Drag&drop files here”, odznaczamy oba checkboxy u dołu, klikamy “More options” i podajemy hasło, które wyślemy testerom wraz z linkiem do aplikacji w diawi, opcjonalnie możemy podać nasz adres w polu “Email”, aby otrzymać link e-mailem.

Kiedy aplikacja wgra się do diawi i klikniemy “Send” pokażę nam się strona z QR Code, który możemy zeskanować na telefonie, aby zainstalować aplikację.

Uwaga: czasami aplikacja na Androidzie nie uruchamia się, a debugując ją znajdujemy logi dotyczące Play Protect, aby tego uniknąć warto zgłosić nasz identyfikator aplikacji na stronie: https://support.google.com/googleplay/android-developer/contact/protectappeals. Tą czynność wykonujemy jednorazowo.

Co dalej?

W tym momencie mamy skonfigurowane wszystko co potrzebne do budowania aplikacji w trybie deweloperskim. Procedura przy budowaniu aplikacji w trybie produkcyjnym wygląda podobnie, z tą różnicą, że w certyfikat w Apple Developer generujemy zaznaczając “iOS Distribution (App Store and Ad Hoc)” zamiast “iOS App Development”, a tworząc Security Profile w Ionic Hub zaznaczamy type “Production”.

Dystrybucja aplikacji w Google Play i App Store to temat na osobny artykuł, natomiast warto wspomnieć o jednej rzeczy: plik .ipa musimy wgrać do App Store Connect przy pomocy narzędzia AppLoader, które działa tylko na Macu, na szczęście z pomocą przychodzi serwis https://www.macincloud.com/ gdzie możemy wykupić dostęp do zdalnego Maca w opcji Pay-As-You-Go, czyli płacimy za godziny używania. Do wgrania aplikacji wystarczy nam zaledwie kilka minut, więc nie jest to drogie rozwiązanie.

Podsumowanie

Choć artykuł ten jest dość długi a cały proces wydaje się skomplikowany to po pierwszym przejściu przez wszystkie kroki będziecie wiedzieli z czym to się je i przy kolejnych aplikacjach większość rzeczy zrobicie już sami. Niemniej zachęcam do zachowania sobie linka do tego artykułu np. w zakładkach w przeglądarce, aby móc do niego wrócić gdy będzie potrzeba.