Luận văn Ứng dụng phương pháp design pattern trong phát triển và kiểm thử phần mềm hệ thống thương mại Điện tử vnpt lào cai

Chỉnh sửa phần cấu trúc luận văn - Bê sung, chỉnh sữa chương mở đâu : Trình bảy khải niệm mẫu thiết kế giao diện người dùng, đặc điểm các mẫu thiết kế giao diện người dùng và giới th

TRUONG DAI HOC BACH KHOA HA NOT

Ngành Công Nghệ Thông Tìn và Truyền Thông

Giảng viên hướng dẫn: PGS.TS Huỳnh Quyết Thang

TIA NOL, 2020

‘TRUONG DAI HOC BACH KHOA HA NOL

Ngành Công Nghệ Thông Tin và Truyền Thông

Giảng viên hướng dẫn: PGS.TS Huỳnh Quyết Thắng -

'Chũ ký cha CVIID

HÀ NỘI, 2020

CONG HOA XA HOT CHU NGHTA VIET NAM

Độc lập — Tu do — Hanh phic

BẢN XÁC NHẬN CHỈNH SỬA LUẬN VĂN THẠC SĨ

Họ và tên tác giả luận văn: Phủng Thanh Hòa

Áp dụng kỹ thuật thiết kế mẫu trong phát triển và kiểm thử phan mém hệ thông thương mại điện tử VNPT Lào Cai

Chuyên ngành: Công nghệ thông ti

31/10/2020 với cáo nội dụng sau:

1 Chỉnh sửa phần cấu trúc luận văn

- Bê sung, chỉnh sữa chương mở đâu : Trình bảy khải niệm mẫu thiết kế giao diện người dùng, đặc điểm các mẫu thiết kế giao diện người dùng và

giới thiêu chỉ tiết một số mẫu phổ biên

- Chương 2 : Lâm rõ, mô lâ việc áp dụng các mẫu thiết kế

thống thương mại điện tử VNPT Tảo Cai,

dụng trong hệ

¿ nghĩa của việc áp dụng mang

lại lợi ích gì, sửa theo các góp ý trong nhận xét của các thây cá

- Chương 3 : Bỏ sung việc áp dụng paltern não và được kết quả giao diện nao dai vi moi so dé activity diagram

TI Chỉnh sửa cách trình bầy luận văn

- Sắp xếp lại bố cục luận văn chuẩn quy định của viên sau đại học trong

Đại học Bách Khoa Hà Nội

- Thêm các Irích dẫn lài liệu tham khảo

~ Thêm các Irích dẫn hình ảnh sử dụng và tham chiến

Ngay L3 tháng 2 năm 2020

Giáo viên hướng đẫn Tac gia luan van

CHU TICH HOI BONG

Hinh 3.3 Lược đỏ Đat hang .s‹s<<6se

Mình 3.4 Biểu đồ trình tự cho chúc năng “Publish địch vụ"

Hình š.S Biểu đỏ trình tự cho chức nãng °Quản lý Ordert”

Hình 3.6 Biểu đổ trình tự cho chức ning “Publish dịch vụ"

Hinh 3.7 Biểu đổ trình tự cho chức nãng “Quan ly Orders”

Hình 3.8 Thiết kế triển khai

Hinh 3.9 biểu đồ lớp chi tiét

Hinh 3.10 Biểu đỏ lớp hồn thiện

Hình 3.11 Mỏ hình cơ sở dữ liệu quan hệ của hệ thống quản lý địch vu

Hình 3.12 Biểu đỗ thành phản của hệ thống quản lý dịch vụ

Hình 3.13 Biểu đổ triển khai cho hệ thơng quản lý đích vụ

Hình 3.14 Trang chủ hệ thơng

Hình 3.15 Trang chỉ tiết địch v

Hình 3.16 Trang thanh tộn

Hình 3.17 Trang thanh tốn đch vụ

Hình 3.18 Trang quản trị đơn đặt hàng

Hinh 3.19 Trang chỉ tiết Bon đặt hing

MỤC LỤC .— = i DANH MỤC HÌNH VỀ

1.2.1 Nhting Breadcrumbs dién hình :

1.2 2, Breadcrumbs theo thudc tinh

1.23 Breadcrumbs theo dudug din Path Breadcrumbs,

1.3 Miu Hover Controls (Điều khiển chudt)

1.4 Miu Steps Left

1.5, Subscription Plans (Mẫu gói đăng ký)

1:6 Required Field Marker (Điểm đánh đấu trường bắt buộc) - +e- TÔ

17, Account Registration (Đăng ký tải khoản)

1.10 Min Progressive Disclosure

1.11 Lazy Registration (Ding ky luéi biểng) 1

1.12 Calendar Picker (mẫu lịch)

MỞ ĐẢU

1 Đật vấn để

Các ngôn ngữ lập trình lã công cụ để tạo ra các sản phẩm phản mềm Mỗi công cụ có điểm mạnh, điểm yêu nẻu sử dụng công cụ không đúng cách, ta sẽ khong thé tao ra mot san phẩm tốt Vậy lâm thé nao dé st dung công cụ một cách

ding cách Đó chính là tư duy giải thuật lập trình Tụ duy về giải thuật là cách chủng ta chia bài toán thánh từng bước nhỏ, từng bước, vá lấp ráp chủng thành một sản phẩm đúng

Khi xây dụng một hệ thông phản mễm luôn gấp phải các vẫn đẻ cản giải

quyét, van đẻ có thể đơn giản, cũng có thể phúc tạp, khó khăn Để cỏ thể giải quyết

‘van dé chúng ta cẩn tim ra các lời giải thích hợp nhất như mục tiêu mong muốn

dựa trên khả năng cũng như hạn chế của hệ thông, trải nghiệm người dùng trong

tương lai sẽ như nào

Đỏ là nguyên nhân ra đời của một thử sọi là Desisn Patterns~ Các Mẫu

“Thiết Kẻ Ta hấu hết đã nghe nói đến nó trong lĩnh vục xây đựng kiến trúc phản

mềm Vá giờ đây, ta nói tới các mẫu thiết kế trong lĩnh vực xảy dung giao điện

phản mẻm Mẫu thiết kể giao diện la những giải pháp để giái quyết những vấn để

thưởng gặp trên giao diện vả tương tác của người dùng phản mềm Nỏ là những bản mẫu, ta dựa vào đó xây dựng nên giao diện tương tác Nö giúp ta có những thiết kế mềm dẻo, dễ thay đổi

Design pattern là lợi thể khi thiết kế giao diện Thực tế cho thay rằng khi

áp dụng các mẫu thiết kẻ vào hệ thống đã và sẽ dem lại phản mềm thương mại

chất lượng cao, tin cậy, để mỡ rong, dé tái sử dụng phu hop với yêu cẫu người ding dang mong doi, Ngoài tiết kiệm thời gian và công sức, chúng cỏn cho khả năng trải nghiệm người dùng that để dàng thông qua giao điện và tương tác trên

hệ thẳng

2 Tính cẤp thiết của để tài

Với mong muốn tìm hiểu vả ủng dụng phương phap Design pattern UI dé

có thể xây dung các ứng dụng hiệu quả hơn cho VNPT Lão Cai, học viên đã chọn

‘Ap dung kỹ thuật thiết kế mẫm trong phát triển và kiểm thứ phẩm mém hé thong tarong mai dign tir VNPT Lào Caf`

MỞ ĐẢU

1 Đật vấn để

Các ngôn ngữ lập trình lã công cụ để tạo ra các sản phẩm phản mềm Mỗi công cụ có điểm mạnh, điểm yêu nẻu sử dụng công cụ không đúng cách, ta sẽ khong thé tao ra mot san phẩm tốt Vậy lâm thé nao dé st dung công cụ một cách

ding cách Đó chính là tư duy giải thuật lập trình Tụ duy về giải thuật là cách chủng ta chia bài toán thánh từng bước nhỏ, từng bước, vá lấp ráp chủng thành một sản phẩm đúng

Khi xây dụng một hệ thông phản mễm luôn gấp phải các vẫn đẻ cản giải

quyét, van đẻ có thể đơn giản, cũng có thể phúc tạp, khó khăn Để cỏ thể giải quyết

‘van dé chúng ta cẩn tim ra các lời giải thích hợp nhất như mục tiêu mong muốn

dựa trên khả năng cũng như hạn chế của hệ thông, trải nghiệm người dùng trong

tương lai sẽ như nào

Đỏ là nguyên nhân ra đời của một thử sọi là Desisn Patterns~ Các Mẫu

“Thiết Kẻ Ta hấu hết đã nghe nói đến nó trong lĩnh vục xây đựng kiến trúc phản

mềm Vá giờ đây, ta nói tới các mẫu thiết kế trong lĩnh vực xảy dung giao điện

phản mẻm Mẫu thiết kể giao diện la những giải pháp để giái quyết những vấn để

thưởng gặp trên giao diện vả tương tác của người dùng phản mềm Nỏ là những bản mẫu, ta dựa vào đó xây dựng nên giao diện tương tác Nö giúp ta có những thiết kế mềm dẻo, dễ thay đổi

Design pattern là lợi thể khi thiết kế giao diện Thực tế cho thay rằng khi

áp dụng các mẫu thiết kẻ vào hệ thống đã và sẽ dem lại phản mềm thương mại

chất lượng cao, tin cậy, để mỡ rong, dé tái sử dụng phu hop với yêu cẫu người ding dang mong doi, Ngoài tiết kiệm thời gian và công sức, chúng cỏn cho khả năng trải nghiệm người dùng that để dàng thông qua giao điện và tương tác trên

hệ thẳng

2 Tính cẤp thiết của để tài

Với mong muốn tìm hiểu vả ủng dụng phương phap Design pattern UI dé

có thể xây dung các ứng dụng hiệu quả hơn cho VNPT Lão Cai, học viên đã chọn

‘Ap dung kỹ thuật thiết kế mẫm trong phát triển và kiểm thứ phẩm mém hé thong tarong mai dign tir VNPT Lào Caf`

DANH MỤC HỈNH VỀ

"Hình 1.1 Ví đụ mẫn Breadcrumbs

Hình 12 Một loại Breadcrumbs theo thugc inh

THình 1.3 Vì đụ về các liên kết PHI Bresderimbs địt trên đường dẫn hiển Dị há đường din dé diéu hưởng đến trang mục tiêu mm Hah Liêu KẾ"Chỉnh sôa” được Hồtlg khí ngồi đùng đi chu quatöog phần của trúng

hồ sơ Faceboolk của họ, : = = : ianasiaal Hinh 15, Vi dy miu Hom

Hinh 1.6 Ví đụ mẫu các bước côn lại StatementStacker

Hinh 1.7, Vĩ dụ mẫu các bude con Iai Delicious

THình 1.8 Mẫn Wifoo hiển thị rõ rằng các gới đỉng kỷ của mình, gì cd vA sụ khác biệtgi0a

Hình 1.9 Mẫu Bảng đăng kỹ của Crazyess thú hi sự chỗ ÿ đến gôi "Cỡ bản" 10 đình 1.10 Haveamint.com đặt các điểm đảnh dâu "Bắt buộc” bền cạnh các nhân trường tiên biểu mẫu liên hệ của nó ma z " Tránh 11 1unẫu Vimeo cổ hình thúc đăng ký đơn gián nhưng hập dễn 12 Hình 1.12 Tumblr chi yêu cầu thông tìn tối thiểu cũa người đùng để đăng, - Hinh 1.13 Clemrleft phân biệt giữa các hành đồng chính và phư bằng màn sắc 13 Hinh 1.14, Flickr làm nồi bật hành động chỉnh bằng cảch đặt hành động phụ vào một nhăn

‘vi thm chi cd giã trị vĩ độ va kinh độ Hử Hình 1.17 Vi du mau Progressive Disclostre isi

Hình 1.18 Người dũng cỏ thể đọc nhận xét khi nhập vào iền kết "trả lời 16 Hin 1-19 Tinh năng tiết lộ liga tue cin YouTube, 1?

Hình 2.3 Mẫu Good đefault áp dụng cho VNPT

“Hình 2.4 Mẫu các Tab ap đụng cho VNPT.,

nh 3.5 Mẫu Tab đặt địch vụ áp dụng cho VNPT

Hinh 2.6 Phương thức cửa sẻ — sisi

Hinh 3.1 Lirge dé User case quản ý ee

Hinh 3.2 Lược đỏ Xem dich vu es

DANH MỤC HỈNH VỀ

"Hình 1.1 Ví đụ mẫn Breadcrumbs

Hình 12 Một loại Breadcrumbs theo thugc inh

THình 1.3 Vì đụ về các liên kết PHI Bresderimbs địt trên đường dẫn hiển Dị há đường din dé diéu hưởng đến trang mục tiêu mm Hah Liêu KẾ"Chỉnh sôa” được Hồtlg khí ngồi đùng đi chu quatöog phần của trúng

hồ sơ Faceboolk của họ, : = = : ianasiaal Hinh 15, Vi dy miu Hom

Hinh 1.6 Ví đụ mẫu các bước côn lại StatementStacker

Hinh 1.7, Vĩ dụ mẫu các bude con Iai Delicious

THình 1.8 Mẫn Wifoo hiển thị rõ rằng các gới đỉng kỷ của mình, gì cd vA sụ khác biệtgi0a

Hình 1.9 Mẫu Bảng đăng kỹ của Crazyess thú hi sự chỗ ÿ đến gôi "Cỡ bản" 10 đình 1.10 Haveamint.com đặt các điểm đảnh dâu "Bắt buộc” bền cạnh các nhân trường tiên biểu mẫu liên hệ của nó ma z " Tránh 11 1unẫu Vimeo cổ hình thúc đăng ký đơn gián nhưng hập dễn 12 Hình 1.12 Tumblr chi yêu cầu thông tìn tối thiểu cũa người đùng để đăng, - Hinh 1.13 Clemrleft phân biệt giữa các hành đồng chính và phư bằng màn sắc 13 Hinh 1.14, Flickr làm nồi bật hành động chỉnh bằng cảch đặt hành động phụ vào một nhăn

‘vi thm chi cd giã trị vĩ độ va kinh độ Hử Hình 1.17 Vi du mau Progressive Disclostre isi

Hình 1.18 Người dũng cỏ thể đọc nhận xét khi nhập vào iền kết "trả lời 16 Hin 1-19 Tinh năng tiết lộ liga tue cin YouTube, 1?

Hình 2.3 Mẫu Good đefault áp dụng cho VNPT

“Hình 2.4 Mẫu các Tab ap đụng cho VNPT.,

nh 3.5 Mẫu Tab đặt địch vụ áp dụng cho VNPT

Hinh 2.6 Phương thức cửa sẻ — sisi

Hinh 3.1 Lirge dé User case quản ý ee

Hinh 3.2 Lược đỏ Xem dich vu es

Bảng 3.3 Các thông tin của đơn đặt hang

Bảng 3.4 Kiểm tra các thông tin của đơn đặt hàn;

Bảng 3.5 Kiểm tra tỉnh trạng của địch vụ

Bảng 3.6 Cập nhật các thông tin về đơn dit hing

vi

MỤC LỤC .— = i DANH MỤC HÌNH VỀ

1.2.1 Nhting Breadcrumbs dién hình :

1.2 2, Breadcrumbs theo thudc tinh

1.23 Breadcrumbs theo dudug din Path Breadcrumbs,

1.3 Miu Hover Controls (Điều khiển chudt)

1.4 Miu Steps Left

1.5, Subscription Plans (Mẫu gói đăng ký)

1:6 Required Field Marker (Điểm đánh đấu trường bắt buộc) - +e- TÔ

17, Account Registration (Đăng ký tải khoản)

1.10 Min Progressive Disclosure

1.11 Lazy Registration (Ding ky luéi biểng) 1

1.12 Calendar Picker (mẫu lịch)

Bảng 3.3 Các thông tin của đơn đặt hang

Bảng 3.4 Kiểm tra các thông tin của đơn đặt hàn;

Bảng 3.5 Kiểm tra tỉnh trạng của địch vụ

Bảng 3.6 Cập nhật các thông tin về đơn dit hing

vi

Hinh 3.3 Lược đỏ Đat hang .s‹s<<6se

Mình 3.4 Biểu đồ trình tự cho chúc năng “Publish địch vụ"

Hình š.S Biểu đỏ trình tự cho chức nãng °Quản lý Ordert”

Hình 3.6 Biểu đổ trình tự cho chức ning “Publish dịch vụ"

Hinh 3.7 Biểu đổ trình tự cho chức nãng “Quan ly Orders”

Hình 3.8 Thiết kế triển khai

Hinh 3.9 biểu đồ lớp chi tiét

Hinh 3.10 Biểu đỏ lớp hồn thiện

Hình 3.11 Mỏ hình cơ sở dữ liệu quan hệ của hệ thống quản lý địch vu

Hình 3.12 Biểu đỗ thành phản của hệ thống quản lý dịch vụ

Hình 3.13 Biểu đổ triển khai cho hệ thơng quản lý đích vụ

Hình 3.14 Trang chủ hệ thơng

Hình 3.15 Trang chỉ tiết địch v

Hình 3.16 Trang thanh tộn

Hình 3.17 Trang thanh tốn đch vụ

Hình 3.18 Trang quản trị đơn đặt hàng

Hinh 3.19 Trang chỉ tiết Bon đặt hing

MỤC LỤC .— = i DANH MỤC HÌNH VỀ

1.2.1 Nhting Breadcrumbs dién hình :

1.2 2, Breadcrumbs theo thudc tinh

1.23 Breadcrumbs theo dudug din Path Breadcrumbs,

1.3 Miu Hover Controls (Điều khiển chudt)

1.4 Miu Steps Left

1.5, Subscription Plans (Mẫu gói đăng ký)

1:6 Required Field Marker (Điểm đánh đấu trường bắt buộc) - +e- TÔ

17, Account Registration (Đăng ký tải khoản)

1.10 Min Progressive Disclosure

1.11 Lazy Registration (Ding ky luéi biểng) 1

1.12 Calendar Picker (mẫu lịch)

1⁄13: Selùp'WHÙATkc:ck<eidkcidú hd hd hú Nga gà chú hi nGagdah is

1.14 Tiên trình phát trién Website hệ thông thương mại điện tit VNPT Lio Cai

'CHƯƠNG 2: MẪU THIÊT KÊ INTERFACE VA INTERACTION AP DUNG TRONG

PHAT TRIEN VA KIEM THU PHAN MEM mB

3.1 Yên cầu chung mẫu thiết kể ini inte 2

2.1.1 Kha ning sit dung va trii nghiém nguoi ditns 22 2.1.2 Quy trình thanh toàn thương mại điện tử 23 2.13 Mục tiều đề xuất các mẫu thiết kế giao điện và tương tác si 2:8 2.2 Che mẫu thiết kế tường tác và giao điện 24

2.2.1 Đănh giá Các mẫu thiết Kế hương tắc và giao diện

2.2.2 Danh sách mẫu thiết kể tương tác vã giao điện

3⁄3 Âp dụng Ckc mẫu thiết kế lượng tác về giao điện trong phát tiến phần mềm 46

2⁄4 Ấp dụng Các mẫu thiết kế tương tác và giao điện trong kiểm thử phản mềm 30

3.4.1 Interface trong kiểm thứ phần mềm

2.4.2 Cac Logi Interface trong kiểm thử phản mềm

3.1 Gidi thigu bai toim

3.1.1 Phat bidu bai toan

.3.1.2 Các thành phần của hệ thổng sc BhbtetbetemsaneseniSf

31.3 Kiến trúc mỗi trường hệ thông sca

3.2 Thu thép va phan tích yêu cầu ~ Mö hình USE CASE iS 3.2.1 Mục tiêu của hệ thống 3 3.2.2 Đặc tá các chức nẵng hệ thông yids SS 3.2.3, Nhan biết và mô hình các tác nhần và trường hợp sử dụng

-3.3.4 Biểu đỏ Use cases (Hình 3.1)

3.2.5 Mô hình hỏa nghiệp VỤ -eocseoeeoeceooeoseoe

3.3 Thủ thập và phản tích yêu câu — Mỏ hình khải niệm

3.3.1 Nhân biết các khái niệm (thiết kế mẫn)

3.3.2 Thuộc tính các lớp

3.3.3 Nhân biết các quan hệ các khái niềm ool 3.4 Hanh vihé théng — Cac bidu dé trinh tu oA 3.4.1 Biểu đồ trình tự hệ thẳng 4+ '+Breadcrumbs đường din phan cap tir trang quản trị đền trang địch vy Ad

+ Clear Primary Ations xỏa tắt cá thông tìn nội dung rêu form để nhập lịi 4*

‘+ Sleps Left người dũng thao tắc bẩm nút next để sang các bước tiếp theo, xem thong

