Das grosse Ganze

Die Reise im Ueberblick

Stell dir vor, du baust ein Restaurant. Software entsteht in aehnlichen Etappen — von der Kueche (wo gekocht wird) bis zum offenen Lokal (wo Gaeste essen). Hier sind die 5 Stationen:

1 🤖 Claude Code / Codex Der Koch-Assistent, der den Code fuer dich schreibt
2 📁 Code im Ordner Die Rezepte — auf deinem Computer gespeichert
3 🐙 GitHub Das Rezeptbuch-Archiv: sicher, mit Versionen
4 ☁️ Hosting Das eroeffnete Lokal — im Internet erreichbar
5 🌍 Live fuer alle Gaeste (Nutzer) koennen es benutzen

Kurz gesagt: Du beschreibst, was du willst → Claude Code schreibt den Code auf deinem PC → GitHub bewahrt alles sicher auf → ein Hosting-Anbieter stellt es ins Internet → die Welt kann es nutzen.

Schritt 1

Claude Code oder Codex — was ist das?

Beides sind KI-Programmier-Assistenten. Du sagst in normaler Sprache, was du brauchst — die KI schreibt den eigentlichen Programmcode dafuer.

🤖

Die Restaurant-Analogie

Frueher musstest du selbst Koch sein (= programmieren koennen). Heute ist Claude Code wie ein erfahrener Koch, dem du nur sagst: "Mach mir eine Webseite, auf der Kunden ein Angebot anfordern koennen." Er kocht — du bestimmst das Menue.

⚙️

Was es konkret tut

  • Schreibt Programmcode nach deiner Beschreibung
  • Findet und behebt Fehler ("Bugs")
  • Erklaert dir, was es gemacht hat
  • Arbeitet direkt in deinen Projektordnern

Claude Code vs. Codex — der Unterschied

WerkzeugVon wemKurz gesagt
Claude CodeAnthropicKI-Assistent, der direkt auf deinem Computer Code schreibt, aendert und testet. (Das benutzt du gerade.)
CodexOpenAISehr aehnliches Werkzeug eines anderen Anbieters. Gleiche Idee, anderer "Motor".

Du brauchst nicht beide. Es sind konkurrierende Werkzeuge mit demselben Zweck — wie zwei Navigations-Apps, die dich beide ans Ziel bringen.

Schritt 2

Der Code — lokal in einem Ordner

Der Code ist einfach eine Sammlung von Textdateien in einem Ordner auf deinem Computer. Genau wie ein Word-Dokument — nur dass ein Computer diesen Text "ausfuehren" kann.

Bild dazu: Ein Software-Projekt ist wie ein Aktenordner. Darin viele Blaetter (Dateien). Jedes Blatt enthaelt Anweisungen. Der Computer liest die Blaetter und tut, was draufsteht.

# So sieht ein Projektordner ungefaehr aus:
mein-projekt/
  ├─ index.html      ← die Webseite
  ├─ style.css       ← das Aussehen (Farben, Schrift)
  ├─ app.py          ← die Logik (was passiert)
  └─ bilder/         ← Ordner mit Fotos

Warum gibt es verschiedene Programmiersprachen?

So wie man fuer verschiedene Aufgaben verschiedene Werkzeuge nimmt (Hammer ≠ Schraubenzieher), gibt es fuer verschiedene Software-Aufgaben verschiedene Sprachen. Die wichtigsten:

HTML Struktur

Das Geruest einer Webseite. Legt fest, was auf der Seite ist: Ueberschrift, Text, Bild, Button. HTML ist keine echte Programmiersprache, sondern eine "Auszeichnungssprache" — wie das Skelett eines Hauses.

<h1>Willkommen!</h1>
<p>Das ist ein Text.</p>
<button>Jetzt anfragen</button>

CSS Aussehen

Macht das HTML-Geruest schoen: Farben, Schriftarten, Abstaende, Layout. Das HTML ist das Haus, CSS sind Anstrich, Moebel und Vorhaenge.

h1 { color: blue;
     font-size: 40px; }

JavaScript Interaktion

Bringt eine Webseite zum Reagieren: Was passiert beim Klick? Formular absenden, Menue oeffnen, Daten laden. Das "Nervensystem" der Seite.

button.onclick = () => {
  alert("Danke!");
}

Python Logik & KI

Sehr beliebt, weil gut lesbar. Stark fuer Datenverarbeitung, KI, Automatisierung und die "unsichtbare" Logik hinter Apps (z. B. Aktienanalyse, Berechnungen).

preis = 100
rabatt = preis * 0.2
print(preis - rabatt)  # 80

Was noch ueblich ist

SpracheWofuer typischerweise
TypeScriptJavaScript mit "Sicherheitsnetz" — Standard fuer moderne Web-Apps (z. B. Next.js, React).
SQLDie Sprache, mit der man Datenbanken abfragt: "Gib mir alle Kunden aus Wien."
Java / C#Grosse Firmen-Software, Banken-Systeme, oft im Hintergrund.
Swift / KotlinApps fuer iPhone (Swift) und Android (Kotlin).
Go / RustSehr schnelle, robuste Systeme (Server, Infrastruktur).

