PROGRAMMER AVEC XCODE D APPLE

Transcription

1 10b.1 Introduction Ce didacticiel vous apprendra comment créer une application pour les appareils ios. Parmi les sujets abordés, nous discuterons de l installation sur votre ordinateur des logiciels nécessaires, de la création d un nouveau projet ios, de la conception d une interface utilisateur simple, du codage d une appli rudimentaire et du test de votre appli sur ios Simulator (Simulateur ios). Commençons donc. 10b.2 Installation des Logiciels de Développement Afin de créer votre appli ios, il vous faut un Mac avec un processeur Intel et la suite de logiciels Xcode. À part en vous servant de Hackintosh (qui est légalement discutable et dont les problèmes à résoudre constamment vous donneront des maux de tête), il n existe pas d autre moyen de développer des applis ios que d avoir un Mac en votre possession. Si vous n avez donc pas de Mac et que vous voulez sérieusement apprendre à développer des applis pour iphone, ipad ou ipod Touch, il va vous falloir en acheter ou en emprunter un. Et soyons explicites : un vieux Mac avec un processeur Power PC ne fonctionnera pas. Vous avez vraiment besoin d un modèle plus récent avec un processeur Intel. Le logiciel le plus important pour développer sur ios est l EDI (Environnement de Développement Intégré) d Apple, qui répond au nom de Xcode. C est ce que vous utiliserez pour créer votre première appli. Si vous voulez tester votre appli sur un appareil matériel, vous devez vous enregistrer en tant que Développeur Apple ici : com/programs/register/. Pour le moment, toutefois, vous pouvez vous inscrire pour obtenir un compte développeur gratuit ; vous pourrez toujours écrire des applis mais vous ne pourrez les tester que sur le Simulateur ios. Si vous voulez tester votre appli plus tard sur un véritable iphone, ou si vous voulez la mettre en ligne sur l App Store, il vous faudra alors payer la mise à jour de votre compte Développeur ios qui, à l heure actuelle, coûte 99 $ par an. Après avoir fait l acquisition d un compte Développeur Apple, vous êtes fin prêt à télécharger et à installer Xcode. Vous trouverez le logiciel à cette adresse : Cela risque de vous amener à l App Store de Mac, selon la version du système d exploitation installée sur votre Mac. Si vous tombez sur l App Store, vous devez cliquer sur le bouton «Free» («Gratuit») situé à côté de l appli Xcode. Puis cliquez sur «Install App» («Installer l Appli»), puis entrez votre mot de passe App Store. Après avoir accepté tout le blabla légal, le téléchargement de Xcode débutera. Si vous cliquez maintenant sur «Purchases» («Achats» ; oui, c est un logiciel gratuit, mais étrangement, c est là qu il faut vous rendre) en haut de l App Store, vous tomberez sur une page où l avancement du téléchargement sera affiché. Soyez patient, car celuici peut prendre du temps, fichier volumineux oblige. Le logiciel Xcode devrait s installer automatiquement une fois téléchargé. 10b.3 Création d une Appli Basique Maintenant que Xcode est installé sur votre Mac, nous sommes prêts à commencer le développement d une Appli ios. Nous allons vous expliquer comment créer une appli basique qui consiste en un champ de saisie et en un bouton qui met à jour ce champ. Une fois le processus d installation terminé, Xcode peut être trouvé dans le dossier Applications, alors ouvrez celui-ci. Si vous avez comme projet de développer des applis ios, vous devriez ajouter Xcode au dock de votre Mac par commodité. La première fois que vous ouvrirez Xcode, vous devrez accepter la licence logicielle et attendre que la suite installe quelques composants logiciels supplémentaires. Suivez simplement les messages à l écran pour commencer. Lorsque Xcode s est ouvert, cliquez sur «Create a new Xcode project» («Créer un nouveau projet Xcode») ou choisissez le menu «File» («Fichier»), puis «New» («Nouveau») suivi de «New Project» («Nouveau Projet»). Vous devriez choisir, pour ce nouveau projet, le modèle «Single View Application» («Application à Vue Unique»). Cliquez suivant et vous serez amené à une page où vous aurez à Excel With Business

