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

2
00:00:04,708 --> 00:00:08,762
In der vorherigen Übung hatten wir bereits unser

3
00:00:08,762 --> 00:00:12,657
Firebase-Back-End als Service mit dem neuen Projekt konfiguriert.

4
00:00:12,657 --> 00:00:18,637
Richten Sie auch viele Daten in unserer Datenbank ein und richten Sie dann unseren Speicher ein und

5
00:00:18,637 --> 00:00:25,410
konfigurieren Sie unseren Firebase-Server so, dass er als Backend für unsere React-Anwendung fungiert.

6
00:00:25,410 --> 00:00:30,670
In dieser Übung betrachten wir eine modifizierte Version unserer React-Anwendung,

7
00:00:30,670 --> 00:00:36,080
die das Firebase-Back-End als Dienst nutzt, um

8
00:00:36,080 --> 00:00:42,200
die Daten zu erhalten und auch Informationen für Benutzer auf dem Server zu speichern.

9
00:00:42,200 --> 00:00:46,430
Außerdem nutzen wir die Authentifizierungsunterstützung, die Firebase

10
00:00:46,430 --> 00:00:48,510
zur Authentifizierung von Benutzern bietet.

11
00:00:48,510 --> 00:00:55,434
Sowohl mit einem E-Mail- und Passwortansatz als auch mit einem Google-Konto.

12
00:00:57,091 --> 00:01:04,231
Um mit dieser Übung zu beginnen, gehen Sie zu einem geeigneten Speicherort auf Ihrem Computer,

13
00:01:04,231 --> 00:01:09,347
und klonen Sie dann das angegebene Git-Repository. Ich habe

14
00:01:09,347 --> 00:01:14,950
Ihnen die Firebase-Version unserer React-Anwendung zur Verfügung gestellt.

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

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

17
00:01:27,470 --> 00:01:30,450
Und dann klonen Sie das Git-Repository.

18
00:01:30,450 --> 00:01:37,610
Und sobald das Git-Repository auf Ihren Computer geklont wurde, wechseln Sie

19
00:01:37,610 --> 00:01:47,340
in den Confusion-React-Firebase-Ordner, der zu diesem Zeitpunkt erstellt wird.

20
00:01:47,340 --> 00:01:52,230
Und dann würden Sie bemerken, dass dort bereits eine Reihe von Dateien installiert sind.

21
00:01:52,230 --> 00:01:56,820
Lassen Sie uns voran und machen Sie eine Garninstallation, um alle

22
00:01:56,820 --> 00:02:02,130
Knotenmodule zu installieren, von denen diese Angular-Anwendung abhängig ist.

23
00:02:02,130 --> 00:02:07,140
Diese Version installiert auch zusätzliche Knotenmodule namens Firebase.

24
00:02:07,140 --> 00:02:12,850
Ich werde später in dieser Übung etwas mehr über diese Knotenmodule erklären.

25
00:02:12,850 --> 00:02:18,420
Sobald die Projektinstallation abgeschlossen ist, öffnen Sie das Projekt in einem Editor.

26
00:02:18,420 --> 00:02:24,290
Und dann im Projekt, gehen Sie in den Ordner „Quelle“ > „Firebase“ und

27
00:02:24,290 --> 00:02:26,700
öffnen Sie dann die Datei „config.js“.

28
00:02:26,700 --> 00:02:33,220
Und in der Datei config.js sehen Sie eine Reihe von Firebase-Konfigurationen

29
00:02:33,220 --> 00:02:38,950
, die Sie mit Ihrer eigenen Firebase-Serverkonfiguration einrichten müssen.

30
00:02:38,950 --> 00:02:43,970
Wie wir in der vorherigen Übung gesehen haben, können wir alle diese Informationen erhalten, wenn wir

31
00:02:43,970 --> 00:02:49,940
auf diese Schaltfläche klicken hier genannt Firebase zu Ihrer Web-App hinzufügen.

32
00:02:49,940 --> 00:02:53,035
Kopieren Sie dann diese Informationen und

33
00:02:53,035 --> 00:02:58,162
fügen Sie diese Informationen in Ihre Datei config.js ein.

