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.

From Idea to App (or “How we roll at Small Town Heroes”)

Guestlecture I gave to the students ICT at Odisee, explaining the app development process, how we do certain things at Small Town Heroes, and how we implement QA throughout our process.

From Idea to App (or “How we roll at Small Town Heroes”)

  1. 1. FROM IDEATO APP or how we roll at Small Town Heroes @bramus | Opleiding Elektronica-ICT, Odisee | 02/12/15
  2. 2. Yo! @bramus https://www.bram.usBram(us)Van Damme
  3. 3. All work, no and play #ikdoeict SmallTown Heroes I’m a former lecturer Web & Mobile, now into breaking builds at Small Town Heroes
  4. 4. So you have this great idea for an app We all have great ideas!
  5. 5. What now?
  6. 6. So you have this great idea for an app Slideshare Search: “From idea to app”
  7. 7. So you have this great idea for an app • Evaluate your idea • Is it a good idea? • Will it help people? • How’s the competition doing? • Is there a market? • Plan your app • Features • Define the MVP • Design • App Flow (Wireframes)
  8. 8. http://yvonnelao.com/2011/04/28/mobile-app-user-flow-chart/ Resulting Wireframes
  9. 9. FROM IDEATO APP or how we roll at Small Town Heroes @bramus | Opleiding Elektronica-ICT, Odisee | 02/12/15
  10. 10. FROM IDEATO APP or how we roll at Small Town Heroes @bramus | Opleiding Elektronica-ICT, Odisee | 02/12/15
  11. 11. FROM WIREFRAMESTO APP or how we roll at Small Town Heroes @bramus | Opleiding Elektronica-ICT, Odisee | 02/12/15
  12. 12. FROM MVPTO APP or how we roll at Small Town Heroes @bramus | Opleiding Elektronica-ICT, Odisee | 02/12/15
  13. 13. MVP = Minimal Viable Product So you want to build your MVP
  14. 14. What now?
  15. 15. https://adactio.com/journal/4437 If you’re looking for the more honest, truthful answer to pretty much any question on web design and usability, here it is: It depends. It Depends (TM)
  16. 16. https://adactio.com/journal/4437 It Depends (TM) If you’re looking for the more honest, truthful answer to pretty much any question on web design and usability, here it is: It depends.
  17. 17. XCode, Objective-C / Swift, and the App Store So you want to build your MVP for iOS
  18. 18. https://developer.apple.com/programs/enroll/ Apple Developer License
  19. 19. https://developer.apple.com/programs/enroll/ Apple Developer License
  20. 20. https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html Objective-C
  21. 21. https://developer.apple.com/swift/ Swift
  22. 22. https://developer.apple.com/xcode/ XCode
  23. 23. Create an archive of your App to upload to Apple XCode
  24. 24. https://itunesconnect.apple.com/ iTunes Connect
  25. 25. https://itunesconnect.apple.com/ iTunes Connect
  26. 26. http://appreviewtimes.com/ Average App Store ReviewTimes
  27. 27. Your app in the App Store, after approval. App Store
  28. 28. Even a small typo fix will take up to 7 days. NewVersion?
  29. 29. Android SDK, Java, and the Play Store So you want to build your MVP for Android
  30. 30. http://developer.android.com/distribute/googleplay/start.html Google Play Developer License
  31. 31. http://developer.android.com/distribute/googleplay/start.html Google Play Developer License
  32. 32. You know, like in “Programmeren 1” Java
  33. 33. http://developer.android.com/tools/studio/index.html Android Studio
  34. 34. https://play.google.com/apps/publish/ Google Play Developer Console
  35. 35. https://play.google.com/apps/publish/ Google Play Developer Console
  36. 36. http://androidreviewtimes.xormedia.com/ Average Play Store ReviewTimes
  37. 37. Your App, in the Play Store Play Store
  38. 38. Lather, Rinse, Repeat So you want to build your MVP for Platform X
  39. 39. Native Apps Write,Test, Build
  40. 40. What if I told you …
  41. 41. Hybrid Apps Write once, run anywhere
  42. 42. Apache Cordova https://cordova.apache.org/
  43. 43. → If you know HTML/CSS/JavaScript, you know how to build a mobile app HTML You, after “Webtechnieken”
  44. 44. → If you know AngularJS, you know how Ionic works CSS You, after “Webtechnieken”
  45. 45. → If you can read, you know Ionic JavaScript You, after “Webscripten1”
  46. 46. EV-Point (3RDS)
  47. 47. Video not playing? https://youtu.be/4AhOKtXowgs
  48. 48. App development time? (from no code to working prototype in Simulator)
  49. 49. App development time? (from no code to working prototype in Simulator)
  50. 50. App development time? (from no code to working prototype in Simulator)
  51. 51. Here’s a hint:
  52. 52. App development time (in hours)
  53. 53. How is that possible?
  54. 54. Ionic Framework http://ionicframework.com/
  55. 55. Ionic Framework http://ionicframework.com/
  56. 56. Ionic = CSS Framework http://ionicframework.com/docs/components/
  57. 57. Ionic = CSS Framework Cross-Platform CSS, yay!
  58. 58. Ionic = Built on top of AngularJS https://angularjs.org/
  59. 59. Ionic = JavaScript Components Ionic Component = Angular directive + behavior (+ Angular delegate)
  60. 60. Ionic CLI: ionic serve $  ionic  serve ← with livereload
  61. 61. → If you know HTML/CSS/JavaScript, you know how to build a mobile app Ionic CLI: ionic serve
  62. 62. Cordova Plugins https://cordova.apache.org/plugins/
  63. 63. Jackpot, Right?!
  64. 64. Nope! (citation needed)
  65. 65. Final App = Multiple Seasons of 24
  66. 66. App Speed?
  67. 67. http://appreviewtimes.com/ Average App Store ReviewTimes
  68. 68. Bootstrapitis http://www.novolume.co.uk/blog/all-websites-look-the-same/
  69. 69. What now?
  70. 70. What if I told you …
  71. 71. iOS:WKWebView (Planned in Cordova 5)
  72. 72. Android: CrossWalk https://crosswalk-project.org/
  73. 73. What if I told you …
  74. 74. De allesweter (Small Town Heroes)
  75. 75. Video not playing? https://youtu.be/gtSxQ9E9jVA
  76. 76. What if I told you …
  77. 77. Native + Web Best of both worlds
  78. 78. 1. Host some of your content online Local HTML vs. Online HTML
  79. 79. a. Hybrid App: Point to online URL ← Online FAQ
  80. 80. b. Native App: Use WebViews Host some of your views online so that you can change it anytime you want.
  81. 81. Memory Game = HTML We embed this HTML game in a webview contained in the KetnetJr App
  82. 82. Native-Webview Communication with JockeyJS https://github.com/tcoulter/jockeyjs // Send an event to JavaScript, passing a payload. // payload can be an NSDictionary or NSArray, or anything that is serializable to JSON. // It can be nil. [Jockey send:@"event-name" withPayload:payload toWebView:webView]; // If you want to send an event and also execute code within the iOS app when all // JavaScript listeners have finished processing. [Jockey send:@"event-name" withPayload:payload toWebView:webView perform:^{ // Respond to callback. }]; // Listen for an event from iOS and log the payload. Jockey.on("event-name", function(payload) { console.log(payload); });
  83. 83. 2. Build an API and feed your app with it Feed your app the data it needs, whenever you want
  84. 84. ZAPP TEKENAPP
  85. 85. ZAPP TEKENAPP
  86. 86. 3. Use Feature Flags Build it, activate it later
  87. 87. Example div(ng-switch="'featureInvitefriends' | setting : false") div(ng-switch-when="false") .item.item-divider .item-info(ng-bind-html="'CREATE_CHANNEL.SHARE.EXPLANATION' | translate") a.item.item-icon-left(ng-click="doShareGroup(id, title, share_url)") i.icon.icon-add | {{ 'CREATE_CHANNEL.SHARE.LABEL' | translate }} div(ng-switch-when="true") .item.item-divider .item-info(ng-bind-html="'CREATE_CHANNEL.INVITE.EXPLANATION' | translate") .item.item-divider ion-item.friend(ng-repeat="friend in friends.list", ng-click="doInvite(friend)") img(ng-src="{{ friend.thumbnailURL }}") .name {{ friend.firstName }} {{ friend.lastName }} Let your views show or not show a feature depending on a setting
  88. 88. Example Let your app request the settings on load
  89. 89. 4. Swizzling Monkey Patch your app on the fly
  90. 90. Native: Method Swizzling #import #import "UIViewController+Logging.h" @implementation UIViewController (Logging) + (void)load { static dispatch_once_t once_token; dispatch_once(&once_token, ^{ SEL viewWillAppearSelector = @selector(viewDidAppear:); SEL viewWillAppearLoggerSelector = @selector(logged_viewDidAppear:); Method originalMethod = class_getInstanceMethod(self, viewWillAppearSelector); Method extendedMethod = class_getInstanceMethod(self, viewWillAppearLoggerSelector); method_exchangeImplementations(originalMethod, extendedMethod); }); } - (void) logged_viewDidAppear:(BOOL)animated { [self logged_viewDidAppear:animated]; NSLog(@"logged view did appear for %@", [self class]); } @end http://spin.atomicobject.com/2014/12/30/method-swizzling-objective-c/
  91. 91. Hybrid: Load extra JS/CSS var loadScripts = function(array, callback) { var loader = function(src, handler) { var script = document.createElement('script'); script.src = src; script.onload = script.onreadystatechange = function() { script.onreadystatechange = script.onload = null; handler(); } var head = document.getElementsByTagName('head')[0]; (head || document.body).appendChild(script); }; (function() { if (array.length!=0) { loader(array.shift(), arguments.callee); } else { callback && callback(); } })(); }; http://stackoverflow.com/a/1867135/2076595
  92. 92. Angular/Ionic: Decorate it angular.module('ionHeaderBarTapOverride', []) // Add our custom tapToScroll implementation on ionHeaderBar (with a higher priority) .directive('ionHeaderBar', ['$ionicScrollDelegate', function($ionicScrollDelegate) { return { restrict: 'E', priority: 100, link: function($scope, $element, $attr) { // YOUR CODE HERE } }; }]) // Remove Ionic's tapToScroll implementation from ionHeaderBar .config(function($provide) { $provide.decorator('ionHeaderBarDirective', ['$delegate', function($delegate) { $delegate.shift(); // It's the first one. Delete it return $delegate; }]); }); http://stackoverflow.com/a/18425418/2076595 http://stackoverflow.com/a/23209542/2076595
  93. 93. → If you can read, you know Ionic
  94. 94. Write unit tests (and also execute them using a pre-commit hook)
  95. 95. Write unit tests (and also execute them using a pre-commit hook)
  96. 96. Use Git https://git-scm.com/ | https://github.com/
  97. 97. Git Branching Strategy • Develop on master • Result = “beta”or “staging” builds • → Send these to your beta testers • Promote master to release • Result = “production” or “appstore” builds • → Send these to the App Store / Play Store / …
  98. 98. Branches have different BUILD_ENV’s
  99. 99. Continuous Integration with Circle CI https://circleci.com/
  100. 100. Continuous Integration: how? → It’s one big hack (Combination of circle.yml, Makefile, bash scripts, build hooks, etc) but it works # Inject settings for BUILD_ENV into config files - BUILD_ENV=$(ENVIRONMENT) grunt string-replace:settings # Compile src into www, with staging environment - BUILD_ENV=staging grunt build ## Build Android - BUILD=$CIRCLE_BUILD_NUM BUNDLE_ID="be.smalltownheroes.vrt.allesweter.$ENVIRONMENT" BUILD_ENV=$(ENVIRONMENT) make android - ./scripts-ci/archive_apk.sh staging - ./scripts-ci/distribute_apk.sh # Build IOS - BUILD=$CIRCLE_BUILD_NUM BUNDLE_ID="be.smalltownheroes.vrt.allesweter.$ENVIRONMENT" BUILD_ENV=$(ENVIRONMENT) make ios - ./scripts-ci/archive_ipa.sh staging - ./scripts-ci/distribute_ipa.sh staging
  101. 101. Continuous Integration: how? → It’s one big hack (Combination of circle.yml, Makefile, bash scripts, build hooks, etc) but it works # Inject build number and bundle id into config.xml APP_BUILD=$(BUILD) APP_ID=$(BUNDLE_ID) node scripts-ci/update_config_xml.js # Install Ionic Platforms and Plugins rm -rf platforms rm -rf plugins ionic platform add android # Inject Crashlytics ./scripts-ci/crashlytics-android.sh # Build it ANDROID_NAME="$(DISPLAY_NAME)" ionic build android --device --release
  102. 102. Continuous Integration with Circle CI https://circleci.com/
  103. 103. CI Build Artifacts https://circleci.com/
  104. 104. Distributing beta builds using Fabric https://www.fabric.io/
  105. 105. Distributing beta builds using Fabric
  106. 106. Distributing production builds using fastlane https://fastlane.tools/
  107. 107. Thank you.
  108. 108. FROM IDEATO APP or how we roll at Small Town Heroes @bramus | Opleiding Elektronica-ICT, Odisee | 02/12/15
  109. 109. bramus@smalltownheroes.be www.smalltownheroes.be @townheroes

×