Čemu služi Ionic Native 3.x?

Share Button

Ionic Native pruža vašoj aplikaciji korištenje nativnih funkcionalnosti mobilnih uređaja, bez toga vaša Ionic aplikacija ne bi bila ništa više od obične web stranice umotane u formu mobilne aplikacije.

Kako je bilo prije? (Ionic 1 & Cordova)

Za vrijeme dok je vladao Ionic 1, koristili smo Cordova pluginove koji su nam također omogućavali korištenje nativnih funkcionalnosti, ali tada je još uvijek vladao mit da oni ne mogu pristupiti svim onim funkcionalnostima kojima može neka nativna mobilna aplikacija. Naravno da je to bilo netočno, ali Ionic/Cordova/PhoneGap developerima se bilo teško snaći jer nije postojalo jedno centralno mjesto koje bi na jednostavan način pružilo pregled svih dostupnih pluginova s detaljnom dokumentacijom. I tada je stigao Ionic Native.

Ionic Native

Ionic Native je stigao kako bi jednom udarcem ubio dvije muhe. Kao prvo na jednom mjestu možete pronaći sve dostupne pluginove, a kao drugo postali su jednostavniji za korištenje. Ukratko, svaki Ionic native plugin omotan je TypeScript dekoratorom koju mu daje podršku za Promise, Observable i Typing. To je posebno korisno kada se zna da većina tih pluginova nije imala tu vrstu podrške. Također, svaki se plugin može koristiti kao modul u vašem TypeScript ili ES6+ projektu.

Ako ste u trenutku kada je došao Ionic Native imali aktivan Ionic1/Angular1 projekt koji koristi ngCordova pluginove vjerujem da ste se već tada oprostili od njih i omogućili im novu mladost prelaskom na Ionic Native. Ako niste možete to učiniti na način da umjesto ngCordova uvezete ionic.native, objavio sam blog post o tome pod naslovom “Što je i čemu služi ngCordova unutar Ionic aplikacije?“. Prilikom prijelaza svakako provjerite dokumentaciju za svaki slučaj, iako bi većina trebala raditi bez ikakvih problema.

Kako se koristi Ionic Native?

Za početak potrebna je instalacija

Za potrebu ovog primjera recimo da želite dodati AdMob, Device i SQLite i da ćete ih sve dodati u home.ts

Instalirate ih naredbom

I dodate u home.ts

Ionic Native 3.x

Ionic Native 3.x stigao je ranije ove godine s podrškom za preko 130 nativnih funkcionalnosti. 3.x donosi drastično smanjenje paketa koda (reduced code bundle size). To se postiže na način da prilikom dodavanja plugina u projekt dodaje samo kod koji je potreban da bi taj plugin radio čime se postiže smanjenje od oko 15% u ukupnoj težini datoteka vezanih uz pluginove.

Druga velika prednost 3.x je mogućnost simuliranja (Plugin Mocking)rada bilo kojeg od 130 pluginova direktno u web pregledniku. Znači ne treba vam niti simulator niti fizički uređaj kako bi testirali određeni Ionic Native 3.x plugin. Ipak, moja preporuka i savjet je da svakako koristite neki fizički mobilni uređaj za testiranje jer on će vam dati pravu sliku onoga što radite i što trebate raditi.

Ionic Native 3.x ne možete koristiti u Ionic/Angular 1.x projektima. Međutim to ne bi trebao biti veliki problem jer imate Ionic Native 2.x

Kako se koristi Ionic Native 3.x?

Za početak potrebna je instalacija

Nakon toga spremni ste za dodavanje pluginova. Za potrebu ovog primjera recimo da želite dodati AdMob, Device i SQLite i da ćete ih sve dodati u home.ts

Instalirate ih naredbom

I dodate u home.ts

Zaključak

Razlog za ovaj blog post su nekolicina emailova koje sam primio, a koji se tiču nekih mojih tutorijala na ovom blogu koje su posjetitelji s manje ili više uspjeha išli rekonstruirati. Kamen spoticanja bili su pravi Ionic Native pluginovi jer imam seriju starijih blog postova koji koriste Ionic Native, a kasnije seriju blog postova koji koriste Ionic Native 3.x pa bi me posjetitelji znali pitati zašto je to različito tj. nije im bilo jasno jel to jednostavno moj stil ili to tako mora biti.

Kako god bilo nadam se da će ovaj blog post dati odgovor na ta pitanja i riješiti te nedoumice, kako za pitanja koja su mi stizala do sada tako i za pitanja koja će mi tek stići.

Ionic 3 – Slanje SMS poruka

Share Button

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 3 – Lazy Loading (lijeno učitavanje)

Share Button

