Premiers pas avec iOS

Création d’une application à vue unique par défaut

Pour développer une application pour iOS, vous devez commencer par une application appelée Xcode. Il existe d’autres outils alternatifs que vous pouvez utiliser, mais Xcode est l’outil officiel d’Apple. Notez cependant qu’il ne fonctionne que sur macOS. La dernière version officielle est Xcode 8.3.3 avec Xcode 9 (actuellement en version bêta) qui devrait sortir plus tard cette année.

  1. Démarrez votre Mac et installez Xcode depuis l’App Store s’il n’est pas déjà installé.

(Si vous préférez ne pas utiliser l’App Store ou si vous rencontrez des problèmes, vous pouvez également [télécharger Xcode depuis le site Web des développeurs Apple][1], mais assurez-vous de sélectionner la dernière version et pas une version bêta. )

[![Icône Xcode][2]][2]

  1. Ouvrez Xcode. La fenêtre suivante s’ouvrira :

[![Écran de lancement Xcode][3]][3]

La fenêtre vous présente les options suivantes :

  • Démarrer avec un terrain de jeu : Cela a été introduit avec le langage Swift et Xcode 6. Il s’agit d’une zone interactive qui peut être utilisée pour écrire de petits morceaux de code afin de vérifier les changements d’exécution. C’est un excellent moyen pour les apprenants de Swift de se familiariser avec les nouvelles fonctionnalités de Swift.
  • Créer un nouveau projet Xcode : Choisir cette option, qui crée un nouveau projet avec la configuration par défaut.
  • Extraire un projet existant : Ceci est utilisé pour extraire un projet à partir d’un emplacement de référentiel, par exemple, extraire un projet de SVN.
  1. Sélectionnez la deuxième option Créer un nouveau projet Xcode et Xcode vous demandera de faire une configuration initiale du projet :

[![Sélectionner un modèle][4]][4]

Cet assistant permet de sélectionner votre modèle de projet. Il y a 5 options :

  • iOS : utilisé pour créer des applications, des bibliothèques et des frameworks iOS
  • watchOS : utilisé pour créer des applications, des bibliothèques et des frameworks watchOS
  • tvOS : utilisé pour créer des applications, des bibliothèques et des frameworks tvOS
  • macOS : utilisé pour créer des applications macOS, des bibliothèques, des frameworks, des packages, des AppleScripts, etc.
  • Cross-plateforme : Utilisé pour créer des applications, des modèles et des contenus d’achat intégrés multiplateformes

Vous pouvez voir qu’il existe de nombreux modèles différents pour votre application. Ces modèles sont utiles pour booster votre développement ; ils sont pré-construits avec certaines configurations de projet de base comme les interfaces d’interface utilisateur et les fichiers de classe.

Ici, nous utiliserons la première option, iOS.

  1. Application maître-détail :

    This template contains a combined master and detail interface: the master contains objects which are related to the detail interface. Selecting objects in the master will change the details interface. You can see this kind UI in the Settings, Notes and Contacts applications on the iPad.

  2. Application basée sur la page :

    This template is used to create the page-based application. Pages are different views held by one container.

  3. Application à vue unique :

    This is a normal application development template. This is good for beginners to learn application flow.

  4. Application à onglets :

    This template creates tabs at the bottom part of an application. Each tab has a different UI and a different navigation flow. You can see this template used in apps like Clock, iTunes Store, iBooks and App Store.

  5. Jeu :

    This is a starting point for game development. You can go further with game technologies like SceneKit, SpriteKit, OpenGL ES and Metal.

  6. Dans cet exemple, nous commencerons par Application à vue unique

[![Créer un projet][5]][5]

