Erstellen Sie Ihre erste Anwendung mit Cursor AI für absolute Anfänger

1. Einführung: Hi, mein Name ist Peter. Ich bin Softwareingenieur und arbeite derzeit in den Bereichen KI, Forschung und Entwicklung. In diesem speziellen Kurs werde ich Ihnen also beibringen, wie wir mithilfe von KI Anwendungen erstellen können . Wenn Sie also ein abstrakter Anfänger sind und Anwendungen vollständig mit KI erstellen möchten, ist dies der beste Ausgangspunkt für Sie. Und in dieser speziellen Klasse werden wir Cursor verwenden, um eine Anwendung zu erstellen. Und in diesem speziellen Kurs werde ich Ihnen beibringen, wie wir Cursorregeln einrichten können, wie wir Ihren Kontext verwalten können und wie Sie die Lego Prompting-Strategie nutzen können, die Lego Prompting-Strategie nutzen um eine Anwendung effektiv zu erstellen Wenn Sie also zum ersten Mal eine KI-Anwendung erstellen und eine wirklich gute grundlegende Vorstellung davon bekommen möchten eine wirklich gute grundlegende Vorstellung davon bekommen wie die Dinge funktionieren, ist dies der beste Ausgangspunkt Machen Sie sich also bereit, Ihre Anwendung zu erstellen, und es wird keine Codierung erforderlich sein, und ich werde Ihnen Schritt für Schritt wie wir am Ende dieses speziellen Kurses ein Projekt erstellen können . Also hoffe ich, euch im nächsten Video zu sehen. 2. Einführung in KI und Cursor: Hallo Leute, willkommen in der Klasse. In diesem Kurs werden wir heute also etwas über Cursor lernen. Bevor wir uns die Hände schmutzig machen und an einem Projekt arbeiten, sollten wir im Grunde verstehen, was Cursor ist, sowie einige grundlegende KI-bezogene Terminologien , damit wir eine Grundlage für unsere kommenden Kurse schaffen können Lassen Sie uns also weitermachen. Lassen Sie uns zunächst verstehen, was ein Modell ist. Selbst wenn Sie sagen, dass Sie Cursor verwenden, handelt es sich bei dem, womit Sie intern interagieren , im Grunde um ein Modell. Mit anderen Worten, es heißt LLM, Large Language Model. Sie können ein Model also grundsätzlich als einen Assistenten betrachten, einen hochintelligenten und qualifizierten Assistenten , der über eine Vielzahl von Kenntnissen verfügt Es verfügt über ein breites Wissen in verschiedenen Bereichen, egal ob es sich um Literatur, Softwareentwicklung oder was auch immer Sie es nennen mögen, es hat eine Menge Wissen. Der Grund dafür ist, dass diese Modelle, diese LAMs, anhand von Milliarden von Daten trainiert werden , die öffentlich verfügbar Es hat also ein Wissen über verschiedene Dinge im Internet Einfach ausgedrückt, äh, Sie werden mit diesen KI-Modellen oder großen Sprachmodellen interagieren . Intern sind das extrem komplexe, neuronale Netzwerke, Transformatoren usw. Für uns sind sie jedoch im Grunde Assistenten, mit denen Sie interagieren können Es gibt also verschiedene Modellanbieter. Wie Sie wissen, hatten wir GBT. Ha GBT fällt also unter Open AI, und sie haben ihre eigenen Modelle wie äh, GPT Four, GBT 40, GPT Five usw., und dann haben wir Anthropic mit der Cloud Sonit 4.5, 4.6, und sie haben ihre eigenen Modelle wie äh, GPT Four, GBT 40, GPT Five usw., und dann haben wir Anthropic mit der Cloud Sonit 4.5, 4.6, Opus 4.6 usw. Einfach so haben wir Google und Meta. Und was Anwendungen oder Software, Software wie Cursor, Copilot, Windsurf Lovable anbietet, ist, dass sie eine ID-ähnliche Umgebung bereitstellen oder, im Fall von Copilot, Sie können sie in VS-Code integrieren, und sie ermöglichen es uns, zwischen diesen verschiedenen Modellanbietern zu wechseln Sie können Anthropic verwenden, Sie können Opening Eyes, GPD-Modelle usw. verwenden Sie können Opening Eyes, GPD-Modelle usw. verwenden. also eine Flexibilität Diese Software wie SR usw. bietet also eine Flexibilität . Und vielleicht haben Sie die Frage , was der Unterschied zwischen diesen Modellen Sehen Sie, diese Modelle können als unterschiedliche Varianten betrachtet werden . Zum Beispiel kann ein Modell extrem gut programmieren, ein anderes Modell kann extrem gut im Multimediabereich sein usw. Jedes Modell ist anders und jedes hat seine eigene Spezialität, und es gibt auch Allzweckmodelle Sie müssen sich also keine Gedanken über die Auswahl des richtigen Modells machen, da Cursor standardmäßig einen automatischen Modus bietet Basierend auf der Aufgabe , die Sie gerade erledigen, wählt der Cursor automatisch einen Modus im Hintergrund aus. Darüber sollten Sie sich im Moment keine Gedanken machen, aber es ist gut zu wissen, dass es Modellanbieter gibt und jeder Anbieter seine eigenen Modelle und Cursor hat. Und wie Sie wissen, ist Cursor nur eine der Anwendungen , mit denen Sie Anwendungen mithilfe von KI erstellen können, und fast die gesamte Software in diesem Ökosystem bietet ähnliche Funktionen. Wir haben Tab-Vervollständigungen, was bedeutet, dass Cursor automatisch vorhersagt, was Sie tun, wenn Sie versuchen, selbst zu programmieren Sie versuchen Wenn Sie also beispielsweise eine Funktion schreiben, die Zahlen addiert, genau wie Sie die Funktion ad rendern, sagt Cursor automatisch voraus, dass Sie eine Funktion zum Hinzufügen von Zahlen erstellen möchten , und schlägt automatisch vor, dass Sie einfach die Tabulatortaste drücken können, um dies einfach die Tabulatortaste drücken können, um Das ist eine Funktion, die Cursor bietet, nicht nur Cursor. Wie gesagt, alle Anwendungen im Ökosystem sind Büros. Dann haben wir natürlich die Chat-Oberfläche, wir haben den Komponisten. Composor ist nichts, aber es kann als Multi-Agenten-Funktion betrachtet werden , mit der Sie mehrere Aufgaben gleichzeitig ausführen können Dies sind also einige der Kernfunktionen , die Cursor bietet, und wir werden sie in den kommenden Videos untersuchen Und ja, das ist es. Dies ist ein sehr schneller, Überblick über die Cursor- und KI-Branche sowie KI-Terminologien im Allgemeinen Und als Nächstes werden wir eine Anwendung von Grund auf neu erstellen und das, was Sie erstellen werden eine Anwendung von Grund auf neu , wir werden ein Symbol für die Anwendung erstellen, und wir werden das komplett mit KI machen , ohne auch nur eine einzige Codezeile zu schreiben Es ist also ein ziemlich interessantes Video, und wir sehen uns im nächsten. 3. Cursor herunterladen: Leute, es gibt eine Voraussetzung für dieses spezielle Video. Wenn Sie Cursor also noch nicht eingerichtet haben, ist dies der Zeitpunkt, an dem Sie Cursor herunterladen. Sie können einfach auf cursor.com den Schrägstrich OM aufrufen Sie können einfach auf cursor.com den Schrägstrich Und das ist die offizielle Homepage von Cursor, und nimm dir einfach ein bisschen Zeit, um zu verstehen Sie können einfach durch die verschiedenen Funktionen von Cursor blättern und sie lesen. Und sobald das erledigt ist, können Sie direkt hier auf die Schaltfläche „Für Macice herunterladen“ klicken , oder Sie können direkt hier im NAR-Board auf die Schaltfläche mit den Preisen klicken . Dadurch erhalten wir die verschiedenen Tarife , die Cursor anbietet Und in diesem speziellen Video bleiben wir beim Hobbyplan , der völlig kostenlos ist und keine Kreditkarte erfordert, und keine Kreditkarte erfordert, aber nur begrenzte Anfragen von Mitarbeitern und begrenzte Tab-Vervollständigungen hat und begrenzte Tab-Vervollständigungen Sie können direkt weitermachen und auf die Download-Schaltfläche klicken, und Sie können sich auch einfach die verschiedenen Funktionen ansehen , die andere Pläne bieten. Und wenn Sie in Zukunft zusätzliche Funktionen in dieser speziellen Liste wünschen , können Sie Ihr Abonnement entsprechend aktualisieren Und sobald Sie diesen speziellen kostenlosen Plan heruntergeladen haben, installieren Sie einfach Cursor Sobald Sie Cursor zum ersten Mal öffnen, werden Sie aufgefordert, sich anzumelden. Und wenn das erledigt ist, lassen Sie uns ab der nächsten Klasse weitermachen. 4. Festlegen von Cursorregeln und Projekteinrichtung: Ordnung. Ich hoffe , dass ihr Cursor erfolgreich auf eurem System installiert habt, und jetzt ist es an der Zeit, uns die Hände schmutzig zu machen und Code mit KI zu schreiben. Also das Erste, was ich tun werde, ist, ein neues Projekt zu erstellen. Also werde ich auf meinem Desktop einen neuen Ordner namens Todo App, Cursor, erstellen . In Ordnung. Und sobald das erledigt ist, öffne ich einen Cursor auf meinem System. Und hier werde ich auf Projekt öffnen klicken. Und ich gehe zu Desk Job und wähle meinen neu erstellten Ordner aus , der Studo App Cursor ist, und klicke auf Öffnen Und einfach so haben wir Cursor für unser neues Projekt geöffnet Und lassen Sie mich Ihnen einen kurzen Überblick über die Benutzeroberfläche von Cursor geben. Und auf der linken Seite können Sie hier alle Ihre Dateien sehen. Derzeit befinde ich mich im Datei-Explorer-Tab, was bedeutet, dass ich, wenn Cursor AI neue Dateien erstellt, sie direkt hier sehen kann. Im zweiten Abschnitt kann ich nach Dateien suchen. Und in der dritten Datei kann ich hier meine Änderungen sehen. Sobald ich Git für dieses spezielle Projekt eingerichtet habe, kann ich alle Dateien sehen , die ich geändert habe. Dann kann ich direkt reinkommen und Dateien von hier aus auf Github oder ein anderes Remote-Repository übertragen. Und in der Mitte können Sie hier Code bearbeiten. Und auf der rechten Seite ist das die KI-Schnittstelle. Hier chattest du. interagierst du mit KI. Hier haben wir also ein paar Funktionen. Wir haben den Agentenmodus gleich hier drüben. Wir haben den Agentenmodus, wir haben den Planungsmodus, Debug-Anfrage und verschiedene Modi Wir werden beim Agentenmodus bleiben. Und hier haben wir den Bereich Modellwechsel. Hier können Sie also sehen, dass ich Autobote aktiviert habe. Es wählt also automatisch das Modell basierend auf der Aufgabe aus, die ich gerade mache Wenn ich es also ausschalte, werde ich meine eigene, ähm Sorgfalt walten lassen, um ein Modell auszuwählen Ich kann Opus 4.6 nehmen. Dies ist das leistungsstärkste Modell, das Anthropic anbietet. Wir haben Sohn im Alter von 4,6 Jahren. Wir haben GPT 5.2, wir haben Gemini Flash und all diese verschiedenen Modelle stehen uns zur Verfügung Aber wir werden jetzt beim Autobot bleiben, weil wir einen kostenlosen Tarif haben, und das Und das sind die grundlegenden Dinge , die Sie wissen müssen. Hier haben wir das Plus-Symbol, um einen neuen Chat zu erstellen. Wir haben hier auch die Möglichkeit, den Chat-Verlauf und andere Dinge einzusehen . Das ist also ein kurzer Überblick. Bevor wir weitermachen, müssen wir einige Einstellungen vornehmen. Äh, also hier kannst du das sehen. Als Erstes werden wir eine Cursor-Regeldatei einrichten. Also, was meinst du mit Regel? In sehr einfachen Worten ist eine Regeldatei also eine Datei oder sie kann als Befehlsdatei aufgerufen werden. Und in dieser speziellen Datei definieren wir in sehr einfachen Worten, was wir bauen. In unserem Fall werden wir also eine Zwei-Do-Anwendung erstellen. Wir werden also einen Cursor-Ordner erstellen. Und darin werden wir einen Regelordner erstellen . Also lass uns das machen. Also werde ich hier auf das neue Ordnersymbol dt klicken hier auf das neue Ordnersymbol dt und ich möchte den Punkt Cursor beenden. Und darin werde ich einen weiteren Ordner mit coolen Regeln erstellen . Und in diesem speziellen Regelordner werde ich eine weitere Datei mit den Anweisungen Punkt D erstellen . Diese Anweisungsdatei ist also im Grunde ein Kontext, in dem das LLM oder das Modell immer im Hinterkopf behalten kann, was es Der Grund für so etwas ist , dass der Kontext beim Chatten mit dem Modell immer voller wird Was ist also ein Kontext? Es ist die Erinnerung an ein bestimmtes Modell. Wenn Sie kontinuierlich mit einem Modell, dem Kontext, chatten , wird der Speicher voll. Und wie Sie wissen, kann ein Chat lang sein. Das Model muss sich also auch daran erinnern, was Sie am Anfang gesagt haben, oder? Aber wenn der Kontext gefüllt wird, entfernt das Modell intern Kontexte, die es bereits von oben gespeichert hat. Und das Problem, das dadurch entstehen kann, ist, dass es einige der Dinge vergessen kann , die am Anfang gesagt wurden. Um das zu vermeiden, erstellen wir eine leere Datei mit dem Befehlspunkt . Diese Datei wird als Kontext mit jeder einzelnen Anfrage , die Sie an das Modell stellen, übergeben als Kontext mit jeder einzelnen Anfrage . Jedes Mal, wenn Sie chatten, befindet sich diese Anweisungsdatei also auch im Modellkontext. Es vergisst also nie, was deine Vision ist, was das ist, was du baust und was die grundlegenden Dinge sind, die du in dieser speziellen Anweisungsdatei erwähnt hast dieser speziellen Anweisungsdatei Das Modell wird sich also immer in Richtung Ihrer Vision bewegen. Das ist also der Hauptzweck der Erstellung einer solchen Datei. Hier habe ich bereits eine Anweisungsdatei erstellt. Das ist also meine Projektvision , die eine einfach durchzuführende Anwendung ist. Und die Idee ist, dass ich eine saubere, ablenkungsfreie Anwendung erstelle, und das Ziel ist es, uns zu helfen, ohne überflüssige oder komplizierte Einstellungen organisiert zu bleiben ohne überflüssige oder komplizierte Einstellungen organisiert zu Das sind meine Kernfunktionen Task, Maan, Remo Task, Stay Saved, und ich habe hier auch ein paar einfache Anweisungen Also das ist die Anweisungsdatei, und ich werde sie kopieren und ich werde sie hier einfügen. Jedes Mal, wenn Cursor eine Anfrage stellt, also eine Anfrage stellt, jedes Mal, wenn Sie mit Cursor oder dem Model chatten, wird ihm eine Idee zu dieser bestimmten Datei einfallen. Das ist also das Erste , was Sie tun müssen. Und ich hoffe, dass Sie den Hauptzweck der Erstellung einer Cursor-Regeldatei verstehen . Und hier kannst du das sehen. Wenn ich chatte, kann ich einfach die At-Taste drücken, und hier kannst du sehen, dass die Anweisungsdatei automatisch hier erscheint. Also kann ich das einfach dem Kontext und der Anfrage geben , die ich will. Diese Datei wird also jedes Mal im Kontext sein. Ich hoffe, ihr folgt mir und ihr habt einen Dot Cursor Slash Rules-Ordner erstellt, und auch deine Anweisungsdatei wurde erstellt ab dem nächsten Schritt Lassen Sie uns ab dem nächsten Schritt mit der Entwicklung einer Komplettanwendung beginnen 5. Bauen mit KI: Richtig, Leute, es ist an der Zeit dass wir unsere Todo-Anwendung erstellen Und davor habe ich kurz etwas zu sagen. Es gibt also zwei verschiedene Möglichkeiten, einen LLM zu beantragen. Das Erste oder die erste Methode ist eine kurze Aufforderung, bei der Sie alles, was Sie wollen, in eine einzige Eingabeaufforderung eingeben und dann die KI anweisen, diese für Sie zu erstellen Dies ist tatsächlich für sehr kleine Anwendungsfälle möglich. Wenn du etwas sehr Einfaches machen willst, dann ist es okay. Für die Erstellung einer Software wird jedoch immer empfohlen, einer Lego-Eingabeaufforderungstechnik zu folgen Eine Lego-Prompting-Technik ist nichts anderes , als dass Sie eine Idee haben und diese Idee dann in mehrere umsetzbare Schritte aufteilen , oder Sie können sagen , dass es mehrere Teile der Aufforderung sind. Sie haben eine wichtige Aufforderung oder eine große Idee, dann teilen Sie sie in mehrere verschiedene Eingabeaufforderungen auf die Sie dem Modell zur Verfügung stellen können, um die Anwendung für Sie zu erstellen Diese Lego-Prompt-Technik wird als weitaus effektiver angesehen als ein One-Shot-Prompt-Versuch Hier werden Sie der KI Schritt für Schritt beibringen , das zu bauen, was Sie wollen Und das ist sehr effektiv, weil Sie eine Sache nach der anderen tun werden. Und selbst wenn es ein Problem gibt, können Sie es auf detaillierter Ebene beheben, anstatt es erst am Ende zu tun wenn die Air die Erstellung ihrer Anwendung bereits abgeschlossen hat Erstellung ihrer Anwendung bereits abgeschlossen und es Probleme mit der Behebung von Fehlern haben könnte Und wenn Sie der Lego Prompting Technik folgen, sparen Sie außerdem eine Menge Kontext, weil Sie eine Sache nach der anderen machen, eine Sache nach der anderen reparieren, und der gesamte Kontext wird viel kleiner sein weil Sie sich in dieser bestimmten Phase weniger Sorgen machen müssen. Dies ist sehr wichtig, wenn Sie eine sehr große Anwendung erstellen Wir werden das also verfolgen und mit der ersten Phase beginnen. Hier möchte ich also sagen, dass ich ein grundlegendes Aussehen meiner Tudo-Anwendung erstellen möchte, eine saubere Webseite mit weißem Hintergrund in der Mitte ein Kästchen mit dem Titel „ Meine täglichen Ziele“ platzieren Titel „ Meine täglichen Ziele In diesem Feld möchte ich eine Stelle haben, an der ich eine neue Aufgabe eingeben kann, und eine Schaltfläche , auf der eine Aufgabe steht Fügen Sie vorerst einfach drei gefälschte Aufgaben , damit ich sehen kann, wie sie aussehen. So geben Sie eine Aufforderung ein. Sie müssen spezifisch sein. Sie müssen explizit angeben , was Sie wollen, wo Sie die Dinge platzieren möchten, und so erzielen Sie auf einmal die optimale Leistung. Andernfalls müssen Sie möglicherweise immer wieder iterieren, um Dinge zu erledigen Das ist völlig okay. Wenn Sie jedoch die Geduld haben, eine detaillierte Aufforderung zu schreiben , können Sie auf diese Weise die Effizienz der KI maximieren. Ich werde diese spezielle Aufforderung kopieren und sie hier einfügen, und ich habe auch meine Instruction Dot MD-Datei genau hier drüben. Ich werde diese spezielle Aufforderung geben und uns sehen lassen, was Cursory bewirken wird Also Leute, eines ist hier zu beachten, dass ich nicht wirklich irgendwelche Auszüge spezifiziert habe Ich lasse KI einen Staat für mich auswählen. Und in Fällen wie diesen wird standardmäßig das Vanida-Setup verwendet, wird standardmäßig das aus Vanilla- , HTML-, CSS- und JavaScript-Technik besteht HTML-, CSS- und Und das ist völlig okay für uns, weil wir eine sehr einfache Anwendung erstellen, aber, äh, wenn Sie eine komplexe Anwendung erstellen, die Datenbankverbindungen, mehr Renderlogik usw. erfordert , dann können Sie Cursor oder die KI explizit auffordern, dann können Sie Cursor oder die KI explizit auffordern ein bestimmtes TextGF-Beispiel zu verwenden, als nächstes Jas reaktive Ansicht eckig, Sie können das spezifizieren und entsprechend erstellen Aber in meinem Fall möchte ich eine sehr einfache Anwendung, die HTR-CSS und JavaScript verwendet, und das ist es, was KI standardmäßig tut, weil sie tatsächlich die Befehlsdatei und die Eingabeaufforderung durchgegangen ist und im Grunde zu dem Schluss gekommen ist, und im Grunde zu dem Schluss gekommen dass dies eine sehr einfache Anwendung ist, sodass sie kein Framework wie next oder eine Bibliothek wie React verwenden muss oder eine Bibliothek wie React sodass sie kein Framework wie next oder eine Bibliothek wie React verwenden muss, weil es sehr komplex für eine einfache Anwendung wie diese. Ich habe mich tatsächlich für das Vanille-Set entschieden. Hier kannst du das sehen, eine einzelne Seite erstellen, um das Layout für deine Anleitung zu erstellen, sauber gesendet, ja Und wir haben die Codeänderungen, und hier ist eine Zusammenfassung dessen, was Cursor getan hat Es hat im Grunde einen Index aus HTML-Datei, gesendeter Seite und Hauptbox erstellt , einen Bereich, drei Orte oder eine Aufgabe hinzugefügt . Das Styling ist minimal Und hier kann ich auf Review klicken, um die Codeänderung zu sehen , die Cursor vorgenommen hat. Hier können Sie sehen , dass es im Grunde alle Stile in einer Reihe geschrieben hat. Ähm, das ist eine Sache , die ich nicht wirklich mag. Lassen Sie uns es in der nächsten Eingabeaufforderung tatsächlich bitten, es in eine andere CSS-Datei zu ändern . Aber in der Mitte haben wir die grundlegenden Details. Also werde ich es bitten, den CSS-Code von Indexpunkt-HTML in eine separate CSS-Datei zu abstrahieren . Also hier werde ich eine Anweisungsdatei hinzufügen. Außerdem werde ich meine, äh, Index-HTML-Datei angeben äh, Index-HTML-Datei und Ender drücken. Was Cursor jetzt tun wird, ist, eine separate CSS-Datei zu erstellen, die gesamte CSS-Datei in diese Datei zu verschieben diese Htable- und CSS-Datei miteinander zu verknüpfen Und lassen Sie uns sehen, was es bewirken wird. Ja. Ich habe eine CSS-Datei erstellt, das gesamte CSS hier hinzugefügt und lassen Sie uns sehen, was sie sonst noch tun wird. Der Cursor ist also mit der anderen Aufgabe fertig. Also wurde die CSS-Datei erstellt, alle Stile in die CSS-Datei verschoben, und dann wurde der Zeilenblock entfernt und durch den Link ersetzt. Wenn ich also auf Review klicke, kannst du hier sehen, dass sich die gesamte CSS-Datei hier befindet. Ich klicke auf Keypall und gleich hier auf die Index- oder Zifferndatei, hier siehst du den Link zur CSS-Datei Und genau das habe ich erwartet. Okay, lassen Sie uns jetzt sehen, wie die Anwendung derzeit aussieht. Hier können Sie also direkt zu Erweiterungen gehen und eine Erweiterung namens Live Server installieren . Live Server ist also im Grunde eine Erweiterung , mit der wir die Anwendung direkt anzeigen können , ohne die Indexpunkt-HTML-Datei manuell öffnen zu müssen. Also das heißt, installiere es. Ordnung. Also ich denke , das ist installiert. nach der Installation Lassen Sie uns nach der Installation den Link zur nächsten Datei verlinken, klicken Sie mit der rechten Maustaste darauf und klicken Sie auf Mit Live-Server öffnen. Und so können Sie hier sehen, dass wir unsere sehr einfache Todo-Anwendung genau hier im Internet haben unsere sehr einfache Todo-Anwendung . In Ordnung. Wir sind also mit der ersten Aufgabe fertig, nämlich eine Symbol-Benutzeroberfläche, einen weißen Hintergrund, einen Ort für eine andere Aufgabe, eine Schaltfläche zum Hinzufügen der Aufgabe und ein paar Dummy-Aufgaben zu erstellen einen Ort für eine andere Aufgabe, , und ein paar Dummy-Aufgaben damit wir sehen können, wie die Benutzeroberfläche aussieht Wir sind mit der ersten Phase, dem visuellen Skelett, fertig visuellen Skelett Jetzt ist es an der Zeit, dass wir es funktionsfähig machen. Ich werde dafür sorgen, dass es funktioniert. Was ich tun werde, ist, dass, wenn ich etwas in das Feld eintippe und auf eine Aufgabe klicke, es tatsächlich in der Liste erscheint. Fügen Sie außerdem neben jeder Aufgabe eine kleine X-Schaltfläche hinzu , damit ich sie entfernen kann, wenn ich meine Meinung ändere. Das werde ich als Nächstes tun, also werde ich es kopieren und das Chatfenster einfügen. Außerdem werde ich meine Anweisungsdatei als Kontext anhängen und Cursor anweisen, das für mich zu tun. Damit ist die Aufgabe erledigt. Also hier ist, was implementiert wurde. Es hat die Funktion für Kunstaufgaben und die Funktion für entfernte Aufgaben implementiert die Funktion für entfernte Aufgaben und den Index oder die digitale Datei geändert, und Sie können einige Funktionen sehen, die dadurch hinzugefügt wurden. Es erstellt also ein neues AI-Tag. Jeder verwendet einen kleinen SK gt der uns beim Typtest hilft, der als Klartext usw. angezeigt wird, und so weiter, und die Tilt-CS-Datei wurde ebenfalls geändert Klicken wir auf Überprüfen und hier können Sie die vorgenommenen Änderungen sehen Hier können Sie also sehen , dass das Skript-Tag in der Zeile erstellt und all diese Änderungen vorgenommen wurden. Auch hier bin ich kein großer Fan davon, alles auf einer Seite zu schreiben, also werde ich Cursor bitten, eine neue Datei zum Speichern des Script-Tag-Inhalts zu erstellen, die nichts anderes ist als Vanila-JavaScript Kannst du das Skript-Tag abstrahieren? Und erstelle eine neue Datei dafür. Also, Leute, der Grund dafür ist, es modular zu machen. Also sollten wir niemals wirklich Code auf einer einzigen Seite schreiben. Äh, wir sollten den Code grundsätzlich in verschiedene Segmente unterteilen. In diesem Fall können Sie also sehen, dass wir alle Stile in einer CSS-Datei gespeichert haben , der Einstiegspunkt in Index oder HTML ist und dann haben wir die App-Dot-JS-Datei, und dann haben wir die App-Dot-JS-Datei in die wir im Grunde unsere gesamte Logik schreiben. So sollten Sie Ihre Anwendung strukturieren, insbesondere eine solche Vanilla-Anwendung. Hier können Sie also sehen, dass ich im Grunde eine Vision habe und ich die KI im Grunde dazu anführe, meine Vision zu verwirklichen. So sollten Sie grundsätzlich arbeiten, wenn Sie KI verwenden. Sie sollten bereits eine grundlegende Vorstellung davon haben , was Sie wollen, wie die Struktur aussehen soll wie sich die Anwendung verhalten soll. Dann möchten Sie der KI grundsätzlich eine sehr klare und detaillierte Aufforderung geben sehr klare und detaillierte Aufforderung , damit sie auf Ihre Vision hinarbeiten kann. So machst du es im Grunde. Hier wurde also im Grunde die Abdo-Js-Datei erstellt, und im Index der HTML-Datei wurde sie im Grunde mit der Abdo-Js-Datei verknüpft Also werde ich auf Keypod klicken. Und wenn ich zu meiner Bewerbung gehe, sollte ich in der Lage sein , eine neue Aufgabe hinzuzufügen Also werde ich im Grunde Wh Clothes sagen . Und wenn du auf Hinzufügen klickst, sollte es zur Liste kommen und du kannst sehen, dass die Schreibweise von Washes falsch ist, also werde ich es löschen Wäsche in der Abenddämmerung waschen. Und wir haben eine weitere Funktion, und wir können eine Aufgabe hinzufügen und sogar eine Aufgabe entfernen. In Ordnung, wir sind mit Phase zwei fertig. Jetzt ist es Zeit für Phase drei. Das heißt, die Funktion abhaken. Deshalb müssen wir eine Funktion hinzufügen, mit der wir eine Aufgabe nach Abschluss der Woche überprüfen oder streichen können . Ich werde also sagen, dass das eine Möglichkeit bietet, eine Aufgabe zu beenden. Wenn ich auf den Text einer Aufgabe klicke, möchte ich, dass er grau wird und mit einer Linie durchzogen wird, um zu zeigen, dass die Aufgabe erledigt ist. Wenn ich also erneut darauf klicke, sollte es wieder normal werden. Kopieren wir es also und weisen Cursor an, dies für uns zu tun. Und einfach so, Cursor ist mit der Aufgabe noch nicht fertig, also hatte er einen Stil und eine aktualisierte App Dot JS Mal sehen, was es getan hat. Also hat es eine Funktion namens stogal done, einen Abfrageselektor und einen Emir Listener erstellt einen Abfrageselektor und einen Ja. Also jedes Mal, wenn ich darauf klicke, wird diese spezielle Funktion aktiviert. Und ein Durchstreichen würde dem Text tatsächlich hinzugefügt werden. Also werde ich auf Key Pale klicken. Wenn ich also zur Anwendung gehe, können Sie sehen, ob ich auf einen Text klicke, er wird gestrichen und wenn ich ihn erneut anklicke, kehrt er im Grunde zu seinem vorherigen Datum zurück, und das ist genau das, was ich wollte Also werde ich all diese Dinge entfernen und ich werde sagen, schreibe einen Brief an Papa und klicke auf Aufgabe hinzufügen Und was ist, wenn ich die Seite aktualisiere? Sie können sehen, dass standardmäßig die fest codierten To-DOS verwendet werden, die wir hinzugefügt haben Was auch immer wir hinzufügen, wird nicht beibehalten, also müssen wir auch dieses Feature hinzufügen Das ist die Speicherfunktion. Wenn ich jetzt meinen Browser aktualisiere, verschwinden alle Aufgaben. Kannst du es so machen, dass sich die App an meine Liste erinnert? Ich möchte, dass meine Aufgaben genau so da sind, wie ich sie hinterlassen habe. Wenn ich ihnen also den Tab schließe, den Tab schließe und zurückkomme, sollte er da sein. Also werde ich diese spezielle Aufgabe kopieren und sie gleich hier hinzufügen. Und außerdem werde ich eines sagen: Entferne die harte Code-Aufgabe Und hier werde ich meine Anweisungsdatei anhängen. Cursor möchte also grundsätzlich den lokalen Speicher eines Browsers nutzen. Jedes Mal, wenn Sie eine Aufgabe eingeben, wird diese auch im lokalen Speicher des Browsers gespeichert . Selbst wenn Sie also zurückkommen, wird das genau dort drüben persistent sein, und das sollte der Ansatz sein , dem Cursor folgen sollte Mal sehen, was es sich einfallen lassen wird. Damit ist die Aufgabe flüchtig erledigt. Hier können Sie also sehen, dass die Hardcoder-Aufgabe entfernt wurde und dass die JA-Speicheraufgabe in Ado genau wie erwartet im lokalen Speicher gespeichert wird genau wie erwartet im lokalen Speicher gespeichert Wir haben also die Funktionen „GetTask“, „Aufgabe speichern“, Aufgabe erstellen “, „Aufgabe rendern“, „Aufgabe speichern“ und all diese verschiedenen Funktionen Aufgabe speichern“ und all diese verschiedenen Was sie macht, ist, dass sie tatsächlich in verschiedene Funktionen umgestaltet wurde. Jedes Mal, wenn Sie die Anwendung laden, rendert sie die Aufgabe, indem sie die G-Task-Funktion aufruft Die Funktion Get Task ruft also im Grunde die Daten aus dem lokalen Speicher ab, falls vorhanden, oder sie sorgt im Grunde für einen sauberen Zustand Und jedes Mal, wenn Sie im Grunde eine Aufgabe hinzufügen, wird sie auch im lokalen Speicher gespeichert. So funktioniert es also. Also lass es uns speichern. Und wenn ich aktualisiere, können Sie sehen, dass momentan keine Aufgabe vorhanden ist. Also werde ich ein Lied singen, einen Brief schreiben. Geschirr spülen. Und ich werde sagen, dass ich schon Geschirr spüle und ja. Also werde ich auf Aktualisieren klicken. Und wie Sie sehen können, wenn ich aktualisiere, diese Daten beibehalten, aber Sie können sehen, dass das Kontrollkästchen nicht aktiviert wird, da ich diese Aufgaben grundsätzlich erledige Ich werde also sagen, dass, wenn ich eine Aufgabe markiert habe, auch ein Häkchen angezeigt wird Es gibt bereits ein Häkchen, Sie werden also sagen, dass Sie auch das Kontrollkästchen mit einem Häkchen füllen sollten. In Ordnung, also hat es es im Grunde genommen getan. Also werde ich es akzeptieren, damit du sehen kannst, dass jedes Mal, wenn ich losziehe, du auch sehen kannst, wie das Häkchen mit einem grünen Kästchen aktiviert wird Das ist es also. So können Sie eine KI im Grunde dazu veranlassen, eine Anwendung Ihrer Vision zu erstellen. also einfach durchgehen, was wir in dieser speziellen Klasse gemacht haben, wir als Erstes eine leere Datei mit einem Befehlspunkt erstellt. Das ist in dieser speziellen Anwendung nicht wirklich relevant , da es sich um eine sehr kleine Anwendung handelt und wir hier oben nicht wirklich viele Gespräche führen . Aber stellen Sie sich vor, Sie erstellen eine sehr große E-Commerce-Anwendung. Dann werden Sie ständig mit KI interagieren, um Änderungen vorzunehmen, Änderungen hinzuzufügen, Dinge zu refraktieren und so Und in diesem speziellen Fall wird der Kontext größer und die KI würde dazu neigen, und die KI würde dazu neigen zu vergessen, was am Anfang gesagt In diesem Fall können Sie also eine Anweisungsdatei wie diese erstellen, um die grundlegende Vision Ihrer Anwendung hinzuzufügen , sodass sie sich immer dieser Vision nähert, ohne zu halluzinieren also eine Sache. Und das zweitwichtigste ist die Lego Prompting-Strategie Stellen Sie sicher, dass Sie Ihre gesamte Vision oder Idee in mehrere verschiedene ausführbare kleine Proms aufteilen in mehrere verschiedene ausführbare kleine Proms denen Sie die KI beauftragen können und die Ihnen ein viel besseres Ergebnis liefern können als eine Das war's für dieses spezielle Video, und ich hoffe wirklich, dass Sie etwas gelernt haben , das Ihnen bei Ihrer Arbeit mit einem Cursor oder anderen KI-Agenten nützlich sein könnte bei Ihrer Arbeit mit einem Cursor oder anderen KI-Agenten Und eine Sache, auf die ich auch hinweisen möchte, ist, dass das, Sie in diesem speziellen Kurs gelernt haben , völlig allgemein gehalten ist. Es ist nicht an den Cursor gebunden. Wenn Sie in Zukunft zu Copilot oder Windsor für liebenswert wechseln , verwenden sie alle dieselbe Technik wie die Anweisungsdatei, die Aufforderungsstrategie Anweisungsdatei, die Aufforderungsstrategie Alles ist grundsätzlich auf alle anderen Anwendungen oder jegliche Art von KI-Agenten in diesem speziellen Bereich anwendbar auf alle anderen Anwendungen oder jegliche Art von KI-Agenten Und eine Sache, die ich euch auch sagen möchte , ist, die Hunde zu lesen . Der Cursor bietet viele Funktionen, wie Agenten, MCPs usw. einfach etwas Zeit und gehen Sie diese speziellen Dokumente durch , um zu verstehen, welche verschiedenen Funktionen Cursor Und, äh, es stellt sich heraus, dass es viele Funktionen gibt , die Ihnen bei Ihrem täglichen Arbeitsablauf helfen können. Also, Leute, vielen Dank fürs Zuschauen. 6. Fazit: Vielen Dank fürs Zuschauen. Und es ist wirklich toll, dass ihr es bis zum Ende geschafft habt. Es zeigt tatsächlich Ihre Leidenschaft und Ihr Interesse an Erstellung von Anwendungen mithilfe von KI , und das ist äußerst bemerkenswert Und ich wollte wirklich, wirklich wissen, was ihr über diese spezielle Klasse denkt , und das könnt ihr in der Befehlssitzung belassen Und falls ihr irgendwelche Fragen habt, stehe ich in der Diskussionsrunde immer zur Verfügung. Sie können eine Anfrage pausieren und ich helfe Ihnen gerne weiter. Und das ist alles. Vielen Dank fürs Zuschauen, und ich werde noch viel mehr Videos über KI machen und darüber, wie Sie damit eine Anwendung erstellen können, wie wir eine Idee in ein echtes Produkt umwandeln können. Bleiben Sie dran, bis sich Peter Johnson abmeldet.