Informatik/Mathematik / Software Engineering

Ziel: Kennenlernen und Erstellen von Dokumenten mit der AsciiDoc-Syntax und das Anwenden des Git-Workflows zur Versionsverwaltung

Praktikumsaufgaben Teil 2 - AsciiDoc

Überblick zum Git Workflow
Abbildung 1. Überblick zum Git Workflow
Hinweise zum Praktikum in den Windows-Laboren

Aufgrund der nicht gespeicherten Nutzer-Profile in den Windows-Laboren, sind zu jedem Praktikumsbeginn folgende Schritte durchzuführen:

Schritte zur Vorbereitung des Praktikums
  1. Git-Konfiguration C:\Users\<username>\.gitconfig wiederherstellen oder anpassen:

    per Editor in der .gitconfig
    [user]
    	name = Vorname Nachname
    	email = s00000@htw-dresden.de
    [safe]
        directory = *
    [http]
    	proxy = http://www-cache.htw-dresden.de:3128
    oder per PowerShell und Git-Kommandos
    > git config --global user.name "Vorname Nachname"
    > git config --global user.email s00000@informatik.htw-dresden.de
    > git config --global --add safe.directory *
    > git config --global http.proxy http://www-cache.htw-dresden.de:3128
  2. Visual Studio Code: Anpassen der AsciiDoc-Einstellungen:

    • Asciidoc > Preview: Use Editor Style: (deaktiviert)

    • Asciidoc > Extensions: Enable Kroki: (aktiviert)

  3. GitHub Login mit gespeichertem oder neuem Personal Access Token über die PowerShell bekanntgeben:

    Repository vorhanden
    > U:
    > cd path/to/repository/<repo-name>/
    > git pull
    Authentifizierung ...
    Repository nicht vorhanden (Home-/SAMBA-Laufwerk)
    > U:
    > cd path/to/repository/
    > git clone https://github.com/.../<repo-name>
    Authentifizierung ...
    Repository nicht vorhanden (TEMP-Laufwerk)
    > T:
    > git clone https://github.com/.../<repo-name>
    Authentifizierung ...


1. AsciiDoc Syntax kennenlernen

In den folgenden Aufgaben lernen Sie erste grundlegende Syntaxkomponenten von AsciiDoc zum Aufbau eines Dokumentes kennen. Gleichzeitig wird der Umgang mit Git und die Erstellung von Versionen in Ihrem Repository und der Abgleich zu GitHub angewendet.

Öffnen Sie im Webbrowser, für das Recherchieren der AsciiDoc-Syntax zu den einzelnen Aufgaben, die AsciiDoc Syntax Quick Reference und das AsciiDoc Language Documentation.

Aufgabe 1.1 - Überschriften, Titel, Listen

  1. Erweitern Sie Ihre Datei Beispieldokumentation.adoc wie folgt:

    == Kennenlernen der Syntax
    
    Über die Aufgaben wird das Dokument Stück für Stück aufgebaut und angepasst.
    
    === Listen
    
    .Beispiel: unsortierte Liste (1)
    // Platzhalter
    
    .Beispiel: sortierte Liste
    // Platzhalter
    1 Mit .<Name> können Abschnitte mit einem Titel benannt werden.
  2. Fügen Sie je ein Beispiel für eine unsortierte (Unordered list) und sortierte (Ordered list) Liste ein.

  3. Speichern Sie und nehmen Sie Ihre Änderungen als neue Version in Ihr lokales Git-Repository (add, commit) und Ihr Repository auf GitHub (push) auf.

Aufgabe 1.2 - Tabellen, Textformatierung

  1. Erweitern Sie die Datei Beispieldokumentation.adoc um die Überschrift === Tabellen und Textformatierung

  2. Fügen Sie folgende Tabelle (Tabelle 1, “Formatierung von Text”) für ausgewählte Textformatierungen hinzu:

    Tabelle 1. Formatierung von Text
    Formatierung Syntax Beschreibung

    bold

    *bold*

    fetter Text

    italic

    _italic_

    kursiver Text

    monospace

    `monospace`

    Text mit fester Laufweite

    bolditalic

    *_bolditalic_*

    Text mit kombinierter Formatierung

    bolditalic

    **bold**__italic__

    Text mit Formatierung innerhalb eines Wortes

    Hinweise: Weitere Formatierungsmöglichkeiten
    Tabelle 2. Erweiterte Formatierung von Text
    Formatierung Syntax Beschreibung

    mark

    #mark#

    markierter Text

    underline

    [.underline]#underline#

    unterstrichener Text

    strikethrough

    [.line-through]#strikethrough#

    durchgestrichener Text

    small

    [.small]#small#

    kleiner Text

    big

    [.big]#big#

    großer Text

    superscript

    ^super^script

    hochgestellt

    subscript

    ~sub~script

    tiefgestellt

    Hinweise: Escapen/Maskieren von Zeichen für die Formatierung

    Mit \ kann ein Zeichen und mit +...+ bzw. pass:[...] kann ein Bereich maskiert werden, so das bspw. die Zeichen *, _, # nicht als Formatierungszeichen behandelt werden.

    Tabelle 3. Sonderfall ` und `...` (Backticks):
    Formatierung Syntax Beschreibung

    `

    ```

    Backtick als inline code maskiert

    `text`

    `pass:[`text`]` , \``text`` , `++`text`++`

    Backticks-Bereich als inline code maskiert

  3. Formatieren Sie das Wort Software Engeneering so, dass es wie folgt aussieht:

    • Ziel: Software Engineering

    • Anfangsbuchstaben bold, Vokale italic und "ring" monospaced

  4. Speichern Sie und nehmen Sie Ihre Änderungen als neue Version in Ihr lokales Git-Repository und Ihr Repository auf GitHub auf.

