Prenez en main Xcode

Bienvenue chez Prog Technologies !

Nous sommes une entreprise qui propose des services pour des projets clients. Concrètement, si quelqu’un veut faire un site internet ou une application mobile mais qu’il ne sait pas le faire lui-même, nous lui faisons. Nous sommes une petite vingtaine, donc l’ambiance est plutôt familiale vous verrez !

Impatient mais un peu peur ? Ah typiquement les symptômes d’un premier jour ! Ne vous inquiétez pas, je suis Samira la lead développeuse iOS, je vais vous accompagner dans votre parcours.

Je vous ai trouvé un beau projet qui sera parfait pour commencer à prendre vos marques. Dans 3 mois se déroulera une exposition temporaire qui met en lumière l’histoire des femmes dans la tech. Pour compléter l’exposition, l’association qui organise l'événement aurait besoin d’une application mobile. Les visiteurs pourront scanner un QRCode à l'entrée ou à la sortie pour avoir un petit mémo sur ces femmes dans la tech.

Aujourd’hui nous avons 2 idées de design et nous souhaitons les faire tester à un panel d’utilisateurs potentiels. Il nous faut donc réaliser 2 applications POC.

Excellente question ! Cela signifie Proof Of Concept, c’est-à-dire que l’objectif est de prouver ou non que notre concept est bien valide, que c’est une bonne idée. De là, on pourra prendre la décision d’aller plus loin et de mettre en production l’application.

Le premier POC, nous allons le faire ensemble pour être sûr que vous avez tout ce qu’il vous faut pour réaliser le deuxième POC par vous-même. Je validerai avec vous chaque étape pour bien consolider chacune des marches qui vous mènera à votre première application !

N'hésitez pas à me poser des questions dès que vous ne comprenez pas les termes que j’utilise ! On s’habitue vite au jargon de la tech et je ne me rends pas toujours compte !

Alors ? Êtes-vous prêt à vous lancer dans le monde merveilleux du développement iOS ?

C’est parti ! 🚀

Installez Xcode

Avant même de pouvoir commencer à coder, il vous faut déjà les bons outils pour le faire !

Mais pour comprendre ce qu’est Xcode il faut comprendre ce qu’est un IDE.

Un IDE (Integrated Development Environment), en Français, un environnement de développement, c’est un outil qui regroupe un éditeur de texte, un compilateur et un débogueur.

C’est exactement ce qu’est capable de faire Xcode. Il sera donc le seul outil dont nous aurons besoin pour écrire du code en Swift et utiliser son framework de conception graphique SwiftUI.

Xcode a encore d’autres fonctionnalités mais je ne vais pas tout vous dire dès maintenant, vous le découvrirez pendant ce cours.

Si vous n’avez pas encore Xcode installé sur votre Mac, ouvrez l’application App Store et recherchez Xcode. Puis cliquez sur Obtenir pour télécharger la dernière version.

Si vous avez déjà installé Xcode et que vous souhaitez simplement vérifier que vous êtes sur la dernière version disponible, vous pouvez aller au même endroit sur l’App Store. La seule différence c’est qu’au lieu d’avoir le bouton Obtenir, ce sera Mettre à jour ou Ouvrir si vous avec la dernière version. Comme ici :

Il faut savoir que chaque version d’Xcode vous contraint à développer sur certaines versions d’iOS et de Swift. La dernière version de chacun si vous êtes à jour.
Pour développer sur iOS 5 par exemple, il vous faudra télécharger une ancienne version d’Xcode. Vous pouvez le faire en vous créant un compte développeur sur https://developer.apple.com ou sur ce répertoire GitHub.

Pour ce cours nous serons sur Xcode 15.3, iOS 17.2 et Swift 5.10.

Créez votre premier projet

Maintenant qu’Xcode est installé, vous avez tout ce qu’il vous faut pour créer votre premier projet !

Premièrement, lancez l’application Xcode. Vous devriez avoir une fenêtre qui ressemble à ça qui apparaît :

En fonction de votre version ou des projets précédents, vous pourriez avoir une fenêtre légèrement différente.

Cliquez sur Create New Project.

Ensuite, vous allez devoir choisir un template. Sélectionnez la plateforme iOS, puis App dans la liste des Applications. Puis faites Next.

Maintenant, dans cette nouvelle fenêtre, il va falloir écrire un Product Name, c’est-à-dire le nom du projet. Vous pouvez taper TheyMakeIT-POC1. Les champs Teams, Organization Identifier et Bundle Identifier sont utiles pour connecter votre compte développeur et d’autres manipulations plus complexes. Laissez ce qui est mis par défaut. S’il n’y a rien dans Organisation Identifier, vous pouvez juste y mettre votre prénomnom tout attaché en minuscule dans le champ avec “com.” devant, comme dans la capture d'écran qui suit.

Pour Interface, vérifiez que vous êtes bien sur SwiftUI et Language en Swift. Enfin, Storage doit être à None et les check boxes décochées car nous n'utiliserons pas ces outils dans ce cours.

Pour finir cliquez sur Next et choisissez où stocker le projet sur votre machine.

Et voilà, vous avez créé votre premier projet !

Prenez en main l’interface

Xcode peut être impressionnant au premier abord, mais ne vous inquiétez pas vous allez vite vous y retrouver.

L’interface se découpe en 3 grandes parties :

• Le panneau de gauche et bien… à gauche !

• L’espace de travail au milieu

• Le panneau de droite

Le panneau de gauche

Il y a plusieurs petits onglets, nous allons nous concentrer uniquement sur les 3 plus importants à ce stade.

