Pokretanje novog Ionic projekta

Stvaranje novog Ionic projekta

Nakon što ste postavili razvojnu okolinu možete pokrenuti svoj prvi Ionic projekt.

Prije nego krenete u razvoj razmislite za što će služiti aplikacija, koja će joj biti svrha i kako ste ju zamislili. Prema tome možete odabrati predložak koji je najsličniji onome što želite napraviti kako biste si ubrzali posao. Npr. ako želite nešto jednostavnije možete iskoristiti tabs predložak ili ako u startu znate da ćete imati dosta opcija koje želite smjestiti u jedan veći izbornik onda možete početi s predloškom sidemenu.

Vrste predložaka (prva tri su osnovna):
blank – $ ionic start nazivAplikacije blank
tabs – $ ionic start nazivAplikacije tabs
sidemenu – $ ionic start nazivAplikacije sidemenu
maps – $ ionic start nazivAplikacije maps
tests – $ ionic start nazivAplikacije tests
complex-list – $ ionic start nazivAplikacije complex-list
salesforce – $ ionic start nazivAplikacije salesforce

Ionic Framework predlosci

Pokretanje projekta

Pokrenite novi projekt temeljen na tabs predlošku pomoću naredbe

i uskoro ćete vidjeti sljedeću poruku s korisnim informacijama o tome kako upravljati aplikacijom. O svemu tome će detaljnije biti riječi kasnije.

Osim toga biti će vam ponuđeno da napravite Ionic.io korisnički račun. Ne morate u ovom koraku, jer će vam ta opcija svaki put biti ponuđena, ali svakako napravite svoj Ionic.io korisnički račun.

Pregled aplikacije u web pregledniku

$ ionic serve --lab
$ ionic serve –lab

Pristupite direktoriju u kojemu se nalazi vaš projekt.

Već sada možete vidjeti kako vaša aplikacija izgleda u web pregledniku. To možete učiniti sljedeće dvije naredbe. Prva prikazuje jedno sučelje aplikacije koje je pogodno za debugiranje, a druga sa dodatkom --lab je uljepšani istovremeni prikaz iOS i Android sučelja.

Važno je za napomenuti da se puno ne pouzdate u ove preglede jer se mogu poprilično razlikovati od verzija koje ćete testirati i provjeravati na mobilnim uređajima. Taj dio ćemo obraditi kasnije. Za sada se držimo web preglednika.

Kada pokušate pokrenuti prvu naredbu dobit ćete poruku koja vam nudi na izbor s koje adrese želite da se vaša aplikacija prikaže u web pregledniku. Prva opcija omogućava vam da aplikaciju mogu pregledavati svi u vašoj mreži, dok ćete u drugoj opciji jedino vi na svojem računalu imati pristup aplikaciji.

Ova će vam se opcija prikazati samo jednom.

Uređivanje aplikacije

Pretpostavljam da sada već želite dodati nešto svoje u mobilnu aplikaciju. Za to će vam trebati text editor tj. IDE. Notepad++, Sublime Text, Atom, Visual Studio Code,…

Otvorite direktorij vaše aplikacije i spremni ste za uređivanje.

Sublime Text 2 - Ionic tabs app
Sublime Text 2

Sa lijeve strane vidite strukturu direktorija, a sa desne možete uređivati kod. Najvažniji vam je direktorij www i u njemu ćete provesti najviše vremena. Ovdje saznajte više o MVC strukturi Ionic aplikacija.

Zaključak

Sve ranije navedeno tiče se pregledavanja aplikacije u web pregledniku. Znači, ako pratite prethodne korake možete pokrenuti novi Ionic projekt, urediti ga u text editoru i prikazati u web pregledniku što je dobro i tako ćete inače raditi.

Ipak, konačni cilj izrade mobilne aplikacije je da se ista može poslati na mobilni uređaj i ondje pokrenuti. Kako to napraviti pokazat ću u sljedećem blog postu.

Objavio

Tomislav Stanković

Web 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 *