1
00:00:03,950 --> 00:00:06,525
Nell'esercizio precedente,

2
00:00:06,525 --> 00:00:09,990
avevamo già configurato il nostro backend Firebase come

3
00:00:09,990 --> 00:00:15,120
servizio con il nuovo progetto e anche impostato molti

4
00:00:15,120 --> 00:00:19,620
dati nel nostro database e quindi impostato il nostro storage e

5
00:00:19,620 --> 00:00:25,120
configurato il nostro Firebase Server per fungere da back-end per la nostra applicazione Angular.

6
00:00:25,120 --> 00:00:29,160
In questo esercizio, vedremo una versione modificata della

7
00:00:29,160 --> 00:00:33,480
nostra applicazione Angular che fa uso del backend Firebase come

8
00:00:33,480 --> 00:00:37,500
servizio al fine di ottenere i dati e

9
00:00:37,500 --> 00:00:41,915
memorizzare anche le informazioni per gli utenti sui server.

10
00:00:41,915 --> 00:00:44,480
Inoltre, sfrutteremo

11
00:00:44,480 --> 00:00:48,455
il supporto di autenticazione fornito da Firebase per autenticare

12
00:00:48,455 --> 00:00:56,295
gli utenti utilizzando un approccio e-mail e password e anche utilizzando un account Google.

13
00:00:56,295 --> 00:00:59,775
Per iniziare a questo esercizio,

14
00:00:59,775 --> 00:01:02,750
vai in una posizione comoda sul tuo computer e

15
00:01:02,750 --> 00:01:07,190
poi clona il repository Git dato in cui

16
00:01:07,190 --> 00:01:14,775
ti ho fornito la versione Angular Firebase della nostra applicazione Angular.

17
00:01:14,775 --> 00:01:17,490
Quindi digita, git clona

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
e poi clona

20
00:01:28,670 --> 00:01:34,835
il repository Git e una volta che il repository Git è stato clonato sul tuo computer,

21
00:01:34,835 --> 00:01:43,355
quindi spostati

22
00:01:43,355 --> 00:01:47,570
nella cartella Firebase angolare confusione che verrà creata a questo punto e

23
00:01:47,570 --> 00:01:52,110
poi notare che un sacco di file sono già installati lì.

24
00:01:52,110 --> 00:01:56,015
Andiamo avanti e facciamo un'installazione npm per installare

25
00:01:56,015 --> 00:02:01,890
tutti i moduli nodo da cui dipende questa applicazione angolare.

26
00:02:01,890 --> 00:02:04,520
Questa versione installerà anche

27
00:02:04,520 --> 00:02:10,010
due moduli nodo aggiuntivi chiamati Firebase e quindi Angular fire two.

28
00:02:10,010 --> 00:02:15,525
Spiegherò un po 'di più su questi due moduli nodo più avanti in questo esercizio.

29
00:02:15,525 --> 00:02:18,915
Una volta completata l'installazione del progetto,

30
00:02:18,915 --> 00:02:23,360
apri il progetto in un editor e poi nel progetto,

31
00:02:23,360 --> 00:02:27,830
vai nella cartella degli ambienti di origine e

32
00:02:27,830 --> 00:02:32,420
poi apri il file environment.ts e nel file environment.ts,

33
00:02:32,420 --> 00:02:36,980
vedrai un set di configurazione Firebase che

34
00:02:36,980 --> 00:02:42,130
devi configurare con il tuo propria configurazione del server Firebase.

35
00:02:42,130 --> 00:02:45,105
Come abbiamo visto nell'esercizio precedente,

36
00:02:45,105 --> 00:02:48,950
siamo in grado di ottenere tutte queste informazioni quando clicchiamo su

37
00:02:48,950 --> 00:02:53,150
questo pulsante qui chiamato «Aggiungi Firebase alla tua app web» e quindi

38
00:02:53,150 --> 00:03:01,835
copiare queste informazioni e quindi incollare

39
00:03:01,835 --> 00:03:06,500
queste informazioni nel tuo file environment.ts per sostituirli con il tuo specifico Configurazione dei server Firebase

40
00:03:06,500 --> 00:03:10,940
per tutte queste informazioni e una volta completata, è

41
00:03:10,940 --> 00:03:17,390
possibile avviare l'applicazione Angular digitando «ng serve» al prompt.

42
00:03:17,390 --> 00:03:21,735
Una volta che la tua applicazione Angular è stata compilata con «ng serve»,

43
00:03:21,735 --> 00:03:29,905
vai su un browser e quindi digita localhost: 4200 per caricare nella

44
00:03:29,905 --> 00:03:34,850
tua applicazione Angular e noterai che la tua applicazione Angular è compilata

45
00:03:34,850 --> 00:03:40,215
e quindi caricata nel tuo browser proprio come prima.

46
00:03:40,215 --> 00:03:43,190
Quindi, una volta che la tua applicazione Angular è attiva e funzionante,

47
00:03:43,190 --> 00:03:47,585
noterai che questa versione dell'applicazione Angular farà uso

48
00:03:47,585 --> 00:03:51,260
del server Firebase che hai impostato

49
00:03:51,260 --> 00:03:55,625
nell'esercizio precedente e quindi qui vedrai la pagina «Home»,

50
00:03:55,625 --> 00:04:00,030
la pagina «Informazioni» come vediamo qui e il

51
00:04:00,030 --> 00:04:09,615
« Menu» e la pagina «Contatto» e, ovviamente, dato che non abbiamo effettuato l'accesso,

52
00:04:09,615 --> 00:04:14,975
la pagina «I miei preferiti» mostrerà un errore che indica che nessun utente ha effettuato l'accesso.

53
00:04:14,975 --> 00:04:17,210
Quindi, facciamo il login noi stessi.

54
00:04:17,210 --> 00:04:20,760
Lasciami tornare alla «Homepage» e poi faremo il login noi stessi.

55
00:04:20,760 --> 00:04:22,475
Quindi, quando fai clic sul pulsante di accesso,

56
00:04:22,475 --> 00:04:27,195
vedrai il modulo tipico qui con l'email e le informazioni sulla password.

57
00:04:27,195 --> 00:04:30,715
Vedrai anche un pulsante aggiuntivo qui chiamato «Accedi con Google».

58
00:04:30,715 --> 00:04:33,600
Quindi fammi accedere con il mio account Google.

59
00:04:33,600 --> 00:04:35,750
Quindi, quando fai clic su «Accedi con Google», si

60
00:04:35,750 --> 00:04:41,180
aprirà un'altra finestra del browser in cui ti verrà chiesto di

61
00:04:41,180 --> 00:04:47,420
autorizzare l'utilizzo del tuo account Google da questo server Firebase.

62
00:04:47,420 --> 00:04:49,475
Quindi, lasciami andare avanti e autorizzare

63
00:04:49,475 --> 00:04:53,845
questa applicazione e poi una volta completata l'autorizzazione,

64
00:04:53,845 --> 00:04:57,145
vedrai che la tua

65
00:04:57,145 --> 00:05:01,850
applicazione Angular basata su Firebase verrà avviata e nell'angolo destro,

66
00:05:01,850 --> 00:05:06,200
vedrai immediatamente il tuo nome

67
00:05:06,200 --> 00:05:11,525
visualizzato qui e con il «Login» ora trasformato in un pulsante «Logout».

68
00:05:11,525 --> 00:05:14,755
Quindi, a questo punto,

69
00:05:14,755 --> 00:05:17,530
dovresti essere in grado di vedere i tuoi preferiti

70
00:05:17,530 --> 00:05:20,310
e in questo caso dato che non abbiamo alcun favorito,

71
00:05:20,310 --> 00:05:22,155
quindi sarà vuoto a questo punto.

72
00:05:22,155 --> 00:05:27,830
Lasciami tornare al «Menu» e quindi aggiungere un paio di elementi in «I miei preferiti».

73
00:05:27,830 --> 00:05:32,235
Quindi, aggiungerò questo piatto ai miei preferiti.

74
00:05:32,235 --> 00:05:34,045
Quindi, quando clicco su questo piatto,

75
00:05:34,045 --> 00:05:41,110
vedrai immediatamente l'icona trasformarsi in un cuore pieno e lasciami anche selezionare un

76
00:05:41,110 --> 00:05:44,350
altro piatto e aggiungerlo in «My

77
00:05:44,350 --> 00:05:49,650
Favorites» e poi ora quando vai al «My Favorites»,

78
00:05:49,650 --> 00:05:52,510
vedrai il paio di piatti aggiunti nei

79
00:05:52,510 --> 00:05:56,330
tuoi preferiti come faresti aspettarsi e di nuovo,

80
00:05:56,330 --> 00:06:02,540
è possibile eliminare i piatti cliccando sul «Elimina» interruttore qui e quindi fare clic sulla

81
00:06:02,540 --> 00:06:09,695
croce per rimuovere l'elemento dalla lista dei preferiti, come mostrato qui.

82
00:06:09,695 --> 00:06:13,570
Ora, possiamo anche aggiungere come hai capito,

83
00:06:13,570 --> 00:06:17,660
possiamo andare a qualsiasi piatto e poi aggiungere commenti su quel piatto.

84
00:06:17,660 --> 00:06:19,190
Quindi, lasciatemi aggiungere in un commento

85
00:06:19,190 --> 00:06:28,260
qui e nel momento in cui

