Merge pull request #6 from microsoft/edits-march4th

Add commits, chats, and edits

Author: jamesmontemagno

Diff for: 03-Introduction-to-GitHub-Copilot/steps/2-skills-dotnet.md

@@ -6,16 +6,20 @@ GitHub Copilot provides suggestions for numerous languages and a wide variety of
 
 Let's try this out utilizing C# for Copilot.
 
+> **Note**:
+> If you closed the Codespace from above, please open it back up or create a new Codespace.
+
 ### ⌨️ Activity: Add a C# file and start writing code
 
 > **Note**:
-> If you closed the Codespace from above, please open it back up or create a new Codespace.
+> Make sure to open the **Solution Explorer** to see an organized view to easily add new projects and run them..
 
 1. Create a new .NET project by using the `.NET: New Project...` command and selecting `Console App`. 
 1. Select the **code** folder and name the project **Skills**.
 1. Open `Program.cs`
 1. Verify your new file looks like:
    ![VS code with a new Program.cs](./img/2-skills-dotnet-0.png)
+
 1. In the `Program.cs` file, remove any code and then type the following function header.
 
    ```csharp
@@ -30,23 +34,14 @@ Let's try this out utilizing C# for Copilot.
 
 ### ⌨️ Activity: Push code to your repository from the codespace
 
-1. Use the VS Code terminal to add all files to the repository:
+Let's use GitHub Copilot to summarize our changes and then commit the code. 
 
-   ```
-   git add -A
-   ```
+1. Open the **Source Control** tab
+2. Tap on the ✨ button in the **Message** entry for Copilot to generate your message.
 
-2. Next from the VS Code terminal stage and commit the changes to the repository:
+![Commit tab open to generate message with Copilot](img/2-skills-commit.png)
 
-   ```
-   git commit -m "Copilot first commit"
-   ```
-
-3. Finally from the VS Code terminal push to code to the repository:
-
-   ```
-   git push
-   ```
+3. Click the **Commit** button.
 
 
 Head to [Part 3 of the Exercise](./3-copilot-hub.md)

Diff for: 03-Introduction-to-GitHub-Copilot/steps/3-copilot-hub.md

@@ -28,23 +28,14 @@ Keep in mind that as you continue to use copilot, you may not want some of the s
 
 ### ⌨️ Activity: Push code to your repository from the codespace
 
-1. Use the VS Code terminal to add the `Member.cs` file to the repository:
+Let's use GitHub Copilot to summarize our changes and then commit the code. 
 
-   ```
-   git add Member.cs
-   ```
-
-2. Next from the VS Code terminal stage and commit the changes to the repository:
-
-   ```
-   git commit -m "Copilot second commit"
-   ```
+1. Open the **Source Control** tab
+2. Tap on the ✨ button in the **Message** entry for Copilot to generate your message.
 
-3. Finally from the VS Code terminal push to code to the repository:
+![Commit tab open to generate message with Copilot](img/2-skills-commit.png)
 
-   ```
-   git push
-   ```
+3. Click the **Commit** button.
 
 
 Head to [Part 4 of the Exercise](./4-copilot-comment.md)

Diff for: 03-Introduction-to-GitHub-Copilot/steps/4-copilot-comment.md

@@ -31,20 +31,13 @@ Now lets see how you can leverage comments to generate Copilot suggestions!
 
 ### ⌨️ Activity: Push code to your repository from the codespace
 
-1. Use the VS Code terminal to add the `Comments.cs` file to the repository:
+Let's use GitHub Copilot to summarize our changes and then commit the code. 
 
-   ```
-   git add Comments.cs
-   ```
-
-2. Next from the VS Code terminal stage and commit the changes to the repository:
+1. Open the **Source Control** tab
+2. Tap on the ✨ button in the **Message** entry for Copilot to generate your message.
 
-   ```
-   git commit -m "Copilot third commit"
-   ```
+![Commit tab open to generate message with Copilot](img/2-skills-commit.png)
 
-3. Finally from the VS Code terminal push to code to the repository:
+3. Click the **Commit** button.
 
-   ```
-   git push
-   ```
+Head to [Exercise 4 - Using GitHub Copilot with C#](../../04-Using-GitHub-Copilot-with-CSharp/README.md)

Diff for: 03-Introduction-to-GitHub-Copilot/steps/img/2-skills-commit.png

@@ -45,12 +45,27 @@ The "**GitHub Codespaces ♥️ .NET**" repository builds a Weather API using Mi
 We will review the steps to update the Weather BackEnd App by adding a new endpoint that requests a specific location and returns the weather forecast for that location.
 
 
-### 🗒️ Step 1: Get familiarized with the "GitHub Codespaces ♥️ .NET" repository
+### 🤔 Step 0: Get familiarized with the "GitHub Codespaces ♥️ .NET" repository
 
 Once you open the repository in Codespaces, you will find a new browser window with a fully functional Codespace. Everything in this repository is contained within this one Codespace. In example, in the explorer panel, we can see the main code for the BackEnd and the FrontEnd project.
 
 ![new Codespace with all the repository running](./images/005OpenRepoInCodeSpaces.png)
 
+Before we run the project, let's use GitHub Copilot Chat to inquire about what the project is and the different components.
+
+1. Open **GitHub Copilot Chat** from the main navigation bar. 
+1. Type in `What is this project doing, and what are the key components?` and hit **Send***
+
+GitHub Copilot Chat will now look at the entire project and give us a summary of what the projects do, what technology they use, and any of the key components in them.
+
+![Copilot Chat describing the project](./images/004AskCopilotAboutProject.png)
+
+From here, you can click on files to navigate to them and you can ask follow up questions such as `What APIs are available?`.
+
+
+### 🚀 Step 1: Run the projects
+
+Now that we have context of what is in the project, let's run it and see it in action.
 In order to run the BackEnd project, go to the "Run and Debug" panel, and select the "BackEnd" Project.
 
 ![open program.cs in the BackEnd project](./images/006RunBackEndProject.png)
@@ -82,7 +97,6 @@ Pressing F10 we can debug step-by-step until line 32, where we can see the gener
 
 You can stop debugging now.
 
-
 Congratulations! Now you are ready to add more features into the app using GitHub Copilot.
 
 ### 🗒️ Step 2: Get familiarized with GitHub Copilot Slash Commands
@@ -95,7 +109,6 @@ Now let's use a slash command, in GitHub Copilot to understand a piece of code.
 
 ![Use slash command to explain a piece of code](./images/011SlashCommandExplain.gif)
 
-
 Based on your version of GitHub Copilot you will see either an inline response or an update in the Chat Panel. GitHub Copilot will create a detailed explanation of the selected code. A summarized version will be like this one:
 
 ```
