4.1.4.1 Yêu cầu điều động xe
- Xây dựng chức năng tạo yêu cầu điều động, gợi ý vị trí điều động dựa trên thông tin nhập vào.
- Xây dựng chức năng xuất báo cáo, cho phép xuất file excel theo thời gian và xe.
4.1.4.2 Báo cáo
- Xây dựng chức năng xuất file báo báo chi tiết. - Xây dựng chức năng báo cáo chi phí
4.2Xây dựng hệ thống quản lý phương tiện vận tải:
Qua việc tìm hiểu và nghiên cứu các bộ thư viện, framework hỗ trợ xây dựng Website, nhóm quyết định lựa chọn Angular kết hợp với Asp.net core làm nền tảng xây dựng Website.
Angular cung cấp một cấu trúc rõ ràng để xây dựng từng tính năng cho ứng dụng của bạn. Các dependency mạnh mẽ được sử dụng trong ứng dụng khi cần thiết, và khi cần tích hợp bất kì dependency nào, như HTTP hay Router, chúng ta chỉ cần thêm nó vào bên trong constructor của class.
51
Mô hình MVVM cũng giúp Angular chiếm lợi thế trong xây dựng ứng dụng client-side, thường ta sẽ có 3 điều cần quan tâm chính: đó là giao diện người dùng, mã nguồn điều khiển giao diện và mô hình dữ liệu (data) cho giao diện.
Angular được viết bằng Typescript trên nền tảng Javascript nên nếu đã biết về JS thì tiếp cận với Angular rất dễ dàng. Project Angular của framework tích hợp sẵn thư viện Primeface để viết Html nhanh hơn.
Angular với MVVM phân biệt hoàn toàn rõ ràng các yếu tố trên nhờ mô hình MVVM:
● Phần giao diện (view) được định nghĩa trong một template bao hàm html dành cho một component nhất định. Template có thể là toàn bộ Layout hoặc bất cứ mảnh ghép nào trong Layout đó.
● Model được định nghĩa như là các thuộc tính của component class. Có thể hiểu là dữ liệu, dựa vào đó để phần View sử dụng để thực thi.
● View/model là class quản lý cả view cũng như model. Là phần code sẽ xử lý việc truy xuất dữ liệu, đồng thời thực thi các tương tác của người dùng trên view.
Với việc ứng dụng các điểm tích cực của các thành phần trên, Angular khiến việc phát triển ứng dụng trở nên dễ dàng và hiệu quả hơn.
Sơ đồ hoạt động của Asp.net core và Angular
52
Một project Angular sẽ được thiết kế để có thể triển khai một cách riêng biệt so với phần backend của Asp.net core, khi được triển khai đây thực sự là một ứng dụng HTML+CSS đơn giản có thể phục vụ trên mọi hệ điều hành và mọi máy chủ web.
Angular Solution
Hình 4.2 Sơ đồ Angular solution
Root chịu trách nhiệm Bootstrap ứng dụng.
- AccountModule cung cấp các phương thức đăng nhập, đăng ký, xác thực hai yếu tố, quên mật khẩu…
- AppModule chứa hai thành phần con Main và Admin trong đó:
● AdminModule: chứa các thành phần phục vụ quản trị website như Người dùng, quyền, đa ngôn ngữ, cài đặt…
● MainModule: là nơi chứa các component phát triển ứng dụng
4.3Thiết kế hệ thống:
4.3.1 Thiết kế Cơ sở dữ liệu cho hệ thống:
Bởi hệ thống sẽ xây dựng theo kiến trục Multitenancy chính vì vậy các bảng dữ liệu trong hệ thống đều có trường Tenant_Id, trường dữ liệu này sẽ giúp chúng ta dễ dàng quản lý dữ liệu đối với các tenant khác nhau.
Danh sách các ý nghĩa các tiền tố của các phân hệ trong CSDL:
STT Tiền tố Ý nghĩa Ghi chú
1 DM_ Phân hệ các trường danh mục chung 2 SYS_ Các bảng liên quan đến hệ thống
53
Danh sách các bảng dữ liệu trong hệ thống quản trị:
STT Tên bảng Ý nghĩa Ghi
chú 1 SYS_CarType Bảng lưu trữ thông tin các loại xe quản lý 2 SYS_CodeMasters Bảng lưu trữ thông tin các trường khởi tạo ID tự động
3 SYS_Prefix Lưu trữ các tiền
tố của ID của các bảng để phát sinh tự động
4 SYS_Schedule Bảng lưu trữ
thông tin thời gian sử dụng xe
5 SYS_WorkHour Bảng lưu trữ
thông tin giờ làm việc hành chính của xe 6 DM_Booking Bảng lưu trữ thông tin đặt xe của user 7 DM_Car Bảng lưu trữ thông tin xe
54
8 DM_Holiday Bảng lưu trữ
thông tin ngày lễ 9 DM_MileageHistory Bảng lưu trữ các thông tin số kilometres đầu cuối của xe 10 DM_Vendor Bảng lưu trữ
thông tin danh mục nhà cung cấp xe
Bảng 5 Danh sách các bảng dữ liệu của các phân hệ
4.3.2 Mô hình thiết kế cơ sở dữ liệu
55
4.3.3 Mô tả chi tết cơ sở dữ liệu
AbpTenants
Giá trị Kiểu dữ liệu Mô tả
Id INT Khóa chính
CreationTime DATETIME2 Ngày tạo
CreatorUserId BIGINT User tạo
DeleterUserId BIGINT User xóa
DeletionTime DATETIME2 Thời gian xóa
IsActive BIT Trạng thoái hoạt động
IsDeleted BIT Trạng thái xóa
LastModificationTime DATETIME2 Thời gian chỉnh sửa cuối LastModifierUserId BIGINT User chỉnh sửa cuối
Name NVARCHAR Tên hiển thị Tenant
TenancyName NVARCHAR Tên Tenant
Bảng 6 Bảng thông tin tenant AbpUsers
Giá trị Kiểu dữ liệu Mô tả
Id BIGINT ID User
CreationTime DATETIME2 Thời gian tạo User
CreatorUserId BIGINT ID User tạo
DeleterUserId BIGINT ID User xóa
DeletionTime DATETIME2 Thời gian xóa
EmailAddress NVARCHAR Địa chỉ Email
56
isDeleted BIT Trạng thái xóa của User
LastModificationTime DATETIME2 Thời gian chỉnh sửa lần cuối LockoutEndDateUtc DATETIME2 Thời gian User bị khóa
Name NVARCHAR Tên User
Password NVARCHAR Mật khẩu User
PhoneNumber NVARCHAR Số điện thoại User
Sumname NVARCHAR Họ User
TenantId BIGINT Id Tenant của User
UserName NVARCHAR Tên đăng nhập User
Bảng 7 Bảng thông tin người dùng
AbpRoles
Giá trị Kiểu dữ liệu Mô tả
Id BIGINT ID định danh của nhóm quyền
CreationTime DATETIME2 Thời gian tạo nhóm quyền
CreatorUserId BIGINT ID User tạo nhóm quyền
DeletionTime DATETIME2 Thời gian xóa nhóm quyền DisplayName NVARCHAR Tên nhóm quyền hiển thị
isDeleted BIT Trạng thái xóa của nhóm quyền
LastModificationTime DATETIME2
Thời gian chỉnh sửa lần cuối của nhóm quyền
LastModifierUserId BIGINT
ID User chỉnh sửa lần cuối của nhóm quyền
TenantId BIGINT ID Tenant của nhóm quyền
57
AbpUserRoles
Giá trị Kiểu dữ liệu Mô tả
Id BIGINT ID định danh quyền và người dùng
CreatorUserId BIGINT ID người dùng tạo quyền
RoleId BIGINT ID nhóm quyền
TenantId BIGINT ID Tenant
UserId BIGINT ID định danh của người dùng
Bảng 9 Bảng quyền người dùng AbpLanguages
Giá trị Kiểu dữ liệu Mô tả
Id INT ID định danh của ngôn ngữ
CreationTime DATETIME2 Thời gian tạo ngôn ngữ CreatorUserId DATETIME2 ID người dùng tạo ngôn ngữ DeleterUserId BIGINT ID người dùng xóa ngôn ngữ DeletionTime DATETIME2 Thời gian xóa ngôn ngữ DisplayName NVARCHAR Tên ngôn ngữ hiển thị
Icon NVARCHAR Hình ảnh Icon hiển thị
IsDeleted BIT Trạng thái xóa của ngôn ngữ
LastModificationTime DATETIME2 Thời gian chỉnh sửa lần cuối ngôn ngữ LastModifierUserId BIGINT ID user chỉnh sửa ngôn ngữ lần cuối
Name NVARCHAR Tên ngôn ngữ
TenantId INT ID Tenant sử dụng ngôn ngữ
IsDisabled BIT
Trạng thái không hoạt động của ngôn ngữ
58
AbpLanguageTexts
Giá trị Kiểu dữ liệu Mô tả
Id BIGINT ID định danh văn bản ngôn ngữ
CreationTime DATETIME2 Thời gian tạo văn bản của ngôn ngữ CreatorUserId BIGINT ID người dùng tạo văn bản ngôn ngữ
[Key] NVARCHAR Từ khóa văn bản ngôn ngữ
LanguageName NVARCHAR Tên loại ngôn ngữ
LastModificationTime DATETIME2 Thời gian chỉnh sửa lần cuối LastModifierUserId BIGINT ID người dùng chỉnh sửa lần cuối
TenantId INT ID Tenant sử dụng văn bản ngôn ngữ
Value NVARCHAR Giá trị thể hiện của ngôn ngữ
Bảng 11 Bảng văn bản ngôn ngữ
DM_Car
Giá trị Kiểu dữ liệu Mô tả
Id NVARCHAR ID định danh xe
TenantId INT ID Tenant sử dụng xe
CarName NVARCHAR Tên xe
DriverId BIGINT ID tài xế sử dụng xe
CarPlate NVARCHAR Biển số xe
MileagePerMonth BIGINT Số kilometres xe chạy hàng tháng
Basicfee BIGINT Phí cơ bản của xe
OverTimeFee BIGINT Phí xe chạy ngoài giờ làm việc
59
OverMileageFee BIGINT
Phí xe khi chạy vượt số kilometes hàng tháng
OverNightFee BIGINT Phí qua khi xe chạy qua đêm CreationTime DATETIME2 Thời gian tạo xe
CreatorUserId BIGINT ID người dùng tạo xe
LastModificationTime DATETIME2
Thời gian lần cuối chỉnh sửa thông tin xe
LastModifierUserId BIGINT
ID người dùng lần cuối chỉnh sửa thông tin xe
IsDeleted BIT Trạng thái xóa của xe
DeleterUserId BIGINT ID người dùng xóa xe
DeletionTime DATETIME2 Thời gian xóa xe
MainUserId BIGINT ID người dùng chính của xe
VendorId BIGINT ID nhà cung cấp xe
CarTypeId BIGINT ID loại xe
WorkHourId BIGINT ID loại thời gian hoạt động của xe
IsActive BIT Trạng thái hoạt động của xe
UserId NVARCHAR
Danh sách người dùng được phép điều động xe
Bảng 12 Bảng thông tin xe
DM_Vendor
Giá trị Kiểu dữ liệu Mô tả
Id NVARCHAR ID định danh nhà cung cấp xe
60
VendorName NVARCHAR Tên nhà cung cấp xe
Address NVARCHAR Địa chỉ nhà cung cấp xe
Introduction NVARCHAR Mô tả về nhà cung cấp xe CreationTime DATETIME2 Thời gian tạo nhà cung cấp xe CreatorUserId DATETIME2 ID người dùng tạo nhà cung cấp xe
Bảng 13 Bảng thông tin nhà cung cấp xe SYS_WorkHour
Giá trị Kiểu dữ liệu Mô tả
Id BIGINT ID loại giờ làm việc của xe
StartTime TIME Thời gian bắt đầu làm việc trong ngày
EndTime TIME Thời gian kết thúc làm việc trong ngày
Bảng 14 Bảng thông tin thời gian làm việc trong hệ thống SYS_CarType
Giá trị Kiểu dữ liệu Mô tả
Id BIGINT ID loại xe theo ngày làm việc
WorkingDay NVARCHAR Ngày làm việc của xe
MaxDayOfTheMonth INT Số ngày làm việc trong tháng
DayOff NVARCHAR Ngày nghỉ trong tuần
Bảng 15 Bảng thông tin giờ làm việc của xe
DM_Booking
Giá trị Kiểu dữ liệu Mô tả
Id NVARCHAR ID định danh phiếu điều động xe
TenantId INT ID Tenant phiếu điều động xe
61
CreationTime DATETIME2 Thời gian tạo phiếu điều động xe CreatorUserId BIGINT ID người dùng tạo phiếu điều động xe
IsDeleted BIT Trạng thái xóa của phiếu điều động
DeleterUserId BIGINT ID người dùng xóa phiếu điều động DeletionTime DATETIME2 Thời gian xóa phiếu điều động VehicleUserId BIGINT ID người dùng sử dụng xe
Usage NVARCHAR Mục đích sử dụng xe
NumberOfNights INT Số lần qua đêm
DropOffId NVARCHAR ID vị trí đón
PickUpId NVARCHAR ID vị trí trả khách
Bảng 16 Bảng thông tin điều đồng động xe AD_Location
Giá trị Kiểu dữ liệu Mô tả
ID NVARCHAR ID vị trí
x REAL Vĩ độ của vị trí
y REAL Kinh độ của vị trí
Label NVARCHAR Mô tả vị trí
Bảng 17 Bảng thông tin vị trí xe SYS_Schedule
Giá trị Kiểu dữ liệu Mô tả
StartDate DATETIME2 Thời gian đón khách
EndDate DATETIME2 Thời gian trả khách
BookingId NVARCHAR ID phiếu điều động
62
AD_DetailedSchedule
Giá trị Kiểu dữ liệu Mô tả
Id INT ID chi tiết phiếu điều động
BookingId NVARCHAR ID phiếu điều động
StartTime DATETIME2 Thời gian tài xế khởi hành
EndTime DATETIME2 Thời gian tài xế đến nơi
Note NVARCHAR Ghi chú
Bảng 19 Bảng chi tiết phiếu điều động xe
AD_TripInformation
Giá trị Kiểu dữ liệu Mô tả
OriginalMileage BIGINT Số kilometres tài xế nhập lúc khởi hành AfterJourneyMileage BIGINT Số kilometres tài xế nhập lúc trả khách
StartDate DATIME2 Thời gian tài xế đón khách
EndDate DATIME2 Thời gian tài xế trả khách
TollAndParkingFee BIGINT Phí đỗ xe
Note NVARCHAR Ghi chú
TripInformationId NVARCHAR ID phiếu điều động
NumberOfNights INT Số lần chạy qua đêm
TotalMileage BIGINT Tổng số kilometres theo dữ liệu tài xế
TotalMileageByMap BIGINT
Tổng số kilometres theo dữ liệu từ hộp đen
63 DM_Holiday
Giá trị Kiểu dữ liệu Mô tả
Id NVARCHAR ID định danh ngày lễ
TenantId INT ID Tenant áp dụng ngày lễ
HolidayName NVARCHAR Tên ngày lễ
StartDayOff DATETIME2 Thời gian bắt đầu ngày lễ EndDayOff DATETIME2 Thời gian bắt đầu ngày lễ CreatorUserId BIGINT ID người dùng tạo ngày lễ CreationTime DATETIME2 Thời gian tạo ngày lễ
IsDeleted BIT Thời gian xóa ngày lễ
DeleterUserId BIGINT ID người dùng xóa ngày lễ HolidayDescription NVARCHAR Mô tả về ngày lễ
Bảng 21 Bảng thông tin ngày lễ 4.4Hiện thực các chức năng trên Framework đã xây dựng: 4.4.1 Tổng quan hệ thống:
Các chức năng của từng phân hệ sẽ được xây dựng trên nền tảng Framework đã xây dựng. Kiến trúc chương trình của hệ thống sẽ được xây dựng như sau:
- Các Module chức năng trên giao diện: Các module giao diện ứng với từng phân hệ trong hệ thống quản trị
- Web API: Chứa các Controller xử lý nghiệp vụ với từng phân hệ, các lớp ánh xạ dữ liệu trong Views và ViewModels giữa giao diện quản trị và Cơ sở dữ liệu
- Cơ sở dữ liệu: Chứa các bảng lưu dữ liệu của các phân hệ đã phân tích như trên
64
Hình 4.4 Kiến trúc chương trình cho hệ thống quản trị các Tenant 4.4.2 Xây dựng Framework chuẩn cho hệ thống:
4.4.2.1 Áp dụng .Net Core và Design Pattern vào Framework Back-end của hệ thống thống
Sử dụng Framework Net core là 1 framework mã nguồn mở được Microsoft phát triển nhằm giúp xây dựng các ứng dụng chạy đa nền tảng. Với các tính năng nổi bật: Phát triển theo kiến trúc Module, dễ dàng tích hợp thêm các library mới theo cơ chế Dependency Injection (cài đặt thông qua NuGet), có thể Deploy ứng dụng trên nhiều nền tảng khác nhau (Windows, Linux, MacOS, …) và được support bởi Microsoft và cả cộng đồng mã nguồn mở…
65
Kiến trúc phần core xử lý backend của dự án được xây dựng theo sự kết hợp của mô hình 3 lớp, client server kết hợp với MVC. Toàn bộ logic sẽ được đẩy vào mô hình 3 lớp. Mục đích là tái sử dụng được code phía server.
Hình 4.5 Kiến trúc core Back-end
Chi tiết như sau:
Thành phần Diễn giải
Project.Model Chứa các lớp Doman Entities của dự án (tất cả các
thực thể)
Project.Data
Chứa tầng truy cập dữ liệu sử dụng Entity
Framework Code First. Sử dụng kết hợp giữa entity framework và store procedure để tăng hiệu suất và dễ bảo trì ứng dụng
Project.Common Chứa tiện ích dùng chung cho hệ thống
Project.Service Chứa Service xử lý Business logic
66
API N-LAYER
Hình 4.6 Kiến trúc N-LAYER trong xây dựng API
Sử dụng các design pattern như Repository, Dependency Injection. Ngoài ra còn sử dụng Asp.net Identity giúp hỗ trợ xác thực người dùng, Auto mapper giúp mapping dữ liệu, Web API tạo Restful API để có thể dễ dàng triển khai phiên bản cho di động. Repository là một lớp trung gian giữa tầng truy xuất dữ liệu và tầng business. Trong project sử dụng Entity Framework với ASP.NET Core thì Data chính là tầng chứa các lớp DbContext và class entity. Còn business logic chính là tầng xử lý nghiệp vụ của dự án. Sử dụng repository giúp ta có được kiến trúc linh hoạt hơn, việc unit test trở nên dễ dàng hơn, dễ bảo trì code và tập trung hóa được các logic về xử lý dữ liệu hoặc business logic.
Vấn đề được đặt ra là dự án đòi hỏi một cách tốt nhất để tạo ra tất cả các repository logic ở cùng một nơi. Việc thao tác với toàn bộ các class entity, chúng ta cần tạo 1 và chỉ 1 repository. Vậy để giải quyết điều này chúng ta phải sử dụng Generic Repository Pattern với những lợi ích như: Đảm bảo các lập trình viên dùng chung 1 mẫu (pattern)
67
làm tăng tính thống nhất và ít xảy ra lỗi hơn. Hơn thế nữa Generic còn giúp giảm thiểu sự trùng lặp code và dễ dàng bảo trì sau này
Hình 4.7 Mô hình Reposistory Pattern [7] Đăng nhập quản trị người dùng với ASP.NET Identity:
- Tạo ra cơ chế đăng nhập khi đăng nhập thành công sẽ tạo ra 1 token gửi về cho client Angular
- Mỗi request gửi lên phải kèm theo token này vào header của request. Ta sử dụng localStorageModule để lưu trữ token này khi logout sẽ xóa token này đi. Nếu không có token xem như user chưa đăng nhập
68
Ngoài ra, ta cần phải load menu theo role: Ở angular menu nhận vào 1 chuỗi json dạng gson. Ta sẽ kiểm tra user có những quyền nào và map object ở web api trả về tương ứng để có thể load được menu động
4.4.2.2Áp dụng Angular 11 vào xây dựng Framework Front-end:
Angular 11 là 1 framework phát triển trên nền JavaScript của Google, kế thừa các đặc điểm của AngularJS và phát triển một phương thức tiếp cận việc xây dựng ứng dụng hoàn toàn mới, phương pháp hướng Component. Với các điểm mạnh như là một framework đa nền tảng, tập trung hơn vào các ứng dụng di động (cải thiện