Vibe Coding mit GitHub Copilot

Einleitung

          Copilot ermöglicht es Ihnen, eine ganz neue Anwendung von Grund auf neu zu erstellen, Features hinzuzufügen oder die Benutzeroberfläche zu ändern, ohne eine Codezeile selbst zu schreiben. Sie können mit Copilot arbeiten, indem Sie Eingabeaufforderungen in der Chatansicht verwenden—wobei Sie die KI als Ihren Codierungspartner nutzen—und alle tatsächlichen Programmierarbeiten Copilot überlassen.

In diesem Lernprogramm arbeiten Sie auf diese Weise in VS Code oder in einer JetBrains-IDE, um eine persönliche Zeitverfolgungs-Web-App zu erstellen.

Diese Methode eignet sich gut für die Entwicklung eines Machbarkeitsnachweises, das Erstellen eines Entwurfs einer Anwendung, die Sie weiter entwickeln, indem Sie einen herkömmlicheren Ansatz für die Softwareentwicklung oder das Erstellen von Anwendungen für Ihren eigenen persönlichen Gebrauch entwickeln.

Für wen ist dieses Tutorial gedacht?

•         **Lernender:** Sie lernen, wie Sie Softwareanwendungen erstellen. Sie können viel lernen, indem Sie mit Copilot zusammenarbeiten und beobachten, wie es Ihre Anfragen umsetzt.
  

•         **Nicht-Entwickler:** Sie sind Produktmanager oder arbeiten in einer anderen Rolle außerhalb eines Entwicklungsteams. Sie möchten schnell eine Machbarkeitsstudie erstellen, um bestimmte Funktionen zu veranschaulichen. Sie beschäftigen sich hauptsächlich mit der Benutzererfahrung und nicht mit den Details des Codes.
  

•         **Individuum:** Sie möchten eine Anwendung erstellen, um einige nützliche Funktionen bereitzustellen, die Ihnen bei Ihrem täglichen Arbeits- oder Privatleben helfen. Die Anwendung wird lokal auf Ihrem Computer ausgeführt, und nur Sie verwenden sie, sodass Sie nicht übermäßig besorgt sind, wie der Code zusammengestellt wurde.
  

Dieses Lernprogramm ist nicht für erfahrene Entwickler mit einer etablierten Praxis zum Schreiben von Code in einem Editor gedacht. Erfahrene Entwickler werden auf eine andere Weise verwenden Copilot – als Tool zur Problemlösung und steigerung der Produktivität. In diesem Lernprogramm arbeiten wir innerhalb des Chats und überlassen Copilot die gesamte Arbeit im Editor.

Wie lange dauert dieser Vorgang?

Es gibt viele Variablen, die sich darauf auswirken können, wie lange Sie für den Abschluss dieses Tutorials benötigen. Sie sollten jedoch mindestens zwei Stunden einplanen. Sie können jederzeit später zu demselben Punkt in der Unterhaltung Copilot-Chat zurückkehren, bei der Sie aufgehört haben.

Voraussetzungen

Bevor Sie beginnen, müssen Sie Folgendes haben:

• Ein GitHub Copilot Abonnementplan.
• Eine der folgenden IDEs:
  • Visual Studio Code
  • Jede JetBrains-IDE, die Copilot unterstützt, mit der installierten GitHub Copilot-Erweiterung für JetBrains. Weitere Informationen findest du unter Installieren der GitHub Copilot-Erweiterung in Ihrer Umgebung.
• Einige Erfahrungen mit der Verwendung Copilot-Chat in entweder Visual Studio Code oder JetBrains. Wenn Sie zuvor noch nie verwendet Copilot-Chat haben, lesen Sie GitHub Copilot Fragen in Ihrer IDE stellen.

Vorbereitung

Wir erstellen eine Zeitverfolgungs-App in einem neuen GitHub Repository.

1. Erstellen Sie auf der GitHub Website ein neues privates Repository für Ihre Anwendung, einschließlich einer anfänglichen README-Datei. Siehe Erstellen eines neuen Repositorys.

2. Klonen Sie eine Kopie des Repositorys auf Ihrem lokalen Computer. Siehe Klonen eines Repositorys.

