1
00:00:03,950 --> 00:00:06,525
Dans l'exercice précédent,

2
00:00:06,525 --> 00:00:09,990
nous avions déjà configuré notre backend Firebase en

3
00:00:09,990 --> 00:00:15,120
tant que service avec le nouveau projet et avons également mis en place beaucoup

4
00:00:15,120 --> 00:00:19,620
de données dans notre base de données, puis configuré notre stockage et

5
00:00:19,620 --> 00:00:25,120
configuré notre serveur Firebase pour agir comme le backend de notre application Angular.

6
00:00:25,120 --> 00:00:29,160
Dans cet exercice, nous allons examiner une version modifiée de

7
00:00:29,160 --> 00:00:33,480
notre application Angular qui utilise le backend Firebase

8
00:00:33,480 --> 00:00:37,500
en tant que service afin d'obtenir les données et

9
00:00:37,500 --> 00:00:41,915
également stocker des informations pour les utilisateurs sur les serveurs.

10
00:00:41,915 --> 00:00:44,480
En outre, nous tirons parti de

11
00:00:44,480 --> 00:00:48,455
la prise en charge de l'authentification fournie par Firebase pour authentifier les utilisateurs à la

12
00:00:48,455 --> 00:00:56,295
fois en utilisant une approche par e-mail et mot de passe et en utilisant également un compte Google.

13
00:00:56,295 --> 00:00:59,775
Pour commencer cet exercice,

14
00:00:59,775 --> 00:01:02,750
allez à un emplacement pratique sur votre ordinateur,

15
00:01:02,750 --> 00:01:07,190
puis clonez le dépôt Git donné où je

16
00:01:07,190 --> 00:01:14,775
vous ai fourni la version Angular Firebase de notre application Angular.

17
00:01:14,775 --> 00:01:17,490
Donc tapez, git clone

18
00:01:17,490 --> 00:01:27,470
https://github.com/jmuppala/confusion-Angular6-Firebase.git,

19
00:01:27,470 --> 00:01:28,670
puis clonez

20
00:01:28,670 --> 00:01:34,835
le dépôt Git et une fois que le dépôt Git est cloné sur votre ordinateur,

21
00:01:34,835 --> 00:01:43,355
puis déplacez dans le

22
00:01:43,355 --> 00:01:47,570
dossier Angular Firebase de confusion qui sera créé à ce stade et

23
00:01:47,570 --> 00:01:52,110
vous remarquez qu'un tas de fichiers y sont déjà installés.

24
00:01:52,110 --> 00:01:56,015
Allons de l'avant et faisons une installation npm pour installer

25
00:01:56,015 --> 00:02:01,890
tous les modules de noeud dont dépend cette application angulaire.

26
00:02:01,890 --> 00:02:04,520
Cette version installera également

27
00:02:04,520 --> 00:02:10,010
deux modules de noeud supplémentaires appelés Firebase, puis Angular fire two.

28
00:02:10,010 --> 00:02:15,525
Je vais en expliquer un peu plus sur ces deux modules de noeud plus tard dans cet exercice.

29
00:02:15,525 --> 00:02:18,915
Une fois l'installation du projet terminée,

30
00:02:18,915 --> 00:02:23,360
ouvrez le projet dans un éditeur, puis dans le projet,

31
00:02:23,360 --> 00:02:27,830
allez dans le dossier environnements source,

32
00:02:27,830 --> 00:02:32,420
puis ouvrez le fichier environment.ts et dans le fichier environment.ts,

33
00:02:32,420 --> 00:02:36,980
vous verrez un ensemble de configuration Firebase que vous

34
00:02:36,980 --> 00:02:42,130
devez configurer avec votre propre configuration du serveur Firebase.

35
00:02:42,130 --> 00:02:45,105
Comme nous l'avons vu dans l'exercice précédent,

36
00:02:45,105 --> 00:02:48,950
nous pouvons obtenir toutes ces informations lorsque nous cliquons sur

37
00:02:48,950 --> 00:02:53,150
ce bouton ici appelé « Ajouter Firebase à votre application web », puis

38
00:02:53,150 --> 00:03:01,835
copier ces informations, puis coller

39
00:03:01,835 --> 00:03:06,500
ces informations dans votre fichier environment.ts pour les remplacer par votre Configuration

40
00:03:06,500 --> 00:03:10,940
des serveurs Firebase pour toutes ces informations et une fois que cela est terminé,

41
00:03:10,940 --> 00:03:17,390
vous pouvez démarrer votre application Angular en tapant « ng serve » à l'invite.

42
00:03:17,390 --> 00:03:21,735
Une fois que votre application Angular est compilée avec « ng serve »,

43
00:03:21,735 --> 00:03:29,905
puis allez dans un navigateur, puis tapez localhost:4200 pour charger dans

44
00:03:29,905 --> 00:03:34,850
votre application Angular et vous remarquerez que votre application Angular est compilée

45
00:03:34,850 --> 00:03:40,215
puis chargée dans votre navigateur comme avant.

46
00:03:40,215 --> 00:03:43,190
Donc, une fois que votre application Angular est

47
00:03:43,190 --> 00:03:47,585
en cours d'exécution, vous remarquerez que cette version de l'application Angular va utiliser

48
00:03:47,585 --> 00:03:51,260
le serveur Firebase que vous avez configuré dans

49
00:03:51,260 --> 00:03:55,625
l'exercice précédent et donc ici vous verrez la page « Accueil »,

50
00:03:55,625 --> 00:04:00,030
la page « À propos » comme nous le voyons ici et la

51
00:04:00,030 --> 00:04:09,615
« Menu » et la page « Contact » et évidemment, puisque nous ne sommes pas actuellement connectés,

52
00:04:09,615 --> 00:04:14,975
la page « Mes favoris » affichera une erreur indiquant qu'aucun utilisateur n'est connecté.

53
00:04:14,975 --> 00:04:17,210
Alors, nous allons nous connecter.

54
00:04:17,210 --> 00:04:20,760
Laissez-moi revenir à la « Page d'accueil » et ensuite nous nous connecterons.

55
00:04:20,760 --> 00:04:22,475
Ainsi, lorsque vous cliquez sur le bouton de connexion,

56
00:04:22,475 --> 00:04:27,195
vous verrez le formulaire typique ici avec l'e-mail et les informations de mot de passe.

57
00:04:27,195 --> 00:04:30,715
Vous verrez également un bouton supplémentaire appelé « Connectez-vous avec Google ».

58
00:04:30,715 --> 00:04:33,600
Laissez-moi donc me connecter avec mon compte Google.

59
00:04:33,600 --> 00:04:35,750
Ainsi, lorsque vous cliquez sur le « Connexion avec Google »,

60
00:04:35,750 --> 00:04:41,180
alors il ouvrira une autre fenêtre de navigateur où vous serez invité à

61
00:04:41,180 --> 00:04:47,420
autoriser l'utilisation de votre compte Google par ce serveur Firebase.

62
00:04:47,420 --> 00:04:49,475
Donc, laissez-moi aller de l'avant

63
00:04:49,475 --> 00:04:53,845
et autoriser cette application, puis une fois l'autorisation terminée,

64
00:04:53,845 --> 00:04:57,145
vous verrez que votre

65
00:04:57,145 --> 00:05:01,850
application Angular basée sur Firebase démarrera et dans le coin droit,

66
00:05:01,850 --> 00:05:06,200
vous verrez immédiatement votre nom

67
00:05:06,200 --> 00:05:11,525
affiché ici et avec le « Login » maintenant transformé en bouton « Déconnexion ».

68
00:05:11,525 --> 00:05:14,755
Donc, à ce stade,

69
00:05:14,755 --> 00:05:17,530
vous devriez être en mesure de voir vos favoris

70
00:05:17,530 --> 00:05:20,310
et dans ce cas puisque nous n'avons pas de favoris,

71
00:05:20,310 --> 00:05:22,155
donc il sera vide à ce stade.

72
00:05:22,155 --> 00:05:27,830
Laissez-moi revenir au « Menu », puis ajouter quelques éléments dans « Mes favoris ».

73
00:05:27,830 --> 00:05:32,235
Donc, je vais ajouter ce plat à mes favoris.

74
00:05:32,235 --> 00:05:34,045
Donc, quand je clique sur ce plat,

75
00:05:34,045 --> 00:05:41,110
vous verrez immédiatement l'icône se transformer en un cœur rempli et laissez-moi également sélectionner

76
00:05:41,110 --> 00:05:44,350
un plat de plus et l'ajouter dans « Mes

77
00:05:44,350 --> 00:05:49,650
favoris », puis maintenant, quand vous allez à la « Mes favoris »,

78
00:05:49,650 --> 00:05:52,510
vous verrez le couple de plats ajoutés dans

79
00:05:52,510 --> 00:05:56,330
vos favoris comme vous le feriez attendre et encore,

80
00:05:56,330 --> 00:06:02,540
vous pouvez supprimer les plats en cliquant sur le bouton « Supprimer » bascule ici, puis cliquez sur

81
00:06:02,540 --> 00:06:09,695
la croix pour supprimer l'élément de votre liste de favoris comme indiqué ici.

82
00:06:09,695 --> 00:06:13,570
Maintenant, nous pouvons également ajouter comme vous l'avez réalisé,

83
00:06:13,570 --> 00:06:17,660
nous pouvons aller à n'importe quel plat, puis ajouter des commentaires sur ce plat.

84
00:06:17,660 --> 00:06:19,190
Donc, permettez-moi d'ajouter un commentaire

