Ionic 3 – Prikaz Google mape

U ovom ću blog postu pokazati kako integrirati Google mape unutar Ionic aplikacije koristeći JavaScript SDK.

Zašto Google Maps?

Zato što je to najjednostavniji i najbolji način za prikaz mapa sa dosta mogućnosti i odličnom dokumentacijom + što je korištenje Google mapa besplatno do određene razine.

Native ili JavaScript SDK?

U ovom slučaju koristit ćemo JavaScript SDK jer nam je to brži i jednostavniji način za razvoj i testiranje. Znači, kako razvijamo funkcionalnosti Google mape unutar Ionic aplikacije istovremeno ih možemo testirati unutar web preglednika dok bi u slučaju korištenja Native SDK morali sve testirati na uređaju.

Pod pretpostavkom da već imate pokrenut Ionic projekt možemo krenuti dalje.

Prikaz Google mape

Za početak ćemo uvesti JavaScript SDK u index.html datoteku na način da dodamo <script> tag na sljedeći način

U slučaju da ne unesete Api Key dobit ćete poruku o grešci “Google Maps API warning: NoApiKeys“, ali će mape i dalje raditi.

Google Maps API warning: NoApiKeys

Sada se možemo prebaciti na stranicu u našoj Ionic aplikaciji koja će služiti za prikaz Google mape. U ovom slučaju to će biti home.html

ID "map" služi nam samo kako bi mogli napraviti sljedeće

Za sada još uvijek ne vidimo mapu jer nismo kontoleru rekli što da napravi, gdje i pomoću čega tj. naša datoteka home.ts trenutno izgleda ovako

Međutim, nakon što uvezemo dodatne elemente i kreiramo funkciju koja će prikazati zadanu mapu stanje će se promijeniti

Sada već možemo nešto konkretno vidjeti na ekranu. Imamo mapu koja prikazuje Vinkovce prema long i lat parametrima.

Ionic3 Google Maps

Dodavanje markera

Mapa prikazana na ranije definiran način nije pretjerano korisna i zato ćemo dodati markere kako bi se točnije znalo što želimo naglasiti i što zapravo prikazujemo. Za ovaj ću primjer odabrati četiri lokacije vezane uz grad Vinkovce i njih ću označiti na Google mapi.

Kada osvježimo ekran možemo vidjeti animirane markere za sve četiri lokacije.

Ionic3 Google Maps Markers

Dodatne informacije na markerima

Iako se ranije prikazana mapa već sada može smatrati donekle funkcionalnom ipak joj nedostaje jedan važan detalj, a to su informacije o tome što svaki pojedini marker točno prikazuje.

Zato ćemo sada za svaki marker napraviti skočni prozorčić koji će se prikazati kada se klikne na pojedini marker i na taj ćemo način prikazati naziv lokacije.

U nastavku možemo vidjeti markere s dodatnim informacijama u akciji
Ionic3 Google Maps Markers Info

Popis lokacija s fokusom

Sada ćemo napraviti popis lokacija koji će se nalaziti ispod same mape. Klikom na neku od lokacija mapa će se automatski pozicionirati na odabranu lokaciju.

Za početak ćemo napraviti malo mjesta ispod mape

Nakon toga napravit ćemo pripremu za ispis lokacija

I sada smo spremni za kreiranje funkcije koja će nam omogućiti fokus na odabranu lokaciju

Konačni rezultat je vidljiv u nastavku
Ionic3 Google Maps Markers Zoom

Zaključak

Ovo je samo dio onoga što se može postići koristeći Google Maps API. Dalje sve ovisi o specifičnim potrebama vaše Ionic aplikacije, ali vjerujem da možete postići sve što želite jer dokumentacija je poprilično detaljna i za svakoga se može pronaći nešto korisno.

Kako ubrzati pokretanje Ionic 3 aplikacije?

Ako koristite Ionic 2 ili Ionic 3 mogli ste primijetiti dugo vrijeme pokretanja aplikacije, kako na iOS tako i na Android platformi. Ja sam ga definitivno primijetio, a vidim da su i mnogi drugi.

Vrijeme potrebno da se aplikacija pokrene nakon Splash Screena kretalo se između 11 i 15 sekundi što nikako nije dobro za korisničko iskustvo.

Uzrok

Kao zadano, Ionic 2 & 3 projekti su u non-AoT stanju što znači da su uvijek u stanju za razvoj (state of development) i to je dobro i korisno za testiranje i rješavanje problema (debugging), ali nije dobro za kreiranje verzija aplikacija koje će koristiti krajnji korisnik.

Builds are now always development (non-AoT) by default. To enable prod builds, use the –prod option. – izvor

