Créez une application de navigation iOS simple en Swift avec le SDK Navigation de Google Maps Platform
À propos de cet atelier de programmation
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é.
Prérequis
- Connaissances du développement de base d'applications iOS dans Swift
- Connaissances des concepts de base du SDK Google Maps, comme la création d'une carte centrée sur un emplacement spécifique
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.
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.
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".
Ajouter votre clé API
Ajoutez votre clé API à votre fichier AppDelegate.swift
comme suit :
- Ajoutez les instructions d'importation suivantes:
import GoogleMaps
import GoogleNavigation
- 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'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.
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.
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.
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.
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.
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.
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.