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

Ionic Framework resursi

Iako sve blog postove koje sam objavio na temu Ionic Frameworka možete pronaći u kategoriji Razvoj odlučio sam objaviti ovaj blog post kako bi vam olakšao pronalazak i pregled svih blog postova vezanih upravo uz Ionic Framework.

Ako niste pronašli vama zanimljiv/potreban blog post slobodno ostavite komentar s prijedlogom teme pa ću se potruditi objaviti blog post ili pronaći resurs koji će vam biti od pomoći.

69.) Video pozadina u Ionic aplikaciji
68.) Uvod u Ionic 4
67.) Stigao je Ionic 4!

Ionic 3

1.) Stigao je Ionic 3!
2.) Ionic 2 & 3 – SQLite servis
3.) Ionic 3 – AdMob monetizacija
4.) Kako ubrzati pokretanje Ionic 3 aplikacije?
5.) Ionic 3 – Prikaz Google mape
6.) Ionic 3 – aplikacija koja govori
7.) Ionic 3 – prikaz informacija o uređaju
8.) Ionic 3 – Firebase registracija i prijava
9.) Ionic 3 – Primjeri najbolje prakse
10.) Ionic 3 – Slanje podataka na API
11.) Ionic 3 – Lazy Loading (lijeno učitavanje)
12.) Ionic 3 – Slanje SMS poruka
13.) Čemu služi Ionic Native 3.x?
14.) Ionic 3 – Autocomplete polje za unos
15.) Ionic 3 – zatražite od korisnika da ocjeni vašu aplikaciju
16.) Ionic 3 aplikacija za audio i video stream
17.) Ionic 3 – select, search i autocomplete komponenta
18.) Ionic 3 i Highcharts – prikaz grafikona
19.) Ionic 3 – Korištenje, napredne, reaktivne forme
20.) Uvod u Ionic 3
21.) Ionic 3 desktop aplikacija koristeći Electron
22.) DevApp – uživo osvježavanje Ionic aplikacija na više uređaja
23.) Ionic 3 & Google Maps – prikaz rute između dvije lokacije
24.) Ažuriranje Ionic Android aplikacije bez Google Storea
25.) Ionic 3 – podrška za vibraciju
26.) Ionic 3 – Spremanje i slanje podataka kada nema interneta
27.) Ionic – RxJS Observable Timer
28.) Ionic 3 – Facebook prijava
29.) Ionic 3 – prikaz informacija o SIM kartici
30.) Ionic i Gravatar – prikaz slike profila
31.) Ionic 3 i WordPress REST API – prikaz blog postova
32.) Ionic 3 – Google login/prijava
33.) Ionic 3 – kako spriječiti slučajno gašenje aplikacije
34.) Ionic 3 – Searchbar komponenta
35.) Ionic Tabs App – Kako spriječiti da se HomePage učitava prije AppComponent
36.) Ionic Insomnia – Nitko nije lud da spava
37.) Ionic Range komponenta
38.) Ionic 3 – Barcode QR skener
39.) Ionic 3 Skeleton Screen – stvaranje dojma brzine
40.) Ionic 3 Market

Ionic 2

1.) Uvod u Ionic 2
2.) Ionic 2 – prikaz JSON-a sa API-ja
3.) Ionic 2 – provjera povezanosti s mrežom
4.) Ionic 2 – Push notifikacije za Android
5.) Ionic 2 – Toast obavijesti
6.) Ionic 2 – Podrška za višejezičnost
7.) Google Drive REST API & Ionic 2 – prikaz podataka
8.) Ionic 2 – Events, upravljanje događajima
9.) Ionic 2 – prosljeđivanje parametara između stranica
10.) Ionic 2 – Dodavanje vanjskih skripti
11.) Ionic 2 – SQLite za trajno spremanje podataka

Ionic 1

1.) Kako napraviti Apache Cordova Platform update
2.) Ionic Framework – priprema razvojne okoline
3.) Stvaranje novog Ionic projekta
4.) Pokretanje Ionic aplikacije na Android platformi
5.) Što je i čemu služi ngCordova unutar Ionic aplikacije?
6.) Ionic aplikacija (ni)je povezana s internetom
7.) Slanje e-maila iz Ionic mobilne aplikacije pomoću Mailgun APIja

Razno

