‫Jonas: Bentornato.
‫Ora impostiamo finalmente Express, creiamo un
‫server semplice e facciamo un po' di routing
‫di base solo per
‫avere un'idea iniziale di come lavoriamo effettivamente in Express.
‫E quindi in questo video, inizieremo a lavorare
‫sul progetto natours, quindi il grande progetto principale che fa
‫parte di questo corso.
‫Quindi, proprio come prima, per favore
‫vai avanti e prendi il progetto di partenza dai file del corso.
‫Ce l'ho già qui.
‫L'ho aperto nel mio codice VS.
‫Diamo solo una rapida occhiata a ciò che abbiamo qui.
‫Abbiamo il file di configurazione
‫più carino proprio come abbiamo impostato come prima.
‫Ho anche un file di configurazione per ESLint e ESLint
‫non abbiamo impostato a questo punto, ma
‫lo faremo anche
‫più avanti in questa sezione.
‫Per ora, voglio solo iniziare
‫a programmare e non preoccuparmi di linting del nostro codice.
‫Linting serve solo a correggere alcuni errori.
‫Ma di nuovo, lo faremo più tardi.
‫Qui abbiamo solo alcuni file per dopo,
‫come css, immagini, ok, e ora anche, ad esempio, alcuni dati di
‫cui abbiamo bisogno per costruire la nostra applicazione.
‫Ancora una volta, inizieremo a utilizzare questi dati qui
‫in questa sezione.
‫Ad ogni modo, ora abbiamo un progetto nuovo di zecca.
‫La prima cosa che di solito facciamo con un nuovo progetto
‫è creare il pacchetto. json, proprio
‫come ho detto prima.
‫Lo abbiamo fatto nel
‫progetto nodefarm e ora lo faremo anche qui.
‫Apro il terminale integrato.
‫Puoi farlo premendo questa scorciatoia qui o semplicemente vieni qui su
‫Visualizza e poi su Terminale.
‫Fammi alzare un po' così puoi vederlo.
‫Ricorda che il comando è npm init.
‫Abbiamo dato un nome al progetto.
‫Si chiama natours.
‫Oh ok, non può avere lettere maiuscole.
‫Facciamolo di nuovo.
‫La versione è una, descrizione,
‫diciamo solo nodo di apprendimento, express e mongoDB, mongoDB.
‫Punto di ingresso, indice. js, in
‫realtà useremo app. js ora.
‫Chiamiamola app. js.
‫Non abbiamo alcun comando di test, nessun git,
‫nessuna parola chiave, l'autore sono io, e basta, quindi va bene.
‫Qui abbiamo il pacchetto. json.
‫Proprio come prima, niente di nuovo qui.
‫Ora è il momento di installare Express.
‫Npm esprimo.
‫Userò Express per qui, che
‫è in fase di
‫registrazione, l'ultima versione, ma da un po'
‫di tempo il team Express sta lavorando alla versione 5.
‫Questa è una versione principale
‫che potrebbe introdurre modifiche sostanziali se l'avessi installata.
‫Ora, in realtà non ci
‫sono molte cose che cambiano nella versione 5, ma
‫per essere sicuri, installa Express alla versione 4 proprio come sto facendo io.
‫Per farlo, premi su 4.
‫Ciò installerà quindi l'ultima versione all'interno di 4 con le ultime versioni
‫minori e patch, quindi 4. 16. 4.
‫Questa è la versione che sto
‫usando ora in questo corso, e la tua
‫sarà probabilmente una versione successiva, ma finché hai il 4
‫qui all'inizio, dovresti stare bene.
‫Vedi che in realtà ha
‫creato la nostra cartella dei moduli del nodo qui.
‫Ora siamo pronti per iniziare.
‫Sto creando un nuovo file e si chiama app. js.
‫È una specie di convenzione avere tutta la
‫configurazione Express nell'app. js.
‫Questo è quello che sto usando qui ora.
‫Ora abbiamo l'avviso che non
‫può caricare ESLint.
‫Di nuovo, lo configureremo più
‫avanti in questa sezione.
‫Quindi, ora usiamo Express.
‫Ovviamente richiederò il pacchetto Express.
‫Nulla di nuovo a questo punto.
‫Dagli una cassaforte.
‫Vedi che l'anteprima ha già fatto la sua magia qui
‫aggiungendo questo punto e virgola e aggiungendo anche questa
‫nuova riga qui sotto.
‫Abbiamo importato Express e ora quello che facciamo
‫è creare una variabile chiamata app.
‫Di nuovo, è una specie di standard.
‫Quindi app e risultato assegnato della chiamata express.
‫È proprio così.
‫Questa è una funzione che al momento della
‫chiamata aggiungerà una serie di metodi alla nostra variabile dell'app qui.
‫La prima che useremo è
‫in realtà app. ascoltare
‫fondamentalmente avviare un server.
‫È un po' simile a quello
‫che abbiamo fatto prima con il pacchetto http nelle sezioni precedenti, giusto.
‫Quindi, di nuovo, tieni presente che
‫Express è al 100% senza js sotto il cofano e
‫alcune cose funzionano
‫in modo molto simile qui in Express.
‫Va bene, ancora una volta, rende semplicemente
‫le nostre vite un po'
‫più facili togliendoci un po' della complessità.
‫Proprio come prima, in app. ascolta,
‫incolliamo nella porta.
‫In realtà creiamo una variabile per questo qui prima.
‫Porta e diciamo 3000 per ora.
‫Lo cambieremo un po' più tardi.
‫Incolliamo la porta e una funzione di callback.
‫Di nuovo, questa è
‫la funzione di callback che verrà chiamata non
‫appena il server inizia ad ascoltare.
‫Facciamo semplicemente una console. accedi qui,
‫app in esecuzione sulla porta.
‫Va bene, quindi questo è il nostro
‫server che sta già ascoltando.
‫Ora quello che dobbiamo fare dopo è definire il percorso.
‫E ancora una
‫volta, in realtà abbiamo già
‫definito percorsi prima nel progetto nodefarm, ricordatelo,
‫ma funziona in modo molto diverso con Express.
‫Ricorda che il routing significa
‫sostanzialmente determinare come un'applicazione risponde a una
‫determinata richiesta del client, quindi a un determinato URL.
‫E in realtà, non è
‫solo un URL, ma
‫anche il metodo http utilizzato per quella richiesta.
‫Ricordatelo dalla lezione http che abbiamo avuto prima.
‫Come lo facciamo?
‫Bene, è molto semplice in Express.
‫Tutto ciò che facciamo è app, quindi il
‫metodo http a cui vogliamo rispondere e iniziamo
‫con quello più
‫semplice che è get, quindi l'URL.
‫Stiamo solo specificando il tipo di URL di root qui.
‫Di nuovo, il percorso è fondamentalmente l'URL,
‫che in questo caso è solo questo URL
‫radice e anche il metodo http, che in questo caso è get.
‫Ora, cosa vogliamo che accada
‫realmente quando qualcuno colpisce quell'URL con una richiesta di acquisizione?
‫Bene, qualunque cosa
‫vogliamo fare, dobbiamo specificarla in una
‫funzione di callback, che specifichiamo come secondo argomento.
‫Abbiamo una funzione
‫di callback proprio come questa e questa
‫funzione di callback può accettare un paio di argomenti.
‫Il più semplice e quelli
‫di cui di solito abbiamo sempre bisogno sono ottenere richiesta, risposta dell'entità.
‫A questo proposito, è di nuovo molto simile a quello
‫che abbiamo fatto prima nel progetto nodefarm.
‫Allora, quando abbiamo avviato il
‫nostro server, avevamo anche accesso alla
‫richiesta e all'oggetto risposta.
‫Ora, sono un po' diversi qui in Express.
‫Hanno molti più dati e metodi su di
‫loro, ma l'idea è esattamente la stessa.
‫Quindi vedi che le app Express
‫e quindi anche le app nodo per
‫quella materia, riguardano tutte le richieste e le risposte,
‫semplicemente perché è così che funziona effettivamente il Web,
‫proprio come hai appreso nelle sezioni precedenti.
‫Cosa vogliamo fare adesso?
‫Bene, tutto ciò che vogliamo fare è
‫inviare alcuni dati molto rapidamente.
‫Possiamo usare l'oggetto response
‫e da lì possiamo usare il metodo send
‫e specificare qualcosa che vogliamo restituire.
‫Ciao dal lato server.
‫Solo qualche stringa di nuovo che vogliamo rispedire.
‫Possiamo anche specificare il codice di stato
‫ed è molto semplice.
‫Tutto quello che dobbiamo fare è prima di inviare effettivamente
‫la stringa al client,
‫aggiungiamo semplicemente lo stato prima di ciò.
‫Il metodo status, e qui, specifichiamo
‫il nostro codice.
‫E ancora, useremo 200 per okay.
‫Questo è tutto ciò che dobbiamo fare.
‫Proviamolo molto rapidamente
‫e poi aggiungiamo altre cose.
‫Usiamo l'app nodemon. js.
‫Vediamo cosa succede e
‫la nostra app è in esecuzione sulla porta 3000.
‫Grande.
‫E come testiamo ora questa API?
‫Bene, ecco perché abbiamo installato Postman.
‫Apriamo Postino.
‫In realtà è ancora qui dall'ultima lezione.
‫Andiamo avanti e cancelliamo
‫questo e scriviamo l'URL, o in realtà, l'IP
‫per l'host locale e quindi la nostra porta.
‫È esattamente lo stesso che abbiamo
‫fatto nel progetto nodefarm.
‫Stiamo colpendo solo la radice.
‫Possiamo scrivere la barra o funziona
‫allo stesso modo senza nulla.
‫Mandiamo questo e infatti, ci siamo.
‫Ciao dal lato server.
‫È incredibile, funziona già.
‫Solo per essere sicuri,
‫otterremmo ovviamente lo stesso identico risultato in un browser.
‫Se copio questo qui, vedrai lo stesso risultato.
‫Ma ancora una volta, useremo
‫Postman perché rende tutto questo test API molto più semplice per noi.
‫Vedrai, una volta che inizieremo davvero a
‫utilizzare sempre più funzionalità di questa fantastica applicazione.
‫Ora, tornando qui, aggiungiamo altre cose
‫perché send rimanda semplicemente questa stringa
‫qui al client, ma è anche molto
‫facile inviare json al client.
‫Invece di usare send, usiamo effettivamente json.
‫Il metodo json, e poi qui,
‫possiamo incollare un oggetto.
‫Facciamo così.
‫Diciamo che questo è il messaggio.
‫E poi solo qualche altro campo qui, natours.
‫Ok, e ora vedi, quell'anteprima
‫qui ha formattato automaticamente questo per noi
‫e vogliono anche questo in un'altra riga.
‫Ah ok, qui manca una virgola ovviamente.
‫Ma l'estensione di anteprima lo ha ancora
‫messo qui per qualche motivo.
‫Ma ovviamente questo non ha molta importanza.
‫È solo una questione di formattazione.
‫Diamo un'occhiata a cosa succede ora.
‫Ora abbiamo il nostro json ben formattato qui.
‫Ci dà tutti questi diversi colori
‫qui per le chiavi e per i valori.
‫Qui abbiamo i codici di stato.
‫Qui abbiamo il tempo necessario per fare questa richiesta.
‫Abbiamo anche la dimensione della risposta.
‫Potremmo, per esempio, cambiare il codice qui molto facilmente.
‫404 non è stato trovato, ricorda.
‫Fallo di nuovo, e poi qui vedi, 404, non trovato.
‫Questo è il tipo
‫di cose per cui Postman è davvero fantastico.
‫In realtà aumentiamo le dimensioni di tutto questo.
‫Continuiamo ora, aggiungi solo qualcos'altro qui.
‫Solo qualcosa di molto facile.
‫Ricorda, tutto questo è solo per provarlo,
‫per bagnarci i piedi e iniziare a
‫fare un po' di esperienza.
‫Ricorda che questo è il metodo http per la richiesta.
‫Questa risposta che stiamo inviando qui, quindi
‫questa qui, viene inviata
‫solo quando questo metodo get viene inviato al nostro server su questo URL.
‫Lascia che te lo mostri davvero.
‫Se facciamo, ad esempio, un post.
‫È di nuovo molto facile con Postman.
‫Se facciamo un post, non otterremo nulla.
‫Invece, ciò che Express restituisce automaticamente è questo html
‫qui che dice che non può postare e quindi con
‫un 404, non trovato.
‫Questo perché non abbiamo alcun
‫percorso definito per questo URL e per questo metodo http.
‫Facciamolo ora molto velocemente.
‫Quindi post, vogliamo lo stesso URL, la
‫richiesta e l'oggetto risposta.
‫Diciamo semplicemente res. send, puoi
‫postare su questo endpoint.
‫Solo così puoi vedere che
‫questo è il modo in cui
‫inviamo risposte diverse per diversi metodi http nella richiesta.
‫Eseguiamolo di nuovo e, in effetti, puoi
‫pubblicare su questo endpoint con un codice di stato 200.
‫Questo è in realtà quello
‫predefinito quando non ne specifichiamo nessuno nei nostri codici.
‫Qui abbiamo 404 che non è corretto.
‫Ma ancora una volta, 200 è in realtà il valore predefinito.
‫Un'altra cosa veloce che
‫voglio mostrarti è che usando questo metodo json
‫qui, ad esempio, questo imposterà automaticamente il
‫nostro tipo di contenuto su application json,
‫quindi ricorda che lo abbiamo fatto manualmente nell'app
‫nodefarm quando abbiamo creato la nostra API molto semplice.
‫Allora, abbiamo anche inviato un po' di json, ma
‫poi abbiamo dovuto definire manualmente che il
‫contenuto fosse json in modo che il browser sapesse
‫cosa si aspettava.
‫Ma Express ci toglie quel lavoro.
‫Verifichiamolo effettivamente.
‫Tornare a prendere.
‫Qui abbiamo le nostre intestazioni dei risultati.
‫Qui puoi vedere che
‫il tipo di contenuto è effettivamente impostato su application json.
‫Express quindi invia automaticamente anche un
‫sacco di altre intestazioni,
‫ad esempio, questo alimentato da Express o la data o la connessione.
‫Ma ancora una volta, ci
‫occuperemo maggiormente delle intestazioni un po' più avanti nel corso.
‫Questo era solo un esempio molto piccolo e semplice
‫qui, ma puoi già iniziare
‫ad apprezzare quanto sia più facile fare questo tipo di risposte.
‫Per creare questo percorso per rispondere alla richiesta del client, in un modo molto
‫più semplice rispetto a un semplice nodo. js.
‫Detto questo, nel prossimo
‫video impareremo tutto sulla creazione di API utilizzando
‫l'architettura rimanente, in modo che dopo di ciò, possiamo
‫finalmente iniziare a costruire la nostra API.