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

2
00:00:04,708 --> 00:00:08,762
Nell'esercizio precedente, avevamo già configurato il nostro

3
00:00:08,762 --> 00:00:12,657
back-end Firebase come servizio con il nuovo progetto.

4
00:00:12,657 --> 00:00:18,637
E anche impostare un sacco di dati nel nostro database, quindi impostare il nostro storage e

5
00:00:18,637 --> 00:00:25,410
configurare il nostro server Firebase per fungere da back-end per la nostra applicazione React.

6
00:00:25,410 --> 00:00:30,670
In questo esercizio, vedremo una versione modificata della nostra applicazione React,

7
00:00:30,670 --> 00:00:36,080
che utilizza il back-end Firebase come servizio al fine di

8
00:00:36,080 --> 00:00:42,200
ottenere i dati e memorizzare anche le informazioni per gli utenti sul server.

9
00:00:42,200 --> 00:00:46,430
Inoltre, sfrutteremo il supporto di autenticazione fornito da Firebase

10
00:00:46,430 --> 00:00:48,510
per autenticare gli utenti.

11
00:00:48,510 --> 00:00:55,434
Sia utilizzando un approccio e-mail e password, sia utilizzando anche un account Google.

12
00:00:57,091 --> 00:01:04,231
Per iniziare a questo esercizio, vai in una posizione comoda sul tuo computer,

13
00:01:04,231 --> 00:01:09,347
quindi clona il repository Git dato,

14
00:01:09,347 --> 00:01:14,950
ti ho fornito la versione Firebase della nostra applicazione React.

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

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

17
00:01:27,470 --> 00:01:30,450
E poi clonare il repository Git.

18
00:01:30,450 --> 00:01:37,610
E una volta che il repository Git è stato clonato sul tuo computer, quindi spostati

19
00:01:37,610 --> 00:01:47,340
nella cartella Confusion-React-Firebase che verrà creata a questo punto.

20
00:01:47,340 --> 00:01:52,230
E poi noteresti che un sacco di file sono già installati lì.

21
00:01:52,230 --> 00:01:56,820
Andiamo avanti e fare un'installazione di filati per installare tutti i

22
00:01:56,820 --> 00:02:02,130
moduli nodo da cui dipende questa applicazione angolare.

23
00:02:02,130 --> 00:02:07,140
Questa versione installerà anche moduli nodo aggiuntivi chiamati Firebase.

24
00:02:07,140 --> 00:02:12,850
Spiegherò un po 'di più su questi moduli nodo più avanti in questo esercizio.

25
00:02:12,850 --> 00:02:18,420
Una volta completata l'installazione del progetto, aprire il progetto in un editor.

26
00:02:18,420 --> 00:02:24,290
E poi nel progetto, vai nella cartella origine> Firebase e

27
00:02:24,290 --> 00:02:26,700
quindi apri il file config.js.

28
00:02:26,700 --> 00:02:33,220
E nel file config.js, vedrai un set di configurazione Firebase

29
00:02:33,220 --> 00:02:38,950
che devi configurare con la tua configurazione del server Firebase.

30
00:02:38,950 --> 00:02:43,970
Come abbiamo visto nell'esercizio precedente, siamo in grado di ottenere tutte queste informazioni quando

31
00:02:43,970 --> 00:02:49,940
clicchiamo su questo pulsante qui chiamato Aggiungi Firebase alla tua app web.

32
00:02:49,940 --> 00:02:53,035
E quindi copiare queste informazioni e

33
00:02:53,035 --> 00:02:58,162
quindi incollare queste informazioni nel file config.js.

34
00:02:58,162 --> 00:03:03,786
Per sostituirli con la configurazione specifica dei server Firebase per

35
00:03:03,786 --> 00:03:06,280
tutte queste informazioni.

36
00:03:06,280 --> 00:03:10,844
E una volta che è completato, allora è possibile avviare l'

37
00:03:10,844 --> 00:03:14,609
applicazione React digitando inizio filato al prompt.

38
00:03:14,609 --> 00:03:18,331
Una volta che l'applicazione React è compilata, e così

39
00:03:18,331 --> 00:03:23,890
qui si vedrebbe la home page, la pagina circa, come vediamo qui.

