Č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.

Node.js API za slanje Push notifikacija

Share Button

U ovom ćemo blog postu napraviti Node.js API za slanje Push notifikacija. Ovaj API je samo jedan dio svega onoga što je potrebno zadovoljiti kako bi se push notifikacije mogle uspješno slati/primati i biti će zapravo nadogradnja prethodnog Node.js API-ja za upload datoteka.

Proces slanja push notifikacija:

U nekom od sljedećih blog postova napravit ćemo primjer Ionic aplikacije koja će koristiti ovaj API tj. koja će zapravo primati push notifikacije.

Google Firebase

Google Firebase ćemo koristiti kao servis koji će stajati između mobilne aplikacije i Node.js API-ja. Na adresi https://console.firebase.google.com/ potrebno je napraviti novi projekt s nazivom mobilne aplikacije koja će API koristiti.

Google Firebase Ionic

Server key će nam trebati u server.js kako bi naš API znao s kojim servisom će komunicirati.

Google Firebase Server Key

Osim toga potrebno je još dodati podršku za konkretne platforme na kojima će se temeljiti mobilna aplikacija jer svaka platforma ima svoje specifičnosti. S obzirom da je Ionic framework za izradu hibridnih mobilnih aplikacija mi ćemo odmah kreirati podršku za iOS i Android platforme.

Priprema za Android platformu

Google Firebase Android

Priprema za iOS platformu

Google Firebase iOS

Što se Google Firebasea tiče to je za sada to. Njemu ćemo se vratiti kada budemo radili mobilnu aplikaciju jer će nam trebati još neki podaci.

Testni push.js

Sada ćemo napraviti testni push.js s kojim ćemo isprobati radi li uopće naš API i hoće li push notifikacija stići na mobilni uređaj.

Prvo moramo instalirati https://www.npmjs.com/package/node-gcm pomoću naredbe $ npm install node-gcm --save.

gcmApiKey je zapravo server key koji imamo unutar Google Firebase sučelja, ali ovdje nam treba i jedinstveni token uređaja, a njega dobijemo unutar mobilne aplikacije. Kako dobiti taj token neću prikazati u ovom blog postu nego u nekom od sljedećih. Uglavnom, na slici se vidi token uređaja.

Google Developer Tools - Inspect Devices

Njega dobijemo na način da buildamo aplikaciju na mobilni uređaj i unutar chrome://inspect/#devices otvorimo konzolu iz koje kopiramo token koji onda zalijepimo u push.js

Sada imamo sve potrebno unutar push.js kako bi testirali API.

Ako sada pokrenemo $ node push.js i odemo na putanju http://localhost:3001/push

Ionic Push Send

možemo vidjeti da je push notifikacija uspješno stigla na mobilni uređaj

Android Ionic Push

Gledajući prema ovom primjeru ispada da nam svaki korisnik mobilne aplikacije treba poslati svoj jedinstveni token uređaja kako bi ga mi ručno upisali u push.js i kako bi mogli tom korisniku poslati push notifikaciju. Naravno da to nema smisla i da je ovo služilo samo za test. U produkcijskoj verziji API-ja potrebno je automatizirati čitav proces i napraviti automatsku registraciju jedinstvenog tokena, slanje tokena u bazu podataka pa će API slati push notifikacije prema svim uređajima čije tokene ima spremljene u bazu.

Nadogradnja MySQL baze

Napravit ćemo novu tablicu naziva device unutar MySQL baze u koju ćemo spremati sve tokene, a koji će u bazu biti poslani čim se mobilna aplikacija pokrene.

device table mysql

server.js nadogradnja

Sada ćemo nadograditi prethodno napravljen API za upload datoteka koji će odmah prilikom dodavanja novog korisnika poslati push notifikaciju o dodanom korisniku.

Pomoću naredbe $ npm install node-gcm ćemo instalirati https://www.npmjs.com/package/node-gcm i na vrh datoteke dodati:

Sada kada imamo spremnu novu tablicu u bazi možemo napraviti API koji će iz mobilne aplikacije primati jedinstvene tokene.

Sada možemo nadograditi i drugi dio API-ja koji služi za dodavanje korisnika.

U ovom slučaju tijelo poruke message sastojat će se od korisnik.k_ime i korisnik.k_prezime.

Iz sljedeće se animacije vidi da smo dodali novog korisnika Tomislav Stanković.

Korisnik API Push

Istovremeno s dodavanjem korisnika korisnicima mobilne aplikacije stigla je sljedeća push notifikacija.

Android Ionic korisnik Push

Zaključak

I to je to! Napravili smo funkcionalan API za slanje push notifikacija. Još ostaje za napraviti iOS i Android mobilnu aplikaciju koja će automatski slati token uređaja u MySQL bazu i koja će primati push notifikacije, ali o tome će više riječi biti u nekom od sljedećih blog postova jer bi ovaj bio previše dug ako bi se htjelo sve detaljno obraditi.

Posjetite GitHub i preuzmite projekt.