1
00:00:00,000 --> 00:00:04,708
[MÚSICA]

2
00:00:04,708 --> 00:00:08,762
No exercício anterior, já tínhamos configurado nosso

3
00:00:08,762 --> 00:00:12,657
back-end Firebase como um serviço com o novo projeto.

4
00:00:12,657 --> 00:00:18,637
E também configurar muitos dados em nosso banco de dados e, em seguida, configurar nosso armazenamento e

5
00:00:18,637 --> 00:00:25,410
configurar nosso servidor Firebase para atuar como o backend do nosso aplicativo React.

6
00:00:25,410 --> 00:00:30,670
Neste exercício, vamos olhar para uma versão modificada do nosso aplicativo React,

7
00:00:30,670 --> 00:00:36,080
que faz uso do back-end Firebase como um serviço para

8
00:00:36,080 --> 00:00:42,200
obter os dados e também armazenar informações para os usuários no servidor.

9
00:00:42,200 --> 00:00:46,430
Além disso, aproveitaremos o suporte de autenticação que o Firebase

10
00:00:46,430 --> 00:00:48,510
fornece para autenticar usuários.

11
00:00:48,510 --> 00:00:55,434
Usando uma abordagem de e-mail e senha e também usando uma conta do Google.

12
00:00:57,091 --> 00:01:04,231
Para começar este exercício, vá para um local conveniente no seu computador

13
00:01:04,231 --> 00:01:09,347
e, em seguida, clone o repositório Git dado, Eu forneci a

14
00:01:09,347 --> 00:01:14,950
você a versão Firebase do nosso aplicativo React.

15
00:01:14,950 --> 00:01:24,300
Então digite 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, em seguida, clonar o repositório Git.

18
00:01:30,450 --> 00:01:37,610
E uma vez que o repositório Git é clonado para

19
00:01:37,610 --> 00:01:47,340
o seu computador, em seguida, mova para a pasta Confusion-react-Firebase que será criada neste ponto.

20
00:01:47,340 --> 00:01:52,230
E então você notaria que um monte de arquivos já estão instalados lá.

21
00:01:52,230 --> 00:01:56,820
Vamos em frente e fazer uma instalação de fio para instalar todos os

22
00:01:56,820 --> 00:02:02,130
módulos de nó em que esta aplicação Angular é dependente.

23
00:02:02,130 --> 00:02:07,140
Esta versão também instalará módulos de nó adicionais chamados Firebase.

24
00:02:07,140 --> 00:02:12,850
Vou explicar um pouco mais sobre esses módulos de nó mais tarde neste exercício.

25
00:02:12,850 --> 00:02:18,420
Quando a instalação do projeto estiver concluída, abra o projeto em um editor.

26
00:02:18,420 --> 00:02:24,290
E, em seguida, no projeto, vá para a pasta código-fonte > Firebase e

27
00:02:24,290 --> 00:02:26,700
, em seguida, abra o arquivo config.js.

28
00:02:26,700 --> 00:02:33,220
E no arquivo config.js, você verá um conjunto de configuração do Firebase

29
00:02:33,220 --> 00:02:38,950
que você precisa configurar com sua própria configuração do Firebase server.

30
00:02:38,950 --> 00:02:43,970
Como vimos no exercício anterior, podemos obter todas essas informações quando

31
00:02:43,970 --> 00:02:49,940
clicamos neste botão aqui chamado Adicionar Firebase ao seu aplicativo web.

32
00:02:49,940 --> 00:02:53,035
E, em seguida, copie essas informações e

33
00:02:53,035 --> 00:02:58,162
, em seguida, cole essas informações em seu arquivo config.js.

34
00:02:58,162 --> 00:03:03,786
Para substituí-los por sua configuração específica de servidores Firebase para

35
00:03:03,786 --> 00:03:06,280
todas essas informações.

36
00:03:06,280 --> 00:03:10,844
E uma vez que isso é concluído, em seguida, você pode iniciar o seu

37
00:03:10,844 --> 00:03:14,609
aplicativo React digitando yarn start no prompt.

38
00:03:14,609 --> 00:03:18,331
Uma vez que seu aplicativo React é compilado, e assim

