1 00:00:03,680 --> 00:00:07,640 Per sviluppare ulteriormente la nostra applicazione, 2 00:00:07,640 --> 00:00:11,025 vogliamo configurare un semplice server 3 00:00:11,025 --> 00:00:14,890 che servirà i nostri dati richiesti dalla nostra applicazione. 4 00:00:14,890 --> 00:00:18,440 Finora, non abbiamo imparato abbastanza su come 5 00:00:18,440 --> 00:00:22,090 possiamo configurare un server che servirà un'API REST. 6 00:00:22,090 --> 00:00:26,410 Invece, faremo uso di un semplice modulo nodo chiamato json-server, 7 00:00:26,410 --> 00:00:32,990 che ci aiuta a configurare rapidamente un semplice server che servirà i dati che gli vengono dati 8 00:00:32,990 --> 00:00:36,230 sotto forma di un file JSON e anche 9 00:00:36,230 --> 00:00:39,600 servire le immagini che potrebbero essere richieste dalla nostra applicazione. 10 00:00:39,600 --> 00:00:41,020 Quindi, per iniziare, 11 00:00:41,020 --> 00:00:45,450 procediamo avanti per installare il modulo nodo json-server 12 00:00:45,450 --> 00:00:50,285 e, successivamente, configurare il nostro json-server in questo esercizio. 13 00:00:50,285 --> 00:00:53,945 Per iniziare, vai alla posizione comoda 14 00:00:53,945 --> 00:00:57,550 sul tuo computer e crea una cartella denominata json-server. 15 00:00:57,550 --> 00:01:01,820 Il motivo per cui creo questa cartella è che posso memorizzare tutti i file 16 00:01:01,820 --> 00:01:06,170 richiesti dal mio json-server in questa particolare cartella. 17 00:01:06,170 --> 00:01:15,290 Successivamente, installeremo il modulo npm json-server come modulo MPM globale. 18 00:01:15,290 --> 00:01:16,620 Quindi, per farlo, 19 00:01:16,620 --> 00:01:20,305 al prompt nel tuo terminale, 20 00:01:20,305 --> 00:01:27,430 digita npm install meno g json-server, 21 00:01:27,430 --> 00:01:30,575 quindi lascia che completi l'installazione 22 00:01:30,575 --> 00:01:34,820 del modulo npm json-server come modulo globale. 23 00:01:34,820 --> 00:01:39,525 Ora, nel caso in cui lo stai facendo su Linux o Mac, 24 00:01:39,525 --> 00:01:43,530 assicurati di usare sudo davanti ad esso. 25 00:01:46,460 --> 00:01:49,520 Una volta completata l'installazione, 26 00:01:49,520 --> 00:01:53,545 andare alle istruzioni per la configurazione del server 27 00:01:53,545 --> 00:01:56,935 json-e lì, forniamo un file chiamato db.json. 28 00:01:56,935 --> 00:02:01,040 Scaricare questo file e denominarlo come db.json e 29 00:02:01,040 --> 00:02:05,525 spostare il file nella cartella json-server creata nel passaggio precedente. 30 00:02:05,525 --> 00:02:10,490 Ora vedi che ho già scaricato il 31 00:02:10,490 --> 00:02:15,500 file db.json e quindi spostare quel file db.json nella cartella json-server. 32 00:02:15,500 --> 00:02:18,830 Inoltre, ho anche creato un'altra cartella, 33 00:02:18,830 --> 00:02:21,690 all'interno della cartella json-server, denominata public. 34 00:02:21,690 --> 00:02:26,375 Ora, qualunque cosa inseriamo in questa cartella pubblica sarà resa disponibile dal 35 00:02:26,375 --> 00:02:33,630 nostro json-server come risorsa che può essere scaricata dal nostro server. 36 00:02:33,630 --> 00:02:40,430 Così, il nostro json-server agisce come un semplice server web statico che può aiutarci 37 00:02:40,430 --> 00:02:46,770 a servire qualsiasi risorsa come immagini o anche un intero sito web. 38 00:02:46,770 --> 00:02:50,300 Se lo desideri, puoi copiarlo nella cartella pubblica e renderlo 39 00:02:50,300 --> 00:02:56,925 disponibile per essere servito dal server json-e visualizzato in un browser. 40 00:02:56,925 --> 00:02:59,650 Quindi, di nuovo, andare alle istruzioni, 41 00:02:59,650 --> 00:03:03,915 e quindi scaricare questo nome file zip images.zip, 42 00:03:03,915 --> 00:03:05,570 e quindi decomprimere questo file, 43 00:03:05,570 --> 00:03:08,490 e quindi si otterrà una cartella denominata immagini, 44 00:03:08,490 --> 00:03:13,880 che contiene un insieme di immagini PNG che faremo uso all'interno della nostra applicazione. 45 00:03:13,880 --> 00:03:16,470 Quindi, una volta che la cartella images è pronta, 46 00:03:16,470 --> 00:03:19,160 spostare quella cartella images nella cartella pubblica che abbiamo 47 00:03:19,160 --> 00:03:22,665 appena creato nella cartella json-server. 48 00:03:22,665 --> 00:03:24,485 Andando nella nostra cartella, 49 00:03:24,485 --> 00:03:26,420 vedrai che all'interno della cartella pubblica, 50 00:03:26,420 --> 00:03:31,070 ho già spostato la sottocartella delle immagini nella cartella pubblica qui, 51 00:03:31,070 --> 00:03:36,510 e questo contiene tutte le immagini che saranno utili per la mia applicazione. 52 00:03:36,510 --> 00:03:39,125 Per avviare il tuo json-server, 53 00:03:39,125 --> 00:03:43,470 vai alla cartella json-server nel tuo terminale e al prompt, 54 00:03:43,470 --> 00:03:50,665 digita json-server e meno guarda db.json. 55 00:03:50,665 --> 00:03:54,650 La ragione per l'utilizzo di questo flag di orologio 56 00:03:54,650 --> 00:03:58,610 è che questo json-server manterrà un controllo sul file bb.json 57 00:03:58,610 --> 00:04:01,279 e ogni volta che il file db.json viene modificato, 58 00:04:01,279 --> 00:04:07,810 ricaricherà il file db.json e inizierà a servire i dati modificati dal server. 59 00:04:07,810 --> 00:04:13,280 Inoltre, possiamo anche dare un flag meno d con un valore, 60 00:04:13,280 --> 00:04:15,035 ad esempio 2.000, il 61 00:04:15,035 --> 00:04:19,430 che significa che quando il server riceve una richiesta, 62 00:04:19,430 --> 00:04:25,380 servirà i dati al richiedente dopo un ritardo di 2 secondi. 63 00:04:25,380 --> 00:04:31,880 Ora, questo sarebbe usato per simulare il ritardo nell'accesso a un server su Internet. 64 00:04:31,880 --> 00:04:35,270 Quindi, questo è il motivo per cui suggerirei anche di usare il 65 00:04:35,270 --> 00:04:39,255 flag meno d 2.000 per il json-server. 66 00:04:39,255 --> 00:04:41,390 Quindi, avviamo il nostro json-server, 67 00:04:41,390 --> 00:04:44,735 e poi noterai che il server json-si avvia 68 00:04:44,735 --> 00:04:49,680 e dichiara tutte le risorse disponibili dal server json-. 69 00:04:49,680 --> 00:04:57,825 Quindi, puoi vedere che ha un insieme di risorse che sono disponibili a tutti questi URL. 70 00:04:57,825 --> 00:05:02,300 Inoltre, il server statico pubblico che fornisce 71 00:05:02,300 --> 00:05:07,825 dati statici è disponibile a questo URL, localhost:3000. 72 00:05:07,825 --> 00:05:13,445 Ora, puoi andare su qualsiasi browser e quindi se digiti 73 00:05:13,445 --> 00:05:20,515 localhost: 3000 e piatti barra, 74 00:05:20,515 --> 00:05:27,020 vedrai che questo inizierà a servire i nostri dati sotto forma di array JSON qui. 75 00:05:27,020 --> 00:05:30,530 Quindi, questo sarà utile per la nostra applicazione. 76 00:05:30,530 --> 00:05:37,395 Allo stesso modo, puoi digitare i leader 77 00:05:37,395 --> 00:05:39,110 e vedrai, di nuovo, 78 00:05:39,110 --> 00:05:41,095 i dati che vengono serviti e così via. 79 00:05:41,095 --> 00:05:45,760 Se si digita localhost: 3000, 80 00:05:45,760 --> 00:05:48,665 si vedrà che il server servirà 81 00:05:48,665 --> 00:05:53,395 i dati come server statico e quindi attualmente, è vuoto. 82 00:05:53,395 --> 00:05:57,860 Ora, se vuoi accedere alle immagini che sono disponibili dal server, 83 00:05:57,860 --> 00:06:06,520 posso semplicemente digitare le immagini e digitare il nome di un file PNG, 84 00:06:06,520 --> 00:06:10,020 e poi vedrai che servirà l'immagine corrispondente. 85 00:06:10,020 --> 00:06:12,570 Ora, questo è molto utile per noi, 86 00:06:12,570 --> 00:06:16,170 mentre sviluppiamo la nostra applicazione in questo corso. 87 00:06:16,170 --> 00:06:19,169 Con questo, completiamo questo esercizio, 88 00:06:19,169 --> 00:06:24,560 in cui abbiamo impostato un semplice server chiamato json-server per servire 89 00:06:24,560 --> 00:06:30,850 i dati e supportare un'API REST a cui possiamo accedere dalla nostra applicazione.