Exercise: Getting Started with GitHub Copilot

[github-actions]

Getting Started with GitHub Copilot

👋 Hey there @dsirkka! Welcome to your Skills exercise!

Welcome to the exciting world of GitHub Copilot! 🚀 In this exercise, you'll unlock the potential of this AI-powered coding assistant to accelerate your development process. Let's dive in and have some fun exploring the future of coding together! 💻✨

As you complete each step, I will respond in the comments to:

• check your work and give feedback
• share next steps
• occasionally share tips
• congratulate you when you finish!

Good luck and have fun!
- Mona

[github-actions]

Step 1: Hello Copilot

Welcome to your "Getting Started with GitHub Copilot" exercise! 🤖

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. 🎻 ⚽️ ♟️

What is GitHub Copilot?

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.

Your most common interactions will likely be:

• 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, 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.

Tip

You can learn more about current and upcoming features in the GitHub Copilot Features documentation. You can also select different models and make your own extensions, but that's for a different lesson!

How can I use GitHub Copilot?

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.

⌨️ Activity: Get a project intro from Copilot Chat

Let's start up our development environment, use copilot to learn a bit about the project, and then give it a test run.

1. Left-click the below button to open the Create Codespace page in a new tab. Use the default configuration.

   

2. Confirm the Repository field is your copy of the exercise, not the original, then click the green Create Codespace button.

   • ✅ Your copy: /dsirkka/skills-getting-started-with-github-copilot
   • ❌ Original: /skills/getting-started-with-github-copilot

3. Wait a moment for Visual Studio Code to load in your browser.

4. In the left sidebar, click the extensions tab and verify that the GitHub Copilot and Python extensions are installed and enabled.

   

5. At the top of VS Code, locate and click the Copilot icon to open a Copilot Chat panel.

   

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

7. Enter the below prompt to ask Copilot to introduce you to the project.

   

   @workspace Please briefly explain the structure of this project.
   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.

   What is @workspace?

   Nice job noticing the details, but let's just use it for now. 🤓 We promise to explain in the next step.

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

   

9. We want to see our webpage running in a browser, so let's find the url and port. If it isn't visible, expand the lower panel and select the Ports tab.

10. In the list, find port 8000 and the related link. Hover over the link and select the Open in browser icon.

    

⌨️ Activity: Use Copilot to help remember a terminal command 🙋

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.

2. In the bottom panel, select the Terminal tab. 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.

3. Within the new terminal window use the keyboard shortcut Ctrl + I (windows) or Cmd + I (mac) to bring up Copilot's Terminal Inline Chat.

4. Let's ask Copilot to help us remember a command we have forgotten: creating a branch and publishing it.

   

   Hey copilot, how can I create and publish a new Git branch?
   

   Tip: This is a simple example, but Copilot is great at providing more tailored commands that might involve loops, pattern matching, file modification, and more! Don't be afraid to ask Copilot for a suggestion. Just remember it is a suggestion and you should always verify it first to be safe.

5. Copilot probably gave us a command like the following. Rather than manually modify it, let's respond back to tell Copilot to use a particular name.

   git checkout -b {new_branch_name}
   git push -u origin {new_branch_name}

   

   Awesome! Thanks, Copilot! Let's use the
   branch name "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.

6. Now that we are happy with the command, press the Run button to let Copilot run it for us. No need to copy and paste!

7. After a moment, look in the VS Code lower status bar, on the left, to see the active branch. It should now say accelerate-with-copilot. If so, you are all done with this step!

8. Now that your branch is pushed to GitHub, Mona should already be busy checking your work. Give her a moment and keep watch in the comments. You will see her respond with progress info and the next lesson.

Having trouble? 🤷

If you don't get feedback, here are some things to check:

• Make sure your created the branch with the exact name accelerate-with-copilot. No prefixes or suffixes.
• Make sure the branch was indeed published to your repository.

[github-actions]

🎉🎉🎉 Nice work! Everything is perfect! 🎉🎉🎉
Preparing content for step 2! One moment... 🤓

[github-actions]

Step 2: Getting work done with Copilot

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!

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.

But before we do that, let's learn a bit more about Copilot! 🧑‍🚀

How does Copilot work?

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

• How do we provide context?: In our coding environment, Copilot will automatically consider nearby code and open tabs. If you are using chat, you can also explicitly refer to files.

