1
00:00:03,950 --> 00:00:06,525
No exercício anterior,

2
00:00:06,525 --> 00:00:09,990
já tínhamos configurado nosso backend Firebase como

3
00:00:09,990 --> 00:00:15,120
um serviço com o novo projeto e também configuramos muitos

4
00:00:15,120 --> 00:00:19,620
dados em nosso banco de dados e, em seguida, configuramos nosso armazenamento e

5
00:00:19,620 --> 00:00:25,120
configuramos nosso Firebase Server para atuar como o backend para nosso aplicativo Angular.

6
00:00:25,120 --> 00:00:29,160
Neste exercício, vamos olhar para uma versão modificada do

7
00:00:29,160 --> 00:00:33,480
nosso aplicativo Angular que faz uso do backend Firebase como

8
00:00:33,480 --> 00:00:37,500
um serviço para obter os dados e

9
00:00:37,500 --> 00:00:41,915
também armazenar informações para os usuários nos servidores.

10
00:00:41,915 --> 00:00:44,480
Além disso, aproveitaremos

11
00:00:44,480 --> 00:00:48,455
o suporte de autenticação fornecido pelo Firebase para autenticar usuários

12
00:00:48,455 --> 00:00:56,295
usando uma abordagem de e-mail e senha e também usando uma conta do Google.

13
00:00:56,295 --> 00:00:59,775
Para começar este exercício,

14
00:00:59,775 --> 00:01:02,750
vá para um local conveniente no seu computador e, em

15
00:01:02,750 --> 00:01:07,190
seguida, clone o repositório Git dado onde eu

16
00:01:07,190 --> 00:01:14,775
forneci a versão Angular Firebase da nossa aplicação Angular.

17
00:01:14,775 --> 00:01:17,490
Então digite, git clone

18
00:01:17,490 --> 00:01:27,470
https://github.com/jmuppala/confusion-Angular6-Firebase.git

19
00:01:27,470 --> 00:01:28,670
e, em seguida, clone

20
00:01:28,670 --> 00:01:34,835
o repositório Git e uma vez que o repositório Git é clonado para o seu computador,

21
00:01:34,835 --> 00:01:43,355
em seguida, mover para a

22
00:01:43,355 --> 00:01:47,570
pasta Firebase angular confusão que será criado neste ponto e

23
00:01:47,570 --> 00:01:52,110
, em seguida, você observe que um monte de arquivos já estão instalados lá.

24
00:01:52,110 --> 00:01:56,015
Vamos em frente e fazer uma instalação npm para instalar

25
00:01:56,015 --> 00:02:01,890
todos os módulos de nó em que esta aplicação Angular é dependente.

26
00:02:01,890 --> 00:02:04,520
Esta versão também irá instalar

27
00:02:04,520 --> 00:02:10,010
dois módulos de nó adicionais chamados Firebase e, em seguida, Angular fogo dois.

28
00:02:10,010 --> 00:02:15,525
Vou explicar um pouco mais sobre esses dois módulos de nós mais tarde neste exercício.

29
00:02:15,525 --> 00:02:18,915
Assim que a instalação do projeto estiver concluída,

30
00:02:18,915 --> 00:02:23,360
abra o projeto em um editor e, em seguida, no projeto,

31
00:02:23,360 --> 00:02:27,830
vá para a pasta de ambientes de origem e,

32
00:02:27,830 --> 00:02:32,420
em seguida, abra o arquivo environment.ts e no arquivo environment.ts,

33
00:02:32,420 --> 00:02:36,980
você verá um conjunto de configuração do Firebase que você

34
00:02:36,980 --> 00:02:42,130
precisa configurar com seu própria configuração do servidor Firebase.

35
00:02:42,130 --> 00:02:45,105
Como vimos no exercício anterior,

36
00:02:45,105 --> 00:02:48,950
podemos obter todas essas informações quando clicamos

37
00:02:48,950 --> 00:02:53,150
neste botão aqui chamado “Adicionar Firebase ao seu aplicativo web” e, em seguida,

38
00:02:53,150 --> 00:03:01,835
copiar essas informações e, em seguida, colar

39
00:03:01,835 --> 00:03:06,500
essas informações em seu arquivo ambiment.ts para substituí-los por seu Configuração

40
00:03:06,500 --> 00:03:10,940
de servidores Firebase para toda essa informação e uma vez concluída,

41
00:03:10,940 --> 00:03:17,390
então você pode iniciar seu aplicativo Angular digitando “ng serve” no prompt.

42
00:03:17,390 --> 00:03:21,735
Uma vez que seu aplicativo Angular é compilado com “ng serve”, em

43
00:03:21,735 --> 00:03:29,905
seguida, vá para um navegador e, em seguida, digite localhost :4200 para carregar em

44
00:03:29,905 --> 00:03:34,850
seu aplicativo Angular e você vai notar que seu aplicativo Angular é compilado

45
00:03:34,850 --> 00:03:40,215
e, em seguida, carregado em seu navegador como antes.

46
00:03:40,215 --> 00:03:43,190
Então, uma vez que seu aplicativo Angular está funcionando,

47
00:03:43,190 --> 00:03:47,585
você vai notar que esta versão do aplicativo Angular vai estar fazendo uso

48
00:03:47,585 --> 00:03:51,260
do servidor Firebase que você configurou

49
00:03:51,260 --> 00:03:55,625
no exercício anterior e então aqui você veria a página “Home”,

50
00:03:55,625 --> 00:04:00,030
a página “Sobre” como vemos aqui e a

51
00:04:00,030 --> 00:04:09,615
“ Menu” e a página “Contato” e, obviamente, como não estamos logados no momento,

52
00:04:09,615 --> 00:04:14,975
a página “Meus Favoritos” exibirá um erro informando que nenhum usuário está conectado.

53
00:04:14,975 --> 00:04:17,210
Então, vamos nos conectar.

54
00:04:17,210 --> 00:04:20,760
Deixe-me voltar para a “Homepage” e, em seguida, vamos entrar nós mesmos.

55
00:04:20,760 --> 00:04:22,475
Então, quando você clicar no botão de login,

56
00:04:22,475 --> 00:04:27,195
você verá o formulário típico aqui com o e-mail e as informações de senha.

57
00:04:27,195 --> 00:04:30,715
Você também verá um botão adicional aqui chamado “Login with Google”.

58
00:04:30,715 --> 00:04:33,600
Então deixe-me fazer login com minha conta do Google.

59
00:04:33,600 --> 00:04:35,750
Então, quando você clica em “Login with Google”,

60
00:04:35,750 --> 00:04:41,180
ele abrirá outra janela do navegador onde você será solicitado a

61
00:04:41,180 --> 00:04:47,420
autorizar o uso de sua conta do Google por este servidor Firebase.

62
00:04:47,420 --> 00:04:49,475
Então, deixe-me ir em frente e autorizar

63
00:04:49,475 --> 00:04:53,845
este aplicativo e, em seguida, uma vez que a autorização é concluída,

64
00:04:53,845 --> 00:04:57,145
então você verá que seu

65
00:04:57,145 --> 00:05:01,850
aplicativo Angular baseado no Firebase será iniciado e, no canto direito,

66
00:05:01,850 --> 00:05:06,200
você verá imediatamente seu nome sendo

67
00:05:06,200 --> 00:05:11,525
exibido aqui e com o “Login” agora transformado em um botão “Logout”.

68
00:05:11,525 --> 00:05:14,755
Então, neste momento,

69
00:05:14,755 --> 00:05:17,530
você deve ser capaz de ver seus favoritos

70
00:05:17,530 --> 00:05:20,310
e, neste caso, já que não temos nenhum favorito,

71
00:05:20,310 --> 00:05:22,155
então ele vai estar vazio neste momento.

72
00:05:22,155 --> 00:05:27,830
Deixe-me voltar ao “Menu” e, em seguida, adicionar alguns itens em “Meus Favoritos”.

73
00:05:27,830 --> 00:05:32,235
Então, vou adicionar este prato aos meus favoritos.

74
00:05:32,235 --> 00:05:34,045
Então, quando eu clicar neste prato,

75
00:05:34,045 --> 00:05:41,110
você verá imediatamente o ícone se transformar em um coração cheio e deixe-me também selecionar

76
00:05:41,110 --> 00:05:44,350
mais um prato e adicioná-lo em “Meus

77
00:05:44,350 --> 00:05:49,650
Favoritos” e então agora quando você vai para o “Meus Favoritos”,

78
00:05:49,650 --> 00:05:52,510
você verá o par de pratos adicionados em

79
00:05:52,510 --> 00:05:56,330
seus favoritos como você esperar e novamente,

80
00:05:56,330 --> 00:06:02,540
você pode excluir os pratos clicando na opção “Excluir” aqui e, em seguida, clique

81
00:06:02,540 --> 00:06:09,695
na cruz para remover o item de sua lista de favoritos, como mostrado aqui.

82
00:06:09,695 --> 00:06:13,570
Agora, também podemos adicionar como você percebeu,

83
00:06:13,570 --> 00:06:17,660
podemos ir a qualquer prato e, em seguida, adicionar comentários sobre esse prato.