3. Erstellen Sie in Ihrer lokalen Repositorykopie eine neue Verzweigung, um in ihr zu arbeiten.

   Verwenden Sie z. B. in einem Terminal den Befehl:

   Bash

   git checkout -b BRANCH-NAME
   

Recherchieren mit Copilot

1.        VS CodeÖffnen Sie in , oder In Ihrer JetBrains-IDE das Repositoryverzeichnis als neues Projekt oder Arbeitsbereich.
   

2. Schließen Sie alle editor-Registerkarten, die derzeit geöffnet sind.

   Wenn Sie in einem leeren Projekt oder Arbeitsbereich arbeiten und keine Editorregisterkarten geöffnet sind, verhindert Copilot, dass diese von Code oder Informationen in diesen Registerkarten beeinflusst werden.

3. Öffnen Sie ein Terminalfenster in der IDE.

4. Öffnen Sie Copilot-Chat und überprüfen Sie unten in der Chatansicht, dass Ask der aktuell ausgewählte Chatmodus ist. Wenn dies nicht der Grund ist, wählen Sie " Fragen" aus der Dropdownliste für den Chatmodus aus.

   

5. Wählen Sie ein Modell aus der Dropdownliste "Modelle" aus.

   Hinweis

   Die in diesem Lernprogramm genannten Antworten wurden empfangen, während Claude Sonnet 4.5 verwendet wurde. Andere Modelle reagieren anders, sollten aber ungefähr ähnliche Ergebnisse erzielen. Claude Sonnet 4.5 ist eine gute Wahl, wenn es verfügbar ist, da es nützliche Erklärungen in der Chatansicht bereitstellt, erklärt, was es tut, und detaillierte Zusammenfassungen gibt, nachdem es die Codierung abgeschlossen hat.

   Wenn Claude Sonnet 4.5 nicht verfügbar ist, legen Sie das Modell auf Auto fest oder wählen Sie ein Modell Ihrer Wahl aus.

6. Geben Sie diese Eingabeaufforderung in den Chat ein:

   Copilot prompt

   I need to keep a daily log of what I've spent my time on. I want to build a time-tracking application to help me do this. Throughout the day I want to use the app to record what I'm working on as I move between tasks. At the end of the day it should show me the total time I've spent on each item.
   
   What are the typical features of such an app?
   
   What do I need to consider when building this app?
   

          Copilot antwortet mit Details, um Ihre Fragen zu beantworten.
   

7. Beachten Sie die Antwort von Copilot und bitten Sie gegebenenfalls um weitere Informationen, um Ihre Gedanken zu Ihrer Bewerbung zu klären.

   Sie können z. B. Folgendes fragen:

   Copilot prompt

   Data storage: the application will run locally on my laptop. What's the best way to persistently store data so that I'll have access to historic time-tracking data?
   
   Data structure: How should I structure the data for this application? There will be tasks and projects. Each chunk of time will be associated with a task and some, but not all, tasks will be associated with projects. I will want to see totals for: each task, each project, each task per project.
   

8. Fahren Sie fort, in derselben Chatunterhaltung Fragen zu stellen, um ein klareres Bild von der Anwendung zu bekommen, die Sie entwickeln möchten.

   Lassen Sie Ihre Chatunterhaltung geöffnet, da Copilot diese in den nächsten Schritten verwenden wird.

Planen der Implementierung

Sie können jetzt mit der Planung einer ersten Implementierung Ihrer Anwendung beginnen. Es ist ratsam, mit einer Einfachen Version der Anwendung zu beginnen, auf der Sie iterieren können. Dies erleichtert es, die grundlegende Funktionalität zum Laufen zu bringen, bevor Features hinzugefügt werden.

1. Wechseln Sie in derselben Copilot-Chat Unterhaltung, die Sie im vorherigen Abschnitt verwendet haben, vom "Fragemodus" in den "Planmodus", indem Sie die Option "Plan" im Dropdownmenü am unteren Rand der Chatansicht auswählen.

