Ionic ohje

Ionic-sovelluksen luonti ja paketointi .apk-paketiksi Capacitorilla (testattu toimivaksi 27.3.2025)
  1. Asenna Ionic CLI: npm install -g @ionic/cli.
  2. Mene kansioon, jonne haluat luoda uuden ionic-projektin. Anna komento: ionic start, ja vastaa kysymyksiin seuraavasti:
  3. Sovellusrunko on valmis, ja voit aloittaa kehittämään sovellusta. Voit katsella kehittämääsi sovellusta selaimella, aivan kuin tavallista web-sovellusta. Kun haluat paketoida sovelluksen Android-sovellukseksi ja tutkia sitä emulaattorissa tai puhelimessa, jatka tätä ohjetta eteenpäin.
  4. Anna projektisi juuressa komento: ionic build, jolloin web-sovellus buildataan ja www-kansioon syntyy buildattu sovellus.
  5. Anna projektisi juuressa komento: ionic capacitor add android, jolloin sovellukseen asennetaan Android-projekti android-kansioon.
  6. Vaihda capacitor.config.ts -tiedostossa oleva appId joksikin yksilölliseksi nimeksi, jota ei ole muissa sovelluksissa.
  7. Seuraavaksi asennetaan Android Studio. Samalla asentuvat Android SDK ja Android emulaattori, joiden asentuminen voi kestää melko kauan. SDK ja emulaattori ovat uusimpia versioita. Kokeile emulaattoria Device Managerista. Jos asennat Device Managerissa +-merkistä uuden emulaattorin, saat tarvittaessa asennettua sille myös vanhemman SDK-kirjaston. Valitessasi SDK:n, paina SDK:n latausnappia, jolloin haluamasi SDK asentuu.
  8. Avaa projektisi Android Studiossa valitsemalla File->Open ja VSCode-projektin android-kansio. Tässä vaiheessa voi tulla virheilmoitus. Anna VSCodessa vielä komento: ionic capacitor sync android, jolla varmistetaan että projektin tiedostot ovat kunnossa buildia varten. Virheilmoituksen pitäisi kadota. Tämän jälkeen voit ajaa sovelluksen Android Studiossa painamalla yläpalkin vihreää nuolta (Run 'app'), jolloin Android-sovellus buildataan muistiin. Buildaus kestää hetken, ja sitten sovellus käynnistyy valittuun emulaattoriin.
  9. Jos tulee virheilmoituksia, ne johtuvat todennäköisesti Gradlen vanhasta versiosta. Tarvittaessa valitse Android Studiossa File->Project Structure ja katso että uusimmat Android Gradle Plugin ja Gradle versiot ovat valittuina. Paina Apply ja Ok. Gradlen kirjastoja ladataan ensin jonkin aikaa. Kun Gradle on valmis, anna VSCodessa vielä komento: ionic capacitor sync android. Kun virheilmoitukset häviävät, aja sovellus.
  10. Android Studio buildaa Android-sovelluksen oletuksena muistiin, josta se toimii emulaattorissa. Jos haluat tehdä fyysisen .apk-paketin, avaa ensin Main Menu (neljä viivaa allekkain vasemmassa yläkulmassa). Valitse sitten Build->Generate App Bundles or APKs->Generate APKs.
  11. Katso että .apk-paketti on syntynyt kansioon /android/app/build/outputs/apk. Kansiossa voi olla debug- ja release-kansiot. Debug-kansioon syntyy testaus/kokeilukäyttöön sopiva .apk-paketti ja release -kansioon syntyy viralliseen julkaisuun sopiva .apk-paketti. Release-kansio ja -paketti syntyvät vain silloin kun buildaat projektin --prod --release -määreellä.
  12. Testaa .apk-paketin eli valmiin mobiiliapplikaation toimintaa emulaattorilla. Voit painaa Android studion ylävalikon vihreää nuolta (Run), jolloin sovellus käynnistyy emulaattoriin. Voit myös vetää (drag and drop) .apk-paketin emulaattoripuhelimen ruudulle, jolloin paketti asentuu. Sovellusten ikonit näkyvät emulaattorissa kun kiskaiset hiiren osoittimella puhelinruudun alareunasta ylöspäin.
  13. Jos haluat julkaista sovelluksesi Google Playssa, katso Android Play Store Deployment.

Huomaa että Android Studio ja Gradle ovat erittäin bugisia ja esim. Android SDK:n versioiden ja Gradlen versioiden välillä voi olla epäyhteensopivuuksia. Mahdollisia ongelmia: Nodejs-versio saattaa olla liian vanha joten päivitä uusimpaan. Gradle (Android Studion build-tool) voi olla liian vanha joten päivitä se. Emulaattorin ja SDK:n versioissa voi olla ongelmia. Vanhemman SDK:n ja emulaattorin käyttäminen voi auttaa.