Ionic 2 je framework za izradu hibridnih mobilnih aplikacija koje dijele isti programski kod (aplikacije razvijamo koristeći HTML, CSS i JavaScript tj. Angular(2)), za Android, iOS i Windows Phone platformu. Time štedimo vrijeme uloženo u razvoj dok bi u slučaju nativnih aplikacija morali napraviti tri aplikacije s tri različite tehnologije. Nekada i to može biti bolja opcija sve ovisi od projekta do projekta tj. o zahtjevima projekta. U ovom blog postu zadržat ćemo se na hibridnim mobilnim aplikacijama i prednostima Ionic 2 frameworka.
Postavljanje razvojne okoline
U ovom primjeru nećemo ići od nule kao u jednom od prethodnih blog postova, nego ćemo koristiti Ionic command line utility (CLI) kako bi što prije i što jednostavnije postavili razvojnu okolinu.
Potrebno je instalirati:
- Node.js LTS
- Ionic i Cordova pomoću naredbe: $ npm install -g ionic cordova
- TypeScript pomoću naredbe: $ npm install -g typescript
Pokretanje Ionic 2 projekta
Ako smo sve dobro napravili sada ćemo moći pokrenuti Ionic 2 projekt koristeći naredbu $ ionic start Ionic2Aplikacija sidemenu --v2
- ionic označava da koristimo Ionic CLI
- start označava da želimo pokrenuti novi Ionic projekt
- Ionic2Aplikacija označava naziv aplikacije
- sidemenu označava vrstu predloška
- --v2 označava da želite želimo pokrenuti Ionic 2 projekt, inače bi kreirali Ionic 1 projekt
Osim sidemenu predloška, prilikom pokretanja projekta moguće je birati između sljedećih nekoliko predložaka:
- tabs: $ ionic start Ionic2Aplikacija tabs --v2
- sidemenu: $ ionic start Ionic2Aplikacija sidemenu --v2
- blank: $ ionic start Ionic2Aplikacija blank --v2
- tutorial: $ ionic start Ionic2Aplikacija tutorial --v2
Ako prilikom kreiranja projekta ne navedemo koji predložak želimo koristiti dobit ćemo tabs predložak.
Projekt ćemo pokrenuti naredbom $ ionic serve i on će se prikazati u web pregledniku.
Kako bi Ionic 2 aplikaciju mogli pokrenuti na Android $ ionic run android odnosno na iOS $ ionic run ios uređaju moramo dodati i pripadajuće platforme, a to ćemo učiniti pomoću sljedećih naredbi:
1 2 |
$ionic platform add android $ionic platform add ios // iOS platformu možete dodati isključivo na Mac-u |
Struktura Ionic 2 projekta
Ako sada pogledate strukturu projekta vidjet ćete puno mapa i puno datoteka, međutim najbitnije datoteke nalaze se unutar src mape.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
| - Ionic2Aplikacija/ | - hooks/ | - node_modules/ | - platforms/ | - android/ | - ios/ | - plugins/ | - resources/ | - src/ | - app/ | - app.component.ts | - app.html | - app.module.ts | - app.scss | - main.ts | - assets/ | - icon/ | - pages/ | - page1/ | - page2/ | - theme/ | - variables.scss | - declarations.d | - index.html | - manifest.jsom | - service-worker.js | - www/ | - .editconfig | - config.xml | - ionic.config.json | - package.json | - tsconfig.json | - tslint.json |
Pojašnjenje važnijih datoteka:
- config.xml – konfiguracijska datoteka koja sadržava naziv aplikacije i popis datoteka od kojih se Ionic 2 aplikacija sastoji.
- src – mapa u kojoj se stvara Ionic 2 aplikacija. Sve stranice, komponente, servise i ostalo kreirat ćemo i uređivati ovdje.
- platforms – svaka dodana platforma ima svoju mapu u kojoj se nalaze specifične datoteke za tu platformu, a koje omogućavaju kreiranje završne verzije aplikacije koja ide na uređaj
- node_modules – npm paketi navedeni u package.json nalaze se u ovoj mapi.
- plugins – mjesto gdje se nalaze svi dodaci koji će proširiti mogućnosti Ionic 2 aplikacije
- resources – sadržava ikone i početni ekran (splash screens) za dodane platforme, u ovom slučaju to su iOS i Android
Ionic komponenta
Osnovna gradivna jedinica Ionic 2 projekta je komponenta koja se sastoji od 3 datoteke npr. komponenta.ts, komponenta.html i komponenta.scss
U .ts datoteci definiramo logiku komponente.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'page-page1', templateUrl: 'page1.html' }) export class Page1 { constructor(public _navCtrl: NavController) { } } |
U .html datoteci definiramo raspored sadržaja komponente.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<ion-header> <ion-navbar> <button ion-button menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title>Page One</ion-title> </ion-navbar> </ion-header> <ion-content padding> <h3>Ionic Menu Starter</h3> <p> If you get lost, the <a href="https://ionicframework.com/docs/v2">docs</a> will show you the way. </p> <button ion-button secondary menuToggle>Toggle Menu</button> </ion-content> |
U .scss datoteci definiramo izgled sadržaja komponente.
1 2 3 |
page-page1 { } |
Više o komponentama i načinu kako se stvaraju biti će riječi u nekom od sljedećih blog postova.
Zaključak
O Ionicu 2 bi se moglo napisati još toliko toga i sve ranije navedeno može se još detaljnije pojasniti, ali zaustaviti ćemo se na ovome. Napravili smo toliko toga i pokazali kako na jednostavan i brz način pokrenuti Ionic 2 projekt, a zapravo nismo napravili ništa jer aplikacija u trenutnom obliku ništa ne radi i ničemu ne služi. Ipak, temelj imamo i lako ćemo dalje. Kroz buduće blog postove detaljnije ćemo se pozabaviti dodavanjem konkretnih funkcionalnosti ove Ionic 2 aplikacije, a sve ćete moći preuzeti na GitHubu.