AoT (Ahead-of-Time) je termin za build process koji kompajlira predloške i minimizira JS datoteke kako bi se poboljšale performanse aplikacije prilikom pokretanja. Kompajler se pokreće samo prvi put prilikom kreiranja .APK-a tj. .IPA-a tj. ne pokreće se svaki prilikom pokretanja aplikacije i time se postiže veća brzina pokretanja aplikacije i prikaza predložaka. I to je upravo ono što kao developeri želimo.

Problem se javlja zbog toga što je Ionic tim odabrao da zadano stanje bude suprotno od ranije opisanog procesa. I to je razlog sporog pokretanja aplikacije. Može se činiti kao sitnica, ali i kao sitnica koja može izluditi developera koji može krenuti u proces preoptimizacije svoje aplikacije bez uspjeha.

Rješenje –prod

Rješenje svih problema sadržano je u nastavku --prod

Nakon dodavanja --prod nastavka možete primijetiti drastično ubrzanje prilikom pokretanja aplikacije s 11 do 15 sekundi na 2-3 sekunde.

Pretpostavimo da želite ubrzati proces pokretanja, ali ne želite minimizirati JS datoteke kako bi mogli jednostavnije testirati i rješavati probleme tj. raditi debugging. U tom slučaju možete koristiti - -aot nastavak.

Na taj način koristite Ahead-of-Time kompajliranje, ali ne minimizirate JS datoteke.

Što ćete od ranije navedenog odabrati ovisi o vašim potrebama u određenom trenutku.

Zaključak

AoT čini drastičnu razliku u vremenu potrebnom za pokretanje Ionic aplikacije. Ionic tim je odabrao non-AoT kao zadano kako bi developerima olakšao proces razvoja što nove developere može odbiti od korištenja Ionic Frameworka jer im neće biti jasno zašto im je aplikacija koju su tek kreirali tako spora.

Ionic 3 – AdMob monetizacija

Prije nego krenete s izradom mobilne aplikacije za pretpostaviti je da imate nekakav cilj koji želite tom aplikacijom postići. Jedan od tih ciljeva može biti zarada.

U ovom ću blog postu prikazati kako u Ionic aplikaciju dodati AdMob oglase pomoću kojih možete zaraditi na svojoj aplikaciji.

Što je AdMob?

AdMob je Googleova platforma za monetizaciju mobilnih aplikacija. Ono što je Google AdSense/AdWords za web stranice to je AdMob za mobilne aplikacije. Dostupan je za iOS i Android aplikacije.

Kreiranje oglasa

AdMob kreiranje oglasa Na adresi https://apps.admob.com/ trebate kreirati oglasnu jedinicu koja će se prikazivati u vašoj Ionic aplikaciji.

Na slici sam zaokružio što točno trebate ubaciti u aplikaciju kako bi se oglas prikazao.

Dodavanje AdMob plugina

Plugin ćete dodati naredbama:

Sada referencu na plugin trebate dodati u app.module.ts

Sada ste spremni za implementaciju oglasa.

Implementacija

U ovom primjeru oglas ćemo implementirati u app.component.ts što znači da će nam se oglas prikazivati na svim stranicama aplikacije.

isTesting: true neka stoji sve dok radite na aplikaciji, a false možete staviti kada aplikacije ide u produkciju.

Banner na dnu stranice izgleda ovako

AdMob - Banner na dnu stranice

Sljedeći primjer tiče se oglasa koji se prikazuje preko cijele stranice aplikacije. To možete implementirati nakon neke korisnikove akcije. Za sada ćemo taj oglas prikazati klikom na gumb.

Prikaz oglasa

Oglas preko cijele stranice u konačnici izgleda ovako

AdMob - oglas preko cijele stranice

Zaključak

I to je sve! Možete krenuti zarađivati. 🙂

Ionic 2 & 3 – SQLite servis

Ovaj blog post je nastavak prethodnog pod naslovom Ionic 2SQLite za trajno spremanje podataka. Iako sam ondje već obradio temu spremanja podataka u lokalnu bazu podataka i prikaz tih podataka kada aplikacija nije povezana s mrežom važno je znati da postoji i bolji način kako to napraviti.

Kreiranjem SQLite servisa svu logiku vezanu uz kreiranje i korištenje lokalne baze podataka imamo na jednom mjestu.

Instalacija SQLite plugina

Plugin instalirate naredbama

Više o SQLite pluginu na adresi https://github.com/litehelpers/Cordova-sqlite-storage

Kreiranje SQLite servisa

Servis kreirate naredbom

Cilj ovog DatabaseService servisa je da na jednom mjestu kreiramo sve potrebne tablice te da ih uz što manje ponavljanja koda koristimo u ostatku aplikacije.

Unutar konstuktora kreiramo tablice mojaTablica i mojaDrugaTablica.

