AdonisJS entdecken

DeutschEnglish 日本語 한국어 Русский 中文

MMaximilian Schwarzmüller

Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00Danke.

00:00:30Okay. Hi zusammen. Willkommen zu diesem Stream heute über Adonis.js, das sollte Spaß machen. Es sollte ein interessantes Framework und eine interessante Bibliothek sein, die ich noch nie benutzt habe. Ich wollte es schon immer mal ausprobieren, also dachte ich, warum nicht heute in diesem Stream.

00:01:00Lasst mich nur kurz hier ankommen.

00:01:07Also, ich hoffe, euch geht es allen gut. Danke fürs Zuschauen.

00:01:16Und legen wir los. Ja. Hi. Hi, alle zusammen. Also, heute möchte ich in Adonis eintauchen und es ein wenig erkunden. Einfach nur aus Spaß, denn Adonis.js ist ein JavaScript-Framework, das sich ziemlich von den anderen Frameworks unterscheidet.

00:01:38Und natürlich sind wir nicht mehr im Jahr 2019. Also könnte man darüber streiten, wie wichtig JavaScript-Frameworks heutzutage sind, oder? Die Tage der Framework-Kriege sind vorbei. Die Tage, in denen wir jeden Tag ein neues Framework hatten.

00:01:54Und heute dreht sich alles um KI. Aber weil sich heutzutage alles um KI dreht, dachte ich, warum nicht einen Livestream machen, in dem wir uns etwas ansehen, das absolut nichts mit KI zu tun hat.

00:02:08Und Adonis ist ein ziemlich interessantes Framework und eine interessante Bibliothek. Wie ich bereits erwähnte, habe ich noch nie damit gearbeitet, aber ich kenne es. Ich habe es schon seit vielen, vielen Jahren mehr oder weniger verfolgt.

00:02:20Und es ist letztendlich Laravel für JavaScript. Das ist mein Verständnis davon. Das ist mein Verständnis von Adonis. Es ist ein Full-Stack-Framework und es existierte bereits, bevor alle React-Frameworks Full-Stack wurden.

00:02:40Also, bevor wir... ich bin mir nicht sicher, ob es vor Next.js veröffentlicht wurde, aber ich würde sagen, bevor Next.js super populär wurde und so weiter.

00:02:51Und ja, es enthält viele interessante Dinge, die direkt eingebaut sind. Und meine Idee für heute ist es wirklich, einfach diesen offiziellen Einführungskurs hier durchzugehen und zu sehen, was drin ist, damit herumzuspielen und herauszufinden, was es ist und wie es funktioniert.

00:03:10Also, ja, ich habe da einen Kommentar über das neue computerbasierte Kontingent bei Google KI-Plänen erhalten. Ich glaube, ich habe darüber etwas gelesen. Ich habe es mir noch nicht genau angesehen, also kann ich dazu nicht wirklich etwas sagen.

00:03:24Also, wow, das ist ziemlich groß. Mal sehen. Was ist Adonis? Es ist ein Backend-First, typsicheres Framework. Nun, es ist Backend-First, aber ich weiß, dass es mit Full-Stack-Fähigkeiten kommt.

00:03:37Man kann Ansichten damit rendern, genau wie mit Laravel, falls ihr das kennt.

00:03:42Für den Aufbau von Webanwendungen mit Node.js und TypeScript bietet es die grundlegenden Bausteine zum Schreiben und Warten kompletter Backends, wodurch die Notwendigkeit für Dienste von Drittanbietern entfällt.

00:03:52Ja, denn wie ich hier bereits erwähnte, ist es nicht nur ein Full-Stack-Framework wie Next.js, das einem im Wesentlichen die Möglichkeiten bietet, React-Komponenten auf dem Server zu rendern.

00:04:06Was eine ziemlich grobe Zusammenfassung ist, aber ja, das ist so ziemlich die Hauptidee hinter Next.js, könnte man sagen.

00:04:12Sie haben Routing und so weiter, aber Adonis bietet einem, wie Laravel, mehr.

00:04:16Es kommt mit eingebauter Authentifizierung, sodass man dafür keine zusätzliche Bibliothek benötigt.

00:04:21Es kommt mit eingebauter Unterstützung für Datei-Uploads, Caching, Ratenbegrenzung und noch viel mehr.

00:04:26Es kommt mit seinem eigenen ORM, also seinem eigenen Object-Relational Mapping, ich glaube, das ist das, wofür es steht.

00:04:33Es ist ein eigener Wrapper um eine SQL-Datenbank und so weiter.

00:04:35Also ziemlich mächtig, ziemlich fähig.

00:04:38Und die Idee ist wirklich, dass man nur Adonis.js hat, wenn man eine Full-Stack-Anwendung bauen will, und man benötigt nicht zu viele andere Abhängigkeiten,

00:04:47was natürlich, besonders heute mit all diesen Supply-Chain-Angriffen, ziemlich interessant ist, eine begrenzte Anzahl an Abhängigkeiten zu haben.

00:04:55Offensichtlich, wenn Adonis kompromittiert wird, hat man immer noch Probleme, aber es sind weniger zusätzliche Abhängigkeiten, die man benötigt.

00:05:03Und hey, Daki, ich bin gerade dabei, deinen berühmten React-Kurs abzuschließen.

00:05:07Was schlägst du vor, nach einfachem TypeScript oder React plus TypeScript zu lernen?

00:05:11Ja, React plus TypeScript ist eine gute Idee.

00:05:12Next.js ist eine gute Idee.

00:05:14Oder man taucht nach dem Erlernen von React in React Native ein, damit man mobile Apps damit bauen kann, wenn man möchte.

00:05:20Das wären also alles vernünftige nächste Schritte, denke ich.

00:05:24Also ohne weiteres Zögern, ohne all den Text hier durchzugehen, lassen Sie uns eintauchen.

00:05:28Suchen wir uns unseren Pfad.

00:05:31Ihr werdet hier etwas lernen.

00:05:33Ich möchte eigentlich anfangen.

00:05:36Nun, eine Sache, die drei Ansätze.

00:05:40Adonis.js unterstützt drei primäre Ansätze für den Aufbau Ihres Frontends.

00:05:44Okay, das klingt wichtig.

00:05:47Jeder Ansatz stellt eine andere Denkweise über die Ansichtsschicht dar.

00:05:52Hypermedia.

00:05:52Hypermedia-Anwendungen generieren vollständige HTML-Seiten auf dem Server und senden sie an den Browser.

00:05:57Man baut seine Oberfläche mit einer Template-Engine.

00:06:00Und Adonis.js kommt mit seiner eigenen Template-Engine, das ist Edge.

00:06:05Und fügt Interaktivität mit leichtgewichtigen JavaScript-Bibliotheken wie Alpine.js hinzu.

00:06:10Oder HTMX oder Poly bei Bedarf.

00:06:12Und ich denke, ich möchte diesen Ansatz hier eigentlich nutzen.

00:06:16Man könnte Adonis jedoch auch mit React als Frontend unter Verwendung von Inertia.js nutzen,

00:06:25was ich glaube, aus der Laravel-Welt kommt,

00:06:28was irgendwie eine Brücke zwischen der Frontend-Single-Page-Anwendung

00:06:32und dem Backend der Full-Stack-Anwendung ist.

00:06:38Und ja, man kann natürlich auch einfach ein REST-API bauen, nur ein Backend, wenn man möchte.

00:06:46Und derselbe Controller, drei verschiedene Rückgaben.

00:06:49Okay, also mal sehen.

00:06:50Wir können eine Route mit dem Router registrieren, der mit Adonis geliefert wird.

00:06:56Und der Controller postet, also ist das hier der Controller.

00:07:02Und dort können wir viewRender aufrufen und eine Ansicht rendern, die wir vorher definiert haben.

00:07:06Und diese spezielle Syntax hier, das ist im Wesentlichen diese Edge-Template-Sprache, die mit Adonis ausgeliefert wird.

00:07:16Die Alternative wäre die Verwendung von Inertia, wo wir auch unseren Controller haben.

00:07:20Aber im Controller rufen wir immer noch render auf einer Ansicht auf und können einige Props übergeben.

00:07:28Ja, das sind Props darin.

00:07:30Und dann können wir unseren JavaScript-Code, unseren React-Code hier haben.

00:07:34Und es wird, so wie ich es verstehe, serverseitig gerendert.

00:07:37Und im Grunde müssen wir Daten nicht in dieser React-Komponente abrufen.

00:07:42Das wird alles für uns erledigt.

00:07:44Also das ist auch nett.

00:07:45Aber ich denke, ich werde, nun, wir werden sehen, was ich benutze.

00:07:47Eines der beiden, offensichtlich möchte ich hier eine kleine Full-Stack-App bauen.

00:07:50Aber wir werden sehen.

00:07:51Ich werde wahrscheinlich mit der Edge-Template-Engine anfangen und eine gute alte Multi-Page-Anwendung bauen,

00:07:57bei der wir das HTML auf der Serverseite rendern.

00:07:59Denn nicht alle Anwendungen benötigen React auf der Client-Seite.

00:08:03Ich denke, das ist wirklich wichtig zu verstehen.

00:08:05Es hängt davon ab, was Sie bauen.

00:08:07Und nicht jede Anwendung braucht ein super reaktives, interaktives Frontend.

00:08:12Wenn Sie etwas wie einen Blog bauen, zum Beispiel, brauchen Sie das höchstwahrscheinlich nicht.

00:08:16Aber auch für viele komplexere Anwendungen brauchen Sie es vielleicht nicht.

00:08:20Lassen Sie mich kurz den Chat einholen.

00:08:22Hi, Max.

00:08:23KI-Engineering-Kurs.

00:08:24Vielleicht zu einem gewissen Zeitpunkt, aber gerade ändern sich die Dinge so schnell, dass jeder Kurs, den ich

00:08:28dazu herausbringen würde, in dem Moment, in dem ich ihn veröffentliche, veraltet wäre.

00:08:32Also das möchte ich nicht.

00:08:32Also nicht heute.

00:08:35Ich werde eher ein paar Kurse zu Software-Grundlagen und ähnlichem erstellen.

00:08:39Aber irgendwann möchte ich natürlich teilen, wie ich mit KI arbeite.

00:08:44Aber ich möchte das zu einem Zeitpunkt tun, an dem es sich nicht jede Woche ändert, was es gerade tut.

00:08:48Hi, Max.

00:08:48Ich weiß, Adonis wird, ich glaube, schon seit mehr als einem Jahrzehnt gewartet.

00:08:51Denkst du, es ist ein geschäftliches Risiko, darauf zu setzen, angesichts des relativ kleinen Marktes?

00:08:55Ja, das ist eine wirklich gute Frage.

00:08:57Also ich weiß, dass es schon sehr lange gewartet wird.

00:09:01Ich wusste nicht, dass es ein Jahrzehnt war.

00:09:02Aber ja, definitiv eine lange Zeit.

00:09:05Und ich weiß auch nicht, wie groß das Team hinter Adonis ist.

00:09:09Ich weiß, dass es derzeit gut gewartet wird.

00:09:13Ich sehe viel Aktivität auf X von dem Hauptverantwortlichen, dem Besitzer des Adonis-Projekts.

00:09:20Offensichtlich gibt es immer ein gewisses Risiko bei einem Projekt, das nicht von der ganzen Welt genutzt wird, um es so auszudrücken.

00:09:30Davon abgesehen, da es schon so lange gewartet wird, beweist das die Hingabe des Hauptverantwortlichen.

00:09:38Aber ja, offensichtlich hätte etwas wie Next.js, das von Vercel unterstützt wird, sehr wahrscheinlich, würde ich sagen, eine höhere Garantie, für eine lange Zeit gewartet zu werden.

00:09:50Aber man weiß natürlich nie.

00:09:52Und Adonis hat natürlich gewisse Vorteile, die Next.js nicht hat.

00:09:57Aber ja, definitiv ein berechtigtes Anliegen.

00:10:00Schön, dass du live bist.

00:10:01Ich mag deinen Ansatz bei Programmiersprachen, Frameworks sehr, und Adonis sieht auf den ersten Blick recht interessant aus.

00:10:05Ich bin also gespannt, was wir heute bekommen.

00:10:07Ja, ich bin auch gespannt.

00:10:08Danke fürs Zuschauen.

00:10:09Es sollte Spaß machen.

00:10:10Welches Tool benutzt du, um Bereiche hervorzuheben?

00:10:12Das ist eine Anwendung namens DemoPro.

00:10:15Es ist eine Anwendung, die nur für Mac existiert.

00:10:17Ich glaube, ich habe sie vor vielen, vielen Jahren gekauft.

00:10:21Es ist großartig.

00:10:21Es gibt einem all das hier, wo man auf dem Bildschirm zeichnen kann.

00:10:25Ja.

00:10:27Ich verstehe immer noch nicht, warum es von der JavaScript-Community nicht angenommen wurde.

00:10:30Ich finde, meinungsstarke Frameworks sind großartig.

00:10:33Die Leute mögen Svelte und Vue, also warum nicht Adonis?

00:10:35Ja.

00:10:36Das habe ich mich auch immer gefragt.

00:10:37Ich weiß, dass ich mir Adonis angeschaut habe, ich weiß nicht, das erste Mal vielleicht vor sieben, acht Jahren.

00:10:44Und ich habe mich damals auch gefragt, warum es nicht populärer ist.

00:10:48Und ich habe persönlich nie die Zeit gefunden, tiefer einzutauchen.

00:10:52Und es war nie so populär.

00:10:54Also kam es nie als Kursthema oder ähnliches auf.

00:10:59Aber ja, ich weiß es nicht.

00:11:00Ich weiß es wirklich nicht, weil es gut aussieht.

00:11:02Aber ich schätze, wir werden herausfinden, wie gut es ist, zumindest wenn wir anfangen.

00:11:07Und deshalb, lassen Sie uns anfangen.

00:11:09Ja.

00:11:10Wir brauchen Node natürlich, erstellen eine neue Anwendung, npm create.

00:11:16Also lassen Sie mich das kopieren.

00:11:19Ich habe hier schon einen kleinen Ordner erstellt.

00:11:21Ich werde nicht npm benutzen, sondern bun, weil es schneller und etwas sicherer ist.

00:11:25Kann ich es in diesem Ordner erstellen?

00:11:27Funktioniert das?

00:11:29Ja.

00:11:29Okay.

00:11:30Jetzt muss ich wählen.

00:11:31Möchte ich die Hypermedia-App benutzen?

00:11:33Also die Template-Engine, React, die View-App.

00:11:38Ich nehme hier Hypermedia.

00:11:39Es lädt das Starter-Kit herunter, installiert die Abhängigkeiten, migriert die Datenbank.

00:11:45Also es scheint mir hier eine grundlegende Starter-Anwendung zu geben.

00:11:53Befehl fehlgeschlagen.

00:11:55Node ace migration run.

00:11:58Huh.

00:11:59Das ist kein guter Start.

00:12:01Ist das, weil ich bun benutzt habe?

00:12:04Oder weil ich...

00:12:05Es könnte auch daran liegen, dass ich die neueste Version von Node.js habe, Node 26.

00:12:12Vielleicht gibt es ein Problem damit, weil ich versucht habe, es mit Node auszuführen.

00:12:20Lassen Sie mich sehen.

00:12:21Kann ich das so ausführen?

00:12:24Okay.

00:12:25Ich habe einen Fehler, eine neue Ausnahme.

00:12:28Oh, Junge.

00:12:29Es gibt diese Tendenz, dass immer wenn ich etwas im Livestream ausprobiere, es fehlschlägt.

00:12:35Kann Modul startenv aus Adonis bin console TS nicht finden.

00:12:45Lassen Sie mich nachsehen.

00:12:47Ist das ein Node?

00:12:48Lass uns hier eine ältere Node-Version verwenden.

00:13:01Nö.

00:13:02Es ist jetzt ein anderer Fehler.

00:13:08Die Bindings-Datei konnte nicht gefunden werden.

00:13:14Also, okay.

00:13:14Hoppla.

00:13:15Eine Sache, die ich versuchen werde, da es vielleicht die Node-Version war, ich werde schnell alles in diesem Ordner löschen.

00:13:24Und ich werde es jetzt mit NPM neu erstellen und hoffe einfach, dass ich gerade nicht von irgendeinem Supply-Chain-Angriff erwischt werde.

00:13:34Ich bin heutzutage wirklich paranoid, wenn es darum geht, NPM zu verwenden.

00:13:38Ich bevorzuge BUN oder PNPM.

00:13:42Okay.

00:13:43Lass es uns nochmal versuchen.

00:13:44Mal sehen, ob das besser funktioniert.

00:13:52Ich meine, an diesem Punkt sollte es nicht allzu viel geben, was ich falsch machen kann.

00:14:11Befehl fehlgeschlagen.

00:14:12Das ist wirklich kein guter Start hier.

00:14:19Ist das etwas, das... haben wir dieses Problem hier?

00:14:23Etwas, das bekannt ist?

00:14:27Sieht nicht danach aus.

00:14:36Okay.

00:14:37Lassen Sie uns sehen.

00:14:38Eine Sache, die wir versuchen können, ist, dies der KI zu füttern.

00:14:43Und sehen, ob sie es herausfinden kann.

00:14:46Also, ich werde Pi starten, meinen liebsten Programmier-Agenten im Moment.

00:14:57Versuche, in diesem Projekt mit Adonis anzufangen.

00:15:02Ran.

00:15:03Was war der Befehl?

00:15:04Und NPM erstelle das.

00:15:09Okay.

00:15:10NPM erstellen.

00:15:13Adonis.js at latest dot.

00:15:17Es schlug fehl, als ich versuchte, die Migrationen auszuführen.

00:15:22Das manuelle Ausführen schlug auch fehl.

00:15:24Also, lassen Sie uns dieses Fehlerprotokoll einfügen und sehen, was wir hier bekommen.

00:15:29Guten Morgen.

00:15:30Oder guten Abend.

00:15:32Guten Nachmittag von meiner Seite.

00:15:34Lassen Sie uns sehen, ob die KI uns hier helfen kann.

00:15:38Wenn es diese Fehlermeldung durcharbeiten kann.

00:15:41Was ist Adonis.js?

00:15:42Adonis.js ist ein JavaScript-Framework.

00:15:44Ein Full-Stack-Framework.

00:15:47Das ist wie Laravel für JavaScript.

00:15:50Falls du Laravel kennst.

00:15:51Es ist also ein “Batteries Included”-Framework.

00:15:53Nicht wie Next.

00:15:54Nicht wie Next.js oder TanStack Start, bei denen es meist nur um Routing und Rendering auf dem Server geht.

00:15:59Stattdessen kommt es mit Authentifizierung.

00:16:01Es kommt mit einem eigenen ORM.

00:16:03Und das ist die Idee.

00:16:04Momentan habe ich hier nur ein paar Probleme mit der Ersteinrichtung.

00:16:10Oh, okay.

00:16:11Also ist es nicht.

00:16:14Okay.

00:16:15Ich verstehe.

00:16:16Es ist nicht Adonis.

00:16:18Wahrscheinlich.

00:16:19Aber das Problem scheint zu sein, dass dieser Einrichtungsbefehl ein Lifecycle-Skript ausführen wollte.

00:16:28Also ein Skript, das an eine Abhängigkeit gebunden ist.

00:16:31Und ich habe “ignore scripts” auf true gesetzt, wegen Supply-Chain-Angriffen.

00:16:35Und Bun führt sie, soweit ich weiß, standardmäßig auch nicht aus.

00:16:38Es sieht also so aus, als hätte es ein Skript gebraucht, das ausgeführt werden musste.

00:16:45Die KI hat das also vorübergehend deaktiviert.

00:16:49Und dann die Migrationen ausgeführt.

00:16:54Okay.

00:16:57Hoffentlich fehlt jetzt nichts mehr beim ersten Einrichtungsschritt.

00:17:05Das werden wir ja sehen.

00:17:07Weil wir natürlich versuchen können, jetzt den Entwicklungsserver zu starten.

00:17:15Also, los geht's.

00:17:19Ja, ich möchte diesen Browser hier nicht verwenden.

00:17:22Mal sehen.

00:17:24Okay.

00:17:25Wir haben also etwas auf dem Bildschirm.

00:17:31Sieht ein bisschen seltsam aus.

00:17:37Sieht das so aus, wie es aussehen sollte?

00:17:41Hm.

00:17:43Okay.

00:17:45Wie dem auch sei.

00:17:50Also, mal sehen.

00:17:51Ich kann mich hier anmelden.

00:18:05Und jetzt bin ich eingeloggt.

00:18:07Ich kann mich ausloggen.

00:18:08Und das haben wir alles schon von Haus aus dabei.

00:18:12Klassische Probleme tauchen immer dann auf, wenn sie es nicht müssten.

00:18:15Ja.

00:18:16Es ist wirklich klassisch.

00:18:17Ich glaube, das ist das dritte Mal, dass ich im Live-Stream in eine Technologie eintauchen wollte.

00:18:22Und es schlägt einfach fehl.

