1
00:00:01,210 --> 00:00:03,550
‫Narrador: Então, como dissemos na última

2
00:00:03,550 --> 00:00:07,883
‫aula, vamos agora usar nossa API para atualizar os dados do usuário.

3
00:00:09,460 --> 00:00:12,860
‫E assim, como antes, com a funcionalidade de

4
00:00:12,860 --> 00:00:16,990
‫login, agora vamos fazer uma chamada de API do front end.

5
00:00:16,990 --> 00:00:20,313
‫E então precisamos criar um novo arquivo JavaScript para isso.

6
00:00:21,370 --> 00:00:26,033
‫E a este chamarei configurações de atualização.

7
00:00:26,890 --> 00:00:29,149
‫E as configurações, porque basicamente vamos

8
00:00:29,149 --> 00:00:31,991
‫atualizar os dados que são nome e e-mail,

9
00:00:31,991 --> 00:00:35,720
‫e depois vamos atualizar também a senha desse arquivo, e

10
00:00:35,720 --> 00:00:38,768
‫então a senha, junto com os dados do usuário,

11
00:00:38,768 --> 00:00:42,080
‫chamei de configurações. Tudo bem.

12
00:00:42,080 --> 00:00:44,510
‫Isso é bem parecido com o

13
00:00:44,510 --> 00:00:46,680
‫que fizemos com o login.

14
00:00:46,680 --> 00:00:48,650
‫e mais uma vez quero deixar

15
00:00:48,650 --> 00:00:50,436
‫isso como um desafio

16
00:00:50,436 --> 00:00:53,830
‫para você, para que possa praticar o que já aprendeu.

17
00:00:53,830 --> 00:00:57,003
‫Portanto, vá em frente e crie uma função de atualização de dados aqui.

18
00:00:58,380 --> 00:01:00,800
‫Portanto, atualizar dados é o nome da função

19
00:01:00,800 --> 00:01:03,720
‫que quero que você crie aqui e, é claro,

20
00:01:03,720 --> 00:01:06,021
‫chame essa função aqui mesmo a partir

21
00:01:06,021 --> 00:01:08,250
‫do índice. jf.

22
00:01:08,250 --> 00:01:11,820
‫Portanto, você terá que exportar uma função daqui e, em

23
00:01:11,820 --> 00:01:14,230
‫seguida, importá-la aqui para o índice muito

24
00:01:14,230 --> 00:01:16,110
‫semelhante ao que fizemos

25
00:01:16,110 --> 00:01:18,020
‫antes com as outras funções.

26
00:01:18,020 --> 00:01:20,630
‫Agora, uma coisa importante a fazer antes

27
00:01:20,630 --> 00:01:22,953
‫de realmente escrever o JavaScript,

28
00:01:22,953 --> 00:01:27,320
‫é que, em nosso formulário, realmente precisamos remover essas partes aqui.

29
00:01:27,320 --> 00:01:28,969
‫Então, vamos duplicar essa linha

30
00:01:28,969 --> 00:01:31,163
‫aqui para que a deixemos como uma referência.

31
00:01:32,500 --> 00:01:36,563
‫Então vamos comentar essa parte e adicionar outro comentário aqui,

32
00:01:37,890 --> 00:01:40,003
‫sem API, e então esse

33
00:01:41,350 --> 00:01:45,310
‫aqui está com API, e então aqui não precisamos da

34
00:01:45,310 --> 00:01:48,210
‫ação e também não do método, tudo

35
00:01:48,210 --> 00:01:49,710
‫bem, porque

36
00:01:49,710 --> 00:01:52,480
‫se você deixar assim então isso pode

37
00:01:52,480 --> 00:01:55,480
‫realmente enviar os dados para este URL.

38
00:01:55,480 --> 00:01:59,063
‫E mesmo que isso não aconteça, bem, não precisamos dele aqui ainda.

39
00:02:00,020 --> 00:02:03,760
‫Tudo bem, então isso era apenas uma coisa importante.

40
00:02:03,760 --> 00:02:06,500
‫Mas agora vá em frente, pause o vídeo e

41
00:02:06,500 --> 00:02:08,533
‫tente implementar isso por conta própria.

42
00:02:12,030 --> 00:02:14,620
‫Então, tenho certeza que você acabou de fazer isso.