L’assistant vous aide à définir les propriétés du projet :

  • Nom du produit : Le nom du projet / de l’application
  • Nom de l’organisation : Le nom de l’organisation dans laquelle vous êtes impliqué
  • Identifiant de l’organisation : L’identifiant unique de l’organisation qui est utilisé dans l’identifiant du groupe. Il est recommandé de suivre la notation inversée du service de nom de domaine.
  • Identifiant du groupe : Ce champ est très important. Il est basé sur le nom de votre projet et l’identifiant de votre organisation, choisissez judicieusement. L’identifiant du bundle sera utilisé à l’avenir pour installer l’application sur un appareil et télécharger l’application sur iTunes Connect (qui est l’endroit où nous téléchargeons les applications à publier sur l’App Store). C’est une clé unique pour identifier votre application.
  • Langage : Le langage de programmation que vous souhaitez utiliser. Ici, vous pouvez changer Objective-C en Swift s’il n’est pas sélectionné.
  • Appareils : Appareils pris en charge pour votre application qui peuvent être modifiés ultérieurement. Il montre iPhone, iPad et Universal. Les applications universelles prennent en charge les appareils iPhone et iPad, et il est recommandé de sélectionner cette option lorsqu’il n’est pas nécessaire d’exécuter l’application sur un seul type d’appareil.
  • Utiliser les données de base : Si vous souhaitez utiliser le modèle de données de base dans votre projet, marquez-le comme sélectionné et il créera un fichier pour le .xcdatamodel. Vous pouvez également ajouter ce fichier plus tard si vous ne le savez pas à l’avance.
  • ** Inclure les tests unitaires : ** Cela configure la cible de test unitaire et crée des classes pour les tests unitaires
  • Inclure le test de l’interface utilisateur : Cela configure la cible de test de l’interface utilisateur et crée des classes pour les tests de l’interface utilisateur

Cliquez sur Suivant et il vous demandera un emplacement où vous souhaitez créer un répertoire de projet. Cliquez sur Créer et vous verrez l’interface utilisateur Xcode avec une configuration de projet déjà définie. Vous pouvez voir certaines classes et fichiers Storyboard.

Il s’agit d’un modèle de base pour une application à vue unique.

En haut à gauche de la fenêtre, vérifiez qu’un simulateur est sélectionné (par exemple “iPhone 6” comme illustré ici) puis appuyez sur le bouton triangulaire RUN.

[![entrez la description de l’image ici][6]][6]

  1. Une nouvelle application s’ouvrira—Simulator (cela peut prendre un certain temps la première fois que vous l’exécutez et vous devrez peut-être essayer deux fois si vous voyez une erreur la première fois). Cette application nous fournit une simulation de dispositif pour les applications créées. Cela ressemble presque à un vrai appareil! Il contient certaines applications comme un véritable appareil. Vous pouvez simuler les orientations, l’emplacement, le geste de secousse, les avertissements de mémoire, la barre d’état en cours d’appel, le toucher du doigt, le verrouillage, le redémarrage, la maison, etc.

Vous verrez une application blanche car nous n’avons pas encore apporté de modifications au modèle.

Alors lancez le vôtre. c’est un long terme et il y a beaucoup de nouvelles opportunités qui vous attendent !

Si vous ne savez pas où aller ensuite, essayez le didacticiel “[Jump Right In][7]” d’Apple. Vous avez déjà effectué les premières étapes, vous avez donc une longueur d’avance.

[1] : https://developer.apple.com/download/ [2] : http://i.stack.imgur.com/CoZWHs.png [3] : https://i.stack.imgur.com/Hfw2a.png [4] : https://i.stack.imgur.com/7icDp.png [5] : https://i.stack.imgur.com/seeNa.png [6] : http://i.stack.imgur.com/8NN4Z.png [7] : https://developer.apple.com/library/content/referencelibrary/GettingStarted/DevelopiOSAppsSwift/

Bonjour le monde

Après avoir configuré Xcode, il n’est pas difficile de faire fonctionner votre premier iOS. Dans l’exemple suivant nous allons :

  • Démarrer un nouveau projet
  • Ajouter une étiquette
  • Impression d’un message sur la console.
  • Exécuter dans le simulateur

Démarrer un nouveau projet

Lorsque l’écran de bienvenue Xcode s’affiche, choisissez Créer un nouveau projet Xcode. Alternativement, vous pouvez faire Fichier > Nouveau > Projet… dans le menu Xcode si vous l’avez déjà ouvert.