84
00:06:17,660 --> 00:06:19,190
Então, deixe-me adicionar um comentário

85
00:06:19,190 --> 00:06:28,260
aqui e no momento em que você enviar o comentário,

86
00:06:28,260 --> 00:06:32,435
você verá imediatamente que seus comentários serão exibidos aqui com

87
00:06:32,435 --> 00:06:41,825
o nome do autor do comentário também incluído aqui e com a data como mostrado aqui.

88
00:06:41,825 --> 00:06:45,890
Então, você pode ver que o envio

89
00:06:45,890 --> 00:06:49,955
de comentários do usuário será suportado para qualquer prato específico.

90
00:06:49,955 --> 00:06:55,805
Deixe-me adicionar mais um favorito e assim este usuário terá alguns favoritos.

91
00:06:55,805 --> 00:06:58,180
Deixe-me “Fazer logout” deste usuário.

92
00:06:58,180 --> 00:07:02,930
Volte para a “Página inicial” e, em seguida, “Logout” deste usuário.

93
00:07:02,930 --> 00:07:07,715
Agora vamos fazer login usando a outra conta.

94
00:07:07,715 --> 00:07:13,490
Então, eu tinha- Eu tinha configurado

95
00:07:13,490 --> 00:07:17,840
esta conta de senha de e-mail mais cedo e então vamos

96
00:07:17,840 --> 00:07:22,865
fazer login como este outro usuário e uma vez que o outro usuário está logado,

97
00:07:22,865 --> 00:07:29,045
deixe-me novamente ir para o “Menu” e adicionar um par de itens nos

98
00:07:29,045 --> 00:07:36,904
favoritos para este usuário em particular

99
00:07:36,904 --> 00:07:40,700
e assim quando você voltar para “Meus Favoritos”,

100
00:07:40,700 --> 00:07:44,270
você verá esses itens listados para o segundo usuário.

101
00:07:44,270 --> 00:07:46,775
Agora, da mesma forma para este usuário,

102
00:07:46,775 --> 00:07:51,560
deixe-me novamente enviar outro comentário por este usuário.

103
00:07:51,560 --> 00:07:53,150
Então-

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

105
00:08:02,600 --> 00:08:07,445
veria que os comentários enviados pelo segundo usuário também é adicionado ao aplicativo.

106
00:08:07,445 --> 00:08:11,615
Então, é assim que seu aplicativo Angular funciona

107
00:08:11,615 --> 00:08:16,490
com o Firebase como o backend como um serviço.

108
00:08:16,490 --> 00:08:18,529
Agora é claro que você deve estar se perguntando,

109
00:08:18,529 --> 00:08:24,170
como nós redesenhamos nosso aplicativo Angular para fazer uso do Firebase em vez

110
00:08:24,170 --> 00:08:31,610
de usar o servidor Standard Express plus MongoDB que nós construímos anteriormente?

111
00:08:31,610 --> 00:08:38,440
Para configurar seu aplicativo Angular para se comunicar com o Firebase Server,

112
00:08:38,440 --> 00:08:42,620
há dois módulos de nós que você precisa instalar em

113
00:08:42,620 --> 00:08:46,860
seu aplicativo Angular e um deles é o módulo Firebase.

114
00:08:46,860 --> 00:08:49,730
O módulo Firebase como você vê aqui,

115
00:08:49,730 --> 00:08:55,190
fornece as ferramentas e infra-estrutura que permite que você se comunique

116
00:08:55,190 --> 00:09:01,610
com o servidor Firebase e para instalar isso em seu aplicativo

117
00:09:01,610 --> 00:09:05,720
, você digita, npm install menos salvar Firebase.

118
00:09:05,720 --> 00:09:07,610
Agora, junto com isso,

119
00:09:07,610 --> 00:09:11,395
há outro módulo chamado Angular Fire 2.

120
00:09:11,395 --> 00:09:13,725
Então, o Fogo Angular 2.

121
00:09:13,725 --> 00:09:20,535
Além disso, mais uma vez eu forneci os links para estes dois módulos nos recursos adicionais.

122
00:09:20,535 --> 00:09:23,795
O AngularFire 2 é a biblioteca oficial

123
00:09:23,795 --> 00:09:27,290
para suporte Firebase e Angular e, como você pode ver,

124
00:09:27,290 --> 00:09:31,520
é um suporte observável baseado para arquivos Angulares.

125
00:09:31,520 --> 00:09:36,545
Então, isso funciona para adicionar ao módulo Firebase npm e, em seguida,

126
00:09:36,545 --> 00:09:42,125
dá-lhe interface baseada observável que podemos usar em seu aplicativo Angular.

127
00:09:42,125 --> 00:09:44,930
Então, estaríamos alavancando o AngularFire 2.

128
00:09:44,930 --> 00:09:46,994
Então, para fazer uso do AngularFire2,

129
00:09:46,994 --> 00:09:49,940
você precisa instalar tanto Firebase quanto AngularFire 2.

130
00:09:49,940 --> 00:09:51,345
Então, em um tiro,

131
00:09:51,345 --> 00:09:54,205
instale ambos em sua aplicação Angular.

132
00:09:54,205 --> 00:09:59,320
Agora, a versão do aplicativo Angular que eu forneci para você

133
00:09:59,320 --> 00:10:06,250
instala automaticamente ambos como você verá quando você examinar o arquivo package.json.

134
00:10:06,250 --> 00:10:08,510
Agora, como fazer uso desses dois,

135
00:10:08,510 --> 00:10:12,245
vou ilustrar que, executando rapidamente você através

136
00:10:12,245 --> 00:10:17,280
do código modificado para os serviços e um par de componentes onde

137
00:10:17,280 --> 00:10:19,955
fazemos uso do Firebase e AngularFire2

138
00:10:19,955 --> 00:10:23,135
para modificar o aplicativo Angular que desenvolvemos

139
00:10:23,135 --> 00:10:30,140
anteriormente para fazer uso do Firebase Server como o backend como um serviço.

140
00:10:30,140 --> 00:10:34,075
Para entender mais sobre como

141
00:10:34,075 --> 00:10:39,185
aproveitamos o Firebase e o AngularFire 2 em nosso aplicativo Angular,

142
00:10:39,185 --> 00:10:42,860
nossa primeira parada é no arquivo package.json.

143
00:10:42,860 --> 00:10:45,025
Então, no arquivo package.json,

144
00:10:45,025 --> 00:10:50,850
você notará que instalei AngularFire2 aqui e também instalamos o

145
00:10:50,850 --> 00:10:57,510
Firebase para usar nesta versão do aplicativo Angular que eu forneço para você.

146
00:10:57,510 --> 00:11:01,980
Então, note que estes dois serão instalados automaticamente quando você digitar “npm

147
00:11:01,980 --> 00:11:07,720
install” após clonar este repositório git que eu forneci para você.

148
00:11:07,720 --> 00:11:11,220
Se você estava começando com um novo aplicativo Angular,

149
00:11:11,220 --> 00:11:15,590
então você deve estar instalando tanto AngularFire 2 quanto Firebase,

150
00:11:15,590 --> 00:11:20,184
a fim de aproveitar o uso do Firebase como o backend como um serviço.

151
00:11:20,184 --> 00:11:22,365
Agora, tendo instalado esses dois,

152
00:11:22,365 --> 00:11:27,360
vamos aprender como fazer uso deles dentro de nossos serviços.

153
00:11:27,360 --> 00:11:30,030
Então, a melhor maneira de aprender a fazer uso de

154
00:11:30,030 --> 00:11:33,640
ambos é visitar alguns dos serviços que

155
00:11:33,640 --> 00:11:36,930
configuramos em nosso aplicativo e entender como

156
00:11:36,930 --> 00:11:42,130
aproveitamos o uso do AngularFire2 e do Firebase.

157
00:11:42,130 --> 00:11:46,235
Então, vamos começar com o arquivo dish.service.ts.

158
00:11:46,235 --> 00:11:48,830
Então, se você for para o arquivo dish.service.ts,

159
00:11:48,830 --> 00:11:51,095
você vai notar que aqui,

160
00:11:51,095 --> 00:11:55,235
neste serviço de prato,

161
00:11:55,235 --> 00:12:01,190
você vai me ver importando este AngularFiRestore, AngularFireDocument

162
00:12:01,190 --> 00:12:08,115
e AngularFireCollection de AngularFire para Firestore aqui.

163
00:12:08,115 --> 00:12:16,680
Então, que traz em tudo o que eu preciso do meu módulo AngularFiRestore npm,

164
00:12:16,680 --> 00:12:21,010
também você vai notar que eu estou importando tudo de

165
00:12:21,010 --> 00:12:27,615
Firebase/aplicativo como Firebase para o meu serviço prato aqui.

166
00:12:27,615 --> 00:12:29,945
Então, uma vez que tenhamos importado esses dois,

167
00:12:29,945 --> 00:12:35,415
vamos dar uma olhada rápida em como reconfiguramos nosso serviço de pratos aqui.

168
00:12:35,415 --> 00:12:37,435
Então, se você entrar no serviço de prato,

