Đồ án nghiên cứu NodeJS ReactJS xây dựng website quản lý bán giày - Đại học Công nghệ Thông tin

• Tác giả: Trần Duy Khánh
• Người hướng dẫn: Thái Thuỵ Hàn Uyển
• Trường học: Đại học Công nghệ Thông tin
• Chuyên ngành: Công nghệ phần mềm
• Đề tài: Quản lý bán giày
• Loại tài liệu: Đồ án
• Năm xuất bản: 2021
• Địa điểm: Hồ Chí Minh

Tóm tắt

I. Tổng quan về đồ án NodeJS ReactJS và website bán giày SE121

Đồ án SE121 L21 PMCL là báo cáo đồ án 1 của nhóm sinh viên Trường Đại học Công nghệ Thông tin, Khoa Công nghệ Phần mềm. Nhóm gồm Trần Duy Khánh và Nguyễn Hữu Trí, thực hiện dưới sự hướng dẫn của giảng viên Thái Thụy Hàn Uyển. Đồ án tập trung nghiên cứu hai công nghệ web hiện đại là NodeJS và ReactJS, đồng thời ứng dụng vào xây dựng hệ thống quản lý bán giày thực tế. Hệ thống hướng đến việc số hóa quy trình quản lý cửa hàng giày, bao gồm nhập kho, bán hàng, quản lý nhà cung cấp và báo cáo tài chính. Kiến trúc phân lớp rõ ràng với frontend ReactJS giao tiếp backend NodeJS qua REST API. Cơ sở dữ liệu sử dụng MySQL kết hợp Firebase. Hệ thống phân quyền cho năm nhóm người dùng: chủ cửa hàng, nhân viên kho, nhân viên bán hàng, nhân viên kế toán và khách hàng. Mỗi nhóm có chức năng và quyền hạn riêng biệt, đảm bảo an toàn dữ liệu và vận hành hiệu quả.

1.1. Mục tiêu và phạm vi đồ án SE121 L21 PMCL

Đồ án đặt ra mục tiêu kép: nghiên cứu lý thuyết về NodeJS và ReactJS, sau đó áp dụng vào bài toán thực tế. Phạm vi bao gồm toàn bộ nghiệp vụ cửa hàng giày từ nhập hàng, quản lý kho, bán hàng đến lập báo cáo lợi nhuận. Hệ thống xử lý các biểu mẫu nghiệp vụ như phiếu nhập kho, phiếu bán hàng, phiếu chi và thẻ nhân viên. Mô hình Usecase mô tả đầy đủ hơn 50 tình huống sử dụng, phủ toàn bộ luồng nghiệp vụ cần thiết của một cửa hàng bán lẻ hiện đại.

1.2. Công nghệ nền tảng NodeJS và ReactJS trong hệ thống

NodeJS đóng vai trò backend server với khả năng xử lý I/O bất đồng bộ, phù hợp cho các API phục vụ nhiều yêu cầu đồng thời. ReactJS xây dựng giao diện người dùng dạng Single Page Application, giúp trải nghiệm mượt mà và phản hồi nhanh. Kiến trúc MVC được áp dụng để tách biệt logic xử lý, dữ liệu và giao diện. Sự kết hợp này tạo ra hệ thống fullstack JavaScript thuần nhất, giảm chi phí chuyển đổi ngữ cảnh kỹ thuật giữa frontend và backend.

II. Phân tích bài toán quản lý bán giày và yêu cầu hệ thống

Qua khảo sát hiện trạng, nhóm nhận thấy các cửa hàng giày vừa và nhỏ đang quản lý thủ công bằng sổ sách hoặc bảng tính. Quá trình này dẫn đến sai sót nhập liệu, khó tra cứu lịch sử giao dịch và mất nhiều thời gian đối soát kho. Bài toán đặt ra là xây dựng phần mềm thay thế quy trình thủ công, đảm bảo tính chính xác và tức thời. Hệ thống cần quản lý năm nhóm đối tượng chính: chủ cửa hàng có quyền cao nhất, nhân viên kho phụ trách nhập xuất hàng, nhân viên bán hàng xử lý đơn hàng online và offline, nhân viên kế toán quản lý tài chính, và khách hàng chỉ có quyền xem và mua sản phẩm. Yêu cầu phi chức năng bao gồm hiệu suất cao, bảo mật phân quyền nghiêm ngặt và giao diện thân thiện. Danh sách usecase gồm hơn 50 kịch bản, từ đăng nhập, đổi mật khẩu đến các nghiệp vụ phức tạp như lập phiếu nhập kho và báo cáo lợi nhuận.