Wichtig fuer dich: Du musst keine dieser Sprachen lernen. Claude Code waehlt die passende aus und schreibt sie. Gut zu wissen ist nur grob, welche wofuer da ist — damit du mitreden kannst.

Schritt 3

GitHub — was ist das und wozu?

GitHub ist ein Online-Tresor und Versions-Archiv fuer deinen Code. Es speichert nicht nur die aktuelle Version, sondern jede einzelne Aenderung der Geschichte.

📚

Die Analogie

Stell dir Google Docs vor, aber fuer Code: Du siehst die komplette Versionsgeschichte, kannst jederzeit auf einen frueheren Stand zurueckspringen, und mehrere Leute koennen gemeinsam arbeiten, ohne sich gegenseitig zu ueberschreiben.

🎯

Wozu man es braucht

  • Sicherung: PC kaputt? Code ist online sicher.
  • Zeitmaschine: "Gestern lief es noch" → zurueckspringen.
  • Zusammenarbeit: Mehrere Entwickler am selben Projekt.
  • Bruecke zum Hosting: Von hier wird automatisch veroeffentlicht.

Drei Begriffe, die du oft hoeren wirst

BegriffIn einfachen Worten
Repository ("Repo")Der Projektordner auf GitHub. Ein Repo = ein Projekt.
CommitEin gespeicherter Schnappschuss mit Notiz, z. B. "Kontaktformular hinzugefuegt". Wie ein Speicherpunkt im Videospiel.
PushDie Schnappschuesse von deinem PC hoch auf GitHub schieben ("hochladen").

Kleines Beispiel: Claude Code baut ein neues Feature → macht einen Commit ("Login-Funktion ergaenzt") → Push zu GitHub. Jetzt ist die Aenderung dokumentiert, gesichert und bereit, online zu gehen.

Hinweis: "Git" ist die Technik dahinter, "GitHub" die bekannteste Website dafuer. Alternativen mit gleicher Idee: GitLab, Bitbucket.

Schritt 4

Hosting — Railway, Cloudflare, Hetzner, AWS …

Dein Code liegt bisher nur auf deinem PC und auf GitHub — niemand im Internet kann ihn benutzen. Ein Hosting-Anbieter stellt deine Software auf einen Server, der rund um die Uhr laeuft und fuer alle erreichbar ist.

Die Analogie: Bisher hattest du nur das Rezept und eine private Kueche. Hosting = du eroeffnest ein echtes Lokal an einer Adresse, das 24/7 offen hat. Die Adresse ist deine Domain (z. B. meine-firma.de), das Lokal ist der Server.

Was passiert beim Hosting konkret?

Die Anbieter im Vergleich

AnbieterCharakterGut fuer …
RailwaySehr einfach, "klick & laeuft". Verbindet sich direkt mit GitHub.Schneller Start, kleine bis mittlere Apps, Prototypen.
CloudflareRiesiges weltweites Netz. Macht Seiten schnell & sicher (Schutz vor Angriffen). Auch Domains & Hosting.Geschwindigkeit, Sicherheit, weltweite Reichweite.
HetznerDeutscher Anbieter, sehr guenstig, gibt dir einen "rohen" Server — mehr Kontrolle, mehr Eigenarbeit.Preisbewusste, technischere Projekte, volle Kontrolle.
AWS (Amazon)Der Gigant. Alles moeglich, aber komplex und schnell teuer. Industriestandard fuer grosse Firmen.Grosse, wachsende Systeme mit hohen Anforderungen.
AndereVercel & Netlify (top fuer Webseiten/Next.js), Render, Fly.io, DigitalOcean, Google Cloud, Azure.Je nach Projekt — Claude Code kann dich beraten.

Welchen nehmen? Faustregel fuer den Anfang: Railway oder Vercel (einfach, schnell live). Cloudflare immer zusaetzlich fuer Tempo & Schutz. Hetzner/AWS erst, wenn das Projekt gross wird oder spezielle Anforderungen hat.

Schritt 5

Hast du etwas vergessen? — Ja, ein paar Dinge

Die vier Schritte sind das Grundgeruest und schon sehr gut. In der Praxis kommen aber meist noch diese Bausteine dazu:

🌐

Domain & DNS

Die "Adresse" deiner Software (z. B. lw-finance.com). Eine Domain mietet man jaehrlich. DNS ist das "Telefonbuch", das die Adresse zum richtigen Server leitet.

🗃️

Datenbank

Wo Daten dauerhaft gespeichert werden: Nutzerkonten, Bestellungen, Texte. Ohne Datenbank "vergisst" eine App alles beim Neustart.

🔑

API-Keys & Secrets

Geheime Passwoerter/Schluessel (z. B. fuer Stripe-Zahlungen oder die Claude-API). Duerfen nie in GitHub landen — werden separat & sicher hinterlegt.

💳

Externe Dienste

Du baust selten alles selbst: Zahlungen (Stripe), E-Mail-Versand, Login (Google-Login), Karten usw. werden per API "dazugeholt".

