An iOS App to tame Mongo DB

Devs at my company Sailthru wanted an easy to use interface to run Mongo DB queries when traveling - the web interface was not mobile friendly at all. Thus "DB Lookup"

This talk focuses on the process I used (lots of paper and pencil up front!), and shows how the app works. Due to security concerns some of the real user data was blurred - its not your eyes!

In the end, after really working through how the app should work, I present the final pencil sketches and the final app screens. You will see that they closely match.

Bottom line: think through what you're going to build, and only after you can see it on paper should you start coding!

This presentation was given to iOSoho on April 14th, 2014.

Transcript

1. iOS, meet MongoDB Actually db.collection.find()
2. Genesis - Primary Responsibility: Sailthru SDK for iOS • register user with Sailthru (for Push) • send tracking info • retrieve recommendations - Secondary • internal-use only software • proof of concept demonstrations
3. Objectives and Goals - Learn and leverage iOS7 • dynamic type (sizing) • every view portrait & landscape using auto layout • Storyboards, New Networking APIs, CollectionView • “Deference, Clarity and Depth” - Absolute Minimum Text Entry • email/password/security • query form reuse
4. Set Objectives and Goals Part 2 - Preserved Previous Learning • mimic the web interface - Problems or Plain Old Errors • plan for them at the beginning - It’s iOS, not HTML • Never forget!
5. Starting Point Choose your tools!
6. Starting Point Choose your tools!
7. Starting Point Choose your tools! Iterate!
8. Step 1: App Definition Define the high level architecture: - fixed left tab for Collection selection and management - one center view per selected collection, no limits on #, each has its own Query Builder (so concurrent, independent) - far right tab for Preferences, Delete Account, etc Sketched out each of the top level views Sketched out the Query View (the most complex view)
9. Step 2a: Final Paper View Flow
10. Step 2b: Xcode Storyboard
11. Step 3: Data Flow Sailthru uses complex connection management Goal: hide complexity Requests can follow any data fetch … … any view might be showing
12. Architecture 'Net libHorizon HTML Analyzer AppDelegate Tab Bar Controller Collections Prefs One Collection ...
13. Login & Code States
14. Step 4: View Architecture Collection Management View Single Collection View Top Level Field Management Drill down as deep as desired, email current object
15. Step 5: Query Builder
16. Step 5: Query Builder
17. Show
 & Tell
 &
 Complain
18. Step 6: JSON (BSON) BSON decoding
 { "_id" : 12345, "some_time" : new Date('Jul 12 2012, 5:45 pm EDT'), “some_place" : ObjectId(‘xxxyyyzzz’), "views" : NumberLong(1250000) }, SAX-JSON-Parser-ForStreamingData (github/dhoerl)
19. Step 7: Embellish Open-Source An Invaluable Resource Tie Keyboard to Field Type Keyboard Accessory View Field Auto-completion SMS Entry Copy/Paste
20. Collections
21. Document Presentation
22. Query
23. Fetch & View Data
24. Stats Common Library: 18 files, 3210 lines App: 35 files, 9634 lines Open Source (github/dhoerl except TFHipple) - HTTextField (auto-completion) - KOKeyboard (5 Keys in one Button) - TFHipple/XPathQuery (HTML/XML parser) - OperationsRunner (FastEasyConcurrentWebFetches) ——-