the ionic crash course

Mobile hybrid apps with Ionic, AngularJS & Cordova.
A presentation by Bruno De Simpelaere.
Code samples: https://github.com/appfoundry/academy-html5-ionic

Transcript

1. The ionic crash course
2. Your host Bruno De Simpelaere Front-end Consultant ! bruno.desimpelaere@appfoundry.be " @bursquare
3. Wat zijn Hybrid apps
4. 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
5. 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
6. 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
7. Installing
8. 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! ♬ ♫ ♬ ♫
9. Ionic 101
10. 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/
11. Ionic Angular DOM Mobile OS
12. Ok, eventjes terugspoelen
13. Laag 1: Cordova https://cordova.apache.org/docs/en/latest/
14. Laag 2: WebView webview
15. Laag 3: Angular webview Static DOM Dynamic DOM Cordova API HTML5 API AngularJS DOM content loaded event ngApp $compile dom $(root)scope)
16. Coding Example Angular Quick Example
17. Laag 4: Ionic CSS Framework Angular Modules Custom Cordova Plugins CLI https://ionicframework.com/docs/components/#header
18. Ionic applicatie
19. Coding Example Initieel setup Ionic Cordova
20. 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
21. 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
22. % –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.
23. % –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).
24. 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
25. Le WWW (eindelijk…)
26. Coding Example Applicatie structuur
27. Eventflow device ready (cordova) DOM ready boot ng-app $compile boot plugins are useable
28. Coding Example Applicatie structuur
29. Debugging
30. Remote debugging
31. 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/
32. 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
33. Doe-het-eens-zelf.. :)
34. Demo App Use Camera Get data + form Save data + show list Show delete button + delete Swipe to share detail
35. Angular modules NgCordova Camera Plugin Social Sharing Plugin angular-local-storage cordova-plugin-camera
 SocialSharing-PhoneGap-Plugin Cordova Plugins
36. Start scherm
37. Foto Scherm
38. Acties