Mon parcours de réapprentissage iOS Partie 1

L'idée de ce blog est de partager avec vous ce que j'ai appris avec autant de détails que possible et de consolider/répondre à toutes les questions que j'ai eues lorsque j'apprenais à partir des didacticiels "zéro à héros".

Dans cet article, je vais commencer par quelque chose d'EXTRÊMEMENT simple qui prend peut-être 5 minutes ou moins à un développeur chevronné pour créer. Mais bon, on part tous de quelque part alors pourquoi pas ici

Voici un aperçu de ce que nous allons faire ici :

Comme pour toute tradition de langage de programmation, nous créerons une application "hello world" qui, lorsqu'un utilisateur appuie sur le bouton, le texte ci-dessus affichera le texte "hello world" dans différentes langues au hasard.

Le but de cette application est de comprendre les bases de :

1. UILable, UIButton et UIImageView d'UIKit.
2. Déclarations Swift Variable et Array.
3. IBOutlets et IBActions.

Alors, commençons!

Tout d'abord, ouvrez votre Xcode et créez une nouvelle application comme ceci :

Voici la partie clé : sélectionnez iOS tap au lieu de Multiplatform tap ou bien vous ne pouvez pas choisir Storyboard plus tard et devez travailler avec SwiftUI.

Maintenant, sous Nom du produit, tapez "Hello World App" ou tout autre nom fantaisiste que vous voudrez peut-être l'appeler. C'est vraiment à votre créativité !

Maintenant, qu'est-ce qu'un identifiant d'organisation ?

un identifiant d'organisation est un nom unique pour votre application permettant aux autres de trouver votre application sur l'App Store. Je vous recommande de taper votre nom de famille puis votre prénom ici pour simplifier les choses pour ce projet.

Ainsi, votre Bundle Identifier (directement sous Organization Identifier) ​​ressemblera à :

doejohn.Hello-World-App

Certaines anciennes versions de Xcode peuvent afficher com.doejohn.Hello-World-App. C'est ce qu'on appelle un nom de domaine inversé juste pour votre information.

Maintenant, cliquez sur Suivant et enregistrez votre projet à l'endroit de votre choix, puis cliquez sur Créer et nous passons à la partie amusante !

Une fois terminé, votre Xcode devrait ressembler à ceci :

Passons donc brièvement en revue ce que nous voyons ici :

• La section orange est votre côté Navigateur où il affiche actuellement votre Navigateur de projet. Ici, vous voyez que vous avez votre projet Hello World en haut avec trois dossiers : Hello World , Hello WorldTest s et Hello WorldUITests . Le dossier Hello World est l'endroit où nous ferons tout notre codage et notre édition. Hello WorldTest s et Hello WorldUITests sont automatiquement créés pour nous lorsque nous avons laissé la case à cocher Inclure les tests lorsque nous avons créé notre projet lors de la phase de création du nom. Je passerai en revue les deux dossiers dans un autre article, alors restez à l'écoute !
• La section verte est la partie sur les informations générales et l'édition de notre application. Sous le robinet général ici, nous pouvons voir que nous avons le nom d' affichage (le nom de notre application), l'identifiant de bundle (ce dont nous avons discuté plus tôt à propos du nom de domaine inversé), la version (comme les jeux, nous avons la version 1.0, 1.1, 2.x… etc )
• J'aimerais passer un peu plus de temps à discuter ici de la section violette d' informations sur le développement . Allons de haut en bas ici.
• Tout en haut, nous avons iOS 15.2 avec iPhone et iPad cochés mais le Mac Catalyst. En effet, lorsque nous avons créé notre projet, nous avons sélectionné « iOS » et non « multiplateforme », indiquant ainsi « nous voulons que notre application ne soit exécutée que sur des appareils iOS ». La partie iOS 15.2 indique "La version minimale d'iOS sur laquelle exécuter notre application". Vous pouvez cliquer dessus et sélectionner une autre version d'iOS que vous souhaitez que vos utilisateurs utilisent au moins. Veillez à vérifier si les fonctionnalités que vous souhaitez exécuter sont prises en charge dans la version minimale sur laquelle vous souhaitez que vos utilisateurs s'exécutent. Pour cette application, tout devrait bien se passer. L' orientation de l'appareil indique que votre application ne s'exécute que sur Portrait, Upside Down, Landscape Left ou Landscape Right , comme vous pouvez l'imaginer, comme certains jeux ne permettraient aux joueurs de jouer que dans une certaine orientation. LaLa barre d'état est l'endroit où vous pouvez définir le style d'affichage de votre barre d'état. Vous pouvez jouer avec et voir à quoi vous aimez que votre application ressemble. Pour cette application, nous garderons tout dans les paramètres par défaut pour garder les choses simples.
• La section jaune est l'endroit où se trouvent vos inspecteurs. Ainsi, des éléments tels que le nom de votre application, le chemin d'accès complet à votre fichier, etc. peuvent tous être trouvés dans cette section. Cela deviendra plus pratique lorsque nous développerons notre application avec Storyboard.

