Développez votre première application pour iOS

Avant de partir, il faut bien tout tester. Vous n’avez pas envie d’éprouver une fausse joie dans 2 jours, lorsque Sébastien, le responsable qualité de l’équipe, va tester votre application et potentiellement trouver des bugs !

Quelques conseils pour bien tester son application :

• Vérifiez toutes les fonctionnalités, c’est-à-dire toutes les interactions que votre utilisateur pourrait avoir avec l’application : dans votre cas, vous pouvez essayer d’afficher toutes les femmes de la liste une à une afin de vérifier toutes les situations.

• Vérifiez plusieurs tailles d’écran : faites cette manipulation sur au moins 4 tailles d'écrans disponibles.

• Vérifiez les comportements bizarres : imaginez que vos utilisateurs ne savent pas comment utiliser votre application. Essayez d’appuyer plusieurs fois sur des boutons, de rester appuyé dessus longtemps ou encore de tourner l'écran dans tous les sens. Vous devez protéger votre application d’un maximum de cas possibles.

Changez la taille de l’écran

Commençons par lancer le projet POC 1 sur différentes tailles d’écran.

À quoi ressemble votre application sur un écran plus grand ? Sur un iPhone Pro Max par exemple ? Ou qu’en est-il sur iPhone 13 mini ?

Le simulateur est encore plein de ressources et va vous permettre de répondre à cette question.

On regarde ça ensemble :

Les modèles déjà installés

• En cliquant sur le nom du modèle d’iPhone sur Xcode en haut, vous pouvez voir la liste des iPhones sur lesquels vous pouvez lancer votre application.

• Vous pouvez également changer d’iPhone sur le Canva en cliquant encore une fois sur le nom du modèle mais en bas cette fois-ci.

• Si le simulateur que vous cherchez n’est pas dans la liste ?

  • Cliquez dans le menu déroulant sur “Manage Run Destination…”

  • Dans la catégorie “Simulators”, vous verrez tous les modèles installés avec des informations comme la version d’iOS.

Télécharger un autre modèle

Si le simulateur n’est toujours pas dans cette liste, depuis la fenêtre “Manage Run Destination…”, vous devez :

• appuyer sur + en bas à gauche

• choisissez le modèle et version d’iOS dont vous avez besoin

• sinon cliquez sur Download more simulator runtimes… et choisissez la version iOS que vous souhaitez

Comprendre les versions d’iOS

• Il est important de comprendre que les plus anciens iPhones ne peuvent pas fonctionner sur les dernières versions d’iOS.

• Par conséquent, si votre projet fonctionne sur iOS 17 mais que le simulateur que vous souhaitez est un iPhone 7, ce ne sera pas possible car la dernière version supportée par l’iPhone 7 est iOS 15.

Changer la version iOS

• Depuis l’arborescence du projet, sélectionnez le premier élément de la liste à gauche qui s’appelle comme le projet.

• Puis appuyez sur Project et le nom du projet.

• Ensuite dans le champ “iOS Deployment Target”, cliquez sur le menu déroulant.

• Choisissez la version qui vous intéresse.

Tous les iPhones qui sont sur une version supérieure pourront lancer votre application. En revanche, vous ne bénéficierez pas des dernières avancées du langage Swift ni des dernières fonctionnalités des dernières versions d’iOS.

En lançant le projet sur iPhone 13 mini, comme vous pouvez le remarquer, il y a 2 soucis :

1. l’image ne fait pas la largeur de l'écran

2. une partie du texte est tronquée

Découvrons ensemble comment résoudre les 2 bugs d’affichage que vous venez de trouver.

Découvrez les outils de debug

Démarrons avec de bonnes bases par une définition de ce qu’est un bug. On pourrait le décrire comme un dysfonctionnement d’un programme. Donc le debug c’est lorsque l’on cherche à comprendre et corriger ce qui s’est mal passé.

Il existe plusieurs outils pour vous aider.

Error et warning

On a vu ensemble, il y a un onglet qui ressemble à un panneau attention (1) qui va déjà pouvoir nous aider si le programme détecte tout seul un problème.

Debug navigator

L’onglet du panneau qui ressemble à une bombe de peinture (2), vous permet d'accéder à des informations très importantes mais plus techniques comme l’espace que prend l’application dans la mémoire vive ou la quantité de données qui transitent par le réseau.