169
00:12:37,435 --> 00:12:41,175
você vai notar que eu não estou mais usando cliente HTTP.

170
00:12:41,175 --> 00:12:48,975
Em vez disso, estou injetando AFS que é o AngularFiRestore no construtor aqui.

171
00:12:48,975 --> 00:12:51,520
O AngularFiRestore é aquele que me dá

172
00:12:51,520 --> 00:12:55,815
acesso ao backend do Firebase como um serviço.

173
00:12:55,815 --> 00:13:01,785
Agora, lembre-se também que já configuramos todos os detalhes do

174
00:13:01,785 --> 00:13:09,450
nosso servidor e também o projeto filestore no arquivo environment.ts anteriormente.

175
00:13:09,450 --> 00:13:12,595
Então, você deve ter configurado essas informações já lá

176
00:13:12,595 --> 00:13:16,180
sobre como seu aplicativo Angular deve estar aproveitando

177
00:13:16,180 --> 00:13:20,930
seu projeto baseado em Firestore no

178
00:13:20,930 --> 00:13:27,710
seu servidor Firestore para acessar os dados que você configurou lá.

179
00:13:27,710 --> 00:13:32,290
Então, isso me dará acesso à minha nuvem

180
00:13:32,290 --> 00:13:39,400
Firestore dentro do meu projeto Firebase que configurei.

181
00:13:39,400 --> 00:13:43,410
Agora, o AuthService é, naturalmente, o mesmo Authservice que já usamos antes,

182
00:13:43,410 --> 00:13:51,175
mas foi modificado para fazer uso do suporte Angular para Firebase.

183
00:13:51,175 --> 00:13:55,095
Visitaremos o AuthService para saber como ele foi atualizado.

184
00:13:55,095 --> 00:14:00,410
Agora, o AuthService nos dará acesso a

185
00:14:00,410 --> 00:14:06,345
este método chamado getAuthState que retornará em um observável.

186
00:14:06,345 --> 00:14:08,965
Este observável, quando subscrevemos,

187
00:14:08,965 --> 00:14:15,855
nos dará a informação como um usuário que contém a informação do usuário.

188
00:14:15,855 --> 00:14:21,465
Então, eu vou obter isso e, em seguida, configurar o CurrentUser no meu aplicativo

189
00:14:21,465 --> 00:14:28,995
como o usuário retornado por este observável aqui.

190
00:14:28,995 --> 00:14:30,699
Então, quando visitamos AuthService,

191
00:14:30,699 --> 00:14:33,085
aprenderemos o que esse GetAuthState retornará para

192
00:14:33,085 --> 00:14:35,700
nós e assim as informações do

193
00:14:35,700 --> 00:14:36,940
CurrentUser podem ser obtidas de qualquer um

194
00:14:36,940 --> 00:14:41,165
dos outros serviços porque já estamos injetando AuthService aqui.

195
00:14:41,165 --> 00:14:45,570
Agora, vamos dar uma olhada em como GetDails método é implementado aqui.

196
00:14:45,570 --> 00:14:47,710
Agora, anteriormente no método GetDishines,

197
00:14:47,710 --> 00:14:55,920
estávamos usando o cliente HTTP para acessar o servidor na base URL+/Dishes.

198
00:14:55,920 --> 00:14:57,425
Agora, neste caso,

199
00:14:57,425 --> 00:15:07,255
para acessar uma coleção no meu servidor Firebase, diremos isso.afs.

200
00:15:07,255 --> 00:15:10,710
Então, isso é o que AngularFire2 fornece para nós.

201
00:15:10,710 --> 00:15:16,345
AFS como você vê é o AngularFiRestore que temos injetado aqui e por isso dizemos

202
00:15:16,345 --> 00:15:19,810
this.afs.collection e aqui

203
00:15:19,810 --> 00:15:23,010
vamos especificar a coleção específica que estamos acessando aqui.

204
00:15:23,010 --> 00:15:26,315
Lembre-se que tínhamos preparado os pratos, as promoções

205
00:15:26,315 --> 00:15:30,415
e as coleções de líderes no meu servidor Firebase.

206
00:15:30,415 --> 00:15:34,065
Então, isso diretamente me dá acesso

207
00:15:34,065 --> 00:15:38,595
à minha coleção de pratos aqui e da coleção de pratos,

208
00:15:38,595 --> 00:15:42,740
eu posso fazer.ValueChanges que

209
00:15:42,740 --> 00:15:47,115
irá retornar todas as informações na coleção de negócios para mim,

210
00:15:47,115 --> 00:15:50,440
ou eu posso fazer.Snapshotchanges que irá

211
00:15:50,440 --> 00:15:53,990
retornar informações adicionais, incluindo o ID dos pratos.

212
00:15:53,990 --> 00:15:56,660
Então, se em vez de fazer SnapshotChanges,

213
00:15:56,660 --> 00:15:59,310
se eu disser valueChanges,

214
00:15:59,310 --> 00:16:03,110
ele retornará apenas as informações do prato, mas não retornará

215
00:16:03,110 --> 00:16:07,890
os IDs dos pratos, mas desde

216
00:16:07,890 --> 00:16:13,335
que eu vou precisar dos IDs dos meus pratos, então é por isso que eu estou usando o.Snapshotchanges neste caso.

217
00:16:13,335 --> 00:16:16,090
Então, When.SnapshotChanges é chamado,

218
00:16:16,090 --> 00:16:19,505
isso irá retornar como você vê um observável que

219
00:16:19,505 --> 00:16:27,195
eu mapear e assim o valor de retorno que é chamado como ações e essas ações

220
00:16:27,195 --> 00:16:31,800
, novamente, será um observável que eu vou mapear cada ação

221
00:16:31,800 --> 00:16:38,930
nessas ações e, em seguida, extrair os dados da ação que é Retornou aqui.

222
00:16:38,930 --> 00:16:44,525
Portanto, a ação é um valor que é retornado de para cada uma das ações

223
00:16:44,525 --> 00:16:50,765
e esta ação contém uma carga útil e contém dentro que um campo escuro aqui.

224
00:16:50,765 --> 00:16:53,200
Agora, isso é algo que eu descobri lendo

225
00:16:53,200 --> 00:16:57,010
a documentação para AngularFire2 e

226
00:16:57,010 --> 00:17:03,705
então quando chamamos essa função de dados nesta action.payload.doc,

227
00:17:03,705 --> 00:17:05,875
isso vai me dar os dados.

228
00:17:05,875 --> 00:17:09,510
Os dados para esse prato específico que é

229
00:17:09,510 --> 00:17:14,160
obtido a partir da minha coleção de pratos no lado do servidor.

230
00:17:14,160 --> 00:17:18,760
Então cada documento lá será devolvido aqui e

231
00:17:18,760 --> 00:17:24,205
então eu obter o ID para isso dizendo action.payload.doc.id.

232
00:17:24,205 --> 00:17:27,855
Então é aí que o ID do que será

233
00:17:27,855 --> 00:17:32,030
carregado e então eu vou juntar os dois juntos e retornar

234
00:17:32,030 --> 00:17:40,035
isso como um documento prato de volta para os meus vários componentes de lá,

235
00:17:40,035 --> 00:17:42,150
eu vou chamar este método getDishes.

236
00:17:42,150 --> 00:17:43,345
Então, como você se lembra,

237
00:17:43,345 --> 00:17:44,690
a partir do componente de menu,

238
00:17:44,690 --> 00:17:47,400
estou chamando o método GetDishages para obter

239
00:17:47,400 --> 00:17:51,090
as informações sobre todos os pratos da minha coleção.

240
00:17:51,090 --> 00:17:58,505
Colecção. Então, cada um desses prato que é retornado como um doc será reconstruído em

241
00:17:58,505 --> 00:18:03,420
um objeto JavaScript com o ID inserido aqui e também

242
00:18:03,420 --> 00:18:09,540
os dados que são extraídos deste payload.doc.data ação.

243
00:18:09,540 --> 00:18:16,455
Agora isso é algo que você aprende lendo a documentação do AngularFire2.

244
00:18:16,455 --> 00:18:19,470
Agora, já que eu já fiz essa parte,

245
00:18:19,470 --> 00:18:22,755
eu estou mostrando o código exato que você deve

246
00:18:22,755 --> 00:18:26,160
usar para extrair os dados e, em seguida, fornecer

247
00:18:26,160 --> 00:18:33,500
esses dados de volta para o seu componente que vai chamar o método getDails aqui.

248
00:18:33,500 --> 00:18:37,090
Então, fazendo isso para cada um dos documentos lá,

249
00:18:37,090 --> 00:18:39,180
este documento será reconstruído para

250
00:18:39,180 --> 00:18:44,800
o objeto prato que

251
00:18:44,800 --> 00:18:51,500
usamos em nossa aplicação Angular e assim podemos até ter acesso ao ID.

252
00:18:51,500 --> 00:18:53,365
Se você apenas fizer alterações de valor,

253
00:18:53,365 --> 00:18:59,825
ele simplesmente retornará todos os documentos em si, mas sem os IDs dos documentos.

254
00:18:59,825 --> 00:19:04,920
Então, este trabalho adicional precisa ser feito dentro do seu serviço, a fim de

