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

Questions ?

Eddie Lau @tatonlto

github.com/3dd13