Đồ án tốt nghiệp Công nghệ thông tin: Xây dựng ứng dụng giao hàng smart express

ứng dụng giao hàng không chỉ giúp tối ưu hoá quá trình vận chuyển, giảm thời gian giao hàng mà còn nâng cao trải nghiệm của người dùng thông qua các tính năng như theo dõi đơn hàng trực

TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Trong thời đại công nghệ số 4.0 hiện nay, việc phát triển ứng dụng giao hàng thông minh trở nên vô cùng cấp thiết Với sự phát triển mạnh mẽ của thương mại điện tử và nhu cầu giao nhận hàng hoá trong nội thành ngày càng tăng cao, người tiêu dùng yêu cầu những dịch vụ giao hàng nhanh chóng, an toàn và tiện lợi ứng dụng giao hàng không chỉ giúp tối ưu hoá quá trình vận chuyển, giảm thời gian giao hàng mà còn nâng cao trải nghiệm của người dùng thông qua các tính năng như theo dõi đơn hàng trực tuyến và tương tác trực tiếp giữa khách hàng và tài xế.

MỤC ĐÍCH CỦA ĐỀ TÀI

Mục đích chính của đề tài này là phát triển một ứng dụng giao hàng thông minh, giúp kết nối nhanh chóng và hiệu quả giữa người gửi và người nhận hàng trong khu vực nội thành Ứng dụng này sẽ không chỉ đảm bảo tính an toàn và minh bạch trong quá trình giao nhận hàng, mà còn giúp tiết kiệm thời gian cho người gửi hàng Ngoài ra, ứng dụng cũng nhằm nâng cao thu nhập cho tài xế bằng cách tạo ra nhiều cơ hội việc làm và đảm bảo giá cả hợp lý cho khách hàng Như vậy, ứng dụng không chỉ góp phần thúc đẩy sự phát triển kinh tế địa phương mà còn cải thiện chất lượng cuộc sống cho người dân trong khu vực

K HẢO SÁT HIỆN TRẠNG

Khảo sát hiện trạng

Hình 1 Ảnh ứng dụng Grab [1]

- Giao diện đẹp mắt, bố cục đầy đủ, các thông tin được phân thành từng cụm, từng ô một, giúp việc diễn giải nội dung rõ ràng, dễ sử dụng

- Ứng dụng với phông màu hài hoà, dễ nhìn

- Có nhiều loại dịch vụ thuận tiện cho việc gửi hàng

- Có thể thấy ở ứng dụng grab này có rất nhiều chức năng hỗ trợ cho việc giao hàng

Hình 4 Ảnh ứng dụng Ahamove [1]

- Trang chủ thiết kế trực quan, dễ sử dụng

- Các dịch vụ phân chia rõ ràng

- Giá cả trực quan, rõ ràng, thông tin ngắn chi tiết dễ hiểu.

Xác định yêu cầu

Bảng 1 Yêu cầu chức năng

1 Đăng ký Khách, Tài xế

2 Đăng nhập Tài xế, Khách hàng, Admin

3 Quên mật khẩu Tài xế, Khách hàng, Admin

4 Đăng xuất Tài xế, Khách hàng, Admin

5 Xem thông tin cá nhân Tài xế, Khách hàng, Admin

6 Đặt lại mật khẩu Tài xế, Khách hàng, Admin

7 Xem lịch sử chuyến Tài xế, Khách hàng, Admin

8 Xem lộ trình chuyến đi Tài xế, Khách hàng

9 Nhắn tin Tài xế, Khách hàng

10 Xem thông báo Tài xế, Khách hàng

11 Xem lịch sử giao dịch Tài xế, Khách hàng, Admin

12 Quản lý ví Tài xế, Khách hàng, Admin

13 Nhận chuyến xe Tài xế

14 Từ chối chuyến xe Tài xế

15 Hủy chuyến xe Tài xế, Khách hàng

16 Xem thống kê doanh thu Tài xế

17 Đặt chuyến xe Khách hàng

18 Đánh giá tài xế Khách hàng

19 Xem danh sách khuyến mãi Khách hàng

20 Quản lý quyền Supper Admin

21 Quản lý vai trò Supper Admin

21 Quản lý khách hàng Admin

22 Quản lý tài xế Admin

23 Quản lý chuyến xe Admin

24 Quản lý dịch vụ Admin

25 Quản lý tin tức Admin

26 Quản lý cài đặt Admin

27 Quản lý rút tiền Admin

28 Quản lý loại xe Admin

29 Quản lý tỉnh thành Admin

30 Quản lý tài chính Admin

31 Quản lý khuyến mãi Amin

3.2.2 Yêu cầu phi chức năng

- Thân thiện với người dùng

- Tốc độ xử lý các thao tác nhanh chóng và chính xác

- Bảo mật được thông tin người dùng

- Dễ dàng bảo trì, mở rộng chức năng mới.

CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU

Đối Tượng Nghiên Cứu

Để hoàn thiện đề tài này, chúng em tiến hành nghiên cứu nhu cầu gửi hàng hoá của người dùng trong thực tế ở các thành phố lớn, đông đúc và từ sự phát triển của các ứng dụng giao hàng trong nước nói riêng và nước ngoài nói chung Đồng thời em cũng nghiên cứu các công nghệ để có thể xây dựng ứng dụng hoàn chỉnh nhất, bao gồm:

- Spring Framework và các modules của nó trong ngôn ngữ lập trình Java và RESTful API để xây dựng một số chức năng cho ứng dụng

- Thư viện React của ngôn ngữ lập trình JavaScript để thiết kế và xây dựng hệ thống giao diện quản lý ứng dụng

- Android java native để thiết kế và xây dựng người dùng cho ứng dụng di động trên hệ điều hành Android

- Cơ sở dữ liệu MySQL để lưu trữ dữ liệu cho hệ thống

- Spring Security và Spring OAuth để bảo mật cho hệ thống trong đăng nhập, đăng ký, tạo phân quyền và vai trò cho người dùng, …

Phạm Vi Nghiên Cứu

Ở đề tài này, nhóm em tập trung xây dựng, phát triển và xử lý các chức năng cơ bản của ứng dụng giao hàng thông minh Mục tiêu của chúng em không chỉ là tạo thuận lợi cho việc giao hàng giữa tài xế và khách hàng mà còn đảm bảo tính minh bạch về thông tin của chuyến giao hàng và đảm bảo đơn hàng được an toàn.

KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC

Trong quá trình hoàn thiện đề tài, chúng em dự kiến đạt được những kết quả sau:

- Xây dựng ứng dụng giao hàng thông minh: Ứng dụng sẽ bao gồm các chức năng cơ bản như đã đề cập trong đề cương chi tiết

- Phát triển giao diện người dùng: Tạo ra một giao diện thân thiện, dễ sử dụng, giúp người dùng dễ dàng tương tác với ứng dụng

- Tăng cường bảo mật: Tích hợp các chức năng bảo mật để nâng cao mức độ an toàn cho hệ thống

- Sử dụng dịch vụ bên thứ ba: Tận dụng các dịch vụ từ các nhà cung cấp khác để hoàn thiện và cải thiện hiệu suất của hệ thống

- Tối ưu hoá chi phí vận hành: Sử dụng các dịch vụ vận hành và học cách tối ưu hoá chi phí để duy trì môi trường vận hành một cách hiệu quả trong thực tế.

Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN

Sau khi hoàn thiện đề tài, chúng em sẽ tiếp tục rèn luyện, tiếp thu những đóng góp của thầy cô hướng dẫn cũng như phản biện để thực hiện triển khai những chức năng nâng cao, còn dang dở cũng như phát triển hệ thống lên một bước phát triển mới để có thể phát hành thực tế trong cuộc sống

Khi đề tài chúng em được áp dụng vào thực tế, khách hàng sẽ có một lựa chọn trong các ứng dụng giao hàng của họ, dựa vào những chức năng linh hoạt có được từ ứng dụng.

CƠ SỞ LÝ THUYẾT

Kiến trúc hệ thống

Hình 7 Kiến trúc hệ thống

Hệ thống được mô tả theo mô hình Client-Server, bao gồm hai thành phần chính:

• Xử lý các yêu cầu từ phía máy khách

• Lưu trữ và quản lý dữ liệu

• Cung cấp các dịch vụ và chức năng cho máy khách

