Uvod u Ionic 2

Uvod u Ionic 2

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 start

  • 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

ionic2 predlošci

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.

ionic sidemenu starter

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:

$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.

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

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.

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

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.

Objavio

Tomislav Stanković

Bloger širokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *