Startseite

Vibe Coding in R mit Claude Code und Docker

Vibe Coding ist wie ein Gespräch mit Ihrem Computer – Sie beschreiben das Ergebnis, Claude Code baut es, Sie testen und verfeinern. Es ist keine Magie; es ist eine neue Art zu arbeiten, bei der Sie die Vision leiten und KI die Umsetzung übernimmt. Dieses Tutorial zeigt Ihnen, wie Sie ein echtes NBA-Statistik-Dashboard erstellen, indem Sie nur natürlichsprachliche Anfragen verwenden.

Wichtige Konzepte

• Claude Code - KI-Programmierassistent, der Code basierend auf Ihren natürlichsprachlichen Anfragen schreibt, debuggt und überarbeitet
• hoopR - R-Paket, das einfachen Zugriff auf NBA-Spielerstatistiken und Spieldaten bietet
• Iterative Verfeinerung - Das zentrale Vibe-Coding-Muster: beschreiben → testen → verfeinern → funktionierende Versionen committen

Was Sie benötigen

• Abgeschlossenes Tutorial R-Programmierung in VS Code über Docker
• Abgeschlossenes Tutorial GitHub Desktop mit Claude Code verwenden
• Docker Desktop installiert und gestartet
• 25-30 Minuten

Schritt 1: Neues GitHub-Repository erstellen

• Öffnen Sie GitHub Desktop
• Klicken Sie auf File > New Repository
• Füllen Sie die Details aus:
  • Name: nba-dashboard
  • Description: NBA stats dashboard built with vibe coding
  • Local Path: Wählen Sie einen Speicherort (z.B. Dokumente oder Arbeitsordner)
  • Aktivieren Sie Initialize this repository with a README
• Klicken Sie auf Create Repository
• Klicken Sie oben auf Publish repository
• Deaktivieren Sie Keep this code private, wenn Sie es öffentlich machen möchten (optional)
• Klicken Sie auf Publish Repository

Sie haben jetzt ein lokales Git-Repository und ein Backup auf GitHub.

Schritt 2: Docker-Konfiguration kopieren

• Gehen Sie zu https://github.com/gexijin/vibe
  • Hinweis für Apple-Silicon-Macs: Diese Einrichtung ist für Intel/AMD-Prozessoren gebaut. Docker Desktop führt sie per Emulation aus. Das funktioniert, aber der erste Build und R selbst sind langsamer.
• Klicken Sie auf Code und dann auf Download ZIP
• Öffnen Sie den Datei-Explorer (File Explorer, Windows) oder den Finder (Mac) und gehen Sie zu Ihrem Ordner Downloads
• Entpacken Sie die Datei: Klicken Sie unter Windows mit der rechten Maustaste darauf und wählen Sie Alle extrahieren (Extract All); auf dem Mac doppelklicken Sie darauf
• Öffnen Sie den entpackten Ordner vibe-main. Unter Windows kann er einen weiteren Ordner mit demselben Namen enthalten; öffnen Sie diesen
• Finden Sie den .devcontainer-Ordner
  • Auf dem Mac blendet der Finder Ordner aus, deren Name mit einem Punkt beginnt. Drücken Sie Cmd+Shift+. (Punkt), um sie anzuzeigen
• Kopieren Sie den gesamten Ordner (er enthält Dockerfile und devcontainer.json)
• Navigieren Sie zu Ihrem neuen nba-dashboard-Ordner
• Fügen Sie den .devcontainer-Ordner dort ein

Ihr nba-dashboard-Ordner sollte jetzt enthalten:

• .devcontainer/ (Ordner, den Sie gerade kopiert haben)
• README.md (von GitHub Desktop erstellt)
• .git/ (versteckter Ordner für Versionskontrolle)

Schritt 3: Projekt im Container öffnen

• Starten Sie die Docker Desktop-App unter Windows oder Mac. Lassen Sie sie im Hintergrund laufen
• Öffnen Sie VS Code
• Klicken Sie auf File > Open Folder
• Navigieren Sie zum nba-dashboard-Ordner
• Klicken Sie auf Ordner auswählen (Windows) oder Öffnen (Mac) – bei englischer Anzeige heißen die Schaltflächen Select Folder bzw. Open
• Eine Benachrichtigung erscheint unten rechts: Folder contains a Dev Container configuration file
• Klicken Sie auf Reopen in Container
• Wenn Sie die Benachrichtigung nicht sehen, klicken Sie auf das ><-Symbol in der unteren linken Ecke und wählen Sie Reopen in Container
• VS Code baut den Docker-Container (dauert beim ersten Mal 5-10 Minuten)
• Beobachten Sie die Fortschrittsanzeige mit den Build-Schritten
• Nach Abschluss zeigt das ><-Symbol in der unteren linken Ecke Dev Container: R in Docker (AMD64) an

Schritt 4: Claude Code starten

• Klicken Sie in VS Code auf Terminal > New Terminal
• Sie sind jetzt innerhalb des Docker-Containers
• Geben Sie diesen Befehl ein, um Claude Code zu starten:

claude

• Ein Browserfenster öffnet sich zur Authentifizierung
• Klicken Sie auf Continue with Google oder Continue with Email
• Melden Sie sich mit Ihrem Claude-Konto an. Claude Code benötigt ein kostenpflichtiges Claude-Abo (zum Beispiel Pro oder Max) oder ein Anthropic-Console-Konto – der kostenlose Plan enthält es nicht
• Wenn der Browser einen Code anzeigt, statt zu melden, dass Sie fertig sind, kopieren Sie den Code, wechseln Sie zurück zum VS Code-Terminal, fügen Sie ihn bei der Aufforderung Paste code here if prompted ein und drücken Sie Enter
• Wenn sich kein Browserfenster öffnet, drücken Sie c, um den Anmeldelink zu kopieren, und fügen Sie ihn in Ihren Browser ein
• Nach erfolgreicher Authentifizierung kehren Sie zum VS Code-Terminal zurück
• Wenn Sie gefragt werden, ob Sie den Dateien in diesem Ordner vertrauen, wählen Sie Yes
• Sie sehen Claudes Willkommensnachricht

Claude Code läuft jetzt und ist bereit für Ihre Anfragen.

Schritt 5: Erster Vibe - NBA-Daten abrufen

Jetzt beginnt der Spaß. Anstatt Dokumentation nachzuschlagen, beschreiben Sie einfach, was Sie wollen.

• Geben Sie im Claude Code-Terminal ein:

Installiere das hoopR-Paket und lade NBA-Spielerstatistiken für die neueste Saison, für die Daten vorliegen. Zeige mir die Top 10 Spieler nach Gesamtpunkten. Stelle es als schöne Tabelle dar.

• Drücken Sie Enter
• Beobachten Sie, was Claude tut:
  • Das hoopR-Paket installieren
  • R-Code zum Laden der Daten schreiben
  • Ein Skript erstellen, um die Top-Scorer anzuzeigen
  • Den Code ausführen
• Überprüfen Sie die Ausgabe mit Spielernamen, Teams und Punkten

Sie haben gerade Vibe Coding verwendet! Kein Durchsuchen von Dokumentation, kein Trial-and-Error – einfach beschreiben und testen.

Speichern Sie Ihren Fortschritt: Bitten Sie Claude, mit Git zu committen, oder machen Sie dies selbst in GitHub Desktop:

Committe diese Änderungen.

Schritt 6: Zweiter Vibe - Daten erkunden

Bevor Sie ein Dashboard bauen, verstehen Sie, welche Daten Sie haben.

• Geben Sie im Claude Code-Terminal ein:

Zeige mir, welche Spalten in diesen NBA-Daten verfügbar sind. Erstelle dann eine Zusammenfassung mit: Anzahl der Spieler, Anzahl der Teams, durchschnittliche Punkte pro Spieler, und wer die meisten Assists und Rebounds hat.

• Drücken Sie Enter
• Claude erkundet den Datensatz und zeigt Ihnen interessante Statistiken
• Schauen Sie sich die Ausgabe an, um die verfügbaren Spalten zu sehen, etwa Spielername, Team, Punkte, Assists und Rebounds

Diese Exploration hilft Ihnen zu entscheiden, was in Ihr Dashboard kommt.

Speichern Sie Ihren Fortschritt: Bitten Sie Claude zu committen oder nutzen Sie GitHub Desktop.

Schritt 7: Dritter Vibe - Einfache Shiny-App erstellen

Zeit, das interaktive Dashboard zu bauen.

• Geben Sie im Claude Code-Terminal ein:

Erstelle eine Shiny-App in einer Datei namens app.R, die eine interaktive Tabelle mit NBA-Spielerstatistiken zeigt. Füge Spalten für Spielername, Team, Punkte, Assists und Rebounds hinzu. Füge einen Schieberegler hinzu, um Spieler nach Mindestpunktzahl zu filtern (von 0 bis 1000). Mache es sauber und professionell.

• Drücken Sie Enter
• Claude erstellt app.R mit einer vollständigen Shiny-Anwendung
• Warten Sie, bis Claude die Datei fertig geschrieben hat

Schritt 8: Die Shiny-App ausführen

Testen Sie Ihr Dashboard, um zu sehen, ob es funktioniert.

• Klicken Sie im VS Code Explorer (linke Seitenleiste) auf app.R, um die Datei zu öffnen
• Schauen Sie oben rechts in den Editor
• Finden Sie die ▶-Schaltfläche mit einem Dropdown-Pfeil
• Klicken Sie auf das Dropdown und wählen Sie Run Shiny App
• Die App startet und das Dashboard öffnet sich in einem Vorschau-Tab innerhalb von VS Code (um Ihren normalen Browser zu verwenden, öffnen Sie unten den Tab Ports und klicken Sie auf das Globus-Symbol neben dem Port)
• Versuchen Sie, den Punkte-Schieberegler zu bewegen – die Tabelle filtert in Echtzeit
• Scrollen Sie durch die Spielerdaten
• Committen Sie Änderungen, wenn die App funktioniert

Wenn etwas nicht funktioniert, kopieren Sie alle Fehlermeldungen und fügen Sie sie bei Claude ein, um sie zu beheben.

Schritt 9: Vierter Vibe - Visualisierung hinzufügen

Tabellen sind nützlich, aber Visualisierungen erzählen bessere Geschichten.

• Zurück im Claude Code-Terminal, geben Sie ein:

Füge unterhalb der Tabelle ein Balkendiagramm hinzu, das die Top 15 Spieler nach Punkten zeigt. Verwende verschiedene Farben für jeden Spieler. Füge auch ein Streudiagramm hinzu, das die Beziehung zwischen Punkten und Assists für alle gefilterten Spieler zeigt.

• Drücken Sie Enter
• Claude aktualisiert app.R mit Visualisierungscode
• Klicken Sie erneut auf Run Shiny App, um die App neu zu laden
• Wenn sich die Vorschau nicht ändert, klicken Sie oben im Vorschau-Tab auf den Pfeil zum Neuladen (oder aktualisieren Sie Ihren Browser)
• Sie sehen jetzt ein buntes Balkendiagramm und ein Streudiagramm
• Bewegen Sie den Schieberegler – alle Visualisierungen aktualisieren sich zusammen

Das ist Vibe Coding in Aktion: Feature beschreiben, testen, iterieren.

Schritt 10: Fünfter Vibe - Team-Filter hinzufügen

Machen Sie das Dashboard interaktiver mit Teamauswahl.

• Geben Sie im Claude Code-Terminal ein:

Füge ein Dropdown-Menü hinzu, um Spieler nach Team zu filtern. Platziere es oben. Wenn ich ein Team auswähle, zeige nur Spieler aus diesem Team. Füge eine "Alle Teams"-Option hinzu, um alle anzuzeigen.

