Tomislav Stanković, Autor na Tomislav Stanković

Recenzija: CSS Grid by Wes Bos, 1. dio

Kada su u pitanju HTML i CSS dosta developera voli misliti da ih zna 90%-100%, a upravo ovakvi tečajevi služe da to demantiraju.

Wes Bos je poduzetnik i autor nekoliko tečajeva, među kojima je i ovaj o CSS Gridu. S obzirom da mi njegov stil podučavanja odgovara neke od tečajeva sam i kupio kako bi na strukturiran način saznao i naučio nešto novo.

Redovito ih se sjetim kada me netko od kolega pita za dobre online resurse, a prema njihovim pozitivnim reakcijama zaključio sam da bi bilo dobro nešto više o tome napisati i na blogu.

Jedan od tih tečajeva je CSS Grid koji je u potpunosti besplatan, a moguće ga je pronaći na adresi https://cssgrid.io/. Sastoji se od 25 videa tj. lekcija od kojih će svaka biti detaljnije pojašnjena u nastavku. Trajanje snimljenog materijala je 4 sata, ali ako se paralelno idu raditi primjeri satnica će vrlo brzo rasti.

1. Introduction

U ovom dijelu Wes Bos daje uvod u tečaj i naglašava kako Firefox stoji iza odluke da tečaj bude besplatan zbog čega ćemo koristiti njihove alate u nastavku tečaja.

Autor također potiče developere koji će krenuti s ovim tečajem da redovito daju povratne informacije, bilo to putem društvenih mreža ili blogova.

Osim toga, na svakome od nas ostaje odluka hoćemo li ovaj tečaj pogledati samo da bismo mogli reći da smo ga prošli ili ćemo paralelno raditi primjere i tako nešto konkretno i naučiti.

2. Starter files

Preporuka ovog dijela tečaja je preuzeti i koristiti Firefox Quantum: Developer Edition koji je sa svojim naprednim rješenjima prilagođen upravo developerima.

Sve starter datoteke moguće je preuzeti na adresi https://courses.wesbos.com/account/ nakon besplatne registracije. Za one nestrpljive datoteke se nalaze i na sljedećoj poveznici https://github.com/wesbos/css-grid.

Nakon preuzimanja moguće je vidjeti package.json datoteku:

{
  "name": "css-grid",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "run-script-os",
    "start:win32": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*' --directory --port 7777 --browser \"C:\\Program Files\\Firefox Developer Edition\\firefox.exe\"",
    "//": "Hello! If you are having trouble running this command. Try changing Firefox Developer Edition to FirefoxDeveloperEdition",
    "start:darwin:linux": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*' --directory --port 7777 --browser 'Firefox Developer Edition'"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.24.5",
    "run-script-os": "^1.0.3"
  }
}

