Merge pull request #2 from dotnet-presentations/final

Final

Author: jamesmontemagno

README.md

@@ -24,7 +24,7 @@ You'll use GitHub Copilot's various features to enhance and complete this applic
 3. [Enhancing UI with Inline Chat](lab/part2-enhancing-ui.md)
 4. [Referencing Code Files in Chat](lab/part3-referencing-files.md)
 5. [Using Custom Instructions](lab/part4-custom-instructions.md)
-6. [Implementing Features with Copilot Edits](lab/part5-implementing-features.md)
+6. [Implementing Features with Copilot Agent](lab/part5-implementing-features.md)
 7. [Using Copilot Vision](lab/part6-copilot-vision.md)
 8. [Debugging with Copilot](lab/part7-debugging-with-copilot.md)
 9. [Commit Summary Descriptions](lab/part8-commit-summary-descriptions.md)

lab/images/1-agent.png

@@ -2,15 +2,12 @@
 
 GitHub Copilot Chat allows you to ask questions about your code and get intelligent responses.
 
-1. [] Open the solution in Visual Studio 2022.
-2. Click on the Github Copilot Chat in the top-right corner of Visual Studio and select **Open Chat Window** or press `Ctrl+\+C` if Copilot chat isn't open.
-
+1. [] Open the solution in Visual Studio 2022 if it is not already open.
+1. Click on the Github Copilot Chat in the top-right corner of Visual Studio and select **Open Chat Window** or press `Ctrl+\+C` if Copilot chat isn't open.
    ![Open chat window dialog](./images/1-open-copilot-chat.png)
-
-3. [] Try asking questions about the project structure:
+1. [] Try asking questions about the project structure:
    - `What projects are in this solution and how do things work together?`
-   - `What is the TinyShop application architecture?`
    - `How does the Products API work?`
-4. [] Notice how Copilot analyzes your codebase to provide contextual answers.
+1. [] Notice how Copilot analyzes your codebase to provide contextual answers.
 
 **Key Takeaway**: GitHub Copilot Chat helps you understand unfamiliar codebases by answering questions about the project structure, architecture, and implementation details.

lab/images/1-open-copilot-chat.png

@@ -2,31 +2,40 @@
 
 In this section, you'll use GitHub Copilot's code completion to implement API endpoints.
 
-> [!IMPORTANT]
-> For this exercise, **DO NOT** copy and paste the code snippet provided, but rather type it manually. This will allow you to experience code completion as you would if you were coding back at your desk. You'll likely see you only have to type a few characters before GitHub Copilot begins suggesting the rest.
+> IMPORTANT: For this exercise, **DO NOT** copy and paste the code snippet provided, but rather type it manually. This will allow you to experience code completion as you would if you were coding back at your desk. You'll likely see you only have to type a few characters before GitHub Copilot begins suggesting the rest.
 
-1. [] Open **ProductEndpoints.cs** in the Products project under **Endpoints** - it should be empty or contain minimal code.
-2. [] Begin typing a comment to describe what you want to implement:
+1. [] Stop debugging the appliaction if it is currently running.
+
+1. [] In the Solution Explorer, in the **Products** project, open **Endpoints/ProductEndpoints.cs** - it will have a single endpoint implemented.
+
+   > Note: GitHub Copilot will not give code suggestions when debugging.
+   
+1. [] Let's implement a new **MapGet** to get product details for a specific **id**. Move our cursor and click on line 20 under the existing **/** endpoint. Text suggestion may apprear or type:
    ```csharp
-   group.MapGet(
+   g
    ```
-3. [] Wait for the ghost text suggestions to appear (gray text).
-
+1. [] Wait for the ghost text suggestions to appear (gray text).
+;
    ![Code suggestions](./images/1-ghost-text.png)
 
-4. [] Press Tab to accept the suggestion or continue typing to get more specific suggestions.
+1. [] Press Tab to accept the suggestion or continue typing to get more specific suggestions.
 
-5. [] From there Next Edit Suggetions (NES) or addtional Ghost Text suggestions will appear. 
+1. [] From there Next Edit Suggetions (NES) or addtional Ghost Text suggestions will appear. 
 
    ![NES showing up](./images/1-nes.png)
 
