Update lab feedback

Author: jamesmontemagno

lab/images/1-agent.png

@@ -2,15 +2,13 @@
 
 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/3-chat.png

@@ -4,25 +4,27 @@ In this section, you'll use GitHub Copilot's code completion to implement API en
 
 > 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.
+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.
    
-2. [] Begin typing a comment to describe what you want to implement:
+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. [] We now can implement the following endpoints using GitHub Copilot:
+1. [] We now can implement the following endpoints using GitHub Copilot:
    - GET product by ID
    - POST to create a new product
    - PUT to update a product
@@ -32,9 +34,9 @@ In this section, you'll use GitHub Copilot's code completion to implement API en
      - 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 integration on the Store project?`
+     - 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 sould look similar to:
+   The end code in **ProductEndpoints.cs** sould look similar to:
 
    ```csharp
    group.MapGet("/", async (ProductDataContext db) =>
@@ -96,22 +98,84 @@ In this section, you'll use GitHub Copilot's code completion to implement API en
    .Produces(StatusCodes.Status404NotFound);
    ```
 
+   In the **Store** project in the solution explorer open **Services/ProductService.cs**, the code sould look similar to:
+
+   ```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;
+      }
+   }
+   ```
+
    > [!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!
 
-7. [] Try changing the variable name of **id** to `productId` in the new **MapGet** method and see Next Edit Suggestions help out.
+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 by going to **https://localhost:7130/api/Product/1**
 
-10. [] Stop debugging and close the application
+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/5-select-sonnet.png

@@ -5,24 +5,24 @@ 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.
 
-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 and the text: Loading... under it"
 
     ![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.
 
-9. [] Stop debugging and close the application
+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/part0-exploring-codebase.md

@@ -2,12 +2,12 @@
 
 In this section, you'll learn how to reference existing code files in your chat conversations.
 
-1. [] Open **Products.razor** from the Store project.
-1. [] Ensure that GitHub Copilto Chat is open by clickin 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)
 
-1. Change the mode to `Manual(Chat)`
+1. Change the mode to `Ask`
 
 	![Change to chat](./images/3-chat.png)
 

lab/part1-code-completion.md

@@ -21,12 +21,11 @@ Here are some guidelines to consider when creating a Copilot instructions file:
 
 ## Create a Copilot instructions file
 
-1. [] Open the **copilot-instructions.md** file in the **.github** folder, you can also get to it from the **Solution Items** folder in Visual Studio.
-2. [] Add project-specific information about your application:
+1. [] In the **Solution Explorer**, expand the **Solution Items** and open **copilot-instructions.mc**. 
+    > This file is located in the **.github* folder in the root of the repository.
+1. [] Add project-specific information about your application:
 
     ```markdown
-    ## TinyShop
-
     ### Backend
     - Products project is the backend API.
     - Built with .NET Minimal APIs.
@@ -39,14 +38,14 @@ Here are some guidelines to consider when creating a Copilot instructions file:
     - UI should have a modern look and feel.
     - CSS should be in .razor.css files.
     ```
-3. Start a new chat by clicking the `+` icon in the top right corner of the chat window.
+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)
 
-4. [] Go back to Copilot Chat and re-run the prompt from Part 3, you can do this by pressing the up key. or
+1. [] Go back to Copilot Chat and re-run the prompt from Part 3, you can do this by pressing the up key. or
     i. [] Ask: `How would I implement getting and visualizing the products in a table using the code in #ProductService and the css required.`
     i. [] Review the code suggestion but don't implement it yet.
     i. [] Follow up with: `How would this look in a grid instead of a list?`
-5. [] Notice how the responses now incorporate your custom instructions.
+1. [] Notice how the responses now incorporate your custom instructions.
 
 **Key Takeaway**: Custom instructions make Copilot's suggestions more aligned with your project standards and architecture preferences.

lab/part2-enhancing-ui.md

@@ -7,6 +7,7 @@ With Copilot Agent, you will add the files which need to be updated to the conte
 Let's add the ability to see a list of images into the app:
 
 1. [] 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.
+
 1. [] Switch to **Agent** mode.
 
    ![Switch to agent mode](./images/1-agent.png)
@@ -15,7 +16,10 @@ Let's add the ability to see a list of images into the app:
 
     ![New chat icon in VS copilot](./images/5-new-edits.png)
 
-1. [] If available, select **Claude 3.5 Sonnet** from the list of available models
+1. [] At the bottom of the GitHub Copilot Chat pane, select the model (default is GPT-4o") from the dropdown list, and select **Claude 3.5 Sonnet** from the list of available models.
+
+    ![Select Sonnet in Copilot](./images/5-select-sonnet.png)
+
 1. [] Type: `Implement a product listing page in Products.razor that fetches products from #ProductService and displays them in a list with product name, description, price, and image.`
 
     > [!NOTE]

lab/part3-referencing-files.md

@@ -3,13 +3,13 @@
 In this section, you'll use Copilot Vision. You can share screenshots of errors and Copilot will interpret the image and resolve the issue. Or share mockups of new designs, and Vision will help you bring them to life. Let's update our design based on a photo our design gave us.
 
 1. [] Open a new Copilot Chat thread in Agent mode.
-2. [] Click the **+** button in the chat, select **upload image**, and select the store application image that is found in the GitHub repo that is cloned called **eshop.png** inside of the **C:\Users\LabUser\Source\Repos\build-2025-lab300** directory.
+1. [] Click the **+** button in the chat, select **upload image**, and select the store application image that is found in the GitHub repo that is cloned called **eshop.png** inside of the **C:\Users\LabUser\Source\Repos\build-2025-lab300** directory.
 
     ![Attach image icon](./images/6-add-image.png)
 
-3. [] Ask: `Update the Products.razor to display products in a grid layout similar to this image. Add nice hover effects and make it responsive.`
-4. [] Review the suggested code changes and implement them. It should recommend changes to both the **Products.razor** and a new **Products.razor.css**
-5. [] Run the application to see the updated product grid layout. You may have to clear the browser cashe with CTRL+SHIFT+R if you don't see the css update.
+1. [] Ask: `Update the Products.razor to display products in a grid layout similar to this image. Add nice hover effects and make it responsive.`
+1. [] Review the suggested code changes and implement them. It should recommend changes to both the **Products.razor** and a new **Products.razor.css**
+1. [] Run the application to see the updated product grid layout. You may have to clear the browser cashe with CTRL+SHIFT+R if you don't see the css update.
 
 > Note: continue to iterate with Copilot Agent if it isn't to your liking.