Skip to content

Commit f6d1285

Browse files
digitalcraftlabsdigitalcraftlabs
authored
Initial commit
0 parents  commit f6d1285

26 files changed

+3221
-0
lines changed

‎.devcontainer/devcontainer.json

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"image": "mcr.microsoft.com/devcontainers/universal:2-linux",
3+
"hostRequirements": {
4+
"cpus": 4
5+
},
6+
"name": "OctoFit App codespace",
7+
"postCreateCommand": "sudo chmod +x ./.devcontainer/post_create.sh && ./.devcontainer/post_create.sh",
8+
"postStartCommand": "sudo chmod +x ./.devcontainer/post_start.sh && ./.devcontainer/post_start.sh",
9+
"customizations": {
10+
"vscode": {
11+
"extensions": [
12+
"github.copilot@insiders", // GitHub Copilot + Copilot Chat insiders
13+
"markdown-lint.markdownlinter",
14+
"ms-python.python", // Python extension
15+
"ms-python.vscode-pylance" // Pylance extension for Python
16+
]}
17+
},
18+
"forwardPorts": [
19+
3000, // React default port
20+
8000, // Django default port
21+
27017 // MongoDB default port
22+
],
23+
"portAttributes": {
24+
"3000": { // React port attributes
25+
"label": "octofit-tracker",
26+
"requireLocalPort": true
27+
},
28+
"8000": { // Django port attributes
29+
"label": "octofit-rest-api",
30+
"requireLocalPort": true
31+
}
32+
}
33+
}

‎.devcontainer/post_create.sh

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
#!/bin/bash
2+
# This script is run after the container is created.
3+
# It is used to install any additional dependencies or perform any setup tasks.
4+
5+
sudo cp --force ./.devcontainer/welcome-message.txt /usr/local/etc/vscode-dev-containers/first-run-notice.txt

‎.devcontainer/post_start.sh

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
#!/bin/bash
2+
# This script is run after the container is started.
3+
4+
# open ports for Python Django server and React app
5+
gh cs ports visibility 8000:public -c $CODESPACE_NAME
6+
gh cs ports visibility 3000:public -c $CODESPACE_NAME

‎.devcontainer/welcome-message.txt

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
👋 Welcome to building a full stack fitness application with GitHub Copilot agent mode!
2+
We are thrilled that you are here and we hope you are excited to explore the capabilities of Copilot!
3+
🏋🏽🔥💪🏼🎧 As the gym teacher of Mergington High School you have been tasked with building a fitness app for your students.
4+
📃 GitHub Copilot documentation: https://docs.github.com/en/copilot

