สร้างแอปการนำทาง iOS แบบง่ายใน Swift ด้วย Google Maps Platform Navigation SDK

1. ก่อนเริ่มต้น

Codelab นี้จะสอนให้คุณสร้างแอป iOS แบบง่ายที่ใช้ SDK การนำทางของ Google Maps Platform เพื่อนำทางไปยังปลายทางที่กำหนดค่าไว้ล่วงหน้า

นี่คือหน้าตาของแอปเมื่อคุณดำเนินการเสร็จสิ้น

7e7c194a98d6dfa4.png

ข้อกำหนดเบื้องต้น

สิ่งที่คุณจะได้เรียนรู้

  • วิธีสร้างแอป Swift สำหรับ iOS แบบง่ายที่ใช้ Navigation SDK เพื่อนำทางไปยังปลายทาง
  • วิธีผสานรวม Navigation SDK จากที่เก็บ Cocoapods ระยะไกล
  • วิธีจัดการสิทธิ์เข้าถึงตำแหน่งและข้อตกลงของผู้ใช้กับข้อกำหนดผู้ใช้ปลายทางของ Navigation SDK
  • วิธีเริ่มต้น SDK
  • วิธีกำหนดจุดหมายและเริ่มคำแนะนำการนำทาง

สิ่งที่ต้องมี

  • XCode เวอร์ชันเสถียรล่าสุด
  • บัญชี Google และโปรเจ็กต์ที่เปิดใช้การเรียกเก็บเงิน
  • อุปกรณ์ iOS หรืออุปกรณ์จำลองที่ทำงานในโปรแกรมจำลอง XCode ไม่ว่าคุณจะเลือกแบบใด แอปต้องเป็นไปตามข้อกำหนดขั้นต่ำสำหรับ Navigation SDK

2. ตั้งค่า

หากยังไม่มีบัญชี Google Cloud Platform และโปรเจ็กต์ที่เปิดใช้การเรียกเก็บเงิน ให้ตั้งค่าโปรเจ็กต์ Google Cloud โดยทําตามวิธีการเริ่มต้นใช้งาน Google Maps Platform

เลือกโปรเจ็กต์ Google Cloud ในคอนโซล

ใน Cloud Console ให้คลิกเมนูแบบเลื่อนลงของโปรเจ็กต์ แล้วเลือกโปรเจ็กต์ที่ต้องการใช้สำหรับโค้ดแล็บนี้

เมนูแบบเลื่อนลงของตัวเลือกโปรเจ็กต์ในคอนโซล Google Cloud

เปิดใช้ Navigation SDK ในโปรเจ็กต์

เปิดใช้ Google Maps Platform API และ SDK ที่จําเป็นสําหรับโค้ดแล็บนี้ใน Google Cloud Marketplace

ไปที่ API และ บริการ > Library ใน Google Cloud Console และค้นหา "navigation SDK"

คุณควรเห็นผลการค้นหา 1 รายการ

หน้าจอไลบรารี API ในคอนโซล Google Cloud ที่แสดงหน้า Navigation SDK

คลิก Navigation SDK เพื่อเปิดหน้ารายละเอียดผลิตภัณฑ์ คลิกเปิดใช้เพื่อเปิดใช้ SDK ในโปรเจ็กต์

ทำขั้นตอนนี้ซ้ำสำหรับ Google Maps SDK สำหรับ iOS

สร้างคีย์ API

สร้างคีย์ API ในหน้าข้อมูลเข้าสู่ระบบของ Cloud Console คำขอทั้งหมดที่ส่งไปยัง Google Maps Platform ต้องใช้คีย์ API ในหน้าข้อมูลเข้าสู่ระบบในคอนโซล คลิก "+สร้างข้อมูลเข้าสู่ระบบ" ที่ด้านบนของหน้า แล้วเลือก "คีย์ API" จากตัวเลือก

สําหรับการใช้งานจริง แนวทางปฏิบัติแนะนำคือตั้งค่าการจํากัดแอปพลิเคชันสำหรับคีย์ API แต่คุณเลือกไม่ทำก็ได้ในโค้ดแล็บนี้

3. รับไฟล์โครงการตัวอย่าง