tin khách hang nhập nổi dung trên form wn + Clear Primary Actions x6a tit ci thong tin mdi dang trên form để nhập lại 46 + Clear Primary Actions x6a tắt cả thông tin nội dung trén form dé nhip tai 47

3.6.3 Kết quả triển khai Trang chủ hệ thổng s22 S6 3.7 Dinh gia ting dụng phương pháp

KETLUAN VA HUONG PHAT TRIEN

FARE Ig nit

4.2 Hướng phát triển ate „ sai : 6L

3.3.3 Nhân biết các quan hệ các khái niềm ool 3.4 Hanh vihé théng — Cac bidu dé trinh tu oA 3.4.1 Biểu đồ trình tự hệ thẳng 4+ '+Breadcrumbs đường din phan cap tir trang quản trị đền trang địch vy Ad

+ Clear Primary Ations xỏa tắt cá thông tìn nội dung rêu form để nhập lịi 4*

‘+ Sleps Left người dũng thao tắc bẩm nút next để sang các bước tiếp theo, xem thong

tin khách hang nhập nổi dung trên form wn + Clear Primary Actions x6a tit ci thong tin mdi dang trên form để nhập lại 46 + Clear Primary Actions x6a tắt cả thông tin nội dung trén form dé nhip tai 47

3.6.3 Kết quả triển khai Trang chủ hệ thổng s22 S6 3.7 Dinh gia ting dụng phương pháp

KETLUAN VA HUONG PHAT TRIEN

FARE Ig nit

4.2 Hướng phát triển ate „ sai : 6L

MỤC LỤC .— = i DANH MỤC HÌNH VỀ

1.2.1 Nhting Breadcrumbs dién hình :

1.2 2, Breadcrumbs theo thudc tinh

1.23 Breadcrumbs theo dudug din Path Breadcrumbs,

1.3 Miu Hover Controls (Điều khiển chudt)

1.4 Miu Steps Left

1.5, Subscription Plans (Mẫu gói đăng ký)

1:6 Required Field Marker (Điểm đánh đấu trường bắt buộc) - +e- TÔ

17, Account Registration (Đăng ký tải khoản)

1.10 Min Progressive Disclosure

1.11 Lazy Registration (Ding ky luéi biểng) 1

1.12 Calendar Picker (mẫu lịch)

3.3.3 Nhân biết các quan hệ các khái niềm ool 3.4 Hanh vihé théng — Cac bidu dé trinh tu oA 3.4.1 Biểu đồ trình tự hệ thẳng 4+ '+Breadcrumbs đường din phan cap tir trang quản trị đền trang địch vy Ad

+ Clear Primary Ations xỏa tắt cá thông tìn nội dung rêu form để nhập lịi 4*

‘+ Sleps Left người dũng thao tắc bẩm nút next để sang các bước tiếp theo, xem thong

tin khách hang nhập nổi dung trên form wn + Clear Primary Actions x6a tit ci thong tin mdi dang trên form để nhập lại 46 + Clear Primary Actions x6a tắt cả thông tin nội dung trén form dé nhip tai 47

3.6.3 Kết quả triển khai Trang chủ hệ thổng s22 S6 3.7 Dinh gia ting dụng phương pháp

KETLUAN VA HUONG PHAT TRIEN

FARE Ig nit

4.2 Hướng phát triển ate „ sai : 6L

DANH MỤC HỈNH VỀ

"Hình 1.1 Ví đụ mẫn Breadcrumbs

Hình 12 Một loại Breadcrumbs theo thugc inh

THình 1.3 Vì đụ về các liên kết PHI Bresderimbs địt trên đường dẫn hiển Dị há đường din dé diéu hưởng đến trang mục tiêu mm Hah Liêu KẾ"Chỉnh sôa” được Hồtlg khí ngồi đùng đi chu quatöog phần của trúng

hồ sơ Faceboolk của họ, : = = : ianasiaal Hinh 15, Vi dy miu Hom

Hinh 1.6 Ví đụ mẫu các bước côn lại StatementStacker

Hinh 1.7, Vĩ dụ mẫu các bude con Iai Delicious

THình 1.8 Mẫn Wifoo hiển thị rõ rằng các gới đỉng kỷ của mình, gì cd vA sụ khác biệtgi0a

Hình 1.9 Mẫu Bảng đăng kỹ của Crazyess thú hi sự chỗ ÿ đến gôi "Cỡ bản" 10 đình 1.10 Haveamint.com đặt các điểm đảnh dâu "Bắt buộc” bền cạnh các nhân trường tiên biểu mẫu liên hệ của nó ma z " Tránh 11 1unẫu Vimeo cổ hình thúc đăng ký đơn gián nhưng hập dễn 12 Hình 1.12 Tumblr chi yêu cầu thông tìn tối thiểu cũa người đùng để đăng, - Hinh 1.13 Clemrleft phân biệt giữa các hành đồng chính và phư bằng màn sắc 13 Hinh 1.14, Flickr làm nồi bật hành động chỉnh bằng cảch đặt hành động phụ vào một nhăn

‘vi thm chi cd giã trị vĩ độ va kinh độ Hử Hình 1.17 Vi du mau Progressive Disclostre isi

Hình 1.18 Người dũng cỏ thể đọc nhận xét khi nhập vào iền kết "trả lời 16 Hin 1-19 Tinh năng tiết lộ liga tue cin YouTube, 1?

Hình 2.3 Mẫu Good đefault áp dụng cho VNPT

“Hình 2.4 Mẫu các Tab ap đụng cho VNPT.,

nh 3.5 Mẫu Tab đặt địch vụ áp dụng cho VNPT

Hinh 2.6 Phương thức cửa sẻ — sisi

Hinh 3.1 Lirge dé User case quản ý ee

Hinh 3.2 Lược đỏ Xem dich vu es

1⁄13: Selùp'WHÙATkc:ck<eidkcidú hd hd hú Nga gà chú hi nGagdah is

1.14 Tiên trình phát trién Website hệ thông thương mại điện tit VNPT Lio Cai

'CHƯƠNG 2: MẪU THIÊT KÊ INTERFACE VA INTERACTION AP DUNG TRONG

PHAT TRIEN VA KIEM THU PHAN MEM mB

3.1 Yên cầu chung mẫu thiết kể ini inte 2

2.1.1 Kha ning sit dung va trii nghiém nguoi ditns 22 2.1.2 Quy trình thanh toàn thương mại điện tử 23 2.13 Mục tiều đề xuất các mẫu thiết kế giao điện và tương tác si 2:8 2.2 Che mẫu thiết kế tường tác và giao điện 24

2.2.1 Đănh giá Các mẫu thiết Kế hương tắc và giao diện

2.2.2 Danh sách mẫu thiết kể tương tác vã giao điện

3⁄3 Âp dụng Ckc mẫu thiết kế lượng tác về giao điện trong phát tiến phần mềm 46

2⁄4 Ấp dụng Các mẫu thiết kế tương tác và giao điện trong kiểm thử phản mềm 30

