Upgrade to Pro — share decks privately, control downloads, hide ads and more …

the ionic crash course

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

AppFoundry

December 07, 2016
Tweet

More Decks by AppFoundry

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. 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
  4. 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! ♬ ♫ ♬ ♫
  5. 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/
  6. Laag 3: Angular webview Static DOM Dynamic DOM Cordova API

    HTML5 API AngularJS DOM content loaded event ngApp $compile dom $(root)scope)
  7. Laag 4: Ionic CSS Framework Angular Modules Custom Cordova Plugins

    CLI https://ionicframework.com/docs/components/#header
  8. 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
  9. 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
  10. % –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.
  11. % –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).
  12. 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
  13. 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/
  14. 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
  15. Demo App Use Camera Get data + form Save data

    + show list Show delete button + delete Swipe to share detail