ส่วนนี้จะอธิบายวิธีตั้งค่าโปรเจ็กต์แอป XCode พื้นฐานที่ว่างเปล่าโดยการโคลนไฟล์จากที่เก็บ GitHub สำหรับ Codelab นี้ Repo ของ Github มีโค้ด Codelab เวอร์ชันก่อนและหลัง Codelab จะเริ่มต้นด้วยเทมเพลตโปรเจ็กต์ที่ว่างเปล่า และสร้างเป็นสถานะที่เสร็จสมบูรณ์แล้ว คุณใช้โปรเจ็กต์ที่เสร็จแล้วในรีโปเป็นข้อมูลอ้างอิงได้หากพบปัญหา

โคลนที่เก็บหรือดาวน์โหลดโค้ด

ไปที่ไดเรกทอรีที่ต้องการจัดเก็บโค้ดแล็บ

จากนั้นโคลนที่เก็บหรือดาวน์โหลดโค้ด โดยทำดังนี้

git clone https://github.com/googlemaps-samples/codelab-navigation-101-ios-swift

หากยังไม่ได้ติดตั้ง git ให้คลิกปุ่มนี้เพื่อรับโค้ด

เพื่อช่วยให้คุณเริ่มต้นใช้งานได้เร็วที่สุด ที่เก็บจะมีโค้ดเริ่มต้นบางส่วนในโฟลเดอร์ Starter เพื่อช่วยให้คุณทำตามขั้นตอนไปพร้อมกันด้วย Codelab นี้ นอกจากนี้ยังมีโปรเจ็กต์ Solution ที่เสร็จแล้วในกรณีที่คุณต้องการข้ามไปข้างหน้าหรือตรวจสอบความคืบหน้าได้ทุกเมื่อ หากต้องการใช้โปรเจ็กต์โซลูชัน คุณจะต้องทําตามวิธีการ "ติดตั้งโดยใช้ Cocoapods" ด้านล่าง จากนั้นเรียกใช้คําสั่ง "pod update" จากโฟลเดอร์ solution/Navigation SDK Codelab

เมื่อโคลนที่เก็บในเครื่องแล้ว ให้ใช้ XCode เพื่อเปิดโฟลเดอร์ Starter เป็นโปรเจ็กต์ที่มีอยู่ ตรวจสอบว่าโปรเจ็กต์สร้างและทํางานได้

เชื่อมต่ออุปกรณ์หรือตั้งค่าเครื่องจำลอง XCode

4. เพิ่ม Navigation SDK ลงในแอป

การผสานรวม Navigation SDK เข้ากับโปรเจ็กต์ XCode มีอยู่ 3 วิธีด้วยกัน โดย Codelab นี้ใช้ CocoaPods ดูรายละเอียดเกี่ยวกับวิธีผสานรวมโดยใช้ Swift Package Manager หรือวิธีติดตั้งด้วยตนเองโดยการดาวน์โหลด SDK ได้ที่สร้างโปรเจ็กต์ Xcode และติดตั้ง Navigation SDK ในเอกสารประกอบของ Navigation SDK

ติดตั้งโดยใช้ CocoaPods

หากยังไม่มีเครื่องมือ CocoaPods ให้ติดตั้งใน macOS โดยเรียกใช้คำสั่งต่อไปนี้จากเทอร์มินัล โปรดดูรายละเอียดในคู่มือการเริ่มต้นใช้งาน CocoaPods

sudo gem install cocoapods

สร้างไฟล์ใหม่ชื่อ Podfile ในโฟลเดอร์โครงการ ภายในโฟลเดอร์เริ่มต้น/โหมดการนำทาง SDK Codelab (ใน XCode, File > New > File > Other > Empty ให้บันทึกเป็น "Podfile")

เพิ่มเนื้อหาต่อไปนี้ลงใน Podfile

source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '15.0'

target 'Navigation SDK Codelab' do
  pod 'GoogleNavigation', '9.1.1'
end

ประหยัด Podfile

เปิดเทอร์มินัลและเปลี่ยนไดเรกทอรีไปยังตำแหน่งที่คุณบันทึก Podfile (ควรเป็นโฟลเดอร์ "starter/Navigation SDK Codelab" ในที่เก็บข้อมูล Codelab)

cd "<path-to-starter-project-folder>/Navigation SDK Codelab"

เรียกใช้คำสั่ง pod install การดำเนินการนี้จะติดตั้ง API ที่ระบุไว้ใน Podfile รวมถึงทรัพยากร Dependency ทั้งหมด

pod install

ปิด Xcode แล้วเปิดไฟล์ .xcworkspace ของโปรเจ็กต์เพื่อเปิด Xcode ตั้งแต่นี้เป็นต้นไป คุณต้องใช้ไฟล์ .xcworkspace เพื่อเปิดโครงการ