00:18:23Aber ja.

00:18:23Es funktioniert jetzt.

00:18:25Es scheint jetzt problemlos zu funktionieren.

00:18:31Ich bin mir nicht sicher mit diesem “temp”-Ordner.

00:18:33Ist das der Ort, an dem meine Produktionsdatenbank gespeichert ist?

00:18:36Oder meine Entwicklungsdatenbank?

00:18:37Schema.

00:18:38Benutzer.

00:18:39Ja.

00:18:39Okay.

00:18:40Es verwendet also SQLite, was ich mag, weil es leicht und einfach ist.

00:18:45Und wir werden gleich erforschen, was wir hier haben.

00:18:48Udemy muss die Möglichkeit hinzufügen, Dozenten zu folgen, um zu sehen, wann sie neue Inhalte veröffentlichen.

00:18:53Sag mal.

00:18:54Ich meine, zusammen mit anderen Dozenten haben wir Udemy schon so lange gesagt, wie viele coole Funktionen sie hinzufügen könnten.

00:19:01Aber ja.

00:19:02Sie wollen es einfach nicht, schätze ich.

00:19:05Ich mag, wie du versucht hast, das Problem zu lösen, bevor du die KI benutzt hast.

00:19:08Für mich wäre das Erste, es in die KI zu kopieren.

00:19:11Sieht so aus, als wäre ich dem Untergang geweiht.

00:19:12Nun, wie du siehst, hat die KI es herausgefunden, als ich es nicht konnte.

00:19:15Aber ich wollte auch nicht durch den gesamten Fehler-Stack gehen, weil ich den Stream nicht über das Debuggen machen möchte, sondern über Adonis.

00:19:25Wenn es also darum geht, lange Fehlermeldungen zu parsen und darüber nachzudenken, ist KI wirklich gut.

00:19:31Ich denke nur, es ist sinnvoll, sich die Fehlermeldung zumindest kurz selbst anzusehen, bevor man sie an die KI sendet.

00:19:38Denn A, manchmal ist es super einfach zu lösen.

00:19:42Es könnte nur ein Port-Konflikt oder etwas Ähnliches sein.

00:19:45Nicht in diesem Fall, aber bei anderen Problemen.

00:19:47Und B, es schadet nie, eine Vorstellung davon zu haben, was vor sich geht und was genau kaputtgeht und so weiter.

00:19:58Wie dem auch sei, schauen wir uns an, was wir hier haben.

00:20:01In diesem Projekt offensichtlich eine package.json-Datei.

00:20:08Hier gibt es einige Mappings für die Dateien, die dieses Projekt ausmachen.

00:20:14Dann bekommen wir einige Abhängigkeiten von Adonis.

00:20:19Was ist Vine?

00:20:24Eine Validierungsbibliothek, okay.

00:20:25Wir haben eine Validierungsbibliothek, better-sqlite3, edge.js, das ist die Templatesprache, wie ich sie verstehe.

00:20:34Was ist Luxon?

00:20:39Was ist das?

00:20:41Eine Bibliothek für die Arbeit mit Datum und Uhrzeit.

00:20:44Okay, das haben wir, und dann haben wir noch einiges, wo ist Assertion, Test Runner Types, Alpine.

00:20:54Alpine ist im Grunde die JavaScript-Bibliothek für leichtgewichtiges clientseitiges JavaScript, damit man nicht alles in Vanilla-JS schreiben muss, aber auch keine große Bibliothek wie React braucht.

00:21:05Okay, Adonis-RC.ts sieht nach der Konfigurationsdatei aus, und es sind experimentelle Flags, Befehle, Liste der zu registrierenden Ace-Befehle.

00:21:15Ja, es ist lange her, dass ich zuletzt mit Laravel gearbeitet habe.

00:21:20Ich habe 2014, 2015 und 2016, glaube ich, viel Laravel-Entwicklung gemacht, und soweit ich mich erinnere, hatte Laravel viele Funktionen, wie Adonis anscheinend auch, und es erlaubte einem, eigene Befehle zu registrieren.

00:21:38Die Idee war also bei Laravel der “artisan”-Befehl, und hier scheint es der “ace”-Befehl zu sein, den man mit Node ausführt.

00:21:49Das ist also ein Befehl oder ein Werkzeug, das Adonis bereitstellt, und man kann eigene Unterbefehle registrieren, wie ich verstehe – was man, glaube ich, hier registriert, nein, das sind eingebaute Befehle, und man könnte hier eigene Dateien importieren.

00:22:05Also meine Datei .ts oder so etwas in der Art, und damit eigene Befehle registrieren, sodass man eigene Hilfsbefehle hat.

00:22:15Service-Provider zum Importieren und Registrieren, also mein Verständnis hier ist, dass es um Dependency Injection geht und darum, verschiedene Dienste zu registrieren, die beim Starten des Webservers hochfahren.

00:22:26Was haben wir also hier?

00:22:28Was haben wir also hier?

00:22:28Wir haben einen Datenbank-Provider, Auth-Provider, also haben wir verschiedene Provider für die verschiedenen Funktionen, sozusagen.

00:22:34Preload, also okay, im Grunde ist das unsere Konfigurationsdatei, verstanden.

00:22:40Was haben wir sonst noch?

00:22:41Wir haben eine .env-Datei, in der wir den Port konfigurieren und so weiter, Log-Level, wir haben hier einen App-Key für,

00:22:50Ich weiß es nicht, wofür ist das? Auch für, für das Hashen unserer Passwörter oder so, ich weiß es nicht.

00:23:01Session-Treiber Cookie, okay, also verwenden wir Cookies für die Authentifizierung, hier ist unsere Datenbank, das sollte passen.

00:23:12Git-Ignorierung.

00:23:14Temp, ja.

00:23:16Tests, unsere Unit-Tests sind hier eingerichtet.

00:23:23Ressourcen, ja, das ist wie bei Laravel, denke ich.

00:23:27Bei Laravel hatten wir auch einen “resources”-Ordner, im Grunde für die clientseitigen Ressourcen, also haben wir hier unser clientseitiges CSS, clientseitiges JavaScript, das Alpine verwendet, wie ich schon erwähnte.

00:23:40Und Views, das sind im Grunde die Frontend-Seiten oder die Templates, die zu Seiten gerendert werden, und anscheinend alle Komponenten.

00:23:49Aber ich weiß noch nicht, wie dieses Templating-System funktioniert.

00:23:53Lass mich kurz schauen, ob ich eine Erweiterung installieren kann, ohne von dieser Edge-Templating-Sprache einen Supply-Chain-Angriff zu bekommen.

00:24:02Edge-Template-Unterstützung, hier, die offizielle, Edge-Template-Syntax-Hervorhebung von Adonis.js.

00:24:09Lass uns das installieren.

00:24:12Oh Gott, hack mich nicht.

00:24:16Okay, sieht besser aus.

00:24:18Jetzt haben wir also Syntax-Hervorhebung.

00:24:20Die Idee hinter der Templating-Sprache – ich meine, in den alten Tagen war es ziemlich üblich, Templatesprachen zu verwenden, auch in anderen JavaScript-Frameworks.

00:24:32Und die Idee ist wirklich, dass man HTML-Seiten auf dem Server rendert und dann der fertige HTML-Code an den Client gesendet wird.

00:24:39Aber um es etwas bequemer und dynamischer zu machen, komponiert man seine HTML-Datei aus verschiedenen Templates und hat Platzhalter, die mit dynamischen Werten ersetzt werden können.

00:24:51Und was wir hier haben, zum Beispiel, ist, dass wir sagen: Okay, diese Homepage, wir sind im “pages”-Ordner, soll auf einem Layout basieren.

00:25:02Ich würde annehmen, dass man verschiedene Layouts definieren kann, aber wenn man hier nichts spezifiziert, verwendet es ein Standard-Layout, das irgendwo registriert ist.

00:25:09Und dann wird dieser Teil hier in das Layout injiziert.

00:25:12Also haben wir in diesem Layout wahrscheinlich einige Platzhalter.

00:25:14Lass uns sehen, wo das Layout definiert ist, Komponenten-Layout hier.

00:25:20Das ist also eine Layout-Datei.

00:25:22Hier sehen wir das allgemeine HTML-Skelett.

00:25:24Wir sehen auch, dass wir im Body diesen “main”-Slot haben.

00:25:29Das scheint also die Syntax der Edge-Template-Sprache zu sein, um einen Slot zu definieren, in den der eigentliche Seiteninhalt gerendert wird.

00:25:39Wie gesagt, ich weiß nicht, wie die Sprache funktioniert.

00:25:42Ich versuche es nur durch Lesen zu verstehen.

00:25:44Es sieht so aus, als ob das ein Name sein könnte, den wir zuweisen können.

00:25:47Vielleicht ist es ein reservierter Name.

00:25:49Ich weiß es nicht.

00:25:50Und es ist asynchron.

00:25:51Das ist interessant.

00:25:52Wir haben es abgewartet.

00:25:53Wir beenden das Rendering des Layouts also erst, wenn das hier gerendert wurde.

00:25:57Slots “main”.

00:25:59Das scheint also im Grunde ein reservierter Name zu sein.

00:26:01Und daneben haben wir auch das Konzept der Partials, die ich auch von Laravel kenne, was auch recht typisch ist, sodass man nicht nur ein Layout hat, das einen Slot für den Hauptinhalt hat, sondern auch andere Komponenten, die man in das Layout, aber potenziell auch auf andere Seiten bringen kann.

00:26:18Hier haben wir also ein Partial für den Header, Partial für Flash-Alerts, kleine zusätzliche Warnmeldungen, die man vielleicht auf dem Bildschirm anzeigen möchte.

00:26:26Und zum Beispiel findet man das “partials header”-Ding hier im Ordner “partials” unter “header”.

00:26:33Und hier haben wir jetzt den Header.

00:26:35Und dort haben wir mehr Template-Syntax, um einen Link zu rendern.

00:26:40Und Links werden so gerendert, weil sie auch dynamisch sind.

00:26:43Sie hängen von den Routen ab, die du registriert hast, falls es interne Links sind.

00:26:47Hier richten wir also einen Link zur Home-Route mit dem Text “Home” ein.

00:26:52Und wir können das sehen.

00:26:54Wo können wir das sehen?

00:26:55Können wir das unten sehen?

00:26:58Oder, oh nein.

00:26:59Es ist das hier.

00:26:59Das ist hier ein SVG.

00:27:01Das ist also im Grunde dieses SVG, nehme ich an.

00:27:04Es hat einen Fallback-Namen “Home”.

00:27:06Und wenn wir darauf klicken, werden wir zur Home-Route weitergeleitet.

00:27:13Okay, dann haben wir hier etwas bedingtes Rendering, abhängig davon, ob wir einen eingeloggten Benutzer haben oder nicht.

00:27:19Macht Sinn.

00:27:20Das ist alles noch im Header.

00:27:23Okay.

00:27:23Und dann hier zum Beispiel das “@vite”-Ding.

00:27:26Wir scheinen also Vite für die Frontend-Assets zu verwenden, zum Bündeln und Verwalten der Frontend-CSS- und JavaScript-Dateien.

00:27:35Und wir injizieren, nehme ich an, die optimierten und gebündelten app.js- und app.css-Dateien hier hinein.

00:27:45Oder spezifischer: Wir finden das im “resources”-Ordner unter “js” und “css”.

00:27:49Das ist also diese JavaScript- und CSS-Datei.

00:27:53Ich weiß nicht einmal, ob sie verarbeitet wird.

00:27:57Verstanden.

00:27:58Und alle Vite-Server werden automatisch hochgefahren, wenn wir den Haupt-Dev-Server starten, nehme ich an.

00:28:05Also, okay.

00:28:06Macht Sinn.

00:28:06Ich verstehe hier nicht alles.

00:28:08Dieses “stack”-Ding hier ist wahrscheinlich etwas Debugging-Kram.

00:28:11Ich weiß es nicht.

00:28:12Und dann haben wir hier noch mehr Komponenten.

00:28:15Und ja.

00:28:16Da muss ich mich reinarbeiten.

00:28:17Was genau hier vor sich geht.

00:28:19Aber das werden wir zu gegebener Zeit tun.

00:28:21Lass mich zum Chat zurückkehren.

00:28:22Ein paar Fragen.

00:28:24Max LLM-Modelle werden teurer in Betrieb und Nutzung und sind nicht länger subventioniert.

00:28:28Werden Open-Source- oder selbstgehostete Modelle wichtiger?

00:28:31Und sollten Entwickler als Ergebnis für diesen Wandel DevOps lernen?

00:28:35Also, ich denke, dass offene Modelle in Zukunft allgemein wichtiger werden.

00:28:42Aber natürlich wird es auch Geld kosten, wenn du sie selbst betreiben willst.

00:28:45Denn entweder brauchst du eine ziemlich aufgerüstete lokale Maschine.

00:28:48Also zum Beispiel einen Mac Studio für 10.000 oder so.

00:28:52Oder du musst es wieder mieten.

00:28:53Es kostet also immer etwas Geld.

00:28:56Aber natürlich, je teurer die Frontier-Modelle werden, desto interessanter könnten die offenen Modelle als Alternative sein.

00:29:03Es gibt nicht allzu viele super fähige offene Modelle, je nachdem, was du versuchst zu tun.

00:29:10Aber ich bin sicher, wir werden dort hinkommen.

00:29:12Ich glaube jedoch nicht, dass du dafür DevOps lernen solltest.

00:29:16Du solltest es lernen, wenn das generell etwas ist, das dich interessiert.

00:29:19Aber das Bereitstellen und Betreiben eines eigenen offenen Modells ist etwas, das man, wenn man die Hardware hat,

00:29:25oder wenn man einen VPS mietet, einmal oder so macht.

00:29:28Aber man muss dann nur lernen, wie man es dieses eine Mal richtig hinbekommt.

00:29:32Du musst, würde ich sagen, nicht generell viel über DevOps lernen.

00:29:36Und hi, danke, dass du meinen Flutter-Kurs belegt hast.

00:29:41Danke für die nette Erwähnung, Don Solid.

00:29:47Und warum sollte ich dieses Tool verwenden, bitte, und nicht direkt einen KI-Dienst?

00:29:51Ich bin mir nicht sicher, welches Tool du meinst.

00:29:54Gibt es eine Chance, dass ihr eure neuen Kurse auf Udemy veröffentlicht?

00:29:57Macht ihr noch Udemy-Kurse?

00:30:01Gelegentlich tun wir das.

00:30:02Aber Udemy entwickelt sich momentan nicht gerade zum Besten.

00:30:07Wir müssen also sehen, wie sich das alles mit der Coursera-Übernahme und so weiter entwickelt.

00:30:14Und bezüglich der Content Security Policy: Ich meine, du kannst zu diesem Layout gehen, nehme ich an,

00:30:22und einfach alles, was du hinzufügen musst, hier in den Head-Bereich einfügen.

00:30:25Es ist letztendlich nur HTML, also kannst du es einfach hier hinzufügen.

00:30:32Das sollte also funktionieren.

00:30:34Aber ich fange natürlich gerade erst mit Adonis hier an.

00:30:42Okay, das haben wir also.

00:30:44Lass uns überspringen, oder lass uns vorerst das Frontend, die Ressourcen, beiseite lassen.

00:30:48Lass uns einen Blick auf den Startordner werfen.

00:30:50Das muss der serverseitige Teil sein, weil wir erforscht haben – nein, wir haben nicht alles andere erforscht.

00:30:56Es gibt noch mehr.

00:30:57Wir haben Datenbank, was unsere Migration enthält.

00:31:00Die Idee hier ist, genau wie bei vielen anderen Frameworks, dass wir unsere Datenbanktabellen in Migrationsdateien definieren,

00:31:08die dieses Format zu haben scheinen.

00:31:12Und ich würde annehmen, dass es auch einige Befehle gibt, die wir ausführen können, um diese Migrationsdateien automatisch zu erstellen.

00:31:17Und wir führen diese Migrationen dann auch aus, um sie auf die Datenbank anzuwenden, um im Grunde unsere Tabellen und ihre Schemata zu planen.

00:31:24Wir haben also dieses schema.ts.

00:31:28Okay, wir richten also ein Schema, eine Datenbanktabelle, im Grunde als Klasse ein, wie es scheint.

00:31:33Und dann erstellen wir die Migration wahrscheinlich programmatisch durch einen bestimmten Befehl.

00:31:40Config, oh, es gibt eine Menge Zeug zu konfigurieren.

00:31:43Okay, wir können da also eine Menge konfigurieren.

00:31:50Okay, wir kommen dazu, wenn wir es brauchen, schätze ich.

00:31:53Bin, server.ts, HTTP-Server, Einstiegspunkt.

00:31:57Die server.ts-Datei ist der Einstiegspunkt für den Start des Adonis.js HTTP-Servers.

00:32:02Entweder kannst du diese Datei direkt ausführen oder den serve-Befehl verwenden.

00:32:05Das wurde also für uns ausgeführt, als wir den Entwicklungsserver mit dem serve-Befehl hier gestartet haben.

00:32:13Was machen wir da drin?

00:32:18Importer, Igniter.

00:32:23Im Grunde das Hochfahren des Servers, das Starten, um auf dem Port zu lauschen.

00:32:27Die Route irgendwo registrieren, ganz sicher.

00:32:34Was console ist, ist der Einstiegspunkt für das Booten des Adonis.js Befehlszeilen-Frameworks.

00:32:38Das ist also, wenn wir benutzerdefinierte Befehle registrieren oder einige der eingebauten Befehle ausführen, nehme ich an, mit dem ace-Befehl.

00:32:45Und App, okay.

00:32:46Also, hier drinnen registrieren wir Start-Sachen.

00:32:49Und Start scheint interessant zu sein.

00:32:51Also, in Start haben wir zum Beispiel die routes.ts-Datei.

00:32:54Und hier drinnen registrieren wir eindeutig die Routen unserer Anwendung.

00:33:00Wie das für Slash nichts.

00:33:02Also Domain-Slash-nichts.

00:33:04Wir rendern die Homepage.

00:33:06Hier beziehen wir uns also auf Pfade in unserem Ressourcen-Views-Ordner.

00:33:12Also in Ressourcen-Views.

00:33:15Wenn wir also so etwas wie 'render pages home' haben, geht das in den Pages-Ordner hier.

00:33:20Und dann wird dort home gerendert.

00:33:23Das passiert hier im Wesentlichen.

00:33:28Und wir können Routen gruppieren.

00:33:31Warum sollten wir also gruppieren?

00:33:33Um eine gemeinsame Middleware anzuwenden, richtig?

00:33:35Guest-Middleware.

00:33:38Was auch immer sie tut.

00:33:40Und dann bekommen wir hier Anmelde- und Login-Routen.

00:33:44Ja, das ist wahrscheinlich eine Middleware, die nur nicht authentifizierte Benutzer erreichen können.

00:33:49Und auf der anderen Seite haben wir die Auth-Middleware, um Routen zu schützen, die nur von authentifizierten Benutzern erreichbar sein sollten.

00:33:56Wie die Logout-Route, die nur Sinn macht, wenn wir uns ausloggen.

00:34:00Und jede Route wird entweder so registriert, wo wir direkt etwas rendern, oder – und das kenne ich auch von Laravel, wahrscheinlich mehr im Einklang mit der offiziellen Philosophie – es so zu machen, ist einen Controller und eine bestimmte Controllermethode mit einer Route zu verbinden.

00:34:21Also, hier für die Anmeldung haben wir zwei Routen, eine GET- und eine POST-Route, und es ist in derselben Controller-Datei, aber wir zielen auf verschiedene Controller ab, den Erstellen- und den Speichern-Controller.

00:34:35Wenn wir uns das ansehen, unsere Controller in der controller.ts-Datei hier, die in adonis.js server, dot adonis.js server sind.

00:34:47Ja, aber das ist dynamisch erstellt, nicht wahr?

00:34:51Haben wir das erstellt?

00:34:53Sind wir es nicht?

00:34:55Nein, wir registrieren unsere Controller hier.

00:34:59Ich nehme an, das wird dynamisch generiert.

00:35:01Also hier, Neuer-Account-Controller.

00:35:04Wir haben unsere Klasse, Neuer-Account-Controller.

00:35:08Und dort drinnen haben wir eine Erstellen-Methode und eine Speichern-Methode.

00:35:12Und diese sind letztendlich für diese Namen verantwortlich.

00:35:15Und wieder, wir werden sehen, aber ich nehme an, das wird irgendwie dynamisch oder automatisch erstellt.

00:35:21Und dann in 'Erstellen', was für die GET-Route ist, rendern wir einfach eine weitere Ansicht.

00:35:25Also, theoretisch könnten wir das natürlich auch nicht verwenden, aber stattdessen könnten wir, ich nehme an, auch GET machen.

00:35:41Ja, wir könnten – nein, können wir nicht, können wir hier nicht direkt rendern?

00:35:46Müssen wir einen Controller verwenden?

00:35:50Sieht so aus, okay.

00:35:51Aber am Ende rendern wir es genau so, wie wir es hier getan haben.

