Skip to content

Commit 1b13817

Browse files
PagelsRPagelsR
authored
Initial commit
0 parents  commit 1b13817

19 files changed

+1820
-0
lines changed

‎.devcontainer/devcontainer.json‎

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

‎.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: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
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]
18+
> 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).
19+
20+
> [!NOTE]
21+
Copilot agent mode is a preview feature available in [Visual Studio Code Insiders](https://code.visualstudio.com/insiders).
22+
23+
Your most common interactions with Gitub Copilot will likely be:
24+
25+
- **Inline suggestions**: As you type, Copilot uses the nearby context to suggest code directly in your editor. This will be a familiar interaction if you have used code completion tools like [Intellisense](https://code.visualstudio.com/docs/editor/intellisense), except that the completions may be entire functions.
26+
- **Copilot Chat**: A dedicated chat panel that lets you ask coding related questions. This will feel familiar if you have used online AI assistant chats. The big difference however, is that your project files will provide automatic context to provide tailored responses.
27+
- **Copilot Edits**: Similar to Copilot Chat, but less conversational and more big picture or goal oriented.
28+
- **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:
29+
- Determines the relevant context and files to edit autonomously.
30+
- Offers both code changes and terminal commands to complete the task. For example, Copilot might compile code, install packages, run tests, and more.
31+
- Monitors the correctness of code edits and terminal command output and iterates to remediate issues.
32+
33+
> [!TIP]
34+
> You can learn more about current and preview features in the [GitHub Copilot Features](https://docs.github.com/en/copilot/about-github-copilot/github-copilot-features) documentation.
35+
36+
> [!TIP]
37+
> You can also select different [models](https://docs.github.com/en/github-models) and [extensions](https://github.com/features/copilot/extensions), but that's for a different lesson!
38+
39+
Before we get started on developing an application in GitHub Copilot agent mode, we have to configure our development environment.
40+
Fortunately, this has been bootstrapped for us with a pre-configured [Codespace](https://github.com/features/codespaces).
41+
42+
This development environment includes:
43+
44+
- React.js frontend.
45+
- Django REST Framework backend.
46+
- MongoDB database.
47+
- The Node.js runtime.
48+
- The Python runtime.
49+
- forwardPorts
50+
- 3000, // React default port
51+
- 8000, // Django default port
52+
- 27017 // MongoDB default port
53+
- VS Code extensions:
54+
- GitHub Copilot/Copilot Chat insiders
55+
- Python
56+
- Markdown linter
57+
- [VS Code](https://code.visualstudio.com/) launch settings to start your application in debug mode.
58+
59+
### :keyboard: Activity: Getting to know your GitHub Copilot agent mode development environment
60+
61+
1. Right-click the below button to open the **Create Codespace** page in a new tab.
62+
63+
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/{{full_repo_name}}?quickstart=1)
64+
65+
- The free tier of Codespaces that comes with all GitHub accounts is fine, assuming you still have minutes available.
66+
- The default Codespace settings are fine.
67+
68+
1. Confirm the **Repository** field is your copy of the exercise, not the original, then click the green **Create Codespace** button.
69+
70+
- ✅ Your copy: `/{{{full_repo_name}}}`
71+
- ❌ Original: `/continuous-copilot/build-applications-w-copilot-agent-mode`
72+
73+
1. Wait a moment for Visual Studio Code to load.
74+
75+
1. Before we continue let's take a moment to familiarize ourselves with the project folder.
76+
77+
- The left navigation bar is where you can access the file explorer, debugger, and search.
78+
- The lower panel (Ctrl+J) shows the debugger output, allows running terminal commands, and allows configuring the web service ports.
79+
- 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!
80+
81+
1. At the top of VS Code, locate and click the Copilot icon to open a Copilot Chat panel.
82+
83+
<img width="150" alt="image" src="https://github.com/user-attachments/assets/5e64db46-95cb-415d-badc-b6b8677f10c1" />
84+
85+
1. If this is your first, time using GitHub Copilot, you will have to accept the usage terms to continue.
86+
- Click the **Accept** button to continue.
87+
- If you are using Copilot Chat for the first time, you will also have to accept the usage terms to continue.
88+
- Click the **Accept** button to continue.
89+
90+
### :keyboard: Activity: Use Copilot to help remember a terminal command 🙋
91+
92+
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.
93+
94+
1. If not already there, return to VS Code.
95+
96+
1. In the bottom panel, select the **Terminal** tab. On the right side, click the plus `+` sign to create a new terminal window.
97+
98+
> **Note:** This will avoid stopping the existing debug session that is hosting our web application service.
99+
100+
1. Within the new terminal window, use the keyboard shortcut `Ctrl + I` (windows) or `Cmd + I` (mac).
101+
102+
1. Let's ask Copilot to help us remember a command we have forgotten: creating a branch and publishing it
103+
104+
> <img width="13px" src="https://github.com/user-attachments/assets/98fd5d2e-ea29-4a4a-9212-c7050e177a69" /> **Prompt**
105+
>
106+
> ```prompt
107+
> Hey copilot, how can I create and publish a new Git branch?
108+
> ```
109+
110+
> **Tip:** This is a simple example, but Copilot is great at providing more tailored commands that might involve loops, pattern matching, file modification, and more! Don't be afraid to ask Copilot for a suggestion. Just remember it is a suggestion and you should always verify it first to be safe.
111+
112+
1. Copilot probably gave us a command like the following. Rather than manually modify it, let's respond back to tell Copilot to use a particular name.
113+
114+
```bash
115+
git checkout -b {new_branch_name}
116+
git push -u origin {new_branch_name}
117+
```
118+
119+
> <img width="13px" src="https://github.com/user-attachments/assets/98fd5d2e-ea29-4a4a-9212-c7050e177a69" /> **Prompt**
120+
>
121+
> ```prompt
122+
> Awesome! Thanks, Copilot! Let's use the
123+
> branch name "build-octofit-app".
124+
> ```
125+
126+
> **Tip:** If Copilot doesn't give you quite what you want, you can always continue explaining what you need. Copilot will remember the conversation history for follow-up responses.
127+
128+
1. Now that we are happy with the command, press the `Run` button to let Copilot run it for us. No need to copy and paste!
129+
130+
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!
131+
132+
## Next step
133+
134+
Now that your branch is pushed to GitHub, let's continue on to the next step Step 2: Application Initial Setup - {{{next_step_file}}}.

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

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
## Step 2: The initial application setup: Directory structure, Python requirements, Django project/app, 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.
10+
2. Click the GitHub Copilot Chat click the :paperclip: and add "Open Editors" to the prompt.
11+
3. 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.
12+
13+
<img src="../../docs/ghcp-agent-mode.png" width=60% height=60%>
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+
> **Prompt**
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, 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+
> [!IMPORTANT]
38+
> Once the above activity installs all the required packages, proceed to the next activity.
39+
40+
### :keyboard: Activity: Setup the Python Django project/app
41+
42+
> **Prompt**
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 setup the Python Django project/app and run the server.
46+
>
47+
> 1. The octofit-tracker/backend directory will store the django project and app with the name octofit-tracker.
48+
> 2. Setup the additional configuration for the django project/app with the name octofit-tracker.
49+
>
50+
> Don't proceed with the next activity until all of these steps are completed.
51+
>```
52+
53+
Wait a moment for the Copilot to respond and press the continue button to execute each command presented by Copilot agent mode.
54+
Keep files creating and updating until the Copilot agent mode has finished.
55+
56+
### :keyboard: Activity: Let's install mongoDB
57+
58+
> **Prompt**
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 install mongoDB.
62+
>
63+
> 1. Install mongoDB and make sure the command is complete.
64+
>
65+
> Don't proceed with the next activity until all of these steps are completed.
66+
>```
67+
68+
> [!IMPORTANT]
69+
> If the command completes in the terminal but agent mode shows it is still running click stop.
70+
> You may need to paste the prompt again in agent mode.
71+
72+
### :keyboard: Activity: Let's start and verify mongoDB is running
73+
74+
> **Prompt**
75+
>
76+
> ```prompt
77+
> 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.
78+
>
79+
> 1. Start the mongoDB service.
80+
> 2. Verify the mongoDB service running.
81+
>
82+
> Don't proceed with the next activity until all of these steps are completed.
83+
>```
84+
85+
> [!NOTE]
86+
> You may not need to run this step if it was already started in the previous step.
87+
88+
> [!IMPORTANT]
89+
> If the command completes in the terminal but agent mode shows it is still running click stop.
90+
> You may need to paste the prompt again in agent mode.
91+
92+
## Next step
93+
94+
Now that the application structure and initial setup is complete, let's continue on to the next step [Step 3: Database and Django Project Setup](./3-database-django-project-setup.md)

‎.github/steps/3-database-django-project-setup.md‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
## Step 3: Initialize and create the octofit_db MongoDB database, update Django project/app files, and populate the MongoDB database
2+
3+
In this step, we will will accomplish the following:
4+
5+
- Setup the octofig_db mongoDB database structure.
6+
- Update the octofit-tracker/backend/octofit_tracker app files.
7+
- settings, models, serializers, urls, views, tests, admins files.
8+
- Populate the octofit_db database with test data.
9+
- Verify the test data is populated in the octofit_db database.
10+
11+
1. Open all files in the `docs` folder and keep this file open in the editor.
12+
2. Click the GitHub Copilot Chat click the :paperclip: and add "Open Editors" to the prompt.
13+
3. 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.
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: Initialize and create the octofit_db MongoDB database
23+
24+
> **Prompt**
25+
>
26+
> ```prompt
27+
> 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 initialize the octofit_db database.
28+
>
29+
> 1. Initialize the mongo octofit_db database.
30+
> 2. Create a correct table structure for users, teams, activity, leaderboard, and workouts collections.
31+
> 3. Make sure there is a unique id for primary key for the user collection.
32+
> ex. db.users.createIndex({ "email": 1 }, { unique: true })
33+
> 4. Execute the command for me to create the database.
34+
> 5. List the collections in the octofit_db database.
35+
>
36+
> Don't proceed with the next activity until all of these steps are completed.
37+
> ```
38+
39+
> [!IMPORTANT]
40+
> You may need to copy and paste the resppnse in the terminal if there is no "Continue" button.
41+
> Sometimes there is a scrolling issue and there may not be a "Continue" button.
42+
43+
### :keyboard: Activity: Update the Python Django project/app files
44+
45+
> **Prompt**
46+
>
47+
> ```prompt
48+
> 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 update the octofit-tracker/backend/octofit_tracker app files.
49+
>
50+
> 1. Update the octofit-tracker/backend/octofit_tracker/settings.py file to include the mongoDB database connection.
51+
> 2. Update the octofit-tracker/backend/octofit_tracker/models.py file to include the models for users, teams, activity, leaderboard, and workouts collections.
52+
> 3. Update the octofit-tracker/backend/octofit_tracker/serializers.py file to include the serializers for users, teams, activity, leaderboard, and workouts collections.
53+
> 4. Update the octofit-tracker/backend/octofit_tracker/urls.py file to include the urls for users, teams, activity, leaderboard, and workouts collections.
54+
> 5. Update the octofit-tracker/backend/octofit_tracker/views.py file to include the views for users, teams, activity, leaderboard, and workouts collections.
55+
> 6. Update the octofit-tracker/backend/octofit_tracker/tests.py file to include the tests for users, teams, activity, leaderboard, and workouts collections.
56+
> 7. Update the octofit-tracker/backend/octofit_tracker/admin.py file to include the admin for users, teams, activity, leaderboard, and workouts collections.
57+
> 8. Enable CORS in the octofit-tracker/backend/octofit_tracker/settings.py file to allow cross-origin requests from the frontend React app and allow all origins, methods, and headers.
58+
> 9. Allow all hosts in settings.py file.
59+
> 10 Install CORS middleware components.
60+
>
61+
>Don't proceed with the next activity until all of these steps are completed.
62+
>```
63+
64+
### :keyboard: Activity: populate the octofit_db database with test data from Django project/app files
65+
66+
> **Prompt**
67+
>
68+
> ```prompt
69+
> 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 populate the octofit_db database with test data. Use same data from docs/mona-high-school-fitness-tracker.md file.
70+
>
71+
> 1. Create a test data file in the octofit-tracker/backend/octofit_tracker directory.
72+
> 2. Run makemigrations and migrate the database in a Python virtual environment.
73+
> 3. Populate the octofit_db database with test data for users, teams, activities, leaderboard, and workouts collections based on test data in docs/mona-high-school-fitness-tracker.md populate_db.py.
74+
> 4. Verify the test data is populated in the octofit_db database.
75+
>
76+
> Don't proceed with the next activity until all of these steps are completed.
77+
>```
78+
79+
> [!IMPORTANT]
80+
> You may need to prompt agent mode and tell it that "the command is cutoff".
81+
82+
## Next step
83+
84+
Now that the Django project backend setup and the database is populated, let's continue on to the next step [Step 4: Setup Django REST Framework](./4-setup-django-rest-framework.md)

0 commit comments

Comments
 (0)