DEV Community

Juraj Chovan
Juraj Chovan

Posted on

Build-ovanie Ionic (ver.6) aplikácie pre Google Store

V nasledujúcom postupe je ukázané ako vybuild-ovať Ionic (ver.6) aplikáciu až do podoby vhodnej na publikovanie v Google PlayStore.

  1. Príprava Ionic aplikácie a nastavení:

Projekt Ionic aplikácie mám fyzicky umiestnený v nejakom lokálnom adresári, napr.:

C:\Projects\Ionic\Ionic6App_(verX)\
Enter fullscreen mode Exit fullscreen mode

Image description
V tejto Ionic aplikácii (nejakým spôsobom) využívam Capacitor geolokačný plugin.

Prvým krokom je pridanie príslušnej platformy (android, ios, ...) do projektu Ionic aplikácie. Vykonať to spustením príkazu (v prípade pridania platformy "android"):

ionic capacitor add android
Enter fullscreen mode Exit fullscreen mode

Image description
Zbehnutím tohto príkazu je vytvorený v projekte nový adresár "android" s príslušným obsahom:

Image description

Ak si potrebujem zistiť aké verzie jednotlivých nástrojov a knižníc aktuálne v projekte používam, spustiť príkaz:

ionic info
Enter fullscreen mode Exit fullscreen mode

Image description
zistiť verziu knižnice Cordova (rovnako ako novší "Capacitor" sprostredkúva natívne funkcionality mobilného zariadenia):

cordova -v
Enter fullscreen mode Exit fullscreen mode

Na build-ovanie Ionic aplikácie potrebujem mať zinštalovaný IDE "Android Studio" a tiež nástroj "Gradle" a (samozrejme) Javu.
Zistím si ešte verziu aktuálne dostupného "Gradle" nástroja:

gradle -v
Enter fullscreen mode Exit fullscreen mode

a verziu Javy:

java -version
Enter fullscreen mode Exit fullscreen mode

Image description

Ďalším krokom je nastavenie vyžiadania povolení vo vybuild-ovanej aplikácii (to je to, ak si spustím potom hotovú, nainštalovanú aplikáciu už na mobilnom zariadení, tak ma požiada o povolenie využívať napr.polohu zariadenia, prístup na galériu, fotoaparát, atď.). Toto nastavenie musim doplniť v súbore projektu:

...\android\app\src\main\AndroidManifest.xml
Enter fullscreen mode Exit fullscreen mode

kde je potrebné v časti "Permissions" pridať nasledujúce:

    ...
    <!-- Geolocation API -->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-feature android:name="android.hardware.location.gps" />
    <!-- Network API -->
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    ...
Enter fullscreen mode Exit fullscreen mode

Teraz si nastaviť verziu kódu aplikácie - každý ďalší release, ktorý publikujem na Google Store/Play musí mať rozdielný kód kódu. Toto nastaviť/zeditovať v súbore:

...\android\app\build.gradle
Enter fullscreen mode Exit fullscreen mode

asi takto:

android {
    compileSdkVersion rootProject.ext.compileSdkVersion
    defaultConfig {
        applicationId "eu.bigoo.pocasicko"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 5
        versionName "4.1"
        ...
Enter fullscreen mode Exit fullscreen mode

parameter "versionName" je informácia, ktorá sa zobrazí pre používateľov aplikácie, a parameter "versionCode" je interné číslo pre release manažment v Google.

Posledným nastavením je zmena parametrov "minSdkVersion", "compileSdkVersion", "targetSdkVersion" a "cordovaAndroidVersion" opäť v súbore:

...\android\app\build.gradle
Enter fullscreen mode Exit fullscreen mode

resp.v súbore:

...\android\variables.gradle
Enter fullscreen mode Exit fullscreen mode

asi takto:

ext {
    minSdkVersion = 26
    compileSdkVersion = 33
    targetSdkVersion = 33
    ...
    cordovaAndroidVersion = '10.1.1'
}
Enter fullscreen mode Exit fullscreen mode

Poznámka: Info o tom akú verziu použiť možno nájsť na tu resp.tu.
Týmto by sme mali mať všetko pripravené na spustenie procesu build-ovania Ionic aplikácie.

  1. Build-ovanie aplikácie:

Spusiť príkaz:

ionic capacitor build
Enter fullscreen mode Exit fullscreen mode

je potrebné vybrať platformu, pre ktorú chcem vybuild-ovať aplikáciu (v mojom prípade je to "android"):

Image description
build-ovaním projektu, vytvorí sa ďalší nový adresár "www":

Image description
a spustí sa "Android Studio" do ktorého sa naload-uje projektová adresárova štruktúra aj s celým obsahom:

Image description

V "Android Studio" sa cez menu "SDK Manager" v zobrazenom okne "Settings", v záložke "SDK Platforms" pozrieť aké verzie/platformy android-u mám k dispozícii (a prípadne si doinštalovať ďalšie potrebné):

Image description
a v záložke "SDK Tools", ktoré nástroje mám:

Image description
Teraz si v "Android Studio" cez menu "File - Project structure", v zobrazenom dialogu "Project structure" v časti "Modules" pozrieť v záložke "Properties", prípadne ešte nastaviť parametre "Compile Sdk Version", "Source compatibility", "Target compatibility" (ktoré sme už nastavovali predtým v konfiguračnom súbore):

Image description
a v záložke "Default config" skontrolovať/nastaviť parametre verzie kódu a ďalšie:

Image description
A teraz spustiť samotný build-ovací proces - cez menu "Build - Generate Signed Bundle/APK ..." a otvorí sa dialog "Generate Signed Bundle or APK", kde v prvom kroku vybrať verziu:

Android App Bundle
Enter fullscreen mode Exit fullscreen mode

čo je formát, ktorý je najnovšie podporovaný samotným Google Store/Play deployment manažmentom.
V ďalšom kroku nastaviť požadované parametre:

Image description
Nasleduje výber vybuild-ovanej varianty aplikácie:

Image description
a konečne spustiť build-ovací proces cez [Create].
Po nejakej chvíli, a ak všetko zbehne v poriadku:

Image description
a v adresári:

...\android\app\release\
Enter fullscreen mode Exit fullscreen mode

sa objaví súbor "app-release.aab", ktorý odporúčam premenovať na názov aplikácie, napr."Ionic6App.aab".
Tento súbor je pripravený na vypublikovanie na GoogleStore/Play.
...

Top comments (0)