Đồ án: Xây dựng Ứng dụng Last Mile Delivery (Giao hàng chặng cuối)

Tham khảo đồ án ứng dụng Last Mile Delivery (giao hàng chặng cuối). Báo cáo chi tiết từ phân tích, thiết kế đến kết quả thực tế cho sinh viên.

• Tác giả: Trần Nhật Tân
• Người hướng dẫn: Ths. Nguyễn Công Hoan
• Trường học: Đại Học Công Nghệ Thông Tin, Đại Học Quốc Gia Thành Phố Hồ Chí Minh
• Chuyên ngành: Information Technology
• Đề tài: Phát Triển Ứng Dụng Last Mile Delivery
• Loại tài liệu: Graduation Project
• Năm xuất bản: 2024
• Địa điểm: Ho Chi Minh City

Tóm tắt

I. Tổng Quan Về Đồ Án Ứng Dụng Last Mile Delivery

Last Mile Delivery hay giao hàng chặng cuối là giai đoạn cuối cùng và quan trọng nhất trong quá trình vận chuyển hàng hóa đến tay khách hàng. Đồ án này được phát triển bởi nhóm sinh viên từ Đại học Công nghệ Thông tin, Đại học Quốc gia Thành phố Hồ Chí Minh, dưới sự hướng dẫn của Thạc sĩ Nguyễn Công Hoan. Ứng dụng Last Mile Delivery được thiết kế nhằm giải quyết các thách thức trong quản lý, thống kê và theo dõi quá trình giao hàng. Ứng dụng này tích hợp các công nghệ hiện đại như ReactJS, NodeJS và MongoDB để cung cấp giải pháp toàn diện. Mục tiêu chính là nâng cao hiệu suất giao hàng, tối ưu hóa lộ trình vận chuyển, và cải thiện trải nghiệm khách hàng trong bối cảnh thương mại điện tử phát triển mạnh mẽ hiện nay.

1.1. Mục Tiêu Của Đồ Án

Mục tiêu chính của đồ án là xây dựng một ứng dụng giao hàng chặng cuối hiệu quả. Ứng dụng cần cung cấp các tính năng quản lí shop, quản lý tuyến đường, lộ trình giao hàng và theo dõi đơn hàng. Ngoài ra, ứng dụng Last Mile Delivery phải đảm bảo giao diện thân thiện, dễ sử dụng cho cả admin, nhân viên giao hàng và khách hàng. Mục tiêu phụ bao gồm tối ưu hóa thời gian giao hàng, giảm chi phí vận chuyển và nâng cao độ chính xác trong quản lý đơn hàng.

1.2. Đối Tượng Và Phạm Vi Nghiên Cứu

Đối tượng nghiên cứu của đồ án bao gồm ba nhóm người dùng chính: quản trị viên (Admin), nhân viên giao hàng (Delivery Staff) và khách hàng (Customer). Phạm vi của ứng dụng tập trung vào quản lý toàn bộ quy trình Last Mile Delivery từ giao hàng, cập nhật trạng thái đơn hàng, theo dõi vị trí real-time đến nhận phản hồi từ khách hàng. Hệ thống hỗ trợ quản lý đa cấp như quốc gia, tỉnh, huyện, xã kết hợp với quản lý phương tiện vận chuyển và tuyến đường giao hàng.

II. Công Nghệ Và Kiến Trúc Hệ Thống

Ứng dụng Last Mile Delivery được xây dựng dựa trên kiến trúc client-server hiện đại. Phía Front-end sử dụng ReactJS, một thư viện JavaScript mạnh mẽ giúp xây dựng giao diện người dùng tương tác động và mượt mà. Phía Back-end được phát triển bằng NodeJS với Express.js, cho phép xử lý các yêu cầu từ client một cách nhanh chóng và hiệu quả. Cơ sở dữ liệu MongoDB được lựa chọn để lưu trữ dữ liệu linh hoạt và khả năng mở rộng cao. Hệ thống tích hợp các công nghệ khác như Google Maps API để hiển thị bản đồ thực tế, tính toán lộ trình giao hàng và theo dõi vị trí real-time của các đơn hàng.

2.1. Front end và Công Nghệ Giao Diện

ReactJS là nền tảng chính cho phát triển giao diện Last Mile Delivery. ReactJS cung cấp các component tái sử dụng, quản lý state hiệu quả thông qua hooks và context API. Giao diện người dùng được thiết kế responsive, tương thích với các thiết bị khác nhau từ desktop đến mobile. Các công cụ hỗ trợ bao gồm Axios để gọi API, React Router cho điều hướng trang, và các thư viện UI như Material-UI hoặc Ant Design. Giao diện được tối ưu hóa untuk trải nghiệm người dùng tốt nhất với tính năng drag-drop, notification real-time.