2. Geben Sie diese Eingabeaufforderung ein:

   Copilot prompt

   I want to build a time-tracking application that allows me to keep track of how much time I spend on tasks during my working day. This should be a web app that runs locally on my computer. Plan the implementation of a basic, initial version of this application. This first version should allow me to:
   
   - Add, edit and delete projects and tasks - each a name with a maximum of about 50 characters
   - Quickly click to select a project and task and record the start time
   - Click another task to stop the current timer, recording the stop time, and recording the start time for the new task
   - Pause/resume/end the current task
   - Display the totals of times I have spent on each: task, project, and task per project.
   
   Time is always recorded for a specific task. A task can optionally be associated with a project.
   
   Store data for each day, but for this version do not include any user interface or functionality for looking at historical data, or compiling statistics. The initial version of the application should be limited to today's time tracking.
   
   Notes:
   - Tasks never overlap
   - Time should be accurate to the minute by recording the day, hour, minute tasks are started and stopped and calculating the duration from this
   - Design the web UI for display on a desktop monitor
   - Keep things very simple for the initial version. Do not add any other features not mentioned in this prompt
   

   Copilot antwortet mit etwas wie:

   Plan: Erstellen einer Zeiterfassungs-Webanwendung

   Eine Single-Page-Anwendung zur Nachverfolgung der täglichen Aufgabenzeit mithilfe von reinem HTML/CSS/JavaScript und localStorage. Die App zeigt Projekte/Vorgänge in einer Randleiste an, zeigt einen aktiven Timer an und berechnet tägliche Summen nach Vorgang und project.

   Steps

          **Erstellen Sie** mit `index.html`, `styles.css`, `app.js` und `storage.js` eine Projektstruktur für eine eigenständige Vanilla JavaScript-Anwendung
   

          **Implementierung der Datenspeicherschicht** in `storage.js` unter Verwendung von localStorage mit Sammlungen für `projects`, `tasks` und `timeEntries`, einschließlich CRUD-Operationen und ID-Erzeugung
   

          **Erstellen der HTML-Struktur** in `index.html` mit drei Hauptabschnitten: linke Randleiste für Projekt-/Aufgabenverwaltung, Mittelpanel für aktiven Timer und Steuerelemente (Start/Pause/Fortsetzen/Stop) und rechtes Panel für tägliche Summen.
   

          **Implementieren einer zentralen Zeitgeberlogik** in `app.js`, um die Aufgabenauswahl (vorherige automatisch stoppen, neue automatisch starten), das Pausieren/Fortsetzen/Stoppen von Aktionen und das Speichern von auf die Minute präzise Berechnungen zu verarbeiten `{ taskId, startTime, endTime, duration }`
   

          **Erstellen von UI-Renderingfunktionen** in `app.js`, um Projekt-/Aufgabenlisten mit Inlinebearbeitung/Löschen, eine aktive Zeitgeberanzeige mit Echtzeitupdates und die Gesamtpanelaggregation nach Aufgabe, Projekt und Aufgabe pro Projekt zu unterstützen
   

          **Gestalten Sie die Benutzeroberfläche**`styles.css` mit einem desktop-optimierten dreispaltigen Layout, klaren visuellen Zuständen für aktive/angehaltene Timer und einfachen Formularen zum Hinzufügen/Bearbeiten von Projekten und Aufgaben
   

   Weitere Überlegungen

          **Datumsbehandlung** – Speichern Sie alle Zeiten als ISO-Zeichenfolgen und Filtereinträge nach dem heutigen Datum (`YYYY-MM-DD`). Sollte die Tagesgrenze Mitternacht oder eine benutzerdefinierte Zeit sein (z. B. 4Am für Late-Night-Worker)?
   

          **Anzeigeformat des Zeitgebers** - Verstrichene Zeit anzeigen als `HH:MM` oder `H hours M minutes`? Aktualisieren Sie jede Sekunde oder jede Minute?
   

             **Nicht zugewiesene Aufgaben** – Wie können Aufgaben ohne Projekte in der Benutzeroberfläche angezeigt werden? Trennen Sie den Abschnitt „Kein Projekt“ oben/unten in der Seitenleiste, oder alphabetisch gemischt?
   

