The ionic crash course 

Your host Bruno De Simpelaere Front-end Consultant ! [email protected] " @bursquare 

Wat zijn Hybrid apps 

Hybride Apps 1. WebView app - HTML,CSS & Javascript in interne browser (WebView)
 
 - Wrapped in een native app - API’s van het OS zijn beschikbaar via Javascript - b.v. Cordova 2. Compiled hybrid app - Geschreven in C# of JavaScript en wordt gecompileerd naar “native” - B.V. Xamarin 3. Compiled Hybrid App with native Javascript.. - Hierbij wordt de interne JavaScript engine gebruikt - in combinatie met native view - b.v. React Native 

WebView Apps Voordelen - Je kan je web-kennis gebruiken. - Een code base voor meerdere platformen - Sneller, en dus goedkoper (relatief) - Makkelijk(er) om op verschillende schermen te gebruiken (responsive) - Toegang tot het device en OS-features - HTML5 + Device Offline mogelijkheden - Mogelijkheid om code te delen tussen “native” en “web” applicatie 

WebView Apps Nadelen - Performatie issues voor bepaalde types van applicaties, b.v. indien je veel native functionaliteit nodig hebt, of zware animaties. - Het nabootsen van een native UI kan tijdrovend zijn. - Niet alle “device” en “os” features zijn toegankelijk 

Installing 

Voor we van start gaan.. 1. NodeJS (https://nodejs.org/en/) 2. JDK 8 (http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html) 
 3. Android SDK tools (of studio) (https://developer.android.com/studio/index.html) 4. Ionic & Cordova (https://ionicframework.com/docs/v1/getting-started/) npm install -g cordova ionic ♬ ♫ ♬ ♫ Your Ionic app is ready to go! ♬ ♫ ♬ ♫ 

Ionic 101 

Ionic is een framework (maar biedt ook services) Angular Directives & Services CSS/SCSS styling Cordova wrapper ionic-CLI Ionic Cloud Ionic Creator # $ $ $ https://ionicframework.com/docs/v1/ 

Ionic Angular DOM Mobile OS 

Ok, eventjes terugspoelen 

Laag 1: Cordova https://cordova.apache.org/docs/en/latest/ 

Laag 2: WebView webview 

Laag 3: Angular webview Static DOM Dynamic DOM Cordova API HTML5 API AngularJS DOM content loaded event ngApp $compile dom $(root)scope) 

Coding Example Angular Quick Example 

Laag 4: Ionic CSS Framework Angular Modules Custom Cordova Plugins CLI https://ionicframework.com/docs/components/#header 

Ionic applicatie 

Coding Example Initieel setup Ionic Cordova 

HOOKS for cordova commands PLUGINS Packages of plugins CONFIG.XML Global configuration file PLATFORM Project directories of specific platform WWW Source code of web apps 

HOOKS for cordova commands PLUGINS Packages of plugins CONFIG.XML Global configuration file PLATFORM Project directories of specific platform WWW Source code of web apps NPM Node package manager BOWER package manager SCSS Preprocessing of CSS styles GULP Task runner 

% –Sindre Sorhus, Stack Overflow npm is most commonly used for managing Node.js modules, but it works for the front-end too when combined with Browserify and/or $ npm dedupe. Bower is created solely for the front-end and is optimized with that in mind. 

% –Chris, Stack Overflow Grunt and Gulp are task runners to automate everything that can be automated (i.e. compile css/ sass, optimize images, make a bundle and minify/ transpile it) grunt vs gulp (is like maven vs gradle or configuration vs code). 

Tooling WWW ngLocalStorage; ngCordova … Camera Location Filesystem Compile Cordova Plugins Bower Packages Server (in browser) NPM Compile SCSS Lint JS Run unit tests … Optimized WWW App 

Le WWW (eindelijk…) 

Coding Example Applicatie structuur 

Eventflow device ready (cordova) DOM ready boot ng-app $compile boot plugins are useable 

Coding Example Applicatie structuur 

Debugging 

Remote debugging 

Debugging with Safari 1. Open safari 2. Klik op “Safari” > “Voorkeuren” > “Geavanceerd” 3. Vink “Toon ontwikkel menu in menubalk” https://developer.apple.com/safari/tools/ 

Debugging with Chrome 1. Schakel USB debugging in op je device 2. Verbind je Android device 3. Open chrome en surf naar https://developers.google.com/web/tools/chrome-devtools/remote-debugging/ chrome:\\inspect 

Doe-het-eens-zelf.. :) 

Demo App Use Camera Get data + form Save data + show list Show delete button + delete Swipe to share detail 

Angular modules NgCordova Camera Plugin Social Sharing Plugin angular-local-storage cordova-plugin-camera
 SocialSharing-PhoneGap-Plugin Cordova Plugins 

Start scherm 

Foto Scherm 

Acties 

No content