Découvrir les rudiments de Xcode, pour faire du développement mobile (iOS ou iPadOS), ou logiciel (MacOS, Windows…) ou juste pour le plaisir.

Si vous vous trouvez ici, c’est que vous souhaitez découvrir l’IDE Xcode, et peut être, découvrir la programmation pour iOS et MacOS !

1. Présentation générale

Mais avant toute chose, qu’est-ce-que Xcode, et plus généralement, un IDE ? 
Cet acronyme signifie simplement Integrated Development Environment, c’est à dire en bon français, un Environnement de Développement Intégré. Pour faire plus simple, c’est souvent un logiciel avec différents outils qui permettent de construire un code, pour une application par exemple plus facilement. Il nous apporte ainsi, une auto-complétion, mais aussi un débogueur performant pour aider à remarquer les erreurs ainsi qu’une ribambelle d’autres avantages propres à chaque IDE. 
En somme vous pouvez choisir l’IDE qui vous plaît le plus, mais cela est soumis à certaines conditions. En effet cela dépend du langage que vous voulez utiliser, des appareils destinés à ce langage, etc…

On en arrive donc à la particularité d’Xcode qui fait son attrait, et cela est tout simple, il permet de développer officiellement pour MacOS, iOS et iPadOS, car il est fourni par Apple. En effet, nous le verrons par la suite dans le tutoriel, grâce à lui, on peut essayer ses apps directement sur les appareils. (On peut programmer avec le langage d’Apple, le Swift ^{(N.D.L.R. : C’est un langage open-source sorti en 2014, qui est utilisé sur tous les appareils Apple aujourd’hui mais qui se développe peu à peu sur le monde Linux avec les serveurs et qui dans sa dernière version 5.3, vient d’apparaître sur Windows !)} avec d’autres IDE, mais on ne peut ni envoyer ses apps, ni les tester sur les appareils).
Mais c’est aussi un IDE complet et multi-langage qui peut être utilisé pour autre chose. Alors, pourquoi s’encombrer à avoir de multiples IDE, alors que l’on peut en avoir un performant, car optimisé pour l’OS, souvent mis à jour et possédant une communauté prête à vous aider au besoin.
Si cela vous intéresse, vous trouverez ici la liste exhaustive (en anglais) des langages compatibles.

2. Installation du logiciel

Avant de commencer, sachez que le logiciel est arrivé à sa version 12 depuis novembre. Donc, les explications seront données par rapport à cette version. Il se peut que si vous avez des versions antérieures, vous n’ayez pas les mêmes outils à votre disposition. La meilleure chose à faire est donc de mettre à jour Xcode.

Rentrons maintenant dans le cœur du sujet, en commençant par son installation.
Pour ce faire, rien de plus simple, il vous suffit d’ouvrir le Mac App Store et de taper Xcode puis de le télécharger.
Une fois la longue installation des 11,666 Go terminée, vous pourrez enfin cliquer sur Ouvrir, pour entrer dans le logiciel !

3. Découverte de base du logiciel et mise en place d’un projet

Nous allons maintenant enfin plonger dans les profondeurs abyssales du logiciel et le découvrir. Son utilisation est assez intuitive, même sans forcément connaître le langage de programmation sur le bout des doigts. Néanmoins, et cela est vraiment nécessaire, il vous faudra maîtriser la langue de 007, car le logiciel est tout bonnement en anglais et n’a pas été traduit en français, mais ça va bien se passer ne vous inquiétez pas !

On comprend mieux avec un exemple. Vous allez donc suivre la réalisation d’une « mini-application » pour iPhone en Swift grâce à Xcode, et à ce qu’il apporte.

Le projet est simple, montrer à la Terre entière l’utilité du nombre 42 grâce à la phrase iconique : « 42 is the Answer to the Ultimate Question of Life, the Universe, and Everything » (ce qui est évidemment vrai).

Pour ce faire, il faut d’abord créer un projet sur Xcode. L’application étant ouverte, il vous suffit de cliquer sur Create a new Xcode project.

On arrive ensuite sur une page pop-up qui nous propose des templates(c’est à dire des « formes de projets », déjà paramétrés, avec le langage Swift), pour les différents appareils de la marque à la pomme. Tant mieux pour nous alors parce que les paramétrages plus profonds sont uniquement compréhensibles par des cupertiniens initiés.

