Exercise: Build Applications with GitHub Copilot Agent Mode

[github-actions]

Build Applications with GitHub Copilot Agent Mode

👋 Hey there michalJakubis! Welcome to your Skills exercise!

Welcome to the exciting world of GitHub Copilot agent mode! 🚀 In this exercise, you'll unlock the potential of this AI-powered coding assistant to accelerate your development process. Let's dive in and have some fun exploring the future of coding together! 💻✨

As you complete each step, I will respond in the comments to:

• check your work and give feedback
• share next steps
• occasionally share tips
• congratulate you when you finish!

Good luck and have fun!
- Mona

[github-actions]

Step 1: Hello GitHub Copilot agent mode

Welcome to your "Build applications with GitHub Copilot agent mode" exercise! 🤖

In this exercise, you will be using GitHub Copilot agent mode to build an application that tracks your fitness goals and progress. 🏋️‍♂️🏃‍♀️💪

What is GitHub Copilot agent mode?

Copilot agent mode can create apps from scratch, refactor 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.

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:

Determines the relevant context and files to edit autonomously.
Offers both code changes and terminal commands to complete the task. For example, Copilot might compile code, install packages, run tests, and more.
Monitors the correctness of code edits and terminal command output and iterates to remediate issues.

💡 Tip: You can learn more about GitHub Copilot agent mode in the Use agent mode documentation.

⌨️ Activity: Getting to know your GitHub Copilot agent mode development environment

1. Right-click the below button to open the Create Codespace page in a new tab.

   

   • The free tier of Codespaces that comes with all GitHub accounts is fine, assuming you still have minutes available.
   • The default Codespace settings are fine.

2. Confirm the Repository field is your copy of the exercise, not the original, then click the green Create Codespace button.

   • ✅ Your copy: /michalJakubis/skills-build-applications-w-copilot-agent-mode
   • ❌ Original: /skills/build-applications-w-copilot-agent-mode

3. Wait a moment for Visual Studio Code to load.

   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.
   

4. Before we continue let's take a moment to familiarize ourselves with the project folder.

   • The left navigation bar is where you can access the file explorer, debugger, and search.
   • The lower panel (Ctrl+J) shows the debugger output, allows running terminal commands, and allows configuring the web service ports.
   • 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!

5. At the top of VS Code, locate and click the Copilot icon to open a Copilot Chat panel.

1. If this is your first, time using GitHub Copilot, you will have to accept the usage terms to continue.
   • Click the Accept button to continue.
   • If you are using Copilot Chat for the first time, you will also have to accept the usage terms to continue.
   • Click the Accept button to continue.

⌨️ Activity: Use Copilot agent mode to create a branch and publish it. 🙋

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.

1. If not already there, return to VS Code.

2. Open the GitHub Copilot Chat window if not already open.

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.

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

1. Let's ask Copilot agent mode to help us remember the command and create the branch build-octofit-app and publishing it

   

   Hey copilot, how can I create and publish a new Git branch called build-octofit-app?
   

   Copilot agent mode will respond and ask if you want agent mode to run the command. Respond with Yes.
   

   

2. 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!

3. 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!

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

Having trouble? 🤷

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.

[github-actions]

🎉🎉🎉 Nice work! Everything is perfect! 🎉🎉🎉
Preparing content for step 2! One moment... 🤓

[github-actions]

Step 2: The initial application setup: Directory structure, Python requirements, and MongoDB

In this step, we will accomplish the following:

• Create the octofit-tracker application directory structure.
• Create the octofit-tracker/backend and octofit-tracker/frontend directories.
• Create the octofit-tracker/backend/requirements.txt file.

1. Open all files in the docs folder and keep this file open in the editor throughout this exercise.
   1. Agent mode uses mona-high-school-fitness-tracker.md and octofit_story.md as a reference to create the application
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.

🪧 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 makes a mistake in the process.

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

Let's take the following step by step and generate instructions in this order and execute the commands.
Use docs/mona-high-school-fitness-tracker.md as a guide for the project structure and requirements.

1. Understand the story of creating the fitness application from the docs/octofit_story.md file.
2. Create the initial directory structure for the octofit-tracker application octofit-tracker/backend, octofit-tracker/frontend.
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.

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.