Phía Máy khách (Frontend & App):

• Gửi yêu cầu đến máy chủ

• Hiển thị thông tin và kết quả nhận được từ máy chủ cho người dùng

• Tương tác với người dùng thông qua giao diện người dùng (UI)

Công nghệ sử dụng

Kiến trúc Microservices mang lại nhiều lợi ích so với các kiến trúc truyền thống như monolithic, bao gồm:

- Dễ dàng phát triển, triển khai và bảo trì từng dịch vụ riêng lẻ

- Tăng tính linh hoạt và khả năng mở rộng

- Giảm thiểu sự phụ thuộc giữa các dịch vụ

- Tăng khả năng chịu lỗi và khả năng phục hồi

Java là ngôn ngữ lập trình hướng đối tượng, được phát triển bởi Sun Microsystems (nay thuộc Oracle) vào năm 1995 Nhờ những ưu điểm nổi bật, Java nhanh chóng trở thành một trong những ngôn ngữ lập trình phổ biến nhất hiện nay, được ứng dụng rộng rãi trong nhiều lĩnh vực Ưu điểm:

- Hướng đối tượng: Giúp tổ chức code một cách logic, dễ hiểu và dễ bảo trì

- Nền tảng độc lập: Chương trình Java có thể chạy trên mọi hệ điều hành có hỗ trợ Java Virtual Machine (JVM)

- Bảo mật: Java được đánh giá cao về tính bảo mật nhờ cơ chế quản lý bộ nhớ an toàn và mã nguồn được biên dịch sang bytecode

- Hiệu suất: Java cung cấp hiệu suất cao và ổn định, phù hợp cho các ứng dụng đòi hỏi tính chuyên nghiệp

- Cộng đồng lớn: Java sở hữu cộng đồng lập trình viên đông đảo và nhiệt tình, luôn sẵn sàng hỗ trợ và chia sẻ kiến thức

Spring Boot là một framework dựa trên Spring giúp đơn giản hóa việc phát triển ứng dụng Java Spring Boot là một lựa chọn phổ biến để xây dựng ứng dụng microservices do:

- Khả năng tự động cấu hình: Spring Boot tự động cấu hình các thành phần cần thiết, giúp giảm thiểu thời gian cấu hình ban đầu và tập trung vào logic nghiệp vụ

- Hỗ trợ các máy chủ nhúng như Tomcat, Jetty, hoặc Undertow, giúp dễ dàng triển khai và chạy các microservices một cách độc lập

- Quản lý dependencies dễ dàng

- Spring Boot tích hợp tốt với các công cụ DevOps như Docker, Kubernetes, giúp triển khai và quản lý các microservices dễ dàng hơn

- Spring Boot cho phép dễ dàng mở rộng và bảo trì các microservices nhờ vào kiến trúc module hóa, giúp việc phát triển và triển khai trở nên linh hoạt hơn

Spring JPA (Java Persistence API) là một phần mềm phần mềm quan trọng của Spring Framework, cung cấp một số lợi ích quan trọng như sau:

- Đơn giản hóa lập trình với cơ sở dữ liệu: Spring JPA giúp giảm đáng kể số lượng mã phức tạp cần thiết để truy cập và thao tác với cơ sở dữ liệu bằng cách cung cấp các phương thức mặc định cho các hoạt động CRUD (Create, Read, Update, Delete)

- Giảm thiểu việc lặp lại mã: Nhờ vào tích hợp với Hibernate (một trong các triển khai của JPA), Spring JPA cho phép bạn tập trung vào logic nghiệp vụ thay vì việc viết mã để thao tác trực tiếp với cơ sở dữ liệu

- Tối ưu hóa và bảo trì dễ dàng: Các repository được tự động triển khai bởi Spring, giúp tối ưu hóa hiệu suất và dễ dàng bảo trì ứng dụng

- Hỗ trợ transaction: Spring JPA cung cấp hỗ trợ transaction để đảm bảo tính toàn vẹn của dữ liệu, giúp bạn dễ dàng quản lý các transaction phức tạp

- Tích hợp tốt với các công nghệ khác của Spring: Nó tích hợp tốt với các module khác của Spring như Spring Data, Spring MVC, giúp phát triển ứng dụng dễ dàng và hiệu quả hơn

- Hỗ trợ đa dạng các cơ sở dữ liệu: Spring JPA hỗ trợ nhiều loại cơ sở dữ liệu khác nhau như MySQL, PostgreSQL, Oracle, và nhiều hệ quản trị cơ sở dữ liệu khác

- Cộng đồng và tài liệu phong phú:

Spring Security là một framework quan trọng trong cộng đồng phát triển Java, tập trung vào việc cung cấp các giải pháp bảo mật toàn diện và có thể mở rộng cho các ứng dụng web Dưới đây là những tính năng nổi bật của Spring Security:

- Giải pháp Xác thực và Ủy quyền đa dạng: Spring Security cung cấp các cơ chế mạnh mẽ để xác thực người dùng và ủy quyền cho các hành động trong ứng dụng Điều này bao gồm xác thực bằng cách sử dụng cơ sở dữ liệu, LDAP, OAuth, và nhiều phương thức xác thực khác

- Bảo vệ chống lại các cuộc tấn công phổ biến: Framework này bảo vệ ứng dụng chống lại các cuộc tấn công như cố định phiên (session fixation), clickjacking, giả mạo yêu cầu chéo trang (CSRF), và các lỗ hổng bảo mật khác Nhờ đó, ứng dụng có thể duy trì tính toàn vẹn và bảo mật của dữ liệu

- Tích hợp mạnh mẽ với Spring Web MVC và Servlet API: Spring Security tích hợp tốt với Spring Web MVC và Servlet API, cho phép bạn dễ dàng áp dụng các cơ chế bảo mật vào các controller và endpoint của ứng dụng

ReactJS là một thư viện JavaScript được Facebook phát triển và duy trì, chuyên dùng để xây dựng giao diện người dùng cho các ứng dụng web đơn trang (Single Page Applications - SPAs) Nó không chỉ nổi bật với khả năng xử lý nhanh và trải nghiệm người dùng tối ưu mà còn là lựa chọn hàng đầu để tạo ra các ứng dụng web động

Ant Design là một bộ component của React, tuân thủ chuẩn thiết kế của đội ngũ Ant UED Tương tự như Material Design, Ant cung cấp đầy đủ các thành phần phổ biến như Layout, Button, Icon, và DatePicker, cùng các tính năng đặc biệt như LocaleProvider để thay đổi ngôn ngữ trên toàn ứng dụng

MÔ HÌNH HÓA YÊU CẦU

Đặc tả Use Case

2.2.1 Use Case Đăng ký tài khoản

Bảng 2 Đặc tả Use Case Đăng ký tài khoản

Tên Use Case Đăng ký tài khoản

Mô tả Người dùng khách thực hiện đăng ký để tạo tài khoản trên hệ thống

Actor Người dùng khách Độ ưu tiên Rất cao Điều kiện kích hoạt Người dùng khách muốn tạo tài khoản cá nhân trên hệ thống

Tiền điều kiện Người dùng khách chưa có tài khoản

Hậu điều kiện Thành công: Người dùng khách tạo được tài khoản mới trên hệ thống

Thất bại: Tài khoản của ngư người dùng khách không được tạo trên hệ thống

Luồng cơ bản 1 Người dùng chọn chức năng đăng ký

2 Người dùng nhập các thông tin hệ thống yêu cầu

3 Người dùng chọn nút Đăng ký

4 Hệ thống kiểm tra các thông tin người dùng nhập vào

5 Hệ thống gửi thông báo đăng ký tài khoản thành công

6 Điều hướng người dùng đến màn hình nhập otp

Luồng thay thế Không có

Luồng ngoại lệ Ở bước 4, nếu hệ thống phát hiện có dữ liệu đầu vào nào không hợp lệ, các công việc sau được thực hiện:

1 Hệ thống báo lỗi không thể tạo tài khoản

2 Use Case quay lại bước 2 của luồng cơ bản

- Các trường nhập thông tin không được để trống

- Trường số điện thoại phải hợp lệ

- Trường email phải đúng định dạng

- Trường mật khẩu có độ dài tối thiểu 6 ký tự

Bảng 3 Đặc tả Use Case Đăng nhập