39
00:03:18,331 --> 00:03:23,890
aqui você veria a página inicial, a página sobre, como vemos aqui.

40
00:03:23,890 --> 00:03:25,596
E o cardápio.

41
00:03:27,900 --> 00:03:31,570
E a página de contato.

42
00:03:31,570 --> 00:03:33,360
Vamos fazer login nós mesmos,

43
00:03:33,360 --> 00:03:36,865
deixe-me voltar para a página inicial e então nós vamos fazer login nós mesmos.

44
00:03:36,865 --> 00:03:38,800
Então, quando você clicar no botão Login,

45
00:03:38,800 --> 00:03:43,430
você verá o formulário típico aqui com o e-mail e as informações de senha.

46
00:03:43,430 --> 00:03:47,010
Você também verá um botão inicial aqui chamado Login with Google.

47
00:03:47,010 --> 00:03:49,740
Então deixe-me fazer login com minha conta do Google.

48
00:03:49,740 --> 00:03:54,885
Então, quando você clica no Login with Google, ele abrirá outra

49
00:03:54,885 --> 00:04:01,095
janela do navegador onde você será solicitado a autorizar o uso da sua conta do Google.

50
00:04:01,095 --> 00:04:07,745
Então você verá, no canto direito, você verá imediatamente seu nome

51
00:04:07,745 --> 00:04:13,285
sendo exibido aqui, e com o botão de login agora transformado em um botão de logout.

52
00:04:13,285 --> 00:04:19,340
Então, neste ponto, você deve ser capaz de ver seus favoritos.

53
00:04:19,340 --> 00:04:22,240
E neste caso, já que não temos favoritos,

54
00:04:22,240 --> 00:04:24,110
então estará vazio neste momento.

55
00:04:24,110 --> 00:04:29,610
Deixe-me voltar ao menu e, em seguida, adicionar alguns itens aos meus favoritos.

56
00:04:29,610 --> 00:04:35,990
Então, vou adicionar este prato aos meus favoritos, então, quando eu clicar neste prato,

57
00:04:35,990 --> 00:04:41,350
você verá imediatamente o ícone se transformar em um coração cheio.

58
00:04:41,350 --> 00:04:47,597
E deixe-me também selecionar mais um prato e adicioná-lo aos meus favoritos.

59
00:04:47,597 --> 00:04:52,526
Ad então agora quando você vai para os meus favoritos, você verá um par

60
00:04:52,526 --> 00:04:57,187
de pratos adicionados em seus favoritos, como você esperaria.

61
00:04:57,187 --> 00:05:02,893
E novamente, você pode excluir os pratos clicando na

62
00:05:02,893 --> 00:05:09,270
cruz de exclusão para remover o item de sua lista de favoritos, como mostrado aqui.

63
00:05:09,270 --> 00:05:14,181
Agora também podemos adicionar, como você percebe, podemos ir a qualquer prato e,

64
00:05:14,181 --> 00:05:17,140
em seguida, adicionar comentários sobre esse prato.

65
00:05:17,140 --> 00:05:19,317
Permitam-me, portanto, acrescentar aqui um comentário.

66
00:05:25,868 --> 00:05:31,364
E no momento em que você enviar o comentário, você verá imediatamente que

67
00:05:31,364 --> 00:05:38,562
seu comentário será exibido aqui com o nome do autor também incluído aqui.

68
00:05:38,562 --> 00:05:41,572
E com essa data como mostrado aqui.

69
00:05:41,572 --> 00:05:46,592
Então, você pode ver que o envio de comentários do usuário

70
00:05:46,592 --> 00:05:49,592
será suportado para qualquer prato específico.

71
00:05:49,592 --> 00:05:54,294
Então, é assim que seu aplicativo funciona com esse

72
00:05:54,294 --> 00:05:58,211
Firebase como o back-end como um serviço.

73
00:05:58,211 --> 00:06:03,071
Agora, é claro, você deve estar se perguntando, como redesenhamos nosso aplicativo para

74
00:06:03,071 --> 00:06:07,882
fazer uso do Firebase em vez de usar o

