Si vous êtes intéressés par la création d’applications iOS, cet article est fait pour vous.
Je vais regrouper ici tout ce qu’il faut savoir pour commencer à créer des applications iOS.
Avant toute chose, il faut savoir que le développement iOS se base sur le langage de programmation Swift.
Sans connaître ce langage, on ne peut rien faire. Si vous voulez l’apprendre, j’ai créé un guide spécialement pour ça.
Il vous suffit d’entrer votre adresse mail dans le cadre à droite de cette page et vous recevrez le guide gratuitement par mail.
Vous pouvez le finir en moins d’une heure (exercices compris).
Ensuite il vous faut un mac pour télécharger le logiciel Xcode. Ce logiciel est le seul qui permet de créer des applications iOS et il n’est disponible que sur mac.
Créer un nouveau projet
La première étape est d’ouvrir Xcode et de créer un nouveau projet. Ensuite dans l’onglet iOS on choisit Single View App.
Vous avez ensuite plusieurs champs à remplir :
- Product name : le nom de l’app, ici vous mettez ce que vous voulez.
- Team : l’équipe qui crée l’app, si vous n’avez pas de compte Apple Developer laissez ça vide, on s’en fiche si vous ne publiez pas l’app
- Organization Name : le nom de l’organisation qui crée l’app, mettez simplement votre nom ou un pseudo, si vous ne publiez pas l’app ce n’est pas important
- Organization Identifier : l’identifiant unique de l’app. C’est comme un nom de domaine inversé formé par com. suivi du champ précédent et du product name. Vous pouvez le laisser comme ça
- Language : on choisit Swift
- User Interface : on choisit entre Storyboard, le moyen actuel de faire des interfaces et SwiftUI, la nouvelle méthode sortie en 2019 lors de la WWDC. Nous on choisit Storyboard.
Vous choisissez ensuite où le dossier de l’app se situe et tout est prêt.
Le logiciel et les fichiers
En haut à gauche il y a un bouton Play et Stop qui servent à lancer et stopper l’application.
Juste à côté, il y a le choix du simulateur ou du téléphone sur lequel l’app va être lancée.
Au milieu il y a une barre de status sur l’application.
Il y a ensuite un bouton + qui servira seulement pour les storyboard.
Juste à côté, il y a un bouton avec des flèches qui sert à comparer les changements sur vos fichiers quand vous utilisez Git, si vous ne savez pas ce que c’est pas de soucis on en a pas besoin.
Et enfin en haut à gauche il y a 3 boutons qui servent respectivement à ouvrir les panneaux de gauche (le navigateur des fichiers), du bas (la console qui affiche les erreurs de l’application) et de droite qui est une fiche de propriété sur le fichier (ou l’élément selectionné quand on est dans les storyboard).
Dans le panneau de gauche, il y a tous vos fichiers de code.
- Tout en haut, ce sont les paramètres de votre application. On a par exemple son nom, l’orientation du téléphone supportée par votre app ou encore la version d’iOS minimale pour votre application et tout un tas de choses similaires
- AppDelegate.swift : ce fichier contient toutes les fonctions qui sont appelées quand votre app se lance
- SceneDelegate.swift : pareil mais c’est un autre type de fonctions
- ViewController.swift : un fichier de code associé à un écran de l’app. Chaque ViewController correspond à un écran de l’app
- Main.storyboard : le fichier qui permet de créer des interfaces de manière visuelle. On peut y créer toute l’interface de l’app et la logique derrière chaque écran sera gérée par un ViewController. On peut très bien ne pas s’en servir et créer les interfaces dans les ViewController directement. Beaucoup de personnes recommendent de ne pas les utiliser mais chaque méthode a ses avantages et inconvénients. Il est bon de connaître les 2
- Assets.xcassets : toutes les images que votre app va utiliser
- LaunchScreen.storyboard : un storyboard qui permet de créer l’écran de chargement de manière visuelle
- Info.plist : un fichier qui contient des propriétés d’information sur l’app
Vous l’aurez compris, on va travailler soit uniquement avec des ViewController soit avec le Main.storyboardet des ViewController.
On va aussi souvent créer des fichiers pour des vues personnalisées.
Créer un écran
Chaque écran correspond à un ViewController. Chaque ViewController est constitué d’une vue (du type UIView ou autre sous-classe) qui prend tout l’écran.
À cette vue on ajoute des sous-vues pour créer l’interface qu’on veut.
Il y a plein de types de vues :
- UILabel pour le texte court
- UITextView pour le texte long
- UIButton pour les boutons
- UITextField pour les champs de texte que l’utilisateur peut remplir
- UIImageView pour afficher une image
- UITableView pour aficher des listes verticales, elles sont constituées de UITableViewCell
- UICollectionView pour afficher des listes plutôt sous forme de carrés qui contiennent à leur tour d’autres éléments, elles sont constituées de UICollectionViewCell
Il y en a énormément mais ce sont les principales.
On peut également créer nos propres vues qui peuvent être des sous-classes de UIView ou n’importe quel autre type de vue.
Si par exemple on veut créer les mêmes boutons verts avec les bords arrondis et le texte blanc sur toute l’app.
On peut créer des boutons et les modifier dans chaque écran ou alors on peut créer une sous-classe de UIButton et dire que nos UIButton sont de ce type là.
Pour le faire, il suffit de créer un nouveau fichier en faisant Cmd+N ou en allant dans File > New > File, puis Cocoa Touch Class, choisir un nom pour votre classe de boutons comme par exemple GreenButton dans notre cas et dans le champ Subclass of, mettre UIButton.
Ensuite dans ce fichier on va modifier le bouton pour faire en sorte qu’il ressemble à ce qu’on veut.
Pour apprendre comment faire des interfaces dans le code, j’ai écrit un article à ce sujet juste ici : Créer des interfaces programmatiquement en Swift.
Vous pouvez faire ça avec n’importe quel type de vue.
Je vous montre ça en détail dans ma formation pour apprendre le développement iOS pour débutants (je vous en reparle à la fin de cette page).
Le même principe s’applique aux UIViewController.
Maintenant qu’on sait ça, comment créer un écran concrètement ?
Avec le storyboard :
- Aller dans Main.storyboard
- Cliquer sur le + en haut à droite
- Prendre un UIViewController et le glisser vers le storyboard
- Créer un nouveau fichier mais cette fois dans Subclass of on met UIViewController
- Choisir un nom pour ce ViewController
- Aller dans le storyboard à nouveau et cliquer sur votre nouvel écran avec le panneau de droite ouvert
- Cliquer sur l’icône qui ressemble à une carte d’identité
- Dans Class, entrer le nom de votre ViewController que vous venez de créer
- C’est bon, il n’a plus qu’à ajouter du contenu à votre écran
Dans le code :
- Créer un nouveau fichier mais cette fois dans Subclass of on met UIViewController
- Choisir un nom pour ce ViewController
- Ajouter son contenu dans le code
Pour ajouter du contenu grâce au storyboard, il suffit de cliquer sur le + et choisir l’élément que vous voulez mettre.
Ensuite vous remplissez le contenu de l’élément et son style dans le panneau de droite dans le 3eme onglet en partant de la droite.
Vous pouvez changer la couleur de fond, le texte s’il y en a…
Il faut ensuite définir son placement avec des contraintes.
On définit les contraintes d’un élément el le sélectionnant puis en cliquant sur le bouton carré en bas à droite du storyboard.
Vous pouvez ensuite choisir tout en haut ses distances par rapport aux bords de l’écran ou du voisin le plus proche s’il y en a un.
Juste en dessous quand on clique sur le même bouton, on peut mettre une contrainte de hauteur et de largeur.
On a aussi le bouton qui se situe à gauche de celui-ci qui sert à centrer l’élément horizontalement ou verticalement dans son parent.
À partir de ça, retenez qu’il faut que le Xcode puisse déduire 4 informations sur le placement de votre élément à partir de vos contraintes :
- sa position horizontale appelée X
- sa position verticale appelée Y
- sa hauteur appelée height
- sa largeut appelée width
Tant qu’il n’y à pas ça, vous verrez que les traits des contraintes de l’élément sont rouges.
Pour apprendre à faire ça dans le code, vous avez mon articler sur Créer des interfaces programmatiquement en Swift.
Et voilà vous avez votre écran créé !
La navigation entre ses écrans
Pour l’instant on ne voit pas le résultat de ce que vous venez de faire car votre écran ne s’affiche pas.
Le point d’entrée de l’app est le ViewController créé par défaut donc il faut lui ajouter du contenu pour afficher quelque chose.
Ensuite il faut pouvoir naviguer vers d’autres écrans sinon on ne verra que le premier ViewController.
Pour cela, il y a plein de méthodes. On peut se servir des UINavigationController (les barres de navigation en haut de l’écran qu’on a l’habitude de voir), des UITabBarController (les boutons de navigation en bas qu’on a également l’habitude de voir) ou alors on peut simplement les instancier à partir du storyboard ou des segue (prononcé ségoué, c’est une méthode pour naviguer entre ViewController).
Le NavigationController sert à avoir une barre en haut pour pouvoir avoir un bouton pour revenir en arrière et à naviguer entre les écrans avec seulement 1 signe de code.
Si vous utilisez juste le code et pas de storyboard, vous devez utiliser au moins un NavigationController et cacher la barre du haut si vous n’en voulez pas.
Pour utiliser ça, il faut que votre ViewController soit dans un NavigationController.
Ensuite on définit notre NavigationController comme étant le point d’entrée de l’app. Encore une fois, je vous explique ça dans mon article sur Créer des interfaces programmatiquement en Swift.
Dans le storyboard, rien de plus simple, on clique sur le ViewController et puis sur la flèche qui entre dans un carré en bas à droite du storyboard puis on choisit NavigationController.
Une fois qu’un ViewController et dans un NavigationController, on peut afficher n’importe quel ViewController à partir de celui-ci et les ViewControllers affiché par le premier ViewController pourront également en afficher et ainsi de suite.
On fait pareil dans le storyboard si on veut faire avec un TabBarController et ensuite on ajoute d’autres ViewControllers à la barre de navigation en bas en maintenant control et en cliquant sur le ViewController puis en glissant en maintenant control et en relachant sur le TabBarController et ensuite un menu apparait et on choisit viewcontrollers.
Vous pouvez ensuite modifier l’aspect de votre tab bar et des icônes en cliquand dessus dans le ViewController.
Une fois que votre ViewController est dans un NavigationController, vous pouvez naviguer vers un autre écran en faisant :
self.navigationController?.pushViewController(ViewController(), animated: true)On peut également faire naviguer en utilisant seulement le storyboard grâce aux segue.
Ça doit partir d’un bouton ou être déclenché dans le code.
Pour le faire à partir d’un bouton par exemple, on fait un Control + drag comme précédemment expliqué avec le TabBarController) du bouton vers le prochain ViewController et on choisit ensuite show dans le menu.
pour le déclencher dans le code, on fait un control + drag en partant du premier carré à gauche en haut du ViewController vers le prochain ViewController.
Ensuite on clique sur le lien qui s’est formé entre les ViewController et on va dans le panneau de droite à l’onglet en forme de carte d’identité et dans identifier on met un nom unique pour le segue.
On le déclenche dans le code en appelant la fonction performSegue :
self.performSegue(withIdentifier: "IdentifiantDuSegue", sender: self)Si on ne veut pas utiliser les segue on peut faire plus simplement :
let vc = UIStoryboard(name: "Main", bundle: Bundle.main).instantiateViewController(withIdentifier: "ViewController") as? ViewController
self.present(vc, animated: true)L’identifiant que j’ai passé en paramètre, est celui que vous allez entrer dans le champ storyboard ID dans le panneau de droite quand vous cliquez sur un ViewController. Ce champ est dans le premier onglet.
Modifier les vues dans le code
Quand on ajoute des vues dans le storyboard, on peut y avoir accès dans le code pour les modifier ou pour faire des actions dessus comme par exemple changer leur texte, leur image, leur couleur ou réagir au clique.
Pour faire ça on utilise les outlets et les actions.
Pour créer une propriété qui représente notre élément (outlet) on ouvre le fichier de code à côté du storyboard :
- cliquer sur le ViewController dans le storyboard
- sous les boutons pour ouvrir les différents panneaux il y a un bouton représenté par plusieurs traits horizontaux, cliquer dessus et choisir Assistant
- faire un control + drag de l’élément vers le haut du fichier de code
- donner un nom à votre propriété
Pour les actions c’est la même chose mais en partant d’un bouton ou d’un autre élément cliquable mais on ne va pas aller vers le haut du fichier mais le bas.
Pour déclencher l’action quand l’utilsateur clique sur le bouton on choisit touchUpInside dans le menu des actions.
L’action fonctionne exactement comme une fonction sauf qu’elle est appelée automatiquement quand l’action de déclenchement est faite par l’utilisateur (ici c’est toucher le bouton).
Vos outlets fonctionnent exactement comme des propriétés.
Une dernière chose
Avec ce qu’on vient de voir, vous avez déjà une bonne base mais il vous manque pas mal de chosses et surtout une méthode pour pouvoir créer n’importe quelle application.
J’ai créé une formation dédiée au développement iOS pour les débutants qui contient tout ce qu’il faut savoir pour créer des applications mobiles par soi-même.
C’est la formation que j’aurais aimé avoir quand j’ai commencé.
Mais elle n’est pas faite pour tout le monde. Il faut travailler, faire un effort de compréhension, pratiquer et t’exercer sur les choses dont je vais te parler.
Vous avez 2 possibilités à présent.
Soit vous prennez la formation et vous apprennez une vraie méthode ainsi que toutes les bases qu’il faut savoir pour créer n’importe quelle app.
Soit vous essayez de vous former tout seul et vous perdrez du temps car vous n’apprendrez pas forcément les bonnes choses et vous apprendrez beaucoup moins vite car vous ne serez pas guidé.
Vous êtes libre de rejoindre la formation si vous voulez.