ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC BÁCH KHOA KHOA KHOA HỌC & KỸ THUẬT MÁY TÍNH ĐỒ ÁN TỔNG HỢP - CÔNG NGHỆ PHẦN MỀM Thiết kế ứng dụng trao đổi vật phẩm - BKPass GVHD: Mai Đức Trung SV thực hiện: Phạm Minh Duy – 1912916 Nguyễn Vĩnh Sang – 2011970 Kha Sang – 2010576 Bùi Hoàng Phi – 2011799 Trần Minh Tân – 2012018 Tp. Hồ Chí Minh, Tháng 09/2022 Trường Đại Học Bách Khoa - ĐHQG TP.HCM Khoa Khoa Học & Kỹ Thuật Máy Tính Mục lục 1 Members and Tasks 3 2 Overview 4 2.2 Non-functional requirements. 6 4 Use-case diagram and Use-case scenario 7 4.1 Tìm kiếm theo tag, theo tên .2 Thao tác với mặt hàng .3 Tạo tài khoản và Tra thông tin người dùng .4 Nhận xét về người bán .5 Quản lý mặt hàng đã mua, bán. 16 5 Architecture 18 6 Mockup Design and Details 19 6.2 Đăng ký tài khoản .3 Tìm kiếm thông tin người dùng .4 Quản lý mặt hàng .1 Thêm mặt hàng .2 Xem, Sửa, Xóa mặt hàng .5 Tìm kiếm sản phẩm theo tên, theo tag .6 Xem lịch sử mua hàng/bán hàng .1 Lịch sử đánh dấu .2 Lịch sử bán hàng .7 Xem và thêm đánh giá.
40 8 Class Diagram 42 9 Screen Flow Diagram 45 10 System Implementation 46 10.1 Xác thực người dùng .2 Thêm sửa xóa sản phẩm .3 Trang chủ + Tìm kiếm .4 Nhận xét về người bán .5 Lịch sử đánh dấu mặt hàng .6 Lịch sử bán hàng. 59 Đồ án tổng hợp Công nghệ Phần mềm - Niên khóa 2022-2023 Trang 1/70 Trường Đại Học Bách Khoa - ĐHQG TP.HCM Khoa Khoa Học & Kỹ Thuật Máy Tính 11 Database 60 11.1 Đóng gói hệ thống với Docker .1 Công nghệ sử dụng .2 Triển khai Docker trong dự án .2 Triển khai hệ thống với dịch vụ Web Hosting .1 Cài đặt thông thường trên Git .2 Cài đặt sử dụng Docker Engine. 70 Đồ án tổng hợp Công nghệ Phần mềm - Niên khóa 2022-2023 Trang 2/70 Trường Đại Học Bách Khoa - ĐHQG TP.HCM Khoa Khoa Học & Kỹ Thuật Máy Tính 1 Members and Tasks Tên Công việc % Kha Sang Thiết kế giao diện Đăng, sửa, gỡ thông 100 tin mặt hàng. Đóng gói hệ thống với Docker.
Viết API phần Update Item, Login, Reg- ister Phạm Minh Duy Thiết kế, kết nối database, backend (trừ 100 Login, Register, Update Item) UI phần kết quả tìm kiếm Nguyễn Vĩnh Sang Thiết kế database cho Item. Hiện thực 100 giao diện cho các components. Deploy trang web và server. Hiện thực phần Đánh giá người bán.
Bùi Hoàng Phi Hiện thực đơn mua 100 Trần Minh Tân Giao diện Login + Register và Soạn báo 100 cáo Đồ án tổng hợp Công nghệ Phần mềm - Niên khóa 2022-2023 Trang 3/70 Trường Đại Học Bách Khoa - ĐHQG TP.HCM Khoa Khoa Học & Kỹ Thuật Máy Tính 2 Overview 2.1 Project Description Website "BKPass" do nhóm Bình Minh thực hiện là trang web hỗ trợ việc trao đổi vật phẩm dành cho các sinh viên của trường Đại học Bách Khoa - ĐHQG TP. Hiện tại, các cộng đồng sinh viên HCMUT trên những kênh mạng xã hội thường xuyên xuất hiện các những bài đăng nhằm mục đích bán lại những món đồ đã qua sử dụng hoặc không cần dùng cho các sinh viên khác. Tuy nhiên, việc này còn gây những bất cập như sau: • 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 không được bảo đảm.
Một số sinh viên đã bị sa vào các phi vụ lừa đảo, hay nhẹ hơn là chất lượng sản phẩm không được đúng như mô tả. • Việc đăng quá nhiều bài trong cùng ngày cũng ảnh hưởng xấu đến chất lượng của group (theo chính sách hiện hành của Facebook là tối đa 20 posts cho 1 ngày), khiến cho một số bài đăng bị xóa bởi hệ thống đánh dấu đó là tin rác (spam). Từ đó, nhóm phác họa ý tưởng tạo một Website hỗ trợ trao đổi vật phẩm, mà chủ thể là sinh viên các khóa tại Đại học Bách Khoa. Việc này không những tạo dựng những kết nối đáng tin cậy, mà còn thuận tiện cho cả người mua và người bán trong việc lựa chọn hay rao bán các sản phẩm hiện có sinh viên đang cần với giá cả phải chăng và thao tác trao đổi nhanh gọn.2 Project Goals Mục tiêu nhóm đặt ra là xây dựng được một ứng dụng có đầy đủ các chức năng cơ bản giúp người dùng cuối có thể thực hiện việc rao bán, đặt hàng.1 Stakeholders • Người mua • Người bán.
• Người mua cũng có thể là người bán và ngược lại.2 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. Đồ án tổng hợp Công nghệ Phần mềm - Niên khóa 2022-2023 Trang 4/70 Trường Đại Học Bách Khoa - ĐHQG TP.HCM Khoa Khoa Học & Kỹ Thuật Máy Tính 3 Requirements 3.1 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 chung Tạo tài khoản và Tra thông tin người dùng Trần Minh Tân Người dùng chung Nhận xét về người bán Nguyễn Vĩnh Sang Người dùng chung Lịch sử mặt hàng đã mua, bán Bùi Hoàng Phi Đồ án tổng hợp Công nghệ Phần mềm - Niên khóa 2022-2023 Trang 5/70 Trường Đại Học Bách Khoa - ĐHQG TP.HCM Khoa Khoa Học & Kỹ Thuật Máy Tính 3.2 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.2 Responsive website với kích thước dao động từ điện thoại cho đến màn hình tivi 4K.3 Việc sử dụng tương tự như các trang bán hàng thông dụng hiện tại với các tính năng tương tự, có thể dễ dàng làm quen và sử dụng ở nhiều thiết bị.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.5 Giao diện không gây lỗi render trên các trình duyệt phổ biến (Chrome 43. 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).2 Gợi ý người dùng đặt mật khẩu khó (trên 8 kí tự, trong đó bao gồm cả chữ, số và kí tự đặc biệt). Không cho đăng nhập trong 5 phút nếu nhập mật khẩu sai 5 lần trong 30s liên tục.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ờ.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.2 Thời gian phản hồi của 80% transaction dài không quá 1500 mili giây kể từ lúc user gửi yêu cầu.3 Thời gian load các component trong trang cũng như giữa các Routers nhanh (1 2̃s). 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 6.1 Dễ dàng thêm các module chức năng mới mà không thay đổi cấu trúc cũ của chương trình.2 Có thể thêm chức năng phụ trợ vào những chức năng sẵn có, và về sau có khả năng nâng cao hiệu suất của chúng.
Đồ án tổng hợp Công nghệ Phần mềm - Niên khóa 2022-2023 Trang 6/70 Trường Đại Học Bách Khoa - ĐHQG TP.HCM Khoa Khoa Học & Kỹ Thuật Máy Tính 4 Use-case diagram and Use-case scenario Xem tất cả đánh giá về người bán Thêm bình luận, đánh giá người bán Xoá đánh giá Người dùng chung Tìm kiếm mặt hàng theo tên Tìm kiếm mặt hàng theo tag Thêm mặt hàng mới Sửa thông tin mặt hàng Xóa mặt hàng Người bán Xem mặt hàng Xem mặt hàng đã bán đã mua Người mua Hình 1: Use case diagram tổng Đồ án tổng hợp Công nghệ Phần mềm - Niên khóa 2022-2023 Trang 7/70 Trường Đại Học Bách Khoa - ĐHQG TP.HCM Khoa Khoa Học & Kỹ Thuật Máy Tính 4.1 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 Người dùng chung của mặt hàng 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 Actors Người dùng chung 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 Trigger None 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" Normal flow 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.