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. The ionic crash course

    View full-size slide

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

    View full-size slide

  3. Wat zijn Hybrid apps

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  7. 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! ♬ ♫ ♬ ♫

    View full-size slide

  8. 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/

    View full-size slide

  9. Ionic
    Angular
    DOM
    Mobile OS

    View full-size slide

  10. Ok, eventjes terugspoelen

    View full-size slide

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

    View full-size slide

  12. Laag 2: WebView
    webview

    View full-size slide

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

    View full-size slide

  14. Coding Example
    Angular Quick Example

    View full-size slide

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

    View full-size slide

  16. Ionic applicatie

    View full-size slide

  17. Coding Example
    Initieel setup
    Ionic Cordova

    View full-size slide

  18. 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

    View full-size slide

  19. 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

    View full-size slide

  20. %
    –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.

    View full-size slide

  21. %
    –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).

    View full-size slide

  22. 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

    View full-size slide

  23. Le WWW
    (eindelijk…)

    View full-size slide

  24. Coding Example
    Applicatie structuur

    View full-size slide

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

    View full-size slide

  26. Coding Example
    Applicatie structuur

    View full-size slide

  27. Remote debugging

    View full-size slide

  28. 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/

    View full-size slide

  29. 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

    View full-size slide

  30. Doe-het-eens-zelf.. :)

    View full-size slide

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

    View full-size slide

  32. Angular modules
    NgCordova
    Camera Plugin
    Social Sharing Plugin
    angular-local-storage
    cordova-plugin-camera

    SocialSharing-PhoneGap-Plugin
    Cordova Plugins

    View full-size slide

  33. Start scherm

    View full-size slide