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

Stigao je Ionic 3!

Share Button

Stigao nam je Ionic 3! Iako se iz samog naziva nove verzije promjena može činiti velikom zapravo nije, barem ne u onoj mjeri u kojoj je nakon Ionic verzije 1 stigla verzija 2.

Ako pokrećete novi projekt naredbom $ ionic start NazivAplikacije blank --v2 od petka, 07.04.2017., onda već koristite Ionic 3 i ne morate raditi izmjene koje ću opisati u nastavku.

Za sve vas koji imate postojeće projekte temeljene na Ionicu 2 i želite prijeći na Ionic 3 u nastavku možete saznati kako to napraviti.

Ionic 2 -> Ionic 3

Angular 4, koji je izašao prije nekoliko dana, jedan je od važnijih razloga zašto sada imamo i Ionic 3.

1.) package.json

Prije svega potrebno je obrisati postojeću node_modules mapu jer ćemo od sada koristiti nove NPM pakete.

Nakon toga, potrebno je navesti nove NPM pakete koji sada uključuju novi Angular 4 i novi TypeScript. To je moguće učiniti na način otvorite postojeću package.json datoteku i dodate sljedeće:

VAŽNO!

Naravno, ako u postojećem Ionic 2 projektu imate neki NPM paket naveden pod dependencies ili devDependencies navedite i njega unutar package.json datoteke kako bi se i on ponovno instalirao jer vam u suprotnom Ionic 3 projekt neće raditi.

U jednom od svojih projekata koristio sam @ngx-translate/core NPM paket pa sam zato i njega naveo unutar package.json datoteke.

Sada možemo instalirati nove NPM pakete jednostavnom naredbom $ npm install

2.) BrowserModule

U app.module.ts je potrebno uvesti BrowserModule koji zapravo omogućava korištenje mogućnosti koje Angular pruža.

Ako koristite Http onda trebate uvesti i HttpModule

3.) Ionic Native 3.x

Nekoliko dana prije nego što je stigao Ionic 3 dobili smo Ionic Native 3.x. To je zapravo novi način korištenja Cordova pluginova tj. Ionic Native pluginova. Više o tome možete saznati ovdje.

Uglavnom, u postojećoj Ionic 2 aplikaciji trebate opet instalirati sve pluginove tako da budu prilagođeni novoj strukturi ostatka aplikacije. Do sada ste pluginove instalirali na Ionic Native 2.x način, a to znači korištenje naredbe kao što je npr. $ ionic plugin add cordova-plugin-device te se onda taj plugin u aplikaciju poziva na sljedeći način import { Device } from 'ionic-native';

Ionic Native 3.x način instalacije i korištenja podrazumijeva instalaciju plugina još i s naredbom $ npm install --save @ionic-native/device pri čemu se uvoz plugina vrši na sljedeći način

Znači, od sada svoje Ionic Native 3.x pluginove instalirate koristeći obje ranije navedene naredbe. Također obavezno provjerite dokumentaciju svakog plugina jer se vrlo lako može dogoditi da po novome koristi neke nove metode, a stare više ne i zbog toga vam se može dogoditi da aplikacija prikazuje grešku vezanu uz neki od pluginova.

4.) module.ts i IonicPage

Kada bi u Ionic 2 aplikaciji kreirali novu stranicu dobili biste tri datoteke (.html,.scss,.ts), dok ako idete kreirati novu stranicu u verziji 3 dobit ćete dodatnu datoteku s nastavkom .module.ts, a kako se ovdje radi o prebacivanju Ionic 2 aplikacije u Ionic 3 znači da svaka vaša ranije kreirana stranica treba dobiti svoju .module.ts datoteku.

U nastavku možete vidjeti primjer jedne takve datoteke

Nakon toga u .ts datoteci koju imate od ranije za sve stranice dodajte IonicPage dekorator na sljedeći način

5.) Uklanjanje uvoza stranica

Nakon prethodnog koraka možete proći kroz sve stranice tj. njihove .ts datoteke i maknuti uvoze drugih stranica import {AboutPage} from '../about/about';. Isto napravite i unutar app.module.ts datoteke u kojoj ćete također maknuti stranice iz declarations i entryComponents nizova.

Način na koji ćete od sada međusobno povezivati stranice ne razlikuje se puno od “starog” načina osim što ćete naziv svake stranice proslijediti kao string.

Znači, umjesto let modal = this.modalCtrl.create(ReplacementModalPage); koristit ćete let modal = this.modalCtrl.create('ReplacementModalPage'); .

Mogući problemi

Ako ste napravili sve ranije navedeno vi od sada koristite novi Ionic 3 i Angular 4. Ipak, unatoč tome vaš Ionic 3 projekt i dalje ne mora raditi kako bi trebao, a uzroka može biti nekoliko.

ionic-native

Uncaught Error: Cannot find module "ionic-native" Ako dobijete grešku “Uncaught Error: Cannot find module “ionic-native”” znači da još negdje u aplikaciji koristite Ionic Native 2.x način uvoza pluginova. Kada iz svih datoteka izbacite import { NazivPlugina } from 'ionic-native'; ovu grešku više nećete vidjeti.

forChild

Kreirali ste novu stranicu i dobili grešku Property ‘forChild’ does not exist on type ‘typeof IonicModule’ rješenje se da umjesto IonicModule koristite IonicPageModule .

ion-img

Ako dobijete grešku “TypeError: Cannot read property ‘isImgsUpdatable’ of null” to znači da unutar neke .html datoteke koristite <ion-img> tag, a koji se ne nalazi unutar <ion-content> taga. Više o tome ovdje.

Kako bi ovu grešku izbjegli koristite običan <img> tag na svim mjestima koja se ne nalaze unutar <ion-content> taga.

ionic grid

Sve ranije ste dobro napravili i gore navedenih grešaka više nema, ali aplikacija i dalje ne izgleda kako bi trebala i sve je nekako razbacano, nije na svojem mjestu,… Zašto je to tako? Odgovor se nalazi u novom Ionic Grid sistemu.

Npr.

će od sada biti

Više o tome u službenoj dokumentaciji.

Prođite kroz .html datoteke i napravite potrebne izmjene kako bi vaša nova Ionic 3 aplikacija zasjala u punom sjaju!

Zaključak

Kao što ste mogli vidjeti migracija na Ionic 3 može se obaviti relativno brzo i relativno jednostavno kada znate što treba napraviti. Ipak, prije nego objavite novu verziju aplikacije na Google Play Store ili Apple Store uložite nešto vremena u testiranje svih funkcionalnosti vaše Ionic 3 aplikacije pogotovo zato što ste instalirali nove verzije pluginova čije metode se mogu razlikovati od onih koje trenutno koristite u mobilnoj aplikaciji i koje je zbog toga potrebno prilagoditi.