Generación de explicaciones de

código mediante el chat de GitHub

Copilot
GitHub Copilot Chat usa asistencia conversacional de IA y comandos
inteligentes para ayudarle con las tareas relacionadas con la codificación. Un
ejemplo es la capacidad de explicar un código desconocido y complejo.

Puede usar GitHub Copilot Chat para generar explicaciones por varios motivos.
Por ejemplo:

• GitHub Copilot Chat puede explicarle toda un área de trabajo o

archivos de proyecto específicos cuando se une a un proyecto
existente.
• GitHub Copilot Chat puede explicar líneas de código específicas o
secciones cuando el código es complejo o difícil de entender.
• GitHub Copilot Chat puede explicarle los errores de su código y
sugerirle formas de solucionarlos.
• GitHub Copilot Chat puede explicarle cómo agregar características a
su proyecto y proporcionarle fragmentos de código que
demuestran cómo implementar el nuevo código.

Preparación de aplicaciones de ejemplo en el entorno de Visual

Studio Code

En este módulo se incluyen actividades de práctica que usan el chat de GitHub

Copilot y ejemplos de código preparados. Las actividades están diseñadas para
un entorno que incluye los siguientes recursos:

• Visual Studio Code.

• Extensión del kit de desarrollo de C# para Visual Studio Code.
• Las extensiones de GitHub Copilot y GitHub Copilot Chat para
Visual Studio Code. Se requiere una cuenta de GitHub con una
suscripción activa para GitHub Copilot.
• Proyectos de código de ejemplo creados con C#.
Nota

Si aún no ha instalado Visual Studio Code y las extensiones necesarias, complete

esas instalaciones antes de continuar.

Para prepararse para los ejercicios de este módulo, siga los pasos siguientes:
1. Para descargar un archivo ZIP que contenga las aplicaciones de
ejemplo, seleccione el vínculo siguiente: SampleApps.
2. Descomprima los archivos de descarga.

Descomprima los archivos en el entorno de desarrollo. Considere la

posibilidad de usar el equipo como entorno de desarrollo para que
tenga acceso al código después de completar este módulo. Si no
usa el equipo como entorno de desarrollo, puede descomprimir los
archivos en un espacio aislado o en un entorno hospedado.

a. En la máquina local, vaya a la carpeta de descargas.

b. Haga clic con el botón derecho en SampleApps.zip y
seleccione Extraer todo.
c. Seleccione Mostrar los archivos extraídos al
completar y, a continuación, Extraer.
d. Tome nota de la ubicación de la carpeta extraída.
3. Copie la carpeta SampleApps extraída en la carpeta Escritorio de
Windows.

La carpeta SampleApps contiene una colección de aplicaciones de

ejemplo, incluido el proyecto de código APL2007M2Sample1 que
utilizará en este ejercicio.

4. Abra la carpeta APL2007M2Sample1 en Visual Studio Code.

a. Abra Visual Studio Code en el equipo.
b. En Visual Studio Code, en el menú Archivo,
seleccione Abrir archivo.
c. Vaya a la carpeta Escritorio de Windows, abra la
carpeta SampleApps y busque la
carpeta APL2007M2Sample1.
d. Seleccione APL2007M2Sample1 y luego
seleccione Seleccionar carpeta.

La vista Visual Studio Code EXPLORER debería mostrar un proyecto

de código APL2007M2Sample1 que contenga los siguientes
archivos:

• App.xaml
• App.xaml.cs
• MainWindow.xaml
• MainWindow.xaml.cs
• Sample1.csproj
• APL2007M2Sample1.sln
Ahora está listo para usar GitHub Copilot Chat para finalizar este ejercicio.

Explicaciones del área de trabajo y del archivo de proyecto

El chat de GitHub Copilot puede ayudarte a comprender nuevos proyectos o

archivos de proyectos específicos. Puede usar una
combinación @workspace, /explain y #file en la vista de chat o en una ventana
de chat rápido para generar una explicación de su proyecto o de archivos de
proyecto específicos.

1. Abra la vista chat en Visual Studio Code.

2. Use el siguiente comando para pedir al chat de Copilot que
explique el proyecto de APL2007M2Sample1:

@workspace Explain this project

3. Tómese un minuto para revisar la respuesta en la vista de chat.

GitHub Copilot Chat genera una explicación del proyecto

APL2007M2Sample1 similar a la siguiente respuesta:

Importante

GitHub Copilot Chat usa un modelo de IA para generar respuestas.

Las respuestas que reciba son similares a las que se muestran en
este entrenamiento, pero no son idénticas.
4. En la parte inferior de la vista de chat, observa que el chat de
GitHub Copilot ha sugerido una pregunta de seguimiento.
 Como ya se ha dicho, la respuesta del modelo de IA no coincide
exactamente con los ejemplos mostrados. La respuesta puede
incluir una pregunta de seguimiento diferente. Si no ve ninguna
pregunta de seguimiento, puede pasar al siguiente paso.

No se recomienda seleccionar preguntas de seguimiento

"aleatorias", ya que GitHub Copilot Chat construye un historial de su
conversación. Este historial ayuda a GitHub Copilot Chat a entender
lo que le interesa. A medida que construye un historial de chat, el
modelo de IA aprende de sus interacciones y le proporciona
preguntas de seguimiento más pertinentes.

5. Abra el archivo MainWindow.xaml.cs en el editor.

6. Use el siguiente comando para pedir a Copilot que explique el
archivo MainWindow.xaml.cs:

@workspace /explain #file:MainWindow.xaml.cs

7. Tómese un minuto para revisar la respuesta en la vista de chat.

Observe que el chat GitHub Copilot genera una explicación
detallada del archivo MainWindow.xaml.cs. La explicación incluye
 información sobre la finalidad, la estructura y los componentes
clave del archivo.

Una vez más, el chat de GitHub Copilot sugiere una pregunta de

seguimiento. Aunque el chat de GitHub Copilot sugiere grandes
preguntas de seguimiento, le sugerimos que continúe con la
siguiente sección de este ejercicio.

Importante

El chat de GitHub Copilot mantiene un historial de su conversación

de chat. A medida que siga haciéndole preguntas, perfeccionará sus
respuestas. El contexto de sus preguntas, especialmente en lo que
respecta a su proyecto de código, influye en las respuestas
posteriores del chat de GitHub Copilot. Esto le ayuda a
proporcionar respuestas más precisas y pertinentes. También
significa que es probable que la respuesta que reciba para una
pregunta concreta varíe en función de su historial de
conversaciones.

Explicaciones de código seleccionadas

Incluso los desarrolladores experimentados se encuentran con código difícil de

entender. En lugar de perder tiempo intentando descifrar un código complejo,
puede pedir al chat de GitHub Copilot que le proporcione una explicación. La
vista de chat, el chat en línea y las acciones inteligentes pueden utilizarse para
generar explicaciones de las líneas o secciones de código seleccionadas.

En esta sección del ejercicio, usará la acción inteligente Explicar esta para
generar una explicación de las líneas de código seleccionadas.

1. Asegúrese de que tiene el archivo MainWindow.xaml.cs abierto en el

editor.
2. Desplácese hacia abajo para buscar el método SumPageSizesAsync().

private async Task SumPageSizesAsync()

