1
00:00:00,000 --> 00:00:04,708
[MUSIC]

2
00:00:04,708 --> 00:00:08,762
Dans l'exercice précédent, nous avions déjà configuré notre

3
00:00:08,762 --> 00:00:12,657
back-end Firebase en tant que service avec le nouveau projet.

4
00:00:12,657 --> 00:00:18,637
Configurez également une grande partie des données dans notre base de données, puis configurez notre stockage et

5
00:00:18,637 --> 00:00:25,410
configurez notre serveur Firebase pour agir comme le backend de notre application React.

6
00:00:25,410 --> 00:00:30,670
Dans cet exercice, nous allons examiner une version modifiée de notre application React,

7
00:00:30,670 --> 00:00:36,080
qui utilise le back-end Firebase comme un service afin d'

8
00:00:36,080 --> 00:00:42,200
obtenir les données et également stocker des informations pour les utilisateurs sur le serveur.

9
00:00:42,200 --> 00:00:46,430
En outre, nous tirons parti de la prise en charge de l'authentification

10
00:00:46,430 --> 00:00:48,510
fournie par Firebase pour authentifier les utilisateurs.

11
00:00:48,510 --> 00:00:55,434
À la fois en utilisant une approche par e-mail et mot de passe, et en utilisant également un compte Google.

12
00:00:57,091 --> 00:01:04,231
Pour commencer cet exercice, allez à un emplacement pratique sur votre ordinateur,

13
00:01:04,231 --> 00:01:09,347
puis clonez le dépôt Git donné, je

14
00:01:09,347 --> 00:01:14,950
vous ai fourni la version Firebase de notre application React.

15
00:01:14,950 --> 00:01:24,300
Donc, tapez git clone https://github.com/jmuppala/conFusion-Rea -

16
00:01:24,300 --> 00:01:27,470
CT-Firebase.git.

17
00:01:27,470 --> 00:01:30,450
Et puis clonez le dépôt Git.

18
00:01:30,450 --> 00:01:37,610
Et une fois que le dépôt Git est cloné sur votre ordinateur, puis déplacez

19
00:01:37,610 --> 00:01:47,340
dans le dossier Confusion-React-FireBase qui sera créé à ce stade.

20
00:01:47,340 --> 00:01:52,230
Et puis vous remarquerez qu'un tas de fichiers y sont déjà installés.

21
00:01:52,230 --> 00:01:56,820
Allons de l'avant et faisons une installation de fil pour installer tous les

22
00:01:56,820 --> 00:02:02,130
modules de noeud sur lesquels cette application angulaire dépend.

23
00:02:02,130 --> 00:02:07,140
Cette version installera également des modules de nœuds supplémentaires appelés Firebase.

24
00:02:07,140 --> 00:02:12,850
Je vais en expliquer un peu plus sur ces modules de noeud plus tard dans cet exercice.

25
00:02:12,850 --> 00:02:18,420
Une fois l'installation du projet terminée, ouvrez le projet dans un éditeur.

26
00:02:18,420 --> 00:02:24,290
Et puis dans le projet, allez dans le dossier source > Firebase

27
00:02:24,290 --> 00:02:26,700
, puis ouvrez le fichier config.js.

28
00:02:26,700 --> 00:02:33,220
Et dans le fichier config.js, vous verrez un ensemble de configuration Firebase

29
00:02:33,220 --> 00:02:38,950
que vous devez configurer avec votre propre configuration de serveur Firebase.

30
00:02:38,950 --> 00:02:43,970
Comme nous l'avons vu dans l'exercice précédent, nous pouvons obtenir toutes ces informations en

31
00:02:43,970 --> 00:02:49,940
cliquant sur ce bouton ici appelé Ajouter Firebase à votre application web.

32
00:02:49,940 --> 00:02:53,035
Et puis copiez ces informations

33
00:02:53,035 --> 00:02:58,162
, puis collez ces informations dans votre fichier config.js.

34
00:02:58,162 --> 00:03:03,786
Pour les remplacer par la configuration spécifique de vos serveurs Firebase pour

35
00:03:03,786 --> 00:03:06,280
toutes ces informations.

36
00:03:06,280 --> 00:03:10,844
Et une fois que cela est terminé, vous pouvez démarrer votre

37
00:03:10,844 --> 00:03:14,609
application React en tapant fil start à l'invite.