⌨️ Activity: 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.

Don't proceed with the next activity until all of these steps are completed.

❕ Important:

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

⌨️ Activity: 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 running.

Don't proceed with the next activity until all of these steps are completed.

❕ Important:

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

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.

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

3. Wait a moment for Mona to check your work, provide feedback, and share the next lesson so we can keep working!

Having trouble? 🤷

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.

[github-actions]

🎉🎉🎉 Nice work! Everything is perfect! 🎉🎉🎉
Preparing content for step 3! One moment... 🤓

[github-actions]

Step 3: Initialize and create the octofit_db MongoDB database, Django project/app, update Django project/app files, and populate the MongoDB database

In this step, we will accomplish the following:

• Set up the octofit_db MongoDB database structure.
• Update the octofit-tracker/backend/octofit_tracker app 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 throughout this exercise.
   1. agent mode uses mona-high-school-fitness-tracker.md and octofit_story.md as a reference to create the application
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.

🪧 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 makes a mistake in the process.

⌨️ Activity: Setup the Python Django project/app

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.

1. The octofit-tracker/backend directory will store the django project and app with the name octofit-tracker.
2. Setup the additional configuration for the django project/app with the name octofit-tracker.

Don't proceed with the next activity until all of these steps are completed.

🪧 Note:

• Wait a moment for the Copilot to respond and press the Continue button to execute each command presented by Copilot agent mode.
• Keep files created and updated until the Copilot agent mode has finished.

❕ Important:

• Don't start the Python Django app in the way that GitHub Copilot agent mode suggests hit cancel.

⌨️ Activity: Initialize and create the octofit_db MongoDB 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 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.

Don't proceed with the next activity until all of these steps are completed.

❕ Important:

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

⌨️ Activity: Update the Python Django project/app files

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 update the octofit-tracker/backend/octofit_tracker app files.

1. Update the octofit-tracker/backend/octofit_tracker/settings.py file to include the MongoDB database connection.
2. Update the octofit-tracker/backend/octofit_tracker/models.py file to include the models for users, teams, activity, leaderboard, and workouts collections.
3. Update the octofit-tracker/backend/octofit_tracker/serializers.py file to include the serializers for users, teams, activity, leaderboard, and workouts collections.
4. Update the octofit-tracker/backend/octofit_tracker/urls.py file to include the URLs for users, teams, activity, leaderboard, and workouts collections.
5. Update the octofit-tracker/backend/octofit_tracker/views.py file to include the views for users, teams, activity, leaderboard, and workouts collections.
6. Update the octofit-tracker/backend/octofit_tracker/tests.py file to include the tests for users, teams, activity, leaderboard, and workouts collections.
7. Update the octofit-tracker/backend/octofit_tracker/admin.py file to include the admin for users, teams, activity, leaderboard, and workouts collections.
8. Make sure api_root is in octofit-tracker/backend/octofit_tracker/urls.py
9. 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.
10. Allow all hosts in the settings.py file.
11. Install CORS middleware components.

Don't proceed with the next activity until all of these steps are completed.

❕ Important: Don't start the Python Django app in the way that GitHub Copilot agent mode suggests hit cancel.

⌨️ Activity: Populate the octofit_db database with test data from Django project/app files

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 octofit-tracker/backend/octofit_tracker/management/commands/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:

• Don't start the Python Django app in the way that GitHub Copilot agent mode suggests hit cancel.
• 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.

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

3. Wait a moment for Mona to check your work, provide feedback, and share the next lesson so we can keep working!

Having trouble? 🤷

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

[github-actions]

Step 3 - Passed ✅

Status	Name	Message
✅ - Pass	settings.py
✅ - Pass	populate_db.py

Tips

• Copilot agent mode is becoming more capable everyday. Make sure to always be experimenting!
• Try different prompts and models.

[github-actions]

🎉🎉🎉 Nice work! Everything is perfect! 🎉🎉🎉
Preparing content for step 4! One moment... 🤓

[github-actions]

Step 4: Setup Django REST Framework, start the server, and test the API

In this step, we will accomplish the following:

• Setup the Django REST Framework.
• Start the server.
• Test the API using curl.

1. Open all files in the docs folder and keep this file open in the editor throughout this exercise.
   1. agent mode uses mona-high-school-fitness-tracker.md and octofit_story.md as a reference to create the application
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.

🪧 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 makes a mistake in the process.

⌨️ Activity: Setup Django REST Framework, restart the server, and test the API

🪧 Note:

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

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, start the server via VS Code launch.json, and test the API.

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.
5. Allow host access to codespace URL and localhost:8000.

Don't proceed with the next activity until all of these steps are completed.

❕ Important: Don't start the Python Django app in the way that GitHub Copilot agent mode suggests hit cancel. Follow the next activity instead.

⌨️ Activity: Start the Python Django app and check the output

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.

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

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.

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

3. Wait a moment for Mona to check your work, provide feedback, and share the next lesson so we can keep working!

Having trouble? 🤷

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.

[github-actions]

Step 4 - Passed ✅

Status	Name	Message
✅ - Pass	settings.py
✅ - Pass	views.py

Tips

• Copilot agent mode is becoming more capable everyday. Make sure to always be experimenting!
• Try different prompts and models.

[github-actions]

🎉🎉🎉 Nice work! Everything is perfect! 🎉🎉🎉
Preparing content for step 5! One moment... 🤓

[github-actions]

Step 5: Setup the frontend React framework, update the components, and start OctoFit Tracker app

In this step, we will accomplish the following:

• Setup the octofit-tracker frontend React framework.
• Update the following components to include the React framework:
  • src/App.js
  • src/index.js
  • src/components/Activities.js
  • src/components/Leaderboard.js
  • src/components/Teams.js
  • src/components/Users.js
  • src/components/Workouts.js
• Start the React app and check the output.

1. Open all files in the docs folder and keep this file open in the editor throughout this exercise.
   1. agent mode uses mona-high-school-fitness-tracker.md and octofit_story.md as a reference to create the application
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.

🪧 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 makes a mistake in the process.

⌨️ Activity: Install the octofit-tracker frontend React framework

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 codespace for the octofit-tracker frontend React framework.

1. Make the octofit-tracker/frontend directory.
2. Create the react app in the octofit-tracker/frontend directory.
3. Install stable versions of React framework and modules based on docs/mona-high-school-fitness-tracker.md.
4. Install stable bootstrap in the octofit-tracker/frontend directory.
5. Import bootstrap css in the src/index.js file.
6. Install the stable react-router-dom in the octofit-tracker/frontend directory.
7. Don't change .gitignore file

Don't proceed with the next activity until all of these steps are completed.

⌨️ Activity: Update the octofit-tracker frontend React components

🪧 Note:

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

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 frontend React components.

- Update the following components to include the React framework to point to the backend API:
  - src/App.js
  - src/index.js
  - src/components/Activities.js
  - src/components/Leaderboard.js
  - src/components/Teams.js
  - src/components/Users.js
  - src/components/Workouts.js
- In each component replace the fetch url with the codespace url https://[REPLACE-THIS-WITH-YOUR-CODESPACE-NAME]-8000.app.github.dev/api/<component> for the Django rest framework backend.
- Make sure to use the correct port and protocol http or https.
- Update src/App.js to include the main navigation for all components.
- Make sure react-router-dom is used for the navigation menu.
- The react app should show the navigation menu and the components.

Don't proceed with the next activity until all of these steps are completed.

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

⌨️ Activity: Start the react app and check the output

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

⌨️ Activity: Let's add some formatting, structuring, and styling to the octofit tracker app

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 style this like App.css and make it look nice.

- Let's make the App.js and all components javascript files in the app are consistent with the following:
  - Use bootstrap tables for the data in all javascript components.
  - Use bootstrap buttons for the buttons.
  - Use bootstrap headings for the headings.
  - Use bootstrap links for the links.
  - Use bootstrap navigation for the navigation menu.
  - Use bootstrap forms for the forms.
  - Use bootstrap cards for the cards.
  - Use bootstrap modals for the modals.

Don't proceed with the next activity until all of these steps are completed.