Tên Use Case Đăng nhập

Mô tả Người dùng đăng nhập vào hệ thống với một vai trò cụ thể

Actor Khách hàng, Tài xế, Quản trị viên Độ ưu tiên Rất cao Điều kiện kích hoạt Người dùng muốn đăng nhập vào hệ thống

Tiền điều kiện Người dùng chưa đăng nhập vào hệ thống

Hậu điều kiện Thành công: Người dùng đăng nhập được vào hệ thống với một vai trò cụ thể

Thất bại: Hệ thống thông báo lỗi đăng nhập không thành công

Luồng cơ bản 1 Người dùng chọn chức năng đăng nhập

2 Người dùng nhập Tên đăng nhập và Mật khẩu

3 Người dùng chọn nút Đăng nhập

4 Hệ thống xác thực thông tin đăng nhập và cho phép người dùng truy cập vào hệ thống

Luồng thay thế Ở bước 3, nếu người dùng nhấn phím Enter thì Use Case tiếp tục bước 4 của luồng cơ bản

Luồng ngoại lệ Ở bước 4, nếu hệ thống không thể xác thực thông tin đăng nhập của người dùng, các công việc sau được thực hiện:

1 Hệ thống hiển thị thông báo lỗi đăng nhập không thành công

- Trường tên đăng nhập và mật khẩu không được để trống

- Tên đăng nhập là số điện thoại và mật khẩu không được ít hơn 6 ký tự

2.2.3 Use Case Đặt lại mật khẩu

Bảng 4 Đặc tả Use Case Đặt lại mật khẩu

Tên Use Case Đặt lại mật khẩu

Mô tả Người dùng đặt lại mật khẩu để đăng nhập vào hệ thống

Actor Khách hàng, Tài xế Độ ưu tiên Cao Điều kiện kích hoạt Người dùng muốn đặt lại mật khẩu để đăng nhập vào hệ thống

Tiền điều kiện Người dùng đã đăng nhập vào hệ thống

Hậu điều kiện Thành công: Mật khẩu của tài khoản người dùng được đặt lại theo mật khẩu mới được cung cấp

Thất bại: Hệ thống thông báo lỗi, mật khẩu của tài khoản người dùng không thay đổi

Luồng cơ bản 1 Người dùng chọn chức năng đặt lại mật khẩu

2 Người dùng nhập mật khẩu cũ, mật khẩu mới và xác nhận mật khẩu mới

3 Người dùng chọn Cập nhật

4 Hệ thống xác thực thông tin người dùng

5 Hệ thống gửi thông báo cập nhật thành công

Luồng thay thế Ở bước 3, nếu người dùng nhấn phím enter thì Use Case tiếp tục bước 4 của luồng cơ bản

Luồng ngoại lệ Ở bước 4, nếu hệ thống không thể xác thực thông tin người dùng, những công việc sau được thực hiện:

1 Hệ thống thông báo cập nhật thất bại

- Tất cả các trường yêu cầu người dùng nhập thông tin không được để trống

- Mật khẩu mới người dùng nhập vào phải có độ dài tối thiểu 6 ký tự

2.2.4 Use Case Xem thông tin cá nhân

Bảng 5 Đặc tả Use Case Xem thông tin cá nhân

Tên Use Case Xem thông tin cá nhân

Mô tả Người dùng xem thông tin tài khoản cá nhân

Actor Khách hàng, Tài xế Độ ưu tiên Cao Điều kiện kích hoạt Người dùng muốn xem thông tin tài khoản cá nhân

Hậu điều kiện Thành công: Hiển thị thông tin tài khoản người dùng

Thất bại: Hiển thị thông báo truy xuất thông tin thất bại

Luồng cơ bản 1 Người dùng chọn chức năng thông tin tài khoản

2 Điều hướng đến màn hình thông tin tài khoản

3 Hiển thị thông tin tài khoản người dùng

Luồng ngoại lệ Ở bước 3, nếu hệ thống không thể xác thực thông tin người dùng, các công việc sau được thực hiện:

1 Hiển thị thông báo truy xuất thông tin thất bại

Bảng 6 Đặc tả Use Case Đặt chuyến

Tên Use Case Đặt chuyến

Mô tả Khách hàng đặt giao hang

Actor Khách hàng, Độ ưu tiên Cao Điều kiện kích hoạt Khách hàng có đơn hàng muốn giao

Hậu điều kiện Thành công: Đặt thành công

Thất bại: Đặt không thành công

Luồng cơ bản 1 Người dùng nhập địa chỉ điểm nhận & giao

2 Hệ thống chuyển sang giao diện điền thông tin

3 Người dùng điền thông tin

4 Hệ thống hiện dịch vụ

5 Người dùng chọn dịch vụ cần đặt và đặt

6 Hệ thống tạo đơn hàng và chuyển sang giao diện tìm tài xế

Luồng ngoại lệ Không có

Người dùng không được bỏ trống thông tin điểm giao & điểm nhận cũng như thông tin người gửi người nhận

2.2.6 User Case Hoàn thành chuyến

Bảng 7 Đặc tả Use Case Hoàn thành chuyến

Tên Use Case Hoàn thành chuyến

Mô tả Tài xế hoàn tất giao hàng

Actor Tài xế Độ ưu tiên Cao Điều kiện kích hoạt Tài xế đã nhận hàng và đơn hàng ở trạng thái đi giao

Hậu điều kiện Thành công: Giao hàng thành công

Thất bại: Hiển thị thông báo thất bại

Luồng cơ bản 1 Tài xế chọn Trả hàng

2 Hệ thống hiện màn hình yêu cầu ảnh giao hàng

3 Người dùng chụp ảnh đơn hàng và gửi

4 Hệ thống kiểm tra và hoàn thành đơn hàng

Luồng thay thế Ở bước 3: Tài xế có thể chọn ảnh trong thư viện Tiếp tục bước 4

Luồng ngoại lệ Ở bước 3, nếu hệ thống không thể upload ảnh của tài xế:

4 Tài xế cập nhật đơn hàng không thành công

2.2.7 User Case Nạp tiền vào ví

Bảng 8 Đặc tả Use Case Nạp tiền vào ví

Tên Use Case Nạp tiên vào ví

Mô tả Khách hàng & Tài xế nạp tiền vào ví

Actor Khách hàng, Tài xế Độ ưu tiên Cao Điều kiện kích hoạt Người dùng muốn nạp tiên vào ví

Hậu điều kiện Thành công: Hiển thị thông báo nạp tiền thành công

Thất bại: Giao dịch chuyển sang trạng thái thất bại

Luồng cơ bản 1 Người dùng truy cập màn hình nạp tiền

2 Người dùng nhập tiền và chọn phương thức nạp

3 Hệ thống tạo yêu cầu nạp tiền và hiện mã QR nạp tiền

4 Người dùng thực hiện nạp tiền bằng mã QR

5 Tiền được nạp vào ví hệ thống thông báo cho người dùng

Luồng ngoại lệ Ở bước 3, nếu hệ thống không thể tạo giao dịch

4 Hiển thị lỗi hệ thống

2.2.8 User Case Tạo yêu cầu rút tiền

Bảng 9 Đặc tả Use Tạo yêu cầu rút tiền

Tên Use Case Tạo yêu cầu rút tiền

Mô tả Người dùng muốn rút tiền từ ví về ngân hàng

Actor Khách hàng, Tài xế Độ ưu tiên Cao Điều kiện kích hoạt Người dùng có tiền trong ví

Tiền điều kiện Người dùng có thông tin tài khoản ngân hàng

Hậu điều kiện Thành công: Tạo yêu cầu rút tiền thành công

Thất bại: Tạo yêu cầu rút tiền thất bại

Luồng cơ bản 1 Người dùng truy cập trang rút tiền

2 Người dùng chọn số tiền cần rút và bấm tiếp tục

3 Hệ thống tạo yêu cầu rút và hiển thị rút thành công

Luồng ngoại lệ Ở bước 2, nếu người dùng chưa có thông tin tài khoản ngân hàng thì hệ thống sẽ yêu cầu người dùng cập nhật thông tin ngân hàng & sau khi cập nhật xong luồng quay về 1

Hình 10 QR dẫn tới usecase của hệ thống Đường dẫn: https://docs.google.com/document/d/1LniLNWYQnYP2TJwS_glPo9D6Ft5y1j01CyOFEbY8MwM/edit?usp=sharing