Funkcionalnosti poput spremanja u lokalnu bazu, čitanja iz nje i brisanja spremamo u posebne funkcije, kao što su npr saveTablicaToSqlite(), getTablicaMyOfflineData() i deleteTablicaMyOfflineData(), koje onda možemo pozivati u ostatku aplikacije.

Kako bi ovaj servis mogli koristiti trebamo ga navesti u app.module.ts

Korištenje SQLite baze u ostatku aplikacije

Ranije kreiran SQLite servis sada možemo koristiti u ostatku aplikacije za spremanje podataka koje onda možemo prikazivati korisnicima kada aplikacije nije povezana s mrežom.

Recimo da u ovom primjeru na početnoj stranici želimo povući žive podatke s API-ja dok je aplikacije povezana s mrežom i odmah ih spremiti u SQLite bazu kako bi ih mogli koristiti kada se povezanost s mrežom izgubi.

Kada se otvori home.ts i pokrene funkcija storeMyOfflineData() pozvat će se funkcija getMyLiveDataFromApi() koja dovlači vanjske podatke u mobilnu aplikaciju. Te podatke u tom trenutku odmah možemo prikazati korisnicima. Istovremeno, pozivamo _database.saveTablicaToSqlite servis kojemu prosljeđujemo niz podataka this.DataArray[i] koje smo dobili iz API-ja.

Testiranje na mobilnom uređaju

Uspješnost kreiranja SQLite baze kao i korištenje najbolje ćete testirati na fizičkom uređaju. Spojite uređaj na PC, pokrenite naredbu

i otvorite chrome://inspect/#devices u Chrome web pregledniku. Ondje ćete vidjeti svoj mobilni uređaj na kojemu je pokrenuta aplikacija. Ispod imena aplikacije kliknite na inspect.

Sada u konzoli možete vidjeti da su SQLite tablice uspješno kreiranje.

Ionic 2 & 3 – SQLite servis - kreiranje tablice

Dalje, kada se otvori početna stranica može se vidjeti da se otvara baza i da se spremaju podaci. Sljedeći put kada opet otvorimo početnu stranicu, brišu se iz lokalne baze do tada spremljni podaci i dodaju se svježi podaci.

SQLite servis - brisanje i spremanje

Zaključak

Usporedite prethodni blog post i ovaj pa zaključite koji je način korištenja SQLite baze bolji. Moje mišljenje je da je bolji način korištenje servisa jer tako ne moramo ponavljati jedan te isti kod u ostatku aplikacije nego samo pozivamo funkcije za spremanje, čitanje i brisanje lokalnih podataka.

Stigao je Ionic 3!

Stigao nam je Ionic 3! Iako se iz samog naziva nove verzije promjena može činiti velikom zapravo nije, barem ne u onoj mjeri u kojoj je nakon Ionic verzije 1 stigla verzija 2.

Ako pokrećete novi projekt naredbom $ ionic start NazivAplikacije blank --v2 od petka, 07.04.2017., onda već koristite Ionic 3 i ne morate raditi izmjene koje ću opisati u nastavku.

Za sve vas koji imate postojeće projekte temeljene na Ionicu 2 i želite prijeći na Ionic 3 u nastavku možete saznati kako to napraviti.

Ionic 2 -> Ionic 3

Angular 4, koji je izašao prije nekoliko dana, jedan je od važnijih razloga zašto sada imamo i Ionic 3.

1.) package.json

Prije svega potrebno je obrisati postojeću node_modules mapu jer ćemo od sada koristiti nove NPM pakete.

Nakon toga, potrebno je navesti nove NPM pakete koji sada uključuju novi Angular 4 i novi TypeScript. To je moguće učiniti na način otvorite postojeću package.json datoteku i dodate sljedeće:

VAŽNO!

Naravno, ako u postojećem Ionic 2 projektu imate neki NPM paket naveden pod dependencies ili devDependencies navedite i njega unutar package.json datoteke kako bi se i on ponovno instalirao jer vam u suprotnom Ionic 3 projekt neće raditi.

U jednom od svojih projekata koristio sam @ngx-translate/core NPM paket pa sam zato i njega naveo unutar package.json datoteke.

Sada možemo instalirati nove NPM pakete jednostavnom naredbom $ npm install

2.) BrowserModule

U app.module.ts je potrebno uvesti BrowserModule koji zapravo omogućava korištenje mogućnosti koje Angular pruža.

Ako koristite Http onda trebate uvesti i HttpModule

3.) Ionic Native 3.x

Nekoliko dana prije nego što je stigao Ionic 3 dobili smo Ionic Native 3.x. To je zapravo novi način korištenja Cordova pluginova tj. Ionic Native pluginova. Više o tome možete saznati ovdje.