00:35:56Und für die POST-Route hier validieren wir die Benutzereingabe mit dem eingebauten Validator.

00:36:04Und dann erstellen wir eine neue Instanz eines Benutzers unter Verwendung unseres Benutzermodells, auf das ich zurückkommen werde.

00:36:11Und dann authentifizieren wir diesen Benutzer für das Web.

00:36:15Also sitzungsbasierte, cookie-basierte Authentifizierung, nehme ich an.

00:36:18Und dann leiten wir wieder zur Home-Route um.

00:36:21Also, lass uns sehen.

00:36:24Wir haben den Modell-Ordner.

00:36:26Darin ist das Benutzermodell definiert.

00:36:28Und ich nehme an, die – ich habe vorher erwähnt, dass wir diese Datenbanktabellen haben, wir haben diese Schemata.

00:36:40Und wahrscheinlich definieren wir einfach das Modell und der Rest wird automatisch generiert, aber das werden wir sehen.

00:36:47Also, am Ende definieren wir hier, dass wir einen Benutzer oder Benutzer in unserer Anwendung haben wollen.

00:36:53Und dann erweitern wir einige Dinge, die von Adonis kommen.

00:36:57Und dann haben wir hier einen kleinen Getter, Initialen.

00:37:03Okay, das ist einfach eine Hilfsfunktion zum Abrufen des vollständigen Namens des Benutzers durch Kombination von Vor- und Nachnamen.

00:37:10Einfach um zu zeigen, wie man im Grunde berechnete Werte wie diesen erstellen kann.

00:37:15Okay, verstanden.

00:37:17Validatoren für den Benutzer.

00:37:19Kleine Validierungsdatei, in der wir diese Wein-Bibliothek verwenden, die ich vorher nicht kannte, um im Grunde sicherzustellen, dass wir eine nicht leere E-Mail-Adresse mit einer bestimmten maximalen Länge haben.

00:37:31Entschuldigung.

00:37:36Und dann scheinen wir in der Lage zu sein, bestimmte wiederverwendbare Validatoren zu erstellen, die wir überall dort verwenden können, wo wir für die Anmeldung validieren wollen, wo wir dann bestimmte Werte erzwingen.

00:37:49Okay, Middleware, Auth-Middleware ist einfach eine Klasse mit einer Handle-Methode, in der wir etwas überprüfen und 'next' zurückgeben, wenn wir Zugriff auf die Route gewähren wollen, auf der der Benutzer unterwegs war.

00:38:07Und ich nehme an, dass dieser 'frozen error', wenn die Authentifizierung fehlschlägt, die 'next'-Navigation verhindert.

00:38:14Guest-Middleware, ich nehme an, tut das Gegenteil.

00:38:21Ja, wir überprüfen, ob der Benutzer authentifiziert ist, und leiten dann um, wenn er es ist.

00:38:28Und wir gewähren nur dann Zugriff, wo auch immer sie hinwollten, wenn sie nicht authentifiziert waren.

00:38:32Okay.

00:38:33Ausnahmen erlauben es uns, unsere eigenen Fehler, unsere eigenen Ausnahmen zu definieren.

00:38:38Okay.

00:38:40Okay.

00:38:42Also.

00:38:45Welche neuen Kurse planst du in naher Zukunft zu veröffentlichen?

00:38:52Vielleicht etwas über BUN.

00:38:55Ich finde immer noch heraus, ob das ein Kurs ist, mit dem ich glücklich bin.

00:38:58Ich habe also schon etwas aufgenommen, aber ich möchte überprüfen, ob ich mit der Qualität und so weiter zufrieden bin und ob ich mit der Richtung zufrieden bin.

00:39:06Einige Software-Engineering-Grundlagen, Systemdesign sind Kurse, die ich dieses Jahr bauen möchte.

00:39:12Und was agentische KI angeht, ich weiß, dass sich das wahrscheinlich gut verkaufen würde, aber ich habe es vorhin beantwortet.

00:39:20Das Problem ist, ich würde gerne einen Kurs erstellen, in dem ich teile, wie ich agentisches Engineering mache und mit KI arbeite.

00:39:26Das Problem ist nur, dass es sich immer noch viel zu häufig ändert.

00:39:30Ich glaube also nicht, dass es im Moment super nützlich wäre.

00:39:33Sobald ich das Gefühl habe, dass es etwas stabiler ist, würde ich gerne einen solchen Kurs für agentisches Engineering oder KI-Engineering oder wie auch immer man es nennen will, erstellen.

00:39:42Es sieht aus wie puck.js.

00:39:44Ja.

00:39:45Warum würde jemand es 2026 verwenden?

00:39:48Also ich glaube nicht, dass irgendjemand Vue verwenden wird.

00:39:51Es dreht sich alles um SPA.

00:39:53Dem stimme ich hier nicht zu.

00:39:56Ich glaube, wir sind so an Single-Page-Anwendungen und React überall gewöhnt.

00:40:01Und React ist großartig.

00:40:02Und ich meine, es stimmt definitiv auch, dass KI React liebt.

00:40:07Und Adonis im Allgemeinen ist ziemlich nischig.

00:40:10Aber ich denke, es ist die falsche Annahme zu sagen, wir müssen React überall verwenden.

00:40:17Einfach nur Vorlagen auf dem Server zu rendern, reicht oft aus.

00:40:23Reicht oft aus.

00:40:24Und oft kann das Hinzufügen von React nur mehr Komplexität, eine größere Bundle-Größe hinzufügen.

00:40:30Denk an einige Sicherheitslücken, die wir in den letzten Wochen hatten.

00:40:35Es hat also seinen Wert, nichts einzuführen, das du nicht brauchst, nur weil du daran gewöhnt bist.

00:40:41Wir sind so daran gewöhnt, React für alles zu verwenden, dass wir es einfach als gegeben hinnehmen, als eine Standardoption, die wir verwenden müssen.

00:40:47Und ich glaube nicht, dass das der Fall ist.

00:40:49Also, ich stimme zu.

00:40:50Das sieht definitiv ein bisschen veraltet aus.

00:40:53Und wie ich schon sagte, habe ich meine Seiten vor vielen, vielen Jahren so geschrieben.

00:41:00Ich würde heute aber immer noch nicht sagen, dass es falsch ist.

00:41:03Es ist definitiv ungewöhnlich und nichts, das sich nativ anfühlt oder so, als würde es viel Sinn ergeben.

00:41:12Aber ich würde sagen, es kann Sinn ergeben.

00:41:14Nun, all das gesagt, wie ich schon sagte, unterstützt Adonis verschiedene Arten, Ansichten zu rendern.

00:41:23Es unterstützt React als Frontend und verwendet dann Inertia.js als Brücke.

00:41:29Du kannst also absolut Adonis.js Full-Stack-Anwendungen ohne diesen View-basierten Ansatz bauen.

00:41:38Aber ich wollte es zuerst ausprobieren, weil ich sehen wollte, wie das aussieht.

00:41:43Sieht ein bisschen aus wie Hano.

00:41:45Ja, ich denke, Hano ist ein bisschen, ist viel schlanker, oder?

00:41:48Hano hat also nicht all diese Funktionen wie Authentifizierung und ORM und so weiter eingebaut.

00:41:56Wie findest du Adonis.js?

00:42:00Ich finde es interessant, aber ich habe es vorher überhaupt nicht benutzt.

00:42:03Ich erkunde es also heute nur.

00:42:05Und ich habe gerade erst damit angefangen.

00:42:07Ich mag die Idee, alles in einem Framework enthalten zu haben, besonders jetzt in den Tagen,

00:42:13all dieser Lieferkettenangriffe.

00:42:16Und ich denke, im JavaScript-Ökosystem neigen wir dazu, zu übermäßig komplexen Lösungen zu greifen.

00:42:21Und wir nähen Dutzende von Bibliotheken zusammen, was neben Lieferkettenangriffen

00:42:26auch das Problem hat, dass nicht alle diese Bibliotheken immer gut gewartet sind.

00:42:31Ein “Batteries included”-Framework zu haben, hat also definitiv seine Vorzüge, würde ich sagen.

00:42:39Wie empfiehlst du aktuellen Informatikstudenten, die Grundwissen haben, Programmieren zu lernen?

00:42:44Was ist der nächste Schritt?

00:42:45Projekt bauen oder KI erforschen?

00:42:46Ich würde KI zum Lernen verwenden.

00:42:48Ich würde Projekte auch mit Hilfe von KI bauen, aber ich würde nicht nur KI verwenden, weil man offensichtlich

00:42:53nichts davon lernt.

00:42:54Ich würde versuchen, Software-Engineering-Grundlagen zu lernen.

00:42:57Ich würde versuchen, hier und da etwas Code von Hand zu schreiben.

00:43:01Ich würde definitiv den ganzen Code, den KI generieren könnte, überprüfen und wirklich verstehen.

00:43:05Ich würde ihn kritisch hinterfragen.

00:43:07Vielleicht auch KI verwenden, um den Code zu diskutieren.

00:43:10Aber ich bin ehrlich, ich versuche auch immer noch herauszufinden, wie man am besten unterrichtet und natürlich

00:43:15auch heutzutage Sachen mit KI lernt.

00:43:20Wie baust du heute ein Projekt, damit du lernst, wenn ich KI frage?

00:43:27Ja.

00:43:27Also würde ich KI wirklich als Sparringspartner im Wesentlichen verwenden.

00:43:32Okay.

00:43:32Also lass uns sehen.

00:43:34Nun möchte ich auch die Alternativen sehen, da wir gerade darüber gesprochen haben.

00:43:38Und dann werden wir auch anfangen, den Code zu bearbeiten.

00:43:40Aber ich möchte die Alternative sehen.

00:43:42Was wäre, wenn ich verwende.

00:43:47Lass mich das neu erstellen.

00:43:49Will bei null anfangen.

00:43:51Lass mich das neu erstellen.

00:43:52Stopp den Server.

00:43:53Und verwende den alternativen Ansatz hier mit dem React-Kit.

00:44:01Nun, es wird wahrscheinlich wieder abstürzen.

00:44:08Also, lass mich kurz überprüfen.

00:44:15Welchen Befehl hat es ausgeführt, damit es funktioniert?

00:44:19Permanent.

00:44:20Ich will kein permanent.

00:44:27Das hier wird es wahrscheinlich tun.

00:44:32Lass uns sehen.

00:44:36Lass uns sehen.

00:44:37Hoppla.

00:44:38Das wollte ich nicht tun.

00:44:39Ein Punkt reicht.

00:44:42Okay.

00:44:44Mal sehen, ob das funktioniert.

00:44:55Schwarzmullering in your pants.

00:44:57Ich bin mir nicht sicher, ob das gut oder schlecht ist.

00:45:09Habe ich meinen Flutter-Kurs von Grund auf entworfen?

00:45:11Ja.

00:45:12Alles meine Arbeit.

00:45:14Also, jetzt starten wir es nochmal.

00:45:21Mal sehen, ob das gleich aussieht.

00:45:24Ja.

00:45:25Dieselbe App.

00:45:26Aber jetzt sollte die Dateistruktur natürlich anders sein.

00:45:29Mal sehen.

00:45:32App-Ordner.

00:45:36Jetzt habe ich einen Transformer.

00:45:38Aber das, ich nehme an, das ist nur Backend-Kram.

00:45:42Nein.

00:45:42Das ist für die Übertragung der Daten vom Server zum Client, glaube ich.

00:45:46Also zum Frontend, mal sehen.

00:45:48Bin, Config, Database, Inertia.

00:45:53Okay.

00:45:53Inertia ist jetzt der Frontend-Ordner, nehme ich an.

00:45:56CSS.

00:45:57Ja.

00:45:57Okay.

00:45:58Also, was haben wir hier?

00:45:59Eine app.tsx-Datei.

00:46:11Ich habe keine Ahnung, was das ist, aber ich nehme an, es ist dazu da, das Frontend zu hydrieren und es mit dem Backend zu verbinden.

00:46:18Create inertia app.

00:46:20Setzt den Seitentitel, wie es scheint.

00:46:22App.

00:46:23Okay.

00:46:24Wo ist die Config-Datei für die Skripte, die mir einen Fehler anzeigt, aber das ist nur, weil das veraltet ist.

00:46:29Das ist okay.

00:46:32Server-Side Rendering TSX.

00:46:34Das ist also für den Einstiegspunkt des Server-Side Renderings, Client-Einstiegspunkt.

00:46:39Okay.

00:46:39Ich habe keine Ahnung, wie Inertia funktioniert und was dieses Zwei-Stunden-Ding ist.

00:46:46Habe meine Homepage hier.

00:46:47Das ist also jetzt eine normale React-Komponente.

00:46:51Nichts allzu Ausgefallenes.

00:46:52Haben wir ein Layout oder etwas?

00:46:53Ja, wir haben ein Layout.

00:46:54Default TSX.

00:46:55Wo ist das eingerichtet?

00:46:56Ist das in App eingerichtet?

00:46:59Seitenkomponente auflösen.

00:47:00Schau in den Pages-Ordner.

00:47:03Wo Layout, Layout, Layout, Layout.

00:47:05Layout ist importiert.

00:47:07Okay.

00:47:08So funktioniert das also.

00:47:10Haben unser Layout hier.

00:47:12Und dann haben wir das Standard-Layout.

00:47:16Okay.

00:47:16Also, wir haben, ooh, use effect.

00:47:19Das ist verboten.

00:47:24Okay.

00:47:25Ja.

00:47:26Das ist also wirklich nur React.

00:47:27Wie wir es kennen, die Link-Komponente kommt von Inertia.

00:47:30Oder von Adonis.js und seinem Inertia-Paket.

00:47:35Okay.

00:47:37Und wie ich es verstehe, mal sehen.

00:47:47Ja.

00:47:47Children ist offensichtlich für das...

00:47:51Okay.

00:47:52Okay.

00:47:53Okay.

00:47:54Interessant.

00:47:54Children ist natürlich, wie immer bei React, die Komponente zwischen den Tags.

00:48:05Aber Children hat auch ein Props-Objekt mit einer User-Eigenschaft.

00:48:13Und ich nehme an, das wird irgendwo in unseren Controllern gefüllt.

00:48:20Zuerst neue Sitzung, neuer Account-Controller des Sign-up oder Inertia-Render.

00:48:29Aber dort übergeben wir keine Props.

00:48:32Sitzungs-Controller.

00:48:35Wo wird das gefüllt?

00:48:36Weil wir dieses Transformer-Ding hier haben, von dem ich dachte, es wäre für die Umwandlung von serverseitigen zu clientseitigen Daten.

00:48:46Ich bin mir nicht sicher.

00:48:50Return this pick, this resource, was auch immer.

00:48:56Vielleicht ist es auch einfach nur dazu da, Daten aus der Datenbank abzurufen.

00:48:59Ich bin mir nicht sicher.

00:49:01Okay.

00:49:02Also, wir haben das eingerichtet.

00:49:03Lass uns mit dem offiziellen Leitfaden weitermachen.

00:49:05Ich mag es einfach, erst einmal selbst in die Codebasis einzutauchen.

00:49:08Und sie mir dann anzusehen, um zu versuchen, sie zu verstehen, bevor ich dem Leitfaden folge.

00:49:12Weil ich das Gefühl habe, dass ich mehr lerne, wenn ich es so mache.

00:49:16Und wer liest heutzutage überhaupt noch Code, oder?

00:49:18Also, warum nicht den Stream nutzen, um es zu tun?

00:49:22Nur ein Scherz.

00:49:23Ich lese sehr wohl Code.

00:49:26Ordnerstruktur.

00:49:28Okay.

00:49:28Ich habe gerade die Ordnerstruktur erkundet.

00:49:31App-Ordner.

00:49:32Das App-Verzeichnis organisiert den Code für die Domänenlogik Ihrer Anwendung.

00:49:36Zum Beispiel Controller, Modelle, Mails.

00:49:39Also ja, wie bei Laravel hilft es auch beim Versenden von Mails, was natürlich super praktisch sein kann.

00:49:44Das Bin-Verzeichnis enthält die Einstiegspunkt-Dateien, die zum Starten Ihrer Adonis.js-Anwendung verwendet werden, Konsole, Server, TS.

00:49:50Sie müssen diese Dateien normalerweise nicht ändern, es sei denn, Sie möchten anpassen, wie die App bootet.

00:49:56Okay.

00:49:56Config – alle Anwendungs- und Drittanbieter-Konfigurationsdateien befinden sich im Config-Verzeichnis.

00:50:01Sie können auch Konfigurationen lokal für Ihre Anwendung in diesem Verzeichnis speichern.

00:50:05Ja, also im Config-Ordner haben wir bereits gesehen, gibt es Dinge wie, keine Ahnung, Datenbank, die wir SQLite verwenden.

00:50:13Ich nehme an, Sie könnten sich wahrscheinlich auch mit einer Postgres-Datenbank oder so etwas verbinden.

00:50:20Wir können den Client wählen.

00:50:21Also vielleicht könnten wir hier etwas wie Buns SQLite-Client verwenden.

00:50:24Ich weiß es nicht.

00:50:25Definieren Sie den Datenbankpfad, den temporären Pfad.

00:50:28Also, in diesem Temp-Ordner hier, Migrationen, was haben wir noch?

00:50:34Config, Inertia, Server-Side Rendering, Server-Side Rendering Modus umschalten.

00:50:39Ja, ich möchte Server-Side Rendering, also stellen wir das auf true.

00:50:47Logger, ja.

00:50:48Das ergibt also Sinn.

00:50:50Ich möchte nur kurz nachsehen.

00:50:52Wenn ich das auf false setze, wäre meine Annahme, dass ich mir den Seitenquelltext hier ansehe, der ein div-App mit einigen Daten enthält, die daran übergeben werden.

00:51:06Ja, aber der eigentliche HTML-Inhalt fehlt, weil es clientseitig gerendert wird.

00:51:10Wir importieren einige Skripte, die dann das clientseitige Rendering durchführen.

00:51:15Das ist nicht toll für die Suchmaschinenoptimierung.

00:51:18Also, wenn ich das auf true setze, können wir jetzt sehen, da ist viel mehr drin, oder?

00:51:26Da ist der eigentliche, alles inline, also etwas schwer zu lesen, aber der eigentliche HTML-Inhalt ist da.

00:51:31Also lasse ich das auf true eingestellt.

00:51:34Okay, die Datenbank.

00:51:35Das Datenbank-Verzeichnis enthält Artefakte, die sich auf die Datenbankebene beziehen.

00:51:39Standardmäßig verwendet Adonis.js Lucid ORM, also sein eigenes ORM.

00:51:43Und die Idee hinter einem ORM ist, dass Sie Ihre Datenbanktabellen im Wesentlichen als Modelle ausdrücken, als Klassen, könnte man sagen, in Ihrem Code.

00:51:51Und dann werden die zugrunde liegenden Schemas und Migrationen für Sie generiert.

00:51:57Und, ja, dies ist das erste Mal, dass ich dieses Framework erkunde, also finde ich gerade erst heraus, wie alles funktioniert.

00:52:03Das Wechseln von Datenbanken erfordert keine Neuorganisation dieses Ordners, Migrationen, Versionen, Schema-Änderungen, Seeder, wenn Sie Seed-Daten haben möchten, wie einige anfängliche Admin-Benutzer oder so etwas.

00:52:15Okay, Provider.

00:52:16Das Provider-Verzeichnis wird verwendet, um die von Ihrer Anwendung verwendeten Service-Provider zu speichern.

00:52:20Was sind Service-Provider?

00:52:22Service-Provider.

00:52:22Dieser Leitfaden behandelt Service-Provider.

00:52:24Nun, ich werde wahrscheinlich nicht alles durchgehen.

00:52:27Service-Provider sind JavaScript-Klassen mit Lebenszyklus-Hooks, die zu bestimmten Zeitpunkten während des Startens und Herunterfahrens der Anwendung ausgeführt werden.

00:52:35Dies ermöglicht es Ihnen, Bindings für den Inversion-of-Control-Container zu registrieren, Framework-Klassen mithilfe von Makros zu erweitern, Initialisierungen zu präzisen Momenten durchzuführen und Ressourcen beim Herunterfahren zu bereinigen.

00:52:53Das ist also, wo wir einige eingebaute Provider haben.

00:52:58Wo ist er?

00:53:02Ich habe ihn vorher gesehen.

00:53:04Wo sind die eingebauten Provider?

00:53:09Provider.

00:53:09Hier ist API-Provider.

00:53:12Benutzerdefinierter Serialisierer für API-Antworten.

00:53:17Okay, wir haben also einen Provider für die Serialisierung von Daten, wie es scheint.

00:53:22Und ich würde annehmen, dass es weitere eingebaute Provider gibt, die bei der Authentifizierung helfen, sodass sie eine Reihe von Standard-Middleware oder ähnliches registrieren.

00:53:30Das wäre meine Annahme.

00:53:33Lass uns das nicht speichern.

00:53:35Okay, public, das Public-Verzeichnis enthält rohe statische Assets.