34
00:02:58,162 --> 00:03:03,786
Um diese durch Ihre spezielle Firebase-Serverkonfiguration für

35
00:03:03,786 --> 00:03:06,280
all diese Informationen zu ersetzen.

36
00:03:06,280 --> 00:03:10,844
Und sobald das abgeschlossen ist, können Sie Ihre

37
00:03:10,844 --> 00:03:14,609
React-Anwendung starten, indem Sie garn start an der Eingabeaufforderung eingeben.

38
00:03:14,609 --> 00:03:18,331
Sobald Ihre React-Anwendung kompiliert ist, und so

39
00:03:18,331 --> 00:03:23,890
hier würden Sie die Homepage sehen, die über Seite, wie wir hier sehen.

40
00:03:23,890 --> 00:03:25,596
Und die Speisekarte.

41
00:03:27,900 --> 00:03:31,570
Und die Kontaktseite.

42
00:03:31,570 --> 00:03:33,360
Loggen wir uns ein,

43
00:03:33,360 --> 00:03:36,865
lassen Sie mich zurück zur Homepage gehen und dann loggen wir uns ein.

44
00:03:36,865 --> 00:03:38,800
Wenn Sie also auf die Login-Schaltfläche klicken,

45
00:03:38,800 --> 00:03:43,430
sehen Sie hier das typische Formular mit der E-Mail und den Passwort-Informationen.

46
00:03:43,430 --> 00:03:47,010
Sie sehen auch eine erste Schaltfläche mit dem Namen Login with Google.

47
00:03:47,010 --> 00:03:49,740
Also lassen Sie mich mit meinem Google-Konto einloggen.

48
00:03:49,740 --> 00:03:54,885
Wenn Sie also auf Login with Google klicken, öffnet sich ein weiteres

49
00:03:54,885 --> 00:04:01,095
Browserfenster, in dem Sie aufgefordert werden, Ihr Google-Konto zu autorisieren.

50
00:04:01,095 --> 00:04:07,745
Dann sehen Sie, in der rechten Ecke, sehen Sie sofort Ihren Namen

51
00:04:07,745 --> 00:04:13,285
hier angezeigt wird, und mit der Login-Button wird nun in einen Logout-Button umgewandelt.

52
00:04:13,285 --> 00:04:19,340
Also, an dieser Stelle sollten Sie in der Lage sein, Ihre Favoriten zu sehen.

53
00:04:19,340 --> 00:04:22,240
Und in diesem Fall, da wir keine Favoriten haben, so

54
00:04:22,240 --> 00:04:24,110
wird es an dieser Stelle leer sein.

55
00:04:24,110 --> 00:04:29,610
Ich gehe zurück zum Menü und füge dann ein paar Elemente zu meinen Favoriten hinzu.

56
00:04:29,610 --> 00:04:35,990
Also werde ich dieses Gericht zu meinen Favoriten hinzufügen, also wenn ich auf dieses Gericht klicke,

57
00:04:35,990 --> 00:04:41,350
wirst du sofort sehen, dass das Symbol zu einem gefüllten Herzen wird.

58
00:04:41,350 --> 00:04:47,597
Und lassen Sie mich auch noch ein Gericht auswählen und es zu meinen Favoriten hinzufügen.

59
00:04:47,597 --> 00:04:52,526
Ad dann jetzt, wenn Sie zu den meinen Favoriten gehen, werden Sie ein paar

60
00:04:52,526 --> 00:04:57,187
Gerichte in Ihre Favoriten hinzugefügt sehen, wie Sie erwarten würden.

61
00:04:57,187 --> 00:05:02,893
Und wieder können Sie die Gerichte löschen, indem Sie auf das

62
00:05:02,893 --> 00:05:09,270
Löschkreuz klicken, um das Element aus Ihrer Favoritenliste zu entfernen, wie hier gezeigt.

63
00:05:09,270 --> 00:05:14,181
Jetzt können wir auch hinzufügen, wie Sie erkennen, können wir zu jedem Gericht gehen und

