Skip to content

Commit e2e0991

Browse files
feat: Initial version of the introductory course to GitHub Copilot
0 parents  commit e2e0991

21 files changed

+1469
-0
lines changed

Diff for: .devcontainer/devcontainer.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "Python 3",
3+
"image": "mcr.microsoft.com/vscode/devcontainers/python:3.9",
4+
"features": {
5+
"ghcr.io/devcontainers/features/python:1": {
6+
"version": "3.13"
7+
}
8+
},
9+
"postCreateCommand": "pip install -r requirements.txt",
10+
"customizations": {
11+
"vscode": {
12+
"extensions": ["GitHub.copilot"]
13+
}
14+
}
15+
}

Diff for: .github/steps/1-preparing.md

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
## Step 1: Preparing
2+
3+
Welcome to **"Accelerate with GitHub Copilot"** exercise! :robot:
4+
5+
In this exercise, you will be using different GitHub Copilot features to work on a website that allows students of Mergington High School to sign up for extracurricular activities :student:
6+
7+
### What is GitHub Copilot?
8+
9+
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.
10+
11+
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/)
12+
13+
### How can I use GitHub Copilot?
14+
15+
### :keyboard: Activity: Getting to know basic Copilot features :robot:
16+
17+
1. Right-click the below button to open the **Create Codespace** page in a new tab.
18+
19+
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/{{full_repo_name}}?quickstart=1)
20+
21+
- The free tier of Codespaces that comes with all GitHub accounts is fine, assuming you still have minutes available.
22+
- The default Codespace settings are fine.
23+
- This repository will provide the additional settings and files for making your extension.
24+
25+
1. Confirm the **Repository** field is your copy of the exercise, not the original, then click the green **Create Codespace** button.
26+
27+
- ✅ Your copy: `/{{{full_repo_name}}}`
28+
- ❌ Original: `/skills/accelerate-with-copilot`
29+
30+
1. Wait a moment for Visual Studio Code to load in your browser.
31+
32+
1. Click the extensions sidebar tab and verify that `GitHub Copilot` extension is installed.
33+
34+
<!-- TODO: Add screenshot -->
35+
36+
1. Search for the Copilot Icon on the top right section of your editor.
37+
Open up Copilot Chat and ask Copilot to introduce you to the project, to do that type `/explain` in the Chat Window.
38+
<!-- TODO: Add screenshot -->
39+
1. Run the project by using `Run and Debug` section in the left sidebar of VS Code. Then head to the ports tab and open the application available on port 8000
40+
41+
<!-- TODO: Add screenshot -->
42+
43+
1. Great! Now that you know what we will be working with, let's have your first interaction with Copilot.
44+
45+
Open up a terminal in VS Code so you won't interrupt the debug session you just started.
46+
47+
Next, `Right click` within the newly created terminal window, then click `Copilot` => `Terminal Inline Chat`.
48+
49+
This feature can help you with any shell commands, in our case let's ask Copilot
50+
51+
```txt
52+
Hey copilot, how can I create and publish a new git branch? The branch should be named accelerate-with-copilot
53+
```
54+
55+
Copilot will provide you with a list of commands that it thinks you should run. If something feels off, you can Ask Copilot to fix or customize the commands further and when you are ready, press `Run` and Copilot will run the commands for you in your terminal!
56+
57+
1. Wait a moment for the bot to check your work. You will see a comment with progress info and the next lesson.
58+
59+
<details>
60+
<summary>Having trouble? 🤷</summary><br/>
61+
62+
If you don't get feedback, here are some things to check:
63+
64+
- Make sure your created the branch with the exact name `accelerate-with-copilot`. No prefixes or suffixes.
65+
66+
</details>