2.1. Phân tích các Actor và phân quyền trong hệ thống

Chủ cửa hàng có toàn quyền: thay đổi quy định, xem báo cáo lợi nhuận, quản lý người dùng và nhà cung cấp. Nhân viên kho quản lý phiếu nhập kho, kiểm kê tồn kho và xuất hàng. Nhân viên bán hàng lập phiếu bán hàng, quản lý giỏ hàng và đơn đặt hàng online. Nhân viên kế toán lập phiếu chi và theo dõi dòng tiền. Khách hàng chỉ xem sản phẩm và thực hiện mua hàng. Phân quyền rõ ràng giảm thiểu rủi ro thao tác sai và bảo vệ dữ liệu nhạy cảm.

2.2. Danh sách biểu mẫu nghiệp vụ cần số hóa

Hệ thống số hóa mười biểu mẫu nghiệp vụ thực tế. Phiếu nhập hàng ghi nhận thông tin đơn đặt hàng từ nhà cung cấp. Phiếu nhập kho xác nhận hàng đã về kho với đủ số lượng và quy cách. Phiếu bán hàng ghi nhận giao dịch bán lẻ. Phiếu chi ghi nhận thanh toán cho nhà cung cấp. Biểu mẫu sản phẩm mới thu thập thông tin size, màu sắc, đơn giá mua và bán. Thẻ nhân viên lưu hồ sơ nhân sự. Các biểu mẫu có quy định ràng buộc rõ ràng, ví dụ nhà cung cấp và hãng sản xuất phải nằm trong danh sách được duyệt.

III. Giải pháp kỹ thuật với NodeJS ReactJS MySQL và Firebase

Kiến trúc hệ thống theo mô hình MVC ba lớp. NodeJS xử lý tầng logic nghiệp vụ và API, ReactJS phụ trách tầng giao diện, MySQL lưu trữ dữ liệu quan hệ chính, Firebase hỗ trợ xác thực và dữ liệu thời gian thực. NodeJS phù hợp với hệ thống này vì cơ chế event-driven và non-blocking I/O cho phép xử lý đồng thời nhiều yêu cầu mà không tạo độ trễ. ReactJS xây dựng giao diện dạng component tái sử dụng, giảm thời gian phát triển và dễ bảo trì. MySQL đảm bảo tính toàn vẹn dữ liệu cho các giao dịch tài chính phức tạp. Firebase cung cấp khả năng cập nhật dữ liệu thời gian thực, phù hợp cho thông báo trạng thái đơn hàng. Thiết kế cơ sở dữ liệu gồm hơn 23 bảng, mô tả đầy đủ thực thể từ sản phẩm, kho, đơn hàng đến nhân viên và nhà cung cấp.

3.1. Vai trò của ReactJS trong xây dựng giao diện quản lý

ReactJS sử dụng Virtual DOM để cập nhật giao diện chỉ khi dữ liệu thay đổi, tối ưu hiệu suất render. Component-based architecture cho phép tái sử dụng giao diện như bảng danh sách sản phẩm, form nhập liệu và biểu đồ báo cáo. Single Page Application loại bỏ việc tải lại trang, mang lại trải nghiệm mượt mà cho nhân viên vận hành. JSX kết hợp HTML và JavaScript trong một file duy nhất, tăng tốc phát triển giao diện. Đây là lý do ReactJS được chọn cho các màn hình quản lý phức tạp của hệ thống.

3.2. Vai trò của NodeJS trong xây dựng backend API bán giày