1. Beantworten Sie die Fragen zu den "weiteren Überlegungen" Copilot . Sie könnten z. B. mit dieser Eingabeaufforderung antworten:

   Copilot prompt

   - Date handling: only consider the local date. This app is only going to be used by one person in one timezone. Set the day boundary to 4 am.
   - Time display: Show elapsed time as HH:MM. Don't track seconds.
   - Unassigned tasks: I've changed my mind. All tasks should be associated with a project, but there should be a built-in project called "No Project" (which the user can't delete or rename). All tasks should be associated with this project until the user chooses another project.
   
   If the user is changing tasks for the same project then they should be able to do this with one click (assuming the new task has already been defined). If they are doing the same task but for a different project, this should also be possible to change with one click (assuming the new project is already defined). If they want to track time for a different task in a different project then they should be able to do this with 2 clicks.
   

          Copilot können auf weitere Fragen zu Ihrer Berücksichtigung antworten.
   

2. Sie können einige oder alle Fragen beantworten, oder wenn Sie der Meinung sind, dass der Plan über genügend Details verfügt, können Sie zur nächsten Phase springen.

          CopilotDie Antworten sind nicht deterministisch, sodass die gestellten Fragen variieren, aber wir gehen davon aus, dass ihre Antwort folgende Fragen enthielt:
   

          **Neue Aufgabe im Standardprojekt** – Wenn Sie eine neue Aufgabe hinzufügen, ohne ein Projekt anzugeben, weisen Sie „Kein Projekt“ oder dem aktuell aktiven/ausgewählten Projekt zu? Empfohlen: Derzeit ausgewähltes/aktives Projekt mit "Kein Projekt" als Fallback.
   

          **Timer-Präzisionsrandfall** – Wenn der Benutzer Aufgaben innerhalb derselben Minute wechselt (z. B. 10:30:15 bis 10:30:45), sollte dies einen 0-minütigen Eintrag erzeugen oder ignoriert werden? Empfehlung: Ignorieren und behandeln Sie dies als sofortigen Schalter ohne Aufzeichnung.
   

   Sie können sich entscheiden, auf diese Fragen zu antworten, indem Sie die Eingabeaufforderung eingeben:

   Copilot prompt

   New task default project - When adding a new task without actively specifying a project, use the currently selected/active project with "No Project" as the default when the user has not actively selected any other project.
   
   Timer precision edge case - If user switches or ends tasks within the same minute as the start time then delete this entry. Only time entries of more than one minute should be recorded.
   

3. Fahren Sie fort, wenn Sie das Gefühl haben, dass weitere Fragen beantwortet werden müssen.

4. Halten Sie Ihre Chatunterhaltung offen, da Copilot dies in den nächsten Schritten verwenden wird.

Erstellen Ihrer Anwendung mit Copilot-Cloud-Agent

Wenn Sie denken, dass der Plan genügend Details enthält:

1. Klicken Sie in der **** Ansicht auf Copilot-Chat".

   Je nach IDE wird der Agent entweder sofort gestartet, oder er fügt "Implementierung starten" als Eingabeaufforderung hinzu, die Sie dann übermitteln sollten.

   Beachten Sie, dass der Chatmodus von "Plan" zu "Agent" wechselt.

2.        Copilot fordert Ihre Berechtigung zum Ausführen von Aktionen wie bearbeiten vertraulicher Dateien, Ausführen von Befehlen oder Hinzufügen von Dateien zu Git an.
   

   * In VS Code: Klicken Sie auf "Zulassen".

   

   Klicken Sie alternativ auf den Pfeil auf der Schaltfläche " Zulassen ", und klicken Sie im Dropdownmenü auf "In dieser Sitzung zulassen ".

   •      **In JetBrains:**
     

     • Wenn Sie gefragt werden, ob Sie eine Datei zu Git hinzufügen möchten, aktivieren Sie das Kontrollkästchen "Nicht mehr fragen ", und klicken Sie dann auf "Hinzufügen".

     • Wenn Sie aufgefordert werden, einen Befehl auszuführen, klicken Sie auf "Weiter".

       

          Copilot beginnt mit der Implementierung einer ersten Version Ihrer Anwendung.
       

