Skip to content

Commit e6e2d47

Browse files
tspascoaltspascoal
committed
Add bonus labs
1 parent ccf738b commit e6e2d47

File tree

2 files changed

+208
-0
lines changed

2 files changed

+208
-0
lines changed

‎content/ignite/6-add-feature-bonus.md‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
# Add the filter feature
2+
3+
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+
5+
## Scenario
6+
7+
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+
9+
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+
11+
## Copilot Edits
12+
13+
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+
15+
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+
17+
## Add the filters to the dog list page
18+
19+
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+
21+
> [!NOTE]
22+
> Because Copilot Edits works best with auto-save enabled, we'll activate it. As we'll explore a little later in this exercise, Copilot Edits provides powerful tools to undo any changes you might not wish to keep.
23+
24+
1. [] Return to Visual Studio Code.
25+
2. [] Close any tabs you may have open in your VS Code to ensure Copilot chat has an empty context.
26+
3. [] Enable Auto Save by selecting **File** > **Auto Save**. (top left menu)
27+
4. [] Open or switch to GitHub Copilot Chat.
28+
5. [] Switch to edit mode by selecting **Edit** in the chat mode dropdown at the bottom of Chat view (should be currently **Ask**)
29+
- If asked **Changing the chat mode mode will end your current session. Would you like to continue?** click **Yes**
30+
- If you were already on Copilot Edit mode, press **+** to start a new chat.
31+
6. [] If available, select **Claude 3.5 Sonnet** from the list of available models
32+
7. [] Click **Add Context...** in the chat window.
33+
8. [] Select **server/app.py** and **client/src/components/DogList.svelte** files (you need to select **Add context** for each file)
34+
35+
> [!TIP]
36+
> If you type the file names after clicking **Add context**, they will show up in the filter. You can also drag the files or right click file in explorer and select **Copilot -> Add File to Chat**)
37+
38+
9. [] Ask Copilot to generate the update you want to the page, which is to add filters for both dog breed and if dogs are available for adoption. Use your own phrasing, ensuring the following requirements are met:
39+
- A dropdown list should be provided with all breeds
40+
- A checkbox should be available to only show available dogs
41+
- The page should automatically refresh whenever a change is made
42+
43+
> [!NOTE]
44+
> You should use your own phrasing when generating the prompt. As highlighted previously, part of the exercise is to become comfortable creating prompts for GitHub Copilot. One key tip is it's always good to provide more guidance to ensure you get the code you are looking for.
45+
46+
> [!NOTE]
47+
> If you are asked to **Enable Claude 3.5 Sonnet for all clients** click on **Enable** button.
48+
49+
Copilot begins generating the suggestions!
50+
51+
## Reviewing the suggestions
52+
53+
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+
55+
GitHub Copilot will propose the following changes:
56+
57+
- Update the endpoint to list all dogs to accept parameters for breed and availability.
58+
- Update the webpage to include the dropdown list and checkbox.
59+
60+
As the code is generated, you will notice the files are displayed using an experience similar to diff files, with the new code highlighted in green and old code highlighted in red (by default).
61+
62+
If you open an individual file, you can keep or undo changes by using the buttons provided.
63+
64+
![Screenshot of keep/undo interface for an individual file](./images/copilot-edits-keep-undo-file.png)
65+
66+
You can also keep or undo all changes made.
67+
68+
![Screenshot of keep/discard interface on the chat window](./images/copilot-edits-keep-undo-global.png)
69+
70+
And
71+
72+
1. [] Review the code suggestions to ensure they behave the way you expect them to, making any necessary changes. Once you're satisfied, you can select **Keep** on the files individually or in Copilot Chat to accept all changes.
73+
2. [] Open the page at +++http://localhost:4321+++ to see the updates!
74+
3. [] Run the Python tests by running the following commands (you might want to open a new terminal)
75+
- `./venv/Scripts/Activate.ps1`
76+
- `python -m unittest discover -s server` ensure all tests pass (3 tests should pass)
77+
4. [] If any changes are needed, explain the required updates to GitHub Copilot and allow it to generate the new code.
78+
79+
> [!IMPORTANT]
80+
> Working iteratively a normal aspect of coding with an AI pair programmer. You can always provide more context to ensure Copilot understands, make additional requests, or rephrase your original prompts. To aid you in working iteratively, you will notice undo and redo buttons towards the top of the Copilot Edits interface, which allow you to move back and forth across prompts.
81+
>
82+
> ![Screenshot of the undo/redo buttons](./images/copilot-edits-history.png)
83+
84+
5. [] Confirm the functionality works as expected, then select **Keep** to accept all the changes.
85+
6. Optional: Disable Auto Save by unselecting **File** > **Auto Save**.
86+
87+
> [!HINT]
88+
> If you are stuck or just want to see alternatives way of prompting we have provided two prompts
89+
> 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+
> Take a look at the differences and see which one you like better.
91+
92+
## Summary
93+
94+
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+
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+
## Resources
112+
113+
- [Asking GitHub Copilot questions in your IDE][copilot-ask]
114+
- [Copilot Chat cookbook][copilot-cookbook]
115+
- [Copilot Edits][copilot-edits]
116+
- [Copilot Agent][copilot-agent]
117+
118+
[copilot-ask]: https://docs.github.com/en/copilot/using-github-copilot/copilot-chat/asking-github-copilot-questions-in-your-ide
119+
[copilot-cookbook]: https://docs.github.com/en/copilot/copilot-chat-cookbook
120+
[copilot-edits]: https://code.visualstudio.com/docs/copilot/copilot-edits
121+
[copilot-agent]: https://code.visualstudio.com/docs/copilot/chat/chat-agent-mode
122+
[MCP-server]: https://code.visualstudio.com/docs/copilot/chat/mcp-servers
123+
[Extensibility-VS-Code]: https://code.visualstudio.com/docs/copilot/copilot-extensibility-overview
124+
[code-review]: https://docs.github.com/en/copilot/using-github-copilot/code-review/using-copilot-code-review?tool=webui
125+
[copilot-extensions]: https://github.com/features/copilot/extensions
126+
[asking-github-copilot-questions]: https://docs.github.com/en/enterprise-cloud@latest/copilot/using-github-copilot/copilot-chat/asking-github-copilot-questions-in-github

