‫Istruttore: Refactoring ora completamente la nostra applicazione
‫che abbiamo finora e creiamo molti
‫nuovi file e una
‫struttura di file completamente nuova.
‫Quindi ricorda dall'ultimo video che
‫volevamo separare i nostri router in
‫file diversi.
‫E quindi questo sarà il primo passo che faremo qui.
‫Quindi ora creerò una nuova cartella chiamata Routes,
‫e lì dentro avrò una cartella per i percorsi dei tour. js, quindi le route dell'utente,. anche js.
‫Ok, quindi questa sarà la prima volta che lavoreremo davvero
‫con moduli diversi, ok, e
‫li useremo effettivamente in un modo molto significativo.
‫Quindi, iniziamo con il tour router.
‫Copialo qui, quindi prendi questo router
‫qui e mettilo qui.
‫Quindi, ora abbiamo bisogno di Express qui, perché stiamo usando quella
‫variabile, e
‫quindi abbiamo bisogno di importare il modulo Express.
‫Quindi
‫esprimi, richiedi espresso.
‫Ok, è una specie
‫di convenzione chiamare semplicemente questo router e non tourRouter.
‫Quindi router, e ora esporteremo il router e poi lo importeremo nella nostra
‫applicazione principale, ok?
‫Quindi, ricordi come lo facciamo quando abbiamo
‫solo una cosa da esportare?
‫Bene, usiamo il modulo. esportazioni, quindi
‫metti il router lì.
‫Salvalo e, naturalmente,
‫riceviamo ancora alcuni errori, ma questo perché il tour
‫router non è definito nel nostro file dell'applicazione principale.
‫Ok, anche ciò che
‫non è definito in questo file sono tutte queste funzioni qui.
‫Ok, prendiamole molto velocemente e inseriamole
‫nel file del router.
‫Almeno per ora, creeremo in seguito un
‫nuovo file anche per quello.
‫Quindi inizia da qui.
‫Attenzione, non copiare tutto.
‫Sì, quindi proprio così.
‫E in effetti, li metterò prima delle vie.
‫Dagli un salvataggio.
‫E quindi dovrebbe funzionare ora.
‫E ora fai lo stesso per l'utente.
‫Quindi prendi il router.
‫E non preoccuparti di tutti questi errori che riceviamo.
‫Di nuovo, è solo
‫perché ci mancano alcune variabili in alcuni punti.
‫Quindi di nuovo, esprimiamo qui, quindi lo
‫chiamiamo qui solo
‫router e poi lo esportiamo.
‫Ok, e ora prendo anche i gestori.
‫Ok, adesso possiamo sbarazzarci di questi gestori di rotte.
‫Ok, e in realtà questo qui manca nei
‫nostri percorsi del tour, quindi questo pezzo di codice
‫in cui leggiamo effettivamente i tour
‫dal file JSON.
‫Quindi mettilo qui in alto.
‫E ora, finalmente, dobbiamo importare il router
‫del tour e il router dell'utente
‫in modo che questi percorsi qui continuino a funzionare.
‫Ok, ma dovrebbe essere abbastanza facile, quindi facciamolo.
‫Quindi, con
‫il router tour, è richiesto, route/tourRoutes.
‫Ok, e non abbiamo bisogno del
‫JS, e quindi lo stesso per l'userRouter.
‫Quindi tourRoutes è effettivamente qui, userRoutes.
‫Ora ti starai chiedendo perché in realtà ho
‫chiamato le variabili userRoute, ma poi il file è userRoutes, e
‫questo è perché questa cartella qui
‫si chiama route, e quindi lì
‫dentro abbiamo tourRoutes e userRoutes.
‫Ok, ma quello che effettivamente esportiamo
‫da quel file è semplicemente il router, ok?
‫Ma credo che abbia più senso chiamare
‫effettivamente questa cartella qui Routes.
‫Ok, ecco perché
‫abbiamo questa piccola differenza tra route e router.
‫Ora abbiamo ancora qualche errore qui, e
‫quindi fs non è definito, quindi prendiamolo, e
‫in realtà non ne abbiamo bisogno
‫qui, quindi inseriamolo nelle rotte del tour proprio qui.
‫Otteniamo un altro errore.
‫E questa volta, perché questa cartella qui ora non è definita, perché il nostro nome
‫dir è ora le rotte.
‫Quindi dobbiamo uscirne.
‫Quindi vai su una cartella, e poi lì dentro, vai
‫in dev-data, data e tour-simple.
‫Ora non preoccuparti di ricevere tutti questi errori.
‫È abbastanza normale quando facciamo tutto questo refactoring
‫perché stiamo cambiando le cose
‫dappertutto, quindi è normale che le cose si rompano.
‫Ad ogni modo, ora è tornato
‫a funzionare, e quindi ora siamo nel
‫posto in cui possiamo riprovare le nostre vie qui.
‫E infatti, funziona.
‫Lo stesso per gli utenti, supponiamo.
‫E quindi tutto è corretto.
‫Quindi ora abbiamo i nostri
‫router ciascuno in un file diverso e possiamo
‫dire che ognuno di essi è una piccola sottoapplicazione.
‫Quindi un'applicazione tour e un'applicazione utente.
‫E poi mettiamo tutto insieme nel
‫nostro file dell'app globale importando questi router
‫e poi montando i router sui due
‫diversi percorsi che abbiamo
‫attualmente implementato, ok?
‫Quindi, di nuovo, è qui che montiamo i nostri router.
‫E so che questo concetto può
‫essere un po' difficile da comprendere, ma
‫non preoccuparti.
‫Più a lungo continui a lavorare su questo progetto
‫e più codice
‫continui a scrivere, più tutto diventerà chiaro automaticamente.
‫Per ora, la cosa più
‫importante da tenere a mente è che abbiamo creato questi diversi
‫router per ciascuna delle risorse per avere una
‫buona separazione delle preoccupazioni tra queste risorse.
‫Quindi, in pratica, creare una piccola
‫applicazione per ciascuno di essi e poi mettere tutto
‫insieme in un file dell'app principale, che è ovviamente questo.
‫Quindi questa app. js che abbiamo qui di solito viene utilizzato principalmente per
‫le dichiarazioni del middleware.
‫Quindi abbiamo tutto
‫il nostro middleware che vogliamo applicare a tutte le rotte.
‫Quindi, in questo caso, abbiamo questi quattro middleware qui.
‫Quindi uno, due, tre, quattro.
‫Vogliamo applicarlo a questi middleware per
‫tutti i
‫percorsi, quindi per questo percorso vogliamo applicare il
‫middleware tourRouter e per
‫questo percorso vogliamo applicare il middleware userRouter.
‫Ok, di nuovo, questi due router
‫sono in realtà middleware, motivo per cui possiamo usare app. utilizzare per montarli.
‫Ok, e detto questo, facciamo un ulteriore passo
‫avanti e rimuoviamo effettivamente questi
‫gestori di route
‫dal file delle route.
‫Ok, quindi creiamo di nuovo una nuova cartella qui, e
‫questa si chiamerà controller, ok?
‫Quindi li ho chiamati gestori di route e quindi
‫avrebbe senso creare una cartella dei gestori.
‫Ma più avanti in questo corso,
‫inizieremo a utilizzare un'architettura software chiamata Model View Controller
‫e, in
‫tale architettura, queste funzioni di gestione
‫qui in realtà sono chiamate controller.
‫Ed è per questo che chiamerò la cartella, e anche
‫i file al suo interno, controller.
‫Quindi ora creiamo il tourController. js e
‫userController. js.
‫Ok, e questo avrà un po' più
‫senso una volta
‫raggiunta la parte del corso in cui si parla
‫effettivamente del modello MVC, o Model View Controller.
‫Bene, ora prendiamo questo codice e
‫mettiamo questi gestori
‫nella cartella del controller, o in realtà nel file.
‫Quindi tutto questo codice.
‫È il tourController, sì, è quello.
‫Inoltre, abbiamo bisogno
‫di questo modulo FS qui, ovviamente in alto.
‫E qui andiamo.
‫Ora, vogliamo effettivamente esportare tutte queste funzioni da questo
‫modulo, quindi come possiamo farlo?
‫Bene, in questo caso non abbiamo solo
‫un'esportazione, quindi non useremo module. export, ma invece metteremo
‫tutte queste funzioni sull'oggetto export,
‫ok?
‫E quindi permettetemi di selezionare
‫tutti questi, consts, in modo che io
‫possa effettivamente sostituirli tutti allo stesso tempo.
‫Quindi esportazioni. eliminaTour e . updateTour, createTour, getTour e
‫getAllTours.
‫Ok, quindi esporta tutto da questo file.
‫E quindi
‫ora, entriamo in tourRoutes e importiamoli semplicemente.
‫Quindi const, tourController, equals require.
‫Ok, ora siamo nella cartella dei percorsi qui, giusto?
‫Quindi dobbiamo salire di un livello,
‫quindi entrare nei controller e
‫nel tourController. js.
‫Ok, questo non è corretto, e va bene.
‫Ora, ricorda che
‫quando esportiamo i dati da un file utilizzando l'oggetto exports.
‫Quindi proprio come abbiamo fatto qui.
‫Quando poi importiamo tutto in un oggetto,
‫tutti i dati che
‫erano sulle esportazioni ora saranno su tourController.
‫E così avremo tourController. getAllTours. creareTour. getTour, e davvero, tutto
‫questo, ok?
‫Quindi questo oggetto qui sarà l'equivalente delle
‫esportazioni che abbiamo qui.
‫Ricordati che?
‫E così, è davvero semplice.
‫Tutto quello che devo fare ora è
‫creare tourController. , e basta.
‫Ora avrei potuto usare anche
‫la strutturazione, che ti ho anche mostrato prima.
‫Quindi, solo per dimostrare, avrei potuto usarlo in
‫questo modo e poi specificare gli stessi esatti
‫nomi che abbiamo qui.
‫Quindi getAllTours, e poi createTour,
‫e tutti questi, e
‫poi avrei potuto usarli direttamente qui senza dover scrivere tourController e punto.
‫Ok, ma in realtà mi piace così, e non vedo alcun problema
‫ad averlo così.
‫Quindi è ben visibile che tutte queste
‫funzioni qui in
‫realtà provengono da questo modulo tourController.
‫Ok, l'ho salvato ora, e
‫dovrebbe continuare a funzionare, quindi proviamolo, e sì, lo fa.
‫Quindi, ora funziona.
‫Chiudiamola davvero, e ora lo stesso, dov'è?
‫Ah, ecco.
‫Ora lo stesso ovviamente con queste funzioni.
‫Mettili qui e poi esporta tutti questi
‫ragazzi.
‫Quindi esportazioni.
‫Sì, quindi è corretto.
‫Ora qui, abbiamo appena importato il modulo e, come prima, dobbiamo
‫salire di un livello.
‫Entriamo in controller e userController.
‫Ora, finalmente, aggiungilo qui.
‫Salvalo e provalo anche per questo ragazzo.
‫E infatti, funziona.
‫Quindi tutto ciò che abbiamo fatto qui era corretto.
‫Quindi stiamo iniziando ad avere un sacco di file ora,
‫quindi è importante
‫acquisire davvero familiarità, dove si trovano esattamente
‫tutte le diverse parti dell'applicazione, ok?
‫Quindi, solo per ricapitolare, il flusso va così.
‫Iniziamo a ricevere la richiesta nell'app. js, giusto?
‫Quindi, a seconda del percorso, entrerà in uno dei router,
‫quindi diciamo il router del tour, e quindi,
‫a seconda di quel percorso
‫e della richiesta,
‫eseguirà uno di questi controller qui, e quindi
‫questi sono in i file tourController.
‫Ed è qui che alla fine viene inviata la
‫risposta e termina il ciclo richiesta-risposta.
‫Ok, ora abbiamo tre file, invece di
‫avere tutto in un unico file.
‫Va bene, ma questa non è ancora la fine della
‫storia, perché aggiungo un altro passaggio qui.
‫Quindi quello che farò è creare un server. js anche il file.
‫Quindi servitore. js.
‫E perché lo sto facendo?
‫Bene, semplicemente perché è una buona pratica avere tutto
‫ciò che è
‫correlato a express in un file e poi tutto
‫ciò che è correlato al server in un altro file principale.
‫Quindi a partire da ora, server. js sarà in realtà il nostro file di partenza in
‫cui tutto inizia, ed è lì quando
‫ascoltiamo il nostro server.
‫Quindi andiamo avanti e copiamo, o
‫tagliamo, questa parte da qui e spostiamola nel server.
‫Ora, ovviamente, questo modulo
‫qui non conosce l'app, quindi dobbiamo importarlo.
‫E per importarlo, dobbiamo prima esportarlo.
‫Quindi usiamo il modulo. exports ed esportiamo la nostra applicazione da
‫questo file.
‫Ok, quindi ora abbiamo tutto
‫ciò che è
‫fondamentalmente la configurazione dell'applicazione in un file autonomo.
‫Ok, quindi di nuovo nel server, ora importiamolo.
‫Require, e poiché è il nostro modulo,
‫dobbiamo usare questo . / per
‫dire che siamo nella cartella corrente,
‫ed ecco che è semplicemente app.
‫Quindi, semplice.
‫E in seguito avremo effettivamente altre cose
‫in questo file che non sono relative a express,
‫ma comunque relative alla nostra applicazione.
‫Quindi cose come le configurazioni del
‫database, o alcune cose sulla gestione degli errori, o variabili
‫d'ambiente, tutte quelle cose vivranno in questo server. js, che è una
‫specie di punto di ingresso, ok?
‫Quindi ora finiamo il processo che abbiamo qui, perché ora non
‫eseguiamo più l'app nodemon. js,
‫ma invece, dobbiamo eseguire server. js.
‫Ok, e in realtà dal momento che lo stiamo facendo, fammi
‫creare uno script npm per quello.
‫Chiudendo quel ragazzo molto velocemente.
‫E quindi lasciatemi
‫aggiungere qui, npm start, nodemon server. js.
‫Perché in questo modo, non devo
‫più sapere veramente quale è il file che voglio effettivamente eseguire.
‫Quindi tutto quello che devo
‫scrivere è npm start, e non c'è dubbio che funzionerà.
‫Altrimenti, potrei dover
‫pensare, hm, è un'app. js o server. js, o cosa?
‫Cosa dobbiamo cominciare da qui?
‫Ma in questo modo, non devo pensare, tutto ciò che
‫devo fare è avviare npm e inizierà.
‫Ok, quindi proprio così, ed
‫eccoci di nuovo a eseguire la nostra applicazione.
‫Chiudi quel ragazzo e, a proposito, funziona, anche senza
‫avere nodemon installato come dipendenza di
‫sviluppo, perché ho
‫nodemon installato a livello globale.
‫Quindi l'abbiamo fatto nella prima sezione, e si spera che
‫lo abbiate fatto anche lì.
‫In caso contrario, vai avanti
‫e in un'altra
‫scheda esegui npm install nodemon,
‫quindi se per qualche motivo hai saltato quella
‫sezione, digita npm install nodemon, quindi puoi installarlo globalmente in
‫questo modo o puoi installarlo come
‫dev dipendenza, così, va bene?
‫Quindi assicurati di avere nodemon installato, non importa se è
‫globalmente o come dipendenza di sviluppo,
‫ok, per farlo funzionare.
‫Quindi controllo finale, solo per
‫essere sicuri, e voglio questo, e sì, davvero.
‫Abbiamo la nostra app correttamente refactoring.
‫Quindi questi erano molti cambiamenti in
‫un solo video, quindi dopo aver finito questo, vai
‫avanti e analizza tutto ciò che abbiamo
‫fatto e prova davvero a tracciare un percorso che
‫una richiesta farà
‫all'interno della nostra app dall'inizio alla fine.
‫In questo modo avrai davvero
‫un'idea di come funziona tutto qui.
‫E ci vediamo dopo averlo fatto nel prossimo video.