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.

Scope and Functional Requirements

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.

Conceptual Model

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.

Design

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.

MyEclipse REST Web Service Explorer running JEE6 Pet Store

My REST Web Service Explorer experiments led to this very simple preliminary conceptual model for the mobile app.

Mobile Pet Store Model

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.

Mobile PetStore – iPhone UI Mockup


Next Steps

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.

Photo Credits:
Bird image on the spash screen:
http://animalphotos.info/a/2008/07/11/several-yellow-parakeets-some-facing-towards-camera-and-some-away/#more-3794

Drawing tools image: www.templay.de

Related Posts

A Day with Dani: Eclipse Plugin for Awesome Worksp... DevStyle Rescued My Workspace!As a new developer working in Eclipse, nothing was worse than doing a project and looking at an outdated, plain workspace. It was boring, and took away from the excitement and learning these projects had to offer. This was an IDE I would be using almost every day, so when I learned about the DevStyle plugin for Eclipse...
2017 CI 11 – Sprucing up Your IDE 2017 is over, but our commitment to improving our products continues, as we bring to you our 2017 CI 11 release. It comes with key fixes and improvements in the TypeScript space, as well as the new two-way theme sharing in DevStyle, among others.NOTE: This release does not include MyEclipse, which will be released shortly.Angular & TypeScriptAd...
Equifax Data Breach Advisory Many of you may have heard of the Equifax data breach, possibly affecting millions of consumers. Information accessed by hackers during the incident included Social Security numbers, personal details, driver’s license numbers, and even credit card numbers.Equifax has confirmed that the breach was made possible by a vulnerability in the Apache Strut...
SDC 2017 SR2 – Software Delivery Evolving Fu... Perhaps you're already a fan of the delicious combo offered by our Secure Delivery Center (SDC) -- you get the right software to your teams and manage a variety of actions (licenses, software updates, rollouts and standardization).  With our new version of SDC, we are bringing even more yummy features to the table!What is included in our 2017 SR2 r...

Posted on May 14th 2013