‫Instrutor: Agora vamos refatorar completamente nosso aplicativo
‫que temos até agora e criar
‫muitos arquivos novos e
‫uma estrutura de arquivos totalmente nova.
‫Portanto, lembre-se do último vídeo
‫que queríamos separar nossos roteadores em
‫arquivos diferentes.
‫E essa será a primeira etapa que faremos aqui.
‫Vou criar uma nova pasta chamada Routes
‫agora, e aí terei uma pasta para as rotas do tour. js e, em seguida, as rotas do usuário. js também.
‫Ok, esta será a primeira vez que realmente trabalharemos
‫com diferentes módulos, ok, e
‫realmente os usaremos de uma maneira muito significativa.
‫Então, vamos começar com o roteador de tour.
‫Copie-o aqui e, em seguida, pegue este roteador
‫de tour aqui e coloque-o aqui.
‫E então, em seguida, precisamos realmente Express aqui, porque estamos usando
‫essa variável
‫e, portanto, precisamos importar o módulo Express.
‫Então
‫expresse, exija express.
‫Ok, é uma espécie
‫de convenção simplesmente chamar este roteador, e não tourRouter.
‫Roteador, agora vamos exportar o roteador e depois importá-lo para nosso
‫aplicativo principal, certo?
‫Então, lembra como fazemos quando só
‫temos uma coisa para exportar?
‫Bem, usamos módulo. exportações e, em
‫seguida, coloque o roteador lá.
‫Salve-o e, claro, ainda
‫teremos alguns erros, mas isso porque o roteador do
‫tour não está definido em nosso arquivo de aplicativo principal.
‫Ok, também o que
‫não está definido neste arquivo são todas essas funções aqui.
‫Ok, vamos obtê-los rapidamente e colocá-los
‫no arquivo do roteador.
‫Pelo menos por enquanto, criaremos posteriormente um
‫novo arquivo para isso também.
‫Então, começa aqui.
‫Cuidado, não copiando tudo.
‫Sim, apenas assim.
‫E, na verdade, vou colocá-los antes das rotas.
‫Dê uma chance.
‫E isso deve funcionar agora.
‫E agora faça o mesmo para o usuário.
‫Então pegue o roteador.
‫E não se preocupe com todos esses erros que estamos recebendo.
‫Novamente, isso é apenas
‫porque algumas variáveis estão faltando em alguns lugares.
‫Então, novamente, nós expressamos aqui, chamamos isso
‫aqui de apenas roteador
‫e, em seguida, o exportamos.
‫Ok, e agora também estou recebendo os manipuladores.
‫Ok, então podemos nos livrar desses gerenciadores de rota agora.
‫Ok, e na verdade este aqui está faltando
‫em nossas rotas de passeio, então este pedaço de
‫código onde realmente lemos os passeios
‫do arquivo JSON.
‫Então coloque isso bem no topo aqui.
‫E agora, finalmente, precisamos importar o roteador
‫de tour e o roteador
‫de usuário para que essas rotas continuem funcionando.
‫Ok, mas isso deve ser bastante fácil, então vamos fazer isso.
‫Assim, com o roteador
‫de tour, é necessário, routes /
‫tourRoutes.
‫Ok, e não precisamos do
‫JS, e o mesmo para o userRouter.
‫Então tourRoutes está realmente aqui, userRoutes.
‫Agora você deve estar se perguntando por que eu
‫realmente chamei as variáveis de userRoute, mas o arquivo é userRoutes, e bem,
‫isso é porque esta pasta aqui
‫é chamada de rotas e aí temos
‫o tourRoutes e o userRoutes.
‫Ok, mas o que realmente exportamos
‫desse arquivo é simplesmente o roteador, certo?
‫Mas acredito que faz mais sentido
‫chamar essa pasta de Rotas.
‫Ok, é por isso
‫que temos essa pequena diferença entre rotas e roteador.
‫Agora ainda temos alguns erros aqui e, portanto,
‫fs não está definido, então vamos pegar isso
‫e, na verdade, não precisamos dele
‫aqui, então vamos colocá-lo nas rotas de passeio bem aqui.
‫Recebemos outro erro.
‫E desta vez, porque esta pasta aqui agora não está definida, porque nosso dirname
‫agora são as rotas.
‫Então, precisamos sair disso.
‫Suba uma pasta e, em seguida, vá para
‫dev-data, data e tour-simple.
‫Agora não se preocupe em obter todos esses erros.
‫Isso é normal quando estamos fazendo toda essa refatoração
‫porque estamos mudando coisas em
‫todos os lugares, então é normal que as coisas quebrem.
‫De qualquer forma, agora estamos
‫de volta ao trabalho, e agora estamos
‫no lugar onde podemos retestar nossas rotas aqui.
‫E, de fato, funciona.
‫O mesmo para os usuários, vamos supor.
‫E assim está tudo correto.
‫Portanto, temos nossos roteadores agora,
‫cada um em um arquivo diferente, e podemos
‫dizer que cada um deles é um pequeno subaplicativo.
‫Portanto, um aplicativo de tour e um aplicativo de usuário.
‫E então colocamos tudo junto em
‫nosso arquivo de aplicativo global importando esses
‫roteadores e, em seguida, montando os roteadores nas
‫duas rotas diferentes que
‫implementamos atualmente, certo?
‫Novamente, é aqui que montamos nossos roteadores.
‫E eu sei que esse conceito pode
‫ser um pouco difícil de entender, mas não se
‫preocupe com isso.
‫Quanto mais tempo você continuar trabalhando neste projeto e
‫quanto mais código
‫você continuar escrevendo, mais claro tudo ficará automaticamente.
‫Por enquanto, o mais importante
‫a se ter em mente é que criamos esses roteadores diferentes
‫para cada um dos recursos para ter uma
‫boa separação de interesses entre esses recursos.
‫Então, basicamente, criar um pequeno aplicativo
‫para cada um deles e, em seguida, colocar tudo
‫junto em um arquivo de aplicativo principal, que é obviamente este.
‫Então, este app. O arquivo js que temos aqui geralmente é usado principalmente
‫para declarações de middleware.
‫Portanto, temos todo
‫o nosso middleware que queremos aplicar a todas as rotas.
‫Portanto, neste caso, temos esses quatro middlewares aqui.
‫Então, um, dois, três, quatro.
‫Esses middlewares, queremos aplicá-los para todas
‫as rotas
‫e então para esta rota, queremos aplicar o
‫middleware tourRouter, e para
‫esta rota, queremos aplicar o middleware userRouter.
‫Ok, então novamente, esses dois roteadores são,
‫na verdade, middleware, e é por isso que podemos usar o app. usar para montá-los.
‫Ok, com isso dito, vamos dar um passo
‫adiante e remover esses manipuladores
‫de rota
‫do arquivo de rotas.
‫Ok, então vamos novamente criar uma nova pasta aqui, e
‫esta se chamará controladores, ok?
‫Eu os chamo de manipuladores de rota e, portanto,
‫faria sentido criar uma pasta de manipuladores.
‫Porém, posteriormente neste curso, começaremos a
‫usar uma arquitetura de software chamada Model View Controller
‫e, nessa
‫arquitetura, essas funções de manipulador aqui
‫são, na verdade, chamadas de controladores.
‫E é por isso que vou chamar a pasta e
‫também os arquivos lá de controladores.
‫Então, vamos agora criar o tourController. js e o
‫userController. js.
‫Ok, e isso fará um pouco mais
‫de sentido quando
‫chegarmos à parte do curso em que realmente falamos
‫sobre o MVC, ou padrão Model View Controller.
‫Tudo bem, então vamos agora pegar
‫este código e colocar
‫esses manipuladores na pasta do controlador, ou arquivo, na verdade.
‫Então, todo esse código.
‫É o tourController, sim, é esse.
‫Além disso, precisamos
‫deste módulo FS aqui, obviamente no topo.
‫E aqui vamos nós.
‫Agora, queremos realmente exportar todas essas funções deste
‫módulo, então como fazemos isso?
‫Bem, neste caso não temos apenas uma exportação,
‫então não vamos usar o módulo. exportar, mas, em vez disso,
‫colocaremos todas essas funções no objeto de
‫exportação, certo?
‫E então, deixe-me selecionar
‫todos esses, consts, para que eu
‫possa realmente substituí-los todos ao mesmo tempo.
‫Portanto, as exportações. deleteTour e. updateTour, createTour, getTour e
‫getAllTours.
‫Ok, então isso exporta tudo deste arquivo.
‫E agora,
‫vamos entrar nos tourRoutes e simplesmente importá-los.
‫Portanto, const, tourController, equals require.
‫Ok, agora estamos na pasta de rotas aqui, certo?
‫Portanto, precisamos subir um nível e, em
‫seguida, ir para os controladores e para
‫o tourController. js.
‫Ok, isso não está correto e tudo bem.
‫Agora, lembre-se disso
‫quando exportamos dados de um arquivo usando o objeto de exportação.
‫Assim como fizemos aqui.
‫Quando importamos tudo para um objeto,
‫todos os dados que
‫estavam nas exportações agora estarão no tourController.
‫E então teremos tourController. getAllTours. createTours. getTour, e realmente, tudo
‫isso, ok?
‫Portanto, este objeto aqui será o equivalente às
‫exportações que temos aqui.
‫Lembre-se disso?
‫E então, é muito simples.
‫Tudo o que tenho que fazer agora é
‫criar tourController. , e é isso.
‫Agora eu também poderia
‫ter usado a estruturação, que também mostrei antes.
‫Então, apenas para demonstrar, eu poderia ter usado
‫assim e, em seguida, especificado exatamente os mesmos
‫nomes que temos aqui.
‫Então getAllTours e, em seguida, createTour
‫e tudo isso, e
‫então eu poderia tê-los usado diretamente aqui, sem ter que escrever tourController e dot.
‫Ok, mas na verdade eu gosto assim, e não vejo nenhum problema
‫em ter assim.
‫Assim, fica bem visível que todas
‫essas funções aqui,
‫na verdade, vêm deste módulo tourController.
‫Ok, eu salvei agora e ele
‫deve continuar funcionando, então vamos testar isso, e sim, ele continua.
‫Então, isso está funcionando agora.
‫Vamos fechar, e agora o mesmo, onde está?
‫Ah, aqui.
‫Agora o mesmo é claro com essas funções.
‫Coloque-os aqui e depois exporte todos esses
‫caras.
‫Portanto, as exportações.
‫Sim, está correto.
‫Agora aqui, acabamos de importar o módulo e, da mesma forma que antes,
‫precisamos subir um nível.
‫Vamos para controladores e userController.
‫Agora, finalmente, basta adicionar isso aqui.
‫Salve e teste para esse cara também.
‫E, de fato, funciona.
‫Então, tudo o que fizemos aqui foi correto.
‫Portanto, estamos começando a ter vários arquivos agora, por isso é
‫importante realmente nos
‫familiarizarmos com a localização exata de todas
‫as partes diferentes do aplicativo, certo?
‫Então, apenas para recapitular, o fluxo é assim.
‫Começamos a receber a solicitação no aplicativo. arquivo js, certo?
‫Então, dependendo da rota, entrará em um dos roteadores,
‫digamos o roteador de tour, e então
‫dependendo, novamente, dessa rota e
‫da solicitação,
‫ele executará um desses controladores aqui, e então
‫estes estão em os arquivos tourController.
‫E é aí que finalmente a resposta é enviada,
‫terminando o ciclo de solicitação-resposta.
‫Ok, agora temos três arquivos, em vez de
‫ter tudo apenas em um arquivo.
‫Tudo bem, mas ainda não é o fim da história,
‫porque estou adicionando mais uma etapa aqui.
‫Então, o que vou fazer é criar um servidor. arquivo js também.
‫Então, servidor. js.
‫E por que estou fazendo isso?
‫Bem, simplesmente porque é uma boa prática ter tudo
‫o que está
‫relacionado para expressar em um arquivo e, em seguida,
‫tudo o que está relacionado ao servidor em outro arquivo principal.
‫Então, começando agora, servidor. js será, na verdade, nosso arquivo inicial, onde tudo
‫começa, e estará lá quando
‫ouvirmos nosso servidor.
‫Então, vamos realmente copiar, ou
‫cortar, esta parte daqui e movê-la para o servidor.
‫Agora, é claro, este módulo
‫aqui não sabe sobre o aplicativo e, portanto, precisamos importá-lo.
‫E para importá-lo, precisamos primeiro exportá-lo.
‫Portanto, usamos o módulo. exportamos e exportamos nosso aplicativo a partir
‫deste arquivo.
‫Ok, agora temos tudo o
‫que é basicamente
‫a configuração do aplicativo em um arquivo independente.
‫Ok, então de volta ao servidor, vamos importar isso agora.
‫Requer, e como é nosso próprio
‫módulo, precisamos usá-lo. / para
‫dizer que estamos na pasta atual
‫e aqui está ele simplesmente app.
‫Então, simples assim.
‫E mais tarde teremos outras coisas neste
‫arquivo que não estão relacionadas ao Express, mas
‫ainda relacionadas ao nosso aplicativo.
‫Então, coisas como configurações de banco
‫de dados, ou alguma coisa de tratamento de erros, ou
‫variáveis de ambiente, todas essas coisas estarão neste servidor. js, que é o
‫nosso ponto de entrada, certo?
‫Então, vamos agora terminar o processo que temos aqui, porque agora não
‫executamos mais o aplicativo nodemon. js, mas
‫em vez disso, precisamos executar o servidor. js.
‫Ok, e já que estamos fazendo isso, deixe-me criar
‫um script npm para isso.
‫Fechando aquele cara muito rápido.
‫E então, deixe-me
‫adicionar aqui, npm start, servidor nodemon. js.
‫Porque dessa forma, eu não preciso
‫mais saber qual é o arquivo que eu realmente quero executar.
‫Portanto, tudo o que tenho a
‫escrever é npm start, e não há dúvida de que vai funcionar.
‫Caso contrário, posso ter
‫que pensar, hm, é isso. js ou servidor. js, ou o quê?
‫O que temos que começar aqui?
‫Mas assim, eu não preciso pensar, tudo o que tenho que fazer
‫é o npm start, e ele vai começar.
‫Ok, então assim, e aqui
‫estamos nós de volta executando nosso aplicativo.
‫Feche aquele cara, e por falar nisso, isso funciona, mesmo sem
‫ter o nodemon instalado como nossa
‫dependência dev, porque eu
‫tenho o nodemon instalado globalmente.
‫Fizemos isso na primeira seção e, com sorte,
‫você também fez lá.
‫Se não, vá em frente
‫e em outra
‫guia faça npm install nodemon,
‫então se por algum motivo você pulou essa
‫seção, digite npm install nodemon, e então você pode instalá-lo
‫globalmente assim ou pode instalá-lo como
‫um dev dependência, assim, certo?
‫Portanto, certifique-se de ter o nodemon instalado, não importa se é
‫globalmente ou como uma dependência de desenvolvimento,
‫ok, para que isso funcione.
‫Então, cheque final, apenas para
‫ter certeza, e quero este aqui, e sim, de fato.
‫Nosso aplicativo foi refatorado corretamente.
‫Então, essas foram muitas mudanças em
‫um único vídeo, então, depois de terminar este, vá
‫em frente e analise tudo o que
‫fizemos e realmente tente traçar um caminho que uma
‫solicitação fará dentro
‫de nosso aplicativo do início ao fim.
‫Desta forma, você realmente terá
‫uma noção de como tudo aqui funciona.
‫E vejo você depois de fazer isso no próximo vídeo.