On veut faire une App pour iOS (l’OS des iPhone) ; ces deux mots sont quasiment identiques en anglais, il suffit donc d’aller dans l’onglet iOSpuis de cliquer sur App puis Next.

Maintenant un tout nouveau pop-up s’ouvre, et ce dernier est très important pour la suite. Il vous faut donc rajouter un nom au projet (Product Name), puis juste en dessous, se trouve un lien avec marqué Team. Ce lien est très important car il permet à Xcode de reconnaître qui fait l’application, permettant la création du projet ainsi qu’un certificat. Ce dernier atteste que l’application que vous avez créée peut fonctionner, que ce soit sur votre ordinateur ou sur d’autres appareils, comme nous le verrons plus tard. Il vous suffit alors de cliquer sur Add Account, puis de vous connecter à votre compte Apple Developper (gratuit).

Si vous n’en n’avez pas, pas de panique ! Il vous suffit juste de vous connecter sur le site Apple Developper avec votre identifiant et mot de passe de votre compte Apple, puis d’accepter le contrat.

Il faut ensuite fermer la page Account qui s’est ouverte pour revenir au paramétrage de votre projet. Dans la ligne Team, vous pouvez maintenant sélectionner votre compte. La ligne en dessous est nécessaire, Organization Identifier, elle permet à Apple d’être certain que deux apps ne seront pas identiques si vous voulez les mettre sur l’App Store (Comme c’est pas le cas, notez ici ce que vous voulez). Laissez les autres choix à leur position de base, vous pourrez essayer de les modifier, mais après on risque de rentrer dans des explications beaucoup, beaucoup plus longues ! Sachez juste que le langage utilisé sera le Swift, le langage de tous les produits Apple (aussi Open-source).

Cliquez ensuite sur Next.

Dans la page suivante, vous avez la possibilité de choisir où vous souhaitez placer votre fichier, ainsi que d’activer Git ou non.

Git permet de revenir à un programme plus ancien, si jamais votre programme actuel ne fonctionne plus (certains comprendront pour l’avoir vécu que cette option est plus qu’utile, elle est nécessaire).

Cliquez ensuite sur Create, et paf, votre App apparaît !

4. Utilisation du logiciel

On arrive alors sur un écran composé de 4 panneaux principaux. Pour l’explication, vous pourrez voir les différents panneaux, numérotés de 1 à 4, sur cette capture :

• Le premier panneau présente les différents fichiers et dossiers présents dans l’App, il vous suffit de cliquer sur un fichier pour vous y rendre, et les fichiers sont indentés pour montrer leur appartenance au dossier. D’autres icônes sont aussi présentes en haut du panneau, la deuxième permet de voir Git c’est à dire l’historique des modifications, je vous laisse découvrir les autres icônes, qui concernent plus une utilisation très poussée du logiciel.
• Le deuxième panneau est le cœur du logiciel, c’est tout simplement ici que se trouve le code du fichier qui est ouvert. On peut aussi trouver d’autres fichiers ou dossiers, tel que le dossier qui permet de sélectionner l’icône ainsi que les images de l’App (nommé Assets.xcassets) etc…C’est ici aussi qu’on trouve une fonctionnalité intéressante et propre à tous les IDE, j’ai nommé, la fameuse auto-complétion !Pour mieux comprendre, voici un exemple :Imaginons qu’on souhaite avoir une condition si dans notre code (if en anglais). On tape donc if dans notre code à l’endroit que l’on veut, et Xcode nous propose plusieurs propositions. Il suffit donc de cliquer sur celle qui nous intéresse.

Puis, il s’occupe de mettre en place ce que l’on a sélectionné en nous laissant des zones grisées pour nous indiquer ce qu’il faut remplir, c’est à dire ici, quel doit être la condition, et qu’est-ce qui doit découler de cette condition (noté code par l’IDE).

Maintenant, imaginons, que nous voulons créer une variable qui ne peut pas être modifiée (en Swift, une variable let ne peut pas être modifiée alors qu’une variable var si). Si l’on souhaite la modifier ensuite, Xcode nous prévient de notre erreur :

