 Und ich will vor allem von der Bühne, und du darfst schatten. Danke Tom. Vielen Dank. Wenn ihr in ein neues Repo geht, in ein neues Code-Projekt, auf GitHub beispielsweise, wenn ihr konfibriuten wollt bei ihrem Open-Source-Projekt, dann steht ihr zunächst mal von einem riesigen Berg an Aufgaben, die vor euch liegen, bevor ihr die erste einzige Zeilecode schreibt, um zu konfibriuten. Ihr braucht ganz unten ein Code-Editor, Visual Studio Code, PHP-Storm, manche nutzen WI oder Nano. Das braucht ihr natürlich. Bitte schön. Dann braucht ihr für viele Projekte wahrscheinlich ein installiertes Node, vermutlich noch in der richtigen Version. Wenn ihr SAS kompilieren wollt, wenn ihr Abhängigkeiten nachziehen wollt, braucht ihr das auf eurer Lokalmaschine, um Coden zu können. Ihr braucht natürlich auch PHP. Das sind die Versionssprünge nicht so groß, aber manchmal braucht man noch Composer dazu, um überhaupt das Projekt lokal zum Laufen zu bringen. Ihr braucht einen Web-Server, ihr braucht eine Datenbank. Das machen manche mit XAM, mit LAM, manche machen es mit Docker. All das braucht ihr, um überhaupt erst mal WordPress bei euch lokal installieren zu können. Und erst dann könnt ihr anfangen, die erste Zeilecode zu kontributen. Da habt ihr schon eine ganz lange Reise hinter euch. Und genau hier kommen jetzt die Codespaces ins Spiel. Die sind nichts anderes als eine Abkürzung. Die Time to First Line of Code wird drastisch reduziert. Ihr habt buchstäblich einen Klick, das zeige ich euch gleich. Und da könnt ihr genau diese Punkte, die da bisher notwendig waren, die werden alle automatisiert. Die werden in der Cloud, in einem GitHub Codespace, für euch vorbereitet. Und ihr könnt sofort anfangen zu coden. So schaut das Ganze aus. Das funktioniert für jedes GitHub repo. Das muss kein PHP Projekt sein. Das kann ein Java Projekt. Das kann Rust und Go Projekt sein. Alles egal. Ihr braucht auch einen ganz normalen GitHub Account. Ihr braucht keinen besonderen Account dafür oder sowas. Ihr habt hier ein normales GitHub repo, in dem es WordPress vorbereitet. Das schauen wir uns gleich an. Und da gibt es diesen Code. Und wenn ich jetzt hier drauf klicke, dann geht hier einfach ein neues Fenster auf. Ich kann entweder dieses repo ganz normal clonen, so wie ihr das schon kennt. Ich kann aber auch sagen, ich möchte einen Codespace kreieren, und zwar im Branch Main. Und da klicke ich jetzt drauf, genau. Und was passiert jetzt im Hintergrund? In der Cloud, also auf einem Server von GitHub, wird ein Container hochgefahren, ein Docker Container. In diesem Container wird ein VS Code hochgefahren. Und alles, was wir uns gleich anschauen, wird für euch vorbereitet. Das dauert eine Weile. Das heißt, ihr könnt erst mal, wenn ihr das erste Mal ein Codespace startet, erst mal einen Kaffee trinken gehen. Das erste Mal dauert, ich weiß nicht, 5, 6, 7 Minuten je nachdem. Aber der Codespace wird für euch zwischengespeichert. Und wenn ihr morgen wieder hingeht, dann ist diese lokale Entwicklungsumgebung in der Cloud für euch schon vorbereitet. Nach dem Kaffee trinken kommt ihr zurück. Und ihr seht dann hier, das ist in dem Falle eine VS Code Oberfläche. Also wer von euch VS Code kennt, oder nutzt, kennt genau diese Oberfläche. Es gibt übrigens auch Module für PHP-Storm. Dann könnt ihr das mit eurer lokalen Installation von PHP auch nutzen. Aber ihr seht, in VS Code ganz normal, ich habe links das repo schon ausgecheckt, automatisch. Das heißt, das sind die Dateien, die ganz normal im repo drin sind. Ich habe hier meinen Code-Editor. Da ist die Readme-MD automatisch geöffnet. Und ich habe hier unten dieses Terminal. Und normalerweise, also jetzt bisher ist lediglich das Projekt ausgecheckt in diesen Codespace. Was jetzt automatisch passiert, ihr könnt es per Hand machen oder automatisieren, bitte schön. Es wird ein NPM-Install ausgeführt. Also ganz normalen Abhängigkeiten werden installiert. Ihr seht dadurch auch, Node ist da auch schon vorinstalliert. Bitte schön. Die Spezialisten unter euch, was habe ich für ein Code hier ausgeführt? Mal reinrufen. Lars, wenn dieser Ausgabe kommt, welchen Befehl habe ich vorher ausgeführt? Wie bitte? Install, was für ein Install? Composer Install. Genau, das heißt, in dem Fall habe ich per Hand Composer Install ausgeführt. Das werden die PRP-Abhängigkeiten installiert. Wie man das automatisiert, zeige ich euch in ein paar Minuten. Bitte schön. So, dann mache ich hier ein NPM-Runup. Das ist jetzt ganz speziell für dieses Projekt, weil als Entwicklungsumgebung für WordPress nutze ich in dem Falle WPN. Ihr könnt WordPress über die Kommandozeile installieren. Ihr könnt WordPress mit einem eigenen Descript installieren, so wie ihr das gewohnt seid. Ich nutze im Alltag WPN, bitte schön. Das ist von WordPress, einige von euch werden es kennen. Das ist von WordPress der Weg, um eine lokale Docker-Umgebung mit WordPress aufzusetzen. Und genau die nutze ich. Das heißt, das, was ich euch hier zeige mit diesem Code Space. Ihr könnt dieses Projekt auch ganz normal klonen und lokal ausführen. Es wird genauso funktionieren, aber komplett lokalen Maschine wie im Code Space. Bitte schön. Das heißt, ich habe jetzt hier dieses Projekt hochgefahren mit NPM-Runup in dem Falle. WPN wird gestartet. Das bedeutet im Hintergrund, es werden mehrere Docker-Container gestartet. Und ich habe WordPress am Laufen. Man sieht es hier unten auch. WordPress Development-Zeit startet. So, und da haben wir jetzt das Problem. Startet at localhost. Ich bin ja in der Cloud. Wie schaut es aus? Das macht jetzt Code Space für mich automatisch. Ich habe hier verschiedene Ports. Die werden einfach weitergeleitet. Das heißt, ich habe hier, ohne dass ich bisher irgendwas gemacht habe, ich habe nur auf Create Code Space on Main geklickt. Ich habe hier ein WordPress installiert. Und ihr seht oben die Adresse. Die setzt sich zusammen aus erst mal SSL, HTTPS. Und dann Code Space bekommen irgendwelche klingende Namen automatisch. Ich kann den Namen zwar vergeben, aber ich kann den Standardnamen nutzen. In dem Falle eben Bookish Space Bessen, dann irgendein Random String. Und dann App.Gitter.dev. Das heißt, im Code Space läuft mein localhost. Und der wird hier einfach nur weitergeleitet, sodass ich das ganz normal nutzen kann. Das kann auch nur ich nutzen, weil das mein Code Space ist. Das kann niemand anders mit einem Gitter becauen nutzen. Aber ich habe das hier, habe mir voll in Zukunft drauf. Geh mal wieder zurück in den Code Editor, der ja auch komplett im Browser läuft. Ihr seht hier die einzelnen Ports. Also bei VPN für SOS werden mehrere Ports aufgemacht. Es gibt die normale Installation von WordPress. Es gibt eine Testumgebung. Aber die sind hier auch nochmal genau aufgelistet. Und da kann ich direkt drauf zugreifen und damit arbeiten. In dem Falle habe ich in dem Code Space den, ich kann den, also wie ich ihn konfiguriere und anpasse, zeige ich euch gleich, was in dem Beispiel Code Space drin ist. Das ist schon ein Code Sniffer. Also PHP CS, der einfach schaut auf meine Linting Rules, ob ich die Abstände richtig gemacht habe, ob ich die Klammern an der richtigen Stelle setze und so weiter. Das überprüft er schon. Und zwar werden auch schon, der wird schon der WordPress Standard, ist schon voreingestellt. Das müsste ich sonst bei mir lokal einfach dran denken, dass ich das mache. Wenn ich mit verschiedenen Projekten arbeite, dann muss ich das manchmal hin und her wechseln. In dem Falle ist es automatisch schon drin. Hier ist es unterkringelt, weil eben hier das Leerzeichen fehlt. Ist von Haus aus dabei, ohne dass ich irgendwas mache? Ich habe in diesem Beispiel repo auch schon den Code Beauty Fire drin. Das heißt, wenn ich selber, ich weiß ehrlich gesagt nie, wo ich eine Klammer setzen muss, also eine Klammer schon, aber wo das Leerzeichen hin muss und so weiter, ich gehe auf Dokument formatieren und dann macht er das automatisch. Ist von Haus aus dabei, ohne dass ich auf irgendwas Rücksicht nehmen muss und dass eine andere PHP-Version ist ja alles gekapselt in der Cloud. Ich habe auch schon WordPress-Dokumentation dabei. Also wer VS Code nutzt, es gibt eine Reihe von VS Code Extensions, speziell für die WordPress-Entwicklung, also Dokumentationen beispielsweise, ist standardmäßig schon drin. Ich fahre mit der Maus einfach über ein WordPress-Funktionsaufruf und bekomme dann hier irgendwie Zusatzinformationen, ohne dass ich irgendwas machen muss. Das Ganze läuft ja auf Git, das heißt, ich habe auch automatisch schon dieses Git-Repo ausgecheckt. Das seht ihr jetzt ganz links. Ich könnte jetzt hier meine Änderungen einfach kommentieren. Das kann ich bei mir in meinem Repo machen. Wenn ihr zu einem anderen Repo contributeen wollt, da teilnehmen wollt, dann könnt ihr auch, dann ist der gängige Weg eigentlich, dass ihr zuerst mal dieses andere Repo forgt, dann habt ihr das ganz normal und dann habt ihr in diesem geforgten Repo euren Codespace. Weil die Konfiguration des Codespaces zeige ich euch gleich, das sind einfach nur zwei Dateien, die in diesem Repo mit abgelegt werden. Das heißt, wenn ich dieses Repo forge, forge ich damit auch die Voreinstellung für diesen Codespace. Genau, und jetzt möchte ich euch mal genau zeigen, wie diese Einstellung, wie diese Konfiguration von einem Codespace funktioniert. Wahrscheinlich auf der nächsten, aber wahrscheinlich auf der nächsten Folie zeige ich euch das. Genau. Das hier ist jetzt ein, dieses Repo, das ich euch gerade gezeigt habe, den VPN hochgefahren wird und dieses Repo hat ein zusätzliches Verzeichnis, das heißt Punkt Dev Container. Und in diesem Verzeichnis sind zwei Dateien drin, nämlich die Dev Container Chasing, das sind die Voreinstellungen für den Codespace drin und Post Create Command SH, das heißt, ihr könnt, wenn ihr den Container Hochfahrt noch arbitrary eigene Befehle hochfahren. Schauen wir mal in die Dev Container Chasing rein. Das ist eine normale Chasing Datei, die sagt zum Beispiel in diesen drei Zeilen, in meinem Codespace brauche ich PHP, ich brauche Note und ich brauche Docker in Docker. Das sind die Voraussetzungen, von denen ich vorhin gesagt habe, man braucht Note, man braucht PHP, man braucht Docker. Mehr brauche ich nicht, weil Apache und MySQL ist ja dann in Docker gekapselt quasi. Und dann sage ich weiterhin, ich möchte, wenn man das in VS Code aufruft, noch ein paar Extensions haben, die es in VS Code einfach gibt, das heißt zum Beispiel die WordPress Docs oder den PHP Codesniffer und Code Beautifier. Das muss ich nicht nutzen zu arbeiten mit VS Code, aber hilft natürlich im Alltag, wenn diese Extensions schon installiert sind. Und dann sage ich, wenn das Ganze hochgefahren wird, dann führe bitte noch diese Befehle aus, die in PostCreate Command definiert sind. Das sind genau diese Befehle PostCreate Command. Das heißt, dieser Docker Container wurde hochgefahren, das läuft alles und was mache ich hier im Endeffekt? Ich mache das, was ich euch vorhin gesagt habe, ein NPM Install, und dann ein NPM Runup. Damit wird mein Projekt automatisch hochgefahren, ohne dass der Programmierer oder die Programmiererin, die zum ersten Mal dieses Projekt nutzen und konfigurten will, irgendetwas machen muss. Zu guter Letzt kann ich noch für VS Code die Einstellungen speichern, also die Settings. Also VS Code habe ich den Dark Mode oder den Hellen Mode, möchte ich mir Zeilen nummern anzeigen oder nicht, möchte ich, wenn es gespeichert wird, dann kann ich es automatisch formatieren und so weiter. Das sind die ganz normalen regulären Einstellungen. Wer PHP Storm verwendet, für den ist diese Datei wird einfach ignoriert. Und wer VS Code verwendet, der hat dann diese Vor-Einstellungen, von denen kann man abweichen, aber in dem Falle ist es eben schon von vornherein als Vorschlag liegt dabei. Ja, genau, das war es auch schon. Das heißt, hier nochmal zusammengefasst, um in eurem Projekt nach der Mittagspause Code Space anzulegen, müsst ihr im Endeffekt einen Punkt Def Container Verzeichnis anlegen und da eine Def Container Chasen reinlegen. Voraussetzung, um das dann nutzen zu können, ist ein Browser. Das heißt, wenn ihr am Samstag Nachmittag zu euren Eltern fahrt, euer Laptop leer ist, sagt ihr, hey Mama, geht mal schnell, dein Computer lockt euch ein und dann wird dieser Code Space hochgefahren und ihr könnt an jedem beliebigen Computer, den Zugriff eurer GitHub Account den Code Space nutzen. GitHub Account ist Voraussetzung, aber der ist kostenlos und hinter dem QR-Code versteckt sich dieses Beispiel, das ich euch gezeigt habe. Viel Spaß beim Coden und vielen Dank fürs Zuhören.