Đang tải... (xem toàn văn)
Mục đích củ đềa tài Mục tiêu của nghiên cứu này là để tăng trải nghiệm người dùng về quy trình thanh toán thương mại đi n t b ng cách cung cấp tổng quan về các mẫu ệ ử ằthiết kế giao diệ
TRƯỜ NG ĐẠI HỌC BÁCH KHOA HÀ NỘI LUẬN VĂN THẠC SĨ Ứng dụng phương pháp Design pattern phát triển kiểm thử phần mềm hệ thống thương mại điện tử VNPT Lào Cai PHÙNG THANH HỊA Ngành Cơng Nghệ Thông Tin Truyền Thông Giảng viên hướng dẫn: PGS.TS Huỳ nh Quyế t Thắ ng Viện: Công nghệ thông tin HÀ NỘI, 2020 Tai ngay!!! Ban co the xoa dong chu nay!!! 17061132226891000000 TRƯỜ NG ĐẠI HỌC BÁCH KHOA HÀ NỘI LUẬN VĂN THẠC SĨ Ứng dụng phương pháp Design pattern phát triển kiểm thử phần mềm hệ thống thương mại điện tử VNPT Lào Cai PHÙNG THANH HỊA Ngành Cơng Nghệ Thơng Tin Truyền Thông Giả ng viên hướng dẫn: Viện: PGS.TS Huỳnh Quyế t Thắ ng Công nghệ thông tin HÀ NỘI, 2020 Chữ ký GVHD CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lậ p – Tự – Hạnh phúc BẢN XÁC NHẬN CHỈNH SỬA LUẬN VĂN THẠC SĨ Họ tên tác giả luận văn: Phùng Thanh Hòa Đề tài luận văn: Áp dụng kỹ thuật thiết kế mẫu phát triển kiểm thử phần 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 tin Mã số SV: CB180084 Tác giả , Người hướng d ẫ n khoa họ c Hộ i đồ ng ch ấ m luậ n văn xác nhận tác giả sửa chữa, bổ sung luận văn theo biên họp Hội đồng ngày 31/10/2020 với nội dung sau: I 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 mẫu thiết k ế giao diện người dùng giới thiệu chi tiết mộ t số mẫu phổ biế n - Chương : Làm rõ, mô tả việc áp d ụng mẫu thiết kế s dụng hệ thống thương mạ i điện tử VNPT Lào Cai, ý nghĩa việ c áp dụ ng mang lại lợi ích gì, sửa theo góp ý nhậ n xét thầ y cô - Chương : Bổ sung việc áp dụng pattern kế t qu ả giao diện đố i với sơ đồ activity diagram II 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 viện sau đại học trường Đại học Bách Khoa Hà Nội - Thêm trích dẫn tài liệu tham khảo - Thêm trích dẫn hình ảnh sử dụng tham chiếu Ngày 13 tháng 12 năm 2020 Giáo viên hướng dẫn Tác giả luận văn CHỦ TỊ CH HỘI ĐỒNG MỤC LỤ C MỤC LỤ C i DANH MỤC HÌNH VẼ iv DANH MỤC BẢNG vi MỞ ĐẦ U 1 Đặt vấ n đề Tính cấ p thiết đ ề tài Phạm vi nghiên cứu Mụ c đích c đề tài Phương pháp nghiên cứu Bố c ục luận văn CHƯƠNG 1: MẪU THIẾT KẾ, CÁC MẪU, CHI TIẾT CÁC MẪU THIẾT KẾ TRONG PHÁT TRIỂ N PH ẦN M ỀM 1.1 Khái niệm b ản mẫu thiết kế giao diện người dùng 1.1.1 Khái niệm b ản 1.1.2 Các mẫ u thiết kế giao diện người dùng phổ biến 1.2 Mẫu Breadcrumbs 1.2.1 Những Breadcrumbs điển hình : 1.2 Breadcrumbs theo thuộc tính 1.2.3 Breadcrumbs theo đường dẫ n Path Breadcrumbs 1.3 Mẫu Hover Controls (Điều khiể n chuột) 1.4 Mẫu Steps Left 1.5 Subscription Plans (Mẫu gói đăng ký) 1.6 Required Field Marker (Điểm đánh dấu trường b buộ c) 10 1.7 Account Registration (Đăng ký tài khoản) 11 1.8 Clear Primary Actions 13 1.9 Forgiving Format 14 1.10 Mẫu Progressive Disclosure 15 1.11 Lazy Registration (Đăng ký lười biếng) 17 1.12 Calendar Picker (mẫu lịch) 19 i 1.13 Setup Wizard 20 1.14 Tiến trình phát triển Website hệ thống thương mại ệ n tử VNPT Lào Cai 21 CHƯƠNG 2: MẪU THIẾT KẾ INTERFACE VÀ INTERACTION ÁP DỤNG TRONG PHÁT TRIỂN VÀ KIỂ M TH Ử PHẦN M ỀM 22 2.1 Yêu cầu chung mẫu thiết kế 22 2.1.1 Khả sử dụng trải nghiệ m người dùng 22 2.1.2 Quy trình tốn thương mại điệ n tử 23 2.1.3 Mục tiêu đề xuất mẫu thiế t kế giao diện tương tác 23 2.2 Các mẫu thiết k ế tương tác giao diện 24 2.2.1 Đánh giá Các mẫ u thiết kế tương tác giao diện 24 2.2.2 Danh sách mẫu thiết kế tương tác giao diện 24 2.3 Áp dụng Các mẫu thiết kế tương tác giao diện phát triể n phần mềm 26 2.4 Áp dụng Các mẫu thiết kế tương tác giao diện kiểm thử phần mềm 30 2.4.1 Interface kiểm thử phần mềm 30 2.4.2 Các loại Interface kiểm th phần mềm 32 2.5 Ý tưởng áp dụ ng hệ thống Web VNPT Lào Cai 33 CHƯƠNG 3: ỨNG DỤNG PHƯƠNG PHÁP THIẾT KẾ MẪU 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 34 3.1 Giới thiệu toán 34 3.1.1 Phát biểu toán 34 3.1.2 Các thành phần hệ thống 34 3.1.3 Kiến trúc môi trường hệ thố ng 35 3.2 Thu thập phân tích u cầu – Mơ hình USE CASE 35 3.2.1 Mục tiêu hệ th ống 35 3.2.2 Đặc tả chức h ệ thố ng 35 3.2.3 Nhận biết mơ hình tác nhân trường h ợp sử dụng 36 3.2.4 Biểu đồ Use cases (Hình 3.1) 37 3.2.5 Mơ hình hóa nghiệ p vụ 38 3.3 Thu thập phân tích u cầu – Mơ hình khái niệm 40 3.3.1 Nhận biết khái niệ m (thiế t kế mẫu) 40 3.3.2 Thuộc tính lớp 40 ii 3.3.3 Nhận biết quan hệ khái niệm 41 3.4 Hành vi hệ thống – Các biểu đồ trình tự 42 3.4.1 Biểu đồ trình tự hệ thống 42 + Breadcrumbs đường dẫn phân cấp từ trang quản trị đến trang dịch vụ 44 + Clear Primary Actions xóa tấ t thơng tin nội dung form để nhập lại 45 + Steps Left người dùng thao tác bấm nút next để sang bước tiếp theo, xem thông tin khách hang nhậ p nội dung form 45 + Clear Primary Actions xóa tấ t thông tin nội dung form để nhập lại 46 + Clear Primary Actions xóa tấ t thơng tin nội dung form để nhập lại 47 3.5 Thiết kế hệ thống 48 3.5.1 Các biể u đồ cộng tác 48 3.5.2 Các biểu đ lớp thiết kế 49 3.5.3 Thiết kế triể n khai 49 3.5.4 Bổ sung thiết kế 51 3.5.5 Mơ hình hóa liệu 53 3.6 Cài đặt thiết kế 54 3.6.1 Biểu đồ thành phần 54 3.6.2 Biểu đồ triể n khai: 54 3.6.3 Kết triển khai Trang chủ hệ thố ng 56 3.7 Đánh giá ứng dụ ng phương pháp 59 KẾT LUẬN VÀ HƯỚ NG PHÁT TRIỂN 61 4.1 Kết luận 61 4.2 Hướng phát triể n 61 TÀI LIỆU THAM KHẢO 63 iii DANH MỤC HÌNH VẼ Hình 1.1 Ví dụ mẫu Breadcrumbs Hình 1.2 Một loại Breadcrumbs theo thuộc tính Hình 1.3 Ví dụ v ề liên k ết Path Breadcrumbs dựa đường dẫn hiể n thị hai đường d ẫn đ ể điều hướng đến trang mục tiêu Hình 1.4 Liên kết "Chỉnh sửa" tiết lộ người dùng di chuột qua phần trang h sơ Facebook họ Hình 1.5 Ví dụ mẫu Home Hình 1.6 Ví dụ mẫu bước lại StatementStacker Hình 1.7 Ví dụ mẫu bước lại Delicious Hình 1.8.Mẫu Wufoo hiển thị rõ ràng gói đăng ký mình, giá khác biệt chúng 10 Hình 1.9 Mẫu Bảng đăng ký Crazyegg thu hút ý đến gói "Cơ b ả n" 10 Hình 1.10 Haveamint.com đặt điểm đánh dấu “Bắt buộ c” bên cạnh nhãn trường biểu mẫu liên hệ củ a 11 Hình 1.11.mẫu Vimeo có hình thức đăng ký đơn giản hấp dẫn 12 Hình 1.12 Tumblr u cầu thơng tin tối thiểu người dùng để đăng ký 13 Hình 1.13 Clearleft phân biệt hành động phụ b ằng màu sắc 13 Hình 1.14 Flickr làm bật hành động cách đặt hành động phụ vào nhãn nhỏ bên 14 Hình 1.15 Tìm kiếm thời tiế t Yahoo cho phép người dùng tìm kiếm theo thành phố mã zip 15 Hình 1.16 Google Maps cho phép người dùng tìm kiếm theo thành phố, đường phố, mã zip th ậm chí giá trị vĩ độ kinh độ 15 Hình 1.17 Ví dụ mẫu Progressive Disclosure 16 Hình 1.18 Người dùng đọc nhận xét nhấp vào liên kết "Trả lời" 16 Hinh 1.19 Tính tiết lộ liên tục YouTube 17 Hình 1.20 Amazon cho phép bạ n duyệt thêm sản phẩm vào giỏ hàng trước đăng ký 18 Hình 1.21 Mẫu đăng ký Picnik 19 Hình 2.1 Mẫu Location Breadcrumbs áp dụng cho VNPT 26 Hình 2.2 Mẫu Date & time Picker áp dụng cho VNPT 26 Hình 2.3 Mẫu Good default áp dụ ng cho VNPT 27 Hình 2.4 Mẫu Tab áp dụng cho VNPT 28 Hình 2.5 Mẫu Tab đặt dị ch v ụ áp dụng cho VNPT 29 Hình 2.6 Phương thức cửa sổ 30 Hình 3.1 Lư ợc đ User case quản lý dịch vụ 37 Hình 3.2 Lư ợc đ Xem dich vu 38 iv Hình 3.3 Lư ợc đ Đat hang 39 Hình 3.4 Biểu đ trình tự cho chức “Publish dịch vụ” 42 Hình 3.5 Biểu đ trình tự cho chức “Quản lý Orders” 43 Hình 3.6 Biểu đ trình tự cho chức “Publish dịch vụ” 48 Hình 3.7 Biểu đ trình tự cho chức “Quản lý Orders” 48 Hình 3.8 Thiết k ế triển khai 49 Hình 3.9 biểu đồ lớp chi tiết 50 Hình 3.10 Biểu đ lớp hồn thiện 52 Hình 3.11 Mơ hình sở liệu quan hệ củ a hệ thố ng quản lý dịch vụ 53 Hình 3.12 Biểu đ thành phần hệ thố ng quản lý dịch vụ 54 Hình 3.13 Biểu đ triể n khai cho hệ thống n lý dịch vụ 55 Hình 3.14 Trang chủ hệ thống 56 Hình 3.15 Trang chi tiết dịch vụ 56 Hình 3.16 Trang tốn 57 Hình 3.17 Trang tốn dịch vụ 58 Hình 3.18 Trang quản trị đơn đặt hàng 58 Hình 3.19 Trang chi tiết Đơn đặt hàng 59 v DANH MỤC BẢNG Bảng 2.1 Bảng 3.1 Bảng 3.2 Bảng 3.3 Bảng 3.4 Bảng 3.5 Bảng 3.6 Danh sách mẫu 25 Thông tin d ịch vụ 44 Cậ p nhật thông tin dị ch vụ 44 Các thông tin đơn đ ặt hàng 44 Kiểm tra thông tin củ a đơn đặt hàng 45 Kiểm tra tình trạng dịch vụ 46 Cậ p nhật thông tin đơn đặt hàng 47 vi MỞ ĐẦU Đặt v ấn đề Các ngơn ngữ lập trình cơng cụ để tạ o 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 cách, ta tạo sả n phẩ m tố t Vậy làm để sử dụ ng cơng cụ cách cách Đó tư giải thuậ t lập trình Tư giải thuật cách chia toán thành bước nhỏ, t ừng bước, lắp ráp chúng thành sản phẩm Khi xây dựng hệ thố ng phầ n mềm gặ p phả i vấ n đề cầ n giải quyết, vấn đề đơn giản, phức tạp, khó khăn Để có th ể giải v ấn đ ề cần tìm lời giải thích hợp mục tiêu mong muốn dựa khả hạn chế củ a hệ thống, trải nghiệ m người dùng tương lai Đó nguyên nhân đời củ a mộ t thứ gọi Design Patterns – Các Mẫu Thiết Kế Ta hầu hết nghe nói đế n lĩnh vực xây dựng kiến trúc phần mềm Và đây, ta nói tới mẫu thiết k ế lĩnh vực xây dựng giao diện phần mề m Mẫ u thiết kế giao diện giải pháp để giả i vấ n đề thường gặp giao diện tương tác người dùng phần mềm 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ó thiết kế mềm dẻo, dễ thay đổi Design pattern lợi thiết kế giao diện Thực tế cho thấy rằ ng áp dụng mẫu thiế t kế vào hệ thố ng đem lại phần mềm thương mại chất lượng cao, tin cậy, dễ mở r ộng, dễ tái sử dụng, phù hợp với yêu cầu người dùng mong đợi Ngoài tiết kiệm thời gian cơng sức, chúng cịn cho khả trải nghiệm người dùng thật dễ dàng thông qua giao diện tương tác h ệ thống Tính cấp thiết đề tài Với mong muốn tìm hiểu ứng dụng phương pháp Design pattern UI để xây dựng ứng dụng hiệu cho VNPT Lào Cai, học viên chọn làm đồ án: “Áp dụng kỹ thuật thiết kế mẫu phát triển kiểm thử phần mềm hệ thống thương mại điện tử VNPT Lào Cai”