Il faut alors distinguer deux types d’erreurs qu’il va nous proposer. Des erreurs, qu’on nommera pour les besoins de la science, « résolvables » ; comme l’erreur du milieu, ainsi que des erreurs « non résolvables », ou « avec conseil ». Pour le premier type d’erreurs, Xcode nous propose de changer la variable pour la rendre globale, en cliquant sur le bouton Fix. Il ne faut quand même pas cliquer inconsciemment sur ce bouton, mais vérifier si ce qu’il nous propose est bien ce que l’on veut.

L’erreur du bas, du second type, par contre, ne peut pas être résolue, il nous explique bien gentiment le problème, mais c’est à nous de faire les actions nécessaires pour le résoudre (car la modification pourrait impacter beaucoup de chose ici).

• Le troisième panneau, permet de voir le rendu en temps réel sur le téléphone ! Nous allons suivre son fonctionnement. Pour l’activer, il vous suffit d’appuyer sur le bouton Resume, puis, au fur et à mesure que vous modifierez quelque chose (dans le code directement ou sur cet écran), il s’actualisera.Maintenant, imaginons que nous voulons ajouter cette image, au dessus de notre texte. On peut le faire tout simplement grâce à Xcode sans taper la moindre ligne de code ! Pour ce faire, il faut appuyer sur le +, au dessus du troisième panneau, puis cliquer sur le bouton de gauche, car c’est un « objet » en Swift. Ensuite on tape dans la barre de recherche là où il y a la flèche, le terme image ; ce qu’on recherche, ça va de soi.

Il suffit ensuite de prendre la partie en rouge sur la capture d’écran avec la souris/trackpad et de la glisser sur le téléphone du panneau 3, au dessus de la phrase.

En l’occurence, ici, le petit logo (très inspiré), avec un palmier, représente l’objet Image que l’on déplace et la petite ligne bleue nous indique où cet objet va se retrouver.

Si vous regardez, le code de l’image est apparu dans le deuxième panneau (le panneau de code) !

Pour mettre l’image souhaitée, il faut vous rendre dans le dossier Assets.xcassets, faire un clic droit, puis cliquer sur Image Set.

Maintenant, la page suivante apparaît :

Il faut alors glisser depuis le Finder, l’image que l’on souhaite sur le 1x, et marquer le nom qu’on souhaite donner à l’image à droite, là où se trouve la flèche.

Après être retourné au fichier de code, on peut alors rajouter le nom de notre image (qu’on a marqué dans le Assets.xcassets), dans Image (entre les guillemets). Et voilà, l’image apparaît à l’endroit où on l’avait indiqué tout à l’heure !

On peut aussi ajouter des Modifiers grâce au + au dessus du panneau 3, puis en cliquant sur le deuxième logo comme sur la capture d’écran pour ajouter des sortes d’attributs aux objets de code, comme le soulignage à l’élément choisi.

• Le quatrième et dernier panneau est lié avec les deux précédents, en effet, à la manière d’un éditeur de texte classique du type Word, il nous permet de changer l’écriture du texte sélectionné dans le panneau 3, sa grosseur, s’il est centré etc…, de même avec les images où l’on peut modifier leur taille et d’autres attributs. Le code sera ainsi mis à jour en fonction des modifications.

Si l’on clique, toujours dans ce dernier panneau sur le  ?, on peut voir en direct une aide rapide sur le code, comme ici, après avoir sélectionné Text :

5. Compilation et test sur différents appareils

Entrons enfin dans la dernière partie de ce tutoriel, la compilation ! On va enfin pouvoir tester notre app pour voir ce qu’elle rend !

Avant toute chose, il faut savoir que pour certains langages il faut compiler, c’est à dire traduire en quelque sorte le texte d’un langage comme le Swift vers un langage moins compréhensible voir pas du tout pour nous mais qui permet d’être exécuté par la machine.

Pour commencer, il suffit de sélectionner l’appareil de votre choix au dessus du panneau 2, on va en fait avoir l’appareil virtuellement sur l’ordinateur avec notre App à l’intérieur !

Pour l’explication, ce sera l’iPhone SE 2, mais sachez que cela marchera avec tous les appareils (même les tous derniers !).

Il faut ensuite appuyer sur le bouton « Play », la compilation commence, et le téléphone apparaît dans son simulateur, tout beau tout neuf !

Vous pouvez maintenant profiter de la plupart des fonctionnalités du téléphone sans l’avoir 😉 (et tester aussi votre App, accessoirement) !

