Analyzing Interfaces and Activities

In this section we analyze and define interfaces between the online shop software and the printing and embossing business on one side and the online customers on the other. The following interfaces are to be defined:

• A product catalog format that allows the business to describe and update all offered products
• Online store activities that can be performed by the online customers
• Web forms that display or collect necessary information.

11.2.1 The XML Product Catalog

The product catalog represents the interface of the printing and embossing business to the Web application. It is the primary base for generating the Web pages to be browsed by the online customers. From our experience most projects are best approached in a top-down fashion. You first define the interfaces and then move downward to the top-level class design and then down to the utility classes and so on. For that reason we define our system's interfaces with the two actorsthe business and the online customer (see Figure 4.1: Use Case Diagram for Online Photo Shop)before we proceed with the design workflow.

The business offers products that are customizable with personal digital images. Prints in various formats form the most important product group. But other items, such as cups, mouse pads, and framed pictures, also must be addressed. To accommodate this we use a list of products, where each product contains a list of options. For each product we define an identifier, a name, a summary, and an image that will be shown on generated HTML pages. Listing 11.1 shows a product catalog example.

Listing 11.1 products.xml: Product Catalog Example

[View full width]

 
 
 Order prints and enlargements from your favorite digital pictures. You can 
choose from three different sizes up to 8x10 inches! Our prints are always done on 
high-quality Kodak photo paper and processed within two business days.
 img/prints.jpgSmall prints 4x6 inches.
 5x7Medium-size prints 5x7 inches.
 6x8Poster size prints (8x10 inches).
 9x12Wallet size prints (4 per sheet).
 9x12
 
 
 
 Order cups customized with your personal pictures or graphics. Create one 
for each member of your family! A cup with a personal message or picture is also a great 
gift.
 img/cups.jpgWhite
 6x6x6
 0.5Black
 6x6x6
 0.5
 
 
 

To compute the shipping cost for each order, the product options contain not only the price but also information about the size and weight. One of the advantages of using an XML file to describe the products is that we can add more information later if it becomes necessary.

11.2.2 Online Store Activities

The online customer interacts through the Web pages with Online Photo Shop. The initial architecture description in Chapter 4 mentions a shopping cart form and a checkout form. Although designing HTML documents that describe and advertise products is not a requirement, we still need to implement a dynamic Web page that lets the online customer browse through all products. Furthermore, we have decided that access to the checkout area requires the customer to log in so that any previous payment and shipping information can be displayed.

The basic workflow of how the customer interacts with the Web forms of the online store is simple. Initially the customer will be directed to the browser page, where all products are advertised. Users can add items to the shopping cart and customize the items with a digital image while browsing. This site also contains a link to the shopping cart to let users review all items placed in it. After reviewing the shopping cart, the customer can continue shopping and return to the product browser, or proceed to checkout. During checkout, users must go through an identification or login step to enter the secure area where previous shipping and payment information is shown. Figure 11.1 visualizes the states of the online shop in a UML activity diagram.

Figure 11.1. Activity Diagram for Online Photo Shop

In a UML activity diagram, each state represents a condition during which a form waits for input or performs an action. Arrows show transitions from one state to another. A guarded transition is assigned a condition under which the transition takes place. In the example in Figure 11.1, two guarded transitions are connected to the decision element under the Show Shopping Cart state. These transitions represent the two link buttons in the Web form, which redirect the customer either back to the browser form or forward to the checkout form. The black circles on the top and the bottom represent the initial and the final states of this diagram, in our case entering the Web site and completing the order.

11.2.3 Web Forms

Before starting the design workflow of this iteration, we define the basic structure of the important Web forms. The purpose is mainly to capture information and data that is processed and displayed on these forms, not to design the layout or look and feel.

The first Web form we analyze is the browser form, where we will display information from the product catalog. The customer must also be able to select between available product options and upload a personal image to customize the item. Figure 11.2 shows a sketch of the browser form using prints as an example product.

Figure 11.2. Sketch of Catalog Browser Form

At any point while browsing through products, the customer must be able to check and view the items already placed in the shopping cart. For this purpose we add a navigation bar at the top of the form. Using the shopping cart link on the right, the customer can display all items placed in the shopping cart. Figure 11.3 shows a sketch of this form. Here, too, we add a navigation bar that allows the customer to continue shopping or proceed to checkout.

Figure 11.3. Shopping Cart Form

Hand-drawn sketches are perfectly fine for determining which information is presented in which form. Alternatively, design tools such as Frontpage or even Word (which was used here) are useful for creating possible layouts. Just avoid getting lost in details or graphics that are not important to the logic of the application. Designs usually change quite frequently, and it is almost certain that a completely different layout will be applied to all pages before the product is released. For the same reason, it is highly recommended that you use code behind technology, rather than interweave the code with the HTML, during the implementation. For the development of Online Photo Shop, the use of code behind is even mandated by an architectural requirement.