Uglavnom, u postojećoj Ionic 2 aplikaciji trebate opet instalirati sve pluginove tako da budu prilagođeni novoj strukturi ostatka aplikacije. Do sada ste pluginove instalirali na Ionic Native 2.x način, a to znači korištenje naredbe kao što je npr. $ ionic plugin add cordova-plugin-device te se onda taj plugin u aplikaciju poziva na sljedeći način import { Device } from 'ionic-native';

Ionic Native 3.x način instalacije i korištenja podrazumijeva instalaciju plugina još i s naredbom $ npm install --save @ionic-native/device pri čemu se uvoz plugina vrši na sljedeći način

Znači, od sada svoje Ionic Native 3.x pluginove instalirate koristeći obje ranije navedene naredbe. Također obavezno provjerite dokumentaciju svakog plugina jer se vrlo lako može dogoditi da po novome koristi neke nove metode, a stare više ne i zbog toga vam se može dogoditi da aplikacija prikazuje grešku vezanu uz neki od pluginova.

4.) module.ts i IonicPage

Kada bi u Ionic 2 aplikaciji kreirali novu stranicu dobili biste tri datoteke (.html,.scss,.ts), dok ako idete kreirati novu stranicu u verziji 3 dobit ćete dodatnu datoteku s nastavkom .module.ts, a kako se ovdje radi o prebacivanju Ionic 2 aplikacije u Ionic 3 znači da svaka vaša ranije kreirana stranica treba dobiti svoju .module.ts datoteku.

U nastavku možete vidjeti primjer jedne takve datoteke

Nakon toga u .ts datoteci koju imate od ranije za sve stranice dodajte IonicPage dekorator na sljedeći način

5.) Uklanjanje uvoza stranica

Nakon prethodnog koraka možete proći kroz sve stranice tj. njihove .ts datoteke i maknuti uvoze drugih stranica import {AboutPage} from '../about/about';. Isto napravite i unutar app.module.ts datoteke u kojoj ćete također maknuti stranice iz declarations i entryComponents nizova.

Način na koji ćete od sada međusobno povezivati stranice ne razlikuje se puno od “starog” načina osim što ćete naziv svake stranice proslijediti kao string.

Znači, umjesto let modal = this.modalCtrl.create(ReplacementModalPage); koristit ćete let modal = this.modalCtrl.create('ReplacementModalPage'); .

Mogući problemi

Ako ste napravili sve ranije navedeno vi od sada koristite novi Ionic 3 i Angular 4. Ipak, unatoč tome vaš Ionic 3 projekt i dalje ne mora raditi kako bi trebao, a uzroka može biti nekoliko.

ionic-native

Uncaught Error: Cannot find module "ionic-native" Ako dobijete grešku “Uncaught Error: Cannot find module “ionic-native”” znači da još negdje u aplikaciji koristite Ionic Native 2.x način uvoza pluginova. Kada iz svih datoteka izbacite import { NazivPlugina } from 'ionic-native'; ovu grešku više nećete vidjeti.

forChild

Kreirali ste novu stranicu i dobili grešku Property ‘forChild’ does not exist on type ‘typeof IonicModule’ rješenje se da umjesto IonicModule koristite IonicPageModule .

ion-img

Ako dobijete grešku “TypeError: Cannot read property ‘isImgsUpdatable’ of null” to znači da unutar neke .html datoteke koristite <ion-img> tag, a koji se ne nalazi unutar <ion-content> taga. Više o tome ovdje.

Kako bi ovu grešku izbjegli koristite običan <img> tag na svim mjestima koja se ne nalaze unutar <ion-content> taga.

ionic grid

Sve ranije ste dobro napravili i gore navedenih grešaka više nema, ali aplikacija i dalje ne izgleda kako bi trebala i sve je nekako razbacano, nije na svojem mjestu,… Zašto je to tako? Odgovor se nalazi u novom Ionic Grid sistemu.

Npr.

će od sada biti

Više o tome u službenoj dokumentaciji.

Prođite kroz .html datoteke i napravite potrebne izmjene kako bi vaša nova Ionic 3 aplikacija zasjala u punom sjaju!

Zaključak

Kao što ste mogli vidjeti migracija na Ionic 3 može se obaviti relativno brzo i relativno jednostavno kada znate što treba napraviti. Ipak, prije nego objavite novu verziju aplikacije na Google Play Store ili Apple Store uložite nešto vremena u testiranje svih funkcionalnosti vaše Ionic 3 aplikacije pogotovo zato što ste instalirali nove verzije pluginova čije metode se mogu razlikovati od onih koje trenutno koristite u mobilnoj aplikaciji i koje je zbog toga potrebno prilagoditi.