Développez votre première application pour iOS

Il est temps d’avancer sur le ticket suivant.

Votre deuxième User Story consiste à développer un nouvel écran. Il représente la liste de femmes qui ont fait ou font l’histoire des nouvelles technologies.

Vous allez pouvoir découvrir un nouveau composant et mettre en place votre première navigation entre 2 écrans !

Impatient ? Un peu peur ? Dans tous les cas, Samira va continuer de faire du pair programming pour le premier POC, vous pourrez avancer seul pour le deuxième.

Allez ! C’est parti !

Voici le ticket :

Construisez votre modèle de données

Je sais que vous avez hâte d'intégrer un nouveau composant, mais avant de pouvoir faire cela, il faut passer par une première étape en Swift.

Vous allez devoir implémenter une liste et il est indispensable d’avoir des données pour la remplir puis l’afficher.

Création du modèle de données

Créez un nouveau fichier en iOS de type “Swift File”.

Il y a plusieurs méthodes pour cela :

• soit en faisant un clic droit sur le dossier qui contient vos fichiers depuis le panneau de droite puis “New File…”

• soit en faisant “File > New > File…”

• soit en appuyant sur ⌘ + n.

Choisissez bien le template “Swift File”.

Vous nommerez le fichier “Model” car c’est ici que vous allez coder votre modèle de données.

Laissez l’emplacement prévu par défaut dans vos dossiers puis validez.

Dans ce fichier, créez une nouvelle structure qui représentera une femme de la liste et qui sera composée de toutes les informations que vous avez besoin d’afficher dans l’écran détail précédemment implémenté.

Les attributs

La structure, que vous appellerez “Femme”, sera donc composée des attributs suivant :

1. son nom complet

2. un tableau des métiers qu’elle a exercé

3. le nom de l’image stockée dans les Assets

4. son année de naissance

5. son année de décès si elle n’est plus parmi nous

6. sa ou ses nationalités dans un tableau

7. un tableau contenant 2 de ses plus grandes réussites

8. une description de quelques lignes.

Pour plus de facilité dans la gestion des données et leur affichage, vous les mettrez toutes en String.

Cependant, vous avez besoin de gérer un cas spécifique pour la date de décès. Nous allons donc écrire ensemble un constructeur afin de gérer ce cas et remplacer par “aujourd'hui” s’il n’y a pas de date de décès à renseigner.

Le constructeur

Un constructeur en Swift commence toujours par init, sans utiliser le mot-clé func. Vous voyez, l’auto complétion vous propose le constructeur par défaut, nous allons nous en servir comme base.

Pour pouvoir gérer le cas où la personne n’aurait pas d'année de décès, vous pouvez fournir une valeur par défaut au niveau du constructeur.

Cela se passe au niveau des paramètres de celui-ci, dans les parenthèses.

Modifiez celui qui nous intéresse comme ceci : anneeDeces: String = "Aujourd'hui".

Désormais si vous souhaitez créer une nouvelle instance de la structure Femme, vous aurez 2 options :

• let femme = Femme(nom: <String>, metiers: <[String]>, nomImage: <String>, anneeNaissance: <String>, anneeDeces: <String>, nationalites: <[String]>, reussites: <[String]>, description: <String> )

• let femme = Femme(nom: <String>, metiers: <[String]>, nomImage: <String>, anneeNaissance: <String>, nationalites: <[String]>, reussites: <[String]>, description: <String> )

Vous voyez la différence ? Dans un cas vous pouvez entrer une année de décès, dans l’autre pas besoin.

Dans tous les cas, il y aura une valeur dans l’attribut anneeDeces.

Création de la variable de stockage des données

Pour permettre à votre composant d’afficher des informations, il faut pouvoir stocker ces données quelque part. Le plus simple et le plus adapté ici c’est de créer un tableau.

Dans ce tableau vous allez déclarer une nouvelle instance pour chaque femme en utilisant le constructeur précédemment créé avec les informations propres à chaque personnalité.

Comme c’est un peu long et rébarbatif, Samira s’est servie de ChatGPT, voici comment elle a procédé :

1. Elle a fourni la liste des femmes ainsi que leurs informations, que vous aviez dans le ticket, qui ressemble pour Hedy Lamarr à ceci :
   Hedy Lamarr