Maintenant, je veux que vous cliquiez sur ce bouton que j'ai mis en surbrillance avec un carré jaune. Cela nous permettra d'avoir la section médiane de notre Xcode à diviser en deux côtés : l'un pour afficher le fichier principal, et l'autre pour afficher notre fichier ViewController.

Votre écran peut ressembler à ceci au début, mais vous pouvez simplement cliquer sur l'un des côtés que vous souhaitez modifier pour afficher ViewController et cliquer sur ViewController dans la section Navigator, puis cela changera.

Votre écran devrait ressembler à ceci lorsque vous avez terminé. Revenons maintenant brièvement sur ce que signifient les lignes de code que nous voyons dans ViewController :

Tout en haut, nous voyons la ligne import UIKit qui dit que "hé, nous voulons importer ce framework/bibliothèque à utiliser dans ce fichier ViewController !" Dans ce cas, nous voulons travailler avec UIKit, donc nous l'importons ici. Nous en importerons d'autres à l'avenir, comme Firebase de Google ou certaines bibliothèques d'animation d'interface utilisateur que vous souhaitez ajouter !

Ensuite, nous avons la classe ViewController : UIViewController{} cela indique que nous avons une classe appelée ViewController et qu'elle hérite de UIViewController. L'héritage dans la classe signifie que nous, la sous-classe (ViewController), voulons pouvoir utiliser toutes les méthodes, propriétés et autres caractéristiques de la super classe (UIViewController).

Dans notre classe ViewController, nous avons les éléments suivants :

C'est ce qu'on appelle une fonction. Cette fonction spécifique indique ce qui doit se passer lors du chargement initial de cette vue. Par exemple, si nous voulons qu'une variable Star soit toujours à 0 lorsque cette vue est chargée, nous aurons ici var star = 0 .

Maintenant, je veux que vous regardiez la section médiane de votre Xcode, tout en haut de la barre, il devrait y avoir un signe + comme ceci :

Cliquez dessus et nous devrions voir une liste d'objets que nous pouvons faire glisser et déposer dans notre storyboard principal.

Comme vous le voyez dans Xcode, nous avons tous ces objets prédéfinis prêts à être utilisés pour nous. Faisons donc glisser un objet Label et un objet Button dans notre Story Board principal.

Comme vous pouvez le voir lorsque nous déposons pour la première fois l'objet Label sur notre storyboard, nous pouvons le déposer où nous voulons, quelle que soit la taille que nous aimons. Élargissons donc notre étiquette aussi large que les premières lignes pointillées bleues sur les côtés gauche et droit. Ces lignes sont ce que Xcode nous dit la "zone de sécurité" pour que nos objets existent. Changeons également le texte de Label en Hello World en attendant en double-cliquant sur l'objet Label.

Maintenant, avant cela, je veux que nous regardions la section carrée jaune dans l'image ci-dessus. C'est ce qu'on appelle l' inspecteur d'attributs où nous pouvons changer des choses comme la couleur du texte, la police, la taille de la police, etc. pour notre objet sélectionné. Ici, nous allons changer la taille de la police à 50 et le texte de Label à Hello World comme nous le voyons ci-dessous.

Ensuite, nous ferons la même chose pour l'objet bouton. Je vais nous faire gagner du temps et je vous laisse le soin de le faire (certainement pas paresseux ici )

Comme résultat final, vous devriez avoir quelque chose qui ressemble à ceci. Maintenant, nous sommes (quelque peu) sûrs de dire que notre partie UI est terminée ! Donnez-vous une grosse tape dans le dos

Voici maintenant la grande question : comment notre application géniale sait-elle quoi faire lorsqu'un utilisateur appuie sur le bouton ? Ou que doit-il faire lorsque l'utilisateur appuie sur le bouton ? Ou que doit faire l'application lorsqu'elle détecte que nos utilisateurs traversent une crise existentielle comme l'écrivain ?