75
00:06:07,882 --> 00:06:12,110
servidor Express MongoDB padrão que construímos anteriormente?

76
00:06:13,220 --> 00:06:18,606
Para configurar seu aplicativo para se comunicar com o servidor Firebase,

77
00:06:18,606 --> 00:06:21,349
você precisa instalar o módulo Firebase.

78
00:06:21,349 --> 00:06:25,964
O módulo Firebase, como você vê aqui, fornece a ferramenta e a

79
00:06:25,964 --> 00:06:31,772
infraestrutura que permitem que você se comunique com o servidor Firebase.

80
00:06:31,772 --> 00:06:35,639
E para instalar isso em seu aplicativo,

81
00:06:35,639 --> 00:06:40,141
você digita a instalação menos salvar firebase.

82
00:06:40,141 --> 00:06:41,893
Agora, como fazer uso destes?

83
00:06:41,893 --> 00:06:47,461
Ilustrarei isso executando rapidamente você através do código modificado

84
00:06:47,461 --> 00:06:53,492
onde usamos o Firebase para modificar o aplicativo que desenvolvemos

85
00:06:53,492 --> 00:06:59,185
anteriormente para fazer uso do Firebase server como o back-end como um serviço.

86
00:06:59,185 --> 00:07:04,065
Vamos fazer um tour rápido através do nosso aplicativo React modificado para entender

87
00:07:04,065 --> 00:07:08,825
como ele foi reconfigurado para se comunicar com nosso servidor Firebase.

88
00:07:08,825 --> 00:07:11,933
Começaremos nossa jornada no arquivo package.json.

89
00:07:11,933 --> 00:07:13,455
E no arquivo package.json,

90
00:07:13,455 --> 00:07:18,820
você vai notar que eu adicionei no módulo npm Firebase para isso.

91
00:07:18,820 --> 00:07:24,020
Então, quando você clona o repositório Git e faz a instalação do yarn,

92
00:07:24,020 --> 00:07:27,880
o módulo Firebase é instalado automaticamente em seu aplicativo.

93
00:07:27,880 --> 00:07:31,810
Se você estava configurando um novo aplicativo React para

94
00:07:31,810 --> 00:07:33,160
se comunicar com o servidor,

95
00:07:33,160 --> 00:07:38,850
então você precisa instalar explicitamente o módulo Firebase em seu aplicativo.

96
00:07:38,850 --> 00:07:44,880
Agora, depois disso, você notará mudanças na pasta Firebase.

97
00:07:44,880 --> 00:07:47,396
Aqui já vimos o arquivo de configuração.

98
00:07:47,396 --> 00:07:51,410
O outro arquivo que você notará aqui é chamado firebase.js.

99
00:07:51,410 --> 00:07:55,227
Agora é aqui que configuramos nosso aplicativo para se comunicar com

100
00:07:55,227 --> 00:07:56,530
o Firebase Server.

101
00:07:56,530 --> 00:07:58,744
Então, estamos importando a configuração aqui.

102
00:07:58,744 --> 00:08:01,786
E depois importando a base de fogo da base.

103
00:08:01,786 --> 00:08:06,624
E então você inicia o aplicativo aqui fornecendo a configuração para o firebase,

104
00:08:06,624 --> 00:08:10,838
então é aqui que você fornece todas as informações de configuração para

105
00:08:10,838 --> 00:08:14,835
que seu cliente possa se comunicar com o Firebase Server.

106
00:08:14,835 --> 00:08:19,738
Além disso, estou exportando algumas dessas exportações

107
00:08:19,738 --> 00:08:23,280
daqui chamadas auth, fireauth e assim por diante.

108
00:08:23,280 --> 00:08:27,915
Estes farei uso nos criadores de ação

109
00:08:27,915 --> 00:08:31,524
para me comunicar com meu Firebase Server.

110
00:08:33,371 --> 00:08:40,580
Agora, depois disso, as principais modificações estarão no arquivo ActionCreators.

111
00:08:40,580 --> 00:08:46,222
Agora eu não adicionei nenhuma nova ação, mas em vez disso toda a comunicação

