Créer une application IOS avec Swift: 6 étapes

Créer une application IOS avec Swift: 6 étapes

Table des matières:

Anonim

Penses-y. Après avoir terminé ce tutoriel, vous pouvez dire à vos amis que vous avez créé une application. Juste dire.

Dans ce tutoriel, je vais vous guider dans le processus de construction d'une application iOS. En cours de route, je m'assurerai de vous enseigner la théorie et les méthodes qui sous-tendent certains des concepts impliqués dans le développement d'applications que nous effectuons, plutôt que de simplement vous dire de faire quelque chose et d'espérer que vous comprendrez. Commençons d'abord par un peu de contexte:

Swift est le dernier et meilleur langage de programmation d’Apple. En 1985, lorsque Steve Jobs a fondé NeXT computer après avoir été éliminé d'Apple (certains disent), il a commencé à développer des frameworks pour ses ordinateurs dans un langage appelé Objective-C. Objective-C a été créé au début des années 1980 par Brad Cox et Tom Love, mais a ensuite été concédé sous licence à NeXT. Ces frameworks ont finalement été transformés en un sous-ensemble d'Objective-C appelé Cocoa. Cocoa a longtemps été utilisé pour développer des applications Macintosh, mais lorsque Apple a ouvert iOS aux applications tierces non basées sur le Web avec iOS 2.0, les développeurs ont utilisé Objective-C et Cocoa Touch, une version tactile de Cocoa pour applications iOS.

Objective-C a été utilisé jusqu’à iOS 8. Avec la sortie d’iOS 8, Apple a également sorti son tout nouveau Swift, comme vous le savez probablement. Cependant, Objective-C peut toujours être utilisé pour développer des applications iOS pour le moment. En fait, j'utilise toujours principalement Objective-C, car de nombreuses bibliothèques y sont écrites et Objective-C est compatible avec les appareils plus anciens. Swift présente de nouvelles fonctionnalités très intéressantes, mais pour les besoins de ce tutoriel, nous allons prendre une très plongée peu profonde dedans. Commençons.

Provisions:

Étape 1: Télécharger le Xcode

Xcode est le nom de l'environnement de développement intégré (IDE) d'Apple. Xcode peut être utilisé pour développer des applications iOS et Macintosh. Apple fournit ce logiciel gratuitement, mais un développeur doit débourser 100 USD par an pour tester ses applications sur des périphériques physiques, et non sur des simulateurs, et pour publier des applications sur l'App Store. En outre, Apple prélève environ 30% sur toutes les ventes d'applications payantes. Je recommande de lire un peu sur Xcode avant de le télécharger: Xcode Link

Le meilleur moyen d’obtenir Xcode est de le télécharger à partir du Mac App Store. Voici un lien. Malheureusement, Xcode est un programme plutôt volumineux, vous devez donc être prêt à attendre un peu! Vous pouvez lire le didacticiel pour vous assurer de tout comprendre pendant le téléchargement.

Étape 2: Commençons!

Cliquez sur l'icône Xcode. Vous serez présenté avec une fenêtre, comme indiqué dans la première image. Sélectionnez "Créer un nouveau projet Xcode"

Assurez-vous que Single View Application est sélectionné sous iOS et cliquez sur Suivant. (Image 2)

Pour le nom du produit, entrez "Swift iPhone App" (Image 3)

Pour le nom de l'organisation, écrivez simplement votre nom. Ne vous inquiétez pas pour l'identifiant du paquet. C'est pour soumettre ou distribuer votre application, ce qui ne nous inquiète pas. (Image 3)

Dans la liste déroulante des langues, sélectionnez "Swift". Comme vous pouvez le constater, Objective-C est toujours une option. (Image 3)

Dans la liste déroulante Appareils, sélectionnez iPhone. (Image 4)

Cliquez sur Suivant et choisissez un emplacement pour enregistrer le dossier du projet. (Image 5)

Après avoir fait tout cela, vous devriez voir l’écran montré à l’image 6.

