building cross platform mobile apps quickly with ionic
TRANSCRIPT
Building Mobile Apps
Quickly with IonicGeorge Stocker
@gortok
Thank Our Sponsors without whom Today is not Possible
Platinum
Bronze
Silver
Housekeeping…
• Thanks to our host
• Respect your speakers and fellow attendees:Set mobile devices to vibrate or silent
• Fill out session evaluations• They are used in the drawings
• You must be present to win at the wrap-up
</>
</>
Mobile
App
Development
Objective-C
Cocoa
Java
Android SDK
Cordova
Objective-C
Cocoa
Java
Android SDK
Ionic
Cordova
Objective-C
Cocoa
Java
Android SDK
</>
Data Persistence
Two and a Half… Options.
HTML 5 LocalStorage
HTML5 LocalStorage
var user = {
name: 'George',
url: ‘http://georgestocker.com‘
};
localStorage.setItem(‘user’, JSON.stringify(user));
Adding Data
HTML5 LocalStorage
var user = JSON.parse(localStorage.getItem(‘user’));
Retrieving Data
HTML5 LocalStorage
Advantages
HTML5 LocalStorage
Advantages
> window.localStorage
<- Storage {length:0}
HTML5 LocalStorage
Disadvantages
5 Megabyte Limit
<!-- config.xml -->
<widget ...>
<preference name="BackupWebStorage" value="none" />
</widget>
source: http://learn.ionicframework.com/formulas/localstorage/
HTML5 LocalStorage
Disadvantages
HTML5 LocalStorage
Disadvantages
SQLite
Sqlite
Advantages
Sqlite
Advantages
var query = "SELECT * FROM people WHERE id = ?";
$cordovaSQLite.execute(db, query, [id]).then(function(res) {
//do something
});
Sqlite
Source: MPA Student Life Blog
Advantages
Sqlite
Disadvantages
This space intentionally left blank.
Mobile Backend as a Service
(MBaaS)
MBaaS
georgestocker.com/2015/04/03/mbaas-where-are-they-now/
MBaaS
georgestocker.com/2015/04/03/mbaas-where-are-they-now/
TL;DR
It depends
MBaaS
MBaaS
MBaaS
MBaaS
MBaaS
Advantages
MBaaS
Disadvantages
MBaaS
Disadvantages
MBaaS
Disadvantages
MBaaS
Disadvantages
http://stackoverflow.com/q/24648784/16587
MBaaS
Disadvantages
MBaaS
Disadvantages
MBaaS
Disadvantages
MBaaS
Wrap-up
Use For Validation
NOT FOR PRODUCTION*
</>
AngularJS
AngularJS
Routing
Services
ControllerView
AngularJS
Routing
Controller
$stateProvider.state(‘userDetail’, {
url:”/users/:userId”,
controller:”UserCtrl”,
templateUrl:”templates/userdetails.html”
})
http://myexample.com/#/users/1
AngularJS
Routing
Controller
$state.go(‘user’, {userId: 1});
http://myexample.com/#/users/1
AngularJS
Services
Controller
.controller(‘UserCtrl,
[‘$stateParams’, ‘UserService’,
function($stateParams, UserService) {
var user = UserService.get($stateParams.userId)
}
]);
AngularJS
Services
Controller
var user = UserService.get($stateParams.userId)
$scope.user = user;
AngularJS
What’s Scope?
AngularJS
Scope
Services
ControllerView
AngularJS
ControllerView
Two-Way Databinding
Ionic
Ionic
</>
CSS Icons
Cross Platform
Ionic</>
Cross Platform
Ionic</>
Cross Platform
Ionic
</>
CSS Icons
CSS
Cross Platform
Ionic</>
Cross Platform
http://ionicframework.com/docs/components/#range
Ionic
</>
CSS Icons
CSS
Cross Platform
HTML Directives
Ionic
Cross Platform
Directives
<ion-list ng-controller=“MyCtrl”
show-delete=“shouldShowDelete”
show-reorder=“shouldShowReorder”
can-swipe=“listCanSwipe”>
<ion-item ng-repeat="item in items">
Hello, {{item}}!
</ion-item>
</ion-list>
Ionic
Cross Platform
Directives
app.controller('MyCtrl', function($scope) {
$scope.shouldShowDelete = false;
$scope.shouldShowReorder = false;
$scope.listCanSwipe = true
});
http://ionicframework.com/docs/api/directive/ionList/
Ionic
Custom Mobile JavaScript
$ionicLoading.show()
Ionic
Custom Mobile JavaScript
$ionicLoading.show()
onHold()
Ionic
Custom Mobile JavaScript
$ionicLoading.show()
onHold()
onSwipe()
Ionic
Custom Mobile JavaScript
$ionicLoading.show()
onHold()
onSwipe()
onSwipeLeft()
Ionic
Custom Mobile JavaScript
$ionicLoading.show()
onHold()
onSwipe()
onSwipeLeft()
Ionic
Custom Mobile JavaScript
$ionicLoading.show()
onHold()
onSwipe()
onSwipeLeft()
and more…
http://ionicframework.com/docs/api/
Walkthrough/Demo
$ cd myApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios
Questions?
credit: The New Yorker