• 8 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 05/05/2022

Concevez vos premiers objets

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Concevez vos premiers objets

Maintenant que vous avez une première idée du concept d'objet, nous allons pouvoir concevoir les objets de notre programme.

Découvrez le projet

Pour cela, je vous propose sans plus attendre de découvrir le projet sur lequel vous allez travailler. Le projet est disponible sur GitHub. Je vous invite à télécharger le projet sur votre Mac.

Une fois le projet téléchargé, vous pouvez ouvrir le fichier SchoolBusPlayground.playground . Et vous devriez arriver sur ceci :

A droite, de la pelouse sur laquelle se trouve un bus - notre canevas. A gauche, de la documentation sur le bus.
Le Playground

Vous trouvez d'abord sur la droite une étendue de pelouse sur laquelle se trouve un bus. Cela, c'est notre canevas. C'est sur ce canevas que nous allons dessiner notre route et déplacer notre bus.

Voyons maintenant ce qu'il se passe côté code. Tout d'abord nous avons quatre lignes de code que je vous invite à ignorer. Elles permettent seulement d'initialiser le canevas. Ensuite, la documentation nous présente 5 fonctions réparties en 2 catégories :

  • 3 qui concernent la route, ces fonctions permettent de dessiner des sections de route ;

  • 2 qui concernent le bus, ces fonctions permettent de faire avancer le bus ou de lui faire marquer un stop.

Je vous invite à essayer les fonctions proposées pour comprendre un peu leur fonctionnement. Par exemple, vous pouvez écrire :

canvas.createRoadSection()
canvas.createRoadSection()
canvas.createRoadSection()
canvas.createHomeRoadSection()
canvas.createRoadSection()
canvas.createSchoolRoadSection()

Dans ce code, nous créons sur le canevas trois sections de route normale, une qui contient une maison, puis une normale, et enfin une qui contient une école. Cet exemple couvre les trois exemples de création de route.

Le but de notre programme va être de déplacer le bus le long de la route en suivant 2 règles :

  • il doit s’arrêter à chaque maison pour récupérer des enfants ;

  • il doit s’arrêter à chaque école pour déposer tous les enfants qui sont dans le bus.

Le programme que nous allons construire doit pouvoir fonctionner, quelle que soit la route que nous allons dessiner.

Maintenant, à vous de jouer ! Essayez d'utiliser les deux fonctions restantes pour déplacer le bus. Il doit avancer jusqu'à l'école en marquant un arrêt à la maison pour récupérer les écoliers, et à l'école pour les déposer.

Et voilà ! Vous savez utiliser toutes les fonctionnalités du canevas. Nous allons construire tout notre programme à partir de ces 5 fonctions. N'hésitez pas à jouer un peu avec pour bien vous familiariser avec son fonctionnement.

Comprenez notre Playground

Si vous avez suivi le cours précédent comme suggéré, vous êtes déjà à l'aise avec un certain nombre de fonctionnalités du Playground, mais dans ce cours nous poussons plus loin les capacités du Playground. Laissez-moi en quelques mots vous en présenter les fonctionnalités dont nous allons profiter dans ce cours.

La documentation

Il est possible que dans le texte, vous voyiez plutôt ceci :