86
00:06:28,260 --> 00:06:32,435
si invia il commento, vedrete immediatamente che i vostri commenti verranno visualizzati qui con

87
00:06:32,435 --> 00:06:41,825
il nome dell'autore commento anche incluso qui e con la data come mostrato qui.

88
00:06:41,825 --> 00:06:45,890
Quindi, puoi vedere che la presentazione

89
00:06:45,890 --> 00:06:49,955
dei commenti da parte dell'utente sarà supportata per qualsiasi piatto specifico.

90
00:06:49,955 --> 00:06:55,805
Permettetemi di aggiungere un altro favorito e quindi questo utente avrà un paio di preferiti.

91
00:06:55,805 --> 00:06:58,180
Lasciami «Logout» questo utente.

92
00:06:58,180 --> 00:07:02,930
Torna alla «Homepage» e poi «Disconnetti» questo utente.

93
00:07:02,930 --> 00:07:07,715
Ora effettueremo il login utilizzando l'altro account.

94
00:07:07,715 --> 00:07:13,490
Quindi, vorrei - avevo impostato

95
00:07:13,490 --> 00:07:17,840
questo account di password di posta elettronica

96
00:07:17,840 --> 00:07:22,865
in precedenza e così faremo il login come questo altro utente e una volta che l'altro utente è connesso,

97
00:07:22,865 --> 00:07:29,045
lasciami di nuovo andare al «Menu» e aggiungere un paio di elementi nei

98
00:07:29,045 --> 00:07:36,904
preferiti per questo particolare utente

99
00:07:36,904 --> 00:07:40,700
e così quando si torna a «I miei preferiti»,

100
00:07:40,700 --> 00:07:44,270
vedrai questi elementi elencati per il secondo utente.

101
00:07:44,270 --> 00:07:46,775
Ora, allo stesso modo per questo utente,

102
00:07:46,775 --> 00:07:51,560
permettetemi di inviare nuovamente un altro commento da questo utente.

103
00:07:51,560 --> 00:07:53,150
Così -

104
00:08:01,000 --> 00:08:02,600
e si

105
00:08:02,600 --> 00:08:07,445
vedrebbe che i commenti inviati dal secondo utente vengono aggiunti anche nella domanda.

106
00:08:07,445 --> 00:08:11,615
Quindi, questo è il modo in cui

107
00:08:11,615 --> 00:08:16,490
la tua applicazione Angular funziona con Firebase come backend come servizio.

108
00:08:16,490 --> 00:08:18,529
Ora, naturalmente,

109
00:08:18,529 --> 00:08:24,170
ci si deve chiedere, come riprogettare la nostra applicazione Angular per fare uso di Firebase invece

110
00:08:24,170 --> 00:08:31,610
di utilizzare il server Standard Express più MongoDB che abbiamo costruito in precedenza?

111
00:08:31,610 --> 00:08:38,440
Per configurare l'applicazione Angular per comunicare con il Firebase Server,

112
00:08:38,440 --> 00:08:42,620
ci sono due moduli nodo che è necessario installare nell'

113
00:08:42,620 --> 00:08:46,860
applicazione Angular e uno di questi è il modulo Firebase.

114
00:08:46,860 --> 00:08:49,730
Il modulo Firebase come vedete qui,

115
00:08:49,730 --> 00:08:55,190
fornisce gli strumenti e l'infrastruttura che consente di comunicare

116
00:08:55,190 --> 00:09:01,610
con il server Firebase e di installarlo nella vostra applicazione,

117
00:09:01,610 --> 00:09:05,720
si digita, npm install meno save Firebase.

118
00:09:05,720 --> 00:09:07,610
Ora insieme a questo,

119
00:09:07,610 --> 00:09:11,395
c'è un altro modulo chiamato Angular Fire 2.

120
00:09:11,395 --> 00:09:13,725
Quindi il fuoco angolare 2.

121
00:09:13,725 --> 00:09:20,535
Inoltre, ancora una volta ho fornito i collegamenti a questi due moduli nelle risorse aggiuntive.

122
00:09:20,535 --> 00:09:23,795
AngularFire 2 è la libreria ufficiale

123
00:09:23,795 --> 00:09:27,290
per il supporto Firebase e Angular e, come puoi vedere,

124
00:09:27,290 --> 00:09:31,520
è un supporto basato osservabile per i file Angular.

125
00:09:31,520 --> 00:09:36,545
Quindi, questo funziona per aggiungere al modulo npm Firebase e quindi

126
00:09:36,545 --> 00:09:42,125
ti dà un'interfaccia basata osservabile che possiamo usare nella tua applicazione Angular.

127
00:09:42,125 --> 00:09:44,930
Quindi, avremmo sfruttato l'AngularFire 2.

128
00:09:44,930 --> 00:09:46,994
Quindi, per fare uso di AngularFire2,

129
00:09:46,994 --> 00:09:49,940
è necessario installare sia Firebase che AngularFire 2.

130
00:09:49,940 --> 00:09:51,345
Quindi, in un colpo,

131
00:09:51,345 --> 00:09:54,205
installa entrambi nella tua applicazione Angular.

132
00:09:54,205 --> 00:09:59,320
Ora, la versione dell'applicazione Angular che ho fornito per te

133
00:09:59,320 --> 00:10:06,250
installa automaticamente entrambi questi come vedrai quando esamina il file package.json.

134
00:10:06,250 --> 00:10:08,510
Ora, come fare uso di questi due,

135
00:10:08,510 --> 00:10:12,245
illustrerò che eseguendo rapidamente

136
00:10:12,245 --> 00:10:17,280
il codice modificato per i servizi e un paio di componenti in cui

137
00:10:17,280 --> 00:10:19,955
facciamo uso di Firebase e AngularFire2

138
00:10:19,955 --> 00:10:23,135
per modificare l'applicazione Angular che abbiamo sviluppato in

139
00:10:23,135 --> 00:10:30,140
precedenza per utilizzare il Server Firebase come back-end come servizio.

140
00:10:30,140 --> 00:10:34,075
Per capire di più su come utilizziamo

141
00:10:34,075 --> 00:10:39,185
Firebase e AngularFire 2 all'interno della nostra applicazione Angular, la

142
00:10:39,185 --> 00:10:42,860
nostra prima fermata è nel file package.json.

143
00:10:42,860 --> 00:10:45,025
Quindi nel file package.json,

144
00:10:45,025 --> 00:10:50,850
noterai che ho installato AngularFire2 qui e anche abbiamo installato

145
00:10:50,850 --> 00:10:57,510
Firebase da utilizzare in questa versione dell'applicazione Angular che fornisco per te.

146
00:10:57,510 --> 00:11:01,980
Quindi, nota che questi due verranno installati automaticamente quando digiti «npm

147
00:11:01,980 --> 00:11:07,720
install» dopo aver clonato questo repository git che ho fornito per te.

148
00:11:07,720 --> 00:11:11,220
Se stavi iniziando con una nuova applicazione Angular,

149
00:11:11,220 --> 00:11:15,590
dovresti installare sia AngularFire 2 che Firebase

150
00:11:15,590 --> 00:11:20,184
per sfruttare l'uso di Firebase come backend come servizio.

151
00:11:20,184 --> 00:11:22,365
Ora, dopo aver installato questi due,

152
00:11:22,365 --> 00:11:27,360
impariamo come facciamo uso di questi all'interno dei nostri servizi.

153
00:11:27,360 --> 00:11:30,030
Quindi, il modo migliore per imparare a utilizzare entrambi

154
00:11:30,030 --> 00:11:33,640
questi è visitare alcuni dei servizi che abbiamo

155
00:11:33,640 --> 00:11:36,930
configurato nella nostra applicazione e capire come

156
00:11:36,930 --> 00:11:42,130
sfruttare l'uso di AngularFire2 e Firebase.

157
00:11:42,130 --> 00:11:46,235
Quindi, inizieremo con il file dish.service.ts.

158
00:11:46,235 --> 00:11:48,830
Quindi, se vai al file dish.service.ts,

159
00:11:48,830 --> 00:11:51,095
noterai che qui,

160
00:11:51,095 --> 00:11:55,235
in questo servizio di piatti,

161
00:11:55,235 --> 00:12:01,190
mi vedrai importare questo AngularFiRestore, AngularFireStoreDocument

162
00:12:01,190 --> 00:12:08,115
e AngularFireStoreCollection da AngularFire a Firestore qui.

163
00:12:08,115 --> 00:12:16,680
Quindi, questo porta tutto ciò di cui ho bisogno dal mio modulo AngularFiRestore npm,

164
00:12:16,680 --> 00:12:21,010
inoltre noterai che sto importando tutto da

165
00:12:21,010 --> 00:12:27,615
Firebase/app come Firebase nel mio servizio piatto qui.

166
00:12:27,615 --> 00:12:29,945
Quindi, una volta importati questi due,

167
00:12:29,945 --> 00:12:35,415
diamo uno sguardo veloce a come riconfiguriamo il nostro servizio di piatti qui.

168
00:12:35,415 --> 00:12:37,435
Quindi, se vai nel servizio piatto,

169
00:12:37,435 --> 00:12:41,175
noterai che non sto più usando il client HTTP.

170
00:12:41,175 --> 00:12:48,975
Invece, sto iniettando AFS che è AngularFiRestore nel costruttore qui.