‎content/ignite/7-add-filter-bonus.md‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
# Bonus content
2+
3+
4+
## Overview of Copilot Agent Mode
5+
6+
With chat agent mode in Visual Studio Code, you can use natural language to define a high-level task and to start an agentic code editing session to accomplish that task. In agent mode, Copilot **autonomously** plans the work needed and determines the relevant files and context. It then makes edits to your codebase and invokes tools to accomplish the request you made. Agent mode monitors the outcome of edits and tools and iterates to resolve any issues that arise.
7+
8+
> [!IMPORTANT]
9+
> While Copilot autonomously determines the operations necessary to complete the requested task, as the developer you are always in charge. You will work with Copilot to ensure everything is completely correctly, reading and reviewing the code. You will also want to continue to follow proper DevOps practices, including code reviews, testing, security scans, etc.
10+
11+
Why would you use agent mode instead of edit mode?
12+
13+
- **Edit scope**: agent mode autonomously determines the relevant context and files to edit. In edit mode, you need to specify the context yourself.
14+
- **Task complexity**: agent mode is better suited for complex tasks that require not only code edits but also the invocation of tools and terminal commands.
15+
- **Duration**: agent mode involves multiple steps to process a request, so it might take longer to get a response. For example, to determine the relevant context and files to edit, determine the plan of action, and more.
16+
- **Self-healing**: agent mode evaluates the outcome of the generated edits and might iterate multiple times to resolve intermediate issues.
17+
- **Request quota**: in agent mode, depending on the complexity of the task, one prompt might result in many requests to the backend.
18+
19+
### How it works
20+
21+
![How agent mode works](./images/copilot-agent-mode-how-it-works.png)
22+
23+
## Add themes to the Tailspin Shelter website
24+
25+
In this section, you will use Copilot's agent mode to add themes to the Tailspin Shelter website. You will be able to select a theme and apply it to the website.
26+
27+
1. [] Return to Visual Studio Code.
28+
2. [] Close any tabs you may have open in your VS Code to ensure Copilot chat has an empty context.
29+
3. [] Select the **+** icon towards the top of Copilot chat to begin a new chat.
30+
4. [] Select agent mode, by selecting **Agent** (just like you did **Edit** before) in the model selector dropdown at the bottom of the chat window.
31+
5. [] Select one of models (some may not be available) **Claude 3.5 Sonnet**, **Claude 3.7 Sonnet** or **GPT-4.1**
32+
6. [] Open the `content/prompts/fun-add-themes.md` file
33+
7. [] Copy the content of the prompt
34+
8. [] Paste the content in the copilot prompt input
35+
9. The agent mode will take it's time, since it searches by itself the relevant files to modify, and then does multiple passes including talking with himself to refine the task at hand
36+
10. [] While Agent is doing it's thing, take the opportunity to examine the content of prompt that was used.
37+
11. [] When the agent is done (you no longer see any spinners and the thumb up/down icons will be visible), examine the prompt response
38+
open a browser to see the results
39+
- Open the page at ++http://localhost:4321++ to see the updates!
40+
- Examine the changes made to the files if you like
41+
- Was it good? If you are not happy with the results, you can refine the prompt by crafting extra prompts in the chat to improve the end results. Don't start a new session, it's an interactive process.
42+
43+
You _may_ have gotten something like this for the Terminal Theme (generated with claude 3.7)
44+
45+
![Tailspin Shelter Terminal Classic theme](images/tail-spin-shelter-terminal-theme.png)
46+
47+
> [!IMPORTANT]
48+
> Because LLMs are probabilistic, not deterministic, the exact code generated can vary. The above is a representative example. If your code is different, that's just fine as long as it works!
49+
50+
51+
## Play a bit with Copilot
52+
53+
You've made it to the end of the one hour workshop. Congratulations! You've explored the core skills to help you get the most out of GitHub Copilot. From here you can explore various challenges on your own, and see how GitHub Copilot can support you as you continue developing.
54+
55+
The suggestions listed here are exactly that - suggestions. You're free to come up with your own scenarios or features you think the application should have.
56+
57+
You'll also notice there aren't step-by-step instructions here. You've already seen how you can use Copilot to aid you in development. Part of the challenge put forth with these extra suggestions is to apply what you've learned to create code!
58+
59+
## Potential next steps
60+
61+
Here's some ideas of how you could continue to grow and build upon what you've done:
62+
63+
- Return to the API endpoints you updated previously in Flask and add unit tests.
64+
65+
> [!Knowledge]
66+
> The **/tests** slash command can give you a little hand or you can also do it edit mode.
67+
68+
- Add paging support to the full list of dogs or any results page with more than 5 results.
69+
- Add a form to allow a user to apply to adopt a dog if the dog is available.
70+
- Add a form to allow users to register a dog they found.
71+
72+
We have provided you some prompts in [prompts][github-prompts-path] folder, which you can use directly as inspiration for your explorations.
73+
74+
> [!TIP]
75+
> These prompts are meant to be used as one shot, but if have prompts that can be are generic, reusable prompt are a great way to share prompts with the team members. They can be placed in a well know folder and be invoked directly in the Copilot Chat by referencing them.
76+
> Learn more about [reusable prompts in Visual Studio Code][vscode-prompts]
77+
> [!Knowledge] To use a prompt, select **Add Context..** in the chat and then select **Prompt**
78+
> Learn more about [prompts in Visual Studio Code][vscode-prompts]
79+
80+
81+
[vscode-prompts]: https://aka.ms/vscode-ghcp-prompt-snippets
82+
[github-prompts-path: https://github.com/github-samples/pets-workshop/tree/msbuild-25/content/prompts/

0 commit comments

Comments
 (0)