Cordova, Angularjs & Ionic @ Codeaholics

14,006 views

Published on

Sharing on the tools I used to build a real time chatting hybrid mobile apps

Published in: Technology, Business
2 Comments
27 Likes
Statistics
Notes
  • Thanks.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I made a step by step tutorial on how to integrate PhoneGap (Cordova) Angular, Ionic and Yeoman for rapid development: http://www.frontendmatters.com/getting-started-mobile-app-development-phonegap-yeoman-angularjs-ionic/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
14,006
On SlideShare
0
From Embeds
0
Number of Embeds
27
Actions
Shares
0
Downloads
216
Comments
2
Likes
27
Embeds 0
No embeds

No notes for slide

Cordova, Angularjs & Ionic @ Codeaholics

  1. 1. Native Mobile Apps with Cordova, Angular and Ionic Eddie Lau @tatonlto github.com/3dd13
  2. 2. Toolbox
  3. 3. 1. Cordova handles the native apps layer: • Create (Generate folder skeleton) • Build (Generate mobile native apps) • Deploy (Transfer to emulators and Devices)
  4. 4. 1. Cordova Command line tools: cordova build # generate native apps projects cordova emulate # deploy to and run in emulator cordova run # deploy to and run in connected devices
  5. 5. 2. Angularjs MVC & Data Binding
  6. 6. 2. Angularjs Angular modules
  7. 7. 3. Ionic • UI Components (with Mobile Design Patterns) http://ionicframework.com/docs/components/
  8. 8. 3. Ionic • Controllers & Angularjs binding http://ionicframework.com/docs/angularjs/controllers/side-menu/
  9. 9. Chat Room Apps
  10. 10. Chat Room Apps Requirements • • Mobile & Web (Cordova, AngularJs & Ionic) Real Time (how?)
  11. 11. 4. Firebase easy to integrate cloud real time data source
  12. 12. 4. Firebase easy to integrate cloud real time data source
  13. 13. 4. Firebase just magic !! 3 way data binding !! Note: rooms is now a variable binding view model, scope model and remote firebase data source. whenever the model changes at client or server, every view model get updated AUTOMAGICALLY
  14. 14. How difficult it is ?! How long it takes ?
  15. 15. Time spent Bare ionic app (1 hour) Basic ui elements Make sure deployment works ! Modify with some angular function (4 hours) Playing with ionic, angularjs Playing with layout ! Changed to side menus (1 hour) How to interact with ionic ui with angular function ! Use firebase (1 hour) Angular with firebase to do realtime
  16. 16. Demo https://github.com/3dd13/chatroom-cordova-ionic-angularjs-firebase you can checkout by tags on different releases: ! v1.0 - Built bare ionic app v2.0 - Added more ionic components v3.0 - Changed to side menus v4.0 - Linked to firebase
  17. 17. cordova emulate android
  18. 18. cordova emulate ios
  19. 19. Of course ! it works on desktop browser too !
  20. 20. Todo • • • Login with Gmail and Github (Angular-oauth) Room access (Setup firebase security rules) Invite users to the room ! • • • Web chatting client Customize Firebase endpoint (assigned by creator) Customize mobile platform settings
  21. 21. Questions ? Eddie Lau @tatonlto github.com/3dd13

×