Skip to content

Commit 9a63a3b

Browse files
EficodeRjpaltEficodeRjpalt
committed
Add beginner exercises
1 parent ded0c09 commit 9a63a3b

File tree

1 file changed

+298
-0
lines changed

1 file changed

+298
-0
lines changed

‎exercises/copilot-beginner-exercises.md

Lines changed: 298 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,298 @@
1+
# GitHub Copilot Exercises: Analytics Dashboard (Beginner Track)
2+
3+
Welcome to the GitHub Copilot training session! This document provides a series of exercises designed to help you practice core Copilot features within our "Developer Insights Analytics Dashboard" project.
4+
5+
The goal for this session is to build your confidence by using Copilot as a **personal tutor** and an **intelligent assistant**. You will learn to explore a professional-grade application, understand its technologies, and make safe, guided changes.
6+
7+
## Introduction & Key Concepts
8+
9+
You may have some prior experience with Copilot. Today, we will drill those skills in the context of a real-world application. Don't worry if you aren't familiar with all the technologies used—we will use Copilot to learn about them!
10+
11+
**Key Copilot Interactions:**
12+
13+
* **Chat View:** Your primary tool for asking questions (`@workspace`), explaining code (`/explain`), and generating tests (`/tests`) or documentation (`/doc`).
14+
* **Inline Chat (`Cmd+I` / `Ctrl+I`):** Perfect for making small, targeted edits to a selection of code without leaving the editor.
15+
* **Code Completion:** The "autocomplete" feature that suggests code as you type.
16+
* **Context Variables (`#`):** Used to provide specific context like files (`#file:app/main.py`) or selections (`#selection`).
17+
18+
## Essential Tips for Effective Copilot Usage
19+
20+
Apply these best practices throughout all exercises:
21+
22+
**Context is Critical**
23+
- Always use `#file:` when asking about specific files
24+
- Use `@workspace` for broad project questions
25+
- Combine context variables for more precise answers: `#file:app/main.py #file:tests/test_main.py`
26+
27+
**Iterative Learning Approach**
28+
- Don't try to understand everything at once - ask follow-up questions
29+
- Use `/explain` to understand code you didn't write
30+
- Use `/tests` and `/doc` to generate supporting materials
31+
32+
**Efficient Editing Workflow**
33+
- Use Inline Chat (`Cmd+I`/`Ctrl+I`) for small, targeted changes
34+
- Use the Chat view for planning larger changes or understanding concepts
35+
- Let autocomplete do the heavy lifting for boilerplate code
36+
37+
**Validation Process**
38+
1. Make a change with Copilot's help
39+
2. Run tests to verify nothing broke: `pytest -v`
40+
3. Test manually in the browser if it's a UI change
41+
4. Use `/tests` to generate new tests for your features
42+
43+
**Remember**: Use Copilot as your assistant, but you remain in control of your code decisions.
44+
45+
---
46+
47+
## Section 0: Understanding the Project and its Technology
48+
49+
**Goal:** Before changing any code, let's use Copilot to understand what this project does and the libraries it's built with. These exercises are crucial for building a foundation for the tasks ahead.
50+
51+
### Exercise 0.1: What is This Project?
52+
53+
* **Purpose:** To get a high-level understanding of the project's goals and structure.
54+
* **Aim:** Practice using the `@workspace` participant for broad project questions.
55+
* **Steps:**
56+
1. Open the Copilot Chat view in VS Code.
57+
2. In the chat input, ask Copilot for an overview:
58+
```
59+
@workspace /explain What is the main purpose of this project? Based on the README and the code, what are the key features it provides?
60+
```
61+
3. Review Copilot's summary. It should mention the FastAPI backend, data analysis, and the interactive frontend.
62+
63+
### Exercise 0.2: Understanding the Technology Stack
64+
65+
* **Purpose:** To learn about the main libraries used in the project.
66+
* **Aim:** Use Copilot as a tutor to explain unfamiliar technologies.
67+
* **Steps:**
68+
1. First, let's look at the project's dependencies. In the Copilot Chat, ask:
69+
```
70+
#file:requirements.txt /explain What are the main libraries listed here? Briefly explain what FastAPI, pandas, and uvicorn are used for.
71+
```
72+
2. Now, let's dive deeper into each one. Ask Copilot a follow-up question for each technology:
73+
* **For the Backend:** `Based on #file:app/main.py, what is a "path operation decorator" in FastAPI (like @app.get(...))?`
74+
* **For Data Analysis:** `Based on #file:app/data_config.py, what is a pandas DataFrame? How is it being used to read the CSV file?`
75+
* **For the Frontend:** `Based on #file:app/templates/index.html, what is Chart.js? How does it create a visual chart from data?`
76+
77+
---
78+
79+
## Section 1: Exploring the Live Application
80+
81+
**Goal:** Now that you understand the technologies, use Copilot Chat to understand how they are connected in *this specific application*.
82+
83+
### Exercise 1.1: Understanding the API Layer
84+
85+
* **Purpose:** To see how FastAPI is used to serve data to the frontend.
86+
* **Aim:** Practice using the `#file` variable to focus Copilot on a specific part of the application.
87+
* **Steps:**
88+
1. In the Copilot Chat view, type the following prompt to ask about the main application file:
89+
```
90+
#file:app/main.py /explain Explain the main API endpoints in this file. How does the `/api/analysis/technology-usage` endpoint work and what parameters does it take?
91+
```
92+
2. Analyze the response. Copilot should detail the query parameters (`source`, `column`, `top_n`) and explain that this is the core endpoint for analytics.
93+
94+
### Exercise 1.2: Understanding the Frontend and API Interaction
95+
96+
* **Purpose:** To understand how the web interface is built and how it fetches data from the API.
97+
* **Aim:** Ask Copilot to connect the dots between HTML structure, JavaScript, and the backend API.
98+
* **Steps:**
99+
1. Open `app/templates/index.html` so you can see the code.
100+
2. In the Copilot Chat view, ask:
101+
```
102+
#file:app/templates/index.html /explain How do the dropdown menus (like 'data-source-select') in this HTML file trigger an API call? Where in the JavaScript is the chart updated with the data from the API?
103+
```
104+
3. Review the explanation to understand the flow: User changes a dropdown -> `runAnalysis()` is called -> API is queried -> `createTechnologyChart()` is called.
105+
106+
### Exercise 1.3: Tracing a Function's Usage
107+
108+
* **Purpose:** To learn how different parts of the code are connected.
109+
* **Aim:** Practice using the `#usage` variable to find where a specific function is being used.
110+
* **Steps:**
111+
1. The `data_config.py` file contains the core analysis logic. Let's find where its main function is used.
112+
2. In the Copilot Chat view, type:
113+
```
114+
#usage:app.data_config.DataManager.analyze_technology_usage /explain Where is this analysis function being called in the project?
115+
```
116+
3. Copilot should point you to the `/api/analysis/technology-usage` endpoint in `app/main.py`, showing you how the API layer uses the data engine.
117+
118+
---
119+
120+
## Section 2: Making Your First Changes (Guided Implementation)
121+
122+
**Goal:** Use Copilot's code generation and editing features to make small, visible changes to the application. This section focuses on building confidence through low-risk modifications.
123+
124+
### Exercise 2.1: Changing the Chart's Appearance
125+
126+
* **Purpose:** To make a simple, visual change to the frontend.
127+
* **Aim:** Practice using **Inline Chat (`Cmd+I` / `Ctrl+I`)** for a targeted edit.
128+
* **Steps:**
129+
1. Open `app/templates/index.html`.
130+
2. Locate the `createTechnologyChart` function in the `<script>` section. Inside it, you'll find the `new Chart(...)` block.
131+
3. **Select the entire `type: 'bar',` line.**
132+
4. Press `Cmd+I` (or `Ctrl+I`) to open Inline Chat.
133+
5. Type the instruction: **`change the chart type to a pie chart`** and press Enter.
134+
6. Copilot will suggest changing `'bar'` to `'pie'`. Accept the suggestion.
135+
7. Save the file and refresh your browser. The dashboard should now display a pie chart!
136+
137+
### Exercise 2.2: Adding a Footer to the Page
138+
139+
* **Purpose:** To add a new static element to the HTML page.
140+
* **Aim:** Practice using **Code Completion** based on comments.
141+
* **Steps:**
142+
1. In `app/templates/index.html`, scroll to the bottom of the `<body>` section, just before the closing `</body>` tag.
143+
2. On a new line, type a comment:
144+
```html
145+
<!-- Add a footer with copyright information -->
146+
```
147+
3. Press Enter to move to the next line. Copilot should automatically suggest the HTML code for a footer.
148+
4. Accept the suggestion by pressing `Tab`. Save the file and refresh your browser to see the new footer.
149+
150+
### Exercise 2.3: Adding a New Filter to the Backend
151+
152+
* **Purpose:** To implement a small but complete feature that modifies the backend logic and the API.
153+
* **Aim:** Practice using autocomplete and making coordinated changes across files.
154+
* **Task:** We will add a new query parameter, `min_count`, to the `technology-usage` API to filter out technologies used by fewer than N people.
155+
* **Steps:**
156+
1. **Modify the Data Engine:**
157+
* Open `app/data_config.py` and find the `analyze_technology_usage` function definition.
158+
* Add a new parameter to the function signature: `min_count: int = 0`.
159+
* Inside the function, after the line `sorted_techs = sorted(tech_counts.items(), key=lambda x: x[1], reverse=True)[`, add a new line and a comment: `# Filter out technologies with a count less than min_count`.
160+
* Let Copilot's **autocomplete** generate the filtering logic for you. Accept it.
161+
2. **Update the API Endpoint:**
162+
* Open `app/main.py` and find the `/api/analysis/technology-usage` endpoint function.
163+
* Add `min_count: int = 0` to its function signature as a query parameter.
164+
* Update the call to `data_manager.analyze_technology_usage` to pass the new `min_count` value through.
165+
3. **Test Your Change:**
166+
* Run the application and open your browser to the dashboard.
167+
* Manually add `&min_count=20000` to the URL and press Enter.
168+
* Observe how the chart updates to show fewer technologies.
169+
170+
---
171+
172+
## Section 3: Documenting and Testing Your Work
173+
174+
**Goal:** Use Copilot to automatically generate documentation and tests for the feature you just added.
175+
176+
### Exercise 3.1: Generating Documentation
177+
178+
* **Purpose:** To quickly create developer documentation for your new feature.
179+
* **Aim:** Practice using the `/doc` slash command.
180+
* **Steps:**
181+
1. Go back to `app/data_config.py`.
182+
2. Highlight the entire `analyze_technology_usage` function that you modified.
183+
3. Open the Chat View and type:
184+
```
185+
#selection /doc Generate an updated docstring for the selected function. Make sure to describe the new `min_count` parameter.
186+
```
187+
4. Copilot will generate a complete docstring. Review it, then copy and paste it into your code.
188+
189+
### Exercise 3.2: Generating a New Test Case
190+
191+
* **Purpose:** To ensure your new feature works as expected and is protected against future changes.
192+
* **Aim:** Practice using the `/tests` slash command to create a targeted unit test.
193+
* **Steps:**
194+
1. Open the Chat View.
195+
2. Provide Copilot with the context of your test file and your application logic:
196+
```
197+
#file:tests/test_main.py #file:app/main.py /tests
198+
199+
Generate a new pytest function for `test_main.py`. The test should call the `/api/analysis/technology-usage` endpoint with the `min_count` query parameter set to a high value (e.g., 5000). It should verify that:
200+
1. The response status code is 200
201+
2. The response contains fewer technologies than a call without min_count
202+
3. All returned technology counts are >= the min_count value
203+
```
204+
3. Copy the generated test function into `tests/test_main.py`.
205+
4. Open your terminal and run `pytest`. Your new test should now run and pass!
206+
207+
---
208+
209+
## Section 4: Bonus Exercises (Advanced Practice)
210+
211+
**Goal:** For learners who want to explore more advanced Copilot features and get deeper into the codebase.
212+
213+
### Exercise 4.1: Understanding the Data Pipeline
214+
215+
* **Purpose:** To trace how data flows through the entire application.
216+
* **Aim:** Practice using multiple context variables together.
217+
* **Steps:**
218+
1. In the Copilot Chat view, ask:
219+
```
220+
#file:app/data_config.py #file:app/main.py /explain
221+
222+
Trace the data flow: starting from when a zip file is placed in the data/ folder, how does it become available for analysis in the web interface? Include the automatic extraction, data source registration, and API availability.
223+
```
224+
2. Follow up with a more specific question about the data extraction process:
225+
```
226+
#file:app/data_config.py How does the _ensure_data_extracted method work? What happens if I add a new zip file while the application is running?
227+
```
228+
229+
### Exercise 4.2: Exploring Error Handling
230+
231+
* **Purpose:** To understand how the application handles edge cases and errors.
232+
* **Aim:** Practice using Copilot to understand defensive programming patterns.
233+
* **Steps:**
234+
1. Ask Copilot about error handling:
235+
```
236+
#file:app/main.py /explain What are all the different types of errors this API can return? How does it validate user input and handle missing data?
237+
```
238+
2. Look at a specific error case:
239+
```
240+
#file:app/data_config.py What happens if a CSV file is corrupted or a required column is missing? How does the application handle this gracefully?
241+
```
242+
243+
### Exercise 4.3: Performance Considerations
244+
245+
* **Purpose:** To learn about performance optimization in data analysis applications.
246+
* **Steps:**
247+
1. Ask about performance:
248+
```
249+
@workspace What are the potential performance bottlenecks in this application when dealing with large CSV files? How could caching or optimization be implemented?
250+
```
251+
252+
---
253+
254+
## Section 4: Bonus Exercises (Advanced Practice)
255+
256+
**Goal:** For learners who want to explore more advanced Copilot features and get deeper into the codebase.
257+
258+
### Exercise 4.1: Understanding the Data Pipeline
259+
260+
* **Purpose:** To trace how data flows through the entire application.
261+
* **Aim:** Practice using multiple context variables together.
262+
* **Steps:**
263+
1. In the Copilot Chat view, ask:
264+
```
265+
#file:app/data_config.py #file:app/main.py /explain
266+
267+
Trace the data flow: starting from when a zip file is placed in the data/ folder, how does it become available for analysis in the web interface? Include the automatic extraction, data source registration, and API availability.
268+
```
269+
2. Follow up with a more specific question about the data extraction process:
270+
```
271+
#file:app/data_config.py How does the _ensure_data_extracted method work? What happens if I add a new zip file while the application is running?
272+
```
273+
274+
### Exercise 4.2: Exploring Error Handling
275+
276+
* **Purpose:** To understand how the application handles edge cases and errors.
277+
* **Aim:** Practice using Copilot to understand defensive programming patterns.
278+
* **Steps:**
279+
1. Ask Copilot about error handling:
280+
```
281+
#file:app/main.py /explain What are all the different types of errors this API can return? How does it validate user input and handle missing data?
282+
```
283+
2. Look at a specific error case:
284+
```
285+
#file:app/data_config.py What happens if a CSV file is corrupted or a required column is missing? How does the application handle this gracefully?
286+
```
287+
288+
### Exercise 4.3: Performance Considerations
289+
290+
* **Purpose:** To learn about performance optimization in data analysis applications.
291+
* **Steps:**
292+
1. Ask about performance:
293+
```
294+
@workspace What are the potential performance bottlenecks in this application when dealing with large CSV files? How could caching or optimization be implemented?
295+
```
296+
297+
Congratulations! You have successfully used GitHub Copilot to understand the technologies in a professional application, explore its structure, and extend it with a new feature. You've practiced the most important commands and workflows to help you in your daily development tasks.
298+

0 commit comments

Comments
 (0)