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)

1. people

2. About Me
Companies
Technologies
NetLabs

3. Agenda
• Custom view introduction
• Demo
• High-level architecture of custom view
framework
•Q&A

4. Mobile Application Landscape
Native
Mobile Web
Hybrids
• 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 & Java APIs
– View representation
– Metadata registry
( HTML - <TABLE>, <H1> <A> …)
• 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 Architecture
Native Platform
Custom View
Interpreter
Custom View
Manager
Custom View
Designer
Metadata
Component
registration
Local Storage

12. Custom View Architecture
Cloud Custom
View Repository
Native Platform
Custom View Cloud API service
Custom View
Interpreter
Custom View
Manager
Custom View
Designer
Metadata
Component
registration
Local Storage

13. Custom View Architecture
Cloud 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
<Screen>:= {
Name = text,
[Title= text],
[Description=text],
[Constraints],
[Orientation],
Container}
<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
}
<Content>:= {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":
"http://www.intuit.com",
"flexible”: true,
"suggestedLayout": {
"type": "filled"
}
},

18. Flexible

19. Metadata Service
Component 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 &
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 <NSObject>
– VespaConfigurable
-(void) configure:(NSString *)configuration;
– VespaConfigurableView
-(NSString *) configuration;
– VespaConfigurableController
-(void) flexConfiguration;
@end
@protocol VespaConfigurableController <VespaConfigurable>
- (id)initWithNibName:(NSString *)nibNameOrNil
bundle:(NSBundle *)nibBundleOrNil configuration:(NSString *) configuration;
- @end
package com.intuit.mobilelib.vespa.api;
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 & drop interface
– Orchestrate content
configuration

26. Custom View Discrimination
•
•
•
•
By
By
By
By
platform (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 Reports
28

29. Custom Reports –continued
29

30. Content Writers’ Guidelines
• Componentization!!!
• Do not use hardcoded sizes!!! (IOS)
• Make everything “relative”
• Maximize advantages of Android layouts & 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&A
Want to talk more?
I’ll be at the Intuit booth today 11am – 2pm.
Email: eugene_krivopaltsev@intuit.com

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 & Sangeeta Narang – “Intuit APIs for Financial Transaction
Aggregation”
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 Effort”
For more information about joining our organization visit our booth or connect with
our onsite recruiter:
Chriscox_recruiter@intuit.com
You don't want to miss out on a chance to win this cool headset.
Stop by our booth to enter
33