Đồ án nhập môn công nghệ phần mềm đề tài QUẢN LÝ BÁN BÁO

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN KHOA HỌC MÁY TÍNH BÁO CÁO ĐỒ ÁN NHẬP MÔN CÔNG NGHỆ PHẦN MỀN Đề tài: QUẢN LÝ BÁN BÁO IE213.M22 – Kỹ thuật phát triển hệ thống Web NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ……., ngày…… tháng……năm 2022 Người nhận xét (Ký tên ghi rõ họ tên) 2|Page IE213.M22 – Kỹ thuật phát triển hệ thống Web BẢNG PHÂN CÔNG, ĐÁNH GIÁ THÀNH VIÊN: Bảng 1: Bảng phân công, đánh giá thành viên Họ tên MSSV Phạm Văn 20521656 Nghĩa Nguyễn Minh Nhật 20521708 Phân công - Xây dựng ý tưởng - Thiết kế giao diện - Code Backend - Lập trình Frontend - Xây dựng ý tưởng - Xây dựng data Đánh giá Hoàn thành Hoàn thành 3|Page IE213.M22 – Kỹ thuật phát triển hệ thống Web Chương 1: GIỚI THIỆU CHUNG Phạm vi hệ thống Phần mềm xây dựng với mục đích quản lý chuỗi cửa hàng phân phối xe Seven, người dùng mua hàng người quản trị quản lý toàn liệu Khái niệm thuật ngữ - User Story tài liệu sơ giản u cầu sản phẩm với góc nhìn người dùng Thông thường, User Story khách hàng, đại điện khách hàng viết, nhiên có cộng tác Nhóm Phát triển nhóm khách hàng có chia sẻ hiểu biết sản phẩm tốt - Các quy trình theo hướng kế hoạch (Plan-driven processes) q trình tất hoạt động trình lên kế hoạch trước tiến độ đo lường theo kế hoạch Kế hoạch thực đồ án 1.3.1 Kế hoạch tổng quát - Phân tích khơi gợi yêu cầu user - Đặc tả yêu cầu - Thiết kế: o Thiết kế hệ thống o Thiết kế liệu o Thiết kế giao diện - Lựa chọn thiết kế thành phần - Hiện thực hệ thống - Xác thực phần mềm 4|Page IE213.M22 – Kỹ thuật phát triển hệ thống Web - Báo cáo 1.3.2 Công cụ sử dụng quản lý dự án - Công cụ trao đổi thông tin o Ứng dụng Microsoft Teams: nơi thông báo việc quan trọng, meeting trao đổi thành viên o Ứng dụng Messenger: nơi trao đổi thông tin, chia sẻ thành viên nhóm Trước bắt đầu sprint có meeting thảo luận sau hồn thành Sprint, có meeting để nhóm trưởng đề xuất, góp ý sản phẩm thành viên làm - Công cụ lưu trữ tài liệu: Google Drive - Công cụ quản lý Product Backlog: Trello Trong sprint (1-2 tuần), công việc quản lý Trello: - Danh sách nhiệm vụ: nơi giao nhiệm vụ cho nhóm phát triển nhỏ - Bảng công việc: nơi công việc nhóm nhỏ định cụ thể, có thời gian hoàn thành Khi hoàn thành đánh dấu hoàn thành - Ghi chú: ghi lại ghi phát triển hệ thống - Công cụ quản lý phiên bản: Git với Github, công việc, sản phẩm thành viên đưa lên git quản lý: o Branch: Quy định branch đặt tên theo task giao nhóm nhỏ thành viên o Sau cơng việc commit push thành công tạo pull-request đánh dấu hồn thành o Sau cơng việc hồn thành merge vào branch main 5|Page IE213.M22 – Kỹ thuật phát triển hệ thống Web ĐẶC TẢ PHẦN MỀM Đặc tả u cầu 1.4.1 Mơ hình hóa hệ thống Một tài liệu Use-case ghi lại loạt tương tác hay nhiều tác nhân hệ thống Mơ hình Use-case cho quản lý chuỗi cửa hàng thể Hình 1.1 Mỗi Use-case đặc tả ngơn ngữ tự nhiên có cấu trúc Điều giúp nhà thiết kế xác định đối tượng hệ thống cung cấp cho họ hiểu biết hệ thống dự định làm Ký hiệu Tên Diễn giải Là người dùng hệ thống, tác nhân thực use case Một tác nhân thực Tác nhân (actor) nhiều use case ngược lại use case thực nhiều tác nhân Mô tả việc Use Case lớn chia Quan hệ include thành Use Case nhỏ để dễ cài đặt (module hóa) thể dùng lại Quan hệ Extend sử dụng có Quan hệ extend Use Case tạo để bổ sung chức cho Use Case có sẵn sử dụng điều kiện định Tên use case thể chức xác Use case định hệ thống 6|Page IE213.M22 – Kỹ thuật phát triển hệ thống Web Nghĩa use case thực hành vi mô tả use case trừu tượng cấp cao Trong use case trừu tượng Quan hệ inherit chứa mô tả tổng quát cách tác nhân sử dụng hệ thống, use case cụ thể tương ứng kế thừa từ use case tổng quát mô tả bước thực tế việc xác định người dùng Ranh giới hệ thống để ngăn cách tác nhân Boundary khỏi use case Các tác nhân ngồi ranh giới cịn use case bên Ghi thêm thơng tin ý nghĩa use case, giải thích mối quan hệgiữa Notes use case Cung cấp thông tin bổ sung tác nhân làm bật số use case định 7|Page IE213.M22 – Kỹ thuật phát triển hệ thống Web Mô tả sơ đồ Use-case tổng quát: - Người dùng đăng nhập vào trang web để tương tác với tính năng, trước tiên họ phải có tài khoản Nếu khơng có, người dùng bắt buộc phải đăng ký tài khoản trước đăng nhập Người dùng xem, tìm kiếm, so sánh sản phẩm loại để đưa lựa chọn tốt Nếu người dùng muốn đặt sản phẩm, toán hay hủy đơn hàng, họ phải đăng nhập vào trang web trước Ngồi ra, người dùng xem, tìm kiếm viết sản phẩm để hiểu rõ sản phẩm mua - Admin kế thừa tất chức User Thêm vào đó, Admin nắm quyền quản lý viết, quản lý đơn hàng, quản lý người dùng 8|Page IE213.M22 – Kỹ thuật phát triển hệ thống Web 1.4.2 Danh sách actor mô tả STT ID Actor Mô tả A01 User Tác nhân User người có quyền xem, tìm kiếm viết, sản phẩm, so sánh sản phẩm Ngồi ra, tác nhân có quyền đặt sản phẩm, toán hủy đơn hàng sử dụng tính đăng nhập A02 Tác nhân Admin người quản lý trang Admin web nắm quyền quản lý viết, quản lý sản phẩm, đơn hàng, người dùng 1.4.3 Danh sách Use-case STT ID Use-case Ý nghĩa Mô tả chức UC01 Đăng ký Cho phép người dùng - Đăng ký - Đăng nhập - Đăng xuất - Thêm thông tin đăng ký tài khoản UC02 Đăng nhập Cho phép người dùng đăng nhập vào hệ thống UC03 Đăng xuất Cho phép người dùng đăng xuất khỏi hệ thống UC04 Quản lý Cho người dùng phép Admin có người dùng quyền quản lý thơng tin người dùng - Xóa thơng tin người dùng 9|Page IE213.M22 – Kỹ thuật phát triển hệ thống Web - Sửa thông tin người dùng UC05 Quản lý đơn Cho hàng UC06 có - Thêm đơn hàng quyền quản lý thông tin, - Sửa đơn hàng xử lý đơn hàng - Xóa đơn hàng có - Thêm viết quyền quản lý thơng tin, - Xóa viết duyệt viết - Sửa viết - Đặt sản phẩm - Thanh toán sản Quản lý Cho viết phép phép Admin Admin trang web UC07 Đặt sản Cho phép người dùng có quyền đặt sản phẩm UC08 Thanh tốn Cho phép người dùng sản phẩm toán sản phẩm trực phẩm tuyến UC09 Hủy đơn Cho phép người dùng hủy hàng đơn hàng khơng có - Hủy đơn hàng nhu cầu mua hay vấn đề bất cập khác với điều kiện chưa nhận hàng 1.4.4 Đặc tả chức Use Case Thumbnail: 10 | P a g e IE213.M22 – Kỹ thuật phát triển hệ thống Web Clie totalPrice : nt Number - Tổng tiền hóa đơn place : String Địa nhật hàng deliveryMethod : string - Phương thức giao hàng status : String Trạng thái đơn hàng Requires Authentication: No Send 3.1.11 Thanh toán sản phẩm Nespa Test Case: Thanh toán sản phẩm pert ID Item Sub- Steps s items Excute to Excepted output Test Prio Data/Parame rity nters FRO T Neg Ngườ Truy cập Chuyển đến NT_E C_ ative i vào giỏ hàng trang đăng nhập ND 01 test dùng Chọn để case chưa toán "Tha nh Cao người dùng đăng nhập Sau Nhập thông thành đăng nhập công, 120 | P a g e IE213.M22 – Kỹ thuật phát triển hệ thống Web toán đăng tin đơn hàng chuyển đển bước sản nhập Bấm ok phẩ Hiện section m" thông tin đơn phía hàng Clie Hiện thơng báo nt tốn thành cơng T Chưa Đăng Đăng C_ điền nhập 02 đầy Truy cập đủ vào giỏ hàng displaying thành nhập cao công "Nespapert" thông Chọn Hiện section tin thông tin đơn tốn Nhập thơng hàng tin Thơng tốn người dùng nhập Bấm ok đầy đủ thơng tin Than C_ tive h nhập 03 test toán Truy cập case thành vào giỏ hàng displaying T Posi báo Đăng Đăng thành nhập Cao công "Nespapert" "Tha công Chọn Hiện section nh tốn tốn Nhập thơng hàng sản tin phẩ tốn tốn đơn m" Bấm ok hàng thành cơng thơng tin đơn Thơng báo phía 121 | P a g e IE213.M22 – Kỹ thuật phát triển hệ thống Web Clie nt 3.1.12 Hủy đơn hàng Orde Test Case: Hủy đơn hàng rPro duct ID Ite Sub- ms item Steps to Excute Excepted Test Pri output Data/Para orit menters y s FRO T Neg Ngư NT_ C ativ END _0 e dùng Đến trang lịch sử đăng nhập để chưa test ời 1.Truy cập vào trang user đặt đến Báo người Chuyển trang Ca o dùng case đăng Chọn button "Báom đăng nhập "Hủ nhập thêm" đơn Sau đăng y hàng có trạng thái nhập đơn "đang hàn Chọn button "Hủy đển bước g" đơn hàng" thành chờ" cơng, chuyển "my-order" phía displaying Clie nt order/Nespap "my- er.:id" displaying Thông báo hủy đơn hàng thành công 122 | P a g e IE213.M22 – Kỹ thuật phát triển hệ thống Web T Đơn Đăng nhập Đăng nhập C hàng Truy cập vào trang thành công _0 user "user" hủy Đến trang lịch sử displaying từ đặt trướ Chọn button "Báom displaying c thêm" đơn cao Báo "my-order" "my- hàng có trạng thái "đã order/Nespap hủy" er.:id" Chọn button "Hủy displaying đơn hàng" Thông báo đơn hủy từ trước Đăng nhập Đăng nhập T Posi Hủy C tive đơn Truy cập vào trang thành công _0 test thàn user "user" case h o Đến trang lịch sử displaying "Hủ công đặt Báo "my-order" y Chọn button "Báom displaying đơn thêm" đơn hàn hàng có trạng thái order/Nespap g" "đang phía Chọn button "Hủy displaying Clie đơn hàng" nt Ca "my- chờ" er.:id" Thông báo hủy đơn hàng thành công 123 | P a g e IE213.M22 – Kỹ thuật phát triển hệ thống Web BAC T Neg Ngư KEN C ativ D _0 e 1.Vào Postman, tạo "status": NespaperO tru request rderId: ng dùng 127.0.0.1:3000/api/v1 62977fb2a bìn chưa /NespaperOrder/:Nes 8f3cb368a h case đăng paperOrderId 1a02c2 "Hủ nhập Method: y Content type: none đơn Params: hàn Requires g" Authentication: phía Tắt authorization Ser Send test ời URL "Error!" DELETE No ver T Posi Hủy C tive đơn request _0 test thàn 127.0.0.1:3000/api/v1 "success", 629750f93 /NespaperOrder/:Nes cb2a80563 case h 1.Vào Postman, tạo { NespaperO URL "status": "Hủ công paperOrderId rderId: "message": "Nespaper DELETE order cao df15d0 y Method: has đơn Content type: none been deleted" hàn Params: g" Requires phía Authentication: Ser Send } No ver 124 | P a g e IE213.M22 – Kỹ thuật phát triển hệ thống Web Tiến hành kiểm thử 3.2.1 Tài liệu mẫu Test Case Mẫu: Tên TestCase PC Mobile ID Chrome Iphone ID_bug Chạy hệ Mã bug có cấu trúc: điều hành IOS Tên testcasse_ID - Ghi chú: • Testcase thuộc frontend có liệu điền vào cột PC Mobile • Testcase bên backend bỏ trống cột PC Mobile • Xảy bug tạo ID_bug 3.2.2 Đăng ký Test Case: Đăng ký PC Mobile ID Chrome Iphone TC_01 done done TC_02 done done TC_03 done done ID_bug signup_TC_02 TC_04 TC_05 125 | P a g e IE213.M22 – Kỹ thuật phát triển hệ thống Web TC_06 TC_07 3.2.3 Đăng nhập Test Case: Đăng nhập PC Mobile ID Chrome Iphone TC_01 done done TC_02 done done TC_03 done done TC_04 done done ID_bug TC_05 TC_06 TC_07 3.2.4 Đăng xuất Test Case: Đăng xuất PC Mobile ID Chrome Iphone ID_bug 126 | P a g e IE213.M22 – Kỹ thuật phát triển hệ thống Web TC_01 done done Test Case: Quản lý người dùng PC Mobile ID Chrome Iphone TC_01 done done TC_02 done done QLUsser_TC_02 TC_03 done done QLUsser_TC_03 Test Case: Quản lý đơn hàng PC Mobile ID Chrome Iphone TC_01 done done TC_02 3.2.5 Quản lý người dùng ID_bug TC_04 TC_05 TC_06 3.2.6 Quản lý đơn hàng ID_bug 127 | P a g e IE213.M22 – Kỹ thuật phát triển hệ thống Web TC_02 done done QLOrder_TC_02 TC_03 done done QLOrder_TC_03 TC_04 done done QLOrder_TC_04 TC_05 done done TC_06 done done TC_07 done done TC_08 done done Test Case: Quản lý viết PC Mobile ID Chrome Iphone TC_09 TC_10 TC_11 TC_12 TC_13 TC_14 3.2.7 Quản lý viết ID_bug 128 | P a g e IE213.M22 – Kỹ thuật phát triển hệ thống Web TC_01 done done TC_02 done done TC_03 done done TC_04 done done Test Case: Quản lý sản phẩm PC Mobile ID Chrome Iphone TC_01 done done TC_02 done done TC_03 done done TC_04 done done TC_05 done done TC_06 done done TC_05 TC_06 TC_07 3.2.8 Quản lý sản phẩm ID_bug QLProduct_TC_02 129 | P a g e IE213.M22 – Kỹ thuật phát triển hệ thống Web TC_07 done done TC_08 TC_09 TC_10 TC_11 TC_12 TC_13 3.2.9 Đặt sản phẩm Test Case: Đặt sản phẩm PC Mobile ID Chrome Iphone TC_01 done done TC_02 done done TC_03 done done ID_bug OrderProduct_TC_04 TC_04 TC_05 130 | P a g e IE213.M22 – Kỹ thuật phát triển hệ thống Web 3.2.10 Thanh toán sản phẩm Test Case: Thanh toán sản phẩm PC Mobile ID Chrome Iphone TC_01 done done TC_02 done done TC_03 done done Test Case: Hủy đơn hàng PC Mobile ID Chrome Iphone TC_01 done done TC_02 done done TC_03 done done ID_bug 3.2.11 Hủy đơn hàng ID_bug TC_04 TC_06 131 | P a g e IE213.M22 – Kỹ thuật phát triển hệ thống Web Chương 4: KẾT LUẬN Nhận xét 4.1.1 Kết đạt - Đã đạt mục tiêu đề ban đầu đề tài – xây dựng website mua bán quản lý việc kinh doanh Báo - Hoàn thành tất use case đề ra, tối ưu bổ sung thêm chức phụ cho use case - Đã hồn tất q trình đóng gói sản phẩm lên source control Github 4.1.2 Ưu điểm - Về việc tổ chức quản lý nhóm: o Tn thủ theo quy trình Scrum với cơng cụ hỗ trợ làm việc nhóm Trello, Microsoft Teams, Github… giúp việc quản lý trở nên dễ dàng, trực quan, hiệu o Họp nhóm định kỳ để trao đổi làm được, làm làm, chia sẻ kiến thức học trình làm cho - Về sản phẩm: o Giao diện người dùng trực quan, dễ sử dụng tất người, có thiết kế đáp ứng(responsive) dành cho nhiều thiết bị trình duyệt khác giúp tăng trải nghiệm người dùng o Đáp ứng không yêu cầu người dùng đăng nhập, Báom thơng tin Báo website mà cịn quản lý tồn thơng tin Báo, viết, đơn hàng với giao diện trược trực quan dễ sử dụng, đầy đủ chức o Sử dụng công nghệ đại React JS, ExpressJS giúp người dùng thực chức cách nhanh chóng o Source code cấu trúc quản lý mộ.t cách chặt chẽ, rõ ràng, dễ dàng cho việc nâng cấp bảo trì sau 132 | P a g e IE213.M22 – Kỹ thuật phát triển hệ thống Web 4.1.3 Hạn chế - Về việc tổ chức quản lý nhóm: o Một số thành viên lần đầu tiếp xúc với công nghệ web đại nên cần hỗ trợ nhiều từ thành viên nhóm o Thành viên nhóm đơng nên quản lý chưa chặt chẽ, dẫn đến số việc bị chậm chút so với mục tiêu ban đầu đề o Phân chia công việc đôi lúc chưa phù hợp với khả thành viên, có số bạn có kinh nghiêm chưa có Nên phải thay đổi linh hoạt cơng việc có hỗ trợ thành viên lại - Về sản phẩm: o Thời gian nguồn lực hạn chế nên số chức chưa thực hoàn thiện o Màu sắc, bố cục chưa thực đẹp mắt giống trang web sử dụng công nghệ tương tự Hướng phát triển - Mở rộng từ trình duyệt Web máy tính sang tảng mobile app để người dùng đặt Báo tiện lợi - Hồn đầy đủ chức thiếu - Hỗ trợ giao diện tối, phát triển ngôn ngữ tiếng Anh - Khắc phục số lỗi có Tổng kết Tóm lại, Website quản lý chuỗi cửa hàng phân phối Báo Seven đáp ứng nhu cầu đặt đề tài, nơi người dùng mua sản phẩm người quản lý quản lý, theo dõi hoạt động chuỗi cửa hàng Qua q trình phát triển hệ thống trên, nhóm đúc kết nhiều kinh nghiệm khả làm việc nhóm, phân tích, thiết kế xây dựng hệ thống Thơng quan mơn học tiếp cận tìm hiểu nhiều kiến thức việc xây dựng website Lựa 133 | P a g e IE213.M22 – Kỹ thuật phát triển hệ thống Web chọn công nghệ phát triển đại giúp nhóm tiếp cận thực tế với cách phát triển website đại TÀI LIỆU THAM KHẢO React Js Document, https://reactjs.org/docs/getting-started.html Mongo Db, https://www.mongodb.com/docs/?_ga=2.82641235.494850129.16542618021501456086.1654092237 Nodejs, https://nodejs.org/en/docs/ Redux – saga, https://redux-saga.js.org/docs/introduction/GettingStarted Antd, https://ant.design/docs/react/introduce Bootstrap, https://getbootstrap.com/docs/5.2/getting-started/introduction/ 134 | P a g e ... Xác thực phần mềm 4|Page IE213.M22 – Kỹ thuật phát triển hệ thống Web - Báo cáo 1.3.2 Công cụ sử dụng quản lý dự án - Công cụ trao đổi thông tin o Ứng dụng Microsoft Teams: nơi thông báo việc... để nhóm trưởng đề xuất, góp ý sản phẩm thành viên làm - Công cụ lưu trữ tài liệu: Google Drive - Công cụ quản lý Product Backlog: Trello Trong sprint (1-2 tuần), công việc quản lý Trello: - Danh... thông báo tài khoản không hợp lệ đăng nhập không thành công ▪ Bước 8: Controller thông báo đăng nhập thất bại giao diện đăng nhập ▪ Bước 9: Thông báo yêu cầu kiểm tra lại thông tin đăng nhập đến