Otvaranje postavki mobilnog uređaja iz Ionic aplikacije

Prilikom izrade Ionic mobilnih aplikacija jedan od zahtjeva može biti da se iz aplikacije mogu otvoriti neke od postavki mobilnoj uređaja. Npr. postavke vezane uz geolokaciju, WiFi ili nešto treće. Puno je jednostavnije omogućiti korisniku da klikom na jedan gumb ode direktno na postavke koje su mu u tom trenutku potrebne kako bi unutar Ionic aplikacije nešto obavio nego da sam mora tražiti te iste postavke.

Od postavki kojima je moguće pristupiti koristeći ovaj plugin dostupno je sljedeće:

Kreiranje aplikacije

Kreiram novi Ionic projekt i odmah dodajem Android platformu jer planiram aplikaciju pokrenuti na mobilnom uređaju.

Open Native Settings

Plugin Open Native Settings instaliram sljedećim naredbama:

Nakon toga ovaj plugin deklariram unutar app.module.ts datoteke.

Funkcionalnost se nalazi unutar home.ts datoteke tj. unutar HomePage klase, a sastojat će se od funkcija od kojih svaka otvara neku od ranije navedenih postavki mobilnog uređaja.

Open Native Settings

Ako neku od postavki pozivam na ovaj način this._openNativeSettings.open("accessibility") ekran s postavkama će se otvoriti umjesto ekrana Ionic aplikacije dok ako dodam parametar true na sljedeći način this._openNativeSettings.open(["accessibility", true]) otvara se novi ekran s postavkama što se može vidjeti na sljedećoj slici.

Open Native Settings

Ovo na ekranu izgleda ovako:

Open Native Settings

Zaključak

Struktura projekta prema package.json

Uvod u Ionic 4

Nakon Ionic 1, Ionic 2 i Ionic 3 vrijeme je za uvod u Ionic 4. Biti će dosta poznatih detalja od ranijih verzija, ali isto tako biti će i novih detalja kojih ranije nije bilo.

Manje više, sve o čemu ću u nastavku pisati može se pronaći u službenoj dokumentaciji na poveznici https://beta.ionicframework.com/docs

Postavljanje razvojne okoline

Za uspješno kreiranje Ionic 4 projekta potrebno je zadovoljiti nekoliko preduvjeta.

Potrebno je instalirati:

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

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

Prije nastavka potrebno je provjeriti da je sve uspješno instalirano:

  • $ node -v
  • $ npm v
  • $ ionic v

Pokretanje Ionic 4 projekta

Ako je sve ranije navedeno uspješno instalirano već sada moguće je kreirati novi Ionic 4 projekt.

Ionic 4 beta zahtjeva oznaku --type=angular i verziju CLI-a 4.0.0 ili veću.

Osim sidemenu teme mogao sam birati još između blank i tabs.

Ionic 4 - starter tema

Ubrzo na ekranu vidim sljedeću poruku:

Uvod u Ionic 4 - Cordova

Da je u pitanju Ionic 3 ovdje bi dodao Cordovu, ali kako Ionic 4 podržava i koristi Capacitor u ovom slučaju neću dodati podršku za Cordovu.

Uvod u Ionic 4 - Cordova

Nakon toga imam mogućnost instalacije Ionic Pro SDK-a što mi u ovom slučaju nije potrebno niti ga inače koristim pa ću i tu opciju preskočiti tj. odbiti.

Ionic Pro SDK

Na kraju dobijem sljedeću strukturu projekta:

Uvod u Ionic 4

Od važnijih dijelova aplikacije mogu izdvojiti dio koji počinje sa “app”. U pitanju je root komponenta koja je u istom obliku postojala i u dvije prijašnje verzije Ionica.

Jedina novost ovdje je app-routing.module.ts koji sadržava:

Naravno, u pitanju je Angular Routing o čemu se više može saznati na poveznici https://angular.io/guide/router

U web pregledniku projekt izgleda ovako:

Uvod u Ionic 4

Zaključak