Eh bien, la dernière question dépasse probablement le cadre de ce tutoriel, mais bon, nous pouvons aborder les deux premières sans problème.

Xcode nous a rendu service et a rendu cela super simple : Contrôlez + cliquez sur l'Obecjt et faites-le glisser vers le fichier ViewController comme suit :

Faites très attention à ne PAS le faire glisser dans la méthode viewDidLoad().

Une boîte de dialogue apparaîtra comme ce que nous voyons dans la section carrée jaune, et Xcode vous demandera un nom pour cette étiquette, appelons-la helloWorldText . Cette convention de dénomination s'appelle Camel Casing.

Maintenant que nous avons notre Label connecté à notre code ! Nous pouvons lui dire par programmation de faire notre offre ! Muwahahaha !

Notez que vous pouvez voir le cercle rempli par la ligne de code IBOutlet ici. Cela signifie que cet objet est connecté à quelque chose dans le storyboard.

Maintenant, pour le bouton, nous ferons la même chose mais un peu différemment ; nous voulons que notre bouton soit une action, quelque chose avec lequel nous pouvons interagir et pas seulement pour l'affichage. Donc, nous allons faire comme suit

Assurez-vous que sous Connexion, Action est sélectionné. Nous pouvons le nommer HelloWorldAction ici. Dans la section Événement, nous définissons ce qui se passe lorsque l'utilisateur fait quelque chose ici. Ici, nous avons sélectionné Touch Up Inside, c'est-à-dire lorsque l'utilisateur appuie (touche et relâche) sur le bouton.

Nous pouvons maintenant dire ce que notre application doit faire lorsque l'utilisateur l'appuie par programmation ! Horra

Très bien, passons aux parties juteuses de notre application. Ajoutons deux lignes de code sous notre UILabel :

var helloTextNumber = 0

var helloTextArray = ["hello world", "Hej Verden!", "Hallo Wereld!", "Ciao mondo!", "Hei Verden!", "你好世界!"]

Discutons un peu de ce que sont ces deux variables.

helloTextArray est le tableau que nous voulons utiliser pour choisir notre "Hello World" dans les différentes langues ici. Ici, nous avons un tableau String de 6 chaînes (les chaînes ne sont qu'un type avec "" dedans). Comme beaucoup d'autres langages, le tableau commence par 0, pas 1 ! Soyez donc prudent lorsque vous parcourez Swift Arrays !

Ainsi, helloTextArray[0] sera "hello world", helloTextArray[3] est "Ciao mondo", et helloTextArray[5] est "你好世界 ! ”

Voici un lien vers la documentation Swift d'Apple sur Array. Vous pouvez lire plus en profondeur à ce sujet ici:

Comme nous l'avons vu ci-dessus, pour obtenir un élément de hellTextArray, nous devons lui dire quel numéro nous voulons (donc le premier nous disons helloTextArray[0], le deuxième helloTextArray[1], le troisième helloTextArray[2] … etc ) mais nous ne pouvons pas simplement taper manuellement chacun d'entre eux et nous ne devrions pas non plus nous attendre à ce que nos utilisateurs saisissent un nombre pour nous (attendons toujours le moins de l'utilisateur. Un principe que j'ai appris.) Alors, que faisons-nous ?

Voici bonjourTextNumber. helloTextNumber est la variable Integer (Int) que nous voulons utiliser comme espace réservé pour l'élément de notre tableau que nous voulons afficher. Nous aurons une méthode qui génère un nombre entier aléatoire entre 0 et 5 et utiliser helloTextNumber pour conserver ce nombre pour nous. Nous pouvons donc afficher un élément de notre helloTextArray au hasard. Si vous êtes un peu confus à propos de cette partie, ne vous inquiétez pas, cela s'éclaircira dans la partie suivante.

Voici le code que je veux que vous ajoutiez :

Passons en revue ce que fait notre bloc de code hellowWorldAction.

Ici, nous avons défini notre helloTextNumber sur Int.random(in:0…5). Ce que cette ligne de code signifie, c'est que nous voulons que notre helloTextNumber soit un entier généré aléatoirement de 0 à 5 inclus (c'est-à-dire incluant 5).

Voici quelque chose que je veux approfondir un peu aussi. Parlons de la ligne suivante

helloWorldText.text = helloTextArray[helloTextNumber]

Dans Swift, cette notation par points suit la règle de

Qui.Quoi = Valeur

qui se décompose en :