Dans la barre d'outils supérieure à gauche, vous devriez voir les mots "Swift iPhone App". A côté de lui, il devrait y avoir un peu plus de texte qui dit simplement "Périphérique iOS" ou un périphérique réel comme iPhone 6, iPhone 5, etc. Cliquez sur ce menu déroulant et sélectionnez iPhone 6. La sélection "Périphérique iOS" ne fonctionnera pas pour vous. (c’est ainsi que vous téléchargez votre application sur un appareil réel à des fins de test), mais les simulateurs le feront.

Cliquez sur le bouton de lecture dans le coin supérieur gauche. Si tout se passe bien, le simulateur iOS devrait apparaître et afficher ………….. un écran vide. Avec la barre d'état. Genre d'anti-apogée. (Image 7) Mais ne vous inquiétez pas, nous y arriverons. Félicitations! Vous avez créé votre première application iOS!

Étape 3: Travailler sur l'interface utilisateur.

Dans le volet de gauche, vous devriez voir une liste de fichiers. Sélectionnez celui qui dit Main.Storyboard. (Image 1)

Il y a très longtemps, créer la UI (User Interface) avec du code était la norme, mais maintenant, Apple a rendu très facile la conception et programmez votre application directement à partir de Xcode. Les fichiers de scénarimage constituent l'interface utilisateur de votre application. Vous ajoutez des éléments d'interface utilisateur dans des éléments appelés UIViews qui gèrent ces éléments d'interface utilisateur. Vous pouvez ensuite connecter des éléments d'interface utilisateur au code Swift réel pour les rendre interactifs. Bien que la plupart des développeurs d'applications s'inquiètent des fonctionnalités de l'application avant de concevoir une interface utilisateur fonctionnelle, nous allons procéder à l'inverse pour apprendre. Nous allons d'abord configurer l'interface utilisateur.

Dans le coin inférieur droit de l'écran, vous devriez voir une zone de texte. Au-dessus de cela, un groupe d’éléments de l’interface utilisateur appelés objets. Entrez la requête "label", et appuyez sur enter. Vous devriez voir l'objet UILabel apparaître. Les étiquettes UIL sont utilisées pour afficher du texte. (Image 2)

Faites glisser l'étiquette de la zone de recherche vers le coin supérieur gauche de la zone blanche affichée à l'écran. (Image 3)

Tirez sur la limite droite de l'étiquette à l'aide des petits points blancs entourant l'étiquette sur le côté droit de l'écran. (Image 4)

Maintenant, recherchez "Button" de la même façon que vous avez étiqueté. Faites glisser le premier résultat qui dit "Bouton" juste en dessous de l'étiquette. Pas besoin d'étendre les limites du bouton. (Images 5 + 6)

Enfin pour cette étape, regardez l'image 7. Voyez où se trouve la note et cliquez dessus. Si vous ne pouvez pas le voir, lisez ceci: Dans la barre d’outils supérieure, près du coin droit, vous devriez voir quelque chose qui ressemble à des lignes de texte sélectionnées. À côté, un bouton avec deux cercles qui se chevauchent. Cliquez sur les cercles qui se chevauchent.

Cela étant fait, une autre fenêtre côte à côte avec le scénario devrait apparaître. En cliquant sur ce bouton, vous avez fait apparaître l'éditeur adjoint. L’assistant éditeur est utilisé pour ouvrir deux fichiers à la fois, et cela s’avère utile, en particulier lorsque vous raccordez des éléments d’UI au code. Votre assistant éditeur aura un arrière-plan blanc, mais j’ai changé le mien en un jeu de couleurs plus froid juste pour le plaisir.

Le fichier ouvert dans l’éditeur d’assistant est appelé contrôleur de vue. Les contrôleurs de vue sont des fichiers qui, ainsi, contrôlent les vues de votre application. Chaque vue est une fenêtre séparée dans l'application. Par exemple, dans l'application Messages, l'écran initial de toutes vos discussions est une vue, puis lorsque vous cliquez sur un nom, vous passez à une autre vue où sont affichés tous les messages de cette personne.