64
00:05:14,181 --> 00:05:17,140
dann Kommentare zu diesem Gericht hinzufügen.

65
00:05:17,140 --> 00:05:19,317
Also lassen Sie mich hier einen Kommentar hinzufügen.

66
00:05:25,868 --> 00:05:31,364
Und sobald Sie den Kommentar einreichen, werden Sie sofort sehen, dass

67
00:05:31,364 --> 00:05:38,562
Ihr Kommentar hier mit dem Namen des Autors angezeigt wird.

68
00:05:38,562 --> 00:05:41,572
Und mit diesem Datum, wie hier gezeigt.

69
00:05:41,572 --> 00:05:46,592
So können Sie sehen, dass die Benutzereinreichung von Kommentaren

70
00:05:46,592 --> 00:05:49,592
für jedes bestimmte Gericht unterstützt wird.

71
00:05:49,592 --> 00:05:54,294
So funktioniert Ihre Anwendung mit dieser

72
00:05:54,294 --> 00:05:58,211
Firebase als Back-End als Service.

73
00:05:58,211 --> 00:06:03,071
Nun, natürlich müssen Sie sich fragen, wie wir unsere Anwendung neu gestalten, um

74
00:06:03,071 --> 00:06:07,882
Firebase zu nutzen, anstatt den Standard

75
00:06:07,882 --> 00:06:12,110
Express MongoDB Server zu verwenden, den wir zuvor erstellt haben?

76
00:06:13,220 --> 00:06:18,606
Um Ihre Anwendung für die Kommunikation mit dem Firebase-Server zu konfigurieren,

77
00:06:18,606 --> 00:06:21,349
müssen Sie das Firebase-Modul installieren.

78
00:06:21,349 --> 00:06:25,964
Das Firebase-Modul stellt, wie Sie hier sehen, das Tool und die

79
00:06:25,964 --> 00:06:31,772
Infrastruktur bereit, mit denen Sie mit dem Firebase-Server kommunizieren können.

80
00:06:31,772 --> 00:06:35,639
Und um dies in Ihrer Anwendung zu installieren,

81
00:06:35,639 --> 00:06:40,141
geben Sie das install minus save firebase ein.

82
00:06:40,141 --> 00:06:41,893
Nun, wie nutzt man diese zu machen?

83
00:06:41,893 --> 00:06:47,461
Ich werde das veranschaulichen, indem Sie schnell durch den modifizierten Code laufen,

84
00:06:47,461 --> 00:06:53,492
wo wir Firebase verwenden, um die Anwendung zu modifizieren, die wir

85
00:06:53,492 --> 00:06:59,185
zuvor entwickelt haben, um den Firebase-Server als Back-End als Service zu nutzen.

86
00:06:59,185 --> 00:07:04,065
Lassen Sie uns einen kurzen Rundgang durch unsere modifizierte React-Anwendung machen, um zu verstehen,

87
00:07:04,065 --> 00:07:08,825
wie sie neu konfiguriert wurde, um mit unserem Firebase-Server zu kommunizieren.

88
00:07:08,825 --> 00:07:11,933
Wir beginnen unsere Reise in package.json Datei.

89
00:07:11,933 --> 00:07:13,455
Und in der package.json-Datei

90
00:07:13,455 --> 00:07:18,820
werden Sie feststellen, dass ich das Firebase npm-Modul dazu hinzugefügt habe.

91
00:07:18,820 --> 00:07:24,020
Wenn Sie also das Git-Repository klonen und die Garn-Installation durchführen,

92
00:07:24,020 --> 00:07:27,880
wird das Firebase-Modul automatisch in Ihre Anwendung installiert.

93
00:07:27,880 --> 00:07:31,810
Wenn Sie eine neue React-Anwendung für die

94
00:07:31,810 --> 00:07:33,160
Kommunikation mit dem Server konfiguriert haben,

95
00:07:33,160 --> 00:07:38,850
müssen Sie das Firebase-Modul explizit in Ihrer Anwendung installieren.

96
00:07:38,850 --> 00:07:44,880
Danach werden Sie Änderungen im Firebase-Ordner bemerken.

