Maintenant que vous êtes équipés d'XCode, vous êtes prêts à créer votre premier projet d'application mobile !
Pour commencer, ouvrez Xcode. Dans ce cours, j’utilise Xcode 7.3. Cliquez sur « Create new project ». Une nouvelle fenêtre s’ouvre, avec une barre de menu sur le côté gauche. Vous voyez deux grandes catégories « iOS » et « OS X ». Comme vous souhaitez créer une application mobile, vous allez rester dans la catégorie « iOS » et cliquer sur « Application ». Vous avez au moins 5 choix : Master detail, Page based, sigle view, tabbed et game. Un petit aperçu rapide de ces options :
Master detail vous offre une interface de navigation toute prête ;
Page based, comme son nom l’indique vous propose comme son nom l’indique un projet optimisé pour créer plusieurs pages ;
Single view, crée un projet avec une simple vue ;
Tabbed crée un projet avec une barre d’outils sur le bas de l’écran ;
Et game crée un projet optimisé pour les jeux 3D avec un petit exemple de vaisseau spatial en 3D.
Choisissez single view application, et donnez-lui un nom, par exemple « First App ». Vous pouvez laisser le champ « Organization name » vide pour le moment ou entrer ce que vous souhaitez. En revanche, vous avez besoin d’un « Organization id ». Dans l’idéal, c’est le nom de domaine d’un site web que vous possédez mais rassurez-vous, si vous n’avez pas de site web, entrez vos prénom et nom attachés, ça suffira.
Cliquez sur next, créez dans vos documents un dossier nommé « Projets » par exemple, choisissez ce dossier et cliquez sur « create ». Voilà ! Votre projet est créé. Reste à comprendre ce qu’il y a dedans maintenant...
C'est quoi l'Interface Builder ?
L’interface builder, si vous avez des difficultés en Anglais, signifie constructeur ou créateur d’interface, parfait, c’est l'objet du chapitre.
Dans la fenêtre qu’a ouverte Xcode, regardez sur la gauche, vous avez une sidebar qui affiche une multitude de dossiers et de fichiers. Tout en haut, la branche principale nommée First App ou le nom de votre projet. Puis un dossier qui porte également le nom de votre projet. C’est sur ce dossier que nous nous concentrerons dans ce chapitre.
Cliquez d’abord sur Main.storyboard.
Vous ne connaissiez pas l’extension storyboard ?
Les storyboards sont très pratiques : ils nous permettent de visualiser l'aspect de notre application avant qu'on la lance. Grâce aux storyboards, on peut disposer les éléments précisément les uns par rapport aux autres ou encore par rapport aux bords de l'écran. Un fichier avec l'extension .storyboard est en fait un fichier écrit en XML mais rassurez-vous tout de suite, pas besoin de connaître le XML pour créer une application. Vous n’en verrez peut-être même pas.
Vous devriez voir en plein milieu une sorte de fenêtre avec pour titre « View controller ».Un view controller est simplement une fenêtre sur votre future application. Sur la gauche de ce view controller, vous devriez voir une flèche qui pointe directement dessus. Cette flèche signifie que la première fenêtre qui sera ouverte dans votre appli sera celle-ci.
Le catalogue
Xcode est bien pratique, vous l’avez vu, il crée des outils pour nous aider automatiquement. Nous allons voir ici le catalogue d’images. C’est facile de le retrouver, observez la partie gauche d’Xcode, vous pourrez voir un dossier nommé « images.xcassets » avec une icône bleue. Cliquez dessus.
Vous devriez déjà y voir un élément nommé « AppIcon » et, sur l’écran central, plusieurs petits carrés accompagnés d’une légende. Le dossier AppIcon doit contenir plusieurs images pour adapter l’icône de l’application à chaque appareil. Vous vous en doutez, si l’icône pour iPhone 4S avait la même résolution que celle pour l’iPad retina, le rendu serait très mauvais.
En revanche, rassurez-vous, pour la plupart des autres images, pas besoin de plusieurs résolutions. Par exemple, trouvez une image sur votre ordinateur et faites un glisser déposer dans la zone de gauche. Et voilà, vous pouvez utiliser cette image dans votre application !
PList
Dans la partie gauche d’Xcode, vous devriez voir un dossier « Supporting files ». Ouvrez-le en double cliquant dessus et cliquez sur le fichier info.plist qui se trouve à l’intérieur.
Et voilà encore un fichier XML, en effet, ce langage est très pratique pour tout ce qui concerne la configuration et les éléments fixes.
Vous allez me dire que ça ne ressemble pourtant pas du tout au storyboard. C’est normal, il y a 1001 façons d’exploiter les données d’un fichier XML. Pour ce fichier, les développeurs d’Xcode ont choisi de le représenter sous forme d’un tableau dans lequel une propriété est attribuée à une clé. Par exemple, chez moi, la propriété “en” est attribuée à la clé “localization” (ce qui veut dire que mon application est configurée en anglais (english => en ;) )… Pour le moment, vous n’avez pas besoin de vous occuper de ce fichier, mais sachez qu’il est là et qu’il sert à configurer votre application.
Les fichiers Swift
Désolé, on s’est un peu attardés et nous n’avons pas encore vu de langage Swift... Mais ne partez pas, ça vient là tout de suite !
Cliquez à présent sur ViewController.swift. Si vous vous rappelez du cours d’initiation à Swift, vous connaissez déjà plusieurs mots : « import », « class », « override », « func ». Donc dans le fichier créé par défaut par Xcode, nous importons UIKit qui est le kit nous permettant d’utiliser les éléments graphiques, nous créons une class ViewController qui hérite de UIViewController.
Puis nous réutilisons les méthodes viewDidLoad() et didReceiveMemoryWarning() :
La méthode
didReceiveMemorywarningest appelée lorsque votre application exploite trop la mémoire vive (dite “RAM”) de l’appareil, nous ne ferons rien ici.La méthode
viewDidLoadest appelée lorsque qu’une instance de la classe ViewController est chargée.
Tapez ce que vous voulez afficher dans la première fenêtre de votre application dans la méthode viewdidLload. Par exemple :print("coucou, voilà ma première application")
Cette instruction indique à l’appareil affiche “coucou voilà ma première application” dans le log et revient à la ligne.
Pour voir ce résultat vous-mêmes, lancez l’application. Cliquez sur product dans la barre en haut de l’écran, puis destination, puis cliquez sur iPhone 5. Enfin, tapez cmd + R sur votre clavier pour lancer l’application. Un simulateur devrait apparaîitre, afficher le nom de votre application sur fond blanc puis une page vide. En revanche, revenez sur Xcode, observez le log et vous verrez apparaître…
... "Coucou voilà ma première application". Eh oui, ça marche !
Passez à la partie 2 pour ajouter des objets sur l'écran !
