You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: .github/steps/1-preparing.md
+28-21Lines changed: 28 additions & 21 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,27 +6,30 @@ In this exercise, you will be using different GitHub Copilot features to work on
6
6
7
7
<imgwidth="600"alt="screenshot of Mergington High School WebApp"src="https://github.com/user-attachments/assets/472398fd-1aa1-4084-b443-4e242deb30d9" />
GitHub Copilot is an AI coding assistant that helps you write code faster and with less effort, allowing you to focus more energy on problem solving and collaboration.
14
14
15
15
GitHub Copilot has been proven to increase developer productivity and accelerate the pace of software development. For more information, see [Research: quantifying GitHub Copilot’s impact on developer productivity and happiness in the GitHub blog.](https://github.blog/news-insights/research/research-quantifying-github-copilots-impact-on-developer-productivity-and-happiness/)
16
16
17
-
Your most common interactions will likely be:
17
+
As you work in your IDE, you'll most often interact with GitHub Copilot in the following ways:
18
18
19
-
-**Inline suggestions**: As you type, Copilot uses the nearby context to suggest code directly in your editor. This will be a familiar interaction if you have used code completion tools like [Intellisense](https://code.visualstudio.com/docs/editor/intellisense), except that the completions may be entire functions.
20
-
-**Copilot - Ask Mode**: A dedicated chat panel that lets you ask coding related questions. This will feel familiar if you have used online AI assistant chats. The big difference however, is that your project files will provide automatic context to provide tailored responses.
21
-
-**Copilot - Edit Mode**: Similar to Ask mode, but less conversational. Copilot will make changes to your selected files to implement your request.
22
-
-**Copilot - Agent Mode**: Copilot will run iteratively until it achieves your request. It will select context, make code changes, run terminal commands, run tools, and most importantly review its work to make adjustments.
|**⚡ Inline suggestions**| AI-powered code suggestions that appear as you type, offering context-aware completions from single lines to entire functions. | Completion of the current line, sometimes a whole new block of code |
22
+
|**💬 Ask Mode**| Optimized for answering questions about your codebase, coding, and general technology concepts. | Understanding how code works, brainstorming ideas, asking questions |
23
+
|**✏️ Edit Mode**| Optimized for making code edits across multiple files in your project. VS Code directly applies the code changes in the editor for in-place review. | Coding tasks when you have a good understanding of the changes you want to make and which files you want to edit |
24
+
|**🤖 Agent Mode**| Optimized for making autonomous edits across multiple files in your project. | Coding tasks when you have a less well-defined task that might also require running terminal commands and tools |
25
+
|**💭 Inline Chat**| Interactive chat scoped to your current file or selection. Ask questions about specific code blocks. | Code explanations, debugging specific functions, targeted improvements |
23
26
24
-
> [!TIP]
25
-
> You can learn more about current and upcoming features in the [GitHub Copilot Features](https://docs.github.com/en/copilot/about-github-copilot/github-copilot-features) documentation. You can also select different [models](https://docs.github.com/en/github-models) and make your own [extensions](https://github.com/features/copilot/extensions), but that's for a different lesson!
27
+
As you work, you'll find GitHub Copilot can help out in several places across the `github.com` website and in your favorite coding environments such as VS Code, Jet Brains, and Xcode!
26
28
27
-
### How can I use GitHub Copilot?
29
+
For today's coding though, we will practice with VS Code in a pre-configured development environment known as a [GitHub Codespace](https://github.com/features/codespaces).
28
30
29
-
As you work, you'll find GitHub Copilot can help out in several places across the website and in your favorite coding environments such as VS Code, Jet Brains, and Xcode! For today's coding though, we will practice with VS Code in a pre-configured development environment known as [Codespace](https://github.com/features/codespaces).
31
+
> [!TIP]
32
+
> You can learn more about current and upcoming features in the [GitHub Copilot Features](https://docs.github.com/en/copilot/about-github-copilot/github-copilot-features) documentation.
30
33
31
34
### :keyboard: Activity: Get a project intro from Copilot Chat
32
35
@@ -49,13 +52,17 @@ Let's start up our development environment, use copilot to learn a bit about the
49
52
50
53
<imgwidth="350"alt="python extension for VS Code"src="https://github.com/user-attachments/assets/3040c0f5-1658-47e2-a439-20504a384f77" />
51
54
52
-
1. At the top of VS Code, locate and click the **Copilot icon** to open a Copilot Chat panel.
55
+
1. At the top of VS Code, locate and click the **Toggle Chat icon** to open a Copilot Chat side panel.
@@ -64,11 +71,13 @@ Let's start up our development environment, use copilot to learn a bit about the
64
71
> What should I do to run it?
65
72
> ```
66
73
67
-
> **Note**: It is not necessary to follow Copilot's recommended instructions. We have already prepared the environment for you.
74
+
> 🪧 **Note:** It is not necessary to follow Copilot's recommended instructions. We have already prepared the environment for you.
68
75
69
76
<details>
70
77
<summary>What is @workspace?</summary>
71
-
Nice job noticing the details, but let's just use it for now. 🤓 We promise to explain in the next step.
78
+
79
+
Great question! This is a specialized [chat participant](https://docs.github.com/en/copilot/using-github-copilot/copilot-chat/github-copilot-chat-cheat-sheet?tool=vscode#chat-participants) that will explore the project repository and try to include relevant additional context.
80
+
72
81
</details>
73
82
74
83
1. Now that we know a bit more about the project, let's actually try running it! In the left sidebar, select the `Run and Debug` tab and then press the **Start Debugging** icon.
@@ -85,11 +94,9 @@ Let's start up our development environment, use copilot to learn a bit about the
85
94
86
95
Great work! Now that we are familiar with the app and we know it works, let's ask copilot for help starting a branch so we can do some customizing.
87
96
88
-
1. If not already there, return to VS Code.
89
-
90
-
1. In the bottom panel, select the **Terminal** tab. On the right side, click the plus `+` sign to create a new terminal window.
97
+
1. In VS Code's bottom panel, select the **Terminal** tab and on the right side click the plus `+` sign to create a new terminal window.
91
98
92
-
> **Note:** This will avoid stopping the existing debug session that is hosting our web application service.
99
+
> 🪧 **Note:** This will avoid stopping the existing debug session that is hosting our web application service.
93
100
94
101
1. Within the new terminal window use the keyboard shortcut `Ctrl + I` (windows) or `Cmd + I` (mac) to bring up **Copilot's Terminal Inline Chat**.
95
102
@@ -101,7 +108,7 @@ Great work! Now that we are familiar with the app and we know it works, let's as
101
108
> Hey copilot, how can I create and publish a new Git branch called "accelerate-with-copilot"?
102
109
> ```
103
110
104
-
> **Tip:** If Copilot doesn't give you quite what you want, you can always continue explaining what you need. Copilot will remember the conversation history for follow-up responses.
111
+
> 💡 **Tip:** If Copilot doesn't give you quite what you want, you can always continue explaining what you need. Copilot will remember the conversation history for follow-up responses.
105
112
106
113
1. Press the `Run` button to let Copilot insert the terminal command for us. No need to copy and paste!
Copy file name to clipboardExpand all lines: .github/steps/2-first-introduction.md
+10-20Lines changed: 10 additions & 20 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,13 +2,14 @@
2
2
3
3
In the previous step, GitHub Copilot was able to help us onboard to the project. That alone is a huge time saver, but now let's get some work done!
4
4
5
-
We recently learned there is a bug where students are registering for the same activities twice. That simply isn't acceptable, so let's get it fixed!
5
+
:bug:**THERE IS A BUG ON THE WEBSITE**:bug:
6
6
7
-
Unfortunately, we were given little information to solve this problem. So, let's enlist Copilot to help find the problem area and get a potential solution made.
7
+
We’ve discovered that something’s off in the signup flow.
8
+
Students can currently register for the same activity **more than once**! Let’s see how far Copilot can take us in uncovering the cause and shaping a clean fix.
8
9
9
-
But before we do that, let's learn a bit more about Copilot! 🧑🚀
10
+
Before we dive in, a quick primer on how Copilot works. 🧑🚀
10
11
11
-
### How does Copilot work?
12
+
### 📖 Theory: How Copilot works
12
13
13
14
In short, you can think of Copilot like a very specialized coworker. To be effective with them, you need to provide them background (context) and clear direction (prompts). Additionally, different people are better at different things because of their unique experiences (models).
14
15
@@ -32,13 +33,6 @@ In short, you can think of Copilot like a very specialized coworker. To be effec
32
33
> Where could this bug be coming from?
33
34
> ```
34
35
35
-
<details>
36
-
<summary>What is @workspace?</summary>
37
-
38
-
Great question! This is a specialized [chat participant](https://docs.github.com/en/copilot/using-github-copilot/copilot-chat/github-copilot-chat-cheat-sheet?tool=vscode#chat-participants) that will explore the project repository and try to include relevant additional context.
39
-
40
-
</details>
41
-
42
36
1. Now that we know the issue is in the `src/app.py` file and the `signup_for_activity` method, let's follow Copilot's recommendation and go fix it (semi-manually). We'll start with a comment and let Copilot finish the correction.
43
37
44
38
1. In VS Code, select the file **Explorer tab** to show the project files and open the `src/app.py` file.
@@ -55,8 +49,6 @@ In short, you can think of Copilot like a very specialized coworker. To be effec
55
49
56
50
1. Press `Tab` to accept Copilot's suggestion and convert the shadow text to code.
57
51
58
-
> **Tip:** If you would like to see other suggestions, instead of pressing `Tab`, hover over the shadow text suggestion and a toolbar will appear. Use the arrows to select other suggestions or the three dots `...` and `Open Completions Panel` option to show all suggestions in a dedicated panel.
59
-
60
52
<details>
61
53
<summary>Example Results</summary><br/>
62
54
@@ -88,15 +80,13 @@ In short, you can think of Copilot like a very specialized coworker. To be effec
88
80
89
81
In new project developments, it's often helpful to have some realistic looking fake data for testing. Copilot is excellent at this task, so let's add some more sample activities and introduce another way to interact with Copilot using **Inline Chat**
90
82
91
-
**Inline Chat** and the **Copilot Chat** panel are very similar tools, but with slightly different automatic context. As such, while Copilot Chat is good at explaining about the project, inline chat might feel more natural for asking about a particular line or function.
92
-
93
-
1. If not already open, open the `src/app.py` file.
83
+
**Inline Chat** and the **Copilot Chat** panel are similar, but differ in scope: Copilot Chat handles broader, multi-file or exploratory questions; Inline Chat is faster when you want targeted help on the exact line or block in front of you.
94
84
95
-
1. Near the top (about line 23), find the `activities` variable, where our example extracurricular activities are configured.
85
+
1. Near the top of the `src/app.py` file (about line 23), find the `activities` variable, where our example extracurricular activities are configured.
96
86
97
87
1. Click on any of the related lines and bring up Copilot inline chat by using the keyboard command `Ctrl + I` (windows) or `Cmd + I` (mac).
98
88
99
-
> **Tip:** Another way to bring up Copilot inline chat is: `right click` on any of the selected lines -> `Copilot` -> `Editor Inline Chat`.
89
+
> 💡 **Tip:** Another way to bring up Copilot inline chat is: `right click` on any of the selected lines -> `Copilot` -> `Editor Inline Chat`.
100
90
101
91
1. Enter the following prompt text and press enter or the **Send and Dispatch** button.
102
92
@@ -182,7 +172,7 @@ Nice work fixing that bug and expanding the example activities! Now let's get ou
182
172
183
173
1. In the left sidebar, select the `Source Control` tab.
184
174
185
-
> **Tip:** Opening a file from the source control area will show the differences to the original rather than simply opening it.
175
+
> 💡 **Tip:** Opening a file from the source control area will show the differences to the original rather than simply opening it.
186
176
187
177
1. Find the `app.py` file and press the `+` sign to collect your changes together in the staging area.
188
178
@@ -192,7 +182,7 @@ Nice work fixing that bug and expanding the example activities! Now let's get ou
192
182
193
183
- Typically, you would write a short description of the changes here, but now we have Copilot to help out!
194
184
195
-
1. To the right of the **Message** text box, find and click the **Generate Commit Message with Copilot** button (sparkles icon).
185
+
1. To the right of the **Message** text box, find and click the **Generate Commit Message** button (sparkles icon).
196
186
197
187
1. Press the **Commit** button and **Sync Changes** button to push your changes to GitHub.
0 commit comments