ตรวจสอบว่าได้เพิ่มไดเรกทอรี Pods ลงในโครงสร้างโปรเจ็กต์แล้ว และมี Pods "GoogleMaps" และ "GoogleNavigation"

6e81772ee067d452.png

เพิ่มคีย์ API

เพิ่มคีย์ API ลงใน AppDelegate.swift ดังนี้

  1. เพิ่มคำสั่งการนําเข้าต่อไปนี้
import GoogleMaps
import GoogleNavigation
  1. เพิ่มโค้ดต่อไปนี้ลงในเมธอด application(_:didFinishLaunchingWithOptions:)
GMSServices.provideAPIKey("YOUR_API_KEY")

แทนที่ "YOUR_API_KEY" ด้วยคีย์ API ที่สร้างไว้ในขั้นตอนก่อนหน้า

สร้างโปรเจ็กต์และแก้ไขข้อผิดพลาด

5. กำหนดค่าสิทธิ์ของแอป

SDK การนำทางอาศัยสัญญาณ GPS เพื่อให้ตำแหน่งที่อยู่บนถนนและการนำทางแบบเลี้ยวต่อเลี้ยว ดังนั้นแอปของคุณจะต้องขอให้ผู้ใช้ให้สิทธิ์เข้าถึงข้อมูลตำแหน่งที่แน่นอน

ในการดำเนินการนี้ คุณจะเพิ่มพร็อพเพอร์ตี้บางรายการลงในแอป Info.plist ใน Xcode, เพิ่มโค้ดบางรายการลงในแอปเพื่อขอสิทธิ์จากผู้ใช้ระหว่างรันไทม์ และจัดการข้อผิดพลาดต่างๆ เช่น การไม่มีสิทธิ์หรือตำแหน่งไม่พร้อมใช้งาน

เปิด Info.plist ใน Xcode ซึ่งควรมีหน้าตาเช่นนี้

6532a85bd9ac8fb4.png

ขอสิทธิ์เข้าถึงตำแหน่งที่แน่นอน

เพิ่มค่าใหม่ได้ โดยเลื่อนตัวชี้เมาส์ไปเหนือ "รายการพร็อพเพอร์ตี้ข้อมูล" จนกว่าคุณจะเห็นเครื่องหมาย "+" ปรากฏขึ้น คลิก "+" เพื่อดูกล่องโต้ตอบที่มีชื่อพร็อพเพอร์ตี้ที่แนะนํา แต่โปรดทราบว่าคุณเพิ่มพร็อพเพอร์ตี้ด้วยตนเองได้เช่นกัน

เพิ่มพร็อพเพอร์ตี้และค่าต่อไปนี้ลงใน Info.plist

พร็อพเพอร์ตี้

ค่า

ความเป็นส่วนตัว - คำอธิบายการใช้งานตำแหน่งตลอดเวลาและเมื่อใช้งาน

"แอปนี้ต้องใช้ตำแหน่งของอุปกรณ์เพื่อแสดงการนำทางแบบเลี้ยวต่อเลี้ยว"

คำอธิบายการใช้งานตำแหน่งขณะใช้งานข้อมูลส่วนบุคคล -

"แอปนี้ต้องใช้ตำแหน่งของอุปกรณ์เพื่อแสดงการนำทางแบบเลี้ยวต่อเลี้ยว"

allowsBackgroundLocationUpdates

ควร

ขอสิทธิ์เข้าถึงตำแหน่งในเบื้องหลัง

เพิ่มพร็อพเพอร์ตี้และค่าต่อไปนี้ลงใน Info.plist

UIBackgroundModes เพิ่มแถว > Item 0: App registers for location updates (เลือกค่านี้จากรายการคำแนะนำแบบเลื่อนลง)

Info.plist ควรมีลักษณะดังตัวอย่างนี้เมื่อคุณดำเนินการเสร็จแล้ว

3b0c49018451d0ff.png

ขอสิทธิ์เข้าถึงตำแหน่งขณะรันไทม์

เพิ่มคำสั่งการนําเข้าต่อไปนี้ลงใน ViewController.swift

import GoogleNavigation

เพิ่มการประกาศต่อไปนี้ลงในคลาส ViewController

var locationManager: CLLocationManager!

