Downloaded 23 times
![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);
});](https://image.slidesharecdn.com/from-idea-to-app-151203210653-lva1-app6891/75/From-Idea-to-App-or-How-we-roll-at-Small-Town-Heroes-87-2048.jpg)
![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/](https://image.slidesharecdn.com/from-idea-to-app-151203210653-lva1-app6891/75/From-Idea-to-App-or-How-we-roll-at-Small-Town-Heroes-100-2048.jpg)
![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](https://image.slidesharecdn.com/from-idea-to-app-151203210653-lva1-app6891/75/From-Idea-to-App-or-How-we-roll-at-Small-Town-Heroes-101-2048.jpg)
![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](https://image.slidesharecdn.com/from-idea-to-app-151203210653-lva1-app6891/75/From-Idea-to-App-or-How-we-roll-at-Small-Town-Heroes-102-2048.jpg)
Uploaded byBramus Van Damme
From Idea to App (or “How we roll at Small Town Heroes”)
The document outlines the process of transforming an app idea into a working product, detailing evaluations, planning, and development for both iOS and Android platforms. It emphasizes concepts like minimum viable product (MVP), wireframes, hybrid applications, and continuous integration techniques. The text also covers tools, resources, and methodologies for effective app development and distribution.
More Related Content
Similar to From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)
- 1. FROM IDEATO APP orhow we roll at Small Town Heroes @bramus | Opleiding Elektronica-ICT, Odisee | 02/12/15
- 2.
- 3. All work, noand play #ikdoeict SmallTown Heroes I’m a former lecturer Web & Mobile, now into breaking builds at Small Town Heroes
- 7. So you havethis great idea for an app We all have great ideas!
- 8.
- 9. So you havethis great idea for an app Slideshare Search: “From idea to app”
- 10. So you havethis 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.
- 12. FROM IDEATO APP orhow we roll at Small Town Heroes @bramus | Opleiding Elektronica-ICT, Odisee | 02/12/15
- 13. FROM IDEATO APP orhow we roll at Small Town Heroes @bramus | Opleiding Elektronica-ICT, Odisee | 02/12/15
- 14. FROM WIREFRAMESTO APP orhow we roll at Small Town Heroes @bramus | Opleiding Elektronica-ICT, Odisee | 02/12/15
- 15. FROM MVPTO APP orhow we roll at Small Town Heroes @bramus | Opleiding Elektronica-ICT, Odisee | 02/12/15
- 16. MVP = MinimalViable Product So you want to build your MVP
- 17.
- 18. https://adactio.com/journal/4437 If you’re lookingfor 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) Ifyou’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.
- 22.
- 23.
- 24.
- 25.
- 26. Create an archiveof your App to upload to Apple XCode
- 27.
- 28.
- 29. http://appreviewtimes.com/ Average App StoreReviewTimes
- 30. Your app inthe App Store, after approval. App Store
- 31. Even a smalltypo 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.
- 34.
- 35. You know, likein “Programmeren 1” Java
- 36.
- 37.
- 38.
- 39.
- 40. Your App, inthe Play Store Play Store
- 41. Lather, Rinse, Repeat Soyou want to build your MVP for Platform X
- 42.
- 43. What if Itold you …
- 44. Hybrid Apps Write once,run anywhere
- 45.
- 46. → If youknow HTML/CSS/JavaScript, you know how to build a mobile app HTML You, after “Webtechnieken”
- 47. → If youknow AngularJS, you know how Ionic works CSS You, after “Webtechnieken”
- 48. → If youcan read, you know Ionic JavaScript You, after “Webscripten1”
- 49.
- 50. Video not playing?https://youtu.be/4AhOKtXowgs
- 51. App development time? (fromno code to working prototype in Simulator)
- 52. App development time? (fromno code to working prototype in Simulator)
- 53. App development time? (fromno code to working prototype in Simulator)
- 54.
- 55. App development time (inhours)
- 56. How is thatpossible?
- 57.
- 58.
- 59. Ionic = CSSFramework http://ionicframework.com/docs/components/
- 60. Ionic = CSSFramework Cross-Platform CSS, yay!
- 61. Ionic = Builton top of AngularJS https://angularjs.org/
- 62. Ionic = JavaScriptComponents Ionic Component = Angular directive + behavior (+ Angular delegate)
- 63. Ionic CLI: ionicserve $ ionic serve ← with livereload
- 64. → If youknow HTML/CSS/JavaScript, you know how to build a mobile app Ionic CLI: ionic serve
- 65.
- 66.
- 67.
- 68. Final App =Multiple Seasons of 24
- 69.
- 70. http://appreviewtimes.com/ Average App StoreReviewTimes
- 71.
- 72.
- 73. What if Itold you …
- 74.
- 75.
- 76. What if Itold you …
- 77. De allesweter (Small TownHeroes)
- 78. Video not playing?https://youtu.be/gtSxQ9E9jVA
- 79. What if Itold you …
- 80. Native + Web Bestof both worlds
- 81. 1. Host someof 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 withJockeyJS 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 anAPI and feed your app with it Feed your app the data it needs, whenever you want
- 89.
- 90.
- 96. 3. Use FeatureFlags 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 apprequest the settings on load
- 99. 4. Swizzling Monkey Patchyour 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 extraJS/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 youcan read, you know Ionic
- 104. Write unit tests (andalso execute them using a pre-commit hook)
- 105. Write unit tests (andalso 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 differentBUILD_ENV’s
- 109. Continuous Integration withCircle 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 withCircle CI https://circleci.com/
- 113.
- 114. Distributing beta buildsusing Fabric https://www.fabric.io/
- 115. Distributing beta buildsusing Fabric
- 116. Distributing production buildsusing fastlane https://fastlane.tools/
- 117.
- 118. FROM IDEATO APP orhow we roll at Small Town Heroes @bramus | Opleiding Elektronica-ICT, Odisee | 02/12/15
- 119.