2.2. Back end và Xử Lý Dữ Liệu

NodeJS với Express.js là xương sống phía server của ứng dụng Last Mile Delivery. Back-end xử lý tất cả các logic nghiệp vụ như xác thực người dùng, phân công tuyến đường, cập nhật trạng thái giao hàng và thống kê báo cáo. MongoDB lưu trữ thông tin shop, tuyến đường, phương tiện, đơn hàng và lịch sử hoạt động. Hệ thống được thiết kế với các endpoint RESTful API rõ ràng, đảm bảo bảo mật thông qua JWT authentication và quyền truy cập dựa trên vai trò người dùng.

III. Phân Tích Yêu Cầu Và Thiết Kế Hệ Thống

Phân tích yêu cầu của đồ án Last Mile Delivery được thực hiện chi tiết thông qua sơ đồ Use Case và các bảng đặc tả. Yêu cầu chức năng bao gồm quản lý shop, quản lý tuyến đường giao hàng, quản lý phương tiện vận chuyển, phân công lộ trình cho nhân viên giao hàng, cập nhật trạng thái đơn hàng, theo dõi bản đồ thực tế và nhận thông báo. Yêu cầu phi chức năng đảm bảo hệ thống có tính bảo mật cao, khả năng mở rộng tốt, hiệu suất nhanh chóng và khả năng dự phòng. Thiết kế được trình bày qua các use case diagram của ba actor chính: Admin, Delivery Staff và Customer, mỗi người có vai trò và quyền hạn khác nhau.

3.1. Danh Sách Yêu Cầu Và Use Case

Danh sách yêu cầu của Last Mile Delivery được liệt kê chi tiết với các tính năng chính. Admin quản lý shop, tuyến đường, phương tiện và phân công công việc. Delivery Staff nhận tuyến đường, cập nhật trạng thái giao hàng và xem bản đồ. Customer theo dõi đơn hàng, nhập mã tuyến đường và nhận thông báo. Use Case Diagram mô tả tương tác giữa các actor và chức năng hệ thống, giúp hiểu rõ luồng công việc. Mỗi use case được mô tả chi tiết với precondition, main flow, alternative flow và postcondition.

3.2. Thiết Kế Giao Diện Người Dùng

Giao diện người dùng của ứng dụng Last Mile Delivery bao gồm nhiều màn hình khác nhau. Màn hình đăng nhập và đăng ký cung cấp xác thực người dùng an toàn. Dashboard của Admin hiển thị thống kê tổng quan, quản lý shop, tuyến đường và phương tiện. Màn hình nhân viên giao hàng cho phép xem bản đồ, cập nhật trạng thái và quản lý hồ sơ cá nhân. Giao diện Customer đơn giản, cho phép theo dõi đơn hàng, nhập mã route và nhận thông báo. Tất cả giao diện được thiết kế đẹp, trực quan và dễ sử dụng với responsive design.

IV. Kết Quả Đạt Được Và Hướng Phát Triển

Đồ án Ứng dụng Last Mile Delivery đã hoàn thành thành công với tất cả các tính năng chính được triển khai và test. Hệ thống cung cấp giải pháp quản lí giao hàng chặng cuối toàn diện, từ lập kế hoạch tuyến đường đến cập nhật trạng thái giao hàng real-time. Ứng dụng Last Mile Delivery đã được kiểm thử và sẵn sàng cho triển khai. Dù vậy, còn nhiều hướng phát triển trong tương lai. Hướng phát triển bao gồm tích hợp AI để tối ưu lộ trình giao hàng, phân tích dữ liệu nâng cao, hỗ trợ giao hàng đa địa điểm, tích hợp ví điện tử và thanh toán trực tuyến, cải thiện thuật toán xếp hàng, và mở rộng hỗ trợ cho giao hàng quốc tế.

4.1. Kết Quả Đạt Được

Kết quả chính của Last Mile Delivery là một ứng dụng hoàn chỉnh, chức năng và giao diện đẹp mắt. Hệ thống thành công triển khai tất cả các tính năng quản lí shop, tuyến đường, phương tiện, phân công công việc, cập nhật trạng thái và theo dõi bản đồ. Ứng dụng hỗ trợ notification real-time, dữ liệu chính xác và hiệu suất cao. Code được tổ chức rõ ràng, theo best practices, dễ bảo trì và mở rộng. Giao diện responsive, thân thiện trên tất cả thiết bị. Hệ thống đã được test toàn diện, đảm bảo chất lượng cao.