40
00:03:23,890 --> 00:03:25,596
E il menu.

41
00:03:27,900 --> 00:03:31,570
E la pagina dei contatti.

42
00:03:31,570 --> 00:03:33,360
Accediamo noi stessi,

43
00:03:33,360 --> 00:03:36,865
lasciami tornare alla homepage e poi faremo il login noi stessi.

44
00:03:36,865 --> 00:03:38,800
Quindi, quando fai clic sul pulsante Login,

45
00:03:38,800 --> 00:03:43,430
vedrai il modulo tipico qui con l'email e le informazioni sulla password.

46
00:03:43,430 --> 00:03:47,010
Vedrai anche un pulsante iniziale qui chiamato Accedi con Google.

47
00:03:47,010 --> 00:03:49,740
Quindi fammi accedere con il mio account Google.

48
00:03:49,740 --> 00:03:54,885
Quindi, quando fai clic su Accedi con Google, si aprirà un'altra

49
00:03:54,885 --> 00:04:01,095
finestra del browser in cui ti verrà chiesto di autorizzare l'utilizzo del tuo account Google.

50
00:04:01,095 --> 00:04:07,745
Quindi vedrai, nell'angolo destro, vedrai immediatamente il tuo nome

51
00:04:07,745 --> 00:04:13,285
visualizzato qui, e con il pulsante di accesso ora trasformato in un pulsante di disconnessione.

52
00:04:13,285 --> 00:04:19,340
Quindi, a questo punto, dovresti essere in grado di vedere i tuoi preferiti.

53
00:04:19,340 --> 00:04:22,240
E in questo caso, dal momento che non abbiamo alcun favorito,

54
00:04:22,240 --> 00:04:24,110
quindi sarà vuoto a questo punto.

55
00:04:24,110 --> 00:04:29,610
Lasciatemi tornare al menu e quindi aggiungere un paio di elementi nei miei preferiti.

56
00:04:29,610 --> 00:04:35,990
Quindi aggiungerò questo piatto ai miei preferiti, quindi quando clicco su questo piatto,

57
00:04:35,990 --> 00:04:41,350
vedrai immediatamente l'icona trasformarsi in un cuore pieno.

58
00:04:41,350 --> 00:04:47,597
E lasciami anche selezionare un altro piatto e aggiungerlo ai miei preferiti.

59
00:04:47,597 --> 00:04:52,526
Ad poi ora quando si va ai miei preferiti, vedrete un paio

60
00:04:52,526 --> 00:04:57,187
di piatti aggiunti nei vostri preferiti, come ci si aspetterebbe.

61
00:04:57,187 --> 00:05:02,893
E ancora, è possibile eliminare i piatti facendo clic sulla

62
00:05:02,893 --> 00:05:09,270
croce Elimina per rimuovere l'elemento dalla lista dei preferiti, come mostrato qui.

63
00:05:09,270 --> 00:05:14,181
Ora possiamo anche aggiungere, come ti rendi conto, possiamo andare a qualsiasi piatto e

64
00:05:14,181 --> 00:05:17,140
poi aggiungere commenti su quel piatto.

65
00:05:17,140 --> 00:05:19,317
Quindi lasciatemi aggiungere un commento qui.

66
00:05:25,868 --> 00:05:31,364
E nel momento in cui invii il commento, vedrai immediatamente che

67
00:05:31,364 --> 00:05:38,562
il tuo commento verrà visualizzato qui con il nome dell'autore incluso anche qui.

68
00:05:38,562 --> 00:05:41,572
E con quella data come mostrato qui.

69
00:05:41,572 --> 00:05:46,592
Quindi, puoi vedere che la presentazione dei commenti dell'utente

70
00:05:46,592 --> 00:05:49,592
sarà supportata per qualsiasi piatto specifico.

71
00:05:49,592 --> 00:05:54,294
Quindi, questo è il modo in cui la tua applicazione funziona con quel

72
00:05:54,294 --> 00:05:58,211
Firebase come back-end come servizio.

73
00:05:58,211 --> 00:06:03,071
Ora, naturalmente, vi starete chiedendo, come riprogettare la nostra applicazione per

74
00:06:03,071 --> 00:06:07,882
fare uso di Firebase invece di utilizzare il

