1 00:00:01,010 --> 00:00:03,730 ‫Dozent: Und nun, um dieses Projekt abzuschließen, 2 00:00:03,730 --> 00:00:06,593 ‫lassen Sie uns diese Stripe-Integration mit Webhooks abschließen. 3 00:00:09,310 --> 00:00:12,040 ‫Denken wir daran, wie unsere Stripe-Integration 4 00:00:12,040 --> 00:00:14,210 ‫jetzt tatsächlich funktioniert. 5 00:00:14,210 --> 00:00:16,750 ‫Wir haben diesen Checkout-Session-Endpunkt, 6 00:00:16,750 --> 00:00:19,540 ‫der von unserem Front-End aufgerufen wird. 7 00:00:19,540 --> 00:00:22,293 ‫Dies ruft dann die Funktion getCheckoutSession auf, also 8 00:00:23,440 --> 00:00:25,100 ‫im Grunde diese 9 00:00:25,100 --> 00:00:28,180 ‫hier, die mit all diesen Informationen hier eine 10 00:00:28,180 --> 00:00:30,300 ‫Checkout-Sitzung auf dem Server erstellt und 11 00:00:30,300 --> 00:00:32,750 ‫sie dann an den Client zurücksendet. 12 00:00:32,750 --> 00:00:35,170 ‫Nachdem die Zahlungsabwicklung von Stripe erfolgreich 13 00:00:35,170 --> 00:00:37,280 ‫durchgeführt wurde, leiten Sie den 14 00:00:37,280 --> 00:00:40,990 ‫Benutzer dann zu dieser Erfolgs-URL weiter, also dieser, die 15 00:00:40,990 --> 00:00:42,483 ‫wir erstellt haben. 16 00:00:44,210 --> 00:00:48,120 ‫Denken Sie daran, dass wir dieser URL die Tour-ID, die 17 00:00:48,120 --> 00:00:50,920 ‫Benutzer-ID und auch den Preis hinzugefügt haben. 18 00:00:50,920 --> 00:00:55,040 ‫Wir haben das gemacht, damit unsere Anwendung, sobald diese URL 19 00:00:55,040 --> 00:00:57,920 ‫hier aufgerufen wird, ein neues Buchungsdokument in 20 00:00:57,920 --> 00:00:59,680 ‫unserer Datenbank erstellt. 21 00:00:59,680 --> 00:01:01,047 ‫Wie hat das funktioniert? 22 00:01:01,047 --> 00:01:04,743 ‫In der my-tours-Route haben wir dafür eine Middleware. 23 00:01:06,040 --> 00:01:09,940 ‫Denken Sie daran, hier in den viewRoutes, in 24 00:01:09,940 --> 00:01:12,467 ‫my-tours, haben wir dieses createBookingCheckout. 25 00:01:14,770 --> 00:01:18,628 ‫Diese Funktion hier, die im Wesentlichen aus der Abfrage die Tour, 26 00:01:18,628 --> 00:01:21,440 ‫den Benutzer und den Preis nimmt und 27 00:01:21,440 --> 00:01:25,023 ‫mit diesen Daten einen Eintrag in der Datenbank erstellt. 28 00:01:26,350 --> 00:01:29,160 ‫Grundsätzlich setzen wir diese Daten immer dann 29 00:01:29,160 --> 00:01:32,500 ‫in die URL ein, wenn Stripe eine Zahlung erfolgreich verarbeitet. 30 00:01:32,500 --> 00:01:34,990 ‫Und dann holt diese Middleware-Funktion, die wir hier 31 00:01:34,990 --> 00:01:38,570 ‫haben, die Daten ab und erstellt anhand dieser Daten eine neue Buchung 32 00:01:38,570 --> 00:01:39,960 ‫in unserem System. 33 00:01:39,960 --> 00:01:42,790 ‫Und danach leiten wir hier im Grunde 34 00:01:42,790 --> 00:01:45,763 ‫auf die ursprüngliche URL ohne den Abfragestring um. 35 00:01:46,770 --> 00:01:50,150 ‫Das Problem dabei war, dass es nicht wirklich sicher ist. 36 00:01:50,150 --> 00:01:52,963 ‫Also, jeder, der diese URL-Struktur kennt, also 37 00:01:54,010 --> 00:01:57,670 ‫die hier oben, welche Tour, Benutzer und Preis im Abfragestring, 38 00:01:57,670 --> 00:02:00,700 ‫kann im Grunde eine Buchung in unserem System 39 00:02:01,761 --> 00:02:03,850 ‫erstellen, ohne tatsächlich zu bezahlen. 40 00:02:03,850 --> 00:02:07,120 ‫Wir müssen also nur diese URL mit einigen 41 00:02:07,120 --> 00:02:08,500 ‫Daten öffnen 42 00:02:08,500 --> 00:02:11,680 ‫und von dort aus automatisch eine Buchung 43 00:02:11,680 --> 00:02:14,193 ‫erstellen, ohne den Stripe-Prozess zu durchlaufen. 44 00:02:15,540 --> 00:02:18,630 ‫Denken Sie daran, wie ich damals sagte, dass wir dies 45 00:02:18,630 --> 00:02:20,853 ‫mit Hilfe von sogenannten Webhooks beheben würden. 46 00:02:22,090 --> 00:02:23,120 ‫Also, das machen wir jetzt. 47 00:02:23,120 --> 00:02:24,090 ‫Denn dafür 48 00:02:24,090 --> 00:02:27,140 ‫brauchen wir tatsächlich unsere Website, um bereitgestellt zu werden. 49 00:02:27,140 --> 00:02:29,350 ‫An diesem Punkt ist das jetzt tatsächlich der Fall. 50 00:02:29,350 --> 00:02:31,833 ‫Und jetzt können wir diese Webhooks implementieren. 51 00:02:33,240 --> 00:02:35,663 ‫Gehen wir dafür zu unserem Stripe-Dashboard. 52 00:02:37,400 --> 00:02:39,750 ‫Und das habe ich hier eigentlich schon geöffnet. 53 00:02:39,750 --> 00:02:43,903 ‫Gehen Sie dann hier zu Entwicklern, wählen Sie Webhooks aus und 54 00:02:45,070 --> 00:02:47,970 ‫fügen Sie hier einen neuen Endpunkt hinzu. 55 00:02:47,970 --> 00:02:52,149 ‫Was ist nun dieser Endpunkt hier und dieser Webhook? 56 00:02:52,149 --> 00:02:55,380 ‫Grundsätzlich werden wir hier eine URL angeben, 57 00:02:55,380 --> 00:02:59,500 ‫an die Stripe automatisch eine POST-Anfrage sendet, wenn eine Checkout-Sitzung 58 00:02:59,500 --> 00:03:02,800 ‫erfolgreich abgeschlossen wurde, also im Grunde immer 59 00:03:02,800 --> 00:03:05,740 ‫dann, wenn eine Zahlung erfolgreich war. 60 00:03:05,740 --> 00:03:09,920 ‫Mit dieser POST-Anfrage sendet Stripe dann die ursprünglichen Sitzungsdaten zurück, 61 00:03:09,920 --> 00:03:13,230 ‫die wir im ersten Schritt erstellt haben, als 62 00:03:13,230 --> 00:03:15,623 ‫wir diese Checkout-Sitzung erstellt haben. 63 00:03:17,540 --> 00:03:20,130 ‫Aus diesem Grund mussten wir unsere Website 64 00:03:20,130 --> 00:03:23,010 ‫eigentlich hier bereitstellen, da wir jetzt diese reale 65 00:03:23,010 --> 00:03:24,923 ‫URL hier angeben müssen. 66 00:03:27,170 --> 00:03:28,573 ‫Lassen Sie uns das von 67 00:03:31,290 --> 00:03:34,150 ‫hier aus aufnehmen und dann im Grunde unsere Route hier hinzufügen. 68 00:03:34,150 --> 00:03:36,930 ‫Ich werde dies einen Webhook-Checkout nennen. 69 00:03:41,620 --> 00:03:45,350 ‫Es ist nicht in der API und nicht in den Buchungen enthalten. 70 00:03:45,350 --> 00:03:47,593 ‫Sie werden gleich sehen, warum das so ist. 71 00:03:49,130 --> 00:03:51,210 ‫Auch hier wird Stripe bei 72 00:03:51,210 --> 00:03:53,280 ‫erfolgreicher Zahlung automatisch die 73 00:03:53,280 --> 00:03:55,503 ‫ursprünglichen Sitzungsdaten an diese URL senden. 74 00:03:58,060 --> 00:04:00,380 ‫Jetzt müssen wir auch noch das Ereignis auswählen. 75 00:04:00,380 --> 00:04:04,740 ‫Und Sie sehen, es gibt Tonnen von Ereignissen, die wir hier gebrauchen könnten. 76 00:04:04,740 --> 00:04:09,667 ‫Die von uns verwendete ist checkout_session_completed. 77 00:04:11,767 --> 00:04:12,650 ‫Fügen Sie das hinzu. 78 00:04:12,650 --> 00:04:15,083 ‫Jetzt müssen Sie hier noch einmal Ihr Passwort eingeben. 79 00:04:17,100 --> 00:04:19,110 ‫Und dann geht es los. 80 00:04:19,110 --> 00:04:22,665 ‫Dieser Webhook hat dann auch hier ein Geheimnis. 81 00:04:22,665 --> 00:04:25,850 ‫Diese benötigen wir dann auch gleich, wenn 82 00:04:25,850 --> 00:04:29,063 ‫wir hier tatsächlich unsere Route für diese URL erstellen. 83 00:04:29,980 --> 00:04:32,430 ‫Genau das werden wir als nächstes tun. 84 00:04:33,750 --> 00:04:35,600 ‫Grundsätzlich brauchen wir in 85 00:04:35,600 --> 00:04:38,840 ‫unserem System natürlich jetzt hier eine Route dafür, damit 86 00:04:39,960 --> 00:04:43,840 ‫wir, wenn Stripe die Daten dann an unsere Anwendung postet, dann 87 00:04:43,840 --> 00:04:46,233 ‫auch tatsächlich etwas damit anfangen können. 88 00:04:48,120 --> 00:04:52,233 ‫Lassen Sie uns hierher zurückkehren und unsere Anwendung öffnen. 89 00:04:54,740 --> 00:04:57,743 ‫Wir werden diese Route hier tatsächlich hinzufügen. 90 00:04:59,610 --> 00:05:03,100 ‫Auch hier erkläre ich Ihnen gleich warum. 91 00:05:03,100 --> 00:05:04,350 ‫Also App. post 92 00:05:06,320 --> 00:05:08,850 ‫und standard route und dann brauchen 93 00:05:08,850 --> 00:05:10,810 ‫wir natürlich eine Handlerfunktion dafür. 94 00:05:10,810 --> 00:05:14,720 ‫Lass es uns schnell hier in unserem bookingController erstellen. 95 00:05:14,720 --> 00:05:19,013 ‫Ich nenne das Export. webhookCheckout. 96 00:05:31,360 --> 00:05:36,360 ‫Jetzt muss ich diesen Controller in die App importieren. js. 97 00:05:39,210 --> 00:05:42,110 ‫Machen wir das eigentlich gleich hier nach dem 98 00:05:45,150 --> 00:05:47,133 ‫bookingRouter, also dieser und dieser, Controller 99 00:05:49,440 --> 00:05:51,383 ‫und hier auch Controller. 100 00:05:54,580 --> 00:05:56,050 ‫Gut. 101 00:05:56,050 --> 00:06:01,050 ‫Hier unten ist das bookingController. webhookCheckout. 102 00:06:04,800 --> 00:06:08,820 ‫Warum definieren wir eigentlich diesen Webhook-Checkout hier 103 00:06:08,820 --> 00:06:12,410 ‫in der App. js anstatt dies 104 00:06:12,410 --> 00:06:14,440 ‫beispielsweise im bookingRouter zu tun. 105 00:06:14,440 --> 00:06:17,950 ‫Der Grund dafür ist, dass in dieser Handler-Funktion, wenn wir 106 00:06:17,950 --> 00:06:20,677 ‫den Körper von Stripe erhalten, die Stripe-Funktion, die 107 00:06:20,677 --> 00:06:22,850 ‫wir dann verwenden werden, um 108 00:06:22,850 --> 00:06:26,780 ‫den Körper tatsächlich zu lesen, diesen Körper in einer rohen Form benötigt, 109 00:06:26,780 --> 00:06:29,633 ‫also im Grunde als String und nicht als JSON. 110 00:06:31,370 --> 00:06:34,140 ‫Auch hier müssen wir in dieser 111 00:06:34,140 --> 00:06:37,555 ‫Route den Körper, der mit der Anfrage kommt, nicht 112 00:06:37,555 --> 00:06:40,600 ‫in JSON sein, sonst funktioniert dies überhaupt nicht. 113 00:06:40,600 --> 00:06:43,700 ‫Die Sache ist nun, dass, sobald eine Anfrage 114 00:06:43,700 --> 00:06:46,710 ‫diese Middleware hier trifft, der Body geparst und 115 00:06:46,710 --> 00:06:48,563 ‫in JSON konvertiert wird. 116 00:06:49,700 --> 00:06:54,650 ‫Es wird dann auf Anfrage gestellt. body als einfaches JSON-Objekt. 117 00:06:54,650 --> 00:06:57,520 ‫Auch damit würde dieser Routenhandler hier 118 00:06:57,520 --> 00:06:59,180 ‫dann nicht funktionieren. 119 00:06:59,180 --> 00:07:02,520 ‫Aus diesem Grund müssen wir diese Route hier einfügen, 120 00:07:02,520 --> 00:07:04,557 ‫bevor wir den Body-Parser aufrufen. 121 00:07:05,580 --> 00:07:08,260 ‫Jetzt müssen wir noch den Körper tatsächlich parsen, 122 00:07:08,260 --> 00:07:10,120 ‫aber in einem sogenannten Rohformat. 123 00:07:10,120 --> 00:07:13,690 ‫Als ich dieses Video aufnahm, konnten wir es nicht 124 00:07:13,690 --> 00:07:17,220 ‫mit Express out of the box machen. 125 00:07:17,220 --> 00:07:21,500 ‫Und so laden wir in diesem Video den Body-Parser von npm herunter und 126 00:07:21,500 --> 00:07:24,220 ‫verwenden ihn, wie ich ihn im Video zeige. 127 00:07:24,220 --> 00:07:28,340 ‫Allerdings hat Express etwa fünf Tage nach der 128 00:07:28,340 --> 00:07:32,770 ‫Aufnahme dieses Videos auch den Rohparser zu Express hinzugefügt. 129 00:07:32,770 --> 00:07:37,000 ‫Jetzt können wir Express verwenden. raw statt den Body-Parser oder 130 00:07:37,000 --> 00:07:39,523 ‫die Middleware von npm installieren zu müssen. 131 00:07:40,530 --> 00:07:44,610 ‫Auch in diesem Video werde ich jetzt den Body-Parser installieren, aber das 132 00:07:44,610 --> 00:07:46,440 ‫ist nicht unbedingt erforderlich. 133 00:07:46,440 --> 00:07:49,293 ‫Sie können einfach Express verwenden. roh statt. 134 00:07:51,590 --> 00:07:52,700 ‫Npm Body-Parser 135 00:07:54,480 --> 00:07:55,403 ‫installieren. 136 00:07:58,950 --> 00:08:02,120 ‫Das klingt wahrscheinlich alles ein wenig konzentriert, und 137 00:08:02,120 --> 00:08:04,350 ‫ich verstehe das vollkommen, aber 138 00:08:04,350 --> 00:08:08,050 ‫genau so funktioniert die Stripe-Dokumentation und zwingt uns dazu, 139 00:08:08,890 --> 00:08:10,893 ‫es wirklich zu tun. 140 00:08:15,210 --> 00:08:17,100 ‫Kehren wir hier zu unserer Route zurück. 141 00:08:17,100 --> 00:08:20,453 ‫Auf dieser Route müssen wir den Körper in einem Rohformat haben. 142 00:08:21,460 --> 00:08:25,330 ‫Das können wir hier als Middleware zwischen der Route und dem 143 00:08:25,330 --> 00:08:26,673 ‫finalen Handler hinzufügen. 144 00:08:28,654 --> 00:08:31,013 ‫Hier sagen wir bodyParser. raw, 145 00:08:34,830 --> 00:08:37,490 ‫und wir müssen hier auch 146 00:08:39,450 --> 00:08:43,127 ‫den Typ sehr schnell als application/json angeben. 147 00:08:48,130 --> 00:08:52,660 ‫Wir haben dieses Body-Parsing jetzt als Rohkörper hier in 148 00:08:52,660 --> 00:08:54,183 ‫diesem Middleware-Stack hinzugefügt. 149 00:08:55,964 --> 00:08:58,150 ‫All dies wird wirklich zusammenkommen, 150 00:08:58,150 --> 00:09:00,970 ‫sobald wir mit der Implementierung dieser Funktion beginnen. 151 00:09:00,970 --> 00:09:02,543 ‫Lass uns das jetzt machen, 152 00:09:03,820 --> 00:09:05,210 ‫also gleich hier. 153 00:09:05,210 --> 00:09:07,100 ‫Aber bevor wir das tatsächlich 154 00:09:07,100 --> 00:09:09,780 ‫tun, lassen Sie uns den gesamten Code loswerden, den 155 00:09:09,780 --> 00:09:11,680 ‫wir geschrieben haben, damit er sofort funktioniert. 156 00:09:11,680 --> 00:09:14,420 ‫Im Grunde brauchen wir diese 157 00:09:14,420 --> 00:09:16,350 ‫Middleware-Funktion nicht mehr. 158 00:09:16,350 --> 00:09:18,480 ‫Auch hier in den 159 00:09:18,480 --> 00:09:21,980 ‫viewRoutes brauchen wir es hier auch nicht mehr. 160 00:09:21,980 --> 00:09:24,770 ‫Und schließlich setzen wir im 161 00:09:24,770 --> 00:09:28,153 ‫bookingController auch unsere URL wieder auf normal zurück. 162 00:09:31,080 --> 00:09:33,180 ‫Ich werde dies alles hier lassen, damit 163 00:09:33,180 --> 00:09:35,233 ‫Sie es als Referenz behalten können. 164 00:09:37,390 --> 00:09:40,863 ‫Aber jetzt sollte die Erfolgs-URL eigentlich nur diese sein. 165 00:09:43,090 --> 00:09:45,400 ‫Grundsätzlich möchten wir nach erfolgreicher 166 00:09:45,400 --> 00:09:48,090 ‫Buchung noch auf my-tours zurückkommen, aber 167 00:09:48,090 --> 00:09:50,350 ‫ohne all diese Abfrageparameter, 168 00:09:51,350 --> 00:09:54,580 ‫denn nun ist es nicht mehr diese Funktion 169 00:09:54,580 --> 00:09:57,430 ‫hier, die sich um die Erstellung der 170 00:09:57,430 --> 00:09:59,770 ‫Buchung kümmert, sondern diese Funktion 171 00:09:59,770 --> 00:10:02,060 ‫hier, die von natürlich derjenige, 172 00:10:02,060 --> 00:10:05,633 ‫der aufgerufen wird, sobald Stripe unseren Webhook anruft. 173 00:10:07,140 --> 00:10:08,470 ‫Lassen Sie uns dies nun implementieren. 174 00:10:08,470 --> 00:10:10,140 ‫Das erste, was wir 175 00:10:10,140 --> 00:10:13,763 ‫tun müssen, ist, diese Stripe-Signatur aus unseren Headern zu entfernen, 176 00:10:15,780 --> 00:10:19,840 ‫also signieren und dann anfordern. Header 177 00:10:21,500 --> 00:10:26,373 ‫und dann von dort Stripe-Signatur. 178 00:10:28,220 --> 00:10:30,710 ‫Wenn Stripe unseren Webhook aufruft, fügt es 179 00:10:30,710 --> 00:10:32,830 ‫dieser Anforderung grundsätzlich einen Header 180 00:10:32,830 --> 00:10:36,280 ‫hinzu, der eine spezielle Signatur für unseren Webhook enthält. 181 00:10:38,480 --> 00:10:40,700 ‫Wenn Sie denken, dass Sie einfach blindlings 182 00:10:40,700 --> 00:10:42,590 ‫dem folgen, was ich 183 00:10:42,590 --> 00:10:45,070 ‫hier tue, nun, (lacht), genau das habe 184 00:10:45,070 --> 00:10:47,050 ‫ich auch aus den Stripe-Dokumentationen gemacht. 185 00:10:47,050 --> 00:10:50,320 ‫Auch hier funktioniert Stripe wirklich so, und 186 00:10:50,320 --> 00:10:52,973 ‫wir können nichts dagegen tun. 187 00:10:54,350 --> 00:10:57,453 ‫Wie auch immer, als nächstes 188 00:10:59,310 --> 00:11:03,690 ‫erstellen wir ein Stripe-Ereignis, sodass const-Ereignis gleich Stripe ist. 189 00:11:03,690 --> 00:11:07,410 ‫Dafür müssen wir natürlich die Stripe-Bibliothek installieren, die 190 00:11:07,410 --> 00:11:09,573 ‫wir hier oben haben. 191 00:11:12,650 --> 00:11:14,350 ‫Also Streifen. Webhooks. constructEvent. 192 00:11:20,378 --> 00:11:23,210 ‫Hier kommt nun endlich dieser Körper ins Spiel, also 193 00:11:23,210 --> 00:11:26,520 ‫fordern Sie ihn an. Karosserie. 194 00:11:26,520 --> 00:11:28,370 ‫Und denken Sie daran, dass dieser Körper 195 00:11:28,370 --> 00:11:30,220 ‫hier in der Rohform vorliegen muss, 196 00:11:30,220 --> 00:11:32,083 ‫also im Grunde als String verfügbar ist. 197 00:11:33,130 --> 00:11:36,340 ‫Aus diesem Grund stellen wir diese Route noch 198 00:11:36,340 --> 00:11:38,110 ‫einmal vor alle unsere 199 00:11:38,110 --> 00:11:41,580 ‫anderen Routen und insbesondere, bevor der Body-Parser seine Aufgabe 200 00:11:41,580 --> 00:11:44,863 ‫erfüllen konnte, unseren Körper in ein JSON-Objekt zu konvertieren. 201 00:11:46,170 --> 00:11:51,050 ‫Dann brauchen wir neben diesem Body für das Event eine Signatur, also im 202 00:11:51,050 --> 00:11:53,370 ‫Grunde die Signatur, die zusammen 203 00:11:53,370 --> 00:11:56,763 ‫mit dem Header gesendet wurde, und schließlich unser Webhook-Geheimnis. 204 00:11:57,710 --> 00:12:00,653 ‫Holen wir uns das von hier, kopieren Sie es. 205 00:12:01,585 --> 00:12:05,610 ‫Da es ein Geheimnis ist, sollten wir es wie 206 00:12:05,610 --> 00:12:07,143 ‫immer hier zu 207 00:12:10,460 --> 00:12:12,737 ‫unserer Konfigurationsdatei hinzufügen, also STRIPE_WEBHOOK_SECRET. 208 00:12:16,650 --> 00:12:19,380 ‫Und später natürlich nicht vergessen, dies 209 00:12:19,380 --> 00:12:21,663 ‫auch zu unserer Heroku-Konfiguration hinzuzufügen. 210 00:12:26,100 --> 00:12:27,330 ‫Lass uns das jetzt benutzen. 211 00:12:27,330 --> 00:12:28,767 ‫Prozess hinzufügen. env. 212 00:12:30,330 --> 00:12:31,830 ‫Ich hätte das gleich hier 213 00:12:35,690 --> 00:12:36,573 ‫kopieren sollen. 214 00:12:37,752 --> 00:12:41,200 ‫Sie sehen, all dies dient dazu, den Prozess 215 00:12:41,200 --> 00:12:43,450 ‫super, super sicher zu machen. 216 00:12:43,450 --> 00:12:45,970 ‫Wir brauchen all diese Daten wie 217 00:12:45,970 --> 00:12:49,450 ‫die Signatur und auch das Geheimnis, um die Daten, die 218 00:12:49,450 --> 00:12:51,640 ‫in den Körper kommen, grundsätzlich 219 00:12:51,640 --> 00:12:54,433 ‫zu validieren, damit sie niemand wirklich manipulieren kann. 220 00:12:55,870 --> 00:12:58,050 ‫Nun kann es bei der Erstellung 221 00:12:58,050 --> 00:12:59,280 ‫dieses Ereignisses zu 222 00:12:59,280 --> 00:13:01,420 ‫Fehlern kommen, beispielsweise wenn die Signatur 223 00:13:01,420 --> 00:13:03,900 ‫falsch ist oder das Geheimnis falsch ist. 224 00:13:03,900 --> 00:13:07,813 ‫Also packen wir dies in einen Try-Catch-Block. 225 00:13:16,290 --> 00:13:17,850 ‫Okay. 226 00:13:17,850 --> 00:13:19,500 ‫Natürlich brauchen wir jetzt den Haken. 227 00:13:22,150 --> 00:13:23,410 ‫Falls ein 228 00:13:23,410 --> 00:13:26,053 ‫Fehler auftritt, möchten wir einen Fehler an 229 00:13:27,880 --> 00:13:32,450 ‫Stripe zurücksenden, also sende res zurück. status 400 und dann einfach send 230 00:13:33,756 --> 00:13:35,657 ‫webhook error verwenden und 231 00:13:40,140 --> 00:13:44,023 ‫dann den Fehler einfach hinzufügen. Botschaft. 232 00:13:45,714 --> 00:13:49,220 ‫Es ist also Stripe, der diese Antwort hier erhält, 233 00:13:49,220 --> 00:13:53,230 ‫weil es wiederum Stripe ist, der tatsächlich die URL aufruft, 234 00:13:53,230 --> 00:13:56,603 ‫also unseren Webhook, der dann diese Funktion aufruft. 235 00:13:58,520 --> 00:14:02,420 ‫Jetzt müssen wir dieses Ereignis natürlich auch hier außerhalb 236 00:14:02,420 --> 00:14:04,610 ‫des Try-Catch-Blocks deklarieren, da wir 237 00:14:04,610 --> 00:14:07,623 ‫es sonst dort unten nicht verwenden können. 238 00:14:08,660 --> 00:14:13,160 ‫Also, let event und dann hier unten neu zuweisen, denn denken 239 00:14:13,160 --> 00:14:15,430 ‫Sie daran, dass die ES6 const 240 00:14:15,430 --> 00:14:17,450 ‫und let block-Scope sind. 241 00:14:17,450 --> 00:14:20,480 ‫Daher wäre diese Variable außerhalb dieses Blocks 242 00:14:20,480 --> 00:14:21,473 ‫nicht verfügbar. 243 00:14:23,180 --> 00:14:25,830 ‫Lassen Sie uns dieses Ereignis nun tatsächlich verwenden. 244 00:14:25,830 --> 00:14:29,090 ‫Als erstes müssen wir testen, ob dies wirklich die Veranstaltung ist, die 245 00:14:29,090 --> 00:14:29,923 ‫wir wollen. 246 00:14:30,810 --> 00:14:34,240 ‫So können wir Event machen. type ist gleich 247 00:14:34,240 --> 00:14:38,973 ‫checkout. Sitzung. Komplett. 248 00:14:42,080 --> 00:14:44,370 ‫Denken Sie daran, dass dies in 249 00:14:44,370 --> 00:14:48,090 ‫unserem Stripe-Dashboard genau der Typ ist, den wir hier definiert haben. 250 00:14:48,090 --> 00:14:49,260 ‫Das ist also der Ereignistyp. 251 00:14:49,260 --> 00:14:52,183 ‫Jetzt prüfen wir, ob das wirklich das 252 00:14:52,183 --> 00:14:56,287 ‫Ereignis ist, das wir hier empfangen, nur um 100% sicher zu sein. 253 00:14:56,287 --> 00:14:59,780 ‫Wenn ja, möchten wir die Veranstaltung dann tatsächlich nutzen, um unsere 254 00:14:59,780 --> 00:15:02,053 ‫Buchung in unserer Datenbank zu erstellen. 255 00:15:03,860 --> 00:15:06,280 ‫Lassen Sie uns das in einer separaten 256 00:15:06,280 --> 00:15:08,983 ‫Funktion tun und nicht in diesem ganzen Durcheinander. 257 00:15:10,517 --> 00:15:12,590 ‫Dafür erstelle ich eine Funktion. 258 00:15:12,590 --> 00:15:13,640 ‫Lassen Sie mich 259 00:15:13,640 --> 00:15:15,990 ‫ihm genau denselben Namen geben, also createBookingCheckout. 260 00:15:17,487 --> 00:15:19,490 ‫Eigentlich ein schöner Name, aber jetzt 261 00:15:19,490 --> 00:15:21,450 ‫kann es keine Middleware sein, sondern 262 00:15:21,450 --> 00:15:23,250 ‫nur eine normale Funktion. 263 00:15:26,080 --> 00:15:28,823 ‫Diese Funktion übernimmt die Sitzungsdaten. 264 00:15:31,080 --> 00:15:35,310 ‫Und denken Sie daran, dass die Sitzungsdaten genau diese Sitzung sind, die 265 00:15:35,310 --> 00:15:37,513 ‫wir hier zuerst erstellt haben. 266 00:15:41,404 --> 00:15:43,730 ‫Wenn dies das richtige Ereignis ist, 267 00:15:43,730 --> 00:15:45,743 ‫rufen wir diese Funktion tatsächlich auf, 268 00:15:46,680 --> 00:15:49,500 ‫also createBookingCheckout mit der Sitzung, die sich im 269 00:15:49,500 --> 00:15:53,057 ‫Ereignis befindet. Daten. Objekt. 270 00:15:57,447 --> 00:15:58,320 ‫Und dann 271 00:15:58,320 --> 00:16:01,333 ‫lassen Sie uns zum Schluss einfach eine Antwort an Stripe zurücksenden. 272 00:16:02,450 --> 00:16:03,840 ‫Also, Status 200 und 273 00:16:05,780 --> 00:16:07,480 ‫dann nehmen wir an, dass ein 274 00:16:10,300 --> 00:16:11,823 ‫JSON-Empfang auf "true" gesetzt wird. 275 00:16:13,200 --> 00:16:14,033 ‫Macht Sinn? 276 00:16:16,000 --> 00:16:18,490 ‫Auch hier wird all dieser 277 00:16:18,490 --> 00:16:21,390 ‫Code ausgeführt, wenn eine Zahlung erfolgreich war. 278 00:16:21,390 --> 00:16:25,380 ‫Stripe ruft dann unseren Webhook auf, die URL, 279 00:16:25,380 --> 00:16:27,420 ‫die diese Funktion aufruft. 280 00:16:27,420 --> 00:16:30,600 ‫Diese Funktion erhält also einen Hauptteil der Anfrage 281 00:16:30,600 --> 00:16:34,330 ‫und erstellt dann zusammen mit der Signatur und/oder dem Webhook-Geheimnis 282 00:16:34,330 --> 00:16:37,110 ‫ein Ereignis, das die Sitzung enthält. 283 00:16:37,110 --> 00:16:39,190 ‫Und dann können wir mit diesen 284 00:16:39,190 --> 00:16:41,963 ‫Sitzungsdaten unsere neue Buchung in der Datenbank erstellen. 285 00:16:43,987 --> 00:16:45,660 ‫Das wird also dem, was wir hier 286 00:16:45,660 --> 00:16:47,143 ‫zuvor hatten, ziemlich ähnlich sein. 287 00:16:48,400 --> 00:16:51,790 ‫Wir werden diese Codezeile hier also wieder benötigen. 288 00:16:51,790 --> 00:16:53,923 ‫Dies wird also auch eine asynchrone Funktion sein. 289 00:16:58,497 --> 00:17:00,530 ‫Und das ist genau das gleiche. 290 00:17:00,530 --> 00:17:02,260 ‫Jetzt brauchen wir 291 00:17:02,260 --> 00:17:06,690 ‫hier natürlich Zugriff auf die Tour, den Benutzer und den Preis. 292 00:17:06,690 --> 00:17:10,550 ‫Aber diese Daten werden noch einmal in dieser Sitzung gespeichert. 293 00:17:10,550 --> 00:17:12,400 ‫Beginnen wir also mit der Tour. 294 00:17:12,400 --> 00:17:14,780 ‫Und erinnern Sie sich, wie ich 295 00:17:14,780 --> 00:17:17,100 ‫hier oben, als wir 296 00:17:17,100 --> 00:17:20,040 ‫diese Handler-Funktion zum ersten Mal erstellten, dieses client_reference_id-Feld 297 00:17:20,040 --> 00:17:22,370 ‫angegeben und die tourId hinzugefügt habe. 298 00:17:22,370 --> 00:17:23,840 ‫Erinnere dich daran? 299 00:17:23,840 --> 00:17:25,700 ‫Ich tat das, weil ich 300 00:17:25,700 --> 00:17:29,840 ‫zu diesem Zeitpunkt schon wusste, dass wir diese Tour ID etwas später brauchen würden. 301 00:17:29,840 --> 00:17:32,490 ‫Jetzt ist es an der Zeit, dass wir die 302 00:17:32,490 --> 00:17:35,333 ‫Tour-ID tatsächlich benötigen, um diese neue Buchung erstellen zu können. 303 00:17:36,732 --> 00:17:38,490 ‫Und so ist jetzt 304 00:17:38,490 --> 00:17:41,670 ‫die Tour-ID, die wir brauchen, die Referenz-ID des Sitzungspunkt-Clients. 305 00:17:41,670 --> 00:17:44,770 ‫Also, lass uns das kopieren und sagen 306 00:17:47,870 --> 00:17:48,703 ‫Session. 307 00:17:49,660 --> 00:17:53,823 ‫Und natürlich müssen wir hier Tour sagen. 308 00:17:55,670 --> 00:17:57,040 ‫Das ist also die Tour-ID. 309 00:17:57,040 --> 00:17:59,150 ‫Als nächstes benötigen wir die Benutzer-ID. 310 00:17:59,150 --> 00:18:01,240 ‫Jetzt sind die Informationen, die wir in 311 00:18:01,240 --> 00:18:03,973 ‫unserer Sitzung über den Benutzer haben, die E-Mail des Benutzers. 312 00:18:05,630 --> 00:18:07,170 ‫Was wir jetzt also 313 00:18:07,170 --> 00:18:10,500 ‫tun müssen, ist im Grunde die ID des Benutzers zu erhalten. 314 00:18:10,500 --> 00:18:12,793 ‫Dafür fragen wir per E-Mail ab. 315 00:18:13,720 --> 00:18:16,810 ‫Kein Problem, denn auch die E-Mail ist einzigartig. 316 00:18:16,810 --> 00:18:19,353 ‫Auf dieser Grundlage können wir dann die eindeutige ID finden. 317 00:18:20,370 --> 00:18:24,183 ‫Der const-Benutzer wird also erwartet. 318 00:18:25,570 --> 00:18:27,660 ‫Und ich denke, wir haben den Benutzer bereits hier. 319 00:18:27,660 --> 00:18:28,493 ‫Nein? 320 00:18:29,520 --> 00:18:30,570 ‫Nein, das tue ich tatsächlich nicht. 321 00:18:31,890 --> 00:18:33,290 ‫Also machen wir das hier einfach. 322 00:18:35,490 --> 00:18:37,973 ‫Und Benutzer auch hier. 323 00:18:41,070 --> 00:18:41,903 ‫Okay. 324 00:18:41,903 --> 00:18:46,890 ‫Also, Benutzer. findOne und fragen dann per E-Mail ab, 325 00:18:47,990 --> 00:18:51,330 ‫die sich im Sitzungspunkt befindet, und ich glaube, das ist 326 00:18:51,330 --> 00:18:53,780 ‫die E-Mail des Kunden oder so. 327 00:18:55,200 --> 00:18:56,200 ‫Es ist customer_email. 328 00:18:59,860 --> 00:19:00,693 ‫Okay. 329 00:19:02,070 --> 00:19:04,970 ‫Aber das wird dann das gesamte Dokument zurückgeben, aber 330 00:19:04,970 --> 00:19:06,910 ‫wir wollen eigentlich die ID. 331 00:19:06,910 --> 00:19:09,780 ‫Lassen Sie uns das alles hier in Klammern 332 00:19:10,730 --> 00:19:14,743 ‫setzen und dann die ID dort aufrufen oder die ID tatsächlich lesen. 333 00:19:16,620 --> 00:19:17,960 ‫Das war's. 334 00:19:17,960 --> 00:19:19,233 ‫Und schließlich der Preis. 335 00:19:22,350 --> 00:19:24,023 ‫Wo wird der Preis gespeichert? 336 00:19:25,320 --> 00:19:26,833 ‫Nun, es ist hier in line_items. 337 00:19:27,880 --> 00:19:30,610 ‫Das ist ein Array, also bei Element 338 00:19:30,610 --> 00:19:33,553 ‫null, und dann der Betrag geteilt durch 100. 339 00:19:34,580 --> 00:19:38,210 ‫Also haben wir es hier mit 100 multipliziert, um Cent zu 340 00:19:38,210 --> 00:19:41,590 ‫bekommen, aber jetzt wollen wir es natürlich in Dollar zurück. 341 00:19:41,590 --> 00:19:44,700 ‫Also müssen wir das im Grunde wieder aufteilen. 342 00:19:44,700 --> 00:19:48,550 ‫Und so, Sitzung. line_items und dann 343 00:19:49,460 --> 00:19:54,460 ‫die Punktmenge des ersten Elements, wenn ich richtig liege. 344 00:19:55,950 --> 00:19:56,783 ‫Ja. 345 00:19:56,783 --> 00:20:01,710 ‫Also Betrag geteilt durch 100. 346 00:20:01,710 --> 00:20:04,010 ‫Das sollte es eigentlich sein. 347 00:20:04,010 --> 00:20:06,630 ‫Lassen Sie uns nun unsere Änderungen in das 348 00:20:06,630 --> 00:20:08,740 ‫Repo übertragen und an Stripe übertragen. 349 00:20:08,740 --> 00:20:12,840 ‫Also, git natürlich alles hinzufügen 350 00:20:12,840 --> 00:20:16,600 ‫und dann git commit 351 00:20:18,090 --> 00:20:21,633 ‫message Verbesserte Stripe-Implementierung 352 00:20:24,960 --> 00:20:29,960 ‫und dann git push heroku master. 353 00:20:31,190 --> 00:20:33,273 ‫Dies wird wiederum einige Zeit in Anspruch nehmen. 354 00:20:33,273 --> 00:20:35,263 ‫Wir sehen uns, wenn das erledigt ist. 355 00:20:36,200 --> 00:20:37,033 ‫Gut. 356 00:20:37,033 --> 00:20:40,323 ‫Vergessen Sie jetzt nicht, diese neue Umgebungsvariable zu setzen. 357 00:20:41,610 --> 00:20:46,610 ‫Also, das ist heroku config Doppelpunktsatz, und dann 358 00:20:46,750 --> 00:20:49,433 ‫einfach von hier kopieren. 359 00:20:53,590 --> 00:20:54,720 ‫Okay. 360 00:20:54,720 --> 00:20:56,800 ‫Das startet dann die Anwendung neu. 361 00:20:56,800 --> 00:20:58,173 ‫Und das ist es. 362 00:20:59,570 --> 00:21:02,723 ‫Also, lassen Sie uns jetzt wirklich weitermachen und es testen. 363 00:21:04,980 --> 00:21:05,813 ‫Gut. 364 00:21:07,050 --> 00:21:09,480 ‫Wir sind immer noch hier in unserer Bewerbung. 365 00:21:09,480 --> 00:21:12,883 ‫Mal sehen, welche Touren Laura schon gebucht hat. 366 00:21:14,100 --> 00:21:15,370 ‫Sie hat den Waldwanderer. 367 00:21:15,370 --> 00:21:19,823 ‫Diese Buchung wurde noch mit der alten Methode durchgeführt. 368 00:21:21,050 --> 00:21:24,240 ‫Aber diese alte Methode funktioniert jetzt nicht mehr. 369 00:21:24,240 --> 00:21:27,047 ‫Wenn wir jetzt noch eine Buchung machen 370 00:21:27,047 --> 00:21:29,490 ‫und es funktioniert, nun, dann 371 00:21:29,490 --> 00:21:32,773 ‫bedeutet das natürlich, dass unsere neue Implementierung funktioniert. 372 00:21:34,730 --> 00:21:35,780 ‫Lass uns das hier testen. 373 00:21:39,760 --> 00:21:41,493 ‫Wie immer 4242. 374 00:21:50,420 --> 00:21:51,683 ‫Jetzt warten wir es ab. 375 00:21:52,730 --> 00:21:55,740 ‫Nun, das lief anscheinend nicht so gut, denn 376 00:21:55,740 --> 00:21:58,520 ‫sonst müsste unsere zweite neue Tour schon 377 00:21:58,520 --> 00:22:00,743 ‫in unseren Buchungen stehen. 378 00:22:02,230 --> 00:22:04,203 ‫Sehen wir uns hier in unserem Dashboard an. 379 00:22:05,860 --> 00:22:06,983 ‫Wenn wir das 380 00:22:12,150 --> 00:22:15,893 ‫jetzt nachladen, dann sehen wir tatsächlich, dass es eine gelungene Veranstaltung war. 381 00:22:17,407 --> 00:22:20,320 ‫Das ist also das Ereignis, das wir gerade erstellt 382 00:22:20,320 --> 00:22:23,170 ‫haben und das diesen Körper hierher geschickt und 383 00:22:23,170 --> 00:22:25,380 ‫dann diese Antwort erhalten hat. 384 00:22:25,380 --> 00:22:27,560 ‫Dieser auf true gesetzte Empfang ist also 385 00:22:27,560 --> 00:22:30,663 ‫genau das, was wir hier in unserem Code gemacht haben, 386 00:22:31,670 --> 00:22:32,633 ‫also hier. 387 00:22:34,060 --> 00:22:36,000 ‫Das ist also die Antwort, die 388 00:22:36,000 --> 00:22:39,770 ‫wir gesendet haben, und die Leiche, die wir bekamen, waren all diese Daten. 389 00:22:39,770 --> 00:22:42,810 ‫Und so können wir hier die Session 390 00:22:42,810 --> 00:22:46,460 ‫mit dem Preis, mit der E-Mail, mit der Tour sehen. 391 00:22:46,460 --> 00:22:49,483 ‫Und deshalb bin ich mir nicht sicher, warum es nicht funktioniert hat. 392 00:22:51,000 --> 00:22:53,163 ‫Also, lass uns das hier schnell neu laden. 393 00:22:55,780 --> 00:22:59,050 ‫Unsere Stripe-Implementierung sollte also eigentlich korrekt sein, aber aus 394 00:22:59,050 --> 00:23:02,013 ‫irgendeinem Grund wurde unsere neue Buchung nicht erstellt. 395 00:23:03,120 --> 00:23:05,020 ‫Lassen Sie uns das auch hier in Compass überprüfen. 396 00:23:07,460 --> 00:23:09,970 ‫Und tatsächlich ist es nicht da. 397 00:23:09,970 --> 00:23:12,123 ‫Kehren wir also zu unserem Code hier zurück. 398 00:23:13,410 --> 00:23:17,360 ‫Oh, und ein Fehler, den ich sofort sehe, ist hier. 399 00:23:17,360 --> 00:23:20,393 ‫Es sollte also so abgeschlossen werden. 400 00:23:22,090 --> 00:23:24,480 ‫Das ist also ein dummer Fehler. 401 00:23:24,480 --> 00:23:26,950 ‫Mal sehen, ob hier oben 402 00:23:26,950 --> 00:23:30,050 ‫in createBookingCheckout möglicherweise ein weiterer Fehler auftritt. 403 00:23:30,050 --> 00:23:30,883 ‫Hier haben 404 00:23:32,750 --> 00:23:33,583 ‫wir line_items. 405 00:23:33,583 --> 00:23:35,093 ‫Mal sehen ob das stimmt. 406 00:23:36,110 --> 00:23:38,170 ‫Und ja, es scheint zu sein. 407 00:23:38,170 --> 00:23:41,123 ‫Das können wir auch hier in unserem Stripe noch einmal bestätigen. 408 00:23:43,110 --> 00:23:45,290 ‫Eigentlich heißt es hier display_items. 409 00:23:46,590 --> 00:23:47,423 ‫Das ist seltsam. 410 00:23:48,367 --> 00:23:52,140 ‫Zur Sicherheit nennen wir es hier in unserem 411 00:23:52,140 --> 00:23:54,363 ‫Code hier auch display_items. 412 00:23:55,980 --> 00:23:57,580 ‫Eine andere Sache, die mir jetzt 413 00:23:58,750 --> 00:24:00,350 ‫aufgefallen ist, als ich hier noch 414 00:24:00,350 --> 00:24:03,510 ‫einmal nachgesehen habe, ist, dass wir dieses Bild immer noch in diesen 415 00:24:03,510 --> 00:24:05,763 ‫anderen Naturen festcodiert haben. dev. 416 00:24:07,587 --> 00:24:11,380 ‫Lassen Sie uns das nun tatsächlich beheben, denn zu diesem Zeitpunkt 417 00:24:11,380 --> 00:24:14,580 ‫ist unsere Website natürlich bereits live und bereitgestellt. 418 00:24:14,580 --> 00:24:16,600 ‫Und so können wir das im Grunde durch das 419 00:24:16,600 --> 00:24:18,100 ‫gleiche ersetzen, das wir hier haben. 420 00:24:20,900 --> 00:24:23,430 ‫Daher verwenden wir diesen Teil hier oft. 421 00:24:23,430 --> 00:24:25,480 ‫Es ist also an der Zeit, das hier wieder zu verwenden. 422 00:24:32,672 --> 00:24:33,505 ‫Ja. 423 00:24:33,505 --> 00:24:35,353 ‫Versuchen wir, dies erneut bereitzustellen. 424 00:24:36,380 --> 00:24:38,113 ‫Also, git alles wieder hinzufügen. 425 00:24:40,420 --> 00:24:42,070 ‫Und nennen wir 426 00:24:42,070 --> 00:24:44,430 ‫das hier einfach Verbesserte Stripe-Implementierung zwei. 427 00:24:44,430 --> 00:24:47,693 ‫Und dann schiebe es wieder zu Heroku. 428 00:24:51,580 --> 00:24:52,560 ‫Okay. 429 00:24:52,560 --> 00:24:54,253 ‫Versuchen wir das noch einmal. 430 00:24:55,830 --> 00:24:57,023 ‫Gehen wir hierher zurück. 431 00:25:00,630 --> 00:25:04,063 ‫Versuchen wir jetzt erneut, bei Park Camper zu buchen. 432 00:25:15,760 --> 00:25:16,683 ‫Gut. 433 00:25:17,920 --> 00:25:21,530 ‫Sie sollten das Bild hier auf der linken Seite sehen. 434 00:25:21,530 --> 00:25:24,200 ‫Das heißt, auch unsere neue Bildintegration 435 00:25:24,200 --> 00:25:25,753 ‫hat einwandfrei funktioniert. 436 00:25:27,220 --> 00:25:28,283 ‫Jetzt wird es bearbeitet. 437 00:25:29,382 --> 00:25:31,380 ‫Ach jetzt ist es da. 438 00:25:31,380 --> 00:25:32,320 ‫Groß. 439 00:25:32,320 --> 00:25:33,533 ‫Das ist schön. 440 00:25:34,420 --> 00:25:36,850 ‫Jetzt haben wir wirklich eine 441 00:25:36,850 --> 00:25:39,940 ‫sichere und viel professionellere Stripe-Implementierung in 442 00:25:39,940 --> 00:25:41,173 ‫unserer Anwendung. 443 00:25:42,070 --> 00:25:43,520 ‫Das ist großartig. 444 00:25:43,520 --> 00:25:45,570 ‫Natürlich, wenn Sie hier 445 00:25:45,570 --> 00:25:49,500 ‫nachladen, dann sollten Sie dieses neue Ereignis hier sehen, 446 00:25:49,500 --> 00:25:52,050 ‫also diesen neuen Aufruf zu unserem 447 00:25:52,050 --> 00:25:54,593 ‫Webhook, der natürlich wieder erfolgreich war. 448 00:25:55,840 --> 00:25:57,690 ‫Das ist einfach großartig. 449 00:25:57,690 --> 00:26:00,740 ‫Jetzt möchte ich nur noch eine letzte Sache machen, 450 00:26:00,740 --> 00:26:04,420 ‫nämlich dem Benutzer im Grunde ein Feedback in Form einer 451 00:26:04,420 --> 00:26:06,980 ‫dieser grünen Nachrichten zu geben, die wir 452 00:26:06,980 --> 00:26:09,123 ‫beispielsweise auch beim Login verwenden. 453 00:26:10,650 --> 00:26:12,930 ‫Im Moment gibt unsere Anwendung 454 00:26:12,930 --> 00:26:16,476 ‫kein wirkliches Feedback, wenn eine neue Tour gebucht wurde. 455 00:26:16,476 --> 00:26:18,650 ‫Das möchte ich nun ändern. 456 00:26:18,650 --> 00:26:21,900 ‫Dies ist jedoch nicht wirklich einfach, 457 00:26:21,900 --> 00:26:23,990 ‫da diese Nachrichten 458 00:26:23,990 --> 00:26:26,750 ‫tatsächlich von JavaScript angezeigt werden. 459 00:26:26,750 --> 00:26:30,280 ‫In den anderen Fällen haben wir also einen HTTP-Aufruf an unsere API durchgeführt. 460 00:26:30,280 --> 00:26:33,070 ‫Und als das erledigt war, haben wir JavaScript verwendet, um 461 00:26:33,070 --> 00:26:34,840 ‫irgendeine Art von Nachricht anzuzeigen. 462 00:26:34,840 --> 00:26:36,970 ‫Aber jetzt machen wir es nicht so. 463 00:26:36,970 --> 00:26:40,710 ‫Die Nachricht sollte also schon beim Laden der Seite 464 00:26:40,710 --> 00:26:42,380 ‫irgendwo im HTML-Code stehen, 465 00:26:42,380 --> 00:26:45,400 ‫damit unser JavaScript diese Nachricht aus dem 466 00:26:45,400 --> 00:26:49,070 ‫HTML-Code aufgreifen und dort oben in einem dieser Banner 467 00:26:49,070 --> 00:26:50,463 ‫schön darstellen kann. 468 00:26:51,610 --> 00:26:54,510 ‫Daher setze ich diese Warnungen wieder 469 00:26:54,510 --> 00:26:58,223 ‫in HTML ein, indem ich eine data-Eigenschaft verwende. 470 00:26:59,450 --> 00:27:03,000 ‫Beginnen wir damit, diese Funktion direkt in unserer 471 00:27:03,000 --> 00:27:04,363 ‫Hauptvorlage zu implementieren. 472 00:27:06,610 --> 00:27:09,273 ‫Das ist hier in Ansichten, Basis. 473 00:27:11,160 --> 00:27:13,630 ‫Ich werde diese Warnmeldung tatsächlich direkt 474 00:27:13,630 --> 00:27:15,663 ‫in das body-Element einfügen. 475 00:27:17,110 --> 00:27:19,963 ‫Hier haben wir eine Datenalert-Eigenschaft, die eigentlich 476 00:27:21,860 --> 00:27:24,000 ‫nur gesetzt werden sollte, 477 00:27:24,000 --> 00:27:26,563 ‫wenn die Alert-Variable hier verfügbar ist. 478 00:27:27,480 --> 00:27:31,460 ‫Verwenden wir also ES6, also eine Vorlagenzeichenfolge, und sagen 479 00:27:31,460 --> 00:27:35,060 ‫wir, wenn es eine Warnung gibt, verwenden 480 00:27:35,060 --> 00:27:38,713 ‫wir hier "alert" und andernfalls eine leere Zeichenfolge. 481 00:27:39,980 --> 00:27:43,370 ‫Daher ist diese Warnung hier die Warnmeldung, 482 00:27:43,370 --> 00:27:47,230 ‫die JavaScript dann aufnimmt und auf der Seite anzeigt. 483 00:27:47,230 --> 00:27:50,230 ‫Wie landet diese Warnmeldung nun eigentlich als 484 00:27:50,230 --> 00:27:52,513 ‫Warnvariable hier in unserem Template? 485 00:27:53,360 --> 00:27:56,448 ‫Nun, ich habe eine Lösung entwickelt, die wiederverwendbar ist, sodass 486 00:27:56,448 --> 00:27:59,250 ‫wir sie in unserer gesamten Anwendung verwenden können. 487 00:27:59,250 --> 00:28:01,840 ‫Das heißt, wir fügen in der Abfragezeichenfolge 488 00:28:01,840 --> 00:28:03,890 ‫ein Warnschlüsselwort hinzu und dann 489 00:28:03,890 --> 00:28:05,820 ‫haben wir eine Middleware, 490 00:28:05,820 --> 00:28:08,560 ‫die dieses Schlüsselwort aus der URL nimmt und 491 00:28:08,560 --> 00:28:10,910 ‫dann entsprechend dem dort eingegebenen Schlüsselwort eine 492 00:28:10,910 --> 00:28:15,050 ‫ganze Warnmeldung als Antwort ausgibt . Einheimische. 493 00:28:15,050 --> 00:28:19,000 ‫Denken Sie also daran, dass alles, was auf Antwort steht. locals steht dann 494 00:28:19,000 --> 00:28:22,483 ‫als Variable in allen unseren Templates zur Verfügung. 495 00:28:23,450 --> 00:28:25,630 ‫Also, wir haben das tatsächlich schon früher 496 00:28:25,630 --> 00:28:27,563 ‫in unserem AuthController verwendet, glaube ich. 497 00:28:29,480 --> 00:28:32,567 ‫Ganz schnell, lass mich dir das zeigen. 498 00:28:33,530 --> 00:28:37,060 ‫Genau hier sagten wir Antwort. lokal. Benutzer und legen 499 00:28:37,060 --> 00:28:39,074 ‫Sie dort den aktuellen Benutzer ab. 500 00:28:39,074 --> 00:28:41,720 ‫Dann haben wir automatisch in allen 501 00:28:41,720 --> 00:28:44,283 ‫Vorlagen Zugriff auf diese Benutzervariable. 502 00:28:47,430 --> 00:28:50,070 ‫Also, lasst uns jetzt implementieren, was ich gerade 503 00:28:50,070 --> 00:28:52,597 ‫gesagt habe und mit der URL beginnen. 504 00:28:54,330 --> 00:28:57,540 ‫Was ich hier tun werde, ist, diese Abfragezeichenfolge hier 505 00:28:57,540 --> 00:28:59,097 ‫der Erfolgs-URL hinzuzufügen. 506 00:28:59,970 --> 00:29:04,573 ‫Hier werde ich gleich Buchung aufmerksam machen. 507 00:29:05,970 --> 00:29:10,310 ‫Jetzt könnte ich in allen anderen URLs auch noch einen Alert hinzufügen und 508 00:29:10,310 --> 00:29:12,863 ‫dann natürlich mit einem anderen Keyword hier. 509 00:29:14,350 --> 00:29:18,100 ‫Und das werden wir hier wirklich nur für diese Buchung tun. 510 00:29:18,100 --> 00:29:21,793 ‫Aber auch hier habe ich eine Art wiederverwendbare Lösung geschaffen. 511 00:29:23,340 --> 00:29:27,470 ‫Wie auch immer, jetzt brauchen wir in unseren Routen im Grunde eine 512 00:29:27,470 --> 00:29:29,920 ‫Middleware, die für alle Anfragen läuft. 513 00:29:29,920 --> 00:29:32,270 ‫Und es ist diese Middleware, die die 514 00:29:32,270 --> 00:29:35,240 ‫Warnung aus der Abfragezeichenfolge aufnimmt und eine Warnmeldung in 515 00:29:35,240 --> 00:29:37,453 ‫unsere Antwort einfügt. Einheimische. 516 00:29:41,457 --> 00:29:42,624 ‫Also Router. 517 00:29:45,040 --> 00:29:48,233 ‫verwenden Sie viewController. Warnungen. 518 00:29:50,290 --> 00:29:52,320 ‫Dies ist also eine Middleware-Funktion, 519 00:29:52,320 --> 00:29:56,200 ‫die im Wesentlichen für jede einzelne Anfrage ausgeführt wird, die in 520 00:29:56,200 --> 00:29:58,130 ‫diesen Router eingeht, also 521 00:29:58,130 --> 00:30:01,063 ‫im Wesentlichen für alle Anfragen an unsere Website. 522 00:30:02,370 --> 00:30:04,870 ‫Lassen Sie uns nun diese Middleware in 523 00:30:04,870 --> 00:30:06,020 ‫unserem viewsController erstellen. 524 00:30:10,460 --> 00:30:12,380 ‫Also Exporte. Benachrichtigungsanforderung, 525 00:30:14,480 --> 00:30:17,283 ‫Antwort und weiter. 526 00:30:19,650 --> 00:30:20,730 ‫Die Warnung 527 00:30:22,760 --> 00:30:26,300 ‫ist also eine Anfrage. Anfrage. Alarm. 528 00:30:26,300 --> 00:30:29,873 ‫Also verwenden wir diese Strukturierung hier einfach noch einmal. 529 00:30:32,020 --> 00:30:36,553 ‫Und dann sagen wir, wenn Alert gleich Buchung ist, also den 530 00:30:39,030 --> 00:30:42,653 ‫Alert, den wir hier in die Abfragezeichenfolge einfügen, dann 531 00:30:44,670 --> 00:30:46,070 ‫sagen wir 532 00:30:46,070 --> 00:30:50,970 ‫in diesem Fall Antwort. Einheimische. Eine Benachrichtigung wird angezeigt, 533 00:30:52,830 --> 00:30:53,780 ‫dass 534 00:30:56,910 --> 00:30:57,970 ‫Ihre Buchung erfolgreich 535 00:30:59,850 --> 00:31:01,023 ‫war. Bitte überprüfen 536 00:31:03,790 --> 00:31:06,883 ‫Sie Ihre E-Mail, um eine Bestätigung zu erhalten. 537 00:31:10,330 --> 00:31:13,090 ‫Und wir sollten auch noch einen anderen 538 00:31:13,090 --> 00:31:17,960 ‫Satz hinzufügen, und zwar diesen, wenn Ihre Buchung dies nicht tut, wählen Sie 539 00:31:24,070 --> 00:31:27,743 ‫diesen aus, wird hier nicht sofort angezeigt, bitte kommen Sie 540 00:31:33,270 --> 00:31:34,523 ‫später wieder. 541 00:31:36,140 --> 00:31:37,230 ‫Und der 542 00:31:37,230 --> 00:31:39,920 ‫letzte Teil liegt daran, dass Stripe in 543 00:31:39,920 --> 00:31:43,620 ‫seiner Dokumentation sehr genau sagt, dass der Webhook manchmal 544 00:31:43,620 --> 00:31:46,880 ‫kurz nach dem Aufruf der Erfolgs-URL aufgerufen wird. 545 00:31:46,880 --> 00:31:49,810 ‫In diesem Fall würde diese Erfolgs-URL dann 546 00:31:49,810 --> 00:31:52,677 ‫alle aktuellen Touren anzeigen, aber erst danach 547 00:31:52,677 --> 00:31:54,300 ‫würde der Webhook 548 00:31:54,300 --> 00:31:57,270 ‫aufgerufen und die Tour in unserer Datenbank erstellt. 549 00:31:57,270 --> 00:32:00,040 ‫Daher wird die neue Buchung nicht sofort auf 550 00:32:00,040 --> 00:32:01,953 ‫der Seite Meine Buchungen angezeigt. 551 00:32:02,850 --> 00:32:06,220 ‫Aber natürlich hat in diesem Fall noch alles gut funktioniert. 552 00:32:06,220 --> 00:32:09,583 ‫Also lade ich einfach neu, aber später werden wir dieses Problem beheben. 553 00:32:12,340 --> 00:32:15,080 ‫Jetzt müssen wir nur noch die nächste Middleware aufrufen. 554 00:32:15,080 --> 00:32:17,160 ‫Und das ist es tatsächlich. 555 00:32:17,160 --> 00:32:21,390 ‫Auch hier haben wir dies hier nur für Warnungen gleich der 556 00:32:21,390 --> 00:32:24,090 ‫Buchung getan, aber wir konnten dies jetzt 557 00:32:24,090 --> 00:32:27,070 ‫überall auf unserer Website verwenden, indem wir verschiedene 558 00:32:27,070 --> 00:32:28,982 ‫Warnungsschlüsselwörter und Abfragezeichenfolgen festlegen. 559 00:32:28,982 --> 00:32:33,982 ‫Damit setzen wir diese Nachricht hier auf res. Einheimische. Alarm. 560 00:32:35,600 --> 00:32:38,940 ‫Auch hier wird unsere Basisvorlage dies 561 00:32:38,940 --> 00:32:42,320 ‫aufnehmen und hier in dieser Datenwarnungseigenschaft anzeigen. 562 00:32:42,320 --> 00:32:46,440 ‫Und so müssen Sie jetzt nur noch zu unserem Index gehen. js und lesen Sie die 563 00:32:46,440 --> 00:32:49,890 ‫Warnung von hier aus und zeigen Sie sie dann an. 564 00:32:49,890 --> 00:32:52,100 ‫Und so sollte das ziemlich einfach sein. 565 00:32:52,100 --> 00:32:56,230 ‫Hier in der Öffentlichkeit machen wir es im Index tatsächlich richtig. 566 00:32:56,230 --> 00:33:00,260 ‫Und das erste ist, dass wir die Alerts-Funktion tatsächlich 567 00:33:00,260 --> 00:33:01,343 ‫importieren müssen. 568 00:33:06,480 --> 00:33:08,160 ‫Das ist keine App. 569 00:33:08,160 --> 00:33:09,343 ‫Es ist hier im Index. 570 00:33:10,920 --> 00:33:12,090 ‫Okay. 571 00:33:12,090 --> 00:33:15,883 ‫Und dann hier unten, lesen wir im Grunde diese Warnung. 572 00:33:17,290 --> 00:33:22,133 ‫Also, const alertMessage, sagen wir, ist ein 573 00:33:23,250 --> 00:33:25,320 ‫Dokument. querySelector, dann 574 00:33:28,742 --> 00:33:31,327 ‫das body-Element, Punkt-Dataset. Alarm. 575 00:33:35,350 --> 00:33:37,673 ‫Und so, natürlich nur, wenn es 576 00:33:39,760 --> 00:33:42,020 ‫eine Warnung gibt, dann zeigen Sie 577 00:33:43,160 --> 00:33:44,250 ‫die Warnung 578 00:33:45,840 --> 00:33:48,000 ‫mit Erfolg und die Warnmeldung an. 579 00:33:48,000 --> 00:33:50,640 ‫Und jetzt möchte ich diese kleine 580 00:33:50,640 --> 00:33:54,630 ‫ShowAlert-Funktion hier ein wenig ändern, weil wir jetzt 581 00:33:54,630 --> 00:33:57,210 ‫tatsächlich viel Text haben. 582 00:33:57,210 --> 00:33:59,780 ‫Und die Standardzeit, in der die Warnung angezeigt 583 00:33:59,780 --> 00:34:03,163 ‫wird, würde nicht ausreichen, um den gesamten Text tatsächlich zu lesen. 584 00:34:04,210 --> 00:34:06,880 ‫Sie sehen hier also, dass die Warnung nach 585 00:34:06,880 --> 00:34:08,373 ‫fünf Sekunden ausgeblendet wird. 586 00:34:10,126 --> 00:34:11,760 ‫Lassen Sie uns dem Benutzer tatsächlich 587 00:34:11,760 --> 00:34:14,253 ‫erlauben, die Anzahl der Sekunden anzugeben, die die Warnung angezeigt wird. 588 00:34:16,810 --> 00:34:20,320 ‫Wir werden dies standardmäßig mit fünf Sekunden tun. 589 00:34:20,320 --> 00:34:24,810 ‫Hier machen wir dann einfach die Zeit mal 1.000, um es 590 00:34:24,810 --> 00:34:26,483 ‫in Millisekunden umzurechnen. 591 00:34:27,976 --> 00:34:30,690 ‫So funktionieren alle Funktionen überall mit 592 00:34:30,690 --> 00:34:32,270 ‫fünf Sekunden. 593 00:34:32,270 --> 00:34:34,790 ‫Machen wir es tatsächlich sieben Sekunden, 594 00:34:34,790 --> 00:34:36,600 ‫wenn wir nichts angeben. 595 00:34:36,600 --> 00:34:39,980 ‫Aber wenn wir wollen, können wir diese sieben dann überschreiben. 596 00:34:39,980 --> 00:34:42,040 ‫Und so werde ich das jetzt 597 00:34:42,040 --> 00:34:45,370 ‫hier machen und es tatsächlich 20 Sekunden auf den Bildschirm bringen. 598 00:34:45,370 --> 00:34:46,203 ‫Gut. 599 00:34:47,360 --> 00:34:49,240 ‫Ich denke, das sollte es sein. 600 00:34:49,240 --> 00:34:51,060 ‫Ich hoffe, das war sinnvoll. 601 00:34:51,060 --> 00:34:53,993 ‫Lassen Sie uns nun ganz schnell unser Bundle zusammenstellen. 602 00:34:55,360 --> 00:35:00,343 ‫Das ist npm run build und tippe dann auf Autocomplete. 603 00:35:03,480 --> 00:35:05,990 ‫Das dauert auch ein bisschen. 604 00:35:05,990 --> 00:35:07,373 ‫Aber jetzt ist es geschafft. 605 00:35:12,030 --> 00:35:14,340 ‫Lassen Sie es uns jetzt ein letztes Mal bereitstellen, in 606 00:35:15,580 --> 00:35:17,083 ‫der Hoffnung, dass es tatsächlich funktioniert. 607 00:35:18,250 --> 00:35:19,083 ‫Also, git commit. 608 00:35:25,840 --> 00:35:27,513 ‫Also, Stripe-Nachrichten. 609 00:35:29,670 --> 00:35:34,670 ‫Und ein letztes Mal, git push heroku master. 610 00:35:37,451 --> 00:35:41,403 ‫Lassen Sie es uns jetzt testen, indem wir hier eine weitere Tour kaufen. 611 00:35:42,830 --> 00:35:44,963 ‫Holen wir uns diesmal den City Wanderer. 612 00:35:46,490 --> 00:35:49,683 ‫Oh, ich sehe gerade, dass hier bereits eine Nachricht steht. 613 00:35:50,810 --> 00:35:51,783 ‫Das ist nicht gut. 614 00:35:54,530 --> 00:35:58,500 ‫Und Sie sehen, dass es nach 20 Sekunden verschwunden ist. 615 00:35:58,500 --> 00:36:00,240 ‫Es sieht so aus, als 616 00:36:00,240 --> 00:36:02,993 ‫ob diese Warnungsklasse jetzt standardmäßig immer hier platziert wird. 617 00:36:06,028 --> 00:36:06,861 ‫(lacht) 618 00:36:06,861 --> 00:36:07,694 ‫Ja. 619 00:36:07,694 --> 00:36:09,990 ‫Das liegt daran, dass es hier alertMessage und nicht 620 00:36:09,990 --> 00:36:11,063 ‫nur alert sein sollte. 621 00:36:12,810 --> 00:36:16,800 ‫Aber egal, testen wir jetzt einfach, ob die Meldung 622 00:36:16,800 --> 00:36:20,433 ‫bei der Buchung der Tour tatsächlich stimmt. 623 00:36:24,410 --> 00:36:25,243 ‫Okay. 624 00:36:32,470 --> 00:36:34,880 ‫Jetzt warten wir es ab. 625 00:36:34,880 --> 00:36:36,330 ‫Auf geht's. 626 00:36:36,330 --> 00:36:39,163 ‫Tatsächlich ist da unsere Botschaft. 627 00:36:40,130 --> 00:36:41,460 ‫So schön. 628 00:36:41,460 --> 00:36:44,420 ‫Auch unsere Tour zeigt sich hier. 629 00:36:44,420 --> 00:36:48,510 ‫Und Sie sehen, dass es wirklich lange hier bleibt. 630 00:36:48,510 --> 00:36:49,853 ‫Das funktioniert also auch. 631 00:36:51,532 --> 00:36:52,832 ‫Lass uns nur ganz schnell... 632 00:36:55,840 --> 00:36:59,383 ‫Und zuerst müssen wir das Bundle hier tatsächlich neu erstellen. 633 00:37:03,877 --> 00:37:07,170 ‫Dann können wir alles 634 00:37:13,580 --> 00:37:18,490 ‫zu unserem Staging-Bereich hinzufügen, Fehlerkorrektur für Nachrichtenwarnungen. 635 00:37:18,490 --> 00:37:19,670 ‫Das sind 636 00:37:19,670 --> 00:37:23,500 ‫also schon einige (lacht) wirklich professionell klingende Botschaften. 637 00:37:23,500 --> 00:37:26,313 ‫Jetzt noch ein letzter Stoß zu Heroku. 638 00:37:29,670 --> 00:37:32,580 ‫Wenn wir nun unsere Seite laden, sollten 639 00:37:32,580 --> 00:37:34,740 ‫wir keine Warnmeldung sehen. 640 00:37:34,740 --> 00:37:37,250 ‫Und tatsächlich, jetzt ist alles sauber. 641 00:37:37,250 --> 00:37:40,470 ‫Und so kann ich jetzt sagen, dass dieses 642 00:37:40,470 --> 00:37:42,977 ‫Projekt zumindest vorerst wirklich abgeschlossen ist. 643 00:37:42,977 --> 00:37:46,490 ‫Nochmals tolle Arbeit, herzlichen Glückwunsch und gut gemacht, 644 00:37:46,490 --> 00:37:51,100 ‫dass Sie wahrscheinlich einer der wenigen Leute sind, die es tatsächlich 645 00:37:51,100 --> 00:37:54,350 ‫bis zum Ende des Projekts schaffen und 646 00:37:54,350 --> 00:37:58,370 ‫diese schöne Website und auch API wirklich aufbauen, die Sie 647 00:37:58,370 --> 00:38:01,780 ‫jetzt in Ihr Portfolio aufnehmen können und der 648 00:38:01,780 --> 00:38:02,923 ‫Welt zeigen.