THIẾT KẾ PHẦN MỀM

Lược đồ tuần tự

3.1.1 Lược đồ tuần tự Đăng ký

Hình 11 Lược đồ tuần tự Đăng ký

3.1.2 Lược đồ tuần tự Đăng nhập

Hình 12 Lược đồ tuần tự Đăng nhập

3.1.3 Lược đồ tuần tự Quên mật khẩu

Hình 13 Lược đồ tuần tự Quên mật khẩu 3.1.4 Lược đồ tuần tự Đặt đơn

Hình 14 Lược đồ tuần tự Đặt đơn

3.1.5 Lược đồ tuần tự Nhận chuyến

Hình 15 Lược đồ tuần tự Nhận chuyến 3.1.6 Lược đồ tuần tự Lấy/Trả hàng

Hình 16 Lược đồ tuần tự Lấy trả hàng

3.1.7 Lược đồ tuần tự Hủy chuyến đã nhận

Hình 17 Lược đồ tuần tự Hủy chuyến đã nhận 3.1.8 Lược đồ tuần tự Gửi tin nhắn hình ảnh

Hình 18 Lược đồ tuần tự Gửi tin nhắn hình ảnh

3.1.9 Lược đồ tuần tự Nạp tiền

Hình 19 Lược đồ tuần tự Nạp tiền 3.1.10 Lược đồ tuần tự Thêm quản trị viên

Hình 20 Lược đồ tuần tự Thêm quản trị viên

3.1.11 Chi tiết các lược đồ tuần tự khác

Hình 21 QR chi tiết các lược đồ tuần tự khác Đường dẫn: https://docs.google.com/document/d/1J0UdWOs_SIb8s-

Lược đồ lớp

Hình 22 Lược đồ lớp cho xác thực và phân quyền

Hình 23 Lược đồ lớp cho hệ thống

Thiết kế cơ sở dữ liệu

Hình 24 Lược đồ thực thể cho xác thực và phân quyền

Hình 25 Lược đồ thực thể cho hệ thống

3.3.2 Mô tả cơ sở dữ liệu

Bảng 10 Mô tả bảng thuộc tính chung

STT Thuộc tính Kiểu dữ liệu Ý nghĩa

1 created_date datetime(6) Được tạo vào thời gian

2 created_by varchar(64) Được tạo bởi người dùng

3 updated_date datetime(6) Được cập nhật vào thời gian

4 updated_by varchar(64) Được cập nhật bởi người dùng

Bảng 11 Mô tả bảng account ST

Thuộc tính Kiểu dữ liệu Ý nghĩa

1 id bigint UN PK Mã định danh

2 kind int Loại tài khoản

3 avatar_path varchar(255) Ảnh đại diện

4 username varchar(255) Tên người dùng

5 phone varchar(255) Số điện thoại

8 full_name varchar(255) Tên đầy đủ

9 attempt_code int Số lần nhập sai OTP

10 reset_pwd_code varchar(255) OTP thay đổi mật khẩu

11 reset_pwd_time datetime Thời gian thay đổi mật khẩu

12 attempt_login int Số lần đăng nhập thất bại

13 last_login datetime Lần cuối đăng nhập

14 is_super_admin bit(1) Tài khoản có thuộc loại

15 group_id bigint Mã định danh nhóm quyền

Bảng 12 Mô tả bảng group

STT Thuộc tính Kiểu dữ liệu Ý nghĩa

2 name varchar(255) UN Tên nhóm quyền

3 description varchar(255) Mô tả nhóm quyền

4 kind int Loại nhóm quyền

Bảng 13 Mô tả bảng permission ST

2 name varchar(255) UN Tên quyền

3 description varchar(255) Mô tả quyền

4 action varchar(255) Đường dẫn quyền

5 name_group varchar(255) Tên nhóm quyền

6 permission_code varchar(255) Tên quyền viết tắt

Bảng 14 Mô tả bảng permission_group ST

1 permission_id bigint UN PK Mã định danh quyền

2 group_id bigint UN PK Mã định danh nhóm

Bảng 15 Mô tả bảng category ST

2 name varchar(255) UN Tên thể loại

3 description varchar(255) Mô tả thể loại

4 image varchar(255) Ảnh hiện thị thể loại

5 kind int Loại thể loại

Bảng 16 Mô tả bảng service ST

2 name varchar(255) UN Tên dịch vụ

3 description varchar(255) Mô tả dịch vụ

4 image varchar(255) Ảnh hiển thị dịch vụ

5 price varchar(255) Giá dịch vụ

6 kind int Loại dịch vụ

7 category_id bigint Mã định danh thể loại

8 max_order int Số lượng booking tối đa

Bảng 17 Mô tả bảng nation ST

2 name varchar(255) Tên quốc gia

3 post_code varchar(255) UN Mã bưu điện

4 kind int Loại quốc gia

5 parent_id bigint Mã định danh quốc gia cha

Bảng 18 Mô tả bảng customer ST

2 name varchar(255) Tên đầy đủ

3 avatar varchar(255) Ảnh đại điện

4 phone varchar(255) UN Số điện thoại

7 reset_password_code varchar(255) OTP thay đổi mật khẩu

8 reset_password_time datetime Thời 46iant hay đổi mật khẩu

Bảng 19 Mô tả bảng driver ST

2 full_name varchar(255) Tên đầy đủ

3 avatar varchar(255) Ảnh đại diện

4 phone varchar(255) UN Số điện thoại

7 reset_password_code varchar(255) OTP thay đổi mật khẩu

8 reset_password_time datetime Thời 47iant hay đổi mật khẩu

9 ward_id bigint Mã định danh xã/phường

10 district_id bigint Mã định danh huyện/quận

11 provice_id bigint Mã định danh tỉnh/thành phố

12 bank_card varchar(255) Thẻ ngân hàng

13 identification_card varchar(255) Căn cước công dân

14 max_cod int Tiền trả trước

Bảng 20 Mô tả bảng position ST

4 time_update datetime Thời gian cập nhật

5 is_busy int Xác định vị trí tài xế có đang bận không

6 driver_id bigint Mã định danh tài xế

7 service_id bigint Mã định danh dịch vụ

Bảng 21 Mô tả bảng driver_vehicle ST

3 image varchar(255) Ảnh hiển thị xe

4 plate varchar(255) UN Biển số

5 license_no varchar(255) UN Số đăng ký

7 brand_id bigint Mã định danh thương hiệu

Bảng 22 Mô tả bảng driver_service ST

2 ratio_share int Tỉ lệ chia sẻ

Bảng 23 Mô tả bảng booking ST

2 code varchar(255) Mã chuyến xe

3 pickup_address varchar(255) Địa chỉ nhận

4 pickup_lat double Vĩ độ nhận

5 pickup_long double Kinh độ nhận

6 destination_address varchar(255) Địa chỉ trả

7 destination_lat double Vĩ độ trả

8 destination_long double Kinh độ trả

11 promotion_money double Tiền khuyến mãi

12 customer_note varchar(255) Ghi chú của khách hàng

14 payment_kind int Loại thanh toán

16 customer_id bigint Mã định danh khách hàng

18 room_id bigint Mã định danh phòng chat

19 rating_id bigint Mã định danh đánh giá

20 promotion_code_id bigint Mã định danh mã khuyến mãi

21 Sender_phone varchar(255) Số điện thoại người gửi

22 Sender_name varchar(255) Tên người gửi

23 Pickup_image varchar(255) Đường dẫn ảnh nhận hàng

24 Is_code boolean Có cod hay không

25 Deliver_image varchar(255) Đường dẫn ảnh giao hàng

26 Consignee_phone varchar(255) Số điện thoại người nhận

27 Consignee_name varchar(255) Tên người nhận

28 Cod_price double Số tiền ứng trước

Bảng 24 Mô tả bảng booking_detail ST

4 created_date datetime Thời gian tạo

7 booking_id bigint Mã định danh đặt xe

Bảng 25 Mô tả bảng room ST

2 time_start datetime Thời gian bắt đầu

3 time_end datetime Thời gian kết thúc

Bảng 26 Mô tả bảng chat_detail ST

2 message_id varchar(255) Mã tin nhắn

