1
00:00:03,950 --> 00:00:06,525
In der vorherigen Übung

2
00:00:06,525 --> 00:00:09,990
hatten wir bereits unser Firebase-Backend

3
00:00:09,990 --> 00:00:15,120
als Service mit dem neuen Projekt konfiguriert und auch viele

4
00:00:15,120 --> 00:00:19,620
Daten in unsere Datenbank eingebaut und dann unseren Speicher eingerichtet und

5
00:00:19,620 --> 00:00:25,120
unseren Firebase Server so konfiguriert, dass er als Backend für unsere Angular-Anwendung fungiert.

6
00:00:25,120 --> 00:00:29,160
In dieser Übung betrachten wir eine modifizierte Version

7
00:00:29,160 --> 00:00:33,480
unserer Angular-Anwendung, die das Firebase-Backend als

8
00:00:33,480 --> 00:00:37,500
Dienst nutzt, um die Daten zu erhalten und

9
00:00:37,500 --> 00:00:41,915
auch Informationen für Benutzer auf den Servern zu speichern.

10
00:00:41,915 --> 00:00:44,480
Außerdem nutzen wir

11
00:00:44,480 --> 00:00:48,455
die Authentifizierungsunterstützung, die Firebase bietet, um Benutzer

12
00:00:48,455 --> 00:00:56,295
sowohl mit einem E-Mail- und Passwortansatz als auch mit einem Google-Konto zu authentifizieren.

13
00:00:56,295 --> 00:00:59,775
Um mit dieser Übung zu beginnen,

14
00:00:59,775 --> 00:01:02,750
gehen Sie zu einem geeigneten Speicherort auf Ihrem Computer und

15
00:01:02,750 --> 00:01:07,190
klonen Sie dann das angegebene Git-Repository, in dem ich

16
00:01:07,190 --> 00:01:14,775
Ihnen die Angular Firebase-Version unserer Angular-Anwendung zur Verfügung gestellt habe.

17
00:01:14,775 --> 00:01:17,490
Also geben Sie, 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
und klonen Sie dann

20
00:01:28,670 --> 00:01:34,835
das Git-Repository und sobald das Git-Repository auf Ihren Computer geklont ist,

21
00:01:34,835 --> 00:01:43,355
dann bewegen Sie sich in den Verwirrung Angular Firebase

22
00:01:43,355 --> 00:01:47,570
Ordner, der an diesem Punkt erstellt wird, und

23
00:01:47,570 --> 00:01:52,110
dann würden Sie Beachten Sie, dass dort bereits eine Reihe von Dateien installiert sind.

24
00:01:52,110 --> 00:01:56,015
Gehen wir weiter und führen Sie eine npm-Installation durch, um

25
00:01:56,015 --> 00:02:01,890
alle Knotenmodule zu installieren, von denen diese Angular-Anwendung abhängig ist.

26
00:02:01,890 --> 00:02:04,520
Diese Version installiert auch

27
00:02:04,520 --> 00:02:10,010
zwei zusätzliche Knotenmodule namens Firebase und dann Angular fire two.

28
00:02:10,010 --> 00:02:15,525
Ich werde später in dieser Übung etwas mehr über diese beiden Knotenmodule erklären.

29
00:02:15,525 --> 00:02:18,915
Sobald die Projektinstallation abgeschlossen ist,

30
00:02:18,915 --> 00:02:23,360
öffnen Sie das Projekt in einem Editor und dann im Projekt,

31
00:02:23,360 --> 00:02:27,830
gehen Sie in den Quellumgebungsordner und

32
00:02:27,830 --> 00:02:32,420
öffnen

33
00:02:32,420 --> 00:02:36,980
Sie dann die Datei „environment.ts“. In der Datei „environment.ts“ wird eine Reihe von Firebase-Konfigurationen angezeigt, die

34
00:02:36,980 --> 00:02:42,130
Sie mit Ihrem eigene Firebase-Server-Konfiguration.

35
00:02:42,130 --> 00:02:45,105
Wie wir in der vorherigen Übung gesehen haben,

36
00:02:45,105 --> 00:02:48,950
können wir all diese Informationen erhalten, wenn wir auf

37
00:02:48,950 --> 00:02:53,150
diese Schaltfläche klicken, die hier heißt „Firebase zu Ihrer Web-App hinzufügen“ und dann

38
00:02:53,150 --> 00:02:56,809
diese Informationen kopieren und diese Informationen

39
00:02:56,809 --> 00:03:01,835
in Ihre Environment.ts-Datei einfügen, um

40
00:03:01,835 --> 00:03:06,500
diese durch Ihre spezifische Firebase-Server-Konfiguration

41
00:03:06,500 --> 00:03:10,940
für all diese Informationen und sobald das abgeschlossen ist,

42
00:03:10,940 --> 00:03:17,390
können Sie Ihre Angular-Anwendung starten, indem Sie an der Eingabeaufforderung „ng serve“ eingeben.

43
00:03:17,390 --> 00:03:21,735
Sobald Ihre Angular-Anwendung mit „ng serve“ kompiliert wurde,

44
00:03:21,735 --> 00:03:29,905
gehen Sie zu einem Browser und geben Sie dann localhost:4200 ein, um in

45
00:03:29,905 --> 00:03:34,850
Ihre Angular-Anwendung zu laden, und Sie werden feststellen, dass Ihre Angular-Anwendung kompiliert

46
00:03:34,850 --> 00:03:40,215
und dann wie zuvor in Ihren Browser geladen wird.

47
00:03:40,215 --> 00:03:43,190
Also, sobald Ihre Angular-Anwendung läuft und läuft,

48
00:03:43,190 --> 00:03:47,585
werden Sie feststellen, dass diese Version der Angular-Anwendung

49
00:03:47,585 --> 00:03:51,260
den Firebase-Server verwenden wird, den Sie in

50
00:03:51,260 --> 00:03:55,625
der vorherigen Übung eingerichtet haben, und so würden Sie hier die „Startseite“ Seite sehen,

51
00:03:55,625 --> 00:04:00,030
die „Über“ Seite, wie wir hier sehen und die

52
00:04:00,030 --> 00:04:09,615
„ Menü“ und die Seite „Kontakt“ und natürlich, da wir derzeit nicht eingeloggt sind,

53
00:04:09,615 --> 00:04:14,975
zeigt die Seite „Meine Favoriten“ einen Fehler an, der besagt, dass kein Benutzer angemeldet ist.

54
00:04:14,975 --> 00:04:17,210
Also, lasst uns uns einloggen.

55
00:04:17,210 --> 00:04:20,760
Ich gehe zurück zur „Homepage“ und dann loggen wir uns ein.

56
00:04:20,760 --> 00:04:22,475
Wenn Sie also auf den Login-Button klicken,

57
00:04:22,475 --> 00:04:27,195
sehen Sie hier das typische Formular mit der E-Mail und den Passwortinformationen.

58
00:04:27,195 --> 00:04:30,715
Sie sehen hier auch einen zusätzlichen Button namens „Login with Google“.

59
00:04:30,715 --> 00:04:33,600
Also lassen Sie mich mit meinem Google-Konto einloggen.

60
00:04:33,600 --> 00:04:35,750
Wenn Sie also auf „Login with Google“

61
00:04:35,750 --> 00:04:41,180
klicken, öffnet sich ein weiteres Browserfenster, in dem Sie aufgefordert werden,

62
00:04:41,180 --> 00:04:47,420
Ihr Google-Konto von diesem Firebase-Server zu autorisieren.

63
00:04:47,420 --> 00:04:49,475
Also, lassen Sie mich gehen und

64
00:04:49,475 --> 00:04:53,845
diese Anwendung autorisieren und dann, sobald die Autorisierung abgeschlossen ist,

65
00:04:53,845 --> 00:04:57,145
dann werden Sie sehen, dass Ihre

66
00:04:57,145 --> 00:05:01,850
Firebase-basierte Angular Anwendung startet und in der rechten Ecke

67
00:05:01,850 --> 00:05:06,200
sehen Sie sofort Ihren Namen

68
00:05:06,200 --> 00:05:11,525
hier und mit dem „Login“ angezeigt wird wird nun in eine Schaltfläche „Abmelden“ umgewandelt.

69
00:05:11,525 --> 00:05:14,755
Also, an dieser Stelle

70
00:05:14,755 --> 00:05:17,530
sollten Sie in der Lage sein, Ihre Favoriten zu sehen

71
00:05:17,530 --> 00:05:20,310
und in diesem Fall, da wir keine Favoriten haben,

72
00:05:20,310 --> 00:05:22,155
also wird es an dieser Stelle leer sein.

73
00:05:22,155 --> 00:05:27,830
Ich gehe zurück zum „Menü“ und füge dann ein paar Elemente in „Meine Favoriten“ hinzu.

74
00:05:27,830 --> 00:05:32,235
Also, ich werde dieses Gericht zu meinen Favoriten hinzufügen.

75
00:05:32,235 --> 00:05:34,045
Also, wenn ich auf dieses Gericht klicke,

76
00:05:34,045 --> 00:05:41,110
werden Sie sofort sehen, dass sich das Symbol in ein gefülltes Herz verwandelt und lassen Sie mich auch

77
00:05:41,110 --> 00:05:44,350
ein weiteres Gericht auswählen und es in „Meine

78
00:05:44,350 --> 00:05:49,650
Favoriten“ hinzufügen, und dann, wenn Sie zu den „Meine Favoriten“ gehen,

79
00:05:49,650 --> 00:05:52,510
werden Sie die paar Gerichte zu

80
00:05:52,510 --> 00:05:56,330
Ihren Favoriten hinzugefügt sehen, wie Sie es tun würden erwarten und wieder,

81
00:05:56,330 --> 00:06:02,540
können Sie die Gerichte löschen, indem Sie auf den „Löschen“ Schalter hier oben klicken und dann auf

82
00:06:02,540 --> 00:06:09,695
das Kreuz klicken, um das Element aus Ihrer Liste der Favoriten zu entfernen, wie hier gezeigt.

83
00:06:09,695 --> 00:06:13,570
Jetzt können wir auch hinzufügen, wie Sie erkannt

84
00:06:13,570 --> 00:06:17,660
haben, können wir zu jedem Gericht gehen und dann Kommentare zu diesem Gericht hinzufügen.