2 nommer l appli. Choisissez un Nom de Produit (par exemple, ProjetTest) et un Identifiant de Société (par exemple, com.monsite). Quant au Préfixe de Classe, le plus simple pour le moment est d utiliser le même nom que pour votre Nom de Produit. Pour ce qui est de «Device Family» («Famille d Appareils»), vous pouvez choisir «iphone». Soyez sûr que les options «Use Storyboards» («Utiliser Storyboards») et «Use Automatic Reference Counting» («Utiliser le Comptage Automatique de Référence») soient cochées et que l option «Include Unit Tests» («Inclure les Tests de Module») ne le soit pas. Cliquez sur «Next» («Suivant»). Choisissez l emplacement où vous désirez sauvegarder le dossier du projet, et assurez-vous que «Create local git repository for this project» («Créer un dépôt git local pour ce projet») ne soit pas coché car nous n aurons pas besoin de gestion de versions (voir le Module 10 pour plus d informations sur la gestion de versions). Puis cliquez sur «Create» («Créer»). Vous avez dû voir à l instant une grande fenêtre s ouvrir avec un nombre d éléments à première vue assez intimidant. Nous allons vous guider rapidement à travers les éléments de cette fenêtre pour vous faire comprendre l utilité de ces différentes fonctions. Vous trouverez en haut à gauche les boutons «Run» («Lancer») et «Stop» («Arrêter»), utilisés pour lancer et arrêter l appli sur le Simulateur ios ou sur votre appareil ios. À leur droite, vous verrez les menus contextuels Scheme (Plan) qui permettent de configurer comment l appli est lancée lors des essais. En haut, à droite, se trouvent les boutons Editor (Éditeur) et View (Vue). Ceux-ci contrôlent ce qui apparaît dans vos principaux espaces de travail. La fenêtre ouverte devrait se composer de trois parties principales. La zone de gauche s appelle le Navigator (Navigateur) ; il vous aide à trouver les fichiers qui constituent votre projet. La zone du milieu s appelle le Editor ; c est ici que vous effectuerez des changements à vos fichiers. La zone de droite est la zone Utilities (Utilitaires) ; vous n aurez pas à vous en servir pour le moment, et vous pouvez donc la fermer si vous voulez en appuyant sur le bouton View de droite. Il y a aussi une zone en bas dont l accès s effectue via le bouton View du milieu. Cette zone s appelle la zone Debug (Débogage) et elle vous sera utile lorsque, vous l avez deviné, vous aurez besoin de déboguer. 10b.4 Tester votre Appli dans le Simulateur Lorsque vous êtes prêt à tester votre appli dans le Simulateur ios, cliquez simplement sur le bouton «Run» en haut à gauche de la fenêtre principale de Xcode. La première fois que vous le ferez, on vous demandera peut-être si vous voulez mettre l ordinateur en Mode Développeur (Developer Mode). Choisissez «Yes» et entrez votre mot de passe pour ne pas avoir à l indiquer à nouveau à chaque fois que vous utilisez le Simulateur ios. Puisque vous avez choisi l option iphone en tant qu appareil cible, vous devriez utiliser iphone Simulator (Simulateur iphone) pour effectuer vos tests. Vous pouvez paramétrer cela en cliquant sur «Scheme» à droite du bouton «Run». Cliquez sur «Run». Le Simulateur iphone devrait maintenant être en marche et montrer ce à quoi ressemble votre Appli pour l instant. Vous devriez désormais avoir une Appli qui fonctionne ; toutefois, la seule chose que l Appli puisse faire, c est d afficher un écran blanc. Ajoutons-y alors quelques fonctions. 10b.5 Ajouter des objets à votre appli Cliquez, dans la zone Navigateur à gauche de l écran, sur le fichier MainStoryboard.storyboard. Ceci devrait faire apparaître une toile qui ressemble à un iphone. Vous devez ensuite ouvrir la bibliothèque d objet. Afin d ouvrir la bibliothèque d objet, vous devez d abord vérifier que la zone Utilitaires est ouverte. Pour cela, cliquez sur le bouton vue de droite, en haut à droite de la fenêtre. En bas de la zone Utilitaires, vous devez ouvrir la bibliothèque d objet en cliquant sur le petit bouton qui ressemble à une boîte. Ce devrait être le deuxième bouton en partant de la droite, à à peu près un tiers du bas de la zone Utilitaires. Maintenant que la bibliothèque Objects (Objets) est ouverte, vous pouvez ajouter quelques éléments sur Excel With Business