171
00:12:48,975 --> 00:12:51,520
AngularFiRestore è quello che mi dà

172
00:12:51,520 --> 00:12:55,815
accesso al backend Firebase come servizio.

173
00:12:55,815 --> 00:13:01,785
Ora, ricordiamo anche che abbiamo già configurato tutti i dettagli del

174
00:13:01,785 --> 00:13:09,450
nostro server e anche il progetto filestore nel file environment.ts in precedenza.

175
00:13:09,450 --> 00:13:12,595
Quindi, dovresti aver configurato queste informazioni già lì

176
00:13:12,595 --> 00:13:16,180
su come l'applicazione Angular dovrebbe sfruttare

177
00:13:16,180 --> 00:13:20,930
il tuo progetto basato su Firestore sul

178
00:13:20,930 --> 00:13:27,710
tuo server Firestore per accedere ai dati che hai configurato lì.

179
00:13:27,710 --> 00:13:32,290
Quindi, questo mi darà accesso al mio cloud

180
00:13:32,290 --> 00:13:39,400
Firestore all'interno del mio progetto Firebase che ho impostato.

181
00:13:39,400 --> 00:13:43,410
Ora, AuthService è ovviamente lo stesso Authservice che abbiamo usato prima,

182
00:13:43,410 --> 00:13:51,175
ma è stato modificato per utilizzare il supporto Angular per Firebase.

183
00:13:51,175 --> 00:13:55,095
Visiteremo AuthService per scoprire come è stato aggiornato.

184
00:13:55,095 --> 00:14:00,410
Ora, AuthService ci darà accesso a

185
00:14:00,410 --> 00:14:06,345
questo metodo chiamato getAuthState che restituirà in un osservabile.

186
00:14:06,345 --> 00:14:08,965
Questo osservabile, quando ci sottoscriviamo,

187
00:14:08,965 --> 00:14:15,855
ci darà le informazioni come utente che contiene le informazioni dell'utente.

188
00:14:15,855 --> 00:14:21,465
Quindi, lo otterrò e quindi imposterò CurrentUser nella mia applicazione

189
00:14:21,465 --> 00:14:28,995
come utente restituito da questo osservabile qui.

190
00:14:28,995 --> 00:14:30,699
Quindi, quando visitiamo AuthService,

191
00:14:30,699 --> 00:14:33,085
impareremo cosa restituirà questo getAuthState per

192
00:14:33,085 --> 00:14:35,700
noi e quindi le informazioni di CurrentUser possono

193
00:14:35,700 --> 00:14:36,940
essere ottenute da uno qualsiasi

194
00:14:36,940 --> 00:14:41,165
degli altri servizi perché stiamo già iniettando AuthService qui.

195
00:14:41,165 --> 00:14:45,570
Ora, diamo un'occhiata a come il metodo GetDishes è implementato qui.

196
00:14:45,570 --> 00:14:47,710
Ora, in precedenza nel metodo GetDiches,

197
00:14:47,710 --> 00:14:55,920
stavamo usando il client HTTP per accedere al server a base URL+/dish.

198
00:14:55,920 --> 00:14:57,425
Ora, in questo caso,

199
00:14:57,425 --> 00:15:07,255
per accedere a una raccolta nel mio server Firebase, diremo questo.afs.

200
00:15:07,255 --> 00:15:10,710
Quindi, questo è ciò che AngularFire2 fornisce per noi.

201
00:15:10,710 --> 00:15:16,345
AFS come vedete è il AngularFiRestore che abbiamo iniettato qui e così diciamo

202
00:15:16,345 --> 00:15:19,810
questo.afs.collection e qui

203
00:15:19,810 --> 00:15:23,010
specificheremo la raccolta specifica a cui stiamo accedendo qui.

204
00:15:23,010 --> 00:15:26,315
Ricordiamo che avevamo impostato i piatti, le promozioni

205
00:15:26,315 --> 00:15:30,415
e le collezioni leader sul mio server Firebase.

206
00:15:30,415 --> 00:15:34,065
Quindi, questo mi dà direttamente accesso

207
00:15:34,065 --> 00:15:38,595
alla mia collezione di piatti qui e dalla collezione di piatti,

208
00:15:38,595 --> 00:15:42,740
posso fare.ValueChanges che

209
00:15:42,740 --> 00:15:47,115
restituirà tutte le informazioni nella collezione aziendale per me,

210
00:15:47,115 --> 00:15:50,440
o posso fare.SnapshotChanges che

211
00:15:50,440 --> 00:15:53,990
restituirà informazioni aggiuntive tra cui l'ID dei piatti.

212
00:15:53,990 --> 00:15:56,660
Quindi, se invece di fare SnapshotChanges,

213
00:15:56,660 --> 00:15:59,310
se dico ValueChanges,

214
00:15:59,310 --> 00:16:03,110
restituirà solo le informazioni sui piatti ma non restituirà

215
00:16:03,110 --> 00:16:07,890
gli ID dei piatti, ma poiché avrò bisogno degli ID dei miei piatti,

216
00:16:07,890 --> 00:16:13,335
ecco perché sto usando il.SnapshotChanges in questo caso.

217
00:16:13,335 --> 00:16:16,090
Quindi, quando viene chiamato.SnapshotChanges,

218
00:16:16,090 --> 00:16:19,505
questo restituirà come vedi un osservabile

219
00:16:19,505 --> 00:16:27,195
che mappa e quindi il valore di ritorno che viene chiamato come azioni e queste azioni

220
00:16:27,195 --> 00:16:31,800
, di nuovo, sarà un osservabile che mapperò ogni azione in

221
00:16:31,800 --> 00:16:38,930
queste azioni e quindi estrarre i dati dall'azione che è ritornato qui.

222
00:16:38,930 --> 00:16:44,525
Quindi l'azione è un valore che viene restituito da per ciascuna delle azioni

223
00:16:44,525 --> 00:16:50,765
e questa azione contiene un payload e contiene all'interno di quel campo oscuro qui.

224
00:16:50,765 --> 00:16:53,200
Ora, questo è qualcosa che ho capito leggendo

225
00:16:53,200 --> 00:16:57,010
la documentazione per AngularFire2 e

226
00:16:57,010 --> 00:17:03,705
quindi quando chiamiamo questa funzione dati su questa action.payload.doc,

227
00:17:03,705 --> 00:17:05,875
questo mi darà i dati.

228
00:17:05,875 --> 00:17:09,510
I dati per quel piatto specifico che si

229
00:17:09,510 --> 00:17:14,160
ottiene dalla mia collezione di piatti sul lato server.

230
00:17:14,160 --> 00:17:18,760
Quindi ogni documento in là verrà restituito qui e

231
00:17:18,760 --> 00:17:24,205
poi ottengo l'ID per questo dicendo action.payload.doc.id.

232
00:17:24,205 --> 00:17:27,855
Quindi è lì che verrà

233
00:17:27,855 --> 00:17:32,030
portato l'ID di quello e poi unirò i due insieme e restituirò

234
00:17:32,030 --> 00:17:40,035
questo come documento piatto ai miei vari componenti da lì,

235
00:17:40,035 --> 00:17:42,150
lo farò chiama questo metodo GetDishes.

236
00:17:42,150 --> 00:17:43,345
Quindi, come ricorderai,

237
00:17:43,345 --> 00:17:44,690
dal componente menu,

238
00:17:44,690 --> 00:17:47,400
sto chiamando il metodo GetDiches per ottenere

239
00:17:47,400 --> 00:17:51,090
le informazioni su tutti i piatti della mia collezione.

240
00:17:51,090 --> 00:17:58,505
Collezione. Quindi, ognuno di questi piatti che viene restituito come documento verrà ricostruito in

241
00:17:58,505 --> 00:18:03,420
un oggetto JavaScript con l'ID inserito qui e anche

242
00:18:03,420 --> 00:18:09,540
i dati estratti da questa azione payload.doc.data.

243
00:18:09,540 --> 00:18:16,455
Ora questo è qualcosa che si impara leggendo la documentazione di AngularFire2.

244
00:18:16,455 --> 00:18:19,470
Ora, dal momento che ho già fatto quella parte,

245
00:18:19,470 --> 00:18:22,755
ti sto mostrando il codice esatto che dovresti

246
00:18:22,755 --> 00:18:26,160
usare per estrarre i dati e quindi fornire

247
00:18:26,160 --> 00:18:33,500
questi dati al tuo componente che chiamerà il metodo getDiches qui.

248
00:18:33,500 --> 00:18:37,090
Quindi, facendo questo per ciascuno dei documenti lì,

249
00:18:37,090 --> 00:18:39,180
questo documento verrà ricostruito per

250
00:18:39,180 --> 00:18:44,800
l'oggetto piatto che

251
00:18:44,800 --> 00:18:51,500
usiamo nella nostra applicazione angolare e quindi siamo in grado di ottenere anche l'accesso all'ID.

252
00:18:51,500 --> 00:18:53,365
Se si eseguono solo modifiche di valore,

253
00:18:53,365 --> 00:18:59,825
restituirà semplicemente tutti i documenti stessi ma senza gli ID dei documenti.

254
00:18:59,825 --> 00:19:04,920
Quindi, questo lavoro aggiuntivo deve essere fatto all'interno del servizio al fine di