38
00:03:14,609 --> 00:03:18,331
Une fois votre application React compilée, et donc

39
00:03:18,331 --> 00:03:23,890
ici, vous verrez la page d'accueil, la page à propos, comme nous le voyons ici.

40
00:03:23,890 --> 00:03:25,596
Et le menu.

41
00:03:27,900 --> 00:03:31,570
Et la page de contact.

42
00:03:31,570 --> 00:03:33,360
Nous allons nous connecter,

43
00:03:33,360 --> 00:03:36,865
laissez-moi retourner à la page d'accueil et ensuite nous nous connecterons nous-mêmes.

44
00:03:36,865 --> 00:03:38,800
Ainsi, lorsque vous cliquez sur le bouton Connexion,

45
00:03:38,800 --> 00:03:43,430
vous verrez le formulaire typique ici avec l'e-mail et les informations de mot de passe.

46
00:03:43,430 --> 00:03:47,010
Vous verrez également un bouton initial appelé Se connecter avec Google.

47
00:03:47,010 --> 00:03:49,740
Laissez-moi donc me connecter avec mon compte Google.

48
00:03:49,740 --> 00:03:54,885
Ainsi, lorsque vous cliquez sur la connexion avec Google, il ouvrira une autre

49
00:03:54,885 --> 00:04:01,095
fenêtre de navigateur où vous serez invité à autoriser l'utilisation de votre compte Google.

50
00:04:01,095 --> 00:04:07,745
Ensuite, vous verrez, dans le coin droit, vous verrez immédiatement votre nom

51
00:04:07,745 --> 00:04:13,285
s'afficher ici, et avec le bouton de connexion maintenant transformé en un bouton de déconnexion.

52
00:04:13,285 --> 00:04:19,340
Donc, à ce stade, vous devriez être en mesure de voir vos favoris.

53
00:04:19,340 --> 00:04:22,240
Et dans ce cas, puisque nous n'avons pas de favoris, donc

54
00:04:22,240 --> 00:04:24,110
ce sera vide à ce stade.

55
00:04:24,110 --> 00:04:29,610
Laissez-moi revenir au menu, puis ajouter quelques éléments dans mes favoris.

56
00:04:29,610 --> 00:04:35,990
Donc, je vais ajouter ce plat à mes favoris, donc quand je clique sur ce plat,

57
00:04:35,990 --> 00:04:41,350
vous verrez immédiatement l'icône se transformer en un cœur rempli.

58
00:04:41,350 --> 00:04:47,597
Et laissez-moi également sélectionner un plat de plus et l'ajouter dans mes favoris.

59
00:04:47,597 --> 00:04:52,526
Annonce alors maintenant quand vous allez à mes favoris, vous verrez quelques

60
00:04:52,526 --> 00:04:57,187
plats ajoutés dans vos favoris, comme vous vous y attendez.

61
00:04:57,187 --> 00:05:02,893
Et encore une fois, vous pouvez supprimer les plats en cliquant sur la

62
00:05:02,893 --> 00:05:09,270
croix de suppression pour supprimer l'élément de votre liste de favoris, comme indiqué ici.

63
00:05:09,270 --> 00:05:14,181
Maintenant, nous pouvons également ajouter, comme vous le savez, nous pouvons aller à n'importe quel plat

64
00:05:14,181 --> 00:05:17,140
, puis ajouter des commentaires sur ce plat.

65
00:05:17,140 --> 00:05:19,317
Permettez-moi donc d'ajouter un commentaire ici.

66
00:05:25,868 --> 00:05:31,364
Et au moment où vous soumettez le commentaire, vous verrez immédiatement que

67
00:05:31,364 --> 00:05:38,562
votre commentaire sera affiché ici avec le nom de l'auteur également inclus ici.

68
00:05:38,562 --> 00:05:41,572
Et avec cette date comme indiqué ici.

69
00:05:41,572 --> 00:05:46,592
Ainsi, vous pouvez voir que la soumission de commentaires par l'utilisateur

70
00:05:46,592 --> 00:05:49,592
sera prise en charge pour n'importe quel plat spécifique.

71
00:05:49,592 --> 00:05:54,294
Donc, c'est ainsi que votre application fonctionne avec cette

72
00:05:54,294 --> 00:05:58,211
Firebase en tant que service principal.

73
00:05:58,211 --> 00:06:03,071
Maintenant, bien sûr, vous devez vous demander, comment remanions-nous notre application pour

