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

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

Nenehno ponovno izumljanje spleta 9/21/2018 11: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.

Popularnost višjenivojskih jezikov raSTE 9/21/2018 11: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.

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.

Najbolj uporabljane večplatformske tehnologije 9/21/2018 11: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.

Apache Cordova

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

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, …)

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

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

Demo 01 Demo prva aplikacija Cordova

3-cordova requirements

5 cordova run windows

Cordova emulate ios

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

VS TACO – Tools for Apache COrdova

Uvoz Cordova projekta v Visual Studio 2015

Config.xml – dom nastavitev

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

Javascript – gonilo aplikacije

Cordova plugins – vrata do opreme na napravi

Cordova plugin – uporaba

Demo 02 Uporaba Camera plugin v Apache Cordova

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

Lokalna hramba podatkov (localStorage)

Klicanje zunanjih storitev Primer REST/json spletne storitve

Pridobivanje podatkov iz JSON storitve

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

Azure App Service – Mobile Apps

https://portal.azure.com/

DEMO Azure App Service – Cordova app

Ionic

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.

Bogata knjižnica komponent

Prilagoditev izgleda platformi IOS Android

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

Ionic – ustvarjanje novega projekta ionic start myApp tabs

Za VS so na voljo vključki za Ionic projekte

Demo 04 Osnovna ionic rešitev na osnovi predloge

Ionic market Ponuja še več predlog aplikacij. Na voljo so tudi dodatni vključki in teme. https://market.ionic.io/

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

Demo 05

Pogled v prihodnost

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 …

Demo 06 Ionic 2 app (in typescript)

9/21/2018 11: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.

VPRAŠANJA?

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.

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