Chương 1: Giới thiệu Chương 2: Cơ sở lý thuyết Chương 3: Phân tích và thiết kế Chương 4: Kết quả xây dựng hệ thống quản lý kho Chương 5: Kết luận và hướng phát triển Chương 2: CƠ SỞ LÝ THUYET 2.1 Tổng quan về công việc quản lý kho hàng Khái quát về công việc quản lý kho: Quản lý kho hàng là những hoạt động liên quan trực tiếp đến hàng hóa vật tư, bao gồm công tác tổ chức, bao quan và quản lý số lượng hàng hóa. Kho hàng được quản lý tốt sẽ giữ cho quá trình sản xuất được liên tục, giảm các loại chi phí liên quan và khiến cho việc khai thác và sử dụng kho đạt hiệu quả cao hơn. Các công việc mà một nhân viên quản lý kho cần thực hiện: Nhập hàng, Xuất hang, lập phiếu kiểm kê lượng hang hóa được nhập vào kho, lập phiếu kiểm kê lượng hàng hóa được xuất khỏi kho, lập phiếu kiểm kê đối với lượng sản phẩm còn tồn trong kho, viết báo cáo kho. Đối với hệ thống quản lý kho hàng chúng tôi quyết định sử dụng phương pháp quản lý theo hạn sử dung.
Phương pháp này sẽ quản lý các sản pham theo hạn sử dụng của chúng. Những sản phẩm có han sử dụng sớm sẽ được yêu cầu xuất ra trước. Với việc quản lý sản phẩm theo hạn sử dụng sẽ tránh được tình trang sản phâm có han sử dụng ngắn bị tồn trong kho, gây thất thoát cho doanh nghiệp.2 Tìm hiểu quy trình xây dựng hệ thống Dé tạo ra một trang web thông thường cần trải qua 9 giai đoạn: Giai đoạn 1: Phân tích yêu cầu nhận được từ người dùng, làm rõ các yêu cầu của khách hàng từ đó đưa ra thiết kế phù hợp. Giai đoạn 2: Phác họa, xây dựng bản thiết kế demo bằng giấy hoặc phần mềm.
Giai đoạn 3: Thảo luận cùng người dùng về thiết kế của bản demo, nếu người dùng không đồng ý hay có sửa chữa thì quay về giai đoạn 2. Giai đoạn 4: Tiến hành lập trình trang web bằng ngôn ngữ lập trình và các công cụ hỗ trợ. Giai đoạn 5: Chạy thử nghiệm trang web. Giai đoạn 6: Người dùng dùng thử và đóng góp ý kiến, sửa chữa.
Giai đoạn 7: Cài đặt trang web lên Internet và public cho người dùng. Giai đoạn 8: Ban giao trang web với người dùng. Giai đoạn 9: Bảo trì, sửa chữa và nâng cấp trang web.3 Công nghệ ReactJs ReactJs là một thư viện JavaScript (không phải là framework) để xây dựng giao diện người dùng trên nhiều nền tảng khác nhau. ReactJs cung cấp một mô hình mạnh mẽ để làm việc và giúp chúng ta xây dựng giao diện người dùng theo cách khai báo và định hướng thành phần.
Được tạo ra bởi các kỹ sư của Facebook (Instagram) và ké từ khi phát hành nó đã tạo nên làn sóng trong cộng đồng JavaScript. React đã trở nên phô biến trong vài năm qua và là công cụ được nhiều nhóm và kỹ sư lựa chọn xây dựng giao diện người dùng động. Trên thực tế, sự kết hợp giữa API? của React, mô hình tinh thần va cộng đồng mạnh mẽ đã dẫn đến sự phát triển của React cho các nền tảng khác, bao gồm cả thiết bị di động và thậm chí cả thực tế ảo. React có thé tái sử dụng tat cả các component, thậm chí là qua nhiều project khác nhau.
Ta có thể định nghĩa các component nhỏ và gộp chúng lại để tạo ra những component to hơn. 2 APT là viết tắt của Application Programming Interface — phương thức trung gian kết nối các ứng dung và thư viện khác nhau. 10 > Component: La những thành phần giao diện được định nghĩa độc lập, có thể tái sử dụng và hoàn toàn tách biệt nhau. Có thé hiểu nó là một ham trong Javascript, chúng nhận bất kì đầu vào nào (props) và trả về các React element thé hiện những gì được hiển thị trên trình duyệt.
Gồm hai loại component: function component và class component. + Function component: Cách đơn giản dé định nghĩa một function component là viết JS function: Hình 2. 1: Function component Function này là 1 component hợp lệ vì nó chấp nhận | tham số "props" với dữ liệu và trả về 1 phần tử React. + Class component: sử dụng ES6 dé định nghĩa > JSX: JavaScript XML JSX là Javascript + XML, chuyên đổi cú pháp gần giống XML thành Javascript, cách viết JSX gần giống với HTML, sử dụng JSX để hiển thị UI component.
11 + JSX với cú pháp gần giống với JSX, cấu trúc cây khi biểu thị các thuộc tính, điều đó giúp ta dé dang định nghĩa, quản lý được các component phức tap, thay vì việc phải định nghĩa và gọi ra nhiều hàm hoặc object trong javascript. Khi nhìn vào cấu trúc đó cũng dé dang đọc hiểu được ý nghĩa của các component. Code JSX ngắn hơn, dễ hiểu hơn code JS. + JSX không làm thay đổi ngữ nghĩa của Javascript.
+ Với cách viết gần với các thẻ HTML, nó giúp những lập trình viên thông thường (ví dụ như các nhà thiết kế) có thê hiểu được một cách dễ dàng, từ đó có thê viết hoặc sửa code mà không gặp nhiều khó khăn. Ví dụ về việc có và không có sử dụng JSX. + Không sử dụng JSX render (React. 3: Vi du không dùng JSX 12 + Có sử dụng JSX Như ta có thê thấy code của JSX nhìn gọn hơn và đọc dễ hiểu hơn so với code của JS thuần.
> DOM: Document Object Model (Mô hình Đối tượng Tài liệu) DOM là một chuẩn được định nghĩa bởi W3C° dùng để truy xuất và thao tác trên code HTML hay XML bằng các ngôn ngữ lập trình thông dịch (scripting language) như Javascript. DOM có thé giúp lập trình viên thao tác dữ liệu theo mô hình lập trình hướng đối tượng do cấu trúc của DOM được định nghĩa theo dạng: đối tượng, phương thức, thuộc tinh dé có thể truy xuất dé dàng. Khi xem xét giữa DOM và HTML ta có thể xem xét HTML là một đoạn code, DOM là hình ảnh trừu tượng của đoạn code đó trong bộ nhớ. DOM được biểu diễn bởi môn hình DOM Tree.
Trong đó: tất cả các thẻ HTML sẽ được quản lý trong đối tượng document, thé cao nhất là thé html, tiếp theo là phân nhánh body và head. Bên trong head có những thẻ như style, title,. và bên trong body thì là vô số các thẻ HTML khác. 3 World Wide Web Consortium: W3C — Wikipedia tiếng Việt (cập nhật 6/5/2022) 13 Root element: <html> Attribute: “href” Text: “My title” “My link” “My header” Hình 2.
5: Mô hình DOM Tree* Đối với JavaScript dé thao tác với đối tượng HTML ta cần thông qua Document. > Virtual DOM Bởi vi sửa d6i DOM thực sự chậm, ta không bao giờ sửa đôi DOM trực tiếp bang React. Thay vào đó, ta sửa đôi Virtual DOM trong bộ nhớ đề thay thế. Hình dưới đây tượng trưng cho Virtual DOM trong bộ nhớ.
!document) | html Hình 2. 6: Virtual DOM trong bộ nhớ” 4 Nguồn: W3Schools 14 Một cách tong quát thì nó là một định dang dữ liệu JavaScript nhẹ được dùng dé thê hiện nội dung của DOM tai một thời điểm nhất định nào đó. Nó có tất cả các thuộc tính giống như DOM nhưng không có khả năng tương tác lên màn hình như DOM. Virtual DOM sử dụng key, ref mà ở DOM không có va Virtual DOM được tao mới sau mỗi lân render lại.
> Ưu điểm của ReactJS : > Nhược điểm : - Phù hợp với đa dạng thé loại website. - Chi sử dung cho làm UI, không có - Tái sử dụng lại các component phần Model và Controller mà phải kết , hợp với các thư viện khác, không có - Có thê sử dụng cho cả Mobile _¥ - two-way binding va ajax. - React khá nặng về dung lượng so với - Thân thiện với SEO. - Debug dễ dàng.4 Tìm hiểu công nghệ NodeJs Node.js là một nền tảng bất đồng bộ, non-blocking, event-based, sử dụng công cụ JavaScript V8° của Google.
Nó được sử dụng dé phát triển các ứng dụng sử dụng nhiều khả năng chạy JavaScript cả trên máy khách cũng như phía máy chủ và do đó được hưởng lợi từ khả năng tái sử dụng của mã. Là mã nguồn mở và đa nền tảng. Các ứng dụng Node.js được viết bằng JavaScript thuần và có thé chạy trong môi trường Node.Js trên Windows, Linux,. NodeJS sử dụng non-blocking, hướng sự vao ra dữ liệu thông qua các tác vụ thời gian thực.
NodeJS có khả năng mở rộng nhanh chóng, khả năng xử lý một số lượng lớn các kết nối đồng thời bằng thông lượng cao. Node sử dụng luồng đơn, kết 5 Nguồn: Learning React: A Hands-On Guide to Building Web Applications Using React and Redux ® V8 JavaScript engine 15 hợp với non-blocking I/O’ dé thực thi các request, cho phép hỗ trợ hàng chục ngàn kết nối đồng thời. Lightweight and Simple Modification JSON and AJAX Communication is Easy and Natural Real-Time Web Socket ProgrammingorAPE | — cm Speedy and Scalable Open Source Community Driven Modules n TM oF US Reuse The Codes at Every Level of Development Clubs With Google V8 Engine to Boosts App Performance Inexpensive Testing and Cheap Hosting Number of Packages and Extensions Less Parsing Time Hình 2. 7: NodeJs va những tính nang® NodeJS có những ứng dung sau : + Phát triển ứng dung “trang đơn”: NodeJS có thé xây dung one-page application.
Do các tùy chọn linh hoạt của nó, NodeJS rất phù hợp dé xây dựng nền tang mạng xã hội, trang web động và giải pháp gửi thư. + Chatbots: NodeJS cung cấp các chức năng nâng cao độc quyền cho chatbots và ứng dụng trò chuyện thời gian thực. + Phát triển ứng dụng IoT°: Node.js có khả năng xử lý các yêu cầu đồng thời liền mạch với hàng nghìn sự kiện được phát hành bởi hàng tỷ thiết bị trên mạng của nó.js hoạt động trên các kênh và luồng có thé ghi và đọc được. 7 Overview of Blocking vs Non-Blocking | Node.org) 8 Nguồn: Internet 9 Internet of Things: Internet Van Vật — Wikipedia tiếng Việt (cập nhật: 2/7/2022) 16 > Ưu điểm của NodeJs Được xây dựng trên nền tảng của ngôn ngữ Javascript, nên được hỗ trợ kiến trúc theo hướng sự kiện va non-blocking I/O.
Được xây dựng trên nền tang V8 Javascript Engine nên việc thực thi chương trình rất nhanh. Xử lý nhiều kết nối đồng thời một cách dễ dàng. NodeJS xử lý theo kiểu không đồng bộ nên phù hợp khi sử dụng để xây dựng các ứng dụng kiểu không đồng bộ, ứng dụng thời gian thực,. Khi sử dụng Node.Js cho máy chủ, có thể sử dụng nó cho toản bộ kiến thức cua Javascript dành cho server.
> Nhược điểm của NodeJs NodeJS là môi trường xử lý đơn luồng và theo hướng sự kiện nên chúng không thích hợp với những ứng dụng cần dùng nhiều nhân CPU.