Report Structured Programming PDF

Preview

Summary

HANOI UNIVERSITY OF SCIENCE AND TECHNOLOGYSCHOOL OF INFORMATION AND COMMUNICATION****************COURSE REPORTSTRUCTURED PROGRAMMING(IT4492E)TOPIC: DESIGN AN SALES WEBSITE USING DESIGNPATTERN TECHNIQUESName: Ho Van NamStudent ID: 20194762Class: 126997Mentor: Trinh Thanh TrungHanoi, January 12, 2022T...

Description

HANOI UNIVERSITY OF SCIENCE AND TECHNOLOGY SCHOOL OF INFORMATION AND COMMUNICATION ****************

COURSE REPORT STRUCTURED PROGRAMMING (IT4492E)

TOPIC: DESIGN AN SALES WEBSITE USING DESIGN

PATTERN TECHNIQUES Name: Ho Van Nam Student ID: 20194762 Class: 126997

Mentor: Trinh Thanh Trung Hanoi, January 12, 2022

1

Table of Contents Introduction.......................................................................................................................2 Section 1: Authentication...................................................................................................3 I.

Registration.........................................................................................................................4

II.

Log in..................................................................................................................................6

III.

Log out............................................................................................................................7

IV.

Forgot Username/Password...........................................................................................8

Session 3: Buying..............................................................................................................9 I.

Creating Product................................................................................................................9

II.

Searching, Sorting and Filtering......................................................................................10 1. 2. 3.

III.

Searching.............................................................................................................................................10 Sorting.................................................................................................................................................12 Filtering...............................................................................................................................................13

INBOX..........................................................................................................................13

Session 4: Payment..........................................................................................................15 Conclusion......................................................................................................................18 References.......................................................................................................................19

2

Introduction In recent years, eCommerce has grown significantly and contributes to the development of the world in general and of Vietnam in particular. They are commonly referred to as web applications, or hosted applications — applications based on a software as a service (SaaS) model or cloud computing. These web applications are different from more traditional web sites in that their emphasis is on allowing users to accomplish tasks such as send email, make travel reservations, find homes, pay bills, transfer money, buy products, send invitations, and so forth. Despite these benefits and increasing use, designing interfaces for web applications remains difficult. Challenges in creating usable interactions are mainly related to the underlying “ loosely coupled ” web architecture, a limited set of interactive controls natively supported in web browsers, and the lack of design guidance as to how user interactions should be implemented. Using design patterns addresses many of these concerns and can complement design guidelines and style guides to create better, and consistent, interface designs and improve usability of web applications. Thus, patterns explicitly focus on the problem within the context of use and guide designers on when, how, and why the solution can be applied. Patterns are practical and describe instances of “good” design while embodying highlevel principles and strategies. Patterns have recently become attractive to user interface and software designers as well for their following benefits: -

Proven design solutions and guidance for their use Improved design process Reusability and consistent interfaces A common, shared language Effective teaching aid and reference tool Usable web applications

Although Design Patterns offer these important benefits, also keep in mind that they are not a specific solution to every single problem. Ultimately, developers need to address challenges one by one and adapt their solutions to the particular programming languages they use. In the scope of this essay, I will demonstrate how to design a reusable sales website and the benefits of applying them compares to traditional web sites.

3

Section 1: Authentication

Web applications enable one-to-one interaction and store user-specific information, so they require users to create an account (REGISTRATION) and choose unique credentials to access the web applications. Registering may require users to enter a set of alphanumeric characters from a distorted image to prevent spam and ensure that registering users are human and not auto- mated computer programs (CAPTCHA, Completely Automated Public Turing test to tell Computers and Humans Apart). When registering is established, users can identify themselves by LOG IN and store their personal information to database. In addition, users can log in via several popular platform such as Facebook, Google, etc. without create a new account. After logging in and accomplishing desired tasks, users often need a way to exit the application to ensure that unauthorized users cannot access and modify their account information by LOG OUT. Many applications also have provisions for automatically logging out users after a certain period of inactivity (AUTOMATIC LOGOUT). Because many web applications are used occasionally, users often forget their login information and need a way to retrieve it by create FORGOT USERNAME/PASSWORD feature. Depending on the security level of the applications, users may be asked to provide one or more pieces of unique information about their account. Besides, providing the email address or phone number associated with the account is required because it’s the easiest way to get the account back, a code will be sent to user’s email address or phone number and the only thing they can do is enter them into a textbox in web interface. In order to reuse the code, the information fields should be separated into separate components (FORM, BUTTON) for easy customization in different cases. Each component has its own props to determine what will happen in the future. For 4