3 la toile. Depuis la bibliothèque Objets, choisissez «Controls» depuis le menu contextuel intitulé «Objets» ; cela vous permettra de réduire la liste des objets afin de rendre vos recherches plus simples. Tout d abord, vous devriez déplacer un Label depuis la zone de la bibliothèque Objet jusqu à la toile. Puis déplacez un Round Rect Button (Bouton Rond Rect) sur la toile. Ce sont les deux seuls éléments dont vous avez besoin pour le moment. Une fois les éléments vue placés sur la toile, il est aisé de les déplacer à l emplacement choisi des guides d alignement apparaissent automatiquement pour vous aider à les aligner. Vous pouvez aussi ajuster la taille des éléments vue en cliquant sur l élément vue de la toile et en déplaçant l un des carrés de redimensionnement qui apparaît. Vous pouvez entrer du texte pour le Label en doublecliquant dessus et en écrivant ce que vous désirez. Vous allez maintenant ajouter «Vous n avez pas appuyé sur le bouton» en guise de texte du Label. Il existe un autre moyen de faire ceci, en vous rendant dans le contrôleur Attributes (Attributs). Vous y accéderez depuis la zone Utilitaires. En haut de la zone Utilitaires, cliquez sur le quatrième bouton en partant de la droite celui qui ressemble à une maison à l envers et le contrôleur Attributs devrait s ouvrir. Vous pouvez aussi passer la souris sur ces boutons afin d obtenir un résumé de leur fonction. Dans le contrôleur Attributs, une fois que vous avez cliqué sur le Label, vous devriez voir une zone dans laquelle insérer du texte pour le label. Vous trouverez aussi des options de couleur du texte, de taille de la police et d alignement. Pour l instant, assurons-nous simplement que le texte affiche «Vous n avez pas appuyé sur le bouton» et configurez l alignement pour qu il soit centré. Vous pouvez désormais changer la taille et l emplacement du Label selon vos envies. Les options du bouton fonctionnent de façon identique. Pour l instant, la seule chose que vous avez à faire, c est d insérer le texte «Appuyez sur ce bouton» sur le bouton. Pour cela, rendez-vous dans l option Title («Titre») du contrôleur Attributs ou double-cliquez sur le bouton dans la toile. Si vous le désirez, vous pouvez tester l appli dans le Simulateur pour vérifier que les éléments vue s affichent comme prévu. Bien sûr, le bouton ne fera rien pour l instant. Mais nous allons arranger cela. 10b.6 Faire marcher les objets Ensemble Ajouter une Connexion d Action Attelons-nous maintenant à faire fonctionner ce bouton. La première étape va être de donner au bouton une action. Puisque votre storyboard va être ouvert, vous devriez cacher la vue Utilitaires et ouvrir l éditeur Assistant en pressant le bouton de vue droit et le bouton éditeur du centre, en haut à droite de la fenêtre. L éditeur Assistant devrait avoir affiché le fichier ProjetTestViewController.h à droite de l écran de la toile. Si vous voyez un autre fichier, vous pouvez toujours choisir celui que vous désirez en cliquant sur les icônes de navigation sous les boutons de l Éditeur. Une fois le bouton sélectionné sur votre fichier de storyboard, laissez appuyée la touche contrôle tout en le déplaçant sur le fichier ProjetTestViewController.h. Déplacez-le en dessous de la et vous devriez apercevoir une fenêtre de dialogue contextuelle qui dit «Insert Outlet, Action or Outlet Collection» («Insérer Outlet, Action ou Collection d Outlets»). Vous pouvez maintenant lâcher le bouton de la souris pour qu un nouveau menu contextuel s affiche. Pour Connection (Connexion), choisissez Action ; pour le nom, écrivez changetext: (avec le deux-points) ; le Type devrait être id ; l événement, «Touch Up Inside» («Retouche à l Intérieur») ; quant aux Arguments, ce doit être «Sender» («Éxpéditeur»). Vous pouvez ensuite cliquer sur «Connect» («Connecter»). Une ligne de code a maintenant dû être ajoutée au fichier ProjetTestViewController.h qui affiche : - (IBAction)changeText:(id)sender; De plus, une méthode vide a été créée dans ProjetTestViewController.m. Celle-ci affiche : - (IBAction)changeText:(id)sender { } Excel With Business