‎.github/steps/1-preparing.md

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
## Step 1: Hello GitHub Copilot agent mode
2+
3+
Welcome to your **"Build applications with GitHub Copilot agent mode"** exercise! :robot:
4+
5+
In this exercise, you will be using GitHub Copilot agent mode to build an application that tracks your fitness goals and progress. 🏋️‍♂️🏃‍♀️💪
6+
7+
### What is GitHub Copilot agent mode?
8+
9+
Copilot agent mode can create apps from scratch, perform refactorings across multiple files, write and run tests, and migrate legacy code to modern frameworks. It can automatically generate documentation, integrate new libraries, or help answer questions about a complex codebase. Copilot agent mode helps you be super-productive by having an AI collaborator that understands the workspace. It can orchestrate your inner development flow while keeping you in control.
10+
11+
Copilot agent mode operates in a more autonomous and dynamic manner to achieve the desired outcome. To process a request, Copilot loops over the following steps and iterates multiple times as needed:
12+
13+
Determines the relevant context and files to edit autonomously.
14+
Offers both code changes and terminal commands to complete the task. For example, Copilot might compile code, install packages, run tests, and more.
15+
Monitors the correctness of code edits and terminal command output and iterates to remediate issues.
16+
17+
> 💡 **Tip:** You can learn more about GitHub Copilot agent mode in the [Use agent mode documentation](https://code.visualstudio.com/docs/copilot/copilot-edits#_use-agent-mode-preview).
18+
19+
### :keyboard: Activity: Getting to know your GitHub Copilot agent mode development environment
20+
21+
1. Right-click the below button to open the **Create Codespace** page in a new tab.
22+
23+
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/{{full_repo_name}}?quickstart=1)
24+
25+
- The free tier of Codespaces that comes with all GitHub accounts is fine, assuming you still have minutes available.
26+
- The default Codespace settings are fine.
27+
28+
1. Confirm the **Repository** field is your copy of the exercise, not the original, then click the green **Create Codespace** button.
29+
30+
- ✅ Your copy: `/{{{full_repo_name}}}`
31+
- ❌ Original: `/skills/build-applications-w-copilot-agent-mode`
32+
33+
1. Wait a moment for Visual Studio Code to load.
34+
1. You may need to switch to VS Code insiders edition in the codespace since agent mode was released on 4/4 as a phased rollout to users.
35+
<img width="323" alt="vscode-insiders-light" src="https://github.com/user-attachments/assets/8ff8868b-9120-4055-8449-175e85552ba2" />
36+
37+
1. Before we continue let's take a moment to familiarize ourselves with the project folder.
38+
39+
- The left navigation bar is where you can access the file explorer, debugger, and search.
40+
- The lower panel (Ctrl+J) shows the debugger output, allows running terminal commands, and allows configuring the web service ports.
41+
- Our docs folder contains the another sample application repository that will give Copilot agent mode context to build your application. More on that in the next steps!
42+
43+
1. At the top of VS Code, locate and click the Copilot icon to open a Copilot Chat panel.
44+
45+
<img width="150" alt="image" src="https://github.com/user-attachments/assets/5e64db46-95cb-415d-badc-b6b8677f10c1" />
46+
47+
1. If this is your first, time using GitHub Copilot, you will have to accept the usage terms to continue.
48+
- Click the **Accept** button to continue.
49+
- If you are using Copilot Chat for the first time, you will also have to accept the usage terms to continue.
50+
- Click the **Accept** button to continue.
51+
52+
### :keyboard: Activity: Use Copilot agent mode to create a branch and publish it. 🙋
53+
54+
Great work! Now that we are familiar with the app and we know it works, let's ask copilot for help starting a branch so we can do some customizing.
55+
56+
1. If not already there, return to VS Code.
57+
58+
1. Open the GitHub Copilot Chat window if not already open.
59+
2. Copy and paste the following prompt in the GitHub Copilot Chat and select the **Agent** instead of **Ask** or **Edit** from the drop down where you are inserting the prompt.
60+
61+
<img src="https://github.com/user-attachments/assets/e172f5c0-bc2a-45a9-a301-9af8bfbd6a2e" width=30% height=30%>
62+
63+
64+
> 🪧 **Note:**
65+
- Do not change the model from GPT-4o this will be an optional activity at the end of the course.
66+
- Keep in mind that the Copilot agent mode is conversational so it may ask you questions and you can ask it questions too.
67+
- Wait a moment for the Copilot to respond and press the continue button to execute commands presented by Copilot agent mode.
68+
69+
1. Let's ask Copilot agent mode to help us remember the command and create the branch `build-octofit-app` and publishing it
70+
71+
> ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=flat-square&logo=github%20copilot&labelColor=512a97&color=ecd8ff)
72+
>
73+
> ```prompt
74+
> Hey copilot, how can I create and publish a new Git branch called build-octofit-app?
75+
> ```
76+
77+
78+
Copilot agent mode will respond and ask if you if you want to enable it to run the command. Respond with **Yes**</br>
79+
80+
<img src=https://github.com/user-attachments/assets/8dafaa5f-80db-41ea-a189-b5d603c11d63 width=40% height=40%>
81+
82+
83+
1. Now that we are happy with the command, press the `Continue` button to let Copilot agent mode run it for us. No need to copy and paste!
84+
85+
1. After a moment, look in the VS Code lower status bar, on the left, to see the active branch. It should now say `build-octofit-app`. If so, you are all done with this step!
86+
87+
1. Now that your branch is pushed to GitHub, Mona should already be busy checking your work. Give her a moment and keep watch in the comments. You will see her respond with progress info and the next lesson.
88+
89+
<details>
90+
<summary>Having trouble? 🤷</summary><br/>
91+
92+
If you don't get feedback, here are some things to check:
93+
94+
- Make sure your created the branch with the exact name `build-octofit-app`. No prefixes or suffixes.
95+
- Make sure the branch was indeed published to your repository.
96+
97+
</details>