6 time_send datetime Thời gian gửi

8 room_id bigint Mã định danh phòng chat

Bảng 27 Mô tả bảng rating ST

2 message varchar(255) Nội dung đánh giá

3 star int Điểm đánh giá

Bảng 28 Mô tả bảng promotion ST

2 name varchar(255) Tên khuyến mãi

3 avatar varchar(255) Ảnh khuyến mãi

4 description varchar(255) Mô tả khuyến mãi

5 start_date datetime Thời gian bắt đầu

6 end_date datetime Thời gian kết thúc

7 kind int Loại khuyến mãi

9 discount_value double Phần trăm giảm

10 limit_value_max double Giới hạn tối đa

11 limit_value_min double Giới hạn tối thiểu

Bảng 29 Mô tả bảng promotion_code ST

2 code varchar(255) UN Mã khuyến mãi

4 promotion_id bigint Mã định danh khuyến mãi

Bảng 30 Mô tả bảng promotion_service ST

1 promotion_id bigint UN PK Mã định danh khuyến mãi

2 service_id bigint UN PK Mã định danh dịch vụ

Bảng 31 Mô tả bảng wallet ST

3 holding_money bigint Tiền giữ

Bảng 32 Mô tả bảng wallet_transaction ST

2 money bigint Tiền giao dịch

3 kind int Loại giao dịch

5 payment_kind int Loại thanh toán

6 payment_info varchar(255) Thông tin thanh toán

7 wallet_id bigint Mã định danh ví

9 Request_pay_out_id bigint Mã định danh yều cầu rút tiền

Bảng 33 Mô tả bảng request_pay_out ST

5 bank_card varchar(255) Thẻ ngân hàng

6 bransaction_code varchar(255) Mã giao dịch

7 Image varchar(255) Hình ảnh giao dịch

Bảng 34 Mô tả bảng notification ST

2 user_id bigint Mã định danh người dùng

3 user_kind int Loại người dùng

5 kind int Loại thông báo

Bảng 35 Mô tả bảng settings ST

2 setting_key varchar(255) UN Tên khóa

3 setting_value varchar(255) Giá trị

4 group_name varchar(255) Tên nhóm cài đặt

5 description varchar(255) Mô tả cài đặt

6 is_system bit Là của hệ thống

7 is_editable bit Được phép chỉnh sửa

8 data_type varchar(255) Quy định loại dữ liệu

Bảng 36 Mô tả bảng request_pay_out ST

3 kind int Loại yêu cầu rút

5 Bank_card varchar(255) Thông tin ngân hàng

6 image varchar(255) Ảnh giao dịch

7 Transaction_code varchar(255) Mã giao dịch

9 Customer_id long Mã định danh khách hàng

10 Driver_id long Mã định danh tài xế

Bảng 37 Mô tả bảng wallet

3 Holding_money int Tiền giữ khi đang giao dịch

5 Customer_id long Mã định danh khách hàng

6 Driver_id long Mã định danh tài xế

Bảng 38 Mô tả bảng news ST

6 Create_id long Mã người tạo

7 Published_date date Ngày công bố

8 Target int Đối tượng công bố

Thiết kế giao diện

3.4.1 Giao diện trang khách hàng

3.4.1.1 Màn hình truy cập vị trí thiết bị

Hình 26 Màn hình truy cập vị trí thiết bị khách hàng Bảng 39 Mô tả màn hình truy cập vị trí thiết bị khách hàng

STT Tên Loại Điều kiện Chức năng Ghi chú

“Tiếp tục” Điều hướng đến trang chọn đăng nhập/ đăng ký

Hình 27 Màn hình đăng nhập khách hàng Bảng 40 Mô tả màn hình đăng nhập khách hàng

Khung nhập số điện thoại

Nhập mật khẩu Mật khẩu tối thiểu 6 ký tự

1 Lấy nội dung từ khung nhập

2 Gửi API kèm theo nội dung đăng nhập

Nếu thành công điều hướng đến trang chủ

Thất bại hiện thông báo

Hình 28 Màn hình đăng ký tài khoản khách hàng Bảng 41 Mô tả màn hình đăng ký tài khoản khách hàng

1 Khung nhập họ và tên Thẻ

3 Khung nhập số điện thoại

Nhập số điện thoại

4 Khung nhập mật khẩu Thẻ

2 Gửi API kèm theo nội dung

Nếu thành công điều hướng về trang đăng nhập

Thất bại hiển thị thông báo

Trở về màn hình lựa chọn đăng nhập, đăng ký

Hình 29 Màn hình đăng xuất tài khoản khách hàng Bảng 42 Mô tả màn hình đăng xuất tài khoản khách hàng

“Hủy” Tắt hộp thoại đăng xuất

“Đăng xuất” Đăng xuất khỏi ứng dụng Điều hướng đến màn hình lựa chọn đăng nhập, đăng ký

Hình 30 Màn hình trang chủ khách hàng Bảng 43 Mô tả màn hình trang chủ khách hàng

Khung chọn vị trí giao hàng

Điều hướng tới màn hình nhập vị trí giao hàng, nhận hàng

Hiển thị danh sách các đơn hàng hiện tại

Đã có đầy đủ vị trí hiện tại và điểm đến, Click button “Tiếp tục” Điều hướng đến màn hình đặt xe

Hình 31 Màn hình cài đặt Bảng 44 Mô tả màn hình cài đặt

Khung thông tin cá nhan

Hiển thị và điều hướng đến màn hình cài đặt thông tin cá nhân

Diều hướng đến màn hình tài khoản

Khung xác thực vân tay

Bật, tắt nút switch để bật, tắt xác thực bằng vân tay

Click Điều hướng đến màn hình gọi đến quản trị

Click Điều hướng đến màn hình đổi mật khẩu

3.3.1.6 Màn hình thông tin cá nhân

Hình 32 Màn hình thông tin cá nhân khách hàng Bảng 45 Mô tả màn hình thông tin cá nhân khách hàng

Khung nhập họ và tên

Nhập mật khẩu hiện tại

2 Gửi API kèm theo nội dung chỉnh sửa

Nếu thành công hiển thị thông báo thành công và cập nhật lại dữ liệu Thất bại hiển thị thông báo cập nhật thất bại

3.4.1.7 Màn hình lịch sử hoạt động

Hình 33 Màn hình lịch sử hoạt động khách hàng Bảng 46 Mô tả màn hình lịch sử hoạt động khách hàng

1 Danh sách chuyến giao hàng

Hiển thị danh sách hoạt động

3.4.1.8 Màn hình chọn loại dịch vụ

Hình 34 Màn hình lựa chọn dịch vụ đặt chuyến

Bảng 47 Mô tả màn hình lựa chọn dịch vụ đặt chuyến

Danh sách các loại dịch vụ

Thẻ Chọn loại dịch vụ đặt chuyến

Click “Nhập ghi chú ” Điều hướng đến màn hình ghi chú chuyến giao hàng

1 Lấy nội dung từ dữ liệu đã chọn

2 Gửi API kèm theo nội dung đã chọn

Nếu thành công điều hướng đến trạng thái tìm kiếm tài xế

Thất bại hiển thị thông báo thất bại

3.4.1.9 Màn hình đặt chuyến thành công

Hình 35 Màn hình đặt chuyến Bảng 48 Mô tả màn hình đặt chuyến

Click thẻ tin nhắn Điều hướng đến màn hình tin nhắn

“Hủy” Điều hướng đến trang lý do hủy chuyến

3.4.1.10 Màn hình thông tin chuyến giao hàng

Hình 36 Màn hình thông tin chuyến giao hàng Bảng 49 Mô tả màn hình thông tin chuyến giao hàng

1 Thông tin chuyến giao hàng

Hiển thị thông tin chuyến giao hàng

3.4.1.11 Chi tiết các giao diện khách hàng

Hình 37 QR chi tiết các giao diện khách hàng Đường dẫn: https://docs.google.com/document/d/1AJfB8JeFUNzyvlosm3SYsP4gPBUfXJMTNoF cG7DxB6M/edit

3.4.2 Giao diện trang tài xế

3.4.2.1 Màn hình truy cập vị trí thiết bị

Hình 38 Màn hình truy cập vị trí thiết bị tài xế Bảng 50 Mô tả màn hình truy cập vị trí thiết bị tài xế

