1
00:00:01,010 --> 00:00:03,730
‫Palestrante: E agora para finalizar esse projeto,

2
00:00:03,730 --> 00:00:06,593
‫vamos finalizar essa integração do Stripe com os webhooks.

3
00:00:09,310 --> 00:00:12,040
‫Vamos começar a lembrar como nossa integração

4
00:00:12,040 --> 00:00:14,210
‫Stripe realmente funciona agora.

5
00:00:14,210 --> 00:00:16,750
‫Temos esse endpoint de sessão de

6
00:00:16,750 --> 00:00:19,540
‫checkout, que é chamado de nosso front-end.

7
00:00:19,540 --> 00:00:22,293
‫Isso então chamará a função getCheckoutSession, basicamente esta

8
00:00:23,440 --> 00:00:25,100
‫aqui, que criará

9
00:00:25,100 --> 00:00:28,180
‫uma sessão de checkout no servidor usando todas

10
00:00:28,180 --> 00:00:30,300
‫essas informações aqui e, em seguida,

11
00:00:30,300 --> 00:00:32,750
‫a enviará de volta ao cliente.

12
00:00:32,750 --> 00:00:35,170
‫Depois que o processamento do pagamento

13
00:00:35,170 --> 00:00:37,280
‫for feito com sucesso pelo

14
00:00:37,280 --> 00:00:40,990
‫Stripe, redirecione o usuário para esta URL de sucesso,

15
00:00:40,990 --> 00:00:42,483
‫esta que criamos.

16
00:00:44,210 --> 00:00:48,120
‫Lembre-se de que neste URL adicionamos o ID do tour, o

17
00:00:48,120 --> 00:00:50,920
‫ID do usuário e também o preço.

18
00:00:50,920 --> 00:00:55,040
‫Fizemos isso para que, uma vez que este URL fosse chamado, nosso

19
00:00:55,040 --> 00:00:57,920
‫aplicativo criasse um novo documento de reserva em

20
00:00:57,920 --> 00:00:59,680
‫nosso banco de dados.

21
00:00:59,680 --> 00:01:01,047
‫Como isso funcionou?

22
00:01:01,047 --> 00:01:04,743
‫Na rota my-tours, temos um middleware para isso.

23
00:01:06,040 --> 00:01:09,940
‫Lembre-se, aqui no viewRoutes, em my-tours,

24
00:01:09,940 --> 00:01:12,467
‫temos este createBookingCheckout.

25
00:01:14,770 --> 00:01:18,628
‫Esta função aqui, que basicamente a partir da consulta pega o

26
00:01:18,628 --> 00:01:21,440
‫tour, o usuário e o preço, e

27
00:01:21,440 --> 00:01:25,023
‫cria uma entrada no banco de dados usando esses dados.

28
00:01:26,350 --> 00:01:29,160
‫Basicamente, colocamos esses dados no URL

29
00:01:29,160 --> 00:01:32,500
‫sempre que o Stripe processa um pagamento com sucesso.

30
00:01:32,500 --> 00:01:34,990
‫E então essa função de middleware que temos

31
00:01:34,990 --> 00:01:38,570
‫aqui coleta os dados e cria uma nova reserva em nosso sistema

32
00:01:38,570 --> 00:01:39,960
‫usando esses dados.

33
00:01:39,960 --> 00:01:42,790
‫E depois disso, basicamente redirecionamos aqui para

34
00:01:42,790 --> 00:01:45,763
‫o URL original sem a string de consulta.

35
00:01:46,770 --> 00:01:50,150
‫Agora, o problema com isso é que não é realmente seguro.

36
00:01:50,150 --> 00:01:52,963
‫Então, todos que conhecem essa estrutura de

37
00:01:54,010 --> 00:01:57,670
‫URL, este aqui em cima, que tour, usuário e preço na

38
00:01:57,670 --> 00:02:00,700
‫string de consulta, pode basicamente criar uma reserva em

39
00:02:01,761 --> 00:02:03,850
‫nosso sistema sem realmente pagar.

40
00:02:03,850 --> 00:02:07,120
‫Então, tudo o que teríamos que fazer é abrir este

41
00:02:07,120 --> 00:02:08,500
‫URL com alguns

42
00:02:08,500 --> 00:02:11,680
‫dados lá e, a partir daí, criar automaticamente uma

43
00:02:11,680 --> 00:02:14,193
‫reserva sem passar pelo processo de Stripe.

44
00:02:15,540 --> 00:02:18,630
‫Lembre-se de como eu disse que resolveríamos

45
00:02:18,630 --> 00:02:20,853
‫isso usando algo chamado webhooks.

46
00:02:22,090 --> 00:02:23,120
‫Então, fazemos isso agora.

47
00:02:23,120 --> 00:02:24,090
‫Porque, para

48
00:02:24,090 --> 00:02:27,140
‫isso, realmente precisamos que nosso site seja implantado.

49
00:02:27,140 --> 00:02:29,350
‫Agora, neste ponto, esse é realmente o caso.

50
00:02:29,350 --> 00:02:31,833
‫E agora podemos implementar esses webhooks.

51
00:02:33,240 --> 00:02:35,663
‫Para isso, vamos ao nosso painel Stripe.

52
00:02:37,400 --> 00:02:39,750
‫E na verdade eu já o abri aqui.

53
00:02:39,750 --> 00:02:43,903
‫Em seguida, vá aqui para os desenvolvedores, escolha webhooks

54
00:02:45,070 --> 00:02:47,970
‫e, aqui, adicione um novo endpoint.

55
00:02:47,970 --> 00:02:52,149
‫Agora, o que é este ponto de extremidade aqui e este webhook?

56
00:02:52,149 --> 00:02:55,380
‫Basicamente, vamos especificar um URL aqui para o

57
00:02:55,380 --> 00:02:59,500
‫qual o Stripe enviará automaticamente uma solicitação POST sempre que uma

58
00:02:59,500 --> 00:03:02,800
‫sessão de checkout for concluída com êxito, basicamente

59
00:03:02,800 --> 00:03:05,740
‫sempre que um pagamento for bem-sucedido.

60
00:03:05,740 --> 00:03:09,920
‫Com essa solicitação POST, o Stripe enviará de volta os dados

61
00:03:09,920 --> 00:03:13,230
‫da sessão original que criamos na primeira etapa quando

62
00:03:13,230 --> 00:03:15,623
‫criamos a sessão de verificação.

63
00:03:17,540 --> 00:03:20,130
‫Essa é a razão pela qual realmente precisávamos que

64
00:03:20,130 --> 00:03:23,010
‫nosso site fosse implantado aqui, porque agora precisamos especificar aquele

65
00:03:23,010 --> 00:03:24,923
‫URL da vida real aqui.

66
00:03:27,170 --> 00:03:28,573
‫Vamos pegar isso

67
00:03:31,290 --> 00:03:34,150
‫daqui e, em seguida, adicionar nossa rota aqui, basicamente.

68
00:03:34,150 --> 00:03:36,930
‫Vou chamar isso de webhook-checkout.

69
00:03:41,620 --> 00:03:45,350
‫Não está na API e não está nas reservas.

70
00:03:45,350 --> 00:03:47,593
‫Você verá em um momento o porquê disso.

71
00:03:49,130 --> 00:03:51,210
‫Novamente, quando um pagamento foi bem-sucedido,

72
00:03:51,210 --> 00:03:53,280
‫o Stripe postará automaticamente os

73
00:03:53,280 --> 00:03:55,503
‫dados da sessão original neste URL.

74
00:03:58,060 --> 00:04:00,380
‫Agora também precisamos selecionar o evento.

75
00:04:00,380 --> 00:04:04,740
‫E você vê que há muitos eventos que poderíamos usar aqui.

76
00:04:04,740 --> 00:04:09,667
‫O que estamos usando é checkout_session_completed.

77
00:04:11,767 --> 00:04:12,650
‫Adicione isso.

78
00:04:12,650 --> 00:04:15,083
‫Agora você precisa inserir sua senha aqui novamente.

79
00:04:17,100 --> 00:04:19,110
‫E aí vamos nós.