3. Wenn Copilot seine Antwort beendet, ohne die Installation abzuschließen, oder wenn Copilot scheint, festgehangen zu haben, führen Sie die folgenden Abhilfemaßnahmen nach Bedarf aus:

   •      **Fehlende Komponente**
     

     Wenn Copilot nicht fortgesetzt werden kann, weil eine erforderliche Komponente (z. B. Node.js) installiert werden muss, können Sie eine Eingabeaufforderung einsetzen, in der Sie Copilot aufgefordert werden, die fehlende Komponente herunterzuladen und zu installieren.

   •      **Der Prozess dauert lange**
     

     Einige Schritte können mehrere Minuten dauern. Seien Sie geduldig, und lassen Sie es dem Agenten zu, jeden Teil des Prozesses abzuschließen. Ein animiertes Drehfeldsymbol gibt an, dass der Agent derzeit an einem Befehl arbeitet.

     Beispiel: in JetBrains-IDEs:

     

   •      **Eingabe erforderlich**
     
     
          Copilot Gelegentlich wird ein Befehl ausgeführt, der eine manuelle Eingabe erfordert.
     

     Sollte es den Anschein haben, dass Copilot festhängt, überprüfen Sie das Terminalfenster der IDE, um festzustellen, ob ein Befehl eine Aktion von Ihnen erfordert. Copilot wartet, bis Sie eine Antwort im Terminal eingeben, bevor Sie fortfahren.

   •      **Fehlermeldungen**
     

     Wenn beim Entwickeln der Anwendung Fehlermeldungen angezeigt werden, kopieren Sie die Fehlermeldung in das Chat-Eingabeaufforderungsfeld, und bitten Copilot Sie, das Problem zu beheben.

     Hinweis

     Möglicherweise müssen Sie auf diese Weise mit Copilot iterieren, es auffordern, Probleme zu debuggen und zu beheben, bis es eine funktionierende Anwendung erstellt hat, die Sie in Ihrem Browser anzeigen können.

   •      **
          CopilotDie Antwort scheint hängen zu bleiben.**
     

     Wenn das Ladesymbol in einer Antwort angezeigt wird, es jedoch keine Aktion gibt, nachdem Sie mehrere Minuten gewartet haben (und im Terminal überprüft haben, ob eine Eingabe erforderlich ist), können Sie die Unterhaltung beenden und neu starten.

     Klicken Sie unten in der Chatansicht auf die Schaltfläche "Abbrechen". Gehen Sie beispielsweise in VS Code folgendermaßen vor:

     

     Geben Sie dann die Eingabeaufforderung ein:

     Copilot prompt

     Your previous response stalled. Try again, picking up from where you left off.
     

4. Normalerweise fordert Sie am Ende des Codierungsprozesses Copilot Ihre Berechtigung zum Öffnen einer nicht vertrauenswürdigen Webseite für die Anwendung an:

   

   Erteilen Sie diese Berechtigung.

5. Wenn der Agent die Arbeit an der Anwendung beendet hat, wird eine Zusammenfassung dessen angezeigt, was er im Chatbereich erstellt hat. In der Regel wird ein Link zur ausgeführten Anwendung bereitgestellt.

   Die Zeiterfassungsanwendung kann auch in Ihrer IDE auf einer Browserregisterkarte angezeigt werden. Dies kann hilfreich sein, um zu bestätigen, dass die Seite verfügbar ist. Sie sollten die Anwendung jedoch immer in Ihrem Standardbrowser überprüfen, um eine realistische Benutzererfahrung zu überprüfen.

   Klicken Sie auf den Link im Chatbereich, um die Anwendung in Ihrem Standardbrowser zu öffnen.

   Wenn ein Link in Copilotder Chatantwort nicht angezeigt wird, warten Sie einige Minuten, da der Agent möglicherweise an der Bereitstellung der Anwendung arbeitet. Wenn immer noch kein Link angezeigt wird, können Sie Copilot auffordern, einen anzuzeigen.

   Copilot prompt

   Confirm the implementation is complete. If so, give me a link to the running application.
   

