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