22
Bringing Rich Commerce To The Desktop with AIR Joe Berkovitz, VP of Engineering (http://joeberkovitz.com) Tim Walling, Software Architect (http://timwalling.com) Allurent, Inc. (http://allurent.com) Presentation at Flex Camp Boston 2007

Bringing Rich Commerce To The Desktop with AIR Joe Berkovitz, VP of Engineering () Tim Walling, Software Architect ()

Embed Size (px)

Citation preview

Page 1: Bringing Rich Commerce To The Desktop with AIR Joe Berkovitz, VP of Engineering () Tim Walling, Software Architect ()

Bringing Rich CommerceTo The Desktop with AIR Joe Berkovitz, VP of Engineering (http://joeberkovitz.com)

Tim Walling, Software Architect (http://timwalling.com)

Allurent, Inc. (http://allurent.com)

Presentation at Flex Camp Boston 2007

Page 2: Bringing Rich Commerce To The Desktop with AIR Joe Berkovitz, VP of Engineering () Tim Walling, Software Architect ()

Topics

Intro/Demo: Allurent Desktop Connection (ADC)

Architectural Overview Navigation and Window Management Search SQLLite Database Usage Color Analysis and Indexing Goal Based Animation What’s Next, Q & A

Page 3: Bringing Rich Commerce To The Desktop with AIR Joe Berkovitz, VP of Engineering () Tim Walling, Software Architect ()

Key ADC Features

Rich, vibrant shopping experience both online and offline

Shopper customization features exploit local file persistence, native drag-and-drop

Tool for business users to author user experience

Fast, large, local catalog DB with lightweight media

Automatic client download of metadata, markup & “heavyweight” media

Direct conduit to online web store, including checkout

Page 4: Bringing Rich Commerce To The Desktop with AIR Joe Berkovitz, VP of Engineering () Tim Walling, Software Architect ()

Demo

Page 5: Bringing Rich Commerce To The Desktop with AIR Joe Berkovitz, VP of Engineering () Tim Walling, Software Architect ()

ADB ClientApplication

Local File Storage

ADB Client Architecture

AnalyticsCommerceServer Web Server

AllurentDisplay,

Cart,Checkout

CatalogMetadata

Update Manager

OrderIntegration

Media

Markup

Co

nte

nt

Inte

gra

tio

n Auto-update

On-demand media

ShopperPersonal

Data

order population customer behavior

Notes, tags,saved orders

Storecontent

ShopperBehavior

Page 6: Bringing Rich Commerce To The Desktop with AIR Joe Berkovitz, VP of Engineering () Tim Walling, Software Architect ()

Prototype Constraints

Build with 2 developers in 2 months

Focus on user experience and key implementation issues

No download of content from server:everything is local

Minimal and fixed product catalog

Custom “cooking” of local database, no data feeds from actual commerce DB

Page 7: Bringing Rich Commerce To The Desktop with AIR Joe Berkovitz, VP of Engineering () Tim Walling, Software Architect ()

Application Overview

WindowedApplication

chromeless window

Admin or Boutique is added as a child determined through parameters in shortcut

(similar to FlashVars)

hide from taskbar at startup

Page 8: Bringing Rich Commerce To The Desktop with AIR Joe Berkovitz, VP of Engineering () Tim Walling, Software Architect ()

Application Overview

SystemTray Alert Window

SystemTrayIcon

animate alert with Fade and Move effect

Splash Screen Window

displayed while Strip is assembled

Page 9: Bringing Rich Commerce To The Desktop with AIR Joe Berkovitz, VP of Engineering () Tim Walling, Software Architect ()

Search Tool

Free text search using a quick and dirty “like” DB query

Color search pick a color via color wheel or image

Page 10: Bringing Rich Commerce To The Desktop with AIR Joe Berkovitz, VP of Engineering () Tim Walling, Software Architect ()

Search Tool

Color search code highlights custom cursor

CursorManager.setCursor()

native drag/drop

NativeDragManager

ClipboardFormats

selected color

BitmapData.getPixel(x, y)

Page 11: Bringing Rich Commerce To The Desktop with AIR Joe Berkovitz, VP of Engineering () Tim Walling, Software Architect ()

Navigation Strip

content driven navigation, focus is on content

make the content the navigation control

uses goal based animation engine

speed sensitive motion blur used engine’s velocity property

Page 12: Bringing Rich Commerce To The Desktop with AIR Joe Berkovitz, VP of Engineering () Tim Walling, Software Architect ()

Navigation Strip Scroller

Strip is dynamic, so thumbnail representation needs to be dynamic

use Bitmap API to capture Strip in chunks

BitmapData.draw()

Page 13: Bringing Rich Commerce To The Desktop with AIR Joe Berkovitz, VP of Engineering () Tim Walling, Software Architect ()

In The Database Kitchen

Anthropologie catalog in hSQLdb XML file for our server-side product demos

Created custom AIR import/update utility [demo]

Roughly duplicated server schema

Read existing XML file into AIR DB

Tip: batch INSERTs into transactions for >100x performance gain

Page 14: Bringing Rich Commerce To The Desktop with AIR Joe Berkovitz, VP of Engineering () Tim Walling, Software Architect ()

Using SQLite as anAllurent Display Content Source

In-memory content cache already existed

Rewrote integration layer to pull product metadata from SQLite query rather than web service

Page 15: Bringing Rich Commerce To The Desktop with AIR Joe Berkovitz, VP of Engineering () Tim Walling, Software Architect ()

SQLite Usage Internals

DAO object isolates entire application from database internals:

function getProduct(uri:String, handler:Function)

Translator object creates SQL strings/parameters, interprets SQLResults on behalf of DAO

Page 16: Bringing Rich Commerce To The Desktop with AIR Joe Berkovitz, VP of Engineering () Tim Walling, Software Architect ()

SQLite Usage Internals (continued)

Used asynchronous APIs to keep event loop alive

ConnectionPool object

StatementPool object manages:

SQLStatement caching for performance

param substitution

Execution

result/error handling

Page 17: Bringing Rich Commerce To The Desktop with AIR Joe Berkovitz, VP of Engineering () Tim Walling, Software Architect ()

Color Analysis and Indexing

HSV color space, courtesy of Wikimedia Commons

Page 18: Bringing Rich Commerce To The Desktop with AIR Joe Berkovitz, VP of Engineering () Tim Walling, Software Architect ()

Color Analysis and Indexing (cont.)

Added hue, saturation, brightness columns to catalog DB

AIR utility loaded color swatch images, extracted average RGB color value, converted to HSV and stored in DB

Page 19: Bringing Rich Commerce To The Desktop with AIR Joe Berkovitz, VP of Engineering () Tim Walling, Software Architect ()

Color Search and Presentation

Build in-memory HSV index at startup

Linear search of index based on color target and HSV color-distance metric

Put closest match in center, arrange in concentric rings

Incremental change animation for visual continuity

Page 20: Bringing Rich Commerce To The Desktop with AIR Joe Berkovitz, VP of Engineering () Tim Walling, Software Architect ()

Goal Based Animation

Early Prototypes of Strip Motion [demo]

Limitations of Tween approach

General-purpose “Goalkeeper” engine

[demo prototype]

Page 21: Bringing Rich Commerce To The Desktop with AIR Joe Berkovitz, VP of Engineering () Tim Walling, Software Architect ()

Goal Based Animation in ADC

Easy integration to final ADC navigation model

Velocity output coupled to Blur filter for motion effect

Page 22: Bringing Rich Commerce To The Desktop with AIR Joe Berkovitz, VP of Engineering () Tim Walling, Software Architect ()

What’s Next?

Download catalog and images after install

Update mechanism for getting new editions

Enable offline cart

Personalization