85
00:06:17,660 --> 00:06:19,190
Also, lassen Sie mich

86
00:06:19,190 --> 00:06:28,260
hier einen Kommentar hinzufügen und in dem Moment, in dem Sie den Kommentar einreichen,

87
00:06:28,260 --> 00:06:32,435
werden Sie sofort sehen, dass Ihre Kommentare hier mit

88
00:06:32,435 --> 00:06:41,825
dem Namen des Kommentars des Autors auch hier und mit dem Datum angezeigt werden, wie hier gezeigt.

89
00:06:41,825 --> 00:06:45,890
So können Sie sehen, dass die Einreichung

90
00:06:45,890 --> 00:06:49,955
von Kommentaren durch den Benutzer für jedes bestimmte Gericht unterstützt wird.

91
00:06:49,955 --> 00:06:55,805
Lassen Sie mich einen weiteren Favoriten hinzufügen und so wird dieser Benutzer ein paar Favoriten haben.

92
00:06:55,805 --> 00:06:58,180
Lassen Sie mich „Logout“ diesen Benutzer.

93
00:06:58,180 --> 00:07:02,930
Gehen Sie zurück zur „Homepage“ und dann „Logout“ diesen Benutzer.

94
00:07:02,930 --> 00:07:07,715
Jetzt werden wir uns mit dem anderen Konto anmelden.

95
00:07:07,715 --> 00:07:13,490
Also, ich would- Ich hatte

96
00:07:13,490 --> 00:07:17,840
dieses E-Mail-Passwort-Konto früher eingerichtet und so werden wir uns

97
00:07:17,840 --> 00:07:22,865
als dieser andere Benutzer anmelden und sobald der andere Benutzer eingeloggt ist,

98
00:07:22,865 --> 00:07:29,045
lassen Sie mich wieder zum „Menü“ gehen und fügen Sie ein paar Elemente in

99
00:07:29,045 --> 00:07:36,904
die Favoriten für diesen bestimmten Benutzer

100
00:07:36,904 --> 00:07:40,700
und so, wenn Sie zurück zu „Meine Favoriten“,

101
00:07:40,700 --> 00:07:44,270
sehen Sie diese Elemente für den zweiten Benutzer aufgelistet.

102
00:07:44,270 --> 00:07:46,775
Nun, ähnlich für diesen Benutzer,

103
00:07:46,775 --> 00:07:51,560
lassen Sie mich erneut einen Kommentar dieses Benutzers einreichen.

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

105
00:08:01,000 --> 00:08:02,600
und Sie würden

106
00:08:02,600 --> 00:08:07,445
sehen, dass die vom zweiten Benutzer eingereichten Kommentare auch in die Anwendung aufgenommen werden.

107
00:08:07,445 --> 00:08:11,615
So funktioniert Ihre Angular-Anwendung

108
00:08:11,615 --> 00:08:16,490
mit der Firebase als Backend als Service.

109
00:08:16,490 --> 00:08:18,529
Natürlich müssen Sie sich fragen,

110
00:08:18,529 --> 00:08:24,170
wie wir unsere Angular-Anwendung neu gestalten, um Firebase zu nutzen, anstatt

111
00:08:24,170 --> 00:08:31,610
den Standard Express plus MongoDB-Server zu verwenden, den wir zuvor erstellt haben?

112
00:08:31,610 --> 00:08:38,440
Um Ihre Angular-Anwendung für die Kommunikation mit dem Firebase-Server zu konfigurieren,

113
00:08:38,440 --> 00:08:42,620
müssen Sie zwei Knotenmodule in

114
00:08:42,620 --> 00:08:46,860
Ihrer Angular-Anwendung installieren und eines davon ist das Firebase-Modul.

115
00:08:46,860 --> 00:08:49,730
Das Firebase-Modul, wie Sie hier sehen,

116
00:08:49,730 --> 00:08:55,190
bietet die Tools und Infrastruktur, mit denen Sie

117
00:08:55,190 --> 00:09:01,610
mit dem Firebase-Server kommunizieren und diese in Ihrer Anwendung installieren

118
00:09:01,610 --> 00:09:05,720
können, geben Sie, npm install minus save Firebase.

119
00:09:05,720 --> 00:09:07,610
Nun zusammen mit diesem

120
00:09:07,610 --> 00:09:11,395
gibt es ein weiteres Modul namens Angular Fire 2.

121
00:09:11,395 --> 00:09:13,725
Also das Winkelfeuer 2.

122
00:09:13,725 --> 00:09:20,535
Auch wieder habe ich die Links zu diesen beiden Modulen in den zusätzlichen Ressourcen zur Verfügung gestellt.

123
00:09:20,535 --> 00:09:23,795
Die AngularFire 2 ist die offizielle Bibliothek

124
00:09:23,795 --> 00:09:27,290
für Firebase und Angular Unterstützung und wie Sie sehen können,

125
00:09:27,290 --> 00:09:31,520
ist es eine beobachtbare basierte Unterstützung für Angular-Dateien.

126
00:09:31,520 --> 00:09:36,545
Also, das funktioniert, um das Firebase npm-Modul hinzuzufügen und dann

127
00:09:36,545 --> 00:09:42,125
gibt Ihnen beobachtbare basierte Schnittstelle, die wir in Ihrer Angular-Anwendung verwenden können.

128
00:09:42,125 --> 00:09:44,930
Also würden wir den AngularFire 2 nutzen.

129
00:09:44,930 --> 00:09:46,994
Um AngularFire2 nutzen zu

130
00:09:46,994 --> 00:09:49,940
können, müssen Sie sowohl Firebase als auch AngularFire 2 installieren.

131
00:09:49,940 --> 00:09:51,345
Also, in einem Schuss,

132
00:09:51,345 --> 00:09:54,205
installieren Sie beide in Ihrer Angular-Anwendung.

133
00:09:54,205 --> 00:09:59,320
Jetzt

134
00:09:59,320 --> 00:10:06,250
installiert die Version der Angular-Anwendung, die ich für Sie bereitgestellt habe, automatisch beide, wie Sie sehen werden, wenn Sie die package.json-Datei untersuchen.

135
00:10:06,250 --> 00:10:08,510
Nun, wie man diese beiden nutzt,

136
00:10:08,510 --> 00:10:12,245
werde ich veranschaulichen, indem ich Sie schnell durch

137
00:10:12,245 --> 00:10:17,280
den modifizierten Code für die Dienste und ein paar Komponenten führe, bei

138
00:10:17,280 --> 00:10:19,955
denen wir Firebase und AngularFire2 verwenden,

139
00:10:19,955 --> 00:10:23,135
um die Angular Anwendung zu modifizieren, die wir

140
00:10:23,135 --> 00:10:30,140
zuvor entwickelt haben, um die Nutzung der Firebase-Server als Backend als Service.

141
00:10:30,140 --> 00:10:34,075
Um mehr darüber zu erfahren, wie wir

142
00:10:34,075 --> 00:10:39,185
Firebase und AngularFire 2 innerhalb unserer Angular-Anwendung nutzen,

143
00:10:39,185 --> 00:10:42,860
ist unser erster Stopp in der package.json-Datei.

144
00:10:42,860 --> 00:10:45,025
Also in der package.json-Datei

145
00:10:45,025 --> 00:10:50,850
werden Sie feststellen, dass ich AngularFire2 hier installiert habe und auch wir

146
00:10:50,850 --> 00:10:57,510
Firebase installiert haben, um in dieser Version der Angular-Anwendung zu verwenden, die ich für Sie bereitstelle.

147
00:10:57,510 --> 00:11:01,980
Beachten Sie also, dass diese beiden automatisch installiert werden, wenn Sie „npm

148
00:11:01,980 --> 00:11:07,720
install“ eingeben, nachdem Sie dieses Git-Repository geklont haben, das ich für Sie bereitgestellt habe.

149
00:11:07,720 --> 00:11:11,220
Wenn Sie mit einer neuen Angular Anwendung beginnen,

150
00:11:11,220 --> 00:11:15,590
sollten Sie sowohl AngularFire 2 als auch Firebase installieren,

151
00:11:15,590 --> 00:11:20,184
um Firebase als Backend als Service nutzen zu können.

152
00:11:20,184 --> 00:11:22,365
Nachdem wir diese beiden installiert haben,

153
00:11:22,365 --> 00:11:27,360
lassen Sie uns lernen, wie wir diese innerhalb unserer Dienste nutzen.

154
00:11:27,360 --> 00:11:30,030
Der beste Weg, um zu lernen, wie man

155
00:11:30,030 --> 00:11:33,640
diese beiden nutzen kann, besteht darin, einige der Dienste zu besuchen, die wir

156
00:11:33,640 --> 00:11:36,930
in unserer Anwendung konfiguriert haben, und zu verstehen, wie wir

157
00:11:36,930 --> 00:11:42,130
die Verwendung von AngularFire2 und Firebase nutzen.

158
00:11:42,130 --> 00:11:46,235
Also, wir werden mit der Datei dish.service.ts beginnen.

159
00:11:46,235 --> 00:11:48,830
Wenn Sie also zur Datei dish.service.ts gehen,

160
00:11:48,830 --> 00:11:55,235
werden Sie feststellen, dass

161
00:11:55,235 --> 00:12:01,190
ich hier, in diesem Gericht Service, diese AngularFiRestore, AngularFireStoreDocument

162
00:12:01,190 --> 00:12:08,115
und AngularFireStoreCollection von AngularFire nach Firestore importiere.

163
00:12:08,115 --> 00:12:16,680
Also, das bringt alles, was ich von meinem AngularFiRestore npm-Modul brauche,

164
00:12:16,680 --> 00:12:21,010
auch Sie werden feststellen, dass ich alles aus

165
00:12:21,010 --> 00:12:27,615
FireBase/App als Firebase in meinen Dish Service importiere.

166
00:12:27,615 --> 00:12:29,945
Also, sobald wir diese beiden importiert haben,

167
00:12:29,945 --> 00:12:35,415
werfen wir einen kurzen Blick darauf, wie wir unseren Geschirrservice hier neu konfigurieren.

168
00:12:35,415 --> 00:12:37,435
Also, wenn Sie in den Geschirr-Service gehen,

169
00:12:37,435 --> 00:12:41,175
werden Sie feststellen, dass ich keinen HTTP-Client mehr verwende.