@@ -218,6 +231,27 @@ Both tests running should be like these ones:
 
 🚀 Congratulations, through the exercise, you haven't only used GitHub Copilot  to generate code but also done it in an interactive and fun way! You can use GitHub Copilot to not only generate code, but write documentation, test your applications and more.
 
+### ✨ Bonus: Add new capabilities with GitHub Copilot Edits
+
+Let's use **Copilot Edits** to start an AI-powered code editing session and iterate quickly on code changes across multiple files by using natural language. Copilot Edits applies the edits directly in the editor, where you can review them in-place, with the full context of the surrounding code.
+
+Let's add some new functionality so the user can enter the city they want to search for and call our new API.
+
+1. Open the **Edits** mode window in GitHub Copilot Chat
+
+![Selecting **Edits** mode](./images/OpenEditsWindows.png)
+2. Select the **+Add Files...** button from the Edits window and add **FetchData.razor** and **WeatherForecastClient.cs**.
+3. Enter into the chat: `Update the user interface to ask the user the city they want the weather for, use the forecast client to call the new endpoint for the city, and update the table to display the city as well.
+4. Select the **Send** button and now Edits will generate an iteration plan for the changes. 
+5. Review the edits and hit **Accept** in the edits window to accept all changes to files.
+6. Run the application
+
+> Note: If the application doesn't run or it doesn't call the new endpoint, validate the changes in the files changed and ensure the endpoint is being called correctly.
+
+![Image of the weather page with  city entry](./images/WeatherWithEdits.png)
+
+From here, you can continue to iterate and ask questions about styling or other pieces of functionality to add to the application.
+
 
 ## Legal Notices