4.2. Hướng Phát Triển Tương Lai

Hướng phát triển của Last Mile Delivery rất tiềm năng. Có thể tích hợp Machine Learning để tối ưu hóa lộ trình giao hàng dựa trên dữ liệu lịch sử. Triển khai Analytics nâng cao cho dự báo nhu cầu và quản lí kho. Mở rộng hỗ trợ giao hàng đa địa điểm và giao hàng kho tổng hợp. Tích hợp thanh toán điện tử, ví kỹ thuật số và các phương thức thanh toán mới. Phát triển mobile app native cho hiệu suất tốt hơn. Mở rộng sang giao hàng quốc tế và tích hợp với các cổng giao hàng toàn cầu.

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

LỜI MỞ ĐẦU Trong đồ án môn học này, chúng em chọn đề tài “Xây dựng ứng dụng Last mile delivery” để xây dựng một ứng dụng giao hàng chặng cuối, bắt nhịp được xu thế mạnh mẽ nổi lên trong thị trường là thương mại điện tử. Vì là một giai đoạn quan trọng phức tạp trong quá trình vận chuyển nên việc số hóa và tạo ra một ứng dụng hỗ trợ quản lí, thống kê, trực quan hóa là vô cùng cần thiết. Chúng em mong muốn rằng đồ án này sẽ mang lại hiệu suất cao cho các quy trình giao hàng chặng cuối. Chúng em sẽ tập trung vào việc thiết kế giao diện người dùng thân thiện và tích hợp các tính năng quản lý, thống kê, theo dõi,…một cách trực quan nhất.

Ứng dụng áp dụng các công nghệ như ReactJS, NodeJS và MongoDB với các tính năng quan trọng như quản lý shop, quản lí tuyến đường, lộ trình, đơn hàng, theo dõi vị trí đơn hàng cũng như nhận thông báo. Giao diện người dùng được thiết kế đẹp và thân thiện, mang lại trải nghiệm tương tác mượt mà và tiện lợi.1 Mục tiêu đề tài Trong cuộc sống hiện đại ngày nay, không thể thiếu sự xuất hiện của phần mềm. Phần mềm đóng vai trò đắc lực trong quản lí, giải trí, tính toán, thống kê và tự động hóa hầu như mọi khía cạnh trong cuộc sống. Trong bối cảnh vạn vật số hóa thì việc mua bán và giao thương trên không gian số hay thương mai điện tử trở thành một xu hướng mới mạnh mẽ, từ đó mở ra nhu cầu về việc quản lí trực quan hóa quá trình giao hàng.

Last-mile delivery hay giao hàng chặng cuối là giai đoạn giao hàng cuối cùng đến với khách hàng, đóng vai trò quyết định đến trải nghiệm khách hàng cũng như tính cạnh tranh của doanh nghiệp. Mục tiêu đề tài là phát triển một ứng dụng Last Mile Delivery nhằm tối ưu hóa quá trình giao hàng chặng cuối, đảm bảo tính chính xác, nhanh chóng và hiệu quả. Ứng dụng sẽ hỗ trợ các chức năng như quản lý đơn hàng, theo dõi vị trí giao hàng theo thời gian thực, phân phối lộ trình thông minh, và tích hợp công cụ giao tiếp giữa người giao hàng và khách hàng. Qua đó, ứng dụng góp phần cải thiện trải nghiệm khách hàng, giảm chi phí vận hành, và tăng tính cạnh tranh cho doanh nghiệp trong lĩnh vực logistics.2 Đối tượng nghiên cứu Đối tượng liên quan của đồ án này là những doanh nghiệp, các cửa hàng, quán ăn, nhà thuốc,.

có nhu cầu phân phối sản phẩm của mình trong nội thành trực tiếp đến tay người nhận. Cụ thể, các đối tượng nghiên cứu bao gồm: − Khách hàng sử dụng dịch vụ giao hàng: Những người đặt hàng trực tuyến mong muốn nhận được sản phẩm một cách nhanh chóng và chính xác. Cần có công cụ theo dõi đơn hàng theo thời gian thực và nhận thông báo về tiến trình giao hàng − Nhân viên giao hàng (shipper): Những người thực hiện công việc giao hàng cần ứng dụng hỗ trợ tối ưu hóa lộ trình và quản lý đơn hàng hiệu quả. − Doanh nghiệp cung cấp dịch vụ giao hàng: Các công ty vận tải, logistics hoặc doanh nghiệp thương mại điện tử, chủ cửa hàng mong muốn giảm chi phí vận hành, cải thiện năng suất và tăng cường chất lượng dịch vụ.

