‫Docente: E ora per finire questo progetto,
‫finiamo questa integrazione di Stripe con i webhook.
‫Iniziamo a ricordare come funziona effettivamente la nostra
‫integrazione con Stripe in questo momento.
‫Abbiamo questo endpoint della sessione di
‫checkout, che viene chiamato dal nostro front-end.
‫Questo chiamerà quindi la funzione getCheckoutSession, quindi
‫fondamentalmente questa qui,
‫che creerà una sessione di checkout sul server
‫usando tutte queste informazioni qui,
‫e poi la rispedirà al client.
‫Quindi, dopo che l'elaborazione del pagamento è
‫stata eseguita con successo da
‫Stripe, reindirizza l'utente a questo URL di successo, quindi questo
‫che abbiamo creato.
‫Ricorda che su questo URL abbiamo aggiunto l'ID tour,
‫l'ID utente e anche il prezzo.
‫Lo abbiamo fatto in modo che una volta chiamato questo URL qui,
‫la nostra applicazione crei un nuovo documento di
‫prenotazione nel nostro database.
‫Come funzionava?
‫Nel percorso dei miei tour, abbiamo un middleware per questo.
‫Ricorda, qui in viewRoutes, in my-tours,
‫abbiamo questo createBookingCheckout.
‫Questa funzione qui, che sostanzialmente dalla query prende il
‫tour, l'utente e il prezzo e
‫crea una voce nel database utilizzando quei dati.
‫Fondamentalmente inseriamo questi dati nell'URL ogni
‫volta che Stripe elabora con successo un pagamento.
‫E poi questa funzione middleware che abbiamo qui
‫raccoglie i dati e crea una nuova prenotazione nel nostro sistema
‫usando quei dati.
‫E poi, in pratica, reindirizziamo qui
‫sull'URL originale senza la stringa di query.
‫Ora il problema con questo era che non è veramente sicuro.
‫Quindi, chiunque conosca questa struttura di URL,
‫quindi questo qui sopra, quale tour, utente e prezzo nella
‫stringa di query, può sostanzialmente creare una prenotazione nel
‫nostro sistema senza effettivamente pagare.
‫Quindi, tutto ciò che dovremmo fare è aprire questo
‫URL con alcuni
‫dati e poi da lì creare automaticamente una prenotazione
‫senza passare attraverso il processo Stripe.
‫Ricorda come allora ho detto che avremmo risolto il
‫problema usando qualcosa chiamato webhook.
‫Quindi, lo facciamo ora.
‫Perché per questo,
‫abbiamo effettivamente bisogno che il nostro sito Web venga distribuito.
‫Ora, a questo punto, è davvero così.
‫E così, ora possiamo implementare questi webhook.
‫Per questo, andiamo alla nostra dashboard di Stripe.
‫E in realtà l'ho già aperto qui.
‫E poi vai qui per gli sviluppatori, quindi scegli i webhook
‫e qui aggiungi un nuovo endpoint.
‫Ora, cos'è questo endpoint qui e questo webhook?
‫Fondamentalmente specificheremo qui un URL a cui Stripe invierà
‫automaticamente una richiesta POST ogni volta che una sessione di checkout è
‫stata completata con successo, quindi in pratica ogni volta che
‫un pagamento è andato a buon fine.
‫Con quella richiesta POST, Stripe invierà quindi i dati della sessione
‫originale che abbiamo creato nel primo passaggio quando abbiamo
‫creato quella sessione di checkout.
‫Questo è il motivo per cui in realtà avevamo bisogno
‫che il nostro sito Web fosse distribuito qui perché ora dobbiamo
‫specificare l'URL della vita reale qui.
‫Prendiamolo da qui
‫e poi aggiungiamo il nostro percorso qui in pratica.
‫Lo chiamerò un webhook-checkout.
‫Non è nell'API e non è nelle prenotazioni.
‫Vedrai tra un momento perché è così.
‫Anche in questo caso, quando un pagamento è
‫andato a buon fine, Stripe pubblicherà
‫automaticamente i dati della sessione originale su questo URL.
‫Ora dobbiamo anche selezionare l'evento.
‫E vedi, ci sono un sacco di eventi che potremmo usare qui.
‫Quello che stiamo usando è checkout_session_completed.
‫Aggiungilo.
‫Ora devi inserire di nuovo la tua password qui.
‫E poi ci andiamo.
‫Questo webhook ha quindi anche un segreto qui.
‫Questo ci servirà anche in un secondo quando
‫creeremo effettivamente il nostro percorso per questo URL qui.
‫In realtà è esattamente quello che faremo dopo.
‫Fondamentalmente nel nostro sistema,
‫ovviamente, ora abbiamo bisogno di un percorso per questo
‫qui in modo che quando Stripe invii i dati alla nostra
‫applicazione, possiamo effettivamente fare qualcosa con esso.
‫Torniamo qui e apriamo la nostra applicazione.
‫In realtà aggiungeremo questo percorso proprio qui.
‫Ancora una volta, ti spiegherò perché in un secondo.
‫Quindi, app. post
‫e percorso standard e quindi, naturalmente, abbiamo bisogno
‫di una funzione di gestione per questo.
‫Creiamolo velocemente qui nel nostro bookingController.
‫Fammi chiamare esportazione. webhookCheckout.
‫Ora dovrò importare questo controller nell'app. js.
‫Facciamolo proprio qui dopo il bookingRouter in realtà,
‫quindi questo e questo, controller
‫e anche qui controller.
‫Va bene.
‫Ora quaggiù c'è bookingController. webhookCheckout.
‫Ora perché definiamo effettivamente questo webhook-checkout proprio
‫qui nell'app. js invece di
‫farlo ad esempio nel bookingRouter.
‫Il motivo è che in questa funzione gestore, quando riceviamo
‫il corpo da Stripe, la funzione Stripe che
‫useremo per leggere effettivamente il
‫corpo ha bisogno di questo corpo in una forma grezza, quindi
‫fondamentalmente come una stringa e non come JSON.
‫Di nuovo, in questo percorso qui, abbiamo
‫bisogno che il corpo che arriva con la richiesta
‫non sia in JSON, altrimenti non funzionerà affatto.
‫Ora il fatto è che non appena una richiesta
‫raggiunge questo middleware qui, il corpo verrà analizzato
‫e convertito in JSON.
‫Verrà poi messo su richiesta. body come un semplice oggetto JSON.
‫Anche in questo caso, questo gestore di
‫route qui non funzionerebbe.
‫Questa è l'intera ragione per cui dobbiamo inserire questo percorso
‫qui prima di chiamare il body-parser.
‫Ora abbiamo ancora bisogno di analizzare effettivamente il corpo
‫ma in un cosiddetto formato raw.
‫Quando stavo registrando questo video, non potevamo
‫farlo con Express pronto all'uso.
‫E così, in questo video, scarichiamo il parser del corpo da npm e
‫lo usiamo come lo mostro nel video.
‫Tuttavia, come cinque giorni dopo aver registrato questo video,
‫Express ha aggiunto anche il parser non elaborato a Express.
‫Ora possiamo usare express. raw invece di dover
‫installare body-parser o middleware da npm.
‫Ancora una volta, in questo video, ora installerò il parser del corpo,
‫ma non è davvero necessario.
‫Puoi semplicemente usare espresso. crudo invece.
‫Npm install
‫body-parser.
‫Probabilmente tutto questo suona un po' focalizzato, e
‫lo capisco perfettamente, ma è proprio
‫così che funziona la documentazione di Stripe e ci
‫costringe a farlo, davvero.
‫Torniamo qui al nostro itinerario.
‫In questo percorso, abbiamo bisogno che il corpo sia in un formato grezzo.
‫Possiamo aggiungerlo come middleware qui tra il percorso e
‫il gestore finale.
‫Qui diciamo bodyParser. raw
‫e dobbiamo anche specificare qui
‫il tipo molto velocemente come application/json.
‫Ora abbiamo aggiunto questa analisi del corpo come corpo grezzo qui in
‫questo stack middleware.
‫Tutto questo inizierà davvero a riunirsi
‫una volta che inizieremo a implementare questa funzione.
‫In realtà facciamolo ora,
‫quindi proprio qui.
‫Ma prima di farlo,
‫liberiamoci di tutto il codice che abbiamo
‫scritto per farlo funzionare adesso.
‫Quindi, fondamentalmente questa funzione middleware, non
‫ne abbiamo più bisogno.
‫Anche qui in viewRoutes,
‫non ne abbiamo più bisogno neanche qui.
‫E infine, nel bookingController,
‫reimpostiamo anche il nostro URL alla normalità.
‫Lascerò tutto questo qui in modo che
‫tu possa tenerlo come riferimento.
‫Ma ora l'URL di successo dovrebbe essere proprio questo.
‫Fondamentalmente dopo una prenotazione andata a
‫buon fine, vogliamo ancora tornare a my-tours
‫ma senza tutti questi parametri
‫di query perché ora non è più questa funzione
‫qui, che si occuperà di creare la prenotazione
‫ma invece è questa funzione qui,
‫che è di ovviamente quello che
‫viene chiamato una volta che Stripe chiama il nostro webhook.
‫Ora implementiamo questo.
‫La prima cosa che
‫dobbiamo fare è eliminare questa firma Stripe dalle nostre intestazioni,
‫quindi firma e poi richiesta. intestazioni
‫e poi da lì stripe-firma.
‫Fondamentalmente, quando Stripe chiama il nostro
‫webhook, aggiungerà un'intestazione a quella
‫richiesta contenente una firma speciale per il nostro webhook.
‫Se stai pensando che stai solo seguendo
‫ciecamente quello che sto facendo
‫qui, beh, (ride) in realtà è esattamente quello che
‫ho fatto anche dalle documentazioni di Stripe.
‫Di nuovo, è proprio così che funziona Stripe, e non
‫c'è niente che possiamo fare contro questo.
‫Ad ogni modo, ora creiamo un
‫evento Stripe, quindi const event è uguale a stripe.
‫Per questo, ovviamente, abbiamo bisogno della libreria Stripe
‫installata, che abbiamo qui.
‫Quindi, striscia. webhook. costrutto evento.
‫Ora è qui che finalmente entra in gioco
‫quel corpo, quindi chiedi. corpo.
‫E ricorda che questo corpo qui
‫deve essere nella forma grezza,
‫quindi fondamentalmente disponibile come una stringa.
‫Ancora una volta, ecco perché mettiamo quella rotta prima di
‫tutte le nostre altre rotte
‫e soprattutto prima che il parser del corpo possa fare il
‫suo lavoro di convertire il nostro corpo in un oggetto JSON.
‫Quindi oltre a quel corpo, per l'evento, abbiamo bisogno di una firma, quindi in
‫pratica la firma che è stata
‫inviata insieme all'intestazione e infine il nostro segreto del webhook.
‫Prendiamolo da qui, copiamolo.
‫Poiché è un segreto, dovremmo, come sempre, aggiungerlo qui
‫al nostro
‫file di configurazione, quindi STRIPE_WEBHOOK_SECRET.
‫E poi, ovviamente, non dimenticare di aggiungere anche
‫questo alla nostra configurazione di Heroku.
‫Ora usiamo quello.
‫Aggiungi processo. avv.
‫Avrei dovuto copiarlo proprio
‫qui.
‫Quindi, vedete, tutto questo serve davvero a rendere
‫il processo super, super sicuro.
‫Abbiamo bisogno di tutti questi dati
‫come la firma e anche il segreto per convalidare sostanzialmente
‫i dati che arrivano nel
‫corpo in modo che nessuno possa effettivamente manipolarli.
‫Ora durante la creazione di questo evento,
‫potrebbero esserci degli
‫errori, ad esempio se la firma
‫è sbagliata o se il segreto è sbagliato.
‫E quindi, avvolgiamo questo in un blocco try-catch.
‫Va bene.
‫Certo, ora abbiamo bisogno della cattura.
‫In caso
‫di errore, vogliamo inviare un errore
‫a Stripe, quindi restituire res. stato 400 e poi basta
‫usare send webhook
‫error e poi aggiungiamo l'errore. Messaggio.
‫Quindi, è Stripe che riceverà questa risposta qui perché
‫di nuovo è Stripe che chiamerà effettivamente l'URL, quindi il
‫nostro webhook, che quindi chiamerà questa funzione.
‫Ora dobbiamo ovviamente dichiarare questo evento anche qui al di
‫fuori del blocco try-catch perché
‫altrimenti non saremo in grado di usarlo laggiù.
‫Quindi, lascia evento e poi riassegna qui perché ricorda che
‫ES6 const e let hanno
‫un ambito di blocco.
‫E quindi, questa variabile non sarebbe disponibile al di fuori
‫di questo blocco.
‫Ora usiamo effettivamente quell'evento.
‫Prima di tutto, dobbiamo verificare se questo è davvero l'evento
‫che vogliamo.
‫Quindi, possiamo fare eventi. type è uguale
‫a checkout. sessione. completare.
‫Ricorda che nella nostra dashboard
‫di Stripe, è esattamente il tipo che abbiamo definito qui.
‫Quindi, questo è il tipo di evento.
‫Ora stiamo controllando se questo è davvero
‫l'evento che stiamo ricevendo qui solo per essere sicuri al 100%.
‫Se lo è, vogliamo utilizzare effettivamente l'evento per creare la
‫nostra prenotazione nel nostro database.
‫In realtà facciamolo in una funzione separata
‫e non qui dentro a tutto questo casino.
‫Per questo, creerò una funzione.
‫In realtà lascia
‫che gli dia lo stesso identico nome, quindi createBookingCheckout.
‫In realtà era un bel nome, ma
‫ora non può essere un middleware
‫ma solo una normale funzione.
‫Questa funzione accetterà i dati della sessione.
‫E ricorda che i dati della sessione sono esattamente questa sessione che
‫abbiamo creato qui in primo luogo.
‫Se questo è l'evento corretto,
‫chiamiamo effettivamente quella funzione,
‫quindi createBookingCheckout con la sessione, che
‫è all'evento. dati. oggetto.
‫E
‫infine, inviamo una risposta a Stripe.
‫Quindi, lo stato
‫200 e quindi diciamo che alcuni
‫json ricevono impostato su true.
‫Ha senso?
‫Ancora una volta, tutto questo codice qui verrà
‫eseguito ogni volta che un pagamento è andato a buon fine.
‫Stripe chiamerà quindi il nostro webhook, che è l'URL,
‫che chiamerà questa funzione.
‫E così, questa funzione riceve un corpo dalla richiesta,
‫e quindi insieme alla firma e/o al segreto del webhook, crea
‫un evento, che conterrà la sessione.
‫E poi, usando i dati della
‫sessione, possiamo creare la nostra nuova prenotazione nel database.
‫E quindi, sarà in realtà abbastanza simile
‫a quello che avevamo qui prima.
‫Quindi, avremo di nuovo bisogno di questa riga di codice qui.
‫Quindi, anche questa sarà una funzione asincrona.
‫E così, questo è esattamente lo stesso.
‫Ora ciò di cui
‫abbiamo bisogno qui, ovviamente, è ottenere l'accesso al tour, all'utente e al prezzo.
‫Ma quei dati ancora una volta vengono archiviati in quella sessione.
‫Allora, iniziamo con il tour.
‫E ricorda come quassù quando abbiamo creato
‫per la prima volta questa
‫funzione del gestore, ho specificato questo campo client_reference_id
‫e ho aggiunto il tourId a quello.
‫Ricordati che?
‫L'ho fatto perché, all'epoca, sapevo
‫già che avremmo avuto bisogno di questo ID del tour un po' più tardi.
‫Ora è il momento in cui abbiamo effettivamente
‫bisogno dell'ID del tour per poter creare quella nuova prenotazione.
‫E così, ora l'ID del tour di
‫cui abbiamo bisogno si trova nell'ID di riferimento del client del punto di sessione.
‫Quindi, copiamo questo e diciamo
‫sessione.
‫E, naturalmente, qui dobbiamo dire tour.
‫Quindi, questo è l'ID del tour.
‫Successivamente, abbiamo bisogno dell'ID utente.
‫Ora le informazioni che abbiamo
‫nella nostra sessione sull'utente sono l'e-mail dell'utente.
‫E quindi, ora
‫ciò che dobbiamo fare è sostanzialmente ottenere l'ID dell'utente.
‫Per questo, interrogheremo tramite e-mail.
‫Non è un problema perché anche l'e-mail è unica.
‫Sulla base di ciò, possiamo quindi trovare l'ID univoco.
‫Quindi, l'utente const è in attesa.
‫E penso che abbiamo già l'utente qui.
‫No?
‫No, in realtà non lo faccio.
‫Quindi, facciamolo qui.
‫E anche qui l'utente.
‫Va bene.
‫Quindi, utente. findOne e poi interroga via e-mail, che
‫è nel punto di sessione, e credo che sia l'e-mail
‫del cliente o qualcosa del genere.
‫È email_cliente.
‫Va bene.
‫Ma questo restituirà l'intero documento, ma
‫in realtà vogliamo l'ID.
‫Quindi, avvolgiamo tutto questo qui tra
‫parentesi e poi chiamiamo l'ID lì o leggiamo effettivamente l'ID.
‫Quindi, questo è tutto.
‫E infine, il prezzo.
‫Dove viene memorizzato il prezzo?
‫Bene, è qui in line_items.
‫Questo è un array, quindi
‫all'elemento zero, quindi l'importo diviso per 100.
‫Quindi, l'abbiamo moltiplicato qui per 100 per ottenere centesimi,
‫ma ora ovviamente lo rivogliamo in dollari.
‫Quindi, dobbiamo sostanzialmente dividerlo indietro.
‫E così, sessione. line_items e poi
‫l'importo del punto del primo elemento se ho ragione.
‫Sì.
‫Quindi, importo diviso per 100.
‫Dovrebbe essere così.
‫Ora impegniamo le nostre modifiche al repository
‫e lo inseriamo in Stripe.
‫Quindi, git add all, ovviamente,
‫e poi git commit message
‫Miglioramento dell'implementazione dello
‫stripe, e poi git push heroku master.
‫Ancora una volta, ci vorrà del tempo.
‫Ci vediamo quando sarà finito.
‫Va bene.
‫Ora non dimenticare di impostare quella nuova variabile d'ambiente.
‫Quindi, questo è il set di due punti di configurazione di heroku,
‫quindi copialo semplicemente da qui.
‫Va bene.
‫Che quindi riavvia l'applicazione.
‫E questo è tutto.
‫Quindi, ora andiamo avanti e testiamolo.
‫Va bene.
‫Siamo ancora qui nella nostra applicazione.
‫Vediamo quali tour ha già prenotato Laura.
‫Ha l'escursionista della foresta.
‫Tale prenotazione è stata ancora effettuata utilizzando il vecchio metodo.
‫Ma quel vecchio metodo ora non funziona più.
‫Ora, se facciamo un'altra prenotazione e
‫funziona, beh, allora significa
‫che ovviamente la nostra nuova implementazione funziona.
‫Proviamolo qui.
‫Come sempre, 4242.
‫Adesso aspettiamo.
‫Beh, a quanto pare non è andata così bene
‫perché altrimenti il nostro secondo nuovo tour dovrebbe
‫essere già qui nelle nostre prenotazioni.
‫Vediamo qui nella nostra dashboard.
‫Se ora ricarichiamo
‫questo, vediamo effettivamente che c'è stato un evento di successo.
‫Quindi, questo è l'evento che abbiamo appena creato
‫e che ha inviato questo corpo qui e
‫poi ha ricevuto questa risposta.
‫Quindi, questa ricezione impostata su true è
‫esattamente ciò che abbiamo fatto qui nel nostro codice, quindi
‫questo qui.
‫Quindi, questa è la risposta che
‫abbiamo inviato e il corpo in cui siamo arrivati erano tutti questi dati.
‫E così, possiamo vedere qui la
‫sessione con il prezzo, con l'e-mail, con il tour.
‫E quindi, non sono sicuro del motivo per cui non ha funzionato.
‫Quindi, ricarichiamolo velocemente qui.
‫Quindi, in realtà la nostra implementazione di Stripe dovrebbe essere corretta, ma, per
‫qualche motivo, la nostra nuova prenotazione non è stata creata.
‫Verifichiamolo anche qui in Compass.
‫E infatti non c'è.
‫Quindi, torniamo al nostro codice qui.
‫Oh e un errore che vedo subito è qui.
‫Quindi, dovrebbe essere completato in questo modo.
‫Quindi, questo è uno stupido errore.
‫Vediamo solo se potrebbe
‫esserci un altro errore qui in createBookingCheckout.
‫Qui abbiamo
‫line_items.
‫Vediamo se è corretto.
‫E sì, sembra che lo sia.
‫Possiamo anche confermarlo qui di nuovo nel nostro Stripe.
‫In realtà qui si chiama display_items.
‫Quello è strano.
‫Giusto per essere sicuri, chiamiamolo anche display_items qui nel
‫nostro codice proprio qui.
‫Ora, un'altra cosa che ho
‫notato ora mentre davo un'altra
‫occhiata qui è che abbiamo ancora questa immagine hardcoded per
‫questi altri natiurs. sviluppatore
‫Ora risolviamolo perché a questo punto, ovviamente, il nostro
‫sito Web è già attivo e distribuito.
‫E quindi, possiamo sostanzialmente sostituirlo con lo
‫stesso che abbiamo qui.
‫Quindi, usiamo questa parte qui molte volte.
‫E quindi, è ora di usarlo di nuovo qui.
‫Sì.
‫Proviamo a ridistribuire questo.
‫Quindi, aggiungi di nuovo tutto.
‫E chiamiamolo qui
‫Implementazione dello stripe migliorata due.
‫E poi spingilo di nuovo su Heroku.
‫Va bene.
‫Proviamolo ancora una volta.
‫Torniamo qui.
‫Adesso proviamo a prenotare nuovamente al Park Camper.
‫Va bene.
‫Dovresti vedere l'immagine spuntare qui sul lato sinistro.
‫Ciò significa che anche la nostra nuova integrazione delle
‫immagini ha funzionato bene.
‫Ora è in elaborazione.
‫Ah ora è qui.
‫Grande.
‫Questo è bello.
‫Ora abbiamo davvero un'implementazione di
‫Stripe sicura e molto più professionale nella
‫nostra applicazione.
‫È fantastico.
‫Ovviamente, se ricarichi qui,
‫dovresti vedere questo nuovo evento qui, quindi questa nuova
‫chiamata al nostro webhook, che ovviamente
‫ha avuto successo di nuovo.
‫È semplicemente fantastico.
‫Ora c'è solo un'ultima cosa che voglio fare,
‫che è sostanzialmente dare all'utente un feedback sotto forma di
‫uno di questi messaggi verdi che usiamo
‫anche per esempio nel login.
‫Al momento la nostra applicazione non fornisce
‫alcun tipo di feedback quando è stato prenotato un nuovo tour.
‫Ora voglio cambiarlo.
‫Tuttavia, farlo non è molto semplice perché
‫ricorda che questi
‫messaggi vengono effettivamente visualizzati da JavaScript.
‫Quindi, negli altri casi, abbiamo fatto una chiamata HTTP alla nostra API.
‫E poi, quando è stato fatto, abbiamo usato JavaScript per
‫visualizzare un qualche tipo di messaggio.
‫Ma ora non lo facciamo in questo modo.
‫E così, il messaggio dovrebbe già essere da qualche parte
‫nell'HTML non appena la pagina
‫viene caricata in modo che il nostro JavaScript
‫possa prelevare quel messaggio dall'HTML e visualizzarlo bene in uno
‫di questi banner.
‫E così, il modo in cui inserirò questi
‫avvisi nell'HTML è ancora una volta utilizzando una proprietà dei dati.
‫Iniziamo implementando questa funzionalità proprio lì nel nostro
‫modello principale.
‫Questo è qui in visualizzazioni, base.
‫In realtà aggiungerò quel messaggio di avviso
‫direttamente sull'elemento del corpo.
‫Qui avremo una proprietà di avviso dei dati, che
‫in realtà dovrebbe essere impostata solo
‫se la variabile di avviso è disponibile qui.
‫Quindi, usiamo ES6, quindi una stringa modello, e
‫diciamo se c'è un avviso, quindi
‫usa avviso qui, e altrimenti, una stringa vuota.
‫E così, questo avviso qui sarà il
‫messaggio di avviso che JavaScript raccoglierà e visualizzerà sulla pagina.
‫Ora, come fa questo messaggio di avviso a finire effettivamente come
‫una variabile di avviso qui nel nostro modello?
‫Bene, ho trovato una soluzione riutilizzabile in modo da
‫poterla utilizzare in tutta la nostra applicazione.
‫Cioè sulla stringa di query, aggiungeremo una parola
‫chiave di avviso e quindi avremo
‫un middleware, che prenderà quella
‫parola chiave dall'URL e, in base alla parola chiave
‫che abbiamo inserito lì, inserirà quindi un
‫intero messaggio di avviso in risposta . gente del posto.
‫E quindi, ricorda che tutto ciò che è in risposta. locals è quindi
‫disponibile come variabile in tutti i nostri modelli.
‫Quindi, in realtà l'abbiamo usato prima
‫nel nostro authController, credo.
‫Molto rapidamente, lascia che te lo mostri.
‫Proprio qui, abbiamo detto risposta. Locale. utente e
‫inserire l'utente corrente lì.
‫Quindi automaticamente in tutti i modelli, abbiamo
‫accesso a quella variabile utente.
‫Quindi, ora implementiamo ciò che ho appena
‫detto e iniziando con l'URL.
‫Quello che farò qui è aggiungere effettivamente quella stringa di query
‫qui all'URL di successo.
‫Qui, dirò avviso uguale prenotazione.
‫Ora potrei, in tutti gli altri URL, aggiungere anche qualche avviso e quindi
‫con una parola chiave diversa qui, ovviamente.
‫E lo faremo proprio qui proprio per questa prenotazione.
‫Ma ancora una volta ho creato una sorta di soluzione riutilizzabile qui.
‫Ad ogni modo, ora nelle nostre rotte, abbiamo fondamentalmente bisogno di un
‫middleware, che funzioni per tutte le richieste.
‫Ed è quel middleware, che raccoglierà l'avviso
‫dalla stringa di query e inserirà un messaggio di avviso
‫nella nostra risposta. gente del posto.
‫Quindi, router.
‫usa viewsController. avvisi.
‫Quindi, questa è una funzione middleware,
‫che verrà eseguita fondamentalmente per ogni singola richiesta che arriva a
‫questo router, quindi fondamentalmente
‫per tutte le richieste al nostro sito web.
‫Ora creiamo effettivamente quel middleware nel
‫nostro viewsController.
‫Quindi, esportazioni. richiesta
‫di avvisi, risposta e successiva.
‫E così,
‫l'avviso è richiesta. interrogazione. mettere in guardia.
‫E quindi, usiamo questa struttura ancora una volta.
‫E poi diciamo se l'avviso è uguale alla prenotazione, quindi l'avviso
‫che mettiamo proprio qui nella stringa di query, beh,
‫allora in
‫quel caso, diciamo risposta. gente del posto. l'avviso sarà che la
‫tua
‫prenotazione è
‫andata a buon
‫fine, controlla la tua email per una conferma.
‫E dovremmo anche aggiungere qualche altra
‫frase, che è questa, se la tua prenotazione non lo fa, seleziona
‫questo, non viene visualizzato qui immediatamente, per favore torna
‫più tardi.
‫E quest'ultima
‫parte è perché Stripe dice in modo molto
‫specifico nella loro documentazione che a volte il webhook viene chiamato
‫un po' dopo che è stato chiamato l'URL di successo.
‫In tal caso, l'URL di successo mostrerebbe tutti
‫i tour correnti, ma solo dopo verrà
‫chiamato il webhook
‫e il tour verrà creato nel nostro database.
‫Pertanto, la nuova prenotazione non verrebbe visualizzata immediatamente
‫nella pagina Le mie prenotazioni.
‫Ma ovviamente, in quel caso, tutto funzionava ancora bene.
‫E così, semplicemente ricarico, ma in seguito risolveremo il problema.
‫Ora dobbiamo solo chiamare il prossimo middleware.
‫Ed è proprio così.
‫Ancora una volta, lo abbiamo fatto qui solo per l'avviso uguale alla
‫prenotazione, ma ora potremmo usarlo ovunque nel nostro
‫sito Web impostando parole chiave di avviso e
‫stringhe di query diverse.
‫Con questo, mettiamo questo messaggio qui in res. gente del posto. mettere in guardia.
‫Anche in questo caso, il nostro modello di base lo
‫raccoglierà e lo visualizzerà qui in questa proprietà di avviso dei dati.
‫E quindi, non resta che andare al nostro indice. js e leggi
‫l'avviso da qui e poi visualizzalo.
‫E quindi, dovrebbe essere abbastanza facile.
‫Qui in pubblico, facciamolo proprio nell'indice.
‫E la prima cosa è che abbiamo effettivamente bisogno di importare la
‫funzione degli avvisi.
‫Non è un'app.
‫È qui nell'indice.
‫Va bene.
‫E poi quaggiù, leggiamo fondamentalmente quell'avviso.
‫Quindi, const alertMessage, diciamo, è
‫document. querySelector, quindi
‫l'elemento body, dot dataset. mettere in guardia.
‫E così, solo se c'è un
‫avviso, ovviamente, quindi mostra l'avviso
‫con successo
‫e il messaggio di avviso.
‫E ora questa piccola cosa che voglio
‫fare è cambiare un po' questa funzione showAlert qui perché
‫in realtà abbiamo molto testo ora.
‫E l'ora standard in cui viene mostrato
‫l'avviso non sarebbe sufficiente per leggere effettivamente tutto il testo.
‫Quindi, vedi qui che dopo cinque secondi,
‫l'avviso è nascosto.
‫Consentiamo effettivamente all'utente di specificare
‫la quantità di secondi in cui viene mostrato l'avviso.
‫Lo faremo come impostazione predefinita di cinque secondi.
‫Qui, facciamo semplicemente il tempo per 1.000 per convertirlo
‫in millisecondi.
‫In questo modo, tutte le funzioni funzioneranno
‫ovunque con cinque secondi.
‫Realizziamo sette secondi se non
‫specifichiamo nulla.
‫Ma se vogliamo, possiamo sovrascrivere questi sette.
‫E così, lo farò ora
‫qui e lo metterò effettivamente sullo schermo per 20 secondi.
‫Va bene.
‫Penso che dovrebbe essere così.
‫Spero che abbia avuto senso.
‫Compiliamo ora molto velocemente il nostro bundle.
‫Questo è npm run build, quindi tocca il completamento automatico.
‫Anche questo richiede un po' di tempo.
‫Ma ora è fatto.
‫Ora distribuiamolo un'ultima volta sperando
‫che funzioni davvero.
‫Quindi, git commit.
‫Quindi, messaggi Stripe.
‫E un'ultima volta, git push heroku master.
‫Ora proviamolo acquistando ancora un altro tour qui.
‫Questa volta prendiamo il City Wanderer.
‫Oh, vedo solo che c'è già un messaggio qui.
‫Questo non è buono.
‫E vedi che è scomparso dopo 20 secondi.
‫Quindi, sembra che ora, per
‫impostazione predefinita, inserirà sempre questa classe di avviso qui.
‫(ride)
‫Sì.
‫Questo perché qui dovrebbe essere alertMessage e
‫non solo alert.
‫Ma comunque, ora proviamo solo se il messaggio
‫è effettivamente corretto quando prenotiamo il tour.
‫Va bene.
‫Adesso aspettiamo.
‫Eccoci qui.
‫In effetti, c'è il nostro messaggio.
‫Così bello.
‫Inoltre, il nostro tour si presenta qui.
‫E vedi che rimane davvero qui per molto tempo.
‫Quindi, funziona anche quello.
‫Andiamo molto velocemente...
‫E prima, abbiamo effettivamente bisogno di ricostruire il bundle qui.
‫Quindi possiamo aggiungere tutto alla nostra
‫area di staging, correzione del bug di avviso dei messaggi.
‫Quindi, questi
‫sono già alcuni (ride) messaggi dal suono davvero professionale.
‫Ora un'ultima spinta a Heroku.
‫Ora, quando carichiamo la nostra pagina, non dovremmo
‫vedere alcun messaggio di avviso.
‫E infatti, ora è tutto pulito.
‫E quindi, ora posso dire che, almeno per
‫ora, questo progetto è davvero finito.
‫Ancora una volta, ottimo lavoro, congratulazioni e ben
‫fatto per essere probabilmente una delle poche persone che stanno effettivamente
‫arrivando fino alla fine del progetto e
‫costruendo davvero questo bellissimo sito Web e anche API che
‫ora puoi inserire nel tuo portfolio e mostra
‫al mondo.