112
00:08:46,222 --> 00:08:51,866
com o servidor agora é modificada para se comunicar com o nosso Firebase Server.

113
00:08:51,866 --> 00:08:55,478
Então, em vez de usar a busca, como fizemos anteriormente,

114
00:08:55,478 --> 00:08:57,979
agora vamos usar firestore.

115
00:08:57,979 --> 00:09:02,466
Como você pode ver, eu importei o auth, firestore,

116
00:09:02,466 --> 00:09:07,237
fireauth e firebasestore do módulo firebase que

117
00:09:07,237 --> 00:09:11,260
configurei anteriormente na pasta firebase.

118
00:09:11,260 --> 00:09:16,170
E então tudo isso me permitirá me comunicar com meu Firebase Server.

119
00:09:16,170 --> 00:09:20,320
Para buscar uma coleção do meu Firebase,

120
00:09:20,320 --> 00:09:25,050
simplesmente dizemos firestore.collection e, em seguida, fornecemos o nome da coleção.

121
00:09:25,050 --> 00:09:29,250
E então você pode adicionar à coleção dizendo, adicione, como você pode ver aqui,

122
00:09:29,250 --> 00:09:37,570
que leva o item específico que você está adicionando à sua coleção lá.

123
00:09:37,570 --> 00:09:40,110
Então esse é o documento que estamos adicionando em nossa coleção.

124
00:09:40,110 --> 00:09:43,500
Então isso é para o comentário post, como você pode ver aqui.

125
00:09:43,500 --> 00:09:48,270
E quando você postar isso, então você será fornecido de volta com um DocRef,

126
00:09:48,270 --> 00:09:51,260
que é a referência para o documento,

127
00:09:51,260 --> 00:09:56,570
que então você pode usar para ir e buscar o documento do seu servidor.

128
00:09:56,570 --> 00:10:00,180
Agora, a maneira como o Firebase funciona é que ele fornecerá

129
00:10:00,180 --> 00:10:04,700
o ID separadamente do conteúdo real dos documentos.

130
00:10:04,700 --> 00:10:10,550
Portanto, o Firebase mantém o ID e os próprios dados do documento separadamente.

131
00:10:10,550 --> 00:10:15,450
Então aqui eu tenho que combinar explicitamente os dois juntos em

132
00:10:15,450 --> 00:10:18,260
um objeto JavaScript aqui, chamado comentário aqui.

133
00:10:18,260 --> 00:10:23,450
Então, como você vê no documento, então você percebe que quando eu

134
00:10:23,450 --> 00:10:29,710
inserir um item em uma coleção, ele retorna um DocRef aqui.

135
00:10:29,710 --> 00:10:34,180
E a partir do DocRef, posso obter a identificação do documento.

136
00:10:34,180 --> 00:10:36,610
E então o que eu estou fazendo aqui é eu estou indo e

137
00:10:36,610 --> 00:10:39,464
buscar o documento correspondente aqui.

138
00:10:39,464 --> 00:10:44,305
E então uma vez que o documento é buscado, agora, é claro, o documento deve existir,

139
00:10:44,305 --> 00:10:49,015
então isso deve ser sempre verdade, porque acabamos de inserir o documento.

140
00:10:49,015 --> 00:10:53,032
Mas só por uma questão de completude, estou fazendo uma verificação explícita para isso.

141
00:10:53,032 --> 00:10:57,576
E então, depois disso, os dados que estão no documento são

142
00:10:57,576 --> 00:11:01,822
obtidos dizendo doc.data, como você vê aqui.

143
00:11:01,822 --> 00:11:05,658
E, em seguida, o ID do documento é obtido por doc.id.

144
00:11:05,658 --> 00:11:07,073
Portanto, estes dois são separados.

145
00:11:07,073 --> 00:11:12,708
Mas dentro do nosso código React, nós sempre armazenamos o id e

146
00:11:12,708 --> 00:11:20,530
os dados juntos como um único documento JSON aqui, ou objeto JavaScript aqui.

147
00:11:20,530 --> 00:11:23,340
Então é por isso que eu estou combinando os dois juntos

