Dans l'exercice précédent,
nous avions déjà configuré notre backend Firebase en
tant que service avec le nouveau projet et avons également mis en place beaucoup
de données dans notre base de données, puis configuré notre stockage et
configuré notre serveur Firebase pour agir comme le backend de notre application Angular.
Dans cet exercice, nous allons examiner une version modifiée de
notre application Angular qui utilise le backend Firebase
en tant que service afin d'obtenir les données et
également stocker des informations pour les utilisateurs sur les serveurs.
En outre, nous tirons parti de
la prise en charge de l'authentification fournie par Firebase pour authentifier les utilisateurs à la
fois en utilisant une approche par e-mail et mot de passe et en utilisant également un compte Google.
Pour commencer cet exercice,
allez à un emplacement pratique sur votre ordinateur,
puis clonez le dépôt Git donné où je
vous ai fourni la version Angular Firebase de notre application Angular.
Donc tapez, git clone
https://github.com/jmuppala/confusion-Angular6-Firebase.git,
puis clonez
le dépôt Git et une fois que le dépôt Git est cloné sur votre ordinateur,
puis déplacez dans le
dossier Angular Firebase de confusion qui sera créé à ce stade et
vous remarquez qu'un tas de fichiers y sont déjà installés.
Allons de l'avant et faisons une installation npm pour installer
tous les modules de noeud dont dépend cette application angulaire.
Cette version installera également
deux modules de noeud supplémentaires appelés Firebase, puis Angular fire two.
Je vais en expliquer un peu plus sur ces deux modules de noeud plus tard dans cet exercice.
Une fois l'installation du projet terminée,
ouvrez le projet dans un éditeur, puis dans le projet,
allez dans le dossier environnements source,
puis ouvrez le fichier environment.ts et dans le fichier environment.ts,
vous verrez un ensemble de configuration Firebase que vous
devez configurer avec votre propre configuration du serveur Firebase.
Comme nous l'avons vu dans l'exercice précédent,
nous pouvons obtenir toutes ces informations lorsque nous cliquons sur
ce bouton ici appelé « Ajouter Firebase à votre application web », puis
copier ces informations, puis coller
ces informations dans votre fichier environment.ts pour les remplacer par votre Configuration
des serveurs Firebase pour toutes ces informations et une fois que cela est terminé,
vous pouvez démarrer votre application Angular en tapant « ng serve » à l'invite.
Une fois que votre application Angular est compilée avec « ng serve »,
puis allez dans un navigateur, puis tapez localhost:4200 pour charger dans
votre application Angular et vous remarquerez que votre application Angular est compilée
puis chargée dans votre navigateur comme avant.
Donc, une fois que votre application Angular est
en cours d'exécution, vous remarquerez que cette version de l'application Angular va utiliser
le serveur Firebase que vous avez configuré dans
l'exercice précédent et donc ici vous verrez la page « Accueil »,
la page « À propos » comme nous le voyons ici et la
« Menu » et la page « Contact » et évidemment, puisque nous ne sommes pas actuellement connectés,
la page « Mes favoris » affichera une erreur indiquant qu'aucun utilisateur n'est connecté.
Alors, nous allons nous connecter.
Laissez-moi revenir à la « Page d'accueil » et ensuite nous nous connecterons.
Ainsi, lorsque vous cliquez sur le bouton de connexion,
vous verrez le formulaire typique ici avec l'e-mail et les informations de mot de passe.
Vous verrez également un bouton supplémentaire appelé « Connectez-vous avec Google ».
Laissez-moi donc me connecter avec mon compte Google.
Ainsi, lorsque vous cliquez sur le « Connexion avec Google »,
alors il ouvrira une autre fenêtre de navigateur où vous serez invité à
autoriser l'utilisation de votre compte Google par ce serveur Firebase.
Donc, laissez-moi aller de l'avant
et autoriser cette application, puis une fois l'autorisation terminée,
vous verrez que votre
application Angular basée sur Firebase démarrera et dans le coin droit,
vous verrez immédiatement votre nom
affiché ici et avec le « Login » maintenant transformé en bouton « Déconnexion ».
Donc, à ce stade,
vous devriez être en mesure de voir vos favoris
et dans ce cas puisque nous n'avons pas de favoris,
donc il sera vide à ce stade.
Laissez-moi revenir au « Menu », puis ajouter quelques éléments dans « Mes favoris ».
Donc, je vais ajouter ce plat à mes favoris.
Donc, quand je clique sur ce plat,
vous verrez immédiatement l'icône se transformer en un cœur rempli et laissez-moi également sélectionner
un plat de plus et l'ajouter dans « Mes
favoris », puis maintenant, quand vous allez à la « Mes favoris »,
vous verrez le couple de plats ajoutés dans
vos favoris comme vous le feriez attendre et encore,
vous pouvez supprimer les plats en cliquant sur le bouton « Supprimer » bascule ici, puis cliquez sur
la croix pour supprimer l'élément de votre liste de favoris comme indiqué ici.
Maintenant, nous pouvons également ajouter comme vous l'avez réalisé,
nous pouvons aller à n'importe quel plat, puis ajouter des commentaires sur ce plat.
Donc, permettez-moi d'ajouter un commentaire
ici et au moment où vous soumettez le commentaire,
vous verrez immédiatement que vos commentaires seront affichés ici avec
le nom de l'auteur du commentaire également inclus ici et avec la date comme indiqué ici.
Ainsi, vous pouvez voir que la soumission de
commentaires de l'utilisateur sera prise en charge pour n'importe quel plat spécifique.
Permettez-moi d'ajouter un favori de plus et cet utilisateur aura donc quelques favoris.
Laissez-moi « Déconnecter » cet utilisateur.
Retournez à la « Page d'accueil », puis « Déconnecter » cet utilisateur.
Maintenant, nous allons nous connecter en utilisant l'autre compte.
Donc, je le ferais- J'avais mis en place
ce compte de mot de passe e-mail plus tôt et donc nous allons nous
connecter comme cet autre utilisateur et une fois que l'autre utilisateur est connecté,
laissez-moi aller à nouveau dans le « Menu » et ajouter quelques éléments dans
les favoris pour cet utilisateur particulier
et donc quand vous revenez à « Mes favoris »,
vous verrez ces éléments répertoriés pour le deuxième utilisateur.
Maintenant, de la même manière pour cet utilisateur,
laissez-moi à nouveau soumettre un autre commentaire de cet utilisateur.
So-
et vous
verrez que les commentaires soumis par le deuxième utilisateur est également ajouté dans l'application.
Donc, c'est ainsi que votre application Angular fonctionne
avec Firebase en tant que service principal.
Maintenant, bien sûr, vous devez vous demander,
comment remanions-nous notre application Angular pour utiliser Firebase au lieu
d'utiliser le serveur Standard Express plus MongoDB que nous avons construit plus tôt ?
Afin de configurer votre application Angular pour communiquer avec le serveur Firebase,
il existe deux modules de nœuds que vous devez installer dans
votre application Angular et l'un d'eux est le module Firebase.
Le module Firebase comme vous le voyez ici,
fournit les outils et l'infrastructure qui vous permet de communiquer
avec le serveur Firebase et de l'installer dans votre application
, vous tapez, npm install moins save Firebase.
Maintenant, avec cela,
il y a un autre module appelé Angular Fire 2.
Donc, le feu angulaire 2.
De plus, j'ai fourni les liens vers ces deux modules dans les ressources supplémentaires.
AngularFire 2 est la bibliothèque officielle
pour le support Firebase et Angular et comme vous pouvez le voir,
c'est un support observable pour les fichiers Angular.
Donc, cela fonctionne pour ajouter au module Firebase npm, puis
vous donne une interface observable que nous pouvons utiliser dans votre application Angular.
Donc, nous tirions parti de l'AngularFire 2.
Donc, pour utiliser AngularFire2,
vous devez installer à la fois Firebase et AngularFire 2.
Donc, en un seul coup,
installez ces deux dans votre application Angular.
Maintenant, la version de l'application Angular que je vous ai fournie
installe automatiquement ces deux comme vous le verrez lorsque vous examinerez le fichier package.json.
Maintenant, comment faire usage de ces deux,
je vais illustrer qu'en vous exécutant rapidement à travers
le code modifié pour les services et quelques composants où
nous utilisons Firebase et AngularFire2
pour modifier l'application Angular que nous avons développée
plus tôt pour utiliser le Serveur Firebase en tant que service principal.
Afin de comprendre comment nous utilisons
Firebase et AngularFire 2 dans notre application Angular,
notre premier arrêt est au fichier package.json.
Donc, dans le fichier package.json,
vous remarquerez que j'ai installé AngularFire2 ici et que nous avons également installé
Firebase pour l'utiliser dans cette version de l'application Angular que je vous fournit.
Donc, notez que ces deux seront automatiquement installés lorsque vous tapez « npm
install » après le clonage de ce dépôt git que je vous ai fourni.
Si vous commenciez avec une nouvelle application Angular,
vous devriez installer à la fois AngularFire 2 et Firebase
afin de tirer parti de l'utilisation de Firebase en tant que service principal.
Maintenant, après avoir installé ces deux,
apprenons comment nous les utilisons dans nos services.
Donc, la meilleure façon d'apprendre à utiliser les deux
est de visiter certains des services que nous avons
configurés dans notre application et de comprendre comment nous
tirons parti de l'utilisation d'AngularFire2 et Firebase.
Donc, nous allons commencer avec le fichier dish.service.ts.
Donc, si vous allez dans le fichier dish.service.ts,
vous remarquerez qu'ici,
dans ce service plat,
vous me verrez importer ce AngularFiRestore, AngularFiRestoreDocument
et AngularFireRecollection d'AngularFire à Firestore ici.
Donc, cela apporte tout ce dont j'ai besoin de mon module npm AngularFiRestore,
vous remarquerez aussi que j'importe tout de
Firebase/application comme Firebase dans mon service de plat ici.
Donc, une fois que nous avons importé ces deux-là,
jetons un coup d'œil à la façon dont nous reconfigurons notre service de vaisselle ici.
Donc, si vous allez dans le service plat,
vous remarquerez que je n'utilise plus le client HTTP.
Au lieu de cela, j'injecte AFS qui est l'AngularFiRestore dans le constructeur ici.
AngularFiRestore est celui qui me donne
accès au backend Firebase en tant que service.
Maintenant, rappelez-vous également que nous avons déjà configuré tous les détails de
notre serveur et aussi le projet de banque de fichiers dans le fichier environment.ts plus tôt.
Donc, vous devriez avoir déjà configuré ces informations
sur la façon dont votre application Angular devrait tirer parti de
votre projet basé sur Firestore sur
votre serveur Firestore pour accéder aux données que vous y avez configurées.
Donc, cela me donnera accès à mon cloud
Firestore dans mon projet Firebase que j'ai configuré.
Maintenant, le service AuthService est bien sûr le même Authservice que nous avons utilisé auparavant,
mais il a été modifié pour utiliser le support Angular pour Firebase.
Nous allons visiter le service AuthService pour savoir comment il a été mis à jour.
Maintenant, le AuthService nous donnera accès à
cette méthode appelée GetAuthState qui retournera dans un observable.
Cette observable, lorsque nous y souscrivons,
nous donnera l'information en tant qu'utilisateur qui contient les informations de l'utilisateur.
Donc, je vais l'obtenir et ensuite configurer le CurrentUser dans mon application
comme l'utilisateur renvoyé par cet observable ici.
Donc, lorsque nous visitons AuthService,
nous apprendrons ce que ce GetAuthState retournera pour
nous et donc les informations de CurrentUser peuvent
être obtenues à partir
de n'importe quel autre service parce que nous injectons déjà AuthService ici.
Maintenant, jetons un coup d'oeil à la façon dont la méthode getDisish est implémentée ici.
Maintenant, plus tôt dans la méthode GetDisish,
nous utilisions le client HTTP pour accéder au serveur à l'URL de base+/plats.
Maintenant, dans ce cas,
pour accéder à une collection dans mon serveur Firebase, nous allons dire ceci .afs.
Donc, c'est ce que nous fournit AngularFire2.
AFS comme vous le voyez est l'AngularFiRestore que nous avons injecté ici et donc nous disons
this.afs.collection et ici nous
allons spécifier la collection spécifique à laquelle nous accédons ici.
Rappelons que nous avions mis en place les plats, les promotions
et les collections leaders sur mon serveur Firebase.
Donc, cela me donne directement accès
à ma collection de plats ici et à partir de la collection de plats,
je peux soit faire .valueChanges qui
retournera toutes les informations dans la collection d'affaires pour moi,
soit je peux le faire.snapshotChanges qui
retournera des informations supplémentaires, y compris l'ID des plats.
Donc, si au lieu de faire SnapshotChanges,
si je dis ValueChanges,
il retournera uniquement les informations de plat mais il ne retournera pas
les ID des plats, mais puisque j'aurai besoin des ID de mes plats,
c'est pourquoi j'utilise .SnapshotChanges dans ce cas.
Donc, quand en.snapshotChanges est appelé,
cela retournera comme vous voyez un observable que
je mappe et donc la valeur de retour qui est appelée en tant qu'actions et ces actions
, encore une fois, sera un observable que je mapperai chaque action dans
cette action, puis extraire les données de l'action qui est est retourné ici.
Donc, l'action est une valeur qui est renvoyée pour chacune des actions
et cette action contient une charge utile et contient ici un champ sombre.
Maintenant, c'est quelque chose que j'ai compris en lisant
la documentation pour AngularFire2 et
donc quand nous appelons cette fonction de données sur cette action.payload.doc,
cela me donnera les données.
Les données pour ce plat spécifique qui est
obtenu à partir de ma collection de plats côté serveur.
Donc, chaque document là-bas sera retourné ici et
ensuite j'obtiens l'ID pour cela en disant action.payload.doc.id.
Donc c'est là que l'ID de celui-ci sera
porté et ensuite je vais joindre les deux ensemble et retourner
ceci comme un document plat à mes différents composants à partir de là,
je vais appelle cette méthode GetDisish.
Donc, comme vous vous en souvenez,
à partir du composant de menu,
j'appelle la méthode getDisish afin d'obtenir
les informations sur tous les plats de ma collection.
Collection. Ainsi, chacun de ces plats qui est retourné en tant que doc sera reconstruit dans
un objet JavaScript avec l'ID inséré ici et aussi
les données qui sont extraites de cette action payload.doc.data.
Maintenant, c'est quelque chose que vous apprenez en lisant la documentation d'AngularFire2.
Maintenant, puisque j'ai déjà fait cette partie,
je vous montre le code exact que vous êtes censé
utiliser pour extraire les données et ensuite fournir
ces données à votre composant qui va appeler la méthode getDisish ici.
Donc, en faisant cela pour chacun des documents là-bas,
ce document sera reconstruit à
l'objet plat que nous
utilisons dans notre application Angular et nous sommes donc en mesure d'avoir même accès à l'ID.
Si vous faites simplement des changements de valeur,
il retournera simplement tous les documents eux-mêmes, mais sans les ID des documents.
Donc, ce travail supplémentaire doit être fait au sein de votre service afin de
retourner les informations de la bonne manière afin
que MyComponents puisse utiliser ces informations.
De même, pour une méthode getDish,
alors remarquez comment j'accède aux informations pour un plat spécifique.
Encore une fois, nous allons dire this.afs et puis vous remarquerez que je suis
saying.doc, puis ici pour la méthode the.doc,
je fournit des plats slash, puis l'ID du plat spécifique.
Maintenant, la raison pour laquelle j'avais fourni l'ID,
l'ID ici vient en tant que paramètre de la méthode getDish ici.
Maintenant, pour que cet ID soit fourni,
j'ai besoin de pouvoir fournir cet ID dans
la méthode getDiscounts donc lorsque mon menu est construit,
chaque plat y aura son ID.
Cet ID est passé ici et je vais donc accéder au document à ce stade.
Ainsi, AngularFire2 vous permet d'accéder à
un document spécifique qui se trouve à l'intérieur d'une collection en disant la barre oblique du nom de
la collection, plus l'ID du document ou vous pouvez dire ceci .afs.collection plats comme vous l'avez entendu,
plats de collection et then.doc, puis fournir doc et ID entre parenthèses là.
Donc, c'est une autre façon d'aborder un plat spécifique.
Encore une fois, je m'abonne à SnapshotChanges et cela retournera une action qui est ensuite
mappée dans le même format pour
construire l'objet plat ici avec l'ID ici.
Maintenant, Firebase garde l'ID séparé du document
lui-même et c'est pourquoi je dois explicitement faire
cette reconstruction afin d'obtenir
le document plat d'une manière qui soit utilisable par MyComponents.
Ensuite, j'ai construit mon propre serveur en utilisant Express et MongoDB,
l'ID était automatiquement là dans le document lui-même et il était donc très
facile de récupérer cela et de le remettre au côté client.
Maintenant, pour le getFeaturedDish,
rappelez-vous que pour le getFeaturedDish,
nous recherchons les plats où la fonctionnalité est définie sur true.
Maintenant, c'est là que AngularFire2 nous permet de
construire une requête et de fournir cette requête ici pour cette collection.
Ici, je dis ces plats de collection .afs ici,
donc j'utilise toujours la collection, mais alors regardez
le deuxième paramètre pour cet appel ici.
Cela dit ref où la référence fait référence à chaque document qui se trouve dans cette collection.
Cette référence dit la référence et c'est là que je peux
utiliser cette requête mise en place entend donc ce qui dit .where.
Donc, ce qui signifie que chacun des documents où le présenté,
comme vous pouvez le voir, la syntaxe est assez facile à suivre ici qui indique où en vedette.
Maintenant, notez que la fonctionnalité est fournie sous forme de chaîne ici,
et puis
la suivante, l'opérateur est égal à donc vous pouvez même dire supérieur, inférieur,
supérieur ou égal à inférieur ou égal à l'une de ces choses,
mais notez que cela devrait être à l'intérieur des citations ici et puis vous dira vrai.
Ainsi, partout où la propriété vedette du document est définie sur true,
extrayez tous ces éléments.
Donc, cette requête va extraire seulement les documents
de la collection de plats où la fonctionnalité est définie sur true,
puis retourner uniquement les documents de cette collection ici,
et à partir de là je vais changer d'instantané et cela
retournera un tableau de documents et à partir de là je vais les mapper
dans des documents plats individuels, puis depuis que je me suis
assuré que seul un de ces documents aura la fonctionnalité définie sur true.
Donc, il ne retournera qu'un d'entre eux mais il le retournera sous forme de tableau.
Donc, c'est pourquoi je construis ceci
avec le crochet carré zéro le premier élément du tableau,
et en effet il ne contiendra qu'un seul élément parce qu'un seul élément de ma collection
correspondra à cette requête particulière que j'ai configurée ici avec la vague ici.
Il y a d'autres configurations de requête ici, vous pouvez également utiliser quelque chose appelé ordre par.
Ainsi, vous pouvez commander la collection par une certaine propriété,
et un autre ensemble d'options d'interrogation qui sont disponibles.
Maintenant, cela est pris en charge par Firebase sur son cloud Firestore,
et c'est ce que nous pouvons tirer parti en utilisant AngularFire2 pour concevoir
le code dans votre application Angular pour faire la requête du côté client lui-même.
Donc, cela va retourner le plat de fonctionnalité spécifique.
Maintenant, encore une fois GetDishid va être similaire à ce que nous avons fait plus tôt.
Donc, aucune modification là-bas.
Maintenant, pour le PostComment à nouveau
parce que Firebase avec le cloud Firestore beta,
n'a pas le concept de population,
et ainsi de suite que nous avons vu plus tôt.
Donc, ce que je vais faire pour les commentaires est que je vais poster ces commentaires comme
une collection pour laquelle est enfermé à l'intérieur de chaque plat lui-même.
Ainsi, chaque plat aura sa propre collection de commentaires sur ce plat spécifique.
Lorsque je poste le commentaire, je vais utiliser le disHID,
puis les informations de commentaire.
Donc, ce que je fais ici, c'est que je vais d'abord
interroger les plats et ensuite obtenir ce plat particulier.
Donc, vous pouvez voir que j'utilise l'autre façon de demander un document spécifique.
Donc, ici, je dis ce afs.collection ('plats') .doc DishiD.
Donc, je peux utiliser cette façon d'accéder à un document spécifique si je le veux.
L' autre façon bien sûr, vous avez déjà vu avec
la méthode getDish où je dis plats doc slash plus ID.
Donc, deux façons différentes d'aborder un document spécifique à l'intérieur
d'une collection ici, puis DisHID, puis collection et commentaires.
Donc, de cette façon, il est dit dans
cette collection pour ce document spécifique avec ce disHID,
il y a une collection qui est incluse dans
ce document et cette collection a les commentaires de nom.
Donc, il s'agit d'une imbrication d'une collection
à l'intérieur d'un document qui se trouve dans une autre connexion de niveau supérieur.
Ainsi, ce type d'imbrication de collections est autorisé par
Firebase Cloud Store Beta jusqu'à 100 niveaux de profondeur si vous le souhaitez.
Donc, à l'intérieur de cette collection,
je vais ajouter.
Alors, comment ajouter un document à une collection ?
Pour ajouter un document à votre collection,
utilisez la méthode add sur une collection ici.
Donc, vous pouvez voir que sur les commentaires de collection,
je fais un ajout ici et puis
c'est le document réel qui va être ajouté ici.
Donc, dans le document lui-même,
vous verrez que j'ai la propriété auteur ici où j'ai configuré l'ID actuel,
et aussi j'ai mis en place le prénom de l'auteur ici,
je ne sers que la première fois ici donc ici je dis ce nom d'affichage actuel de l'utilisateur.
Si le nom d'affichage est vrai, je vais le définir sur ce nom d'affichage de l'utilisateur actuel.
Si le compte de l'utilisateur n'a pas de nom d'affichage tel qu'il est attaché, je vais simplement
utiliser cet e-mail de l'utilisateur actuel comme propriété de prénom ici.
Donc, ce document qui contient le commentaire,
porte automatiquement ce champ de prénom
et c'est ce que je vais utiliser pour rendre
l'information lorsque je rende les commentaires dans mon composant Dish.Detail.
Donc, notez que je suis en train de dupliquer les informations ici dans chacun des commentaires.
Mais c'est bon, puisque ceux-ci sont stockés en tant que
documents Json sur Firebase, il est correct de
dupliquer certaines des informations dans les commentaires ici.
Mais si vous voulez plus de détails sur l'utilisateur actuel,
vous avez déjà une référence à l'identifiant de l'utilisateur ici afin que vous puissiez réellement aller chercher
le document pour l'utilisateur particulier et ensuite
obtenir des informations supplémentaires sur l'utilisateur si vous le souhaitez.
Maintenant, quand j'ai utilisé Mongo DB plus Mongo,
vous avez vu que je vais juste utiliser l'ID de
l'utilisateur actuel pour l'auteur et ensuite j'utiliserai le remplissage pour remplir cette information.
Maintenant, Cloud Firestore bêta pour le moment n'a
aucun concept de ce remplissage aussi loin que je peux le voir dans la documentation,
peut-être qu'une version future pourrait prendre en charge un moyen d'extraire des
informations d'un autre document et de
les remplir automatiquement dans le document actuel.
Lorsque cela se produit, alors ce code devra être modifié pour en profiter.
Mais à l'heure actuelle, comme je le vois,
Firestore bêta n'a pas la capacité de
remplir les informations d'un autre document dans le document actif.
Donc, c'est pourquoi je réplique juste ce morceau d'
information dont j'ai vraiment besoin quand je rende le commentaire dans
mon composant dishdetail ici et ensuite ci-dessous
vous pouvez voir que j'ai la note et le commentaire ici et puis aussi,
remarquez que je crée
ces deux champs supplémentaires dans mon commentaire ici appelés « CreateDAT » et « UpdateDAT ».
Remarquez comment je mets l'horodatage pour le « CreateDAT ».
La Firebase, maintenant quelle est cette Firebase que j'utilise ici,
cette Firebase est exactement ce que j'ai importé ici à partir de l'application Firebase.
Donc, cela me fournit comme vous le voyez ici ci-dessous,
qui me fournit cette même valeur de champ Firestore.
Donc, cet appel à l'horodatage du serveur des valeurs de champ firestorm,
retournera l'horodatage actuel pour
moi et c'est l'information que je vais stocker dans le « CreateDAT ».
Maintenant, quand j'ai inséré tous les documents ici,
vous avez vu que j'ai créé manuellement ce champ « CreateDat » pour chacun des documents.
Maintenant, c'est une façon de faire la même chose à partir de
notre code Angular dans
notre côté client et la même chose pour le champ « UpdateDAT » que vous verrez ici.
Donc, lorsque vous publiez un nouveau commentaire,
vous voyez que c'est ainsi que vous allez ajouter un nouveau commentaire dans ce serveur.
Maintenant, cela renvoie une promesse et c'est donc l'information
que j'utilise ici pour construire cette promesse ici.
Ensuite, cette autre méthode ici disant « getComments »,
ce « getComments comme vous pouvez le voir accède aux plats de collection AFS,
doc DisHID et puis aux commentaires de collection et l'avis qu'ici,
je ne vais pas exiger chaque ID de commentaires
lui-même que je n'utiliserai pas dans mon Angular pétition de toute façon,
donc au lieu d'utiliser des changements d'instantané,
j'utilise juste des changements de valeur et cela retournera
tous les documents dans cette collection de commentaires pour ce document particulier,
le DisHID de la collection de plats ici et qui seront retournés
et ces commentaires que je rendrai dans mon composant dishdetail.
Maintenant, dans Mongos, vous avez vu que le fait que j'ai inclus l'UserId signifie
que je pourrais faire copuler cette information maintenant avec Firebase,
il n'y a aucun moyen de remplir les informations communes ici,
donc c'est pourquoi je vais explicitement et ensuite remplir les commentaires dans
mon dishdetail pour récupérer tous les commentaires sur
ce plat particulier lorsque je les rend dans le composant dishdetail.
Donc, vous voyez, que j'ai dû ajuster
un peu le code Angular pour faire face au fait que
Firebase ne supporte pas certaines choses que mongos supporte
au moins au moment où Cloud Firestore bêta ne supporte pas ces choses,
et donc j'ai dû travailler pour faire face à ce que Firebase me permet
de stocker et de récupérer à partir du site du serveur Firebase.
Maintenant, il est également intéressant pour nous de rendre une visite rapide au service Auth ici.
Le service Auth ici encore,
notez que dans le service Auth ici, j'importe ce AngularFireAuth
du sous-module AngularFire vers npm ici.
Donc, ici vous pouvez voir que j'importe AngularFireAuth et cela
me donne accès à l'aspect authentification de Firebase.
Maintenant, voyons comment l'authentification Firebase fonctionne réellement à partir de notre application Angular.
Maintenant, nous allons commencer cela en regardant comment la connexion est implémentée.
Donc, c'est là que j'implémente le login,
où j'utilise l'e-mail et le mot de passe.
Donc, cette partie lorsque j'importe l'AngularFireAuth ici,
remarquez que le constructeur que j'injecte l'AngularFireAuth dans mon constructeur.
Donc, cela injectera le service AngularFireAuth
dans mon constructeur et cela me donne accès à
l'authentification Firebase sur le site du serveur afin que je puisse authentifier les utilisateurs.
Donc, si je veux authentifier un utilisateur qui se connecte avec l'e-mail et le mot de passe.
Cette fonction de connexion est celle qui va être appelée
lorsque je tape mon email et mon mot de passe dans
la boîte de dialogue de connexion que je pop-up et puis
cliquez sur le bouton de soumission ou le bouton de connexion ici,
cette fonction de connexion va être appelée et les
informations de l'utilisateur mais je récupère de la composant de connexion est passé ici.
Donc, quand il viendra ici,
je vais utiliser cette AfAuth comme vous voyez que je viens de l'injecter dans le constructeur,
et cela fournit cet objet Auth ici,
qui fournit cette méthode appelée « connexion avec e-mail et mot de passe ».
Donc, cette connexion avec e-mail et mot de passe prend deux paramètres ici comme vous vous
attendez le nom d'utilisateur de l'utilisateur ou l'e-mail et le mot de passe ici.
Donc ces deux éléments d'information
que je fournit comme les deux paramètres de cette connexion avec e-mail et mot de passe.
Donc, quand vous cliquez sur cela, vous verrez qu'il
dit que le premier devrait être e-mail et le second devrait être mot de passe.
Maintenant, de la façon dont je l'ai configuré,
cet objet utilisateur qui arrive contient l'e-mail dans l'
user.username ici et le mot de passe dans la propriété password de l'objet utilisateur.
Donc, quand cela est obtenu,
alors je vais poster cette information et ensuite quand cela est terminé avec succès, cela
signifie que l'utilisateur est correctement connecté,
s'il y a une erreur,
alors vous attrapez l'erreur ici en ce moment je
ne fais rien spécifiquement avec l'erreur que vous pouvez
souhaite imprimer ce message d'erreur pour indiquer que l'utilisateur ne peut pas se connecter et ainsi de suite.
Donc, je n'ai pas implémenté cette partie de l'accord ici,
je le laisse juste là si vous voulez consigner
cette information, vous pouvez le faire lorsque des erreurs se produisent.
Maintenant pour déconnecter, dans Firebase.
Encore une fois, nous prenons l'aide de l'AfAuth que nous avons injecté et Auth dessus,
et cela fournit cette méthode appelée « déconnecter »,
qui, lorsqu'elle est appelée, déconnectera l'
utilisateur actuellement connecté et c'est donc une façon de gérer cela.
Maintenant, vous devez vous demander comment je gère la partie de connexion Google.
Maintenant, cela est également géré avec l'AFAuth donc le module AngularFire2 que j'utilise,
fournit ces informations pour ces méthodes pour nous via
le module Firebase qui est également utilisé dans AngularFire2,
et donc cela fournit cette méthode appelée connexion avec pop et quand
nous nous connectons avec pop- ici remarquez ce que je spécifie ici.
Donc, je dis « new FireBase.auth.googleAuthProvider ».
Maintenant, vous pouvez également faire Firebase.auth.facebookAuthProvider et d'autres.
Ainsi, comme vous l'avez vu lors de l'exercice précédent,
Firebase vous permet de faire une connexion tierce à l'aide de Google,
Facebook, GitHub et Twitter.
Vous pouvez donc les configurer correctement,
puisque j'ai activé uniquement l'autorisation Google.
C' est ainsi que je vais le configurer pour utiliser
mon autorisation Google ici et cette seule ligne de code que j'ai jointe ici,
est celle qui provoque la pop-up du navigateur qui me suggère d'autoriser
ma Firebase à utiliser l'autorisation Google en utilisant mon compte Google ici.
Donc c'est la deuxième partie que j'ai mise en place ici.
Notez donc que le service Auth a considérablement
simplifié par rapport à ce que nous avons fait avec la version précédente de cette application.
Vous pouvez donc comparer les deux versions pour voir en quoi cela est différent de l'autre.
Maintenant, non seulement cette AfAuth que nous avons injecté ici,
partie AngularFireAuth que nous avons injectée ici,
fournit également cet observable appelé « AuthState ».
Ce authState observable, peut être abonné à et ce « authState » observable,
comme vous le voyez ici,
que j'ai déclaré ici comme FireBase.user observable.
Donc, c'est l'information qui est appliquée ici et aussi nous pouvons configurer
une autre variable ici appelée utilisateur actuel qui est du type utilisateur Firebase ici.
Donc, cet AFAuthState est un observable auquel
je peux m'abonner et chaque fois que cet
AuthState change, l'AuthState garde une trace de
l'état d'authentification de l'utilisateur si l'utilisateur est connecté ou déconnecté et si l'utilisateur est connecté,
alors cela s'abonnera me retournera le informations utilisateur et à partir
des informations utilisateur, nous pouvons récupérer beaucoup d'informations, y compris le nom d'affichage,
l'e-mail, l'ID de profil, puis l'
image d'avatar pour l'utilisateur si elle a été configurée pour les comptes spécifiques.
Toutes ces informations nous seront fournies automatiquement par l'utilisateur.
Ainsi, lorsque vous cliquez sur « utilisateur », puis point,
vous verrez qu'il fournit toutes ces informations pour nous.
Il s'agit donc d'un nom d'affichage email,
que l'e-mail soit vérifié ou non et ainsi de suite.
Donc, certaines des choses qui nous intéressent spécifiquement.
URL photo qui peut être utilisé pour récupérer les informations de l'avatar pour l'utilisateur,
ID du fournisseur qui spécifie qui
fournit ces informations pour vous ce serait soit Facebook ID,
Google ID et GitHub ID et ainsi de suite et des informations supplémentaires même le jeton d'actualisation.
Donc, vous voyez un tas d'informations étant
mis à votre disposition via l'objet utilisateur qui est
retourné par cet Authstate lorsque vous vous abonnez à celui-ci
et laissez-moi également attirer votre attention sur l'UID l'ID utilisateur,
et c'est ce qui peut être utilisé pour indexer l'utilisateur dans notre application.
C' est donc le service d'authentification de la façon dont je l'
ai configuré pour utiliser l'authentification Firebase dans cette application.
Donc, deux changements que je vous ai reflétés pour montrer
comment mes services sont modifiés pour utiliser Firebase.
La plupart des mises à jour que j'ai faites à mon application Angular sont toutes
dans les services afin d'utiliser Firebase installé.
Donc, à cause du bébé structuré de
l'application Angular, les composants dépendaient simplement des
services et les services étaient ceux que nous parlons au back-end.
Donc, la plupart des mises à jour que j'ai faites à
mon application Angular impliquent simplement la mise à jour
de ces services pour utiliser le back-end de Google Firebase comme un service avec les deux modules npm,
Firebase et AngularFireAuth ici.
Donc, vous verrez que la plupart des mises à jour sont limitées à
tous ces services que j'ai dans le dossier services de mon application Angular.
Bien sûr, j'avais besoin de faire un peu d'
ajustements minimaux dans le composant dishdetail
et le composant d'en-tête afin de le faire fonctionner avec Firebase.
Vous pouvez visiter rapidement le headercomponent.ts,
le headercomponent.html et le dishdetailcomponent.tsfile pour voir comment le code
a changé entre la version précédente
et la version actuelle de l'application Angular,
la version précédente, je veux dire la version que nous avons utilisée pour
communiquer avec notre
serveur X plus Mongo DB que nous avons utilisé dans l'exercice précédent.
Maintenant, un autre endroit où vous me verrez faire des modifications,
c'est intéressant, dans le service préféré.
Dans le service favori,
la façon dont j'ai stocké les favoris de l'utilisateur,
est que les favoris sont une collection sur
mon site de serveur et le favori lui-même contient des documents.
Chaque document contient l'ID utilisateur et l'ID plat.
Ainsi, un utilisateur particulier pourrait avoir
plusieurs documents chacun d'eux stockant l'ID utilisateur et l'ID plat.
Ainsi, une collection d'entre eux ensemble définira tous les favoris pour un utilisateur particulier.
J' ai trouvé que c'est une meilleure façon d'organiser ces données dans Firebase.
Dans notre MongoDB plus mongos,
vous avez vu que j'avais intégré dans un tableau d'ID plat dans
le document favoris, puis définissez le schéma préféré de cette façon.
Ici, j'utilise
un document séparé pour suivre chacun des favoris pour chacun des utilisateurs.
Maintenant, parce que Firebase prend en charge les requêtes, donc,
je peux interroger ma Firebase et extraire tous les documents qui ont les mêmes ID
utilisateur, ce qui correspond à l'utilisateur actuellement connecté, puis
extraire les ID de plat correspondants des favoris.
Ensuite, j'irai interroger mon serveur
et obtenir les informations de plat pour chacun de ces plats.
Donc, cela implique plusieurs voyages sur le serveur afin d'obtenir
toutes mes informations de plats préférés avant de pouvoir rendre ma liste de favoris.
Mais, c'est la meilleure façon de faire fonctionner Firebase avec mon application Angular.
Peut-être, à une date ultérieure,
Firebase Cloud Firestone pourrait s'étendre pour
permettre quelque chose comme peupler que nous avons fait avec des mongos.
Dans ce cas, je mettrai à jour le code pour utiliser cette façon
d'obtenir automatiquement toutes les informations sur le plat.
Ainsi, le fardeau de la construction de ce document composé sera déplacé vers le site du serveur.
En ce moment, mon client fait beaucoup de travail ici.
Maintenant, quand vous allez ici,
vous verrez que dans la méthode getFavorites,
vous verrez comment j'accède à mes favoris ici.
Donc, quand je fais « Getfavorites », j'
interroge cette collection de favoris mais remarque que ici,
je dis « ref où est cet ID utilisateur ».
Cet ID utilisateur que j'obtiens ici.
Donc, dans le constructeur de mon serveur préféré,
je m'abonne à ce service Auth l'état Get Auth dans le service Auth.
Donc, dans le service Auth si vous entrez,
vous verrez cette méthode appelée Get Auth state ici.
L' état Get Auth renvoie le this.authState,
que j'ai défini juste là.
Donc, ce sera un observable comme vous me voyez déclarer ici.
Donc, cet observable est celui que je vais
utiliser dans mon service préféré et puis m'abonner à cela.
Ainsi, chaque fois que les informations de l'utilisateur changent, cela sera automatiquement reflété ici.
Donc, vous avez vu que même dans l'application précédente, j'avais utilisé un observable,
afin de refléter les informations de l'utilisateur dans mon composant d'en-tête.
Type d'approche similaire,
que j'utilise dans mon composant favoris ici,
pour obtenir l'ID utilisateur de l'utilisateur actuellement connecté.
Ainsi, lorsque j'interroge la collection Mes favoris,
je vais interroger et extraire uniquement les documents où l'utilisateur correspond à cela.
Ensuite, j'utilise seulement les changements de valeur ici.
Donc, je ne fais que extraire tous les documents,
que je ne me soucie pas de l'ID du document favoris lui-même en ce moment.
Donc, je les extrait tous et les utilise.
Si l'utilisateur n'est pas connecté et comme vous pouvez le voir,
je lance une erreur ici avec le dicton observable,
« aucun utilisateur connecté » c'est ce qui est affiché dans mon discours préféré là-bas.
Maintenant, le IsFavorites est également mis à jour ici
mais dans les IsFavorites ce que je fais est que je vais à la base de données.
Maintenant, ici, je vais accéder à la base de données en disant,
« DB est égal à firebase.firestore ».
Rappelez-vous que j'importe Firebase ici,
importer star comme Firebase ici.
Le Firestore Angular lui-même ne me fournit pas une méthode de
faire plusieurs requêtes composées ici.
Le Firestore angulaire ou le feu angulaire à ne me fournit pas de faire ça.
Donc, c'est pourquoi je dois recourir à Firebase Firestore.
Donc, quand je dis Firebase Firestore,
cela me donne une référence à la base de données Firestore et ensuite je peux aller dans cette base de données
et dire « DB collection favoris » et puis je peux faire plusieurs requêtes ici.
Donc, je dis, .where l'utilisateur est this.wheredish est l'ID plat.
Donc, si je veux obtenir un favori spécifique.
Pour vérifier si un plat spécifique est le favori d'un utilisateur, j'obtiens
ce document particulier où l'utilisateur et le plat correspondent à ces deux,
s'ils ne correspondent pas alors il reviendra avec un vide.
Donc, que j'extrait et puis retourne cette valeur ici.
Maintenant, puis je poste favoris,
vous voyez comment je fais cela je dis que cette collection AFS favoris et je vais dire « ajouter ».
Regardez le document que je stocke dans mes favoris.
Le document lui-même contient l'ID utilisateur et l'ID plat.
Donc, ces deux informations jointes ici et
sinon alors il rejettera la promesse sans utilisateur connecté ici.
De même, pour le favori de suppression que j'ai implémenté ici.
Passez un peu de temps à parcourir ce code pour comprendre comment j'ai
tiré parti des modules Firebase et Angular fire
to npm afin de communiquer avec mon serveur Firebase que j'ai configuré dans l'exercice précédent.
Avec cela, je vous ai donné un aperçu rapide de la
façon dont vous pouvez configurer votre application Angular pour interagir avec
Firebase back-end en tant que service et être en mesure de
prendre en charge diverses opérations que vous avez dans votre application Angular.
Comme je l'ai démontré précédemment,
cette application Angular ressemble exactement à
la version précédente de l'application Angular où nous
utilisions notre propre version de notre serveur Express MongoDB.
Maintenant, avec cela, je termine cet exercice particulier où j'ai illustré dans
cette leçon sur le back-end en tant que service et également démontré
Firebase comme un exemple d'un back-end en tant que service.