├── docs ├── octofitapp-small.png └── octofit_story.md ├── .devcontainer ├── welcome-message.txt ├── post_create.sh ├── devcontainer.json └── post_start.sh ├── .gitignore ├── .github ├── prompts │ ├── create-django-project.prompt.md │ └── init-populate-octofit_db.prompt.md ├── instructions │ ├── octofit_tracker_react_frontend.instructions.md │ ├── octofit_tracker_django_backend.instructions.md │ └── octofit_tracker_setup_project.instructions.md ├── steps │ ├── x-review.md │ ├── 6-copilot-on-github.md │ ├── 2-application-initial-setup.md │ ├── 4-setup-django-rest-framework.md │ ├── 1-preparing.md │ ├── 3-django-project-setup.md │ └── 5-setup-frontend-react-framework.md └── workflows │ ├── 6-copilot-on-github.yml │ ├── 1-preparing.yml │ ├── 0-start-exercise.yml │ ├── 2-application-initial-setup.yml │ ├── 4-setup-django-rest-framework.yml │ ├── 3-database-django-project-setup.yml │ └── 5-setup-frontend-react-framework.yml ├── LICENSE ├── .vscode └── launch.json └── README.md /docs/octofitapp-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skills/build-applications-w-copilot-agent-mode/HEAD/docs/octofitapp-small.png -------------------------------------------------------------------------------- /.devcontainer/welcome-message.txt: -------------------------------------------------------------------------------- 1 | 👋 Welcome to building a multi-tier fitness tracker 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 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | 3 | # Virtual Environment 4 | venv 5 | 6 | # octofit tracker app 7 | # octfit-tracker 8 | 9 | # React node_modules 10 | node_modules 11 | /.pnp 12 | .pnp.js 13 | 14 | # testing 15 | /coverage 16 | 17 | # production 18 | /build 19 | 20 | # misc 21 | .DS_Store 22 | .env.local 23 | .env.development.local 24 | .env.test.local 25 | .env.production.local 26 | 27 | npm-debug.log* 28 | yarn-debug.log* 29 | yarn-error.log* 30 | 31 | # Python files 32 | *.pyc 33 | __pycache__/ 34 | -------------------------------------------------------------------------------- /.devcontainer/post_create.sh: -------------------------------------------------------------------------------- 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 | wget -qO - https://pgp.mongodb.com/server-6.0.asc | gpg --dearmor | sudo tee /etc/apt/trusted.gpg.d/mongodb-server-6.0.gpg > /dev/null 6 | echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu jammy/mongodb-org/6.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-6.0.list 7 | sudo apt-get update 8 | sudo apt-get install -y python3-venv 9 | sudo apt-get install -y mongodb-org 10 | sudo mkdir -p /usr/local/etc/vscode-dev-containers 11 | sudo cp --force ./.devcontainer/welcome-message.txt /usr/local/etc/vscode-dev-containers/first-run-notice.txt -------------------------------------------------------------------------------- /.github/prompts/create-django-project.prompt.md: -------------------------------------------------------------------------------- 1 | --- 2 | mode: 'agent' 3 | model: GPT-4.1 4 | description: 'Create a Django project, start it, and run it' 5 | --- 6 | 7 | Your task is to create the Django project in octofit-tracker/backend/octofit_tracker directory using the Python 8 | virtual environment we already created in directory octofit-tracker/backend/venv which contains all the prerequisites. 9 | 10 | 11 | To create the Django project follow these steps. 12 | 1. Make sure we are in the root directory and don't change directories 13 | 2. source octofit-tracker/backend/venv/bin/activate 14 | 3. django-admin startproject octofit_tracker in the octofit-tracker/backend directory 15 | 4. python manage.py migrate 16 | 5. Instruct the user to run the django app from the .vscode/launch.json configuration that is in the repository 17 | -------------------------------------------------------------------------------- /.github/instructions/octofit_tracker_react_frontend.instructions.md: -------------------------------------------------------------------------------- 1 | --- 2 | applyTo: "octofit-tracker/frontend/**" 3 | --- 4 | # Octofit-tracker Fitness App React frontend Guidelines 5 | 6 | ## REACT Frontend App structure 7 | 8 | Make sure in all commands we point to the `octofit-tracker/frontend` directory 9 | 10 | ```bash 11 | npx create-react-app octofit-tracker/frontend --template cra-template --use-npm 12 | 13 | npm install bootstrap --prefix octofit-tracker/frontend 14 | 15 | # Add the Bootstrap CSS import at the very top of src/index.js: 16 | sed -i "1iimport 'bootstrap/dist/css/bootstrap.min.css';" octofit-tracker/frontend/src/index.js 17 | 18 | npm install react-router-dom --prefix octofit-tracker/frontend 19 | 20 | ``` 21 | 22 | ## Images for the OctoFit Tracker App 23 | 24 | The image to use for the app is in the root of this repository docs/octofitapp-small.png 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 GitHub Skills 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /.github/instructions/octofit_tracker_django_backend.instructions.md: -------------------------------------------------------------------------------- 1 | --- 2 | applyTo: "octofit-tracker/backend/**" 3 | --- 4 | # Octofit-tracker Fitness App Django backend Guidelines 5 | 6 | ## Django Backend App structure 7 | 8 | ### settings.py 9 | 10 | Should always contain the following: 11 | 12 | ```python 13 | import os 14 | ALLOWED_HOSTS = ['localhost', '127.0.0.1'] 15 | if os.environ.get('CODESPACE_NAME'): 16 | ALLOWED_HOSTS.append(f"{os.environ.get('CODESPACE_NAME')}-8000.app.github.dev") 17 | ``` 18 | 19 | ## serializers.py 20 | 21 | ```text 22 | serializers should convert ObjectId fields to strings 23 | ``` 24 | 25 | ## REST API Endpoints 26 | 27 | ```text 28 | use curl to test the endpoints 29 | ``` 30 | 31 | ### urls.py 32 | 33 | Should always use the codespace environment variable for the URL 34 | 35 | ```python 36 | import os 37 | codespace_name = os.environ.get('CODESPACE_NAME') 38 | if codespace_name: 39 | base_url = f"https://{codespace_name}-8000.app.github.dev" 40 | else: 41 | base_url = "http://localhost:8000" 42 | 43 | urlpatterns = [ 44 | path('admin/', admin.site.urls), 45 | path('api/', api_root, name='api-root'), 46 | path('api/', include(router.urls)), 47 | ] 48 | ``` -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "name": "Launch Django Backend", 6 | "type": "python", 7 | "request": "launch", 8 | "program": "${workspaceFolder}/octofit-tracker/backend/manage.py", 9 | "args": ["runserver", "0.0.0.0:8000"], 10 | "django": true, 11 | "justMyCode": true, 12 | "python": "${workspaceFolder}/octofit-tracker/backend/venv/bin/python", 13 | "env": { 14 | "PYTHONPATH": "${workspaceFolder}/octofit-tracker/backend/venv/bin/python", 15 | "VIRTUAL_ENV": "${workspaceFolder}/octofit-tracker/backend/venv", 16 | "PATH": "${workspaceFolder}/octofit-tracker/backend/venv/bin:${env:PATH}" 17 | } 18 | }, 19 | { 20 | "name": "Launch React Frontend", 21 | "type": "node", 22 | "request": "launch", 23 | "program": "${workspaceFolder}/octofit-tracker/frontend/node_modules/react-scripts/scripts/start.js", 24 | "cwd": "${workspaceFolder}/octofit-tracker/frontend", 25 | "runtimeExecutable": "npm", 26 | "runtimeArgs": ["start"], 27 | "port": 3000, 28 | "env": { 29 | "REACT_APP_CODESPACE_NAME": "${env:CODESPACE_NAME}" 30 | } 31 | } 32 | ] 33 | } -------------------------------------------------------------------------------- /.devcontainer/devcontainer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "OctoFit Tracker App codespace", 3 | "image": "mcr.microsoft.com/devcontainers/base:jammy", 4 | "features": { 5 | "ghcr.io/devcontainers/features/docker-in-docker:2": {}, 6 | "ghcr.io/devcontainers/features/github-cli:1": {}, 7 | "ghcr.io/devcontainers/features/node:1": { 8 | "version": "lts", 9 | "pnpmVersion": "latest", 10 | "nvmVersion": "latest" 11 | } 12 | }, 13 | "postCreateCommand": "sudo chmod +x ./.devcontainer/post_create.sh && ./.devcontainer/post_create.sh", 14 | "postStartCommand": "sudo chmod +x ./.devcontainer/post_start.sh && ./.devcontainer/post_start.sh", 15 | "customizations": { 16 | "vscode": { 17 | "extensions": [ 18 | "github.copilot", // GitHub Copilot + Copilot Chat 19 | "markdown-lint.markdownlinter", 20 | "ms-python.python", // Python extension 21 | "ms-python.vscode-pylance", // Pylance extension for Python 22 | "ms-python.debugpy" // Debugpy extension for Python 23 | ], 24 | "settings": { 25 | "chat.agent.enabled": true, 26 | } 27 | } 28 | }, 29 | "forwardPorts": [ 30 | 3000, // React default port 31 | 8000, // Django default port 32 | 27017 // MongoDB default port 33 | ], 34 | "portAttributes": { 35 | "3000": { // React port attributes 36 | "label": "octofit-tracker", 37 | "requireLocalPort": true 38 | }, 39 | "8000": { // Django port attributes 40 | "label": "octofit-api", 41 | "requireLocalPort": true 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /.github/steps/x-review.md: -------------------------------------------------------------------------------- 1 | ## Review 2 | 3 | _Congratulations, you've completed this exercise and learned a lot about GitHub Copilot agent mode!_ 4 | 5 | celebrate 6 | 7 | Here's a recap of your accomplishments: 8 | 9 | - Set up your GitHub Codespace and environment. 10 | - Learned how to use Copilot inline suggestions, Chat, and Edits. 11 | - Used Copilot to generate commit messages and pull request summaries. 12 | - Learned how to request Copilot to review your code. 13 | 14 | ### What's next? 15 | 16 | - Continue working on the project 17 | - Use Copilot to add an ability for login and authentication. 18 | - Keep evolving the look of the application through app.css. 19 | - Use Copilot to fix issues found during a pull request review. 20 | - Use Copilot to generate tests and documentation. 21 | - Use Copilot with different models. 22 | - Check out the other [GitHub Skills exercises](https://learn.github.com/skills). 23 | - Try [Modernize Your Legacy Code with GitHub Copilot](https://github.com/skills/modernize-your-legacy-code-with-github-copilot) 24 | 25 | Check out these resources to learn more about GitHub Copilot: 26 | 27 | - Take a look at this blog on GitHub Copilot agent mode [Mastering GitHub Copilot: When to use AI agent mode](https://github.blog/ai-and-ml/github-copilot/mastering-github-copilot-when-to-use-ai-agent-mode/) 28 | - Are you not getting the responses you want from Copilot? [Learn prompt engineering](https://docs.github.com/en/copilot/using-github-copilot/copilot-chat/prompt-engineering-for-copilot-chat) 29 | - Explore GitHub Copilot [Slash Commands](https://docs.github.com/en/copilot/using-github-copilot/copilot-chat/github-copilot-chat-cheat-sheet?tool=vscode). 30 | - See what other features are available [GitHub Copilot Features](https://docs.github.com/en/copilot/about-github-copilot/github-copilot-features). 31 | - Take a look at the [GitHub Copilot Documentation](https://docs.github.com/en/copilot). -------------------------------------------------------------------------------- /.github/prompts/init-populate-octofit_db.prompt.md: -------------------------------------------------------------------------------- 1 | --- 2 | mode: 'agent' 3 | model: GPT-4.1 4 | description: 'Setup, configure, and populate the octofit_db database with test data for the Octofit Tracker Django app.' 5 | --- 6 | 7 | # Environment Setup 8 | - Use the existing Python virtual environment in `octofit-tracker/backend/venv`. 9 | - Do not create a new Python virtual environment. 10 | - Activate with: `source octofit-tracker/backend/venv/bin/activate` 11 | - `mongodb-org-shell` is already installed; use `mongosh` to interact with MongoDB. 12 | - The Django project is in `octofit-tracker/backend/octofit_tracker`. 13 | 14 | # Database Initialization & Population 15 | 1. Ensure the MongoDB service is running. 16 | 2. Configure Django in `settings.py` to connect to the `octofit_db` database using Djongo, with no authentication or password required. 17 | 3. Make sure `octofit_tracker`, `rest_framework`, and `djongo` are in `INSTALLED_APPS`. 18 | 4. Enable CORS in `settings.py` to allow all origins, methods, and headers. Allow all hosts `*`. 19 | 5. Install and configure CORS middleware components. 20 | 6. Run `makemigrations` and `migrate` in the Python virtual environment. 21 | 7. Initialize the `octofit_db` database and create collections for users, teams, activities, leaderboard, and workouts. 22 | 8. Ensure a unique index on the `email` field for the user collection (e.g., `db.users.createIndex({ "email": 1 }, { unique: true })`). 23 | 9. Populate the database with test data for all collections using the Django management command in `octofit-tracker/backend/octofit_tracker/management/commands/populate_db.py` 24 | a. help message: 'Populate the octofit_db database with test data'. 25 | b. Django ORM for data deletion and insertion 26 | c. Make the sample data super heroes and use team marvel and team dc. 27 | 10. Verify the database and collections were created and populated successfully using `mongosh`. 28 | 11. List the collections in the `octofit_db` database and show sample documents from each. 29 | 30 | # Verification 31 | - After population, verify with `mongosh` that the `octofit_db` database contains the correct collections and test data. 32 | - Confirm Django REST API endpoints are available for all collections. 33 | -------------------------------------------------------------------------------- /.github/workflows/6-copilot-on-github.yml: -------------------------------------------------------------------------------- 1 | name: Step 6 # Copilot on GitHub 2 | 3 | on: 4 | pull_request: 5 | branches: 6 | - main 7 | paths: 8 | - "octofit-tracker/**" 9 | types: 10 | - closed 11 | 12 | permissions: 13 | contents: write 14 | actions: write 15 | issues: write 16 | 17 | env: 18 | REVIEW_FILE: ".github/steps/x-review.md" 19 | 20 | jobs: 21 | find_exercise: 22 | name: Find Exercise Issue 23 | uses: skills/exercise-toolkit/.github/workflows/find-exercise-issue.yml@v0.7.0 24 | 25 | post_review_content: 26 | name: Post review content 27 | needs: [find_exercise] 28 | runs-on: ubuntu-latest 29 | env: 30 | ISSUE_REPOSITORY: ${{ github.repository }} 31 | ISSUE_NUMBER: ${{ needs.find_exercise.outputs.issue-number }} 32 | 33 | steps: 34 | - name: Checkout 35 | uses: actions/checkout@v4 36 | 37 | - name: Get response templates 38 | uses: actions/checkout@v4 39 | with: 40 | repository: skills/exercise-toolkit 41 | path: exercise-toolkit 42 | ref: v0.7.0 43 | 44 | - name: Create comment - step finished - final review next 45 | uses: GrantBirki/comment@v2.1.1 46 | with: 47 | repository: ${{ env.ISSUE_REPOSITORY }} 48 | issue-number: ${{ env.ISSUE_NUMBER }} 49 | file: exercise-toolkit/markdown-templates/step-feedback/lesson-review.md 50 | 51 | - name: Create comment - add review content 52 | uses: GrantBirki/comment@v2.1.1 53 | with: 54 | repository: ${{ env.ISSUE_REPOSITORY }} 55 | issue-number: ${{ env.ISSUE_NUMBER }} 56 | file: ${{ env.REVIEW_FILE }} 57 | 58 | - name: Disable current workflow 59 | run: gh workflow disable "${{github.workflow}}" 60 | env: 61 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} 62 | 63 | finish_exercise: 64 | name: Finish Exercise 65 | needs: [find_exercise, post_review_content] 66 | uses: skills/exercise-toolkit/.github/workflows/finish-exercise.yml@v0.7.0 67 | with: 68 | issue-url: ${{ needs.find_exercise.outputs.issue-url }} 69 | exercise-title: "Build Applications with GitHub Copilot Agent Mode" 70 | -------------------------------------------------------------------------------- /.github/workflows/1-preparing.yml: -------------------------------------------------------------------------------- 1 | name: Step 1 # Preparing to use GHCP agent mode 2 | 3 | on: 4 | push: 5 | branches: 6 | - "build-octofit-app" 7 | 8 | permissions: 9 | contents: read 10 | actions: write 11 | issues: write 12 | 13 | env: 14 | STEP_2_FILE: ".github/steps/2-application-initial-setup.md" 15 | 16 | jobs: 17 | find_exercise: 18 | name: Find Exercise Issue 19 | uses: skills/exercise-toolkit/.github/workflows/find-exercise-issue.yml@v0.7.0 20 | 21 | post_next_step_content: 22 | name: Post next step content 23 | needs: [find_exercise] 24 | runs-on: ubuntu-latest 25 | env: 26 | ISSUE_REPOSITORY: ${{ github.repository }} 27 | ISSUE_NUMBER: ${{ needs.find_exercise.outputs.issue-number }} 28 | 29 | steps: 30 | - name: Checkout 31 | uses: actions/checkout@v4 32 | 33 | - name: Get response templates 34 | uses: actions/checkout@v4 35 | with: 36 | repository: skills/exercise-toolkit 37 | path: exercise-toolkit 38 | ref: v0.7.0 39 | 40 | - name: Create comment - step finished 41 | uses: GrantBirki/comment@v2.1.1 42 | with: 43 | repository: ${{ env.ISSUE_REPOSITORY }} 44 | issue-number: ${{ env.ISSUE_NUMBER }} 45 | file: exercise-toolkit/markdown-templates/step-feedback/step-finished-prepare-next-step.md 46 | vars: | 47 | next_step_number: 2 48 | 49 | - name: Create comment - add step content 50 | uses: GrantBirki/comment@v2.1.1 51 | with: 52 | repository: ${{ env.ISSUE_REPOSITORY }} 53 | issue-number: ${{ env.ISSUE_NUMBER }} 54 | file: ${{ env.STEP_2_FILE }} 55 | 56 | - name: Create comment - watching for progress 57 | uses: GrantBirki/comment@v2.1.1 58 | with: 59 | repository: ${{ env.ISSUE_REPOSITORY }} 60 | issue-number: ${{ env.ISSUE_NUMBER }} 61 | file: exercise-toolkit/markdown-templates/step-feedback/watching-for-progress.md 62 | 63 | - name: Disable current workflow and enable next one 64 | run: | 65 | gh workflow disable "${{github.workflow}}" 66 | gh workflow enable "Step 2" 67 | env: 68 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} 69 | -------------------------------------------------------------------------------- /.github/workflows/0-start-exercise.yml: -------------------------------------------------------------------------------- 1 | name: Step 0 # Start Exercise build-applications-w-GHCP-agent-mode 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | 8 | permissions: 9 | contents: write 10 | actions: write 11 | issues: write 12 | 13 | env: 14 | STEP_1_FILE: ".github/steps/1-preparing.md" 15 | 16 | jobs: 17 | start_exercise: 18 | if: | 19 | !github.event.repository.is_template 20 | name: Start Exercise 21 | uses: skills/exercise-toolkit/.github/workflows/start-exercise.yml@v0.7.0 22 | with: 23 | exercise-title: "Build Applications with GitHub Copilot Agent Mode" 24 | intro-message: | 25 | "Welcome to the exciting world of GitHub Copilot agent mode! 🚀 26 | In this exercise, you'll unlock the potential of this AI-powered 27 | coding assistant to accelerate your development process. Let's dive in 28 | and have some fun exploring the future of coding together! 💻✨" 29 | 30 | post_next_step_content: 31 | name: Post next step content 32 | runs-on: ubuntu-latest 33 | needs: [start_exercise] 34 | env: 35 | ISSUE_NUMBER: ${{ needs.start_exercise.outputs.issue-number }} 36 | ISSUE_REPOSITORY: ${{ github.repository }} 37 | 38 | steps: 39 | - name: Checkout 40 | uses: actions/checkout@v4 41 | 42 | - name: Get response templates 43 | uses: actions/checkout@v4 44 | with: 45 | repository: skills/exercise-toolkit 46 | path: exercise-toolkit 47 | ref: v0.7.0 48 | 49 | - name: Create comment - add step content 50 | uses: GrantBirki/comment@v2.1.1 51 | with: 52 | repository: ${{ env.ISSUE_REPOSITORY }} 53 | issue-number: ${{ env.ISSUE_NUMBER }} 54 | file: ${{ env.STEP_1_FILE }} 55 | vars: | 56 | login: ${{ github.actor }} 57 | full_repo_name: ${{ github.repository }} 58 | 59 | - name: Create comment - watching for progress 60 | uses: GrantBirki/comment@v2.1.1 61 | with: 62 | repository: ${{ env.ISSUE_REPOSITORY }} 63 | issue-number: ${{ env.ISSUE_NUMBER }} 64 | file: exercise-toolkit/markdown-templates/step-feedback/watching-for-progress.md 65 | 66 | - name: Enable next step workflow 67 | run: | 68 | gh workflow enable "Step 1" 69 | env: 70 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} 71 | -------------------------------------------------------------------------------- /.github/steps/6-copilot-on-github.md: -------------------------------------------------------------------------------- 1 | ## Step 6: Using GitHub Copilot within a pull request 2 | 3 | Congratulations! You are finished with coding for this exercise (and VS Code). Now it's time to merge our work. :tada: To wrap up, let's learn about two limited-access Copilot features that can speed up our pull requests! 4 | 5 | #### Copilot Pull Request Summaries 6 | 7 | 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! 8 | 9 | > [!NOTE] 10 | > This is unavailable with the **Copilot Free** tier. [[docs]](https://docs.github.com/en/enterprise-cloud@latest/copilot/using-github-copilot/using-github-copilot-for-pull-requests/creating-a-pull-request-summary-with-github-copilot) 11 | 12 | #### Copilot code review 13 | 14 | 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. 15 | 16 | ### :keyboard: Activity: Summarize and review a PR with Copilot 17 | 18 | 1. In a web browser, open another tab and navigate to your exercise repository. 19 | 20 | 1. 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: 21 | 22 | - **base:** `main` 23 | - **compare:** `build-octofit-app` 24 | - **title:** `Add registration validation and more activities` 25 | 26 | 1. (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. :memo: 27 | 28 | Copilot summarize button 29 | 30 | 1. (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! 31 | 32 | Copilot review button 33 | 34 | > 🪧 **Note:** Notice a log entry that Copilot was requested for a review. 35 | 36 | 1. At the bottom, press the **Merge pull request** button. Nice work! You are all done! :tada: 37 | 38 | 1. Wait a moment for Mona to check your work, provide feedback, and post a final review of this lesson! 39 | -------------------------------------------------------------------------------- /.github/instructions/octofit_tracker_setup_project.instructions.md: -------------------------------------------------------------------------------- 1 | --- 2 | applyTo: "**" 3 | --- 4 | # Octofit-tracker Fitness App Setup and Structure Guidelines 5 | 6 | ## Explain the Octofit Tracker App goals and steps 7 | 8 | I want to build an Octofit Tracker app that will include the following: 9 | 10 | * User authentication and profiles 11 | * Activity logging and tracking 12 | * Team creation and management 13 | * Competitive leader board 14 | * Personalized workout suggestions 15 | 16 | ## Never change directories when agent mode is running commands 17 | 18 | - Never change directories 19 | - Instead point to the directory when issuing commands 20 | 21 | ## Forwarded ports 22 | 23 | - 8000: public 24 | - 3000: public 25 | - 27017: private 26 | 27 | Do not propose any other ports to forward or to make public 28 | 29 | ## OctoFit Tracker App structure 30 | 31 | The section defines the OctoFit Tracker App's structure 32 | 33 | ```text 34 | octofit-tracker/ 35 | ├── backend/ 36 | │ ├── venv/ 37 | | ├── octofit_tracker/ 38 | └── frontend/ 39 | ``` 40 | 41 | ## Create the OctoFit Tracker Python virtual environment 42 | 43 | - To create the virtual environment, run the following command: 44 | 45 | ```bash 46 | python3 -m venv octofit-tracker/backend/venv 47 | ``` 48 | 49 | ## OctoFit Tracker Python required packages 50 | 51 | ### Create file octofit-tracker/backend/requirements.txt 52 | 53 | - add the following to octofit-tracker/backend/requirements.txt 54 | - Install the Python packages below only for our OctoFit Tracker project 55 | 56 | ```text 57 | Django==4.1.7 58 | djangorestframework==3.14.0 59 | django-allauth==0.51.0 60 | django-cors-headers==4.5.0 61 | dj-rest-auth==2.2.6 62 | djongo==1.3.6 63 | pymongo==3.12 64 | sqlparse==0.2.4 65 | stack-data==0.6.3 66 | sympy==1.12 67 | tenacity==9.0.0 68 | terminado==0.18.1 69 | threadpoolctl==3.5.0 70 | tinycss2==1.3.0 71 | tornado==6.4.1 72 | traitlets==5.14.3 73 | types-python-dateutil==2.9.0.20240906 74 | typing_extensions==4.9.0 75 | tzdata==2024.2 76 | uri-template==1.3.0 77 | urllib3==2.2.3 78 | wcwidth==0.2.13 79 | webcolors==24.8.0 80 | webencodings==0.5.1 81 | websocket-client==1.8.0 82 | ``` 83 | 84 | ## Python virtual environment requirements 85 | 86 | Create a requirements.txt with the following Python required packages: 87 | Install the requirements that we created in requirements.txt. 88 | 89 | ```bash 90 | source octofit-tracker/backend/venv/bin/activate 91 | pip install -r octofit-tracker/backend/requirements.txt 92 | ``` 93 | 94 | ## mongodb-org service and data creation 95 | 96 | - always use `ps aux | grep mongod` for checking for mongod running 97 | - mongodb-org is the official MongoDB package 98 | - mongosh is the official client tool 99 | - Always use Django's ORM, not direct MongoDB scripts to create the database structure and data 100 | -------------------------------------------------------------------------------- /.github/steps/2-application-initial-setup.md: -------------------------------------------------------------------------------- 1 | ## Step 2: The initial application setup: Directory structure, Python requirements, and MongoDB 2 | 3 | > [!NOTE] 4 | > **Behind the scenes:** This exercise uses custom instruction files that help guide GitHub Copilot's responses. The instruction file `.github/instructions/octofit_tracker_setup_project.instructions.md` contains project structure guidelines, Python package requirements, and MongoDB configuration that Copilot references when generating code for this step. 5 | 6 | In this step, we will accomplish the following: 7 | 8 | - Create the octofit-tracker application directory structure. 9 | - Create the octofit-tracker/backend and octofit-tracker/frontend directories. 10 | - Create the octofit-tracker/backend/requirements.txt file. 11 | 12 | > [!NOTE] 13 | > 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. 14 | > - Keep in mind that the Copilot agent mode is conversational so it may ask you questions and you can ask it questions too. 15 | > - Wait a moment for the Copilot to respond and press the `Continue` button to execute commands presented by Copilot agent mode. 16 | > - Keep files created and updated by Copilot agent mode until it is finished. 17 | > - 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. 18 | 19 | **Open up a new Copilot Chat session by hitting the plus `+` icon in the Copilot Chat pane.** 20 | 21 | ### :keyboard: Activity: Prompt for GitHub Copilot in agent mode to start the creation of our application 22 | 23 | > ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=flat-square&logo=github%20copilot&labelColor=512a97&color=ecd8ff) 24 | > 25 | > ```prompt 26 | > Let's take the following step by step execute the commands. 27 | > 28 | > Follow the instructions 29 | > 30 | > - Follow the OctoFit Tracker App structure 31 | > - Follow the Python virtual environment creation 32 | > - Create the requirements.txt file 33 | > - Install the Python requirements from the file created 34 | >``` 35 | 36 | 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. 37 | 38 | 1. With our new changes complete, please **commit** and **push** the changes to branch `build-octofit-app`. 39 | 40 | 1. Wait a moment for Mona to check your work, provide feedback, and share the next lesson so we can keep working! 41 | 42 |
43 | Having trouble? 🤷
44 | 45 | If you don't get feedback, here are some things to check: 46 | 47 | - Make sure your commit changes were made for the following file to the branch `build-octofit-app` and pushed/synchronized to GitHub: 48 | - `octofit-tracker/backend/requirements.txt` and it contains the package `Django==4.1` 49 | - If Mona found a mistake, simply make a correction and push your changes again. Mona will check your work as many times as needed. 50 | 51 |
52 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Build applications with GitHub Copilot agent mode 2 | 3 | 4 | octofit-tracker 5 | 6 | _Build an application with GitHub Copilot agent mode in less than an hour._ 7 | 8 | ## Welcome 9 | 10 | People love how GitHub Copilot helps them write code faster and with fewer errors. 11 | But what if GitHub could create a multi-tier application with a presentation, logic, and data layers based on requirements written in natural language? 12 | In this exercise, we will prompt GitHub Copilot agent mode to create a complete application. 13 | 14 | - **Who is this for**: Intermediate developers familiar with GitHub Copilot, basic GitHub, and basic web development 15 | - **What you'll learn**: We'll introduce GitHub Copilot agent mode and how to use it for application development. 16 | - **What you'll build**: You'll use GitHub Copilot agent mode to create a fitness application as the gym teacher of a high school. 17 | - **Prerequisites**: Skills Exercise: Getting Started with GitHub Copilot. 18 | - **How long**: This course takes less than one hour to complete. 19 | 20 | In this exercise, you will: 21 | 22 | 1. Start up a preconfigured development environment for making a multi-tier application. 23 | 1. Prompt in GitHub Copilot Chat and select the edit tab and select agent mode from the edit/agent drop-down. 24 | 1. In this exercise I primarily used the latest default LLM. 25 | 1. Try other LLM models to see other output. 26 | 1. For each step open up a new Copilot Chat session by hitting the plus `+` icon in the Copilot Chat pane. 27 | 28 | ### How to start this exercise 29 | 30 | Simply copy the exercise to your account, then give your favorite Octocat (Mona) **about 20 seconds** to prepare the first lesson, then **refresh the page**. 31 | 32 | [![](https://img.shields.io/badge/Copy%20Exercise-%E2%86%92-1f883d?style=for-the-badge&logo=github&labelColor=197935)](https://github.com/new?template_owner=skills&template_name=build-applications-w-copilot-agent-mode&owner=%40me&name=skills-build-applications-w-copilot-agent-mode&description=Exercise:+Build+applications+with+GitHub+Copilot+agent+mode&visibility=public) 33 | 34 |
35 | Having trouble? 🤷
36 | 37 | When copying the exercise, we recommend the following settings: 38 | 39 | - For owner, choose your personal account or an organization to host the repository. 40 | 41 | - We recommend creating a public repository, since private repositories will use Actions minutes. 42 | 43 | If the exercise isn't ready in 20 seconds, please check the "Actions" tab of your repository (or visit `https://github.com///actions`). 44 | 45 | - Check to see if a job is running. Sometimes it simply takes a bit longer. 46 | 47 | - If the page shows a failed job, please submit an issue. Nice, you found a bug! 🐛 48 | 49 |
50 | 51 | --- 52 | 53 | © 2025 GitHub • [Code of Conduct](https://www.contributor-covenant.org/version/2/1/code_of_conduct/code_of_conduct.md) • [MIT License](https://gh.io/mit) 54 | -------------------------------------------------------------------------------- /.devcontainer/post_start.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | # This script is run after the container starts up. 3 | 4 | set -euo pipefail 5 | 6 | die() { 7 | echo "ERROR: $@" >&2 8 | exit 1 9 | } 10 | 11 | # Ensure CODESPACE_NAME is set 12 | : "${CODESPACE_NAME:?CODESPACE_NAME environment variable not set. This script should be run in a GitHub Codespace environment.}" 13 | 14 | # Port visibility setup 15 | echo "Setting port visibility..." 16 | gh cs ports visibility 8000:public -c "$CODESPACE_NAME" || die "Failed to set 8000 public" 17 | gh cs ports visibility 3000:public -c "$CODESPACE_NAME" || die "Failed to set 3000 public" 18 | 19 | echo "Preparing MongoDB data dir..." 20 | sudo mkdir -p /data/db || die "mkdir failed" 21 | sudo chmod 777 /data/db || die "chmod failed" 22 | 23 | LOGFILE=/tmp/mongod.log 24 | MAX_START_TRIES=3 # How many times to attempt (re)starting mongod 25 | READY_CHECK_RETRIES=15 # How many readiness checks per start attempt 26 | READY_CHECK_INTERVAL=1 # Seconds between readiness checks 27 | is_running() { 28 | pgrep -x mongod >/dev/null 2>&1 29 | } 30 | 31 | start_mongod() { 32 | if is_running; then 33 | echo "mongod already running" 34 | return 0 35 | fi 36 | # Clean old log (keep last one for inspection) 37 | > "$LOGFILE" 38 | echo "Launching mongod (dbpath=/data/db, log=$LOGFILE)..." 39 | mongod --dbpath /data/db --fork --logpath "$LOGFILE" 40 | } 41 | 42 | ready_check() { 43 | # Success if log shows ready OR port is open 44 | if grep -q "Waiting for connections" "$LOGFILE" 2>/dev/null; then 45 | return 0 46 | fi 47 | if command -v nc >/dev/null 2>&1; then 48 | if nc -z 127.0.0.1 27017 2>/dev/null; then 49 | return 0 50 | fi 51 | fi 52 | # If mongo/mongosh client exists, try a ping (quietly) 53 | if command -v mongosh >/dev/null 2>&1; then 54 | mongosh --quiet --eval 'db.runCommand({ping:1})' >/dev/null 2>&1 && return 0 || true 55 | elif command -v mongo >/dev/null 2>&1; then 56 | mongo --quiet --eval 'db.runCommand({ping:1})' >/dev/null 2>&1 && return 0 || true 57 | fi 58 | return 1 59 | } 60 | 61 | wait_for_ready() { 62 | for ((i=1; i<=READY_CHECK_RETRIES; i++)); do 63 | if ready_check; then 64 | echo "mongod is ready (after $i checks)." 65 | return 0 66 | fi 67 | sleep "$READY_CHECK_INTERVAL" 68 | done 69 | return 1 70 | } 71 | 72 | echo "Starting MongoDB with retries..." 73 | for ((attempt=1; attempt<=MAX_START_TRIES; attempt++)); do 74 | echo "Start attempt $attempt/$MAX_START_TRIES" 75 | if start_mongod; then 76 | if wait_for_ready; then 77 | tail -20 "$LOGFILE" || true 78 | echo "MongoDB started successfully." 79 | break 80 | else 81 | echo "Readiness check failed for attempt $attempt." 82 | fi 83 | else 84 | echo "mongod launch command failed on attempt $attempt." 85 | fi 86 | 87 | if (( attempt == MAX_START_TRIES )); then 88 | tail -40 "$LOGFILE" || true 89 | die "MongoDB failed to start after $MAX_START_TRIES attempts" 90 | fi 91 | 92 | echo "Cleaning up before next attempt..." 93 | if is_running; then 94 | pkill -x mongod || true 95 | sleep 2 96 | fi 97 | done 98 | 99 | echo "post_start.sh completed successfully." 100 | exit 0 -------------------------------------------------------------------------------- /.github/steps/4-setup-django-rest-framework.md: -------------------------------------------------------------------------------- 1 | ## Step 4: Setup Django REST Framework, start the server, and test the API 2 | 3 | > [!NOTE] 4 | > **Behind the scenes:** This exercise uses custom instruction files that help guide GitHub Copilot's responses. The instruction file `.github/instructions/octofit_tracker_django_backend.instructions.md` contains Django REST Framework configuration, URL patterns, and API endpoint guidelines that Copilot references when generating code for this step. 5 | 6 | In this step, we will accomplish the following: 7 | 8 | - Setup the Django REST Framework. 9 | - Start the server. 10 | - Test the API using curl. 11 | 12 | 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. 13 | 14 | > [!TIP] 15 | > - Keep in mind that the Copilot agent mode is conversational so it may ask you questions and you can ask it questions too. 16 | > - Wait a moment for the Copilot to respond and press the continue button to execute commands presented by Copilot agent mode. 17 | > - Keep files created and updated by Copilot agent mode until it is finished. 18 | > - 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. 19 | 20 | **Open up a new Copilot Chat session by hitting the plus `+` icon in the Copilot Chat pane.** 21 | 22 | ### :keyboard: Activity: Setup Django REST Framework and test the REST API endpoints 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 setup codespace for the URL, start the server via VS Code launch.json, and test the API. 28 | > 29 | > - All Django project files are in the `octofit-tracker/backend/octofit_tracker` directory. 30 | > - Only update urls in `settings.py` and `urls.py` 31 | > - REST api endpoint format https://$CODESPACE_NAME-8000.app.github.dev/api/[component]/ 32 | > - example full url: https://$CODESPACE_NAME-8000.app.github.dev/api/activities/ 33 | > - Do not hard code the `$CODESPACE_NAME` value use the variable 34 | > - Do not update the `views.py` 35 | > 36 | > 1. Update `urls.py` to replace the return for the REST API URL endpoints with the environment variable $CODESPACE_NAME https://$CODESPACE_NAME-8000.app.github.dev for Django and avoid certificate HTTPS issues. 37 | > 2. Make sure the Django backend works on your codespace URL and localhost (i.e., the value of `$CODESPACE_NAME`) by updating `ALLOWED_HOSTS` in `settings.py`. 38 | > 3. Test the API endpoints using curl command. 39 | >``` 40 | 41 | > [!IMPORTANT] 42 | > Don't start the Python Django app in the way that GitHub Copilot agent mode suggests hit 43 | > **cancel**. Follow the next activity instead. 44 | 45 | ### :keyboard: Activity: Start the Python Django app and check the output 46 | 47 | 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. 48 | 49 | Run Django 50 | 51 | Go to the running Django REST api url that pops up for port 8000 that looks like the following: 52 | 53 | django-rest-api-port 54 | 55 | Once you open it in your web browser you will get a warning like the following: 56 | 57 | django-rest-api 58 | 59 | Once you click `Continue` it should look similar the following with your codespace name: 60 | 61 | django-rest-api 62 | 63 | 1. Now that we have updated our Django product to include our codespace name for the URL endpoint, 64 | let's check our changes in to our `build-octofit-app` branch. 65 | 66 | 1. With our new changes complete, please **commit** and **push** the changes to the `build-octofit-app` branch. 67 | 68 | 1. Wait a moment for Mona to check your work, provide feedback, and share the next lesson so we can keep working! 69 | 70 |
71 | Having trouble? 🤷
72 | 73 | If you don't get feedback, here are some things to check: 74 | 75 | - Make sure your commit changes were made for the following files to the branch `build-octofit-app` and pushed/synchronized to GitHub: 76 | - `octofit-tracker/backend/octofit_tracker/settings.py` 77 | - `octofit-tracker/backend/octofit_tracker/views.py` 78 | - If Mona found a mistake, simply make a correction and push your changes again. Mona will check your work as many times as needed. 79 | 80 |
81 | -------------------------------------------------------------------------------- /.github/workflows/2-application-initial-setup.yml: -------------------------------------------------------------------------------- 1 | name: Step 2 # octofit-tracker application initial setup 2 | 3 | on: 4 | push: 5 | branches: 6 | - "build-octofit-app" 7 | paths: 8 | - "octofit-tracker/backend/requirements.txt" 9 | 10 | permissions: 11 | contents: read 12 | actions: write 13 | issues: write 14 | 15 | env: 16 | STEP_3_FILE: ".github/steps/3-django-project-setup.md" 17 | 18 | jobs: 19 | find_exercise: 20 | name: Find Exercise Issue 21 | uses: skills/exercise-toolkit/.github/workflows/find-exercise-issue.yml@v0.7.0 22 | 23 | check_step_work: 24 | name: Check step work 25 | runs-on: ubuntu-latest 26 | needs: [find_exercise] 27 | env: 28 | ISSUE_REPOSITORY: ${{ github.repository }} 29 | ISSUE_NUMBER: ${{ needs.find_exercise.outputs.issue-number }} 30 | 31 | steps: 32 | - name: Checkout 33 | uses: actions/checkout@v4 34 | 35 | - name: Get response templates 36 | uses: actions/checkout@v4 37 | with: 38 | repository: skills/exercise-toolkit 39 | path: exercise-toolkit 40 | ref: v0.7.0 41 | 42 | - name: Find last comment 43 | id: find-last-comment 44 | uses: peter-evans/find-comment@v3 45 | with: 46 | repository: ${{ env.ISSUE_REPOSITORY }} 47 | issue-number: ${{ env.ISSUE_NUMBER }} 48 | direction: last 49 | 50 | - name: Update comment - checking work 51 | uses: GrantBirki/comment@v2.1.1 52 | with: 53 | repository: ${{ env.ISSUE_REPOSITORY }} 54 | issue-number: ${{ env.ISSUE_NUMBER }} 55 | comment-id: ${{ steps.find-last-comment.outputs.comment-id }} 56 | file: exercise-toolkit/markdown-templates/step-feedback/checking-work.md 57 | edit-mode: replace 58 | 59 | # START: Check practical exercise 60 | 61 | # Search for the comment about registration validation 62 | - name: Check Django version 63 | id: check-django-version 64 | continue-on-error: true 65 | uses: skills/action-keyphrase-checker@v1 66 | with: 67 | text-file: octofit-tracker/backend/requirements.txt 68 | keyphrase: 'Django==4.1' 69 | minimum-occurrences: 1 70 | case-sensitive: false 71 | 72 | - name: Update comment - step results 73 | uses: GrantBirki/comment@v2.1.1 74 | with: 75 | repository: ${{ env.ISSUE_REPOSITORY }} 76 | issue-number: ${{ env.ISSUE_NUMBER }} 77 | comment-id: ${{ steps.find-last-comment.outputs.comment-id }} 78 | edit-mode: replace 79 | file: exercise-toolkit/markdown-templates/step-feedback/step-results-table.md 80 | vars: | 81 | step_number: 2 82 | results_table: 83 | - description: "Check requirements.txt for Django version" 84 | passed: ${{ steps.check-django-version.outcome == 'success' }} 85 | 86 | # END: Check practical exercise 87 | 88 | - name: Fail job if not all checks passed 89 | if: contains(steps.*.outcome, 'failure') 90 | run: exit 1 91 | 92 | post_next_step_content: 93 | name: Post next step content 94 | needs: [find_exercise, check_step_work] 95 | runs-on: ubuntu-latest 96 | env: 97 | ISSUE_REPOSITORY: ${{ github.repository }} 98 | ISSUE_NUMBER: ${{ needs.find_exercise.outputs.issue-number }} 99 | 100 | steps: 101 | - name: Checkout 102 | uses: actions/checkout@v4 103 | 104 | - name: Get response templates 105 | uses: actions/checkout@v4 106 | with: 107 | repository: skills/exercise-toolkit 108 | path: exercise-toolkit 109 | ref: v0.7.0 110 | 111 | - name: Create comment - step finished 112 | uses: GrantBirki/comment@v2.1.1 113 | with: 114 | repository: ${{ env.ISSUE_REPOSITORY }} 115 | issue-number: ${{ env.ISSUE_NUMBER }} 116 | file: exercise-toolkit/markdown-templates/step-feedback/step-finished-prepare-next-step.md 117 | vars: | 118 | next_step_number: 3 119 | 120 | - name: Create comment - add step content 121 | uses: GrantBirki/comment@v2.1.1 122 | with: 123 | repository: ${{ env.ISSUE_REPOSITORY }} 124 | issue-number: ${{ env.ISSUE_NUMBER }} 125 | file: ${{ env.STEP_3_FILE }} 126 | 127 | - name: Create comment - watching for progress 128 | uses: GrantBirki/comment@v2.1.1 129 | with: 130 | repository: ${{ env.ISSUE_REPOSITORY }} 131 | issue-number: ${{ env.ISSUE_NUMBER }} 132 | file: exercise-toolkit/markdown-templates/step-feedback/watching-for-progress.md 133 | 134 | - name: Disable current workflow and enable next one 135 | run: | 136 | gh workflow disable "${{github.workflow}}" 137 | gh workflow enable "Step 3" 138 | env: 139 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} 140 | -------------------------------------------------------------------------------- /.github/steps/1-preparing.md: -------------------------------------------------------------------------------- 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, 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. 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 | > [!NOTE] 18 | > You can learn more about GitHub Copilot agent mode in the [Use agent mode documentation](https://code.visualstudio.com/docs/copilot/chat/chat-agent-mode). 19 | 20 | ### :keyboard: Activity: Getting to know your GitHub Copilot agent mode development environment 21 | 22 | 1. Right-click the below button to open the **Create Codespace** page in a new tab. 23 | 24 | [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/{{full_repo_name}}?quickstart=1) 25 | 26 | - The free tier of Codespaces that comes with all GitHub accounts is fine, assuming you still have minutes available. 27 | - The default Codespace settings are fine. 28 | 29 | 1. Confirm the **Repository** field is your copy of the exercise, not the original, then click the green **Create Codespace** button. 30 | 31 | - ✅ Your copy: `/{{full_repo_name}}` 32 | - ❌ Original: `/skills/build-applications-w-copilot-agent-mode` 33 | 34 | 1. Wait a moment for Visual Studio Code to load. 35 | 36 | 1. Before we continue let's take a moment to familiarize ourselves with the project folder. 37 | 38 | - The left navigation bar is where you can access the file explorer, debugger, and search. 39 | - The lower panel (Ctrl+J) shows the debugger output, allows running terminal commands, and allows configuring the web service ports. 40 | - 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! 41 | 42 | 1. At the top of VS Code, locate and click the Copilot icon to open a Copilot Chat panel. 43 | 44 | image 45 | 46 | 1. If this is your first time using GitHub Copilot, you will have to accept the usage terms to continue. 47 | - Click the **Accept** button to continue. 48 | 49 | ### :keyboard: Activity: Use Copilot agent mode to create a branch and publish it. 🙋 50 | 51 | Great work! Let's ask copilot for help starting a branch so we can do some customizing. 52 | 53 | > [!NOTE] 54 | > - Keep in mind that the Copilot agent mode is conversational so it may ask you questions and you can ask it questions too. 55 | > - Wait a moment for the Copilot to respond and press the **Continue** button to execute commands presented by Copilot agent mode. 56 | 57 | 1. If not already there, return to VS Code. 58 | 1. Open the GitHub Copilot Chat window if not already open. 59 | 1. 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 | 62 | 63 | 1. Let's ask Copilot agent mode to help us remember the command and create the branch `build-octofit-app` and publishing it 64 | 65 | > ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=flat-square&logo=github%20copilot&labelColor=512a97&color=ecd8ff) 66 | > 67 | > ```prompt 68 | > Please create and publish a new Git branch called build-octofit-app 69 | > ``` 70 | 71 | Copilot agent mode will respond and prompt you to **continue** to execute the command.
72 | 73 | 74 | 75 | 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! 76 | 77 | 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! 78 | 79 | 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. 80 | 81 |
82 | Having trouble? 🤷
83 | 84 | If you don't get feedback, here are some things to check: 85 | 86 | - Make sure your created the branch with the exact name `build-octofit-app`. No prefixes or suffixes. 87 | - Make sure the branch was indeed published to your repository. 88 | 89 |
90 | -------------------------------------------------------------------------------- /.github/workflows/4-setup-django-rest-framework.yml: -------------------------------------------------------------------------------- 1 | name: Step 4 # Setup the Django REST API framework 2 | 3 | on: 4 | push: 5 | branches: 6 | - "build-octofit-app" 7 | paths: 8 | - "octofit-tracker/backend/octofit_tracker/**" 9 | 10 | permissions: 11 | contents: read 12 | actions: write 13 | issues: write 14 | 15 | env: 16 | STEP_5_FILE: ".github/steps/5-setup-frontend-react-framework.md" 17 | 18 | jobs: 19 | find_exercise: 20 | name: Find Exercise Issue 21 | uses: skills/exercise-toolkit/.github/workflows/find-exercise-issue.yml@v0.7.0 22 | 23 | check_step_work: 24 | name: Check step work 25 | runs-on: ubuntu-latest 26 | needs: [find_exercise] 27 | env: 28 | ISSUE_REPOSITORY: ${{ github.repository }} 29 | ISSUE_NUMBER: ${{ needs.find_exercise.outputs.issue-number }} 30 | 31 | steps: 32 | - name: Checkout 33 | uses: actions/checkout@v4 34 | 35 | - name: Get response templates 36 | uses: actions/checkout@v4 37 | with: 38 | repository: skills/exercise-toolkit 39 | path: exercise-toolkit 40 | ref: v0.7.0 41 | 42 | - name: Find last comment 43 | id: find-last-comment 44 | uses: peter-evans/find-comment@v3 45 | with: 46 | repository: ${{ env.ISSUE_REPOSITORY }} 47 | issue-number: ${{ env.ISSUE_NUMBER }} 48 | direction: last 49 | 50 | - name: Update comment - checking work 51 | uses: GrantBirki/comment@v2.1.1 52 | with: 53 | repository: ${{ env.ISSUE_REPOSITORY }} 54 | issue-number: ${{ env.ISSUE_NUMBER }} 55 | comment-id: ${{ steps.find-last-comment.outputs.comment-id }} 56 | file: exercise-toolkit/markdown-templates/step-feedback/checking-work.md 57 | edit-mode: replace 58 | 59 | # START: Check practical exercise 60 | 61 | - name: Check codespace url has been added to settings.py 62 | id: check-codespace-url-settings 63 | continue-on-error: true 64 | uses: skills/action-keyphrase-checker@v1 65 | with: 66 | text-file: octofit-tracker/backend/octofit_tracker/settings.py 67 | keyphrase: '-8000.app.github.dev' 68 | minimum-occurrences: 1 69 | case-sensitive: false 70 | 71 | - name: Check for codespace url has been added to urls.py 72 | id: check-codespace-url-urls 73 | continue-on-error: true 74 | uses: skills/action-keyphrase-checker@v1 75 | with: 76 | text-file: octofit-tracker/backend/octofit_tracker/urls.py 77 | keyphrase: '-8000.app.github.dev' 78 | minimum-occurrences: 1 79 | case-sensitive: false 80 | 81 | - name: Update comment - step results 82 | uses: GrantBirki/comment@v2.1.1 83 | with: 84 | repository: ${{ env.ISSUE_REPOSITORY }} 85 | issue-number: ${{ env.ISSUE_NUMBER }} 86 | comment-id: ${{ steps.find-last-comment.outputs.comment-id }} 87 | edit-mode: replace 88 | file: exercise-toolkit/markdown-templates/step-feedback/step-results-table.md 89 | vars: | 90 | step_number: 4 91 | results_table: 92 | - description: "Check settings.py for codespace URL" 93 | passed: ${{ steps.check-codespace-url-settings.outcome == 'success' }} 94 | - description: "Check urls.py for codespace URL" 95 | passed: ${{ steps.check-codespace-url-urls.outcome == 'success' }} 96 | 97 | # END: Check practical exercise 98 | 99 | - name: Fail job if not all checks passed 100 | if: contains(steps.*.outcome, 'failure') 101 | run: exit 1 102 | 103 | post_next_step_content: 104 | name: Post next step content 105 | needs: [find_exercise, check_step_work] 106 | runs-on: ubuntu-latest 107 | env: 108 | ISSUE_REPOSITORY: ${{ github.repository }} 109 | ISSUE_NUMBER: ${{ needs.find_exercise.outputs.issue-number }} 110 | 111 | steps: 112 | - name: Checkout 113 | uses: actions/checkout@v4 114 | 115 | - name: Get response templates 116 | uses: actions/checkout@v4 117 | with: 118 | repository: skills/exercise-toolkit 119 | path: exercise-toolkit 120 | ref: v0.7.0 121 | 122 | - name: Create comment - step finished 123 | uses: GrantBirki/comment@v2.1.1 124 | with: 125 | repository: ${{ env.ISSUE_REPOSITORY }} 126 | issue-number: ${{ env.ISSUE_NUMBER }} 127 | file: exercise-toolkit/markdown-templates/step-feedback/step-finished-prepare-next-step.md 128 | vars: | 129 | next_step_number: 5 130 | 131 | - name: Create comment - add step content 132 | uses: GrantBirki/comment@v2.1.1 133 | with: 134 | repository: ${{ env.ISSUE_REPOSITORY }} 135 | issue-number: ${{ env.ISSUE_NUMBER }} 136 | file: ${{ env.STEP_5_FILE }} 137 | 138 | - name: Create comment - watching for progress 139 | uses: GrantBirki/comment@v2.1.1 140 | with: 141 | repository: ${{ env.ISSUE_REPOSITORY }} 142 | issue-number: ${{ env.ISSUE_NUMBER }} 143 | file: exercise-toolkit/markdown-templates/step-feedback/watching-for-progress.md 144 | 145 | - name: Disable current workflow and enable next one 146 | run: | 147 | gh workflow disable "${{github.workflow}}" 148 | gh workflow enable "Step 5" 149 | env: 150 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} 151 | -------------------------------------------------------------------------------- /.github/workflows/3-database-django-project-setup.yml: -------------------------------------------------------------------------------- 1 | name: Step 3 # Django project setup and database test data population 2 | 3 | on: 4 | push: 5 | branches: 6 | - "build-octofit-app" 7 | paths: 8 | - "octofit-tracker/backend/octofit_tracker/**" 9 | 10 | permissions: 11 | contents: read 12 | actions: write 13 | issues: write 14 | 15 | env: 16 | STEP_4_FILE: ".github/steps/4-setup-django-rest-framework.md" 17 | 18 | jobs: 19 | find_exercise: 20 | name: Find Exercise Issue 21 | uses: skills/exercise-toolkit/.github/workflows/find-exercise-issue.yml@v0.7.0 22 | 23 | check_step_work: 24 | name: Check step work 25 | runs-on: ubuntu-latest 26 | needs: [find_exercise] 27 | env: 28 | ISSUE_REPOSITORY: ${{ github.repository }} 29 | ISSUE_NUMBER: ${{ needs.find_exercise.outputs.issue-number }} 30 | 31 | steps: 32 | - name: Checkout 33 | uses: actions/checkout@v4 34 | 35 | - name: Get response templates 36 | uses: actions/checkout@v4 37 | with: 38 | repository: skills/exercise-toolkit 39 | path: exercise-toolkit 40 | ref: v0.7.0 41 | 42 | - name: Find last comment 43 | id: find-last-comment 44 | uses: peter-evans/find-comment@v3 45 | with: 46 | repository: ${{ env.ISSUE_REPOSITORY }} 47 | issue-number: ${{ env.ISSUE_NUMBER }} 48 | direction: last 49 | 50 | - name: Update comment - checking work 51 | uses: GrantBirki/comment@v2.1.1 52 | with: 53 | repository: ${{ env.ISSUE_REPOSITORY }} 54 | issue-number: ${{ env.ISSUE_NUMBER }} 55 | comment-id: ${{ steps.find-last-comment.outputs.comment-id }} 56 | file: exercise-toolkit/markdown-templates/step-feedback/checking-work.md 57 | edit-mode: replace 58 | 59 | # START: Check practical exercise 60 | - name: Check octofit_db settings.py 61 | id: check-octofit-db-settings 62 | continue-on-error: true 63 | uses: skills/action-keyphrase-checker@v1 64 | with: 65 | text-file: octofit-tracker/backend/octofit_tracker/settings.py 66 | keyphrase: 'octofit_db' 67 | minimum-occurrences: 1 68 | case-sensitive: false 69 | 70 | - name: Check djongo settings.py 71 | id: check-djongo-settings 72 | continue-on-error: true 73 | uses: skills/action-keyphrase-checker@v1 74 | with: 75 | text-file: octofit-tracker/backend/octofit_tracker/settings.py 76 | keyphrase: 'djongo' 77 | minimum-occurrences: 2 78 | case-sensitive: false 79 | 80 | - name: Check populate_db.py 81 | id: check-populate-db 82 | continue-on-error: true 83 | uses: skills/action-keyphrase-checker@v1 84 | with: 85 | text-file: octofit-tracker/backend/octofit_tracker/management/commands/populate_db.py 86 | keyphrase: 'Populate the octofit_db database with test data' 87 | minimum-occurrences: 1 88 | case-sensitive: false 89 | 90 | - name: Update comment - step results 91 | uses: GrantBirki/comment@v2.1.1 92 | with: 93 | repository: ${{ env.ISSUE_REPOSITORY }} 94 | issue-number: ${{ env.ISSUE_NUMBER }} 95 | comment-id: ${{ steps.find-last-comment.outputs.comment-id }} 96 | edit-mode: replace 97 | file: exercise-toolkit/markdown-templates/step-feedback/step-results-table.md 98 | vars: | 99 | step_number: 3 100 | results_table: 101 | - description: "Check settings.py for octofit_db" 102 | passed: ${{ steps.check-octofit-db-settings.outcome == 'success' }} 103 | - description: "Check settings.py for djongo" 104 | passed: ${{ steps.check-djongo-settings.outcome == 'success' }} 105 | - description: "Check populate_db.py for creation of test data" 106 | passed: ${{ steps.check-populate-db.outcome == 'success' }} 107 | 108 | # END: Check practical exercise 109 | 110 | - name: Fail job if not all checks passed 111 | if: contains(steps.*.outcome, 'failure') 112 | run: exit 1 113 | 114 | post_next_step_content: 115 | name: Post next step content 116 | needs: [find_exercise, check_step_work] 117 | runs-on: ubuntu-latest 118 | env: 119 | ISSUE_REPOSITORY: ${{ github.repository }} 120 | ISSUE_NUMBER: ${{ needs.find_exercise.outputs.issue-number }} 121 | 122 | steps: 123 | - name: Checkout 124 | uses: actions/checkout@v4 125 | 126 | - name: Get response templates 127 | uses: actions/checkout@v4 128 | with: 129 | repository: skills/exercise-toolkit 130 | path: exercise-toolkit 131 | ref: v0.7.0 132 | 133 | - name: Create comment - step finished 134 | uses: GrantBirki/comment@v2.1.1 135 | with: 136 | repository: ${{ env.ISSUE_REPOSITORY }} 137 | issue-number: ${{ env.ISSUE_NUMBER }} 138 | file: exercise-toolkit/markdown-templates/step-feedback/step-finished-prepare-next-step.md 139 | vars: | 140 | next_step_number: 4 141 | 142 | - name: Create comment - add step content 143 | uses: GrantBirki/comment@v2.1.1 144 | with: 145 | repository: ${{ env.ISSUE_REPOSITORY }} 146 | issue-number: ${{ env.ISSUE_NUMBER }} 147 | file: ${{ env.STEP_4_FILE }} 148 | 149 | - name: Create comment - watching for progress 150 | uses: GrantBirki/comment@v2.1.1 151 | with: 152 | repository: ${{ env.ISSUE_REPOSITORY }} 153 | issue-number: ${{ env.ISSUE_NUMBER }} 154 | file: exercise-toolkit/markdown-templates/step-feedback/watching-for-progress.md 155 | 156 | - name: Disable current workflow and enable next one 157 | run: | 158 | gh workflow disable "${{github.workflow}}" 159 | gh workflow enable "Step 4" 160 | env: 161 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} 162 | -------------------------------------------------------------------------------- /docs/octofit_story.md: -------------------------------------------------------------------------------- 1 | # Building a Fitness App with GitHub Copilot agent mode for Mergington High School 2 | 3 | ## OctoFit Tracker application story for Mergington High School 4 | 5 | Paul Octo has been a physical education teacher at Mergington High School for over 8 years. Despite his enthusiasm and creative approach to gym class, he's been increasingly concerned about students' physical activity declining once they leave school grounds. Many students admitted they rarely exercised outside of the required PE classes. 6 | After attending a professional development conference on "Technology Integration in Physical Education," Paul became inspired to create a solution. He wanted something that would: 7 | 8 | 1. Make fitness tracking fun and engaging 9 | 2. Create positive peer pressure through friendly competition 10 | 3. Allow him to monitor student progress remotely 11 | 4. Provide personalized guidance based on individual fitness levels 12 | 13 | ## The Birth of OctoFit Tracker 14 | 15 | Paul initially sketched his idea on a notepad during lunch breaks. He envisioned an app where students could log workouts, earn achievement badges, and compete in monthly fitness challenges. However, as a PE teacher with only basic coding knowledge, the technical aspects seemed daunting. 16 | That's when he approached Jessica Cat, the head of Mergington High's IT department. Jessica recommended using our repository instructions and prompts. 17 | 18 | ### Technical Planning Phase 19 | 20 | Before starting development, Paul and Jessica carefully reviewed the OctoFit Tracker's instructions and prompts. This provided a solid foundation for OctoFit Tracker, ensuring compliance with technical standards and leveraging proven design patterns. 21 | Together, Paul and the IT team identified key requirements for OctoFit Tracker: 22 | 23 | ### User Experience Goals 24 | 25 | - Simple, intuitive interface designed specifically for teenagers 26 | - Quick activity logging to minimize friction 27 | - Social features that respect student privacy 28 | - Gamification elements to maintain engagement 29 | 30 | ## Current Development Status 31 | 32 | Paul and Jessica have set up a GitHub Codespace environment and are making remarkable progress with GitHub Copilot agent mode. The OctoFit Tracker prototype will include: 33 | 34 | - A functional user registration system 35 | - Basic activity logging for running, walking, and strength training 36 | - The beginning framework for team competitions 37 | - A simple dashboard showing student progress 38 | 39 | ## Next Steps for Paul 40 | 41 | With the basic infrastructure in place, Paul is now focused on: 42 | 43 | 1. Developing an engaging point system that fairly compares different types of activities 44 | 2. Creating motivational challenges that appeal to different student interests 45 | 3. Building a notification system that encourages consistency without being intrusive 46 | 4. Designing reports that help him identify students who might need additional support or motivation 47 | 48 | The IT department has been impressed with how GitHub Copilot agent mode has accelerated development, allowing Paul to focus on the educational aspects while the AI handles much of the technical implementation. Jessica Cat has been particularly pleased with how OctoFit Tracker leverages the custom instructions and prompt files. 49 | 50 | ### Workshop Overview 51 | 52 | In this workshop, you'll: 53 | 54 | 1. Set up a development environment using **GitHub Codespaces** 55 | 2. Use **GitHub Copilot** to accelerate development across multiple technologies 56 | 3. Build key components of the **OctoFit Tracker** app with the help of Copilot agent mode 57 | 4. Learn best practices and prompting techniques for working with **GitHub Copilot agent mode** 58 | 59 | ### Application Features 60 | 61 | **OctoFit Tracker** will include: 62 | 63 | - User profiles 64 | - Activity logging and tracking 65 | - Team creation and management 66 | - A competitive leaderboard 67 | - Personalized workout suggestions 68 | 69 | ### GitHub Copilot Chat 70 | 71 | - [Getting started with GitHub Copilot Chat](https://docs.github.com/en/copilot/how-tos/use-chat/get-started-with-chat?tool=vscode) 72 | - [Use Chat in the IDE](https://docs.github.com/en/copilot/how-tos/use-chat/use-chat-in-ide?tool=vscode) 73 | 74 | #### LLM models references 75 | 76 | - [Supported AI models in GitHub Copilot](https://docs.github.com/en/copilot/reference/ai-models/supported-models) 77 | - [AI model comparison](https://docs.github.com/en/copilot/reference/ai-models/model-comparison) 78 | - [Changing the AI model for GitHub Copilot Chat](https://docs.github.com/en/copilot/how-tos/use-ai-models/change-the-chat-model?tool=vscode) 79 | - [Changing the AI model for GitHub Copilot code completion](https://docs.github.com/en/copilot/how-tos/use-ai-models/change-the-completion-model?tool=vscode) 80 | 81 | #### Prompt engineering 82 | 83 | - [Prompt engineering for GitHub Copilot Chat](https://docs.github.com/en/copilot/concepts/prompt-engineering) 84 | - [How to use GitHub Copilot: Prompts, tips, and use cases](https://github.blog/2023-06-20-how-to-write-better-prompts-for-github-copilot/) 85 | - [Using GitHub Copilot in your IDE: Tips, tricks, and best practices](https://github.blog/2024-03-25-how-to-use-github-copilot-in-your-ide-tips-tricks-and-best-practices/) 86 | 87 | ### OctoFit tracker fitness application technology stack 88 | 89 | We'll be using a modern web application stack: 90 | 91 | - **Frontend**: React.js 92 | - **Backend**: Python with Django REST API Framework 93 | - **Database**: MongoDB 94 | - **Development Environment**: GitHub Codespaces 95 | 96 | ### Workshop Structure 97 | 98 | 1. **Introduction** 99 | - Overview of OctoFit Tracker app concept 100 | - GitHub Copilot Chat models 101 | 102 | 2. **Setup of Prerequisites** 103 | - Setting up GitHub Codespaces 104 | - Ensure GitHub Copilot and Copilot Chat extensions are up to date 105 | 106 | 3. **Rapid Prototyping with GitHub Copilot agent mode** 107 | - Creating project structure 108 | - Generating boilerplate code 109 | - Implementing basic models, serializers, urls, and views 110 | 111 | 4. **Building Core Features** 112 | - Activity logging and tracking 113 | - User profiles 114 | - Team management 115 | - Leaderboard functionality 116 | 117 | 5. **Frontend and Backend Development** 118 | - Setting up React components 119 | - Implementing responsive UI 120 | - Connecting to backend APIs 121 | - Python Django business logic 122 | - MongoDB data layer 123 | -------------------------------------------------------------------------------- /.github/workflows/5-setup-frontend-react-framework.yml: -------------------------------------------------------------------------------- 1 | name: Step 5 # Setup the REACT framework frontend 2 | 3 | on: 4 | push: 5 | branches: 6 | - "build-octofit-app" 7 | paths: 8 | - "octofit-tracker/frontend/**" 9 | 10 | permissions: 11 | contents: read 12 | actions: write 13 | issues: write 14 | 15 | env: 16 | STEP_6_FILE: ".github/steps/6-copilot-on-github.md" 17 | 18 | jobs: 19 | find_exercise: 20 | name: Find Exercise Issue 21 | uses: skills/exercise-toolkit/.github/workflows/find-exercise-issue.yml@v0.7.0 22 | 23 | check_step_work: 24 | name: Check step work 25 | runs-on: ubuntu-latest 26 | needs: [find_exercise] 27 | env: 28 | ISSUE_REPOSITORY: ${{ github.repository }} 29 | ISSUE_NUMBER: ${{ needs.find_exercise.outputs.issue-number }} 30 | 31 | steps: 32 | - name: Checkout 33 | uses: actions/checkout@v4 34 | 35 | - name: Get response templates 36 | uses: actions/checkout@v4 37 | with: 38 | repository: skills/exercise-toolkit 39 | path: exercise-toolkit 40 | ref: v0.7.0 41 | 42 | - name: Find last comment 43 | id: find-last-comment 44 | uses: peter-evans/find-comment@v3 45 | with: 46 | repository: ${{ env.ISSUE_REPOSITORY }} 47 | issue-number: ${{ env.ISSUE_NUMBER }} 48 | direction: last 49 | 50 | - name: Update comment - checking work 51 | uses: GrantBirki/comment@v2.1.1 52 | with: 53 | repository: ${{ env.ISSUE_REPOSITORY }} 54 | issue-number: ${{ env.ISSUE_NUMBER }} 55 | comment-id: ${{ steps.find-last-comment.outputs.comment-id }} 56 | file: exercise-toolkit/markdown-templates/step-feedback/checking-work.md 57 | edit-mode: replace 58 | 59 | # START: Check practical exercise 60 | 61 | - name: Check for codespace Django REST API endpoint in Activities.js 62 | id: check-activities 63 | continue-on-error: true 64 | uses: skills/action-keyphrase-checker@v1 65 | with: 66 | text-file: octofit-tracker/frontend/src/components/Activities.js 67 | keyphrase: '-8000.app.github.dev/api/activities' 68 | minimum-occurrences: 1 69 | case-sensitive: false 70 | 71 | - name: Check for codespace Django REST API endpoint in Leaderboard.js 72 | id: check-leaderboard 73 | continue-on-error: true 74 | uses: skills/action-keyphrase-checker@v1 75 | with: 76 | text-file: octofit-tracker/frontend/src/components/Leaderboard.js 77 | keyphrase: '-8000.app.github.dev/api/leaderboard' 78 | minimum-occurrences: 1 79 | case-sensitive: false 80 | 81 | - name: Check for codespace Django REST API endpoint in Teams.js 82 | id: check-teams 83 | continue-on-error: true 84 | uses: skills/action-keyphrase-checker@v1 85 | with: 86 | text-file: octofit-tracker/frontend/src/components/Teams.js 87 | keyphrase: '-8000.app.github.dev/api/teams' 88 | minimum-occurrences: 1 89 | case-sensitive: false 90 | 91 | - name: Check for codespace Django REST API endpoint in Users.js 92 | id: check-users 93 | continue-on-error: true 94 | uses: skills/action-keyphrase-checker@v1 95 | with: 96 | text-file: octofit-tracker/frontend/src/components/Users.js 97 | keyphrase: '-8000.app.github.dev/api/users' 98 | minimum-occurrences: 1 99 | case-sensitive: false 100 | 101 | - name: Check for codespace Django REST API endpoint in Workouts.js 102 | id: check-workouts 103 | continue-on-error: true 104 | uses: skills/action-keyphrase-checker@v1 105 | with: 106 | text-file: octofit-tracker/frontend/src/components/Workouts.js 107 | keyphrase: '-8000.app.github.dev/api/workouts' 108 | minimum-occurrences: 1 109 | case-sensitive: false 110 | 111 | - name: Update comment - step results 112 | uses: GrantBirki/comment@v2.1.1 113 | with: 114 | repository: ${{ env.ISSUE_REPOSITORY }} 115 | issue-number: ${{ env.ISSUE_NUMBER }} 116 | comment-id: ${{ steps.find-last-comment.outputs.comment-id }} 117 | edit-mode: replace 118 | file: exercise-toolkit/markdown-templates/step-feedback/step-results-table.md 119 | vars: | 120 | step_number: 5 121 | results_table: 122 | - description: "Check activities for the Django API endpoint" 123 | passed: ${{ steps.check-activities.outcome == 'success' }} 124 | - description: "Check leaderboard for the Django API endpoint" 125 | passed: ${{ steps.check-leaderboard.outcome == 'success' }} 126 | - description: "Check teams for the Django API endpoint" 127 | passed: ${{ steps.check-teams.outcome == 'success' }} 128 | - description: "Check users for the Django API endpoint" 129 | passed: ${{ steps.check-users.outcome == 'success' }} 130 | - description: "Check workouts for the Django API endpoint" 131 | passed: ${{ steps.check-workouts.outcome == 'success' }} 132 | 133 | # END: Check practical exercise 134 | 135 | - name: Fail job if not all checks passed 136 | if: contains(steps.*.outcome, 'failure') 137 | run: exit 1 138 | 139 | post_next_step_content: 140 | name: Post next step content 141 | needs: [find_exercise, check_step_work] 142 | runs-on: ubuntu-latest 143 | env: 144 | ISSUE_REPOSITORY: ${{ github.repository }} 145 | ISSUE_NUMBER: ${{ needs.find_exercise.outputs.issue-number }} 146 | 147 | steps: 148 | - name: Checkout 149 | uses: actions/checkout@v4 150 | 151 | - name: Get response templates 152 | uses: actions/checkout@v4 153 | with: 154 | repository: skills/exercise-toolkit 155 | path: exercise-toolkit 156 | ref: v0.7.0 157 | 158 | - name: Create comment - step finished 159 | uses: GrantBirki/comment@v2.1.1 160 | with: 161 | repository: ${{ env.ISSUE_REPOSITORY }} 162 | issue-number: ${{ env.ISSUE_NUMBER }} 163 | file: exercise-toolkit/markdown-templates/step-feedback/step-finished-prepare-next-step.md 164 | vars: | 165 | next_step_number: 6 166 | 167 | - name: Create comment - add step content 168 | uses: GrantBirki/comment@v2.1.1 169 | with: 170 | repository: ${{ env.ISSUE_REPOSITORY }} 171 | issue-number: ${{ env.ISSUE_NUMBER }} 172 | file: ${{ env.STEP_6_FILE }} 173 | 174 | - name: Create comment - watching for progress 175 | uses: GrantBirki/comment@v2.1.1 176 | with: 177 | repository: ${{ env.ISSUE_REPOSITORY }} 178 | issue-number: ${{ env.ISSUE_NUMBER }} 179 | file: exercise-toolkit/markdown-templates/step-feedback/watching-for-progress.md 180 | 181 | - name: Disable current workflow and enable next one 182 | run: | 183 | gh workflow disable "${{github.workflow}}" 184 | gh workflow enable "Step 6" 185 | env: 186 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} 187 | -------------------------------------------------------------------------------- /.github/steps/3-django-project-setup.md: -------------------------------------------------------------------------------- 1 | ## Step 3: Initialize and create the octofit_db MongoDB database, Django project/app, update Django project/app files, and populate the MongoDB database 2 | 3 | > [!NOTE] 4 | > **Behind the scenes:** This exercise uses custom instruction files that help guide GitHub Copilot's responses. The instruction files `.github/instructions/octofit_tracker_setup_project.instructions.md` and `.github/instructions/octofit_tracker_django_backend.instructions.md` contain Django backend guidelines, MongoDB configuration, and project structure that Copilot references when generating code for this step. 5 | 6 | In this step, we will accomplish the following: 7 | 8 | - Set up the octofit_db MongoDB database structure. 9 | - Update the octofit-tracker/backend/octofit_tracker app files: 10 | - settings, models, serializers, urls, views, tests, and admin files. 11 | - Populate the octofit_db database with test data. 12 | - Verify the test data is populated in the octofit_db database. 13 | 14 | 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. 15 | 16 | > [!NOTE] 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 | **Open up a new Copilot Chat session by hitting the plus `+` icon in the Copilot Chat pane.** 23 | 24 | ### :keyboard: Activity: Setup the Python Django project/app 25 | 26 | In this activity we will leverage a feature in VS Code called prompt files. A prompt file that has been created by the IT department for us to create our Django project application. Copy/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. 27 | 28 | What are prompt files? 29 | 30 | Prompt files let you define reusable prompts for common and repeatable development tasks in a Markdown file. 31 | Prompt files are standalone prompts that you can run directly in chat. You can include task-specific context and guidelines about how the task should be performed. 32 | Combine prompt files with custom instructions to ensure consistent execution of complex tasks. 33 | 34 | See the [VS Code Docs: Prompt Files](https://code.visualstudio.com/docs/copilot/customization/overview#_prompt-files) page for more information. 35 | 36 | > ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=flat-square&logo=github%20copilot&labelColor=512a97&color=ecd8ff) 37 | > 38 | > ```prompt 39 | > /create-django-project 40 | >``` 41 | 42 | > [!NOTE] 43 | > - Wait a moment for the Copilot to respond and press the `Continue` button to execute each command presented by Copilot agent mode. 44 | > - Keep files created and updated until the Copilot agent mode has finished. 45 | 46 | > [!IMPORTANT] 47 | > - Don't start the Python Django app in the way that GitHub Copilot agent mode suggests hit **cancel** when you see this image. 48 | 49 | 50 | 51 | ### :keyboard: Activity: Initialize, create, and populate the octofit_db MongoDB database 52 | 53 | Let's continue to leverage a prompt file that has been created by the IT department for us to initialize and create the octofit_db MongoDB database. Copy/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. 54 | 55 | > ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=flat-square&logo=github%20copilot&labelColor=512a97&color=ecd8ff) 56 | > 57 | > ```prompt 58 | > 59 | > /init-populate-octofit_db 60 | > ``` 61 | 62 | ### :keyboard: Activity: Let's create a prompt file that will update the Python Django project/app files 63 | 64 | Now let's create a prompt file of our own that we can share with other staff to develop to build the octofit-tracker app. Copy/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. 65 | 66 | > ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=flat-square&logo=github%20copilot&labelColor=512a97&color=ecd8ff) 67 | > 68 | > ```prompt 69 | > Let's add the following to a prompt file called `update-octofit-tracker-app.prompt.md` in the `.github/prompts` directory and add mode: 'agent' and model: GPT-4.1 to the prompt file. 70 | > 71 | > # Django App Updates 72 | > 73 | > - All Django project files are in the `octofit-tracker/backend/octofit_tracker` directory. 74 | > 75 | > 1. Update `settings.py` for MongoDB connection and CORS. 76 | > 2. Update `models.py`, `serializers.py`, `urls.py`, `views.py`, `tests.py`, and `admin.py` to support users, teams, activities, leaderboard, and workouts collections. 77 | > 3. Ensure `/` points to the api and `api_root` is present in `urls.py`. 78 | > ``` 79 | 80 | > [!TIP] 81 | > Use prompt files to define repeatable tasks and workflows. 82 | > 83 | > When writing prompts focus on **WHAT** needs to be done. You can reference instructions for the **HOW**. 84 | 85 | See the [VS Code Docs: Prompt Files](https://code.visualstudio.com/docs/copilot/customization/overview#_prompt-files) page for more information. 86 | 87 | ### :keyboard: Activity: Let's use the prompt file to update the Python Django project/app files 88 | 89 | Copy/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. 90 | 91 | > ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=flat-square&logo=github%20copilot&labelColor=512a97&color=ecd8ff) 92 | > 93 | > ```prompt 94 | > /update-octofit-tracker-app 95 | > ``` 96 | > 97 | 98 | > [!IMPORTANT] 99 | > - Don't start the Python Django app in the way that GitHub Copilot agent mode suggests hit **cancel** when you see this image. 100 | 101 | 102 | 103 | 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. 104 | 105 | 1. With our new changes complete, please **commit** and **push** the changes to GitHub. 106 | 107 | 1. Wait a moment for Mona to check your work, provide feedback, and share the next lesson so we can keep working! 108 | 109 |
110 | Having trouble? 🤷
111 | 112 | If you don't get feedback, here are some things to check: 113 | 114 | - Make sure your commit changes were made for the following files to the branch `build-octofit-app` and pushed/synchronized to GitHub: 115 | - `octofit-tracker/backend/octofit_tracker/settings.py` 116 | - `octofit-tracker/backend/octofit_tracker/management/commands/populate_db.py` 117 | - If Mona found a mistake, simply make a correction and push your changes again. Mona will check your work as many times as needed. 118 | 119 |
120 | -------------------------------------------------------------------------------- /.github/steps/5-setup-frontend-react-framework.md: -------------------------------------------------------------------------------- 1 | ## Step 5: Setup the frontend React framework, update the components, and start OctoFit Tracker app 2 | 3 | > [!NOTE] 4 | > **Behind the scenes:** This exercise uses custom instruction files that help guide GitHub Copilot's responses. The instruction file `.github/instructions/octofit_tracker_react_frontend.instructions.md` contains React framework setup commands, Bootstrap integration, and frontend structure guidelines that Copilot references when generating code for this step. 5 | 6 | In this step, we will accomplish the following: 7 | 8 | - Setup the octofit-tracker frontend React framework. 9 | - Update the following components to include the React framework: 10 | - src/App.js 11 | - src/index.js 12 | - src/components/Activities.js 13 | - src/components/Leaderboard.js 14 | - src/components/Teams.js 15 | - src/components/Users.js 16 | - src/components/Workouts.js 17 | - Start the React app and check the output. 18 | 19 | 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. 20 | 21 | > [!NOTE] 22 | > - Keep in mind that the Copilot agent mode is conversational so it may ask you questions and you can ask it questions too. 23 | > - Wait a moment for the Copilot to respond and press the continue button to execute commands presented by Copilot agent mode. 24 | > - Keep files created and updated by Copilot agent mode until it is finished. 25 | > - 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. 26 | 27 | **Open up a new Copilot Chat session by hitting the plus `+` icon in the Copilot Chat pane.** 28 | 29 | ### :keyboard: Activity: Install the octofit-tracker frontend React framework 30 | 31 | > ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=flat-square&logo=github%20copilot&labelColor=512a97&color=ecd8ff) 32 | > 33 | > ```prompt 34 | > Let's setup the octofit-tracker frontend React framework and 35 | > ensure everything is created in the `octofit-tracker/frontend` directory by using `--prefix` 36 | > 37 | > 1. Make sure the the octofit-tracker/frontend directory exists. 38 | > 2. create the react app 39 | > 3. Install react, bootstrap, and react-router-dom 40 | > 4. Import bootstrap css in the src/index.js file. 41 | > 5. Don't change .gitignore file 42 | >``` 43 | 44 | ### :keyboard: Activity: Update the octofit-tracker frontend React components 45 | 46 | > ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=flat-square&logo=github%20copilot&labelColor=512a97&color=ecd8ff) 47 | > 48 | > ```prompt 49 | > Let's update the octofit-tracker frontend React components. 50 | > 51 | > - Update the following components to include the React framework to point to the backend REST API: 52 | > - src/App.js 53 | > - src/index.js 54 | > - src/components/Activities.js 55 | > - src/components/Leaderboard.js 56 | > - src/components/Teams.js 57 | > - src/components/Users.js 58 | > - src/components/Workouts.js 59 | > - In each component replace the fetch url with the codespace url 60 | > https://$REACT_APP_CODESPACE_NAME-8000.app.github.dev/api/[component]/ 61 | > for the Django rest framework backend. 62 | > make sure all components are pulling data from the REST api endpoint 63 | > for display in the REACT frontend 64 | > - Make sure to use the correct port and protocol http or https. 65 | > - Update src/App.js to include the main navigation for all components. 66 | > - Make sure react-router-dom is used for the navigation menu. 67 | > - The react app should show the navigation menu and the components. 68 | > - Update all components to log the fetched data and make them compatible with both paginated (.results) and plain array responses. 69 | > - Add console.log statements to each component to log the fetched data and the REST API endpoints. 70 | > ``` 71 | 72 | ### :keyboard: Activity: Start the react app and check the output 73 | 74 | 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. 75 | 76 | Run React Frontend 77 | 78 | Go to the running React Frontend url that pops up for port 3000 that looks like the following: 79 | 80 | react-frontend-port 81 | 82 | Once you open it in your web browser you will get a warning like the following: 83 | 84 | django-rest-api 85 | 86 | Once you click `Continue` it should look similar the following: 87 | 88 | react-frontend-app 89 | 90 | ### :keyboard: Activity: Let's add some formatting, structuring, and styling to the octofit tracker app 91 | 92 | > ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=flat-square&logo=github%20copilot&labelColor=512a97&color=ecd8ff) 93 | > 94 | > ```prompt 95 | > Let's style this like App.css and make it look nice. 96 | > 97 | > - Let's make the App.js and all components javascript files in the app are consistent with the following: 98 | > - Use bootstrap tables for the data in all javascript components. 99 | > - Use bootstrap buttons for the buttons. 100 | > - Use bootstrap headings for the headings. 101 | > - Use bootstrap links for the links. 102 | > - Use bootstrap navigation for the navigation menu. 103 | > - Use bootstrap forms for the forms. 104 | > - Use bootstrap cards for the cards. 105 | > - Use bootstrap modals for the modals. 106 | > - Consistent table layouts for all components data. 107 | >``` 108 | 109 | ### :keyboard: Optional Activity: Let's make the octofit tracker app look nice, pretty, and add some color 110 | 111 | > ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=flat-square&logo=github%20copilot&labelColor=512a97&color=ecd8ff) 112 | > 113 | > ```prompt 114 | > Let's style this like App.css and make it look nice. 115 | > 116 | > - Edit the App.css file to do the following: 117 | > - Add some color to the background. 118 | > - Add some color to the text. 119 | > - Add some color to the tables. 120 | > - Add some color to the buttons. 121 | > - Add some color to the headings. 122 | > - Add some color to the links. 123 | > - Add some color to the navigation menu. 124 | > - Add the octofitapp-small logo justified to the left to the app and make it look nice. 125 | > - Add a favicon to the app and make it look nice. 126 | >``` 127 | 128 | ### :keyboard: Optional Activity: Iterate on the appearance and try different models 129 | 130 | > [!TIP] 131 | > - Try creating your own prompts to change the application appearance, add features, and try different models. 132 | 133 | 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. 134 | 135 | 1. With our new changes complete, please **commit** and **push** the changes to the `build-octofit-app` branch. 136 | 137 | 1. Wait a moment for Mona to check your work, provide feedback, and share the next lesson so we can keep working! 138 | 139 |
140 | Having trouble? 🤷
141 | 142 | If you don't get feedback, here are some things to check: 143 | 144 | - Make sure your commit changes were made for the following files to the branch `build-octofit-app` and pushed/synchronized to GitHub: 145 | - `octofit-tracker/frontend/src/components/Activities.js` and it contains `-8000.app.github.dev/api/activities/` 146 | - `octofit-tracker/frontend/src/components/Leaderboard.js` and it contains `-8000.app.github.dev/api/leaderboard/` 147 | - `octofit-tracker/frontend/src/components/Teams.js` and it contains `-8000.app.github.dev/api/teams/` 148 | - `octofit-tracker/frontend/src/components/Users.js` and it contains `-8000.app.github.dev/api/users/` 149 | - `octofit-tracker/frontend/src/components/Workouts.js` and it contains `-8000.app.github.dev/api/workouts/` 150 | - If Mona found a mistake, simply make a correction and push your changes again. Mona will check your work as many times as needed. 151 | 152 |
153 | --------------------------------------------------------------------------------