00:53:39Habe ich diesen Ordner übersehen?

00:53:40Public.

00:53:46Ich habe keinen Public-Ordner.

00:53:48Aber ich schätze, ich habe dann keine öffentlichen Assets.

00:53:51Ich könnte wahrscheinlich einen Public-Ordner hinzufügen, um rohe Assets zu haben, die nicht optimiert werden.

00:54:05Ich sehe fast keine Jobs in Adonis.

00:54:07Warum also solche Dinge erkunden, die nicht gefragt sind?

00:54:10Nur zum Spaß?

00:54:10Yo, wenn du natürlich auf Jobsuche bist, dann Adonis.js.

00:54:15Oh, das ist so eine schwierige Frage.

00:54:17Ich meine, ja, Adonis.js hilft dir nicht, wenn du nur auf Jobsuche bist.

00:54:22Aber zum einen erweitert das Erkunden von Alternativen immer deinen Horizont.

00:54:27Du lernst vielleicht neue Konzepte hier kennen, die auch auf andere Anwendungen mit anderen Tech-Stacks anwendbar sind.

00:54:33Aus Spaß ist ein sehr triftiger Grund.

00:54:36Und natürlich könntest du, wenn du nicht auf Jobsuche bist, wenn du dein eigenes SaaS aufbauen willst, dein eigenes Geschäft, wie auch immer,

00:54:48dann könnte das natürlich eine valide Option sein.

00:54:52Wenn du auf Jobsuche bist, hängt es natürlich davon ab, wo du bist, es mag sehr nischenhaft sein.

00:54:58Und, um ehrlich zu sein, es ist so nischenhaft, dass es sehr schwer sein wird, einen Job zu finden.

00:55:01Aber natürlich hättest du nicht viel Konkurrenz, wenn du in einer Gegend wärst, wo es einige Jobs dafür gäbe.

00:55:07Aber das ist natürlich sehr theoretisch.

00:55:08Aber ja, für mich ist es jetzt nur der Spaß.

00:55:10Ich möchte es einfach erkunden, weil ich schon vor acht Jahren darüber gelesen habe.

00:55:15Und ich möchte endlich verstehen, wie es funktioniert.

00:55:19Ein Ressourcen-Verzeichnis speichert Edge-Templates und unkompilierte Frontend-Assets wie CSS- und JavaScript-Dateien in einer Inertia-App.

00:55:30Habe ich Ressourcen?

00:55:32Habe ich.

00:55:33Inertia-Layout.

00:55:35Oh.

00:55:35Das ist also wie das rohe HTML-Gerüst, in das diese React-App gerendert wird.

00:55:41Wir könnten hier unsere Content Security Policy einrichten.

00:55:44Wir könnten hier einige statische Assets einbringen, schätze ich.

00:55:48Einige Metadaten zusätzlich zu dem registrieren, was wir bereits haben.

00:55:51Okay.

00:55:52Inertia, das Inertia-Verzeichnis existiert nur in Projekten, die das Inertia-Starter-Kit verwenden.

00:55:56Ergibt Sinn.

00:55:57Es stellt eine Unteranwendung dar, die den Frontend-Quellcode enthält.

00:56:01Es steht Ihnen frei, zusätzliche Ordner wie Komponenten, Layouts, Utils zu erstellen, um zu organisieren.

00:56:06Sie bauen also im Wesentlichen Ihre View oder Ihre React-App darin.

00:56:09Klare Trennung zwischen Frontend und Backend.

00:56:11Adonis.js behält eine klare Grenze zwischen dem Backend und dem Frontend bei.

00:56:14Sie sollten niemals Backend-Code in Ihre Frontend-Anwendung importieren, um dort nichts offenzulegen oder damit sie abstürzt, weil offensichtlich Backend-APIs oder serverseitige Node.js-APIs nicht auf dem Client im Browser ausgeführt werden.

00:56:30In der Praxis kommuniziert Ihr Frontend mit dem Backend über HTTP-Anfragen und empfängt einfache JSON-Daten.

00:56:35Adonis.js ermutigt Sie, diese Realität explizit zu modellieren.

00:56:39Daten werden über API-Antworten abgerufen und transformiert.

00:56:43Ich frage mich, das ist interessant, wie genau kommunizieren wir hier, wenn wir Inertia verwenden?

00:56:49Nehmen wir also an, wir melden uns an.

00:56:52Also haben wir hier ein Formular.

00:56:54Ja.

00:56:54Und das ist interessant.

00:56:56Das ist eine Komponente, die vom Adonis.js-Framework stammt.

00:57:01Es nimmt eine Route und ich nehme an, wir senden keine HTTP-Anfrage, wie wir es in einer normalen React-App an irgendeine selbstgebaute REST-API tun würden, oder?

00:57:12Stattdessen haben wir das so aufgebaut, als wäre es eine klassische Multi-Page-Anwendung, bei der unser Formular mit einer Route verbunden ist.

00:57:19Und wenn wir dieses Formular absenden, nehme ich an, dass Inertia und Adonis hinter den Kulissen diese Anfrage erstellen und an diese Route senden.

00:57:28Und alles wird im Grunde für uns erledigt.

00:57:31Wir müssen also die Anfrage nicht selbst senden, nicht auf die Antwort warten oder irgendeinen Status verwalten.

00:57:37Das müssen wir hier nicht tun.

00:57:42Ja.

00:57:44Wie ist dein Denkprozess, wenn du ein neues Framework lernst?

00:57:48Vergleichst du es mit anderen Frameworks?

00:57:51Oder behandelst du es als etwas absolut Neues?

00:57:53Ich glaube, man vergleicht es automatisch immer ein bisschen mit dem, was man schon kennt.

00:57:57Aber natürlich unterscheidet sich Adonis so sehr, zum Beispiel von Next.js und so weiter, dass ich es nicht zu sehr vergleiche.

00:58:03Der Hauptvergleich, den ich anfangs gezogen habe, ist, dass ich verstehe oder verstehen muss, dass es eine völlig andere Philosophie ist.

00:58:10Es geht also nicht nur um Routing und das Rendern einiger Komponenten, sondern vielmehr um dieses voll ausgestattete Framework, das alles mitbringt.

00:58:18Ich vergleiche es also nicht wirklich zu viel.

00:58:19Ich sehe es als etwas ziemlich Neues.

00:58:21Ich vergleiche es ein bisschen mit Laravel, weil es das Laravel für JavaScript ist.

00:58:25Und danke, Bleem, für den sehr netten Kommentar hier.

00:58:29Es freut mich, dass dir der Inhalt gefällt.

00:58:32Okay.

00:58:34Gemeinsame Typen.

00:58:35Das Frontend kann sich weiterhin auf gemeinsame TypeScript-Typen verlassen, die automatisch von Adonis.js generiert werden.

00:58:40Diese werden in diesem .adonis.js-Client-Verzeichnis gespeichert und enthalten Typdefinitionen für Routen, Props und so weiter, damit wir TypeScript nutzen können.

00:58:48Start.

00:58:49Das Start-Verzeichnis enthält die Dateien, die du während des Boot-Zyklus der Anwendung importieren möchtest.

00:58:55Zum Beispiel sollten die Dateien zum Registrieren von Routen und Definieren von Event-Listenern in diesem Verzeichnis liegen.

00:59:00Adonis.js importiert Dateien aus dem Start-Ordner nicht automatisch.

00:59:03Adonis.js wird lediglich als Konvention verwendet, um ähnliche Dateien zu gruppieren.

00:59:06Okay.

00:59:07Also habe ich in diesem Start-Ordner die Datei Kernel.ts.

00:59:12Oh ja, das habe ich schon gesehen.

00:59:14Richtig, richtig, richtig, richtig, richtig, richtig.

00:59:16Wir könnten hier neue Middleware registrieren, nehme ich an, und wir werden sehen, ob wir das als Teil der Anleitung tun müssen.

00:59:24Wir haben einen Test-Ordner.

00:59:25Wir haben einen Temp-Ordner für temporäre Dateien wie die Datenbank.

00:59:28Ace.js ist der Einstiegspunkt für die Ausführung von Ace-Befehlen.

00:59:33Haben wir das hier?

00:59:35Ace.

00:59:36Ace, ja.

00:59:37Okay.

00:59:38Ändere diese Datei nicht.

00:59:39Okay.

00:59:41Ja.

00:59:44Ist das Projekt-Manifest?

00:59:46Lint-Paket verwenden.

00:59:48Konfiguration verwenden.

00:59:49Okay, verstanden.

00:59:51Einrichtung der Entwicklungsumgebung.

00:59:54Adonis-Anwendungen werden mit einer vollständig konfigurierten Entwicklungsumgebung geliefert.

00:59:57Also ja, Code-Editor.

01:00:01Ja, ich habe die Edge-Erweiterung bereits installiert, aber die brauchen wir nicht, wenn ich Inertia und React verwende.

01:00:09TypeScript.

01:00:10Das sollte also alles so konfiguriert sein, wie ich es verstehe.

01:00:12Ich möchte also nicht wirklich Zeit damit verschwenden.

01:00:14Konfiguration und Umgebung.

01:00:18Die Konfiguration in Adonis ist in drei verschiedene Systeme organisiert, von denen jedes einen bestimmten Zweck erfüllt.

01:00:23Konfigurationsdateien enthalten deine Anwendungseinstellungen im Config-Ordner.

01:00:28Umgebungsvariablen in .env enthalten Laufzeitgeheimnisse und Werte, die sich zwischen den Umgebungen ändern.

01:00:33Ergibt Sinn.

01:00:34Übrigens, was Geheimnisse angeht, besonders bei all den Supply-Chain-Angriffen, wäre meine Empfehlung, sie nicht in .env-Dateien zu speichern.

01:00:41Ich mache das vielleicht für einen Kurs oder so, weil es schnell geht und ich es danach sowieso lösche.

01:00:47Aber für Geheimnisse, die du wirklich ständig verwendest, würde ich einen Dienst wie Infisical nutzen.

01:00:53Ich weiß, ich werde nicht von ihnen bezahlt.

01:00:54Du kannst auch Doppler oder so etwas Ähnliches verwenden.

01:00:57Das sind Cloud-Dienste.

01:00:58Bei Infisical kannst du kostenlos starten.

01:01:01Ja.

01:01:02Und dann kannst du dein Geheimnis in der Cloud speichern und über die CLI abrufen.

01:01:06Und falls dein Rechner kompromittiert wird, werden deine Geheimnisse nicht extrahiert, oder zumindest nicht so leicht.

01:01:14Das ist also nur eine kleine Randnotiz.

01:01:17Die Datei adonisrc.ts konfiguriert das Framework selbst.

01:01:20Okay.

01:01:20Die Konfigurationsdateien sind also für die Anwendung und das ist für das Framework selbst.

01:01:26Hier könnten wir wahrscheinlich die Ordnernamen ändern, in denen standardmäßig gesucht wird, und so weiter.

01:01:33Die Konfiguration befindet sich in einem Config-Verzeichnis.

01:01:35Ein typisches Adonis-Projekt enthält mehrere Konfigurationsdateien.

01:01:38Das habe ich gesehen.

01:01:39Hier ist, wie eine Datenbank-Konfigurationsdatei aussieht.

01:01:42Mail-Konfiguration.

01:01:43Beachte, wie diese Konfigurationsdatei auf Umgebungsvariablen verweist.

01:01:46Dies ist die korrekte Art, Umgebungsvariablen zu verwenden.

01:01:49Ja.

01:01:49Das ergibt also Sinn.

01:01:50Wenn wir zum Beispiel eine Anwendung haben, die E-Mails versendet, können wir konfigurieren, wie E-Mails versendet werden.

01:01:55Aber für einige Werte legen wir sie in .env-Dateien, um sie nicht fest in den Konfigurationsdateien zu haben.

01:02:02Das ist nur für die allgemeine Konfiguration zum Anpassen der Einstellungen, aber für die konkreten Werte und für die Geheimnisse laden wir diese als Umgebungsvariablen.

01:02:12Konfigurationsdateien werden während des Boot-Zyklus der Anwendung geladen.

01:02:16Wir verwenden also keine Edge-Templates, wir verwenden keine Edge-Templates-Umgebungsvariablen, .env wird wahrscheinlich automatisch geladen.

01:02:25Der App-Key ist eine spezielle Umgebungsvariable, die Adonis.js zum Verschlüsseln von Cookies, Signieren von Sitzungen und für andere kryptografische Operationen verwendet.

01:02:35Wir werden also Key:generate ausführen, um einen App-Key zu erstellen, aber wir haben bereits einen.

01:02:41Okay, das haben wir.

01:02:46Ich nehme einfach an, dass die Standardeinstellungen hier in Ordnung sind.

01:02:49Ich möchte diesen Stream nicht damit verbringen, Konfigurationsdateien zu optimieren.

01:02:53Also fahren wir mit der Bereitstellung fort.

01:02:58Ja, okay, aber ich möchte nicht bereitstellen.

01:03:00Ich möchte eine voll funktionsfähige Dev-Show, eine Community-Showcase-Website bauen.

01:03:11In diesem Tutorial wirst du Dev-Show bauen.

01:03:14Ja, das möchte ich tun.

01:03:17Aber zuerst Fragen.

01:03:21Glaubst du, GitHub Actions sind der Hauptgrund für das TanStack-Sicherheitsproblem, oder ist es ein Fehler von TanStack?

01:03:27Also technisch gesehen ist es ein Fehler von TanStack, weil sie Dinge hätten konfigurieren können, sodass dies nicht passiert wäre, wenn ich mich recht erinnere.

01:03:38Aber natürlich, wenn man ein System wie GitHub Actions hat, das diesen spezifischen Fehler so wahrscheinlich gemacht hat, ist das natürlich auch nicht toll.

01:03:50Ich muss sagen, ich bin kein großer CI/CD-Experte.

01:03:55Ich habe GitHub Actions seit vielen, vielen Jahren für alle Arten von Automatisierungen verwendet.

01:04:00Aber andererseits arbeite ich nicht in einem großen Unternehmen, wo fünf Teams ständig in dasselbe Repo pushen, mit allen verschiedenen Sonderfällen und komplexen Workflows.

01:04:12Ich bin also mit GitHub Actions zufrieden.

01:04:14Aber ich verwende es wieder in verschiedenen Formen.

01:04:18Nicht alle super, super einfach, aber definitiv nicht die ausgefeiltesten Workflows, die du je gesehen hast.

01:04:29Ich möchte nach deinem JavaScript-Kurs fragen.

01:04:31Ist es falsch, mehr als 90 Videos zu schauen und es immer noch nicht zu verstehen?

01:04:33Wenn du nichts verstehst, ist das kein gutes Zeichen.

01:04:38Wahrscheinlich für mich dann, schätze ich.

01:04:39Aber schwer so zu beantworten.

01:04:43Aber irgendetwas, schätze ich, sollte Klick machen, wenn du die Videos in der richtigen Reihenfolge schaust.

01:04:51Aber ja, ich finde es schwer, weil ich Windows verwende und du Apple benutzt.

01:04:54Aber das sollte keinen Unterschied machen.

01:04:56JavaScript ist JavaScript.

01:04:57Also ich, aber wieder, ich weiß nicht, was, was, wenn du sagst, nicht verstehen, wenn du die JavaScript-Syntax nicht verstehst, das ist tatsächlich dasselbe.

01:05:07Also da, Windows, Apple sollte nicht das Problem sein.

01:05:10Hallo, Max.

01:05:11Danke für deinen riesigen Beitrag zur Community.

01:05:13Hallo, und vielen Dank für die sehr netten Worte.

01:05:16Arbeitest du lieber mit React oder Angular oder hängt es vom Projekt ab?

01:05:20Hängt vom Projekt ab.

01:05:21Aber heutzutage verwende ich meistens React, auch weil es natürlich der Liebling der KI ist.

01:05:26Und ich benutze eine Menge KI zum Programmieren, zum Besseren oder Schlechteren.

01:05:33Vor der KI hatte ich keine starke Präferenz.

01:05:36Wenn überhaupt, bevorzugte ich wahrscheinlich Vue aufgrund der Syntax und der Benutzerfreundlichkeit, besonders Vue 2.

01:05:42Aber ja, diese Zeiten sind lange vorbei.

01:05:44Also was auch immer.

01:05:46Was ist deiner Meinung nach wichtig, wenn man neue Framework-Paradigma-Konzepte lernt?

01:05:51Also wirklich tief einzutauchen ist wichtig für mich.

01:05:54Ich möchte verstehen, wie die Dinge unter der Haube funktionieren.

01:05:57Ich will nicht nur, ich will nicht nur die oberflächliche Antwort bekommen.

01:06:03Ich möchte verstehen, wie die Dinge verbunden sind, warum wir bestimmte Dinge auf eine bestimmte Weise tun, wann man welchen Ansatz verwendet.

01:06:10Ich versuche wirklich, die Dinge zu hinterfragen und ein bisschen tiefer zu graben, wenn man es so ausdrücken will.

01:06:16Aber jetzt lass uns das bauen.

01:06:19Wir beginnen mit dem Adonis.js Hypermedia.

01:06:22Ich benutze also Inertia.

01:06:23Wir werden sehen, ob wir es trotzdem zum Laufen bringen können.

01:06:27Ja, wir haben diese Routen.

01:06:29Ich habe sie auch hier, glaube ich.

01:06:34Wo sind wir?

01:06:35Wir sind im Start.

01:06:36Ja, es ist das Start-Ordner-Routen-Verzeichnis.

01:06:39Ja, das haben wir hier auch.

01:06:40Das sieht also gleich aus.

01:06:43Das Starter-Kit gibt uns Anmelde-, Login- und Logout-Routen.

01:06:45Beachte, wie die Gast-Middleware sicherstellt, dass nur abgemeldete Benutzer auf Anmeldung und Login zugreifen können, während die Auth-Middleware die Logout-Route schützt.

01:06:53Das haben wir schon herausgefunden.

01:06:55Wie Controller funktionieren.

01:06:56Lass uns den Anmelde-Controller ansehen, um zu sehen, wie Anfragen durch die Anwendung fließen.

01:07:07Ja, lass uns einen Blick auf diesen neuen Account-Controller in den App-Controllern werfen.

01:07:12Ich benutze also Inertia, natürlich nicht Edge, aber trotzdem.

01:07:19Jede Controller-Methode erhält als ersten Parameter ein HTTP-Kontextobjekt.

01:07:26Dieses hier.

01:07:28Der Kontext enthält alles über die aktuelle Anfrage, die Anfragedaten, das Antwortobjekt, den Auth-Status, den View-Renderer und mehr.

01:07:34Wir destrukturieren nur die Eigenschaften, die wir brauchen.

01:07:39Die Erstellen-Methode zeigt einfach das Anmeldeformular.

01:07:42Ja, das habe ich also verstanden.

01:07:44Wir sind hier, in unserem Fall, da wir Inertia verwenden, erhalten wir dieses Inertia-Ding.

01:07:48Da ist mehr Zeug drin.

01:07:50Wir könnten die Anfrage erhalten, um, ich weiß nicht, die URL und so etwas herauszufinden.

01:07:57Aber hier verwenden wir dieses Inertia-Objekt, um eine Ansicht zu rendern.

01:08:01Und hier, für diese Post-Route, verwende ich, wie es scheint, ja, wir ziehen die Anfrage heraus, um die Methode validateUsing zu verwenden, um den Anfragetext zu validieren.

01:08:12Ja.

01:08:17Vielleicht bemerkst du, dass der Controller auf ein Benutzermodell und einen Anmelde-Validator verweist.

01:08:21Das Starter-Kit enthält diese bereits.

01:08:23Wir werden das in einem späteren Kapitel untersuchen.

01:08:27Okay.

01:08:30Wenn ein Controller einen View-Renderer aufruft, sucht er nach der Template-Datei und rendert sie.

01:08:34Also ja, das haben wir verstanden.

01:08:35Ansichten liegen im Ressourcen-Ordner.

01:08:38Versuche, ein Konto zu erstellen.

01:08:39Ja, das habe ich bereits getan.

01:08:40Befehlszeile im REPL.

01:08:42Vielleicht fragst du dich, warum wir CLI und REPL abdecken, anstatt direkt mit dem Bauen von Features zu beginnen.

01:08:46Hier ist der Grund.

01:08:46Während dieses gesamten Tutorials wirst du ständig ACE-Befehle verwenden, um Controller, Modelle und andere Dateien zu generieren.

01:08:51Sich jetzt mit der CLI vertraut zu machen, verhindert, dass wir später im Fluss unterbrochen werden.

01:08:54Okay.

01:08:55Wir können verfügbare Befehle mit node ace list sehen.

01:08:59Lass uns das tun.

01:09:02Hallo.

01:09:05Okay.

01:09:06Also haben wir eine Reihe von Befehlen, eine Reihe von eingebauten Befehlen, die wir ausführen können.

01:09:11Installieren und konfigurieren eines oder mehrerer Adonis-Pakete.

01:09:14Bauen, auswerfen, Datenbankbefehle zum Ausführen der Seeder.

