Kursthemen

  • Starthilfe

    Alles einklappen Alles aufklappen
    Was erwartet mich in diesem Kurs?


    Dieser Kurs veranschaulicht den Weg zu bzw. die Umsetzung von sowie die Arbeit mit einer portablen Zero-Setup Moodle-Entwicklungsumgebung mit Docker und VSCode-Devcontainern.

  • Die Geschichte des Drawer-Titles

    • Aufgabe: Den Titel des jeweiligen Kurses zusätzlich im linken Drawer rendern

      Im Zuge der Ausgestaltung unserer Knowledge Base kam der Wunsch auf, den Titel eines Kurses auch im linken Drawer des Moodle 4 Boost_Union-Themes anzuzeigen. Was auf einer "einfachen" Website eine Arbeit von einer Minute sein dürfte, gestaltet sich in Moodle als etwas komplexer, was das benötigte Skillset der Entwickler*in angeht. Wem können wir - von diesem Skillset ausgehend - diese Aufgabe zuteilen? Eine Bestandsaufnahme.



      Schritt 1: Überblick verschaffen – welche Skills brauchen wir?
      • Templating | HTML
        • Es handelt sich um ein neues Element.
        • SCSS | CSS
          • Es muss angemessen gestyled werden.
        • PHP
          • Der Inhalt ist dynamisch und wird somit aus dem Backend übergeben.
        • Moodle
          • An irgendeiner Stelle müssen diese Skills zusammenkommen.


        Schritt 2: Moodle-Entwicklungsumgebung einrichten – welche Skills brauchen wir?
        • Betriebssystem
          • Windows, Linux, macOS ...
          • Datenbank
            • MySQL, MariaDB, PostgreSQL ...
          • Webserver
            • Apache, NGINX, IIS ...
          • Programmiersprache
            • PHP (inkl. Extentions und Debugging)
          • IDE
            • PHPStorm, VSCode, vim ... (inkl. Extensions und Debugging)
          • Moodle
            • Installiert sich schließlich nicht von selbst (oder?)

      • Das Problem: Einstieg in die Moodle-Entwicklung


        • Einstieg in die Moodle-Entwicklung ist für jeden Kenntnisstand mit Hürden verbunden.

          • Junior-Entwickler*innen
            • „Einfach mal ausprobieren“ kaum selbstständig möglich
            • Bedürfen mehr als „nur“ Kenntnisse in Frontend/Backend-Programmierung
            • Mitarbeit im Team bedarf häufig Ausrichtung auf die dort genutzten Umgebungen (OS, IDE usw.)
            • Zeitaufwand durch kaum vorhandenes Feedback „wenn was nicht klappt“

          • (Senior-)Entwickler*innen
            • Zeitaufwand durch Einrichtung von Entwicklungsumgebungen für sich selbst / Kolleg*innen
            • Einarbeitungszeit bei Technologiewechsel nicht nur in Moodle, sondern in gesamten Stack
            • Aufsetzen von „frischen“ Umgebungen (bspw. für Code Reviews / Merge Requests) zeitintensiv


          Was wäre, wenn eine einheitliche, simple Lösung für das gesamte Team existieren würde?

      • Das Konzept: Portables Zero-Setup

          • Vorneweg: Es handelt sich um keinen komplett neuen Ansatz
            • Ähnelt der Entwicklung innerhalb einer VM
            • Basiert auf Docker

          • Anforderungen:
            • Losgelöst von Betriebssystem
            • Minimale Softwarevoraussetzungen
            • Minimale Wissensvoraussetzungen
            • Jederzeit frisch instanzierbar

          • Voraussetzungen:
            • Docker
            • VSCode (mit Erweiterung „Devcontainer“)

          • Moment, wie passen Docker und minimale Wissensvoraussetzungen zusammen?“
            • Es genügt eine Person im Team, welche sich mit der Konfiguration des Zero-Setups auseinandersetzt.
            • Es ist keine Interaktion mit Docker zur Entwicklung erforderlich.

          • „Die Voraussetzung von VSCode bedeutet doch eben keine freie IDE-Wahl, oder?“
            • Stimmt! Allerdings wird VSCode nur zum Start des Containers benötigt, entwickeln lässt sich auch in anderen IDEs.


          • „Lässt sich das ganze Setup nicht auch nur mit Docker umsetzen?“
            • Absolut! Allerdings bedarf die Inbetriebnahme dann grundlegende Docker-Kenntnisse.

      • Die Lösung: VSCode-Docker-Devcontainer

        • Wie sieht eine solche Zero-Setup Umgebung aus? Im Mittelpunkt steht ein Docker-Container, in welchem die benötigten Dienste (PHP, CRON, Apache, XDebug und optionale VSCode-Extensions) laufen. Über die Devcontainer-Erweiterung ist es möglich, die Oberfläche von VSCode direkt in diesen Container zu verbinden, so dass die Arbeit ab diesem Zeitpunkt innerhalb des Containers stattfindet. Zusätzlich zum eigenen Dateisystem des Containers wird ein Teil des Dateisystems des Hosts in diesen gemounted, so dass die Quelldateien von Moodle, welche man bearbeiten möchte, weiterhin auf dem Host-System verbleiben.

          Über die Erweiterung übernimmt VSCode zudem mit Befehlen, die über die Oberfläche des Editors angesprochen werden können, die gesamte Interaktion mit Docker - die Notwendigkeit, Docker-Befehle zu erlernen, entfällt damit. An den Devcontainer lassen sich weitere Container (d.h. Dienste) anbinden, bspw. die benötigte MariaDB (oder jede andere Datenbank, die von Moodle unterstützt wird) und ein SMTP-Server (hier Mailhog).

          Nach Öffnen eines Devcontainer-Projekts fordert die Extension selbstständig zum Öffnen in Container auf.
                
          • Erstmalig: Container wird automatisch gebaut.
          • Ab dann: Container wird automatisch gestartet.


          • Der Verbindungsstatus wird unten links angezeigt.
          • Bei Trennung der Verbindung stoppt die Extension die Container selbstständig.


          • devcontainer.json
            • „Magie“ – Konfiguration des Container-Stacks, Umgebungsvariablen und VSCode-Extensions
          • docker-compose.yml
            • Konfiguration des (erweiterbaren) Container-Stacks
          • Dockerfile
            • Konfiguration des Haupt-Containers
          • postCreateCommand.sh
            • Bash-Befehle nach Build des Container-Stacks
          • postStartCommand.sh
            • Bash-Befehle nach Start des Container-Stacks


          • Über die GUI lassen sich die Container ebenfalls starten und neu bauen (strg+shift+p bzw. cmd+shift+p)
            • Bei Reopen wird nur die postStartCommand.sh ausgeführt
            • Bei Rebuild werden die postCreateCommand.sh und postStartCommand.sh ausgeführt

          • devconcainer.json
            • workspaceFolder: Root des Container-Mounts
            • extensions: automatisch im Container installierte Extensions für VSCode (bspw. Linter, XDebug usw.)


          • devcontainer.json
            • forwardPorts: Ports, die der Devcontainer zum Host forwarded
            • postCreateCommand: Bash-Befehle nach Build des Containers
            • postStartCommand: Bash-Befehle nach Start des Containers
              • nohup mit out nach /dev/null verhindert hier ein beenden des Terminals / der gestarteten Dienste
            • remoteUser: User, unter dem die Sitzung im Container läuft (und den VSCode nutzt)


          • devcontainer.json
            • remoteEnv: Variablen, welche in der Bash für postCreate und postStart verwendet werden können
              • Hier lassen sich bspw. Moodle-Settings hinterlegen / anpassen


      • Tipps, Tricks & Material



          • Windows
            • Für die beste Performance sollte direkt in der WSL2 entwickelt werden.
            • Devcontainer-Ordner in WSL2 verschieben, VSCode in WSL2 verbinden, von da alles wie gehabt
            • macOS
              • Für die beste Performance sollte unbedingt VirtioFS aktiviert sein!
              • Docker Settings ➡️ Beta features ➡️ Enable accelerated VirtioFS directory sharing
            • Unix
              • Hier läuft einfach alles ;)
            • Code & Dokumentation:
                • Username: admin
                • Password: SecretP4$$word

              Alles Weitere in der devcontainer.json