Jedna od stvari koja me najviše oduševila kada je stigao Ionic 3 je Lazy Loading. Toliko sam bio oduševljen da sam samo tražio priliku gdje ću to moći ugraditi i uživati u svim prednostima koje donosi. Naravno ima u svojih nedostataka, ali s njima se može živjeti pa ćemo o tome malo kasnije.

Lazy Loading označava učitavanje pojedinih dijelova aplikacije po potrebi umjesto da se učita sve odjednom kao što je bilo slučaj do sada.

To konkretno znači sljedeće – kada ste prije kreirali nove stranice unutar aplikacije trebali ste ih sve uvesti unutar app.module.ts i također unutar svake stranice gdje ih planirate pozivati. Međutim sada to više ne morate raditi jer svaka kreirana stranica ima svoju datoteku naziv-stranice.module.ts i ne morate ju više uvoziti unutar app.module.ts niti bilo gdje drugdje unutar aplikacije nego ju možete odmah koristiti.

Prvo ću objasniti dosadašnji način kreiranja i međusobnog povezivanja stranica, a onda idemo na Lazy Loading putovanje.

Stari način

Kreiramo novu stranicu naredbom

I dobijemo sljedeću strukturu

Stranica primjer.ts izgleda ovako

Našu novu stranicu ne možemo koristiti u ostatku aplikacije dok ju ne uvezemo unutar app.module.ts.

I recimo da sada na HomePage želim staviti poveznicu na PrimjerPage. To mogu napraviti jedino ako prvo uvezem PrimjerPage unutar home.ts.

I sada zamislite aplikaciju u kojoj imate 20ak stranica i koje međusobno želite povezati. Kao prvo, sve ih trebate uvesti u app.module.ts, a onda još trebate razmišljati na kojim sve stranicama trebate uvesti određenu stranicu import { PrimjerPage } from './../primjer/primjer'; kako bi ju mogli pozvati unutar neke funkcije. Vrlo lako se izgubiti u svemu tome.

Novi način

Kreiramo novu stranicu naredbom

I dobijemo sljedeću strukturu

Stranica primjer.ts izgleda ovako. Jedina razlika obične i Lazy Loading strukture je u parametru IonicPage .

I naravno, trebamo vidjeti od čega se sastoji primjer.module.ts. I kao što možete vidjeti izgleda jednako kao i standardna src/app/app.module.ts datoteka.

I odmah smo spremni koristiti našu novu stranicu u ostatku aplikacije. Primijetit ćete da u ovom slučaju nisam morao uvesti PrimjerPage kako bi ju koristio unutar funkcije nego ju samo pozovem kao string 'PrimjerPage'.

Iz gore navedenog možete vidjeti koliko je Lazy Loading koristan i koliko olakšava rad s aplikacijom koja ima više stranica. Kao prvo ne morate ništa ručno uvoziti unutar app.module.ts niti morate misliti gdje ćete pozivati neku od stranica kako bi i nju uvezli, a uz to dobijete i malo bržu aplikaciju jer se neće sve učitavati odjednom.

Zaključak

Lazy Loading radi po principu – što manje to bolje. Njegovim korištenjem imate manje koda, manje uvoza i manje brige oko putanja do određenih stranica/klasa. Po mojem mišljenju, Lazy Loading je jedna od najboljih značajki Ionica 3 pa iako još uvijek nije obavezna mislim da bi ju svatko trebao koristiti. Naravno ne slažu se svi s tim.

Na kraju ostaje na vama da sami odlučite na koji ćete način složiti Ionic aplikaciju.

Prednosti:
– Poboljšava modularnost
– Ubrzava vrijeme učitavanja aplikacije
– Ubrzava korištenje aplikacije
– Omogućava deep linking

Nedostatci:
– Gubi se type checking

Ionic 3 – Firebase registracija i prijava

Share Button

Kada razvijate Ionic aplikaciju i dođete do faze u kojoj trebate funkcionalnosti kao što su registracija i prijava korisnika imate dvije mogućnosti. Napraviti vlastiti API ili koristiti neki vanjski servis kao što su npr. Google Firebase i Auth0. U prvom slučaju imate više kontrole jer točno znate zašto ste nešto napravili dok u drugom slučaju imate više sigurnosti jer velike tvrtke stoje iza usluga koje pružaju i na kojima radi puno developera.

Postavljanje Firebase projekta

Za početak je na adresi https://console.firebase.google.com/ potrebno kreirati projekt.

Nakon postavljanja projekta u izborniku Authentication odabrat ćemo Email/Password metodu. To će nam omogućiti da se u Ionic aplikaciju registriramo tj. prijavimo koristeći email i lozinku.
GoogleFirebase Authentication Method

Sada ćemo se prebaciti na početnu stranicu našeg Google Firebase projekta i kliknuti na Add Firebase to your web app prilikom čega ćemo dobiti config objekt koji ćemo koristiti unutar aplikacije.
GoogleFirebase Config Object

