Uvod u Ionic 3

Uvod u Ionic 3

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.

Prilikom toga sučelje će vas pitati koji početni predložak želite koristiti za svoj projekt.

Ionic 3 - pokretanje projekta

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

Ionic 3 tabs

– Ionic blank

Ionic 3 blank

– Ionic sidemenu

Ionic 3 sidemenu

– Ionic super

Ionic 3 super

– Ionic conference

Ionic 3 conference

– Ionic tutorial

Ionic 3 tutorial

– Ionic aws

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:

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.

Objavio

Tomislav Stanković

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

Jedna misao o “Uvod u Ionic 3”

Odgovori

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