Hình 2.8. Sơ đồ phân rã chức năng 2.2.3. Biểu đồ ca sử dụng Use case
Hình 2.9.Biểu đồ Usecase admin 2.2.3.2. Use case tài xế
Hình 2.10. Use case tài xế
2.2.3.3. Use case khách hàng đặt xe
2.2.3.4. Use case Đăng ký
Hình 2.12.Use case đăng ký
Use case Đăng ký
Actor - Tài xế
- Khách hàng
Brief Description Đăng ký tài khoản sử dụng ứng dụng Basic Flows 1. Chọn chức năng đăng ký tài khoản
2. Nhập thông tin: số điện thoại
3. Xác thực số điện thoại bằng mã OTP
4. Nhập thông tin cơ bản: họ tên, email, ngày sinh, giới tính, địa chỉ
5. Xác nhận đăng ký tài khoản Alternative Flows
Post-Conditions Đăng ký tài khoản thành công và đến màn hình đăng nhập
2.2.3.5. Use case Đăng việc làm
Use case Đăng việc làm
Actor - Nhà tuyển dụng
Brief Description Đăng bản tin việc làm tuyển dụng freelancer Pre-Conditions Đăng nhập vào tài khoản với chức danh [Nhà
tuyển dụng]
Basic Flows 1. Màn hình chính, chọn đăng việc
2. Khai báo các thông tin của việc làm: tên việc, công ty, kỹ năng, tiền công, thời hạn công việc, …
3. Xác nhận đăng việc thành công Alternative Flows
Post-Conditions 1. Đăng việc thành công 2. Trở lại màn hình chính
2.2.3.6. Use case Đăng nhập
Hình 2.14.Use case đăng nhập
Use case Đăng nhập
Actor - Tài xế
- Khách hàng
Brief Description Đăng nhập tài khoản Basic Flows 1. Nhập: Số điện thoại
2. Xác thực số điện thoại bằng mã OTP
1.2. Nhập: email và mật khẩu
Post-Conditions Đăng nhập thành công và đến màn hình chính ứng dụng
2.2.3.7. Use case Cập nhật thông tin người dùng
Hình 2.15.Use case cập nhật thông tin người dùng
Use case Cập nhận thông tin
Actor - Tài xế
- Khách hàng
Brief Description Cập nhận thông tin user Pre-Conditions Đăng nhập vào tài khoản Basic Flows 1. Chọn màn hình profile
2. Chọn cập nhật thông tin
3. Cập nhật thông tin: Họ tên, ngày sinh, địa chỉ, email, số tài khoản liên kết, …
4. Xác nhận cập nhật thông tin Alternative Flows
Post-Conditions 1. Cập nhật thông tin thành công 2. Trở lại màn hình profile
Hình 2.16.Use case đặt xe
Use case Đặt xe
Actor - Tài xế
- Khách hàng
Brief Description Đặt xe giữa khách hàng và tài xế Pre-Conditions Đăng nhập vào tài khoản
Basic Flows a/ Đặt xe của khách hàng
1. Tới màn hình chính đặt xe của ứng dụng 2. Chọn vị trí cần di chuyển và yêu cầu dịch vụ đặt xe
3. Chọn loại xe, dịch vụ xe, giá cả phù hợp 4. Đợi ứng dụng tìm xe và tài xế gần đó xác nhận
5. Xác nhận đặt xe thành công
b/ Nhận khách của tài xế
2. Định vị vị trí của mình lên hệ thống đặt xe 3. Đợi hệ thống trả về lượt xác nhận chuyến xe
4. Xác nhận chuyến xe và chạy xe Alternative Flows
Post-Conditions Xác nhận chuyến xe và thỏa thuận về giá cả dịch vụ giữa khách hàng, tài xế và hệ thống
2.2.3.9. Use case Thanh toán
Hình 2.17.Use case Thanh toán
Use case Thanh toán
Actor - Tài xế
- Khách hàng
Brief Description Thanh toán tiền dịch vụ chuyến xe Pre-Conditions 1. Đăng nhập vào tài khoản
2. Đã thực hiện đặt xe và xác nhận chạy xe của khách hàng, tài xế và hệ thống
Basic Flows 1. Xác nhận đã sử dụng thành công dịch vụ đặt xe và chạy xe
2. Thanh toán tiền dịch vụ từ khách hàng 3. Xác nhận thanh toán dịch từ khách hàng Alternative Flows 2.a.1. Khách hàng thanh toán bằng tiền mặt
trả trực tiếp cho tài xế
tài xế
2.b.1. Khách hàng thanh toán bằng tài khoản hoặc GODY points
2.b.2. Khách hàng xác nhận trả tiền
2.b.3. Tài xế xác nhận số tiền thanh toán từ khách hàng và nhận lại tiền từ hệ thống
Post-Conditions 1. Xác nhận thanh toán dịch vụ
2.2.4. Biểu đồ hoạt động2.2.4.1. Đặt xe 2.2.4.1. Đặt xe
Hình 2.18.Biểu đồ hoạt động đặt xe 2.2.4.2. Biểu đồ hoạt động tracking chuyến đi
Hình 2.19.Biểu đồ hoạt động tracking chuyến đi
2.3. Thiết kế cơ sở dữ liệu
2.3.1. Role
Collection: role (vai trò)
Trường Kiểu dữ liệu Chú thích _id ObjectI d Id định danh
name String Tên vai trò
code String Mã vai trò
isActiv e
Boolean Cờ trạng thái hoạt động
2.3.2. Card
Collection: card (thẻ)
Trường Kiểu dữ liệu Chú thích
_id ObjectId Id định danh
user String Liên kết với collection user balance Number Số dư
number String Số thẻ
isActive Boolean Cờ trạng thái hoạt động
2.3.3. Wallet
Collection: wallet (thẻ)
_id ObjectId Id định danh
user String Liên kết với collection user
balance Number Số dư
isActiv e
Boolean Cờ trạng thái hoạt động
2.3.4. Transport
Collection: transport (phương tiện)
Trường Kiểu dữ
liệu
Chú thích
_id ObjectId Id định danh
driver ObjectId Liên kết với collection user profile Array Danh sách hồ sơ phương tiện registrantionPlat
e
String Biển số xe numberOfSeats Number Số chỗ ngồi
vehicle String Kiểu xe
brand String Hãng xe
Type String Loại xe
color String Màu xe
isVerified Boolean Cờ xác thực phương tiện isActive Boolean Cờ trạng thái hoạt động
2.3.5. Users
Collection: user (người dùng)
Trường Kiểu dữ liệu Chú thích _id ObjectId Id định danh
name String Tên người dùng
phone String Số điện thoại người dùng password String Mật khẩu
role ObjectId Liên kêt với collection role (vai trò) card ObjectId
array
Liên kết với collection card (thẻ)
transport ObjectId Liên kết với collection transport (phương tiện) nếu là tài xế
wallet ObjectId Liên kết với collection wallet (ví) isVerified Boolean Cờ người dùng được xác thực isActive Boolean Cờ trạng thái hoạt động
2.3.6. Location
Collection: location (vị trí)
Trường Kiểu dữ liệu Chú thích _id ObjectId Id định danh
onTrip Boolean Cờ trạng thái đang trong chuyến đi của user (khách hàng/tài xế)
name String Tên địa điểm
image String Array Danh sách hình ảnh của địa điểm
type String Kiểu địa điểm hay vị trí người dùng (“place”, “driver”, “customer”)
location Object Tọa độ của vị trí người dùng hoặc địa điểm isActiv
e
Boolean Cờ trạng thái hoạt động
2.3.7. Trip
Collection: trip (chuyến đi)
Trường Kiểu dữ
liệu
Chú thích
_id ObjectId Id định danh
customer ObjectId Liên kết với collection user – khách hàng
driver ObjectId Liên kết với collection user – tài xế
distance Number Độ dài chuyến đi (đơn vị mét)
time String Thời gian thực hiện chuyến đi
price Number Cước chuyến đi =
startLocation ObjectId Liên kết với collection location – vị trí điểm đón
endLocation ObjectId Liên kết với collection location – vị trí điểm đến
status String Cờ trạng thái chuyến đi
driverToPickUpLocation Boolean Cờ trạng thái tài xế đến điểm đón customerToPickUpLocation Boolean Cờ trạng thái khách hàng đến điểm
đón
driverToDropOffLocation Boolean Cờ trạng thái tài xế đến điểm trả khách
payment ObjectId Liên kết với collection payment – thanh toán
canceldBy ObjectId Liên kết với colleciton user – người hủy chuyến
cancellationReason String Lý do hủy chuyến
isActive Boolean Cờ trạng thái hoạt động
2.3.8. Payment
Collection: payment (thẻ)
Trường Kiểu dữ liệu Chú thích _id ObjectId Id định danh custome
r
ObjectId Liên kết với collection user – khách hàng driver ObjectId Liên kết với collection user – tài xế trip ObjectId Liên kết với collection trip - chuyến đi amount Number Số tiền thanh toán
type String Kiểu thanh toán
card ObjectId Liên kết với collection card – ví nếu type là “card” wallet ObjectId Liên kết với collection wallet – ví nếu type là “wallet” isPaid Boolean Cờ trạng thái thanh toán
isActive Boolean Cờ trạng thái hoạt động
2.4. Kết luận chương 2
Trong chương 2, nhóm chúng em đã phân tích và thiết kế được hệ thống của ứng dụng Tìm kiếm và đặt xe GODY. Xây dựng được cơ sở dữ liệu, xác định các tác nhân, vai trò, vẽ các biểu đồ hoạt động chính trong các luồng của ứng dụng. Dựa trên bản phân tích này để tiếp tục xây dựng và việc phát triển và triển khai ứng dụng.
CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG 3.1. Cài đặt môi trường phát triển ứng dụng phía Backend
Phía backend đối với ứng dụng tìm kiếm và đặt xe GODY này, bao gồm ba phần:
• Máy chủ server: nơi triển khai ứng dụng
• API: đưa ra các phương thức, hàm để kết nối và trao đỗi dữ liệu giữa các ứng dụng
• Cơ sở dữ liệu: lưu trữ dữ liệu
• Socket IO: hỗ trợ các yêu cầu đặt xe và nhận chuyến xe giữa tài xế và khách hang đặt xe.
Máy chủ server ở đây, nhóm chúng em lựa chọn là VPS (máy chủ đám mây ảo), VPS được xem là một máy chủ ảo: nơi lưu trữ các dịch vụ của website, application, tạo ra các môi trường để lập trình, nghiên cứu, … Lý do để nhóm chúng em sử dụng VPS trong việc triển khai backend cho ứng dụng là vì những ưu điểm của nó:
Cài đặt và kích hoạt để sử dụng rất nhanh (chỉ khoảng 5-10 phút là bạn đã có thể sử dụng VPS).
Rất an toàn với người sử dụng bởi tính năng bảo mật cao.
Toàn quyền sử dụng các phần mềm như một máy chủ độc lập.
Giá thành rẻ hơn so với việc bạn mua máy chủ (server) nên tiết kiệm được rất nhiều chi phí cho bạn.
Bạn có thể quản lí khách hàng từ xa, giúp khách hàng cài đặt phần mềm, nâng cấp phần mềm...
Framework ExpressJS được xây dựng trên nền tảng NodeJS. Nó cung cấp các tính năng mạnh mẽ để xây dựng và phát triển hệ thống cho các ứng dụng web hoặc mobi. ExpressJS hỗ trợ các phương thức HTTP và middleware tạo ra API vô cùng mạnh mẽ và dễ sử dụng.
Triển khai ứng dụng phía Backend lên server: - Kết nối đến server
ssh root@108.61.182.206
- Clone repo mã nguồn chương trình với git command:
git clone https://gody-app@dev.azure.com/gody-app/gody- backend-web/_git/gody-backend-web
- Truy cập vào thư mục chứa ứng dụng: cd gody-backend-web
- Cài đặt gói thư viện: npm install
- Build ứng dụng: npm run start:build
- Chạy ứng dụng: npm run start:staging
- Triển khai ứng dụng với PM2 pm2 start gody-backend-web
Sau khi triển khai backend lên server, phía dưới ứng dụng mobile có thể sử dụng api với đường dẫn http://108.61.182.206:5000/api/
Hình 3.21. Hệ thống API
3.2.Cài đặt môi trường ứng dụng
Để khởi tạo một ứng dụng React Native, trước hết ta cần phải đã cài cắm các công cụ phần mềm, môi trường hỗ trợ:
- NodeJS
- ReactNative CLI: môi trường xây dựng và phát triển ứng dụng React Native
- Môi trường phát triển Android hoặc iOS
Tiếp theo, ta tiến hành khởi tạo một ứng dụng dành cho khách hang và một ứng dụng cho tài xế với React Native bằng câu lệnh trên command line hoặc terminal: react-native init gody và react-native init gody-driver
3.3. Xây dựng chức năng đăng nhập và đăng ký
Việc xác thực người dùng ở ứng dụng GODY sẽ sử dụng JWT Json Web Token, khi người dùng thực hiện đăng nhập với số điện thoại và mật khẩu thành công, hệ thống sẽ thực hiện tạo access_token gửi về cho client cụ thể là ứng dụng người dùng lưu trữ.
Hình 3.22.Màn hình đăng nhập
Với những API gửi lên hệ thống tiếp theo cần xác thực và bảo vệ, thì chúng ta sẽ yêu cầu người dùng truyền lên access token mà hệ thống đã gửi ở lần đăng nhập gần nhất để phía hệ thống kiểm tra xem token này có hợp lệ không thì mới cho API hoạt động.
exportconstloginApp = async (phone: string, password: string): Promise<ObjectResponse<Auth> |
ErrorResponse> => { try {
constresponse = awaitpost<ObjectResponse<Auth>>('public/user/login', { phone, password }); AsyncStorage.setItem('token', response.data.result.token);
returnresponse.data; } catch (error: any) {
returnhandleServerError(error); }
Hình 3.23. Màn hình đăng ký
Đối với chức năng đăng ký, người dùng sẽ được yêu cầu đăng ký với số điện thoại, sau khi nhập số điện thoại, hệ thống sẽ gửi 1 mã OTP xác thực đến số điện thoại này, việc của người dùng là sẽ xác thực mã OTP này, nếu hợp lệ sẽ thực hiện tạo tài khoản cho người dùng với thông tin đăng nhập sẽ được người dùng nhập, còn ngược lại nếu không hợp lệ sẽ yêu cầu người dùng thực hiện lại quá trình này.
constonSignUp = async () => { setLoading(true);
if (phone.length != 10) {
setError('Input phone number is not precise.'); setPhoneNumber('');
setLoading(false); } else {
constresponse = awaitsendOTP(phone); if (response.__typename !== 'ErrorResponse') { setTimeout(() => {
setLoading(false);
navigation.navigate("VerifyCode", { phoneNumber:phone
}); }, 1500); } setLoading(false); } }
constonVerifyCode = async () => { setLoading(true);
if (verifyCode.length < 4) { setLoading(false); Alert.alert( "",
"Verified code must not be empty or less than 4 characters!", [{ text:"OK", onPress: () => { setVerifyCode('') } }]
); } else {
constresponse = awaitverifyOTP(phoneNumber, verifyCode); if (response.__typename !== 'ErrorResponse') {
setTimeout(() => { setLoading(false);
navigation.navigate("Register", { phoneNumber:phoneNumber }); }, 1500); } setLoading(false); } }
Sau khi hoàn tất đăng ký, ứng dụng sẽ chuyển người dùng quay trở lại trang đăng nhập.
3.4. Xây dựng chức năng tìm kiếm và đặt xe phía khách hàng
Sau khi người dùng đăng nhập, màn hình chính của ứng dụng sẽ xuất hiện, màn, chức năng chính của màn hình này bao gồm: lấy vị trí hiện tại của người dùng, cho phép người dùng nhập địa chỉ bắt đầu đi, hiển thị vị trí lên map. Sau khi có địa điểm đi, ứng dụng sẽ chuyển hướng người dùng đến màn hình Search. Ở màn hình Search này, người dùng sẽ phải thực hiện nhập địa điểm đến của mình. Sau khi có 2 địa điểm đi và đến, hệ thống sẽ sử dụng API Google Map, để tính toán được lộ trình đi, quãng đường đi, độ dài, thời gian.
const response = await getDistanceAndTime(store.booking?.origin, store.booking?.destination); if (response.__typename !== 'ErrorResponse') {
const totalFare = calculateFare(response.rows[0].elements[0].distance, response.rows[0].elements[0].duration);
store.saveBooking({ ...store.booking!,
fare: totalFare }) navigation.navigate("ChooseCar", { defaultFare: store.booking?.fare }); }
Hình 3.24.Màn hình tìm kiếm địa điểm đi và đến
Hàm lấy vị trí của người dùng và tính toán phí của chuyến đi: const getUserLocation = () => { Geolocation.getCurrentPosition(info => setUserLocation({ longitude: info.coords.longitude, latitude: info.coords.latitude })); }
export const calculateFare = (distance: any, duration: any) => { const distanceInKm = distance.value * 0.001;
const durationInMinutes = duration.value / 60; let totalFare = 0;
if (distanceInKm <= 2) {
totalFare = 1.5 + durationInMinutes * (1 / 23); }
if (distanceInKm > 2) {
totalFare = 1.5 + durationInMinutes * (1 / 23) + 0.75 * (distanceInKm - 2); }
return Math.round(totalFare); }
Tiếp theo, người dùng sẽ được chọn dịch vụ xe để di chuyển, ứng dụng sẽ đề nghị cho người dùng 3 loại hình dịch vụ xe: GodyX, GodyPremium, GodyLuxury. Phí chuyến đi ban đầu được tính sẽ dựa vào quảng đường đi và thời gian đi, sau khi người dùng chọn dịch vụ, phí này sẽ được tính lại dựa vào dịch vụ xe mà người dùng đã chọn. Cụ thể đối với GodyX phí ban đầu sẽ giữ nguyên, GodyPremium sẽ cộng thêm một nửa chi phí ban đầu còn lại GodyLuxury sẽ gấp đôi so với phí ban đầu.
Hình 3.25.Màn hình chọn dịch vụ xe
Tiếp theo, người dùng sẽ được yêu cầu chọn hình thức thanh toán, việc chọn hình thức thanh toán sẽ gồm 2 loại hình: thanh toán bằng thẻ (fake), thanh toán
Hình 3.26.Màn hình thanh toán và mã khuyến mại
Sau khi chọn thanh toán, hệ thống sẽ tìm tài xế cho người dùng đặt xe. Đối với app tài xế, sẽ không có chức năng tìm kiếm theo địa chỉ, mà chỉ có chức năng gửi yêu cầu có thể nhận chuyến đi và gửi vị trí của tài xế lên hệ thống. Hệ thống sẽ thực hiện xử lý các yêu cầu và match những tài xế và khách hang phù hợp nhất. Sau khi match được tài xế và khách hàng đặt xe, thông tin về chuyến đi sẽ được hiển thị ra màn hình. Người dùng có thể nắm được thông tin chuyến đi.
Hình 3.27.Màn hình tìm kiếm tài xế
3.5. Xây dựng chức năng tracking chuyến đi
Như đã đề cập từ trước, ở chức năng này nhóm chúng em sẽ sử dụng Socket IO. Lý do mà để sử dụng Socket IO này thay vì sử dụng các API với phương thức HTTP bình thường là ở việc gửi các request liên tục lên server, đối với những server có hệ thống chịu tải bé, việc gửi liên tục sẽ gây ra tắc nghẽn, khả năng lớn dẫn đến sập server. Bên cạnh đó, ưu điểm của Socket IO trong các ứng dụng thời gian thực: khả năng kết nối tự động, phát hiện tình trạng ngắt kết nối, khả năng bảo mật.
Hình 3.28.Màn hình tracking chuyến đi