Postavljanje Firebasea u Ionic

Ranije preuzet config objekt možemo odmah dodati unutar aplikacije, a nalazit će se unutar datoteke app.firebase.config.ts koju ćemo ručno kreirati.

IonicFirebase Config

Međutim, taj nam config objekt ničemu ne služi dok ne dodamo dva paketa koji znaju što s njima raditi. A to su:

koje instaliramo naredbom

I nakon toga, kao što vam je i poznato, trebamo ih uvesti u app.module.ts

Sada imamo sve što nam je potrebno kako bi korisnicima Ionic aplikacije omogućili registraciju i prijavu koristeći email i lozinku.

Kreiranje stranica za registraciju i prijavu

Stranice za registraciju i prijavu kreiramo sljedećim naredbama

Nakon toga ćemo odmah postaviti stranicu za prijavu kao zadanu umjesto dosadašnje Home stranice.

Registracija

Iako korisnika možemo ručno dodati direktno u Firebase sučelju mi ćemo ga registrirati kroz našu Ionic aplikaciju.

GoogleFirebase Add User

Sada ćemo napraviti formu putem koje će se korisnici registrirati. Forma se sastoji od dva polja. U prvo se polje unosi e-mail, a u drugo lozinka. Na kraju imamo gumb sa funkcijom registracija() u kojoj se prosljeđuje objekt user .

Logika stranice za registraciju nalazi se unutar registracija.ts

Proces registracije na kraju izgleda ovako:

GoogleFirebase Registracija

Prijava

Stranica za prijavu također se sastoji od forme za unos s dva polja (e-mail i lozinka), ali ra razliku od stranice za registraciju ova stranica ima dva gumba. Jedan koji služi za prijavu prijava(user) , a drugi idNaRegistraciju() koji vodi na stranicu tj. formu za registraciju.

Logika komponente za prijavu malo je proširena za razliku od one za registraciju. Sastoji se od dvije funkcije.

Funkcija prijava(user) obavlja dvije radnje. Vrši prijavu i obavlja redirekciju na stranicu HomePage u slučaju kada je prijava uspješna.

Proces prijave izgleda ovako:

GoogleFirebase Prijava

Zaključak

I to je sve! Vidjeli ste primjer Google Firebase registracije i prijave za Ionic 3 projekt. Dalje si možete ugraditi mogućnost pamćenja prijave tako da se jednom prijavljeni korisnik ne mora prijaviti svaki put kada pokrene aplikaciju.

Google Firebase Auth odlična je opcija kada želite pokriti područje registracije i prijave. Za kratko vrijeme možete dobiti funkcionalnu aplikaciju spremnu za implementaciju ostalih funkcionalnosti.

Ionic 3 – prikaz informacija o uređaju i platformi

Share Button

Postoji mnogo vrsta i verzija mobilnih i drugih uređaja na kojima možemo pokrenuti Ionic aplikaciju, a također postoji i mnogo pluginova tj. dodataka pomoću kojih možemo proširiti mogućnosti Ionic aplikacije. Međutim, mnoštvo mogućnosti donosi i mnoštvo briga jer neće se sve funkcionalnosti moći iskoristiti na svim vrstama uređaja i nama kao developerima je vrlo korisno znati na kojem se uređaju tj. na kojoj se platformi vrti naša Ionic aplikacija kako bi je bolje znali prilagoditi.

Za ovu ćemo svrhu koristiti Device plugin koji dohvaća sljedeće podatke:

  • cordova – verzija Cordove
  • model – naziv modela. Vrijednost koju određuje proizvođač i može se razlikovati u različitim verzijama istog proizvoda
  • platform – naziv operacijskog sustava uređaja
  • uuid – jedinstveni identifikator uređaja
  • version – inačica/verzija operacijskog sustava
  • manufacturer – naziv proizvođača uređaja
  • isVirtual – je li uređaj pokrenut na simulatoru
  • serial – serijski broj uređaja

Dodavanje Device plugina

Pod uvjetom da već imamo pokrenut Ionic projekt možemo dodati IonicNative Device plugin sljedećim naredbama:

Nakon uspješne instalacije plugin ćemo dodati kao jedan od providera u app.module.ts

Primjena Device plugina

IonicNativeDevice

U ovom ćemo primjeru prikazati sve informacije koje nam Device plugin može dati na početnoj stranici.

Na uređaju to izgleda ovako

IonicNative Device Instance Members

Zaključak

Kao što se iz ranije navedenog može vidjeti korištenje Device plugina je vrlo logično i jednostavno, a mogućnosti koje pruža su mnogobrojne i ovise jedino o vašoj mašti da određene funkcionalnosti pružite na određenim uređajima i platformama.