Izrada hibridnih mobilnih aplikacija, KulenDayz - prezentira Ivan Vučičević, BetaWare d.o.o.

1. Izrada hibridnih mobilnih
aplikacija temeljenih na
angular.js
Ivan Vucicevic, BetaWare Osijek 2014.

2. Što trebamo znati?
 Potrebno predznanje javaScript-a
 Potrebno znanje HTML-a

3. 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
 Angular nam pruža lako održavanje software-a
 Angular proširuje HTML s novim atributima
 Angular je savršen za SPA
 Jednostavan za učenje

4. Što Angular čini tako brzim?
Server
Url zahtjev na server
Odgovor servera s web stranicom HTML + JS
Korisnik klikne na link
Odgovor servera s web stranicom HTML + JS

5. Što Angular čini tako brzim?
Server
Url zahtjev na server
Odgovor servera s web stranicom HTML + JS
Korisnik klikne na link
Odgovor servera s JSON podacima
Podaci se
učitavaju u
postojeću
stranicu

6. Što je Angular u stvari?
 Open-source JavaScript framework 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

7. Što je Angular u stvari?

8. Kako koristiti Angular s našom web ili
mobilnom aplikacijom?
 Vrlo jednostavno
 CDN
 Direktno

9. 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

10. Moduli u Angularu
var ngApp = angular.module('ngApp', [‘module2‘, ‘module3']);
app.js

11. 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

12. 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)

13. 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

14. <img> tag
 Problem prilikom učitavanaja slike iz niza.

15. Forme Modeli

16. Dupliciranje
Repeating.html

17. Dupliciranje
Server
Url zahtjev na server
Odgovor servera s web stranicom HTML + JS
ng-include (ajax)
HTML repeating.html
Podaci se
učitavaju u
postojeću
stranicu

18. Prilagođene direktive

19. Rute / Konfiguracija

20. Kontroleri

21. Kontroleri

22. Hibridne mobilne aplikacije
 Nativne
 SDK
 Mobilni Web
 PHP, node.js
 Hibridne
 HTML5, JS

23. Š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

24. Š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

25. Što odabrati?

26. Š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)

27. Ionic framewrok
 Besplatan
 Open Source
 Optimiziran za mobilne uređaje
 Zasnovan na angularJS
 Izvrsne performanse
 Phonegap/Cordova
 Koristi vlastite html tagove <ion>

28. Onsen framework
 Širok spektar gotovih UI komponenti
 Dizajn prilagođen za mobilne uređaje i tablete
 Izvrsne performanse
 Korisit angularJS
 Phonegap/Cordova
 Koristi vlastite html tagove <ons>

29. Onsen karakteristike
 +Nevjerojatan broj gotovih komponenti
 +Velik broj gotovih templatea ili layouta
 +Monaca (debug)
 -Monaca nije besplatna
 -Gotovi layouti nisu temeljeni na angularu

30. Ionic karakteristike
 +ionic CLI
 +besplatan
 +Open Source
 +u potpunosti temeljen na angularJS
 +Prepoznavanje platforme
 +Native feel
 -Još uvijek je beta
 -manjak templat-a
 -konstantne nadogradnje

31. Hibridna aplikacija koja
uploada i pretražuje slike na
flickeru!

32. Izbor layouta
• Potreban je jedan screen
• Jedan button
• Forma za pretragu

33. Index.html

34. App.js

35. directives.js

36. controllers.js

37. In ction

38. Hvala na pažnji!