148
00:11:23,340 --> 00:11:26,800
em um único objeto JavaScript aqui fazendo isso.

149
00:11:26,800 --> 00:11:30,490
Você vai me ver repetidamente fazendo isso para, digamos, por exemplo,

150
00:11:30,490 --> 00:11:35,510
para promoções audaciosas e assim por diante, também nos ActionCreators.

151
00:11:35,510 --> 00:11:41,640
E depois disso eu estou adicionando o comentário na minha loja Redux aqui,

152
00:11:41,640 --> 00:11:44,250
e o resto do código permanece como tal.

153
00:11:44,250 --> 00:11:47,016
Da mesma forma, para buscar pratos,

154
00:11:47,016 --> 00:11:52,980
você verá como estamos pegando vários pratos da Firebase.

155
00:11:52,980 --> 00:11:58,330
Então estamos vendo pratos de coleta de fogo obter e obter os pratos.

156
00:11:58,330 --> 00:12:02,520
Agora, quando você obter isso, então ele vai me dar um valor instantâneo,

157
00:12:02,520 --> 00:12:06,680
que é o instantâneo do estado atual desta coleção, e

158
00:12:06,680 --> 00:12:10,690
a partir disso, eu tenho que entrar e recuperar cada e cada prato.

159
00:12:10,690 --> 00:12:15,400
E então eu estou reconstruindo minha variedade de pratos aqui.

160
00:12:15,400 --> 00:12:18,990
Agora note que, como eu disse, o id e os dados são separados, então

161
00:12:18,990 --> 00:12:23,495
eu preciso combiná-los juntos, porque é assim que eu uso os dados no meu

162
00:12:23,495 --> 00:12:27,660
aplicativo React, então eu estou empurrando isso para a matriz de pratos.

163
00:12:27,660 --> 00:12:32,980
E, finalmente, devolvendo os pratos que serão inseridos na minha

164
00:12:32,980 --> 00:12:34,380
loja Redux aqui.

165
00:12:34,380 --> 00:12:39,642
Portanto, este tipo de mudanças foram feitas nos ActionCreators.

166
00:12:39,642 --> 00:12:45,843
Agora, o processo de login e logout será tratado abaixo.

167
00:12:45,843 --> 00:12:51,445
Assim, para o login, a auth que importamos do firebase,

168
00:12:51,445 --> 00:12:56,372
o auth é aquele que me permite fazer o login e logout.

169
00:12:56,372 --> 00:12:59,363
Então, se você estiver fazendo login usando e-mail e senha,

170
00:12:59,363 --> 00:13:03,940
ele fornece com este método chamado SignInWithEmailAndPassword.

171
00:13:03,940 --> 00:13:10,250
E então você fornece o e-mail e senha como os dois parâmetros aqui.

172
00:13:10,250 --> 00:13:14,010
E então isso permitirá que você faça login.

173
00:13:14,010 --> 00:13:20,985
E quando você faz login, a autenticação fornece esse objeto chamado CurrentUser na autenticação.

174
00:13:20,985 --> 00:13:26,455
Então você obtém as informações do usuário dizendo Auth.CurrentUser aqui.

175
00:13:26,455 --> 00:13:31,235
E também estou armazenando as informações do usuário no meu banco de dados.

176
00:13:31,235 --> 00:13:33,879
Agora eu não estou rastreando explicitamente nenhum token e

177
00:13:33,879 --> 00:13:37,945
coisas assim porque isso é automaticamente rastreado por auth para mim,

178
00:13:37,945 --> 00:13:40,606
que é fornecido pelo módulo npm Firebase.

179
00:13:40,606 --> 00:13:43,723
Então eu estou apenas aproveitando isso para rastrear o uso atual.

180
00:13:43,723 --> 00:13:49,078
Se o usuário atual for nulo, então eu sei que meu cliente

181
00:13:49,078 --> 00:13:53,840
não tem nenhum usuário conectado ao servidor.

182
00:13:53,840 --> 00:13:59,510
E da mesma forma, para sair do usuário eu simplesmente digo Auth.Signout.

183
00:13:59,510 --> 00:14:04,370
Agora, novamente, a documentação de como fazer uso do