Aufgabe 1.3 - Quellcode

  1. Fügen Sie eine Überschrift === Quellcode hinzu und betten Sie folgendes Quellcode-Beispiel ein:

    hello_world.c
    #include <stdio.h>
    
    int main(int argc, char* argv[])
    {
        printf("Hello, World!\n");
        return 0;
    }

    Fügen Sie im Dokumenten-Kopf das Attribut :source-highlighter: highlight.js hinzu, um in der Vorschau und beim HTML-Generieren Quellcode mit Syntax-Highlighting zu erhalten.

    Die PDF-Generierung unterstützt kein Syntax-Highlighting mit highlight.js. Hier muss eine lokal instalierte Variante, bspw. rouge verwendet werden: :source-highlighter: rouge.

  2. Speichern Sie und nehmen Sie Ihre Änderungen als neue Version in Ihr lokales Git-Repository und Ihr Repository auf GitHub auf.

Aufgabe 1.4 - Bilder

  1. Fügen Sie eine Überschrift === Bilder ein.

  2. Legen Sie in docs ein Verzeichnis images an. Hier wollen wir alle für das Dokument benötigten Bilder ablegen.

  3. Fügen Sie im Dokumentenkopf das Attribut :imagesdir: images hinzu, um das globale Bildverzeichnis für das Dokument festzulegen. Bei Einbindung eines Bildes reicht es nun nur den Dateinamen ohne vorangestelltes images/ anzugeben.

  4. Erstellen Sie einen Screenshot ihres Editors und legen Sie die Bilddatei in das images Verzeichnis.

  5. Binden Sie den Screenshot in ihr Dokument ein und vergeben Sie einen Bildtitel.

    Screenshot VSCode mit AsciiDoc Vorschau
    Abbildung 2. Screenshot VSCode mit AsciiDoc
  6. Speichern Sie und nehmen Sie Ihre Änderungen als neue Version in Ihr lokales Git-Repository und Ihr Repository auf GitHub auf.

