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.

1. FROM IDEATO APP
or how we roll at Small Town Heroes
@bramus | Opleiding Elektronica-ICT, Odisee | 02/12/15

2. Yo!
@bramus https://www.bram.usBram(us)Van Damme

3. All work, no and play
#ikdoeict SmallTown Heroes
I’m a former lecturer Web & Mobile, now into breaking builds at Small Town Heroes

7. So you have this great idea for an app
We all have great ideas!

8. What now?

9. So you have this great idea for an app
Slideshare Search: “From idea to app”

10. 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)

11. http://yvonnelao.com/2011/04/28/mobile-app-user-flow-chart/
Resulting Wireframes

12. FROM IDEATO APP
or how we roll at Small Town Heroes
@bramus | Opleiding Elektronica-ICT, Odisee | 02/12/15

13. FROM IDEATO APP
or how we roll at Small Town Heroes
@bramus | Opleiding Elektronica-ICT, Odisee | 02/12/15

14. FROM WIREFRAMESTO APP
or how we roll at Small Town Heroes
@bramus | Opleiding Elektronica-ICT, Odisee | 02/12/15

15. FROM MVPTO APP
or how we roll at Small Town Heroes
@bramus | Opleiding Elektronica-ICT, Odisee | 02/12/15

16. MVP = Minimal Viable Product
So you want to build your MVP

17. What now?

18. 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)

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

20. XCode, Objective-C / Swift, and the App Store
So you want to build your MVP for iOS

21. https://developer.apple.com/programs/enroll/
Apple Developer License

22. https://developer.apple.com/programs/enroll/
Apple Developer License

23. https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html
Objective-C

24. https://developer.apple.com/swift/
Swift

25. https://developer.apple.com/xcode/
XCode

26. Create an archive of your App to upload to Apple
XCode

27. https://itunesconnect.apple.com/
iTunes Connect

28. https://itunesconnect.apple.com/
iTunes Connect

29. http://appreviewtimes.com/
Average App Store ReviewTimes

30. Your app in the App Store, after approval.
App Store

31. Even a small typo fix will take up to 7 days.
NewVersion?

32. Android SDK, Java, and the Play Store
So you want to build your MVP for Android

33. http://developer.android.com/distribute/googleplay/start.html
Google Play Developer License

34. http://developer.android.com/distribute/googleplay/start.html
Google Play Developer License

35. You know, like in “Programmeren 1”
Java

36. http://developer.android.com/tools/studio/index.html
Android Studio

37. https://play.google.com/apps/publish/
Google Play Developer Console

38. https://play.google.com/apps/publish/
Google Play Developer Console

39. http://androidreviewtimes.xormedia.com/
Average Play Store ReviewTimes

40. Your App, in the Play Store
Play Store

41. Lather, Rinse, Repeat
So you want to build your MVP for Platform X

42. Native Apps
Write,Test, Build

43. What if I told you …

44. Hybrid Apps
Write once, run anywhere

45. Apache Cordova
https://cordova.apache.org/

46. → If you know HTML/CSS/JavaScript, you know how to build a mobile app
HTML
You, after “Webtechnieken”

47. → If you know AngularJS, you know how Ionic works
CSS
You, after “Webtechnieken”

48. → If you can read, you know Ionic
JavaScript
You, after “Webscripten1”

49. EV-Point
(3RDS)

50. Video not playing? https://youtu.be/4AhOKtXowgs

51. App development time?
(from no code to working prototype in Simulator)

52. App development time?
(from no code to working prototype in Simulator)

53. App development time?
(from no code to working prototype in Simulator)

54. Here’s a hint:

55. App development time
(in hours)

56. How is that possible?

57. Ionic Framework
http://ionicframework.com/

58. Ionic Framework
http://ionicframework.com/

59. Ionic = CSS Framework
http://ionicframework.com/docs/components/

60. Ionic = CSS Framework
Cross-Platform CSS, yay!

61. Ionic = Built on top of AngularJS
https://angularjs.org/

62. Ionic = JavaScript Components
Ionic Component = Angular directive + behavior (+ Angular delegate)

63. Ionic CLI: ionic serve
$
ionic
serve
← with livereload

64. → If you know HTML/CSS/JavaScript, you know how to build a mobile app
Ionic CLI: ionic serve

65. Cordova Plugins
https://cordova.apache.org/plugins/

66. Jackpot, Right?!

67. Nope!
(citation needed)

68. Final App = Multiple Seasons of 24

69. App Speed?

70. http://appreviewtimes.com/
Average App Store ReviewTimes

71. Bootstrapitis
http://www.novolume.co.uk/blog/all-websites-look-the-same/

72. What now?

73. What if I told you …

74. iOS:WKWebView
(Planned in Cordova 5)

75. Android: CrossWalk
https://crosswalk-project.org/

76. What if I told you …

77. De allesweter
(Small Town Heroes)

78. Video not playing? https://youtu.be/gtSxQ9E9jVA

79. What if I told you …

80. Native + Web
Best of both worlds

81. 1. Host some of your content online
Local HTML vs. Online HTML

82. a. Hybrid App: Point to online URL
← Online FAQ

83. b. Native App: Use WebViews
Host some of your views online so that you can change it anytime you want.

86. Memory Game = HTML
We embed this HTML game in a webview contained in the KetnetJr App

87. 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);
});

88. 2. Build an API and feed your app with it
Feed your app the data it needs, whenever you want

89. ZAPP TEKENAPP

90. ZAPP TEKENAPP

96. 3. Use Feature Flags
Build it, activate it later

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

98. Example
Let your app request the settings on load

99. 4. Swizzling
Monkey Patch your app on the fly

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

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

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

103. → If you can read, you know Ionic

104. Write unit tests
(and also execute them using a pre-commit hook)

105. Write unit tests
(and also execute them using a pre-commit hook)

106. Use Git
https://git-scm.com/ | https://github.com/

107. 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 / …

108. Branches have different BUILD_ENV’s

109. Continuous Integration with Circle CI
https://circleci.com/

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

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

112. Continuous Integration with Circle CI
https://circleci.com/

113. CI Build Artifacts
https://circleci.com/

114. Distributing beta builds using Fabric
https://www.fabric.io/

115. Distributing beta builds using Fabric

116. Distributing production builds using fastlane
https://fastlane.tools/

117. Thank you.

118. FROM IDEATO APP
or how we roll at Small Town Heroes
@bramus | Opleiding Elektronica-ICT, Odisee | 02/12/15

119. bramus@smalltownheroes.be
www.smalltownheroes.be
@townheroes