80
00:04:19,110 --> 00:04:22,665
‫Este webhook também tem um segredo aqui.

81
00:04:22,665 --> 00:04:25,850
‫Este, nós também precisaremos em um segundo

82
00:04:25,850 --> 00:04:29,063
‫quando realmente criarmos nossa rota para este URL aqui.

83
00:04:29,980 --> 00:04:32,430
‫Na verdade, é exatamente o que vamos fazer a seguir.

84
00:04:33,750 --> 00:04:35,600
‫Basicamente, em nosso sistema,

85
00:04:35,600 --> 00:04:38,840
‫é claro, agora precisamos de uma rota para isso aqui,

86
00:04:39,960 --> 00:04:43,840
‫de modo que quando o Stripe postar os dados em nosso

87
00:04:43,840 --> 00:04:46,233
‫aplicativo, possamos realmente fazer algo com eles.

88
00:04:48,120 --> 00:04:52,233
‫Vamos voltar aqui e abrir nosso aplicativo.

89
00:04:54,740 --> 00:04:57,743
‫Na verdade, vamos adicionar essa rota aqui.

90
00:04:59,610 --> 00:05:03,100
‫Novamente, vou explicar o porquê em um segundo.

91
00:05:03,100 --> 00:05:04,350
‫Então, app. post

92
00:05:06,320 --> 00:05:08,850
‫e rota padrão e então, é claro, precisamos

93
00:05:08,850 --> 00:05:10,810
‫de uma função de manipulador para isso.

94
00:05:10,810 --> 00:05:14,720
‫Vamos criá-lo rapidamente aqui em nosso bookingController.

95
00:05:14,720 --> 00:05:19,013
‫Deixe-me chamar isso de exportação. webhookCheckout.

96
00:05:31,360 --> 00:05:36,360
‫Agora terei que importar este controlador para o aplicativo. js.

97
00:05:39,210 --> 00:05:42,110
‫Vamos fazer isso aqui mesmo depois do bookingRouter,

98
00:05:45,150 --> 00:05:47,133
‫então este e este, controlador

99
00:05:49,440 --> 00:05:51,383
‫e aqui também controlador.

100
00:05:54,580 --> 00:05:56,050
‫Tudo bem.

101
00:05:56,050 --> 00:06:01,050
‫Agora aqui embaixo, é o bookingController. webhookCheckout.

102
00:06:04,800 --> 00:06:08,820
‫Agora, por que realmente definimos este webhook-checkout aqui

103
00:06:08,820 --> 00:06:12,410
‫mesmo no aplicativo. js em vez de

104
00:06:12,410 --> 00:06:14,440
‫fazê-lo, por exemplo, no bookingRouter.

105
00:06:14,440 --> 00:06:17,950
‫A razão para isso é que nesta função de manipulador,

106
00:06:17,950 --> 00:06:20,677
‫quando recebemos o corpo do Stripe, a

107
00:06:20,677 --> 00:06:22,850
‫função Stripe que usaremos para

108
00:06:22,850 --> 00:06:26,780
‫realmente ler o corpo precisa desse corpo em uma forma bruta,

109
00:06:26,780 --> 00:06:29,633
‫basicamente como uma string e não como JSON.

110
00:06:31,370 --> 00:06:34,140
‫Novamente, nesta rota aqui, precisamos que o

111
00:06:34,140 --> 00:06:37,555
‫corpo que vem com a solicitação não esteja em JSON,

112
00:06:37,555 --> 00:06:40,600
‫caso contrário, isso não vai funcionar de jeito nenhum.

113
00:06:40,600 --> 00:06:43,700
‫Agora, o fato é que, assim que uma solicitação

114
00:06:43,700 --> 00:06:46,710
‫chegar a este middleware aqui, o corpo será analisado

115
00:06:46,710 --> 00:06:48,563
‫e convertido para JSON.

116
00:06:49,700 --> 00:06:54,650
‫Em seguida, será colocado a pedido. corpo como um objeto JSON simples.

117
00:06:54,650 --> 00:06:57,520
‫Novamente com isso, este manipulador de rota

118
00:06:57,520 --> 00:06:59,180
‫aqui não funcionaria.

119
00:06:59,180 --> 00:07:02,520
‫Essa é a razão pela qual precisamos colocar essa rota aqui antes

120
00:07:02,520 --> 00:07:04,557
‫de chamarmos o analisador de corpo.

121
00:07:05,580 --> 00:07:08,260
‫Agora ainda precisamos analisar o corpo, mas em

122
00:07:08,260 --> 00:07:10,120
‫um formato denominado bruto.

123
00:07:10,120 --> 00:07:13,690
‫No momento em que eu estava gravando este vídeo, não

124
00:07:13,690 --> 00:07:17,220
‫podíamos fazer isso com o Express pronto para uso.

125
00:07:17,220 --> 00:07:21,500
‫E então, neste vídeo, baixamos o analisador de corpo do npm e

126
00:07:21,500 --> 00:07:24,220
‫o usamos como mostro no vídeo.

127
00:07:24,220 --> 00:07:28,340
‫No entanto, cinco dias depois de gravar este

128
00:07:28,340 --> 00:07:32,770
‫vídeo, o Express também adicionou o analisador bruto ao Express.

129
00:07:32,770 --> 00:07:37,000
‫Agora podemos usar o expresso. raw em vez de instalar

130
00:07:37,000 --> 00:07:39,523
‫o analisador de corpo ou middleware do npm.

131
00:07:40,530 --> 00:07:44,610
‫Novamente, neste vídeo, irei instalar o analisador de corpo, mas

132
00:07:44,610 --> 00:07:46,440
‫você realmente não precisa.

133
00:07:46,440 --> 00:07:49,293
‫Você pode apenas usar expresso. em vez disso cru.

134
00:07:51,590 --> 00:07:52,700
‫Npm instala o analisador

135
00:07:54,480 --> 00:07:55,403
‫de corpo.

136
00:07:58,950 --> 00:08:02,120
‫Isso provavelmente soa um pouco focado, e eu

137
00:08:02,120 --> 00:08:04,350
‫entendo isso perfeitamente, mas é assim

138
00:08:04,350 --> 00:08:08,050
‫que a documentação do Stripe funciona e nos obriga

139
00:08:08,890 --> 00:08:10,893
‫a fazê-lo, de verdade.

140
00:08:15,210 --> 00:08:17,100
‫Vamos voltar aqui para nossa rota.

141
00:08:17,100 --> 00:08:20,453
‫Nesta rota, precisamos que o corpo esteja em um formato bruto.

142
00:08:21,460 --> 00:08:25,330
‫Podemos adicionar isso como um middleware aqui entre a rota e

143
00:08:25,330 --> 00:08:26,673
‫o manipulador final.

144
00:08:28,654 --> 00:08:31,013
‫Aqui dizemos bodyParser. raw, e

145
00:08:34,830 --> 00:08:37,490
‫também precisamos especificar aqui o

146
00:08:39,450 --> 00:08:43,127
‫tipo muito rápido como application / json.

147
00:08:48,130 --> 00:08:52,660
‫Agora adicionamos esta análise de corpo como um corpo bruto aqui nesta

148
00:08:52,660 --> 00:08:54,183
‫pilha de middleware.

149
00:08:55,964 --> 00:08:58,150
‫Tudo isso realmente começará a se

150
00:08:58,150 --> 00:09:00,970
‫encaixar assim que começarmos a implementar essa função.

151
00:09:00,970 --> 00:09:02,543
‫Na verdade, vamos fazer isso

152
00:09:03,820 --> 00:09:05,210
‫agora, então bem aqui.

153
00:09:05,210 --> 00:09:07,100
‫Mas antes de realmente fazermos

154
00:09:07,100 --> 00:09:09,780
‫isso, vamos nos livrar de todo o código

155
00:09:09,780 --> 00:09:11,680
‫que escrevemos para que funcione agora.

156
00:09:11,680 --> 00:09:14,420
‫Então, basicamente essa função de middleware,

157
00:09:14,420 --> 00:09:16,350
‫não precisamos mais dela.