[![entrez la description de l’image ici][1]][1]

Choisissez une application à vue unique et cliquez sur Suivant.

[![entrez la description de l’image ici][2]][2]

Écrivez “HelloWorld” pour le Nom du produit (ou tout ce que vous voulez vraiment) et sous Langue, assurez-vous que Swift est sélectionné.

  • Universel signifie que votre application fonctionnera à la fois sur l’iPhone et l’iPad.
  • Utiliser les données de base fait référence au stockage de données persistantes, qui n’est pas nécessaire dans notre application Hello World.
  • Nous ne ferons pas de Tests unitaires ni de Tests d’interface utilisateur dans cet exemple, mais cela ne fait pas de mal de prendre l’habitude de les ajouter.

[![entrez la description de l’image ici][3]][3]

Choisissez un dossier existant ou créez-en un nouveau dans lequel vous sauvegarderez vos projets Xcode. Ce sera la valeur par défaut à l’avenir. Nous en avons créé un ici appelé “Projets Xcode”. Cliquez ensuite sur Créer. Vous pouvez sélectionner Source Control si vous le souhaitez (utilisé lors de la synchronisation avec des sites tels que [GitHub][4]), mais nous n’en aurons pas besoin dans cet exemple.

[![entrez la description de l’image ici][5]][5]

Ajouter une étiquette

Il s’agit de la structure de fichiers d’un projet Xcode.

Sélectionnez Main.storyboard dans le Navigateur du projet.

[![entrez la description de l’image ici][6]][6]

Tapez “label” dans le champ de recherche de la bibliothèque d’objets en bas à droite de Xcode. Faites ensuite glisser le UILabel sur le contrôleur de vue du storyboard. Placez-le généralement dans la région du coin supérieur gauche.

[![entrez la description de l’image ici][7]][7]

Assurez-vous que l’étiquette est sélectionnée sur le storyboard, puis dans l’inspecteur d’attributs, remplacez le texte par “Hello, World !” Vous devrez ensuite redimensionner et repositionner l’étiquette sur le storyboard car la longueur du texte est maintenant plus longue.

[![entrez la description de l’image ici][8]][8]

Vous pouvez également double-cliquer sur l’étiquette du storyboard pour la modifier en “Hello, World!”. Dans tous les cas, le storyboard devrait ressembler à ceci :

[![entrez la description de l’image ici][9]][9]

Ajout de code

Sélectionnez ViewController.swift dans le navigateur du projet.

[![entrez la description de l’image ici][10]][10]

Ajoutez print("Création réussie de ma première application iOS.") à la méthode viewDidLoad(). Ça devrait ressembler a quelque chose comme ca.

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // print to the console when app is run
        print("Successfully created my first iOS application.")
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

Exécuter l’application dans le simulateur

[![entrez la description de l’image ici][11]][11]

Appuyez sur le bouton Exécuter pour créer et exécuter l’application. Dans cet exemple, le périphérique de simulation actuel (appelé “schéma”) est défini par défaut sur l’iPhone 6s Plus. Les nouvelles versions de Xcode utiliseront par défaut les nouveaux schémas. Vous pouvez également choisir d’autres schémas en cliquant sur le nom. Nous nous en tiendrons simplement à la valeur par défaut.

Le simulateur mettra un certain temps à démarrer lors de la première exécution. Une fois exécuté, cela devrait ressembler à ceci :

[![entrez la description de l’image ici][12]][12]

Dans le menu du simulateur, vous pouvez choisir Fenêtre > Échelle pour la réduire, ou appuyer sur ⌘cmd + 1/2/3/4/5 pour une échelle de 100 % / 75 % / 50 % / 33 % / 25 % respectivement..

La zone de débogage Xcode (en bas) devrait également afficher “Création réussie de ma première application iOS”. à la console. “J’ai créé avec succès ma première application iOS.” message est la chaîne que vous avez imprimée par programmation dans la partie Ajouter du code.