01:09:19Einen Schlüssel generieren.

01:09:21Unsere Routen auflisten.

01:09:23Dinge machen, wie ein Ereignis erstellen, für das wir einen Listener einrichten möchten.

01:09:29Oder eine neue Middleware oder ein Modell erstellen.

01:09:32Okay.

01:09:32Ja.

01:09:38REPL.

01:09:39Ja.

01:09:40Ich werde eigentlich vorausspringen.

01:09:42Ich fühle mich riskant.

01:09:54In diesem Kapitel wirst du Modelle und Migrationen für die Post- und Kommentar-Ressourcen erstellen.

01:09:59Beziehungen herstellen.

01:10:01Dummy-Daten generieren.

01:10:01Okay.

01:10:02Dieses Kapitel stellt Lucid, AdonisJS und SQL-ORM vor.

01:10:06Statt rohe SQL-Abfragen zu schreiben, arbeitest du mit JavaScript-Klassen, sogenannten Models, die deine Datenbanktabellen repräsentieren.

01:10:11Das habe ich also schon vorher gesagt.

01:10:14Ein wichtiger Unterschied.

01:10:15Models definieren, wie du mit Daten interagierst, ändern aber nicht die Datenbankstruktur.

01:10:20Das ist die Aufgabe von Migrationen.

01:10:21Ja.

01:10:21Wir haben also ein Model.

01:10:22Wir verwenden das Model in unserem Code,

01:10:24um mit den Daten zu interagieren.

01:10:25Aber um das tun zu können, brauchen wir eine Datenbanktabelle.

01:10:27Und um diese zu erstellen, benötigen wir eine sogenannte Migration.

01:10:31Das ist wie ein kleines Skript, könnte man sagen.

01:10:33Oder ein Bauplan, um die Datenbank so anzupassen, dass wir die richtige Tabelle haben.

01:10:37Und die Migration wird vom Model abgeleitet.

01:10:40Von der Model-Klasse.

01:10:42So funktioniert das in Laravel.

01:10:43Und ich verstehe, dass es in Adonis genauso funktioniert.

01:10:49Lass uns also ein Post-Model hinzufügen.

01:10:54Mit "node ace make:model post".

01:11:01Das gibt uns eine "models/post.ts"-Datei.

01:11:05Und es erstellt auch bereits eine neue Migrationsdatei.

01:11:09Denn wie gesagt, wir brauchen sowohl Model als auch Migration.

01:11:11Wir haben jetzt also das Post-Model hier.

01:11:13Eine leere Klasse im Moment.

01:11:19Das könnte nur ein TypeScript-Fehler in meiner IDE sein.

01:11:26Oder auch nicht.

01:11:27Ich glaube, wir haben noch keine.

01:11:28Weil ich die Migration noch nicht eingerichtet habe.

01:11:33Das Schema.

01:11:34Die Form der Tabelle also noch nicht.

01:11:41Die Tabellenstruktur in der Migration definieren.

01:11:43Richtig.

01:11:43Das müssen wir also tun.

01:11:45Lass mich das kopieren.

01:11:48Und gehen wir zu diesem Post.

01:11:53Migrationsdatei.

01:11:54Basis-Schema.

01:11:56Ja.

01:11:56Das ist die richtige.

01:11:59Anfangs richtet sie eine Basistabelle mit dem Namen "posts" ein.

01:12:07Und gibt ihr einfach eine ID und ein paar Zeitstempel.

01:12:10Und wir fügen jetzt diese drei Zeilen hinzu.

01:12:14Ich kann sie also einfach kopieren.

01:12:16Hier einfügen.

01:12:18Um jedem Post einen Titel, eine URL und eine Zusammenfassung zu geben.

01:12:24Wie es scheint.

01:12:25Und wir setzen es auf "not nullable", damit wir Werte darin brauchen.

01:12:28Sie dürfen nicht null sein.

01:12:30Okay.

01:12:31Also müssen wir das wahrscheinlich ausführen.

01:12:34Ja.

01:12:34Der "up"-Teil läuft, um es zu erstellen.

01:12:36Der "down"-Teil läuft, um die Tabelle zu löschen.

01:12:39Das Kommentar-Model erstellen.

01:12:40Lass uns das Kommentar-Model erstellen.

01:12:43Also, los.

01:12:45Lass mich tatsächlich den Entwicklungsserver stoppen.

01:12:47Denn wir müssen ihn sowieso neu starten, damit er diese Änderungen übernimmt, nehme ich an.

01:12:51Also, lass uns noch ein Model erstellen.

01:12:53Das Kommentar-Model.

01:12:54Genau wie vorher.

01:12:56Habe eine neue Migrationsdatei.

01:12:57Habe eine neue.

01:13:01Wo ist sie?

01:13:02Das neue Model.

01:13:03Kommentar-Model hier.

01:13:04Und in der Migrationsdatei.

01:13:06Wieder das Grundgerüst.

01:13:09Und was fügen wir hier hinzu?

01:13:10Nur eine Zeile, wie es scheint, für...

01:13:13Den Inhalt.

01:13:18Okay.

01:13:21Und jetzt können wir sie ausführen, um sie auf die Datenbank anzuwenden und die Tabellen hinzuzufügen.

01:13:27Sieht gut aus.

01:13:29Und jetzt mal sehen.

01:13:31Den Entwicklungsserver wieder zu starten funktioniert.

01:13:35Und jetzt ist dieser Fehler hier auch weg.

01:13:36Weil durch die Anwendung der Migrationen im Hintergrund wahrscheinlich diese Typen erstellt wurden.

01:13:47Ja.

01:13:48Die "database/schema.ts" wurde damit aktualisiert.

01:13:51Das ist also hier im Datenbankordner unter "schema.ts".

01:13:56Diese Datei wird also im Grunde für uns verwaltet.

01:13:58Sie enthält jetzt die Schemata, die für uns von Adonis erstellt wurden.

01:14:02Durch diesen Ace-Befehl am Ende.

01:14:04Vielen Dank für deine Antwort, Max.

01:14:11Ich habe mehrere deiner Kurse gekauft.

01:14:12Es hat mir in meiner Karriere als Softwareentwickler sehr geholfen.

01:14:16Ja.

01:14:17Vielen herzlichen Dank.

01:14:18Vielen herzlichen Dank, dass du an den Kursen teilnimmst und für die sehr netten Worte.

01:14:21Ich freue mich riesig zu hören, dass der Inhalt hilfreich war.

01:14:24Und dass ich ein kleiner Teil deiner Karriere sein konnte.

01:14:27Vielen, vielen Dank.

01:14:31Lass uns also sehen, wie wir Beziehungen hinzufügen können.

01:14:33Denn offensichtlich wollen wir eine Beziehung zwischen unseren Kommentaren und unseren Posts.

01:14:37Wir möchten, dass jeder Post potenziell einen oder mehrere Kommentare hat.

01:14:44Und jeder Kommentar gehört zu genau einem Post.

01:14:47Es ist also eine Eins-zu-viele-Beziehung.

01:14:54Kommentare gehören zu Posts und Posts gehören zu Benutzern.

01:14:57Ja, stimmt.

01:14:57Das brauchen wir auch.

01:14:58Erstelle eine Migration für Fremdschlüssel.

01:15:01Der folgende Befehl erstellt eine neue Migrationsdatei, die unsere bestehenden Tabellen ändert.

01:15:04Okay, mal sehen.

01:15:06Was macht das?

01:15:09Migration erstellen: Fremdschlüssel hinzufügen.

01:15:11Okay, das ist also nur eine zusätzliche Migrationsdatei.

01:15:13Vorher hatten wir Models, die mit einer Migrationsdatei kommen.

01:15:16Jetzt verwenden wir nur eine Migrationsdatei.

01:15:22Weil wir kein Model und keine Klasse brauchen.

01:15:25Aber wir wollen eine Migration, die es uns erlaubt, die Datenbankeinrichtung im Wesentlichen anzupassen und einige, entschuldigung, einige neue Spalten zu einigen der Tabellen hinzuzufügen.

01:15:40Und was wir tun wollen, ist, Spalten für die Einrichtung dieser Beziehungen hinzuzufügen, denn Beziehungen in einer SQL-Datenbank werden natürlich einfach dadurch ausgedrückt, dass man Spalten hinzufügt, bei denen man sagt: Dieser Kommentar hat diese User-ID und diese Post-ID und so weiter.

01:15:53Lass mich das also kopieren.

01:15:55Lass mich das also kopieren.

01:15:56Das sind die Fremdschlüssel für Posts.

01:16:00Ist es das, was ich erstellt habe?

01:16:05Fremdschlüssel hinzufügen.

01:16:11Warte eine Sekunde.

01:16:22Oh, jetzt wird es.

01:16:23Habe ich es nicht ausgeführt?

01:16:25Nein, es ist dieses hier.

01:16:28Okay, es hat nur einen anderen Dateinamen.

01:16:31Nun, das ist okay.

01:16:34Also fügen wir es ein.

01:16:35Was machen wir?

01:16:37Wir sagen in einer Post-Tabelle, wir fügen eine "user_id"-Spalte hinzu, die vom Typ Integer, "unsigned", nur positive Werte, ist.

01:16:45Sie ist nicht "null".

01:16:45Und wir richten diese Fremdschlüsselbeziehung ein.

01:16:48Und wenn der Benutzer gelöscht würde, löschen wir auch die Posts.

01:16:51Für den Kommentar verlinken wir ihn auch mit Benutzern, aber auch mit Posts, denn jeder Kommentar gehört natürlich zu einem Post.

01:16:58Und dann haben wir die "down"-Migrationen, um sie im Grunde rückgängig zu machen.

01:17:01Okay.

01:17:03Führe sie aus.

01:17:07Führe sie aus.

01:17:11Entwicklungsserver startet.

01:17:13Und Beziehung im Post-Model definieren.

01:17:15Jetzt, wo die Datenbank Fremdschlüsselspalten hat, lass uns das Model aktualisieren, um diese Beziehungen zu definieren.

01:17:20Ich kopiere das also.

01:17:22Gehe zu meinem Post-Model, das derzeit im Grunde leer ist, und füge das ein.

01:17:27Und jetzt deklarieren wir darin, in dieser Klasse, diese Beziehung, indem wir im Grunde eine "comments"-Eigenschaft hinzufügen, die keinen Wert hat, aber wir fügen diesen Decorator hinzu.

01:17:43Wir fügen also nur die Eigenschaft hinzu, um einen Decorator hinzufügen zu können, weil es so aussieht, als würden wir in Adonis Beziehungen über Decorators einrichten, die von Adonis bereitgestellt werden, und sagen: Ein Post hat viele Kommentare und gehört zu einem Benutzer.

01:17:57Und das ist etwas, ich glaube, es ist irgendwie die gleiche Ausdrucksweise in Laravel.

01:18:02Also ziemlich leicht zu lesen und zu verstehen.

01:18:05Dieser Teil könnte ein bisschen seltsam sein, dass wir einfach eine Variable deklarieren, nur eine Eigenschaft deklarieren.

01:18:11Und wir brauchen "declare", weil wir ohne es einige Probleme mit TypeScript bekommen, dass es keinen Anfangswert hat.

01:18:18Mit "declare" bekommen wir das nicht.

01:18:20Also, das ist das.

01:18:22Und wir brauchen auch Beziehungen im Kommentar-Model.

01:18:26Lass uns das also dort einfügen.

01:18:28Und hier sagen wir im Grunde: Ein Kommentar gehört zu einem Post, er gehört zu einem Benutzer.

01:18:31Also hast du "has" und "belong", je nachdem, von welcher Seite du es betrachtest.

01:18:36Und du richtest immer beide ein.

01:18:39Okay.

01:18:40Jetzt haben wir das.

01:18:41Wir haben das inverse "has many" nicht zum User-Model hinzugefügt, weil wir es in diesem Tutorial nicht brauchen.

01:18:46Du könntest sie später hinzufügen, wenn deine Anwendung Posts oder Kommentare von der Benutzerseite abfragen muss.

01:18:51Okay.

01:18:52Es sieht so aus, als würden wir in diesem Tutorial nie nach allen Posts eines Benutzers suchen.

01:18:58Also müssen wir die Beziehungen nicht einrichten, aber wir müssten sie einrichten, wenn wir nach allen Posts eines Benutzers suchen wollten.

01:19:04Aber es sieht so aus, als würden wir hier nur nach allen Posts suchen und einfach nur anzeigen wollen, zu welchem Benutzer sie gehören.

01:19:16Mann, dieses Framework sieht aus wie das Baby von Angular und Nest.

01:19:20Ich schätze, große und komplexe Frameworks sind heutzutage immer noch relevant.

01:19:24Also, ich denke, dieses Framework könnte theoretisch ziemlich, ziemlich großartig sein, weil so viel Zeug eingebaut ist.

01:19:30Und es sieht anfangs definitiv ein bisschen überwältigend aus, schätze ich.

01:19:33Aber der riesige Vorteil ist, dass man im Grunde nichts hinzufügen muss.

01:19:39Nicht gar nichts, aber man muss nicht viel Zeug hinzufügen, und für viele Apps muss man wahrscheinlich gar nichts hinzufügen, damit das für eine breite Palette von Anwendungen funktioniert.

01:19:48Ich meine, ich bin ein großer Fan von Next.js, Tanstack, Start, und ich habe AdonisJS noch nie zuvor benutzt.

01:19:54Ich kann dir also nicht sagen: Hey, es ist großartig, bitte benutze es, oder?

01:19:56Ich habe es selbst nicht benutzt.

01:19:58Aber natürlich, wann immer du Next.js oder Tanstack oder was auch immer benutzt, Angular-Zeug, musst du immer für die Authentifizierung eine zusätzliche Bibliothek hinzufügen.

01:20:07Für Datenbank-Sachen musst du zusätzliche Bibliotheken hinzufügen, potenziell ein ORM, Prisma, was auch immer.

01:20:14Du musst also all diese Bibliotheken zusammenstückeln, und besonders heutzutage mit Supply-Chain-Angriffen kann das nervig sein.

01:20:21Und sogar schon davor, mit Wartung und so.

01:20:23Also, theoretisch sollte das großartig sein, ja.

01:20:26Du arbeitest ohne KI, fühlst dich gut und nostalgisch zugleich.

01:20:30Oh, ja.

01:20:31Hat ein nostalgisches Gefühl.

01:20:33Nun, offensichtlich benutze ich hier keine KI, weil ich verstehen will, wie es funktioniert und was hier los ist.

01:20:38Und ich finde das wichtig, wenn du etwas Neues lernst, sogar in diesen Tagen.

01:20:42Es wäre auch kein unterhaltsamer Live-Stream, wenn es einfach so dahingecodet würde.

01:20:47Und ja, mit "Vibe Coding" kommt man sowieso nur so weit.

01:20:52Jetzt, wo unsere Models und Datenbanktabellen bereit sind, müssen wir sie mit Dummy-Daten für Entwicklung und Tests füllen.

01:20:57Factories fungieren als Baupläne für die Erstellung von Model-Instanzen, die mit realistischen Fake-Daten gefüllt sind.

01:21:03Du definierst den Bauplan einmal.

01:21:04Okay.

01:21:05Wir wollen also eine Post-Factory erstellen, um einige Fake-Posts auszuspucken.

01:21:10Also führen wir den "make factory"-Befehl aus.

01:21:14Das gibt uns eine Post-Factory-Datei, in der wir jetzt im Grunde definieren, wie wir Posts generieren wollen, schätze ich.

01:21:21Lass uns das also hier reinkopieren und einen Blick darauf werfen.

01:21:25Wir sagen also, wir wollen einen Fake-Post erstellen.

01:21:30Wir haben eine Reihe von Titeln, aus denen dieses Faker-Tool auswählen kann, wenn es Posts generiert.

01:21:37Und eine erfundene URL und ein paar erfundene Lorem-Ipsum-Absätze, die es hinzufügen sollte.

01:21:45Einfach eine programmatische Art, schnell einige Fake-Daten hinzuzufügen.

01:21:48Offensichtlich könnten wir heutzutage dafür auch KI benutzen.

01:21:51Aber lass uns "old school" und billiger bleiben, weil keine Tokens.

01:21:56Lass uns auch eine Kommentar-Factory erstellen.

01:22:02Hier sind wir.

01:22:03Und kopieren wir den Code hier hinein.

01:22:06Und hier geben wir einfach einen Lorem-Ipsum-Platzhalter-Absatz aus.

01:22:11Und jetzt brauchen wir einen Seeder.

01:22:12Wir haben also jetzt die Factory, die Fake-Daten ausspucken kann.

01:22:15Aber was wollen wir mit den Fake-Daten machen?

01:22:17Wir wollen sie in die Datenbank bekommen.

01:22:19Und dafür ist ein Seeder da.

01:22:23Wir wollen also einen erstellen.

01:22:24Und das sind allgemeine Konzepte.

01:22:26Factory-Seeder.

01:22:27Die kennt man nicht nur aus Adonis.

01:22:28Man kennt sie aus Laravel.

01:22:29Oder man könnte diese Konzepte in jedem Setup verwenden.

01:22:37Auch in einer XJS-Anwendung hat man vielleicht eine Datenbank, die man mit Daten befüllen möchte.

01:22:41Die Node-ACE-Befehle sind natürlich Adonis-spezifisch.

01:22:45Aber jetzt erstellen wir einen Seeder.

01:22:47Und schauen wir uns den Post-Seeder an.

01:22:49Das ist also eine Datei, die wir ausführen können, um anfängliche Daten in die Datenbank zu schieben.

01:22:54Und deshalb müssen wir definieren, was wir darin tun wollen.

01:22:57Ich vermute, wir wollen hier ein paar Dummy-Posts und Kommentare erstellen, sie miteinander verbinden und dann etwas ausführen, um sie in die Datenbank zu bekommen.

01:23:07Wie auch immer das in Adonis aussieht.

01:23:10Also fügen wir es ein und schauen es uns an.

01:23:13Wir verwenden also “find or fail”.

01:23:17Wir versuchen also, einen Benutzer zu finden.

01:23:19Und das sollte fehlschlagen.

01:23:21Weil es nicht so aussieht, als würde es einen erstellen, und wir haben diesen Benutzer nicht.

01:23:25Wir versuchen also, den Benutzer zu finden.

01:23:26Wir werden ihn erstellen müssen.

01:23:28Dann führen wir diesen Benutzer zusammen.

01:23:33Und wir erstellen viele neue Posts und verknüpfen sie im Grunde mit diesem Benutzer mit diesem Befehl.

01:23:37Und dann erstellen wir für jeden dieser Posts ein paar Dummy-Kommentare, die wir dann ebenfalls mit diesem Post und diesem Benutzer verbinden.

01:23:46Und wir erstellen eine zufällige Anzahl von Kommentaren plus drei.

01:23:51Also mindestens drei Kommentare, aber insgesamt bis zu sechs Kommentare für jeden Post.

01:24:02Also zwischen drei und sechs Kommentaren.

01:24:06Zuerst holen wir einen Benutzer mit dieser E-Mail-Adresse.

01:24:09Das ist der Benutzer, den wir im letzten Kapitel erstellt haben.

01:24:12Also werde ich diesen Benutzer selbst erstellen.

01:24:15Lass mich das kurz tun.

01:24:19Lass uns das bereitstellen.

01:24:23Nun, ich habe noch nicht versucht, den Seeder auszuführen.

01:24:26Das sollte also funktionieren.

01:24:27Aber das ist falsch.

01:24:28Lass mich kurz anmelden.

01:24:34Ja, ja, ja.

01:24:36Nein, nicht das.

01:24:37Lass uns...

01:24:39Ich werde...

01:24:44Okay.

01:24:45Ich werde also eine andere E-Mail-Adresse verwenden.

01:24:47Natürlich werde ich...

01:24:50test@example.com verwenden.

01:24:52Okay.

01:24:53Das haben wir also.

01:25:02Ja, bitte mach weiter.

01:25:03Solche Streams.

01:25:03Wir mögen sie.

01:25:04Ja, ich möchte sie auf jeden Fall fortsetzen.

01:25:06Und übrigens, mein Plan ist es, jeden Donnerstag einen Stream wie diesen zu machen.

01:25:13Nächste Woche werde ich es nicht schaffen.

01:25:16Da habe ich andere Termine.

01:25:18Aber generell jeden Donnerstag um diese Zeit, also ab 17:00 Uhr mitteleuropäischer Sommerzeit, das ist mein Plan.

01:25:26Also für mich sieht es so aus, als ob Anthropic wirklich ihre eigenen Tools pushen will.

01:25:40Sie wollen Claude Code pushen und sonst nichts.

01:25:42Sie wollen die Leute dort einschließen.

01:25:43Wir werden sehen.

01:25:45Ich bin nicht sehr zuversichtlich, dass wir Claude in allen möglichen anderen Tools verwenden können.

01:25:51Zumindest nicht mit dem Abonnement, das für Tokens zahlt.

01:25:55Das wird wahrscheinlich möglich sein, weil man dann einfach die API nutzt.