เพิ่มการลบล้างเมธอดสําหรับ loadView() และเรียกใช้ locationManager.requestAlwaysAuthorization()

override func loadView() {
        locationManager = CLLocationManager()
        locationManager.requestAlwaysAuthorization()

ตอนนี้แอปจะขอตำแหน่งจากผู้ใช้และทำให้ตำแหน่งพร้อมใช้งานสำหรับแอปหากผู้ใช้ให้สิทธิ์

ขอสิทธิ์แสดงการแจ้งเตือน

เพิ่มโค้ดต่อไปนี้ลงใน LoadingView() เพื่อขอสิทธิ์จากผู้ใช้ในการแสดงการแจ้งเตือน ซึ่งจำเป็นสำหรับการแสดงวิธีการจัดวางการนำทาง

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.")
          }
        }

บิลด์และเรียกใช้แอป แล้วตรวจสอบว่าคุณได้รับข้อความแจ้งให้แชร์ตำแหน่งและเปิดใช้การแจ้งเตือน

ad5f665a21170c49.png

6. เพิ่มอินเทอร์เฟซผู้ใช้สำหรับการไปยังส่วนต่างๆ

ในขั้นตอนนี้ คุณจะเพิ่มแผนที่และกำหนดค่าให้แสดงตำแหน่ง จากนั้นคุณจะแสดงกล่องโต้ตอบที่มีข้อกำหนดในการใช้งาน Navigation SDK ให้แก่ผู้ใช้

เพิ่มมุมมองแผนที่ลงในแอป

เพิ่มบรรทัดนี้เพื่อประกาศตัวแปร GMSMapView ใน ViewController

var mapView: GMSMapView!

เพิ่มโค้ดต่อไปนี้ลงใน loadView() ใน Viewcontroller.swift เพื่อเริ่มต้นแผนที่

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

สร้างและเรียกใช้แอป คุณควรเห็นแผนที่ที่กําหนดศูนย์กลางไว้ที่ลอนดอนตะวันตกเฉียงใต้

1d46ce5c0851cae3.png

แสดงกล่องโต้ตอบข้อกำหนดในการใช้งานผลิตภัณฑ์ Navigation SDK

เพิ่มโค้ดต่อไปนี้ลงใน ViewController.swift ในเมธอด loadView() แบบเดียวกันกับโค้ดก่อนหน้า การดำเนินการนี้จะแสดงข้อกำหนดในการใช้งานของผู้ใช้ปลายทางสำหรับ Navigation SDK หากไม่ยอมรับ ระบบจะไม่เปิดใช้การนำทาง

// 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.
  }
}

สร้างและเรียกใช้แอปเพื่อดูกล่องโต้ตอบ

29f17ae5b4c07c9f.png

7. เพิ่ม Listener สำหรับเหตุการณ์การนำทางที่สำคัญ

ขั้นตอนนี้จะแสดงวิธีตั้งค่า Listeners สําหรับเหตุการณ์สําคัญ เช่น การมาถึงจุดหมาย หรือคนขับเปลี่ยนเส้นทาง

หากต้องการรับฟังเหตุการณ์เหล่านี้ คอนโทรลเลอร์ดูของคุณต้องใช้โปรโตคอล GMSNavigatorListener

เพิ่มโปรโตคอลนี้ลงในคําจํากัดความของคลาสใน ViewController.swift

class ViewController: UIViewController,
                      GMSNavigatorListener {

เพิ่มบรรทัดโค้ดเพื่อตั้งค่า Listener ใน loadView():

// Add a listener for GMSNavigator.
mapView.navigator?.add(self)

และสุดท้าย ให้เพิ่มวิธีการ 2 วิธีในชั้นเรียนเพื่อจัดการกับเหตุการณ์ที่เกิดขึ้น

// 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. กำหนดจุดหมายและเริ่มการแนะนำ

ส่วนนี้จะสอนวิธีตั้งค่าจุดหมายและเริ่มคำแนะนำการนำทาง

สร้างฟังก์ชันใหม่สำหรับตรรกะการนำทาง

ขั้นแรก ให้เพิ่มฟังก์ชันใหม่ที่ชื่อ startNav() ลงใน ViewController ซึ่งจะมีตรรกะในการกำหนดจุดหมายและเริ่มการนำทาง

// Create a route and start guidance.
@objc func startNav() {
}

สร้าง Waypoint สําหรับปลายทาง

จากนั้นสร้างอาร์เรย์ของปลายทางที่มีจุดแวะพักเดียว

// Create a route and start guidance.
@objc func startNav() {
  var destinations = [GMSNavigationWaypoint]()
  destinations.append(
    GMSNavigationWaypoint.init(
      placeID: "ChIJH-tBOc4EdkgRJ8aJ8P1CUxo",
      title: "Trafalgar Square")!)
}

โทร setDestinations()และจัดการคำตอบ

ถัดไป ให้โทรหา setDestinations และจัดการ GMSRouteStatus ที่แสดงขึ้น

หาก GMSRouteStatus เป็น "OK" ให้เริ่มคําแนะนําโดยตั้งค่า isGuidanceActive=true ในออบเจ็กต์ navigator ของ mapView หรือพิมพ์ใบแจ้งยอดเพื่อแสดงว่ามีข้อผิดพลาด

หากค่า GMSRouteStatus ที่แสดงผลเป็น "OK" ให้เริ่มจำลองการขับรถไปตามเส้นทางโดยโทรหา 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
  }
}