[![entrez la description de l’image ici][13]][13]

Continue

Vous devriez ensuite en savoir plus sur les contraintes de mise en page automatique. Ceux-ci vous aident à positionner vos commandes sur le storyboard afin qu’elles s’affichent bien sur n’importe quelle taille et orientation d’appareil.

[1] : http://i.stack.imgur.com/fD6Fm.png [2] : http://i.stack.imgur.com/Rcpwh.png [3] : http://i.stack.imgur.com/Sg1tA.png [4] : https://github.com/ [5] : http://i.stack.imgur.com/e3ZJ5.png [6] : http://i.stack.imgur.com/KMywp.png [7] : http://i.stack.imgur.com/s3zNZ.png [8] : http://i.stack.imgur.com/xJlrn.png [9] : http://i.stack.imgur.com/o4kpt.png [10] : http://i.stack.imgur.com/3fmcd.png [11] : http://i.stack.imgur.com/6LEIc.png [12] : http://i.stack.imgur.com/0bU2B.png [13] : http://i.stack.imgur.com/BfVZd.png

Interface Xcode

Dans le Xcode, vous disposez de trois zones de travail distinctes : les navigateurs (en rouge), la zone de débogage (en vert) et les utilitaires (en bleu). [![Fenêtres principales de Xcode][1]][1]

La fenêtre de l’espace de travail inclut toujours la zone de l’éditeur. Lorsque vous sélectionnez un fichier dans votre projet, son contenu apparaît dans la zone de l’éditeur, où Xcode ouvre le fichier dans un éditeur approprié. Par exemple, dans l’image ci-dessus, la zone de l’éditeur MainViewController.swift, un fichier de code Swift sélectionné dans la zone Navigateur à gauche de la fenêtre de l’espace de travail.

Zone de navigation

[![zone de navigation][2]][2]

La fenêtre du navigateur contient les huit options suivantes :

  • Navigateur de projet. Ajoutez, supprimez, groupez et gérez autrement des fichiers dans votre projet, ou choisissez un fichier pour afficher ou modifier son contenu dans la zone de l’éditeur.
  • Navigateur de symboles. Parcourez les symboles de votre projet sous forme de liste ou de hiérarchie. Les boutons situés à gauche de la barre de filtre vous permettent de limiter les symboles affichés à une combinaison de classes et de protocoles uniquement, de symboles uniquement dans votre projet ou de conteneurs uniquement.
  • ** Navigateur de recherche ** Utilisez les options de recherche et les filtres pour trouver rapidement n’importe quelle chaîne dans votre projet.
  • Navigateur de problèmes. Affichez les problèmes tels que les diagnostics, les avertissements et les erreurs détectés lors de l’ouverture, de l’analyse et de la création de votre projet.
  • Navigateur de test. Créez, gérez, exécutez et révisez des tests unitaires.
  • Navigateur de débogage. Examinez les threads en cours d’exécution et les informations de pile associées à un point ou à un moment spécifié pendant l’exécution du programme.
  • Navigateur de points d’arrêt. Ajustez les points d’arrêt en spécifiant des caractéristiques telles que les conditions de déclenchement.
  • Navigateur de rapports. Affichez l’historique de vos tâches de génération, d’exécution, de débogage, d’intégration continue et de contrôle de code source.

Les rédacteurs

La plupart des travaux de développement dans Xcode se produisent dans la zone de l’éditeur, la zone principale qui est toujours visible dans la fenêtre de l’espace de travail. Les éditeurs que vous utilisez le plus souvent sont :

  • Éditeur de source. Écrivez et modifiez le code source. [![éditeur de source][3]][3]
  • Interface Builder. Créez et modifiez graphiquement des fichiers d’interface utilisateur. [![constructeur d’interface][4]][4]
  • Éditeur de projet. Affichez et modifiez la façon dont vos applications doivent être créées, par exemple en spécifiant les options de génération, les architectures cibles et les droits d’application. [![éditeur de projet][5]][5]

