2. Razvoj večplatformskih aplikacij z Apache Cordova
Dušan Zupančič
dusan.zupancic at gorenje.com

3. AGENDA Uvod: Nenehno ponovno izumljanje spleta Apache Cordova Ionic
Pogled v prihodnost

4. Nenehno ponovno izumljanje spleta
9/21/ :22 AM
Nenehno ponovno izumljanje spleta   
1991 – Začetek HTTP, enostavni HTML dokumenti, …
2000 – DHTML in Web 2.0 – Dokumenti  Aplikacije
2007 – Apple naredi mobilno brskanje po spletu precej popularno (dogovori s ponudniki podatkovnega prenosa, …) in aplikacije se pričnejo seliti iz desktopov na telefone, kjer se izkušnja z uporabo senzorjev in ostalih dodatkov (fotoaparat, …) mobilne naprave še izboljša
2009 – na iPhoneDevCamp v San Franciscu predstavljen PhoneGap podjetja Nitobi. Uspešno je zapolnil nišo me brskalnikovimi omejitvami in zmožnostmi telefona. Pozneje v 2011 podjetje in ime PhoneGap prevzame Adobe, vendar je produkt še vedno na voljo v odprtokodni različici pod imenom Cordova
2016 – sprememba dojemanja uporabnikov in kakšna mora biti uporabniška izkušnja, pomemben je design. V letošnjem letu nas torej čaka še eno ponovno izumljanje spleta.
1991
2000
2007
2009
2016
© 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

5. Popularnost višjenivojskih jezikov raSTE
9/21/ :22 AM
Popularnost višjenivojskih jezikov raSTE
© 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

6. JavaScript uporablja več ljudi, kot katerikoli drug programski jezik
Javascript danes uporablja največ razvijalcev, kar pomeni, da je na voljo precej izkušenj.
Javascript se ne uporablja samo na brsklanikih, ampak tudi na ostalih rešitvah, kjer je potreba po večplaformskem razvoju (npr. NodeJs)
JS vsebuje >25 let izkušenj na področju spletnega razvoja, kar pomeni, da je na voljo precej knjižnic, ogrodij in tutorialov
Stack Overflow Developer Survey, March 2016
© 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

7. Najbolj uporabljane večplatformske tehnologije
9/21/ :22 AM
Najbolj uporabljane večplatformske tehnologije
Vision Mobile Analysis of Cross-Platform Development, July 2015
© 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

8. Apache Cordova

9. Kaj je Apache Cordova?
Odprtokodno ogrodje za razvoj mobilnih aplikacij
Uporablja standardne spletne tehnologije (HTML5, CSS3, JavaScript)
Ista rešitev se lahko prevede za izvajanje v različnih platformah

10. Distribucija aplikacije
Ena skupna koda za vse platforme (z možnostjo vključevanja posebnosti platforme preko platformOverrides.js)
Aplikacija je napisana s HTML5, CSS3, Javascript, vendar je končni rezultat binarna izvedljiva datoteka za posamezno platformo (za iOS je to IPA datoteka, za Android je to APK datoteka, za Windows Phone je to XAP datoteka, …)

11. Kako deluje Cordova? Cordova Project HTML, CSS, JS Assets
Platform code
Plugin code
Configuration
Visual Studio Project
HTML, CSS, JS, assets
Windows-specific runtime
Windows-specific plugin code
Windows-specific configuration
Native Windows App
CREATE
BUILD
XCode Project
HTML, CSS, JS, assets
iOS-specific runtime
iOS-specific plugin code
iOS-specific configuration
Native iOS
App
Android Project
HTML, CSS, JS, assets
Android-specific runtime
Android-specific plugin code
Android-specific configuration
Native Android App

12. Izdelava Cordova aplikacije (commandline)
Ustvarjanje aplikacije
cordova create prvaCordovaApp
Premik v aplikacijski imenik
cd prvaCordovaApp
Dodajanje ciljnih platform (browser, android, ios, windows, …)
cordova platform add android -- save
Preverjanje in namestitev potrebnih programskih paketov
cordova requirements
Gradnja aplikacije (za vse dodane platforme)
Cordova build
Izvajanje aplikacije v podani platformi (browser, android, ios, windows, …)
Cordova serve ali
cordova run android