158
00:09:16,350 --> 00:09:18,480
‫Também aqui no

159
00:09:18,480 --> 00:09:21,980
‫viewRoutes, não precisamos mais dele aqui também.

160
00:09:21,980 --> 00:09:24,770
‫E, finalmente, no bookingController, vamos

161
00:09:24,770 --> 00:09:28,153
‫também definir nosso URL de volta ao normal.

162
00:09:31,080 --> 00:09:33,180
‫Vou apenas deixar tudo isso aqui para que

163
00:09:33,180 --> 00:09:35,233
‫você possa mantê-lo como uma referência.

164
00:09:37,390 --> 00:09:40,863
‫Mas agora o URL de sucesso deve ser apenas este.

165
00:09:43,090 --> 00:09:45,400
‫Basicamente, após uma reserva bem-sucedida, ainda

166
00:09:45,400 --> 00:09:48,090
‫queremos voltar para my-tours, mas sem todos

167
00:09:48,090 --> 00:09:50,350
‫esses parâmetros de consulta

168
00:09:51,350 --> 00:09:54,580
‫porque agora não é mais esta função aqui, que

169
00:09:54,580 --> 00:09:57,430
‫se encarregará de criar a reserva, mas

170
00:09:57,430 --> 00:09:59,770
‫em vez disso é esta função

171
00:09:59,770 --> 00:10:02,060
‫aqui, que é de claro, aquele

172
00:10:02,060 --> 00:10:05,633
‫que é chamado assim que o Stripe chama nosso webhook.

173
00:10:07,140 --> 00:10:08,470
‫Agora vamos implementar isso.

174
00:10:08,470 --> 00:10:10,140
‫A primeira coisa que

175
00:10:10,140 --> 00:10:13,763
‫precisamos fazer é livrar essa assinatura Stripe de nossos cabeçalhos,

176
00:10:15,780 --> 00:10:19,840
‫então assine e depois solicite. cabeçalhos e,

177
00:10:21,500 --> 00:10:26,373
‫a partir daí, assinatura de faixa.

178
00:10:28,220 --> 00:10:30,710
‫Basicamente, quando o Stripe chama nosso webhook,

179
00:10:30,710 --> 00:10:32,830
‫ele adiciona um cabeçalho a

180
00:10:32,830 --> 00:10:36,280
‫essa solicitação contendo uma assinatura especial para nosso webhook.

181
00:10:38,480 --> 00:10:40,700
‫Se você está pensando que está apenas seguindo

182
00:10:40,700 --> 00:10:42,590
‫cegamente o que estou fazendo

183
00:10:42,590 --> 00:10:45,070
‫aqui, bem, (risos) isso é exatamente o que eu

184
00:10:45,070 --> 00:10:47,050
‫fiz também com as documentações do Stripe.

185
00:10:47,050 --> 00:10:50,320
‫Novamente, é realmente assim que o Stripe funciona, e não

186
00:10:50,320 --> 00:10:52,973
‫há nada que possamos fazer contra isso.

187
00:10:54,350 --> 00:10:57,453
‫De qualquer forma, a seguir, vamos criar

188
00:10:59,310 --> 00:11:03,690
‫um evento Stripe, então o evento const é igual a stripe.

189
00:11:03,690 --> 00:11:07,410
‫Para isso, é claro, precisamos da biblioteca Stripe

190
00:11:07,410 --> 00:11:09,573
‫instalada, que temos aqui.

191
00:11:12,650 --> 00:11:14,350
‫Então, stripe. webhooks. contructEvent.

192
00:11:20,378 --> 00:11:23,210
‫Agora é aqui que finalmente esse corpo entra

193
00:11:23,210 --> 00:11:26,520
‫em ação, então peça. corpo.

194
00:11:26,520 --> 00:11:28,370
‫E lembre-se de que este corpo

195
00:11:28,370 --> 00:11:30,220
‫aqui precisa estar na forma

196
00:11:30,220 --> 00:11:32,083
‫bruta, então basicamente disponível como uma corda.

197
00:11:33,130 --> 00:11:36,340
‫Mais uma vez, é por isso que colocamos essa rota

198
00:11:36,340 --> 00:11:38,110
‫antes de todas as nossas

199
00:11:38,110 --> 00:11:41,580
‫outras rotas e especialmente antes que o analisador de corpo pudesse

200
00:11:41,580 --> 00:11:44,863
‫fazer seu trabalho de converter nosso corpo em um objeto JSON.

201
00:11:46,170 --> 00:11:51,050
‫Além desse corpo, para o evento, precisamos de uma assinatura, basicamente a

202
00:11:51,050 --> 00:11:53,370
‫assinatura que foi enviada junto

203
00:11:53,370 --> 00:11:56,763
‫com o cabeçalho e, finalmente, nosso segredo do webhook.

204
00:11:57,710 --> 00:12:00,653
‫Vamos começar aqui, copie.

205
00:12:01,585 --> 00:12:05,610
‫Como é um segredo, devemos, como sempre, adicioná-lo aqui

206
00:12:05,610 --> 00:12:07,143
‫ao nosso

207
00:12:10,460 --> 00:12:12,737
‫arquivo de configuração, então STRIPE_WEBHOOK_SECRET.

208
00:12:16,650 --> 00:12:19,380
‫E mais tarde, é claro, não se esqueça de

209
00:12:19,380 --> 00:12:21,663
‫adicionar isso também à configuração do Heroku.

210
00:12:26,100 --> 00:12:27,330
‫Vamos agora usar isso.

211
00:12:27,330 --> 00:12:28,767
‫Adicionar processo. env.

212
00:12:30,330 --> 00:12:31,830
‫Eu deveria ter apenas copiado

213
00:12:35,690 --> 00:12:36,573
‫isso aqui.

214
00:12:37,752 --> 00:12:41,200
‫Então, você vê, tudo isso é realmente para tornar

215
00:12:41,200 --> 00:12:43,450
‫o processo super, super seguro.

216
00:12:43,450 --> 00:12:45,970
‫Precisamos de todos esses dados, como

217
00:12:45,970 --> 00:12:49,450
‫a assinatura e também o segredo, a fim de validar

218
00:12:49,450 --> 00:12:51,640
‫basicamente os dados que vêm

219
00:12:51,640 --> 00:12:54,433
‫no corpo para que ninguém possa realmente manipulá-los.

220
00:12:55,870 --> 00:12:58,050
‫Agora, durante a criação deste evento,

221
00:12:58,050 --> 00:12:59,280
‫podem ocorrer alguns

222
00:12:59,280 --> 00:13:01,420
‫erros, por exemplo, se a assinatura

223
00:13:01,420 --> 00:13:03,900
‫estiver errada ou se o segredo estiver errado.

224
00:13:03,900 --> 00:13:07,813
‫E então, vamos embrulhar isso em um bloco try-catch.

225
00:13:16,290 --> 00:13:17,850
‫OK.

226
00:13:17,850 --> 00:13:19,500
‫Claro, agora precisamos do truque.

227
00:13:22,150 --> 00:13:23,410
‫Caso haja um

228
00:13:23,410 --> 00:13:26,053
‫erro, queremos enviar de volta um erro

229
00:13:27,880 --> 00:13:32,450
‫para o Stripe, então retorne res. status 400 e, em seguida, basta usar enviar

230
00:13:33,756 --> 00:13:35,657
‫erro do webhook e, em

231
00:13:40,140 --> 00:13:44,023
‫seguida, vamos apenas adicionar o erro. mensagem.

232
00:13:45,714 --> 00:13:49,220
‫Então, é o Stripe quem vai receber essa resposta aqui,

233
00:13:49,220 --> 00:13:53,230
‫porque novamente é o Stripe quem vai realmente chamar a URL,

234
00:13:53,230 --> 00:13:56,603
‫então nosso webhook, que vai chamar essa função.

235
00:13:58,520 --> 00:14:02,420
‫Agora precisamos, é claro, também declarar esse evento aqui fora

236
00:14:02,420 --> 00:14:04,610
‫do bloco try-catch, porque do

237
00:14:04,610 --> 00:14:07,623
‫contrário não seremos capazes de usá-lo lá.