3.4.1 Interface trong kiểm thứ phần mềm

2.4.2 Cac Logi Interface trong kiểm thử phản mềm

3.1 Gidi thigu bai toim

3.1.1 Phat bidu bai toan

.3.1.2 Các thành phần của hệ thổng sc BhbtetbetemsaneseniSf

31.3 Kiến trúc mỗi trường hệ thông sca

3.2 Thu thép va phan tích yêu cầu ~ Mö hình USE CASE iS 3.2.1 Mục tiêu của hệ thống 3 3.2.2 Đặc tá các chức nẵng hệ thông yids SS 3.2.3, Nhan biết và mô hình các tác nhần và trường hợp sử dụng

-3.3.4 Biểu đỏ Use cases (Hình 3.1)

3.2.5 Mô hình hỏa nghiệp VỤ -eocseoeeoeceooeoseoe

3.3 Thủ thập và phản tích yêu câu — Mỏ hình khải niệm

3.3.1 Nhân biết các khái niệm (thiết kế mẫn)

3.3.2 Thuộc tính các lớp

Hinh 3.3 Lược đỏ Đat hang .s‹s<<6se

Mình 3.4 Biểu đồ trình tự cho chúc năng “Publish địch vụ"

Hình š.S Biểu đỏ trình tự cho chức nãng °Quản lý Ordert”

Hình 3.6 Biểu đổ trình tự cho chức ning “Publish dịch vụ"

Hinh 3.7 Biểu đổ trình tự cho chức nãng “Quan ly Orders”

Hình 3.8 Thiết kế triển khai

Hinh 3.9 biểu đồ lớp chi tiét

Hinh 3.10 Biểu đỏ lớp hồn thiện

Hình 3.11 Mỏ hình cơ sở dữ liệu quan hệ của hệ thống quản lý địch vu

Hình 3.12 Biểu đỗ thành phản của hệ thống quản lý dịch vụ

Hình 3.13 Biểu đổ triển khai cho hệ thơng quản lý đích vụ

Hình 3.14 Trang chủ hệ thơng

Hình 3.15 Trang chỉ tiết địch v

Hình 3.16 Trang thanh tộn

Hình 3.17 Trang thanh tốn đch vụ

Hình 3.18 Trang quản trị đơn đặt hàng

Hinh 3.19 Trang chỉ tiết Bon đặt hing

3.3.3 Nhân biết các quan hệ các khái niềm ool 3.4 Hanh vihé théng — Cac bidu dé trinh tu oA 3.4.1 Biểu đồ trình tự hệ thẳng 4+ '+Breadcrumbs đường din phan cap tir trang quản trị đền trang địch vy Ad

+ Clear Primary Ations xỏa tắt cá thông tìn nội dung rêu form để nhập lịi 4*

‘+ Sleps Left người dũng thao tắc bẩm nút next để sang các bước tiếp theo, xem thong

tin khách hang nhập nổi dung trên form wn + Clear Primary Actions x6a tit ci thong tin mdi dang trên form để nhập lại 46 + Clear Primary Actions x6a tắt cả thông tin nội dung trén form dé nhip tai 47

3.6.3 Kết quả triển khai Trang chủ hệ thổng s22 S6 3.7 Dinh gia ting dụng phương pháp

KETLUAN VA HUONG PHAT TRIEN

FARE Ig nit

4.2 Hướng phát triển ate „ sai : 6L

DANH MỤC HỈNH VỀ

"Hình 1.1 Ví đụ mẫn Breadcrumbs

Hình 12 Một loại Breadcrumbs theo thugc inh

THình 1.3 Vì đụ về các liên kết PHI Bresderimbs địt trên đường dẫn hiển Dị há đường din dé diéu hưởng đến trang mục tiêu mm Hah Liêu KẾ"Chỉnh sôa” được Hồtlg khí ngồi đùng đi chu quatöog phần của trúng

hồ sơ Faceboolk của họ, : = = : ianasiaal Hinh 15, Vi dy miu Hom

Hinh 1.6 Ví đụ mẫu các bước côn lại StatementStacker

Hinh 1.7, Vĩ dụ mẫu các bude con Iai Delicious

THình 1.8 Mẫn Wifoo hiển thị rõ rằng các gới đỉng kỷ của mình, gì cd vA sụ khác biệtgi0a

Hình 1.9 Mẫu Bảng đăng kỹ của Crazyess thú hi sự chỗ ÿ đến gôi "Cỡ bản" 10 đình 1.10 Haveamint.com đặt các điểm đảnh dâu "Bắt buộc” bền cạnh các nhân trường tiên biểu mẫu liên hệ của nó ma z " Tránh 11 1unẫu Vimeo cổ hình thúc đăng ký đơn gián nhưng hập dễn 12 Hình 1.12 Tumblr chi yêu cầu thông tìn tối thiểu cũa người đùng để đăng, - Hinh 1.13 Clemrleft phân biệt giữa các hành đồng chính và phư bằng màn sắc 13 Hinh 1.14, Flickr làm nồi bật hành động chỉnh bằng cảch đặt hành động phụ vào một nhăn

‘vi thm chi cd giã trị vĩ độ va kinh độ Hử Hình 1.17 Vi du mau Progressive Disclostre isi

Hình 1.18 Người dũng cỏ thể đọc nhận xét khi nhập vào iền kết "trả lời 16 Hin 1-19 Tinh năng tiết lộ liga tue cin YouTube, 1?

Hình 2.3 Mẫu Good đefault áp dụng cho VNPT

“Hình 2.4 Mẫu các Tab ap đụng cho VNPT.,

nh 3.5 Mẫu Tab đặt địch vụ áp dụng cho VNPT

Hinh 2.6 Phương thức cửa sẻ — sisi

Hinh 3.1 Lirge dé User case quản ý ee

Hinh 3.2 Lược đỏ Xem dich vu es

MỤC LỤC .— = i DANH MỤC HÌNH VỀ

1.2.1 Nhting Breadcrumbs dién hình :

1.2 2, Breadcrumbs theo thudc tinh

1.23 Breadcrumbs theo dudug din Path Breadcrumbs,

1.3 Miu Hover Controls (Điều khiển chudt)

1.4 Miu Steps Left

1.5, Subscription Plans (Mẫu gói đăng ký)

1:6 Required Field Marker (Điểm đánh đấu trường bắt buộc) - +e- TÔ

17, Account Registration (Đăng ký tải khoản)

1.10 Min Progressive Disclosure

1.11 Lazy Registration (Ding ky luéi biểng) 1

1.12 Calendar Picker (mẫu lịch)

MỞ ĐẢU

1 Đật vấn để

Các ngôn ngữ lập trình lã công cụ để tạo ra các sản phẩm phản mềm Mỗi công cụ có điểm mạnh, điểm yêu nẻu sử dụng công cụ không đúng cách, ta sẽ khong thé tao ra mot san phẩm tốt Vậy lâm thé nao dé st dung công cụ một cách

ding cách Đó chính là tư duy giải thuật lập trình Tụ duy về giải thuật là cách chủng ta chia bài toán thánh từng bước nhỏ, từng bước, vá lấp ráp chủng thành một sản phẩm đúng

