4. CHƯƠNG 4: THIẾT KẾ PHẦN MỀM
4.3.31.Màn hình Chi tiết đơnhàng
- Thiết kế giao diện với tính đúng đắn:
Hình 4.75: Đối tượng trên màn hình Chi tiết đơn hàng
Ý nghĩa: Hiển thị thông tin chi tiết đơn hàng Các đối tượng trong màn hình:
STT Tên đối tượng Kiểu Ghi chú
1 Tiêu đê form Thẻ h4
2, 3, 4, 5, 6, 7, 8, 9
Nhãn và thông tin các trường
thông tin order Thẻ label
10 Nhãn danh sách sản phẩm Thẻ label
11 Bảng danh sách sản phẩm Thẻ table
12 Nút close modal Button
13 Nút clode modal Thẻ span
135
- Thiết kế xử lý:
Giao diện:
Hình 4.76: Xử lý trên màn hình Chi tiết đơn hàng
Danh sách xử lý: STT Tên xử lý Điều kiện gọi thực hiện Mô tả Ghi chú 1 Load thông tin chi tiết
đơn hàng
Click vào button kính
lúp ở trang quản lý
Lấy thông tin đơn hàng được chọn từ CSDL và hiển thị lên giao diện.
2
Đóng form chi tiết đơn
hàng
Click vào button "Cancel"
hoặc 'x'
Đóng giao diện chi tiết đơn hàng và hiển thị trang quản lý đơn hàng.
Bảng 4.71: Bảng mô tả xử lý trên màn hình Chi tiết đơn hàng 4.3.32. Màn hình Cập nhật trạng thái đơn hàng
- Thiết kế giao diện với tính đúng đắn:
Hình 4.77: Đối tượng trên màn hình Cập nhật trạng thái đơn hàng
Ý nghĩa: Cập nhật trạng thái đơn hàng. Các đối tượng trong màn hình: (adsbygoogle = window.adsbygoogle || []).push({});
136
STT Tên đối tượng Kiểu Ghi chú
1 Tiêu đề form Thẻ h4
2 Combobox trạng thái Thẻ select
3 Nút update trạng thái Button
4 Nút hủy Button
Bảng 4.72: Bảng mô tả đối tượng màn hình Cập nhật trạng thái đơnhàng
- Thiết kế xử lý:
Giao diện:
Hình 4.78: Xử lý trên màn hình Cập nhật trạng thái đơn hàng
Danh sách xử lý:
STT Tên xử lý Điều kiện gọi thực
hiện Mô tả Ghi chú 1 Cập nhật trạng thái đơn hàng Click vào button "Update"
Khi click vào button "Update" trạng thái đơn hàng được chọn từ combobox sẽ được cập nhật vào CSDL. 2 Hủy cập nhật trạng thái đơn hàng Click vào button "Cancel"
Hủy cập nhật và ẩn giao diện cập nhật trạng thái đơn hàng .
Bảng 4.73: Bảng mô tả xử lý trên màn hình Cập nhật trạng thái đơn hàng 4.3.32. Màn hình Quản lý tin nhắn
- Thiết kế giao diện với tính đúng đắn:
Hình 4.79: Đối tượng trên màn hình Quản lý tin nhắn
137 Các đối tượng trong màn hình:
STT Tên đối tượng Kiểu Ghi chú
1 Tiêu đề form Thẻ h3
2 Nút thêm tin nhắn mới Button
3 Bảng danh sách tin nhắn Thẻ tabel
4 Nút xóa tin nhắn Thẻ a, i
5 Danh sách trang Thẻ ul, li, a
6 Thông tin hiển thị tin nhắn Thẻ div
Bảng 4.74: Bảng mô tả đối tượng màn hình Quản lý tin nhắn
- Thiết kế xử lý:
Giao diện:
Hình 4.80: Xử lý trên màn hình Quản lý tin nhắn (adsbygoogle = window.adsbygoogle || []).push({});
Danh sách xử lý: STT Tên xử lý Điều kiện gọi thực hiện Mô tả Ghi chú 1 Lấy danh sách tin nhắn Click vào "Messages" trên giao diện các trang
Lấy danh sách các tin nhắn cũ và hiển thị lên giao diện.
2 Thêm tin
nhắn mới
Click vào button "Add
message"
Giao diện thêm tin nhắn được hiển thị.
3 Xóa tin
nhắn
Click vào button trash
Tin nhắn được chọn sẽ được xóa trong CSDL và cập nhật lại danh sách tin nhắn trên giao diện.
4 Chuyển
trang
Click vào số thứ tự trang cần chuyển
Lọc lại danh sách tin nhắn theo trang đã chọn và hiển thị lại lên giao diện.
138
4.3.33. Màn hình Thêm tin nhắn
- Thiết kế giao diện với tính đúng đắn:
Hình 4.81: Đối tượng trên màn hình Thêm tin nhắn
Ý nghĩa: Hiển thị danh sách tin nhắn đã gửi, thêm mới hoặc xóa tin nhắn. Các đối tượng trong màn hình:
STT Tên đối tượng Kiểu Ghi chú
1 Tiêu đề form Thẻ h3
2 Nội dung tin nhắn Thẻ textarea
3 Nút lưu tin nhắn Button
4 Nút hủy Button
Bảng 4.76: Bảng mô tả đối tượng màn hình Thêm tin nhắn
- Thiết kế xử lý:
Giao diện:
Hình 4.82: Xử lý trên màn hình Thêm tin nhắn
Danh sách xử lý: STT Tên xử lý Điều kiện gọi thực hiện Mô tả Ghi chú 1 Lưu tin nhắn Click vào button "Save" (adsbygoogle = window.adsbygoogle || []).push({});
Tin nhắn mới sẽ được thêm vào CSDL, đồng thời cập nhật lại danh sách tin nhắn trên giao diện.
2 Hủy thêm
tin nhắn
Click vào button "Cancel"
Hủy thêm tin nhắn mới và ẩn form thêm tin nhắn.
139
4.3.34. Màn hình Chat
- Thiết kế giao diện với tính đúng đắn:
Hình 4.83: Đối tượng trên màn hình Chat
Ý nghĩa: Trao đổi, trò chuyện, tư vấn realtime giữa khách hàng và quản trị viên. Các đối tượng trong màn hình:
STT Tên đối tượng Kiểu Ghi chú
1 Ảnh đại diện Thẻ img
2 Tên chat Thẻ div
3 Nút đóng box chat Thẻ img
4 Khung nền tin nhắn Thẻ div
5 Nội dung tin nhắn Thẻ span
6 Khung nhập nội dung tin nhắn Thẻ form, div
7 Nút mở icon box Button
8 Nút gửi tin nhắn Button
9 Box chat Thẻ div
140 - Thiết kế xử lý: Giao diện: Hình 4.84: Xử lý trên màn hình Chat Danh sách xử lý: STT Tên xử lý Điều kiện gọi thực hiện Mô tả Ghi chú 1 Lấy danh sách tin nhắn cũ Khi load page
Lấy danh sách tin nhắn của user và admin từ CSDL (Collections chats), hiển thị lên giao diện. 2 Mở box icon Khi click vào icon hình gương mặt
Mở box chứa icon cảm xúc, biểu tượng, để user/admin gửi kèm theo tin nhắn.
3 Gửi tin
nhắn
Khi click vào icon
mũi tên
Lưu vào CSDL, sau đó lấy lại danh sách tin nhắn mới hiển thị lên giao diện người gửi và người nhận.
4 Đóng box
chat (adsbygoogle = window.adsbygoogle || []).push({});
Khi click vào icon dấu
x
Thu nhỏ box chat vào icon chat nằm bên góc phải dưới của các màn hình giao diện của user và ở trang quản lý Chat của admin.
141
5. CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ PHẦN MỀM
5.1. CÀI ĐẶT
5.1.1. Chuẩn bị môi trường
- Download và cài đặt NodeJs tại trang chủ của Nodejs: https://nodejs.org/en/download/ - Download và cài đặt MongoDB tại đây:
https://www.mongodb.com/try/download/community?tck=docs_server - Thiết lập các biến môi trường cho cả NodeJs và MongoDB.
- Cài đặt Git (tùy chọn).
5.1.2. Các bước tiến hành
5.1.2.1. Import cơ sở dữ liệu
Hình 5.1: Danh sách Collection
Thông tin database: - Tên database: shoelg - Có 7 collections gồm:
+ chats: chứa thông tin chat giữa user và admin.
+ messages: chứa nội dung tin nhắn admin gửi thông báo đến các user. + orders: chứa thông tin đơn hàng khi user mua hàng.
+ productcategories: chứa thông tin danh mục sản phẩm. + products: chứa thông tin chi tiết của các sản phẩm. + statistics: chứa thông tin thống kê sản phẩm theo ngày. + users: chứa thông tin cá nhân người dùng.
Để import cơ sở dữ liệu ta thực hiện:
Mở cmd.
Dùng lệnh sau để import tất cả collection
mongorestore -d ten_CSDL duong_dan_den_CSDL Ví dụ: mongorestore -d shoelg D:\database
142
5.1.2.2. Chuẩn bị project và thiết lập trên IDE
- Project có thể lấy trong thư mục đính kèm hoặc clone hay download từ github. - Cách clone project từ github:
+ Đầu tiên, vào thư mục để chứa project sau khi clone về.
+ Nhấn Shift + click chuột phải, sau đó chọn Open command window here thì cửa số cmd xuất hiện.
+ Gõ lệnh có cú pháp như sau: git clone <url project từ github>, cụ thể cú pháp cho proejct: git clone https://github.com/thanhgiau2604/TLCN
- Sau khi có sẵn project, chúng ta mở project trên IDE, IDE phổ biến thường dùng là Microsoft Visual Studio Code.
- Mở cmd tại thư mục chứa project hoặc tại IDE Microsoft Visual Studio Code nhấn tổ hợp phím Ctrl + ` để mở command line, tiếp đến gõ lệnh: npm install để cài đặt các package cần thiết cho project (đảm bảo có kết nối mạng).
5.1.2.3. Truy cập phần mềm (adsbygoogle = window.adsbygoogle || []).push({});
- Sau khi cài đặt các package xong, bước cuối cùng là ta chạy server, mở browser và truy cập website.
- Tại command line, ta gõ lệnh npm start để chạy server.
- Sau khi server chạy thành công ta mở một trong các browser như Chrome, Firefox hoặc Cốc Cốc và gõ trên thanh địa chỉ url: http://localhost:3000 để truy cập website.
5.2. KIỂM THỬ PHẦN MỀM
5.2.1. Chiến lược và kế hoạch kiểm thử
- Để xây dựng nên một kế hoạch kiểm thử hoàn chỉnh giúp kiểm tra sản phẩm thỏa mãn được đặt tả thiết kế cả về giao diện lẫn chức năng thì việc đề ra chiến lược kiểm thử là rất quan trọng.
- Chiến lược kiểm thử sẽ bao gồm một số hoạt động như: + Xác định phạm vi kiểm thử của phần mềm.
+ Nhận biết được những rủi ro hoặc những yếu tố bất ngờ đối với sản phẩm phần mềm. + Xây dựng lịch kiểm thử chi tiết cho từng thành viên trong nhóm.
+ Xác định được môi trường kiểm thử.
- Các test case sẽ được viết và được phân chia theo từng kỹ thuật kiểm thử vào trong file excel, đồng thời dựa vào đó để phân công công việc giữa các thành viên trong nhóm.
143
- Các thành viên tuân theo lịch kiểm thử đã thực hiện sẵn, tiến thành kiểm thử và thực hiện lập báo cáo về kết quả kiểm thử.
- Sau khi có kết quả kiểm thử của tất cả các thành viên, nhóm sẽ một lần nữa lập lịch phân công sửa lỗi và sẽ ưu tiên những lỗi quan trọng trước. Và quá trình cứ lặp lại cho đến khi đạt được mục tiêu kiểm thử mà nhóm đề ra.
5.2.2. Một số kỹ thuật kiểm thử dùng trong dự án
Đối với mỗi chức năng, ta cần triển khai các kỹ thuật kiểm thử như:
1. Kiểm thử giao diện người dùng (UI Testing): Ở loại kiểm thử này, ta sẽ tập trung
kiểm thử về sự đúng đắn của các đối tượng có trên giao diện như: button, checkbox, input, link, combobox, …. về kích thước, vị trí, màu sắc, …
2. Kiểm thử chức năng (Functional Testing): Đối với việc kiểm thử chức năng ta sẽ
kiểm thử với nhiều bộ dữ liệu do chúng ta tạo ra bằng việc sử dụng một số phương pháp kiểm thử như: Kiểm thử giá trị biên, lớp tương đương, bảng quyết định, …
4. Kiểm thử việc tương thích với trình duyệt (Browser compatibility Testing): sử
dụng các loại trình duyệt phổ biến khác nhau như: IE, Chrome, Firefox, Cốc Cốc để xem và đánh giá.
5.2.3. Quy trình kiểm thử
- Quy trình kiểm thử được thực hiện theo 8 bước:
1. Chuẩn bị chiến lược kiểm thử (Preparing the test strategy)
Tiếp cận ban đầu, xác định chiến lược kiểm thử, tùy theo yêu cầu của khách hàng mà ưu tiên kiểm thử những nội dung nào trước, nội dung nào sau. Giai đoạn này thường phải đặt câu hỏi: Kiểm thử cái gì và kiểm thử như thế nào?
2. Chuẩn bị kế hoạch kiểm thử (Preparing the test plan)
Bước tiếp theo cần phải làm đó làm lập kế hoạch kiểm thử. Xác định và phân chia một cách hợp lý thời gian, nhân sự, các công cụ được sử dụng cho từng chức năng
3. Chuẩn bị môi trường kiểm thử (Preparing the test environment)
Ở bước này bạn cần phải chuẩn bị môi trường, nền tảng cho công việc kiểm thử phần mềm của mình gồm: Hệ điều hành (win 7, win 8, linux, IOS…), Trình duyệt (IE, Safari, Opera…), thiết bị (Moblie, tablet, deskop…)
144 (adsbygoogle = window.adsbygoogle || []).push({});
4. Viết test cases (Write test cases)
Thiết kế danh sách testcase từ các yêu cầu chức năng và phi chức năng (UI, Functional, Field Validation, Browser compatibility, Performance) theo như kế hoạch kiểm thử đã được làm trước đó.
5. Thực thi test cases (Executing the test cases)
Tiến hành thực thi các Case trong testcase/test scrips để thực hiện việc kiểm thử, quá trình này có thể update thêm một số case còn thiết hoặc những case phát sinh thêm.
6. Phân tích kết quả kiểm thử (Analyzing the results)
Phân tích kết quả đã kiểm thử để tìm hiểu nguyên nhân gây lỗi, đồng thời định hướng cách khắc phục và sau đó tiến hành sửa các lỗi.
7. Thực hiện kiểm thử hồi quy (Doing regression testing)
Kiểm thử hồi quy các lỗi đã được sửa.
8. Kết thúc kiểm thử (Test exiting)
Khi tất cả testcase đều đã pass, hoặc vẫn còn tồn tại lỗi nhưng lỗi nhỏ, không đáng kể vẫn đảm bảo yêu cầu đặc tả của phần mềm thì quá trình kiểm thử kết thúc.
145
5.2.4. Test case
5.2.4.1. Test case màn hình đăng nhập
146
5.2.4.2. Test case màn hình quên mật khẩu
147
5.2.4.3. Test case màn hình trang chủ user
148
5.2.4.4. Test case màn hình chi tiết sản phẩm
149
5.2.4.5. Test case màn hình danh mục sản phẩm
150
5.2.4.6. Test case màn hình lịch sử đơn hàng
Hình 5.7: Test case màn hình Lịch sử đơn hàng
151
152
5.2.4.8 Test case màn hình thống kê
153
PHẦN 3: KẾT LUẬN
1. KẾT QUẢ ĐẠT ĐƯỢC (adsbygoogle = window.adsbygoogle || []).push({});
- Về giao diện:
+ Xây dựng được tất cả các giao diện cần thiết và đồng bộ cho các chức năng của cả 3 actor Guest, User, Admin.
- Về chức năng:
+ Guest: đảm bảo được các chức năng cơ bản như đăng nhập, đăng ký, quên mật khẩu, xem sản phẩm, …
+ User: đảm bảo được các chức năng hỗ trợ cho user mua sản phẩm như: tìm kiếm sản phẩm, lọc danh sách sản phẩm, sắp xếp, lựa chọn size, màu sắc, xác nhận đơn hàng, thanh toán online, chat online, …
+ Admin: đảm bảo được vai trò quản lý của admin trong việc quản lý user, sản phẩm, danh mục sản phẩm, đơn hàng, gửi tin nhắn, chat online.
2. ƯU ĐIỂM
- Về giao diện:
+ Giao diện đơn giản, rõ ràng, dễ dàng sử dụng.
+ Guest và User có thể tìm kiếm sản phẩm ở bất cứ trang nào.
+ Validate các trường của các form, khi người dùng thực hiện thao tác sai sẽ báo lỗi cụ thể.
+ Sản phẩm được hiển thị đầy đủ các thông tin cần thiết như: hình ảnh, tên sản phẩm, giá sản phẩm.
+ User có thể thêm sản phẩm ở trang chủ và có thể chỉnh sửa lại ở trang thanh toán. - Về chức năng:
+ Hỗ trợ người dùng đăng nhập bằng nhiều cách khác nhau: đăng nhập qua Facebook, qua Google hoặc dùng Email/SDT, password đã đăng ký.
+ Mã hóa password trước khi lưu vào CSDL để đảm bảo tính bảo mật cho tài khoản. + Sử dụng JWT để tăng tính bảo mật và mỗi phiên đăng nhập kéo dài chỉ 1 giờ đồng hồ, hết thời gian đó muốn tiếp tục mua hàng, User phải đăng nhập lại.
+ Hỗ trợ chức năng lọc sản phẩm theo giá tiền, theo size của sản phẩm trong danh mục sản phẩm để User dễ dàng lựa chọn.
+ Sử dụng Google Api để tính phí ship dựa trên địa chỉ khách hàng nhập vào, hỗ trợ khách hàng xác định chính xác tọa độ của địa chỉ và hiển thị trên bản đồ.
154 + Sử dụng Google Analytics để theo dõi website.
+ Ứng dụng phương thức thanh toán không tiền mặt như: Paypal, Stripe, Vnpay, Zalopay, giúp cho khách hàng thuận tiện và có nhiều sự lựa chọn hơn trong việc thanh toán.
3. NHƯỢC ĐIỂM
- Về giao diện: về cơ bản, giao diện dễ quan sát, dễ sử dụng nhưng vẫn chưa bắt mắt, quá thu hút.
- Về chức năng:
+ Tính năng chat socket vẫn chưa xử lý trong trường hợp có nhiều admin quản lý website. + Cổng thanh toán vnpay vẫn chưa gửi request refund thành công, cổng thanh toán zalopay vẫn chưa nhận được callback để nhận thông tin, trạng thái thanh toán của khách hàng.
4. HƯỚNG PHÁT TRIỂN
- Khắc phục những nhược điểm đã nêu trên.
- Tích hợp thêm giao diện cũng như chức năng quản lý đơn hàng cho shipper.
- Tích hợp mô hình tích lũy điểm khi mua hàng và quy đổi thành khuyến mãi để thu hút khách hàng.