238
00:14:08,660 --> 00:14:13,160
‫Então, deixe o evento e então reatribua aqui porque lembre-se de

239
00:14:13,160 --> 00:14:15,430
‫que o ES6 const e let

240
00:14:15,430 --> 00:14:17,450
‫têm escopo de bloco.

241
00:14:17,450 --> 00:14:20,480
‫E assim, essa variável não estaria disponível fora

242
00:14:20,480 --> 00:14:21,473
‫deste bloco.

243
00:14:23,180 --> 00:14:25,830
‫Agora, vamos realmente usar esse evento.

244
00:14:25,830 --> 00:14:29,090
‫Primeiro, precisamos testar se este é realmente o evento

245
00:14:29,090 --> 00:14:29,923
‫que queremos.

246
00:14:30,810 --> 00:14:34,240
‫Então, podemos fazer um evento. tipo é igual

247
00:14:34,240 --> 00:14:38,973
‫a check-out. sessão. completo.

248
00:14:42,080 --> 00:14:44,370
‫Lembre-se de que em nosso painel

249
00:14:44,370 --> 00:14:48,090
‫do Stripe, esse é exatamente o tipo que definimos aqui.

250
00:14:48,090 --> 00:14:49,260
‫Então, esse é o tipo de evento.

251
00:14:49,260 --> 00:14:52,183
‫Agora estamos verificando se esse é realmente

252
00:14:52,183 --> 00:14:56,287
‫o evento que estamos recebendo aqui, apenas para termos 100% de certeza.

253
00:14:56,287 --> 00:14:59,780
‫Em caso afirmativo, queremos realmente usar o evento para criar nossa

254
00:14:59,780 --> 00:15:02,053
‫reserva em nosso banco de dados.

255
00:15:03,860 --> 00:15:06,280
‫Na verdade vamos fazer isso em uma função

256
00:15:06,280 --> 00:15:08,983
‫separada e não aqui dentro de toda essa bagunça.

257
00:15:10,517 --> 00:15:12,590
‫Para isso, vou criar uma função.

258
00:15:12,590 --> 00:15:13,640
‫Na verdade, deixe-me

259
00:15:13,640 --> 00:15:15,990
‫dar exatamente o mesmo nome, então, crieBookingCheckout.

260
00:15:17,487 --> 00:15:19,490
‫Na verdade, era um bom nome, mas

261
00:15:19,490 --> 00:15:21,450
‫agora não pode ser um middleware,

262
00:15:21,450 --> 00:15:23,250
‫mas apenas uma função normal.

263
00:15:26,080 --> 00:15:28,823
‫Esta função aceitará os dados da sessão.

264
00:15:31,080 --> 00:15:35,310
‫E lembre-se de que os dados da sessão são exatamente esta sessão

265
00:15:35,310 --> 00:15:37,513
‫que criamos aqui em primeiro lugar.

266
00:15:41,404 --> 00:15:43,730
‫Se este for o evento correto,

267
00:15:43,730 --> 00:15:45,743
‫então vamos realmente chamar essa

268
00:15:46,680 --> 00:15:49,500
‫função, então crieBookingCheckout com a sessão, que está

269
00:15:49,500 --> 00:15:53,057
‫no evento. dados. objeto.

270
00:15:57,447 --> 00:15:58,320
‫E, finalmente,

271
00:15:58,320 --> 00:16:01,333
‫vamos enviar de volta alguma resposta ao Stripe.

272
00:16:02,450 --> 00:16:03,840
‫Então, status

273
00:16:05,780 --> 00:16:07,480
‫200 e digamos algum recebimento

274
00:16:10,300 --> 00:16:11,823
‫json definido como verdadeiro.

275
00:16:13,200 --> 00:16:14,033
‫Faz sentido?

276
00:16:16,000 --> 00:16:18,490
‫Mais uma vez, todo esse código

277
00:16:18,490 --> 00:16:21,390
‫aqui será executado sempre que um pagamento for bem-sucedido.

278
00:16:21,390 --> 00:16:25,380
‫O Stripe irá então chamar nosso webhook, que é a URL,

279
00:16:25,380 --> 00:16:27,420
‫que irá chamar esta função.

280
00:16:27,420 --> 00:16:30,600
‫E assim, esta função recebe um corpo da requisição, e

281
00:16:30,600 --> 00:16:34,330
‫então junto com a assinatura e / ou segredo do webhook, cria

282
00:16:34,330 --> 00:16:37,110
‫um evento, que irá conter a sessão.

283
00:16:37,110 --> 00:16:39,190
‫E então, usando os dados da

284
00:16:39,190 --> 00:16:41,963
‫sessão, podemos criar nossa nova reserva no banco de dados.

285
00:16:43,987 --> 00:16:45,660
‫E então, isso será bem parecido com

286
00:16:45,660 --> 00:16:47,143
‫o que tínhamos aqui antes.

287
00:16:48,400 --> 00:16:51,790
‫Portanto, precisaremos dessa linha de código aqui novamente.

288
00:16:51,790 --> 00:16:53,923
‫Portanto, esta também será uma função assíncrona.

289
00:16:58,497 --> 00:17:00,530
‫E então, isso é exatamente o mesmo.

290
00:17:00,530 --> 00:17:02,260
‫Agora, o que precisamos

291
00:17:02,260 --> 00:17:06,690
‫aqui, é claro, é obter acesso ao tour, ao usuário e ao preço.

292
00:17:06,690 --> 00:17:10,550
‫Mas esses dados mais uma vez são armazenados nessa sessão.

293
00:17:10,550 --> 00:17:12,400
‫Então, vamos começar com o tour.

294
00:17:12,400 --> 00:17:14,780
‫E lembre-se de como aqui, quando

295
00:17:14,780 --> 00:17:17,100
‫criamos essa função de manipulador

296
00:17:17,100 --> 00:17:20,040
‫pela primeira vez, eu especifiquei este campo client_reference_id

297
00:17:20,040 --> 00:17:22,370
‫e adicionei o tourId a ele.

298
00:17:22,370 --> 00:17:23,840
‫Lembre-se disso?

299
00:17:23,840 --> 00:17:25,700
‫Fiz isso porque, na época,

300
00:17:25,700 --> 00:17:29,840
‫já sabia que iríamos precisar desse tour ID um pouco mais tarde.

301
00:17:29,840 --> 00:17:32,490
‫Agora é o momento em que realmente precisamos

302
00:17:32,490 --> 00:17:35,333
‫do ID do tour para poder criar essa nova reserva.

303
00:17:36,732 --> 00:17:38,490
‫E então, agora o ID do tour

304
00:17:38,490 --> 00:17:41,670
‫de que precisamos está no ID de referência do cliente ponto da sessão.

305
00:17:41,670 --> 00:17:44,770
‫Então, vamos copiar isso e dizer

306
00:17:47,870 --> 00:17:48,703
‫sessão.

307
00:17:49,660 --> 00:17:53,823
‫E, claro, aqui precisamos dizer tour.

308
00:17:55,670 --> 00:17:57,040
‫Então, esse é o ID do tour.

309
00:17:57,040 --> 00:17:59,150
‫Em seguida, precisamos do ID do usuário.

310
00:17:59,150 --> 00:18:01,240
‫Agora, a informação que temos em

311
00:18:01,240 --> 00:18:03,973
‫nossa sessão sobre o usuário é o e-mail do usuário.

312
00:18:05,630 --> 00:18:07,170
‫E então, agora o

313
00:18:07,170 --> 00:18:10,500
‫que precisamos fazer é basicamente obter o ID do usuário.

314
00:18:10,500 --> 00:18:12,793
‫Para isso, faremos a consulta pelo email.

315
00:18:13,720 --> 00:18:16,810
‫Isso não é problema porque o e-mail também é único.

316
00:18:16,810 --> 00:18:19,353
‫Com base nisso, podemos encontrar o ID exclusivo.

317
00:18:20,370 --> 00:18:24,183
‫Portanto, o usuário const está aguardando.

318
00:18:25,570 --> 00:18:27,660
‫E acho que já temos o usuário aqui.

