1 00:00:01,260 --> 00:00:02,700 ‫Istruttore: Bentornato. 2 00:00:02,700 --> 00:00:06,280 ‫Quindi spero che questa sezione ti sia piaciuta finora e che ti 3 00:00:06,280 --> 00:00:09,800 ‫diverta a lavorare con Node. js. 4 00:00:09,800 --> 00:00:13,100 ‫Quindi ora andiamo avanti nel 5 00:00:13,100 --> 00:00:17,573 ‫nostro progetto e costruiamo un'API web estremamente semplice. 6 00:00:19,430 --> 00:00:23,290 ‫Ora, per iniziare, cos'è in realtà un'API? 7 00:00:23,290 --> 00:00:25,759 ‫Bene, la risposta lunga, imparerai 8 00:00:25,759 --> 00:00:30,450 ‫in una delle prossime sezioni, ma per ora, la risposta breve, 9 00:00:30,450 --> 00:00:34,510 ‫almeno in questo contesto di API web, in pratica, 10 00:00:34,510 --> 00:00:39,510 ‫un'API è un servizio da cui possiamo richiedere alcuni dati, quindi in 11 00:00:39,750 --> 00:00:43,880 ‫questo caso, i dati che l'utente vuole richiedere sono dati 12 00:00:43,880 --> 00:00:46,470 ‫sui prodotti che stiamo offrendo in 13 00:00:46,470 --> 00:00:50,070 ‫questa farm di nodi, quindi in questo progetto. 14 00:00:50,070 --> 00:00:54,360 ‫Quindi ho qui questa cartella dev-data, e lì dentro ho 15 00:00:54,360 --> 00:00:58,870 ‫un file JSON e JSON, nel caso non lo sapessi, è 16 00:00:58,870 --> 00:01:01,500 ‫un formato di testo molto semplice 17 00:01:01,500 --> 00:01:04,250 ‫che assomiglia molto all'oggetto JavaScript, quindi 18 00:01:04,250 --> 00:01:07,720 ‫assomiglia a questo , e possiamo avere array, 19 00:01:07,720 --> 00:01:11,010 ‫che in realtà abbiamo, quindi abbiamo un 20 00:01:11,010 --> 00:01:14,630 ‫grande array, che contiene questi cinque oggetti e 21 00:01:14,630 --> 00:01:18,400 ‫ogni oggetto ha l'ID, il nome del prodotto, l'immagine 22 00:01:18,400 --> 00:01:20,160 ‫e così via. 23 00:01:20,160 --> 00:01:24,270 ‫Ora ognuno di questi deve essere una stringa per ciascuna delle 24 00:01:24,270 --> 00:01:26,593 ‫chiavi, e quindi abbiamo il valore. 25 00:01:29,828 --> 00:01:34,010 ‫Quindi, in pratica, questi dati qui sono ciò che la nostra 26 00:01:34,010 --> 00:01:36,673 ‫API invierà al cliente quando richiesto. 27 00:01:37,840 --> 00:01:40,763 ‫Quindi avremo ancora un altro percorso qui. 28 00:01:43,250 --> 00:01:48,250 ‫Quindi proprio qui, altrimenti se il nome del percorso è uguale a /api. 29 00:01:55,980 --> 00:01:59,580 ‫E per ora, come segnaposto, invieremo semplicemente l'API proprio 30 00:02:04,070 --> 00:02:05,703 ‫in questo modo. 31 00:02:08,520 --> 00:02:12,750 ‫Quindi quello che vogliamo fare ora è leggere effettivamente i 32 00:02:12,750 --> 00:02:17,500 ‫dati da questo file qui, quindi analizzare JSON in JavaScript e 33 00:02:17,500 --> 00:02:20,520 ‫quindi inviare il risultato al client. 34 00:02:20,520 --> 00:02:24,053 ‫Quindi qualcosa di molto semplice e quindi mettiamoci al lavoro. 35 00:02:26,430 --> 00:02:29,350 ‫Quindi il primo approccio per farlo 36 00:02:29,350 --> 00:02:33,400 ‫è entrare in questo percorso e quindi leggere il file qui 37 00:02:33,400 --> 00:02:36,350 ‫usando la funzione di lettura del file, giusto? 38 00:02:36,350 --> 00:02:37,853 ‫Quindi iniziamo facendo così. 39 00:02:40,110 --> 00:02:44,393 ‫Quindi f. e in realtà è readFile, 40 00:02:46,287 --> 00:02:50,110 ‫non fileRead, quindi readFile e quindi il nome del file. 41 00:02:50,110 --> 00:02:52,593 ‫Ora, ricorda come ti ho detto prima 42 00:02:52,593 --> 00:02:56,260 ‫che questo non è l'unico modo per localizzare il nostro 43 00:02:56,260 --> 00:02:58,223 ‫file nel file system. 44 00:02:59,300 --> 00:03:01,460 ‫Per ora usiamolo ancora, ma dopo 45 00:03:01,460 --> 00:03:03,510 ‫averlo scritto qui, ti mostrerò 46 00:03:03,510 --> 00:03:04,910 ‫un altro modo. 47 00:03:05,790 --> 00:03:10,790 ‫Quindi, una nota, questo punto qui in realtà si riferisce alla directory 48 00:03:11,260 --> 00:03:14,633 ‫da cui eseguiamo il comando node nel terminale. 49 00:03:15,740 --> 00:03:18,420 ‫Quindi, di nuovo, questo punto 50 00:03:18,420 --> 00:03:21,414 ‫qui in questo momento rappresenta questa cartella corrente 51 00:03:21,414 --> 00:03:25,800 ‫qui perché è lì che eseguiamo effettivamente il comando node, quindi 52 00:03:25,800 --> 00:03:28,600 ‫in questa cartella 1-node-farm, che è comunque 53 00:03:28,600 --> 00:03:32,270 ‫la nostra directory di lavoro corrente in questo caso, ma 54 00:03:32,270 --> 00:03:35,230 ‫potremmo avere esegui il comando node da 55 00:03:35,230 --> 00:03:38,260 ‫qualche altra parte, quindi il punto significherebbe qualcos'altro. 56 00:03:38,260 --> 00:03:42,860 ‫Quindi, ad esempio, potremmo trovare perfettamente, andare sul desktop 57 00:03:42,860 --> 00:03:46,380 ‫ed eseguire node lì, quindi specificare l'intero 58 00:03:46,380 --> 00:03:50,600 ‫percorso da indicizzare. js, ma potremmo farlo, ma 59 00:03:50,600 --> 00:03:55,080 ‫poi in questo caso, il punto significherebbe il desktop, quindi se avviassimo 60 00:03:55,080 --> 00:03:57,390 ‫lo script dal desktop, allora questo 61 00:03:57,390 --> 00:03:59,890 ‫qui, questo punto, significherebbe il desktop, 62 00:03:59,890 --> 00:04:03,200 ‫e quindi non è sempre l'ideale , e quindi, 63 00:04:03,200 --> 00:04:05,290 ‫c'è un modo migliore. 64 00:04:05,290 --> 00:04:08,230 ‫Quindi tutti i nodi. js, ottengono 65 00:04:08,230 --> 00:04:12,790 ‫l'accesso a una variabile chiamata dirname e quella variabile 66 00:04:12,790 --> 00:04:17,200 ‫si traduce sempre nella directory in cui si 67 00:04:17,200 --> 00:04:21,078 ‫trova lo script che stiamo attualmente eseguendo. 68 00:04:21,078 --> 00:04:24,170 ‫Quindi in questo caso, in realtà è lo 69 00:04:24,170 --> 00:04:28,410 ‫stesso posto perché index. js è anche in 70 00:04:28,410 --> 00:04:31,980 ‫questa cartella della farm del nodo, ma ancora una 71 00:04:31,980 --> 00:04:34,280 ‫volta, per i motivi che ho 72 00:04:34,280 --> 00:04:38,670 ‫menzionato prima, è molte volte una pratica migliore usare la variabile 73 00:04:38,670 --> 00:04:41,343 ‫dirname, quindi facciamolo e per questo 74 00:04:44,400 --> 00:04:46,690 ‫creiamo una stringa modello, e 75 00:04:46,690 --> 00:04:51,567 ‫poi usiamo la variabile, quindi è __dirname, che sta per directory name. 76 00:04:54,870 --> 00:04:57,870 ‫E quindi di solito lo facciamo così. 77 00:04:57,870 --> 00:04:59,850 ‫Ora c'è un'eccezione a questa 78 00:04:59,850 --> 00:05:01,963 ‫regola, che è la funzione require. 79 00:05:03,224 --> 00:05:05,140 ‫Quindi, quando richiediamo moduli, 80 00:05:05,140 --> 00:05:08,160 ‫possiamo effettivamente richiedere i nostri moduli, e lo faremo 81 00:05:08,160 --> 00:05:10,650 ‫un po' più tardi, come nel prossimo, 82 00:05:10,650 --> 00:05:13,800 ‫o in uno dei due prossimi video, e lì 83 00:05:13,800 --> 00:05:18,200 ‫dentro, il punto in realtà significa anche l'attuale funzionamento directory e non il 84 00:05:18,200 --> 00:05:20,863 ‫luogo da cui stiamo eseguendo lo script. 85 00:05:21,965 --> 00:05:25,270 ‫Quindi tieni presente che la funzione require è un'eccezione 86 00:05:25,270 --> 00:05:27,780 ‫a questa regola, ma di solito 87 00:05:27,780 --> 00:05:30,050 ‫il punto è dove è 88 00:05:30,050 --> 00:05:35,050 ‫in esecuzione lo script e __dirname è dove si trova il file corrente. 89 00:05:37,920 --> 00:05:42,920 ‫Bene, ora passiamo a specificare la codifica del file utf-8, 90 00:05:43,840 --> 00:05:48,840 ‫quindi la nostra funzione di callback, che è prima l'errore, 91 00:05:49,900 --> 00:05:54,900 ‫ricorda, e quindi ora abbiamo accesso a questi dati. 92 00:05:56,700 --> 00:05:59,920 ‫Ora i dati sono in JSON, e quindi in JavaScript, abbiamo 93 00:05:59,920 --> 00:06:04,023 ‫qualcosa integrato che si chiama JSON. analizzare. 94 00:06:06,290 --> 00:06:08,600 ‫E quindi questo prenderà il codice 95 00:06:08,600 --> 00:06:10,190 ‫JSON, che in 96 00:06:10,190 --> 00:06:14,400 ‫realtà è una stringa, e quindi lo trasformerà automaticamente in JavaScript, quindi 97 00:06:14,400 --> 00:06:17,593 ‫un oggetto o un array JavaScript in questo caso. 98 00:06:19,240 --> 00:06:21,117 ‫Chiamiamo questo prodotto ProductData e 99 00:06:23,857 --> 00:06:26,743 ‫quindi diamo anche un rapido sguardo ad esso. 100 00:06:32,500 --> 00:06:34,853 ‫Quindi nella console in questo caso. 101 00:06:36,520 --> 00:06:40,740 ‫Quindi, riavviando il server, e ora, non dimenticare di 102 00:06:40,740 --> 00:06:45,740 ‫premere il percorso / api, e oh, cosa sta succedendo qui? 103 00:06:47,520 --> 00:06:49,470 ‫Oh, abbiamo effettivamente riavviato il server. 104 00:06:52,545 --> 00:06:54,397 ‫E così ora otteniamo 105 00:06:55,330 --> 00:06:58,020 ‫un'API di risposta e ora diamo 106 00:06:58,020 --> 00:07:01,140 ‫un'occhiata qui, in realtà, all'oggetto dati del prodotto. 107 00:07:01,140 --> 00:07:04,340 ‫Quindi questo è solo un bell'oggetto, con tutti i 108 00:07:04,340 --> 00:07:09,340 ‫dati che avevamo in questi dati. json file. 109 00:07:09,620 --> 00:07:13,450 ‫Bene, ora il passaggio successivo è inviare 110 00:07:13,450 --> 00:07:16,653 ‫effettivamente questi dati come risposta. 111 00:07:17,640 --> 00:07:20,180 ‫Ora questa risposta. Il metodo 112 00:07:20,180 --> 00:07:24,953 ‫end qui deve effettivamente restituire una stringa e non un oggetto qui. 113 00:07:25,890 --> 00:07:28,510 ‫E quindi, in effetti, ciò che vogliamo restituire 114 00:07:28,510 --> 00:07:33,230 ‫sono i dati direttamente, quindi i dati sono una stringa che abbiamo poi trasformato 115 00:07:33,230 --> 00:07:37,410 ‫in un oggetto usando JSON. parse, ma per ora, 116 00:07:37,410 --> 00:07:41,730 ‫in realtà non avremmo bisogno di farlo, ma l'ho fatto 117 00:07:41,730 --> 00:07:44,445 ‫comunque perché ne avremo bisogno in 118 00:07:44,445 --> 00:07:48,130 ‫seguito quando inizieremo a costruire i nostri modelli HTML. 119 00:07:48,130 --> 00:07:50,710 ‫Ecco quando avremo bisogno di questi 120 00:07:50,710 --> 00:07:52,890 ‫dati in un formato JavaScript. 121 00:07:52,890 --> 00:07:56,280 ‫Per ora, vogliamo solo restituire la stringa effettiva 122 00:07:56,280 --> 00:07:57,453 ‫che riceviamo. 123 00:07:59,146 --> 00:08:02,380 ‫Ora, prima di poterlo fare, dobbiamo effettivamente 124 00:08:02,380 --> 00:08:04,220 ‫specificare, quindi dobbiamo 125 00:08:04,220 --> 00:08:09,220 ‫dire al browser che stiamo inviando indietro JSON, quindi proprio come prima, 126 00:08:10,110 --> 00:08:14,160 ‫dove impostiamo il tipo di contenuto su text/html, ora 127 00:08:14,160 --> 00:08:17,703 ‫dobbiamo dire a browser che stiamo inviando JSON. 128 00:08:19,060 --> 00:08:24,060 ‫Quindi diciamo ris. writeHead proprio come prima, e 129 00:08:24,160 --> 00:08:27,260 ‫ora stiamo usando il codice di stato 130 00:08:27,260 --> 00:08:31,830 ‫200, che sta per okay, e quindi l'oggetto delle intestazioni. 131 00:08:31,830 --> 00:08:35,330 ‫In questo caso, sarà solo uno, 132 00:08:40,320 --> 00:08:45,320 ‫quindi Content-type e quando inviamo JSON, dobbiamo dire application/json. 133 00:08:49,570 --> 00:08:53,240 ‫Quindi per HTML, è text/html, per 134 00:08:53,240 --> 00:08:56,323 ‫JSON, è application/json, e 135 00:08:58,330 --> 00:09:01,933 ‫ora diamo un'occhiata a questo. 136 00:09:05,200 --> 00:09:08,183 ‫Ricarica il server qui molto velocemente, e 137 00:09:12,600 --> 00:09:17,600 ‫infatti, qui abbiamo la nostra API che restituisce tutti i dati 138 00:09:17,690 --> 00:09:20,053 ‫sui nostri cinque prodotti. 139 00:09:20,950 --> 00:09:25,800 ‫Fantastico, è fantastico, ed è fantastico, ma in realtà non 140 00:09:25,800 --> 00:09:27,970 ‫è perfetto, perché non 141 00:09:27,970 --> 00:09:31,463 ‫è realmente efficiente al 100%, ed 142 00:09:32,546 --> 00:09:36,780 ‫è perché ogni volta che qualcuno ora raggiunge questo 143 00:09:36,780 --> 00:09:40,640 ‫percorso /api, il file dovrà essere letto e 144 00:09:40,640 --> 00:09:42,640 ‫poi rispedito . 145 00:09:42,640 --> 00:09:45,720 ‫Invece, quello che possiamo fare è leggere il file 146 00:09:45,720 --> 00:09:49,110 ‫solo una volta all'inizio, e poi ogni volta che qualcuno 147 00:09:49,110 --> 00:09:51,600 ‫percorre questa strada, semplicemente rispedire i 148 00:09:51,600 --> 00:09:55,273 ‫dati senza doverli leggere ogni volta che un utente ha richiesto. 149 00:09:56,410 --> 00:09:58,180 ‫Ha senso? 150 00:09:58,180 --> 00:10:01,423 ‫Bene, quello che farò è metterlo qui fuori. 151 00:10:03,550 --> 00:10:07,680 ‫Ok, e ovviamente non ho bisogno di tutto questo, quindi 152 00:10:07,680 --> 00:10:10,530 ‫questo non è qui, e questo 153 00:10:10,530 --> 00:10:12,720 ‫non è qui, e 154 00:10:12,720 --> 00:10:15,630 ‫in realtà sarà un po' diverso, e 155 00:10:15,630 --> 00:10:19,570 ‫questo perché ora useremo effettivamente la versione sincrona, e so 156 00:10:19,570 --> 00:10:22,280 ‫cosa stai pensando, che è che 157 00:10:22,280 --> 00:10:25,440 ‫la versione sincrona blocca l'esecuzione del codice, giusto? 158 00:10:25,440 --> 00:10:27,570 ‫E mentre questo è vero, in 159 00:10:27,570 --> 00:10:29,580 ‫questo caso, non è 160 00:10:29,580 --> 00:10:32,040 ‫affatto un problema, e questo perché il 161 00:10:32,040 --> 00:10:36,240 ‫codice di livello superiore in realtà viene eseguito solo una volta all'inizio. 162 00:10:36,240 --> 00:10:39,260 ‫Solo questa funzione di callback, ad esempio, qui, 163 00:10:39,260 --> 00:10:43,440 ‫quella createServer, quindi questa funzione qui, questo è ciò che viene 164 00:10:43,440 --> 00:10:46,160 ‫eseguito ogni volta che c'è una 165 00:10:46,160 --> 00:10:50,260 ‫nuova richiesta, ma non un codice che è qui fuori. 166 00:10:50,260 --> 00:10:53,210 ‫Il codice che è al di fuori 167 00:10:53,210 --> 00:10:57,500 ‫delle funzioni di callback, quindi il cosiddetto codice di primo livello, 168 00:10:57,500 --> 00:11:01,500 ‫viene sempre eseguito solo una volta avviato il programma, quindi 169 00:11:01,500 --> 00:11:04,660 ‫in quella situazione non importa se blocca l'esecuzione, 170 00:11:04,660 --> 00:11:07,350 ‫perché di nuovo, succede solo una 171 00:11:07,350 --> 00:11:11,160 ‫volta e solo quando il codice si avvia effettivamente, giusto? 172 00:11:11,160 --> 00:11:12,820 ‫Ha senso? 173 00:11:12,820 --> 00:11:16,060 ‫E quindi useremo la versione di sincronizzazione ora 174 00:11:16,060 --> 00:11:19,100 ‫perché in realtà è più facile gestire 175 00:11:19,100 --> 00:11:23,060 ‫quei dati, perché semplicemente mette i dati in una variabile 176 00:11:23,060 --> 00:11:25,253 ‫che non possiamo usare subito. 177 00:11:27,930 --> 00:11:32,180 ‫Quindi non preoccuparti del fatto che questa funzione sia bloccante perché, ancora 178 00:11:32,180 --> 00:11:34,800 ‫una volta, è nel codice di livello superiore 179 00:11:34,800 --> 00:11:37,200 ‫e viene eseguita solo una volta. 180 00:11:37,200 --> 00:11:39,410 ‫Il segreto qui è semplicemente sapere 181 00:11:39,410 --> 00:11:42,530 ‫quale codice viene eseguito solo una volta e solo 182 00:11:42,530 --> 00:11:45,890 ‫all'inizio e quale codice viene eseguito più e più volte, 183 00:11:45,890 --> 00:11:49,663 ‫ed è quindi problematico quando si blocca il ciclo degli eventi. 184 00:11:50,560 --> 00:11:52,240 ‫E naturalmente, durante 185 00:11:52,240 --> 00:11:55,990 ‫il resto di questo grande, grande corso, lo imparerai. 186 00:11:55,990 --> 00:11:58,650 ‫Quindi imparerai tutto sul ciclo degli eventi, e 187 00:11:58,650 --> 00:12:01,990 ‫quale codice sta bloccando e quale no, e perché, quindi questa 188 00:12:01,990 --> 00:12:04,760 ‫è solo la prima volta che lo menziono, ma 189 00:12:04,760 --> 00:12:06,560 ‫non sarà l'ultima volta. 190 00:12:07,620 --> 00:12:11,173 ‫Mi sentirai ripetere sempre le stesse cose. 191 00:12:14,180 --> 00:12:18,550 ‫Quindi, chiamando solo questo dato, e poi, ovviamente, non abbiamo bisogno di 192 00:12:18,550 --> 00:12:20,423 ‫niente di tutto questo. 193 00:12:21,550 --> 00:12:24,253 ‫Spostiamolo qui fuori e basta. 194 00:12:29,040 --> 00:12:32,120 ‫Quindi, prima che accada qualcosa, leggerà i dati 195 00:12:32,120 --> 00:12:34,340 ‫dal file JSON in dati. 196 00:12:34,340 --> 00:12:38,740 ‫Quindi lo analizzerà anche in un oggetto. 197 00:12:38,740 --> 00:12:43,043 ‫Chiamiamolo qui dataObject, quindi quello che faremo qui è 198 00:12:44,370 --> 00:12:48,060 ‫non leggere questo file ogni volta che 199 00:12:48,060 --> 00:12:51,030 ‫c'è una richiesta, e invece, semplicemente 200 00:12:51,030 --> 00:12:55,960 ‫inviare indietro i dati che abbiamo ora nel nostro codice di 201 00:12:55,960 --> 00:12:57,283 ‫primo livello. 202 00:13:04,010 --> 00:13:08,450 ‫Quindi questi dati qui ora provengono da qui perché, ovviamente, questo 203 00:13:08,450 --> 00:13:11,060 ‫codice nella funzione di callback ha 204 00:13:11,060 --> 00:13:15,543 ‫accesso al codice di livello superiore a causa della catena dell'ambito, giusto? 205 00:13:17,510 --> 00:13:21,000 ‫Annullamento, esecuzione di nuovo e solo per dimostrarti 206 00:13:21,000 --> 00:13:23,803 ‫che funziona ancora, e funziona. 207 00:13:25,070 --> 00:13:28,560 ‫Così perfetto, ed è meglio, è più efficiente, oh, e 208 00:13:28,560 --> 00:13:30,023 ‫perché l'ho chiuso? 209 00:13:31,470 --> 00:13:34,863 ‫Va bene, apriamolo di nuovo molto velocemente. 210 00:13:37,890 --> 00:13:38,793 ‫Quindi eccoci qui. 211 00:13:41,430 --> 00:13:45,890 ‫Quindi questa è la nostra API molto semplice, che ora consente all'utente 212 00:13:45,890 --> 00:13:49,430 ‫di richiedere semplicemente tutti i dati sulla nostra applicazione 213 00:13:49,430 --> 00:13:52,353 ‫con una singola chiamata API, in pratica. 214 00:13:53,810 --> 00:13:56,740 ‫Quindi abbiamo aggiunto un'altra route qui, 215 00:13:56,740 --> 00:13:59,340 ‫/api, quindi abbiamo letto il file 216 00:13:59,340 --> 00:14:02,930 ‫in modo sincrono, lo abbiamo inserito in questo 217 00:14:02,930 --> 00:14:06,010 ‫oggetto e quindi abbiamo semplicemente inviato indietro 218 00:14:06,010 --> 00:14:11,010 ‫quell'oggetto come risposta, ma prima, specificando che stiamo rimandando application/json, quindi che 219 00:14:11,353 --> 00:14:15,200 ‫il browser sa esattamente cosa aspettarsi, e nei prossimi 220 00:14:15,200 --> 00:14:16,720 ‫due video 221 00:14:16,720 --> 00:14:19,730 ‫inizieremo effettivamente a costruire l'interfaccia utente, quindi 222 00:14:19,730 --> 00:14:22,673 ‫questa è la parte più eccitante, giusto?