the ionic crash course

103e1ebcacd620770cf32a36b9aba17e?s=47 AppFoundry
December 07, 2016

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

103e1ebcacd620770cf32a36b9aba17e?s=128

AppFoundry

December 07, 2016
Tweet

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

  39. None