‎.github/steps/2-application-initial-setup.md

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
## Step 2: The initial application setup: Directory structure, Python requirements, and MongoDB
2+
3+
In this step, we will accomplish the following:
4+
5+
- Create the octofit-tracker application directory structure.
6+
- Create the octofit-tracker/backend and octofit-tracker/frontend directories.
7+
- Create the octofit-tracker/backend/requirements.txt file.
8+
9+
1. Open all files in the `docs` folder and keep this file open in the editor throughout this exercise.
10+
1. agent mode uses `mona-high-school-fitness-tracker.md` and `octofit_story.md` as a reference to create the application
11+
2. Copy and paste the following prompt(s) in the GitHub Copilot Chat and select the "Agent" instead of "Ask" or "Edit" from the drop down where you are inserting the prompt.
12+
13+
<img src="https://github.com/user-attachments/assets/e172f5c0-bc2a-45a9-a301-9af8bfbd6a2e" width=40% height=40%>
14+
15+
> 🪧 **Note:**
16+
- Do not change the model from GPT-4o this will be an optional activity at the end of the course.
17+
- Keep in mind that the Copilot agent mode is conversational so it may ask you questions and you can ask it questions too.
18+
- Wait a moment for the Copilot to respond and press the continue button to execute commands presented by Copilot agent mode.
19+
- Keep files created and updated by Copilot agent mode until it is finished.
20+
- Agent mode has the ability to evaluate your code base and execute commands and add/refactor/delete parts of your code base and automatically self heal if it or you makes a mistake in the process.
21+
22+
### :keyboard: Activity: Prompt for GitHub Copilot in agent mode to start the creation of our application
23+
24+
> ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=flat-square&logo=github%20copilot&labelColor=512a97&color=ecd8ff)
25+
>
26+
> ```prompt
27+
> Let's take the following step by step and generate instructions in this order and execute the commands.
28+
> Use docs/mona-high-school-fitness-tracker.md as a guide for the project structure and requirements.
29+
>
30+
> 1. Understand the story of creating the fitness application from the docs/octofit_story.md file.
31+
> 2. Create the initial directory structure for the octofit-tracker application octofit-tracker/backend, octofit-tracker/frontend.
32+
> 3. Setup the backend python virtual environment, octofit-tracker/backend/requirements.txt based on docs/mona-high-school-fitness-tracker.md, and install required packages.
33+
>
34+
> Don't proceed with the next activity until all of these steps are completed.
35+
>```
36+
>
37+
38+
> ❕ **Important:** Once the above activity installs all the required packages, proceed to the next activity.
39+
40+
### :keyboard: Activity: Let's install MongoDB
41+
42+
> ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=flat-square&logo=github%20copilot&labelColor=512a97&color=ecd8ff)
43+
>
44+
> ```prompt
45+
> Based on the example monafit tracker app in the docs/mona-high-school-fitness-tracker.md file and use octofit as the name for mergington's high schools app. > Let's install MongoDB.
46+
>
47+
> 1. Install MongoDB and make sure the command is complete.
48+
>
49+
> Don't proceed with the next activity until all of these steps are completed.
50+
>```
51+
52+
> ❕ **Important:**
53+
- If the command completes in the terminal but agent mode shows it is still running click stop.
54+
- You may need to paste the prompt again in agent mode.
55+
56+
### :keyboard: Activity: Let's start and verify MongoDB is running
57+
58+
> ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=flat-square&logo=github%20copilot&labelColor=512a97&color=ecd8ff)
59+
>
60+
> ```prompt
61+
> Based on the example monafit tracker app in the docs/mona-high-school-fitness-tracker.md file and use octofit as the name for mergington's high schools app. > Let's start and verify MongoDB is running.
62+
>
63+
> 1. Start the MongoDB service.
64+
> 2. Verify the MongoDB service running.
65+
>
66+
> Don't proceed with the next activity until all of these steps are completed.
67+
>```
68+
69+
> ❕ **Important:**
70+
- If the command completes in the terminal but agent mode shows it is still running click stop.
71+
- You may need to paste the prompt again in agent mode.
72+
73+
1. Now that we have created the app directory structure, setup a Python virtual environment, and Copilot agent mode helped write a requirements.txt to install all project dependencies let's check our changes in to our `build-octofit-app` branch.
74+
75+
1. With our new changes complete, please **commit** and **push** the changes to GitHub.
76+
77+
1. Wait a moment for Mona to check your work, provide feedback, and share the next lesson so we can keep working!
78+
79+
<details>
80+
<summary>Having trouble? 🤷</summary><br/>
81+
82+
If you don't get feedback, here are some things to check:
83+
84+
- Make sure your commit changes were made for the following file to the branch `build-octofit-app` and pushed/synchronized to GitHub:
85+
- `octofit-tracker/backend/requirements.txt` and it contains the package `Django==4.1`
86+
- If Mona found a mistake, simply make a correction and push your changes again. Mona will check your work as many times as needed.
87+
88+
</details>

0 commit comments

Comments
 (0)