Votre Playground affiche peut-être des lignes commenté, de la documentation, qui commence par /*:
Hmm...

Les commentaires en gris qui commencent par /*:  sont un moyen d'écrire de la documentation dans le Playground. Cela est utile notamment pour agrémenter le code d'instructions facilement lisibles, ce qui est bien pratique dans notre cas. Si vous voulez en savoir plus sur le format de la documentation, vous pouvez aller voir la documentation de Xcode.

Pour afficher correctement la documentation, vous pouvez cliquer dans le menu en haut sur Editor  puis  Show Rendered Markup .

Les live views

Vous voyez les live views sur la droite en mode assistant. C'est notre canevas. En effet, c'est un objet “vue”, tel qu'il existe sur iOS et dans lequel on peut glisser ce que l'on souhaite.

Ces vues permettent d'avoir un rendu visuel animé ou non de ce que l'on souhaite montrer. Cela pourra vous être utile lorsque vous souhaiterez créer des composants customisés dans iOS (comme des boutons, des switchs, des listes, etc.). Vous pourrez les créer en utilisant une live view pour voir instantanément le rendu. Et lorsqu'ils sont prêts, vous n'aurez plus qu'à copier le code dans votre application.

Les sources et ressources

Si vous ouvrez le navigateur – le panneau de gauche – vous trouverez les sources et ressources du projet :

Les fichiers dans les sources et resources du projet
Les sources et ressources de SchoolBusPlayground
Les sources

Les sources d'un projet permettent de cacher une implémentation à l'utilisateur du Playground. Par exemple, ici, j'ai mis l'ensemble de ce qui concerne le canevas et ses animations dans les sources.

L'autre avantage d'écrire du code dans les sources, c'est qu'il n'est évalué qu'une fois au lancement du Playground, et non à chaque fois que le code dans le Playground est modifié. Cela permet de gagner en performance. Le Playground ne doit pas tout recalculer à chaque fois.

Les ressources

On enregistre les fichiers dont le Playground va avoir besoin pour s'exécuter dans les ressources, qui se trouvent en dessous des sources. Dans notre cas, on y trouve les images qui permettent de dessiner notre canevas. Mais on aurait pu y mettre des pistes audio, des vidéos, des données ; bref, tout ce qui n'est pas du code !

De la même manière, ces ressources ne sont chargées qu'au lancement du Playground.

Concevez vos objets

Maintenant que le décor est bien planté, nous allons commencer à réfléchir un peu. Comment allons-nous organiser notre code ?

Reprenons le même genre de raisonnement que pour le jeu "Qui-est-ce ?", et essayons de découper en plusieurs objets notre code.

Les propriétés

Tout d'abord, commençons par le plus évident : le bus. Nous allons donc avoir un objet Bus qui va avoir quelques propriétés comme :

  • le nombre de sièges ;

  • le nombre de sièges occupés ;

  • le nom du chauffeur.

Ensuite nous allons avoir la route. La route, c'est un peu plus subtil. Si on regarde les méthodes proposées par le canevas, on crée la route par sections. Donc, la route c'est la combinaison de plusieurs sections de route qui s'enchaînent. Certaines ayant une maison, d'autres une école, et enfin d'autres, rien.

On a donc un objet Route qui a une propriété :

  • un tableau de section de routes.

Enfin, il existe un dernier objet qui est la  Section De Route . Cet objet a donc 3 types différents. Et nous verrons comment les différencier avec l'héritage en partie 3 de ce cours.

Les méthodes

Mais un objet, comme vous le savez désormais, a des propriétés qui décrivent ce qu'il est, mais aussi des méthodes qui décrivent ce qu'il fait.

À première vue, une route ou une section de route, ça ne fait pas grand-chose... En revanche, un bus, ça en fait !

Donc nous allons à priori avoir au moins 2 méthodes :

  • avance ;

  • marque un arrêt.

L'analyse que nous venons de faire s'appelle un diagramme de classes.

Dans le diagramme, on trouve nos 3 classes Bus, Road et RoadSection avec leurs propriétés et méthodes.
Notre diagramme de classes

En résumé

  • Le projet contient un Playground dans lequel est présenté un canevas. Ce canevas a 5 fonctions qui nous permettent de :

    • créer une section de route avec ou sans école ou maison ;

    • faire avancer le bus ;

    • faire marquer un arrêt au bus.

  • Dans ce cours, nous découvrons 3 fonctionnalités avancées du Playground :

    • les live views ;

    • la documentation ;

    • les sources et ressources.

  • Dans notre diagramme de classes, nous avons identifié 3 objets que nous allons créer :

    • Bus ;

    • Road ;

    • RoadSection.

Vous voilà à la fin de cette première partie – bravo ! Maintenant que vous avez les bases de la programmation orientée objet en Swift, validez vos acquis avec le quiz. On se retrouve ensuite pour de nouvelles aventures dans la partie 2 !

Exemple de certificat de réussite
Exemple de certificat de réussite