-6. [] Implement the following endpoints using GitHub Copilot's suggestions:
-   - GET product by ID
+1. [] We now can implement the following endpoints using GitHub Copilot:
    - POST to create a new product
    - PUT to update a product
    - DELETE to remove a product
 
-   The end code sould look similar to:
+   - We can continue to use suggestions OR we could open GitHub Copilot Chat and work with Agent mode:
+     - Open GitHub Copilot Chat in the top-right corner of Visual Studio and select **Open Chat Window** or press `Ctrl+\+C` if Copilot chat isn't open.
+     - Switch to **Agent** mode.
+     - ![Switch to agent mode](./images/1-agent.png)]
+     - Ask the agent: `Can you implement the rest of the endpoints for the Product API and also implement the ProductService to call these new endpoints in the Store project?`
+
+   The end code in **ProductEndpoints.cs** sould look similar to:
 
    ```csharp
    group.MapGet("/", async (ProductDataContext db) =>
@@ -88,20 +97,83 @@ In this section, you'll use GitHub Copilot's code completion to implement API en
    .Produces(StatusCodes.Status404NotFound);
    ```
 
-   > [!IMPORTANT]
-   >Because LLMs are probabilistic, not deterministic, the exact code generated can vary. The above is a representative example. If your code is different, that's just fine as long as it works!
+   In the **Store** project in the solution explorer open **Services/ProductService.cs**, the code sould look similar to:
 
-7. [] Try changing the variable name of **id** to `productId` in the new **MapGet** method and see Next Edit Suggestions help out.
+   ```cs
+   using DataEntities;
+   using System.Text.Json;
+   
+   namespace Store.Services;
+   
+   public class ProductService
+   {
+      HttpClient httpClient;
+      public ProductService(HttpClient httpClient)
+      {
+         this.httpClient = httpClient;
+      }
+      public async Task<List<Product>> GetProducts()
+      {
+         List<Product>? products = null;
+         var response = await httpClient.GetAsync("/api/Product");
+         if (response.IsSuccessStatusCode)
+         {
+               var options = new JsonSerializerOptions
+               {
+                  PropertyNameCaseInsensitive = true
+               };
+   
+               products = await response.Content.ReadFromJsonAsync(ProductSerializerContext.Default.ListProduct);
+         }
+   
+         return products ?? new List<Product>();
+      }
+   
+      public async Task<Product?> GetProductById(int id)
+      {
+         var response = await httpClient.GetAsync($"/api/Product/{id}");
+         if (response.IsSuccessStatusCode)
+         {
+               return await response.Content.ReadFromJsonAsync<Product>(ProductSerializerContext.Default.Product);
+         }
+         return null;
+      }
+   
+      public async Task<bool> CreateProduct(Product product)
+      {
+         var response = await httpClient.PostAsJsonAsync("/api/Product", product, ProductSerializerContext.Default.Product);
+         return response.IsSuccessStatusCode;
+      }
+   
+      public async Task<bool> UpdateProduct(int id, Product product)
+      {
+         var response = await httpClient.PutAsJsonAsync($"/api/Product/{id}", product, ProductSerializerContext.Default.Product);
+         return response.IsSuccessStatusCode;
+      }
+   
+      public async Task<bool> DeleteProduct(int id)
+      {
+         var response = await httpClient.DeleteAsync($"/api/Product/{id}");
+         return response.IsSuccessStatusCode;
+      }
+   }
+   ```
+
+   > NOTE: Because LLMs are probabilistic, not deterministic, the exact code generated can vary. The above is a representative example. If your code is different, that's just fine as long as it works!
+
+1. [] Go back to **ProductEndpoints.cs**, and try changing the variable name of **id** to `productId` in the new **MapGet** method and see Next Edit Suggestions help out.
 
    ![NES suggestions more](./images/1-nes-2.png)
 
