Écriture et stockage de votre code

Vous allez maintenant créer la fonctionnalité du site web que vous avez prévue : une page qui répertorie les dépôts mis en favori. Au fil du processus, vous suivrez le processus de travail de base du développeur — en configurant un espace de travail, en apportant et en enregistrant vos modifications, puis en les proposant à la révision — à l’aide de branches, de commits et d’une pull request.

Logiciels requis

Clone local de votre stargazers-log référentiel. Si vous ne l’avez pas encore configuré, consultez Connecting to your code locally.

Création d’une branche

Une branche vous permet de travailler sur votre fonctionnalité dans son propre espace, sans modifier la main copie de votre code jusqu’à ce que vous soyez prêt.

Ouvrez GitHub Desktop.
En haut de l’application, cliquez sur Current Branch, puis sur Nouvelle branche.
Nommez la branche add-starred-list, puis cliquez sur Créer une branche.
Cliquez sur Publier la branche pour rendre la branche disponible sur GitHub.

Création du code du site web

Votre fonctionnalité a besoin de quelques fichiers : exemples de données, feuille de style, script pour afficher les données et page d’accueil mise à jour.

Vous pouvez écrire ces fichiers vous-même ou demander Copilot, un assistant IA, de les générer. Chaque compte GitHub inclut l’accès à GitHub Copilot gratuit ainsi qu’une allocation de crédits d’IA, afin que vous puissiez commencer à utiliser Copilot immédiatement.

Pour en savoir plus sur les plans disponibles et sur le Copilot fonctionnement de l’utilisation, consultez Plans de GitHub Copilot dans la GitHub Enterprise Cloud documentation.

Ouvrez Discussion avec Copilot dans votre éditeur et demandez-lui de créer les fichiers avec une invite comme la suivante.

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.

OuvrirDiscussion avec CopilotdansVS Code

Passez en revue les Copilot éléments générés, puis ajustez les fichiers pour qu’ils correspondent aux exemples ci-dessous.

Si vous n’avez pas utilisé Copilot, utilisez votre éditeur de code pour créer les fichiers ci-dessous dans la add-starred-list branche.

Créez un fichier nommé events.json avec les exemples de données suivants. Enregistrez le fichier.

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" }
]

Créez un fichier nommé style.css avec les styles suivants. Enregistrez le fichier.

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;
}

Créez un fichier nommé script.js avec le code suivant. Enregistrez le fichier.

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);
    });
  });

Mettez à jour index.html pour lier les nouveaux fichiers et conserver la liste. Enregistrez le fichier.

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>

Validation (commit) et envoi (push) de vos modifications

La validation enregistre un instantané de vos modifications, et le push les envoie vers GitHub, où elles seront stockées dans votre dépôt.

Dans GitHub Desktop, passez en revue vos fichiers modifiés dans la barre latérale gauche.
En bas de la barre latérale, dans le champ Résumé , tapez un message de validation tel que Add starred repositories list.
Cliquez sur Valider 4 fichiers dans add-starred-list.
Cliquez sur Push origin pour envoyer votre commit vers GitHub.

Ouverture d'une demande de fusion

Une pull request propose les modifications de votre branche pour examen avant leur fusion dans main.

Dans GitHub Desktop, cliquez sur Aperçu de la demande de tirage, puis sur Créer une demande de tirage. Votre navigateur ouvre le formulaire de pull request sur GitHub.
Passez en revue le titre et la description, puis ajoutez une note sur ce que fait votre fonctionnalité.
Cliquez sur Créer une pull request.

Ce que vous avez accompli

Tâche	Résultat
Création d’une branche	Vous avez créé un espace isolé pour votre fonctionnalité avec `add-starred-list`.
Écrit le code	Vous avez ajouté les fichiers de la fonctionnalité à votre branche, avec l’aide facultative de Discussion avec Copilot.
Vous avez poussé vos modifications	Vous avez enregistré les modifications de votre branche sur GitHub.
Ouverture d’une pull request	Vous avez proposé vos modifications pour révision.

Lectures complémentaires

À propos des plans et avantages individuels GitHub Copilot
Facturation basée sur l’utilisation pour les individus
Suivi de votre utilisation de GitHub AI Credits dans la GitHub Enterprise Cloud documentation

Étapes suivantes

Avant de fusionner, passez en revue vos propres modifications pour détecter les problèmes au début. Passez à Examen de vos modifications proposées.

Get started

Dans cet article