170
00:12:41,175 --> 00:12:48,975
Stattdessen injiziere ich AFS, das die AngularFiRestore in den Konstruktor hier ist.

171
00:12:48,975 --> 00:12:51,520
Die AngularFiRestore ist diejenige, die mir

172
00:12:51,520 --> 00:12:55,815
Zugriff auf das Firebase-Backend als Dienst gewährt.

173
00:12:55,815 --> 00:13:01,785
Nun erinnern Sie sich auch daran, dass wir bereits alle Details

174
00:13:01,785 --> 00:13:09,450
unseres Servers und auch das Dateispeicher-Projekt in der Datei environment.ts früher konfiguriert haben.

175
00:13:09,450 --> 00:13:12,595
Daher sollten Sie diese Informationen bereits dort konfiguriert haben,

176
00:13:12,595 --> 00:13:16,180
wie Ihre Angular-Anwendung Ihr

177
00:13:16,180 --> 00:13:20,930
Firestore-basiertes Projekt auf

178
00:13:20,930 --> 00:13:27,710
Ihrem Firestore-Server nutzen sollte, um auf die dort konfigurierten Daten zuzugreifen.

179
00:13:27,710 --> 00:13:32,290
Dadurch habe ich Zugriff auf meine Cloud

180
00:13:32,290 --> 00:13:39,400
Firestore innerhalb meines Firebase-Projekts, das ich eingerichtet habe.

181
00:13:39,400 --> 00:13:43,410
Nun ist der AuthService natürlich der gleiche Authservice, den wir zuvor verwendet haben,

182
00:13:43,410 --> 00:13:51,175
aber er hat geändert, um die Angular Unterstützung für Firebase zu nutzen.

183
00:13:51,175 --> 00:13:55,095
Wir besuchen den AuthService, um zu erfahren, wie er aktualisiert wurde.

184
00:13:55,095 --> 00:14:00,410
Nun wird der AuthService uns Zugriff auf

185
00:14:00,410 --> 00:14:06,345
diese Methode namens GetAuthState geben, die in einem beobachtbaren zurückgegeben wird.

186
00:14:06,345 --> 00:14:08,965
Diese beobachtbare, wenn wir es abonnieren,

187
00:14:08,965 --> 00:14:15,855
gibt uns die Informationen als Benutzer, die die Informationen des Benutzers enthält.

188
00:14:15,855 --> 00:14:21,465
Also, ich werde das erhalten und dann den currentUser in meiner Anwendung

189
00:14:21,465 --> 00:14:28,995
als der Benutzer einrichten, der von diesem beobachtbaren hier zurückgegeben wird.

190
00:14:28,995 --> 00:14:30,699
Also, wenn wir AuthService besuchen,

191
00:14:30,699 --> 00:14:33,085
werden wir erfahren, was dieser GetAuthState für

192
00:14:33,085 --> 00:14:35,700
uns zurückgibt und so können die Informationen des CurrentUsers

193
00:14:35,700 --> 00:14:36,940
von jedem

194
00:14:36,940 --> 00:14:41,165
der anderen Dienste abgerufen werden, da wir bereits AuthService in hier injizieren.

195
00:14:41,165 --> 00:14:45,570
Lassen Sie uns nun einen Blick darauf werfen, wie die GetDishs-Methode hier implementiert wird.

196
00:14:45,570 --> 00:14:47,710
Nun, früher in der GetDishs-Methode,

197
00:14:47,710 --> 00:14:55,920
verwendeten wir den HTTP-Client, um auf den Server auf Basis URL+/Gerichte zuzugreifen.

198
00:14:55,920 --> 00:14:57,425
Nun, in diesem Fall,

199
00:14:57,425 --> 00:15:07,255
um auf eine Sammlung in meinem Firebase-Server zuzugreifen, sagen wir this.afs.

200
00:15:07,255 --> 00:15:10,710
Also, das ist es, was AngularFire2 für uns bietet.

201
00:15:10,710 --> 00:15:16,345
AFS, wie Sie sehen, ist die AngularFiRestore, die wir hier injiziert haben, und so sagen wir

202
00:15:16,345 --> 00:15:19,810
diese.afs.collection und hier

203
00:15:19,810 --> 00:15:23,010
werden wir die spezifische Sammlung angeben, auf die wir hier zugreifen.

204
00:15:23,010 --> 00:15:26,315
Erinnern Sie sich, dass wir die Gerichte, die Aktionen

205
00:15:26,315 --> 00:15:30,415
und die Führer Sammlungen auf meinem Firebase Server eingerichtet hatten.

206
00:15:30,415 --> 00:15:34,065
Also, dies gibt mir direkt

207
00:15:34,065 --> 00:15:38,595
Zugriff auf meine Geschirr Sammlung hier und aus der Geschirr Sammlung,

208
00:15:38,595 --> 00:15:42,740
ich kann entweder tun.ValueChanges,

209
00:15:42,740 --> 00:15:47,115
die alle Informationen in der Business-Sammlung für mich zurückgeben,

210
00:15:47,115 --> 00:15:50,440
oder ich kann tun.SnapshotChanges, die

211
00:15:50,440 --> 00:15:53,990
zusätzliche Informationen einschließlich der ID der Gerichte.

212
00:15:53,990 --> 00:15:56,660
Also, wenn statt SnapshotChanges,

213
00:15:56,660 --> 00:15:59,310
wenn ich valueChanges sage,

214
00:15:59,310 --> 00:16:03,110
wird es nur die Gerichteninformationen zurückgeben, aber es wird nicht

215
00:16:03,110 --> 00:16:07,890
die IDs der Gerichte zurückgeben, aber da ich die IDs meiner Gerichte brauche,

216
00:16:07,890 --> 00:16:13,335
also verwende ich die.snapshotChanges in diesem Fall.

217
00:16:13,335 --> 00:16:16,090
Also, wannen.snapshotChanges aufgerufen wird,

218
00:16:16,090 --> 00:16:19,505
wird dies zurückkehren, wenn Sie ein beobachtbares sehen, das

219
00:16:19,505 --> 00:16:27,195
ich zuordne, und so wird der Rückgabewert, der als Aktionen und diese Aktionen aufgerufen

220
00:16:27,195 --> 00:16:31,800
wird, wieder ein beobachtbares sein, das ich jede Aktion in

221
00:16:31,800 --> 00:16:38,930
diesen Aktionen abbilden und dann die Daten aus der Aktion extrahieren werde, die hier zurückgekehrt.

222
00:16:38,930 --> 00:16:44,525
Die Aktion ist also ein Wert, der von für jede der Aktionen zurückgegeben wird,

223
00:16:44,525 --> 00:16:50,765
und diese Aktion enthält eine Nutzlast und enthält darin ein dunkles Feld hier.

224
00:16:50,765 --> 00:16:53,200
Nun, das ist etwas, das ich herausgefunden habe, indem ich

225
00:16:53,200 --> 00:16:57,010
die Dokumentation für AngularFire2 gelesen

226
00:16:57,010 --> 00:17:03,705
habe und wenn wir diese Datenfunktion auf dieser action.payload.doc aufrufen,

227
00:17:03,705 --> 00:17:05,875
wird dies mir die Daten geben.

228
00:17:05,875 --> 00:17:09,510
Die Daten für dieses spezifische Gericht, das

229
00:17:09,510 --> 00:17:14,160
aus meiner Geschirrsammlung auf der Serverseite erhalten wird.

230
00:17:14,160 --> 00:17:18,760
Also jedes Dokument dort wird hier zurückgegeben und

231
00:17:18,760 --> 00:17:24,205
dann erhalte ich die ID dafür, indem ich action.payload.doc.id sage.

232
00:17:24,205 --> 00:17:27,855
Das ist also, wo die ID

233
00:17:27,855 --> 00:17:32,030
getragen wird und dann werde ich die beiden zusammenschließen und

234
00:17:32,030 --> 00:17:40,035
dies als Gericht Dokument zurück zu meinen verschiedenen Komponenten von dort,

235
00:17:40,035 --> 00:17:42,150
ich werde rufen Sie diese GetDishs-Methode auf.

236
00:17:42,150 --> 00:17:44,690
Wie Sie sich erinnern,

237
00:17:44,690 --> 00:17:47,400
rufe ich von der Menükomponente die GetDishs-Methode auf, um

238
00:17:47,400 --> 00:17:51,090
Informationen über alle Gerichte in meiner Sammlung zu erhalten.

239
00:17:51,090 --> 00:17:58,505
Sammlung Also, jedes dieser Gerichte, die als Dokument zurückgegeben wird, wird in

240
00:17:58,505 --> 00:18:03,420
ein JavaScript-Objekt mit der ID hier eingefügt und auch die

241
00:18:03,420 --> 00:18:09,540
Daten, die aus dieser Aktion payload.doc.data extrahiert werden rekonstruiert.

242
00:18:09,540 --> 00:18:16,455
Nun, das ist etwas, das Sie lernen, indem Sie die Dokumentation von AngularFire2 lesen.

243
00:18:16,455 --> 00:18:19,470
Jetzt, da ich diesen Teil bereits gemacht

244
00:18:19,470 --> 00:18:22,755
habe, zeige ich Ihnen den genauen Code, den Sie

245
00:18:22,755 --> 00:18:26,160
verwenden sollen, um die Daten zu extrahieren und dann

246
00:18:26,160 --> 00:18:33,500
diese Daten an Ihre Komponente zurückzugeben, die die GetDishs-Methode hier aufrufen wird. Wenn Sie

247
00:18:33,500 --> 00:18:37,090
dies für jedes der Dokumente dort tun,

248
00:18:37,090 --> 00:18:39,180
wird dieses Dokument zu dem

249
00:18:39,180 --> 00:18:44,800
Dish-Objekt rekonstruiert, das wir

250
00:18:44,800 --> 00:18:51,500
in unserer Angular-Anwendung verwenden, und so sind wir in der Lage, sogar Zugriff auf die ID zu bekommen.

251
00:18:51,500 --> 00:18:53,365
Wenn Sie nur Wertänderungen vornehmen,

252
00:18:53,365 --> 00:18:59,825
werden einfach alle Dokumente selbst zurückgegeben, aber ohne die IDs der Dokumente.

253
00:18:59,825 --> 00:19:04,920
Diese zusätzliche Arbeit muss also innerhalb Ihres Dienstes erledigt werden, um