13. Demo 01
Demo prva aplikacija Cordova

14. 3-cordova requirements

15. 5 cordova run windows

16. Cordova emulate ios

18. Datotečni sistem Cordova rešitve
Hooks – vključki za igradnjo (build)
Platforms – nameščene platforme za izgradnjo
Plugins– nameščeni Cordova vključki
www– HTML, css in javascript datoteke za aplikacijo

19. VS TACO – Tools for Apache COrdova

20. Uvoz Cordova projekta v Visual Studio 2015

21. Config.xml – dom nastavitev

22. www/index.html – vrata v CORDOVA aplikacijo
HTML s poljubnimi ogrodji (jQuery, AngularJS, …)

23. Javascript – gonilo aplikacije

24. Cordova plugins – vrata do opreme na napravi

25. Cordova plugin – uporaba

26. Demo 02
Uporaba Camera plugin v Apache Cordova

27. Hramba podatkov Pomnilnik Lokalna shramba (localStorage, WebSQL)
Začasna hramba
Lokalna shramba (localStorage, WebSQL)
Trajna hramba na napravi
Cache za offline dostop oddaljenih podatkov
Oddaljene storitve (REST/JSON storitve)
Uporabimo lahko poljubne JSON storitve
Azure App Service ponuja enostaven dostop do baze v oblaku preko JSON

28. Lokalna hramba podatkov (localStorage)

29. Klicanje zunanjih storitev
Primer REST/json spletne storitve

30. Pridobivanje podatkov iz JSON storitve

31. Demo 03 Airport Weather Hramba in dostop do podatkov
Klic zunanje JSON storitve

32. Azure App Service – Mobile Apps

33. https://portal.azure.com/

34. DEMO
Azure App Service – Cordova app

35. Ionic

36. Kaj je ionic?
Odprtokodno ogrodje z vključenimi HTML in CSS knjižnicami ter JS komponentami optimiziranimi za delo na mobilnih napravah
Zgrajen nad ogrodjem Angular
Upošteva oblikovna določila platforme na kateri teče (npr. statusbar: Android zgoraj, IOS spodaj, …)
Močan CLI (izgradnja predloge aplikacije, …)
Ima zgrajeno tržnico za template aplikacij, pluginov in tem.

37. Bogata knjižnica komponent

38. Prilagoditev izgleda platformi
IOS
Android

39. Arhitektura rešitve z ogrodjem Ionic
Native Plugins and Features
Apache Cordova
Ionic
Camera
Bluetooth
Video
Health Kit
Touch ID
Streaming
Security & Encryption
Push Notifications
Audio
Code Push/ update
Embedded Web Browser (Edge, Chrome, Webkit)
Angular

40. Ionic – ustvarjanje novega projekta
ionic start myApp tabs

41. Za VS so na voljo vključki za Ionic projekte

42. Demo 04
Osnovna ionic rešitev na osnovi predloge

43. Ionic market Ponuja še več predlog aplikacij.
Na voljo so tudi dodatni vključki in teme.

44. Demo 05 Airport Weather
Ionic izvedba vremena na letališčih

45. Demo 05

46. Pogled v prihodnost

47. Ionic 2
Prenovljen CLI (dodajanje strani in ponudnikov (provider) preko CLI)
Posodobljena struktura datotek
Angular 2 (skupaj s TypeScript, ECMAscript 6, spletnimi komponentami itd.)
In še mnogo drugega …

48. Demo 06
Ionic 2 app (in typescript)

49. 9/21/ :22 AM
ZAKLJUČEK
Cordova in Ionic sta v fazi, ko veljata za dozoreli tehnologiji
Ekosistem je dovolj bogat
Na voljo več različnih ogrodij
> 900 plugin-ov
Argument „slabše performance“ ne velja več
Več prednosti, ki jih ne gre zanemariti
Ena koda za vse izvajalne platforme …
© 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

50. VPRAŠANJA?

51. Izpolnite anketo! Vam je bilo predavanje všeč?
Ste se naučili kaj novega?
Vaše mnenje nam veliko pomeni!
Da bo NT konferenca prihodnje leto še boljša, vas prosimo, da izpolnite anketo o zadovoljstvu, ki jo najdete v svojem NTK spletnem profilu.

52. 9/21/ :22 AM
© 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.