"Qui a besoin d'être changé"

"point"

"ce qu'il faut changer"

"équivaut à"

"ce qu'il devrait être changé."

Donc, avec notre code, nous disons que :

Nous voulons que le texte (quoi) de helloWorldText (who) soit remplacé par l'élément helloTextNumber de helloTextArray.

Ainsi, lorsque nous exécuterons cette ligne de code, nous modifierons helloWorldText pour afficher n'importe quel élément dans le helloWorldTextArray la méthode Int.random() de nombre généré aléatoirement générée pour notre helloWorldTextNumber.

Maintenant, lorsque nous exécutons notre simulateur ( commnad + r, ou le bouton ▶️ sur la barre supérieure de Xcode ), lorsque nous cliquons sur notre bouton, notre texte devrait changer chaque fois que nous tabulons sur le bouton !

Horaire ! Nous avons terminé la partie codage de notre application !

Une dernière chose. Notre arrière-plan est en fait un peu moche Nous aimerions ajouter une sorte d'image d'arrière-plan afin qu'elle ne soit pas aussi simple. Alors, allez chercher une image que vous aimez vraiment ajouter comme arrière-plan pour votre application. Pour moi, j'utiliserai l'image de la terre (puisque c'est bonjour le monde, n'est-ce pas ?).

Maintenant, cliquons sur "Assests" sous le dossier Hello World, et vous devriez voir quelque chose comme ci-dessous. Faites glisser l'image que vous avez choisie et déposez-la dans la colonne avec "AccentColor" et "Appicon". C'est là que notre image résidera et sera appelée à être utilisée.

Revenons maintenant à 'Principal' et déposons un objet Image de la bibliothèque d'objets (si vous avez oublié comment faire cela, faites défiler vers le haut pour voir où nous avons parlé des objets Label et Button). Je veux que vous développiez l'objet Image si grand qu'il couvre tout l'écran de votre téléphone. Maintenant, je veux que vous cliquiez sur cet objet Image et que vous accédiez aux Inspecteurs (le panneau de droite), et que vous recherchiez ceci :

Sous la vue Image, je veux que vous cliquiez sur le menu déroulant Image et sélectionnez l'image d'arrière-plan que vous avez précédemment déposée dans Assets. C'est ici que nous pouvons définir quel objet image doit être affiché sans avoir à coder quoi que ce soit dedans. Soigné! Moins il y a de codage, mieux c'est !

Maintenant, votre écran pourrait ressembler à ceci :

Attendez une minute… que se passe-t-il ici ? Qu'est-il arrivé à notre étiquette et à notre bouton pour lesquels nous avons travaillé si dur ?

Ce qui s'est passé ici est simplement un problème de couche. Imaginez que nous ayons une assiette, une pomme et une orange. Ce que nous avons fait, c'est que nous avons d'abord affiché la pomme et l'orange, puis nous avons mis la plaque au-dessus des deux, donc nous ne voyons que la fin (l'image de fond), et non notre pomme (étiquette) ni orange (bouton). Ce que nous voulons, c'est mettre notre assiette en premier, puis notre pomme et notre orange par dessus.

Alors, comment faisons-nous cela? Devons-nous simplement supprimer tout notre projet et tout refaire ?

Eh bien, si vous voulez le faire pour consolider ce que vous avez appris ici, vous êtes plus que bienvenu ! MAIS Apple nous a donné un moyen beaucoup plus simple de le faire.

Sur le côté gauche de la capture d'écran précédente, nous voyons "Afficher la scène du contrôleur". En dessous, nous avons 'View Controller' et en dessous, nous avons notre 'View'. Il s'agit de la superposition de notre vue actuelle avec nos objets (étiquette, bouton et image) ainsi que la "zone de sécurité" par défaut, les lignes pointillées bleues que nous voyons lorsque nous faisons glisser nos objets.

Maintenant, faites simplement glisser l'objet image du bas vers la droite sous la "zone de sécurité" comme suit :

Et voila ! Nous voyons notre étiquette et notre bouton ! Et lorsque nous exécutons cette application dans notre simulateur, nous devrions voir tout fonctionner comme prévu !

J'espère que cela vous a aidé à bien démarrer votre parcours d'apprentissage iOS. S'il vous plaît laissez un commentaire et applaudissez si vous avez trouvé cela utile

Mais je continuerai à écrire plus de tutoriels à l'avenir quoi qu'il arrive tant pis si vous ne m'aimez pas

Paix ✌