Cordova, Angularjs & Ionic @ Codeaholics

Cordova, Angularjs & Ionic @ Codeaholics

• 1.
  Native Mobile Apps withCordova, Angular and Ionic Eddie Lau @tatonlto github.com/3dd13
• 2.
  Toolbox
• 4.
  1. Cordova handles thenative apps layer: • Create (Generate folder skeleton) • Build (Generate mobile native apps) • Deploy (Transfer to emulators and Devices)
• 5.
  1. Cordova Command linetools: cordova build # generate native apps projects cordova emulate # deploy to and run in emulator cordova run # deploy to and run in connected devices
• 6.
  2. Angularjs MVC &Data Binding
• 7.
  2. Angularjs Angular modules
• 8.
  3. Ionic • UI Components(with Mobile Design Patterns) http://ionicframework.com/docs/components/
• 9.
  3. Ionic • Controllers &Angularjs binding http://ionicframework.com/docs/angularjs/controllers/side-menu/
• 10.
  Chat Room Apps
• 11.
  Chat Room Apps Requirements • • Mobile& Web (Cordova, AngularJs & Ionic) Real Time (how?)
• 12.
  4. Firebase easy tointegrate cloud real time data source
• 13.
  4. Firebase easy tointegrate cloud real time data source
• 14.
  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
• 15.
  How difficult itis ?! How long it takes ?
• 16.
  Time spent Bare ionicapp (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
• 17.
  Demo https://github.com/3dd13/chatroom-cordova-ionic-angularjs-firebase you can checkoutby 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
• 18.
  cordova emulate android
• 19.
  cordova emulate ios
• 20.
  Of course ! itworks on desktop browser too !
• 21.
  Todo • • • Login with Gmailand 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
• 22.
  Questions ? Eddie Lau @tatonlto github.com/3dd13