Skip to content

Add GitHub workflows and review documentation for Copilot exercises #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 7, 2025
Merged

Add GitHub workflows and review documentation for Copilot exercises #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b87722d
Add GitHub workflows and review documentation for Copilot exercises
arilivigni Apr 7, 2025
9f92dc4
Update .github/workflows/0-start-exercise.yml
arilivigni Apr 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions .github/steps/1-preparing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,14 @@ Great work! Now that we are familiar with the app and we know it works, let's as

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!

## Next step
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.

Now that your branch is pushed to GitHub, let's continue on to the next step Step 2: Application Initial Setup - {{{next_step_file}}}.
<details>
<summary>Having trouble? 🤷</summary><br/>

If you don't get feedback, here are some things to check:

- Make sure your created the branch with the exact name `build-octofit-app`. No prefixes or suffixes.
- Make sure the branch was indeed published to your repository.

</details>
38 changes: 26 additions & 12 deletions .github/steps/2-application-initial-setup.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@ In this step, we will accomplish the following:
2. Click the GitHub Copilot Chat click the :paperclip: and add "Open Editors" to the prompt.
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.

<img src="https://github.com/user-attachments/assets/0c8e4ace-1f39-4c5d-8232-379fcf5316c1" width=60% height=60%>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Delete

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Delete

<img src="https://github.com/user-attachments/assets/e172f5c0-bc2a-45a9-a301-9af8bfbd6a2e" width=60% height=60%>

>[!NOTE]
> [!NOTE]
> Do not change the model from GPT-4o this will be an optional activity at the end of the course.
> Keep in mind that the Copilot agent mode is conversational so it may ask you questions and you can ask it questions too.
> Wait a moment for the Copilot to respond and press the continue button to execute commands presented by Copilot agent mode.
> Keep files created and updated by Copilot agent mode until it is finished.
> 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 make a mistake in the process.
> 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.

### :keyboard: Activity: Prompt for GitHub Copilot in agent mode to start the creation of our application