• What model should we pick?: For our exercise, it shouldn't matter too much. Experimenting with different models is part of the fun! That's another lesson! 🤖

• How do I make prompts?: Being explicit and clear helps Copilot do the best job. But unlike some traditional systems, you can always clarify your direction with followup prompts.

Tip

There several other ways to supplement Copilot's knowledge and capabilities like chat participants, chat variables, slash commands, and MCP tools.

⌨️ Activity: Use Copilot to fix our registration bug 🐛

1. Let's ask Copilot to suggest where our bug might be coming from. Open the Copilot Chat panel in Ask mode and ask the following.

   

   @workspace Students are able to register twice for an activity.
   Where could this bug be coming from?
   

   What is @workspace?

   Great question! This is a specialized chat participant that will explore the project repository and try to include relevant additional context.

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

   2. Scroll near the bottom of the file and find the signup_for_activity method.

   3. Find the comment line that describes adding a student. Above this is where it seems logical to do our registration check.

   4. Enter the below comment and press enter to go to the next line. After a moment, temporary shadow text will appear with a suggestion from Copilot! Nice! 🎉

      # Validate student is not already signed up

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

   Example Results

   
   

   Copilot is growing every day and may not always produce the same results. If you are unhappy with the suggestions, here is an example of a valid suggestion result we produced during the making of this exercise. You can use it to continue forward.

   @app.post("/activities/{activity_name}/signup")
   def signup_for_activity(activity_name: str, email: str):
      """Sign up a student for an activity"""
      # Validate activity exists
      if activity_name not in activities:
         raise HTTPException(status_code=404, detail="Activity not found")
   
      # Get the activity
      activity = activities[activity_name]
   
      # Validate student is not already signed up
      if email in activity["participants"]:
        raise HTTPException(status_code=400, detail="Student is already signed up")
   
      # Add student
      activity["participants"].append(email)
      return {"message": f"Signed up {email} for {activity_name}"}

⌨️ Activity: Let Copilot generate sample data 📋

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.

2. Near the top (about line 23), find the activities variable, where our example extracurricular activities are configured.

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

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

   

   Add 2 more sports related activities, 2 more artistic
   activities, and 2 more intellectual activities.
   

5. After a moment, Copilot will directly start making changes to the code. The changes will be stylized differently to make any additions and removals easy to identify. Take a moment to inspect and then press the Accept button.

   Example Results

   
   

   Copilot is growing every day and may not always produce the same results. If you are unhappy with the suggestions, here is an example result we produced during the making of this exercise. You can use it to continue forward, if having trouble.

   # In-memory activity database
   activities = {
      "Chess Club": {
         "description": "Learn strategies and compete in chess tournaments",
         "schedule": "Fridays, 3:30 PM - 5:00 PM",
         "max_participants": 12,
         "participants": ["michael@mergington.edu", "daniel@mergington.edu"]
      },
      "Programming Class": {
         "description": "Learn programming fundamentals and build software projects",
         "schedule": "Tuesdays and Thursdays, 3:30 PM - 4:30 PM",
         "max_participants": 20,
         "participants": ["emma@mergington.edu", "sophia@mergington.edu"]
      },
      "Gym Class": {
         "description": "Physical education and sports activities",
         "schedule": "Mondays, Wednesdays, Fridays, 2:00 PM - 3:00 PM",
         "max_participants": 30,
         "participants": ["john@mergington.edu", "olivia@mergington.edu"]
      },
      "Basketball Team": {
         "description": "Competitive basketball training and games",
         "schedule": "Tuesdays and Thursdays, 4:00 PM - 6:00 PM",
         "max_participants": 15,
         "participants": []
      },
      "Swimming Club": {
         "description": "Swimming training and water sports",
         "schedule": "Mondays and Wednesdays, 3:30 PM - 5:00 PM",
         "max_participants": 20,
         "participants": []
      },
      "Art Studio": {
         "description": "Express creativity through painting and drawing",
         "schedule": "Wednesdays, 3:30 PM - 5:00 PM",
         "max_participants": 15,
         "participants": []
      },
      "Drama Club": {
         "description": "Theater arts and performance training",
         "schedule": "Tuesdays, 4:00 PM - 6:00 PM",
         "max_participants": 25,
         "participants": []
      },
      "Debate Team": {
         "description": "Learn public speaking and argumentation skills",
         "schedule": "Thursdays, 3:30 PM - 5:00 PM",
         "max_participants": 16,
         "participants": []
      },
      "Science Club": {
         "description": "Hands-on experiments and scientific exploration",
         "schedule": "Fridays, 3:30 PM - 5:00 PM",
         "max_participants": 20,
         "participants": []
      }
   }