Cần công cụ quản lý toàn bộ quy trình giao hàng, từ phân phối nhiệm vụ đến đánh giá hiệu quả làm việc của nhân viên. − Bộ phận quản lý vận hành: Quản lý các hoạt động giao hàng, theo dõi hiệu quả thực hiện, và xử lý các vấn đề phát sinh. Đòi hỏi một hệ thống giám sát và báo cáo chi tiết để đưa ra các quyết định điều chỉnh phù hợp. Bằng cách tập trung nghiên cứu vào nhóm đối tượng này, ta sẽ có cơ hội hiểu rõ hơn về cách mà ứng dụng giao hàng chặng cuối ta phát triển đem lại lợi ích cho họ.

Ngoài ra, cho phép ta hiểu sâu về nhiều khía cạnh, quy trình, nghiệp vụ trong lĩnh vực giao hàng chặng cuối từ đó tối ưu hóa và phát triển hướng đối tượng về sau 1.3 Phạm vi nghiên cứu Nhóm chúng em xin đề xuất về các công nghệ cũng như đối tượng tìm hiểu trong ứng dụng như sau: 1.1 Công nghệ: Frontend: ReactJS Backend: NodeJS Database: MongoDB 1.2 Đối tượng đề tài hướng đến: Khách hàng sử dụng dịch vụ giao hàng Doanh nghiệp nhỏ, tiểu thương có nhu cầu vận chuyển, phân phối hàng hóa Người giao hàng CHƯƠNG 2. Cơ sở lý thuyết và Công nghệ sử dụng 2.1 Front-end là gì? Front-end, hay còn được gọi là phía giao diện người dùng của ứng dụng, là một phần không thể thiếu trong quá trình phát triển ứng dụng. Nó chịu trách nhiệm xây dựng giao diện mà người dùng tương tác và trải nghiệm. Front-end không chỉ liên quan đến việc hiển thị thông tin, mà còn đặt ra thách thức về việc tạo ra trải nghiệm người dùng mượt mà và hấp dẫn.

Front-end được tích hợp và sử dụng một cách quan trọng trong nhiều trường hợp, đặc biệt là khi: ● Xây Dựng Giao Diện Người Dùng (UI): Front-end đóng vai trò quan trọng trong việc xây dựng giao diện người dùng hấp dẫn và dễ sử dụng cho ứng dụng và trang web. ● Tăng Tương Tác Người Dùng: Khi cần tạo ra trải nghiệm người dùng tích cực và tương tác cao, Front-end giúp thực hiện các chức năng như thao tác click, kéo và thả, và các hiệu ứng động. ● Phát Triển Ứng Dụng Di Động: Front-end chơi một vai trò quyết định trong phát triển ứng dụng di động, bao gồm cả việc tối ưu hóa giao diện cho các thiết bị di động và tích hợp các tính năng đặc biệt của điện thoại. ● Xây Dựng Trang Thương Mại Điện Tử (E-commerce): Trong các dự án thương mại điện tử, Front-end làm nổi bật các sản phẩm, tối ưu hóa quá trình mua sắm và cung cấp trải nghiệm mua sắm trực tuyến linh hoạt.

● Tích Hợp Chức Năng Xử Lý Dữ Liệu Người Dùng: Khi cần thu thập, xử lý và hiển thị dữ liệu động từ người dùng, Front-end đảm nhận vai trò chính trong việc tương tác với Back-end.2 Back-end là gì? Back-end là phần phía sau của một ứng dụng, chịu trách nhiệm xử lý dữ liệu và quản lý logic nghiệp vụ mà người dùng không nhìn thấy. Trong khi Front-end tập trung vào giao diện người dùng và trải nghiệm tương tác, Back-end xử lý các yêu cầu từ Front-end, truy xuất, lưu trữ dữ liệu từ cơ sở dữ liệu và gửi lại kết quả cho Front-end để hiển thị. Back-end thường bao gồm: o Máy chủ (Server): Nơi xử lý các yêu cầu từ ứng dụng Front-end. o Ứng dụng (Application): Chứa logic nghiệp vụ và xử lý dữ liệu.