{

"name": "css-grid",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"start": "run-script-os",

"start:win32": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*' --directory --port 7777 --browser \"C:\\Program Files\\Firefox Developer Edition\\firefox.exe\"",

"//": "Hello! If you are having trouble running this command. Try changing Firefox Developer Edition to FirefoxDeveloperEdition",

"start:darwin:linux": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*' --directory --port 7777 --browser 'Firefox Developer Edition'"

"author": "",

"license": "ISC",

"devDependencies": {

"browser-sync": "^2.24.5",

"run-script-os": "^1.0.3"

}

Zbog paketa “browser-sync” i “run-script-os” potrebno je na računalu imati instaliran NodeJS.

Pokretanjem ove dvije naredbe instaliram ranije navedene NPM pakete i tečaj mi se otvara u odabranom web pregledniku.

$ npm install
$ npm start

1 2	$ npm install $ npm start

Ovo je sada temelj svega što ću u nastavku raditi.

3. CSS Grid Fundamentals

Fokus ovog dijela tečaja je odgovor na pitanje – što je CSS Grid? U donjem primjeru ako smo za klasu container rekli da je display: grid; automatski smo sve unutarnje elemente, u ovom slučaju to su <div class="item">1</div>, klasificirali kao dijelove CSS Grida.

Nakon toga ostaje podijeliti ih u redove i kolone pomoću: grid-template-columns, grid-template-rows i grid-gap.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../assets/style.css">
  <title>CSS Grid Fundamentals!</title>
</head>

<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
  <style>
     .container{
       display: grid;
       /* grid-template-columns: 200px auto 500px 50px; 
        grid-template-columns: repeat(5, 100px); 
       grid-template-columns: 200px 500px;
       grid-template-rows: 200px 500px 50px;
       grid-gap: 20px; */
     }
  </style>
</body>

</html>

<!DOCTYPE html>

<head>

<title>CSS Grid Fundamentals!</title>

</head>

<body>

</div>

<style>

.container{

display: grid;

/* grid-template-columns: 200px auto 500px 50px;

grid-template-columns: repeat(5, 100px);

grid-template-columns: 200px 500px;

grid-template-rows: 200px 500px 50px;

grid-gap: 20px; */

}

</style>

</body>

</html>

4. CSS Grid Dev Tools

Desni klik miša tj. odabir “Inspect Elements” vodi nas do dijela web preglednika koji je poznat svakom web developeru.

Ovdje upoznajemo Grid Inspector.

5. CSS Grid Implicit vs Explicit Tracks

Explicit označava sve kolone (grid-template-columns) i redove (grid-template-rows) koje smo sami odredili tj. zadali im parametre. U ovom primjeru to su prve dvije kolone tj. prva dva reda.

<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
  </div>

  <style>
    .container {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: 200px 400px;
      grid-template-rows: 50px 100px;
      /* grid-auto-rows: 200px;  */
      /* grid-auto-columns: 100px; */
    }
  </style>
</body>

<body>

</div>

<style>

.container {

display: grid;

grid-gap: 20px;

grid-template-columns: 200px 400px;

grid-template-rows: 50px 100px;

/* grid-auto-rows: 200px; */

/* grid-auto-columns: 100px; */

}

</style>

</body>

Implicit označava sve preostale kolone (grid-auto-columns) i redove (grid-auto-rows). U ovom primjeru to su zadnja dva, tj. blokovi 5, 6, 7 i 8.

<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
  </div>

  <style>
    .container {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: 200px 400px;
      grid-template-rows: 50px 100px;
      grid-auto-rows: 70px;
      /* grid-auto-columns: 100px; - u sljedećem dijelu tečaja*/
    }
  </style>
</body>

<body>

</div>

<style>

.container {

display: grid;

grid-gap: 20px;

grid-template-columns: 200px 400px;

grid-template-rows: 50px 100px;

grid-auto-rows: 70px;

/* grid-auto-columns: 100px; - u sljedećem dijelu tečaja*/

}

</style>

</body>

Zaključno, u sljedećem primjeru explicit su nam kolone dok su redovi implicit jer njih nigdje nismo definirali, a svejedno ih imamo.

<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>

  <style>
    .container {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: 200px 400px;
    }
  </style>
</body>

<body>

</div>

<style>

.container {

display: grid;

grid-gap: 20px;

grid-template-columns: 200px 400px;

}

</style>

</body>

6. CSS Grid Auto Flow

U ovom dijelu tečaja pojašnjen je grid-auto-flow pomoću kojega određujemo hoće li implicitno kreirani elementi biti prikazani kao redovi ili stupci.

U startu dodajemo dva elementa i za njih definiramo dva stupca.

<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
  </div>

  <style>
    .container {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: 400px 200px;
    }
  </style>
</body>

<body>

</div>

<style>

.container {

display: grid;

grid-gap: 20px;

grid-template-columns: 400px 200px;

}

</style>

</body>

Međutim, ako dodamo nekoliko novih elemenata koje nismo eksplicitno odredili pitanje je gdje će se oni prikazati.

Zadano će biti prikazani kao redovi,

<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>

  <style>
    .container {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: 400px 200px;
      grid-auto-flow: row;
    }
  </style>
</body>

<body>

</div>

<style>

.container {

display: grid;

grid-gap: 20px;

grid-template-columns: 400px 200px;

grid-auto-flow: row;

}

</style>

</body>

a možemo ih prikazati i kao stupce.

<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>

  <style>
    .container {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: 400px 200px;
      grid-auto-flow: column;
    }
  </style>
</body>

<body>

</div>

<style>

.container {

display: grid;

grid-gap: 20px;

grid-template-columns: 400px 200px;

grid-auto-flow: column;

}

</style>

</body>

Zaključno, na taj se način može napraviti horizontalni scroll.

7. Sizing tracks in CSS Grid

Ovdje se upoznajemo s fr (fractional unit) jedinicom koja označava preostali slobodan prostor na ekranu.

Ako definiramo tri stupca na sljedeći način

<style>
    .container {
      display: grid;
      grid-gap: 20px;
      border: 10px solid var(--yellow);
      grid-template-columns: 150px 150px 1fr;
    }
 </style>

<style>

.container {

display: grid;

grid-gap: 20px;

border: 10px solid var(--yellow);

grid-template-columns: 150px 150px 1fr;

}

</style>

prva dva će biti široka 150px dok će zadnji biti širok koliko god je ostalo viška prostora.

Fr (fractional unit) uzima u obzir grid-gap tako da naši stupci prikazuju u prostoru koji ostane nakon što se zauzme grid-gap.

Isto tako, moguće je koristiti i parametar auto.

Donji primjer označava prvi stupac čija je širina određena kao auto što znači da će on biti širok koliko i sadržaj unutar njega dok će drugi stupac uzeti preostali prostor 1fr.

<style>
    .container {
      display: grid;
      grid-gap: 20px;
      border: 10px solid var(--yellow);
      grid-template-columns: auto 1fr;
    }
</style>

<style>

.container {

display: grid;

grid-gap: 20px;

border: 10px solid var(--yellow);

grid-template-columns: auto 1fr;

}

</style>

8. CSS Grid repeat function

Sve navedeno ranije može se napraviti na jednostavniji način koristeći repeat() funkciju. Npr. umjesto definiranja četiri stupca na standardni način

grid-template-columns: 1fr 1fr 1fr 1fr;

1	grid-template-columns: 1fr 1fr 1fr 1fr;

možemo ih definirati na sljedeći način gdje prva vrijednost označava koliko puta je taj element potrebno ponoviti, a druga vrijednost označava širinu.

grid-template-columns: repeat(4, 1fr);

1	grid-template-columns: repeat(4, 1fr);

Rezultat će biti isti tj. imati ćemo četiri stupca jednake širine.

Mogu se raditi i naprednije stvari. Npr. prvi stupac će biti širok 100px dok će od preostalih osam jedan biti 1fr, drugi 2fr, treći 1fr,…

<style>
    .container {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: 100px repeat(4, 1fr 2fr);
    }
</style>

<style>

.container {

display: grid;

grid-gap: 20px;

grid-template-columns: 100px repeat(4, 1fr 2fr);

}

</style>

9. Sizing Grid Items

U ovom dijelu fokus je na pojedinačnim elementima kompletnog grida, <div class="item item1">1</div>.

Ako napravimo sljedeće dobit ćemo pet stupaca koji su raspoređeni tako da zauzimaju sav slobodan prostor.

<body>
  <div class="container">
         <div class="item item1">1</div>
         <div class="item item2">2</div>
         <div class="item item3">3</div>
         <div class="item item4">4</div>
         <div class="item item5">5</div>
         <div class="item item6">6</div>
         <div class="item item7">7</div>
         <div class="item item8">8</div>
         <div class="item item9">9</div>
         <div class="item item10">10</div>
         <div class="item item11">11</div>
         <div class="item item12">12</div>
         <div class="item item13">13</div>
         <div class="item item14">14</div>
         <div class="item item15">15</div>
         <div class="item item16">16</div>
         <div class="item item17">17</div>
         <div class="item item18">18</div>
         <div class="item item19">19</div>
         <div class="item item20">20</div>
         <div class="item item21">21</div>
         <div class="item item22">22</div>
         <div class="item item23">23</div>
         <div class="item item24">24</div>
         <div class="item item25">25</div>
         <div class="item item26">26</div>
         <div class="item item27">27</div>
         <div class="item item28">28</div>
         <div class="item item29">29</div>
         <div class="item item30">30</div>
  </div>

  <style>
    .container {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: repeat(5, 1fr);
    }
 /*.item17{
      background: mistyrose;
      grid-column: span 2;
      grid-row: span 2;
    } */
  </style>
</body>

<body>

</div>

<style>

.container {

display: grid;

grid-gap: 20px;

grid-template-columns: repeat(5, 1fr);

}

/*.item17{

background: mistyrose;

grid-column: span 2;

grid-row: span 2;

} */

</style>

</body>

Pomoću parametara grid-column i grid-row možemo zadati visinu odnosno širinu pojedinog elementa, neka to sada bude .item17. Ostali elementi se automatski repozicioniraju.

Pomoću grid-column: span 2; određujemo širinu.

Pomoću grid-row: span 2; određujemo visinu.

Ako ih koristimo zajedno određujemo visinu i širinu.

.item17{
   background: mistyrose;
   grid-column: span 2;
   grid-row: span 2;
}

.item17{

background: mistyrose;

grid-column: span 2;

grid-row: span 2;

}

U primjeru na slici iznad odredili smo visinu i širinu jednog elementa dok su se ostali automatski posložili na svoje nove pozicije.

U nastavku se može vidjeti primjer kada odabranom elementu zadajemo mjesto početka i mjesto završetka.

.item17{
grid-column: span 2;
    grid-column-start: span 2;
    grid-column-end: auto;
grid-row: span 2;
    grid-row-start: span 2;
    grid-row-end: auto;
}

.item17{

grid-column: span 2;

grid-column-start: span 2;

grid-column-end: auto;

grid-row: span 2;

grid-row-start: span 2;

grid-row-end: auto;

}

10. Placing Grid Items

Početni raspored svih elemenata izgleda ovako i ovdje će fokus biti na pozicioniranju elementa s klasom .poop.

<body>
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item poop">💩</div>
    <div class="item item9">9</div>
    <div class="item item10">10</div>
    <div class="item item11">11</div>
    <div class="item item12">12</div>
    <div class="item item13">13</div>
    <div class="item item14">14</div>
    <div class="item item15">15</div>
    <div class="item item16">16</div>
    <div class="item item17">17</div>
    <div class="item item18">18</div>
    <div class="item item19">19</div>
    <div class="item item20">20</div>
    <div class="item item21">21</div>
    <div class="item item22">22</div>
    <div class="item item23">23</div>
    <div class="item item24">24</div>
    <div class="item item25">25</div>
    <div class="item item26">26</div>
    <div class="item item27">27</div>
    <div class="item item28">28</div>
    <div class="item item29">29</div>
    <div class="item item30">30</div>
  </div>

  <style>
    .container {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: repeat(5, 1fr);
    }
    .poop {
      background: #BADA55;
    }
  </style>
</body>

<body>

</div>

<style>

.container {

display: grid;

grid-gap: 20px;

grid-template-columns: repeat(5, 1fr);

}

.poop {

background: #BADA55;

}

</style>

</body>

Na ovaj način određujem startnu poziciju odabranog elementa.

.poop {
      background: #BADA55;
      grid-column-start: 2;
}

.poop {

background: #BADA55;

grid-column-start: 2;

}

Sada ću uz mjesto početka odabranom elementu zadati i mjesto završetka.

To mogu napraviti pojedinačno za početak i završetak.

.poop {
      background: #BADA55;
      grid-column-start: 2;
      grid-column-end: 5; 
}

.poop {

background: #BADA55;

grid-column-start: 2;

grid-column-end: 5;

}

A mogu i na skraćeni način.

.poop {
      background: #BADA55; 
      grid-column: 2 / 5;
}

.poop {

background: #BADA55;

grid-column: 2 / 5;

}

Rezultat je isti.

Osim što odabranom elementu na gornji način mogu reći gdje počinje i završava također mu na sljedeći način mogu odrediti širinu.

.poop {
      background: #BADA55; 
      grid-column: span 2 / 5;
}

.poop {

background: #BADA55;

grid-column: span 2 / 5;

}

.poop {
      background: #BADA55; 
      grid-column: 1 / span 2;
}

.poop {

background: #BADA55;

grid-column: 1 / span 2;

}

Ako želim da odabrani element uvijek počinje na prvom mjestu i završava na posljednjem napravit ću sljedeće. Ovo se može koristiti i kao zamjena za width: 100%;

.poop {
      background: #BADA55; 
      grid-column: 1 / -1; 
}

.poop {

background: #BADA55;

grid-column: 1 / -1;

}

Isto to možemo napraviti i kada su u pitanju redovi koristeći grid-row.

.poop {
      background: #BADA55; 
      grid-row: 3 / span 3;
}

.poop {

background: #BADA55;

grid-row: 3 / span 3;

}

Naravno, moguće ih je i kombinirati.

.poop {
      background: #BADA55; 
      grid-column: 1 / span 2;
      grid-row: 3 / span 3;
}

.poop {

background: #BADA55;

grid-column: 1 / span 2;

grid-row: 3 / span 3;

}

Nastavak ovog blog posta uskoro pod naslovom “Recenzija: CSS Grid by Wes Bos, 2. dio“.

Svjetski dan retrospektive i stanje “agilizacije” u regiji

U Osijeku je, 27.02.2019., održana mini konferencija “Svjetski dan retrospektive i stanje “agilizacije” u regiji” kojoj je cilj zapravo bio vidjeti stupanj zainteresiranosti lokalne zajednice za agilnu metodologiju.

S kolegama sam bio na radionici “Continuous improvement through feedback” gdje smo kroz dva sata prošli kroz nekoliko scenarija vezanih uz (ne)davanje feedbacka, ponovili koje su to vrste feedbacka, zašto postoji, kako se daje, prima i sl.

Iako su to stvari koje manje više svi znamo, ili mislimo da znamo, ipak je korisno podsjetiti ih se i osvijestiti jer svakodnevno dajemo i primamo povratne informacije, bilo to svjesno ili nesvjesno. O povratnim informacijama ili nedostatku istih ovisi jako puno toga i nije dobro zanemariti ih.

Osim toga, na panelu su se mogla čuti iskustva tvrtki iz regije o načinima i metodama uvođenja agilne metodologije u poslovanje. Nekakav generalni zaključak bi bio da agilna metodologija definitivno ima svojih prednosti, ali nije magični ključ koji će riješiti sve, međuljudske, probleme unutar neke tvrtke.

Nakon “Prvog Agilnog Meetupa u Osijeku” donosimo vam mini konferenciju “Svjetski dan retrospektive i stanje “agilizacije” u regiji” koja će se održati 27.02.2019. u “The Kavani” s početkom u 10:00 sati. Glavni organizatori događaja su Osijek Software City, COBE, Agile Humans i CROZ.

PROGRAM
– 10.00h Let’s meet (okupljanje)
– 11.00h Početak programa – Uvodna riječ
– 11.15h RADIONICA: Continuous improvement through feedback (Nino Zeljko, CROZ)
– 11.15h RADIONICA: Retrospective done right (Jasmina Nikolić, Agile Humans)
– 13.00h Coffee & Snacks
– 13.30h Moderirani Panel: Stanje agilizacije u regiji (Zaba, A1 telekom i Intesa Srbija)
– 14.45h Coffee & Snacks
– 15.00h Speaker’s corner – Lean Coffee
– 16.30h Kraj programa i druženje uz Live Jazz svirku

Prema viđenom, ovakav tip događanja će se nastaviti održavati pa čak možda bude organizirana i veća konferencija na jesen.

Ionic 4 Slides – prikaz galerije slika

O ovom ću blog postu pokazati nekoliko načina na koje je moguće koristiti ion-slides komponentu unutar Ionic 4 aplikacije.

ion-slides komponenta sastoji se od više zasebnih dijelova. Svaki od tih dijelova je zapravo jedna ion-slide komponenta.

Ionic 4 Slides — https://ionicframework.com/docs/api/slides

Ova se komponenta može koristiti za prikaz uputa prilikom prvog pokretanja mobilne aplikacije, primjer čega se nalazi u dokumentaciji, ali se isto tako pomoću ove komponente može napraviti lijepa galerija slika. Slike se mogu pomicati lijevo-desno, ali ih je isto tako moguće postaviti da se pomiču automatski u određenim intervalima.

S obzirom da ion-slides svoje temelje ima u Swiper.js-u i ondje je moguće pronaći dodatne opcije za upravljanje slajdovima.

Kreiranje aplikacije

$ ionic start IonicSlidesGallery blank
$ cd IonicSlidesGaller
$ionic serve

$ ionic start IonicSlidesGallery blank

$ cd IonicSlidesGaller

$ionic serve

Struktura ekrana na kojemu ću testirati ion-slides izgleda ovako:

<ion-header text-center>
  <ion-toolbar color="primary">
    <ion-title>
      Ionic 4 Slides
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  //ion-slides će ići ovdje
</ion-content>

<ion-header text-center>

<ion-toolbar color="primary">

<ion-title>

Ionic 4 Slides

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

//ion-slides će ići ovdje

</ion-content>

Slike se nalaze unutar assets/imgs mape.

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  imageContainer = [
    {url:"assets/imgs/image1.jpg"},
    {url:"assets/imgs/image2.jpg"},
    {url:"assets/imgs/image3.jpg"},
    {url:"assets/imgs/image4.jpg"} ];
 
  slideOpts = {
    //
  };

  constructor(){
  }

}