4 Pour faire bref, ces deux fichiers fonctionnent ensemble. Le fichier.h est un fichier header (entête) qui contient les déclarations de variable et de méthode, tandis que le fichier.m contient le corps principal du code. Pour le moment, nous avons créé une «connexion d action» entre le Bouton et le View Controller (Vue Contrôleur). L étape suivante consiste à créer une «connexion outlet» entre notre Label et la Vue Contrôleur. Le procédé est le même. 10b.7 Faire marcher les objets Ensemble Créer la Connexion Outlet Assurez-vous tout d abord que votre toile de storyboard est visible et le fichier ProjetTestViewController.h est toujours ouvert dans l éditeur Assistant. Cliquez sur le Label de la toile. Puis appuyez sur contrôle et déplacez le Label jusqu à la zone de déclarations de méthode du fichier ProjetTestViewController.h. Peu importe si la déclaration est placée au-dessus ou en-dessous de celle que vous avez créée auparavant. Vérifiez que Outlet s affiche dans Connexion ; son nom est «textlabel» ; son type, «UILabel» ; et son Storage (Mémoire), «Weak» («Faible»). Puis cliquez sur «Connecter». 10b.8 Faire marcher les objets ensemble Créer une Variable Voilà, nous avons ajouté un outlet au fichier Vue Contrôleur. Vous êtes presque prêt à remplir votre méthode d action changetext:. Mais vous devez tout d abord définir une variable qui comptera le nombre de fois que vous aurez appuyé sur le bouton. Ajoutez la ligne de code suivante au fichier ProjetTestViewController.h (nonatomic, assign) NSInteger number; Puis, dans votre fichier ProjetTestViewController.m, textlabel; ajoutez number; Ensuite, ajoutez number=0; dans la méthode viewdidload pour que celle-ci ressemble à : - (void)viewdidload { [super viewdidload]; // Procède à plus de configuration après avoir chargé cette vue, en règle générale depuis un «nib». } number = 0; Grâce aux étapes précédentes, vous avez initialisé la variable numéraire à 0. 10b.9 Faire marcher les objets Ensemble Remplir votre Méthode Après avoir initialisé cette variable numéraire, le nombre de fois sera comptabilisé chaque fois que vous appuierez sur le bouton. Vous devriez ajouter du code à la méthode changetext pour qu elle ressemble à ceci : Vous pouvez désormais tester le projet dans le Simulateur pour voir le résultat de ce que vous venez d effectuer. Avant d appuyer sur le bouton, vous devriez voir les mots «Vous n avez pas appuyé sur le bouton». Puis, après avoir appuyé pour la première fois dessus, le Label devrait afficher «Vous avez appuyé à 1 reprise sur le bouton». En continuant d appuyer dessus, vous devez normalement voir «Vous avez appuyé à X reprises sur le bouton», X étant le nombre de fois que vous avez appuyé sur le bouton. 10b.10 Lancer l Appli sur un Appareil Matériel Si vous voulez lancer votre appli sur un appareil matériel, vous devez vous inscrire au ios Developer Program (Programme de Développeur ios). Inscrivez-vous ici : programs/ios/. Puis il vous faudra travailler via le Development Provisioning Assistant (Assistant Provisioning de Développement) sur le site d Apple. Vous aurez à obtenir un Certificat de Développeur d Apple puis à créer un Provisioning Profile (Profil Excel With Business

5 de Provisioning). Ensuite, vous pourrez sélectionner votre appareil de développement depuis Xcode afin de tester sur votre appareil plutôt que sur le Simulateur ios. 10b.11 Conclusion Félicitations! Vous avez complété toutes les étapes nécessaires à la création d une appli ios basique. Vous avez commencé par installer Xcode, puis vous avez créé une appli basique, l avez testée dans le Simulateur ios et avez appris comment ajouter des fonctions simples à votre appli. J espère que vous avez apprécié toutes ces démarches. Il existe tout un tas de fantastiques aides plus approfondies sur le site d Apple : ios. Visitez ce site et vous trouverez une multitude de guides pratiques géniaux pour vous aider à atteindre vos objectifs en Programmation ios. Même si vous avez trouvé cette expérience légèrement déconcertante, vous pouvez désormais plus facilement gérer le programmeur que vous engagerez peut-être pour votre projet. Les rudiments de Xcode sont inestimables afin de communiquer avec des programmeurs professionnels pendant les étapes de conception et de mise en service Excel With Business