Vibe Coding mit GitHub Copilot

Einleitung

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

In diesem Tutorial arbeiten Sie auf diese Weise in VS Code oder in einer JetBrains-IDE, um eine Web-App für die persönliche Zeiterfassung 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 vom Arbeiten mit Copilot viel lernen und sehen, wie Ihre Anforderungen implementiert werden.
  

•         **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 verwenden Copilot auf eine andere Weise – als Tool zur Problemlösung und Steigerung der Produktivität. In diesem Tutorial arbeiten wir im Chat und überlassen Copilot die 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 zu der Stelle zurückkehren, an der Sie in derselben Unterhaltung in Copilot Chat aufgehört haben.

Voraussetzungen

Zunächst benötigst du jedoch Folgendes:

• Ein Abonnementplan für GitHub Copilot
• Eine der folgenden IDEs:
  • Visual Studio Code
  • Jede JetBrains-IDE, die Copilot unterstützt, mit installierter GitHub Copilot Erweiterung für JetBrains. Weitere Informationen findest du unter Installation der GitHub Copilot-Erweiterung in Ihrer Umgebung.
• Sie sollten über etwas Erfahrung mit der Verwendung von Copilot Chat in Visual Studio Code oder JetBrains verfügen. Wenn Sie Copilot Chat noch nie zuvor verwendet haben, lesen Sie Fragen an GitHub Copilot in Ihrer IDE stellen.

Vorbereitung

Wir erstellen eine Zeitverfolgungs-App in einem neuen Repository.

1. Erstellen Sie auf der 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. Öffnen Sie in VS Code oder in Ihrer JetBrains-IDE das Repositoryverzeichnis als neues Projekt oder neuen Arbeitsbereich.

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

   Das Arbeiten in einem leeren Projekt oder Arbeitsbereich, ohne dass Editorregisterkarten geöffnet sind, verhindert, dass Copilot von Code oder Informationen auf diesen Registerkarten beeinflusst wird.

3. Öffnen Sie ein Terminalfenster in der IDE.

4. Öffnen Sie Copilot Chat und überprüfen Sie unten in der Chatansicht, dass "Fragen" 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. Schauen Sie sich die Antwort von Copilot an. Fordern Sie weitere Informationen an, wenn erforderlich, um Ihre Überlegungen zu Ihrer Anwendung 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 offen, da Copilot sie 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 zum Planmodus, indem Sie im Chatmodus-Dropdownmenü unten in der Chatansicht die Option Planen 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 Projekt.

   Steps

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

   2. Implementierung der Datenspeicherebene in **** unter Verwendung von localStorage mit Sammlungen für storage.js, projects und tasks, einschließlich CRUD-Vorgänge und ID-Generierung

          **Erstellen Sie die HTML-Struktur** in `index.html` mit drei Hauptabschnitten: linke Seitenleiste für Projekt-/Vorgangsmanagement, zentraler Bereich für aktiven Timer und Steuerelemente (Start/Pause/Fortsetzen/Stoppen), und rechter Bereich 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? Soll der Abschnitt "Kein Projekt" an der Oberseite oder Unterseite der Randleiste getrennt werden, oder alphabetisch gemischt?
   

1. Beantworten Sie die Fragen unter „Weitere Überlegungen“, die von Copilot gestellt werden. 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 stellt Ihnen anschließend möglicherweise weitere Fragen.

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.

   Copilot's Antworten sind nicht deterministisch, sodass die Fragen, die es stellt, variieren. Gehen wir jedoch davon aus, dass seine Antwort folgende Fragen umfasst:

          **Neues Vorgangsstandardprojekt** – Wenn Sie einen neuen Vorgang hinzufügen, ohne Projekt anzugeben, weisen Sie "Kein Projekt" oder dem aktuell aktiven/ausgewählten Projekt zu? Empfehlung: Derzeit ausgewähltes oder aktives Projekt mit "Kein Projekt" als Standardauswahl.
   

          **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. Lassen Sie Ihre Chatunterhaltung offen, da Copilot sie in den nächsten Schritten verwenden wird.

Erstellen Ihrer Anwendung mit Copilot Programmier-Assistent

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

1. Klicken Sie in der Ansicht Copilot Chat auf " Implementierung starten ".

   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 die Berechtigung zum Ausführen von Aktionen an, z. B. dem Bearbeiten vertraulicher Dateien, dem Ausführen von Befehlen oder dem Hinzufügen von Dateien zu Git.

   •      **Klicken Sie in VS Code** 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 wird mit der Implementierung einer ersten Version Ihrer Anwendung beginnen.

