Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
3d81dea
fix: clarify explanation of @workspace in onboarding steps
FidelusAleksander Oct 2, 2025
2a06931
chore: update tips and notes with emoji styling
FidelusAleksander Oct 2, 2025
9c1d0ad
feat: update workflow to check branch name and handle comments for st…
FidelusAleksander Oct 2, 2025
28add90
chore: upgrade actions/checkout from v4 to v5 across workflow files
FidelusAleksander Oct 2, 2025
111476f
fix: update section title and improve tips for GitHub Copilot usage
FidelusAleksander Oct 2, 2025
518a778
feat: enhance Copilot interaction modes with detailed descriptions an…
FidelusAleksander Oct 2, 2025
d35c2a4
fix: adjust formatting and clarify instructions for Ask Mode in Copil…
FidelusAleksander Oct 2, 2025
eb19149
Update images
FidelusAleksander Oct 2, 2025
32c7236
emphasize bug description in step two
FidelusAleksander Oct 2, 2025
03dcf16
Theory header
FidelusAleksander Oct 2, 2025
a4865ef
Remove tip about open completions panel which is not available anymore
FidelusAleksander Oct 2, 2025
ea8dd13
fix: clarify differences between Inline Chat and Copilot Chat
FidelusAleksander Oct 2, 2025
703c196
Update Copilot Edit Mode theory
FidelusAleksander Oct 2, 2025
f564ef2
fix: improve clarity on Edit Mode usage and workflow
FidelusAleksander Oct 2, 2025
1e71ea9
feat: add Copilot Agent Mode and update workflow configurations
FidelusAleksander Oct 2, 2025
0ffbbcf
refactor: update Copilot Agent Mode section for clarity and structure
FidelusAleksander Oct 3, 2025
37592ba
fix: clarify instructions for using Agent Mode and refine activity pr…
FidelusAleksander Oct 3, 2025
9c74a6a
Test step
FidelusAleksander Oct 3, 2025
f3ffa07
fix: correct step numbering and enhance recap of Copilot features
FidelusAleksander Oct 3, 2025
3d900b1
fix: update permissions and enhance step checking workflow
FidelusAleksander Oct 3, 2025
a457aee
fix: update actions/checkout version to v5 in workflow files
FidelusAleksander Oct 3, 2025
48fe6b8
Add screenshots
FidelusAleksander Oct 3, 2025
77e2be7
Remove paths filter from agent mode step trigger
FidelusAleksander Oct 3, 2025
ad52d02
fix: update lesson prompts for clarity in Copilot steps
FidelusAleksander Oct 3, 2025
835e13c
Bump finish-exercise version
FidelusAleksander Oct 3, 2025
55e98e8
Remove notes from workflows
FidelusAleksander Oct 3, 2025
568adcd
Explain codebase tool
FidelusAleksander Oct 3, 2025
1fbf99a
Rename lesson to exercise
FidelusAleksander Oct 3, 2025
a196656
Revise Copilot features and access notes
FidelusAleksander Oct 3, 2025
0eb359e
Update context section with image and clean up
FidelusAleksander Oct 3, 2025
ef5dbfb
Apply suggestion from @Copilot
arilivigni Oct 3, 2025
9f62148
Update pytest.ini
FidelusAleksander Oct 3, 2025
f671337
fix: button name
chriswblake Oct 6, 2025
d8d01e3
fix: different button name
chriswblake Oct 6, 2025
f087814
docs: Adjust wording to mention paid tiers of copilot
chriswblake Oct 6, 2025
39d090d
docs: make create instructions more obvious
chriswblake Oct 6, 2025
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
49 changes: 28 additions & 21 deletions .github/steps/1-preparing.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,27 +6,30 @@ In this exercise, you will be using different GitHub Copilot features to work on

<img width="600" alt="screenshot of Mergington High School WebApp" src="https://github.com/user-attachments/assets/472398fd-1aa1-4084-b443-4e242deb30d9" />

### What is GitHub Copilot?
### 📖 Theory: Getting to know GitHub Copilot

<img width="150" align="right" alt="copilot logo" src="https://github.com/user-attachments/assets/4d22496d-850b-4785-aafe-11cba03cd5f2" />

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.

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/)

Your most common interactions will likely be:
As you work in your IDE, you'll most often interact with GitHub Copilot in the following ways:

- **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.
- **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.
- **Copilot - Edit Mode**: Similar to Ask mode, but less conversational. Copilot will make changes to your selected files to implement your request.
- **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.
| Interaction Mode | 📝 Description | 🎯 Best For |
| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
| **⚡ 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 |
| **💬 Ask Mode** | Optimized for answering questions about your codebase, coding, and general technology concepts. | Understanding how code works, brainstorming ideas, asking questions |
| **✏️ 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 |
| **🤖 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 |
| **💭 Inline Chat** | Interactive chat scoped to your current file or selection. Ask questions about specific code blocks. | Code explanations, debugging specific functions, targeted improvements |

> [!TIP]
> 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!
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!

### How can I use GitHub Copilot?
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).

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).
> [!TIP]
> 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.

### :keyboard: Activity: Get a project intro from Copilot Chat

Expand All @@ -49,13 +52,17 @@ Let's start up our development environment, use copilot to learn a bit about the

<img width="350" alt="python extension for VS Code" src="https://github.com/user-attachments/assets/3040c0f5-1658-47e2-a439-20504a384f77" />

