Comment tester le fonctionnement de vos applications Ionic avec le logiciel Xcode sur simulateur iOS d’iPhone et d’iPad ? Comment également tester ses applications Ionic directement sur son smartphone Apple avec Xcode ?
Dans ce tuto Ionic 4 nous allons voir comment créer une version iOS de votre application Ionic et l’ouvrir avec Xcode. Nous allons voir les choses suivantes dans ce tuto:
- Qu’est-ce que Xcode et à quoi sert le logiciel d’Apple ?
- Créer une version iOS de son application Ionic 4 ?
- Ouvrir une application Ionic dans Xcode
- Lancer une application Ionic dans un simulateur iOS avec Xcode ?
- Exécuter une application Ionic sur son propre iPhone ou iPad
Qu’est-ce que Xcode et à quoi sert le logiciel d’Apple ?
Xcode est le logiciel phare de développement d’Apple, qui est totalement incontournable quand on développe des logiciels pour l’environnement Apple.
Nous allons maintenant voir toutes les choses à savoir sur Xcode:
- Le logiciel de développement d’Apple
- L’environnement de développement d’Apple (Swift)
- L’outil de développement pour iOS, MacOS, Apple TV et WatchOS
- Le logiciel pour tester son application sur simulateur
- Le logiciel pour publier une version de son application
Oui j’ai bien dit incontournable, si vous souhaitez publier une application sur iOS vous devez absolument avoir le logiciel Xcode, et donc être sur Mac pour le faire.
Même s’il est réservé aux utilisateurs de MacOS, nous allons voir que Xcode propose de nombreuses fonctionnalités très utiles au développement d’application mobile.
Dans le cadre du développement d’application mobile avec le framework Ionic, Xcode va nous permettre de tester nos applications directement sur simulateur ou même sur notre smartphone. Mais plus tard Xcode nous servira à exporter et publier notre application iOS sur l’App Store d’Apple.
Dans ce tuto Ionic 4, nous allons voir comment tester votre application Ionic sur un simulateur d’iPhone ou d’iPad, directement sur votre ordinateur.
C’est un processus que vous pourrez réaliser à chaque fois que vous ajouterez de nouvelles fonctionnalités à votre application.
Comment créer une version iOS de son application Ionic 4 ?
Commençons par voir comment créer la version iOS de votre application Ionic avant de l’ouvrir dans Xcode.
Quand je dis version iOS, je peux dire tous les fichiers et dossiers qui nous permettront de publier par la suite cette application sur l’App Store.
Voilà rapidement les étapes à suivre:
- Entrer la commande pour ajouter la plateforme iOS
- Créer une icône pour votre application
- Créer toutes les variantes de l’icône avec le terminal
- Construire une nouvelle version iOS
- Le dossier platform/ios apparaît
La première chose à faire est d’ajouter la plateforme iOS dans votre application Ionic. Il existe trois types de plateformes que vous pouvez ajouter:
- iOS
- Android
- Browser (web)
Vous l’avez compris, nous allons ajouter la version iOS qui va nous créer une dossier platforms/ios qui contiendra toutes les informations et codes relative à notre application sous iOS.
Entrez donc la commande suivante pour ajouter la plateforme iOS:
ionic cordova platform add ios
Cette commande va vous construire la première version de votre application Ionic sous iOS.
Si vous souhaitez mettre à jour son contenu parce que vous venez d’ajouter une fonctionnalité, entrez la commande suivante pour construire une nouvelle version de l’application sous iOS:
ionic cordova build ios
Si vous souhaitez modifier l’icône de votre application sur iOS, remplacez le fichier ressources/icon.png de votre application Ionic et entrez la commande suivante:
ionic cordova resources ios
Cette commande vous créera toutes les icônes de tailles différentes nécessaires à iOS, vous devrez alors reconstruire une nouvelle version de l’application pour voir les modifications de l’icône.
Comment ouvrir une application Ionic dans Xcode ?
Nous venons de voir comment ajouter la plateforme iOS à votre application Ionic. Vous allez maintenant découvrir comment l’ouvrir avec Xcode en suivant les étapes suivantes:
- Télécharger Xcode (gratuit) depuis l’App Store
- Ouvrir le fichier avec l’extension .xcodeproj
- Paramétrer les informations de bases (nom, version)
- Signer automatiquement votre application
Pour commencer, je vous invite à télécharger le logiciel Xcode sur Mac, qui encore une fois est indispensable au développement sur iOS. Rendez-vous sur le site suivant pour obtenir plus d’informations: https://developer.apple.com/xcode/
Ou cliquez sur ce lien pour accéder directement au Mac App Store: https://apps.apple.com/fr/app/xcode/id497799835?mt=12
Une fois que le logiciel Xcode est téléchargé (c’est un logiciel assez volumineux et qui mis à jour à chaque nouvelle version d’iOS) vous pouvez tout simplement vous rendrez dans le dossier platforms/ios de votre application Ionic.
Dans ce dossier vous trouverez un fichier avec l’extension .xcodeproj que vous pouvez tout simplement ouvrir dans Xcode en cliquant dessus.
Xcode devrait vous ouvrir une nouvelle fenêtre qui vous servira de référence pour tous vos tests sur iOS. Depuis cette page vous trouverez toutes les informations sur votre application comme son nom ou son identifiant unique (bundle ID).
Si vous avez un compte Apple Developper, indispensable pour publier des applications iOS, vous pouvez l’associer à Xcode dans le menu Préférence.
Cela vous permettra de signer automatiquement vos applications et de pouvoir tester votre application directement sur votre smartphone.
Nous n’aborderons pas dans ce tuto Ionic les notions plus avancées du paramétrage d’Xcode.
Comment lancer une application Ionic dans un simulateur iOS avec Xcode ?
Passons maintenant à la création d’un simulateur d’iPhone ou d’iPad pour lancer votre application Ionic. Voilà les étapes à suivre:
- Choisir le modèle d’iPhone ou d’iPad de votre choix
- Cliquer sur le bouton Run
- Attendre le lancement du simulateur et d’iOS
- Le chargement de l’application se fait automatiquement
En haut à gauche de votre fenêtre Xcode, vous trouverez un bouton « Play » ou Run pour lancer votre application dans un simulateur ou un appareil connecté.
Pour commencer, sélectionner le simulateur de votre choix, je vous conseille un iPhone 8 car il contient encore le bouton cliquable de l’accueil qui facilite le travail sur ordinateur.
Une fois le choix du simulateur effectué, vous pouvez cliquer sur le bouton Run à gauche pour lancer l’exécution de votre application.
Pour commencer, Xcode va vous créer votre simulateur et un nouvel appareil devrait apparaître sur votre ordinateur.
La création de ce simulateur peut prendre quelques minutes, mais une fois que celui est chargé, vous pouvez relancer votre application beaucoup plus rapidement.
Également, si vous changez de projet Xcode, pas besoin de recréer un autre simulateur, Xcode exécutera vos applications dans le même simulateur d’iPhone ou d’iPad.
Vous pouvez également lancer votre application sur différents appareils iOS, par exemple un iPhone 8 pour l’interface des anciens iPhones, un iPhone XS et un iPad pour toutes les tailles d’écran différentes.
Comment lancer une application Ionic sur son propre iPhone ou iPad ?
Une des fonctionnalités les plus utiles d’Xcode est de pouvoir tester son application sur son propre iPhone ou iPad, ce qui est vraiment très pratique.
En seulement 30 minutes de codage, vous pouvez installer votre application Ionic sur votre iPhone et la montrer à vos amis.
Voilà les étapes à suivre pour lancer votre application Ionic sur votre iPhone:
- Connectez votre appareil par USB à votre Mac
- Ou connectez au même Wifi de votre Mac
- Sélectionnez votre appareil dans la liste déroulante
- Cliquez sur Run pour lancer votre application
Le processus est le même que pour lancer votre application sur un simulateur, je donne juste en plus quelques astuces.
Vous devez d’abord connecter votre appareil Apple sur votre Mac, pour qu’Xcode détecte votre iPhone.
Une fois détecté, Xcode vous propose de choisir parmi les simulateurs vos propres devices, et vous affiche le nom de votre appareil, par exemple « iPhone de Driss« .
Si vous avez déjà lancé votre application sur votre iPhone, vous pouvez maintenant simplement vous connecter au même wifi que votre ordinateur.
Une petite planète devrait apparaître à droite du nom de votre appareil, cela vous permet maintenant de lancer votre application à distance et sans fil, merci Xcode!