97
00:07:44,880 --> 00:07:47,396
Hier haben wir bereits die Konfigurationsdatei gesehen.

98
00:07:47,396 --> 00:07:51,410
Die andere Datei, die Sie hier bemerken werden, heißt firebase.js.

99
00:07:51,410 --> 00:07:55,227
Jetzt konfigurieren wir unsere Anwendung, um mit

100
00:07:55,227 --> 00:07:56,530
dem Firebase-Server zu kommunizieren.

101
00:07:56,530 --> 00:07:58,744
Also importieren wir die Konfiguration hier.

102
00:07:58,744 --> 00:08:01,786
Und dann Firebase aus Firebase importieren.

103
00:08:01,786 --> 00:08:06,624
Und dann starten Sie die App hier, indem Sie die Konfiguration an die Firebase übergeben,

104
00:08:06,624 --> 00:08:10,838
also geben Sie hier alle Konfigurationsinformationen an

105
00:08:10,838 --> 00:08:14,835
, damit Ihr Client mit dem Firebase-Server kommunizieren kann.

106
00:08:14,835 --> 00:08:19,738
Darüber hinaus exportiere ich einige dieser Exporte von

107
00:08:19,738 --> 00:08:23,280
hier genannt auth, fireauth und so weiter.

108
00:08:23,280 --> 00:08:27,915
Diese werde ich in den Action-Erstellern verwenden,

109
00:08:27,915 --> 00:08:31,524
um mit meinem Firebase Server zu kommunizieren.

110
00:08:33,371 --> 00:08:40,580
Danach befinden sich die wichtigsten Änderungen in der ActionCreators-Datei.

111
00:08:40,580 --> 00:08:46,222
Jetzt habe ich keine neuen Aktionen hinzugefügt, sondern die gesamte Kommunikation

112
00:08:46,222 --> 00:08:51,866
mit dem Server wird nun geändert, um mit unserem Firebase Server zu kommunizieren.

113
00:08:51,866 --> 00:08:55,478
Anstatt den Fetch zu verwenden, wie wir es früher getan

114
00:08:55,478 --> 00:08:57,979
haben, werden wir jetzt firestore verwenden.

115
00:08:57,979 --> 00:09:02,466
Wie Sie sehen können, habe ich die auth, firestore,

116
00:09:02,466 --> 00:09:07,237
fireauth und firebasestore aus dem Firebase-Modul importiert, das

117
00:09:07,237 --> 00:09:11,260
ich zuvor im Firebase-Ordner eingerichtet habe.

118
00:09:11,260 --> 00:09:16,170
Und dann wird es mir ermöglichen, mit meinem Firebase-Server zu kommunizieren.

119
00:09:16,170 --> 00:09:20,320
Um eine Sammlung von meiner Firebase zu holen,

120
00:09:20,320 --> 00:09:25,050
sagen wir einfach firestore.collection und geben dann den Namen der Sammlung an.

121
00:09:25,050 --> 00:09:29,250
Und dann können Sie der Sammlung hinzufügen, indem Sie sagen, hinzufügen, wie Sie hier sehen können,

122
00:09:29,250 --> 00:09:37,570
was das spezifische Element, das Sie hinzufügen, in Ihre Sammlung nimmt.

123
00:09:37,570 --> 00:09:40,110
Das ist also das Dokument, das wir unserer Sammlung hinzufügen.

124
00:09:40,110 --> 00:09:43,500
Dies ist also für den Post-Kommentar, wie Sie hier sehen können.

125
00:09:43,500 --> 00:09:48,270
Und wenn Sie das posten, dann werden Sie mit einem DocRef geliefert,

126
00:09:48,270 --> 00:09:51,260
das ist der Verweis auf

127
00:09:51,260 --> 00:09:56,570
das Dokument, mit dem Sie dann das Dokument von Ihrem Server abrufen können.

128
00:09:56,570 --> 00:10:00,180
Die Funktionsweise von Firebase besteht nun darin, dass

129
00:10:00,180 --> 00:10:04,700
die ID getrennt vom tatsächlichen Inhalt der Dokumente bereitgestellt wird.