Étape 4: Accrochez-vous!

Cliquez avec le bouton gauche de la souris et faites glisser ou cliquez avec le bouton droit de la souris et faites glisser sur l'étiquette jusqu'à l'emplacement indiqué dans l'image. 1. Assurez-vous que la ligne bleue se trouve au bon endroit avant de le laisser partir. Est ce Si oui, alors lâchez-vous.

Vous devriez maintenant être présenté avec une boîte de dialogue. Tapez "label" où il est dit nom et cliquez sur Connecter. (Image 2)

Ce que vous avez fait ici a été de créer un IBOutlet. Cela indique au compilateur que vous voulez pouvoir accéder à cet élément d'interface utilisateur et que vous le référencerez comme "label". Vous utilisez ensuite le terme "label" pour vous y référer ultérieurement lors de l'écriture du programme.

Faites la même routine de clic et de glisser avec le bouton, sauf que cette fois, notez la position différente pour le faire glisser, comme indiqué dans l'image 3. La position ne s'affiche pas. vraiment l’important, mais c’est plus joli si vous le faites de cette façon. Laissez aller et une autre boîte de dialogue devrait apparaître.

Avant d'ajouter un nom, dans le menu déroulant Connexion, sélectionnez l'action. Alors que les points de vente vous permettent d'accéder à l'élément d'interface utilisateur (modification de la couleur du texte, du texte, de l'arrière-plan, etc.), les actions permettent d'interfacer des éléments interactifs tels que des boutons dans le code. Ils fournissent essentiellement un pont interactif de l'interface utilisateur au programme. Dans les actions, vous pouvez indiquer au compilateur que vous voulez réellement faire quelque chose. Par exemple, lorsqu'un bouton est tapé, vous pouvez indiquer au compilateur de changer la couleur de fond en bleu, mais lorsqu'un autre bouton est tapé, changez-le en rouge. Pour le nom, entrez buttonPress, puis cliquez sur Connecter. (Images 4 + 5)

