‫Instructor: Refactoricemos ahora por completo nuestra aplicación
‫que tenemos hasta ahora, y creemos
‫muchos archivos nuevos y
‫una estructura de archivos completamente nueva.
‫Así que recuerde del último
‫video que queríamos separar nuestros enrutadores en
‫diferentes archivos.
‫Y ese será el primer paso que haremos aquí.
‫Así que voy a crear una nueva carpeta
‫llamada Rutas ahora, y luego tendré una carpeta para las rutas turísticas. js, y luego las rutas del usuario. js también.
‫De acuerdo, y esta será la primera vez que realmente
‫trabajaremos con diferentes módulos, de acuerdo,
‫y realmente los usaremos de una manera muy significativa.
‫Entonces, comencemos con el enrutador de gira.
‫Cópielo aquí, luego tome este enrutador
‫turístico aquí y colóquelo aquí.
‫Entonces, lo siguiente que necesitamos realmente es Express aquí, porque estamos usando
‫esa variable,
‫por lo que necesitamos importar el módulo Express.
‫Así
‫que exprese, requiera expreso.
‫De acuerdo, es una
‫especie de convención simplemente llamar a este enrutador, y no tourRouter.
‫Entonces, enrutador, y ahora exportaremos el enrutador y luego lo importaremos a nuestra aplicación
‫principal, ¿de acuerdo?
‫Entonces, ¿recuerdas cómo lo hacemos cuando solo
‫tenemos una cosa para exportar?
‫Bueno, usamos module. exportaciones, y luego
‫coloque el enrutador allí.
‫Guárdelo y, por supuesto,
‫todavía recibimos algunos errores, pero eso se debe a que el
‫enrutador de recorrido no está definido en nuestro archivo de aplicación principal.
‫Bien, también lo que
‫no está definido en este archivo son todas estas funciones aquí.
‫Bien, obtengámoslos rápidamente y pongámoslos en
‫el archivo del enrutador.
‫Al menos por ahora, luego crearemos un
‫nuevo archivo para eso también.
‫Entonces comienza aquí.
‫Cuidado, no copiar todo.
‫Sí, así como así.
‫Y de hecho, los pondré antes de las rutas.
‫Dale una oportunidad.
‫Y eso debería funcionar ahora.
‫Y ahora haz lo mismo para el usuario.
‫Así que consigue el enrutador.
‫Y no se preocupe por todos estos errores que estamos recibiendo.
‫Nuevamente, eso es solo
‫porque nos faltan algunas variables en algunos lugares.
‫Entonces, nuevamente, expresamos aquí, luego llamamos a
‫esto aquí simplemente
‫enrutador, y luego lo exportamos.
‫De acuerdo, y ahora también estoy recibiendo a los controladores.
‫Bien, podemos deshacernos de estos controladores de ruta ahora.
‫De acuerdo, y en realidad este aquí falta en nuestras
‫rutas de viaje, por lo que este fragmento de código en
‫el que realmente leemos los recorridos desde
‫el archivo JSON.
‫Así que pon eso en la parte superior aquí.
‫Y ahora, finalmente, necesitamos importar el enrutador
‫de recorrido y el enrutador
‫de usuario para que estas rutas continúen funcionando.
‫Está bien, pero eso debería ser bastante fácil, así que hagámoslo.
‫Entonces, con el enrutador
‫de recorrido, está en require, routes /
‫tourRoutes.
‫Está bien, y no necesitamos el
‫JS, y luego lo mismo para el userRouter.
‫Entonces tourRoutes en realidad está aquí, el userRoutes.
‫Ahora puede que te preguntes por qué llamé
‫a las variables userRoute, pero luego el archivo es userRoutes, y
‫bueno, eso es porque esta carpeta
‫aquí se llama rutas, y ahí
‫tenemos las tourRoutes y userRoutes.
‫De acuerdo, pero lo que realmente exportamos
‫de ese archivo es simplemente el enrutador, ¿de acuerdo?
‫Pero creo que tiene más sentido llamar
‫a esta carpeta aquí Rutas.
‫Bien, y por
‫eso tenemos esta pequeña diferencia entre rutas y enrutador.
‫Ahora todavía recibimos algún error aquí, por lo
‫que fs no está definido, así que tomemos
‫eso, y en realidad no lo
‫necesitamos aquí, así que pongámoslo en las rutas turísticas aquí.
‫Recibimos otro error.
‫Y esta vez, porque esta carpeta aquí ahora no está definida, porque nuestro nombre de
‫directorio es ahora las rutas.
‫Así que tenemos que salir de eso.
‫Así que suba una carpeta y, luego, entre
‫en dev-data, data y tour-simple.
‫Ahora no se preocupe por recibir todos estos errores.
‫Eso es algo normal cuando estamos haciendo toda esta refactorización
‫porque estamos cambiando cosas por todas
‫partes, por lo que es normal que las cosas se rompan.
‫De todos modos, ahora ha vuelto
‫a funcionar, por lo que ahora estamos en
‫el lugar donde podemos volver a probar nuestras rutas aquí.
‫Y de hecho, funciona.
‫Lo mismo para los usuarios, supongamos.
‫Y entonces todo es correcto.
‫Así que ahora tenemos nuestros enrutadores,
‫cada uno en un archivo diferente, y podemos
‫decir que cada uno de ellos es una pequeña sub-aplicación.
‫Así que una aplicación de viaje y una aplicación de usuario.
‫Y luego juntamos todo en nuestro
‫archivo de aplicación global importando estos enrutadores y
‫luego montando los enrutadores en las dos rutas
‫diferentes que hemos implementado
‫actualmente, ¿de acuerdo?
‫Nuevamente, aquí es donde montamos nuestros enrutadores.
‫Y sé que este concepto puede ser
‫un poco difícil de comprender, pero no se preocupe
‫por eso.
‫Cuanto más tiempo sigas trabajando en este proyecto
‫y más código
‫sigas escribiendo, más claro se volverá todo automáticamente.
‫Por ahora, lo más importante
‫a tener en cuenta es que creamos estos enrutadores diferentes para
‫cada uno de los recursos para tener una
‫buena separación de preocupaciones entre estos recursos.
‫Básicamente, crear una pequeña aplicación para
‫cada uno de ellos y luego juntar todo en
‫un archivo de aplicación principal, que por supuesto es este.
‫Entonces esta aplicación. js que tenemos aquí se usa principalmente para
‫declaraciones de middleware.
‫Entonces tenemos todo
‫nuestro middleware que queremos aplicar a todas las rutas.
‫Entonces, en este caso, tenemos estos cuatro middlewares aquí.
‫Entonces uno, dos, tres, cuatro.
‫Estos middlewares, queremos aplicarlos para todas
‫las rutas
‫y luego para esta ruta, queremos aplicar el
‫middleware tourRouter, y para
‫esta ruta, queremos aplicar el middleware userRouter.
‫De acuerdo, nuevamente, estos dos enrutadores
‫son en realidad middleware, por lo que podemos usar la aplicación. utilizar para montarlos.
‫Bien, y dicho esto, vayamos un paso más
‫allá y eliminemos estos controladores
‫de ruta
‫del archivo de rutas.
‫Bien, entonces creemos de nuevo una nueva carpeta aquí, y esta
‫se llamará controladores, ¿de acuerdo?
‫Así que los he estado llamando controladores de ruta, por
‫lo que tendría sentido crear una carpeta de controladores.
‫Pero más adelante en este curso, comenzaremos
‫a usar una arquitectura de software llamada Model View Controller,
‫y en
‫esa arquitectura, estas funciones de controlador
‫aquí en realidad se llaman controladores.
‫Y es por eso que voy a llamar a la carpeta,
‫y también a los archivos allí, controladores.
‫Así que ahora creemos el tourController. js y
‫userController. js.
‫De acuerdo, y esto tendrá un poco más de
‫sentido una vez
‫que lleguemos a la parte del curso en la que
‫realmente hablamos sobre el patrón MVC o Model View Controller.
‫Muy bien, ahora tomemos este código y
‫coloquemos estos controladores en
‫la carpeta del controlador, o en el archivo en realidad.
‫Entonces todo este código.
‫Es el TourController, sí, ese es el indicado.
‫Además, necesitamos este
‫módulo FS aquí, obviamente en la parte superior.
‫Y aquí vamos.
‫Ahora, queremos exportar todas estas funciones desde este
‫módulo, entonces, ¿cómo lo hacemos?
‫Bueno, en este caso no solo tenemos una exportación,
‫por lo que no usaremos el módulo. exportar, pero en su lugar colocaremos
‫todas estas funciones en el objeto de exportación,
‫¿de acuerdo?
‫Permítanme seleccionar todas
‫estas consts para poder
‫reemplazarlas todas al mismo tiempo.
‫Entonces exporta. deleteTour y. updateTour, createTour, getTour y
‫getAllTours.
‫Bien, entonces eso exporta todo de este archivo.
‫Y ahora,
‫vayamos a tourRoutes y simplemente importémoslos.
‫Entonces const, tourController, equals requieren.
‫Bien, ahora estamos en la carpeta de rutas aquí, ¿verdad?
‫Así que tenemos que subir un nivel y
‫luego ir a los controladores y luego
‫al tourController. js.
‫Está bien, esto no es correcto y está bien.
‫Ahora, recuerde eso
‫cuando exportamos datos de un archivo usando el objeto de exportación.
‫Así como lo hicimos aquí.
‫Cuando luego importamos todo en un objeto,
‫todos los datos que estaban
‫en las exportaciones ahora estarán en tourController.
‫Y así tendremos tourController. getAllTours. createTours. getTour, y realmente, todos
‫estos, ¿de acuerdo?
‫Entonces este objeto aquí será el equivalente a
‫las exportaciones que tenemos aquí.
‫¿Recuérdalo?
‫Entonces, es realmente simple.
‫Todo lo que tengo que hacer ahora es
‫crear tourController. , y eso es.
‫Ahora también podría haber
‫usado la estructuración, que también les mostré antes.
‫Entonces, solo para demostrar, podría haberlo usado
‫así, y luego haber especificado exactamente los mismos
‫nombres que tenemos aquí.
‫Así que getAllTours, y luego createTour,
‫y todos estos, y
‫luego podría haberlos usado directamente aquí sin tener que escribir tourController y dot.
‫Está bien, pero en realidad me gusta así, y no veo ningún
‫problema en tenerlo así.
‫Por lo tanto, hace que sea muy visible
‫que todas estas funciones
‫aquí realmente provienen de este módulo tourController.
‫Bien, lo guardé ahora, y debería
‫seguir funcionando, así que probemos eso, y sí, lo hace.
‫Entonces, eso está funcionando ahora.
‫De hecho, vamos a cerrarlo, y ahora lo mismo, ¿dónde está?
‫Ah, aquí.
‫Ahora lo mismo por supuesto con estas funciones.
‫Ponlos aquí y luego exporta todos estos
‫tipos.
‫Entonces exporta.
‫Sí, eso es correcto.
‫Ahora aquí, acabamos de importar el módulo, y al igual que antes,
‫necesitamos subir un nivel.
‫Entramos en controladores y userController.
‫Ahora, finalmente, solo agrega eso aquí.
‫Salvarlo y probarlo también para este tipo.
‫Y de hecho, funciona.
‫Así que todo lo que hicimos aquí fue correcto.
‫Así que ahora estamos empezando a tener un montón de archivos, por
‫lo que es importante
‫familiarizarse realmente, dónde se encuentran exactamente todas las
‫diferentes partes de la aplicación, ¿de acuerdo?
‫Entonces, solo para recapitular, el flujo es así.
‫Comenzamos a recibir la solicitud en la aplicación. js archivo, ¿verdad?
‫Entonces, dependiendo de la ruta, ingresará a uno de los enrutadores,
‫por lo que digamos el enrutador de recorrido, y
‫luego, dependiendo, nuevamente, de esa ruta
‫y de la
‫solicitud, ejecutará uno de estos controladores aquí, por lo
‫que estos están en los archivos tourController.
‫Y ahí es donde finalmente se envía la respuesta
‫y finaliza el ciclo de solicitud-respuesta.
‫Bien, ahora tenemos tres archivos, en lugar de
‫tener todo en un solo archivo.
‫Muy bien, pero ese todavía no es el final de la
‫historia, porque estoy agregando un paso más aquí.
‫Entonces, lo que voy a hacer es crear un servidor. js archivo también.
‫Entonces servidor. js.
‫¿Y por qué estoy haciendo eso?
‫Bueno, simplemente porque es una buena práctica tener
‫todo lo relacionado
‫con Express en un archivo y luego todo
‫lo relacionado con el servidor en otro archivo principal.
‫Entonces, comenzando ahora, servidor. js será en realidad nuestro archivo de inicio donde
‫todo comienza, y está ahí cuando escuchamos
‫a nuestro servidor.
‫Así que sigamos adelante y copiemos,
‫o cortemos, esta parte desde aquí, y muévala al servidor.
‫Ahora, por supuesto, este módulo
‫aquí no conoce la aplicación, por lo que debemos importarla.
‫Y para importarlo, primero debemos exportarlo.
‫Entonces usamos module. exportaciones, y exportamos nuestra aplicación desde
‫este archivo.
‫Bien, y ahora tenemos todo lo
‫que es básicamente
‫la configuración de la aplicación en un archivo independiente.
‫Bien, de vuelta en el servidor, ahora importémoslo.
‫Requerir, y dado que es nuestro propio
‫módulo, necesitamos usar esto. / para
‫decir que estamos en la carpeta
‫actual, y aquí está simplemente aplicación.
‫Tan simple como eso.
‫Y más adelante tendremos otras cosas en este
‫archivo que no están relacionadas con Express, pero que
‫aún están relacionadas con nuestra aplicación.
‫Así que cosas como configuraciones de bases
‫de datos, o algunas cosas de manejo de errores, o variables
‫de entorno, todas esas cosas vivirán en este servidor. js, que es nuestro
‫punto de entrada, ¿de acuerdo?
‫Así que ahora terminemos el proceso que tenemos aquí, porque ahora ya
‫no ejecutamos la aplicación nodemon. js, pero
‫en su lugar, necesitamos ejecutar server. js.
‫De acuerdo, y ya que estamos haciendo eso, permítanme
‫crear un script npm para eso.
‫Cerrando a ese tipo muy rápido.
‫Y entonces déjeme
‫agregar aquí, npm start, nodemon server. js.
‫Porque de esta manera, ya no
‫tengo que saber realmente cuál es el archivo que realmente quiero ejecutar.
‫Así que todo lo que tengo
‫que escribir es npm start, y no hay duda de que funcionará.
‫De lo contrario, podría
‫tener que pensar, hm, ¿es una aplicación? js o servidor. js, ¿o qué?
‫¿Qué tenemos para empezar aquí?
‫Pero así, no tengo que pensar, todo lo que tengo que hacer
‫es iniciar npm, y va a comenzar.
‫Bien, así como así,
‫y aquí volvemos a ejecutar nuestra aplicación.
‫Cierre a ese tipo y, por cierto, esto funciona, incluso
‫sin tener nodemon instalado como nuestra
‫dependencia de desarrollo,
‫porque tengo nodemon instalado globalmente.
‫Así que hicimos eso en la primera sección y, con suerte,
‫tú también lo hiciste allí.
‫De lo contrario, continúe y
‫en otra
‫pestaña haga npm install nodemon,
‫así que si por alguna razón omitió esa
‫sección, escriba npm install nodemon, y luego puede instalarlo globalmente
‫así, o puede instalarlo como un
‫desarrollador dependencia, así, ¿de acuerdo?
‫Así que asegúrese de tener instalado nodemon, sin importar si es globalmente
‫o como una dependencia de desarrollo, está
‫bien, para que esto funcione.
‫Así que el control final, solo
‫para estar seguro, y quiero este, y sí, de hecho.
‫Tenemos nuestra aplicación correctamente refactorizada.
‫Entonces, estos fueron muchos cambios en
‫un solo video, así que después de terminar este,
‫continúe y analice todo lo que
‫hicimos y realmente intente rastrear la ruta que hará
‫una solicitud dentro
‫de nuestra aplicación de principio a fin.
‫De esta manera, realmente tendrá
‫una idea de cómo funciona todo aquí.
‫Y te veré después de hacer eso en el siguiente video.