• 15 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

J'ai tout compris !

Créez votre projet

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

Nous y voilà ! Vous allez enfin créer votre première application ! Paré au décollage !

Vous êtes prêt ?

Présentation du projet

L'application

L'application que nous allons créer se nomme Teki ! Teki est une application qui permet de générer des phrases comme :

  • Tu es le Steve Jobs des cadeaux d'anniversaire.

  • Tu es le Michael Jackson du barbecue.

  • Tu es la Reine Victoria des claquettes.

  • ...

Vous l'avez compris, avec Teki, vous allez passer de folles soirées entre amis ! Sans plus de suspens, voici à quoi va ressembler notre application :

Teki
Teki

En cliquant sur "Et MOI ?", l'appli génère une nouvelle phrase.

La méthode

Ce cours est un pari. Celui de vous permettre de créer votre toute première application très rapidement à partir de zéro tout en comprenant précisément ce que vous faites. Sinon c'est juste suivre une recette de cuisine...

Pour y arriver, il nous faut deux choses :

  • Un sous-marin

  • Vos doigts

Bon, ça y est, l'auteur a craqué. Il se met à dire n'importe quoi... o_O

Non ! Je m'explique !

Vos doigts

Pour que vous me suiviez, je vous encourage vivement à faire les choses avec moi sur votre ordinateur. Vous allez presque perdre votre temps si vous lisez simplement sans créer vous-même l'application.

Voilà pourquoi on a besoin de vos doigts sur le clavier !

Le sous-marin

Concernant le sous-marin...

Le centre de commande d'un sous marin
Le centre de commande d'un sous-marin

C'est bien évidemment une image. Ci-dessus, vous avez la salle de contrôle d'un sous-marin. Si je devais vous enseigner comment faire fonctionner ce sous-marin en quelques heures, je vous demanderais d'accepter de ne pas savoir à quoi correspond chaque bouton, chaque écran et chaque manivelle !

C'est la même chose pour le développement iOS. Vous n'allez évidemment pas maîtriser l'intégralité d'iOS, de Xcode ou de Swift en quelques heures. Aussi on mettra de côté certains points, pour être certains que vous compreniez parfaitement ceux que nous allons voir ensemble et qui vont nous permettre de faire notre application.

Allez c'est parti !

Création du projet

Comme à chaque fois que vous allez travailler sur une application iPhone, commencez par ouvrir Xcode (il se trouve dans votre dossier Applications).

1. Ouverture de Xcode

À l'ouverture, Xcode vous propose trois options :

Ouverture de Xcode
Ouverture de Xcode

Choisissez la deuxième option : créer un nouveau projet Xcode.

2. Choix du template

Xcode vous propose ensuite plusieurs templates de base pour votre projet :

Choisissons notre template
Choisissons notre template

Par défaut Xcode propose les templates pour iOS, mais vous pouvez consulter ceux de watchOS, tvOS ou macOS par curiosité. Parmi ceux proposés pour iOS :

  1. Single View Application : Comme son nom l'indique elle ne contient qu'une seule vue. Donc rien n'est prémâché ! C'est pourquoi nous utiliserons systématiquement ce template. 

  2. Game : Pour pouvoir faire des petits jeux sur iOS.

  3. Augmented Reality App : Pour des applications qui utilisent la réalité augmentée.

  4. Document Based App :  Pour des applications qui utilisent un système de fichiers.

  5. Master Detail Application : Cela permet de faire des applications qui contiennent une liste et affiche le détail de l'élément sélectionné.

  6. Page Based Application : Une application organisée en page, comme la page d'accueil de votre iPhone où vous pouvez glisser à droite et à gauche pour afficher toutes vos applications.

  7. Tabbed Application : Une application disposant d'une barre de navigation en bas comme l'application Téléphone sur l'iPhone par exemple.

  8. Sticker Pack Application : Cela permet de créer un pack de stickers pour iMessage.

  9. iMessage Application : Cela permet de créer une application pour iMessage.

Une fois avoir sélectionné Single View Application, cliquez sur next !

3. Définition des paramètres

Impression d'écran de l'étape de définition des paramètres du projet.