130
00:10:04,700 --> 00:10:10,550
Firebase speichert also die ID und die Dokumentdaten selbst getrennt.

131
00:10:10,550 --> 00:10:15,450
Also hier muss ich die beiden hier explizit zu

132
00:10:15,450 --> 00:10:18,260
einem JavaScript-Objekt kombinieren, das hier als Kommentar bezeichnet wird.

133
00:10:18,260 --> 00:10:23,450
Wie Sie aus dem Dokument sehen, so dass Sie feststellen, dass, wenn ich

134
00:10:23,450 --> 00:10:29,710
ein Element in eine Sammlung einfüge, es hier einen DocRef zurückgibt.

135
00:10:29,710 --> 00:10:34,180
Und aus dem DocRef kann ich die ID des Dokuments bekommen.

136
00:10:34,180 --> 00:10:36,610
Und was ich hier mache, ist, dass ich

137
00:10:36,610 --> 00:10:39,464
das entsprechende Dokument hier abhole.

138
00:10:39,464 --> 00:10:44,305
Und dann, sobald das Dokument abgerufen wurde, sollte jetzt natürlich das Dokument existieren,

139
00:10:44,305 --> 00:10:49,015
also sollte das immer wahr sein, weil wir gerade das Dokument eingefügt haben.

140
00:10:49,015 --> 00:10:53,032
Aber nur der Vollständigkeit halber mache ich eine explizite Prüfung dafür.

141
00:10:53,032 --> 00:10:57,576
Und danach werden die Daten, die sich im Dokument befinden,

142
00:10:57,576 --> 00:11:01,822
erhalten, indem doc.data gesagt wird, wie Sie hier sehen.

143
00:11:01,822 --> 00:11:05,658
Und dann wird die ID des Dokuments von doc.id erhalten,

144
00:11:05,658 --> 00:11:07,073
also sind diese beiden getrennt.

145
00:11:07,073 --> 00:11:12,708
Aber innerhalb unseres React-Codes haben wir

146
00:11:12,708 --> 00:11:20,530
hier immer die ID und die Daten zusammen als einzelnes JSON-Dokument oder JavaScript-Objekt gespeichert.

147
00:11:20,530 --> 00:11:23,340
Deshalb kombiniere ich

148
00:11:23,340 --> 00:11:26,800
hier die beiden zu einem einzigen JavaScript-Objekt.

149
00:11:26,800 --> 00:11:30,490
Sie werden sehen, wie ich dies wiederholt für, sagen wir zum Beispiel

150
00:11:30,490 --> 00:11:35,510
für kühne Aktionen und so weiter, auch in den ActionCreators.

151
00:11:35,510 --> 00:11:41,640
Und danach füge ich den Kommentar in meinen Redux-Shop hier hinzu,

152
00:11:41,640 --> 00:11:44,250
und der Rest des Codes bleibt als solcher.

153
00:11:44,250 --> 00:11:47,016
Ebenso, wenn Sie Gerichte holen,

154
00:11:47,016 --> 00:11:52,980
werden Sie sehen, wie wir mehrere Gerichte aus der Firebase holen.

155
00:11:52,980 --> 00:11:58,330
So sehen wir firestore.collection Gerichte bekommen und erhalten die Gerichte.

156
00:11:58,330 --> 00:12:02,520
Jetzt, wenn Sie das erhalten, dann wird es mir einen

157
00:12:02,520 --> 00:12:06,680
Snapshot-Wert geben, der die Momentaufnahme des aktuellen Zustands dieser Sammlung ist,

158
00:12:06,680 --> 00:12:10,690
und daraus muss ich jedes Gericht abrufen.

159
00:12:10,690 --> 00:12:15,400
Und dann rekonstruiere ich hier meine Auswahl an Gerichten.

160
00:12:15,400 --> 00:12:18,990
Beachten Sie nun, dass, wie gesagt, die ID und die Daten getrennt sind, also

161
00:12:18,990 --> 00:12:23,495
muss ich sie miteinander kombinieren, denn so verwende ich die Daten in meiner

162
00:12:23,495 --> 00:12:27,660
React-Anwendung, also schiebe ich das in das Geschirr Array.