1. At the top of VS Code, locate and click the **Copilot icon** to open a Copilot Chat panel.
1. At the top of VS Code, locate and click the **Toggle Chat icon** to open a Copilot Chat side panel.

<img width="150" alt="image" src="https://github.com/user-attachments/assets/abf584e9-ef68-4725-8b22-4803805e6d55" />

> 🪧 **Note:** If this is your first time using GitHub Copilot, you will need to accept the usage terms to continue.

<img width="150" alt="image" src="https://github.com/user-attachments/assets/5e64db46-95cb-415d-badc-b6b8677f10c1" />
1. Make sure you are in **Ask Mode** for our first interaction

1. If this is your first time using GitHub Copilot, you will need to accept the usage terms to continue.

1. Enter the below prompt to ask Copilot to introduce you to the project. Use Copilot **Ask Mode** for this prompt.
<img width="350" alt="screenshot showing Ask Mode selection in Copilot Chat" src="https://github.com/user-attachments/assets/fb1d7cac-2d39-4199-b5d9-0f3dfcfb3bcd" />
1. Enter the below prompt to ask Copilot to introduce you to the project.

> ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=social&logo=github%20copilot)
>
Expand All @@ -64,11 +71,13 @@ Let's start up our development environment, use copilot to learn a bit about the
> What should I do to run it?
> ```

> **Note**: It is not necessary to follow Copilot's recommended instructions. We have already prepared the environment for you.
> 🪧 **Note:** It is not necessary to follow Copilot's recommended instructions. We have already prepared the environment for you.

<details>
<summary>What is @workspace?</summary>
Nice job noticing the details, but let's just use it for now. 🤓 We promise to explain in the next step.

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.

</details>

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.
Expand All @@ -85,11 +94,9 @@ Let's start up our development environment, use copilot to learn a bit about the

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.

1. If not already there, return to VS Code.

1. In the bottom panel, select the **Terminal** tab. On the right side, click the plus `+` sign to create a new terminal window.
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.

> **Note:** This will avoid stopping the existing debug session that is hosting our web application service.
> 🪧 **Note:** This will avoid stopping the existing debug session that is hosting our web application service.

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**.

Expand All @@ -101,7 +108,7 @@ Great work! Now that we are familiar with the app and we know it works, let's as
> Hey copilot, how can I create and publish a new Git branch called "accelerate-with-copilot"?
> ```

> **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.
> 💡 **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.

1. Press the `Run` button to let Copilot insert the terminal command for us. No need to copy and paste!

Expand Down
30 changes: 10 additions & 20 deletions .github/steps/2-first-introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,14 @@

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!

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!
:bug: **THERE IS A BUG ON THE WEBSITE** :bug:

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.
We’ve discovered that something’s off in the signup flow.
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.

But before we do that, let's learn a bit more about Copilot! 🧑‍🚀
Before we dive in, a quick primer on how Copilot works. 🧑‍🚀

### How does Copilot work?
### 📖 Theory: How Copilot works

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).

Expand All @@ -32,13 +33,6 @@ In short, you can think of Copilot like a very specialized coworker. To be effec
> Where could this bug be coming from?
> ```

<details>
<summary>What is @workspace?</summary>

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.

</details>

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.

1. In VS Code, select the file **Explorer tab** to show the project files and open the `src/app.py` file.
Expand All @@ -55,8 +49,6 @@ In short, you can think of Copilot like a very specialized coworker. To be effec

1. Press `Tab` to accept Copilot's suggestion and convert the shadow text to code.

> **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.

<details>
<summary>Example Results</summary><br/>

Expand Down Expand Up @@ -88,15 +80,13 @@ In short, you can think of Copilot like a very specialized coworker. To be effec

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**

**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.

1. If not already open, open the `src/app.py` file.
**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.

1. Near the top (about line 23), find the `activities` variable, where our example extracurricular activities are configured.
1. Near the top of the `src/app.py` file (about line 23), find the `activities` variable, where our example extracurricular activities are configured.

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).

> **Tip:** Another way to bring up Copilot inline chat is: `right click` on any of the selected lines -> `Copilot` -> `Editor Inline Chat`.
> 💡 **Tip:** Another way to bring up Copilot inline chat is: `right click` on any of the selected lines -> `Copilot` -> `Editor Inline Chat`.

1. Enter the following prompt text and press enter or the **Send and Dispatch** button.

Expand Down Expand Up @@ -182,7 +172,7 @@ Nice work fixing that bug and expanding the example activities! Now let's get ou

1. In the left sidebar, select the `Source Control` tab.

> **Tip:** Opening a file from the source control area will show the differences to the original rather than simply opening it.
> 💡 **Tip:** Opening a file from the source control area will show the differences to the original rather than simply opening it.

1. Find the `app.py` file and press the `+` sign to collect your changes together in the staging area.

Expand All @@ -192,7 +182,7 @@ Nice work fixing that bug and expanding the example activities! Now let's get ou

- Typically, you would write a short description of the changes here, but now we have Copilot to help out!

1. To the right of the **Message** text box, find and click the **Generate Commit Message with Copilot** button (sparkles icon).
1. To the right of the **Message** text box, find and click the **Generate Commit Message** button (sparkles icon).

1. Press the **Commit** button and **Sync Changes** button to push your changes to GitHub.

Expand Down
Loading
Loading