Khi xây dụng một hệ thông phản mễm luôn gấp phải các vẫn đẻ cản giải

quyét, van đẻ có thể đơn giản, cũng có thể phúc tạp, khó khăn Để cỏ thể giải quyết

‘van dé chúng ta cẩn tim ra các lời giải thích hợp nhất như mục tiêu mong muốn

dựa trên khả năng cũng như hạn chế của hệ thông, trải nghiệm người dùng trong

tương lai sẽ như nào

Đỏ là nguyên nhân ra đời của một thử sọi là Desisn Patterns~ Các Mẫu

“Thiết Kẻ Ta hấu hết đã nghe nói đến nó trong lĩnh vục xây đựng kiến trúc phản

mềm Vá giờ đây, ta nói tới các mẫu thiết kế trong lĩnh vực xảy dung giao điện

phản mẻm Mẫu thiết kể giao diện la những giải pháp để giái quyết những vấn để

thưởng gặp trên giao diện vả tương tác của người dùng phản mềm Nỏ là những bản mẫu, ta dựa vào đó xây dựng nên giao diện tương tác Nö giúp ta có những thiết kế mềm dẻo, dễ thay đổi

Design pattern là lợi thể khi thiết kế giao diện Thực tế cho thay rằng khi

áp dụng các mẫu thiết kẻ vào hệ thống đã và sẽ dem lại phản mềm thương mại

chất lượng cao, tin cậy, để mỡ rong, dé tái sử dụng phu hop với yêu cẫu người ding dang mong doi, Ngoài tiết kiệm thời gian và công sức, chúng cỏn cho khả năng trải nghiệm người dùng that để dàng thông qua giao điện và tương tác trên

hệ thẳng

2 Tính cẤp thiết của để tài

Với mong muốn tìm hiểu vả ủng dụng phương phap Design pattern UI dé

có thể xây dung các ứng dụng hiệu quả hơn cho VNPT Lão Cai, học viên đã chọn

‘Ap dung kỹ thuật thiết kế mẫm trong phát triển và kiểm thứ phẩm mém hé thong tarong mai dign tir VNPT Lào Caf`

MỞ ĐẢU

1 Đật vấn để

Các ngôn ngữ lập trình lã công cụ để tạo ra các sản phẩm phản mềm Mỗi công cụ có điểm mạnh, điểm yêu nẻu sử dụng công cụ không đúng cách, ta sẽ khong thé tao ra mot san phẩm tốt Vậy lâm thé nao dé st dung công cụ một cách

ding cách Đó chính là tư duy giải thuật lập trình Tụ duy về giải thuật là cách chủng ta chia bài toán thánh từng bước nhỏ, từng bước, vá lấp ráp chủng thành một sản phẩm đúng

Khi xây dụng một hệ thông phản mễm luôn gấp phải các vẫn đẻ cản giải

quyét, van đẻ có thể đơn giản, cũng có thể phúc tạp, khó khăn Để cỏ thể giải quyết

‘van dé chúng ta cẩn tim ra các lời giải thích hợp nhất như mục tiêu mong muốn

dựa trên khả năng cũng như hạn chế của hệ thông, trải nghiệm người dùng trong

tương lai sẽ như nào

Đỏ là nguyên nhân ra đời của một thử sọi là Desisn Patterns~ Các Mẫu

“Thiết Kẻ Ta hấu hết đã nghe nói đến nó trong lĩnh vục xây đựng kiến trúc phản

mềm Vá giờ đây, ta nói tới các mẫu thiết kế trong lĩnh vực xảy dung giao điện

phản mẻm Mẫu thiết kể giao diện la những giải pháp để giái quyết những vấn để

thưởng gặp trên giao diện vả tương tác của người dùng phản mềm Nỏ là những bản mẫu, ta dựa vào đó xây dựng nên giao diện tương tác Nö giúp ta có những thiết kế mềm dẻo, dễ thay đổi

Design pattern là lợi thể khi thiết kế giao diện Thực tế cho thay rằng khi

áp dụng các mẫu thiết kẻ vào hệ thống đã và sẽ dem lại phản mềm thương mại

chất lượng cao, tin cậy, để mỡ rong, dé tái sử dụng phu hop với yêu cẫu người ding dang mong doi, Ngoài tiết kiệm thời gian và công sức, chúng cỏn cho khả năng trải nghiệm người dùng that để dàng thông qua giao điện và tương tác trên

hệ thẳng

2 Tính cẤp thiết của để tài

Với mong muốn tìm hiểu vả ủng dụng phương phap Design pattern UI dé

có thể xây dung các ứng dụng hiệu quả hơn cho VNPT Lão Cai, học viên đã chọn

‘Ap dung kỹ thuật thiết kế mẫm trong phát triển và kiểm thứ phẩm mém hé thong tarong mai dign tir VNPT Lào Caf`

1⁄13: Selùp'WHÙATkc:ck<eidkcidú hd hd hú Nga gà chú hi nGagdah is

1.14 Tiên trình phát trién Website hệ thông thương mại điện tit VNPT Lio Cai

'CHƯƠNG 2: MẪU THIÊT KÊ INTERFACE VA INTERACTION AP DUNG TRONG

PHAT TRIEN VA KIEM THU PHAN MEM mB

3.1 Yên cầu chung mẫu thiết kể ini inte 2

2.1.1 Kha ning sit dung va trii nghiém nguoi ditns 22 2.1.2 Quy trình thanh toàn thương mại điện tử 23 2.13 Mục tiều đề xuất các mẫu thiết kế giao điện và tương tác si 2:8 2.2 Che mẫu thiết kế tường tác và giao điện 24

2.2.1 Đănh giá Các mẫu thiết Kế hương tắc và giao diện

2.2.2 Danh sách mẫu thiết kể tương tác vã giao điện

3⁄3 Âp dụng Ckc mẫu thiết kế lượng tác về giao điện trong phát tiến phần mềm 46

2⁄4 Ấp dụng Các mẫu thiết kế tương tác và giao điện trong kiểm thử phản mềm 30

3.4.1 Interface trong kiểm thứ phần mềm

2.4.2 Cac Logi Interface trong kiểm thử phản mềm

3.1 Gidi thigu bai toim

3.1.1 Phat bidu bai toan

.3.1.2 Các thành phần của hệ thổng sc BhbtetbetemsaneseniSf

31.3 Kiến trúc mỗi trường hệ thông sca

3.2 Thu thép va phan tích yêu cầu ~ Mö hình USE CASE iS 3.2.1 Mục tiêu của hệ thống 3 3.2.2 Đặc tá các chức nẵng hệ thông yids SS 3.2.3, Nhan biết và mô hình các tác nhần và trường hợp sử dụng

-3.3.4 Biểu đỏ Use cases (Hình 3.1)

3.2.5 Mô hình hỏa nghiệp VỤ -eocseoeeoeceooeoseoe

3.3 Thủ thập và phản tích yêu câu — Mỏ hình khải niệm

