VDI 2770 Open Toolkit

Verwendete Libraries und nützliche Links

Webanwendung

• UI: Vue.js v2
• Komponenten: Vuetify
• Icons: Material Design Icons
• Plattform: plusmeta

VDI-2770-Generierung

• Zip: JSZip
• RDF/XML: xmlbuilder-js

Backend

• Build: Vue CLI / Webpack
• Linting: ESLint
• Transpiling: Babel
• Fehlerreporting: Sentry (nicht aktiviert)

Entwicklungsumgebung

Voraussetzungen

• git ist installiert (Prüfen mit git --version, Download)
• node/npm ist installiert (Download)
• VS Code ist installiert (Download)
  • alternativ ist natürlich auch jeder andere Editor möglich

Einrichtung VS Code Erweiterungen

Folgende Erweiterungen sollten über die Ansicht "File > Preferences > Extensions" innerhalb von VS Code installiert werden:

• GitLens
• ESLint
• Vetur
• Vue i18n Ally

Folgende Erweiterungen können über die Ansicht "File > Preferences > Extensions" innerhalb von VS Code installiert werden:

• German Language Pack for Visual Studio Code
• Beautify
• vuetify-vscode

Git-Authentifizierung

Eine der folgenden Möglichkeiten:

• Über VS Code HTTPS
  • Immer Eingabe von Benutzername/Kennwort in VS Code
  • Keine weiteren Tools notwendig
• Über systemweites SSH
  • Keine Eingabe von Benutzerinformationen notwendig
  • Public Key muss bei GitHub unter Account hinterlegt sein
  • Auf Windowssystemen ist die Installation von PuTTY notwendig

Allgemeine Vorbereitung

Die folgenden Tools werden global installiert. Auf Linux/macOS-System ist unter Umständen die Installtion mit Root-Rechten erforderlich (sudo)

• Vue Command Line Tools (Vue CLI) installieren

npm install -g @vue/cli

• ESLint installieren

npm install -g eslint

Installation

Nach erfolgreicher Git-Authentifizierung, folgende Aktionen in VS Code ausführen:

• VS Code im gewünschten Arbeitsverzeichnis öffnen (vorzugsweise C:\Work)
• CTRL-SHIFT-P (Befehlspalette)
• Git: Klonen auswählen
  • Die Adresse des Git-Repositories eingeben (endet mit .git)
  • Alternativ per SSH verbinden
• CTRL-SHIFT-Ö (neues Terminal)
• Sicherstellen, dass man sich im gewünschten Arbeitsverzeichnis befindet (C:\Work\vdi2770-open-toolkit)
• npm install

Lokale Instanz starten

Es gibt mehrere Möglichkeiten, eine lokale Instanz in VS Code zu starten:

• über die Seitenleiste "Explorer" im Reiter "NPM-Skripts" im Eintrag serve das Symbol ▷ wählen.
• über das integrierte Terminal den Befehl vue ui eingeben. In der sich öffnenden Web-Ansicht kann über die Aufgabe "serve" der Button "App öffnen" gewählt werden.

Außerhalb von VS Code

• im Arbeitsverezichnis (./vdi2770-open-toolkit) den Befehl npm run-script serve ausführen.

Pull Request testen

Es gibt mehrere Möglichkeiten, lokal einen Pull Request (PR) zu testen. Fast immer wird der Name des Branches benötigt, der dem PR zugeordnet ist. Dieser wird in Bitbucket in der PR-Ansicht angezeigt.

Nur VS Code (über Befehlspalette)

• Befehl "Von allen Remotes holen" ausführen
• Befehl "Auschecken an..." ausführen
• PR-Branch suchen und auswählen
• Lokale Instanz starten (s.o.)

Kommandozeile oder andere IDE

• git fetch ausführen
• git checkout {PR-Branch} ausführen
• npm run-script serve ausführen
• Testen