TCM ionic workshop

Ionic workshop carried out in Tecnocampus Mataró.

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. noel@geemba.com
    @NoelDeMartin
    Thank
    You
    

    View Slide