• Métiers : Actrice, Inventrice

• Nationalités : Autrichienne, Américaine

• Année de naissance : 1914

• Année de décès : 2000

• Réussites : Télécommunications, Ingénierie aéronautique

• Description : Hedy Lamarr était une actrice autrichienne qui a également été une inventrice prolifique. Elle est surtout connue pour son invention avec George Antheil, du système de saut de fréquence, une technologie fondamentale pour les communications sans fil modernes.

Ensuite elle a utilisé le prompt suivant en précisant le rôle et la description de la tâche à réaliser :

“Tu es développeur et tu es chargé de reformater une liste de femmes célèbres dans le domaine de la technologie en utilisant le constructeur init(nom: String, metiers: [String], nomImage: String, anneeNaissance: String, anneeDeces: String = "Aujourd'hui", nationalites: [String], reussites: [String], description: String) pour chaque femme. Pour chaque femme, tu dois créer une instance de la structure Femme, en incluant toutes les informations pertinentes telles que le nom, les métiers, le nom de l'image (le prénom de la femme), l'année de naissance, l'année de décès (avec une valeur par défaut 'Aujourd'hui' si l'année de décès n'est pas spécifiée), les nationalités, les réussites et une description. Assure-toi que les données sont correctement formatées et que toutes les informations sont incluses dans chaque instance de Femme. Fais le pour toutes les femmes de la liste.”

Si la réponse n’est pas complète, n'hésitez pas à lui dire “continue”. 

Le retour du prompt est celui-ci :

let listeFemmes: [Femme] = [
Femme(nom: "Hedy Lamarr", metiers: ["Actrice", "Inventrice"], nomImage: "Hedy", anneeNaissance: "1914", anneeDeces: "2000", nationalites: ["Autrichienne", "Américaine"], reussites: ["Télécommunications", "Ingénierie aéronautique"], description: "Hedy Lamarr était une actrice autrichienne qui a également été une inventrice prolifique. Elle est surtout connue pour son invention avec George Antheil, du système de saut de fréquence, une technologie fondamentale pour les communications sans fil modernes."),
Femme(nom: "Grace Hopper", metiers: ["Informaticienne", "Militaire"], nomImage: "Grace", anneeNaissance: "1906", anneeDeces: "1992", nationalites: ["Américaine"], reussites: ["COBOL", "Premier compilateur"], description: "Grace Hopper était une pionnière de l'informatique, connue pour son travail sur le langage de programmation COBOL et pour avoir popularisé le concept de débogage informatique. Elle a joué un rôle majeur dans le développement des premiers ordinateurs, notamment le Mark I. Elle est la conceptrice du premier compilateur en 1951."),
Femme(nom: "Audrey Tang", metiers: ["Programmeuse", "Activiste"], nomImage: "Audrey", anneeNaissance: "1981", nationalites: ["Taïwanaise"], reussites: ["Développement open-source", "Perl et Haskell"], description: "Audrey Tang, une programmeuse et activiste taïwanaise, est réputée pour son expertise en technologie et son engagement en faveur de la démocratie participative et de la gouvernance transparente à travers l'utilisation innovante de logiciels open-source et de plateformes numériques."),
Femme(nom: "Shafi Goldwasser", metiers: ["Ingénieur informatique"], nomImage: "Shafi", anneeNaissance: "1958", nationalites: ["Américaine", "Israélienne"], reussites: ["Prix Turing", "Cryptographie"], description: "Elle est une informaticienne renommée, lauréate du prix Turing, et a apporté des contributions significatives à la cryptographie, à la théorie de la complexité et à la sécurité informatique."),
Femme(nom: "Ada Lovelace", metiers: ["Développeuse", "Poétesse"], nomImage: "Ada", anneeNaissance: "1815", anneeDeces: "1852", nationalites: ["Britanique"], reussites: ["Première développeuse", "Calculs numériques"], description: "Elle est principalement connue pour avoir réalisé le premier véritable programme informatique, lors de son travail sur un ancêtre de l'ordinateur : la machine analytique de Charles Babbage. Sa vision avant-gardiste de l'utilisation des ordinateurs et des algorithmes a ouvert la voie à l'ère de l'informatique moderne, faisant d'elle une figure emblématique de la technologie."),
Femme(nom: "Katherine Johnson", metiers: ["Mathématicienne", "Ingénieure spatiale"], nomImage: "Katherine", anneeNaissance: "1918", anneeDeces: "2020", nationalites: ["Américaine"], reussites: ["Calculs orbitaux", "Calculs pour Apollo"], description: "Réputée pour la fiabilité de ses calculs en navigation astronomique, elle conduit des travaux techniques à la NASA qui s'étalent sur des décennies. Durant cette période, elle calcule et vérifie les trajectoires, les fenêtres de lancement et les plans d'urgence de nombreux vols du programme Mercury ou des procédures de rendez-vous spatial pour Apollo 11 en 1969."),
Femme(nom: "Reshma Saujani", metiers: ["Avocate", "Femme politique"], nomImage: "Reshma", anneeNaissance: "1975", nationalites: ["Américaine"], reussites: ["Fondatrice Girls Who Code", "Leadership pour la diversité"], description: "Elle est la fondatrice de l'organisation à but non lucratif Girls Who Code, qui vise à augmenter le nombre de femmes en informatique et à réduire la différence d'emploi entre les sexes dans ce domaine."),
Femme(nom: "Radia Perlman", metiers: ["Ingénieure en informatique", "Chercheuse"], nomImage: "Radia", anneeNaissance: "1951", nationalites: ["Américaine"], reussites: ["Protocole SPT", "Protocole TRILL"], description: "Radia Perlman, une informaticienne américaine, est renommée pour ses contributions révolutionnaires dans le domaine des réseaux informatiques, notamment pour avoir développé des protocoles qui ont établi les fondements de la fiabilité et de la performance des réseaux modernes.")
]

