Ionic 3 & Google Maps – prikaz rute između dvije lokacije

U ovom ću blog postu koristiti Google Maps Directions API za prikaz rute od jedne do druge lokacije. Također, ovaj će blog post biti vrlo sličan jednom kojeg sam objavio ranije ove godine pod naslovom “Ionic 3 – Prikaz Google mape“.

Priprema Ionic projekta

Za početak kreiram novi Ionic projekt.

Aplikacija sada nema nikakve funkcionalnosti pa ću prije nego implementiram Google Maps Directions API implementirati Lazy Loading. Ovaj korak nije potreban i može se bez njega, ali će dobro za kasnije brže učitavanje aplikacije.

Prvi korak koji je potrebno učiniti tiče se stranice ‘src/app/app.module.ts’ u kojoj je potrebno ukloniti sve poveznice na Home stranicu.

Nakon toga kreiram novu stranicu ‘src/pages/home/home.module.ts’ sa sljedećim sadržajem

Sada se vraćam na stranicu ‘src/pages/home/home.ts’ unutar koje moram dodati IonicPage pa to sada izgleda ovako

I za kraj odlazim u ‘src/app/app.component.ts’ gdje uklanjam import na HomePage stranicu i stavljam ju pod navodnike jer tako funkcionira Lazy Loading.

Google Developer konzola

Odlazim na stranicu https://console.developers.google.com/ i ondje kreiram novi projekt.

Ionic 3 & Google Maps – prikaz rute od jedne do druge lokacije

Nakon toga idem na ‘Enable Apis And Services‘ kako bi odabrao i aktivirao API koji želim koristiti.

Google Developer konzola - aktivacija API-ja

U tražilicu upisujem ‘Google Maps‘ i dobijem popis svih povezanih API-ja.

Google Maps Directions API

Aktiviram Google Maps Directions API.

Google Maps Directions API

Nakon što sam aktivirao API moram kreirati jedinstveni ključ koji ću kasnije biti dio Ionic aplikacije.

Google Maps Directions API - kreiranje ključa

I konačno, imam jedinstveni API ključ.

Google Maps Directions API KEY

Ugrađivanje API-ja u aplikaciju

API ključ koji sam maloprije kreirao u aplikaciju ugrađujem tako da unutar datoteke ‘src/app/index.html’ unutar <head> taga upisujem

Sada mogu napraviti glavnu funkcionalnost unutar datoteke ‘src/pages/home/home.ts’. U ovom slučaju odabirem travelMode: 'DRIVING' jer želim prikazati cestovnu rutu. Detaljnije o drugim opcijama na poveznici https://developers.google.com/maps/documentation/javascript/directions

Izgled ekrana sastojat će se od pregleda Google mape i mogućnosti odabira lokacija u gornjem desnom kutu ekrana.

Pozicioniranje padajućeg izbornika CSS-om.

I konačno, aplikacija sada izgleda ovako

Ionic 3 & Google Maps – prikaz rute od jedne do druge lokacije

Ionic 3 desktop aplikacija

Iako sam do sada o Ionicu pisao samo u kontekstu mobilnih aplikacija nedavno sam naišao na primjere korištenja Ionica kao cross-platform desktop aplikacije što mi se učinilo zanimljivim pa sam odlučio nešto više saznati o tome i napisati ovaj blog post.

Što je Electron?

Electron je framework za razvoj cross-platform desktop aplikacija koristeći JavaScript, HTML i CSS. S tehnologijama koje koristi jako podsjeća na Ionic, a omogućava razvoj desktop aplikacija koje se mogu pokrenuti na Windows, Mac i Linux platformi.

Priprema Ionic projetka

Za početak ćemo kreirati novi Ionic projekt.

Kada aplikaciju pokrenemo nećemo vidjeti ništa što već ranije nismo vidjeli. Standardna Ionic aplikacija koja se pokreće u web pregledniku kao što je npr. Google Chrome.

Ionic desktop aplikacija

Postavljanje Electron projekta

Sada je potrebno dodati Electron unutar našeg Ionic projekta koristeći naredbu:

Ionic desktop aplikacija

Sve dalje opisane korake radimo prema službenoj dokumentaciji na adresi https://electron.atom.io/docs/

Sada ćemo kreirati datoteku main.js koja će biti ulazna točka prilikom pokretanja Ionic-Electron aplikacije. Više o ovoj datoteci možete pronaći na adresi https://electron.atom.io/docs/tutorial/quick-start/

Osim te datoteke moramo unutar package.json dodati dvije važne naredbe.

"main": "main.js" služi kako bi se znalo koju datoteku gledati kada se projekt pokrene kao Electron aplikacija.

"start": "electron ." služi kao naredba za pokretanje Electron aplikacije.