NodeJS cung cấp môi trường runtime JavaScript phía server, cho phép dùng chung ngôn ngữ với frontend. Cơ chế non-blocking I/O xử lý hàng nghìn yêu cầu đồng thời mà không chặn luồng chính. NodeJS phù hợp xây dựng JSON API cung cấp dữ liệu cho ReactJS. Khả năng xây dựng proxy phân vùng luồng dữ liệu giúp hệ thống xử lý báo cáo lớn mà không ảnh hưởng đến các yêu cầu thời gian thực. Nhược điểm là ứng dụng tính toán nặng sẽ tiêu tốn tài nguyên do phải qua thêm trình biên dịch JavaScript.

IV. Kết quả đồ án SE121 và ứng dụng thực tiễn trong thương mại điện tử

Đồ án SE121 L21 PMCL hoàn thành hệ thống quản lý bán giày đầy đủ chức năng, bao gồm giao diện cho năm nhóm người dùng với hơn 50 usecase được đặc tả chi tiết. Giao diện gồm các màn hình quản lý sản phẩm, nhập kho, bán hàng, nhà cung cấp, người dùng và báo cáo tài chính. Hệ thống tự động tính toán lợi nhuận dựa trên tỷ lệ do chủ cửa hàng cấu hình và cảnh báo khi tồn kho dưới mức tối thiểu quy định. Đây là nền tảng thực hành quan trọng giúp sinh viên nắm vững fullstack JavaScript trong môi trường doanh nghiệp. Kiến thức NodeJS và ReactJS từ đồ án này có thể chuyển hóa trực tiếp vào các dự án thương mại điện tử thực tế. Stack công nghệ MERN (MongoDB/MySQL, Express, React, Node) đang được nhiều doanh nghiệp Việt Nam ưu tiên tuyển dụng, nên đồ án này có giá trị thực tiễn cao cho sinh viên chuẩn bị ra trường.

4.1. Các tính năng nổi bật của website quản lý bán giày

Tính năng quản lý kho cho phép lập, sửa và xóa phiếu nhập kho với kiểm tra ràng buộc tự động. Tính năng bán hàng xử lý đơn đặt hàng online và tại quầy trong cùng một giao diện. Báo cáo lợi nhuận tự động tổng hợp doanh thu và chi phí theo kỳ. Tính năng quản lý nhà cung cấp với danh sách được kiểm soát chặt chẽ, tránh nhập hàng từ nguồn không rõ ràng. Phân quyền theo vai trò đảm bảo mỗi nhân viên chỉ thao tác trong phạm vi được giao, giảm rủi ro gian lận nội bộ.

4.2. Bài học kinh nghiệm và hướng phát triển tiếp theo

Đồ án cho thấy ReactJS và NodeJS là bộ đôi hiệu quả cho ứng dụng quản lý vừa và nhỏ. Việc kết hợp MySQL cho dữ liệu quan hệ và Firebase cho tính năng thời gian thực là lựa chọn linh hoạt. Hướng phát triển tiếp theo có thể bổ sung ứng dụng di động với React Native, tích hợp thanh toán trực tuyến và module phân tích dữ liệu bán hàng bằng machine learning. Kinh nghiệm thiết kế usecase và cơ sở dữ liệu từ đồ án này áp dụng được trực tiếp vào các dự án phần mềm thương mại quy mô lớn hơn.

