Ionic aplikacija (ni)je povezana s internetom

Jedna od osnovnih pretpostavki prilikom razvoja mobilne aplikacije je da će ista posebno ovisiti o povezanosti s internetom. Zbog toga je važno znati kako upravljati različitim situacijama u kojima ne postoji mrežna povezanost ili je ista ograničena. Kao developer trebate imati mogućnost dohvaćanja statusa mreže kao bi mogli implementirati opcije A (ima interneta – prikaži podatke), B (nema interneta – prikaži kopiju podataka iz lokalne memorije) ili C (nema interneta – prikaži obavijet i čekaj vezu s internetom kako bi prikazao podatke).

Korisnik aplikacije o tome treba biti obaviješten kako ne bi pomislio da nešto nije u redu s njegovim mobilnim uređajem ili s aplikacijom.

Naravno, prije dodavanja $cordovaNetwork plugina već ste pokrenuli novi Ionic projekt, dodali Android platformu i podršku za ngCordova.

$cordovaNetwork plugin

Dodajte ga u Ionic aplikaciju pokretanjem naredbe


Nakon instalacije u direktoriju plugins primjetit ćete novi direktorij cordova-plugin-network-information

Ionic Cordova Network plugin

U dokumentaciji plugina možete vidjeti koje opcije vam pruža Connection objekt.

Connection Type                          Description
Connection.UNKNOWN              Unknown connection
Connection.ETHERNET               Ethernet connection
Connection.WIFI                          WiFi connection
Connection.CELL_2G                   Cell 2G connection
Connection.CELL_3G                   Cell 3G connection
Connection.CELL_4G                   Cell 4G connection
Connection.CELL                          Cell generic connection
Connection.NONE                         No network connection

Sljedećim primjerom prikazat ćete informaciju o (ne)postojanju internet veze i vrsti veze.


Prikaz statusa internet veze


Na mobilnom uređaju to izgleda ovako

Ionic ngCordova Network Android

Apache Cordova

Sljedećim primjerom pokrivate opciju kada mobilni uređaj nije povezan s internetom (Connection.NONE). U ovom primjeru ne treba vam ngCordova.


Na mobilnom uređaju to izgleda ovako

Ionic Cordova Network Android

Koristiti factory!?

Najbolja opcija je napraviti factory koji onda možete koristiti kroz cijelu Ionic aplikaciju.


Factory možete pozvati u bilo koji kontroler.

Zaključak

Ovo su samo tri mala informativna primjera kako možete koristiti $cordovaNetwork plugin u Ionic aplikaciji.

Ovaj je plugin posebno koristan kada u aplikaciji prikazujete podatke s nekog vanjskog izvora. Znači, ako nestane veze s internetom neće se više prikazati niti podaci koje želite dati korisniku, a korisnik neće znati zašto se to dogodilo. Jednom kada utvrdite da veza s internetom ne postoji trebate odlučiti što i kako dalje. Možete o tome obavijestiti korisnika ili mu u tom slučaju prikazivati podatke iz lokalne memorije sve dok se ponovno ne uspostavi veza s internetom.

Ikona i početni zaslon Ionic aplikacije

Prva stvar koju će korisnici vidjeti kada požele preuzeti vašu aplikaciju je ikona, a prva stvar koju će vidjeti prilikom pokretanja aplikacije je početni zaslon (Splash Screen). Prema tome, ikona i početni zaslon igraju važnu ulogu za prvi dojam.

S obzirom da Ionic aplikacije možete istovremeno raditi za iOS i Android te da su uređaji na kojima se nalaze različitih dijagonala ekrana postavlja se pitanje kako na što jednostavniji način obuhvatiti sve te uređaje a da na kraju ikona i početni zaslon na oba OS-a i na svim dijagonalama ekrana izgledaju dobro. Odgovor na to je Ionic Resources.

Kada pokrenete novi Ionic projekt i dodate Android platformu

dobijete direktorij resources u kojemu se nalaze ikona aplikacije icon.png i slika za početni zaslon splash.png

Ionic aplikacija resursi

te se u config.xml pojavi sljedeće

U config.xml po želji možete dodati i druge parametre.

Uglavnom, sada već imate ikonu aplikacije i početni zaslon u što se možete uvjeriti pokretanjem naredbe

Ikona i pocetni zaslon Ionic aplikacije

Prilagođeni početni zaslon i ikona

Ako želite staviti custom ikonu i početni zaslon kopirajte u resources direktorij dvije slike. Jednu naziva icon.png veličine 1024x1024px i splash.png veličine 2208x2208px i pokrenite naredbu

Ionic aplikacija resursi 2

Ionic CLI će automatski izrezati sve potrebne dimenzije ikone i početnog zaslona.

Ako sada pokrenete $ ionic run android vidjet ćete novu ikonu i novi početni zaslon

Nova ikona i početni zaslon Ionic aplikacije

U slučaju da ne želite istovremeno promijeniti ikonu aplikacije i početni zaslon nego ih postavljate posebno možete koristiti naredbe

Ako vam niti to nije dovoljno nego želite koristiti npr. različite ikone za Android i iOS to možete učiniti na način da kopirate icon.png u resources/android/ za Android odnosno u resources/ios/ za iOS.

Zaključak

Ikona vaše Ionic aplikacije i početni zaslon sigurno će utjecati na prvi dojam koji će korisnici dobiti o aplikaciji. U ovom ste blog postu mogli vidjeti koliko je jednostavno promijeniti ih.

Što je i čemu služi ngCordova unutar Ionic aplikacije?