85
00:06:19,190 --> 00:06:28,260
ici et au moment où vous soumettez le commentaire,

86
00:06:28,260 --> 00:06:32,435
vous verrez immédiatement que vos commentaires seront affichés ici avec

87
00:06:32,435 --> 00:06:41,825
le nom de l'auteur du commentaire également inclus ici et avec la date comme indiqué ici.

88
00:06:41,825 --> 00:06:45,890
Ainsi, vous pouvez voir que la soumission de

89
00:06:45,890 --> 00:06:49,955
commentaires de l'utilisateur sera prise en charge pour n'importe quel plat spécifique.

90
00:06:49,955 --> 00:06:55,805
Permettez-moi d'ajouter un favori de plus et cet utilisateur aura donc quelques favoris.

91
00:06:55,805 --> 00:06:58,180
Laissez-moi « Déconnecter » cet utilisateur.

92
00:06:58,180 --> 00:07:02,930
Retournez à la « Page d'accueil », puis « Déconnecter » cet utilisateur.

93
00:07:02,930 --> 00:07:07,715
Maintenant, nous allons nous connecter en utilisant l'autre compte.

94
00:07:07,715 --> 00:07:13,490
Donc, je le ferais- J'avais mis en place

95
00:07:13,490 --> 00:07:17,840
ce compte de mot de passe e-mail plus tôt et donc nous allons nous

96
00:07:17,840 --> 00:07:22,865
connecter comme cet autre utilisateur et une fois que l'autre utilisateur est connecté,

97
00:07:22,865 --> 00:07:29,045
laissez-moi aller à nouveau dans le « Menu » et ajouter quelques éléments dans

98
00:07:29,045 --> 00:07:36,904
les favoris pour cet utilisateur particulier

99
00:07:36,904 --> 00:07:40,700
et donc quand vous revenez à « Mes favoris »,

100
00:07:40,700 --> 00:07:44,270
vous verrez ces éléments répertoriés pour le deuxième utilisateur.

101
00:07:44,270 --> 00:07:46,775
Maintenant, de la même manière pour cet utilisateur,

102
00:07:46,775 --> 00:07:51,560
laissez-moi à nouveau soumettre un autre commentaire de cet utilisateur.

103
00:07:51,560 --> 00:07:53,150
So-

104
00:08:01,000 --> 00:08:02,600
et vous

105
00:08:02,600 --> 00:08:07,445
verrez que les commentaires soumis par le deuxième utilisateur est également ajouté dans l'application.

106
00:08:07,445 --> 00:08:11,615
Donc, c'est ainsi que votre application Angular fonctionne

107
00:08:11,615 --> 00:08:16,490
avec Firebase en tant que service principal.

108
00:08:16,490 --> 00:08:18,529
Maintenant, bien sûr, vous devez vous demander,

109
00:08:18,529 --> 00:08:24,170
comment remanions-nous notre application Angular pour utiliser Firebase au lieu

110
00:08:24,170 --> 00:08:31,610
d'utiliser le serveur Standard Express plus MongoDB que nous avons construit plus tôt ?

111
00:08:31,610 --> 00:08:38,440
Afin de configurer votre application Angular pour communiquer avec le serveur Firebase,

112
00:08:38,440 --> 00:08:42,620
il existe deux modules de nœuds que vous devez installer dans

113
00:08:42,620 --> 00:08:46,860
votre application Angular et l'un d'eux est le module Firebase.

114
00:08:46,860 --> 00:08:49,730
Le module Firebase comme vous le voyez ici,

115
00:08:49,730 --> 00:08:55,190
fournit les outils et l'infrastructure qui vous permet de communiquer

116
00:08:55,190 --> 00:09:01,610
avec le serveur Firebase et de l'installer dans votre application

117
00:09:01,610 --> 00:09:05,720
, vous tapez, npm install moins save Firebase.

118
00:09:05,720 --> 00:09:07,610
Maintenant, avec cela,

119
00:09:07,610 --> 00:09:11,395
il y a un autre module appelé Angular Fire 2.

120
00:09:11,395 --> 00:09:13,725
Donc, le feu angulaire 2.

121
00:09:13,725 --> 00:09:20,535
De plus, j'ai fourni les liens vers ces deux modules dans les ressources supplémentaires.

122
00:09:20,535 --> 00:09:23,795
AngularFire 2 est la bibliothèque officielle

123
00:09:23,795 --> 00:09:27,290
pour le support Firebase et Angular et comme vous pouvez le voir,

124
00:09:27,290 --> 00:09:31,520
c'est un support observable pour les fichiers Angular.

125
00:09:31,520 --> 00:09:36,545
Donc, cela fonctionne pour ajouter au module Firebase npm, puis

126
00:09:36,545 --> 00:09:42,125
vous donne une interface observable que nous pouvons utiliser dans votre application Angular.

127
00:09:42,125 --> 00:09:44,930
Donc, nous tirions parti de l'AngularFire 2.

128
00:09:44,930 --> 00:09:46,994
Donc, pour utiliser AngularFire2,

129
00:09:46,994 --> 00:09:49,940
vous devez installer à la fois Firebase et AngularFire 2.

130
00:09:49,940 --> 00:09:51,345
Donc, en un seul coup,

131
00:09:51,345 --> 00:09:54,205
installez ces deux dans votre application Angular.

132
00:09:54,205 --> 00:09:59,320
Maintenant, la version de l'application Angular que je vous ai fournie

133
00:09:59,320 --> 00:10:06,250
installe automatiquement ces deux comme vous le verrez lorsque vous examinerez le fichier package.json.

134
00:10:06,250 --> 00:10:08,510
Maintenant, comment faire usage de ces deux,

135
00:10:08,510 --> 00:10:12,245
je vais illustrer qu'en vous exécutant rapidement à travers

136
00:10:12,245 --> 00:10:17,280
le code modifié pour les services et quelques composants où

137
00:10:17,280 --> 00:10:19,955
nous utilisons Firebase et AngularFire2

138
00:10:19,955 --> 00:10:23,135
pour modifier l'application Angular que nous avons développée

139
00:10:23,135 --> 00:10:30,140
plus tôt pour utiliser le Serveur Firebase en tant que service principal.

140
00:10:30,140 --> 00:10:34,075
Afin de comprendre comment nous utilisons

141
00:10:34,075 --> 00:10:39,185
Firebase et AngularFire 2 dans notre application Angular,

142
00:10:39,185 --> 00:10:42,860
notre premier arrêt est au fichier package.json.

143
00:10:42,860 --> 00:10:45,025
Donc, dans le fichier package.json,

144
00:10:45,025 --> 00:10:50,850
vous remarquerez que j'ai installé AngularFire2 ici et que nous avons également installé

145
00:10:50,850 --> 00:10:57,510
Firebase pour l'utiliser dans cette version de l'application Angular que je vous fournit.

146
00:10:57,510 --> 00:11:01,980
Donc, notez que ces deux seront automatiquement installés lorsque vous tapez « npm

147
00:11:01,980 --> 00:11:07,720
install » après le clonage de ce dépôt git que je vous ai fourni.

148
00:11:07,720 --> 00:11:11,220
Si vous commenciez avec une nouvelle application Angular,

149
00:11:11,220 --> 00:11:15,590
vous devriez installer à la fois AngularFire 2 et Firebase

150
00:11:15,590 --> 00:11:20,184
afin de tirer parti de l'utilisation de Firebase en tant que service principal.

151
00:11:20,184 --> 00:11:22,365
Maintenant, après avoir installé ces deux,

152
00:11:22,365 --> 00:11:27,360
apprenons comment nous les utilisons dans nos services.

153
00:11:27,360 --> 00:11:30,030
Donc, la meilleure façon d'apprendre à utiliser les deux

154
00:11:30,030 --> 00:11:33,640
est de visiter certains des services que nous avons

155
00:11:33,640 --> 00:11:36,930
configurés dans notre application et de comprendre comment nous

156
00:11:36,930 --> 00:11:42,130
tirons parti de l'utilisation d'AngularFire2 et Firebase.

157
00:11:42,130 --> 00:11:46,235
Donc, nous allons commencer avec le fichier dish.service.ts.

158
00:11:46,235 --> 00:11:48,830
Donc, si vous allez dans le fichier dish.service.ts,

159
00:11:48,830 --> 00:11:51,095
vous remarquerez qu'ici,

160
00:11:51,095 --> 00:11:55,235
dans ce service plat,

161
00:11:55,235 --> 00:12:01,190
vous me verrez importer ce AngularFiRestore, AngularFiRestoreDocument

162
00:12:01,190 --> 00:12:08,115
et AngularFireRecollection d'AngularFire à Firestore ici.

163
00:12:08,115 --> 00:12:16,680
Donc, cela apporte tout ce dont j'ai besoin de mon module npm AngularFiRestore,

164
00:12:16,680 --> 00:12:21,010
vous remarquerez aussi que j'importe tout de

165
00:12:21,010 --> 00:12:27,615
Firebase/application comme Firebase dans mon service de plat ici.

166
00:12:27,615 --> 00:12:29,945
Donc, une fois que nous avons importé ces deux-là,

167
00:12:29,945 --> 00:12:35,415
jetons un coup d'œil à la façon dont nous reconfigurons notre service de vaisselle ici.

168
00:12:35,415 --> 00:12:37,435
Donc, si vous allez dans le service plat,

169
00:12:37,435 --> 00:12:41,175
vous remarquerez que je n'utilise plus le client HTTP.