184
00:14:04,370 --> 00:14:09,060
módulo Filebase npm está disponível na documentação do Firebase.

185
00:14:09,060 --> 00:14:14,238
Assim, você pode facilmente procurar isso para entender como aproveitar o

186
00:14:14,238 --> 00:14:18,993
Firebase para fazer uso de todas essas diferentes funções

187
00:14:18,993 --> 00:14:23,443
que estão disponíveis no módulo Firebase npm.

188
00:14:23,443 --> 00:14:27,999
Além disso, para os favoritos, nós postamos um favorito e

189
00:14:27,999 --> 00:14:32,454
então você precisa postar itens, então você diria adicionar, e

190
00:14:32,454 --> 00:14:36,333
quando você precisa obter um item, você vai dizer obter.

191
00:14:36,333 --> 00:14:41,455
E você pode até mesmo obter um item de um documento específico nas coleções.

192
00:14:41,455 --> 00:14:45,245
Se você quiser um documento específico na coleção, você dirá .doc.

193
00:14:45,245 --> 00:14:49,015
E então você fornece o ID do documento aqui.

194
00:14:49,015 --> 00:14:51,585
Então é assim que você pode obter um documento específico.

195
00:14:53,465 --> 00:14:56,265
Também exclua favoritos e busque favoritos e assim por diante.

196
00:14:56,265 --> 00:15:01,640
Agora, para que os favoritos sejam armazenados no meu Firebase,

197
00:15:01,640 --> 00:15:09,100
os favoritos são armazenados como o ID do usuário e o ID do prato aqui.

198
00:15:09,100 --> 00:15:13,680
Agora firestore em si não tem nenhuma maneira de preencher as

199
00:15:13,680 --> 00:15:15,800
informações do prato no ID do prato.

200
00:15:15,800 --> 00:15:21,214
Então eu estou apenas buscando todas as informações do prato,

201
00:15:21,214 --> 00:15:27,694
então este é cada favorito é um par, usuário e par de identificação prato.

202
00:15:27,694 --> 00:15:30,431
Então eu só estou trazendo isso para os meus favoritos aqui.

203
00:15:30,431 --> 00:15:35,859
Mas isso também significa que eu preciso modificar meu componente favorito para que

204
00:15:35,859 --> 00:15:40,091
ele possa usar o ID do prato e, em seguida, indexar para os pratos que

205
00:15:40,091 --> 00:15:45,560
são armazenados na minha loja Redux, e obter a informação do prato.

206
00:15:45,560 --> 00:15:49,194
Ou a alternativa seria ir para o servidor e, em seguida, buscar as informações.

207
00:15:49,194 --> 00:15:53,560
Mas desde que eu já tenho os dados sobre os pratos na minha loja Redux,

208
00:15:53,560 --> 00:15:58,234
porque eu já fiz os pratos buscar todas as informações

209
00:15:58,234 --> 00:15:59,474
sobre os pratos.

210
00:15:59,474 --> 00:16:05,492
Eu estou apenas indo diretamente para o objeto pratos no meu Redux rasgou e

211
00:16:05,492 --> 00:16:08,190
buscar esta informação.

212
00:16:08,190 --> 00:16:12,250
Portanto, isso também significa que há modificações no componente principal.

213
00:16:12,250 --> 00:16:18,894
No componente principal, você notaria que quando eu faço o favorito aqui para

214
00:16:18,894 --> 00:16:25,343
o detalhe do prato, eu simplesmente teria que comparar o prato com aquele DishID.

215
00:16:25,343 --> 00:16:29,188
Então, o prato aqui no meu favorito é o próprio DishID, então

216
00:16:29,188 --> 00:16:31,540
eu só preciso fazer a comparação.

217
00:16:31,540 --> 00:16:35,334
Portanto, haverá uma pequena mudança para esta linha no DISHID.

218
00:16:35,334 --> 00:16:39,503
E também você notará que quando eu chamo os favoritos,

219
00:16:39,503 --> 00:16:42,786
além de fornecer seus favoritos,

220
00:16:42,786 --> 00:16:47,322
eu também forneço os pratos como um dos adereços para meus favoritos.

