Chapter 5. Requirements 113
PiggyBank prototype
At this point a discussion about prototypes is warranted. Prototyping is the
process of building and evaluating a working model of a potential system to
discover various aspects of that system. Prototypes can be developed very early
in the application development process. We have found that, more than likely, a
customer has some predefined requirements or even a partially built prototype.
Nevertheless, we describe the prototyping process, as well as types and benefits
of prototypes, and we show you screen captures of the PiggyBank interface.
Prototype process
The prototype process is an iterative cycle:
򐂰 First, you must decide which requirements are to be used as the basis for the
prototype. It is wise to pick requirements that are deemed as base
򐂰 Next, you implement the requirements. During this phase you choose the tool
for development of the prototype. When considering a tool, keep in mind the
learning curve because this could slow down the rapid pace of development.
򐂰 Finally, you demonstrate the prototype. During this phase review, users get a
chance to verify the requirements and determine which requirements will be
used in the next iteration of the prototype.
򐂰 This process is repeated until the objectives of the prototype have been met.
Figure 5-7 shows the prototyping process.
Figure 5-7 Prototyping process
Types of prototypes
Typically a prototype can be either evolutionary or throw-away. An evolutionary
prototype can be evolved into a first release of the actual system. The system is
developed in increments. The throw-away prototype is used as a
proof-of-concept. As its name denotes, and due to the fact that it is built on a
subset of the requirements, it will be discarded.
PiggyBank uses the throw-away approach. We have developed this prototype to
explain concepts and techniques. It is by no means a basis for a system.
Demo prototype
114 WebSphere Version 5 Application Development Handbook
Benefits of prototyping
The benefits of prototyping are that it:
򐂰 Exposes misinterpretations of requirements between users and designers.
򐂰 Can be evolved into a production system.
򐂰 Allows missing functionalities to be identified.
PiggyBank user interface
To accomplish the foregoing objectives, we used the Page Designer of
Application Developer to create the PiggyBank application prototype.
Using the Web-based interface, we now describe the PiggyBank prototype.
Welcome page
We are presented with a welcome page (Figure 5-8) when we first access the
PiggyBank application.
Figure 5-8 PiggyBank welcome page
Once the we select PiggyBank Home Banking System, we are presented with
the login page (Figure 5-9). On this page we input our user ID in the Id field, and
in the Password field, we can input our password and click Login to continue.
Figure 5-9 PiggyBank login page
Chapter 5. Requirements 115
Main menu
On the main menu page (Figure 5-10) we have the options to display account
balances, transfer money between PiggyBank accounts, and log out of the
PiggyBank application.
Figure 5-10 PiggyBank menu page
Display accounts
When we select Display Accounts, the display accounts page (Figure 5-11)
appears listing all of our accounts and associated balances.
Figure 5-11 PiggyBank display accounts page
Transferring money is a three-page process. After selecting Transfer Money, we
first we must select a debit account (Figure 5-12).
116 WebSphere Version 5 Application Development Handbook
Figure 5-12 Select debit account
Next we enter a credit account number and transfer amount (Figure 5-13). We
click Transfer to continue.
Figure 5-13 Enter credit account number and transfer amount
Finally, we see the transfer result page (Figure 5-14), which provides a summary
of the transaction.
Chapter 5. Requirements 117
Figure 5-14 Transfer result page
To end the application, we select Logout, the logout page appears (Figure 5-15).
Figure 5-15 PiggyBank logout page
Teller application
PiggyBank also provides a teller application that is used by bank tellers to cash
checks (Figure 5-16). This standalone application implements the cash check
use case.
Figure 5-16 PiggyBank teller application

Get WebSphere Version 5 Application Development Handbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.