170
00:12:41,175 --> 00:12:48,975
Au lieu de cela, j'injecte AFS qui est l'AngularFiRestore dans le constructeur ici.

171
00:12:48,975 --> 00:12:51,520
AngularFiRestore est celui qui me donne

172
00:12:51,520 --> 00:12:55,815
accès au backend Firebase en tant que service.

173
00:12:55,815 --> 00:13:01,785
Maintenant, rappelez-vous également que nous avons déjà configuré tous les détails de

174
00:13:01,785 --> 00:13:09,450
notre serveur et aussi le projet de banque de fichiers dans le fichier environment.ts plus tôt.

175
00:13:09,450 --> 00:13:12,595
Donc, vous devriez avoir déjà configuré ces informations

176
00:13:12,595 --> 00:13:16,180
sur la façon dont votre application Angular devrait tirer parti de

177
00:13:16,180 --> 00:13:20,930
votre projet basé sur Firestore sur

178
00:13:20,930 --> 00:13:27,710
votre serveur Firestore pour accéder aux données que vous y avez configurées.

179
00:13:27,710 --> 00:13:32,290
Donc, cela me donnera accès à mon cloud

180
00:13:32,290 --> 00:13:39,400
Firestore dans mon projet Firebase que j'ai configuré.

181
00:13:39,400 --> 00:13:43,410
Maintenant, le service AuthService est bien sûr le même Authservice que nous avons utilisé auparavant,

182
00:13:43,410 --> 00:13:51,175
mais il a été modifié pour utiliser le support Angular pour Firebase.

183
00:13:51,175 --> 00:13:55,095
Nous allons visiter le service AuthService pour savoir comment il a été mis à jour.

184
00:13:55,095 --> 00:14:00,410
Maintenant, le AuthService nous donnera accès à

185
00:14:00,410 --> 00:14:06,345
cette méthode appelée GetAuthState qui retournera dans un observable.

186
00:14:06,345 --> 00:14:08,965
Cette observable, lorsque nous y souscrivons,

187
00:14:08,965 --> 00:14:15,855
nous donnera l'information en tant qu'utilisateur qui contient les informations de l'utilisateur.

188
00:14:15,855 --> 00:14:21,465
Donc, je vais l'obtenir et ensuite configurer le CurrentUser dans mon application

189
00:14:21,465 --> 00:14:28,995
comme l'utilisateur renvoyé par cet observable ici.

190
00:14:28,995 --> 00:14:30,699
Donc, lorsque nous visitons AuthService,

191
00:14:30,699 --> 00:14:33,085
nous apprendrons ce que ce GetAuthState retournera pour

192
00:14:33,085 --> 00:14:35,700
nous et donc les informations de CurrentUser peuvent

193
00:14:35,700 --> 00:14:36,940
être obtenues à partir

194
00:14:36,940 --> 00:14:41,165
de n'importe quel autre service parce que nous injectons déjà AuthService ici.

195
00:14:41,165 --> 00:14:45,570
Maintenant, jetons un coup d'oeil à la façon dont la méthode getDisish est implémentée ici.

196
00:14:45,570 --> 00:14:47,710
Maintenant, plus tôt dans la méthode GetDisish,

197
00:14:47,710 --> 00:14:55,920
nous utilisions le client HTTP pour accéder au serveur à l'URL de base+/plats.

198
00:14:55,920 --> 00:14:57,425
Maintenant, dans ce cas,

199
00:14:57,425 --> 00:15:07,255
pour accéder à une collection dans mon serveur Firebase, nous allons dire ceci .afs.

200
00:15:07,255 --> 00:15:10,710
Donc, c'est ce que nous fournit AngularFire2.

201
00:15:10,710 --> 00:15:16,345
AFS comme vous le voyez est l'AngularFiRestore que nous avons injecté ici et donc nous disons

202
00:15:16,345 --> 00:15:19,810
this.afs.collection et ici nous

203
00:15:19,810 --> 00:15:23,010
allons spécifier la collection spécifique à laquelle nous accédons ici.

204
00:15:23,010 --> 00:15:26,315
Rappelons que nous avions mis en place les plats, les promotions

205
00:15:26,315 --> 00:15:30,415
et les collections leaders sur mon serveur Firebase.

206
00:15:30,415 --> 00:15:34,065
Donc, cela me donne directement accès

207
00:15:34,065 --> 00:15:38,595
à ma collection de plats ici et à partir de la collection de plats,

208
00:15:38,595 --> 00:15:42,740
je peux soit faire .valueChanges qui

209
00:15:42,740 --> 00:15:47,115
retournera toutes les informations dans la collection d'affaires pour moi,

210
00:15:47,115 --> 00:15:50,440
soit je peux le faire.snapshotChanges qui

211
00:15:50,440 --> 00:15:53,990
retournera des informations supplémentaires, y compris l'ID des plats.

212
00:15:53,990 --> 00:15:56,660
Donc, si au lieu de faire SnapshotChanges,

213
00:15:56,660 --> 00:15:59,310
si je dis ValueChanges,

214
00:15:59,310 --> 00:16:03,110
il retournera uniquement les informations de plat mais il ne retournera pas

215
00:16:03,110 --> 00:16:07,890
les ID des plats, mais puisque j'aurai besoin des ID de mes plats,

216
00:16:07,890 --> 00:16:13,335
c'est pourquoi j'utilise .SnapshotChanges dans ce cas.

217
00:16:13,335 --> 00:16:16,090
Donc, quand en.snapshotChanges est appelé,

218
00:16:16,090 --> 00:16:19,505
cela retournera comme vous voyez un observable que

219
00:16:19,505 --> 00:16:27,195
je mappe et donc la valeur de retour qui est appelée en tant qu'actions et ces actions

220
00:16:27,195 --> 00:16:31,800
, encore une fois, sera un observable que je mapperai chaque action dans

221
00:16:31,800 --> 00:16:38,930
cette action, puis extraire les données de l'action qui est est retourné ici.

222
00:16:38,930 --> 00:16:44,525
Donc, l'action est une valeur qui est renvoyée pour chacune des actions

223
00:16:44,525 --> 00:16:50,765
et cette action contient une charge utile et contient ici un champ sombre.

224
00:16:50,765 --> 00:16:53,200
Maintenant, c'est quelque chose que j'ai compris en lisant

225
00:16:53,200 --> 00:16:57,010
la documentation pour AngularFire2 et

226
00:16:57,010 --> 00:17:03,705
donc quand nous appelons cette fonction de données sur cette action.payload.doc,

227
00:17:03,705 --> 00:17:05,875
cela me donnera les données.

228
00:17:05,875 --> 00:17:09,510
Les données pour ce plat spécifique qui est

229
00:17:09,510 --> 00:17:14,160
obtenu à partir de ma collection de plats côté serveur.

230
00:17:14,160 --> 00:17:18,760
Donc, chaque document là-bas sera retourné ici et

231
00:17:18,760 --> 00:17:24,205
ensuite j'obtiens l'ID pour cela en disant action.payload.doc.id.

232
00:17:24,205 --> 00:17:27,855
Donc c'est là que l'ID de celui-ci sera

233
00:17:27,855 --> 00:17:32,030
porté et ensuite je vais joindre les deux ensemble et retourner

234
00:17:32,030 --> 00:17:40,035
ceci comme un document plat à mes différents composants à partir de là,

235
00:17:40,035 --> 00:17:42,150
je vais appelle cette méthode GetDisish.

236
00:17:42,150 --> 00:17:43,345
Donc, comme vous vous en souvenez,

237
00:17:43,345 --> 00:17:44,690
à partir du composant de menu,

238
00:17:44,690 --> 00:17:47,400
j'appelle la méthode getDisish afin d'obtenir

239
00:17:47,400 --> 00:17:51,090
les informations sur tous les plats de ma collection.

240
00:17:51,090 --> 00:17:58,505
Collection. Ainsi, chacun de ces plats qui est retourné en tant que doc sera reconstruit dans

241
00:17:58,505 --> 00:18:03,420
un objet JavaScript avec l'ID inséré ici et aussi

242
00:18:03,420 --> 00:18:09,540
les données qui sont extraites de cette action payload.doc.data.

243
00:18:09,540 --> 00:18:16,455
Maintenant, c'est quelque chose que vous apprenez en lisant la documentation d'AngularFire2.

244
00:18:16,455 --> 00:18:19,470
Maintenant, puisque j'ai déjà fait cette partie,

245
00:18:19,470 --> 00:18:22,755
je vous montre le code exact que vous êtes censé

246
00:18:22,755 --> 00:18:26,160
utiliser pour extraire les données et ensuite fournir

247
00:18:26,160 --> 00:18:33,500
ces données à votre composant qui va appeler la méthode getDisish ici.

248
00:18:33,500 --> 00:18:37,090
Donc, en faisant cela pour chacun des documents là-bas,

249
00:18:37,090 --> 00:18:39,180
ce document sera reconstruit à

250
00:18:39,180 --> 00:18:44,800
l'objet plat que nous

251
00:18:44,800 --> 00:18:51,500
utilisons dans notre application Angular et nous sommes donc en mesure d'avoir même accès à l'ID.

252
00:18:51,500 --> 00:18:53,365
Si vous faites simplement des changements de valeur,

253
00:18:53,365 --> 00:18:59,825
il retournera simplement tous les documents eux-mêmes, mais sans les ID des documents.

254
00:18:59,825 --> 00:19:04,920
Donc, ce travail supplémentaire doit être fait au sein de votre service afin de

