Broadsheet.ie 2.0

A talk on the Broadsheet.ie app for Xcake:labs

Transcript

1. The Long Overdue Update Tuesday 12 March 13
2. • A Brief History • Justification • Technical Mumbo Jumbo • Future • Questions Tuesday 12 March 13
3. • Software developer 14 years • Mainly ObjC now, but was PHP for a long time • Originally involved to ‘just’ set up the site (a single day of work he said) • Sucked in to maintain it and write posts • Do it out of the goodness of my soft heart And You Are...? Tuesday 12 March 13
4. • First released January 2011 • Used Three20 (yes, yes I’ve heard it all) • Spun out of another app that required WordPress integration • Dev time ~week • Generalised the library and released on GitHub as TTWordPress Brand New Retro Tuesday 12 March 13
5. Brand New Retro • A few updates in the first couple of months • Adding/Removing 2011 Election • Some bug fixing • Adding Flurry for some metrics • 20K downloads (http://karlmonaghan.com/ app-stats/stats.html? apple_identifier=413093424) • Dead since then despite bugs/feature requests Tuesday 12 March 13
6. What Do You Mean “You Weren’t Invited”? • From 1st February 2012 to 28th February 2013 2.3 million mobile visitors to the Broadsheet.ie website 1% 27% 1% 71% iOS Blackberry Android Windows Phone • Missing Android market in full effect Tuesday 12 March 13
7. We Don’t Usually Do This • iPhone 5 • Wanted to play around with a few libraries • No real metrics • Bug squashing • New features • Keeps me off the streets and out of trouble Tuesday 12 March 13
8. Meanwhile, in the backend • Website a WordPress blog (obviously) • API provided by the JSON API plugin (http://wordpress.org/extend/plugins/json- api/) • Own fork to provide some additional fields and clean up output (https://github.com/ kmonaghan/wp-json-api) Tuesday 12 March 13
9. { 1 status: "ok", 2 post: { 1 id: 206619, 2 type: "post", 3 slug: "fidelma-the-frape-tape", 4 url: "http://www.broadsheet.ie/2013/03/06/fidelma-the-frape-tape/", 5 status: "publish", 6 title: "Fidelma: The Frape Tape", 7 title_plain: "Fidelma: The Frape Tape", 8 content: "<p><span class='embed-youtube' style='text-align:center; display: block;'><iframe class='youtube-player' type='text/html' width='584' height='359' src='http://www.youtube.com/embed/ypBGI2_YXeo? version=3&#038;rel=1&#038;fs=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;wmode=transparent' frameborder='0'></ iframe></span></p> <p>Oh.</p> <p>Dear.</p> <p>Fine Gael Senator Fidelma Healy Eames at the oireachtas hearing on social media.</p> <p><del>Script by Chris Morris.</del></p> <p>Transcript to follow.</p> <p><strong>Thanks Oireachtas Retort</strong></p> <p>&nbsp;</ p> <p>&nbsp;</p> ", 9 excerpt: "Oh. Dear. Fine Gael Senator Fidelma Healy Eames at the oireachtas hearing on social media. Script by Chris Morris. Transcript to follow. Thanks Oireachtas Retort &nbsp; &nbsp;", 10 date: "2013-03-06 15:17:04", 11 modified: "2013-03-06 15:17:04", 12 categories: [], 13 tags: [], 14 author: {}, 15 comments: [], 16 attachments: [ ], 17 comment_count: 12, 18 comment_status: "open", 19 previous_title: "A Limerick A Day", 20 previous_url: "http://www.broadsheet.ie/2013/03/06/a-limerick-a-day-120/", 21 next_title: "The Damn Hipster Guide To Dublin", 22 next_url: "http://www.broadsheet.ie/2013/03/06/the-damn-hipster-guide-to-dublin/" 3 }, 4 previous_url: "http://www.broadsheet.ie/2013/03/06/a-limerick-a-day-120/", 5 next_url: "http://www.broadsheet.ie/2013/03/06/the-damn-hipster-guide-to-dublin/" } http://www.broadsheet.ie/2013/03/06/fidelma-the-frape- tape/?json=1 Tuesday 12 March 13
10. You May Like This • Post list much more image centric • Searchable • Navigate between posts from post screen • Comments are threaded • Change font size • Submit photos • Fullscreen mode Tuesday 12 March 13
11. Tuesday 12 March 13
12. All the Gestures! • Wanted to be able to do as much as possible without buttons • Can swipe between post list, a post and comments • Not completely obvious so put in help screens • Few seem to have read the help Tuesday 12 March 13
13. Ah Here •The view comments/make comments/ share controls is too well hidden •Inspired by Summly’s hidden buttons •Always available where your thumb is sitting •Quick access to everything you need Tuesday 12 March 13
14. Tuesday 12 March 13
15. Pull/Drag to load with a UIWebView • UIWebView is essentially a dynamically resizing UIScrollView • Your favourite Pull-to-refresh solution probably works out of the box • Dragging from the bottom on the other hand... Tuesday 12 March 13
16. Pull/Drag to load with a UIWebView • Don’t know the content size until fully loaded • Don’t know when the UIWebView will stop loading • Size will change as assets are loaded Tuesday 12 March 13
17. [self.view addSubview:self.loadNextView]; [self.view addSubview:self.loadPreviousView]; [self.view addSubview:self.webView]; • Add the next/previous UIViews first • Add the UIWebView which has a transparent background • This is so the scroll bar overlays our next/ previous UIViews Tuesday 12 March 13
18. self.scrollView = self.webView.scrollView; self.scrollView.delegate = self; [self.scrollView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew | NSKeyValueObservingOptionOld | NSKeyValueObservingOptionPrior context:NULL]; • Grab the UIWebView’s UIScrollView property • Set the delegate • Add an observer for changes to the content offset Tuesday 12 March 13
19. - (void) observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context: (void *)context { if ([keyPath isEqualToString:@"contentOffset"]) { if (self.scrollView.contentOffset.y == 0) { self.loadNextView.frame = CGRectMake(0, -50.0f, self.view.frame.size.width, 50.0f); self.loadPreviousView.frame = CGRectMake(0, self.view.frame.size.height, 320.0f, 50.0f); return; } if (self.scrollView.contentOffset.y < 0) { CGFloat offset = self.scrollView.contentOffset.y; if (offset < -50.0f) offset = -50.0f; self.loadNextView.frame = CGRectMake(0, 0 - (50.0f + offset) ,self.view.frame.size.width, 50.0f); } else if (self.view.frame.size.height > (self.scrollView.contentSize.height - self.scrollView.contentOffset.y)) { CGFloat top = (self.view.frame.size.height - (self.view.frame.size.height - (self.scrollView.contentSize.height - self.scrollView.contentOffset.y))); if (top < (self.view.frame.size.height - 75.0f)) top = (self.view.frame.size.height - 75.0f); self.loadPreviousView.frame = CGRectMake(0, top , self.view.frame.size.width, 50.0f); } } } Tuesday 12 March 13
20. • If the contentOffset is 0, set the y co- ordinate of the next UIView to be -height and for the previous UIView the height of the containing UIView if (self.scrollView.contentOffset.y == 0) { self.loadNextView.frame = CGRectMake(0, -50.0f, self.view.frame.size.width, 50.0f); self.loadPreviousView.frame = CGRectMake(0, self.view.frame.size.height, 320.0f, 50.0f); return; } Tuesday 12 March 13
21. • If the contentOffset is less than 0, set the y co-ordinate of the next UIView to be - (height + contentOffset) • If the contentOffset is greater than the height of the next UIView, y is be set to 0 Tuesday 12 March 13
22. if (self.scrollView.contentOffset.y < 0) { CGFloat offset = self.scrollView.contentOffset.y; if (offset < -self.loadNextView.frame.size.height) offset = -self.loadNextView.frame.size.height; self.loadNextView.frame = CGRectMake(0, 0 - (50.0f + offset), self.view.frame.size.width, self.loadNextView.frame.size.height); } Tuesday 12 March 13
23. • If the height of the containing frame is greater than the height of the contentSize less the contentOffset, set the y co- ordinate of the previous UIView to the difference between the frame height and the frame height less the difference between the contentSize and contentOffset Tuesday 12 March 13
24. else if (self.view.frame.size.height > (self.scrollView.contentSize.height - self.scrollView.contentOffset.y)) { CGFloat top = (self.view.frame.size.height - (self.view.frame.size.height - (self.scrollView.contentSize.height - self.scrollView.contentOffset.y))); if (top < (self.view.frame.size.height - self.loadPreviousView.frame.size.height)) top = (self.view.frame.size.height - self.loadPreviousView.frame.size.height); self.loadPreviousView.frame = CGRectMake(0, top, self.view.frame.size.width, self.loadPreviousView.frame.size.height); } Tuesday 12 March 13
25. • Both next and previous max out at their height - lets the user know that releasing will perform the action Tuesday 12 March 13
26. - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate { if (scrollView.contentOffset.y <= -50.0f) { [self loadNext]; } else if ((self.view.frame.size.height - self.loadPreviousView.frame.origin.y) >= 75.0f) { [self loadPrevious]; } } • The appropriate action is performed when the UIScrollView stops being dragged Tuesday 12 March 13
27. Using The App, literally minutes ago • 8,649 updates, 465 downloads • Minor spike in downloads (triple the average to an entire 90 on day of release) • 4,603 active users (92% returning) • 56,796 sessions (3:02 minutes a session) • 329,121 screen views (33K to 41K a weekday) • 91% using iOS 6 Tuesday 12 March 13
28. Sure Where Would You Get It? • https://github.com/kmonaghan/ KMWordPress • MIT Licensed • Love to hear from anyone that does use it Tuesday 12 March 13
29. Things That Look Like The Broadsheet.ie App • iPad version • Android and Windows Phone in development • Release date of “when they’re ready” Tuesday 12 March 13
30. Tuesday 12 March 13
31. Tuesday 12 March 13
32. • We want your submissions • Irish App of the Day • Interesting Jobs • broadsheet@broadsheet.ie Don’t Forget Tuesday 12 March 13
33. @karlmonaghan http://karlmonaghan.com http://github.com/kmonaghan Tuesday 12 March 13