01:25:58Aber das ist natürlich auch super teuer.

01:26:02Lass uns jetzt den Seeder ausführen.

01:26:06Beende diesen Server.

01:26:09Führe es aus.

01:26:10Und das hat jetzt die Dummy-Daten erstellt.

01:26:12Und wir sollten in der Lage sein, sie bereits zu sehen, auch ohne dass die App fertig ist.

01:26:17In der Datenbank können wir Tabellen für Posts und Kommentare sehen.

01:26:21In der Benutzertabelle habe ich meinen Benutzer.

01:26:23Und in der Post-Tabelle haben wir hier einige Dummy-Posts.

01:26:27Und in der Kommentartabelle haben wir einige Dummy-Kommentare.

01:26:33Und jeder Kommentar ist mit einem bestimmten Benutzer und einer Post-ID verknüpft.

01:26:36Natürlich haben wir hier nur einen Benutzer.

01:26:38Sie sind also alle mit diesem einen Benutzer verknüpft.

01:26:40Das war es, was wir im Seeder geschrieben haben.

01:26:41Und bei den Posts sehen wir hier, wir haben einen Post mit, was ist das, fünf Kommentaren.

01:26:47Hier haben wir einen mit drei Kommentaren und so weiter.

01:26:50Das stimmt also mit dem überein, was wir geschrieben haben.

01:26:52Okay.

01:26:53Ich verstehe also, was wir hier gemacht haben.

01:26:55Das Abfragen von Daten mit der REPL wird das nicht tun.

01:26:57Wir haben bereits gesehen, dass es da ist.

01:27:00Aber ja.

01:27:01Aber wir schauen uns den Code hier an.

01:27:02Das Interessante ist natürlich, dass man bei diesem modellbasierten Ansatz keine SQL-Abfragen oder so etwas schreibt.

01:27:10Stattdessen nutzt man sein Modell oder greift auf alle Modelle zu.

01:27:17Und dann dein Modell, und das existiert, weil wir ein Modell mit diesem Namen registriert haben.

01:27:20Und dann kann man Methoden wie “all” verwenden, um alle Posts zu erhalten.

01:27:24Oder, wie wir hier sehen, kann man Abfragen schreiben, bei denen man eine Where-Klausel hat, um die Anzahl der Posts zu begrenzen.

01:27:30Und so funktioniert ein ORM.

01:27:32Man fragt seine Daten programmatisch ab und schreibt keine SQL-Anweisungen.

01:27:37Nun, um ehrlich zu sein, ich bin kein großer Fan von ORMs, oder ich habe nichts gegen sie, aber ich verwende sie normalerweise nicht.

01:27:46Und besonders heutzutage, mit KI, finde ich es einfacher denn je, rohe SQL-Abfragen zu schreiben.

01:27:52Deshalb verwende ich normalerweise rohe SQL-Abfragen in meinen Anwendungen.

01:27:58Ich verwende keine ORMs.

01:28:00Weil man natürlich die volle Kontrolle hat, wenn man rohe Abfragen schreibt.

01:28:06Und selbst vor der KI waren viele Abfragen gar nicht so schwierig, um ehrlich zu sein.

01:28:10Selbst mit Joins ist das nicht so schwer.

01:28:13Und natürlich können SQL-Abfragen ziemlich komplex werden und die KI kann Fehler machen.

01:28:18Aber meiner Erfahrung nach ist sie bei den meisten Abfragen ziemlich gut, auch bei komplexeren.

01:28:22Das sind also nur meine zwei Cent.

01:28:24Aber hier verwenden wir das ORM, also bleibe ich dabei.

01:28:29Routen, Controller und Views.

01:28:32Im letzten Kapitel haben wir die Post- und Kommentar-Modelle mit ihren Datenbanktabellen und Beziehungen erstellt.

01:28:37Jetzt erwecken wir diese Modelle zum Leben, indem wir Seiten erstellen, auf denen Benutzer tatsächlich Posts sehen können.

01:28:46Deine Posts und Kommentare existieren nur in der Datenbank.

01:28:49Der Server ist bereits oben.

01:28:52Wir wollen also jetzt einen neuen Controller erstellen.

01:28:54Und die Idee bei diesem Framework, so wie ich es verstehe, ist, dass man eine Route, einen Controller und eine View hat.

01:29:02Also das gute alte MVC, falls sich jemand von euch daran erinnert.

01:29:07Model-View-Controller.

01:29:09Es ist eine ziemlich alte Art, seine Anwendungen zu strukturieren, nicht nur Webanwendungen.

01:29:18Aber alt heißt nicht schlecht, nur um das ganz klar zu sagen.

01:29:24Aber man sieht es eigentlich nicht in all diesen Next.js-Anwendungen und so weiter, schätze ich.

01:29:30Also ja.

01:29:31Lass mich in einem anderen Tab ausführen, einen neuen Post-Controller erstellen.

01:29:38Hier ist er, eine leere Datei, und darin registrieren wir jetzt Methoden, die dann definieren, was in vier verschiedenen Routen passieren wird.

01:29:44Auch hier kopiere ich das, um etwas Zeit zu sparen.

01:29:47Und was wir hier haben, ist eine Index-Methode.

01:29:52Wir bekommen hier etwas HTTP-Kontext, was, wieder, das Ding ist, das uns alle möglichen Daten gibt.

01:29:57Und eigentlich müssen wir das anpassen, weil das hier für... ich muss Inertia verwenden.

01:30:05Ich muss Inertia verwenden, und natürlich müssen wir diese Komponente hinzufügen.

01:30:09Aber was wir hier tun, ist, wir verwenden unsere Post-Klasse, also aus unserer Modell-Datei, richtig?

01:30:16Also hier, die Post-Klasse, die wir zuvor definiert haben.

01:30:20Und dann, wieder, das ist das ORM in Aktion, wo wir eine Abfrage erstellen.

01:30:24Das Vorladen des Benutzers ist wahrscheinlich da, damit wir es einmal laden und dann nicht wieder für jeden Post, den wir abrufen, nehme ich an.

01:30:32Und dann sortieren wir die Posts natürlich nach Erstellungsdatum, absteigend.

01:30:38Der erste Post ist also der jüngste, der aktuellste.

01:30:45Wir rendern also, und deshalb müssen wir das hinzufügen.

01:30:53Die Route definieren.

01:30:56Also, jetzt müssen wir, ja, gut, die Route ist, dass wir zu “start routes” gehen.

01:31:03Und hier haben wir es hinzugefügt.

01:31:07Wir könnten es natürlich überall hinzufügen.

01:31:10Und warum funktioniert das nicht?

01:31:12Warum funktioniert das nicht?

01:31:13Muss ich den Dev-Server neu starten oder so etwas?

01:31:16Hoppla, das ist falsch.

01:31:18Oh, ich hatte den Dev-Server nicht am Laufen.

01:31:21Das ist mein Fehler.

01:31:22Also, jetzt lassen wir ihn hochfahren, und dann hoffentlich, ja.

01:31:25Jetzt wird das automatisch erstellt.

01:31:26Adonis erstellt also im Grunde eine Menge Typdefinitionen im laufenden Betrieb.

01:31:31Also, jetzt ist das hier.

01:31:34Wir sagen Adonis, dass wir für Anfragen, GET-Anfragen an /posts,

01:31:40die Index-Methode im Posts-Controller auslösen wollen.

01:31:43Und das ist natürlich diese Methode.

01:31:47Jetzt brauchen wir die View.

01:31:50Und wir können eine neue View erstellen.

01:31:53Ich weiß nicht, ob das der richtige Befehl ist, wenn ich eine Inertia-View haben möchte.

01:31:56Also schauen wir mal.

01:31:59Ich kann “node ace list” ausführen, um zu sehen, was ich machen kann.

01:32:04Ich kann also eine View erstellen, aber das ist eine Edge.js-Template-Datei.

01:32:08Das will ich nicht.

01:32:11Vielleicht muss ich sie von Hand erstellen.

01:32:20Sieht so aus, als müsste ich sie von Hand erstellen, aber das sollte nicht allzu schwierig sein.

01:32:24Also gehen wir zu “inertia pages”.

01:32:29Dort würde ich jetzt “posts” hinzufügen.

01:32:31Und darin eine index.js-Datei hinzufügen, richtig?

01:32:34Und dann exportiere ich eine Standardfunktion.

01:32:38Und ich nenne sie “posts”.

01:32:41Und ich sage so etwas wie “meine Posts”.

01:32:44Also nur eine normale React-Komponente.

01:32:50Jetzt ist dieser Fehler hier weg.

01:32:51Weil ich dieses Ding jetzt hinzugefügt habe, richtig?

01:32:55Ich habe also einen Posts-Ordner mit einer index.js-Datei hinzugefügt.

01:32:58Und genau das habe ich hier gesagt.

01:32:59So ist das also verknüpft.

01:33:02Und dort, für den Moment natürlich, mit dem laufenden Entwicklungsserver,

01:33:05kann ich hierher gehen, /posts eingeben, und ich sehe hier meine Posts.

01:33:09Das funktioniert also.

01:33:10Und jetzt müssen wir natürlich nur noch die Daten vom Controller in diese Komponente bekommen.

01:33:20Und eigentlich machen wir das hier schon, vermute ich, als Props.

01:33:23Die Frage ist also, ob wir das hier bekommen.

01:33:30Also, wie mache ich...

01:33:33Oh, nein, ich glaube, wir müssen “children” verwenden.

01:33:36Wie funktioniert das in der anderen Datei hier?

01:33:40Haben wir irgendeine Datei, in der wir Daten übertragen?

01:33:45Haben wir nicht.

01:33:46Wir haben nicht, haben nicht, haben nicht, haben nicht.

01:33:50Im Layout, oder?

01:33:52Children.

01:33:54Ich nehme also an, das ist das, was ich brauche.

01:33:58Aber das habe ich noch nie gemacht.

01:34:00Wir müssen das also herausfinden.

01:34:19Ist das nicht das, was wir hier haben?

01:34:23Oh, ja, mein Fehler, mein Fehler, mein Fehler.

01:34:25Das ist natürlich kein gültiger TypeScript-Code.

01:34:27Das sollte so sein.

01:34:30Okay.

01:34:30Wir müssen also diese Imports hinzufügen.

01:34:36Importieren.

01:34:38Ich nehme also an, das ist korrekt.

01:34:40Ist das das, was wir hier haben?

01:34:41Daten generierte Daten.

01:34:42Ja.

01:34:43Okay.

01:34:45Okay.

01:34:45Also, schauen wir mal.

01:34:46Können wir hier so ein Fragment hinzufügen?

01:34:50Und dann so etwas machen.

01:34:54Children.

01:34:57Props.

01:34:59Hmm.

01:35:02User.

01:35:03Ja, vielleicht sind das nicht die Share-Props.

01:35:04Wie bekomme ich die?

01:35:06Ich muss wahrscheinlich in die...

01:35:10Mal sehen.

01:35:11Ich muss wahrscheinlich in die Dokumentation für Inertia schauen.

01:35:15Guides.

01:35:17Wo ist hier Inertia?

01:35:19Wie bekomme ich Props in meine Komponenten?

01:35:24Ich brauche.

01:35:25Brauche ich einen Transformer?

01:35:29Verwende einen Transformer, um Modellinstanzen in einfache Objekte zu serialisieren.

01:35:33Verstanden.

01:35:34Verstanden.

01:35:35Verstanden.

01:35:37Okay.

01:35:37Also, was ich jetzt mache, ist, ich schummle ein wenig.

01:35:40Ich hole hier etwas KI dazu.

01:35:44Ähm.

01:35:48Ich baue eine Adonis-JS-App.

01:35:51JS-App.

01:35:53Ich muss meine Beiträge abrufen.

01:35:56Siehe.

01:35:57Beitrags-Controller.

01:36:02In mein Posts-Inertia.

01:36:04Hoppla.

01:36:05Ich sehe, dass das für dich nicht lesbar ist.

01:36:10Okay.

01:36:10Okay.

01:36:10Warte mal kurz.

01:36:18Okay.

01:36:18Ich baue eine Adonis-JS-App.

01:36:20JS-App.

01:36:21Ich muss meine Beiträge abrufen.

01:36:24Von meinem Beitrags-Controller.

01:36:27Hinzufügen.

01:36:28Hoppla.

01:36:28Beiträge hinzufügen.

01:36:30Controller.

01:36:32In meine Beiträge.

01:36:35Ansicht.

01:36:35Inertia.

01:36:37Ansicht.

01:36:39Das ist also der Index im Ordner “Beiträge” hier.

01:36:45Und ich werde einfach auf diese Seiten verlinken.

01:36:48Bitte schau es dir an.

01:36:50Und.

01:36:56Um mir dabei zu helfen.

01:36:59Und mal sehen, ob es das herausfinden kann.

01:37:03Ähm.

01:37:03ORMs sind gut für Schema-Transformationen und Zusammenarbeit.

01:37:07Ähm.

01:37:08Ja.

01:37:09Und wieder.

01:37:09Ich sage nicht.

01:37:10ORMs sind schlecht.

01:37:11Nur.

01:37:11Nur nicht das, was ich persönlich für mein Projekt brauche.

01:37:14Aber andererseits.

01:37:14Ich arbeite nicht in großen Teams oder so etwas.

01:37:18Ähm.

01:37:18Ich.

01:37:19Ich sage definitiv.

01:37:20Dass ich.

01:37:21Dass ich Migrations benutze.

01:37:23Also.

01:37:23Es ist nicht so.

01:37:24Dass ich.

01:37:25Keine Migrations benutze.

01:37:26Oder irgendetwas Ähnliches.

01:37:27Ähm.

01:37:28Ich schreibe sie nur.

01:37:29Ich schreibe sie selbst.

01:37:30Oder habe.

01:37:31LLMs schreiben sie.

01:37:32Migrations sind also sehr nützlich.

01:37:34Ich brauche nur den ORM-Teil nicht.

01:37:36Ich habe mich gefragt.

01:37:36Dich zu fragen über.

01:37:37Wipe-Coding.

01:37:38Ob das gut ist oder nicht.

01:37:39Ich glaube nicht.

01:37:40Wipe-Coding.

01:37:41Ist gut für.

01:37:42Irgendetwas Ernstes.

01:37:43Aber.

01:37:44Wipe-Coding.

01:37:44Ist definitiv sehr gut.

01:37:45Wenn du nur ein.

01:37:46Schnelles.

01:37:47Utility-Tool brauchst.

01:37:48Oder wenn du nur.

01:37:48Einen Job erledigen musst.

01:37:50Richtig.

01:37:50Wenn du Software baust.

01:37:51Die du verkaufst.

01:37:52Wenn du.

01:37:53An etwas Ernsthaftem arbeitest.

01:37:55Das du verteilen willst.

01:37:56Oder in deinem Job.

01:37:57Wipe-Coding.

01:37:58Lässt dich einfach.

01:37:59Den Überblick verlieren.

01:38:00Du verstehst nicht.

01:38:01Was in der Codebasis vor sich geht.

01:38:02Und irgendwann.

01:38:03stößt du an eine Mauer.

01:38:04Und du wirst.

01:38:04Nicht wissen, wie es weitergeht.

01:38:06Also.

01:38:07Sich nicht um den Code zu kümmern.

01:38:08Ist keine gute Lösung.

01:38:09Für.

01:38:09Für solche Situationen.

01:38:11Aber andererseits.

01:38:11Wenn du nur.

01:38:13Ähm.

01:38:13Ein schnelles.

01:38:15Tool brauchst.

01:38:16Das du auf deiner Maschine ausführst.

01:38:17Oder irgendetwas Ähnliches.

01:38:18Muss dich das vielleicht nicht interessieren.

01:38:19Ähm.

01:38:20All die.

01:38:21All die Details.

01:38:23Und so weiter.

01:38:24Also ja.

01:38:25Wipe-Coding kann da gut sein.

01:38:26Und ja.

01:38:26Live-Coding ist immer.

01:38:28Immer eine Herausforderung.

01:38:29Aber wir werden sehen, ob die KI es herausfinden kann.

01:38:31Sie scheint hier gegen einige Linting-Fehler anzukämpfen.

01:38:36Aber ja.

01:38:38Ich verwende einfach KI.

01:38:40Übrigens.

01:38:40Normalerweise würde ich hier eintauchen.

01:38:41Und es selbst bauen.

01:38:44Aber ich muss in 20 Minuten weg.

01:38:47Und ich habe lieber jetzt den fertigen Code.

01:38:49Und arbeite mich da durch.

01:38:51Und jetzt.

01:38:52Damit wir danach auch hier weitermachen können.

01:38:54Das ist der Hauptgrund.

01:38:56Also okay.

01:38:56Jetzt hat sie hier etwas gemacht.

01:38:58Und schauen wir mal, ob es funktioniert.

01:39:00Bevor ich anfange, es zu erklären.

01:39:02Und dann schauen wir, was sie gemacht hat.

01:39:04Aber es sieht gut aus.

01:39:05Das Styling ist absolut schrecklich.

01:39:07Aber wie wir sehen können.

01:39:10Ich habe hier eine Reihe von Beiträgen, die gerendert werden.

01:39:12Und ich kann sehen, dass sie mit meinem Benutzer verknüpft sind.

01:39:16Also.

01:39:17Das Senden der Daten vom Controller.

01:39:19Scheint zu funktionieren.

01:39:19Also schauen wir jetzt.

01:39:20Wie es funktioniert.

01:39:22Und wieder.

01:39:22Ich habe ihr die Links zur offiziellen Dokumentation gegeben.

01:39:24Also ist das einfach.

01:39:28Das ist einfach.

01:39:31Was uns die Dokumentation gelehrt hätte.

01:39:34Also im Beitrags-Controller.

01:39:36Wir holen die Beiträge.

01:39:38Das Einzige, was sich hier geändert hat.

01:39:39Ist im Grunde.

01:39:40Dass wir.

01:39:41Unsere Beiträge übergeben.

01:39:42Aber nicht so roh wie hier.

01:39:43Sondern stattdessen.

01:39:44Mit Hilfe eines Beitrags-Transformers.

01:39:45Das ist ein neues Ding, das hinzugefügt wurde.

01:39:47Diese Datei ist also neu.

01:39:48Beitrags-Transformer.

01:39:50Und das ist eine Klasse.

01:39:51Die den Basis-Transformer erweitert.

01:39:53Okay.

01:39:53Und darin.

01:39:54Beschreiben wir einfach.

01:39:55Wie ein Beitrag serialisiert wird.

01:39:56Wir sagen also.

01:39:57Hey.

01:39:58Wähle all diese Eigenschaften aus.

01:40:01Und.

01:40:02Für den Benutzer.

01:40:03Transformiere auch den Benutzer.

01:40:04Also im Grunde.

01:40:05Ich meine in diesem Fall.

01:40:06Die Umwandlung sollte ziemlich einfach sein.

01:40:08Sie nimmt wahrscheinlich einfach nur

01:40:11das ISO-

01:40:12Format.

01:40:13Datum hier.

01:40:14Und die anderen Rohdaten

01:40:15können gepackt werden

01:40:16in ein JavaScript-Objekt.

01:40:17Wie dieses.

01:40:18Also beschreibt es

01:40:19im Grunde

01:40:20wie man die Klasse umwandelt,

01:40:21die Dinge enthalten kann,

01:40:21die möglicherweise nicht einfach

01:40:23in JSON umgewandelt werden können.

01:40:25Wie man das

01:40:26in JSON umwandelt,

01:40:27das ist

01:40:28die Aufgabe des Transformers,

01:40:28so wie ich es verstehe.

01:40:30Okay.

01:40:33Okay.

01:40:33Also setzen wir die Posts hier.

01:40:34Und jetzt,

01:40:35in der View.

01:40:40In der View

01:40:41holen wir die Page.

01:40:42Okay.

01:40:43Wir richten einfach

01:40:43Page-Props so ein.

01:40:44Okay.

01:40:45Wir richten einfach

01:40:46einen Props-Typ ein,

01:40:47einen TypeScript-Typ,

01:40:48unter Verwendung von Inertia-Props

01:40:51statt

01:40:51irgendwelcher generierten Typen.

01:40:54Oder tat

01:40:55DAI

01:40:56das hinzufügen.

01:40:57Ich nehme an,

01:40:58es sind einige

01:40:58Standard-Typen,

01:41:00nicht

01:41:00von der KI generiert.

01:41:02Und

01:41:02wir sagen einfach:

01:41:03Okay.

01:41:03Hey,

01:41:04hier

01:41:04haben wir einen Post-Key.

01:41:06Und

01:41:06das ist

01:41:07vom Typ.

01:41:08Ja.

01:41:08Also das ist

01:41:09ein automatisch generierter

01:41:10Typ hier

01:41:10für

01:41:11unsere Posts.

01:41:12Und ich nehme an,

01:41:13dieser Typ

01:41:14wird generiert,

01:41:15basierend darauf, wie

01:41:15wir die Posts

01:41:16transformieren.

01:41:17Also Post hier.

01:41:20Dieses Ding

01:41:23Ja,