255
00:19:04,920 --> 00:19:07,835
retourner les informations de la bonne manière afin

256
00:19:07,835 --> 00:19:10,865
que MyComponents puisse utiliser ces informations.

257
00:19:10,865 --> 00:19:13,370
De même, pour une méthode getDish,

258
00:19:13,370 --> 00:19:17,695
alors remarquez comment j'accède aux informations pour un plat spécifique.

259
00:19:17,695 --> 00:19:22,020
Encore une fois, nous allons dire this.afs et puis vous remarquerez que je suis

260
00:19:22,020 --> 00:19:26,660
saying.doc, puis ici pour la méthode the.doc,

261
00:19:26,660 --> 00:19:32,650
je fournit des plats slash, puis l'ID du plat spécifique.

262
00:19:32,650 --> 00:19:35,150
Maintenant, la raison pour laquelle j'avais fourni l'ID,

263
00:19:35,150 --> 00:19:39,350
l'ID ici vient en tant que paramètre de la méthode getDish ici.

264
00:19:39,350 --> 00:19:41,985
Maintenant, pour que cet ID soit fourni,

265
00:19:41,985 --> 00:19:44,450
j'ai besoin de pouvoir fournir cet ID dans

266
00:19:44,450 --> 00:19:47,480
la méthode getDiscounts donc lorsque mon menu est construit,

267
00:19:47,480 --> 00:19:51,205
chaque plat y aura son ID.

268
00:19:51,205 --> 00:19:56,575
Cet ID est passé ici et je vais donc accéder au document à ce stade.

269
00:19:56,575 --> 00:20:01,260
Ainsi, AngularFire2 vous permet d'accéder à

270
00:20:01,260 --> 00:20:07,125
un document spécifique qui se trouve à l'intérieur d'une collection en disant la barre oblique du nom de

271
00:20:07,125 --> 00:20:15,430
la collection, plus l'ID du document ou vous pouvez dire ceci .afs.collection plats comme vous l'avez entendu,

272
00:20:15,430 --> 00:20:22,540
plats de collection et then.doc, puis fournir doc et ID entre parenthèses là.

273
00:20:22,540 --> 00:20:26,725
Donc, c'est une autre façon d'aborder un plat spécifique.

274
00:20:26,725 --> 00:20:32,680
Encore une fois, je m'abonne à SnapshotChanges et cela retournera une action qui est ensuite

275
00:20:32,680 --> 00:20:35,480
mappée dans le même format pour

276
00:20:35,480 --> 00:20:39,495
construire l'objet plat ici avec l'ID ici.

277
00:20:39,495 --> 00:20:42,410
Maintenant, Firebase garde l'ID séparé du document

278
00:20:42,410 --> 00:20:46,300
lui-même et c'est pourquoi je dois explicitement faire

279
00:20:46,300 --> 00:20:49,010
cette reconstruction afin d'obtenir

280
00:20:49,010 --> 00:20:54,750
le document plat d'une manière qui soit utilisable par MyComponents.

281
00:20:54,750 --> 00:20:59,660
Ensuite, j'ai construit mon propre serveur en utilisant Express et MongoDB,

282
00:20:59,660 --> 00:21:03,995
l'ID était automatiquement là dans le document lui-même et il était donc très

283
00:21:03,995 --> 00:21:09,235
facile de récupérer cela et de le remettre au côté client.

284
00:21:09,235 --> 00:21:13,610
Maintenant, pour le getFeaturedDish,

285
00:21:13,610 --> 00:21:15,620
rappelez-vous que pour le getFeaturedDish,

286
00:21:15,620 --> 00:21:20,870
nous recherchons les plats où la fonctionnalité est définie sur true.

287
00:21:20,870 --> 00:21:25,790
Maintenant, c'est là que AngularFire2 nous permet de

288
00:21:25,790 --> 00:21:31,180
construire une requête et de fournir cette requête ici pour cette collection.

289
00:21:31,180 --> 00:21:36,440
Ici, je dis ces plats de collection .afs ici,

290
00:21:36,440 --> 00:21:39,520
donc j'utilise toujours la collection, mais alors regardez

291
00:21:39,520 --> 00:21:43,140
le deuxième paramètre pour cet appel ici.

292
00:21:43,140 --> 00:21:49,405
Cela dit ref où la référence fait référence à chaque document qui se trouve dans cette collection.

293
00:21:49,405 --> 00:21:53,330
Cette référence dit la référence et c'est là que je peux

294
00:21:53,330 --> 00:21:58,100
utiliser cette requête mise en place entend donc ce qui dit .where.

295
00:21:58,100 --> 00:22:04,695
Donc, ce qui signifie que chacun des documents où le présenté,

296
00:22:04,695 --> 00:22:10,445
comme vous pouvez le voir, la syntaxe est assez facile à suivre ici qui indique où en vedette.

297
00:22:10,445 --> 00:22:15,240
Maintenant, notez que la fonctionnalité est fournie sous forme de chaîne ici,

298
00:22:15,240 --> 00:22:17,175
et puis

299
00:22:17,175 --> 00:22:22,230
la suivante, l'opérateur est égal à donc vous pouvez même dire supérieur, inférieur,

300
00:22:22,230 --> 00:22:25,345
supérieur ou égal à inférieur ou égal à l'une de ces choses,

301
00:22:25,345 --> 00:22:30,375
mais notez que cela devrait être à l'intérieur des citations ici et puis vous dira vrai.

302
00:22:30,375 --> 00:22:35,105
Ainsi, partout où la propriété vedette du document est définie sur true,

303
00:22:35,105 --> 00:22:36,620
extrayez tous ces éléments.

304
00:22:36,620 --> 00:22:40,545
Donc, cette requête va extraire seulement les documents

305
00:22:40,545 --> 00:22:45,250
de la collection de plats où la fonctionnalité est définie sur true,

306
00:22:45,250 --> 00:22:50,195
puis retourner uniquement les documents de cette collection ici,

307
00:22:50,195 --> 00:22:53,770
et à partir de là je vais changer d'instantané et cela

308
00:22:53,770 --> 00:22:59,350
retournera un tableau de documents et à partir de là je vais les mapper

309
00:22:59,350 --> 00:23:04,270
dans des documents plats individuels, puis depuis que je me suis

310
00:23:04,270 --> 00:23:09,700
assuré que seul un de ces documents aura la fonctionnalité définie sur true.

311
00:23:09,700 --> 00:23:13,030
Donc, il ne retournera qu'un d'entre eux mais il le retournera sous forme de tableau.

312
00:23:13,030 --> 00:23:14,980
Donc, c'est pourquoi je construis ceci

313
00:23:14,980 --> 00:23:20,195
avec le crochet carré zéro le premier élément du tableau,

314
00:23:20,195 --> 00:23:25,210
et en effet il ne contiendra qu'un seul élément parce qu'un seul élément de ma collection

315
00:23:25,210 --> 00:23:30,745
correspondra à cette requête particulière que j'ai configurée ici avec la vague ici.

316
00:23:30,745 --> 00:23:36,470
Il y a d'autres configurations de requête ici, vous pouvez également utiliser quelque chose appelé ordre par.

317
00:23:36,470 --> 00:23:41,000
Ainsi, vous pouvez commander la collection par une certaine propriété,

318
00:23:41,000 --> 00:23:47,310
et un autre ensemble d'options d'interrogation qui sont disponibles.

319
00:23:47,310 --> 00:23:51,480
Maintenant, cela est pris en charge par Firebase sur son cloud Firestore,

320
00:23:51,480 --> 00:23:56,890
et c'est ce que nous pouvons tirer parti en utilisant AngularFire2 pour concevoir

321
00:23:56,890 --> 00:24:03,850
le code dans votre application Angular pour faire la requête du côté client lui-même.

322
00:24:03,850 --> 00:24:09,280
Donc, cela va retourner le plat de fonctionnalité spécifique.

323
00:24:09,360 --> 00:24:15,355
Maintenant, encore une fois GetDishid va être similaire à ce que nous avons fait plus tôt.

324
00:24:15,355 --> 00:24:16,890
Donc, aucune modification là-bas.

325
00:24:16,890 --> 00:24:21,370
Maintenant, pour le PostComment à nouveau

326
00:24:21,370 --> 00:24:27,820
parce que Firebase avec le cloud Firestore beta,

327
00:24:27,820 --> 00:24:31,720
n'a pas le concept de population,

328
00:24:31,720 --> 00:24:34,015
et ainsi de suite que nous avons vu plus tôt.

329
00:24:34,015 --> 00:24:39,890
Donc, ce que je vais faire pour les commentaires est que je vais poster ces commentaires comme

330
00:24:39,890 --> 00:24:46,140
une collection pour laquelle est enfermé à l'intérieur de chaque plat lui-même.

331
00:24:46,140 --> 00:24:52,040
Ainsi, chaque plat aura sa propre collection de commentaires sur ce plat spécifique.

332
00:24:52,040 --> 00:24:54,965
Lorsque je poste le commentaire, je vais utiliser le disHID,

333
00:24:54,965 --> 00:24:57,905
puis les informations de commentaire.

334
00:24:57,905 --> 00:25:01,735
Donc, ce que je fais ici, c'est que je vais d'abord

335
00:25:01,735 --> 00:25:07,175
interroger les plats et ensuite obtenir ce plat particulier.

336
00:25:07,175 --> 00:25:11,555
Donc, vous pouvez voir que j'utilise l'autre façon de demander un document spécifique.