254
00:19:04,920 --> 00:19:07,835
die Informationen auf die richtige Weise zurückzugeben

255
00:19:07,835 --> 00:19:10,865
, damit MyComponents diese Informationen nutzen kann.

256
00:19:10,865 --> 00:19:13,370
Ähnlich, für eine GetDish-Methode,

257
00:19:13,370 --> 00:19:17,695
so beachten Sie, wie ich auf die Informationen für ein bestimmtes Gericht zugreife.

258
00:19:17,695 --> 00:19:22,020
Wieder werden wir diese.afs sagen und dann werden Sie feststellen, dass ich

259
00:19:22,020 --> 00:19:26,660
saying.doc bin und dann hier für the.doc Methode,

260
00:19:26,660 --> 00:19:32,650
ich liefern Gerichte Schrägstrich und dann die ID des spezifischen Gerichts.

261
00:19:32,650 --> 00:19:35,150
Nun, der Grund, warum ich ID angegeben hatte,

262
00:19:35,150 --> 00:19:39,350
kommt die ID hier als Parameter für die GetDish-Methode hier ein.

263
00:19:39,350 --> 00:19:41,985
Nun, damit diese ID geliefert wird,

264
00:19:41,985 --> 00:19:44,450
muss ich in der Lage sein, diese ID in

265
00:19:44,450 --> 00:19:47,480
der GetDishs-Methode anzugeben. Wenn mein Menü konstruiert ist,

266
00:19:47,480 --> 00:19:51,205
wird jedes Gericht dort seine ID beigefügt.

267
00:19:51,205 --> 00:19:56,575
Diese ID wird hier übergeben und so werde ich an dieser Stelle auf das Dokument zugreifen.

268
00:19:56,575 --> 00:20:01,260
Also, die AngularFire2 können Sie auf

269
00:20:01,260 --> 00:20:07,125
ein bestimmtes Dokument zugreifen, das innerhalb einer Sammlung ist, indem Sie den Sammlungsnamen Schrägstrich,

270
00:20:07,125 --> 00:20:15,430
plus die Dokument-ID sagen, oder Sie können diese.afs.collection Gerichte genau wie Sie gehört haben,

271
00:20:15,430 --> 00:20:22,540
Sammlung Gerichte und then.doc und dann Doc und ID in Klammern liefern dort.

272
00:20:22,540 --> 00:20:26,725
Also, das ist eine andere Möglichkeit, ein bestimmtes Gericht anzusprechen.

273
00:20:26,725 --> 00:20:32,680
Auch hier abonniere ich SnapshotChanges und dies wird eine Aktion zurückgeben, die dann

274
00:20:32,680 --> 00:20:35,480
wieder im gleichen Format zugeordnet wird, um

275
00:20:35,480 --> 00:20:39,495
das Dish-Objekt hier zusammen mit der ID hier zu konstruieren.

276
00:20:39,495 --> 00:20:42,410
Nun hält Firebase die ID getrennt vom Dokument

277
00:20:42,410 --> 00:20:46,300
selbst und deshalb muss ich

278
00:20:46,300 --> 00:20:49,010
diese Rekonstruktion explizit durchführen, um das

279
00:20:49,010 --> 00:20:54,750
Dish-Dokument auf eine Weise zu erhalten, die von MyComponents nutzbar ist.

280
00:20:54,750 --> 00:20:59,660
Dann habe ich meinen eigenen Server mit Express und MongoDB aufgebaut,

281
00:20:59,660 --> 00:21:03,995
die ID war automatisch im Dokument selbst vorhanden und so war es sehr

282
00:21:03,995 --> 00:21:09,235
einfach, diesen abzurufen und an die Client-Seite zurückzugeben.

283
00:21:09,235 --> 00:21:13,610
Nun, für die GetFeaturedDish,

284
00:21:13,610 --> 00:21:15,620
erinnern Sie sich, dass für die GetFeaturedDish,

285
00:21:15,620 --> 00:21:20,870
wir suchen nach jenen Gerichten, bei denen die Funktion auf true gesetzt ist.

286
00:21:20,870 --> 00:21:25,790
Nun, hier ist der AngularFire2 ermöglicht es uns,

287
00:21:25,790 --> 00:21:31,180
eine Abfrage zu erstellen und diese Abfrage hier für diese Sammlung bereitzustellen.

288
00:21:31,180 --> 00:21:36,440
Hier sage ich diese.afs Sammlung Gerichte hier,

289
00:21:36,440 --> 00:21:39,520
also verwende ich immer noch die Sammlung, aber dann schauen Sie sich

290
00:21:39,520 --> 00:21:43,140
den zweiten Parameter für diesen Aufruf hier an.

291
00:21:43,140 --> 00:21:49,405
Dies besagt ref, wo sich die Referenz auf jedes Dokument bezieht, das in dieser Sammlung ist.

292
00:21:49,405 --> 00:21:53,330
Dieser Ref sagt der Ref und hier kann ich

293
00:21:53,330 --> 00:21:58,100
diese Abfrage verwenden, die hört, so was sagt.where.

294
00:21:58,100 --> 00:22:04,695
Also, was bedeutet, dass jedes der Dokumente, in denen die vorgestellten,

295
00:22:04,695 --> 00:22:10,445
wie Sie sehen können, die Syntax ist ziemlich einfach, hier zu folgen, die sagt, wo vorgestellten.

296
00:22:10,445 --> 00:22:15,240
Beachten Sie nun, dass die Funktion hier als Zeichenfolge bereitgestellt wird,

297
00:22:15,240 --> 00:22:17,175
und dann der nächste,

298
00:22:17,175 --> 00:22:22,230
der Operator ist gleich, so dass Sie sogar sagen können

299
00:22:22,230 --> 00:22:25,345
größer als, kleiner als, größer oder gleich kleiner oder gleich einem dieser Dinge,

300
00:22:25,345 --> 00:22:30,375
aber beachten Sie, dass dies innerhalb von Zitaten hier und dann Sie wird wahr sagen.

301
00:22:30,375 --> 00:22:35,105
Also, überall dort, wo die Featured Eigenschaft des Dokuments auf true gesetzt ist,

302
00:22:35,105 --> 00:22:36,620
extrahieren Sie alle diese.

303
00:22:36,620 --> 00:22:40,545
Also, diese Abfrage extrahiert nur die Dokumente

304
00:22:40,545 --> 00:22:45,250
aus der Sammlung Gerichte, wo die Funktion auf true gesetzt ist,

305
00:22:45,250 --> 00:22:50,195
und gibt dann nur die Dokumente aus dieser Sammlung hier zurück,

306
00:22:50,195 --> 00:22:53,770
und von dort gehe ich Snapshot-Änderungen und dies wird

307
00:22:53,770 --> 00:22:59,350
ein Array von Dokumenten zurückgeben und von dort werde ich sie zuordnen

308
00:22:59,350 --> 00:23:04,270
in einzelne Geschirrdokumente und seitdem habe ich

309
00:23:04,270 --> 00:23:09,700
dafür gesorgt, dass nur eines dieser Dokumente das Feature auf true gesetzt hat.

310
00:23:09,700 --> 00:23:13,030
Es wird also nur einen von ihnen zurückgeben, aber es wird es als Array zurückgeben.

311
00:23:13,030 --> 00:23:14,980
Deshalb konstruiere ich dies

312
00:23:14,980 --> 00:23:20,195
mit eckiger Klammer Null das erste Element des Arrays,

313
00:23:20,195 --> 00:23:25,210
und tatsächlich wird es nur ein Element enthalten, weil nur ein Element in meiner Sammlung

314
00:23:25,210 --> 00:23:30,745
dieser speziellen Abfrage entspricht, die ich hier mit der Welle eingerichtet habe.

315
00:23:30,745 --> 00:23:36,470
Es gibt andere Abfrage-Setups hier können Sie auch etwas verwenden, das Reihenfolge nach genannt wird.

316
00:23:36,470 --> 00:23:41,000
So können Sie die Sammlung nach einer bestimmten Eigenschaft

317
00:23:41,000 --> 00:23:47,310
und einigen anderen Satz von Abfrageoptionen, die verfügbar sind, sortieren.

318
00:23:47,310 --> 00:23:51,480
Nun, dies wird von Firebase in seiner Cloud Firestore unterstützt,

319
00:23:51,480 --> 00:23:56,890
und das ist, was wir mit AngularFire2 nutzen können, um

320
00:23:56,890 --> 00:24:03,850
den Code in Ihrer Angular-Anwendung zu entwerfen, um die Abfrage von der Client-Seite selbst durchzuführen.

321
00:24:03,850 --> 00:24:09,280
Dies wird also das spezifische Feature Gericht zurückgeben.

322
00:24:09,360 --> 00:24:15,355
Nun, wieder GetDishid wird ähnlich sein, was wir früher getan haben.

323
00:24:15,355 --> 00:24:16,890
Also, keine Modifikation dort.

324
00:24:16,890 --> 00:24:21,370
Nun, für die PostComment wieder,

325
00:24:21,370 --> 00:24:27,820
weil Firebase mit der Cloud Firestore Beta,

326
00:24:27,820 --> 00:24:31,720
hat nicht das Konzept der Bevölkerung,

327
00:24:31,720 --> 00:24:34,015
und so weiter, dass wir früher gesehen haben.

328
00:24:34,015 --> 00:24:39,890
Also, was ich für die Kommentare tun werde, ist, dass ich diese Kommentare als

329
00:24:39,890 --> 00:24:46,140
eine Sammlung veröffentlichen werde, für die in jedem Gericht selbst eingeschlossen ist.

330
00:24:46,140 --> 00:24:52,040
Also, jedes Gericht wird seine eigene Sammlung von Kommentaren zu diesem spezifischen Gericht haben.

331
00:24:52,040 --> 00:24:54,965
Wenn ich den Kommentar poste, verwende ich die DishID

332
00:24:54,965 --> 00:24:57,905
und dann die Kommentarinformationen.

333
00:24:57,905 --> 00:25:01,735
Also, was ich hier mache, ist, dass ich zuerst

334
00:25:01,735 --> 00:25:07,175
das Geschirr abfragen und dann dieses spezielle Gericht erhalten werde.

335
00:25:07,175 --> 00:25:11,555
Sie können also sehen, dass ich die andere Art verwende, nach einem bestimmten Dokument abzufragen.