319
00:18:27,660 --> 00:18:28,493
‫Não?

320
00:18:29,520 --> 00:18:30,570
‫Não, na verdade não quero.

321
00:18:31,890 --> 00:18:33,290
‫Então, vamos apenas fazer isso aqui.

322
00:18:35,490 --> 00:18:37,973
‫E usuário aqui também.

323
00:18:41,070 --> 00:18:41,903
‫OK.

324
00:18:41,903 --> 00:18:46,890
‫Então, usuário. findOne e depois consulta via email, que

325
00:18:47,990 --> 00:18:51,330
‫está no ponto da sessão, e acredito que seja o

326
00:18:51,330 --> 00:18:53,780
‫email do cliente ou algo assim.

327
00:18:55,200 --> 00:18:56,200
‫É cliente_email.

328
00:18:59,860 --> 00:19:00,693
‫OK.

329
00:19:02,070 --> 00:19:04,970
‫Mas isso retornará o documento inteiro, mas

330
00:19:04,970 --> 00:19:06,910
‫queremos realmente o ID.

331
00:19:06,910 --> 00:19:09,780
‫Então, vamos embrulhar tudo isso aqui entre

332
00:19:10,730 --> 00:19:14,743
‫parênteses e então chamar o ID ali ou realmente ler o ID.

333
00:19:16,620 --> 00:19:17,960
‫Então é isso.

334
00:19:17,960 --> 00:19:19,233
‫E finalmente, o preço.

335
00:19:22,350 --> 00:19:24,023
‫Onde o preço está armazenado?

336
00:19:25,320 --> 00:19:26,833
‫Bem, está aqui em line_items.

337
00:19:27,880 --> 00:19:30,610
‫Isso é uma matriz, portanto, no

338
00:19:30,610 --> 00:19:33,553
‫elemento zero e a quantidade dividida por 100.

339
00:19:34,580 --> 00:19:38,210
‫Então, multiplicamos aqui por 100 para obter centavos, mas agora

340
00:19:38,210 --> 00:19:41,590
‫é claro que queremos de volta em dólares.

341
00:19:41,590 --> 00:19:44,700
‫Então, precisamos basicamente dividir isso de volta.

342
00:19:44,700 --> 00:19:48,550
‫E então, sessão. line_items e a

343
00:19:49,460 --> 00:19:54,460
‫quantidade de pontos do primeiro elemento, se estou certo.

344
00:19:55,950 --> 00:19:56,783
‫Sim.

345
00:19:56,783 --> 00:20:01,710
‫Portanto, o valor é dividido por 100.

346
00:20:01,710 --> 00:20:04,010
‫Deve ser isso.

347
00:20:04,010 --> 00:20:06,630
‫Agora, vamos enviar nossas alterações para o repositório

348
00:20:06,630 --> 00:20:08,740
‫e enviá-lo para o Stripe.

349
00:20:08,740 --> 00:20:12,840
‫Então, git add all, é

350
00:20:12,840 --> 00:20:16,600
‫claro, e git commit message

351
00:20:18,090 --> 00:20:21,633
‫Implementação de stripe

352
00:20:24,960 --> 00:20:29,960
‫aprimorada e git push heroku master.

353
00:20:31,190 --> 00:20:33,273
‫Mais uma vez, isso levará algum tempo.

354
00:20:33,273 --> 00:20:35,263
‫Vejo você quando terminar.

355
00:20:36,200 --> 00:20:37,033
‫Tudo bem.

356
00:20:37,033 --> 00:20:40,323
‫Agora não se esqueça de definir essa nova variável de ambiente.

357
00:20:41,610 --> 00:20:46,610
‫Então, esse é o conjunto de dois pontos de configuração do

358
00:20:46,750 --> 00:20:49,433
‫heroku e simplesmente copie-o daqui.

359
00:20:53,590 --> 00:20:54,720
‫OK.

360
00:20:54,720 --> 00:20:56,800
‫Isso então reinicia o aplicativo.

361
00:20:56,800 --> 00:20:58,173
‫E é isso.

362
00:20:59,570 --> 00:21:02,723
‫Então, vamos realmente prosseguir e testá-lo.

363
00:21:04,980 --> 00:21:05,813
‫Tudo bem.

364
00:21:07,050 --> 00:21:09,480
‫Ainda estamos aqui em nosso aplicativo.

365
00:21:09,480 --> 00:21:12,883
‫Vamos ver quais tours a Laura já reservou.

366
00:21:14,100 --> 00:21:15,370
‫Ela tem o Caminhante da Floresta.

367
00:21:15,370 --> 00:21:19,823
‫Essa reserva ainda era feita usando o método antigo.

368
00:21:21,050 --> 00:21:24,240
‫Mas esse método antigo não funciona mais.

369
00:21:24,240 --> 00:21:27,047
‫Agora, se fizermos outra reserva e

370
00:21:27,047 --> 00:21:29,490
‫funcionar, bem, isso significará

371
00:21:29,490 --> 00:21:32,773
‫que, é claro, nossa nova implementação funciona.

372
00:21:34,730 --> 00:21:35,780
‫Vamos testar isso aqui.

373
00:21:39,760 --> 00:21:41,493
‫Como sempre, 4242.

374
00:21:50,420 --> 00:21:51,683
‫Agora vamos esperar.

375
00:21:52,730 --> 00:21:55,740
‫Bem, isso aparentemente não foi muito bem, porque

376
00:21:55,740 --> 00:21:58,520
‫caso contrário, nossa segunda nova turnê já deveria

377
00:21:58,520 --> 00:22:00,743
‫estar aqui em nossas reservas.

378
00:22:02,230 --> 00:22:04,203
‫Vamos ver aqui em nosso painel.

379
00:22:05,860 --> 00:22:06,983
‫Se recarregarmos

380
00:22:12,150 --> 00:22:15,893
‫agora, veremos de fato que houve um evento bem-sucedido.

381
00:22:17,407 --> 00:22:20,320
‫Então, esse é o evento que acabamos de

382
00:22:20,320 --> 00:22:23,170
‫criar e que enviou este corpo aqui

383
00:22:23,170 --> 00:22:25,380
‫e depois recebeu esta resposta.

384
00:22:25,380 --> 00:22:27,560
‫Portanto, este recebimento definido como verdadeiro

385
00:22:27,560 --> 00:22:30,663
‫é exatamente o que fizemos aqui em nosso código,

386
00:22:31,670 --> 00:22:32,633
‫isso aqui.

387
00:22:34,060 --> 00:22:36,000
‫Então, essa é a resposta

388
00:22:36,000 --> 00:22:39,770
‫que enviamos e o corpo que recebemos contém todos esses dados.

389
00:22:39,770 --> 00:22:42,810
‫E assim, podemos ver aqui a sessão

390
00:22:42,810 --> 00:22:46,460
‫com o preço, com o email, com o tour.

391
00:22:46,460 --> 00:22:49,483
‫E então, não sei por que não funcionou.

392
00:22:51,000 --> 00:22:53,163
‫Então, vamos recarregar rapidamente aqui.

393
00:22:55,780 --> 00:22:59,050
‫Então, na verdade, nossa implementação do Stripe deve estar correta, mas,

394
00:22:59,050 --> 00:23:02,013
‫por algum motivo, nossa nova reserva não foi criada.

395
00:23:03,120 --> 00:23:05,020
‫Vamos verificar isso também aqui no Compass.

396
00:23:07,460 --> 00:23:09,970
‫E, de fato, não está lá.

397
00:23:09,970 --> 00:23:12,123
‫Então, vamos voltar ao nosso código aqui.

398
00:23:13,410 --> 00:23:17,360
‫Ah, e um erro que vejo imediatamente está aqui.

399
00:23:17,360 --> 00:23:20,393
‫Portanto, deve ser concluído assim.

400
00:23:22,090 --> 00:23:24,480
‫Então, isso é um erro estúpido.

401
00:23:24,480 --> 00:23:26,950
‫Vamos ver se pode

402
00:23:26,950 --> 00:23:30,050
‫haver outro erro aqui em createBookingCheckout.