337
00:25:11,555 --> 00:25:16,070
Donc, ici, je dis ce afs.collection ('plats') .doc DishiD.

338
00:25:16,440 --> 00:25:22,660
Donc, je peux utiliser cette façon d'accéder à un document spécifique si je le veux.

339
00:25:22,660 --> 00:25:25,610
L' autre façon bien sûr, vous avez déjà vu avec

340
00:25:25,610 --> 00:25:33,375
la méthode getDish où je dis plats doc slash plus ID.

341
00:25:33,375 --> 00:25:38,185
Donc, deux façons différentes d'aborder un document spécifique à l'intérieur

342
00:25:38,185 --> 00:25:44,460
d'une collection ici, puis DisHID, puis collection et commentaires.

343
00:25:44,460 --> 00:25:46,840
Donc, de cette façon, il est dit dans

344
00:25:46,840 --> 00:25:51,100
cette collection pour ce document spécifique avec ce disHID,

345
00:25:51,100 --> 00:25:54,140
il y a une collection qui est incluse dans

346
00:25:54,140 --> 00:25:57,180
ce document et cette collection a les commentaires de nom.

347
00:25:57,180 --> 00:25:59,660
Donc, il s'agit d'une imbrication d'une collection

348
00:25:59,660 --> 00:26:03,125
à l'intérieur d'un document qui se trouve dans une autre connexion de niveau supérieur.

349
00:26:03,125 --> 00:26:07,110
Ainsi, ce type d'imbrication de collections est autorisé par

350
00:26:07,110 --> 00:26:13,590
Firebase Cloud Store Beta jusqu'à 100 niveaux de profondeur si vous le souhaitez.

351
00:26:13,590 --> 00:26:15,700
Donc, à l'intérieur de cette collection,

352
00:26:15,700 --> 00:26:17,420
je vais ajouter.

353
00:26:17,420 --> 00:26:20,310
Alors, comment ajouter un document à une collection ?

354
00:26:20,310 --> 00:26:22,105
Pour ajouter un document à votre collection,

355
00:26:22,105 --> 00:26:24,755
utilisez la méthode add sur une collection ici.

356
00:26:24,755 --> 00:26:27,600
Donc, vous pouvez voir que sur les commentaires de collection,

357
00:26:27,600 --> 00:26:30,380
je fais un ajout ici et puis

358
00:26:30,380 --> 00:26:33,655
c'est le document réel qui va être ajouté ici.

359
00:26:33,655 --> 00:26:35,280
Donc, dans le document lui-même,

360
00:26:35,280 --> 00:26:40,645
vous verrez que j'ai la propriété auteur ici où j'ai configuré l'ID actuel,

361
00:26:40,645 --> 00:26:44,665
et aussi j'ai mis en place le prénom de l'auteur ici,

362
00:26:44,665 --> 00:26:50,885
je ne sers que la première fois ici donc ici je dis ce nom d'affichage actuel de l'utilisateur.

363
00:26:50,885 --> 00:26:55,625
Si le nom d'affichage est vrai, je vais le définir sur ce nom d'affichage de l'utilisateur actuel.

364
00:26:55,625 --> 00:27:00,960
Si le compte de l'utilisateur n'a pas de nom d'affichage tel qu'il est attaché, je vais simplement

365
00:27:00,960 --> 00:27:06,420
utiliser cet e-mail de l'utilisateur actuel comme propriété de prénom ici.

366
00:27:06,420 --> 00:27:11,035
Donc, ce document qui contient le commentaire,

367
00:27:11,035 --> 00:27:13,150
porte automatiquement ce champ de prénom

368
00:27:13,150 --> 00:27:16,140
et c'est ce que je vais utiliser pour rendre

369
00:27:16,140 --> 00:27:22,495
l'information lorsque je rende les commentaires dans mon composant Dish.Detail.

370
00:27:22,495 --> 00:27:28,710
Donc, notez que je suis en train de dupliquer les informations ici dans chacun des commentaires.

371
00:27:28,710 --> 00:27:31,865
Mais c'est bon, puisque ceux-ci sont stockés en tant que

372
00:27:31,865 --> 00:27:34,160
documents Json sur Firebase, il est correct de

373
00:27:34,160 --> 00:27:36,990
dupliquer certaines des informations dans les commentaires ici.

374
00:27:36,990 --> 00:27:40,245
Mais si vous voulez plus de détails sur l'utilisateur actuel,

375
00:27:40,245 --> 00:27:45,280
vous avez déjà une référence à l'identifiant de l'utilisateur ici afin que vous puissiez réellement aller chercher

376
00:27:45,280 --> 00:27:48,150
le document pour l'utilisateur particulier et ensuite

377
00:27:48,150 --> 00:27:51,485
obtenir des informations supplémentaires sur l'utilisateur si vous le souhaitez.

378
00:27:51,485 --> 00:27:54,830
Maintenant, quand j'ai utilisé Mongo DB plus Mongo,

379
00:27:54,830 --> 00:27:57,950
vous avez vu que je vais juste utiliser l'ID de

380
00:27:57,950 --> 00:28:01,650
l'utilisateur actuel pour l'auteur et ensuite j'utiliserai le remplissage pour remplir cette information.

381
00:28:01,650 --> 00:28:05,150
Maintenant, Cloud Firestore bêta pour le moment n'a

382
00:28:05,150 --> 00:28:10,240
aucun concept de ce remplissage aussi loin que je peux le voir dans la documentation,

383
00:28:10,240 --> 00:28:14,335
peut-être qu'une version future pourrait prendre en charge un moyen d'extraire des

384
00:28:14,335 --> 00:28:16,800
informations d'un autre document et de

385
00:28:16,800 --> 00:28:19,270
les remplir automatiquement dans le document actuel.

386
00:28:19,270 --> 00:28:24,500
Lorsque cela se produit, alors ce code devra être modifié pour en profiter.

387
00:28:24,500 --> 00:28:26,725
Mais à l'heure actuelle, comme je le vois,

388
00:28:26,725 --> 00:28:29,560
Firestore bêta n'a pas la capacité de

389
00:28:29,560 --> 00:28:33,000
remplir les informations d'un autre document dans le document actif.

390
00:28:33,000 --> 00:28:36,040
Donc, c'est pourquoi je réplique juste ce morceau d'

391
00:28:36,040 --> 00:28:39,860
information dont j'ai vraiment besoin quand je rende le commentaire dans

392
00:28:39,860 --> 00:28:43,660
mon composant dishdetail ici et ensuite ci-dessous

393
00:28:43,660 --> 00:28:47,945
vous pouvez voir que j'ai la note et le commentaire ici et puis aussi,

394
00:28:47,945 --> 00:28:49,740
remarquez que je crée

395
00:28:49,740 --> 00:28:57,370
ces deux champs supplémentaires dans mon commentaire ici appelés « CreateDAT » et « UpdateDAT ».

396
00:28:57,370 --> 00:29:01,785
Remarquez comment je mets l'horodatage pour le « CreateDAT ».

397
00:29:01,785 --> 00:29:05,785
La Firebase, maintenant quelle est cette Firebase que j'utilise ici,

398
00:29:05,785 --> 00:29:12,050
cette Firebase est exactement ce que j'ai importé ici à partir de l'application Firebase.

399
00:29:12,050 --> 00:29:15,850
Donc, cela me fournit comme vous le voyez ici ci-dessous,

400
00:29:15,850 --> 00:29:20,395
qui me fournit cette même valeur de champ Firestore.

401
00:29:20,395 --> 00:29:25,260
Donc, cet appel à l'horodatage du serveur des valeurs de champ firestorm,

402
00:29:25,260 --> 00:29:28,390
retournera l'horodatage actuel pour

403
00:29:28,390 --> 00:29:32,605
moi et c'est l'information que je vais stocker dans le « CreateDAT ».

404
00:29:32,605 --> 00:29:35,255
Maintenant, quand j'ai inséré tous les documents ici,

405
00:29:35,255 --> 00:29:40,435
vous avez vu que j'ai créé manuellement ce champ « CreateDat » pour chacun des documents.

406
00:29:40,435 --> 00:29:44,110
Maintenant, c'est une façon de faire la même chose à partir de

407
00:29:44,110 --> 00:29:47,895
notre code Angular dans

408
00:29:47,895 --> 00:29:53,040
notre côté client et la même chose pour le champ « UpdateDAT » que vous verrez ici.

409
00:29:53,040 --> 00:29:55,270
Donc, lorsque vous publiez un nouveau commentaire,

410
00:29:55,270 --> 00:30:00,330
vous voyez que c'est ainsi que vous allez ajouter un nouveau commentaire dans ce serveur.

411
00:30:00,330 --> 00:30:03,630
Maintenant, cela renvoie une promesse et c'est donc l'information

412
00:30:03,630 --> 00:30:07,410
que j'utilise ici pour construire cette promesse ici.

413
00:30:07,410 --> 00:30:10,930
Ensuite, cette autre méthode ici disant « getComments »,

414
00:30:10,930 --> 00:30:16,930
ce « getComments comme vous pouvez le voir accède aux plats de collection AFS,

415
00:30:16,930 --> 00:30:22,420
doc DisHID et puis aux commentaires de collection et l'avis qu'ici,

416
00:30:22,420 --> 00:30:26,580
je ne vais pas exiger chaque ID de commentaires

417
00:30:26,580 --> 00:30:31,220
lui-même que je n'utiliserai pas dans mon Angular pétition de toute façon,

418
00:30:31,220 --> 00:30:33,230
donc au lieu d'utiliser des changements d'instantané,

