Pokretanje novog Ionic projekta

Stvaranje novog Ionic projekta

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

$ ionic start nazivAplikacije vrsta_predloška

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

$ ionic start primjerAplikacije tabs

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

Your Ionic project is ready to go! Some quick tips:

 * cd into your project: $ cd primjerAplikacije

 * Setup this project to use Sass: ionic setup sass

 * Develop in the browser with live reload: ionic serve

 * Add a platform (ios or Android): ionic platform add ios [android]
   Note: iOS development requires OS X currently
   See the Android Platform Guide for full Android installation instructions:
   https://cordova.apache.org/docs/en/edge/guide_platforms_android_index.md.html

 * Build your app: ionic build <PLATFORM>

 * Simulate your app: ionic emulate <PLATFORM>

 * Run your app on a device: ionic run <PLATFORM>

 * Package an app using Ionic package service: ionic package <MODE> <PLATFORM>

For more help use ionic --help or ionic docs

Visit the Ionic docs: https://ionicframework.com/docs

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.

Create an ionic.io account to send Push Notifications and use the Ionic View app?
(Y/n): 

Pregled aplikacije u web pregledniku

$ ionic serve --lab
$ ionic serve –lab

Pristupite direktoriju u kojemu se nalazi vaš projekt.

cd primjerAplikacije

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.

$ ionic serve
$ ionic serve --lab

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.

Multiple addresses available.
Please select which address to use by entering its number from the list below:
 1) 192.0.1.100 (en0)
 2) localhost
Address Selection: 

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.

 
/www
    /css
        style.css
    /img
    /js
        app.js
        controllers.js
        services.js
     /lib
     /templates
        chat-details.html
        tab-account.html
        tab-chats.html
        tab-dash.html
        tabs.html
index.html 

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ć

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 *