‫Instructeur : Refactorisons maintenant complètement notre application
‫que nous avons jusqu'à présent et créons
‫beaucoup de nouveaux fichiers et
‫une toute nouvelle structure de fichiers.
‫Alors rappelez-vous de la dernière vidéo
‫que nous voulions séparer nos routeurs en
‫différents fichiers.
‫Et donc ça va être la première étape que nous allons faire ici.
‫Je vais donc créer un nouveau dossier appelé
‫Routes maintenant, puis j'y aurai un dossier pour les itinéraires de visite. js, puis les routes utilisateur. js aussi.
‫D'accord, et ce sera donc la première fois que nous
‫allons vraiment travailler avec différents
‫modules, d'accord, et les utiliser de manière très significative.
‫Commençons donc par le routeur de tournée.
‫Copiez-le ici, puis prenez ce routeur de
‫tournée ici et placez-le ici.
‫Et donc, ensuite, nous avons besoin d'Express ici, car nous utilisons
‫cette variable,
‫et nous devons donc importer le module Express.
‫Alors
‫exprimez, exigez express.
‫D'accord, c'est une sorte
‫de convention d'appeler simplement ce routeur, et non tourRouter.
‫Alors routeur, et maintenant nous allons exporter le routeur, puis l'importer dans notre application
‫principale, d'accord ?
‫Alors, rappelez-vous comment nous procédons lorsque nous n'avons
‫qu'une seule chose à exporter ?
‫Eh bien, nous utilisons module. exportations, puis
‫placez le routeur là-bas.
‫Sauvegardez-le, et bien sûr,
‫nous obtenons toujours des erreurs, mais c'est parce que le
‫routeur de tournée n'est pas défini dans notre fichier d'application principal.
‫D'accord, ce qui n'est
‫pas défini dans ce fichier, ce sont toutes ces fonctions ici.
‫D'accord, récupérons-les très rapidement et mettons-les dans
‫le fichier du routeur.
‫Au moins pour l'instant, nous créerons plus tard
‫un nouveau fichier pour cela également.
‫Alors ça commence ici.
‫Attention, ne pas tout copier.
‫Ouais, donc juste comme ça.
‫Et en fait, je vais les mettre avant les routes.
‫Donnez-lui une sauvegarde.
‫Et donc cela devrait fonctionner maintenant.
‫Et maintenant, faites de même pour l'utilisateur.
‫Alors procurez-vous le routeur.
‫Et ne vous inquiétez pas de toutes ces erreurs que nous obtenons.
‫Encore une fois, c'est simplement
‫parce qu'il nous manque des variables à certains endroits.
‫Donc, encore une fois, nous exprimerions ici,
‫puis nous l'appelons ici
‫simplement routeur, puis nous l'exportons.
‫D'accord, et maintenant je reçois aussi les gestionnaires.
‫D'accord, nous pouvons donc nous débarrasser de ces gestionnaires de routes maintenant.
‫D'accord, et en fait celui-ci est manquant dans nos
‫itinéraires de tournée, donc ce morceau de code où nous
‫lisons réellement les visites à partir
‫du fichier JSON.
‫Alors mettez cela tout en haut ici.
‫Et maintenant, enfin, nous devons en fait importer
‫le routeur de tournée et le
‫routeur utilisateur afin que ces routes ici continuent de fonctionner.
‫D'accord, mais cela devrait être assez facile, alors faisons-le.
‫Donc, avec le
‫routeur de tournée, il faut,
‫routes/tourRoutes.
‫D'accord, et nous n'avons pas besoin
‫du JS, et de même pour le userRouter.
‫Donc tourRoutes est en fait ici, le userRoutes.
‫Maintenant, vous vous demandez peut-être pourquoi j'ai appelé
‫les variables userRoute, mais alors le fichier est userRoutes, et bien c'est
‫parce que ce dossier ici s'appelle
‫routes, et donc là-dedans nous avons
‫les tourRoutes et les userRoutes.
‫D'accord, mais ce que nous exportons réellement à
‫partir de ce fichier est simplement le routeur, d'accord ?
‫Mais je pense qu'il est plus logique
‫d'appeler ce dossier ici Routes.
‫D'accord, et c'est pourquoi
‫nous avons cette petite différence entre les routes et le routeur.
‫Maintenant, nous obtenons toujours une erreur ici, et
‫donc fs n'est pas défini, alors prenons cela, et
‫en fait nous n'en avons pas
‫besoin ici, alors mettons-le dans les itinéraires de visite ici.
‫Nous obtenons une autre erreur.
‫Et cette fois, parce que ce dossier ici n'est plus défini, car notre nom de
‫répertoire est maintenant les routes.
‫Il faut donc s'en sortir.
‫Alors montez d'un dossier, puis dedans, allez dans
‫dev-data, data et tour-simple.
‫Maintenant, ne vous inquiétez pas d'obtenir toutes ces erreurs.
‫C'est un peu normal quand nous faisons toute cette
‫refactorisation parce que nous modifions des
‫choses partout, il est donc normal que les choses se cassent.
‫Quoi qu'il en soit, c'est maintenant
‫de retour au travail, et nous sommes donc
‫maintenant à l'endroit où nous pouvons retester nos itinéraires ici.
‫Et effectivement, ça marche.
‫La même chose pour les utilisateurs, supposons.
‫Et donc tout est correct.
‫Nous avons donc maintenant nos
‫routeurs chacun dans un fichier différent, et nous
‫pouvons dire que chacun d'eux est une petite sous-application.
‫Donc une application tournée et une application utilisateur.
‫Et nous avons ensuite tout rassemblé
‫dans notre fichier d'application global en important ces
‫routeurs, puis en montant les routeurs sur les deux
‫routes différentes que nous avons
‫actuellement implémentées, d'accord ?
‫Encore une fois, c'est ici que nous montons nos routeurs.
‫Et je sais que ce concept peut
‫être un peu difficile à saisir, mais ne vous inquiétez
‫pas pour ça.
‫Plus vous continuez à travailler sur ce projet
‫et plus vous
‫écrivez de code, plus tout deviendra automatiquement clair.
‫Pour l'instant, la chose la
‫plus importante à garder à l'esprit est que nous avons créé
‫ces différents routeurs pour chacune des ressources afin d'avoir
‫une belle séparation des préoccupations entre ces ressources.
‫Donc, en gros, créer une
‫petite application pour chacun d'eux, puis tout rassembler
‫dans un fichier d'application principal, qui est bien sûr celui-ci.
‫Donc cette application. js que nous avons ici est généralement principalement utilisé pour
‫les déclarations de middleware.
‫Nous avons donc
‫tous nos middleware que nous voulons appliquer à toutes les routes.
‫Donc, dans ce cas, nous avons ces quatre middlewares ici.
‫Donc un, deux, trois, quatre.
‫Ces middlewares, nous voulons l'appliquer à
‫toutes les
‫routes, puis pour cette route, nous voulons appliquer le
‫middleware tourRouter, et pour
‫cette route, nous voulons appliquer le middleware userRouter.
‫Bon, encore une fois, ces deux routeurs
‫sont en fait un middleware, c'est pourquoi nous pouvons utiliser app. utiliser pour les monter.
‫D'accord, et cela étant dit, allons un peu plus
‫loin et supprimons réellement ces
‫gestionnaires de routes
‫du fichier de routes.
‫D'accord, créons à nouveau un nouveau dossier ici, et celui-ci
‫s'appellera contrôleurs, d'accord ?
‫Je les ai donc appelés gestionnaires de routes, et il
‫serait donc logique de créer un dossier de gestionnaires.
‫Mais plus tard dans ce cours, nous
‫commencerons à utiliser une architecture logicielle appelée Model View Controller,
‫et dans
‫cette architecture, ces fonctions de gestion sont
‫en fait appelées ici des contrôleurs.
‫Et c'est pourquoi je vais appeler le dossier, ainsi que
‫les fichiers qu'il contient, des contrôleurs.
‫Créons donc maintenant le tourController. js, et le
‫userController. js.
‫D'accord, et cela aura un peu plus de sens
‫une fois que
‫nous aurons atteint la partie du cours où nous parlons réellement
‫du modèle MVC, ou modèle de contrôleur de vue modèle.
‫Très bien, prenons maintenant ce code
‫et mettons ces gestionnaires
‫dans le dossier du contrôleur, ou le fichier en fait.
‫Donc tout ce code.
‫C'est le tourController, ouais, c'est celui-là.
‫De plus, nous avons
‫besoin de ce module FS ici, évidemment en haut.
‫Et c'est reparti.
‫Maintenant, nous voulons réellement exporter toutes ces fonctions à partir de
‫ce module, alors comment faire ?
‫Eh bien, dans ce cas, nous n'avons pas qu'une seule exportation,
‫nous n'allons donc pas utiliser le module. export, mais à la place,
‫nous mettrons toutes ces fonctions sur l'objet exports,
‫d'accord ?
‫Et laissez-moi donc sélectionner tous
‫ces éléments, consts, afin que je puisse
‫réellement les remplacer tous en même temps.
‫Donc les exportations. deleteTour, et . updateTour, createTour, getTour et
‫getAllTours.
‫D'accord, donc ça exporte tout de ce fichier.
‫Et maintenant,
‫entrons dans les routesRoutes, et importons-les simplement.
‫Donc const, tourController, est égal à exiger.
‫D'accord, maintenant nous sommes dans le dossier routes ici, n'est-ce pas ?
‫Nous devons donc monter d'un niveau, puis
‫aller dans les contrôleurs et dans
‫le tourController. js.
‫Bon, ce n'est pas correct, et bien.
‫Maintenant, rappelez-vous que lorsque
‫nous exportons des données à partir d'un fichier à l'aide de l'objet exports.
‫Alors comme nous l'avons fait ici.
‫Lorsque nous importons ensuite tout dans un
‫seul objet, toutes les données
‫qui étaient exportées vont maintenant être sur tourController.
‫Et donc nous aurons tourController. getAllTours. créer des circuits. getTour, et vraiment, tout
‫ça, d'accord ?
‫Donc cet objet ici sera l'équivalent des exportations
‫que nous avons ici.
‫Vous vous en souvenez ?
‫Et donc, c'est vraiment simple.
‫Il ne me reste plus qu'à
‫créer tourController. , et c'est tout.
‫Maintenant, j'aurais aussi pu utiliser
‫la structuration, que je vous ai également montrée auparavant.
‫Donc juste pour démontrer, j'aurais pu l'utiliser
‫comme ça, puis spécifier exactement les mêmes noms
‫que nous avons ici.
‫Alors getAllTours, puis createTour, et
‫tout cela, et j'aurais
‫pu les utiliser directement ici sans avoir à écrire tourController et dot.
‫D'accord, mais en fait j'aime ça comme ça, et je ne vois aucun problème
‫à l'avoir comme ça.
‫Il est donc bien visible que toutes
‫ces fonctions ici proviennent
‫en fait de ce module tourController.
‫D'accord, donc je l'ai sauvegardé maintenant, et il
‫devrait donc continuer à fonctionner, alors testons cela, et oui, c'est le cas.
‫Donc, ça marche maintenant.
‫Fermons-le en fait, et maintenant pareil, où est-il ?
‫Ah, ici.
‫Maintenant la même chose bien sûr avec ces fonctions.
‫Mettez-les ici, puis exportez tous ces gars.
‫Donc les exportations.
‫Ouais, donc c'est correct.
‫Maintenant, ici, nous venons d'importer le module, et comme avant, nous
‫devons monter d'un niveau.
‫Nous entrons dans les contrôleurs et userController.
‫Maintenant, enfin, ajoutez simplement cela ici.
‫Faites une sauvegarde et testez-la également pour ce type.
‫Et effectivement, ça marche.
‫Donc tout ce que nous avons fait ici était correct.
‫Nous commençons donc à avoir un tas de fichiers maintenant, et il
‫est donc important de
‫vraiment se familiariser avec l'emplacement exact de toutes
‫les différentes parties de l'application, d'accord ?
‫Donc juste pour récapituler, le flux se déroule comme ceci.
‫Nous commençons à recevoir la demande dans l'application. js, n'est-ce pas ?
‫En fonction de la route, il entrera ensuite dans l'un des
‫routeurs, disons le routeur de tournée, puis en fonction,
‫encore une fois, de cette route
‫et de la demande,
‫il exécutera alors l'un de ces contrôleurs ici, et
‫ceux-ci sont donc dans les fichiers tourController.
‫Et c'est là que la réponse est finalement envoyée et
‫que le cycle demande-réponse est terminé.
‫Bon, nous avons maintenant trois fichiers, au lieu de
‫tout avoir dans un seul fichier.
‫D'accord, mais ce n'est toujours pas la fin de l'histoire,
‫car j'ajoute une étape de plus ici.
‫Donc, ce que je vais faire, c'est créer un serveur. js également.
‫Donc serveur. js.
‫Et pourquoi je fais ça ?
‫Eh bien, tout simplement parce que c'est une bonne
‫pratique d'avoir tout ce
‫qui est lié à exprimer dans un fichier, puis tout
‫ce qui est lié au serveur dans un autre fichier principal.
‫Donc à partir de maintenant, serveur. js sera en fait notre fichier de départ où tout
‫commence, et il est là lorsque nous
‫écoutons notre serveur.
‫Alors allons-y et copiez ou coupez
‫cette partie à partir d'ici, et déplacez-la dans le serveur.
‫Maintenant, bien sûr, ce module
‫ici ne connaît pas l'application, et nous devons donc l'importer.
‫Et pour l'importer, nous devons d'abord l'exporter.
‫Nous utilisons donc module. exportations, et nous exportons notre application à partir
‫de ce fichier.
‫D'accord, et maintenant nous avons tout
‫ce qui est
‫essentiellement la configuration de l'application dans un fichier autonome.
‫D'accord, alors de retour dans le serveur, importons maintenant cela.
‫Exiger, et puisqu'il s'agit de notre propre module, nous
‫devons utiliser this . / pour
‫dire qu'on est dans le dossier
‫courant, et voilà c'est simplement app.
‫Alors, aussi simple que ça.
‫Et plus tard, nous aurons en fait d'autres
‫éléments dans ce fichier qui ne sont pas liés à
‫express, mais toujours liés à notre application.
‫Donc, des trucs comme des configurations de
‫base de données, ou des trucs de gestion d'erreurs, ou des
‫variables d'environnement, tous ces trucs vivront sur ce serveur. js, qui est en quelque
‫sorte notre point d'entrée, d'accord ?
‫Finissons donc maintenant le processus que nous avons ici, car maintenant nous
‫n'exécutons plus l'application nodemon. js, mais
‫à la place, nous devons exécuter server. js.
‫D'accord, et en fait, puisque nous le faisons, permettez-moi de
‫créer un script npm pour cela.
‫Fermer ce gars très vite.
‫Et permettez-moi d'ajouter
‫ici, npm start, serveur nodemon. js.
‫Parce que de cette façon, je n'ai
‫plus besoin de vraiment savoir quel est le fichier que je veux réellement exécuter.
‫Donc tout ce que j'ai à écrire
‫c'est npm start, et il ne fait aucun doute que ça va marcher.
‫Sinon, je devrais peut-être
‫penser, hm, est-ce une application. js, ou serveur. js, ou quoi ?
‫Par quoi devons-nous commencer ici ?
‫Mais comme ça, je n'ai pas à réfléchir, tout ce que j'ai à
‫faire c'est npm start, et ça va commencer.
‫D'accord, alors juste comme ça,
‫et nous revoilà en train d'exécuter notre application.
‫Fermez ce type, et en passant, cela fonctionne, même sans
‫que nodemon soit installé en tant
‫que dépendance de développement,
‫car j'ai installé nodemon globalement.
‫Nous l'avons donc fait dans la première section, et j'espère que
‫vous l'avez fait là aussi.
‫Sinon, allez-y et dans un autre
‫onglet, faites npm
‫install nodemon, donc si pour
‫une raison quelconque vous avez ignoré cette section,
‫vous tapez npm install nodemon, puis vous pouvez soit l'installer globalement
‫comme ça, soit l'installer en tant que
‫développeur dépendance, comme ça, d'accord?
‫Assurez-vous donc simplement que nodemon est installé, que ce soit globalement
‫ou en tant que dépendance de développement,
‫d'accord, afin que cela fonctionne.
‫Donc vérification finale, juste pour
‫être sûr, et vouloir celui-ci, et oui, en effet.
‫Nous avons correctement refactorisé notre application.
‫Il y avait donc beaucoup de
‫changements dans une seule vidéo, donc après avoir terminé celle-ci,
‫veuillez analyser tout ce que nous avons
‫fait et vraiment essayer de tracer un chemin qu'une demande
‫fera à l'intérieur
‫de notre application du début à la fin.
‫De cette façon, vous aurez vraiment
‫une idée de la façon dont tout fonctionne ici.
‫Et je vous verrai après l'avoir fait dans la prochaine vidéo.