IONIC Section 6 - 6.3 Créer une application IOS

Bonjour à tous, dans cette vidéo nous allons créer une application IOS, mais avant tout, j’aimerais éclaircir un point avec vous, concernant l’application, dans la page des recettes, vous avez peut être « r1 » et « r2 » afficher et sans l’image de recette. Effectivement, si c’est le cas, veuillez rectifier votre fichier « recipe-item.component.html » en insérant « recipeItem » devant l'élément de vos objets. Donc si vous avez besoin de corriger, je vous laisse mettre sur pause avant de poursuivre. Maintenant que c’est rectifié, on peut commencer la conception de notre application IOS. Donc comme je l’ai précisé dans la vidéo précédente, nous pouvons nous appuyer de la documentation, via « developing for IOS ». Et dans les premières lignes, nous pouvons voir que nous aurons besoin de l’outils Capacitor ou Cordova, donc on va prendre Capacitor car c’est développé par l’équipe Ionic mais vous avez toutefois des instructions concernant l’utilisation via Cordova si vous le souhaitez. Par conséquent, nous allons donc utiliser Capacitor dans ce cours. Vous pouvez maintenant exécuter ces commandes pour configurer votre application pour IOS et l’exécuter sur un périphérique IOS, mais vous devez tout d’abord vous assurez que vous disposez de la configuration d’environnement de développement IOS. Vous pouvez également consulter la documentation de Capacitor via IOS Vous trouverez une description détaillée de ce dont vous avez besoin pour configurer votre ordinateur afin de créer des applications IOS. Maintenant, nous allons installer « Xcode » sur l’app Store sur votre Mac, donc on peut le rechercher sur le store. Une fois installé, vous avez besoin des outils de ligne de commande Xcode. Vous les obtenez en ouvrant votre terminal sur votre Mac en saisissant « xcode-select ». Maintenant, si cela vous fait une erreur, peut-être que ce n’est pas installé. Vous aurez besoin de saisir « Xcode-select —install » ce qui permettra d’installer les outils de ligne de commande Xcode. Avec tout cela installé vous pouvez revenir à la documentation, dans “Project Setup” et utiliser les commandes ici « ionic capacitor add ios »pour ajouter IOS en tant que plateform à votre projet, puis exécuter également votre application sur IOS. Donc, de retour dans le projet, on va commencer par ajouter capacitor avec notre commande, cependant, il est possible de recevoir une erreur concernant l’identifiant d’application, les tirets ne sont pas recherchés par exemple, alors assurez-vous de les supprimer dans votre fichier « capacitor.config.ts ». Donc faites le si nécessaire et vous verrez que cela fonctionnera à nouveau. Pour ma part, j’ai eu une erreur concernant le fait que « cocoapods » ne soit pas installer. Il vous suffira d’effectuer la commande « brew install cocoapods » qui permettra de vous installer les dépendances nécessaire pour installer cocoapods. Donc une fois la commande exécutée, vous aurez un nouveau dossier « IOS » et c’est un dossier que vous pouvez ouvrir avec Xcode et qui contient l’application native Xcode dans laquelle va envelopper notre application web, notre application Ionic. Maintenant que cela a été créé, vous builder votre projet avec « ng build » car vous ne pouvez pas envoyer ce projet que dans un wrapper de votre application native. Vous apprendrez également à faire fonctionner une application rechargée dynamiquement et à la connecter à votre appareil IOS à la fin de la vidéo. Pour l’instant, passons à ce processus de création, ce qui crée un dossier « www » contenant votre projet Angular. Vous pouvez maintenant exécuter « ionic capacitor copy ios » et ceci copiera le dossier « www » dans votre dossier « ios » et, à la place, à l’emplacement où il doit pouvoir être encapsulé par cette application native pour que vous sortez de la boîte de dialogue de Capacitor. Vous pouvez également exécuter iOS avec « ionic capacitor run ios », ce qui combine le processus de build et le processus de copie, ce qui est la commande la plus pratique. Mais il ne copie pas uniquement vos fichiers, vous pouvez choisir votre appareil de simulation il doit également ouvrir Xcode pour vous maintenant. Il ouvre non seulement Xcode, mais ouvre Xcode avec votre dossier IOS déjà sélectionné, ce qui le place maintenant dans votre dossier « ios ». Cela buildera l’application native, qui lancera un simulateur et voici notre application à venir, le premier démarrage peut toujours prendre un certains temps, ne vous inquiétez pas, c’est normal, cela sera très rapide une fois que vous l’aurez déployé sur un périphérique réel et testé. Et maintenant, on retrouve bien l’application que nous avons réalisée dans notre section précédente, et nous voyons aussi que nous avons le boutons de retour spécifique à IOS, donc voilà on a ce rendu assez sympa. Alors maintenant, notre application fonctionne sur un appareil natif, sur IOS, mais bien-sûr, c’est un peu fastidieux si nous devons toujours réexécuter les commandes, puis appuyer sur le bouton de lecture chaque fois que nous modifions quelque chose dans notre code. En effet, il existe une méthode plus simple, vous pouvez exécuter la commande « ionic capacitor run ios -l », « l » qui signifie rechargement en direct. Et si vous redémarrez l’application, maintenant cette application sera connectée à votre serveur de recharge direct. Chaque fois que vous modifierez votre code, l’application sera automatiquement rechargée, tout comme l’application dans le navigateur. On va faire un exemple, on va retourner sur notre fichier « recipes.page.html » et je vais modifier « recettes » par « recette de cuisine » par exemple, et si on revient sur notre application dans notre navigateur on voit bien la modification apportée, mais aussi dans notre simulateur. Maintenant vous savez comment obtenir cette application native, comment tester votre application sur le périphérique natif, et bien sûr nous la testerons de temps à autre durant le cours. Cette vidéo touche donc à sa fin, j’espère que cela a été une réussite pour vous, et je vous donne rendez- vous pour la prochaine.