Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Building Mobile Apps
Quickly with Ionic
George 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
•...
</>
</>
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.strin...
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="
</widget>
source: http://learn.ionicframework...
HTML5 LocalStorage
Disadvantages
SQLite
Sqlite
Advantages
Sqlite
Advantages
var query = "SELECT * FROM people WHERE id = ?";
$cordovaSQLite.execute(db, query, [id]).then(funct
//do...
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
Controller
View
AngularJS
Routing
Controller
$stateProvider.state(‘userDetail’, {
url:”/users/:userId”,
controller:”UserCtrl”,
templateUrl...
AngularJS
Routing
Controller
$state.go(‘user’, {userId: 1});
http://myexample.com/#/users/1
AngularJS
Services
Controller
.controller(‘UserCtrl,
[‘$stateParams’, ‘UserService’,
function($stateParams, UserService) {...
AngularJS
Services
Controller
var user = UserService.get($stateParams.userId)
$scope.user = user;
AngularJS
What’s Scope?
AngularJS
Scope
Services
Controller
View
AngularJS
Controller
View
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=“shouldShowRe...
Ionic
Cross Platform
Directives
app.controller('MyCtrl', function($scope) {
$scope.shouldShowDelete = false;
$scope.should...
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/d...
Walkthrough/Demo
$ cd myApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios
Questions?
credit: The New Yorker
Upcoming SlideShare
Loading in …5
×

0

Share

Download to read offline

Building Cross Platform Mobile Apps Quickly with Ionic

Download to read offline

The talk I gave on Ionic at Nova Code Camp, April 18, 2015

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Building Cross Platform Mobile Apps Quickly with Ionic

  1. 1. Building Mobile Apps Quickly with Ionic George Stocker
  2. 2. @gortok
  3. 3. Thank Our Sponsors without whom Today is not Possible Platinum Bronze Silver
  4. 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. 5. </>
  6. 6. </> Mobile App Development
  7. 7. Objective-C Cocoa Java Android SDK
  8. 8. Cordova Objective-C Cocoa Java Android SDK
  9. 9. Ionic Cordova Objective-C Cocoa Java Android SDK
  10. 10. </> Data Persistence
  11. 11. Two and a Half… Options.
  12. 12. HTML 5 LocalStorage
  13. 13. HTML5 LocalStorage var user = { name: 'George', url: ‘http://georgestocker.com‘ }; localStorage.setItem(‘user’, JSON.stringify(user)); Adding Data
  14. 14. HTML5 LocalStorage var user = JSON.parse(localStorage.getItem(‘user’)); Retrieving Data
  15. 15. HTML5 LocalStorage Advantages
  16. 16. HTML5 LocalStorage Advantages > window.localStorage <- Storage {length:0}
  17. 17. HTML5 LocalStorage Disadvantages 5 Megabyte Limit
  18. 18. <!-- config.xml --> <widget ...> <preference name="BackupWebStorage" value=" </widget> source: http://learn.ionicframework.com/formulas/localstorage/ HTML5 LocalStorage Disadvantages
  19. 19. HTML5 LocalStorage Disadvantages
  20. 20. SQLite
  21. 21. Sqlite Advantages
  22. 22. Sqlite Advantages var query = "SELECT * FROM people WHERE id = ?"; $cordovaSQLite.execute(db, query, [id]).then(funct //do something });
  23. 23. Sqlite Source: MPA Student Life Blog Advantages
  24. 24. Sqlite Disadvantages This space intentionally left blank.
  25. 25. Mobile Backend as a Service (MBaaS)
  26. 26. MBaaS georgestocker.com/2015/04/03/mbaas-where-are-they-now/
  27. 27. MBaaS georgestocker.com/2015/04/03/mbaas-where-are-they-now/ TL;DR It depends
  28. 28. MBaaS
  29. 29. MBaaS
  30. 30. MBaaS
  31. 31. MBaaS
  32. 32. MBaaS Advantages
  33. 33. MBaaS Disadvantages
  34. 34. MBaaS Disadvantages
  35. 35. MBaaS Disadvantages
  36. 36. MBaaS Disadvantages http://stackoverflow.com/q/24648784/16587
  37. 37. MBaaS Disadvantages
  38. 38. MBaaS Disadvantages
  39. 39. MBaaS Disadvantages
  40. 40. MBaaS Wrap-up Use For Validation NOT FOR PRODUCTION*
  41. 41. </> AngularJS
  42. 42. AngularJS Routing Services Controller View
  43. 43. AngularJS Routing Controller $stateProvider.state(‘userDetail’, { url:”/users/:userId”, controller:”UserCtrl”, templateUrl:”templates/userdetails.html” }) http://myexample.com/#/users/1
  44. 44. AngularJS Routing Controller $state.go(‘user’, {userId: 1}); http://myexample.com/#/users/1
  45. 45. AngularJS Services Controller .controller(‘UserCtrl, [‘$stateParams’, ‘UserService’, function($stateParams, UserService) { var user = UserService.get($stateParams.userId) } ]);
  46. 46. AngularJS Services Controller var user = UserService.get($stateParams.userId) $scope.user = user;
  47. 47. AngularJS What’s Scope?
  48. 48. AngularJS Scope Services Controller View
  49. 49. AngularJS Controller View Two-Way Databinding
  50. 50. Ionic
  51. 51. Ionic </> CSS Icons Cross Platform
  52. 52. Ionic</> Cross Platform
  53. 53. Ionic</> Cross Platform
  54. 54. Ionic </> CSS Icons CSS Cross Platform
  55. 55. Ionic</> Cross Platform http://ionicframework.com/docs/components/#range
  56. 56. Ionic </> CSS Icons CSS Cross Platform HTML Directives
  57. 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. 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. 59. Ionic Custom Mobile JavaScript $ionicLoading.show()
  60. 60. Ionic Custom Mobile JavaScript $ionicLoading.show() onHold()
  61. 61. Ionic Custom Mobile JavaScript $ionicLoading.show() onHold() onSwipe()
  62. 62. Ionic Custom Mobile JavaScript $ionicLoading.show() onHold() onSwipe() onSwipeLeft()
  63. 63. Ionic Custom Mobile JavaScript $ionicLoading.show() onHold() onSwipe() onSwipeLeft()
  64. 64. Ionic Custom Mobile JavaScript $ionicLoading.show() onHold() onSwipe() onSwipeLeft() and more… http://ionicframework.com/docs/api/
  65. 65. Walkthrough/Demo $ cd myApp $ ionic platform add ios $ ionic build ios $ ionic emulate ios
  66. 66. Questions? credit: The New Yorker

The talk I gave on Ionic at Nova Code Camp, April 18, 2015

Views

Total views

784

On Slideshare

0

From embeds

0

Number of embeds

24

Actions

Downloads

8

Shares

0

Comments

0

Likes

0

×