Ionic & Crosswalk – podrška za starije verzije Androida

Ionic Framework službeno podržava verzije Android platforme od 4.1 na više (iako će se i to s vremenom promijeniti) što znači da morate koristiti dodatna rješenja kako bi osigurali podršku za starije verzije Android platforme. Jedno od tih rješenja je i Crosswalk pa iako projekt više nije aktivan i dalje se može koristiti i tako osigurati potrebnu podršku vašoj Ionic aplikaciji.

Important: This project is not maintained anymore. The last Crosswalk release was Crosswalk 23. Read more in this announcement

Uvod

Zašto Ionic ukida podršku za starije verzije Androida?

Zato što se smanjuje njihov tržišni udio, a nije zanemarivo ni to da ih je sve teže testirati, drugačije se ponašaju na emulatoru u odnosu na pravi uređaj i jednostavno više nisu dovoljno dobre kako bi mogle pružiti pravo korisničko iskustvo koje današnji korisnici očekuju.

Stare verzije Androida lagano umiru na današnjem tržištu koje se vrlo brzo mijenja i nije isplativo više ulagati vrijeme za osiguravanje njihove podrške.

Today, we are updating our officially support Android version for Ionic 1 and 2. Going forward, we will only support Android 4.1 and above. We no longer support 4.0.x or anything pre 4. – Update: New Supported Android versions

Korištenje Crosswalka

Pokrenite novi Ionic projekt, dodajte Android platformu i na kraju instalirajte Crosswalk.

Ionic add Crosswalk

I to je sve što se tiče instalacije. Dalje nastavljate razvoj kao i do sada.

Dva APK-a (x86 i ARM)

Prilikom stvaranja APK-a primjetit ćete da na putanji NazivAplikacije\platforms\android\build\outputs\apk više nemate jedan APK (android-debug.apk) nego dva (android-armv7-debug.apk i android-x86-debug.apk).

Ionic dva APK-a

Kod pokretanja naredbe

Ionic sam prepoznaje koji uređaj je spojen na računalo tako da će instalirati samo onu verziju APK-a koju spojeni uređaj podržava.

Kako dva APK-a iste aplikacije objaviti na Google Play Store?

Na sreću Google podržava postavljanje dva APK-a iste aplikacije na Google Play Store. Korisnicima će prilikom instalacije aplikacije biti ponuđena verzija koja odgovara njihovim uređajima.

Google Play Store dva APK-a

Ako ne želite imati dva APK-a možete ih spojiti u jedan koristeći

unutar config.xml

Nedostatci Crosswalka

Iako će korištenje Crosswalka omogućiti vašoj Ionic aplikaciji podršku za starije verzije Androida kao i općenito ubrzati rad same aplikacije važno je znati da to dolazi uz određenu cijenu.

APK će narasti nekoliko puta kao što se može vidjeti iz sljedeće slike

Crosswalk APK

Verzija bez Crosswalka bila bi teška oko 5MB dok je sa Crosswalkom višestruko narasla na 30 – 35MB.

Ako ste nakon gore nevedenih nedostataka odlučili da ipak ne želite koristiti Crosswalk možete ga ukloniti koristeći sljedeću naredbu

Ionic 3 – Slanje SMS poruka

U ovom ću blog postu pokazati kako poslati SMS poruku iz Ionic 3 aplikacije koristeći Ionic Native 3x SMS plugin.

Prije svega, moram napomenuti da korištenje ovog plugina zahtijeva da mobilni uređaj na kojemu je instalirana aplikacija ima valjanu SIM karticu sa dovoljnim iznosom na računu. Ako se koristi neka od tarifa s neograničenom mogučnošću slanja SMS-ova onda ste bez brige.

Kreiranje aplikacije

Za početak ćemo kreirati novi Ionic 3 projekt.

Odmah možemo dodati i Ionic Native 3x SMS plugin.

I navesti SMS plugin unutar app.module.ts

Također, s obzirom da ću aplikaciju testirati na Android mobilnom uređaju treba dodati i Android platformu.

Sada imamo sve što nam je potrebno kako bi napravili primjer aplikacije iz koje će se moći slati SMS poruke.

Postavljanje SMS funkcionalnosti

Ionic3 SMS početni ekran Plan je napraviti ekran s dva gumba. Jedan će slati SMS za zadanim tekstom na zadani broj mobitela, a drugi će koristiti formu unutar koje se upisuje broj na koji se SMS želi poslati kao i sadržaj SMS-a.

