1 00:00:01,350 --> 00:00:02,270 ‫Istruttore: Usiamo 2 00:00:02,270 --> 00:00:04,360 ‫ora una funzione middleware di 3 00:00:04,360 --> 00:00:06,880 ‫terze parti di npm chiamata Morgan per 4 00:00:06,880 --> 00:00:10,313 ‫rendere un po' più semplice la nostra vita di sviluppo. 5 00:00:11,890 --> 00:00:14,450 ‫Quindi, come ho detto, useremo un 6 00:00:14,450 --> 00:00:18,400 ‫middleware chiamato Morgan che è un middleware di registrazione molto popolare. 7 00:00:18,400 --> 00:00:21,960 ‫Quindi, un middleware che ci permetterà di vedere i dati della 8 00:00:21,960 --> 00:00:23,640 ‫richiesta direttamente nella console. 9 00:00:23,640 --> 00:00:26,320 ‫Ok, quindi lasciami andare avanti e installarlo 10 00:00:26,320 --> 00:00:28,863 ‫e vedrai come funziona, ok? 11 00:00:28,863 --> 00:00:33,340 ‫Quindi, non voglio finire ora questo processo qui, quindi creerò un 12 00:00:33,340 --> 00:00:36,900 ‫nuovo terminale qui in VS Code e quindi, 13 00:00:36,900 --> 00:00:40,300 ‫per questo premo questo pulsante più qui e 14 00:00:40,300 --> 00:00:42,750 ‫così, ora otteniamo un nuovo 15 00:00:42,750 --> 00:00:44,390 ‫terminale e io 16 00:00:44,390 --> 00:00:48,853 ‫non Non voglio aggiornare, quindi no, e ora npm install morgan. 17 00:00:50,340 --> 00:00:52,500 ‫Ok, come ho già detto, questo 18 00:00:52,500 --> 00:00:54,330 ‫middleware di registrazione renderà 19 00:00:54,330 --> 00:00:57,340 ‫la nostra vita di sviluppo un po' più semplice. 20 00:00:57,340 --> 00:00:58,710 ‫Ma è ancora 21 00:00:58,710 --> 00:01:01,470 ‫un codice che includeremo effettivamente nella nostra applicazione 22 00:01:01,470 --> 00:01:04,630 ‫e quindi, ecco perché non è una dipendenza di 23 00:01:04,630 --> 00:01:07,270 ‫sviluppo ma solo una semplice dipendenza regolare, 24 00:01:07,270 --> 00:01:10,800 ‫ok e quindi, ecco perché non ho specificato save dev 25 00:01:10,800 --> 00:01:14,110 ‫qui perché di nuovo, non è un dipendenza dev davvero. 26 00:01:14,110 --> 00:01:18,640 ‫Ok, quindi l'abbiamo nel nostro pacchetto. json qui ora, morgan e 27 00:01:18,640 --> 00:01:21,763 ‫così, andiamo avanti e richiediamolo nel nostro codice. 28 00:01:23,190 --> 00:01:26,593 ‫Quindi, di nuovo in alto qui const morgan 29 00:01:29,500 --> 00:01:33,450 ‫è uguale a require morgan e vedi di nuovo 30 00:01:33,450 --> 00:01:35,800 ‫questo tipo di convenzione che 31 00:01:35,800 --> 00:01:37,530 ‫il require esporrà 32 00:01:37,530 --> 00:01:41,750 ‫se usi lo stesso nome del nome del pacchetto stesso. 33 00:01:41,750 --> 00:01:43,850 ‫Quindi, abbiamo i nostri middleware 34 00:01:43,850 --> 00:01:46,590 ‫qui, quindi aggiungiamolo subito dopo o 35 00:01:46,590 --> 00:01:48,623 ‫scriviamo come primo. 36 00:01:49,480 --> 00:01:52,150 ‫Ok, e il codice sorgente sta crescendo 37 00:01:52,150 --> 00:01:53,300 ‫un po', 38 00:01:53,300 --> 00:01:55,670 ‫quindi andiamo avanti e aggiungiamo alcuni 39 00:01:55,670 --> 00:01:57,603 ‫commenti qui, quindi prima 40 00:02:01,170 --> 00:02:05,753 ‫i middleware, poi quaggiù iniziamo ad avere i nostri gestori di route. 41 00:02:11,510 --> 00:02:15,623 ‫Bene, allora qui diciamo solo che abbiamo le nostre rotte. 42 00:02:20,050 --> 00:02:21,950 ‫E poi finalmente quaggiù avviamo 43 00:02:21,950 --> 00:02:23,173 ‫il server. 44 00:02:28,405 --> 00:02:31,630 ‫Ok, solo per rendere il nostro codice un po' più 45 00:02:31,630 --> 00:02:33,700 ‫leggibile e più facile da scansionare. 46 00:02:33,700 --> 00:02:35,980 ‫Quindi, abbiamo questo primo middleware, 47 00:02:35,980 --> 00:02:38,453 ‫ma usiamo ancora il nostro prima. 48 00:02:39,520 --> 00:02:41,750 ‫Quindi, ovviamente app. usa 49 00:02:41,750 --> 00:02:44,223 ‫e ora qui chiamiamo morgan. 50 00:02:45,300 --> 00:02:47,040 ‫Ok, e in questa 51 00:02:47,040 --> 00:02:48,460 ‫funzione, possiamo passare un 52 00:02:48,460 --> 00:02:49,684 ‫argomento che 53 00:02:49,684 --> 00:02:52,310 ‫specificherà come vogliamo che appaia la registrazione. 54 00:02:52,310 --> 00:02:54,920 ‫Quindi, possiamo usare alcune stringhe predefinite per questo 55 00:02:54,920 --> 00:02:57,493 ‫e quella che userò si chiama dev. 56 00:02:58,550 --> 00:03:01,140 ‫E in realtà puoi vedere qui le diverse 57 00:03:01,140 --> 00:03:03,180 ‫opzioni, quindi VS Code è davvero 58 00:03:03,180 --> 00:03:04,613 ‫intelligente e può darmi 59 00:03:04,613 --> 00:03:07,170 ‫le opzioni che possiamo passare a questa funzione. 60 00:03:07,170 --> 00:03:08,500 ‫Ok, come 61 00:03:08,500 --> 00:03:11,080 ‫ho detto, userò quello chiamato dev. 62 00:03:11,080 --> 00:03:13,650 ‫Ok e quindi è davvero così. 63 00:03:13,650 --> 00:03:15,180 ‫Quindi, l'abbiamo richiesto 64 00:03:15,180 --> 00:03:16,960 ‫e poi qui l'abbiamo usato. 65 00:03:16,960 --> 00:03:18,500 ‫Quindi, cose molto semplici, 66 00:03:18,500 --> 00:03:19,860 ‫ma penso che 67 00:03:19,860 --> 00:03:23,170 ‫sia importante cercare di capire davvero come funziona. 68 00:03:23,170 --> 00:03:25,260 ‫Quindi, chiamare questa funzione morgan restituirà 69 00:03:25,260 --> 00:03:28,407 ‫una funzione simile a questa qui e quindi, questo 70 00:03:28,407 --> 00:03:29,910 ‫ha senso perché mentre 71 00:03:29,910 --> 00:03:32,550 ‫è così che deve apparire una funzione middleware 72 00:03:32,550 --> 00:03:36,010 ‫e quindi, lascia che te lo dimostri guardando il codice 73 00:03:36,010 --> 00:03:37,720 ‫sorgente per questo pacchetto 74 00:03:37,720 --> 00:03:38,810 ‫e questo 75 00:03:38,810 --> 00:03:41,170 ‫è un altro esercizio molto carino da 76 00:03:41,170 --> 00:03:43,513 ‫cui possiamo davvero imparare un bel po'. 77 00:03:45,090 --> 00:03:50,090 ‫Quindi, cerchiamo morgan su GitHub, quindi di solito tutti questi pacchetti sono 78 00:03:50,440 --> 00:03:53,430 ‫sempre su GitHub e quindi è lì 79 00:03:53,430 --> 00:03:55,620 ‫che possiamo guardare il loro 80 00:03:55,620 --> 00:03:57,463 ‫codice open source. 81 00:03:58,410 --> 00:04:02,160 ‫Ok, Morgan è in realtà un pacchetto molto semplice, quindi tutto ciò che dobbiamo 82 00:04:02,160 --> 00:04:05,930 ‫fare è andare a questo indice. js, quindi di solito 83 00:04:05,930 --> 00:04:08,000 ‫questo è il punto di 84 00:04:08,000 --> 00:04:11,233 ‫ingresso e in questo caso è l'unico file presente. 85 00:04:12,680 --> 00:04:16,020 ‫Ok, ora, non mi soffermerò su tutto questo 86 00:04:16,020 --> 00:04:18,510 ‫codice, ma voglio evidenziare che l'esportazione 87 00:04:18,510 --> 00:04:21,330 ‫principale da questo file qui è morgan, 88 00:04:21,330 --> 00:04:23,780 ‫quindi una funzione chiamata morgan, quindi 89 00:04:23,780 --> 00:04:24,880 ‫cerchiamola ed 90 00:04:26,070 --> 00:04:27,623 ‫effettivamente eccola qui. 91 00:04:28,460 --> 00:04:31,960 ‫Ok, quindi quando abbiamo richiesto il pacchetto nel nostro 92 00:04:31,960 --> 00:04:35,520 ‫codice, ciò che verrà restituito è questa funzione morgan, giusto? 93 00:04:35,520 --> 00:04:38,190 ‫Di nuovo perché usano module. export e 94 00:04:38,190 --> 00:04:41,110 ‫questa è l'esportazione predefinita proprio come 95 00:04:41,110 --> 00:04:44,650 ‫abbiamo appreso nella lezione sui moduli richiedenti 96 00:04:44,650 --> 00:04:47,650 ‫una o due sezioni fa, giusto? 97 00:04:47,650 --> 00:04:49,720 ‫Quindi, di nuovo questa 98 00:04:49,720 --> 00:04:54,720 ‫funzione Morgan qui sarà questa funzione Morgan qui in questo codice, ok? 99 00:04:55,520 --> 00:04:57,490 ‫Quindi, vediamo cosa fa questa 100 00:04:57,490 --> 00:05:00,830 ‫funzione e non mi interessa nessuna di questa implementazione 101 00:05:00,830 --> 00:05:02,150 ‫qui, quello 102 00:05:02,150 --> 00:05:06,000 ‫che volevo davvero mostrarti è che questa funzione restituisce in 103 00:05:06,000 --> 00:05:07,650 ‫realtà un'altra funzione che 104 00:05:07,650 --> 00:05:09,850 ‫è il logger e vedi che 105 00:05:09,850 --> 00:05:11,600 ‫questa funzione ha solo la 106 00:05:11,600 --> 00:05:14,630 ‫nostra le funzioni del middleware hanno questa tipica 107 00:05:14,630 --> 00:05:17,020 ‫firma di richiesta, risposta e successiva. 108 00:05:17,020 --> 00:05:18,200 ‫Va bene? 109 00:05:18,200 --> 00:05:22,120 ‫Quindi, questa funzione è proprio come le nostre funzioni middleware. 110 00:05:22,120 --> 00:05:24,060 ‫E così, vedete che in realtà 111 00:05:24,060 --> 00:05:26,620 ‫alla fine, quando è pronto, chiama anche il 112 00:05:26,620 --> 00:05:28,250 ‫prossimo, proprio come facciamo noi. 113 00:05:28,250 --> 00:05:30,370 ‫Quindi, è solo una funzione 114 00:05:30,370 --> 00:05:33,393 ‫middleware molto regolare, proprio come quelle che scriviamo. 115 00:05:33,393 --> 00:05:35,078 ‫Va bene? 116 00:05:35,078 --> 00:05:37,067 ‫Quindi, torniamo qui e ora vediamo 117 00:05:37,067 --> 00:05:40,430 ‫effettivamente il risultato qui nel nostro terminale, quindi torniamo al 118 00:05:40,430 --> 00:05:42,660 ‫primo, quindi questo è il modo 119 00:05:42,660 --> 00:05:44,500 ‫in cui passiamo tra 120 00:05:44,500 --> 00:05:47,423 ‫i diversi terminali che abbiamo aperto in VS Code. 121 00:05:49,190 --> 00:05:51,190 ‫Dacci un po' più di spazio qui, 122 00:05:51,190 --> 00:05:52,460 ‫in realtà cancellalo 123 00:05:52,460 --> 00:05:54,900 ‫perché potresti non essere in grado di vedere così 124 00:05:54,900 --> 00:05:56,710 ‫bene la parte inferiore dello schermo. 125 00:05:56,710 --> 00:05:59,070 ‫E quindi sì, ora andiamo avanti 126 00:05:59,070 --> 00:06:00,893 ‫e creiamo semplicemente qualche 127 00:06:04,200 --> 00:06:07,240 ‫richiesta, va bene, torniamo indietro ed eccoci qui. 128 00:06:07,240 --> 00:06:09,730 ‫Quindi, abbiamo le informazioni sulla richiesta che 129 00:06:09,730 --> 00:06:11,170 ‫abbiamo appena fatto. 130 00:06:11,170 --> 00:06:13,060 ‫Quindi, otteniamo il metodo 131 00:06:13,060 --> 00:06:16,250 ‫HTTP, otteniamo l'URL, otteniamo il codice di stato, il 132 00:06:16,250 --> 00:06:18,637 ‫tempo impiegato per inviare la risposta 133 00:06:18,637 --> 00:06:21,603 ‫e anche la dimensione della risposta in byte. 134 00:06:22,440 --> 00:06:25,550 ‫Quindi, ricorda che avremmo potuto usare un'altra opzione 135 00:06:25,550 --> 00:06:28,183 ‫qui, ad esempio tiny era un'altra, 136 00:06:28,183 --> 00:06:32,370 ‫quindi probabilmente sarebbe sembrata un po' diversa e in realtà 137 00:06:32,370 --> 00:06:34,680 ‫sembra un po' simile qui. 138 00:06:34,680 --> 00:06:36,380 ‫Semplicemente non fa questa colorazione 139 00:06:36,380 --> 00:06:37,710 ‫di questo codice 140 00:06:37,710 --> 00:06:40,923 ‫di stato e ha anche un ordine leggermente diverso qui. 141 00:06:43,760 --> 00:06:46,893 ‫Ok e se abbiamo fatto qualcosa, se abbiamo causato 142 00:06:48,060 --> 00:06:50,880 ‫un errore, ad esempio un 404, proviamolo 143 00:06:50,880 --> 00:06:53,890 ‫utilizzando un ID non valido qui, in modo 144 00:06:56,380 --> 00:06:59,210 ‫che otterrà un altro colore qui, giusto, lo 145 00:06:59,210 --> 00:07:00,410 ‫puoi vedere? 146 00:07:01,246 --> 00:07:03,530 ‫Facciamolo di nuovo nel caso non l'avessi visto. 147 00:07:03,530 --> 00:07:06,440 ‫E quindi, sì, ci dà un colore diverso. 148 00:07:06,440 --> 00:07:09,420 ‫E quindi, sì, può essere molto utile per lo sviluppo. 149 00:07:09,420 --> 00:07:11,100 ‫Potresti persino salvare questo registro 150 00:07:11,100 --> 00:07:13,960 ‫in un file, ma è un po' troppo per 151 00:07:13,960 --> 00:07:15,060 ‫questo piccolo 152 00:07:15,060 --> 00:07:16,460 ‫esempio, quindi questo è 153 00:07:16,460 --> 00:07:17,800 ‫più che sufficiente e 154 00:07:17,800 --> 00:07:20,910 ‫vedrai durante il corso che è piuttosto utile averlo qui. 155 00:07:20,910 --> 00:07:23,620 ‫Ok, questo è il modo in cui usiamo il 156 00:07:23,620 --> 00:07:28,160 ‫middleware di terze parti da npm e c'è un sacco di middleware lì e lascia 157 00:07:28,160 --> 00:07:30,010 ‫che te lo mostri effettivamente. 158 00:07:31,970 --> 00:07:34,143 ‫Quindi, sul sito 159 00:07:37,850 --> 00:07:42,290 ‫Express stesso, quindi expressjs. com e in realtà non abbiamo 160 00:07:42,290 --> 00:07:44,170 ‫mai visitato questo sito 161 00:07:44,170 --> 00:07:46,490 ‫Web, quindi è piuttosto carino, quindi 162 00:07:46,490 --> 00:07:49,410 ‫hai questo Iniziare con un paio di articoli 163 00:07:49,410 --> 00:07:52,730 ‫che spiegano le basi di Express e poi hai un 164 00:07:52,730 --> 00:07:57,400 ‫bel riferimento API nel nostro caso, 4. x e quindi, qui hai tutti i metodi 165 00:07:57,400 --> 00:07:58,713 ‫che sono sulla 166 00:07:59,970 --> 00:08:01,980 ‫richiesta, quindi i metodi sulle proprietà 167 00:08:01,980 --> 00:08:03,980 ‫ovviamente, quindi tutta questa roba che 168 00:08:03,980 --> 00:08:07,294 ‫abbiamo, ad esempio, le richieste. corpo che abbiamo già 169 00:08:07,294 --> 00:08:10,020 ‫utilizzato o qui sulla risposta, hai, ad 170 00:08:10,020 --> 00:08:12,920 ‫esempio, risposta. json o 171 00:08:12,920 --> 00:08:14,610 ‫risposta. send 172 00:08:14,610 --> 00:08:16,870 ‫e ci sono un sacco di 173 00:08:16,870 --> 00:08:19,587 ‫altri metodi e ne useremo molti in 174 00:08:19,587 --> 00:08:22,840 ‫seguito, ma poi qui hai queste risorse e quello 175 00:08:22,840 --> 00:08:24,210 ‫che voglio mostrarti è 176 00:08:24,210 --> 00:08:27,280 ‫il middleware e quindi, questo è un mucchio di 177 00:08:27,280 --> 00:08:28,520 ‫middleware che puoi 178 00:08:28,520 --> 00:08:30,790 ‫usare e che Express consiglia, ok? 179 00:08:30,790 --> 00:08:33,890 ‫E ancora, ne useremo alcuni un po' più tardi 180 00:08:33,890 --> 00:08:36,220 ‫e in realtà Express li consiglia perché 181 00:08:36,220 --> 00:08:39,510 ‫molti di questi erano incorporati in Express 3, quindi in 182 00:08:39,510 --> 00:08:40,650 ‫una versione 183 00:08:40,650 --> 00:08:43,550 ‫precedente ma poi sono stati rimossi da Express. 184 00:08:43,550 --> 00:08:46,170 ‫Ad esempio, corpo. parser è uno di 185 00:08:46,170 --> 00:08:48,430 ‫questi, ma in realtà nella versione 186 00:08:48,430 --> 00:08:51,910 ‫quattro punti, credo 14 o 16, è stato aggiunto di 187 00:08:51,910 --> 00:08:56,260 ‫nuovo ed è per questo che siamo stati in grado di fare, 188 00:08:56,260 --> 00:08:57,380 ‫vediamo, dov'è? 189 00:08:57,380 --> 00:09:00,830 ‫Sì, ecco perché siamo stati in grado di usare l'espressione. json per 190 00:09:00,830 --> 00:09:03,380 ‫analizzare i dati dal corpo. 191 00:09:03,380 --> 00:09:07,360 ‫Prima di ciò, dovremmo effettivamente usare il corpo. parser da npm e 192 00:09:07,360 --> 00:09:11,620 ‫usa quello per analizzare i dati dal corpo ma, di nuovo, 193 00:09:11,620 --> 00:09:14,040 ‫lo hanno appena aggiunto di nuovo 194 00:09:14,040 --> 00:09:18,210 ‫per ridurre un po' la confusione per i principianti come te. 195 00:09:18,210 --> 00:09:20,130 ‫Ok, quindi gioca un po' 196 00:09:20,130 --> 00:09:21,950 ‫con questo riferimento. 197 00:09:21,950 --> 00:09:23,120 ‫Dai un'occhiata ad 198 00:09:23,120 --> 00:09:26,032 ‫alcune delle cose che forse abbiamo già fatto se ne 199 00:09:26,032 --> 00:09:28,660 ‫hai voglia o, in caso contrario, puoi sempre passare 200 00:09:28,660 --> 00:09:29,963 ‫direttamente al video successivo.