example, LOG IN and REGISTER page are quiet similar so we can reuse most of interface and logic code base of LOG IN page to REGISTER page.

I.

Registration

Web applications often need to uniquely identify users. The reasons include preventing unauthorized access to personal and sensitive information (e.g., financial or health records), increasing convenience (e.g., storing billing and shipping addresses), and enabling sharing (e.g., photos). Despite such benefits, users often hesitate when providing personal information and often shy away from applications that require them to set up an account. Therefore, some websites allow customers to purchase without log in and provide their address to a form. In fact, Topix.net found a significant increase in the number of posts and a substantial improvement in their quality when they removed the registration requirement from their discussion forums. Although it's convenient in some cases, but if customers use this site often, they should have an account to save their information for future payments. When registration unavoidable, clearly indicate the benefits of registration and ask users only for the information necessary to set up an account

Example of REGISTER form

For most applications, setting up an account or registering is not one of the users’ goals. Their goals typically include purchasing an item, sharing information, paying bills, and so forth. Asking users to register is usually an interruption in their interaction experience, since it distracts them from their primary goals. Therefore, registration should be delayed as long as possible. This is common in modern ecommerce applications (e.g., Tiki, Lazada.vn) allow users to explore content without a user account. Only when users want to make a purchase, add content, or make comments these web applications require users to register. Thus, delaying registration also allows users to experience the application’s benefits and better understand the need and value of setting up an account. 5

Rules for creating REGISTRATION: a) Using an email address for a username Email addresses are always unique and are easier to remember even when users have multiple email accounts. Besides, it is easier to send the reminder information to their registered email address. b) Use CAPTCHA to ensure registration by humans

An increasing number of automated web crawlers have made it difficult to distinguish them from legitimate human users. Use CAPTCHA as part of the registration form to minimize registration by such automated agents.

CAPTCHA requires users to type characters from a distorted image containing letters and/or numbers before they can register. The ability to correctly identify characters from the distorted image is used as sufficient evidence that the user is human and not an automated agent (see the CAPTCHA pattern next). c) “Lazy” registration approach To make the registration process as efficient as possible, even when it is delayed, an option is to use a “lazy” registration approach, which is collecting information about users using browser cookies as they interact with the application. By collecting information in the background, when users are presented with the registration form, some of the registration fields can be prepopulated, requiring users to verify collected information rather than enter it. For example, if a user signs up for an email newsletter, the application has the user’s email address, which it can prepopulate on the registration form. d) Verify registration This is commonly accomplished by sending a message with a confirmation link to the email address or OTP code to the phone number provided by users during registration. Only after users have returned to the application by clicking the confirmation link (by pasting the registration URL in their browser address field) or enter OTP code, do they consider their registration complete. To ensure email reaches users’ email inboxes, ask them to check their spam folders. 6

e) Allay user’s privacy concerns Users may be hesitant to register because they may not know how their personal information will be used. Include a brief privacy statement (e.g., “Your information will not be sold or shared”) followed by a link to a detailed privacy policy statement to address such concerns. f) Setup security question In common, if user log in via email or phone number, it’s not necessary. However, to prevent the case that customer lose their email address or SIM, good programmers should add a security question to help them get back their account. II.

Log in

Users need to identify themselves so that they can access their account information. For example, users may want to access their account to see the order status on an ecommerce application (e.g., Amazon, Alibaba).

Example of LOG IN form

It’s easy to create a log in page after created registration page, just copy a part of registration page and change some value of props. In addition, to make it easy to access the application, consider offering users an option to let the application remember their login information.

Rules for creating LOG IN: a) Offer user multiple options to login - Via Google, Facebook, Guest,… 7

b) Enable users to retrieve forgotten login information c) Consider a two-step login for higher security Many financial applications require two-step login to verify a user’s identity: +) Step 1: asking users to provide their username or user ID and password. +) Step 2: requires users to answer a security question. d) Remember login information +) Remember both username and password +) Remember only username

III.

Log out

Reasons: -

To prevent unauthorized users from accessing their personal information.

-

To log out of one account and log in to another.

-

To indicate that they have completed their task and no longer need access to the application.

The ability to log out is particularly important for web applications because they are not installed on a specific computer and are accessible from anywhere as long as users have access to the Internet and a web browser. On one hand, this offers users the flexibility to access their information from anywhere (e.g., libraries, shared computers at work, Internet cafes, and so forth), but on the other hand, this ease of access opens opportunities for misuse and fraud. Therefore, users must be offered an explicit way to end their session.

