Codez : l'application Todo avec Angular et Firebase

1. Introduction: Bonjour et bienvenue à mon premier cours de ma série Let's Code. m'appelle Stefan Omerovic, et je suis développeur web autodidacte et je suis aussi un professeur en ligne. Ce cours est pour vous qui débutez avec Angular, ou pour vous qui êtes prêt à améliorer vos compétences à un niveau supérieur. Comme vous pouvez le voir à travers ce cours, nous allons créer une application à faire avec Angular et Firebase. Cours est assez simple de sorte que vous pouvez coder avec moi et de cette façon créer votre première application à faire. Dans la section Projet de ce cours, vous trouverez, toute cette application en direct sur Firebase Hosting. Pour que vous puissiez jeter un oeil, ce que vous allez créer à travers ce cours, en direct. App aura des paquets intégrés comme Bootstrap et Font Awesome. Mais aussi, nous allons travailler avec les composants Angular, le routage des services à travers ce cours. Ensuite, nous allons également travailler avec notre Firebase, notre base de données. Là, nous allons créer notre firestore cloud, notre collection de tâches, et le rendu de nos tâches sur notre écran. Nous serons également en mesure de modifier ces to-dos, ajouter ceux, effacés ceux que nous souhaitons. Et pour la fin de ce cours, vous apprendrez comment pourriez-vous déployer votre application à faire sur Firebase Hosting et voir votre application en direct alors que nous allons travailler sur ce cours avec Angular, Firebase et même un peu d'amorçage, ce serait bien si vous en connaissiez au moins les bases. Ce n'est pas très nécessaire, vous serez toujours en mesure de travailler à travers ce cours, mais il sera plus simple pour vous de suivre le cours. Voyons maintenant ce qu'est Angular et comment pouvons-nous l'utiliser ? 2. Qu'est-ce est angulaire et comment l'utiliser ?: Donc, comme nous commençons en ce moment, voyons d'abord ce qu'est Angular. Donc Angular est un framework JavaScript pour une application d'une seule page. Nous pouvons utiliser Angular pour développer des applications sur le Web, mobiles et même les postes de travail. La vitesse, la performance et la gestion de projet d'Angular sont bien connus dans la communauté. Il y a aussi des raisons pour lesquelles Angular est au sommet à côté Vue et React.js, en tant que framework JavaScript bien sûr. Angular a également quelques outils uniques et est également livré avec des fonctionnalités déjà intégrées comme RxJS, qui est sujet avancé, mais nous allons travailler avec des observables de ceux à travers ce petit cours. Donc, vous en aurez au moins la compréhension. Angular a également son propre outil pour gérer les modules appelés Ivy. Il a également et prend en charge le routage, comme vous pouvez le voir ici, routage et navigation, HTTP et injections. Nous pouvons utiliser les services dans Angular pour injecter et partager plus facilement nos données via nos pages et composants, que vous verrez dans plusieurs vidéos. Angular a aussi sa propre documentation, qui est ouverte ici. Cette documentation est bien écrite et honnêtement beaucoup à lire, surtout pour un débutant. Bonne chose là-bas avec la documentation. Il y a tout un projet, Tutorial Project avec lui. Donc, je suis actuellement sur la page d'introduction des documents Angular. Et ici, il y a un Hello World. Et si je clique ici, vous pouvez voir tournée des héros tutoriel. Si je cliquais dessus, je commencerais à créer l'application Angular appelée Tour des héros et avec elle, vous serez en mesure de créer toute l'application, projet entier avec Angular. Angular a également une grande équipe derrière elle. Il est développé par Google et il est souvent mis à jour et mis à jour. Pour être précis, environ tous les six mois, Angular sort avec une nouvelle version. C' est pourquoi nous créons cette application dans Angular 10. Si je fais défiler ici, laisse-moi fermer ça. Vous verrez que le jeu est stable. Si j'y vais, c'est 10.1 et la prochaine version sera la 11ème version. Et vous pouvez voir que nous avons déjà 10 version d'Angular. Grâce à ces versions, il y aura des changements, mais aucun d'entre eux n'est crucial. Ils sont principalement à accélérer le codage, paquets groupés plus petits et peut-être de nouvelles fonctionnalités. Le seul grand changement qui s'est produit était de Angular JS à Angular 2 version, qui est un cadre totalement différent à ce stade. Je pourrais parler d'Angular pendant des heures et quand même j'aurai quelque chose à dire. Donc, je pense que le meilleur, la meilleure chose pour nous est juste de sauter dans le code et juste créer notre application. Vous pouvez suivre avec moi pas à pas. Et à la fin de ce cours, vous allez créer une application de tâches avec Angular et Firebase. Code. 3. Créer une application: Donc, à travers cette vidéo, nous allons créer notre application. Pour faire ça. Vous devez d'abord avoir Angular CLI sur votre machine. Alors allez à cli.angular.io. Ici vous avez un script pour installer CLI pour Angular. Vous pouvez simplement exécuter cet indicateur npm install g pour globalement @angular /cli. Lorsque cela est terminé, vous avez installé l'interface de ligne de commande avec succès et vous pourrez l'utiliser. Maintenant, ici aussi, vous voyez ce ng nouveau my-dream-app, C'est, la première utilisation de l'interface de ligne de commande angulaire. Avec cela, nous pouvons générer notre application. Donc je suis maintenant dans ma console. Vous pouvez ouvrir votre terminal ou un émulateur de console comme je l'ai ici. Donc, je pourrais juste exécuter, par exemple, ng nouvelle application à faire comme ceci. Si j'appuyais sur Entrée, mon application commencerait à se créer elle-même. Il me demandera d'abord, aimerais-je ajouter un routage angulaire ? Je pourrais passer. Oui ici, pour que le routage angulaire soit généré automatiquement pour moi. Donc, comme nous allons utiliser un peu le routage dans ce cours, nous en aurions besoin. Il me demandera également quel format de feuille de style aimerais-je utiliser ? J' ai donc CSS, SCSS, SASS, Moins ou Styles. J' utiliserais CSS, juste un simple pour ce cours. L' application a maintenant commencé à s'installer elle-même, et une fois que tout est terminé, nous continuerons notre travail. Attendez juste un peu. Donc maintenant, j'ai créé avec succès mon application de tâches. Et maintenant la prochaine chose serait ce cd my-dream-app, essentiellement cd, puis application à faire, puis notre nom d'application. Donc, je vais exécuter cd to-do application. Et de cette façon, je suis actuellement dans mon application de tâches dans mon terminal. Laissez-moi donc aller clair pour éclaircir un peu cela. Et à ce stade que nous sommes dans notre application, nous pourrions simplement exécuter ng servir. Et ng servir servira notre application sur localhost 4200. Donc, quand je lance ce ng servir comme ceci, une fois que cela est terminé, je peux ouvrir mon localhost 4200 et je verrai mon application qui a été générée par Angular CLI. Donc tout est fini. Je vais copier ce localhost et aller à mon, google, le coller dans mon URL comme ceci. Et nous y voilà. Évidemment, mon application a un peu de contenu ici, donc je vais juste vous montrer où ce contenu est pour l'instant et passer par l'application un peu. Nous avons du contenu dans notre application, évidemment, j'ai ouvert mon application avec le code Visual Studio. Si j'allais au fichier source et à mon index.html, cet index HTML servira mon application entièrement. Vous voyez ce type d'élément HTML racine d'application ici. Cela rendra fondamentalement toute mon application dynamiquement basée sur mes composants, modules, services, etc Si nous allions à ce dossier d'application ici, nous aurions cette app.component.html. Ouvre-le. Et ici, vous pouvez voir que nous avons déjà du contenu à l'intérieur, n'est-ce pas ? Donc, si je pouvais contrôler un, alland delete. Et à ce stade, je pourrais taper, par exemple, H1 et taper Hello World comme ceci. Contrôlez S pour enregistrer, mon application se rechargera automatiquement car notre application est toujours en cours d'exécution sur le localhost 4200. Et maintenant sur mon écran, je pouvais juste voir le texte Hello World, qui vient de ma balise H1. Donc, fondamentalement, le contenu entier que nous avions était dans ce fichier de composant d'application. Et maintenant, nous commençons clair. Nous avons supprimé le contenu angulaire par défaut et nous sommes ici avec notre contenu. Donc, maintenant que nous avons créé avec succès l'application, il est temps d'installer toutes les dépendances dont nous aurons besoin via cette application. Allons les installer. 4. Installing dépendances: Donc, planifier pour cette vidéo est d'installer toutes les dépendances que nous aurons besoin et utiliser à travers notre cours et notre application, évidemment. Nous n'installons pas RXJS, ou HTTP ou une autre dépendance. Ces dépendances sont principalement déjà en place et en cours d'exécution avec l'angulaire. Nous allons utiliser Bootstrap et le Bootstrap nous allons utiliser jQuery. Nous utiliserons également des icônes de Font Awesome. Nous devrons donc les installer pour l'utiliser. Et si vous vous demandez comme pourrions-nous juste les importer dans notre fichier principal, notre fichier HTML d'index ? Oui, nous le pouvons, mais je vais vous montrer un moyen plus convivial pour Angular de le faire et de ne pas remplir notre fichier index.html. Nous aurons également besoin de dépendances firebase, mais nous les installerons un peu plus tard lorsque nous commencerons réellement notre travail avec Firebase. Donc, dans ma console, si je contrôle C d'abord pour arrêter mon serveur local de s'exécuter. Maintenant, je pourrais exécuter, par exemple, npm install —save enregistrer cette dépendance, bootstrap, puis jQuery et Font Awesome. Si je pouvais appuyer sur Entrée, oh, désolé. J' ai mal tapé Font Awesome. Comme ça. Si j'appuyais sur Entrée à ce stade, mes dépendances commenceraient à installer. Et à la fin, j'aurais installé la quatrième version de Bootstrap. Comme vous pouvez le voir, 4.5.2 est ajouté, puis jQuery est également ajouté, et Font Awesome est également ajouté à mon projet. Nous avons donc ajouté ces dépendances avec succès dans notre projet, mais nous ne les utilisons toujours pas. Juste en installant, Angular ne saura pas qu'il a besoin de les utiliser. Donc, où devrions-nous utiliser ces dépendances si nous n' utilisons pas celles dans le fichier index.html. En bas, vous aurez ce fichier JSON de données angulaires. Si je voulais ouvrir ça. Voici un ensemble de schémas concernant cette application angulaire que nous avons ci-dessous, vous voyez le tableau de styles, ces styles tableau est fondamentalement tableau qui contient notre CSS, icônes ou choses comme ça. Et ce tableau de scripts est ce qui contient nos scripts, nos fichiers JavaScript. Donc, nous pourrions simplement importer ceux ici et ne pas importer ceux dans notre fichier index.html. Et une fois que nous avons installé bootstrap, jQuery, font-impressionnant, ici dans un module de nœud, si je voulais ouvrir cela, si je fais défiler un peu ici, c'est Bootstrap. Si je voulais ouvrir ceci ici comme je l'ai installé, je l'ai ici dans mon projet. J' ai un dossier dist. J' ai css par exemple, et j'ai le fichier bootstrap.min.css que je pourrais juste importer dans mon application. Et nous le ferons tout de suite. Laisse-moi clore ça maintenant. Ce noeud modules, oui. Et dans mes styles à côté de ma source, styles.css, ce fichier est fondamentalement ce fichier dans le même niveau de dossier de niveau que mon index.html. Il s'agit du fichier styles.CSS de base et global utilisé via l'application. Donc juste en dessous, je pourrais utiliser une virgule ici et ajouter une importation de plus. Par exemple, les modules de noeud slash bootstrap, slash dist slash slash CSS et slash bootstrap. .min c'est un fichier minifié, .css. Et par cela, nous avons importé Bootstrap. Et nous avons également besoin d'importer Font Awesome. Donc, pour cela une virgule de plus et ci-dessous, modules de noeud, barre oblique Font Awesome, barre oblique CSS Font Awesome, .min.css. Et oui, nous avons maintenant un Css pour nos icônes et aussi notre framework bootstrap. Alors ajoutons maintenant des scripts pour Bootstrap et jQuery. Donc, ici dans mon tableau de scripts, je vais juste ajouter le noeud, modules de noeud slash jQuery slash dist pour la distribution et jQuery, fichier .min.js. Et c'est important avant d'importer notre Bootstrap. Nous devrions également importer d'abord notre jQuery. Il sera alors jQuery sera d'abord chargé et Bootstrap saura comment l'utiliser à ce stade. Et maintenant pour importer le bootstrap. Donc, les modules de noeud slash bootstrap barre oblique JavaScript pas JavaScript, désolé, barre oblique dist, puis barre oblique JavaScript et barre oblique bootstrap.minified que js. Et c'est ça. Donc maintenant je pourrais juste réexécuter mon localhost ou 4200. Donc, je vais courir ng serve —open. Ce drapeau ouvert ici, va automatiquement ouvrir mon application dans, 00:05:12 .185 —> 00:05:13 .025 Comme ça. Vous pouvez voir que mon tagat H1 ce point ne semble pas si basique car il a des styles par défaut de Bootstrap. Si je voulais aller à mon composant d'application à ce stade, et j'ajouterais le I avec la classe de font-génial, fa. Vérifiez, par exemple, enregistrer, sur mon hôte local. Vous verrez ce panneau de vérification ici. Laisse-moi zoomer un peu. Ouais, celui-là, en gros, ça vient de Font Awesome. Donc, nous avons un bootstrap et combattu génial, importé avec succès dans notre application. Et ce point, nous pourrions créer notre premier composant. 5. Premier composant - Composant -: Alors maintenant dans cette vidéo, Plan est de créer notre premier composant. Nous allons créer un composant d'en-tête, cette barre de navigation qui sera toujours en haut de notre application. Nous allons également créer une interface utilisateur complète pour ce composant. Alors commençons. Nous pourrions créer un composant par nous-mêmes, mais il existe un moyen meilleur et plus rapide de le faire. Je pourrais aller à mon terminal comme je suis ici et ici de mon côté. Sur le côté droit, je n'ai pas besoin de le faire dans mon terminal principal où je cours localhost. Je pourrais toujours exécuter localhost et exécuter ce script dont j'ai besoin. Angular CLI nous donnera un peu plus de fonctionnalités et nous pourrions avec cela aussi générer notre composant. Donc, je pourrais taper quelque chose comme ça, ng g c en-tête. Donc, ce G signifie générer. Donc, je pourrais taper de génération à la place pas g, et ce C signifie composant. Donc, je pourrais taper entièrement le composant, mais c'est un raccourci et l'en-tête sera le nom du composant. Donc, si j'appuie sur Entrée ici, après un certain temps, vous verrez que angulaire a créé un nouveau composant pour moi. Fichier HTML du composant d'en-tête, fichier spec.ts, qui est un fichier de test, que je parlerai un peu plus tard, fichier tapé et fichier CSS pour nous dans mon code Visual Studio qui ressemble à ceci. À côté de mon composant d'application, j'aurais ce dossier d'en-tête. Donc, si j'ouvre cela, j'aurais mon fichier HTML pour mon en-tête ici. Donc, évidemment, comme angulaire généré ce composant d'en-tête, il a également ajouté cet en-tête de paragraphe fonctionne pour nous. Donc par là, nous pourrions juste vérifier si cela fonctionne vraiment. Donc, ici dans mon fichier dactylographié d'en-tête, j'ai ici sélecteur, en-tête d'application. Fondamentalement, c'est un sélecteur. Comment puis-je utiliser ce composant dans mon HTML Il y a aussi d'autres importations comme l'URL de modèle, qui utilise le composant HTML d'en-tête, qui est fondamentalement partie HTML pour ce composant et style pour ce composant est header.css style. Donc, si je pouvais copier ceci ici, et je vais à mon composant d'application, composant principal de mon application, Supprimer le contenu actuel. Et je vais juste utiliser mon en-tête d'application comme ceci, enregistrer mon fichier, sur mon navigateur, nous devrions voir quelque chose de différent. Donc maintenant sur mon navigateur, n'avez pas ces balises H1 et cette icône de vérification, je pourrais zoomer un peu sur cela. J' ai ce paragraphe avec les travaux d'en-tête. Donc, fondamentalement, mon composant est implémenté avec succès dans notre application et il est utilisé à ce stade. Donc maintenant, je souhaite coder le contenu de ce composant. Donc je vais coder cette barre de navigation avec le bootstrap. J' espère donc que vous connaissez au moins les bases de Bootstrap, mais il sera également facile pour vous de suivre. avec elle. Sur mon côté gauche, j'aurai mon code et sur le côté droit, nous aurons un aperçu en direct de ce code. Donc ici, je vais fermer tous mes éditeurs que j'ai ouverts et nous allons ouvrir juste mon composant d'en-tête comme celui-ci. Je vais supprimer ce paragraphe, sauf. Et sur le côté droit, nous ne voyons pas ce paragraphe, donc nous pourrions juste commencer à coder notre barre de navigation. Donc, je vais créer le, laissez-moi d'abord mettre le commentaire de la barre de navigation. Et je vais créer ci-dessous nav, nav élément HTML5, je vais ajouter la classe dessus. Pour navbar. Puis navbar développer lg, puis une barre de navigation sombre. Et je pourrais utiliser bg dark aussi. Alors économisez. Et vous pouvez voir ce genre de ligne grise. Donc, pour vous qui ne connaissez pas le Bootstrap, Bootstrap est fondamentalement HTML et CSS, et aussi un framework JavaScript qui a également créé, déjà créé des classes pour nous à utiliser. Donc, cette barre de navigation va essentiellement créer la barre de navigation pour nous. Cette barre de navigation développer lg. Nous allons étendre notre barre de navigation pour prendre en plein écran sur les appareils plus grands, mais sur un appareil plus petit est contenu pour notre barre de navigation ne sera pas visible, mais il sera un peu nécessaire d'être basculé, sera sur le bouton que vous verrez bientôt assez. Une barre de navigation foncée, coloriera notre couleur d'arrière-plan de la barre de navigation à une couleur foncée comme celle-ci, gris, gris foncé, et bgdark. Nous sommes en quelque sorte reconnaissons que la barre de navigation est sombre et fondamentalement mettre le texte à la lumière, à la lumière essentiellement pour être du texte blanc. Si bon contraste. Donc, tout d'abord, laissez-moi créer ce logo que nous avons habituellement dans la barre de navigation. Donc, je vais créer cette balise d'ancrage et pour mon href, je vais juste passer ce hashtag. J' ai besoin d'un cours. Et cette classe sera la marque navbar, qui est en verre pour créer le logo à l'intérieur de la barre de navigation avec Bootstrap. Et je vais ajouter le texte pour que cela soit une application à faire enregistrer. Et ici, vous pouvez voir ce logo droit, a déjà l'air génial. Alors maintenant, nous allons créer le bouton qui ci-dessous. Ce bouton, sera essentiellement le bouton de cette barre de navigation basculante sur les appareils plus petits. Alors, bouton, oui. Et le type de bouton ? Le type doit être un bouton. Et classe, il y a une classe déjà créée pour nous appelée navbar toggler comme ceci. Et je pourrais utiliser le bascule de données pour s'effondrer. Laissez-moi ALT Z cela. Donc, vous pouvez voir tout le contenu ici. Ces données bascule effondrement est essentiellement travail Bootstrap pour combiner JavaScript avec le HTML et de cette façon, il va créer cette animation d'effondrement pour nous. Aussi, nous aurions besoin de données cible. Donc, fondamentalement, quel type de contenu va basculer avec ce bouton ? Et j'utiliserais l'ID ici, res_nav. par exemple, comme un NAV réactif de navigation. Nous allons bientôt créer la section avec cet ID, mais nous avons également besoin du contenu pour notre bouton. Donc, je vais créer un élément span comme celui-ci, et j'utiliserai une classe de navbar. toggler, oui, j'ai besoin d'utiliser deux g. et Icône ici. Donc déjà sur le côté droit, vous pouvez voir que cette icône n'a pas l'air droit, non ? Son icône blanche. Donc, si je venais à ce toggler navbar et je passerais une autre classe appelée bg dark. J' aurais l'icône sombre maintenant ici. Donc maintenant pour créer cette navigation réactive pour nous, donc après notre bouton, je créerais un div avec la classe de collapsus et navbar collapsus, cette classe, ces classes sont les classes qui définissent tout pour être pliable avec notre bouton. Et je devrais créer l'ID ici de res_nav. Comme ça. Donc notre bouton pourrait cibler ça. Donc, à l'intérieur, je vais avoir juste mes liens, Liens qui, genre de liens de navigation évidemment. Et pour cela, j'utiliserais une liste non ordonnée. Je passerais la classe ici de navbar nav, et aussi ml alto. Donc, il mettra fondamentalement la marge sur le côté gauche, auto, automatiquement. Donc, il va déplacer mon contenu vers le côté droit avec cela, alors j'ai besoin de créer un élément de liste. Comme vous le savez, les listes ont généralement des éléments de liste. Donc, l'élément de liste aura une classe d'élément nav. Et à l'intérieur, je pourrais créer un lien comme celui-ci. Href pourrait être juste le hashtag. Ce lien me conduirait à une page d'accueil. Je devrais également créer une classe ici de nav link save, et nous ne la voyons pas sur le côté droit. Mais si je pouvais rétrécir mon, mon contenu un peu, toujours rien. C' est là. Donc, même sur un grand écran, nous avons ce genre de bouton ici. On a fait quelque chose de mal. Évidemment, ce que nous avons fait de mal, c'est que cette classe navbar-toggler devrait avoir deux gs comme ça. Et maintenant ma barre de navigation n'aura pas ce bouton sur les appareils à écran plus grand. Mais si je m'attendais à mon élément, et, passons-le sur l'iPhone X. Nous aurons ce bouton ici. Et si je clique dessus, il va juste réduire cette div avec l'icône d'effondrement dessus. Réduire la classe dessus, désolé. Alors laissez-moi reculer et revenir à mon code. Et maintenant dans mon code, je pourrais créer d'autres éléments dans ma liste. Donc, je copierais ce deux fois, 1, 2 et je pourrais, Pour celui-ci utiliser environ et todos, qui sera toute la page pour nos to-dos. Et maintenant, nous avons cette maison à propos et à ceux qui ne sont pas utilisables du tout, évidemment. Et nous n'avons pas encore le contenu pour ceux-là. Mais maintenant, nous avons entièrement créé notre composant d'en-tête. Nous pouvons voir comment cela va également regarder sur un plus petit écran périphériques. Si je m'attends à mon élément, ouvrez la vue de l'iPhone. Oui, ça a l'air déjà bien. Et maintenant que vous savez comment créer un composant et l'utiliser, créons maintenant nos autres composants que nous allons utiliser dans ce cours. 6. Composants d'accueil, à propos et à dos: Donc, maintenant que vous avez créé le composant d'en-tête, vous devriez savoir comment pourriez-vous en créer les autres. Donc, c'est bon pour vous de vous tester. Nous aurons besoin de la page d'accueil, à propos et à faire. Donc, ce sera bon si vous voulez générer des composants pour ces pages aussi. Donc je suis de retour dans mon terminal et ici sur mon côté droit du terminal, je dirige toujours mon localhost. Je vais exécuter ng générer le composant et la maison comme ceci. Mais maintenant je passerais, — et Skiptests comme ça. Ce saut de tests, il ne générera pas le fichier de test pour moi, car nous n'avons pas besoin des fichiers de test pour cette simple petite application, je créerais la même chose, mais maintenant ce sera le composant about. Et vous voyez qu'il génère et crée immédiatement nos composants. Et enfin, comme ça à faire. Ouais, donc maintenant dans notre code à côté de notre composant d'en-tête, nous avons à propos du composant home et to-do. Et tous ces composants, si vous voulez aller à leurs fichiers HTML, il est juste leur nom et fonctionne mot. Donc, à ce stade, j'irais à mon composant d'application HTML ici. Et en dessous de mon en-tête d'application, j'utiliserais App. Et vous pouvez voir qu'ici je pourrais utiliser déjà la maison comme ça et Control S pour cela pour le sauver. Et allons le voir sur notre hôte local. Vous pouvez voir ci-dessous mon en-tête, il y a un composant personnel, non ? Pour ce genre de, notre composant d'en-tête est partageable via d'autres composants, n'est-ce pas ? Donc, une fois que nous sommes sur la page, nous verrons toujours ces composants ici, mais ici le contenu va changer. Ces travaux à domicile seront sur les travaux, seront des travaux à faire, n'est-ce pas ? Et pour cela, nous utilisons le routage dans Angular pour les changer, fondamentalement pour changer ces routes, pour changer ces pages, nous utilisons un routage qui est déjà implémenté dans Angular. Alors utilisons-nous ça dans notre prochaine vidéo. 7. Routage angulaire: Donc, dans cette vidéo, nous allons configurer des itinéraires pour notre application. Nous créerons également des liens qui, une fois que nous cliquerons sur ceux-ci, nous conduiront à la page dont nous avons besoin en fonction de cette route. Ces pages montreront également juste le contenu qu'ils devraient afficher pour cette page à partir de ce composant essentiellement, commençons. Donc, dans mon projet, je pourrais aller dans ma source ici et l'application. Et je pourrais aller ici au module de routage App. Si vous vous souvenez quand nous avons généré l'application Angular, il nous demande aussi, nous a demandé souhaitons-nous intégrer le routage vers l'application ? C' est pourquoi il a également créé ce module de routage d'application pour nous. Donc, dans ce module, nous avons cette const de routes, et c'est là que nous configurons fondamentalement nos routes pour notre application. Donc ici, je vais juste utiliser mes accolades et pour configurer l'itinéraire, je dois d'abord passer le chemin. Le chemin sera le chemin de cette route et je taperai ici. Et après cela, j'ai aussi besoin de configurer le composant, composant que je souhaite utiliser, non ? Le composant sera donc le composant de la maison, un second composant que nous avons déjà installé dans notre projet. Donc, c'est fondamentalement à quoi ressemble une route dans Angular. Nous avons besoin d'avoir et de faire ça plus. Donc ici, j'utiliserais comme ça. Et le composant sera sur le composant. Et aussi je vais utiliser pour dos route, à dos. Et le composant sera à dos composant, à droite, comme ceci. Aussi, si l'utilisateur visite l'itinéraire vide, nous devrions le rediriger vers le composant d'accueil que je crois, donc ici ci-dessus, j'ajouterai une autre route, cette route. Et laissez-le mettre une virgule ici. Cette route aura un chemin vide. Et au lieu du composant, j'utiliserai ReDirectTo et j'utiliserai la maison ici. Je souhaite rediriger vers le composant de la maison. Aussi, j'ai besoin de passer le match de chemin. Je souhaite correspondre pleinement à mon chemin. Tellement plein ici, et c'est tout. Donc maintenant que je suis dans mon application elle-même, je pourrais rafraîchir mon localhost ici, et vous verrez que cela me conduira à la page d'accueil. Aussi, si je clique ici à la maison, rien ne fonctionne bien ? A propos aussi, tout va à la page d'accueil. Nous avons donc besoin de configurer ces clics pour nous conduire aux bonnes pages comme la page d'accueil et les tâches à faire. Pour ce faire, je vais ouvrir mon composant HTML d'en-tête ici. Donc, pour configurer notre composant d'accueil pour nous conduire à la page d'accueil, nous devons utiliser ces accolades et le lien de routeur. Le lien routeur pourrait me conduire aussi. Page d'accueil comme ça. Je vais copier ceci et le coller deux fois de plus pour environ et à faire. Donc, ici devrait être à propos de la page et de la page dos comme ceci. Donc, dans mon application elle-même, si je clique sur ce sujet me conduira à la page à propos, si je clique sur la page d'accueil, cela me conduira à la page d'accueil. Si vous cliquez sur pour faire, cela me conduira à dos route, n'est-ce pas ? En outre, je devrais configurer la classe active pour laquelle l'itinéraire est actuellement actif sur mes liens. Pour ce faire, nous pouvons utiliser quelque chose appelé le lien de routeur, actif. Le lien de routeur actif vient d'Angular et nous pourrions simplement passer à cette classe. Et vous savez que Bootstrap a déjà sa classe active et nous pouvons l'utiliser. Mais vous pouvez également créer votre propre classe active personnalisée et le configurer ici. Donc le lien de routeur actif pour chacun des éléments de lien ici, je vais utiliser pour agir. Donc maintenant, vous pouvez voir l'heure actuellement sur mon itinéraire à faire et mon lien à faire est actif. Si je change à environ, il sera actif, changera à la maison, il sera actif. Mais il y a aussi un problème. Nous changeons évidemment la route, mais le contenu lui-même reste pour les travaux à domicile. Nous devons également modifier le contenu. Donc juste en configurant notre barre de navigation et notre routage, le contenu lui-même ne changera pas pour cela où nous avons implémenté le composant maison ici dans notre application component.html nous pourrions le supprimer dès maintenant et utiliser quelque chose appelé une prise de routeur. sortie du routeur affiche le contenu en fonction de l'itinéraire, en fonction du composant de cette route. Et maintenant vous pouvez voir que je suis dans mon itinéraire à propos et il dit sur les travaux. Permettez-moi aussi de zoomer un peu. Donc vous pouvez voir si je change ça en une maison, vous verrez des travaux à la maison à dos, à dos travaux. Notre routage est donc entièrement configuré, et nous devrions maintenant avoir au moins une partie du contenu de nos pages ici. Alors commençons à travailler avec ceux-ci. 8. Contenu pour la maison et la page à propos: Maintenant, nous souhaitons créer du contenu pour nos pages. Nous commencerons par la page d'accueil et sur les pages de ma page d'accueil. Je vais d'abord fermer tous mes fichiers ouverts ici, et j'irai à la maison HTML ici. Je vais mettre ici d'abord le commentaire de la maison, désolé, mal dactylographié contenu de la page d'accueil. Et nous pourrions commencer à créer notre contenu ici. Je ne ferai rien de grand juste comme un petit contenu pour la maison et sur la page. Donc div, comme nous ne nous concentrons pas sur ceux dans ce cours. Donc, la fin du contenu de la page d'accueil et les classes pour mon div seraient jumbotron et aussi centre de texte. Ces classes viennent évidemment d'un Bootstrap. Jumbotron est une grande section d'un bootstrap. Ensuite, j'utiliserai H1 et j'utiliserai une classe dessus display-4. Comme ça. Ce sera comme un, il utilisera la balise H1, mais il l'affichera comme un quatre pour la taille et, Hello World sera un texte pour cela. Ensuite, je pourrais utiliser un paragraphe ici avec une classe de plomb, qui signifie que ce paragraphe sera plus visible, plus grand paragraphe car il est un premier paragraphe dans la page. Et il dira simplement, bienvenue dans notre application de tâches avec Angular et Firebase. C' est ça. Nous pourrions également ajouter un bouton ici. Donc, le bouton comme celui-ci, je vais ajouter un type pour le bouton sera juste le type de bouton. Et aussi les classes seront btn, btn-rimary, et btn-lg pour grand bouton et primaire le coloriera, coloriera à la couleur primaire de bootstrap, qui est une couleur bleue. Et ici, je vais utiliser un to-do comme ça. Ce bouton me mènera à la page des tâches. Donc, je pourrais utiliser ici aussi le lien de routeur. Et il sera mis en place pour me conduire à des choses comme ça. Cela devrait également être entre guillemets, guillemets simples. C' est tout sur ma page d'accueil. Maintenant, vous pouvez voir ce Hello World. Bienvenue dans notre application à dos avec le texte Angular et Firebase et pour texte dos je veux utiliser le texte to-dos ici, je vais configurer, aller à des tâches Comme ceci. Et maintenant, si je pouvais cliquer sur ce bouton, vous pouvez voir que cela me conduira à la page des tâches, n'est-ce pas ? Donc maintenant, nous allons créer du contenu aussi pour la page À propos. Pour à propos de la page, je vais ouvrir mon sujet HTML. Donc, je vais d'abord mettre un commentaire sur le contenu de la page. Et ici, je vais créer un div. Permettez-moi également de mettre fin commentaire, fin de contenu de la page. Et maintenant je pourrais utiliser ici conteneur, classe, conteneur et centre de texte bon. A l'intérieur, je vais utiliser mon H1 avec la classe de marge haut à 5. Il va déplacer mon H1 par cinq espaces de Bootstrap. A l'intérieur, je vais passer à propos de la page comme ça. Et ajoutons aussi un paragraphe. Le paragraphe pourrait également être un paragraphe principal. Donc, je vais ajouter la classe de plomb. Le texte à l'intérieur sera, nous allons coder notre application de tâches. Et permettez-moi d'ajouter un paragraphe de plus. Celui-ci sera un paragraphe normal et j'utiliserai l'application sera entièrement développée avec Angular et Firebase comme une base de données comme celle-ci. Donc maintenant dans ma page à propos, j'ai un contenu comme celui-ci qui ressemble à la page d'accueil, mais sans ce jumbotron. Donc c'est assez bon pour ces deux pages. Nous devrions maintenant nous concentrer sur la page de tâches essentiellement. Et nous allons coder ça la prochaine vidéo. 9. Contenu de Todos Page: Donc, mon objectif principal ici sur la page de tâches est d'avoir une section ici au type de section d'en-tête haut où je serai en mesure d'ajouter nos tâches à faire. Et en bas, nous devrions avoir deux listes, une liste pour les tâches et une liste pour les tâches terminées, ces tâches que nous avons déjà faites. Donc, je vais fermer mes fichiers que j'ai ouverts dans mon code Visual Studio, et j'ouvrirai le composant HTML to-dos. Donc ici, je pourrais d'abord taper commentaire, en-tête to-dos, ajouter un div, et aussi ajouter la fin du commentaire final de l'en-tête to-dos. Et cet en-tête aura quelques classes. Je vais d'abord utiliser une classe de jumbotron, et le centre de texte. Centre comme ça. Et à l'intérieur je pourrais guérir ma classe de conteneur, puis à l'intérieur de ce conteneur, nous pourrions avoir un div de plus avec la classe de rangée. Et pour le couloir de la mort, on pourrait avoir une grille à l'intérieur. Donc, je vais ajouter un div avec la classe des petits périphériques de colonne 2 et des périphériques moyens de colonne 3 comme ceci. Cela servira juste, comme un espacement, je vais juste déplacer ma section principale d'un en-tête au milieu de mon écran. Donc, j'aurai deux ou trois colonnes sur un côté gauche vide. Et lui-même, ce contenu d'en-tête lui-même aura une classe de colonne sm de huit et la colonne md de six. Donc, ce qui signifie que sur les périphériques plus petits sur le côté gauche deux colonnes seront vides, alors il prendra huit colonnes de la largeur, et à la fin deux des colonnes seront à nouveau vides car Bootstrap a 12 colonnes. Donc 2 plus 8 est 10 et 2 colonnes vides, ce qui est 12. Donc ici, je pourrais également ajouter des commentaires pour la fin du conteneur, la fin de la ligne et la fin du contenu comme celui-ci et l'intérieur de mon contenu ici, je pourrais d'abord ajouter H1 ajouter une classe d'affichage 4 et en-tête dira simplement Todos comme ceci. Et ici, je pourrais avoir l'entrée. Groupe d'entrée avec l'entrée et le bouton pour ajouter mes tâches. Donc, je vais ajouter un div avec la classe du groupe d'entrée, qui est la classe pour définir le groupe d'entrée. Et à l'intérieur, j'ajouterai mon champ de saisie, qui est un type de texte. Et les classes seront le contrôle de forme, qui est la classe à un genre de style un peu plus notre entrée, pas seulement vous avez celui de base. Et l'espace réservé sera todo title. C' est ça. Et je devrais aussi avoir un bouton ici, mais je vais ajouter ce bouton à mon champ de saisie. Donc ils sont un peu tous les deux empilés ensemble. Et je pourrais utiliser un groupe d'entrée et ajouter une classe dans Bootstrap pour cela. Donc, la classe div est le groupe d'entrée append. Et à l'intérieur, j'aurai juste un bouton. Ce bouton sera un type de bouton. Et nous aurons une classe de btn, btn outline succès, ce qui est assez bon. Il dira aussi juste ajouter todo, c'est tout. Donc, sur ma page, vous pouvez voir à quoi cela ressemble. J' ai un titre todos à faire, champ de saisie et bouton ajouter à faire, qui est un peu lier ici au champ de saisie. Nous allons maintenant créer notre première liste de nos tâches. Pour ça. Juste en dessous de ma rubrique, en-tête. Je vais ajouter une liste de choses à faire ajouter le div. Je vais ajouter ici la fin de to-dos. Et ce premier div devrait être le conteneur. Donc la classe sera Container. Ensuite, j'aurais div id, classe de ligne. Ensuite, j'aurai un div avec la classe de la colonne sm deux et l'arbre de colonne md, qui est juste à nouveau espacement comme nous l'avons dans notre en-tête de to-dos. Et un div de plus avec une classe de colonne sm huit et colonne md six, ce qui est la même chose que nous avons utilisé ici dans notre en-tête, non ? Donc, comme vous souhaitez ajouter des listes de tâches, nous allons simplement ajouter un groupe de listes à partir d'ici. Donc, la liste non ordonnée aura une classe de groupe de liste comme celle-ci. Et à l'intérieur je devrais avoir, dans mes objets à l'intérieur je devrais avoir cette sorte de boîte qui pourrait être cochée pour finir nos tâches et aussi les titres pour nos tâches. Donc, je vais ajouter un élément de liste, devrait avoir une classe d'élément de groupe de liste comme celui-ci. Et à l'intérieur, comme je l'ai mentionné, j'aurai mon icône. Donc la classe sera Font, Awesome, Font Awesome carré o. je vais utiliser celui-là. Et en dessous de mon icône, j'aurai un titre. Ce qui pourrait être aller marcher comme ça. Permettez-moi également d'ajouter deux autres à ceux qui sont ici pour que nous puissions avoir quelque chose à montrer. Alors allez à Marche, apprenez le codage. Je ne sais pas. Buvez trois gallons d'eau. Oui. Ok, donc pour ça maintenant, on peut aller dans notre navigateur et ici vous verrez cette liste juste ? Plus tard. Nous serons en mesure de les cocher et de les déplacer dans les tâches terminées. Et cela devrait également être rendu dynamiquement ici, pas simplement statiquement comme ceci ici. Mais pour l'instant, nous allons ajouter une liste de plus ci-dessous pour finir à ceux. Donc, ici, où j'ai la fin de la liste de tâches, je pourrais copier ceci entièrement. Collez-le ici, et j'ajouterai un commentaire à faire fini. Fin de, fini à faire comme ça. Et je vais avoir un conteneur, je vais ajouter à cette marge haut à cinq pour le déplacer un peu d'un haut, rangée, c'est ok. Cet espacement div ici est correct. Ensuite, j'ai mon contenu div, ce qui est correct. Juste au-dessus de ma liste non ordonnée, j'ajouterai H4 avec la classe du centre de texte pour le déplacer dans un centre. Et il va juste dire à faire fini comme ça. Le groupe de liste pourrait avoir, je ne sais pas, des articles comme acheter un T-Shirt. Et ça pourrait être correct. Je pourrais supprimer ces deux éléments de liste, mais les icônes elles-mêmes, je n'aurai pas d'icône carrée vide ici. Je vais avoir font-génial, vérifier l'icône o carré. Et après mon titre ici, j'aurai une icône aussi appelée laissez-moi l'ajouter. Je peux être Font Awesome Font Awesome corbeille, icône, corbeille icône que je pourrais utiliser, qui utilisera essentiellement être utilisé pour supprimer nos tâches. Et je vais flotter ça sur le côté droit. Donc, je vais ajouter la classe droite flottant et la marge haut à 1. C' est ça. Donc maintenant, dans ma page, vous pouvez voir cette liste de tâches finies, qui est un acheter un t-shirt, évidemment coché carré ici et cette icône ici qui pourrait être cliqué plus tard, qui sera cliqué plus tard pour supprimer les tâches. Nous serons donc en mesure de confirmer nos tâches pour les terminer et ils seront immédiatement déplacés vers la liste du bas. Et aussi, nous serons en mesure de, un todo nos to-dos et ils seront déplacés à la liste sur. Donc, notre page de tâches est également entièrement terminée maintenant, mais c'est juste une partie de l'interface utilisateur. Nous aurions encore besoin d'ajouter des fonctionnalités. La bonne chose est que toute notre application est toujours superbe sur les ordinateurs de bureau et les petits appareils. Pour qu'on puisse vérifier ça. Je pourrais ouvrir des appareils plus petits ici, et vous pouvez voir que la page de tâches de l'application ressemble beaucoup. A propos de la page aussi, la page d'accueil aussi, non ? Alors allez à ceux-là. Super. Alors mettons en place notre Firebase. 10. Firebase et installation: Ok, donc maintenant il est temps de parler un peu Firebase et aussi de configurer notre Firebase pour notre application. Firebase est cette plate-forme de développement avec plusieurs fonctionnalités que nous pourrions utiliser pour le développement mobile et web. Il est développé par Google et il nous aide à construire et à développer nos applications. Grâce à ce cours, nous utiliserons la base de données cloud Firebase. Avec Firebase, vous n'avez pas seulement besoin d'utiliser une base de données cloud, mais il existe également une base de données en temps réel. Firebase prend également en charge d'autres fonctionnalités telles que l'authentification, stockage, l'hébergement, les fonctions, l'analyse et plus encore. À la fin de ce cours, nous allons également travailler avec Firebase Hosting et déployer notre application sur Firebase. Si vous avez déjà le compte. Vous regardez le même écran que moi. Ceci est fondamentalement la console de notre Firebase et la partie principale pour moi ici, si vous n'avez pas le compte aller au processus d' inscription car il est juste le basique et simple. Donc, ici, nous allons ajouter le nouveau projet. Je vais donc cliquer sur ce grand écran ici. Et nous devons d'abord créer le nom de notre projet. Donc, ce serait de faire application. Firebase va également générer quelques caractères à la fin. Nous pourrions donc avoir un identifiant unique pour notre projet. Alors maintenant, je pourrais aller continuer et il va nous poser d'abord des questions sur Google Analytics. Souhaitons-nous intégrer cela dans notre projet ? Il n'y a pas besoin de cela. Comme ce projet n'utilisera aucun type d'analyse. Donc, créez le projet. Firebase est en train de créer notre projet et de tout mettre en place pour nous. Une fois terminé, nous serons redirigés vers la plateforme, dans le tableau de bord de notre projet. Donc notre nouveau projet est prêt pour que nous puissions cliquer sur Continuer, Et il nous redirige dans le projet lui-même. Donc c'est notre tableau de bord. Ici, sur le côté, vous pouvez voir les fonctionnalités que Firebase prend en charge comme l'authentification, cloud firestore, la base de données en temps réel, le stockage, l'hébergement, les fonctions, l'apprentissage automatique. En outre, il y a un test pour l'égalité de l'application, analyse complète et la façon de développer l'application avec différents types de tests, liens, etc. Ici, en haut, vous pouvez voir que pour commencer en ajoutant Firebase à votre application, nous le ferons d'abord, si vous ne le voyez pas ici en haut, vous pouvez cliquer ici sur une icône de rouage et aller dans les paramètres du projet. Et vous le verrez ici dans la section de votre application ci-dessous. J' espère donc que vous vous souvenez que j'ai d'abord mentionné que nous allons installer des dépendances pour Firebase. Nous devons donc installer 2 dépendances. Donc, je vais exécuter npm install, —save, firestore et angularfire2. Fire store est les dépendances qui nous relieront à la, à notre Firebase et feu angulaire 2 va, nous aider à travailler avec elle afin que je puisse juste appuyer sur Entrée et attendre qu'elle s'installe. Donc, une fois cela terminé, je reviendrai à ma vue Firebase ici. Et vous pouvez voir que je pourrais intégrer mon projet de Firebase à iOS, Android, Unity, et aussi des applications web. Donc, je vais cliquer sur les applications web et la première chose que je dois faire est d'enregistrer l'application. Donc, un peu pour créer le nom de l'application. Donc, je vais créer un nom d'application à faire, que nous utiliserons plus tard dans notre projet Angular pour se connecter les deux ensemble. Il nous interroge également sur l'hébergement Firebase. Nous ne nous intégrerons pas ici. On s'intégrera plus tard quand on sera... un peu manuellement. Ainsi, vous pouvez voir l'ensemble de la configuration. Alors enregistrez l'application ici. Et cela nous donnera le SDK que nous pourrions connecter à notre application. Je pourrais continuer à consoler ici. Et je vais voir ce SDK aussi ici. Cette configuration Firebase est l'objet dont nous avons un peu besoin. Nous devons donc intégrer cela dans notre application, dans notre environnement de notre application. Et avec ça, nous pourrions travailler avec d'autres choses de Firebase. Alors maintenant dans mon terminal, je vais aller à la source. Et ici le dossier environnements. Il y a l'environnement Ts. Il s'agit du dossier de transfert, test ou de codage de ce fichier d'environnement. Je pouvais entendre juste utiliser des virgules et coller cet objet de configuration Firebase. Ce ne sera pas égal mais deux points, et je vais supprimer cette ligne de fin ici. Et aussi je vais résoudre rapidement ce problème pour être des guillemets, pas des guillemets doubles. Je répare juste pour 1, 1 seconde, je vais réparer pour tous, oui. Donc, par ceci, notre application, quand nous frappons cette clé d'API ou le domaine, URL de base de données, il saura comment travailler avec ceux-ci. Il y a aussi un compartiment de stockage que nous pourrions utiliser, un identifiant de messagerie et d'application que nous pourrions utiliser à partir de notre Firebase. Aussi, je vais copier maintenant cet objet et je vais aller au fichier Environnement Production et je vais coller la même chose là. La plupart du temps, vous aurez des choses différentes pour votre production et votre mise en scène, votre base de données sera différente, votre environnement de test sera différent. Probablement un dépôt, vous aurez différents ceux aussi. Donc ici, j'utilise juste la même chose dans le but de ce cours, mais la plupart du temps vous ne l'utiliserez pas comme ça, n'est-ce pas ? Donc aussi maintenant que nous avons, cette configuration dans notre application, nous avons encore besoin de configurer les dépendances que nous avons installées. Donc, pour ceux-là, je vais aller dans le module application et application ici. J' ai donc besoin d'importer mes dépendances ici. Donc, je vais importer le module de feu angulaire comme ceci. Cela sera automatiquement importé à partir de Angular fire 2. Et ce module, nous connectera à notre Firebase. Donc ici, je vais utiliser la méthode d'application initialize que ce modèle a. Et dans celui-ci, je vais passer ma configuration à partir du fichier d'environnement que j'ai. J' ai donc besoin d'importer également ce fichier d'environnement. Donc, ici en haut, je vais importer l'environnement à partir du dossier de cet environnement et du fichier Environnement. Donc ici maintenant je pourrais passer mon environnement. et sur l'environnement j'ai la configuration Firebase ici, non ? Cet objet. Oui. Et avec cela, nous passons un peu notre configuration Firebase à ce module de feu angulaire. Mais nous devons quand même dire explicitement, dites-le comme quelle application est-il. Donc ici, je vais juste passer le nom de l'application, ce qui est à faire. Comme ça. Et avec cela, nous avons importé avec succès, un peu connecté notre Firebase à notre application. Je vais également importer ici un module de plus comme Angular fire store module comme ceci. Celui-ci ne sera pas automatiquement importé, donc je l'importerai ici en haut. Donc, importez Angular Firestore module, à partir de, angularfire2/firestore, comme ceci. Avec cela, nous avons entièrement connecté notre application à notre Firebase et nous pouvons travailler avec elle dès maintenant. abord, revenons dans notre Firebase et y créons notre base de données cloud. Nous devrions également créer une collection de tâches dans cette base de données et créer quelques tâches là. 11. Collection Cloud Firestore - Todos: Alors maintenant, je suis de retour dans ma Firebase. Ici, vous pouvez voir qu'il dit que j'ai une application qui à faire application, ce qui est correct. Je souhaite créer Cloud Firestore maintenant pour mon application, donc j'irai ici sur Cloud Firestore. Et cela me proposera essentiellement de créer cette base de données cloud Fire store. Donc, vous pouvez voir la vidéo sur le magasin de feu de nuage, mais je vais immédiatement aller et créer ma base de données ici. Je pourrais en créer un pour le mode production et un pour le mode test. Le mode de test me permettra essentiellement de lire les données, d'écrire des données et d'en supprimer des données. Pas seulement moi, mais toute personne qui se connecte à mon application et mode de production donnera juste l'autorisation aux utilisateurs qui ont cette autorisation. Donc, je vais juste ouvrir cela pour ne pas travailler avec le mode de production pour l'instant. Donc le mode test est correct. Ce mode de test, nous allons juste durer 30 jours. Donc, après 30 jours, il reviendra en mode verrouillé à la production, alors ensuite. Et j'ai aussi besoin de passer l'emplacement. Donc passer comme Europe Ouest, ce n'est pas un problème pour moi comme je suis en Europe et un peu sur Europe Est, mais Europe Ouest est plus, est le seul que je pourrais choisir ici. Alors maintenant que tout est créé, je suis redirigé vers mon magasin de pompiers cloud. À ma base de données.. Ici maintenant, vous pouvez voir cette application à faire et ces quelques caractères qui ont été générés. Donc c'est correct. Alors maintenant, je pourrais créer ma collection. Si je clique ici sur Démarrer la collecte, je pourrais passer l'ID de collecte. Cet ID sera juste le nom de la collection. Vous pouvez voir l'exemple ici, Utilisateurs de la collection. Donc, si nous créons l'application qui contient les utilisateurs, nous aurions une collection d'utilisateurs, mais nous créons une collection de tâches. Donc, je vais passer ici l'ID de collecte à dos. Donc, si je vais maintenant maintenant, il me sera également proposé d'ajouter mon premier document ici. Donc un peu d'abord à faire. Donc, pour l'ID du document, je vais générer automatiquement cet ID. Donc cet ID sera généré à partir de Firebase et champ, donc les champs que nous, que nos tâches auront est le titre pour todos, n'est-ce pas ? Et la valeur pourrait être aller à stocker comme ça. Je vais ajouter un champ de plus, qui sera rempli champ. Et ce champ ne sera pas de type String, type Booléen, et il sera faux initialement. Alors économisez. Maintenant, vous pouvez voir que j'ai ma collection de choses à faire ici. J' ai un document ici par l'ID et les valeurs du document ici sur le côté droit. Permettez-moi de créer deux autres documents. Ainsi, comme document généré automatiquement, le titre du champ ID sera acheter un t-shirt, par exemple. Permettez-moi de mettre le s aussi capitalisé et le champ d'ajout. Maintenant, je vais utiliser le champ terminé avec le type de booléen et ce sera vrai. Sauvegardez. Et maintenant un document de plus, auto-générer ID. Champ, titre. Type est string, ce qui est vrai et la valeur pour ce titre sera laver une voiture. Ensuite, ajoutez un champ. Terminé. Le type est booléen, la valeur est false. Sauvegardez. Maintenant, nous avons au moins nos données dans notre base de données. Donc, nous pourrions maintenant dans la prochaine vidéo, extraire ces données dans notre application. 12. Service et injections angulaires: Donc, pour extraire des données de Firebase et travailler avec les données, nous allons utiliser le service Angular. service dans Angular est le type de fichiers que nous pourrions utiliser pour partager nos données via des composants. Nous allons en créer un maintenant et nous l'utiliserons pour communiquer avec notre Firebase et coller ces données de firestore à nos composants dans notre composant to-dos ici. Les services sont des fonctionnalités injectables afin qu'ils puissent être injectés dans les composants, Autres services, gardes d'itinéraire, directives, et c'est pourquoi nous les utilisons pour ceux-ci. Donc maintenant, je pourrais courir ici ng générer le service. Je vais générer le service dans le dossier des services et le nom sera service à dos. J' utiliserai également l'indicateur SkipTests ici, donc il ne génère pas le fichier de test pour ce service car je n'en ai pas besoin. Alors maintenant que j'en ai fini, je pourrais retourner à mon service. Donc, dans mon service ici, donc je vais aller à l'application source et j'aurai le dossier de services et le service à dos au service est généré. Et la première chose que vous pouvez voir est cette injection. Ce injectable est essentiellement fourni dans une racine. Donc, ce qui signifie que ces services fournis à la racine de notre application, sorte qu'il peut être partagé à travers tous les modules et composants que nous avons. Pour travailler avec Firebase et Firestore. Nous devons également importer les deux modules de Angular fire 2 ici. Donc, en haut, je vais taper import. Et maintenant firestore angulaire, qui fonctionnera directement et nous reliera à notre firestore, puis collection de magasin de feu angulaire, qui fonctionnera essentiellement avec notre collection de to-dos et document de magasin de feu angulaire, qui fonctionnera pour, avec chaque document de cette collection. Et je vais importer ça du feu angulaire vers /magasin de feu comme ça. Donc maintenant, je vais utiliser mon magasin de feux angulaires en premier. Ici, dans le constructeur, je dois passer ce magasin de feu angulaire. Donc, je vais utiliser fs privés pour le magasin de pompiers. Et je vais l'utiliser pour être réglé sur le type de Firestore Angular. Donc, avec cela, nous pouvons travailler avec le magasin de pompiers avec ce fs vrai à travers notre service. Et par là, nous pourrions sélectionner notre collection et faire quelques autres choses. Et maintenant, dans la prochaine vidéo, nous allons les utiliser et travailler avec notre firestore pour récupérer nos données. 13. Obtenir des trucs de l'entreprise: Alors planifiez ici est d'utiliser notre firestore angulaire firestore dans mon service et récupérer mes données de mon firestore cloud que j'ai. Donc, je vais d'abord créer quelques variables. Donc collection to-dos, comme nous allons tirer la collection de to dos, à ces collections sera le type de collection Angular firestore comme ceci. Et cette collection firestore aura le type de choses à faire. Nous n'avons toujours pas créé ce type. Ce à faire sera donc le modèle de nos données. Donc, je vais créer ce modèle maintenant. Je vais aller ici dans mon application et créer un dossier sur elle, appelé modèles. Et dans les modèles, je vais créer à faire. modal. ts. Donc maintenant dans ce fichier, je pourrais exporter mon interface de choses à faire, qui sera un peu un modèle pour mes données. Et ce modèle pour mes données aura un ID. Mais cet identifiant ne sera pas un peu requis. Nous allons le récupérer, mais nous n'avons pas vraiment besoin d'envoyer l'ID pour créer les données elles-mêmes. Donc, l'ID sera le type de chaîne. Ensuite, le titre, comme vous le savez, sera le type de chaîne. Et aussi nous aurons terminé, qui est le type de booléen. Donc maintenant, je pourrais importer mon modèle de tâches dans mon service ici. Donc, à faire, je vais l'importer en haut, ici. Et maintenant, je pourrais utiliser ce modèle pour modéliser mes données via le service. Comme je dois dos collection. Je vais maintenant créer aussi pour faire doc. Faire doc sera fondamentalement type de document de magasin de feu angulaire, et ce sera également le type de à faire. Ce serait chaque document individuel sur lequel nous allons travailler pour l'éditer, supprimé ou mis à jour d'une manière ou d'une autre, n'est-ce pas ? Et aussi je vais avoir besoin de faire, tout mon tableau de to-dos mes données principales. Donc, à faire, qui sera le type d' observable comme celui-ci, qui doit être importé de RXJS ici en haut. L' observable, je vais en parler dans une seconde. L' observable aura également le type de à faire, mais ce sera de faire tableau comme fondamentalement, il, ceci à dos tiendra le tableau de nos to-dos. Donc mon observable ici, l'observable est fondamentalement le wrapper pour mes données. Donc, un peu, j'emballe mes données à faire dans des données DOS. Et sur ceux-ci, je pourrais utiliser différentes méthodes, que vous verrez dans une seconde. Mais aussi je pourrais m'abonner à ces données, obtenir les données correctement et comme Angular avec la Firebase me retournera le genre de données observables. Je le ferai, ce sera beaucoup plus facile pour moi de travailler avec ceux et les manipuler ceux de mon côté. Donc maintenant dans le constructeur ici, je pourrais définir mes données, définir des données ici fondamentalement. Donc, je vais utiliser ceci. to-dos collection pour être égal à ce genre ceci. fs que j'ai mentionné, fs comme ceci. Et sur FS, j'ai une méthode appelée collection. Cette méthode de collection va essentiellement tirer la collection que j'ai sur ma Firebase. Donc, la collection est le nom de to-do comme j'espère que vous vous en souvenez. Donc maintenant que j'ai ma collection dans mon service, je peux extraire les données, chaque document de la collection elle-même. J' ai besoin de sauvegarder ces données dans mon à faire. Donc, je vais mettre ça. à faire pour être égal. À cette collection. to-dos. Cette collection que j'ai mis ici du magasin de pompiers. Et j'utiliserai. changements d'instantané. Changements d'instantané à ce sujet. Fondamentalement, je pourrais utiliser non seulement des changements d'instantané, mais aussi des changements de valeur. Les changements de valeur me rendront juste les données et il me retournera juste ces données de documents, n'est-ce pas ? Je n'ai pas besoin de passer de fonctionnalités supplémentaires pour me renvoyer des données, mais je n'obtiendrai pas l'ID avec des changements de valeur. Pour obtenir l'ID, j'ai besoin d'utiliser un instantané changements et un peu ajouter des fonctionnalités supplémentaires. Les changements de valeur retournent un peu les données de ce côté droit. Et vous pouvez voir que l'ID du document n'est pas dans le, dans le côté droit de votre écran, n'est-ce pas ? C' est donc un peu dans ce niveau de document principal. Et pour retourner cet ID, j'ai besoin d'utiliser également les changements d'instantané pour jeter un oeil profondément dans le document lui-même et aussi pour lier cet ID au document lui-même , puis retourner le document entier et l'enregistrer dans mon tableau . Cela semble peut-être compliqué, mais ce n'est pas évident. Donc, ici, maintenant je pourrais utiliser une méthode pipe de méthode de tuyau me permettra de lier à ces changements d'instantanés. Deux méthodes. Je n'utiliserai pas, deux de ceux que je n'utiliserai qu'un. Je vais utiliser la méthode de la carte ici. Donc, la carte elle-même doit être importée. Donc, je vais importer la carte de Rxjs/opérateurs. Donc, vous pouvez voir que comme mes données sont observables, je peux travailler avec une carte dessus. Donc, cette carte va me donner quelques changements de mes données à partir des changements d'instantané, n'est-ce pas ? Donc, comme j'ai quelques changements, j'utiliserai une méthode ici, la fonction flèche ici, mal typée, ok. Et ici, je vais retourner mes changements, mais j'utiliserai aussi la carte sur ceux-ci. J' ai besoin de cartographier ces changements pour voir les données de ceux-ci. Donc, comme je mappe à ceux-là, j'aurai un document lui-même. Donc document je pourrais utiliser un x ici. Ce n'est pas un problème. Alors maintenant que j'ai ce document sur son propre, Laissez-moi utiliser le signe fermé ici. Maintenant que j'ai ce document seul, je pourrais parcourir ce document et le mettre à la hauteur des données dont j'ai besoin. Donc, je vais créer cette const de données ici. Et définissez-le égal à ce document. et ce document aura la charge utile sur lui-même. Donc charge utile. Encore une fois, et le document maintenant sur son propre et. données. Donc, cela signifie fondamentalement que je vais retourner ces données d'un document comme une donnée à faire pour être le modèle de choses à faire. Donc fondamentalement maintenant, ces données seront égales à ce côté droit dans mon cloud firestore. Donc, je récupère les données correctes, mais quand même, je n'ai pas l'ID pour obtenir l'ID. Maintenant que j'ai ces données, nous allons utiliser les données. ID ici pour être égal à la x. encore une fois à ma charge utile de document. doc comme ceci. Et maintenant. ici, je veux juste avoir les données, mais je vais aussi avoir l'ID, que vous pouvez voir ici. Alors. Identifiant comme ça. Et maintenant que j'ai toutes ces données, je vais juste retourner les données. Et avec cela, mes tâches auront des données correctes qui contiendront le titre de l'ID et les valeurs terminées. Et comme j'ai besoin d'y arriver dans mon composant, je vais créer la méthode maintenant après mon constructeur ici, je vais mettre le commentaire d'arriver à dos, et je vais créer une méthode de se rendre à dos. Ici. Je vais juste rendre ça à dos en arrière. Donc, j'utiliserai plus tard cette méthode dans mon composant. Alors allons dans notre composant maintenant. Ici, dans les tâches, j'irai dans le composant lui-même. Et tout d'abord, comme je vais travailler avec le service dans mon composant, je devrais importer ce service. Donc, dans mon constructeur, je vais utiliser le service privé à dos pour être un type de service à dos comme celui-ci. Je vais l'importer automatiquement en haut car mon service est une fonctionnalité injectable, je peux l'importer dans, injecter essentiellement dans des composants. Donc ici maintenant, je vais avoir ma méthode get to dos. Je vais aller à dos. Ce sera la méthode qui utilisera un peu mon service de tâches avec ceci. pour le service de dos comme celui-ci et sur le service de dos, j'ai ma méthode appelée get to dos comme ceci. Et comme mes données sont des données observables, je pourrais m'y abonner, donc abonnez-vous comme ceci. Et je vais récupérer une réponse de mon pour mes données. Et c'est la réponse sera le type de choses à faire, mais faire tableau. Donc, je vais maintenant utiliser la méthode flèche ici, et vous pouvez voir la ligne rouge ici. Je n'ai pas importé mon modèle de tâches ici, donc je vais juste l'importer en haut. C' est boisé. Et ici, maintenant que je suis abonné à mon get to do, je pourrais consoler. Connectez-vous à dos, réponse comme ceci. Voyons ce qu'on récupère. Je vais copier ceci, arriver à la méthode dos complètement et juste la coller ici avec ceci. obtenir des tâches. Donc, une fois que ce composant est chargé, une fois que nous sommes sur la page de tâches, ce NGONInit fonctionnera, et il exécutera ce get to do. Ce get to dos va exécuter la méthode get to dos dans mon service todos. Et cela arriva à faire me renvoyer ces données, que j'ai précédemment obtenues de ma collection to-dos de mon firestore Angular. Vous pouvez voir comment tout est connecté ici. Donc maintenant que j'ai tout ici, je pourrais utiliser clair ici et exécuter ng servir de mon côté et exécuter mon application localement pour tout vérifier. Maintenant que mon serveur est opérationnel, je peux copier cet hôte local 4200 et revenir dans mon navigateur, coller cet hôte local ici. Par ailleurs, si vous êtes un fan de Naruto, C'est la douleur essentiellement, et je suis de retour dans mon application. Donc, je vais inspecter mon application ici. J' irai à la console ici, et j'irai dans la page todos, une fois que je serai là. Vous pouvez voir ce journal à partir des tâches. Et il y a nos données. On a trois à faire. Chacune des données a l'id, le titre et les valeurs terminées. Maintenant que nous avons réussi à extraire les données de notre magasin de pompiers, magasin de pompiers cloud, nous pouvons lier les données de données ici dans nos listes, dans notre page de tâches. 14. Montrer des todos sur l'application Web: Alors maintenant, il est temps de rendre nos données à partir de notre composant to-dos. Donc nous obtenons les données ici. Je vais créer ici une variable de tâches, qui sera le type de tableau à faire comme celui-ci. Et maintenant, ici en arriver à dos, je vais utiliser ceci. pour faire et le lier à la réponse que nous obtenons. Je vais aussi avoir un fini à dos. Donc, terminez à dos qui sera à nouveau, le type de tableau à faire. Et ce sera la même chose. ceci. fini à dos égal à la réponse. Oui, mais tu te rappelles comment nos tâches auront deux listes différentes. L' un est pour fini à dos et le second est juste pour les todos qui ne sont pas encore terminés. Alors filtrons nos données immédiatement ici. Donc, ma réponse pour mes tâches, j'ai utilisé un filtre sur ceux-ci et je reviendrai à faire de chaque à dos que je filtrais. Donc, je vais revenir ici juste le à faire. terminé, mais qui n'est pas terminé, qui doit faire terminé, complété comme un faux. Donc, fondamentalement, chacun pour faire cela n'est pas terminé sera dans le tableau dos. Je vais copier ce filtre maintenant complètement et chaque tâche qui est terminée sera dans le tableau de tâches fini. Donc maintenant, dans mon HTML hors de mes tâches, je peux travailler avec cela. Je vais ici dans ma liste de choses à faire, je vais supprimer ces deux éléments de la liste. Et ici, à l'élément de liste, j'utiliserai la directive ngfor, qui est fondamentalement pour la boucle pour mes tâches. Donc, je vais faire une boucle à travers les to-dos et j'utiliserai un let todo de todos. Donc, pendant que je suis en boucle à travers les choses à faire, ça me donne chaque chose à faire en arrière. Donc ici, je peux utiliser au lieu d'aller marcher, je pourrais utiliser ici todo. titre. Oui. Donc, il va fondamentalement parcourir les tâches et il rendra autant d'éléments de liste que j'en ai besoin autant que todos, autant de choses à faire que j'ai. Donc, je vais utiliser copier ceci comme ceci. Ne faisons pas ça car j'ai quelques autres icônes ici. Donc, je vais utiliser ici à nouveau la boucle ngfor. Et je vais lier ceci pour laisser todo de finishedTodos maintenant. Et ça a fini de le faire. Nous ferons fondamentalement la même chose que je vais rendre à faire. titre ici. Et avec cela, nous sommes entièrement finis. Si je reviens à ma demande, vous pouvez voir que maintenant j'ai deux à faire qui ne sont pas terminés en haut et un pour le faire est terminé en bas. Ainsi, les données sont là et elles sont rendues avec succès à l'écran. Je ne peux toujours pas mettre à jour les données ou les supprimer. Je ne peux même pas ajouter de données à, ajouter de nouvelles choses à faire dans ma liste de tâches. Donc, nous allons d'abord travailler avec l'ajout des données. 15. Fonctionnalité pour l'ajout de Todos: Donc, pour ajouter notre à dos, nous allons utiliser la section en haut de notre page de tâches. Donc un peu entendre à l'en-tête, nous allons ajouter le titre à faire ici dans un champ de saisie et sur un clic de bouton ajouter à faire, nous allons ajouter à faire dans notre tableau ci-dessous cette liste. Et aussi il sera sauvegardé dans notre base de données. Donc, pour travailler avec l'ajout de tâches, j'irai dans le composant to-dos ici. Et au-dessous de mon get to-do, je vais créer une méthode add à faire, donc ajouter à faire sera une méthode fondamentalement. Et il devrait obtenir un titre à partir de ce champ d'entrée. Donc, le titre sera de type chaîne. Alors maintenant, allons dans notre HTML et passons ce titre. Donc, ici à l'en-tête, nous avons ce champ d'entrée et un bouton. Donc, je pourrais utiliser ici l'événement click. Et en un clic, je souhaite ajouter une méthode à faire à cette tâche. Je devrais passer un titre. Donc, je devrais obtenir le titre de mon champ de saisie ici. Pour obtenir ce titre, j'utiliserai une référence locale du titre à faire. Pour mettre une référence locale, nous utilisons juste un hachage. Et puis pour faire le titre avec cette référence locale, nous avons une référence à l'entrée entière. Donc ici maintenant, je peux passer un titre à faire comme celui-ci, . et la valeur dessus. Aussi à la fin ici, je vais utiliser un ; et mettre ce titre à faire . valeur pour être égale à une chaîne vide. Ce qui veut dire, laissez-moi aussi le refactoriser un peu. Pour que tu puisses tout voir. qui signifie fondamentalement, une fois que je clique sur ce bouton, il ajoutera un titre, ajoutera à faire fondamentalement, mais aussi après que cette méthode est terminée. Ce champ de saisie de titre à faire, retournera sa valeur à la chaîne vide. Il sera à nouveau vide, donc nous pourrions en ajouter un autre. Alors maintenant dans mes tâches ici. Dans ajouter à faire, je devrais d'abord vérifier si ce titre est vide. Si ce titre est vide, je devrais juste arrêter mon code de fonctionner. Alors je vais courir. Si le titre est égal à une chaîne vide, je reviendrai ici. Donc tout le reste que si le titre est correct, ce code sera bas ci-dessous. Maintenant, pour ajouter ma tâche, je devrais aussi créer ce à faire avec ce titre. Donc, je vais créer un const de choses à faire pour être égal , des objets comme celui-ci. Il aura un titre et ce const à faire devrait être de type à faire comme ceci. Et il aura un titre qui est le titre d'un haut. Et aussi il aura terminé, ce qui est faux. Une fois que nous ajoutons cela à faire, il sera toujours faux car il n'est toujours pas terminé. Et enfin, une fois que j'ai créé ça, je pourrais frapper mon service maintenant. Donc, ce service de tâches. et je n'ai pas encore cette méthode ajouter à faire ici, mais je vais l'utiliser, ajouter à faire comme ça. Et en elle je vais passer à faire d'ici que j'ai créé. Alors maintenant, allons dans notre service et créer cette méthode addToDo. Donc, dans les services ici pour faire le service, juste en dessous de mon accès à dos, je vais créer ajouter des tâches et ajouter des choses à faire, singulier. Et je vais créer une méthode add todo, qui va se faire lui-même, ce qui est le type de choses à faire. Et ce sera une méthode. Alors, comment puis-je ajouter ce todo dans ma Firebase, dans ma collection ? Donc, je vais juste utiliser ceci. collection to-dos ici et je vais utiliser. Il y a la méthode add dessus. Je pourrais utiliser la méthode add et je pourrais juste passer todo ici. Alors maintenant, je vais ouvrir mon magasin de pompiers de nuages ici, et vous verrez mes tâches que j'ai pour le moment. Je vais revenir à mon application et je vais rafraîchir un peu. Ajoutons une nouvelle tâche à faire. Donc, à faire sera aller à une classe, appuyez sur Entrée. Il est là. C'est en bas. Si je vérifie mon cloud firestore, je pourrais voir un aller à une classe comme un nouveau à faire. Alors. Maintenant, si je rafraîchis la page, il me rendra toujours cela à faire comme il est enregistré avec succès dans notre base de données. Voyons maintenant comment pouvons-nous supprimer nos tâches finies sur un clic d'une icône de corbeille ici, à droite. 16. Supprimer les todos: Donc, idéalement, la suppression de nos tâches devrait fonctionner comme ça. Une fois que je clique sur cette icône de corbeille, je devrais passer les données de cette tâche à faire. Et sur la base de ces données plus tard, je les supprimerai, je les supprimerai de ma base de données. Ces données devraient être de faire l'ID, car c'est toujours un peu unique. Donc maintenant dans mon todos HTML, je pourrais aller finir à dos. Et sur un clic de cette icône de corbeille, je pourrais exécuter clic, clic événement, non ? Et je vais exécuter une méthode appelée delete todo. À cela, je devrais passer mon travail lui-même. Je n'ai toujours pas créé cette suppression à faire. Donc, je vais aller à mon composant to-dos, et ici, je vais exécuter delete pour le faire ici. Et je vais faire ça pour le faire, ce qui est un genre de choses à faire. Et maintenant, je pourrais supprimer mes données. Ici, dans mon composant, ce n'est pas un type de tâches, mais à faire maintenant dans mon composant ici, je vais à nouveau contacter le service. Donc, ce. service à dos, . supprimer à faire. Donc je n'ai toujours pas ça à faire. Donc, je vais juste passer à faire à ma suppression à faire, comme je ne l'ai toujours pas. Allons donc en service et créons un. Donc, après mon ajout à faire dans mon service, je vais créer une suppression à faire ici, et j'utiliserai cette suppression pour le faire que j'ai copié. Et je vais ici arriver à faire, ce qui est un genre de choses à faire. Et ici maintenant, je pourrais exécuter la logique pour supprimer ma tâche. Comme j'ai besoin de supprimer ma tâche par un ID, je vais contacter, je vais maintenant l'utiliser pour faire un document. Donc ici, je vais utiliser ceci. pour faire document qui sera égal à cela, . magasin de feu., sur le magasin de feu. J' ai une méthode de document. Donc, cette méthode de document va contacter la collection que je souhaite en fonction d' un ID du document et il me rendra ce document entièrement. Donc ici, je vais utiliser un dos ticks et le nom de la collection est todos/. Et j'utiliserai un espace réservé ici de JavaScript, et j'utiliserai pour le faire j' ai passé ici .id comme ceci. Alors maintenant mon document de travail est reconnu, non ? Donc maintenant, je pourrais juste utiliser this.todo document Dot, et sur cela j'ai une méthode delete et ça devrait être tout. Donc, je suis dans ma page de tâches, j'ai un acheter un T-Shirt fini à faire. Donc, si je trouve ici acheter un t-shirt, et si je voulais aller à ma page et je clique sur mon icône, vous pouvez voir que, ce genre de déjà disparu. Donc, si je rafraîchis la page, elle n'est pas là. Aussi dans ma base de données, il n'est pas là. C' est un lavage d'une voiture. Celui-ci est aller au magasin et ça va à un cours. Et avec cela, nous avons juste une fonctionnalité de plus à faire ici, et ce serait nos mises à jour. Donc, une fois que je clique sur cette boîte vide, il va terminer mes tâches et les déplacer dans le tableau todos fini. 17. Mise à jour des todos: Donc, je vais revenir dans mon todos HTML ici. Et une fois que je clique ici sur mon icône de carré, je lancerai un écouteur d'événement de clic. Cet écouteur d'événement, exécutera une méthode d'édition à faire, et il passera à le faire. Je devrais créer une cette méthode maintenant dans mon composant. Donc ici, éditer à faire, il arrive à faire à partir de mon HTML qui est le type de choses à faire. Encore une fois, j'écris à dos, à faire comme ça. Et maintenant je pourrais inverser sa valeur terminée. Donc, pour ce faire, point terminé sera égal à inversé à faire, point, terminé comme ceci. Au fait, je reviendrai dans mon HTML. Je devrais être en mesure aussi de cliquer sur Terminer à doshere. 00:00:49 .940 —> 00:00:54 .185 Et déplacez-les à dos inachevé. J' ai donc ma logique pour inverser ça. Maintenant, il est temps de contacter à nouveau mon service. Donc, ce point à dos point de service éditer à faire, que je n'ai toujours pas créé. Et je vais passer ceci pour faire à cette méthode. Donc, créons cette méthode. Ici, je vais utiliser Edit todo commentaire. La méthode est appelée edit pour le faire est de faire à partir de mon composant. Et ceux-ci à faire seront du type de choses à faire. Et à l'intérieur, j'utiliserai la même chose que dans ma suppression. Donc, je pourrais copier ceci d'en haut, ici. Donc je devrais obtenir mon document de travail de ma collection de tâches de la boutique de pompiers. Et je reçois ça en fonction de l'identification du todo. Mais maintenant, au lieu de supprimer à faire, je devrais passer ici pour faire la mise à jour des points de document, et je devrais passer mon nouveau à faire ici. Donc, comme je suis dans mon composant en changeant les données pour inverser les données. Dans mon service, j'envoie ça à voir avec les données inversées. Donc, il va enregistrer manière incorrecte dans ma base de données. Donc maintenant, si j'actualise un écran et j'ai essayé de le tester, allez sur un clic de magasin. C' est dans mon fini de faire. Si je rafraîchis la page, il est toujours dans mon fini à ceux. Si je trouve mon aller à un magasin, et le voici, aller à un magasin a maintenant terminé un ensemble à vrai. Donc, cela fonctionne fondamentalement. Donc, si je rafraîchis à nouveau la page, il va toujours tirer que aller stocker comme une vraie valeur comme valeur finie. Pour que je puisse encore mettre, laver une voiture comme un fini, retourner, trouver que laver votre voiture. Vous pouvez voir que c'est vrai. Je pourrais revenir en arrière et mettre ces objectifs pour les stocker à la liste des choses à faire. Donc c'est là maintenant, non ? Donc, retour, aller au magasin a terminé de faux. Donc tout fonctionne bien. 18. Ce que nous avons appris et test: Donc, nous avons entièrement créé notre application en ce moment. Nous avons nos composants ici. Nous avons un routage entièrement intégré. Nous avons une donnée de notre Firebase qui fonctionne. Nous pourrions ajouter de nouvelles données, de nouvelles données, ajouter, il est ajouté, nous pourrions compléter notre tâche. Nous pourrions supprimer notre tâche. Nous pourrions retourner à la maison, aller à des tâches, notre routage fonctionne pleinement, et notre application todo. Si je vais à la vue d'ensemble du projet, il est entièrement configuré sur une Firebase et il est entièrement connecté à notre application de faire de notre côté Angular. Maintenant, il n'y a qu'une chose à finir. Nous pouvons maintenant travailler sur Firebase Hosting et pousser notre, notre application entière à l'hébergement sur Firebase et la voir en direct. 19. Comment déployer l'application sur l'hébergement Firebase ?: Donc, pour commencer avec notre hébergement dès maintenant, je vais cliquer ici pour commencer. Je suis en passant, dans la section d'hébergement de ma Firebase. Alors commencez. Donc, c'est là. Nous devons d'abord installer des outils Firebase globalement. Donc je peux juste copier ça, belle animation ici. Et je pourrais aller dans ma console. Donc, dans ma console, laissez-moi l'éclaircir un peu, ici. Je pourrais installer globalement des outils Firebase. En passant, j'ai déjà installé cela, mais je vais l'installer avec vous afin que vous puissiez voir toute la procédure de déploiement sur une Firebase. Une fois cela installé, je peux revenir à mon hébergement Firebase ici, et je pourrais passer à l'étape suivante. Donc, tout d'abord, nous devrions nous connecter avec notre compte firebase. Copions donc cette connexion Firebase ici et collez-la comme ceci. Je devrais déjà être connecté, donc je suis déjà connecté, mais je suis connecté avec un compte différent. Donc, je me déconnecterai comme cette connexion Firebase, et je me connecterai, je me connecterai, je me connecterai à nouveau. Donc, il me demandera quelques choses. Je vais juste permettre ça. Il me déplacera immédiatement dans la connexion d'un compte Google. Donc, je vais me connecter, avec mon email, ici. Il me demandera quelques accès. Je vais donner cela et Firebase CLI connexion avec succès comme vous pouvez le voir. Ensuite, je pourrais utiliser Firebase dedans. J' ai donc besoin d'initialiser mon application en tant qu'application sur ma Firebase. Donc, ici, permettez-moi aussi d'éclaircir cela un peu. Donc Firebase initialise et il va juste initialiser l'application entière. Donc, tout d'abord, il me demandera si je suis prêt à aller de l'avant. Oui, je le suis. Ici, je vais choisir l'avenir que je souhaite utiliser de Firebase et qui est l'hébergement. Donc, je suis venu pour héberger l'espace et entrer. Donc, il me demandera de créer un nouveau projet ou d'utiliser celui existant. Donc, je vais utiliser le projet existant, Il me ramènera mon projet. Donc, je vais utiliser mon projet d'application de tâches ici, comme ceci. Nous devons donc passer, que voulons-nous utiliser comme répertoire public ? Donc, ici, nous allons utiliser le dossier dist comme ceci. Et comme nous allons construire notre application dans le dossier dist, alors appuyez sur Entrée. Il nous demandera si nous voulons configurer cette application comme une application d'une seule page, Angular crée les applications d'une seule page, donc oui, pour cela aussi, et vous pouvez voir que Firebase est terminée comme elle est terminée. Alors maintenant, on pourrait tout mettre en place. Donc, avec cela, nous pouvons exécuter Firebase déploiement, mais avant cela, nous devons construire notre projet. Donc, pour un bâtiment, je vais d'abord aller à Angular JSON ici, vous pouvez voir que le chemin de sortie d'un bâtiment d'un constructeur sera l'application dist/to-do. Et vous vous souvenez que nous avons passé ça, dist comme le dossier de dist. Donc 1 seconde pour vérifier, si j'ai tout configuré correctement, oui. Et maintenant, nous pourrions construire notre application. Donc maintenant, ici, je pourrais l'effacer un peu et utiliser ng build —prod. Vous n'avez pas besoin d'utiliser —prod, mais je vais construire mon application pour l'environnement de production car c'est le même environnement que mon environnement de transit, mon environnement de test et de codage. Donc, cette construction prendra quelques minutes, mais, Maintenant que fait ? C'est compiler tout ce que nous avons. Angular lui-même, il compile tout ce que nous avons et il va construire l'application entière pour nous, à utiliser comme une application JavaScript. Fondamentalement, comme vous le savez qu'Angular est un framework JavaScript. Donc, une fois ce sera fini, je reviendrai. Donc tout est fini. Nous avons nos fichiers JavaScript, qui sont des paquets de notre application angulaire. Et maintenant, nous pourrions exécuter Firebase, déployer comme ça. Cela prendra un certain temps, mais il va saisir notre application et entièrement déployée sur notre hébergement que nous avons déjà mis en place. C'est fini. Maintenant, nous pouvons aller à notre URL d'hébergement. Donc, je vais appuyer sur Contrôle et cliquer ici, et cela devrait me conduire à l'URL d'hébergement. Donc ici, vous pouvez déjà voir que je suis actuellement sur mon URL d'hébergement. Je ne suis pas sur mon hôte local, n'est-ce pas ? que je puisse y aller, c'est ce que nous avons à propos. C' est à dos. Et vous pouvez voir que notre hébergement est entièrement connecté. Donc, nous avons un peu déployé notre application à l'hébergement de Firebase et il fonctionne entièrement avec la base de données cloud Firebase. Donc ici maintenant, comme nous avons fini avec l'hébergement, nous pourrions simplement continuer sur une console et maintenant sur un hébergement, nous n'aurons pas cette partie de configuration, mais nous aurons notre hébergement lui-même. Donc, vous pouvez voir comment suis-je connecté, current_user. Il y a aussi une application qui devrait être visitée, c'est fondamentalement que nous avons déjà. Et ce serait tout. Ici, vous pouvez ajouter votre domaine personnalisé si vous en avez un et travailler avec cela. un peu aussi. 20. Merci et Goodbye: Donc, nous y voilà. Félicitations à vous. Vous allez créer avec succès votre application de tâches avec Firebase et Angular. Vous alors comment pourriez-vous utiliser Angular, ses composants, services et routage. Vous configurez également votre Firebase, Cloud Fire Store pour votre base de données sur Firebase. Vous y avez créé votre collection Todos. Vous avez rendu ces todos dans votre application. Et aussi vous avez pu ajouter, supprimer et modifier les données de ces todos. Et enfin, vous avez pu déployer l'ensemble de votre application sur Firebase Hosting. Remarque importante, à l'avenir, vous pouvez vous attendre à plus, nous allons coder des cours dans cette série de ma part. Alors soyez prêt, dès que vous en aurez un autre en direct. Pour celui-ci, tu pourrais me dire ce que tu aimais et ce que tu n'aimais pas au cours de ce cours. Vous pourriez même laisser votre commentaire honnête pour ce cours. Et de cette façon, aidez-moi à créer le prochain, nous allons coder les cours dans ma série. Encore une fois, merci et adieu.