“Tiếp tục” Điều hướng đến trang chọn đăng nhập/ đăng ký

Hình 39 Màn hình trang chủ tài xế Bảng 51 Mô tả màn hình trang chủ tài xế

1 Lấy trạng thái muốn cập nhật

2 Gửi API kèm các thông tin cần thiết

4 Cập nhật trạng thái mới cho tài xế

2 Nút thu nhập Thẻ Click “Thu nhập” Điều hướng đến màn hình Thu nhập

2 Nút tài khoản Thẻ Click “Tài khoản” Điều hướng đến màn hình Tài khoản 2

3.4.2.3 Màn hình thông tin cá nhân

Hình 40 Màn hình thông tin cá nhân tài xế

Bảng 52 Mô tả màn hình thông tin cá nhân tài xế

Thẻ Hiển thị họ và tên tài xế

Thẻ Hiển thị số điệ thoại tài xế

Hình ảnh đại diện Thẻ Hiển thị ảnh đại diện của tài xế

Thẻ Hiển thị số sao đánh giá của tài xế

3.4.2.4 Màn hình chi tiết chuyến giao hàng

Hình 41 Màn hình chi tiết chuyến giao hàng tài xế Bảng 53 Mô tả màn hình chi tiết chuyến giao hàng tài xế

1 Thông tin chuyến giao hàng

Hiển thị thông tin chuyến giao hàng

2 Nút hoàn thành, kết thúc

Hiển thị trạng thái chuyến giao hàng

3.4.2.5 Màn hình tỷ lệ hoạt động

Hình 42 Màn hình tỷ lệ hoạt động Bảng 54 Mô tả màn hình tỷ lệ hoạt động

Phân loại danh sách tỷ lệ hoạt động

Hiển thị tỷ lệ hoạt động theo ngày, tuần, tháng

Hình 43 Màn hình thu nhập Bảng 55 Mô tả màn hình thu nhập

Phân loại thống kê thu nhập

Hiển thị thống kê thu nhập theo ngày, tuần, tháng

Hình 44 Màn hình nhận chuyến Bảng 56 Mô tả màn hình nhận chuyến

4 Nhận cuốc thành công, thay đổi màn hình trạng thái chuyến đã nhận

3 Nút đã nhận đơn Thẻ

4 Nhận đơn thành công, thay đổi màn hình trạng thái chuyến đi thành đã nhận đơn

Thẻ Hiển thị thông tin chuyến

Hình 45 Màn hình nạp tiền Bảng 57 Mô tả màn hình nạp tiền

Khung chọn số tiền cần nạp

Nhập vào editext Hiển thị thông tin chuyến

4 Kết thúc chuyến, thay đổi màn hình trạng thái chuyến giao hàng thành đã chuyến đi kết thúc

Nút giao hàng hoàn tất

“Chuyến giao hàng hoàn tất”

Xóa thông tin chuyến giao hàng khỏi màn hình

3.4.2.9 Chi tiết các giao diện tài xế

Hình 46 QR chi tiết các giao diện tài xế Đường dẫn: https://docs.google.com/document/d/1JDplCxDlvYYYK3PfBrLiMw81y4d4PgTApcp VacZi1J8/edit

3.4.3 Giao diện trang quản lý quyền hạn

3.4.3.1 Giao diện quản lý quản trị viên

Hình 47 Giao diện quản lý quản trị viên Bảng 58 Mô tả giao diện quản lý quản trị viên

Khung nhập tìm kiếm theo username

Nhập từ khóa tìm kiếm

Khung nhập tìm kiếm theo full name

Khung lựa chọn tìm kiếm theo status

Chọn trạng thái tìm kiếm

Khi nội dung của Textbox tìm kiếm hợp lệ và Click

1 Hiển thị danh sách admin theo điều kiện tìm kiếm

2 Goi API lấy danh sách admin có kèm theo yêu cầu tìm kiếm

3 Hiển thị danh sách admin

Bảng hiển thị danh sách admin

1 Gọi API lấy danh sách admin

2 Hiển thị danh sách admin

Khi click vào add new Chuyển sang trang thêm mới admin

Khi click vào icon cây bút

Chuyển sang trang chỉnh sửa thông tin admin

Khi click vào icon thùng rác

Hiển thị pop-up xác nhận xoá

3.4.3.2 Giao diện thêm quản trị viên

Hình 48 Giao diện thêm quản trị viên Bảng 59 Mô tả giao diện thêm quản trị viên

1 Khung thêm ảnh đại diện

1 Hiển thị cửa sổ tìm kiếm hình ảnh

2 Nhận hình ảnh và gọi API gửi ảnh về server

3 Nhận response chứa link của ảnh

4 Lấy link và hiển thị hình ảnh

Nhập lại mật khẩu

Click vào để chọn group

Click vào để chọn status

2 Gửi API kèm theo nội dung chỉnh sửa

4 Chuyển về trang danh sách admin

5 Hiển thị kết quả chỉnh sửa

Click vào nút Cancle Chuyển về trang danh sách admin

3.4.3.3 Giao diện xóa quản trị viên

Hình 49 Giao diện xóa quản trị viên

3.4.3.4 Giao diện quản lý vai trò

Hình 50 Giao diện quản lý vai trò Bảng 60 Mô tả giao diện quản lý vai trò

Khung nhập tìm kiếm theo quyền

Chọn chức quyền tìm kiếm

Khi nội dung của Textbox tìm kiếm hợp lệ và Click

1 Hiển thị danh sách quyèn theo điều kiện tìm kiếm

2 Goi API lấy danh sách quyền có kèm theo yêu cầu tìm kiếm

3 Hiển thị danh sách quyền

Bảng hiển thị danh sách quyền

1 Gọi API lấy danh sách chức năng

2 Hiển thị danh sách chức năng

Khi click vào icon cây bút

Chuyển sang trang chỉnh sửa nhóm quyền

3.4.3.5 Giao diện quản lý nhóm quyền

Hình 51 Giao diện quản lý nhóm quyền Bảng 61 Mô tả giao diện quản lý nhóm quyền

1 Nhận thông tin của tin tức được thay đổi

2 Kiểm tra tính hợp lệ của thông tin và các trường bắt buộc nhập

3 Check và bỏ check các nhóm quyền cho roles người dùng tương ứng

4 Cập nhật thông tin và cập nhật lại CSDL bảng Permissions

5 Trả thông báo về (cập nhật thành công/ thất bại)

Hủy hành động cập nhập và trả về màn hình quản trị nhóm quyền

Nhập khung mô tả quyền

Nhập mô tả cho quyền

3.4.4 Giao diện trang quản lý hệ thống

3.4.4.1 Giao diện trang đăng nhập

Hình 52 Giao diện trang đăng nhập

Bảng 62 Mô tả giao diện đăng nhập

1 Khung nhập tên đăng nhập

Button Nhấn để đăng nhập vào hệ thống

Hình 53 Giao diện profile Bảng 63 Mô tả giao diện profile

1 Breadcrumbs Breadcrumbs Breadcrumbs hiện tại của trang

Hiển thị nhãn cho trường dữ liệu hình ảnh, ô hiển thị hình ảnh và upload thay đổi hình ảnh

3 Khung tên Label+Input Hiển thị nhãn cho trường dữ liệu “user name”,ô nhập dữ liệu

4 Khung email Label+Input Hiển thị nhãn cho trường dữ liệu

Label+Input Hiển thị nhãn cho trường dữ liệu “Họ và tên”, ô nhập dữ liệu

Label+Input Hiển thị nhãn cho trường dữ liệu “Mật khẩu hiện tại”, ô nhập dữ liệu

Label+Input Hiển thị nhãn cho trường dữ liệu “Mật khẩu mới”, ô nhập dữ liệu

8 Khung xác nhận mật khẩu mới

Label+Input Hiển thị nhãn cho trường dữ liệu “Xác nhận mật khẩu”, ô nhập dữ liệu

9 Nút hủy Button Nút “Huỷ” bấm để huỷ thay đổi

10 Nút cập nhật Button Nút “Cập nhật”, bấm để xác nhận cập nhật dữ liệu

Cập nhật thành công, hiển thị thông báo

“Cập nhật hồ sơ thành công” và quay về trang chủ

Cập nhật thất bại, hiển thị thông báo lỗi

