XÂY DỰNG ỨNG DỤNG TÌM KIẾM VÀ ĐẶT XE GODY Theo sự phát triển mạnh mẽ của Công nghệ thông tin đã len lỏi vào mọi lĩnh vực của đời sống hiện nay, mọi người hầu hết ai cũng có đến ít nhất sử dụng máy tính hoặc điện thoại di động và luôn phải cập nhật thông tin, công nghệ liên tục theo từng giây. Do đó, sự phát triển mạng mẽ của những công nghệ, ứng dụng di động là một điều thiết yếu. Điều đó đã tạo lên một ngành công nghiệp đầy tiềm năng để đáp ứng với nhu cầu đó. Ngành công nghiệp công nghệ di động đã phát triển được một thời gian và đã đạt được những bước tiến nhất định với sự xuất hiện của hệ điều hành SAMSUNG, IOS, Huawei, … cùng đó là những tập toàn toàn cầu cung ứng toàn cầu của hiện tại và tương lai.
BAN CƠ YẾU CHÍNH PHỦ HỌC VIỆN KỸ THUẬT MẬT Mà ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯ BÁO CÁO BÀI TẬP LỚN XÂY DỰNG ỨNG DỤNG TÌM KIẾM VÀ ĐẶT XE GODY Mơn: Lập trình Android nâng cao Sinh viên thực hiện: Nguyễn Quang Đức Nguyễn Tuấn Anh Nguyễn Đăng Nam Hà Nội, 2021 BAN CƠ YẾU CHÍNH PHỦ HỌC VIỆN KỸ THUẬT MẬT Mà ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯ BÁO CÁO BÀI TẬP LỚN XÂY DỰNG ỨNG DỤNG TÌM KIẾM VÀ ĐẶT XE GODY Mơn học: Lập trình Android nâng cao Sinh viên thực hiện: Nguyễn Quang Đức Nguyễn Tuấn Anh Nguyễn Đăng Nam Người hướng dẫn: ThS Lê Bá Cường Khoa Công nghệ thông tin – Học viện Kỹ thuật mật mã Hà Nội, 2021 MỤC LỤC Danh mục kí hiệu viết tắt iii Danh mục hình vẽ iv Lời cảm ơn vi Lời nói đầu vii Chương TỔNG QUAN VỀ ĐỀ TÀI 1.1 Khảo sát đề tài 1.2 Mục tiêu yêu cầu toán 1.2.1 Mục tiêu 1.2.2 Yêu cầu 1.3 Môi trường xây dựng, triển khai lựa chọn công nghệ 1.3.1 Môi trường triển khai sử dụng ứng dụng 1.3.2 Công nghệ phần mềm 1.4 Kết luận chương 11 Chương Phân tích thiết kế hệ thống 12 2.1 Phát biểu toán 12 2.2 Mơ hình hóa u cầu 12 2.2.1 Xác định tác nhân hệ thống 12 2.2.2 Sơ đồ phân rã chức 14 2.2.3 Biểu đồ ca sử dụng Use case 14 2.2.4 Biểu đồ hoạt động 21 2.3 Thiết kế sở liệu 23 2.3.1 Role 23 2.3.2 Card 23 2.3.3 Wallet 23 2.3.4 Transport 23 2.3.5 Users 24 2.3.6 Location 24 2.3.7 Trip 25 2.3.8 Payment 26 2.4 Kết luận chương 26 CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG 27 3.1 Cài đặt mơi trường phát triển ứng dụng phía Backend 27 3.2 Cài đặt môi trường ứng dụng 29 3.3 Xây dựng chức đăng nhập đăng ký 29 3.4 Xây dựng chức tìm kiếm đặt xe phía khách hàng 32 3.5 Xây dựng chức tracking chuyến 36 3.6 Xây dựng chức quản lý danh sách chuyến 38 3.7 Xây dựng chức cập nhật thông tin người dùng 38 3.8 Xây dựng website admin quản lý ứng dụng 39 3.9 Kết luận chương 41 Kết luận 43 i Tài liệu tham khảo 44 ii DANH MỤC KÍ HIỆU VÀ VIẾT TẮT VSC Visual Studio Code RN React Native JS Javascript NPM Node package management API Application Programing Interface iii DANH MỤC HÌNH VẼ Hình 1.1 Framework React Native Javascript Hình 1.2 Redis Hình 1.3.Visual Studio Code IDE Hình 1.4 Cơng cụ quản lý mã nguồn Azure DevOps Hình 1.5 Google Developers 10 Hình 2.1 Ứng dụng tìm kiếm đặt xe GODY 12 Hình 2.2 Người dùng hệ thống 13 Hình 2.3 Sơ đồ phân rã chức 14 Hình 2.4.Biểu đồ Usecase admin 15 Hình 2.5 Use case tài xế 15 Hình 2.6.Use case khách hàng đặt xe 15 Hình 2.7.Use case đăng ký 16 Hình 2.8.Use case đăng việc làm 17 Hình 2.9.Use case đăng nhập 18 Hình 2.10.Use case cập nhật thơng tin người dùng 18 Hình 2.11.Use case đặt xe 19 Hình 2.12.Use case Thanh tốn 20 Hình 2.13.Biểu đồ hoạt động đặt xe 22 Hình 2.14.Biểu đồ hoạt động tracking chuyến 22 Hình 3.1 Máy chủ server ứng dụng 27 Hình 3.2 Hệ thống API 29 Hình 3.3.Màn hình đăng nhập 30 Hình 3.4 Màn hình đăng ký 31 Hình 3.5.Màn hình tìm kiếm địa điểm đến 33 Hình 3.6.Màn hình chọn dịch vụ xe 34 Hình 3.7.Màn hình toán mã khuyến mại 35 Hình 3.8.Màn hình tìm kiếm tài xế 36 Hình 3.9.Màn hình tracking chuyến 37 Hình 3.10.Quản lý danh sách chuyến 38 Hình 3.11.Chức cập nhật thơng tin người dùng 39 Hình 3.12 Màn hình đăng nhập 40 Hình 3.13.Quản lý danh sách chuyến 40 Hình 3.14.Quản lý thơng tin người dùng 41 iv Hình 3.15.Thống kê 41 v LỜI CẢM ƠN Trong trình nghiên cứu phát triển để thực tập lớn này, chúng em xin gửi lời cảm ơn chân thành đến thầy Lê Bá Cường bảo tận tình giúp đỡ chúng em suốt q trình mơn học Với hướng dẫn, quan tâm sâu sát cơ, nhóm chúng em có định hướng tốt việc hồn thành yêu cầu tập lớn môn học Một lần nữa, chúng em xin trân trọng cảm ơn Thầy! NHÓM SINH VIÊN THỰC HIỆN ĐỒ ÁN vi LỜI NÓI ĐẦU Theo phát triển mạnh mẽ Công nghệ thông tin len lỏi vào lĩnh vực đời sống nay, người hầu hết có đến sử dụng máy tính điện thoại di động phải cập nhật thông tin, cơng nghệ liên tục theo giây Do đó, phát triển mạng mẽ công nghệ, ứng dụng di động điều thiết yếu Điều tạo lên ngành công nghiệp đầy tiềm để đáp ứng với nhu cầu Ngành cơng nghiệp cơng nghệ di động phát triển thời gian đạt bước tiến định với xuất hệ điều hành SAMSUNG, IOS, Huawei, … tập tồn tồn cầu cung ứng toàn cầu tương lai Một thị trường nắm bắt phát triển công nghệ để áp dụng vào hoạt động thực tiễn thị trường vận tải giới nói chung Việt Nam nói riêng Cơng nghệ thay đổi hồn tồn mặt ngành vận tải, đáp ứng nhu cầu lại di duyển, vận chuyển ngày cao người dân Nắm bắt nhu cầu đó, nhóm em thực làm đề tài “Xây dựng ứng dụng Tìm kiếm đặt xe GODY” với kỳ vọng giúp người gọi, đặt xe dễ dàng lúc nơi, biết trước giá chuyến điện thoại kết nối mạng Bài tập lớn thực nhằm mục đích tìm hiểu phát triển ứng dụng Tìm kiếm đặt xe GODY Mục tiêu đặt thực tập lớn là: Hệ thống lại kiến thức quy trình phát triển phần mềm Hiểu rõ chất ứng dụng android Xây dựng phát triển ứng dụng Tìm kiếm đặt xe GODY android ios React Native Sau khoảng thời gian thực đề tài, mục tiêu nhóm chúng em đạt Tuy nhiên để phát triển sâu xa thời gian thực đề tài tương đối ngắn, khơng tránh khỏi thiếu sót ban đầu Chúng em mong nhận góp ý thầy, bạn để hoàn thiện đề tài NHÓM SINH VIÊN THỰC HIỆN vii Hình 3.17.Màn hình đăng nhập Với API gửi lên hệ thống cần xác thực bảo vệ, 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 để phía hệ thống kiểm tra xem token có hợp lệ khơng cho API hoạt động export const loginApp = async (phone: string, password: string): Promise => { try { const response = await post('public/user/login', { phone, password }); AsyncStorage.setItem('token', response.data.result.token); return response.data; } catch (error: any) { return handleServerError(error); } } 30 Hình 3.18 Màn hình đăng ký Đối với chức đăng ký, người dùng yêu cầu đăng ký với số điện thoại, sau nhập số điện thoại, hệ thống gửi mã OTP xác thực đến số điện thoại này, việc người dùng xác thực mã OTP này, hợp lệ thực tạo tài khoản cho người dùng với thông tin đăng nhập người dùng nhập, cịn ngược lại khơng hợp lệ u cầu người dùng thực lại trình const onSignUp = async () => { setLoading(true); if (phone.length != 10) { setError('Input phone number is not precise.'); setPhoneNumber(''); setLoading(false); } else { const response = await sendOTP(phone); if (response. typename !== 'ErrorResponse') { setTimeout(() => { setLoading(false); navigation.navigate("VerifyCode", { phoneNumber: phone 31 }); }, 1500); } setLoading(false); } } const onVerifyCode = async () => { setLoading(true); if (verifyCode.length < 4) { setLoading(false); Alert.alert( "", "Verified code must not be empty or less than characters!", [{ text: "OK", onPress: () => { setVerifyCode('') } }] ); } else { const response = await verifyOTP(phoneNumber, verifyCode); if (response. typename !== 'ErrorResponse') { setTimeout(() => { setLoading(false); navigation.navigate("Register", { phoneNumber: phoneNumber }); }, 1500); } setLoading(false); } } Sau hoàn tất đăng ký, ứng dụng chuyển người dùng quay trở lại trang đăng nhập 3.4 Xây dựng chức tìm kiếm đặt xe phía khách hàng Sau người dùng đăng nhập, hình ứng dụng xuất hiện, màn, chức hình bao gồm: lấy vị trí người dùng, cho phép người dùng nhập địa bắt đầu đi, hiển thị vị trí lên map Sau có địa điểm đi, ứng dụng chuyển hướng người dùng đến hình Search Ở hình Search này, người dùng phải thực nhập địa điểm đến Sau có địa điểm đến, hệ thống sử dụng API Google Map, để tính tốn lộ trình đi, qng đườ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!, distance: response.rows[0].elements[0].distance, 32 duration: response.rows[0].elements[0].duration, fare: totalFare }) navigation.navigate("ChooseCar", { defaultFare: store.booking?.fare }); } Hình 3.19.Màn hình tìm kiếm địa điểm đến Hàm lấy vị trí người dùng tính tốn phí 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) + 0.75 * (distanceInKm - 2); } return Math.round(totalFare); } Tiếp theo, người dùng chọn dịch vụ xe để di chuyển, ứng dụng đề nghị cho người dùng loại hình dịch vụ xe: GodyX, GodyPremium, GodyLuxury Phí chuyến ban đầu tính dựa vào quảng đường thời gian đi, sau người dùng chọn dịch vụ, phí tính lại dựa vào dịch vụ xe mà người dùng chọn Cụ thể GodyX phí ban đầu giữ nguyên, GodyPremium cộng thêm nửa chi phí ban đầu cịn lại GodyLuxury gấp đơi so với phí ban đầu Hình 3.20.Màn hình chọn dịch vụ xe Tiếp theo, người dùng yêu cầu chọn hình thức tốn, việc chọn hình thức tốn gồm loại hình: tốn thẻ (fake), tốn tiền mặt Bên cạnh đó, người dùng sử dụng mã khuyến mại mà hệ thống đề xuất 34 Hình 3.21.Màn hình tốn mã khuyến mại Sau chọn tốn, hệ thống tìm tài xế cho người dùng đặt xe Đối với app tài xế, khơng có chức tìm kiếm theo địa chỉ, mà có chức gửi yêu cầu nhận chuyến gửi vị trí tài xế lên hệ thống Hệ thống thực xử lý yêu cầu match tài xế khách hang phù hợp Sau match tài xế khách hàng đặt xe, thông tin chuyến hiển thị hình Người dùng nắm thơng tin chuyến 35 Hình 3.22.Màn hình tìm kiếm tài xế 3.5 Xây dựng chức tracking chuyến Như đề cập từ trước, chức nhóm chúng em sử dụng Socket IO Lý mà để sử dụng Socket IO thay sử dụng API với phương thức HTTP bình thường việc gửi request liên tục lên server, server có hệ thống chịu tải bé, việc gửi liên tục gây tắc nghẽn, khả lớn dẫn đến sập server Bên cạnh đó, ưu điểm Socket IO ứng dụng thời gian thực: khả kết nối tự động, phát tình trạng ngắt kết nối, khả bảo mật 36 Hình 3.23.Màn hình tracking chuyến Hàm tracking chuyến đi: useEffect(() => { //update location every 10m var handle = setInterval(updateUserLocation, 1000 * 60 * 10); return () => { clearInterval(handle); } }); const updateUserLocation = () => { Geolocation.getCurrentPosition(info => setUserLocation({ longitude: info.coords.longitude, latitude: info.coords.latitude })); //update location store.saveBooking({ booking!, origin: userLocation, }) } 37 3.6.Xây dựng chức quản lý danh sách chuyến Sau đăng nhập, ứng dụng sử dụng access token cho việc gửi yêu cầu lên server, yêu cầu hợp lệ API hoạt động Tương tự với chức quản lý danh sách chuyến đi, ứng dụng gọi API để lấy danh sách chuyến mà người dùng trước Hình 3.24.Quản lý danh sách chuyến 3.7.Xây dựng chức cập nhật thơng tin người dùng 38 Hình 3.25.Chức cập nhật thông tin người dùng 3.8 Xây dựng website admin quản lý ứng dụng Website quản trị dành cho admin bao gồm chức như: • Quản lý người dùng: Khách hàng đặt xe, tài xế, người dùng quản trị • Quản lý danh sách chuyến • Quản lý cập nhật hệ thống • Thống kê Việc xây dựng website dựa framework JS ReactJS, ReactJS gần giống với React Native Tuy nhiên ReactJS framework dùng cho việc tạo trang web Nó cấu tạo từ component, tương tác với component state props 39 Hình 3.26 Màn hình đăng nhập Quản lý danh sách chi tiết chuyến Hình 3.27.Quản lý danh sách chuyến 40 Hình 3.28.Quản lý thơng tin người dùng Hình 3.29.Thống kê 3.9 Kết luận chương Trong chương này, nhóm chúng em triển khai xây dựng ứng dụng Tìm kiếm đặt xe GODY với chức như: đăng nhập, đăng ký, tìm kiếm, đặt xe, thống kê, cập nhật thơng tin cho người dùng Bên cạnh đó, nhóm chúng em 41 xây dựng website quản trị dành cho admin hệ thống, website hỗ trợ việc quản lý người dùng, quản lý cập nhật hệ thống Bước đầu hoàn thiện ứng dụng yêu cầu đặt 42 KẾT LUẬN Ba chương báo cáo thể mục tiêu đặt thực tập lớn đạt Cụ thể: Chương hệ thống lại kiến thức tổng quan đề tài dự án: mục tiêu yêu cầu đề tài, công nghệ, công cụ sử dụng dự án để xây dựng dự án hồn thiện Đây tiền đề định hướng cho việc xây dựng phát triển ứng dụng Tìm đặt xe GODY Trong chương 2, nhóm chúng em phân tích thiết kế hệ thống ứng dụng Tìm kiếm đặt xe GODY Xây dựng sở liệu, vẽ biểu đồ hoạt động luồng ứng dụng Dựa phân tích để tiếp tục cho việc phát triển triển khai ứng dụng Ở chương 3, nhóm chúng em triển khai xây dựng ứng dụng tìm kiếm đặt xe GODY với chức như: đăng nhập, đăng ký, tìm kiếm, đặt xe, thống kê, cập nhật thông tin cho người dùng Bên cạnh đó, nhóm chúng em xây dựng website quản trị dành cho admin hệ thống, website hỗ trợ việc quản lý người dùng, quản lý cập nhật hệ thống Bước đầu hoàn thiện ứng dụng yêu cầu đặt Dù vậy, số vấn đề liên quan đến việc xây dựng chức toán cho ứng dụng Việc giải điểm tồn hướng phát triển tương lai ứng dụng 43 TÀI LIỆU THAM KHẢO [1] https://redis.io/ [2] https://reactnative.dev/docs/getting-started [3] https://cloud.google.com/ [4] Mã nguồn app: https://github.com/quduc/gody-app [5] Mã nguồn website: https://github.com/quduc/gody-driver 44