Revoyons ensemble chaque champ de cette interface :

  1. Product Name : C'est le nom de notre application. Donc ici, écrivez Teki.

  2. Team : Cela permet d'indiquer à quelle équipe appartient cette application. Pour pouvoir sélectionner une équipe, il vous faut un compte développeur Apple. Donc laissez cela tel quel pour le moment, vous n'en aurez pas besoin.

  3. Organization Name : C'est le nom de votre organisation. Vous pouvez y mettre le nom de votre entreprise ou le vôtre. Cela permet à Xcode d'ajouter en haut de chaque fichier un Copyright avec le nom que vous aurez indiqué pour que personne ne vous vole votre code !

  4. Organization Identifier : Ceci est un identifiant unique qui permet de reconnaître votre organisation. La convention veut que l'on écrive cela comme un nom de domaine à l'envers. Donc pour Open Classrooms : com.openclassrooms. Vous pouvez adopter le format suivant : com.prenomnom si vous ne possédez pas de nom de domaine.

  5. Bundle Identifier C'est l'identifiant unique de votre application. C'est ce qui vous permettra ensuite de l'envoyer sur l'App Store. Il est généré automatiquement à partir des champs product name et organization name.

  6. Language : Vous avez le choix entre Swift et Objective-C. Choisissez Swift bien sûr !

4. Choisir l'emplacement de sauvegarde

Choix de l'emplacement de sauvegarde
Choix de l'emplacement de sauvegarde

Comme n'importe quel fichier que vous sauvegardez sur votre ordinateur (un fichier Word, une image, une application), votre Mac vous demande où sauvegarder le fichier. J'ai choisi le bureau, vous prenez ce qui vous arrange le plus et cliquez sur create.

Et voilà ! En quatre étapes, notre projet d'application est créé !

Présentation générale de Xcode

Une fois la création effectuée, vous atterrissez sur la page suivante :

Bienvenue sur l'interface d'XCode
Bienvenue sur l'interface de Xcode !

Opération sous-marin ! Nous n'allons pas rentrer dans le détail, mais je vais vous présenter la structure du logiciel. Xcode est divisée en 4 panneaux.

1.  Le navigateur (Navigator)

Le navigateur est le panneau situé à gauche. Comme son nom l'indique, il permet de naviguer dans notre projet. Le navigateur contient plusieurs onglets en haut.

Chacun représente une manière différente de naviguer dans l'application : par fichier, par bug, par test, par version, par la recherche de mots précis, etc.

2. Le panneau principal

C'est le grand panneau du milieu. Celui-ci affiche ce que vous avez sélectionné dans le navigateur. Pour l'instant, il nous montre les paramètres de notre projet, car c'est ce qui est sélectionné en bleu dans le navigateur. Cette vue en particulier nous permet de consulter notamment :

  • Le nom de l'application

  • La version de l'application (1.0 pour le moment)

  • Le bundle identifier que nous avons créé

  • Les appareils supportés (Universal)

  • Les orientations supportées (Portrait, Paysage droit, Paysage gauche)

3. Les utilitaires (Utilities)

C'est le panneau de droite. Il affiche les informations relatives à l'élément sélectionné, que ce soit un fichier comme ici, un mot dans le code, un bouton, une image ou un élément de l'interface. Vous verrez la façon dont il évolue dans le prochain chapitre.

Et voilà pour la présentation de Xcode !

Wowowo, tout doux, tu avais dit 4 panneaux !

Ah oui ! Bien vu ! Mais le dernier est caché ;) ! Pour le révéler, il faut utiliser un des boutons situés en haut à droite :

Ces trois boutons permettent de cacher / révéler les panneaux latéraux. Comme vous pouvez le constater, ils sont visibles donc en bleu. En cliquant sur celui du milieu, vous allez découvrir le dernier panneau...

4. La zone de débogage

La console !
La console !

Bon OK c'est un peu vide pour le moment... Ici, vous pourrez afficher toutes les informations dont vous aurez besoin pour vérifier que votre application fonctionne correctement. Nous verrons cela plus tard et vous comprendrez le vrai pouvoir de la zone de débogage !

En résumé

L'interface de Xcode est organisée comme suit :

Les 4 panneaux de Xcode
Les 4 panneaux de Xcode

C'est tout pour ce chapitre. Dans le prochain chapitre, vous allez lancer votre application pour la première fois !

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