43
00:02:14,620 --> 00:02:18,230
‫E então aqui vai a maneira como eu fiz.

44
00:02:18,230 --> 00:02:21,103
‫Portanto, exporte os dados const_update.

45
00:02:24,040 --> 00:02:26,900
‫E esta função receberá como entrada o nome

46
00:02:26,900 --> 00:02:31,900
‫e o e-mail, então os dados que você deseja atualizar e então vamos

47
00:02:32,980 --> 00:02:34,600
‫usar o axios

48
00:02:34,600 --> 00:02:36,853
‫para criar a própria chamada API.

49
00:02:37,710 --> 00:02:40,450
‫Então, vamos importar também axios

50
00:02:45,270 --> 00:02:47,420
‫do módulo axios.

51
00:02:47,420 --> 00:02:50,630
‫Portanto, novamente, esta é a sintaxe do módulo es6 e não a sintaxe

52
00:02:50,630 --> 00:02:55,290
‫do módulo js comum que usamos no node. js, tudo bem,

53
00:02:55,290 --> 00:02:59,610
‫então não confunda esses dois, tudo bem.

54
00:02:59,610 --> 00:03:03,030
‫Assim, a solicitação HTTP que estamos fazendo com axios

55
00:03:03,030 --> 00:03:06,661
‫novamente precisará estar dentro de um bloco try catch para

56
00:03:06,661 --> 00:03:09,050
‫que, caso haja algum erro, possamos

57
00:03:09,050 --> 00:03:10,483
‫tratá-los adequadamente.

58
00:03:12,890 --> 00:03:14,653
‫Bem aqui no

59
00:03:15,660 --> 00:03:19,420
‫bloco catch e, como antes, vamos começar fazendo

60
00:03:19,420 --> 00:03:22,060
‫isso e, caso haja algo

61
00:03:22,060 --> 00:03:26,430
‫errado, queremos mostrar o alerta exatamente como fizemos no login.

62
00:03:26,430 --> 00:03:29,620
‫Então, vamos importar essa função showAlert como

63
00:03:33,670 --> 00:03:34,580
‫esta

64
00:03:35,950 --> 00:03:40,457
‫da mesma pasta ". / alertas. "

65
00:03:42,270 --> 00:03:46,333
‫Tudo bem. Ah, e também precisamos desativar o eslint novamente.

66
00:03:52,080 --> 00:03:53,513
‫E agora estamos prontos para ir.

67
00:03:54,480 --> 00:03:57,023
‫Então não adianta mostrar a função de alerta aqui.

68
00:04:00,750 --> 00:04:02,860
‫Queremos que seja um erro

69
00:04:02,860 --> 00:04:05,440
‫para que obtenha aquela bela cor vermelha

70
00:04:05,440 --> 00:04:07,670
‫e, em seguida, a mensagem que

71
00:04:07,670 --> 00:04:10,090
‫queremos exibir é um erro, então esse

72
00:04:10,090 --> 00:04:14,640
‫é o erro que é criado no bloco try quando algo dá errado.

73
00:04:14,640 --> 00:04:18,772
‫Então aí está o erro. resposta e,

74
00:04:18,772 --> 00:04:23,297
‫em seguida, dados. mensagem, tudo bem, então essa

75
00:04:23,297 --> 00:04:26,620
‫propriedade de mensagem é a que estamos definindo no

76
00:04:26,620 --> 00:04:29,740
‫servidor sempre que ocorre um erro, tudo bem.

77
00:04:29,740 --> 00:04:32,450
‫Então, vamos tentar isso exatamente como fizemos antes

78
00:04:32,450 --> 00:04:36,140
‫com a validação, então na última aula recebemos essa mensagem de

79
00:04:36,140 --> 00:04:38,560
‫erro de validação aqui, e agora neste

80
00:04:38,560 --> 00:04:39,810
‫vídeo, quando estamos

81
00:04:39,810 --> 00:04:42,044
‫cometendo o mesmo erro com a

82
00:04:42,044 --> 00:04:45,600
‫API, você então receba o alerta exatamente com esta mesma mensagem,

83
00:04:45,600 --> 00:04:48,731
‫e então será uma experiência muito melhor para o

84
00:04:48,731 --> 00:04:52,423
‫usuário, porque não estamos saindo daquela página em que estávamos, certo.

