Video pozadina u Ionic aplikaciji

U današnje vrijeme brzog interneta šteta je ne iskoristiti mogućnost korištenja videa kao pozadine na ekranu za prijavu, splash screen ekranu ili kao pozadinu na bilo kojem drugom ekranu. Korisnici dobiju bolje korisničko iskustvo jer im taj video zaokupi pažnju i pitaju se što ih čeka dalje.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju.

Video pozadina

U ovom koraku trebam imati spreman video koji ću koristiti kao pozadinu. Video ću pronaći na stranici http://coverr.co/

Korištenje video pozadine u Ionic aplikaciji

Preuzeti video postavljam unutar ./src/assets/ mape.

Korištenje video pozadine u Ionic aplikaciji

Iskoristiti ću HomePage komponentu za prezentaciju ovog primjera.

Umjesto postojećeg sadržaja home.html datoteke

postavljem sljedeće:

Ono glavno nalazi se unutar video taga za kojeg vjerujem da je web developerima poznat.

Ono što možda na prvu nije poznato je atribut webkit-playsinline koji zapravo znači da želim pokretanje video točno unutar HTML elementa u koji sam ga stavio i to bez kontrola za upravljanje (pokretanje, pauza, zaustavljanje).

Također, kako bi ovo bilo moguće, potrebno je u config.xml datoteku dodati sljedeće:

I uz malo CSS-a:

Dobijem sljedeće:

Video pozadina u Ionic aplikaciji

P.S. Više o ovome moguće je saznati u knjizi Ionic Cookbook -Third Edition.

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.

Ionic aplikacija sa SVG ikonama

Iako na https://ionicons.com/ postoji veliki broj odličnih ikona ipak je povremeno potrebno koristiti ikone koje su napravljene specijalno za određenu Ionic aplikaciju. SVG se nameće kao logično rješenje jer zadržava koncept korištenja <ion-icon name="icon-name"></ion-icon>.

Za korištenje SVG-a kao ikona nije bitno radi li se o Ionic 1, Ionic 2, Ionic 3 ili o Ionic 4 projektu. Važno je samo imati jednu mapu unutar koje će se držati SVG datoteke.

U ovom ću slučaju staviti nekoliko SVG datoteka unutar src/assets/imgs mape.

Korištenje SVG ikona umjesto Ionic ikona

I to je sve što je potrebno kako bi se SVG datoteke koristile kao ikone unutar <ion-icon> komponente.

Ipak, postoje dva načina kako postići isti efekt.

Prvi način je navođenje putanje do SVG datoteke unutar same <ion-icon> komponente na sljedeći način:

Dok je drugi način kreiranje CSS klase za svaku ikonu unutar app.scss

nakon čega je moguće koristiti ikone na standardni način:

U praksi to može izgledati ovako:

Korištenje SVG ikona umjesto Ionic ikona

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.

Ionic 3 Market

U ovom ću blog postu pokazati kako unutar Ionic aplikacije direktno pristupiti nekoj drugoj aplikaciji koja se nalazi na Google Play Store ili Apple Store koristeći Ionic Native Market plugin.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju.

Pristup trgovini aplikacija

Prema službenoj dokumentaciji, Market plugin instaliram sljedećim naredbama:

Navodim ga unutar app.module.ts

Sada ću na početnoj stranici home.ts kreirati funkciju pokaziAplikaciju() koja će biti aktivirana prilikom klika na gumb. Toj funkciji proslijedim jedan parametar, a to je ID aplikacije.

Na ekranu će se nalaziti samo jedan gumb.

Konačan rezultat vidi se na sljedećoj slici:

Ionic 3 Market

Zaključak

Ovaj plugin na vrlo jednostavan način rješava potrebu otvaranja Google Play Store tj. Apple Store trgovine unutar Ionic aplikacije.

Struktura aplikacije prema package.json