‫Istruttore:
‫In questo video parleremo e
‫implementeremo un concetto chiamato routing.
‫Quindi in questo momento, il
‫codice che abbiamo scritto non reagisce affatto all'URL che stiamo richiedendo.
‫Quindi diciamo che abbiamo questo URL e otteniamo
‫questa risposta, ma se abbiamo per
‫esempio un prodotto, beh, otteniamo la stessa identica risposta, giusto?
‫Se diamo un'occhiata all'esempio,
‫il progetto finale, beh qui, ad
‫esempio, vediamo Panoramica.
‫Quindi in questo momento abbiamo l'host, quindi la porta e /overview,
‫quindi il percorso qui è /overview, e quindi vediamo questa
‫pagina.
‫Ma ora, dai un'occhiata a cosa succede.
‫Quindi ora abbiamo il prodotto.
‫Ed è per questo che otteniamo questa pagina del prodotto.
‫E poi torniamo indietro, torniamo alla panoramica, e
‫così vediamo di nuovo la pagina che avevamo all'inizio.
‫Inoltre, se non abbiamo nulla,
‫beh, allora vediamo ancora questa stessa pagina.
‫E quindi questo è fondamentalmente il routing.
‫Quindi, instradare significa sostanzialmente implementare azioni diverse
‫per URL diversi.
‫Ok, quindi in questo momento non abbiamo niente del genere.
‫Quindi, come ho detto, non importa quale URL
‫abbiamo, otteniamo sempre la stessa risposta.
‫E quindi ora dobbiamo implementare una logica
‫che lo cambi.
‫Ok, e quindi di nuovo, questo sarà il routing.
‫Ora il routing può effettivamente diventare molto molto complicato
‫in una grande applicazione del mondo reale, e quindi
‫in quel caso usiamo uno strumento per quello come Express, quindi
‫lo faremo nel prossimo grande progetto in
‫questo corso in cui usiamo Express per fare tutto questo.
‫Ma per ora, dato che stiamo appena iniziando
‫a imparare Node, vogliamo imparare a
‫fare tutto da zero senza nessuna di queste dipendenze, giusto?
‫Quindi implementiamo un routing molto semplice
‫qui in questo server.
‫Ora il primo passo è
‫essere effettivamente in grado di analizzare l'URL.
‫E per questo, usiamo un altro modulo Node integrato, che si
‫chiama URL.
‫E sto solo
‫duplicando questo qui, e poi URL.
‫E proprio come una nota a margine, quindi ho selezionato
‫URL, quindi per selezionare
‫quello successivo, ho semplicemente premuto Comando + D sulla mia tastiera.
‫Ok, so che qualcuno probabilmente chiederà durante le domande e risposte
‫come ho
‫fatto questo trucco, ed è per questo che rispondo praticamente proprio ora,
‫e dico come funziona.
‫Comunque, prima di tutto, diamo un'occhiata
‫alla richiesta. URL.
‫E, naturalmente, voglio una console. registro di questo.
‫Quindi arresta il server ed eseguilo di nuovo.
‫E c'è uno strumento per noi per farlo automaticamente.
‫Sono sicuro che alcuni di voi lo sapranno.
‫E ovviamente, lo useremo un po'
‫più tardi, ma per ora voglio continuare a farlo così.
‫Ok, quindi ricarichiamo questo.
‫Funziona allo stesso modo e qui otteniamo l'URL.
‫Ok, e in realtà ne abbiamo due.
‫E ciò significa che in realtà abbiamo due richieste e
‫quindi in realtà questa funzione di callback qui
‫viene eseguita due volte.
‫Quindi una console. log ha solo
‫la barra e il secondo ha /favicon.
‫Quindi, quando utilizziamo un
‫browser, il browser esegue automaticamente una richiesta
‫per la favicon del sito web.
‫Va bene, quindi in questo caso non abbiamo
‫nessuna favicon e ignoriamo questo, ok?
‫Quindi questo non ha molta importanza.
‫Ora diciamo che scriviamo /overview qui.
‫Quindi vediamo cosa otteniamo allora.
‫Quindi otteniamo /overview e /favicon, ok.
‫Quindi, ancora una volta, quello che conta è il /overview.
‫Quindi, per URL semplici come
‫questo, in realtà non abbiamo nemmeno bisogno del modulo
‫URL, ma ne avremo bisogno per cose più complesse.
‫Quindi diciamo che
‫abbiamo, ad esempio, specificando l'ID 23
‫e qualche altro parametro qui.
‫Diciamo che è qualcosa del genere.
‫E sono sicuro che hai visto questo tipo di pattern in un
‫URL in cui possiamo specificare i parametri.
‫Quindi, se abbiamo qualcosa del
‫genere, allora vedi che l'URL è questo.
‫E ciò che il modulo URL ci
‫aiuterà a fare è sostanzialmente analizzare questi parametri e
‫i loro valori in un oggetto ben formattato, ok?
‫Quindi per ora
‫non useremo ancora il modulo URL.
‫Ne avremo bisogno tra un po'.
‫Quindi, ora implementiamo effettivamente il routing ed è
‫molto molto semplice.
‫Quindi, in pratica, tutto ciò di cui abbiamo bisogno è una grande dichiarazione if else qui.
‫Ok, quindi prima di tutto salverò req. url in una variabile,
‫oh, scusa,
‫in una variabile chiamata pathName.
‫Ok, quindi ora, in base a quel nome
‫di percorso, prenderemo delle decisioni.
‫Quindi, in pratica, invia risposte diverse.
‫Quindi, se pathName è uguale a overview, o /overview,
‫beh, allora inviamo qualcosa al client.
‫E diciamo solo che questa è la PANORAMICA.
‫Altrimenti, se PathName è uguale a product, /product, beh, allora
‫tutto ciò che vogliamo fare è inviare
‫questo è il PRODUCT.
‫Ok, ora nel caso siamo alla radice del sito.
‫Quindi fondamentalmente, così, beh, allora vogliamo anche
‫mostrare la panoramica.
‫E quindi aggiungiamolo anche qui.
‫Quindi pathName è uguale a e slash.
‫E poi l'o.
‫Quindi, se il pathName è la radice o /overview, quindi
‫restituiscilo come OVERVIEW, o
‫se è un prodotto, allora rispedisci PRODUCT.
‫Quindi cose molto semplici, e proviamolo ora.
‫In realtà, possiamo semplicemente ricaricare, o invece, in
‫realtà, dobbiamo prima finirlo di nuovo e ricominciare tutto da capo.
‫Quindi sta già funzionando, questa è la PANORAMICA.
‫Se ora dico
‫prodotto, allora questo è un PRODOTTO, perfetto.
‫Ora, solo per controllare l'ultimo, la panoramica ci
‫fornisce di nuovo OVERVIEW.
‫Ok, ora diciamo che in realtà richiediamo qualcosa che non
‫abbiamo gestito.
‫Quindi qualcosa del genere.
‫Allora, cosa succede?
‫Bene, come vedi, questa ruota qui non
‫smette davvero di girare.
‫Quindi sta cercando di inviare una risposta, ma in realtà non può.
‫Quindi il server non sa cosa fare in questa situazione,
‫perché non abbiamo aggiunto alcun fallback.
‫Quindi fermiamo questo povero
‫ragazzo qui, e fondamentalmente aggiungiamo semplicemente un'altra dichiarazione qui.
‫Quindi, se non è la radice, non la panoramica, non il prodotto, beh,
‫allora vogliamo dire che questa pagina non è stata trovata.
‫Pagina non trovata.
‫Ora, molte volte quando sul sito web
‫provi ad aprire una pagina che
‫non è stata trovata, vedi questo errore 404, giusto?
‫E questo è in realtà qualcosa chiamato codice di stato HTTP.
‫Quindi, poiché stiamo inviando una risposta, possiamo
‫anche aggiungere il codice di stato alla risposta.
‫E quindi per questo, possiamo usare diversi modi per farlo, ma ne
‫userò uno che può fare di
‫più del semplice codice di
‫stato e ti mostrerò perché in un secondo.
‫Ma per ora, sto solo
‫dicendo qui, res. scrivi la testa e poi 404, ok?
‫Proviamolo ora.
‫E quindi cosa succede qui?
‫Ah, in questo non
‫succede nulla, perché non ho riavviato il server.
‫Quindi, pagina non trovata.
‫Fantastico, ora che mi dici del codice di stato 404?
‫Bene, possiamo premere Inspect qui per aprire Dev Tools, o invece
‫quello che mi piace fare è premere Command + J,
‫e questo aprirà anche Dev Tools.
‫Su Windows è probabilmente Alt +
‫Control + J, oppure puoi semplicemente venire a Visualizza, quindi
‫Sviluppatore e Strumenti per sviluppatori in questo modo, ok?
‫Quindi vai alla scheda Rete, ma
‫in realtà puoi già vederlo come qui.
‫Quindi il server ha risposto con un codice di stato 404 non trovato.
‫Ma puoi anche vederlo nella rete e ricaricarlo, e poi
‫vedi 404 qui e
‫il testo rosso per mostrare che c'era qualche errore.
‫Ok, ora qualcosa in più che questo writeHead può fare
‫è inviare anche le intestazioni.
‫E per inviare le intestazioni, dobbiamo specificare un oggetto qui,
‫e poi lì mettiamo le intestazioni che vogliamo inviare.
‫Ora, cos'è in realtà un'intestazione?
‫Bene, un'intestazione HTTP è fondamentalmente un'informazione sulla
‫risposta che stiamo inviando.
‫E ancora, imparerai molto di più su
‫questo in una sezione successiva del corso, ok?
‫Per ora sappi solo che
‫ci sono molte diverse intestazioni standard
‫che possiamo specificare per informare il browser
‫o qualunque client stia ricevendo una risposta sulla risposta stessa.
‫Ad esempio, una delle intestazioni standard
‫è quella di informare il browser del tipo di contenuto.
‫Quindi possiamo
‫dire Content-Type e impostarlo su text/html.
‫E così,
‫proprio così, il browser ora si aspetta dell'HTML.
‫E quindi quello che possiamo
‫fare ora, ad esempio qui, è
‫fare un elemento h1 per inviare fondamentalmente HTML.
‫Quindi, proprio così.
‫E a causa di
‫questa intestazione qui, il browser si aspetta che arrivi l'HTML.
‫Possiamo anche specificare le nostre intestazioni inventate.
‫Quindi diciamo la mia intestazione, ciao-mondo,
‫quindi qualcosa del genere, ok?
‫Ora ciò che conta qui è che
‫queste intestazioni e anche il codice di stato
‫devono sempre essere impostati prima di inviare la risposta.
‫Ok, quindi non possiamo mai inviare intestazioni dopo
‫il contenuto della risposta stessa.
‫Quindi proviamo di nuovo,
‫o in realtà, dovrei riavviare il server.
‫E quindi riproviamo adesso.
‫E infatti, riceviamo ancora il nostro errore,
‫ma ora sembra diverso.
‫Quindi ora abbiamo effettivamente un elemento h1 qui.
‫E se anche nella scheda Rete facciamo clic su questa
‫richiesta, aumentiamola un po' qui.
‫Quindi non sono sicuro
‫che tu possa davvero vederlo, ma quando facciamo clic su questa
‫richiesta qui, possiamo effettivamente vedere anche le intestazioni della risposta.
‫E quindi qui abbiamo il tipo
‫di contenuto che abbiamo specificato come text/html, e
‫poi l'altra
‫intestazione, quindi la mia intestazione è impostata su hello-world.
‫E quindi di nuovo, possiamo usarlo per inviare alcuni
‫metadati sulla risposta stessa, va bene?
‫Ora ci sono anche alcune intestazioni di richiesta e
‫queste sono state impostate automaticamente dal browser, ma
‫per ora non preoccuparti di queste.
‫L'importante è che abbiamo specificato che il contenuto che
‫stiamo inviando è HTML, e anche per
‫esempio il codice di
‫stato che abbiamo inviato è 404 non trovato, ok?
‫Ora, liberiamoci di questo.
‫Aprilo, e ora vedi, abbiamo
‫uno stato di 200, che significa OK, e
‫queste altre intestazioni, sono effettivamente sparite.
‫Ok, quindi ora
‫questa risposta non ha queste altre due intestazioni, giusto?
‫E ora vediamo il
‫200 OK, quindi sì, tutto funziona bene in questo momento.
‫Abbiamo implementato il routing di base,
‫quindi per nomi di
‫percorso diversi, ora abbiamo azioni diverse.
‫Un'ultima cosa che volevo dire sul routing è che questi
‫percorsi che abbiamo definito qui nel nostro codice e i
‫percorsi che inseriamo negli URL nel browser non hanno nulla a
‫che fare con i file e le
‫cartelle nel file system del nostro progetto, ok ?
‫Quindi, come principiante potresti pensare
‫che se apriamo /templates, ad esempio, ciò aprirebbe
‫la cartella Templates che abbiamo nel
‫nostro file system.
‫Ma ovviamente non è così.
‫Quindi, se volessimo avere un percorso di
‫modelli, beh, allora dovremmo
‫definirlo nel nostro router, in pratica,
‫e quindi inviare una risposta speciale solo per quel percorso.
‫Comunque, penso che questo basti per un video.
‫Ci vediamo al prossimo.