# Escritura y almacenamiento del código

Siga el flujo de trabajo principal para desarrolladores para crear una rama, escribir código y abrir una solicitud de incorporación de cambios mediante Copilot y GitHub Desktop.

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](/es/get-started/start-your-journey/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.

1. Abra GitHub Desktop.
2. En la parte superior de la aplicación, haga clic en **Rama actual** y, a continuación, haga clic en **Nueva rama**.
3. Asigne un nombre a la rama y, a continuación, haga clic en `add-starred-list`\*\*\*\*.
4. 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](/es/copilot/get-started/plans).

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

<!-- markdownlint-disable search-replace -->

```text copy
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.
```

<!-- markdownlint-enable search-replace -->

<a href="vscode://GitHub.Copilot-Chat?ref_product=copilot&ref_type=engagement&ref_style=button" target="_blank" class="btn btn-primary mt-3 mr-3 no-underline" aria-label="Open Copilot Chat in Visual Studio Code">
<span>AbrirChat de CopilotoenVS Code</span><svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-link-external" aria-label="link external icon" role="img"><path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path></svg>
</a><br><br>

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 .

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

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

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

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

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

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

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

   ```javascript copy
   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);
       });
     });
   ```

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

   ```html copy
   <!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.

1. En GitHub Desktop, revise los archivos modificados en la barra lateral izquierda.
2. En la parte inferior de la barra lateral, en el campo **Resumen** , escriba un mensaje de confirmación como `Add starred repositories list`.
3. Haga clic en **Confirmar 4 archivos para agregar la lista con estrella**.
4. 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`.

1. 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.
2. Revise el título y la descripción y agregue una nota sobre lo que hace la característica.
3. 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](/es/copilot/concepts/billing/individual-plans)
* [Facturación basada en el uso para individuos](/es/copilot/concepts/billing/usage-based-billing-for-individuals)
* [Supervisión del uso de GitHub AI Credits](/es/copilot/how-tos/manage-and-track-spending/monitor-ai-usage)

## Pasos siguientes

* Antes de fusionar, revisa tus propios cambios para detectar problemas cuanto antes. Continúe con [Revisión de los cambios propuestos](/es/get-started/start-your-journey/reviewing-your-proposed-changes).