Configurez la zone de l’éditeur pour une tâche donnée avec les boutons de configuration de l’éditeur sur le côté droit de la barre d’outils : [![entrez la description de l’image ici][6]][6]

  • Éditeur standard. Remplit la zone de l’éditeur avec le contenu du fichier sélectionné.
  • Éditeur adjoint. Présente un volet d’édition séparé avec un contenu logiquement lié au contenu du volet d’édition standard. Vous pouvez également modifier le contenu.
  • Éditeur de version. Affiche les différences entre le fichier sélectionné dans un volet et une autre version de ce même fichier dans un second volet. Cet éditeur ne fonctionne que lorsque votre projet est sous contrôle de code source.

Ressources et éléments dans la zone des utilitaires

La zone des utilitaires à l’extrême droite de la fenêtre de l’espace de travail vous donne un accès rapide à ces ressources : Inspecteurs, pour visualiser et modifier les caractéristiques du fichier ouvert dans un éditeur Bibliothèques de ressources prêtes à l’emploi à utiliser dans votre projet

Le panneau supérieur de la zone des utilitaires affiche les inspecteurs. Le volet inférieur vous donne accès aux bibliothèques.

[![Zone utilitaires][7]][7]


Le premier panneau (surligné en rouge) est la barre d’inspecteur, utilisez-la pour choisir l’inspecteur le mieux adapté à votre tâche actuelle. Deux inspecteurs sont toujours visibles dans la barre des inspecteurs (des inspecteurs supplémentaires sont disponibles dans certains éditeurs) :

  • Inspecteur de fichiers. Affichez et gérez les métadonnées du fichier sélectionné. En règle générale, vous localiserez des storyboards et d’autres fichiers multimédias et modifierez les paramètres des fichiers d’interface utilisateur.
  • Aide rapide. Affichez les détails d’un symbole, d’un élément d’interface ou d’un paramètre de construction dans le fichier. Par exemple, l’Aide rapide affiche une description concise d’une méthode, où et comment la méthode est déclarée, sa portée, les paramètres qu’elle prend et la disponibilité de sa plate-forme et de son architecture.

Utilisez la barre de bibliothèque (la seconde surlignée en rouge) pour accéder à des bibliothèques de ressources prêtes à l’emploi pour votre projet :

  • Modèles de fichiers. Modèles pour les types courants de fichiers et de constructions de code. - Extraits de code. De courts extraits de code source à utiliser dans votre logiciel, tels que des déclarations de classe, des flux de contrôle, des déclarations de bloc et des modèles pour les technologies Apple couramment utilisées.
  • Objects. Éléments pour l’interface utilisateur de votre application.
  • Media. Fichiers contenant des graphiques, des icônes, des fichiers audio, etc.

Pour utiliser une bibliothèque, faites-la glisser directement dans la zone appropriée. Par exemple, pour utiliser un extrait de code, faites-le glisser de la bibliothèque vers l’éditeur de source ; pour créer un fichier source à partir d’un modèle de fichier, faites glisser son modèle vers le navigateur de projet.

Pour limiter les éléments affichés dans une bibliothèque sélectionnée, saisissez le texte pertinent dans le champ de texte de la barre de filtre (le volet inférieur). Par exemple, tapez “bouton” dans le champ de texte pour afficher tous les boutons de la bibliothèque d’objets.

Gérer les tâches avec la barre d’outils de l’espace de travail

La barre d’outils en haut de la fenêtre de l’espace de travail permet d’accéder rapidement aux commandes fréquemment utilisées. Le bouton Exécuter crée et exécute vos produits. Le bouton Arrêter met fin à votre code en cours d’exécution. Le menu Schéma vous permet de configurer les produits que vous souhaitez créer et exécuter. La visionneuse d’activité montre la progression des tâches en cours d’exécution en affichant des messages d’état, la progression de la construction et d’autres informations sur votre projet.

