1. Trước khi bắt đầu
Lớp học lập trình này hướng dẫn bạn tạo một ứng dụng iOS đơn giản sử dụng Navigation SDK của Google Maps Platform để điều hướng đến một đích đến được định cấu hình sẵn.
Đây là giao diện của ứng dụng khi bạn hoàn tất.
Điều kiện tiên quyết
- Có kiến thức cơ bản về cách phát triển ứng dụng iOS bằng Swift.
- Có kiến thức cơ bản về các khái niệm cơ bản của Google Maps SDK, chẳng hạn như tạo bản đồ tập trung vào một vị trí cụ thể.
Kiến thức bạn sẽ học được
- Cách tạo một ứng dụng iOS Swift đơn giản sử dụng Navigation SDK để điều hướng đến một đích đến.
- Cách tích hợp Navigation SDK từ kho lưu trữ Cocoapods từ xa.
- Cách quản lý quyền truy cập vị trí và thoả thuận của người dùng theo các điều khoản dành cho người dùng cuối của Navigation SDK.
- Cách khởi chạy SDK.
- Cách đặt điểm đến và bắt đầu đi theo chỉ dẫn.
Bạn cần có
- Phiên bản ổn định mới nhất của XCode.
- Một Tài khoản Google và Dự án có bật tính năng thanh toán.
- Một thiết bị iOS hoặc một thiết bị được mô phỏng đang chạy trong Trình mô phỏng XCode. Dù bạn chọn cách nào, cách đó cũng phải đáp ứng các yêu cầu tối thiểu đối với Navigation SDK.
2. Bắt đầu thiết lập
Nếu bạn chưa có tài khoản Google Cloud Platform và một dự án trên đám mây đã bật tính năng thanh toán, hãy thiết lập dự án Google Cloud theo hướng dẫn Bắt đầu sử dụng Google Maps Platform.
Chọn một dự án trên đám mây trong bảng điều khiển
Trong Cloud Console, hãy nhấp vào trình đơn thả xuống dự án rồi chọn dự án mà bạn muốn sử dụng cho lớp học lập trình này.
Bật Navigation SDK trong dự án của bạn
Bật các API và SDK của Google Maps Platform cần thiết cho lớp học lập trình này trong Google Cloud Marketplace.
Chuyển đến phần API và dịch vụ > Thư viện trong Google Cloud Console rồi tìm kiếm "Navigation SDK".
Bạn sẽ thấy một kết quả tìm kiếm.
Nhấp vào Navigation SDK để mở trang thông tin chi tiết sản phẩm. Nhấp vào Bật để bật SDK trên dự án của bạn.
Lặp lại quy trình này cho SDK bản đồ dành cho iOS.
Tạo khoá API
Tạo khoá API trên trang Thông tin xác thực của Cloud Console. Tất cả yêu cầu đối với Google Maps Platform đều cần có khoá API. Trên trang Thông tin đăng nhập trong bảng điều khiển. Nhấp vào "+Tạo thông tin xác thực" ở đầu trang rồi chọn "Khoá API" trong các lựa chọn.
Đối với mục đích sử dụng trong thực tế, bạn nên đặt quy tắc hạn chế ứng dụng cho khoá API, nhưng đây không phải là yêu cầu bắt buộc đối với lớp học lập trình này.
3. Tải tệp dự án mẫu xuống
Phần này mô tả cách thiết lập một dự án Ứng dụng XCode trống cơ bản bằng cách sao chép các tệp từ kho lưu trữ GitHub cho lớp học lập trình này. Kho lưu trữ Github chứa các phiên bản mã trước và sau của lớp học lập trình. Lớp học lập trình sẽ bắt đầu bằng một mẫu dự án trống và xây dựng cho đến trạng thái hoàn thành. Bạn có thể sử dụng dự án đã hoàn thành trong kho lưu trữ làm tài liệu tham khảo nếu gặp khó khăn.
Sao chép kho lưu trữ hoặc tải mã xuống
Chuyển đến thư mục mà bạn muốn lưu trữ lớp học lập trình.
Sau đó, sao chép repo hoặc tải mã xuống:
git clone https://github.com/googlemaps-samples/codelab-navigation-101-ios-swift
Nếu bạn chưa cài đặt git, hãy nhấp vào nút này để lấy mã:
Để bạn có thể bắt đầu nhanh chóng, kho lưu trữ này chứa một số mã khởi đầu trong thư mục Starter để giúp bạn theo dõi lớp học lập trình này. Ngoài ra, còn có một dự án Solution đã hoàn thành trong trường hợp bạn muốn chuyển sang bước tiếp theo hoặc kiểm tra tiến trình của mình bất cứ lúc nào. Để sử dụng dự án giải pháp, bạn cần làm theo hướng dẫn "Cài đặt bằng Cocoapods" bên dưới, sau đó chạy lệnh "pod update" trong thư mục solution/Navigation SDK Codelab.
Sau khi bạn sao chép kho lưu trữ xuống thiết bị, hãy dùng Xcode để mở thư mục Starter dưới dạng một dự án hiện có. Kiểm tra để đảm bảo dự án được tạo và chạy.
Kết nối một thiết bị hoặc thiết lập Trình mô phỏng XCode
4. Thêm Navigation SDK vào ứng dụng của bạn
Có 3 cách để tích hợp Navigation SDK vào một dự án XCode:lớp học lập trình này sử dụng CocoaPods. Để biết thông tin chi tiết về cách tích hợp bằng Swift Package Manager hoặc cách cài đặt theo cách thủ công bằng cách tải SDK xuống, hãy xem phần Tạo dự án Xcode và cài đặt Navigation SDK trong tài liệu Navigation SDK.
Cài đặt bằng Cocoapods
Nếu bạn chưa có công cụ CocoaPods, hãy cài đặt công cụ này trên macOS bằng cách chạy lệnh sau từ thiết bị đầu cuối. Để biết thông tin chi tiết, hãy xem Hướng dẫn Bắt đầu sử dụng CocoaPods.
sudo gem install cocoapods
Tạo một tệp mới có tên là Podfile trong thư mục dự án của bạn, bên trong thư mục starter/Navigation SDK Codelab (trong XCode, File > New > File > Other > Empty, save as "Podfile")
Thêm nội dung sau vào Podfile:
source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '15.0'
target 'Navigation SDK Codelab' do
pod 'GoogleNavigation', '9.1.1'
end
Tiết kiệm Podfile.
Mở cửa sổ dòng lệnh rồi thay đổi thư mục thành vị trí mà bạn đã lưu Podfile (đây phải là thư mục "starter/Navigation SDK Codelab" trong kho lưu trữ lớp học lập trình)
cd "<path-to-starter-project-folder>/Navigation SDK Codelab"
Chạy lệnh pod install. Thao tác này sẽ cài đặt các API được chỉ định trong Podfile, cùng với mọi phần phụ thuộc
pod install
Đóng Xcode, sau đó mở tệp .xcworkspace của dự án để chạy Xcode. Từ thời điểm này trở đi, bạn phải sử dụng tệp .xcworkspace để mở dự án.
Kiểm tra để đảm bảo bạn đã thêm một thư mục Pods vào cấu trúc dự án và thư mục đó có chứa các Pods "GoogleMaps" và "GoogleNavigation".
Thêm khoá API
Thêm khoá API vào AppDelegate.swift của bạn như sau:
- Thêm các câu lệnh nhập sau:
import GoogleMaps
import GoogleNavigation
- Thêm nội dung sau vào phương thức
application(_:didFinishLaunchingWithOptions:):
GMSServices.provideAPIKey("YOUR_API_KEY")
Thay thế "YOUR_API_KEY" bằng khoá API mà bạn đã tạo ở bước trước.
Tạo dự án và sửa mọi lỗi.
5. Định cấu hình quyền cho ứng dụng
Navigation SDK phụ thuộc vào tín hiệu GPS để cung cấp vị trí được điều chỉnh cho phù hợp với đường và hướng dẫn từng chặng, vì vậy, ứng dụng của bạn sẽ cần yêu cầu người dùng cấp quyền truy cập vào dữ liệu vị trí chính xác.
Để làm việc này, bạn sẽ thêm một số thuộc tính vào Info.plist của ứng dụng trong Xcode, thêm một số mã vào ứng dụng để yêu cầu người dùng cấp quyền trong thời gian chạy và xử lý mọi lỗi, chẳng hạn như quyền không được cấp hoặc vị trí không có sẵn.
Mở Info.plist trong Xcode. Nó phải trông giống như thế này.
Yêu cầu cấp quyền truy cập thông tin vị trí chính xác
Bạn có thể thêm các giá trị mới bằng cách di con trỏ chuột lên hàng "Information Property List" (Danh sách thuộc tính thông tin) cho đến khi thấy biểu tượng "+" xuất hiện. Nhấp vào "+" để xem hộp thoại có tên tài sản được đề xuất, nhưng lưu ý rằng bạn cũng có thể thêm tài sản theo cách thủ công.
Thêm các thuộc tính và giá trị sau vào Info.plist:
Thuộc tính | Giá trị |
Quyền riêng tư – Luôn bật dịch vụ vị trí và mô tả về việc sử dụng khi đang dùng | Ứng dụng này cần thông tin vị trí của thiết bị để cung cấp chỉ đường từng chặng |
Quyền riêng tư – Vị trí khi sử dụng – Nội dung mô tả về việc sử dụng | Ứng dụng này cần thông tin vị trí của thiết bị để cung cấp chỉ đường từng chặng |
allowsBackgroundLocationUpdates | NÊN |
Yêu cầu cấp quyền truy cập thông tin vị trí ở chế độ nền
Thêm các thuộc tính và giá trị sau vào Info.plist:
UIBackgroundModes > Thêm hàng > Item 0: App registers for location updates (chọn giá trị này trong danh sách thả xuống gồm các đề xuất)
Sau khi hoàn tất, Info.plist sẽ có dạng như sau.
Yêu cầu quyền truy cập thông tin vị trí trong thời gian chạy
Thêm các câu lệnh nhập sau vào ViewController.swift:
import GoogleNavigation
Thêm khai báo sau vào lớp ViewController:
var locationManager: CLLocationManager!
Thêm một phương thức ghi đè cho loadView() và gọi locationManager.requestAlwaysAuthorization():
override func loadView() {
locationManager = CLLocationManager()
locationManager.requestAlwaysAuthorization()
Giờ đây, ứng dụng của bạn sẽ yêu cầu người dùng cung cấp thông tin vị trí và cung cấp thông tin đó cho ứng dụng nếu họ cấp quyền .
Yêu cầu cấp quyền hiển thị thông báo
Thêm mã sau vào loadView() để yêu cầu người dùng cấp quyền hiện thông báo. Đây là quyền bắt buộc để hiện hướng dẫn về thao tác điều hướng.
UNUserNotificationCenter.current().requestAuthorization(options: [.alert]) {
granted, error in
// Handle denied authorization to display notifications.
if !granted || error != nil {
print("User rejected request to display notifications.")
}
}
Tạo và chạy ứng dụng, đồng thời kiểm tra để đảm bảo bạn được nhắc chia sẻ vị trí và bật thông báo.
6. Thêm giao diện người dùng điều hướng
Trong bước này, bạn sẽ thêm một bản đồ và định cấu hình bản đồ đó để hiện một vị trí. Sau đó, bạn sẽ cho người dùng thấy một hộp thoại có các điều khoản sử dụng Navigation SDK.
Thêm chế độ xem bản đồ vào ứng dụng
Thêm dòng này để khai báo một biến GMSMapView trong ViewController của bạn.
var mapView: GMSMapView!
Thêm mã sau vào loadView() trong Viewcontroller.swift để khởi động bản đồ.
let camera = GMSCameraPosition.camera(withLatitude: 51.483174, longitude: -0.177369, zoom: 14)
let options = GMSMapViewOptions()
options.camera = camera
options.frame = .zero
mapView = GMSMapView(options: options)
view = mapView
Tạo và chạy ứng dụng, bạn sẽ thấy một bản đồ được căn giữa ở phía tây nam London.
Hiện hộp thoại điều khoản sử dụng sản phẩm Navigation SDK
Thêm mã sau vào ViewController.swift trong cùng phương thức loadView() như mã trước. Thao tác này sẽ cho thấy điều khoản sử dụng dành cho người dùng cuối của Navigation SDK. Nếu không được chấp nhận, chế độ chỉ đường sẽ không được bật.
// Show the terms and conditions.
let companyName = "Navigation SDK Codelab"
GMSNavigationServices.showTermsAndConditionsDialogIfNeeded(withCompanyName: companyName) { termsAccepted in
if termsAccepted {
// Enable navigation if the user accepts the terms.
self.mapView.isNavigationEnabled = true
// Request authorization for alert notifications which deliver guidance instructions
// in the background.
} else {
// Handle the case when the user rejects the terms and conditions.
}
}
Tạo bản dựng và chạy ứng dụng để xem hộp thoại.
7. Thêm trình nghe cho các sự kiện điều hướng chính
Bước này sẽ hướng dẫn bạn cách thiết lập trình nghe cho các sự kiện chính, chẳng hạn như đến đích hoặc khi người lái xe đổi tuyến đường.
Để theo dõi các sự kiện này, bộ điều khiển khung hiển thị của bạn phải áp dụng giao thức GMSNavigatorListener.
Thêm giao thức này vào phần định nghĩa lớp trong ViewController.swift.
class ViewController: UIViewController,
GMSNavigatorListener {
Bây giờ, hãy thêm một dòng mã để thiết lập trình nghe trong loadView():
// Add a listener for GMSNavigator.
mapView.navigator?.add(self)
Cuối cùng, hãy thêm 2 phương thức vào lớp của bạn để xử lý các sự kiện đang được tạo.
// Listener to handle arrival events.
func navigator(_ navigator: GMSNavigator, didArriveAt waypoint: GMSNavigationWaypoint) {
print("You have arrived at: \(waypoint.title)")
}
// Listener for route change events.
func navigatorDidChangeRoute(_ navigator: GMSNavigator) {
print("The route has changed.")
}
8. Đặt điểm đến và bắt đầu nhận chỉ dẫn
Phần này sẽ hướng dẫn bạn cách đặt đích đến và bắt đầu hướng dẫn chỉ đường.
Tạo một hàm mới cho logic điều hướng.
Trước tiên, hãy thêm một hàm mới tên là startNav() vào ViewController. Thao tác này sẽ chứa logic để đặt một điểm đến và bắt đầu chỉ đường.
// Create a route and start guidance.
@objc func startNav() {
}
Tạo Waypoint cho đích đến.
Tiếp theo, hãy tạo một mảng đích đến có một điểm tham chiếu duy nhất.
// Create a route and start guidance.
@objc func startNav() {
var destinations = [GMSNavigationWaypoint]()
destinations.append(
GMSNavigationWaypoint.init(
placeID: "ChIJH-tBOc4EdkgRJ8aJ8P1CUxo",
title: "Trafalgar Square")!)
}
Gọi setDestinations()và xử lý phản hồi.
Tiếp theo, hãy gọi setDestinations và xử lý GMSRouteStatus được trả về.
Nếu GMSRouteStatus là "OK", hãy bắt đầu hướng dẫn bằng cách đặt isGuidanceActive=true trên đối tượng navigator của mapView. Nếu không, hãy in một câu lệnh để cho biết đã xảy ra lỗi.
Nếu giá trị GMSRouteStatus được trả về là "OK", hãy bắt đầu mô phỏng việc lái xe dọc theo tuyến đường bằng cách gọi mapView.locationSimulator.simulateLocationsAlongExistingRoute().
// Create a route and start guidance.
@objc func startNav() {
var destinations = [GMSNavigationWaypoint]()
destinations.append(
GMSNavigationWaypoint.init(
placeID: "ChIJH-tBOc4EdkgRJ8aJ8P1CUxo",
title: "Trafalgar Square")!)
mapView.navigator?.setDestinations(
destinations
) { routeStatus in
guard routeStatus == .OK else {
print("Handle route statuses that are not OK.")
return
}
//If routeStatus is OK, start guidance.
self.mapView.navigator?.isGuidanceActive = true
//start simulating driving along the route. self.mapView.locationSimulator?.simulateLocationsAlongExistingRoute()
self.mapView.cameraMode = .following
}
}
Xử lý các trạng thái lỗi thường gặp
Việc xử lý lỗi GMSRouteStatus một cách rõ ràng hơn sẽ rất hữu ích, đặc biệt là khi gỡ lỗi các vấn đề ban đầu với ứng dụng mới của bạn. Ví dụ: bạn có thể thấy rằng ban đầu bạn thường xuyên gặp phải lỗi về quyền truy cập thông tin vị trí, khoá API hoặc "không tìm thấy tuyến đường" do chế độ gỡ lỗi của bạn. Vì vậy, việc xử lý các trạng thái lỗi này có thể hữu ích.
Thêm mã xử lý các trường hợp cụ thể này và in một câu lệnh ra bảng điều khiển.
mapView.navigator?.setDestinations(
destinations
) { routeStatus in
guard routeStatus == .OK else {
print("Handle route statuses that are not OK.")
switch routeStatus {
case .locationUnavailable:
print("Location unavailable.") //check permissions
case .noRouteFound:
print("No route found.") //check start location and destination
case .waypointError:
print("Waypoint error") //check Place ID
default:
print("Not sure what happened")
}
return
}
Thêm nút để bắt đầu hướng dẫn chỉ đường
Cuối cùng, hãy thêm một nút vào giao diện người dùng và kết nối nút đó với phương thức startNav. Tạo một phương thức có tên là makeButton() bằng mã sau. Gọi hàm makeButton() từ loadView().
// Add a button to the view.
func makeButton() {
// A button to start navigation.
let navButton = UIButton(frame: CGRect(x: 5, y: 150, width: 200, height: 35))
navButton.backgroundColor = .blue
navButton.alpha = 0.5
navButton.setTitle("Start navigation", for: .normal)
navButton.addTarget(self, action: #selector(startNav), for: .touchUpInside)
self.mapView.addSubview(navButton)
}
Tạo và chạy ứng dụng của bạn.
Lưu ý: chạy mã trong
startNav()
sẽ gọi
setDestinations()
phương thức tính phí sau khi sử dụng 1.000 đích đến đầu tiên. Hãy xem phần Mức sử dụng và phí để biết thêm thông tin.
9. Xin chúc mừng!
Bạn đã đến nơi!
Bạn đã tạo một ứng dụng đơn giản cung cấp hướng dẫn đường đi từng chặng đến một điểm đến bằng cách sử dụng Navigation SDK của Google Maps Platform.
Bạn đã định cấu hình quyền cho ứng dụng và hộp thoại điều khoản dành cho người dùng cuối của Navigation SDK, đồng thời chỉ định một đích đến bằng cách sử dụng Mã địa điểm. Bạn đã xử lý nhiều trạng thái thành công và lỗi trong ứng dụng của mình.
10. Tiến xa hơn
Nếu bạn muốn phát triển ứng dụng hơn nữa, hãy xem các chủ đề sau để lấy cảm hứng.
- Nghe thêm các sự kiện điều hướng. Thêm mã để hiển thị thông báo nếu thời gian hoặc khoảng cách còn lại vượt quá một ngưỡng.
- Tuỳ chỉnh giao diện điều hướng.
- Nếu bạn muốn thử thách hơn, hãy xem liệu bạn có thể thêm một bộ chọn địa điểm Places API để cho phép người dùng đặt đích đến hay không. Lưu ý: Các ứng dụng minh hoạ Navigation SDK có một cách triển khai mẫu. Chạy
pod try GoogleNavigationtrong thư mục dự án để xem mã.