{
var stopwatch = Stopwatch.StartNew();

IEnumerable<Task<int>> downloadTasksQuery =
from url in _urlList
select ProcessUrlAsync(url, _client);

Task<int>[] downloadTasks = downloadTasksQuery.ToArray();

int[] lengths = Task.WhenAll(downloadTasks);

int total = lengths.Sum();
 await Dispatcher.BeginInvoke(() =>
{
stopwatch.Stop();

_resultsTextBox.Text += $"\nTotal bytes returned:

{total:#,#}";
_resultsTextBox.Text += $"\nElapsed time:
{stopwatch.Elapsed}\n";
});
}

3. Seleccione las siguientes líneas de código y luego use la acción

inteligente Explicar esta para generar una explicación.

Para seleccionar la acción inteligente Explicar esto, haga clic con el

botón derecho del ratón en las líneas de código seleccionadas,
seleccione Copilot y, después, seleccione Explicar esto en el menú
contextual.

IEnumerable<Task<int>> downloadTasksQuery =
from url in _urlList
select ProcessUrlAsync(url, _client);

Task<int>[] downloadTasks = downloadTasksQuery.ToArray();

4. Tómese un minuto para revisar la respuesta en la vista de chat.

 5. Fíjese en el nivel de detalle incluido en la explicación.

GitHub Copilot Chat genera explicaciones detalladas que incluyen

información sobre las líneas de código seleccionadas, su finalidad y
su funcionamiento. Las respuestas incluyen fragmentos de código y
descripciones en lenguaje natural que le ayudarán a comprender el
código.

Explicaciones de errores

La administración de errores es un aspecto esencial del desarrollo de software.

Algunos errores son fáciles de detectar y corregir, mientras que otros pueden
ser más complicados. Cuando encuentre un error en su código que sea difícil de
entender, puede pedir al Chat de GitHub Copilot que le proporcione una
explicación. Por ejemplo, puede pedir al chat de GitHub Copilot que le explique
por qué una línea de código específica está causando un error.

Use los siguientes pasos para usar esta sección del ejercicio:

1. Asegúrese de que tiene MainWindow.xaml.cs abierto en el editor.

2. En el método SumPageSizesAsync(), busque la siguiente línea de
código:

int[] lengths = Task.WhenAll(downloadTasks);

3. Pase el mouse sobre downloadTasks para ver el mensaje de error.

Los mensajes de error no siempre le ayudan a solucionar el

problema. Puede pedir al Chat de Copilot que le proporcione una
explicación del error y le sugiera formas de solucionarlo.

4. Seleccione la línea de código y presione Ctrl + I para abrir un chat

insertado.
5. Para que el chat de Copilot le explique la causa del error, escriba el
siguiente mensaje:

/explain why is the selection causing an error

6. Tómese un minuto para revisar la respuesta en la vista de chat.

 Observe que la respuesta incluye información sobre el error y las
sugerencias para corregirlo. En este caso, el chat de GitHub Copilot
explica que la línea Task.WhenAll(downloadTasks) está causando un
error porque le falta la palabra clave await. La respuesta también
proporciona un fragmento de código que muestra cómo corregir el
error agregando la palabra clave await antes de la
línea Task.WhenAll(downloadTasks).

7. Puede usar las explicaciones proporcionadas por el chat de GitHub

Copilot para corregir los errores de su código.

Agregue la palabra clave await antes de la

línea Task.WhenAll(downloadTasks), como se muestra en el siguiente
fragmento de código:

int[] lengths = await Task.WhenAll(downloadTasks);

 Después de realizar este cambio, se debería resolver el error.

8. Guarde los cambios en el archivo MainWindow.xaml.cs.

Nuevas explicaciones de características o funcionalidades

GitHub Copilot Chat puede explicarle cómo agregar nuevas características o

funcionalidad a su proyecto.

Considere el proyecto APL2007M2Sample1. Su código descarga páginas web y

calcula el tamaño total de las páginas descargadas. Actualmente no hay
habilitado ningún control de excepciones para las URL de sitios web erróneos.
En esta sección del ejercicio, se usa GitHub Copilot Chat para explicar cómo
administrar las excepciones durante el proceso de descarga.

Use los siguientes pasos para usar esta sección del ejercicio:

1. Seleccione las líneas de código que incluyen los

métodos ProcessUrlAsync y SumPageSizesAsync.
2. En la vista de Chat, para que el chat de GitHub Copilot explique
cómo controlar las excepciones producidas durante el proceso de
descarga, escriba la siguiente pregunta:

@workspace /explain #MainWindow.xaml.cs How can I handle

exceptions thrown during the download process?

3. Tómese un minuto para revisar la respuesta en la vista de chat.

El chat Copilot genera una respuesta similar a la siguiente

explicación:
 La respuesta proporciona una explicación detallada de cómo
controlar las excepciones producidas durante el proceso de
descarga. También obtendrá un fragmento de código que
implementa el código sugerido para el control de excepciones.
Puede copiar el fragmento de código o insertarlo en su proyecto de
código en la ubicación del cursor. La respuesta también incluye otra
sugerencia del tipo "¿Cómo puedo?" En un entorno de trabajo,
podría usar GitHub Copilot Chat para investigar nuevas mejoras.

En lugar de copiar o insertar el fragmento de código de la vista de

chat, el siguiente paso investiga usando el chat insertado para
implementar el código de control de excepciones sugerido.

4. Para preguntar al chat insertado cómo implementar el control de

excepciones, seleccione el método ProcessUrlAsync, pulse Ctrl + I y
después introduzca la siguiente indicación:

How can I handle exceptions thrown during the download process?

5. Tómese un minuto para revisar la respuesta insertada.

6. Para aceptar el código de control de errores propuesto,

seleccione Aceptar.

Observe que el bloque propuesto try-catch está implementado.

 7. Guarde los cambios en el archivo MainWindow.xaml.cs.

La creación de documentación es una parte importante del desarrollo de

software. La documentación insertada ayuda a los desarrolladores a
comprender el código base, su propósito y cómo usarlo. La documentación del
proyecto proporciona a las partes interesadas información esencial para
comprender el ámbito y el propósito del proyecto.

La documentación del proyecto suele incluir las secciones siguientes:

• Información general del proyecto: un resumen general del

proyecto, su propósito y sus objetivos.
• Requisitos de proyecto: una lista de los requisitos del proyecto,
incluidos los requisitos funcionales y no funcionales.
• Restricciones del proyecto: Cualquier restricción que afecte al
proyecto, como el tiempo, el presupuesto o las restricciones
técnicas.
• Dependencias del proyecto: una lista de las dependencias del
proyecto, incluidas bibliotecas, marcos y otros componentes en los
que se basa el proyecto.
• Resumen del proyecto: un breve resumen del proyecto, su
propósito y sus objetivos.

En este ejercicio, usará GitHub Copilot Chat para generar la documentación del
proyecto APL2007M2Sample1.

Importante

Revise siempre la documentación generada por GitHub Copilot. Debe

comprobar la precisión y la integridad. La documentación generada por GitHub
Copilot es un punto de partida. Es posible que tenga que agregar, eliminar o
modificar el contenido para satisfacer las necesidades específicas de su
proyecto.

Generación de la documentación del proyecto para el proyecto

APL2007M2Sample1

La documentación del proyecto se puede generar en Visual Studio Code

mediante la vista Chat y el participante @workspace. Puede incluir descripciones
de lenguaje natural para generar secciones específicas de la documentación del
proyecto, como la información general del proyecto, los requisitos, las
restricciones, las dependencias y el resumen. También puede usar el Chat de
GitHub Copilot para generar tipos específicos de archivos de documentación,
como un archivo readme.md.
 1. Asegúrese de que tiene abierto el proyecto APL2007M2Sample1 en
Visual Studio Code.
2. En el menú del lado izquierdo, para abrir la vista Chat en
Visual Studio Code, seleccione Chat.
3. En la vista Chat, para generar documentación para el área de
trabajo, escriba el símbolo del sistema siguiente:

@workspace document this project

4. Dedique un minuto a revisar la documentación del proyecto

generada para el proyecto APL2007M2Sample1.

Documentar el código es un aspecto importante del proceso de desarrollo de

software. Los comentarios de código ayudan a los desarrolladores a
comprender el código base, su propósito y cómo usarlo.

El Chat de GitHub Copilot puede ayudarle a documentar el código mediante la

generación de comentarios de código insertados. Para generar la
documentación insertada, tiene las siguientes opciones:

• Construir un símbolo del lenguaje natural para generar la

documentación deseada.
• Introducir el comando /doc en el chat insertado para generar
comentarios que describan el código seleccionado.
• Usar la acción inteligente Generar documentos para generar
comentarios que describan el código seleccionado.

Documentar correctamente el código crea un código base más legible y fácil de

mantener que sea más fácil de entender y con el que puedan trabajar otros
desarrolladores.

Generación de documentación de código insertado mediante la

vista Chat

En este ejercicio, usará el Chat de GitHub Copilot para generar documentación

de código insertado para el proyecto APL2007M2Sample1.

Use los siguientes pasos para usar esta sección del ejercicio:

1. Asegúrese de tener abierto el proyecto APL2007M2Sample1 en

Visual Studio Code.
2. Abra el archivo MainWindow.xaml.cs .
3. Seleccione todo el código a partir de la declaración de espacio de
nombres hasta el final del archivo.
4. Abra la vista Chat.
5. Para ver cómo el Chat de GitHub Copilot documentaría el código
seleccionado, escriba la indicación siguiente:

generate inline code documentation for the selected code

Or

@workspace #selection generate inline code documentation for the

selected code

6. Dedique un minuto a revisar la documentación de código sugerida.

La respuesta generada debe tener un aspecto similar al ejemplo de

código siguiente:

namespace ParallelAsyncExample
{
public partial class MainWindow : Window
{
// HttpClient instance to make web requests
private readonly HttpClient _client = new HttpClient {
MaxResponseContentBufferSize = 1_000_000 };

// List of URLs to process

private readonly IEnumerable<string> _urlList = new
string[]
{
// ...
};

// Event handler for start button click

private void OnStartButtonClick(object sender,
RoutedEventArgs e)
{
_startButton.IsEnabled = false;
_resultsTextBox.Clear();

// Start the asynchronous operation

Task.Run(() => StartSumPageSizesAsync());
}

// Method to start the asynchronous operation and update

the UI when it's done
private async Task StartSumPageSizesAsync()
{
await SumPageSizesAsync();
await Dispatcher.BeginInvoke(() =>
{
_resultsTextBox.Text += $"\nControl returned to
{nameof(OnStartButtonClick)}.";
_startButton.IsEnabled = true;
});
}
 // Method to process all URLs and sum the sizes of the
returned pages
private async Task SumPageSizesAsync()
{
var stopwatch = Stopwatch.StartNew();

// Create a task for each URL

IEnumerable<Task<int>> downloadTasksQuery =
from url in _urlList
select ProcessUrlAsync(url, _client);

Task<int>[] downloadTasks =
downloadTasksQuery.ToArray();

// Wait for all tasks to complete and sum the results

int[] lengths = await Task.WhenAll(downloadTasks);
int total = lengths.Sum();

await Dispatcher.BeginInvoke(() =>

{
stopwatch.Stop();

_resultsTextBox.Text += $"\nTotal bytes returned:

{total:#,#}";
_resultsTextBox.Text += $"\nElapsed time:
{stopwatch.Elapsed}\n";
});
}

// Method to process a single URL

private async Task<int> ProcessUrlAsync(string url,
HttpClient client)
{
try
{
// Download the page and get its size
byte[] byteArray = await
client.GetByteArrayAsync(url);
await DisplayResultsAsync(url, byteArray);
return byteArray.Length;
}
catch (Exception ex)
{
// Handle any exceptions
await Dispatcher.BeginInvoke(() =>
{
_resultsTextBox.Text += $"\nError downloading
{url}: {ex.Message}\n";
});
return 0; // Return 0 to indicate failure
}
}

// Method to display the results for a single URL

private Task DisplayResultsAsync(string url, byte[]
content) =>
Dispatcher.BeginInvoke(() =>
_resultsTextBox.Text += $"{url,-60}
{content.Length,10:#,#}\n")
 .Task;

// Dispose the HttpClient when the window is closed

protected override void OnClosed(EventArgs e) =>
_client.Dispose();
}
}

La respuesta incluye comentarios de código sugeridos y una

parte del código asociado. Puede mover manualmente los
comentarios de código al archivo de código real.

El chat insertado proporciona una manera más directa de agregar

comentarios al código.

Generación de documentación de código insertado mediante chat

insertado

1. Desplácese a la parte superior del archivo MainWindow.xaml.cs.

2. Seleccione el método OnStartButtonClick.
3. Para abrir un chat insertado, presione Ctrl + I.
4. Para generar documentación insertada para el
método OnStartButtonClick, escriba la siguiente indicación:

OutputCopiar
/doc

5. Dedique un minuto a revisar la documentación de código generada.

 Observe que la documentación sugerida para el
método OnStartButtonClick incluye un resumen y descripciones de
los dos parámetros. Cuando un método incluye un valor devuelto,
también se incluirá una descripción de dicho valor.

Importante

Revise siempre las actualizaciones sugeridas en el código antes de

aceptarlas. En la captura de pantalla que muestra la documentación
de código generada, se ha convertido en comentario la declaración
del método. Si detecta un problema en una actualización de código
sugerida, puede descartar la actualización o intentar corregir el
problema antes de aceptarla.

6. Si los comentarios de la actualización sugerida salen de la

declaración del método, utilice la tecla de retroceso para quitar los
caracteres de comentario.

Cuando esté satisfecho con la sugerencia, puede agregar los

comentarios generados al código.

7. Para insertar la documentación generada en el código,

seleccione Aceptar.

Siempre puede seleccionar Descartar si quiere rechazar la

actualización sugerida.
Generación de documentación de código insertado mediante la
acción inteligente Generar documentos

La acción inteligente Generar documentos es otra manera de generar

documentación de código insertada. Puede usar esta acción inteligente para
generar comentarios que describan el código seleccionado.

Use los siguientes pasos para usar esta sección del ejercicio:

1. En el editor de Visual Studio Code, seleccione el

método StartSumPageSizesAsync.
2. Haga clic con el botón derecho en el bloque de código
seleccionado, elija Copilot y, a continuación, seleccione Generar
documentos.
3. Dedique un minuto a revisar los comentarios de código sugeridos.

Si es necesario, edite la actualización sugerida.

Observe que la acción inteligente Generar documentos y el chat

en línea producen resultados similares.

4. Una vez completada la revisión, seleccione Descartar.

En lugar de agregar comentarios insertados a cada método

individualmente, puede generar comentarios para toda la clase a la
vez.

5. Seleccione todos los métodos que hay dentro de la clase MainWindow.

6. Haga clic con el botón derecho en la selección, elija Copilot y, a
continuación, seleccione Generar documentos.

Espere a que se genere la documentación.

7. Revise los cambios sugeridos.

Observe que la documentación generada incluye comentarios para

cada uno de los métodos.

Importante

Si encuentra problemas en la documentación generada, modifique

los cambios sugeridos antes de continuar.

8. Seleccione Aceptar.

Cada uno de los métodos de la clase MainWindow ahora incluye

comentarios generados.
Observe que la documentación del proyecto sugerido es similar a la
explicación del proyecto generada en la unidad anterior.

Al anexar avisos como "documentar las restricciones del proyecto"

o "documentar las dependencias del proyecto", puede obtener
información detallada sobre el proyecto.
5. En la vista Chat, para generar documentación que describa las
dependencias del proyecto, escriba el símbolo del sistema
siguiente:

@workspace document the project dependencies

6. Dedique un minuto a revisar la documentación de dependencias del

proyecto.
El Chat de GitHub Copilot puede ayudar a documentar muchos
otros aspectos de los proyectos. Puede usar la vista Chat para
generar documentación para archivos, clases o funciones
específicos dentro del proyecto. El tamaño y la complejidad del
proyecto ayudan a determinar el nivel de detalle necesario.
 Si el tiempo lo permite, use la vista Chat para generar
documentación para las siguientes secciones del proyecto:

• Requisitos de proyecto
• Restricciones del proyecto
• Arquitectura de proyecto
• Diseño del proyecto
• Pruebas del proyecto
• Implementación del proyecto
• Resumen del proyecto

Puede adaptar la documentación del proyecto generada por el Chat

de Copilot a las necesidades específicas del proyecto y sus partes
interesadas.

7. En la vista Chat, para generar un archivo LÉAME para el

proyecto APL2007M2Sample1, escriba el símbolo del sistema siguiente:

@workspace generate a readme document that can be used as a repo

description

8. Dedique un minuto a revisar el archivo LÉAME generado para

el APL2007M2Sample1 proyecto.
El contenido del archivo LÉAME generado por el Chat de Copilot
proporciona información general de alto nivel del proyecto con
varias secciones que a menudo se incluyen en este tipo de archivo.

Puede ajustar el mensaje para especificar las secciones del archivo

LÉAME preferidas por su organización. También puede escribir
mensajes individuales para generar secciones específicas de un
documento LÉAME.