⌨️ Optional Activity: Let's make the octofit tracker app look nice, pretty, and add some color

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 style this like App.css and make it look nice.

-  Edit the App.css file to do the following:
  - Add some color to the background.
  - Add some color to the text.
  - Add some color to the tables.
  - Add some color to the buttons.
  - Add some color to the headings.
  - Add some color to the links.
  - Add some color to the navigation menu.
- Add the octofitapp-small logo justified to the left to the app and make it look nice.
- Add a favicon to the app and make it look nice.

Don't proceed with the next activity until all of these steps are completed.

⌨️ Optional Activity: Iterate on the appearance and try different models

🧪 Try this:

• Try creating your own prompts to change the application appearance, add features, and try different models.
• Once you are happy with the application you can commit the changes and push them to your branch build-octofit-app.

1. Now that we have created the React frontend for all application components, let's check our changes in to our build-octofit-app branch.

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

3. Wait a moment for Mona to check your work, provide feedback, and share the next lesson so we can keep working!

Having trouble? 🤷

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/frontend/src/components/Activities.js and it contains -8000.app.github.dev/api/activities/
  • octofit-tracker/frontend/src/components/Leaderboard.js and it contains -8000.app.github.dev/api/leaderboard/
  • octofit-tracker/frontend/src/components/Teams.js and it contains -8000.app.github.dev/api/teams/
  • octofit-tracker/frontend/src/components/Users.js and it contains -8000.app.github.dev/api/users/
  • octofit-tracker/frontend/src/components/Workouts.js and it contains -8000.app.github.dev/api/workouts/
• If Mona found a mistake, simply make a correction and push your changes again. Mona will check your work as many times as needed.

[github-actions]

Step 4 - Passed ✅

Status	Name	Message
✅ - Pass	Activities.js
✅ - Pass	Leaderboard.js
✅ - Pass	Teams.js
✅ - Pass	Users.js
✅ - Pass	Workouts.js

Tips

• Copilot agent mode is becoming more capable everyday. Make sure to always be experimenting!
• Try different prompts and models.

[github-actions]

🎉🎉🎉 Nice work! Everything is perfect! 🎉🎉🎉
Preparing content for step 6! One moment... 🤓

[github-actions]

Step 6: Using GitHub Copilot within a pull request

Congratulations! You are finished with coding for this exercise (and VS Code). Now it's time to merge our work. 🎉 To wrap up, let's learn about two limited-access Copilot features that can speed up our pull requests!

Copilot Pull Request Summaries

Typically, you would review your notes and commit messages then summarize them for your pull request description. This may take some time, especially if commit messages are inconsistent or code is not documented well. Fortunately, Copilot can consider all changes in the pull request and provide the important highlights, and with references too!

Note

This is unavailable with the Copilot Free tier. [docs]

Copilot Review

More eyes on our work is always useful so let's ask Copilot to do a first pass before we do a normal peer review process. Copilot is great at catching common mistakes that can be fixed by simple adjustment, but please remember to use it responsibly.

Note

This is in Public Preview for organizations. [docs]

⌨️ Activity: Summarize and review a PR with Copilot

Both pull request summaries and Copilot review have limited access, so this activity is mostly optional. If you have access, Mona will gladly check your work though! If not, you can skip the optional steps.

1. In a web browser, open another tab and navigate to your exercise repository.

2. You might notice a notification banner suggesting to create a new pull request. Click that or use the Pull Requests tab at the top to create a new pull request. Please use the following details:

   • base: main
   • compare: build-octofit-app
   • title: Add registration validation and more activities

3. (Optional) In the Add a description area, enter edit mode if needed, then click the Copilot actions icon and Summary action. After a moment, Copilot will add a description. 📝

   

4. (Optional) In the right side information panel at the top, locate the Reviewers section and click the Request button next to a Copilot icon. Wait a moment for Copilot to add a review comment to your pull request!

   

   Tip: Notice a log entry that Copilot was requested for a review.

5. At the bottom, press the Merge pull request button. Nice work! You are all done! 🎉

6. Wait a moment for Mona to check your work, provide feedback, and post a final review of this lesson!

[github-actions]

Please, follow the steps above.
I'll watch your progress in the background to provide feedback. 🧐