336
00:25:11,555 --> 00:25:16,070
Also, hier sage ich diese afs.collection ('Gerichte') .doc DishiD.

337
00:25:16,440 --> 00:25:22,660
Also kann ich diese Art verwenden, um auf ein bestimmtes Dokument zuzugreifen, wenn ich möchte.

338
00:25:22,660 --> 00:25:25,610
Der andere Weg haben Sie natürlich schon mit

339
00:25:25,610 --> 00:25:33,375
der GetDish-Methode gesehen, wo ich Doc Gerichte Schrägstrich plus ID sage.

340
00:25:33,375 --> 00:25:38,185
Also, zwei verschiedene Möglichkeiten, ein bestimmtes Dokument innerhalb

341
00:25:38,185 --> 00:25:44,460
einer Sammlung hier und dann DishID und dann Sammlung und Kommentare zu adressieren. Auf

342
00:25:44,460 --> 00:25:46,840
diese Weise heißt es in

343
00:25:46,840 --> 00:25:51,100
dieser Sammlung für dieses spezifische Dokument mit dieser DisHid,

344
00:25:51,100 --> 00:25:54,140
es gibt eine Sammlung, die in

345
00:25:54,140 --> 00:25:57,180
diesem Dokument enthalten ist und diese Sammlung hat die Namenskommentare.

346
00:25:57,180 --> 00:25:59,660
Dies ist also eine Verschachtelung einer Sammlung

347
00:25:59,660 --> 00:26:03,125
in einem Dokument, das sich in einer anderen übergeordneten Verbindung befindet.

348
00:26:03,125 --> 00:26:07,110
Also, diese Art der Verschachtelung von Sammlungen ist von

349
00:26:07,110 --> 00:26:13,590
Firebase Cloud Store Beta bis zu 100 Ebenen erlaubt, wenn Sie dies wünschen, zu wählen.

350
00:26:13,590 --> 00:26:15,700
Also, in dieser Sammlung,

351
00:26:15,700 --> 00:26:17,420
werde ich hinzufügen.

352
00:26:17,420 --> 00:26:20,310
Also, wie fügen Sie ein Dokument zu einer Sammlung hinzu?

353
00:26:20,310 --> 00:26:22,105
Um ein Dokument zu Ihrer Sammlung hinzuzufügen,

354
00:26:22,105 --> 00:26:24,755
verwenden Sie hier die add -Methode für eine Sammlung.

355
00:26:24,755 --> 00:26:27,600
Sie können also sehen, dass

356
00:26:27,600 --> 00:26:30,380
ich auf den Sammlungskommentaren hier ein Add mache und dann

357
00:26:30,380 --> 00:26:33,655
das ist das eigentliche Dokument, das hier hinzugefügt wird.

358
00:26:33,655 --> 00:26:35,280
Also, im Dokument selbst,

359
00:26:35,280 --> 00:26:40,645
werden Sie sehen, dass ich die Autoreneigenschaft hier habe, wo ich die aktuelle ID eingerichtet habe,

360
00:26:40,645 --> 00:26:44,665
und ich habe auch den Vornamen für den Autor hier eingerichtet,

361
00:26:44,665 --> 00:26:50,885
ich diene nur das erste Mal hier also hier sage ich diesen aktuellen Benutzernamen Anzeigenamen.

362
00:26:50,885 --> 00:26:55,625
Wenn der Anzeigename wahr ist, werde ich ihn auf diesen aktuellen Anzeigenamen einstellen.

363
00:26:55,625 --> 00:27:00,960
Wenn das Konto des Benutzers keinen Anzeigenamen hat, der daran angehängt ist, werde ich

364
00:27:00,960 --> 00:27:06,420
hier einfach diese aktuelle Benutzer-E-Mail als Vornamen-Eigenschaft verwenden.

365
00:27:06,420 --> 00:27:11,035
Also, dieses Dokument, das den Kommentar enthält,

366
00:27:11,035 --> 00:27:13,150
trägt automatisch auch dieses Vornamenfeld

367
00:27:13,150 --> 00:27:16,140
und das ist, was ich verwenden werde, um

368
00:27:16,140 --> 00:27:22,495
die Informationen zu rendern, wenn ich die Kommentare in meiner DishDetail-Komponente rendere.

369
00:27:22,495 --> 00:27:28,710
Beachten Sie also, dass ich tatsächlich Informationen hier in jedem der Kommentare dupliziere.

370
00:27:28,710 --> 00:27:31,865
Aber das ist in Ordnung, da diese als

371
00:27:31,865 --> 00:27:34,160
Json-Dokumente auf Firebase gespeichert sind, ist es in Ordnung,

372
00:27:34,160 --> 00:27:36,990
einige der Informationen in den Kommentaren hier zu duplizieren.

373
00:27:36,990 --> 00:27:40,245
Wenn Sie jedoch weitere Details des aktuellen Benutzers wünschen,

374
00:27:40,245 --> 00:27:45,280
haben Sie hier bereits einen Verweis auf die Benutzer-ID, so dass Sie tatsächlich gehen und

375
00:27:45,280 --> 00:27:48,150
das Dokument für den jeweiligen Benutzer abrufen und dann

376
00:27:48,150 --> 00:27:51,485
weitere Informationen über den Benutzer erhalten können, falls Sie sich entscheiden.

377
00:27:51,485 --> 00:27:54,830
Jetzt, als ich Mongo DB plus Mongos verwendet habe,

378
00:27:54,830 --> 00:27:57,950
haben Sie gesehen, dass ich nur die ID des aktuellen Benutzers für

379
00:27:57,950 --> 00:28:01,650
den Autor verwenden werde und dann das Populate verwenden, um diese Informationen zu füllen.

380
00:28:01,650 --> 00:28:05,150
Jetzt hat Cloud Firestore Beta in diesem Moment

381
00:28:05,150 --> 00:28:10,240
kein Konzept von diesem Populate, soweit ich aus der Dokumentation sehen kann,

382
00:28:10,240 --> 00:28:14,335
vielleicht unterstützt eine zukünftige Version eine Möglichkeit,

383
00:28:14,335 --> 00:28:16,800
Informationen aus einem anderen Dokument

384
00:28:16,800 --> 00:28:19,270
einzuziehen und automatisch in das aktuelle Dokument zu füllen.

385
00:28:19,270 --> 00:28:24,500
Wenn das passiert, muss dieser Code geändert werden, um das zu nutzen.

386
00:28:24,500 --> 00:28:26,725
Aber im Moment, wie ich es sehe,

387
00:28:26,725 --> 00:28:29,560
hat Firestore beta nicht die Möglichkeit,

388
00:28:29,560 --> 00:28:33,000
Informationen aus einem anderen Dokument in das aktuelle Dokument zu füllen.

389
00:28:33,000 --> 00:28:36,040
Deshalb repliziere ich nur die

390
00:28:36,040 --> 00:28:39,860
Information, die ich wirklich brauche, wenn ich den Kommentar in

391
00:28:39,860 --> 00:28:43,660
meiner dishdetail-Komponente hier und dann unten unten

392
00:28:43,660 --> 00:28:47,945
hier rendere, können Sie sehen, dass ich die Bewertung und den Kommentar hier und dann auch,

393
00:28:47,945 --> 00:28:49,740
beachten Sie, dass ich

394
00:28:49,740 --> 00:28:57,370
diese beiden erstelle zusätzliche Felder in meinem Kommentar hier namens „CreateDat“ und „UpdateDat“.

395
00:28:57,370 --> 00:29:01,785
Beachten Sie, wie ich den Zeitstempel für die „CreateDat“ lege.

396
00:29:01,785 --> 00:29:05,785
Die Firebase, jetzt, was ist diese Firebase, die ich hier verwende,

397
00:29:05,785 --> 00:29:12,050
ist diese Firebase genau das, was ich hier als von Firebase App importiert habe.

398
00:29:12,050 --> 00:29:15,850
Das bietet mir, wie Sie hier unten hier unten sehen,

399
00:29:15,850 --> 00:29:20,395
das bietet mir denselben Firestore-Feldwert.

400
00:29:20,395 --> 00:29:25,260
Also dieser Aufruf des Firestorm-Feldwerte-Server-Zeitstempel,

401
00:29:25,260 --> 00:29:28,390
wird den aktuellen Zeitstempel für

402
00:29:28,390 --> 00:29:32,605
mich zurückgeben und das sind die Informationen, die ich in der „CreateDat“ speichern werde.

403
00:29:32,605 --> 00:29:35,255
Als ich nun alle Dokumente hier eingefügt habe,

404
00:29:35,255 --> 00:29:40,435
haben Sie gesehen, dass ich dieses Feld „CreateDat“ manuell für jedes der Dokumente erstellt habe.

405
00:29:40,435 --> 00:29:44,110
Jetzt ist dies eine Möglichkeit, dasselbe aus

406
00:29:44,110 --> 00:29:47,895
unserem Angular-Code auf

407
00:29:47,895 --> 00:29:53,040
unserer Client-Seite zu tun und dasselbe für das Feld „updateDat“, das Sie hier sehen werden.

408
00:29:53,040 --> 00:29:55,270
Wenn Sie also einen neuen Kommentar posten,

409
00:29:55,270 --> 00:30:00,330
sehen Sie, dass Sie auf diese Weise einen neuen Kommentar zu diesem Server hinzufügen.

410
00:30:00,330 --> 00:30:03,630
Nun, das gibt ein Versprechen zurück, und das sind die Informationen

411
00:30:03,630 --> 00:30:07,410
, die ich hier verwende, um dieses Versprechen hier zu konstruieren.

412
00:30:07,410 --> 00:30:10,930
Dann diese andere Methode hier sagen „GetComments“,

413
00:30:10,930 --> 00:30:16,930
diese „GetComments, wie Sie sehen können, ist der Zugriff auf AFS Sammlung Gerichte,

414
00:30:16,930 --> 00:30:22,420
doc dishid und dann Sammlung Kommentare und die Benachrichtigung, dass

415
00:30:22,420 --> 00:30:26,580
ich hier nicht jede Kommentar-ID

416
00:30:26,580 --> 00:30:31,220
selbst benötigen, die ich nicht in meinem Angular verwenden werde Petition sowieso,

417
00:30:31,220 --> 00:30:33,230
anstatt Snapshot-Änderungen zu verwenden,