• Drücken Sie Enter
• Claude fügt den Team-Filter hinzu
• Klicken Sie oben im Vorschau-Tab auf den Pfeil zum Neuladen (oder aktualisieren Sie Ihren Browser)
• Testen Sie das Dropdown – wählen Sie verschiedene Teams wie Lakers, Warriors, Celtics
• Beobachten Sie, wie Tabelle und Diagramme sich für jedes Team aktualisieren

Sie bauen ein professionelles Dashboard durch ein Gespräch.

Schritt 11: Überprüfen und Committen

Überprüfen Sie vor dem Committen, was Claude erstellt hat.

• Klicken Sie im VS Code Explorer auf app.R, um es zu öffnen
• Überfliegen Sie den Code – beachten Sie das UI-Layout, die Server-Logik und den Plotting-Code
• Sie müssen nicht jede Zeile verstehen, sollten aber ein Gefühl für die Struktur bekommen
• Öffnen Sie GitHub Desktop
• Sie sehen app.R in der Liste (als neue Datei oder als geändert, falls Sie sie bereits in einem früheren Schritt committet haben)
• Das rechte Panel zeigt den hinzugefügten Code in Grün
• Geben Sie im Summary-Feld unten links ein:

Erstelle NBA-Dashboard mit Team-Filter und Visualisierungen

• Klicken Sie unten auf die blaue Commit-Schaltfläche (sie lautet etwa Commit 1 file to main)
• Klicken Sie auf Push origin, um auf GitHub zu sichern

Sie haben Ihre erste funktionierende Version gespeichert!

Schritt 12: Iterieren und Verbessern

Vibe Coding glänzt beim Iterieren. Versuchen Sie, Funktionen hinzuzufügen, indem Sie sie beschreiben:

Beispielanfragen an Claude:

• “Füge ein Suchfeld für Spieler hinzu, damit ich einen Spielernamen eingeben und zu ihm springen kann”
• “Zeige die Team-Logos neben den Teamnamen im Dropdown”
• “Füge ein Liniendiagramm hinzu, das den Punkte-pro-Spiel-Trend für das ausgewählte Team zeigt”
• “Mache die Tabelle sortierbar, indem man auf Spaltenüberschriften klickt”
• “Füge Tooltips zum Streudiagramm hinzu, die Spielernamen zeigen, wenn ich darüber fahre”

Nach jedem erfolgreichen Feature:

• Testen Sie es im Browser
• Wenn es funktioniert, committen Sie mit GitHub Desktop
• Wenn es nicht funktioniert, sagen Sie Claude den Fehler und bitten Sie um Korrektur
• Sobald der Fehler behoben ist, committen Sie die funktionierende Version

Schlüsselprinzipien:

• Beschreiben Sie Ergebnisse, nicht Implementierung - Sagen Sie “zeige die Top-Scorer”, nicht “verwende arrange() und head()”
• Iterieren Sie schnell - Testen → verfeinern → testen → verfeinern
• Committen Sie funktionierende Versionen - Speichern Sie jeden Erfolg, bevor Sie neue Funktionen versuchen
• Akzeptieren Sie Fehlschläge - Wenn Claudes Code nicht funktioniert, beschreiben Sie einfach den Fehler und bitten Sie um Korrektur
• Behalten Sie die Kontrolle - Sie entscheiden über Funktionen, Prioritäten und wann es gut genug ist

Jedes Mal folgen Sie dem Muster: beschreiben → testen → iterieren → committen.

Nächste Schritte

• Wenden Sie es auf Ihren Bereich an - Verwenden Sie Vibe Coding für Ihre eigenen Daten (Forschung, Geschäft, Hobbys)
• Versuchen Sie andere Pakete - Bitten Sie Claude, nflfastR für Football oder worldfootballR für Fußball zu verwenden
• Lernen Sie durch Fragen - Wenn Claude Code schreibt, fragen Sie “erkläre, was diese Funktion macht”, um R zu lernen
• Teilen Sie Ihr Dashboard - Stellen Sie es auf shinyapps.io bereit (fragen Sie Claude wie)
• Lesen Sie über Vibe Coding - Besuchen Sie IBMs Leitfaden, um mehr über diesen Programmierstil zu erfahren

