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

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

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

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

Demo

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

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

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

Application Overview

SystemTray Alert Window

SystemTrayIcon

animate alert with Fade and Move effect

Splash Screen Window

displayed while Strip is assembled

Search Tool

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

Color search pick a color via color wheel or image

Search Tool

Color search code highlights custom cursor

CursorManager.setCursor()

native drag/drop

NativeDragManager

ClipboardFormats

selected color

BitmapData.getPixel(x, y)

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

Navigation Strip Scroller

Strip is dynamic, so thumbnail representation needs to be dynamic

use Bitmap API to capture Strip in chunks

BitmapData.draw()

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

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

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

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

Color Analysis and Indexing

HSV color space, courtesy of Wikimedia Commons

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

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

Goal Based Animation

Early Prototypes of Strip Motion [demo]

Limitations of Tween approach

General-purpose “Goalkeeper” engine

[demo prototype]

Goal Based Animation in ADC

Easy integration to final ADC navigation model

Velocity output coupled to Blur filter for motion effect

What’s Next?

Download catalog and images after install

Update mechanism for getting new editions

Enable offline cart

Personalization