6. Wenn die endgültige Nachricht von Copilot Ihnen Anweisungen wie das Ausführen von npm start zum Starten der Anwendung gibt, anstatt einen Link zur laufenden Anwendung bereitzustellen, können Sie Copilot bitten, den Befehl für Sie auszuführen und überprüfen, ob dieser erfolgreich abgeschlossen wurde. Beispiel:

   Copilot prompt

   Run npm start for me and confirm everything is working
   

   Wenn Copilot nicht alle Befehle selbst ausführen kann, erhalten Sie Befehle, die Sie kopieren und in das Terminal einfügen können.

Testen Der Anwendung

1. Zeigen Sie die Webseite Ihrer Anwendung an.

   Im Folgenden finden Sie einige Beispiele für eine Zeiterfassungsanwendung, die von Copilot erstellt wurde:

   
   

   Hinweis

   Die Anwendung, die für Sie generiert wird, Copilot sieht möglicherweise ganz anders aus als die oben gezeigten Beispiele.

2. Versuchen Sie, die Anwendung zu verwenden. Fügen Sie ein paar Projekte und eine Auswahl von Vorgängen hinzu, und beginnen Sie dann mit der Nachverfolgung der Zeit für einen Vorgang.

3. Wenn Sie diesen ersten Entwurf der Anwendung ausprobieren, notieren Sie sich die beiden oder drei wichtigsten Dinge, die geändert werden müssen. In den nachfolgenden Schritten arbeiten Sie daran, diese zu beheben. Verbringen Sie jetzt nicht mehr zeit damit, alles zu notieren, was Sie ändern möchten. Identifizieren Sie einfach die dringendsten Dinge, die zuerst behoben werden müssen. Sie haben Zeit, alles zum Laufen zu bringen und das Aussehen so zu gestalten, wie Sie es später im Prozess möchten.

4. Wenn die Anwendung nicht geladen wird oder ein Fehler angezeigt wird, beschreiben Sie das Problem in der Chataufforderung, kopieren und einfügen sie alle Fehlermeldungen, und bitten Copilot Sie, das Problem zu debuggen und zu beheben.

5. Nachdem Sie den anfänglichen Entwurf der Anwendung überprüft und festgelegt haben, dass sie mindestens rudimentär ausgeführt wird, kehren Sie zu Ihrer IDE zurück.

6.        _
          **Optional**: Wenn Sie mit der Art des Codes vertraut sind, den Copilot für Sie schreibt._ Zeigen Sie die von Copilot geänderten Dateien im Editor an und überprüfen Sie die Änderungen. Sie können bei Bedarf eigene Änderungen vornehmen.
   

7. Klicken Sie in der **** Ansicht auf VS Code (in ****) oder Copilot-Chat (in JetBrains IDEs), um die Änderungen zu übernehmen und die Diff-Zeilen aus dem Editor zu entfernen.

   Sie verfügen jetzt über eine Basisversion Ihrer Anwendung, die Sie durchlaufen können, um die Funktionalität und Benutzeroberfläche zu verbessern und zu erweitern.

8. Übergeben Sie die Änderungen an Git.

   Es empfiehlt sich immer, Änderungen bei jeder erfolgreichen Iteration zu übernehmen, damit Sie problemlos zu einer früheren Version zurückkehren können, wenn Sie entscheiden, dass Ihnen einige Änderungen nicht gefallen, die Copilot für Sie vorgenommen wurden.

9. Schließen Sie alle geöffneten Editor-Registerkarten, aber lassen Sie die Ansicht Copilot-Chat geöffnet, während Sie weiterhin in diesem Chat arbeiten.

Iterieren von Änderungen