418
00:30:33,230 --> 00:30:36,285
verwende ich nur Wertänderungen und dies wird

419
00:30:36,285 --> 00:30:42,170
alle Dokumente in dieser Kommentarsammlung für dieses bestimmte Dokument

420
00:30:42,170 --> 00:30:47,455
die Dishid aus der Geschirrsammlung hier zurückgeben

421
00:30:47,455 --> 00:30:53,320
und das wird zurückgegeben und diese Kommentare werden ich in meine dishdetail Komponente.

422
00:30:53,320 --> 00:30:58,210
Nun, in Mongos, haben Sie gesehen, dass die Tatsache, dass ich die UserID enthalten

423
00:30:58,210 --> 00:31:02,920
, bedeutet, dass ich diese Informationen jetzt mit Firebase

424
00:31:02,920 --> 00:31:05,740
kopulieren könnte, es gibt keine Möglichkeit, die allgemeinen Informationen hier zu füllen,

425
00:31:05,740 --> 00:31:10,870
deshalb gehe ich explizit und fülle dann die Kommentare in

426
00:31:11,210 --> 00:31:15,250
meinem Essdetail -Komponente, um alle Kommentare zu

427
00:31:15,250 --> 00:31:20,000
diesem speziellen Gericht zu holen, wenn ich sie in der dishdetail-Komponente rendere.

428
00:31:20,000 --> 00:31:22,830
Sie sehen also, dass ich

429
00:31:22,830 --> 00:31:26,480
den Angular-Code ein wenig anpassen musste, um damit umzugehen, dass

430
00:31:26,480 --> 00:31:29,765
Firebase bestimmte Dinge nicht unterstützt, die Mongos

431
00:31:29,765 --> 00:31:33,605
zumindest im Moment unterstützt Cloud Firestore Beta diese Dinge nicht unterstützt,

432
00:31:33,605 --> 00:31:38,420
und daher musste ich umgehen, um mit dem umzugehen, was Firebase ermöglicht es mir

433
00:31:38,420 --> 00:31:45,365
, die Firebase-Server-Site zu speichern und abzurufen.

434
00:31:45,365 --> 00:31:51,640
Nun ist es auch für uns interessant, den Auth Service hier kurz zu besuchen.

435
00:31:51,640 --> 00:31:54,060
Der Auth Dienst hier wieder,

436
00:31:54,060 --> 00:31:59,875
beachten Sie, dass ich im Auth Dienst hier diese AngularFireAuth aus

437
00:31:59,875 --> 00:32:06,435
dem AngularFire zu npm Submodul hier importiere.

438
00:32:06,435 --> 00:32:11,005
Also, hier können Sie sehen, dass ich AngularFireAuth importiere und das

439
00:32:11,005 --> 00:32:15,970
gibt mir Zugriff auf den Authentifizierungsaspekt von Firebase.

440
00:32:15,970 --> 00:32:21,690
Nun, lassen Sie uns sehen, wie Firebase-Authentifizierung tatsächlich von unserer Angular-Anwendung aus funktioniert.

441
00:32:21,690 --> 00:32:26,300
Jetzt werden wir das beginnen, indem wir uns ansehen, wie Login implementiert wird.

442
00:32:26,300 --> 00:32:28,775
Also, hier implementiere ich den Login,

443
00:32:28,775 --> 00:32:31,420
wo ich die E-Mail und das Passwort verwende.

444
00:32:31,420 --> 00:32:38,090
Also, dieser Teil, wenn ich die AngularFireAuth hier importiere,

445
00:32:38,090 --> 00:32:44,910
beachte, dass der Konstruktor, den ich die AngularFireAuth in meinen Konstruktor injiziere.

446
00:32:44,910 --> 00:32:47,260
Dies wird also den AngularFireAuth-Dienst

447
00:32:47,260 --> 00:32:50,240
in meinen Konstruktor injizieren und dies gibt mir Zugriff auf

448
00:32:50,240 --> 00:32:55,975
die Firebase-Authentifizierung auf der Server-Site, damit ich Benutzer authentifizieren kann.

449
00:32:55,975 --> 00:33:01,555
Also, wenn ich einen Benutzer authentifizieren möchte, der sich mit der E-Mail und dem Passwort anmeldet.

450
00:33:01,555 --> 00:33:04,490
Diese Login-Funktion ist diejenige, die aufgerufen wird,

451
00:33:04,490 --> 00:33:07,300
wenn ich meine E-Mail und mein Passwort in

452
00:33:07,300 --> 00:33:10,110
den Login-Dialog eingebe, den ich auftauche und dann

453
00:33:10,110 --> 00:33:13,735
auf den Submit-Button oder den Login-Button hier klicke,

454
00:33:13,735 --> 00:33:16,120
wird diese Login-Funktion aufgerufen und

455
00:33:16,120 --> 00:33:20,845
die Benutzerinformationen, aber ich rufe von der Login-Komponente wird hier übergeben.

456
00:33:20,845 --> 00:33:22,985
Also, wenn es hier kommt,

457
00:33:22,985 --> 00:33:29,410
werde ich diese AfAuth verwenden, wie Sie sehen, ich habe es gerade in den Konstruktor injiziert,

458
00:33:29,410 --> 00:33:33,995
und das liefert dieses Auth Objekt hier,

459
00:33:33,995 --> 00:33:38,715
das diese Methode namens „Anmeldung mit E-Mail und Passwort“ liefert.

460
00:33:38,715 --> 00:33:43,530
Diese Anmeldung mit E-Mail und Passwort erfordert also zwei Parameter hier, wie Sie den

461
00:33:43,530 --> 00:33:49,495
Benutzernamen des Benutzers oder die E-Mail und das Passwort hier erwarten würden.

462
00:33:49,495 --> 00:33:53,310
Also diese beiden Informationen gebe ich

463
00:33:53,310 --> 00:33:57,290
es als die beiden Parameter für diese Anmeldung mit E-Mail und Passwort.

464
00:33:57,290 --> 00:33:59,965
Also, wenn Sie darauf klicken, werden Sie sehen, dass es

465
00:33:59,965 --> 00:34:03,790
besagt, dass die erste E-Mail sein sollte und die zweite Passwort sein sollte.

466
00:34:03,790 --> 00:34:05,455
Nun, wie ich es eingerichtet habe,

467
00:34:05,455 --> 00:34:09,590
enthält dieses Benutzerobjekt, das eingeht, die E-Mail im

468
00:34:09,590 --> 00:34:16,735
user.username hier und das Passwort in der passwort-Eigenschaft des Benutzerobjekts.

469
00:34:16,735 --> 00:34:18,925
Also, wenn das erhalten wird,

470
00:34:18,925 --> 00:34:24,670
dann werde ich diese Informationen posten und dann, wenn dies erfolgreich abgeschlossen ist,

471
00:34:24,670 --> 00:34:27,430
bedeutet das, dass der Benutzer richtig eingeloggt

472
00:34:27,430 --> 00:34:29,075
ist, wenn es einen Fehler gibt,

473
00:34:29,075 --> 00:34:31,510
dann fangen Sie den Fehler hier gerade jetzt Ich

474
00:34:31,510 --> 00:34:33,960
mache nichts speziell mit dem Fehler, den Sie können

475
00:34:33,960 --> 00:34:38,820
möchten diese Fehlermeldung ausdrucken, um anzuzeigen, dass der Benutzer sich nicht anmelden kann usw.

476
00:34:38,820 --> 00:34:42,070
Also, ich habe diesen Teil des Deals hier nicht implementiert,

477
00:34:42,070 --> 00:34:45,390
ich lasse es nur dort, wenn Sie

478
00:34:45,390 --> 00:34:48,740
diese Informationen konsolen möchten, können Sie das tun, wenn Fehler auftreten.

479
00:34:48,740 --> 00:34:51,495
Jetzt zum Abmelden, in Firebase.

480
00:34:51,495 --> 00:34:56,610
Wieder nehmen wir die Hilfe der AfAuth, die wir injiziert haben und Auth darauf,

481
00:34:56,610 --> 00:34:58,975
und dies stellt diese Methode namens „sign out“ zur Verfügung,

482
00:34:58,975 --> 00:35:01,815
die beim Aufruf den aktuell angemeldeten

483
00:35:01,815 --> 00:35:05,610
Benutzer abmeldet und so eine Möglichkeit ist, dies zu handhaben.

484
00:35:05,610 --> 00:35:09,795
Nun, Sie müssen sich fragen, wie ich mit dem Google-Login-Teil umgehen.

485
00:35:09,795 --> 00:35:17,980
Jetzt wird dies auch mit dem AfAuth gehandhabt, so dass das AngularFire2-Modul, das ich verwende,

486
00:35:17,980 --> 00:35:22,780
diese Informationen für diese Methoden für uns durch

487
00:35:22,780 --> 00:35:28,880
das Firebase-Modul liefert, das auch in AngularFire2 verwendet wird,

488
00:35:28,880 --> 00:35:33,105
und so liefert dies diese Methode namens Anmeldung mit Pop und wenn

489
00:35:33,105 --> 00:35:37,280
wir uns mit Pop- hier oben bemerken, was ich hier spezifiziere.

490
00:35:37,280 --> 00:35:42,650
Also, ich sage „new firebase.auth.GoogleAuthProvider“.

491
00:35:42,650 --> 00:35:48,200
Jetzt können Sie auch Firebase.auth.FaceBookAuthProvider und andere tun.

492
00:35:48,200 --> 00:35:52,170
Wie Sie aus der vorherigen Übung gesehen haben,

493
00:35:52,170 --> 00:35:58,835
ermöglicht Firebase Ihnen die Anmeldung von Drittanbietern entweder mit Google,

494
00:35:58,835 --> 00:36:01,520
Facebook, GitHub und Twitter.

495
00:36:01,520 --> 00:36:04,440
So können Sie diese entsprechend konfigurieren,

496
00:36:04,440 --> 00:36:07,260
da ich nur die Google-Autorisierung aktiviert habe.

497
00:36:07,260 --> 00:36:10,470
So werde ich es einrichten, um

498
00:36:10,470 --> 00:36:16,160
meine Google-Autorisierung hier zu verwenden und diese einzige Codezeile, die ich hier eingeschlossen habe,

499
00:36:16,160 --> 00:36:23,650
ist diejenige, die das Pop-up des Browsers verursacht, der mir vorschlägt,