import { Component } from '@angular/core';

@Component({

selector: 'app-home',

templateUrl: 'home.page.html',

styleUrls: ['home.page.scss'],

})

export class HomePage {

imageContainer = [

{url:"assets/imgs/image1.jpg"},

{url:"assets/imgs/image2.jpg"},

{url:"assets/imgs/image3.jpg"},

{url:"assets/imgs/image4.jpg"} ];

slideOpts = {

};

constructor(){

}

Galerija preko cijelog ekrana

U ovom primjeru slike zauzimaju cijeli ekran. Dolaskom do zadnje slike nije moguće ići dalje loop: 'false'.

<ion-header text-center>
  <ion-toolbar color="primary">
    <ion-title>
      Ionic 4 Slides
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-slides pager="true" scrollbar="false" [options]="slideOpts" style="object-fit:cover;height:100%;background-color:#000;">
    <ion-slide *ngFor="let image of imageContainer; let i = index">
      <img src="{{image.url}}">
    </ion-slide>
  </ion-slides>
</ion-content>

<ion-header text-center>

<ion-toolbar color="primary">

<ion-title>

Ionic 4 Slides

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

<ion-slides pager="true" scrollbar="false" [options]="slideOpts" style="object-fit:cover;height:100%;background-color:#000;">

<ion-slide *ngFor="let image of imageContainer; let i = index">

</ion-slide>

</ion-slides>

</ion-content>

Galerija preko jednog dijela ekrana

U ovom primjeru galerija slika zauzima samo jedan dio ekrana ispod koje se onda vidi ostatak sadržaja. Dolaskom do zadnje slike moguće je ići dalje tj. napraviti puni krug do prve slike pomoću loop: 'true'.

<ion-header text-center>
  <ion-toolbar color="primary">
    <ion-title>
      Ionic 4 Slides
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-slides pager="true" [options]="slideOpts" scrollbar="false" style="background-size:cover;height:58%;background-color:#000;">
    <ion-slide *ngFor="let image of imageContainer; let i = index">
      <img src="{{image.url}}">
    </ion-slide>
  </ion-slides>
  <ion-card>
    <ion-card-header>
      <ion-card-subtitle>Ionic 4 Slides</ion-card-subtitle>
      <ion-card-title>Primjer galerije slika</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <p>O ovom ću blog postu pokazati nekoliko načina na koje je moguće koristiti ion-slides komponentu unutar Ionic 4 aplikacije.</p>
      <p>ion-slides komponenta sastoji od više zasebnih dijelova. Svaki od tih dijelova je zapravo jedna ion-slide komponenta.</p>
    </ion-card-content>
  </ion-card>
</ion-content>

<ion-header text-center>

<ion-toolbar color="primary">

<ion-title>

Ionic 4 Slides

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

<ion-slides pager="true" [options]="slideOpts" scrollbar="false" style="background-size:cover;height:58%;background-color:#000;">

<ion-slide *ngFor="let image of imageContainer; let i = index">

</ion-slide>

</ion-slides>

<ion-card>

<ion-card-header>

<ion-card-subtitle>Ionic 4 Slides</ion-card-subtitle>

<ion-card-title>Primjer galerije slika</ion-card-title>

</ion-card-header>

<ion-card-content>

<p>O ovom ću blog postu pokazati nekoliko načina na koje je moguće koristiti ion-slides komponentu unutar Ionic 4 aplikacije.</p>

<p>ion-slides komponenta sastoji od više zasebnih dijelova. Svaki od tih dijelova je zapravo jedna ion-slide komponenta.</p>

</ion-card-content>

</ion-card>

</ion-content>

Zaključak

Struktura projekta prema package.json

{
  "name": "IonicSlidesGallery",
  "version": "0.0.1",
  "author": "Tomislav Stanković",
  "homepage": "https://www.tomislavstankovic.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.0.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.12.3",
    "@angular-devkit/build-angular": "~0.12.3",
    "@angular-devkit/core": "~7.2.3",
    "@angular-devkit/schematics": "~7.2.3",
    "@angular/cli": "~7.2.3",
    "@angular/compiler": "~7.2.2",
    "@angular/compiler-cli": "~7.2.2",
    "@angular/language-service": "~7.2.2",
    "@ionic/angular-toolkit": "~1.4.0",
    "@types/node": "~10.12.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~8.0.0",
    "tslint": "~5.12.0",
    "typescript": "~3.1.6"
  },
  "description": "An Ionic 4 Slides project"
}