Report navigator

Ensuite, il y existe un autre onglet, c’est le dernier de la liste, le “Report navigator” (3).

À chaque fois que vous appuyez sur play, un nouveau “Run” est créé avec la date à laquelle il a été lancé.

Sous chaque run, vous retrouverez des informations sur :

1. Console

La console est un espace d’affichage textuel visible uniquement pour les développeurs. C’est très utile pour y afficher des informations sur des variables, sur des fonctions, etc…
Elle est très utilisée, peu importe le langage surtout pour des erreurs de logique.

2. Launch

Ce sont toutes les actions qu’Xcode a accomplies au lancement de l’application sur le simulateur et tout ce qui sera fait par Xcode jusqu'à ce que vous arrêtiez le lancement en cours.

3. Build

Cette fois ce sont toutes les actions réalisées au build du programme. C’est donc le moment où Xcode va compiler l’application. Vous pourrez même savoir combien de temps cela a pris.

Pas d’informations pour aider à la résolution des bugs ?

Lancer l’application sur le simulateur et on va regarder ensemble en vidéo comment aller plus loin avec la Debug area :

Debug Area

Vous pouvez également afficher la console en cliquant sur le bouton en bas à droite de l’espace central de code ou du Canva. Elle apparaît alors en bas de l'écran avec ce qu’on appelle la debug area.

On y retrouve plein d’autres outils en plus de la console, comme :

Breakpoints

Ce sont autrement dit des points d'arrêts. Vous pouvez décider d'arrêter le programme à une ligne de code précisément pour pouvoir analyser l'état des variables, vérifier que votre programme exécute bien une fonction, etc…
Cet outil est très utile pour les erreurs de logique ou d'exécutions. Les boutons permettent d’activer/désactiver les breakpoints ou encore d’avancer jusqu’au prochain.

Variables view

Vous pourrez y lire le détail de chaque variable sur un point d'arrêt, en plus des informations de la console.

Simulation

Ces boutons vous permettent de simuler un comportement précis comme une localisation ou le mode sombre du téléphone.

Debug View Hierarchy

Cette vue fait aussi une pause dans l'exécution du code. Elle permet de voir en détail la construction de la vue actuelle. C’est une vue en 3 dimensions de toutes les couches de ce que l’on voit à l'écran. Très pratique pour vérifier qu’un composant n’en cache pas un autre par exemple.

Pour corriger les bugs, vous devez :

• changer le contentMode de l’image en.fill

• ajouter une ScrollView pour le texte de description afin de pouvoir le faire défiler et donc qu’il soit visible même s’il dépasse.

À vous de jouer

Contexte

Après avoir fini le développement de votre premier écran, il est difficile de dire que vous avez fini votre ticket, si vous ne l’avez pas testé. Il est donc indispensable d’avoir lancé votre application sur plusieurs simulateurs et vérifier que tous les éléments étaient bien à leurs places et de bonnes dimensions.
Vous devriez y trouver 3 erreurs qu’il va falloir corriger.

Consignes

1. Lancez votre application du POC 2 sur le dernier iPhone Pro Max et sur un iPhone 12 mini

2. Changez la version iOS du projet si besoin

3. Corrigez le bug de l’image

4. Implémentez laScrollView

5. Ajoutez .multilineTextAlignment(.center) au composant Text de la CardView.

En résumé

• Le simulateur est un iPhone embarqué directement sur le Mac avec Xcode.

• Vous pouvez lancer votre application sur n’importe quel iPhone grâce aux simulateurs.

• La première chose pour tester son code c’est de voir le rendu de l’application sur un téléphone.

• Un bug est un dysfonctionnement d’un programme informatique.

• Xcode possède plein d’outils différents pour aider au debug.     

Ça y est, vous avez fini vos premiers tickets ! Bravo 🥳!

Sébastien vient de finir la dernière série de tests et a validé vos développements. Des tests sur des utilisateurs potentiels ont été faits et c’est le POC 2 qui a rencontré le plus de succès. L’interface est plus lisible pour 72% d’entre eux.

Il ne restera plus qu'à déployer l’application sur l’Apple Store pour qu’elle soit disponible pour l'événement !

Le “test and learn” ou tester et apprendre en français est l’une des meilleures méthodes pour apprendre le développement. Alors, lancez-vous !