Platforms

• iOS 6
• Android 4

Technology

• JavaScript
• PhoneGap 2.2
• PhoneGap SQL Lite Plugin

Libraries

• iScroll
• jQuery
• json_parse.js
• xml_2_json.js

Development Tools

• Notepad++
• XML Notepad 2007
• Eclipse
• xCode
• Photoshop
• draw9patch
• Weinre
• Chrome
• Ripple
• Android Emulator (HAXM)
• iOS Emulator
• WAMP
• SQL Lite Database Browser

Overview

This project consisted of two versions of the same app – one for each brand under the Fleetwood RV umbrella: the American Coach the Fleetwood RV Mobile Sales Apps. Each version uses their own content feeds and branding. The Fleetwood RV version contains some additional screens/functions related to the variety of vehicles under that brand.

The purpose of the app is to illustrate to consumers the wide array of customization within Fleetwood RV’s product lines. The app itself walks the prospective customer through configuring an RV from fuel type, chassis, external paint work and internal options such as wood type and decor to various types of furniture and appliances. All relevant data such as cost, dimensions, etc are displayed to the user via a running list in the app’s right column.

All customizations are summarized on the final screen where the user has the ability to email a link to themselves (or a friend) which when clicked opens the appropriate brand’s website to reveal the RV that they customized from within the app. In addition the email contains contact information for the closest American Coach or Fleetwood RV dealer.

Development Notes

A number of libraries helped me complete a range of essential tasks; jQuery to handle AJAX, scrolling panels utilized iScroll, stringified JSON to JSON conversion is accomplished with Douglas Crockford’s json_parse.js (I discovered that jQuery’s implementation has a memory leak) and XML to JSON conversion is accomplished with xml_2_json.js. Everything else is pure JavaScript with jQuery leveraged for it’s Ajax and DOM manipulation features.

On the PhoneGap side of things aside from network detection and obtaining the device’s geo-coordinates I used the SQL Lite plugin to exceed the webviews’ file storage limitations. This plugin also helped meet Apple’s requirement that the app data not be synced to the iOS users’ iCloud account.

100% of the content – imagery and text – are stored locally on the mobile device. Upon first launch the XML content manifest is downloaded, converted to JSON and then saved in localstorage. That data is then compared against the downloaded data (if any) that is in Web SQL. The result of the comparison is a download queue. Images are pre-serialized into base64 and so are served individually in a synchronous fashion to the app as JSON. Once received the data is stored in SQL Lite. Progress is shown to the user via a progress bar and a percentage indicator.

Attempting to view the Web SQL database from within Chrome’s Developer Tools was impractical due to extreme sluggishness caused by the amount of data being stored. I therefore used an app called SQL Lite Database Browser to view the SQL file. This allowed me to do simple queries to verify inserts, deletes, etc.

Features

  • PhoneGap API:
    • Geo-location
    • Network detection
    • SQLlite plugin
  • Content Download System:
    • Content Manifest download (XML)
    • Manifest converted to JSON and stored in LocalStorage
    • Serialized image assets downloaded and stored in SQL lite DB
    • New asset detection and download workflow
    • Download progress indicator – progress bar and percentage
  • Web services integration
    • content manifest download
    • per-asset download
    • dealer locator – closest to given zip code or geo-location
    • Lead-generator (form) – creates formatted URL that when visited reveals all the user’s product customizations that were selected within the app in the client’s website
  • Product Customization Features
    • select fuel type
    • select chasis
    • select exterior
    • select interior wood and upholstery
    • select custom options
    • display all selections and relevant data
    • display costs
  • Custom Framework
  • JSDoc-derived documentation
  • Aspect Ratio detection