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

1. Introduction - Commencez ici: 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 la réaction, allant de zéro code jusqu'à l'APP en place portes. Tout au long de ce cours, nous allons couvrir les aspects importants du développement avec Ionic et réagir. 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 ionique bonjour va sauter directement dans la structure de l'application , expliquant comment une application ionique disposé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 les navigateurs Web et les appareils. Nous l'utiliserons pour maintenir les données d'application persistantes qui survivront au redémarrage de l'appareil Si vous n'avez pas besoin de fonctionnalités matérielles spécifiques autres que celles disponibles via le navigateur Web , vous pouvez choisir de libérer votre application est un Web progressif ou PW A. Alors que le Web devient de plus en plus capable chaque jour, certaines fonctions nécessitent toujours l'accès à l'appareil sous-jacent sur lequel votre application fonctionne. 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 des 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é. J' utilise et recommande Visual Studio Code B s code est un environnement de développement libre et open source et multi-plateforme de Microsoft, conçu à partir du travail de base avec toutes les technologies seront à l'aide. Bien sûr, vous êtes libre d'utiliser n'importe quel outil avec lequel vous êtes à l'aise. Encore une chose. Je dois dire clairement que ce n'est pas un cours sur la réaction. Alors que je vais souligner l'aspect de base de la réaction comme ils se rapportent à Ionic, je ne vais pas aller 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 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 qu'il installé la version 6.3, et ce sera important dans un moment pendant le reste de ce cours, je vais s'en tenir à 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. Ça va me demander un nom. Essayons. Bonjour, Ionic. Je suis partiel au violet, donc je vais choisir le violet. Je veux un modèle de menu latéral semble assez simple et il réagit par défaut. Alors continuons. Donc, parce que j'avais déjà un compte, j'ai pu me connecter rapidement. Je l'ai ajouté 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, de retour 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, donc tu n'as 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 faisons cela avec un service ionique, et vous devriez être conscient de cela. La plupart des choses que Ionics Eli force c'est simplement la déléguer à l'allié maritime de la technologie que nous utilisons dans ce cas. Réagissez pour que vous puissiez voir là. Il réagit. Les scripts de tiret démarrent, et il ouvre automatiquement une fenêtre de navigateur à l'aide de mon navigateur par défaut à l'hôte local Port 8100 . L' application de la force bâtie ressemble en quelque sorte à 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 d'application Ionic pour intégrer cette application dans le segment suivant. On va jeter un coup d'oeil au code derrière ça et voir comment tout est assemblé. 6. Introduction douce à TSX: avant d'ouvrir le code. Je veux parler de la TSX un instant. Les composants React sont écrits à la TSX. Au moins, les composants Ionic React T s X sont comme JSX, mais avec typescript en ce moment, cela ne vous dit probablement pas grand-chose quand vous le voyez. J' espère que cet intact ne sera pas trop choquant. Si vous n'avez jamais vu JSX ou TSX auparavant, cela peut prendre un peu de s'habituer à JSX Et par extension, TSX est une extension de JavaScript qui vous permet d'inclure le balisage HTML directement dans votre code pour vous montrer de quoi je parle. Considérez cet extrait de code. Nous commençons par un tableau de fruits qui devrait sembler assez normal pour tous ceux qui connaissent JavaScript. Mais alors regardez ce qu'il fait et revient immédiatement. HTML. Donc, nous avons un div contenant un H un paragraphe, et chacun deux et une liste Norden à l'intérieur. Cette liste ordonnée ennuyeuse de choses devient un peu plus intéressante. Nous avons référencé le tableau de fruits et appelons la fonction de carte de tableau. La fonction de carte prend une fonction de flèche qui accepte chaque élément comme il itère sur le tableau. Ici, j'attribue cet élément de tableau. La lettre F I ne recommande pas normalement de nommer les variables de cette façon. Mais quand j'ai une seule fonction de flèche avec une seule ligne de code comme je le fais ici, je pense que c'est assez évident ce qui se passe. Ainsi, chaque élément de la gamme de fruits est cartographié à un allié avec le fruit de chaque élément de la pluie. Remarquez cependant les accolades entourant l' appel à la carte de points de fruits. C' est une indication à la TSX que nous allons exécuter du code ici. Pensez-y essentiellement comme une fonction de remplacement. À ce stade, à l'intérieur du puits, ce bloc va être remplacé par l'exécution de ce qui est à l'intérieur. La même chose se passe à l'intérieur de l'allié. Plutôt que d'afficher une valeur constante, nous allons évaluer la valeur de F et remplacer cette expression d'accolade actuelle par la valeur. À ce stade, je vous promets que cela deviendra beaucoup plus clair au fur et à mesure que nous irons. Je ne voulais pas que vous voyiez le code du réacteur ionique pour la première fois et pas au moins avoir eu cette brève explication. Maintenant, lançons le code V s et jetons un oeil à ce que nous avons affaire dans l'application rial. L' application ionique a été générée force er 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 du code Ionic React que les pommes ou tout simplement nous a donné 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 est mis en place dans la chambre, continuons et regardons quelques-uns du code qui a été généré pour nous. Le premier arrêt sera la configuration 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 intégrations est comme Cordova ou condensateur, et vous pourriez voir le type de réaction suivant. Regardons le fichier point d'index ts X. C' est le point d'entrée programmatique de l'application. Vous pouvez voir que nous importons Dom réaction, et ce qui réagit Dom est une bibliothèque de haut niveau qui fournit des méthodes pour le modèle d' objet de document HTML . Et ça est appelé de haut. La plupart du niveau de l'application. La seule chose que nous faisons avec c'est appeler la fonction de rendu. La fonction de rendu prend deux paramètres. Il faut un objet pour être rendu. Dans ce cas, c'est l'APP qui a marqué le composant APP. Le deuxième paramètre est un élément dans la page dont la route des idées Donc ici, nous passons juste un élément get JavaScript normal par I d fonction. Alors maintenant, où est cet élément racine pour trouver qui est ici dans l'index public html point en haut,à l' haut, intérieur de la balise head. Il y a beaucoup de méta-tags là-dedans que l'équipe Ionic a passé beaucoup de temps à se débrouiller . Je ne te recommande pas de t'en mêler. Donc ici, dans le corps, voici la pièce importante. Voici la route I D que nous recherchions. C' est la seule chose dans le corps. Donc, si vous réfléchissez un instant, nous allons obtenir ce développement et le remplacer par le composant APP. Maintenant vous demandez probablement, Où est l'AB Caponi ? Le composant APP est dans app dot tsx app dot ts X importe beaucoup de choses. Nous allons sauter toutes les importations et faire défiler simplement vers le bas jusqu'à l'endroit où le composant lui-même est défini. Et c'est là que l'application commence vraiment. APP est défini comme une fonction de flèche constante du type réagir point fc. Alors, de quoi s'agit-il ? FC est abrégé pour le composant de fonction. Fondamentalement, c'est une fonction qui retournera du HTML. Parcouvrons ce fichier dans cette fonction pour voir ce que cela signifie. La première chose que nous voyons est un appel à la fonction d'état d'utilisation. C' est un crochet. Si vous avez entendu parler des crochets de réaction qui font rage, c'est ce qu'ils sont. Votre état vous permet d'ajouter une surprise surprise d'état aux composants de la fonction autrement sans état . Il prend l'état par défaut comme paramètre. Dans ce cas, nous passons une force vide. Il retourne un tableau contenant deux éléments. Le premier élément est l'objet contenant notre état. Dans ce cas, il s'agit de la page actuellement sélectionnée, par défaut à une force vide. Le deuxième élément du tableau est une fonction que nous pouvons utiliser à l'intérieur de l'orteil du composant. Modifiez cet état lorsque vous utilisez des crochets pour gérer votre état, il est conseillé. Ne changez jamais directement la variable d'état. Ainsi, lorsque vous regardez ce code, vous ne verrez aucune affectation à la variable de page sélectionnée. Considérez-le en lecture seule, même si ce n'est techniquement pas. Alors, qu'est-ce qui est retourné par cette fonction ? Et pour cela, je veux superposer le code au-dessus du navigateur afin que nous puissions voir ce qui est rendu avec chaque pièce. Eh bien, d'abord, nous avons une application ionique. L' application Ion est le composant ionique racine que toutes les applications doivent utiliser. A l'intérieur de ça, nous n'avons pas de routeur de réaction ionique. Il s'agit d'une enveloppe mince Ionics autour du routeur React standard. Les routeurs React. Qu' est-ce qui vous permet de créer des applications multipagées avec des transitions de page riches dans ce qui est vraiment une application de page unique à l'intérieur de l'œil sur le routeur React ? On n'a pas de douleur divisée en ions, je crois. Dans le dernier clip vidéo, j'ai fait référence à une vue fractionnée de conception. nom technique du composant est que je possède la douleur fendue. C' est la mise en page qui vous donne ce menu de la barre latérale qui s'effondre automatiquement maintenant à l'intérieur de la douleur de division elle-même. Nous avons ce menu et vous pouvez voir que le menu a un attribut appelé Page sélectionnée et nous le définissons sur la valeur de notre page sélectionnée. La variable d'état est un frère immédiat du composant de menu. Nous avons une prise de routeur ionique. C' est donc là que le contenu de votre page apparaît. Le menu est désactivé à gauche, et la prise du routeur ionique contient le reste de votre application de votre contenu. Et juste à l'intérieur de cela, nous définissons quelques itinéraires. Pensez à une route comme un euro. Donc donné un chemin qui commence par une page de barre oblique, suivi d'un autre air d'identification et le deux-points signifie qu'on va appeler ça identifier son nom, peu importe ce qu'il y a vraiment là. Donc, ce pourrait être la page de la boîte de réception barre oblique sur les livres. Corbeille, etcetera passaient également à la fonction Route Orender et la fonction Orender signifie simplement que voulons-nous arriver lorsque cette route est appariée et essaie de rendre ? C' est donc aussi une fonction étroite. Il prend un ensemble de propriétés à l'intérieur de cette fonction que nous appelons ensemble page sélectionnée. Rappelez-vous, nous ne voulons pas définir la page sélectionnée directement en écrivant à la variable, Nous appelons donc la fonction d'état qui nous a été renvoyée. Donc, nous avons défini la page sélectionnée sur le paramètre U. R L, qui a été passé à travers les accessoires de cette deuxième partie de la route, qui est appelé nom. Et puis ce que nous faisons est que nous retournons un objet de page ou le composant de page passant dans toutes propriétés qui nous ont été données en utilisant cet opérateur de propagation. Ce que cela signifie, c'est quelles que soient les propriétés qui ont été passées à notre route, nous allons passer à travers et rendre ce composant de page avec les mêmes propriétés et ensuite exactement égal. Vrai, signifie simplement que nous ne correspondons à cette route que si c'est vraiment une barre oblique de page d'un autre mot . Cela aura plus de sens si nous commençons à modifier ces choses. Enfin, nous avons une route appelée slash. Il s'agit de la route par défaut. Si rien d'autre n'a entré, allaient simplement rendre une redirection vers la barre oblique de la page slash boîte de réception. Alors qu'est-ce qu'une page exactement ? Comme vous pouvez le deviner, c'est un autre composant. Jetons un coup d'oeil à la page dot ts fichier X. Il se compose d'un composant de fonction qui renvoie un tas de Marco ionique. La principale différence ici est que le composant de fonction est un générique des accessoires de composant de route de type , qui est lui-même un générique. Ces aération ces crochets d'angle. Si vous n'êtes pas familier avec ce style particulier, C'est ce qui permet au routeur de passer ces paramètres de route. Dans ce cas, il s'attend à ce que les accessoires de route contiennent juste un nom qu'il passe dans la fonction flèche comme correspondance de valeur. Regarder en bas un peu presque caché dans cette jungle de composants ioniques est un conteneur d'exploration . Je vais faire un clic droit dessus et choisir Aller à la définition, et je vais sélectionner ce double clic. J' aurais pu aussi appuyer sur F 12 sur mon clavier. Le conteneur explore est un autre composant de fonction personnalisé, qui accepte également certains accessoires de conteneur. Celui-ci est beaucoup plus simple, cependant, cependant, et qu'il ne contient que du HTML simple avec seulement une seule expansion variable à l'intérieur de cette technologie forte. Enfin, jetons un coup d'oeil au menu près du haut. Le menu définit une interface de page APP utilisée pour contenir des propriétés communes sur une page telle que ses icônes U R L ont droit en dessous de cela, c'est un tableau de pages, donc maintenant vous voyez d'où elles viennent. Ensuite, nous avons cette liste d'étiquettes que nous pouvons voir dans le menu, et juste en dessous c'est le marché. Le menu lui-même est construit avec un oeil sur la liste un composant conçu pour formater les éléments dans, Eh bien, vous avez deviné une liste. La note ionique fournit ce qui semble être un en-tête. Ensuite, nous arrivons à un manteau intéressant. La fonction de carte de tableau est appelée sur le tableau de pages APP pour le transformer en un Siris of ion menu bascule composants, qui sont utilisés pour basculer un menu ouvert ou fermé à l'intérieur de l'œil sur le menu. Toggle n'est pas un élément ionique, qui est un autre composant ionique, qui est utilisé pour regrouper d'autres composants ensemble dans ce cas, et je sur l'icône et une étiquette ionique, qui devraient tous deux être assez explicatifs. L' élément ion a un attribut de liaison de routeur défini sur la valeur des pages en cours. Vous êtes dehors. Cela indique au routeur Ionics de basculer vers cette page lorsqu'il est cliqué. Une autre chose que je veux souligner sur l'élément ion est un attribut appelé Nom de classe qui est défini sur la valeur d'un code qui est exécuté. Alors rappelez-vous la page sélectionnée de l'application dot ts x. Eh bien, c'est ce que nous faisons avec elle. Ce que ce code dit est, si les pages sélectionnées sont égales au titre de la page, alors nous allons définir le nom de la classe sur le mot sélectionné. Sinon, on va le mettre à une chaîne vide. Et cette classe de ce qui est responsable de mettre en évidence les éléments de menu sous le menu est une autre liste générée de la même manière est le menu. Les différences. Il utilise le tableau d'étiquettes et ne contient aucun lien de routeur. Maintenant, avant de terminer complètement, je veux faire quelques choses amusantes qui feront dans la prochaine vidéo. 8. Une autre chose: Maintenant, avant de quitter cette application Hello Ionic, faisons quelques choses amusantes. Comment pensez-vous pouvoir personnaliser cette liste de pages ? S' il a dit, modifier les pages de l'APP autour, donnez-vous une tapotement 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. Mettons-le juste entre la boîte d'envoi et les favoris. Donc, sélectionnons l'objet boîte d'envoi, Copier et coller une nouvelle version juste après. Maintenant, changez la deuxième incidence des éléments de descente de la boîte d'envoi mot et changez la barre oblique ou l deux barre oblique envoyée. Laissons les deux icônes seules. Microsoft Outlook utilise cette icône d'avion papier pour les éléments envoyés. Alors au lieu de cela, allons de l'avant et sauvegardons le fichier. En ce moment, c'est là que ça s'amuse. Dès que vous avez enregistré ces modifications, l'application sera reconstruite automatiquement et le navigateur sera rechargé pour refléter ces modifications. Mais maintenant, nous avons un problème. On a deux pages avec la même icône. Allons de l'avant et modifions l'icône de la boîte de sortie deux albums contour pour IOS et albums Sharp pour MD et pour votre utilisation code studio visuel, ce que vous verrez est qu'il reconnaît automatiquement ceux identifier IRS et propose de les importer pour vous. Et cela fait partie du code fortement typé qui laisse entendre que vous obtenez de Ionic React et encore nous avons enregistré la page, l'icône change de manière appropriée. Que croyez-vous que se passera si vous cliquez maintenant sur le nouveau menu envoyé ? Nous n'avons pas créé de nouvelle page ou de nouvelle route. On va avoir un 404 ? Non. Le composant de page sera rendu avec son nom défini sur la partie nom de l'itinéraire, qui est envoyé. C' est parce que le composant de page lui-même est un objet assez générique. Toutes les pages ne seront pas aussi propres et vous permettront de la réutiliser comme ça. Mais nous allons utiliser ce modèle dans les chapitres ultérieurs 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 de réaction ionique et même faire quelques petites personnalisations. Alors allez-y, réjouissez-vous de votre nouveau pouvoir. Jouez un peu d'ici maintenant et la prochaine leçon 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 la nouvelle application: 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. 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 coup d'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 ce que 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. Images des biens publics. Appelez ça class dot J pic open home dot tsx et supprimez tout à l'intérieur de l'oeil sur balise de contenu. Modifiez la valeur à l'intérieur de la balise de titre ionique à partir de la page d'accueil Ensuite, supprimez l'importation du composant conteneur d'exploration en haut du fichier pendant que nous y sommes. Supprimons le composant lui-même, qui peut être trouvé dans le dossier des composants source. Supprimez les fichiers TSX et CSS dans le contenu ionique maintenant vide d'un composant de carte ion. Si vous utilisez le code V s, il devrait proposer d'importer les composants automatiquement pour vous. Si ce n'est pas le cas, vous devrez vous assurer de le faire vous-même en important chaque composant que vous utilisez à partir barre oblique ionique réagir à l'intérieur de la carte ionique à une balise d'image HTML standard avec la source définie fichier que vous venez de télécharger, qui devrait être des images d'actifs, Classroom Dodge, APEC. Pour être un bon citoyen, vous devez également fournir un attribut d'autel. J' utilise le mot « salle de classe ». Apparemment, il n'a pas importé de carte ionique, donc je vais le faire. Maintenant, arrêtons-nous 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émarrer. Donc 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 également essayer de garder le navigateur ouvert et d'avoir tout tourbillonner en plein écran ensemble, 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 qu'à un sous-titre de carte ion avec le texte Classroom manager de fréquentation 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 et recherchez unclos html tax. Dans mon cas, je laisse le NPM démarrer mourir, donc je dois le redémarrer après l'étiquette de fermeture des en-têtes de carte ion à une étiquette de contenu de 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 attaque liée à un routeur ionique avec deux attributs et des attributs H ref définis pour barre oblique et un attribut de direction arrondie défini pour avancer à l'intérieur de cette balise. Assurez-vous de mettre du texte. Sinon, vous ne verrez pas de lien. Cela créera un lien hypertexte à l'intérieur de la carte qui, lorsqu'il est cliqué, nous mènera à la page de liste. Et son animation sera une animation en avant, étant définie par la plate-forme elle-même, soit Android ou IOS. En enregistrant la page, vous pouvez voir le lien rendu. Cependant, en cliquant dessus, vous accéderez à une page blanche. 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 nous attaquer à cela maintenant, mais créer ce qui sera sans doute la page la plus compliquée de l'application dans l' éditeur de code ou au terminal. Votre choix. Créez un nouveau fichier dans le dossier Pages appelé roster dot tsx. A l'intérieur de ce fichier commencera par créer la page la plus simple que nous pourrions imaginer dans n'importe quelle page que nous créons. Nous devons d'abord importer l'espace de nom de réaction à partir de la bibliothèque React. Ensuite, nous avons besoin d'un nouveau composant fonctionnel. Réagissez FC pour la liste courte appelée pour représenter la page. Un composant fonctionnel doit renvoyer un peu de repère, Donc pour l'instant, nous allons juste retourner un paragraphe. Ensuite, pour réagir, pour pouvoir rendre la page, elle doit être exportée, elle doit être exportée, ce que nous faisons avec la ligne de liste d'exportation par défaut. Maintenant, tout autre module peut importer le composant de liste. Si vous pensez que cela permettra à la page de la liste de se rendre lorsque vous cliquez sur le lien sur la page d'accueil, nous n'aurons pas besoin de l'importer dans l'application et de fournir un itinéraire ouvert apt à la TSX. Nous l'avons vu lors de notre visite guidée dans le dernier chapitre. Le routage dans cette application est beaucoup plus simple que nous l'avons vu auparavant. Et pour moi, plus simple, c'est mieux. Ajoutons un nouvel itinéraire en ajoutant une autre balise d'itinéraire après la barre oblique d'accueil. Le chemin doit être une liste de barres obliques. Le composant doit être la liste. Assurez-vous que le composant de liste est importé en haut de l'encartement de fichier. Exact à vrai. Maintenant, chaque fois que nous demandons l'itinéraire de la liste, la page de liste sera affichée. Enregistrez le fichier et essayez-le. Le lien fonctionne maintenant. Ce n'est pas une page, mais nous allons corriger ça dans un peu. 13. Crochets d'étudiant personnalisés: avant d'étoffer la page de la liste, nous devons amener certains élèves à afficher plus tard voudront lier la liste en un jour pour stocker quelque sorte, mais nous n'avons pas besoin de le faire juste pour obtenir des données affichées sur la page. Pour cela, je vais utiliser un crochet de réaction personnalisé, comme nous l'avons vu lors de la visite guidée. React Took est une fonction JavaScript simple qui renvoie deux valeurs à l'intérieur d'un tableau plutôt que percé dans le fonctionnement de Hook. Nous pouvons simplement envelopper une normale avec un tableau de données et l'exposer à notre page de liste. Cela aura plus de sens est que nous le construisons, créons un nouveau fichier dans la source appelé Student Dash hook dot ts. A l'intérieur de ce fichier va créer n'importe quel newme, une constante d'interface et une fonction. Ce e newme est une commodité qui utilisera pour marquer un étudiant est absent ou présent. Ensuite, nous allons créer un objet étudiant en tant qu'interface. Rappelez-vous, les interfaces n'existent pas en JavaScript et disparaîtront complètement lors de la construction. Leur seul but est pour nous d'activer l'achèvement du code de vérification du type de paramètre et d'indiquer un sens à l'intérieur du code. Entrez ces points d'interrogation sur la plupart des champs indiquant que ces talons sont facultatifs. Donc, pour créer un objet étudiant valide, je dois fournir au moins un I.D. I.D. un prénom et un nom de famille. À ce stade, je ne sais pas tout ce qu'un objet étudiant devrait contenir, mais ces champs devraient suffire à nos fins. Maintenant, nous allons créer 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 le crochet personnalisé. La fonction que j'exporte sera appelée « use students ». Par convention, tous les crochets commencent par le mot utiliser à l'intérieur de la fonction. J' appelle simplement réagit à votre fonction d'état, en passant le tableau d'étudiants simulés comme sa valeur par défaut, retournant indirectement ce que vous nous fournissez. C' est trompeuse simple, mais c'est seulement parce que ça ne fait pas grand-chose. Maintenant, revenons dans la page de liste et en faire usage 14. Liste de apprenants: retour dans la page de la liste. On doit trouver une référence à l'hameçon. Nous venons de créer juste à l'intérieur de leur fonction de liste à une ligne pour l'appeler Remember you Students est essentiellement un passage à travers pour réagir. Utilisez la fonction d'état, mais il enveloppe et cache ce tableau fictif. Notre page de liste ne se fiche pas d'où viennent ces étudiants, alors nous ne le dirons pas. Maintenant que nous avons des étudiants, listons-les à l'écran. Supprimez cette balise de paragraphe et à l'œil sur la balise de page. N' oubliez pas que toutes les pages Ionic React ont besoin d'une balise de page oeil sur son composant racine. Comme toujours, lorsque nous entrons ces quelques balises de composant suivantes sur la page, vous devez vous assurer qu'elles sont importées depuis Ionic React. Ensuite, nous allons créer l'en-tête de page dans certaines étiquettes d'en-tête ionique. J' ai été une balise de barre d'outils ion à l'intérieur de ça dans une balise de titre ionique. A l'intérieur de ce mettre le texte des titres ioniques à la liste. J' espère que vous trouverez l'en-tête Ion est familier, comme nous l'avons vu sur la page d'accueil et aussi pendant la visite guidée immédiatement après l' en-tête ionique . Nous avons besoin d'une teneur en ions à l'intérieur de la teneur en fer. 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 à son tour, rabbin sur les étiquettes haut sur les boutons, icônes ioniques, champs de saisie de formulaire 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 la suppression du code. Immédiatement à l'intérieur de la liste des ions, affaiblir itéré sur le tableau des étudiants en utilisant la fonction de carte de tableau. Nous devons fournir une fonction étroite à la carte qui décrira ce que nous voulons faire avec chaque élève dans le tableau. Alors pensez-y de cette façon. Nous affichons une liste de longueur inconnue, mais chaque élément du tableau sera affiché en utilisant le même modèle à l'intérieur des cartes. La fonction Aero retournera un peu de repère. Nous commencerons avec l'élément ionique coulissant élément ionique 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 encapsulera l'ensemble de l'élément de la 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 et sœurs, a déclaré la fente d'icône. Attribut pour commencer et l'attribut icône pour contour de personne et encore, n'oubliez pas d'importer vos icônes ou elles ne fonctionneront pas à l'intérieur de l'étiquette ionique. Liez un texte aux élèves en prénoms 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, c'est pour le président, et on va le mettre sur l'icône I. Le second doit être affiché lorsque l'étudiant est absent. Donc pour celle-là, utilisons le contour de l'œil, qui est un contour d'un œil avec une ligne à travers lui. La façon dont nous rendons les icônes conditionnellement est d'envelopper toute la balise d'icône ionique et un script Java . Expression logique. Comparez le statut des étudiants à la valeur de présent ou absent, suivi de la logique et de l'opérateur lui-même, suivi de l'icône ionique. Les règles de court-circuit de JavaScript empêcheront la seconde moitié de l'expression d' être évaluée si la première moitié est évaluée à faux noter qu'il est tout à fait possible que le statut des étudiants ne soit ni 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'article, qui signifie que lorsque nous le glissons vers le début de l'article, peu apparaissent à l'intérieur de cette étiquette à une option d'élément unique Tech. 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 simplement dit la valeur des balises au mot supprimer, enregistrer le fichier et actualiser la page. À ce stade, la seule interactivité est un curseur lui-même. Cliquez donc sur un élément et faites-le glisser 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 figurent pas dans la liste. 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 étudiant dans la liste des yeux. Nous pouvons soit créer le menu d'abord ou le bouton pour lancer le menu. Tout d'abord, créons le menu d'abord. Pour cela, nous allons utiliser une feuille d'action ionique. Dans Action Sheet est un menu qui affiche un peu comme une boîte de 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 qui peut être destructeur ou annuler. 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 appareils IOS. Boutons 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, supprimer un étudiant ou annuler le action et ne rien faire. Pour ce faire, nous devons faire un peu de configuration First dans la liste dot tsx. Nous allons avoir besoin d'un nouveau crochet et d'un objet pour représenter un élève vide pour contrôler action qu'elle apparaîtra en haut de la composante fonctionnelle. Créer un nouvel objet étudiant nommé étudiant Empty Student, mais a dit qu'il est trois champs obligatoires pour vider la chaîne. Ensuite, appelez la réaction. Utiliser la fonction d'état. Passer l'objet étudiant vide comme nom par défaut. Les valeurs de retour Étudiant sélectionné et définit l'étudiant élu Il s'agit d'un crochet qui nous permettra de garder une trace de l'étudiant sélectionné et nous aider à montrer et cacher la feuille d'action a besoin. Suivant. Créer deux fonctions pour gérer l'événement click Entré le congé Un étudiant à partir d'une liste. Le 1er 1 est Supprimer l'étudiant et le 2e 1 Appelons Click Student Supprimer l'étudiant filtrera l'étudiant sélectionné à partir du tableau actuel d'étudiants et ensuite passé cela pour définir les étudiants. La fonction. Cliquez sur l'étudiant appellera les ensembles d'étudiants élus passant cet étudiant sélectionné. Maintenant, il est enfin temps pour nous d'ajouter le balisage de la feuille d'action. Placez une étiquette de feuille d'action ionique juste en dessous de l'œil sur la balise de fermeture des listes. Cela en fera un frère de la liste des ions. Cette balise aura beaucoup d'actrice mais pas de composants enfant. Le premier attribut à définir est ouvert après a dit sa valeur à l'expression de liaison de bang bang sélectionné point étudiant i d. Le double points d'exclamation contraint la valeur de chaîne en un véritable lingot. Si le I D a une valeur, ce sera vrai. Si ce n' est pas le cas, ce sera faux car leur étudiant par défaut dans le hook d'état est l' objet étudiant vide . Nous pouvons être sûrs de deux choses que sa valeur ne sera jamais non, et le I D sera soit une valeur réelle ou une chaîne vide. Ensuite, créez un en-tête après avec sa valeur définie sur le Roi Canton des élèves sélectionnés . Prénoms et noms. N' oublie pas l'homme des accolades. Nous voulons préciser la mesure à prendre lorsque la feuille d'action est rejetée. Pour cela, nous utilisons le on a rejeté après vous. Il s'agit d'un événement sur la feuille d'action elle-même. Définissez cet attribut pour être une fonction étroite qui appelle simplement la fonction étudiante sélectionnée ensemble passant étudiant vide. Cela entraînera la feuille d'action pour se cacher car la valeur de est ouvert deviendra fausse. Enfin, nous devons créer le tableau de boutons. Il s'agit d'un tableau d'objets bouton. Chaque bouton, nous aurons besoin d'un champ de texte dans un champ d'icône, d'une fonction de gestionnaire qui est appelé lorsque l'utilisateur clique dessus et éventuellement d'une valeur de rôle pour cette feuille d'action. Je veux que quatre boutons suppriment avec un rouleau de destructeur l'icône de la corbeille. Et si vous voulez ah, fonction de gestionnaire qui appelle delete student, je ne vais pas déranger maintenant parce que je vais le brancher différemment. Dans la leçon suivante. Mark Present aura l'icône I et une fonction de gestionnaire, qui définit le statut des étudiants sélectionnés pour présenter. Mark, absent avec l'icône « eye off » et sa fonction de gestionnaire, définira le statut des étudiants sélectionnés sur absent et enfin, un bouton d'annulation avec l'icône des vêtements et le rôle de Annuler. J' ai dit qu'on aurait besoin de quatre gestionnaires, mais celui-là n'en a vraiment pas besoin. Et c'est l'ensemble de l'action. Maintenant, nous allons créer un bouton pour lancer l'action et une étiquette de boutons ioniques immédiatement après les deux icônes existantes et juste avant la taxe de fermeture de l'élément ionique, donner à l'étiquette de boutons ioniques une fente après et a dit sa fin, ce qui signifie qu'il va apparaissent à la fin de l'élément. Ensuite, ajouter aux balises de bouton ion que les enfants de la balise boutons regarder à nouveau ceux singulier et pluriel l'intérieur de chaque bouton à un oeil sur mon calme avec la fente, attributs dit Toe Icône sur Lee, Spécifiez l'icône de la d'abord comme contour horizontal ellipse et définissez le 2ème 1 sur Chevron avant contour à un gestionnaire de clic sur le bouton avec les points de suspension. Lorsque vous cliquez sur, nous voulons appeler la fonction de clic étudiant, en passant l'étudiant actuel du tableau. 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 on s'attendrait à 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. Nous allons sauver le reste de la fonctionnalité pour Ah, 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é pour 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 Supprimer appelle simplement la fonction de suppression é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 Ionic, il rend avec le look et la sensation appropriés sur Android et iPhone en haut de la page de liste, créer un nouveau crochet pour contrôler la visibilité de l'alerte à l'intérieur de la feuille d'action. Si vous avez appelé, l'étudiant principal a remplacé cet appel par un appel aux hooks set show Supprimer la fonction d'alerte . En passant true si vous l'avez sauté comme je l'ai fait, ajoutez simplement le gestionnaire à appeler. Set a montré l'alerte d'élite passant vrai. De toute façon, la définition des boutons de suppression devrait maintenant ressembler à ceci. Maintenant, lorsque l'utilisateur sélectionne le bouton de suppression au lieu de supprimer immédiatement l'élève, l'alerte à œil s'affiche. Si vous vous souvenez, il y a un autre bouton de suppression sur la page avec un à l'intérieur de l'option d'élément ionique que vous souhaitez placer. Le même appel à définir a montré alerte élite ici car il est sur le gestionnaire de clic pour implémenter l' alerte elle-même à un oeil sur le composant d'alerte immédiatement après l'action ionique, elle sa balise de fermeture pour afficher l'alerte dont il aura besoin et est des attributs ouverts qui à la valeur de l'émission. Supprimer la variable d'alerte. C' est ce que ce crochet était pour la prochaine fois. A un on a rejeté les attributs mis orteil. Une fonction étroite pour appeler ensemble a montré alerte de plomb cette fois passant faux. Cela entraînera la disparition de l'alerte. Il y a trois attributs qui contrôlent le texte à l'intérieur et j'ai une alerte. Les attributs d'en-tête sous la forme d'une chaîne. Il apparaît en haut de l'alerte. Tu as quelque chose comme supprimer cet étudiant. L' attribut message est le corps principal de l'alerte. Utilisez une chaîne telle que cette opération et ne peut pas être annulée. L' attribut de sous-en-tête apparaît juste à l'intérieur du corps de l'alerte. Définissez cet attribut sur une contamination des noms et prénoms des étudiants, afin que l'utilisateur sache exactement quel élève est sur le point d'être supprimé. Enfin, l'alerte nécessite un tableau de boutons. Vous définissez ces boutons exactement de la même façon que pour la feuille d'action. Le premier bouton est le bouton Supprimer. Il a besoin d'un gestionnaire qui supprimera un étudiant afin de fournir une fonction étroite qui appelle simplement la fonction delete student. D' avant, nous pouvons le faire, parce que maintenant nous avons confirmé que c'est ce que l'utilisateur veut faire. Le deuxième bouton doit être un bouton d'annulation avec le rôle d'annulation, et il n'a pas besoin d'un gestionnaire. Et maintenant n'oubliez pas de fermer l'œil sur la balise d'alerte ou vous aurez quelques problèmes de compilation. Sauvegardez et vérifiez votre travail. Si tout s'est bien passé, j'ai perdu ma souris. Si tout s'est bien passé, essayer de supprimer un étudiant ne devrait plus le faire automatiquement. Au lieu de cela, vous obtiendrez l'alerte vous demandant de supprimer ou, dans mon cas, ne vous dérange pas de cliquer. Cela devrait rejeter l'alerte sans qu'aucune mesure n'ait été prise. Seuls quelques supprimer et puis dire à nouveau de bien supprimer, l'étudiant en fait être supprimé. Ensuite, nous allons créer un petit accusé de réception afin que l'utilisateur sache que l'étudiant a vraiment été supprimé . Plusieurs fois, une application doit fournir une notification à l'utilisateur que quelque chose s'est produit. 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. Est-ce que le message exige 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 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. Nous ne ferons rien de tout cela si vous voulez personnaliser votre oeil sur un toast après avoir terminé la leçon, n'hésitez pas en haut de la page de la liste. Créez un autre crochet à utiliser pour contrôler la visibilité du toast, tout comme nous avons contrôlé l'invisibilité de la feuille d'action et de l'alerte. Ensuite, modifiez la fonction delete student pour appeler la fonction hook Set immédiatement après que le plomb se produise à un oeil sur la balise toast immédiatement après la balise I alert. Exactement comme avec l'œil sur alerte, il a besoin d'un est des attributs ouverts qui à la valeur de l'émission, supprimer toast, crochet variable et sur a rejeté les attributs dit pour appeler la fonction de jeu de crochet. Ses attributs de message doivent contenir un court message indiquant que l'étudiant a été supprimé. Soyez un plus simple aussi détaillé que vous voulez, mais rappelez-vous que Shorter est généralement mieux pour un toast. 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 et en millisecondes, alors veillez à ne pas spécifier une durée trop courte et certainement ne pas passer une force Si vous oubliez et omettez la durée. Attribut. Le toast restera sur l'écran indéfiniment, nécessitant une intervention de l'utilisateur pour le rejeter. Une position par défaut de toast est centrée verticalement. J' ai décidé de le déplacer vers le haut, mais nous vous laisserons la décision finale. Vous pouvez fournir un tableau de boutons à un Je suis toast, tout comme vous l'avez fait avec la feuille d'action I N et j'ai une alerte. Si vous vous sentez tellement enclin à aller de l'avant et en ajouter un, je choisis de ne pas enregistrer le fichier et a quitté le navigateur. Rafraîchir. Maintenant, lorsque vous supprimez un étudiant en plus du nom de l'étudiant qui disparaît de la liste. Une fois la confirmation effectuée, 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 de la 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 obscurcit le contenu de la page principale, vous consentez. C' est la superposition des attributs de type. 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, soyez plus court. Enveloppez-le avec 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. Par défaut, il se cache 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 masque automatique réellement sur false. 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, alors construisons un. Maintenant, créez un nouveau fichier dans le dossier Components. Appelez ça le menu dot tsx. C' est là que définira le menu, répliquant ce que nous avons vu pendant la visite créer une interface de page APP près du haut qui définira à quoi ressemble une page. Donnez-lui un titre, votre l et une icône. Ensuite, créez un tableau de ces objets à l'intérieur du tableau. Fournissez aux libéraux un pour la page d'accueil avec le You Earl et Icône approprié , puis un pour la page de liste avec son fichier Your L Slash. Et nous allons utiliser l'icône appelée « gens ». Si l'éditeur ne reconnaît pas les icônes, vous pouvez les importer à partir des icônes de barre oblique ionique. Vient ensuite le menu lui-même, tout comme la page de liste. C' est un composant de fonction de réaction. Appelez le menu et dit à une fonction étroite qui retournera du contenu ionique pour construire le contenu du menu. Créer un élément de menu ion avec son contenu i d défini sur Maine. Cette valeur doit correspondre à l'élément HTML i. D. de la sortie du routeur ionique, qui était principal. Croyez-moi sur celui-ci, mais nous allons vérifier que j'ajouterai le menu au balisage pour le type. Je suis partiel à superposer, mais n'hésitez pas à essayer, pousser ou révéler à l'intérieur d'un en-tête ionique avec un oeil sur la barre d'outils et un oeil sur le titre à l'intérieur du titre fournissent un titre tel que Menu juste après l'en-tête ionique à une balise de contenu ionique. Et juste à l'intérieur et moi sur la liste. C' est là que le menu sera construit fera cela en itérant sur le tableau à pages . La stratégie est similaire à ce que nous venons de voir avec les étudiants. Pour ce faire, ouvrez une accolade bouclée pour exécuter du code, appelez les pages à une fonction de carte de relèvement. Cette fonction obtiendra une fonction étroite à exécuter pour chaque élément du tableau. Cette fonction recevra deux paramètres. L' objet page et l'index de tableau de cet objet. 0123 ainsi de suite. La fonction flèche doit renvoyer le balisage pour chaque objet. Le premier élément est un basculement de menu ionique, avec sa clé définie sur la variable d'index. Si nous ne fournissons pas cet index, réagir se plaindra que chaque enfant d'une liste doit avoir une clé. Il sera toujours rendu, mais il aime un avertissement laid. Et nous n'avons pas besoin que, comme je l'ai mentionné plus tôt, définissez la propriété auto hide sur false à moins que vous aimiez regarder les choses disparaître 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. Définissez la direction du routeur sur zéro ou racine votre choix. Cela affecte l'animation. C' est subtil, donc je vais vous laisser jouer avec et décider ce que vous préférez si vous voulez une ligne visible séparant vos éléments de menu que les lignes attribuent à remplir pour un mithi après tout . Je ne suis pas un fan de son apparence, donc je ne choisis aucun à l'intérieur de l'élément à une icône ionique avec sa fente définie pour démarrer et son icône est définie sur l'icône point de la page AP à nouveau. Faites attention à cette syntaxe de liaison. Assurez-vous de bien fermer toutes vos étiquettes, puis toutes vos accolades, air fermé et assorti et aligné. Il ne reste qu'une ligne. Nous devons exporter la fonction de menu, sinon nous ne serons pas en mesure de l'importer dans l'application pour les rendre visibles et vous. Ouvrez l'application point ts X page immédiatement à l'intérieur du routeur Ion React comme son premier enfant à un composant de douleur split ionique avec son contenu que j'ai mis sur le Maine assurez-vous que la douleur split enveloppe complètement la sortie du routeur ionique. Je fais ça ici avec la macro. Une option de raccourci Flèche vers le bas sur Windows et Lennox. Il devrait être modifié flèche vers le bas. Ajouter la balise de menu du premier enfant de la douleur de séparation ionique immédiatement avant la sortie du routeur ionique . Nous avons déjà ajouté la route à la page de liste, mais au cas où vous n'auriez pas besoin ici à l'intérieur de la sortie du routeur ionique. Enfin, pour ce fichier, vous devez définir les prises de routeur ionique I d au Maine. Je pensais que cela avait déjà été fait, mais apparemment pas. Suivant. Nous devons ajouter une icône de menu à nos deux pages. Non, ce n'est pas automatique. Ouvrez la page d'accueil au point d'accueil tsx. À 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 start été et je sur le composant de bouton de menu . À 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, alors 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 les pages de liste avec ces et cela le fait à peu près pour ce chapitre. Alors récapitons 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 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. 24. 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. 25. Bonus: Mais avant de partir, laissez-moi quelques minutes de plus à chaque fois. Je sais que votre temps est précieux et je vais essayer 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. Consultez régulièrement les dernières offres de cours. Encore une fois, c'est mon Callahan. Merci d'avoir regardé.