Hình 54 Giao diện trang chủ [1]

Hình 57 Giao diện Navigation Bar Bảng 64 Mô tả giao diện trang chủ

1 Logo Logo Nhập từ khóa tìm kiếm

2 Navbar Navbar Chọn trạng thái tìm kiếm

4 Thông tin user div Thông tin user

5 Vùng hiển thị thống kê div Vùng hiển thị thống kê

Biểu đồ doanh thu 7 ngày gần nhất

Chart Biểu đồ doanh thu 7 ngày gần nhất

7 Biểu đồ tỉ lệ đặt chuyến Chart

Biểu đồ tỉ lệ đặt chuyến

Bảng hiển thị danh sách tài xế có doanh thu cao nhất

Bảng hiển thị danh sách tài xế tỉ lệ hoạt động cao nhất

10 Tiêu đề của bảng div Tiêu đề của bảng

11 Danh sách nội dung của bảng div Danh sách nội dung của bảng

12 Footer footer Footer của web CMS

Menu cha, khi bấm xổ ra các content con bên dưới

Menu cha, khi bấm xổ ra các content con bên dưới.

Content con, khi bấm, chuyển sang trang quản lý nội dung tương ứng, content con được chọn sẽ chuyển sang màu xanh

15 Label hiển thị tên, hình ảnh Label

Label hiển thị tên, hình ảnh của tài khoản được đăng nhập vào, hover

101 hiển thị các tùy chọn bên trong

Nút “Hồ sơ”, khi bấm chuyển sang trang quản lý thông tin cá nhân

Nút “Đăng xuất”, khi bấm đăng xuất khỏi hệ thống

3.4.4.4 Giao diện quản lý nội dung

Hình 58 Giao diện quản lý nội dung Bảng 65 Mô tả giao diện nội dung

1 Breadcrumbs Breadcrumbs Breadcrumbs, hiển thị cấp của trang được quản lý

SearchBar Mục tìm kiếm nội dung dựa theo các

3 “Keyword” dùng để tìm kiếm nội dung

“Keyword” dùng để tìm kiếm nội dung

4 Nút tìm kiếm với nội dung cung cấp ở mục 3

Button Nút tìm kiếm với nội dung cung cấp ở mục 3

5 Nút xóa nội dung tìm kiếm làm mới trang

Button Nút xóa nội dung tìm kiếm làm mới trang

6 Nút tạo mới Button Tạo mới nội dung, khi bấm chuyển sang trang “Tạo mới”

7 Bảng hiển thị nội dung được quản lý

Table Bảng hiển thị nội dung được quản lý

8 Cột thao tác Action column Cột thao tác, tuỳ loại nội dung và quyền hạn user, sẽ xuất hiện các loại thao tác khác nhau

9 Nút hủy Button Nút “Huỷ” bấm để huỷ thay đổi

10 Nút xem danh sách dịch vụ

Button Nút xem danh sách dịch vụ của tài xế, khi bấm chuyển sang trang “Dịch vụ tài xế”

11 Nút xem danh sách phương tiện

Button Nút xem danh sách phương tiện của tài xế, khi bấm chuyển sang trang “Phương tiện của tài xế”

12 Nút chỉnh sửa Button Nút chỉnh sửa nội dung, khi bấm chuyển sang trang chỉnh sửa

13 Nút xóa Button Nút xóa nội dung, khi bấm xóa nội dung được chỉ định, hiện bảng thông báo xác nhận

14 Chuyển trang Button Dùng để phân trang, khi bấm chuyển sang trang được chỉ định

3.4.4.5 Giao diện thông tin chi tiết

Hình 59 Giao diện xem thông tin chi tiết và điều chỉnh thông tin Bảng 66 Giao diện xem thông tin chi tiết và điều chỉnh thông tin

UploadImage Ô hiển thị hình ảnh và upload thay đổi hình ảnh

2 Khung chứa các thông tin

Card Khung chứa các thông tin liên quan với nhau

3 Khung tên Label-Input Hiển thị label và nội dung trường “Họ và tên”

Label+Input Hiển thị label và nội dung trường “Số điện thoại”

Label+Input Hiển thị label và nội dung trường “Mật khẩu”

Hiển thị, tuỳ chỉnh nội dung của trường “Trạng thái"

Hiển thị, tuỳ chỉnh nội dung của trường

Label-Input Hiển thị label và nội dung trường “Địa chỉ”

Label-Input Hiển thị label và nội dung trường “Số căn cước”

12 Nơi cấp Label-Input Hiển thị label và nội dung trường “Nơi cấp”

13 Ngày cấp InputDate Hiển thị label và nội dung trường “Ngày cấp”

Hiển thị ngày tháng, khi click, hiện ra bảng lịch chọn ngày tháng năm

Label-Input Hiển thị label và nội dung trường “Số tài khoản”

Label-Input Hiển thị label và nội dung trường “Tên chủ thẻ”

Label-Input Hiển thị label và nội dung trường “Tên ngân hàng”

Label-Input Hiển thị label và nội dung trường “Tên chi nhánh”

18 Nút “Huỷ” Button Nút “Huỷ” huỷ bỏ thay đổi quay lại giao diện quản lý danh sách

Button Nút “Cập nhật” khi nhấn sẽ cập nhật lại dữ liệu và quay lại trang quản lý danh sách

3.4.4.6 Chi tiết các giao diện CMS

Hình 60 QR chi tiết giao diện CMS Đường dẫn: https://docs.google.com/document/d/1hVfwBle46G-cnM3xuLz- wSl_3Ef7Pk7pMZhhp4UTEpI/edit

CÀI ĐẶT VÀ KIỂM THỬ

Cài đặt ứng dụng

4.1.1 Cài đặt công cụ Để có thể chạy được ứng dụng, máy tính phải đảm bảo các yêu cầu sau:

- Cài đặt IDE: Visual Studio Code, IntelliJ

Bước 2 Truy cập Command Prompt và chạy lệnh cài đặt RabbitMQ như sau: docker run -it name rabbitmq -p 5672:5672 -p 15672:15672 rabbitmq:3.12- management

Bước 3 Truy cập RabbitMQ Management với tài khoản mặc định

Hình 61 Giao diện đăng nhập RabbitMQ Management

Bước 4 Truy cập vào trang quản lý User của RabbitMQ tạo tài khoản Admin với thông tin username: admin và password: admin@2o23.hcm http://localhost:15672/#/users

Hình 62 Giao diện trang quản lý User của RabbitMQ

Backend được cấu hình bằng Liquibase, do đó không cần cấu hình bắt kỳ một bảng nào trong dữ liệu Cơ sở dữ liệu đang được sử dụng là MySQL => Trên máy cần được cài đặt MySQL và có một phầm mềm hệ quản trị cơ sở dữ liệu hỗ trợ MySQL

Sau khi chuẩn bị đầy đủ mọi thứ, ta chỉ cần tạo một database có tên là db_ww_service để thực hiện cấu hình cho Backend

Hình 63 Tạo database trong MySQL

Máy tính thực hiện chạy code phải đảm bảo đã được cài đặt Java:

Bước 1: Truy cập file source/src/main/resources application-dev.properties

Hình 64 Cấu trúc backend service

Bước 2: Thay đổi một số thông tin bên trong file application- dev.properties

Hình 65 Cấu hình kết nối đến MySQL

Hình 66 Cấu hình kết nối đến RabbitMQ Bảng 67 Mô tả thuộc tính cấu hình kết nối đến MySQL, RabbitMQ

Thuộc tính Định nghĩa giá trị spring.datasource.url Đường dẫn đến đến cơ sở dữ liệu đã được tạo bên trên spring.datasource.username Tên tài khoản được cấu hình trong MySQL spring.datasource.password Tên mật khẩu được cấu hình trong MySQL spring.rabbitmq.host Host của RabbitMQ đã được cấu hình Nếu RabbitMQ chạy trên máy thì sẽ là locahost spring.rabbitmq.port Port của RabbitMQ đã cấu hình Thông thường sẽ là

5672 spring.rabbitmq.username Tên tài khoản đã được đăng ký với quyền admin trong hệ thống RabbitMQ spring.rabbitmq.password Mật khẩu tương ứng với tên tài khoản ở spring.rabbitmq.username

Bước 1: Truy cập file configuration.properties

