1. Building Mobile Apps
Quickly with Ionic
George Stocker

2. @gortok

3. Thank Our Sponsors without whom Today is not Possible
Platinum
Bronze
Silver

4. 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

5. </>

6. </>
Mobile
App
Development

7. Objective-C
Cocoa
Java
Android SDK

8. Cordova
Objective-C
Cocoa
Java
Android SDK

9. Ionic
Cordova
Objective-C
Cocoa
Java
Android SDK

10. </>
Data Persistence

11. Two and a Half… Options.

12. HTML 5 LocalStorage

13. HTML5 LocalStorage
var user = {
name: 'George',
url: ‘http://georgestocker.com‘
};
localStorage.setItem(‘user’, JSON.stringify(user));
Adding Data

14. HTML5 LocalStorage
var user = JSON.parse(localStorage.getItem(‘user’));
Retrieving Data

15. HTML5 LocalStorage
Advantages

16. HTML5 LocalStorage
Advantages
> window.localStorage
<- Storage {length:0}

17. HTML5 LocalStorage
Disadvantages
5 Megabyte Limit

18. <!-- config.xml -->
<widget ...>
<preference name="BackupWebStorage" value="
</widget>
source: http://learn.ionicframework.com/formulas/localstorage/
HTML5 LocalStorage
Disadvantages

19. HTML5 LocalStorage
Disadvantages

20. SQLite

21. Sqlite
Advantages

22. Sqlite
Advantages
var query = "SELECT * FROM people WHERE id = ?";
$cordovaSQLite.execute(db, query, [id]).then(funct
//do something
});

23. Sqlite
Source: MPA Student Life Blog
Advantages

24. Sqlite
Disadvantages
This space intentionally left blank.

25. Mobile Backend as a Service
(MBaaS)

26. MBaaS
georgestocker.com/2015/04/03/mbaas-where-are-they-now/

27. MBaaS
georgestocker.com/2015/04/03/mbaas-where-are-they-now/
TL;DR
It depends

28. MBaaS

29. MBaaS

30. MBaaS

31. MBaaS

32. MBaaS
Advantages

33. MBaaS
Disadvantages

34. MBaaS
Disadvantages

35. MBaaS
Disadvantages

36. MBaaS
Disadvantages
http://stackoverflow.com/q/24648784/16587

37. MBaaS
Disadvantages

38. MBaaS
Disadvantages

39. MBaaS
Disadvantages

40. MBaaS
Wrap-up
Use For Validation
NOT FOR PRODUCTION*

41. </>
AngularJS

42. AngularJS
Routing
Services
Controller
View

43. AngularJS
Routing
Controller
$stateProvider.state(‘userDetail’, {
url:”/users/:userId”,
controller:”UserCtrl”,
templateUrl:”templates/userdetails.html”
})
http://myexample.com/#/users/1

44. AngularJS
Routing
Controller
$state.go(‘user’, {userId: 1});
http://myexample.com/#/users/1

45. AngularJS
Services
Controller
.controller(‘UserCtrl,
[‘$stateParams’, ‘UserService’,
function($stateParams, UserService) {
var user = UserService.get($stateParams.userId)
}
]);

46. AngularJS
Services
Controller
var user = UserService.get($stateParams.userId)
$scope.user = user;

47. AngularJS
What’s Scope?

48. AngularJS
Scope
Services
Controller
View

49. AngularJS
Controller
View
Two-Way Databinding

50. Ionic

51. Ionic
</>
CSS Icons
Cross Platform

52. Ionic</>
Cross Platform

53. Ionic</>
Cross Platform

54. Ionic
</>
CSS Icons
CSS
Cross Platform

55. Ionic</>
Cross Platform
http://ionicframework.com/docs/components/#range

56. Ionic
</>
CSS Icons
CSS
Cross Platform
HTML Directives

57. 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>

58. 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/

59. Ionic
Custom Mobile JavaScript
$ionicLoading.show()

60. Ionic
Custom Mobile JavaScript
$ionicLoading.show()
onHold()

61. Ionic
Custom Mobile JavaScript
$ionicLoading.show()
onHold()
onSwipe()

62. Ionic
Custom Mobile JavaScript
$ionicLoading.show()
onHold()
onSwipe()
onSwipeLeft()

63. Ionic
Custom Mobile JavaScript
$ionicLoading.show()
onHold()
onSwipe()
onSwipeLeft()

64. Ionic
Custom Mobile JavaScript
$ionicLoading.show()
onHold()
onSwipe()
onSwipeLeft()
and more…
http://ionicframework.com/docs/api/

65. Walkthrough/Demo
$ cd myApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios

66. Questions?
credit: The New Yorker