Maintenant, imaginons que l’on souhaite stocker dans une liste des valeurs de 0 à 1 000 000 000 mais que l’on ait oublié une donnée et que les valeurs ajoutées soient immenses, sur mobile, on risque alors d’avoir à faire à des problèmes, car ces derniers n’ont pas non plus des performances extraordinaires. Lors de la compilation, cliquez sur le « pschiit » (oui, ils ont choisi en logo un pschiit, en effet !) au dessus du premier panneau.

Vous pouvez alors voir l’utilisation du CPU, de la mémoire ou encore de la batterie et cliquer dessus pour plus de détail.

Si dans notre cas, on clique sur Memory, on voit que notre App utilise entre 1,7 et 1,3 Go de RAM ce qui est énorme, surtout pour un mobile !

Il ne faut donc pas se fier au fait que l’on se trouve dans la zone verte car elle est verte en proportion de la mémoire de l’ordinateur ; il faut penser que c’est pour mobile, et donc faire attention et résoudre ce problème (qui n’est pas bloquant sur le moment), dont on n’aurait pas forcément fait attention.

Maintenant et pour finir, je vous ai gardé la fonctionnalité la plus intéressante et croustillante de cet IDE, la possibilité d’envoyer directement sur un iPhone ou un iPad son App pour la tester !

C’est ce que nous allons faire. Pour cela, il faut brancher à l’ordinateur son appareil et le sélectionner dans l’endroit où l’on à sélectionné le simulateur d’iPhone tout-à-l’heure.

(Pour les besoins de l’expérimentation, j’utiliserai l’Appareil de test n°42 ; logique !)

Maintenant, il vous suffit comme tout à l’heure d’appuyer sur le bouton « Play », et Xcode va installer les fichiers nécessaires sur votre appareil. Attention vous ne pouvez réaliser cette action que 10 fois par semaine avec un compte Apple Developper gratuit.

Une fois que l’App a été installée, il vous suffit de vous rendre sur votre appareil dans Réglages > Général > Gestion de l’appareil et d’accepter le développeur (c’est à dire vous). C’est pour cette raison qu’au début il nous fallait des certificats.

Vous pouvez alors profiter de votre App sur votre appareil !

Et voici le rendu de notre App rendant sa gloire au 42 sur notre Appareil de test n°42 !

6. Conclusion et … petits bonus !

Dorénavant, vous savez utiliser les fonctionnalités principales de Xcode sur votre Mac pour pouvoir réaliser différentes Apps et logiciels en Swift ; faites marcher votre inspiration !

Mais au début, on avait vu que Xcode était multi-langages et on n’a parlé que de Swift, c’est normal ? Oui en effet, les templates présents sont déjà paramétrés pour Swift, mais vous pouvez sans aucun soucis faire un projet vide (Empty) puis rajouter les différents fichiers de différents langages. C’est très simple ! Dans un projet déjà paramétré ou non, dans la zone du premier panneau, il faut faire clic droit, New File… puis choisir le fichier avec le langage que l’on veut !

Et même, si vous avez lu l’article très intéressant sur le Markdown, et bien vous pouvez amortir la lourde installation de Xcode, pour faire aussi du Markdown, que ce soit pour faire le fameux Lisez-Moi (README) de vos logiciels ou encore juste pour le plaisir d’écrire en Markdown grâce aux conseils fournis dans cet autre tuto !

De plus, même si on est pas sur Windows 10 sur ce super tuto je vais vous donner un petit conseil d’optimisation de Xcode. En effet il est quelque peu gourmand, et va stocker de nombreux fichiers en cache sur tous les projets. Donc si vous n’utilisez plus des projets, vous pourrez libérer le cache (sans perdre votre projet et toutes ses données évidemment), en vous rendant dans  > À propos de ce Mac > Stockage > Gérer… > Développeur, et en vidant les caches qui ne vous intéressent plus et qui peuvent parfois faire plusieurs Go.

Grâce à Xcode vous pourrez essayer les tous nouveaux iPhone, pour rêver, l’espace d’un instant que vous les possèdez tous !

Mais il n’y a pas que ça dans cet IDE, de nombreuses possibilités s’ouvrent à vous, grâce à votre inspiration, votre volonté et au 42, évidemment…