403
00:23:30,050 --> 00:23:30,883
‫Aqui temos

404
00:23:32,750 --> 00:23:33,583
‫line_items.

405
00:23:33,583 --> 00:23:35,093
‫Vamos ver se isso está correto.

406
00:23:36,110 --> 00:23:38,170
‫E sim, parece ser.

407
00:23:38,170 --> 00:23:41,123
‫Também podemos confirmar isso aqui novamente no nosso Stripe.

408
00:23:43,110 --> 00:23:45,290
‫Na verdade, aqui é chamado display_items.

409
00:23:46,590 --> 00:23:47,423
‫Isso é estranho.

410
00:23:48,367 --> 00:23:52,140
‫Só para ter certeza, vamos chamá-lo de display_items

411
00:23:52,140 --> 00:23:54,363
‫aqui em nosso código.

412
00:23:55,980 --> 00:23:57,580
‫Outra coisa que notei ao

413
00:23:58,750 --> 00:24:00,350
‫dar outra olhada aqui

414
00:24:00,350 --> 00:24:03,510
‫é que ainda temos essa imagem codificada para este

415
00:24:03,510 --> 00:24:05,763
‫outro tipo. dev.

416
00:24:07,587 --> 00:24:11,380
‫Agora vamos corrigir isso porque, neste ponto, é claro,

417
00:24:11,380 --> 00:24:14,580
‫nosso site já está ativo e implementado.

418
00:24:14,580 --> 00:24:16,600
‫E então, podemos basicamente substituir isso pelo

419
00:24:16,600 --> 00:24:18,100
‫mesmo que temos aqui.

420
00:24:20,900 --> 00:24:23,430
‫Então, usamos essa parte aqui muitas vezes.

421
00:24:23,430 --> 00:24:25,480
‫E então, é hora de usar isso novamente aqui.

422
00:24:32,672 --> 00:24:33,505
‫Sim.

423
00:24:33,505 --> 00:24:35,353
‫Vamos tentar reimplantar isso.

424
00:24:36,380 --> 00:24:38,113
‫Então, git add all again.

425
00:24:40,420 --> 00:24:42,070
‫E vamos chamar isso

426
00:24:42,070 --> 00:24:44,430
‫aqui Implementação de fração aprimorada dois.

427
00:24:44,430 --> 00:24:47,693
‫E então empurre novamente para Heroku.

428
00:24:51,580 --> 00:24:52,560
‫OK.

429
00:24:52,560 --> 00:24:54,253
‫Vamos tentar mais uma vez.

430
00:24:55,830 --> 00:24:57,023
‫Vamos voltar aqui.

431
00:25:00,630 --> 00:25:04,063
‫Agora vamos tentar reservar novamente para Park Camper.

432
00:25:15,760 --> 00:25:16,683
‫Tudo bem.

433
00:25:17,920 --> 00:25:21,530
‫Você deveria ver a imagem aparecendo aqui no lado esquerdo.

434
00:25:21,530 --> 00:25:24,200
‫Isso significa que nossa nova integração de

435
00:25:24,200 --> 00:25:25,753
‫imagem também funcionou bem.

436
00:25:27,220 --> 00:25:28,283
‫Agora está em processamento.

437
00:25:29,382 --> 00:25:31,380
‫Ah, agora está aqui.

438
00:25:31,380 --> 00:25:32,320
‫Excelente.

439
00:25:32,320 --> 00:25:33,533
‫Isso é bonito.

440
00:25:34,420 --> 00:25:36,850
‫Agora realmente temos uma implementação de

441
00:25:36,850 --> 00:25:39,940
‫Stripe segura e muito mais profissional em

442
00:25:39,940 --> 00:25:41,173
‫nosso aplicativo.

443
00:25:42,070 --> 00:25:43,520
‫Isso é ótimo.

444
00:25:43,520 --> 00:25:45,570
‫Claro, se você recarregar

445
00:25:45,570 --> 00:25:49,500
‫aqui, então você deverá ver este novo evento aqui, então

446
00:25:49,500 --> 00:25:52,050
‫esta nova chamada para o nosso webhook,

447
00:25:52,050 --> 00:25:54,593
‫que é claro novamente foi um sucesso.

448
00:25:55,840 --> 00:25:57,690
‫Isso é ótimo.

449
00:25:57,690 --> 00:26:00,740
‫Agora, há apenas uma última coisa que quero fazer,

450
00:26:00,740 --> 00:26:04,420
‫que é basicamente dar ao usuário algum feedback na forma

451
00:26:04,420 --> 00:26:06,980
‫de uma dessas mensagens verdes que usamos

452
00:26:06,980 --> 00:26:09,123
‫também, por exemplo, no login.

453
00:26:10,650 --> 00:26:12,930
‫No momento, nosso aplicativo não dá

454
00:26:12,930 --> 00:26:16,476
‫nenhum tipo de feedback quando um novo tour foi agendado.

455
00:26:16,476 --> 00:26:18,650
‫Agora eu quero mudar isso.

456
00:26:18,650 --> 00:26:21,900
‫No entanto, fazer isso não é muito simples, pois

457
00:26:21,900 --> 00:26:23,990
‫lembre-se de que essas

458
00:26:23,990 --> 00:26:26,750
‫mensagens são, na verdade, exibidas por JavaScript.

459
00:26:26,750 --> 00:26:30,280
‫Então, nos outros casos, fizemos uma chamada HTTP para nossa API.

460
00:26:30,280 --> 00:26:33,070
‫E então, quando isso foi feito, usamos JavaScript para

461
00:26:33,070 --> 00:26:34,840
‫exibir algum tipo de mensagem.

462
00:26:34,840 --> 00:26:36,970
‫Mas agora não fazemos desta forma.

463
00:26:36,970 --> 00:26:40,710
‫E assim, a mensagem já deve estar em algum lugar

464
00:26:40,710 --> 00:26:42,380
‫do HTML assim que a

465
00:26:42,380 --> 00:26:45,400
‫página carregar, para que então nosso JavaScript possa

466
00:26:45,400 --> 00:26:49,070
‫pegar essa mensagem do HTML e exibi-la bem lá em

467
00:26:49,070 --> 00:26:50,463
‫um desses banners.

468
00:26:51,610 --> 00:26:54,510
‫E assim, vou colocar esses alertas no

469
00:26:54,510 --> 00:26:58,223
‫HTML mais uma vez usando uma propriedade de dados.

470
00:26:59,450 --> 00:27:03,000
‫Vamos começar implementando esse recurso ali mesmo em

471
00:27:03,000 --> 00:27:04,363
‫nosso modelo principal.

472
00:27:06,610 --> 00:27:09,273
‫Isso está aqui em visualizações, base.

473
00:27:11,160 --> 00:27:13,630
‫Na verdade, irei adicionar essa mensagem de alerta

474
00:27:13,630 --> 00:27:15,663
‫diretamente no elemento do corpo.

475
00:27:17,110 --> 00:27:19,963
‫Aqui teremos uma propriedade de alerta de dados, que

476
00:27:21,860 --> 00:27:24,000
‫na verdade só deve ser definida

477
00:27:24,000 --> 00:27:26,563
‫se a variável de alerta estiver disponível aqui.

478
00:27:27,480 --> 00:27:31,460
‫Então, vamos usar ES6, uma string de template, e

479
00:27:31,460 --> 00:27:35,060
‫dizer se houver um alerta, então

480
00:27:35,060 --> 00:27:38,713
‫use alert aqui, e então, uma string vazia.

481
00:27:39,980 --> 00:27:43,370
‫E então, este alerta aqui será a mensagem de

482
00:27:43,370 --> 00:27:47,230
‫alerta que o JavaScript irá então pegar e exibir na página.

483
00:27:47,230 --> 00:27:50,230
‫Agora, como essa mensagem de alerta acaba realmente como uma

484
00:27:50,230 --> 00:27:52,513
‫variável de alerta aqui em nosso modelo?

485
00:27:53,360 --> 00:27:56,448
‫Bem, eu vim com uma solução que é reutilizável para

486
00:27:56,448 --> 00:27:59,250
‫que possamos usar em todo o nosso aplicativo.

