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