255
00:19:04,920 --> 00:19:07,835
restituire le informazioni nel modo giusto in modo

256
00:19:07,835 --> 00:19:10,865
che MyComponents possa fare uso di queste informazioni.

257
00:19:10,865 --> 00:19:13,370
Allo stesso modo, per un metodo getDish,

258
00:19:13,370 --> 00:19:17,695
quindi nota come sto accedendo alle informazioni per un piatto specifico.

259
00:19:17,695 --> 00:19:22,020
Ancora una volta, diremo questo.afs e poi noterai che sono

260
00:19:22,020 --> 00:19:26,660
saying.doc e poi qui per il metodo the.doc,

261
00:19:26,660 --> 00:19:32,650
fornisco piatti barra e poi l'ID del piatto specifico.

262
00:19:32,650 --> 00:19:35,150
Ora, il motivo per cui avevo fornito ID,

263
00:19:35,150 --> 00:19:39,350
l'ID qui sta arrivando come parametro per il metodo getDish qui.

264
00:19:39,350 --> 00:19:41,985
Ora, affinché questo ID venga fornito,

265
00:19:41,985 --> 00:19:44,450
ho bisogno di essere in grado di fornire quell'ID

266
00:19:44,450 --> 00:19:47,480
nel metodo getDises in modo che quando il mio menu è costruito,

267
00:19:47,480 --> 00:19:51,205
ogni piatto avrà il suo ID allegato lì.

268
00:19:51,205 --> 00:19:56,575
Quell' ID è passato qui e quindi accederò al documento a questo punto.

269
00:19:56,575 --> 00:20:01,260
Quindi, AngularFire2 consente di accedere a

270
00:20:01,260 --> 00:20:07,125
un documento specifico che si trova all'interno di una raccolta dicendo la barra del nome della raccolta,

271
00:20:07,125 --> 00:20:15,430
più l'ID del documento o puoi dire questo.afs.collection piatti proprio come hai sentito,

272
00:20:15,430 --> 00:20:22,540
piatti di raccolta e then.doc e quindi fornire doc e ID all'interno delle parentesi lì.

273
00:20:22,540 --> 00:20:26,725
Quindi, questo è un altro modo di affrontare un piatto specifico.

274
00:20:26,725 --> 00:20:32,680
Ancora una volta, mi sto sottoscrivendo a SnapShotChanges e questo restituirà un'azione che viene quindi

275
00:20:32,680 --> 00:20:35,480
mappata nuovamente nello stesso formato per

276
00:20:35,480 --> 00:20:39,495
costruire l'oggetto piatto qui insieme all'ID qui.

277
00:20:39,495 --> 00:20:42,410
Ora, Firebase mantiene l'ID separato dal documento

278
00:20:42,410 --> 00:20:46,300
stesso ed è per questo che devo fare esplicitamente

279
00:20:46,300 --> 00:20:49,010
questa ricostruzione per ottenere

280
00:20:49,010 --> 00:20:54,750
il documento piatto in un modo utilizzabile da MyComponents.

281
00:20:54,750 --> 00:20:59,660
Poi ho costruito il mio server usando Express e MongoDB,

282
00:20:59,660 --> 00:21:03,995
l'ID era automaticamente lì nel documento stesso e quindi è stato molto

283
00:21:03,995 --> 00:21:09,235
facile recuperarlo e rifornirlo al lato client.

284
00:21:09,235 --> 00:21:13,610
Ora, per il getFeaturedDish,

285
00:21:13,610 --> 00:21:15,620
ricorda che per GetFeaturedDish,

286
00:21:15,620 --> 00:21:20,870
stiamo cercando quei piatti in cui la funzionalità è impostata su true.

287
00:21:20,870 --> 00:21:25,790
Ora, questo è dove AngularFire2 ci permette di

288
00:21:25,790 --> 00:21:31,180
costruire una query e fornire quella query qui per quella raccolta.

289
00:21:31,180 --> 00:21:36,440
Qui sto dicendo questo.afs piatti di raccolta qui,

290
00:21:36,440 --> 00:21:39,520
quindi sto ancora usando la raccolta, ma poi guardo

291
00:21:39,520 --> 00:21:43,140
il secondo parametro per questa chiamata qui.

292
00:21:43,140 --> 00:21:49,405
Questo dice ref dove il ref si riferisce a ogni documento che si trova in questa raccolta.

293
00:21:49,405 --> 00:21:53,330
Questo ref dice il ref e questo è dove posso

294
00:21:53,330 --> 00:21:58,100
usare questa query set up ascolta in modo che dice.where.

295
00:21:58,100 --> 00:22:04,695
Quindi, il che significa che ognuno dei documenti in cui il primo piano,

296
00:22:04,695 --> 00:22:10,445
come puoi vedere, la sintassi è abbastanza facile da seguire qui che dice dove sono presenti.

297
00:22:10,445 --> 00:22:15,240
Ora, si noti che la funzione è fornita come una stringa qui,

298
00:22:15,240 --> 00:22:17,175
e poi la successiva,

299
00:22:17,175 --> 00:22:22,230
l'operatore è uguale a così si può anche dire maggiore di, minore di,

300
00:22:22,230 --> 00:22:25,345
maggiore o uguale a minore o uguale a una qualsiasi di queste cose,

301
00:22:25,345 --> 00:22:30,375
ma si noti che questo dovrebbe essere all'interno delle citazioni qui e poi dirà vero.

302
00:22:30,375 --> 00:22:35,105
Quindi, ovunque la proprietà in primo piano del documento è impostata su true,

303
00:22:35,105 --> 00:22:36,620
estrai tutti quelli.

304
00:22:36,620 --> 00:22:40,545
Quindi, questa query estrarrà solo quei documenti

305
00:22:40,545 --> 00:22:45,250
dalla collezione di piatti in cui la funzionalità è impostata su true,

306
00:22:45,250 --> 00:22:50,195
e quindi restituirà solo quei documenti da quella raccolta qui,

307
00:22:50,195 --> 00:22:53,770
e da lì sto andando modifiche istantanee e questo

308
00:22:53,770 --> 00:22:59,350
restituirà una serie di documenti e da lì li mapperò

309
00:22:59,350 --> 00:23:04,270
in singoli documenti piatti e poi dal momento che ho

310
00:23:04,270 --> 00:23:09,700
assicurato che solo uno di questi documenti avrà la funzione impostata su true.

311
00:23:09,700 --> 00:23:13,030
Quindi, restituirà solo uno di essi, ma lo restituirà come array.

312
00:23:13,030 --> 00:23:14,980
Quindi, è per questo che sto costruendo questo

313
00:23:14,980 --> 00:23:20,195
con la parentesi quadra zero il primo elemento dell'array,

314
00:23:20,195 --> 00:23:25,210
e in effetti conterrà solo un elemento perché solo un elemento nella mia collezione

315
00:23:25,210 --> 00:23:30,745
corrisponderà a questa particolare query che ho impostato qui con l'onda qui.

316
00:23:30,745 --> 00:23:36,470
Ci sono altre configurazioni di query qui puoi anche usare qualcosa chiamato order by.

317
00:23:36,470 --> 00:23:41,000
Quindi, è possibile ordinare la raccolta in base a una determinata proprietà

318
00:23:41,000 --> 00:23:47,310
e qualche altro insieme di opzioni di query che sono disponibili.

319
00:23:47,310 --> 00:23:51,480
Ora, questo è supportato da Firebase sul suo cloud Firestore,

320
00:23:51,480 --> 00:23:56,890
ed è ciò che possiamo sfruttare usando AngularFire2 per progettare

321
00:23:56,890 --> 00:24:03,850
il codice nell'applicazione Angular per eseguire la query dal lato client stesso.

322
00:24:03,850 --> 00:24:09,280
Quindi, questo sta per restituire il piatto caratteristica specifica.

323
00:24:09,360 --> 00:24:15,355
Ora, ancora GetDishId sarà simile a quello che abbiamo fatto in precedenza.

324
00:24:15,355 --> 00:24:16,890
Quindi, nessuna modifica lì.

325
00:24:16,890 --> 00:24:21,370
Ora, per il PostComment di nuovo

326
00:24:21,370 --> 00:24:27,820
perché Firebase con la beta di Firestore cloud,

327
00:24:27,820 --> 00:24:31,720
non ha il concetto di popolazione,

328
00:24:31,720 --> 00:24:34,015
e così via che abbiamo visto prima.

329
00:24:34,015 --> 00:24:39,890
Quindi, quello che ho intenzione di fare per i commenti è che ho intenzione di pubblicare questi commenti come

330
00:24:39,890 --> 00:24:46,140
una raccolta per la quale è racchiusa all'interno di ogni piatto stesso.

331
00:24:46,140 --> 00:24:52,040
Quindi, ogni piatto avrà la sua raccolta di commenti su quel piatto specifico.

332
00:24:52,040 --> 00:24:54,965
Quando pubblico il commento, utilizzerò il dishId

333
00:24:54,965 --> 00:24:57,905
e quindi le informazioni sul commento.

334
00:24:57,905 --> 00:25:01,735
Quindi, quello che faccio qui è che prima

335
00:25:01,735 --> 00:25:07,175
interrogherò i piatti e poi ottengo quel piatto particolare.

336
00:25:07,175 --> 00:25:11,555
Quindi, puoi vedere che sto usando l'altro modo di interrogare per un documento specifico.