74
00:06:03,071 --> 00:06:07,882
utiliser Firebase au lieu d'utiliser le

75
00:06:07,882 --> 00:06:12,110
serveur standard MongoDB Express que nous avons construit plus tôt ?

76
00:06:13,220 --> 00:06:18,606
Pour configurer votre application pour qu'elle communique avec le serveur Firebase,

77
00:06:18,606 --> 00:06:21,349
vous devez installer le module Firebase.

78
00:06:21,349 --> 00:06:25,964
Le module Firebase, comme vous le voyez ici, fournit l'outil et

79
00:06:25,964 --> 00:06:31,772
l'infrastructure qui vous permettent de communiquer avec le serveur Firebase.

80
00:06:31,772 --> 00:06:35,639
Et pour installer cela dans votre application,

81
00:06:35,639 --> 00:06:40,141
vous tapez le fichier install moins save firebase.

82
00:06:40,141 --> 00:06:41,893
Maintenant, comment faire usage de ceux-ci ?

83
00:06:41,893 --> 00:06:47,461
Je vais illustrer cela en vous exécutant rapidement à travers le code modifié

84
00:06:47,461 --> 00:06:53,492
où nous utilisons Firebase pour modifier l'application que nous avons développée

85
00:06:53,492 --> 00:06:59,185
précédemment pour utiliser le serveur Firebase en tant que service principal.

86
00:06:59,185 --> 00:07:04,065
Voyons rapidement notre application React modifiée pour comprendre

87
00:07:04,065 --> 00:07:08,825
comment elle a été reconfigurée pour communiquer avec notre serveur Firebase.

88
00:07:08,825 --> 00:07:11,933
Nous allons commencer notre voyage dans le fichier package.json.

89
00:07:11,933 --> 00:07:13,455
Et dans le fichier package.json,

90
00:07:13,455 --> 00:07:18,820
vous remarquerez que j'ai ajouté dans le module Firebase npm dans ce.

91
00:07:18,820 --> 00:07:24,020
Ainsi, lorsque vous clonez le référentiel Git et que vous effectuez l'installation de fil,

92
00:07:24,020 --> 00:07:27,880
le module Firebase est automatiquement installé dans votre application.

93
00:07:27,880 --> 00:07:31,810
Si vous configurez une nouvelle application React pour

94
00:07:31,810 --> 00:07:33,160
communiquer avec le serveur,

95
00:07:33,160 --> 00:07:38,850
vous devez installer explicitement le module Firebase dans votre application.

96
00:07:38,850 --> 00:07:44,880
Maintenant, après cela, vous remarquerez des changements dans le dossier Firebase.

97
00:07:44,880 --> 00:07:47,396
Ici, nous avons déjà vu le fichier de configuration.

98
00:07:47,396 --> 00:07:51,410
L' autre fichier que vous remarquerez ici s'appelle firebase.js.

99
00:07:51,410 --> 00:07:55,227
Maintenant, c'est là que nous configurons notre application pour communiquer avec

100
00:07:55,227 --> 00:07:56,530
le serveur Firebase.

101
00:07:56,530 --> 00:07:58,744
Donc nous importons la config ici.

102
00:07:58,744 --> 00:08:01,786
Et puis importer firebase à partir de firebase.

103
00:08:01,786 --> 00:08:06,624
Et puis vous initialisez l'application ici en fournissant la configuration à la Firebase,

104
00:08:06,624 --> 00:08:10,838
donc c'est là que vous fournissez toutes les informations de configuration afin

105
00:08:10,838 --> 00:08:14,835
que votre client puisse communiquer avec le serveur Firebase.

106
00:08:14,835 --> 00:08:19,738
En outre, j'exporte quelques-unes de ces exportations d'

107
00:08:19,738 --> 00:08:23,280
ici appelées auth, fireauth et ainsi de suite.

108
00:08:23,280 --> 00:08:27,915
Ceux-ci que je vais utiliser dans les créateurs d'action

109
00:08:27,915 --> 00:08:31,524
afin de communiquer avec mon serveur Firebase.

110
00:08:33,371 --> 00:08:40,580
Maintenant, après cela, les principales modifications seront dans le fichier ActionCreators.

111
00:08:40,580 --> 00:08:46,222
Maintenant, je n'ai pas ajouté de nouvelles actions, mais à la place toute la communication

