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 – aplikacija koja govori

Share Button

Nedavno mi je pala jedna ideja na pamet koju mislim realizirati koristeći upravo Ionic Native Text To Speech plugin tako da će ovaj blog post poslužiti kao proba.

Dodavanje TTS plugina

Ionic Text To Speech

Za početak trebamo dodati plugin koji će činiti jezgru aplikacije, a to činimo naredbama:

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

Logika aplikacije

Logika aplikacije nalazit će se u ovom slučaju unutar home.ts datoteke.

Ovako to izgleda na ekranu

Ionic aplikacija govori

Ekran se sastoji od četiri dijela:

  • Polje za unos sadržaja kojeg želimo da aplikacija izgovori
  • Padajući izbornik s popisom jezika pomoću kojih želimo izgovoriti uneseni sadržaj
  • Klizač koji određuje brzinu izgovora
  • Gumb za pokretanje govora

U konačnici sve zajedno to izgleda ovako:

Zaključak

Nažalost nisam mogao pokazati kako ova aplikacija radi u praksi, ali ako budete radili prema ranije navedenom imati ćete i sami funkcionalan primjer aplikacije koja tekst pretvara u govor.

Ionic 3 – Prikaz Google mape

Share Button

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.