1.) Ionic aplikacija sa SVG ikonama
2.) Što je Ionic View?
3.) Ikona i početni zaslon Ionic aplikacije
4.) Kako Ionic aplikaciju ugraditi u postojeće web stranice
5.) Priprema i objava Ionic aplikacije na Google Play Store
6.) Ionic – automatska prijava u aplikaciju
7.) Ionic & Crosswalk – podrška za starije verzije Androida
8.) Ionic Deploy – jednostavan i brz način ažuriranja Ionic aplikacije

Ionic 3 – Primjeri najbolje prakse

Primjeri najbolje prakse koje ćete vidjeti u nastavku samo su preporuka kako nešto napraviti tj. još jedan od načina kako nešto napraviti. Ono što se meni čini logičnim ili ispravnim vama se možda neće činiti i to je u redu. Svatko ima neki svoj način. Ako imate nešto za dodati slobodno se javite u komentarima.

Ništa jQuery, samo Angular

Ako ste front-end developer onda sigurno znate što je i čemu služi jQuery i može biti vrlo izazovno koristiti neku jQuery “foru” kako bi riješili nešto u svojoj Ionic aplikaciji iako je Angular više nego sposoban napraviti isto ili još i više.

Probajte ne koristiti jQuery unutar Ionica jer ako ste to napravili jednom i sve je bilo u redu vrlo je vjerojatno da ćete to napraviti još koji put kako bi što brže riješili neki problem. S vremenom ćete si otežati testiranje (debugging) i može doći do problema koji tu zapravo nisu trebali niti postojati. Kada miješate “dva svijeta” rezultat često neće biti onakav kakvog ste očekivali.

Dizajn sučelja

Ne izmišljajte toplu vodu i ne komplicirajte si život raznim i nepotrebnim CSS klasama. Ionic pruža set vrlo korisnih i jednostavnih dodataka za dizajn sučelja vaše Ionic aplikacije.

Jasno je da ovi dodatci ne mogu pokriti sve scenarije s kojima se možete susresti, ali olakšavaju rad s onim najčešćim potrebama svakog Ionic developera.

Također, Ionic je nedavno predstavio Responsive Grid koji je vrlo blizak Bootstrapu. Iskoristite to.

Životni ciklus (Lifecycle Events)

Svaka stranica koju napravite u Ionic aplikaciji ima svoj životni ciklus. Od trenutka kada se stranica učita, preko u potpunosti učitane stranice pa sve do odlaska na drugu stranicu i onda taj ciklus kreće iz početka. Kako bi mogli reći Ionicu što želite da se izvrši u nekoj od tih faza koristite neke od mogućnosti upravljanja fazama izvršavanja životnog ciklusa.

  • ionViewDidLoad
  • ionViewWillEnter
  • ionViewDidEnter
  • ionViewWillLeave
  • ionViewDidLeave
  • ionViewWillUnload
  • ionViewCanEnter
  • ionViewCanLeave

Ne ponavljajte se i odvajajte kod

Prilikom razvoja aplikacije dobro isplanirajte sve funkcionalnosti i pokušajte odvojiti zajedničke dijelove koda u servise koje ćete koristiti u ostatku aplikacije tako da se ne ponavljate u svakoj komponenti.

Npr. ako želite koristiti SQLite postoje dva načina. Prvi način je da sve upite na bazu pozivate u svakoj komponenti u kojoj radite s lokalnom bazom, a drugi način je putem odvojenog servisa koji služi samo jednoj svrsi, a to je rad s lokalnom bazom na jednom mjestu. Drugi način je svakako jednostavniji za testiranje i kasnije uređivanje.

Vanjske skripte

Objavio sam jedan blog post o korištenju vanjskih skripti unutar Ionic aplikacije i kao što možete vidjeti u naredbama koristim prefiks --save. Koristite ga i vi jer ćete se inače poprilično iznenaditi kada pokrenete $ npm install i shvatite da aplikacije iz nekog nepoznatog razloga ne radi kako bi trebala tj. ne radi uopće.

Prefiks --save će sve reference na vanjske skripte/pakete spremiti u datoteku package.json tako da ste kasnije mirni. To je posebno korisno kada radite u timu.

I pokušajte ne koristiti isključivo CDN (content delivery network) skripte, pogotovo ako želite da vam aplikacija radi i izvan mreže (offline).