112
00:08:46,222 --> 00:08:51,866
avec le serveur est maintenant modifiée pour communiquer avec notre serveur Firebase.

113
00:08:51,866 --> 00:08:55,478
Donc, au lieu d'utiliser le fetch, comme nous l'

114
00:08:55,478 --> 00:08:57,979
avons fait plus tôt, nous allons maintenant utiliser firestore.

115
00:08:57,979 --> 00:09:02,466
Donc, comme vous pouvez le voir, j'ai importé l'auth, firestore,

116
00:09:02,466 --> 00:09:07,237
fireauth et firebasestore à partir du module firebase que

117
00:09:07,237 --> 00:09:11,260
j'ai configuré plus tôt dans le dossier firebase.

118
00:09:11,260 --> 00:09:16,170
Et puis tout cela me permettra de communiquer avec mon serveur Firebase.

119
00:09:16,170 --> 00:09:20,320
Afin de récupérer une collection de ma Firebase,

120
00:09:20,320 --> 00:09:25,050
nous disons simplement firestore.collection, puis fournissons le nom de la collection.

121
00:09:25,050 --> 00:09:29,250
Ensuite, vous pouvez ajouter à la collection en disant, ajouter, comme vous pouvez le voir ici,

122
00:09:29,250 --> 00:09:37,570
qui prend l'élément spécifique que vous ajoutez dans votre collection là.

123
00:09:37,570 --> 00:09:40,110
C' est donc le document que nous ajoutons à notre collection.

124
00:09:40,110 --> 00:09:43,500
Donc, c'est pour le commentaire de la publication, comme vous pouvez le voir ici.

125
00:09:43,500 --> 00:09:48,270
Et lorsque vous publiez cela, vous recevrez un DocRef,

126
00:09:48,270 --> 00:09:51,260
qui est la référence au document,

127
00:09:51,260 --> 00:09:56,570
que vous pouvez ensuite utiliser pour aller chercher le document à partir de votre serveur.

128
00:09:56,570 --> 00:10:00,180
Maintenant, la façon dont Firebase fonctionne est qu'elle fournira

129
00:10:00,180 --> 00:10:04,700
l'ID séparément du contenu réel des documents.

130
00:10:04,700 --> 00:10:10,550
Firebase conserve donc l'ID et les données du document lui-même séparément.

131
00:10:10,550 --> 00:10:15,450
Donc ici, je dois combiner explicitement les deux ensemble dans

132
00:10:15,450 --> 00:10:18,260
un objet JavaScript ici, appelé commentaire ici.

133
00:10:18,260 --> 00:10:23,450
Donc, comme vous le voyez dans le document, donc vous remarquez que lorsque j'

134
00:10:23,450 --> 00:10:29,710
insère un élément dans une collection, il renvoie un DocRef ici.

135
00:10:29,710 --> 00:10:34,180
Et à partir du DocRef, je peux obtenir l'ID du document.

136
00:10:34,180 --> 00:10:36,610
Et donc ce que je fais ici, c'est que je vais

137
00:10:36,610 --> 00:10:39,464
chercher le document correspondant ici.

138
00:10:39,464 --> 00:10:44,305
Et puis une fois que le document est récupéré, maintenant, bien sûr, le document devrait exister,

139
00:10:44,305 --> 00:10:49,015
donc cela devrait toujours être vrai, parce que nous venons d'insérer le document.

140
00:10:49,015 --> 00:10:53,032
Mais juste par souci d'exhaustivité, je fais une vérification explicite pour cela.

141
00:10:53,032 --> 00:10:57,576
Et puis après cela, les données qui sont dans le document sont

142
00:10:57,576 --> 00:11:01,822
obtenues en disant doc.data, comme vous le voyez ici.

143
00:11:01,822 --> 00:11:05,658
Et puis l'identifiant du document est obtenu par doc.id.

144
00:11:05,658 --> 00:11:07,073
Donc, ces deux sont séparés.

145
00:11:07,073 --> 00:11:12,708
Mais dans notre code React, nous avons toujours stocké l'id et

146
00:11:12,708 --> 00:11:20,530
les données ensemble comme un seul document JSON ici, ou objet JavaScript ici.

147
00:11:20,530 --> 00:11:23,340
C' est pourquoi je combine les deux ensemble

148
00:11:23,340 --> 00:11:26,800
en un seul objet JavaScript ici en faisant cela.