255
00:19:04,920 --> 00:19:07,835
retornar as informações da maneira certa para

256
00:19:07,835 --> 00:19:10,865
que MyComponents possa fazer uso dessas informações.

257
00:19:10,865 --> 00:19:13,370
Da mesma forma, para um método getDish,

258
00:19:13,370 --> 00:19:17,695
então observe como estou acessando as informações de um prato específico.

259
00:19:17,695 --> 00:19:22,020
Novamente, vamos dizer isso.afs e então você vai notar que eu sou

260
00:19:22,020 --> 00:19:26,660
saying.doc e, em seguida, aqui para o método the.doc,

261
00:19:26,660 --> 00:19:32,650
Eu forneço pratos barra e, em seguida, o ID do prato específico.

262
00:19:32,650 --> 00:19:35,150
Agora, a razão pela qual eu tinha fornecido ID,

263
00:19:35,150 --> 00:19:39,350
o ID aqui está vindo como o parâmetro para o método getDish aqui.

264
00:19:39,350 --> 00:19:41,985
Agora, para que este ID seja fornecido,

265
00:19:41,985 --> 00:19:44,450
eu preciso ser capaz de fornecer esse ID

266
00:19:44,450 --> 00:19:47,480
no método GetDishages para que quando meu menu é construído,

267
00:19:47,480 --> 00:19:51,205
cada prato terá seu ID anexado a ele lá.

268
00:19:51,205 --> 00:19:56,575
Esse ID é passado aqui e eu vou estar acessando o documento neste momento.

269
00:19:56,575 --> 00:20:01,260
Então, o AngularFire2 permite que você acesse

270
00:20:01,260 --> 00:20:07,125
um documento específico que está dentro de uma coleção dizendo o nome da coleção barra,

271
00:20:07,125 --> 00:20:15,430
mais o ID do documento ou você pode dizer this.afs.collection pratos exatamente como você ouviu,

272
00:20:15,430 --> 00:20:22,540
pratos de coleta e then.doc e, em seguida, fornecer doc e ID dentro colchetes Lá.

273
00:20:22,540 --> 00:20:26,725
Então, essa é outra maneira de abordar um prato específico.

274
00:20:26,725 --> 00:20:32,680
Novamente, estou assinando SnapShotChanges e isso retornará uma ação que é

275
00:20:32,680 --> 00:20:35,480
mapeada novamente no mesmo formato para

276
00:20:35,480 --> 00:20:39,495
construir o objeto prato aqui junto com o ID aqui.

277
00:20:39,495 --> 00:20:42,410
Agora, Firebase mantém o ID separado do

278
00:20:42,410 --> 00:20:46,300
próprio documento e é por isso que eu tenho que fazer explicitamente

279
00:20:46,300 --> 00:20:49,010
esta reconstrução a fim de obter

280
00:20:49,010 --> 00:20:54,750
o documento dish de uma forma que é utilizável por MyComponents.

281
00:20:54,750 --> 00:20:59,660
Então eu construí meu próprio servidor usando Express e MongoDB,

282
00:20:59,660 --> 00:21:03,995
o ID automaticamente estava lá no próprio documento e por isso foi muito

283
00:21:03,995 --> 00:21:09,235
fácil recuperar isso e fornecê-lo de volta para o lado do cliente.

284
00:21:09,235 --> 00:21:13,610
Agora, para o GetFeaturedDish,

285
00:21:13,610 --> 00:21:15,620
lembre-se que para o GetFeaturedDish,

286
00:21:15,620 --> 00:21:20,870
estamos procurando aqueles pratos onde o recurso é definido como verdadeiro.

287
00:21:20,870 --> 00:21:25,790
Agora, este é o lugar onde o AngularFire2 nos permite

288
00:21:25,790 --> 00:21:31,180
construir uma consulta e fornecer essa consulta aqui para essa coleção.

289
00:21:31,180 --> 00:21:36,440
Aqui eu estou dizendo este.afs coleção pratos aqui,

290
00:21:36,440 --> 00:21:39,520
então eu ainda estou usando a coleção, mas então olhar para

291
00:21:39,520 --> 00:21:43,140
o segundo parâmetro para esta chamada aqui.

292
00:21:43,140 --> 00:21:49,405
Aqui diz ref onde o ref se refere a cada documento que está nesta coleção.

293
00:21:49,405 --> 00:21:53,330
Este ref diz o ref e este é o lugar onde eu posso

294
00:21:53,330 --> 00:21:58,100
usar esta consulta configurar ouves assim que diz.where.

295
00:21:58,100 --> 00:22:04,695
Então, o que significa que cada um dos documentos onde o destaque,

296
00:22:04,695 --> 00:22:10,445
como você pode ver, a sintaxe é bastante fácil de seguir aqui que diz onde destaque.

297
00:22:10,445 --> 00:22:15,240
Agora, observe que o recurso é fornecido como uma string aqui,

298
00:22:15,240 --> 00:22:17,175
e então o próximo,

299
00:22:17,175 --> 00:22:22,230
o operador é igual a, então você pode até dizer maior que, menor

300
00:22:22,230 --> 00:22:25,345
que, maior ou igual a menor ou igual a qualquer uma dessas coisas,

301
00:22:25,345 --> 00:22:30,375
mas observe que isso deve estar dentro das aspas aqui e então você vai dizer que é verdade.

302
00:22:30,375 --> 00:22:35,105
Assim, onde quer que a propriedade featured do documento esteja definida como true,

303
00:22:35,105 --> 00:22:36,620
extraia todos eles.

304
00:22:36,620 --> 00:22:40,545
Então, esta consulta irá extrair apenas os documentos

305
00:22:40,545 --> 00:22:45,250
da coleção de pratos onde o recurso é definido como true,

306
00:22:45,250 --> 00:22:50,195
e em seguida, retornar apenas os documentos dessa coleção aqui,

307
00:22:50,195 --> 00:22:53,770
e de lá eu estou indo mudanças instantâneas e isso irá

308
00:22:53,770 --> 00:22:59,350
retornar uma matriz de documentos e de lá eu vou mapeá-los

309
00:22:59,350 --> 00:23:04,270
em documentos prato individuais e, em seguida, desde

310
00:23:04,270 --> 00:23:09,700
que eu assegurei que apenas um desses documentos terá o recurso definido como verdadeiro.

311
00:23:09,700 --> 00:23:13,030
Então, ele vai retornar apenas um deles, mas ele vai retorná-lo como um array.

312
00:23:13,030 --> 00:23:14,980
Então, é por isso que eu estou construindo isso

313
00:23:14,980 --> 00:23:20,195
com colchetes zero o primeiro elemento da matriz,

314
00:23:20,195 --> 00:23:25,210
e de fato ele irá conter apenas um elemento porque apenas um elemento na minha coleção

315
00:23:25,210 --> 00:23:30,745
irá corresponder a esta consulta particular que eu tenho configurado aqui com a onda aqui.

316
00:23:30,745 --> 00:23:36,470
Existem outras configurações de consulta aqui você também pode usar algo chamado ordem por.

317
00:23:36,470 --> 00:23:41,000
Então, você pode ordenar a coleção por uma determinada propriedade,

318
00:23:41,000 --> 00:23:47,310
e algum outro conjunto de opções de consulta que estão disponíveis.

319
00:23:47,310 --> 00:23:51,480
Agora, isso é suportado pelo Firebase em sua nuvem Firestore,

320
00:23:51,480 --> 00:23:56,890
e é isso que podemos aproveitar usando AngularFire2 para projetar

321
00:23:56,890 --> 00:24:03,850
o código em seu aplicativo Angular para fazer a consulta do lado do cliente em si.

322
00:24:03,850 --> 00:24:09,280
Então, isso vai retornar o prato de recurso específico.

323
00:24:09,360 --> 00:24:15,355
Agora, novamente GetDishid vai ser semelhante ao que fizemos anteriormente.

324
00:24:15,355 --> 00:24:16,890
Então, nenhuma modificação lá.

325
00:24:16,890 --> 00:24:21,370
Agora, para o PostComment novamente

326
00:24:21,370 --> 00:24:27,820
porque Firebase com a nuvem Firestore beta,

327
00:24:27,820 --> 00:24:31,720
não tem o conceito de população,

328
00:24:31,720 --> 00:24:34,015
e assim por diante que vimos anteriormente.

329
00:24:34,015 --> 00:24:39,890
Então, o que eu vou fazer para os comentários é que eu vou postar esses comentários como

330
00:24:39,890 --> 00:24:46,140
uma coleção para o qual é fechado dentro de cada prato em si.

331
00:24:46,140 --> 00:24:52,040
Então, cada prato terá sua própria coleção de comentários sobre esse prato específico.

332
00:24:52,040 --> 00:24:54,965
Quando eu postar o comentário eu vou usar o DishID,

333
00:24:54,965 --> 00:24:57,905
e depois as informações do comentário.

334
00:24:57,905 --> 00:25:01,735
Então, o que eu faço aqui é que eu vou primeiro

335
00:25:01,735 --> 00:25:07,175
consultar os pratos e, em seguida, obter esse prato particular.