o Cơ sở dữ liệu (Database): Lưu trữ thông tin, dữ liệu mà ứng dụng cần sử dụng. Các công nghệ phổ biến cho Back-end bao gồm NodeJS, Django, Ruby on Rails, và cơ sở dữ liệu như MongoDB, MySQL. Back-end và Front-end phối hợp chặt chẽ để cung cấp trải nghiệm hoàn chỉnh cho người dùng.2 Công nghệ sử dụng 2.1 Front End a ReactJS Hình 2. ReactJS Khái niệm ● ReactJS là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook, dùng để xây dựng giao diện người dùng (UI).

React tập trung vào việc tạo ra các thành phần giao diện có thể tái sử dụng, tối ưu hóa hiệu suất, và dễ dàng quản lý trong các ứng dụng web và di động. Đặc trưng ● Các đặc trưng cơ bản của ReactJSbao gồm: o Component-Based (Dựa trên thành phần): React xây dựng giao diện thông qua các "component" – các khối nhỏ, độc lập, tái sử dụng được. o Virtual DOM: React sử dụng Virtual DOM để tăng hiệu suất. Khi có thay đổi, React chỉ cập nhật các phần cần thiết trên DOM thực thay vì toàn bộ trang.

o Unidirectional Data Flow (Dòng dữ liệu một chiều): Dữ liệu trong React di chuyển theo một chiều từ component cha xuống component con, giúp dễ kiểm soát luồng dữ liệu. o Declarative (Khai báo): React cho phép mô tả cách giao diện nên hiển thị dựa trên trạng thái của ứng dụng, thay vì thao tác DOM trực tiếp. o Hỗ trợ mạnh mẽ từ cộng đồng: Là một thư viện phổ biến, React có hệ sinh thái phong phú, bao gồm Redux, React Router, và Next. Cách hoạt động ● Rendering với Virtual DOM: Khi trạng thái hoặc dữ liệu thay đổi, React so sánh Virtual DOM mới với bản sao trước đó (diffing algorithm) để xác định những thay đổi cần áp dụng lên DOM thực.

● Event Handling: React sử dụng một hệ thống xử lý sự kiện tổng hợp (Synthetic Events) để đảm bảo hiệu suất và tính tương thích. ● Reconciliation: Quy trình cập nhật và đồng bộ hóa giao diện người dùng dựa trên sự khác biệt giữa Virtual DOM và DOM thực. Các thành phần chính Các thành phần chính của React Native bao gồm: o JSX (JavaScript XML): Một cú pháp mở rộng cho phép viết HTML trực tiếp trong JavaScript. JSX dễ đọc và giúp mô tả cấu trúc UI một cách trực quan.

o Components: Là dữ liệu được truyền từ component cha đến component con, chỉ có thể đọc (read-only). o State: Là dữ liệu nội bộ, được quản lý trong component. State có thể thay đổi theo thời gian thông qua hàm setState (với class component) hoặc useState (với functional component). o Lifecycle Methods: Các hàm đặc biệt để quản lý vòng đời của component.

Ví dụ: ▪ Mounting: componentDidMount() ▪ Updating: componentDidUpdate() ▪ Unmounting: componentWillUnmount() o Hooks: Cung cấp khả năng sử dụng state và các tính năng khác của React trong functional components. Các hook phổ biến: ▪ useState: Quản lý state. ▪ useEffect: Xử lý side effects. ▪ useContext: Sử dụng context để chia sẻ dữ liệu giữa các component.

o React Router: Một thư viện giúp định tuyến (routing) trong ứng dụng React. o Redux/Context API: Quản lý trạng thái ứng dụng, hỗ trợ chia sẻ dữ liệu giữa các component một cách hiệu quả. TailwindCSS Khái niệm Tailwind CSS là một framework CSS tiện ích đầu tiên (utility-first), cung cấp các lớp tiện ích sẵn có để xây dựng giao diện người dùng mà không cần viết CSS từ đầu. Tailwind CSS tập trung vào việc cung cấp các lớp CSS nhỏ, tái sử dụng để tạo kiểu nhanh chóng và dễ dàng.

Đặc trưng ● Utility-First: Tailwind CSS cung cấp hàng trăm lớp tiện ích nhỏ, mỗi lớp thực hiện một chức năng cụ thể (ví dụ: p-4 cho padding, text- center cho căn giữa văn bản), giúp tăng tốc độ phát triển. o Customizable: Dễ dàng tùy chỉnh các lớp tiện ích thông qua file cấu hình, cho phép thay đổi màu sắc, kích thước, khoảng cách, và hơn thế nữa theo nhu cầu của dự án. o Responsive Design: Tích hợp sẵn các tiện ích để xây dựng giao diện đáp ứng (responsive), giúp thiết kế giao diện trên nhiều loại thiết bị dễ dàng.