01:41:24kommt vom Post-Transformer.

01:41:25Exakt.

01:41:27Okay.

01:41:28Und dann können wir sie einfach

01:41:29hier rendern.

01:41:30Das ist nicht allzu schwierig.

01:41:32Verstanden.

01:41:35Okay.

01:41:36Nun noch einmal,

01:41:36das offizielle Tutorial hier

01:41:38nutzt die Edge-View.

01:41:39Also

01:41:39ich benutze Inertia.

01:41:40Und

01:41:41wie ihr seht,

01:41:41ist es am Ende einfach eine React-App,

01:41:43bei der wir dann auch

01:41:44transformieren und

01:41:46unsere

01:41:46Props senden.

01:41:48Okay.

01:41:50Okay.

01:41:53Einen einzelnen Post anzeigen.

01:41:54Ja,

01:41:55sicher.

01:41:55Also jetzt

01:41:55können wir

01:41:56eine weitere

01:41:56Methode hier

01:41:58hinzufügen

01:42:00in unserem

01:42:00Controller.

01:42:01Denn

01:42:02in unserem

01:42:02Post-

01:42:03Controller

01:42:03haben wir im Moment

01:42:04eine Index-

01:42:05Methode

01:42:05für das

01:42:05Anzeigen

01:42:06aller Posts.

01:42:07Aber jetzt

01:42:08wollen wir

01:42:08auch

01:42:08eine Methode

01:42:09für das

01:42:09Anzeigen

01:42:10eines einzelnen

01:42:10Posts

01:42:10hinzufügen.

01:42:11Also

01:42:11fügen wir

01:42:12eine Show-

01:42:12Methode

01:42:12hier hinzu,

01:42:13wie es scheint.

01:42:14Und wieder,

01:42:14diese Namen

01:42:16sind euch überlassen.

01:42:16Und später,

01:42:17wenn ihr sie

01:42:18in der

01:42:18Routen-

01:42:19Datei

01:42:19verbindet,

01:42:19müsst ihr

01:42:20sicherstellen,

01:42:20dass sie übereinstimmen,

01:42:21aber das sehen wir

01:42:21gleich.

01:42:23Also hier

01:42:23bekommen wir einige

01:42:24Params,

01:42:25denn jetzt

01:42:25haben wir

01:42:26eine dynamische

01:42:26Route.

01:42:26Und wieder,

01:42:27das wisst ihr vielleicht

01:42:28von

01:42:28React

01:42:28oder so.

01:42:29Das sind die

01:42:29Routen

01:42:30mit dem

01:42:30mit dem

01:42:31Doppelpunkt.

01:42:31Parameter

01:42:32im

01:42:32Routen-

01:42:33Namen,

01:42:33zum Beispiel,

01:42:34oder die

01:42:34Dollar-

01:42:35Zeichen

01:42:35im

01:42:35Date-

01:42:36Namen.

01:42:37Also hier

01:42:38bekommen wir auch

01:42:38einige

01:42:39dynamische

01:42:39Parameter,

01:42:40und wir werden sehen,

01:42:40wie wir diese Routen

01:42:41registrieren,

01:42:42in einer Sekunde.

01:42:43Und dann

01:42:43erwarten wir,

01:42:44dass wir

01:42:44einen ID-

01:42:45Parameter haben,

01:42:46also suchen wir

01:42:46nach einem Post

01:42:46mit einer bestimmten

01:42:47ID.

01:42:48Wir wollen,

01:42:49dass es fehlschlägt,

01:42:49wenn wir ihn nicht

01:42:50finden,

01:42:50damit wir

01:42:51einen 404-Fehler anzeigen können

01:42:52oder irgendeinen anderen Fehler.

01:42:53Ich nehme an,

01:42:54wir wollen

01:42:55rendern,

01:42:55statt einer View.

01:42:57Stattdessen

01:42:58wollen wir

01:42:58rendern.

01:42:59rendern.

01:43:05Wir wollen.

01:43:05Wir wollen

01:43:06Inertia hier.

01:43:09Und wir nutzen

01:43:10unseren Post-

01:43:11Transformer,

01:43:12um unseren

01:43:13Post

01:43:14an

01:43:17eine Show-

01:43:18Komponente

01:43:18zu übergeben,

01:43:19zum

01:43:20Beispiel.

01:43:20Also, jetzt

01:43:21im Inertia-

01:43:21Ordner,

01:43:22im Post-

01:43:22Ordner,

01:43:23müssen wir

01:43:23die

01:43:24Show.tsx

01:43:24haben,

01:43:25oder

01:43:26Detail.tsx,

01:43:26oder

01:43:26irgendwas

01:43:27in der Art.

01:43:28Und

01:43:29jetzt,

01:43:29darin

01:43:31haben wir

01:43:35unsere

01:43:35unsere

01:43:35Post-

01:43:36Komponente

01:43:36hier.

01:43:38Eigentlich,

01:43:40nennen wir sie

01:43:42Post.

01:43:45Post.

01:43:47So wie das.

01:43:48Und dann,

01:43:49genau wie vorher,

01:43:50werde ich

01:43:50das kurz

01:43:51stehlen.

01:43:55Wir bekommen

01:43:55einen einzelnen Post

01:43:56hier,

01:43:56kein Array.

01:44:00Wähle das aus

01:44:01und dann

01:44:01können wir

01:44:02das zurückgeben.

01:44:05Ja,

01:44:05sicher,

01:44:06der Post-

01:44:06Titel.

01:44:07So wie das.

01:44:11Hallo.

01:44:12Ja,

01:44:12so wie das.

01:44:13Okay.

01:44:16Was machen wir hier?

01:44:17Also,

01:44:19und dann,

01:44:19natürlich,

01:44:19auch

01:44:20die

01:44:21die Post-

01:44:21Zusammenfassung,

01:44:21zum Beispiel.

01:44:22Sicher.

01:44:23Okay,

01:44:23also bekommen wir das.

01:44:24Äh,

01:44:25sollte funktionieren.

01:44:26Jetzt

01:44:27müssen wir es registrieren.

01:44:28Im Routes-Ordner.

01:44:30Also jetzt

01:44:30können wir eine neue

01:44:31Hoppla,

01:44:32GET-Route hinzufügen.

01:44:33Für Slash,

01:44:34für Slash

01:44:35Posts,

01:44:35und dann,

01:44:36ich nehme an,

01:44:37so registrieren wir

01:44:38dynamische Routen.

01:44:39Mal sehen.

01:44:41Ja,

01:44:42mit Doppelpunkt ID.

01:44:44Ziemlich typisch.

01:44:45Und jetzt

01:44:46sagen wir:

01:44:46Hey,

01:44:47in unserem Post-Controller

01:44:48ist es die Show-Methode,

01:44:49die uns interessiert,

01:44:51weil

01:44:52in diesem Controller

01:44:53haben wir diese Methode

01:44:54Show

01:44:54genannt. Wenn ihr hier einen anderen Namen wählt,

01:44:56müssen wir hier auch einen anderen Namen wählen.

01:44:58Aber Show ist der Name, den ich verwende,

01:44:59also sollte das funktionieren.

01:45:02Also,

01:45:05welche Links haben wir hier?

01:45:08Oh,

01:45:08das ist kein Link zu einem Detail,

01:45:10aber wenn ich posts/1 hinzufüge,

01:45:13ja,

01:45:14ich lade.

01:45:15Das Styling ist völlig daneben,

01:45:16aber hier ganz unten

01:45:17können wir den

01:45:18Inhalt sehen.

01:45:19Also,

01:45:20und

01:45:21der Titel,

01:45:22Markdown-Blog-Engine,

01:45:24ist auch hier.

01:45:25Es ist also völlig kaputtes Styling,

01:45:26aber

01:45:27es funktioniert.

01:45:28Wir können diese Route sehen.

01:45:31Und wir könnten natürlich das Styling korrigieren,

01:45:32aber das ist gerade nicht das Wichtigste.

01:45:35Also ja,

01:45:36wir haben die Ansicht.

01:45:37Wir haben das alles bereits.

01:45:39Mit den benannten Routen.

01:45:40Oh, das ist interessant.

01:45:40Ja,

01:45:41momentan hartcodieren wir URLs.

01:45:44Und ich richte eigentlich gar keine Links ein.

01:45:47Also,

01:45:49wenn man einen Controller in der Routendefinition verwendet,

01:45:51generiert Adonis.js automatisch einen Routennamen,

01:45:54basierend auf dem Controller und den Methodennamen.

01:45:56Wenn wir also controllers.posts.index haben,

01:45:58das ist,

01:45:59das bekommt automatisch den Namen posts.index.

01:46:02Ich nehme also an, wir könnten zur

01:46:05Posts-Indexseite gehen, wo wir all diese Posts haben,

01:46:08und anstatt so einen Anchor-Tag zu verwenden,

01:46:11könnten wir

01:46:12die Link-Komponente verwenden,

01:46:13die von inertia.js react kommt.

01:46:17Auch hier.

01:46:18Und dann bin ich nicht sicher,

01:46:19hat sie einen to-Prop

01:46:21oder ist es

01:46:21ref?

01:46:23Und dann könnten wir so etwas sagen wie

01:46:26routes,

01:46:29posts.show.

01:46:34Scheint nicht so zu funktionieren.

01:46:42Posts.show.

01:46:49Ja,

01:46:49ich verwende einen anderen Ansatz.

01:46:50Ich möchte diese Link-Komponente verwenden.

01:46:53Wieder.

01:46:55Haben wir das hier irgendwo?

01:46:57Link-Route.

01:46:59Oh okay.

01:46:59Es ist nur,

01:47:01okay,

01:47:02also ist es link,

01:47:04Route.

01:47:08Warum bekomme ich hier einen Fehler für eine Route?

01:47:11Links erstellen.

01:47:12Die Link-Komponente erstellt Navigationslinks.

01:47:14Oh,

01:47:15der Import ist falsch.

01:47:16Ich muss das importieren von

01:47:20hier,

01:47:20vom Adonis-Paket.

01:47:22Jetzt haben wir Unterstützung für die Route.

01:47:24Jetzt sind es nur posts.

01:47:33Es ist nur ein String.

01:47:34Es ist nur ein String.

01:47:35Okay.

01:47:35Also ist es nur

01:47:37Route.

01:47:38Okay,

01:47:38jetzt bekommen wir hier etwas Autovervollständigung.

01:47:40Und jetzt muss ich die Parameter setzen.

01:47:43Routenparameter.

01:47:45Posts.id.

01:47:48Nein,

01:47:49Post.id.

01:47:53Das muss also ein Objekt sein.

01:47:57Id ist auf post.id gesetzt.

01:48:00Und das wird jetzt dynamisch für jeden Post eine andere Route generieren.

01:48:03Und diesen dynamischen Platzhalter mit der Post-ID füllen, nehme ich an.

01:48:07Wenn ich also jetzt hier neu lade.

01:48:09Nicht hier.

01:48:10Sondern hier.

01:48:14Warum wurde das nicht aktualisiert?

01:48:16Muss ich den Entwicklungsserver neu starten?

01:48:20Oh.

01:48:21Die Datei zu speichern hilft wahrscheinlich auch.

01:48:24Ja.

01:48:24Jetzt kann ich hier klicken und zu diesen Beiträgen navigieren.

01:48:28Das Styling ist natürlich immer noch furchtbar.

01:48:30Aber das funktioniert.

01:48:33Und natürlich.

01:48:34Der Vorteil, hier Routennamen zu verwenden, ist, dass wir den Pfad ändern können,

01:48:38ohne die Links anpassen zu müssen.

01:48:40Solange sich der Routenname nicht ändert.

01:48:42Das ist also natürlich schön zu haben.

01:48:44Nun.

01:48:45Man ändert den Pfad vielleicht nicht allzu oft.

01:48:47Aber trotzdem.

01:48:48Ziemlich nett.

01:48:52Hallo.

01:48:52Es ist kindisch von mir.

01:48:53Und ja.

01:48:55Es ist von Laravel inspiriert.

01:48:57Es ist absolut.

01:48:58Ich glaube, sie selbst bezeichnen sich als das Laravel für JavaScript.

01:49:07Musst du Software mit deinen eigenen Händen schreiben?

01:49:09Das ist wie ein Babyspielzeug.

01:49:12Nun.

01:49:17Also.

01:49:18Wenn man etwas lernt.

01:49:19Ich würde definitiv Sachen tun.

01:49:21Ich würde definitiv Code mit den Händen schreiben.

01:49:23Denn nur durch das Lesen.

01:49:26Ich mache eine Mischung.

01:49:28Aber natürlich für einen Livestream.

01:49:29Finde ich es nicht so interessant.

01:49:30Wenn ich die KI einfach durchlaufen lasse.

01:49:33Aber ich habe sie erst vor ein paar Minuten benutzt.

01:49:36Aber ja.

01:49:37Zum Lernen solltest du definitiv.

01:49:39Dich da reinhängen.

01:49:40Und Lesen allein.

01:49:44Lesen allein bringt einem die Dinge nicht so gut bei.

01:49:46Nun.

01:49:47Ich werde nicht sagen, dass du den ganzen Code schreiben wirst.

01:49:50So wie du es vielleicht vor vier Jahren getan hast.

01:49:52Nicht einmal annähernd.

01:49:54Aber zumindest die Grundlagen.

01:49:56Um ein Gefühl zu bekommen.

01:49:56Ich meine hier.

01:49:57Du bist gerade erst dazu gekommen, oder?

01:49:58Aber ich habe nur kopiert.

01:49:59Was ich im Grunde geschrieben habe, nein.

01:50:01Ähm.

01:50:03Code.

01:50:03Ja.

01:50:03Ja.

01:50:03Ich weiß.

01:50:04Ich verstehe dich.

01:50:05Keine Beleidigung beabsichtigt.

01:50:06Es ist nur.

01:50:07Ich denke, Code zu schreiben.

01:50:09Das ist ganz allgemein ein guter Punkt.

01:50:10Deshalb kommentiere ich das einfach.

01:50:12Ich denke.

01:50:14Code zu schreiben ist immer noch gut zum Lernen.

01:50:18Aber.

01:50:19Auch wenn das ein Scherz war.

01:50:21Oder ein Zitat.

01:50:24Es ist.

01:50:26Es ist.

01:50:26Es verändert sich offensichtlich.

01:50:28Und ich wurde vorhin gefragt.

01:50:32Über neue Kurse.

01:50:33Und ein Problem.

01:50:34Oder was ich zu verstehen versuche.

01:50:35ist, wie man.

01:50:37Technologien momentan am besten lernt.

01:50:41Und ob es noch wichtig ist.

01:50:42Und ich würde sagen ja.

01:50:43Es ist definitiv noch wichtig.

01:50:45Aber ja.

01:50:46Genau dieser Punkt.

01:50:47Wie viel schreibst du von Hand?

01:50:48Wie viel kopierst du rein?

01:50:50Wie viel lässt du die KI erklären oder generieren?

01:50:52Das ist.

01:50:53Ich schweife nur ab.

01:50:54Ich schweife nur ab.

01:50:54Aber das ist definitiv etwas, das sich ändert.

01:50:57Und das ist Adonis JS.

01:51:00Also ist es.

01:51:00Es ist im Grunde Laravel für JavaScript.

01:51:09Okay.

01:51:09Also.

01:51:14Ja.

01:51:15Kommentare.

01:51:16Ich glaube nicht, dass ich das machen werde.

01:51:18Und ich muss in 10 Minuten los.

01:51:20Also lassen wir es wahrscheinlich so wie es ist.

01:51:22Und werfen einen kurzen Blick auf die wenigen restlichen.

01:51:28Seiten hier.

01:51:29Es ist ohnehin nicht mehr viel in diesem Leitfaden übrig.

01:51:31Wir sind also ziemlich gut durchgekommen.

01:51:33Formulare und Validierung.

01:51:35Hier ist die Idee.

01:51:37Dass wir natürlich auch Controller-Funktionen haben können.

01:51:40Controller-Methoden, die aufgerufen werden.

01:51:43Bei POST-Anfragen.

01:51:45Und das können wir in dem.

01:51:48Haben wir keinen User-Controller?

01:51:52Benutzer.

01:51:54Dieser.

01:51:54Der neue Account-Controller.

01:51:56Hier.

01:51:57Store.

01:51:57Das ist.

01:51:59Eine Controller-Methode.

01:52:00Die aufgerufen wird.

01:52:02Bei einer POST-Anfrage.

01:52:04Diese hier.

01:52:05Und.

01:52:06Daher.

01:52:07Ist es nur eine reguläre Methode.

01:52:08Aber dort können wir schon sehen.

01:52:10Man kann die Validierung mit verwenden.

01:52:13Methode.

01:52:13Und einen Validator definieren.

01:52:14Was am Ende.

01:52:16Nur ein kleines Dienstprogramm-Objekt ist.

01:52:18Erstellt mit diesem Vine-Tool hier.

01:52:21Wo man einige Regeln definieren kann.

01:52:22Für die Art von Daten, die man akzeptieren möchte.

01:52:24Und dann.

01:52:24Werden Fehler automatisch generiert.

01:52:26Für dich, falls.

01:52:27Die Validierungskriterien nicht erfüllt sind.

01:52:29Die ganze Idee also.

01:52:30Hinter Laravel.

01:52:30Und Adonis.

01:52:31Ist, dass sie viel Arbeit für dich erledigen.

01:52:33Und man kann.

01:52:33Seine Logik definieren.

01:52:34Auf einer ziemlich hohen Ebene.

01:52:36Während.

01:52:37In Next.

01:52:37JS.

01:52:37Und so weiter.

01:52:38Muss man oft wirklich spezifisch werden.

01:52:41Und offensichtlich.

01:52:41Muss man seine eigene Validierungsbibliothek mitbringen.

01:52:43Und all den spaßigen Kram.

01:52:52Was wir hier also tun.

01:52:54Ist die Routen zu registrieren.

01:52:56Das haben wir schon gesehen.

01:52:59In diesem Fall eine neue Ansicht erstellen.

01:53:00Und hier erstellen sie ein Forum.

01:53:02Das sind alles Edge-spezifische Dinge.

01:53:05Code-Schnipsel.

01:53:06Aber natürlich.

01:53:08Haben wir das hier auch.

01:53:12Wo ist es?

01:53:13Anmelden.

01:53:14Ja.

01:53:14Wir können sehen, dass wir Inertia verwenden.

01:53:17Wir haben diese Formular-Komponente hier.

01:53:19Welche aus dem Adonis.js Inertia-Paket kommt.

01:53:22Welches auch mit einer Route verknüpft ist.

01:53:24Die ausgelöst werden sollte.

01:53:25Wenn das Formular gesendet wird.

01:53:26Was diese Store-Route ist.

01:53:27Die wir gerade gesehen haben.

01:53:28Oder diese Store-Controller-Aktion.

01:53:30Die am Ende.

01:53:31Von dieser Route aufgerufen wird.

01:53:33Und die Daten.

01:53:34Nehme ich an, sind.

01:53:36In die Anfrage gepackt.

01:53:37Und automatisch an das Backend übermittelt.

01:53:39Was natürlich praktisch ist.

01:53:40Dass du den Code dafür nicht selbst schreiben musst.

01:53:42Oder die KI bitten, ihn für dich zu schreiben.

01:53:45Wenn du Edge verwendest.

01:53:46Kannst du deine Formulareingaben so rendern.

01:53:48Und wohl.

01:53:50Ist das etwas einfacher zu durchdenken.

01:53:51Und zu lesen, würde ich sagen.

01:53:56Und dann können wir Validatoren erstellen.

01:53:57Wir haben vorher schon einen gesehen.

01:53:58Mit diesem Vine-Ding.

01:54:00Wo man einfach definiert.

01:54:01Für die Daten.

01:54:02Die man zu empfangen gedenkt.

01:54:04Was sind deine Regeln.

01:54:05Also Mindestlänge.

01:54:06Maximallänge.

01:54:07Datentyp.

01:54:08Und so weiter.

01:54:10Die Store-Methode.

01:54:11Und dann wieder.

01:54:11Können wir das ORM verwenden.

01:54:13Unsere Klasse nutzen.

01:54:14Die statische create-Methode aufrufen.

01:54:16Um die Daten zu speichern.

01:54:19Kommentare.

01:54:20Dasselbe tun.

01:54:23Sie auch mit einem Benutzer verknüpfen.

01:54:24Über die ID.

01:54:26Und wir erhalten den Benutzer.

01:54:28Über diesen Auth.

01:54:30Eigenschaft.

01:54:31Die wir automatisch erhalten.

01:54:32Und wieder.

01:54:33Das ist wie.

01:54:33Adonis, das seinen Job macht.

01:54:35Und die Authentifizierung für dich erledigt.

01:54:37Dank der Middleware.

01:54:39Die registriert ist.

01:54:40Richtig.

01:54:40Also in den Routen.

01:54:40Haben wir etwas.

01:54:41Auth-Middleware.

01:54:42Zum Beispiel.

01:54:43Und alle Routen darin.