Nous allons voir ensemble ou copier-coller cette nouvelle variable, mais avant, il vous manque les images à télécharger à ce lien !

Il y a, ici aussi, plusieurs méthodes pour les rajouter au projet :

1. Faire un glissé déposé, appelé aussi drag and drop des images du Finder à Xcode dans les Assets.

   

2. Déplacer le dossier téléchargé dans le dossier Assets depuis le Finder, puis faire + en bas de la liste des Assets sur Xcode, puis “Import…” et le sélectionner.

3. Ajouter une à une les images en faisant + puis “Image Set” comme nous l’avions fait ensemble pour l’image d’Hedy.

Super ! Vous avez toutes vos données, maintenant il ne reste plus qu'à les afficher !

Affichez votre première liste

Nous voilà repartis sur du SwiftUI.

Pour rappel, voici la maquette de cet écran sur iPhone 15 Pro :

Nous allons implémenter ensemble ce nouvel écran :

La structure ListingView

• Utilisez la méthode que vous préférez pour créer un nouveau fichier SwiftUI. Vous le nommerez “ListingView”.  

• Dans cette nouvelle structure, juste avant la variable body, vous allez déclarer le tableau  listeFemmes  précédemment récupéré depuis le prompt ChatGPT.

Le composant List

• Le composant  List  permet d’utiliser un design avec un empilement, comme une VStack, de lignes blanches, appelées aussi cellules.

• Cet élément SwiftUI peut également fonctionner comme une boucle et peut : 

  • répéter plusieurs fois une même action 

  • parcourir un tableau

• Remplacer le contenu du body par un composant  List  . Comme ceci : 

  List(listeFemmes, id: \.nom){ femme in
  Text(femme.nom)
  }

• Il existe plusieurs façons d’utiliser ce composant, n'hésitez pas à faire des recherches sur internet pour trouver des exemples.

C’est un bon début mais nous n’avons pas encore toutes les informations qu’il faut fournir pour chacune des femmes pour correspondre aux maquettes. Il manque l’image.

Bien joué ! Effectivement, ici vous pouvez réutiliser ce que vous avez appris au précédent chapitre pour composer cette cellule ;

Une HStack qui contiendra :

• Une image en forme de cercle

• Un texte

Pour l’image il vous faudra :

1. redimensionner l’image

2. préciser son ratio avec fill car vous ne voulez pas garder l’image dans son integralité

3. utiliser  .clipShape(Circle())

4. préciser la frame de 70 par 70.

