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

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 Client Architecture ADB Client Application Allurent Display, Cart, Checkout Local File Storage Shopper Personal Data Media Catalog Metadata Notes, tags, saved orders Store content Markup Content Integration Shopper Behavior Order Integration Update Manager On-demand media Auto-update customer behavior order population Analytics Commerce Server Web Server

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 Splash Screen Window SystemTrayIcon animate alert with Fade and Move effect Splash Screen displayed while Strip is assembled

Search Tool Free text search Color 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 an Allurent 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