จัดการสถานะข้อผิดพลาดที่พบบ่อย

คุณควรจัดการข้อผิดพลาด GMSRouteStatus อย่างละเอียดยิ่งขึ้น โดยเฉพาะเมื่อแก้ไขข้อบกพร่องเบื้องต้นของแอปใหม่ เช่น คุณอาจพบว่าได้รับข้อผิดพลาดเกี่ยวกับสิทธิ์เข้าถึงตำแหน่ง คีย์ API หรือ "ไม่พบเส้นทาง" บ่อยขึ้นในช่วงแรกเนื่องจากการตั้งค่าการแก้ไขข้อบกพร่อง ดังนั้นการจัดการสถานะข้อผิดพลาดเหล่านี้จึงมีประโยชน์

เพิ่มโค้ดที่จัดการกับกรณีเฉพาะเหล่านี้และพิมพ์คำสั่งไปยังคอนโซล

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
  }

เพิ่มปุ่มเพื่อเริ่มคำแนะนำการนำทาง

สุดท้าย ให้เพิ่มปุ่มลงใน UI และเชื่อมต่อกับเมธอด startNav สร้างเมธอด makeButton() โดยใช้โค้ดต่อไปนี้ เรียกฟังก์ชัน makeButton() จาก 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)
}

สร้างและเรียกใช้แอป

หมายเหตุ: การเรียกใช้โค้ดใน

startNav()

จะเรียกเมธอด

setDestinations()

ซึ่งจะทำให้เกิดการเรียกเก็บเงินหลังจากมีการใช้ปลายทาง 1,000 รายการแรก โปรดดูข้อมูลเพิ่มเติมที่การใช้งานและการเรียกเก็บเงิน

9. ยินดีด้วย

เยี่ยม คุณมาถึงจุดหมายแล้ว

7a69dcb75c904d7.png

คุณได้สร้างแอปง่ายๆ ที่แสดงคำแนะนำการนำทางแบบเลี้ยวต่อเลี้ยวไปยังจุดหมายโดยใช้ Google Maps Platform Navigation SDK

คุณได้กำหนดค่าสิทธิ์ของแอปและกล่องโต้ตอบข้อกำหนดของผู้ใช้ปลายทางสำหรับ Navigation SDK รวมถึงระบุปลายทางโดยใช้รหัสสถานที่แล้ว คุณได้จัดการกับสถานะความสำเร็จและข้อผิดพลาดต่างๆ ในแอปของคุณ

10. สู่ขั้นต่อไป

หากต้องการพัฒนาแอปต่อไป โปรดดูหัวข้อต่อไปนี้เพื่อหาแรงบันดาลใจ

  • ฟังเหตุการณ์การนําทางเพิ่มเติม เพิ่มโค้ดเพื่อแสดงข้อความหากเวลาหรือระยะทางที่เหลืออยู่เกินเกณฑ์
  • ปรับแต่งอินเทอร์เฟซการนำทาง
  • หากต้องการความท้าทายที่มากขึ้น ลองดูว่าคุณสามารถเพิ่มเครื่องมือเลือกสถานที่ของ Places API เพื่อให้ผู้ใช้กำหนดจุดหมายได้หรือไม่ คำแนะนำ: แอปเดโม Navigation SDK มีตัวอย่างการใช้งาน เรียกใช้ pod try GoogleNavigation ในโฟลเดอร์โปรเจ็กต์เพื่อดูโค้ด