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,...
![Page 1: Bringing Rich Commerce To The Desktop with AIR Joe Berkovitz, VP of Engineering () Tim Walling, Software Architect ()](https://reader030.fdocuments.us/reader030/viewer/2022032701/56649c805503460f949370f4/html5/thumbnails/1.jpg)
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 ()](https://reader030.fdocuments.us/reader030/viewer/2022032701/56649c805503460f949370f4/html5/thumbnails/2.jpg)
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 ()](https://reader030.fdocuments.us/reader030/viewer/2022032701/56649c805503460f949370f4/html5/thumbnails/3.jpg)
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 ()](https://reader030.fdocuments.us/reader030/viewer/2022032701/56649c805503460f949370f4/html5/thumbnails/4.jpg)
Demo
![Page 5: Bringing Rich Commerce To The Desktop with AIR Joe Berkovitz, VP of Engineering () Tim Walling, Software Architect ()](https://reader030.fdocuments.us/reader030/viewer/2022032701/56649c805503460f949370f4/html5/thumbnails/5.jpg)
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 ()](https://reader030.fdocuments.us/reader030/viewer/2022032701/56649c805503460f949370f4/html5/thumbnails/6.jpg)
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 ()](https://reader030.fdocuments.us/reader030/viewer/2022032701/56649c805503460f949370f4/html5/thumbnails/7.jpg)
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 ()](https://reader030.fdocuments.us/reader030/viewer/2022032701/56649c805503460f949370f4/html5/thumbnails/8.jpg)
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 ()](https://reader030.fdocuments.us/reader030/viewer/2022032701/56649c805503460f949370f4/html5/thumbnails/9.jpg)
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 ()](https://reader030.fdocuments.us/reader030/viewer/2022032701/56649c805503460f949370f4/html5/thumbnails/10.jpg)
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 ()](https://reader030.fdocuments.us/reader030/viewer/2022032701/56649c805503460f949370f4/html5/thumbnails/11.jpg)
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 ()](https://reader030.fdocuments.us/reader030/viewer/2022032701/56649c805503460f949370f4/html5/thumbnails/12.jpg)
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 ()](https://reader030.fdocuments.us/reader030/viewer/2022032701/56649c805503460f949370f4/html5/thumbnails/13.jpg)
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 ()](https://reader030.fdocuments.us/reader030/viewer/2022032701/56649c805503460f949370f4/html5/thumbnails/14.jpg)
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 ()](https://reader030.fdocuments.us/reader030/viewer/2022032701/56649c805503460f949370f4/html5/thumbnails/15.jpg)
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 ()](https://reader030.fdocuments.us/reader030/viewer/2022032701/56649c805503460f949370f4/html5/thumbnails/16.jpg)
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 ()](https://reader030.fdocuments.us/reader030/viewer/2022032701/56649c805503460f949370f4/html5/thumbnails/17.jpg)
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 ()](https://reader030.fdocuments.us/reader030/viewer/2022032701/56649c805503460f949370f4/html5/thumbnails/18.jpg)
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 ()](https://reader030.fdocuments.us/reader030/viewer/2022032701/56649c805503460f949370f4/html5/thumbnails/19.jpg)
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 ()](https://reader030.fdocuments.us/reader030/viewer/2022032701/56649c805503460f949370f4/html5/thumbnails/20.jpg)
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 ()](https://reader030.fdocuments.us/reader030/viewer/2022032701/56649c805503460f949370f4/html5/thumbnails/21.jpg)
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 ()](https://reader030.fdocuments.us/reader030/viewer/2022032701/56649c805503460f949370f4/html5/thumbnails/22.jpg)
What’s Next?
Download catalog and images after install
Update mechanism for getting new editions
Enable offline cart
Personalization