Voilà le code que vous devriez obtenir dans le body pour avoir un résultat identique à la maquette. 

Non, cette petite flèche c’est le signe que la navigation entre 2 pages est en place. Elle est ajoutée automatiquement. C’est la prochaine étape !

Ajoutez la navigation entre vos pages

Encore une fois, il existe plusieurs façons de constituer cette navigation, vous en trouverez plusieurs sur internet, mais nous avons choisi la plus recommandée par Apple à ce jour.

NavigationSplitView

Depuis iOS 17, Apple recommande d’utiliser  NavigationSplitView  . Ce composant est utile pour iPhone et iPad.

En effet, par défaut, vous pouvez déployer votre application sur iPhone et iPad avec le même code.

Apple utilise donc NavigationSplitView pour prévoir au cas où ce comportement.. Vous pourrez afficher à la fois la liste et le détail sur un seul écran, profitant de l'espace disponible plus intelligemment.

Nous ne nous concentrerons pas sur un affichage iPad dans notre cas mais nous garderons NavigationSplitView.

La notion de scope peut aussi avoir son importance si vous voulez qu’une partie de votre écran reste fixe et qu’une autre partie puisse changer après avoir appuyé sur un bouton.

Par exemple si votre interface était comme celle-ci et que le détail de la vue s'afficherait uniquement sur la partie du bas :

Dans notre cas nous voulons que toute la vue change, donc le scope se fera bien sur l'entièreté du contenu du body.

Il faut donc embarquer toute la liste à l'intérieur de votre  NavigationSplitView  .

NavigationLink

C’est cet élément qui va vous permettre de faire le lien entre :

• la cellule affichée qui comprend le nom et la photo de la personne

• la nouvelle vue qu’il faut faire apparaître après avoir sélectionné une ligne. 

Il s’utilise comme ceci :

NavigationLink {
// Nom de la vue de destination
} label: {
// Contenu de la cellule
}

De ce fait,  NavigationLink  va vous aider à afficher la bonne personnalité lorsqu’elle sera sélectionnée dans la liste.

Ah ! La petite flèche est bien là, au bout de chaque ligne de notre liste ! 

Samira vous propose de lancer l’application sur le simulateur afin de voir si tout fonctionne bien.

Changez votre vue par défaut

Vous lancez l’application et là… C’est toujours le premier écran que vous avez développé qui s’affiche ?

Et oui, erreur classique ne vous inquiétez pas !

Pour que le programme exécute une fonction, une vue, il faut forcément qu’on l’appelle. Sans cela, l’ordinateur ne saura pas à quel moment exécuter ce code.

Or, si vous recherchez dans le projet l’appel à “ListingView”, pas de résultat.

En revanche si vous cherchez l’appel à la vue que vous voyez, c’est-à-dire “ContentView”, bingo !

Il y a un fichier que nous n’avons pas beaucoup exploré, c’est TheyMakeIt_POC1App.

C’est ici qu’est indiqué le nom de la vue à afficher au lancement de l’application, et c’est toujours ContentView !

Remplacez  ContentView  par  ListingView  et relancez l’application.

Ah c’est mieux non ? 

Je ne sais pas si vous vous êtes rendu compte mais vous venez de résoudre votre premier bug iOS ! Bravo 👍!

Commencer par relire et comprendre le cheminement de l'exécution de votre code, c’est la base du debug.

Adaptez votre vue à l’objet sélectionné

Profitons que le simulateur soit lancé pour vérifier également la navigation.

Si vous sélectionnez une des femmes de la liste, avez-vous bien les informations de celle-ci ?

Ça marche pour Hedy Lamarr, mais pas pour les autres !

C’est normal, souvenez-vous, lorsque vous avez codé la page de détail, vous avez indiqué uniquement les informations sur Hedy.

C’est ce qu’on appelle mettre des données en “dur” à l’inverse des données dynamiques. Par conséquent, l’écran de détail ne s’adapte pas en fonction de la femme sélectionnée dans la liste.

Allons changer cela !

Rendez une vue dynamique

Pour rendre cette vue dynamique, il va falloir remplacer tous les endroits où vous avez mis une chaîne de caractères qui décrit Hedy.

Voici comment faire :

1. Créez une nouvelle instance de type  Femme  que vous nommerez  femme  . 

