Développement d'applications mobiles avec Ionic et Angulaire - Idea to App Store

1. Pour commencer: Salut, c'est mon Callahan. J' utilise Ionic pour le développement d'applications mobiles depuis 2014 avant même officiellement publié. Depuis lors, Ionic a été mon passage à la technologie pour construire Mobile APS. Avec la sortie de la version quatre en 2019, Ionic a grandi au-delà de ses humbles origines en tant que cadre angulaire pour faire des APS mobiles. Aujourd'hui, Ionic travaille avec une variété de technologies Web. Il est devenu un citoyen de première classe pour construire toutes sortes d'applications Web. Dans ce cours, nous allons nous concentrer sur angulaire, allant de zéro code jusqu'à l'APP et jouer aux boutiques. Tout au long de ce cours, nous allons couvrir les aspects importants du développement avec ionique et angulaire. Cette leçon couvrira les bases absolues, mise en place de votre environnement de développement pour être aussi efficace que possible. Nous finirons par une simple application Hello Ionic. Nous allons sauter directement dans la structure de l'application, expliquant comment une application ionique est présentée. Nous allons présenter certains des composants simples vous I et créer un menu latéral de base pour l' application de démonstration. La leçon suivante porte sur le stockage des applications. Ionic fournit un mécanisme de stockage simple qui fonctionne sur tous les navigateurs Web et les appareils l' utiliseront pour maintenir les données d'application persistantes qui survivront au redémarrage de l'appareil Si vous n'avez pas besoin de capacités matérielles spécifiques autres que celles disponibles via le navigateur Web, vous pouvez choisir de libérer votre application est une application Web progressive ou P w. A. Alors que le Web est de plus en plus capable chaque jour, certaines fonctions nécessitent toujours l'accès à la sur lequel votre application est en cours d'exécution. Cette leçon sera une introduction à l'intégration de l'appareil avec Condensator dans la dernière leçon regroupera l'application qui sera publiée sur l'Apple App Store et le Google Play Store. Je vais faire quelques hypothèses sur certaines choses que vous devriez déjà connaître. Je m'attends à ce que vous sachiez écrire des programmes et au moins un seul langage de programmation. Vous devez comprendre au moins les bases de la mise en page Web avec HTML. Si vous savez ce qu'il a fait, est comment créer un bouton HTML. Tu devrais aller très bien. Nous ferons un usage intensif de javascript et dactylographié, et cela aidera si vous avez au moins des connaissances de niveau débutant. Vous allez également vouloir un éditeur de texte ou un environnement de développement intégré que j'utilise et recommande le code Visual Studio. B s code est un environnement de développement libre et open source et multi-plate-forme de Microsoft, conçu à partir du travail de base avec toutes les technologies seront en utilisant,Bien sûr, Bien sûr, vous êtes libre d'utiliser n'importe quel outil vous êtes à l'aise avec. Une autre chose que je devrais préciser que ce n'est pas un cours sur angulaire. Alors que je vais couvrir certaines des bases de l'angulaire en ce qui concerne Ionic, je n'irai pas plus loin que je dois pour faire fonctionner l'application de démonstration Next installera les outils nécessaires pour que vous puissiez compléter l'application de démonstration en fournissant des instructions de Mac OS en ce moment, je cours Catalina, mais le processus devrait être identique sur toute version récente de Mac OS Windows 10. Ces instructions devraient également fonctionner si vous êtes sur Windows Server ou même gagner à sept ou huit et enfin, Oman à Lennox. Mais vous devriez être en mesure de suivre avec n'importe quelle distribution de limites. Ne pensez pas que vous avez besoin de regarder les trois leçons. Choisissez celui qui est le plus proche de votre système et regardez celui-ci 2. Introduction à l'outillage - macOS: Ionic est pris en charge sur une variété de plates-formes de bureau. Dans cette leçon, je vais me concentrer sur Mac OS. Je vais vous montrer comment installer les outils que j'utilise et faire fonctionner les bases le plus rapidement possible . voulez vous assurer d'avoir tous les outils de ligne de commande et de construction installés avant d' écrire un code. C' est ce qui va s'occuper d'ici. Ionic fait un usage intensif de connaître J S, un environnement d'exécution basé sur un script Java dont vous aurez besoin get et ses outils de facturation associés sur un Mac . Vous l'avez probablement déjà, mais nous allons nous en assurer. Et bien sûr, vous aurez également besoin d'installer Ionic ces éléments assez simple. Vous devriez être en mesure de suivre directement sur un Mac. La plupart des outils dont vous avez besoin si vous ne les avez pas déjà, pourraient être installés là. Homebrew Homebrew se facture comme le gestionnaire de paquets Max Missing. Il y a beaucoup d'outils et de paquets d'exécution disponibles via homebrew, donc je recommande de l'installer. Si vous ne l'avez pas déjà, vous pouvez l'installer en copiant et en collant la commande affichée sur une page de tonalité dans n'importe quelle fenêtre de terminal. Une fois que nous avons le brassage maison, nous pouvons examiner l'installation de git, supposant que vous ne l'avez pas vraiment. Donc, d'abord, voyons si vous l'avez, ce que vous pouvez faire avec la commande git Dash version dash. S' il est installé, vous verrez un numéro de version probablement deux points quelque chose. Si vous avez une version qui dit Apple, obtenir cela signifie probablement que vous l'avez installé via les codes X. Outils de ligne de commande et cela devrait être OK. Si vous n'avez pas obtenu ou que vous souhaitez le mettre à niveau, vous pouvez l'installer via Homebrew. Il suffit d'émettre le breuvage installé. Obtenez le commandement. Cela vous donnera la dernière version appropriée pour votre système En ce qui concerne la note et gestionnaire de paquet de noeud ou NPM, ma recommandation est d'installer un outil appelé le gestionnaire de version de noeud ou envie. M. C'est un peu plus impliqué, mais beaucoup plus flexible à long terme. N V M est une élégance à une coquille. Fonctions de script pour permettre l'utilisation la plus flexible de la note. Vous pouvez imaginer que son objectif principal est de vous permettre d'installer et de basculer entre plusieurs versions de note sur NPM instantanément. Donc, si vous avez un projet qui ne nécessite pas de date mais un autre qui nécessite le numéro 12 par exemple, il est facile de les garder tous les deux installés, mais toujours indépendants l'un de l'autre. Les fonctionnalités les plus importantes de la note tournent autour de l'accès d'un itinéraire ou d'un administrateur ou d'un super utilisateur. Une fois que vous vous engagez à envier M, il n'y a aucune raison d'utiliser Sudo. En fait, vous n'avez même pas besoin d'accès root pour installer dans V M. C'est la méthode recommandée pour Mac OS car il ne nécessite aucune commande, pas déjà sur un système Mac d'origine. Une fois dans la pierre, enviez-les. Vous pouvez l'utiliser pour installer n'importe quelle version de Non voulez-vous, dans ce cas va installer la dernière version stable. Il suffit d'exécuter la commande affichée ici pour télécharger et installer la dernière version de support à long terme , ou LTs version de note. Parce que j'utilise le shell Z sur Catalina, je dois mettre ceci entre guillemets. Sinon, il pense que c'est un nom de fichier. Il existe d'autres commandes envy M à votre disposition, vous permettant d'installer et d'utiliser différentes versions de note. Les plus courantes sont montrées ici, et je les décrit plus en détail sur la page de cours juste en dessous de cette vidéo. C' est tout ce qu'il y a. À ce stade, tous ces outils sont installés et mis à votre disposition. Ensuite installera Ionic et créera notre toute première application. J' espère que tu es aussi excitée que moi. 3. Introduction à l'outillage - Windows: Ionic est pris en charge sur une variété de plates-formes de bureau. Dans cette leçon, je vais me concentrer sur Windows. Je vais vous montrer comment installer les outils que j'utilise et faire fonctionner les bases le plus rapidement possible . voulez vous assurer d'avoir tous les outils de ligne de commande et de construction installés avant d' écrire un code. C' est ce qui va s'occuper d'ici. Ionic fait un usage intensif du nœud Js, un environnement d'exécution basé sur un script Java dont vous aurez besoin get et ses outils de facturation associés. Et bien sûr, vous aurez également besoin d'installer Ionic ces éléments assez simple. Vous devriez être en mesure de suivre directement sur les fenêtres, si vous ne l'avez pas déjà fait. Remarque, je recommande de passer aux organisations de points node.js. Lorsque vous y arrivez, cliquez sur le grand bouton vert pour télécharger la dernière version LT ou la version de support à long terme pour moi en ce moment. Cette version est 12 environ 16.1, mais elle peut être différente de vous, ce qui est très bien. Une fois qu'il est téléchargé, vous devriez pouvoir l'installer, en acceptant toutes les valeurs par défaut. Suivant, c'est obtenir. Nous ne ferons pas beaucoup avec get au moins pas tout de suite, mais Ionic l'utilise donc vous devriez l'avoir en tête pour obtenir Dash SCM dot com. Recherchez le bouton de téléchargement et cliquez dessus. Une fois téléchargé, comme avec note, vous devriez être en mesure d'accepter les valeurs par défaut une fois que vous avez installé. Obtenez une note que vous avez un choix à faire. Pendant ce cours, nous utiliserons occasionnellement la ligne de commande. Installez une version du célèbre shell Lennix Bash appelé Git Bash. Vous pouvez également utiliser l'invite de commande Windows normale ou l'utilisation de Windows Power Show, selon laquelle vous vous sentez le plus à l'aise. Je promets que je vais essayer de ne pas utiliser de commandes uniques à l'une d'entre elles. À l'aide de votre commande préférée show, entrez la commande note avec le commutateur de version tiret et la commande gift. Aussi avec le commutateur de version de tableau de bord, vous devriez voir quelque chose de similaire à ce que je montre ici. Si ce n'est pas le cas, quelque chose s'est mal passé et vous devrez réessayer les installateurs. Et vraiment, c'est tout ce qu'il y a. À ce stade, vous devriez avoir tous ces outils installés et disponibles. Suivant va installer Ionic et créer notre toute première application 4. Introduction à l'outillage - Linux: Ionic est pris en charge sur une variété de plates-formes de bureau. Dans cette section, je vais me concentrer sur un chignon à limiter, mais vous devriez être capable de suivre avec n'importe quelle distribution Linux moderne. Nous allons vous montrer comment installer les outils que j'utilise et faire fonctionner les bases le plus rapidement possible . voulez vous assurer d'avoir tous les outils de ligne de commande et de construction installés avant d' écrire un code. C' est ce qui va s'occuper d'ici. Ionic fait un usage intensif du nœud Js, un environnement d'exécution basé sur un script Java dont vous aurez besoin get et ses outils de facturation associés. Et bien sûr, vous aurez également besoin d'installer Ionic ces éléments assez simple. Vous devriez être capable de suivre à droite le long des limites. Les utilisateurs ont tendance à être tout au sujet des choix, donc je vais fournir trois options différentes pour installer ces outils que vous pouvez choisir , et donc tout directement à partir des sites Web des fournisseurs, vous pouvez utiliser vos distributions gestionnaire de paquets pour no. Il y a une option 1/3 qui discutera du gestionnaire de version de note. La plupart sinon toutes ces options devraient fonctionner pour vous, quelle que soit la distribution Lennox que vous utilisez avant de décider quelle méthode vous convient . Voyons si vous avez déjà été installé ou non. Il est possible que vous ouvrez un terminal et entrez la commande Knowed dash version. Si vous l'avez déjà, votre système vous répondra avec un numéro de version. Si ce n'est pas comme c'est mon cas va l'installer dans un instant. Le tube de chignon fournit utilement la commande dont nous avons besoin pour l'installer. Voyons ce qui se passe quand on essaie ça avec. Entrez dans la commande, récupérez la version de tiret à nouveau. Je ne l'ai pas. Mais si vous le faites, vous verrez une version listée ici et encore. Vous voulez me dire utilement comment procéder à l'installation via le gestionnaire de paquets. Je vais vous montrer les deux autres façons, mais maintenant faisons la méthode du gestionnaire de paquets. Donc, tout ce que j'ai besoin de faire est d'entrer la commande qui m'a été fournie parce que j'utilise un pseudo . Je dois utiliser mon mot de passe, et c'est vraiment tout ce qu'il y a. Regardons cette commande. Oubliez encore. Maintenant que le processus est terminé, je devrais être capable de faire ces commandes à nouveau et vous verrez que je voulais dire la version huit du nœud . Ce n'est pas là que je veux être, donc il y a une meilleure façon de le faire. Vérifions la version get, obtenons des versions un peu anciennes aussi, mais ça ira très bien. La version de note me concerne, cependant, alors regardons les méthodes alternatives que les utilisateurs de Lennox peuvent installer directement à partir du site no Js. Si vous ne pouvez pas ou ne voulez pas utiliser votre gestionnaire de paquets distributions tête pour savoir que J. S ne fonctionne pas Lorsque vous y arrivez, cliquez sur le grand bouton vert pour télécharger la version de support LT ou à long terme pour moi en ce moment . Cette version est 12 environ 16.1, mais elle peut être différente pour vous, ce qui est très bien. Une fois téléchargé, vous devriez être en mesure de l'installer, acceptant les valeurs par défaut les mêmes informations s'appliquent à obtenir. Nous ne ferons pas beaucoup avec obtenir au moins pas tout de suite. Mais Ionic l'utilise, donc vous devriez l'avoir en tête pour obtenir Dash SCM dot com. Recherchez le bouton de téléchargement et cliquez dessus une fois téléchargé, tout comme avec la note, vous devriez être en mesure d'accepter les valeurs par défaut. Laissez-moi vous montrer une autre option pour une note. Ma recommandation est d'installer un outil appelé le gestionnaire de version de noeud ou envy em. C' est un peu plus impliqué, mais beaucoup plus flexible à long terme. N V M est un ensemble élégant de fonctions de script shell pour permettre l'utilisation la plus flexible de la note imaginable. Le but principal de N B. M est de vous permettre d'installer et de basculer entre plusieurs versions de note et NPM instantanément. Donc, si vous avez un projet qui ne nécessite pas de date, mais un autre qui nécessite Non. 12 il est facile de les garder tous les deux installés, mais toujours indépendants les uns des autres. Pour moi, les fonctionnalités les plus importantes de NPM tournent autour de l'accès root. De nombreuses instructions d'installation de paquetage NPM que vous trouverez sur le Web pour utiliser la pseudo commande pour installer des paquets globalement, car l'emplacement par défaut de ces paquetages globaux sont des répertoires protégés par le système. Bien que peu probable, il est possible que vous ayez ruiné l'accès sur votre machine Lennox, ce qui rend ces instructions sans valeur. Une fois que vous vous engagez à envier M, il n'y a aucune raison de le faire. En fait, vous n'avez même pas besoin d'accès root pour installer dans B M. Tout est installé sous son propre compte d'utilisateur, alors voyons comment cela fonctionne. C' est la méthode recommandée pour installer dans VM sur Lennox simplement entrer l'une de ces deux commandes selon que votre système a curl ou w get déjà installé. Je veux aller de l'avant et accélérer la commande w get dans mon terminal. J' ai déjà désinstallé l'autre version de nœud, donc je vais laisser envie m gérer tout à partir d'ici. Comme vous pouvez le voir, c'était très rapide. Il y a un avertissement qui me dit que je dois rouvrir mon terminal. C' est parce qu'il a ajouté des chemins et des fonctions à mon basho. Laisse-moi faire ça maintenant. Maintenant, je n'ai pas de note parce que j'ai seulement installé et VM Mais si je veux maintenant, je peux installer en utilisant envy m n'importe quelle version de savoir que je veux. Je vais installer la dernière version LTs, qui est encore 12 16.1. Et c'est tout ce qu'il y a à ça. Il y a d'autres commandes envie, um, disponibles pour vous permettant d'installer et d'utiliser différentes versions de note. Les plus courantes sont montrées ici, et je les décrit plus en détail dans la page de leçon de cours juste en dessous de cette vidéo, et c'est tout ce qu'il y a à cela. À ce stade, vous devriez avoir tous ces outils installés dans disponible Suivant up installera Ionic et créera notre toute première application 5. Votre première application Ionic: La dernière chose que nous devons faire est d'installer la dernière version de l'Ionic CLI, et nous le ferons avec NPM. Une fois que nous avons terminé sera en mesure d'utiliser cet Eli pour créer notre toute première application. Je vais exécuter ces commandes sur mon Mac, mais vous devriez pouvoir suivre tout système d'exploitation dont nous avons parlé jusqu'à présent . Une des choses que j'aime faire dans mon répertoire personnel est que j'ai un dossier appelé Get You Can Call It Anything You Want Projects Mes projets Ionic. Cela n'a pas vraiment d'importance, mais je vais aller dans mon dossier git maintenant et je vais exécuter NPM install dash G pour Global au plus tard ionic slash cli. Sans surprise, cela garantira que nous obtenons la dernière version absolue qu'il y a pour nous et il installé la version 6.3, et ce sera important dans un moment pendant le reste de ce cours, je vais coller à la ligne de commande. Mais Ionic dispose d'un outil graphique basé sur le Web pour construire des projets bioniques rapidement appelé l' assistant d'application Ionic. Donc je vais essayer ça maintenant et voir quel genre de projet nous donner. Donc, ici, il est au démarrage de la slash com point ionique. Donc ça va me demander un nom. Essayons. Bonjour, Ionic. Je suis partiellement Purple. Alors je vais choisir le violet. Je veux sélectionner angulaire et le menu latéral. Alors continuons. Donc, parce que j'avais déjà un compte, j'ai pu me connecter rapidement. J' ai fini cette partie pour toi. Alors maintenant ce qu'il fait, c'est qu'il nous donne une commande d'installation personnalisée pour les Ionics, Eli, et il nous avertit que nous devons avoir Ionics Eli 6.3 ou supérieur, C'est pourquoi j'ai dit que ce serait important plus tard. Donc, dans mon terminal, j'ai collé la commande que les pommes ioniques ou nous a donné. Alors maintenant, je vais le diriger et voir ce qu'il fait pour nous. Il veut savoir si je veux intégrer l'application avec condensateur. Je le fais. Mais je ne veux pas encore le faire, donc je vais prendre le défaut de non. Et maintenant, ça va lancer une installation NPM pour moi ne devrait pas prendre trop de temps, mais je vais éditer la partie la plus longue pour nous afin que vous n'ayez pas à rester à travers. Vous n'aimez pas la magie de l'édition à ce stade ? Souhaite savoir si je veux créer un compte Ionic gratuit. J' ai déjà un compte ionique, mais je ne vais pas être connecté à cette fois-ci. Donc je vais juste dire non. Donc, il a fait tout ce dont j'ai besoin assez simple, et la prochaine chose qu'il veut que je fasse est CD dans ce répertoire. Vous pourriez voir qu'il a déjà créé un dépôt git, et nous sommes à la branche Master. Eh bien, sans plus tarder, allumons et voyons à quoi ça ressemble. Nous le faisons avec un service ionique, et vous devriez en être conscient. La plupart des choses que Ionics Eli force c'est simplement le déléguer au Seelye angulaire dans les coulisses. Comme vous pouvez le voir ici, il est en cours d'exécution N G, application, service, et il ouvre automatiquement une fenêtre de navigateur en utilisant mon navigateur par défaut à l'hôte local Port 8100 . L' application de la force bâtie ressemble à une boîte e-mail. En fait, c'est ce qu'il dit. C' est une boîte de réception ouvrant les outils de développement chrome. Je peux vous montrer une chose cool sur le modèle de menu latéral par défaut d'Ionic. Il utilise en fait quelque chose appelé une vue split ionique, ce qui nous donne un menu latéral fixe sur des écrans plus larges. Mais à mesure que l'écran devient plus étroit, comme sur les appareils mobiles, il s'effondre à un menu hamburger standard. Plutôt cool, tu ne trouves pas ? Donc, cela va le faire pour cela. Nous venons de créer une application à partir de presque rien. Nous avons installé l'Ionic Seelye, et nous avons utilisé le tout nouvel assistant AF ionique pour intégrer cette application dans le segment suivant. On va jeter un oeil au code derrière ça et voir comment tout est assemblé. 6. Une introduction douce à Angular: comme je l'ai déjà dit. Ce n'est pas un cours sur angulaire, cependant. Il y a quelques modèles et idiomes de syntaxe que je veux introduire tôt. Avant d'entrer dans le code. J' aime les considérer comme des ISM angulaires. Oui, j'ai inventé ce mot. Il ya quelques concepts clés angulaire de l'orteil particulier, mais je veux vous montrer avant que nous devons les utiliser. Une des choses à propos de l'angulaire est qu'il encourage une séparation stricte des préoccupations. Votre style HTML, un code excusable sont séparés les uns des autres. Ces préoccupations peuvent communiquer entre elles, pour partager des données et des événements à travers des expressions de liaison et des directives angulaires, N g 4 et MGF, qui vous permettent de rendre plusieurs copies d'un élément ou de décider s'il faut le rendre à tous. Pour parcourir les exemples de cette section, vous pouvez ouvrir un navigateur pour empiler Blitz dot com slash fork slash oblique angulaire. Cela vous fournira un bac à sable immédiat, car vous pouvez suivre le long. Commençons par. Parler d'angulaire est le concept de séparation des préoccupations dans angulaire vous. La fonctionnalité I est encapsulée et les composants d'un composant peuvent représenter n'importe quoi à partir d'un morceau de texte, d'un bouton ah formulaire ou même d'une page entière. composants peuvent contenir d'autres composants, et ils peuvent communiquer entre eux via des interfaces très bien définies. Pour spécifier qu'une classe typescript est un composant, utilisez le décorateur de composant. C' est le mot composant. Avec ce signe, les décorateurs fournissent des informations supplémentaires en annotant ou en modifiant les classes ou les membres de la classe . Dans ce cas, le décorateur de composant spécifie des métadonnées supplémentaires orteil angulaire sur la façon dont la classe se comportera . Le sélecteur indique à angulaire d'exposer ce composant à l'aide de la balise HTML. Mon modèle APP u R l indique que le balisage HTML peut être trouvé dans le fichier spécifié. De même avec le style vos maux. Notez que cette valeur est un tableau, qui signifie que vous pouvez fournir plus d'un fichier CSS. La partie d'exécution à base de plantes du code composant se trouve dans la définition de classe. Celui-ci contient une seule ligne de code, qui signifie qu'il ne fait pas vraiment grand-chose. Mais c'est ce que nous entendons par séparation des préoccupations. Le code, le balisage dans les styles sont tous séparés les uns des autres. Jetons un oeil au balisage. Ceci se trouve dans le fichier de modèle. Ce fichier est pur html contenant le contenu visuel. La première ligne est une balise référençant un composant personnalisé nommé Hello. Vous pouvez voir dans la sortie qu'il affiche la valeur de la variable name du composant APP , qui est le mot angulaire. La puissance de l'utilisation des composants est que vous pouvez les réutiliser, extraire les éléments communs et les varier en fonction de ce qui change. Dans ce cas, le nom passé dans ces accolades est un exemple d'expression angulaire et de liaison au moment du rendu. La valeur à l'intérieur des accolades est récupérée à partir du nom de la variable à l'intérieur du verre composant et transmise au composant hello par son nom. Attributs. Utiliser le nom du mot pour la variable et les attributs est malheureux et peut entraîner un peu de confusion inutile. Je peux changer la variable de composant en quelque chose d'autre comme la personne nommée, et cela pourrait le rendre moins déroutant. Si je le change dans le balisage, je dois le changer dans le composant, revenir au code du composant et changer la variable de nom en nom de personne, puis changer sa valeur d'angulaire à autre chose et regarder le résultat. Angulaire surveille les modifications apportées à ces variables. Il rendra à nouveau le composant chaque fois que ces changements se produisent. Pour voir un exemple de composant re utiliser l'inaction simplement faire plusieurs copies de la technologie helo . Cependant, nous avons maintenant un problème. Nous n'avons qu'une variable appelée personne A. Nous pouvons code dur, les autres noms qui fonctionneront, mais ce n'est pas très utile. Et si on avait un tas de noms ? Changeons la personne nommée Variable sur le composant et en faisons un tableau appelé People ajoutera quelques personnes. La chose cool sur la raison, les composants de cette façon. Nous n'avons pas à changer ce composant bas du tout. Nous avons simplement besoin de changer la balise où nous l'utilisons pour inclure N G 4, une directive angulaire utilisée pour créer plusieurs instances du composant hello. fonction du nombre d'éléments dans le tableau de référence, vous utilisez un N G 4 en le fournissant comme attribut à l'élément que vous voulez répliquer. La valeur à l'intérieur du guillemet est l'expression de boucle. Il se compose du mot-clé, suivi du nom de la variable à utiliser à l'intérieur de l'élément et de l'un de ses enfants . Le mot-clé off et le nom du tableau sur la boucle d'orteil du composant sur l'astérisque, qui est requis, est une indication à angulaire que cette directive va manipuler le dom où les pages document modèle objet d'une manière ou d'une autre. Il existe une autre liaison dans la taxe qui fonctionne avec les attributs HTML. Si vous voulez définir la valeur d'un attribut sur une valeur sur votre composant au lieu des accolades actuellement, vous pouvez entourer le nom de l'attribut de crochets et fournir le nom de la variable guillemets. Ici, les premiers incidents de nom entre crochets font référence aux attributs HTML de la coutume . Bonjour composant. Le second, le mot personne entre guillemets est le nom de la variable dans l'énergie pour l'expression. Personnellement, je préfère cette méthode. Je trouve qu'il est un peu plus facile de lire le prochain type de maintenant. Vous voulez discuter de sa liaison événementielle ? Tout événement HTML peut devenir un déclencheur pour exécuter une fonction sur le composant. La façon la plus simple d'illustrer cela est de créer un bouton et de fournir un gestionnaire de clics. Ensuite, à l'intérieur des guillemets, appelez la fonction de composant que vous voulez exécuter. Dans ce cas, appelons bascule à l'intérieur du composant. Nous devons mettre en œuvre la fonction taco. Adam est basculé variable en haut du composant APP et définit sa valeur initiale sur false créer la fonction bascule, ce qui annulera simplement la valeur de ce qui est basculé se trouve être. Maintenant, lorsque vous cliquez sur le bouton bascule, la valeur de la variable est basculée entre true et false. Theis variable basculée est inutile pour nous jusqu'à ce que nous fassions quelque chose avec elle. Ajoutons une nouvelle balise de paragraphe à l'intérieur. Le fichier de modèle dans ce cas ajoutera une directive N G si et dit que la valeur à est basculée Engy. Si rendra conditionnellement la balise HTML. Si la valeur à l'intérieur des guillemets de violettes à une valeur de la vérité e comme nous bascule est activée et désactivée, la balise de paragraphe apparaîtra et disparaîtra. Enfin, ouvrons ce composant hello. C' est plutôt cool que nous n'ayons pas eu à faire ça jusqu'ici. C' est une excellente illustration d'une méthode alternative de création d'un composant. Le décorateur de composant définit toujours un sélecteur, qui est encore le nom de la technologie HTML. Mais au lieu de se référer au modèle et aux styles à l'intérieur des fichiers externes, ce composant les a divisés directement dans ce fichier lui-même avec les propriétés de modèle et de styles . Je ne recommande pas ce modèle sauf pour les composants les plus triviaux. Comme cela est remarqué, cependant, que même dans cet exemple, il ya encore une séparation générale des préoccupations. Le modèle, les styles et le code exécuté sont tous dans des parties distinctes du fichier. Eh bien, avec cela hors du chemin, allons de l'avant et construisons notre première application ionique. 7. Visite guidée de l'application: Maintenant, je veux passer un peu de temps à examiner le code qui a été généré pour nous. Considérez cela une visite guidée de l'Ionic pourrait que l'APP était ou tout simplement nous a remis dans mon terminal. Il y a quelques commandes que je vais entrer maintenant que vous voudrez peut-être prendre note . 1er 1 ouvre le code de studio visuel dans le répertoire courant, et je vais le faire avec le code point DOT étant le répertoire courant, et le suivant est une option pour servir Ionic. Cela ne provoque pas l'ouverture automatique du navigateur. Et c'est l'interrupteur Dash B. Pendant que cela se met en place dans la chambre, allons de l'avant et regardons quelques-uns du code qui a été généré pour nous. First Stop sera la Config ionique. Jason. Il n'y a pas grand-chose ici. Nous avons le nom de l'application et l'objet vide des intégrations et des intégrations est comme Cordova ou condensateur, et vous pouvez voir le type est angulaire. Jetons un coup d'oeil au fichier html point d'index. Au sommet, nous avons un tas d'attaques Met. La plupart de ces attaques d'hommes ont à voir avec la façon dont l'application apparaîtra sur les appareils mobiles . L' équipe Ionic a passé des années à les faire correctement. Je ne vous recommande pas de jouer avec lui dans la balise corporelle HTML, il y a un seul élément html personnalisé af route. C' est ainsi que l'APP a été créée. Jetons donc un coup d'oeil à l'endroit où le déracinement est défini. Il est ici sous l'application source dans un fichier appelé composant point d'application qui ts. La première chose à remarquer est ce décorateur de composants près du haut. Il a défini certaines informations sur le composant et comment il doit être rendu. sélecteur indique angulaire quel devrait être le nom de la balise, donc c'est d'où vient le déracinement. C' est HTML Markup est dans un fichier appelé composant point d'application que HTML, que nous verrons dans un instant. Et ce sont des styles personnalisés ou un composant de point d'application qui s CSS en haut des variables de personne de classe . Il y a un tableau de pages. Donc maintenant, vous savez d'où ils viennent à côté des étiquettes que nous pouvons voir dans le menu ci-dessous la liste des pages. Il est traditionnel dans une application angulaire de définir toutes les variables de niveau de classe et les champs près du haut, suivi par le constructeur de classe, qui est ce que nous voyons ici dans la liste des paramètres pour le constructeur est où nous pouvons injecter divers services dont la composante aura besoin. Plateforme et service ionique fournit diverses informations sur l'appareil ou plate-forme. L' APP est en cours d'exécution sur l'écran de démarrage suivant et la barre d'état sont maintenez-overs de natif Ionic et est spécifique à l'exécution sur des appareils physiques, que nous ne couvrirons pas pour le moment. Initialize app est un peu de standard que je vais ignorer pour l'instant. Il y a ce qu'on appelle un crochet de cycle de vie angulaire. Il y en a un tas, mais celui-ci est assez souvent angulaire appellera ONG sur un it une fois que le composant et tous ses enfants ont été initialisés. Il vérifie l'oral de la page en cours pour essayer de déterminer quelle page des pages de Ray est en cours de rendu. Ensuite, parlons de ces pages et comment naviguer entre elles. Tout le routeur d'application principal à trouver ici, pensez à une route est un euro. Le module de routage définit un tableau de routes et décrit le modèle de votre L à correspondre et décrit les modules de page dont ils se débarrassent pour chacun. Le premier tour a une chaîne vide pour un chemin avec une redirection vers le champ. Cela signifie que s'il n'y a pas de chemin spécifié dans l'application, il sera par défaut dans la boîte de réception des barres obliques du dossier suivant. Chaque fois que l'itinéraire commence par le dossier de mots Slash, suivi d'un i. D ou d'un nom de page, l'application importera le module de dossier et suit les propres règles de routage de ce modèle. À partir de là, je promets que cela commencera à avoir du sens lorsque nous construisons notre propre moitié. Maintenant, il est ouvert dossier point page points ts et regarder quelque chose d'un peu plus intéressant. Le composant de page de dossier n'a pas beaucoup de code dessus. Il a un constructeur dans lequel est injecté et activé le service de route. Il s'agit d'un service angulaire qui vous permet d'obtenir des informations sur l'itinéraire qui a provoqué l' apparition de la page dans le N G sur une fonction informatique. La page utilise ce service pour obtenir l' I.D ou le nom de cette partie de l'itinéraire. Cette idée va mapper à la boîte d'envoi de la boîte de réception, etc. Maintenant, nous allons ouvrir plié lierre html. C' est la marque, et c'est là que la vraie magie se produit pour cette page. La plupart des pages ioniques contiennent une balise d'en-tête ionique. Cela définit cet en-tête fixe en haut de la page. A l'intérieur de cela se trouve une barre d'outils ion, un conteneur pour les boutons , menus , titres, etc. pour ajouter des boutons à une barre d'outils. On peut l'utiliser. Je sur les boutons étiquette les attributs de fente indique où dans l'en-tête, les boutons vont traditionnellement commencer à gauche et la fin est sur la droite. Ceci est inversé dans les systèmes d'exploitation de droite à gauche. Le bouton de menu ionique est ce menu hamburger que nous avons vu quand nous avons fait l'application. Plus étroit par défaut, il se montre et se cache au besoin. À côté des boutons n'est pas le titre ion avec le dossier de mots entouré de deux accolades. s'agit d'une expression angulaire, de liaison, et il indique à angulaire de remplacer cette expression par la valeur réelle de la variable de dossier . Ensuite est le contenu ionique. C' est là que la plupart du contenu de vos pages seront en vie. Contient un autre en-tête et une barre d'outils contenant uniquement le titre. Enfin, nous pouvons voir une balise HTML def avec une autre expression de liaison et un paragraphe avec un lien hypertexte dans. Croyez-le ou non, c'est vraiment une bonne partie de la fonctionnalité. Bien sûr, il y a un tas d'autres fichiers, mais ceux que je vous ai montrés sont ceux que vous devez vraiment connaître à ce stade . Le reste sera décrit comme nécessaire. Maintenant, avant de quitter cette petite tournée, je veux faire quelques choses amusantes, mais je vais laisser ça pour la prochaine leçon. 8. Une autre chose: Maintenant, avant de quitter cette application Hello Ionic, faisons quelques choses amusantes. Comment pensez-vous que vous pouvez personnaliser cette liste de pages ? Si vous avez dit modifier le tableau à pages, donnez-vous une pat sur le dos. J' ai remarqué qu'il n'y a pas de page de courrier envoyé, alors créons un vrai rapide et voyons ce qui se passe. Ce que je vais faire est de copier et coller l'objet boîte d'envoi. Maintenant, nous en avons deux maintenant, la deuxième instance du mot boîte d'envoi. Changeons pour les éléments envoyés et changez les ou l deux dossiers Vie envoyée. Laissons l'icône tranquille un instant. Microsoft Outlook utilise cet avion papier pour les articles envoyés. Allons de l'avant et sauvegardons la page, parce que voici où ça devient amusant. Dès que vous enregistrez ces modifications, l'application sera reconstruite automatiquement et le navigateur sera rechargé pour refléter ces modifications. Maintenant, modifions l'icône de la boîte de sortie et nous allons la définir sur les albums. Laissez-le reconstruire et voir l'icône changer. Que pensez-vous qu'il se passera maintenant si vous cliquez sur le nouveau menu envoyé ? Nous n'avons pas créé une nouvelle page ou un itinéraire, donc nous obtiendrons un 404 Non, le composant de dossier sera toujours rendu avec son nom dit à la partie I. D ou nom de l'itinéraire, qui est envoyé. C' est parce que le composant de dossier est un objet assez générique. Toutes les pages ne seront pas si propres, mais nous utiliserons ce modèle dans les chapitres suivants du cours. Si vous voulez voir d'où viennent ces icônes, visitez I am icons dot com pour plus d'informations sur les composants, vous pouvez cliquer sur le lien des composants juste au milieu de l'application hello Ionic elle-même, et c'est un enveloppement pour cette leçon et ce chapitre. Vous devriez avoir un environnement de développement ionique complètement installé savoir comment créer une nouvelle application ionique et même faire quelques petites personnalisations. Alors allez-y, réjouissez-vous de votre nouveau pouvoir, jouez un peu entre maintenant et la leçon suivante. J' espère vous y voir bientôt 9. @10Dance - L'application de démo: Bonjour, voici Mike Callahan. Dans ce chapitre, nous allons construire un U I. en utilisant HTML et le framework ionique. Je vais commencer par vous montrer une démo de l'application finie, puis la construire progressivement à partir de zéro au cours des prochaines leçons que l'application va construire tout au long. Le cours est appelé une danse 10. Il s'agit d'une application de fréquentation conçue à l'origine pour aider les enseignants du dimanche à suivre les élèves de leurs classes. Initialement, l'Apple se compose de trois pages page d'accueil, d'une page de liste de classe et d'un détail étudiant. Page de côté, Menu permettra aux utilisateurs de naviguer facilement entre la maison dans les pages de liste de classe. Nous examinerons comment le menu est construit et comment la navigation est configurée pour passer d'une page à l' autre. Naturellement, les pages d'accueil où l'application va commencer. Il n'y a pas grand-chose ici, mais un composant de carte ionique. Nous allons passer en revue les bases de ce composant pour afficher une image et quelques informations textuelles sur l'application. La page de liste affiche l'étudiant inscrit à la classe et contient la majorité des adversaires ioniques utiliseront. Les étudiants sont affichés collectivement à l'aide d'une liste ionique, avec chaque élément de liste constitué d'éléments ioniques i n boutons, Je suis icônes et plus encore. Nous allons passer la majeure partie de notre temps dans le chapitre couvrant cette page alors que nous développons ses fonctionnalités avec des feuilles d'action, des alertes et des notifications de toast. Enfin, la page détaillée de l'étudiant est où nous pouvons voir et modifier divers détails sur un seul étudiant va éventuellement utiliser cette page pour discuter des formes ioniques. Dans ce chapitre, Tout ce que nous allons faire est de disposer les composants et d'acheter des données pour eux. À chaque étape du chemin, je vais expliquer les composants que j'ai sélectionnés, puis fournir le code qui les implémente . J' espère que vous êtes aussi désireux que moi, alors commençons. 10. Créer le nouveau projet: Ok, maintenant que vous avez vu ce que nous allons construire, allons plonger et mettre le projet en marche avant que je commence un nouveau projet ionique . J' aime m'assurer que je suis sur la dernière dynamique, Eli. Alors faisons ça d'abord. Dans le terminal de votre choix, entrez le Command and PM Install Dash G for Global at ionic slash eli Au plus tard. Si vous êtes déjà sur la dernière version, rien ne sera installé. Exécutez ensuite la commande de démarrage ionique lorsque vous le demandez. Sélectionnez le framework utilisera suivant. Indiquez le nom du projet. Je l'appelle 10 Danse. C' est un jeu de mots que je connais, et c'est horrible. Sélectionnez le modèle vide pour celui-ci implémentera un menu latéral, mais je préférerais que nous le construisions à partir de zéro. En outre, cette façon supprimera beaucoup moins de code standard. Tu ne devrais pas t'en occuper à propos du condensateur. Mais si vous le faites, allez-y et répondez. Oui, je ne travaillerai pas avec ce flux, donc tous les nœuds interconnectés le connectant à Maionica comptent. Une fois le projet créé, nous pouvons l'ouvrir dans le I d pour jeter un oeil autour. Il n'y a pas grand-chose ici parce que nous avons utilisé le modèle vide. Il y a vraiment juste une page d'accueil qui va bien, parce que nous allons la construire assez rapidement. Nous pouvons également retourner dans le terminal et déclencher une commande de service ionique rapide et jeter un coup d'oeil à la façon dont il sera rendu. Ici, j'ai chrome me montrant à quoi cela pourrait ressembler courir sur un iPhone à nouveau. Il n'y a pas beaucoup de contenu à parler, alors allons-y et prenons soin de ça tout de suite. 11. Modification de la page d'accueil: La première chose que je veux faire est de sortir la page d'accueil car c'est la page d'accueil de l'abside. y aura pas beaucoup de contenu, juste quelques textes et une image à l'intérieur d'une carte ionique. Et I on Card est un composant conçu pour envelopper des informations de base par défaut. Une carte a une bordure grise, bords arrondis et une ombre portée subtile. Comme avec tous les composants Ionic, son style visuel changera légèrement lorsqu' il est rendu sur un appareil Android par rapport à un appareil IOS. Les cartes peuvent être aussi simples ou aussi complexes que vous le souhaitez. La carte que j'envisage pour la page d'accueil ressemble bien à celle-ci, composée d'une image suivie d'un en-tête de carte contenant à la fois un sous-titre et un titre. Et enfin, un bref intra paragraphe. Nous allons construire cette page en ce moment à côté de cette leçon est une image que je vais utiliser sur la page d' accueil. Téléchargez cette image maintenant et déposez-la dans un nouveau dossier. Source. Images d'actifs, coma, point de salle de classe jp G ou J Peg. Ouvrez la page d'accueil, qui est le fichier HTML dans la source. Appli. À la maison. Supprimer tout à l'intérieur de l'œil sur la balise de contenu. Modifiez la valeur à l'intérieur de la balise de titre ionique à partir de la maison d'orteil vierge dans le contenu ionique maintenant vide d'un composant de carte ionique à l'intérieur de la carte ionique à une balise d'image HTML standard avec la source définie sur le fichier que vous venez de télécharger, qui devrait être images d'actifs, salle de classe Dodge, APEC. Pour être un bon citoyen, vous devez également fournir un attribut d'autel. J' utilise le mot « salle de classe ». Arrêtons ici et voyons à quoi ça ressemble. Ensuite, nous allons profiter du rechargement en direct au fur et à mesure que nous finissons la page. Je veux vous montrer une fonctionnalité vraiment cool du code S, en supposant que vous l'utilisez. Si ce n'est pas le cas, entrez les commandes sur le terminal que vous préférez. V s code a un terminal intégré auquel vous pouvez accéder en appuyant sur la touche Contrôle Back tick. Ça devrait être la clé à côté de l'un. Je garderai ce terminal ouvert pendant la majeure partie du parcours, donc nous n'avons pas à rebondir autant à l'intérieur du terminal. Entrez la commande NPM. Démarrez jusqu'à maintenant, nous avons utilisé Ionics service, mais je veux que vous commenciez à vous habituer à utiliser NPM est votre script runner. Cela n'a pas tant d'importance en ce moment, mais nous finirons par compter dans PM pour faire des tâches plus complexes. Quatrièmement, pour plus de commodité. Je vais aussi essayer de garder le navigateur ouvert et avoir tout tourbillonner en plein écran . Ensemble, vous pouvez voir la page d'accueil rendue avec son nouveau titre, la carte Ion et l'image Retour dans le code et un composant d'en-tête de carte ion par lui-même. Cela ne fera pas grand-chose immédiatement à l'intérieur d'une carte ionique. Sous-titre avec le texte Classroom fréquentation manager et immédiatement après cela et moi sur le titre de la carte avec le texte à 10 Danse. Tu n'as pas à l'épeler comme je l'ai fait. Si vous ne voulez pas enregistrer le fichier et assurez-vous qu'il est rendu s'il ne s'est pas assuré que l'en-tête de la carte ion enveloppe le sous-titre intitulé Elements and Look for unclos html tax Après la balise de fermeture des en-têtes de carte ion à une balise de contenu de la carte ion. Et à l'intérieur de cela une balise de paragraphe HTML normale. Vous pouvez mettre tout ce que vous voulez à l'intérieur de cela, enregistrer le fichier et vérifier les résultats. Ça devrait ressembler à ce que j'ai ici. Faisons encore une chose avant de quitter la page d'accueil, mettons un lien vers la page de liste, qui va construire peu de temps après la balise de paragraphe à une balise d'ancrage HTML avec deux attributs . Une liaison de routeur définie sur la liste et la direction d'arounder définie sur l'avant. intérieur de l'étiquette lui fournit des textes tels que Aller à la liste. Cela va créer un bouton avec déclaré de navigation afin que nous puissions aller à la page de liste une fois qu'il existe. La raison pour laquelle nous utilisons le lien de routeur au lieu de l'arbre typique d'attributs est de sorte que Ionic améliorera l'animation de navigation. Pour nous, la direction du routeur signifie utiliser la direction typique de l'animation vers l'avant des plates-formes. Nous aurions également pu spécifier un itinéraire qui nous aurait donné une animation légèrement différente . Enregistrement de la page. Vous pouvez voir le lien rendu. Cependant, cliquer dessus ne fera rien. Nous n'avons pas encore construit la page de liste, donc nous le ferons ensuite 12. Ajouter la page de la liste: À l'heure actuelle, vous devriez être à l'aise d'ajouter des balises ioniques dans une page, mais nous n'avons pas créé de nouvelle page à partir de zéro. Nous allons aborder cela maintenant, mais créer ce qui sera sans doute la page la plus compliquée de l'application pour créer une nouvelle page ionique. On peut utiliser les Ioniques, Eli ou Angular Seelye. L' une des choses que j'aime le plus à propos de l'utilisation angulaire avec Ionic est le modèle riche qui angulaire apporte à la table. Comme nous l'avons déjà vu, Ionic délègue une grande partie de ses opérations de ligne de commande au cli angulaire sous-jacent augmentant le cas échéant, création de pages est l'un de ces moments appropriés dans le terminal. Je vais arrêter la commande NPM start et je vais sous la commande Ionic Générer page liste, l'option Death Stash Dry Dash Run. J' aime utiliser l'option dry run car j'ai une chance de voir ce qui se passera dans les choses d'ajustement si je n'aime pas ce que je vois. Le haut qu'ils obtiennent me montre deux choses ici, une qu'il va créer un nouveau dossier de liste, une page, un module séparé pour cette page, des tests unitaires et des styles. De plus, il ajoute automatiquement la page dans le système de routage d'abse afin que vous puissiez voir une grande partie du travail grognement a fait pour vous. J' ai également un message que l'Ionic CLI est prête à être mise à jour elle-même et je vais aller de l'avant et le faire. Mais je ne te ferai pas regarder. Je vais aller de l'avant et relancer la même commande cette fois sans l'option de course à sec, parce que je suis content de ce que ça va m'obtenir. Parce que j'ai arrêté le serveur. Je vais aller de l'avant et recommencer avec NPM start. Maintenant qu'il est fini de construire, je peux re rendre la page d'accueil. Une fois que j'ai cliqué sur ce lien de liste, la page de liste par défaut juste grand sera affichée. n'y a pas grand-chose, mais on peut s'en occuper sous peu. 13. Service des apprenants: avant d'étoffer la page de la liste. Nous avons besoin d'obtenir des étudiants à afficher plus tard voudront lier la liste en un jour pour stocker sorte, mais nous n'avons pas besoin de faire cela juste pour obtenir le David affiché sur la page. Pour cela, je vais utiliser un simple service étudiant que nous pouvons injecter dans les pages qui en ont besoin. Une fois de plus, nous allons utiliser l'interface de ligne de commande pour créer le service. Dans ce cas, peu importe si nous avons utilisé la CLI angulaire ou l'Eli ionique. Donc, pour secouer un peu les choses, utilisons l'interface de ligne de commande angulaire. Entrez la commande N g G pour générer des étudiants de service, qui est le nom du service et à nouveau, utilisez la commande dry run. Cette commande n'a pas fonctionné et voici pourquoi. Lorsque nous avons installé le paquet Ionic CLI, nous l'avons installé dans le monde entier. Cependant, le commit Ionic start quand il crée un projet ionique installé. L' allié NGC localement est la dépendance locale du projet, donc ce n'est pas sur mon chemin. Mon système ne sait pas où le trouver. Il y a deux façons de contourner que nous pouvons soit installer le NGC de la même manière globalement ou nous pouvons utiliser une petite commande utilitaire fournie par note et dans PM appelé MPX. Si nous avons pré-écrit la même commande avec N P X, cet outil sait regarder dans mon dossier Node Modules pour la commande spécifiée. Donc, nous allons juste exécuter cela à nouveau dans P X, et maintenant vous verrez que cela fonctionne. Et encore une fois, on utilise Dry Run pour voir ce qu'il va faire. Par défaut, le service sera créé dans le dossier APP, mais pas dans un dossier propre, et il sera créé avec le test unitaire. Maintenant, allons de l'avant et recommencez-le sans le pilote et le drapeau quand il est terminé. Ouvrir les étudiants point de service ts. A l'intérieur de ce fichier va créer une constante d'interface et une fonction. Il va créer un objet étudiant en tant qu'interface. Rappelez-vous, les interfaces n'existent pas dans le script Java et disparaîtront complètement lors de la construction. Leur seul but est pour nous d'activer le type de paramètre, vérifier l'achèvement du code et Intel un sens à l'intérieur du code Entrée. À ce stade, je ne sais pas tout ce qu'un objet étudiant devrait contenir, mais ces champs devraient suffire à nos fins. Maintenant, ces points d'interrogation sur la plupart des champs indiquent que ces talons sont facultatifs. Donc, pour créer un objet étudiant valide, je dois fournir au moins un I. D de prénom et un nom de famille. Non, je voudrais souligner ce champ d'état parce que cela pourrait sembler un peu étrange au début, mais cette ligne dit que le statut est une chaîne optionnelle, mais il ne peut être jamais défini que l'une des deux valeurs spécifiques présentes ou absentes. Il s'agit d'un temps compilé sur la contrainte et n'aura aucune incidence sur le script de travail généré. Ce qu'il fera, c'est nous empêcher de compiler le code. Si jamais nous essayons d'utiliser une autre valeur pour ce champ, il fournira également cette complétion de code lors de la définition ou de la comparaison des valeurs au champ, ce qui est une commodité agréable. Créons un tableau d'étudiants que nous pouvons utiliser à la place d'une base de données. Pour l'instant, je l'appelle « Mark Students ». Maintenant, pour la fonction à l'intérieur du corps de la classe, créons une fonction appelée get all students. Cela retournera une copie du tableau des étudiants fictifs, et je le fais avec l'opérateur de propagation, qui essentiellement un raccourci pour juste faire une copie superficielle de l'Irak plus tard développera ce service avec plus de fonctionnalités. Mais pour l'instant, cela nous mènera là où nous devons être. C' est trompeuse simple, mais c'est seulement parce que ça ne fait pas grand-chose. Maintenant, revenons à la page de la liste et utilisons-la. 14. Page de la liste des apprenants: Maintenant, nous devons mettre les étudiants que nous venons de créer sur la page de liste. Ouvrir la liste des points de la page de doute juste avant le constructeur, nous devons créer un orteil variable, tenir le tableau d'étudiants dont il a besoin d'être importé du service étudiant. Ensuite, nous allons devoir injecter une référence au service étudiant dans les pages. Constructeur. Nous le faisons en insérant un nouveau paramètre privé appelé Students Service of Type Students Students Service. Je sais que c'est déroutant. Assurez-vous que vous obtenez le boîtier droit ou angulaire, et dactylographié ne sera pas heureux avec vous. Marquer le paramètre est privé expose automatiquement le paramètre en tant que membre de la classe de composant. C' est un raccourci pratique. Types nous fournit à l'intérieur du constructeur ce qu'on appelle une fonction get all students du service étudiant et un signe que les résultats du tableau des composants étudiants ouvrent maintenant le fichier html de la page de liste afin que nous puissions créer un marché pour rendre le étudiants les en-têtes déjà définis et son titre a déjà défini la liste. Donc il n'y a rien à faire ici. J' espère que l'en-tête ionique vous est familier comme nous l'avons vu sur la page d'accueil et aussi pendant la visite guidée. On a déjà du contenu ionique, mais il est vide. Donc, à l'intérieur de cela, introduisons un nouveau composant. La liste ionique et I Am List est un autre composant de conteneur conçu pour envelopper plusieurs types d'éléments d'une manière visuellement cohérente. Je sur les listes contiennent des choses appelées oeil sur les éléments, qui à leur tour, rap ion étiquettes haut sur les boutons, icônes ioniques, contremaître mettre champs et ainsi de suite. Nous utiliserons tout ça et mawr pendant ce cours. Je sur les listes peut également être utilisé pour implémenter des éléments coulissants, que vous avez probablement vu auparavant. Ce sont des options qui n'apparaissent que lorsque vous balayez vers la gauche ou la droite sur un élément révélant une option moins souvent utilisée ou potentiellement dangereuse, telle que supprimer à l'intérieur de la liste des yeux. Affaiblir itéré sur le tableau students avec une directive N G quatre sur l'élément le plus externe à l'intérieur de la liste. Dans ce cas, ce sera un élément de glissement ion élément sur le côté assignation de la N G quatre fournir let's étudiant des étudiants. Cela créera un œil sur les objets alignant l'adversaire et tout ce qu'il contient pour chaque élève dans le tableau d'étudiants I sur l'élément coulissant nous fournira un nouvel élément, balayage ou option de diapositive. A l'intérieur de cela sera une étiquette d'élément ionique. Ce composant va encapsuler l'ensemble de l'élément de liste que nous implémentons avec un oeil sur le composant élément à l'intérieur de l'élément ionique à une icône ionique et une étiquette ionique comme frères, a dit l'attribut de fente d'icône pour commencer et définir les attributs de nom de deux personnes contour à l'intérieur de l'étiquette ionique. Liez du texte aux noms et prénoms des élèves séparés par une virgule à côté d'eux. Créons deux autres contacts ion I, que nous rendrons conditionnellement en fonction du statut d'absent ou présent de l'étudiant. Le 1er 1 est pour le président et nous allons le mettre sur l'icône I. Le second doit être affiché lorsque l'étudiant est absent. Donc, pour cela, on a utilisé l'oeil hors contour, qui est un contour d'un œil avec une ligne à travers elle. La façon dont nous rendons les icônes conditionnellement est d'ajouter la directive NGF à chaque icône. On évaluera à la vérité. Le statut d'étudiant est présent. L' autre sera rendu si le statut d'étudiant est absent. Notez qu'il est tout à fait possible que le statut d'étudiant n'ait aucune valeur car le champ d'état est facultatif. Dans ce cas, ni je ne viens ne sera rendu, qui est ce que nous voulons. Enregistrez le fichier maintenant et voyez à quoi il ressemble. Si tout s'est bien passé, tous nos étudiants sont affichés est prévu. Terminons cette leçon en finissant cet élément coulissant immédiatement avant l'étiquette de fermeture glissante de l'élément ionique . Ajoutons une balise d'options d'élément ion avec les attributs latéraux définis à la fin. Cela signifie que nous voulons que l'option apparaisse à la fin de l'élément, signifie que lorsque nous le glissons vers le début de l'élément, peu apparaissent à l'intérieur de cette étiquette à une seule option d'élément ionique. Techniques. Assurez-vous que vous vous souciez du pluriel singulier ici. La balise plurielle est l'ensemble technique externe, la couleur de celui-ci au danger, qui par défaut est une couleur rouge orange effrayante. Nous allons traiter avec le gestionnaire de clic plus tard, donc pour l'instant, a simplement dit la valeur des balises au mot supprimer. Enregistrez le fichier et actualisez la page. À ce stade, la seule interactivité est un curseur lui-même. Donc, cliquez et faites glisser un élément vers le début de l'élément, vous devriez voir le bouton de suppression , vous pouvez cliquer dessus. Il se comporte visuellement, comme vous vous y attendez, mais il ne fera rien pour l'instant. Dans la leçon suivante, nous allons envoyer de nouvelles commandes à cette page afin que nous puissions gérer notre liste d'étudiants. 15. Ajouter une fonctionnalité à la liste des apprenants: si vous étiez enseignant et que c'était une vraie classe d'élèves, il y a un certain nombre de choses que vous voudriez pouvoir faire avec votre application. Quelques-unes de ces choses sont marquées absentes ou présentes. Accédez à une page détaillée pour afficher ou modifier des informations qui ne sont pas visibles dans la liste. Retirez un élève de la classe avec les avertissements appropriés. Bien sûr, dans cette leçon, nous allons améliorer l'U Y de la page de liste pour faire toutes ces choses. La première chose que je veux faire est d'ajouter un menu à chaque élève dans la liste ionique. Pour cela, nous allons utiliser une feuille d'action ionique. Dans Action Sheet est un menu qui affiche un peu comme un dialogue. Il contient souvent au moins deux boutons d'action, mais généralement mawr, qui sont liés contextuellement d'une manière ou d'une autre. Dans notre cas, le contexte est celui de l'étudiant actuellement sélectionné et je sur la feuille d'action est Ionics mise en œuvre spécifique rendu feuille d'inaction qui regarde automatiquement à la maison sur un iPhone ou un Android. Les boutons et la feuille d'inaction peuvent contenir un rôle destructeur ou annulé . Destructive est utilisé pour indiquer que quelque chose de permanent est sur le point de se produire et est souvent utilisé pour l'opération de suppression sur les boutons de périphériques IOS avec le rouleau destructeur rendu différemment que le reste, généralement en rouge. Un bouton dont le rôle est annulé sera toujours affiché en dernier au bas de la feuille. Ce bouton ne doit pas avoir d'autre but que de rejeter la feuille. Aucune mesure n'a été prise. Les boutons et l'inaction qu'elle peut avoir du texte et des icônes, mais la façon dont vous les définissez est différent d'un composant normal I unbutton, notre feuille d'action inclura des boutons pour marquer un étudiant est présent ou absent le leader un étudiant ou annuler le action et ne rien faire. Pour ce faire, nous devons faire un peu de configuration d'abord dans le fichier dot-pe dot ts de liste. Nous devons injecter le contrôleur de moutons d'action dans le constructeur de composants. Cela nous permettra de construire une feuille d'action en réponse à un clic de bouton. Ensuite, nous devons aller de l'avant et utiliser la feuille réelle. Donc je vais mettre une fonction ici appelée Present Action Sheet. Je vais attendre des appels qu'ils renvoient une promesse. Donc, la fonction doit être un évier. Il acceptera l'étudiant afin que nous puissions afficher la feuille d'action appropriée pour l' étudiant a été cliqué. La première chose que je veux faire est de créer la feuille d'action elle-même, ce que nous faisons en appelant les feuilles d'action. Les contrôleurs créent une fonction, créent des retours de promesse. Donc nous voulons l'attendre. Créer prend un seul paramètre d'options, que je vais expliquer au fur et à mesure que nous allons. Le premier est les attributs d'en-tête, qui seront le titre de la feuille d'action. Et je vais mettre ça à la concaténation des étudiants Prénoms et Prénoms remarqués que nous obtenons de bonnes informations ici. La raison pour laquelle le code V se plaint est parce qu'il sait que j'ai besoin d'ajouter un bouton autour et je ne l'ai pas encore fait, donc c'est le strict minimum pour une feuille d'action. Mais comme je suis sûr que vous serez d'accord, ce ne serait pas très utile. Donc, le premier bouton va être la marque présente. Mais donc quand vous avez dit que c'est le texte pour marquer présent, bien dit que c'est l'icône pour moi et ensuite fournira une fonction de flèche comme son gestionnaire pour définir le statut des étudiants sélectionnés à présenter. Et comme je l'ai promis, vous avez remarqué qu'il y avait un sens à Intel. Montrez-moi avec la valeur juridique des statuts. Le bouton suivant sera le marché opposé, absent et utilisera l'icône I off. Ou plutôt, l'icône « eye off ». Et sa fonction de gestionnaire sera également une fonction étroite pour définir le statut des étudiants à absent. Le bouton suivant est le bouton Supprimer, qui utilisera supprimer est son libellé de texte, l'icône de la corbeille, et c'est facultatif. Donc, si vous voulez définir le gestionnaire sur appelé la fonction de suppression de l'étudiant, je ne vais pas me déranger en ce moment. Dans la leçon suivante. Je vais gérer ça un peu différemment, donc je ne vais pas m'embêter à appeler quoi que ce soit. Et rappelez-vous, ces icônes et leurs noms viennent des icônes ioniques dot com et enfin, le bouton d'annulation. Celui-ci aura un texte d'annulation et je fermerai, et nous pouvons définir le rôle à annuler et ne pas déranger avec la fonction de gestionnaire du tout, et cela termine la création de la feuille d'action. Avoir la feuille d'acteur ne fera rien, cependant, cependant, jusqu'à ce qu'on appelle présent. Donc, comme je l'ai dit, les contrôleurs de feuille réels créent un retour de fonction à promesse. Nous attendons donc ce magasin de promesses, le résultat de la promesse dans la feuille d'action constante. Et ce n'est qu'alors que nous pouvons appeler le présent, qui va aussi rendre une promesse. Donc, nous attendons la feuille d'action point présent. Suivant. Créons une fonction pour supprimer un étudiant. Même si je n'appelle pas dans cette leçon, je veux la mettre en place au cas où vous vouliez jouer et vous appeler. Le code va simplement filtrer le tableau des étudiants que nous avons obtenu du service étudiant suivant à gauche sur un bouton pour lancer la feuille d'action. Et nous le faisons dans le balisage de la page de liste et une étiquette de boutons ioniques immédiatement après les deux icônes existantes et juste avant la taxe de clôture de l'élément ionique. Donnez à l'étiquette de boutons ioniques une fente après et dit sa fin, ce qui signifie qu'il apparaîtra à la fin de l'élément. Ensuite, ajoutez à nouveau aux balises de boutons ioniques en tant que balise Enfants de la balise boutons. Regarder ceux singulier et pluriel à l'intérieur de chaque bouton à un oeil sur mon calme avec les attributs de fente , ladite icône d'orteil sur Lee, spécifier l'icône de la première comme ellipse contour horizontal et définir le 2ème 1 à Chevron avant le contour d'un gestionnaire de clic vers le bouton avec les points de suspension lorsqu'il est cliqué. Nous voulons appeler la présente fonction de feuille d'action, en passant l'étudiant actuel de leur chemin. Pour l'instant, nous laisserons le bouton avec le Chevron seul. On finira ça plus tard. Enregistrez le fichier et regardez les résultats. Cliquez sur les boutons et voyez qu'ils ont l'air et se comportent comme nous nous attendons à ce que Chevron avant ne fasse rien. Si vous avez câblé, supprimer l'étudiant doit être immédiatement supprimé. Je ne l'ai pas fait pour que ça ne fasse rien. Je viens de remarquer quelque chose qu'on a oublié. J' ai mentionné plus tôt que typiquement sur un appareil IOS, tout ce qui a le rôle de destructeur tel que supprimer serait en rouge. Donc il y a quelques choses que je veux souligner ici. Le mode d'affichage par défaut pour Ionic n'est pas celui de l'Iowa. En fait, c'est la conception matérielle de la façon dont vous pouvez le forcer à changer. Il suffit d'ouvrir les outils de développement et chrome. Laisse-moi juste réparer ça. Mettez les outils de développement en bas, et alors que se passe-t-il si nous sélectionnons le mode de barre d'outils de l'appareil ? Alors on peut lui dire ce qu'on voulait agir. Laisse-moi baisser ça pour toi. Maintenant, c'est simplement en réponse du moteur. Mais je peux spécifiquement lui dire d'aller dans ce qui est essentiellement une version iPhone, et nous obtenons même avec le modèle approprié, même obtenir le bon cadre de l'appareil. Mais ce que vous verrez ici, c'est que si je clique dessus, c'est toujours dans la conception matérielle. Donc, la façon de corriger cela est de rafraîchir la page, ce que je vais faire avec Command sont maintenant. Vous pouvez voir les icônes devenir bleues. Le texte de la barre de titre a été centré et la police a changé. Donc maintenant, c'est un mode IOS. Chrome est maintenant signalé à Ionic qu'il est un appareil IOS, qui est vraiment lisse, mais maintenant remarquer ce qui se passe lorsque je fais apparaître la feuille d'action. Le plomb n'est toujours pas lu, et vous avez probablement vu pourquoi je me suis souvenu de le faire avec cela. Bouton de suppression. Ici, vous pouvez voir la couleur est un danger. Donc, si vous revenez dans les points de page des points de liste, où la feuille d'action est définie, vous pouvez voir que le prospect manque quelque chose. Il manque son rôle. Tout ce qu'il faut faire, c'est lui donner un rouleau de destructeur. Une fois que nous lui donnons ce rôle, nous sauvegardons le fichier, les enders de page arrière. Et maintenant, il est lu comme on s'y attendait. Alors je suis heureux de me souvenir de le faire avant de mettre fin à cette leçon. Nous enregistrerons le reste de la fonctionnalité pour une future leçon. Pour l'instant, cependant, si vous voulez, n'hésitez pas à jouer autour. 16. Confirmation et notification de l'utilisateur: la façon dont le code est actuellement écrit. La suppression d'un étudiant de la liste peut se faire accidentellement. Si l'utilisateur clique ou appuie sur le mauvais bouton, aucun avertissement ou confirmation n'est demandé. Nous devons demander à l'utilisateur de confirmer l'opération de suppression avant qu'elle ne se produise. De même, une fois qu'un étudiant doit le quitter, rien n'indique que l'action a eu lieu. Autre que le nom qui disparaît de la liste va combler ces deux lacunes bientôt Il n'a pas considéré comme une sieste de prendre une action destructrice sans au moins avertir l' . utilisateur. Il est préférable de demander une confirmation à l'utilisateur, et c'est ce que nous allons faire ici. Dans la leçon précédente, ils gestionnaire pour le bouton de suppression appelle simplement la fonction de suppression de l'étudiant. Il serait préférable d'obtenir la confirmation d'abord. Nous pouvons le faire en utilisant un oeil sur alerte, et je sur alerte est un composant motile vous I qui fournit un avertissement simple à l'utilisateur que quelque chose d'important est sur le point de se produire, et éventuellement fournit un moyen de l'annuler. Voici ce que j'ai en tête pour mettre en œuvre la confirmation. Comme avec tous les composants ioniques, il rend avec le look et la sensation appropriés sur Android et iPhone À l'intérieur du code composant pages de liste , vous devez injecter des dialectes. Contrôleur d'alerte dans le constructeur. Assurez-vous qu'il est importé en haut du fichier. Ensuite, créez une nouvelle fonction appelée présente alerte de suppression. Il doit accepter un objet étudiant tout comme la stratégie actuelle de feuille d'action entre la création de la feuille d'action et l'alerte de suppression. Presque identique. La fonction create prend et options objet tout comme les contrôleurs action shake create fonction fait et il renvoie une promesse qui résulte à l'alerte. Il y a trois attributs qui contrôlent le texte à l'intérieur et j'ai une alerte. L' attribut en-tête est une chaîne qui apparaît en haut de l'œuvre. Vous quelque chose comme supprimer cet étudiant. Les attributs de sous-en-tête apparaissent juste à l'intérieur du corps d'alerte défini ceci après être pour éveiller Captain Nation des noms et prénoms des élèves. Ainsi, l'utilisateur sait avec certitude quel étudiant est sur le point d'être supprimé. L' attribut message est le corps principal de l'alerte utiliser la chaîne telle que cette opération ne peut pas être annulée. Enfin, l'alerte nécessite un tableau de boutons. Vous définissez ces boutons exactement de la même manière que pour la feuille réelle. Le premier bouton est le bouton Supprimer. Il a besoin d'un gestionnaire qui supprimera l'étudiant. Le deuxième bouton doit être un bouton d'annulation avec le rôle d'annulation. Je vais utiliser le texte. Peu importe qu'il n'a pas besoin d'un gestionnaire. Maintenant. Câble de remorquage tout ça ensemble. Faites défiler jusqu'à la fonction de feuille d'action actuelle. Recherchez le bouton Supprimer si vous avez appelé. Supprimer l'étudiant. Remplacé cela par un appel pour présenter l'alerte Supprimer. Si vous l'avez sauté comme je l'ai fait, ajoutez simplement une fonction étroite, comme les attributs du gestionnaire, qui appellera alerte élite actuelle. N' oubliez pas de passer l'étudiant, si vous vous souvenez, est un autre bouton de suppression sur la page avec un à l'intérieur de l'option ion élément, cependant, cela se produit non pas dans le fichier de composant, mais dans le balisage. Donc, ouvrez le fichier html de la page de liste et trouvez le composant d'option ion élément nommé delete à un gestionnaire de clic et placez le même appel dans celui-ci que nous l'avons fait auparavant. Présentez l'alerte principale avec l'étudiant dans ce cas, la variable étudiant provient de l'expression n G quatre de neuf en ligne. Enregistrer le fichier et l'extrémité arrière du navigateur Si vous êtes très aigle yeux, vous remarquerez que j'ai oublié quelque chose. Donc, si nous sélectionnons supprimer dans la feuille d'action, rien ne se passe. De même, si nous dragons sélectivement, rien ne se passe. Savez-vous où le faux qu'on a créé l'alerte ? Mais on ne l'a pas vraiment utilisé. C' était tout le point et l'attente en premier lieu. Donc, la façon dont vous le faites maintenant, comme vous appelez le point d'alerte présente exactement la façon dont nous l'avons fait avec la présente fonction de feuille d'action , il revient également à promettre, donc ce n'est pas une mauvaise idée de l'attendre, bien que dans réalité, ce n'est pas super nécessaire. Essayons ça très vite. Enregistrez le fichier. Nous sommes allés à la page et maintenant supprimer va nous demander. Nous pouvons dire, Peu importe ou nous pourrions aller de l'avant et le laisser et il est parti plusieurs fois une application doit fournir une notification à l'utilisateur que quelque chose s'est passé. Mais ce n'est pas si critique que vous voulez interrompre complètement le flux de l'application . Les notifications Toast remplissent parfaitement ce rôle. Un toast est une petite bannière informationnelle pop up discrète. Par convention, il devrait transmettre un court message qui apparaîtra pendant un bref laps de temps avant disparaître automatiquement. Certaines notifications de toast contiennent également un moyen pour l'utilisateur de le rejeter tôt, décidant d'utiliser ou non un toast. La notification est simple. Le message exige-t-il que l'utilisateur prenne des mesures ? N' est pas important si l'utilisateur le manque. Si la réponse aux deux questions est non, alors la notification de toast est parfaite. L' implémentation ionique d'une notification de toast est l'œil sur le composant toast. C' est probablement le plus basique de tous les ioniques. Vous je composants. Vous pouvez en construire un avec très peu d'effort. Sa forme la plus basique consiste en un message et une durée, et je sur toast, pourrait être positionné verticalement en haut, au milieu ou en bas de l'écran. Il est toujours centré horizontalement. Vous pouvez les colorier avec l'attribut de couleur, en fournissant n'importe quelle couleur ionique ou votre propre couleur personnalisée. Vous pouvez ajouter des boutons et des icônes. On ne fera rien de tout ça. Si vous souhaitez personnaliser votre œil sur le toast après la fin de la leçon, n'hésitez pas à utiliser le fichier composant pages de liste. Nous devons ajouter le contrôleur de toast Ionics au constructeur à nouveau. Assurez-vous qu'il est importé en haut. Suivant modifier supprimer étudiant pour créer et immédiatement présenté notification toast. Ses attributs de message doivent contenir une brève déclaration indiquant que l'étudiant a été supprimé. Soyez aussi détaillé que vous voulez, mais rappelez-vous, le plus court est généralement meilleur. La position de toast par défaut est centrée verticalement sur l'écran. J' ai décidé de le déplacer vers le haut, mais franchement, vous pouvez le mettre où vous voulez. Vous pouvez choisir entre le haut, le milieu ou le bas. L' attribut duration contrôle combien de temps l'œil sur toast va attendre avant qu'il se rejette automatiquement . La durée est un entier en millisecondes. Veillez à ne pas spécifier une durée trop courte et à ne pas passer une force si vous omettez la durée. Attribut. Le toast restera à l'écran indéfiniment, nécessitant une intervention de l'utilisateur pour le rejeter, ce qui nécessiterait un bouton si vous remarquez que l'attente est soulignée. Et c'est parce que je n'ai pas marqué l'étudiant du village comme un évier qui va le faire. Vous pouvez fournir un tableau de boutons à un œil sur toast. C' est juste avec la feuille d'action et le je une alerte. Si vous vous sentez si enclin à aller de l'avant et en ajouter un et enfin n'oublions pas d'appeler. Présent sur le toast, et c'est tout ce qu'il y a. Enregistrez le fichier et quittez le navigateur. Rafraîchir. Maintenant, lorsque vous supprimez un étudiant en plus du nom de l'étudiant qui disparaît de la liste après avoir fait la confirmation, vous recevrez également le toast de notification. Si vous voulez des idées sur la façon dont vous pouvez améliorer cette expérience, je vous propose quelques défis plus tard, juste après la vidéo finale. 17. Navigation de base: Avant de terminer ce chapitre, je veux ajouter un menu pour faciliter la navigation entre la page d'accueil sur la page de liste , le menu ressemblera principalement à celui de la visite guidée et du chapitre un, mais ce sera un un peu plus simple. Dans Ionic, vous créez un menu avec le composant de menu ionique. Le menu ionique est un composant ionique qui implémente le menu de côté. Comme pour la plupart des autres composants de conteneur ionique, il peut contenir un en-tête avec une barre d'outils dans le titre, ainsi qu'un contenu ionique. Le menu latéral typique se compose d'une liste de pages faites à partir d'une liste d'éléments ioniques. Le menu peut être personnalisé avec une variété de comportements. Si vous voulez que le menu obscure le contenu de la page principale, vous consentez. C' est type après maisto superposer. D' autres choix sont push, ce qui a fait glisser le contenu de la page avec le menu ou vous pouvez choisir révéler pour obtenir un effet similaire mais soudainement différent avec révéler le menu. contenu lui-même est stationnaire, alors qu'avec push, le contenu du menu se déplace avec le contenu de la page. Vous pouvez spécifier de quel côté le menu se trouve en définissant le côté après la vue sur le début ou la fin. Si vous choisissez fin, assurez-vous que votre icône de menu se trouve du même côté de la barre d'outils du contenu principal, sinon cela aura l'air bizarre. Vous pouvez désactiver le balayage du menu en définissant le geste de balayage sur false. Si vous souhaitez qu'un élément de votre menu ferme le menu lorsque vous le sélectionnez, veillez à l'envelopper d'un composant bascule à œil sur le menu. Sinon, le menu restera ouvert. Le bascule de menu ionique peut également être utilisé pour ouvrir un menu. D' où le nom bascule. Trouve une faute. Il se cachera automatiquement chaque fois qu'il détecte que son menu est désactivé ou est présenté dans une douleur fractionnée, comme nous le faisons ici. cette raison, si vous voulez qu'il soit visible tout le temps, assurez-vous de définir son masquage automatique précis. Tellement faux. Ne me demandez pas combien de temps il m'a fallu pour le déboguer la première fois que je l'ai oublié. Il y a plus à un menu, mais ce sont les bases. Donc, nous allons construire un composant de point d'application maintenant ouvert qui ts C'est là que va définir le menu. A l'intérieur de la classe de composant créé tableau de pour objets libéraux un pour la page d'accueil avec l'Ural approprié et Icône un pour la page de liste avec son fichier L Slash et pour l'icône, Utilisons les gens. Vient ensuite le menu lui-même, à l'intérieur de l'application dot composant html à une douleur de split ion et dit que son contenu que je veux dire tout le reste sur la page doit être à l'intérieur de la douleur de split juste à l'intérieur de la douleur de split et avant la sortie du routeur à un menu ionique avec son contenu i d. Après avoir été aussi dit à moi et a dit Il est superposition de type orteil Pushor révéler. Personnellement, je suis partiel à superposer, mais utilisez la valeur que vous préférez. Ces contenus, je dévaleurs dire les composants quel routeur à ce qu'ils contrôleront donc avant que nous oublions de le faire, a déclaré les composants de sortie de routeur ionique I. D. 10 Main. Cela les liera tous ensemble immédiatement, à l'intérieur du menu oeil sur un en-tête ionique contenant une barre d'outils ioniques, et à l'intérieur de cela et moi sur le titre, définissez la valeur de titre sur menu juste après l'en-tête ionique à un contenu ionique juste à l'intérieur cela et moi sur la liste. C' est là que le menu sera construit et le fera en itérant sur le tableau à pages . Créez une balise à bascule de menu ionique avec une directive N G quatre. Spécifiez les pages APP, la variable de boucle et que les pages ont l'objet à générer. Comme je l'ai mentionné plus tôt, dit la propriété de masquer auto à faux, sauf si vous aimez regarder les choses disparaissent sans raison apparente. l'intérieur de la bascule placer un élément ionique avec un lien arrondi défini sur le point de la page à votre L. Faire cela transforme automatiquement l'élément en un lien hypertexte, ce qui est assez cool. Assurez-vous que vous obtenez la syntaxe de liaison correcte, comme je le montre ici. Sinon, vous pourriez finir par envoyer vos utilisateurs à un itinéraire littéralement appelé à la page point euro. Est-ce que la direction du routeur à aucun, Ou racine de votre choix. Cela affecte l'animation. Il est subtil, donc je vais vous laisser jouer avec elle et décider ce que vous préférez Si vous voulez un lignes visibles. Séparer vos éléments de menu est que les lignes attribuent à plein ou un mithi après complètement . Je ne suis pas un fan de la façon dont il a l'air, donc je ne choisis aucun à l'intérieur de l'élément et une icône ionique avec son lot défini pour commencer et son icône est définie sur l'icône point de la page AP prêter attention à cette syntaxe de liaison. Ensuite est le titre du menu lui-même, qui mettra en œuvre avec un oeil sur l'étiquette avec le texte lié au titre des pages. Ensuite, nous devons ajouter un bouton de menu à nos deux pages. Et non, ce n'est pas automatique. Donc, d'abord ouvrir la page d'accueil que Kim il à l'intérieur de la barre d'outils ion juste avant le titre ionique, vous devez ajouter un composant de boutons ioniques avec fente égale démarrage, puis un composant de bouton de menu ion. À l'intérieur de cela, vous n'avez pas besoin d'ajouter des icônes de texture. Ceux-ci seront gérés automatiquement pour vous. Ensuite, vous devez faire exactement le même code à l'intérieur de la page de liste. Il suffit de copier et de coller le même bloc. Enregistrez le fichier. Essayez-le. Vous devriez maintenant être en mesure de naviguer entre la page d'accueil et la page de liste avec ces pages. Cela le fait à peu près pour ce chapitre. Alors résumons ce qu'on vient de faire. Si vous voulez ajouter une page, ce sont des choses que vous devez faire. Créez la page, composant lui-même avec le balisage et le code que vous voulez à un itinéraire avec l'U. R L afin que les utilisateurs puissent accéder à la page. Si vous souhaitez que la page dans le menu latéral de vos applications soit ajoutée au tableau de pages APP avec le titre de l'URL et un Nikon et répétez le cas échéant. Nous ajouterons plus de pages au fur et à mesure. Mais pour l'instant, vous avez vu les bases. Si vous voulez un défi supplémentaire, jetez un oeil aux défis de chapitre que j'ai fournis en même temps que ces vidéos de leçon. Si vous rencontrez des problèmes, assurez-vous de laisser quelques commentaires. 18. Appliquer ce que vous avez appris: Maintenant que vous avez terminé cette vidéo, prenez quelques instants pour appliquer ce que vous avez appris à l'application de démonstration. Vous venez de créer la notification de toast que vous avez ajoutée pour indiquer qu'un étudiant a été supprimé positions de la liste elle-même en haut de l'écran, reste visible pendant 3000 millisecondes ou trois secondes, puis disparaît. Il ne peut pas être rejeté manuellement par l'utilisateur, et parfois il peut être un peu difficile à voir dans sa couleur par défaut en position. Votre défi ici est de corriger que changer la durée du toast de cinq secondes à un bouton fermé afin que l'utilisateur puisse fermer le toast plus tôt. Les boutons Toast sont configurés de la même manière que les boutons de feuille d'action. Astuce. Rôle utilisateur plutôt qu'un gestionnaire. Déplacez le toast du bas ou du milieu de l'écran, en utilisant ses attributs de position et choisissez celui que vous préférez. Enfin, vous pouvez changer sa couleur. N' aimez pas mes icônes, dirigez-vous vers les icônes ioniques dot com et trouvez quelque chose que vous aimez mieux. Voici quelques idées que vous pourriez changer l'icône absente et présente à autre chose. L' icône que nous utilisons la liste est assez générique. Vous pouvez ajouter un sexe à l'interface de l'élève, puis ajuster l'icône en fonction de cette valeur au moment de l'exécution. Vous pouvez également modifier la couleur de n'importe quelle icône de l'application. En voici une avance. Au lieu d'un bouton de fermeture sur la notification toast, pourquoi ne pas ajouter un bouton d'annulation rapide avec du code qui effectuera l'action indue typée à déclencher ? Vous avez une fonction de tri ? Fournir un bouton dans la barre d'outils de la liste pour trier les élèves par nom de famille plutôt que par défaut actuel ? J' espère que ceux-ci vous donnent une idée de ce que vous pouvez faire pour rendre votre expérience avec Ionic un peu plus riche jusqu'à la prochaine fois. Merci d'avoir regardé. 19. Créer un projet Xcode avec Capacitor: Bonjour, voici Mike Callahan dans cette section. Nous allons préparer et déployer l'application de démonstration sur l'Apple App Store. Il y a beaucoup à faire, alors allons-y. Il y a certaines conditions préalables que vous devez avoir avant de commencer. Tu as besoin d'un Mac, ce que je suppose si tu regardes ça. Si ce n'est pas , n' hésitez pas à suivre, mais vous ne pourrez rien déployer. Vous devez être un développeur Apple enregistré. Je ne vais pas parcourir tout ce qui est nécessaire pour être mis en place en tant que développeur Apple, mais vous pouvez vous inscrire au développeur dot apple com et enfin vous avez besoin de X Code, que vous pouvez télécharger à partir du Mac App Store. La première chose que nous devons faire est de créer un projet que nous pouvons ouvrir en code X à partir de nos actifs qui ont été créés à partir du projet Ionic, et cela deviendra la base de l'application que nous avons finalement déployé Apple. La meilleure façon de créer soit dans un projet IOS ou Android pour une application Ionic ou pour n'importe quelle application Web , d'ailleurs, est d'ajouter un condensateur à votre projet. Bien sûr, vous pourriez utiliser Cordova, mais c'est tellement la dernière décennie. Si vous voulez la meilleure expérience avec le moins de friction, faites-moi confiance. Vous voudrez utiliser le condensateur afin d'obtenir mon application dans l'Apple App Store. Il doit s'agir d'un projet ex code. Mon application ionique n'est pas une prochaine pourrait projeter. Dans le passé, il n'y avait vraiment qu'une seule façon de le faire, et c'était en utilisant Cordova. Mais aujourd'hui, je vais utiliser le condensateur. Un condensateur est un nouveau cadre ou dans la technologie d'Ionic, qui, curieusement, ne nécessite pas d'ionique. En fait, une exception près que je suis sur le point de montrer, tout ce que je fais après cela n'est pas du tout spécifique ionique. Donc, pour utiliser le condensateur, vous devez en avoir déjà construit certains. Donc je vais le faire avec Ionic build, et je vais créer une construction de production. Techniquement parlant, l'option dash dash prod n'est pas requise ici. Ce n'est pas vraiment nécessaire pour une application de réaction. Ce que je trouve, cependant, est qu'en utilisant Ionic Bill dash dash prod, cela ne fait rien de mal, et cela m'empêche d'avoir à me souvenir de différentes commandes. En fait, dans un petit peu, je vais en faire un script NPM et ensuite je pourrai l'oublier pour toujours. À ce stade, j'ai un site Web construit, une application Web complète à l'intérieur du dossier de construction. Je crois que j'ai un condensateur, mais je ne suis pas positif. La plupart des points d'accès ioniques inclus maintenant par défaut. Mais si tu n'entends pas, alors tu le fais. Si je n'avais pas de condensateur, c'est la commande que je devrais exécuter. Mais comme vous pouvez le voir, il est déjà activé à partir de ce point, peu importe si j'utilise une application ionique, l'application non ionique. Peu importe si j'ai l'habitude de réagir. Vue angulaire Jake Weary Mobile. À partir de là, tout ce que je fais s'appliquerait exactement de la même façon à tous ces éléments. La prochaine chose maintenant que nous avons condensateur, est d'installer la plate-forme de l'Iowa, qui va créer un prochain projet de code pour nous automatiquement. Et nous le faisons avec la casquette MPX. Ajoutez-nous. Et rappelez-vous, MPX est un moyen de nœuds d'exécuter une commande qui n'est pas dans votre répertoire système mais qui est installée quelque part à l'intérieur de vos modèles de nœuds. Et parce que le condensateur est installé localement. Ce n'est pas sur mon chemin de commande normal. Il y a une erreur ici, mais je ne pense pas que ce soit pertinent pour ce que je fais en ce moment, donc je vais l'examiner plus tard. Mais pour l'instant, allons-y et ouvrons. Donc c'est MPX bouchon ouvert IOS. Cela lancera le code X avec le projet. Je vais aller de l'avant et le construire avec le commandement. Être. Je suis curieux de voir si l'erreur de sélection du code X que nous voyons sa ligne de commande est quelque chose que je dois m'inquiéter pour elle. Si c'est juste un problème que je pourrais traiter plus tard, le Built a réussi. Alors maintenant, voyons si on peut l'exécuter. Et si nous le faisons, nous choisirons. Vous pouvez sélectionner un appareil réel ou similaire l'appareil que je vais. Je suis bon avec l'iPhone S C. Alors allons-y et voyons si nous pouvons exécuter l'application là-bas, et il semble fonctionner très bien. Si vous regardez vers le bas X Code ici, vous pouvez voir notre consul afin que tous les messages de journal de points du conseil qui se produisent ou les erreurs qui exécutent des erreurs que nous rencontrons pendant que nous sommes en cours d'exécution apparaîtront ici, donc je devrais être capable d'utiliser c'est comme nous le faisions normalement. L' application semble fonctionner comme prévu. C' est aussi loin que nous avons besoin de creuser dans le condensateur, je vais regarder dans ce sélecteur d'exclusion. Mais cela ne semble pas affecter ce dont nous avons besoin pour le moment. 20. Exécuter l'application de démonstration sur un véritable appareil iOS: Maintenant que nous avons un projet IOS pour l'application de démonstration, c'est quelques choses que je veux faire. Un vrai rapide d'entre eux est d'ouvrir le fichier point de paquet Jason et à un script qui rendra une partie du civil plus facile. Et encore une fois, je tiens à souligner que tout ce que je fais ici s'applique à tous les types d' applications. Celui sur lequel je travaille spécifiquement est une réaction ionique vers le haut. Mais tout ce que je fais sera le même pour et application angulaire ionique ou même une casquette non Diana que vous juste une application Web que vous voulez mettre sur un iPhone. Donc ce que je vais faire ici, c'est que je vais créer un script qui m'aide avec le construit. Si j'apporte des modifications à l'application Ionic, je dois reconstruire l'APP. Et puis je dois synchroniser les changements avec le projet de condensateur. Donc, pour ce faire, je vais utiliser quelque chose que NPM fournit. Et ça s'appelle post. Chaque fois que vous avez un script qui commence par le mot post, suivi d'un autre mot, NPM exécutera ce script juste après le premier script et laissez-moi vous montrer ce que je veux dire. C' est plus facile si je te montre. Donc, je vais créer un script appelé Post Built On qui se synchronisera avec le projet IOS de condensateur . Donc, je viens de nommer ce script post build et il fonctionnera juste après le script de construction. Donc, j'appelle simplement la commande d'évier de condensateurs et cela synchronisera automatiquement les artefacts construits avec tous les projets de condensateur que j'ai. Quelles que soient les plates-formes qui sont installées, donnons cela un essai très rapide. Si je lance maintenant NPM run build, vous verrez qu'il va construire l'application. Ensuite, il sera immédiatement synchronisé avec le condensateur, et vous pourriez voir que la synchronisation s'est produite. Il a même mis à jour certaines dépendances IOS natives. Maintenant, ce que je veux faire dans cette vidéo est de faire fonctionner l'application sur un appareil réel. Dans la dernière vidéo, on l'a fait fonctionner sur le simulateur. Je pense à un iPhone SC, mais ce n'est pas là que nous devons être pour mettre cette chose sur l'APP Store. Donc, je vais ouvrir le projet X Code maintenant en disant au condensateur d'ouvrir le projet de l'Iowa Ce que vous pouvez voir ici, c'est que X Code n'est pas vraiment heureux avec moi en ce moment, parce que avant que nous soyons là-dedans, j'ai retiré mon compte développeur de X Code. Je lui ai aussi dit de ne pas gérer automatiquement la signature, mais nous voulons le faire. Donc quelques choses très vite. Donc, je veux aller de l'avant et lui dire gérer automatiquement la signature. Mais ça ne va pas aimer ça, ça, parce que je n'ai pas de compte. Je veux également changer l'identifiant du bundle car ils ont utilisé celui-ci dans le passé et il doit être unique sur votre compte. En fait, il devrait peut-être être unique au niveau mondial, donc je crois qu'il est unique. Mais si j'essaie de le construire maintenant, ça ne marche toujours pas. Donc la construction a échoué. Pourquoi ? Parce que j'ai besoin de l'équipe de développement. Donc je vais ajouter un compte, et je vais éditer ça pour toi, mais je vais les trouver avec mon écriture développée à la pomme. Et une fois que je suis là, ça suffit ? Voyons voir. Il dit que nous avons un profil géré ex code ici. Que se passe-t-il si j'essaie de l'installer sur mon iPhone ? Permettez-moi de déverrouiller mon iPhone pendant que cela se passe. Je vais aussi lancer le joueur de temps rapide parce qu'il y a une fonctionnalité vraiment cool. Mais vous pouvez dio vous pouvez activer un enregistrement vidéo et cela vous permettra de mettre en miroir votre iPhone. Alors je t'ai laissé te montrer comment il l'a fait encore. Je suis allé déposer un nouvel enregistrement de film et puis je peux sélectionner mon iPhone. Je n'ai aucun contrôle sur l'iPhone à partir de mon ordinateur, mais je peux simplement faire défiler comme un ferait normalement. Ok, code X dit que ça a été construit, mais je ne l'ai pas encore lancé. Laissez-moi donc aller de l'avant et apporter quelques modifications ici aux mises en page de mon bureau. Affaiblir. Faites tout ça ensemble pour que vous puissiez voir ce que je fais comme je le fais. Je vais revenir ici encore. J' ai sélectionné l'iPhone de Michael dans la liste déroulante, et j'ai un connecté via USB et je vais juste appuyer sur lecture. Construit, réussi, toujours un bon signe et dit maintenant qu'il est en cours d'exécution. Donc, nous devrions voir est l'écran de démarrage du condensateur par défaut une icône. Il y a l'icône en bas et vous pouvez voir le journal du consul qui se passe ici. Maintenant, cela fonctionne directement sur mon iPhone, et c'est, comme vous pouvez le voir, exactement la même application que nous avons vu auparavant. C' est cool ? La prochaine chose que je vais faire est d'essayer d'obtenir cela téléchargé sur le magasin APP afin que vous puissiez suivre avec cela. 21. Créer l'application AppStore: La prochaine étape majeure consiste à obtenir l'application construite sur le magasin APP, mais nous avons d'abord besoin d'un endroit pour la mettre. J' ai besoin d'aller à l'APP store Connect pour créer l'application avant de pouvoir la télécharger. Donc, je vais me connecter à l'APP store connect dot apple dot com. Et une fois que je suis connecté, voyons, ça dit que je dois revoir un accord, ce qui signifie que je dois le faire avant de faire autre chose correctement ? Une fois connecté à l'APP Store Connect, m'affiche immédiatement toutes les applications que j'ai actuellement sur l'APP Store. Vous en verrez quelques-uns avec des petits badges rouges et le mot rejeté à côté d'eux. Il y a beaucoup de raisons à cela. Je ne vais pas y aller ici. Sachez simplement qu'Apple est connu pour rejeter des applications parfois pour la liste bizarre des raisons de créer une nouvelle application. Il suffit de cliquer sur le plus et la nouvelle application. Et la première chose qu'il veut savoir, c'est quoi ces quatre ? C' est pour IOS ? MacAllister TVO ? C' est celui de l'Iowa. Je vais l'appeler à 10 heures de danse. Voyons si ça me permet d'utiliser le panneau à ne semble pas s'en soucier. Je suis nous anglais. Mon bundle i d n'existe pas. Donc, j'ai besoin de créer un nouveau bundle i d que je vais faire ici dit spécifiquement que je ne peux pas utiliser l' extérieur ici, mais une danse 10 et l'identifiant du bundle, comme vous vous souvenez peut-être, est com dot rivière marchant un point 10 danse maintenant vers le bas ci - dessous. Il veut que je lui dise quelles fonctionnalités IOS que je cherche. Dans ce cas, je ne cherche aucun de ces, donc je vais simplement les laisser toutes couverture continuer. Et maintenant, l' enregistrement de l'identifiant du bundle I devrait pouvoir revenir ici comme une nouvelle application. Il y a mon identifiant de paquet. C' est une application IOS et il sera à 10 danse. Il est nous anglais dans l'inclinaison est interne. Ça peut être tout ce que tu veux. Je vais aller de l'avant et encore l'appeler à 10 heures d'accès des utilisateurs de danse. Je ne vais pas vivre dans mes utilisateurs. C' est au-delà de ça. Donc tous ceux qui veulent condamner laissent apparemment ce n'est pas comme cette file d'attente. Revenons à une danse de 10 ans. Et à ce stade, on peut s'arrêter. Il y a beaucoup plus à faire ici, mais le but de cela était simplement de l'obtenir afin que nous puissions télécharger l'application. 22. Télécharger sur l'App Store: dans cette vidéo. Mon objectif est de télécharger l'application sur Apple. On ne fera rien avec, mais je veux juste te montrer comment y aller. Une des premières erreurs que j'ai faites et je vais vous faire passer à travers cela maintenant est si vous n'êtes pas prudent. Disons que nous utilisions toujours l'iPhone S e pour l'exécuter et ce que vous trouverez. Ce n'est pas évident à première vue comment faire cela. La première erreur que j'ai faite est de ne pas savoir que l'archive était la commande à utiliser. La deuxième erreur était de ne pas pouvoir comprendre pourquoi elle était presque toujours désactivée. La raison en est l'appareil que vous avez spécifié ici, le schéma actif, comme il est appelé si tôt quand j'ai montré cela en cours d'exécution d'un code suivant, j'ai utilisé le simulateur iPhone s E, et pour le moment je n'ai pas mon iPhone connecté à mon Mac. Vous pouvez soit brancher un appareil réel ou vous pouvez simplement le définir trop générique. Et cet acte seul permettra l'archivage. Allons-y et faisons-le maintenant. J' ai donc pris l'application de condensateur, l' ai construite et l'ai exécutée sur mon iPhone. Je me suis connecté à mon compte apple et tout est automatiquement géré toute la signature. Donc, en théorie, cela devrait juste marcher. Cela peut prendre un certain temps pour tout construire. Je l'ai intensifié ici pour votre commodité, donc vous n'avez pas à vous asseoir à travers tout ça, mais vous devrez vous asseoir quand c'est votre propre projet. Ok, la construction a réussi. Et maintenant, ex Dieu veut savoir ce que je veux faire de mes archives. Notez que le nom de l'application est toujours application, Probablement pas où nous voulons le laisser. Nous ne voulons pas non plus la version 1.0, et je crois que c'est construire un. Je ne vais jamais distribuer cela, mais je vais essayer de montrer le processus exactement comme vous le feriez si vous voulez le distribuer. Donc, l'étape suivante consiste à distribuer l'application. Il y a quatre choix ici. Je vais prendre la valeur par défaut parce que, franchement, je n'utiliserais jamais ad hoc pour installer sur des périphériques arbitraires ou dit ici des périphériques désignés. Je n'ai pas d'entreprise dans laquelle distribuer l'application, ni d'équipe de développement. Je vais aller directement à l'App Store. Vous pouvez soit signer votre application et créer le bundle sans le télécharger sur l'APP Store. Ou vous pouvez simplement aller directement à l'APP Store. Cela peut nous causer des problèmes. J' espère que ça ne le fera pas. On dirait que ça a dépassé ma peur. Mon inquiétude était que je n'avais plus de certificats de signature valides. Je vais prendre les valeurs par défaut. Toutes ces options ont du sens pour quelque chose que vous allez distribuer. Je pouvais voir. Sur la gauche de cette fenêtre sont toutes les applications que j'ai précédemment téléchargées sur le magasin APP et il ressemble à l'une d'entre elles. Deux d'entre eux sont appelés APP. Fait intéressant, cependant, cependant, ils n'apparaissent pas de cette façon sur l'App Store à nouveau. Je vais laisser Apple le prochain faire tout le dur labeur. Je ne vois pas l'intérêt de gérer manuellement ces choses. Peut-être que la peur fait partie d'une grande organisation. Vous pouvez disposer d'un ensemble spécifique de certificats que vous devez utiliser et de profils de périphérique. Ce processus est assez difficile comme il l'est. Je veux que ce soit aussi facile que possible. Ok, tout est fait. Tout a été construit. On dirait qu'il a été signé. Donc maintenant, la seule chose qui reste est de télécharger sur l'APP Store se connecter et il a réussi dans la vidéo. Je vais vous montrer ce qu'on doit faire pour passer à l'étape suivante. 23. Détails de l'AppStore Connect: Ok, qu'est-ce qu'on doit faire pour avoir cette chose dans l'APP Store ? Donc, je vais me connecter à l'app store connect dot apple dot com. Donc, comme vous pouvez le voir, il n'a même pas encore de Nikon, alors allons de l'avant et cliquez dessus et regardez ce que nous avons à faire. Il semble que ce que nous avons à faire est de me fournir beaucoup d'images, les images ou certaines des choses les plus difficiles à faire. Parce que c'est un processus manuel, il y a des moyens de l'accélérer et d'obtenir les captures d'écran de votre application en action, Mlle, sauter les images pour l'instant et juste chercher le reste de cela, vous devez fournir à 170 caractères de texte promotionnel. Ceci est le premier blurb de textes que vos téléchargeurs potentiels verront dans l'APP Store . Vous pouvez également fournir jusqu'à 100 caractères de mots-clés. Il y a tout un art à sélectionner les mots-clés et leurs sites Web consacrés au sujet. Apple va avoir besoin d'assistance. Vous êtes où les gens peuvent aller ? S' ils ont des questions sur le soutien de l'application, vous pouvez également fournir un marketing vous, Earl, qui est un peu différent. Ce sera une fille qui est disponible dans le magasin APP que les gens peuvent cliquer sur pour trouver plus d' informations que vous devez fournir au moins pour soutenir. Tu es malade. Vous n'avez pas à fournir les descriptions marketing You Earl où vous pouvez vous amuser beaucoup . C' est là que vous voulez raconter l'histoire de votre application. Vous avez jusqu'à 4000 caractères pour le faire. Ma recommandation ici est que vous passez beaucoup de temps à construire cette description. Pensez-y. Il s'agit de la page de destination de votre application. Tu dois le vendre. Pourquoi les gens veulent utiliser votre application ? Cette application que nous construisons maintenant ne traite pas de l'application de message IE pour l'Apple Watch. Donc je vais les sauter. Je ne dis pas que ce n'est pas important, mais ce n'est pas pertinent ici. Lorsque vous faites défiler vers le bas, vous accédez à la section de construction. Donc, ce que nous avons ici, c'est que nous devons aller dans, sélectionner une construction de notre application, et apparemment il manque quelque chose et je vais examiner cela, voir si cela va même nous permettre de le sélectionner. Il veut savoir si je enfreint les lois américaines sur l'exportation de cryptage et pour autant que je sache, prendre la participation ne le fait pas. Donc, je vais aller de l'avant et cliquer. Non, nous ne faisons pas d'appels https, donc je vais aller de l'avant et cliquer sur terminé. L' icône de l'application, comme vous pouvez le voir, est celle par défaut du condensateur. Donc, pour corriger cela, nous devrons retourner dans X coat et les icônes correctes que nous voulons là-bas, puis télécharger un nouveau build. On le fera plus tard. Je veux juste passer en revue tout sur l'APP Store Connect d'abord. La version. Je crois qu'il a tout de suite sorti du paquet d'applications. Ici. Vous devez expliquer qui détient le droit d'auteur, qui détient les droits sur l'application et devrait être vous. Nous devons fournir une classification par âge, et vous le faites en entrant dans l'édition et en répondant à une liste massive de questions. Donc je pense que ça va être assez simple pour moi, où ce n'est pas une application violente de quelque sorte que ce soit. n'y a pas d'humour n'est pas un thème mature. Ce n'est pas de l'horreur. n'y a pas de médecine, pas d'alcool, pas de jeu. Certes, aucune nudité n'accède pas au Web du tout, du moins pas actuellement. Il ne fournit pas non plus à l'utilisateur un accès illimité au Web, et il n'y a pas de concours ou de jeu. Il n'est pas fait pour les enfants, donc je ne vais pas cocher cette case. Une fois que vous répondez à ces questions, Apple applique une note. Ce n'est pas un jeu, donc je ne vais pas l'inclure dans Game Center. Cette section suivante est de savoir si l'examinateur de l'humain qui va examiner votre demande une fois soumise, doivent-ils se connecter pour utiliser l'APP est une chose importante à prêter attention, car il est possible que vous ayez comptes protégés par mot de passe sur votre application. On ne saute pas tout simplement celle-là. Les coordonnées sont assez simples. Si votre demande est assez compliquée, vous pouvez joindre de la documentation, des vidéos ou tout autre type d'aide pour faciliter la tâche de la personne qui l'examine. Pour comprendre comment utiliser votre application et ces deux dernières, quand voulez-vous qu'ils publient l'application au public ? Vous pouvez le faire manuellement. Vous pouvez automatiquement pâte, ce qui est la faute, ou vous pouvez spécifier une date. Ne sortez pas avant cette date particulière dans le temps. Et puis, enfin, la publicité Est-ce que votre application utilise ? Ajoute, Est-ce qu'il affiche des annonces et offensent que la façon difficile il ya longtemps que si vous utilisez Google AdSense que Comtesse, dire oui, et si vous dites non et votre application fait vraiment, il va obtenir rejetée. La présence moyenne ne le fait pas. Mais je voulais juste cliquer sur les invités juste pour montrer quelles sont les autres options et exigences . Donc, disons que nous allons diffuser des annonces, mais nous n'allons pas lier APS ensemble afin que les publicités puissent être liées. Je crois que c'est ce que le 2e 1 est. Je n'ai jamais fait autre chose que de simplement servir à, donc je n'ai jamais vérifié ni les juke-boxes et vous devez cliquer sur celui-ci ou vous ne pouvez pas continuer. Et encore une fois, assurez-vous que vous regardez ce texte lu. Si vous répondez mal aux questions et qu'ils le découvrent, ils rejetteront votre application, la retireront du magasin APP, émettront un avertissement et, si vous le refaites, ils risquent d'interdire votre compte entièrement. Laissez-moi rouler le défilement vers le haut. Je ne vais pas vous obliger à me regarder remplir toutes ces choses, mais dans la prochaine vidéo, je l'aurai complètement rempli, et ensuite nous nous inquiéterons des captures d'écran et des aperçus 24. Détails de l'AppStore Connect: Ok, qu'est-ce qu'on doit faire pour avoir ce truc dans l'App Store ? Je vais donc me connecter à App Store connect dot apple.com. Donc, comme vous pouvez le voir, il n'a même pas encore d'icône. Alors allons de l'avant et cliquez dessus et regardons ce que nous avons à faire. Il semble que ce que nous avons à faire est de fournir beaucoup d'images. Pour moi. Les images sont quelques-unes des choses les plus difficiles à faire parce que c'est un processus manuel. Il ya des façons d'accélérer dans obtenir les captures d'écran de votre application inaction peut sauter les images pour l'instant et juste regarder pour le reste de cela, vous devez fournir jusqu'à un 170 caractères de texte promotionnel. C' est le premier blurb de textes que votre téléchargeur potentiel, comme nous le verrons dans l'App Store, vous pouvez également fournir jusqu'à 100 caractères de mots-clés. Il y a tout un art à sélectionner des mots-clés, et il y a des sites Web consacrés au sujet. Apple va avoir besoin d'une URL de support, où les gens peuvent-ils aller s'ils ont des questions sur la prise en charge de l'application ? Vous pouvez également fournir une URL marketing qui est un peu différente. Il s'agit d'une URL disponible dans l'App Store laquelle les utilisateurs peuvent cliquer pour trouver plus d'informations. Vous devez fournir au moins une URL de support. Vous n'avez pas besoin de fournir les descriptions d'URL marketing où vous pouvez vous amuser beaucoup. C' est là que vous voulez raconter l'histoire de votre application. Vous avez jusqu'à 4 mille caractères pour le faire. Ma recommandation ici est que vous passez beaucoup de temps à construire cette description. Je pense que c'est la page d'accueil de votre demande. Tu dois le vendre. Pourquoi les gens veulent utiliser votre application ? Cette application que nous construisons maintenant ne traite pas de l'application iMessage ou de l'Apple Watch, donc je vais les sauter. Je ne dis pas que ce n'est pas important, mais ce n'est pas pertinent ici. Lorsque vous faites défiler vers le bas et vous arrivez à la section de construction. Donc, ce que nous avons ici, c'est que nous devons aller et sélectionner une construction de notre application. Et apparemment il manque quelque chose. Et je vais examiner ça et voir si ça lui laissera nous permettre de le sélectionner. Il veut savoir si j'enfreins les lois d'exportation de cryptage. Et pour autant que je sache, la présence ne l'est pas. Donc, je vais aller de l'avant et cliquez sur Non, nous ne faisons pas d'appels HTTPS, donc je vais aller de l'avant et cliquez sur l'icône de l'application, comme vous pouvez le voir, est celle par défaut du condensateur. Donc, afin de corriger cela devra revenir dans Xcode et ajouter les icônes correctes que nous voulons là, puis télécharger un nouveau construit. Va le faire plus tard. Je veux juste passer en revue tout sur App Store connect. Tout d'abord, la version que je crois qu'elle a sorti directement du bundle d'applications. Ici, vous devez expliquer qui détient le droit d'auteur, qui détient les droits de l'application, et il devrait vous faire, nous devons fournir une classification d'âge. Et vous le faites en entrant dans le montage et en répondant à une énorme liste de questions. Donc je pense que cela va être assez simple pour moi où ce n'est pas une application violente de quelque sorte que ce soit. n'y a pas d'humour, n' est pas un thème mature, ce n'est pas l'horreur. n'y a pas de médecine, pas d'alcool, pas de jeu, certainement pas de nudité. N' accède pas du tout au web, moins pas actuellement, ni ne fournit à l'utilisateur un accès illimité au web. Et il n'y a pas de concours ou de jeu. Il n'est pas fait pour les enfants, donc je ne vais pas cocher cette case. Une fois que vous répondez à ces questions, Apple applique une note. Ce n'est pas un jeu, donc je ne vais pas l'inclure dans Game Center. Cette section suivante indique si l'examinateur, l'humain qui va examiner votre demande une fois soumise, doit-il se connecter pour utiliser l'application ? Et une chose importante à faire attention, car il est possible que vous ayez des comptes protégés par mot de passe sur votre application. Nous ne le faisons pas. Donc je vais simplement sauter celui-là. Les coordonnées sont assez simples. Si votre application est assez compliquée, vous pouvez joindre de la documentation, des vidéos ou tout autre type d'aide pour aider la personne qui l'examine à comprendre comment utiliser votre application. Et ces deux derniers, quand voulez-vous qu'ils publient l'application au public ? Vous pouvez le faire manuellement. Vous pouvez le faire automatiquement, ce qui est la valeur par défaut. Vous pouvez également spécifier une date qui ne sera pas publiée avant cette date et cette heure particulières. Et enfin, la publicité. Votre application utilise-t-elle des annonces lorsqu'elle affiche des annonces ? Et j'ai découvert à la dure il y a longtemps que si vous utilisez Google AdSense, cela compte comme un oui. Et si vous dites non, et votre demande le fait vraiment, elle sera rejetée. Je veux dire, la présence ne le fait pas. Mais je voulais juste cliquer sur oui, juste pour montrer quelles sont les autres options et exigences. Donc, disons que nous allons diffuser des annonces, mais nous n'allons pas lier des applications pour que les publicités puissent être liées. Je crois que cela avec la seconde est je n'ai jamais fait autre chose que de simplement le servir, donc je n'ai jamais vérifié ce sont les deux cases et vous devez cliquer sur celle-ci ou vous ne pouvez pas continuer. Et encore une fois, assurez-vous de regarder ce texte rouge. Si vous répondez correctement aux questions et qu'ils le découvrent, ils rejetteront votre application, retireront de l'App Store, émettront un avertissement et, si vous le refaites, ils risquent d'interdire complètement votre compte. Laisse-moi faire défiler vers le haut. Je ne vais pas vous obliger à me regarder remplir toutes ces choses. Mais dans la prochaine vidéo, je l'aurai complètement rempli. Et puis nous nous inquiétons pour les captures d'écran. Et au précédent. 25. Icône et éclaboussures d'application: Allons de l'avant et obtenir l'icône de l'application et l'écran de démarrage en prenant soin de, ce n'est pas vraiment difficile à faire. Et je vais vous montrer une façon assez simple de le gérer. De retour dans les jours pré condensateur quand tout le monde utilisait Cordova. Cordova avait une option de ligne de commande pour générer des écrans d'icône et de démarrage à partir d'une image source. J' essaie de rester loin de tous les outils Cordova. Maintenant, assez intéressant, l'outil que je vais utiliser s'appelle les rayons Cordova, que vous pouvez voir ici. Et j'ai le sentiment qu'ils vont le renommer bientôt. C' est un outil de l'équipe Ionic qui tire un peu dans la fonctionnalité que la ligne de commande Cordova Easter fournit. Et il fait tout localement plutôt que d'envoyer le fichier sur le web. Ok, faisons construire ces images. Ce que j'ai à gauche est le dossier d'une ressource qui se trouve juste à l'intérieur de ma racine de projet. C' est là que les images source vont vivre. Sur la droite, vous pouvez voir que le simulateur iPhone SE est en cours d'exécution avec l'icône du condensateur par défaut visible. Et si je lance l'application, vous pouvez rapidement voir l'écran de démarrage. Et c'est vraiment juste une image blanche avec le logo du condensateur au milieu. Cela semble être le cas pour beaucoup d'application iOS. Alors je vais m'en tenir à ça. Ce que j'ai fait, c'est que j'ai téléchargé un fichier PNG à partir d'un site appelé pixabay.com. C' est simplement un presse-papiers avec une liste de contrôle et un crayon. Apple recommande fortement de ne pas utiliser la transparence dans vos icônes. Et si vous regardez les icônes qui sont visibles dans le simulateur, vous pouvez voir ce qui se passe. Donc, l'icône de fichiers, icône de présence dans l'icône Safari ont tous des fonds blancs, mais la plupart des icônes dans iOS semblent ne pas le faire. Mais pour la plupart, vous voulez que votre icône soit la couleur que vous attendez à ce qu'elle soit. Donc, ce qui va se passer, c'est parce que j'utilise un fichier PNG avec transparence. Ces zones transparentes seront blanchies et je suis d'accord avec ça. Laissez-moi fermer celui-ci et l'écran de démarrage est similaire. C' est la même image exacte centrée sur une image beaucoup plus grande. La taille de l'image est de 2732 par 2732, ce qui est la taille recommandée ou requise en fait. D' accord. Je vais rester en ligne de commande pour l'instant. Maintenant que je l'ai fait, je vais aller de l'avant et installer le paquet en tant que dépendance de développement pour ce projet. Ensuite, je vais dire à Cordova augmenter pour construire les images que je cherche. Nous pouvons l'exécuter avec un simple et Px carré sur élever iOS pour lui dire quelle plate-forme cibler. Ignorer la configuration car je n'ai pas de fichier de configuration qui fait partie d'une application Cordova, et pour copier les fichiers générés dans mon dossier iOS, mon projet iOS Xcode. Alors allons-y et faisons-le. On va voir quelques avertissements. Mais sinon, cela va arriver assez rapidement. C'est fait. Je n'ai rien dit de tout ça. Donc, si nous allons dans le dossier iOS et voyons ce qu'il a été construit. Il a créé l'icône pour nous et plusieurs tailles et un tas de différents écrans de démarrage. Et vous pouvez voir si vous regardez attentivement que je n'ai pas tout à fait centré, mais je pense que personne ne s'en souciera. Une chose importante à noter est que l'utilitaire de levage Cordova supposait que je l'exécutais à partir du dossier racine de mon projet. Il a également supposé que l'icône et l'écran de démarrage, ou dans un dossier appelé ressources à ce niveau racine, que l'icône est appelée icône dans l'écran de démarrage est appelé splashing et ce sont tous les deux des fichiers PNG. L' avertissement que vous voyez ici est parce qu'il y avait un canal alpha, ce qui signifie qu'il y avait de la transparence. Mais toute la transparence comme mentionné, sera rempli de blanc. Je suis cool avec ça. Alors maintenant, voyons à quoi cela ressemble et les changements qui ont été faits. Nous avons simplement besoin d'ouvrir le projet Xcode, ce que nous pouvons encore faire avec NP x cap, ouvrir iOS, et qui lancera Xcode pour nous à ce stade, tout ce que nous avons à faire est d'exécuter l'application et de la laisser déployer sur le simulateur. Xcode aurait déjà dû récupérer tous les actifs pour nous. Donc, faites attention à l'écran du simulateur pendant que j'appuie sur lecture, vous devriez voir le changement d'icône et puis le dernier écran devrait apparaître. Et c'est vraiment tout ce qu'il y a. J' ai toujours besoin de télécharger cette version du code sur l'App Store, mais c'est exactement le même processus que nous avons vu il y a quelques vidéos. Donc, je ne vais pas revivre ça. 26. Matériaux bonus: Mais avant de partir, permettez-moi de quelques minutes de plus à chaque fois. Je sais que votre temps est précieux et j'essaierai de le rendre utile. Je maintiens un blog sur walking river.com. C' est là que je publie de nombreux problèmes et solutions que je rencontre en tant que développeur de logiciels professionnel, vous pouvez toujours me joindre, me suivre et partager vos commentaires sur Twitter. Ma poignée est à Walking River. Si vous souhaitez voir les livres sur lesquels je travaille, veuillez visiter ma page d'auteur sur Amazon.com slash auteur slash M Callahan. Vous pouvez également trouver mon ebook et le catalogue de cours sur la route de la gomme. Devriez-vous préférer un format de fichier différent de celui fourni par Amazon ? Enfin, la plupart de mes cours sont également disponibles sur Udemy. Revenez souvent pour connaître les dernières offres de cours. Encore une fois, c'est mon Callahan. Merci d'avoir regardé.