75
00:06:07,882 --> 00:06:12,110
server Express MongoDB standard che abbiamo costruito in precedenza?

76
00:06:13,220 --> 00:06:18,606
Per configurare l'applicazione in modo che comunichi con il server Firebase,

77
00:06:18,606 --> 00:06:21,349
è necessario installare il modulo Firebase.

78
00:06:21,349 --> 00:06:25,964
Il modulo Firebase, come si vede qui, fornisce lo strumento e l'

79
00:06:25,964 --> 00:06:31,772
infrastruttura che consente di comunicare con il server Firebase.

80
00:06:31,772 --> 00:06:35,639
E per installarlo nella tua applicazione,

81
00:06:35,639 --> 00:06:40,141
digiti l'installazione meno meno save firebase.

82
00:06:40,141 --> 00:06:41,893
Ora come fare uso di questi?

83
00:06:41,893 --> 00:06:47,461
Vi illustrerò che eseguendo rapidamente il codice modificato

84
00:06:47,461 --> 00:06:53,492
in cui facciamo uso di Firebase per modificare l'applicazione che abbiamo sviluppato in

85
00:06:53,492 --> 00:06:59,185
precedenza per utilizzare il server Firebase come back-end come servizio.

86
00:06:59,185 --> 00:07:04,065
Facciamo un rapido tour attraverso la nostra applicazione React modificata per capire

87
00:07:04,065 --> 00:07:08,825
come è stato riconfigurato per comunicare con il nostro server Firebase.

88
00:07:08,825 --> 00:07:11,933
Inizieremo il nostro viaggio nel file package.json.

89
00:07:11,933 --> 00:07:13,455
E nel file package.json,

90
00:07:13,455 --> 00:07:18,820
noterai che ho aggiunto il modulo Firebase npm in questo.

91
00:07:18,820 --> 00:07:24,020
E così quando cloni il repository Git e fai l'installazione di filati,

92
00:07:24,020 --> 00:07:27,880
il modulo Firebase viene installato automaticamente nella tua applicazione.

93
00:07:27,880 --> 00:07:31,810
Se stavi configurando una nuova applicazione React per

94
00:07:31,810 --> 00:07:33,160
comunicare con il server,

95
00:07:33,160 --> 00:07:38,850
devi installare esplicitamente il modulo Firebase nell'applicazione.

96
00:07:38,850 --> 00:07:44,880
Ora dopo questo, noterai modifiche nella cartella Firebase.

97
00:07:44,880 --> 00:07:47,396
Qui abbiamo già visto il file di configurazione.

98
00:07:47,396 --> 00:07:51,410
L' altro file che noterai qui si chiama firebase.js.

99
00:07:51,410 --> 00:07:55,227
Ora è qui che configuriamo la nostra applicazione per comunicare con

100
00:07:55,227 --> 00:07:56,530
il server Firebase.

101
00:07:56,530 --> 00:07:58,744
Quindi stiamo importando la configurazione qui.

102
00:07:58,744 --> 00:08:01,786
E poi importare firebase da firebase.

103
00:08:01,786 --> 00:08:06,624
E poi inizi l'app qui fornendo la configurazione al firebase,

104
00:08:06,624 --> 00:08:10,838
quindi questo è dove fornisci tutte le informazioni di configurazione in modo

105
00:08:10,838 --> 00:08:14,835
che il tuo client possa comunicare con il server Firebase.

106
00:08:14,835 --> 00:08:19,738
Inoltre, sto esportando alcune di queste esportazioni da

107
00:08:19,738 --> 00:08:23,280
qui chiamate auth, fireauth e così via.

108
00:08:23,280 --> 00:08:27,915
Questi userò nei creatori di azioni

109
00:08:27,915 --> 00:08:31,524
per comunicare con il mio Firebase Server.

110
00:08:33,371 --> 00:08:40,580
Ora, dopo questo, le principali modifiche saranno nel file ActionCreators.

111
00:08:40,580 --> 00:08:46,222
Ora non ho aggiunto nuove azioni, ma invece tutte le comunicazioni

112
00:08:46,222 --> 00:08:51,866
con il server sono ora modificate per comunicare con il nostro Firebase Server.

