Créez une application de navigation iOS simple en Swift avec le SDK Navigation de Google Maps Platform

Créez une application de navigation iOS simple en Swift avec le SDK Navigation de Google Maps Platform

À propos de cet atelier de programmation

subjectDernière mise à jour : oct. 10, 2024
account_circleRédigé par Ed Boiling

1. Avant de commencer

Cet atelier de programmation vous explique comment créer une application iOS simple qui utilise le SDK Navigation Google Maps Platform pour accéder à une destination préconfigurée.

Voici à quoi ressemblera votre application une fois que vous aurez terminé.

7e7c194a98d6dfa4.png

Prérequis

Points abordés

  • Comment créer une application iOS Swift simple qui utilise le SDK Navigation pour naviguer vers une destination
  • Intégrer le SDK Navigation à partir du dépôt Cocoapods distant
  • Gérer les autorisations d'accéder à la position et le contrat utilisateur avec les conditions d'utilisation du SDK Navigation
  • Initialiser le SDK
  • Définir une destination et lancer les instructions de navigation

Prérequis

  • La dernière version stable de XCode
  • Un compte et un projet Google pour lesquels la facturation est activée
  • Un appareil iOS ou un appareil émulé exécuté dans le simulateur Xcode Quel que soit votre choix, il doit répondre aux exigences minimales requises pour le SDK Navigation.

2. Configuration

Si vous ne disposez pas encore d'un compte Google Cloud Platform et d'un projet pour lequel la facturation est activée, configurez votre projet Google Cloud en suivant les instructions de démarrage de Google Maps Platform.

Sélectionner un projet Google Cloud dans la console

Dans Cloud Console, cliquez sur le menu déroulant des projets, puis sélectionnez celui que vous souhaitez utiliser pour cet atelier de programmation.

Menu déroulant du sélecteur de projet dans la console Google Cloud

Activer le SDK Navigation dans votre projet

Activez les API et les SDK Google Maps Platform requis pour cet atelier de programmation depuis Google Cloud Marketplace.

Accédez à la page API et Services > bibliothèque dans la console Google Cloud, puis recherchez "Navigation SDK".

Un résultat de recherche doit s'afficher.

Écran de la bibliothèque d'API dans la console Google Cloud, affichant la page du SDK Navigation.

Cliquez sur Navigation SDK (SDK Navigation) pour ouvrir la page d'informations détaillées sur le produit. Cliquez sur Activer pour activer le SDK dans votre projet.

Répétez cette procédure pour le SDK Google Maps pour iOS.

Créer une clé API

Générez une clé API sur la page Identifiants de Cloud Console. Toutes les requêtes envoyées à Google Maps Platform nécessitent une clé API. Sur la page "Identifiants" de la console. Cliquez sur "+ Créer des identifiants" en haut de la page, puis sélectionnez "Clé API" dans les options.

Pour une utilisation en production, il est recommandé de définir une restriction d'application pour votre clé API. Cette étape est facultative pour cet atelier de programmation.

3. Obtenir les exemples de fichiers de projet

Cette section explique comment configurer un projet d'application Xcode vide de base en clonant des fichiers à partir du dépôt GitHub pour cet atelier de programmation. Le dépôt GitHub contient les versions avant et après le code de l'atelier de programmation. Cet atelier de programmation commencera par un modèle de projet vide et se terminera par un projet finalisé. Si vous rencontrez des difficultés, vous pouvez utiliser le projet finalisé dans le dépôt comme référence.

Cloner le dépôt ou télécharger le code

Accédez au répertoire dans lequel vous souhaitez stocker l'atelier de programmation.

Ensuite, clonez le dépôt ou téléchargez le code:

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

Si vous n'avez pas installé git, cliquez sur ce bouton pour obtenir le code :

Pour vous aider à démarrer cet atelier de programmation le plus rapidement possible, le dépôt contient du code de démarrage dans le dossier Starter. Un projet Solution terminé est également disponible si vous souhaitez passer à l'étape suivante ou vérifier votre progression à tout moment. Pour utiliser le projet de solution, vous devez suivre la procédure "Installer à l'aide de CocoaPods" les instructions ci-dessous, puis exécutez la commande à partir du dossier solution/Navigation SDK Codelab.

Une fois le dépôt cloné en local, utilisez XCode pour ouvrir le dossier Starter en tant que projet existant. Vérifiez que le projet est compilé et exécuté.

Connecter un appareil ou configurer le simulateur Xcode

4. Ajouter le SDK Navigation à votre application

Il existe trois façons d'intégrer le SDK Navigation dans un projet XCode:cet atelier de programmation utilise CocoaPods. Pour savoir comment procéder à l'intégration à l'aide de Swift Package Manager ou pour installer manuellement le SDK en le téléchargeant, consultez Créer le projet Xcode et installer le SDK Navigation dans la documentation du SDK Navigation.