419
00:30:33,230 --> 00:30:36,285
j'utilise juste des changements de valeur et cela retournera

420
00:30:36,285 --> 00:30:42,170
tous les documents dans cette collection de commentaires pour ce document particulier,

421
00:30:42,170 --> 00:30:47,455
le DisHID de la collection de plats ici et qui seront retournés

422
00:30:47,455 --> 00:30:53,320
et ces commentaires que je rendrai dans mon composant dishdetail.

423
00:30:53,320 --> 00:30:58,210
Maintenant, dans Mongos, vous avez vu que le fait que j'ai inclus l'UserId signifie

424
00:30:58,210 --> 00:31:02,920
que je pourrais faire copuler cette information maintenant avec Firebase,

425
00:31:02,920 --> 00:31:05,740
il n'y a aucun moyen de remplir les informations communes ici,

426
00:31:05,740 --> 00:31:10,870
donc c'est pourquoi je vais explicitement et ensuite remplir les commentaires dans

427
00:31:11,210 --> 00:31:15,250
mon dishdetail pour récupérer tous les commentaires sur

428
00:31:15,250 --> 00:31:20,000
ce plat particulier lorsque je les rend dans le composant dishdetail.

429
00:31:20,000 --> 00:31:22,830
Donc, vous voyez, que j'ai dû ajuster

430
00:31:22,830 --> 00:31:26,480
un peu le code Angular pour faire face au fait que

431
00:31:26,480 --> 00:31:29,765
Firebase ne supporte pas certaines choses que mongos supporte

432
00:31:29,765 --> 00:31:33,605
au moins au moment où Cloud Firestore bêta ne supporte pas ces choses,

433
00:31:33,605 --> 00:31:38,420
et donc j'ai dû travailler pour faire face à ce que Firebase me permet

434
00:31:38,420 --> 00:31:45,365
de stocker et de récupérer à partir du site du serveur Firebase.

435
00:31:45,365 --> 00:31:51,640
Maintenant, il est également intéressant pour nous de rendre une visite rapide au service Auth ici.

436
00:31:51,640 --> 00:31:54,060
Le service Auth ici encore,

437
00:31:54,060 --> 00:31:59,875
notez que dans le service Auth ici, j'importe ce AngularFireAuth

438
00:31:59,875 --> 00:32:06,435
du sous-module AngularFire vers npm ici.

439
00:32:06,435 --> 00:32:11,005
Donc, ici vous pouvez voir que j'importe AngularFireAuth et cela

440
00:32:11,005 --> 00:32:15,970
me donne accès à l'aspect authentification de Firebase.

441
00:32:15,970 --> 00:32:21,690
Maintenant, voyons comment l'authentification Firebase fonctionne réellement à partir de notre application Angular.

442
00:32:21,690 --> 00:32:26,300
Maintenant, nous allons commencer cela en regardant comment la connexion est implémentée.

443
00:32:26,300 --> 00:32:28,775
Donc, c'est là que j'implémente le login,

444
00:32:28,775 --> 00:32:31,420
où j'utilise l'e-mail et le mot de passe.

445
00:32:31,420 --> 00:32:38,090
Donc, cette partie lorsque j'importe l'AngularFireAuth ici,

446
00:32:38,090 --> 00:32:44,910
remarquez que le constructeur que j'injecte l'AngularFireAuth dans mon constructeur.

447
00:32:44,910 --> 00:32:47,260
Donc, cela injectera le service AngularFireAuth

448
00:32:47,260 --> 00:32:50,240
dans mon constructeur et cela me donne accès à

449
00:32:50,240 --> 00:32:55,975
l'authentification Firebase sur le site du serveur afin que je puisse authentifier les utilisateurs.

450
00:32:55,975 --> 00:33:01,555
Donc, si je veux authentifier un utilisateur qui se connecte avec l'e-mail et le mot de passe.

451
00:33:01,555 --> 00:33:04,490
Cette fonction de connexion est celle qui va être appelée

452
00:33:04,490 --> 00:33:07,300
lorsque je tape mon email et mon mot de passe dans

453
00:33:07,300 --> 00:33:10,110
la boîte de dialogue de connexion que je pop-up et puis

454
00:33:10,110 --> 00:33:13,735
cliquez sur le bouton de soumission ou le bouton de connexion ici,

455
00:33:13,735 --> 00:33:16,120
cette fonction de connexion va être appelée et les

456
00:33:16,120 --> 00:33:20,845
informations de l'utilisateur mais je récupère de la composant de connexion est passé ici.

457
00:33:20,845 --> 00:33:22,985
Donc, quand il viendra ici,

458
00:33:22,985 --> 00:33:29,410
je vais utiliser cette AfAuth comme vous voyez que je viens de l'injecter dans le constructeur,

459
00:33:29,410 --> 00:33:33,995
et cela fournit cet objet Auth ici,

460
00:33:33,995 --> 00:33:38,715
qui fournit cette méthode appelée « connexion avec e-mail et mot de passe ».

461
00:33:38,715 --> 00:33:43,530
Donc, cette connexion avec e-mail et mot de passe prend deux paramètres ici comme vous vous

462
00:33:43,530 --> 00:33:49,495
attendez le nom d'utilisateur de l'utilisateur ou l'e-mail et le mot de passe ici.

463
00:33:49,495 --> 00:33:53,310
Donc ces deux éléments d'information

464
00:33:53,310 --> 00:33:57,290
que je fournit comme les deux paramètres de cette connexion avec e-mail et mot de passe.

465
00:33:57,290 --> 00:33:59,965
Donc, quand vous cliquez sur cela, vous verrez qu'il

466
00:33:59,965 --> 00:34:03,790
dit que le premier devrait être e-mail et le second devrait être mot de passe.

467
00:34:03,790 --> 00:34:05,455
Maintenant, de la façon dont je l'ai configuré,

468
00:34:05,455 --> 00:34:09,590
cet objet utilisateur qui arrive contient l'e-mail dans l'

469
00:34:09,590 --> 00:34:16,735
user.username ici et le mot de passe dans la propriété password de l'objet utilisateur.

470
00:34:16,735 --> 00:34:18,925
Donc, quand cela est obtenu,

471
00:34:18,925 --> 00:34:24,670
alors je vais poster cette information et ensuite quand cela est terminé avec succès, cela

472
00:34:24,670 --> 00:34:27,430
signifie que l'utilisateur est correctement connecté,

473
00:34:27,430 --> 00:34:29,075
s'il y a une erreur,

474
00:34:29,075 --> 00:34:31,510
alors vous attrapez l'erreur ici en ce moment je

475
00:34:31,510 --> 00:34:33,960
ne fais rien spécifiquement avec l'erreur que vous pouvez

476
00:34:33,960 --> 00:34:38,820
souhaite imprimer ce message d'erreur pour indiquer que l'utilisateur ne peut pas se connecter et ainsi de suite.

477
00:34:38,820 --> 00:34:42,070
Donc, je n'ai pas implémenté cette partie de l'accord ici,

478
00:34:42,070 --> 00:34:45,390
je le laisse juste là si vous voulez consigner

479
00:34:45,390 --> 00:34:48,740
cette information, vous pouvez le faire lorsque des erreurs se produisent.

480
00:34:48,740 --> 00:34:51,495
Maintenant pour déconnecter, dans Firebase.

481
00:34:51,495 --> 00:34:56,610
Encore une fois, nous prenons l'aide de l'AfAuth que nous avons injecté et Auth dessus,

482
00:34:56,610 --> 00:34:58,975
et cela fournit cette méthode appelée « déconnecter »,

483
00:34:58,975 --> 00:35:01,815
qui, lorsqu'elle est appelée, déconnectera l'

484
00:35:01,815 --> 00:35:05,610
utilisateur actuellement connecté et c'est donc une façon de gérer cela.

485
00:35:05,610 --> 00:35:09,795
Maintenant, vous devez vous demander comment je gère la partie de connexion Google.

486
00:35:09,795 --> 00:35:17,980
Maintenant, cela est également géré avec l'AFAuth donc le module AngularFire2 que j'utilise,

487
00:35:17,980 --> 00:35:22,780
fournit ces informations pour ces méthodes pour nous via

488
00:35:22,780 --> 00:35:28,880
le module Firebase qui est également utilisé dans AngularFire2,

489
00:35:28,880 --> 00:35:33,105
et donc cela fournit cette méthode appelée connexion avec pop et quand

490
00:35:33,105 --> 00:35:37,280
nous nous connectons avec pop- ici remarquez ce que je spécifie ici.

491
00:35:37,280 --> 00:35:42,650
Donc, je dis « new FireBase.auth.googleAuthProvider ».

492
00:35:42,650 --> 00:35:48,200
Maintenant, vous pouvez également faire Firebase.auth.facebookAuthProvider et d'autres.

493
00:35:48,200 --> 00:35:52,170
Ainsi, comme vous l'avez vu lors de l'exercice précédent,

494
00:35:52,170 --> 00:35:58,835
Firebase vous permet de faire une connexion tierce à l'aide de Google,

495
00:35:58,835 --> 00:36:01,520
Facebook, GitHub et Twitter.

496
00:36:01,520 --> 00:36:04,440
Vous pouvez donc les configurer correctement,

497
00:36:04,440 --> 00:36:07,260
puisque j'ai activé uniquement l'autorisation Google.

498
00:36:07,260 --> 00:36:10,470
C' est ainsi que je vais le configurer pour utiliser