Spremni smo za kreiranje skripte buildElectron.sh koja će obaviti nekoliko radnji automatski tako da ih ne moramo svaki put ručno pokretati.

I konačno, Ionic-Electron aplikaciju možemo pokrenuti naredbom ./buildElectron.sh

Ionic desktop aplikacija

ili dvoklikom na ikonu buildElectron skripte unutar našeg projekta.

Ionic desktop aplikacija

nakon čega dobijemo našu Ionic aplikaciju unutar Electrona.

Ionic desktop aplikacija

Možete primijetiti da se prilikom pokretanja aplikacije automatski pokrenuo i Developer Tools. To možemo spriječiti ako unutar main.js datoteke zakomentiramo win.webContents.openDevTools().

Dizajn i prilagodba sučelja

Dizajn trenutno kreirane aplikacije prilagođen je mobilnim uređajima i ako ju raširimo preko cijelog ekrana nekog desktop uređaja to neće izgledati lijepo jer će npr. popis stavki ići jedan ispod drugog preko cijelog ekrana umjesto da se fino rasporedi po nekoliko stavki u jedan red.

Ovo ćemo prikazati na primjeru stranice list.html

Ionic desktop aplikacija

To ćemo riješiti korištenjem Ionic Grida.

Konačan izgled na većem ekranu je sljedeći

Ionic desktop aplikacija

Produkcijska verzija Electron aplikacije

Kada smo zadovoljni s našom aplikacijom možemo kreirati produkcijsku verziju.

Prije nego to napravimo moramo instalirati Electron Packager. To možemo učiniti naredbom $ npm install -g electron-packager

Nakon toga ćemo kreirati produkcijsku verziju Electron aplikacije za Windows OS.

Ionic desktop aplikacija

Proces kreiranja produkcijske verzije Electron aplikacije za Windows, Mac ili Linux može se olakšati i ubrzati na sljedeći način.

U datoteku package.json dodajemo

I onda se proces kreiranja produkcijske verzije Electron desktop aplikacije pokreće sljedećim naredbama:
– Windows OS: npm run package-win
– Mac: npm run package-mac
– Linux: npm run package-linux

Zaključak

Iz ovog ste blog posta mogli vidjeti kako Ionic mobilnu aplikaciju pretvoriti u cross-platform destkop aplikaciju pa iako se to čini zanimljivim i očito da je moguće osobno se ne planiram detaljnije tome posvetiti. Također, ne treba zanemariti niti činjenicu da na tu temu ne postoji dovoljno primjera i dokumentacije.

Uvod u Ionic 3

Iako sam do sada objavio dosta blog postova vezanih uz razvoj hibridnih mobilnih aplikacija koristeći Ionic 3 ipak sam propustio objaviti jedan blog post koji će poslužiti kao uvod u sve te blog postove jednako kao što sam to učinio za Ionic 1 tj. Ionic 2.

Postavljanje razvojne okoline

Kako bi uopće mogli pokrenuti novi Ionic 3 projekt potrebno je zadovoljiti nekoliko preduvjeta.

Potrebno je instalirati:

  • Node.js LTS
  • Ionic i Cordova CLI pomoću naredbe: $ npm install -g cordova ionic
  • TypeScript pomoću naredbe: $ npm install -g typescript

Gore navedeno potrebno vam je za razvoj Android, iOS i Windows Phone hibridnih mobilnih aplikacija. Jedina razlika s kojom se možete susresti je način instalacije jer na Windows baziranom računalu možete razvijati samo Android i Windows Phone aplikacije, dok vam je za iOS potreban Mac.

Prije nego krenete dalje provjerite jeste li sve ranije navedeno uspješno instalirali. To možete učiniti pomoću naredbi:

  • $ node -v
  • $ cordova v
  • $ ionic v

Pokretanje Ionic 3 projekta

Ako ste sve ranije navedeno uspješno instalirali već sada možete kreirati novi Ionic 3 projekt.

Prilikom toga sučelje će vas pitati koji početni predložak želite koristiti za svoj projekt.

Ionic 3 - pokretanje projekta

Kao što možete vidjeti u animaciji iznad u ponudi je nekoliko predložaka:

  • tabs: $ ionic start Ionic3Projekt tabs
  • blank: $ ionic start Ionic3Projekt blank
  • sidemenu: $ ionic start Ionic3Projekt sidemenu
  • super: $ ionic start Ionic3Projekt super
  • conference: $ ionic start Ionic3Projekt conference
  • tutorial: $ ionic start Ionic3Projekt tutorial
  • aws: $ ionic start Ionic3Projekt aws

