Intuit Mobile Custom Views

33
people

description

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)

Transcript of Intuit Mobile Custom Views

Page 1: Intuit Mobile Custom Views

people

Page 2: Intuit Mobile Custom Views

About Me

Companies

Technologies

NetLabs

Page 3: Intuit Mobile Custom Views

Agenda

• Custom view introduction

• Demo

• High-level architecture of custom view framework

• Q & A

Page 4: Intuit Mobile Custom Views

Mobile Application Landscape

Native

• Device integration

• User experience

• Push capabilities

• Offline access

• Performance

• Tuned for particular platform

• App Store

Mobile Web

• Single app for multiple platforms

• Leverage Web standards (Jscript, CSS3, HTML)

• Upgradability, flexibility – instant!

• Easy access via links browser, email

• Installation

Hybrids

• Leverage Web advantages while having native capabilities

Page 5: Intuit Mobile Custom Views

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

Custom view introduction (Mint use case)

Page 6: Intuit Mobile Custom Views

Demo

Page 7: Intuit Mobile Custom Views

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}

Page 8: Intuit Mobile Custom Views

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 ( HTML - <TABLE>, <H1> <A> …)

–Metadata registry

• Platform-independent view description– 3 type of layouts – vertical, horizontal, carousel– Additional aspects – scrolling, divider, background– Component configuration

Page 9: Intuit Mobile Custom Views

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)

Page 10: Intuit Mobile Custom Views

Environment

•Android 3.x+• IOS – 6.x+

Page 11: Intuit Mobile Custom Views

Custom View Architecture

Native Platform

Local Storage

Custom View Manager

Custom View Interpreter

Custom View Designer

Metadata

Component registration

Page 12: Intuit Mobile Custom Views

Cloud Custom View Repository

Custom View Manager

Custom View Interpreter

Custom View Designer

Custom View Cloud API service

Metadata

Component registration

Local Storage

Native Platform

Custom View Architecture

Page 13: Intuit Mobile Custom Views

Custom View Architecture (Continued)

Cloud Custom View Repository

Page 14: Intuit Mobile Custom Views

Architecture Components

Custom View Representation

(Custom View Layout, Configuration)

Custom View Metadata

Custom View APIs

Custom View Cloud Services

Page 15: Intuit Mobile Custom Views

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)

}

Page 16: Intuit Mobile Custom Views

Custom View Layout

• Containers – Vertical,– Horizontal– Carousel

• Touch-based layout tuning(gesture recognition)

Page 17: Intuit Mobile Custom Views

Configurable

{ "tag": "webview", "configuration": "http://www.intuit.com", "flexible”: true, "suggestedLayout": { "type": "filled" }},

Page 18: Intuit Mobile Custom Views

Flexible

Page 19: Intuit Mobile Custom Views

Metadata Service

{ "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" }},

Component registry platform-agnostic

Page 20: Intuit Mobile Custom Views

Metadata Service (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" },

Component binding platform-specific

Page 21: Intuit Mobile Custom Views

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

Page 22: Intuit Mobile Custom Views

Content APIs

– VespaConfigurable

– VespaConfigurableView

– VespaConfigurableController

@protocol VespaConfigurable <NSObject>

-(void) configure:(NSString *)configuration;

-(NSString *) configuration;

-(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);

}

Page 23: Intuit Mobile Custom Views

Custom View Interpreter

• Inflate screen

• Create layout hierarchy– Instantiate content– Configure content– Apply layout constraints– Binds components

Page 24: Intuit Mobile Custom Views

Custom View Manager

• Manages screens– Create (Designer)– Delete– View (sort)– Edit

Page 25: Intuit Mobile Custom Views

Custom View Designer

• Create/edit screens– Displays content repository– Layout selection– Layout tuning– Drag & drop interface–Orchestrate content

configuration

Page 26: Intuit Mobile Custom Views

Custom View Discrimination

• By platform (any, Android, IOS) • By orientation (any, portrait, landscape)• By type (phone, tablet)• By tags – multi-tenancy (“Plumber”, “Sweet Bagels”)

Page 27: Intuit Mobile Custom Views

Standard Components

• General–Web view– Image view– RSS feed–Weather– Stock

• Mint– Accounts– Budget– Transactions– Spending– Income– Reports

Page 28: Intuit Mobile Custom Views

Custom Reports

28

Page 29: Intuit Mobile Custom Views

Custom Reports –continued

29

Page 30: Intuit Mobile Custom Views

Content Writers’ Guidelines

• Componentization!!!

• Do not use hardcoded sizes!!! (IOS)

• Make everything “relative”

• Maximize advantages of Android layouts & fragments and IOS autolayout

Page 31: Intuit Mobile Custom Views

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)

Page 32: Intuit Mobile Custom Views

Q & A

Email: [email protected]

Want to talk more?

I’ll be at the Intuit booth today 11am – 2pm.

Page 33: Intuit Mobile Custom Views

33

Intuit Speakers @ Silicon Code Camp 2013:SATURDAY9: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”

SUNDAY9: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:

[email protected]

You don't want to miss out on a chance to win this cool headset. Stop by our booth to enter