diff --git a/.github/steps/1-preparing.md b/.github/steps/1-preparing.md index 68da9c6..c415ee3 100644 --- a/.github/steps/1-preparing.md +++ b/.github/steps/1-preparing.md @@ -118,6 +118,14 @@ Great work! Now that we are familiar with the app and we know it works, let's as 1. After a moment, look in the VS Code lower status bar, on the left, to see the active branch. It should now say `build-octofit-app`. If so, you are all done with this step! -## Next step +1. Now that your branch is pushed to GitHub, Mona should already be busy checking your work. Give her a moment and keep watch in the comments. You will see her respond with progress info and the next lesson. -Now that your branch is pushed to GitHub, let's continue on to the next step Step 2: Application Initial Setup - {{{next_step_file}}}. +
+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. + +
diff --git a/.github/steps/2-application-initial-setup.md b/.github/steps/2-application-initial-setup.md index 8480b98..f392657 100644 --- a/.github/steps/2-application-initial-setup.md +++ b/.github/steps/2-application-initial-setup.md @@ -10,14 +10,14 @@ In this step, we will accomplish the following: 2. Click the GitHub Copilot Chat click the :paperclip: and add "Open Editors" to the prompt. 3. Copy and paste the following prompt in the GitHub Copilot Chat and select the "Agent" instead of "Ask" or "Edit" from the drop down where you are inserting the prompt. - + ->[!NOTE] +> [!NOTE] > Do not change the model from GPT-4o this will be an optional activity at the end of the course. > Keep in mind that the Copilot agent mode is conversational so it may ask you questions and you can ask it questions too. > Wait a moment for the Copilot to respond and press the continue button to execute commands presented by Copilot agent mode. > Keep files created and updated by Copilot agent mode until it is finished. -> Agent mode has the ability to evaluate your code base and execute commands and add/refactor/delete parts of your code base and automatically self heal if it or you make a mistake in the process. +> Agent mode has the ability to evaluate your code base and execute commands and add/refactor/delete parts of your code base and automatically self heal if it or you makes a mistake in the process. ### :keyboard: Activity: Prompt for GitHub Copilot in agent mode to start the creation of our application @@ -33,18 +33,19 @@ In this step, we will accomplish the following: > > Don't proceed with the next activity until all of these steps are completed. >``` +> > [!IMPORTANT] > Once the above activity installs all the required packages, proceed to the next activity. -### :keyboard: Activity: Let's install MongoDB +### :keyboard: Activity: Let's install mongoDB > **Prompt** > > ```prompt -> Based on the example monafit tracker app in the docs/mona-high-school-fitness-tracker.md file and use octofit as the name for Mergington's high school's app. Let's install MongoDB. +> Based on the example monafit tracker app in the docs/mona-high-school-fitness-tracker.md file and use octofit as the name for mergington's high schools app. > Let's install mongoDB. > -> 1. Install MongoDB and make sure the command is complete. +> 1. Install mongoDB and make sure the command is complete. > > Don't proceed with the next activity until all of these steps are completed. >``` @@ -53,15 +54,15 @@ In this step, we will accomplish the following: > If the command completes in the terminal but agent mode shows it is still running click stop. > You may need to paste the prompt again in agent mode. -### :keyboard: Activity: Let's start and verify MongoDB is running +### :keyboard: Activity: Let's start and verify mongoDB is running > **Prompt** > > ```prompt -> Based on the example monafit tracker app in the docs/mona-high-school-fitness-tracker.md file and use octofit as the name for Mergington's high school's app. Let's start and verify MongoDB is running. +> Based on the example monafit tracker app in the docs/mona-high-school-fitness-tracker.md file and use octofit as the name for mergington's high schools app. > Let's start and verify mongoDB is running. > -> 1. Start the MongoDB service. -> 2. Verify the MongoDB service is running. +> 1. Start the mongoDB service. +> 2. Verify the mongoDB service running. > > Don't proceed with the next activity until all of these steps are completed. >``` @@ -73,6 +74,19 @@ In this step, we will accomplish the following: > If the command completes in the terminal but agent mode shows it is still running click stop. > You may need to paste the prompt again in agent mode. -## Next step +1. Now that we have created the app directory structure, setup a Python virtual environment, and Copilot agent mode helped write a requirements.txt to install all project dependencies let's check our changes in to our `build-octofit-app` branch. + +1. With our new changes complete, please **commit** and **push** the changes to GitHub. + +1. Wait a moment for Mona to check your work, provide feedback, and share the final lesson. Almost done! + +
+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. -Now that the application structure and initial setup is complete, let's continue on to the next step [Step 3: Database and Django Project Setup](./3-database-django-project-setup.md) +
diff --git a/.github/steps/3-database-django-project-setup.md b/.github/steps/3-database-django-project-setup.md index 172ea4a..9561d34 100644 --- a/.github/steps/3-database-django-project-setup.md +++ b/.github/steps/3-database-django-project-setup.md @@ -2,22 +2,22 @@ In this step, we will accomplish the following: -- Setup the octofit_db MongoDB database structure. +- Set up the octofit_db MongoDB database structure. - Update the octofit-tracker/backend/octofit_tracker app files: - - settings, models, serializers, urls, views, tests, admin files. + - settings, models, serializers, urls, views, tests, and admin files. - Populate the octofit_db database with test data. - Verify the test data is populated in the octofit_db database. 1. Open all files in the `docs` folder and keep this file open in the editor. -2. Click the GitHub Copilot Chat click the :paperclip: and add "Open Editors" to the prompt. -3. Copy and paste the following prompt in the GitHub Copilot Chat and select the "Agent" instead of "Ask" or "Edit" from the drop down where you are inserting the prompt. +2. Click the GitHub Copilot Chat, click the :paperclip:, and add "Open Editors" to the prompt. +3. Copy and paste the following prompt in the GitHub Copilot Chat and select the "Agent" instead of "Ask" or "Edit" from the dropdown where you are inserting the prompt. >[!NOTE] -> Do not change the model from GPT-4o this will be an optional activity at the end of the course. -> Keep in mind that the Copilot agent mode is conversational so it may ask you questions and you can ask it questions too. +> Do not change the model from GPT-4; this will be an optional activity at the end of the course. +> Keep in mind that the Copilot agent mode is conversational, so it may ask you questions, and you can ask it questions too. > Wait a moment for the Copilot to respond and press the continue button to execute commands presented by Copilot agent mode. > Keep files created and updated by Copilot agent mode until it is finished. -> Agent mode has the ability to evaluate your code base and execute commands and add/refactor/delete parts of your code base and automatically self heal if it or you makes a mistake in the process. +> Agent mode has the ability to evaluate your codebase and execute commands and add/refactor/delete parts of your codebase and automatically self-heal if it or you make a mistake in the process. ### :keyboard: Activity: Setup the Python Django project/app @@ -41,11 +41,11 @@ In this step, we will accomplish the following: > **Prompt** > > ```prompt -> Based on the example monafit tracker app in the docs/mona-high-school-fitness-tracker.md file and use octofit as the name for Mergington's high school's app. Let's initialize the octofit_db database. +> Based on the example monafit tracker app in the docs/mona-high-school-fitness-tracker.md file and use octofit as the name for Merington's high school's app. Let's initialize the octofit_db database. > > 1. Initialize the mongo octofit_db database. > 2. Create a correct table structure for users, teams, activity, leaderboard, and workouts collections. -> 3. Make sure there is a unique id for primary key for the user collection. +> 3. Make sure there is a unique ID for the primary key for the user collection. > ex. db.users.createIndex({ "email": 1 }, { unique: true }) > 4. Execute the command for me to create the database. > 5. List the collections in the octofit_db database. @@ -54,8 +54,8 @@ In this step, we will accomplish the following: > ``` > [!IMPORTANT] -> You may need to copy and paste the response in the terminal if there is no "Continue" button. -> Sometimes there is a scrolling issue and there may not be a "Continue" button. +> If there is no "Continue" button, just pull the left side of the GitHub Copilot Chat panel over to the left, and it should appear. +> If this doesn't work, you may need to copy and paste the response in the terminal if there is no "Continue" button. ### :keyboard: Activity: Update the Python Django project/app files @@ -77,13 +77,14 @@ In this step, we will accomplish the following: > 11. Install CORS middleware components. > > Don't proceed with the next activity until all of these steps are completed. +> ``` -### :keyboard: Activity: populate the octofit_db database with test data from Django project/app files +### :keyboard: Activity: Populate the octofit_db database with test data from Django project/app files > **Prompt** > > ```prompt -> Based on the example monafit tracker app in the docs/mona-high-school-fitness-tracker.md file and use octofit as the name for Mergington's high school's app. Let's populate the octofit_db database with test data. Use same data from docs/mona-high-school-fitness-tracker.md file. +> Based on the example monafit tracker app in the docs/mona-high-school-fitness-tracker.md file and use octofit as the name for Merington's high school's app. Let's populate the octofit_db database with test data. Use the same data from docs/mona-high-school-fitness-tracker.md file. > > 1. Create a test data file in the octofit-tracker/backend/octofit_tracker directory. > 2. Run makemigrations and migrate the database in a Python virtual environment. @@ -91,11 +92,26 @@ In this step, we will accomplish the following: > 4. Verify the test data is populated in the octofit_db database. > > Don't proceed with the next activity until all of these steps are completed. ->``` +> ``` > [!IMPORTANT] -> You may need to prompt agent mode and tell it that "the command is cut off". +> If there is no "Continue" button, just pull the left side of the GitHub Copilot Chat panel over to the left, and it should appear. +> If this doesn't work, you may need to copy and paste the response in the terminal if there is no "Continue" button. + +1. Now that we have created the database structure, updated our Django project files, and populated the database, let's check our changes into our `build-octofit-app` branch. + +1. With our new changes complete, please **commit** and **push** the changes to GitHub. + +1. Wait a moment for Mona to check your work, provide feedback, and share the final lesson. Almost done! + +
+Having trouble? 🤷
+ +If you don't get feedback, here are some things to check: -## Next step +- Make sure your commit changes were made for the following files to the branch `build-octofit-app` and pushed/synchronized to GitHub: + - `octofit-tracker/backend/octofit_tracker/settings.py` + - `octofit-tracker/backend/octofit_tracker/management/commands/populate_db.py` +- If Mona found a mistake, simply make a correction and push your changes again. Mona will check your work as many times as needed. -Now that the Django project backend setup and the database is populated, let's continue on to the next step [Step 4: Setup Django REST Framework](./4-setup-django-rest-framework.md) +
diff --git a/.github/steps/4-setup-django-rest-framework.md b/.github/steps/4-setup-django-rest-framework.md index 41ad292..d5077ae 100644 --- a/.github/steps/4-setup-django-rest-framework.md +++ b/.github/steps/4-setup-django-rest-framework.md @@ -29,7 +29,7 @@ In this step, we will accomplish the following: > ```prompt >Based on the example monafit tracker app in the docs/mona-high-school-fitness-tracker.md file and use octofit as the name for Mergington's high school's app. Let's setup codespace for the URL, restart the server, and test the API. > -> 1. Activate the python virtual environment. +> 1. Activate the Python virtual environment. > 2. Update #file:octofit-tracker/backend/octofit_tracker/views.py to replace the return for the REST API URL endpoints with the codespace URL https://[REPLACE-THIS-WITH-YOUR-CODESPACE-NAME]-8000.app.github.dev for Django and avoid certificate HTTPS issues. > 3. Make sure the Django backend works on [REPLACE-THIS-WITH-YOUR-CODESPACE-NAME]-8000.app.github.dev and localhost:8000. > 4. Test the API endpoints using curl command. @@ -40,13 +40,28 @@ In this step, we will accomplish the following: Now, let's actually try running the Django application! In the left sidebar, select the `Run and Debug` tab and then press the **Start Debugging** icon. - + >[!IMPORTANT] > Make sure to replace [REPLACE-THIS-WITH-YOUR-CODESPACE-NAME] with your codespace name. > ex. redesigned-spork-g6pj46rr9hpp6x > You can get the codespace name by running the following command in the terminal: `echo $CODESPACE_NAME`. -## Next step +1. Now that we have updated our Django product to include our codespace name for the URL endpoint, + let's check our changes in to our `build-octofit-app` branch. -Now that the Django REST framework is setup, let's continue on to the next step [Step 5: Setup the React Frontend Framework](./5-setup-frontend-react-framework.md) +1. With our new changes complete, please **commit** and **push** the changes to GitHub. + +1. Wait a moment for Mona to check your work, provide feedback, and share the final lesson. Almost done! + +
+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. + +
diff --git a/.github/steps/5-setup-frontend-react-framework.md b/.github/steps/5-setup-frontend-react-framework.md index 30b9be8..dd44ffa 100644 --- a/.github/steps/5-setup-frontend-react-framework.md +++ b/.github/steps/5-setup-frontend-react-framework.md @@ -11,7 +11,7 @@ In this step, we will accomplish the following: - src/components/Teams.js - src/components/Users.js - src/components/Workouts.js -- Start the react app and check the output. +- Start the React app and check the output. 1. Open all files in the `docs` folder and keep this file open in the editor. 2. Click the GitHub Copilot Chat click the :paperclip: and add "Open Editors" to the prompt. @@ -29,23 +29,29 @@ In this step, we will accomplish the following: > **Prompt** > > ```prompt -> Based on the example monafit tracker app in the docs/mona-high-school-fitness-tracker.md file and use octofit as the name for Merington's high school's app. Let's setup codespace for 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 bootstrap in the octofit-tracker/frontend directory. -> 4. Import bootstrap CSS in the src/index.js file. +> 4. Import bootstrap css in the src/index.js file. > 5. Install the react-router-dom in the octofit-tracker/frontend directory. +> 6. Don't change .gitignore file > > Don't proceed with the next activity until all of these steps are completed. >``` ### :keyboard: 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`. +> > **Prompt** > > ```prompt -> Based on the example monafit tracker app in the docs/mona-high-school-fitness-tracker.md file and use octofit as the name for Merington's high school's app. Let's update the octofit-tracker frontend React components. +> 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 @@ -55,8 +61,8 @@ In this step, we will accomplish the following: > - src/components/Teams.js > - src/components/Users.js > - src/components/Workouts.js -> - In each component replace the fetch URL with the codespace URL [REPLACE-THIS-WITH-YOUR-CODESPACE-NAME] for the Django REST framework backend. -> - Make sure to use the correct port and protocol HTTP or HTTPS. +> - In each component replace the fetch url with the codespace url [REPLACE-THIS-WITH-YOUR-CODESPACE-NAME] 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. @@ -64,21 +70,26 @@ In this step, we will accomplish the following: > 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`. + ### :keyboard: 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. - + ### :keyboard: Activity: Let's add some formatting, structuring, and styling to the octofit tracker app > **Prompt** > > ```prompt -> Based on the example monafit tracker app in the docs/mona-high-school-fitness-tracker.md file and use octofit as the name for Merington's high school's app. Let's style this like App.css and make it look nice. +> 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 consistent with the following: -> - Use bootstrap tables for the data in all JavaScript components. +> - 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. @@ -95,9 +106,9 @@ Now, let's actually try running the react application! In the left sidebar, sele > **Prompt** > > ```prompt -> Based on the example monafit tracker app in the docs/mona-high-school-fitness-tracker.md file and use octofit as the name for Merington's high school's app. Let's style this like App.css and make it look nice. +> 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: +> - 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. @@ -108,7 +119,7 @@ Now, let's actually try running the react application! In the left sidebar, sele > - 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. +>Don't proceed with the next activity until all of these steps are completed. >``` ### :keyboard: Optional Activity: Iterate on the appearance and try different models @@ -116,3 +127,24 @@ Now, let's actually try running the react application! In the left sidebar, sele >[!NOTE] > 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. + +1. With our new changes complete, please **commit** and **push** the changes to GitHub. + +1. Wait a moment for Mona to check your work, provide feedback, and share the final lesson. Almost done! + +
+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. + +
diff --git a/.github/steps/6-copilot-on-github.md b/.github/steps/6-copilot-on-github.md new file mode 100644 index 0000000..d6228bd --- /dev/null +++ b/.github/steps/6-copilot-on-github.md @@ -0,0 +1,43 @@ +## 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. :tada: 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]](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) + +#### 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]](https://docs.github.com/en/copilot/using-github-copilot/code-review/using-copilot-code-review) + +### :keyboard: 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. + +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: + + - **base:** `main` + - **compare:** `build-octofit-app` + - **title:** `Add registration validation and more activities` + +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: + + Copilot summarize button + +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! + + Copilot review button + + > **Tip:** Notice a log entry that Copilot was requested for a review. + +1. At the bottom, press the **Merge pull request** button. Nice work! You are all done! :tada: + +1. Wait a moment for Mona to check your work, provide feedback, and post a final review of this lesson! diff --git a/.github/steps/x-review.md b/.github/steps/x-review.md new file mode 100644 index 0000000..4273193 --- /dev/null +++ b/.github/steps/x-review.md @@ -0,0 +1,31 @@ +## Review + +_Congratulations, you've completed this exercise and learned a lot about GitHub Copilot agent mode!_ + +celebrate + +Here's a recap of your accomplishments: + +- Set up your GitHub Codespace and environment. +- Learned how to use Copilot inline suggestions, Chat, and Edits. +- Used Copilot to generate commit messages and pull request summaries. +- Learned how to request Copilot to review your code. + +### What's next? + +- Continue working on the project + - Use Copilot to add an ability for login and authentication. + - Keep evolving the look of the application through app.css. + - Use Copilot to fix issues found during a pull request review. + - Use Copilot to generate tests and documentation. + - Use Copilot with different models. +- Check out the other [GitHub Skills exercises](https://skills.github.com). +- Try building your first [GitHub Copilot Extension](https://github.com/skills/your-first-extension-for-github-copilot) + +Check out these resources to learn more about GitHub Copilot: + +- 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/) +- 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) +- Explore GitHub Copilot [Slash Commands](https://docs.github.com/en/copilot/using-github-copilot/copilot-chat/github-copilot-chat-cheat-sheet?tool=vscode). +- See what other features are available [GitHub Copilot Features](https://docs.github.com/en/copilot/about-github-copilot/github-copilot-features). +- Take a look at the [GitHub Copilot Documentation](https://docs.github.com/en/copilot). \ No newline at end of file diff --git a/.github/workflows/0-start-exercise.yml b/.github/workflows/0-start-exercise.yml index 56f0e7e..50a0cdb 100644 --- a/.github/workflows/0-start-exercise.yml +++ b/.github/workflows/0-start-exercise.yml @@ -12,9 +12,8 @@ permissions: env: EXERCISE_NAME: "Build Applications with GitHub Copilot Agent Mode" - INTRO_MESSAGE: "Welcome to the exciting world of build applcations with 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! 💻✨" + INTRO_MESSAGE: "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! 💻✨" STEP_1_FILE: ".github/steps/1-preparing.md" - STEP_2_FILE: ".github/steps/2-application-initial-setup.md" jobs: disable_workflows: @@ -64,7 +63,7 @@ jobs: - name: Activate 'Start Exercise' button run: | - # Add link to .github/steps/1-preparing.md + # Add link to issue target='id="start-exercise"' replacement='id="start-exercise" href="../../issues/1"' sed -i "s|$target|$replacement|g" README.md @@ -163,7 +162,6 @@ jobs: template-vars: | login=${{ github.actor }} full_repo_name=${{ github.repository }} - next_step_file=[Step 2: Application initial setup](https://github.com/${{ github.repository }}/blob/main/${{ env.STEP_2_FILE }}) - name: Create comment - add step content run: | @@ -172,3 +170,17 @@ jobs: env: GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} ISSUE_BODY: ${{ steps.build-comment.outputs.updated-text }} + + - name: Create comment - watching for progress + run: | + gh issue comment "$ISSUE_URL" \ + --body-file "skills-response-templates/step-feedback/watching-for-progress.md" + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + - name: Disable current workflow and enable next one + run: | + # gh workflow enable "Step 0" # Already disabled + gh workflow enable "Step 1" + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} \ No newline at end of file diff --git a/.github/workflows/1-preparing.yml b/.github/workflows/1-preparing.yml new file mode 100644 index 0000000..43e164f --- /dev/null +++ b/.github/workflows/1-preparing.yml @@ -0,0 +1,106 @@ +name: Step 1 # Preparing to make your extension + +on: + push: + branches: + - "build-octofit-app" + +permissions: + contents: read + actions: write + issues: write + +env: + STEP_2_FILE: ".github/steps/2-application-initial-setup.md" + +jobs: + find_exercise: + name: Find Exercise Issue + uses: skills/exercise-toolkit/.github/workflows/find-exercise-issue.yml@v0.1.0 + + check_step_work: + name: Check step work + runs-on: ubuntu-latest + needs: [find_exercise] + env: + ISSUE_URL: ${{ needs.find_exercise.outputs.issue-url }} + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Get response templates + uses: actions/checkout@v4 + with: + repository: skills/response-templates + path: skills-response-templates + + - name: Update comment - checking work + run: | + gh issue comment "$ISSUE_URL" \ + --body-file skills-response-templates/step-feedback/checking-work.md \ + --edit-last + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + # START: Check practical exercise + + # Nothing to verify. Creating the branch is enough for now. + # In a future update, we will check that the codepsace is running and that the website is visible. + + # END: Check practical exercise + + - name: Build message - step finished + id: build-message-step-finish + uses: skills/action-text-variables@v1 + with: + template-file: skills-response-templates/step-feedback/step-finished-prepare-next-step.md + template-vars: | + next_step_number=2 + + - name: Update comment - step finished + run: | + gh issue comment "$ISSUE_URL" \ + --body "$ISSUE_BODY" \ + --edit-last + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + ISSUE_BODY: ${{ steps.build-message-step-finish.outputs.updated-text }} + + post_next_step_content: + name: Post next step content + needs: [find_exercise, check_step_work] + runs-on: ubuntu-latest + env: + ISSUE_URL: ${{ needs.find_exercise.outputs.issue-url }} + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Get response templates + uses: actions/checkout@v4 + with: + repository: skills/response-templates + path: skills-response-templates + + - name: Create comment - add step content + run: | + gh issue comment "$ISSUE_URL" \ + --body-file "$STEP_2_FILE" + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + - name: Create comment - watching for progress + run: | + gh issue comment "$ISSUE_URL" \ + --body-file skills-response-templates/step-feedback/watching-for-progress.md + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + - name: Disable current workflow and enable next one + run: | + gh workflow disable "Step 1" + gh workflow enable "Step 2" + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} \ No newline at end of file diff --git a/.github/workflows/2-application-initial-setup.yml b/.github/workflows/2-application-initial-setup.yml new file mode 100644 index 0000000..3b35436 --- /dev/null +++ b/.github/workflows/2-application-initial-setup.yml @@ -0,0 +1,123 @@ +name: Step 2 # octofit-tracker application initial setup + +on: + push: + branches: + - "build-octofit-app" + paths: + - "octofit-tracker/backend/requirements.txt" + +permissions: + contents: read + actions: write + issues: write + +env: + STEP_3_FILE: ".github/steps/3-database-django-project-setup.md" + +jobs: + find_exercise: + name: Find Exercise Issue + uses: skills/exercise-toolkit/.github/workflows/find-exercise-issue.yml@v0.1.0 + + check_step_work: + name: Check step work + runs-on: ubuntu-latest + needs: [find_exercise] + env: + ISSUE_URL: ${{ needs.find_exercise.outputs.issue-url }} + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Get response templates + uses: actions/checkout@v4 + with: + repository: skills/response-templates + path: skills-response-templates + + - name: Update comment - checking work + run: | + gh issue comment "$ISSUE_URL" \ + --body-file skills-response-templates/step-feedback/checking-work.md \ + --edit-last + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + # START: Check practical exercise + + # Search for the comment about registration validation + - name: Check file and contents of 'octofit-tracker/backend/requirements.txt' + run: | + # File and expected Python requirement + file="octofit-tracker/backend/requirements.txt" + keyphrase="Django==4.1" + + # Fail the workflow if the file content is missing + if ! grep -q "$keyphrase" "$file"; then + message="It seems you didn't check in your octofit-tracker/backend/requirements.txt with the Python Django requirement. Please try again." + gh issue comment "$ISSUE_URL" \ + --body "$message" \ + --edit-last + exit 1 + fi + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + # END: Check practical exercise + + - name: Build message - step finished + id: build-message-step-finish + uses: skills/action-text-variables@v1 + with: + template-file: skills-response-templates/step-feedback/step-finished-prepare-next-step.md + template-vars: | + next_step_number=3 + + - name: Update comment - step finished + run: | + gh issue comment "$ISSUE_URL" \ + --body "$ISSUE_BODY" \ + --edit-last + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + ISSUE_BODY: ${{ steps.build-message-step-finish.outputs.updated-text }} + + post_next_step_content: + name: Post next step content + needs: [find_exercise, check_step_work] + runs-on: ubuntu-latest + env: + ISSUE_URL: ${{ needs.find_exercise.outputs.issue-url }} + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Get response templates + uses: actions/checkout@v4 + with: + repository: skills/response-templates + path: skills-response-templates + + - name: Create comment - add step content + run: | + gh issue comment "$ISSUE_URL" \ + --body-file "$STEP_3_FILE" + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + - name: Create comment - watching for progress + run: | + gh issue comment "$ISSUE_URL" \ + --body-file skills-response-templates/step-feedback/watching-for-progress.md + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + - name: Disable current workflow and enable next one + run: | + gh workflow disable "Step 2" + gh workflow enable "Step 3" + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/3-database-django-project-setup.yml b/.github/workflows/3-database-django-project-setup.yml new file mode 100644 index 0000000..010907f --- /dev/null +++ b/.github/workflows/3-database-django-project-setup.yml @@ -0,0 +1,195 @@ +name: Step 3 # Django project setup and database test data population + +on: + push: + branches: + - "build-octofit-app" + paths: + - "octofit-tracker/backend/octofit_tracker/**" + +permissions: + contents: read + actions: write + issues: write + +env: + STEP_4_FILE: ".github/steps/4-setup-django-rest-framework.md" + +jobs: + find_exercise: + name: Find Exercise Issue + uses: skills/exercise-toolkit/.github/workflows/find-exercise-issue.yml@v0.1.0 + + check_step_work: + name: Check step work + runs-on: ubuntu-latest + needs: [find_exercise] + env: + ISSUE_URL: ${{ needs.find_exercise.outputs.issue-url }} + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Get response templates + uses: actions/checkout@v4 + with: + repository: skills/response-templates + path: skills-response-templates + + - name: Update comment - checking work + run: | + gh issue comment "$ISSUE_URL" \ + --body-file skills-response-templates/step-feedback/checking-work.md \ + --edit-last + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + # START: Check practical exercise + + - name: Check octofit_db and djongo has been added to settings.py and populate_db.py has been created + id: check-user-work + run: | + # Checks to perform + checks='{ + "settings_py": { + "name": "settings.py", + "passed": true, + "message": "" + }, + "populate_db": { + "name": "populate_db.py", + "passed": true, + "message": "" + } + }' + + # Check for octofit_db info in settings.py + file="octofit-tracker/backend/octofit_tracker/settings.py" + keyphrase='octofit_db' + minimum_occurences=1 + found_occurences=$(grep -o "$keyphrase" "$file" | wc -l) + if [ "$found_occurences" -lt "$minimum_occurences" ]; then + checks=$(echo $checks | jq '.settings_py.passed = false') + checks=$(echo $checks | jq '.settings_py.message = "Please use Copilot agent mode to add the name of the database octofit_db to settings.py."') + fi + + # Check for djongo info in settings.py + file="octofit-tracker/backend/octofit_tracker/settings.py" + keyphrase='djongo' + minimum_occurences=2 + found_occurences=$(grep -o "$keyphrase" "$file" | wc -l) + if [ "$found_occurences" -lt "$minimum_occurences" ]; then + checks=$(echo $checks | jq '.settings_py.passed = false') + checks=$(echo $checks | jq '.settings_py.message = "Please use Copilot agent mode to add the database engine djongo to settings.py."') + fi + + # Check for 'test data' in populate_db.py + file="octofit-tracker/backend/octofit_tracker/management/commands/populate_db.py" + keyphrase='test data for' + minimum_occurences=1 + found_occurences=$(grep -o "$keyphrase" "$file" | wc -l) + if [ "$found_occurences" -lt "$minimum_occurences" ]; then + checks=$(echo $checks | jq '.populate_db.passed = false') + checks=$(echo $checks | jq '.populate_db.message = "Please use Copilot agent mode to add test data with the file populate_db.py."') + fi + + # Verify all checks passed + passed=$(echo $checks | jq '. | all(.passed?)') + + # Flatten to an array for returning. Allows iteration during rendering. + results=$(echo $checks | jq 'to_entries | map({name: .key} + .value)') + + # Save pass status to output + echo "passed=$passed" >> $GITHUB_OUTPUT + + # Save results to output + echo 'results<> $GITHUB_OUTPUT + echo $results >> $GITHUB_OUTPUT + echo 'EOF' >> $GITHUB_OUTPUT + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + - name: Build message - step results + id: build-message-step-results + uses: skills/action-text-variables@v1 + with: + template-file: skills-response-templates/step-feedback/step-results.md + template-vars: '{ + "step_number": 3, + "passed": ${{ steps.check-user-work.outputs.passed }}, + "results_table": ${{ steps.check-user-work.outputs.results }}, + "tips": [ + "Copilot agent mode is becoming more capable everyday. Make sure to always be experimenting!", + "Try different prompts and models." + ] + }' + + - name: Create comment - step results + run: | + gh issue comment "$ISSUE_URL" \ + --body "$COMMENT_BODY" \ + --edit-last + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + COMMENT_BODY: ${{ steps.build-message-step-results.outputs.updated-text }} + + - name: Fail job if not all checks passed + if: steps.check-user-work.outputs.passed == 'false' + run: exit 1 + + # END: Check practical exercise + + - name: Build message - step finished + id: build-message-step-finish + uses: skills/action-text-variables@v1 + with: + template-file: skills-response-templates/step-feedback/step-finished-prepare-next-step.md + template-vars: | + next_step_number=4 + + - name: Update comment - step finished + run: | + gh issue comment "$ISSUE_URL" \ + --body "$ISSUE_BODY" + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + ISSUE_BODY: ${{ steps.build-message-step-finish.outputs.updated-text }} + + post_next_step_content: + name: Post next step content + needs: [find_exercise, check_step_work] + runs-on: ubuntu-latest + env: + ISSUE_URL: ${{ needs.find_exercise.outputs.issue-url }} + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Get response templates + uses: actions/checkout@v4 + with: + repository: skills/response-templates + path: skills-response-templates + + - name: Create comment - add step content + run: | + gh issue comment "$ISSUE_URL" \ + --body-file "$STEP_4_FILE" + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + - name: Create comment - watching for progress + run: | + gh issue comment "$ISSUE_URL" \ + --body-file skills-response-templates/step-feedback/watching-for-progress.md + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + - name: Disable current workflow and enable next one + run: | + gh workflow disable "Step 3" + gh workflow enable "Step 4" + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/4-setup-django-rest-framework.yml b/.github/workflows/4-setup-django-rest-framework.yml new file mode 100644 index 0000000..2529681 --- /dev/null +++ b/.github/workflows/4-setup-django-rest-framework.yml @@ -0,0 +1,185 @@ +name: Step 4 # Setup the Django REST API framework + +on: + push: + branches: + - "build-octofit-app" + paths: + - "octofit-tracker/backend/octofit_tracker/**" + +permissions: + contents: read + actions: write + issues: write + +env: + STEP_5_FILE: ".github/steps/5-setup-frontend-react-framework.md" + +jobs: + find_exercise: + name: Find Exercise Issue + uses: skills/exercise-toolkit/.github/workflows/find-exercise-issue.yml@v0.1.0 + + check_step_work: + name: Check step work + runs-on: ubuntu-latest + needs: [find_exercise] + env: + ISSUE_URL: ${{ needs.find_exercise.outputs.issue-url }} + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Get response templates + uses: actions/checkout@v4 + with: + repository: skills/response-templates + path: skills-response-templates + + - name: Update comment - checking work + run: | + gh issue comment "$ISSUE_URL" \ + --body-file skills-response-templates/step-feedback/checking-work.md \ + --edit-last + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + # START: Check practical exercise + + - name: Check codespace url has been added to settings.py and views.py + id: check-user-work + run: | + # Checks to perform + checks='{ + "settings_py": { + "name": "settings.py", + "passed": true, + "message": "" + }, + "views_py": { + "name": "views.py", + "passed": true, + "message": "" + } + }' + + # Check for codespace Django REST API endpoint suffix in settings.py + file="octofit-tracker/backend/octofit_tracker/settings.py" + keyphrase='\-8000.app.github.dev' + minimum_occurences=1 + found_occurences=$(grep -o "$keyphrase" "$file" | wc -l) + if [ "$found_occurences" -lt "$minimum_occurences" ]; then + checks=$(echo $checks | jq '.settings_py.passed = false') + checks=$(echo $checks | jq '.settings_py.message = "Please use Copilot agent mode to add the codespace Django REST API endpoint suffix to settings.py."') + fi + + # Check for codespace Django REST API endpoint suffix in views.py + file="octofit-tracker/backend/octofit_tracker/views.py" + keyphrase='\-8000.app.github.dev' + minimum_occurences=1 + found_occurences=$(grep -o "$keyphrase" "$file" | wc -l) + if [ "$found_occurences" -lt "$minimum_occurences" ]; then + checks=$(echo $checks | jq '.views_py.passed = false') + checks=$(echo $checks | jq '.views_py.message = "Please use Copilot agent mode to add the codespace Django REST API endpoint suffix to views.py."') + fi + + # Verify all checks passed + passed=$(echo $checks | jq '. | all(.passed?)') + + # Flatten to an array for returning. Allows iteration during rendering. + results=$(echo $checks | jq 'to_entries | map({name: .key} + .value)') + + # Save pass status to output + echo "passed=$passed" >> $GITHUB_OUTPUT + + # Save results to output + echo 'results<> $GITHUB_OUTPUT + echo $results >> $GITHUB_OUTPUT + echo 'EOF' >> $GITHUB_OUTPUT + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + - name: Build message - step results + id: build-message-step-results + uses: skills/action-text-variables@v1 + with: + template-file: skills-response-templates/step-feedback/step-results.md + template-vars: '{ + "step_number": 4, + "passed": ${{ steps.check-user-work.outputs.passed }}, + "results_table": ${{ steps.check-user-work.outputs.results }}, + "tips": [ + "Copilot agent mode is becoming more capable everyday. Make sure to always be experimenting!", + "Try different prompts and models." + ] + }' + + - name: Create comment - step results + run: | + gh issue comment "$ISSUE_URL" \ + --body "$COMMENT_BODY" \ + --edit-last + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + COMMENT_BODY: ${{ steps.build-message-step-results.outputs.updated-text }} + + - name: Fail job if not all checks passed + if: steps.check-user-work.outputs.passed == 'false' + run: exit 1 + + # END: Check practical exercise + + - name: Build message - step finished + id: build-message-step-finish + uses: skills/action-text-variables@v1 + with: + template-file: skills-response-templates/step-feedback/step-finished-prepare-next-step.md + template-vars: | + next_step_number=5 + + - name: Update comment - step finished + run: | + gh issue comment "$ISSUE_URL" \ + --body "$ISSUE_BODY" + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + ISSUE_BODY: ${{ steps.build-message-step-finish.outputs.updated-text }} + + post_next_step_content: + name: Post next step content + needs: [find_exercise, check_step_work] + runs-on: ubuntu-latest + env: + ISSUE_URL: ${{ needs.find_exercise.outputs.issue-url }} + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Get response templates + uses: actions/checkout@v4 + with: + repository: skills/response-templates + path: skills-response-templates + + - name: Create comment - add step content + run: | + gh issue comment "$ISSUE_URL" \ + --body-file "$STEP_5_FILE" + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + - name: Create comment - watching for progress + run: | + gh issue comment "$ISSUE_URL" \ + --body-file skills-response-templates/step-feedback/watching-for-progress.md + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + - name: Disable current workflow and enable next one + run: | + gh workflow disable "Step 4" + gh workflow enable "Step 5" + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/5-setup-frontend-react-framework.yml b/.github/workflows/5-setup-frontend-react-framework.yml new file mode 100644 index 0000000..923ff01 --- /dev/null +++ b/.github/workflows/5-setup-frontend-react-framework.yml @@ -0,0 +1,230 @@ +name: Step 5 # Setup the REACT framework frontend + +on: + push: + branches: + - "build-octofit-app" + paths: + - "octofit-tracker/frontend/**" + +permissions: + contents: read + actions: write + issues: write + +env: + STEP_6_FILE: ".github/steps/6-copilot-on-github.md" + +jobs: + find_exercise: + name: Find Exercise Issue + uses: skills/exercise-toolkit/.github/workflows/find-exercise-issue.yml@v0.1.0 + + check_step_work: + name: Check step work + runs-on: ubuntu-latest + needs: [find_exercise] + env: + ISSUE_URL: ${{ needs.find_exercise.outputs.issue-url }} + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Get response templates + uses: actions/checkout@v4 + with: + repository: skills/response-templates + path: skills-response-templates + + - name: Update comment - checking work + run: | + gh issue comment "$ISSUE_URL" \ + --body-file skills-response-templates/step-feedback/checking-work.md \ + --edit-last + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + # START: Check practical exercise + + - name: Check for codespace Django REST API endpoint suffix in all components + id: check-user-work + run: | + # Checks to perform + checks='{ + "activities_js": { + "name": "Activities.js", + "passed": true, + "message": "" + }, + "leaderboard_js": { + "name": "Leaderboard.js", + "passed": true, + "message": "" + }, + "teams_js": { + "name": "Teams.js", + "passed": true, + "message": "" + }, + "users_js": { + "name": "Users.js", + "passed": true, + "message": "" + }, + "workouts_js": { + "name": "Workouts.js", + "passed": true, + "message": "" + } + }' + + # Check for codespace Django REST API endpoint suffix in Activities.js + file="octofit-tracker/frontend/src/components/Activities.js" + keyphrase='\-8000.app.github.dev\/api\/activities\/' + minimum_occurences=1 + found_occurences=$(grep -o "$keyphrase" "$file" | wc -l) + if [ "$found_occurences" -lt "$minimum_occurences" ]; then + checks=$(echo $checks | jq '.activities_js.passed = false') + checks=$(echo $checks | jq '.activities_js.message = "Please use Copilot agent mode to add the codespace Django REST API endpoint suffix to Activities.js."') + fi + + # Check for codespace Django REST API endpoint suffix in Leaderboard.js + file="octofit-tracker/frontend/src/components/Leaderboard.js" + keyphrase='\-8000.app.github.dev\/api\/leaderboard\/' + minimum_occurences=1 + found_occurences=$(grep -o "$keyphrase" "$file" | wc -l) + if [ "$found_occurences" -lt "$minimum_occurences" ]; then + checks=$(echo $checks | jq '.leaderboard_js.passed = false') + checks=$(echo $checks | jq '.leaderboard_js.message = "Please use Copilot agent mode to add the codespace Django REST API endpoint suffix to Leaderboard.js."') + fi + + # Check for codespace Django REST API endpoint suffix in Teams.js + file="octofit-tracker/frontend/src/components/Teams.js" + keyphrase='\-8000.app.github.dev\/api\/teams\/' + minimum_occurences=1 + found_occurences=$(grep -o "$keyphrase" "$file" | wc -l) + if [ "$found_occurences" -lt "$minimum_occurences" ]; then + checks=$(echo $checks | jq '.teams_js.passed = false') + checks=$(echo $checks | jq '.teams_js.message = "Please use Copilot agent mode to add the codespace Django REST API endpoint suffix to Teams.js."') + fi + + # Check for codespace Django REST API endpoint suffix in Users.js + file="octofit-tracker/frontend/src/components/Users.js" + keyphrase='\-8000.app.github.dev\/api\/users\/' + minimum_occurences=1 + found_occurences=$(grep -o "$keyphrase" "$file" | wc -l) + if [ "$found_occurences" -lt "$minimum_occurences" ]; then + checks=$(echo $checks | jq '.users_js.passed = false') + checks=$(echo $checks | jq '.users_js.message = "Please use Copilot agent mode to add the codespace Django REST API endpoint suffix to Users.js."') + fi + + # Check for codespace Django REST API endpoint suffix in Workouts.js + file="octofit-tracker/frontend/src/components/Workouts.js" + keyphrase='\-8000.app.github.dev\/api\/workouts\/' + minimum_occurences=1 + found_occurences=$(grep -o "$keyphrase" "$file" | wc -l) + if [ "$found_occurences" -lt "$minimum_occurences" ]; then + checks=$(echo $checks | jq '.workouts_js.passed = false') + checks=$(echo $checks | jq '.workouts_js.message = "Please use Copilot agent mode to add the codespace Django REST API endpoint suffix to Workouts.js."') + fi + + # Verify all checks passed + passed=$(echo $checks | jq '. | all(.passed?)') + + # Flatten to an array for returning. Allows iteration during rendering. + results=$(echo $checks | jq 'to_entries | map({name: .key} + .value)') + + # Save pass status to output + echo "passed=$passed" >> $GITHUB_OUTPUT + + # Save results to output + echo 'results<> $GITHUB_OUTPUT + echo $results >> $GITHUB_OUTPUT + echo 'EOF' >> $GITHUB_OUTPUT + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + - name: Build message - step results + id: build-message-step-results + uses: skills/action-text-variables@v1 + with: + template-file: skills-response-templates/step-feedback/step-results.md + template-vars: '{ + "step_number": 4, + "passed": ${{ steps.check-user-work.outputs.passed }}, + "results_table": ${{ steps.check-user-work.outputs.results }}, + "tips": [ + "Copilot agent mode is becoming more capable everyday. Make sure to always be experimenting!", + "Try different prompts and models." + ] + }' + + - name: Create comment - step results + run: | + gh issue comment "$ISSUE_URL" \ + --body "$COMMENT_BODY" \ + --edit-last + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + COMMENT_BODY: ${{ steps.build-message-step-results.outputs.updated-text }} + + - name: Fail job if not all checks passed + if: steps.check-user-work.outputs.passed == 'false' + run: exit 1 + + # END: Check practical exercise + + - name: Build message - step finished + id: build-message-step-finish + uses: skills/action-text-variables@v1 + with: + template-file: skills-response-templates/step-feedback/step-finished-prepare-next-step.md + template-vars: | + next_step_number=5 + + - name: Update comment - step finished + run: | + gh issue comment "$ISSUE_URL" \ + --body "$ISSUE_BODY" + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + ISSUE_BODY: ${{ steps.build-message-step-finish.outputs.updated-text }} + + post_next_step_content: + name: Post next step content + needs: [find_exercise, check_step_work] + runs-on: ubuntu-latest + env: + ISSUE_URL: ${{ needs.find_exercise.outputs.issue-url }} + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Get response templates + uses: actions/checkout@v4 + with: + repository: skills/response-templates + path: skills-response-templates + + - name: Create comment - add step content + run: | + gh issue comment "$ISSUE_URL" \ + --body-file "$STEP_6_FILE" + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + - name: Create comment - watching for progress + run: | + gh issue comment "$ISSUE_URL" \ + --body-file skills-response-templates/step-feedback/watching-for-progress.md + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + - name: Disable current workflow and enable next one + run: | + gh workflow disable "Step 5" + gh workflow enable "Step 6" + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/6-copilot-on-github.yml b/.github/workflows/6-copilot-on-github.yml new file mode 100644 index 0000000..4040e68 --- /dev/null +++ b/.github/workflows/6-copilot-on-github.yml @@ -0,0 +1,150 @@ +name: Step 6 # Copilot on GitHub + +on: + pull_request: + branches: + - main + types: + - closed + +permissions: + contents: write + actions: write + issues: write + +env: + REVIEW_FILE: ".github/steps/x-review.md" + +jobs: + find_exercise: + name: Find Exercise Issue + uses: skills/exercise-toolkit/.github/workflows/find-exercise-issue.yml@v0.1.0 + + check_step_work: + name: Check step work + runs-on: ubuntu-latest + needs: [find_exercise] + env: + ISSUE_URL: ${{ needs.find_exercise.outputs.issue-url }} + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Get response templates + uses: actions/checkout@v4 + with: + repository: skills/response-templates + path: skills-response-templates + + # START: Check practical exercise + + # Nothing to check. Merging the pull request is enough. + + # END: Check practical exercise + + - name: Create comment - step finished - final review next + run: | + gh issue comment "$ISSUE_URL" \ + --body-file skills-response-templates/step-feedback/lesson-review.md + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + post_review_content: + name: Post review content + needs: [find_exercise, check_step_work] + runs-on: ubuntu-latest + env: + ISSUE_URL: ${{ needs.find_exercise.outputs.issue-url }} + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Get response templates + uses: actions/checkout@v4 + with: + repository: skills/response-templates + path: skills-response-templates + + - name: Create comment - add step content + run: | + gh issue comment "$ISSUE_URL" \ + --body-file "$REVIEW_FILE" + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + finish_exercise: + name: Finish exercise + needs: [find_exercise, post_review_content] + runs-on: ubuntu-latest + env: + ISSUE_URL: ${{ needs.find_exercise.outputs.issue-url }} + + steps: + - name: Checkout + uses: actions/checkout@v4 + with: + ref: main + + - name: Get response templates + uses: actions/checkout@v4 + with: + repository: skills/response-templates + path: skills-response-templates + + - name: Configure Git user + run: | + git config user.name github-actions[bot] + git config user.email github-actions[bot]@users.noreply.github.com + + - name: Build message - congratulations + id: build-message-congratulations + uses: skills/action-text-variables@v1 + with: + template-file: skills-response-templates/readme/congratulations.md + template-vars: | + login=${{ github.actor }} + + - name: Update README - congratulations + run: | + # Add "Congratulations" to the start of the README + orig_readme=$(cat README.md) + new_readme="${{ steps.build-message-congratulations.outputs.updated-text }} $orig_readme" + + # Update file and push + echo "$new_readme" > README.md + git add README.md + git commit --message="Congratulations!🎉" + git push + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + - name: Build message - exercise finished + id: build-finish-message + uses: skills/action-text-variables@v1 + with: + template-file: skills-response-templates/step-feedback/lesson-finished.md + template-vars: | + login=${{ github.actor }} + repo_full_name=${{ github.repository }} + + - name: Create comment - exercise finished + run: | + gh issue comment "$ISSUE_URL" \ + --body "$ISSUE_BODY" + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + ISSUE_BODY: ${{ steps.build-finish-message.outputs.updated-text }} + + - name: Close issue + run: gh issue close "$ISSUE_URL" + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + - name: Disable current workflow + run: | + gh workflow disable "Step 6" + # gh workflow disable "Step 6b" + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/6b-copilot-on-github.yml b/.github/workflows/6b-copilot-on-github.yml new file mode 100644 index 0000000..30ca414 --- /dev/null +++ b/.github/workflows/6b-copilot-on-github.yml @@ -0,0 +1,121 @@ +name: Step 6b # Copilot on GitHub + +on: + # Trigger if Copilot adds a review comment + pull_request_review: + +permissions: + contents: write + actions: write + issues: write + pull-requests: read + repository-projects: read + +jobs: + find_exercise: + name: Find Exercise Issue + uses: skills/exercise-toolkit/.github/workflows/find-exercise-issue.yml@v0.1.0 + + check_step_work: + name: Check step work + runs-on: ubuntu-latest + needs: [find_exercise] + env: + ISSUE_URL: ${{ needs.find_exercise.outputs.issue-url }} + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Get response templates + uses: actions/checkout@v4 + with: + repository: skills/response-templates + path: skills-response-templates + + # START: Check practical exercise + + - name: Check for pr description and copilot review + id: check-user-work + run: | + # Checks to perform + checks='{ + "pr_description": { + "name": "PR Description", + "passed": true, + "message": "" + }, + "copilot_review": { + "name": "Copilot Review", + "passed": true, + "message": "" + } + }' + + # Check if PR has a description and minimum length + min_length=15 + body_length=$(echo "$PR_Body" | wc -c) + echo "PR description length: $body_length" + if [ "$body_length" -lt $min_length ]; then + checks=$(echo $checks | jq '.pr_description.passed = false') + checks=$(echo $checks | jq '.pr_description.message = "Please use Copilot to generate a pull request description."') + fi + + # Check for a PR Review from Copilot + reviews=$(gh pr view --repo $REPO $PR_NUMBER --json reviews) + authors=$(echo "$reviews" | jq '.reviews[].author.login') + if echo "$authors" | grep -q "copilot-pull-request-reviewer"; then + echo "Copilot has reviewed this PR." + else + echo "Copilot has NOT reviewed this PR." + checks=$(echo $checks | jq '.copilot_review.passed = false') + checks=$(echo $checks | jq '.copilot_review.message = "Please request a review from Copilot."') + fi + + # Verify all checks passed + passed=$(echo $checks | jq '. | all(.passed?)') + + # Flatten to an array for returning. Allows iteration during rendering. + results=$(echo $checks | jq 'to_entries | map({name: .key} + .value)') + + # Save pass status to output + echo "passed=$passed" >> $GITHUB_OUTPUT + + # Save results to output + echo 'results<> $GITHUB_OUTPUT + echo $results >> $GITHUB_OUTPUT + echo 'EOF' >> $GITHUB_OUTPUT + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + PR_Body: ${{ github.event.pull_request.body }} + REPO: ${{ github.repository }} + PR_NUMBER: ${{ github.event.pull_request.number }} + + - name: Build message - step results + id: build-message-step-results + uses: skills/action-text-variables@v1 + with: + template-file: skills-response-templates/step-feedback/step-results.md + template-vars: '{ + "step_number": 6, + "passed": ${{ steps.check-user-work.outputs.passed }}, + "results_table": ${{ steps.check-user-work.outputs.results }}, + "tips": [ + "Copilot review will also suggest changes for common mistakes and typos.", + "You can use repository rulesets to automatically require a review from Copilot." + ] + }' + + - name: Create comment - step results + run: | + gh issue comment "$ISSUE_URL" \ + --body "$COMMENT_BODY" + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + COMMENT_BODY: ${{ steps.build-message-step-results.outputs.updated-text }} + + - name: Fail job if not all checks passed + if: steps.check-user-work.outputs.passed == 'false' + run: exit 1 + + # END: Check practical exercise