163
00:12:27,660 --> 00:12:32,980
Und dann endlich die Gerichte zurückgeben, die dann in meinen

164
00:12:32,980 --> 00:12:34,380
Redux Store hier eingefügt werden.

165
00:12:34,380 --> 00:12:39,642
Diese Art von Änderungen wurden also in den ActionCreators vorgenommen.

166
00:12:39,642 --> 00:12:45,843
Jetzt wird der Anmelde- und Abmeldevorgang unten hier behandelt.

167
00:12:45,843 --> 00:12:51,445
Also für die Anmeldung, die Authentifizierung, die wir aus der Firebase importiert haben,

168
00:12:51,445 --> 00:12:56,372
ist die Auth diejenige, die es mir erlaubt, die Anmeldung und Abmeldung durchzuführen.

169
00:12:56,372 --> 00:12:59,363
Also, wenn Sie sich mit E-Mail und Passwort anmelden,

170
00:12:59,363 --> 00:13:03,940
bietet es mit dieser Methode namens SignInWiTheMailAndPassword.

171
00:13:03,940 --> 00:13:10,250
Und dann geben Sie die E-Mail und das Passwort als die beiden Parameter hier.

172
00:13:10,250 --> 00:13:14,010
Und dann ermöglicht es Ihnen, sich anzumelden.

173
00:13:14,010 --> 00:13:20,985
Und wenn Sie sich anmelden, stellt die Auth dieses Objekt namens CurrentUser auf der Authentifizierung zur Verfügung.

174
00:13:20,985 --> 00:13:26,455
So erhalten Sie die Informationen des Benutzers, indem Sie Auth.currentUser hier sagen.

175
00:13:26,455 --> 00:13:31,235
Und auch speichere ich die Benutzerinformationen in meiner Datenbank.

176
00:13:31,235 --> 00:13:33,879
Jetzt verfolge ich keine Token und

177
00:13:33,879 --> 00:13:37,945
solche Dinge explizit, weil dies automatisch von auth für mich verfolgt

178
00:13:37,945 --> 00:13:40,606
wird, was vom Firebase npm-Modul bereitgestellt wird.

179
00:13:40,606 --> 00:13:43,723
Also nutze ich das nur, um die aktuelle Verwendung zu verfolgen.

180
00:13:43,723 --> 00:13:49,078
Wenn der aktuelle Benutzer null ist, weiß ich, dass mein Client

181
00:13:49,078 --> 00:13:53,840
keinen Benutzer am Server angemeldet hat.

182
00:13:53,840 --> 00:13:59,510
Und in ähnlicher Weise, um den Benutzer abzumelden, sage ich einfach auth.signOut.

183
00:13:59,510 --> 00:14:04,370
Die Dokumentation zur Verwendung des Filebase

184
00:14:04,370 --> 00:14:09,060
npm-Moduls ist nun auch in der Firebase-Dokumentation verfügbar.

185
00:14:09,060 --> 00:14:14,238
So können Sie leicht nachsehen, um zu verstehen, wie Sie

186
00:14:14,238 --> 00:14:18,993
Firebase nutzen können, um all diese verschiedenen Funktionen zu nutzen

187
00:14:18,993 --> 00:14:23,443
, die über das Firebase npm-Modul verfügbar sind.

188
00:14:23,443 --> 00:14:27,999
Auch für Favoriten, veröffentlichen wir entweder einen Favoriten und so

189
00:14:27,999 --> 00:14:32,454
müssen Sie dann Artikel posten, also würden Sie sagen, hinzufügen, und

190
00:14:32,454 --> 00:14:36,333
wenn Sie einen Artikel erhalten müssen, werden Sie sagen, get.

191
00:14:36,333 --> 00:14:41,455
Und Sie können sogar ein Element aus einem bestimmten Dokument in den Sammlungen erhalten.

192
00:14:41,455 --> 00:14:45,245
Wenn Sie ein bestimmtes Dokument in der Sammlung möchten, sagen Sie .doc.

193
00:14:45,245 --> 00:14:49,015
Und dann geben Sie hier die ID des Dokuments an.

