1 00:00:01,170 --> 00:00:04,190 ‫Iniziamo impostando il nostro motore di template in 2 00:00:04,190 --> 00:00:06,480 ‫Express, che ci permetterà poi di 3 00:00:06,480 --> 00:00:09,830 ‫renderizzare i siti web usando dei template semplici come 4 00:00:09,830 --> 00:00:11,333 ‫abbiamo detto prima. 5 00:00:12,660 --> 00:00:14,520 ‫Quindi, come ormai saprai, 6 00:00:14,520 --> 00:00:16,850 ‫in questa parte del corso è 7 00:00:16,850 --> 00:00:21,210 ‫ora di inviare effettivamente un sito Web renderizzato finale al cliente 8 00:00:21,210 --> 00:00:23,200 ‫contenente, ovviamente, tutti i dati 9 00:00:23,200 --> 00:00:25,590 ‫con cui abbiamo lavorato fino a 10 00:00:25,590 --> 00:00:28,770 ‫questo punto, come i tour, utenti e recensioni. 11 00:00:28,770 --> 00:00:32,970 ‫Ora, come realizziamo o rendiamo effettivamente questi siti Web? 12 00:00:32,970 --> 00:00:35,920 ‫Bene, usiamo quello che viene chiamato un motore di 13 00:00:35,920 --> 00:00:38,060 ‫modelli che ci consentirà di creare 14 00:00:38,060 --> 00:00:41,610 ‫un modello e quindi riempire facilmente quel modello con i nostri dati. 15 00:00:41,610 --> 00:00:43,580 ‫E il motore di template 16 00:00:43,580 --> 00:00:46,210 ‫che useremo in questo corso si chiama pug. 17 00:00:46,210 --> 00:00:48,700 ‫Ci sono un paio di altri 18 00:00:48,700 --> 00:00:52,800 ‫motori di modelli come manubri o EGS per le persone a cui 19 00:00:52,800 --> 00:00:56,010 ‫non piace pug, perché so che ci sono alcune 20 00:00:56,010 --> 00:00:59,160 ‫opinioni forti su pug, ma direi comunque che pug 21 00:00:59,160 --> 00:01:03,190 ‫è in realtà il motore di modelli più comunemente usato con Express. 22 00:01:03,190 --> 00:01:05,650 ‫Quindi ora, in questo video, impostiamo pug 23 00:01:05,650 --> 00:01:08,453 ‫e rendiamo la nostra primissima pagina web usandolo. 24 00:01:09,310 --> 00:01:11,920 ‫Il primo passo è dire 25 00:01:11,920 --> 00:01:14,510 ‫effettivamente a Express quale motore 26 00:01:14,510 --> 00:01:16,970 ‫di template useremo, e lo 27 00:01:16,970 --> 00:01:18,920 ‫facciamo dicendo proprio 28 00:01:19,910 --> 00:01:24,050 ‫all'inizio qui dell'app, app. set, quindi fondamentalmente questa 29 00:01:24,050 --> 00:01:29,050 ‫è come un'impostazione per il motore di visualizzazione, quindi la impostiamo su pug. 30 00:01:32,600 --> 00:01:33,910 ‫E questo è tutto. 31 00:01:33,910 --> 00:01:35,850 ‫Quindi Express supporta 32 00:01:35,850 --> 00:01:38,320 ‫automaticamente i motori più comuni e, 33 00:01:38,320 --> 00:01:40,970 ‫naturalmente, pug è uno di questi. 34 00:01:40,970 --> 00:01:43,470 ‫Quindi in realtà non abbiamo nemmeno bisogno di installare pug, e 35 00:01:43,470 --> 00:01:45,940 ‫non abbiamo nemmeno bisogno di richiederlo da nessuna parte. 36 00:01:45,940 --> 00:01:47,660 ‫Tutto questo accade 37 00:01:47,660 --> 00:01:49,870 ‫dietro le quinte all'interno di Express. 38 00:01:49,870 --> 00:01:51,910 ‫Quindi abbiamo definito il nostro motore 39 00:01:51,910 --> 00:01:54,450 ‫di visualizzazione, ora dobbiamo anche definire dove si 40 00:01:54,450 --> 00:01:57,013 ‫trovano effettivamente queste viste nel nostro file system. 41 00:01:57,916 --> 00:02:02,230 ‫Quindi i nostri modelli di pug sono in realtà chiamati visualizzazioni in Express. 42 00:02:02,230 --> 00:02:04,960 ‫Questo perché questi modelli sono in effetti 43 00:02:04,960 --> 00:02:08,090 ‫le viste nell'architettura del controller della vista del modello 44 00:02:08,090 --> 00:02:11,720 ‫che abbiamo usato in questo corso fino a questo punto. 45 00:02:11,720 --> 00:02:13,980 ‫Come sai, abbiamo già i controller e 46 00:02:13,980 --> 00:02:15,273 ‫le cartelle dei modelli. 47 00:02:16,180 --> 00:02:17,650 ‫In realtà chiudiamo questi. 48 00:02:17,650 --> 00:02:20,703 ‫E quindi ora è il momento di creare effettivamente la cartella delle visualizzazioni. 49 00:02:25,210 --> 00:02:27,590 ‫Con questo abbiamo i tre 50 00:02:27,590 --> 00:02:29,583 ‫componenti dell'architettura MVC. 51 00:02:30,900 --> 00:02:32,860 ‫Per definire ora in quale cartella si trovano 52 00:02:32,860 --> 00:02:35,070 ‫effettivamente le nostre viste, tutto ciò che dobbiamo 53 00:02:35,070 --> 00:02:38,943 ‫fare di nuovo è dire app. set, e questa volta 54 00:02:40,660 --> 00:02:44,763 ‫è l'impostazione della vista, o effettivamente le viste, e quindi 55 00:02:46,310 --> 00:02:48,660 ‫qui il nome del percorso. 56 00:02:48,660 --> 00:02:52,500 ‫Ora qui potremmo semplicemente mettere qualcosa 57 00:02:52,500 --> 00:02:57,380 ‫del genere, quindi /views, ma non è l'ideale. 58 00:02:57,380 --> 00:03:00,040 ‫Come già saprai, il percorso che forniamo qui 59 00:03:00,040 --> 00:03:02,330 ‫è sempre relativo alla directory da 60 00:03:02,330 --> 00:03:05,240 ‫cui abbiamo avviato l'applicazione Note e che di solito 61 00:03:05,240 --> 00:03:07,760 ‫è la cartella principale del progetto, ma 62 00:03:07,760 --> 00:03:09,180 ‫potrebbe non esserlo. 63 00:03:09,180 --> 00:03:11,170 ‫Quindi non dovremmo usare il punto 64 00:03:11,170 --> 00:03:14,410 ‫qui, ma dovremmo invece usare la variabile del nome della directory. 65 00:03:14,410 --> 00:03:17,550 ‫Quindi facciamolo, e insieme a un bel 66 00:03:17,550 --> 00:03:22,150 ‫trucco che possiamo usare con Note, che sta usando il modulo percorso. 67 00:03:22,150 --> 00:03:26,340 ‫Path è un modulo Note integrato, quindi un modulo principale, che viene 68 00:03:26,340 --> 00:03:29,593 ‫utilizzato per manipolare i nomi dei percorsi, in pratica. 69 00:03:32,130 --> 00:03:35,860 ‫Quindi richiedi il percorso, quindi ovviamente non 70 00:03:35,860 --> 00:03:37,650 ‫dobbiamo installare nulla. 71 00:03:37,650 --> 00:03:40,143 ‫È solo un modulo integrato nativo. 72 00:03:41,320 --> 00:03:44,333 ‫Quello che possiamo fare ora è il percorso. join, quindi 73 00:03:46,340 --> 00:03:51,340 ‫il nome della directory e infine views. 74 00:03:52,930 --> 00:03:55,790 ‫Questo quindi, fondamentalmente dietro le quinte, 75 00:03:55,790 --> 00:04:00,403 ‫creerà un percorso che unisce il nome della directory /views. 76 00:04:01,640 --> 00:04:03,520 ‫Ora potrebbe sembrare un po' 77 00:04:03,520 --> 00:04:06,620 ‫eccessivo utilizzare questo percorso. funzione join qui, 78 00:04:06,620 --> 00:04:08,880 ‫ma non sempre sappiamo se un 79 00:04:08,880 --> 00:04:13,120 ‫percorso che riceviamo da qualche parte ha già una barra o meno. 80 00:04:13,120 --> 00:04:16,290 ‫Quindi vedrai questa funzione qui usata sempre 81 00:04:16,290 --> 00:04:19,040 ‫per prevenire questo tipo di bug. 82 00:04:19,040 --> 00:04:21,440 ‫Perché in questo modo non abbiamo nemmeno 83 00:04:21,440 --> 00:04:23,380 ‫bisogno di pensare a eventuali 84 00:04:23,380 --> 00:04:26,463 ‫barre o meno, perché Note creerà automaticamente un percorso corretto. 85 00:04:28,140 --> 00:04:30,140 ‫In realtà dovremmo 86 00:04:30,140 --> 00:04:33,343 ‫usarlo anche qui dove creiamo questo middleware. 87 00:04:34,290 --> 00:04:37,623 ‫Qui dovremmo effettivamente usare la stessa identica cosa qui. 88 00:04:39,070 --> 00:04:40,533 ‫Quindi duplichiamo questo. 89 00:04:43,540 --> 00:04:45,703 ‫Quindi percorso join e pubblico. 90 00:04:54,470 --> 00:04:57,510 ‫In realtà mettiamo questo qui in alto, 91 00:04:57,510 --> 00:05:01,373 ‫perché in un certo senso appartiene insieme a questi qui. 92 00:05:02,330 --> 00:05:04,580 ‫È ancora un middleware, ma come vedrai 93 00:05:04,580 --> 00:05:07,020 ‫in uno dei prossimi video, funziona a stretto 94 00:05:07,020 --> 00:05:09,053 ‫contatto con un motore di visualizzazione. 95 00:05:10,520 --> 00:05:14,050 ‫Ma questo qui ora abbiamo installato il nostro motore del carlino. 96 00:05:14,050 --> 00:05:17,400 ‫Ora è il momento di creare il nostro primissimo modello. 97 00:05:17,400 --> 00:05:19,890 ‫Quindi qui creiamo il nostro primo file 98 00:05:21,660 --> 00:05:24,970 ‫pug chiamato base. pug, e come vedrai 99 00:05:24,970 --> 00:05:29,453 ‫il vs code ha effettivamente la sua bella icona per questo tipo di file. 100 00:05:30,919 --> 00:05:32,950 ‫Tutto quello che voglio fare 101 00:05:32,950 --> 00:05:36,220 ‫qui per ora è creare un elemento h1, quindi un'intestazione principale 102 00:05:36,220 --> 00:05:38,660 ‫semplicemente con il nome di qualche tour, e 103 00:05:38,660 --> 00:05:41,720 ‫il modo in cui funziona con pug è proprio così. 104 00:05:41,720 --> 00:05:45,170 ‫Quindi h1, e quindi il contenuto dell'elemento. 105 00:05:45,170 --> 00:05:49,030 ‫Diciamo Il Park Camper. 106 00:05:49,030 --> 00:05:50,520 ‫E questo è in realtà! 107 00:05:50,520 --> 00:05:54,730 ‫Questo si tradurrà quindi in questo 108 00:05:54,730 --> 00:05:59,730 ‫qui, h1 The Park Camper, e poi lo chiuderai. 109 00:06:04,730 --> 00:06:07,680 ‫Quindi, in html dovremmo scrivere questo, ma la 110 00:06:07,680 --> 00:06:10,250 ‫sintassi pug rende molto più facile scrivere 111 00:06:10,250 --> 00:06:12,193 ‫html in questo modo. 112 00:06:13,470 --> 00:06:14,670 ‫Ovviamente ci consentirà 113 00:06:14,670 --> 00:06:16,880 ‫anche di inserire tutti i tipi di variabili 114 00:06:16,880 --> 00:06:19,780 ‫qui, in modo da poter davvero iniettare i nostri dati in 115 00:06:19,780 --> 00:06:21,650 ‫questi modelli, ma per ora sono 116 00:06:21,650 --> 00:06:23,853 ‫davvero interessato solo a inserire qualcosa nel browser. 117 00:06:25,240 --> 00:06:27,570 ‫Molto di più su come funziona effettivamente il 118 00:06:27,570 --> 00:06:29,220 ‫carlino nelle prossime due lezioni. 119 00:06:30,870 --> 00:06:33,400 ‫Per ora abbiamo il nostro modello di base qui e 120 00:06:33,400 --> 00:06:34,793 ‫tieni a mente quel nome. 121 00:06:37,225 --> 00:06:40,680 ‫Ora possiamo effettivamente creare un nuovo percorso dal 122 00:06:40,680 --> 00:06:43,383 ‫quale accederemo a quel modello. 123 00:06:45,260 --> 00:06:48,893 ‫Quindi facciamolo qui proprio prima del percorso API. 124 00:06:51,160 --> 00:06:56,160 ‫Quindi, app. get, che per il rendering delle pagine in 125 00:06:56,680 --> 00:06:59,060 ‫un browser di solito è sempre 126 00:06:59,060 --> 00:07:02,990 ‫quello che usiamo, e quindi ha specificato l'URL qui, quindi il percorso, e 127 00:07:02,990 --> 00:07:05,763 ‫questa è semplicemente la radice del nostro sito web. 128 00:07:07,060 --> 00:07:10,283 ‫Quindi, proprio come prima, abbiamo ovviamente bisogno di una 129 00:07:11,780 --> 00:07:14,363 ‫funzione di gestione, quindi richiesta, risposta e 130 00:07:17,140 --> 00:07:19,150 ‫ora per eseguire il 131 00:07:19,150 --> 00:07:22,210 ‫rendering del nostro modello proprio come prima di 132 00:07:22,210 --> 00:07:27,210 ‫utilizzare l'oggetto risposta, in questo caso impostiamo ancora lo stato su 200 per okay. 133 00:07:28,100 --> 00:07:31,830 ‫Ma poi invece di usare json, in questo modo, come abbiamo 134 00:07:31,830 --> 00:07:34,250 ‫sempre usato fino a questo punto, 135 00:07:34,250 --> 00:07:37,133 ‫ora è il momento di usare il rendering. 136 00:07:38,015 --> 00:07:40,230 ‫Quindi render renderà il modello 137 00:07:40,230 --> 00:07:42,340 ‫con il nome che 138 00:07:42,340 --> 00:07:44,963 ‫passiamo, e cioè in questo caso, base. 139 00:07:46,640 --> 00:07:49,910 ‫Non abbiamo nemmeno bisogno di specificare l'estensione 140 00:07:49,910 --> 00:07:52,070 ‫pug perché Express saprà automaticamente 141 00:07:52,070 --> 00:07:54,490 ‫che questo è il file 142 00:07:54,490 --> 00:07:56,920 ‫che stiamo cercando e ovviamente cercherà 143 00:07:56,920 --> 00:07:59,060 ‫questo file all'interno 144 00:07:59,060 --> 00:08:03,600 ‫della cartella che è stata specificata all'inizio, quindi questo uno. 145 00:08:03,600 --> 00:08:05,390 ‫Andrà nella cartella delle viste 146 00:08:05,390 --> 00:08:08,303 ‫e lì cercherà il modello con la base del nome. 147 00:08:09,920 --> 00:08:12,840 ‫Quindi prenderà quel modello e lo renderà, 148 00:08:12,840 --> 00:08:16,430 ‫quindi in pratica lo invierà come risposta al browser. 149 00:08:16,430 --> 00:08:18,563 ‫Ottimo, quindi proviamolo ora. 150 00:08:22,190 --> 00:08:23,850 ‫Quindi, il nostro server 151 00:08:23,850 --> 00:08:27,223 ‫è ancora in esecuzione sulla porta host locale 3000, credo. 152 00:08:32,170 --> 00:08:34,970 ‫E questo ci dà questo errore, 153 00:08:34,970 --> 00:08:37,790 ‫impossibile trovare il modulo pug, quindi in 154 00:08:37,790 --> 00:08:41,323 ‫realtà abbiamo davvero bisogno di installare il modulo pug. 155 00:08:42,845 --> 00:08:45,250 ‫Quindi ho detto prima che non l'abbiamo 156 00:08:45,250 --> 00:08:47,723 ‫fatto, ma in realtà abbiamo bisogno di farlo. 157 00:08:49,220 --> 00:08:52,210 ‫Express lo caricherà automaticamente dietro le quinte, ma non 158 00:08:52,210 --> 00:08:54,890 ‫viene fornito con tutti questi motori di modelli 159 00:08:54,890 --> 00:08:56,553 ‫installati fuori dalla scatola. 160 00:08:57,460 --> 00:08:59,753 ‫Quindi npm install pug. 161 00:09:06,063 --> 00:09:08,063 ‫Ed eccoci qui, quindi 162 00:09:09,220 --> 00:09:11,620 ‫proviamoci di nuovo, e ora 163 00:09:11,620 --> 00:09:14,310 ‫davvero otteniamo il camper del parco. 164 00:09:14,310 --> 00:09:17,610 ‫Questo è il nostro elemento h1 che 165 00:09:17,610 --> 00:09:22,610 ‫abbiamo appena creato nella base. pug, e se ora lo 166 00:09:22,830 --> 00:09:26,750 ‫esaminiamo, vedrai che è un semplice elemento h1. 167 00:09:26,750 --> 00:09:28,210 ‫Ovviamente non ci sono 168 00:09:28,210 --> 00:09:31,160 ‫stili e CSS a questo punto, ma ce 169 00:09:31,160 --> 00:09:32,530 ‫ne occuperemo 170 00:09:32,530 --> 00:09:34,290 ‫nelle prossime due lezioni. 171 00:09:34,290 --> 00:09:36,180 ‫Per ora ciò che conta qui 172 00:09:36,180 --> 00:09:40,070 ‫è che quando accediamo alla nostra radice, instradamo qui sul nostro host, quindi 173 00:09:40,070 --> 00:09:42,883 ‫avere questo è davvero lo stesso che avere questo. 174 00:09:44,560 --> 00:09:46,810 ‫Quando accediamo a questo percorso, ora otteniamo 175 00:09:46,810 --> 00:09:48,900 ‫l'accesso a un sito Web 176 00:09:48,900 --> 00:09:53,320 ‫reso dinamicamente basato sulla nostra base. modello di carlino, fantastico. 177 00:09:53,320 --> 00:09:56,150 ‫Questo è il primo passo su come configurare pug e 178 00:09:56,150 --> 00:09:57,670 ‫nel corso delle prossime 179 00:09:57,670 --> 00:10:00,570 ‫due lezioni imparerai a utilizzare davvero questo motore di modelli 180 00:10:00,570 --> 00:10:02,663 ‫per creare siti Web sorprendenti e dinamici.