Uvod u Ionic 2

Uvod u Ionic 2

Share Button

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:

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.

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.

U .html datoteci definiramo raspored sadržaja komponente.

U .scss datoteci definiramo izgled sadržaja komponente.

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ć

Web i mobile developer. Uz to bavi se i temama vezanim uz online reputaciju. Google+

Odgovori

Vaša adresa e-pošte neće biti objavljena. Nužna polja su označena s *