499
00:36:10,470 --> 00:36:16,160
mon autorisation Google ici et cette seule ligne de code que j'ai jointe ici,

500
00:36:16,160 --> 00:36:23,650
est celle qui provoque la pop-up du navigateur qui me suggère d'autoriser

501
00:36:23,650 --> 00:36:31,580
ma Firebase à utiliser l'autorisation Google en utilisant mon compte Google ici.

502
00:36:31,580 --> 00:36:34,210
Donc c'est la deuxième partie que j'ai mise en place ici.

503
00:36:34,210 --> 00:36:38,929
Notez donc que le service Auth a considérablement

504
00:36:38,929 --> 00:36:44,170
simplifié par rapport à ce que nous avons fait avec la version précédente de cette application.

505
00:36:44,170 --> 00:36:49,755
Vous pouvez donc comparer les deux versions pour voir en quoi cela est différent de l'autre.

506
00:36:49,755 --> 00:36:54,410
Maintenant, non seulement cette AfAuth que nous avons injecté ici,

507
00:36:54,410 --> 00:36:57,365
partie AngularFireAuth que nous avons injectée ici,

508
00:36:57,365 --> 00:37:01,800
fournit également cet observable appelé « AuthState ».

509
00:37:01,800 --> 00:37:08,045
Ce authState observable, peut être abonné à et ce « authState » observable,

510
00:37:08,045 --> 00:37:10,130
comme vous le voyez ici,

511
00:37:10,130 --> 00:37:15,880
que j'ai déclaré ici comme FireBase.user observable.

512
00:37:15,880 --> 00:37:21,400
Donc, c'est l'information qui est appliquée ici et aussi nous pouvons configurer

513
00:37:21,400 --> 00:37:27,465
une autre variable ici appelée utilisateur actuel qui est du type utilisateur Firebase ici.

514
00:37:27,465 --> 00:37:31,610
Donc, cet AFAuthState est un observable auquel

515
00:37:31,610 --> 00:37:35,570
je peux m'abonner et chaque fois que cet

516
00:37:35,570 --> 00:37:38,935
AuthState change, l'AuthState garde une trace de

517
00:37:38,935 --> 00:37:42,780
l'état d'authentification de l'utilisateur si l'utilisateur est connecté ou déconnecté et si l'utilisateur est connecté,

518
00:37:42,780 --> 00:37:47,930
alors cela s'abonnera me retournera le informations utilisateur et à partir

519
00:37:47,930 --> 00:37:53,475
des informations utilisateur, nous pouvons récupérer beaucoup d'informations, y compris le nom d'affichage,

520
00:37:53,475 --> 00:37:58,475
l'e-mail, l'ID de profil, puis l'

521
00:37:58,475 --> 00:38:04,535
image d'avatar pour l'utilisateur si elle a été configurée pour les comptes spécifiques.

522
00:38:04,535 --> 00:38:07,555
Toutes ces informations nous seront fournies automatiquement par l'utilisateur.

523
00:38:07,555 --> 00:38:10,660
Ainsi, lorsque vous cliquez sur « utilisateur », puis point,

524
00:38:10,660 --> 00:38:14,445
vous verrez qu'il fournit toutes ces informations pour nous.

525
00:38:14,445 --> 00:38:16,870
Il s'agit donc d'un nom d'affichage email,

526
00:38:16,870 --> 00:38:19,835
que l'e-mail soit vérifié ou non et ainsi de suite.

527
00:38:19,835 --> 00:38:22,855
Donc, certaines des choses qui nous intéressent spécifiquement.

528
00:38:22,855 --> 00:38:29,325
URL photo qui peut être utilisé pour récupérer les informations de l'avatar pour l'utilisateur,

529
00:38:29,325 --> 00:38:32,430
ID du fournisseur qui spécifie qui

530
00:38:32,430 --> 00:38:35,755
fournit ces informations pour vous ce serait soit Facebook ID,

531
00:38:35,755 --> 00:38:43,415
Google ID et GitHub ID et ainsi de suite et des informations supplémentaires même le jeton d'actualisation.

532
00:38:43,415 --> 00:38:46,390
Donc, vous voyez un tas d'informations étant

533
00:38:46,390 --> 00:38:49,840
mis à votre disposition via l'objet utilisateur qui est

534
00:38:49,840 --> 00:38:53,285
retourné par cet Authstate lorsque vous vous abonnez à celui-ci

535
00:38:53,285 --> 00:38:57,400
et laissez-moi également attirer votre attention sur l'UID l'ID utilisateur,

536
00:38:57,400 --> 00:39:01,830
et c'est ce qui peut être utilisé pour indexer l'utilisateur dans notre application.

537
00:39:01,830 --> 00:39:05,950
C' est donc le service d'authentification de la façon dont je l'

538
00:39:05,950 --> 00:39:10,325
ai configuré pour utiliser l'authentification Firebase dans cette application.

539
00:39:10,325 --> 00:39:14,730
Donc, deux changements que je vous ai reflétés pour montrer

540
00:39:14,730 --> 00:39:19,180
comment mes services sont modifiés pour utiliser Firebase.

541
00:39:19,180 --> 00:39:23,605
La plupart des mises à jour que j'ai faites à mon application Angular sont toutes

542
00:39:23,605 --> 00:39:28,115
dans les services afin d'utiliser Firebase installé.

543
00:39:28,115 --> 00:39:31,900
Donc, à cause du bébé structuré de

544
00:39:31,900 --> 00:39:34,390
l'application Angular, les composants dépendaient simplement des

545
00:39:34,390 --> 00:39:37,330
services et les services étaient ceux que nous parlons au back-end.

546
00:39:37,330 --> 00:39:39,660
Donc, la plupart des mises à jour que j'ai faites à

547
00:39:39,660 --> 00:39:43,040
mon application Angular impliquent simplement la mise à jour

548
00:39:43,040 --> 00:39:50,660
de ces services pour utiliser le back-end de Google Firebase comme un service avec les deux modules npm,

549
00:39:50,660 --> 00:39:53,815
Firebase et AngularFireAuth ici.

550
00:39:53,815 --> 00:39:58,690
Donc, vous verrez que la plupart des mises à jour sont limitées à

551
00:39:58,690 --> 00:40:04,285
tous ces services que j'ai dans le dossier services de mon application Angular.

552
00:40:04,285 --> 00:40:06,710
Bien sûr, j'avais besoin de faire un peu d'

553
00:40:06,710 --> 00:40:09,615
ajustements minimaux dans le composant dishdetail

554
00:40:09,615 --> 00:40:15,430
et le composant d'en-tête afin de le faire fonctionner avec Firebase.

555
00:40:15,430 --> 00:40:19,485
Vous pouvez visiter rapidement le headercomponent.ts,

556
00:40:19,485 --> 00:40:25,760
le headercomponent.html et le dishdetailcomponent.tsfile pour voir comment le code

557
00:40:25,760 --> 00:40:29,210
a changé entre la version précédente

558
00:40:29,210 --> 00:40:32,070
et la version actuelle de l'application Angular,

559
00:40:32,070 --> 00:40:36,360
la version précédente, je veux dire la version que nous avons utilisée pour

560
00:40:36,360 --> 00:40:39,490
communiquer avec notre

561
00:40:39,490 --> 00:40:43,230
serveur X plus Mongo DB que nous avons utilisé dans l'exercice précédent.

562
00:40:43,230 --> 00:40:48,265
Maintenant, un autre endroit où vous me verrez faire des modifications,

563
00:40:48,265 --> 00:40:51,640
c'est intéressant, dans le service préféré.

564
00:40:51,640 --> 00:40:52,930
Dans le service favori,

565
00:40:52,930 --> 00:40:55,280
la façon dont j'ai stocké les favoris de l'utilisateur,

566
00:40:55,280 --> 00:40:58,410
est que les favoris sont une collection sur

567
00:40:58,410 --> 00:41:02,015
mon site de serveur et le favori lui-même contient des documents.

568
00:41:02,015 --> 00:41:06,550
Chaque document contient l'ID utilisateur et l'ID plat.

569
00:41:06,550 --> 00:41:09,210
Ainsi, un utilisateur particulier pourrait avoir

570
00:41:09,210 --> 00:41:13,335
plusieurs documents chacun d'eux stockant l'ID utilisateur et l'ID plat.

571
00:41:13,335 --> 00:41:20,035
Ainsi, une collection d'entre eux ensemble définira tous les favoris pour un utilisateur particulier.

572
00:41:20,035 --> 00:41:25,865
J' ai trouvé que c'est une meilleure façon d'organiser ces données dans Firebase.

573
00:41:25,865 --> 00:41:29,195
Dans notre MongoDB plus mongos,

574
00:41:29,195 --> 00:41:34,230
vous avez vu que j'avais intégré dans un tableau d'ID plat dans

575
00:41:34,230 --> 00:41:40,575
le document favoris, puis définissez le schéma préféré de cette façon.

576
00:41:40,575 --> 00:41:43,010
Ici, j'utilise

577
00:41:43,010 --> 00:41:47,395
un document séparé pour suivre chacun des favoris pour chacun des utilisateurs.

578
00:41:47,395 --> 00:41:50,295
Maintenant, parce que Firebase prend en charge les requêtes, donc,

579
00:41:50,295 --> 00:41:55,545
je peux interroger ma Firebase et extraire tous les documents qui ont les mêmes ID

580
00:41:55,545 --> 00:41:58,585
utilisateur, ce qui correspond à l'utilisateur actuellement connecté, puis

