1 00:00:01,060 --> 00:00:03,293 ‫Kursleiter: Lassen Sie uns nun endlich 2 00:00:03,293 --> 00:00:05,413 ‫diesen Teil der Anmeldefunktionalität beenden. 3 00:00:06,980 --> 00:00:09,300 ‫Und denken Sie daran, wie ich 4 00:00:09,300 --> 00:00:11,790 ‫in diesem Video gesagt habe, dass ich eine 5 00:00:11,790 --> 00:00:15,010 ‫wirklich nette Warnung implementieren wollte, wenn sich der Benutzer erfolgreich 6 00:00:16,450 --> 00:00:19,210 ‫anmeldet. Um dies zu sehen, melden wir den Benutzer 7 00:00:19,210 --> 00:00:21,663 ‫zunächst ab, indem wir das Cookie manuell entfernen. 8 00:00:22,700 --> 00:00:24,760 ‫Lassen Sie uns neu laden, und so sollte 9 00:00:24,760 --> 00:00:26,883 ‫der Benutzer jetzt natürlich nicht mehr eingeloggt sein, 10 00:00:28,840 --> 00:00:30,720 ‫und das ist er auch nicht. 11 00:00:30,720 --> 00:00:33,120 ‫Wie wir bereits wissen, liegt das daran, dass das 12 00:00:33,120 --> 00:00:35,410 ‫Cookie nicht in der Anfrage gesendet wurde. 13 00:00:35,410 --> 00:00:37,790 ‫Es gibt also eingeloggte Middleware, die wir im letzten 14 00:00:37,790 --> 00:00:39,050 ‫Video erstellt haben und 15 00:00:39,050 --> 00:00:42,840 ‫das Benutzerobjekt nicht in Reaktion gebracht hat. Einheimische, erinnerst du 16 00:00:42,840 --> 00:00:44,320 ‫dich daran? 17 00:00:44,320 --> 00:00:47,810 ‫Wenn es also nicht da ist, wird das Benutzerhandbuch nicht 18 00:00:47,810 --> 00:00:50,650 ‫gerendert, sondern dieser Teil wird gerendert, sodass wir 19 00:00:50,650 --> 00:00:53,367 ‫jetzt hier auf Anmelden klicken können. 20 00:00:53,367 --> 00:00:56,920 ‫Diese Warnung, über die ich gesprochen habe, möchte ich, 21 00:00:56,920 --> 00:00:59,760 ‫dass sie hier im Grunde am Anfang 22 00:00:59,760 --> 00:01:01,470 ‫auftaucht und dann 23 00:01:01,470 --> 00:01:04,000 ‫nach eineinhalb Sekunden immer noch nachladen. 24 00:01:04,000 --> 00:01:07,610 ‫Also auf die Haupthomepage wechseln. 25 00:01:07,610 --> 00:01:09,550 ‫Wie auch immer, lassen Sie 26 00:01:09,550 --> 00:01:13,800 ‫uns einige Funktionen für diese Warnung in einer weiteren separaten Datei erstellen. 27 00:01:13,800 --> 00:01:14,983 ‫Also neue Datei, 28 00:01:16,607 --> 00:01:18,853 ‫Alarm. js. 29 00:01:20,210 --> 00:01:23,320 ‫Alles klar, aber bevor wir wirklich weitermachen können, 30 00:01:23,320 --> 00:01:24,510 ‫müssen wir hier 31 00:01:24,510 --> 00:01:26,890 ‫ein wenig über unsere Front-End-Architektur nachdenken. 32 00:01:26,890 --> 00:01:30,070 ‫In diesem Kurs geht es natürlich nicht um das 33 00:01:30,070 --> 00:01:32,470 ‫Frontend, aber wir müssen uns hier zumindest 34 00:01:32,470 --> 00:01:34,170 ‫ein bisschen darum 35 00:01:34,170 --> 00:01:36,080 ‫kümmern, denn wir fangen wirklich 36 00:01:36,080 --> 00:01:38,130 ‫an, hier eine schöne Menge an 37 00:01:38,130 --> 00:01:40,420 ‫Dateien zu bekommen, und zwar alle in 38 00:01:40,420 --> 00:01:42,550 ‫unsere Seiten ist keine gute Praxis. 39 00:01:42,550 --> 00:01:43,383 ‫So wie 40 00:01:44,770 --> 00:01:46,700 ‫wir es hier gemacht haben. 41 00:01:46,700 --> 00:01:48,710 ‫Dies ist also keine gute Praxis. 42 00:01:48,710 --> 00:01:51,200 ‫Wir sollten nur eine große JavaScript-Datei haben, 43 00:01:51,200 --> 00:01:53,340 ‫die den gesamten Code enthält. 44 00:01:53,340 --> 00:01:56,000 ‫In der modernen JavaScript-Frontend-Entwicklung verwenden 45 00:01:56,000 --> 00:01:59,150 ‫wir daher normalerweise einen sogenannten Modulbundler. 46 00:01:59,150 --> 00:02:02,210 ‫Das beliebteste ist wahrscheinlich immer noch Webpack, aber normalerweise 47 00:02:02,210 --> 00:02:04,700 ‫bereitet uns Webpack viele Probleme und es 48 00:02:04,700 --> 00:02:07,140 ‫ist wirklich mühsam, es einzurichten. 49 00:02:07,140 --> 00:02:11,380 ‫Es gibt also sozusagen einen ganz netten 50 00:02:11,380 --> 00:02:13,930 ‫Neuzugang, der Parcel heißt. 51 00:02:13,930 --> 00:02:18,930 ‫Also schauen wir uns das an und sehen, ob es bereits auftaucht, und 52 00:02:19,680 --> 00:02:21,870 ‫tatsächlich ist es das Richtige. 53 00:02:21,870 --> 00:02:26,490 ‫Ein blitzschneller, konfigurationsfreier Webanwendungsbundler. 54 00:02:26,490 --> 00:02:29,080 ‫Also genau das suchen wir. 55 00:02:29,080 --> 00:02:31,790 ‫Einfach ein Bundler, der keine aufwendigen 56 00:02:31,790 --> 00:02:34,240 ‫Konfigurationen erfordert, denn damit wollen 57 00:02:34,240 --> 00:02:36,340 ‫wir keine Zeit verlieren. 58 00:02:37,470 --> 00:02:41,753 ‫In Ordnung, also lass es uns einfach hier installieren. 59 00:02:42,940 --> 00:02:44,340 ‫Also npm install und ich 60 00:02:46,010 --> 00:02:48,603 ‫bin mir nicht sicher, ob es wirklich nur Parcel ist. 61 00:02:50,180 --> 00:02:51,013 ‫Gehen wir 62 00:02:52,509 --> 00:02:53,459 ‫also hierher zurück. 63 00:02:55,860 --> 00:02:58,963 ‫Wahrscheinlich ist das Paket. js oder so, denn 64 00:02:59,820 --> 00:03:02,810 ‫ich erinnere mich, als ich es das letzte Mal 65 00:03:02,810 --> 00:03:06,850 ‫installiert habe, hat es nicht sofort funktioniert, also lass uns das überprüfen. 66 00:03:06,850 --> 00:03:08,993 ‫Ja, in der Tat, es ist Paket-Bündel. 67 00:03:18,370 --> 00:03:20,300 ‫Jetzt haben wir einen Fehler. 68 00:03:20,300 --> 00:03:25,300 ‫Okay, ich habe vergessen, es als Dev-Abhängigkeit zu speichern. 69 00:03:27,070 --> 00:03:30,810 ‫Wir wollen es also eigentlich als sicheres Dev, okay, und 70 00:03:30,810 --> 00:03:33,910 ‫das liegt daran, dass es ein Entwicklungstool ist. 71 00:03:33,910 --> 00:03:35,483 ‫Jetzt ist noch etwas schief gelaufen. 72 00:03:39,640 --> 00:03:41,313 ‫Lass es mich hier mit sudo versuchen. 73 00:03:50,150 --> 00:03:52,790 ‫Wenn es also auch in Ihrem Fall 74 00:03:52,790 --> 00:03:56,943 ‫nicht funktioniert hat, verwenden Sie einfach sudo, um die entsprechenden Berechtigungen zu erhalten. 75 00:04:03,360 --> 00:04:05,910 ‫In Ordnung, also schauen wir uns unser Paket an. json 76 00:04:07,060 --> 00:04:11,140 ‫und tatsächlich ist es hier, in Ordnung. 77 00:04:11,140 --> 00:04:12,620 ‫Wenn Sie sich 78 00:04:12,620 --> 00:04:14,810 ‫dieses Video einige Zeit nach der Aufnahme 79 00:04:14,810 --> 00:04:17,550 ‫ansehen, ist möglicherweise bereits Version Nummer zwei vorhanden, und 80 00:04:18,550 --> 00:04:20,200 ‫das könnte, wie wir bereits 81 00:04:20,200 --> 00:04:22,370 ‫wissen, einige grundlegende Änderungen mit sich bringen. 82 00:04:22,370 --> 00:04:25,840 ‫Wenn Sie also von diesem Punkt an Fehler erhalten, die 83 00:04:25,840 --> 00:04:27,740 ‫Sie hier im Video nicht 84 00:04:27,740 --> 00:04:30,940 ‫sehen, installieren Sie dieses Paket bitte hier mit Version 85 00:04:30,940 --> 00:04:32,533 ‫. 86 00:04:33,590 --> 00:04:34,750 ‫1, okay. 87 00:04:34,750 --> 00:04:35,860 ‫Also füge 88 00:04:38,610 --> 00:04:41,650 ‫im Grunde so einen hinzu, okay. 89 00:04:41,650 --> 00:04:45,630 ‫Das macht Sie dann darauf aufmerksam, dass Sie auf diese seltsamen 90 00:04:45,630 --> 00:04:48,100 ‫Fehler stoßen, und rettet mich hoffentlich auch 91 00:04:48,100 --> 00:04:50,110 ‫vor Tonnen von negativen Kommentaren oder 92 00:04:50,110 --> 00:04:54,330 ‫negativen Bewertungen, die erwarten, dass ich alle meine Videos alle zwei Wochen 93 00:04:54,330 --> 00:04:57,640 ‫aktualisiere, nur weil ein Tool aktualisiert wird, und das 94 00:04:57,640 --> 00:04:59,560 ‫ist natürlich nicht möglich. 95 00:04:59,560 --> 00:05:01,330 ‫So oft ist die 96 00:05:01,330 --> 00:05:03,790 ‫einfachste Lösung, dass Sie einfach dieselbe 97 00:05:03,790 --> 00:05:07,030 ‫Version verwenden, die ich im Video verwende, in Ordnung. 98 00:05:07,030 --> 00:05:10,420 ‫Wie auch immer, um Parcel jetzt tatsächlich zu verwenden, 99 00:05:10,420 --> 00:05:12,973 ‫fügen wir hier einige Skripte hinzu. 100 00:05:15,410 --> 00:05:19,053 ‫Also füge ich eine zu Watch oder JavaScript hinzu. 101 00:05:20,890 --> 00:05:22,400 ‫Okay, und dafür 102 00:05:24,380 --> 00:05:26,443 ‫verwende ich den Befehl Parcel watch. 103 00:05:28,100 --> 00:05:31,250 ‫Das würde eigentlich schon gut laufen, aber ich 104 00:05:31,250 --> 00:05:33,810 ‫möchte noch ein bisschen konfigurieren, weil es 105 00:05:33,810 --> 00:05:36,890 ‫sonst das letzte Bundle in einigen Ordnern ablegt, 106 00:05:36,890 --> 00:05:39,270 ‫die ich nicht haben möchte. 107 00:05:39,270 --> 00:05:44,270 ‫Legen wir also fest, welcher Ordner tatsächlich überwacht werden soll. 108 00:05:45,920 --> 00:05:50,920 ‫Das ist also öffentlich/JavaScript und dann Index. js, das ist also unser Einstiegspunkt und 109 00:05:52,670 --> 00:05:54,190 ‫das ist die 110 00:05:54,190 --> 00:05:56,490 ‫Datei, die wir gleich erstellen werden. 111 00:05:56,490 --> 00:05:57,350 ‫Okay. 112 00:05:57,350 --> 00:05:59,670 ‫Dann sollte das Ausgabeverzeichnis auch öffentlich 113 00:06:03,432 --> 00:06:05,237 ‫sein. 114 00:06:06,980 --> 00:06:07,900 ‫js, okay. 115 00:06:07,900 --> 00:06:09,700 ‫Oftmals haben Sie verschiedene 116 00:06:09,700 --> 00:06:12,330 ‫Ordner für die Entwicklung und für die Ausgabe, 117 00:06:12,330 --> 00:06:15,550 ‫aber in diesem Fall, da es sich um eine sehr 118 00:06:15,550 --> 00:06:18,400 ‫einfache Architektur handelt, werde ich die Bundle-Datei genau an 119 00:06:18,400 --> 00:06:20,550 ‫derselben Stelle wie die Entwicklungsdateien ablegen. 120 00:06:20,550 --> 00:06:23,000 ‫In Ordnung, lassen Sie uns auch die 121 00:06:25,102 --> 00:06:25,935 ‫Ausgabedatei 122 00:06:26,860 --> 00:06:32,600 ‫angeben, die Bundle sein sollte. js, alles klar. 123 00:06:32,600 --> 00:06:35,750 ‫Jetzt kann ich dies ausführen und es wird sich 124 00:06:35,750 --> 00:06:39,430 ‫dann diese Datei hier ansehen und sehen, ob sich etwas 125 00:06:39,430 --> 00:06:41,330 ‫ändert oder in einer der 126 00:06:41,330 --> 00:06:43,110 ‫Abhängigkeiten und wann 127 00:06:43,110 --> 00:06:45,260 ‫immer das passiert, werden alle Dateien 128 00:06:45,260 --> 00:06:49,090 ‫wieder in diesem Bundle gebündelt. js-Datei, alles klar. 129 00:06:49,090 --> 00:06:50,610 ‫Dann lass uns 130 00:06:50,610 --> 00:06:53,720 ‫das auch duplizieren, denn wir wollen ja 131 00:06:53,720 --> 00:06:56,820 ‫auch eine finale, sagen wir Serienversion, okay. 132 00:06:56,820 --> 00:06:59,040 ‫Also werden wir diese hier ausführen, wo 133 00:06:59,040 --> 00:07:01,100 ‫sie wirklich fertig sind, okay. 134 00:07:01,100 --> 00:07:03,450 ‫Das dauert also etwas länger, macht aber 135 00:07:03,450 --> 00:07:06,630 ‫auch ein bisschen mehr Optimierungskram, aber das brauchen wir 136 00:07:06,630 --> 00:07:08,710 ‫natürlich nicht für die Entwicklung. 137 00:07:08,710 --> 00:07:12,130 ‫In der Entwicklung wie immer wollen wir einfach, dass es funktioniert. 138 00:07:12,130 --> 00:07:14,090 ‫Lassen Sie uns also npm 139 00:07:15,970 --> 00:07:20,030 ‫run watch:js ausführen, aber bevor wir das tun, erstellen wir den 140 00:07:20,980 --> 00:07:22,473 ‫Index. js. 141 00:07:23,370 --> 00:07:25,320 ‫Schließen wir hier einige dieser Ordner. 142 00:07:26,170 --> 00:07:28,283 ‫Das ist so etwas zu verwirrend. 143 00:07:31,340 --> 00:07:34,890 ‫Also indexieren. js und machen wir einfach eine 144 00:07:36,640 --> 00:07:38,403 ‫einfache Konsole. logge dich jetzt hier ein. 145 00:07:39,670 --> 00:07:41,503 ‫Hallo von Parcel, alles 146 00:07:42,460 --> 00:07:43,293 ‫klar. 147 00:07:45,480 --> 00:07:47,510 ‫Dann lass uns auch hier zu 148 00:07:47,510 --> 00:07:50,940 ‫unserer Basis gehen und dann werden wir das jetzt tatsächlich 149 00:07:50,940 --> 00:07:52,140 ‫alle auskommentieren und 150 00:07:53,810 --> 00:07:55,163 ‫nur die Bundle-Datei einbinden. 151 00:07:57,720 --> 00:08:01,790 ‫Also wieder eine Datei, die im Grunde den gesamten Code enthält, der 152 00:08:01,790 --> 00:08:04,000 ‫in allen anderen Dateien enthalten ist, 153 00:08:04,000 --> 00:08:05,533 ‫und alle ihre Abhängigkeiten. 154 00:08:06,910 --> 00:08:10,860 ‫Lassen Sie uns es also speichern, und jetzt lassen Sie uns das tatsächlich ausführen und sehen, 155 00:08:10,860 --> 00:08:12,033 ‫was wir da hinbekommen. 156 00:08:12,980 --> 00:08:17,170 ‫Und tatsächlich haben wir unsere neue Datei bekommen, die Bundle ist. js und es 157 00:08:17,170 --> 00:08:21,000 ‫hat all diesen Code bereits drin, okay, 158 00:08:21,000 --> 00:08:25,663 ‫nur für diese eine Codezeile an dieser Stelle. 159 00:08:26,820 --> 00:08:29,203 ‫Aber trotzdem lasst uns unsere Seite hier 160 00:08:31,510 --> 00:08:33,840 ‫neu laden und hallo von Parcel. 161 00:08:33,840 --> 00:08:38,140 ‫Das hat also funktioniert, und jetzt können wir diese 162 00:08:38,140 --> 00:08:40,343 ‫Datei hier tatsächlich einrichten. 163 00:08:42,200 --> 00:08:44,980 ‫Um Verwirrung zu vermeiden, schließen wir diese Dateien, 164 00:08:44,980 --> 00:08:47,180 ‫die wir für unsere aktuellen Aufgaben 165 00:08:47,180 --> 00:08:48,923 ‫nicht mehr benötigen. 166 00:08:51,320 --> 00:08:52,570 ‫Das ist also eine Menge Zeug. 167 00:08:54,340 --> 00:08:56,900 ‫Alles klar, dieser auch. 168 00:08:56,900 --> 00:09:00,560 ‫Die Idee ist nun im Grunde, dass dieser Index. js-Datei ist unsere 169 00:09:00,560 --> 00:09:02,930 ‫Eintragsdatei, und in dieser können wir 170 00:09:02,930 --> 00:09:05,500 ‫keine Daten von der Benutzeroberfläche abrufen und 171 00:09:05,500 --> 00:09:08,400 ‫dann delegieren wir Aktionen an einige Funktionen, 172 00:09:08,400 --> 00:09:11,960 ‫die von diesen anderen Modulen hier im Grunde kommen. 173 00:09:11,960 --> 00:09:13,870 ‫Wir haben also jetzt das Login-Modul, 174 00:09:13,870 --> 00:09:15,830 ‫wir haben unser Alerts-Modul und so 175 00:09:15,830 --> 00:09:17,950 ‫wie in Node. js können 176 00:09:17,950 --> 00:09:21,920 ‫wir nun tatsächlich Daten aus diesen Modulen exportieren. 177 00:09:21,920 --> 00:09:24,550 ‫Lassen Sie uns das tun, und was ich exportieren 178 00:09:24,550 --> 00:09:26,440 ‫möchte, ist diese Funktion hier. 179 00:09:26,440 --> 00:09:28,030 ‫Jetzt funktioniert es ein bisschen anders 180 00:09:28,030 --> 00:09:30,200 ‫als bei Node. js, 181 00:09:30,200 --> 00:09:33,160 ‫weil Node. js verwendet etwas 182 00:09:33,160 --> 00:09:35,040 ‫namens CommonJS, um Module zu implementieren. 183 00:09:35,040 --> 00:09:36,510 ‫Ich bin mir nicht 184 00:09:36,510 --> 00:09:38,600 ‫sicher, ob ich das erwähnt habe, 185 00:09:38,600 --> 00:09:43,520 ‫als wir zum ersten Mal über Module sprachen, aber hier im Front-End-JavaScript seit ES2015 186 00:09:43,520 --> 00:09:47,000 ‫oder ES6 gibt es auch in JavaScript so genannte Module. 187 00:09:47,000 --> 00:09:48,720 ‫Die Syntax ist etwas 188 00:09:48,720 --> 00:09:51,150 ‫anders, aber tatsächlich funktioniert sie hinter den 189 00:09:51,150 --> 00:09:54,470 ‫Kulissen, aber wenn Sie verstehen, wie sie mit CommonJS 190 00:09:54,470 --> 00:09:57,060 ‫funktioniert, wird diese hier sehr ähnlich sein. 191 00:09:57,060 --> 00:10:00,740 ‫ES6-Module verwenden also die Export-Import-Syntax. 192 00:10:00,740 --> 00:10:04,070 ‫Hier müssen wir also nur Exportieren und dann alles, 193 00:10:05,120 --> 00:10:08,430 ‫was wir aus dieser Datei exportieren möchten, sagen, 194 00:10:08,430 --> 00:10:10,110 ‫und das war's. 195 00:10:10,110 --> 00:10:13,170 ‫Jetzt werden wir diesen Code hier tatsächlich 196 00:10:13,170 --> 00:10:15,100 ‫in der Indexdatei verwenden. 197 00:10:15,100 --> 00:10:17,720 ‫Denken Sie also daran, wie ich gesagt habe, dass diese 198 00:10:17,720 --> 00:10:20,630 ‫Datei hier mehr dazu dient, wirklich Daten von der Benutzeroberfläche zu erhalten 199 00:10:20,630 --> 00:10:22,420 ‫und dann die Aktion zu delegieren. 200 00:10:22,420 --> 00:10:26,203 ‫Genau das machen wir hier also, okay. 201 00:10:27,490 --> 00:10:30,320 ‫Hier haben wir also nur ein solches 202 00:10:30,320 --> 00:10:32,950 ‫Modul, das dann die Login-Funktion exportiert. 203 00:10:32,950 --> 00:10:35,350 ‫Dann können wir das hier importieren und Login 204 00:10:36,370 --> 00:10:39,700 ‫direkt hier im Index aufrufen. js und 205 00:10:39,700 --> 00:10:41,620 ‫das funktioniert so. 206 00:10:41,620 --> 00:10:44,210 ‫Also importiere anstatt den Namen 207 00:10:44,210 --> 00:10:47,690 ‫der Variablen zu verlangen, die wir importieren wollen. 208 00:10:47,690 --> 00:10:49,283 ‫Also verwende ich hier geschweifte Klammern. 209 00:10:50,466 --> 00:10:51,960 ‫Es heißt also 210 00:10:55,420 --> 00:10:57,970 ‫Login und dann vom Namen der Datei. 211 00:10:57,970 --> 00:11:01,493 ‫Welche in diesem Fall das gleiche Verzeichnis, Login. 212 00:11:03,080 --> 00:11:06,363 ‫Jetzt deaktivieren wir eslint auch hier wieder, und ich habe 213 00:11:10,730 --> 00:11:13,570 ‫diese geschweiften Klammern hier verwendet, im Grunde, weil wir 214 00:11:13,570 --> 00:11:16,840 ‫den Export auf diese Weise durchführen, aber es gibt auch 215 00:11:16,840 --> 00:11:20,070 ‫etwas Ähnliches wie module. export, was 216 00:11:20,070 --> 00:11:22,140 ‫eine Art Standardexport ist. 217 00:11:22,140 --> 00:11:26,780 ‫In ES6-Modulen wird es daher als Standardexport bezeichnet. 218 00:11:26,780 --> 00:11:30,320 ‫In diesem Fall bräuchten wir diese geschweiften Klammern dann nicht. 219 00:11:30,320 --> 00:11:31,153 ‫Okay. 220 00:11:31,153 --> 00:11:33,750 ‫Im Moment müssen wir es so machen, 221 00:11:33,750 --> 00:11:37,200 ‫denn das ist der Name dieser Funktion, die wir 222 00:11:37,200 --> 00:11:39,110 ‫exportiert haben, in Ordnung. 223 00:11:39,110 --> 00:11:42,860 ‫Wichtig bei diesem Login ist nun auch, dass wir 224 00:11:42,860 --> 00:11:44,350 ‫Axios verwendet haben. 225 00:11:44,350 --> 00:11:47,250 ‫Und erinnern Sie sich, wie ich sagte, 226 00:11:47,250 --> 00:11:51,040 ‫dass wir es tatsächlich von npm als npm-Modul installieren würden, oder? 227 00:11:51,040 --> 00:11:54,340 ‫Also lass uns das jetzt tun, und zwar weil wir 228 00:11:54,340 --> 00:11:56,660 ‫Axios von hier aus bereits auskommentiert haben. 229 00:11:56,660 --> 00:11:59,560 ‫Im Moment kann die Anmeldung also keine Axios verwenden. 230 00:11:59,560 --> 00:12:03,060 ‫Nun, weil wir es hier nicht mehr aufgenommen haben. 231 00:12:03,060 --> 00:12:06,070 ‫Also lass uns hinzufügen, ein neues Terminal öffnen 232 00:12:06,070 --> 00:12:08,903 ‫und axios in unser Projekt installieren. 233 00:12:18,310 --> 00:12:23,280 ‫Dann müssen wir jetzt nur noch sagen, Axios aus 234 00:12:25,830 --> 00:12:27,773 ‫Axios importieren, und das 235 00:12:29,290 --> 00:12:30,260 ‫war's. 236 00:12:30,260 --> 00:12:33,900 ‫Diese Datei ist also, zumindest vorerst, fertig, aber schließen 237 00:12:33,900 --> 00:12:36,530 ‫wir sie nicht, da wir sie sehr 238 00:12:36,530 --> 00:12:38,540 ‫bald noch brauchen werden. 239 00:12:38,540 --> 00:12:42,020 ‫Als nächstes sollten wir eigentlich auch ein Polyfill 240 00:12:42,020 --> 00:12:44,420 ‫installieren, damit einige der neueren 241 00:12:44,420 --> 00:12:47,120 ‫JavaScript-Funktionen auch in älteren Browsern funktionieren. 242 00:12:47,120 --> 00:12:50,360 ‫Sagen wir also npm install und dann sieht 243 00:12:50,360 --> 00:12:52,850 ‫das hier etwas komisch aus. 244 00:12:52,850 --> 00:12:57,850 ‫Also fügen wir Babel/Polyfill wie folgt 245 00:12:57,980 --> 00:12:59,240 ‫hinzu. 246 00:12:59,240 --> 00:13:01,370 ‫Dann werden wir hier 247 00:13:02,600 --> 00:13:03,433 ‫oben 248 00:13:06,180 --> 00:13:09,070 ‫einfach so importieren, in Ordnung. 249 00:13:09,070 --> 00:13:12,290 ‫Dieses hier speichern wir also nicht in einer Variablen, weil 250 00:13:12,290 --> 00:13:14,200 ‫das überhaupt nicht nötig ist. 251 00:13:14,200 --> 00:13:17,640 ‫Alles, was wir damit erreichen wollen, ist im Grunde genommen 252 00:13:17,640 --> 00:13:20,840 ‫in unser endgültiges Bundle aufgenommen zu werden, um einige 253 00:13:20,840 --> 00:13:23,337 ‫der Funktionen von JavaScript gut auszufüllen. 254 00:13:23,337 --> 00:13:26,320 ‫In Ordnung, und deshalb steht es auch hier 255 00:13:26,320 --> 00:13:29,220 ‫in der ersten Zeile dieser Importe. 256 00:13:29,220 --> 00:13:33,960 ‫Wie auch immer, lassen Sie uns jetzt auch diese Mapbox importieren. 257 00:13:33,960 --> 00:13:36,800 ‫Dafür müssen wir tatsächlich zuerst 258 00:13:36,800 --> 00:13:40,640 ‫eine Funktion erstellen, die all diese Dinge hier erledigt. 259 00:13:40,640 --> 00:13:41,790 ‫Okay. 260 00:13:41,790 --> 00:13:43,190 ‫Lassen Sie uns 261 00:13:45,450 --> 00:13:46,283 ‫also 262 00:13:50,660 --> 00:13:54,363 ‫export displayMap erstellen, das das Array der Standorte aufnimmt. 263 00:13:55,620 --> 00:14:02,290 ‫Das wird dann auch tatsächlich im Index gelesen. js-Datei, alles klar. 264 00:14:02,290 --> 00:14:06,510 ‫Also nochmal Index. js dient eher dazu, Daten 265 00:14:06,510 --> 00:14:09,030 ‫von der Benutzeroberfläche, also von der 266 00:14:09,030 --> 00:14:13,110 ‫Website, abzurufen und dann einige Aktionen an diese anderen Module 267 00:14:13,110 --> 00:14:14,230 ‫zu delegieren. 268 00:14:14,230 --> 00:14:18,653 ‫Daher werden diese Dinge hier im Index erledigt. 269 00:14:21,010 --> 00:14:22,883 ‫Machen wir es hier oben. 270 00:14:28,750 --> 00:14:32,723 ‫Dann importiere displayMap Mapbox, 271 00:14:37,420 --> 00:14:40,690 ‫alles klar. 272 00:14:40,690 --> 00:14:42,640 ‫Nennen wir das 273 00:14:45,980 --> 00:14:48,470 ‫also auch mit den Standorten. 274 00:14:48,470 --> 00:14:52,420 ‫Erinnern Sie sich jetzt an die Zeit, als wir diese Karte tatsächlich erstellt haben, 275 00:14:52,420 --> 00:14:55,400 ‫und erinnern Sie sich daran, wie sie uns gefragt hat, ob 276 00:14:55,400 --> 00:14:57,760 ‫wir die Mapbox-Bibliothek auf npm verwenden möchten? 277 00:14:57,760 --> 00:15:00,670 ‫Also könnten wir jetzt fortfahren und 278 00:15:00,670 --> 00:15:04,590 ‫tatsächlich diesen anstelle desjenigen verwenden, den wir gerade verwenden. 279 00:15:04,590 --> 00:15:06,450 ‫Also gut, es ist 280 00:15:06,450 --> 00:15:07,993 ‫nicht hier. 281 00:15:09,850 --> 00:15:10,693 ‫Ja, also dieser. 282 00:15:10,693 --> 00:15:13,170 ‫Dies hier ist also die Mapbox-Bibliothek, die 283 00:15:13,170 --> 00:15:15,330 ‫wir derzeit verwenden, aber auch hier 284 00:15:15,330 --> 00:15:17,290 ‫gibt es eine npm-Version. 285 00:15:17,290 --> 00:15:20,290 ‫Dann bräuchten wir das hier nicht. 286 00:15:20,290 --> 00:15:22,620 ‫Aus irgendeinem Grund gibt es jedoch 287 00:15:22,620 --> 00:15:26,410 ‫ein Problem bei der Verwendung dieser Bibliothek zusammen mit Parcel, okay. 288 00:15:26,410 --> 00:15:29,430 ‫Also stoßen andere Leute tatsächlich auf dieses Problem. 289 00:15:29,430 --> 00:15:32,370 ‫Daher können wir die mapbox npm-Bibliothek nicht 290 00:15:32,370 --> 00:15:34,080 ‫zusammen mit Parcel verwenden. 291 00:15:34,080 --> 00:15:36,993 ‫Das ist ein Grund, warum ich es immer noch so mache. 292 00:15:38,850 --> 00:15:39,810 ‫Okay. 293 00:15:39,810 --> 00:15:43,360 ‫Damit ist mapbox komplett. 294 00:15:43,360 --> 00:15:45,533 ‫Auch das brauchen wir nicht mehr. 295 00:15:46,470 --> 00:15:49,150 ‫Lassen Sie uns nun einige dieser Fehler, die wir hier 296 00:15:49,150 --> 00:15:50,593 ‫unten gesehen haben, tatsächlich beseitigen. 297 00:15:51,510 --> 00:15:53,060 ‫Nun, jetzt sind sie 298 00:15:53,060 --> 00:15:55,500 ‫nicht mehr hier, aber zum Beispiel hatten wir 299 00:15:55,500 --> 00:15:57,630 ‫das Problem, dass dieser Code hier 300 00:15:57,630 --> 00:16:02,280 ‫einige Fehler verursachte, als wir auf Seiten waren, die diese Karte hier nicht hatten, richtig. 301 00:16:02,280 --> 00:16:05,310 ‫Denn auf der Detailseite hat diese Karte natürlich so dieses 302 00:16:05,310 --> 00:16:07,890 ‫Element, aber dann läuft dieser Code natürlich auf 303 00:16:07,890 --> 00:16:09,203 ‫allen anderen Seiten, 304 00:16:09,203 --> 00:16:10,973 ‫das wird dann dort Fehler machen. 305 00:16:11,840 --> 00:16:13,700 ‫Also lass uns das beheben. 306 00:16:13,700 --> 00:16:15,980 ‫Was ich hier also mache, ist zuerst ein 307 00:16:15,980 --> 00:16:18,950 ‫Element damit zu erstellen und dann zu testen, ob es tatsächlich 308 00:16:18,950 --> 00:16:20,933 ‫existiert, bevor wir diese Codezeile ausführen. 309 00:16:23,610 --> 00:16:25,660 ‫Daher werden wir hier einige DOM-Elemente erstellen. 310 00:16:32,415 --> 00:16:33,248 ‫Und hier 311 00:16:34,820 --> 00:16:35,683 ‫würde ich Delegation sagen. 312 00:16:39,750 --> 00:16:41,380 ‫Also wenn mapbox 313 00:16:43,370 --> 00:16:46,623 ‫und erst dann auf diese beiden Aktionen 314 00:16:47,690 --> 00:16:48,790 ‫hier, okay. 315 00:16:48,790 --> 00:16:50,350 ‫Hier heißt es dann auch mapbox 316 00:16:52,420 --> 00:16:53,853 ‫und das ist viel schöner. 317 00:16:57,190 --> 00:16:58,850 ‫Hier lasst uns 318 00:16:58,850 --> 00:17:00,630 ‫auch Werte setzen, und ich 319 00:17:00,630 --> 00:17:03,690 ‫werde diese beiden angeben, weil wir sie tatsächlich 320 00:17:03,690 --> 00:17:07,140 ‫brauchen könnten oder tatsächlich auch für andere Dinge brauchen werden. 321 00:17:07,140 --> 00:17:08,803 ‫So ist es etwas sauberer. 322 00:17:10,170 --> 00:17:13,230 ‫Lassen Sie uns diesen Ereignis-Listener hier auch 323 00:17:13,230 --> 00:17:16,660 ‫nur hinzufügen, wenn dieses Element vorhanden ist, richtig. 324 00:17:16,660 --> 00:17:20,683 ‫Denn auch hier wird ein Fehler erzeugt, wenn dies nicht der Fall ist. 325 00:17:22,260 --> 00:17:23,777 ‫Also Loginformular, und wenn 326 00:17:27,750 --> 00:17:28,583 ‫und dann 327 00:17:29,610 --> 00:17:30,443 ‫lass 328 00:17:33,770 --> 00:17:37,460 ‫es uns hier wiederverwenden, speichern Sie es, und so 329 00:17:37,460 --> 00:17:39,363 ‫sieht es jetzt besser aus. 330 00:17:40,270 --> 00:17:41,103 ‫Okay. 331 00:17:42,355 --> 00:17:44,113 ‫Lassen Sie uns dieses Terminal tatsächlich schließen. 332 00:17:45,500 --> 00:17:48,010 ‫Dies sollten Sie unseren Code jedes Mal bündeln, wenn 333 00:17:48,010 --> 00:17:49,480 ‫es einen Speichervorgang gibt. 334 00:17:49,480 --> 00:17:50,980 ‫Speichern wir es einfach noch einmal hier. 335 00:17:53,600 --> 00:17:56,440 ‫Okay, ich hoffe, das hat sich jetzt geändert. 336 00:17:56,440 --> 00:17:58,203 ‫Also lass uns weitermachen und das ausprobieren. 337 00:18:00,610 --> 00:18:03,800 ‫Wenn Sie sich an dieser Stelle also noch gut einloggen 338 00:18:03,800 --> 00:18:06,563 ‫können, bedeutet das, dass es tatsächlich funktioniert hat. 339 00:18:13,470 --> 00:18:15,850 ‫Nun, vielleicht nicht. 340 00:18:15,850 --> 00:18:17,263 ‫Versuchen wir es hier noch einmal. 341 00:18:21,360 --> 00:18:25,113 ‫Alles klar, hier stimmt also etwas nicht. 342 00:18:26,430 --> 00:18:29,620 ‫Lassen Sie uns also wie immer diese E-Mail und dieses Passwort 343 00:18:29,620 --> 00:18:31,093 ‫hier in die Konsole eintragen. 344 00:18:32,570 --> 00:18:35,300 ‫Ich meine, weil wir ja schon wissen, 345 00:18:35,300 --> 00:18:38,233 ‫dass diese Funktion hier eigentlich aufgerufen wird, richtig. 346 00:18:39,260 --> 00:18:41,360 ‫Sonst würden wir den Fehler nicht einmal bekommen. 347 00:18:45,380 --> 00:18:49,560 ‫Richtig, denn dieser Fehler kommt eindeutig von unserer API. 348 00:18:49,560 --> 00:18:53,403 ‫Also alles, was wir hier haben, funktioniert tatsächlich, glaube ich. 349 00:19:03,010 --> 00:19:04,763 ‫Werfen wir einen Blick auf die Konsole. 350 00:19:10,830 --> 00:19:14,610 ‫Es scheint also, dass es tatsächlich keinen Benutzernamen und 351 00:19:14,610 --> 00:19:16,193 ‫kein Passwort gibt. 352 00:19:18,320 --> 00:19:19,153 ‫Okay. 353 00:19:21,640 --> 00:19:22,640 ‫Ich bin mir nicht sicher, warum das so ist. 354 00:19:22,640 --> 00:19:26,003 ‫Schauen wir mal, ob wir tatsächlich etwas bekommen. 355 00:19:26,870 --> 00:19:29,350 ‫Also logge dich ein und ich 356 00:19:31,140 --> 00:19:33,963 ‫werde diese auch gleich hier einloggen, nicht 357 00:19:34,950 --> 00:19:35,880 ‫hier sondern 358 00:19:37,930 --> 00:19:38,763 ‫hier. 359 00:19:50,730 --> 00:19:52,600 ‫Und so muss das 360 00:19:52,600 --> 00:19:55,060 ‫Problem anscheinend sein, dass Benutzername und 361 00:19:55,060 --> 00:19:57,220 ‫Passwort nicht wirklich definiert sind. 362 00:19:57,220 --> 00:20:00,140 ‫Oh, und jetzt verstehe ich natürlich, warum das so ist. 363 00:20:00,140 --> 00:20:01,483 ‫Was für ein dummer Fehler. 364 00:20:02,440 --> 00:20:04,900 ‫Wir versuchen also, diese Werte hier gleich zu 365 00:20:04,900 --> 00:20:07,340 ‫Beginn beim Laden der Seite zu 366 00:20:07,340 --> 00:20:11,223 ‫lesen, und natürlich sind diese Werte an dieser Stelle noch nicht definiert. 367 00:20:12,230 --> 00:20:15,400 ‫Also können wir sie natürlich 368 00:20:15,400 --> 00:20:19,103 ‫nur hier in unserem Event-Listener definieren, richtig. 369 00:20:20,370 --> 00:20:22,800 ‫Wenn diese Funktion hier also 370 00:20:22,800 --> 00:20:25,690 ‫gut aufgerufen wird, sind natürlich E-Mail und Passwort 371 00:20:25,690 --> 00:20:28,143 ‫festgelegt, damit wir sie dann lesen können. 372 00:20:31,210 --> 00:20:33,423 ‫Das war also irgendwie 373 00:20:36,870 --> 00:20:39,470 ‫dumm, aber manchmal passiert so etwas. 374 00:20:46,560 --> 00:20:48,673 ‫Jetzt kopieren wir das hier tatsächlich. 375 00:20:50,830 --> 00:20:53,460 ‫Diesmal sind wir erfolgreich eingeloggt, was 376 00:20:53,460 --> 00:20:56,373 ‫bedeutet, dass unser Code hier noch funktioniert. 377 00:20:57,740 --> 00:21:01,500 ‫Großartig, und jetzt machen wir den letzten Teil, den 378 00:21:01,500 --> 00:21:03,310 ‫wir in dieser 379 00:21:03,310 --> 00:21:07,373 ‫Vorlesung machen wollten, nämlich diese Warnungen zu erstellen, in Ordnung. 380 00:21:08,700 --> 00:21:13,700 ‫Lassen Sie uns also eine Funktion namens show alert erstellen und exportieren. 381 00:21:13,720 --> 00:21:16,790 ‫Beim Login werden wir diese Funktion importieren und 382 00:21:16,790 --> 00:21:17,793 ‫dort verwenden. 383 00:21:18,890 --> 00:21:21,070 ‫Also showAlert und this 384 00:21:23,583 --> 00:21:27,557 ‫als Eingabe bekommt einen Typ und eine Nachricht, 385 00:21:29,090 --> 00:21:31,010 ‫also einfach so. 386 00:21:31,010 --> 00:21:32,230 ‫Und dieser Typ 387 00:21:34,070 --> 00:21:35,600 ‫ist entweder Erfolg 388 00:21:38,170 --> 00:21:39,253 ‫oder Fehler, 389 00:21:40,210 --> 00:21:41,043 ‫okay. 390 00:21:41,043 --> 00:21:44,020 ‫Denn abhängig von dieser Eingabe haben wir dann für 391 00:21:44,020 --> 00:21:46,890 ‫jeden dieser Alerts unterschiedliche CSS und das werden Sie 392 00:21:46,890 --> 00:21:48,590 ‫in einer Sekunde sehen. 393 00:21:49,450 --> 00:21:52,360 ‫Was wir also tun werden, ist, hier im Grunde 394 00:21:52,360 --> 00:21:56,233 ‫etwas HTML-Markup zu erstellen und es dann in unseren HTML-Code einzufügen, also ist 395 00:21:57,210 --> 00:21:58,733 ‫es etwas wirklich Einfaches. 396 00:22:00,530 --> 00:22:04,520 ‫Also ein Markup und der Template-String und 397 00:22:04,520 --> 00:22:07,280 ‫jetzt etwas nettes HTML. 398 00:22:07,280 --> 00:22:11,370 ‫Es ist also einfach ein div mit einer Klasse 399 00:22:13,110 --> 00:22:14,680 ‫von alert und dann 400 00:22:14,680 --> 00:22:18,110 ‫alert -- also ein Modifikator mit unserem 401 00:22:18,110 --> 00:22:19,113 ‫Typ. 402 00:22:21,890 --> 00:22:24,450 ‫Okay, und deshalb muss 403 00:22:24,450 --> 00:22:27,070 ‫es entweder Erfolg oder Fehler sein. 404 00:22:27,070 --> 00:22:29,650 ‫Lassen Sie mich das also schnell 405 00:22:29,650 --> 00:22:32,800 ‫in CSS zeigen, denn ich denke, es ist 406 00:22:32,800 --> 00:22:36,530 ‫wirklich wichtig, wirklich zu wissen, wie das alles zusammenspielt, okay. 407 00:22:36,530 --> 00:22:38,520 ‫Hier haben wir also 408 00:22:38,520 --> 00:22:41,863 ‫unsere Alert-Klasse und dann Alert-Erfolg und Alert-Fehler. 409 00:22:43,300 --> 00:22:44,880 ‫Gut. 410 00:22:44,880 --> 00:22:48,273 ‫Wie immer lasst uns eslint hier deaktivieren, okay, 411 00:22:49,840 --> 00:22:52,700 ‫und das loswerden und jetzt kommt 412 00:22:54,530 --> 00:22:57,570 ‫natürlich hier die Meldung, die wir in 413 00:22:57,570 --> 00:22:59,193 ‫diese Funktion übergeben. 414 00:23:00,190 --> 00:23:01,970 ‫Natürlich könnten wir dies 415 00:23:01,970 --> 00:23:04,470 ‫dann in der gesamten Anwendung verwenden, aber 416 00:23:04,470 --> 00:23:08,150 ‫in diesem Fall brauchen wir es hier nur für unseren Login. 417 00:23:08,150 --> 00:23:11,053 ‫Also dokumentieren. queryselector, und hier 418 00:23:11,890 --> 00:23:13,990 ‫wählen wir nun das Element 419 00:23:13,990 --> 00:23:17,900 ‫aus, in das wir diesen gerade erstellten HTML-Code einfügen möchten. 420 00:23:17,900 --> 00:23:19,950 ‫Das ist also eigentlich direkt am 421 00:23:19,950 --> 00:23:21,530 ‫Anfang des body-Elements. 422 00:23:21,530 --> 00:23:23,153 ‫Also ganz oben auf der Seite. 423 00:23:24,570 --> 00:23:25,473 ‫Also 424 00:23:27,570 --> 00:23:32,380 ‫body, und dann angrenzendes HTML einfügen, also dieses hier. 425 00:23:32,380 --> 00:23:34,720 ‫Wenn Sie meinen kompletten JavaScript-Kurs belegt 426 00:23:34,720 --> 00:23:37,793 ‫haben, ist das alles hier nichts Neues für 427 00:23:38,890 --> 00:23:39,810 ‫Sie, okay. 428 00:23:39,810 --> 00:23:42,670 ‫Hier können wir also ein paar Schlüsselwörter angeben, und 429 00:23:42,670 --> 00:23:45,080 ‫in diesem Fall wollen wir afterbegin. 430 00:23:45,080 --> 00:23:46,900 ‫Das bedeutet im Grunde 431 00:23:46,900 --> 00:23:50,763 ‫genommen das Innere des Körpers, aber gleich zu Beginn, in Ordnung. 432 00:23:52,580 --> 00:23:54,800 ‫Dann das HTML, also das 433 00:23:54,800 --> 00:23:57,070 ‫Markup, das wir eigentlich einbinden wollen. 434 00:23:57,070 --> 00:23:57,903 ‫Groß. 435 00:23:57,903 --> 00:24:00,760 ‫Dies wird also eine sehr einfache Warnung basierend 436 00:24:00,760 --> 00:24:04,900 ‫auf Typ und Methode erstellen, aber jetzt wollen wir auch eine 437 00:24:04,900 --> 00:24:07,193 ‫Funktion zum Ausblenden von Warnungen. 438 00:24:08,380 --> 00:24:11,410 ‫Also lass es uns auch hier erstellen, exportieren, und wahrscheinlich 439 00:24:11,410 --> 00:24:14,103 ‫brauchen wir es außerhalb von hier nicht einmal, aber 440 00:24:14,980 --> 00:24:18,480 ‫dennoch ist es aus Gründen der Wiederverwendbarkeit immer eine gute Idee, all 441 00:24:18,480 --> 00:24:19,773 ‫das zu exportieren. 442 00:24:21,410 --> 00:24:25,173 ‫Dieser braucht keine Argumente aufzunehmen. 443 00:24:27,250 --> 00:24:31,220 ‫Jetzt müssen wir nur noch das Element 444 00:24:31,220 --> 00:24:33,780 ‫mit der Alert-Klasse 445 00:24:33,780 --> 00:24:36,700 ‫auswählen und es anschließend entfernen. 446 00:24:36,700 --> 00:24:40,953 ‫Also Queryselector-Warnung. 447 00:24:43,710 --> 00:24:45,803 ‫Also genau der gleiche Klassenname wie hier. 448 00:24:46,720 --> 00:24:49,430 ‫Dann müssen wir einen JavaScript-Trick anwenden, bei 449 00:24:49,430 --> 00:24:52,610 ‫dem wir eine Ebene nach oben zum übergeordneten Element verschieben 450 00:24:52,610 --> 00:24:55,700 ‫und dann von dort ein untergeordnetes Element entfernen müssen. 451 00:24:55,700 --> 00:24:59,380 ‫Wenn es also ein Element gibt, dann 452 00:24:59,380 --> 00:25:02,147 ‫Element. parentElement. removeChild 453 00:25:06,728 --> 00:25:08,478 ‫und dann das Element. 454 00:25:09,413 --> 00:25:10,910 ‫Okay. 455 00:25:10,910 --> 00:25:14,070 ‫Das sollte also wieder nur grundlegendes JavaScript 456 00:25:14,070 --> 00:25:16,230 ‫oder grundlegende DOM-Manipulation sein. 457 00:25:16,230 --> 00:25:18,150 ‫Da dies ein Knotenkurs ist, 458 00:25:18,150 --> 00:25:20,393 ‫werde ich nicht tiefer darauf eingehen. 459 00:25:21,680 --> 00:25:23,770 ‫Wie auch immer, was ich hier jetzt 460 00:25:23,770 --> 00:25:25,670 ‫tun möchte, ist, jedes Mal, wenn 461 00:25:25,670 --> 00:25:28,393 ‫wir eine Warnung anzeigen, zuerst alle bereits vorhandenen Warnungen auszublenden. 462 00:25:30,400 --> 00:25:32,340 ‫Also führen wir immer 463 00:25:32,340 --> 00:25:34,353 ‫nur zur Sicherheit immer hideAlert aus. 464 00:25:35,310 --> 00:25:39,150 ‫Schließlich möchte ich auch immer alle Benachrichtigungen nach fünf 465 00:25:39,150 --> 00:25:40,383 ‫Sekunden ausblenden. 466 00:25:42,370 --> 00:25:44,480 ‫Also Fenster 467 00:25:46,885 --> 00:25:50,220 ‫setTimeout hideAlert nach fünf 468 00:25:50,220 --> 00:25:51,790 ‫Sekunden. 469 00:25:51,790 --> 00:25:54,533 ‫In Ordnung, und jetzt importieren wir das hier. 470 00:25:58,030 --> 00:26:00,220 ‫Display-Warnung hieß es, oder? 471 00:26:00,220 --> 00:26:03,193 ‫Oh showAlert, mit Typ und Nachricht. 472 00:26:05,900 --> 00:26:08,973 ‫Also showAlert von 473 00:26:12,280 --> 00:26:15,730 ‫rechts ab und so ... 474 00:26:15,730 --> 00:26:19,010 ‫Ja, also wollen wir das hier richtig nutzen. 475 00:26:19,010 --> 00:26:21,970 ‫Anstelle des JavaScript-Alarms möchten wir also showAlert 476 00:26:23,297 --> 00:26:25,650 ‫ausführen, in Ordnung, und hier 477 00:26:25,650 --> 00:26:27,180 ‫das gleiche. 478 00:26:27,180 --> 00:26:29,220 ‫Wir müssen hier noch den 479 00:26:29,220 --> 00:26:30,380 ‫Typ angeben, 480 00:26:32,925 --> 00:26:35,467 ‫also ist das in diesem Fall erfolgreich 481 00:26:40,220 --> 00:26:42,630 ‫und hier ist es ein Fehler. 482 00:26:42,630 --> 00:26:44,193 ‫Wir haben die automatische Vervollständigung erreicht. 483 00:26:46,450 --> 00:26:47,963 ‫Gut, das ist besser. 484 00:26:48,890 --> 00:26:50,483 ‫Also lass es uns testen. 485 00:26:53,580 --> 00:26:56,923 ‫Und zuerst müssen wir uns abmelden, indem wir dieses Cookie löschen. 486 00:27:01,160 --> 00:27:02,990 ‫Neu laden, einloggen, und 487 00:27:02,990 --> 00:27:03,993 ‫jetzt teste 488 00:27:11,400 --> 00:27:13,900 ‫ich es erstmal mit einem falschen 489 00:27:15,500 --> 00:27:17,290 ‫Passwort und los gehts. 490 00:27:17,290 --> 00:27:21,400 ‫Also falsche E-Mail oder falsches Passwort direkt in unserer netten Benachrichtigung und Sie 491 00:27:21,400 --> 00:27:24,400 ‫haben gesehen, dass es nach fünf Sekunden verschwunden ist. 492 00:27:24,400 --> 00:27:26,160 ‫Natürlich hätten wir da 493 00:27:26,160 --> 00:27:28,400 ‫ein paar nette Animationen hinstellen können und 494 00:27:28,400 --> 00:27:31,830 ‫so, aber ich denke so ist es schon mehr als genug. 495 00:27:31,830 --> 00:27:33,950 ‫Sehen wir uns das noch einmal kurz 496 00:27:33,950 --> 00:27:36,113 ‫an, und so wird es dann aussehen, aber 497 00:27:37,600 --> 00:27:40,400 ‫wenn es richtig ist, dann sollte es natürlich grün sein. 498 00:27:42,030 --> 00:27:44,930 ‫Also ja, erfolgreich eingeloggt und nach 499 00:27:44,930 --> 00:27:47,890 ‫anderthalb Sekunden sehen wir einen Reload und 500 00:27:47,890 --> 00:27:50,320 ‫jetzt funktioniert es wirklich. 501 00:27:50,320 --> 00:27:53,593 ‫Das ist unsere vollständige Authentifizierung am Frontend. 502 00:27:54,880 --> 00:27:59,430 ‫Das war viel Arbeit, aber wenn du mich fragst lohnt es sich total. 503 00:27:59,430 --> 00:28:02,070 ‫Jetzt fehlt nur noch, dass wir 504 00:28:02,070 --> 00:28:05,690 ‫uns tatsächlich abmelden, wenn wir hier auf diese Schaltfläche klicken. 505 00:28:05,690 --> 00:28:07,510 ‫Im Moment ist das also nicht 506 00:28:07,510 --> 00:28:10,133 ‫der Fall und im nächsten Video wollen wir das beheben.