Le premier (1) c’est l’arborescence de votre projet avec tous les fichiers et dossiers qui le composent. C’est ici que vous pourrez naviguer et sélectionner les fichiers sur lesquels vous souhaitez travailler. Les petites icônes devant le nom permettent de connaître le type du fichier ou dossier. Par exemple le logo Swift (2) c’est pour les fichiers Swift et SwiftUI, (3) pour les dossiers ou encore (4) pour les images.

Le (5) c’est celui du milieu qui ressemble à un panneau attention, vous permet de retrouver les erreurs et les warnings à la compilation. Vous pourrez consulter une liste sur laquelle vous n’aurez qu'à cliquer pour ouvrir l’erreur en question.

Juste à côté vous avez la petite loupe en (6) qui permet de faire une recherche de mots-clés dans tout le projet. Par défaut elle n’est pas sensible à la casse, c’est-à-dire aux majuscules et minuscules.

L’espace de travail

Au centre de votre écran, c’est ici que toute la magie opère. En effet, lorsque vous sélectionnez un fichier depuis l’arborescence, c’est à cet endroit que vous allez voir le détail de celui-ci, que ce soit un fichier de code ou un fichier de configuration.

Pour les fichiers de code en SwiftUI, on peut redécouper l’espace en 2 parties :

• À gauche le code source

• À droite le Canvas

La partie Canvas n’est pas obligatoirement affichée, on peut choisir de le montrer ou de le cacher en cliquant sur (1) en haut à droite du panneau central et cocher ou décocher Canvas.

Le Canvas, c’est l’outil qui vous permet d’avoir un premier rendu visuel, en direct, de votre code SwiftUI, mais nous y reviendrons lorsque vous commencerez à développer votre première interface graphique.

Le panneau de droite

Et enfin, à droite c’est aussi un espace avec des onglets. Ils peuvent varier en fonction du fichier que vous avez sélectionné et sur lequel vous êtes en train de travailler. Vous trouverez toujours le (1) qui permet d’avoir les informations techniques sur le fichier comme son nom, son type ou son emplacement. Un autre onglet utile est le (2) qui permet, sur certains éléments sélectionnés, de modifier la configuration de celui-ci.

Vous voyez, ce n’est pas si compliqué et vous allez très vite les maîtriser ! Vous découvrirez d’autres éléments de l’interface au fur et à mesure du cours, mais je ne veux pas tout vous spoiler dès maintenant 😉.

Découvrez la documentation

Dernière chose à connaître avant de commencer à coder c’est la documentation. Même si ChatGPT et autre IA peuvent nous aider à coder, rien ne remplace une documentation officielle.

Elle est mise à jour en même temps que le langage et vous permet de savoir comment utiliser chacune des méthodes que proposent Swift et SwiftUI. Vous pourrez également savoir si une méthode est dépréciée et donc prochainement supprimée avec une indication sur celle qui la remplace. Et enfin, des conseils, des tutoriels et plein d’autres informations très utiles !

Je vous invite à y faire un tour rapide dès maintenant.

• Vous retrouverez celle de Swift ainsi qu’une documentation plus guidée.

• Celle des développeurs Apple, où vous retrouverez des informations sur Xcode, Swift ou SwiftUI notamment.

• Très utiles aussi lorsque vous développez des interfaces sur les dispositifs d’Apple, la Humain Interface Guideline ou HIG. La documentation est très grande et vous ne pourrez pas tout connaître mais n’ayez pas peur d’aller y faire un tour. Elle permet de garantir une cohérence entre toutes les applications faites pour les produits Apple.

À vous de jouer

Contexte

Vous êtes chargé de réaliser le deuxième POC du projet. Les 2 POC seront proposés à des utilisateurs et ils voteront pour celle qu’ils préfèrent.

Techniquement les 2 applications seront semblables, c’est pour cela que vous serez en mesure de faire la deuxième seul.

Rassurez-vous, Samira sera là pour vous accompagner étape par étape.

D’ailleurs, elle vous a envoyé un mail et vous demande de vous occuper de l’initialisation de ce second projet pour commencer.

Consignes

Voici le mail que vous avez reçu de Samira :

Après avoir vérifié que vous avez bien sûr la dernière version d’Xcode disponible sur l’App Store, créer un nouveau projet qui se nomme TheyMakeIT-POC2.

Celui-ci doit être en Swift et SwiftUI.

On vérifiera ensemble que tout est bon pour que vous puissiez commencer à coder.

Pour cette étape vous devez donc :

1. Vérifiez la version d’Xcode installée sur votre Mac ;

2. Installez-la ou mettez-la à jour si besoin ;

3. Créez un nouveau projet ;

4. Sélectionnez le template App d’iOS ;

5. Remplissez le nom du projet ;

6. Configurez les technologies du projet :

   1. Language : Swift

   2. Interface : SwiftUI

7. Enregistrez le projet dans un dossier qui contiendra vos projets de développement, rangé dans vos documents ou sur votre bureau.

Vérifiez votre travail à l’aide cet exemple de corrigé

Sur l’App Store vous devez avoir cet affichage lorsque vous cliquez sur Xcode et si vous êtes sur la dernière version :

Pour être sûr que vous avez initialisé votre projet Swift/SwiftUI correctement, vous devriez avoir cette arborescence sur votre panneau de gauche :

En résumé

• Un IDE est un logiciel de développement qui regroupe un éditeur de texte, un compilateur et un débogueur.

• Xcode est l’IDE qui permet de faire du développement iOS.

• L’interface d’Xcode peut se découper en 3 grandes parties :

  • Le panneau de gauche pour naviguer

  • Le panneau de droite pour caractéristiques techniques

  • La fenêtre centrale pour développer

Maintenant que vous avez tous les outils nécessaires, vous allez pouvoir commencer à faire ce pour quoi vous êtes ici : coder une application iOS !