85
00:04:54,320 --> 00:04:57,693
‫De qualquer forma, vamos agora realmente fazer essa solicitação HTTP.

86
00:04:58,910 --> 00:05:01,603
‫E salve essa resposta de

87
00:05:02,451 --> 00:05:05,750
‫interloop, e como você já sabe, precisamos

88
00:05:05,750 --> 00:05:09,130
‫aguardar a promessa vinda dessa solicitação de axios

89
00:05:09,130 --> 00:05:14,130
‫e isso está marcado como assíncrono e agora aqui as opções.

90
00:05:16,540 --> 00:05:21,540
‫Então o método é um patch, ok?

91
00:05:21,560 --> 00:05:23,700
‫E você poderia usar isso

92
00:05:23,700 --> 00:05:26,660
‫aqui em letras minúsculas, mas eu prefiro sempre escrever

93
00:05:26,660 --> 00:05:30,023
‫os métodos HTTP em letras maiúsculas assim e agora vamos

94
00:05:30,023 --> 00:05:33,023
‫postar e ver a URL que iremos acessar agora.

95
00:05:34,210 --> 00:05:37,087
‫Por alguma razão, isso parece um pouco estranho, é muito grande ..

96
00:05:40,050 --> 00:05:41,050
‫mas não importa.

97
00:05:41,050 --> 00:05:45,270
‫Eu só quero selecionar o URL que iremos acessar aqui.

98
00:05:45,270 --> 00:05:47,470
‫so que fica aqui

99
00:05:47,470 --> 00:05:51,091
‫nos usuarios e atualiza o usuario atual, ok.

100
00:05:51,091 --> 00:05:52,295
‫E assim

101
00:05:52,295 --> 00:05:57,090
‫este recebe como corpo apenas os dados que queremos atualizar.

102
00:05:57,090 --> 00:05:59,790
‫Nesse caso, é o nome e a função,

103
00:05:59,790 --> 00:06:01,070
‫mas é claro

104
00:06:01,070 --> 00:06:03,790
‫que não vamos permitir que o usuário atualize a

105
00:06:03,790 --> 00:06:07,420
‫função e acho que acabamos de fazer isso aqui para mostrar

106
00:06:07,420 --> 00:06:09,866
‫o exemplo de que este não é

107
00:06:09,866 --> 00:06:11,550
‫permitido, certo, e então o

108
00:06:11,550 --> 00:06:14,710
‫que estamos atualizando é claro o nome e o e-mail.

109
00:06:14,710 --> 00:06:17,910
‫O importante aqui é que para esta rota, não precisamos

110
00:06:17,910 --> 00:06:20,650
‫especificar o ID do usuário, pois temos que

111
00:06:20,650 --> 00:06:22,763
‫fazer isso aqui em Atualizar usuário.

112
00:06:23,920 --> 00:06:25,870
‫Portanto, este aqui é o primeiro que criamos.

113
00:06:25,870 --> 00:06:30,010
‫E aqui, precisávamos passar o ID como um parâmetro de URL, mas é

114
00:06:30,010 --> 00:06:32,460
‫claro, ao atualizar o usuário atual, obtemos

115
00:06:32,460 --> 00:06:37,050
‫esse ID de usuário na solicitação. usuário como sempre.

116
00:06:37,050 --> 00:06:38,293
‫Lembre-se disso?

117
00:06:39,396 --> 00:06:41,713
‫De qualquer forma, vamos agora copiar isso aqui.

118
00:06:46,800 --> 00:06:48,593
‫Em seguida, especifique o URL.

119
00:06:50,610 --> 00:06:55,610
‫Ok, e aqui, como sempre, o host local e, claro,

120
00:06:56,120 --> 00:06:58,460
‫quando implementarmos isso,

121
00:06:58,460 --> 00:07:01,653
‫iremos meio que alterar isso aqui.

122
00:07:03,790 --> 00:07:06,540
‫Mas, por enquanto, é claro que estamos apenas trabalhando localmente aqui.

123
00:07:07,704 --> 00:07:09,104
‫Portanto, é esse o único a ser usado.

124
00:07:09,970 --> 00:07:12,057
‫Em seguida, especificamos os dados

