Iako sam do sada objavio dosta blog postova vezanih uz razvoj hibridnih mobilnih aplikacija koristeći Ionic 3 ipak sam propustio objaviti jedan blog post koji će poslužiti kao uvod u sve te blog postove jednako kao što sam to učinio za Ionic 1 tj. Ionic 2.
Postavljanje razvojne okoline
Kako bi uopće mogli pokrenuti novi Ionic 3 projekt potrebno je zadovoljiti nekoliko preduvjeta.
Potrebno je instalirati:
- Node.js LTS
- Ionic i Cordova CLI pomoću naredbe: $ npm install -g cordova ionic
- TypeScript pomoću naredbe: $ npm install -g typescript
Gore navedeno potrebno vam je za razvoj Android, iOS i Windows Phone hibridnih mobilnih aplikacija. Jedina razlika s kojom se možete susresti je način instalacije jer na Windows baziranom računalu možete razvijati samo Android i Windows Phone aplikacije, dok vam je za iOS potreban Mac.
Prije nego krenete dalje provjerite jeste li sve ranije navedeno uspješno instalirali. To možete učiniti pomoću naredbi:
- $ node -v
- $ cordova –v
- $ ionic –v
Pokretanje Ionic 3 projekta
Ako ste sve ranije navedeno uspješno instalirali već sada možete kreirati novi Ionic 3 projekt.
1 |
$ ionic start Ionic3Project |
Prilikom toga sučelje će vas pitati koji početni predložak želite koristiti za svoj projekt.
Kao što možete vidjeti u animaciji iznad u ponudi je nekoliko predložaka:
- tabs: $ ionic start Ionic3Projekt tabs
- blank: $ ionic start Ionic3Projekt blank
- sidemenu: $ ionic start Ionic3Projekt sidemenu
- super: $ ionic start Ionic3Projekt super
- conference: $ ionic start Ionic3Projekt conference
- tutorial: $ ionic start Ionic3Projekt tutorial
- aws: $ ionic start Ionic3Projekt aws
Svaki od sljedećih vrsta predložaka tj. projekata sastoji se od nekoliko važnih dijelova:
- config.xml – konfiguracijska datoteka koja sadržava naziv aplikacije i popis datoteka od kojih se Ionic 3 aplikacija sastoji.
- src – mapa u kojoj se nalaze datoteke s kojima ćete najviše raditi. Sve stranice, komponente, servise i ostalo kreirat ćete i uređivati ovdje.
- platforms – mapa u kojoj se nalaze datoteke koje omogućavaju postavljanje Ionic 3 aplikacije na Android, iOS i Windows Phone uređaje
- node_modules – npm paketi navedeni u package.json nalaze se u ovoj mapi.
- plugins – mjesto gdje se nalaze svi dodaci kojima ćete proširiti mogućnosti Ionic 3 aplikacije
- resources – sadržava ikone i početni ekran (splash screens) za dodane platforme
– Ionic tabs
1 2 3 |
$ ionic start Ionic3Tabs tabs $ cd Ionic3Tabs $ ionic serve |
– Ionic blank
1 2 3 |
$ ionic start Ionic3Blank blank $ cd Ionic3Blank $ ionic serve |
– Ionic sidemenu
1 2 3 |
$ ionic start Ionic3Sidemenu sidemenu $ cd Ionic3Sidemenu $ ionic serve |
– Ionic super
1 2 3 |
$ ionic start Ionic3Super super $ cd Ionic3Super $ ionic serve |
– Ionic conference
1 2 3 |
$ ionic start Ionic3Conference conference $ cd Ionic3Conference $ ionic serve |
– Ionic tutorial
1 2 3 |
$ ionic start Ionic3Tutorial tutorial $ cd Ionic3Tutorial $ ionic serve |
– Ionic aws
1 2 3 |
$ ionic start Ionic3Aws aws $ cd Ionic3Aws $ ionic serve |
Kako bi uspješno mogli pokrenuti Ionic 3 AWS projekt potrebno je zadovoljiti nekoliko preduvjeta koji nadilaze ovaj blog post tako da ću o tome više nekom drugom prilikom.
Pokretnje aplikacije na mobilnom uređaju
Kako bi Ionic 3 aplikaciju mogli pokrenuti na Android $ ionic run android tj. na iOS $ ionic run ios uređaju trebate dodati i pripadajuće platforme, a to možete učiniti pomoću sljedećih naredbi:
1 2 |
$ionic platform add android $ionic platform add ios |
P.S. iOS platformu možete dodati isključivo na Mac-u.
Zaključak
Kao što možete vidjeti sve ranije navedeno ne razlikuje se puno od Ionica 2 s tom razlikom što kod Ionica 3 poboljšan Ionic CLI, možete birati između više početnih predložaka i što se Ionic Native pluginovi instaliraju na drugačiji način uz dodatak podrške za Lazy Loading.
Valja valja 😉