{

"name": "IonicSlidesGallery",

"version": "0.0.1",

"author": "Tomislav Stanković",

"homepage": "https://www.tomislavstankovic.com/",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

"private": true,

"dependencies": {

"@angular/common": "^7.2.2",

"@angular/core": "^7.2.2",

"@angular/forms": "^7.2.2",

"@angular/http": "^7.2.2",

"@angular/platform-browser": "^7.2.2",

"@angular/platform-browser-dynamic": "^7.2.2",

"@angular/router": "^7.2.2",

"@ionic-native/core": "^5.0.0",

"@ionic-native/splash-screen": "^5.0.0",

"@ionic-native/status-bar": "^5.0.0",

"@ionic/angular": "^4.0.0",

"core-js": "^2.5.4",

"rxjs": "~6.3.3",

"zone.js": "~0.8.29"

"devDependencies": {

"@angular-devkit/architect": "~0.12.3",

"@angular-devkit/build-angular": "~0.12.3",

"@angular-devkit/core": "~7.2.3",

"@angular-devkit/schematics": "~7.2.3",

"@angular/cli": "~7.2.3",

"@angular/compiler": "~7.2.2",

"@angular/compiler-cli": "~7.2.2",

"@angular/language-service": "~7.2.2",

"@ionic/angular-toolkit": "~1.4.0",

"@types/node": "~10.12.0",

"@types/jasmine": "~2.8.8",

"@types/jasminewd2": "~2.0.3",

"codelyzer": "~4.5.0",

"jasmine-core": "~2.99.1",

"jasmine-spec-reporter": "~4.2.1",

"karma": "~3.1.4",

"karma-chrome-launcher": "~2.2.0",

"karma-coverage-istanbul-reporter": "~2.0.1",

"karma-jasmine": "~1.1.2",

"karma-jasmine-html-reporter": "^0.2.2",

"protractor": "~5.4.0",

"ts-node": "~8.0.0",

"tslint": "~5.12.0",

"typescript": "~3.1.6"

"description": "An Ionic 4 Slides project"

}

Otvaranje postavki mobilnog uređaja iz Ionic aplikacije

Prilikom izrade Ionic mobilnih aplikacija jedan od zahtjeva može biti da se iz aplikacije mogu otvoriti neke od postavki mobilnoj uređaja. Npr. postavke vezane uz geolokaciju, WiFi ili nešto treće. Puno je jednostavnije omogućiti korisniku da klikom na jedan gumb ode direktno na postavke koje su mu u tom trenutku potrebne kako bi unutar Ionic aplikacije nešto obavio nego da sam mora tražiti te iste postavke.

Od postavki kojima je moguće pristupiti koristeći ovaj plugin dostupno je sljedeće:

 "about", // ios
 "accessibility", // ios, android
 "account", // ios, android
 "airplane_mode", // ios, android
 "apn", // android
 "application_details", // ios, android
 "application_development", // android
 "application", // android
 "autolock", // ios
 "battery_optimization", // android
 "bluetooth", // ios, android
 "castle", // ios
 "captioning", // android
 "cast", // android
 "cellular_usage", // ios
 "configuration_list", // ios
 "data_roaming", // android
 "date", // ios, android
 "display", // ios, android
 "dream", // android
 "facetime", // ios
 "home", // android
 "keyboard", // ios, android
 "keyboard_subtype", // android
 "locale", // ios, android
"location", // ios, android
"locations", // ios
"manage_all_applications", // android
"manage_applications", // android
"memory_card", // android
"music", // ios
"music_equalizer", // ios
"music_volume", // ios
"network", // ios, android
"nike_ipod", // ios
"nfcsharing", // android
"nfc_payment", // android
"nfc_settings", // android
"notes", // ios
"notification_id", // ios
"passbook", // ios
"phone", // ios
"photos", // ios
"print", // android
"privacy", // android
"quick_launch", // android
"reset", // ios
"ringtone", // ios
"browser", // ios
"search", // ios, android
"security", // android
"settings", // ios, android
"show_regulatory_info",
"sound", // ios, android
"software_update", // ios
"storage", // ios, android
"store", // ios, android
"sync", // android
"tethering", // ios
"twitter", // ios
"touch", // ios
"usage", // ios, android
"user_dictionary", // android
"video", // ios
"voice_input", // android
"vpn", // ios
"wallpaper", // ios
"wifi_ip", // android
"wifi", // ios, android
"wireless" // android

"about", // ios

"accessibility", // ios, android

"account", // ios, android

"airplane_mode", // ios, android

"apn", // android

"application_details", // ios, android

"application_development", // android

"application", // android

"autolock", // ios

"battery_optimization", // android

"bluetooth", // ios, android

"castle", // ios

"captioning", // android

"cast", // android

"cellular_usage", // ios

"configuration_list", // ios

"data_roaming", // android

"date", // ios, android

"display", // ios, android

"dream", // android

"facetime", // ios

"home", // android

"keyboard", // ios, android

"keyboard_subtype", // android

"locale", // ios, android

"location", // ios, android

"locations", // ios

"manage_all_applications", // android

"manage_applications", // android

"memory_card", // android

"music", // ios

"music_equalizer", // ios

"music_volume", // ios

"network", // ios, android

"nike_ipod", // ios

"nfcsharing", // android

"nfc_payment", // android

"nfc_settings", // android

"notes", // ios

"notification_id", // ios

"passbook", // ios

"phone", // ios

"photos", // ios

"print", // android

"privacy", // android

"quick_launch", // android

"reset", // ios

"ringtone", // ios

"browser", // ios

"search", // ios, android

"security", // android

"settings", // ios, android

"show_regulatory_info",

"sound", // ios, android

"software_update", // ios

"storage", // ios, android

"store", // ios, android

"sync", // android

"tethering", // ios

"twitter", // ios

"touch", // ios

"usage", // ios, android

"user_dictionary", // android

"video", // ios

"voice_input", // android

"vpn", // ios

"wallpaper", // ios

"wifi_ip", // android

"wifi", // ios, android

"wireless" // android

Kreiranje aplikacije

Kreiram novi Ionic projekt i odmah dodajem Android platformu jer planiram aplikaciju pokrenuti na mobilnom uređaju.

$ ionic start IonicNativeSettings blank
$ cd IonicNativeSettings
$ ionic cordova platform add android

$ ionic start IonicNativeSettings blank

$ cd IonicNativeSettings

$ ionic cordova platform add android

Open Native Settings

Plugin Open Native Settings instaliram sljedećim naredbama:

$ ionic cordova plugin add cordova-open-native-settings
$ npm install @ionic-native/open-native-settings

1 2	$ ionic cordova plugin add cordova-open-native-settings $ npm install @ionic-native/open-native-settings

Nakon toga ovaj plugin deklariram unutar app.module.ts datoteke.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { OpenNativeSettings } from '@ionic-native/open-native-settings/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    OpenNativeSettings,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { SplashScreen } from '@ionic-native/splash-screen/ngx';

import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';

import { AppRoutingModule } from './app-routing.module';

import { OpenNativeSettings } from '@ionic-native/open-native-settings/ngx';

@NgModule({

declarations: [AppComponent],

entryComponents: [],

imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],

providers: [

StatusBar,

SplashScreen,

OpenNativeSettings,

{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }

bootstrap: [AppComponent]

})

export class AppModule {}

Funkcionalnost se nalazi unutar home.ts datoteke tj. unutar HomePage klase, a sastojat će se od funkcija od kojih svaka otvara neku od ranije navedenih postavki mobilnog uređaja.

import { Component } from '@angular/core';

import { OpenNativeSettings } from '@ionic-native/open-native-settings/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(private _openNativeSettings: OpenNativeSettings) { 
  }

   accessibility(){
     //this._openNativeSettings.open("accessibility");
     this._openNativeSettings.open(["accessibility", true]);
   }

   bluetooth(){
    //this._openNativeSettings.open("bluetooth");
    this._openNativeSettings.open(["bluetooth", true]);
   }

   date(){
    //this._openNativeSettings.open("date");
    this._openNativeSettings.open(["date", true]);
   }

   keyboard(){
    //this._openNativeSettings.open("keyboard");
    this._openNativeSettings.open(["keyboard", true]);
   }

   location(){
    //this._openNativeSettings.open("location");
    this._openNativeSettings.open(["location", true]);
   }

   manage_applications(){
    //this._openNativeSettings.open("manage_applications");
    this._openNativeSettings.open(["manage_applications", true]);
   }

   print(){
    //this._openNativeSettings.open("print");
    this._openNativeSettings.open(["print", true]);
   }

   storage(){
    //this._openNativeSettings.open("storage");
    this._openNativeSettings.open(["storage", true]);
   }

}