Installer à l'aide de CocoaPods

Si vous ne disposez pas encore de l'outil CocoaPods, installez-le sur macOS en exécutant la commande suivante à partir du terminal. Pour en savoir plus, consultez le guide de démarrage de CocoaPods.

sudo gem install cocoapods

Créez un fichier nommé Podfile dans le dossier de votre projet, dans le dossier du tutoriel de code du SDK Navigation/starter (dans XCode, File > New > File > Other > Empty, enregistrez sous "Podfile").

Ajoutez le contenu suivant à votre Podfile:

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

platform :ios, '15.0'

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

Économisez Podfile.

Ouvrez un terminal et accédez au répertoire dans lequel vous avez enregistré votre fichier Podfile (il doit s'agir du dossier "starter/Navigation SDK Codelab" du dépôt de l'atelier de programmation).

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

Exécutez la commande pod install. Cela installe les API spécifiées dans le Podfile, ainsi que toutes les éventuelles dépendances.

pod install

Fermez Xcode, puis ouvrez le fichier .xcworkspace de votre projet pour lancer Xcode. À partir de ce moment, vous devez utiliser le fichier .xcworkspace pour ouvrir le projet.

Vérifiez qu'un répertoire Pods a été ajouté à la structure du projet et qu'il contient les pods "GoogleMaps" et "GoogleNavigation".

6e81772ee067d452.png

Ajouter votre clé API

Ajoutez votre clé API à votre fichier AppDelegate.swift comme suit :

  1. Ajoutez les instructions d'importation suivantes:
import GoogleMaps
import GoogleNavigation
  1. Ajoutez le code suivant à votre méthode application(_:didFinishLaunchingWithOptions:):
GMSServices.provideAPIKey("YOUR_API_KEY")

Remplacez "YOUR_API_KEY". à l'aide de la clé API créée à l'étape précédente.

Créez votre projet et corrigez les erreurs éventuelles.

5. Configurer les autorisations de l&#39;application

Le SDK de navigation dépend des signaux GPS pour fournir une position précise et des itinéraires détaillés. Votre application devra donc demander à l'utilisateur d'autoriser l'accès aux données de localisation précises.

Pour ce faire, vous allez ajouter des propriétés à votre application Info.plist dans Xcode, ajouter du code à votre application pour demander l'autorisation de l'utilisateur au moment de l'exécution et gérer les erreurs telles que l'autorisation non accordée ou l'indisponibilité de la position.

Ouvrez Info.plist dans Xcode. L'aperçu devrait ressembler à ceci.

6532a85bd9ac8fb4.png

Demander l'autorisation d'accéder à la position exacte

Pour ajouter des valeurs, pointez sur la "Liste des propriétés d'information". jusqu'à ce que le signe "+" s'affiche. Cliquez sur le signe "+" pour afficher une boîte de dialogue contenant des suggestions de noms de propriétés. Notez que vous pouvez également ajouter des propriétés manuellement.

Ajoutez les propriétés et valeurs suivantes à Info.plist :

Propriété

Valeur

Confidentialité – Description de l'utilisation de votre position, toujours et lors de son utilisation

"Cette application a besoin de la position de votre appareil pour fournir des instructions de navigation détaillées"

Confidentialité – Localisation lors de l'utilisation, description de l'utilisation

"Cette application a besoin de la position de votre appareil pour fournir des instructions de navigation détaillées"

allowsBackgroundLocationUpdates

OUI

Demander l'autorisation d'accéder à la position en arrière-plan

Ajoutez les propriétés et valeurs suivantes à Info.plist :

UIBackgroundModes > Ajouter une ligne > Item 0: App registers for location updates (sélectionnez cette valeur dans la liste déroulante des suggestions)

Une fois l'opération terminée, le fichier Info.plist doit se présenter comme suit.

3b0c49018451d0ff.png

Demander l'accès à la position au moment de l'exécution

Ajoutez les instructions d'importation suivantes à ViewController.swift :

import GoogleNavigation

Ajoutez la déclaration suivante à votre classe ViewController :

var locationManager: CLLocationManager!

Ajoutez un forçage de méthode pour loadView() et appelez locationManager.requestAlwaysAuthorization() :

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

Votre application demandera à présent à l'utilisateur la position de l'utilisateur et la mettra à disposition de votre application s'il l'y autorise .

Demander l'autorisation d'afficher les notifications

Ajoutez le code suivant à loadView() pour demander à l'utilisateur l'autorisation d'afficher des notifications, ce qui est nécessaire pour afficher les instructions de manœuvre de navigation.

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

Créez et exécutez l'application, puis vérifiez que vous êtes invité à partager votre position et à activer les notifications.

ad5f665a21170c49.png

6. Ajouter une interface utilisateur de navigation