Aufgabe 1.5 - Verweise

  1. Fügen Sie eine Überschrift === Verweise ein und schreiben Sie einen Text, welcher Verweise auf die in Ihrem Dokument enthaltene Überschrift: 1. AsciiDoc Syntax kennenlernen, die Tabelle: Tabelle 1, “Formatierung von Text”, den Quellcode: hello_world.c und das Bild: Abbildung 2, “Screenshot VSCode mit AsciiDoc” enthält.

    Hinweise: Verweise und IDs

    Verweise/Referenzen können auf Überschriften und IDs angewendet werden:

    Syntaxbeispiel für Verweise und IDs
    == 1. AsciiDoc Syntax
    
    [#exercise_01] (1)
    === 1.1 Aufgabe
    
    [#image_screenshot] (1)
    .Screenshot
    image::screenshot.png[]
    
    * <<1. AsciiDoc Syntax>> und <<_1_asciidoc_syntax>> (2)
    * <<exercise_01>>, <<image_screenshot>> (3)
    * <<image_screenshot, Bildschirmfoto des Editors>> (4)
    1 Eigene vergebene ID, Syntax: [[id]] oder [#id]
    2 Verweis auf Überschrift und automatisch generierte ID
    3 Verweise auf vergebene IDs
    4 Zusätzliche Angabe eines alternativen Verweisnamen

    Mit der Verwendung von :xrefstyle: und der Angabe von full, short oder basic, bei den Attributen im Dokumentenkopf, kann die Ausgabe des referenzierten Titels angepasst werden.

  2. Speichern Sie und nehmen Sie Ihre Änderungen als neue Version in Ihr lokales Git-Repository und Ihr Remote-Repository auf GitHub auf.

Aufgabe 1.6 - Includes

  1. Fügen Sie eine Überschrift === Includes ein.

  2. Legen sie parallel zu docs ein neues Verzeichnis src an.

  3. Lagern Sie den Quelltext aus Aufgabe 1.3 - Quellcode in eine extra hello_world.c Datei in das Verzeichnis src aus.

  4. Binden Sie diese Datei, limitiert auf die Zeilen der main()-Funktion, mit einem include als Quellcode-Abschnitt wie folgt ein:

    hello_world.c - main()
    int main(int argc, char* argv[])
    {
        printf("Hello, World!\n");
        return 0;
    }
    Hinweise: include

    Mit Hilfe von Includes wird das Einbetten von ausgelagerten Dokumenten und Teilen davon in ein Hauptdokument ermöglicht. Bspw. Quellcodeausschnitte oder CSV-Dateien. Ebenfalls können damit Dokumententeile in anderen Dokumenten wiederverwendet werden.

    Einbinden einer Datei oder eines Dateibereiches:
    include::path/to/sub-document.adoc[] (1)
    include::../src/hello_world.c[lines=3..7] (2)
    1 Einbettung einer gesamten Datei
    2 Es werden nur die Zeilen 3 bis 7 eingebettet
    Tabelle 4. ausgewählte Attribute

    leveloffset

    beeinflusst das Überschriftenlevel des einzubindenden Dokumentes

    indent

    beeinflusst das Einrücken des einzubindenden Bereiches

    lines

    legt den einzubindenden Bereich anhand von Zeilen fest

    tag, tags

    legt den oder die einzubindende Bereiche anhand von Tag-Bereichen fest

    Beispiel: Einbinden von mit Tags markierten Bereichen aus einem anderen Dokument

    Mit Tags können relativ einfach Dateibereiche zeilenunabhängig wiederholt in anderen Dokumenten wiederverwendet werden, ohne diese mehrfach schreiben und pflegen zu müssen.

    In dem Beispiel (an den späteren Beleg angelehnt) werden Textabschnitte aus dem Dokument system-wide_requirements.adoc bspw. in dem Dokument architecture_notebook.adoc an betreffender Stelle wiederverwendet.

    system-wide_requirements.adoc
    === Systemweite funktionale Anforderungen
    
    // tag::nfaf1[] (1)
    * *NFAF-1*: ...
    // end::nfaf1[] (2)
    
    === Zuverlässigkeit (Reliability)
    
    // tag::nfar1[]
    * *NFAR-1*: ...
    // end::nfar1[]
    1 Start-Tag mit eindeutigem Tag-Namen
    2 End-Tag für den mit dem zugehörigen Start-Tag markiertem Bereich
    architecture_notebook.adoc
    == Architektur-relevante Anforderungen
    
    === Funktional
    include::../requirements/system-wide_requirements.adoc[tag=nfaf1] (1)
    
    === Zuverlässigkeit (Reliability)
    include::../requirements/system-wide_requirements.adoc[tag=nfar1]
    1 Das tag-Attribut legt den vom Include einzubettenden Bereich fest.


2. Generieren des Ausgabeformates

Visual Studio Code - Asciidoc Extension

  1. Command Palette über Hauptmenü: View  Command Palette…​ öffnen.

    • Windows und Linux: Shift+Ctrl+P

    • macOS: Shift+Cmd+P

  2. Folgende Befehle eingeben:

    HTML

    AsciiDoc: Save HTML Document

    PDF

    AsciiDoc: Export Document as PDF

Für das Generieren der PDF mit der Asciidoc Extension wird asciidoctor-pdf lokal installiert benötigt.

In der Belegarbeit reicht die Asciidoc Extension für die Bearbeitung und Vorschau der Dokumente in Visual Studio Code. Das Erstellen von PDFs kann in den Laboren oder auf der ilux150 erfolgen, da hier die benötigten Tools installiert sind.

Terminal mit lokal installierten Asciidoctor

Für die Generierung verwenden Sie im Terminal (PowerShell, Terminal in Visual Studio Code: Menü  View  Terminal) den Befehle asciidoctor bzw. asciidoctor-pdf.

HTML
$ asciidoctor Beispieldokumentation.adoc
PDF
$ asciidoctor-pdf Beispieldokumentation.adoc
($ asciidoctor -r asciidoctor-pdf -b pdf Beispieldokumentation.adoc)
Hinweise zur Nutzung über die ilux150

Das Generieren der AsciiDoc-Dokumente kann auch auf dem Login-Server ilux150 der Fakultät durchgeführt werden. Hier ist die entsprechenden Asciidoctor-Umgebung installiert.

Studenten des Modules I925 (Studiengang Wirtschaftsingenieurwesen) haben keinen Zugriff auf die ilux150.

Variante 1 (erstmalig): Repository Clone auf der ilux150 nicht vorhanden

  1. Loggen Sie sich per SSH oder über einen SSH-Client (Windows: bspw. Putty) auf den Linux-Server ilux150 ein:

    $ ssh s00000@ilux150.informatik.htw-dresden.de
  2. Passen Sie, falls noch nicht geschehen, ihre Git-Konfig .gitconfig an und setzen Ihren Namen und E-Mail. (Siehe Teil 1 - Git-Konfiguration per Git-Kommando):

    $ git config --global user.name "Vorname Nachname"
    $ git config --global user.email s00000@informatik.htw-dresden.de
  3. Navigieren Sie zu dem Verzeichnis, in dem Sie eine Kopie Ihres Repositories clonen wollen.

    $ cd path/to/se1-praktikum
  4. Clonen Sie Ihr Repository htwd-se-example-project:

    $ git clone https://github.com/<username>/htwd-se-example-project.git
  5. Wechseln Sie in das eben erstellte Verzeichnis htwd-se-example-project:

    $ cd htwd-se-example-project
  6. Generieren Sie die benötigten Dokumente:

    HTML
    $ asciidoctor Beispieldokumentation.adoc
    PDF
    $ asciidoctor -r asciidoctor-pdf -b pdf Beispieldokumentation.adoc

Variante 2: Repository Clone auf der ilux150 vorhanden

  1. Loggen Sie sich per SSH oder über einen SSH-Client (Windows: bspw. Putty) auf den Linux-Server ilux150 ein:

    $ ssh s00000@ilux150.informatik.htw-dresden.de
  2. Navigieren Sie zu Ihrem Projektverzeichnis htwd-se-example-project:

    $ cd path/to/se1-praktikum/htwd-se-example-project
  3. Aktualisieren Sie Ihr Repository auf den aktuellen Stand von GitHub:

    $ git pull
  4. Generieren Sie die benötigten Dokumente:

    HTML
    $ asciidoctor Beispieldokumentation.adoc
    PDF
    $ asciidoctor -r asciidoctor-pdf -b pdf Beispieldokumentation.adoc
Arbeiten Sie in den Windows-Laboren auf Ihrem U:\-Studentenlaufwerke (SAMBA), müssen Sie es auf der ilux150 nicht erst clonen, sondern navigieren direkt zu Ihrem Repository Verzeichnis.

Aufgabe 2.1 - HTML/PDF-Generierung

  1. Generieren Sie mit der AsciiDoc Erweiterung in Visual Studio Code die HTML- und PDF-Version des AsciiDoc-Dokumentes Beispieldokumentation.adoc.

  2. Generieren Sie mit den lokal installierten Asciidoctor Tools über das Terminal (oder das in Visual Studio Code integrierte Terminal) die HTML- und PDF-Version des AsciiDoc-Dokumentes Beispieldokumentation.adoc:

    $ cd docs
    $ asciidoctor Beispieldokumentation.adoc
    $ asciidoctor-pdf Beispieldokumentation.adoc
  3. Schauen Sie sich die Ergebnisse an.

Aufgabe 2.2 - Datei .gitignore

In der Datei .gitignore werden alle Dateien, Verzeichnisse und Dateitypen festgelegt, welche Git ignorieren soll.

Um zu verhindern, dass generierbare Dateien, wie bspw. html- und pdf-Dateien, in das Repository aufgenommen bzw. deren Änderungen überwacht werden, ist es sinnvoll diese in Ihrem Repository auszuschließen.

  1. Legen Sie im Projektverzeichnis (Workspace) die Datei .gitignore mit folgendem Inhalt an:

    .gitignore
    *.html
    *.pdf
    .gitignore (komplexeres Beispiel)
    # ignore unwanted files (1)
    *~
    .DS_Store
    
    # ignore special folder '.asciidoctor'
    .asciidoctor/ (2)
    
    # ignore generated files
    docs/*.html (3)
    docs/*.pdf
    1 mit # erhält man eine Kommentarzeile
    2 Dies ist ein spezielles Verzeichnis, welches Asciidoctor beim Generieren (inkl. Vorschau) anlegt und temporäre Daten zwischenspeichert.
    3 ignoriert *.html und *.pdf Dateien nur im docs-Verzechnis
  2. Nehmen Sie die Datei .gitignore als neue Version in Ihr lokales Git-Repository und Ihr Remote-Repository auf GitHub auf.


Endergebnis

Die fertig generierten Dokumente sehen dann wie folgt aus:

Screenshot Generiertes HTML (link) und PDF (rechts)
Abbildung 3. Screenshot Generiertes HTML (link) und PDF (rechts)

Seitenübersicht