336
00:25:07,175 --> 00:25:11,555
Então, você pode ver que eu estou usando a outra maneira de consultar um documento específico.

337
00:25:11,555 --> 00:25:16,070
Então, aqui estou dizendo este afs.collection ('pratos') .doc DisHid.

338
00:25:16,440 --> 00:25:22,660
Então, eu posso usar essa maneira de acessar um documento específico, se eu quiser.

339
00:25:22,660 --> 00:25:25,610
A outra maneira é claro que você já viu com

340
00:25:25,610 --> 00:25:33,375
o método GetDish onde eu digo pratos doc barra mais ID.

341
00:25:33,375 --> 00:25:38,185
Então, duas maneiras diferentes de abordar um documento específico dentro de

342
00:25:38,185 --> 00:25:44,460
uma coleção aqui e, em seguida, DishID e, em seguida, coleção e comentários.

343
00:25:44,460 --> 00:25:46,840
Então, desta forma ele está dizendo

344
00:25:46,840 --> 00:25:51,100
nesta coleção para este documento específico com aquele DishID,

345
00:25:51,100 --> 00:25:54,140
há uma coleção que está incluída

346
00:25:54,140 --> 00:25:57,180
neste documento e que a coleção tem o nome comentários.

347
00:25:57,180 --> 00:25:59,660
Então, este é um aninhamento de uma coleção

348
00:25:59,660 --> 00:26:03,125
dentro de um documento que está em outra conexão de nível superior.

349
00:26:03,125 --> 00:26:07,110
Então, esse tipo de aninhamento de coleções é permitido pelo

350
00:26:07,110 --> 00:26:13,590
Firebase Cloud Store Beta com até 100 níveis de profundidade, se você quiser escolher.

351
00:26:13,590 --> 00:26:15,700
Então, dentro desta coleção,

352
00:26:15,700 --> 00:26:17,420
vou acrescentar.

353
00:26:17,420 --> 00:26:20,310
Então, como você adiciona um documento a uma coleção?

354
00:26:20,310 --> 00:26:22,105
Para adicionar um documento à sua coleção,

355
00:26:22,105 --> 00:26:24,755
use o método add em uma coleção aqui.

356
00:26:24,755 --> 00:26:27,600
Então, você pode ver que nos comentários da coleção,

357
00:26:27,600 --> 00:26:30,380
eu estou fazendo um add aqui e,

358
00:26:30,380 --> 00:26:33,655
em seguida, este é o documento real que vai ser adicionado aqui.

359
00:26:33,655 --> 00:26:35,280
Então, no próprio documento,

360
00:26:35,280 --> 00:26:40,645
você verá que eu tenho a propriedade autor aqui onde eu configurei o ID atual,

361
00:26:40,645 --> 00:26:44,665
e também eu configurei o primeiro nome para o autor aqui,

362
00:26:44,665 --> 00:26:50,885
Eu só sirvo a primeira vez aqui então aqui eu digo este nome de exibição do usuário atual.

363
00:26:50,885 --> 00:26:55,625
Se o nome de exibição for verdadeiro, então eu vou configurá-lo para este nome de exibição do usuário atual.

364
00:26:55,625 --> 00:27:00,960
Se a conta do usuário não tem um nome de exibição como anexado a ele, então eu vou simplesmente

365
00:27:00,960 --> 00:27:06,420
usar este e-mail de usuário atual como a propriedade do primeiro nome aqui.

366
00:27:06,420 --> 00:27:11,035
Então, este documento que contém o comentário,

367
00:27:11,035 --> 00:27:13,150
automaticamente também carrega este primeiro campo de nome

368
00:27:13,150 --> 00:27:16,140
e é isso que eu vou estar usando para renderizar

369
00:27:16,140 --> 00:27:22,495
as informações quando eu renderizar os comentários no meu componente DishDetail.

370
00:27:22,495 --> 00:27:28,710
Então, note que eu estou realmente duplicando informações aqui em cada um dos comentários.

371
00:27:28,710 --> 00:27:31,865
Mas tudo bem, uma vez que estes são armazenados como

372
00:27:31,865 --> 00:27:34,160
documentos Json no Firebase, não há problema em

373
00:27:34,160 --> 00:27:36,990
duplicar algumas das informações nos comentários aqui.

374
00:27:36,990 --> 00:27:40,245
Mas se você quiser mais detalhes do usuário atual,

375
00:27:40,245 --> 00:27:45,280
você já tem uma referência ao id do usuário aqui para que você possa realmente ir buscar

376
00:27:45,280 --> 00:27:48,150
o documento para o usuário em particular e, em seguida,

377
00:27:48,150 --> 00:27:51,485
obter mais informações sobre o usuário que você escolher.

378
00:27:51,485 --> 00:27:54,830
Agora, quando eu usei Mongo DB mais Mongo de,

379
00:27:54,830 --> 00:27:57,950
você viu que eu vou apenas usar o ID do usuário atual para

380
00:27:57,950 --> 00:28:01,650
o autor e, em seguida, eu vou usar o populate para preencher essas informações.

381
00:28:01,650 --> 00:28:05,150
Agora, o Cloud Firestore beta neste momento não tem

382
00:28:05,150 --> 00:28:10,240
nenhum conceito deste preenchimento tanto quanto eu posso ver na documentação,

383
00:28:10,240 --> 00:28:14,335
talvez uma versão futura possa suportar uma maneira de

384
00:28:14,335 --> 00:28:16,800
extrair informações de outro documento e

385
00:28:16,800 --> 00:28:19,270
preenchê-las automaticamente no documento atual.

386
00:28:19,270 --> 00:28:24,500
Quando isso acontece, então este código terá que ser modificado para tirar proveito disso.

387
00:28:24,500 --> 00:28:26,725
Mas no momento em que vejo, o

388
00:28:26,725 --> 00:28:29,560
Firestore beta não tem a capacidade de

389
00:28:29,560 --> 00:28:33,000
preencher informações de outro documento para o documento atual.

390
00:28:33,000 --> 00:28:36,040
Então é por isso que eu estou apenas replicando apenas aquele pedaço de

391
00:28:36,040 --> 00:28:39,860
informação que eu realmente preciso quando eu renderizar o comentário no

392
00:28:39,860 --> 00:28:43,660
meu componente dishdetail aqui e, em seguida, abaixo

393
00:28:43,660 --> 00:28:47,945
aqui você pode ver que eu tenho a classificação eo comentário aqui e, em seguida, também,

394
00:28:47,945 --> 00:28:49,740
notar que eu estou criando

395
00:28:49,740 --> 00:28:57,370
esses dois campos adicionais no meu comentário aqui chamados “CreateDAT” e “UpdateDAT”.

396
00:28:57,370 --> 00:29:01,785
Observe como estou colocando o carimbo de data/hora para o “CreateDAT”.

397
00:29:01,785 --> 00:29:05,785
O Firebase, agora o que é este Firebase que estou usando aqui,

398
00:29:05,785 --> 00:29:12,050
este Firebase é exatamente o que eu importei aqui como do Firebase app.

399
00:29:12,050 --> 00:29:15,850
Então isso me fornece como você vê aqui abaixo,

400
00:29:15,850 --> 00:29:20,395
que me fornece este mesmo valor de campo Firestore.

401
00:29:20,395 --> 00:29:25,260
Então esta chamada para o campo firestorm valores timestamp servidor,

402
00:29:25,260 --> 00:29:28,390
irá retornar o timestamp atual para

403
00:29:28,390 --> 00:29:32,605
mim e essa é a informação que eu vou estar armazenando no “CreateDAT”.

404
00:29:32,605 --> 00:29:35,255
Agora, quando inseri todos os documentos aqui,

405
00:29:35,255 --> 00:29:40,435
você viu que eu criei manualmente este campo “CreateDat” para cada um dos documentos.

406
00:29:40,435 --> 00:29:44,110
Agora esta é uma maneira de fazer o mesmo dentro do

407
00:29:44,110 --> 00:29:47,895
nosso código Angular no

408
00:29:47,895 --> 00:29:53,040
lado do cliente e a mesma coisa para o campo “UpdateDAT” que você verá aqui.

409
00:29:53,040 --> 00:29:55,270
Então, quando você postar um novo comentário,

410
00:29:55,270 --> 00:30:00,330
você vê que é assim que você vai adicionar um novo comentário nesse servidor.

411
00:30:00,330 --> 00:30:03,630
Agora, isso retorna uma promessa e então essa é a informação

412
00:30:03,630 --> 00:30:07,410
que estou usando aqui para construir esta promessa aqui.

413
00:30:07,410 --> 00:30:10,930
Então este outro método aqui dizendo “GetComments”,

414
00:30:10,930 --> 00:30:16,930
este “GetComments como você pode ver ele está acessando pratos de coleção AFS,

415
00:30:16,930 --> 00:30:22,420
doc DISHID e, em seguida, comentários de coleção e o aviso de que aqui,

416
00:30:22,420 --> 00:30:26,580
Eu não vou ser exigindo cada ID comentários

417
00:30:26,580 --> 00:30:31,220
que eu não vou estar usando no meu Angular petição de qualquer maneira,