487
00:27:59,250 --> 00:28:01,840
‫Ou seja, na string de consulta, adicionaremos alguma

488
00:28:01,840 --> 00:28:03,890
‫palavra-chave de alerta e então teremos

489
00:28:03,890 --> 00:28:05,820
‫um middleware, que pegará essa

490
00:28:05,820 --> 00:28:08,560
‫palavra-chave do URL e, de acordo com a

491
00:28:08,560 --> 00:28:10,910
‫palavra-chave que colocarmos lá, colocaremos uma mensagem

492
00:28:10,910 --> 00:28:15,050
‫de alerta inteira na resposta . habitantes locais.

493
00:28:15,050 --> 00:28:19,000
‫E então, lembre-se de que tudo está em resposta. locals está então disponível

494
00:28:19,000 --> 00:28:22,483
‫como uma variável em todos os nossos modelos.

495
00:28:23,450 --> 00:28:25,630
‫Então, nós realmente usamos isso antes

496
00:28:25,630 --> 00:28:27,563
‫em nosso authController, eu acredito.

497
00:28:29,480 --> 00:28:32,567
‫Muito rapidamente, deixe-me mostrar isso a você.

498
00:28:33,530 --> 00:28:37,060
‫Bem aqui, dissemos resposta. local. usuário e

499
00:28:37,060 --> 00:28:39,074
‫colocar o usuário atual lá.

500
00:28:39,074 --> 00:28:41,720
‫Então, automaticamente em todos os modelos, temos

501
00:28:41,720 --> 00:28:44,283
‫acesso a essa variável de usuário.

502
00:28:47,430 --> 00:28:50,070
‫Então, vamos agora implementar o que acabei de

503
00:28:50,070 --> 00:28:52,597
‫dizer e começar com a URL.

504
00:28:54,330 --> 00:28:57,540
‫O que vou fazer aqui é realmente adicionar essa string de consulta

505
00:28:57,540 --> 00:28:59,097
‫aqui ao URL de sucesso.

506
00:28:59,970 --> 00:29:04,573
‫Aqui, direi reserva igual de alerta.

507
00:29:05,970 --> 00:29:10,310
‫Agora eu poderia, em todos os outros URLS, também adicionar algum alerta e, em

508
00:29:10,310 --> 00:29:12,863
‫seguida, com uma palavra-chave diferente aqui, é claro.

509
00:29:14,350 --> 00:29:18,100
‫E faremos aqui apenas para esta reserva.

510
00:29:18,100 --> 00:29:21,793
‫Mas, novamente, criei uma espécie de solução reutilizável aqui.

511
00:29:23,340 --> 00:29:27,470
‫De qualquer forma, agora em nossas rotas, precisamos basicamente de um middleware,

512
00:29:27,470 --> 00:29:29,920
‫que será executado para todas as solicitações.

513
00:29:29,920 --> 00:29:32,270
‫E é esse middleware, que pegará o alerta

514
00:29:32,270 --> 00:29:35,240
‫da string de consulta e colocará uma mensagem de alerta

515
00:29:35,240 --> 00:29:37,453
‫em nossa resposta. habitantes locais.

516
00:29:41,457 --> 00:29:42,624
‫Então, roteador.

517
00:29:45,040 --> 00:29:48,233
‫use viewsController. alertas.

518
00:29:50,290 --> 00:29:52,320
‫E, portanto, esta é uma

519
00:29:52,320 --> 00:29:56,200
‫função de middleware, que basicamente será executada para cada solicitação que

520
00:29:56,200 --> 00:29:58,130
‫chega a este roteador,

521
00:29:58,130 --> 00:30:01,063
‫basicamente para todas as solicitações para nosso site.

522
00:30:02,370 --> 00:30:04,870
‫Agora, vamos realmente criar esse middleware em

523
00:30:04,870 --> 00:30:06,020
‫nosso viewsController.

524
00:30:10,460 --> 00:30:12,380
‫Então, exportações. solicitação

525
00:30:14,480 --> 00:30:17,283
‫de alertas, resposta e próximo.

526
00:30:19,650 --> 00:30:20,730
‫E assim,

527
00:30:22,760 --> 00:30:26,300
‫o alerta é pedido. inquerir. alerta.

528
00:30:26,300 --> 00:30:29,873
‫E então, vamos usar essa estruturação aqui mais uma vez.

529
00:30:32,020 --> 00:30:36,553
‫E digamos que alert é igual a reserva, então o

530
00:30:39,030 --> 00:30:42,653
‫alerta que colocamos bem aqui na string de

531
00:30:44,670 --> 00:30:46,070
‫consulta, bem,

532
00:30:46,070 --> 00:30:50,970
‫nesse caso, digamos resposta. habitantes locais. alerta se a sua

533
00:30:52,830 --> 00:30:53,780
‫reserva

534
00:30:56,910 --> 00:30:57,970
‫for bem

535
00:30:59,850 --> 00:31:01,023
‫sucedida, por favor

536
00:31:03,790 --> 00:31:06,883
‫verifique o seu email para uma confirmação.

537
00:31:10,330 --> 00:31:13,090
‫E devemos também adicionar alguma

538
00:31:13,090 --> 00:31:17,960
‫outra frase, que é esta, se a sua reserva não, selecione

539
00:31:24,070 --> 00:31:27,743
‫esta, não aparece aqui imediatamente, por favor volte

540
00:31:33,270 --> 00:31:34,523
‫mais tarde.

541
00:31:36,140 --> 00:31:37,230
‫E esta

542
00:31:37,230 --> 00:31:39,920
‫última parte é porque o Stripe diz muito

543
00:31:39,920 --> 00:31:43,620
‫especificamente em sua documentação que às vezes o webhook é chamado

544
00:31:43,620 --> 00:31:46,880
‫um pouco depois que a URL de sucesso é chamada.

545
00:31:46,880 --> 00:31:49,810
‫Nesse caso, esse URL de sucesso mostraria todos

546
00:31:49,810 --> 00:31:52,677
‫os passeios atuais, mas somente depois disso, o

547
00:31:52,677 --> 00:31:54,300
‫webhook seria chamado e

548
00:31:54,300 --> 00:31:57,270
‫o passeio seria criado em nosso banco de dados.

549
00:31:57,270 --> 00:32:00,040
‫Portanto, a nova reserva não aparecerá imediatamente

550
00:32:00,040 --> 00:32:01,953
‫na página Minhas reservas.

551
00:32:02,850 --> 00:32:06,220
‫Mas, claro, tudo ainda funcionou bem nesse caso.

552
00:32:06,220 --> 00:32:09,583
‫E então, eu simplesmente recarrego, mas mais tarde iremos consertar esse problema.

553
00:32:12,340 --> 00:32:15,080
‫Agora só precisamos chamar o próximo middleware.

554
00:32:15,080 --> 00:32:17,160
‫E é isso mesmo.

555
00:32:17,160 --> 00:32:21,390
‫Novamente, só fizemos isso aqui para alerta igual a reserva, mas agora

556
00:32:21,390 --> 00:32:24,090
‫podemos usar isso em todo o lugar

557
00:32:24,090 --> 00:32:27,070
‫em nosso site, definindo diferentes palavras-chave de alerta

558
00:32:27,070 --> 00:32:28,982
‫e strings de consulta.

559
00:32:28,982 --> 00:32:33,982
‫Com isso, colocamos essa mensagem aqui no res. habitantes locais. alerta.

560
00:32:35,600 --> 00:32:38,940
‫Mais uma vez, nosso modelo de base pegará isso

561
00:32:38,940 --> 00:32:42,320
‫e o exibirá aqui nesta propriedade de alerta de dados.

562
00:32:42,320 --> 00:32:46,440
‫E então, tudo o que resta fazer agora é ir para o nosso índice. js e leia

563
00:32:46,440 --> 00:32:49,890
‫o alerta aqui e depois exiba-o.

564
00:32:49,890 --> 00:32:52,100
‫E então, isso deve ser bastante fácil.

565
00:32:52,100 --> 00:32:56,230
‫Aqui em público, vamos realmente fazer isso direito no índice.

