‫Iniziamo impostando il nostro motore di template in
‫Express, che ci permetterà poi di
‫renderizzare i siti web usando dei template semplici come
‫abbiamo detto prima.
‫Quindi, come ormai saprai,
‫in questa parte del corso è
‫ora di inviare effettivamente un sito Web renderizzato finale al cliente
‫contenente, ovviamente, tutti i dati
‫con cui abbiamo lavorato fino a
‫questo punto, come i tour, utenti e recensioni.
‫Ora, come realizziamo o rendiamo effettivamente questi siti Web?
‫Bene, usiamo quello che viene chiamato un motore di
‫modelli che ci consentirà di creare
‫un modello e quindi riempire facilmente quel modello con i nostri dati.
‫E il motore di template
‫che useremo in questo corso si chiama pug.
‫Ci sono un paio di altri
‫motori di modelli come manubri o EGS per le persone a cui
‫non piace pug, perché so che ci sono alcune
‫opinioni forti su pug, ma direi comunque che pug
‫è in realtà il motore di modelli più comunemente usato con Express.
‫Quindi ora, in questo video, impostiamo pug
‫e rendiamo la nostra primissima pagina web usandolo.
‫Il primo passo è dire
‫effettivamente a Express quale motore
‫di template useremo, e lo
‫facciamo dicendo proprio
‫all'inizio qui dell'app, app. set, quindi fondamentalmente questa
‫è come un'impostazione per il motore di visualizzazione, quindi la impostiamo su pug.
‫E questo è tutto.
‫Quindi Express supporta
‫automaticamente i motori più comuni e,
‫naturalmente, pug è uno di questi.
‫Quindi in realtà non abbiamo nemmeno bisogno di installare pug, e
‫non abbiamo nemmeno bisogno di richiederlo da nessuna parte.
‫Tutto questo accade
‫dietro le quinte all'interno di Express.
‫Quindi abbiamo definito il nostro motore
‫di visualizzazione, ora dobbiamo anche definire dove si
‫trovano effettivamente queste viste nel nostro file system.
‫Quindi i nostri modelli di pug sono in realtà chiamati visualizzazioni in Express.
‫Questo perché questi modelli sono in effetti
‫le viste nell'architettura del controller della vista del modello
‫che abbiamo usato in questo corso fino a questo punto.
‫Come sai, abbiamo già i controller e
‫le cartelle dei modelli.
‫In realtà chiudiamo questi.
‫E quindi ora è il momento di creare effettivamente la cartella delle visualizzazioni.
‫Con questo abbiamo i tre
‫componenti dell'architettura MVC.
‫Per definire ora in quale cartella si trovano
‫effettivamente le nostre viste, tutto ciò che dobbiamo
‫fare di nuovo è dire app. set, e questa volta
‫è l'impostazione della vista, o effettivamente le viste, e quindi
‫qui il nome del percorso.
‫Ora qui potremmo semplicemente mettere qualcosa
‫del genere, quindi /views, ma non è l'ideale.
‫Come già saprai, il percorso che forniamo qui
‫è sempre relativo alla directory da
‫cui abbiamo avviato l'applicazione Note e che di solito
‫è la cartella principale del progetto, ma
‫potrebbe non esserlo.
‫Quindi non dovremmo usare il punto
‫qui, ma dovremmo invece usare la variabile del nome della directory.
‫Quindi facciamolo, e insieme a un bel
‫trucco che possiamo usare con Note, che sta usando il modulo percorso.
‫Path è un modulo Note integrato, quindi un modulo principale, che viene
‫utilizzato per manipolare i nomi dei percorsi, in pratica.
‫Quindi richiedi il percorso, quindi ovviamente non
‫dobbiamo installare nulla.
‫È solo un modulo integrato nativo.
‫Quello che possiamo fare ora è il percorso. join, quindi
‫il nome della directory e infine views.
‫Questo quindi, fondamentalmente dietro le quinte,
‫creerà un percorso che unisce il nome della directory /views.
‫Ora potrebbe sembrare un po'
‫eccessivo utilizzare questo percorso. funzione join qui,
‫ma non sempre sappiamo se un
‫percorso che riceviamo da qualche parte ha già una barra o meno.
‫Quindi vedrai questa funzione qui usata sempre
‫per prevenire questo tipo di bug.
‫Perché in questo modo non abbiamo nemmeno
‫bisogno di pensare a eventuali
‫barre o meno, perché Note creerà automaticamente un percorso corretto.
‫In realtà dovremmo
‫usarlo anche qui dove creiamo questo middleware.
‫Qui dovremmo effettivamente usare la stessa identica cosa qui.
‫Quindi duplichiamo questo.
‫Quindi percorso join e pubblico.
‫In realtà mettiamo questo qui in alto,
‫perché in un certo senso appartiene insieme a questi qui.
‫È ancora un middleware, ma come vedrai
‫in uno dei prossimi video, funziona a stretto
‫contatto con un motore di visualizzazione.
‫Ma questo qui ora abbiamo installato il nostro motore del carlino.
‫Ora è il momento di creare il nostro primissimo modello.
‫Quindi qui creiamo il nostro primo file
‫pug chiamato base. pug, e come vedrai
‫il vs code ha effettivamente la sua bella icona per questo tipo di file.
‫Tutto quello che voglio fare
‫qui per ora è creare un elemento h1, quindi un'intestazione principale
‫semplicemente con il nome di qualche tour, e
‫il modo in cui funziona con pug è proprio così.
‫Quindi h1, e quindi il contenuto dell'elemento.
‫Diciamo Il Park Camper.
‫E questo è in realtà!
‫Questo si tradurrà quindi in questo
‫qui, h1 The Park Camper, e poi lo chiuderai.
‫Quindi, in html dovremmo scrivere questo, ma la
‫sintassi pug rende molto più facile scrivere
‫html in questo modo.
‫Ovviamente ci consentirà
‫anche di inserire tutti i tipi di variabili
‫qui, in modo da poter davvero iniettare i nostri dati in
‫questi modelli, ma per ora sono
‫davvero interessato solo a inserire qualcosa nel browser.
‫Molto di più su come funziona effettivamente il
‫carlino nelle prossime due lezioni.
‫Per ora abbiamo il nostro modello di base qui e
‫tieni a mente quel nome.
‫Ora possiamo effettivamente creare un nuovo percorso dal
‫quale accederemo a quel modello.
‫Quindi facciamolo qui proprio prima del percorso API.
‫Quindi, app. get, che per il rendering delle pagine in
‫un browser di solito è sempre
‫quello che usiamo, e quindi ha specificato l'URL qui, quindi il percorso, e
‫questa è semplicemente la radice del nostro sito web.
‫Quindi, proprio come prima, abbiamo ovviamente bisogno di una
‫funzione di gestione, quindi richiesta, risposta e
‫ora per eseguire il
‫rendering del nostro modello proprio come prima di
‫utilizzare l'oggetto risposta, in questo caso impostiamo ancora lo stato su 200 per okay.
‫Ma poi invece di usare json, in questo modo, come abbiamo
‫sempre usato fino a questo punto,
‫ora è il momento di usare il rendering.
‫Quindi render renderà il modello
‫con il nome che
‫passiamo, e cioè in questo caso, base.
‫Non abbiamo nemmeno bisogno di specificare l'estensione
‫pug perché Express saprà automaticamente
‫che questo è il file
‫che stiamo cercando e ovviamente cercherà
‫questo file all'interno
‫della cartella che è stata specificata all'inizio, quindi questo uno.
‫Andrà nella cartella delle viste
‫e lì cercherà il modello con la base del nome.
‫Quindi prenderà quel modello e lo renderà,
‫quindi in pratica lo invierà come risposta al browser.
‫Ottimo, quindi proviamolo ora.
‫Quindi, il nostro server
‫è ancora in esecuzione sulla porta host locale 3000, credo.
‫E questo ci dà questo errore,
‫impossibile trovare il modulo pug, quindi in
‫realtà abbiamo davvero bisogno di installare il modulo pug.
‫Quindi ho detto prima che non l'abbiamo
‫fatto, ma in realtà abbiamo bisogno di farlo.
‫Express lo caricherà automaticamente dietro le quinte, ma non
‫viene fornito con tutti questi motori di modelli
‫installati fuori dalla scatola.
‫Quindi npm install pug.
‫Ed eccoci qui, quindi
‫proviamoci di nuovo, e ora
‫davvero otteniamo il camper del parco.
‫Questo è il nostro elemento h1 che
‫abbiamo appena creato nella base. pug, e se ora lo
‫esaminiamo, vedrai che è un semplice elemento h1.
‫Ovviamente non ci sono
‫stili e CSS a questo punto, ma ce
‫ne occuperemo
‫nelle prossime due lezioni.
‫Per ora ciò che conta qui
‫è che quando accediamo alla nostra radice, instradamo qui sul nostro host, quindi
‫avere questo è davvero lo stesso che avere questo.
‫Quando accediamo a questo percorso, ora otteniamo
‫l'accesso a un sito Web
‫reso dinamicamente basato sulla nostra base. modello di carlino, fantastico.
‫Questo è il primo passo su come configurare pug e
‫nel corso delle prossime
‫due lezioni imparerai a utilizzare davvero questo motore di modelli
‫per creare siti Web sorprendenti e dinamici.