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 Slide

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

    View Slide

  3. Wat zijn Hybrid apps

    View 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 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 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 Slide

  7. Installing

    View Slide

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

    View Slide

  9. Ionic 101

    View Slide

  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/

    View Slide

  11. Ionic
    Angular
    DOM
    Mobile OS

    View Slide

  12. Ok, eventjes terugspoelen

    View Slide

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

    View Slide

  14. Laag 2: WebView
    webview

    View Slide

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

    View Slide

  16. Coding Example
    Angular Quick Example

    View Slide

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

    View Slide

  18. Ionic applicatie

    View Slide

  19. Coding Example
    Initieel setup
    Ionic Cordova

    View Slide

  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

    View Slide

  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

    View Slide

  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.

    View Slide

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

    View Slide

  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

    View Slide

  25. Le WWW
    (eindelijk…)

    View Slide

  26. Coding Example
    Applicatie structuur

    View Slide

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

    View Slide

  28. Coding Example
    Applicatie structuur

    View Slide

  29. Debugging

    View Slide

  30. Remote debugging

    View Slide

  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/

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    SocialSharing-PhoneGap-Plugin
    Cordova Plugins

    View Slide

  36. Start scherm

    View Slide

  37. Foto Scherm

    View Slide

  38. Acties

    View Slide

  39. View Slide