113
00:08:51,866 --> 00:08:55,478
Quindi, invece di usare il recupero, come abbiamo fatto in precedenza,

114
00:08:55,478 --> 00:08:57,979
ora useremo firestore.

115
00:08:57,979 --> 00:09:02,466
Quindi, come puoi vedere, ho importato auth, firestore,

116
00:09:02,466 --> 00:09:07,237
fireauth e firebasestore dal modulo firebase che

117
00:09:07,237 --> 00:09:11,260
ho impostato in precedenza nella cartella firebase.

118
00:09:11,260 --> 00:09:16,170
E poi tutti questi mi permetteranno di comunicare con il mio Firebase Server.

119
00:09:16,170 --> 00:09:20,320
Per recuperare una raccolta dal mio Firebase,

120
00:09:20,320 --> 00:09:25,050
diciamo semplicemente firestore.collection e quindi forniamo il nome della raccolta.

121
00:09:25,050 --> 00:09:29,250
E poi puoi aggiungere alla raccolta dicendo, aggiungi, come puoi vedere qui,

122
00:09:29,250 --> 00:09:37,570
che prende l'elemento specifico che stai aggiungendo nella tua collezione lì.

123
00:09:37,570 --> 00:09:40,110
Quindi questo è il documento che stiamo aggiungendo alla nostra collezione.

124
00:09:40,110 --> 00:09:43,500
Quindi questo è per il commento post, come puoi vedere qui.

125
00:09:43,500 --> 00:09:48,270
E quando lo pubblichi, ti verrà fornito di nuovo con un DocRef,

126
00:09:48,270 --> 00:09:51,260
che è il riferimento al documento,

127
00:09:51,260 --> 00:09:56,570
che quindi puoi usare per andare a recuperare il documento dal tuo server.

128
00:09:56,570 --> 00:10:00,180
Ora il modo in cui Firebase funziona è che fornirà

129
00:10:00,180 --> 00:10:04,700
l'ID separatamente dal contenuto effettivo dei documenti.

130
00:10:04,700 --> 00:10:10,550
Quindi Firebase mantiene l'ID e i dati del documento stessi separatamente.

131
00:10:10,550 --> 00:10:15,450
Quindi qui devo combinare esplicitamente i due insieme in

132
00:10:15,450 --> 00:10:18,260
un oggetto JavaScript qui, chiamato commento qui.

133
00:10:18,260 --> 00:10:23,450
Quindi, come vedi dal documento, quindi noti che quando

134
00:10:23,450 --> 00:10:29,710
inserisco un elemento in una raccolta, restituisce un DocRef qui.

135
00:10:29,710 --> 00:10:34,180
E dal DocRef, posso ottenere l'ID del documento.

136
00:10:34,180 --> 00:10:36,610
E quindi quello che sto facendo qui è che sto andando a

137
00:10:36,610 --> 00:10:39,464
prendere il documento corrispondente qui.

138
00:10:39,464 --> 00:10:44,305
E poi una volta che il documento è stato recuperato, ora, ovviamente, il documento dovrebbe esistere,

139
00:10:44,305 --> 00:10:49,015
quindi questo dovrebbe essere sempre vero, perché abbiamo appena inserito il documento.

140
00:10:49,015 --> 00:10:53,032
Ma solo per completezza, sto facendo un controllo esplicito per questo.

141
00:10:53,032 --> 00:10:57,576
E poi dopo che i dati che si trovano nel documento si

142
00:10:57,576 --> 00:11:01,822
ottengono dicendo doc.data, come vedi qui.

143
00:11:01,822 --> 00:11:05,658
E poi l'id del documento è ottenuto da doc.id.

144
00:11:05,658 --> 00:11:07,073
Quindi questi due sono separati.

145
00:11:07,073 --> 00:11:12,708
Ma all'interno del nostro codice React, abbiamo sempre memorizzato l'id e

146
00:11:12,708 --> 00:11:20,530
i dati insieme come un singolo documento JSON qui, o oggetto JavaScript qui.

147
00:11:20,530 --> 00:11:23,340
Ecco perché sto combinando i due insieme

148
00:11:23,340 --> 00:11:26,800
in un singolo oggetto JavaScript qui facendo questo.