337
00:25:11,555 --> 00:25:16,070
Quindi, qui sto dicendo questo afs.collection ('piatti') .doc dishId.

338
00:25:16,440 --> 00:25:22,660
Quindi, posso usare questo modo di accedere a un documento specifico, se voglio.

339
00:25:22,660 --> 00:25:25,610
L' altro modo, ovviamente, hai già visto con

340
00:25:25,610 --> 00:25:33,375
il metodo getDish dove dico piatti doc slash più ID.

341
00:25:33,375 --> 00:25:38,185
Quindi, due modi diversi per indirizzare un documento specifico all'interno di

342
00:25:38,185 --> 00:25:44,460
una raccolta qui e poi dishID e quindi raccolta e commenti.

343
00:25:44,460 --> 00:25:46,840
Quindi, in questo modo sta dicendo in

344
00:25:46,840 --> 00:25:51,100
questa raccolta per questo specifico documento con quel dishId,

345
00:25:51,100 --> 00:25:54,140
c'è una raccolta che è inclusa in

346
00:25:54,140 --> 00:25:57,180
questo documento e quella raccolta ha i commenti del nome.

347
00:25:57,180 --> 00:25:59,660
Quindi, questo è un nidificazione di una raccolta

348
00:25:59,660 --> 00:26:03,125
all'interno di un documento che si trova in un'altra connessione di livello superiore.

349
00:26:03,125 --> 00:26:07,110
Quindi, questo tipo di nidificazione delle raccolte è consentito da

350
00:26:07,110 --> 00:26:13,590
Firebase Cloud Store Beta fino a 100 livelli di profondità se si desidera scegliere.

351
00:26:13,590 --> 00:26:15,700
Quindi, all'interno di questa collezione,

352
00:26:15,700 --> 00:26:17,420
aggiungerò.

353
00:26:17,420 --> 00:26:20,310
Quindi, come si aggiunge un documento a una raccolta?

354
00:26:20,310 --> 00:26:22,105
Per aggiungere un documento alla raccolta,

355
00:26:22,105 --> 00:26:24,755
utilizzare il metodo add in una raccolta qui.

356
00:26:24,755 --> 00:26:27,600
Quindi, puoi vedere che sui commenti della raccolta,

357
00:26:27,600 --> 00:26:30,380
sto facendo un add qui e poi

358
00:26:30,380 --> 00:26:33,655
questo è il documento effettivo che verrà aggiunto qui.

359
00:26:33,655 --> 00:26:35,280
Quindi, nel documento stesso,

360
00:26:35,280 --> 00:26:40,645
vedrai che ho la proprietà dell'autore qui dove ho impostato l'ID corrente,

361
00:26:40,645 --> 00:26:44,665
e anche ho impostato il nome per l'autore qui,

362
00:26:44,665 --> 00:26:50,885
servo solo la prima volta qui quindi qui dico questo nome visualizzato utente corrente.

363
00:26:50,885 --> 00:26:55,625
Se il nome visualizzato è vero, lo imposterò su questo nome visualizzato utente corrente.

364
00:26:55,625 --> 00:27:00,960
Se l'account dell'utente non ha un nome visualizzato come allegato, allora

365
00:27:00,960 --> 00:27:06,420
userò semplicemente questa e-mail utente corrente come proprietà del nome qui.

366
00:27:06,420 --> 00:27:11,035
Quindi, questo documento che contiene il commento,

367
00:27:11,035 --> 00:27:13,150
porta automaticamente anche questo campo di nome

368
00:27:13,150 --> 00:27:16,140
ed è quello che userò per rendere

369
00:27:16,140 --> 00:27:22,495
le informazioni quando eseguo il rendering dei commenti nel mio componente DishDetail.

370
00:27:22,495 --> 00:27:28,710
Quindi, nota che sto effettivamente duplicando le informazioni qui in ciascuno dei commenti.

371
00:27:28,710 --> 00:27:31,865
Ma va bene, dal momento che questi sono memorizzati come

372
00:27:31,865 --> 00:27:34,160
documenti Json su Firebase, va bene

373
00:27:34,160 --> 00:27:36,990
duplicare alcune delle informazioni nei commenti qui.

374
00:27:36,990 --> 00:27:40,245
Ma se vuoi ulteriori dettagli dell'utente corrente,

375
00:27:40,245 --> 00:27:45,280
hai già un riferimento all'id dell'utente qui in modo da poter effettivamente andare a recuperare

376
00:27:45,280 --> 00:27:48,150
il documento per il particolare utente e quindi

377
00:27:48,150 --> 00:27:51,485
ottenere ulteriori informazioni dell'utente se lo scegli.

378
00:27:51,485 --> 00:27:54,830
Ora, quando ho usato Mongo DB più Mongo,

379
00:27:54,830 --> 00:27:57,950
hai visto che userò solo l'ID dell'utente corrente per

380
00:27:57,950 --> 00:28:01,650
l'autore e quindi userò il popolare per popolare queste informazioni.

381
00:28:01,650 --> 00:28:05,150
Ora Cloud Firestore beta in questo momento non ha

382
00:28:05,150 --> 00:28:10,240
alcun concetto di questo popolare per quanto posso vedere dalla documentazione,

383
00:28:10,240 --> 00:28:14,335
forse una versione futura potrebbe supportare un modo di estrarre

384
00:28:14,335 --> 00:28:16,800
informazioni da un altro documento e

385
00:28:16,800 --> 00:28:19,270
inserirle automaticamente nel documento corrente.

386
00:28:19,270 --> 00:28:24,500
Quando ciò accade, allora questo codice dovrà essere modificato per approfittarne.

387
00:28:24,500 --> 00:28:26,725
Ma ora come la vedo io,

388
00:28:26,725 --> 00:28:29,560
Firestore beta non ha la possibilità di

389
00:28:29,560 --> 00:28:33,000
popolare le informazioni da un altro documento nel documento corrente.

390
00:28:33,000 --> 00:28:36,040
Ecco perché sto solo replicando solo quel pezzo di

391
00:28:36,040 --> 00:28:39,860
informazioni di cui ho davvero bisogno quando eseguo il rendering del commento nel

392
00:28:39,860 --> 00:28:43,660
mio componente dishdetail qui e poi giù

393
00:28:43,660 --> 00:28:47,945
qui sotto puoi vedere che ho la valutazione e il commento qui e poi anche,

394
00:28:47,945 --> 00:28:49,740
notare che sto creando

395
00:28:49,740 --> 00:28:57,370
questi due campi aggiuntivi nel mio commento qui chiamati «CreateDat» e «UpdateDat».

396
00:28:57,370 --> 00:29:01,785
Si noti come sto mettendo il timestamp per «CreateDat».

397
00:29:01,785 --> 00:29:05,785
Firebase, ora cos'è questo Firebase che sto usando qui,

398
00:29:05,785 --> 00:29:12,050
questo Firebase è esattamente quello che ho importato qui dall'app Firebase.

399
00:29:12,050 --> 00:29:15,850
Quindi questo mi fornisce come vedi qui sotto qui sotto,

400
00:29:15,850 --> 00:29:20,395
che mi fornisce lo stesso valore del campo Firestore.

401
00:29:20,395 --> 00:29:25,260
Quindi questa chiamata al campo firestorm valori timestamp del server,

402
00:29:25,260 --> 00:29:28,390
restituirà il timestamp corrente per

403
00:29:28,390 --> 00:29:32,605
me e questa è l'informazione che sto per memorizzare nel «CreatedAt».

404
00:29:32,605 --> 00:29:35,255
Ora, quando ho inserito tutti i documenti qui,

405
00:29:35,255 --> 00:29:40,435
hai visto che ho creato manualmente questo campo «CreatedAt» per ciascuno dei documenti.

406
00:29:40,435 --> 00:29:44,110
Ora questo è un modo per fare lo stesso dal

407
00:29:44,110 --> 00:29:47,895
nostro codice angolare nel

408
00:29:47,895 --> 00:29:53,040
nostro lato client e la stessa cosa per il campo «UpdateDat» che vedrai qui.

409
00:29:53,040 --> 00:29:55,270
Quindi, quando pubblichi un nuovo commento,

410
00:29:55,270 --> 00:30:00,330
vedi che questo è il modo in cui aggiungerai un nuovo commento in quel server.

411
00:30:00,330 --> 00:30:03,630
Ora, questo restituisce una promessa e quindi questa è l'informazione

412
00:30:03,630 --> 00:30:07,410
che sto usando qui per costruire questa promessa qui.

413
00:30:07,410 --> 00:30:10,930
Quindi questo altro metodo qui dice «getComments»,

414
00:30:10,930 --> 00:30:16,930
questo «getComments come puoi vedere sta accedendo ai piatti della collezione AFS,

415
00:30:16,930 --> 00:30:22,420
doc dishId e quindi

416
00:30:22,420 --> 00:30:26,580
ai commenti della raccolta e l'avviso che qui, non richiederò ogni ID dei commenti

417
00:30:26,580 --> 00:30:31,220
stesso che non userò nel mio Angular petizione comunque,

418
00:30:31,220 --> 00:30:33,230
quindi invece di usare le modifiche istantanee,

419
00:30:33,230 --> 00:30:36,285
sto solo usando le modifiche di valore e questo restituirà