Svaki od sljedećih vrsta predložaka tj. projekata sastoji se od nekoliko važnih dijelova:

  • config.xml – konfiguracijska datoteka koja sadržava naziv aplikacije i popis datoteka od kojih se Ionic 3 aplikacija sastoji.
  • src – mapa u kojoj se nalaze datoteke s kojima ćete najviše raditi. Sve stranice, komponente, servise i ostalo kreirat ćete i uređivati ovdje.
  • platforms – mapa u kojoj se nalaze datoteke koje omogućavaju postavljanje Ionic 3 aplikacije na Android, iOS i Windows Phone uređaje
  • node_modulesnpm paketi navedeni u package.json nalaze se u ovoj mapi.
  • plugins – mjesto gdje se nalaze svi dodaci kojima ćete proširiti mogućnosti Ionic 3 aplikacije
  • resources – sadržava ikone i početni ekran (splash screens) za dodane platforme

– Ionic tabs

Ionic 3 tabs

– Ionic blank

Ionic 3 blank

– Ionic sidemenu

Ionic 3 sidemenu

– Ionic super

Ionic 3 super

– Ionic conference

Ionic 3 conference

– Ionic tutorial

Ionic 3 tutorial

– Ionic aws

Kako bi uspješno mogli pokrenuti Ionic 3 AWS projekt potrebno je zadovoljiti nekoliko preduvjeta koji nadilaze ovaj blog post tako da ću o tome više nekom drugom prilikom.

Pokretnje aplikacije na mobilnom uređaju

Kako bi Ionic 3 aplikaciju mogli pokrenuti na Android $ ionic run android tj. na iOS $ ionic run ios uređaju trebate dodati i pripadajuće platforme, a to možete učiniti pomoću sljedećih naredbi:

P.S. iOS platformu možete dodati isključivo na Mac-u.

Zaključak

Kao što možete vidjeti sve ranije navedeno ne razlikuje se puno od Ionica 2 s tom razlikom što kod Ionica 3 poboljšan Ionic CLI, možete birati između više početnih predložaka i što se Ionic Native pluginovi instaliraju na drugačiji način uz dodatak podrške za Lazy Loading.

Ionic 3 – Korištenje, napredne, reaktivne forme

Objavio sam već nekoliko blog postova u kojima sam koristio obične, template-driven, forme dok ću u ovom blog postu pokazati primjer korištenja reaktivne forme tzv. reactive forms.

Postavljanje aplikacije

Za početak je potrebno kreirati novu Ionic aplikaciju.

S obzirom da ćemo ovdje koristiti reaktivne forme u module moramo dodati ReactiveFormsModule. To ćemo učiniti na način da u app.module.ts dodamo import { ReactiveFormsModule } from '@angular/forms'; .

Kreiranje reaktivne forme

Sada smo spremni za kreiranje reaktivne forme na stranici home.html tj. home.ts.

Forma će se sastojati od tri polja (korisničko ime, e-mail i lozinka). Sada možemo kreirati izgled reaktivne forme.

Logika će se nalaziti unutar home.ts. Ovdje imamo objekt korisnik i funkciju posaljiPodatke(korisnik){};.

Ako sada pokrenemo aplikaciju dobit ćemo sljedeće

Ionic 3 - Reaktivna forma (primjer 1)

Iako se ovo još uvijek puno ne razlikuje od primjera formi koje smo koristili u prijašnjim blog postovima ipak se kreće u smjeru onoga što s reaktivnim formama možemo i želimo postići. Više o tome u nastavku.

Napredne mogućnosti (FormBuilder)

Kako bi unutar naše forme kasnije mogli koristiti napredne mogućnosti dodatno ćemo prilagoditi logiku unutar home.ts datoteke na način da ćemo dodati FormBuilder klasu. Ako sada pokrenemo aplikaciju rezultat će biti isti kao na slici iznad.

Proširivanje mogućnosti forme (FormArray)

Dodatna funkcionalnost naše forme stižu u obliku FormArray klase.

FormArray is one of the three fundamental building blocks used to define forms in Angular, along with FormControl and FormGroup.

Sada ćemo proširiti funkcionalnost naše forme iz primjera iznad na način da ćemo dodati mogućnost unosa adrese i kućnog broja. Posebno zanimljiva će biti mogućnost dodavanja više adresa unutar iste forme tj. kreiranje niza adresa.

Unutar postojećeg objekta korisnik dodajemo niz adrese. Također, dodajemo i funkcije za dodavanje nove adrese dodajAdresu(); tj. brisanje adrese obrisiAdresu(i);.

Prema tome i izgled forme smo morali prilagoditi. Ovdje nikako se smijemo zaboraviti dodati type="button" za gumbe za dodavanje i brisanje adrese jer ćemo u suprotnom dobiti vrlo zanimljive nuspojave, a to ne želimo.

