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.

Postavljanje Angular 2 + TypeScript projekta

Share Button

U ovom blog postu proći ću kroz proces postavljanja Angular 2 projekta od nule. Zašto od nule? Zato što mislim da je važno da prilikom postavljanja novog projekta znate zašto ste nešto koristili unatoč činjenici da postoje automatski generatori koji će cijeli projekt postaviti za vas.

Naravno, postoji i jednostavniji način koji ću spomenuti na kraju blog posta, a možda i napišem poseban blog post o tome ako netko izrazi želju u komentarima.

Cilj ovog blog posta:
– Kreirati osnovnu strukturu tj. osnovne datoteke
– Dodati podršku za TypeScript
– Postaviti temelj za Angular 2 i dodati System.js
– I konačno, početi koristiti Angular 2

I – Osnovna struktura

Započet ćemo s kreiranjem mape Angular2-starter-projekt.

I.I

Unutar mape kreirat ćemo index.html

I.II

i package.json pomoću naredbe npm init --yes. Što je $ npm init i čemu služi --yes?

Već sada možemo otvoriti index.html u web pregledniku i vidjeti “Angular 2 sadržaj”. Za sada je to samo obična HTML datoteka koju je potrebno osvježiti (F5) u web pregledniku prilikom svake promjene kako bi se one prikazale i daleko je od Angular 2 aplikacije koju želimo napraviti.

I.III

Da bi to promijenili dodat ćemo lite-server, prema preporuci angular.io resursa, koji će služiti za pokretanje aplikacije, automatsko otvaranje u web pregledniku i automatsko osvježavanje prilikom promjena u datotekama.

Lite-server dodajemo pomoću naredbe $ npm install lite-server --save-dev.

NPM lite-server

Nakon instalacije možemo primijetiti dvije stvari, a to su node_modules mapa, u kojoj će se nalaziti svi budući NPM paketi, i promjena unutar package.json u kojemu se sada nalazi i informacija da naš projekt koristi lite-server.

Ako sada pokušate pokrenuti naredbu $ npm run lite dobit ćete poruku o grešci npm ERR! missing script: lite jer vam nedostaje još samo jedna sitnica unutar package.json koji sada treba izgledati ovako:

Projekt od sada pokrećemo naredbom $ npm run lite te će se on automatski otvoriti u zadanom web pregledniku i osvježavati prilikom svake promjene.

NPM lite-server-file-changed

Trenutni izgled aplikacije

Angular2 starter app 1

Struktura projekta sada izgleda ovako:

II – TypeScript

TypeScript je superset JavaScripta i kada govorimo o Angular 2 projektima gotovo je nemoguće pronaći primjer gdje se TypeScript barem ne spominje kao opcija. Uglavnom, uz TypeScript dolazi puno prednosti o kojima možete nešto više saznati na https://www.typescriptlang.org/.

angular.io TypeScript Angular 2 projekte možete raditi i koristeći čisti JavaScript. Prilikom proučavanja dokumentacije na angular.io u donjem lijevom uglu možete odabrati koju vrstu dokumentacije želite vidjeti. Dokaz koliko Angular gura TypeScript je i taj što ako odaberete JavaScript u najvećem broju slučajeva umjesto dokumentacije možete vidjeti poruku “This page is not yet available in JavaScript. We recommend reading it in TypeScript.“.

II.I

No, vratimo se ovom projektu. Prije svega, trebamo dodati TypeScript i Typings u projekt.

TypeScript služi kao prevoditelj ES6 u ES5 tj. JavaScript koji će web preglednik moći razumjeti, a Typings je alat koji omogućava dodavanje proširenja za TypeScript.

NPM Typescript

Oboje ih možemo istovremeno dodati u projekt naredbom
$ npm install --save-dev typescript typings.

Promjena se odmah reflektira na package.json koji sada izgleda malo drugačije:

II.II

Sada možemo kreirati tsconfig.json i typings.json prema uputama na https://angular.io/docs/ts/latest/guide/typescript-configuration.html

tsconfig.json ćemo kreirati ručno i kopirati sljedeće unutar datoteke:

typings.json ćemo kreirati pomoću naredbe $ typings install dt~core-js dt~jasmine dt~node --save --global, ali da ne bi dobili poruku o grešci typings: command not found prvo pokrenite naredbu $ npm install -g typings.

typings.json sada izgleda ovako:

Vraćamo se opet na package.json kojemu ćemo reći koje skripte da pokrene prilikom startanja projekta.

II.III

Dodat ćemo još jedan modul u projekt tako da možemo istovremeno pokrenuti lite-server koji će u web pregledniku podići projekt i typescript watch koji će pratiti promjene u .ts datotekama i kompajlirati ih u .js kako bi ih web preglednik mogao čitati.

Taj modul se zove concurrently a instaliramo ga pomoću naredbe
$ npm install concurrently --save-dev

NPM: start concurrently

Nakon instalacije potrebno je još ubaciti sljedeće u package.json

Aplikaciju od sada pokrećemo naredbom $ npm start.

Struktura projekta sada izgleda ovako:

III – Temelj za Angular 2 i System.js

Do sada smo postavili osnovnu strukturu budućeg starter projekta, dodali podršku za TypeScript i sada je vrijeme da prijeđemo na Angular 2. Ipak, pošto želimo koristiti napredne ES6 mogućnosti koje web preglednici još uvijek ne podržavaju trebaju nam neki dodaci poput Core JS Shim, Zone.js, Reflect Metadata, RxJS i SystemJS kako bi te prepreke zaobišli.

