7 Home
HJB edited this page 1 year ago

Hinweise zur Entwicklung der Lerntools

Verwendete Frameworks

Die Lerntools bestehen aus einer Server- und einer Client-seitigen Komponente, die jeweils in der Programmiersprache JavaScript implementiert sind.

Server

Client

  • Laufzeitumgebung: Browser (mit ES6 Unterstützung)
  • JS-Framework: Vue, Version 2 (inklusive vue-i18n, vue-router)
  • CSS-Framework: Bootstrap (ausschließlich CSS, kein JS, kein jQuery)
  • Verbindung Server: Axios
  • Build-Prozess: Webpack

Struktur des Codes

Basis der Lerntools ist das Repository "base", das alle zentralen Komponenten der GUI sowie die Logik zur Authentifizierung, Autorisierung, Benutzerverwaltung und Registrierung enthält. Sowohl der Server- als auch der Client Code befinden sich im Unterverzeichnis "main" mit folgender Unterstruktur:

  • components: Client; an verschiedenen Stellen der Client-Anwendung genutzte Vue-Components (Dialoge, Listen, etc.)
  • css: Client; für bestimmte Komponenten spezifischer CSS-Code
  • img: Client; Logos, Icons etc.
  • js: Client; an verschiedenen Stellen der Client-Anwendung genutzte Funktionen (im Sinne des DRY-Prinzips)
  • server: Server; vollständige Server-Quelltext, bestehend aus Router, Controller und Datenbankmodellen
  • text: Client; Markdown-Seiten, die in der Client App angezeigt werden
  • views: Client; zentrale Seiten der Anwendung (Hauptseite, Anmeldung, Registrierung etc.)
  • config.js: Client; Konfiguration der Vue-Routen

Weitere Module, wie z.B. die Ideensammlung "ideas" befinden sich im Unterordner "modules". Die Struktur innerhalb des Unterverzeichnisses "modules/ideas" entspricht genau der oben beschriebenen, natürlich mit der Einschränkung, dass nur die zusätzlichen Inhalte aufgeführt sind, die für die Ideensammlung benötigt werden.

Empfohlene Entwicklungsumgebung

  • Betriebssystem: Grundsätzlich ist die Entwicklung unter jedem Betriebssystem möglich, sinnvoll ist es, ein Unix-ähnliches System wie z.B. Linux oder MacOs zu nutzen.
  • Editor: Gut geeignet ist der Editor Atom in Kombination mit dem Plugin language-vue
  • Browser: Sinnvoll ist es, die Anwendung bei Tests sowohl in Firefox, Chromium und Safari zu testen - in der Regel funktioniert die Unterstützung in allen drei Browser absolut identisch

Entwicklung / Produktion

  • Als Entwickler sollen Änderungen grundsätzlich nur in den dev Zweig committed werden
  • Es gibt zwei verschieden Modi, mit denen der Server gestartet werden kann, "development" und "production", für diese werden zwei verschiedene Server-Konfigurationen hinterlegt ("server.config.development.json" und "server.config.production.json")
  • Welchen Modus der Server wählt, wird über die Umgebungsvariable "NODE_DEV" definiert, siehe Skript "bin/serverDev.sh"
  • Während der Entwicklung können Server und Client-Build Prozesse mittels "npm run dev" simultan gestartet werden.

Starten mittels "npm run dev"

  • Server startet bei Änderungen automatisch neu
  • Server gibt debug Meldungen auf der Konsole auf
  • Webpack überwacht Änderungen am Client Code und aktualisiert /dist automatisch (man muss im Browser natürlich dennoch F5 drücken, um die Anwendung zu aktualisieren)

Start mittels "npm start"

  • Keine debug Meldungen am Server, kein automatischer Neustart bei Änderungen
  • Voraussetzung: Client Code muss zuvor mittels "npm run build" erzeugt worden sein

Updates

Die Anwendung nutzt eine Vielzahl externer JavaScript Bibliotheken, die während der Installation alle mittels "npm install" installiert werden (sowohl die Client- als auch die Server-seitigen). Es ist immer möglich, dass in diese Bibliotheken Sicherheitslücken auftreten, daher sollten sie regelmäßig mittels "npm update" aktualisiert werden. Anschließend ist ein Test nötig, ob die Anwendung noch korrekt gebaut und gestartet werden kann, evtl. auch ein voller Test der Funktion (bei kritischen Updates).