Comment développer le développement iOS ionique

Développement iOS ionique

Configuration Xcode​

Code X est l’IDE pour créer des applications iOS natives. Il inclut les outils de ligne de commande iOS SDK et Xcode. Xcode peut être téléchargé gratuitement avec un compte Apple ou il peut être installé via l’App Store.

Une fois Xcode installé, assurez-vous que les outils de ligne de commande sont sélectionnés pour être utilisés :

xcode-select --install

Copie

Mise en place d’une équipe de développement Ionic iOS Development​

Toutes les applications iOS doivent être codées, même pour le développement. Heureusement, Xcode rend cela facile avec la signature automatique du code. Le seul prérequis est un identifiant Apple.

Ouvrez Xcode et accédez à Code X » Préférences » Comptes. Ajoutez un identifiant Apple si aucun n’est répertorié. Une fois connecté, une équipe personnelle apparaîtra dans la liste des équipes de l’identifiant Apple.

Création d’un simulateur iOS​

Le simulateur iOS émule les appareils iOS sur Mac. La documentation suivante est un moyen rapide de configurer le simulateur iOS. Pour plus d’informations, voir Documentation d’Apple.

Ouvrez Xcode et accédez à Fenêtre » Appareils et simulateurs. Créé un iPhone 11 simulateur s’il n’en existe pas déjà un.

Configuration de Cordoue​

Une configuration supplémentaire est requise pour que Cordova prenne en charge les builds programmatiques. Cette section n’est pas nécessaire pour le condensateur.

ios-sim & ios-deploy​

Le ios-sim et ios-deploy sont des utilitaires qui déploient des applications sur le simulateur iOS et les appareils iOS pendant le développement. Ils peuvent être installés dans le monde entier avec npm.

$ npm install -g ios-sim
$ brew install ios-deploy

Copie

Configuration du projet​

Avant que les applications puissent être déployées sur des simulateurs et des appareils iOS, le projet natif doit être configuré.

1. Générez le projet natif, s’il n’existe pas déjà.Pour Condensateur, exécutez la commande suivante :$ ionic capacitor add ios
CopyFor Cordova, exécutez ce qui suit :$ ionic cordova prepare ios
Copie
2. Met le Identifiant du package.Pour Condensateur, ouvrez le capacitor.config.json fichier et modifier le appId propriété.Pour Cordoue, ouvrez le config.xml fichier et modifier le id attribut de l’élément racine, . Voir la documentation de Cordoue pour plus d’informations.
3. Ouvrez le projet dans Xcode.Pour Capacitor, exécutez la commande suivante pour ouvrir l’application dans Xcode :$ ionic capacitor open ios
CopyPour Cordova, ouvrez Xcode. Utiliser Déposer » Ouvrir et localisez l’application. Ouvrez l’application platforms/ios annuaire.
4. Dans le navigateur de projet, sélectionnez la racine du projet pour ouvrir l’éditeur de projet. Sous le Identité section, vérifiez que l’ID de package qui a été défini correspond à l’identifiant de bundle.
5. Dans le même éditeur de projet, sous la section Signature, assurez-vous que Gérer automatiquement la signature est activé. Ensuite, sélectionnez une équipe de développement. Avec une équipe de développement, Xcode tentera de préparer automatiquement le provisionnement et la signature.

Courir avec Xcode​

Dans ce flux de travail, Xcode peut résoudre automatiquement les problèmes courants de compilation et de signature qui peuvent survenir.

1. Développez l’application Ionic et synchronisez-la avec le projet natif.À chaque modification significative, les applications Ionic doivent être intégrées aux actifs Web avant que la modification puisse apparaître sur les simulateurs et les appareils iOS. Les actifs Web doivent ensuite être copiés dans le projet natif. Heureusement, ce processus est facilité par une seule commande Ionic CLI. Pour Capacitor, exécutez ce qui suit :$ ionic capacitor copy ios
$ ionic capacitor update
CopyFor Cordova, exécutez ce qui suit :$ ionic cordova prepare ios
Copie
2. Dans Xcode, sélectionnez un simulateur ou un appareil cible et cliquez sur le bouton de lecture.

Exécution avec la CLI Ionic​

La CLI Ionic peut créer, copier et déployer des applications Ionic sur des simulateurs et des appareils iOS avec une seule commande. Il peut également faire tourner un serveur de développement, comme celui utilisé dans ionic servefournir rechargement en direct Fonctionnalité.

Avec le rechargement en direct, les modifications apportées aux fichiers source de l’application déclenchent une reconstruction des ressources Web et les modifications sont répercutées sur le simulateur ou l’appareil sans avoir à déployer à nouveau.

Avertir

Pour les appareils iOS, l’appareil et l’ordinateur doivent être sur le même réseau Wi-Fi. Une URL externe pour le serveur de développement est également requise pour que l’appareil puisse s’y connecter. Utiliser --external (ou --host=0.0.0.0) pour établir une liaison avec des adresses externes.

Rechargement en direct avec condensateur​

Capacitor n’a pas encore de moyen de créer des projets natifs. Il s’appuie sur Xcode pour créer et déployer des binaires d’application. Cependant, la CLI Ionic peut démarrer un serveur de rechargement en direct et configurer Capacitor pour l’utiliser avec une seule commande.

Exécutez ce qui suit, puis sélectionnez un simulateur ou un appareil cible et cliquez sur le bouton de lecture dans Xcode :

ionic capacitor run ios -l --external

Copie

Rechargement en direct avec Cordova​

Cordova peut créer et déployer des projets natifs par programmation.

Pour démarrer un serveur de rechargement en direct, créer et déployer l’application, exécutez la commande suivante :

ionic cordova run ios -l --external

Copie

Débogage des applications iOS​

Une fois qu’une application s’exécute sur un appareil ou un simulateur iOS, elle peut être déboguée dans Safari.

Utilisation de Safari Web Inspector​

Safari prend en charge Web Inspector pour les simulateurs et appareils iOS. Ouvrez le Développer menu et sélectionnez le simulateur ou l’appareil, puis sélectionnez l’application Ionic pour ouvrir Web Inspector.

Note

Si la Développer menu est masqué, activez-le dans Safari » Préférences » Avancé » Afficher le menu Développer dans la barre de menus.

Si l’application n’est pas répertoriée, il se peut que l’inspecteur Web doive être activé sur l’appareil dans Paramètres » Safari » Avancé » Inspecteur Web.

Affichage des journaux natifs​

Si vous utilisez Xcode, les journaux natifs peuvent être trouvés dans Xcode Console.

Note

Si la Console est masqué, activez-le dans Voir » Zone de débogage » Activer la console.

En rapport