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

TCM ionic workshop

TCM ionic workshop

Ionic workshop carried out in Tecnocampus Mataró.

Noel De Martin

November 30, 2017
Tweet

More Decks by Noel De Martin

Other Decks in Programming

Transcript

  1. Noel De Martin, CTO
    TCM Ionic
    Workshop
    CODE: github.com/NoelDeMartin/tcm-ionic-workshop

    View Slide

  2. What is Ionic?
    “Ionic is the beautiful, free and open source mobile SDK for
    developing native and progressive web apps with ease“

    View Slide

  3. What is Ionic?
    • Develop once, deploy everywhere
    • Ready made components
    • Implement native functionality when necessary
    “Ionic is the beautiful, free and open source mobile SDK for
    developing native and progressive web apps with ease“

    View Slide

  4. What is an Ionic Application?
    +
    +

    View Slide

  5. What is an Ionic Application?
    +
    +
    User Interface
    Application Logic
    Mobile and Native Functionality

    View Slide

  6. About this Workshop
    • Simple Ionic Chat Application

    View Slide

  7. About this Workshop
    • Simple Ionic Chat Application
    + ( )

    View Slide

  8. About this Workshop
    • Simple Ionic Chat Application
    + ( )
    • No mobile compilation due to time constraints

    View Slide

  9. About this Workshop
    • Simple Ionic Chat Application
    + ( )
    • No mobile compilation due to time constraints
    • But there is a surprise at the end!

    View Slide

  10. About this Workshop
    • Simple Ionic Chat Application
    + ( )
    • No mobile compilation due to time constraints
    • But there is a surprise at the end!
    • Beware: There will be live coding in this workshop!
    • Everything is ready in the repository, no need to follow along
    with the live coding
    • 3 Programming checkpoints
    • Pair programming is encouraged!

    View Slide

  11. Let’s get started
    https://github.com/NoelDeMartin/tcm-ionic-workshop
    git checkout workshop-start
    npm install
    node_modules/.bin/ionic serve

    View Slide

  12. Login Page
    • Design patterns
    • MVC: Model View Controller
    • Composite
    • Dependency Injection
    • Ionic Theming
    • Binding
    • () Event binding (Component  Controller)
    • [] Property binding (Controller  Component)
    • [()] Two-way binding
    • Services / Providers injected

    View Slide

  13. Register Page
    • Similar to Login Page
    • 4 inputs:
    • Username
    • Email
    • Password
    • Password confirmation
    • Use backend register() method
    git checkout workshop-checkpoint-1
    20 minutes

    View Slide

  14. Splash Page
    • DRY: Don’t Repeat Yourself
    • UI.asyncOperation – Wrap loader and error alert
    • Page component – Wrap common page layout using transclusion
    with ng-content
    • Defer Login/Home initial page until services
    have been loaded

    View Slide

  15. Create Room Modal
    git checkout workshop-checkpoint-2
    • Modal, not page
    • 2+ inputs:
    • Room topic
    • 1+ Member usernames
    • Use ModalController instead of NavController
    • Use backend createRoom() method
    20 minutes

    View Slide

  16. Home Page + Chat Room Page
    • Structural directives
    • *ngFor to list room links
    • *ngIf to show empty list message
    • Listen observables with AsyncPipe
    • Transclusion selector slots
    • Introduce footer slot in chat room page to
    insert messages input

    View Slide

  17. Chat Room Messages
    git checkout workshop-checkpoint-3
    • List room messages
    • Use backend sendMessage() method
    • New messages will be added to Room.messages
    property
    20 minutes

    View Slide

  18. Considerations for production
    • Internationalization
    • Form validation++
    • UI++ (avatars, settings, etc.)
    • Encrypt messages
    • Release to App Stores
    • Push notifications
    • Native? not necessarily – Check out Twitter PWA
    • Check out service workers for functionality when app is closed
    • Relative imports conundrum

    View Slide

  19. Building release artifact
    node_modules/.bin/ionic cordova build {platform} --prod
    • Android: upload .APK to Google Play
    • iOS: use Xcode to release app to AppStore
    • PWA: Progressive Web App
    • Prepare manifest.json file
    • Remove cordova dependencies
    • node_modules/.bin/ionic cordova build browser –prod
    • Use www/ folder as website root

    View Slide

  20. Here’s the surprise!
    https://noeldemartin.github.io/tcm-ionic-workshop
    • With Android:
    • Open website in Chrome browser
    • Options  Add to Home screen

    View Slide

  21. Closing Thoughts
    • Hybrid development is the best choice for
    startups and proof-of-concept
    • Firebase + Github Pages == 0 Hosting costs
    • Coming Soon: Web Components
    • Ionic will become only a components library
    • Hello Vue, Goodbye Angular!

    View Slide

  22. [email protected]
    @NoelDeMartin
    Thank
    You

    View Slide