Đồ á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

Học cách xây dựng website quản lý bán giày chuyên nghiệp bằng NodeJS và ReactJS. Khám phá kiến trúc, các tính năng cần thiết và quy trình phát triển ứng dụng.

• 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

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.

Đây là một số kiến thức khi muốn nghiên cứu React: • Javascript: - Ngôn ngữ xây dựng nên React, yêu cầu mức độ trung bình: các khái niệm “object”, “prototype”, “callback” là bắt buộc, nếu bạn chưa biết gì, tôi nghĩ bạn nên đọc tài liệu tại đây và thực hành trong ít nhất 3 tuần trước khi quay lại để bắt đầu. • Npm: - Công cụ quản lý package của Node.js và là phương pháp phổ biến nhất để các lập trình viên front-end và các nhà thiết kế chia sẻ mã nguồn Javascript. Nó bao gồm một hệ thống quản lý module gọi là CommonJS và cho phép bạn cài đặt bất cứ công cụ command-line nào được viết bằng Javascript. - Hầu hết các components, thư viện và công cụ tái sử dụng trong hệ sinh thái của React đều được triển khai như là thành các module CommonJS và có thể cài đặt thông qua npm.

• JavaScript “bundlers” - Hay còn gọi là các công cụ đóng gói JavaScript. Vì một vài lí do kĩ thuật mà module CommonJS (ví dụ, các thư viện trên npm) không thể sử dụng native trên trình duyệt. Bạn cần có một “công cụ đóng gói” Javascript để “đóng gói” các modules này thành các files .js mà có thể include được trên trang web qua thẻ <script>. • ES6: - Là phiên bản mới nhất của Javascript, vì còn quá mới nên chưa được hỗ trợ trên các trình duyệt, nhưng các công cụ đóng gói sẽ thực hiện phiên dịch với cấu hình đúng để có thể sử dụng được trên trình duyệt.

• Routing 15 - “Các ứng dụng single-page” trở nên khá rầm rộ ngày nay. Đây là những trang web mà chỉ thực hiện khởi tạo một lần, và khi người dùng ấn vào một đường dẫn hay nút ấn thì Javascript trên trang web sẽ thực thi mà trang web không cần phải reload lại. Việc quản lý địa chỉ trên thanh địa chỉ được thực hiện bởi router. - Router được sử dụng phổ biến nhất trong hệ sinh thái React là react-router.

Nếu như bạn đang xây dựng một ứng dụng single-page, hãy sử dụng nó trừ khi bạn có lý do mà không thể sử dụng. • Server Rendering - Server rendering thường được gọi là “toàn bộ” hay “đồng bộ” JS. Điều đó có nghĩa là bạn có thể lấy bất cứ React components nào và render chúng thành HTML tĩnh trên server. Điều này cải thiện được tốc độ ban đầu vì người dùng không cần phải chờ JS thực hiện download để có thể thấy được UI ban đầu, và React có thể tái sử dụng HTML đã được render phía server, vì vậy mà không cần xử lý ở phía client.

- Chỉ cần sử dụng server rendering khi ta thấy việc render ban đầu trở nên quá chậm hoặc muốn cải thiện thứ hạng tìm kiếm. Mặc dù Google bây giờ đã thực hiện index các nội dung render phía client, nhưng tại thời điểm tháng một 2016, mỗi khi được lấy ra đo lường thì thấy rõ thứ hạng bị ảnh hướng đi xuống, có khả năng là do vi phạm về tốc độ render phía client. - Việc render phía server vẫn cần nhiều công cụ để làm cho nó trở nên chính xác. Vì việc này mặc định được hỗ trợ trong các React components mà không cần quan tâm tới việc render phía server, chúng ta nên xây dựng ứng dụng trước và quan tâm tới việc render phía server sau.

Ta sẽ không cần thiết phải viết lại tất cả các components để xử lý việc đó. Ưu điểm: - Reactjs cực kì hiệu quả: Reactjs tạo ra cho chính nó DOM ảo – nơi mà các component thực sự tồn tại trên đó. Điều này sẽ giúp cải thiện hiệu suất rất nhiều. Reactjs cũng tính toán những thay đổi nào cần cập nhật len DOM và chỉ thực hiện chúng.

Điều này giúp Reactjs tránh những thao tác cần trên DOM mà nhiều chi phí. Chúng ta có thể viết một ví dụ đơn giản về ReactJS như sau. 16 - Reactjs giúp việc viết các đoạn code JS dễ dàng hơn: Nó dung cú pháp đặc biệt là JSX (Javascript mở rộng) cho phép ta trộn giữa code HTML và Javascript. Ta có thể them vào các đoạn HTML vào trong hàm render mà không cần phải nối chuỗi.

Đây là đặc tính thú vị của Reactjs. Nó sẽ chuyển đổi các đoạn HTML thành các hàm khởi tạo đối tượng HTML bằng bộ biến đổi JSX. - Nó có nhiều công cụ phát triển: Khi bạn bắt đầu Reactjs, đừng quên cài đặt ứng dụng mở rộng của Chrome dành cho Reactjs. Nó giúp bạn debug code dễ dàng hơn.

Sau khi bạn cài đặt ứng dụng này, bạn sẽ có cái nhìn trực tiếp vào virtual DOM như thể bạn đang xem cây DOM thông thường. - Render tầng server: Một trong những vấn đề với các ứng dụng đơn trang là tối ưu SEO và thời gian tải trang. Nếu tất cả việc xây dựng và hiển thị trang đều thực hiện ở client, thì người dung sẽ phải chờ cho trang được khởi tạo và hiển thị lên. Điều này thực tế là chậm.

Hoặc nếu giả sử người dung vô hiệu hóa Javascript thì sao? Reactjs là một thư viện component, nó có thể vừa render ở ngoài trình duyệt sử dụng DOM và cũng có thể render bằng các chuỗi HTML mà server trả về. - Làm việc với vấn đề test giao diện: Nó cực kì dễ để viết các test case giao diện vì virtual DOM được cài đặt hoàn toàn bằng JS. - Hiệu năng cao đối với các ứng dụng có dữ liệu thay đổi liên tục, dễ dàng cho bảo trì và sửa lỗi. Nhược điểm: - Reactjs chỉ phục vụ cho tầng View.

React chỉ là View Library nó không phải là một MVC framework như những framework khác. Đây chỉ là thư viện của Facebook giúp render ra phần view. Vì thế React sẽ không có phần Model và Controller, mà phải kết hợp với các thư viện khác. React cũng sẽ không có 2-way binding hay là Ajax - Tích hợp Reactjs vào các framework MVC truyền thống yêu cầu cần phải cấu hình lại.

17 - React khá nặng nếu so với các framework khác React có kích thước tương tương với Angular (Khoảng 35kb so với 39kb của Angular). Trong khi đó Angular là một framework hoàn chỉnh - Khó tiếp cận cho người mới học Web 2. Redux - Redux là 1 tool dùng để quản lý state cho các ứng dụng Javascript.