149
00:11:26,800 --> 00:11:30,490
Mi vedrai ripetutamente farlo per, ad esempio,

150
00:11:30,490 --> 00:11:35,510
per promozioni audaci e così via, anche in ActionCreators.

151
00:11:35,510 --> 00:11:41,640
E poi dopo sto aggiungendo il commento nel mio negozio Redux qui,

152
00:11:41,640 --> 00:11:44,250
e il resto del codice rimane come tale.

153
00:11:44,250 --> 00:11:47,016
Allo stesso modo, per recuperare i piatti,

154
00:11:47,016 --> 00:11:52,980
vedrai come stiamo recuperando diversi piatti dal Firebase.

155
00:11:52,980 --> 00:11:58,330
Quindi stiamo vedendo Firestore.collection piatti ottenere e ottenere i piatti.

156
00:11:58,330 --> 00:12:02,520
Ora, quando lo otterrai, allora mi darà un valore

157
00:12:02,520 --> 00:12:06,680
di istantanea, che è l'istantanea dello stato attuale di questa collezione, e da questo,

158
00:12:06,680 --> 00:12:10,690
devo entrare e recuperare ogni piatto.

159
00:12:10,690 --> 00:12:15,400
E poi sto ricostruendo la mia serie di piatti qui.

160
00:12:15,400 --> 00:12:18,990
Ora nota che, come ho detto, l'id e i dati sono separati, quindi

161
00:12:18,990 --> 00:12:23,495
ho bisogno di combinarli insieme, perché è così che uso i dati nella mia

162
00:12:23,495 --> 00:12:27,660
applicazione React, quindi lo sto spingendo nell'array di piatti.

163
00:12:27,660 --> 00:12:32,980
E poi finalmente restituendo i piatti che verranno poi inseriti nel mio

164
00:12:32,980 --> 00:12:34,380
negozio Redux qui.

165
00:12:34,380 --> 00:12:39,642
Quindi questo tipo di modifiche sono state apportate in ActionCreators.

166
00:12:39,642 --> 00:12:45,843
Ora il processo di login e logout sarà gestito qui sotto.

167
00:12:45,843 --> 00:12:51,445
Quindi per il login, l'autenticazione che abbiamo importato dal firebase,

168
00:12:51,445 --> 00:12:56,372
l'autenticazione è quella che mi permette di fare il login e il logout.

169
00:12:56,372 --> 00:12:59,363
Quindi, se si accede utilizzando e-mail e password,

170
00:12:59,363 --> 00:13:03,940
fornisce con questo metodo chiamato signinWithEmailAndPassword.

171
00:13:03,940 --> 00:13:10,250
E poi si fornisce l'e-mail e la password come i due parametri qui.

172
00:13:10,250 --> 00:13:14,010
E poi questo ti permetterà di accedere.

173
00:13:14,010 --> 00:13:20,985
E quando si accede, l'autenticazione fornisce questo oggetto chiamato CurrentUser sull'autenticazione.

174
00:13:20,985 --> 00:13:26,455
Quindi ottieni le informazioni dell'utente dicendo auth.currentUser qui.

175
00:13:26,455 --> 00:13:31,235
E sto anche memorizzando le informazioni dell'utente nel mio database.

176
00:13:31,235 --> 00:13:33,879
Ora non sto tracciando esplicitamente alcun token e

177
00:13:33,879 --> 00:13:37,945
cose del genere perché questo viene automaticamente tracciato da auth per me,

178
00:13:37,945 --> 00:13:40,606
che è fornito dal modulo npm di Firebase.

179
00:13:40,606 --> 00:13:43,723
Quindi sto solo sfruttando questo per tracciare l'uso corrente.

180
00:13:43,723 --> 00:13:49,078
Se l'utente corrente è nullo, so che il mio client

181
00:13:49,078 --> 00:13:53,840
non ha alcun utente connesso al server.

182
00:13:53,840 --> 00:13:59,510
E allo stesso modo, per disconnettere l'utente, dico semplicemente Auth.signout.

183
00:13:59,510 --> 00:14:04,370
Ora di nuovo, la documentazione su come utilizzare il

184
00:14:04,370 --> 00:14:09,060
modulo Filebase npm è tutta disponibile nella documentazione di Firebase.

