Escritura y almacenamiento del código

Ahora crearás la funcionalidad del sitio web que planificaste: una página que muestra los repositorios marcados con estrella. A lo largo del proceso, seguirá el flujo de trabajo principal del desarrollador, configurando un espacio para el trabajo, realizando y guardando los cambios y proponiendolos para su revisión, mediante ramas, confirmaciones y una solicitud de incorporación de cambios.

Prerequisites

Un clon local de tu stargazers-log repositorio. Si aún no lo ha configurado, consulte Connecting to your code locally.

Cómo crear una rama

Una rama te permite trabajar en tu funcionalidad en tu propio espacio, sin cambiar la copia main de tu código hasta que esté todo listo.

Abra GitHub Desktop.
En la parte superior de la aplicación, haga clic en Rama actual y, a continuación, haga clic en Nueva rama.
Asigne un nombre a la rama y, a continuación, haga clic en add-starred-list****.
Haga clic en Publicar rama para que la rama esté disponible en GitHub.

Creación del código del sitio web

La característica necesita algunos archivos: datos de ejemplo, una hoja de estilos, un script para mostrar los datos y una página principal actualizada.

Puede escribir estos archivos usted mismo o pedir Copilot, un asistente de IA, para generarlos. Cada GitHub cuenta incluye acceso a GitHub Copilot gratis y una asignación de créditos de IA, por lo que puede empezar a usar Copilot inmediatamente.

Para obtener información sobre los Copilot planes disponibles y cómo funciona el uso, consulte Planes para GitHub Copilot en la GitHub Enterprise Cloud documentación.

Abra Chat de Copiloto en el editor y pídale que cree los archivos con un mensaje similar al siguiente.

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.

AbrirChat de CopilotoenVS Code

Revise lo que Copilot genera y ajuste los archivos para que coincidan con los ejemplos siguientes.

Si no ha usado Copilot, use el editor de código para crear los archivos siguientes en la add-starred-list rama .

Cree un archivo denominado events.json con los siguientes datos de ejemplo. Guarde el archivo.

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

Cree un archivo denominado style.css con los estilos siguientes. Guarde el archivo.

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

Cree un archivo denominado script.js con el código siguiente. Guarde el archivo.

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

Actualice index.html para vincular los nuevos archivos y albergar la lista. Guarde el archivo.

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>

Confirmar y subir tus cambios

Confirmar guarda una instantánea de tus cambios, y enviarlos a GitHub hace que se almacenen en tu repositorio.

En GitHub Desktop, revise los archivos modificados en la barra lateral izquierda.
En la parte inferior de la barra lateral, en el campo Resumen , escriba un mensaje de confirmación como Add starred repositories list.
Haga clic en Confirmar 4 archivos para agregar la lista con estrella.
Haga clic en Insertar origen para enviar la confirmación a GitHub.

Apertura de una solicitud de incorporación de cambios

Una pull request propone los cambios de tu rama para su revisión antes de fusionarse en main.

En GitHub Desktop, haga clic en Obtener una vista previa de la solicitud de incorporación de cambios y, a continuación, haga clic en Crear solicitud de incorporación de cambios. El explorador se abre en el formulario de solicitud de incorporación de cambios en GitHub.
Revise el título y la descripción y agregue una nota sobre lo que hace la característica.
Haga clic en Crear solicitud de incorporación de cambios.

Lo que ha logrado

tarea	Resultado
Creación de una rama	Has creado un espacio aislado para tu función con `add-starred-list`.
Escribió el código	Has agregado los archivos de la funcionalidad a su rama, con ayuda opcional de Chat de Copiloto.
Enviaste tus cambios	Ha guardado los cambios de su rama en GitHub.
Abrir una solicitud de incorporación de cambios	Ha propuesto los cambios para su revisión.

Lectura adicional

Información sobre los planes y ventajas de GitHub Copilot para individuos
Facturación basada en el uso para individuos
Supervisión del uso de GitHub AI Credits en la GitHub Enterprise Cloud documentación

Pasos siguientes

Antes de fusionar, revisa tus propios cambios para detectar problemas cuanto antes. Continúe con Revisión de los cambios propuestos.

Get started

En este artículo