|
| 1 | +## Step 2: Getting work done with Copilot |
| 2 | + |
| 3 | +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! |
| 4 | + |
| 5 | +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! |
| 6 | + |
| 7 | +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. |
| 8 | + |
| 9 | +But before we do that, let's learn a bit more about Copilot! 🧑🚀 |
| 10 | + |
| 11 | +### How does Copilot work? |
| 12 | + |
| 13 | +In short, you can think of Copilot like a very focused 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). |
| 14 | + |
| 15 | +- **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. |
| 16 | + |
| 17 | +- **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! 🤖 |
| 18 | + |
| 19 | +- **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. |
| 20 | + |
| 21 | +### :keyboard: Activity: Use Copilot to fix our registration bug :bug: |
| 22 | + |
| 23 | +1. Let's ask Copilot to suggest where our bug might be coming from. Open the **Copilot Chat** panel and ask the following. |
| 24 | + |
| 25 | + > <img width="13px" src="https://github.com/user-attachments/assets/98fd5d2e-ea29-4a4a-9212-c7050e177a69" /> **Prompt** |
| 26 | + > |
| 27 | + > ```prompt |
| 28 | + > @workspace Students are able to register twice for an activity. |
| 29 | + > Where could this bug be coming from? |
| 30 | + > ``` |
| 31 | +
|
| 32 | +1. Now that we know the issue is in the `src/appy.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. |
| 33 | +
|
| 34 | + 1. In VS Code, select the file **Explorer tab** to show the project files and open the `src/app.py` file. |
| 35 | +
|
| 36 | + 1. Scroll near the bottom of the file and find the `signup_for_activity` method. |
| 37 | +
|
| 38 | + 1. Find the comment line that describes adding a student. Above this is where it seems logical to do our registration check. |
| 39 | +
|
| 40 | + 1. 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! :tada: |
| 41 | +
|
| 42 | + ```python |
| 43 | + # Validate student is not already signed up |
| 44 | + ``` |
| 45 | +
|
| 46 | + 1. Press `Tab` to accept Copilot's suggestion and convert the shadow text to code. |
| 47 | +
|
| 48 | + > **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. |
| 49 | +
|
| 50 | + <details> |
| 51 | + <summary>Example Results</summary><br/> |
| 52 | +
|
| 53 | + 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. |
| 54 | +
|
| 55 | + ```python |
| 56 | + @app.post("/activities/{activity_name}/signup") |
| 57 | + def signup_for_activity(activity_name: str, email: str): |
| 58 | + """Sign up a student for an activity""" |
| 59 | + # Validate activity exists |
| 60 | + if activity_name not in activities: |
| 61 | + raise HTTPException(status_code=404, detail="Activity not found") |
| 62 | +
|
| 63 | + # Get the activity |
| 64 | + activity = activities[activity_name] |
| 65 | +
|
| 66 | + # Validate student is not already signed up |
| 67 | + if email in activity["participants"]: |
| 68 | + raise HTTPException(status_code=400, detail="Student is already signed up") |
| 69 | +
|
| 70 | + # Add student |
| 71 | + activity["participants"].append(email) |
| 72 | + return {"message": f"Signed up {email} for {activity_name}"} |
| 73 | + ``` |
| 74 | +
|
| 75 | + </details> |
| 76 | + |
| 77 | +### :keyboard: Activity: Let Copilot generate sample data 📋 |
| 78 | + |
| 79 | +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** |
| 80 | + |
| 81 | +**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. |
| 82 | + |
| 83 | +1. If not already open, open the `src/app.py` file. |
| 84 | + |
| 85 | +1. Near the top (about line 23), find the `activities` variable, where our example extracurricular activies are configured. |
| 86 | + |
| 87 | +1. 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). |
| 88 | + |
| 89 | + > **Tip:** Another way to bring up Copilot inline chat is: `right click` on any of the selected lines -> `Copilot` -> `Editor Inline Chat`. |
| 90 | +
|
| 91 | +1. Enter the following prompt text and press enter or the **Send and Dispatch** button. |
| 92 | + |
| 93 | + > <img width="13px" src="https://github.com/user-attachments/assets/98fd5d2e-ea29-4a4a-9212-c7050e177a69" /> **Prompt** |
| 94 | + > |
| 95 | + > ```prompt |
| 96 | + > Add 2 more sports related activities, 2 more artistic |
| 97 | + > activities, and 2 more intellectual activities. |
| 98 | + > ``` |
| 99 | +
|
| 100 | +1. 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. |
| 101 | +
|
| 102 | +<details> |
| 103 | +<summary>Example Results</summary><br/> |
| 104 | +
|
| 105 | +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. |
| 106 | +
|
| 107 | +```python |
| 108 | +# In-memory activity database |
| 109 | +activities = { |
| 110 | + "Chess Club": { |
| 111 | + "description": "Learn strategies and compete in chess tournaments", |
| 112 | + "schedule": "Fridays, 3:30 PM - 5:00 PM", |
| 113 | + "max_participants": 12, |
| 114 | + |
| 115 | + }, |
| 116 | + "Programming Class": { |
| 117 | + "description": "Learn programming fundamentals and build software projects", |
| 118 | + "schedule": "Tuesdays and Thursdays, 3:30 PM - 4:30 PM", |
| 119 | + "max_participants": 20, |
| 120 | + |
| 121 | + }, |
| 122 | + "Gym Class": { |
| 123 | + "description": "Physical education and sports activities", |
| 124 | + "schedule": "Mondays, Wednesdays, Fridays, 2:00 PM - 3:00 PM", |
| 125 | + "max_participants": 30, |
| 126 | + |
| 127 | + }, |
| 128 | + "Basketball Team": { |
| 129 | + "description": "Competitive basketball training and games", |
| 130 | + "schedule": "Tuesdays and Thursdays, 4:00 PM - 6:00 PM", |
| 131 | + "max_participants": 15, |
| 132 | + "participants": [] |
| 133 | + }, |
| 134 | + "Swimming Club": { |
| 135 | + "description": "Swimming training and water sports", |
| 136 | + "schedule": "Mondays and Wednesdays, 3:30 PM - 5:00 PM", |
| 137 | + "max_participants": 20, |
| 138 | + "participants": [] |
| 139 | + }, |
| 140 | + "Art Studio": { |
| 141 | + "description": "Express creativity through painting and drawing", |
| 142 | + "schedule": "Wednesdays, 3:30 PM - 5:00 PM", |
| 143 | + "max_participants": 15, |
| 144 | + "participants": [] |
| 145 | + }, |
| 146 | + "Drama Club": { |
| 147 | + "description": "Theater arts and performance training", |
| 148 | + "schedule": "Tuesdays, 4:00 PM - 6:00 PM", |
| 149 | + "max_participants": 25, |
| 150 | + "participants": [] |
| 151 | + }, |
| 152 | + "Debate Team": { |
| 153 | + "description": "Learn public speaking and argumentation skills", |
| 154 | + "schedule": "Thursdays, 3:30 PM - 5:00 PM", |
| 155 | + "max_participants": 16, |
| 156 | + "participants": [] |
| 157 | + }, |
| 158 | + "Science Club": { |
| 159 | + "description": "Hands-on experiments and scientific exploration", |
| 160 | + "schedule": "Fridays, 3:30 PM - 5:00 PM", |
| 161 | + "max_participants": 20, |
| 162 | + "participants": [] |
| 163 | + } |
| 164 | +} |
| 165 | +``` |
| 166 | +
|
| 167 | +</details> |
| 168 | + |
| 169 | +### :keyboard: Activity: Use Copilot to describe our work 💬 |
| 170 | + |
| 171 | +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! |
| 172 | + |
| 173 | +1. In the left sidebar, select the `Source Control` tab. |
| 174 | + |
| 175 | + > **Tip:** Opening a file from the source control area will show the differences to the original rather than simply opening it. |
| 176 | +
|
| 177 | +1. Find the `app.py` file and press the `+` sign to collect your changes together in the staging area. |
| 178 | + |
| 179 | +  |
| 180 | + |
| 181 | +1. Above the list of staged changes, find the **Message** text box, but **don't enter anything** for now. |
| 182 | + |
| 183 | + - Typically, you would write a short description of the changes here, but now we have Copilot to help out! |
| 184 | + |
| 185 | +1. To the right of the **Message** text box, find and click the **Generate Commit Message with Copilot** button (sparkles icon). |
| 186 | + |
| 187 | +1. Press the **Commit** button and **Sync Changes** button to push your changes to GitHub. |
| 188 | + |
| 189 | +1. Wait a moment for Mona to check your work, provide feedback, and share the next lesson. |
| 190 | + |
| 191 | +<details> |
| 192 | +<summary>Having trouble? 🤷</summary><br/> |
| 193 | + |
| 194 | +If you don't get feedback, here are some things to check: |
| 195 | + |
| 196 | +- Make sure your pushed the `src/app.py` file changes to the branch `accelerate-with-copilot`. |
| 197 | + |
| 198 | +</details> |
0 commit comments