Au cours de cette étape, vous allez ajouter une carte et la configurer pour afficher un lieu. Vous devez ensuite afficher à l'utilisateur une boîte de dialogue contenant les conditions d'utilisation du SDK Navigation.

Ajouter une vue plan à votre application

Ajoutez cette ligne pour déclarer une variable GMSMapView dans votre ViewController.

var mapView: GMSMapView!

Ajoutez le code suivant à loadView() dans votre Viewcontroller.swift pour initialiser la carte.

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

Créez et exécutez votre application. Une carte centrée sur le sud-ouest de Londres devrait s'afficher.

1d46ce5c0851cae3.png

Afficher la boîte de dialogue des conditions d'utilisation du produit du SDK Navigation

Ajoutez le code suivant à ViewController.swift dans la même méthode loadView() que le code précédent. Les conditions d'utilisation du SDK Navigation pour l'utilisateur final s'affichent. Si vous ne les acceptez pas, la navigation ne sera pas activée.

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

Compilez et exécutez l'application pour afficher la boîte de dialogue.

29f17ae5b4c07c9f.png

7. Ajouter des écouteurs pour les événements de navigation clavier

Cette étape vous explique comment configurer des écouteurs pour des événements clés, tels que l'arrivée à une destination ou le changement de route du conducteur.

Pour écouter ces événements, votre contrôleur de vue doit adopter le protocole GMSNavigatorListener.

Ajoutez ce protocole à la définition de classe dans ViewController.swift.

class ViewController: UIViewController,
                      GMSNavigatorListener {

Ajoutez maintenant une ligne de code pour configurer l'écouteur dans loadView():.

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

Enfin, ajoutez deux méthodes à votre classe pour gérer les événements déclenchés.

// 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. Définissez une destination et démarrez le guidage

Cette section vous explique comment définir une destination et lancer le guidage de la navigation.

Créez une fonction pour la logique de navigation.

Tout d'abord, ajoutez une fonction appelée startNav() à votre ViewController. Cela contiendra la logique permettant de définir une destination et de lancer la navigation.

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

Créez un Waypoint pour la destination.

Ensuite, créez un tableau de destinations contenant un seul point de cheminement.

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

Appelez setDestinations()et gérez la réponse.

Appelez ensuite setDestinations et gérez le GMSRouteStatus renvoyé.

Si GMSRouteStatus indique "OK", démarrez le guidage en définissant isGuidanceActive=true sur l'objet navigator de mapView. Sinon, imprimez une instruction pour indiquer qu'une erreur s'est produite.

Si la valeur GMSRouteStatus renvoyée est "OK", commencez à simuler la conduite sur l'itinéraire en appelant 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
  }
}

Gérer les états d'erreur courants

Il est utile de gérer les erreurs GMSRouteStatus de manière plus explicite, en particulier lors du débogage des problèmes initiaux liés à votre nouvelle application. Par exemple, vous pouvez constater que vous obtenez l'autorisation d'accéder à la position, une clé API ou le message "Aucun itinéraire trouvé". des erreurs plus fréquentes au début en raison de votre configuration de débogage. Il peut donc être utile de gérer ces états d'erreur.

Ajoutez du code qui gère ces cas spécifiques et affiche une instruction dans la console.

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
  }

Ajouter un bouton pour lancer le guidage de la navigation

Enfin, ajoutez un bouton à l'UI et associez-le à la méthode startNav. Créez une méthode appelée makeButton() avec le code suivant. Appelez votre fonction makeButton() à partir de 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)
}

Créez et exécutez votre application.

Remarque: L'exécution du code

startNav()

appellera

setDestinations()

qui entraîne des frais après l'utilisation des 1 000 premières destinations. Pour en savoir plus, consultez la page Utilisation et facturation.

9. Félicitations !

Bravo ! Vous êtes arrivé à destination.

7a69dcb75c904d7.png

Vous avez créé une application simple qui fournit des instructions de navigation détaillées vers une destination à l'aide du SDK Navigation Google Maps Platform.

Vous avez configuré les autorisations de l'application et la boîte de dialogue des conditions d'utilisation du SDK Navigation, et spécifié une destination à l'aide d'un ID de lieu. Vous avez géré différents états de réussite et d'erreur dans votre application.

10. Aller plus loin

Si vous voulez aller plus loin dans le développement de votre application, vous pouvez vous inspirer des articles ci-dessous.

  • Écoutez d'autres événements de navigation. Ajoutez du code pour afficher un message si la durée ou la distance restante dépasse un certain seuil.
  • Personnalisez l'interface de navigation.
  • Si vous souhaitez relever un défi plus difficile, essayez d'ajouter un sélecteur de lieu de l'API Places pour permettre à l'utilisateur de définir la destination. Conseil: Les applications de démonstration du SDK Navigation disposent d'un exemple d'implémentation. Exécutez pod try GoogleNavigation dans le dossier de votre projet pour afficher le code.