Das Dokument beschreibt die Installation & Konfiguration der für das Praktikum und den Beleg in Software Enigneering I + II benötigten Software Git, Asciidoctor und Visual Studio Code.
1. Installation
1.1. Git
Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. - https://git-scm.com/
$ git --version
git version 2.32.0 (Apple Git-132)
1.1.1. Windows
Laden und installieren Sie sich Git von der offiziellen Projektseite: git-scm.com/downloads. Es können die Standardeinstellungen bei der Installation übernomen werden. Dabei wird Git samt der Git Bash installiert.
1.1.2. Linux und macOS
In der Regel ist Git standartdmäßig vorhanden, so dass hier keine weitere Installation notwendig ist. Alternativ den Hinweisen auf git-scm.com/downloads folgen.
1.2. Visual Studio Code
Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. - https://code.visualstudio.com/docs
1.2.1. Windows, Linux und macOS
Laden und installieren Sie sich Visual Studio Code von der offiziellen Projektseite: code.visualstudio.com/download.
1.3. Asciidoctor
Asciidoctor is a fast, open source text processor and publishing toolchain for converting AsciiDoc content to HTML5, DocBook, PDF, and other formats. Asciidoctor is written in Ruby and runs on all major operating systems. - Asciidoctor
Folgend werden drei Varianten gezeigt, wie Asciidoctor installiert werden kann. Die erste Variante ist für den Anfang die einfachste, da hier nur Visual Studio Code mit der Asciidoctor Erweiterung benötgt wird.
1.3.1. Variante 1: Asciidoctor mit Visual Studio Code
Für die Unterstützung von AsciiDoc-Dokumenten (Syntax Highlighting, Live-Vorschau, PDF-Generierung …) wird eine Erweiterung (Extension) in Visual Studio Code benötigt.
-
Starten Sie Visual Studio Code
-
Gehen Sie in Visual Studio Code in die Extensions Ansicht (
) und suchen Sie nachAsciiDoc
. Installieren Sie die Erweiterung AsciiDoc von asciidoctor.
1.3.2. Variante 2: Asciidoctor lokal installiert
Für die Installation von Asciidoctor wird Ruby und die zugehörigen RubyGems[2] benötigt. Für die Erweiterung Asciidoctor Diagram wird zusätzlich Java (OpenJDK) und Graphviz benötigt.
Wird die Diagrammunterstützung von Asciidoctor nicht benötigt, muss java, asciidoctor-diagram und graphviz nicht installiert werden. |
asciidoctor |
Asciidoctor is a fast, open source text processor and publishing toolchain. |
asciidoctor-pdf |
Asciidoctor PDF is a native PDF converter for AsciiDoc |
rouge |
Rouge is a pure Ruby syntax highlighter. Use in AsciiDoc documents the attribute |
asciidoctor-diagram |
Asciidoctor Diagram is a set of Asciidoctor extensions that enable you to add diagrams, which you describe using plain text, to your AsciiDoc document. |
graphviz |
Graphviz is open source graph visualization software. Graph visualization is a way of representing structural information as diagrams of abstract graphs and networks. |
text-hyphen |
Erweitert Asciidoctor-PDF um die Möglichkeit von Silbentrennung bei der Erstellung von PDF-Dokumenten. Asciidoctor Dokumentenattribute: |
Test der Installation
Tests im Terminal, ob Ruby, Java, Asciidoctor, Graphviz und benötigte RubyGems schon installiert sind bzw. erfolgreich installiert wurden. Die Versionen können je nach Betriebssystem oder alter der Anleitung abweichen.
$ ruby -v
ruby 3.1.1p18 (2022-02-18 revision 53f5fc4236) [arm64-darwin21]
$ java --version
openjdk 17.0.2 2022-01-18
OpenJDK Runtime Environment (build 17.0.2+8-86)
OpenJDK 64-Bit Server VM (build 17.0.2+8-86, mixed mode, sharing)
$ asciidoctor -v
Asciidoctor 2.0.17 [https://asciidoctor.org]
Runtime Environment (ruby 3.1.1p18 (2022-02-18 revision 53f5fc4236) [arm64-darwin21]) (lc:UTF-8 fs:UTF-8 in:UTF-8 ex:UTF-8)
$ asciidoctor-pdf -v
Asciidoctor PDF 1.6.2 using Asciidoctor 2.0.17 [https://asciidoctor.org]
Runtime Environment (ruby 3.1.1p18 (2022-02-18 revision 53f5fc4236) [arm64-darwin21]) (lc:UTF-8 fs:UTF-8 in:UTF-8 ex:UTF-8)
$ dot -V
dot - graphviz version 3.0.0 (20220226.1711)
$ gem list | grep rouge
rouge (3.28.0)
$ gem list | grep asciidoctor-pdf
asciidoctor-pdf (1.6.2)
$ gem list | grep asciidoctor-diagram
asciidoctor-diagram (2.2.1)
asciidoctor-diagram-ditaamini (1.0.1)
asciidoctor-diagram-plantuml (1.2022.1)
$ gem list | grep text-hyphen
text-hyphen (1.4.1)
Windows
-
Ruby über den RubyInstaller, bspw.
Ruby 3.x (x64)
, installieren. Eine minimale Installation ohne Devkit und ohne MSYS2 development toolchain reicht.Alternativ kann über das WSL (Windows Subsystem für Linux) Ruby installiert werden. Hier kann je nach gewählter Distribution eine Ruby Version dabei sein. Andernfalls entsprechend für das gewählte Linux nachinstallieren.
-
Asciidoctor und benötigte Tools per RubyGems über das Terminal installieren:
$ gem install asciidoctor $ gem install asciidoctor-pdf $ gem install rouge $ gem install asciidoctor-diagram $ gem install text-hyphen
-
Java OpenJDK über Adoptium oder Azul Zulu laden und installieren. Es ist egal ob die JDK oder JDK (LTS) Version genommen.
-
Graphviz über die Downloadseite laden und installieren:
-
Direktlink: Stable Windows install packages → 10/cmake/Release/x64/ → graphviz-install-2.44.1-win64.exe
-
-
Graphviz Dot fertig konfigurieren:
-
oder PowerShell (Administrator) öffnen
-
In das bin Verzeichnis der Graphviz-Installation wechseln
cd C:\Program Files\Graphviz 2.44.1\bin
unddot -c
ausführen:Abbildung 1. Screenshot: Eingabeaufforderung (Administrator)Hinweise zum Setzen der Umgebungsvariable
GRAPHVIZ_DOT
Das Anlegen der Umgebungsvariable
GRAPHVIZ_DOT
ist nur notwendig, wenn die Graphviz Installation nicht im Standardpfad liegt bzw. ein Fehler auftaucht, welcher besagte Umgebungsvariable vermisst.-
-Taste drücken und
umgebungsvariable
eingeben -
Systemumgebungsvariablen bearbeiten auswählen
-
In den Systemeigenschaften den Umgebungsvariablen… Button betätigen
-
Im oberen Bereich Benutzervariablen über den Button Neu… folgende Umgebungsvariable anlegen:
-
Name der Variable:
GRAPHVIZ_DOT
-
Wert der Variable: über Datei durchsuchen… in das Installationsverzeichnis von Graphviz wechseln und im Ordner bin die dot.exe auswählen, bspw.:
C:\Program Files\Graphviz 2.44.1\bin\dot.exe
-
-
Mit OK übernehmen und das Umgebungsvariablen-Fenster ebenfalls mit OK schließen
-
Terminal und Visual Studio Code neustarten
-
-
Screenshot: Windows 10 mit Visual Studio Code unter VirtualBox
Beim wiederholten Generieren nach erfolgreicher Installation kann es sein, dass immer noch die alten fehlerhaften Diagrammbilder angezeigt werden. Hier hilft es die alten Diagrammbilder vorher zu löschen. In Praktikum 4 wären das der Ordner .asciidoctor und der Ordner images/diagrams. |
Linux
-
Ruby per Paketverwaltungssystem installieren, bspw. unter Ubuntu mit:
$ sudo apt-get install ruby
-
Asciidoctor und benötigte Tools per RubyGems über das Terminal installieren:
$ gem install asciidoctor $ gem install asciidoctor-pdf $ gem install rouge $ gem install asciidoctor-diagram $ gem install text-hyphen
-
Java OpenJDK über die Packetquellen oder über Adoptium oder Azul Zulu laden und installieren. Es ist egal ob die JDK oder JDK (LTS) Version genommen wird.
-
Für die lokale Generierung der Diagramme wird noch Graphviz benötigt und kann über die Packetquellen (Alternativ entsprechende Downloadseite) installiert werden:
$ sudo apt-get install graphviz
macOS
-
Homebrew nach zugehöriger Anleitung installieren.
-
Ruby per Homebrew über das Terminal installieren (alternative Anleitung):
% brew install ruby
Zusätzlich muss noch die Umgebungsvariable
PATH
für die mit Homebrew installierte Ruby Version angepasst werden:Hinweise: Anpassen der
PATH
-Variable-
Im Terminal die verwendete Shell und Architektur des Macs identifizieren:
Shell% echo $SHELL /bin/zsh
Architektur% uname -m arm64 oder x86_64
-
Die Konfigurationsdatei der verwendeten Shell .zshrc (.bashrc) zum Bearbeiten öffnen:
% open -e ~/.zshrc #oder % vi ~/.zshrc
-
In der Konfigurationsdatei die
PATH
-Variable anpassen. Dazu, entsprechend der Architektur des Macs, am Ende folgendes hinzufügen:Mac mit Apple-Chip (arm64)if [[ -d "/opt/homebrew/opt/ruby/bin" ]]; then export PATH="/opt/homebrew/opt/ruby/bin:$PATH" export PATH="$(gem environment gemdir)/bin:$PATH" fi
Mac mit Intel-Prozessor (x86_64) oder Rosettaif [[ -d "/usr/local/opt/ruby/bin" ]]; then export PATH="/usr/local/opt/ruby/bin:$PATH" export PATH="$(gem environment gemdir)/bin:$PATH" fi
Alternativ beides per IF-ELSEif [[ `uname -m` = "arm64" && -d "/opt/homebrew/opt/ruby/bin" ]]; then # arm64 (apple) export PATH="/opt/homebrew/opt/ruby/bin:$PATH" elif [[ `uname -m` = "x86_64" && -d "/usr/local/opt/ruby/bin" ]]; then # x86_64 (intel) export PATH="/usr/local/opt/ruby/bin:$PATH" fi gem_path="$(gem environment gemdir)/bin" && export PATH="$gem_path:$PATH"
-
Das Terminal beenden und neustarten oder mit
source ~/.zshrc
die geänderte Konfiguration neuladen lassen.
-
-
Asciidoctor Tools per RubyGems über das Terminal installieren:
$ gem install asciidoctor $ gem install asciidoctor-pdf $ gem install rouge $ gem install asciidoctor-diagram $ gem install text-hyphen
-
Java OpenJDK über das Terminal installieren:
$ brew install openjdk
Alternativ über Adoptium oder Azul Zulu in passender Architektur laden und installieren. Es ist egal ob die JDK oder JDK (LTS) Version genommen wird.
Hinweise: OpenJDK Download Variante
$ cd ~/Downloads $ tar -xf openjdk-17.0.2_macos-aarch64_bin.tar.gz $ sudo mv ~/Downloads/jdk-17.0.2.jdk /Library/Java/JavaVirtualMachines
-
Für die lokale Generierung der Diagramme wird noch Graphviz benötigt:
$ brew install graphviz
1.3.3. Variante 3: Asciidoctor mit Docker
Voraussetzung für die Verwendung dieser Variante ist eine vorhandene Installation von Docker. |
Variante: Interaktive Shell
In dieser Variante wird das Generieren der Dokumente über einen Asciidoctor Docker Container gelöst. Die Vorschau des Dokumentes in VS Code erfolgt über die Asciidoctor Erweiterung (JavaScript).
-
In das lokale Projektverzeichnis
my-asciidoctor-project
wechseln und Docker Container mit interaktiver Shell im Terminal (bspw. von VS Code) starten:% cd my-asciidoctor-project/ % docker run -it -v "$(pwd):/documents/" asciidoctor/docker-asciidoctor (1) (2)
1 Im Docker Container ist das Projektverzeichnis im Verzeichnis /documents
gemountet.2 Der angegebene Asciidoctor Docker Container asciidoctor/docker-asciidoctor ist vom Asciidoctor Projekt und enthält alle relevanten Tools. Alternativ direkt mit Pfad zum Projektverzeichnis starten:
% docker run -it -v "/path/to/my-asciidoctor-project/:/documents/" asciidoctor/docker-asciidoctor
-
Prüfen, ob lokaler Projektinhalt im Docker Container im
/documents
Verzeichnis verfügbar ist:bash-5.1# pwd /documents bash-5.1# ls document.adoc ...
-
Dokument mit Asciidoctor-Befehl im Docker Container als HTML/PDF erstellen:
bash-5.1# asciidoctor document.adoc bash-5.1# asciidoctor-pdf document.adoc bash-5.1# asciidoctor -r asciidoctor-diagram document.adoc bash-5.1# asciidoctor-pdf -r asciidoctor-diagram document.adoc
Das Ergebnis liegt anschließend im Projektverzeichnis.
-
Docker Container in der interaktiver Shell mit
exit
beenden:bash-5.1# exit
Variante: Dev Container in Visual Studio Code
In dieser Variante wird das Projektverzeichnis innerhalb von Visual Studio Code in einem zugehörigen Dev Container gestartet. Das Generieren und die Vorschau geschieht über den Asciidoctor Docker Container.
-
Installation der VS Code Erweiterung: Remote - Containers
-
Projektverzeichnis über
in VS Code öffnen -
Im geöffneten Projektverzeichnis wird ein Ordner .devcontainer mit den Dateien devcontainer.json und Dockerfile erstellt.
-
Folgenden Inhalte für die Datei devcontainer.json übernehmen:
devcontainer.json{ "name": "Asciidoctor", (1) "context": "..", (2) "dockerFile": "Dockerfile", (3) "extensions": [ (4) "asciidoctor.asciidoctor-vscode", "jebbs.plantuml" ], "settings": { (5) "asciidoc.asciidoctor_command": "asciidoctor -r asciidoctor-diagram", "asciidoc.preview.useEditorStyle": false, "asciidoc.use_asciidoctor_js": false } }
1 Sets the name of the dev container 2 Sets the run context to one level up instead of the .devcontainer folder. 3 Update the 'dockerFile' property if you aren’t using the standard 'Dockerfile' filename. 4 Add the IDs of extensions you want installed when the container is created. 5 Set default container specific settings.json values on container create. Enthält den Namen, den Ort des zugehörigen Dockerfiles und die für den Container von VS Code benötigten Erweiterungen mit den zugehörigen Einstellungen.
-
Folgenden Inhalte für die Datei Dockerfile übernehmen:
DockerfileFROM asciidoctor/docker-asciidoctor
Enthält die Angabe des zu verwendenden Asciidoctor Docker Containers asciidoctor/docker-asciidoctor vom Asciidoctor Projekt.
-
In VS Code die View > Command Palette… öffnen und
Remote-Containers: Reopen in Container
auswählen.Abbildung 2. Screenshot: Laufender Dev Container in VS CodeDie Vorschau und das Terminal in VS Code nutzen jetzt den Asciidoctor Docker Container.
-
Beenden mit Rechtsklick auf Dev Container: Asciidoctor (links unten) …
Close Remote Connection
oderReopen folder localy
2. Konfiguration
2.1. Git-Identität
Legen Sie Ihre lokale Git-Identität in der globalen Git-Konfiguration fest:
$ git config --global user.name "Vorname Nachname"
$ git config --global user.email s00000@informatik.htw-dresden.de
Ausgewählte Inhalte bzw. alles kann mit folgenden Git-Kommandos angezeigt werden:
$ git config --global user.name
Vorname Nachname
$ git config --global user.email
s00000@informatik.htw-dresden.de
$ git config --list
...
Hinweise für verschiedene Git-Identitäten (Privat, Studium, Arbeit, …)
Arbeiten Sie auf Ihrem (privaten) Rechner mit verschiedenen Git-Identitäten (andere E-Mail für Privat, Studium, Arbeit, …), können Sie auch eine spezifische Konfiguration je Repository anlegen.
Befehle wie oben, nur ohne --global
und innerhalb ihres Repository-Verzeichnisses ausgeführt:
$ git config user.name "Vorname Nachname"
$ git config user.email s00000@informatik.htw-dresden.de
Alternativ gibt es auch die Möglichkeit Conditional includes zu verwenden. Hier kann man bspw. Git-Konfigurationen abhängig von der Verzeichnisstruktur setzen:
[user]
name = Vorname Nachname
email = vorname.nachname@private.de
[includeIf "gitdir:~/Studium/"]
path = "~/.gitconfig_studium"
[user]
name = Vorname Nachname
email = s00000@htw-dresden.de
2.2. GitHub - Personal access token verwenden
Eine Möglichkeit für die Authentifizierung zu GitHub über die Shell/Terminal bzw. Visual Studio Code ist der Personal access token.
Mit den Access Tokens (Personal access tokens) können Anwendungen gezielt eingeschränkte Zugriffsmöglichkeiten gegeben oder entzogen werden, ohne das Accountpasswort preiszugeben.
-
Legen Sie auf GitHub über
einen neuen Token bspw.Privater Rechner
mit einer unendlichen Gültigkeit und nur dem Scoperepo
an.Der Personal access token ist nur nach dem Erstellen zu sehen und kann danach nicht wieder angezeigt werden! -
Führen Sie im Terminal (Windows bspw. Power Shell) ein
git clone
oder bei existierendem Repositorygit pull
durch. Dabei wird der Login abgefragt und in der Regle im Login-Manager (Credential Manager) des Systems hinterlegt.Wird nach einem Passwort gefragt, wird stattdessen der eben angelegte Personal access token verwendet.
Bei der Frage nach der Authentication Methode entsprechend 2 für Personal access token wählen.Ausgabe: Windows - PowerShell
> git clone https://github.com/<account>/htwd-se-example-project.git Cloning into 'htwd-se-example-project'... Select an authentication method for 'https://github.com/': 1. Web browser (default) 2. Personal access token option (enter for default): 2 Enter GitHub personal access token for 'https://github.com/'... Token: remote: Enumerating objects: 10, done. remote: Counting objects: 100% (10/10), done. remote: Compressing objects: 100% (8/8), done. remote: Total 10 (delta 0), reused 4 (delta 0), pack-reused 0 Receiving objects: 100% (10/10), done.
Ausgabe: Linux und macOS - Terminal
% git clone https://github.com/<account>/htwd-se-example-project.git Klone nach 'htwd-se-example-project' ... Username for 'https://github.com': <account> Password for 'https://<account>@github.com': remote: Enumerating objects: 10, done. remote: Counting objects: 100% (10/10), done. remote: Compressing objects: 100% (8/8), done. remote: Total 10 (delta 0), reused 4 (delta 0), pack-reused 0 Receiving objects: 100% (10/10), done.
2.3. Visual Studio Code
2.3.1. Anpassung der AsciiDoc Extension
Die Einstellungen finden Sie unter: Visual Studio Code über
.Vorschau und Generierung mit AsciiDoc Extension
-
Asciidoc > Preview: Use Editor Style: (deaktiviert)
-
Asciidoc > PDF: Engine:
asciidoctor-pdf
-
Asciidoc > Extensions: Enable Kroki: (aktiviert)
Verwendung der lokal installierten Asciidoctor Version
Sind die Asciidoctor Tools lokal installiert, kann die Erweiterung statt der integrierten JavaScript-Variante direkt die Asciidoctor-Kommandos verwenden. Dazu sind folgende Einstellungen anzupassen:
Seit Version 3.1 der Asciidoctor Erweiterung ist die Asciidoctor CLI Unterstützung entfernt worden. Somit wird nur noch die integrierte und nicht mehr die lokal installierte Version für die Vorschau und Generierung innerhalb von Visual Studio Code verwendet. Einzig für die PDF-Generierung ist es noch möglich die loakl installierte Version zu Konfigurieren. |
-
Asciidoc > PDF: Asciidoctor PDF Command Path:
asciidoctor-pdf
-
Asciidoc > PDF: Asciidoctor PDF Command Args:
-r,asciidoctor-diagram
2.3.2. Hilfreiche Erweiterungen (optional)
Weitere hilfreiche Erweiterungen für Visual Studio Code wären:
-
Trailing Spaces … highlight trailing spaces and delete them in a flash
-
Markdown Preview Github Styling … changes VS Code’s built-in markdown preview to match Github’s styling
-
PlantUML … rich PlantUML support for Visual Studio Code
-
Git Graph … View a Git Graph of your repository, and perform Git actions from the graph
2.3.3. Bugs & Bugfixes
-
Funktioniert in Visual Studio Code die Anzeige von Bildern in der Vorschau eines AsciiDoc-Dokumentes nicht, aber beim Rendern über das Terminal, könnte es nach obiger Konfiguration an folgendem liegen: Preview Attributes: data-uri