‫Istruttore: Usiamo
‫ora una funzione middleware di
‫terze parti di npm chiamata Morgan per
‫rendere un po' più semplice la nostra vita di sviluppo.
‫Quindi, come ho detto, useremo un
‫middleware chiamato Morgan che è un middleware di registrazione molto popolare.
‫Quindi, un middleware che ci permetterà di vedere i dati della
‫richiesta direttamente nella console.
‫Ok, quindi lasciami andare avanti e installarlo
‫e vedrai come funziona, ok?
‫Quindi, non voglio finire ora questo processo qui, quindi creerò un
‫nuovo terminale qui in VS Code e quindi,
‫per questo premo questo pulsante più qui e
‫così, ora otteniamo un nuovo
‫terminale e io
‫non Non voglio aggiornare, quindi no, e ora npm install morgan.
‫Ok, come ho già detto, questo
‫middleware di registrazione renderà
‫la nostra vita di sviluppo un po' più semplice.
‫Ma è ancora
‫un codice che includeremo effettivamente nella nostra applicazione
‫e quindi, ecco perché non è una dipendenza di
‫sviluppo ma solo una semplice dipendenza regolare,
‫ok e quindi, ecco perché non ho specificato save dev
‫qui perché di nuovo, non è un dipendenza dev davvero.
‫Ok, quindi l'abbiamo nel nostro pacchetto. json qui ora, morgan e
‫così, andiamo avanti e richiediamolo nel nostro codice.
‫Quindi, di nuovo in alto qui const morgan
‫è uguale a require morgan e vedi di nuovo
‫questo tipo di convenzione che
‫il require esporrà
‫se usi lo stesso nome del nome del pacchetto stesso.
‫Quindi, abbiamo i nostri middleware
‫qui, quindi aggiungiamolo subito dopo o
‫scriviamo come primo.
‫Ok, e il codice sorgente sta crescendo
‫un po',
‫quindi andiamo avanti e aggiungiamo alcuni
‫commenti qui, quindi prima
‫i middleware, poi quaggiù iniziamo ad avere i nostri gestori di route.
‫Bene, allora qui diciamo solo che abbiamo le nostre rotte.
‫E poi finalmente quaggiù avviamo
‫il server.
‫Ok, solo per rendere il nostro codice un po' più
‫leggibile e più facile da scansionare.
‫Quindi, abbiamo questo primo middleware,
‫ma usiamo ancora il nostro prima.
‫Quindi, ovviamente app. usa
‫e ora qui chiamiamo morgan.
‫Ok, e in questa
‫funzione, possiamo passare un
‫argomento che
‫specificherà come vogliamo che appaia la registrazione.
‫Quindi, possiamo usare alcune stringhe predefinite per questo
‫e quella che userò si chiama dev.
‫E in realtà puoi vedere qui le diverse
‫opzioni, quindi VS Code è davvero
‫intelligente e può darmi
‫le opzioni che possiamo passare a questa funzione.
‫Ok, come
‫ho detto, userò quello chiamato dev.
‫Ok e quindi è davvero così.
‫Quindi, l'abbiamo richiesto
‫e poi qui l'abbiamo usato.
‫Quindi, cose molto semplici,
‫ma penso che
‫sia importante cercare di capire davvero come funziona.
‫Quindi, chiamare questa funzione morgan restituirà
‫una funzione simile a questa qui e quindi, questo
‫ha senso perché mentre
‫è così che deve apparire una funzione middleware
‫e quindi, lascia che te lo dimostri guardando il codice
‫sorgente per questo pacchetto
‫e questo
‫è un altro esercizio molto carino da
‫cui possiamo davvero imparare un bel po'.
‫Quindi, cerchiamo morgan su GitHub, quindi di solito tutti questi pacchetti sono
‫sempre su GitHub e quindi è lì
‫che possiamo guardare il loro
‫codice open source.
‫Ok, Morgan è in realtà un pacchetto molto semplice, quindi tutto ciò che dobbiamo
‫fare è andare a questo indice. js, quindi di solito
‫questo è il punto di
‫ingresso e in questo caso è l'unico file presente.
‫Ok, ora, non mi soffermerò su tutto questo
‫codice, ma voglio evidenziare che l'esportazione
‫principale da questo file qui è morgan,
‫quindi una funzione chiamata morgan, quindi
‫cerchiamola ed
‫effettivamente eccola qui.
‫Ok, quindi quando abbiamo richiesto il pacchetto nel nostro
‫codice, ciò che verrà restituito è questa funzione morgan, giusto?
‫Di nuovo perché usano module. export e
‫questa è l'esportazione predefinita proprio come
‫abbiamo appreso nella lezione sui moduli richiedenti
‫una o due sezioni fa, giusto?
‫Quindi, di nuovo questa
‫funzione Morgan qui sarà questa funzione Morgan qui in questo codice, ok?
‫Quindi, vediamo cosa fa questa
‫funzione e non mi interessa nessuna di questa implementazione
‫qui, quello
‫che volevo davvero mostrarti è che questa funzione restituisce in
‫realtà un'altra funzione che
‫è il logger e vedi che
‫questa funzione ha solo la
‫nostra le funzioni del middleware hanno questa tipica
‫firma di richiesta, risposta e successiva.
‫Va bene?
‫Quindi, questa funzione è proprio come le nostre funzioni middleware.
‫E così, vedete che in realtà
‫alla fine, quando è pronto, chiama anche il
‫prossimo, proprio come facciamo noi.
‫Quindi, è solo una funzione
‫middleware molto regolare, proprio come quelle che scriviamo.
‫Va bene?
‫Quindi, torniamo qui e ora vediamo
‫effettivamente il risultato qui nel nostro terminale, quindi torniamo al
‫primo, quindi questo è il modo
‫in cui passiamo tra
‫i diversi terminali che abbiamo aperto in VS Code.
‫Dacci un po' più di spazio qui,
‫in realtà cancellalo
‫perché potresti non essere in grado di vedere così
‫bene la parte inferiore dello schermo.
‫E quindi sì, ora andiamo avanti
‫e creiamo semplicemente qualche
‫richiesta, va bene, torniamo indietro ed eccoci qui.
‫Quindi, abbiamo le informazioni sulla richiesta che
‫abbiamo appena fatto.
‫Quindi, otteniamo il metodo
‫HTTP, otteniamo l'URL, otteniamo il codice di stato, il
‫tempo impiegato per inviare la risposta
‫e anche la dimensione della risposta in byte.
‫Quindi, ricorda che avremmo potuto usare un'altra opzione
‫qui, ad esempio tiny era un'altra,
‫quindi probabilmente sarebbe sembrata un po' diversa e in realtà
‫sembra un po' simile qui.
‫Semplicemente non fa questa colorazione
‫di questo codice
‫di stato e ha anche un ordine leggermente diverso qui.
‫Ok e se abbiamo fatto qualcosa, se abbiamo causato
‫un errore, ad esempio un 404, proviamolo
‫utilizzando un ID non valido qui, in modo
‫che otterrà un altro colore qui, giusto, lo
‫puoi vedere?
‫Facciamolo di nuovo nel caso non l'avessi visto.
‫E quindi, sì, ci dà un colore diverso.
‫E quindi, sì, può essere molto utile per lo sviluppo.
‫Potresti persino salvare questo registro
‫in un file, ma è un po' troppo per
‫questo piccolo
‫esempio, quindi questo è
‫più che sufficiente e
‫vedrai durante il corso che è piuttosto utile averlo qui.
‫Ok, questo è il modo in cui usiamo il
‫middleware di terze parti da npm e c'è un sacco di middleware lì e lascia
‫che te lo mostri effettivamente.
‫Quindi, sul sito
‫Express stesso, quindi expressjs. com e in realtà non abbiamo
‫mai visitato questo sito
‫Web, quindi è piuttosto carino, quindi
‫hai questo Iniziare con un paio di articoli
‫che spiegano le basi di Express e poi hai un
‫bel riferimento API nel nostro caso, 4. x e quindi, qui hai tutti i metodi
‫che sono sulla
‫richiesta, quindi i metodi sulle proprietà
‫ovviamente, quindi tutta questa roba che
‫abbiamo, ad esempio, le richieste. corpo che abbiamo già
‫utilizzato o qui sulla risposta, hai, ad
‫esempio, risposta. json o
‫risposta. send
‫e ci sono un sacco di
‫altri metodi e ne useremo molti in
‫seguito, ma poi qui hai queste risorse e quello
‫che voglio mostrarti è
‫il middleware e quindi, questo è un mucchio di
‫middleware che puoi
‫usare e che Express consiglia, ok?
‫E ancora, ne useremo alcuni un po' più tardi
‫e in realtà Express li consiglia perché
‫molti di questi erano incorporati in Express 3, quindi in
‫una versione
‫precedente ma poi sono stati rimossi da Express.
‫Ad esempio, corpo. parser è uno di
‫questi, ma in realtà nella versione
‫quattro punti, credo 14 o 16, è stato aggiunto di
‫nuovo ed è per questo che siamo stati in grado di fare,
‫vediamo, dov'è?
‫Sì, ecco perché siamo stati in grado di usare l'espressione. json per
‫analizzare i dati dal corpo.
‫Prima di ciò, dovremmo effettivamente usare il corpo. parser da npm e
‫usa quello per analizzare i dati dal corpo ma, di nuovo,
‫lo hanno appena aggiunto di nuovo
‫per ridurre un po' la confusione per i principianti come te.
‫Ok, quindi gioca un po'
‫con questo riferimento.
‫Dai un'occhiata ad
‫alcune delle cose che forse abbiamo già fatto se ne
‫hai voglia o, in caso contrario, puoi sempre passare
‫direttamente al video successivo.