• Là người dùng hệ thống , tôi muốn tìm kiếm thông tin của người dùng đã đăng ký tài khoản trên hệthống theo từ khoá hoặc theo tag... 3 Requirements3.1 Functional requirements Các yêu cầ
Project Description
Website "BKPass" do nhóm Bình Minh phát triển là nền tảng hỗ trợ sinh viên trường Đại học Bách Khoa - ĐHQG TP HCM (HCMUT) trong việc trao đổi vật phẩm.
Hiện nay, cộng đồng sinh viên HCMUT trên mạng xã hội thường xuyên đăng bài bán đồ đã qua sử dụng hoặc không cần thiết Tuy nhiên, hoạt động này cũng gây ra một số bất cập cần được xem xét.
• Tình trạng bị trôi bài tại một số thời điểm đặc biệt, khiến cho việc mua hàng mất nhiều thời gian để kiểm tra và theo dõi.
Sự uy tín giữa bên bán và bên mua thường không được đảm bảo, dẫn đến việc một số sinh viên trở thành nạn nhân của các vụ lừa đảo Hơn nữa, chất lượng sản phẩm thường không đúng như mô tả, gây ra nhiều phiền toái cho người tiêu dùng.
Việc đăng quá nhiều bài trong một ngày có thể ảnh hưởng tiêu cực đến chất lượng của nhóm, vì theo chính sách hiện tại của Facebook, mỗi nhóm chỉ được phép tối đa 20 bài đăng trong một ngày Điều này có thể dẫn đến việc một số bài viết bị hệ thống đánh dấu là tin rác và bị xóa.
Nhóm đã phát triển ý tưởng xây dựng một Website hỗ trợ sinh viên Đại học Bách Khoa trong việc trao đổi vật phẩm Nền tảng này không chỉ giúp tạo dựng kết nối đáng tin cậy giữa người mua và người bán, mà còn mang lại sự thuận tiện trong việc lựa chọn và rao bán sản phẩm với giá cả hợp lý, cùng với quy trình trao đổi nhanh chóng và hiệu quả.
Project Goals
Stakeholders
• Người mua cũng có thể là người bán và ngược lại.
User story
• Là người dùng hệ thống , tôi muốn được tạo tài khoản và trở thành người mua/ bán chính thức.
• Là người dùng hệ thống , tôi muốn tìm thông tin sản phẩm bất kì đang được rao bán thông qua tag/ tên.
• Là người dùng hệ thống , tôi muốn xem thông tin liên lạc của người bán sau khi đã đăng nhập thành công.
• Là người mua, tôi muốn xem lịch sử mua hàng từ bất kì thiết bị nào đăng nhập tài khoản của tôi.
• Là người mua, tôi muốn thêm/ cập nhật/ xóa đánh giá và bình luận về người bán.
• Là người bán, tôi muốn xem lịch sử bán hàng từ bất kì thiết bị nào đăng nhập tài khoản của tôi.
• Là người bán, tôi muốn thêm/ cập nhật/ xóa sản phẩm mới vào danh sách bán hàng của tôi.
• Là người bán, tôi muốn xem lịch sử bán hàng từ bất kì thiết bị nào đăng nhập tài khoản của tôi.
• Là người dùng hệ thống , tôi muốn tìm kiếm thông tin của người dùng đã đăng ký tài khoản trên hệ thống theo từ khoá hoặc theo tag.
Functional requirements
Các yêu cầu chức năng gồm có:
• Đăng nhập, đăng xuất, tạo tài khoản
• Tạo, sửa, xóa bài đăng sản phẩm
• Tìm kiếm sản phẩm theo tag, theo tên
• Xem thông tin người bán
• Đánh giá và xem các đánh giá về người bán
• Đánh dấu sản phẩm, xem danh sách sản phẩm đã đánh dấu
• Xem danh sách sản phẩm đã bán
Từ đó, nhóm tổ chức các tính năng của hệ thống theo các Actor như sau:
Actor Chức năng Tên thành viên
Người dùng chung Tìm kiếm theo tag, theo tên Phạm Minh Duy Người bán Đăng, sửa, gỡ thông tin mặt hàng Kha Sang
Người dùng Trần Minh Tân đã tạo tài khoản và tra cứu thông tin cá nhân Người dùng Nguyễn Vĩnh Sang đã để lại nhận xét về chất lượng dịch vụ của người bán Bùi Hoàng Phi đã xem lại lịch sử giao dịch mua và bán hàng của mình.
Non-functional requirements
Các yêu cầu phi chức năng gồm có:
Type 1: Usability/ Tính khả dụng
1.1 Người dùng có thể sử dụng toàn bộ hệ thống sau 15 phút hướng dẫn.
1.2 Responsive website với kích thước dao động từ điện thoại cho đến màn hình tivi 4K.
Việc sử dụng nền tảng tương tự như các trang bán hàng phổ biến hiện nay, với các tính năng tương đồng, giúp người dùng dễ dàng làm quen và sử dụng trên nhiều thiết bị khác nhau.
1.4 Giao diện bắt mắt, các danh mục chính đều nằm trong vùng màn hình đầu tiên - không phải cuộn xuống để hiện đầy đủ các danh mục.
1.5 Giao diện không gây lỗi render trên các trình duyệt phổ biến (Chrome 43.0, Microsoft Edge 10.0, Mozilla 16.0, Safari 9.0 trở lên).
Type 2: Security/ Tính bảo mật
2.1 Thông tin của người dùng được bảo mật kĩ dưới nhiều dạng/ lớp mã hoá (ví dụ như SHA256 encoder cho mật khẩu).
Để tăng cường bảo mật, người dùng nên đặt mật khẩu khó, với độ dài tối thiểu 8 ký tự, bao gồm chữ cái, số và ký tự đặc biệt Nếu người dùng nhập sai mật khẩu 5 lần trong vòng 30 giây, hệ thống sẽ tạm thời khóa tài khoản trong 5 phút để ngăn chặn truy cập trái phép.
2.3 Hệ thống bảo mật không bị ảnh hưởng khi thay đổi công nghệ hệ thống hoặc bởi những tác nhân khác ngoài chính người dùng đó.
Type 3: Reliability/ Tính tin cậy
3.1 Downtime của website mỗi tháng không quá 1 giờ.
3.2 Ứng dụng có thể xử lý khoảng 1000 giao dịch trong 1 giờ với xác suất thành công là trên 90%. Type 4: Performance/ Hiệu năng
4.1 Thời gian chuyển trang không quá 2s trong điều kiện kết nối bình thường.
Thời gian phản hồi cho 80% giao dịch không vượt quá 1500 mili giây kể từ khi người dùng gửi yêu cầu Bên cạnh đó, thời gian tải các thành phần trong trang và giữa các Router cũng diễn ra nhanh chóng, trong khoảng 1 đến 2 giây.
Type 5: Availability/ Tính có sẵn
5.1 Trang web đảm bảo hoạt động ổn định 24/7, kể cả ngày lễ và giờ cao điểm.
Type 6: Extensibility/ Tính mở rộng
Việc thêm các module chức năng mới vào chương trình trở nên dễ dàng mà không cần thay đổi cấu trúc cũ Điều này cho phép tích hợp các chức năng phụ trợ vào những chức năng hiện có, đồng thời mở ra khả năng nâng cao hiệu suất cho chúng trong tương lai.
4 Use-case diagram and Use-case scenario
Xem mặt hàng đã mua
Xem mặt hàng đã bán
Xem tất cả đánh giá về người bán
Thêm bình luận, đánh giá người bán
Sửa thông tin mặt hàng
Tìm kiếm mặt hàng theo tên
Tìm kiếm mặt hàng theo tag
Người mua Xoá đánh giá
Hình 1: Use case diagram tổng
Tìm kiếm theo tag, theo tên
Tìm mặt hàng theo tên mặt hàng
Tìm mặt hàng theo tag của mặt hàng Người dùng chung
Hình 2: Use case diagram cho chức năng thao tác mặt hàng
Tên use-case Tìm kiếm mặt hàng theo tên
Mô tả Người dùng chung tìm kiếm mặt hàng mình muốn mua bằng cách nhập tên mặt hàng Precondition Người dùng ở trang tìm kiếm theo tên
Postcondition Hệ thống tìm thấy một danh sách mặt hàng có tên chứa chuỗi mà người dùng nhập vào
1 Người dùng nhập tên mặt hàng cần tìm vào ô tìm kiếm
2 Người dùng nhấn nút "Tìm kiếm"
3 Hệ thống tìm kiếm mặt hàng có tên chứa chuỗi mà người dùng nhập vào
4 Hệ thống hiển thị 10 mặt hàng được đăng gần nhất.
Exception flow Tại bước 3: Nếu hệ thống không tìm thấy mặt hàng nào thì thông báo cho người dùng “Không tìm thấy”
Alternative flow Tại bước 4: Người dùng chọn số trang để xem các sản phẩm tiếp theo
Tên use-case Tìm kiếm mặt hàng theo tag
Mô tả Người dùng chung tìm kiếm mặt hàng mình muốn bằng cách nhập tên tag Precondition Người dùng ở trang tìm kiếm theo tag
Postcondition Hệ thống tìm thấy một danh sách mặt hàng có tag là tag mà người dùng chọn
1 Người dùng nhập tên tag cần tìm vào ô tìm kiếm
2 Người dùng nhấn nút “Tìm kiếm”
3 Hệ thống hiển thị các tag có chứa chuỗi mà người dùng nhập vào
5 Hệ thống hiển thị 10 mặt hàng được đăng gần nhất và có chứa tag mà người dùng chọn.
Exception flow Tại bước 5 Nếu hệ thống không tìm thấy mặt hàng nào thì thông báo cho người dùng “Không tìm thấy”
Alternative flow Tại bước 5: Người dùng chọn số trang để xem các sản phẩm tiếp theo
Thao tác với mặt hàng
Sửa thông tin mặt hàng
Hình 3: Use case diagram cho chức năng thao tác mặt hàng
Tên use-case Thêm mặt hàng
Descriptions Người bán hàng có thể thêm mặt hàng của mình để rao bán.
Triggers Người dùng ấn vào biểu tượng "Đăng bán"
Precondition Người dùng đăng nhập thành công vào hệ thống, trang web đang hoạt động tốt và không bảo trì.
Postcondition Một sản phẩm mới được thêm trên danh sách mặt hàng của người rao bán.
1 Người bán ấn vào biểu tượng "Đăng bán" tại trang chủ.
2 Hệ thống hiển thị biểu mẫu đăng kí mặt hàng.
3 Người bán cung cấp tên, nhãn và các thông tin khác cho sản phẩm, sau đó ấn xác nhận.
4 Hệ thống hiển thị toàn bộ thông tin mà người bán cung cấp về sản phẩm.
5 Người dùng xác nhận thông tin đã cung cấp.
6 Hệ thống hiển thị "Thêm mặt hàng thành công".
Tại bước 5: Người bán muốn thay đổi lại thông tin 5.1 Người bán ấn nút "Chỉnh sửa".
5.2 Trở lại bước 2 Exception Flows
Tại bước 2: Người bán hủy thêm mặt hàng.
2.1 Người bán ấn nút "Hủy thêm mặt hàng".
2.2 Hệ thống trả giao diện về bước 1.
Tên use-case Sửa thông tin mặt hàng
Descriptions Người bán hàng có thể chỉnh sửa thông tin trên mặt hàng của mình.
Triggers Người dùng ấn vào biểu tượng "Mặt hàng của tôi"
Precondition Người dùng đăng nhập thành công và đang ở trang chủ, website đang hoạt động tốt và không bảo trì.
Postcondition Mặt hàng của người bán lựa chọn đã được chỉnh sửa.
1 Người dùng ấn vào biểu tượng "Mặt hàng của tôi".
2 Hệ thống hiển thị danh sách mặt hàng đang bán.
3 Người dùng ấn vào một sản phẩm X cần thay đổi.
4 Hệ thống hiển thị toàn bộ thông tin mà người bán cung cấp về sản phẩm.
5 Người bán ấn biểu tượng "Chỉnh sửa mô tả".
6 Hệ thống hiển thị trang chỉnh sửa thông tin mặt hàng.
7 Người dùng nhập thông tin ở các ô sửa đổi hoặc thêm mô tả ở các mục trống.
8 Hệ thống hiển thị toàn bộ thông tin mà người bán cung cấp về sản phẩm.
9 Người dùng xác nhận thông tin.
10 Hệ thống hiển thị "Thêm mặt hàng thành công".
Tại bước 9: Người bán muốn thay đổi lại thông tin 9.1 Người bán ấn nút "Chỉnh sửa".
9.2 Trở lại bước 6 Exception Flows
Tại bước 6: Người bán hủy xác nhận thay đổi thông tin 6.1 Người bán ấn nút "Hủy chỉnh sửa".
6.2 Hệ thống trả về bước 3.
Tên use-case Xóa mặt hàng
Descriptions Người bán hàng có thể xóa mặt hàng đang/ đã rao bán của mình.
Triggers Người dùng ấn vào biểu tượng "Mặt hàng của tôi"
Precondition Người dùng đăng nhập thành công vào hệ thống, trang web đang hoạt động tốt và không bảo trì.
Postcondition Mặt hàng đã chọn được xóa.
1 Người dùng ấn vào biểu tượng "Mặt hàng của tôi".
2 Hệ thống hiển thị danh sách mặt hàng đang bán.
3 Người dùng ấn vào một sản phẩm X cần thay đổi.
4 Hệ thống hiển thị toàn bộ thông tin mà người bán cung cấp về sản phẩm.
5 Người bán ấn vào biểu tượng "Xóa mặt hàng".
6 Người bán xác nhận xóa sản phẩm khỏi hệ thống.
7 Hệ thống hiển thị "Xóa mặt hàng X thành công".
Tại bước 6: Người bán hủy xác nhận xóa mặt hàng.
6.1 Người bán ấn nút "Hủy xác nhận".
6.2 Hệ thổng trở về bước 4.
Tạo tài khoản và Tra thông tin người dùng
Hình 4: Use case diagram cho chức năng tạo tài khoản và tìm kiếm người dùng
Tên use-case Tạo tài khoản
Descriptions Khách có thể tạo tài khoản.
Triggers Người dùng bấm vào mục "Tài khoản", sau đó chọn "Đăng ký".
Precondition Người dùng không đăng nhập bất kì tài khoản nào trong hệ thống
Postcondition Người dùng tạo tài khoản thành công
1 Khách nhấn vào mục "Tài khoản"
3 Khách điền thông tin cần thiết để đăng ký tài khoản
4 Hệ thống xác nhận khách điền đủ các trường bắt buộc và hợp lệ.
Exception Flows Sau bước 1 hoặc bước 2 khách bấm "Huỷ đăng ký" để trở về trang chủ.
Tên use-case Tìm kiếm thông tin người dùng
Khách có thể tìm kiếm thông tin của những người dùng khác nhằm phục vụ nhu cầu tìm hiểu thông tin về sản phẩm, bản thân người dùng.
Triggers Người dùng gõ từ khoá tìm kiếm và nhấn Enter trong mục ô tìm kiếm.
Precondition Người dùng có thể đăng nhập hoặc chưa đăng nhập
Postcondition Người dùng tìm kiếm thông tin người dùng thành công
1 Người dùng điền từ khoá vào ô tìm kiếm
2 Người dùng bấm vào nút "Tìm kiếm" hoặc nhấn Enter.
3 Hệ thống phản hồi 10 kết quả gần đúng với từ khoá người dùng đưa ra.
Có thể sang trang sau.
4 Chọn mục "Tìm người bán".
5 Hệ thống phản hồi 10 kết quả gần đúng với từ khoá người dùng đưa ra và bộ lọc "Tìm người bán" Có thể sang trang sau.
Nhận xét về người bán
Xem bình luận và đánh giá
Hình 5: Use case diagram cho chức năng thêm đánh giá
Tên use-case Xem bình luận và đánh giá
Descriptions Người dùng có thể xem nhận xét và đánh giá về người bán.
Triggers Người dùng ấn vào biểu tượng "Xem thông tin".
Precondition Người dùng đăng nhập thành công và đang ở trang của sản phẩm của người bán, website đang hoạt động tốt và không bảo trì.
Postcondition Xem được các đánh giá của người bán.
1 Người dùng ấn vào biểu tượng "Xem thông tin".
2 Hệ thống hiển thị ra trang cá nhân của người bán, phía trên là thông tin người dùng, phía dưới là các bình luận, đánh giá
Tên use-case Thêm bình luận và đánh giá
Descriptions Người dùng có thể thêm nhận xét và đánh giá về người bán.
Triggers Người dùng ấn vào biểu tượng "Thêm đánh giá".
Precondition Người dùng đăng nhập thành công và đang ở trang "Xem các đánh giá", website đang hoạt động tốt và không bảo trì.
Postcondition Thêm đánh giá cho người bán.
1 Người dùng ấn vào biểu tượng "Xem đánh giá".
2 Hệ thống hiển thị danh sách các bình luận, đánh giá, kèm theo biểu tượng "Thêm đánh giá."
3 Người dùng ấn vào biểu tượng "Thêm đánh giá".
4 Hệ thống hiển thị ra biểu mẫu để điền bình luận và đánh giá (dựa trên số sao - tối đa 5).
5 Người dùng điền vào phần bình luận và đánh giá sao.
6 Người dùng nhấn biểu tượng "Xác nhận".
7 Hệ thống hiển thị "Thêm đánh giá thành công"
Tại bước 6: Người dùng hủy thêm đánh giá.
6.1 Người dùng ấn nút "Hủy".
Quản lý mặt hàng đã mua, bán
Hình 6: Use case diagram cho chức năng quản lý mặt hàng đã mua, bán.
Tên use-case Xem mặt hàng đã mua
Descriptions Người mua có thể xem tất cả mặt hàng đã mua
Triggers Người mua ấn vào biểu tượng "Lịch sử mua hàng".
Precondition Người dùng đăng nhập thành công và đang ở trang "Tài khoản của tôi", website đang hoạt động tốt và không bảo trì.
1 Người mua ấn vào biểu tượng "Lịch sử mua hàng".
2 Hệ thống hiển thị 10 mặt hàng đã mua theo thứ tự từ ngày mua gần nhất.
Alternative Flows Tại bước 2: Người dùng chọn số trang để xem các mặt hàng đã mua trước đó.Exception Flows None
Tên use-case Xem mặt hàng đã bán
Descriptions Người bán có thể xem tất cả mặt hàng đã bán
Triggers Người bán ấn vào biểu tượng "Lịch sử bán hàng".
Precondition Người dùng đăng nhập thành công và đang ở trang "Tài khoản của tôi", website đang hoạt động tốt và không bảo trì.
1 Người bán ấn vào biểu tượng "Lịch sử bán hàng".
2 Hệ thống hiển thị 10 mặt hàng đã bán cùng với bình luận của người mua theo thứ tự từ ngày giao dịch gần nhất.
Alternative Flows Tại bước 2: Người dùng chọn số trang để xem các mặt hàng đã bán trước đó.Exception Flows None
Về kiến trúc chương trình, nhóm quyết định lựa chọn kiểu kiến trúc MVC và được chia thành hai phía là client và server.
MVC là một mô hình kiến trúc phần mềm phổ biến, trong đó mỗi thành phần thực hiện nhiệm vụ riêng biệt và hoạt động độc lập với các thành phần khác.
Mô hình (Model) là thành phần quản lý toàn bộ cơ sở dữ liệu của ứng dụng, đồng thời chứa các lớp mô tả logic kinh doanh và định nghĩa quy tắc kinh doanh cho dữ liệu, quy định cách thức dữ liệu được thay đổi và sử dụng.
View là giao diện hiển thị dành cho người dùng, nơi người sử dụng thực hiện các thao tác truy vấn và tìm kiếm dữ liệu Bộ phận này đại diện cho các thành phần UI như XML và HTML View có khả năng tương tác với Model thông qua mẫu Observer.
Controller là thành phần chịu trách nhiệm ghi nhận và điều hướng các yêu cầu từ người dùng tại View Sau khi tiếp nhận yêu cầu, Controller sẽ xử lý dữ liệu thông qua Model và cuối cùng trả về kết quả phản hồi tại View.
Trong ứng dụng của mình, nhóm hiện thực ứng dụng theo kiểu client side rendering:
Phía Client trong mô hình MVC chỉ bao gồm thành phần View, nơi dữ liệu nhận từ Controller và Model được chuyển đổi thành các yếu tố giao diện người dùng (UI) để hiển thị cho người dùng thông qua trình duyệt.
• Phía Server: chứa các thành phần Controller và Model trong mô hình MVC
Trang chủ
Là giao diện ban đầu khi người dùng truy cập vào trang web.
Hình 7: Giao diện trang chủ
STT Tên Mô tả Hành động Bắt buộc
1 Carousel Hiển thị hình ảnh dùng cho quảng cáo Không Có
2 Item button Nút nhấn đi đến trang chi tiết sản phẩm, hiển thị thông tin chung vè sản phẩm
Chuyển đến trang thông tin chi tiết sản phẩm đó Có
Bảng 1: Chú thích các thành phần trang chủ
Đăng ký tài khoản
Hình 8: Giao diện đăng ký thông tin tài khoản
STT Tên Mô tả Hành động Bắt buộc
1 Họ và tên Nhập họ và tên Điền họ và tên Có
2 Email Khai báo Email cá nhân Điền Email đúng cấu trúc Không
3 Số điện thoại (SĐT) Khai báo SĐT Gõ vào số điện thoại Có
4 Giới tính Khai báo giới tính Chọn vào ô này Không
(MSSV) Khai báo MSSV Nhập MSSV hợp lệ Không
6 Mật khẩu Khai báo mật khẩu Đặt mật khẩu theo ý bạn Có
7 Avatar Cập nhật Avatar Upload avatar theo dung lượng giới hạn Có
8 Huỷ đăng ký Dừng đăng ký Bấm vào nút Không
9 Đăng ký Tạo tài khoản mới Các trường bắt buộc đã điền đủ Không
Bảng 2: Chú thích các nút nhấn/ input field trang tìm kiếm thông tin người dùng
Tìm kiếm thông tin người dùng
Hình 9: Giao diện tìm kiếm thông tin người dùng
STT Tên Mô tả Hành động Bắt buộc
1 Star Nơi chấm độ tin cậy Bấm vào một hoặc nhiều ngôi sao Không
2 Trở về trang chủ Về trang chủ Click vào nút Không
3 Search Icon Nút tìm kiếm Gõ vào ô tìm kiếm, sau đó bấm nút Không
4 Search Box Nơi nhập thông tin Gõ vào ô này Không
Bảng 3: Chú thích các nút nhấn/ input field trang tìm kiếm thông tin người dùng
Quản lý mặt hàng
Thêm mặt hàng
Ở trang chính, người dùng ấn vào nút "Đăng bán" để tiến hành thao tác đăng bán.
Hình 10: Giao diện điền thông tin rao bán
STT Tên Mô tả Hành động Bắt buộc
1 Images Nơi chèn ảnh mô tả sản phẩm Chọn file từ local Có
2 Category Phân loại sản phẩm Dropdown Có
3 Status Mô tả tình trạng sản phẩm Một trong hai lựa chọn: Đã sử dụng/ Hàng mới Có
4 Price Giá trị sản phẩm Gõ số tiền bán vật phẩm (đơn vị VND) Có
5 Header Tên sản phẩm Gõ tên sản phẩm Có
6 Desc Mô tả chi tiết Gõ mô tả chi tiết cho sản phẩm Không
7 Addr Địa chỉ nhận hàng Gõ địa chỉ giao hàng cho người mua Có
8 Demo Xem thông tin sản phẩm Modal thể hiện thông tin đã nhập về sản phẩm Không
9 Post Đăng tin bán hàng Modal yêu cầu người dùng xác nhận đăng bán Có
Bảng 4: Chú thích các nút nhấn/ input field trang Điền thông tin sản phẩm
Hình 11: Giao diện xem demo sản phẩm
Hình 12: Popup xác nhận đăng bán
Sau khi hoàn tất việc điền thông tin, người dùng có thể nhấn "Xem thông tin" để xem bản thảo giao diện sản phẩm Nếu thông tin được xác nhận, một thông báo xác nhận sẽ xuất hiện trên màn hình Người dùng chỉ cần ấn xác nhận lần cuối, và sản phẩm sẽ được hiển thị.
Xem, Sửa, Xóa mặt hàng
Để xem các sản phẩm đang bán, bạn hãy chọn "Đơn hàng của tôi" -> "Đơn bán" -> "Đang bán" Một giao diện sẽ hiển thị danh sách các sản phẩm hiện tại, và các thao tác chi tiết cho từng mặt hàng sẽ được trình bày bên dưới.
Hình 13: Giao diện xem mặt hàng đang được rao bán
STT Tên Mô tả Hành động Bắt buộc
1 View Xem chi tiết Trở về trang trưng bày chi tiết sản phẩm Có
Xem mặt hàng: Để xem chi tiết mặt hàng, người bán ấn vào nút "Xem thông tin" Kết quả trả về như sau:
Hình 14: Giao diện xem mặt hàng đang được rao bán
Để sửa mặt hàng, người bán chỉ cần nhấn nút "Sửa thông tin" bên cạnh mặt hàng cần chỉnh sửa Hệ thống sẽ hiển thị giao diện như Hình 11 để người dùng thực hiện các thao tác cần thiết.
Người bán có thể dễ dàng xóa thông tin mặt hàng bằng cách nhấn nút "Xóa mặt hàng" Sau khi thực hiện, một thông báo sẽ xuất hiện yêu cầu người dùng xác nhận việc xóa sản phẩm.
STT Tên Mô tả Hành động
1 Images Xem hình ảnh Các hình ảnh của sản phẩm xuất hiện
2 Tracking Đánh dấu theo dõi sản phẩm Sản phẩm được lưu trữ trong danh sách theo dõi (người mua)
3 ToggleStatus Thay đổi trang thái của hàng Chuyển trang thái sản phẩm Đang bán/ Đã bán (người bán)
4 ViewProfile Xem thông tin người bán Người mua có thể xem thông tin, bình luận về người bán
Bảng 6: Chú thích các nút nhấn trang Chi tiết sản phẩm
Hình 15: Popup xác nhận xóa sản phẩm
Sau cùng, màn hình thông báo cập nhật thành công sẽ hiện lên.
Hình 16: Popup xác nhận cập nhật thành công
Tìm kiếm sản phẩm theo tên, theo tag
Khi người dùng muốn tìm sản phẩm, họ chỉ cần nhập từ khóa vào ô tìm kiếm ở phần header và nhấn nút "Tìm kiếm" hoặc phím Enter để bắt đầu quá trình tìm kiếm.
STT Tên Mô tả Hành động
1 Search box Nơi nhập chuỗi dùng để search
2 Search button Nút nhấn tiến hành tìm kiếm Danh sách sản phẩm tìm kiếm hiện ra
Bảng 7: Chú thích các thành phần trong header
Sau đó, hệ thống điều hướng đến trang kết quả tìm kiếm ở chế độ tìm kiếm theo tên sản phẩm.
Người dùng có thể dễ dàng chuyển đổi giữa hai chế độ tìm kiếm: tìm kiếm theo tag bằng cách nhấn nút "Search by tag" và tìm kiếm theo tên sản phẩm bằng cách nhấn nút "Search by name".
Hình 18: Màn hình kết quả tìm kiếm sản phẩm
STT Tên Mô tả Hành động
1 Search by name button Nút chế độ tìm kiếm bằng tên Hiện kết quả tìm kiếm bằng tên
2 Search by tag button Nút chế độ tìm kiếm bằng tag Hiện kết quả tìm kiếm bằng tag
3 Search result Danh sách kết quả tìm kiếm Chuyển sang trang chi tiết sản phẩm
Bảng 8: Chú thích các thành phần trong trang kết quả tìm kiếm sản phẩm
Xem lịch sử mua hàng/bán hàng
Lịch sử đánh dấu
Để xem lịch sử đánh dấu, người dùng chỉ cần chọn mục "Đơn hàng của tôi" trên tiêu đề và sau đó nhấn vào "Đơn mua" Trang web sẽ tự động hiển thị danh sách các mặt hàng trong mục này.
"Đang đánh dấu" Để truy cập danh sách mặt hàng đã giao dịch, người dùng chọn mục "Đã mua".
Trang web hiển thị 10 mặt hàng đã mua gần nhất Để xem các mặt hàng đã mua trước đó, người dùng có thể chọn các phân trang ở cuối danh sách.
Hình 19: Mục Lịch sử mua hàng
STT Tên Mô tả Hành động
1 Item Xem giao diện tổng một sản phẩm không
Tìm kiếm sản phẩm tương tự bằng cách chuyển hướng đến giao diện tìm kiếm với tên sản phẩm đã chọn Bảng 9 cung cấp chú thích cho các phần trong danh sách sản phẩm đã mua.
Lịch sử bán hàng
Để xem lịch sử bán hàng, người dùng chỉ cần nhấp vào mục "Đơn hàng của tôi" trên tiêu đề và sau đó chọn "Đơn bán" Trang web sẽ tự động hiển thị danh sách các mặt hàng trong mục này.
"Đang rao bán" Để truy cập danh sách mặt hàng đã bán, người dùng chọn mục "Đã bán".
Trang web hiển thị 10 mặt hàng đã bán gần nhất, và để xem các mặt hàng đã bán trước đó, người dùng có thể chọn các phân trang ở cuối danh sách.
Hình 20: Mục Lịch sử bán hàng
STT Tên Mô tả Hành động
1 Images Xem hình ảnh Hiện duy nhất hình ảnh chủ đạo
Trường Đại Học Bách Khoa - ĐHQG TP.HCMKhoa Khoa Học & Kỹ Thuật Máy Tính
Xem và thêm đánh giá
Đăngnhập Thôngbáo Đơnhàngcủatôi
MinhDy Ôuí,đúạ,độựkìâệ.+1Ree=)) 2uầướ
MinhDy Ôuí,đúạ,độựkìâệ.+1Ree=)) 2uầướ
MinhDy Ôuí,đúạ,độựkìâệ.+1Ree=)) 2uầướ
MinhDy Ôuí,đúạ,độựkìâệ.+1Ree=)) 2uầướ
MinhDy Ôuí,đúạ,độựkìâệ.+1Ree=))
MinhDy Ôuí,đúạ,độựkìâệ.+1Ree=)) 2uầướ
MinhDy Ôuí,đúạ,độựkìâệ.+1Ree=))
MinhDy Ôuí,đúạ,độựkìâệ.+1Ree=))
BASS>>TrangcánhncủaSangVĩnhNgyễn>>Xmánhgiá
ị ỉ:Tầ 6T ờ Tổỗợ ạ ọ B K :1900xxxx (Cơ -El:v ở 2)P ờ ô H T @ dv ố DĩA TỉBìD ơ g
Hình 21: Màn hình bao gồm thông tin và xem các đánh giá về người bán
Khi người dùng muốn xem đánh giá của người bán, họ chỉ cần truy cập vào trang cá nhân của người bán, nơi có thông tin chi tiết và các đánh giá được hiển thị ở phía dưới phần thông tin.
Trường Đại Học Bách Khoa - ĐHQG TP.HCM
Khoa Khoa Học & Kỹ Thuật Máy Tính Đăngnhập Thôngbáo Đơnhàngcủatôi
KPss Ba Lịchửmua>> >> Thêmđánhgiá
Trên trang xem đánh giá, người dùng có thể nhấp vào nút "Thêm đánh giá" để thực hiện đánh giá cho người bán Giao diện hiển thị số sao, khung nhập liệu và hai nút: "Huỷ bỏ" để quay lại trang trước và "Thêm đánh giá" để xác nhận Khi người dùng điền thông tin vào khung text và bấm nút "Thêm đánh giá", trang chủ sẽ tải lên khung xác nhận.
Hình 23: Khung overlay khi xác nhận đánh giá thành công
Front-end
ReactJS
ReactJS là thư viện JavaScript cho phép lập trình viên xây dựng giao diện phức tạp thông qua việc định nghĩa các component nhỏ Việc chia nhỏ dự án lớn thành các phần đơn giản giúp đội ngũ phát triển phân chia công việc hiệu quả hơn, dễ dàng thảo luận và sửa lỗi khi cần thiết.
ReactJS hỗ trợ phát triển ứng dụng theo mô hình SPA (single page application), cho phép tải trang chỉ một lần duy nhất Mặc dù thời gian tải lần đầu có thể lâu hơn, nhưng các lần truy cập sau sẽ mang lại trải nghiệm mượt mà như ứng dụng di động, nâng cao mức độ tương tác của người dùng.
TailwindCSS
Thay vì sử dụng CSS thuần để thiết kế giao diện người dùng cho trang web, TailwindCSS - một framework CSS bậc thấp - cung cấp thư viện phong phú giúp lập trình viên dễ dàng tạo UI Ngoài ra, TailwindCSS hỗ trợ việc làm cho website trở nên responsive, mở rộng dự án và chia nhỏ các components để tái sử dụng hiệu quả.
Combining ReactJS and TailwindCSS enhances project performance for the development team, and the integration of TailwindCSS within ReactJS is straightforward Therefore, the team has chosen these two frameworks to implement the front-end for this project.
Backend
MongoDB
MongoDB là một hệ cơ sở dữ liệu phổ biến, được nhóm lựa chọn vì nhiều lý do thuyết phục.
MongoDB là phần mềm mã nguồn mở, cho phép sử dụng miễn phí và có một cộng đồng lớn hỗ trợ Điều này tạo điều kiện thuận lợi cho việc sử dụng và nghiên cứu MongoDB, giúp người dùng dễ dàng tiếp cận và khai thác tiềm năng của nó.
MongoDB lưu trữ dữ liệu dưới dạng JSON, mang lại tính linh động cao hơn so với các hệ quản trị cơ sở dữ liệu quan hệ Điều này giúp dữ liệu gần gũi hơn với các đối tượng, đồng thời làm cho việc thiết kế cơ sở dữ liệu trở nên dễ dàng hơn.
NodeJS
NodeJS là một mã nguồn mở, đa nền tảng, chạy trên môi trường JavaScript, được xây dựng trên V8 JavaScript engine của Chrome, cho phép thực thi mã JavaScript bên ngoài trình duyệt Ra đời vào năm 2009, NodeJS nổi bật với khả năng lập trình bất đồng bộ, mang lại hiệu suất cao cho các ứng dụng backend.
NodeJS là nền tảng dựa trên JavaScript runtime của Chrome, giúp xây dựng ứng dụng mạng nhanh chóng và dễ mở rộng Với mô hình lập trình I/O sự kiện và non-blocking, NodeJS mang lại hiệu suất cao, phù hợp cho các ứng dụng dữ liệu thời gian thực trên thiết bị phân tán Thêm vào đó, NodeJS cung cấp thư viện phong phú với nhiều module JavaScript, giúp đơn giản hóa quá trình phát triển ứng dụng web và giảm thiểu tình trạng sử dụng tài nguyên quá mức.
ExpressJS
Để thuận tiện cho việc sử dụng NodeJs xây dựng RESTful API, nhóm em sử dụng ExpressJS.
Express.js là một framework nhỏ nhưng linh hoạt, được xây dựng trên nền tảng Node.js, cung cấp các tính năng mạnh mẽ cho phát triển web Với hàng loạt package hỗ trợ, việc làm việc với Express.js trở nên dễ dàng và thuận tiện Về hiệu suất, Express.js không chỉ cải thiện khả năng lập trình của developers mà còn không làm giảm tốc độ của Node.js Hơn nữa, nhiều framework nổi tiếng hiện nay trong hệ sinh thái Node.js đều sử dụng Express.js như một chức năng cốt lõi.
Version Control
Github
GitHub là một dịch vụ lưu trữ kho Git dựa trên đám mây, giúp cá nhân và nhóm dễ dàng kiểm soát phiên bản và cộng tác Giao diện thân thiện của GitHub cho phép ngay cả những lập trình viên mới cũng có thể tận dụng Git mà không cần nhiều kiến thức kỹ thuật hay sử dụng dòng lệnh.
GitHub cho phép mọi người đăng ký và lưu trữ miễn phí kho lưu trữ mã công khai, điều này góp phần làm cho nền tảng này trở nên đặc biệt phổ biến trong cộng đồng các dự án nguồn mở.
GitHub kiếm tiền thông qua việc cung cấp các kho lưu trữ mã riêng và các gói dịch vụ doanh nghiệp, giúp tổ chức quản lý thành viên nhóm và tăng cường bảo mật hiệu quả hơn.
Class diagram cho toàn bộ hệ thống:
• Các lớp view đều có chứa chung lớp header
• Lớp itemController hiện thực controller liên quan đến 1 sản phẩm (đăng sản phẩm mới, cập nhật sản phẩm, đánh dấu, )
• Lớp itemsController hiện thực controller liên quan đến danh sách sản phẩm (lấy danh sách sản phẩm thỏa mãn điều kiện)
• Lớp userController hiện thực controller liên quan đến 1 người dùng (đăng nhập, đăng ký, phản hồi, )
• Lớp usersController hiện thực controller liên quan đến danh sách người dùng (lọc danh sách người dùng)
Một phần Screen Flow diagram cho toàn bộ hệ thống Thầy/cô và các bạn có thể xem bản đầy đủ tại đây
Hình 32: Một phần lược đồ Screen Flow cho toàn bộ hệ thống
Hình 35: Đăng nhập thành công
Hình 36: Lỗi chưa xác thực
10.2 Thêm sửa xóa sản phẩm
Hình 37: Form thêm sản phẩm
Hình 38: Xem trước sản phẩm
Hình 39: Xem sản phẩm chính thức
Hình 40: Đổi trạng thái sản phẩm
Hình 42: Sửa thông tin sản phẩm
Hình 43: Một phần giao diện trang chủ của "BK Pass"
Hình 44: Giao diện tìm kiếm theo từ khoá "giải tích"
Hình 45: Giao diện tìm kiếm theo nhãn "giải tích"
Hình 46: Giao diện tìm kiếm theo người bán có tên là "giải tích"
10.4 Nhận xét về người bán
Hình 47: Trang cá nhân của người dùng, có nút "Thêm đánh giá"
Hình 48: Khung điền đánh giá và rating
Hình 49: Sau khi điền đầy đủ đánh giá, hiện ra pop up xác nhận
Hình 50: Xác nhận thành công Chọn "Xem bình luận"
Hình 51: Bình luận được thêm thành công như trong hình.
10.5 Lịch sử đánh dấu mặt hàng
Hình 52: Xem các mặt hàng đang được đánh dấu
Hình 53: Huỷ đánh dấu mặt hàng
Hình 54: Xem các mặt hàng đã được giao dịch
Hình 55: Xem các mặt hàng đang bán
Hình 56: Xem các mặt hàng đã ngừng bán
Do nhóm sử dụng hệ cơ sở dữ liệu MongoDB nên dữ liệu sẽ được tổ chức dưới dạng document.Các Schema gồm có:
Feedback
Schema này được sử dụng để lưu dữ liệu về các phản hồi về người bán.
1 authorId Là dữ liệu dạng chuỗi lưu mã Id của người đăng feedback
2 content Là dữ liệu dạng chuỗi lưu nội dung phản hồi
3 numStarsRate Là dữ liệu dạng số lưu sô sao của phản hồi
4 isDeleted Là dữ liệu dạng boolean, lưu thông tin phản hồi đó bị xóa hay chưa
5 createAt Dữ liệu dạng chuỗi, lưu thời điểm đăng phản hồi
Bảng 11: Bảng mô tả các trường dữ liệu trong schema Feedback
Users
Schema này được sử dụng để lưu dữ liệu của người dùng.
1 email Là dữ liệu dạng chuỗi lưu địa chỉ email của người dùng
2 phoneNum Là dữ liệu dạng chuỗi lưu số điện thoại của người dùng
3 name Là dữ liệu dạng chuỗi lưu tên người dùng
4 gender Là dữ liệu dạng enum, lưu giới tính của người dùng
5 password Dữ liệu dạng chuỗi lưu mật khẩu tài khoản của người dùng
6 image Dữ liệu dạng chuỗi lưu địa chỉ đường dẫn đến ảnh đại diện của người dùng
7 feedbacks Mảng các feedback, lưu toàn bộ phản hồi về người dùng đó
8 numSellingItems Số lượng sản phẩm đang được bán
9 numSaledItems Số lượng sản phẩm đã ngừng bán
10 averageStarRate Giá trị trung bình số sao đánh giá người dùng đó
11 numRate Số lượng đánh giá về người dùng đó
12 description Mô tả của người dùng đó
Bảng 12: Bảng mô tả các trường dữ liệu trong schema Users
Items
Schema này được sử dụng để lưu dữ liệu các bài đăng.
1 idAuthor Mã id của tác giả bài đăng
2 category Phân loại của sản phẩm trong bài đăng
3 status Tình trạng sản phẩm (còn mới, đã qua sử dụng)
4 price Giá của sản phẩm
6 description Mô tả về sản phẩm
7 image Mảng các đường dẫn đế hình ảnh của sản phẩm
8 date Thời điểm đăng sản phẩm
9 markBy Sản phẩm được đánh dấu bới những ai
10 numConcerner Số người đánh dấu sản phẩm
11 isSelling Sản phẩm đang bán hay đã ngừng bán
Bảng 13: Bảng mô tả các trường dữ liệu trong schema Items
Đóng gói hệ thống với Docker
Công nghệ sử dụng
Trong đồ án này, nhóm áp dụng công nghệ đóng gói hệ thống (System Containerization) để khởi chạy dự án mà không phụ thuộc vào hệ điều hành và cấu hình máy chủ Quá trình này tạo ra các đơn vị ảo gọi là Container, cho phép nhiều ứng dụng chạy trên cùng một nhân máy chủ nhưng vẫn được cách ly nhờ vào các không gian tên riêng và cơ chế kiểm soát tài nguyên So với các phương pháp ảo hóa truyền thống, ảo hóa dựa trên vùng chứa cung cấp mức độ trừu tượng và cách ly cao hơn Các Container có thể hoạt động trên hầu hết các hệ điều hành như Linux, Windows và Mac, giúp việc phát triển và triển khai trở nên dễ dàng hơn.
Docker là nền tảng chứa phần mềm hàng đầu, được ra mắt vào năm 2013 bởi công ty Dotcloud, Inc, sau này đổi tên thành Docker, Inc Nền tảng này được phát triển bằng ngôn ngữ Go.
Hình 60: Cách hoạt động của Docker
Docker mang lại lợi ích cho cả nhà phát triển và quản trị viên hệ thống, trở thành một phần quan trọng trong chuỗi công cụ DevOps Nhà phát triển có thể viết mã mà không lo lắng về môi trường thử nghiệm và sản xuất, trong khi quản trị viên hệ thống không cần phải lo lắng về cơ sở hạ tầng nhờ khả năng mở rộng và thu nhỏ dễ dàng của Docker Docker đặc biệt phát huy tác dụng trong giai đoạn triển khai của chu trình phát triển phần mềm, được coi là một cuộc cách mạng cho phép các nhà phát triển dễ dàng triển khai và kiểm thử sản phẩm.
Triển khai Docker trong dự án
Docker giúp đóng gói chương trình dưới dạng container, cho phép triển khai ứng dụng dễ dàng và nhất quán Dự án của nhóm bao gồm hai chương trình chạy độc lập, một cho Front-end và một cho Back-end, vì vậy nhóm đã tạo ra hai Dockerfile tương ứng để quản lý và triển khai từng phần của ứng dụng một cách hiệu quả.
# Sta ge 1 : B ui ld r e ac t c l i e n t
# D o c k e r f i l e f o r Node E x p r e s s B ac ke nd a p i ( d e ve l op m en t )
RUN mkdir −p /u sr / src /app
COPY packag e js on / us r / sr c /app/
Sau đó, ta sử dụng Docker Compose để gộp hai container chạy cùng lúc để deploy một hệ thống Client-Server hoàn chỉnh. ver sio n : ’ 3.9 ’ s e r v i c e s : s e r v e r : bui ld : c o n t e x t : / s e r v e r
− / us r / sr c /app/node_modules por ts :
− app−network mongo: image : mongo : l a t e s t
# en v ir on me n t : // I f Mongo A u t h o r i z a t i on i s n ee d t o be e n a bl e d
# MONGO_INITDB_ROOT_PASSWORD: r o o t p a s s w o r d volume s :
− data−volume :/ data /db por ts :
− app − network c l i e n t : bui ld : c o n t e x t : / c l i e n t d o c k e r f i l e : D o c k e r f i le image : bkpass−c l i e n t : l a t e s t container_name : bkpass − react − c l i e n t command: n p m r u n s t a r t volume s :
− / usr /app/node_modules depends_ on :
− app−network network s : app−networ k : d r i v e r : b r i d g e volume s : data−volume : node_mo dules : web−roo t : d r i v e r : l o c a l
Listing 3: Docker Compose chạy trên 2 Dockerfile vừa build
Triển khai hệ thống với dịch vụ Web Hosting
Server
Server được nhóm triển khai trên dịch vụ của Railway Server được deployed tại url này.
Server sau khi được deployed vẫn đảm bảo tất cả các API mà nhóm đã hiện thực được.
Client
Client được nhóm triển khai cũng trên dịch vụ của Railway Client được deployed tại url này.
Cài đặt thông thường trên Git
Việc cài đặt truyền thống đã được nhóm trình bày chi tiết các bước trên file README.md, hoặc có thể xem tại Link Repo Github của nhóm.