🧪

Testen

Automatische Pruefungen, ob alles noch funktioniert, bevor es online geht. Spart das peinliche "Es ist live und kaputt".

🚀

Deployment / CI-CD

Der automatische Ablauf: Aenderung auf GitHub → automatisch getestet → automatisch online gestellt. Spart manuelle Arbeit und Fehler.

📊

Monitoring & Logs

Ueberwachung im Betrieb: Laeuft alles? Gibt es Fehler? "Logs" sind das Tagebuch der App, in dem man bei Problemen nachschaut.

🛡️

Sicherheit & Backups

Schutz vor Angriffen & Datenverlust. Regelmaessige Sicherungskopien. HTTPS (das Schloss-Symbol im Browser) fuer verschluesselte Verbindungen.

⚖️

Recht & DSGVO

Impressum, Datenschutzerklaerung, Cookie-Hinweis. In Europa Pflicht, sobald echte Nutzer Daten eingeben.

👨‍💻

Editor & Terminal

Der "Schreibtisch": ein Code-Editor (z. B. VS Code) zeigt die Dateien an. Das "Terminal" ist das schwarze Fenster fuer Befehle — Claude Code nutzt es fuer dich.

Gute Nachricht: Du musst das nicht alles selbst koennen. Wenn du ein Projekt mit Claude Code startest, kannst du genau diese Liste durchgehen und fragen: "Brauche ich davon etwas, und kannst du es einrichten?"

Nachschlagen

Begriffslexikon

Die wichtigsten Development-Begriffe — kurz und ohne Fachchinesisch erklaert.

Code / Quellcode
Der geschriebene Text mit Anweisungen, aus dem Software besteht.
Programmiersprache
Eine festgelegte Sprache, in der man dem Computer Anweisungen gibt (Python, JavaScript …).
Frontend
Der sichtbare Teil, mit dem Nutzer interagieren — Knoepfe, Texte, Design.
Backend
Der unsichtbare Teil im Hintergrund: Logik, Berechnungen, Datenbank-Zugriff.
Server
Ein Computer im Rechenzentrum, der immer laeuft und deine Software bereitstellt.
Hosting
Der Dienst, der deine Software auf einen Server bringt, damit sie im Internet laeuft.
Deployment
Der Vorgang, eine neue Version "live" zu stellen (zu veroeffentlichen).
Repository (Repo)
Der Projektordner auf GitHub samt kompletter Aenderungsgeschichte.
Commit
Ein gespeicherter Schnappschuss einer Aenderung mit kurzer Beschreibung.
Push / Pull
Push = Aenderungen hochladen. Pull = aktuelle Aenderungen herunterholen.
Branch
Ein paralleler "Arbeitszweig", um Neues zu testen, ohne das Hauptprojekt zu stoeren.
Bug
Ein Fehler in der Software, der zu falschem Verhalten fuehrt.
Debugging
Die Fehlersuche und -behebung.
API
Eine "Steckdose", ueber die Programme miteinander reden (z. B. deine App fragt Stripe nach einer Zahlung).
API-Key
Ein geheimer Schluessel, der beweist, dass du eine API benutzen darfst. Streng vertraulich.
Datenbank
Der dauerhafte Speicher fuer alle Daten der App (Nutzer, Inhalte, Bestellungen).
Domain
Die Internet-Adresse deiner Software, z. B. meine-firma.de.
DNS
Das "Telefonbuch" des Internets: uebersetzt die Domain zur richtigen Server-Adresse.
HTTPS / SSL
Verschluesselte, sichere Verbindung — das Schloss-Symbol im Browser.
Framework
Ein fertiger Werkzeugkasten, der Standard-Arbeit abnimmt (z. B. Next.js, React).
Library (Bibliothek)
Vorgefertigter Code fuer eine Aufgabe, den man einbindet statt selbst zu schreiben.
Open Source
Code, der oeffentlich und meist kostenlos nutzbar ist.
Terminal / Konsole
Das Text-Fenster, in das man Befehle tippt, statt zu klicken.
Editor / IDE
Das Programm zum Schreiben von Code (z. B. VS Code).
Environment (Umgebung)
Getrennte Welten: Dev (Bauen), Staging (Testen), Production (echt, fuer Nutzer).
Build
Der Schritt, in dem aus dem Quellcode die lauffaehige, fertige Version erzeugt wird.
CI/CD
Automatik-Fliessband: Code wird automatisch getestet und veroeffentlicht.
Cache
Ein Zwischenspeicher, der Dinge schneller macht, indem er sie kurz "merkt".
Log
Das Protokoll/Tagebuch der App — hilft bei der Fehlersuche im Betrieb.
Localhost
Deine App, die nur auf deinem eigenen Computer laeuft (zum Testen, noch nicht oeffentlich).
Geschafft

Jetzt kennst du den ganzen Weg

Claude Code → Code im Ordner → GitHub → Hosting → Live. Du musst nichts davon selbst programmieren — es genuegt, die Begriffe zu verstehen, um die richtigen Fragen zu stellen.

Kostenfreies Erstgespraech