|
1 | | -# Add the filter feature |
| 1 | +# Bonus content |
| 2 | + |
| 3 | +## Add the filter feature |
2 | 4 |
|
3 | 5 | We've explored how we can use GitHub Copilot to explore our project and to provide context to ensure the suggestions we receive are to the quality we expect. Now let's turn our attention to putting all this prep work into action by generating new code! We'll use GitHub Copilot to aid us in adding functionality to our website. |
4 | 6 |
|
5 | | -## Scenario |
| 7 | +### Scenario |
6 | 8 |
|
7 | 9 | The website currently lists all dogs in the database. While this was appropriate when the shelter only had a few dogs, as time has gone on the number has grown and it's difficult for people to sift through who's available to adopt. |
8 | 10 |
|
9 | 11 | The shelter has asked you to add filters to the website to allow a user to select a breed of dog and only display dogs which are available for adoption. |
10 | 12 |
|
11 | | -## Copilot Edits |
| 13 | +### Copilot Edits |
12 | 14 |
|
13 | 15 | Previously we utilized Copilot chat, which is great for working with an individual file or asking questions about our code. However, many updates necessitate changes to multiple files throughout a codebase. Even a seemingly basic change to a webpage likely requires updating HTML, CSS and JavaScript files. Copilot Edits allows you to modify multiple files at once. |
14 | 16 |
|
15 | 17 | With Copilot Edits, you will add the files which need to be updated to the context. Once you provide the prompt, Copilot Edits will begin the updates across all files in the context. It also has the ability to create new files or add files to the context as it deems appropriate. |
16 | 18 |
|
17 | | -## Add the filters to the dog list page |
| 19 | +### Add the filters to the dog list page |
18 | 20 |
|
19 | 21 | Adding the filters to the page will require updating a minimum of two files - the Flask backend and the Svelte frontend. Fortunately, Copilot Edits can update multiple files! Let's get our page updated with the help of Copilot Edits. |
20 | 22 |
|
@@ -48,7 +50,7 @@ Adding the filters to the page will require updating a minimum of two files - th |
48 | 50 |
|
49 | 51 | Copilot begins generating the suggestions! |
50 | 52 |
|
51 | | -## Reviewing the suggestions |
| 53 | +### Reviewing the suggestions |
52 | 54 |
|
53 | 55 | Unlike our prior examples where we worked with an individual file, we're now working with changes across multiple files - and maybe multiple sections of multiple files. Fortunately, Copilot Edits has functionality to help streamline this process. |
54 | 56 |
|
|
89 | 91 | > A [simple one](https://github.com/github-samples/pets-workshop/tree/msbuild-25/content/prompts/add-feature-simple.md), that is simple, with some ambiguity that leaves some space for interpretation but it gets the job done. Another one which is more [verbose](https://github.com/github-samples/pets-workshop/tree/msbuild-25/content/prompts/add-feature-verbose.md) and leaves not a lot of space for interpretation. |
90 | 92 | > Take a look at the differences and see which one you like better. |
91 | 93 |
|
92 | | -## Summary |
| 94 | +### Summary |
93 | 95 |
|
94 | 96 | You've worked with GitHub Copilot to add new features to the website - the ability to filter the list of dogs. With the help of Copilot Edits, you updated multiple files across the project, and iteratively built the desired functionality. |
95 | 97 |
|
96 | | -## Workshop review |
97 | | - |
98 | | -Over the course of the workshop you explored the core functionality of GitHub Copilot. You saw how to use code completion to get inline suggestions, chat participants to explore your project, Copilot instructions to add context, and Copilot Edits to update multiple files. But there is a lot more in GitHub Copilot (just to name a few): |
99 | | -- [Agent mode][copilot-agent] |
100 | | -- [MCP Servers support][MCP-server] |
101 | | -- [Extend Copilot][Extensibility-VS-Code] |
102 | | -- Copilot features available in GitHub |
103 | | - - [GitHub Copilot code review][code-review] |
104 | | - - [Extensions][copilot-extensions] |
105 | | - - [Answers about issues, PRs, discussions, files, commits, etc][asking-github-copilot-questions] |
106 | | - |
107 | | -There is no one right way to use GitHub Copilot. Continue to explore and try different prompts to discover what works best for your workflow and how GitHub Copilot can aid your productivity. |
108 | | - |
109 | | -We have a bonus section for you, if you want to continue your explorations. |
110 | | - |
111 | 98 | ## Resources |
112 | 99 |
|
113 | 100 | - [Asking GitHub Copilot questions in your IDE][copilot-ask] |
|
0 commit comments