⌨️ Activity: Use Copilot to describe our work 💬

Nice work fixing that bug and expanding the example activities! Now let's get our work committed and pushed to GitHub, again with the help of Copilot!

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.

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

   

3. Above the list of staged changes, find the Message text box, but don't enter anything for now.

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

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

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

6. Wait a moment for Mona to check your work, provide feedback, and share the next lesson.

Having trouble? 🤷

If you don't get feedback, here are some things to check:

• Make sure your pushed the src/app.py file changes to the branch accelerate-with-copilot.

[github-actions]

Step 2 - Passed ✅

Status	Description
✅ - Pass	New activities added to src/app.py. We found 9 activities (minimum 4 required)

[github-actions]

🎉🎉🎉 Nice work! Everything is perfect! 🎉🎉🎉
Preparing content for step 3! One moment... 🤓

[github-actions]

Step 3: Getting work done even faster with Copilot Edits

In our previous steps, we used features of Copilot that require more hands-on guidance and they produced mostly localized results. Now, we will explore Copilot Edits, a feature that allows working more holistically on our repo.

Copilot - Edit Mode is an AI-powered code editing session to make changes across multiple files using natural language, and applies the edits directly in the editor, where you can review them in-place, with the full context of the surrounding code.

Key features

• Multi-file Editing: Copilot Edits can make changes across multiple files in your workspace.
• Iterative Workflow: Designed for fast iteration, allowing you to review, accept, or discard AI-generated code.
• In-place Edits: Shows generated code directly in your editor, providing a code review-like flow.
• Working Set: Allows you to define which files the edits should be applied to.

How it works

1. Set Context: Select files to be in the working set.
2. Provide Instructions: Use natural language to describe the required changes.
3. Review Changes: See proposed changes in-place in your code.
4. Accept or Discard: Review each suggested edit and choose which to keep.
5. Iterate: If needed, provide follow-up instructions to refine the changes.

⌨️ Activity: Use Copilot to add a new feature! 🚀

1. If the Copilot Chat panel is not visible, please reopen it.

2. At the bottom of Copilot Chat window, use the dropdown to switch to Edit mode.

   

3. Open the files related to our webpage then drag each editor window (or file) to the chat panel, informing Copilot to use them as context.

   • src/static/app.js
   • src/static/index.html
   • src/static/styles.css

   Tip: You can also use the Add Context... button to provide other sources of context items, like a GitHub issue, the entire codebase, or the results of a terminal window.

4. Ask Copilot to update our project to display the current participants of activities. Wait a moment for the edit suggestions to arrive and be applied.

   

   Hey Copilot, can you please edit the activity cards to add a participants section.
   It will show what participants that are already signed up for that activity as a bulleted list.
   Remember to make it pretty!
   

   • An extra icon has appeared next to the file names and open editor windows indicating they have suggested edits.

   • A suggested edits panel has appeared in the bottom right of the editor window providing controls to jump to the recommended changes.

     
   Need help? 🤷

   
   

   Remember, to add the relevant files to the working set.

   

5. Before we simply accept the changes, please check our website again and verify everything is updated as expected. Here is an example of an updated activity card. You may need to restart the app or refresh the page.

   

   Note: Your activity card may look different. Copilot won't always produce the same results.

   Need help? 🤷

   
   If the website is not loading, here are some things to check.

   • Restart the VS Code Debugger to make sure the latest version of the website is served.
   • If you forgot the url, or closed the window, please review step 1.
   • Try hard refreshing the webpage or opening in a private window so it downloads a fresh copy.

6. Now that we have confirmed our changes are good, use the panel to cycle through each suggested edit and press Keep to apply the change.

   Tip: You can accept the changes directly, modify them, or provide additional instruction to refine them using the chat interface.

7. With our new feature complete, please commit and push the changes to GitHub.

