Intuit Mobile Custom Views

Download Intuit Mobile Custom Views

Post on 27-Jan-2015




2 download

Embed Size (px)


The presentation dedicated to Intuit Mobile Custom Views(MCV). MCV framework allows building and deploying dynamic dashboards, reports, personalization without a need to re-create mobile applications (IOS & Android)


<ul><li> 1. people</li></ul> <p> 2. About Me CompaniesTechnologiesNetLabs 3. Agenda Custom view introduction Demo High-level architecture of custom view framework Q&amp;A 4. Mobile Application Landscape NativeMobile WebHybrids Device integration Single app for multiple platforms Leverage Web advantages while having native capabilities User experience Push capabilities Offline access Performance Tuned for particular platform App Store Leverage Web standards (Jscript, CSS3, HTML) Upgradability, flexibility instant! Easy access via links browser, email Installation 5. Custom view introduction (Mint use case) Wish List Personalize Let me design my dashboard Let me configure my dashboard Let me action on my dashboard Let me change it Run my dashboard Enable reports Add more features over time 6. Demo 7. How It Started Custom dashboard Comparison (see things side by side) Get functionality which is in the product but never exposed Avoid extra release cycles Provide customization on product/group/user level Platform-agnostic Environment: Starting point: Android Mint Tablet Target: {IOS/Android/Windows/Web ?} {Tablet/Phone/Desktop?}-{Intuit product} 8. Architecture Objectives Lego paradigm Quickly build UX out of existing components Be able to add 3rd-party components Platform is a glue Light interfaces IOS &amp; Java APIs View representation Metadata registry( HTML - , ) Platform-independent view description 3 type of layouts vertical, horizontal, carousel Additional aspects scrolling, divider, background Component configuration 9. Architecture Objectives(Continued) View instantiation Take whole real estate Take designated portion(s) View crafting Custom view designer Hand-crafted Custom view meaning could be highlighted for power users or administrators or hidden (ordinary users) 10. Environment Android 3.x+ IOS 6.x+ 11. Custom View ArchitectureNative PlatformCustom View InterpreterCustom View ManagerCustom View DesignerMetadata Component registrationLocal Storage 12. Custom View Architecture Cloud Custom View RepositoryNative Platform Custom View Cloud API serviceCustom View InterpreterCustom View ManagerCustom View DesignerMetadata Component registrationLocal Storage 13. Custom View ArchitectureCloud Custom View Repository(Continued) 14. Architecture Components Custom View Representation (Custom View Layout, Configuration)Custom View Metadata Custom View APIs Custom View Cloud Services 15. Custom View Representation JSON-based Screen Container Content:= { Name = text, [Title= text], [Description=text], [Constraints], [Orientation], Container} := [background="image tag"],[scrollable=true|false], ExtentType=proportional|filled| fixed ExtentValue=value ( weight for proportional, size for fixed) children={Container|Content}+, type=vertical|horizontal|carousel } := {tag=text , [Configuration], ExtentType=proportional|variable| fixed ExtentValue=value( weight for proportional, size for fixed) } 16. Custom View Layout Containers Vertical, Horizontal Carousel Touch-based layout tuning (gesture recognition) 17. Configurable{"tag": "webview", "configuration": "", "flexible: true, "suggestedLayout": { "type": "filled" } }, 18. Flexible 19. Metadata ServiceComponent registry platform-agnostic{ "type": "component-registry "components": [ { "name": "Budget", icon: budget.png "tag": "current_budget", "description": "This month overall budget.nNot configurable", "suggestedLayout": { "type": "fixed", "value": "120" } } ,{ "name": "Feed", "tag": "feed", "description": "Lists Mint alerts &amp; advices.nNot configurable", "suggestedLayout": { "type": "proportional", "value": "1" } }, 20. Metadata Service {Component binding platform-specific(Continued)"type": "tag-registry", "tags": [ { "type": "component", "tag": "blue", "value": "BlueViewController" }, { "type": "component", "tag": "budget", "value": "TrendsController_iPad" }, { "type": "component", "tag": "feed", "value": "VespaFeedsController" }, { "type": "component", "tag": "accounts", "value": "AccountsViewController_iPad" }, 21. APIs Content (may be implemented by content provider) Screen instantiation Inflate screen in view Components discovery and bindings Custom View management Delete Create Find Cloud services Get all Delete Publish 22. Content APIs @protocol VespaConfigurable VespaConfigurable-(void) configure:(NSString *)configuration; VespaConfigurableView-(NSString *) configuration; VespaConfigurableController-(void) flexConfiguration; @end@protocol VespaConfigurableController - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil configuration:(NSString *) configuration; - @end package; public interface ConfigurableComponent { public void setComponentConfiguration(String config); public String getComponentConfiguration(); public void flexConfiguration(ComponentConfigurator configurator); } 23. Custom View Interpreter Inflate screen Create layout hierarchy Instantiate content Configure content Apply layout constraints Binds components 24. Custom View Manager Manages screens Create (Designer) Delete View (sort) Edit 25. Custom View Designer Create/edit screens Displays content repository Layout selection Layout tuning Drag &amp; drop interface Orchestrate content configuration 26. Custom View Discrimination By By By Byplatform (any, Android, IOS) orientation (any, portrait, landscape) type (phone, tablet) tags multi-tenancy (Plumber, Sweet Bagels) 27. Standard Components General Web view Image view RSS feed Weather Stock Mint Accounts Budget Transactions Spending Income Reports 28. Custom Reports28 29. Custom Reports continued29 30. Content Writers Guidelines Componentization!!! Do not use hardcoded sizes!!! (IOS) Make everything relative Maximize advantages of Android layouts &amp; fragments and IOS autolayout 31. Takeaways It is possible to personalize, customize native user experience for certain type of applications You may achieve common dashboard, reporting capabilities in a platform agnostic way It is possible to distribute and share custom views among group of users (admin/crowd sourcing) 32. Q&amp;AWant to talk more? Ill be at the Intuit booth today 11am 2pm.Email: 33. Intuit Speakers @ Silicon Code Camp 2013: SATURDAY 9:45 a.m. - Ramakrishna Kollipara Complete Automation of Performance Testing 1:45 p.m. - Joe Wells - QBO: Journey From legacy Java app to a Client-side HTML5 app 3:30 p.m. - Naga Addagadde &amp; Sangeeta Narang Intuit APIs for Financial TransactionAggregation 5:00 p.m. Ted Drake Hitting the Accessibility High Notes with ARIA SUNDAY 9:15 a.m. - Eugene Krivopaltsev Building Native Mobile Apps with Custom Views 1:15 p.m. - Tim Hobson Developing Highly Instrumental Applications with Minimal EffortFor more information about joining our organization visit our booth or connect with our onsite recruiter: You don't want to miss out on a chance to win this cool headset. Stop by our booth to enter33 </p>