Atelier de développement d'applications mobiles avec ionic et angular

1. CoursePromo: Vous souhaitez créer des applications mobiles ? Voulez-vous cibler les androïdes ou les iPhones ? Si vous souhaitez créer votre propre application mobile, mais ne voulez pas prendre le temps d' apprendre plusieurs technologies. Alors ce cours est pour toi. Avec des technologies de pointe telles que Ionic, vous n'avez pas à ignorer les technologies Web standard telles que le HTML, le Javascript et le dactylographié Je vais vous montrer non seulement à quel point il est facile de créer votre propre application, mais aussi à quel point cela peut être amusant. De plus, vous serez capable d'écrire une seule application qui fonctionne à une seule application qui la fois sur les appareils Android et les iPhones Jetez un œil à ces applications. Ils ont tous été développés avec Ionic. Et ce ne sont là que quelques-unes que j'ai créées moi-même. Il y en a des milliers d'autres. En fait, près de 20 % de chaque application est une application ionique. C'est incroyable, non ? Parmi les principaux sujets abordés dans le cours, citons la création de l' interface utilisateur à l' aide du framework ionic, la mise en évidence du travail que Ionic fait pour vous, création d'une application de démonstration parfaitement adaptée lorsqu'elle est exécutée sur un iPhone, Android ou même un navigateur de bureau Je vais vous montrer comment créer une expérience d'apparence native avec composants ioniques tels que des menus, des cartes, des feuilles d'action, des alertes et des notifications de toast Nous utiliserons une mise en page à volets divisés qui fonctionne aussi bien sur un grand ordinateur de bureau ou une tablette que sur un petit téléphone. À la fin de ce cours, vous verrez quel point il peut être simple de créer une application mobile fonctionnelle dans le monde réel avec Ionic Maintenant, avant de commencer ce cours, il vous aidera à vous familiariser avec les bases du développement Web en HTML. Je ne m'attends pas à ce que vous soyez un expert, et j'aborderai les sujets les plus complexes au fur et à mesure. Si vous savez comment créer un bouton HTML ou ajouter un gestionnaire de clics, tout devrait bien Préparez donc vos idées d'applications et rejoignez-moi dans ce voyage rapide pour découvrir comment devenir un expert développement d'applications mobiles avec le framework Ionic 2. Session1: C'est bon. Bienvenue donc à tous à ce qui, je l'espère, sera le premier de nombreux ateliers de développement mobile Ionic Angular Comme je l'ai mentionné, je suis Mike Callahan et j'ai hâte de vivre cette expérience et de construire quelque chose avec tout le monde Dans le chat, je vous ai donné ces URL. Le premier est le lien central vers le projet que nous allons construire au cours de l'atelier. Tout fonctionne donc parfaitement, vous pouvez donc l'utiliser comme référence. La deuxième URL est un get ub gist contenant des fichiers pratiques afin que vous n'ayez pas à tout taper si vous ne le souhaitez pas Les deux suivantes sont mes coordonnées. Vous devriez déjà avoir ce Michael sur Walking River, et mon pseudo Twitter est Walking River. OK. Je suppose que vous avez de la programmation générale , du HTML et un peu de javascript. Je vais utiliser le code de Visual Studio. n'est pas obligatoire, mais c'est là que seront mes captures d'écran. Je suis également un grand fan d'Angular Essentials de John Papa. Il s'agit d'une collection d'extensions qui facilitent le développement angulaire. Il existe également quelques extensions pour les extraits ioniques. Je ne les ai pas trouvés aussi utiles que je l'espérais. Mais je trouve que celui-ci est absolument essentiel. OK. Avez-vous besoin de connaître Angular ? Ce n'est pas nécessairement le cas, nous n'allons pas passer beaucoup de temps sur Angular. Les concepts, si tu as besoin de quelque chose, si ça n'a pas de sens ou hé, Mike, c'est quoi ça ? Arrête-moi, et nous y reviendrons. En règle générale, nous allons utiliser les ismes angulaires suivants. Nous allons donc utiliser les directives G quatre et G. Nous utiliserons la séparation angulaire des préoccupations. Je sais que l'on parle beaucoup ces derniers temps de tout regrouper dans un seul fichier Et il y a le nouveau support expérimental d'Angular 14 pour les composants sans module. J'opte pour la vieille école ici. C'est angulaire. J'aurai donc un fichier JS, fichier CSS différent, un fichier HTML différent. Si vous le souhaitez, vous êtes libre de les combiner vous-même. Ce sont les expressions contraignantes que nous utiliserons probablement, et je ne pense pas que nous deviendrons plus compliquées que cela. La première est une expression textuelle. Ainsi, si vous avez une variable appelée dans ce cas, EXPR sur votre composant, et que vous souhaitez que sa valeur figure dans votre code HTML, il vous suffit de l'entourer de deux accolades. S'il ne s'agit pas de texte ou si vous préférez simplement le second style. Vous pouvez mettre le nom de la variable entre guillemets sans les accolades Carla, mais vous devez placer le nom de l'élément que vous liez à l'attribut de l'élément HTML entre crochets La seule fois où cela est important c'est si la variable à laquelle vous vous liez n'est pas une chaîne. Par exemple, si vous deviez lier, disons, l'attribut disabled, et que vous voulez désactiver pour qu'il soit égal à faux et que vous utilisez la première expression entre accolades, vous lierez en fait à la chaîne false et cela peut ou non être réellement false et cela peut ou non être réellement évalué à faux au moment de l'exécution car la chaîne false est ou peut être une évaluation de la vérité. Enfin, l'événement de clic qui s'y trouve. Donc, chaque fois que nous voulons lier une fonction notre composant à un événement HTML. Vous mettez le nom de l'événement entre parenthèses et la fonction que vous souhaitez appeler entre guillemets Je pense que c'est à peu près aussi angulaire que ce dont nous avons besoin. OK, nous allons donc passer en revue tout ça. Voici mon introduction angulaire. OK. Tout le monde a installé la CLI ionique, non ? Cela signifie que la CLI du nœud est également déjà installée. Ce n'est probablement pas critique sauf que je pense que la CLI ionique nécessite Git ou du moins suppose que vous l'avez Supposons que vous n'ayez déjà aucun G. Tout le monde y est installé. Oui. Sinon, NPM installe G sur la CLI Ceux d'entre vous qui sont venus tôt ou plus tôt m'ont vu le faire il y a peu parce que j' utilisais une ancienne version. C'est bon. Nous allons donc créer une interface utilisateur très basique et ainsi de suite. Il comprendra une page d'accueil, une page de liste des étudiants, une page d'informations sur les étudiants et un menu latéral. C'est essentiellement à cela que cela ressemblera. Excusez-moi. Voici donc la page d'accueil. C'est ici que l'application démarrera. La page Roster une fois terminée ressemblera à ceci. Ce sera une liste des étudiants de notre classe. La page Rooster est construite avec une liste, qui est un composant ionique, et elle ne contient aucune icône, aucun bouton et toutes sortes de fonctionnalités ioniques intéressantes que nous implémenterons au fur La page d'informations sur les étudiants est l'endroit où vous pouvez contacter un étudiant individuel. Il s'agira de formes ioniques, un peu plus de stockage ionique Comme vous pouvez le constater, nous y arriverons éventuellement, par intégration via un condensateur pour accéder à la caméra de l'appareil. C'est bon. Passons donc directement à la création de l'application. Partout où nous en avons besoin, c'est un raccourci. J'ai mis le lien ist dans le chat. Il figurera également sur n'importe quelle diapositive où nous en aurons besoin ou où cela pourrait s'avérer utile. La première chose que nous voulons faire pour créer une application active est de taper la commande au démarrage. Allons-y. Faisons-le simplement. Je ne vais pas utiliser l'assistant de création d'applications. C'est cool, mais ce n'est pas vraiment nécessaire. Si vous voulez jouer avec, vous pouvez le faire. Je vais utiliser Angular. Je vais m'appeler. Je vais appeler l'heure de présence. Je vais éventuellement avoir un menu d' accompagnement. Mais le modèle de menu latéral vous donne beaucoup de passe-partout que je n'aime pas Je préfère donc commencer par une application ionique vierge. Il semblerait que nous obtenions un condensateur par défaut. C'est très bien. Et il va installer tous ces trucs pour moi. Éloigne-le de là. Pas besoin de voir. Est-ce que tout le monde suit, d'accord ? Oui. Oui. Merci. Eh bien, voilà. Maintenant, pour continuer et voir cela, il vous suffit de taper ionic serve Je dois d' abord être dans cette application , je dois être dans le dossier. Un CD vous intéresse ? Ensuite, je peux servir ioniquement Et comme vous pouvez le voir ici, ionic serve ne fait que déléguer une grande partie de ses fonctionnalités à la CLI angulaire J'ai donc tapé ionic serve et le service ionique s'est poursuivi et a généré cette commande G run, et il lance automatiquement mon navigateur par défaut, qui dans mon cas est Safari et me donne exactement ce que j'ai demandé. Une application vierge avec beaucoup de contenu. OK. Maintenant, est-ce que tout le monde suit le même chemin et en êtes-vous arrivé là ? Oui. Oui. C'est bon. On y est presque. On y est presque. C'est bon. Je vais passer à la diapositive suivante. Ce que je voulais aborder très rapidement, ce sont les outils de développement ou les outils de développement du navigateur. Si vous êtes sous Windows, il vous suffit de taper F 12. Si vous êtes sur un Mac, c'est l'option de commande et évidemment, cela n'en a pas l'air. Ouais. J'y suis. C'est bon. Les outils de développement sont-ils ouverts ? Tu devrais en être capable. Je ne me rappelle jamais comment le faire dans Safari. Nous y voilà. Passez en mode Responsive Design. Alors maintenant, je peux émuler différents appareils Apple. Si vous n'êtes pas dans Safari, non, même si vous êtes dans Savi, si vous utilisez n'importe quel appareil, je suppose Je recommande d'utiliser Chrome ou Edge pour utiliser les outils de développement. C'est vraiment cool et vous ne le verrez pas ici. Tu le verras dans un instant. Mais permettez-moi d' en parler plus en détail. En fait, permettez-moi d'en parler ici. Je l'ai déjà ici, donc je peux te montrer ce que je veux te montrer. À propos de Edge, si je le dis, je veux un appareil comme un iPhone 12 Pro. Cela me donne ce que je recherche. Cela me donne la bonne résolution. Je peux donc choisir un iPhone. Je peux choisir un androïde. Remarquez que ça ne change pas grand-chose, mais c'est là que ça devient vraiment cool. Laissez-moi entrer dans le vif du sujet. Permettez-moi de rafraîchir la page. Une fois que les outils de développement sont ouverts , que vous avez configuré votre appareil et que vous actualisez la page, Ionic le reconnaîtra et dira : « Oh, vous utilisez un appareil Android Je vais changer son apparence. Vos icônes seront donc androidifiées. Vos boutons seront Android, vos listes déroulantes seront Android Tout devrait donc ressembler à Android. Remarquez donc à quoi ils ressemblent. Et puis quand je clique sur le bouton de démarrage, il s'agit d'un modèle Android. Permettez-moi donc de revenir à un iPhone. Cela ne changera pas encore tant que je n'aurai pas actualisé la page. Voyez la différence. Voici à quoi ressemblera une pomme. Je peux revenir à la configuration, le bouton étant un peu plus arrondi. Le menu déroulant semble différent. Les icônes sont un peu différentes, les menus latéraux sont un peu différents. Tout est juste un petit peu différent. Vous verrez sur un appareil Apple, votre centre de titres justifié, où se trouve n'importe quel appareil Android. Vous allez donc obtenir toutes ces fonctionnalités, ce changement visuel prêt à l'emploi avec Ionic Et c'est l'une des principales raisons pour lesquelles je l'utilise. OK. C'est donc ce que nous allons construire. Donc, je l'ai ici. Comme je l'ai dit, F 12 pour ouvrir vos outils de développement et vos fenêtres ou votre option de commande sur un Mac. Je viens de vous montrer les différents modèles. Il s'agit du bouton permettant d'accéder au mode de conception adaptative sur Safari. OK. Allez, montez neuf heures. OK. Et je t'en ai déjà parlé. Si vous passez de l'un à l'autre, vous devez recharger les pages pour voir l'interface utilisateur changer OK. Créons maintenant notre première page ionique Ou dans ce cas, nous allons créer une interface. Je vais partir, je vais arrêter. OK. Je vais donc utiliser la commande on generate. Je peux aussi le faire avec l'interface G. Je vais donc demander à l'Ionic CLI de générer un fichier d' interface dactylographié pour que je puisse contenir la définition d' Et c'était aussi rapide que ça. Je vais également ouvrir Sd sur mon projet, n'est-ce pas ? OK. Y a-t-il un moyen un peu votre façade agrandir un peu votre façade avec cela ? Je le peux absolument. Comment est-ce ? C'est génial. Merci. Je vais faire la même chose ici. Command Plus, au fait. C'est vrai. L'interface se trouve dans mon dossier source app student. n'y a pas grand-chose là-dedans. Éloignez-le pour vous. OK. OK. C'est donc l'un des endroits où cet essentiel sera utile Et c'est Student TS ici. Je vais récupérer le fichier brut. Encore une fois, vous n' avez pas besoin de le voir, mais je suis paresseux et je ne veux pas tout retaper. Telle est donc la définition d'un étudiant. Est-ce que quelqu'un sait pourquoi je fais mon étudiant une interface et non une classe ? Y a-t-il un type d'assistant de script que vous souhaiteriez consulter ? Est-ce que quelqu'un sait à quoi sert une interface de script de type lorsqu'elle est compilée en Javascript ? Non. OK. Je vais voir si je peux te montrer. Avez-vous déjà écrit un script ou j'ai un terrain de jeu pour les pipes scripts. Et d'un côté, il y a le tapuscrit, de l'autre, le javascript Si vous entrez dans l'interface Avian, c'est ce qu'elle crée. Absolument rien Les interfaces n'existent pas. Ils sont donc purement destinés à la commodité des développeurs. Si par contre, j'ai créé une classe, ce n'est pas une classe valide. Pourquoi ce cours n'est-il pas valide ? OK. Oh, je vois. J'ai besoin de ce genre de choses. Donc, pas beaucoup plus de code, mais c'est plus de code. Et franchement, je n'ai pas besoin de cours. Je ne sais pas si mon objet étudiant n'a pas besoin de méthodes. Donc, s'il ne s'agit que d'un objet de transfert de données, j'opterai toujours pour une interface. OK. OK. Jetons donc un coup d' œil à cette interface. Chaque étudiant possède un identifiant, un prénom et un nom de famille. Est-ce que quelqu'un sait ce que le point d'interrogation signifie pour le reste des champs ? Option. Ils sont facultatifs. Donc, la date de naissance, le nom du parent, son adresse e-mail, son téléphone, etc. Elles sont toutes facultatives. Je ne vais pas laisser ça ici. Cela signifie que je peux créer que cela ne sera pas valide, cependant. Je peux donc créer un puits, copilote Hub le fera pour moi Je peux donc utiliser un initialiseur littéral d'objet. Oups. C'est exact. C'est bon. Maintenant, Pile devient un peu trop zélé. OK. Si l'étudiant était une classe, je ne pourrais pas faire ça. Je ne pouvais pas utiliser un initialiseur d'objet comme celui-ci. OK. Ce ne serait pas valide. Je devrais utiliser new student, puis transmettre les valeurs au constructeur ou créer les champs individuellement Mais comme j'ai une interface, script de type et un script Java me permettront d'initialiser un tout nouvel objet de ce type simplement en utilisant un objet littéral De plus, comme il s'agit d'une interface, je reçois des erreurs si je ne fournis pas tous les champs obligatoires. Enfin, qui peut me dire ce que signifie le statut ? Pourquoi n'ai-je pas défini le statut à la ligne dix qui s'y trouve ? Il s'agit plutôt d'une question de script d'un autre type, pas d'une question onic angulaire. Bien que l'angle soit en partie la raison pour laquelle je l'ai fait. Je ne sais pas si c'est juste une sorte de type personnalisé. Cela limite la valeur The to be present or absent ? Correct. Défini dans ce cas comme facultatif. Correct. Donc, la plupart des gens surtout si vous venez du monde .net, vous avez probablement l'habitude de le faire avec un nom. Vous auriez donc une énumération où le présent est égal à zéro et l'absent est égal à un ou vice versa. Ensuite, le compilateur s'assurerait qu'il était fortement typé Le problème avec Angular , c'est que vos modèles ne peuvent pas voir ces enumes À moins que vous ne créiez ensuite une variable locale pour contenir le nombre et cela devient étrange. Mais si je le fais de cette façon, je dis essentiellement à dactylographié que la valeur de status est une chaîne, mais qu'il ne peut s'agir que d'une chaîne de deux valeurs, comme vous l'avez dit, et je vais obtenir Il me dit donc automatiquement quelles sont mes valeurs . Plutôt dérapant, hein. OK. Michael, tu pourrais ajouter un entier dans cette liste, n'est-ce pas ? Tu veux dire. Comme ça. Ouais. J'aime bien ce que Co Pilot a suggéré. Quelqu'un a-t-il utilisé Copilot ? Je voulais l'éteindre. Je l'ai trouvé utile. J'ai trouvé que Co Pilot sait très bien ce que je veux qu'il fasse. Et c'est vraiment bon pour créer des tests unitaires pour moi. OK. Vous avez des questions sur l'interface ? C'est bon. J'avais une question. Mon stagiaire se plaint. Je pense que c'est à cause du fichier de conflit TS pour Ionic ? Ce n'est pas le cas. Il utilise TS et non ES. Tu l'as remarqué ? Je ne l'ai pas fait. C'est ce qu'il est en train de faire ? Sommes-nous toujours par défaut ? La valeur par défaut est toujours S n. Min est deux, donc. Je ne sais pas pourquoi il s'en plaint. Ouais. Je ne vois aucun TSN en ligne. Non. OK. Il y a quelque chose qui s'en plaint , mais pas moi. Microsoft Dad s'en plaint. Peux-tu donc nous montrer le connecteur d'un copilote que tu utilisais ? Il semblerait qu'il y en ait deux. C'est une bonne question. OK. Je ne suis pas en train de le payer pour le moment. J'ai donc celui-ci. 3131. Je ne sais pas ce qu'est celui-ci. Oh, tous les soirs. Ouais. Je suis allée de l'avant et je ne l'utilise pas. J'utilise la version officielle de G Hub. Et comme je l'ai dit, je ne suis pas encore en train de le payer. Je pense que je l'ai gratuit pendant encore quelques semaines. Ou peut-être que je vais commencer à maintenir un dépôt open source. C'est bon. La prochaine chose que nous devons faire. J'essaie de faire les choses ennuyeuses en éliminant tout cela très tôt pour créer un service aux étudiants. C'est ce qui gérera tout, l'interaction des données pour traiter avec les étudiants, et c'est le très gros dossier que j'ai pour vous sur l'essentiel C'est ce que je veux faire ici. Ramenez ma ligne de commande A ici. Et nous y voilà. Mets-le de côté. OK. Donc ici, je n'utilise pas la CLI. Et si je n'utilise pas le on CL c'est pour vous montrer qu'il s'agit en fait de la même chose. Ainsi, la CLI ionique déléguera simplement à la CL angulaire. La raison pour laquelle je le préfixe avec PX est que je ne veux pas utiliser la CLI angulaire installée globalement Je souhaite utiliser celui intégré à mon projet ionique. Est-ce que tout le monde connaît PX, à quoi ça sert ? Oui. Je veux dire, il fait beaucoup de choses. Mais le principal est qu'il utilisera la version de NG qui se trouve dans mon dossier de modules de nœuds par opposition à ma version globale. OK. Je vais donc créer un service appelé étudiants. Il y a une chose que j'aime beaucoup faire. J'aime utiliser la commande dry run juste pour voir ce qu'elle va faire avant de le faire. Cela va générer deux fichiers pour moi. Il va générer un fichier de test et mon fichier dactylographié de service, et il va les placer directement dans le dossier de l'application. C'est bon. Dans le cadre d'un projet de plus grande envergure, je ne voudrais pas le faire. Je veux que beaucoup de choses soient un peu mieux organisées. Je lui dirais donc de l' endetter ailleurs, je pourrais l'affecter aux étudiants du service, par exemple. Vous pouvez maintenant voir qu' il va le placer dans un dossier appelé services. Eh bien, allez-y et laissez-le comme ça. Je vais enlever le drapeau de course à sec et le laisser le construire. Le service aux étudiants va nous fournir étudiants que nous pourrons exposer. Sans liste d'étudiants, nous ne pouvons pas faire grand-chose. Encore une fois, nous pouvons revenir à ma liste, qui se trouvait ici. Descendez au service des étudiants. Prends la version. Sélectionnez une copie. Trouvez mon service étudiant et collez-le simplement. Et ça ne lui plaît pas. Pourquoi n'est-ce pas comme ça ? OK. C'est juste. Quelqu'un voit les problèmes immédiats ici ? Celui-ci est évident. C'est parce que j'ai mis les services dans un dossier. Alors laissez-moi vous montrer que si vous n'êtes pas habitué à cela dans le code BS, je vais juste supprimer cette ligne. Et puis je vais voir que l'erreur est là. Cliquez dessus et cliquez sur l'ampoule bleue et il la trouvera pour moi et reconstruira cette déclaration d'importation pour moi OK. Celui-ci est un peu plus difficile à surmonter. Ce qui se passe, c'est ce service utilise le stockage par condensateur ionique Mais je ne sais pas. OK. Nous l' utilisons. Je l'utilise. Nous devons donc installer un stockage par condensateur. Je vais donc ouvrir les codes S intégrés au terminal, qui est Control Back Tick. Ensuite, je peux simplement installer un stockage par condensateur. OK. Ensuite, ce problème devrait disparaître. Comme ça. Questions, commentaires, préoccupations. Tout le monde est toujours au courant ? Oui. J'ai pris conscience de ça. Il y a encore un tas d' autres choses qui se passent là-dedans. Si tu as l'impression que tu commences à prendre trop de retard, arrête-moi, préviens-moi. OK. OK. Vous devriez donc avoir un service étudiant maintenant. Maintenant, ce que je veux faire. Le service étudiant contient une méthode d'initialisation Encore une fois, juste pour faciliter l'accès à l'interface utilisateur. Donc, ce que je dois faire dans le composant d'application T. Je vais appuyer sur Commande P ou Windows Control P pour ouvrir ce menu rapide et je vais taper composant d'application. J'aime garder les mains sur le clavier. Donne-moi une seconde. J'ai donc le constructeur. Et il s'agit en fait d'une faute de frappe car cela n'appelle pas l'application initialize Avons-nous besoin du composant d'application pour l'implémenter ? Maintenant, je vais laisser Pilot faire un autre travail pour moi. Ce n'est pas une mauvaise supposition. Mais nous devons intégrer le service étudiant. OK. Et remarquez qu' il s'est déroulé et qu'il a trouvé toutes ces informations pour nous. Il a déterminé où importer le service aux étudiants. Alors maintenant. Encore une fois, pas mal, mais ce n'est pas ce que je recherche. Nous devons commercialiser une synchronisation parce que nous voulons attendre. Ouais. Doit-il être à l'intérieur ou à l'extérieur de la classe ? Il devrait être à l'intérieur. Merci. OK. Maintenant, à quoi ça ne ressemble pas ? Désolée. Allons-y. Je ne l'ai pas importé. Je ne sais pas pour le reste d'entre vous, mais c'est l'un de mes points faibles, si vous voulez, avec Angular. J'oublie d'importer des choses. C'est pourquoi j'aime vraiment que VS code le fasse pour moi. Et quel que soit le paramètre ES que j'ai fichier source , il ne s'agit pas d'un fichier source qui n'a pas de ligne vide à la fin, donc il va beaucoup s'en plaindre. Vous avez des questions ici ? Nous voulons voir ce que cela fait ou savons-nous ce que cela fait ? Lorsque le composant de l'application démarre, il appelle notre service étudiant pour lui demander de s'initialiser L' initialisation du service aux étudiants fait plusieurs choses Il est utilisé pour le stockage ionique pour essayer de faire en sorte que tous les étudiants en sortent Mais la première fois que tu le regarderas , il n'y en aura pas. La longueur de ce tableau d' étudiants sera donc nulle. À ce moment-là, j'appelle data, et je vois que les données prennent simplement ces faux étudiants et les stockent pour moi. Cela nous donne donc quelque chose à montrer. Est-ce que cela a du sens ? D'ailleurs, ce sont toutes de vraies personnes qui ont accepté de me laisser utiliser leur nom. C'est bon. Nous sommes bons. Passons à autre chose. OK. J'ai parlé des importations. Le code VS me permettra de rester honnête. Mais si ce n'est pas le cas, vous pouvez intervenir et rester honnête La plupart des exemples de code que je montre dans mes diapositives ne contiennent pas les importations. Il était plus facile d'économiser de l'espace. OK. Nous allons maintenant générer la page de liste. OK. C'est là que les choses s'écartent un peu de l'échafaudage angulaire CLI standard Lorsque vous créez un projet ionique avec un démarreur ionique, lorsque vous installez l'interface de ligne de commande ionique, Ionic vous fournit échafaudage angulaire que l' architecture angulaire n' Angular n'a pas le concept de page. Je ne sais pas si vous y avez déjà pensé, mais lorsque vous voulez créer une page et un angle, vous créez un composant. Mais ionic a le concept d'une page ionique. Ils vous donnent donc cet échafaudage. Je peux donc taper l' une de ces deux commandes car elles sont fonctionnellement identiques Je peux donc créer une page de génération ionique et l'appeler liste. Tout ce que cela fait, c'est qu'il appelle G generate page. Coq. Mais comme Ionic a créé cet échafaudage pour l' échafaudage de pages, nous pouvons générer une page avec Ionic, ce que nous ne pourrions pas faire avec Angular Encore une fois, je vais le faire fonctionner à sec. Et vous le voyez littéralement très bien, pas exactement, mais la commande NG generate. La plus grande différence entre la création d'un composant angulaire pour nous sous forme de page et la création d'une page ionique est que les pages ioniques sont créées avec leur propre module par défaut et Ainsi, une page ionique ne se chargera qu'au moment de l'exécution, lorsque vous l'appelez réellement Cela permet aux applications ioniques démarrer et de démarrer très rapidement. Est-ce que tout cela a du sens ? Ouais. C'est bon. Je vais annuler ma commande de course à sec et la lâcher. OK. J'ai besoin de le faire. Non, je n'ai pas besoin de faire le changement. InCars a déjà effectué ce changement pour moi. Donc, si nous examinons le module de routage des applications, la CLI ionique ou le CI angulaire ont ajouté cette forme et c'est le chargement différé du module de liste pour charger cette page Cela signifie donc que lorsque nous accédons à notre application et que nous utilisons comme chemin à la fin de notre URL, ce module de page de liste sera instancié, ce qui entraînera le chargement de la page de liste par la page de routage de la liste Nous obtenons donc tout cela gratuitement. Vous pouvez le faire avec la CLI angulaire, mais je ne me souviens jamais comment vous ne créez pas un composant, vous créez un module. Je crois que c'est ainsi que cela fonctionne. Mais même si je n'utilisais pas un projet ionique, je préférerais être tentée d' utiliser l'interface de ligne de commande ionique pour créer mes pages, car vous allez avoir ce chargement paresseux dès le départ Je viens donc de le montrer. Nous allons maintenant générer notre dernière page, qui est notre page d'informations sur les étudiants. Utilisez l'une de ces deux commandes qui vous convient le mieux. Encore une fois, il va construire presque exactement le même échafaudage Je vais laisser tomber. De retour dans mon application, vous pouvez voir que j'ai ma page de liste et ma page d'informations sur les étudiants. Maintenant, il y a un changement que je dois apporter. Si vous avez déjà créé une vue détaillée principale, vous savez que lorsque vous accédez à la vue détaillée, vous devez généralement transmettre l'identifiant de l'élément que vous souhaitez voir. Et ce n'est donc pas différent. Cela a quand même apporté une modification au module apparalti pour moi, mais je n'ai pas besoin de toucher à celui-ci Mais dans le parcours pour la page d'informations sur les étudiants, je dois ajouter cet identifiant de deux points au chemin. Ouvrez donc le routage des informations sur les étudiants, trouvez le chemin et ajoutez un identifiant de deux points. Cela signifie que dans notre application, nous aurons un itinéraire qui ressemble à ceci. OK. Nous aurons donc juste une taxe d'identification à la fin du trajet. Et cela sera transmis en tant que paramètre de route ID. J'ai une question Y a-t-il une différence entre le fait de procéder de cette façon et le paramètre de route sur le routage chargé en dentelle Vous voulez le mettre dans un module de routage. Mettre ici, tu veux dire ? Ouais. Y a-t-il une différence entre de prononcer l'identifiant Info cool de l' étudiant ? Vous pourriez le faire, mais vous ne pourriez pas accéder au routage des informations sur les étudiants et y apporter des modifications. Peut-être que c'est bon. Alors peut-être que c'est bon. Alors peut-être avez-vous un chemin appelé Edit. Est-ce que cela a du sens ? OK. Ouais. Je comprends. Donc, en le mettant ici, vous diriez, d' accord, les informations sur l'étudiant en coupant le numéro d'étudiant Et maintenant, dans le module Informations sur les étudiants, vous avez peut-être une modification. Mais peut-être que vous avez également un Delete. Et ce sont des composants différents et vous finissez par avoir. Peut-être avez-vous une page d'informations sur les étudiants et une page de suppression des étudiants. Mais ces deux pages partageraient le même module. Je n'y avais pas pensé. C'est plutôt intelligent en fait. Donc oui, tu pourrais le faire. Mais ce que vous ne pouvez pas faire maintenant , comment ajouteriez-vous un nouvel étudiant ? Parce que tu n'aurais pas de carte d'identité. J'aime donc les garder propres à ce niveau. OK. Ensuite, mettez tout ici parce que maintenant vous pourriez faire des choses comme si vous le vouliez, maintenant vous pourriez le faire. Vous pourriez avoir les informations sur les étudiants en forme de barre oblique. D'accord. Ouais. Ensuite, je peux réutiliser le même composant. C'est vrai. Et je crois que c'est ainsi que je le ferai plus tard. Merci. Tout le monde est libre jusqu'à présent ? Sinon, je pense que celui-ci aura plus de sens au fur et à mesure que nous commencerons à étoffer les pages. Je n'arrête pas de regarder Andrew de haut et il me dit : « OK ». Normalement, à ce stade, je veux dire, je suis assise ici depuis une heure et demie. Lorsque je fais cet atelier en personne. À ce stade, tout le monde est pratiquement prêt à faire une pause. Tu veux en prendre cinq ou tu veux aller de l'avant ? Il est prévu d'y aller jusqu'à dix heures, soit encore une heure. Faites une pause ou continuez. Je vais bien de toute façon. Ouais. Je suis d'accord si on continue, c'est bon. OK. Continuons. C'est bon. Menu latéral. Nous allons donc passer à une interface utilisateur maintenant. Le menu latéral, dans ce cas, utilise le volet on split. Et le moule fendu est un peu compliqué. Vous l'avez probablement tous vu. Lorsque l'écran est étroit, il se réduit à un menu de hamburgers Mais quand il est large, comme on le voit ici, il est toujours visible. C'est donc une interface utilisateur très réactive. La chose importante que vous devez savoir lorsque vous avez affaire à une épingle fendue. R, l'ID du contenu. Ainsi, dans l'attribut content ID du volet divisé se trouve l'ID de l'élément de votre page qui contiendra votre contenu principal. Cela sera clair dans un instant. Il s'agit généralement de la prise de votre routeur. Ainsi, la prise du routeur est l'un des principaux composants de votre page entière. L'attribut désactivé fait ce que vous pensez qu'il fait. Lorsqu'elle est désactivée, la broche fendue, le menu ne s'affiche pas. Je ne peux pas vous dire à quel point il est frustrant d'avoir un menu désactivé qui, pour une raison étrange, vous ne pouvez pas comprendre pourquoi il ne s'affiche pas. Et quand indique au volet divisé dans quelles circonstances il doit être visible. Ça peut être un Bolan. Vous pouvez donc le définir par programmation sur vrai ou faux, ou il peut s'agir d'une requête multimédia CSS complète Il peut donc s'agir d'une requête multimédia indiquant largeur maximale d' écran de 500, par exemple une largeur minimale de 500. J'ai tendance à prendre les valeurs par défaut pour ce genre de choses. Je n'ai donc pas tendance à m'amuser avec eux. Nous avons également l'identifiant du menu. Ainsi, lorsque vous utilisez un moule fendu, un menu y est généralement associé. Il aura donc également besoin l'ID HTML du menu auquel il est attaché. Nous devons également lui indiquer de quel côté de l'écran nous voulons. Les versions antérieures d'Ionic utilisaient la gauche et la droite, mais Ionic prend désormais en charge les cultures et les mises en page de droite à gauche C'est donc un début et une fin. Dans la plupart des cultures occidentales, le début serait à gauche et la fin à droite. Et enfin, vous devez lui dire à quoi il doit ressembler. Il s'agit du type de menu. Et j'ai une animation ici. J'espère que ça va se passer. J'ai dû créer cette animation juste pour me prouver que ces trois types de menus étaient différents. Regardez-les quelques secondes. Dites-moi si vous pouvez comprendre quelle est la différence entre Push et Reveal. La superposition est assez simple. Mais quelle est la différence entre Push et Reveal ? N'importe qui ? Puis les arrière-plans se déplacent sur Push. Ça ne passe pas à la révélation. Quel contexte ? Le menu, le menu de retour qui indique « Accueil » dans Roster ? Correct. Ouais. Il m'a fallu beaucoup de temps pour m'en rendre compte. En fait, j'ai publié cette animation sur Twitter et beaucoup de personnes me demandaient encore quelle est la différence entre Push et Reveal. Donc tu as raison. Le menu ne s'affiche pas en mode d'affichage. OK. Pourquoi ils se sont battus contre cette ionique Je n'en suis pas vraiment sûr. Ça ne m'est jamais venu à l'esprit. On dirait que cela ressemble plus à du drag et je pense que les spécifications du matériau sont celles que l'on considère comme l'axe Z. Il y a donc des couches au-dessus des choses. La conception des matériaux utilise-t-elle généralement le révélateur ? C'est l'une des spécifications. La bibliothèque de matériaux est censée être construite de la même manière que ces spécifications. Mais oui, la conception des matériaux dit qu' il devrait y avoir un axe Z. Je t'ai trouvé. Et si ils sont ensemble, ils poussent juste l'un d'entre eux à l'écart, n'est-ce pas ? Ouais. Je suppose que c' est leur raisonnement. Très cool. Je n'ai utilisé l'overlay que personnellement OK. Donc, volet divisé, nous allons avoir un menu, et le menu devait comporter deux pages, la page d'accueil et la page de liste. Et la façon dont nous l' implémentons consiste à utiliser un tableau de pages d'application sur le composant de l'application. Si je ne me trompe pas. Celui-ci est également ici. Ouais. Les composants de l'application sont déjà terminés, nous pouvons donc simplement les reprendre dans l'essentiel. Ouvrez le composant de l'application. Et je crois qu'il suffit de coller. Non, je n'ai pas aimé ça. Oh, je vois. Parce que j'ai transféré le service étudiant. Encore une fois, je veux le supprimer. Revenez ici et laissez VS Code le trouver pour moi. Nous y voilà. Et puis il veut ma ligne vide. Alors maintenant, j'ai un ensemble de pages, home et Roster. Donc, ce que nous faisons ici, nous allons avoir une étiquette pour le titre du menu, Home et Roster. Quelle est l'URL. Alors, où ira ce truc ? Quel itinéraire ? Alliez-vous utiliser le parcours local ou le parcours du roster ? Et puis quelle icône utiliser ? C'est clair pour l'instant. Ensuite, nous allons itérer sur ce tableau et créer le menu Donc, si notre application a changé dans le navigateur , c'est toujours le plan de distribution. Si vous avez laissé Ionic Serve en cours d'exécution, vous ne verrez aucune modification car nous n'avons pas encore apporté de modifications à la page d'accueil. OK. OK. Nous avons donc créé un tas d'autres fichiers, et nous avons apporté des modifications à l'application, devrait être continuellement reconstruite et restituée. Mais comme nous n'avons pas encore apporté de modifications à la page d'accueil, vous ne la verrez pas. OK. Et si je le fais dans cet ordre, c' est essentiellement parce que la révélation finale sera un peu plus impressionnante. Nous avons tout fait correctement. Je suis juste curieux. C'est bon. Ensuite, voici ce que nous allons faire pour créer Well, pour démarrer notre épingle fendue. Cela se trouve dans le code HTML du composant de l'application. Donc, pour le moment, la seule chose dans le code HTML du composant de l'application devrait être la sortie sur l'application et la sortie sur le routeur. C'est donc le strict minimum pour afficher quoi que ce soit dans une application ionique OK. Et celui-ci, je ne vous ai pas donné de copie et de pastibilité. Je vais donc m'en occuper. Et on dirait que je suis resté bloqué sur mon autre écran. OK. Je vais faire une petite pause pendant que vous tapez tous ceci dans votre application. Vous pouvez donc voir en bas que j' ai la prise du routeur. Ainsi, tout le volet on split enveloppe la prise on router et tout ce code entre dans la balise on app Est-ce que cela a du sens ? Ouais. Je vais aussi le taper. OK. Eh bien, voulez-vous me regarder le taper ou voulez-vous que je tape hors écran pour pouvoir le copier. Vous pouvez le faire hors écran, cela vous facilitera la tâche. OK. Curieusement, le copilote a fait un très bon travail. Donc, à l'intérieur du volet divisé, nous avons le menu activé, et c'est ce qui se trouvera dans le composant du menu de gauche. Nous commençons donc par un en-tête, qui est cette petite zone grise en haut, et l'en-tête se compose d'une barre d'outils, composée du titre contenant le mot menu. C'est un schéma que vous verrez se répéter encore et encore dans Ionic Un en-tête ou un pied de page contient une barre d'outils, qui contient une collection de boutons de titre, qui contient des boutons C'est très hiérarchique, mais très cohérent. Donc, ici, nous n'aurons qu' une barre d'outils avec le mot menu à l'intérieur de l'en-tête. En dessous de l'en-tête, il n'y a aucun contenu. Presque tout ce que vous voulez rendre en ionique doit être contenu en ions Et sur la diapositive suivante, je crois, nous y mettrons le contenu du menu. Vous n'avez donc pas besoin de taper dans le menu. Nous allons aller ici. Qu'est-ce que le Content ID dans cet exemple ? Est-ce une directive ou quelque chose d'autre. Excusez. OK. Vous parlez donc avec cet identifiant de contenu en haut de la page ? Oui. Cela nous indique que le volet divisé et le menu contrôlent les éléments qui se trouvent dans un autre élément HTM dont l'ID est le contenu principal. 3. Session2: OK. OK. Tout le monde. Bienvenue à la deuxième session. À ce stade, nous devrions tous avoir une liste de classes qui ressemble à ceci, et ce soir, nous allons essayer de l'étoffer avec quelques fonctionnalités et d'autres composants d'interface utilisateur. Et comme avant, s'il s'avère que je vais trop vite ou si je néglige un concept important qui n'est pas évident pour tout le monde, arrêtez-moi et nous ralentirons un peu Encore une fois, comme la dernière fois que nous aurons terminé, je pourrai rester un petit et visiter n'importe quoi quand nous aurons besoin de vous. Ça sonne bien ? Ouaip. C'est bon. Donc, à partir de là, je pense que nous avons la photo de l'individu et son nom, n'est-ce pas ? Nous n'avons rien d'autre ici, et nous n'avons pas le fabuleux bouton ici Correct. Et pour une raison ou une autre, il n' aime vraiment pas avancer. OK. Nous avons déjà parlé des icônes. Je ne pense donc pas que nous ayons besoin d'y revenir à nouveau. Mais pour résumer, s'il y a des icônes que vous souhaitez rechercher, vous devez savoir où les trouver, il vous suffit de les obtenir à partir d'icônes OK. Alors allons-y directement. Et c'est ce que nous allons ajouter à la page de liste. Et en regardant ce code très rapidement. Cela va créer les deux boutons sur le côté droit du nom de chaque étudiant. Nous allons donc créer un conteneur de boutons à l'intérieur de chaque élément ionique, et chaque conteneur de boutons contiendra deux boutons, et ces boutons seront composés d'icônes uniquement, d' ellipses pour nous donner un menu détaillé, puis du chevron avant qui nous mènera à la page Rofter. OK. Ça a du sens ? Ouais. C'est bon. Voyons voir. Si je peux le faire à tes côtés, mais que je l'ai toujours. Ça va être difficile à faire en même temps, n'est-ce pas ? Faisons-le de cette façon. Si je vais sur la page de mon coq, ma page HTML de liste Et nous avons l'on list et le on om avec icône représentant le contour de la personne , puis une étiquette pour le nom de la personne. Donc, juste après cela, nous voulons que certains boutons soient placés à la fin en une minute, ici sur le gestionnaire de boutons placés à la fin en une minute ici sur le gestionnaire Cette fonction n'existe pas encore, mais nous allons écrire une fonction appelée present action sheet, et nous allons transmettre l'étudiant actuel, afin que chaque ligne ait son propre étudiant à cause du NG four. OK. Et puis à l'intérieur du bouton. Oui, nous allons utiliser une icône activée avec une icône de machine à sous uniquement, donc il n'y aura pas de texte sur ce bouton. Et je veux le contour horizontal en ellipse. Si je ne fais rien d'autre, laisse-moi reprendre mon temps. Texte absolu. Oh. OK. Tu es muet. Tu es muet. OK. OK. Depuis combien de temps suis-je resté muet ? Depuis que tu es parti. C'est bon. Dois-je revenir en arrière Je ne pense pas que nous en ayons entendu parler lorsque vous faisiez le toboggan. Ouais. Nous sommes donc arrivés ici, non ? Tout le monde est d' accord avec celui-ci ? Je veux dire, au moins ma liste résultats ressemble à celle que vous présentez. Tout le monde a quelque chose comme ça ? OK. Ouaip. OK. Je m'excuse. Alors, est-ce que tout le monde a créé une fonction vide pour présenter une feuille d'action ? Cela ne fait rien. Cela nous empêche simplement d' avoir une erreur dans la console ? Oui C'est bon. Nous allons donc opter pour celui-ci. OK. Alors maintenant, revenons ici. OK. Nous allons maintenant étoffer un peu plus l'interface utilisateur avec le slider Je pense que nous avons tous déjà vu cette interface utilisateur. Ce que nous faisons ici, c'est que nous devons ajouter un composant d'options d'éléments ioniques. Et avec cela, nous pouvons ajouter un bouton chaque côté de l'article. Il restera donc masqué jusqu'à ce que l'utilisateur glisse vers la gauche ou la droite Dans ce cas, je veux créer un bouton de suppression sur le côté droit. Ainsi, si l'utilisateur glisse vers la gauche, il verra le bouton de suppression. C'est le balisage dont nous avons besoin pour que cela se produise, et il vient juste après la fermeture de l'étiquette ion items Fais-le ici. Je trouve le tag fermé de l'article ionique, et j'ajoute le côté « on options », ce qui signifie qu'il se trouvera sur la droite pour la plupart d'entre nous. Ici, je vais utiliser la couleur de danger, qui est rouge par défaut à quatre ions, et je vais supprimer le bouton Donc, deux ou trois choses. Je crois que j'en ai parlé la dernière fois. Chaque fois que vous avez un conteneur, un objet ionique capable de gérer plusieurs choses, comme bouton ou, dans ce cas, une option sur un article Vous le mettrez généralement dans une version plurielle du même nom de tag Ainsi, le contour des boutons ne contient aucun objet de bouton. Dans ce cas, une option contient une option. Est-ce que cela a du sens ? OK. Et puis pour le moment, nous allons avoir des événements en un clic que je vais appeler. Confirmez que l'étudiant réussit l'étudiant actuel. Nous sommes toujours dans le NG Four, donc nous avons toujours un étudiant. OK. OK. Et encore une fois, il n'existe pas encore. Maintenant, il y a une chose vraiment cool à ce sujet. Laisse-moi te montrer ça très rapidement. Accédez à la page rendue. Alors maintenant, je devrais pouvoir le faire glisser et obtenir le bouton de suppression. Et comme il n'y a aucune fonction, elle ne fera rien, on me donne un message d'erreur dans la console. Mais pour les sourires, vous n'êtes pas limité parce que vous n'êtes pas limité à un seul et cela devrait aller de soi car il contient le contenant à plusieurs composants Donc, pour les sourires, si j'en donne deux, il y en a deux. Je me suis donc demandé un jour combien de personnes pouvaient en supporter. Et il est intéressant de noter qu'il en supporte à peu près autant que vous pouvez en lancer. Et il fait le bon choix. Je veux dire, le balisage a l'air stupide, mais le balisage fonctionne. J'ai donc trouvé ça plutôt cool , mais ils le soutiennent. Combien en ai-je fait pour en retirer ? OK. Pas mal. OK. Et je suppose que vous pouvez également l'utiliser comme icône la place des mots de Kevin. Curieusement, non. Parce que vous remarquez qu'il ne s'agit pas d'un bouton activé. C'est une option d'article ionique. Mais tu soulèves un bon point. Permettez-moi de m'arrêter, je n'ai jamais fait ça auparavant. Voyons donc si nous devons faire ce que je dis. C'était donc l'option. Peux-tu y mettre une icône ? Il ne semble pas qu'il supporte une icône. C'est dans la partie coulissante de l'article de la documentation. C'est bon. Alors, voici ce que nous faisons maintenant ? Non, voilà. Ouais. OK. Je suis heureuse de me tromper. Cela a tout à fait du sens. Donc, dans ce cas, nous aurions pu avoir l'option ion item à la place. Eh bien, essayons-le. Nous aurions pu le faire je pense que c'est une bonne idée. Et puis, à quoi sert le clic ? À propos de l'Offman's Bill ? Est-ce que c'est le cas ? Non J'ai besoin d'un emplacement. C'est bon. Je n'ai jamais eu peur de coder en direct et d'expérimenter à la volée. C'est la mort de Demo God, non ? C'est vrai. Maintenant, la question qui se pose est la suivante : où est mon application ? Voici mon appli. Regarde ça. Ce n'est pas tout à fait correct. Des types pour lesquels j'en avais encore un de plus. OK. Je suppose donc que nous aurions pu faire la même chose ici. Rouler est synonyme de danger. Non Ce serait donc mettre celui-ci sur l'option. Voilà. Comment est-ce ? Honnêtement, je crois que je préfère ça. Je vais donc me débarrasser de celui-ci. J'ai juste une option avec l'icône. Et ça rend. OK. Pas mal Bonne décision. Honnêtement, il ne m'est jamais venu à l'esprit d'y mettre une icône. Je ne l'ai jamais vu se faire. Il s'agit toujours d'un bouton de texte. C'est bon. Est-ce que tout le monde est coincé ici ? Ouais Laissez-moi obtenir le code très rapidement. Oh, bien sûr. Ou voulez-vous le code de l'icône ? Oh, le code de l'icône. Ouais. Code d'icône que j'ai ici. Peux-tu lire ça ? Ouais Ouais. OK. C'est bon. Préviens-moi quand tu l'auras. Et vous pouvez probablement deviner ce qui va suivre. La prochaine chose que nous devons faire est de simplement étoffer cette fonction manquante. C'est bon, j'ai compris. Ensuite, c'est ce que nous ferons. OK. Non, du moins pour le moment. OK. La prochaine chose que je veux faire. Éloignez-vous encore une fois de cela. En bas, il s' agit d'un bouton d'action flottant. C'est fabuleux, et je crois qu'il est principalement utilisé dans le design de matériaux Je ne crois pas l'avoir beaucoup vu dans iOSAsthh les applications Google l' utilisent dans Gmail et Google Docs OK. Donc, pour l'utiliser, et j'ai trouvé que c'est juste un menu contextuel rapide, presque à des fins de débogage Il s'agit donc d'un bouton pour ajouter un étudiant, et il s'agit d'une réinitialisation l'application à son état d'origine, et je crois que celui-ci devait être tout supprimé puis voir la base de données. Pour ce faire. Juste deux choses à savoir sur une fabuleuse. Lorsqu'il est ouvert, il est activé. Vous pouvez définir l' attribut edge sur true ou false. Si c'est vrai, voyez si je comprends bien, le fabuleux s' affichera sur le bord de l' en-tête si la verticale est verticale Donc horizontal et vertical pour déterminer où le fabuleux est positionné sur l'écran OK. Je ne l'ai vu que dans un coin, mais tu peux aussi les mettre au milieu. Je crois que lorsque le bord est vrai, il chevauchera un peu l'en-tête. Et si c'est faux, il figurera sous l' en-tête du contenu. Et j'ai une autre note ici. Si la verticale est réglée vers le bas, elle doit être utilisée avec la fente fixe. C'est une note que j'ai pour moi, et honnêtement, je ne me souviens pas de ce que cela signifie. OK. Donc. C'est le balisage qui permet à ce fabuleux menu Nous allons donc créer un aperçu du conteneur situé à l' extrémité horizontale inférieure droite, sorte qu'il se trouve en bas à droite. Et ici, j'utilise Slot Fixed. Et il sera composé d'un fabuleux bouton. C'est là que vous voyez lorsque le menu n'est pas développé. Ce sera juste une icône avec une ellipse verticale. Une fois qu'elle sera étendue, nous aurons la liste fabuleuse Et il s'étendra vers la gauche jusqu'au début de la page. Et il y aura quelques boutons. Et souvenez-vous que je disais que l'ionique est vraiment cohérent dans la façon dont il nomme les choses Cela semble être une exception car la liste contient les boutons. Ce n'est pas une collection de boutons fabuleuse. C'est une collection figurant sur une liste fabuleuse. Faisons-le très rapidement. Regarde si je peux le faire. Cela fait beaucoup de texte à l'écran. Laisse-moi le faire en morceaux. Ce sera l'élément de gauche dans le contenu. Donc pas fabuleux. Je ne sais pas comment il sait que je voulais le faire. Très bien, je crois que tu prends un copil Ça devient un peu effrayant. OK. Vous utilisez Copilot pouvez-vous me donner le lien pour cela ? Ouais Nous en parlions la dernière fois. J'ai le chargement de l'extension ici. Non, tant pis, désolée. Je pensais que tu utilisais les extraits. Ouais. J'ai quelques extraits. C'est bon. Je vais juste taper. Je ne peux pas le voir maintenant. J'en ai un qui est ionique. J'en ai quelques uns sur les bribes. C'est celui-ci sur Just Called on Snippets. Je veux revenir ici. Je pourrais probablement simplement désactiver le copilote. C'est bon. Donc ici, nous sommes sur Fab Button. Les ellipses verticales. Et puis après le bouton. OK. Oh, plutôt bien. Je vais en avoir juste quelques autres. OK. L'icône est un œuf, mais pour moi, elle ressemblait suffisamment à une graine pour que j'ai décidé de l'utiliser pour démarrer la base de données. Mais pour l'instant, nous n' allons même pas ajouter de fonctionnalité à cela. Si ça marche, c'est notre menu qui fonctionne. Est-ce ce que tout le monde possède ? OK. Si vous le souhaitez, vous pouvez jouer avec celui qui se trouve du côté de la faille à égalité de départ Si vous préférez qu'il grandisse, nous devrions être en mesure de le remplacer par side equal top. Alors grandis. OK. C'est chouette. C'est une petite fonctionnalité sympa. Je l'utilise beaucoup pour le débogage. Je vais créer une petite usine de débogage qui n'est activée que lorsque le mode production est faux ou que le mode développement est vrai ou quel que soit le mode utilisé par lorsque le mode production est faux ou que le mode développement est Angular Je vais saisir des éléments tels que la base de données, effacer la base de données, effacer les journaux, me montrer les informations sur l'appareil, etc. Ou si j'écris un jeu, j'en aurai un qui jouera à l'intégralité du jeu jusqu' au dernier coup afin de pouvoir tester le scénario de fin de partie. OK. OK. Vous pouvez également les modifier par programmation. Ils ont tous une API, mais j' essaie de faire le plus possible en balisage Tout le monde est prêt à passer à autre chose. Est-ce que tout le monde en a une fabuleuse ? Ouais Ouais. C'est bon. Il est donc temps d'intégrer certaines fonctionnalités à ces interfaces utilisateur. N'oubliez donc pas que j'ai mentionné que nous allons avoir besoin de certains contrôleurs impératifs. Alors faisons-le maintenant. Est-ce que tout le monde connaît la feuille d'action ? C'est le petit menu qui apparaît en bas ? Je pense qu'IOS et Android en ont une version. Et comme vous vous en doutez, Monic va vous donner celui qui semble négatif pour votre appareil Vous les construisez cependant par programmation. Vous ne les créez pas en HTML. Vous les créez en dactylographié. OK. Mais nous avons cette fonction vide. Nous allons devoir le marquer comme une synchronisation car tous les contrôleurs ioniques sont asynchrones Nous allons donc attendre les fonctions que Donc, la première chose que je veux faire est de créer des boutons. Normalement, je ferais tout cela en une seule fonction géante, mais c'est vraiment difficile à présenter. Donc, ce que je vais faire, c'est créer les boutons abord, puis je les combinerai tous et les afficherai. Est-ce que cela a du sens ? Donc avec mon code ici. Non. Allons-y. B dans le texte dactylographié des listes Avant de présenter la fiche d'action, non, désolé. À l'intérieur de la feuille d'action. Nous allons donc créer un bouton. Il s'agit d'un bouton de type feuille d'action. Ce qui donne cette belle intelligence. OK. OK. Et que voulons-nous que cette fonction fasse ou que voulons-nous que le bouton fasse lorsque l'utilisateur clique dessus La première chose à faire est donc l'étiquette de texte de l'élément de menu, l'icône que nous voulons présenter, qui est juste le nom des icônes provenant des icônes. Ensuite, la fonction que nous voulons exécuter pourrait être une fonction de nom, mais dans ce cas, je vais simplement utiliser une fonction flèche. Et la fonction existe déjà sur le service aux étudiants. Donc, ce service aux étudiants que Mark présente. J'ai besoin d'une virgule. Puis un point-virgule Et puis, comme je le fais souvent, j'ai oublié d'importer le bouton de la feuille d'action depuis Ionic Angular Est-ce que tout est clair ? OK. Est-ce que tout le monde a celui-ci ? Ouais Alors, est-ce vraiment le verso comme ça ou est-ce que ce sont des guillemets simples ? Ça peut être l'un ou l'autre. OK. Je crois qu'à un endroit, je me rappelle pourquoi j'ai fait ça. Si vous tapez des guillemets simples dans PowerPoint, ils sont automatiquement convertis Curly, ce qui signifie que vous ne pouvez pas copier-coller J'ai donc commencé à utiliser des diapositives backticks. C. D'accord. C'est une bonne question. OK. Mark absent sera donc presque exactement pareil. Tellement paresseux. Je vais le souligner. Et puis déplacez les options vers le bas. Faites une copie du bloc. Certains d'entre eux me gênent. OK. Marquer le bouton comme absent. Mark est absent. Et voici les grandes lignes. Et celui-ci, je vais appeler le service étudiant à Mark Absent. Dites-moi quand je pourrai passer à autre chose. Et sur le mien, tout était rouge quand je les ai mis dedans. Je dois donc les mettre au mauvais endroit. Voulez-vous partager votre écran très rapidement ? Je ne peux pas parce que ce n'est pas le cas. Je suis sur ma tablette là-dessus. OK. Assurez-vous que les constantes qui présentent une fonction de feuille d' action se trouvent à l' intérieur. C'est pour cela que j'ai fait la même chose. Quand j'étais jeune, j'ai juste commencé à taper dessus à l'extérieur. Puis je me suis souvenu qu' on ne pouvait pas avoir une constante dans son cours. OK. OK. C'est ce qui l'a fait. Je l'ai fait OK. Nous n'avons donc que quelques boutons à créer, mais ils seront tous créés de manière très similaire. Encore une fois, je vais juste créer un nouveau bloc. Et voici la suppression des étiquettes de texte du bouton Supprimer. Utilisez l'icône en forme de corbeille. Et celui-ci, remarquez que j' y ajoute une autre propriété. J'ajoute un rôle, et ce rôle est destructeur. OK. Destructive ne fait la différence que sur iOS. Android, ça ne fera aucune différence. Mais sur IOS, cet élément de menu sera affiché en rouge. Ensuite, pour le gestionnaire, je vais appeler cet étudiant à supprimer confirmé Tout le monde l'a ? 1 seconde Bien sûr. Michael, avons-nous deux boutons sur le bouton Supprimer l'étudiant confirmé ? Avons-nous deux boutons sur Confirmer la suppression de l'étudiant ? Eh bien, pouvez-vous simplement y montrer le code de la niveleuse pendant une seconde La mienne ? Ouais. C'est très bien OK. Toutes ces actions sont donc présentes. OK. C'est mon problème. Correct. Répare facilement. C'est vrai. Et confirmez, nous allons finir par mettre en place, vous savez, une boîte de dialogue de confirmation et dire : Êtes-vous sûr de vouloir supprimer cette personne ? C'est pourquoi je n'appelle jamais Delete sur le service aux étudiants pour l'instant. Je t'ai trouvé. C'est logique. OK. Permettez-moi de le remettre ici pour le moment. OK. Et je crois que c'est notre dernier bouton, et c'est le bouton d'annulation. La feuille d'action apparaît donc. Tu ne veux rien faire. Tu veux juste l'annuler. C'est un bouton d'annulation. Notez que celui-ci n'a pas de gestionnaire. Donc parce qu'il n'en a pas besoin. Donc je vais juste prendre. Même chose, dupliquez-le, débarrassez-vous du gestionnaire. Appelez ça le bouton d'annulation, le Texas annule contre les vêtements et le rôle est d'annuler. Il y a donc des rôles intégrés au bouton d' annulation de la feuille d'action en tant que l'un d'entre eux, ce qui signifie simplement ne rien faire. Et comme vous l'avez vu, il y a aussi des effets destructeurs. OK. Alors maintenant, nous devrions avoir quatre boutons qui ne font rien, non ? Ils n'existent pas encore. Ils ne sont pas réellement référencés par quoi que ce soit. La prochaine étape consiste donc à créer la feuille d'action à partir de ces boutons. Laisse-moi déplacer ça vers le bas. Ici, à l'écart de votre chemin. Nous voulons maintenant créer la feuille d'action. Pour ce faire. Désolé, allez-y de même. Désolé, c'est dans la même feuille d'action actuelle. Nous en sommes toujours à la présente feuille d'action. Fonction. Mais cette première ligne ne fonctionnera pas car Mike se souvient jamais d'injecter des éléments dans son constructeur Avant cela, passez au-dessus de votre constructeur et ajoutez un contrôleur de feuille d'action ou un contrôleur d'action de tuyauterie Pourquoi ça ne lui plaît pas ? Parce que je ne l'ai pas importé. Je vais donc importer le contrôleur Action Sheet depuis Ionic Angular Une fois que vous avez fait cela, nous pouvons maintenant revenir feuille d'action actuelle et taper le reste. Nous allons donc créer une feuille d'action et attendre ce contrôleur de feuille d'action. Je l'ai déjà mentionné. Toutes ces fonctions sont asynchrones et renvoient des promesses Pour créer la feuille d'action, nous lui donnons un seul objet d'options. C'est là que nous lui disons ce que nous voulons y trouver. Nous voulons un en-tête dans lequel les cases à cocher sont réellement utiles. Nous voulons le prénom et le nom de famille de l'étudiant. Ensuite, nous allons créer. C'est plutôt bien aussi. Et nous devons créer le bouton en créant un tableau de ces boutons constants que nous avons déjà créés. Cela a du sens ? Avons-nous un script de type ou un gourou angulaire ici ? J'ai toujours posé cette question, et je n'ai jamais obtenu de réponse cohérente. OK. Est-il judicieux d' attendre la dernière instruction d' une fonction asynchrone ? OK. Si vous regardez maintenant le bouton actuel d'une feuille d'action, Typescript pense qu'il renvoie une promesse annulée parce que nous l'avons marquée lors d'une synchronisation et que nous ne renvoyons Mais je pourrais aussi faire une présentation, ce qui revient à une promesse. Et puis Typescript pense qu' il renvoie une promesse nulle. Quelle est la différence entre le retour à la promesse qui nous a été faite par action présente ou simplement l'attente ? Il y a une différence très subtile. Et honnêtement, je ne me souviens pas de quoi il s'agit. Cela a quelque chose à voir, je crois, avec la pile d'appels et avec les erreurs. Je pense que si vous ne renvoyez pas l'action see precent , le résultat de la promesse n'est pas défini Mais si vous renvoyez le pourcentage d'action, vous renvoyez la valeur de la promesse présente Ce qui est également une promesse nulle. Ouais. Donc, la différence telle que je la vois, c'est que nous décidons de revenir indéfini Cette méthode devient donc un feu et un oubli, n'est-ce pas ? Je suppose que oui. Pensez-vous qu'il serait utile de tenir cette promesse ? Je ne sais même pas pourquoi ils tiennent leur promesse, car s' ils reviennent, c'est nul, et peut-être voudriez-vous voir si cela échoue, je ne sais pas. Honnêtement, dans toutes les applications ioniques que j'ai écrites, je n'ai jamais trouvé de raison de le faire. Tu peux même le faire. Vous n'avez même pas besoin de l'attendre. Et je crois qu' il pense toujours. C'est une promesse nulle. Mais j'ai vu d'autres personnes faire des choses comme ça. Ils feront quelque chose après le présent. Mais si vous voulez le faire, vous avez déjà opté pour le modèle d' attente asynchrone, vous pouvez simplement le faire de cette façon Quelque chose comme ça. Remplis-le. OK. OK. OK. Donc, si vous l'avez maintenant, alors quand il sera affiché, nous devrions obtenir une feuille d'action Alors, qu'allons-nous faire à Casey McBry ? Nous allons marquer le présent, marquer l'absence, etc. Nous allons supprimer, cela ne servira à rien et nous pourrions annuler. Vous pouvez également ignorer une feuille d'action simplement en cliquant n'importe où dessus. Et la touche d'échappement de votre clavier. Ouaip. Est-ce que tout le monde a une feuille d'action fonctionnelle ? Oui Oui. C'est bon. Nous allons donc refaire une grande partie de la même chose. En implémentant l' alerte de suppression. Pour ce faire, nous allons avoir besoin du contrôleur d'alerte. L'API est presque identique au contrôleur Action Sheet. Encore une fois, ce que je veux faire pour des raisons de simplicité ou d'espace d'affichage, c'est créer quelques boutons, et cela doit être une synchronisation. Ce bouton de suppression. Supprimer sélectionne Handler. Oui, bien sûr. Supprimer un étudiant. C'est. OK. Donc, faute de frappe sur la diapositive. Je crois que Delete student cherche l'identifiant de l'étudiant. Nous transmettons donc simplement la carte d'étudiant au lieu de transmettre l'intégralité de l'étudiant. Et puis le bouton d'annulation. OK. OK. Et tout comme avant, le rôle de l' annulation fonctionne automatiquement comme vous vous y attendez. Il annule automatiquement l'alerte. ne me manque qu'ici. Avons-nous créé une méthode de suppression des étudiants ? Il devrait s'agir d'une méthode de suppression des étudiants sur le service réservé aux étudiants. Oui, j'en vois un. Et puis, comme avant. Quel était le rôle ? Désolé, est-ce que c'était annulé ? Annulation du rôle. Ouais OK. Et donc aucun gestionnaire n'est nécessaire. Vous pouvez toujours ajouter Handler à tous ces éléments en annulant le rôle. Et j'imagine que vous voudrez peut-être vous connecter. Tu sais, hé, ils viennent de supprimer un étudiant, ce genre de choses. Comme avant, aucun contrôleur d'alerte. Tout le monde a ses deux boutons ? Et le contrôleur d'alerte ? Non Donc, je suppose que je suis là où tu en es. Mon contrôleur d'alerte est démodé et n'a jamais été utilisé. C'est vrai. Parce que nous ne l'avons pas encore utilisé. OK. Donc, pour le faire maintenant. OK. Je vais bien Et encore une fois, il est très similaire au contrôleur Action Sheet. Dans ce cas, nous allons également avoir un sous-en-tête et un message. Nous avons les deux boutons. Maintenant, comme l' comme autre contrôleur, il faut qu'il dispose une fonction de création qui prend un objet d'options. OK. Et c'est dans la suppression confirmée ? Oui, nous en sommes toujours à la date de suppression confirmée. OK. OK. Donc, ce que je veux faire ici, c'est montrer bonjour, voulez-vous supprimer l'étudiant, montrer le prénom et le nom de famille de l'étudiant afin que l'utilisateur sache ce qu'il supprime. Tu sais, il n'y a rien de pire que cliquer sur la mauvaise personne. Et puis un message. C'est vraiment possible. Mais une autre fois. Ensuite, nous ajoutons les deux boutons. Et enfin, si vous prenez tout correctement. OK. Deux ou trois choses. La première, c'est que cela devrait fonctionner. Et cela devrait fonctionner. Et le bouton de suppression appelle simplement le service. Si je supprime le numéro de série. Je peux me débarrasser de Greg. Débarrasse-toi de Neil, ainsi de suite. Parce qu'ils sont stockés localement, même si je les actualise beaucoup de temps. C'est bon. Je pense qu'on y va. Dirigez-vous tous des étudiants abandonnés ? Non. Numéro d'identification Je ne reçois pas l'alerte. OK. Alors, ventilons un peu. Votre suppression confirmée devrait ressembler à ceci. Étudiant confirmé. Bouton Supprimer, supprimer le gestionnaire, supprimer un étudiant, oui. Bouton d'annulation, annulation de fermeture, oubliez les vêtements. Et puis une alerte constante. Oh, d'accord. Voilà mon problème. Et ça va. Oui OK, ça marche. Je manquais la ligne 70. OK. C'est bon. Alors maintenant. Donne-moi une seconde. OK. C'est bon. Nous allons apporter un petit changement. Et ça t'aiderait à voir les diapositives. OK. Je souhaite ajouter une fonction de suppression d'étudiant au composant. Et je vais vous montrer pourquoi. Passons au code et ajoutons une autre fonction. Souviens-toi que je l'avais. C' est ce que je veux voir. qui signifie qu'ici, dans la confirmation de suppression, nous appellerons plutôt cet étudiant Delete. Sur ce point, rien ne devrait changer. En appelant, j'ai changé le gestionnaire du bouton de suppression, passant d'un appel au service étudiant à un appel à cet étudiant de suppression OK. C'est une API un peu plus cohérente, vous savez, nous avons transmis le composant à l'étudiant. Et puis cela masque le fait que le service étudiant veut simplement le faire par carte d'identité. Passons donc l' étudiant à part entière à celui-ci. Eh bien, pendant et pendant l' appel. OK. J'ai obtenu. OK. Donc, ce que je veux faire ici, c'est utiliser le dernier des contrôleurs ioniques que nous utiliserons ici, savoir le contrôleur Toast Donc, la plupart du temps, vous voulez envoyer à l' utilisateur un message indiquant que quelque chose s'est passé. Mais ce n'est pas suffisamment critique pour arrêter l'utilisateur. Et si l'utilisateur rate le message, ce n'est peut-être pas si grave, non ? C'est donc l'étui d'utilisation idéal pour porter un toast. OK. Donc, vous pouvez voir la photo du toast ici. Donc, ce que je veux faire maintenant, c'est implémenter le reste de la fonction de suppression de l'étudiant. OK. Vous verrez donc que l'API du contrôleur Toast est presque exactement la même que celle du contrôleur d'alerte. Mais dans ce cas, je n'ai aucun bouton, donc c'est une fonction beaucoup plus simple. Laisse-moi t' en débarrasser. Entrez dans ma fonction de suppression des étudiants et configurez-la. Supprimer l'étudiant renvoie une promesse afin que nous puissions l'attendre. Ensuite, nous allons créer un toast. Et vous voyez probablement déjà l'erreur que j'ai ? Et c'est que je n'ai pas encore de manette Toast. Sauvegardez donc dans le constructeur, post-contrôleur, puis importez-le depuis ionic angular Alors je peux venir ici et terminer. Mon toast contient un message. Et une bonne. Il a été supprimé. OK. Et maintenant, le message est assez simple. Que souhaitez-vous dire à l'utilisateur Les autres options sont les pendant combien de temps souhaitez-vous afficher ces informations ? Et où souhaitez-vous afficher ces informations ? Et dans mon cas, je veux continuer et montrer 3 secondes. C'est donc en millisecondes. Et je vais le mettre en haut de l'écran. Il y a d'autres choses que nous pouvons faire. Nous pouvons utiliser le danger de couleur pour le montrer en rouge. OK. Je pense que ce qui est cool, c'est que si vous contrôlez l'espace, vous pouvez vraiment vous mettre tous dans le bon sens, cela vous indique quelles sont les autres options ici. Vous pouvez donc ajouter des boutons à un toast, tout comme nous avons ajouté le tableau de boutons aux autres. Et il s'agit littéralement de la même API. Vous pouvez donc créer un bouton sur lequel l'utilisateur pourrait cliquer pour fermer avant que les 3 secondes soient écoulées. C'est écoulé Vous pourriez lui donner une icône pour le côté gauche, une icône sur presque un en-tête à côté du message. Nous pouvons donc le faire, nous pouvons faire un tract d'icônes, puis présenter le toast. Maintenant, quand je vais supprimer. L'utilisateur. Je reçois la confirmation, puis je devrais porter un toast au sommet. Et vous pouvez voir la petite icône de corbeille et elle a été supprimée. OK. Et je peux aussi le mettre au milieu. Je dois y croire, Bobby. Voilà. Ou en bas. Des questions. Est-ce que tout le monde l' a fait fonctionner ? OK. Normalement, à ce stade, nous serions à l'heure de chaque pause. Il nous reste environ une demi-heure. Et la prochaine chose que nous allons aborder est la page d'informations sur les étudiants. Donc, ce que je pense que je veux faire, c'est généralement le faire après le déjeuner. Il y a donc quelque chose que nous avons oublié sur la page d'information sur les étudiants. Est-ce que quelqu'un sait ce que c'est ? Est-ce que quelqu'un le remarque ? Revenons à l'application. En fait, il y a quelques points que nous avons manqués. Nous pouvons nous étoffer dans les 20 prochaines minutes. Il n'y a aucun code derrière tout cela, à l'exception du nouveau. Rien de tout cela ne fait quoi que ce soit. Et rien ne se passe si nous marquons comme présent. Je vais donc demander un consensus de groupe. Sur quoi aimerais-tu travailler ensuite ? Voulez-vous les marquer comme absents et présents ou voulez-vous , vider données et supprimer tout le monde dans la base Eh bien, allons-y pour le présent et pour l'absence. C'est bon. OK. Donc présent et absent, tu ramènes le code S ? OK. L'interface utilisateur que j' avais imaginée pour le présent et l'absent serait donc une autre icône quelque part dans la liste, ou peut-être remplacerait l'icône par un présent ou un absent. Tu as une préférence ? Est-ce que l'un d'entre eux sonne mieux ou pire pour quelqu'un ? Imaginer cela pourrait finir par être une très petite interface utilisateur. Je pense qu'on va essayer ça. Juste après l'icône représentant le contour de la personne. Ajoutons-en une autre icône. Je crois que nous voulons toujours un créneau égal au départ. Et voici deux façons dont nous pourrions nous y prendre. Je vais le faire verbeusement Celui-ci sera égal à égal Nous utiliserons les mêmes icônes que celles que nous utilisons pour marquer comme présent et supprimer. Donc, le présent et le hors plan marquent les absents. Si nous faisons cela, nous avons une icône pour le moment, puis une icône est absente, ce qui signifie que nous devons décider laquelle afficher. Nous pouvons le faire de deux manières. Nous pouvons le faire. Nous allons NGF : cette icône ne s' affichera que si statut d'étudiant est égal au statut actuel. OK. Et puis nous pouvons le faire, un statut d'étudiant est égal à. Absente. Donc, avant de l'enregistrer et de le faire afficher, que va-t-il nous montrer maintenant ? Qu'est-ce que ça va faire ? Il va afficher l'un des deux boutons. Tu es sûr ? Désolée. L'un des deux. I Et si c'est le cas ? Parce que vous vous souvenez qu'il s'agit d'un champ facultatif, il peut donc être nul. Donc, en regardant ça. Je ne suis pas très content de cette interface utilisateur. Qu'est-ce que tu en penses ? OK. Et je suppose que ça marche. Ajoutez une troisième icône. Une icône du néant ? Que se passe-t-il si vous. Tu pourrais certainement. Nous pouvons donc ajouter pour en avoir un autre. Et je pense que vous pouvez vraiment le faire si vous lui donnez un nom qui n'existe pas. Je vais donc l'appeler Mike. Et vous pouvez simplement dire NG Pas le statut d'étudiant. Donc, si cela n'a aucune valeur, alors je pense à ce qui va se passer. Ouais. C'est ce que tu avais en tête ? Je n'ai plus rien, le rendu. Génial Qu'est-ce que tu as changé ? J'ai ajouté un. J'ai mis un Tilda au lieu d'un Okay. Je vais bien OK. Donc c'est pas mal. Mais ensuite, j'ai commencé à me demander quel est le but de l'icône représentant une personne. Mais peut-être que la chose à faire est de mettre l'icône de la personne, si ce n'est le statut d'étudiant, puis de se débarrasser complètement de celle-ci. Comment est-ce possible ? Je t'ai prévenu il y a quelques jours. Je ne suis pas designer. C'est pourquoi j' utilise Ionic car je peux généralement très bien copier leurs motifs Peux-tu relire le code ? Bien sûr. Il semble que nous ayons besoin de deux nouvelles versions de l'icône de la personne. Eh bien, avec un plus à côté et un autre avec une barre oblique C'est bon. Regardons ensuite Look at on icons. Et regardons l' ensemble de notre personne. Voilà. Plus et Mus. Nous l'utilisons pour ajouter une personne. Ouais OK. Mais nous avons rempli et laissé des places vides Vous avez donc un plan et vous l'avez rempli. OK. Au lieu du globe oculaire. Et puis vous avez Sharp, mais je ne pense pas que cela nous aide vraiment ici. Je veux dire, encore une fois, c'est un peu. Mais il y en avait un autre, n'est-ce pas ? C'est quoi celui-ci ? Je n'aurais pas deviné que c'était l'accessibilité, mais d'accord. Nous pourrions donc utiliser celui-ci pour je ne sais pas, ou nous pourrions utiliser celui-ci pour. Ce corps. Ensuite, vous pouvez utiliser Okay. Personne et description de la personne ? Peux-tu en changer la couleur ? Oui, elle le pouvait. À quoi penses-tu ? Je ne sais pas Contour noir uni noir ou gris ou inconnu. Eh bien, je veux dire, c'est un problème de design vous que je ne sois pas designer, donc je m'en fous vraiment. Mais comme vous pouvez le constater, il vous suffit de modifier cette partie. Mais tu avais raison, donc tu pourrais avoir celui-ci, il a une couleur grise. C'est de quelle couleur, OK ? Permettez-moi de revenir sur leurs couleurs . Les boutons ont une liste de couleurs. La couleur du vol est égale à la lumière. Nous travaillons. Et puis tu pourrais le faire s'ils sont absents. D'accord. Aperçu de la personne. Et s'ils sont là, personne et vous pouvez même faire de la couleur un succès égal. Non, pas celui-là. OK. Comment est-ce ? Bien sûr. Eh bien, celui-ci est presque invisible, n'est-ce pas ? Je suppose donc que je changerais cela en couleur égale. C'était moyen ? Moyen. Ouais. Oui, ça ne m'aide pas non plus. Y a-t-il un support rempli ? Nous pourrions le faire. Ce ne serait donc qu'une personne. Ouais. Je pourrais vivre avec ça. Donc, les contours sont absents, ils sont verts, ils sont présents et nous ne connaissons pas encore le médium. Et le but du bouton de réinitialisation était de tous les réinitialiser pour que nous ne sachions pas ce qu'ils sont. Je n'arrive à faire apparaître 4. Session3: OK. Ai-je déjà activé la transcription en direct ? Est-ce que cela vient de se produire ? Eh bien, voilà. OK. La transcription est donc activée. Si vous voulez le voir, vous pouvez, je pense que c'est dans le menu Plus. Vous pouvez le voir, changer la taille, etc. Toutes. C'est bon. Sans plus attendre. Donc, à ce stade, nous devrions avoir une page de liste à peu près entièrement fonctionnelle. Et je ne sais pas si tout le monde l'a vu, mais j'ai lancé un défi, à la fois par e-mail et sur Slack, pour voir comment nous pourrions nous débarrasser des trois sur les icônes Quelqu'un a-t-il des idées ou des idées sur la façon de procéder ? Si c'est le cas, allez, oui. Je l'ai fait fonctionner. Qu'est-ce que tu as fait ? Je pourrais donc partager si tu veux. Bien sûr. Permettez-moi de m'assurer que je vais partager l'écran, mais je pense que je dois arrêter de partager. OK. Voyons comment partager un écran ? Je ne sais pas si vous pouvez le voir. Donc je te promets que je l'ai dit. J'ai donc commenté tout ça. Non, c'est juste ici. Donc, ligne 28. Ouais. Donc le nom est lié au nom de l'icône, ai transmis à l'étudiant, et j'ai aussi colorié. Parfait La couleur est basée sur l'attente, qu'avez-vous fait ? Je viens de réussir, donc je ne fais que transmettre le dossier de l'étudiant. La couleur est égale à celle de l'élève chez les parents. Qu'est-ce qui me manque ? Tu savais ce que je voulais dire ? Désolée. Désolée. Ouais. Je me suis dit que j'avais déjà vu cette syntaxe. Et puis les fonctions ne sont que deux instructions H commençant par là. OK. Avez-vous remarqué le défaut en faisant cela parce que vous avez raison C'est un moyen facile de le faire et beaucoup de gens le font de cette façon. Mais il y a un défaut à le faire de cette façon et angulairement. Je veux savoir si tu l'as remarqué ? Je ne crois pas. OK. J'étais train d'écrire des trucs pour la console et je ne sais pas. C'est un peu difficile à suivre. OK. Alors, dis-moi. Insérez donc une instruction de journal de console à l'intérieur de chaque fonction avec le nom de la fonction. Et si je me trompe, je serais très heureuse de me tromper. OK. Parfait. Et puis une autre pour la couleur. Est-ce que quelqu'un sait ce qui va se passer ? OK. Ouvrez donc vos outils de mort. Voilà. C'est ce qui va se passer. Ouais. Ils sont donc appelés tout le temps. Ouais. Chaque fois que cet angulaire doit vérifier si quelque chose a changé, donc pour la liaison de données, il doit appeler ces fonctions car il n'a aucun moyen de savoir qu'il n'a pas besoin de repeindre Dans une application comme celle-ci, ce n'est pas grave, vous ne la verrez jamais. Mais si vous pouviez imaginer quelque chose contenant des centaines de composants liés à des données, ce serait vraiment dommage. Surtout si ces fonctions faisaient autre chose que ce qu' elles font là-bas, n'est-ce pas ? Ces fonctions ne font pas grand-chose. Ce n'est donc pas si grave. Je participais à un projet où ils ont passé souris dessus et ont fait une pause OK. Comme vous pouvez l'imaginer, ce n'était pas beau. Je pense donc que tu es sur la bonne voie. Mais la façon dont j'ai vu cela se faire pour éviter cela est de transformer le nom et couleur de l'icône en un tube angulaire. OK. Et avec un tuyau angulaire, les fonctions sont littéralement les mêmes. Mais parce que l'entrée du tube n'a pas changé. Angular sait qu'il n'a pas besoin de rappeler la fonction. Est-ce quelque chose qui se fait facilement ? Oh, oui. Bien sûr. Veux-tu que je t'en parle ou veux-tu que je sois sûre. OK. Voyons donc où arrêtons-nous l'exécution de l'application. Et allez-y, demandez à Angular. Si vous le souhaitez, nous pouvons simplement le faire sur l'un d'entre eux, le nom ou la couleur. Peu importe le nom. OK. Faites donc en sorte que la CLI angulaire génère un tuyau et que le PXG génère Et puis le nom du tube, donc peut-être le nom de l'icône. Capital ou moi, peu importe. Peut-être que tu vas bien. C'est très bien Ouvrez maintenant le canal de nom de l'icône. Ça va être Vous pouvez commander ou contrôler, cliquer dessus. Dans le terminal. Où est écrit le nom de l'icône de l'application source ? Le contrôle clique-t-il sur le nom du fichier dans la sortie ? Ce type, non ? Celui d'à côté. Je t'ai compris. C'est le fichier de test. Ouais. Cliquons sur l'autre. Le fichier non testé. C'est le module de l'application. Très bien, nous allons prendre celui du milieu. Voilà. OK. OK. Ainsi, lorsque vous utilisez un canal, tout ce que vous transmettez pour la valeur liée aux données sera transmis à la valeur. Donc, ce que vous voulez ici, c'est essentiellement le nom de l'étudiant. Les étudiants. État de présence, non ? Ouais. Vous ne voudriez probablement pas y transmettre la totalité de la valeur étudiante, car vous ne vous souciez que de cette seule valeur. OK. Alors vas-y. La valeur sera donc une chaîne. Je ne pense pas que vous ayez besoin du reste de ces paramètres. Mais ce n'est pas une ficelle. Tu as raison. Ce n'est pas une ficelle. C'est le statut d'étudiant ? Correct. Donc je veux dire, une fois que vous aurez refactorisé ce point, il est probablement logique d'en faire son propre type. OK. Mais pour le moment, tu peux le faire. Ça devrait être normal d'être une ficelle. Et si je m'en sors bien ? OK. Tu pourrais faire exactement pareil. Vous pouvez le rendre absent ou présent. Allons-y avec un étudiant maintenant et je m'en chargerai. Vous pourrez refactoriser plus tard. Donc oui, il ne reste plus qu'à copier-coller le même code OK. Et c'est de la valeur. OK. OK. Donc ça a l'air plutôt bien. Maintenant, revenez dans votre code HTML, où vous transmettez le nom de l'icône d' appel étudiant, transmettez simplement étudiant par étudiant. Il suffit d'étudier, puis de le rediriger vers le nom du tuyau. Nom de l'icône. Et puis débarrasse-toi de ce stylo, OK. Et je crois qu'il y a probablement autre chose que vous pouvez laisser de côté si vous le souhaitez car vous devriez le voir dans la console. Vous verrez que l'un d'eux n' pas appelé encore et encore. Ce dont je ne me souviens pas c'est s'il y a quelque chose que tu ne peux plus utiliser. Oui, débarrasse-toi de ça. OK. Et je mettrais un journal de console similaire dans le tuyau. De cette façon, vous pouvez prouver à tout le monde qu'il n'est appelé que lorsque cela est nécessaire. Et il y a encore quelque chose que tu dois faire ici. J'oublie ce que c'est pour le moment, alors il va falloir le découvrir ensemble. Allez-y, lancez-le. Le fait qu'il soit activé dans le module peut-être tout ce que vous avez besoin de faire car cela a été ajouté automatiquement. Non, il y a un avocat. OK. C'est bon. C'est ce que j'avais peur. Il peut être trouvé. C'est pire qu'un enduit de protection. C'est essayer de dire à quelqu'un d'autre comment porter un gilet de sauvetage. Je sais C'est bon. Donc, le tuyau est là. Dois-je être dans le module Roster ? Retournez dans le module A. Je pense que nous devrons peut-être le déclarer. Non, monsieur. Et je voulais le faire , tu sais, cet après-midi pour être sûre d'être prête. Oh, mon Dieu. Non, je me sens mal. C'est ça ? C'était quoi. Quel est le nom de la pipe ? Dans le fichier TS du point de tube. Voilà. Peut-être pas. Ouvrez à nouveau votre fichier pipe TS. Il s'agit du troisième onglet de votre éditeur. Non, c'est ici. OK. Ouais. Alors, comment devrait-on l'appeler ? Oui, mon cerveau a du mal s'en souvenir et je les utilise tout le temps. C'est l'une de ces choses qu'une fois que vous l'avez écrit, vous n'aurez plus jamais à y penser. Il veut s'assurer qu'il est déclaré ou importé dans le module de page Roster. Oh, peut-être que ça n' entre pas dans le module A. Tu as peut-être raison. Peut-être que cela se trouve dans le module de page de liste. OK. Alors déclarez-le ici. En cours d'importation ou il n'a pas son propre module. Il suffit donc de le déclarer. Si vous tapez le nom de l'icône, il devrait le trouver pour vous. Voilà. Et vous devrez peut-être le retirer du module App. Ici, c'est exact. OK. Voilà. C'est bon. Alors, combien de fois on l'appelle encore ? Une fois pour chaque personne, non ? Ouais. Et voyez combien de fois encore la couleur de l'icône tapez neuf. Alors maintenant, si vous cliquez, cliquez n'importe où. OK. Ouais. C'est bon. Eh bien, ça s'est un peu amélioré, donc ça ne continue pas à appeler, mes boutons ont disparu. Je ne suis pas sûr de ce que j'y ai fait. Ouais Voilà. Oui, neuf fois. Curieusement, le nom de l'icône pipe contient bien le nom de l'icône. Qu'avez-vous fait ? Tu as réinitialisé quelque chose ? Je ne crois pas. Je pense que tu l'as fait. Je pense que vous avez appuyé sur Réinitialiser sur votre fabuleux bouton. Parce que tout cela fait la moitié de l'eau. Oui, probablement. Tous vos statuts de présence ont disparu ? Ouais. OK. OK. Donc tout l' intérêt de cet exercice. Je ne voulais pas vous faire perdre 15 minutes de votre temps. C'était pour vous faire comprendre qu'appeler fonctions à partir de vos modèles angulaires n' est jamais vraiment une bonne idée. Est-ce le message que vous en avez tiré ? Ouais. Totalement. Je n'en avais aucune idée. Je veux dire, j'ai déjà vu ce comportement. Vous n'avez jamais su pourquoi ? Je ne savais pas que je n'avais jamais compris. Je veux dire, je ne connais pas grand-chose à Angular. Est-ce que tout le monde ici va larguer Angular et réagir la semaine prochaine ? Non L'une des choses que j'ai, c'est partie de ce cours dans un livre et un format vidéo pour React. J'ai juste tendance à utiliser l' angle beaucoup plus souvent, donc c'est là que je suis à l'aise. C'est bon. Partageons donc à nouveau. Et nous passerons à la page détaillée de l' étudiant. Andrew, aurez-vous besoin de récupérer ces boutons pour accéder aux informations sur les étudiants ? Je vais travailler. Je vais y travailler. Je vais m'en occuper. C'est bon. OK. OK. Donc, la page d'informations sur les étudiants est la page détaillée, et elle sera principalement consacrée à la création de formulaires lors de la validation. Et comme vous pouvez l'imaginer, ionic possède de nombreux composants, de nombreuses fonctionnalités pour rendre cela aussi simple que possible Mais ironiquement, c'est aussi très compliqué. Sur notre page d'informations pour étudiants, nous allons donc implémenter un bouton de retour afin que vous puissiez revenir au Rosa. Nous allons réutiliser sur les étiquettes. Vous les avez vus, mais nous allons les utiliser dans le contexte d'un formulaire. Nous allons utiliser une entrée active, et la saisie est essentiellement la même que l'entrée HTML. C'est tout ce que vous voulez obtenir des données de l'utilisateur. L'une de ces entrées est la nouvelle de la version six, qui est la nouvelle date et heure. OK. Créons donc une liste d'étudiants et résorbons les arriérés Nous devrions donc tout de suite en déplacer une partie pour vous. Débarrasse-toi de ça. Nous allons ouvrir la page d'informations sur les étudiants. Obtenez la page d'informations sur les autres étudiants, il s'agit donc du code HTML. OK. Nous avons donc déjà un en-tête avec une barre d'outils et nous avons un titre. Désolée. Étions-nous censés créer une page d'information pour les étudiants ? Vous devriez déjà avoir une page d'information sur les étudiants. B dès le premier jour. Nous avons créé toutes ces pages et le routage vers celles-ci. OK. Je ne pense pas en avoir un. Tu ne le fais pas. Alors nous pouvons, si vous voulez partager à nouveau, nous pouvons revenir arrière et le faire pour vous très rapidement. Est-ce un ionique ? Ionic génère des informations sur les étudiants sur la page. Et si vous faisiez les informations sur les étudiants de cette façon, sous votre commandement ? Ouais. OK. Il le mettra en majuscule et indiquera correctement les noms de fichiers. OK. ce que j'ai. OK. Vous avez donc la page d'information sur les étudiants ? Ouais. OK. Votre page d'informations sur les étudiants devrait donc avoir une barre de titre ou un en-tête avec une barre d'outils qui ressemble à ceci ? Ouais Je veux donc le modifier un tout petit peu. De sorte qu'il indique le prénom et le nom de famille de l'étudiant. Et nous le ferons avec une liaison de données de chaîne régulière angulaire . Les étudiants veulent d'abord dire un espace entre eux. Il se plaint parce que je n'ai pas encore d'étudiant. Donc, pour y insérer un bouton de retour , nous avons déjà la barre d'outils, et maintenant nous avons besoin d'un conteneur pour notre bouton, qui sera un bouton d'activation, puis un bouton de retour spécifique . Et ce que nous allons avoir ici, c'est le HRF par défaut. Et cela indique que si nous arrivons directement à la page de liste, y a rien dans l'historique. Et ils ont quand même appuyé sur le bouton de retour. Nous devons leur donner un endroit où aller. Donc, même si le bouton de retour n'est nulle part où aller, nous le définissons comme étant la page de liste. Vous n'avez pas tendance à trop voir ce problème dans une application mobile car en tant que développeur, vous pouvez contrôler la façon dont l'utilisateur se déplace d' un endroit à l'autre. Mais dans un navigateur Web, ils peuvent simplement saisir l' URL de leur choix et y accéder directement. Cela a du sens ? Et puis nous allons également vouloir un bouton de menu. Bien que nous puissions soutenir qu' un bouton de menu n'a pas de sens dans la page détaillée. Ce sera vraiment une décision qui vous reviendra. Alors laissez-moi faire courir à nouveau mon monsieur. OK. Il est en train de compiler. Quelqu'un avait-il des questions sur ce code en particulier ? La syntaxe ? Tout, sauf le bouton de retour, devrait être familier à ce stade. OK. Alors laisse-moi revenir ici. Et voici le mien. Donc, si je pars, laisse-moi ouvrir, tu sais quoi ? Je ne vais pas le faire de cette façon. Nous allons utiliser des arêtes. OK. Donc, ma liste peut en fait être une erreur parce que je n'ai pas de prénom ou de nom de famille d'étudiant. Donc, si vous suivez, c'est ce que vous devriez également voir, vous n'avez pas encore d'étudiant. OK. Ce qui devrait soulever la question suivante : comment faire figurer un étudiant sur la page ? Si vous regardez l'URL, eh bien, je suppose que vous ne pouvez pas regarder l'URL parce qu'elle a échoué. URL des informations sur un étudiant. Si vous vous souvenez que les informations de l'étudiant étaient erronées, cela ne fonctionne pas du tout pour le moment à cause d'une erreur de syntaxe ou d'une erreur de liaison Je peux donc régler ce problème rapidement en venant ici et en disant simplement : OK. Je peux simplement lui donner un étudiant vide sur mon composant et au moins il ne devrait pas échouer, n'est-ce pas ? Mais le titre, il n'y a rien ici. Donc, de même, si je venais ici et que je disais. Prénom John, nom Do Let it rebuild. Et maintenant, nous voyons John Doe. Et nous avons toujours notre bouton de menu et notre backbon. Mais cela ne nous aide pas à mettre l'étudiant sur la bonne voie. Ouais. La mienne ne va pas du tout sur la page étudiante. Que faites-vous ? Rien, c'est tout. OK. Vous souhaitez partager et diagnostiquer ? Je veux dire, pour moi, c'est là que le véritable apprentissage se produit lorsque nous nous asseyons et résolvons les problèmes ? Ouais. Permettez-moi de me joindre à nouveau à l'équipe. OK. Zoomez à nouveau. OK. Je vais arrêter de partager ici. Je veux vraiment m' assurer que nous avons bien compris cette partie car créer le formulaire n'est pas si difficile. Je pense donc que nous avons du temps supplémentaire prévu ce soir. La première partie du formulaire sera agaçante. Le reste est simple. Beaucoup de duplication du code HTML. OK. Que recherchons-nous ? Donc je pense que c'est cette ligne, non ? Ça appelle les informations sur les étudiants ? Oui Vous avez donc lien de votre routeur et vous transmettez le réseau, les informations sur l' étudiant et l'identifiant de l'étudiant. Et que se passe-t-il lorsque vous cliquez sur ce lien ? Ouais Je pense que je sais quel est le problème, mais je veux d'abord le vérifier. Alors voilà, je vais bien. Vous avez des erreurs dans votre console. Cliquez sur le chiffre cinq en haut avec l'icône d'erreur. OK. Le même problème que j'ai eu avant, non ? Parce que je suis mon prénom et mon nom de famille. OK. C'était donc sur le mien qu'il ne s'affichait même pas sur la page. OK. OK. Je suis désolée. Oui, je ne l'ai pas fait pour moi non plus. Donc, si vous voulez y remédier pour le moment, juste pour vous assurer d'y parvenir, ajoutez simplement l'objet étudiant factice dans votre fichier TS d'informations sur les étudiants Oui, ça devrait marcher. Allez-y ajoutez-y un prénom et un nom de famille. Ça devrait être un colon. Le prénom et le nom de famille doivent comporter deux points au lieu d'un signe égal. Parce que vous créez un objet de script de type littéral. Oui, voilà. Ouais C'est le Java qui sommeille en moi. Je ne peux pas vous dire combien de fois je l'ai fait. Merci OK. Donc c'est tellement rendu. Vous n'effectuez toujours pas le rendu ? Étudiant symbolique inattendu à la colonne 19. Ouvrez votre fichier HTML. Il semblerait que vous ayez une faute de frappe. Comment je vois quel est le problème. L'étudiant sur la page. Qu'est-ce que j'ai fait ? La page d'informations sur les étudiants (point HTML) est celle que vous souhaitez ouvrir. Et vous pouvez même voir que le code VS vous indique qu'il contient deux erreurs. Voyez le fait sur la gauche. Le fichier est répertorié en rouge. OK. Cliquez donc sur le fichier rouge ou orange sur la gauche. Ouais Vous avez deux erreurs. Donc, ce que vous avez ici, c'est qu'il vous suffit de placer les bretelles Curly autour de chacune C'est donc le prénom d'un étudiant. Space Pen, c'est parti. Maintenant , ça devrait aller. OK. Voilà. Je suppose. Je vais le faire un peu trop vite. Je l'ai fait. Non, je l'ai fait. OK. Je t'ai trouvé. C'est bon. Je vais arrêter de partager. Déjà. Non, je vais reprendre le partage. OK. Nous devons donc mettre un étudiant sur une page. Et OK. Je crois que j'en ai parlé l'autre jour. Je suis un grand fan de notre X JS, et j'utilise peut-être X JS plus que ce qui est sain, mais je trouve qu'une fois que vous êtes vraiment à l'aise avec celui-ci, vous écrivez un meilleur code. Donc ce code ici. Eh bien, d'abord, permettez-moi de vous demander quelqu'un est déjà à l' aise avec notre XJS ou savons-nous si vous savez ce qu'est notre HKS J'en ai entendu parler. OK. Alors cela peut prendre un peu de temps, il faut certainement un peu de temps pour s'y habituer. Donc, ce que nous faisons ici et je vais essayer d'y aller doucement, c'est que j'ai un observable sur ma page d'information sur les étudiants que j'appelle le signe du dollar étudiant Et ce qui se passe, c'est que j'ai l' itinéraire de la page, qui contient une carte de paramètres. C'est le plan par. Et Angular le rend disponible sous forme d'observable, afin que vous puissiez écrire du code lorsque l'itinéraire change Donc, si la page d'informations sur les étudiants est une page d'informations sur les étudiants, et que c'est la première fois que vous accédez à cette page. Votre composant s'affiche, le constructeur est appelé, le G est activé et il s'exécute, et tout cela se produit dans le cycle de vie angulaire de la page, comme il est censé le Si l'itinéraire change ensuite, mais que la page n'est pas obligée de le faire. Donc, de l'information sur l'étudiant 1 à l'information sur l'étudiant 2. Angular sait qu'il n'est pas nécessaire de reconstruire la page entière à partir de zéro car seule une partie de la carte des paramètres a changé. Vous pouvez donc faire attention. Vous pouvez vous abonner à ces modifications. Le composant ne s'affichera pas, la page ne s'affichera pas. Mais vous pouvez y répondre en faisant attention vous abonnant à la carte des paramètres Donc, ce que je fais ici, c'est configurer un nouvel observable basé sur les modifications apportées au p hyping ces modifications p hyping apportées à une autre fonction RX JS appelée Switch Map indique : Cet observable vient de déclencher la nouvelle valeur Prenez cette valeur et remplacez-la par un autre observable que nous allons obtenir en appelant cette fonction Nous allons donc prendre le paramètre, le paramètre ID de params get ID Et nous allons transmettre cette valeur au service étudiant get student. Nous allons donc demander au service étudiant de nous donner un étudiant deux, trois étudiants. Nous allons prendre cette valeur, et nous allons exécuter un opérateur R XJS appelé TAP, ce qui signifie que nous allons simplement jeter un coup d'œil à la Nous n'allons rien en faire de spécial. Nous allons juste y jeter un coup d'œil. Donc, l'étudiant va nous redonner un étudiant, ou cela ne nous donnera rien si nous n'en trouvons pas un. Donc, s'il n'y a aucun étudiant avec cet identifiant, nous allons demander au routeur angulaire de revenir à la page Roster. Est-ce clair jusqu'à présent ? C'est cool si ce n'est pas le cas. En fait, il existe une méthode secondaire pour implémenter cela, et elle pourrait être plus facile à comprendre. Mais je voulais d'abord passer par la voie la plus difficile. OK. L'étudiant devient essentiellement un observable des étudiants Lorsque le paramètre change, lorsque l'itinéraire change, l'observable étudiant obtient le nouvel étudiant C'est ce qu'il est important retenir de ces lignes. L'observable de la machine virtuelle l' étudiant s'appuie sur l'observable étudiant et transmet simplement cette valeur à un mappeur qui clone cet étudiant pour nous en donner une copie complète exacte. Et Clone Student ne fait qu'une chaîne de parties JS. C'est un clone de Forman que vous avez peut-être déjà vu. Tout cela pour dire que lorsque nous recevons un objet étudiant auprès du service aux étudiants, nous en recevons une copie chaque fois que l'itinéraire change. Où va ce bout de code ? C'est ce que je vais vous montrer ensuite. OK. OK. Et je vais essayer de faire ce genre de live. La dernière fois que j'ai participé à cet atelier, Mike Cartington d'Ionic est juste au moment où je lisais ce code Et l'une des choses qu'il m' a dites , c'est qu'avec une application ionique, vous n'êtes pas obligée de le faire Alors, qu'est-ce que nous allons faire cette fois ? Alors voyons voir. La page d'information sur les étudiants. Je veux toujours un étudiant. Mais cette fois, je vais le prédéfinir comme suit : Laissez-moi y réfléchir une seconde Parce que je veux faire celui-ci comme Mike m'a dit de le faire. Eh bien, permettez-moi de vous demander. Vous voulez que je le fasse de cette façon puis simplifie ou voulez-vous d'abord le faire de la manière la plus simple ? Allons dans les deux sens pour voir ce qui change. OK. C'est assez juste. Donc je veux les étudiants et OK. OK. Laissons-le donc une seconde car je n' ai pas encore le routeur. Souvenez-vous de ce que j'ai dit l' autre jour concernant le fait de ne pas effectuer mes importations ou de ne pas les afficher dans les diapositives. Nous avons donc besoin de l'itinéraire, qui consiste à essayer de le faire de mémoire ici. Ce n'est pas ça non plus. C'est le bon. Avez-vous déjà eu un de ces jours où vous ne vous souvenez plus de votre nom ? N'est-ce pas le routeur angulaire ? Non Non, non, non. Mais nous en avons besoin aussi. C'est donc le routeur. C'est ce dont nous avons besoin. Et c'est ainsi que nous naviguons. Ce sont les cris forts. Donne-moi une seconde. Une de ces choses dont je ne me souviens plus de mon nom. Je l'ai activé. Alors souviens-toi de ça. L'itinéraire activé contient des informations sur l'itinéraire utilisé pour afficher votre page. OK. Nous l'avons donc et la carte des paramètres est sur l'itinéraire activé Comme vous pouvez le constater, il s'agit d'un observable de type. Chaque fois que cela changera, nous allons rediriger sa valeur. Ce service étudiant, ce qui signifie que nous devons obtenir le service étudiant. Vous vous demandez quoi que ce soit, est-ce que Mike code vraiment comme ça ? Oui, il le sait. Service aux étudiants étudiants du service aux étudiants. OK. OK. Si ce n'est pas des étudiants. Je suis également proche, mais nous allons revenir à Roster. Et bien sûr, maintenant nous devons découvrir tous les jolis PS qui sont foirés Aimer ça. Cela ne devrait pas lui plaire. Donc routeur ou carte. Oh. Nous avons besoin de plus de biens immobiliers. Ce plan des commutateurs canalisés Obtenez du service. Ce n'est pas un problème. OK. C'est bon. Il n'y a donc pas d'étudiants. Je pense que ce qui se passe ici, certaines importations sont manquantes. Importer des cartes Switch Maps Spell Import Perfo. Voilà. S : OK. Allons-y. Changez donc les opérateurs map et Taper depuis X JS. OK. Donc, dès que l'identifiant change, l'itinéraire change, nous regrettons l'identification, nous appelons pour aller chercher un étudiant. Si nous ne trouvons pas d' étudiant, nous revenons à la liste. C'est exact. Peux-tu le laisser tel quel pendant 1 seconde. La diapositive ou le code. Ce sont les mêmes. Lequel peux-tu mieux lire ? Le truc dans le rouge. OK. Obtenez. Je change, mec. OK. La carte Switch prend essentiellement la valeur d' un observable et crée un tout nouvel observable et passe à ce nouvel En fin de compte, si nous nous retrouvons avec un étudiant, c'est un étudiant observable Et chaque fois que vous travaillez avec RXJS de cette façon, remplissez-les lentement et composez-les. N'essayez pas de tout transformer en un seul observable. Même cela pourrait être trop. Mais maintenant, je vais créer un modèle de vue étudiant pour le faire progresser. MP provient également de nos opérateurs JS, et Clone student n'existe pas encore. Voir si le copilote sait quoi faire ici ? Pas tout à fait. Maintenant c'est le cas. Et puis les étudiants ont pleuré. OK. OK. OK. Cela a suffi à faire passer l'étudiant de l'itinéraire indiqué sur la page au composant. Donc, sur notre modèle, nous ne travaillerons qu'avec celui-ci. Mike, désolé, est-ce que tout ce code se trouve dedans ? Est-ce que c'est prévu ? Est-ce dans le constructeur ? Ce n'est pas dans le constructeur. C'est juste une partie du composant. Ce sont en fait des composants. Le mien est plutôt foiré. Je ne sais pas ce qui se passe. OK. Vous voulez que je mette dans la chaîne Slack pour que vous puissiez le copier-coller C'est utile, mais ce n'est pas nécessaire pour comprendre la partie ionique. C'est juste que j'ai squigglies rouges partout. Ouais. Je l'ai fait aussi. Principalement parce que si tu n'as pas tout ça. Ouais Tout cela à l'avance, je communiquerai avec vous par la suite. OK. Ouais Je suis en train de me tortiller sur mon constructeur Il indique que le constructeur Member doit être déclaré avant toutes les définitions de méthodes d'instance publique Correct. Oui, j'ai compris , tu l'as. Ouais Et c'est parce que je n'ai pas mis l'étudiant en dessous. Cela devrait le rendre heureux. Selon ce que vous utilisez pour le prêt, la façon dont les applications angulaires sont censées être architecturées ici est que vous avez vos variables d'instance, vos champs juste en haut de la classe, puis votre constructeur, puis vos événements du cycle de vie, puis vos fonctions OK. C'est bon. C'est ainsi que nous faisons entrer l' étudiant sur la page. OK. Essentiellement, l' ensemble de la page d'informations sur l'étudiant, tout le code HTML, est enveloppé d'une balise de conteneur G utilisant une directive NG, de sorte qu' il ne s'affiche que s' il y a un étudiant Je vais le répéter. Nous allons envelopper l'intégralité du code HTML de la page dans un conteneur. Et le conteneur G ne s' affichera que si nous avons un étudiant valide. Cela permet d'éviter les erreurs de référence nulles essentiellement non définies OK. Quelques choses si vous devez déjà savoir à propos du NGF, pour qu'il ne s'affiche que si le NGF est vrai Mais de plus, le conteneur NG est une balise angulaire spéciale qui ne produit aucune sortie. Cela n'affecte pas le balisage. signifie donc essentiellement que tout ce qui se trouve à l'intérieur du conteneur G n'existera pas si nous n' avons pas d'étudiant valide. Le reste de cette ligne est un tuyau angulaire, que nous appelons tuyau. Le canal asynchrone se chargera donc de l'abonnement et du désabonnement pour nous, nous n'avons pas à nous en occuper et du désabonnement pour nous, nous n'avons pas à nous Chaque fois que la machine virtuelle d'un étudiant déclenche une propriété, une nouvelle valeur. Tout ce qui se trouve à l'intérieur de ce réservoir d'énergie sera invité à le repeindre La dernière chose que nous faisons est dire au tube An que quelle que soit la valeur que nous obtenons de cet observable en interne, vers mon modèle Je vais l'appeler le nom invariable d'étudiant. C'est pourquoi je peux dire le prénom de l'étudiant, le nom de Dallast. Je l'ai mis en pratique. Si je viens ici maintenant et que je réduis tout mon contenu. Je peux simplement faire du conteneur GF Not VM dollar En tant qu'étudiant. Et puis fermez le réservoir d'énergie , je ne sais pas d' où il vient. Et il se plaint parce que j'ai toujours un étudiant ? Je n'ai pas reçu de film. Je me suis débarrassé d'un étudiant, n'est-ce pas ? Pourquoi se plaint-il ? Parce que je ne ferme pas. Merci Format. OK. OK. Maintenant, revenons à Edge. Je suis toujours en train de récupérer mes données d'exploration de données. L'exploration de données fonctionne. OK. Je veux donc m' assurer que tout le monde en arrive au moins à ce point. Ensuite, je vais vous montrer la méthode la plus simple que Mike nous a donnée. Ce n'est pas beaucoup plus simple. Un plus simple. Tu vois le pouvoir ici ? Non, je ne suis pas abonné à des observables. Je n'attends pas que les promesses soient résolues. je ne fais pas d'appel HTTP directement depuis mon composant. Je ne m'occupe pas de la gestion des erreurs. Tout cela peut être fait dans mon service, et le composant peut être écrit telle sorte qu'il ne s'affiche que lorsqu'il contient des données valides Ainsi, vous pouvez vraiment vous concentrer sur ce que doit faire le composant. Cela a-t-il du sens ? Cela devrait être le cas, c'est tout le code dont vous avez besoin sur le composant. Est-ce que tout le monde en a ? Cela fonctionne de mon côté. Génial N'importe qui d'autre. Tous ceux qui le veulent ne fonctionnent pas. J'y suis OK. OK. Vous êtes d'accord pour passer un peu plus de temps ce soir ? Je suis d'accord si tu l'es. Cela dépend de combien de temps nous parviendrons à faire les choses correctement. OK. Et pour ce qui est des commentaires sur l'atelier, je m'attends à ce que vous y alliez. OK. Ne passez pas une heure sur notre J. Je vais déjà faire une petite pause dans la nature. C'est bon. Qui attendons-nous toujours ? Je dois donc manquer les importations pour Switch Map, tap et map. Voyons voir. Ouais. PS est assez doué pour deviner, mais seulement une fois que vous en avez un. OK. Prêt à passer à autre chose ? Nous en sommes arrivés au point où nous pouvons le faire. OK. À partir de là, ce que nous allons vouloir faire, c'est créer un formulaire. Je l'ai probablement déjà fait en HTML. Nous allons donc avoir besoin d'un formulaire pour toutes les valeurs modifiables par un étudiant Nous pouvons utiliser ensemble une étiquette active avec une entrée active, voyons voir. Ce qu'il faut savoir sur les étiquettes. Les plus importants ne colorent probablement pas , à peu près tout peut être changé de couleur. Mais la position de l'étiquette par rapport à son élément d'entrée. Cela ressemble donc à ceci. Donc, si vous avez une valeur par défaut, vous obtenez l'étiquette à côté de l'espace réservé X a la même apparence. J'ai tendance à utiliser le stack ou le float. Qu'est-ce que je fais ça ? OK. OK. Le chargement est plutôt cool car cela ressemble à une étiquette fixe. Ensuite, lorsque vous cliquez dessus, il devient une étiquette de pile. Il s'anime donc de haut en bas pour que vous puissiez taper. C'est à vous de décider lequel vous utiliserez vraiment. Quels que soient vos choix de design. La saisie est donc un sujet énorme. Pensez à tout ce que vous pouvez faire avec une balise d'entrée HTML et surcharger. Ils ont fait beaucoup de travail pour le rendre vraiment très puissant, donc cela peut sembler un peu accablant. Il n'est pas nécessaire que ce soit tout le reste avec l' angle et l'ionique Si vous commencez par les bases et partez de là, ce n'est pas trop mal. Voici d'autres éléments importants pour la saisie. Imaginez donc que vous avez une saisie de texte. Encore une fois, vous pouvez créer la couleur. Vous pouvez lui donner une valeur de rebond Chaque entrée N déclenchera un événement de modification au fur et à mesure que l' utilisateur la modifie Mais si vous définissez une valeur de rebond supérieure à zéro, vous n'obtiendrez cet événement de changement que plusieurs millisecondes après que l'utilisateur ait effectué Ainsi, par exemple, vous indiquez un debounce de 500 et la saisie de l'utilisateur Vous ne recevrez pas ce message de modification avant qu'une demi-seconde ne se soit écoulée sans qu'ils n'apportent de modifications. Si vous avez vu sur un appareil mobile où vous pouvez saisir une chaîne de recherche et qu' au lieu d'une touche retour ou entrée du clavier virtuel, il est écrit « Rechercher ou C'est l'indice de saisie. Vous pouvez également indiquer à l' appareil mobile le type de clavier à afficher en fonction du mode de saisie. Enfin, le type est similaire à un type d'entrée HTML. Quel type de données recherchez-vous ? Par défaut, ce sera du texte. Vous pouvez donc utiliser tous ces différents attributs pour personnaliser et personnaliser l' expérience de votre utilisateur. Nous pouvons également valider nos entrées. Il s'agit des validations intégrées qui sont à votre disposition Longueur maximale minimale de chaîne, valeurs numériques minimales maximales, modèle reg x et information indiquant si un champ est obligatoire ou non Le prochain, je vais vous le montrer. N'essayez pas de tout assimiler. Ce sont tous les indices de saisie automatique autorisés par aucune saisie. Donc, si vous êtes déjà allé sur une page Web et que votre navigateur vous a dit : « Hé, laissez-moi la saisir pour vous ». C'est à cause de ce genre de choses. Donc, votre prénom, votre adresse, l'état de votre ville. Et si votre navigateur connaît ces informations, il les saisira pour vous. Ça a du sens ? OK. Allons-y C'est bon. Je voulais juste appuyer pour y répondre très rapidement. Ce que nous devons faire pour obtenir l'entrée de l'utilisateur pour l'étudiant est donc l'entrée de l'utilisateur pour l' de créer un formulaire, juste un formulaire HTML normal. Avec un formulaire angulaire, nous voulons fournir un gestionnaire d'événements pour N G submit C'est cette fonction qui est appelée lorsque l'utilisateur soumet le formulaire. Le formulaire étudiant en livres est égal au formulaire N G. C'est un autre angularisme. Cela signifie que lorsque nous avons un formulaire angulaire, nous y allons exposer un formulaire G qui représente l'intégralité du formulaire rendu. Et nous allons attribuer ce formulaire au modèle local variable student form. Et lorsque nous le ferons, nous pourrons, dans notre code HTML, référencer ce formulaire, demander à angular s'il est valide, lui demander s'il contient des erreurs, etc. Ce que je veux faire ici, c'est revenir ici à l'intérieur sur le contenu actuellement vide. Je souhaite créer un formulaire. Une soumission vide équivaut à une soumission. Nous allons soumettre l'objet étudiant lorsque le formulaire soumis et nous aurons un modèle local de formulaire étudiant variable, et c'est le formulaire NG qui sera créé pour nous. On submit n'existe pas encore. Pour qu'il soit heureux, suffit de venir ici et d'en créer un. Ouais Même si ça ne sert à rien. Maintenant, au moins il est content. Prochaine. Créons un champ de saisie unique car tous les champs de saisie ressembleront à ceci. Et je pense que j'en veux une sur liste. Nous voulons un article personnalisé. Non, je ne veux pas que mon copilote fasse le travail à ma place. Dans l'article sur l'article, je veux un sur l'étiquette. Et je vais définir sa couleur. 5. Session4: C'est bon, les gars. Bienvenue au quatrième et dernier atelier. Je voudrais commencer cette soirée en parlant du stockage des applications et de la façon dont tout cela fonctionne. Avec Ionic, il existe de nombreuses options de stockage différentes. Et parce que je travaille généralement principalement avec des appareils. Je fais beaucoup de stockage sur appareil. Je ne vais donc pas entrer dans les différents types de stockage dans le cloud et Ionic propose une offre d'entreprise qui sécurise le stockage dans le cloud C'est littéralement comment mettre des données simples sur l'appareil. Et c'est ce que je fais ici. Donc, ce que j'utilise comme condensateur de stockage. Vous vous souvenez peut-être que lors de la première séance, nous avons dû nous installer chez Capacitor Slash Storage pour obtenir la porte de service du stockage ou celle des étudiants Et comme vous pouvez le voir ici, il s'agit d'une API assez simpliste Vous disposez de méthodes get set, d'une méthode de suppression, d'une méthode d'effacement de la base de données et d'une méthode pour obtenir le tableau de toutes les clés de votre base de données. Et je dis base de données. J'utilise le terme de manière vague, car il s'agit fait d'une simple banque de valeurs clé attachée à votre application Et ce que je veux dire par là, c' est qu'il est attaché à votre schéma HTTP You. Donc, si vous deviez utiliser NPM start, qui lance un serveur NG avec le port par défaut de port 4 et 200 Jouez avec l'application, configurez votre boutique, créez de nouveaux étudiants et modifiez-les. Puis fermez l'application, redémarrez-la avec Ionic Serve, qui, je crois, est le port 8 100 Il n'aurait pas la même base de données. Donc, de même, s'il s' agissait de HTTP ou de HTTPS, je pense qu'ils ont même des bases de données différentes. C'est simplement lié au fait que vos applications exécutent des incidents. Sur un navigateur de bureau, il utilisera le stockage local, ce qui signifie qu'il est volatil. Il peut être détruit à tout moment. Sur un appareil réel, il a indexé la base de données ou quel est l'autre ? SQL Light ? Non. Vous pouvez choisir d'utiliser SQL Light. Il y a donc une option pour cela, et c'est tout à fait normal. Vous pouvez donc utiliser SQL Light. Mais ce n'est pas Index TV et un autre. Cela m'échappe maintenant, mais peu importe. Il utilisera le bon appareil pour le bon appareil. Et c'est l'une des choses que l'on obtient en utilisant le stockage par condensateur. Tu n'as pas à t'inquiéter à ce sujet. Donc, que vous soyez un PWA, que vous soyez Android ou IOS, peu importe Donc, pour configurer le service étudiant avec uniquement ces cinq appels d'API, j'ai essentiellement créé un tas de méthodes publiques. Le service de stockage par condensateurs est entièrement basé sur des promesses, vous verrez donc que tout ce que je fais ici est également basé sur des promesses. Sauf que ça ressemble à la deuxième. Tous les étudiants sont l' observable sur lequel repose notre composante de la liste des composants Cela fonctionne donc lorsque quelque chose arrive à un étudiant, que vous le marquiez absent, que vous le présentiez, que vous le supprimiez, que vous le sauvegardiez, que vous le récupériez , que vous en obteniez un nouveau, etc. Ce que fait le service de stockage , c'est qu'il prend les informations que vous venez de lui donner. Voici donc un tout nouvel étudiant. Voici un tout nouvel objet étudiant complètement hydraté. Il l'enregistre dans le stockage ou le stockage local, puis indique immédiatement que tous les étudiants sont observables, qu'un tout nouveau tableau entièrement régénéré a été créé pour vous, ce qui entraîne la mise à jour du composant Comme vous pouvez probablement l'imaginer. Si vous avez une douzaine d'élèves, ce n'est pas un problème. Si vous avez 1 000 ou 10 000 étudiants, cela peut poser problème. La façon dont le service aux étudiants est rédigé est que vous pouvez l'étendre en fournissant des services de pagination, tri, toutes sortes de choses Et alors vous n'auriez plus qu'à prêter attention à cet observable Je vais laisser cela comme un exercice au spectateur. De plus, dans le cadre du service aux étudiants, certaines parties privées seront examinées sous peu, que le panel d'étudiants lui-même est mis en œuvre en tant que sujet de comportement RHS Cela permet de conserver une trésorerie locale dans le service aux étudiants, qu'il met à jour chaque fois qu' il y a une monnaie. Et puis c'est ce envoyé au composant aux abonnés. Et il le fait grâce à la fonction appelée push A. Push A se contente de dire : «   Hé, nous avons un nouveau sujet de comportement ». Nous avons un nouveau tableau, allez le traiter. Les trois autres fonctions ici sont simplement des instumentations internes que nous verrons bientôt, et ce ne sont que des fonctions d'assistance. sein du service aux étudiants, j'ai donc créé un objet générique appelé nouvelle interface entre étudiants et, comme vous pouvez le constater, tous les champs sont simplement effacés, ce qui en fait des flux vides Nous ne l'avons donc pas encore essayé. Mais si vous allez sur Si vous allez sur la page d'informations sur les étudiants. Il y a un code dans le service aux étudiants qui renverra cet étudiant, l'étudiant vide au lieu de celui que vous avez demandé, avec le numéro d'identification de l'étudiant. Voici le sujet du comportement. Encore une fois, il accueille un large éventail d'étudiants en interne. Et lorsque l' application démarre, le composant de la liste des étudiants demande simplement à tous les étudiants de fonctionner ce qui rend le sujet du comportement inobservable En règle générale, si vous avez affaire à un sujet comportemental impliquant plusieurs abonnés, vous ne voulez pas exposer le sujet réel à le sujet réel à vos abonnés, car ils pourraient tous commencer à saisir de nouvelles valeurs de manière incontrôlable Le schéma général est donc de renvoyer à vos abonnés le sujet du comportement comme inobservable, et c'est ce que font ces quelques lignes N'hésitez pas à m'arrêter si je vais trop vite ou si vous avez besoin de précisions. Vous l'avez vu, je crois, au début du service aux étudiants. Nous avons une fonction initialisée, et tout ce qu'elle fait, c'est qu'elle appelle push du premier coup. Donc, Push A dit de m'appeler tous mes élèves, puis de dire au sujet du comportement d' émettre une autre valeur avec ces étudiants dedans. Encore une fois, il ne s' agit pas d'une graine de base de données, mais d'une graine d'application. Voici donc la valeur de départ. Demandez à tous les élèves de demander au système de stockage, au système de stockage à condensateur, de me donner toutes les clés de la base de données. La prochaine chose que je fais est de filtrer ce tableau uniquement pour les touches commençant par la constante clé de l' étudiant, qui, je crois, n'est que le mot souligné par l'étudiant. Vous n'avez pas vraiment dire sur la façon dont elles sont stockées, sur la manière dont les données sont stockées ici. Vous pouvez donc tout ranger. Donc, si je veux stocker étudiants ou des objets qui ne sont pas des étudiants, ce que je pourrais faire à un moment donné, je pourrais avoir envie de stocker les professeurs à un moment ou à un autre à un moment donné, je pourrais dans des cours. Je dois les différencier puisqu'il existe un seul magasin de valeur clé. J'ai donc créé une clé d'étudiant, qui est simplement le mot étudiant. J'ai donc filtré toutes les clés de la base de données en fonction de cette clé étudiante. Et puis, la ligne suivante, je dois attendre une promesse et demander à chaque étudiant de répondre à ses besoins. Cela a-t-il du sens ? Donc, lorsque cette promesse sera terminée, j'ai un groupe d'étudiants. Et les plus astucieux d'entre vous remarqueront que je ne gère pas les erreurs ici, et je devrais probablement OK. Et voici le fait d'avoir un seul étudiant et voici cet étui spécial pour les nouveaux étudiants. Donc, si vous transmettez le nouveau numéro d' étudiant, je vais simplement résoudre la promesse avec cet étudiant vide. Sinon, je vais dans la base de données et je cherche l'étudiant à l'aide de ce trait d'union entre son identifiant Les étudiants saisissent donc un , deux, etc. Et appelez l'étudiant par clé. Vous remarquerez que ça a l'air un peu bizarre. Je dois donc appeler la fonction de stockage, c'est la méthode get. Et je dois passer un objet. Je ne sais pas vraiment pourquoi vous ne passez pas la clé, mais vous devez la transmettre en tant qu'objet. C'est pourquoi il y a des bretelles bouclées dans le paramètre Je suis donc en train de transmettre un objet dont la clé et la valeur du paramètre clé de l'étudiant sont transmises. C'est un peu bizarre. Le stockage par condensateur ne stockera que des chaînes. Il ne fait pas d'analyse ou de sérialisation JSON pour vous, c'est pourquoi j'en ai le résultat Et pas seulement le résultat, mais aussi la valeur du résultat. Encore une fois, quel responsable du stockage me rend en guise de promesse d'objet. Et dans cet objet, il y a une valeur. Cela a-t-il du sens ? C'est un peu bizarre. Et je pense qu'il existe des bibliothèques de stockage plus simples , mais je voulais m'en tenir à l'essentiel. De même, supprimez un étudiant, encore une fois, vous appelez storage remove et vous devez transmettre cette clé Pour sauver un étudiant, j'ai une bibliothèque UUID. Donc, si vous créez un nouvel étudiant, vous me transmettez un étudiant pour sauver un étudiant sans identifiant. Au lieu de simplement essayer de trouver un, deux, trois, quatre, je vais créer un UUID et enregistrer cet identifiant d'actif C'est suffisamment unique pour que je ne pense pas que vous pourriez vous heurter à une collision localement. Probablement pas à l'échelle mondiale non plus, mais on ne sait jamais. Que signifie le double point d' interrogation ? Cela revient à dire que la carte d'étudiant est égale à la carte d'étudiant. À moins qu'il ne soit nul, attribuez un UUID quatre. C'est relativement nouveau en matière de script typographique. Je pense que c'est intelligent. Cela permet d'économiser une dizaine de frappes, mais je ne sais pas si c'est plus clair Seriez-vous d'accord ? Ouais. Je veux dire, c'est la première fois que je le vois, c' est pourquoi je me posais la question. Oui, je pense que parfois je le suis. Parfois, je suis trop intelligente pour moi parce que quand je l'ai vu pour la première fois l'autre jour, j'ai dû me rappeler à quoi ça sert. Donc oui, je pense que l'un d'eux devrait probablement être juste point étudiant égal à un identifiant de point d' étudiant. Et puis le point d' interrogation, ce qui signifie, tu sais, pas dedans. Cela pourrait donc être un peu plus facile. Voyons voir. Ainsi, après une suppression ou un étudiant, nous appelons push All et cela envoie à nouveau le tableau à tous les abonnés. Do save student est l'implémentation interne de save student. Il suppose donc que vous avez déjà un identifiant d' étudiant ou une clé, et il appelle simplement la fonction Storage Set en transmettant la valeur à la clé. Remarquez encore une fois, je dois stringifier le résultat car cela ne me convient pas Mark Present est très simple. J'ai défini le statut d'étudiant à présenter. Pareil en cas d'absence, puis j'appelle do Save student. Do save student met à jour le stockage, appelle à nouveau Push All. La réinitialisation des présences passe revue tous les étudiants, puis annule le statut Et encore une fois, je fais preuve d'intelligence, car vous pouvez voir que l'énoncé cartographique comporte un raccourci. Je retire donc la propriété status de l' objet étudiant, puis transmets le reste de l' objet étudiant à l'opérateur rest. Cela équivaudrait à passer par le formulaire et à simplement appeler « statut d' étudiant non défini Mais encore une fois, j'ai dû être intelligent, donc. Si vous pensez que vous pourriez me un examen de pull request pour plus d'intelligence, vous n'aurez aucun argument de ma part Est-ce que c'est clair ou est-ce juste bizarre. Eh bien, j'ai aussi fait la folie des Java Streams Donc, je veux dire, c'est logique. Vous savez, encore une fois, vous savez, ces mots sont destinés à être compris par les humains. Vous savez, tout est traduit dans ce que les ordinateurs utiliseront. C'est vrai. Vous savez, tout dépend de ce dont nous avons besoin pour comprendre ce que nous faisons. Ouais. Et franchement, ce que nous avons fait la dernière session en supprimant tous les observables pour que l' étudiant accède à la page d'information de l' étudiant, c'est beaucoup plus lisible maintenant Je pense que HGS a sa place et que cet endroit en particulier n'était pas sa place OK. Voici donc quelques autres choses que nous avions. Je pense que nous l'avons vu. Nous avons des données thématiques, je suis désolée, des données de départ. Et ce n'était qu' au tout début Si nous n'avons rien dans la base de données, nous pouvons le voir et en trouver quelques-uns, je crois que nous avons dix faux étudiants, et puis des données claires, c'est le contraire Et celui-ci est facile. Nous disons simplement que le stockage est clair. OK. Et c'est tout pour le rangement. Avez-vous des questions avant de passer à la caméra ? Oh, je veux dire, c'est littéralement tout ce que vous avez à faire pour utiliser le stockage local. Waouh. Ouais. Et tous les codes sont là. Tout dépend du service aux étudiants. Ouais OK. Alors, qu'est-ce que je vais faire maintenant ? Donne-moi une seconde. Eh bien, je suppose que je pourrai le modifier plus tard. Je dois y retourner. Tout cela n'était que du matériel supplémentaire auparavant OK. C'est bon. Parlons donc de la caméra. OK. Nous avons donc déjà examiné Pixabay une fois. Et ce que j'ai fait ici, c'est que je suis allée chercher la photo d'un appareil photo. Ce que je voulais, c'était une image fictive. Donc, s'il n'y avait pas de photo de l'étudiant, je voulais que quelque chose soit affiché à sa place. Donc, si vous voulez suivre, allez Pixabay et trouvez une belle photo d'un appareil photo Peu importe lequel. Celui-ci est cool. OK. Donc en fait, je ne l'ai pas fait ici, donc je dois le faire ici. Oui, je ne l'ai pas ici. Alors allons-y . Lequel préfères-tu ? J'en ai beaucoup. Premièrement, je veux opter pour le poloïde Je souhaite donc télécharger la version SVG. Et puis je fais avec. Pourquoi ça n'a rien à voir avec ? Essaie encore une fois. OK. Ça y est. Je vais lui donner un nom ? Caméra. Et je vais le faire glisser sur mes images. Je n'ai pas besoin de le voir là-bas. OK. C'est donc en images. OK. OK. Ici, je dis enregistrer au format PNG à points de caméra, mais vous voulez l'enregistrer dans le format que vous téléchargez. Si vous téléchargez un fichier PNG, utilisez évidemment la bonne extension. OK. Nous avons maintenant besoin de ces deux packages NPM. Nous devons dire au condensateur que nous allons utiliser la caméra. Et puis, comme je pense que nous sommes tous actuellement dans un navigateur, nous avons besoin des éléments ioniques de la PWA faire fonctionner dans un C'est donc ce que je vais faire. OK. OK. Et j'installe. Les deux. C'est bon. Et c'est chose faite. Quelqu'un suit-il et devez-vous attendre la fin du NPM Ouais. Désolée. J'essayais de fixer l'image, alors laissez-moi le faire très rapidement. OK. Alors c'est ce que tu voudras ? Très bien, D. Très bien. Tout le monde a une caméra et le stand du NPM est terminé. OK. Ensuite, vous allez ouvrir. La plupart de ces documents devraient déjà s'y trouver. Mais je me souviens que j'ai dû vous demander à quelqu' un le premier jour de commenter certaines choses, comme cette importation ici. Et cela a défini des éléments personnalisés. Vous l'avez supprimée ou vous l'avez commentée. Je ne me souviens pas lequel. Alors Open T. Ouais. Je ne l'ai pas du tout. Il y a plusieurs choses que nous devons faire ici. Mets-ça de côté. Je ferme ça. OK. Nous avons donc besoin d'une plateforme, nous devons démarrer la plate-forme. Peu importe ce qu'il y a. OK. Nous l'avons donc déjà dans le piège. Nous devons donc appeler ça OK. Cela n'a pas marché. Nous allons donc devoir définir ou importer des éléments personnalisés et le faire en tapant correctement. Allons-y. Chargeur à éléments B. C'est bon. Est-ce que tout le monde est d'accord pour dire que cela se ressemble ? Oups. C'est bon. Est-ce que tout le monde l'a ? Pas encore C'est bon. Oups Je ne peux pas imaginer combien de fois j'ai des opérations suivies de la flèche gauche. Combien d'entre eux devrai-je modifier ? L'accoudoir de ma chaise maintient mon clavier en place. C'est bon. OK. Dans la page d'informations sur les étudiants, nous devons importer ces éléments en haut du fichier. Donc, le type de résultat de la caméra et la source de la caméra proviennent de la caméra à condensateur. Je vais voir si je peux le faire. Allons-y. Revenons donc à la page d'information sur les étudiants. Bien. Et puis voici comment on prend une photo. Vous remarquerez que l'objet ou la classe du condensateur ionique est également très prometteur. Nous allons donc créer une fonction de synchronisation A appelée « prendre une photo » qui appellera la fonction « obtenir une photo » de l'appareil photo et qui ne prendra qu'un seul objet de configuration. Il y a plein de choses différentes que vous pouvez transmettre ici. Cela devrait nous permettre d'obtenir une image JPEG de qualité raisonnable que nous pourrons ensuite attribuer à l'image de données réelle al. Les données des images U. Comme nous les attribuons à la toute dernière ligne à l'image de l'élève, il s'agira d'une Il s'agira d'une chaîne codée en base 64 de l'image. Attaché à l'objet étudiant de sorte que lorsque nous l'enregistrons, il soit également enregistré dans le stockage local. Tout est automatique. Permettez-moi d'apporter mon code VS, voir si je peux le faire de cette manière. Cela passe donc au composant d'information sur les étudiants. C'est sacrément bien. Mais je ne vais pas le faire de cette façon. Quelqu'un doit me rappeler de désactiver le copilote. C'est bon. C'est pas mal. Nous ne voulons pas de base 64 comme type de résultat. Nous voulons une URL de données. Si on y trouve même de l' intelligence. La qualité 90 est probablement correcte. N'hésitez pas à jouer avec. Autoriser l'édition est vrai, c' est-à-dire donner à l'utilisateur une chance de le faire ou jouer un peu avec elle avant de l'accepter. C'est également facultatif. Et la source Ce sera une caméra. Je pense que vous pouvez également le faire si vous n'êtes pas sur une machine équipée d'un appareil photo, vous pouvez simplement accéder à la source des photos. Je pense que cela pourrait fonctionner pour un Mac ou Windows, si vous n'avez pas d'appareil photo. J'ai une webcam, donc je vais la laisser comme caméra. Ça va nous donner notre image. J'ai besoin d'une étiquette en tissu. Et puis je ne sais pas pourquoi j' ai deux lignes là-dedans. Pourquoi ne pas simplement le dire ? Oh, je vois. Mais je veux obtenir l'URL des données à partir de l'image. Ensuite, je veux régler ça. Et c'est une faute de frappe, ça doit être ça, tant pis. Je suis désolée Nous sommes en train de transmettre l'étudiant, c'est vrai. Ce sera donc l' image de l'étudiant égale l'URL de l'image. Est-ce clair ? Ouais. Mais j' ai un peu peur qu'il soit dit que l'image n'est pas une propriété de l'étudiant Je ne sais pas pourquoi, mais bon, si je ne le suis pas, c'est parce que je ne l'ai pas donné je ne lui ai pas dit ce qu'est un étudiant. Donc, tu as raison. Donc, si on lui dit que c'est un étudiant, j'ai le même problème, non ? Ouais. Je vais donc cliquer sur le bouton « étudiant ». Et je vais ajouter qu'il s'agit d'un script de type pédagogique . Si tu y penses. Parce qu'à la ligne 39, je n'avais pas dit à la réception que j'emmenais un étudiant. Donc, par défaut, c'est n'importe lequel. L'image des étudiants est donc bonne. Vous vous êtes fait gribouiller parce que vous avez reçu l'erreur parce que vous lui aviez dit qu'il s'agissait d'un étudiant Alors, que se serait-il passé si j'avais laissé mon objet d'étudiant tel que je l'avais ? Et je n'avais pas d'image. Peux-tu deviner ? Eh bien, soit ça va marcher, soit ça ne marche pas. Cela fonctionnera très bien car les informations de type n'existent vraiment qu'au moment de la compilation. Une fois que toute la sécurité typographique que vous obtenez avec Typescript Une fois que vous êtes converti en Javascript et que vous l'exécutez C'est juste du Javascript. Ça va dire : Oh, tu as défini un champ ou tu m'as donné une chaîne et tu as dit d'en faire une image d'étudiant. Cool. Je vais le faire pour toi. Parce que cela fonctionnerait en Javascript, cela fonctionnera très bien. OK. Mais nous aimons bien jouer ici, alors. Nous allons donc procéder de cette façon. Avez-vous donc mis à jour votre élève avec une chaîne optionnelle appelée image ? Oui C'est bon. Nous devons donc maintenant connecter quelque chose à la fonction de prise de photo. Et nous allons le faire dans le code HTML. Donc, ce que je veux faire ici pour les informations sur les étudiants en HTML. Laisse-moi te débarrasser encore une fois de tout ça . Nous avons donc notre formulaire d'étudiant, et nous avons ceux qui figurent sur la liste. Donc, ce que je veux faire ici, c'est simplement en ajouter un autre avec un gestionnaire de clics Et je vais y transmettre l'étudiant. Là-dedans, je vends mal les étudiants. Ici, j'ai deux images. La première image n'apparaît que si l'image de l'étudiant existe, et je vais la définir comme classe, nous mettrons à jour le CSS dans une minute. Photo d'étudiant. OK. Est l'âge de l'étudiant. Si nous avons une photo de l'étudiant sur l'objet étudiant, nous allons créer une balise d'image avec cette image d' étudiant comme source. Et mon tag image se plaint parce que je n'ai pas d'Altex Nous pouvons donc configurer un texte alternatif égal à « faites-le de cette façon ». C'est la première fois. Un nom LQUfst. Étudiant en dernier. Il en va de même pour tous les textes au nom de l'étudiant. Si par contre, nous n'avons pas d'image d'étudiant. n' force est égale à Assets, images, M était un SVG A est égal à k une image. À quoi cela ressemble-t-il ? Je vais démarrer mon serveur NG ou NPM Start Et avant d'y jeter un œil, allons-y et corrigeons le CSS. Nous n'avons pas beaucoup parlé de CSS à ce sujet dans cet atelier. Je ne me considère pas comme un expert en CSS, mais pour cela, ce n'est pas trop difficile à faire avec eux. Allons-y. Alors, ce cours de photo d'étudiants que j'ai mis en scène sur l'image ? Je vais lui donner une hauteur maximale de 25 % de l'espace vertical. Donc, rien de plus. Et je vais régler son objet pour le couvrir. Cela va donc recadrer l'image, tout en occupant tout le rectangle. ce que nous faisons. Ensuite, nous revenons et actualisons la page ici. Je ne vois aucune erreur, alors allons-y. Voilà mon message, donc je ne le vois pas faire quoi que ce soit. Mais si je clique dessus, tu peux voir mon appareil photo. C'est cool. En utilisant l'autre appareil photo. Si je veux prendre une photo. Eh bien, je n'ai pas très bien travaillé. Essayons encore une fois. Nous y voilà. Ensuite, je pourrai le sauvegarder. Et voici ma photo. Alors si je sauve Jonathan Bennett. Reviens à l'intérieur. La photo est toujours là. C'est cool, non ? OK. Pas d'applaudissements, rien. C'est bon. Comment vont les autres ? Désolée, j'étais muet, mais non, c'est cool. Est-ce que cela fonctionne pour vous ? Ouais. J'avais l'image. Il a alors été dit qu' aucune caméra n'avait été trouvée. OK. Permet de choisir une image. Alors laisse-moi essayer et voir. Alors maintenant, si je le dis, tu peux y retourner. W. Très cool. Ouais. C'est cool. J'aime bien ça. C'est donc un condensateur, en bref Capacitor va vous fournir une API cohérente. Sur tous les appareils et sur toutes les pages Web. Maintenant que tous les condensateurs ne sont pas branchés, nous allons travailler avec le navigateur de bureau. Beaucoup le feront. Si vous consultez les plugins officiels et qu'ils proposent également des plugins communautaires, ils vous diront avec quoi ils fonctionnent. Il y a des choses comme Face ID qui ne fonctionne évidemment qu' avec un produit Apple, et je pense qu'il fonctionne avec les iPhones ou iOS Mais vous pouvez accéder au GPS par n'importe quel moyen. Je vais utiliser l'API du navigateur. Si vous êtes sur un ordinateur de bureau, je vais aller plus loin et utiliser votre WiFi Si vous êtes sur un iPhone, ils utiliseront ce GPS. Sur Android, il utilisera ce GPS. Mais cela vous donne une API cohérente sur laquelle vous pouvez développer, vous n'avez donc pas à vous souvenir bien : Android, je dois faire ceci ou IOS, je dois faire cela. Cela a-t-il du sens ? Alors maintenant, maintenant c'est à nous de faire. Eh bien, avant de passer à autre chose, y a-t-il quelqu'un qui veut faire fonctionner la caméra, mais qui ne l'a pas encore fait ? Prends ça pour un non. Passons maintenant à la partie probablement la plus dangereuse de l'atelier. Parce que je n'ai pas de diapositives à ce sujet. Celui-ci, je le vis complètement à la volée. Comme vous pouvez l'imaginer, c'est très excitant. À ce stade, nous avons donc une application fonctionnelle. Et je pense qu'il est assez bon pour être mis sur l'App Store ou le Play Store. Permettez-moi donc de m'assurer que l'extension ionique est en cours d'exécution, chargée et en cours d'exécution Non. Assurez-vous que tout va bien. C'est très bien OK. Où se trouve ? Voilà l'ionique. Ça y est. OK. Avez-vous déjà tous vu l'extension ionique ? Nous ne l'avons pas vraiment utilisé parce que je n'aime pas nécessairement m'y fier . Mais il y a des choses intéressantes qu'il peut faire. Que veut-il que nous fassions ? Il veut migrer Il veut que nous ajoutions ces fonctionnalités. Ce sont des recommandations que le plug in ionique va nous donner La première chose que je veux faire maintenant est d'ajouter un projet IOS, il suffit de cliquer juste là. Oui, j'aimerais ajouter le support IOS à mon projet de condensateur. Et il me montre dans le terminal les commandes qu'il exécute. OK. OK. Donc je ne pouvais pas. Impossible de couler, il manquait WWW. Et oui, je l' oublie toujours moi-même. Pour effectuer une synchronisation avec le condensateur, vous devez au moins créer une version de production de votre application une fois. Je viens donc de lancer NPM run build. Alors, qu'est-ce que Coco Pods ? Sur quoi avez-vous l'habitude de développer ? À quelle application de bureau native êtes-vous habitué ? Sur Mac, je me suis dit que vous étiez peut-être un développeur de points. Oh, eh bien, non, je suis un développeur Java, donc je pense que c'est équivalent à Maven C'est un gestionnaire de paquets. OK. Ou du moins c'est l'une des choses que Maven peut faire, non ? Je sais qu'il peut faire beaucoup de choses. Ouais. OK. C'est un CocoaPods, je crois que c'est juste un gestionnaire de dépendances Ce qui est cool, c'est qu'à moins que vous ne construisiez vos propres connecteurs de condensateur, vous n'avez pas vraiment à vous en soucier. Mais maintenant que nous avons créé l'application, nous devrions être en mesure de nous synchroniser avec le condensateur. OK. Et laisse-moi m'ouvrir. Colis, Jason. Oh, ils ne l'ont pas ici. OK. Je m'attendais à un script. Donc des scripts NPM OK. Cela semblait donc être terminé. Reviens ici. Regardons ce qu'il a fait. Le NPM run build a donc créé mon application Ionic Angular et a mis tous les actifs sur le WWW Il s'agit donc de l'application complète créée. Capacitor Sync a copié l'intégralité de cette application ionique angulaire dans ce projet IOS Il s'agit donc d'un projet de code X. Techniquement, nous n'avons pas à nous en soucier beaucoup, car Ionic a fait une grande partie du travail pour nous Et je suis le premier à admettre que je ne suis pas un gars du X code, je ne suis pas un gars du X code C objectif ou de la rapidité. Ce n'est tout simplement pas quelque chose qui m'a toujours beaucoup attiré. Mais maintenant que j'ai créé et synchronisé ce projet, je peux ouvrir ce projet dans Xcode Et j'en avais peur. OK. Mon O F a donc été mis à jour depuis la dernière fois que j'ai lancé XCode, ce qui signifie que je dois mettre à jour EXCO, ou au moins une partie de Maintenant, voyons ce qu'il fait. L'un de vous suit-il sur son Mac ? Ouais. C'est bon. Je souhaite cliquer à nouveau dessus. Ça a l'air mieux. OK. Il y a donc le code X. Êtes-vous un développeur Apple ? Non Non. Je suis inscrit en tant que développeur Apple, mais je ne paie pas les frais d'abonnement Je ne peux donc rien envoyer sur l'App Store. Mais je devrais au moins être capable de le faire si je le trouve. OK. J'ai donc un identifiant de bundle. La signature est automatique, mais je n'ai pas d'équipe Je dois donc m'adresser à mon équipe personnelle. Et cela ne devrait pas être enregistré car vous pouvez pas. L'identifiant du bundle doit être unique au monde. Eh bien, le mien parce que j'utilise la marche comme domaine. Et ma montre veut que je fasse confiance à mon ordinateur. Oui, tu peux. Viens te promener. Disons que c'est juillet 2022. Essaie à nouveau. OK. Il a donc créé un certificat d'affichage et un profil d'approvisionnement pour moi. Donc, à ce stade, je devrais être capable de choisir un simulateur ou, si je le souhaite, de brancher mon véritable iPhone si j'avais un câble Lightning. Quelque part par ici. Si nous avons le temps, je vais le faire. Prenons un iPhone 8, l'un des plus petits et plus anciens. Je devrais pouvoir cliquer sur Play. C'est un bâtiment. Je vous ai dit que le Macbook était rapide, n'est-ce pas ? OK. Ouais. Je n'ai pas vu le code X ouvert sous mon condensateur dans l'ionique Tu ne l'as pas fait ? Ouais. Je n'en avais pas. Avais-tu fait la construction de l'évier ? Ouais Eh bien, et vous avez réalisé le projet Ad IOS ? Oui. Oui Parce que c'est pour ça que j'ai mangé ces gousses de coca OK. C'est vrai. Eh bien, laissez-moi essayer de le construire une fois de plus pour voir. C'est bon. Les simulateurs sont en train de démarrer Donc, sur iPhone 8 avec IOS 1155. Vous pouvez le voir tout en haut. Si vous pouvez le voir, c'est petit, dit-on , faire tourner Apple sur iPhone 8. Voilà. Avec les trois boutons. Maintenant, je peux vous dire que cela va échouer. Ce n'est pas le cas, l'application va fonctionner, n'est-ce pas ? Je peux venir ici. Je peux marquer un cadeau. Je peux indiquer que je suis absent. Je peux y aller, je peux changer le nom de Jennifer en Jen. OK. Et il se comporte comme un iPhone Et nous allons dire que Jen est née le 10 mars 95. Et nous allons sauver Jen. Alors maintenant c'est Jen et j'ai toujours le même anniversaire. Je peux supprimer Troy. Et tout ce que nous avons construit au cours des 3,5 dernières sessions fonctionne parfaitement comme s'il s'agissait d'une application iPhone native. Nous devons encore faire certaines choses pour l'améliorer, mais cela fonctionne. Donc, si je viens voir Casey, est-ce que quelqu'un sait ce qui va se passer lorsque je clique sur la photo de l'appareil photo ? Il n'y a pas de simulateur de caméra, donc ça ne va pas fonctionner, ça va échouer. Je vais probablement vous demander de choisir une image ou de simplement mourir. Non, il meurt tout simplement. Non. Mais je crois que la raison pour laquelle il est mort n'est pas parce qu' il n'y a pas de caméra. C'est juste ici. C'est donc là que ça commence à arriver. Nous ne sommes plus vraiment dans le domaine de l'ionique. Et si vous consultez la documentation relative au connecteur de la caméra à condensateur , elle vous en avertira. L'appareil photo ne fonctionnera pas à moins que vous n'indiquiez à X code que vous souhaitez demander l'autorisation d' utiliser l'appareil photo et. Vous l'avez tous vu, non ? L'application X veut utiliser votre appareil photo, puis il y a une ou deux petites phrases en dessous qui vous indiquent ce qu'ils vont faire avec l'image ou comment ils vont utiliser ces données. C'est vrai. C'est ici. C'est en code X. Vous ne pouvez pas le faire avec Ionic et c'est différent pour Android et pour IOS C'est pareil. Vous devez toujours demander l'autorisation, mais la façon dont vous l'avez demandée est différente avec Android. Donc, si je me souviens bien, laissez-moi tuer l'application. OK. Si je me souviens bien, c'est quelque part ici. Je suis en info. Et que me disent-ils que je recherche Il vous manque la description d'utilisation de la photothèque Anna. Capacités de l'appareil requises. J'oublie toujours celui-ci. Donc je vais prendre ça. Je vais retourner sur les interwebs. OK. Et Apple dit : un message indiquant à l'utilisateur pourquoi l'application demande cette publicité : où va-t-elle ? Allons-y. Comment l' ajouter dans le code x. Nous en sommes donc à l'info, à des cibles IOS personnalisées. Je ne vois pas ça. Est-ce que tu vois ça ? Non. Bien sûr, ils ont changé les choses avec presque tous Voici une coutume que j'ai toujours commencée. C'est ici, sur la gauche. Cliquez avec le bouton droit sur une ligne clé, puis cliquez sur Ajouter une ligne. Ajoutez. Ça se sent. Je vois mal, n'est-ce pas ? Je ne pense pas que ça soit à sa place. OK. Qu'en est-il des valeurs R ? Non, j'aime bien celui-ci e. OK, qu'est-ce que c'est sur la liste ? Ly. C'est celui que je veux. Allons-y. C'est ce que je veux. Pas celle-là. Maintenant que je l'ai là, je pense que c'est exactement pour cela que nous voulons l'utiliser. Écrivez la valeur décrivant pourquoi votre application en a besoin. Ici, nous pouvons vous prendre en photo. OK. Cela a du sens ? Nous allons le lancer à nouveau. Le simulateur fonctionne toujours. Et maintenant, je passe à la liste. Cliquez ici, espérons-le. Ça ne me plaisait toujours pas. C'est pourquoi nous utilisons Ionic and Nott's missing. Vérifions-le ici. C'est parti, n' est-ce pas ? Non. Ici, en bas. Voilà. Est-ce que c'était censé être dans les limites des capacités requises de l'appareil ? Non. Ils l'ont fait sur le bundle, ex the bundle. Ils l'ont fait ici quelque part. Ouais. Quelle était donc leur valeur ? C'est peut-être ce qui fait la différence. La valeur de la clé sera affichée sous forme de description de la fenêtre contextuelle présentée à l'utilisateur, alors écrivez la valeur expliquant pourquoi votre application a besoin d'accéder à la photothèque ? Ça a l'air bien. Essayons. Retournez à l'application. Devez-vous le reconstruire ? C'est ce que je pensais. Nettoyons simplement le dossier de construction. Et puis construisez le Run it again. Oh. Waouh. Ouais. Il en est toujours content, n'est-ce pas ? C'est possible. Oh, c'est ici aussi, n'est-ce pas ? C'est donc dans la liste Info P. Il est même là. Je suis presque sûr que ce n'est pas dans le pod. Je suppose que c'est juste ici. C'est toujours amusant de travailler avec iOS. Passons donc au condensateur. Voyons ce qu'ils en disent. Branchez Mera. Il faut plus que cela. Nous avons donc fait celui-ci, non ? Non. Nous avons créé ce mur. C'est bon. Nous avons donc celui-ci. Ils sont tous pareils, n'est-ce pas ? OK. OK. Je veux les rendre un peu différents pour savoir lequel est lequel. OK. Essayons ça. Asador dit qu'il nous en faut trois, donc nous en avons trois maintenant. Ça n'avait pas l'air d'être construit, n'est-ce pas ? Tu as dit que c'était le cas ? Non. Essayons-le. Voilà. Mais c' est ce dont nous avions besoin. Nous avions besoin des trois. C'est bon. Essayons donc de voir si j'ai un câble ici. Ce qui veut dire que je dois me débrancher. C'est le problème avec l'erreur du Macbook. Il n'a que deux ports. Je vais donc débrancher mon alimentation car le truc fonctionnera pendant six ou 7 heures sur batterie Je suis dans mon iPhone 11. OK. Maintenant que nous avons cette fonctionnalité. Voir J'ai mon iPhone 11 ici à déverrouiller pour utiliser les accessoires. Maintenant, c'est l'iPhone de Michael. Je partage toujours l'écran, non ? Ouais. Ouais. OK. OK. J'ai donc sélectionné mon