Na koji način će se odvijati slanje SMS poruke može se vidjeti u home.ts datoteci. Imamo dvije funkcije posaljiSMS1() i posaljiSMS2(). Unutar svake od funkcija imamo options objekt. Više o njemu kao i ostalim mogućnostima možete pronaći u dokumentaciji https://github.com/cordova-sms/cordova-sms-plugin

Ako aplikaciju pokrenemo u web pregledniku $ ionic serve dobijemo ispis naših console.log poruka kao i obavijest da je aplikaciju potrebno pokrenuti na mobilnoj uređaju “Native: tried calling SMS.send, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator“.

Ionic3 SMS - Google Chrome

Pokretanje aplikacije na mobilnom uređaju

Prilikom instalacije aplikacije na mobilni uređaj će prikazati koje sve dozvole zahtjeva aplikacija. U ovom slučaju to je “slanje i pregled SMS poruka”.

Također, prilikom prvog slanja SMS poruke aplikacije će pitati korisnika za dozvolu slanja i pregleda SMS poruka na njegovom mobilnom uređaju.

Ionic3 - SMS

S obzirom da funkcija posaljiSMS1() u sebi sadržaja postavku koja poziva otvaranje zadane SMS aplikacije mobilnog uređaja na sljedećoj se slici može vidjeti kako to izgleda.

Ionic3 - SMS

Ako pozovemo drugi gumb tj. funkciju posaljiSMS2() SMS ćemo poslati direktno iz Ionic 3 aplikacije. Poslani SMS ostaje u mobilnom uređaju i moguće ga je kasnije vidjeti u zadanoj aplikacija koja inače služi za slanje i primanje SMS-ova.

Ionic3 - SMS

Osoba koja primi SMS poruku ne zna da je poruka poslana putem Ionic 3 aplikacije.

Ionic3 - SMS

Zaključak

I to je sve! Ovo je bio prikaz korištenja Ionic Native 3.x SMS plugina koji omogućava slanje SMS poruka iz Ionic aplikacije.

Ionic 2 – Push notifikacije za Android

Push notifikacije postaju sve popularnije i nisu više rezervirane samo za nativne mobilne aplikacije. U ovom ćemo blog postu proći kroz proces postavljanja Ionic 2 aplikacije za primanje push notifikacija.

Što se tiče slanja push notifikacija to smo obradili u blog postu pod nazivom Node.js API za slanje Push notifikacija. To je samo jedan od načina kako slati push notifikacije i ako vam djeluje komplicirano ili vam se jednostavno ne sviđa uvijek možete koristiti nešto od sljedećeg: Ionic Cloud, Pushwoosh, OneSignal,…

Instalacija Push plugina

Nakon što smo postavili Ionic 2 projekt možemo dodati Push plugin pomoću naredbe:

SENDER_ID ćete pronaći u Google Firebase sučelju na adresi https://console.firebase.google.com/.

Google Firebase SenderID

API servis

Prije nego postavimo push plugin napravit ćemo servis api-service.ts. Više o Ionic 2 servisima možete saznati u blog postu Ionic 2 – prikaz JSON-a sa API-ja.

Možete primijetiti da koristimo https://localhost:3001/api/device-token za slanje tokena u MySQL bazu. To je URL koji smo napravili u jednom od prethodnih blog postova.

Postavljanje push plugina

Nakon što smo instalirali Push plugin trebamo ga uključiti u projekt.

Sve dalje navedeno dodajemo u app.component.ts.

Za početak pozivamo Push plugin i ApiService.

Dodajemo provider za MyApp komponentu

Unutar konstruktora definiramo ranije kreiran ApiService

Sljedeći dio služi za upravljanje push notifikacijama. O ovom dijelu koda odvija se inicijalizacija plugina.

Sve zajedno to izgleda ovako:

P.S. Ako ne želite koristiti svoj NodeJS/Express.js server ne morate praviti import { ApiService } from '../providers/api-service;' i možete izbaciti dio vezan uz provjeru tokena.

Slanje push notifikacija iz Firebase sučelja

Push notifikacije također možete slati direktno iz Google Firebase sučelja bez potrebe za izradom i pokretanjem NodeJS servera i uvozom import { ApiService } from '../providers/api-service;' u Ionic 2 aplikaciju.

Google Firebase Push

Pokretanje aplikacije

Kada se aplikacija prvi put pokrene token ne postoji u lokalnoj memoriji te se u tom trenutku sprema u lokalnu memoriju uređaja i istovremeno šalje u bazu podataka.