Fehlerbehebung

• hoopR-Installation schlägt fehl - Überprüfen Sie Ihre Internetverbindung; das Paket lädt Daten aus dem Web herunter. Versuchen Sie install.packages("hoopR") in einem R-Terminal auszuführen, um detaillierte Fehlermeldungen zu sehen.
• Shiny-App startet nicht - Überprüfen Sie, ob die Shiny-Erweiterung installiert ist (suchen Sie “Posit.shiny” in VS Code Extensions). Überprüfen Sie das Terminal auf Fehlermeldungen und fügen Sie sie bei Claude ein.
• Keine Daten angezeigt - Das hoopR-Paket zieht Live-Daten; wenn die NBA-Saison nicht begonnen hat, gibt es möglicherweise begrenzte Daten. Bitten Sie Claude, Beispieldaten oder eine frühere Saison zu verwenden.
• Claude macht Fehler - Normal! Kopieren Sie die Fehlermeldung, fügen Sie sie bei Claude ein und sagen Sie “behebe diesen Fehler”. Vibe Coding beinhaltet Iteration und Debugging.
• Kann nicht auf GitHub pushen - Stellen Sie sicher, dass Sie in GitHub Desktop angemeldet sind und das Repository veröffentlicht haben (Schritt 1). Überprüfen Sie Ihre Internetverbindung.

Workflow-Überblick

Dieses Tutorial kombinierte mehrere Technologien in einem Workflow:

• GitHub Desktop - Versionskontrolle mit visueller Oberfläche (Repos erstellen, committen, pushen)
• Docker-Container - Isolierte R-Umgebung mit allen vorinstallierten Abhängigkeiten
• VS Code - Code-Editor, der sich mit dem Docker-Container verbindet
• Claude Code - KI-Assistent, der R- und Shiny-Code aus Ihren Beschreibungen schreibt
• hoopR-Paket - NBA-Datenquelle mit einfacher API
• Shiny-Framework - Interaktive Web-Apps in R

Die Magie liegt nicht in einem einzelnen Tool, sondern darin, dass Sie mit Vibe Coding einfach beschreiben, was Sie wollen, und schnell iterieren können. Sie sind von einem leeren Projekt zu einem funktionierenden Sport-Dashboard in unter 30 Minuten gekommen, ohne eine einzige Zeile Code manuell zu schreiben.

Täglicher Workflow

Nach dieser ersten Einrichtung wird Ihre tägliche Vibe-Coding-Routine:

1. Docker Desktop starten - Starten Sie die App, warten Sie auf den grünen Status
2. VS Code öffnen - Öffnen Sie Ihr Projekt, öffnen Sie im Container neu falls nötig
3. Claude Code starten - Geben Sie claude im Terminal ein
4. Beschreiben Sie Ihr Ziel - „Füge eine Funktion hinzu, die …“ oder „Behebe den Fehler, bei dem …“
5. Testen Sie die Änderungen - Führen Sie Ihre App aus, prüfen Sie, ob sie funktioniert
6. Iterieren oder committen - Wenn etwas nicht funktioniert, beschreiben Sie die Korrektur; wenn alles funktioniert, committen Sie mit GitHub Desktop
7. Regelmäßig pushen - Klicken Sie auf Push origin, um auf GitHub zu sichern

Je mehr Sie üben, desto besser werden Sie darin zu beschreiben, was Sie wollen. Vibe Coding ist eine Fähigkeit – Sie lernen, welche Arten von Beschreibungen am besten funktionieren und wie Sie große Ideen in testbare Teile aufteilen.

Erstellt von Steven Ge am 7. Dezember 2025.