Bringing Rich Commerce To The Desktop with AIR Joe Berkovitz, VP of Engineering () Tim Walling,...
-
Upload
alycia-darwin -
Category
Documents
-
view
219 -
download
0
Transcript of 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