125
00:07:12,057 --> 00:07:13,890
‫e, portanto, este será

126
00:07:13,890 --> 00:07:16,800
‫o corpo que será enviado junto com a

127
00:07:16,800 --> 00:07:19,400
‫solicitação e, portanto, o nome será simplesmente

128
00:07:19,400 --> 00:07:23,423
‫o nome que vem e, em seguida, é claro, o e-mail.

129
00:07:24,930 --> 00:07:27,323
‫Tudo bem, isso é tudo

130
00:07:29,240 --> 00:07:32,920
‫pedido, e agora vamos testar se realmente obtemos nosso

131
00:07:36,160 --> 00:07:40,993
‫sucesso de volta. dados. status, se

132
00:07:44,470 --> 00:07:46,140
‫for igual a sucesso,

133
00:07:46,140 --> 00:07:50,910
‫e mais uma vez este o status que encontramos em todas as

134
00:07:50,910 --> 00:07:54,520
‫nossas respostas, lembre-se, e se isso foi bem-sucedido, então

135
00:07:54,520 --> 00:07:56,750
‫queremos mostrar um alerta de

136
00:07:59,770 --> 00:08:04,400
‫sucesso dizendo, "Dados atualizados com sucesso. "Salve, e acho

137
00:08:07,650 --> 00:08:09,170
‫que

138
00:08:09,170 --> 00:08:14,170
‫deve ser para esta função, tudo bem.

139
00:08:14,620 --> 00:08:17,293
‫Agora, tudo o que precisamos fazer é usá-lo aqui.

140
00:08:18,220 --> 00:08:20,373
‫Portanto, primeiro, importarei uma

141
00:08:25,493 --> 00:08:26,493
‫função,

142
00:08:29,050 --> 00:08:32,360
‫"updateData" de ". / update settings "e

143
00:08:32,360 --> 00:08:34,623
‫assim podemos soltar o" js "lá.

144
00:08:36,340 --> 00:08:39,933
‫Em seguida, vamos selecionar o formulário na página.

145
00:08:41,860 --> 00:08:46,860
‫Portanto, use um formulário de dados igual ao do documento. querySelector e então vamos

146
00:08:50,489 --> 00:08:53,190
‫realmente dar uma olhada nisso.

147
00:08:53,190 --> 00:08:55,410
‫Então está aqui na conta e este

148
00:08:58,150 --> 00:09:01,893
‫formulário tem um nome de classe de dados do usuário do formulário.

149
00:09:03,630 --> 00:09:07,920
‫Então, vamos pegar isso e colocar aqui.

150
00:09:07,920 --> 00:09:11,670
‫Ok, agora faremos algo muito semelhante a este

151
00:09:11,670 --> 00:09:12,703
‫login.

152
00:09:14,480 --> 00:09:19,089
‫Portanto, se houver um formulário de dados do usuário, bem, então, vamos

153
00:09:19,089 --> 00:09:22,203
‫adicionar um ouvinte de evento a ele.

154
00:09:24,410 --> 00:09:27,980
‫Portanto, adicioneEventListener no caso de enviar e obter

155
00:09:33,640 --> 00:09:35,660
‫acesso ao evento aqui e

156
00:09:37,060 --> 00:09:38,880
‫evitaremos o padrão,

157
00:09:38,880 --> 00:09:42,110
‫portanto, evitaremos que o formulário seja enviado.

158
00:09:42,110 --> 00:09:45,810
‫Com este pedaço de código, então, vamos pegar o e-mail

159
00:09:45,810 --> 00:09:48,363
‫e o nome que será muito

160
00:09:48,363 --> 00:09:51,663
‫semelhante ao que realmente temos aqui, então vamos pegá-lo.

161
00:09:56,178 --> 00:09:59,777
‫Apenas para ter certeza de que eles estão realmente lá, vamos

162
00:09:59,777 --> 00:10:01,200
‫abrir novamente e,

163
00:10:02,080 --> 00:10:06,679
‫de fato, eles obterão o ID do nome e o ID do e-mail.

164
00:10:06,679 --> 00:10:09,762
‫Tudo bem, então e-mail é e-mail e nome

165
00:10:13,908 --> 00:10:16,050
‫com a ideia de nome.

166
00:10:16,050 --> 00:10:18,640
‫Ok, então tudo o que precisamos fazer é

