390 likes | 591 Views
Izrada hibridnih mobilnih aplikacija temeljenih na angular.js. Ivan Vucicevic, BetaWare Osijek 2014. Što trebamo znati?. Potrebno predznanje javaScript -a
E N D
Izrada hibridnih mobilnih aplikacija temeljenih na angular.js Ivan Vucicevic, BetaWare Osijek 2014.
Što trebamo znati? • Potrebno predznanje javaScript-a • Potrebno znanje HTML-a
Zašto Angular? • Ako želimo napravit dinamičku web ili mobilnu aplikaciju Angular je odličan izbor • Angular nam jako dobro strukturira i organizira kod javaScript-a • Angular nam omogućuje izradu jako brzih web stranica • Angular se ponaša odlično pri radu s jQuery-em • Angularnam pruža lako održavanje software-a • Angular proširuje HTML s novim atributima • Angular je savršen za SPA • Jednostavan za učenje
Što Angular čini tako brzim? Server Url zahtjev na server HTML + JS Odgovor servera s web stranicom Korisnik klikne na link HTML + JS Odgovor servera s web stranicom
Što Angular čini tako brzim? Server Url zahtjev na server HTML + JS Odgovor servera s web stranicom Korisnik klikne na link Podaci se učitavaju u postojeću stranicu Odgovor servera s JSON podacima
Što je Angular u stvari? • Open-sourceJavaScriptframework koji se izvršava na strani klijenta • Održavan je od strane googla • Nastao 2010. • Slijedi MVC kako bi olakšao i ubrzao razvoj • Koristi tzv. direktive • Two-way data binding ($scope) • Moćni templating HTML-a
Kako koristiti Angular s našom web ili mobilnom aplikacijom? • Vrlo jednostavno • CDN • Direktno
Moduli u Angularu • Moduli su gdje pišemo dijelove naše aplikacije, te na taj način držimo kod enkapsuliranim • Zbog takvog pristupa kod nam je lakše održiv i čitljiv • Također u modulima definiramo ovisnosti ostalih modula za našu aplikaciju
Moduli u Angularu varngApp=angular.module('ngApp', [‘module2‘, ‘module3']); app.js
Pisanje izraza u Angularu • ng-app direktiva je definirala cijeli HTML kao angular aplikaciju • Na taj način omogućeno nam je pisanje izraza unutar vitičastih zagrada
Primjeri direktiva (najčešće korištenih) • ng-app – dodavanje Modula angular aplikacije stranici • ng-controller – dodavanje funkcije kontrolera stranici • ng-show/ng-hide – Prikaz/skrivanje elementa ovisno o vrijednosti modela • ng-repeat – ponavljanje za svaki element niza (foreach)
Filteri u Angularu • Angular biblioteka u sebi sadrži mnoge filtere koji se pozivaju „pipe” operatorom (currency, datetime, number, orderBy) • Mogućnost izrade custom filtera
<img> tag • Problem prilikom učitavanaja slike iz niza.
Dupliciranje Repeating.html
Dupliciranje Server Url zahtjev na server HTML + JS Odgovor servera s web stranicom ng-include (ajax) Podaci se učitavaju u postojeću stranicu HTML repeating.html
Hibridne mobilne aplikacije • Nativne • SDK • Mobilni Web • PHP, node.js • Hibridne • HTML5, JS
Što odabrati? • Hibridne aplikacije • Razvoj istovremeno na više platformi • Brži razvoj općenito • Pristup većini nativnih komponenti • Lošije performanse • Nativne aplikacije • Najbolje performanse • Sporiji razvoj • Specifične za platformu
Što odabrati? • Hibridne aplikacije su Vaš izbor ako: • Ciljate na razvoj na više platformi • Želite koristiti mogućnosti kao što su kamera, geolokacija ili akcelerometar • Želite aplikaciju koja će raditi i kada nemate pristup internetu • Ne interesiraju Vas grafičke performanse
Što trebamo znati? • HTML5, CSS3 (SCSS i LESS) • HTML5 mobilni framework (OnsenUI, Ionic, IntelAppFramework, jQueryMobile, KendoUI…) • JS (AngularJS ili jQueryMobile) • Ako je potrebna komunikacija sa serverom: PHP, ASP … • CLI (phonegap, cordova, nodejs)
Ionicframewrok • Besplatan • Open Source • Optimiziran za mobilne uređaje • Zasnovan na angularJS • Izvrsne performanse • Phonegap/Cordova • Koristi vlastite htmltagove<ion>
Onsenframework • Širok spektar gotovih UI komponenti • Dizajn prilagođen za mobilne uređaje i tablete • Izvrsne performanse • KorisitangularJS • Phonegap/Cordova • Koristi vlastite htmltagove <ons>
Onsen karakteristike • +Nevjerojatan broj gotovih komponenti • +Velik broj gotovih templatea ili layouta • +Monaca (debug) • -Monaca nije besplatna • -Gotovi layouti nisu temeljeni na angularu
Ionic karakteristike • +ionic CLI • +besplatan • +Open Source • +u potpunosti temeljen na angularJS • +Prepoznavanje platforme • +Nativefeel • -Još uvijek je beta • -manjak templat-a • -konstantne nadogradnje
Hibridna aplikacija koja uploada i pretražuje slike na flickeru!
Izbor layouta Potreban je jedan screen Jedan button Forma za pretragu