bao cao project 2 hust

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG ──────── ─────── BÀI TẬP LỚN MÔN PROJECT II ĐỀ TÀI Xây dựng website quản lý kho hàng Giáo viên hướng dẫn TS Nguyễn Khanh Vă.

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG ──────── * ─────── BÀI TẬP LỚN MÔN: PROJECT II ĐỀ TÀI: Xây dựng website quản lý kho hàng Giáo viên hướng dẫn: Nhóm sinh viên thực hiện: Họ tên Trần Quang Trung Quách Thế Trường Bùi Văn Kiên Nguyễn Thị Thùy Trang TS Nguyễn Khanh Văn Nhóm MSSV 20194195 20194196 20180785 20194190 Hà Nội, tháng năm 2022 Mục lục Chương 1: Giới thiệu đề tài 1.1 Đặt vấn đề Đề tài xây dựng website, phần mềm quản lý kho hàng đề tài quen thuộc với người học lập trình ứng dụng, nhiên khn khổ học phần Project II, chúng em lựa chọn đề tài để củng cố kiến thức lập trình học thêm công nghệ NET Core, ReactJS 1.2 Xác định tập nhiệm vụ cụ thể Dựa tính thực tiễn vấn đề, nội dung mơn học Project II, em lựa chọn đề tài xây dựng website quản lý kho hàng Mục đích cuối chương trình sau xây dựng thể đầy đủ tính năng, hỗ trợ tối ưu cho việc quản lý kho hàng Kết cuối đạt phải đảm bảo: Đầy đủ tính việc quản lý kho hàng (quản lý user hệ thống, quản lý sản phẩm, loại sản phẩm, trang nhập/xuất hàng, quản lý hàng tồn kho) Giao diện thân thiện, dễ dàng sử dụng người dùng Các thao tác với giao diện mượt mà, trơn tru 1.3 Bố cục đồ án Phần lại báo cáo đồ án tổ chức sau: • Chương 2: Trình bày khảo sát toàn yêu cầu nghiệp vụ đặt tốn • Chương 3: Trình bày cơng nghệ sử dụng để lập trình web Trong chương này, em nêu rõ các công nghệ sử dụng, thư viện kèm • Chương 4: Trình bày cách xây dựng tổ chức chương trình Cách thiết kế chi tiết biểu đồ gói, biểu đồ lớp, thiết kế cở sở liệu, thiết kế giao diện kết dự án • Chương 5: Kết luận hướng phát triển cho tốn • Chương 6: Tài liệu tham khảo • Chương 7: Báo cáo cá nhân Chương 2: Phân tích yêu cầu tốn Tổng quan: Trong chương 2, phân tích u cầu toán, em xác định chức tổng quan chương trình yêu cầu phi chức chương trình có … 2.1 Tổng quan chức Hệ thống gồm loại user: admin, quản lý (manager), thủ kho (stocker) Các chức hệ thống: • Đăng nhập • Thay đổi mật • Quản lý người dùng (chỉ admin có quyền sử dụng) o Thêm người dùng: sử dụng mail để gửi tài khoản cho người dùng o Chỉnh sửa thơng tin người dùng o Xóa người dùng • Quản lý sản phẩm: Thêm, sửa, xóa sản phẩm (admin, manager, stocker có quyền sử dụng) • Quản lý loại sản phẩm: Thêm, sửa, xóa loại sản phẩm (admin, manager, stocker có quyền sử dụng) • Quản lý nhập hàng: Thêm, sửa, xóa ghi nhập hàng, thêm, sửa xóa lơ hàng vào ghi (admin, manager, stocker có quyền sử dụng) • Quản lý xuất hàng: Thêm, sửa, xóa ghi xuất hàng, thêm sản phẩm vào bảng ghi (admin, manager, stocker có quyền sử dụng) • Quản lý sản phẩm tồn kho (admin, manager, stocker có quyền sử dụng) 2.2 Yêu cầu phi chức • Thao tác: o Giao diện mượt mà, thao tác nút bấm, nhập text dễ dàng  Hiệu năng: o Hệ thống phục vụ 24/24 o Cập nhật database trực tiếp, khơng bị sai sót thơng tin người dùng o Tương tác nhanh gọn, mượt mà Tốc độ truy xuất thông tin nhanh Chương 3: Công nghệ sử dụng Tổng quan: Ở chương 3, em trình bày công nghệ sử dụng để thiết kế xây dựng website quản lý kho hàng 3.1 Cơng nghệ dùng thiết kế phần mềm  Draw.io Hình 3.1 Trang web draw.io Draw.io biết đến website cung cấp tảng cho người dùng vẽ biểu đồ, mơ hình, sơ đồ đơn giản Đặc biệt, người dùng sử dụng online khơng cần cài đặt vào máy, không bị giới hạn số lần sử dụng hồn tồn miễn phí 3.2 Cơng nghệ dùng xây dựng website  ReactJS Hình 3.2 Logo framework ReactJS • React thư viện UI phát triển Facebook để hỗ trợ việc xây dựng thành phần (components) UI có tính tương tác cao, có trạng thái sử dụng lại React sử dụng Facebook production, www.instagram.com viết hoàn tồn React • Ưu điểm: o Sử dụng DOM ảo, giúp cải thiện hiệu suất nhiều o Reactjs giúp việc viết đoạn code JS dễ dàng hơn: Nó dung cú pháp đặc biệt JSX (Javascript mở rộng) cho phép ta trộn code HTML Javascript o Làm việc với vấn đề test giao diện: Nó dễ để viết test case giao diện virtual DOM cài đặt hồn tồn JS o Làm việc với vấn đề test giao diện: Nó dễ để viết test case giao diện virtual DOM cài đặt hồn tồn JS • Nhược điểm: o Reactjs phục vụ cho tầng View, khơng có chế 2-way binding o Tích hợp Reactjs vào framework MVC truyền thống yêu cầu cần phải cấu hình lại o Một số thư viện sử dụng dự án: npm, yarn, redux, material ui, …  ASP NET Core C# Hình 3.3 Logo framework Asp Net core • ASP.NET Core open-source framework đa tảng (cross-platform) cho việc xây dựng ứng dụng dựa kết nối đám mây, giống web apps, IoT backend cho mobile Nó bao gồm thành phần theo hướng module nhằm tối thiểu tài ngun chi phí phát triển • Ưu điểm: o Tương thích hệ thống xây dựng Web UI Web APIs o Tích hợp client frameworks đại –side o Dependency injection xây dựng sẵn o HTTP request tối ưu nhẹ o Chuyển thực thể, thành phần, module NuGet packages o Các cơng cụ để đơn giản hóa q trình phát triển web đại o Xây dựng chạy đa tảng o Mã nguồn mở, tập trung vào cộng đồng • Nhược điểm: o Cần nhiều thời gian tìm hiểu trước sử dụng asp.net core phức tạp nhiều tính • Một số thư viện sử dụng dự án; Asp.NET core 6.0, Web API template, Microsoft.AspNetCore.Authentication, Bcrypt.Net-Next, AutoMapper, EF Core, SwaggerUI, …  SQL Server Hình 3.4 Logo Sql server • SQL Server hệ quản trị sở liệu quan hệ (Relational Database Management System (RDBMS) ) sử dụng câu lệnh SQL (Transact-SQL) để trao đổi liệu máy Client máy cài SQL Server Một RDBMS bao gồm databases, database engine ứng dụng dùng để quản lý liệu phận khác RDBMS • Ưu điểm: o Cài nhiều phiên MS SQL khác máy o Duy trì riêng biệt môi trường sản xuất, phát triển, thử nghiệm o Giảm thiểu vấn đề tạm thời sở liệu o Tách biệt đặc quyền bảo mật o Duy trì máy chủ dự phịng • Nhược điểm o Microsoft SQL Server chạy hệ điều hành Windows o Microsoft SQL Server cần tốn phí license để chạy nhiều database  IDE Visual Studio Code (Triển khai ReactJS) Hình 3.5 Logo IDE Visual Studio Code Visual Studio Code (VS Code hay VSC) trình soạn thảo mã nguồn phổ biến sử dụng lập trình viên Nhanh, nhẹ, hỗ trợ đa tảng, nhiều tính mã nguồn mở ưu điểm vượt trội khiến VS Code ngày ứng dụng rộng rãi  IDE Microsoft Visual Studio (Triển khai Asp Net Core) Hình 3.6 Logo IDE Microsoft Visual Studio Microsoft Visual Studio gọi "Trình soạn thảo mã nhiều người sử dụng giới ", dùng để lập trình C++ C# Nó sử dụng để phát triển chương trình máy tính cho Microsoft Windows, trang web, ứng dụng web dịch vụ web.Công nghệ quản lý source code  Github Hình 3.7 Logo cơng nghệ quản lý mã nguồn Github GitHub dịch vụ tiếng cung cấp kho lưu trữ mã nguồn Git cho dự án phần mềm Github có đầy đủ tính Git, ngồi cịn bổ sung tính social để developer tương tác với Link github dự án: • Frontend: https://github.com/trungtt123/project_2_frontend.git • Backend: https://github.com/trungtt123/project_2_backend.git Hình 4.14 + 4.15 Tầng controllers • ControllerBase: base class package Microsoft.AspNetCore.Mvc, cho phép định tuyến controller, hỗ trợ phương thức GET, POST, PUT, DELETE… cho q trình viết resful api • Các lớp controller u cầu token sử dụng attribute “Authorize” Microsoft.AspNetCore.Authorization để xác thực token có phải token sinh từ hệ thống cịn timelife hay khơng, em viết thêm thêm attribute “VerifyRoleFilter” sử dụng hàm verifyToken UserService để kiểm tra role user có bị thay đổi admin token hạn hay khơng Ngồi ra, sử dụng thêm Route để thêm tiền tố cho tất api  Mô tả số lớp Controller quan trọng • UserController Hình 4.16 Thiết kế lớp UserController ST T - Mô tả UserController Method + Url Header GET: api/v1/verifytoken Param Body Mục đích Authorizatio n Khơng Khơng có có GET: Khơng có api/v1/get-listpermission GET: Authorizatio api/v1/user n Khơng Khơng có có POST: api/v1/user Authorizatio n Khơng userData (UserNoIdDto) có Tạo user PUT: api/v1/user Authorizatio n Khơng newUserData có (UserUpdateDto) DELETE: api/v1/user Authorizatio n userId (int) Chỉnh sửa thơng tin user Xóa user userId (int) Khơng có Khơng có Kiểm tra tính đắn token Lấy danh sách vai trị user Lấy thơng tin user GET: api/v1/get-allusers PUT: api/v1/changepassword 4.4 Authorizatio n Authorizatio n Khơng Khơng có có Lấy danh sách người dùng Khơng userData Đổi mật có (UserChangePassWordDto) Kiến trúc frontend • Kiến trúc client-side redering frontend: • Bao gồm: View Layer, Mangement state, Service (API client, common Service) Hình 4.17 Tổng quan kiến trúc frontend • View layer: o Phụ trách giao diện hiển thị trang web o Tương ứng với route chuyển đến page tương ứng o Một page bao gồm component con, số component dùng chung o Ví dụ: table, modal Hình 4.18 Triển khai cấu trúc dự án frontend Hình 4.19 Tái sử dụng component Trong hình minh họa ta thấy component table, component modal Sửa sản phẩm, coponent dùng chung navbar Hình 4.20 Minh họa việc tái sử dụng component • State Management o Quản lý trạng thái component o Lưu thơng tin vào state từ hiển thị thơng tin lên UI, dùng biến trung gian để tương tác component với server o Ví dụ: + isShowModal: cho biết modal có show hay không + productData: state lưu thông tin product dùng để gửi xuống database, từ database gửi lên để lên UI + localstorage,cookie: lưu thông tin trình duyệt ví dụ user, isAuthenticate để lần gửi request đính kèm vào api để server xác thực người dùng o Sử dụng redux để quản lý state dùng chung nhiều component thay đổi Hình 4.20 Truyền state khơng sử dụng redux có sử dụng redux Hình 4.21 Flow hệ thống • API client o Sử dụng chuẩn REST API (REpresentational State Transfer) trao đổi JSON chứa data cần để thực phương thức GET, POST, PUT, DELETE Hình 4.21 Restful api o Dùng header để xử lý authentication quy định kiểu liệu trao đổi + Xác thực người dùng theo phương thức JWT + Header quy application/pdf, image/png định content type application/json, application/xml, application/octet-stream, Hình 4.22 Minh họa request response o Client nhận thông tin status code error message tương ứng để phân loại lỗi để hiển thị cho người dùng tương tác Hình 4.23 Mã lỗi HTTP request 4.5 Kết đạt Sau xây dựng chương trình website quản lý kho hàng, kết mà nhóm em đạt là: • Giao diện chương trình thân thiện, dễ dùng mong đợi • Cung cấp đầy đủ chức xác định phần phân tích u cầu hệ thống • Tương thích tốt giao diện web PC Hình ảnh 4.24 Giao diện SwaggerUI, giúp test api cách dễ dàng Hình ảnh 4.25 Giao diện trang nhập hàng Chương 5: Kết luận hướng phát triển 5.1 Kết luận Trải qua trình dài làm việc xây dựng lên phần mềm website quản lý kho hàng, nhóm học tập nhiều kiến thức, kỹ Một vài kỹ mà nhóm học kỹ thiết kế xây dựng chương trình, kỹ làm việc nhóm, kĩ tìm hiểu cơng nghệ … Bên cạnh chúng em ơn tập lại kĩ lập trình, kĩ phân tích thiết kế xây dựng hệ thống, kĩ xây dựng sở liệu mơn học trước Nhận xét phần mềm tìm kiếm, nhóm thấy có ưu điểm giao diện đơn giản, thân thiện dễ sử dụng với người dùng Phần mềm có đầy đủ chức cho việc giúp người dùng quản lý kho hàng Mặt khác, nhóm tự nhận thấy vài thiếu sót phần mềm Tốc độ xử lý chưa thực cao, liệu trả giao diện chưa đạt mức realtime chưa đem lại trải nghiệm tốt ưu cho người dùng 5.2 Hướng phát triển Đây đề tài hay thú vị, nói chung đề tài cịn nhiều thứ để khai thác, nhóm cố gắng khai thác thêm nhiều chức mới, làm giao diện cho đẹp mắt hơn, thân thiện Thiết kế lại database để phù hợp với chức Chương 6: Báo cáo cá nhân Trần Quang Trung – 20194195 (Nhóm trưởng) Cụ thể cơng việc: • Thiết kế database • Base project backend, xây dựng package, module mẫu • Thiết kế api, service, lớp liên quan tới api user, trang nhập hàng, trang xuất hàng, gửi mail • Hỗ trợ team frontend làm trang nhập hàng, xuất hàng • Quản lý mã nguồn, merge code từ nhánh thành viên • Quản lý đốc thúc tiến độ công việc thành viên Mức độ đóng góp: 40% Kết quả: Hồn thành tốt Thu hoạch: • Củng cố kiến thức lập trình, thiết kế sở liệu, … • Học thêm cơng nghệ AspNetCore • Tăng kỹ quản lý dự án, quản lý mã nguồn, kỹ làm việc nhóm, làm việc độc lập 31 Quách Thế Trường - 20194196 Cụ thể cơng việc: • Base project frontend, xây dựng package, module mẫu • Thiết kế service call api • Thiết kế giao diện trang người dùng, quản lý tồn kho Mức độ đóng góp: 25% Kết quả: Hồn thành tốt Thu hoạch: • Học thêm cơng nghệ ReactJS • Tăng kỹ quản lý dự án, quản lý mã nguồn, kỹ làm việc nhóm, làm việc độc lập 31 Bùi Văn Kiên - 20194196 Cụ thể cơng việc: • Thiết kế database • Thiết kế api, service, lớp liên quan tới api product, product type, product batch Mức độ đóng góp: 15% Kết quả: Hồn thành tốt Thu hoạch: • Củng cố kiến thức lập trình, thiết kế sở liệu, … • Học thêm công nghệ AspNetCore • Tăng kỹ quản lý dự án, quản lý mã nguồn, kỹ làm việc nhóm, làm việc độc lập 31 Nguyễn Thị Thùy Trang – 20194190 Cụ thể công việc: • Thiết kế giao diện trang login • Thiết kế trang đổi mật • Thiết kế trang quản lý sản phẩm • Thiết kế trang loại sản phẩm Kết quả: Hồn thành tốt Mức độ đóng góp: 20% Thu hoạch cá nhân sau đồ án: • Củng cố kiến thức kĩ lập trình • Biết cách làm việc nhóm, quản lý mã nguồn qua Github • Tìm hiểu học hỏi cơng nghệ hay framework như: ReactJS, … • Bổ sung thêm kiến thức, biết thêm cách dùng template để thiết kế giao diện • Cải thiện kỹ quản lý dự án kỹ làm việc nhóm 31 Chương 7: Tài liệu tham khảo [1] stackoverflow, https://stackoverflow.com/ [2] W3schools , https://www.w3schools.com/ [3] Boostrap 5, https://getbootstrap.com/docs/5.0/gettingstarted/introduction/ [4] Asp.NET core, https://docs.microsoft.com// [5] ReactJS, https://reactjs.org/docs/getting-started.html [6] Redux https://redux.js.org/ [7] Slide giảng phân tích thiết kế hệ thống TS Nguyễn Bá Ngọc 31 ... Link github dự án: • Frontend: https://github.com/trungtt 123 /project_ 2_ frontend.git • Backend: https://github.com/trungtt 123 /project_ 2_ backend.git Chương 4: Phát triển triển khai ứng dụng Tổng... manager, stocker có quyền sử dụng) 2. 2 Yêu cầu phi chức • Thao tác: o Giao diện mượt mà, thao tác nút bấm, nhập text dễ dàng  Hiệu năng: o Hệ thống phục vụ 24 /24 o Cập nhật database trực tiếp,... phần Project II, chúng em lựa chọn đề tài để củng cố kiến thức lập trình học thêm cơng nghệ NET Core, ReactJS 1 .2 Xác định tập nhiệm vụ cụ thể Dựa tính thực tiễn vấn đề, nội dung môn học Project