420
00:30:36,285 --> 00:30:42,170
tutti i documenti in questa raccolta di commenti per questo particolare documento

421
00:30:42,170 --> 00:30:47,455
il dishId dalla raccolta di piatti qui

422
00:30:47,455 --> 00:30:53,320
e che verrà restituito e questi commenti renderò in il mio componente piatto.

423
00:30:53,320 --> 00:30:58,210
Ora, in Mongos, hai visto che il fatto che ho incluso l'ID utente significa

424
00:30:58,210 --> 00:31:02,920
che potrei copulare queste informazioni ora con Firebase,

425
00:31:02,920 --> 00:31:05,740
non c'è modo di popolare le informazioni comuni qui,

426
00:31:05,740 --> 00:31:10,870
quindi è per questo che sto andando esplicitamente e poi popolando i commenti nel

427
00:31:11,210 --> 00:31:15,250
mio dishdetail per recuperare tutti i commenti su

428
00:31:15,250 --> 00:31:20,000
questo particolare piatto quando li rendering nel componente dishdetail.

429
00:31:20,000 --> 00:31:22,830
Quindi vedi, che ho dovuto regolare

430
00:31:22,830 --> 00:31:26,480
un po 'il codice Angular per affrontare il fatto che

431
00:31:26,480 --> 00:31:29,765
Firebase non supporta certe cose che mongos supporta

432
00:31:29,765 --> 00:31:33,605
almeno al momento Cloud Firestore beta non supporta queste cose,

433
00:31:33,605 --> 00:31:38,420
e quindi ho dovuto lavorare per affrontare ciò che Firebase mi

434
00:31:38,420 --> 00:31:45,365
permette di memorizzare e recuperare dal sito del server Firebase.

435
00:31:45,365 --> 00:31:51,640
Ora, è anche interessante per noi fare una rapida visita al servizio Auth qui.

436
00:31:51,640 --> 00:31:54,060
Il servizio Auth qui di nuovo,

437
00:31:54,060 --> 00:31:59,875
nota che nel servizio Auth qui sto importando questo AngularFireAuth

438
00:31:59,875 --> 00:32:06,435
dal sottomodulo AngularFire al npm qui.

439
00:32:06,435 --> 00:32:11,005
Quindi, qui puoi vedere che sto importando AngularFireAuth e questo

440
00:32:11,005 --> 00:32:15,970
mi dà accesso all'aspetto di autenticazione di Firebase.

441
00:32:15,970 --> 00:32:21,690
Ora, vediamo come funziona effettivamente l'autenticazione Firebase dalla nostra applicazione Angular.

442
00:32:21,690 --> 00:32:26,300
Ora inizieremo guardando a come è implementato il login.

443
00:32:26,300 --> 00:32:28,775
Quindi, questo è dove implemento il login,

444
00:32:28,775 --> 00:32:31,420
dove sto usando l'e-mail e la password.

445
00:32:31,420 --> 00:32:38,090
Quindi, questa parte quando importazione AngularFireAuth qui,

446
00:32:38,090 --> 00:32:44,910
nota che il costruttore sto iniettando AngularFireAuth nel mio costruttore.

447
00:32:44,910 --> 00:32:47,260
Quindi questo inietterà il servizio AngularFireAuth

448
00:32:47,260 --> 00:32:50,240
nel mio costruttore e questo mi dà accesso

449
00:32:50,240 --> 00:32:55,975
all'autenticazione Firebase sul sito del server in modo da poter autenticare gli utenti.

450
00:32:55,975 --> 00:33:01,555
Quindi, se voglio autenticare un utente che sta accedendo con l'e-mail e la password.

451
00:33:01,555 --> 00:33:04,490
Questa funzione di login è quella che verrà chiamata

452
00:33:04,490 --> 00:33:07,300
quando digito la mia email e la password nella finestra di

453
00:33:07,300 --> 00:33:10,110
dialogo di accesso che faccio apparire e quindi

454
00:33:10,110 --> 00:33:13,735
clicco sul pulsante di invio o sul pulsante di accesso qui,

455
00:33:13,735 --> 00:33:16,120
questa funzione di login verrà chiamata e

456
00:33:16,120 --> 00:33:20,845
le informazioni dell'utente ma recupero dal viene passato qui.

457
00:33:20,845 --> 00:33:22,985
Quindi, quando arriva qui,

458
00:33:22,985 --> 00:33:29,410
userò questo AFAuth come vedi che l'ho appena iniettato nel costruttore,

459
00:33:29,410 --> 00:33:33,995
e questo fornisce questo oggetto Auth qui,

460
00:33:33,995 --> 00:33:38,715
che fornisce questo metodo chiamato «accesso con e-mail e password».

461
00:33:38,715 --> 00:33:43,530
Quindi questo accesso con e-mail e password richiede due parametri qui come ci si

462
00:33:43,530 --> 00:33:49,495
aspetterebbe il nome utente dell'utente o l'e-mail e la password qui.

463
00:33:49,495 --> 00:33:53,310
Quindi queste due informazioni le sto fornendo

464
00:33:53,310 --> 00:33:57,290
come i due parametri per questo accesso con e-mail e password.

465
00:33:57,290 --> 00:33:59,965
Quindi, quando clicchi su questo vedrai che

466
00:33:59,965 --> 00:34:03,790
dice che il primo dovrebbe essere e-mail e il secondo dovrebbe essere la password.

467
00:34:03,790 --> 00:34:05,455
Ora il modo

468
00:34:05,455 --> 00:34:09,590
in cui l'ho impostato, questo oggetto utente che sta arrivando contiene l'e-mail in

469
00:34:09,590 --> 00:34:16,735
user.username qui e la password nella proprietà password dell'oggetto utente.

470
00:34:16,735 --> 00:34:18,925
Quindi, quando ciò viene ottenuto,

471
00:34:18,925 --> 00:34:24,670
pubblicherò queste informazioni e quindi quando questo è completato con successo, ciò

472
00:34:24,670 --> 00:34:27,430
significa che l'utente è connesso correttamente,

473
00:34:27,430 --> 00:34:29,075
se c'è un errore,

474
00:34:29,075 --> 00:34:31,510
quindi si cattura l'errore qui in questo momento

475
00:34:31,510 --> 00:34:33,960
non sto facendo nulla specificamente con l'errore che si può

476
00:34:33,960 --> 00:34:38,820
desidera stampare questo messaggio di errore per indicare che l'utente non può accedere e così via.

477
00:34:38,820 --> 00:34:42,070
Quindi, non ho implementato quella parte dell'accordo qui, la

478
00:34:42,070 --> 00:34:45,390
sto lasciando proprio lì se vuoi console registrare

479
00:34:45,390 --> 00:34:48,740
queste informazioni che puoi farlo quando si verificano errori.

480
00:34:48,740 --> 00:34:51,495
Ora per la disconnessione, in Firebase.

481
00:34:51,495 --> 00:34:56,610
Ancora una volta prendiamo l'aiuto di AFAuth che abbiamo iniettato e Auth su di esso,

482
00:34:56,610 --> 00:34:58,975
e questo fornisce questo metodo chiamato «disconnetti»,

483
00:34:58,975 --> 00:35:01,815
che quando chiamato disconnetterà l'

484
00:35:01,815 --> 00:35:05,610
utente attualmente connesso e quindi questo è un modo di gestirlo.

485
00:35:05,610 --> 00:35:09,795
Ora, ti starai chiedendo come gestisco la parte di accesso di Google.

486
00:35:09,795 --> 00:35:17,980
Ora questo viene gestito anche con AFAuth, quindi il modulo AngularFire2 che sto usando,

487
00:35:17,980 --> 00:35:22,780
fornisce queste informazioni per questi metodi per noi attraverso

488
00:35:22,780 --> 00:35:28,880
il modulo Firebase che viene utilizzato anche in AngularFire2,

489
00:35:28,880 --> 00:35:33,105
e quindi questo fornisce questo metodo chiamato accesso con pop e quando

490
00:35:33,105 --> 00:35:37,280
effettuiamo l'accesso con pop- quassù nota quello che sto specificando qui.

491
00:35:37,280 --> 00:35:42,650
Quindi, sto dicendo «nuovo Firebase.auth.GoogleAuthProvider».

492
00:35:42,650 --> 00:35:48,200
Ora, puoi anche fare Firebase.auth.facebookAuthProvider e altri.

493
00:35:48,200 --> 00:35:52,170
Quindi, come hai visto dall'esercizio precedente,

494
00:35:52,170 --> 00:35:58,835
Firebase ti consente di eseguire l'accesso di terze parti utilizzando Google,

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

496
00:36:01,520 --> 00:36:04,440
Quindi puoi configurarli in modo appropriato,

497
00:36:04,440 --> 00:36:07,260
dal momento che ho attivato solo l'autorizzazione di Google.

498
00:36:07,260 --> 00:36:10,470
Quindi questo è il modo in cui lo configurerò per utilizzare

499
00:36:10,470 --> 00:36:16,160
la mia autorizzazione Google qui e questa singola riga di codice che ho allegato qui,

500
00:36:16,160 --> 00:36:23,650
è quella che causa il pop-up del browser che mi suggerisce di autorizzare il

501
00:36:23,650 --> 00:36:31,580
mio Firebase a utilizzare l'autorizzazione di Google utilizzando il mio account Google qui.