149
00:11:26,800 --> 00:11:30,490
Vous me verrez à plusieurs reprises faire cela pour, disons par exemple,

150
00:11:30,490 --> 00:11:35,510
pour des promotions audacieuses et ainsi de suite, également dans les ActionCreators.

151
00:11:35,510 --> 00:11:41,640
Et puis après cela, j'ajoute dans le commentaire dans mon magasin Redux ici,

152
00:11:41,640 --> 00:11:44,250
et le reste du code reste en tant que tel.

153
00:11:44,250 --> 00:11:47,016
De même, pour aller chercher des plats,

154
00:11:47,016 --> 00:11:52,980
vous verrez comment nous récupérons plusieurs plats de la Firebase.

155
00:11:52,980 --> 00:11:58,330
Donc, nous voyons firestore.collection plats obtenir et obtenir les plats.

156
00:11:58,330 --> 00:12:02,520
Maintenant, quand vous obtenez cela, alors cela me donnera une valeur d'instantané,

157
00:12:02,520 --> 00:12:06,680
qui est l'instantané de l'état actuel de cette collection, et

158
00:12:06,680 --> 00:12:10,690
à partir de cela, je dois entrer et récupérer chaque plat.

159
00:12:10,690 --> 00:12:15,400
Et puis je reconstruit ma gamme de plats ici.

160
00:12:15,400 --> 00:12:18,990
Maintenant, remarquez que, comme je l'ai dit, l'id et les données sont séparés, donc

161
00:12:18,990 --> 00:12:23,495
je dois les combiner ensemble, parce que c'est la façon dont j'utilise les données dans mon

162
00:12:23,495 --> 00:12:27,660
application React, donc je le pousse dans le tableau de plats.

163
00:12:27,660 --> 00:12:32,980
Et puis finalement retourner les plats qui seront ensuite insérés dans mon

164
00:12:32,980 --> 00:12:34,380
magasin Redux ici.

165
00:12:34,380 --> 00:12:39,642
Ce type de modifications a donc été apporté dans ActionCreators.

166
00:12:39,642 --> 00:12:45,843
Maintenant, le processus de connexion et de déconnexion sera géré ci-dessous.

167
00:12:45,843 --> 00:12:51,445
Donc, pour la connexion, l'authentification que nous avons importée à partir de

168
00:12:51,445 --> 00:12:56,372
la Firebase, l'authentification est celle qui me permet de faire la connexion et la déconnexion.

169
00:12:56,372 --> 00:12:59,363
Donc, si vous vous connectez en utilisant e-mail et mot de passe,

170
00:12:59,363 --> 00:13:03,940
il fournit avec cette méthode appelée SigninWithEmailAndPassword.

171
00:13:03,940 --> 00:13:10,250
Et puis vous fournissez l'e-mail et le mot de passe comme les deux paramètres ici.

172
00:13:10,250 --> 00:13:14,010
Et puis cela vous permettra de vous connecter.

173
00:13:14,010 --> 00:13:20,985
Et lorsque vous vous connectez, l'auth fournit cet objet appelé CurrentUser sur l'authentification.

174
00:13:20,985 --> 00:13:26,455
Donc, vous obtenez les informations de l'utilisateur en disant Auth.CurrentUser ici.

175
00:13:26,455 --> 00:13:31,235
Et aussi je stocke les informations de l'utilisateur dans ma base de données.

176
00:13:31,235 --> 00:13:33,879
Maintenant, je ne suis pas explicitement le suivi de jeton et de

177
00:13:33,879 --> 00:13:37,945
choses comme ça parce que cela est automatiquement suivi par auth pour moi,

178
00:13:37,945 --> 00:13:40,606
qui est fourni par le module Firebase npm.

179
00:13:40,606 --> 00:13:43,723
Donc, je tire juste parti de cela pour suivre l'utilisation actuelle.

180
00:13:43,723 --> 00:13:49,078
Si l'utilisateur actuel est nul, alors je sais que mon client

181
00:13:49,078 --> 00:13:53,840
n'a aucun utilisateur connecté au serveur.

182
00:13:53,840 --> 00:13:59,510
Et de même, pour déconnecter l'utilisateur, je dis simplement Auth.Signout.

183
00:13:59,510 --> 00:14:04,370
Maintenant encore, la documentation sur l'utilisation du