581
00:41:58,585 --> 00:42:02,405
extraire les ID de plat correspondants des favoris.

582
00:42:02,405 --> 00:42:05,250
Ensuite, j'irai interroger mon serveur

583
00:42:05,250 --> 00:42:08,475
et obtenir les informations de plat pour chacun de ces plats.

584
00:42:08,475 --> 00:42:13,325
Donc, cela implique plusieurs voyages sur le serveur afin d'obtenir

585
00:42:13,325 --> 00:42:18,680
toutes mes informations de plats préférés avant de pouvoir rendre ma liste de favoris.

586
00:42:18,680 --> 00:42:24,180
Mais, c'est la meilleure façon de faire fonctionner Firebase avec mon application Angular.

587
00:42:24,180 --> 00:42:26,945
Peut-être, à une date ultérieure,

588
00:42:26,945 --> 00:42:30,740
Firebase Cloud Firestone pourrait s'étendre pour

589
00:42:30,740 --> 00:42:34,475
permettre quelque chose comme peupler que nous avons fait avec des mongos.

590
00:42:34,475 --> 00:42:38,570
Dans ce cas, je mettrai à jour le code pour utiliser cette façon

591
00:42:38,570 --> 00:42:42,705
d'obtenir automatiquement toutes les informations sur le plat.

592
00:42:42,705 --> 00:42:48,420
Ainsi, le fardeau de la construction de ce document composé sera déplacé vers le site du serveur.

593
00:42:48,420 --> 00:42:51,740
En ce moment, mon client fait beaucoup de travail ici.

594
00:42:51,740 --> 00:42:53,795
Maintenant, quand vous allez ici,

595
00:42:53,795 --> 00:42:56,400
vous verrez que dans la méthode getFavorites,

596
00:42:56,400 --> 00:42:59,495
vous verrez comment j'accède à mes favoris ici.

597
00:42:59,495 --> 00:43:02,835
Donc, quand je fais « Getfavorites », j'

598
00:43:02,835 --> 00:43:06,220
interroge cette collection de favoris mais remarque que ici,

599
00:43:06,220 --> 00:43:12,545
je dis « ref où est cet ID utilisateur ».

600
00:43:12,545 --> 00:43:15,335
Cet ID utilisateur que j'obtiens ici.

601
00:43:15,335 --> 00:43:18,320
Donc, dans le constructeur de mon serveur préféré,

602
00:43:18,320 --> 00:43:22,855
je m'abonne à ce service Auth l'état Get Auth dans le service Auth.

603
00:43:22,855 --> 00:43:25,075
Donc, dans le service Auth si vous entrez,

604
00:43:25,075 --> 00:43:28,615
vous verrez cette méthode appelée Get Auth state ici.

605
00:43:28,615 --> 00:43:33,175
L' état Get Auth renvoie le this.authState,

606
00:43:33,175 --> 00:43:35,575
que j'ai défini juste là.

607
00:43:35,575 --> 00:43:39,760
Donc, ce sera un observable comme vous me voyez déclarer ici.

608
00:43:39,760 --> 00:43:41,800
Donc, cet observable est celui que je vais

609
00:43:41,800 --> 00:43:46,755
utiliser dans mon service préféré et puis m'abonner à cela.

610
00:43:46,755 --> 00:43:53,720
Ainsi, chaque fois que les informations de l'utilisateur changent, cela sera automatiquement reflété ici.

611
00:43:53,720 --> 00:43:59,180
Donc, vous avez vu que même dans l'application précédente, j'avais utilisé un observable,

612
00:43:59,180 --> 00:44:04,525
afin de refléter les informations de l'utilisateur dans mon composant d'en-tête.

613
00:44:04,525 --> 00:44:06,030
Type d'approche similaire,

614
00:44:06,030 --> 00:44:08,600
que j'utilise dans mon composant favoris ici,

615
00:44:08,600 --> 00:44:13,055
pour obtenir l'ID utilisateur de l'utilisateur actuellement connecté.

616
00:44:13,055 --> 00:44:16,385
Ainsi, lorsque j'interroge la collection Mes favoris,

617
00:44:16,385 --> 00:44:22,825
je vais interroger et extraire uniquement les documents où l'utilisateur correspond à cela.

618
00:44:22,825 --> 00:44:26,220
Ensuite, j'utilise seulement les changements de valeur ici.

619
00:44:26,220 --> 00:44:29,210
Donc, je ne fais que extraire tous les documents,

620
00:44:29,210 --> 00:44:34,650
que je ne me soucie pas de l'ID du document favoris lui-même en ce moment.

621
00:44:34,650 --> 00:44:37,970
Donc, je les extrait tous et les utilise.

622
00:44:37,970 --> 00:44:40,690
Si l'utilisateur n'est pas connecté et comme vous pouvez le voir,

623
00:44:40,690 --> 00:44:43,620
je lance une erreur ici avec le dicton observable,

624
00:44:43,620 --> 00:44:50,735
« aucun utilisateur connecté » c'est ce qui est affiché dans mon discours préféré là-bas.

625
00:44:50,735 --> 00:44:53,960
Maintenant, le IsFavorites est également mis à jour ici

626
00:44:53,960 --> 00:44:57,685
mais dans les IsFavorites ce que je fais est que je vais à la base de données.

627
00:44:57,685 --> 00:45:02,795
Maintenant, ici, je vais accéder à la base de données en disant,

628
00:45:02,795 --> 00:45:06,135
« DB est égal à firebase.firestore ».

629
00:45:06,135 --> 00:45:09,610
Rappelez-vous que j'importe Firebase ici,

630
00:45:09,610 --> 00:45:12,270
importer star comme Firebase ici.

631
00:45:12,270 --> 00:45:17,970
Le Firestore Angular lui-même ne me fournit pas une méthode de

632
00:45:17,970 --> 00:45:23,970
faire plusieurs requêtes composées ici.

633
00:45:23,970 --> 00:45:29,495
Le Firestore angulaire ou le feu angulaire à ne me fournit pas de faire ça.

634
00:45:29,495 --> 00:45:33,390
Donc, c'est pourquoi je dois recourir à Firebase Firestore.

635
00:45:33,390 --> 00:45:35,840
Donc, quand je dis Firebase Firestore,

636
00:45:35,840 --> 00:45:42,310
cela me donne une référence à la base de données Firestore et ensuite je peux aller dans cette base de données

637
00:45:42,310 --> 00:45:48,780
et dire « DB collection favoris » et puis je peux faire plusieurs requêtes ici.

638
00:45:48,780 --> 00:45:55,470
Donc, je dis, .where l'utilisateur est this.wheredish est l'ID plat.

639
00:45:55,470 --> 00:45:59,380
Donc, si je veux obtenir un favori spécifique.

640
00:45:59,380 --> 00:46:03,640
Pour vérifier si un plat spécifique est le favori d'un utilisateur, j'obtiens

641
00:46:03,640 --> 00:46:08,285
ce document particulier où l'utilisateur et le plat correspondent à ces deux,

642
00:46:08,285 --> 00:46:12,110
s'ils ne correspondent pas alors il reviendra avec un vide.

643
00:46:12,110 --> 00:46:16,610
Donc, que j'extrait et puis retourne cette valeur ici.

644
00:46:16,610 --> 00:46:18,900
Maintenant, puis je poste favoris,

645
00:46:18,900 --> 00:46:25,770
vous voyez comment je fais cela je dis que cette collection AFS favoris et je vais dire « ajouter ».

646
00:46:25,770 --> 00:46:29,260
Regardez le document que je stocke dans mes favoris.

647
00:46:29,260 --> 00:46:32,130
Le document lui-même contient l'ID utilisateur et l'ID plat.

648
00:46:32,130 --> 00:46:36,030
Donc, ces deux informations jointes ici et

649
00:46:36,030 --> 00:46:41,295
sinon alors il rejettera la promesse sans utilisateur connecté ici.

650
00:46:41,295 --> 00:46:44,915
De même, pour le favori de suppression que j'ai implémenté ici.

651
00:46:44,915 --> 00:46:48,735
Passez un peu de temps à parcourir ce code pour comprendre comment j'ai

652
00:46:48,735 --> 00:46:53,375
tiré parti des modules Firebase et Angular fire

653
00:46:53,375 --> 00:47:02,170
to npm afin de communiquer avec mon serveur Firebase que j'ai configuré dans l'exercice précédent.

654
00:47:02,170 --> 00:47:05,880
Avec cela, je vous ai donné un aperçu rapide de la

655
00:47:05,880 --> 00:47:10,280
façon dont vous pouvez configurer votre application Angular pour interagir avec

656
00:47:10,280 --> 00:47:13,980
Firebase back-end en tant que service et être en mesure de

657
00:47:13,980 --> 00:47:19,970
prendre en charge diverses opérations que vous avez dans votre application Angular.

658
00:47:19,970 --> 00:47:21,905
Comme je l'ai démontré précédemment,

659
00:47:21,905 --> 00:47:24,150
cette application Angular ressemble exactement à

660
00:47:24,150 --> 00:47:26,690
la version précédente de l'application Angular où nous

661
00:47:26,690 --> 00:47:31,915
utilisions notre propre version de notre serveur Express MongoDB.

662
00:47:31,915 --> 00:47:38,510
Maintenant, avec cela, je termine cet exercice particulier où j'ai illustré dans

663
00:47:38,510 --> 00:47:42,020
cette leçon sur le back-end en tant que service et également démontré

664
00:47:42,020 --> 00:47:46,630
Firebase comme un exemple d'un back-end en tant que service.