-8. [] Try using documentation generation:
+1. [] Try using documentation generation:
    - Type `///` above a method to generate XML documentation on the **MapProductEndpoints** this can also be brought up with `Alt+/` for inline and then entering **/** which will bring up a list of commands.
 
    ![documentation generation by Copilot](./images/1-docs.png)
 
-9. [] Test your implementation:
+1. [] Test your implementation:
    - Run the AppHost project.
-   - Test your new endpoints.
+   - Test your new endpoints by going to **https://localhost:7130/api/Product/1**
+
+1. [] Stop debugging and close the application
 
 **Key Takeaway**: GitHub Copilot can generate complete API implementations based on your comments or partial code, significantly speeding up development.

lab/images/3-chat.png

@@ -2,25 +2,26 @@
 
 Now, you'll improve the loading experience using Copilot's inline chat.
 
-> [!NOTE]
-> This exercise does supply specific prompts to type, but as part of the learning experience we encourage you to discover how to interact with Copilot. Feel free to talk in natural language, describing what you're looking for or need to accomplish.
+> NOTE: This exercise does supply specific prompts to type, but as part of the learning experience we encourage you to discover how to interact with Copilot. Feel free to talk in natural language, describing what you're looking for or need to accomplish.
 
-1. [] Open **Products.razor** in the **Store** project under **Components**.
-2. [] Find the "Loading..." text in the code.
-3. [] Select this text and right-click.
-4. [] Choose "Copilot > Start inline chat" or press `Alt+/`.
-5. [] In the inline chat, type: "What would this look like with a loading progress spinner"
+1. [] In the **Solution explorer** under the **Store** project open **Components/Pages/Products.razor**.
+1. [] Find the "Loading..." text in the code.
+1. [] Select this text and right-click.
+1. [] Choose "Ask Copilot" or press `Alt+/`.
+1. [] In the inline chat, type: `Update this to have a loading progress spinner`
 
     ![Screenshot of VS with inline chat](./images/2-inline-code.png)
 
-6. [] Preview the suggestion by clicking the "Preview" button.
-7. [] Accept the change by clicking "Accept."
+1. [] Select **Tab** to accept the changes, and it should look similar to:  
 
     ```html
     <div class="spinner-border text-primary" role="status">
         <span class="visually-hidden">Loading...</span>
     </div>
     ```
-8. [] Run the application to see your new loading spinner in action.
+
+1. [] Run the application to see your new loading spinner in action.
+
+1. [] Stop debugging and close the application
 
 **Key Takeaway**: Inline chat allows you to make targeted improvements to your code without leaving your editor context.

lab/images/5-new-edits.png

@@ -2,15 +2,22 @@
 
 In this section, you'll learn how to reference existing code files in your chat conversations.
 
-1. [] Open **Products.razor** from the Store project.
-2. [] Click on the Github Copilot Chat in the top-right corner of Visual Studio and select **Open Chat Window** or press `Ctrl+\+C` if Copilot chat isn't open.
+1. [] Open the **Products.razor** again from the **Store** project.
+1. [] Ensure that GitHub Copilto Chat is open by clicking on the Github Copilot Chat in the top-right corner of Visual Studio and select **Open Chat Window** or press `Ctrl+\+C` if Copilot chat isn't open.
 
    ![Open chat window dialog](./images/1-open-copilot-chat.png)
-   
-3. [] Type: `#ProductService.cs` to reference the ProductService file.
-4. [] Ask: `How would I implement getting and visualizing the products in a table using the code in ProductService?`
-5. [] Review the code suggestion but don't implement it yet.
-6. [] Follow up with: `How would this look in a grid instead of a list?`
-7. [] Notice how Copilot can reference existing code to provide contextual suggestions.
+
+1. Change the mode to `Ask`
+
+	![Change to chat](./images/3-chat.png)
+
+1. Start a new chat by clicking the `+` icon in the top right corner of the chat window.
+
+   ![New chat](./images/5-new-edits.png)
+
+1. [] Type: `#ProductService.cs` to reference the ProductService file.
+1. [] Ask: `How would I implement getting and visualizing the products in a table using the code in #ProductService and the css required.`
+1. [] Review the code suggestion but don't implement it yet.
+1. [] Notice how Copilot can reference existing code to provide contextual suggestions.
 
 **Key Takeaway**: Referencing files in your chat provides Copilot with the context it needs to give more accurate, project-specific suggestions.