User Interface Document Imarket Application.pdf

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

Nguyen The Nhat Bui Son Thai Dang Hong Phuc Dao Quang Nhat

<b>Approved by</b>

<b>Proposal Review Panel Representative:</b>

Name Signature Date

<b>Capstone Project 1- Mentor: Nguyen Trung Thuan</b>

Name Signature Date

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<b>PROJECT INFORMATION</b>

<b>PROJECT INFORMATION</b>

<b>Project Acronym GMHProject Title</b> iMarket

<b>Start Date</b> 21 - Feb - 2023

<b>End Date:</b> 20 - May - 2023

<b>Lead Institution</b> International School, Duy Tan University

<b>Project Mentor</b> M.Sc Thuan, Nguyen Trung

<b>Scrum Master</b> Nguyen The Nhat 0359784959

<b>Team Members</b> Bui Son Thai sonthai1310.works@gmail

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

The following signatures are required for approval of this document

Mentor ^{Nguyen Trung Thuan}

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

1.3. UI-03: Address setting 11

1.4. UI-04: Main screen 13 1.5. UI-05: View history 13

1.6.UI-06: Forgot password 14 1.7. UI-07: Suggest Food 15

1.8 UI-08: Product categories 16

2.2. UI-02: Show dashboard 20

2.3. UI-03: Manage accounts 21

2.4. UI-04- Supplier 21

2.6.UI-02: Accept order 24 2.7.UI-03: View Customer Address 25

2.8.UI-04: Edit Profile 26

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

<b>I. Introduction</b>

<b>1. Purpose</b>

- This document helps to better understand the interface of the GMH Application ( iMarket ) and details the specification and functional components of the application. - This document lets the development team understand the structure and components in detail to create a consistent and complete application.

<b>2. Scope</b>

- Overview of application phases and modules.

- Create complete interfaces and describe them clearly.

<b>II. List of user Interface1. End-user</b>

<b>User Interface IDUI NameDescription</b>

UI-01 Login This is the login page of EndUser. UI-02 Register ^{This is the EndUser's account}

registration page.

This function allows users to add their address information to the

UI-04 Change Password ^{This page allows users to set a} new password.

Allows users to view the history that they have ordered at the

This page allows users to forget their password and receive a password suggestion from GMH

sent to the user's email.

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

UI-07 Suggest Food ^{This function allows users to find} food suggestions for themselves

UI-08 Product categories

This function allows the user to select the product type and add the

product to the cart UI-09 Cart ^{This function allows users to select}

products to buy and pay

<b>2. Admin</b>

Login ^{The date function allows the admin} to log into the system UI-02

Show dashboard _{administrator to see an overview}^{This function allows the} UI-03

Manage accounts ^{This function allows the user to} manage all employee accounts UI-04

Supplier ^{This function allows the} administrator to select the supplier

<b>3. Shipper</b>

Login ^{This function allows the Shipper} to log into the account

This function allows Shipper to view customer and supplier

information UI-04

Edit Profile ^{This function allows the Shipper} to edit personal information

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

<b>III. Describe User Interface</b>

<b>1. EndUser</b>

<b>1.1. UI-01: Login</b>

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

From Condition ^Control_Type Target Notes

1 Input Textbox Input the user’s email

2 Input Textbox ^{Input the put user’s}_password

3 Click Button ^{Click to go to the user's}_{main screen}

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

<b>1.2 UI-02: Register</b>

1 Input Textbox ^{Input the user's account} name

2 Input Textbox Input the user’s email

3 Input Textbox ^{Input the put user’s} password

4 Click Button ^{Click to show/hide the} password

5 Click Button ^{Click to create an account} and go to the next step

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

6 Click Button ^{Click to return to the login} screen

7 Click Button ^{Click to return to the} account registration screen

8 Input Number ^{Input the user phone} number

9 Click Button _{number confirmation page}^{Click to go to the phone}

10 Click Button _{phone number entry page}^{Click to return to the}

11 Click Number ^{Input the verification code} to the user's phone number

12 Click Button ^{Click to complete account} registration

<b>1.3. UI-03:Address setting</b>

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

From Condition ^Control_Type Target Notes

2 Click Button ^{Click and select the user} address

3 Click Button ^{Click to finish setting up} the address

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

4 Click Button ^{Click finish and start} ordering

<b>1.4. UI-04:Main screen</b>

<b>1.5. UI-05: View history</b>

From Condition _{Control Type} Target Notes

back

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

2 Click Button Click to order

<b>1.6.UI-06: Forgot password</b>

From Condition ^{Control Type} Target ^Notes

back 2 Click Button _{select next}^{Click and}

back to forgot

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

password page 4 Input Textbox ^{Input lost new}_password

5 Input Textbox _{new password}^{Input again}

<b>1.7. UI-07: Suggest Food</b>

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

From Condition ^{Control Type} Target ^Notes

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

From Condition ^{Control Type} Target ^Notes

Click to return to the homepage 2 Click Button ^{Click to filter}_categories 8 Click Button ^{Click to reduce}_{the quantity}

9 Click Button ^{Click to add}_quantity

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

<b>1.9. UI-09: Cart</b>

From Condition ^{Control Type} Target ^Notes

1 Click Button ^{Click to go}_back

Click to increase product 3 Click Button ^{Click to reduce}_product

4 Click Button ^{Click to delete}_product

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

<b>2. Admin</b>

<b>2.0. UI-01: Login</b>

1 Input Textbox Click to enter account

2 Input Textbox ^{Click to enter the}_password

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

<b>2.2. UI-02: Show dashboard</b>

2 Input Button Click to select product

3 Click Button Click to choose the agent

4 Click Button Click to view staff

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

<b>2.3. UI-03: Manage accounts</b>

1 Input Button Click to show staff

2 Input Button ^{Click to view employee} information

3 Click Button Click to delete employee

<b>2.4. UI-04- Supplier</b>

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

From Condition ^Control_Type Target Notes

1 Input Button Click to select product

2 Input Button Click to find supplier code

3 Click Button ^{Click to select the product} code to order

4 Click Button Click to choose the agent

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

<b>3. Shipper</b>

<b>2.5. UI-01: Login</b>

1 Input Textbox Input the user’s email

2 Input Textbox ^{Input the put user’s}_password

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

<b>2.6.UI-02:Accept order</b>

1 Input Textbox ^{Click to search by single} code

2 Input Textbox Click to view order details

3 Click Button Click to receive your order

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

<b>2.7.UI-03: View Customer Address</b>

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

<b>2.8.UI-04: Edit Profile</b>

1 Input Button ^{Click to edit personal} information

2 Input Textbox Click to edit birthday

3 Click Textbox ^{Click to edit phone} number

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

5 Input Button ^{Click to log out of your} account

</div>