185
00:14:09,060 --> 00:14:14,238
Quindi puoi facilmente cercarlo per capire come sfruttare

186
00:14:14,238 --> 00:14:18,993
Firebase per utilizzare tutte queste diverse funzioni

187
00:14:18,993 --> 00:14:23,443
disponibili dal modulo npm di Firebase.

188
00:14:23,443 --> 00:14:27,999
Inoltre, per i preferiti, pubblichiamo un favorito e

189
00:14:27,999 --> 00:14:32,454
quindi è necessario pubblicare elementi, quindi si direbbe aggiungere, e

190
00:14:32,454 --> 00:14:36,333
quando è necessario ottenere un elemento, si dirà ottenere.

191
00:14:36,333 --> 00:14:41,455
E puoi anche ottenere un elemento da un documento specifico nelle collezioni.

192
00:14:41,455 --> 00:14:45,245
Se si desidera un documento specifico nella raccolta, si dirà .doc.

193
00:14:45,245 --> 00:14:49,015
E poi si fornisce l'id del documento qui.

194
00:14:49,015 --> 00:14:51,585
Quindi è così che è possibile ottenere un documento specifico.

195
00:14:53,465 --> 00:14:56,265
Elimina anche i preferiti e recupera i preferiti e così via.

196
00:14:56,265 --> 00:15:01,640
Ora per i preferiti da memorizzare nel mio Firebase,

197
00:15:01,640 --> 00:15:09,100
i preferiti sono memorizzati come ID utente e ID piatto qui.

198
00:15:09,100 --> 00:15:13,680
Ora firestore stesso non ha alcun modo di popolare le

199
00:15:13,680 --> 00:15:15,800
informazioni del piatto nell'ID del piatto.

200
00:15:15,800 --> 00:15:21,214
Quindi sto solo recuperando tutte le informazioni sul piatto,

201
00:15:21,214 --> 00:15:27,694
quindi questo è ogni favorito è una coppia, utente e coppia di ID piatto.

202
00:15:27,694 --> 00:15:30,431
Quindi lo sto solo prendendo nei miei preferiti qui.

203
00:15:30,431 --> 00:15:35,859
Ma questo significa anche che ho bisogno di modificare il mio componente preferito in modo che

204
00:15:35,859 --> 00:15:40,091
possa usare l'ID piatto e quindi indicizzare nei piatti che

205
00:15:40,091 --> 00:15:45,560
sono memorizzati nel mio negozio Redux, e ottenere le informazioni sul piatto.

206
00:15:45,560 --> 00:15:49,194
O l'alternativa sarebbe quella di andare al server e quindi recuperare le informazioni.

207
00:15:49,194 --> 00:15:53,560
Ma dal momento che ho già i dati sui piatti nel mio negozio Redux,

208
00:15:53,560 --> 00:15:58,234
perché ho già fatto i piatti di recupero per recuperare tutte

209
00:15:58,234 --> 00:15:59,474
le informazioni sui piatti.

210
00:15:59,474 --> 00:16:05,492
Sto solo entrando direttamente nell'oggetto piatti nel mio Redux strappato e

211
00:16:05,492 --> 00:16:08,190
recuperando queste informazioni.

212
00:16:08,190 --> 00:16:12,250
Quindi questo significa anche che ci sono modifiche al componente principale.

213
00:16:12,250 --> 00:16:18,894
Nel componente principale, noteresti che quando faccio il favorito qui per

214
00:16:18,894 --> 00:16:25,343
il dettaglio del piatto, avrei semplicemente dovuto confrontare il piatto con quel dishID.

215
00:16:25,343 --> 00:16:29,188
Quindi il piatto qui nel mio preferito è il dishId stesso, quindi

216
00:16:29,188 --> 00:16:31,540
ho solo bisogno di fare il confronto.

217
00:16:31,540 --> 00:16:35,334
Quindi ci sarà un piccolo cambiamento a questa riga nel dishId.

218
00:16:35,334 --> 00:16:39,503
E anche noterai che quando chiamo i preferiti,

219
00:16:39,503 --> 00:16:42,786
oltre a fornire i loro preferiti,