Les boutons de configuration de l’éditeur (le premier groupe de trois boutons) vous permettent de configurer la zone de l’éditeur, et les boutons de configuration de l’espace de travail (le deuxième groupe de trois boutons) masquent ou affichent le navigateur, le débogage et zones utilitaires.

[![image][8]][8]

Le menu Affichage comprend des commandes permettant de masquer ou d’afficher la barre d’outils.

[![masquer][9]][9]

[1] : http://i.stack.imgur.com/n5wF9.png [2] : http://i.stack.imgur.com/15y9Z.png [3] : http://i.stack.imgur.com/vl3ZS.png [4] : http://i.stack.imgur.com/duLWU.png [5] : http://i.stack.imgur.com/d97a7.png [6] : http://i.stack.imgur.com/syjys.png [7] : http://i.stack.imgur.com/4Vz7e.png [8] : http://i.stack.imgur.com/fTNUD.png [9] : http://i.stack.imgur.com/qaVT1.png

Créez votre premier programme dans Swift 3

Ici, je présente comment créer le premier programme de base en langage Swift 3. Vous devez d’abord avoir des connaissances de base en langage de programmation ou ne pas avoir ensuite être prêt à l’apprendre dès le début.

Exigences pour les développements :

  1. MAC OS - Version 10.11.6 ou ultérieure pour le nouveau Xcode 8.2
  2. Xcode - Version 8.2 [Document Apple pour l’introduction de Xcode.] [1]

Xcode 8.2 a de nouvelles fonctionnalités de langage Swift 3 avec de nouvelles API compatibles iOS 10.

Créez votre premier programme

Allez d’abord dans Application et ouvrez votre Xcode 8.2.

[![Xocde ouvert][2]][2]

Après cela, vous verrez l’écran

[![Créer un nouveau projet][3]][3]

** Ensuite, choisissez Créer un nouveau projet et après cela, vous verrez l’écran suivant **

[![Choisissez le projet][4]][4] C’est également une partie très importante dans Xcode pour sélectionner notre type de projet. Nous devons choisir notre projet en fonction des types d’OS. Cinq types d’options sont disponibles sur la face supérieure :

  1. [iOS][5]

  2. [watchOS][6]

  3. [macOS][7]

  4. Multiplateforme

Maintenant, nous choisissons la plate-forme iOS pour le développement et la création d’un projet très basique avec l’option d’application à vue unique :

[![entrez la description de l’image ici][8]][8]

Ensuite, nous devons donner le nom du produit, cela représentera le nom de votre bundle et le nom de l’application.

Nom de l’application que vous pouvez modifier ultérieurement selon vos besoins. Ensuite, nous devons cliquer sur “Créer” et après cela, votre écran ressemblera à celui-ci ci-dessous :

[![Classe créée][9]][9]

À l’intérieur de cette classe, vous pouvez voir que le nom du fichier est ViewController.swift et à l’intérieur de la classe, le nom est également ViewController qui est hérité par la super classe UIViewController et enfin nous créons notre première variable dont le nom est ** myString ** du type ‘Chaîne de caractères’. Ajoutez ce qui suit sous ‘super.viewDidLoad()’

let myString = "Hello, World!"

Nous allons imprimer le contenu de cette variable. Tout d’abord, sélectionnez votre type de simulateur en haut à gauche de l’écran, puis cliquez sur le bouton “Exécuter”.

[![sortie][10]][10]

Après cela, votre sortie sera affichée sur le terminal qui se trouve en bas à droite. Félicitations, il s’agit de votre premier programme Hello World dans Xcode.

[1] : https://developer.apple.com/xcode/ [2] : https://i.stack.imgur.com/Ya5D2.png [3] : https://i.stack.imgur.com/qpxQs.png [4] : https://i.stack.imgur.com/GMpyE.png [5] : http://www.apple.com/in/ios/ios-10/ [6] : http://www.apple.com/watchos/ [7] : http://www.apple.com/in/macos/what-is/ [8] : https://i.stack.imgur.com/a9acX.png [9] : https://i.stack.imgur.com/KUZvM.png [10] : https://i.stack.imgur.com/0ZMqw.png