194
00:14:49,015 --> 00:14:51,585
So können Sie ein bestimmtes Dokument erhalten.

195
00:14:53,465 --> 00:14:56,265
Löschen Sie auch Favoriten, und holen Sie Favoriten und so weiter.

196
00:14:56,265 --> 00:15:01,640
Damit die Favoriten in meiner Firebase gespeichert werden,

197
00:15:01,640 --> 00:15:09,100
werden hier die Favoriten als Benutzer-ID und die Dish ID gespeichert.

198
00:15:09,100 --> 00:15:13,680
Jetzt hat firestore selbst keine Möglichkeit, die

199
00:15:13,680 --> 00:15:15,800
Gerichteninformationen in die Schalen-ID zu füllen.

200
00:15:15,800 --> 00:15:21,214
Also bin ich nur holen alle Gerichte Informationen,

201
00:15:21,214 --> 00:15:27,694
so dass das ist jeder Favorit ist ein Paar, Benutzer und Gericht ID Paar.

202
00:15:27,694 --> 00:15:30,431
Also hole ich das nur in meine Favoriten.

203
00:15:30,431 --> 00:15:35,859
Aber dann bedeutet das auch, dass ich meine Favoriten-Komponente ändern muss, so dass

204
00:15:35,859 --> 00:15:40,091
es die Schüssel ID verwenden und dann in die Gerichte, die

205
00:15:40,091 --> 00:15:45,560
in meinem Redux Store gespeichert sind, indexieren kann, und erhalten Sie die Teller Informationen.

206
00:15:45,560 --> 00:15:49,194
Oder die Alternative wäre, zum Server zu gehen und dann die Informationen zu holen.

207
00:15:49,194 --> 00:15:53,560
Aber da habe ich bereits die Daten über die Gerichte in meinem Redux Store,

208
00:15:53,560 --> 00:15:58,234
weil ich bereits die Abholgerichte gemacht habe, um alle Informationen

209
00:15:58,234 --> 00:15:59,474
über die Gerichte zu holen.

210
00:15:59,474 --> 00:16:05,492
Ich gehe einfach direkt in das Geschirr Objekt in meinem Redux riss und

211
00:16:05,492 --> 00:16:08,190
hole diese Informationen.

212
00:16:08,190 --> 00:16:12,250
Dies bedeutet also auch, dass es Änderungen an der Hauptkomponente gibt.

213
00:16:12,250 --> 00:16:18,894
In der Hauptkomponente würden Sie feststellen, dass, wenn ich den Favoriten hier für

214
00:16:18,894 --> 00:16:25,343
das Gericht Detail mache, ich das Gericht einfach mit diesem DishiD vergleichen müsste.

215
00:16:25,343 --> 00:16:29,188
Also das Gericht hier in meinem Liebling ist die Dishid selbst, also

216
00:16:29,188 --> 00:16:31,540
muss ich nur den Vergleich machen.

217
00:16:31,540 --> 00:16:35,334
Es wird also geringfügige Änderungen an dieser Zeile in der DisHID geben.

218
00:16:35,334 --> 00:16:39,503
Und Sie werden auch bemerken, dass, wenn ich die Favoriten anrufe,

219
00:16:39,503 --> 00:16:42,786
zusätzlich zur Bereitstellung ihrer Favoriten,

220
00:16:42,786 --> 00:16:47,322
ich auch das Geschirr als eine der Requisiten für meine Favoriten liefere.

221
00:16:47,322 --> 00:16:51,711
Das ist also eine weitere Änderung, die Sie in der Hauptkomponente bemerken werden.

222
00:16:51,711 --> 00:16:54,990
Und in ähnlicher Weise

223
00:16:54,990 --> 00:16:59,996
werden Sie in der Lieblingskomponente feststellen, dass

224
00:16:59,996 --> 00:17:04,933
Sie in der Lieblingskomponente unten hier feststellen werden, dass, wenn ich die Lieblingskomponente rendere.

225
00:17:04,933 --> 00:17:09,761
Dann, genau hier in dieser Funktion hier, const Favoriten,

