Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
BetterContent
Benny Weingarten-Gabbay
gardenofwine
gardenofwine@gmail.com
Once upon a time,
there was an app
Home Screen
Title:
“MY ACTIVITY”
One day, the PM said,
“Lets change the title”
Home Screen
Title:
“My RECENT ACTIVITY”
Inefficiency
Developer
Product Manager
Marketing Manager
Legal Advisor
UX specialist Designer
Better Efficiency
Developer
Product Manager
Marketing Manager
Legal Advisor
UX specialist Designer
Runtime editors
Mac Apps
Spark Inspector
Runtime editors
Native plugins
Runtime editors
A/B testing frameworks
Requirements
● Easy & Fun to use
● Easy installation
● Little/No configuration
● Public & Private access
● Free
● Open sou...
Enter: BetterContent
Immediately,
at runtime
Buy
now!
Buy
now!
bettercontent.herokuapp.com
Buy
now!
Immediately,
at runtime
Buy
now!
DEMO
BetterContent
Buy
now!
BetterContent
Buy
now!
Buy
now!
Free Hosting Services
Websocket Implementation
VS
Tool Architecture
Buy
now!
1. Serialized NSDictionary
2. Modification JSON
Native app
Server
web client
Buy
now!
Native Architecture
Scanner
A repeating NSTimer scanner
Native Architecture
Scanner
NSDictionary
“0x7cea4590”
“0x7a0b9cf0”
“0x79e7bd70”
“0x79ea0d90”
Native Architecture
Scanner
NSDictionary
“0x7cea4590”
“0x7a0b9cf0”
“0x79e7bd70”
“0x79ea0d90”
Weak References*
*MAZeroingWe...
Native Architecture
Hook for app start
+ (void)load {
[[NSNotificationCenter defaultCenter]
addObserver:self
selector:@sel...
@implementation UILabel (BTCLabel)
- (BOOL)btcIsSerializable{
return YES;
}
- (NSString *)btcClass{
return @"label";
}
Nat...
Native Architecture
Serializer
@implementation UILabel (BTCLabel)
- (NSDictionary *)btcAttributes{
return @{@"text": self....
Native packaging
VS
Server Architecture
● Node.js, gulp build system
● based on heroku-examples/node-ws-test
● Simple websocket protocol
● Mos...
Server Architecture
var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({server: server});
wss.on('c...
Web Client Architecture
● One big js file
● Separate component for each native class
● Currently only supports label editi...
Web Client Architecture
Parser
BetterContent.Components.label = {
draw: function(component, element){
setAttributesOnEleme...
The Future
● Additional components
● Additional attributes
● Native API for app control over
functionality
● Heroku templa...
Content Management
The Holy Grail
hands free content management
1. Use BetterContent to scrape content
2. Build a content document
3. Native ...
The Holy Grail
Screen 1 Screen 2 .strings file
1. Scrape content 2. Create Content Document
The Holy Grail
4. App downloads updates
Copy
3. Copy Content Document
.strings
file
BetterContent
http://bettercontent.herokuapp.com
Benny Weingarten-Gabbay
gardenofwine
gardenofwine@gmail.com
Mobile app real-time content modifications using websockets
Mobile app real-time content modifications using websockets
Nächste SlideShare
Wird geladen in …5
×

Mobile app real-time content modifications using websockets

669 Aufrufe

Veröffentlicht am

We are happy to host Benny Weingarten-Gabbay, Senior Software Engineer at eBay at our offices.
Benny presents BetterContent, a tool that allows editing of an iOS mobile app in runtime, in a fun and easy way.

Read more on our DevBlog:
https://connect.liveperson.com/community/developers/blog/2015/03/26/mobile-app-real-time-content-modifications-using-websockets

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Mobile app real-time content modifications using websockets

  1. 1. BetterContent Benny Weingarten-Gabbay gardenofwine gardenofwine@gmail.com
  2. 2. Once upon a time, there was an app Home Screen Title: “MY ACTIVITY”
  3. 3. One day, the PM said, “Lets change the title” Home Screen Title: “My RECENT ACTIVITY”
  4. 4. Inefficiency Developer Product Manager Marketing Manager Legal Advisor UX specialist Designer
  5. 5. Better Efficiency Developer Product Manager Marketing Manager Legal Advisor UX specialist Designer
  6. 6. Runtime editors Mac Apps Spark Inspector
  7. 7. Runtime editors Native plugins
  8. 8. Runtime editors A/B testing frameworks
  9. 9. Requirements ● Easy & Fun to use ● Easy installation ● Little/No configuration ● Public & Private access ● Free ● Open source
  10. 10. Enter: BetterContent Immediately, at runtime Buy now! Buy now!
  11. 11. bettercontent.herokuapp.com Buy now! Immediately, at runtime Buy now!
  12. 12. DEMO
  13. 13. BetterContent Buy now!
  14. 14. BetterContent Buy now! Buy now!
  15. 15. Free Hosting Services
  16. 16. Websocket Implementation VS
  17. 17. Tool Architecture Buy now! 1. Serialized NSDictionary 2. Modification JSON Native app Server web client Buy now!
  18. 18. Native Architecture Scanner A repeating NSTimer scanner
  19. 19. Native Architecture Scanner NSDictionary “0x7cea4590” “0x7a0b9cf0” “0x79e7bd70” “0x79ea0d90”
  20. 20. Native Architecture Scanner NSDictionary “0x7cea4590” “0x7a0b9cf0” “0x79e7bd70” “0x79ea0d90” Weak References* *MAZeroingWeakRef
  21. 21. Native Architecture Hook for app start + (void)load { [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(startEngine) name:UIApplicationDidFinishLaunchingNotification object:nil]; }
  22. 22. @implementation UILabel (BTCLabel) - (BOOL)btcIsSerializable{ return YES; } - (NSString *)btcClass{ return @"label"; } Native Architecture Serializer
  23. 23. Native Architecture Serializer @implementation UILabel (BTCLabel) - (NSDictionary *)btcAttributes{ return @{@"text": self.btcSafeText, @"font": @{ @"pointSize" : @(self.font.pointSize) @"color": [self btcHexColor]}}; } - (void)updateWithComponent:(BTCComponent *)newComponent{ self.text = [newComponent.attributes objectForKey:@"text"]; }
  24. 24. Native packaging VS
  25. 25. Server Architecture ● Node.js, gulp build system ● based on heroku-examples/node-ws-test ● Simple websocket protocol ● Mostly a data pipe between Native App and web app.
  26. 26. Server Architecture var WebSocketServer = require('ws').Server; var wss = new WebSocketServer({server: server}); wss.on('connection', function (ws) { ws.on('message', function (data, flags) { var message = JSON.parse(data); if (message.type === 'register') { ... } if (message.type === 'ui') { ... } if (message.type === 'ping') { ... } }); });
  27. 27. Web Client Architecture ● One big js file ● Separate component for each native class ● Currently only supports label editing
  28. 28. Web Client Architecture Parser BetterContent.Components.label = { draw: function(component, element){ setAttributesOnElement(component.attributes, element); // text, font element.setAttribute('contenteditable', true); element.addEventListener("input", function(event) { var element = event.srcElement; var diffJSON = [{ 'key': element.getAttribute('key'), 'attributes': {'text': element.innerText}}]; BetterContent.ws.send(diffJSON); }, false); } }
  29. 29. The Future ● Additional components ● Additional attributes ● Native API for app control over functionality ● Heroku templates ● iOS Framework in addition to pod ● Android support
  30. 30. Content Management
  31. 31. The Holy Grail hands free content management 1. Use BetterContent to scrape content 2. Build a content document 3. Native app uses said document for content 4. Native app updates document from server 5. Document is editable from the server
  32. 32. The Holy Grail Screen 1 Screen 2 .strings file 1. Scrape content 2. Create Content Document
  33. 33. The Holy Grail 4. App downloads updates Copy 3. Copy Content Document .strings file
  34. 34. BetterContent http://bettercontent.herokuapp.com Benny Weingarten-Gabbay gardenofwine gardenofwine@gmail.com

×