418
00:30:31,220 --> 00:30:33,230
então em vez de usar mudanças instantâneas,

419
00:30:33,230 --> 00:30:36,285
eu estou apenas usando mudanças de valor e isso irá retornar

420
00:30:36,285 --> 00:30:42,170
todos os documentos nesta coleção de comentários para este documento particular

421
00:30:42,170 --> 00:30:47,455
o DisHID da coleção de pratos aqui e que serão devolvidos

422
00:30:47,455 --> 00:30:53,320
e esses comentários que eu estarei renderizando em o meu componente de detalhe.

423
00:30:53,320 --> 00:30:58,210
Agora, em Mongos, você viu que o fato de eu ter incluído o UserID significa

424
00:30:58,210 --> 00:31:02,920
que eu poderia fazer copulação desta informação agora com Firebase, não

425
00:31:02,920 --> 00:31:05,740
há nenhuma maneira de preencher a informação comum aqui,

426
00:31:05,740 --> 00:31:10,870
então é por isso que eu estou explicitamente indo e, em seguida, preenchendo os comentários no

427
00:31:11,210 --> 00:31:15,250
meu dishdetail componente para buscar todos os comentários sobre

428
00:31:15,250 --> 00:31:20,000
este prato particular quando eu renderizá-los no componente dishdetail.

429
00:31:20,000 --> 00:31:22,830
Então você vê, que eu tive que ajustar

430
00:31:22,830 --> 00:31:26,480
o código Angular um pouco a fim de lidar com o fato de que o

431
00:31:26,480 --> 00:31:29,765
Firebase não suporta certas coisas que mongos suporta

432
00:31:29,765 --> 00:31:33,605
pelo menos no momento em que o Cloud Firestore beta não suporta essas coisas,

433
00:31:33,605 --> 00:31:38,420
e então eu tive que trabalhar em torno de lidar com o Firebase permite que eu

434
00:31:38,420 --> 00:31:45,365
armazene e recupere do site do servidor Firebase.

435
00:31:45,365 --> 00:31:51,640
Agora, também é interessante para nós fazer uma rápida visita ao serviço Auth aqui.

436
00:31:51,640 --> 00:31:54,060
O serviço Auth aqui novamente,

437
00:31:54,060 --> 00:31:59,875
observe que no serviço Auth aqui estou importando este AngularFireAuth

438
00:31:59,875 --> 00:32:06,435
do submódulo AngularFire para npm aqui.

439
00:32:06,435 --> 00:32:11,005
Então, aqui você pode ver que estou importando AngularFireAuth e isso

440
00:32:11,005 --> 00:32:15,970
me dá acesso ao aspecto de autenticação do Firebase.

441
00:32:15,970 --> 00:32:21,690
Agora, vamos ver como a autenticação Firebase realmente funciona com nosso aplicativo Angular.

442
00:32:21,690 --> 00:32:26,300
Agora vamos começar isso olhando para como o login é implementado.

443
00:32:26,300 --> 00:32:28,775
Então, aqui é onde eu imploro o login,

444
00:32:28,775 --> 00:32:31,420
onde eu estou usando o e-mail e a senha.

445
00:32:31,420 --> 00:32:38,090
Então, esta parte quando eu importar o AngularFireAuth aqui,

446
00:32:38,090 --> 00:32:44,910
observe que o construtor eu estou injetando o AngularFireAuth no meu construtor.

447
00:32:44,910 --> 00:32:47,260
Então isso irá injetar o serviço AngularFireAuth

448
00:32:47,260 --> 00:32:50,240
no meu construtor e isso me dá acesso

449
00:32:50,240 --> 00:32:55,975
à autenticação Firebase no site do servidor para que eu possa autenticar usuários.

450
00:32:55,975 --> 00:33:01,555
Então, se eu quiser autenticar um usuário que está entrando com o e-mail e a senha.

451
00:33:01,555 --> 00:33:04,490
Esta função de login é a que vai ser chamada

452
00:33:04,490 --> 00:33:07,300
quando eu digitar meu e-mail e senha na caixa de

453
00:33:07,300 --> 00:33:10,110
diálogo de login que eu apareço e,

454
00:33:10,110 --> 00:33:13,735
em seguida, clique no botão enviar ou no botão de login aqui,

455
00:33:13,735 --> 00:33:16,120
esta função de login vai ser chamada e

456
00:33:16,120 --> 00:33:20,845
as informações do usuário, mas eu recupero do componente de login é passado aqui.

457
00:33:20,845 --> 00:33:22,985
Então, quando ele vem aqui,

458
00:33:22,985 --> 00:33:29,410
eu vou usar este Afauth como você vê Eu apenas injetado no construtor,

459
00:33:29,410 --> 00:33:33,995
e este fornece este objeto Auth aqui,

460
00:33:33,995 --> 00:33:38,715
que fornece este método chamado “login com e-mail e senha”.

461
00:33:38,715 --> 00:33:43,530
Então este login com e-mail e senha leva dois parâmetros aqui como você

462
00:33:43,530 --> 00:33:49,495
esperaria o nome de usuário do usuário ou o e-mail e a senha aqui.

463
00:33:49,495 --> 00:33:53,310
Então, essas duas informações que eu estou fornecendo

464
00:33:53,310 --> 00:33:57,290
como os dois parâmetros para este login com e-mail e senha.

465
00:33:57,290 --> 00:33:59,965
Então, quando você clicar em que você verá que ele

466
00:33:59,965 --> 00:34:03,790
diz que o primeiro deve ser e-mail e o segundo deve ser senha.

467
00:34:03,790 --> 00:34:05,455
Agora, a maneira que eu configurei,

468
00:34:05,455 --> 00:34:09,590
este objeto de usuário que está chegando contém o e-mail no

469
00:34:09,590 --> 00:34:16,735
user.username aqui e a senha na propriedade password do objeto usuário.

470
00:34:16,735 --> 00:34:18,925
Então, quando isso é obtido,

471
00:34:18,925 --> 00:34:24,670
então eu vou postar esta informação e então quando isso for concluído com sucesso,

472
00:34:24,670 --> 00:34:27,430
isso significa que o usuário está logado corretamente,

473
00:34:27,430 --> 00:34:29,075
se houver um erro,

474
00:34:29,075 --> 00:34:31,510
então você pegar o erro aqui agora eu

475
00:34:31,510 --> 00:34:33,960
não estou fazendo nada especificamente com o erro que você pode

476
00:34:33,960 --> 00:34:38,820
deseja imprimir esta mensagem de erro para indicar que o usuário não pode fazer login e assim por diante.

477
00:34:38,820 --> 00:34:42,070
Então, eu não implementei essa parte do negócio aqui,

478
00:34:42,070 --> 00:34:45,390
eu estou apenas deixando aqui mesmo se você quiser registrar o console

479
00:34:45,390 --> 00:34:48,740
esta informação você pode fazer isso quando ocorrem erros.

480
00:34:48,740 --> 00:34:51,495
Agora, para sair, no Firebase.

481
00:34:51,495 --> 00:34:56,610
Mais uma vez, pegamos a ajuda do Afauth que injetamos e Auth nele,

482
00:34:56,610 --> 00:34:58,975
e isso fornece este método chamado “sair”,

483
00:34:58,975 --> 00:35:01,815
que quando chamado vai sair do

484
00:35:01,815 --> 00:35:05,610
usuário conectado atualmente e assim que é uma maneira de lidar com isso.

485
00:35:05,610 --> 00:35:09,795
Agora, você deve estar se perguntando como eu lidar com a parte de login do Google.

486
00:35:09,795 --> 00:35:17,980
Agora isso também é tratado com o Afauth para que o módulo AngularFire2 que eu estou usando,

487
00:35:17,980 --> 00:35:22,780
fornece esta informação para estes métodos para nós através

488
00:35:22,780 --> 00:35:28,880
do módulo Firebase que também é usado em AngularFire2,

489
00:35:28,880 --> 00:35:33,105
e assim este fornece este método chamado login com pop e quando

490
00:35:33,105 --> 00:35:37,280
fazemos login com pop- Aqui em cima note o que eu estou especificando aqui.

491
00:35:37,280 --> 00:35:42,650
Então, eu estou dizendo “novo firebase.auth.googleAuthProvider”.

492
00:35:42,650 --> 00:35:48,200
Agora, você também pode fazer firebase.auth.FaceBookAuthProvider e outros.

493
00:35:48,200 --> 00:35:52,170
Então, como você viu no exercício anterior, o

494
00:35:52,170 --> 00:35:58,835
Firebase permite que você faça login de terceiros usando Google,

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

496
00:36:01,520 --> 00:36:04,440
Então você pode configurá-los adequadamente,

497
00:36:04,440 --> 00:36:07,260
já que eu ativei apenas a autorização do Google.

498
00:36:07,260 --> 00:36:10,470
Então é assim que eu vou configurá-lo para usar

499
00:36:10,470 --> 00:36:16,160
minha autorização do Google aqui e esta única linha de código que eu coloquei aqui,