226
00:17:09,761 --> 00:17:14,113
was ich tue, ist, ich gehe in die Favoriten Gerichte,

227
00:17:14,113 --> 00:17:19,338
Gerichte ist eine Reihe von all den Dishids hier, also mappe ich durch, dass.

228
00:17:19,338 --> 00:17:23,591
Also sieh dir jeden Dishid an, dann

229
00:17:23,591 --> 00:17:27,545
habe ich aus dem Geschirr dieses spezielle Gericht herausgefiltert.

230
00:17:27,545 --> 00:17:29,484
Und dann erhalten Sie die DishID, also

231
00:17:29,484 --> 00:17:33,023
hier sehen Sie mich mit dem JavaScript-Array-Filter hier.

232
00:17:33,023 --> 00:17:36,419
Es wird diese spezifische Gericht-Informationen herausfiltern und

233
00:17:36,419 --> 00:17:38,687
dann das bestimmte Gericht rendern.

234
00:17:38,687 --> 00:17:43,415
Dies ist eine zusätzliche Arbeit, die ich in meiner

235
00:17:43,415 --> 00:17:48,840
Lieblingskomponente tun muss, um jedes der Gerichte dort zu rendern.

236
00:17:48,840 --> 00:17:55,900
Also, solche kleinen Modifikationen werden Sie in ein paar der Komponenten bemerken,

237
00:17:55,900 --> 00:17:59,840
insbesondere das Gericht Detail, der Favorit und die Hauptkomponente.

238
00:17:59,840 --> 00:18:05,410
Hier wurden einige kleinere Änderungen vorgenommen, um der

239
00:18:05,410 --> 00:18:09,980
React-Anwendung die Nutzung des Firebase-Servers zu erleichtern.

240
00:18:09,980 --> 00:18:12,790
Dies ist eine kurze Überprüfung, wie

241
00:18:12,790 --> 00:18:17,870
meine React-Anwendung geändert wurde, um mit meinem Firebase Server zu kommunizieren.

242
00:18:17,870 --> 00:18:23,257
Nun, wie bei Angular, hatten wir auch das Angularfire, das

243
00:18:23,257 --> 00:18:29,680
uns eine Möglichkeit bot, zusammen mit Firebase zu nutzen, um mit dem Server zu kommunizieren.

244
00:18:29,680 --> 00:18:35,659
React hat kein solches Gegenstück, also verwende ich direkt das Firebase

245
00:18:35,659 --> 00:18:41,472
npm-Modul, das die grundlegende Basis für den Zugriff auf den Firebase-Server bereitstellt.

246
00:18:41,472 --> 00:18:46,165
Und dann nutzen Sie die Funktionen, die es bietet, um mit meinem

247
00:18:46,165 --> 00:18:47,382
Firebase Server zu kommunizieren.

248
00:18:47,382 --> 00:18:52,506
Verbringen Sie noch einige Zeit damit, diesen Code zu durchlaufen, um zu verstehen, wie

249
00:18:52,506 --> 00:18:57,534
ich Firebase npm-Module genutzt habe, um

250
00:18:57,534 --> 00:19:03,090
mit meinem Firebase-Server zu kommunizieren, den ich in der vorherigen Übung eingerichtet habe.

251
00:19:03,090 --> 00:19:08,293
Damit habe ich Ihnen einen schnellen Überblick darüber gegeben, wie Sie Ihre

252
00:19:08,293 --> 00:19:13,957
React-Anwendung so einrichten können, dass sie mit Firebase-Back-End als Dienst interagieren und

253
00:19:13,957 --> 00:19:20,012
dann verschiedene Operationen unterstützen können, die Sie in Ihrer Anwendung haben.

254
00:19:20,012 --> 00:19:24,632
Nun, damit schließe ich diese spezielle Übung ab, in der ich

255
00:19:24,632 --> 00:19:28,758
in dieser Lektion über Back-End als Service illustriert habe und

256
00:19:28,758 --> 00:19:33,645
Firebase als Beispiel für ein Back-End als Service demonstriert habe.

257
00:19:33,645 --> 00:19:36,995
( MUSIK)