thiết kế hệ thống quản lý cửa hàng cho thuê xe ô tô theo kiến trúc microservices cho các chức năng: quản lý xe ô tô cho thuê, khách hàng đặt xe online , nhận trả xe và thanh toán từ khách hàng . Gồm thiết kế thực thể, thiết kế csdl, hoạt động của từng module, giao diện phía client, biểu đồ lớp chi tiết phía client+server, biểu đồ tuần tự phía client + server
HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG KHOA CƠNG NGHỆ THÔNG TIN - - BÁO CÁO TỔNG HỢP KIẾN TRÚC VÀ THIẾT KẾ PHẦN MỀM Hà Nội, 5/2023 LỜI CẢM ƠN Em xin gửi lời cảm ơn chân thành đến thầy Nguyễn Mạnh Hùng - giảng viên môn Kiến trúc thiết kế phần mềm, trường Học viện Cơng nghệ Bưu – Viễn thơng trang bị giúp em kỹ kiến thức cần thiết để hoàn thành tập lớn Tuy nhiên, trình làm tập lớn kiến thức chuyên ngành em hạn chế nên tránh khỏi vài thiếu sót trình bày đánh giá vấn đề Rất mong nhận góp ý, đánh giá thầy để đề tài em thêm hoàn thiện Em xin chân thành cảm ơn! MỤC LỤC I Thiết kế thực thể II Thiết kế sở liệu III Chức “Quản lý xe ô tô cho thuê” Hoạt động module 2 Giao diện phía client 3 Biểu đồ lớp chi tiết: a Client: Sử dụng ReactJS b Server: Sử dụng Express Biểu đồ tuần tự: a Client: b Server Chức “Khách hàng đặt xe online” 10 IV Hoạt động module 10 Giao diện bên client: 11 Biểu đồ lớp chi tiết: 13 a Client: sử dụng ReactJS 13 b Server: sử dụng Express 13 Biểu đồ tuần tự: 14 a Client: 14 b Server: 15 V Chức “Nhận trả xe toán từ khách hàng” 16 Hoạt động module 16 Giao diện bên client: 17 Biểu đồ lớp chi tiết: 18 a Client: sử dụng ReactJS 18 b Server: sử dụng Express 19 Biểu đồ tuần tự: 20 a Client: 20 b Server: 21 I Thiết kế thực thể - Các danh từ liên quan đến người: User, Staff, Customer + User: username, password, name, role, phoneNumber, address, email + Staff, Customer kế thừa User - Các danh từ liên quan đến vật: Car, CarBooking, PenaltyError + Car: name, price, feature, type, description + CarBooking: car, customer, rentalDate, returnDate, deposit, totalFee + PenaltyError: name, penaltyPrice + CarReturning: carBooking, Staff, penaltyError - Xác định quan hệ số lượng lớp thực thể: + Customer có nhiều CarBooking -> quan hệ 1-n + Car có nhiều CarBooking -> quan hệ 1-n + CarBooking có CarReturning -> quan hệ 1-1 + CarReturning có nheieuf PenaltyError -> quan hệ 1-n + Staff xử lý nhiều CarReturning -> quan hệ 1-n - Xác định quan hệ đối tượng lớp thực thể: + Staff, Customer kế thừa User + Customer thành phần CarBooking + CarBooking thành phần Car + PenaltyError thành phần CarReturning + Staff thành phần CarReturning - Thiết kế lớp thực thể: + Bổ sung id cho lớp không kế thừa từ lớp khác: User, CarBooking, Car, PenaltyError, CarReturning + Thuộc tính lớp bổ sung theo kiểu ngôn ngữ Javascript + Bổ sung thuộc tính thành phần quan hệ hợp thành/ gắn chặt ➔ Thực thể hệ thống: II Thiết kế sở liệu - Mỗi lớp thực thể đề xuất thành bảng - Bỏ qua thuộc tính kiểu đối tượng - Các thực thể quan hệ 1-n 1-1 giữ nguyên quan hệ - Khóa thiết lập với thuộc tính id bảng: tblUser, tblCarBooking, tblCar, tblPenaltyError, tblCarReturning III Chức “Quản lý xe ô tô cho thuê” Hoạt động module Nhân viên đăng nhập vào hệ thống, giao diện trang chủ phía client lên Nhân viên chọn button thêm xe, giao diện thêm xe lên Nhân viên nhập thông tin xe nhấn button Thêm xe gọi tới CarService.js - Lớp CarService.js gửi request thêm xe tới server thông qua http request - - Server nhận request thêm thông tin xe vào database trả lại response cho client - Phía client hiển thị thêm xe thành công - Nhân viên chọn button sửa xe, giao diện tìm kiếm xe lên - Nhân viên nhập từ khóa vào input nhấn button search gọi tới lớp CarService.js - Lớp CarService.js gửi request tới server - Server nhận request tìm kiếm thơng tin theo từ khóa trả cho client - Phía client hiển thị thơng tin tìm kiếm giao diện tìm kiếm xe + Nhân viên chọn sửa xe, gọi tới lớp CarService.js gửi request hiển thị thông tin xe theo id tới server • Server nhận request trả thơng tin xe theo id cho client • Client hiển thị thông tin xe giao diện cập nhật xe • Nhân viên cập nhật thơng tin nhấn Cập nhật, lớp CarService.js gửi request cập nhật xe tới server • Server nhận request cập nhật thông tin xe trả response thành công cho client • Client hiển thị cập nhật thành cơng + Nhân viên chọn xóa xe, gọi tới lớp CarService.js gửi request u cầu xóa xe • Server nhận request xóa xe database , trả response thành cơng cho phía client • Client hiển thị thơng báo xóa thành cơng cho nhân viên Giao diện phía client Đăng nhập Username: Password: Đăng nhập Trang chủ nhân viên Quản lý xe ô tô Quản lý xe ô tô Thêm ô tô Sửa ô tô Xóa ô tơ Trang chủ Thêm xe Tên xe Gía th Tính Loại xe Mơ tả Thêm xe Tìm kiếm Tìm kiếm Mã xe Tên xe Mơ tả Sửa (click để sửa) Xóa (click để xóa) Trở lại Sửa thơng tin xe Tên xe Toyota Gía thuê 10000000 Tính Xe chạy nhanh Loại xe Toyota Mô tả Cập nhật Biểu đồ lớp chi tiết: a Client: Sử dụng ReactJS - Tầng giao diện có trang: LoginView.js, HomeStaffView.js, ManagementView.js, AddCarView.js, SearchCarView.js, UpdateCarView.js - Tầng call api phía server: UserService.js, CarService.js - Tầng thực thể: User, Car b - Server: Sử dụng Express Tầng định danh url api: Server.js Tầng thao tác với sở liệu: UserController.js, CarController.js Tầng thực thể: User, Car Biểu đồ tuần tự: a Client: Tại giao diện đăng nhập, nhân viên đăng nhập vào hệ thống Lớp LoginView.js gọi hàm checkLogin() để yêu cầu đăng nhập Hàm checkLogin() gọi đến lớp UserService.js Lớp UserService.js gọi hàm fetchCheckLogin() để call api đến server kiểm tra đăng nhập Hàm fetchCheckLogin() trả kết đăng nhập cho lớp LoginView.js Đăng nhập thành công, lớp LoginView.js gọi lớp HomeStaffView.js Lớp HomeStaffView.js hiển thị cho nhân viên Nhân viên chọn quản lý xe Lớp HomeStaffView.js gọi lớp ManagementCarView.js 10.Lớp ManagementCarView.js hiển thị cho nhân viên 11.Nhân viên chọn thêm xe 12.Lớp ManagementCarView.js gọi lớp AddCarView.js 13.Lớp AddCarView.js hiển thị cho nhân viênn 14.Nhân viên nhập thông tin xe nhấn vào button Thêm xe 15.Lớp AddCarView.js gọi hàm addCar() yêu cầu thêm xe vào sở liệu 16.Hàm addCar() gọi lớp CarService.js 17.Lớp CarService.js gọi hàm fetchAddCar() để call api thêm xe vào sở liệu 18.Hàm fetchAddCar() trả kết cho lớp AddCarView.js 19.Lớp AddCarView.js trả kết cho lớp ManagementCarView.js 20.Lớp ManagementCarView.js hiển thị thêm xe thành công cho nhân viên 21.Nhân viên chọn cập nhật xe 22.Lớp ManagementCarView.js gọi lớp SearchCarView.js 23.Lớp SearchCarView.js hiển thị cho nhân viên 24.Nhân viên nhập từ khóa vào input nhấn nút tìm kiếm 25.Lớp SearchCarView.js gọi hàm searchCar() yêu cầu tìm kiếm 26.Lớp hàm searchCar() gọi lớp CarService.js 27.Lớp CarService.js gọi hàm fetchSearchCar() để call api tìm kiếm 28.Hàm fetchSearchCar() trả kết tìm kiếm cho lớp SearchCarView.js 29.Lớp SearchCarView.js hiển thị kết tìm kiếm cho nhân viên 30.Nhân viên chọn xe muốn chỉnh sửa thông tin 31.Lớp SearchCarView.js gọi lớp UpdateCarView.js 32.Lớp UpdateCarView.js hiển thị cho nhân viên 33.Nhân viên chỉnh sửa thông tin nhấn nút Chỉnh sửa 34.Lớp UpdateCarView.js gọi hàm updateCar() yêu cầu chỉnh sửa 35.Hàm updateCar() gọi lớp CarService.js 36.Lớp CarService.js gọi hàm fetchUpdateCar() call api chỉnh sửa 37.Hàm fetchUpdateCar() trả kết cho lớp UpdateCarView.js 38.Lớp UpdateCarView.js trả kết cho SearchCarView.js 39.Lớp SearchCarView.js hiển thị cập nhật thành công cho nhân viên 40.Nhân viên chọn xóa xe kết tìm kiếm 41.Lớp SearchCarView.js gọi hàm deleteCar() yêu cầu xóa thơng tin xe 42.Hàm deleteCar() gọi lớp CarService.js 43.Lớp CarService.js gọi hàm fetchDeleteCar() call api xóa thơng tin xe 44.Hàm fetchDeleteCar() trả kết cho lớp SearchCarView.js 45.Lớp SearchCarView() hiển thị xóa thành cơng cho nhân viên b Server Client gửi yêu cầu đăng nhập tới Lớp Server.js gọi lớp UserController.js Lớp UserController.js gọi lớp User Lớp User đóng goi thực thể User Lớp User trả kết cho lớp UserController.js Lớp UserController.js gọi hàm checkLogin() để kiểm tra đăng nhập Lớp UserController.js trả kết cho lớp Server.js Lớp Server.js trả kết cho client Client gửi yêu cầu tìm kiếm 10.Lớp Server.js gọi lớp CarController.js 11.Lớp CarController.js gọi hàm searchCar() để tìm kiếm thông tin xe 12.Lớp CarController.js gọi lớp Car 13.Lớp Car đóng gói thơng tin thực thể 14.Lớp Car trả kết cho lớp CarController.js 15.Lớp CarController.js trả kết cho lớp Server.js 16.Lớp Server.js trả kết cho client 17.Client gửi yêu cầu thêm thông tin xe 18.Lớp Server.js gọi lớp CarController.js 19.Lớp CarController.js gọi hàm addCar() để thêm thông tin xe 20.Lớp CarController.js gọi lớp Car 21.Lớp Car đóng gói thơng tin thực thể 22.Lớp Car trả kết cho lớp CarController.js 23.Lớp CarController.js trả kết cho lớp Server.js 24.Lớp Server.js trả kết cho client 25.Client gửi yêu cầu sửa thông tin xe 26.Lớp Server.js gọi lớp CarController.js 27.Lớp CarController.js gọi hàm updateCar() để sửa thông tin xe 28.Lớp CarController.js gọi lớp Car 29.Lớp Car đóng gói thơng tin thực thể 30.Lớp Car trả kết cho lớp CarController.js 31.Lớp CarController.js trả kết cho lớp Server.js 32.Lớp Server.js trả kết cho client 33.Client gửi u cầu xóa thơng tin xe 34.Lớp Server.js gọi lớp CarController.js 35.Lớp CarController.js gọi hàm deleteCar() để xóa thơng tin xe 36.Lớp CarController.js gọi lớp Car 37.Lớp Car đóng gói thơng tin thực thể 38.Lớp Car trả kết cho lớp CarController.js 39.Lớp CarController.js trả kết cho lớp Server.js 40.Lớp Server.js trả kết cho client IV Chức “Khách hàng đặt xe online” Hoạt động module - Khách hàng đăng nhập thành công vào hệ thống, giao diện trang chủ khách hàng - Khách hàng chọn đặt xe, giao diện tìm kiếm xe - Khách hàng chọn loại xe, giá xe nhấn tìm kiếm - Lớp CarService,js gửi yêu cầu tìm kiếm xe tới server 10 - Server nhận request, tìm kiếm sở liệu trả kết tìm kiếm cho client - Phía client hiển thị danh sách tìm kiếm cho khách hàng giao diện tìm kiếm - Khách hàng chọn xe chọn Đặt xe - Lớp CarBookingService.js gửi request đặt xe tới server - Server nhận request, xử lý trả kết cho client - Phía client hiển thị đặt xe thành cơng cho khách hàng Giao diện bên client: Trang chủ khách hàng Đặt xe Xem đơn hàng Tìm kiếm Loại xe Select Gía xe tối đa Select Tìm kiếm Mã xe Tên xe Mô tả Chọn (click để chọn ) 11 Thơng tin xe Tên xe abc Gía th 123 Tính nhanh Loại xe xyz Mơ tả abcxyz Ngày thuê select Ngày trả select Địa điểm nhận xe select Đặt xe Hợp đồng thuê xe Tên xe abc Ngày thuê x/y/z Gía thuê 123 Ngày trả a/b/c Tính nhanh Địa điểm nhận xe qưe Loại xe xyz Mô tả abcxyz Người thuê Nguyen van a 12 Tiền cọc 2000 Xác nhận CCCD 1234567 Tiền thuê tạm tính 2000 Xác nhận blx 1243445 Tổng tiền 4000 Hình thức toán select Xác nhận đặt xe Biểu đồ lớp chi tiết: a Client: sử dụng ReactJS - Tầng giao diện có trang: HomeCustomerView.js, OrderView.js, SearchRentalCarView.js, CarInformationView.js, CarBookingView.js - Tầng call api phía server: CarService.js, CarBookingService.js - Tầng thực thể: Car, CarBooking b - Server: sử dụng Express Tầng định danh url api: Server.js Tầng thao tác với sở liệu: CarBookingController.js, CarController.js Tầng thực thể: CarBooking, Car 13 Biểu đồ tuần tự: a Client: Tại giao diện HomeCustomerView.js, khách hàng chọn nút đặt xe Lớp HomeCustomerView.js gọi lớp SearchRentalCarView.js Lớp SearchRentalCarView.js hiển thị cho khách hàng Khách hàng chọn loại xe giá xe nhấn button Tìm kiếm Lớp SearchRentalCarView.js gọi hàm searchRentalCar() yêu cầu tìm kiếm Lớp SearchRentalCarView.js gọi lớp CarService.js 14 Lớp CarService.js gọi hàm fetchSearchRentalCar() call api tìm kiếm Lớp CarService.js trả kết tìm kiếm cho lớp SearchRentaCarView.js Lớp SearchRentalCarView.js hiển thị kết tìm kiếm cho khách hàng 10.Khách hàng click vào xe 11.Lớp SearchRentalCarView.js gọi lớp CarInformationView.js 12.Lớp CarInformationView.js gọi hàm getCar() để yêu cầu lấy thông tin xe chọn 13.Lớp CarInformationCarView.js gọi lớp CarService.js 14.Lớp CarService.js gọi hàm fetchGetCar() call api lấy thông tin 15.Lớp CarService.js trả kết cho lớp CarInformationView.js 16.Lớp CarInformationView.js hiển thị cho khách hàng 17.Khách hàng chọn ngày bắt đầu thuê, ngày kết thúc thuê, địa điểm nhận xe chọn nút Đặt xe 18.Lớp CarInformationView.js gọi lớp CarBookingView.js 19.Lớp CarBookingView.js hiển thị thông tin cho khách hàng 20.Khách hàng chọn hình thức tốn nhấn chọn Xác nhận đặt xe 21.Lớp CarInformationView.js gọi hàm BookingCar() yêu cầu đặt xe 22.Lớp CarInformationView.js gọi lớp CarBookingService.js 23.Lớp CarBookingService.js gọi hàm fetchBookingCar() call api đặt xe 24.Lớp CarBookingService.js trả kết cho lớp CarBookingView.js 25.Lớp CarBookingService.js trả kết cho lớp HomeCustomerView.js 26.Lớp HomeCustomerView.js hiển thị đặt xe thành công b Server: 15 Client gửi yêu cầu tìm kiếm Lớp Server.js gọi lớp CarController.js Lớp CarController.js gọi hàm searchRentalCar() để tìm kiếm Lớp CarController.js gọi lớp Car để đóng gói Lớp Car đóng gói thực thể Lớp Car trả kết cho lớp CarController.js Lớp CarController.js trả kết cho Server.js Lớp Server.js trả kết cho client Client gửi yêu cầu lấy thông tin xe cụ thể 10.Lớp Server.js gọi lớp CarController.js 11.Lớp CarController.js gọi hàm getCar() để lấy thơng tin xe 12.Lớp CarController.js gọi lớp Car để đóng gói 13.Lớp Car đóng gói thực thể 14.Lớp Car trả kết cho lớp CarController.js 15.Lớp CarController.js trả kết cho Server.js 16.Lớp Server.js trả kết cho client 17.Client gửi yêu cầu đặt xe 18.Lớp Server.js gọi lớp CarBookingController.js 19.Lớp CarBookingController.js gọi hàm BookingCar() 20.Lớp CarBookingController.js gọi lớp CarBooking để đóng gói 21.Lớp CarBooking đóng gói thực thể 22.Lớp CarBooking trả kết cho lớp CarBookingController.js 23.Lớp CarBookingController.js trả kết cho Server.js 24.Lớp Server.js trả kết cho client V Chức “Nhận trả xe toán từ khách hàng” Hoạt động module - Khách hàng đến cửa hàng yêu cầu trả xe - Nhân viên đăng nhập vào hệ thống thành công, giao diện trang chủ nhân viên - Nhân viên chọn Trả xe, giao diện tìm kiếm - Nhân viên tìm kiếm hợp đồng xe khách hàng để tiến hàng trả xe - Sau có kết tìm kiếm, nhân viên nhấn vào xem chi tiết hợp đồng - Nhân viên xác nhận với khách hàng thông tin, giá thuê tiền hồn trả - Khách hàng xác nhận thơng tin - Nhân viên hỏi khách hàng hình thức tốn hợp đồng - Khách hàng chọn hình thức tiền mặt - Nhân viên chọn button Trả xe giao diện Trả xe - Nhân viên toán hợp đồng gửi biên lai cho khách hàng 16 Giao diện bên client: Trang chủ nhân viên Tiếp nhận trả xe Tìm kiếm Tìm kiếm Mã hợp đồng Tên Mơ tả Trả xe (click để chọn) Trở lại 17 Hợp đồng trả xe Tên xe abc Ngày thuê x/y/z Gía thuê 123 Ngày trả a/b/c Tính nhanh Địa điểm nhận xe qưe Loại xe xyz Mô tả abcxyz Người thuê nguyen van a Tiền cọc 2000 Xác nhận CCCD 1234567 Tiền thuê tạm tính 2000 Xác nhận blx 1243445 Tổng tiền 4000 Các lỗi hỏng phạt Select Phí phạt 500 Tiền th thực tế 1500 Hồn trả 2000 Hình thức Select Trả xe Biểu đồ lớp chi tiết: a Client: sử dụng ReactJS - Tầng giao diện có trang: HomeStaffView.js, SearchReturnCarView.js, CarReturningView.js - Tầng call api phía server: CarReturnService.js - Tầng thực thể: CarReturning, PenaltyError, Staff, CarBooking 18 b - Server: sử dụng Express Tầng định danh url api: Server.js Tầng thao tác với sở liệu: CarReturnController.js Tầng thực thể: CarReturning, PenaltyError, Staff, CarBooking 19 Biểu đồ tuần tự: a Client: 20 Khách hàng yêu cầu trả xe với nhân viên Tại giao diện HomeStaffView.js, nhân viên chọn nút Trả xe Lớp HomeStaffView.js gọi lớp SearchReturnCarView.js Lớp SearchReturnCarView.js hiển thị cho nhân viên Nhân viên nhập từ khóa vào ô input nhấn nút tìm kiếm Lớp SearchReturnCarView.js gọi hàm searchCarReturn() yêu cầu tìm kiếm Lớp SearchReturnCarView.js gọi lớp CarReturnService.js Lớp CarReturnService.js gọi hàm fetchSearchCarReturn() call api tìm kiếm Lớp CarReturnService.js trả kết cho lớp SearchReturnCarView.js 10.Lớp SearchReturnCarView.js hiển thị cho nhân viên 11.Nhân viên click chọn CarReturning 12.Lớp SearchReturnCarView.js gọi lớp CarReturningView.js 13.Lớp CarReturningView.js gọi hàm caculateFee() để tính tốn chi phí hợp đồng 14.Lớp CarReturningView.js hiển thị kết cho nhân viên 15.Nhân viên xác nhận thông tin với khách hàng 16.Khách hàng xác nhận thông tin 17.Nhân viên kiểm tra xe thêm lỗi hỏng phạt 18.Lớp CarReturningView.js gọi hàm caculateFee() để tính tốn lỗi hỏng phạt số tiền hoàn trả 19.Lớp CarReturningView.js hiển thị cho nhân viên 20.Nhân viên xác nhận lại với khách hàng 21.Khách hàng xác nhận 22.Nhân viên hỏi khách hàng hình thức tốn hợp đồng 23.Khách hàng chọn tiền mặt 24.Nhân viên nhấn nút Trả xe để trả xe giao diện CarReturningView.js 25.Lớp CarReturningView.js gọi hàm ReturnCar() yêu cầu trả xe 26.Lớp CarReturningView.js gọi lớp CarReturnService.js 27.Lớp CarReturnService.js gọi hàm fetchReturnCar() call api trả xe 28.Lớp CarReturnService.js trả kết cho lớp CarReturningView.js 29.Lớp CarReturningView.js trả kết cho lớp SearchReturnCarView.js 30.Lớp SearchReturnCarView.js hiển thị trả xe thành cơng nhân viên 31.Nhân viên tốn hợp đồng gửi biên lai cho khách hàng b Server: 21 Client gửi yêu cầu tìm kiếm tới server Lớp Server.js gọi lớp CarReturnController.js Lớp CarReturnController.js gọi hàm SearchCarReturn() để tìm kiếm Lớp CarReturnController.js gọi lớp CarRetuning để đóng gói Lớp CarReturning đóng gói thực thể Lớp CarReturning trả kết cho lớp CarReturnController.js Lớp CarReturnController.js trả kết cho lớp Server.js Lớp Server.js trả kết cho client Client gửi yêu cầu trả xe tới server 10.Lớp Server.js gọi lớp CarReturnController.js 11.Lớp CarReturnController.js gọi hàm ReturnCar() để thực trả xe 12.Lớp CarReturnController.js gọi lớp CarRetuning để đóng gói 13.Lớp CarReturning đóng gói thực thể 14.Lớp CarReturning trả kết cho lớp CarReturnController.js 15.Lớp CarReturnController.js trả kết cho lớp Server.js 16.Lớp Server.js trả kết cho client 22