‫Istruttore: Ora finiamo finalmente questa parte
‫della funzionalità di accesso.
‫E ricorda come ho detto
‫che in questo video volevo implementare un
‫avviso davvero carino per quando l'utente accede con successo,
‫e quindi per vedere che per ora
‫disconnettiamo l'utente rimuovendo il cookie manualmente.
‫Ricarichiamo, e così ora ovviamente l'utente
‫non dovrebbe più essere loggato, e
‫infatti non lo è.
‫Come già sappiamo, è perché il cookie
‫non è stato inviato nella richiesta.
‫Quindi c'è un middleware loggato che abbiamo creato
‫nell'ultimo video non
‫ha messo in risposta l'oggetto utente. gente del posto,
‫lo ricordi?
‫Quindi, se non è presente, il manuale dell'utente non verrà visualizzato,
‫e invece questa parte verrà visualizzata in modo che
‫ora possiamo fare clic qui su Accedi.
‫Quindi quell'avviso di cui parlavo prima voglio che venga
‫visualizzato qui praticamente all'inizio e poi dopo
‫un secondo e
‫mezzo vogliamo ancora farlo ricaricare.
‫Quindi passare alla homepage principale.
‫Ad ogni modo creiamo
‫alcune funzioni per questo avviso in un altro file separato.
‫Quindi nuovo file,
‫avviso. js.
‫Va bene, ma ora, prima di poter andare avanti,
‫dobbiamo pensare un
‫po' alla nostra architettura di front-end qui.
‫Ora questo corso, ovviamente, non riguarda il front-end, ma
‫dobbiamo almeno preoccuparci un po' di
‫questo qui, perché
‫stiamo davvero iniziando a ricevere
‫una buona quantità di file
‫qui, e includendoli tutti nelle nostre
‫pagine non è una buona pratica.
‫Così
‫come abbiamo fatto qui.
‫Quindi questa non è una buona pratica.
‫Dovremmo avere solo un grande file JavaScript
‫che include tutto il codice.
‫Quindi nel moderno sviluppo front-end JavaScript
‫di solito usiamo qualcosa chiamato bundle di moduli.
‫Il più popolare è probabilmente ancora Webpack, ma di
‫solito Webpack ci dà molti problemi ed
‫è davvero una seccatura configurarlo.
‫Quindi in realtà c'è un nuovo ragazzo molto carino nel quartiere, per
‫così dire, che si chiama Parcel.
‫Quindi daremo un'occhiata a questo, vedremo se si presenta già,
‫e infatti, è quello.
‫Bundle di applicazioni web così velocissimo e senza configurazione.
‫Quindi è esattamente quello che stiamo cercando.
‫Semplicemente un bundler che non richiede
‫configurazioni complesse, perché non vogliamo
‫perdere tempo con quello.
‫Va bene, quindi andiamo avanti e installiamolo qui.
‫Quindi npm install e
‫non sono sicuro che sia solo Parcel in realtà.
‫Quindi
‫torniamo qui.
‫Probabilmente quello è il pacco. js o qualcosa
‫del genere, perché ricordo che l'ultima volta
‫che l'ho installato non ha funzionato subito, quindi controlliamolo.
‫Sì, infatti, è Pacchetto-fascicolatore.
‫Ora abbiamo qualche errore.
‫Ok, quindi ho dimenticato di salvarlo come dipendenza di sviluppo.
‫Quindi in realtà lo vogliamo come sviluppo di salvataggio, ok,
‫e questo perché è uno strumento di sviluppo.
‫Adesso ancora qualcosa è andato storto.
‫Fammi provare con sudo qui.
‫E quindi se non ha funzionato
‫anche nel tuo caso, usa sudo per ottenere le autorizzazioni appropriate.
‫Va bene, diamo un'occhiata al nostro pacchetto. json
‫e infatti eccolo qui, tutto a posto.
‫Ora, se stai
‫guardando questo video qualche tempo dopo che
‫l'ho registrato, potrebbero essere già passati alla versione numero
‫due e, come già sappiamo,
‫potrebbero introdurre alcune modifiche di rilievo.
‫E quindi andando avanti da questo punto se ricevi errori che
‫non hai visto qui nel
‫video, vai avanti e installa questo pacchetto qui usando la
‫versione . 1,
‫va bene.
‫Quindi in
‫pratica aggiungine uno come questo, ok.
‫Quindi questo ti avverte di imbatterti in questi strani errori e,
‫si spera, mi salva anche da tonnellate
‫di commenti negativi o recensioni
‫negative che si aspettano che aggiorni tutti i miei video a settimane
‫alterne solo perché alcuni strumenti vengono aggiornati e, naturalmente,
‫ciò non è possibile.
‫Molte volte la soluzione
‫più semplice è semplicemente usare la
‫stessa versione che sto usando nel video, va bene.
‫Ad ogni modo, ora per utilizzare effettivamente
‫Parcel aggiungiamo alcuni script qui.
‫Quindi ne aggiungo uno da guardare o JavaScript.
‫Ok, e per
‫questo uso il comando Parcel watch.
‫Questo in realtà funzionerebbe già bene, ma voglio
‫ancora configurare un po ', perché
‫altrimenti mi metterà il pacchetto finale in alcune
‫cartelle che non li voglio.
‫Quindi specifichiamo quale cartella dovrebbe effettivamente guardare.
‫Quindi questo è public/JavaScript e quindi index. js, quindi questo è il nostro punto di
‫ingresso e questo è
‫il file che creeremo in un secondo.
‫Va bene.
‫Quindi anche la directory di output dovrebbe essere
‫in public.
‫js, ok.
‫Molte volte avrai cartelle
‫diverse per lo sviluppo e per l'output,
‫ma in questo caso, poiché è un'architettura molto
‫semplice, metterò il file bundle nello stesso
‫posto dei file di sviluppo.
‫Va bene, specifichiamo anche il file di
‫output
‫e quindi dovrebbe essere bundle. js, va bene.
‫Quindi ora posso eseguirlo e quindi darà un'occhiata
‫a questo file qui e vedrà se qualcosa cambia o
‫in una delle dipendenze e
‫ogni volta che
‫ciò accade, raggrupperà nuovamente tutti
‫i file in questo pacchetto. js, va bene.
‫Allora duplichiamo
‫anche questo, perché vogliamo anche una
‫versione finale, diciamo di produzione, ok.
‫Quindi questo ne eseguiremo di quelli in
‫cui sono davvero finiti, ok.
‫Quindi ci vuole un po' più di tempo,
‫ma fa anche un po' di cose di ottimizzazione in più, ma
‫ovviamente non ci servono per lo sviluppo.
‫In fase di sviluppo, come sempre, vogliamo solo che funzioni.
‫Quindi eseguiamo npm
‫run watch:js, ma prima di farlo creiamo effettivamente
‫l'indice. js.
‫Chiudiamo qui alcune di queste cartelle.
‫È un po' troppo confuso così.
‫Quindi indice. js e facciamo solo una
‫semplice console. accedi qui per ora.
‫Ciao da Parcel, va
‫bene.
‫Quindi andiamo anche alla nostra base
‫qui e poi in realtà ora commenteremo tutti questi
‫e includeremo
‫solo il file bundle.
‫Quindi, di nuovo, un file che conterrà fondamentalmente tutto il codice presente
‫in tutti gli altri file e
‫tutte le loro dipendenze.
‫Quindi diamo un salvataggio, e ora eseguiamolo, vediamo cosa
‫otteniamo lì.
‫E infatti, abbiamo ottenuto il nostro nuovo file, che è bundle. js e ha
‫già tutto questo mucchio di codice lì dentro,
‫ok, semplicemente per questa riga di codice a questo punto.
‫Ma comunque ricarichiamo qui la nostra
‫pagina, e ciao da Parcel.
‫Quindi ha funzionato, quindi ora andiamo avanti e impostiamo
‫effettivamente questo file qui.
‫Quindi, per evitare confusione, chiudiamo questi file che non
‫ci servono più per quello che stiamo
‫facendo in questo momento.
‫Quindi è tanta roba.
‫Va bene, anche questo.
‫Quindi ora l'idea è fondamentalmente che questo index. js è il
‫nostro file di ingresso, quindi in
‫questo non possiamo ottenere dati dall'interfaccia
‫utente e quindi deleghiamo azioni ad alcune
‫funzioni provenienti da questi altri moduli qui in pratica.
‫Quindi ora abbiamo il modulo di accesso, abbiamo
‫il nostro modulo di avvisi e così, proprio
‫come in Node. js ora
‫possiamo effettivamente esportare i dati da questi moduli.
‫Quindi facciamolo, e quello che voglio esportare
‫è questa funzione qui.
‫Ora funziona in modo leggermente diverso da
‫come funziona con Node. js
‫perché Node. js usa qualcosa
‫chiamato CommonJS per implementare i moduli.
‫Non sono sicuro
‫di averlo menzionato quando abbiamo parlato
‫per la prima volta di moduli, ma qui in JavaScript front-end da ES2015
‫o ES6 c'è anche qualcosa chiamato moduli in JavaScript.
‫La sintassi è leggermente
‫diversa, ma in realtà il modo in cui
‫funziona dietro le quinte, ma in realtà se capisci come
‫funziona con CommonJS, questo qui sarà molto simile.
‫Quindi i moduli ES6 usano la sintassi di import export.
‫Quindi qui tutto ciò che dobbiamo fare è dire esporta e
‫poi tutto ciò che vogliamo esportare da questo file, e
‫questo è davvero tutto.
‫Ora questo pezzo di codice qui lo useremo
‫effettivamente nel file indice.
‫Quindi ricorda come ho detto che questo file
‫qui è più per ottenere dati dall'interfaccia utente
‫e quindi delegare l'azione.
‫Quindi è esattamente quello che stiamo facendo qui, ok.
‫Quindi qui abbiamo solo questo tipo di modulo
‫che quindi esporta la funzione di accesso.
‫Quindi possiamo importarlo qui e chiamare login
‫proprio qui in index. js
‫e funziona così.
‫Quindi import invece di require
‫quindi il nome della variabile che vogliamo importare.
‫Quindi sto usando le parentesi graffe qui.
‫Quindi si chiama
‫login e quindi dal nome del file.
‫Che in questo caso, stessa directory, login.
‫Ora disattiviamo anche qui di nuovo eslint, e ho
‫usato queste parentesi graffe qui, fondamentalmente perché stiamo
‫eseguendo l'esportazione in questo modo, ma c'è anche qualcosa
‫di simile a module. export che è
‫il tipo di esportazione predefinita.
‫Quindi nei moduli ES6 si chiama effettivamente esportazione predefinita.
‫Quindi in quel caso non avremmo bisogno di queste parentesi graffe.
‫Va bene.
‫In questo momento dobbiamo farlo in questo
‫modo, perché questo è il nome di questa funzione che
‫abbiamo esportato, va bene.
‫Ora qualcosa di veramente importante anche in questo login è che
‫abbiamo usato axios.
‫E ricorda come ho detto che
‫lo avremmo installato effettivamente da npm come modulo npm, giusto?
‫Quindi facciamolo ora, e in realtà perché abbiamo
‫già commentato axios da qui.
‫Quindi in questo momento il login non può usare axios.
‫Bene, perché non l'abbiamo più incluso qui.
‫Quindi aggiungiamo, apriamo un nuovo terminale e
‫installiamo axios nel nostro progetto.
‫Quindi ora tutto ciò che dobbiamo fare è dire importare axios da
‫axios, e questo è tutto,
‫va bene.
‫Quindi questo file, almeno per ora, è fatto
‫ma non chiudiamolo perché ci servirà
‫ancora molto presto.
‫Successivamente dovremmo anche installare un polyfill, che farà
‫funzionare alcune delle nuove funzionalità
‫JavaScript anche nei browser più vecchi.
‫Quindi diciamo npm install e poi questo
‫qui sembra un po 'strano.
‫Quindi aggiungiamo babele/polyfill, in questo
‫modo.
‫Allora quassù importeremo proprio così,
‫va bene.
‫Quindi questo qui non lo salviamo in nessuna variabile,
‫perché non è affatto necessario.
‫Tutto ciò che vogliamo fare è fondamentalmente essere
‫incluso nel nostro pacchetto finale per riempire correttamente
‫alcune delle funzionalità di JavaScript.
‫Va bene, ed è anche per questo che è
‫qui nella prima riga di queste importazioni.
‫Ad ogni modo, ora importiamo anche questa mapbox.
‫Per questo dobbiamo prima creare
‫una funzione che farà tutte queste cose qui.
‫Va bene.
‫Quindi creiamo
‫displayMap
‫di esportazione, che includerà l'array di posizioni.
‫Quindi questo verrà effettivamente letto nell'indice. js, va bene.
‫Quindi, di nuovo, index. js è più per ottenere
‫dati dall'interfaccia utente, quindi dal sito
‫Web, e quindi delegare alcune azioni in questi altri moduli,
‫va bene.
‫Quindi, questa roba qui sarà fatta all'interno di index.
‫Facciamolo quassù.
‫Quindi importa displayMap mapbox,
‫va bene.
‫Quindi chiamiamolo
‫anche con le posizioni.
‫Ora ricordi quando abbiamo effettivamente creato questa mappa e ricordi
‫come ci ha chiesto se volevamo usare
‫la libreria mapbox su npm?
‫Quindi ora potremmo andare avanti e usare
‫effettivamente quello invece di questo che stiamo usando in questo momento.
‫Quindi bene non
‫è qui.
‫Sì, quindi questo.
‫Quindi questa è la libreria mapbox che
‫stiamo attualmente utilizzando, ma di nuovo
‫c'è anche una versione npm.
‫Quindi non avremmo bisogno di avere questo.
‫Tuttavia, per qualche motivo c'è un
‫problema con l'utilizzo di questa libreria insieme a Parcel, ok.
‫Quindi altre persone si imbattono effettivamente in questo problema.
‫Quindi non possiamo usare la libreria mapbox
‫npm insieme a Parcel.
‫Quindi questo è un motivo per cui sto ancora facendo così.
‫Va bene.
‫Quindi mapbox è completato con questo.
‫Anche questo non ci serve più.
‫Ora sbarazziamoci di alcuni di questi errori che
‫abbiamo visto quaggiù.
‫Bene, ora non sono
‫più qui, ma per esempio abbiamo avuto
‫il problema che questo codice qui
‫creava degli errori quando eravamo su pagine che non avevano questa mappa qui, giusto.
‫Perché ovviamente nella pagina dei dettagli ha questa mappa quindi questo
‫elemento, ma poi questo codice ovviamente viene eseguito su
‫tutte le altre
‫pagine, che quindi creeranno errori lì.
‫Quindi risolviamolo.
‫Quindi quello che sto facendo qui è prima creare
‫un elemento con questo e poi testare se esiste effettivamente prima
‫di eseguire questa riga di codice.
‫Quindi creeremo alcuni elementi DOM qui.
‫E
‫qui direi delega.
‫Quindi, se mapbox
‫e solo allora a queste due azioni qui,
‫va bene.
‫Qui c'è anche mapbox e questo
‫è molto più carino.
‫Qui mettiamo anche
‫i valori, e metterò questi
‫due perché in realtà potremmo averne bisogno o
‫in realtà ne avremo bisogno anche per altre cose.
‫Quindi in questo modo è un po' più pulito.
‫Aggiungiamo anche questo listener di eventi
‫qui solo se questo elemento esiste, giusto.
‫Perché bene, di nuovo, creerà un errore se non lo fa.
‫Quindi loginform, e
‫quindi
‫se
‫e poi riutilizziamolo qui, salviamolo e così
‫ora sembra migliore.
‫Va bene.
‫Chiudiamo effettivamente questo terminale.
‫Questo dovresti continuare a raggruppare il nostro codice ogni
‫volta che c'è un salvataggio.
‫Salviamolo di nuovo qui.
‫Ok, spero che ora sia cambiato.
‫Quindi andiamo avanti e proviamolo.
‫Quindi, se puoi ancora accedere bene a questo
‫punto, significa che ha funzionato davvero.
‫Beh, forse no.
‫Proviamo di nuovo qui.
‫Va bene, quindi c'è qualcosa che non va qui.
‫Quindi, come sempre, registriamo questa e-mail e la password
‫nella console qui.
‫Voglio dire, perché sappiamo già che
‫in realtà questa funzione qui è chiamata, giusto.
‫Altrimenti, non otterremmo nemmeno l'errore.
‫Giusto, perché quell'errore proviene chiaramente dalla nostra API.
‫Quindi tutto ciò che abbiamo qui funziona davvero, credo.
‫Diamo un'occhiata alla console.
‫Quindi sembra che in realtà non ci siano nome
‫utente e password.
‫Va bene.
‫Non sono sicuro del perché.
‫Diamo un'occhiata se effettivamente otteniamo qualcosa.
‫Quindi accedi
‫e registrerò anche questi
‫proprio qui, non qui ma qui.
‫E quindi a quanto pare
‫il problema deve essere che nome utente
‫e password non sono realmente definiti.
‫Oh, e ora, naturalmente, posso capire perché è così.
‫Che stupido errore.
‫Quindi stiamo cercando di leggere questi valori
‫qui, proprio all'inizio quando la pagina
‫viene caricata, e ovviamente a questo punto questi valori non sono definiti.
‫Quindi possiamo ovviamente definirli solo
‫qui nel nostro ascoltatore di eventi, giusto.
‫Quindi, quando questa funzione qui viene
‫chiamata bene, ovviamente e-mail e password sono impostate, quindi
‫è il momento in cui possiamo leggerle.
‫Quindi è stato un po' stupido,
‫ma, sai, a volte succedono cose del genere.
‫Ora copiamo questo qui.
‫Questa volta abbiamo effettuato l'accesso con successo, il
‫che significa che il nostro codice qui funziona ancora.
‫Fantastico, quindi ora facciamo la parte finale che volevamo
‫fare in questa
‫lezione, che in realtà è creare questi avvisi, va bene.
‫Quindi creiamo una funzione chiamata show alert ed esportiamola.
‫Quindi in login importeremo questa funzione e la
‫useremo lì.
‫Quindi showAlert e questo come
‫input otterranno un tipo e un messaggio, quindi
‫proprio come questo.
‫E questo
‫tipo è successo
‫o errore,
‫ok.
‫Perché a seconda di questo input avremo quindi CSS
‫diversi per ciascuno di questi avvisi e lo
‫vedrai in un secondo.
‫Quindi quello che faremo è fondamentalmente creare del
‫markup HTML qui e poi inserirlo nel nostro HTML, quindi è
‫qualcosa di veramente facile.
‫Quindi un markup e la stringa del modello e
‫ora un bel codice HTML.
‫Quindi è semplicemente un div con una classe di
‫alert e poi alert
‫-- quindi un modificatore con il nostro
‫tipo.
‫Ok, ecco perché deve
‫essere un successo o un errore.
‫Quindi permettetemi di mostrarlo rapidamente
‫in CSS, perché penso che sia davvero
‫importante sapere davvero come funziona tutto questo insieme, ok.
‫Quindi qui abbiamo la nostra classe
‫di avviso e quindi avviso di successo e errore di avviso.
‫Va bene.
‫Come sempre disabilitiamo eslint qui, ok, e
‫liberiamoci di questo e ora ovviamente
‫qui va il messaggio che passiamo a
‫questa funzione.
‫Ovviamente potremmo andare avanti
‫e usarlo in tutta l'applicazione, ma in questo
‫caso in realtà ne abbiamo bisogno solo qui per il nostro login.
‫Quindi documento. queryselector, e quindi
‫ora qui selezioniamo l'elemento in
‫cui vogliamo includere questo HTML che abbiamo appena creato.
‫Quindi è proprio all'inizio
‫dell'elemento corpo.
‫Quindi proprio in cima alla pagina.
‫Quindi
‫corpo, quindi inserisci HTML adiacente, quindi questo qui.
‫Se hai seguito il mio corso JavaScript
‫completo, tutto questo qui non sarà nulla di nuovo per
‫te, ok.
‫Quindi qui possiamo specificare un paio di parole chiave,
‫e in questo caso vogliamo afterbegin.
‫Quindi fondamentalmente ciò significa
‫che è all'interno del corpo, ma proprio all'inizio, va bene.
‫Quindi l'HTML, quindi il
‫markup, che in realtà vogliamo includere.
‫Grande.
‫Quindi questo creerà un avviso molto semplice basato
‫sul tipo e sul metodo, ma ora in realtà vogliamo anche una
‫funzione per nascondere gli avvisi.
‫Quindi creiamolo anche qui, esportiamo, e probabilmente non ne
‫abbiamo nemmeno bisogno al di fuori di qui,
‫ma comunque per la riutilizzabilità è sempre una buona idea
‫esportare tutto questo.
‫Questo non ha bisogno di prendere in alcun argomento.
‫Quindi ora tutto ciò che faremo è
‫selezionare l'elemento con la
‫classe alert e poi rimuoverlo.
‫Quindi allerta
‫queryselector.
‫Quindi esattamente lo stesso nome di classe di qui.
‫Quindi abbiamo bisogno di usare un trucco
‫JavaScript in cui dobbiamo spostare un livello fino all'elemento
‫genitore e poi da lì rimuovere un elemento figlio.
‫Quindi, se c'è un elemento, allora
‫elemento. parentElement. removeChild
‫e poi l'elemento.
‫Va bene.
‫Quindi, di nuovo, dovrebbe essere solo JavaScript di base
‫o una manipolazione DOM di base.
‫Quindi, dal momento che questo
‫è un corso nodo, non ne approfondirò.
‫Ad ogni modo, quello che voglio fare
‫qui ora è nascondere tutti gli
‫avvisi già esistenti ogni volta che mostriamo un avviso.
‫Quindi dobbiamo sempre solo
‫assicurarci di eseguire sempre hideAlert.
‫Poi finalmente anche io voglio sempre nascondere tutti gli avvisi
‫dopo cinque secondi.
‫Quindi window
‫setTimeout hideAlert dopo cinque
‫secondi.
‫Va bene, e ora importiamolo qui.
‫Visualizza avviso è stato chiamato, giusto?
‫Oh showAlert, con tipo e messaggio.
‫Quindi mostraAlert
‫da
‫destra da quello e così ...
‫Sì, quindi vogliamo usarlo proprio in questo posto.
‫Quindi invece dell'avviso JavaScript vogliamo fare
‫showAlert, va bene, e qui
‫lo stesso.
‫Dobbiamo ancora specificare il
‫tipo qui,
‫quindi questo è successo in questo
‫caso e qui è errore.
‫Abbiamo raggiunto il completamento automatico.
‫Ok, è meglio.
‫Quindi proviamolo.
‫E prima di tutto dobbiamo disconnetterci cancellando questo cookie.
‫Ricarica, accedi e ora
‫lo
‫sto testando prima con una password
‫errata e ci siamo.
‫Quindi e-mail o password errate proprio nel nostro simpatico avviso e
‫hai visto che dopo cinque secondi è scomparsa.
‫Ovviamente avremmo potuto mettere
‫qualche bella animazione lì e tutto il
‫resto, ma penso che così sia già più che sufficiente.
‫Quindi vediamolo di nuovo
‫velocemente, ed ecco come sarà, ma
‫quando è corretto, ovviamente dovrebbe essere verde.
‫Quindi sì, effettuato correttamente l'accesso e vediamo
‫una ricarica dopo un secondo e mezzo
‫e quindi ora funziona davvero.
‫Questa è la nostra autenticazione completa sul front-end.
‫È stato un sacco di lavoro, ma se me lo chiedi ne vale assolutamente la pena.
‫Ora l'unica cosa che manca è
‫che ci disconnettiamo quando facciamo clic su questo pulsante qui.
‫Quindi in questo momento non è
‫così e quindi nel prossimo video risolviamo questo problema.