1. Nachdem Sie die anfängliche Version auf Git festgelegt haben, können Sie eine Änderung an der Anwendung vornehmen, indem Sie eines der Punkte beheben, die Sie bei der Überprüfung der Website festgestellt haben.

   Beispielsweise kann die Implementierung Aufgaben an project gebunden haben, sodass eine aufgabe, die für eine project erstellt wurde, nicht angezeigt wird, wenn Sie eine andere project auswählen. Um dies zu ändern und Aufgaben für beliebige Projekte erstellen zu können, geben Sie einen weiteren Prompt in dasselbe Gespräch ein, während Sie weiterhin im Agentenmodus für Copilot sind. Sie können eine Eingabeaufforderung verwenden, z. B.:

   Copilot prompt

   Tasks should not be tied to projects in the user interface, as they currently are. When the user selects a project, allow them to choose any currently defined task. There should be a many-to-many relationship between projects and tasks.
   

2. Auch hier werden Sie wahrscheinlich von Copilot aufgefordert, die Änderungen zu genehmigen, die an dem Code vorgenommen werden müssen. Klicken Sie auf "Genehmigen" oder "Fortfahren".

3. Kehren Sie nach Abschluss der Änderung in Copilot zum Browser zurück und aktualisieren Sie die Seite.

4. Überprüfen Sie die überarbeitete Anwendung und informieren Sie Copilot, ob die Änderung nicht ordnungsgemäß implementiert wurde.

   Möglicherweise erkennen Sie mehr als eine Sache, die behoben werden muss, aber um gleichzeitig den Fokus auf eine Sache zu legen Copilot , sollten Sie jede Eingabeaufforderung auf eine einzelne Aufgabe beschränken und dies nach Bedarf in einer Reihe von Eingabeaufforderungen und Antworten durchlaufen, bis das Problem behoben ist. Fahren Sie dann mit dem nächsten Schritt fort, den Sie ändern möchten.

5. Wenn es ein Problem mit dem Layout der Webseite gibt, z. B. überlappende oder schlecht ausgerichtete Elemente, können Sie einen Screenshot erstellen, ihn in den Chat einfügen und eine Eingabeaufforderung wie:

   Copilot prompt

   This part of the web page looks bad. Fix it.
   

6. Nachdem eine Änderung zufriedenstellend implementiert wurde, klicken Sie auf "Alle beibehalten " oder "Alle annehmen ", und übernehmen Sie die Änderungen.

7.        _
          **Optional**:_ Je nach Ihren Arbeitsweisen – z. B. wenn Sie in einem Entwicklungsteam arbeiten – können Sie sich zu diesem Zeitpunkt entscheiden und nach jeder wichtigen Änderung eine Pullanforderung auslösen. So können Sie Änderungen zur Überprüfung vorlegen und in den Standardzweig des Repositorys zusammenführen, damit andere Personen gemeinsam am Code arbeiten können.
   

8. Fahren Sie fort, Ihre Anwendung weiterzuentwickeln.

   Sie können beispielsweise der App einen anderen Stil für die Benutzeroberfläche geben. In diesem Fall können Sie weiterhin im Agentmodus Copilot auffordern:

   Copilot prompt

   I don't like the look of the user interface. Suggest some alternative web UI libraries I could choose to give the app a more formal, business-like appearance.
   

          Copilot Listet einige Benutzeroberflächenbibliotheken auf.
   

9. Wählen Sie eine der Bibliotheken aus, und bitten Sie Copilot , sie zu verwenden. Beispiel:

   Copilot prompt

   Alter the user interface to use Bootstrap 5. I want the app to look like a professionally designed business application.
   

          Copilot überarbeitet die Anwendung, um Ihre ausgewählte Benutzeroberflächenbibliothek zu verwenden.
   

10. Überprüfen Sie die Ergebnisse, und übernehmen Sie die Änderungen, wenn Sie mit dem überarbeiteten Aussehen der Anwendung zufrieden sind.

11. Eine häufige Anforderung für eine Zeitverfolgungsanwendung ist die Möglichkeit, Ihre Arbeitszeittabelle auszugeben. Wenn Sie z. B. Ein Auftragnehmer sind, müssen Sie möglicherweise eine Arbeitszeittabelle zusammen mit Ihrer Rechnung einreichen. Lassen Sie uns also die Möglichkeit zum Generieren einer PDF-Datei hinzufügen.

    Verwenden Sie diese Eingabeaufforderung:

    Copilot prompt

    Add a button to the user interface which generates a PDF timesheet for the work the user has tracked today. The timesheet should show the total time spent on task for each of the defined project for which data has been recorded today. Under this show the total time spent on each project. Then show the total time spent on each task irrespective of projects. Finally show a chronological lists of tasks performed during the day with the time spent on each.
    