Hình 67 Cấu trúc backend socket

Bước 2: Thay đổi một số thông tin bên trong file configuration.properties

Hình 68 Cấu hình kết nối đến RabbitMQ Bảng 68 Mô tả thuộc tính cấu hình kết nối đến RabbitMQ

Thuộc tính Định nghĩa giá trị queue.ip Host của RabbitMQ đã được cấu hình Nếu RabbitMQ chạy trên máy thì sẽ là locahost queue.port Port của RabbitMQ đã cấu hình Thông thường sẽ là 5672 queue.username Tên tài khoản đã được đăng ký với quyền admin trong hệ thống

113 queue.password Mật khẩu tương ứng với tên tài khoản ở spring.rabbitmq.username

Máy tính phải đảm bảo đã được cài đặt Android Studio và Cài đặt điện thoại ảo hoặc kết nói với android Sau đó bấm nút run

Hình 69 Chạy source ứng dụng

Máy tính phải đảm bảo đã được cài đặt Nodejs để chạy được React

Bước 1: Di chuyển đến folder source bằng lệnh cd \source\

Bước 2: Dùng lệnh npm install để cài đặt tất cả thư viện được sử dụng

Hình 70 Cài đặt thư viện source meta-cms

Bước 3: Sau khi đã cài đặt toàn bộ thư viện thì dùng lệnh npm start để khởi chạy sever

Hình 71 Chạy chương trình source meta-cms

Sau khi đã khởi chạy sever thì sever sẽ được chạy ở http://localhost:3000

Bước 1: Di chuyển đến folder source bằng lệnh cd \source\

Bước 2: Dùng lệnh npm install để cài đặt tất cả thư viện được sử dụng

Hình 72 Cài đặt thư viện source booking-cms

Bước 3: Sau khi đã cài đặt toàn bộ thư viện thì dùng lệnh npm start để khởi chạy sever

Hình 73 Chạy chương trình sourece booking-cms

Sau khi đã khởi chạy sever thì sever sẽ được chạy ở http://localhost:3000

Truy cập vào trang quản lý đường dẫn sau: https://ww-meta.developteam.net/admins https://ww-cms-ship.developteam.net/booking

Truy cập tải app tại: https://drive.google.com/drive/folders/1RC0vnZQxMOTdkH2j7eOcGzQaZoIaRRo2?usp=sharing

Các loại kiểm thử được sử dụng để kiểm thử dự án:

- Integration test: kết hợp các module của ứng dụng và kiểm thử như một ứng dụng hoàn chỉnh

- Unit test: kiểm thử từng phương thức trong các lớp

- System test: kiểm thử xem thiết kế và toàn bộ hệ thống (sau khi tích hợp) có thỏa mãn yêu cầu đặt ra hay không

- Usability test: xác minh ứng dụng có khả năng ứng dụng cao và dễ sử dụng, giao diện thân thiện với người dùng

Dự án sẽ sử dụng các thành viên trong nhóm làm tester Quá trình kiểm thử sẽ bắt đầu khi tất cả các điều sau được thỏa mãn:

- Phần mềm đã sẵn sàng để kiểm thử

- Đặc tả kiểm thử được xác định

- Môi trường kiểm thử được xây dựng

- Đủ nhân lực cho quá trình kiểm thử

4.3.2 Mục tiêu kiểm thử Đảm bảo các chức năng của ứng dụng (được xác định trong đặc tả dự án) hoạt động chính xác trong điều kiện thực tế

Các tiêu chí kiểm thử bao gồm:

- Tiêu chí đình chỉ: nếu có ít nhất 40% số test case bị lỗi, tạm dừng việc kiểm thử đến khi tất cả các lỗi hiện tại được khắc phục

- Tiêu chí kết thúc: chỉ định các tiêu chí biểu thị việc hoàn thành thành công giai đoạn kiểm thử

● Tỷ lệ chạy test case bắt buộc phải là 100% trừ khi có lý do rõ ràng

● Tỷ lệ vượt qua các test case là 80%, việc đạt tỉ lệ này là bắt buộc

Quy trình kiểm thử gồm 6 bước như sau:

1 Requirement Analysis (phân tích yêu cầu): nghiên cứu, phân tích yêu cầu dự án

2 Test Planning (lập kế hoạch kiểm thử):

- Xác định phạm vi dự án

- Xác định phương pháp tiếp cận

- Lên kế hoạch thiết kế công việc kiểm thử

3 Test Case Development (thiết kế test case):

- Chuẩn bị dữ liệu kiểm thử

4 Test Environment Setup (Thiết lập môi trường kiểm thử): thiết lập và kiểm tra môi trường kiểm thử

5 Test Execution (tiến hành kiểm thử):

- Thực hiện kiểm thử phần mềm

- So sánh với kết quả mong đợi và báo cáo các lỗi xảy ra lên công cụ quản lý lỗi

- Thực hiện re-test để xác định các lỗi đã được sửa và regression test khi có sự thay đổi liên quan

- Đo và phân tích tiến độ

- Điều chỉnh, sửa chữa tài liệu tiến độ dự án theo tình hình thực tế

6 Test Cycle Closure (đóng chu trình kiểm thử):

- Tổng kết, báo cáo kết quả về việc thực thi test case

- Đánh giá các tiêu chí hoàn thành như phạm vi kiểm tra, chất lượng…

- Thảo luận và rút ra bài học kinh nghiệm

Nắm vững các công nghệ quan trọng trong dự án như Android, Java, Sring Boot, JWT, MySQL, Hibernate, WebSocket, Web Server, ReactJS, ReDux, Đặc biệt, có khả năng áp dụng hiểu quả chúng vào các tình huống thực tế, bao gồm hiểu rõ nguyên lý hoạt động, cấu trúc và cách triển khai, cũng như tối ưu hoá và tính hợp vào trong hệ thống

Tăng cường kỹ năng làm việc nhóm: Luôn chủ động tham gia vào các hoạt động nhóm, hỗ trợ và phối hợp cùng đồng đội để đạt được mục tiêu chung Giao tiếp hiệu quả, lắng nghe ý kiến của đồng đội và linh hoạt trong việc giải quyết vấn đề bất đồng quan điểm

Cải thiện khả năng giải quyết vấn đề: Nâng cao kỹ năng phân tích và đưa ra các giải pháp hiệu quả cho những vấn đề gặp phải trong lúc làm việc Luôn chủ động tìm kiếm và áp dụng các phương pháp sáng tạo để vượt qua các vấn đề khó khăn trong công việc

Nâng cao khả năng giao tiếp: Rèn luyện khả năng diễn đạt ý tưởng một cách rõ ràng và thuyết phục Lắng nghe một cách chân thành và phản hồi một cách xây dựng để tạo nên môi trường làm việc hoà đồng và hiệu quả

2 ƯU ĐIỂM VÀ NHƯỢC ĐIỂM

- Giao diện đơn giản dễ sử dụng phù hợp với tất cả mọi người

- Cung cấp đầy đủ các chức năng cơ bản cho một ứng dụng đặt giao hàng thông minh

- Có sử dụng xác thực và uỷ quyền để tăng chức năng bảo mật cho hệ thống

- Hệ thống hoạt động ổn định

- Các ô input dữ liệu chửa xử lý hết validate kiểu dữ liệu và kích cơ dữ liệu

- Một số vùng image chưa xử hiện tượng đường dẫn bị lỗi hoặc không tìm thấy đương dẫn ảnh

- Vì thời gian hạn chế của khóa luận nên không thể làm đầy đủ nhất các tính

- Trong tương lai, nhóm thực hiện sẽ phát triển ứng dụng theo các hướng:

- Tích hợp tính năng gọi điện trực tuyến, cung cấp trải nghiệm trò truyện video mượt mà và chất lượng cao

- Cho phép người dùng gửi ảnh trong trò truyện, tạo ra một giao diện trò chuyện đa phương tiện và sinh động

- Bảo mật thông tin và dữ liệu cá nhân trong quá trình gửi ảnh và trò truyện

- Nâng cao tính ổn định và tốc độ của hệ thống chat realtime để đảm bảo trải nghiệm người dùng tốt nhất

- Tăng cường hiệu năng của ứng dụng để xử lý số lượng người dùng đồng thời lớn hơn.

KẾT QUẢ ĐẠT ĐƯỢC