GIỚI THIỆU ĐỀ TÀI
Đặt vấn đề
Ngày nay, nhiều cửa hàng kinh doanh hoạt động chủ yếu vẫn mang tính thủ công, dựa vào kinh nghiệm của hệ thống nhân viên Do đặc điểm lượng hàng hoá nhập xuất ngày càng lớn nên công tác quản lí, mua bán mất rất nhiều thời gian, công sức mà độ chính xác không cao, điều này nhiều khi gây thiệt hại cho cửa hàng.
Giải Pháp
Nhận thấy tình hình trên, nhóm em đã lên ý tưởng xây dựng một ứng dụng hỗ trợ công tác quản lý và bán hàng “Xây dựng ứng dụng web Plan” ra đời nhằm đáp ứng nhu cầu quản lí hàng hóa, bán hàng và tối ưu hóa quy trình kinh doanh.Đồng thời, nâng cao trải nghiệm của khách hàng.
Mục tiêu đề tài
- Tối ưu hóa quy trình kinh doanh: "PlanB" được phát triển nhằm tối ưu hóa quy trình kinh doanh cho các cửa hàng, chợ đồ cũ hoặc cá nhân bán đồ secondhand. Ứng dụng cung cấp các tính năng quản lý hàng hóa, đặt hàng, ghi chú, và xác định giá trị hàng hóa Nhờ đó, người dùng có thể dễ dàng quản lý hàng tồn kho, tạo ra báo cáo thống kê, và theo dõi lịch sử giao dịch, giúp tăng cường hiệu quả kinh doanh và tiết kiệm thời gian.
- Nâng cao hiệu suất bán hàng: "PlanB" giúp người dùng nâng cao hiệu suất bán hàng thông qua việc theo dõi doanh thu, định giá sản phẩm, và quản lý khách hàng Các tính năng báo cáo và thống kê của ứng dụng giúp người dùng đánh giá hiệu quả kinh doanh, xác định các sản phẩm hot nhất và kế hoạch tiếp thị, từ đó tối ưu hóa doanh thu và tăng cường lợi nhuận.
- Quản lí hàng tồn kho hiệu quả: "PlanB" cung cấp các công cụ quản lí hàng tồn kho giúp người dùng kiểm soát số lượng, thông tin và trạng thái của sản phẩm.Tính năng này giúp người dùng dễ dàng theo dõi số lượng hàng tồn, phân loại sản phẩm, và nhanh chóng tìm kiếm thông tin về sản phẩm cụ thể Điều này giúp người dùng quản lí hàng tồn kho một cách chính xác, tránh thất thoát và lãng phí nguồn lực.
- Tăng cường khả năng tiếp cận khách hàng: "PlanB" hỗ trợ người dùng trong việc xây dựng và quản lí danh sách khách hàng, ghi chú các thông tin quan trọng và theo dõi lịch sử mua hàng của khách hàng Điều này giúp người dùng tạo dựng mối quan hệ khách hàng mạnh mẽ, đáp ứng nhu cầu của khách hàng và tăng cường sự hài lòng của họ.
- Nâng cao trải nghiệm bán hàng: "PlanB" tạo điều kiện thuận lợi cho người dùng trong việc quản lí và bán hàng secondhand Ứng dụng cung cấp giao diện dễ sử dụng, giúp người dùng nhanh chóng đăng tải sản phẩm, cập nhật thông tin, và quản lí các hoạt động kinh doanh hàng ngày Điều này giúp người dùng tạo ra trải nghiệm bán hàng thuận tiện, đáp ứng nhu cầu ngày càng đa dạng của khách hàng và tạo dựng lòng tin.
Đối tượng sử dụng
PlanB hướng đến các chủ cửa hàng, chợ đồ cũ và cá nhân bán đồ secondhand Đối tượng sử dụng bao gồm những người muốn quản lí và bán hàng qua mô hình ký gửi hoặc bán đồ cũ trực tuyến Ứng dụng này phù hợp cho các cửa hàng quần áo, cửa hàng đồ cũ, gian hàng chợ đồ cũ, hay cá nhân có nhu cầu bán hàng secondhand "PlanB" giúp đơn giản hóa quy trình quản lí hàng hóa, tăng cường khả năng tiếp cận khách hàng, và nâng cao trải nghiệm bán hàng.
Công cụ sử dụng
- Công cụ dùng để phân tích, thiết kế: Figma, draw.io, StarUML
- Công cụ phát triển: Visual Studio Code
- Công cụ quản lý dự án: Github, Google Drive, Messenger
- Công cụ soạn thảo văn bản: Microsoft Word
Phạm vi nghiên cứu
- Thiết kế giao diện người dùng: Figma
- Các ngôn ngữ lập trình và công nghệ phát triển website: HTML, CSS, JavaScript.
- Các framework hỗ trợ: ReactJS, NodeJS
- Phần mềm lập trình: Visual Studio Code
Tổng quan về đồ án
Ứng dụng Website PlanB là một hệ thống quản lí cửa hàng ký gửi quần áo cũ, giúp chủ cửa hàng quản lí hàng hóa, bán hàng và tối ưu hóa quy trình kinh doanh Đồng thời, khách hàng cũng có thể tìm kiếm và mua sắm những sản phẩm quần áo chất lượng từ cửa hàng ký gửi thông qua giao diện trực tuyến thuận tiện và dễ sử dụng.
Mô tả quy trình thực hiện các công việc chính
Bước 1: Xác định các yêu cầu:
- Phân tích khả thi quy mô thực hiện.
- Tìm hiểu quy trình nghiệp vụ.
- Tham khảo và trải nghiệm các ứng dụng liên quan.
- Khảo sát người dùng qua mạng.
- Thu thập thông tin yêu cầu.
Bước 2: Thiết kế hệ thống:
- Vẽ sơ đồ Use-case: phân tích nghiệp vụ tổng quan.
Bước 3: Thiết kế dữ liệu
- Thiết kế dữ liệu tương ứng với từng loại yêu cầu của phần mềm để đảm bảo được tính đúng đắn và tính tiến hóa với phần mềm, có hiệu quả về mặt truy xuất và lưu trữ
- Xác định và lập danh sách các bảng dữ liệu cần thiết cho các yêu cầu của phần mềm
- Xây dựng sơ đồ logic cụ thể của phần mềm
Bước 4: Thiết kế giao diện
- Lập ra danh sách các màn hình khi người dùng tương tác với phần mềm
- Mô tả các đối tượng trên từng màn hình
- Xác định những chức năng hiển thị trên từng màn hình
Bước 5: Code và kiểm thử
- Code trình bày theo mô hình 3 lớp và được phân chia theo các nhiệm vụ yêu cầu.
- Testcase rõ ràng để kiểm tra tính hiệu quả của hệ thống.
TÌM HIỂU CƠ SỞ LÝ THUYẾT
Ngôn ngữ lập trình JavaScript
JavaScript là ngôn ngữ lập trình phổ biến nhất trên thế giới trong suốt 20 năm qua Nó cũng là một trong số 3 ngôn ngữ chính của lập trình web:
HTML: Giúp bạn thêm nội dung cho trang web.
CSS: Định dạng thiết kế, bố cục, phong cách, canh lề của trang web.
JavaScript: Cải thiện cách hoạt động của trang web
JavaScript có thể học nhanh và dễ dàng áp dụng cho nhiều mục đích khác nhau, từ việc cải thiện tính năng của website đến việc chạy game và tạo phần mềm nền web Hơn nữa, có hàng ngàn mẫu template JavaScript và ứng dụng ngoài kia,nhờ vào sự cống hiến của cộng đồng, đặc biệt là Github.
Link hình JavaScript [Truy c p ngày 17 tháng 12, 2023]ập
2.2.1 Lịch sử hình thành JavaScript
JavaScript được tạo trong mười ngày bởi Brandan Eich, một nhân viên của Netscape, vào tháng 9 năm 1995 Được đặt tên đầu tiên là Mocha, tên của nó được đổi thành Mona rồi LiveScript trước khi thật sự trở thành JavaScript nổi tiếng như bây giờ Phiên bản đầu tiên của ngôn ngữ này bị giới hạn độc quyền bởi Netscape và chỉ có các tính năng hạn chế, nhưng nó tiếp tục phát triển theo thời gian, nhờ một phần vào cộng đồng các lập trình viên đã liên tục làm việc với nó.
Trong năm 1996, JavaScript được chính thức đặt tên là ECMAScript. ECMAScript 2 phát hành năm 1998 và ECMAScript 3 tiếp tục ra mắt vào năm
1999 Nó liên tục phát triển thành JavaScript ngày nay, giờ đã hoạt động trên khắp mọi trình duyệt và trên khắp các thiết bị từ di động đến máy tính bàn.
JavaScript liên tục phát triển kể từ đó, có lục đạt đến 92% website đang sử dụng JavaScript vào năm 2016 Chỉ trong 20 năm, nó từ một ngôn ngữ lập trình riêng trở thành công cụ quan trọng nhất trên bộ công cụ của các chuyên viên lập trình web Nếu bạn đang dùng internet, vậy chắc chắn bạn đã từng sử dụngJavaScript rồi.
2.2.2 Ưu nhược điểm của JavaScript Ưu điểm của Javascript:
Javascript giúp thao tác với người dùng ở phía client và tách biệt giữa các client Ví dụ 2 người đang truy cập vào 2 trình duyệt khác nhau thì cả hai đều có những phiên xử lý Javascript khác nhau, không ảnh hưởng lẫn nhau.
Javascript có thể hoạt động trên nhiều nền tảng khác nhau, từ Windows, macOS cho đến các hệ điều hành trên mobile.
Javascript là một ngôn ngữ dễ tiếp cận, bạn sẽ dễ dàng học nó mà không cần phải cài đặt quá nhiều phần mềm.
Vì là một ngôn ngữ rất dễ dàng bị lộ code nên dễ bị khai thác Hacker có thể nhập một đoạn code bất kì vào khung console của trình duyệt, lúc này trình duyệt sẽ hiểu rằng đoạn code đó là chính thống, nên hacker có thể gửi nhửng request lên server một cách dễ dàng.
Javascript Framework là một bộ thư viện được xây dựng dựa vào ngôn ngữ lập trình Javascript Mỗi framework thường được tạo ra để phục vụ cho một lĩnh vực nào đó Ví dụ với Angular và React thì chuyên xử lý frontend, NodeJS thì chuyên xử lý backend, jQuery là một thư viện rất mạnh khi xử lý DOM HTML và CSS
Sức mạnh của Javascript là không thể chối cãi, bằng chứng là hiện nay có rất nhiều libraries và framework được viết bằng Javascript ra đời như:
• Angular: Một thư viện dùng để xây dựng ứng dụng Single Page.
• NodeJS: Một thư viện được phát triển phía Server dùng để xây dựng ứng dụng realtime.
• Sencha Touch: Một Framework dùng để xây dựng ứng dụng Mobile.
• ExtJS: Một Framework dùng xây dựng ứng dụng quản lý (Web
• jQuery: Một thư viện rất mạnh về hiệu ứng.
• ReactJS: Một thư viện viết ứng dụng web.
• Và còn nhiều thư viện khác.
ReactJS
ReactJS là một thư viện JavaScript phổ biến được sử dụng để xây dựng giao diện người dùng (UI) cho các ứng dụng web Nó được phát triển bởi Facebook và đã được cộng đồng phát triển rộng rãi.
Link hình ReacJs [Truy cập ngày 17 tháng 12, 2023]
ReactJS sử dụng một nguyên tắc gọi là "Virtual DOM" để cải thiện hiệu suất và tăng tốc độ render giao diện người dùng Khi một thành phần React được tạo, nó tạo ra một cây Virtual DOM, là một phiên bản ảo của cây DOM thực sự trong trình duyệt React sẽ theo dõi các thay đổi trong trạng thái của thành phần và chỉ cập nhật những phần cần thiết trên cây Virtual DOM Sau đó, React so sánh cây VirtualDOM mới với cây Virtual DOM cũ và chỉ cập nhật các phần khác nhau vào DOM thực sự Điều này giúp giảm thiểu số lượng các thao tác tác động đến DOM, giúp ứng dụng chạy mượt hơn.
Hiệu suất cao: Nhờ sử dụng Virtual DOM và cách quản lý trạng thái thông minh, ReactJS có thể cải thiện hiệu suất ứng dụng web Thay vì cập nhật toàn bộ DOM, React chỉ cập nhật những phần cần thiết, giúp giảm độ phức tạp và tối ưu hóa tốc độ render.
Quản lý trạng thái dễ dàng: React sử dụng khái niệm "state" để quản lý trạng thái của các thành phần Việc quản lý trạng thái dễ dàng giúp phát triển ứng dụng dễ dàng hơn và giúp tái sử dụng thành phần một cách hiệu quả.
Cộng đồng và hệ sinh thái mạnh mẽ: ReactJS có một cộng đồng lớn và đông đảo, với rất nhiều tài liệu, tài nguyên và các thành phần có thể tái sử dụng Điều này giúp cho việc học hỏi và phát triển ứng dụng dễ dàng hơn.
Khả năng học và khởi đầu ban đầu: ReactJS có một học phần ngưỡng cao ban đầu Việc hiểu và áp dụng các khái niệm như JSX, Virtual DOM, props, state, lifecycle methods và Redux có thể đòi hỏi một quá trình học tập khá lâu và công phu.
Quản lý trạng thái phức tạp: Khi ứng dụng React phức tạp và có nhiều thành phần liên quan, quản lý trạng thái có thể trở nên phức tạp hơn Việc đồng bộ hóa và quản lý trạng thái giữa các thành phần có thể đòi hỏi sự quan tâm và kỹ năng để tránh việc gặp phải các vấn đề như rò rỉ bộ nhớ hoặc hiệu suất kém.
Tuy nhiên, nhược điểm của ReactJS có thể được khắc phục và vượt qua thông qua việc nắm vững kiến thức và kỹ năng phù hợp và sử dụng các thư viện hỗ trợ như Redux hoặc MobX để quản lý trạng thái phức tạp hơn.
NodeJS
Node.js là một môi trường chạy mã JavaScript phía máy chủ, được xây dựng trên JavaScript engine của Chrome (V8 engine) Nó cho phép chúng ta thực thi mã JavaScript bên ngoài trình duyệt, điều này đặc biệt hữu ích cho việc phát triển ứng dụng web phía máy chủ.
Link hình Nodejs [Truy cập ngày 17 tháng 12, 2023]
Node.js hoạt động theo mô hình non-blocking, single-threaded, event-driven.
Nó sử dụng một cơ chế gọi là "event loop" để xử lý các yêu cầu và sự kiện một cách hiệu quả Khi một yêu cầu đến, Node.js không chờ đợi các hoạt động đồng bộ hoàn thành mà tiếp tục xử lý các yêu cầu khác Khi các hoạt động đồng bộ hoàn thành hoặc có sự kiện nào đó xảy ra, Node.js sẽ thông báo thông qua callback hoặc sự kiện tương ứng Điều này cho phép Node.js xử lý đồng thời nhiều yêu cầu mà không gây block đối với các yêu cầu khác.
Hiệu suất cao: Với mô hình non-blocking và event-driven, Node.js có khả năng xử lý hàng ngàn kết nối đồng thời mà không gây block Điều này giúp cải thiện hiệu suất của ứng dụng và đáp ứng tốt với tải cao.
Phát triển dễ dàng: Node.js sử dụng JavaScript, ngôn ngữ phổ biến và quen thuộc, cho phép lập trình viên sử dụng cùng một ngôn ngữ cả phía máy chủ và phía khách hàng Điều này giúp giảm độ phức tạp và đơn giản hóa quá trình phát triển ứng dụng.
Cộng đồng lớn: Node.js có một cộng đồng lớn và đông đảo, với rất nhiều thư viện và công cụ hữu ích Cộng đồng phát triển sôi nổi này cung cấp sự hỗ trợ, tài liệu và giải pháp cho các vấn đề phát triển.
Đơn luồng: Mặc dù Node.js có khả năng xử lý đồng thời, nhưng do chạy trên một luồng duy nhất, nếu một yêu cầu tốn nhiều thời gian xử lý, nó có thể làm giảm hiệu suất của toàn bộ ứng dụng Vì vậy, Node.js không phù hợp cho các tác vụ đòi hỏi xử lý trên nhiều luồng đồng thời.
Quản lý trạng thái phức tạp: Vì Node.js không có một framework hoàn chỉnh, việc quản lý trạng thái phức tạp có thể trở nên khó khăn Lập trình viên phải dựa vào các thư viện bên thứ ba hoặc tự xây dựng các cơ chế để quản lý trạng thái hiệu quả.
Phần mềm lập trình VSCode
Visual Studio Code (VS Code hay VSC) là một trong những trình soạn thảo mã nguồn phổ biến nhất được sử dụng bởi các lập trình viên Nhanh, nhẹ, hỗ trợ đa nền tảng, nhiều tính năng và là mã nguồn mở chính là những ưu điểm vượt trội khiến VS Code ngày càng được ứng dụng rộng rãi.
Link hình Visual Studio Code [Truy c p ngày 17 tháng 12, 2023]ập
Hỗ trợ nhiều ngôn ngữ lập trình
Visual Studio Code hỗ trợ nhiều ngôn ngữ lập trình như C/C++, C#, F#, Visual Basic, HTML, CSS, JavaScript, Vì vậy, nó dễ dàng phát hiện và đưa ra thông báo nếu chương chương trình có lỗi.
Hỗ trợ đa nền tảng
Các trình viết code thông thường chỉ được sử dụng hoặc cho Windows hoặc Linux hoặc Mac Systems Nhưng Visual Studio Code có thể hoạt động tốt trên cả ba nền tảng trên.
Cung cấp kho tiện ích mở rộng
Trong trường hợp lập trình viên muốn sử dụng một ngôn ngữ lập trình không nằm trong số các ngôn ngữ Visual Studio hỗ trợ, họ có thể tải xuống tiện ích mở rộng Điều này vẫn sẽ không làm giảm hiệu năng của phần mềm, bởi vì phần mở rộng này hoạt động như một chương trình độc lập.
Kho lưu trữ an toàn Đi kèm với sự phát triển của lập trình là nhu cầu về lưu trữ an toàn. Với Visual Studio Code, người dùng có thể hoàn toàn yên tâm vì nó dễ dàng kết nối với Git hoặc bất kỳ kho lưu trữ hiện có nào.
Visual Studio Code hỗ trợ nhiều ứng dụng web Ngoài ra, nó cũng có một trình soạn thảo và thiết kế website.
Lưu trữ dữ liệu dạng phân cấp
Phần lớn tệp lưu trữ đoạn mã đều được đặt trong các thư mục tương tự nhau Ngoài ra, Visual Studio Code còn cung cấp các thư mục cho một số tệp đặc biệt quan trọng.
Một số đoạn code có thể thay đổi chút ít để thuận tiện cho người dùng Visual Studio Code sẽ đề xuất cho lập trình viên các tùy chọn thay thế nếu có.
Hỗ trợ thiết bị đầu cuối
Visual Studio Code có tích hợp thiết bị đầu cuối, giúp người dùng khỏi phải chuyển đổi giữa hai màn hình hoặc trở về thư mục gốc khi thực hiện các thao tác.
Người dùng Visual Studio Code có thể mở cùng lúc nhiều tệp tin và thư mục, mặc dù chúng không hề liên quan với nhau.
Hầu hết các trình viết mã đều có tính năng nhắc mã Intellisense, nhưng ít chương trình nào chuyên nghiệp bằng Visual Studio Code Nó có thể phát hiện nếu bất kỳ đoạn mã nào không đầy đủ Thậm chí, khi lập trình viên quên không khai báo biến, Intellisense sẽ tự động giúp họ bổ sung các cú pháp còn thiếu.
Visual Studio Code hỗ trợ kéo hoặc sao chép mã trực tiếp từ GitHub.
Mã này sau đó có thể được thay đổi và lưu lại trên phần mềm.
Tiêu tốn tài nguyên: VS Code có khả năng tiêu tốn một lượng tài nguyên khá lớn, đặc biệt khi bạn làm việc trên các dự án lớn hoặc mở nhiều tab cùng một lúc Điều này có thể ảnh hưởng đến hiệu suất của máy tính, đặc biệt là trên các máy tính có cấu hình thấp.
Đôi khi chậm khi mở các tệp lớn: Khi mở các tệp tin lớn, VS Code có thể trở nên chậm và có thể mất thời gian để phản hồi Điều này đặc biệt đáng chú ý khi bạn làm việc trên các dự án có nhiều tệp tin hoặc tệp tin có kích thước lớn.
Tích hợp đa công cụ phụ thuộc vào các tiện ích bên thứ ba: Mặc dù VS
Code đi kèm với một số tính năng mạnh mẽ và tiện ích tích hợp sẵn, để sử dụng các tính năng đặc biệt hoặc mở rộng khả năng của trình soạn thảo, bạn phải cài đặt các tiện ích bên thứ ba Điều này có thể yêu cầu thời gian và công sức để tìm hiểu và tích hợp các tiện ích này.
Dịch vụ Github
Link hình Github [Truy c p ngày 17 tháng 12, 2023]ập
GitHub là một dịch vụ cung cấp kho lưu trữ mã nguồn Git dựa trên nền tảng web cho các dự án phát triển phần mềm GitHub cung cấp cả phiên bản trả tiền lẫn miễn phí cho các tài khoản.
Các dự án mã nguồn mở sẽ được cung cấp kho lưu trữ miễn phí Tính đến tháng 4 năm 2016, GitHub có hơn 14 triệu người sử dụng với hơn 35 triệu kho mã nguồn, làm cho nó trở thành máy chủ chứa mã nguồn lớn trên thế giới.
Github đã trở thành một yếu tố có sức ảnh hưởng trong cộng đồng phát triển mã nguồn mở.
Thậm chí nhiều nhà phát triển đã bắt đầu xem nó là một sự thay thế cho sơ yếu lý lịch và một số nhà tuyển dụng yêu cầu các ứng viên cung cấp một liên kết đến tài khoản Github để đánh giá ứng viên.
Dự án trên Github có thể được truy cập và thao tác sử dụng một giao diện dòng lệnh và làm việc với tất cả các lệnh Git tiêu chuẩn Github cũng cho phép người dùng đăng ký và không đăng ký để duyệt kho công cộng trên trang web.Github cũng tạo ra nhiều client và plugin cho máy tính để bàn.
AI Chatbot: Kommunicate
Link hình Kommunicate [Truy c p ngày 17 tháng 12, 2023]ập
2.7.1 T ng quan v Kommunicateổng quan về Kommunicate ề Kommunicate
M t n n t ng chatbot và gi i pháp trò chuy n tr c tuy n độc tính Khách hàng ảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ện ự kiện ết Hóa đơn Ký gửi ược thiết kế c thi t k ết Hóa đơn Ký gửi ết Hóa đơn Ký gửi đ cung c p tr i nghi m giao ti p t t nh t cho doanh nghi p.ểu đồ ấm công ảng 3.5 Use case Quản lý Thanh toán ện ết Hóa đơn Ký gửi ốt nhất cho doanh nghiệp ấm công ện
2.7.2 Cách th c ho t đ ngức hoạt động ạt động ộng
Chatbot và Trò chuy n tr c tuy n: Kommunicate cung c p kh năng tích ện ự kiện ết Hóa đơn Ký gửi ấm công ảng 3.5 Use case Quản lý Thanh toán h p chatbot vào trang web ho c ng d ng di đ ng đ t đ ng hóa quá ợc thiết kế ặc ứng dụng di động để tự động hóa quá ứng dụng di động để tự động hóa quá ụng màn hình Đăng nhập ộc tính Khách hàng ểu đồ ự kiện ộc tính Khách hàng trình h tr và trò chuy n v i ngỗ trợ và trò chuyện với người dùng ợc thiết kế ện ới người dùng ười gian làm việci dùng.
Đa n n t ng: H tr trên nhi u n n t ng nh trang web, ng d ng di ảng 3.5 Use case Quản lý Thanh toán ỗ trợ và trò chuyện với người dùng ợc thiết kế ảng 3.5 Use case Quản lý Thanh toán ư ứng dụng di động để tự động hóa quá ụng màn hình Đăng nhập đ ng, Facebook Messenger, WhatsApp, và nhi u n n t ng trò chuy n khác.ộc tính Khách hàng ảng 3.5 Use case Quản lý Thanh toán ện
Tích h p D li u và CRM: Có kh năng tích h p v i các h th ng qu n lý ợc thiết kế ữ liệu ện ảng 3.5 Use case Quản lý Thanh toán ợc thiết kế ới người dùng ện ốt nhất cho doanh nghiệp ảng 3.5 Use case Quản lý Thanh toán m i quan h khách hàng (CRM) và các ngu n d li u khác đ cung c p ốt nhất cho doanh nghiệp ện ồ ữ liệu ện ểu đồ ấm công thông tin chi ti t v ngết Hóa đơn Ký gửi ười gian làm việci dùng.
Qu n lý Nhóm: Cho phép qu n lý và phân công cu c trò chuy n cho các ảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ộc tính Khách hàng ện nhóm h tr ỗ trợ và trò chuyện với người dùng ợc thiết kế
Phân tích và Báo cáo: Cung c p các công c phân tích và báo cáo đ theo ấm công ụng màn hình Đăng nhập ểu đồ dõi hi u su t và t i u hóa tr i nghi m ngện ấm công ốt nhất cho doanh nghiệp ư ảng 3.5 Use case Quản lý Thanh toán ện ười gian làm việci dùng.
Tích h p Chatbot: Có th tích h p chatbot đ gi i quy t t đ ng các v n ợc thiết kế ểu đồ ợc thiết kế ểu đồ ảng 3.5 Use case Quản lý Thanh toán ết Hóa đơn Ký gửi ự kiện ộc tính Khách hàng ấm công đ c b n và giúp gi m áp l c cho đ i ngũ h tr ơn ảng 3.5 Use case Quản lý Thanh toán ảng 3.5 Use case Quản lý Thanh toán ự kiện ộc tính Khách hàng ỗ trợ và trò chuyện với người dùng ợc thiết kế
N n t ng đa kênh: H tr trên nhi u n n t ng, giúp doanh nghi p ti p ảng 3.5 Use case Quản lý Thanh toán ỗ trợ và trò chuyện với người dùng ợc thiết kế ảng 3.5 Use case Quản lý Thanh toán ện ết Hóa đơn Ký gửi c n và tập ươnng tác v i khách hàng nhi u đi m ti p c n.ới người dùng ở dữ liệu ểu đồ ết Hóa đơn Ký gửi ập
Tích h p D li u: K t n i v i các ngu n d li u khác nhau đ cung c p ợc thiết kế ữ liệu ện ết Hóa đơn Ký gửi ốt nhất cho doanh nghiệp ới người dùng ồ ữ liệu ện ểu đồ ấm công thông tin chi ti t và cá nhân hóa tr i nghi m ngết Hóa đơn Ký gửi ảng 3.5 Use case Quản lý Thanh toán ện ười gian làm việci dùng.
Qu n lý Nhóm H tr : Cung c p tính năng qu n lý nhóm giúp phân công vàảng 3.5 Use case Quản lý Thanh toán ỗ trợ và trò chuyện với người dùng ợc thiết kế ấm công ảng 3.5 Use case Quản lý Thanh toán theo dõi hi u su t c a đ i ngũ h tr ện ấm công ủ ộc tính Khách hàng ỗ trợ và trò chuyện với người dùng ợc thiết kế
Chi phí: Có th g p khó khăn v i các doanh nghi p nh v m t chi phí, tùy ểu đồ ặc ứng dụng di động để tự động hóa quá ới người dùng ện ỏ về mặt chi phí, tùy ặc ứng dụng di động để tự động hóa quá thu c vào gói d ch v độc tính Khách hàng ịch làm việc ụng màn hình Đăng nhập ược thiết kế c ch n.ọn.
Đ i tốt nhất cho doanh nghiệp ược thiết kế ng s d ng: Có th không phù h p cho m i doanh nghi p, đ c bi tử dụng màn hình Đăng nhập ụng màn hình Đăng nhập ểu đồ ợc thiết kế ọn ện ặc ứng dụng di động để tự động hóa quá ện là nh ng doanh nghi p có yêu c u riêng bi t ho c c n tùy ch nh m nh mẽ ữ liệu ện ầu riêng biệt hoặc cần tùy chỉnh mạnh mẽ ện ặc ứng dụng di động để tự động hóa quá ầu riêng biệt hoặc cần tùy chỉnh mạnh mẽ ỉnh sửa Sản phẩm ạnh mẽ h n.ơn
H c và Tri n khai: Vi c tri n khai và tùy ch nh có th đòi h i m t kho ng ọn ểu đồ ện ểu đồ ỉnh sửa Sản phẩm ểu đồ ỏ về mặt chi phí, tùy ộc tính Khách hàng ảng 3.5 Use case Quản lý Thanh toán th i gian và ki n th c kỹ thu t.ời gian làm việc ết Hóa đơn Ký gửi ứng dụng di động để tự động hóa quá ập
PHÂN TÍCH THIẾT KẾ HỆ THỐNG
ĐẶC TẢ USE CASE
Hình 3.1 Sơ đồ Use case
Bảng 3.1 Danh sách Use Case
Role Đăng nhập Cho phép đăng nhập để sử dụng hệ thống Đăng xuất Cho phép thoát ra khỏi hệ thống
Quản lý Ký gửi Thêm sản phẩm, xác nhận tạo hóa đơn, hủy ký gửi Quản lý Thanh toán Tìm kiếm sản phẩm, xác nhận tạo hóa đơnQuản lý Hóa đơn Tìm kiếm, xóa, in hóa đơn, thanh toán hóa đơn ký gửi Quản ký Khách hàng Tìm kiếm, thêm, xóa khách hàng Quản lý Sản phẩm Tìm kiếm, xóa, in barcode sản phẩm
Biểu đồ Lọc thống kê theo ngày/tháng/năm Quản lý Nhân viên Tìm kiếm, thêm, xóa nhân viên Quản lý Chấm công Chọn thời gian, chấm công, lưu bảng Quản lý Báo cáo Xuất báo cáo
Quản lý Tài khoản Tìm kiếm, xóa tài khoản Quản lý Sự kiện Thêm sự kiện
BoxChat Hệ thống trò chuyện
Bảng 3.2 Use case Đăng nhập
Tên Use case Đăng nhập
Mô tả Cho phép đăng nhập sử dụng hệ thống
Người thực hiện (Actor) Nhân viên
Sự kiện kích hoạt (Trigger) Bấm chọn đăng nhập Điều kiện tiên quyết
Nhập tài khoản đã được đăng ký trước đó Điều kiện kết quả
(Post-Conditions) Đăng nhập thành công và vào màn hình chính
1 Hệ thống hiển thị màn hình đăng nhập
2 Nhân viên nhập tài khoản, mật khẩu và nhấn nút đăng nhập.
3 Hệ thống xác nhận tài khoản và mật khẩu đúng theo yêu cầu.
4 Hệ thống xác nhận dữ liệu nhập vào trùng với dữ liệu trong Database.
5 Xác nhận thành công, hệ thống chuyển tới trang chủ.
3a Hệ thống xác nhận tài khoản và mật khẩu không đúng theo yêu cầu Use case trở về với bước 2.
4a Hệ thống xác nhận dữ liệu nhập không trùng khớp với dữ liệu trong Database Use case trở về với bước 2.
Bảng 3.3 Use case Đăng xuất
Tên Use case Đăng xuất
Mô tả Cho phép thực hiện chức năng đăng xuất khỏi phiên làm việc của tài khoản hiện tại Người thực hiện (Actor) Nhân viên
Sự kiện kích hoạt (Trigger) Bấm chọn Đăng xuất Điều kiện tiên quyết
(Pre-Conditions) Đăng nhập thành công vào hệ thống Điều kiện kết quả
Tài khoản được Đăng xuất khỏi hệ thống
2 Hệ thống thoát khỏi tài khoản đang Đăng nhập
3 Hệ thống trở về màn hình Đăng nhập Kịch bản thay thế
Bảng 3.4 Use case Quản lý Ký gửi
Tên Use case Quản lý Ký gửi
Mô tả Thêm sản phẩm, xác nhận tạo hóa đơn, hoặc hủy ký gửi Người thực hiện (Actor) Nhân viên
Sự kiện kích hoạt (Trigger) Bấm vào các button như Thêm sản phẩm, xác nhận tạo hóa đơn hoặc hủy ký gửi Điều kiện tiên quyết
(Pre-Conditions) Đăng nhập thành công vào hệ thống Điều kiện kết quả
Thực hiện các thao tác như thêm sản phẩm, xác nhận tạo hóa đơn hoặc hủy ký gửi thành công Kịch bản chính
1 Hệ thống hiển thị trang Quản lý Ký gửi
2 Nhân viên chọn 1 chức năng (Thêm sản phẩm, xác nhận tạo hóa đơn, hủy ký gửi)
3 Nhập thông tin sản phẩm
4 Xác nhận thêm sản phẩm
- Xác nhận tạo hóa đơn:
5 Sau khi thêm sản phẩm thành công
6 Nhấn nút xác nhận tạo hóa đơn
7 Thông báo tạo hóa đơn thành công
8 Sau khi thêm sản phẩm thành công
9 Nhấn nút hủy hóa đơn
10 Thông báo hủy hóa đơn thành công Kịch bản thay thế
- Xác nhận thêm hóa đơn trước thêm sản phẩm Trở về use case 2 để thêm sản phẩm
- Hủy hóa đơn trước khi thêm sản phẩm Trở về use case 2 để thêm sản phẩm
Bảng 3.5 Use case Quản lý Thanh toán
Tên Use case Quản lý Thanh toán
Mô tả Tìm kiếm mã sản phẩm, Xác nhận tạo hóa đơn
Người thực hiện (Actor) Nhân viên
Sự kiện kích hoạt (Trigger) Nhập mã sản phẩm, Nhấn nút xác nhận tạo hóa đơn Điều kiện tiên quyết
(Pre-Conditions) Đăng nhập Thành công vào hệ thống Điều kiện kết quả
Hiển thị thông tin theo mã sản phẩm, xác nhận tạo hóa đơn thành công Kịch bản chính
- Tìm kiếm mã sản phẩm
3 Hệ thống lọc theo mã nhân viên đã nhập để hiện những sản phẩm theo mã
4 Hiện những sản phẩm theo mã đã nhập
- Xác nhận tạo hóa đơn
5 Nhấn xác nhận tạo hóa đơn
6 Hệ thống thông báo xác nhận thành công Kịch bản thay thế
3a Mã sản phẩm không tồn tại nên hệ thống hiện thị danh sách rỗng Use case trở về bước 2
Bảng 3.6 Use case Quản lý Hóa đơn
Tên Use case Quản lý Hóa đơn
Mô tả Tìm kiếm hóa đơn, thanh toán hóa đơn ký gửi, in hóa đơn, xóa hóa đơn Người thực hiện (Actor) Nhân viên
Sự kiện kích hoạt (Trigger) Điền vào thanh tìm kiếm, Ấn vô hóa đơn để thực hiện thanh toán hóa đơn ký gửi và in hóa đơn, ấn vô biểu tượng thùng rác để xóa hóa đơn Điều kiện tiên quyết
(Pre-Conditions) Đăng nhập vào hệ thống và đã có hóa đơn Điều kiện kết quả
Tìm kiếm thành công hóa đơn, thanh toán hóa đơn ký gửi, in hóa đơn và xóa hóa đơn thành công Kịch bản chính
1 Hệ thống hiển thị trang quản lý hóa đơn
2 Nhập khách hàng hoặc mã hóa đơn cần tìm
3 Hệ thống xác thực để hiển thị thông tin hợp lệ
- Thanh toán hóa đơn ký gửi
5 Kiểm tra thông tin rùi xác nhận thanh toán hóa đơn
6 Thông báo xác nhận thành công
7 Ấn in hóa đơn để đưa cho khách hàng
8 Xác nhận xóa hóa đơn
9 Hệ thống thông báo xóa thành công Kịch bản thay thế
2a Nhập thông tin không hợp lệ hệ thống không gửi về thông tin Trở lại use case 1
Bảng 3.7 Use case Quản lý Khách hàng
Tên Use case Quản lý Khách hàng
Mô tả Tìm kiếm, thêm và xóa khách hàng
Người thực hiện (Actor) Nhân viên
Sự kiện kích hoạt (Trigger) Nhập vào khung tìm kiếm, nhấn vô nút thêm hoặc nhấn vô thùng rác để xóa khách hàng Điều kiện tiên quyết
(Pre-Conditions) Đăng nhập vào hệ thống thành công Điều kiện kết quả
Tìm kiếm hiện ra kết quả mong muốn, thêm và xóa khách hàng thành công Kịch bản chính
1 Hiển thị trang quản lý khách hàng
2 Nhập số điện thoại hoặc tên khách hàng
3 Hệ thống sẽ xác thực dữ liệu nhập vào để hiện thông tin khách hàng chính xác
4 Hiện thị thông tin khách hàng theo như mong muốn
5 Nhấn vào nút thêm khách hàng
6 Nhập thông tin khách hàng
7 Hệ thống xác thực thông tin rùi lưu về Database
8 Thông báo thêm khách hàng thành công
9 Chọn một khách hàng rùi click vô thùng rác để xóa thông tin khách hàng
10 Xác nhận xóa khách hàng
11 Hệ thống thông báo xóa khách hàng thành công Kịch bản thay thế
2a Nhập thông tin không hợp lệ hệ thống không gửi về thông tin Trở lại use case 1 7a Nhập thông tin không hợp lệ Hệ thống báo lỗi. Trở về use case 6 nhập lại thông tin khách hàng
Bảng 3.8 Use case Quản lý Sản phẩm
Tên Use case Quản lý Sản phẩm
Mô tả Tìm kiếm, in Barcode và xóa sản phẩm
Người thực hiện (Actor) Nhân viên
Sự kiện kích hoạt (Trigger) Nhập vào khung tìm kiếm, ấn vô sản phẩm để in
Barcode, ấn vô biểu tượng thùng rác để xóa sản phẩm Điều kiện tiên quyết
(Pre-Conditions) Đăng nhập thành công và hiện thị danh sách các sản phẩm Điều kiện kết quả
Tìm kiếm thông tin sản phẩm theo mong muốn, in mã
Barcode hoặc xóa sản phẩm thành công Kịch bản chính
1 Hiển thị thông tin trang sản phẩm
2 Nhập thông tin sản phẩm cần tìm
3 Hệ thống xác thực dữ liệu rùi hiện thị kết quả như mong muốn
5 Thực hiện thao tác in mã Barcode
6 Hệ thống xuất mã Barcode
7 Di chuột vô sản phẩm để hiển thị biểu tượng thùng rác
8 Thực hiện thao tác xóa sản phẩm
9 Hệ thống phản hồi rồi thông báo xóa thành công Kịch bản thay thế
2a Nhập thông tin không hợp lệ hệ thống không gửi về thông tin Trở lại use case 1
Bảng 3.9 Use case Biểu đồ
Tên Use case Biểu đồ
Mô tả Lọc thống kê theo ngày/ tháng/ năm
Người thực hiện (Actor) Admin
Sự kiện kích hoạt (Trigger) Thao tác với các thanh lọc Điều kiện tiên quyết
(Pre-Conditions) Đăng nhập thành công Điều kiện kết quả
Hiển thị thống kê theo thanh lọc
1 Hiện thị trang biểu đồ
2 Thao tác với các thanh lọc
3 Hệ thống sẽ lấy từ Database để hiện thị dữ liệu tương thích theo các thanh lọc Kịch bản thay thế
Bảng 3.10 Use case Quản lý Nhân viên
Tên Use case Quản lý Nhân viên
Mô tả Tìm kiếm, thêm và xóa nhân viên
Người thực hiện (Actor) Admin
Sự kiện kích hoạt (Trigger) Điền vô khung tìm kiếm, thao tác với các nút thêm xóa Điều kiện tiên quyết
(Pre-Conditions) Đăng nhập thành công và hiển thị danh sách nhân viên Điều kiện kết quả
Hiển thị thông tin nhân viên sau khi tìm kiếm, thêm và xóa nhân viên thành công Kịch bản chính
1 Hiển thị trang quản lý nhân viên
2 Nhập thông tin nhân viên
3 Hệ thống sẽ xác thực dữ liệu nhập vào để hiện thông tin nhân viên chính xác
4 Hiện thị thông tin nhân viên theo như mong muốn
5 Nhấn vào nút thêm nhân viên
6 Nhập thông tin nhân viên
7 Hệ thống xác thực thông tin rùi lưu về Database
8 Thông báo thêm nhân viên thành công
9 Chọn một nhân viên rùi click vô biểu tượng thùng rác để xóa thông tin nhân viên
10 Xác nhận xóa nhân viên
11 Hệ thống thông báo xóa khách hàng thành công Kịch bản thay thế
2a Nhập thông tin không hợp lệ hệ thống không gửi về thông tin Trở lại use case 1 7a Nhập thông tin không hợp lệ Hệ thống báo lỗi. Trở về use case 6 nhập lại thông tin khách hàng0
Bảng 3.11 Use case Quản lý Chấm công
Tên Use case Quản lý Chấm công
Mô tả Chọn thời gian, chấm công, lưu bảng
Người thực hiện (Actor) Admin
Sự kiện kích hoạt (Trigger) Thao tác với thanh lọc, điền thông tin chấm công, ấn nút lưu bảng Điều kiện tiên quyết
(Pre-Conditions) Đăng nhập thành công và hiện thị danh sách nhân viên Điều kiện kết quả
Lọc theo thời gian, điền chấm công, và lưu bảng thành công Kịch bản chính
1 Hiển thị trang chấm công
2 Lọc thông tin theo thời gian
3 Hệ thống kiếm tra Database để trả về thông tin được lọc
5 Hệ thống xác thực thông tin rồi lưu về Database
7 Hệ thống báo về lưu bảng thành công Kịch bản thay thế
Bảng 3.12 Use case Báo cáo
Tên Use case Báo cáo
Mô tả Xuất file báo cáo
Người thực hiện (Actor) Admin
Sự kiện kích hoạt (Trigger) Ấn vào nút xuất file Điều kiện tiên quyết
(Pre-Conditions) Đăng nhập thành công hiển thị Doanh thu sản phẩm,
Bảng lương và Sản phẩm quá hạn Điều kiện kết quả
1 Hiện thị trang quản lý báo cáo
2 Ấn xuất file báo cáo Kịch bản thay thế
Bảng 3.13 Use case Quản lý Tài khoản
Tên Use case Quản lý Tài khoản
Mô tả Tìm kiếm, xóa tài khoản
Người thực hiện (Actor) Admin
Sự kiện kích hoạt (Trigger) Điền vào thanh tìm kiếm, di chuột vô tài khoản để xóa Điều kiện tiên quyết
(Pre-Conditions) Đăng nhập thành công và hiển thị thông tin tài khoản Điều kiện kết quả
Hiện thị thông tin sau khi tìm kiếm, xóa tài khoản thành công Kịch bản chính
1 Hiển thị trang tài khoản
2 Nhập tên tài khoản hoặc nhân viên cần tìm
3 Hệ thống xác thực thông tin để hiển thị thông tin
4 Di chuột vô tài khoản để hiển thị biểu tượng xóa tài khoản
5 Xóa tài khoản thành công Kịch bản thay thế
2a Nhập thông tin không hợp lệ hệ thống không gửi về thông tin Trở lại use case 1
Bảng 3.14 Use case Quản lý Sự kiện
Tên Use case Quản lý Sự kiện
Mô tả Thêm sự kiện
Người thực hiện (Actor) Admin
Sự kiện kích hoạt (Trigger) Điền thông tin sự kiện Điều kiện tiên quyết
(Pre-Conditions) Đăng nhập thành công và hiển thị thông tin sự kiện Điều kiện kết quả
Hiện thị thông tin sau khi thêm sự kiện
6 Hiển thị trang tài khoản
7 Nhập thông tin sự kiên
8 Hệ thống xác thực thông tin sự kiện
9 Ấn chuột vô nút xác nhận thêm sự kiện
10 Hiện thị thông tin sự kiện trong danh sách Kịch bản thay thế
2a Không xác nhận thêm sự kiện Trở lại use case 1
3.1.3.14 Hệ thống trò chuyện (Chatbox)
Bảng 3.15 Use case Quản lý Sự kiện
Tên Use case Hệ thống trò chuyện (Chatbox)
Mô tả Hỗ trợ trò chuyện
Người thực hiện (Actor) Customer
Sự kiện kích hoạt (Trigger) Điền câu hỏi trong Chatbox Điều kiện tiên quyết
(Pre-Conditions) Đăng nhập thành công và hiển thị Chatbox Điều kiện kết quả
Hiện thị câu trả lời sau khi điền câu hỏi vô Chatbox
12 Điền câu hỏi vô Boxchat
13 Hệ thống xác thực và phản hồi lại câu trả lời mẫu
14 Hiện thị câu trả lời trong Chatbox Kịch bản thay thế
2a Thoát Chatbox Trở lại use case 1
PHÂN TÍCH HỆ THỐNG
MVC (Model-View-Controller): là một kiến trúc phát triển phần mềm phổ biến trong lĩnh vực phát triển ứng dụng web Nó tách biệt thành ba thành phần chính: Model, View và Controller, với mục tiêu chia nhỏ và tổ chức rõ ràng các phần khác nhau của hệ thống.
Hình 3.2 Mô hình MVC https://s.net.vn/HYkF [Truy cập ngày 20 tháng 12, 2023]
Là thành phần đại diện cho dữ liệu và luật logic xử lý dữ liệu.
Quản lý truy xuất, cập nhật và xử lý dữ liệu.
Thông báo cho Controller về các thay đổi trong dữ liệu.
Hiển thị dữ liệu và tương tác với người dùng.
Nhận thông tin từ Controller và hiển thị nội dung tương ứng.
Không chịu trách nhiệm xử lý dữ liệu.
Xử lý yêu cầu từ người dùng và điều chỉnh dữ liệu và tương tác giữa Model và View.
Nhận thông tin từ View và cập nhật Model tương ứng.
Điều hướng luồng dữ liệu và logic xử lý. Ưu điểm của kiến trúc MVC:
Tách biệt rõ ràng giữa dữ liệu, giao diện và logic xử lý.
Dễ dàng quản lý, bảo trì và mở rộng ứng dụng.
Cho phép phân chia công việc giữa các thành viên trong nhóm phát triển.
Tích hợp tốt với các công nghệ và framework khác.
Nhược điểm của kiến trúc MVC:
Đòi hỏi sự hiểu biết về kiến trúc và cấu trúc dự án.
Mức độ phức tạp cao hơn so với các kiến trúc đơn giản hơn.
Cần sự chính xác trong việc phân chia và quản lý các thành phần.
Tổng quan, kiến trúc MVC giúp tách biệt rõ ràng các thành phần của hệ thống, làm cho ứng dụng dễ bảo trì, mở rộng và phát triển Nó được sử dụng rộng rãi trong phát triển ứng dụng web để tăng tính linh hoạt và hiệu quả của quá trình phát triển.
THIẾT KẾ DỮ LIỆU
Hình 3.3 Sơ đồ Cơ sở dữ liệu
3.3.2 Mô tả chi tiết các kiểu dữ liệu
Bảng 3.14 Bảng thuộc tính Khách hàng
STT Tên thuộc tính Kiểu Ghi chú
1 Customer_ID int Khóa chính
2 HoTen varchar Tên khách hàng
3 SoDienThoaiKH varchar SĐT của khách hàng
4 LanDenGanNhat varchar Số lần đến gần nhất
Int Số đơn hàng ký gửi
Bảng 3.15 Bảng thuộc tính Nhân viên
STT Tên thuộc tính Kiểu Ghi chú
1 Employee_ID int Khóa chính
2 HoTen varchar Tên nhân viên
3 Phone varchar SĐT của nhân viên
4 Email varchar Email của nhân viên
5 LuongCoBan int Lương cơ bản
6 LuongTheoGio int Lương theo giờ
Bảng 3.16 Bảng thuộc tính Sản phẩm
STT Tên thuộc tính Kiểu Ghi chú
1 Item_ID int Khóa chính
2 Item_name varchar Tên sản phẩm
3 Category varchar Loại sản phẩm
4 Price int Giá sản phẩm
5 TrangThai varchar Trạng thái của sản phẩm
6 HinhAnh image Hình ảnh của sản phẩm
Bảng 3.17 Bảng thuộc tính Hóa đơn
STT Tên thuộc tính Kiểu Ghi chú
1 Consignment_ID int Khóa chính, mã đơn hàng ký gửi
2 Customer_ID int Mã khách hàng
3 NgayTaoDon date Ngày tạo hóa đơn
4 SoLuongSanPha m int Tổng giá trị của đơn hàng ký gửi
5 TrangThai varchar Trạng thái của đơn hàng ký gửi
6 Employee_ID int Mã nhân viên
Bảng 3.18 Bảng thuộc tính Account
STT Tên thuộc tính Kiểu Ghi chú
1 Account_ID int Khóa chính, ID tài khoản
3 MatKhau varchar Mật khẩu tài khoản
4 SDT int Số điện thoại
Bảng 3.19 Bảng thuộc tính Thời gian làm việc
STT Tên thuộc tính Kiểu Ghi chú
3 SDT_NhanVien int Số điện thoải nhân viên
4 GioLam int Giờ làm việc
Bảng 3.20 Bảng thuộc tính Lương
STT Tên thuộc tính Kiểu Ghi chú
1 Salary_ID int Khóa chính, mã lương
2 Employee_ID int Mã nhân viên
3 Hourly_rate int Tỷ lệ giờ làm
4 Hours_worked int Số giờ làm việc
5 Total_salary int Tổng lương của nhân viên
Bảng 3.21 Bảng thuộc tính Sự kiện
STT Tên thuộc tính Kiểu Ghi chú
1 Event_ID int Khóa chính, mã sự kiện
2 TenSuKien int Tên sự kiện
3 HinhAnh image Hình ảnh sự kiện
4 Thời gian diễn ra date Khoản thời gian diễn ra sự kiện
Bảng 3.22 Bảng thuộc tính doanh thu
STT Tên thuộc tính Kiểu Ghi chú
1 Revenue_ID int Khóa chính, mã doanh thu
2 MonthYear date Doanh thu theo tháng, năm
4 DoanhThu int Tổng doanh thu
Bảng 3.23 Bảng thuộc tính Báo cáo Sản phẩm tháng
STT Tên thuộc tính Kiểu Ghi chú
1 DayMonthYear date Theo ngày, tháng, năm
2 SoluongSanPhamBan int Số lượng sản phẩm bán đc
3 SoLuongSanPhamNhan int Số lượng sản phẩm nhận
Bảng 3.24 Bảng thuộc tính Báo cáo Doanh thu tháng
STT Tên thuộc tính Kiểu Ghi chú
1 MonthYear date Theo ngày, tháng, năm
2 DoanhThu int Tổng doanh thu
Bảng 3.25 Bảng thuộc tính Báo cáo Sản phẩm ngày
STT Tên thuộc tính Kiểu Ghi chú
1 DayMonthYear date Theo ngày, tháng, năm
2 SoluongHoaDonBanHan g int Số lượng hóa đơn bán hàng
3 SoLuongHoaDonKyGui int Số lượng hóa đơn ký gửi
XÂY DỰNG ỨNG DỤNG
THIẾT KẾ GIAO DIỆN
4.1.1 Danh sách các màn hình
Bảng 4.1 Danh sách các màn hình
Hình 4.1 Màn hình Đăng nhập
4.1.2.1.2 Mô tả cách sử dụng và xử lý
Bảng 4.2 Mô tả cách sử dụng màn hình Đăng nhập
STT Biến cố Xử lý
1 Tài khoản/ Mật khẩu Nhập thông tin tài khoản, mật khẩu
2 Đăng nhập Đăng nhập vào hệ thống
Hình 4.2 Màn hình Trang chủ
4.1.2.2.2 Mô tả cách sử dụng và xử lý
Bảng 4.3 Mô tả cách sử dụng màn hình Trang chủ
STT Biến cố Xử lý
1 06-2023 Lọc thông kê theo tháng
Hình 4.3 Màn hình Ký gửi
4.1.2.3.2 Mô tả cách sử dụng và xử lý
Bảng 4.4 Mô tả cách sử dụng màn hình Ký gửi
STT Biến cố Xử lý
1 Thanh lọc Khách hàng Lọc tìm kiếm theo điền thông tin khách hàng hoặc chọn từ danh sách có sẵn
2 Thêm sản phẩm Mở modal thêm sản phẩm
3 Xác nhận tạo hóa đơn Xác nhận tạo hóa đơn cho khách hàng
4 Hủy Xác nhận hủy Ký gửi
4.1.2.4 Màn hình Thêm sản phẩm
Hình 4.4 Thông tin sản phẩm
4.1.2.4.2 Mô tả cách sử dụng và xử lý
Bảng 4.5 Mô tả cách sử dụng màn hình Thông tin sản phẩm
STT Biến cố Xử lý
1 Nhập tên sản phẩm/ nhập giá sản phẩm Điền thông tin sản phẩm
2 Loại sản phẩm Chọn loại sản phẩm từ danh sách loại sản phẩm
3 Thêm hình ảnh Lựa chọn hình ảnh cho sản phẩm
4 Xác nhận Xác nhận thêm sản phẩm
5 Hủy bỏ Hủy bỏ thêm sản phẩm
Hình 4.5 Màn hình Thanh toán
4.1.2.5.2 Mô tả cách sử dụng và xử lý
Bảng 4.6 Mô tả cách sử dụng màn hình Thanh toán
STT Biến cố Xử lý
1 Nhập mã sản phẩm Điền mã sản phẩm để tìm kiếm sản phẩm
2 Khách hàng Tìm kiếm khách hàng hoặc chọn từ list khách hàng có sẵn
3 Xác nhận tạo hóa đơn Xác nhận tạo hóa đơn
4.1.2.6 Màn hình Quản lý Hóa đơn
Hình 4.6 Màn hình Quản lý Hóa đơn
4.1.2.6.2 Mô tả cách sử dụng và xử lý
Bảng 4.7 Mô tả cách sử dụng màn hình Quản lý Hóa đơn
STT Biến cố Xử lý
1 Nhập khách hàng hoặc mã hóa đơn cần tìm
Tìm kiếm theo khách hàng hoặc mã hóa đơn
2 Hóa đơn của khách hàng Xem chi tiết hóa đơn ký gửi của khách hàng
4.1.2.7 Chi tiết hóa đơn Ký gửi
Hình 4.7 Chi tiết Hóa đơn Ký gửi
4.1.2.7.2 Mô tả cách sử dụng và xử lý
Bảng 4.8 Mô tả cách sử dụng màn hình Chi tiết Hóa đơn Ký gửi
STT Biến cố Xử lý
1 Thanh toán cho khách Xác nhận thanh toán hóa đơn cho khách
2 In hóa đơn In thông tin hóa đơn ra
3 Hủy bỏ Thoát ra khỏi xem chi tiết hóa đơn ký gửi
4.2.8 Màn hình Quản lý Khách hàng
Hình 4.8 Màn hình Quản lý Khách hàng
4.1.2.8.2 Mô tả cách sử dụng và xử lý
Bảng 4.9 Mô tả cách sử dụng màn hình Quản lý Khách hàng
STT Biến cố Xử lý
1 Nhập số điện thoại hoặc tên khách hàng cần tìm Tìm kiếm khách hàng
2 Thêm khách hàng Mở modal thêm khách hàng
4.1.2.9 Màn hình Thêm khách hàng
Hình 4.9 Thông tin Khách hàng
4.1.2.9.2 Mô tả cách sử dụng và xử lý
Bảng 4.10 Mô tả cách sử dụng màn hình Thông tin Khách hàng
STT Biến cố Xử lý
1 Nhập tên/SĐT/Email khách hàng Điền thông tin khách hàng
2 Xác nhận Xác nhận thông tin khách hàng
3 Hủy bỏ Hủy bỏ thêm khách hàng
4.1.2.10 Màn hình Quản lý Sản phẩm
Hình 4.10 Màn hình Quản lý Sản phẩm
4.1.2.10.2 Mô tả cách sử dụng và xử lý
Bảng 4.11 Mô tả cách sử dụng màn hình Quảng lý Sản phẩm
STT Biến cố Xử lý
1 Nhập thông tin Sản phẩm Tìm kiếm sản phẩm
2 Sản phẩm Xem thông tin chi tiết hoặc chỉnh sửa sản phẩm
4.1.2.11 Màn hình Chỉnh sửa sản phẩm
Hình 4.11 Chỉnh sửa Sản phẩm
4.1.2.11.2 Mô tả cách sử dụng và xử lý
Bảng 4.12 Mô tả cách sử dụng màn hình Chỉnh sửa Sản phẩm
STT Biến cố Xử lý
1 Sửa tên sản phẩm/ nhập giá sản phẩm Điền thông tin sản phẩm
2 Sửa loại sản phẩm Chọn loại sản phẩm từ danh sách loại sản phẩm
3 Sửa hình ảnh Lựa chọn hình ảnh cho sản phẩm
4 Xác nhận Xác nhận thêm sản phẩm
5 Hủy bỏ Hủy bỏ thêm sản phẩm
Hình 4.12 Màn hình Biểu đồ
4.1.2.12.2 Mô tả cách sử dụng và xử lý
Bảng 4.13 Mô tả cách sử dụng màn hình Biểu đồ
STT Biến cố Xử lý
1 Thanh lọc theo ngày/tháng/năm Hiển thị thống kê theo thanh lọc
4.1.2.13 Màn hình Quản lý Nhân viên
Hình 4.13 Màn hình Quản lý Nhân viên
4.1.2.13.2 Mô tả cách sử dụng và xử lý
Bảng 4.14 Mô tả cách sử dụng màn hình Quản lý Nhân viên
STT Biến cố Xử lý
1 Nhập thông tin nhân viên cần tìm Tìm kiếm nhân viên
2 Thêm nhân viên Mở màn hình thêm nhân viên
3 Nhân viên Xem thông tin nhân viên
4.1.2.14 Màn hình Thêm nhân viên
4.1.2.14.2 Mô tả cách sử dụng và xử lý
Bảng 4.15 Mô tả cách sử dụng màn hình Thông tin Nhân viên
STT Biến cố Xử lý
1 Thông tin nhân viên Điền thông tin cơ bản của nhân viên
2 Xác nhận Xác nhận thông tin và thêm vào danh sách nhân viên
3 Hủy bỏ Hủy bỏ thao tác thêm nhân viên
4.1.2.15 Màn hình Thông tin Nhân viên
Hình 4.15 Thông tin Nhân viên
4.1.2.15.2 Mô tả cách sử dụng và xử lý
Bảng 4.16 Mô tả cách sử dụng màn hình Thông tin Nhân viên
STT Biến cố Xử lý
1 Thông tin nhân viên Xem hoặc chỉnh sửa thông tin nhân viên
2 Xác nhận Xác nhận thông tin
3 Xóa nhân viên Xác nhận xóa nhân viên
4 Hủy bỏ Hủy bỏ thao tác xem hoặc sửa thông tin nhân viên
4.1.2.16 Màn hình Lịch làm việc
Hình 4.16 Màn hình Lịch làm việc
4.1.2.16.2 Mô tả cách sử dụng và xử lý
Bảng 4.17 Mô tả cách sử dụng màn hình Lịch làm việc
STT Biến cố Xử lý
1 Chọn thời gian Thanh lọc theo tháng
2 Giờ làm việc Điền giờ làm việc của nhân viên theo ngày
3 Lưu bảng Xác nhận lưu bảng
Hình 4.17 Màn hình Báo cáo
4.1.2.17.2 Mô tả cách sử dụng và xử lý
Bảng 4.18 Mô tả cách sử dụng màn hình Báo cáo
STT Biến cố Xử lý
1 Chọn tháng Lọc báo cáo theo tháng
2 Xuất báo cáo Xuất file báo cáo theo dạng Excel
4.1.2.18 Màn hình Quản lý Tài khoản
Hình 4.18 Màn hình Quản lý Tài khoản
4.1.2.18.2 Mô tả cách sử dụng và xử lý
Bảng 4.19 Mô tả cách sử dụng màn hình Quản lý Tài khoản
STT Biến cố Xử lý
1 Nhập tên tài khoản hoặc nhân viên cần tìm
Tìm kiếm thông tin tài khoản
2 Tài khoản Xem thông tin tài khoản
4.1.2.19 Màn hình Thông tin tài khoản
Hình 4.19 Màn hình Thông tin Tài khoản
4.1.2.19.2 Mô tả cách sử dụng và xử lý
Bảng 4.20 Mô tả cách sử dụng màn hình thông tin Tài khoản
STT Biến cố Xử lý
1 Thông tin tài khoản Xem hoặc chỉnh sửa thông tin tài khoản
2 Xác nhận Xác nhận thông tin tài khoản
3 Hủy bỏ Hủy bỏ thao tác
4.1.2.20 Màn hình Quản lý Sự kiện
Hình 4.20 Màn hình Sự kiện
4.1.2.20.2 Mô tả cách sử dụng và xử lý
Bảng 4.21 Mô tả cách sử dụng màn hình Sự kiện
STT Biến cố Xử lý
1 Lọc thông tin Lọc thông tin theo ngày, tháng, năm
2 Thông tin Sự kiện Xem hoặc chỉnh sửa thông tin tài khoản
3 Thêm sự kiện Tạo thêm sự kiện
4.1.2.21 Màn hình Thêm Sự kiện
Hình 4.21 Màn hình Thêm Sự kiện
4.1.2.21.2 Mô tả cách sử dụng và xử lý
Bảng 4.22 Mô tả cách sử dụng màn hình Thêm Sự kiện
STT Biến cố Xử lý
1 Thông tin sự kiện Điền thông tin sự kiện
2 Save Lưu thông tin sự kiện
3 Cancel Hủy tạo thêm sự kiện
4.1.2.22.2 Mô tả cách sử dụng và xử lý
Bảng 4.23 Mô tả cách sử dụng màn hình ChatBox
STT Biến cố Xử lý
2 Type your message Nhập câu hỏi
3 Mic Hỏi bằng giọng nói
4 Ghim Thêm file dữ liệu
5 Ba chấm Đánh giá cuộc trò chuyện
4.1.2.23 Màn hình Trang chủ (Khách hàng)
Hình 4.23 Màn hình Trang chủ (Khách hàng)
4.1.2.23.2 Mô tả cách sử dụng và xử lý
Bảng 4.24 Mô tả cách sử dụng màn hình Trang chủ (Khách hàng)
STT Biến cố Xử lý
1 Thông tin sự kiện Hiện thị thông tin sự kiện
2 Nhập tên sản phẩm Tìm kiếm sản phẩm
3 Khoảng giá Lọc sản phẩm theo bảng giá
4 Sản phẩm Hiển thị thông tin sản phầm
4.1.2.24 Màn hình Quản lý Hóa đơn (Khách hàng)
Hình 4.24 Màn hình Quản lý Hóa đơn (Khách hàng)
Hình 4.25 Màn hình Chi tiết Hóa đơn Ký gửi (Khách Hàng)
4.1.2.24.2 Mô tả cách sử dụng và xử lý
Bảng 4.25 Mô tả cách sử dụng màn hình Quản lý Hóa đơn và Chi tiết Hóa đơn (Khách hàng)
STT Biến cố Xử lý
1 Nhập mã hóa đơn cần tìm Tìm kiếm hóa đơn
2 Thông tin hóa đơn Hiển thị thông tin hóa đơn
3 Button X Thoát khỏi màn Chi tiết hóa đơn ký gửi
CÀI ĐẶT VÀ THỬ NGHIỆM
Sau khi hoàn thành quá trình thiết kế với đầy đủ mô hình kiến trúc, bảng cơ sở dữ liệu và giao diện ứng với từng chức năng, nhóm chúng tôi tiến hành cài đặt phần mềm trên quy mô hệ thống Quy trình này bao gồm sử dụng môi trường phát triển hệ thống và công cụ quản lý mã nguồn mở (Visual Studio Code và GitHub).
4.2.1 Môi trường cài đặt
4.2.1.1 Môi trường Phát triển
- Visual Studio Code: nhóm sử dụng Visual Studio Code như là môi trường phát triển chính để xây dựng, chỉnh sửa mã nguồn và quản lý dự án Visual Studio Code mang lại sự thuận tiện và linh hoạt trong quá trình phát triển.
4.2.1.2 Môi trường Quản lý Source Code
- Github: được lựa chọn làm nền tảng quản lý mã nguồn để theo dõi và kiểm soát phiên bản của mã nguồn Việc này giúp đảm bảo quản lý hiệu quả, theo dõi thay đổi, và tối ưu hóa quá trình làm việc nhóm.
4.2.2.1 Môi trường cài đặt và thử nghiệm
Môi trường cài đặt
- Nhóm thực hiện quá trình cài đặt trên môi trường sử dụng GitHub và Visual Studio Code, đảm bảo tính nhất quán và dễ dàng triển khai.
- Tiến hành kiểm thử chức năng, kiểm thử tích hợp và kiểm thử hiệu năng.
Kiểm thử chức năng: Đảm bảo mọi chức năng hoạt động đúng như thiết kế.
Kiểm thử tích hợp: Kiểm tra tính tương tác giữa các thành phần khác nhau của hệ thống.
Kiểm thử hiệu năng: Đánh giá tốc độ tải trang, độ ổn định và khả năng xử lý đồng thời của hệ thống.
Hoàn thiện và Không lỗi:
- Sau khi hoàn thành quá trình phát triển và kiểm thử, đảm bảo rằng website hoạt động đúng, không có lỗi đáng kể và đáp ứng đúng yêu cầu đặt ra.
Tối ưu hóa và Bảo mật:
- Website được đánh giá và tối ưu hóa về tốc độ tải trang, độ phản hồi, giao diện người dùng và tính bảo mật để đảm bảo trải nghiệm người dùng tốt nhất.
Quá trình cài đặt và thử nghiệm này không chỉ giúp nhóm đảm bảo tính ổn định và chất lượng của hệ thống mà còn tạo điều kiện thuận lợi cho quá trình triển khai và vận hành.
NHẬN XÉT VÀ KẾT LUẬN
Kết quả đạt được
Không chỉ hiểu và nắm vững các kiến thức về phát triển web, nhóm còn có khả năng áp dụng chúng vào các dự án thực tế, từ việc xác định yêu cầu, thiết kế giao diện, phát triển, kiểm thử và triển khai.
Nhóm có kinh nghiệm rộng rãi trong việc sử dụng Figma để tạo ra các giao diện người dùng đẹp mắt và tối ưu hóa trải nghiệm người dùng Nhóm còn có khả năng tương tác tốt với nhau để thiết kế và đảm bảo rằng các thiết kế được chuyển đổi thành các sản phẩm chất lượng cao.
Với Visual Studio Code, nhóm không chỉ biết sử dụng các tính năng cơ bản mà còn nắm vững các phím tắt và tiện ích mở rộng để tăng hiệu suất lập trình và tạo ra mã nguồn sạch và dễ bảo trì.
Kiến thức chắc chắn về HTML, CSS, JavaScript và framework như ReactJS cho phép nhóm tạo ra giao diện website tương tác, linh hoạt và tối ưu hóa trải nghiệm người dùng Nhóm đã thực hiện thành công nhiều dự án đa dạng sử dụng những công nghệ này, từ các trang web tĩnh đến các ứng dụng phức tạp.
Đối với phát triển phía Back-end, nhóm đã nắm vững NodeJS và có kinh nghiệm xây dựng các ứng dụng mạnh mẽ và đáng tin cậy Nhóm không chỉ biết sử dụng các framework phổ biến như ExpressJS, mà còn có kiến thức về cơ sở dữ liệu và các công nghệ khác như MongoDB, MySQL, RESTful API, và JWT để xây dựng hệ thống ổn định và bảo mật.
Nhóm có thêm kiến thức về Boxchat AI khi tạo và sử dụng công cụ hộ trợ khách hàng tự động của Kommunicate.
Hạn chế
Tuy hệ thống đã được thiết kế để có khả năng mở rộng, tuy nhiên, nếu số lượng cửa hàng, chợ đồ cũ hoặc cá nhân bán đồ secondhand tăng lên đáng kể, hệ thống vẫn có thể gặp hạn chế trong việc xử lý lượng dữ liệu lớn và đáp ứng đồng thời cho nhiều người dùng Việc tăng cường khả năng xử lý dữ liệu và định hướng lại cấu trúc hệ thống để tối ưu hóa hiệu suất sẽ là một thách thức đối với quy mô mở rộng lớn Điều này có thể yêu cầu việc sử dụng công nghệ khác như các cơ sở dữ liệu phân tán, việc tối ưu hóa thuật toán xử lý dữ liệu hoặc việc triển khai hệ thống đám mây để đáp ứng được tải lớn.
Bảo mật và bảo vệ thông tin cá nhân là một yêu cầu quan trọng trong quá trình xử lí thông tin khách hàng Tuy nhiên, việc phát triển các biện pháp bảo mật và quản lý dữ liệu hiệu quả là một thách thức liên tục Với sự phát triển của các kỹ thuật tấn công mới và quy định bảo mật thay đổi liên tục, việc duy trì một hệ thống bảo mật đáng tin cậy đòi hỏi sự tập trung và nâng cao liên tục Hơn nữa, việc đảm bảo tuân thủ quy định bảo mật như GDPR hoặc CCPA cũng là một thách thức, đòi hỏi sự hiểu biết sâu rộng về các quy tắc và nguyên tắc liên quan Để vượt qua những hạn chế này, tôi luôn nắm bắt các tiến bộ mới nhất trong lĩnh vực bảo mật và đảm bảo áp dụng các biện pháp bảo mật tiên tiến và quy trình quản lý dữ liệu tốt nhất để đảm bảo an toàn và bảo vệ thông tin cá nhân của khách hàng.
Hướng phát triển
Để nâng cao trải nghiệm người dùng và tạo sự tương tác, có thể bổ sung các tính năng mới như đánh giá và nhận xét sản phẩm Người dùng có thể chia sẻ ý kiến và trải nghiệm của mình về sản phẩm, giúp người khác có thông tin chi tiết và đánh giá chất lượng Bên cạnh đó, việc chia sẻ thông tin sản phẩm lên mạng xã hội cũng tạo cơ hội để tăng khả năng tiếp cận và quảng bá sản phẩm đến đông đảo người dùng.
Một phát triển quan trọng là xây dựng phiên bản ứng dụng di động của
"PlanB" Việc này sẽ tăng khả năng tiếp cận và thuận tiện cho người dùng trên các thiết bị di động, mở ra cơ hội mới để tương tác với ứng dụng và mua bán sản phẩm từ bất kỳ đâu và bất kỳ lúc nào Tận dụng sức mạnh và tính di động của thiết bị di động sẽ cung cấp trải nghiệm người dùng tốt hơn và mở rộng phạm vi đối tượng người dùng.
Trong việc tăng cường bảo mật, cần đẩy mạnh công tác bảo vệ thông tin cá nhân của người dùng và ngăn chặn các hình thức tấn công Điều này có thể bao gồm việc triển khai các biện pháp bảo mật mạnh hơn như mã hóa dữ liệu, xác thực hai yếu tố, và giám sát liên tục để phát hiện các hành vi đáng ngờ Đồng thời, cần xây dựng và duy trì chính sách bảo mật rõ ràng, đảm bảo rằng thông tin cá nhân của người dùng được bảo vệ và tuân thủ các quy định bảo mật hiện hành Đào tạo nhân viên và nhận thức về an ninh thông tin cũng là yếu tố quan trọng để đảm bảo tính bảo mật và tin cậy của hệ thống.
Để đưa "PlanB" lên một tầm cao mới và mở rộng quy mô hệ thống, nhóm đề xuất một chiến lược mở rộng đa chi nhánh Mục tiêu là tạo ra một hệ thống cửa hàng với quy mô lớn, phủ sóng nhiều địa điểm khác nhau, mang lại trải nghiệm mua sắm đa dạng và thuận tiện cho người dùng.