184
00:14:04,370 --> 00:14:09,060
module npm Filebase est disponible dans la documentation Firebase.

185
00:14:09,060 --> 00:14:14,238
Ainsi, vous pouvez facilement rechercher cela pour comprendre comment tirer parti

186
00:14:14,238 --> 00:14:18,993
de Firebase pour utiliser toutes ces différentes fonctions

187
00:14:18,993 --> 00:14:23,443
qui sont disponibles à partir du module Firebase npm.

188
00:14:23,443 --> 00:14:27,999
Aussi, pour les favoris, nous publions soit un favori et

189
00:14:27,999 --> 00:14:32,454
alors vous devez poster des éléments, de sorte que vous diriez ajouter, et

190
00:14:32,454 --> 00:14:36,333
quand vous avez besoin d'obtenir un article, vous direz obtenir.

191
00:14:36,333 --> 00:14:41,455
Et vous pouvez même obtenir un élément à partir d'un document spécifique dans les collections.

192
00:14:41,455 --> 00:14:45,245
Si vous voulez un document spécifique dans la collection, vous direz .doc.

193
00:14:45,245 --> 00:14:49,015
Et puis vous indiquez l'identifiant du document ici.

194
00:14:49,015 --> 00:14:51,585
C' est ainsi que vous pouvez obtenir un document spécifique.

195
00:14:53,465 --> 00:14:56,265
Supprimez également les favoris, et récupérez les favoris et ainsi de suite.

196
00:14:56,265 --> 00:15:01,640
Maintenant, pour que les favoris soient stockés dans ma Firebase,

197
00:15:01,640 --> 00:15:09,100
les favoris sont stockés comme l'ID utilisateur et l'ID plat ici.

198
00:15:09,100 --> 00:15:13,680
Maintenant, Firestore lui-même n'a aucun moyen de remplir les

199
00:15:13,680 --> 00:15:15,800
informations du plat dans l'ID du plat.

200
00:15:15,800 --> 00:15:21,214
Donc, je vais juste chercher toutes les informations de plat,

201
00:15:21,214 --> 00:15:27,694
donc c'est chaque favori est une paire, utilisateur et paire d'ID plat.

202
00:15:27,694 --> 00:15:30,431
Donc je vais juste chercher ça dans mes favoris ici.

203
00:15:30,431 --> 00:15:35,859
Mais cela signifie aussi que j'ai besoin de modifier mon composant favoris afin

204
00:15:35,859 --> 00:15:40,091
qu'il puisse utiliser l'ID plat, puis indexer dans les plats qui

205
00:15:40,091 --> 00:15:45,560
sont stockés dans mon magasin Redux, et obtenir les informations de plat.

206
00:15:45,560 --> 00:15:49,194
Ou l'alternative serait d'aller sur le serveur et ensuite récupérer les informations.

207
00:15:49,194 --> 00:15:53,560
Mais puisque j'ai déjà les données sur les plats dans mon magasin Redux,

208
00:15:53,560 --> 00:15:58,234
parce que j'ai déjà fait les plats chercher pour récupérer toutes les

209
00:15:58,234 --> 00:15:59,474
informations sur les plats.

210
00:15:59,474 --> 00:16:05,492
Je vais juste directement dans l'objet vaisselle dans mon Redux déchiré et

211
00:16:05,492 --> 00:16:08,190
chercher cette information.

212
00:16:08,190 --> 00:16:12,250
Donc, cela signifie également qu'il y a des modifications au composant principal.

213
00:16:12,250 --> 00:16:18,894
Dans le composant principal, vous remarqueriez que lorsque je fais le favori ici pour

214
00:16:18,894 --> 00:16:25,343
le détail du plat, je devrais simplement comparer le plat à ce disHID.

215
00:16:25,343 --> 00:16:29,188
Donc, le plat ici dans mon favori est le DisHID lui-même, donc

216
00:16:29,188 --> 00:16:31,540
j'ai juste besoin de faire la comparaison.

217
00:16:31,540 --> 00:16:35,334
Il y aura donc un changement mineur à cette ligne dans le DisHID.

218
00:16:35,334 --> 00:16:39,503
Et aussi, vous remarquerez que lorsque j'appelle les favoris,

219
00:16:39,503 --> 00:16:42,786
en plus de fournir leurs favoris,