Ako sada pokrenemo aplikaciju forma će izgledati ovako

Ionic 3 - Reaktivna forma (primjer 2)

Validacija forme

U našoj trenutnoj formi možemo u bilo koje polje unijeti bilo koju vrijednost jer nemamo nikakvu vrstu provjere tih vrijednosti. Sada ćemo to omogućiti koristeći Validators klasu.

Korisničko ime mora biti duže od 3 znaka, email mora imati ispravan oblik tj. mora sadržavati znak ‘@’, a lozinka ne smije biti duža od 9 znakova.

U našoj komponenti to izgleda ovako:

Dok forma nije validna korisnik ne smije imati mogućnost slanja podataka tj. mora mu se onemogućiti klik na gumb za slanje/spremanje podatka [disabled]="korisnik.invalid".

Forma sada izgleda ovako

Ionic 3 - Reaktivna forma (primjer 3)

Kreiranje prilagođenog validatora

Ovisno o potrebama moguće je napraviti i prilagođene validatore. Npr. ako pogledate validator za e-mail adresu iz gornjeg primjera možete vidjeti da on dopušta unos e-mail adrese sa nastavkom (.com) koji ima više od 3 znaka. Zato ćemo mi sada napraviti prilagođeni validator koji će takvu adresu označiti kao neispravnu.

Unutar mape Ionic3ReaktivnaForma\src\ kreirati ćemo novu mapu \validators\ sa datotekom email.ts

Prema tome možemo prilagoditi i home.ts datoteku

Validacija e-mail polja sada izgleda ovako

Validacija e-mail polja

Bonus – provjera tijekom unosa

Još jedna od mogućnosti koju možete koristiti je i provjera unešenih podataka u polje forme u trenutku unosa. U ovom ćemo primjeru provjeravati samo polje koje se tiče unosa korisničkog imena.

Na formi ćemo to prikazati na sljedeći način:

Na kraju to izgleda ovako:

Ionic 3 -Reaktivna forma (primjer 5)

Zaključak

Ovisno o potrebama koristiti ćete reactive ili template-driven forme. Ne postoji bolje ili lošije rješenje jer sve ovisi što vam u kojem trenutku treba.

Ako trebate napraviti jednostavniju tj. manju formu možete bez problema koristiti template-driven formu. To su forme koje sadržavaju [(ngModel)]="objekt".

Kada počnete raditi veće i kompleksnije forme svakako se prebacite na reactive forme. Jednostavnije ih je održavati i testirati plus što se sva logika nalazi na jednom mjestu.

Ionic 3 i Highcharts – prikaz grafikona

U ovom ću blog postu pokazati kako na jednostavan način prikazati napredne grafikone unutar Ionic 3 aplikacije koristeći Highcharts.

Više o Highchartsu možete pronaći u njihovoj službenoj dokumentaciji https://www.highcharts.com/docs

Postavljanje aplikacije

Za početak je potrebno kreirati novi Ionic projekt

Highcharts implementacija

Highcharts ćemo u naš Ionic 3 projekt dodati koristeći naredbu:

I spremni smo za korištenje.

Datoteka home.html sada će izgledati ovako

A datoteka home.ts će izgledati ovako

Možete primijetiti jednu stvar koja im je zajednička, a to je id="container".

Također, funkcija ionViewDidLoad(); brine se da se naš grafikon prikaže tek kada je stranice home.html tj. home.ts u potpunosti učitana, a spada pod Lifecycle events.

Lifecycle events are fired during various stages of navigation. They can be defined in any component type which is pushed/popped from a NavController.

I na kraju to izgleda ovako:

Ionic 3 i Highcharts – primjer grafikona

Ako želite prikaz nekog drugog grafikona dovoljno je promijeniti parametar type iz npr. type: 'bar' u npr. type: 'line' kako bi dobili sljedeće:

Ionic 3 i Highcharts - primjer grafikona

Prikaz dinamičkih vrijednosti

U gornjem primjeru koristimo fiksne podatke za prikaz grafikona, ali to ne mora biti slučaj i u vašoj aplikaciji. Naravno da možete koristiti API koji će vam dati dinamičke vrijednosti za prikaz.

Kako bi to bilo moguće prvo je potrebno kreirati servis za API tj. ApiProvider. U ovom ću primjeru također koristiti https://restcountries.eu/ API.

Sadržaj izgleda ovako:

Datoteka home.html ostaje u istom obliku, ali zato home.ts sada izgleda ovako:

Aplikacija sada izgleda ovako:

Ionic 3 i Highcharts - RestCountries API

Zaključak

Kao što ste mogli vidjeti iz ranije navedenih primjera korištenje Highchartsa unutar Ionic 3 aplikacije je vrlo jednostavno.