Trích đoạn nội dung tài liệu

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM -----🙚🙘🕮🙚🙘----- BÁO CÁO ĐỒ ÁN 1 TÌM HIỂU VỀ NODEJS VÀ REACTJS VÀ XÂY DỰNG WEBSITE QUẢN LÝ BÁN GIÀY Giảng viên hướng dẫn: Thái Thuỵ Hàn Uyển Nhóm thực hiện: Trần Duy Khánh 18520075 Nguyễn Hữu Trí 18521528 TPHCM, tháng 4 năm 2021 1 Nội dung CHƯƠNG 1: THÔNG TIN CHUNG 9 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 10 2. Giới thiệu về React JS 10 2. Nhược điểm: 17 2. Giới thiệu về NodeJS 19 2. Đặc điểm của Node. Các thành phần quan trọng trong Node. Nhược điểm: 22 2. Xây dựng cơ sở dữ liệu 22 2. Cơ sở dữ liệu MySql 22 2. Hệ quản trị cơ sở dữ liệu FireBase 23 CHƯƠNG 3: PHÁT BIỂU BÀI TOÁN 24 3.1 Khảo sát hiện trạng 24 3.1 Phát biểu bài toán 24 3.2 Yêu cầu hệ thống 30 3.1 Sơ đồ tổ chức hệ thống 30 3.2 Chức năng nhiệm vụ của từng bộ phận 31 3.1 Chủ cửa hàng 31 3.2 Bộ phận bán hàng 31 3.3 Bộ phận kế toán 32 3.4 Bộ phận kho 32 3.3 Danh sách các yêu cầu 41 3.4 Danh sách các biểu mẫu 41 3.1 Biểu mẫu 1 và quy định 1 41 3.2 Biểu mẫu 2 và quy định 2 42 3.3 Biểu mẫu 3 và quy định 3 43 3.4 Biểu mẫu 4 và quy định 4 43 3.5 Biểu mẫu 5 và quy định 5 44 3.6 Biểu mẫu 6 và quy định 6 45 2.7 Biểu mẫu 7 và quy định 7 46 2.10 Biểu mẫu 10 47 CHƯƠNG 4: MÔ HÌNH USECASE 48 2 4. Mô hình Usecase tổng quát 48 4. Danh sách các Actor 49 4. Danh sách các Usecase 49 4. Đặc tả Usecase 53 4. Đặc tả use case "Đăng nhập" 53 4. Đặc tả use case "Đăng xuất" 54 4. Đặc tả use case "Thay đổi mật khẩu" 54 4. Đặc tả use case "Quản lý nhập hàng" 55 4. Quản lý nhập hàng 55 4. Lập phiếu nhập hàng 56 4. Sửa phiếu nhập hàng 58 4. Đặc tả use case "Quản lý nhập kho" 60 4. Quản lý nhập kho 60 4. Lập phiếu nhập kho 61 4. Xóa phiếu nhập kho 63 4. Sửa phiếu nhập kho 64 4. Đặc tả use case "Quản lý nhà cung cấp" 65 4. Quản lý nhà cung cấp 65 4. Thêm nhà cung cấp 67 4. Xóa nhà cung cấp 68 4. Sửa nhà cung cấp 69 4. Đặc tả use case "Quản lý người dùng" 70 4. Quản lý người dùng 70 4. Thêm người dùng 71 4. Xóa người dùng 73 4. Sửa thông tin người dung 73 4. Đặc tả use case "Quản lý giỏ hàng" 75 4. Quản lý giỏ hang 75 4. Thêm giỏ hàng 76 4. Sửa giỏ hàng 78 4. Đặc tả use case "Quản lý sản phẩm" 80 4. Quản lý sản phẩm 80 4. Thêm sản phẩm mới 81 4. Sửa thông tin sản phẩm 83 4. Tìm kiếm sản phẩm 85 4. Đặc tả use case "Báo cáo bán hàng" 86 4. Đặc tả use case "Báo cáo lợi nhuận" 87 4. Đặc tả use case "Thay đổi quy định" 88 4. Thay đổi quy định 88 4. Thay đổi số lượng tồn tối thiểu 89 4. Thay đổi tỷ lệ lợi nhuận 90 4. Đặc tả use case "Lập phiếu chi" 92 4. Đặc tả use case "Quản lý bán hàng" 93 3 4. Thêm phiếu bán hàng 94 4. Sửa phiếu bán hàng 96 CHƯƠNG 5: PHÂN TÍCH 99 5. Danh sách lớp đối tượng và quan hệ 100 5. Mô tả chi tiết của từng lớp đối tượng 101 5.23 Mau 119 CHƯƠNG 6: THIẾT KẾ CƠ SỞ DỮ LIỆU 120 6. Danh Sách Bảng 121 6. Mô tả chi tiết của từng lớp đối tượng 122 6.23 Mau 130 CHƯƠNG 7: THIẾT KẾ KIẾN TRÚC 130 7.1 Kiến trúc hệ thống 130 7.2 Mô tả chi tiết hệ thống 130 7.1 Mô hinh MVC 130 CHƯƠNG 8: THIẾT KẾ MÀN HÌNH 131 8. Danh sách màn hình 131 8. Mô tả các màn hình 133 8.1 Màn hình đăng nhập 133 8.2 Trang quản trị 135 8.3 Danh sách phiếu bán hàng 137 8.4 Lập phiếu bán hàng 139 8.5 Danh sách phiếu đặt hàng 143 8.6 Lập phiếu đặt hàng 145 8.7 Danh sách phiếu chi 147 8.8 Lập phiếu chi 149 8.9 Danh sách phiếu nhập kho 150 8.10 Lập phiếu nhập kho 153 8.11 Danh sách sản phẩm 155 8.12 Thêm/sửa sản phẩm 157 8. Danh sách hãng sản xuất 160 8. Thêm/Sửa hãng sản xuất 162 8. Danh sách nhà cung cấp 164 8. Thêm/sửa nhà cung cấp 166 8. Danh sách người dùng 167 8. Danh sách giỏ hàng 170 CHƯƠNG 9: THỬ NGHIỆM VÀ ĐÁNH GIÁ 171 9.1 Môi trường và thử nghiệm 171 9.2 Kết quả thử nghiệm 171 9.3 Đánh giá sản phẩm 173 5 CHƯƠNG 10: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 173 10.2 Hướng phát triển 173 10.3 Tài liệu tham khảo 173 6 Nhận xét của giảng viên ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… 7 LỜI CẢM ƠN Đầu tiên, chúng em xin gởi lời cảm ơn chân thành đến tập thể quý Thầy Cô Trường Đại học Công nghệ Thông tin – Đại học Quốc gia TP.HCM và quý Thầy Cô khoaCông nghệ phần mềm đã giúp cho chúng em có những kiến thức cơ bản làm nền tảng để thực hiện đề tài này. Đặc biệt, nhóm chúng em xin gửi lời cảm ơn và lòng biết ơn sâu sắc nhất tới cô Thái Thuỵ Hàn Uyển (giảng viên hướng dẫn đồ án mã nguồn mở) là người đã trực tiếp đứng lớp hướng dẫn tận tình, sửa chữa và đóng góp nhiều ý kiến quý báo chúng em hoàn thành tốt báo cáo của mình. Trong thời gian một học kỳ thực hiện đề tài, nhóm chúng em đã vận dụng những kiến thức nền tảng đã tích lũy đồng thời kết hợp với việc học hỏi và nghiên cứu những kiến thức mới. Từ đó, nhóm vận dụng tối đa những gì đã thu thập được để hoàn thành một báo cáo đồ án tốt nhất. Tuy nhiên, trong quá trình thực hiện, vẫn không tránh khỏi những thiếu sót. Chính vì vậy, nhóm chúng em rất mong nhận được những sự góp ý từ phía các Thầy Cô nhằm hoàn thiện những kiến thức mà nhóm đã học tập và là hành trang để chúng em thực hiện tiếp các đề tài khác trong tương lai. Xin chân thành cảm ơn quý Thầy Cô! 8 CHƯƠNG 1: THÔNG TIN CHUNG 1.1 Tên đề tài: Quản Lý Bán Giày 1.2 Môi trường phát triển ứng dụng : NodeJs và ReactJs - Hệ điều hành: Microsoft Windows. - Hệ quản trị cơ sở dữ liệu: MongoDB. - Công cụ phân tích thiết kế: Draw.io - Công cụ xây dựng ứng dụng: Visual Studio Code 1.3 Thông tin nhóm ST MSSV Họ và tên Điện thoại Email T 1 18520075 Trần Duy Khánh [e-mail] 2 18521528 Nguyễn Hữu Trí [e-mail] 9 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2. Giới thiệu về React JS - React JS là thư viện Javascript được xây dựng bởi các kỹ sư của Facebook, đang được rất nhiều công ty nổi tiếng sử dụng để phát triển các sản phẩm của họ như Yahoo, Airbnb và tất nhiên là trong nội tại Facebook, Instagram. Nó phù hợp với các dự án lớn có tính mở rộng hơn là các dự án nhỏ. • Đặc tính của React JS - Tư tưởng React JS là xây dựng lên các components có tính tái sử dụng, dễ dàng cho việc chia nhỏ vấn đề, testing. Nó giúp chúng ta dễ dàng quản lý, mở rộng hệ thống, điều này nếu là Angular JS thì đòi hỏi cấu trúc, cách viết code phải thật tối ưu. - React JS luôn giữ các components ở trạng thái stateless (nhiều nhất có thể) khiến ta dễ dàng quản lý bởi nó chẳng khác gì một trang static HTML. Bản thân các components này không có trạng thái (state) nó nhận đầu vào từ bên ngoài và chỉ hiện thị ra dựa vào các đầu vào đó, điêu này lý giải tại sao nó lại mang tính tái sử dụng (reuse) và dễ dàng cho việc test. Khái niệm • Component - React được xây dựng xung quanh các component, chứ không dùng template như các framework khác. Ta có thể tạo ra một component bằng cách extend Component như sau 10 Hình 2.1 Một component trong React - Phương thức quan trọng nhất là render, phương thức này được trigger khi component đã sẵn sàng để được render lên trên page. - Trong hàm đó, bạn sẽ trả về một mô tả cho việc bạn muốn React render cái gì lên trên page. Như trong ví dụ ở trên, đơn giản mình muốn render 1 thẻ h1 chứa lời chào và tên. - Hàm render chính là mô tả cụ thể của UI tại bất cứ thời điểm nào. Vì thế nếu dữ liệu thay đổi, React sẽ take care việc update UI với dữ liệu tương ứng. Các bạn có thể hiểu đơn giản là, khi dữ liệu thay đổi, React sẽ tự động gọi hàm render để update lại UI. • Multiple Components - Nếu muốn lồng nhiều component vào nhau, ta sẽ làm điều này trong lệnh return của phương thức render.2 Component lồng nhau 11 • Prop - Props ở đây chính là properties của một component, chúng ta có thể thay đổi props của component bằng cách truyền dữ liệu từ bên ngoài vào. Props có thể là 1 object, funtion, string, number.3 Phương thức Prop - Chú ý: Khi một props được truyền vào component thì nó là bất biến tức là dữ liệu của nó không được thay đổi kiểu như một "pure" function. - Ví dụ về “pure” function và “not pure” function Ta xét function như dưới: Hình 2.4 Pure Function 12 - Function được gọi là "pure" vì nó không làm thay đổi giá trị đầu vào của nó và luôn trả về một kết quả tương tự cho các đầu vào như nhau. Ta xét function thứ 2 như hình dưới Hình 2.5 Not Pure Function - Ở đây function trên đã thay đổi chính giá trị sum đầu vào của nó và điều này khiến nó không là "pure" function  Tất cả các component của react phải hoạt động như "pure" function • State Một component trong React có 2 cách để lấy thông tin props và state. Không như props, state của 1 component không được truyền từ bên ngoài vào. Một component sẽ tự quyết định state của chính nó. Để tạo ra state cho component, ta sẽ phải khai báo nó trong hàm constructor 13 Hình 2.6 Phương thức State - Sự giống và khác nhau giữa Prop và State o Giống: ▪ Props và state đều là plain JS objects ▪ Props và state đều trigger render update khi thay đổi o Khác: Prop State Can get initial value from parent Component? Yes Yes Can be changed by parent Component? Yes No Can set default values inside Component?* Yes Yes Can change inside Component? No Yes Can change in child Components? Yes No 14 2. Kiến thức - React JS là một framework đơn nhất, nhưng để xây dựng được ứng dụng hoàn chỉnh, chúng ta cần nhiều thứ hơn nữa.