Portfolio: Cursor IDE Projekt hinzugefügt
- Neue Projektseite für Cursor IDE Tutorial - Video-Einbettung von tella.tv - Cover-Bild hinzugefügt 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.5
@@ -0,0 +1,155 @@
|
||||
---
|
||||
slug: "cursor-ide"
|
||||
title: "Cursor IDE: KI-gestützte Softwareentwicklung"
|
||||
description: "Einführung in Cursor - die revolutionäre KI-gestützte Entwicklungsumgebung, die Softwareprojekte durch natürliche Sprache ermöglicht"
|
||||
excerpt: "Entdecke, wie Cursor IDE als persönlicher KI-Programmierer fungiert und komplette Projekte aus natürlicher Sprache erstellt."
|
||||
date: "2024-12-15"
|
||||
category: "KI & Entwicklung"
|
||||
coverImage: "/images/projects/cursor-ide/cover.jpg"
|
||||
client: "Tutorial"
|
||||
duration: "Einführung"
|
||||
url: "https://cursor.com"
|
||||
repository: ""
|
||||
documentation: ""
|
||||
published: true
|
||||
featured: true
|
||||
technologies: ["Cursor IDE", "KI", "Next.js", "React", "TypeScript", "Node.js"]
|
||||
tags: ["KI", "IDE", "Entwicklung", "Tutorial", "Code-Generierung", "Automatisierung"]
|
||||
videoUrl: "https://www.tella.tv/video/cursor-ide-1-1kjg"
|
||||
---
|
||||
|
||||
<div style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden', marginBottom: '2rem', borderRadius: '12px' }}>
|
||||
<iframe
|
||||
src="https://www.tella.tv/video/cursor-ide-1-1kjg/embed?b=0&title=1&a=1&loop=0&autoPlay=false&t=0&muted=0&wt=0"
|
||||
style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', border: 'none' }}
|
||||
allowFullScreen
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ margin: "20px 0", padding: "20px", backgroundColor: "#3d3d3d", borderRadius: "8px" }}>
|
||||
<p style={{ fontSize: "1.1rem", lineHeight: "1.6" }}>
|
||||
Cursor ist eine KI-gestützte Entwicklungsumgebung, die wie ein persönlicher Programmierer funktioniert. Sie versteht natürliches Deutsch, generiert Code eigenständig, findet und behebt Fehler - und baut komplette Softwareprojekte auf Zuruf.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<hr style={{ margin: "40px 0", border: "none", height: "1px", backgroundColor: "#ddd" }} />
|
||||
|
||||
<h2 style={{ marginBottom: "20px" }}>Was ist Cursor?</h2>
|
||||
<div style={{ marginBottom: "30px" }}>
|
||||
<p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
|
||||
Stell dir vor, du hättest einen persönlichen Programmierer, der neben dir sitzt und alle deine Softwareideen in natürlichem gesprochenen Deutsch verstehen und aufnehmen kann. Dieser würde diese gesamten Softwareprojekte auch eigenständig aufbauen können. Genau das ist Cursor.
|
||||
</p>
|
||||
<p style={{ fontSize: "1rem", lineHeight: "1.6", marginTop: "15px" }}>
|
||||
Cursor ist ein Texteditor mit integrierter KI:
|
||||
</p>
|
||||
<ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
|
||||
<li>Code für dich schreiben</li>
|
||||
<li>Fragen beantworten</li>
|
||||
<li>Komplette Projekte aufbauen</li>
|
||||
<li>Fehler finden und beheben</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 style={{ marginBottom: "20px" }}>Früher vs. Heute</h2>
|
||||
<div style={{ marginBottom: "30px" }}>
|
||||
<table style={{ width: "100%", borderCollapse: "collapse" }}>
|
||||
<thead>
|
||||
<tr style={{ borderBottom: "2px solid #ddd" }}>
|
||||
<th style={{ textAlign: "left", padding: "10px" }}>Früher</th>
|
||||
<th style={{ textAlign: "left", padding: "10px" }}>Mit Cursor</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr style={{ borderBottom: "1px solid #ddd" }}>
|
||||
<td style={{ padding: "10px" }}>Programmiersprachen lernen musste</td>
|
||||
<td style={{ padding: "10px" }}>Einfach beschreiben, was du haben möchtest</td>
|
||||
</tr>
|
||||
<tr style={{ borderBottom: "1px solid #ddd" }}>
|
||||
<td style={{ padding: "10px" }}>Fehlersuche dauerte Stunden</td>
|
||||
<td style={{ padding: "10px" }}>KI findet und behebt Fehler automatisch</td>
|
||||
</tr>
|
||||
<tr style={{ borderBottom: "1px solid #ddd" }}>
|
||||
<td style={{ padding: "10px" }}>Jede Zeile selbst tippen</td>
|
||||
<td style={{ padding: "10px" }}>KI generiert den Code</td>
|
||||
</tr>
|
||||
<tr style={{ borderBottom: "1px solid #ddd" }}>
|
||||
<td style={{ padding: "10px" }}>Google und Stackoverflow als Begleiter</td>
|
||||
<td style={{ padding: "10px" }}>KI erklärt das gesamte Projekt im Editor</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h2 style={{ marginBottom: "20px" }}>Das Interface</h2>
|
||||
<div style={{ marginBottom: "30px" }}>
|
||||
<p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
|
||||
Nach dem Download über <a href="https://cursor.com" target="_blank" rel="noopener noreferrer">cursor.com</a> und Installation besteht das Interface aus:
|
||||
</p>
|
||||
<ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
|
||||
<li><strong>Menüleiste (oben):</strong> Navigation durch die IDE</li>
|
||||
<li><strong>File Explorer (links):</strong> Projektstruktur mit Verzeichnissen und Dateien</li>
|
||||
<li><strong>Editor (Mitte):</strong> Ansicht und Bearbeitung von Dateien</li>
|
||||
<li><strong>Terminal (unten):</strong> Einblendbar über View > Terminal</li>
|
||||
<li><strong>KI Chat (rechts):</strong> Steuerung der Entwicklung per KI</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 style={{ marginBottom: "20px" }}>Praxisbeispiel: Website erstellen</h2>
|
||||
<div style={{ marginBottom: "30px" }}>
|
||||
<p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
|
||||
Ein einfacher Prompt wie:
|
||||
</p>
|
||||
<pre style={{ backgroundColor: "#3d3d3d", padding: "20px", borderRadius: "8px", overflow: "auto" }}>
|
||||
<code style={{ color: "#f8f8f2" }}>
|
||||
{`Ich möchte eine Website aufbauen mit Next, React
|
||||
und TypeScript mit einer modernen Darstellung
|
||||
von Hello World.`}
|
||||
</code>
|
||||
</pre>
|
||||
<p style={{ fontSize: "1rem", lineHeight: "1.6", marginTop: "15px" }}>
|
||||
Die KI fängt sofort mit der Entwicklung an:
|
||||
</p>
|
||||
<ol style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
|
||||
<li>Projektzustand wird geprüft</li>
|
||||
<li>Das gesamte Projekt wird aufgebaut</li>
|
||||
<li>Nach wenigen Sekunden steht die Website</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<h2 style={{ marginBottom: "20px" }}>Website starten</h2>
|
||||
<div style={{ marginBottom: "30px" }}>
|
||||
<p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
|
||||
Nach der Codegenerierung:
|
||||
</p>
|
||||
<pre style={{ backgroundColor: "#3d3d3d", padding: "20px", borderRadius: "8px", overflow: "auto" }}>
|
||||
<code style={{ color: "#f8f8f2" }}>
|
||||
{`# Abhängigkeiten installieren
|
||||
npm install
|
||||
|
||||
# Entwicklungsserver starten
|
||||
npm run dev`}
|
||||
</code>
|
||||
</pre>
|
||||
<p style={{ fontSize: "1rem", lineHeight: "1.6", marginTop: "15px" }}>
|
||||
Besonders praktisch: Ein integrierter Browser in der Editor-Ansicht ermöglicht die direkte Vorschau der Website während der Entwicklung.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2 style={{ marginBottom: "20px" }}>Erste Schritte</h2>
|
||||
<div style={{ marginBottom: "30px" }}>
|
||||
<ol style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
|
||||
<li>Cursor von <a href="https://cursor.com" target="_blank" rel="noopener noreferrer">cursor.com</a> herunterladen</li>
|
||||
<li>Installation für das jeweilige Betriebssystem durchführen</li>
|
||||
<li>Projektordner anlegen und in Cursor öffnen</li>
|
||||
<li>Im KI-Chat beschreiben, was gebaut werden soll</li>
|
||||
<li>Die KI arbeiten lassen und bei Bedarf anpassen</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<h2 style={{ marginBottom: "20px" }}>Fazit</h2>
|
||||
<div style={{ marginBottom: "30px" }}>
|
||||
<p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
|
||||
Cursor revolutioniert die Softwareentwicklung, indem es die Barriere zwischen Idee und Umsetzung dramatisch senkt. Statt Programmiersprachen zu lernen, beschreibst du einfach in natürlicher Sprache, was du haben möchtest - und die KI erledigt den Rest.
|
||||
</p>
|
||||
</div>
|
||||
Reference in New Issue
Block a user