Beispielanwendung

Nachdem Sie mit Copilot zusammengearbeitet haben, um Ihre Zeiterfassung zu erstellen, zu erweitern und zu verbessern, könnte die Anwendung wie folgt aussehen:

Verbesserung Ihres Software-Projekts

1.        Copilot kann Ihnen helfen, Ihr Projekt robuster zu machen, indem Sie Tests hinzufügen und ausführen. Tests helfen, Fehler daran zu hindern, in die Codebasis zu gelangen. Sie könnten im Agentmodus aufgefordert werden, Copilot zu verwenden.
   

   Copilot prompt

   Add a comprehensive suite of tests for this application. These should include unit tests, integration tests, component tests, database tests, and end-to-end tests. Locate the tests in a `tests` directory. Run the tests and fix any problems that are identified.
   

2. Es ist immer ratsam, eine README-Datei in Ihrer project zu haben. Die README sollte eine Übersicht über die project bereitstellen und Anweisungen zur Verwendung der Anwendung geben. Sie können Copilot bitten, die README-Datei zu erstellen oder zu aktualisieren.

   Copilot prompt

   Add or update a README.md file. This should provide an introduction to the application, describing its primary use and highlighting its features. It should give easy to follow user instructions for using the application in the browser. It should provide admin instructions, explaining how to deploy the application. Finally it should give an overview of the technologies used to build the application and some basic information for developers on how to maintain the code and extend the application.
   

3. Nachdem Sie nun den anfänglichen Code für die Anwendung zum Repository hinzugefügt haben, sollten Sie eine individuelle Anleitungsdatei für Copilot hinzufügen. Die benutzerdefinierte Anleitungsdatei verbessert Copilots Antworten in einem Repository, indem sie repositoryspezifische Anleitungen und Implementierungspräferenzen bereitstellt. So fügen Sie eine benutzerdefinierte Anweisungendatei hinzu:

   •      **Klicken Sie in VS Code auf** das Kogsymbol "Chat konfigurieren", oben in der Chatansicht, und klicken Sie auf **"Chatanweisungen generieren"**.
     

   •      **Senden Sie in JetBrains-IDEs:** im Agent-Modus von Copilot-Chat, eine Eingabeaufforderung wie:
     

     Copilot prompt

     Analyze this codebase and create or update `.github/copilot-instructions.md` to guide AI agents.
     
     Discover essential knowledge for immediate productivity:
     - Architecture: major components, service boundaries, data flows, and structural decisions
     - Developer workflows: builds, tests, debugging commands
     - Project conventions that differ from common practices
     - Integration points and cross-component communication
     
     Guidelines:
     - Merge intelligently if file exists
     - Write ~20-50 concise lines with markdown structure
     - Include specific codebase examples
     - Focus on THIS project's approaches, not generic advice
     - Document discoverable patterns, not aspirational patterns
     - Reference key files/directories that exemplify important patterns
     

4. Überprüfen Sie die Datei mit den Anweisungen. Wenn Sie der Meinung sind, dass die Anweisungen weitere Details benötigen, können Sie diese manuell zur Datei hinzufügen und speichern. Sie können z. B. eine Anweisung zum Ausführen von Tests hinzufügen, wenn die Datei noch keine Anweisung zu diesem Thema enthält:

   Text

   ## Running tests
   
   Always run the complete test suite after completing a batch of code changes, to ensure the changes do not break or adversely affect any part of the application. Fix any test failures and then run the tests again to verify the fix.
   

Nächste Schritte

• Fahren Sie mit der Iteration dieses Projekts fort und verbessern Sie Ihre Zeiterfassung.
• Erstellen Sie mit derselben Methodik eine andere Anwendung.
• Erfahren Sie mehr über eine andere Möglichkeit zum Erstellen von Anwendungen, ohne den Code selbst zu schreiben. Weitere Informationen findest du unter Informationen zu GitHub Spark.