1 00:00:01,010 --> 00:00:03,730 ‫Docente: E ora per finire questo progetto, 2 00:00:03,730 --> 00:00:06,593 ‫finiamo questa integrazione di Stripe con i webhook. 3 00:00:09,310 --> 00:00:12,040 ‫Iniziamo a ricordare come funziona effettivamente la nostra 4 00:00:12,040 --> 00:00:14,210 ‫integrazione con Stripe in questo momento. 5 00:00:14,210 --> 00:00:16,750 ‫Abbiamo questo endpoint della sessione di 6 00:00:16,750 --> 00:00:19,540 ‫checkout, che viene chiamato dal nostro front-end. 7 00:00:19,540 --> 00:00:22,293 ‫Questo chiamerà quindi la funzione getCheckoutSession, quindi 8 00:00:23,440 --> 00:00:25,100 ‫fondamentalmente questa qui, 9 00:00:25,100 --> 00:00:28,180 ‫che creerà una sessione di checkout sul server 10 00:00:28,180 --> 00:00:30,300 ‫usando tutte queste informazioni qui, 11 00:00:30,300 --> 00:00:32,750 ‫e poi la rispedirà al client. 12 00:00:32,750 --> 00:00:35,170 ‫Quindi, dopo che l'elaborazione del pagamento è 13 00:00:35,170 --> 00:00:37,280 ‫stata eseguita con successo da 14 00:00:37,280 --> 00:00:40,990 ‫Stripe, reindirizza l'utente a questo URL di successo, quindi questo 15 00:00:40,990 --> 00:00:42,483 ‫che abbiamo creato. 16 00:00:44,210 --> 00:00:48,120 ‫Ricorda che su questo URL abbiamo aggiunto l'ID tour, 17 00:00:48,120 --> 00:00:50,920 ‫l'ID utente e anche il prezzo. 18 00:00:50,920 --> 00:00:55,040 ‫Lo abbiamo fatto in modo che una volta chiamato questo URL qui, 19 00:00:55,040 --> 00:00:57,920 ‫la nostra applicazione crei un nuovo documento di 20 00:00:57,920 --> 00:00:59,680 ‫prenotazione nel nostro database. 21 00:00:59,680 --> 00:01:01,047 ‫Come funzionava? 22 00:01:01,047 --> 00:01:04,743 ‫Nel percorso dei miei tour, abbiamo un middleware per questo. 23 00:01:06,040 --> 00:01:09,940 ‫Ricorda, qui in viewRoutes, in my-tours, 24 00:01:09,940 --> 00:01:12,467 ‫abbiamo questo createBookingCheckout. 25 00:01:14,770 --> 00:01:18,628 ‫Questa funzione qui, che sostanzialmente dalla query prende il 26 00:01:18,628 --> 00:01:21,440 ‫tour, l'utente e il prezzo e 27 00:01:21,440 --> 00:01:25,023 ‫crea una voce nel database utilizzando quei dati. 28 00:01:26,350 --> 00:01:29,160 ‫Fondamentalmente inseriamo questi dati nell'URL ogni 29 00:01:29,160 --> 00:01:32,500 ‫volta che Stripe elabora con successo un pagamento. 30 00:01:32,500 --> 00:01:34,990 ‫E poi questa funzione middleware che abbiamo qui 31 00:01:34,990 --> 00:01:38,570 ‫raccoglie i dati e crea una nuova prenotazione nel nostro sistema 32 00:01:38,570 --> 00:01:39,960 ‫usando quei dati. 33 00:01:39,960 --> 00:01:42,790 ‫E poi, in pratica, reindirizziamo qui 34 00:01:42,790 --> 00:01:45,763 ‫sull'URL originale senza la stringa di query. 35 00:01:46,770 --> 00:01:50,150 ‫Ora il problema con questo era che non è veramente sicuro. 36 00:01:50,150 --> 00:01:52,963 ‫Quindi, chiunque conosca questa struttura di URL, 37 00:01:54,010 --> 00:01:57,670 ‫quindi questo qui sopra, quale tour, utente e prezzo nella 38 00:01:57,670 --> 00:02:00,700 ‫stringa di query, può sostanzialmente creare una prenotazione nel 39 00:02:01,761 --> 00:02:03,850 ‫nostro sistema senza effettivamente pagare. 40 00:02:03,850 --> 00:02:07,120 ‫Quindi, tutto ciò che dovremmo fare è aprire questo 41 00:02:07,120 --> 00:02:08,500 ‫URL con alcuni 42 00:02:08,500 --> 00:02:11,680 ‫dati e poi da lì creare automaticamente una prenotazione 43 00:02:11,680 --> 00:02:14,193 ‫senza passare attraverso il processo Stripe. 44 00:02:15,540 --> 00:02:18,630 ‫Ricorda come allora ho detto che avremmo risolto il 45 00:02:18,630 --> 00:02:20,853 ‫problema usando qualcosa chiamato webhook. 46 00:02:22,090 --> 00:02:23,120 ‫Quindi, lo facciamo ora. 47 00:02:23,120 --> 00:02:24,090 ‫Perché per questo, 48 00:02:24,090 --> 00:02:27,140 ‫abbiamo effettivamente bisogno che il nostro sito Web venga distribuito. 49 00:02:27,140 --> 00:02:29,350 ‫Ora, a questo punto, è davvero così. 50 00:02:29,350 --> 00:02:31,833 ‫E così, ora possiamo implementare questi webhook. 51 00:02:33,240 --> 00:02:35,663 ‫Per questo, andiamo alla nostra dashboard di Stripe. 52 00:02:37,400 --> 00:02:39,750 ‫E in realtà l'ho già aperto qui. 53 00:02:39,750 --> 00:02:43,903 ‫E poi vai qui per gli sviluppatori, quindi scegli i webhook 54 00:02:45,070 --> 00:02:47,970 ‫e qui aggiungi un nuovo endpoint. 55 00:02:47,970 --> 00:02:52,149 ‫Ora, cos'è questo endpoint qui e questo webhook? 56 00:02:52,149 --> 00:02:55,380 ‫Fondamentalmente specificheremo qui un URL a cui Stripe invierà 57 00:02:55,380 --> 00:02:59,500 ‫automaticamente una richiesta POST ogni volta che una sessione di checkout è 58 00:02:59,500 --> 00:03:02,800 ‫stata completata con successo, quindi in pratica ogni volta che 59 00:03:02,800 --> 00:03:05,740 ‫un pagamento è andato a buon fine. 60 00:03:05,740 --> 00:03:09,920 ‫Con quella richiesta POST, Stripe invierà quindi i dati della sessione 61 00:03:09,920 --> 00:03:13,230 ‫originale che abbiamo creato nel primo passaggio quando abbiamo 62 00:03:13,230 --> 00:03:15,623 ‫creato quella sessione di checkout. 63 00:03:17,540 --> 00:03:20,130 ‫Questo è il motivo per cui in realtà avevamo bisogno 64 00:03:20,130 --> 00:03:23,010 ‫che il nostro sito Web fosse distribuito qui perché ora dobbiamo 65 00:03:23,010 --> 00:03:24,923 ‫specificare l'URL della vita reale qui. 66 00:03:27,170 --> 00:03:28,573 ‫Prendiamolo da qui 67 00:03:31,290 --> 00:03:34,150 ‫e poi aggiungiamo il nostro percorso qui in pratica. 68 00:03:34,150 --> 00:03:36,930 ‫Lo chiamerò un webhook-checkout. 69 00:03:41,620 --> 00:03:45,350 ‫Non è nell'API e non è nelle prenotazioni. 70 00:03:45,350 --> 00:03:47,593 ‫Vedrai tra un momento perché è così. 71 00:03:49,130 --> 00:03:51,210 ‫Anche in questo caso, quando un pagamento è 72 00:03:51,210 --> 00:03:53,280 ‫andato a buon fine, Stripe pubblicherà 73 00:03:53,280 --> 00:03:55,503 ‫automaticamente i dati della sessione originale su questo URL. 74 00:03:58,060 --> 00:04:00,380 ‫Ora dobbiamo anche selezionare l'evento. 75 00:04:00,380 --> 00:04:04,740 ‫E vedi, ci sono un sacco di eventi che potremmo usare qui. 76 00:04:04,740 --> 00:04:09,667 ‫Quello che stiamo usando è checkout_session_completed. 77 00:04:11,767 --> 00:04:12,650 ‫Aggiungilo. 78 00:04:12,650 --> 00:04:15,083 ‫Ora devi inserire di nuovo la tua password qui. 79 00:04:17,100 --> 00:04:19,110 ‫E poi ci andiamo. 80 00:04:19,110 --> 00:04:22,665 ‫Questo webhook ha quindi anche un segreto qui. 81 00:04:22,665 --> 00:04:25,850 ‫Questo ci servirà anche in un secondo quando 82 00:04:25,850 --> 00:04:29,063 ‫creeremo effettivamente il nostro percorso per questo URL qui. 83 00:04:29,980 --> 00:04:32,430 ‫In realtà è esattamente quello che faremo dopo. 84 00:04:33,750 --> 00:04:35,600 ‫Fondamentalmente nel nostro sistema, 85 00:04:35,600 --> 00:04:38,840 ‫ovviamente, ora abbiamo bisogno di un percorso per questo 86 00:04:39,960 --> 00:04:43,840 ‫qui in modo che quando Stripe invii i dati alla nostra 87 00:04:43,840 --> 00:04:46,233 ‫applicazione, possiamo effettivamente fare qualcosa con esso. 88 00:04:48,120 --> 00:04:52,233 ‫Torniamo qui e apriamo la nostra applicazione. 89 00:04:54,740 --> 00:04:57,743 ‫In realtà aggiungeremo questo percorso proprio qui. 90 00:04:59,610 --> 00:05:03,100 ‫Ancora una volta, ti spiegherò perché in un secondo. 91 00:05:03,100 --> 00:05:04,350 ‫Quindi, app. post 92 00:05:06,320 --> 00:05:08,850 ‫e percorso standard e quindi, naturalmente, abbiamo bisogno 93 00:05:08,850 --> 00:05:10,810 ‫di una funzione di gestione per questo. 94 00:05:10,810 --> 00:05:14,720 ‫Creiamolo velocemente qui nel nostro bookingController. 95 00:05:14,720 --> 00:05:19,013 ‫Fammi chiamare esportazione. webhookCheckout. 96 00:05:31,360 --> 00:05:36,360 ‫Ora dovrò importare questo controller nell'app. js. 97 00:05:39,210 --> 00:05:42,110 ‫Facciamolo proprio qui dopo il bookingRouter in realtà, 98 00:05:45,150 --> 00:05:47,133 ‫quindi questo e questo, controller 99 00:05:49,440 --> 00:05:51,383 ‫e anche qui controller. 100 00:05:54,580 --> 00:05:56,050 ‫Va bene. 101 00:05:56,050 --> 00:06:01,050 ‫Ora quaggiù c'è bookingController. webhookCheckout. 102 00:06:04,800 --> 00:06:08,820 ‫Ora perché definiamo effettivamente questo webhook-checkout proprio 103 00:06:08,820 --> 00:06:12,410 ‫qui nell'app. js invece di 104 00:06:12,410 --> 00:06:14,440 ‫farlo ad esempio nel bookingRouter. 105 00:06:14,440 --> 00:06:17,950 ‫Il motivo è che in questa funzione gestore, quando riceviamo 106 00:06:17,950 --> 00:06:20,677 ‫il corpo da Stripe, la funzione Stripe che 107 00:06:20,677 --> 00:06:22,850 ‫useremo per leggere effettivamente il 108 00:06:22,850 --> 00:06:26,780 ‫corpo ha bisogno di questo corpo in una forma grezza, quindi 109 00:06:26,780 --> 00:06:29,633 ‫fondamentalmente come una stringa e non come JSON. 110 00:06:31,370 --> 00:06:34,140 ‫Di nuovo, in questo percorso qui, abbiamo 111 00:06:34,140 --> 00:06:37,555 ‫bisogno che il corpo che arriva con la richiesta 112 00:06:37,555 --> 00:06:40,600 ‫non sia in JSON, altrimenti non funzionerà affatto. 113 00:06:40,600 --> 00:06:43,700 ‫Ora il fatto è che non appena una richiesta 114 00:06:43,700 --> 00:06:46,710 ‫raggiunge questo middleware qui, il corpo verrà analizzato 115 00:06:46,710 --> 00:06:48,563 ‫e convertito in JSON. 116 00:06:49,700 --> 00:06:54,650 ‫Verrà poi messo su richiesta. body come un semplice oggetto JSON. 117 00:06:54,650 --> 00:06:57,520 ‫Anche in questo caso, questo gestore di 118 00:06:57,520 --> 00:06:59,180 ‫route qui non funzionerebbe. 119 00:06:59,180 --> 00:07:02,520 ‫Questa è l'intera ragione per cui dobbiamo inserire questo percorso 120 00:07:02,520 --> 00:07:04,557 ‫qui prima di chiamare il body-parser. 121 00:07:05,580 --> 00:07:08,260 ‫Ora abbiamo ancora bisogno di analizzare effettivamente il corpo 122 00:07:08,260 --> 00:07:10,120 ‫ma in un cosiddetto formato raw. 123 00:07:10,120 --> 00:07:13,690 ‫Quando stavo registrando questo video, non potevamo 124 00:07:13,690 --> 00:07:17,220 ‫farlo con Express pronto all'uso. 125 00:07:17,220 --> 00:07:21,500 ‫E così, in questo video, scarichiamo il parser del corpo da npm e 126 00:07:21,500 --> 00:07:24,220 ‫lo usiamo come lo mostro nel video. 127 00:07:24,220 --> 00:07:28,340 ‫Tuttavia, come cinque giorni dopo aver registrato questo video, 128 00:07:28,340 --> 00:07:32,770 ‫Express ha aggiunto anche il parser non elaborato a Express. 129 00:07:32,770 --> 00:07:37,000 ‫Ora possiamo usare express. raw invece di dover 130 00:07:37,000 --> 00:07:39,523 ‫installare body-parser o middleware da npm. 131 00:07:40,530 --> 00:07:44,610 ‫Ancora una volta, in questo video, ora installerò il parser del corpo, 132 00:07:44,610 --> 00:07:46,440 ‫ma non è davvero necessario. 133 00:07:46,440 --> 00:07:49,293 ‫Puoi semplicemente usare espresso. crudo invece. 134 00:07:51,590 --> 00:07:52,700 ‫Npm install 135 00:07:54,480 --> 00:07:55,403 ‫body-parser. 136 00:07:58,950 --> 00:08:02,120 ‫Probabilmente tutto questo suona un po' focalizzato, e 137 00:08:02,120 --> 00:08:04,350 ‫lo capisco perfettamente, ma è proprio 138 00:08:04,350 --> 00:08:08,050 ‫così che funziona la documentazione di Stripe e ci 139 00:08:08,890 --> 00:08:10,893 ‫costringe a farlo, davvero. 140 00:08:15,210 --> 00:08:17,100 ‫Torniamo qui al nostro itinerario. 141 00:08:17,100 --> 00:08:20,453 ‫In questo percorso, abbiamo bisogno che il corpo sia in un formato grezzo. 142 00:08:21,460 --> 00:08:25,330 ‫Possiamo aggiungerlo come middleware qui tra il percorso e 143 00:08:25,330 --> 00:08:26,673 ‫il gestore finale. 144 00:08:28,654 --> 00:08:31,013 ‫Qui diciamo bodyParser. raw 145 00:08:34,830 --> 00:08:37,490 ‫e dobbiamo anche specificare qui 146 00:08:39,450 --> 00:08:43,127 ‫il tipo molto velocemente come application/json. 147 00:08:48,130 --> 00:08:52,660 ‫Ora abbiamo aggiunto questa analisi del corpo come corpo grezzo qui in 148 00:08:52,660 --> 00:08:54,183 ‫questo stack middleware. 149 00:08:55,964 --> 00:08:58,150 ‫Tutto questo inizierà davvero a riunirsi 150 00:08:58,150 --> 00:09:00,970 ‫una volta che inizieremo a implementare questa funzione. 151 00:09:00,970 --> 00:09:02,543 ‫In realtà facciamolo ora, 152 00:09:03,820 --> 00:09:05,210 ‫quindi proprio qui. 153 00:09:05,210 --> 00:09:07,100 ‫Ma prima di farlo, 154 00:09:07,100 --> 00:09:09,780 ‫liberiamoci di tutto il codice che abbiamo 155 00:09:09,780 --> 00:09:11,680 ‫scritto per farlo funzionare adesso. 156 00:09:11,680 --> 00:09:14,420 ‫Quindi, fondamentalmente questa funzione middleware, non 157 00:09:14,420 --> 00:09:16,350 ‫ne abbiamo più bisogno. 158 00:09:16,350 --> 00:09:18,480 ‫Anche qui in viewRoutes, 159 00:09:18,480 --> 00:09:21,980 ‫non ne abbiamo più bisogno neanche qui. 160 00:09:21,980 --> 00:09:24,770 ‫E infine, nel bookingController, 161 00:09:24,770 --> 00:09:28,153 ‫reimpostiamo anche il nostro URL alla normalità. 162 00:09:31,080 --> 00:09:33,180 ‫Lascerò tutto questo qui in modo che 163 00:09:33,180 --> 00:09:35,233 ‫tu possa tenerlo come riferimento. 164 00:09:37,390 --> 00:09:40,863 ‫Ma ora l'URL di successo dovrebbe essere proprio questo. 165 00:09:43,090 --> 00:09:45,400 ‫Fondamentalmente dopo una prenotazione andata a 166 00:09:45,400 --> 00:09:48,090 ‫buon fine, vogliamo ancora tornare a my-tours 167 00:09:48,090 --> 00:09:50,350 ‫ma senza tutti questi parametri 168 00:09:51,350 --> 00:09:54,580 ‫di query perché ora non è più questa funzione 169 00:09:54,580 --> 00:09:57,430 ‫qui, che si occuperà di creare la prenotazione 170 00:09:57,430 --> 00:09:59,770 ‫ma invece è questa funzione qui, 171 00:09:59,770 --> 00:10:02,060 ‫che è di ovviamente quello che 172 00:10:02,060 --> 00:10:05,633 ‫viene chiamato una volta che Stripe chiama il nostro webhook. 173 00:10:07,140 --> 00:10:08,470 ‫Ora implementiamo questo. 174 00:10:08,470 --> 00:10:10,140 ‫La prima cosa che 175 00:10:10,140 --> 00:10:13,763 ‫dobbiamo fare è eliminare questa firma Stripe dalle nostre intestazioni, 176 00:10:15,780 --> 00:10:19,840 ‫quindi firma e poi richiesta. intestazioni 177 00:10:21,500 --> 00:10:26,373 ‫e poi da lì stripe-firma. 178 00:10:28,220 --> 00:10:30,710 ‫Fondamentalmente, quando Stripe chiama il nostro 179 00:10:30,710 --> 00:10:32,830 ‫webhook, aggiungerà un'intestazione a quella 180 00:10:32,830 --> 00:10:36,280 ‫richiesta contenente una firma speciale per il nostro webhook. 181 00:10:38,480 --> 00:10:40,700 ‫Se stai pensando che stai solo seguendo 182 00:10:40,700 --> 00:10:42,590 ‫ciecamente quello che sto facendo 183 00:10:42,590 --> 00:10:45,070 ‫qui, beh, (ride) in realtà è esattamente quello che 184 00:10:45,070 --> 00:10:47,050 ‫ho fatto anche dalle documentazioni di Stripe. 185 00:10:47,050 --> 00:10:50,320 ‫Di nuovo, è proprio così che funziona Stripe, e non 186 00:10:50,320 --> 00:10:52,973 ‫c'è niente che possiamo fare contro questo. 187 00:10:54,350 --> 00:10:57,453 ‫Ad ogni modo, ora creiamo un 188 00:10:59,310 --> 00:11:03,690 ‫evento Stripe, quindi const event è uguale a stripe. 189 00:11:03,690 --> 00:11:07,410 ‫Per questo, ovviamente, abbiamo bisogno della libreria Stripe 190 00:11:07,410 --> 00:11:09,573 ‫installata, che abbiamo qui. 191 00:11:12,650 --> 00:11:14,350 ‫Quindi, striscia. webhook. costrutto evento. 192 00:11:20,378 --> 00:11:23,210 ‫Ora è qui che finalmente entra in gioco 193 00:11:23,210 --> 00:11:26,520 ‫quel corpo, quindi chiedi. corpo. 194 00:11:26,520 --> 00:11:28,370 ‫E ricorda che questo corpo qui 195 00:11:28,370 --> 00:11:30,220 ‫deve essere nella forma grezza, 196 00:11:30,220 --> 00:11:32,083 ‫quindi fondamentalmente disponibile come una stringa. 197 00:11:33,130 --> 00:11:36,340 ‫Ancora una volta, ecco perché mettiamo quella rotta prima di 198 00:11:36,340 --> 00:11:38,110 ‫tutte le nostre altre rotte 199 00:11:38,110 --> 00:11:41,580 ‫e soprattutto prima che il parser del corpo possa fare il 200 00:11:41,580 --> 00:11:44,863 ‫suo lavoro di convertire il nostro corpo in un oggetto JSON. 201 00:11:46,170 --> 00:11:51,050 ‫Quindi oltre a quel corpo, per l'evento, abbiamo bisogno di una firma, quindi in 202 00:11:51,050 --> 00:11:53,370 ‫pratica la firma che è stata 203 00:11:53,370 --> 00:11:56,763 ‫inviata insieme all'intestazione e infine il nostro segreto del webhook. 204 00:11:57,710 --> 00:12:00,653 ‫Prendiamolo da qui, copiamolo. 205 00:12:01,585 --> 00:12:05,610 ‫Poiché è un segreto, dovremmo, come sempre, aggiungerlo qui 206 00:12:05,610 --> 00:12:07,143 ‫al nostro 207 00:12:10,460 --> 00:12:12,737 ‫file di configurazione, quindi STRIPE_WEBHOOK_SECRET. 208 00:12:16,650 --> 00:12:19,380 ‫E poi, ovviamente, non dimenticare di aggiungere anche 209 00:12:19,380 --> 00:12:21,663 ‫questo alla nostra configurazione di Heroku. 210 00:12:26,100 --> 00:12:27,330 ‫Ora usiamo quello. 211 00:12:27,330 --> 00:12:28,767 ‫Aggiungi processo. avv. 212 00:12:30,330 --> 00:12:31,830 ‫Avrei dovuto copiarlo proprio 213 00:12:35,690 --> 00:12:36,573 ‫qui. 214 00:12:37,752 --> 00:12:41,200 ‫Quindi, vedete, tutto questo serve davvero a rendere 215 00:12:41,200 --> 00:12:43,450 ‫il processo super, super sicuro. 216 00:12:43,450 --> 00:12:45,970 ‫Abbiamo bisogno di tutti questi dati 217 00:12:45,970 --> 00:12:49,450 ‫come la firma e anche il segreto per convalidare sostanzialmente 218 00:12:49,450 --> 00:12:51,640 ‫i dati che arrivano nel 219 00:12:51,640 --> 00:12:54,433 ‫corpo in modo che nessuno possa effettivamente manipolarli. 220 00:12:55,870 --> 00:12:58,050 ‫Ora durante la creazione di questo evento, 221 00:12:58,050 --> 00:12:59,280 ‫potrebbero esserci degli 222 00:12:59,280 --> 00:13:01,420 ‫errori, ad esempio se la firma 223 00:13:01,420 --> 00:13:03,900 ‫è sbagliata o se il segreto è sbagliato. 224 00:13:03,900 --> 00:13:07,813 ‫E quindi, avvolgiamo questo in un blocco try-catch. 225 00:13:16,290 --> 00:13:17,850 ‫Va bene. 226 00:13:17,850 --> 00:13:19,500 ‫Certo, ora abbiamo bisogno della cattura. 227 00:13:22,150 --> 00:13:23,410 ‫In caso 228 00:13:23,410 --> 00:13:26,053 ‫di errore, vogliamo inviare un errore 229 00:13:27,880 --> 00:13:32,450 ‫a Stripe, quindi restituire res. stato 400 e poi basta 230 00:13:33,756 --> 00:13:35,657 ‫usare send webhook 231 00:13:40,140 --> 00:13:44,023 ‫error e poi aggiungiamo l'errore. Messaggio. 232 00:13:45,714 --> 00:13:49,220 ‫Quindi, è Stripe che riceverà questa risposta qui perché 233 00:13:49,220 --> 00:13:53,230 ‫di nuovo è Stripe che chiamerà effettivamente l'URL, quindi il 234 00:13:53,230 --> 00:13:56,603 ‫nostro webhook, che quindi chiamerà questa funzione. 235 00:13:58,520 --> 00:14:02,420 ‫Ora dobbiamo ovviamente dichiarare questo evento anche qui al di 236 00:14:02,420 --> 00:14:04,610 ‫fuori del blocco try-catch perché 237 00:14:04,610 --> 00:14:07,623 ‫altrimenti non saremo in grado di usarlo laggiù. 238 00:14:08,660 --> 00:14:13,160 ‫Quindi, lascia evento e poi riassegna qui perché ricorda che 239 00:14:13,160 --> 00:14:15,430 ‫ES6 const e let hanno 240 00:14:15,430 --> 00:14:17,450 ‫un ambito di blocco. 241 00:14:17,450 --> 00:14:20,480 ‫E quindi, questa variabile non sarebbe disponibile al di fuori 242 00:14:20,480 --> 00:14:21,473 ‫di questo blocco. 243 00:14:23,180 --> 00:14:25,830 ‫Ora usiamo effettivamente quell'evento. 244 00:14:25,830 --> 00:14:29,090 ‫Prima di tutto, dobbiamo verificare se questo è davvero l'evento 245 00:14:29,090 --> 00:14:29,923 ‫che vogliamo. 246 00:14:30,810 --> 00:14:34,240 ‫Quindi, possiamo fare eventi. type è uguale 247 00:14:34,240 --> 00:14:38,973 ‫a checkout. sessione. completare. 248 00:14:42,080 --> 00:14:44,370 ‫Ricorda che nella nostra dashboard 249 00:14:44,370 --> 00:14:48,090 ‫di Stripe, è esattamente il tipo che abbiamo definito qui. 250 00:14:48,090 --> 00:14:49,260 ‫Quindi, questo è il tipo di evento. 251 00:14:49,260 --> 00:14:52,183 ‫Ora stiamo controllando se questo è davvero 252 00:14:52,183 --> 00:14:56,287 ‫l'evento che stiamo ricevendo qui solo per essere sicuri al 100%. 253 00:14:56,287 --> 00:14:59,780 ‫Se lo è, vogliamo utilizzare effettivamente l'evento per creare la 254 00:14:59,780 --> 00:15:02,053 ‫nostra prenotazione nel nostro database. 255 00:15:03,860 --> 00:15:06,280 ‫In realtà facciamolo in una funzione separata 256 00:15:06,280 --> 00:15:08,983 ‫e non qui dentro a tutto questo casino. 257 00:15:10,517 --> 00:15:12,590 ‫Per questo, creerò una funzione. 258 00:15:12,590 --> 00:15:13,640 ‫In realtà lascia 259 00:15:13,640 --> 00:15:15,990 ‫che gli dia lo stesso identico nome, quindi createBookingCheckout. 260 00:15:17,487 --> 00:15:19,490 ‫In realtà era un bel nome, ma 261 00:15:19,490 --> 00:15:21,450 ‫ora non può essere un middleware 262 00:15:21,450 --> 00:15:23,250 ‫ma solo una normale funzione. 263 00:15:26,080 --> 00:15:28,823 ‫Questa funzione accetterà i dati della sessione. 264 00:15:31,080 --> 00:15:35,310 ‫E ricorda che i dati della sessione sono esattamente questa sessione che 265 00:15:35,310 --> 00:15:37,513 ‫abbiamo creato qui in primo luogo. 266 00:15:41,404 --> 00:15:43,730 ‫Se questo è l'evento corretto, 267 00:15:43,730 --> 00:15:45,743 ‫chiamiamo effettivamente quella funzione, 268 00:15:46,680 --> 00:15:49,500 ‫quindi createBookingCheckout con la sessione, che 269 00:15:49,500 --> 00:15:53,057 ‫è all'evento. dati. oggetto. 270 00:15:57,447 --> 00:15:58,320 ‫E 271 00:15:58,320 --> 00:16:01,333 ‫infine, inviamo una risposta a Stripe. 272 00:16:02,450 --> 00:16:03,840 ‫Quindi, lo stato 273 00:16:05,780 --> 00:16:07,480 ‫200 e quindi diciamo che alcuni 274 00:16:10,300 --> 00:16:11,823 ‫json ricevono impostato su true. 275 00:16:13,200 --> 00:16:14,033 ‫Ha senso? 276 00:16:16,000 --> 00:16:18,490 ‫Ancora una volta, tutto questo codice qui verrà 277 00:16:18,490 --> 00:16:21,390 ‫eseguito ogni volta che un pagamento è andato a buon fine. 278 00:16:21,390 --> 00:16:25,380 ‫Stripe chiamerà quindi il nostro webhook, che è l'URL, 279 00:16:25,380 --> 00:16:27,420 ‫che chiamerà questa funzione. 280 00:16:27,420 --> 00:16:30,600 ‫E così, questa funzione riceve un corpo dalla richiesta, 281 00:16:30,600 --> 00:16:34,330 ‫e quindi insieme alla firma e/o al segreto del webhook, crea 282 00:16:34,330 --> 00:16:37,110 ‫un evento, che conterrà la sessione. 283 00:16:37,110 --> 00:16:39,190 ‫E poi, usando i dati della 284 00:16:39,190 --> 00:16:41,963 ‫sessione, possiamo creare la nostra nuova prenotazione nel database. 285 00:16:43,987 --> 00:16:45,660 ‫E quindi, sarà in realtà abbastanza simile 286 00:16:45,660 --> 00:16:47,143 ‫a quello che avevamo qui prima. 287 00:16:48,400 --> 00:16:51,790 ‫Quindi, avremo di nuovo bisogno di questa riga di codice qui. 288 00:16:51,790 --> 00:16:53,923 ‫Quindi, anche questa sarà una funzione asincrona. 289 00:16:58,497 --> 00:17:00,530 ‫E così, questo è esattamente lo stesso. 290 00:17:00,530 --> 00:17:02,260 ‫Ora ciò di cui 291 00:17:02,260 --> 00:17:06,690 ‫abbiamo bisogno qui, ovviamente, è ottenere l'accesso al tour, all'utente e al prezzo. 292 00:17:06,690 --> 00:17:10,550 ‫Ma quei dati ancora una volta vengono archiviati in quella sessione. 293 00:17:10,550 --> 00:17:12,400 ‫Allora, iniziamo con il tour. 294 00:17:12,400 --> 00:17:14,780 ‫E ricorda come quassù quando abbiamo creato 295 00:17:14,780 --> 00:17:17,100 ‫per la prima volta questa 296 00:17:17,100 --> 00:17:20,040 ‫funzione del gestore, ho specificato questo campo client_reference_id 297 00:17:20,040 --> 00:17:22,370 ‫e ho aggiunto il tourId a quello. 298 00:17:22,370 --> 00:17:23,840 ‫Ricordati che? 299 00:17:23,840 --> 00:17:25,700 ‫L'ho fatto perché, all'epoca, sapevo 300 00:17:25,700 --> 00:17:29,840 ‫già che avremmo avuto bisogno di questo ID del tour un po' più tardi. 301 00:17:29,840 --> 00:17:32,490 ‫Ora è il momento in cui abbiamo effettivamente 302 00:17:32,490 --> 00:17:35,333 ‫bisogno dell'ID del tour per poter creare quella nuova prenotazione. 303 00:17:36,732 --> 00:17:38,490 ‫E così, ora l'ID del tour di 304 00:17:38,490 --> 00:17:41,670 ‫cui abbiamo bisogno si trova nell'ID di riferimento del client del punto di sessione. 305 00:17:41,670 --> 00:17:44,770 ‫Quindi, copiamo questo e diciamo 306 00:17:47,870 --> 00:17:48,703 ‫sessione. 307 00:17:49,660 --> 00:17:53,823 ‫E, naturalmente, qui dobbiamo dire tour. 308 00:17:55,670 --> 00:17:57,040 ‫Quindi, questo è l'ID del tour. 309 00:17:57,040 --> 00:17:59,150 ‫Successivamente, abbiamo bisogno dell'ID utente. 310 00:17:59,150 --> 00:18:01,240 ‫Ora le informazioni che abbiamo 311 00:18:01,240 --> 00:18:03,973 ‫nella nostra sessione sull'utente sono l'e-mail dell'utente. 312 00:18:05,630 --> 00:18:07,170 ‫E quindi, ora 313 00:18:07,170 --> 00:18:10,500 ‫ciò che dobbiamo fare è sostanzialmente ottenere l'ID dell'utente. 314 00:18:10,500 --> 00:18:12,793 ‫Per questo, interrogheremo tramite e-mail. 315 00:18:13,720 --> 00:18:16,810 ‫Non è un problema perché anche l'e-mail è unica. 316 00:18:16,810 --> 00:18:19,353 ‫Sulla base di ciò, possiamo quindi trovare l'ID univoco. 317 00:18:20,370 --> 00:18:24,183 ‫Quindi, l'utente const è in attesa. 318 00:18:25,570 --> 00:18:27,660 ‫E penso che abbiamo già l'utente qui. 319 00:18:27,660 --> 00:18:28,493 ‫No? 320 00:18:29,520 --> 00:18:30,570 ‫No, in realtà non lo faccio. 321 00:18:31,890 --> 00:18:33,290 ‫Quindi, facciamolo qui. 322 00:18:35,490 --> 00:18:37,973 ‫E anche qui l'utente. 323 00:18:41,070 --> 00:18:41,903 ‫Va bene. 324 00:18:41,903 --> 00:18:46,890 ‫Quindi, utente. findOne e poi interroga via e-mail, che 325 00:18:47,990 --> 00:18:51,330 ‫è nel punto di sessione, e credo che sia l'e-mail 326 00:18:51,330 --> 00:18:53,780 ‫del cliente o qualcosa del genere. 327 00:18:55,200 --> 00:18:56,200 ‫È email_cliente. 328 00:18:59,860 --> 00:19:00,693 ‫Va bene. 329 00:19:02,070 --> 00:19:04,970 ‫Ma questo restituirà l'intero documento, ma 330 00:19:04,970 --> 00:19:06,910 ‫in realtà vogliamo l'ID. 331 00:19:06,910 --> 00:19:09,780 ‫Quindi, avvolgiamo tutto questo qui tra 332 00:19:10,730 --> 00:19:14,743 ‫parentesi e poi chiamiamo l'ID lì o leggiamo effettivamente l'ID. 333 00:19:16,620 --> 00:19:17,960 ‫Quindi, questo è tutto. 334 00:19:17,960 --> 00:19:19,233 ‫E infine, il prezzo. 335 00:19:22,350 --> 00:19:24,023 ‫Dove viene memorizzato il prezzo? 336 00:19:25,320 --> 00:19:26,833 ‫Bene, è qui in line_items. 337 00:19:27,880 --> 00:19:30,610 ‫Questo è un array, quindi 338 00:19:30,610 --> 00:19:33,553 ‫all'elemento zero, quindi l'importo diviso per 100. 339 00:19:34,580 --> 00:19:38,210 ‫Quindi, l'abbiamo moltiplicato qui per 100 per ottenere centesimi, 340 00:19:38,210 --> 00:19:41,590 ‫ma ora ovviamente lo rivogliamo in dollari. 341 00:19:41,590 --> 00:19:44,700 ‫Quindi, dobbiamo sostanzialmente dividerlo indietro. 342 00:19:44,700 --> 00:19:48,550 ‫E così, sessione. line_items e poi 343 00:19:49,460 --> 00:19:54,460 ‫l'importo del punto del primo elemento se ho ragione. 344 00:19:55,950 --> 00:19:56,783 ‫Sì. 345 00:19:56,783 --> 00:20:01,710 ‫Quindi, importo diviso per 100. 346 00:20:01,710 --> 00:20:04,010 ‫Dovrebbe essere così. 347 00:20:04,010 --> 00:20:06,630 ‫Ora impegniamo le nostre modifiche al repository 348 00:20:06,630 --> 00:20:08,740 ‫e lo inseriamo in Stripe. 349 00:20:08,740 --> 00:20:12,840 ‫Quindi, git add all, ovviamente, 350 00:20:12,840 --> 00:20:16,600 ‫e poi git commit message 351 00:20:18,090 --> 00:20:21,633 ‫Miglioramento dell'implementazione dello 352 00:20:24,960 --> 00:20:29,960 ‫stripe, e poi git push heroku master. 353 00:20:31,190 --> 00:20:33,273 ‫Ancora una volta, ci vorrà del tempo. 354 00:20:33,273 --> 00:20:35,263 ‫Ci vediamo quando sarà finito. 355 00:20:36,200 --> 00:20:37,033 ‫Va bene. 356 00:20:37,033 --> 00:20:40,323 ‫Ora non dimenticare di impostare quella nuova variabile d'ambiente. 357 00:20:41,610 --> 00:20:46,610 ‫Quindi, questo è il set di due punti di configurazione di heroku, 358 00:20:46,750 --> 00:20:49,433 ‫quindi copialo semplicemente da qui. 359 00:20:53,590 --> 00:20:54,720 ‫Va bene. 360 00:20:54,720 --> 00:20:56,800 ‫Che quindi riavvia l'applicazione. 361 00:20:56,800 --> 00:20:58,173 ‫E questo è tutto. 362 00:20:59,570 --> 00:21:02,723 ‫Quindi, ora andiamo avanti e testiamolo. 363 00:21:04,980 --> 00:21:05,813 ‫Va bene. 364 00:21:07,050 --> 00:21:09,480 ‫Siamo ancora qui nella nostra applicazione. 365 00:21:09,480 --> 00:21:12,883 ‫Vediamo quali tour ha già prenotato Laura. 366 00:21:14,100 --> 00:21:15,370 ‫Ha l'escursionista della foresta. 367 00:21:15,370 --> 00:21:19,823 ‫Tale prenotazione è stata ancora effettuata utilizzando il vecchio metodo. 368 00:21:21,050 --> 00:21:24,240 ‫Ma quel vecchio metodo ora non funziona più. 369 00:21:24,240 --> 00:21:27,047 ‫Ora, se facciamo un'altra prenotazione e 370 00:21:27,047 --> 00:21:29,490 ‫funziona, beh, allora significa 371 00:21:29,490 --> 00:21:32,773 ‫che ovviamente la nostra nuova implementazione funziona. 372 00:21:34,730 --> 00:21:35,780 ‫Proviamolo qui. 373 00:21:39,760 --> 00:21:41,493 ‫Come sempre, 4242. 374 00:21:50,420 --> 00:21:51,683 ‫Adesso aspettiamo. 375 00:21:52,730 --> 00:21:55,740 ‫Beh, a quanto pare non è andata così bene 376 00:21:55,740 --> 00:21:58,520 ‫perché altrimenti il nostro secondo nuovo tour dovrebbe 377 00:21:58,520 --> 00:22:00,743 ‫essere già qui nelle nostre prenotazioni. 378 00:22:02,230 --> 00:22:04,203 ‫Vediamo qui nella nostra dashboard. 379 00:22:05,860 --> 00:22:06,983 ‫Se ora ricarichiamo 380 00:22:12,150 --> 00:22:15,893 ‫questo, vediamo effettivamente che c'è stato un evento di successo. 381 00:22:17,407 --> 00:22:20,320 ‫Quindi, questo è l'evento che abbiamo appena creato 382 00:22:20,320 --> 00:22:23,170 ‫e che ha inviato questo corpo qui e 383 00:22:23,170 --> 00:22:25,380 ‫poi ha ricevuto questa risposta. 384 00:22:25,380 --> 00:22:27,560 ‫Quindi, questa ricezione impostata su true è 385 00:22:27,560 --> 00:22:30,663 ‫esattamente ciò che abbiamo fatto qui nel nostro codice, quindi 386 00:22:31,670 --> 00:22:32,633 ‫questo qui. 387 00:22:34,060 --> 00:22:36,000 ‫Quindi, questa è la risposta che 388 00:22:36,000 --> 00:22:39,770 ‫abbiamo inviato e il corpo in cui siamo arrivati erano tutti questi dati. 389 00:22:39,770 --> 00:22:42,810 ‫E così, possiamo vedere qui la 390 00:22:42,810 --> 00:22:46,460 ‫sessione con il prezzo, con l'e-mail, con il tour. 391 00:22:46,460 --> 00:22:49,483 ‫E quindi, non sono sicuro del motivo per cui non ha funzionato. 392 00:22:51,000 --> 00:22:53,163 ‫Quindi, ricarichiamolo velocemente qui. 393 00:22:55,780 --> 00:22:59,050 ‫Quindi, in realtà la nostra implementazione di Stripe dovrebbe essere corretta, ma, per 394 00:22:59,050 --> 00:23:02,013 ‫qualche motivo, la nostra nuova prenotazione non è stata creata. 395 00:23:03,120 --> 00:23:05,020 ‫Verifichiamolo anche qui in Compass. 396 00:23:07,460 --> 00:23:09,970 ‫E infatti non c'è. 397 00:23:09,970 --> 00:23:12,123 ‫Quindi, torniamo al nostro codice qui. 398 00:23:13,410 --> 00:23:17,360 ‫Oh e un errore che vedo subito è qui. 399 00:23:17,360 --> 00:23:20,393 ‫Quindi, dovrebbe essere completato in questo modo. 400 00:23:22,090 --> 00:23:24,480 ‫Quindi, questo è uno stupido errore. 401 00:23:24,480 --> 00:23:26,950 ‫Vediamo solo se potrebbe 402 00:23:26,950 --> 00:23:30,050 ‫esserci un altro errore qui in createBookingCheckout. 403 00:23:30,050 --> 00:23:30,883 ‫Qui abbiamo 404 00:23:32,750 --> 00:23:33,583 ‫line_items. 405 00:23:33,583 --> 00:23:35,093 ‫Vediamo se è corretto. 406 00:23:36,110 --> 00:23:38,170 ‫E sì, sembra che lo sia. 407 00:23:38,170 --> 00:23:41,123 ‫Possiamo anche confermarlo qui di nuovo nel nostro Stripe. 408 00:23:43,110 --> 00:23:45,290 ‫In realtà qui si chiama display_items. 409 00:23:46,590 --> 00:23:47,423 ‫Quello è strano. 410 00:23:48,367 --> 00:23:52,140 ‫Giusto per essere sicuri, chiamiamolo anche display_items qui nel 411 00:23:52,140 --> 00:23:54,363 ‫nostro codice proprio qui. 412 00:23:55,980 --> 00:23:57,580 ‫Ora, un'altra cosa che ho 413 00:23:58,750 --> 00:24:00,350 ‫notato ora mentre davo un'altra 414 00:24:00,350 --> 00:24:03,510 ‫occhiata qui è che abbiamo ancora questa immagine hardcoded per 415 00:24:03,510 --> 00:24:05,763 ‫questi altri natiurs. sviluppatore 416 00:24:07,587 --> 00:24:11,380 ‫Ora risolviamolo perché a questo punto, ovviamente, il nostro 417 00:24:11,380 --> 00:24:14,580 ‫sito Web è già attivo e distribuito. 418 00:24:14,580 --> 00:24:16,600 ‫E quindi, possiamo sostanzialmente sostituirlo con lo 419 00:24:16,600 --> 00:24:18,100 ‫stesso che abbiamo qui. 420 00:24:20,900 --> 00:24:23,430 ‫Quindi, usiamo questa parte qui molte volte. 421 00:24:23,430 --> 00:24:25,480 ‫E quindi, è ora di usarlo di nuovo qui. 422 00:24:32,672 --> 00:24:33,505 ‫Sì. 423 00:24:33,505 --> 00:24:35,353 ‫Proviamo a ridistribuire questo. 424 00:24:36,380 --> 00:24:38,113 ‫Quindi, aggiungi di nuovo tutto. 425 00:24:40,420 --> 00:24:42,070 ‫E chiamiamolo qui 426 00:24:42,070 --> 00:24:44,430 ‫Implementazione dello stripe migliorata due. 427 00:24:44,430 --> 00:24:47,693 ‫E poi spingilo di nuovo su Heroku. 428 00:24:51,580 --> 00:24:52,560 ‫Va bene. 429 00:24:52,560 --> 00:24:54,253 ‫Proviamolo ancora una volta. 430 00:24:55,830 --> 00:24:57,023 ‫Torniamo qui. 431 00:25:00,630 --> 00:25:04,063 ‫Adesso proviamo a prenotare nuovamente al Park Camper. 432 00:25:15,760 --> 00:25:16,683 ‫Va bene. 433 00:25:17,920 --> 00:25:21,530 ‫Dovresti vedere l'immagine spuntare qui sul lato sinistro. 434 00:25:21,530 --> 00:25:24,200 ‫Ciò significa che anche la nostra nuova integrazione delle 435 00:25:24,200 --> 00:25:25,753 ‫immagini ha funzionato bene. 436 00:25:27,220 --> 00:25:28,283 ‫Ora è in elaborazione. 437 00:25:29,382 --> 00:25:31,380 ‫Ah ora è qui. 438 00:25:31,380 --> 00:25:32,320 ‫Grande. 439 00:25:32,320 --> 00:25:33,533 ‫Questo è bello. 440 00:25:34,420 --> 00:25:36,850 ‫Ora abbiamo davvero un'implementazione di 441 00:25:36,850 --> 00:25:39,940 ‫Stripe sicura e molto più professionale nella 442 00:25:39,940 --> 00:25:41,173 ‫nostra applicazione. 443 00:25:42,070 --> 00:25:43,520 ‫È fantastico. 444 00:25:43,520 --> 00:25:45,570 ‫Ovviamente, se ricarichi qui, 445 00:25:45,570 --> 00:25:49,500 ‫dovresti vedere questo nuovo evento qui, quindi questa nuova 446 00:25:49,500 --> 00:25:52,050 ‫chiamata al nostro webhook, che ovviamente 447 00:25:52,050 --> 00:25:54,593 ‫ha avuto successo di nuovo. 448 00:25:55,840 --> 00:25:57,690 ‫È semplicemente fantastico. 449 00:25:57,690 --> 00:26:00,740 ‫Ora c'è solo un'ultima cosa che voglio fare, 450 00:26:00,740 --> 00:26:04,420 ‫che è sostanzialmente dare all'utente un feedback sotto forma di 451 00:26:04,420 --> 00:26:06,980 ‫uno di questi messaggi verdi che usiamo 452 00:26:06,980 --> 00:26:09,123 ‫anche per esempio nel login. 453 00:26:10,650 --> 00:26:12,930 ‫Al momento la nostra applicazione non fornisce 454 00:26:12,930 --> 00:26:16,476 ‫alcun tipo di feedback quando è stato prenotato un nuovo tour. 455 00:26:16,476 --> 00:26:18,650 ‫Ora voglio cambiarlo. 456 00:26:18,650 --> 00:26:21,900 ‫Tuttavia, farlo non è molto semplice perché 457 00:26:21,900 --> 00:26:23,990 ‫ricorda che questi 458 00:26:23,990 --> 00:26:26,750 ‫messaggi vengono effettivamente visualizzati da JavaScript. 459 00:26:26,750 --> 00:26:30,280 ‫Quindi, negli altri casi, abbiamo fatto una chiamata HTTP alla nostra API. 460 00:26:30,280 --> 00:26:33,070 ‫E poi, quando è stato fatto, abbiamo usato JavaScript per 461 00:26:33,070 --> 00:26:34,840 ‫visualizzare un qualche tipo di messaggio. 462 00:26:34,840 --> 00:26:36,970 ‫Ma ora non lo facciamo in questo modo. 463 00:26:36,970 --> 00:26:40,710 ‫E così, il messaggio dovrebbe già essere da qualche parte 464 00:26:40,710 --> 00:26:42,380 ‫nell'HTML non appena la pagina 465 00:26:42,380 --> 00:26:45,400 ‫viene caricata in modo che il nostro JavaScript 466 00:26:45,400 --> 00:26:49,070 ‫possa prelevare quel messaggio dall'HTML e visualizzarlo bene in uno 467 00:26:49,070 --> 00:26:50,463 ‫di questi banner. 468 00:26:51,610 --> 00:26:54,510 ‫E così, il modo in cui inserirò questi 469 00:26:54,510 --> 00:26:58,223 ‫avvisi nell'HTML è ancora una volta utilizzando una proprietà dei dati. 470 00:26:59,450 --> 00:27:03,000 ‫Iniziamo implementando questa funzionalità proprio lì nel nostro 471 00:27:03,000 --> 00:27:04,363 ‫modello principale. 472 00:27:06,610 --> 00:27:09,273 ‫Questo è qui in visualizzazioni, base. 473 00:27:11,160 --> 00:27:13,630 ‫In realtà aggiungerò quel messaggio di avviso 474 00:27:13,630 --> 00:27:15,663 ‫direttamente sull'elemento del corpo. 475 00:27:17,110 --> 00:27:19,963 ‫Qui avremo una proprietà di avviso dei dati, che 476 00:27:21,860 --> 00:27:24,000 ‫in realtà dovrebbe essere impostata solo 477 00:27:24,000 --> 00:27:26,563 ‫se la variabile di avviso è disponibile qui. 478 00:27:27,480 --> 00:27:31,460 ‫Quindi, usiamo ES6, quindi una stringa modello, e 479 00:27:31,460 --> 00:27:35,060 ‫diciamo se c'è un avviso, quindi 480 00:27:35,060 --> 00:27:38,713 ‫usa avviso qui, e altrimenti, una stringa vuota. 481 00:27:39,980 --> 00:27:43,370 ‫E così, questo avviso qui sarà il 482 00:27:43,370 --> 00:27:47,230 ‫messaggio di avviso che JavaScript raccoglierà e visualizzerà sulla pagina. 483 00:27:47,230 --> 00:27:50,230 ‫Ora, come fa questo messaggio di avviso a finire effettivamente come 484 00:27:50,230 --> 00:27:52,513 ‫una variabile di avviso qui nel nostro modello? 485 00:27:53,360 --> 00:27:56,448 ‫Bene, ho trovato una soluzione riutilizzabile in modo da 486 00:27:56,448 --> 00:27:59,250 ‫poterla utilizzare in tutta la nostra applicazione. 487 00:27:59,250 --> 00:28:01,840 ‫Cioè sulla stringa di query, aggiungeremo una parola 488 00:28:01,840 --> 00:28:03,890 ‫chiave di avviso e quindi avremo 489 00:28:03,890 --> 00:28:05,820 ‫un middleware, che prenderà quella 490 00:28:05,820 --> 00:28:08,560 ‫parola chiave dall'URL e, in base alla parola chiave 491 00:28:08,560 --> 00:28:10,910 ‫che abbiamo inserito lì, inserirà quindi un 492 00:28:10,910 --> 00:28:15,050 ‫intero messaggio di avviso in risposta . gente del posto. 493 00:28:15,050 --> 00:28:19,000 ‫E quindi, ricorda che tutto ciò che è in risposta. locals è quindi 494 00:28:19,000 --> 00:28:22,483 ‫disponibile come variabile in tutti i nostri modelli. 495 00:28:23,450 --> 00:28:25,630 ‫Quindi, in realtà l'abbiamo usato prima 496 00:28:25,630 --> 00:28:27,563 ‫nel nostro authController, credo. 497 00:28:29,480 --> 00:28:32,567 ‫Molto rapidamente, lascia che te lo mostri. 498 00:28:33,530 --> 00:28:37,060 ‫Proprio qui, abbiamo detto risposta. Locale. utente e 499 00:28:37,060 --> 00:28:39,074 ‫inserire l'utente corrente lì. 500 00:28:39,074 --> 00:28:41,720 ‫Quindi automaticamente in tutti i modelli, abbiamo 501 00:28:41,720 --> 00:28:44,283 ‫accesso a quella variabile utente. 502 00:28:47,430 --> 00:28:50,070 ‫Quindi, ora implementiamo ciò che ho appena 503 00:28:50,070 --> 00:28:52,597 ‫detto e iniziando con l'URL. 504 00:28:54,330 --> 00:28:57,540 ‫Quello che farò qui è aggiungere effettivamente quella stringa di query 505 00:28:57,540 --> 00:28:59,097 ‫qui all'URL di successo. 506 00:28:59,970 --> 00:29:04,573 ‫Qui, dirò avviso uguale prenotazione. 507 00:29:05,970 --> 00:29:10,310 ‫Ora potrei, in tutti gli altri URL, aggiungere anche qualche avviso e quindi 508 00:29:10,310 --> 00:29:12,863 ‫con una parola chiave diversa qui, ovviamente. 509 00:29:14,350 --> 00:29:18,100 ‫E lo faremo proprio qui proprio per questa prenotazione. 510 00:29:18,100 --> 00:29:21,793 ‫Ma ancora una volta ho creato una sorta di soluzione riutilizzabile qui. 511 00:29:23,340 --> 00:29:27,470 ‫Ad ogni modo, ora nelle nostre rotte, abbiamo fondamentalmente bisogno di un 512 00:29:27,470 --> 00:29:29,920 ‫middleware, che funzioni per tutte le richieste. 513 00:29:29,920 --> 00:29:32,270 ‫Ed è quel middleware, che raccoglierà l'avviso 514 00:29:32,270 --> 00:29:35,240 ‫dalla stringa di query e inserirà un messaggio di avviso 515 00:29:35,240 --> 00:29:37,453 ‫nella nostra risposta. gente del posto. 516 00:29:41,457 --> 00:29:42,624 ‫Quindi, router. 517 00:29:45,040 --> 00:29:48,233 ‫usa viewsController. avvisi. 518 00:29:50,290 --> 00:29:52,320 ‫Quindi, questa è una funzione middleware, 519 00:29:52,320 --> 00:29:56,200 ‫che verrà eseguita fondamentalmente per ogni singola richiesta che arriva a 520 00:29:56,200 --> 00:29:58,130 ‫questo router, quindi fondamentalmente 521 00:29:58,130 --> 00:30:01,063 ‫per tutte le richieste al nostro sito web. 522 00:30:02,370 --> 00:30:04,870 ‫Ora creiamo effettivamente quel middleware nel 523 00:30:04,870 --> 00:30:06,020 ‫nostro viewsController. 524 00:30:10,460 --> 00:30:12,380 ‫Quindi, esportazioni. richiesta 525 00:30:14,480 --> 00:30:17,283 ‫di avvisi, risposta e successiva. 526 00:30:19,650 --> 00:30:20,730 ‫E così, 527 00:30:22,760 --> 00:30:26,300 ‫l'avviso è richiesta. interrogazione. mettere in guardia. 528 00:30:26,300 --> 00:30:29,873 ‫E quindi, usiamo questa struttura ancora una volta. 529 00:30:32,020 --> 00:30:36,553 ‫E poi diciamo se l'avviso è uguale alla prenotazione, quindi l'avviso 530 00:30:39,030 --> 00:30:42,653 ‫che mettiamo proprio qui nella stringa di query, beh, 531 00:30:44,670 --> 00:30:46,070 ‫allora in 532 00:30:46,070 --> 00:30:50,970 ‫quel caso, diciamo risposta. gente del posto. l'avviso sarà che la 533 00:30:52,830 --> 00:30:53,780 ‫tua 534 00:30:56,910 --> 00:30:57,970 ‫prenotazione è 535 00:30:59,850 --> 00:31:01,023 ‫andata a buon 536 00:31:03,790 --> 00:31:06,883 ‫fine, controlla la tua email per una conferma. 537 00:31:10,330 --> 00:31:13,090 ‫E dovremmo anche aggiungere qualche altra 538 00:31:13,090 --> 00:31:17,960 ‫frase, che è questa, se la tua prenotazione non lo fa, seleziona 539 00:31:24,070 --> 00:31:27,743 ‫questo, non viene visualizzato qui immediatamente, per favore torna 540 00:31:33,270 --> 00:31:34,523 ‫più tardi. 541 00:31:36,140 --> 00:31:37,230 ‫E quest'ultima 542 00:31:37,230 --> 00:31:39,920 ‫parte è perché Stripe dice in modo molto 543 00:31:39,920 --> 00:31:43,620 ‫specifico nella loro documentazione che a volte il webhook viene chiamato 544 00:31:43,620 --> 00:31:46,880 ‫un po' dopo che è stato chiamato l'URL di successo. 545 00:31:46,880 --> 00:31:49,810 ‫In tal caso, l'URL di successo mostrerebbe tutti 546 00:31:49,810 --> 00:31:52,677 ‫i tour correnti, ma solo dopo verrà 547 00:31:52,677 --> 00:31:54,300 ‫chiamato il webhook 548 00:31:54,300 --> 00:31:57,270 ‫e il tour verrà creato nel nostro database. 549 00:31:57,270 --> 00:32:00,040 ‫Pertanto, la nuova prenotazione non verrebbe visualizzata immediatamente 550 00:32:00,040 --> 00:32:01,953 ‫nella pagina Le mie prenotazioni. 551 00:32:02,850 --> 00:32:06,220 ‫Ma ovviamente, in quel caso, tutto funzionava ancora bene. 552 00:32:06,220 --> 00:32:09,583 ‫E così, semplicemente ricarico, ma in seguito risolveremo il problema. 553 00:32:12,340 --> 00:32:15,080 ‫Ora dobbiamo solo chiamare il prossimo middleware. 554 00:32:15,080 --> 00:32:17,160 ‫Ed è proprio così. 555 00:32:17,160 --> 00:32:21,390 ‫Ancora una volta, lo abbiamo fatto qui solo per l'avviso uguale alla 556 00:32:21,390 --> 00:32:24,090 ‫prenotazione, ma ora potremmo usarlo ovunque nel nostro 557 00:32:24,090 --> 00:32:27,070 ‫sito Web impostando parole chiave di avviso e 558 00:32:27,070 --> 00:32:28,982 ‫stringhe di query diverse. 559 00:32:28,982 --> 00:32:33,982 ‫Con questo, mettiamo questo messaggio qui in res. gente del posto. mettere in guardia. 560 00:32:35,600 --> 00:32:38,940 ‫Anche in questo caso, il nostro modello di base lo 561 00:32:38,940 --> 00:32:42,320 ‫raccoglierà e lo visualizzerà qui in questa proprietà di avviso dei dati. 562 00:32:42,320 --> 00:32:46,440 ‫E quindi, non resta che andare al nostro indice. js e leggi 563 00:32:46,440 --> 00:32:49,890 ‫l'avviso da qui e poi visualizzalo. 564 00:32:49,890 --> 00:32:52,100 ‫E quindi, dovrebbe essere abbastanza facile. 565 00:32:52,100 --> 00:32:56,230 ‫Qui in pubblico, facciamolo proprio nell'indice. 566 00:32:56,230 --> 00:33:00,260 ‫E la prima cosa è che abbiamo effettivamente bisogno di importare la 567 00:33:00,260 --> 00:33:01,343 ‫funzione degli avvisi. 568 00:33:06,480 --> 00:33:08,160 ‫Non è un'app. 569 00:33:08,160 --> 00:33:09,343 ‫È qui nell'indice. 570 00:33:10,920 --> 00:33:12,090 ‫Va bene. 571 00:33:12,090 --> 00:33:15,883 ‫E poi quaggiù, leggiamo fondamentalmente quell'avviso. 572 00:33:17,290 --> 00:33:22,133 ‫Quindi, const alertMessage, diciamo, è 573 00:33:23,250 --> 00:33:25,320 ‫document. querySelector, quindi 574 00:33:28,742 --> 00:33:31,327 ‫l'elemento body, dot dataset. mettere in guardia. 575 00:33:35,350 --> 00:33:37,673 ‫E così, solo se c'è un 576 00:33:39,760 --> 00:33:42,020 ‫avviso, ovviamente, quindi mostra l'avviso 577 00:33:43,160 --> 00:33:44,250 ‫con successo 578 00:33:45,840 --> 00:33:48,000 ‫e il messaggio di avviso. 579 00:33:48,000 --> 00:33:50,640 ‫E ora questa piccola cosa che voglio 580 00:33:50,640 --> 00:33:54,630 ‫fare è cambiare un po' questa funzione showAlert qui perché 581 00:33:54,630 --> 00:33:57,210 ‫in realtà abbiamo molto testo ora. 582 00:33:57,210 --> 00:33:59,780 ‫E l'ora standard in cui viene mostrato 583 00:33:59,780 --> 00:34:03,163 ‫l'avviso non sarebbe sufficiente per leggere effettivamente tutto il testo. 584 00:34:04,210 --> 00:34:06,880 ‫Quindi, vedi qui che dopo cinque secondi, 585 00:34:06,880 --> 00:34:08,373 ‫l'avviso è nascosto. 586 00:34:10,126 --> 00:34:11,760 ‫Consentiamo effettivamente all'utente di specificare 587 00:34:11,760 --> 00:34:14,253 ‫la quantità di secondi in cui viene mostrato l'avviso. 588 00:34:16,810 --> 00:34:20,320 ‫Lo faremo come impostazione predefinita di cinque secondi. 589 00:34:20,320 --> 00:34:24,810 ‫Qui, facciamo semplicemente il tempo per 1.000 per convertirlo 590 00:34:24,810 --> 00:34:26,483 ‫in millisecondi. 591 00:34:27,976 --> 00:34:30,690 ‫In questo modo, tutte le funzioni funzioneranno 592 00:34:30,690 --> 00:34:32,270 ‫ovunque con cinque secondi. 593 00:34:32,270 --> 00:34:34,790 ‫Realizziamo sette secondi se non 594 00:34:34,790 --> 00:34:36,600 ‫specifichiamo nulla. 595 00:34:36,600 --> 00:34:39,980 ‫Ma se vogliamo, possiamo sovrascrivere questi sette. 596 00:34:39,980 --> 00:34:42,040 ‫E così, lo farò ora 597 00:34:42,040 --> 00:34:45,370 ‫qui e lo metterò effettivamente sullo schermo per 20 secondi. 598 00:34:45,370 --> 00:34:46,203 ‫Va bene. 599 00:34:47,360 --> 00:34:49,240 ‫Penso che dovrebbe essere così. 600 00:34:49,240 --> 00:34:51,060 ‫Spero che abbia avuto senso. 601 00:34:51,060 --> 00:34:53,993 ‫Compiliamo ora molto velocemente il nostro bundle. 602 00:34:55,360 --> 00:35:00,343 ‫Questo è npm run build, quindi tocca il completamento automatico. 603 00:35:03,480 --> 00:35:05,990 ‫Anche questo richiede un po' di tempo. 604 00:35:05,990 --> 00:35:07,373 ‫Ma ora è fatto. 605 00:35:12,030 --> 00:35:14,340 ‫Ora distribuiamolo un'ultima volta sperando 606 00:35:15,580 --> 00:35:17,083 ‫che funzioni davvero. 607 00:35:18,250 --> 00:35:19,083 ‫Quindi, git commit. 608 00:35:25,840 --> 00:35:27,513 ‫Quindi, messaggi Stripe. 609 00:35:29,670 --> 00:35:34,670 ‫E un'ultima volta, git push heroku master. 610 00:35:37,451 --> 00:35:41,403 ‫Ora proviamolo acquistando ancora un altro tour qui. 611 00:35:42,830 --> 00:35:44,963 ‫Questa volta prendiamo il City Wanderer. 612 00:35:46,490 --> 00:35:49,683 ‫Oh, vedo solo che c'è già un messaggio qui. 613 00:35:50,810 --> 00:35:51,783 ‫Questo non è buono. 614 00:35:54,530 --> 00:35:58,500 ‫E vedi che è scomparso dopo 20 secondi. 615 00:35:58,500 --> 00:36:00,240 ‫Quindi, sembra che ora, per 616 00:36:00,240 --> 00:36:02,993 ‫impostazione predefinita, inserirà sempre questa classe di avviso qui. 617 00:36:06,028 --> 00:36:06,861 ‫(ride) 618 00:36:06,861 --> 00:36:07,694 ‫Sì. 619 00:36:07,694 --> 00:36:09,990 ‫Questo perché qui dovrebbe essere alertMessage e 620 00:36:09,990 --> 00:36:11,063 ‫non solo alert. 621 00:36:12,810 --> 00:36:16,800 ‫Ma comunque, ora proviamo solo se il messaggio 622 00:36:16,800 --> 00:36:20,433 ‫è effettivamente corretto quando prenotiamo il tour. 623 00:36:24,410 --> 00:36:25,243 ‫Va bene. 624 00:36:32,470 --> 00:36:34,880 ‫Adesso aspettiamo. 625 00:36:34,880 --> 00:36:36,330 ‫Eccoci qui. 626 00:36:36,330 --> 00:36:39,163 ‫In effetti, c'è il nostro messaggio. 627 00:36:40,130 --> 00:36:41,460 ‫Così bello. 628 00:36:41,460 --> 00:36:44,420 ‫Inoltre, il nostro tour si presenta qui. 629 00:36:44,420 --> 00:36:48,510 ‫E vedi che rimane davvero qui per molto tempo. 630 00:36:48,510 --> 00:36:49,853 ‫Quindi, funziona anche quello. 631 00:36:51,532 --> 00:36:52,832 ‫Andiamo molto velocemente... 632 00:36:55,840 --> 00:36:59,383 ‫E prima, abbiamo effettivamente bisogno di ricostruire il bundle qui. 633 00:37:03,877 --> 00:37:07,170 ‫Quindi possiamo aggiungere tutto alla nostra 634 00:37:13,580 --> 00:37:18,490 ‫area di staging, correzione del bug di avviso dei messaggi. 635 00:37:18,490 --> 00:37:19,670 ‫Quindi, questi 636 00:37:19,670 --> 00:37:23,500 ‫sono già alcuni (ride) messaggi dal suono davvero professionale. 637 00:37:23,500 --> 00:37:26,313 ‫Ora un'ultima spinta a Heroku. 638 00:37:29,670 --> 00:37:32,580 ‫Ora, quando carichiamo la nostra pagina, non dovremmo 639 00:37:32,580 --> 00:37:34,740 ‫vedere alcun messaggio di avviso. 640 00:37:34,740 --> 00:37:37,250 ‫E infatti, ora è tutto pulito. 641 00:37:37,250 --> 00:37:40,470 ‫E quindi, ora posso dire che, almeno per 642 00:37:40,470 --> 00:37:42,977 ‫ora, questo progetto è davvero finito. 643 00:37:42,977 --> 00:37:46,490 ‫Ancora una volta, ottimo lavoro, congratulazioni e ben 644 00:37:46,490 --> 00:37:51,100 ‫fatto per essere probabilmente una delle poche persone che stanno effettivamente 645 00:37:51,100 --> 00:37:54,350 ‫arrivando fino alla fine del progetto e 646 00:37:54,350 --> 00:37:58,370 ‫costruendo davvero questo bellissimo sito Web e anche API che 647 00:37:58,370 --> 00:38:01,780 ‫ora puoi inserire nel tuo portfolio e mostra 648 00:38:01,780 --> 00:38:02,923 ‫al mondo.