Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Mobile app real-time content modifications using websockets

670 visualizaciones

Publicado el

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

Publicado en: Tecnología
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

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

×