220
00:16:42,786 --> 00:16:47,322
je fournit également les plats comme l'un des accessoires pour mes favoris.

221
00:16:47,322 --> 00:16:51,711
C' est donc un autre changement que vous remarquerez dans le composant principal.

222
00:16:51,711 --> 00:16:54,990
Et de même, dans le composant favori,

223
00:16:54,990 --> 00:16:59,996
vous remarquerez qu'à l'intérieur du composant favori ci-dessous,

224
00:16:59,996 --> 00:17:04,933
vous remarquerez que, lorsque je rende le composant favori.

225
00:17:04,933 --> 00:17:09,761
Puis, juste ici dans cette fonction ici, const favoris,

226
00:17:09,761 --> 00:17:14,113
ce que je fais est que je vais dans les plats favoris,

227
00:17:14,113 --> 00:17:19,338
plats est un tableau de tous les DisHID ici, donc je mappe à travers cela.

228
00:17:19,338 --> 00:17:23,591
Alors regardez chaque DisHID, puis à partir des plats,

229
00:17:23,591 --> 00:17:27,545
j'ai filtré ce plat particulier.

230
00:17:27,545 --> 00:17:29,484
Et puis obtenu le DisHID, donc

231
00:17:29,484 --> 00:17:33,023
ici vous me verrez en utilisant le filtre de tableau JavaScript ici.

232
00:17:33,023 --> 00:17:36,419
Il filtrera cette information spécifique du plat

233
00:17:36,419 --> 00:17:38,687
, puis rendra ce plat particulier.

234
00:17:38,687 --> 00:17:43,415
Donc, c'est un travail supplémentaire que je dois faire dans mon

235
00:17:43,415 --> 00:17:48,840
composant préféré afin de rendre chacun des plats là-bas.

236
00:17:48,840 --> 00:17:55,900
Donc, ce genre de modifications mineures, vous remarquerez dans quelques composants, en

237
00:17:55,900 --> 00:17:59,840
particulier le détail du plat, le favori et le composant principal.

238
00:17:59,840 --> 00:18:05,410
C' est là que quelques modifications mineures ont été apportées afin de faciliter l'

239
00:18:05,410 --> 00:18:09,980
application React pour pouvoir tirer parti du serveur Firebase.

240
00:18:09,980 --> 00:18:12,790
Voici donc un aperçu rapide de la façon dont

241
00:18:12,790 --> 00:18:17,870
mon application React a été modifiée pour communiquer avec mon serveur Firebase.

242
00:18:17,870 --> 00:18:23,257
Maintenant, comme avec Angular, nous avions aussi l'Angularfire, qui

243
00:18:23,257 --> 00:18:29,680
nous fournissait un moyen d'exploiter avec Firebase pour communiquer avec le serveur.

244
00:18:29,680 --> 00:18:35,659
React n'a pas de pareille contrepartie, donc j'utilise directement le

245
00:18:35,659 --> 00:18:41,472
module Firebase npm qui fournit la base de base pour accéder au serveur Firebase.

246
00:18:41,472 --> 00:18:46,165
Et puis tirer parti des fonctions qu'il fournit pour communiquer avec mon

247
00:18:46,165 --> 00:18:47,382
serveur Firebase.

248
00:18:47,382 --> 00:18:52,506
Passez un peu de temps à parcourir ce code pour comprendre comment

249
00:18:52,506 --> 00:18:57,534
j'ai tiré parti des modules Firebase npm afin de communiquer

250
00:18:57,534 --> 00:19:03,090
avec mon serveur Firebase que j'ai configuré dans l'exercice précédent.

251
00:19:03,090 --> 00:19:08,293
Avec cela, je vous ai donné un aperçu rapide de la façon dont vous pouvez configurer votre

252
00:19:08,293 --> 00:19:13,957
application React pour interagir avec Firebase back-end en tant que service,

253
00:19:13,957 --> 00:19:20,012
puis être en mesure de prendre en charge diverses opérations que vous avez dans votre application.

254
00:19:20,012 --> 00:19:24,632
Maintenant, avec cela, je termine cet exercice particulier où j'ai

255
00:19:24,632 --> 00:19:28,758
illustré dans cette leçon sur le back-end en tant que service et

256
00:19:28,758 --> 00:19:33,645
également démontré Firebase comme un exemple d'un back-end en tant que service.

257
00:19:33,645 --> 00:19:36,995
[ MUSIQUE]