3. Wenn Copilot seine Antwort beendet, ohne die Installation abzuschließen, oder wenn Copilot scheinbar nicht mehr reagiert, führen Sie die folgenden erforderlichen Abhilfemaßnahmen durch:

   •      **Fehlende Komponente**
     

     Wenn Copilot besagt, dass sie nicht fortgesetzt werden kann, da eine erforderliche Komponente installiert werden muss (z. B. Node.js), können Sie eine Eingabeaufforderung eingeben, in der Sie Copilot bitten, 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**
     

     Gelegentlich führt Copilot einen Befehl aus, der eine manuelle Eingabe erfordert.

     Wenn Copilot inaktiv zu sein scheint, überprüfen Sie das IDE-Terminalfenster, um zu prüfen, 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 Sie Copilot, das Problem zu beheben.

     Hinweis

     Möglicherweise müssen Sie diesen Vorgang mit Copilot wiederholt ausführen und es zum Debuggen und Beheben von Problemen auffordern, bis es eine funktionierende Anwendung gibt, die Sie in Ihrem Browser anzeigen können.

   •      **Copilot antwortet nicht**
     

     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". Zum Beispiel in VS Code:

     

     Geben Sie dann die Eingabeaufforderung ein:

     Copilot prompt

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

4. In der Regel fordert Copilot gegen Ende des Codierungsprozesses eine 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 der Chatantwort von Copilot 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 Link anzuzeigen:

   Copilot prompt

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

6. Wenn die endgültige Meldung von Copilot Anweisungen zum Starten der Anwendung (z. B. Ausführen npm start) enthält, anstatt einen Link zur ausgeführten Anwendung zu liefern, können Sie Copilot bitten, den Befehl für Sie auszuführen und zu überprüfen, ob er 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, werden Ihnen Befehle bereitgestellt, die Sie kopieren und in das Terminal einfügen können.

Testen Der Anwendung

1. Zeigen Sie die Webseite Ihrer Anwendung an.

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

   
   

   Hinweis

   Die Anwendung, die Copilot für Sie generiert, könnte sich erheblich von den oben gezeigten Beispielen unterscheiden.

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 Sie Copilot, 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 Dateien an, die Copilot im Editor geändert hat, und überprüfen Sie die Änderungen. Sie können bei Bedarf eigene Änderungen vornehmen.
   

7. Klicken Sie auf Beibehalten (in VS Code) oder auf Alle akzeptieren (in JetBrains-IDEs) in der Ansicht Copilot Chat, um die Änderungen zu akzeptieren 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 hat.

9. Schließen Sie alle geöffneten Editor-Registerkarten. Halten Sie jedoch die Ansicht Copilot Chat geöffnet, da Sie weiter in derselben Chatunterhaltung arbeiten werden.

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 Vorgänge an Projekt gebunden haben, sodass eine für ein Projekt erstellte Aufgabe nicht angezeigt wird, wenn Sie ein anderes Projekt auswählen. Wenn Sie dies ändern möchten, damit Sie Aufgaben erstellen können, die für jedes Projekt verwendet werden können, geben Sie eine weitere Aufforderung in dieselbe Unterhaltung 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. Copilot wird Sie wahrscheinlich zur Genehmigung von Änderungen auffordern, die für den Code ausgeführt werden müssen. Klicken Sie auf "Genehmigen" oder "Fortfahren".

3. Sobald Copilot die Änderung abgeschlossen hat, kehren Sie zu Ihrem Browser zurück und laden die Seite neu.

4. Überprüfen Sie die Anwendung in ihrer überarbeiteten Form und melden Sie Copilot, ob die Änderung nicht ordnungsgemäß implementiert wurde.

   Möglicherweise identifizieren Sie mehr als ein Problem, das behoben werden muss. Um Copilot jedoch zu ermöglichen, sich auf jeweils ein Problem zu konzentrieren, sollten Sie jeden Prompt auf eine einzelne Aufgabe einschränken und diesen Vorgang mittels einer Reihe von Eingabeaufforderungen und Antworten iterieren, wenn notwendig, bis das jeweilige 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önnten Sie im Agent-Modus den folgenden Prompt an Copilot senden:

   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 fordern Sie dann Copilot auf, 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 wird die Anwendung so überarbeiten, dass die von Ihnen gewählte Benutzeroberflächenbibliothek verwendet wird.

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 gearbeitet haben, um Ihre Zeiterfassung zu erstellen, zu erweitern und zu verbessern, könnte die Anwendung wie folgt aussehen:

Verbessern Ihres Softwareprojekts

1. Copilot kann Ihnen helfen, Ihr Projekt robuster zu machen, indem Tests hinzuzufügen und auszuführen. Tests helfen, Fehler daran zu hindern, in die Codebasis zu gelangen. Sie könnten im Agent-Modus den folgenden Prompt an Copilot senden:

   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 Ihrem Projekt zu haben. Die README sollte eine Übersicht über das Projekt bereitstellen und Anweisungen zur Verwendung der Anwendung geben. Sie können Copilot bitten, das README 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 dem Repository nun den anfänglichen Code für die Anwendung hinzugefügt haben, sollten Sie eine benutzerdefinierte Anleitungsdatei für Copilot hinzufügen. Die benutzerdefinierte Anwendungsdatei verbessert die Antworten von Copilot in einem Repository, indem repositoryspezifische Anleitungen und Implementierungspräferenzen bereitgestellt werden. 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"**.
     

   •      **In JetBrains-IDEs:** Senden Sie im Agent-Modus von Copilot Chat einen Prompt wie den folgenden:
     

     Copilot prompt

     Analyze this codebase and create or update `.github/copilot-instructions.md` to guide AI coding 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 Weiterentwicklung an diesem Projekt 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.