import { Component } from '@angular/core';

import { OpenNativeSettings } from '@ionic-native/open-native-settings/ngx';

@Component({

selector: 'app-home',

templateUrl: 'home.page.html',

styleUrls: ['home.page.scss'],

})

export class HomePage {

constructor(private _openNativeSettings: OpenNativeSettings) {

}

accessibility(){

//this._openNativeSettings.open("accessibility");

this._openNativeSettings.open(["accessibility", true]);

}

bluetooth(){

//this._openNativeSettings.open("bluetooth");

this._openNativeSettings.open(["bluetooth", true]);

}

date(){

//this._openNativeSettings.open("date");

this._openNativeSettings.open(["date", true]);

}

keyboard(){

//this._openNativeSettings.open("keyboard");

this._openNativeSettings.open(["keyboard", true]);

}

location(){

//this._openNativeSettings.open("location");

this._openNativeSettings.open(["location", true]);

}

manage_applications(){

//this._openNativeSettings.open("manage_applications");

this._openNativeSettings.open(["manage_applications", true]);

}

print(){

//this._openNativeSettings.open("print");

this._openNativeSettings.open(["print", true]);

}

storage(){

//this._openNativeSettings.open("storage");

this._openNativeSettings.open(["storage", true]);

}

Ako neku od postavki pozivam na ovaj način this._openNativeSettings.open("accessibility") ekran s postavkama će se otvoriti umjesto ekrana Ionic aplikacije dok ako dodam parametar true na sljedeći način this._openNativeSettings.open(["accessibility", true]) otvara se novi ekran s postavkama što se može vidjeti na sljedećoj slici.

Ovo na ekranu izgleda ovako:

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      Ionic Native Settings
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding text-center>
  <p>Plugin to open native screens of iOS/android settings.</p>
  <ion-row>
    <ion-col>
      <ion-button color="primary" (click)="accessibility()">Accessibility</ion-button>
      <ion-button color="secondary" (click)="bluetooth()">Bluetooth</ion-button>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-button color="tertiary" (click)="date()">Date</ion-button>
      <ion-button color="success" (click)="keyboard()">Keyboard</ion-button>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-button color="warning" (click)="location()">Location</ion-button>
      <ion-button color="danger" (click)="manage_applications()">Manage Applications</ion-button>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-button color="light" (click)="print()">Print</ion-button>
      <ion-button color="medium" (click)="storage()">Storage</ion-button>
    </ion-col>
  </ion-row>
</ion-content>

<ion-header>

<ion-toolbar color="primary">

<ion-title>

Ionic Native Settings

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content padding text-center>

<p>Plugin to open native screens of iOS/android settings.</p>

<ion-row>

<ion-col>

<ion-button color="primary" (click)="accessibility()">Accessibility</ion-button>

<ion-button color="secondary" (click)="bluetooth()">Bluetooth</ion-button>

</ion-col>

</ion-row>

<ion-row>

<ion-col>

<ion-button color="tertiary" (click)="date()">Date</ion-button>

<ion-button color="success" (click)="keyboard()">Keyboard</ion-button>

</ion-col>

</ion-row>

<ion-row>

<ion-col>

<ion-button color="warning" (click)="location()">Location</ion-button>

<ion-button color="danger" (click)="manage_applications()">Manage Applications</ion-button>

</ion-col>

</ion-row>

<ion-row>

<ion-col>

<ion-button color="light" (click)="print()">Print</ion-button>

<ion-button color="medium" (click)="storage()">Storage</ion-button>

</ion-col>

</ion-row>

</ion-content>

Zaključak

Struktura projekta prema package.json

{
  "name": "IonicNativeSettings",
  "version": "0.0.1",
  "author": "Tomislav Stanković",
  "homepage": "https://www.tomislavstankovic.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/open-native-settings": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.0.0",
    "cordova-android": "7.1.4",
    "cordova-open-native-settings": "1.5.2",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^3.1.2",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.12.3",
    "@angular-devkit/build-angular": "~0.12.3",
    "@angular-devkit/core": "~7.2.3",
    "@angular-devkit/schematics": "~7.2.3",
    "@angular/cli": "~7.2.3",
    "@angular/compiler": "~7.2.2",
    "@angular/compiler-cli": "~7.2.2",
    "@angular/language-service": "~7.2.2",
    "@ionic/angular-toolkit": "~1.3.0",
    "@types/node": "~10.12.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~8.0.0",
    "tslint": "~5.12.0",
    "typescript": "~3.1.6"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-open-native-settings": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {}
    },
    "platforms": [
      "android"
    ]
  }
}