Ako bi maknuli provjeru tokena to bi značilo da bi se token putem API-ja poslao u MySQL bazu svaki put kada se pokrene aplikacija. To naravno ne želimo pa zato vršimo provjeru.

Ionic2 Android Push Send Token

Kada se aplikacija pokrene svaki sljedeći put provjera će vidjeti da token već postoji i neće ga ponovno slati u MySQL bazu.

Ionic2 Android Push Token

Ionic2 Android Push Received

Zaključak

U ovom smo blog postu obradili postupak postavljanja Ionic 2 aplikacije za primanje push notifikacija na Android mobilni uređaj. Kao što se može vidjeti postupak nije kompliciran, a sve dalje ovisi o specifičnim potrebama svake aplikacije. Različiti scenariji kada i kome slati push notifikacije trebaju se razraditi za svaku aplikaciju posebno.

Što se primanja push notifikacija na iOS uređaje tiče o tome možda nekom drugom prilikom jer postupak je kompliciraniji.

Pokretanje Ionic aplikacije na Android platformi

Nakon što ste postavili razvojnu okolinu i pokrenuli svoj prvi Ionic projekt u web pregledniku vrijeme je da vidite kako isti izgleda na emulatoru i na fizičkom mobilnom uređaju kojega ćete na računalo spojiti putem USB-a.

Potrebno je instalirati i postaviti sljedeće:

Java Development Kit (JDK)

Preuzmite i instalirajte Java Development Kit (JDK) 7 ili noviji. Odaberite Accept License Agreement, s obzirom da ovdje radimo na Windows OS-u odaberite jednu od dvije instalacije vezane uz Windows OS ovisno o tome imate li 32 ili 64 bitnu verziju.

Java Development Kit (JDK)  7 za Ionic

Nakon uspješne instalacije trebate napraviti JAVA_HOME varijablu okruženja (environment variable) i u nju dodati putanju do JDK-a.

Pratite putanju Control PanelSystemAdvanced system settingsAdvancedEnvironment VariablesSystem variablesNew

JAVA_HOME Environment Variable za Ionic

Android SDK

Ovdje možete preuzeti Android SDK. Biti će vam ponuđeno odabrati između Android Studio (kompletan IDE koji u sebi sadržava i SDK Tools) i Stand-alone SDK Tools. Odaberite drugu opciju i dalje pratite upute.

Stand-alone SDK Tools za Ionic Framework

Nakon instalacije možete odmah pokrenuti SDK Manager.

Android SDK Manager

Možete odmah kliknuti na Install packages… Preuzimanje i instalacija će potrajati tako da budite strpljivi.

Android SDK Manager Options

Sada trebate u PATH varijablu okruženja dodati putanje do dva direktorija:
C:\Users\Tomislav\AppData\Local\Android\android-sdk\platform-tools
C:\Users\Tomislav\AppData\Local\Android\android-sdk\tools

Path varijabla okruženja za Android
PATH varijablu ćete naći na Control PanelSystemAdvanced system settingsAdvancedEnvironment VariablesUser variables for Tomislav – PATH (Edit)

PATH varijabla sada treba izgledati kao na slici

Path varijabla okruzenja za Android

Apache Ant

Apache Ant možete preuzeti ovdje. Preuzmite jednu od .zip verzija, spremite istu na svoje računalo i raspakirajte. Sada i putanju do direktorija C:\apache-ant-1.9.6\bin trebate dodati u PATH varijablu okruženja.

Dodajte Android platformu u svoj Ionic projekt

U mapi s projekom pokrenite sljedeće naredbe:

Nakon toga ćete vidjeti sljedeći sadržaj. Obratite pažnju na liniju 13 gdje piše Android target: android-23. Ako pogledate u ranije otvorenom Android SDK Manageru u startu vam je bilo ponuđeno da instalirate Android 6.0 (API 23). To znači da se API verzije slažu i da je sve u redu.

Struktura direktorija vašeg projekta sada je bogatija za dva direktorija platforms i resources.

Ionic Android Platform

Prikaz aplikacije na Android mobilnom uređaju

Spojite mobilni uređaj na USB i pokrenite naredbu:

Prije nego to napravite instalirajte drivere za mobilni uređaj koji ćete koristiti za testiranje i također na tom mobilnom uređaju uključite “Ispravljanje pogrešaka USB-a“.

Kada vidite poruku

znači da ste uspješno instalirali .apk na svoj mobilni uređaj.

Ionic plikacija na Android mobilnom uređaju

Prikaz aplikacije na Android emulatoru

Emulator pokrećete tako da u direktoriju projekta pokrenite naredbu:

Međutim, prije nego pokrenete naredbu trebate napraviti svoj virtualni uređaj.

Pokrenite Android AVD Manager, koji se nalazi u direktoriju C:\Users\Tomislav\AppData\Local\Android\android-sdk, i napraviti svoj virtualni uređaj.

Android AVD Manager Ionic

Ako imate AMD procesor jako je važno da prilikom stvaranja virtualnog uređaja za CPU/ABI odaberete ARM (armeabi-v7a) jer inače ćete umjesto emulatora dobiti poruku o grešci, a to vas može odvesti prema traženju rješenja u pogrešnom smjeru.

Znači ne morate instalirati Intel HAXM niti ugasiti Hyper-V na Windows 10 OS-u, nego je dovoljno samo za CPU/ABI umjesto Intel Atom (x86_64) staviti ARM (armeabi-v7a).

Krajnji rezultat pokretanja emulatora izgleda ovako

Pokrenut Android emulator

Ako vam je sve ovo previše “čačkanja” oko emulatora, shvatite da je emulator prespor ili i dalje dobijate poruku o grešci i ne želite više “guglati” bacite oko na Genymotion. Trebate se registrirati kako bi preuzeli besplatnu instalaciju.

Nakon što isprobate standardni emulator i vidite koliko zna biti spor i neupotrebljiv vjerujem da ćete se prebaciti na Genymotion.

Zaključak

Sada ste spremni za pravi posao i slobodno možete krenuti na put pretvaranja ideje u gotov proizvod. Prođite kroz CSS i JavaScript komponente, ubacujte ih redom u aplikaciju i gledajte kako se ponašaju u web pregledniku, emulatoru i na mobilnom uređaju. S vremenom i iskustvom ćete već znati što gdje (ne)prolazi i kako se ponaša.

Kako napraviti Apache Cordova Platform update

Kada dovoljno dugo razvijate mobilne aplikacije koristeći Apache Cordova odnosno Ionic Framework pitanje je vremena kada će vam se Google javiti sa zanimljivim e-mailom uz dramatičan naslov “You are using a vulnerable version of Apache Cordova” s obavijesti o uklanjaju vaše aplikacije sa Play Storea ako ne izvršite potreban sigurnosni update.

Hello Google Play Developer,

Your app(s) listed at the end of this email utilize a version of Apache Cordova, an open-source mobile development framework, that contains one or more security vulnerabilities. If you have more than 20 affected apps in your account, please check the Developer Console for a full list.

Please migrate your app(s) to Apache Cordova v.4.1.1 or higher as soon as possible and increment the version number of the upgraded APK. Beginning May 9, 2016, Google Play will block publishing of any new apps or updates that use pre-4.1.1 versions of Apache Cordova.

The vulnerabilities were addressed in Apache Cordova 4.1.1. If you’re using a 3rd party library that bundles Apache Cordova, you’ll need to upgrade it to a version that bundles Apache Cordova 4.1.1 or later.

To confirm you’ve upgraded correctly, submit the updated version to the Developer Console and check back after five hours. If the app hasn’t been correctly upgraded, we will display a warning.

For information about the vulnerabilities, please see this Google Help Center article. For other technical questions, you can post to Stack Overflow and use the tag “android-security.”

While these specific issues may not affect every app that uses Apache Cordova, it’s best to stay up to date on all security patches. Apps with vulnerabilities that expose users to risk of compromise may be considered Dangerous Products in violation of the Content Policy and section 4.4 of the Developer Distribution Agreement.

Apps must also comply with the Developer Distribution Agreement and Content Policy. If you feel we have sent this warning in error, contact our policy support team through the Google Play Developer Help Center.

Regards,

The Google Play Team

Ipak, nema mjesta panici. Nadogradnju možete napraviti pokretanjem naredbe

I to je skoro to. Sada možete nadograditi i platforme za koje ste radili mobilnu aplikaciju. U ovom slučaju aplikacija je rađena za iOS i Android platformu pa se nakon pokretanja naredbe

može vidjeti da postoji nadogradnja za obje platforme:

  • android @ 4.1.1 could be updated to 5.1.0
  • ios @ 3.8.0 could be update to 4.0.1

Možete pokrenuti nadogradnju platformi

i očekivati prikaz obavijesti o uspješnoj nadogradnji

  • Android project updated with cordova-android@5.1.0
  • iOS project updated with cordova-ios@4.0.1

Dalje možete normalno raditi pripremu za postavljanje aplikacije na Google Play Store tj. App Store.