500
00:36:23,650 --> 00:36:31,580
meine Firebase zu autorisieren, Google-Autorisierung mit meinem Google-Konto hier zu verwenden.

501
00:36:31,580 --> 00:36:34,210
Das ist also der zweite Teil, den ich hier eingerichtet habe.

502
00:36:34,210 --> 00:36:38,929
Beachten Sie also, dass der Authentifizierungsdienst

503
00:36:38,929 --> 00:36:44,170
im Vergleich zu dem, was wir mit der vorherigen Version dieser Anwendung gemacht haben, erheblich vereinfacht hat.

504
00:36:44,170 --> 00:36:49,755
So können Sie die beiden Versionen vergleichen, um zu sehen, wie sich dies von der anderen unterscheidet.

505
00:36:49,755 --> 00:36:54,410
Nun, nicht nur, dass dieser AfAuth, den wir hier injiziert haben,

506
00:36:54,410 --> 00:36:57,365
AngularFireAuth Teil, den wir hier injiziert haben,

507
00:36:57,365 --> 00:37:01,800
bietet auch dieses beobachtbare namens „AuthState“.

508
00:37:01,800 --> 00:37:08,045
Dieser AuthState beobachtbar, kann abonniert werden und dieser „AuthState“ beobachtbar,

509
00:37:08,045 --> 00:37:10,130
wie Sie hier sehen,

510
00:37:10,130 --> 00:37:15,880
was ich hier als beobachtbare Firebase.User deklariert habe.

511
00:37:15,880 --> 00:37:21,400
Also, das ist die Information, die hier angewendet wird und wir können auch

512
00:37:21,400 --> 00:37:27,465
eine andere Variable hier namens aktuellen Benutzer einrichten, die vom Typ Firebase-Benutzer hier ist.

513
00:37:27,465 --> 00:37:31,610
Also, dieser AfAuthState ist ein Observable, das

514
00:37:31,610 --> 00:37:35,570
ich abonnieren kann und wann immer dieser AuthState ändert,

515
00:37:35,570 --> 00:37:38,935
verfolgt der AuthState den Authentifizierungsstatus des Benutzers,

516
00:37:38,935 --> 00:37:42,780
ob der Benutzer eingeloggt oder abgemeldet ist und wenn der Benutzer angemeldet ist,

517
00:37:42,780 --> 00:37:47,930
dann wird dies abonnieren wird mir die Benutzerinformationen und aus

518
00:37:47,930 --> 00:37:53,475
den Benutzerinformationen können wir viele Informationen abrufen, einschließlich der Anzeigename,

519
00:37:53,475 --> 00:37:58,475
die E-Mail, die Profil-ID und dann das

520
00:37:58,475 --> 00:38:04,535
Avatar-Bild für den Benutzer, wenn es für die spezifischen Konten eingerichtet wurde.

521
00:38:04,535 --> 00:38:07,555
All diese werden uns automatisch vom Nutzer zur Verfügung gestellt.

522
00:38:07,555 --> 00:38:10,660
Wenn Sie also auf „Benutzer“ und dann Punkt klicken,

523
00:38:10,660 --> 00:38:14,445
werden Sie sehen, dass es all diese Informationen für uns zur Verfügung stellt.

524
00:38:14,445 --> 00:38:16,870
Es ist also eine Anzeigenamen-E-Mail,

525
00:38:16,870 --> 00:38:19,835
ob die E-Mail verifiziert ist oder nicht und so weiter.

526
00:38:19,835 --> 00:38:22,855
Also einige der Dinge, die spezifisches Interesse für uns sind.

527
00:38:22,855 --> 00:38:29,325
Foto-URL, die verwendet werden kann, um die Avatar-Informationen für den Benutzer abzurufen,

528
00:38:29,325 --> 00:38:32,430
Provider-ID, die angibt, wer

529
00:38:32,430 --> 00:38:35,755
diese Informationen für Sie bereitstellt, wäre dies entweder Facebook

530
00:38:35,755 --> 00:38:43,415
ID, Google ID und GitHub ID und so weiter und zusätzliche Informationen sogar das Refresh-Token.

531
00:38:43,415 --> 00:38:46,390
Sie sehen also eine Reihe von Informationen, die

532
00:38:46,390 --> 00:38:49,840
Ihnen über das Benutzerobjekt zur Verfügung gestellt werden, das

533
00:38:49,840 --> 00:38:53,285
von diesem Authstate zurückgegeben wird, wenn Sie es abonnieren,

534
00:38:53,285 --> 00:38:57,400
und lassen Sie mich auch Ihre Aufmerksamkeit auf die UID der Benutzer-ID lenken,

535
00:38:57,400 --> 00:39:01,830
und das ist, was verwendet werden kann, um den Benutzer in unserer Anwendung zu indizieren.

536
00:39:01,830 --> 00:39:05,950
Das ist also der Authentifizierungsdienst so, wie ich

537
00:39:05,950 --> 00:39:10,325
ihn eingerichtet habe, um die Firebase-Authentifizierung in dieser Anwendung zu verwenden.

538
00:39:10,325 --> 00:39:14,730
Also, zwei Änderungen, die ich an Sie reflektiert habe, um zu zeigen,

539
00:39:14,730 --> 00:39:19,180
wie meine Dienste geändert werden Firebase zu verwenden.

540
00:39:19,180 --> 00:39:23,605
Viele der Updates, die ich an meiner Angular-Anwendung gemacht habe, sind alle

541
00:39:23,605 --> 00:39:28,115
in den Diensten, um Firebase zu verwenden installiert.

542
00:39:28,115 --> 00:39:31,900
Also, wegen des Babys strukturiert von Angular Anwendung,

543
00:39:31,900 --> 00:39:34,390
waren die Komponenten einfach abhängig von den Diensten und

544
00:39:34,390 --> 00:39:37,330
die Dienste waren diejenigen, die wir mit dem Back-End sprechen.

545
00:39:37,330 --> 00:39:39,660
Also, viele der Updates, die ich an

546
00:39:39,660 --> 00:39:43,040
meiner Angular-Anwendung getan habe, beinhalten nur die Aktualisierung dieser Dienste, um

547
00:39:43,040 --> 00:39:50,660
Googles Firebase-Back-End als Dienst mit den beiden npm-Modulen,

548
00:39:50,660 --> 00:39:53,815
Firebase und AngularFireAuth hier zu verwenden.

549
00:39:53,815 --> 00:39:58,690
Sie würden also sehen, dass ein Großteil der Updates auf

550
00:39:58,690 --> 00:40:04,285
all diese Dienste beschränkt ist, die ich im Dienstordner meiner Angular-Anwendung habe.

551
00:40:04,285 --> 00:40:06,710
Natürlich musste ich ein wenig

552
00:40:06,710 --> 00:40:09,615
minimale Anpassungen an der dishdetail-Komponente

553
00:40:09,615 --> 00:40:15,430
und der Header-Komponente vornehmen, damit es mit Firebase funktioniert.

554
00:40:15,430 --> 00:40:19,485
Sie können die Headercomponent.ts, die

555
00:40:19,485 --> 00:40:25,760
headercomponent.html und die dishdetailcomponent.tsfile schnell besuchen, um zu sehen, wie sich der Code

556
00:40:25,760 --> 00:40:29,210
zwischen der vorherigen Version

557
00:40:29,210 --> 00:40:32,070
und der aktuellen Version der Angular-Anwendung,

558
00:40:32,070 --> 00:40:36,360
der vorherigen Version, geändert hat, meine ich die Version, die wir für

559
00:40:36,360 --> 00:40:39,490
Kommunikation mit unserem X plus

560
00:40:39,490 --> 00:40:43,230
Mongo DB-Server, den wir in der vorherigen Übung verwendet haben.

561
00:40:43,230 --> 00:40:48,265
Nun, ein weiterer Ort, an dem Sie sehen würden, wie ich Änderungen

562
00:40:48,265 --> 00:40:51,640
vornehme, ist interessanterweise im Lieblingsdienst.

563
00:40:51,640 --> 00:40:55,280
Im Lieblingsdienst

564
00:40:55,280 --> 00:40:58,410
ist die Art und Weise, wie ich die Favoriten des Benutzers gespeichert habe, dass die Favoriten eine Sammlung auf

565
00:40:58,410 --> 00:41:02,015
meiner Serverwebsite sind und der Favorit selbst Dokumente enthält.

566
00:41:02,015 --> 00:41:06,550
Jedes Dokument enthält die Benutzer-ID und die Dish-ID.

567
00:41:06,550 --> 00:41:09,210
Ein bestimmter Benutzer könnte also

568
00:41:09,210 --> 00:41:13,335
mehrere Dokumente haben, die jeweils die Benutzer-ID und die Dish-ID speichern.

569
00:41:13,335 --> 00:41:20,035
Also, eine Sammlung von ihnen zusammen definiert alle Favoriten für einen bestimmten Benutzer.

570
00:41:20,035 --> 00:41:25,865
Ich habe festgestellt, dass dies eine bessere Möglichkeit ist, diese Daten in Firebase zu organisieren.

571
00:41:25,865 --> 00:41:29,195
In unserem MongoDB plus Mongos

572
00:41:29,195 --> 00:41:34,230
haben Sie gesehen, dass ich in ein Array von Dish IDs in

573
00:41:34,230 --> 00:41:40,575
das Favoriten-Dokument eingebettet hatte und dann das Lieblingsschema auf diese Weise definiert habe.

574
00:41:40,575 --> 00:41:43,010
Hier verwende ich

575
00:41:43,010 --> 00:41:47,395
ein separates Dokument, um jeden der Favoriten für jeden Benutzer zu verfolgen.

576
00:41:47,395 --> 00:41:50,295
Da Firebase die

577
00:41:50,295 --> 00:41:55,545
Abfrage unterstützt, kann ich nun meine Firebase abfragen und alle Dokumente extrahieren, die die gleichen Benutzer-IDs haben,

578
00:41:55,545 --> 00:41:58,585
die mit dem aktuell angemeldeten Benutzer übereinstimmen und dann

579
00:41:58,585 --> 00:42:02,405
die entsprechenden Dish-IDs aus den Favoriten extrahieren.

580
00:42:02,405 --> 00:42:05,250
Dann werde ich gehen und dann meinen Server abfragen