Expand All @@ -33,18 +33,19 @@ In this step, we will accomplish the following:
>
> Don't proceed with the next activity until all of these steps are completed.
>```
>

> [!IMPORTANT]
> Once the above activity installs all the required packages, proceed to the next activity.

### :keyboard: Activity: Let's install MongoDB
### :keyboard: Activity: Let's install mongoDB

> **Prompt**
>
> ```prompt
> 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 school's app. Let's install MongoDB.
> 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.
>
> 1. Install MongoDB and make sure the command is complete.
> 1. Install mongoDB and make sure the command is complete.
>
> Don't proceed with the next activity until all of these steps are completed.
>```
Expand All @@ -53,15 +54,15 @@ In this step, we will accomplish the following:
> If the command completes in the terminal but agent mode shows it is still running click stop.
> You may need to paste the prompt again in agent mode.

### :keyboard: Activity: Let's start and verify MongoDB is running
### :keyboard: Activity: Let's start and verify mongoDB is running

> **Prompt**
>
> ```prompt
> 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 school's app. Let's start and verify MongoDB is running.
> 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.
>
> 1. Start the MongoDB service.
> 2. Verify the MongoDB service is running.
> 1. Start the mongoDB service.
> 2. Verify the mongoDB service running.
>
> Don't proceed with the next activity until all of these steps are completed.
>```
Expand All @@ -73,6 +74,19 @@ In this step, we will accomplish the following:
> If the command completes in the terminal but agent mode shows it is still running click stop.
> You may need to paste the prompt again in agent mode.

## Next step
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.

1. With our new changes complete, please **commit** and **push** the changes to GitHub.

1. Wait a moment for Mona to check your work, provide feedback, and share the final lesson. Almost done!

<details>
<summary>Having trouble? 🤷</summary><br/>

If you don't get feedback, here are some things to check:

- Make sure your commit changes were made for the following file to the branch `build-octofit-app` and pushed/synchronized to GitHub:
- `octofit-tracker/backend/requirements.txt` and it contains the package `Django==4.1`
- If Mona found a mistake, simply make a correction and push your changes again. Mona will check your work as many times as needed.

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)
</details>
50 changes: 33 additions & 17 deletions .github/steps/3-database-django-project-setup.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,22 @@

In this step, we will accomplish the following:

- Setup the octofit_db MongoDB database structure.
- Set up the octofit_db MongoDB database structure.
- Update the octofit-tracker/backend/octofit_tracker app files:
- settings, models, serializers, urls, views, tests, admin files.
- settings, models, serializers, urls, views, tests, and admin files.
- Populate the octofit_db database with test data.
- Verify the test data is populated in the octofit_db database.

1. Open all files in the `docs` folder and keep this file open in the editor.
2. Click the GitHub Copilot Chat click the :paperclip: and add "Open Editors" to the prompt.
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.
2. Click the GitHub Copilot Chat, click the :paperclip:, and add "Open Editors" to the prompt.
3. Copy and paste the following prompt in the GitHub Copilot Chat and select the "Agent" instead of "Ask" or "Edit" from the dropdown where you are inserting the prompt.

>[!NOTE]
> Do not change the model from GPT-4o this will be an optional activity at the end of the course.
> Keep in mind that the Copilot agent mode is conversational so it may ask you questions and you can ask it questions too.
> Do not change the model from GPT-4; this will be an optional activity at the end of the course.
> Keep in mind that the Copilot agent mode is conversational, so it may ask you questions, and you can ask it questions too.
> Wait a moment for the Copilot to respond and press the continue button to execute commands presented by Copilot agent mode.
> Keep files created and updated by Copilot agent mode until it is finished.
> 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.
> Agent mode has the ability to evaluate your codebase and execute commands and add/refactor/delete parts of your codebase and automatically self-heal if it or you make a mistake in the process.

### :keyboard: Activity: Setup the Python Django project/app

Expand All @@ -41,11 +41,11 @@ In this step, we will accomplish the following:
> **Prompt**
>
> ```prompt
> 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 school's app. Let's initialize the octofit_db database.
> Based on the example monafit tracker app in the docs/mona-high-school-fitness-tracker.md file and use octofit as the name for Merington's high school's app. Let's initialize the octofit_db database.
>
> 1. Initialize the mongo octofit_db database.
> 2. Create a correct table structure for users, teams, activity, leaderboard, and workouts collections.
> 3. Make sure there is a unique id for primary key for the user collection.
> 3. Make sure there is a unique ID for the primary key for the user collection.
> ex. db.users.createIndex({ "email": 1 }, { unique: true })
> 4. Execute the command for me to create the database.
> 5. List the collections in the octofit_db database.
Expand All @@ -54,8 +54,8 @@ In this step, we will accomplish the following:
> ```

> [!IMPORTANT]
> You may need to copy and paste the response in the terminal if there is no "Continue" button.
> Sometimes there is a scrolling issue and there may not be a "Continue" button.
> If there is no "Continue" button, just pull the left side of the GitHub Copilot Chat panel over to the left, and it should appear.
> If this doesn't work, you may need to copy and paste the response in the terminal if there is no "Continue" button.

### :keyboard: Activity: Update the Python Django project/app files

Expand All @@ -77,25 +77,41 @@ In this step, we will accomplish the following:
> 11. Install CORS middleware components.
>
> Don't proceed with the next activity until all of these steps are completed.
> ```

### :keyboard: Activity: populate the octofit_db database with test data from Django project/app files
### :keyboard: Activity: Populate the octofit_db database with test data from Django project/app files