U pravilu, sve što radi u web pregledniku radit će i u vašoj hibridnoj mobilnoj aplikaciji. Ipak, mobilne aplikacije često zahtijevaju više od mogućnosti samog web preglednika jer ipak mobilni uređaji imaju različite senzore i ostale funkcionalnosti (žiroskop, vibracija i dr.) bez čega vaša hibridna mobilna aplikacija ne bi bila ništa više od neke obične responzivne web stranice. Tu uskaču Apache Cordova tj. ngCordova koji će vam omogućiti korištenje upravo tih nativnih funkcionalnosti mobilnog uređaja.

Prije nego se odlučite za korištenje nekog plugina zapitajte se koliko vam je stvarno potreban i koja ograničenja povlači za sobom.

P.S. Pluginove isprobavajte i testirajte na mobilnom uređaju umjesto u web pregledniku.

Apache Cordova

Cordova se u vašem Ionic projektu nalazi od samog početka ako se sjetite naredbe $ npm install -g cordova ionic, a da je to stvarno tako možete se uvjeriti ako bacite pogled na index.html.


S tako postavljenim Ionic projektom spremni ste za korištenje Cordova pluginova.

Plugin ćete dodati jednostavnom naredbom cordova plugin add. Svaki plugin ima svoju dokumentaciju, ili bi trebao imati, i svakako ju detaljno proučite prije nego se odlučite na korištenje nekog plugina.

ngCordova

Kako je ovdje primarno riječ o razvoju hibridnih mobilni aplikacija pomoću Ionic Frameworka važno je znati da postoji puno elegantnije rješenje kada su u pitanju pluginovi, a to je ngCordova.

ngCordova je set odabranih Apache Cordova pluginova prilagođenih Ionic Frameworku.

Koristeći Ionic CLI dodajte podršku za korištenje ngCordova pluginova unutar Ionic aplikacije.


Primjetit ćete novi direktorij unutar www/lib/

ngCordova Ionic

Sljedeći korak je pozvati ng-cordova.js unutar index.html


I zadnji korak je uključiti taj novi modul u Ionic aplikaciju. Otvorite www/js/app.js i dodajte ‘ngCordova’ unutar uglate zagrade.


Sada ste spremni za dodavanje pluginova.


Nakon što ste dodali plugin ubacite njegov kod, kojega ćete vidjeti u dokumentaciji, u kontroler i obavezno ga pišite unutar $ionicPlatform.ready() jer inače bi mogli vidjeti hrpu undefined errora.


Prikažite rezultat.

Zaključak

Nadam se da ste kroz ovaj blog post uspjeli shvatiti što su Apache Cordova tj. ngCordova i kako na jednostavan način mogu nadopuniti vašu Ionic aplikaciju. U nekom od idućih blog postova planiram prikazati konkretnu implementaciju pojedinih ngCordova pluginova.

Što je Ionic View?

Kada radite Ionic mobilne aplikacije i želite ih podijeliti s drugima tj. dobiti povratne informacije imate nekoliko mogućnosti:

  • Svaki put kada napravite neku promjenu svima slati mail koji sadržava .apk/.ipa
  • Čekati da osobe dođu kod vas kako bi mogli spojiti njihove mobilne uređaje na računalo i ručno instalirati .apk/.ipa
  • Napraviti Google Play Developer i/ili Apple App Developer korisnički račun, platiti članarinu i postaviti aplikaciju u beta test
  • Putem Ionic Viewa omogućiti svima da gotovo trenutno vide svaku promjenu koju ste napravili

Vjerujem da vam se najboljom čini zadnja opcija. Upravo to, pa i više od toga omogućava Ionic View kao što ćete vidjeti u nastavku.

1. Registracija

Ako ste se već registrirali prema uputama iz prethodnog blog posta onda ovaj korak možete preskočiti. U suprotnom unesite potrebne podatke i kliknite na Sign Up.

Ionic View registracija

2. Upload aplikacije

U direktoriju aplikacije pokrenite naredbu te unesite svoje korisničko ime i lozinku.

U slučaju da se prvi put prijavljujete, vidjet ćete sljedeće. Posebno obratite pažnju na liniju broj 11 u kojoj se nalazi ID aplikacije. Upravo ćete putem tog ID-a omogućiti određenim osobama da pregledavaju vašu aplikaciju.

3. Preuzimanje Ionic View aplikacije

Preuzmite Ionic View mobilnu aplikaciju. Aplikaciju možete pronaći na Apple App Store i Google Play Store.

Nakon instalacije aplikacije potrebno je samo prijaviti se sa svojim korisničkim podacima. Odaberite aplikaciju, kliknite na Download files i konačno View app.

Ionic View mobilna aplikacija

4. Dijeljenje aplikacije

4.1. Aplikaciju možete početi dijeliti pomoću naredbe

Nakon čega pozvanoj osobi stiže email

Ionic View email

Aplikaciju također možete vidjeti i na https://apps.ionic.io/apps

Ionic View popis aplikacija

U web sučelju možete vidjeti kome ste sve poslali pozivnice za pristup vašoj aplikaciji, vidjeti koje su osobe pozivnicu prihvatile i poslati nove pozivnice.

Ionic View detalji aplikacije

4.2. Aplikaciju možete podijeliti i pomoću ID-a na način da unesete ID aplikacije i učitate aplikaciju u sučelje Ionic Viewa.

Ionic View ID aplikacije

Zaključak

Ionic View je odličan i jednostavan način da podijelite svoju aplikaciju, posebno tijekom razvoja. Osim toga Ionic.io nudi još i Ionic Push, Ionic Analytics, Ionic Deploy i Ionic User. O tim funkcionalnostima se ima što za pisati tako da ih neću detaljnije obrađivati u ovom blog postu, ali planiram u nekom od sljedećih.

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.