502
00:36:31,580 --> 00:36:34,210
Quindi questa e' la seconda parte che ho sistemato qui.

503
00:36:34,210 --> 00:36:38,929
Quindi si noti che il servizio Auth si è notevolmente

504
00:36:38,929 --> 00:36:44,170
semplificato rispetto a quello che abbiamo fatto con la versione precedente di questa applicazione.

505
00:36:44,170 --> 00:36:49,755
Quindi puoi confrontare le due versioni per vedere come questo è diverso dall'altro.

506
00:36:49,755 --> 00:36:54,410
Ora, non solo questo afAuth che abbiamo iniettato qui,

507
00:36:54,410 --> 00:36:57,365
parte AngularFireAuth che abbiamo iniettato qui,

508
00:36:57,365 --> 00:37:01,800
fornisce anche questo osservabile chiamato «AuthState».

509
00:37:01,800 --> 00:37:08,045
Questo AuthState osservabile, può essere sottoscritto e questo «authState» osservabile,

510
00:37:08,045 --> 00:37:10,130
come vedi qui,

511
00:37:10,130 --> 00:37:15,880
che ho dichiarato qui come Firebase.User osservabile.

512
00:37:15,880 --> 00:37:21,400
Quindi questa è l'informazione che viene applicata qui e anche possiamo impostare

513
00:37:21,400 --> 00:37:27,465
un'altra variabile qui chiamata utente corrente che è del tipo utente Firebase qui.

514
00:37:27,465 --> 00:37:31,610
Quindi, questo afAuthState è un osservabile

515
00:37:31,610 --> 00:37:35,570
a cui posso iscrivermi e ogni volta che questo

516
00:37:35,570 --> 00:37:38,935
AuthState cambia, AuthState tiene traccia dello stato di autenticazione dell'

517
00:37:38,935 --> 00:37:42,780
utente se l'utente è connesso o disconnesso e se l'utente è connesso,

518
00:37:42,780 --> 00:37:47,930
allora questo sarà quindi iscriversi mi restituirà il informazioni utente e

519
00:37:47,930 --> 00:37:53,475
dalle informazioni utente possiamo recuperare molte informazioni tra cui il nome visualizzato,

520
00:37:53,475 --> 00:37:58,475
l'e-mail, l'ID del profilo e quindi l'

521
00:37:58,475 --> 00:38:04,535
immagine avatar per l'utente se è stato impostato per gli account specifici.

522
00:38:04,535 --> 00:38:07,555
Tutti questi saranno forniti automaticamente dall'utente.

523
00:38:07,555 --> 00:38:10,660
Quindi, quando si fa clic su «utente» e poi punto,

524
00:38:10,660 --> 00:38:14,445
si vedrà che fornisce tutte queste informazioni per noi.

525
00:38:14,445 --> 00:38:16,870
Quindi si tratta di un'email con nome visualizzato,

526
00:38:16,870 --> 00:38:19,835
sia che l'email sia verificata o meno e così via.

527
00:38:19,835 --> 00:38:22,855
Quindi alcune delle cose che sono di particolare interesse per noi.

528
00:38:22,855 --> 00:38:29,325
Foto URL che può essere utilizzato per recuperare le informazioni avatar per l'utente,

529
00:38:29,325 --> 00:38:32,430
ID provider che specifica chi sta

530
00:38:32,430 --> 00:38:35,755
fornendo queste informazioni per voi questo sarebbe o Facebook ID,

531
00:38:35,755 --> 00:38:43,415
Google ID e GitHub ID e così via e ulteriori informazioni anche il token di aggiornamento.

532
00:38:43,415 --> 00:38:46,390
Quindi vedi un sacco di informazioni

533
00:38:46,390 --> 00:38:49,840
rese disponibili tramite l'oggetto utente

534
00:38:49,840 --> 00:38:53,285
restituito da questo Authstate quando ti iscrivi

535
00:38:53,285 --> 00:38:57,400
e permettimi di attirare la tua attenzione sull'UID dell'utente,

536
00:38:57,400 --> 00:39:01,830
e questo è ciò che può essere usato per indicizzare l'utente nella nostra applicazione.

537
00:39:01,830 --> 00:39:05,950
Quindi questo è il servizio di autenticazione nel modo in cui l'

538
00:39:05,950 --> 00:39:10,325
ho impostato per utilizzare l'autenticazione Firebase in questa applicazione.

539
00:39:10,325 --> 00:39:14,730
Quindi, due modifiche che ho riflettuto su di te per mostrare

540
00:39:14,730 --> 00:39:19,180
come i miei servizi vengono modificati per utilizzare Firebase.

541
00:39:19,180 --> 00:39:23,605
Gran parte degli aggiornamenti che ho fatto alla mia applicazione Angular sono tutti

542
00:39:23,605 --> 00:39:28,115
nei servizi per utilizzare Firebase installato.

543
00:39:28,115 --> 00:39:31,900
Quindi, a causa del bambino strutturato dell'applicazione Angular,

544
00:39:31,900 --> 00:39:34,390
i componenti erano semplicemente dipendenti dai servizi e

545
00:39:34,390 --> 00:39:37,330
i servizi erano quelli con cui stiamo parlando al back-end.

546
00:39:37,330 --> 00:39:39,660
Quindi, molti degli aggiornamenti che ho fatto alla

547
00:39:39,660 --> 00:39:43,040
mia applicazione Angular coinvolgono solo l'aggiornamento di questi servizi per

548
00:39:43,040 --> 00:39:50,660
utilizzare il back-end Firebase di Google come servizio con i due moduli npm,

549
00:39:50,660 --> 00:39:53,815
Firebase e AngularFireAuth qui.

550
00:39:53,815 --> 00:39:58,690
Quindi, vedresti che gran parte degli aggiornamenti è limitata a

551
00:39:58,690 --> 00:40:04,285
tutti questi servizi che ho nella cartella dei servizi della mia applicazione Angular.

552
00:40:04,285 --> 00:40:06,710
Ovviamente, avevo bisogno di fare un po 'di

553
00:40:06,710 --> 00:40:09,615
aggiustamenti minimi nel componente dishdetail

554
00:40:09,615 --> 00:40:15,430
e nel componente header per farlo funzionare con Firebase.

555
00:40:15,430 --> 00:40:19,485
Puoi visitare rapidamente headercomponent.ts,

556
00:40:19,485 --> 00:40:25,760
headercomponent.html e dishdetailcomponent.tsfile per vedere come il codice

557
00:40:25,760 --> 00:40:29,210
è cambiato tra la versione precedente

558
00:40:29,210 --> 00:40:32,070
e la versione corrente dell'applicazione Angular,

559
00:40:32,070 --> 00:40:36,360
la versione precedente, intendo la versione che abbiamo usato per

560
00:40:36,360 --> 00:40:39,490
comunicando con il nostro

561
00:40:39,490 --> 00:40:43,230
server X plus Mongo DB che abbiamo usato nell'esercizio precedente.

562
00:40:43,230 --> 00:40:48,265
Ora, un altro posto dove mi vedete fare delle modifiche, e'

563
00:40:48,265 --> 00:40:51,640
interessante notare che e' nel servizio preferito.

564
00:40:51,640 --> 00:40:52,930
Nel servizio preferito,

565
00:40:52,930 --> 00:40:55,280
il modo in cui ho memorizzato i preferiti dell'utente,

566
00:40:55,280 --> 00:40:58,410
è che i preferiti sono una raccolta sul

567
00:40:58,410 --> 00:41:02,015
mio sito server e il preferito stesso contiene documenti.

568
00:41:02,015 --> 00:41:06,550
Ogni documento contiene l'ID utente e l'ID del piatto.

569
00:41:06,550 --> 00:41:09,210
Quindi, un particolare utente potrebbe avere

570
00:41:09,210 --> 00:41:13,335
più documenti ciascuno di essi che memorizzano l'ID utente e l'ID del piatto.

571
00:41:13,335 --> 00:41:20,035
Quindi, una raccolta di loro insieme definirà tutti i preferiti per un particolare utente.

572
00:41:20,035 --> 00:41:25,865
Ho scoperto che questo è un modo migliore per organizzare questi dati in Firebase.

573
00:41:25,865 --> 00:41:29,195
Nel nostro MongoDB più mongos,

574
00:41:29,195 --> 00:41:34,230
hai visto che avevo incorporato nella matrice di ID piatto nel

575
00:41:34,230 --> 00:41:40,575
documento dei preferiti e quindi ho definito lo schema preferito in questo modo.

576
00:41:40,575 --> 00:41:43,010
Qui, sto usando

577
00:41:43,010 --> 00:41:47,395
un documento separato per tracciare ciascuno dei preferiti per ciascuno degli utenti.

578
00:41:47,395 --> 00:41:50,295
Ora, poiché Firebase supporta l'interrogazione, quindi,

579
00:41:50,295 --> 00:41:55,545
posso interrogare il mio Firebase ed estrarre tutti i documenti che hanno gli stessi ID utente,

580
00:41:55,545 --> 00:41:58,585
che corrispondono all'utente che è attualmente connesso e quindi

581
00:41:58,585 --> 00:42:02,405
estrarre gli ID di piatto corrispondenti dai preferiti.

582
00:42:02,405 --> 00:42:05,250
Poi andrò e poi interrogherò il mio server