500
00:36:16,160 --> 00:36:23,650
é a que faz com que o pop-up do navegador que me sugere para autorizar

501
00:36:23,650 --> 00:36:31,580
meu Firebase para usar a autorização do Google usando minha conta do Google aqui.

502
00:36:31,580 --> 00:36:34,210
Então essa é a segunda parte que eu montei aqui.

503
00:36:34,210 --> 00:36:38,929
Portanto, observe que o serviço Auth

504
00:36:38,929 --> 00:36:44,170
simplificou significativamente em comparação com o que fizemos com a versão anterior deste aplicativo.

505
00:36:44,170 --> 00:36:49,755
Então você pode comparar as duas versões para ver como isso é diferente da outra.

506
00:36:49,755 --> 00:36:54,410
Agora, não só que este Afauth que nós injetamos aqui,

507
00:36:54,410 --> 00:36:57,365
AngularFireAuth parte que nós injetamos aqui,

508
00:36:57,365 --> 00:37:01,800
também fornece este observável chamado “AuthState”.

509
00:37:01,800 --> 00:37:08,045
Este AuthState observável, pode ser inscrito e este “AuthState” observável,

510
00:37:08,045 --> 00:37:10,130
como você vê aqui,

511
00:37:10,130 --> 00:37:15,880
que eu declarei aqui como um firebase.user observável.

512
00:37:15,880 --> 00:37:21,400
Então, essa é a informação que é aplicada aqui e também podemos configurar

513
00:37:21,400 --> 00:37:27,465
outra variável aqui chamado usuário atual que é do tipo Firebase usuário aqui.

514
00:37:27,465 --> 00:37:31,610
Então, este AfauthState é um observável que

515
00:37:31,610 --> 00:37:35,570
eu posso assinar e sempre que este AuthState muda,

516
00:37:35,570 --> 00:37:38,935
o AuthState mantém o controle do estado de autenticação do usuário

517
00:37:38,935 --> 00:37:42,780
se o usuário está logado ou desconectado e se o usuário está logado,

518
00:37:42,780 --> 00:37:47,930
então este irá então se inscrever irá me retornar o e

519
00:37:47,930 --> 00:37:53,475
a partir das informações do usuário podemos recuperar um monte de informações, incluindo o nome de exibição,

520
00:37:53,475 --> 00:37:58,475
o e-mail, o ID do perfil e, em seguida, a

521
00:37:58,475 --> 00:38:04,535
imagem do avatar para o usuário se ele tiver sido configurado para as contas específicas.

522
00:38:04,535 --> 00:38:07,555
Todos estes ser-nos-ão fornecidos automaticamente pelo utilizador.

523
00:38:07,555 --> 00:38:10,660
Então, quando você clicar em “usuário” e, em seguida, ponto,

524
00:38:10,660 --> 00:38:14,445
você verá que ele fornece todas essas informações para nós.

525
00:38:14,445 --> 00:38:16,870
Portanto, é um e-mail de nome de exibição,

526
00:38:16,870 --> 00:38:19,835
se o e-mail é verificado ou não e assim por diante.

527
00:38:19,835 --> 00:38:22,855
Então, algumas das coisas que nos interessam especificamente.

528
00:38:22,855 --> 00:38:29,325
URL da foto que pode ser usado para recuperar as informações do avatar para o usuário,

529
00:38:29,325 --> 00:38:32,430
ID do provedor que especifica quem está

530
00:38:32,430 --> 00:38:35,755
fornecendo essas informações para você isso seria ou ID do Facebook, ID

531
00:38:35,755 --> 00:38:43,415
do Google e ID do GitHub e assim por diante e informações adicionais até mesmo o token de atualização.

532
00:38:43,415 --> 00:38:46,390
Então você vê um monte de informações sendo

533
00:38:46,390 --> 00:38:49,840
disponibilizadas para você através do objeto de usuário que é

534
00:38:49,840 --> 00:38:53,285
retornado por este Authstate quando você se inscrever para ele

535
00:38:53,285 --> 00:38:57,400
e também deixe-me chamar a sua atenção para o UID o ID do usuário,

536
00:38:57,400 --> 00:39:01,830
e isso é o que pode ser usado para indexar o usuário em nosso aplicativo.

537
00:39:01,830 --> 00:39:05,950
Então esse é o serviço de autenticação da maneira que eu o

538
00:39:05,950 --> 00:39:10,325
configurei para usar a autenticação Firebase neste aplicativo.

539
00:39:10,325 --> 00:39:14,730
Então, duas alterações que eu refleti para mostrar

540
00:39:14,730 --> 00:39:19,180
como meus serviços são modificados para usar o Firebase.

541
00:39:19,180 --> 00:39:23,605
Muitas das atualizações que eu fiz para o meu aplicativo Angular estão todos

542
00:39:23,605 --> 00:39:28,115
nos serviços para fazer uso do Firebase instalado.

543
00:39:28,115 --> 00:39:31,900
Então, por causa do bebê estruturado de aplicação Angular,

544
00:39:31,900 --> 00:39:34,390
os componentes estavam simplesmente dependendo dos

545
00:39:34,390 --> 00:39:37,330
serviços e os serviços eram aqueles que estamos falando com o back-end.

546
00:39:37,330 --> 00:39:39,660
Então, muitas das atualizações que eu fiz para o

547
00:39:39,660 --> 00:39:43,040
meu aplicativo Angular envolvem apenas atualizar esses serviços para

548
00:39:43,040 --> 00:39:50,660
usar o back-end Firebase do Google como um serviço com os dois módulos npm,

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

550
00:39:53,815 --> 00:39:58,690
Então, você veria que grande parte das atualizações é restrita a

551
00:39:58,690 --> 00:40:04,285
todos esses serviços que eu tenho na pasta de serviços do meu aplicativo Angular.

552
00:40:04,285 --> 00:40:06,710
Claro, eu precisava fazer um pouco de

553
00:40:06,710 --> 00:40:09,615
ajustes mínimos no componente dishdetail

554
00:40:09,615 --> 00:40:15,430
e no componente de cabeçalho para fazê-lo funcionar com o Firebase.

555
00:40:15,430 --> 00:40:19,485
Você pode fazer uma visita rápida ao headercomponent.ts,

556
00:40:19,485 --> 00:40:25,760
o headercomponent.html e o dishdetailcomponent.tsfile para ver como o código

557
00:40:25,760 --> 00:40:29,210
mudou entre a versão anterior

558
00:40:29,210 --> 00:40:32,070
e a versão atual do aplicativo Angular,

559
00:40:32,070 --> 00:40:36,360
a versão anterior, quero dizer a versão que usamos para

560
00:40:36,360 --> 00:40:39,490
comunicando com o nosso

561
00:40:39,490 --> 00:40:43,230
servidor X mais Mongo DB que usamos no exercício anterior.

562
00:40:43,230 --> 00:40:48,265
Agora, mais um lugar onde você poderia me ver fazendo modificações,

563
00:40:48,265 --> 00:40:51,640
curiosamente, é no serviço favorito.

564
00:40:51,640 --> 00:40:52,930
No serviço favorito,

565
00:40:52,930 --> 00:40:55,280
a maneira como eu armazenei os favoritos do usuário,

566
00:40:55,280 --> 00:40:58,410
é que os favoritos é uma coleção no

567
00:40:58,410 --> 00:41:02,015
meu site do servidor e o favorito em si contém documentos.

568
00:41:02,015 --> 00:41:06,550
Cada documento contém o ID do usuário e o ID do prato.

569
00:41:06,550 --> 00:41:09,210
Então, um determinado usuário poderia ter

570
00:41:09,210 --> 00:41:13,335
vários documentos cada um deles armazenando o ID do usuário e o ID do prato.

571
00:41:13,335 --> 00:41:20,035
Assim, uma coleção deles juntos definirá todos os favoritos para um determinado usuário.

572
00:41:20,035 --> 00:41:25,865
Descobri que esta é uma maneira melhor de organizar esses dados no Firebase.

573
00:41:25,865 --> 00:41:29,195
Em nosso MongoDB mais mongos,

574
00:41:29,195 --> 00:41:34,230
você viu que eu tinha incorporado na matriz de IDs prato no

575
00:41:34,230 --> 00:41:40,575
documento favoritos e, em seguida, definir o esquema favorito dessa forma.

576
00:41:40,575 --> 00:41:43,010
Aqui, estou usando

577
00:41:43,010 --> 00:41:47,395
um documento separado para rastrear cada um dos favoritos para cada um dos usuários.

578
00:41:47,395 --> 00:41:50,295
Agora, como o Firebase suporta consultas, então,

579
00:41:50,295 --> 00:41:55,545
eu posso consultar meu Firebase e extrair todos os documentos que têm os mesmos IDs de usuário,

580
00:41:55,545 --> 00:41:58,585
que corresponde ao usuário que está conectado no momento e, em seguida,

581
00:41:58,585 --> 00:42:02,405
extrair os IDs de prato correspondentes dos favoritos.

582
00:42:02,405 --> 00:42:05,250
Então eu vou e, em seguida, consultar o meu servidor

583
00:42:05,250 --> 00:42:08,475
e obter a informação prato para cada um desses pratos.

