Skip to content

Add commits, chats, and edits #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Mar 4, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 10 additions & 15 deletions 03-Introduction-to-GitHub-Copilot/steps/2-skills-dotnet.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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)
19 changes: 5 additions & 14 deletions 03-Introduction-to-GitHub-Copilot/steps/3-copilot-hub.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
19 changes: 6 additions & 13 deletions 03-Introduction-to-GitHub-Copilot/steps/4-copilot-comment.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
40 changes: 37 additions & 3 deletions 04-Using-GitHub-Copilot-with-CSharp/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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
Expand All @@ -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:

```
Expand Down Expand Up @@ -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

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion 04-Using-GitHub-Copilot-with-CSharp/images/test.md

This file was deleted.