> **Prompt**
>
> ```prompt
> 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 school's app. Let's populate the octofit_db database with test data. Use same data from docs/mona-high-school-fitness-tracker.md file.
> Based on the example monafit tracker app in the docs/mona-high-school-fitness-tracker.md file and use octofit as the name for Merington's high school's app. Let's populate the octofit_db database with test data. Use the same data from docs/mona-high-school-fitness-tracker.md file.
>
> 1. Create a test data file in the octofit-tracker/backend/octofit_tracker directory.
> 2. Run makemigrations and migrate the database in a Python virtual environment.
> 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.
> 4. Verify the test data is populated in the octofit_db database.
>
> Don't proceed with the next activity until all of these steps are completed.
>```
> ```

> [!IMPORTANT]
> You may need to prompt agent mode and tell it that "the command is cut off".
> If there is no "Continue" button, just pull the left side of the GitHub Copilot Chat panel over to the left, and it should appear.
> If this doesn't work, you may need to copy and paste the response in the terminal if there is no "Continue" button.

1. Now that we have created the database structure, updated our Django project files, and populated the database, let's check our changes into our `build-octofit-app` branch.

1. With our new changes complete, please **commit** and **push** the changes to GitHub.

1. Wait a moment for Mona to check your work, provide feedback, and share the final lesson. Almost done!

<details>
<summary>Having trouble? 🤷</summary><br/>

If you don't get feedback, here are some things to check:

## Next step
- Make sure your commit changes were made for the following files to the branch `build-octofit-app` and pushed/synchronized to GitHub:
- `octofit-tracker/backend/octofit_tracker/settings.py`
- `octofit-tracker/backend/octofit_tracker/management/commands/populate_db.py`
- If Mona found a mistake, simply make a correction and push your changes again. Mona will check your work as many times as needed.

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)
</details>
23 changes: 19 additions & 4 deletions .github/steps/4-setup-django-rest-framework.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ In this step, we will accomplish the following:
> ```prompt
>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 school's app. Let's setup codespace for the URL, restart the server, and test the API.
>
> 1. Activate the python virtual environment.
> 1. Activate the Python virtual environment.
> 2. Update #file:octofit-tracker/backend/octofit_tracker/views.py to replace the return for the REST API URL endpoints with the codespace URL https://[REPLACE-THIS-WITH-YOUR-CODESPACE-NAME]-8000.app.github.dev for Django and avoid certificate HTTPS issues.
> 3. Make sure the Django backend works on [REPLACE-THIS-WITH-YOUR-CODESPACE-NAME]-8000.app.github.dev and localhost:8000.
> 4. Test the API endpoints using curl command.
Expand All @@ -40,13 +40,28 @@ In this step, we will accomplish the following:

Now, let's actually try running the Django application! In the left sidebar, select the `Run and Debug` tab and then press the **Start Debugging** icon.

<img src="https://github.com/user-attachments/assets/b1921335-ca68-465a-8845-bf4a750a47a2" width=30% height=30%>
<img src="https://github.com/user-attachments/assets/baef4dfe-0751-45cb-9e16-8ff26ba9ff58" width=30% height=30%>

>[!IMPORTANT]
> Make sure to replace [REPLACE-THIS-WITH-YOUR-CODESPACE-NAME] with your codespace name.
> ex. redesigned-spork-g6pj46rr9hpp6x
> You can get the codespace name by running the following command in the terminal: `echo $CODESPACE_NAME`.

## Next step
1. Now that we have updated our Django product to include our codespace name for the URL endpoint,
let's check our changes in to our `build-octofit-app` branch.

Now that the Django REST framework is setup, let's continue on to the next step [Step 5: Setup the React Frontend Framework](./5-setup-frontend-react-framework.md)
1. With our new changes complete, please **commit** and **push** the changes to GitHub.

1. Wait a moment for Mona to check your work, provide feedback, and share the final lesson. Almost done!

<details>
<summary>Having trouble? 🤷</summary><br/>

If you don't get feedback, here are some things to check:

- Make sure your commit changes were made for the following files to the branch `build-octofit-app` and pushed/synchronized to GitHub:
- `octofit-tracker/backend/octofit_tracker/settings.py`
- `octofit-tracker/backend/octofit_tracker/views.py`
- If Mona found a mistake, simply make a correction and push your changes again. Mona will check your work as many times as needed.

</details>
Loading
Loading