Diff for: .github/steps/2-first-introduction.md

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
## Step 2: First interaction with Copilot
2+
3+
There are many Copilot Features and interaction modes. In this step you will get to use some of them:
4+
5+
- **Code completions**: As you type, Copilot suggests code completions directly in your editor. Can generate entire functions based on comments or existing code context.
6+
- **Copilot Chat**: A chat interface that lets you ask coding-related questions. You will see different modes in which you can use Copilot chat
7+
8+
> [!NOTE]
9+
> You can see see all currently available GitHub Copilot features that are live or in preview in the documentation. See [GitHub Copilot Features](https://docs.github.com/en/copilot/about-github-copilot/github-copilot-features)
10+
11+
**What is context?**: GitHub Copilot context refers to comments or existing code that Copilot uses to understand your intent and generate relevant code suggestions.
12+
13+
### :keyboard: Activity: Getting to know basic Copilot features :robot:
14+
15+
1. Open `src/app.py` file and let's start working on improving our High School API :robot:!.
16+
17+
To start off - you will add additional validation to the `signup_for_activity` endpoint. Right now there is no logic to prevent users to sign to the same activity twice.
18+
19+
Within the code of `signup_for_activity` endpoint, write a comment to provide Copilot context of what it is you are trying to do
20+
21+
```python
22+
# Validate student is not already signed
23+
```
24+
25+
Then press `Enter` to go to newline and Copilot will provide you with autocompletion suggestions!
26+
27+
Press `Tab` to accept your first Copilot suggestion :tada: :robot:
28+
29+
> **TIP**: If you would like to see other suggestions, instead of pressing `Tab`, hover over the suggestion and a small panel will show up. On it's right side click the three dots `...` and select `Open Completions Panel`
30+
31+
32+
1. Open up Copilot Chat window and ask Copilot to help you create a completely new endpoint to the API
33+
34+
```txt
35+
Hey Copilot! Create a endpoint that will allow students to sign themselves out from an activity
36+
```
37+
38+
On the bottom part of Copilot Chat you can choose what AI Model Copilot should use. Different models can provide different results.
39+
40+
1. You can use Copilot Chat inline to stay in the flow. It's often used when you are dealing with problems or want to understand a specific part of the code.
41+
42+
Hold down left button of your mouse and select this part of the file.
43+
44+
```python
45+
current_dir = Path(__file__).parent
46+
app.mount("/static", StaticFiles(directory=os.path.join(Path(__file__).parent,
47+
"static")), name="static")
48+
```
49+
50+
Then `Right click` =>`Copilot` => `Editor Inline Chat` and use the `/explain` function.
51+
52+
1. In the `Source Control` section on the left sidebar of VS Code.
53+
1. Click the `+` sign next to `app.py` file to stage your changes.
54+
1. On the right side of the commit message window click :sparkles: to generate commit message with copilot
55+
1. Commit and sync your changes with the automatically generated message
56+
57+
1. Wait a moment for the bot to check your work. You will see a comment with progress info and the next lesson.
58+
59+
<details>
60+
<summary>Having trouble? 🤷</summary><br/>
61+
62+
If you don't get feedback, here are some things to check:
63+
64+
- Make sure your pushed the `src/app.py` file changes to the branch `accelerate-with-copilot`.
65+
66+
</details>

Diff for: .github/steps/3-copilot-edits.md

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
## Step 3: GitHub Copilot Edits
2+
3+
[Copilot Edits](https://code.visualstudio.com/docs/copilot/copilot-edits) works as an AI-powered code editing session to make changes across multiple files using natural language.
4+
5+
Copilot Edits applies the edits directly in the editor, where you can review them in-place, with the full context of the surrounding code.
6+
7+
**Key features:**
8+
9+
- **Multi-file Editing**: Copilot Edits can make changes across multiple files in your workspace.
10+
- **Iterative Workflow**: Designed for fast iteration, allowing you to review, accept, or discard AI-generated code.
11+
- **In-place Edits**: Shows generated code directly in your editor, providing a code review-like flow.
12+
- **Working Set**: Allows you to define which files the edits should be applied to.
13+
14+
15+
**How it works:**
16+
17+
- **Set Context**: Define the working set by selecting files.
18+
- **Provide Instructions**: Use natural language to tell Copilot what changes you need.
19+
- **Review Changes**: See proposed changes in-place in your code
20+
- **Accept or Discard**: Review each AI-generated edit and choose which changes to keep
21+
- **Iterate**: Provide follow-up instructions and refine the changes as needed
22+
23+
### :keyboard: Activity: Let's add a feature!
24+
25+
1. In the top left part of Copilot Chat window, switch the Copilot Edits.
26+
1. Add the following files to the working set. Use the attach button in the bottom left corner of Copilot Edits view.
27+
- `src/static/app.js`
28+
- `src/static/index.html`
29+
- `src/static/styles.css`
30+
1. Ask Copilot to add a new feature to the website.
31+
32+
```txt
33+
Hey Copilot. Edit the area where activities are listed on the website to show what participants are already signed for that activity.
34+
```
35+
36+
Copilot will generate inline edits for you. You can accept them or if this wasn't what you were hoping for, provide Copilot additional instructions.
37+
38+
> **TIP:** On the bottom part of Copilot Edits you can choose what AI Model Copilot should use. Different models can provide different results.
39+
40+
1. Head back to the website and see your changes!
41+
<details>
42+
<summary>Having trouble? 🤷</summary><br/>
43+
44+
Remember, you can access the website url from the `ports` tab.
45+
46+
If the website is not available, check that it is still running. You can run in through the left sidebar's `Run and Debug` section.
47+
48+
</details>
49+
50+
1. Commit and push the changes.
51+
1. Head back to your repository on github.com and open up a pull request to the `main` branch.
52+
<!-- TODO: Add link -->
53+
54+
1. Wait a moment for the bot to check your work. You will see a comment with progress info and the next lesson.
55+
56+
<details>
57+
<summary>Having trouble? 🤷</summary><br/>
58+
59+
If you don't get feedback, here are some things to check:
60+
61+
- Make sure your pushed the changes in the `src/static/` directory to the branch `accelerate-with-copilot`.
62+
- Make sure you opened a pull request to the `main` branch
63+
64+
</details>

Diff for: .github/steps/4-copilot-on-github.md

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
## Step 4: Using GitHub Copilot within a pull request
2+
3+
Congratulations! You are finished with coding for this exercise :tada:
4+
5+
Now, let's see what Copilot can do for you in the context of your pull request
6+
7+
### :keyboard: Activity: Working with GitHub Copilot on your Pull Request :robot:
8+
9+
1. Open up the pull request you created.
10+
1. Let's use Copilot to generate a summary of the pull request! :memo:
11+
1. Click the three dots `...` on top right of the pull request description box and click `Edit`
12+
1. Click the Copilot icon and trigger the `Summary` generation action
13+
1. Copilot will generate a descriptive summary based on the changes made in the pull request :robot:
14+
1. On the right side of the pull request view, in the `Reviewers` section, request Copilot code review.
15+
1. Sit back a minute and wait for Copilot to comment on your pull request!
16+
17+
1. Wait a moment for the bot to check your work. You will see a comment with progress info and the next lesson.
18+
19+
<details>
20+
<summary>Having trouble? 🤷</summary><br/>
21+
22+
If you don't get feedback, here are some things to check:
23+
24+
- Make sure your requested review from Copilot
25+
26+
</details>
27+

Diff for: .github/steps/x-review.md

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
## Review
2+
3+
_Congratulations, you've completed this exercise and learned a lot about GitHub Copilot!_
4+
5+
<img src="https://octodex.github.com/images/jetpacktocat.png" alt=celebrate width=200 align=right>
6+
7+
Here's a recap of your accomplishments:
8+
9+
- Set up your GitHub Codespace and environment.
10+
- Learned how to use Copilot Autosuggestions, Chat and Edits.
11+
- Used Copilot to generate commit messages and pull request summaries
12+
- Learned how to request Copilot to review your code
13+
14+
### What's next?
15+
16+
- Continue working on the project
17+
- Use Copilot to fix issues found by GitHub Copilot in pull request review
18+
- Use Copilot to generate tests and documentation
19+
- Try using different AI Models
20+
- Check out the other [GitHub Skills exercises](https://skills.github.com).
21+
- Try building your first [GitHub Copilot Extension](https://github.com/skills/your-first-extension-for-github-copilot)
22+
23+
24+
Check out these resources to learn more about GitHub Copilot :
25+
- Are you not getting the responses you want from Copilot? [Learn prompt engineering](https://docs.github.com/en/copilot/using-github-copilot/copilot-chat/prompt-engineering-for-copilot-chat)
26+
- Explore GitHub Copilot [Slash Commands](https://docs.github.com/en/copilot/using-github-copilot/copilot-chat/github-copilot-chat-cheat-sheet?tool=vscode)
27+
- See what other features are available [GitHub Copilot Features](https://docs.github.com/en/copilot/about-github-copilot/github-copilot-features)
28+
- Take a look at the GitHub Copilot [Documentation](https://docs.github.com/en/copilot)

0 commit comments

Comments
 (0)