581
00:42:05,250 --> 00:42:08,475
und die Gerichteninformationen für jedes dieser Gerichte erhalten.

582
00:42:08,475 --> 00:42:13,325
Also, es beinhaltet mehrere Reisen zum Server, um

583
00:42:13,325 --> 00:42:18,680
alle meine Lieblingsgerichte Informationen zu erhalten, bevor ich meine Liste der Favoriten rendern kann.

584
00:42:18,680 --> 00:42:24,180
Aber das ist der beste Weg, um Firebase mit meiner Angular-Anwendung zu arbeiten.

585
00:42:24,180 --> 00:42:26,945
Vielleicht

586
00:42:26,945 --> 00:42:30,740
könnte Firebase Cloud Firestone zu einem späteren Zeitpunkt erweitern, um

587
00:42:30,740 --> 00:42:34,475
etwas wie bevölkern zu ermöglichen, das wir mit Mongos gemacht haben.

588
00:42:34,475 --> 00:42:38,570
In diesem Fall werde ich den Code aktualisieren, um auf diese Weise

589
00:42:38,570 --> 00:42:42,705
alle Gerichteninformationen automatisch zu erhalten.

590
00:42:42,705 --> 00:42:48,420
Daher wird die Belastung für die Erstellung dieses zusammengesetzten Dokuments auf den Serverstandort verschoben.

591
00:42:48,420 --> 00:42:51,740
Im Moment erledigt mein Klient einen Großteil der Arbeit hier.

592
00:42:51,740 --> 00:42:53,795
Wenn Sie jetzt hier reingehen,

593
00:42:53,795 --> 00:42:56,400
werden Sie sehen, dass

594
00:42:56,400 --> 00:42:59,495
Sie in der GetFavorites-Methode sehen, wie ich hier auf meine Favoriten zugreife.

595
00:42:59,495 --> 00:43:02,835
Also, wenn ich „Getfavorites“ mache, frage ich

596
00:43:02,835 --> 00:43:06,220
diese Sammlung von Favoriten ab, aber merke, dass

597
00:43:06,220 --> 00:43:12,545
ich hier sage „ref wo ist diese Benutzer-ID“.

598
00:43:12,545 --> 00:43:15,335
Diese Benutzer-ID erhalte ich hier.

599
00:43:15,335 --> 00:43:18,320
Also, im Konstruktor meines Lieblingsservers,

600
00:43:18,320 --> 00:43:22,855
abonniere ich diesen Authentifizierungsdienst den Status Get Auth im Auth Dienst.

601
00:43:22,855 --> 00:43:25,075
Also, im Auth Dienst, wenn Sie gehen,

602
00:43:25,075 --> 00:43:28,615
sehen Sie diese Methode namens Get Auth-Status hier.

603
00:43:28,615 --> 00:43:33,175
Der Status „Get Auth“ gibt den this.authState zurück

604
00:43:33,175 --> 00:43:35,575
, den ich genau dort definiert habe.

605
00:43:35,575 --> 00:43:39,760
Also, das wird ein Beobachtbarer sein, wie Sie sehen, wie ich hier deklariere.

606
00:43:39,760 --> 00:43:41,800
Also, das beobachtbare ist diejenige,

607
00:43:41,800 --> 00:43:46,755
die ich in meinem Lieblingsdienst verwenden und dann abonnieren werde.

608
00:43:46,755 --> 00:43:53,720
Jedes Mal, wenn sich die Benutzerinformationen ändern, wird dies hier automatisch widergespiegelt.

609
00:43:53,720 --> 00:43:59,180
Sie haben also gesehen, dass ich selbst in der früheren Anwendung ein Observable verwendet hatte,

610
00:43:59,180 --> 00:44:04,525
um die Benutzerinformationen in meine Header-Komponente zu reflektieren.

611
00:44:04,525 --> 00:44:06,030
Ähnliche Art von Ansatz

612
00:44:06,030 --> 00:44:08,600
, den ich hier in meiner Favoriten-Komponente verwende,

613
00:44:08,600 --> 00:44:13,055
um die Benutzer-ID für den aktuell angemeldeten Benutzer zu erhalten.

614
00:44:13,055 --> 00:44:16,385
Wenn ich also die Sammlung Meine Favoriten abfrage,

615
00:44:16,385 --> 00:44:22,825
werde ich nur die Dokumente abfragen und extrahieren, in denen der Benutzer dem entspricht.

616
00:44:22,825 --> 00:44:26,220
Dann verwende ich nur die Wertänderungen hier.

617
00:44:26,220 --> 00:44:29,210
Also extrahiere ich nur alle Dokumente,

618
00:44:29,210 --> 00:44:34,650
dass mir die ID des Favoritendokuments in diesem Moment egal ist.

619
00:44:34,650 --> 00:44:37,970
Also, ich extrahiere sie nur alle und benutze sie.

620
00:44:37,970 --> 00:44:40,690
Wenn der Benutzer nicht angemeldet ist und wie Sie sehen können,

621
00:44:40,690 --> 00:44:43,620
werfe ich hier einen Fehler mit dem beobachtbaren Sprichwort

622
00:44:43,620 --> 00:44:50,735
„kein Benutzer angemeldet“, das ist, was in meiner Lieblingssprache dort angezeigt wird.

623
00:44:50,735 --> 00:44:53,960
Jetzt werden die IsFavorites auch hier aktualisiert,

624
00:44:53,960 --> 00:44:57,685
aber in den IsFavorites, was ich mache, ist, dass ich zur DB gehe.

625
00:44:57,685 --> 00:45:02,795
Jetzt werde ich hier auf die Datenbank zugreifen, indem ich sage:

626
00:45:02,795 --> 00:45:06,135
„DB ist gleich firebase.firestore“.

627
00:45:06,135 --> 00:45:09,610
Erinnern Sie sich, dass ich Firebase hier

628
00:45:09,610 --> 00:45:12,270
importiere, importieren Sie Stern als Firebase hier.

629
00:45:12,270 --> 00:45:17,970
Die Angular Firestore selbst stellt mir keine Methode zur Verfügung, um

630
00:45:17,970 --> 00:45:23,970
hier mehrere zusammengesetzte Abfragen durchzuführen.

631
00:45:23,970 --> 00:45:29,495
Das Angular Firestore oder das Angular Feuer, um mir das nicht zu tun.

632
00:45:29,495 --> 00:45:33,390
Deshalb muss ich auf Firebase Firestore zurückgreifen.

633
00:45:33,390 --> 00:45:35,840
Also, wenn ich Firebase Firestore sage,

634
00:45:35,840 --> 00:45:42,310
gibt mir das einen Verweis auf die Firestore-Datenbank und dann kann ich in diese Datenbank gehen

635
00:45:42,310 --> 00:45:48,780
und dann „DB-Sammlungsfavoriten“ sagen und dann kann ich hier mehrere Abfragen durchführen.

636
00:45:48,780 --> 00:45:55,470
Also, ich sage, .wo der Benutzer this.wheredish ist die Dish-ID.

637
00:45:55,470 --> 00:45:59,380
Also, wenn ich einen bestimmten Favoriten erhalten möchte.

638
00:45:59,380 --> 00:46:03,640
Um zu überprüfen, ob ein bestimmtes Gericht der Favorit eines Benutzers ist, erhalte ich

639
00:46:03,640 --> 00:46:08,285
dieses bestimmte Dokument, in dem der Benutzer und das Gericht mit diesen beiden übereinstimmen,

640
00:46:08,285 --> 00:46:12,110
wenn sie nicht übereinstimmen, wird es mit einem leeren zurückkehren.

641
00:46:12,110 --> 00:46:16,610
Also, dass ich extrahiere und dann diesen Wert hier zurückgebe.

642
00:46:16,610 --> 00:46:18,900
Nun, dann poste ich Favoriten,

643
00:46:18,900 --> 00:46:25,770
Sie sehen, wie ich das mache, sage ich diese AFS Sammlung Favoriten und ich werde sagen „hinzufügen“.

644
00:46:25,770 --> 00:46:29,260
Schauen Sie sich das Dokument an, das ich in meinen Favoriten ablage.

645
00:46:29,260 --> 00:46:32,130
Das Dokument selbst enthält die Benutzer-ID und die Dish-ID.

646
00:46:32,130 --> 00:46:36,030
Also, diese beiden Informationen hier eingeschlossen und wenn

647
00:46:36,030 --> 00:46:41,295
nicht, dann wird es das Versprechen ablehnen, ohne dass hier kein Benutzer angemeldet ist.

648
00:46:41,295 --> 00:46:44,915
In ähnlicher Weise für den Löschfavoriten, den ich hier implementiert habe.

649
00:46:44,915 --> 00:46:48,735
Verbringen Sie noch einige Zeit damit, diesen Code zu durchlaufen, um zu verstehen, wie ich

650
00:46:48,735 --> 00:46:53,375
Firebase und Angular Fire zu npm-Modulen genutzt habe,

651
00:46:53,375 --> 00:47:02,170
um mit meinem Firebase-Server zu kommunizieren, den ich in der vorherigen Übung eingerichtet habe.

652
00:47:02,170 --> 00:47:05,880
Damit habe ich Ihnen einen schnellen Überblick darüber gegeben,

653
00:47:05,880 --> 00:47:10,280
wie Sie Ihre Angular-Anwendung so einrichten können, dass sie mit

654
00:47:10,280 --> 00:47:13,980
Firebase-Back-End als Dienst interagieren und dann

655
00:47:13,980 --> 00:47:19,970
verschiedene Operationen unterstützen können, die Sie innerhalb Ihrer Angular-Anwendung haben.

656
00:47:19,970 --> 00:47:21,905
Wie ich bereits gezeigt habe,

657
00:47:21,905 --> 00:47:24,150
sieht diese Angular-Anwendung genau wie

658
00:47:24,150 --> 00:47:26,690
die vorherige Version der Angular-Anwendung aus, in der wir

659
00:47:26,690 --> 00:47:31,915
unsere eigene Version unseres Express MongoDB-Servers verwendet haben.

660
00:47:31,915 --> 00:47:38,510
Nun, damit schließe ich diese spezielle Übung ab, in der ich in

661
00:47:38,510 --> 00:47:42,020
dieser Lektion über Back-End als Service illustriert habe und

662
00:47:42,020 --> 00:47:46,630
Firebase als Beispiel für ein Back-End als Service demonstriert habe.