Angular2 QuickStartDa ne bi bilo da sam ja to sada izmislio, info o tome se do prije mjesec dana mogla pronaći u službenoj Angular 2 dokumentaciji. A ako bolje pogledate primijetit ćete da se i dalje nalazi u QuickStart seed projektu unutar index.html.

III.I

Potrebne dodatke dodat ćemo istovremeno u projekt pomoću naredbe
$ npm install core-js reflect-metadata zone.js rxjs systemjs --save

I kao što možete vidjeti package.json je postao bogatiji za

III.II

Sada možemo dodati osnovne pakete koje ćemo koristiti u svim budućim Angular 2 projektima, a koje ne bi mogli koristiti bez dodataka iz prethodnog koraka. Znači sada dodajemo sljedeće pakete:

Istovremeno ćemo ih dodati u projekt naredbom
$ npm install @angular/core @angular/common @angular/compiler @angular/platform-browser @angular/platform-browser-dynamic --save

Osim tih osnovih paketa savjetujem da odmah dodate i sljedeće jer teško je zamisliti bilo kakav ozbiljan Angular 2 projekt bez ovih paketa:

$ npm install @angular/router @angular/http @angular/forms --save

Promjena se odmah reflektira na package.json:

III.III

Angular.io QuickStartSada nam treba System.js koji će Angular 2 aplikaciji reći gdje se svi ranije instalirati paketi nalaze. Opet, da ne izmišljamo toplu vodu jednostavno ću kopirati sadržaj te datoteke iz QuickStart seed projekta. Inače, i ovo se do prije koji tjedan nalazilo u službenoj Angular 2 dokumentaciji.

U mapi projekta kreiramo systemjs.config.js sa sljedećim sadržajem:

III.IV

Vratimo se na index.html u koji ćemo sada dodati putanje do svega što smo dodali do sada.

Struktura projekta sada izgleda ovako:

IV – Napokon Angular 2

Sve do sada bilo je postavljanje projekta, s sada napokon možemo zaroniti u Angular 2. U mapi projekta kreirati ćemo novu mapu koja će se zvati app. To je mapa s kojom ćemo u budućnosti najviše raditi jer u njoj će se nalaziti sve ono što u konačnici čini Angular 2 aplikaciju.

IV.I

A mapi app kreirati ćemo datoteku app.component.ts te će se automatski kreirati app.component.js i app.component.js. Ako nisu samo pokrenite projekt koristeći $ npm start.

IV.II

Unutar app.component.ts kreirat ćemo prvu komponentu

IV.III

Sadržaj iz gornjeg H1 taga još uvijek se ne vidi na početnoj stranici projekta. Da bi se vidio potrebno je kreirati app.module.ts koji služi kao centralno mjesto za sve Angular 2 komponente koje onda možemo koristiti kroz cijelu aplikaciju.

IV.IV

I sada još to trebamo povezati sa ostatkom aplikacije. To ćemo napraviti tako da kreiramo main.ts

IV.V

I konačno. Sada možemo prikazati sadržaj komponente na početnoj stranici aplikacije, a to činimo dodavanjem selektora selector: 'my-app' komponente AppComponent u index.html

Aplikacija sada izgleda ovako:

Angular2 starter app 2

Trenutna struktura projekta:

I to bi bilo to što se tiče postavljanja starter Angular 2 projekta. Imate sve što vam treba za sve buduće projekte i ne morate ovaj postupak ponovo prolaziti. Ipak, idemo još samo za kraj to malo uljepšati.

IV.VI

S obzirom da nam je prilikom rada na projektu najbitnija mapa app za kraj ćemo se fokusirati na nju i datoteke u njoj. Vjerujem da ste do sada već shvatili da su nam najbitnije .ts datoteke koje se automatski kompajliraju u js. i s obzirom da ćemo samo na njima raditi nema potrebe da nam i kompajlirane .js datoteke bezveze stoje u istoj mapi i smo prave gužvu. Zato ćemo sada napraviti da se kompajlirane .js datoteke automatski spremaju u dist mapu koju ćemo sada kreirati.

To ćemo postići tako da tsconfig.json pod "compilerOptions" dodamo "outDir": "dist" .

outdir dist

I zadnja stvar koju moramo napraviti kako bi dist mapa imala svoju svrhu je promijeniti 'app':'dist', u 'app': 'dist', unutar systemjs.config.js tako da web preglednik zna iz koje mape će čitati datoteke za prikaz aplikacije.

I konačna struktura projekta izgleda ovako:

Zaključak

I to je sve! Imate spreman starter Angular 2 + TypeScript projekt. Jednom kada ste ovo napravili spremite projekt na sigurno i koristite prilikom izrade svake sljedeće Angular 2 aplikacije kako bi si ubrzali posao. Naravno, možete dodati ili oduzeti NPM module po želji ovisno o tome što sve želite imati u osnovi svake sljedeće Angular 2 aplikacije.

Rekao sam na početku da ću spomenuti brži način za stvaranje starter projekta, a to je koristeći Angular-CLI koji za vas kreira čitav projekt spreman za korištenje kroz samo nekoliko sekundi. Ipak, korisno je ovako rastrančirati strukturu čisto da se bolje razumije od čega se uopće i zašto projekt sastoji.

Koristite li Angular 2 i TypeScript? Kakva su dosadašnja iskustva?