583
00:42:05,250 --> 00:42:08,475
e ottengo le informazioni del piatto per ciascuno di questi piatti.

584
00:42:08,475 --> 00:42:13,325
Quindi, si tratta di più viaggi al server al fine di ottenere

585
00:42:13,325 --> 00:42:18,680
tutte le mie informazioni piatti preferiti prima di poter rendere il mio elenco di preferiti.

586
00:42:18,680 --> 00:42:24,180
Ma questo è il modo migliore per far funzionare Firebase con la mia applicazione Angular.

587
00:42:24,180 --> 00:42:26,945
Forse, in una data futura,

588
00:42:26,945 --> 00:42:30,740
Firebase Cloud Firestone potrebbe estendersi per

589
00:42:30,740 --> 00:42:34,475
consentire qualcosa come popolare che abbiamo fatto con i mongo.

590
00:42:34,475 --> 00:42:38,570
In tal caso, aggiornerò il codice per usare quel modo

591
00:42:38,570 --> 00:42:42,705
di ottenere automaticamente tutte le informazioni del piatto.

592
00:42:42,705 --> 00:42:48,420
Quindi, l'onere della costruzione di questo documento composto verrà spostato sul sito del server.

593
00:42:48,420 --> 00:42:51,740
In questo momento, il mio cliente sta facendo gran parte del lavoro qui.

594
00:42:51,740 --> 00:42:53,795
Ora, quando entri qui,

595
00:42:53,795 --> 00:42:56,400
vedrai che nel metodo getFavorites,

596
00:42:56,400 --> 00:42:59,495
vedrai come sto accedendo ai miei preferiti qui.

597
00:42:59,495 --> 00:43:02,835
Quindi, quando faccio «Getfavorites» sto interrogando

598
00:43:02,835 --> 00:43:06,220
questa raccolta di preferiti, ma noto che qui,

599
00:43:06,220 --> 00:43:12,545
dico «ref dove è questo ID utente».

600
00:43:12,545 --> 00:43:15,335
Questo ID utente che ottengo qui.

601
00:43:15,335 --> 00:43:18,320
Quindi, nel costruttore del mio server preferito,

602
00:43:18,320 --> 00:43:22,855
sto sottoscrivendo a questo servizio Auth lo stato Get Auth nel servizio Auth.

603
00:43:22,855 --> 00:43:25,075
Quindi, nel servizio Auth se entri,

604
00:43:25,075 --> 00:43:28,615
vedrai questo metodo chiamato Ottieni stato Auth qui.

605
00:43:28,615 --> 00:43:33,175
Lo stato Get Auth restituisce this.AuthState,

606
00:43:33,175 --> 00:43:35,575
che ho definito proprio lì.

607
00:43:35,575 --> 00:43:39,760
Quindi, questo sarà un osservabile come mi vedrai dichiarare qui.

608
00:43:39,760 --> 00:43:41,800
Quindi, quell'osservabile è quello che

609
00:43:41,800 --> 00:43:46,755
userò all'interno del mio servizio preferito e quindi iscrivermi a quello.

610
00:43:46,755 --> 00:43:53,720
Quindi, ogni volta che le informazioni dell'utente cambiano questo verrà automaticamente riflesso qui.

611
00:43:53,720 --> 00:43:59,180
Quindi, hai visto che anche nell'applicazione precedente avevo usato un osservabile,

612
00:43:59,180 --> 00:44:04,525
al fine di riflettere le informazioni dell'utente nel mio componente di intestazione.

613
00:44:04,525 --> 00:44:06,030
Tipo di approccio simile,

614
00:44:06,030 --> 00:44:08,600
che sto usando nel mio componente preferito qui,

615
00:44:08,600 --> 00:44:13,055
per ottenere l'ID utente per l'utente attualmente connesso.

616
00:44:13,055 --> 00:44:16,385
Quindi, quando interrogo la raccolta My Favorites,

617
00:44:16,385 --> 00:44:22,825
interrogherò ed estrarrò solo quei documenti in cui l'utente corrisponde a questo.

618
00:44:22,825 --> 00:44:26,220
Quindi sto usando solo le modifiche di valore qui.

619
00:44:26,220 --> 00:44:29,210
Quindi, sto solo estraendo tutti i documenti,

620
00:44:29,210 --> 00:44:34,650
che non mi interessa l'ID del documento preferito stesso in questo momento.

621
00:44:34,650 --> 00:44:37,970
Quindi, li sto solo estraendo tutti e li sto usando.

622
00:44:37,970 --> 00:44:40,690
Se l'utente non è connesso e come puoi vedere

623
00:44:40,690 --> 00:44:43,620
sto lanciando un errore qui con il detto osservabile,

624
00:44:43,620 --> 00:44:50,735
«nessun utente ha effettuato l'accesso» che è ciò che viene visualizzato nel mio discorso preferito lì.

625
00:44:50,735 --> 00:44:53,960
Ora, anche IsFavorites viene aggiornato qui,

626
00:44:53,960 --> 00:44:57,685
ma in IsFavorites quello che sto facendo è andare al DB.

627
00:44:57,685 --> 00:45:02,795
Ora qui, accederò al database dicendo,

628
00:45:02,795 --> 00:45:06,135
«DB è uguale a firebase.firestore».

629
00:45:06,135 --> 00:45:09,610
Ricorda che sto importando Firebase qui,

630
00:45:09,610 --> 00:45:12,270
importa star come Firebase qui.

631
00:45:12,270 --> 00:45:17,970
Lo stesso Firestore angolare non mi fornisce un metodo per

632
00:45:17,970 --> 00:45:23,970
fare più query composte qui.

633
00:45:23,970 --> 00:45:29,495
Il Firestore angolare o il fuoco angolare a non mi forniscono questo.

634
00:45:29,495 --> 00:45:33,390
Quindi, questo è il motivo per cui devo ricorrere all'utilizzo di Firebase Firestore.

635
00:45:33,390 --> 00:45:35,840
Quindi, quando dico Firebase Firestore,

636
00:45:35,840 --> 00:45:42,310
questo mi dà un riferimento al database Firestore e quindi posso andare in questo database

637
00:45:42,310 --> 00:45:48,780
e quindi dire «Preferiti della raccolta DB» e quindi posso fare più query qui.

638
00:45:48,780 --> 00:45:55,470
Quindi, sto dicendo, .dove l'utente è questo.wheredish è l'ID del piatto.

639
00:45:55,470 --> 00:45:59,380
Quindi, se voglio ottenere un favorito specifico.

640
00:45:59,380 --> 00:46:03,640
Per verificare se un piatto specifico è il preferito di un utente ottengo

641
00:46:03,640 --> 00:46:08,285
quel particolare documento in cui l'utente e il piatto corrispondono a questi due,

642
00:46:08,285 --> 00:46:12,110
se non corrispondono, tornerà con un vuoto.

643
00:46:12,110 --> 00:46:16,610
Quindi, che estraggo e poi restituisco questo valore qui.

644
00:46:16,610 --> 00:46:18,900
Ora, poi posto i preferiti,

645
00:46:18,900 --> 00:46:25,770
vedi come sto facendo questo sto dicendo questo preferiti della collezione AFS e dirò «aggiungi».

646
00:46:25,770 --> 00:46:29,260
Guarda il documento che sto memorizzando nei miei preferiti.

647
00:46:29,260 --> 00:46:32,130
Il documento stesso contiene l'ID utente e l'ID del piatto.

648
00:46:32,130 --> 00:46:36,030
Quindi, questi due pezzi di informazioni racchiusi qui e se

649
00:46:36,030 --> 00:46:41,295
non allora rifiuterà la promessa senza nessun utente connesso qui.

650
00:46:41,295 --> 00:46:44,915
Allo stesso modo, per il favorito di eliminazione che ho implementato qui.

651
00:46:44,915 --> 00:46:48,735
Trascorri un po 'di tempo a esaminare questo codice per capire come ho

652
00:46:48,735 --> 00:46:53,375
sfruttato i moduli Firebase e Angular fire

653
00:46:53,375 --> 00:47:02,170
to npm per comunicare con il mio server Firebase che ho impostato nell'esercizio precedente.

654
00:47:02,170 --> 00:47:05,880
Con questo, ti ho dato una rapida panoramica di

655
00:47:05,880 --> 00:47:10,280
come è possibile configurare l'applicazione Angular per interagire con

656
00:47:10,280 --> 00:47:13,980
Firebase back-end come servizio e quindi essere in grado di

657
00:47:13,980 --> 00:47:19,970
supportare varie operazioni che hai all'interno dell'applicazione Angular.

658
00:47:19,970 --> 00:47:21,905
Come ho dimostrato in precedenza,

659
00:47:21,905 --> 00:47:24,150
questa applicazione angolare assomiglia esattamente

660
00:47:24,150 --> 00:47:26,690
alla versione precedente dell'applicazione Angular in cui stavamo

661
00:47:26,690 --> 00:47:31,915
usando la nostra versione del nostro server Express MongoDB.

662
00:47:31,915 --> 00:47:38,510
Ora, con questo completo questo particolare esercizio in cui ho illustrato in

663
00:47:38,510 --> 00:47:42,020
questa lezione sul back-end come servizio e ho anche dimostrato

664
00:47:42,020 --> 00:47:46,630
Firebase come esempio di un back-end come servizio.