Upload
eddie-lau
View
10.202
Download
7
Embed Size (px)
DESCRIPTION
Sharing on the tools I used to build a real time chatting hybrid mobile apps
Citation preview
Native Mobile Apps with Cordova, Angular and Ionic
Eddie Lau @tatonlto
github.com/3dd13
Toolbox
1. Cordova
• Create (Generate folder skeleton) • Build (Generate mobile native apps) • Deploy (Transfer to emulators and Devices)
handles the native apps layer:
1. Cordova
cordova build # generate native apps projects
cordova emulate # deploy to and run in emulator
cordova run # deploy to and run in connected devices
Command line tools:
2. Angularjs
MVC & Data Binding
2. Angularjs
Angular modules
3. Ionic• UI Components (with Mobile Design Patterns) http://ionicframework.com/docs/components/
3. Ionic• Controllers & Angularjs binding http://ionicframework.com/docs/angularjs/controllers/side-menu/
Chat Room Apps
Requirements
• Mobile & Web (Cordova, AngularJs & Ionic) • Real Time (how?)
Chat Room Apps
4. Firebase
easy to integrate cloud real time data source
4. Firebaseeasy to integrate cloud real time data source
4. Firebasejust 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
How difficult it is ?!How long it takes ?
Time spentBare 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
Demohttps://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
cordova emulate android
cordova emulate ios
Of course ! it works on desktop browser too !
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