Ovo je kratak pregled kreiranja Ionic 4 projekta koristeći Angular. U sljedećim blog postovima pokazati ću kako aplikaciji dodati nativne funkcionalnosti koristeći Capacitor jednako kao što sam to prije radio koristeći Ionic Native.

Stigao je Ionic 4!

Prošlo je manje od godinu i pol kako sam objavio članak pod naslovom Stigao je Ionic 3!, a sada je već stigao Ionic 4. Iako je u pitanju beta verzija to ne mijenja činjenicu da nema povratka na staro i da će uskoro Ionic 4 iz bete doći u finalnu fazu svojeg životnog ciklusa.

Ionic 4 donosi značajna poboljšanja performansi, podršku za korištenja bilo kojeg frameworka (a ne samo Angulara kao što je bilo do sada), potpuno novu dokumentaciju i još mnogo toga o čemu ću više reći u nastavku.

Ovako na prvu sve to djeluje vrlo obećavajuće.

Web komponente

Web komponente su skup standarda ili tehnologija koji omogućavaju kreiranje cjelovitih HTML elemenata (Custom Elements, Shadow DOM, HTML imports, HTML Template).

U praksi to znači da se jednom kreirana komponenta može koristiti, neovisno o odabranom frameworku, unutar određene mobilne ili web aplikacije.

Iako se o web komponentama može čitati još od 2011. Ionic tim smatra da su sada postale dovoljno zrele za širu upotrebu. Za neke developere bi ovo mogla biti poprilična promjena, ali za nas koji radimo s Angularom ta bi tranzicija mogla proći skoro neprimjetno.

Kompatibilnost

Od samog početka Ionic je kreiran u kombinaciji s Angularom, iako je želja bila da Ionic bude UI Framework koji će moći raditi s bilo kojom tehnologijom, ali s popularizacijom web komponenti to više ne mora biti slučaj.

U praksi to znači da je od sada moguće koristiti bilo koji framework, bio to Angular, Vue ili React, s Ionicom.

Naravno, za nas koji radimo s Angularom i ovdje će se malo toga promijeniti.

For those using Angular, this means very little will change. Most of the APIs and tags continue to work as an Angular developer would expect, and Ionic’s core Angular services work just like they used to. We’ve worked hard to keep the experience for Angular developers largely the same. – Announcing the Ionic 4 Beta

Posebno zanimljiva je činjenica da nadogradnje koje redovno stižu za Ionic više ne ovise o verziji korištenog frameworka. To bi u praksi značilo – ako npr. u verziji 4.2 dođe nova funkcionalnost da mi njeno korištenje neće uvjetovati obavezna nadogradnja novije verzije frameworka kao što je do sada bio slučaj.

Ionic & Angular CLI

Ionic tim je odlučio, umjesto da samostalno razvijaju sve CLI funkcionalnosti, iskoristiti snagu Angular CLI-a.

Ionic 4 donosi novi Ionic tj. Angular CLI i pripadajući Router. Ovo opet znači da developeri koji inače koriste Angular mogu bez problema koristiti Angular CLI unutar Ionica kao što to rade i u web projektima.

Developere koji su Angular koristili isključivo prilikom razvoja Ionica aplikacija očekuje mini learning curve, ali dugoročno gledano mislim da je ovo dobar korak prema naprijed.

Ionic 3 -> Ionic 4

Iako migracija zahtjeva određene preinake to neće biti ništa strašno. Opet kažem, za nas koji inače koristimo Angular promjene ne donose ništa novo i jedino što je potrebno napraviti je prilagoditi određene dijelove Ionic 3 aplikacije da rade na Ionic 4 način. U prvom redu tu se radi o promjeni navigacije unutar aplikacije. Svi servisi, komponente i direktive radit će kao i do sada.

Kako bi se proces migracije maksimalno olakšao dostupan je Migration Tool.

Zaključak

Ionic 4 je još uvijek u beta verziji i zato treba oprezno pristupiti migraciji sa verzije 3 unatoč tome što je proces migracije jednostavan.

Na ovom ću blogu svakako i dalje obrađivati Ionic teme tako da će i Ionic 4 biti detaljno pokriven. Ako ih imate, prijedloge tema možete ostaviti u komentarima.