Nota
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
Este guía está dirigida a desarrolladores de aplicaciones de escritorio que quieran hacer más sencillo el flujo de trabajo de desarrollo de aplicaciones de WinUI 3 o SDK de Aplicaciones para Windows con el chat de Github Copilot en Visual Studio.
Empezaremos con el chat de GitHub Copilot para crear una aplicación "Hola, mundo" con una sola instrucción y luego mostraremos cómo se puede usar el chat de GitHub Copilot para agregar una interfaz de chat que muestre las respuestas por medio de un componente prediseñado de servidor.
Requisitos previos
- Visual Studio 2022 versión 17.8 o posterior
- Una suscripción activa a GitHub Copilot para particulares o GitHub Copilot para empresas asociada a la cuenta de GitHub con la que se inicie sesión en Visual Studio.
- Chat GitHub Copilot en Visual Studio.
- Si usa Visual Studio, 17.10, versión preliminar 3 o una versión posterior, el chat GitHub Copilot vendrá incluido en la extensión integrada y unificada de GitHub Copilot, disponible como componente recomendado en el instalador de Visual Studio. Se instala de forma predeterminada con todas las cargas de trabajo, a menos que decidas excluirla durante la instalación.
- Estar familiarizado con C# y WinUI 3/SDK de aplicaciones para Windows.
Técnicas de uso de instrucciones
El objetivo de esta guía es dotarle del vocabulario y las técnicas de uso de instrucciones que produzcan los resultados que busca de la forma más fácil posible. Hay dos técnicas principales: hacer instrucciones a través de la ventana del chat y a través del chat intercalado.
Formular instrucciones a través de la ventana del chat de Copilot
En Visual Studio, seleccione Ver > Chat GitHub Copilot.
Se abrirá el panel del chat de GitHub Copilot al lado izquierdo de la ventana de Visual Studio. Puede usar esta ventana de chat para pedir ayuda a Copilot con el código. Esta técnica es útil cuando se trabaja en varios archivos y no le importa indicar explícitamente los archivos que necesita cambiar y es la técnica en la que nos centraremos en esta guía.
Crear instrucciones a través del chat intercalado de Copilot
En la ventana del editor de cualquier archivo, haga clic con el botón derecho y seleccione Preguntar a Copilot para abrir la vista del chat intercalado de Copilot en el propio editor.
Esto hará que se abra una ventana de chat intercalada donde puede indicarle a Copilot que le ayude con el archivo en el que está trabajando en ese momento. Úselo cuando trabaje en el contexto de un único archivo.
Crear un proyecto de WinUI 3
Escriba lo siguiente en la ventana de chat de Copilot:
Get me started with a blank WinUI 3 / WinAppSDK project
Le deberían aparecer unas instrucciones:
Debe tener en cuenta algo importante: en el momento de redactar este documento, la extensión del chat no puede crear un nuevo proyecto o estructura de archivos, pero sí podrá darle unas instrucciones paso a paso. Siga las instrucciones para crear un proyecto.
Mostrar el mensaje "¡Hola, mundo!"
Una vez creado el nuevo proyecto, escriba lo siguiente en la ventana del chat de Copilot:
Update my app to display a "Hello, world!" message
Es probable que la respuesta de Copilot indique que no conoce el contexto del desarrollo:
Sin concretar explícitamente el contexto, la ventana del chat de Copilot es una interfaz cómoda y eficiente que le permite preguntar al modelo de lenguaje grande (LLM) subyacente sin incluir ningún contexto adicional de forma predeterminada.
Para resolver esto, puede usar comandos de barra diagonal y referencias de funciones hash para expresar explícitamente a Copilot el contexto correspondiente. Consulte Obtener mejores respuestas creando un contexto en el chat de GitHub Copilot en Visual Studio para ver más detalles.
Escriba lo siguiente en la ventana de chat:
Update #MainWindow.xaml and #MainWindow.xaml.cs to display "Hello, world!" when the app starts. Directly modify the existing files. Do not explain yourself. Do not generate new files.
Debería ver que Copilot genera el código necesario dentro de los bloques de código etiquetados como MainWindow.xaml
y MainWindow.xaml.cs
. En estos bloques de código deberían aparecer dos opciones: Insert in new file
y Preview
. Haga clic Preview
mientras el cursor está activo en el archivo de destino para almacenar provisionalmente y aceptar los cambios:
Este es un punto importante que debe considerar: Tiene que conocer los archivos que necesita cambiar con el fin de indicar a Copilot que los modifique. Usaremos este patrón en el resto del flujo de trabajo de desarrollo.
Esto sugiere que le puede resultar útil crear una estructura de proyecto sencilla y bien organizada puede trabajar de forma más eficaz con Copilot.
Si no sabe bien qué archivos hay que cambiar, puede preguntar al chat de Copilot mediante la referencia de función hash #Solution
:
What files should I change in my #Solution in order to achieve <desired outcome>?
Eliminar el botón
Escriba lo siguiente en la ventana de chat:
Update #MainWindow.xaml and #MainWindow.xaml.cs to display ONLY "Hello, world!" when the app starts, removing extraneous buttons and their codebehind functionality as-needed. Directly modify the existing files. Do not explain yourself. Do not generate new files.
Acepte los cambios sugeridos. Debería ver el botón quitado de la interfaz de usuario y el código correspondiente eliminado del archivo codebehind. Ejecute la aplicación para comprobar que solo se ve el mensaje "¡Hola, mundo!":
Crear la interfaz del chat
A continuación, crearemos una interfaz de chat sencilla que le permita escribir texto y generar respuestas simuladas. Escriba lo siguiente en la ventana de chat:
Update #MainWindow.xaml and #MainWindow.xaml.cs to build a chat interface with the following layout and functionality, step by step:
1. A **horizontally centered input** at the bottom of the window
2. A **vertically scrolling list of messages and responses** directly above the input
3. A **ProgressBar** to indicate when the app is waiting for a response, directly above the input, below the list of messages and responses
4. The latest message should be visible at the bottom of the list, with older messages above it, eventually becoming hidden as the list grows
5. When I click the Send button, display the input text in a TextBlock, and update the ProgressBar to indicate that the app is waiting for a response. Mock the code that generates a response with a delay of 2 seconds, and then display a response that echoes the input text above the input.
6. Ensure that **TextBlock** text wraps to the next line when it reaches the edge of the window.
Remove extraneous code as-needed. Directly modify the existing files. Do not explain yourself. Do not generate new files. Ensure that every single numbered requirement is accounted for in the end result. Ensure that both the markup and codebehind files are updated to produce a fully functional chat interface that builds and meets the above-stated requirements. Take your time. Reveal only two code blocks representing the end result, one for each file.
Este es un ejemplo de one-shot prompt (instrucción de un ejemplo), donde se incluyen todos los datos en una única instrucción. Esto puede ser útil si tiene una idea clara de lo que desea crear y el código que desea ver que Copilot genere para cumplir esos criterios o condiciones, pero también aumenta la probabilidad de que Copilot genere código que no los cumpla.
Esto plantea un punto importante: si proporciona a Copilot los requisitos concretos, esto puede generar el código necesario para cumplir esos requisitos. Esto puede ser una manera eficaz de aprovechar Copilot en el flujo de trabajo de desarrollo, pero para ello es necesario que formule la instrucción usando el vocabulario técnico que defina con precisión los requisitos de la función que va a crear.
En el momento en que se redactó este documento, la entrada anterior generó el siguiente resultado:
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using System;
using System.Collections.ObjectModel;
using System.Threading.Tasks;
namespace ImageGenerator
{
public sealed partial class MainWindow : Window
{
public ObservableCollection<string> Messages { get; } = new ObservableCollection<string>();
public MainWindow()
{
this.InitializeComponent();
MessageTextBox.KeyDown += (sender, e) =>
{
if (e.Key == Windows.System.VirtualKey.Enter && !string.IsNullOrWhiteSpace(MessageTextBox.Text))
{
SendButton_Click(sender, e);
}
};
}
private async void SendButton_Click(object sender, RoutedEventArgs e)
{
Messages.Add(MessageTextBox.Text);
ProgressBar.Visibility = Visibility.Visible;
MessageTextBox.Text = string.Empty;
await Task.Delay(2000);
Messages.Add($"Echo: {Messages[^1]}");
ProgressBar.Visibility = Visibility.Collapsed;
ScrollToBottom(); // Scroll to the end after adding a message
}
private void ScrollToBottom()
{
var scrollViewer = MessagesScrollViewer;
if (scrollViewer != null)
{
scrollViewer.ChangeView(0.0f, scrollViewer.ExtentHeight, 1.0f); // Scroll to the bottom
}
}
}
}
<Window
x:Class="ImageGenerator.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!-- Message viewer area -->
<ScrollViewer Grid.Row="0" VerticalScrollBarVisibility="Auto" x:Name="MessagesScrollViewer">
<StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Center">
<ItemsControl ItemsSource="{x:Bind Messages, Mode=OneWay}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" TextWrapping="Wrap" HorizontalAlignment="Center" Margin="0,2" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
<!-- Input area -->
<StackPanel Grid.Row="1" VerticalAlignment="Bottom" HorizontalAlignment="Stretch">
<ProgressBar x:Name="ProgressBar" Height="5" HorizontalAlignment="Stretch" Visibility="Collapsed" Margin="0,5,0,0" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBox x:Name="MessageTextBox" MinWidth="200" Margin="5" AcceptsReturn="False" />
<Button x:Name="SendButton" Content="Send" Click="SendButton_Click" />
</StackPanel>
</StackPanel>
</Grid>
</Window>
Y produjo la siguiente interfaz de usuario:
Corrección e iteración en el código generado
Si el resultado que recibe de Copilot no cumple los requisitos indicados, tiene la opción de repetir las instrucciones originales con instrucciones más precisas e indicar a Copilot que "siga actualizando" el código para que se cumplan los requisitos que no se han tenido en cuenta:
Continue updating #MainWindow.xaml and #MainWindow.xaml.cs to build a chat interface with the following layout and functionality, step by step:
1. A **horizontally centered input** at the bottom of the window // done
2. A **vertically scrolling list of messages and responses** directly above the input // partially done - the list is displayed, but it doesn't scroll
3. A **ProgressBar** to indicate when the app is waiting for a response, directly above the input, below the list of messages and responses // done
4. The latest message should be visible at the bottom of the list, with older messages above it, eventually becoming hidden as the list grows
5. When I click the Send button, display the input text in a TextBlock, and update the ProgressBar to indicate that the app is waiting for a response. Mock the code that generates a response with a delay of 2 seconds, and then display a response that echoes the input text above the input.
6. Ensure that **TextBlock** text wraps to the next line when it reaches the edge of the window.
Remove extraneous code as-needed. Directly modify the existing files. Do not explain yourself. Do not generate new files. Ensure that every single numbered requirement is accounted for in the end result. Ensure that both the markup and codebehind files are updated to produce a fully functional chat interface that builds and meets the above-stated requirements. Take your time. Reveal only two code blocks representing the end result, one for each file.
También puede usar el multi-shot prompting (instrucción con varios ejemplos) para compartimentar el problema en requisitos más pequeños y luego trabajar de uno en uno y así, gradualmente, llegar al resultado deseado. Esta técnica puede ser útil cuando no sabe con seguridad cómo articular los requisitos con un alto grado de precisión técnica, o cuando Copilot tiene dificultades para generar el código que está buscando.
Resumen
En esta guía, hemos hecho lo siguiente:
- Mostramos cómo simplificar el flujo de trabajo de desarrollo de WinUI 3/SDK de Aplicaciones para Windows con el chat de GitHub Copilot en Visual Studio
- Se le ha indicado a Copilot que genere un código que cumpla unos requisitos en cuestión
- Se ha resaltado la importancia de indicar a Copilot los requisitos más concretos para generar el código que está buscando.
- Se han identificado diferentes técnicas de instrucciones y ejemplos de uso para cada caso