566
00:32:56,230 --> 00:33:00,260
‫E a primeira coisa é que realmente precisamos importar a função

567
00:33:00,260 --> 00:33:01,343
‫de alertas.

568
00:33:06,480 --> 00:33:08,160
‫Isso não é um aplicativo.

569
00:33:08,160 --> 00:33:09,343
‫Está aqui no índice.

570
00:33:10,920 --> 00:33:12,090
‫OK.

571
00:33:12,090 --> 00:33:15,883
‫E aqui embaixo, vamos basicamente ler esse alerta.

572
00:33:17,290 --> 00:33:22,133
‫Portanto, const alertMessage, digamos, é um

573
00:33:23,250 --> 00:33:25,320
‫documento. querySelector, o elemento

574
00:33:28,742 --> 00:33:31,327
‫body e dot dataset. alerta.

575
00:33:35,350 --> 00:33:37,673
‫E assim, apenas se houver um

576
00:33:39,760 --> 00:33:42,020
‫alerta, é claro, mostre o alerta

577
00:33:43,160 --> 00:33:44,250
‫com sucesso

578
00:33:45,840 --> 00:33:48,000
‫e a mensagem de alerta.

579
00:33:48,000 --> 00:33:50,640
‫E agora, uma pequena coisa que eu

580
00:33:50,640 --> 00:33:54,630
‫quero fazer é mudar um pouco a função showAlert aqui, porque

581
00:33:54,630 --> 00:33:57,210
‫na verdade temos muito texto agora.

582
00:33:57,210 --> 00:33:59,780
‫E o tempo padrão em que o alerta

583
00:33:59,780 --> 00:34:03,163
‫é mostrado não seria suficiente para realmente ler todo o texto.

584
00:34:04,210 --> 00:34:06,880
‫Então, você vê aqui que depois de cinco segundos,

585
00:34:06,880 --> 00:34:08,373
‫o alerta está oculto.

586
00:34:10,126 --> 00:34:11,760
‫Vamos permitir que o usuário

587
00:34:11,760 --> 00:34:14,253
‫especifique a quantidade de segundos que o alerta é mostrado.

588
00:34:16,810 --> 00:34:20,320
‫Faremos isso como um padrão de cinco segundos.

589
00:34:20,320 --> 00:34:24,810
‫Aqui, simplesmente calculamos o tempo vezes 1.000 para convertê-lo

590
00:34:24,810 --> 00:34:26,483
‫em milissegundos.

591
00:34:27,976 --> 00:34:30,690
‫Assim, todas as funções funcionarão em qualquer

592
00:34:30,690 --> 00:34:32,270
‫lugar em cinco segundos.

593
00:34:32,270 --> 00:34:34,790
‫Na verdade, vamos esperar sete segundos,

594
00:34:34,790 --> 00:34:36,600
‫se não especificarmos nada.

595
00:34:36,600 --> 00:34:39,980
‫Mas se quisermos, podemos substituir este sete.

596
00:34:39,980 --> 00:34:42,040
‫E então, vou colocar

597
00:34:42,040 --> 00:34:45,370
‫isso agora e colocar 20 segundos na tela.

598
00:34:45,370 --> 00:34:46,203
‫Tudo bem.

599
00:34:47,360 --> 00:34:49,240
‫Eu acho que deveria ser isso.

600
00:34:49,240 --> 00:34:51,060
‫Espero que tenha feito sentido.

601
00:34:51,060 --> 00:34:53,993
‫Vamos agora compilar rapidamente nosso pacote.

602
00:34:55,360 --> 00:35:00,343
‫Isso é npm execute build e toque em autocomplete.

603
00:35:03,480 --> 00:35:05,990
‫Isso também leva um pouco de tempo.

604
00:35:05,990 --> 00:35:07,373
‫Mas agora está feito.

605
00:35:12,030 --> 00:35:14,340
‫Vamos agora implantá-lo pela última vez, esperando

606
00:35:15,580 --> 00:35:17,083
‫que funcione de verdade.

607
00:35:18,250 --> 00:35:19,083
‫Então, git commit.

608
00:35:25,840 --> 00:35:27,513
‫Então, mensagens do Stripe.

609
00:35:29,670 --> 00:35:34,670
‫E uma última vez, git push heroku master.

610
00:35:37,451 --> 00:35:41,403
‫Agora vamos testá-lo comprando mais um tour aqui.

611
00:35:42,830 --> 00:35:44,963
‫Vamos pegar o City Wanderer desta vez.

612
00:35:46,490 --> 00:35:49,683
‫Oh, acabei de ver que já existe uma mensagem aqui.

613
00:35:50,810 --> 00:35:51,783
‫Isso não é bom.

614
00:35:54,530 --> 00:35:58,500
‫E você vê que ele desapareceu após 20 segundos.

615
00:35:58,500 --> 00:36:00,240
‫Então, parece que agora, por

616
00:36:00,240 --> 00:36:02,993
‫padrão, ele sempre colocará essa classe de alerta aqui.

617
00:36:06,028 --> 00:36:06,861
‫(risos)

618
00:36:06,861 --> 00:36:07,694
‫Sim.

619
00:36:07,694 --> 00:36:09,990
‫Isso porque aqui deve ser alertMessage e

620
00:36:09,990 --> 00:36:11,063
‫não apenas alert.

621
00:36:12,810 --> 00:36:16,800
‫De qualquer forma, vamos agora apenas testar se a

622
00:36:16,800 --> 00:36:20,433
‫mensagem realmente está correta quando reservamos o passeio.

623
00:36:24,410 --> 00:36:25,243
‫OK.

624
00:36:32,470 --> 00:36:34,880
‫Agora vamos esperar.

625
00:36:34,880 --> 00:36:36,330
‫Aqui vamos nós.

626
00:36:36,330 --> 00:36:39,163
‫Na verdade, esta é a nossa mensagem.

627
00:36:40,130 --> 00:36:41,460
‫Tão bonito.

628
00:36:41,460 --> 00:36:44,420
‫Além disso, nosso tour aparece aqui.

629
00:36:44,420 --> 00:36:48,510
‫E você vê que realmente fica aqui por muito tempo.

630
00:36:48,510 --> 00:36:49,853
‫Então, isso também funciona.

631
00:36:51,532 --> 00:36:52,832
‫Vamos muito rapidamente ...

632
00:36:55,840 --> 00:36:59,383
‫E primeiro, precisamos reconstruir o pacote aqui.

633
00:37:03,877 --> 00:37:07,170
‫Em seguida, podemos adicionar tudo à

634
00:37:13,580 --> 00:37:18,490
‫nossa área de teste, Correção de bug de alerta de mensagem.

635
00:37:18,490 --> 00:37:19,670
‫Então, essas

636
00:37:19,670 --> 00:37:23,500
‫são algumas (risos) mensagens que soam realmente profissionais aqui.

637
00:37:23,500 --> 00:37:26,313
‫Agora, um empurrão final para Heroku.

638
00:37:29,670 --> 00:37:32,580
‫Agora, quando carregamos nossa página, não devemos

639
00:37:32,580 --> 00:37:34,740
‫ver nenhuma mensagem de alerta.

640
00:37:34,740 --> 00:37:37,250
‫E, de fato, agora tudo está limpo.

641
00:37:37,250 --> 00:37:40,470
‫E então, agora posso dizer que pelo menos por

642
00:37:40,470 --> 00:37:42,977
‫agora, esse projeto está realmente concluído.

643
00:37:42,977 --> 00:37:46,490
‫Mais uma vez, ótimo trabalho, parabéns e muito bem

644
00:37:46,490 --> 00:37:51,100
‫por provavelmente ser uma das poucas pessoas que realmente estão fazendo todo

645
00:37:51,100 --> 00:37:54,350
‫o caminho até o final do projeto e

646
00:37:54,350 --> 00:37:58,370
‫realmente construindo este lindo site e também a API que

647
00:37:58,370 --> 00:38:01,780
‫você pode agora colocar em seu portfólio e mostre

648
00:38:01,780 --> 00:38:02,923
‫ao mundo.