Schreiben und Speichern des Codes

Nun erstellen Sie die von Ihnen geplante Website-Funktion: eine Seite, die mit Stern markierte Repositorys auflistet. Dabei folgen Sie dem zentralen Entwickler-Workflow, indem Sie einen Bereich für Ihre Arbeit einrichten, Ihre Änderungen vornehmen und speichern und sie zur Überprüfung vorschlagen – mithilfe von Branches, Commits und einem Pull Request.

Voraussetzungen

Ein lokaler Klon Ihres stargazers-log Repositorys. Wenn Sie dies noch nicht eingerichtet haben, lesen Sie Connecting to your code locally.

Einen Zweig erstellen

Ein Branch ermöglicht es Ihnen, in einem separaten Bereich an Ihrer Funktion zu arbeiten, ohne die mainKopie Ihres Codes zu ändern, bis Sie dazu bereit sind.

Öffnen Sie GitHub Desktop.
Klicken Sie oben in der App auf Aktueller Branch und dann auf Neuer Branch.
Benennen Sie die Verzweigung add-starred-list, und klicken Sie dann auf "Verzweigung erstellen".
Klicken Sie auf Branch veröffentlichen, um den Branch auf GitHub verfügbar zu machen.

Erstellen des Websitecodes

Ihr Feature benötigt einige Dateien: Beispieldaten, ein Stylesheet, ein Skript zum Anzeigen der Daten und eine aktualisierte Startseite.

Sie können diese Dateien selbst schreiben oder einen KI-Assistenten bitten Copilot, sie zu generieren. Jedes GitHub Konto beinhaltet den Zugriff auf GitHub Copilot Kostenlos sowie ein Kontingent an KI-Guthaben, sodass Sie Copilot sofort nutzen können.

Informationen zu den Copilot verfügbaren Plänen und zur Funktionsweise der Nutzung finden Sie in der Dokumentation.

Öffnen Sie Copilot-Chat in Ihrem Editor und fordern Sie ihn auf, die Dateien mit einem Prompt wie dem folgenden zu erstellen.

Text

Create a starred repositories page for my software project. Add:
- events.json with sample data for a few starred repositories
- style.css to style a simple list
- script.js to fetch events.json and render the list
- an update to index.html that links style.css and script.js

Use the code written in https://docs.github.com/get-started/start-your-journey/creating-and-changing-your-code.

Create a starred repositories page for my software project. Add:
- events.json with sample data for a few starred repositories
- style.css to style a simple list
- script.js to fetch events.json and render the list
- an update to index.html that links style.css and script.js

Use the code written in https://docs.github.com/get-started/start-your-journey/creating-and-changing-your-code.

ÖffnenCopilot-ChatinVS Code

Überprüfen Sie, was Copilot generiert wird, und passen Sie dann die Dateien an die folgenden Beispiele an.

Wenn Sie Copilot nicht verwendet haben, verwenden Sie Ihren Code-Editor, um die folgenden Dateien im add-starred-list Branch zu erstellen.

Erstellen Sie eine Datei events.json mit den folgenden Beispieldaten. Speichern Sie die Datei.

JSON

[
  { "name": "octocat/Hello-World", "starred": "2024-01-15" },
  { "name": "github/docs", "starred": "2024-02-02" },
  { "name": "octo-org/octo-repo", "starred": "2024-03-21" }
]

[
  { "name": "octocat/Hello-World", "starred": "2024-01-15" },
  { "name": "github/docs", "starred": "2024-02-02" },
  { "name": "octo-org/octo-repo", "starred": "2024-03-21" }
]

Erstellen Sie eine Datei style.css mit den folgenden Formatvorlagen. Speichern Sie die Datei.

SCSS

body {
  font-family: sans-serif;
  margin: 2rem;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #ddd;
}

body {
  font-family: sans-serif;
  margin: 2rem;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #ddd;
}

Erstellen Sie eine Datei script.js mit dem folgenden Code. Speichern Sie die Datei.

JavaScript

fetch("events.json")
  .then((response) => response.json())
  .then((events) => {
    const list = document.querySelector("#starred");
    events.forEach((event) => {
      const item = document.createElement("li");
      item.textContent = `${event.name} — starred ${event.starred}`;
      list.appendChild(item);
    });
  });

fetch("events.json")
  .then((response) => response.json())
  .then((events) => {
    const list = document.querySelector("#starred");
    events.forEach((event) => {
      const item = document.createElement("li");
      item.textContent = `${event.name} — starred ${event.starred}`;
      list.appendChild(item);
    });
  });

Aktualisieren Sie index.html , um die neuen Dateien zu verknüpfen und die Liste zu speichern. Speichern Sie die Datei.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Stargazers log</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Stargazers log</h1>
    <p>A log of the repositories I've starred.</p>
    <ul id="starred"></ul>
    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Stargazers log</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Stargazers log</h1>
    <p>A log of the repositories I've starred.</p>
    <ul id="starred"></ul>
    <script src="script.js"></script>
  </body>
</html>

Committen und Pushen Ihrer Änderungen

Ein Commit speichert eine Momentaufnahme Ihrer Änderungen, und ein Push sendet sie an GitHub, wo sie in Ihrem Repository gespeichert werden.

In GitHub Desktop überprüfen Sie Ihre geänderten Dateien in der linken Seitenleiste.
Geben Sie unten in der Seitenleiste im Feld Zusammenfassung eine Commit-Nachricht wie etwa Add starred repositories list ein.
Klicken Sie auf "Commit 4 Dateien ausführen", um eine Add-Stern-Liste hinzuzufügen.
Klicken Sie auf Push origin, um Ihren Commit an GitHub zu senden.

Öffnen einer Pullanforderung

Ein Pull Request schlägt die Änderungen Ihres Branches zur Überprüfung vor, bevor sie in main zusammengeführt werden.

Klicken Sie in GitHub Desktop auf Pull Request in der Vorschau anzeigen und dann auf Pull Request erstellen. Ihr Browser öffnet das Pull-Request-Formular auf GitHub.
Überprüfen Sie den Titel und die Beschreibung, und fügen Sie dann eine Notiz zu ihrer Funktion hinzu.
Klicke auf Pull Request erstellen.

Was Sie erreicht haben

Aufgabe	Ergebnis
Erstellt eine Verzweigung	Sie haben mit `add-starred-list` einen isolierten Bereich für Ihre Funktion erstellt.
Schrieb den Code	Sie haben die Dateien des Features mit optionaler Unterstützung von Copilot-Chat zu Ihrem Branch hinzugefügt.
Ihre Änderungen übertragen	Sie haben die Änderungen Ihres Branches auf GitHub gespeichert.
Öffnen einer Pullanforderung	Sie haben Ihre Änderungen zur Überprüfung vorgeschlagen.

Weiterführende Lektüre

Nächste Schritte

Überprüfen Sie vor dem Zusammenführen Ihre eigenen Änderungen, um Probleme frühzeitig abzufangen. Fahren Sie mit Überprüfen der vorgeschlagenen Änderungen fort.