Rules for creating LOG OUT: a) Use labels consistently Although this has minor usability implications, a relevant design issue is labeling the action that ends user sessions with the application. The common options are logout, log out, sign out, logoff, log off, and sign off. As the link represents an action, appropriate usage is log out, sign out, log off, or sign off. In the absence of any research evidence, a common practice is to complement the action users used when accessing the web application: For most consumer applications, Sign Out (to complement Sign In) is used, and for many business and technical applications, Log Out (to complement Log In) is used.

8

b) Automatic logout For applications (i.e., www.ctt.hust.edu.vn) with security and/or privacy concerns, automatically log out users after a certain period of inactivity (i.e., session timeout). Typical session timeouts are 15- to 45-minute durations depending on the sensitivity of the data that may be exposed. As the session timeout is approaching, offer users a warning and give them an opportunity to stay logged in. Confirmation is especially useful in instances where user tasks are likely to take some time (e.g., in cases of multistep tasks like checkout) and likely data loss could be frustrating to users. When automatically logging out users, consider saving their information. It could be annoying for users to have their session time out and discard all their data when they intended to finish what they started but were distracted for some reason. For example, Gmail saves users’ incomplete emails in the “draft” state and marks them to indicate that they have a pending response.

IV.

Forgot Username/Password

Users often forget usernames and/or passwords, especially when they are accessing an application that they rarely use. Therefore, it’s important that users have a way to remember that information or retrieve it. Because users typically realize that they have forgotten their credentials when asked to log in, the options to retrieve them should be provided near the login area. In situations where user accounts are not tied to private or sensitive information, sending a link to reset passwords via email is acceptable. However, when dealing with sensitive information, it’s important to take additional steps to verify identity before allowing users to reset or access their log in credentials.

CONFIRM USER IDENTITY WITH SECURITY QUESTIONS: -

If the web application stores sensitive information, additional layers of security may be necessary to verify the identity of the user claiming to have lost log in information. Additional identification questions may include information that only the account owner knows, such as the last four digits of his or her Social Security number, account number, and so forth. The identification may also require users to answer one or more security questions set up during registration.

SEND AN OTP CODE TO USER’S PHONE NUMBER OR EMAIL ADDRESS: -

9

The sever will automatically send an OTP code to user’s phone number or email address that customer registered. Then, user entry OTP code into a box and they can get back their account and set a new password.

Session 2: Buying An important decision for designers is what users should see or which page they should be taken to after they log in to the application. For web applications that allow access without logging in, users either remain on the same page or are taken to the next page in the sequence. For example, if users decide to log in on a product details page, they remain on the same page. However, if they log in during the checkout process, they are taken to the next page in the sequence the shipping information page. Application main pages are typically personalized based on user profiles, interests, and information needs with the intention of presenting the most relevant content and filtering out the not-so-relevant information. However, PERSONALIZATION driven by business rules or some form of social filtering may not be able to accurately predict the information users may need. Thus, applications often offer users CUSTOMIZATION options to allow them to tailor the application to their preferences and compensate for personalization shortcomings. Customization is not limited to information and task-related needs; it often extends to a choice of colors, logos, themes, fonts, and page layouts.

I.

Creating Product

To display product efficiently, we can use recursive composition, which entails building increasingly complex elements out of simpler ones. s. Recursive composition gives us a way to compose a document out of simple graphical elements. As a first step, we can tile a set of characters and graphics from left to right to form a line in the document. Then multiple lines can be arranged to form a column, multiple columns can form a page, and so on

Composite 10

Label

Image An example of display product on website

Object structure for recursive composition

This approach has two important implications. The first is obvious: The objects need corresponding classes. The second implication, which maybe less obvious, is that these classes must have compatible interfaces, because we want to treat the objects uniformly.

Meaning of Composite Composition: Recursive composition is good for more than just documents. We can use it to represent any potentially complex, hierarchical structure. The Composite pattern captures the essence of recursive composition in object-oriented terms.

II.

Searching, Sorting and Filtering

1. Searching When users know exactly what they are looking for, searching is easier and more efficient than navigating the application hierarchy; this is also referred to as a knownitem search. Even when a search doesn’t get users directly to the desired item, it may allow them to skip several levels of navigation to a point where they can navigate the 11

rest of the hierarchy and get to the desired item quickly. Additionally, most users are not familiar with search concepts such as Boolean operators (AND, OR, NOT, XOR, and so on) and feel more comfortable using simpler keyword searches than advanced searches. A simple search may also benefit users in quickly determining if an item exists in an application. For example, users may want to know if an e-commerce application offers item X. Searching for item X to determine whether it is offered by the application can be far more efficient tha...