Remarquez comment j'ai mis la première lettre en majuscule dans la chaîne buttonPress, et le deuxième mot est en majuscule. Ceci s'appelle l'affaire de chameau.La casse de chameau est utilisée car l'espace blanc (le caractère d'espace) n'est pas autorisé dans de nombreux aspects de la programmation. L'affaire Camel est un moyen de différencier facilement plusieurs mots lorsque vous ne pouvez pas utiliser d'espaces. La première lettre n'est toujours pas en majuscule et les mots suivants sont en majuscule. Par exemple, thisIsCamelCase. Ne confondez pas cela avec les cours. Des classes toujours mettre en majuscule la première lettre et les lettres suivantes. Par exemple, ViewController est un nom de classe, comme UILabel et IBOutlet.

D'accord. Continuons à marcher. En cliquant sur connecter devrait insérer le code suivant dans votre programme:

@IBAction func buttonPress (expéditeur: AnyObject) {

}

Étape 5: Commencez à coder!

À l'intérieur de ces accolades, vous placerez votre code. Chaque fois que le bouton est cliqué, le code à l'intérieur de ces accolades est exécuté.

Appuyez plusieurs fois après la première accolade dans IBAction sur la touche Retour pour vous laisser de la place. Ensuite, tapez ou copiez et collez le code suivant:

self.label.text = "Swift is Awesome!"

Si vous l'avez tapé, vous avez peut-être remarqué au fil de votre progression qu'une fenêtre apparaissant sous le texte proposait quelques suggestions. Cela s'appelle la saisie semi-automatique et permet de gagner du temps en bateau lors de la programmation. Appuyez sur la case située dans le coin supérieur gauche, à côté du bouton de lecture, pour arrêter la version actuelle de l'application (vierge) que nous avions en cours d'exécution. Ensuite, appuyez sur play pour reconstruire et exécuter votre nouvelle application. Une fois que le simulateur iOS apparaît et se charge, essayez d'appuyer sur le bouton. Le texte devrait passer d'un ancien "label" ennuyeux à "Swift is Awesome!". Voilà! Examinons maintenant ce que le code est en train de faire.

Les objets appelés objets constituent la base de la plupart des langages de programmation. Ainsi, ces langages sont qualifiés de langages de programmation orientés objet. C #, C ++. Swift, Objective-C et Python sont tous des langages orientés objet parmi des centaines d’autres. Les objets ont des choses appelées propriétés. Une propriété est essentiellement une variable qui stocke un peu d'informations. Par exemple, la propriété text de votre étiquette stocke du texte. L'objet label a beaucoup d'autres propriétés, comme backgroundColor et frame. Vous pouvez en visualiser certaines en tapant self.label. puis utilisez les touches fléchées pour parcourir la liste de saisie semi-automatique. On accède aux propriétés en utilisant la notation par points. L'objet self contient l'étiquette de la propriété, qui contient de nombreuses autres sous-propriétés, qui ont à leur tour des sous-sous-propriétés, etc. Par exemple, la propriété frame de l'objet label contrôle la taille de l'étiquette. Vous pouvez obtenir ou définir la hauteur de l'étiquette en tapant self.label.frame.size.height. Évidemment c'est tellement tellement tellement tellement beaucoup plus complexe que cela, mais c'est un résumé de base.

Lorsque vous tapez: self.label.text = "Swift is Awesome!" vous mettez à jour la propriété text en chaîne. La séquence "" est un raccourci pour créer un objet chaîne, que vous définissez ensuite comme propriété du texte de votre étiquette. Vous pouvez mettre le texte que vous voulez entre les guillemets.

Une autre chose importante dans le fichier du contrôleur de vue est la suivante:

remplacer func viewDidLoad () {

super.viewDidLoad ()

// Effectue toute configuration supplémentaire après le chargement de la vue, généralement à partir d'un nib.

}

À l'intérieur de ces accolades, vous pouvez ajouter du code qui s'exécute dès le chargement de la vue, d'où viewDidLoad. Eh bien, je pense que ça suffit pour le moment.

Étape 6: Vous l'avez fait!

Voilà. Votre toute première application iOS. Maintenant, allez-y et vantez-vous!

À partir de là, je vous encourage fortement à jouer dans Xcode et à vous faire une idée de l'endroit. Essayez de mettre à jour le texte de l'étiquette dans viewDidLoad et voyez ce qui se passe. Voyez si vous pouvez comprendre comment modifier par programme la couleur du texte.

Merci d'avoir lu! J'espère vraiment que vous avez apprécié cet instructable et appris quelque chose dans le processus. S'il vous plaît s'il vous plaît s'il vous plaît et commenter pour montrer votre soutien. Si vous avez des questions, postez-les dans les commentaires et je ferai de mon mieux pour y répondre. Pour consulter certains des projets sur lesquels j'ai travaillé, vous pouvez visiter Mon site Web. Oh, et d'ailleurs, je n'ai que 15 ans. Quelle est votre excuse?

Même si ce tutoriel était en Swift, je vous suggère fortement d'apprendre d'abord Objective-C si vous voulez vous lancer dans la programmation. En fait, vous devez connaître Objective-C si vous développez iOS. Swift est toujours un nouveau langage, donc la plupart des bons dépôts sur GitHub et d’autres endroits ne sont pas écrits en Swift. De plus, Swift ne cible que iOS 8, ce qui empêche une grande partie des appareils iOS de télécharger ou d'exécuter votre application. Bien que nous ayons effectivement programmé quelques éléments, nous n’avons même pas traité en détail le développement d’applications iOS. Bien que ce ne soit pas nécessairement cela compliqué il y a tellement de choses. Des tas de trucs.

Pour plus de choses, Youtube a des programmeurs incroyablement talentueux qui publient gratuitement d'excellents tutoriels. Il serait donc utile de regarder certains de ceux-ci. Le site www.raywenderlich.com est une autre ressource intéressante, qui propose également des didacticiels impressionnants à la fois pour les programmeurs débutants et avancés.