01:54:44Erfordern eine Authentifizierung.

01:54:46Und jede Route darin.

01:54:48Daher.

01:54:48Auch.

01:54:51Erhält auch diese Auth-.

01:54:53Eigenschaft.

01:54:54Die du verwenden kannst.

01:54:55Um die Daten zu erhalten.

01:54:56Über den aktuell.

01:54:57Authentifizierten Benutzer.

01:54:58Oder die du nutzen kannst.

01:54:59Um den Benutzer abzumelden.

01:55:00Wie in diesem Fall.

01:55:01Und so weiter.

01:55:02Das ist also alles.

01:55:03Ziemlich praktisch.

01:55:04Sobald es eingerichtet ist.

01:55:06Nehme ich zumindest an.

01:55:07Es ist nicht so.

01:55:08Als hätte ich damit schon gearbeitet.

01:55:09Aber ja.

01:55:11Ich habe gelernt.

01:55:11View-frei von dir.

01:55:12Und die Prinzipien weitergeleitet.

01:55:14An Codecs.

01:55:14Wie Codecs.

01:55:15Schreibt qualitativ hochwertig.

01:55:16Also deine Lektionen.

01:55:16Sind immer noch wertvoll.

01:55:17Für gutes Prompting.

01:55:18Ja.

01:55:18Und eine Sache, die ich erkunde.

01:55:20Ist auch.

01:55:20Wie man kann.

01:55:22Für zukünftige Kurse.

01:55:23Dinge einbeziehen.

01:55:24Wie Agenten-Fähigkeiten.

01:55:25Oder zusätzliche Dokumente.

01:55:26Die du füttern kannst.

01:55:27An deine Agenten.

01:55:28Um ihnen zu helfen.

01:55:31Besseren Code zu schreiben.

01:55:32Obwohl natürlich.

01:55:33Es nie eine Garantie sein wird.

01:55:34Weil Agenten.

01:55:37Können immer ihr eigenes Ding machen.

01:55:38Und so weiter.

01:55:39Aber das ist etwas.

01:55:40Das ich auch erkunde.

01:55:40Natürlich.

01:55:41Und bevorzuge ich.

01:55:42Adonis oder Vue 3?

01:55:43Also Adonis.

01:55:45Ich habe gerade erst.

01:55:46Damit angefangen.

01:55:47Ich habe es vorher.

01:55:48Überhaupt nicht benutzt.

01:55:49Und Vue 3.

01:55:50Ist nicht wirklich.

01:55:52Eine Alternative.

01:55:52Weil Adonis.

01:55:53Ist Full-Stack.

01:55:54Und Vue.

01:55:55Ist Client-Seite.

01:55:55Front-End.

01:55:57Mit Nuxt.

01:55:58Wäre es wieder Full-Stack.

01:55:59Aber dann.

01:56:00Hätten wir immer noch.

01:56:00Unterschiedliche Philosophien.

01:56:01Wo Adonis.

01:56:02Batteries Included ist.

01:56:03Also.

01:56:04All diese Dinge.

01:56:06Wie die Authentifizierungen.

01:56:06Sind eingebaut.

01:56:07Wobei bei Nuxt.

01:56:08Genau wie bei Next.

01:56:09Du musst deine eigenen.

01:56:11Bibliotheken mitbringen.

01:56:11Und letztendlich.

01:56:12Weiß ich nicht.

01:56:13Was ich bevorzuge.

01:56:14Ich mag den Adonis-Ansatz.

01:56:15Und ich sehe definitiv.

01:56:16Dass es wertvoll ist.

01:56:17Wenn du baust.

01:56:17Eine Full-Stack-.

01:56:18Anwendung.

01:56:19Nun.

01:56:21Ich bin so sehr.

01:56:22An Next.js gewöhnt.

01:56:23Und an den Stack.

01:56:25Dass ich.

01:56:27Nicht weiß.

01:56:28Jetzt.

01:56:28Ich bin.

01:56:29Wahrscheinlich schneller bin.

01:56:30Mit diesen anderen.

01:56:31Tech-Stacks.

01:56:31Aber dann wieder.

01:56:32Gibt es gute Gründe.

01:56:33Wie zum Beispiel.

01:56:34Weniger.

01:56:35Externe Abhängigkeiten.

01:56:36Außer Adonis.

01:56:37Und so weiter.

01:56:37Also.

01:56:38Werde ich wahrscheinlich.

01:56:39Weiter damit herumspielen.

01:56:40Und dann.

01:56:41Evaluieren.

01:56:41Wo es nützlich ist.

01:56:43Für mich.

01:56:44Wo es das nicht ist.

01:56:45Wenn ich mehr damit bauen will.

01:56:46Ja.

01:56:46Das ist im Grunde.

01:56:47Der Plan.

01:56:48Und ich glaube.

01:56:49Nun.

01:56:50Nein.

01:56:51Nein, will ich nicht.

01:56:51Und doch.

01:56:52Das Styling ist mir nicht so wichtig.

01:56:53Das ist nur CSS.

01:56:54Aber Autorisierung.

01:56:55Da möchte ich einen Blick drauf werfen.

01:56:55Es gibt also noch ein Paket.

01:56:56Das wir installieren können.

01:56:57Das Teil des Adonis-Ökosystems ist.

01:56:58Das Balancer-Paket.

01:56:58Welches dazu da ist.

01:57:00Um einen Namen zu finden.

01:57:02Ja.

01:57:03Das ist im Wesentlichen der Plan.

01:57:03Und ich denke.

01:57:04Naja.

01:57:05Nein, das werde ich nicht tun.

01:57:07Naja.

01:57:07Nein.

01:57:08Werde ich nicht.

01:57:08Und doch.

01:57:09Ist mir Styling nicht so wichtig.

01:57:10Das ist nur CSS.

01:57:10Aber Autorisierung.

01:57:12Da möchte ich einen Blick drauf werfen.

01:57:13Da gibt es also noch ein anderes Paket.

01:57:16Das wir installieren können.

01:57:18Das Teil des Adonis-Ökosystems ist.

01:57:19Das Bouncer-Paket.

01:57:20Welches dazu da ist.

01:57:21Einen Namen zu finden.

01:57:22Und den Namen dieses Kapitels.

01:57:24Ich würde sagen.

01:57:25Es ist zuständig.

01:57:27Dafür, Leute zu blockieren.

01:57:27Die nicht erlaubt sind.

01:57:28Etwas zu tun.

01:57:29Und natürlich.

01:57:30Autorisierung.

01:57:31Im Gegensatz zur Authentifizierung.

01:57:33Geht es darum.

01:57:35Benutzer zu blockieren.

01:57:36Daran, bestimmte Dinge zu tun.

01:57:37Die sie nicht tun dürfen.

01:57:39Sie sind nicht erlaubt.

01:57:40Zu tun.

01:57:41Also zum Beispiel.

01:57:42Ein Benutzer könnte eingeloggt sein.

01:57:43Sollte aber natürlich.

01:57:44Nicht in der Lage sein.

01:57:46Beiträge zu bearbeiten.

01:57:46Von einem anderen Benutzer.

01:57:47die Beiträge zu bearbeiten.

01:57:48eines anderen Nutzers.

01:57:49Ergibt Sinn.

01:57:51Also.

01:57:52Authentifizierung allein

01:57:52reicht nicht aus.

01:57:53Oft braucht man

01:57:54Autorisierung.

01:57:55Zusätzlich.

01:57:57Und genau da

01:57:57scheint dieses Bouncer-Paket

01:57:58nützlich zu sein.

01:58:01Denn dann

01:58:01kann man sogenannte

01:58:02Policies erstellen,

01:58:03wie es scheint.

01:58:04Und schauen wir mal:

01:58:05Eine Policy ist eine Klasse,

01:58:07die eine Klasse

01:58:07aus Adonis,

01:58:08vom Bouncer-Paket,

01:58:09hier erweitert.

01:58:10Und wir können dann

01:58:11definieren, okay,

01:58:13also

01:58:13können wir hier

01:58:15Berechtigungen festlegen,

01:58:16wie:

01:58:17Bearbeiten ist erlaubt,

01:58:18wenn die Nutzer-ID

01:58:20mit der ID

01:58:21des Nutzers des Beitrags

01:58:22übereinstimmt,

01:58:23den wir zu bearbeiten versuchen.

01:58:24Dasselbe fürs Löschen.

01:58:26Und dann können wir

01:58:27diese Policies wohl anwenden.

01:58:29Mal sehen.

01:58:30Wir

01:58:30haben sie.

01:58:34Controller-Methoden hinzufügen.

01:58:43Wo wenden wir das an?

01:58:44Oh ja,

01:58:45hier.

01:58:45Also

01:58:46in unserem Controller

01:58:48Wir

01:58:48Hier.

01:58:49Sie haben eine neue Methode hinzugefügt,

01:58:50eine Edit-Methode,

01:58:51die ausgelöst werden sollte,

01:58:52offensichtlich,

01:58:52wenn man

01:58:53versucht, ein Formular zu senden,

01:58:54in dem man einen Beitrag bearbeiten will,

01:58:56oder wo man

01:58:57wahrscheinlich eine Seite laden möchte,

01:58:58um einen Beitrag zu bearbeiten.

01:58:59Jetzt, wo ich es mir ansehe.

01:59:01Und in dieser Methode

01:59:02finden wir

01:59:03den Beitrag,

01:59:04den man bearbeiten will.

01:59:05Aber dann,

01:59:06bevor die Ansicht zurückgegeben wird,

01:59:08gibt uns dieses Bouncer-Paket

01:59:09etwas an die Hand,

01:59:11wo wir eine Policy laden,

01:59:12die wir anwenden wollen,

01:59:13und wo wir im Grunde

01:59:14durch die Policy prüfen,

01:59:15ob der Nutzer,

01:59:16der versucht,

01:59:17dies zu bearbeiten,

01:59:19dazu berechtigt ist.

01:59:23Ergibt Sinn.

01:59:25Okay.

01:59:27Also mal sehen.

01:59:29Chat.

01:59:30KI kann eine App

01:59:31auf zehn verschiedene Arten

01:59:32in derselben Bibliothek bauen.

01:59:33Also vielleicht auf

01:59:34Programmierparadigmen konzentrieren,

01:59:35darauf, wie man Code organisiert.

01:59:37Ja.

01:59:38Absolut.

01:59:38Ich denke, dass

01:59:39das wichtige Fähigkeiten sind

01:59:41für beide, Entwickler

01:59:42und KI.

01:59:44Durch Dokumente,

01:59:45durch Fähigkeiten,

01:59:46die du lehrst,

01:59:47bei bestimmten Mustern,

01:59:48die du kennst,

01:59:49deine Grundlagen

01:59:50und so.

01:59:51Und deshalb

01:59:52plane ich auch

01:59:53Kurse zu Programmierung,

01:59:54Grundlagen,

01:59:55Systemdesign

01:59:55und all diesen spaßigen Dingen.

01:59:57Wenn es eine bessere Wette ist,

01:59:58Backend-Web-APIs

02:00:00in stark typisierten Sprachen

02:00:01wie C# zu schreiben.

02:00:02Und.

02:00:03Bin mir nicht sicher,

02:00:03warum das hier zensiert wurde.

02:00:05Oder sich auf Node.js

02:00:06mit TypeScript verlassen,

02:00:07bei dem Typen gelöscht werden

02:00:08und es tonnenweise Schwachstellen

02:00:09in NPM-Paketen gibt.

02:00:12Also letztendlich

02:00:13Was Backend-Sprachen angeht,

02:00:15könnte ich wahrscheinlich eine Stunde

02:00:16nur darüber reden.

02:00:17Und die habe ich nicht.

02:00:18Aber.

02:00:20Der riesige Vorteil

02:00:21von Node.js

02:00:22und dem gesamten JavaScript-

02:00:23Ökosystem

02:00:24ist natürlich,

02:00:24dass KI es wirklich gut kennt.

02:00:26Wenn du planst, KI

02:00:28für die Entwicklung zu nutzen,

02:00:28gibt es da tonnenweise Pakete.

02:00:30Aber natürlich

02:00:31gibt es auch den großen Nachteil

02:00:32von Supply-Chain-Angriffen

02:00:33und so weiter.

02:00:34Definitiv.

02:00:35Und andere Sprachen

02:00:36können dir auch bessere Performance bieten.

02:00:38Ich würde mir auf jeden Fall

02:00:39überlegen,

02:00:41Go,

02:00:41Rust,

02:00:42C#

02:00:42oder was auch immer dich interessiert,

02:00:44auch für die Backend-Entwicklung anzusehen.

02:00:45Aber ich muss sagen,

02:00:46dass meine Erfahrung

02:00:47ist,

02:00:48dass man eine hohe Geschwindigkeit

02:00:49hat,

02:00:50wenn man TypeScript benutzt,

02:00:51weil es mit KI

02:00:52so gut funktioniert.

02:00:53Es kennt es einfach so gut.

02:00:55Und natürlich,

02:00:56für mich,

02:00:56ich kenne es auch sehr gut,

02:00:57also

02:00:58kann ich schnell sehen, an welchen Stellen

02:00:59die KI

02:01:01in die falsche Richtung geht

02:01:02und so weiter.

02:01:02Also

02:01:04das gibt es eben.

02:01:05Aber

02:01:06ja,

02:01:06definitiv.

02:01:06Es hat

02:01:07viel für sich,

02:01:08auch andere

02:01:09Backend-Sprachen zu nutzen.

02:01:10Es muss

02:01:11nicht für alles

02:01:12JavaScript sein.

02:01:14Warum ist NestJS populärer?

02:01:16Ich weiß es ehrlich gesagt nicht.

02:01:17Ich habe nie ganz verstanden,

02:01:19warum nicht,

02:01:19warum Adonis

02:01:22so

02:01:23nischig war und ist.

02:01:24Ich...

02:01:24Ich...

02:01:25Ich habe keine gute Erklärung

02:01:26dafür.

02:01:28Aber

02:01:29ich muss jetzt

02:01:30los.

02:01:31Also,

02:01:32das war interessant,

02:01:32das hat Spaß gemacht.

02:01:34Es war definitiv interessant,

02:01:35in Adonis einzutauchen

02:01:36und es sich anzusehen.

02:01:37Ich hoffe, es hat dir auch gefallen.

02:01:39Danke fürs Zuschauen.

02:01:40Wieder.

02:01:40Ich versuche, jeden Donnerstag

02:01:41wieder da zu sein.

02:01:42Nächste Woche

02:01:43werde ich es nicht schaffen.

02:01:45Die Woche danach,

02:01:46das muss ich sehen.

02:01:47Aber ja,

02:01:48ich kündige es immer

02:01:48in meinem Discord an.

02:01:49Wenn du also noch

02:01:50nicht Teil davon bist,

02:01:51kannst du auf

02:01:51akadamind.com

02:01:53/community gehen

02:01:54und dem Discord beitreten.

02:01:54Ich kündige es dort an.

02:01:56Oder natürlich,

02:01:56abonniere einfach

02:01:57und folge mir,

02:01:58dann wirst du es sehen.

02:01:59Aber ja,

02:02:00Donnerstag,

02:02:0117 Uhr

02:02:03mitteleuropäischer

02:02:04Sommerzeit.

02:02:05Und ich ende normalerweise

02:02:06zu der Zeit,

02:02:07zu der ich jetzt ende.

02:02:09Und ja,

02:02:09also danke euch allen.

02:02:11Habt einen großartigen Tag,

02:02:13Abend,

02:02:13Morgen,

02:02:14was auch immer es bei dir ist.

02:02:15Hoffentlich bis zum nächsten Mal.

02:02:17Und ja,

02:02:17danke euch allen fürs Mitmachen.

Key Takeaway

AdonisJS ermöglicht als meinungsstarkes Full-Stack-Framework für Node.js den Aufbau robuster Webanwendungen mit minimalen Abhängigkeiten, indem es wesentliche Bausteine wie Authentifizierung und ORM direkt im Framework bereitstellt.

Highlights

AdonisJS bietet ein “Batteries Included”-Full-Stack-Framework für Node.js, das Authentifizierung, ORM, Caching und Ratenbegrenzung nativ ohne Drittanbieter-Bibliotheken integriert.
Das Framework unterstützt drei primäre Architektur-Ansätze: Hypermedia (serverseitiges HTML mit Edge-Templates), Inertia.js (Bridge zu Single-Page-Anwendungen mit React/Vue) oder reine REST-API-Backends.
AdonisJS nutzt “Lucid” als Object-Relational Mapping (ORM) für Datenbankinteraktionen, das Entwicklern erlaubt, Datenbanktabellen als TypeScript-Klassen zu modellieren.
Das Framework verwendet “Ace” als CLI-Tool, das ähnlich wie Laravel's “Artisan” das Generieren von Controllern, Modellen, Migrationen und Seedern ermöglicht.
Server-Side Rendering (SSR) lässt sich bei Verwendung von Inertia.js und React über die Konfiguration aktivieren, um die SEO-Performance im Vergleich zu clientseitigem Rendering zu verbessern.
Policies in AdonisJS werden über das “Bouncer”-Paket definiert, um Autorisierungslogik zentral zu verwalten und den Zugriff auf Ressourcen basierend auf Benutzerrollen oder Besitzverhältnissen zu steuern.

Timeline

Grundlagen und Architektur von AdonisJS

AdonisJS ähnelt der Architektur von Laravel, ist jedoch explizit für Node.js und TypeScript konzipiert.
Das Framework reduziert das Risiko von Supply-Chain-Angriffen durch die Minimierung externer Abhängigkeiten.
Drei Ansätze stehen zur Verfügung: Hypermedia (Edge-Templates), Inertia.js (React/Vue-Integration) und reine REST-APIs.

AdonisJS positioniert sich als Full-Stack-Framework, das Entwicklern grundlegende Bausteine wie Routing, Authentifizierung und Datenbankverwaltung nativ bietet. Im Gegensatz zu Next.js, das primär auf das Rendering von React-Komponenten fokussiert ist, umfasst AdonisJS eine umfassende Toolchain, um externe Dienste überflüssig zu machen.

Ersteinrichtung und Fehlersuche

Die Initialisierung erfolgt über “npm create adonisjs@latest”.
Fehler bei Lifecycle-Skripten entstehen oft durch aktivierte “ignore-scripts”-Sicherheitsoptionen in Paketmanagern wie npm oder Bun.
SQLite wird standardmäßig als leichtgewichtige Datenbanklösung verwendet.

Die Installation des Frameworks erfordert die Ausführung von Lifecycle-Skripten, die bei restriktiven Sicherheitseinstellungen fehlschlagen können. Nach der erfolgreichen Migration des Datenbankschemas steht ein Entwicklungsserver bereit, der bereits eine Authentifizierungsstruktur enthält.

Ordnerstruktur und Konfiguration

“resources” enthält Frontend-Assets und Edge-Templates, “start” dient dem Boot-Zyklus der Anwendung.
“app” organisiert die Domänenlogik wie Controller und Modelle, während “config” alle Anwendungseinstellungen bündelt.
Die Datei “adonisrc.ts” verwaltet die Framework-Konfiguration, einschließlich experimenteller Features und registrierter Ace-Befehle.

Die Projektstruktur folgt einer klaren Trennung von Belangen. Während “resources” für Client-Assets zuständig ist, übernimmt das “start”-Verzeichnis die Registrierung von Routen und Event-Listenern beim Hochfahren. Service-Provider dienen zur Verwaltung von Dependency Injection.

Modelle, Migrationen und Datenbankbeziehungen

Modelle repräsentieren Datenbanktabellen als Klassen, während Migrationen die Tabellenstruktur in der Datenbank definieren.
Beziehungen zwischen Modellen (z.B. Eins-zu-viele) werden mittels Decorators in den TypeScript-Modellklassen deklariert.
Factories dienen zur Generierung von Dummy-Daten, Seeder befüllen die Datenbank mit diesen Werten für Entwicklung und Tests.

Die Datenmodellierung erfolgt über das Lucid ORM. Durch “node ace make:model” werden sowohl das Modell als auch die zugehörige Migrationsdatei erstellt. Fremdschlüssel und Beziehungen werden in den Modellklassen mittels Decorators definiert, was die Abfrage von Daten programmatisch ohne direkte SQL-Anweisungen ermöglicht.

Controller, Routing und Autorisierung

Controller-Methoden nutzen ein HTTP-Kontextobjekt für Anfragen und Antworten.
Inertia.js dient als Brücke, um serverseitige Daten nahtlos in React-Komponenten als Props zu übertragen.
Das Bouncer-Paket definiert Policies, um benutzerbasierte Zugriffsrechte und Autorisierungen zentral zu erzwingen.

Controller verarbeiten die Anfragelogik, validieren Eingaben über die “Vine”-Bibliothek und geben Antworten über Views oder Inertia zurück. Authentifizierte Benutzerdaten sind über das Auth-Objekt im Kontext verfügbar. policies ermöglichen feingranulare Zugriffskontrollen, indem sie Aktionen wie Bearbeiten oder Löschen an die Benutzeridentität binden.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video