TCM ionic workshop

TCM ionic workshop

Ionic workshop carried out in Tecnocampus Mataró.

890d8373aaab58aea4364f81b1b5d212?s=128

Noel De Martin

November 30, 2017
Tweet

Transcript

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

  2. What is Ionic? “Ionic is the beautiful, free and open

    source mobile SDK for developing native and progressive web apps with ease“
  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“
  4. What is an Ionic Application? + +

  5. What is an Ionic Application? + + User Interface Application

    Logic Mobile and Native Functionality
  6. About this Workshop • Simple Ionic Chat Application

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

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

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

    ) • No mobile compilation due to time constraints • But there is a surprise at the end!
  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!
  11. Let’s get started https://github.com/NoelDeMartin/tcm-ionic-workshop git checkout workshop-start npm install node_modules/.bin/ionic

    serve
  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
  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
  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
  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
  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
  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
  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
  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
  20. Here’s the surprise! https://noeldemartin.github.io/tcm-ionic-workshop • With Android: • Open website

    in Chrome browser • Options  Add to Home screen
  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!
  22. noel@geemba.com @NoelDeMartin Thank You