221
00:16:47,322 --> 00:16:51,711
Então essa é outra mudança que você notará no componente principal.

222
00:16:51,711 --> 00:16:54,990
E da mesma forma, no componente favorito,

223
00:16:54,990 --> 00:16:59,996
você notará que dentro do componente favorito abaixo aqui,

224
00:16:59,996 --> 00:17:04,933
você notará que, quando eu estiver renderizando o componente favorito.

225
00:17:04,933 --> 00:17:09,761
Então, aqui mesmo nesta função aqui, const favoritos,

226
00:17:09,761 --> 00:17:14,113
o que eu estou fazendo é que eu estou indo para os pratos favoritos,

227
00:17:14,113 --> 00:17:19,338
pratos é uma matriz de todos os DISHIDs aqui, então eu mapear através disso.

228
00:17:19,338 --> 00:17:23,591
Então olhe para cada DishID, em seguida, a partir dos pratos,

229
00:17:23,591 --> 00:17:27,545
eu filtrei esse prato particular.

230
00:17:27,545 --> 00:17:29,484
E então obteve o DisHID, então

231
00:17:29,484 --> 00:17:33,023
aqui você vai me ver usando o filtro de matriz JavaScript aqui.

232
00:17:33,023 --> 00:17:36,419
Ele irá filtrar essa informação específica do prato e

233
00:17:36,419 --> 00:17:38,687
, em seguida, renderizar esse prato particular.

234
00:17:38,687 --> 00:17:43,415
Então este é um trabalho adicional que eu preciso fazer no meu

235
00:17:43,415 --> 00:17:48,840
componente favorito, a fim de renderizar cada um dos pratos lá.

236
00:17:48,840 --> 00:17:55,900
Então, esse tipo de modificações menores que você notará em alguns dos componentes,

237
00:17:55,900 --> 00:17:59,840
especificamente o detalhe do prato, o favorito e o componente principal.

238
00:17:59,840 --> 00:18:05,410
É aí que algumas pequenas alterações foram feitas para facilitar o

239
00:18:05,410 --> 00:18:09,980
aplicativo React para poder aproveitar o Firebase Server.

240
00:18:09,980 --> 00:18:12,790
Então, esta é uma revisão rápida de como

241
00:18:12,790 --> 00:18:17,870
meu aplicativo React foi modificado para se comunicar com meu Firebase Server.

242
00:18:17,870 --> 00:18:23,257
Agora, como com Angular, tivemos o Angularfire também, o que

243
00:18:23,257 --> 00:18:29,680
nos proporcionava uma maneira de alavancar junto com o Firebase para nos comunicarmos com o servidor.

244
00:18:29,680 --> 00:18:35,659
React não tem nenhum equivalente, então eu estou usando diretamente o

245
00:18:35,659 --> 00:18:41,472
módulo Firebase npm que fornece a base básica de acesso ao Firebase Server.

246
00:18:41,472 --> 00:18:46,165
E, em seguida, aproveitando as funções que ele fornece para se comunicar com meu

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

248
00:18:47,382 --> 00:18:52,506
Passe algum tempo novamente passando por esse código para entender como

249
00:18:52,506 --> 00:18:57,534
aproveitei os módulos npm do Firebase para me comunicar

250
00:18:57,534 --> 00:19:03,090
com meu Firebase Server que configurei no exercício anterior.

251
00:19:03,090 --> 00:19:08,293
Com isso, eu lhe dei uma visão geral rápida de como você pode configurar seu

252
00:19:08,293 --> 00:19:13,957
aplicativo React para interagir com o Firebase back-end como um serviço e, em

253
00:19:13,957 --> 00:19:20,012
seguida, ser capaz de suportar várias operações que você tem dentro de seu aplicativo.

254
00:19:20,012 --> 00:19:24,632
Agora, com isso, concluo este exercício em particular em que

255
00:19:24,632 --> 00:19:28,758
ilustrei nesta lição sobre back-end como um serviço e

256
00:19:28,758 --> 00:19:33,645
também demonstrei o Firebase como um exemplo de um back-end como um serviço.

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