584
00:42:08,475 --> 00:42:13,325
Então, envolve várias viagens para o servidor, a fim de obter

585
00:42:13,325 --> 00:42:18,680
todas as informações meus pratos favoritos antes de eu poder renderizar minha lista de favoritos.

586
00:42:18,680 --> 00:42:24,180
Mas, essa é a melhor maneira que eu poderia obter Firebase para trabalhar com meu aplicativo Angular.

587
00:42:24,180 --> 00:42:26,945
Talvez, em uma data futura, o

588
00:42:26,945 --> 00:42:30,740
Firebase Cloud Firestone possa se estender para

589
00:42:30,740 --> 00:42:34,475
permitir que algo como preencher o que fizemos com mongos.

590
00:42:34,475 --> 00:42:38,570
Nesse caso, estarei atualizando o código para usar essa forma

591
00:42:38,570 --> 00:42:42,705
de obter todas as informações do prato automaticamente.

592
00:42:42,705 --> 00:42:48,420
Assim, a carga de construir este documento composto será deslocada para o site do servidor.

593
00:42:48,420 --> 00:42:51,740
Neste momento, o meu cliente está a fazer muito do trabalho aqui.

594
00:42:51,740 --> 00:42:53,795
Agora, quando você entrar aqui,

595
00:42:53,795 --> 00:42:56,400
você verá que no método getFavorites,

596
00:42:56,400 --> 00:42:59,495
você verá como eu estou acessando meus favoritos aqui.

597
00:42:59,495 --> 00:43:02,835
Então, quando eu faço “Getfavorites” Eu estou consultando

598
00:43:02,835 --> 00:43:06,220
esta coleção de favoritos, mas observe que aqui,

599
00:43:06,220 --> 00:43:12,545
eu digo “ref onde está este ID de usuário”.

600
00:43:12,545 --> 00:43:15,335
Este ID de usuário obtenho aqui.

601
00:43:15,335 --> 00:43:18,320
Então, no construtor do meu servidor favorito,

602
00:43:18,320 --> 00:43:22,855
estou subscrevendo este serviço de Auth o estado Get Auth no serviço Auth.

603
00:43:22,855 --> 00:43:25,075
Então, no serviço Auth se você entrar,

604
00:43:25,075 --> 00:43:28,615
você verá esse método chamado Get Auth state aqui.

605
00:43:28,615 --> 00:43:33,175
O estado Get Auth retorna o this.authState,

606
00:43:33,175 --> 00:43:35,575
que eu defini bem ali.

607
00:43:35,575 --> 00:43:39,760
Então, isso será um observável como você me vê declarando aqui.

608
00:43:39,760 --> 00:43:41,800
Então, esse observável é o que eu vou

609
00:43:41,800 --> 00:43:46,755
usar dentro do meu serviço favorito e, em seguida, assinar para isso.

610
00:43:46,755 --> 00:43:53,720
Assim, sempre que as informações do usuário mudarem, isso será refletido automaticamente aqui.

611
00:43:53,720 --> 00:43:59,180
Então, você viu que mesmo no aplicativo anterior eu tinha usado um observável,

612
00:43:59,180 --> 00:44:04,525
a fim de refletir as informações do usuário no meu componente de cabeçalho.

613
00:44:04,525 --> 00:44:06,030
Tipo semelhante de abordagem,

614
00:44:06,030 --> 00:44:08,600
que estou usando no meu componente favorito aqui,

615
00:44:08,600 --> 00:44:13,055
para obter o ID de usuário para o usuário conectado no momento.

616
00:44:13,055 --> 00:44:16,385
Então, quando eu consultar minha coleção Favoritos,

617
00:44:16,385 --> 00:44:22,825
eu vou consultar e extrair apenas os documentos onde o usuário corresponde a isso.

618
00:44:22,825 --> 00:44:26,220
Então eu só estou usando as mudanças de valor aqui.

619
00:44:26,220 --> 00:44:29,210
Então, eu só estou extraindo todos os documentos,

620
00:44:29,210 --> 00:44:34,650
que eu não me importo com o ID do próprio documento favorito neste momento.

621
00:44:34,650 --> 00:44:37,970
Então, eu só estou extraindo todos eles e usando-os.

622
00:44:37,970 --> 00:44:40,690
Se o usuário não estiver conectado e, como você pode ver,

623
00:44:40,690 --> 00:44:43,620
estou lançando um erro aqui com o observável dizendo,

624
00:44:43,620 --> 00:44:50,735
“nenhum usuário conectado” que é o que é exibido no meu discurso favorito lá.

625
00:44:50,735 --> 00:44:53,960
Agora, o IsFavorites também é atualizado aqui,

626
00:44:53,960 --> 00:44:57,685
mas no IsFavorites o que eu estou fazendo é que eu estou indo para o banco de dados.

627
00:44:57,685 --> 00:45:02,795
Agora aqui, vou acessar o banco de dados dizendo,

628
00:45:02,795 --> 00:45:06,135
“DB é igual a firebase.firestore”.

629
00:45:06,135 --> 00:45:09,610
Lembre-se que estou importando Firebase aqui,

630
00:45:09,610 --> 00:45:12,270
importando estrela como Firebase aqui.

631
00:45:12,270 --> 00:45:17,970
O Angular Firestore em si não me fornece um método de

632
00:45:17,970 --> 00:45:23,970
fazer várias consultas compostas aqui.

633
00:45:23,970 --> 00:45:29,495
O Fogo Angular ou o Fogo Angular não me fornece isso.

634
00:45:29,495 --> 00:45:33,390
Então, é por isso que eu tenho que recorrer ao Firebase Firestore.

635
00:45:33,390 --> 00:45:35,840
Então, quando eu digo Firebase Firestore,

636
00:45:35,840 --> 00:45:42,310
isso me dá uma referência ao banco de dados Firestore e, em seguida, eu posso ir para este banco de dados

637
00:45:42,310 --> 00:45:48,780
e, em seguida, dizer “favoritos de coleção de banco de dados” e, em seguida, eu posso fazer várias consultas aqui.

638
00:45:48,780 --> 00:45:55,470
Então, eu estou dizendo, .where user é this.wheredish é o ID do prato.

639
00:45:55,470 --> 00:45:59,380
Então, se eu quiser obter um favorito específico.

640
00:45:59,380 --> 00:46:03,640
Para verificar se um prato específico é o favorito de um usuário obtenho

641
00:46:03,640 --> 00:46:08,285
aquele documento em particular onde o usuário e o prato combinam com esses dois,

642
00:46:08,285 --> 00:46:12,110
se eles não coincidirem, então ele retornará com um vazio.

643
00:46:12,110 --> 00:46:16,610
Então, que eu extrair e, em seguida, retornar este valor aqui.

644
00:46:16,610 --> 00:46:18,900
Agora, então eu postar favoritos,

645
00:46:18,900 --> 00:46:25,770
você vê como eu estou fazendo isso eu estou dizendo esta coleção AFS favoritos e eu vou dizer “adicionar”.

646
00:46:25,770 --> 00:46:29,260
Veja o documento que estou armazenando nos meus favoritos.

647
00:46:29,260 --> 00:46:32,130
O documento em si contém o ID do usuário e o ID do prato.

648
00:46:32,130 --> 00:46:36,030
Então, estes dois pedaços de informação incluídos aqui e se

649
00:46:36,030 --> 00:46:41,295
não, em seguida, ele vai rejeitar a promessa sem nenhum usuário conectado aqui.

650
00:46:41,295 --> 00:46:44,915
Da mesma forma, para o favorito excluir que eu implementei aqui.

651
00:46:44,915 --> 00:46:48,735
Passe algum tempo novamente passando por esse código para entender como

652
00:46:48,735 --> 00:46:53,375
aproveitei os módulos Firebase e Angular fire para npm

653
00:46:53,375 --> 00:47:02,170
para me comunicar com meu servidor Firebase que configurei no exercício anterior.

654
00:47:02,170 --> 00:47:05,880
Com isso, eu lhe dei uma visão geral rápida de

655
00:47:05,880 --> 00:47:10,280
como você pode configurar seu aplicativo Angular para interagir com o

656
00:47:10,280 --> 00:47:13,980
Firebase back-end como um serviço e, em seguida, ser

657
00:47:13,980 --> 00:47:19,970
capaz de suportar várias operações que você tem dentro de seu aplicativo Angular.

658
00:47:19,970 --> 00:47:21,905
Como já demonstrado anteriormente,

659
00:47:21,905 --> 00:47:24,150
este aplicativo Angular se parece exatamente com

660
00:47:24,150 --> 00:47:26,690
a versão anterior do aplicativo Angular, onde estávamos

661
00:47:26,690 --> 00:47:31,915
usando nossa própria versão do nosso servidor Express MongoDB.

662
00:47:31,915 --> 00:47:38,510
Agora, com isso eu concluo este exercício em particular em que eu ilustrei

663
00:47:38,510 --> 00:47:42,020
nesta lição sobre back-end como um serviço e também demonstrei o

664
00:47:42,020 --> 00:47:46,630
Firebase como um exemplo de um back-end como um serviço.