3.3.1 Nhân biết các khái niệm (thiết kế mẫn)

3.3.2 Thuộc tính các lớp

MỤC LỤC .— = i DANH MỤC HÌNH VỀ

1.2.1 Nhting Breadcrumbs dién hình :

1.2 2, Breadcrumbs theo thudc tinh

1.23 Breadcrumbs theo dudug din Path Breadcrumbs,

1.3 Miu Hover Controls (Điều khiển chudt)

1.4 Miu Steps Left

1.5, Subscription Plans (Mẫu gói đăng ký)

1:6 Required Field Marker (Điểm đánh đấu trường bắt buộc) - +e- TÔ

17, Account Registration (Đăng ký tải khoản)

1.10 Min Progressive Disclosure

1.11 Lazy Registration (Ding ky luéi biểng) 1

1.12 Calendar Picker (mẫu lịch)

1⁄13: Selùp'WHÙATkc:ck<eidkcidú hd hd hú Nga gà chú hi nGagdah is

1.14 Tiên trình phát trién Website hệ thông thương mại điện tit VNPT Lio Cai

'CHƯƠNG 2: MẪU THIÊT KÊ INTERFACE VA INTERACTION AP DUNG TRONG

PHAT TRIEN VA KIEM THU PHAN MEM mB

3.1 Yên cầu chung mẫu thiết kể ini inte 2

2.1.1 Kha ning sit dung va trii nghiém nguoi ditns 22 2.1.2 Quy trình thanh toàn thương mại điện tử 23 2.13 Mục tiều đề xuất các mẫu thiết kế giao điện và tương tác si 2:8 2.2 Che mẫu thiết kế tường tác và giao điện 24

2.2.1 Đănh giá Các mẫu thiết Kế hương tắc và giao diện

2.2.2 Danh sách mẫu thiết kể tương tác vã giao điện

3⁄3 Âp dụng Ckc mẫu thiết kế lượng tác về giao điện trong phát tiến phần mềm 46

2⁄4 Ấp dụng Các mẫu thiết kế tương tác và giao điện trong kiểm thử phản mềm 30

3.4.1 Interface trong kiểm thứ phần mềm

2.4.2 Cac Logi Interface trong kiểm thử phản mềm

3.1 Gidi thigu bai toim

3.1.1 Phat bidu bai toan

.3.1.2 Các thành phần của hệ thổng sc BhbtetbetemsaneseniSf

31.3 Kiến trúc mỗi trường hệ thông sca

3.2 Thu thép va phan tích yêu cầu ~ Mö hình USE CASE iS 3.2.1 Mục tiêu của hệ thống 3 3.2.2 Đặc tá các chức nẵng hệ thông yids SS 3.2.3, Nhan biết và mô hình các tác nhần và trường hợp sử dụng

-3.3.4 Biểu đỏ Use cases (Hình 3.1)

3.2.5 Mô hình hỏa nghiệp VỤ -eocseoeeoeceooeoseoe

3.3 Thủ thập và phản tích yêu câu — Mỏ hình khải niệm

3.3.1 Nhân biết các khái niệm (thiết kế mẫn)

3.3.2 Thuộc tính các lớp

DANH MỤC HỈNH VỀ

"Hình 1.1 Ví đụ mẫn Breadcrumbs

Hình 12 Một loại Breadcrumbs theo thugc inh

THình 1.3 Vì đụ về các liên kết PHI Bresderimbs địt trên đường dẫn hiển Dị há đường din dé diéu hưởng đến trang mục tiêu mm Hah Liêu KẾ"Chỉnh sôa” được Hồtlg khí ngồi đùng đi chu quatöog phần của trúng

hồ sơ Faceboolk của họ, : = = : ianasiaal Hinh 15, Vi dy miu Hom

Hinh 1.6 Ví đụ mẫu các bước côn lại StatementStacker

Hinh 1.7, Vĩ dụ mẫu các bude con Iai Delicious

THình 1.8 Mẫn Wifoo hiển thị rõ rằng các gới đỉng kỷ của mình, gì cd vA sụ khác biệtgi0a

Hình 1.9 Mẫu Bảng đăng kỹ của Crazyess thú hi sự chỗ ÿ đến gôi "Cỡ bản" 10 đình 1.10 Haveamint.com đặt các điểm đảnh dâu "Bắt buộc” bền cạnh các nhân trường tiên biểu mẫu liên hệ của nó ma z " Tránh 11 1unẫu Vimeo cổ hình thúc đăng ký đơn gián nhưng hập dễn 12 Hình 1.12 Tumblr chi yêu cầu thông tìn tối thiểu cũa người đùng để đăng, - Hinh 1.13 Clemrleft phân biệt giữa các hành đồng chính và phư bằng màn sắc 13 Hinh 1.14, Flickr làm nồi bật hành động chỉnh bằng cảch đặt hành động phụ vào một nhăn

‘vi thm chi cd giã trị vĩ độ va kinh độ Hử Hình 1.17 Vi du mau Progressive Disclostre isi

Hình 1.18 Người dũng cỏ thể đọc nhận xét khi nhập vào iền kết "trả lời 16 Hin 1-19 Tinh năng tiết lộ liga tue cin YouTube, 1?

Hình 2.3 Mẫu Good đefault áp dụng cho VNPT

“Hình 2.4 Mẫu các Tab ap đụng cho VNPT.,

nh 3.5 Mẫu Tab đặt địch vụ áp dụng cho VNPT

Hinh 2.6 Phương thức cửa sẻ — sisi

Hinh 3.1 Lirge dé User case quản ý ee

Hinh 3.2 Lược đỏ Xem dich vu es

DANH MỤC HỈNH VỀ

"Hình 1.1 Ví đụ mẫn Breadcrumbs

Hình 12 Một loại Breadcrumbs theo thugc inh

THình 1.3 Vì đụ về các liên kết PHI Bresderimbs địt trên đường dẫn hiển Dị há đường din dé diéu hưởng đến trang mục tiêu mm Hah Liêu KẾ"Chỉnh sôa” được Hồtlg khí ngồi đùng đi chu quatöog phần của trúng

hồ sơ Faceboolk của họ, : = = : ianasiaal Hinh 15, Vi dy miu Hom

Hinh 1.6 Ví đụ mẫu các bước côn lại StatementStacker

Hinh 1.7, Vĩ dụ mẫu các bude con Iai Delicious

THình 1.8 Mẫn Wifoo hiển thị rõ rằng các gới đỉng kỷ của mình, gì cd vA sụ khác biệtgi0a

Hình 1.9 Mẫu Bảng đăng kỹ của Crazyess thú hi sự chỗ ÿ đến gôi "Cỡ bản" 10 đình 1.10 Haveamint.com đặt các điểm đảnh dâu "Bắt buộc” bền cạnh các nhân trường tiên biểu mẫu liên hệ của nó ma z " Tránh 11 1unẫu Vimeo cổ hình thúc đăng ký đơn gián nhưng hập dễn 12 Hình 1.12 Tumblr chi yêu cầu thông tìn tối thiểu cũa người đùng để đăng, - Hinh 1.13 Clemrleft phân biệt giữa các hành đồng chính và phư bằng màn sắc 13 Hinh 1.14, Flickr làm nồi bật hành động chỉnh bằng cảch đặt hành động phụ vào một nhăn

