Mobilization of legacy applications (MoLA) involves rethinking the app’s user roles and use-cases in mobile contexts. Mobile users are typically more spontaneous and goal oriented in their use of mobile business applications than users of the legacy application. Thus, the mobile app’s requirements should concentrate on identifying and prioritizing the app services that a user on the go will most likely use. The starting point for Mobile PetStore is to optimize features and services for the “guest shopper” role. The JEE6 Petstore application provides the “guest shopper” the ability to browse the store’s inventory of animals and to purchase animals online.
A pragmatic strategy for the mobile application life-cycle is an incremental product release process with a feedback loop that incorporates usage data to drive the priority and urgency of future app features, i.e., a data-driven, iterative process. The most important “guest shopper” feature of Mobile PetStore is the ability to browse the store’s animal inventory. Using the incremental release strategy, the app’s initial feature will be pet catalog browsing. After the initial app release, we will collect app download and usage data to determine the features to provide in future releases such as shopping cart, social media integration, etc.
Title: Browsing the Store Animal Inventory
User Role: Guest Shopper
Story: A user is able to browse the store’s animal inventory. The animal inventory is a hierarchy represented by a catalog that contains animals categorized by their type, e.g., fish, bird, dog. Each animal type or species of animal is a product in the catalog, e.g., gold fish, parakeet, poodle. The animal entity that a store stocks and sells is known as an item and is a specific type of product, e.g., male goldfish or female black poodle.
The guest shopper accesses the shop's animal catalog from his smartphone or tablet and drills down through the hierarchy of categories, products and items to find the information he is seeking. The user interface should make maximum use of the available display space.
Key Design Constraints - The Bottom Line
A primary challenge when mobilizing a legacy application is the technical constraints you must work with as you build mobile app features. In many cases, the organization’s goal is to develop a mobile app with low development costs by simply “bolting-on” a mobile app to the existing legacy app’s services and data with no changes to the legacy app. In cases where the legacy application does not support the mobile app’s use-cases, then only limited extension of the legacy app is allowed. The last thing management wants is to retest and recertify a legacy enterprise application modified to support the roll out of a small set of mobilized features with an unproven ROI. I will take these same constraints into account as I build Mobile PetStore.
A design process I like to take is to create a preliminary design assuming I have no legacy system constraints. Then, systematically revise the design by rolling in constraints, beginning with those having the largest impact.
REST Web Service API Definition and UI Design
It is not uncommon to have limited useful technical documentation when working with a legacy system. Many times, the docs were not updated to reflect the state of the system as it evolved from release to release. In this case, I have almost no documentation on JEE6 Pet Store other than the source code. Rather than rummaging through the code, I decided to deploy it, run the app and learn about it from the outside inward. I will share access to the Petstore project in the next article.
In the following screenshot, I have imported the JEE6 Pet Store project into MyEclipse, deployed it to my local Glassfish server, and used the MyEclipse REST Web Services Explorer to view the app’s API and interactively test it. The REST Web Services Explorer enables you to interactively view and invoke the web service API of any JAX-RS web service. This made it a super simple process to develop familiarity with the web service API.
My REST Web Service Explorer experiments led to this very simple preliminary conceptual model for the mobile app.
User Interface Design
The data hierarchy is the simple tree, Catalog>Categories>Products>Items. A mobile user interface design pattern for interacting with this type of structure is a linked set of screens, one screen for each datatype. I used Genuitec’s MobiOne product to do a quick layout of the screens in iPhone and iPad formats.
In Part-3, I will dive in and do some programming. I’ll take a look at using jQuery Mobile for a useful UI layout.
Did you miss Part-1? Click here to view the launch of the Mobile PetStore series.
Bird image on the spash screen:
Drawing tools image: www.templay.de
Posted on May 14th 2013