{

"name": "IonicNativeSettings",

"version": "0.0.1",

"author": "Tomislav Stanković",

"homepage": "https://www.tomislavstankovic.com/",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

"private": true,

"dependencies": {

"@angular/common": "^7.2.2",

"@angular/core": "^7.2.2",

"@angular/forms": "^7.2.2",

"@angular/http": "^7.2.2",

"@angular/platform-browser": "^7.2.2",

"@angular/platform-browser-dynamic": "^7.2.2",

"@angular/router": "^7.2.2",

"@ionic-native/core": "^5.0.0",

"@ionic-native/open-native-settings": "^5.0.0",

"@ionic-native/splash-screen": "^5.0.0",

"@ionic-native/status-bar": "^5.0.0",

"@ionic/angular": "^4.0.0",

"cordova-android": "7.1.4",

"cordova-open-native-settings": "1.5.2",

"cordova-plugin-device": "^2.0.2",

"cordova-plugin-ionic-keyboard": "^2.1.3",

"cordova-plugin-ionic-webview": "^3.1.2",

"cordova-plugin-splashscreen": "^5.0.2",

"cordova-plugin-statusbar": "^2.4.2",

"cordova-plugin-whitelist": "^1.3.3",

"core-js": "^2.5.4",

"rxjs": "~6.3.3",

"zone.js": "~0.8.29"

"devDependencies": {

"@angular-devkit/architect": "~0.12.3",

"@angular-devkit/build-angular": "~0.12.3",

"@angular-devkit/core": "~7.2.3",

"@angular-devkit/schematics": "~7.2.3",

"@angular/cli": "~7.2.3",

"@angular/compiler": "~7.2.2",

"@angular/compiler-cli": "~7.2.2",

"@angular/language-service": "~7.2.2",

"@ionic/angular-toolkit": "~1.3.0",

"@types/node": "~10.12.0",

"@types/jasmine": "~2.8.8",

"@types/jasminewd2": "~2.0.3",

"codelyzer": "~4.5.0",

"jasmine-core": "~2.99.1",

"jasmine-spec-reporter": "~4.2.1",

"karma": "~3.1.4",

"karma-chrome-launcher": "~2.2.0",

"karma-coverage-istanbul-reporter": "~2.0.1",

"karma-jasmine": "~1.1.2",

"karma-jasmine-html-reporter": "^0.2.2",

"protractor": "~5.4.0",

"ts-node": "~8.0.0",

"tslint": "~5.12.0",

"typescript": "~3.1.6"

"description": "An Ionic project",

"cordova": {

"plugins": {

"cordova-open-native-settings": {},

"cordova-plugin-whitelist": {},

"cordova-plugin-statusbar": {},

"cordova-plugin-device": {},

"cordova-plugin-splashscreen": {},

"cordova-plugin-ionic-webview": {

"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"

"cordova-plugin-ionic-keyboard": {}

"platforms": [

"android"

]

}

Što je i čemu služi Ionic Native 4.x?

Prošlo je skoro 2 godine od kako sam objavio blog post pod naslovom “Čemu služi Ionic Native 3.x?“. S obzirom da su se od tada neke stvari promijenile, stigao je Ionic Framework verzije 4, pravo je vrijeme za novi blog post.

Ionic Native je kolekcija Cordova pluginova koji unutar Ionic aplikacije omogućavaju korištenje nativnih funkcionalnosti mobilnih uređaja.

Ionic Native je od sada dostupan u dva izdanja: Community Edition i Enterprise Edition.

Ionic Native Community Edition

Ovo izdanje označava pluginove koje održava open source zajednica tj. Ionic tim ih ne održava, ne popravlja niti garantira da će bilo koji od njih ispravno raditi.

Način instalacije:

$ ionic cordova plugin add cordova-plugin-name
$ npm install @ionic-native/plugin-name

1 2	$ ionic cordova plugin add cordova-plugin-name $ npm install @ionic-native/plugin-name

Ionic Native Enterprise Edition

Ovo izdanje označava pluginove koje održava, popravlja i za njih garantira Ionic tim.

Posebno je zanimljivo što uključuje Native Core set funkcionalnosti što znači da se unutar jednog plugina nalazi nekoliko važnijih funkcionalnosti.

Način instalacije:

$ ionic activate-native-ee --key=YOURPRODUCTKEY
$ ionic integrations add @ionic-native/plugin-name

1 2	$ ionic activate-native-ee --key=YOURPRODUCTKEY $ ionic integrations add @ionic-native/plugin-name

Korištenje s Angularom

Svaki se plugin nakon instalacije dodaje unutar app.module.ts datoteke. Npr. u nastavku se nalazi primjer korištenja Camera plugina.

import { Camera } from '@ionic-native/camera/ngx';

...

@NgModule({
  ...

  providers: [
    ...
    Camera
    ...
  ]
  ...
})
export class AppModule { }

import { Camera } from '@ionic-native/camera/ngx';

...

@NgModule({

...

providers: [

...

Camera

...

]

...

})

export class AppModule { }

Ovdje je posebno važno paziti da svaki plugin korišten u Angular projektu ima na kraju oznaku /ngx. Oko ovoga u zadnje vrijeme ima dosta pitanja na Stackoverflowu.