Chương 1 TỔNG QUAN 1. Tính cấp thiết của đề tài Trong thời đại ngày nay, việc mua sắm trực tuyến đã trở thành một phần không thể thiếu trong cuộc sống của chúng ta. Việt Nam là một trong những quốc gia có tốc độ tăng trưởng kinh tế nhanh nhất ở châu Á, và nhu cầu tiêu dùng của người dân cũng đang gia tăng. Với việc nhập khẩu hàng hóa từ Trung Quốc, thị trường Việt Nam đang ngày càng phát triển, vì vậy cần có một hệ thống website nhập hàng Trung Quốc - Việt Nam để đáp ứng nhu cầu của người tiêu dùng.
Hệ thống website này sẽ đem lại nhiều lợi ích cho các nhà kinh doanh cũng như người tiêu dùng. Với hệ thống này, người tiêu dùng sẽ có thể dễ dàng mua hàng từ Trung Quốc với số lượng lớn, giá cả hợp lý và chất lượng đảm bảo. Đồng thời, các nhà kinh doanh cũng sẽ được hưởng lợi từ việc tiếp cận với nguồn hàng phong phú từ Trung Quốc, giúp tăng cường năng lực cạnh tranh của họ trên thị trường Việt Nam. Hơn nữa, việc xây dựng hệ thống website nhập hàng Trung Quốc - Việt Nam cũng đáp ứng nhu cầu của các doanh nghiệp trong việc tìm kiếm nguồn hàng phù hợp với nhu cầu sản xuất của họ.
Mục đích của đề tài Mục đích của đề tài xây dựng hệ thống website nhập hàng Trung Quốc – Việt Nam bằng công nghệ .0 và React tại thị trường Việt Nam hiện nay là để giúp các doanh nghiệp và cá nhân có thể dễ dàng tìm kiếm, mua sắm và nhập hàng từ Trung Quốc với giá cả hợp lý và chất lượng đảm bảo. Bằng cách sử dụng công nghệ .0 và React, hệ thống website sẽ được phát triển với hiệu suất cao, khả năng mở rộng và bảo mật tốt. Điều này sẽ giúp cho việc quản lý, xử lý và thao tác trở nên dễ dàng hơn và đem lại trải nghiệm tốt nhất cho người dùng. Với mong muốn đem lại lợi ích cho người dùng và đóng góp vào sự phát triển của thị trường nhập khẩu hàng hóa, đề tài xây dựng hệ thống website nhập hàng Trung Quốc – Việt Nam bằng công nghệ .0 và React là một dự án đầy tiềm năng và có ý nghĩa quan trọng trong thời đại số hóa hiện nay.
Cách tiếp cận và phương pháp nghiên cứu 1. Đối tượng nguyên cứu Đối tượng nghiên cứu trong đề tài “Tìm hiểu .Net, React và vận dụng xây dựng hệ thống website nhập hàng Trung Quốc – Việt Nam” gồm: − Các công nghệ .Net và React: Nghiên cứu về cách thức sử dụng, cấu trúc, tính năng và ưu điểm của các công nghệ này để áp dụng vào việc xây dựng hệ thống website. − Hệ thống website nhập hàng Trung Quốc – Việt Nam: Nghiên cứu về các yêu cầu, tính năng cần có của hệ thống website nhập hàng, cũng như phân tích, thiết kế và triển khai hệ thống này sử dụng các công nghệ .Net và React. − Người dùng: Nghiên cứu về các đặc điểm và yêu cầu của người dùng trong quá trình nhập hàng từ Trung Quốc về Việt Nam, từ đó đưa ra các giải pháp tối ưu cho hệ thống website nhập hàng.
− Nhân viên quản lý hệ thống: Nghiên cứu về các yêu cầu và kỹ năng cần có của nhân viên quản lý hệ thống để có thể quản lý và bảo trì hệ thống website nhập hàng. Từ những đối tượng nghiên cứu trên, nhóm sẽ phân tích, đưa ra giải pháp và triển khai hệ thống giải quyết các vấn đề liên quan đến việc nhập hàng từ Trung Quốc về Việt Nam một cách hiệu quả và tiện lợi hơn. Phạm vi nghiên cứu Đề tài sẽ tập trung nghiên cứu và vận dụng các công nghệ để xây dựng hệ thống website nhập hàng hiệu quả và thuận tiện cho người dùng. Phạm vi nghiên cứu sẽ bao gồm các khía cạnh sau: Tìm hiểu về các công nghệ .Net và React: đề tài sẽ tập trung nghiên cứu và phân tích các tính năng, ưu điểm, hạn chế của các công nghệ này để có thể vận dụng chúng vào việc xây dựng hệ thống website nhập hàng.
Phân tích yêu cầu và đặc điểm của người dùng và nhà cung cấp: nhằm tạo ra một hệ thống website nhập hàng thân thiện và dễ sử dụng cho người dùng, đề tài sẽ nghiên cứu và phân tích các yêu cầu và đặc điểm của người dùng cũng như nhà cung cấp. Thiết kế và triển khai hệ thống website nhập hàng: dựa trên các công nghệ .Net và React, đề tài sẽ tập trung vào việc thiết kế và triển khai hệ thống website nhập hàng từ Trung Quốc về Việt Nam một cách đơn giản, đầy đủ và tốc độ cao. 2 Đánh giá hiệu quả của hệ thống website nhập hàng: đề tài sẽ đánh giá hiệu quả của hệ thống website nhập hàng đã xây dựng bằng các chỉ tiêu như tốc độ xử lý, độ ổn định, độ tin cậy và sự hài lòng của người dùng. Kết quả dự kiến đạt được Nâng cao hiểu biết về công nghệ .NET và React, đặc biệt là về cách tích hợp giữa hai công nghệ này để xây dựng các ứng dụng web hiệu quả.
Hiểu rõ quy trình và các bước để xây dựng một hệ thống nhập hàng đầy đủ tính năng và đáp ứng được nhu cầu của các doanh nghiệp nhập hàng từ Trung Quốc về Việt Nam. Tạo ra một ứng dụng web thực tế và hoàn thiện để quản lý quá trình nhập hàng từ Trung Quốc về Việt Nam, bao gồm các tính năng như đặt hàng, quản lý đơn hàng, kiểm tra kho, thanh toán. Hệ thống khắc phục được nhược điểm của các hệ thống cũ trên thị trường. Cải thiện khả năng phân tích, thiết kế, triển khai và kiểm thử phần mềm của nhóm nghiên cứu.
3 Chương 2 CƠ SỞ LÝ THUYẾT Sau khi khảo sát và xác định yêu cầu của hệ thống, nhóm nhận thấy rằng việc sử dụng mô hình Multiple Page Application (MPA) của các hệ thống hiện có trên thị trường có khá nhiều hạn chế về tốc độ xử lý và real time dữ liệu. Để khắc phục nhược điểm đó, nhóm đã tìm hiểu và áp dụng mô hình Single Page Application (SPA) vào đề tài vì mô hình SPA chỉ render ra 1 lần duy nhất, sau đó javascript chịu trách nhiệm lấy và đưa dữ liệu vào trang mà không cần render trang mới. Để triển khai mô hình Single Page Application cho đề tài “Tìm hiểu .Net, React và vận dụng xây dựng hệ thống website nhập hàng Trung Quốc – Việt Nam” nhóm đã sử dụng công nghệ Microsoft .NET 6 làm Back-end, React làm Front-end và hệ quản trị cơ sở dữ liệu Microsoft SQL Server để lưu trữ dữ liệu hệ thống. Giới thiệu Microsoft .NET 6 là một nền tảng phát triển ứng dụng phần mềm được cung cấp bởi Microsoft.
Nó là phiên bản tiếp theo của Microsoft .NET Framework và được phát hành vào năm 2021.NET 6 cung cấp môi trường chạy ứng dụng đa nền tảng (cross-platform) cho việc phát triển ứng dụng web, ứng dụng di động, ứng dụng máy tính và các dịch vụ điện toán đám mây. Nền tảng này bao gồm một bộ công cụ và thư viện mạnh mẽ để xây dựng, triển khai và quản lý các ứng dụng phần mềm. Back-end Để thực hiện tạo cấu trúc cơ sở dữ liệu hệ thống sử dụng phương pháp EF Code First của Entity Framework tạo ra các đối tượng trước sau đó dựa trên các đối tượng mới bắt đầu tạo ra cấu trúc cơ sở dữ liệu tương ứng. Kiến trúc Back-end được chia thành các Class Library: jeamin.API chứa các Controller xử lý yêu cầu và phản hồi từ phía client.
Các Controller được đặt tên ứng với mỗi bảng trong cơ sở dữ liệu. Các controller nhận yêu cầu sau đó gọi các Interface để thực hiện chức năng sau đó trả dữ liệu về client.AppDbContext được sử dụng để tương tác với cơ sở dữ liệu.BaseAPI định nghĩa các phương thức và thuộc tính chung để các API Controller trong jeamin.API kế thừa và mở rộng nhằm giảm thiểu việc các API giống nhau phải viết nhiều lần.Entities chứa các lớp đại diện cho các đối tượng trong cơ sở dữ liệu. Các lớp này sẽ kế thừa lớp AppDomain (chứa các thuộc tính bắt buộc của mỗi đối tượng).Extensions cung cấp các phương thức mở rộng, cho phép mở rộng các chức năng và tính năng của các lớp đã tồn tại.Interface dùng để định nghĩa các interfaces chứa các phương thức của các lớp triển khai nằm trong jeamin.Models định nghĩa và quản lý các mô hình dữ liệu trong hệ thống. Các lớp này được dùng để trả dữ liệu về phía client.Requets chứa các lớp đóng vai trò nhận yêu cầu từ client.Service triển khai các phương thức đã định nghĩa ở jeamin.Utilities chứa các lớp cung cấp các hàm xử lý, enum, đối tượng được sử dụng trong hệ thống.
Để ánh xạ dữ liệu giữa các đối tượng (request, entity, model) hệ thống đã sử dụng thư viện AutoMapper hỗ trợ. Mỗi thực thể đều được định nghĩa quy tắc ánh xạ từ model sang entity, request sang entity và ngược lại. Hệ thống sử dụng design pattern UnitOfWork để quản lý các hoạt động truy cập cơ sở dữ liệu giúp đảm bảo tính toàn vẹn dữ liệu, hiệu suất và quản lý tài nguyên. Giới thiệu React là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook.
React được sử dụng để xây dựng các ứng dụng web đơn trang (Single Page Applications) và cung cấp các thành phần UI tái sử dụng cho các ứng dụng web. Front-end Kiến trúc front-end được chia thành các phần để dễ dàng quản lý cũng như việc mở rộng và tải sử dụng. Kiến trúc mà nhóm sử dụng dựa trên kiến trúc cơ bản của Framework Nextjs vì sẽ không cần phải cài đặt thêm package router dành cho React, sử dụng hệ thống File- system routing (mỗi folder trong folder pages sẽ là 1 router). 5 Ý nghĩa của các thư mục: − node_modules: chứa các package được cài để hỗ trợ.
− public: chứa các hình ảnh mặc định của hệ thống. − api: định nghĩa các instance và các request api. − assest: chứa các file json, css của thư viện như fontawesome. − components: chứa các component dùng cho từng page và toàn hệ thống.
− configs: định nghĩa các biến trong hệ thống (Status, params request, …), phần quyền trên các role hooks: định nghĩa các custom hook. − pages: File-system routing mặc định của nextjs (mỗi 1 file con là route). − providers: định nghĩa context riêng cho warehouse. − store: định nghĩa các global state của redux, lưu trữ các global state.
− styles: các file css định nghĩa cho toàn bộ hệ thống, custom lại thư viện tailwind − types: định nghĩa các kiểu dữ liệu của typescript.