2. Ensuite, remplacez tous les champs de type  String  dont vous possédez l'information dans les attributs.

3. Pour les tableaux de string, comme les métiers, vous pouvez utiliser une boucle  ForEach . Cela donne : 

ForEach(femme.metiers, id: \.self) { metier in
Text(metier)
}

Comprenez vos erreurs

• En faisant ⌘ + b, vous obtenez 2 erreurs dans l’onglet issue navigator à gauche.

• Les 2 affichent “Missing argument for parameter 'femme' in call” mais dans 2 fichiers separés.

• Le constructeur de la structure ContentView prend en paramètre une variable de type  Femme  , il faut donc lui en fournir une.

Corrigez vos erreurs

Pour corriger les erreurs :

1. Dans ContentView, dans la preview :

• Changer le constructeur de ContentView par celui-ci ContentView(femme: )  .

• Créez une instance de la structure femme que vous initialisez avec les informations d’une femme, peu importe laquelle. 

• Vous pouvez faire un copier-coller une des femmes du tableau, c’est juste pour l'aperçu.

2. Dans ListingView :

• Changer le constructeur de ContentView.

• Utilisez l’instance créée avec le composant List pour la passer en paramètre du constructeur.

Ça y est, vos 2 pages sont complètes et la navigation est fonctionnelle !

A la sélection d'une femme de la liste, vous afficher toutes les informations sur celle-ci. Tout semble marcher comme il faut et l’affichage est conforme aux maquettes !

Un ticket de plus de terminé ! Bravo !👏

Samira doit partir en réunion et vous dit :

C’est génial, tout fonctionne ! Il nous reste un petit peu de temps avant la fin du sprint.

Avant de dire au reste de l'équipe que tu as fini tes 2 tickets pour le POC 1, je te propose qu’on regarde ensemble comment améliorer ton code.

On voit ça à mon retour de réunion !

À vous de jouer

Contexte

Vous avez bien avancé sur vos User Stories. Samira doit s’absenter et c’est le moment parfait pour appliquer ce que vous venez d’apprendre sur la version 2 des POC.

L’objectif est donc de réaliser le développement de l'écran de la liste qui amènera vers la deuxième version de l’application.

Pour rappel, la page qui contient le listing dans le POC 2 est identique à celle du POC 1. Il y a pas mal d’étapes à faire mais c’est exactement ce qui a été fait précédemment, donc ce ne devrait pas être compliqué.

Pour chaque étape, vous avez donc le choix entre :

1. Copiez/Collez le code fait avec Samira

2. Essayez de reproduire ce que vous avez fait avec Samira afin de tester votre compréhension

Consignes

Pour ce ticket vous devez :

1. Créez un nouveau fichier Model.

2. Créez la structure  Femme  dans ce fichier.

3. Créez un nouveau fichier SwiftUI  ListingView  .

4. Ajoutez le tableau listeFemme pour y stocker les informations dans  ListingView  .

5. Ajoutez les images de la liste des femmes.

6. Développez l’interface pour cette vue.

7. Changez l’appel de la vue dans  TheyMakeIt_POC2App  .

8. Rendez le code de la page de détail dynamique pour pouvoir afficher n’importe quelle personnalité avec une nouvelle instance de la structure  Femme  .

9. Ajoutez la navigation entre les 2 écrans en passant en paramètre la femme sélectionnée.

10. N’oubliez pas la preview. 

En résumé

• On peut donner une valeur par défaut à un constructeur

• Le composant List permet d’utiliser une boucle pour afficher le contenu d’un tableau

• NavigationSplitView est le composant qui permet de gérer la navigation sur iPhone et iPad

• NavigationLink permet de faire le lien entre la cellule sélectionnée et la page suivante correspondante

• Pour rendre une vue dynamique vous pouvez utiliser une variable qui sera initialisée lors de l’appel de celle-ci

Bien joué, vous avez réussi à coder tous vos tickets !

Même si c’est un bon début, il y a encore pas mal de détails ou vous pourriez vous améliorer pour prendre de bonnes habitudes et monter en compétences en tant que développeur iOS. 

Découvrez comment optimiser votre code pour le rendre plus efficace et plus sûr dans la prochaine partie.