167
00:10:18,640 --> 00:10:21,053
‫realmente chamar a função que importamos.

168
00:10:22,090 --> 00:10:27,090
‫Então, updateData com o nome e e-mail e acho

169
00:10:27,880 --> 00:10:32,530
‫que é a ordem correta, então sim.

170
00:10:32,530 --> 00:10:35,840
‫primeiro o nome e depois o e-mail, ok.

171
00:10:35,840 --> 00:10:37,480
‫E, nos bastidores, nosso

172
00:10:39,060 --> 00:10:41,310
‫pacote ainda deve empacotar todos esses arquivos

173
00:10:41,310 --> 00:10:43,880
‫juntos a cada salvamento, então, se salvarmos isso,

174
00:10:43,880 --> 00:10:45,846
‫você verá que ele foi

175
00:10:45,846 --> 00:10:48,883
‫atualizado agora aqui e, portanto, devemos estar prontos para continuar.

176
00:10:51,580 --> 00:10:55,393
‫Então, vamos voltar à nossa página inicial aqui.

177
00:10:56,790 --> 00:10:59,723
‫Tudo bem. E vamos tentar atualizar nossos dados.

178
00:11:01,300 --> 00:11:03,515
‫E o que vou fazer

179
00:11:03,515 --> 00:11:07,570
‫é basicamente voltar aos dados originais, removendo o nome do meio

180
00:11:07,570 --> 00:11:10,580
‫e o sobrenome daqui e agora salvar

181
00:11:11,620 --> 00:11:15,260
‫as configurações e lá vamos nós, dados atualizados com sucesso.

182
00:11:15,260 --> 00:11:17,370
‫Portanto, se recarregarmos a página, basicamente

183
00:11:17,370 --> 00:11:20,520
‫obteremos os dados de volta do servidor e,

184
00:11:20,520 --> 00:11:22,880
‫se forem iguais, significa que os

185
00:11:22,880 --> 00:11:24,763
‫dados foram realmente persistidos.

186
00:11:25,630 --> 00:11:28,680
‫Então, recarregando e vamos lá.

187
00:11:28,680 --> 00:11:31,370
‫Tão bom. Isso realmente funcionou.

188
00:11:31,370 --> 00:11:33,270
‫Vamos apenas ir para

189
00:11:33,270 --> 00:11:36,102
‫outra página aqui e voltar apenas para

190
00:11:36,102 --> 00:11:38,920
‫ter certeza, mas de fato funcionou.

191
00:11:38,920 --> 00:11:41,233
‫E agora, vamos tentar um desses erros.

192
00:11:42,920 --> 00:11:46,090
‫Tudo bem, isso deve acionar um endereço de e-mail

193
00:11:47,540 --> 00:11:50,190
‫errado e parece muito melhor, certo, nos dá

194
00:11:50,190 --> 00:11:51,960
‫essa mensagem de erro, que

195
00:11:51,960 --> 00:11:54,634
‫poderíamos, é claro, formatar um pouco melhor para

196
00:11:54,634 --> 00:11:56,203
‫torná-la mais bonita.

197
00:11:58,140 --> 00:12:00,730
‫Mas acho que está perfeitamente bem

198
00:12:00,730 --> 00:12:03,080
‫para este pequeno aplicativo.

199
00:12:03,080 --> 00:12:04,760
‫E poderíamos fazer todo tipo

200
00:12:04,760 --> 00:12:08,600
‫de coisa, como marcar este campo aqui em vermelho ou algo assim.

201
00:12:08,600 --> 00:12:10,830
‫Mas, para esses tipos de coisas,

202
00:12:10,830 --> 00:12:15,020
‫provavelmente seria melhor usar uma estrutura de front-end totalmente desenvolvida, como

203
00:12:15,020 --> 00:12:16,791
‫React ou View.

204
00:12:16,791 --> 00:12:20,310
‫De qualquer forma, este formulário agora está funcionando aqui, exceto

205
00:12:20,310 --> 00:12:22,480
‫a imagem, o que faremos novamente na

206
00:12:22,480 --> 00:12:24,610
‫próxima seção, então tudo o

207
00:12:24,610 --> 00:12:29,233
‫que falta fazer agora é atualizar a senha para que faremos no próximo vídeo.