‘vi thm chi cd giã trị vĩ độ va kinh độ Hử Hình 1.17 Vi du mau Progressive Disclostre isi

Hình 1.18 Người dũng cỏ thể đọc nhận xét khi nhập vào iền kết "trả lời 16 Hin 1-19 Tinh năng tiết lộ liga tue cin YouTube, 1?

Hình 2.3 Mẫu Good đefault áp dụng cho VNPT

“Hình 2.4 Mẫu các Tab ap đụng cho VNPT.,

nh 3.5 Mẫu Tab đặt địch vụ áp dụng cho VNPT

Hinh 2.6 Phương thức cửa sẻ — sisi

Hinh 3.1 Lirge dé User case quản ý ee

Hinh 3.2 Lược đỏ Xem dich vu es

Hinh 3.3 Lược đỏ Đat hang .s‹s<<6se

Mình 3.4 Biểu đồ trình tự cho chúc năng “Publish địch vụ"

Hình š.S Biểu đỏ trình tự cho chức nãng °Quản lý Ordert”

Hình 3.6 Biểu đổ trình tự cho chức ning “Publish dịch vụ"

Hinh 3.7 Biểu đổ trình tự cho chức nãng “Quan ly Orders”

Hình 3.8 Thiết kế triển khai

Hinh 3.9 biểu đồ lớp chi tiét

Hinh 3.10 Biểu đỏ lớp hồn thiện

Hình 3.11 Mỏ hình cơ sở dữ liệu quan hệ của hệ thống quản lý địch vu

Hình 3.12 Biểu đỗ thành phản của hệ thống quản lý dịch vụ

Hình 3.13 Biểu đổ triển khai cho hệ thơng quản lý đích vụ

Hình 3.14 Trang chủ hệ thơng

Hình 3.15 Trang chỉ tiết địch v

Hình 3.16 Trang thanh tộn

Hình 3.17 Trang thanh tốn đch vụ

Hình 3.18 Trang quản trị đơn đặt hàng

Hinh 3.19 Trang chỉ tiết Bon đặt hing

MỞ ĐẢU

1 Đật vấn để

Các ngôn ngữ lập trình lã công cụ để tạo ra các sản phẩm phản mềm Mỗi công cụ có điểm mạnh, điểm yêu nẻu sử dụng công cụ không đúng cách, ta sẽ khong thé tao ra mot san phẩm tốt Vậy lâm thé nao dé st dung công cụ một cách

ding cách Đó chính là tư duy giải thuật lập trình Tụ duy về giải thuật là cách chủng ta chia bài toán thánh từng bước nhỏ, từng bước, vá lấp ráp chủng thành một sản phẩm đúng

Khi xây dụng một hệ thông phản mễm luôn gấp phải các vẫn đẻ cản giải

quyét, van đẻ có thể đơn giản, cũng có thể phúc tạp, khó khăn Để cỏ thể giải quyết

‘van dé chúng ta cẩn tim ra các lời giải thích hợp nhất như mục tiêu mong muốn

dựa trên khả năng cũng như hạn chế của hệ thông, trải nghiệm người dùng trong

tương lai sẽ như nào

Đỏ là nguyên nhân ra đời của một thử sọi là Desisn Patterns~ Các Mẫu

“Thiết Kẻ Ta hấu hết đã nghe nói đến nó trong lĩnh vục xây đựng kiến trúc phản

mềm Vá giờ đây, ta nói tới các mẫu thiết kế trong lĩnh vực xảy dung giao điện

phản mẻm Mẫu thiết kể giao diện la những giải pháp để giái quyết những vấn để

thưởng gặp trên giao diện vả tương tác của người dùng phản mềm Nỏ là những bản mẫu, ta dựa vào đó xây dựng nên giao diện tương tác Nö giúp ta có những thiết kế mềm dẻo, dễ thay đổi

Design pattern là lợi thể khi thiết kế giao diện Thực tế cho thay rằng khi

áp dụng các mẫu thiết kẻ vào hệ thống đã và sẽ dem lại phản mềm thương mại

chất lượng cao, tin cậy, để mỡ rong, dé tái sử dụng phu hop với yêu cẫu người ding dang mong doi, Ngoài tiết kiệm thời gian và công sức, chúng cỏn cho khả năng trải nghiệm người dùng that để dàng thông qua giao điện và tương tác trên

hệ thẳng

2 Tính cẤp thiết của để tài

Với mong muốn tìm hiểu vả ủng dụng phương phap Design pattern UI dé

có thể xây dung các ứng dụng hiệu quả hơn cho VNPT Lão Cai, học viên đã chọn

‘Ap dung kỹ thuật thiết kế mẫm trong phát triển và kiểm thứ phẩm mém hé thong tarong mai dign tir VNPT Lào Caf`

Bảng 3.3 Các thông tin của đơn đặt hang

Bảng 3.4 Kiểm tra các thông tin của đơn đặt hàn;

Bảng 3.5 Kiểm tra tỉnh trạng của địch vụ

Bảng 3.6 Cập nhật các thông tin về đơn dit hing

vi

3.3.3 Nhân biết các quan hệ các khái niềm ool 3.4 Hanh vihé théng — Cac bidu dé trinh tu oA 3.4.1 Biểu đồ trình tự hệ thẳng 4+ '+Breadcrumbs đường din phan cap tir trang quản trị đền trang địch vy Ad

+ Clear Primary Ations xỏa tắt cá thông tìn nội dung rêu form để nhập lịi 4*

‘+ Sleps Left người dũng thao tắc bẩm nút next để sang các bước tiếp theo, xem thong

tin khách hang nhập nổi dung trên form wn + Clear Primary Actions x6a tit ci thong tin mdi dang trên form để nhập lại 46 + Clear Primary Actions x6a tắt cả thông tin nội dung trén form dé nhip tai 47

3.6.3 Kết quả triển khai Trang chủ hệ thổng s22 S6 3.7 Dinh gia ting dụng phương pháp

KETLUAN VA HUONG PHAT TRIEN

FARE Ig nit

4.2 Hướng phát triển ate „ sai : 6L

MỤC LỤC .— = i DANH MỤC HÌNH VỀ

1.2.1 Nhting Breadcrumbs dién hình :

1.2 2, Breadcrumbs theo thudc tinh

1.23 Breadcrumbs theo dudug din Path Breadcrumbs,

1.3 Miu Hover Controls (Điều khiển chudt)

1.4 Miu Steps Left

1.5, Subscription Plans (Mẫu gói đăng ký)

1:6 Required Field Marker (Điểm đánh đấu trường bắt buộc) - +e- TÔ

17, Account Registration (Đăng ký tải khoản)

1.10 Min Progressive Disclosure

1.11 Lazy Registration (Ding ky luéi biểng) 1

1.12 Calendar Picker (mẫu lịch)