‫Instrutor: Agora vamos finalmente terminar esta
‫parte da funcionalidade de login.
‫E lembre-se de como eu disse
‫que neste vídeo eu queria implementar um
‫alerta muito bom para quando o usuário efetuar login com
‫sucesso e, para ver que vamos desconectar o
‫usuário por enquanto, removendo o cookie manualmente.
‫Vamos recarregar, e agora é claro que
‫o usuário não deve mais estar logado,
‫e de fato não está.
‫Como já sabemos, isso ocorre porque o
‫cookie não foi enviado na solicitação.
‫Portanto, o middleware registrado que criamos no último
‫vídeo não colocou
‫o objeto do usuário em resposta. moradores locais, lembra
‫disso?
‫Portanto, se não estiver lá, o manual do usuário não será
‫renderizado e, em vez disso, esta parte será renderizada
‫para que agora possamos clicar aqui em Login.
‫Então, esse alerta de que eu estava falando antes, quero
‫que apareça aqui basicamente no início e depois
‫de um segundo e
‫meio ainda queremos fazer aquele recarregamento.
‫Então, indo para a página inicial principal.
‫De qualquer forma, vamos
‫criar algumas funções para este alerta em outro arquivo separado.
‫Novo arquivo,
‫alerta. js.
‫Tudo bem, mas agora, antes de podermos realmente prosseguir,
‫precisamos pensar um
‫pouco sobre nossa arquitetura de front-end aqui.
‫Agora, este curso, é claro, não é sobre o
‫front-end, mas ainda precisamos nos preocupar um
‫pouco com isso aqui,
‫porque estamos realmente começando a
‫obter uma boa quantidade de arquivos
‫aqui, e incluindo todos eles em nossas
‫páginas não é uma boa prática.
‫Assim
‫como estamos fazendo aqui.
‫Portanto, esta não é uma boa prática.
‫Devemos ter apenas um grande arquivo JavaScript
‫que inclui todo o código.
‫Portanto, no desenvolvimento de front-end de
‫JavaScript moderno, geralmente usamos algo chamado empacotador de módulo.
‫O mais popular provavelmente ainda é o Webpack, mas
‫geralmente o Webpack nos dá muitos problemas
‫e é realmente difícil configurá-lo.
‫Então, há na verdade um novo garoto muito legal no quarteirão, por
‫assim dizer, que se chama Parcel.
‫Então, vamos dar uma olhada nisso, ver se já aparece e,
‫de fato, é esse.
‫Empacotador de aplicativos da web extremamente rápido e sem configuração.
‫Então é exatamente isso que estamos procurando.
‫Simplesmente um bundler que não requer
‫configurações complexas, porque não queremos
‫perder tempo com isso.
‫Tudo bem, então vamos instalá-lo aqui.
‫Então npm install e
‫não tenho certeza se é apenas Parcel, na verdade.
‫Então,
‫vamos voltar aqui.
‫Provavelmente é Parcel. js ou algo
‫assim, porque me lembro da última vez
‫que instalei não funcionou de imediato, então vamos verificar isso.
‫Sim, de fato, é Parcel-bundler.
‫Agora temos algum erro.
‫Ok, então esqueci de salvá-lo como uma dependência de desenvolvimento.
‫Então, na verdade, queremos isso como um save dev, ok,
‫e isso porque é uma ferramenta de desenvolvimento.
‫Ainda assim, algo deu errado.
‫Deixe-me tentar com o sudo aqui.
‫E se não funcionou no seu
‫caso também, use o sudo para obter as permissões adequadas.
‫Tudo bem, então vamos dar uma olhada em nosso pacote. json
‫e de fato aqui está, certo.
‫Agora, se você estiver
‫assistindo a este vídeo algum tempo depois de
‫eu ter gravado, eles já podem ter ido para a
‫versão número dois e, como
‫já sabemos, podem apresentar algumas mudanças importantes.
‫E assim, a partir deste ponto, se você receber algum erro
‫que não viu aqui no
‫vídeo, vá em frente e instale este pacote aqui usando
‫a versão.
‫1, ok.
‫Então,
‫basicamente, adicione um como este, ok.
‫Então, isso anuncia que você está encontrando esses erros estranhos e,
‫com sorte, também me poupa de toneladas
‫de comentários negativos ou análises negativas
‫que esperam que eu atualize todos os meus vídeos a cada duas
‫semanas apenas porque alguma ferramenta é atualizada e, claro,
‫isso não é possível.
‫Muitas vezes a solução
‫mais fácil é simplesmente você usar a
‫mesma versão que estou usando no vídeo, tudo bem.
‫De qualquer forma, agora para realmente usar o
‫Parcel, vamos adicionar alguns scripts aqui.
‫Então, estou adicionando um para assistir ou JavaScript.
‫Ok, e para isso
‫eu uso o comando Parcel watch.
‫Na verdade, isso já funcionaria bem fora da caixa, mas
‫ainda quero configurar um pouco, porque, do
‫contrário, ele vai me colocar o pacote final em
‫algumas pastas que eu não quero.
‫Portanto, vamos especificar qual pasta ele realmente deve monitorar.
‫Isso é público / JavaScript e, em seguida, índice. js, então esse é nosso ponto de entrada
‫e esse é o
‫arquivo que vamos criar em um segundo.
‫OK.
‫Então, o diretório de saída também deve
‫ser público.
‫js, ok.
‫Muitas vezes você terá
‫pastas diferentes para o desenvolvimento e para a
‫saída, mas neste caso, como é uma arquitetura muito simples,
‫colocarei o arquivo do pacote bem no mesmo
‫lugar que os arquivos de desenvolvimento.
‫Tudo bem, vamos também especificar o arquivo de
‫saída e
‫então ele deve ser empacotado. js, tudo bem.
‫Agora eu posso executar isso e então dar
‫uma olhada neste arquivo aqui e ver se algo muda
‫ou em uma das dependências
‫e sempre que
‫isso acontecer, ele agrupará todos
‫os arquivos novamente neste pacote. arquivo js, tudo bem.
‫Então vamos
‫duplicar isso, porque também queremos uma
‫versão final, digamos de produção, ok.
‫Então, neste nós vamos rodar aqueles onde
‫eles estão realmente acabados, ok.
‫Isso leva um pouco mais de tempo,
‫mas também faz um pouco mais de otimização, mas é claro
‫que não precisamos para o desenvolvimento.
‫Em desenvolvimento, como sempre, queremos apenas que funcione.
‫Então vamos executar o npm
‫run watch: js, mas antes de fazermos isso vamos criar o
‫índice. js.
‫Vamos fechar algumas dessas pastas aqui.
‫É um pouco confuso demais assim.
‫Então indexe. js e vamos apenas fazer um
‫console simples. logue aqui por enquanto.
‫Olá da Parcel, tudo
‫bem.
‫Então, vamos também para nossa base
‫aqui e, na verdade, agora comentaremos tudo isso e
‫incluiremos apenas
‫o arquivo do pacote.
‫Então, novamente, um arquivo que basicamente conterá todo o código que está
‫em todos os outros arquivos e
‫todas as suas dependências.
‫Então, vamos salvá-lo e agora vamos realmente executá-lo para ver o
‫que temos lá.
‫E, de fato, recebemos nosso novo arquivo, que é um pacote. js e já
‫tem todo esse monte de código lá,
‫ok, simplesmente para essa linha de código neste ponto.
‫De qualquer forma, vamos recarregar nossa página
‫aqui, e olá do Parcel.
‫Então funcionou, e agora vamos prosseguir e realmente
‫configurar este arquivo aqui.
‫Portanto, para evitar confusão, vamos fechar esses arquivos
‫que não precisamos mais para o
‫que estamos fazendo agora.
‫Então, isso é um monte de coisas.
‫Tudo bem, este também.
‫Então agora a ideia é basicamente esse índice. O arquivo js
‫é o nosso arquivo de entrada
‫e, portanto, neste não podemos obter dados
‫da interface do usuário e, em seguida, delegamos
‫ações para algumas funções provenientes desses outros módulos aqui, basicamente.
‫Portanto, temos agora o módulo de login,
‫temos o nosso módulo de alertas, e assim
‫como no Node. js
‫agora podemos exportar dados desses módulos.
‫Então vamos fazer isso, e o que eu quero
‫exportar é esta função aqui.
‫Agora funciona um pouco diferente do que
‫funciona com o Node. js
‫porque Node. js usa algo
‫chamado CommonJS para implementar módulos.
‫Não tenho certeza
‫se mencionei isso quando falamos
‫sobre módulos pela primeira vez, mas aqui no JavaScript front-end desde ES2015
‫ou ES6 há algo chamado módulos em JavaScript também.
‫A sintaxe é um
‫pouco diferente, mas na verdade funciona nos
‫bastidores, mas se você entender como funciona com o
‫CommonJS, então este aqui será muito semelhante.
‫Portanto, os módulos ES6 usam a sintaxe de exportação e importação.
‫Portanto, aqui tudo o que precisamos fazer é dizer
‫exportar e, em seguida, o que quisermos exportar desse
‫arquivo, e é isso.
‫Agora, esse pedaço de código aqui, vamos realmente
‫usá-lo no arquivo de índice.
‫Portanto, lembre-se de como eu disse que este arquivo
‫aqui é mais para realmente obter dados da interface do usuário
‫e, em seguida, delegar a ação.
‫Então é exatamente isso que estamos fazendo aqui, certo.
‫Então aqui temos apenas este tipo de módulo
‫que exporta a função de login.
‫Então podemos importar isso aqui e chamar o
‫login aqui mesmo no índice. js e
‫que funciona assim.
‫Portanto, importe em vez de
‫exigir o nome da variável que queremos importar.
‫Portanto, estou usando chaves aqui.
‫Portanto, é chamado de
‫login e, em seguida, do nome do arquivo.
‫Que, neste caso, mesmo diretório, faça o login.
‫Agora, vamos também desativar o eslint aqui novamente, e
‫usei essas chaves aqui, basicamente porque estamos
‫fazendo a exportação dessa forma, mas também há algo
‫semelhante ao módulo. exportação, que é
‫uma espécie de exportação padrão.
‫Portanto, nos módulos ES6, isso é realmente chamado de exportação padrão.
‫Nesse caso, não precisaríamos dessas chaves.
‫OK.
‫Agora precisamos fazer assim, porque
‫bem, esse é o nome dessa função
‫que exportamos, certo.
‫Agora, algo muito importante também neste login é
‫que usamos axios.
‫E lembre-se de como eu disse que íamos
‫instalá-lo na verdade a partir do npm como um módulo npm, certo?
‫Então, vamos fazer isso agora, e na verdade porque já
‫comentamos os axios a partir daqui.
‫Portanto, agora o login não pode usar axios.
‫Bem, porque não o incluímos mais aqui.
‫Então, vamos adicionar, abrir um novo terminal
‫e instalar axios em nosso projeto.
‫Então agora tudo o que precisamos fazer é dizer import axios
‫from axios, e é isso,
‫certo.
‫Então esse arquivo, pelo menos por enquanto, está pronto,
‫mas não vamos fechá-lo porque ainda precisaremos
‫dele muito em breve.
‫Em seguida, devemos instalar um polyfill, o que fará com
‫que alguns dos recursos mais recentes
‫do JavaScript funcionem também em navegadores mais antigos.
‫Digamos que o npm install e este
‫aqui parece um pouco estranho.
‫Então, vamos adicionar babel / polyfill,
‫assim.
‫Então aqui em
‫cima
‫faremos importação assim, certo.
‫Portanto, este aqui não o salvamos em nenhuma variável, porque isso
‫não é necessário de forma alguma.
‫Tudo o que queremos fazer é basicamente ser
‫incluído em nosso pacote final para preencher bem
‫alguns dos recursos do JavaScript.
‫Tudo bem, e é por isso também que
‫está aqui na primeira linha dessas importações.
‫De qualquer forma, agora vamos importar esta caixa de mapas também.
‫Para isso, precisamos primeiro criar
‫uma função que fará todas essas coisas aqui.
‫OK.
‫Portanto, vamos criar
‫o
‫displayMap de exportação, que terá a matriz de locais.
‫Então, isso será realmente lido no índice. arquivo js, tudo
‫bem.
‫Então, novamente, indexe. js é mais para obter
‫dados da interface do usuário, portanto, do
‫site e, em seguida, delegar algumas ações para esses outros módulos,
‫tudo bem.
‫Portanto, essas coisas aqui serão feitas dentro do índice.
‫Vamos fazer isso aqui.
‫Em seguida, importe
‫a
‫caixa de
‫mapa displayMap, tudo bem.
‫Então, vamos chamar
‫isso também com os locais.
‫Agora, lembre-se de quando realmente criamos este mapa e de
‫como ele nos perguntou se queríamos usar
‫a biblioteca mapbox no npm?
‫Então, podemos ir em frente e
‫realmente usar aquele em vez deste que estamos usando agora.
‫Bem, não está
‫aqui.
‫Sim, então este.
‫Portanto, esta aqui é a biblioteca do mapbox
‫que estamos usando no momento, mas
‫também há uma versão npm.
‫Então, não precisaríamos ter este.
‫No entanto, por algum motivo, há
‫um problema em usar essa biblioteca junto com o Parcel, ok.
‫Então, outras pessoas realmente se deparam com esse problema.
‫Portanto, não podemos usar a biblioteca mapbox npm
‫junto com o Parcel.
‫Então essa é a razão pela qual ainda estou fazendo assim.
‫OK.
‫Então, o mapbox está completo com isso.
‫Isso nós não precisamos mais, também.
‫Agora, vamos realmente nos livrar de alguns desses
‫erros que vimos aqui.
‫Bem, agora eles não
‫estão mais aqui, mas por exemplo tivemos
‫o problema que esse código aqui
‫criava alguns erros quando estávamos em páginas que não tinham esse mapa aqui, certo.
‫Porque é claro que a página de detalhes tem esse
‫mapa, esse elemento, mas esse código é executado
‫em todas as
‫outras páginas, isso criará erros lá.
‫Então, vamos consertar isso.
‫Portanto, o que estou fazendo aqui é primeiro criar
‫um elemento com isso e, em seguida, testar se ele realmente existe
‫antes de executarmos esta linha de código.
‫Portanto, criaremos alguns elementos DOM aqui.
‫E aqui
‫eu diria delegação.
‫Então, se mapbox
‫e só então para essas duas ações aqui,
‫tudo bem.
‫Aqui também é a caixa de mapas
‫e isso é muito melhor.
‫Aqui também vamos
‫colocar valores, e vou colocar
‫esses dois porque, na verdade, podemos precisar deles
‫ou na verdade vamos precisar deles para outras coisas também.
‫Assim fica um pouco mais limpo.
‫Também vamos adicionar esse listener de
‫evento aqui se esse elemento existir, certo.
‫Porque, bem, novamente, ele criará um erro se não o fizer.
‫Então, loginform, e
‫se,
‫e
‫então, vamos reutilizá-lo aqui, salve-o e agora está
‫com uma aparência melhor.
‫OK.
‫Vamos fechar este terminal.
‫Isso você deve manter agrupando nosso código sempre
‫que houver um salvamento.
‫Vamos apenas salvá-lo aqui novamente.
‫Ok, então espero que isso tenha mudado agora.
‫Então, vamos tentar isso.
‫Portanto, se você ainda conseguir fazer o login bem
‫neste ponto, isso significa que realmente funcionou.
‫Bem, talvez não.
‫Vamos tentar de novo aqui.
‫Tudo bem, então há algo errado acontecendo aqui.
‫Então, como sempre, vamos registrar este e-mail e senha
‫no console aqui.
‫Quer dizer, porque a gente já sabe
‫que na verdade essa função aqui é chamada, né.
‫Caso contrário, nem mesmo obteríamos o erro.
‫Certo, porque esse erro vem claramente de nossa API.
‫Então, tudo o que temos aqui está realmente funcionando, eu acredito.
‫Vamos dar uma olhada no console.
‫Portanto, parece que na verdade não há nome de
‫usuário e senha.
‫OK.
‫Não tenho certeza do porquê.
‫Vamos dar uma olhada se realmente conseguimos algo.
‫Então faça o login e
‫eu também irei registrá-los aqui, não
‫aqui, mas
‫aqui.
‫E então, aparentemente, o problema
‫deve ser que o nome de usuário e
‫a senha não estão realmente definidos.
‫Ah, e agora, claro, posso ver por que isso acontece.
‫Que erro estúpido.
‫Então, estamos tentando ler esses valores aqui,
‫logo no início quando a página
‫é carregada e, claro, neste ponto, esses valores não estão definidos.
‫Então, é claro, só podemos
‫defini-los aqui em nosso ouvinte de eventos, certo.
‫Então, no momento em que esta função aqui
‫é chamada bem, é claro que o e-mail e a senha
‫estão configurados, então é o momento em que podemos lê-los.
‫Então isso foi meio estúpido, mas,
‫você sabe, às vezes esse tipo de coisa acontece.
‫Agora vamos realmente copiar isso aqui.
‫Desta vez, estamos logados com sucesso, o
‫que significa que nosso código aqui ainda funciona.
‫Ótimo, e agora vamos fazer a parte final que
‫queríamos fazer nesta
‫aula, que é realmente criar esses alertas, tudo bem.
‫Então, vamos criar uma função chamada show alert e exportá-la.
‫Então no login vamos importar esta função e
‫usá-la lá.
‫Assim, showAlert e this
‫como uma entrada obterão um tipo e
‫uma mensagem, assim.
‫E esse
‫tipo é sucesso
‫ou erro,
‫ok.
‫Porque dependendo dessa entrada, teremos CSS diferente para
‫cada um desses alertas e você verá
‫isso em um segundo.
‫Então, o que vamos fazer é basicamente criar
‫alguma marcação HTML aqui e, em seguida, inseri-la em nosso HTML, então
‫é algo realmente fácil.
‫Então, uma marcação e a string de modelo
‫e agora um bom HTML.
‫Portanto, é simplesmente um div com uma classe de
‫alerta e, em
‫seguida, alerta - um modificador com nosso
‫tipo.
‫Ok, é por isso
‫que precisa ser sucesso ou erro.
‫Então, deixe-me mostrar isso rapidamente
‫em CSS, porque eu acho que é
‫realmente importante saber como tudo isso funciona junto, ok.
‫Portanto, aqui temos nossa classe de
‫alerta e, em seguida, alerta de sucesso e alerta de erro.
‫Tudo bem.
‫Como sempre, vamos desabilitar o eslint aqui, ok,
‫e se livrar disso e agora é
‫claro, aqui vai a mensagem que passamos
‫para esta função.
‫Claro que poderíamos seguir
‫em frente e usar isso em todo o
‫aplicativo, mas, neste caso, só precisamos realmente aqui para o nosso login.
‫Portanto, documente. queryselector, e agora
‫aqui nós selecionamos o elemento
‫onde queremos incluir este HTML que acabamos de criar.
‫Então, isso é realmente bem no início
‫do elemento do corpo.
‫Bem no topo da página.
‫Então, coloque
‫o corpo e, em seguida, insira o HTML adjacente, então este aqui.
‫Se você fez meu curso completo de
‫JavaScript, tudo isso aqui não será nenhuma novidade para
‫você, ok.
‫Portanto, aqui podemos especificar algumas palavras-chave e,
‫neste caso, queremos iniciar depois.
‫Basicamente, o que isso
‫significa está dentro do corpo, mas logo no início, tudo bem.
‫Então o HTML, então
‫a marcação, que realmente queremos incluir.
‫Excelente.
‫Isso criará um alerta muito simples com
‫base no tipo e método, mas agora também queremos uma
‫função para ocultar alertas.
‫Então, vamos criá-lo aqui também, exportar e provavelmente
‫nem precisaremos dele fora daqui, mas ainda
‫assim, para reutilização, é sempre uma boa ideia exportar
‫tudo isso.
‫Este não precisa aceitar nenhum argumento.
‫Agora tudo o que vamos fazer é selecionar
‫o elemento com a
‫classe alert e, depois disso, removê-lo.
‫Alerta então
‫queryselector.
‫Exatamente o mesmo nome de classe aqui.
‫Em seguida, precisamos usar um truque do
‫JavaScript em que precisamos mover um nível até o elemento
‫pai e, a partir daí, remover um elemento filho.
‫Portanto, se há um elemento, então o
‫elemento. parentElement. removeChild e,
‫em seguida, o elemento.
‫OK.
‫Então, novamente, isso deve ser apenas JavaScript básico
‫ou manipulação DOM básica.
‫Portanto, como este é um
‫curso de nó, não vou me aprofundar nisso.
‫De qualquer forma, o que quero fazer
‫aqui agora é sempre que mostrarmos
‫um alerta, primeiro ocultar todos os alertas que já existem.
‫Portanto, sempre apenas para
‫garantir que sempre execute hideAlert.
‫Por fim, também desejo ocultar todos os alertas após
‫cinco segundos.
‫Portanto, janela
‫setTimeout hideAlert após cinco
‫segundos.
‫Tudo bem, e agora vamos importar isso aqui.
‫Exibir alerta para o qual foi chamado, certo?
‫Oh showAlert, com tipo e mensagem.
‫Então mostre
‫o
‫alerta a partir daí e então ...
‫Sim, então queremos usar isso neste lugar.
‫Portanto, em vez do alerta de JavaScript,
‫queremos showAlert, tudo bem, e
‫aqui o mesmo.
‫Ainda precisamos especificar o
‫tipo aqui,
‫e isso é sucesso neste caso
‫e aqui é o erro.
‫Alcançamos o preenchimento automático.
‫Ok, assim é melhor.
‫Então, vamos testar.
‫E antes de mais nada, precisamos fazer o logout, excluindo este cookie.
‫Recarregue, faça login e
‫agora
‫estou testando primeiro com uma senha
‫errada e vamos lá.
‫E-mail ou senha incorretos bem no nosso bom alerta e você
‫viu que depois de cinco segundos ele desapareceu.
‫Claro que poderíamos ter
‫colocado alguma animação legal lá e tudo,
‫mas acho que assim já é mais do que suficiente.
‫Então vamos ver de novo rapidamente,
‫e é assim que vai ficar, mas
‫quando estiver correto, então é claro que deve ser verde.
‫Sim, logado com sucesso e vemos
‫uma recarga após um segundo e meio
‫e agora está realmente funcionando.
‫Essa é a nossa autenticação completa no front-end.
‫Deu muito trabalho, mas se você me perguntar, valeu totalmente a pena.
‫Agora, a única coisa que falta
‫é realmente fazer o logout quando clicamos neste botão aqui.
‫Então, agora não é esse
‫o caso e no próximo vídeo vamos consertar isso.