220
00:16:42,786 --> 00:16:47,322
fornisco anche i piatti come uno degli oggetti di scena per i miei preferiti.

221
00:16:47,322 --> 00:16:51,711
Quindi questo è un altro cambiamento che noterai nel componente principale.

222
00:16:51,711 --> 00:16:54,990
E allo stesso modo, nel componente preferito,

223
00:16:54,990 --> 00:16:59,996
noterai che all'interno del componente preferito qui sotto,

224
00:16:59,996 --> 00:17:04,933
noterai che, quando eseguo il rendering del componente preferito.

225
00:17:04,933 --> 00:17:09,761
Quindi, proprio qui in questa funzione qui, preferiti const,

226
00:17:09,761 --> 00:17:14,113
quello che sto facendo è che sto andando nei piatti preferiti, i piatti sono

227
00:17:14,113 --> 00:17:19,338
una serie di tutti i DishID qui, quindi mi mappa attraverso quello.

228
00:17:19,338 --> 00:17:23,591
Quindi guarda ogni DishID, poi dai piatti,

229
00:17:23,591 --> 00:17:27,545
ho filtrato quel piatto particolare.

230
00:17:27,545 --> 00:17:29,484
E poi ottenuto il dishId, quindi

231
00:17:29,484 --> 00:17:33,023
qui mi vedrai usare il filtro dell'array JavaScript qui.

232
00:17:33,023 --> 00:17:36,419
Filtrerà le informazioni specifiche del piatto e

233
00:17:36,419 --> 00:17:38,687
poi renderà quel piatto particolare.

234
00:17:38,687 --> 00:17:43,415
Quindi questo è un lavoro aggiuntivo che devo fare nel mio

235
00:17:43,415 --> 00:17:48,840
componente preferito per rendere ciascuno dei piatti lì.

236
00:17:48,840 --> 00:17:55,900
Quindi, questo tipo di piccole modifiche che noterai in un paio dei componenti, in

237
00:17:55,900 --> 00:17:59,840
particolare il dettaglio del piatto, il favorito e il componente principale.

238
00:17:59,840 --> 00:18:05,410
Ecco dove sono state apportate alcune piccole modifiche al fine di facilitare l'

239
00:18:05,410 --> 00:18:09,980
applicazione React per essere in grado di sfruttare il Firebase Server.

240
00:18:09,980 --> 00:18:12,790
Quindi questa è una rapida revisione di come

241
00:18:12,790 --> 00:18:17,870
la mia applicazione React è stata modificata per comunicare con il mio Firebase Server.

242
00:18:17,870 --> 00:18:23,257
Ora, come con Angular, avevamo anche l'Angularfire, che

243
00:18:23,257 --> 00:18:29,680
ci stava fornendo un modo di sfruttare insieme a Firebase per comunicare con il server.

244
00:18:29,680 --> 00:18:35,659
React non ha alcuna controparte di questo tipo, quindi sto usando direttamente il

245
00:18:35,659 --> 00:18:41,472
modulo Firebase npm che fornisce la base di base per accedere al server Firebase.

246
00:18:41,472 --> 00:18:46,165
E poi sfruttando le funzioni che fornisce per comunicare con il mio

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

248
00:18:47,382 --> 00:18:52,506
Trascorri un po 'di tempo a esaminare questo codice per capire come

249
00:18:52,506 --> 00:18:57,534
ho sfruttato i moduli npm di Firebase per comunicare

250
00:18:57,534 --> 00:19:03,090
con il mio Firebase Server che ho impostato nell'esercizio precedente.

251
00:19:03,090 --> 00:19:08,293
Con questo, ti ho dato una rapida panoramica di come puoi configurare

252
00:19:08,293 --> 00:19:13,957
l'applicazione React per interagire con Firebase back-end come servizio, e

253
00:19:13,957 --> 00:19:20,012
quindi essere in grado di supportare varie operazioni che hai all'interno dell'applicazione.

254
00:19:20,012 --> 00:19:24,632
Ora, con questo, completa questo particolare esercizio in cui ho

255
00:19:24,632 --> 00:19:28,758
illustrato in questa lezione sul back-end come servizio e ho

256
00:19:28,758 --> 00:19:33,645
anche dimostrato Firebase come esempio di un back-end come servizio.

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