‫Narrador: Então, como dissemos na última
‫aula, vamos agora usar nossa API para atualizar os dados do usuário.
‫E assim, como antes, com a funcionalidade de
‫login, agora vamos fazer uma chamada de API do front end.
‫E então precisamos criar um novo arquivo JavaScript para isso.
‫E a este chamarei configurações de atualização.
‫E as configurações, porque basicamente vamos
‫atualizar os dados que são nome e e-mail,
‫e depois vamos atualizar também a senha desse arquivo, e
‫então a senha, junto com os dados do usuário,
‫chamei de configurações. Tudo bem.
‫Isso é bem parecido com o
‫que fizemos com o login.
‫e mais uma vez quero deixar
‫isso como um desafio
‫para você, para que possa praticar o que já aprendeu.
‫Portanto, vá em frente e crie uma função de atualização de dados aqui.
‫Portanto, atualizar dados é o nome da função
‫que quero que você crie aqui e, é claro,
‫chame essa função aqui mesmo a partir
‫do índice. jf.
‫Portanto, você terá que exportar uma função daqui e, em
‫seguida, importá-la aqui para o índice muito
‫semelhante ao que fizemos
‫antes com as outras funções.
‫Agora, uma coisa importante a fazer antes
‫de realmente escrever o JavaScript,
‫é que, em nosso formulário, realmente precisamos remover essas partes aqui.
‫Então, vamos duplicar essa linha
‫aqui para que a deixemos como uma referência.
‫Então vamos comentar essa parte e adicionar outro comentário aqui,
‫sem API, e então esse
‫aqui está com API, e então aqui não precisamos da
‫ação e também não do método, tudo
‫bem, porque
‫se você deixar assim então isso pode
‫realmente enviar os dados para este URL.
‫E mesmo que isso não aconteça, bem, não precisamos dele aqui ainda.
‫Tudo bem, então isso era apenas uma coisa importante.
‫Mas agora vá em frente, pause o vídeo e
‫tente implementar isso por conta própria.
‫Então, tenho certeza que você acabou de fazer isso.
‫E então aqui vai a maneira como eu fiz.
‫Portanto, exporte os dados const_update.
‫E esta função receberá como entrada o nome
‫e o e-mail, então os dados que você deseja atualizar e então vamos
‫usar o axios
‫para criar a própria chamada API.
‫Então, vamos importar também axios
‫do módulo axios.
‫Portanto, novamente, esta é a sintaxe do módulo es6 e não a sintaxe
‫do módulo js comum que usamos no node. js, tudo bem,
‫então não confunda esses dois, tudo bem.
‫Assim, a solicitação HTTP que estamos fazendo com axios
‫novamente precisará estar dentro de um bloco try catch para
‫que, caso haja algum erro, possamos
‫tratá-los adequadamente.
‫Bem aqui no
‫bloco catch e, como antes, vamos começar fazendo
‫isso e, caso haja algo
‫errado, queremos mostrar o alerta exatamente como fizemos no login.
‫Então, vamos importar essa função showAlert como
‫esta
‫da mesma pasta ". / alertas. "
‫Tudo bem. Ah, e também precisamos desativar o eslint novamente.
‫E agora estamos prontos para ir.
‫Então não adianta mostrar a função de alerta aqui.
‫Queremos que seja um erro
‫para que obtenha aquela bela cor vermelha
‫e, em seguida, a mensagem que
‫queremos exibir é um erro, então esse
‫é o erro que é criado no bloco try quando algo dá errado.
‫Então aí está o erro. resposta e,
‫em seguida, dados. mensagem, tudo bem, então essa
‫propriedade de mensagem é a que estamos definindo no
‫servidor sempre que ocorre um erro, tudo bem.
‫Então, vamos tentar isso exatamente como fizemos antes
‫com a validação, então na última aula recebemos essa mensagem de
‫erro de validação aqui, e agora neste
‫vídeo, quando estamos
‫cometendo o mesmo erro com a
‫API, você então receba o alerta exatamente com esta mesma mensagem,
‫e então será uma experiência muito melhor para o
‫usuário, porque não estamos saindo daquela página em que estávamos, certo.
‫De qualquer forma, vamos agora realmente fazer essa solicitação HTTP.
‫E salve essa resposta de
‫interloop, e como você já sabe, precisamos
‫aguardar a promessa vinda dessa solicitação de axios
‫e isso está marcado como assíncrono e agora aqui as opções.
‫Então o método é um patch, ok?
‫E você poderia usar isso
‫aqui em letras minúsculas, mas eu prefiro sempre escrever
‫os métodos HTTP em letras maiúsculas assim e agora vamos
‫postar e ver a URL que iremos acessar agora.
‫Por alguma razão, isso parece um pouco estranho, é muito grande ..
‫mas não importa.
‫Eu só quero selecionar o URL que iremos acessar aqui.
‫so que fica aqui
‫nos usuarios e atualiza o usuario atual, ok.
‫E assim
‫este recebe como corpo apenas os dados que queremos atualizar.
‫Nesse caso, é o nome e a função,
‫mas é claro
‫que não vamos permitir que o usuário atualize a
‫função e acho que acabamos de fazer isso aqui para mostrar
‫o exemplo de que este não é
‫permitido, certo, e então o
‫que estamos atualizando é claro o nome e o e-mail.
‫O importante aqui é que para esta rota, não precisamos
‫especificar o ID do usuário, pois temos que
‫fazer isso aqui em Atualizar usuário.
‫Portanto, este aqui é o primeiro que criamos.
‫E aqui, precisávamos passar o ID como um parâmetro de URL, mas é
‫claro, ao atualizar o usuário atual, obtemos
‫esse ID de usuário na solicitação. usuário como sempre.
‫Lembre-se disso?
‫De qualquer forma, vamos agora copiar isso aqui.
‫Em seguida, especifique o URL.
‫Ok, e aqui, como sempre, o host local e, claro,
‫quando implementarmos isso,
‫iremos meio que alterar isso aqui.
‫Mas, por enquanto, é claro que estamos apenas trabalhando localmente aqui.
‫Portanto, é esse o único a ser usado.
‫Em seguida, especificamos os dados
‫e, portanto, este será
‫o corpo que será enviado junto com a
‫solicitação e, portanto, o nome será simplesmente
‫o nome que vem e, em seguida, é claro, o e-mail.
‫Tudo bem, isso é tudo
‫pedido, e agora vamos testar se realmente obtemos nosso
‫sucesso de volta. dados. status, se
‫for igual a sucesso,
‫e mais uma vez este o status que encontramos em todas as
‫nossas respostas, lembre-se, e se isso foi bem-sucedido, então
‫queremos mostrar um alerta de
‫sucesso dizendo, "Dados atualizados com sucesso. "Salve, e acho
‫que
‫deve ser para esta função, tudo bem.
‫Agora, tudo o que precisamos fazer é usá-lo aqui.
‫Portanto, primeiro, importarei uma
‫função,
‫"updateData" de ". / update settings "e
‫assim podemos soltar o" js "lá.
‫Em seguida, vamos selecionar o formulário na página.
‫Portanto, use um formulário de dados igual ao do documento. querySelector e então vamos
‫realmente dar uma olhada nisso.
‫Então está aqui na conta e este
‫formulário tem um nome de classe de dados do usuário do formulário.
‫Então, vamos pegar isso e colocar aqui.
‫Ok, agora faremos algo muito semelhante a este
‫login.
‫Portanto, se houver um formulário de dados do usuário, bem, então, vamos
‫adicionar um ouvinte de evento a ele.
‫Portanto, adicioneEventListener no caso de enviar e obter
‫acesso ao evento aqui e
‫evitaremos o padrão,
‫portanto, evitaremos que o formulário seja enviado.
‫Com este pedaço de código, então, vamos pegar o e-mail
‫e o nome que será muito
‫semelhante ao que realmente temos aqui, então vamos pegá-lo.
‫Apenas para ter certeza de que eles estão realmente lá, vamos
‫abrir novamente e,
‫de fato, eles obterão o ID do nome e o ID do e-mail.
‫Tudo bem, então e-mail é e-mail e nome
‫com a ideia de nome.
‫Ok, então tudo o que precisamos fazer é
‫realmente chamar a função que importamos.
‫Então, updateData com o nome e e-mail e acho
‫que é a ordem correta, então sim.
‫primeiro o nome e depois o e-mail, ok.
‫E, nos bastidores, nosso
‫pacote ainda deve empacotar todos esses arquivos
‫juntos a cada salvamento, então, se salvarmos isso,
‫você verá que ele foi
‫atualizado agora aqui e, portanto, devemos estar prontos para continuar.
‫Então, vamos voltar à nossa página inicial aqui.
‫Tudo bem. E vamos tentar atualizar nossos dados.
‫E o que vou fazer
‫é basicamente voltar aos dados originais, removendo o nome do meio
‫e o sobrenome daqui e agora salvar
‫as configurações e lá vamos nós, dados atualizados com sucesso.
‫Portanto, se recarregarmos a página, basicamente
‫obteremos os dados de volta do servidor e,
‫se forem iguais, significa que os
‫dados foram realmente persistidos.
‫Então, recarregando e vamos lá.
‫Tão bom. Isso realmente funcionou.
‫Vamos apenas ir para
‫outra página aqui e voltar apenas para
‫ter certeza, mas de fato funcionou.
‫E agora, vamos tentar um desses erros.
‫Tudo bem, isso deve acionar um endereço de e-mail
‫errado e parece muito melhor, certo, nos dá
‫essa mensagem de erro, que
‫poderíamos, é claro, formatar um pouco melhor para
‫torná-la mais bonita.
‫Mas acho que está perfeitamente bem
‫para este pequeno aplicativo.
‫E poderíamos fazer todo tipo
‫de coisa, como marcar este campo aqui em vermelho ou algo assim.
‫Mas, para esses tipos de coisas,
‫provavelmente seria melhor usar uma estrutura de front-end totalmente desenvolvida, como
‫React ou View.
‫De qualquer forma, este formulário agora está funcionando aqui, exceto
‫a imagem, o que faremos novamente na
‫próxima seção, então tudo o
‫que falta fazer agora é atualizar a senha para que faremos no próximo vídeo.