Kickoff Tooling

Mit diesen Aufgaben wollen wir Ihnen einen kleinen Einblick in einige Features von VSC geben. Wir haben versucht, die Aufgaben so aufzubauen, dass wenig bis kein Verständnis von HTML, CSS und JS notwendig ist, um sie zu lösen. Bei Fragen: fragen.

Vorbereitung

Gitlab Account freischalten

Schalten Sie Ihren Gitlab Account unter git-ce.rwth-aachen.de frei. Nutzen Sie dazu ihre Campus-Id Anmelde Daten.

Extensions in Visual Studio Code

Installieren Sie folgende Extensions in VS Code. Alternativ suche und installiere die Extensions direkt in VS Code.

• Live Server

Optional

• Prettier
• Live Share
• Live Preview
• Custom Properties
• PlatformIO IDE
• Git Graph

Aufgaben

1. SSH Key Anlegen (30 min)

• SSH Key Generieren

Öffnen Sie das Terminal und führen Sie die folgenden Befehle aus. Unter Windows können Sie alternativ auch Git Bash verwenden. Eine Passphrase muss nicht gesetzt werden.

1. Erstellen einen neuen SSH Key. Ko

ssh-keygen -t ed25519 -C "<comment>"

1. Starte den SSH-Agenten im Hintergrund.

# macOS
eval "$(ssh-agent -s)"

# windows
Get-Service -Name ssh-agent | Set-Service -StartupType Manual
Start-Service ssh-agent

1. Überprüfe, ob eine ~/.ssh/config Datei existiert.

vim ~/.ssh/config

1. Falls die Datei nicht existiert, erstelle sie und ergänze folgende Zeilen.

Host *
  AddKeysToAgent yes
  IdentityFile ~/.ssh/id_ed25519

1. Hinterlege die neue Identität.

ssh-add ~/.ssh/id_ed25519

1. Öffne git-ce.rwth-aachen.de/-/profile/keys und hinterlege den zuvor erstellten Key deinem Account.

cat ~/.ssh/id_ed25519.pub

2. Repository in Gitlab forken. (15 min)

1. Forken Sie folgendes Repository git-ce.rwth-aachen.de/micgn/webdev/frontend-development/kickofff und fügen Sie es ihrem Gitlab Namespace hinzu. Alle anderen Einstellungen können Sie auf den Standardwerten belassen. Anschließend clonen Sie das Repository und öffnen Sie es in VS Code.

2. Navigieren Sie in ein gewünschtes Verzeichnis und führen Sie folgenden Befehle aus, um das Repository zu clonen und anschließend in VS Code zu öffnen.

# Beispiel
cd Desktop # Navigiere in das Desktop Verzeichnis
git clone git@git-ce.rwth-aachen.de:{username}/kickoff.git
cd kickoff
code . # Shell Command um VS Code zu öffnen

1. Erstellen Sie einen neuen Branch, um spätere Änderungen zu speichern.

git checkout -b kickoff

3. Änderungen auf Gitlab pushen (15 min)

1. Öffnen Sie die index.html und ergänzen Sie folgende Zeile dem Body Tag in Zeile 15, um die main.js Datei mit dem HTML Dokument zu verknüpfen.

<script type="text/javascript" src="main.js"></script>

1. Ändern Sie den Wert der myName Variable in der main.js Datei in einen beliebigen neuen Wert.

// Beispiel
const myName = "Hello, World!";

1. Bestätigen Sie Ihre Änderungen im Browser, indem Sie den Live Server starten. Sind Sie mit Ihren Änderungen zufrieden, überprüfen Sie den Status Ihres Repositories und pushen Sie anschließend Ihre Änderungen ins Remote Repository auf Gitlab

# Beispiel
git status
git add .
git commit -m "[FEATURE] link main.js to index.html"
git push origin kickoff

1. Der Branch kickoff sollte nun auf Gitlab sichtbar sein. Öffnen Sie das Repository auf Gitlab und erstellen Sie einen Merge Request. Der Branch kickoff kann anschließend lokal gelöscht werden.

git checkout main
git branch -D kickoff