8. Wait a moment for Mona to check your work, provide feedback, and share the final lesson. Almost done!

9. (optional) If you would like an ungraded bonus step to briefly introduce Agent mode, add an issue comment asking @professortocat about Copilot Agent mode. 🚀

   Hey @professortocat, Agent mode sounds pretty cool. Can you please tell me more about it?

Having trouble? 🤷

If you don't get feedback, here are some things to check:

• Make sure your commit the changes in the src/static/ directory to the branch accelerate-with-copilot and pushed/synchronized to GitHub.
• If Mona found a mistake, simply make a correction and push your changes again. Mona will check your work as many times as needed.

[github-actions]

Step 3 - Passed ✅

Status	Description
✅ - Pass	Check app.js for participant info
✅ - Pass	Participant styling updated in styles.css

[github-actions]

🎉🎉🎉 Nice work! Everything is perfect! 🎉🎉🎉
Preparing content for step 4! One moment... 🤓

[github-actions]

Step 4: Using GitHub Copilot within a pull request

Congratulations! You are finished with coding for this exercise (and VS Code). Now it's time to merge our work. 🎉 To wrap up, let's learn about two limited-access Copilot features that can speed up our pull requests!

Copilot pull request summaries

Typically, you would review your notes and commit messages then summarize them for your pull request description. This may take some time, especially if commit messages are inconsistent or code is not documented well. Fortunately, Copilot can consider all changes in the pull request and provide the important highlights, and with references too!

Note

This feature is not available in GitHub Copilot Free. [docs]

Copilot code review

More eyes on our work is always useful so let's ask Copilot to do a first pass before we do a normal peer review process. Copilot is great at catching common mistakes that are fixed by simple adjustments, but please remember to use it responsibly.

Note

This feature is not available in GitHub Copilot Free. [docs]

⌨️ Activity: Summarize and review a PR with Copilot

Both Copilot pull request summaries and Copilot code review have limited access, so this activity is mostly optional. If you have access, Mona will gladly check your work though! If not, you can skip the optional steps.

1. In a web browser, open another tab and navigate to your exercise repository.

2. You might notice a notification banner suggesting to create a new pull request. Click that or use the Pull Requests tab at the top to create a new pull request. Please use the following details:

   • base: main
   • compare: accelerate-with-copilot
   • title: Add registration validation and more activities

3. (Optional) In the Add a description area, enter edit mode if needed, then click the Copilot actions icon and Summary action. After a moment, Copilot will add a description. 📝

   

4. (Optional) In the right side information panel at the top, locate the Reviewers section and click the Request button next to a Copilot icon. Wait a moment for Copilot to add a review comment to your pull request!

   

   Tip: Notice a log entry that Copilot was requested for a review.

5. At the bottom, press the Merge pull request button. Nice work! You are all done! 🎉

6. Wait a moment for Mona to check your work, provide feedback, and post a final review of this lesson!

[github-actions]

Please, follow the steps above.
I'll watch your progress in the background to provide feedback. 🧐

[github-actions]

🎉🎉🎉 Nice work! Everything is perfect! 🎉🎉🎉
Now, let's do a quick review!

[github-actions]

Review

Congratulations, you've completed this exercise and learned a lot about GitHub Copilot!

Here's a recap of your accomplishments:

• Set up your GitHub Codespace and environment.
• Learned how to use Copilot inline suggestions, Chat, and Edits.
• Used Copilot to generate commit messages and pull request summaries.
• Learned how to request Copilot to review your code.

What's next?

• Continue working on the project
  • Use Copilot to add a function for students to unregister from an activity.
  • Use Copilot to fix issues found during a pull request review.
  • Use Copilot to generate tests and documentation.
  • Use Copilot with different models.
• Check out the other GitHub Skills exercises.
  • Learn how to Integrate MCP with Copilot
  • Try building your first GitHub Copilot Extension

Check out these resources to learn more about GitHub Copilot :

• Are you not getting the responses you want from Copilot? Learn prompt engineering
• Explore GitHub Copilot Slash Commands.
• See what other features are available GitHub Copilot Features.
• Take a look at the GitHub Copilot Documentation.

[github-actions]

Congratulations @dsirkka! You finished the exercise! 🎉🎉🎉

We've updated the repository with a couple changes to highlight your success!

Return to the repository home page to see your progress!