Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 0 additions & 19 deletions .dev/Dockerfile.sandbox

This file was deleted.

8 changes: 0 additions & 8 deletions .dev/sandbox.json

This file was deleted.

72 changes: 0 additions & 72 deletions .dev/start-copilot-sandbox.sh

This file was deleted.

5 changes: 4 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -44,4 +44,7 @@ app/client/test-results/
app/client/playwright-report/

# e2e test database
app/server/e2e_test_dogshelter.db
app/server/e2e_test_dogshelter.db

# azure
.azure
95 changes: 0 additions & 95 deletions PLAN.md

This file was deleted.

8 changes: 7 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
# Pets workshop

This repository contains the project for two guided workshops to explore various GitHub features. The project is a website for a fictional dog shelter, with a [Flask](https://flask.palletsprojects.com/en/stable/) backend using [SQLAlchemy](https://www.sqlalchemy.org/) and an [Astro](https://astro.build/) frontend using [Tailwind CSS](https://tailwindcss.com/).
This repository contains the project for three guided workshops to explore various GitHub features. The project is a website for a fictional dog shelter, with a [Flask](https://flask.palletsprojects.com/en/stable/) backend using [SQLAlchemy](https://www.sqlalchemy.org/) and an [Astro](https://astro.build/) frontend using [Tailwind CSS](https://tailwindcss.com/).

The available workshops are:

- **[One hour](./content/1-hour/README.md)** — focused on GitHub Copilot
- **[Full-day](./content/full-day/README.md)** — a full day-in-the-life of a developer using GitHub for their DevOps processes
- **[GitHub Actions](./content/github-actions/README.md)** — CI/CD pipelines from running tests to deploying to Azure

## Getting started

Expand Down
2 changes: 1 addition & 1 deletion app/server/app.py
Original file line number Diff line number Diff line change
Expand Up @@ -80,4 +80,4 @@ def get_dog(id: int) -> tuple[Response, int] | Response:
## HERE

if __name__ == '__main__':
app.run(debug=True, port=5100) # Port 5100 to avoid macOS conflicts
app.run(debug=True, port=5100) # Port 5100 to avoid macOS conflicts
3 changes: 2 additions & 1 deletion app/server/utils/seed_database.py
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ def create_app():
# Get the server directory path (one level up from utils)
server_dir = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

app.config['SQLALCHEMY_DATABASE_URI'] = f'sqlite:///{os.path.join(server_dir, "dogshelter.db")}'
db_path = os.environ.get('DATABASE_PATH', os.path.join(server_dir, 'dogshelter.db'))
app.config['SQLALCHEMY_DATABASE_URI'] = f'sqlite:///{db_path}'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

# Initialize the database with the app
Expand Down
12 changes: 6 additions & 6 deletions content/1-hour/0-setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,22 +17,22 @@ Let's create the repository you'll use for your workshop.
1. Navigate to [the repository root](/)
2. Select **Use this template** > **Create a new repository**

![Screenshot of Use this template dropdown](images/0-setup-template.png)
![Screenshot of Use this template dropdown](../shared-images/setup-use-template.png)

3. Under **Owner**, select the name of your GitHub handle, or the owner specified by your workshop leader.
4. Under **Repository**, set the name to **pets-workshop**, or the name specified by your workshop leader.
5. Ensure **Public** is selected for the visibility, or the value indicated by your workshop leader.
6. Select **Create repository from template**.

![Screenshot of configured template creation dialog](images/0-setup-configure.png)
![Screenshot of configured template creation dialog](../shared-images/setup-configure-repo.png)

In a few moments a new repository will be created from the template for this workshop!

## Clone the repository and start the app

With the repository created, it's now time to clone the repository locally. We'll do this from a shell capable of running BASH commands.

1. Copy the URL for the repository you just created in the prior set.
1. Copy the URL for the repository you just created in the prior step.
2. Open your terminal or command shell.
3. Run the following command to clone the repository locally (changing directories to a parent directory as appropriate):

Expand All @@ -51,19 +51,19 @@ With the repository created, it's now time to clone the repository locally. We'l
- macOS / Linux:

```sh
./scripts/start-app.sh
./app/scripts/start-app.sh
```

- Windows (PowerShell):

```powershell
./scripts/start-app.ps1
./app/scripts/start-app.ps1
```

If you encounter execution policy warnings on Windows, run PowerShell as an administrator or execute the script with an explicit bypass, for example:

```powershell
powershell -ExecutionPolicy Bypass -File .\scripts\start-app.ps1
powershell -ExecutionPolicy Bypass -File .\app\scripts\start-app.ps1
```

The startup script will start two applications:
Expand Down
12 changes: 6 additions & 6 deletions content/1-hour/1-add-endpoint.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ With code completions, GitHub Copilot provides suggestions in your code editor w

It's standard to work in phases when adding functionality to an application. Given that we know we want to allow users to filter the list of dogs based on breed, we'll need to add an endpoint to provide a list of all breeds. Later we'll add the rest of the functionality, but let's focus on this part for now.

The application uses a Flask app with SQLAlchemy as the backend API (in the [/server][server-code] folder), and an Astro app as the frontend (in the [/client][client-code] folder). You will explore more of the project later; this exercise will focus solely on the Flask application.
The application uses a Flask app with SQLAlchemy as the backend API (in the [app/server][server-code] folder), and an Astro app as the frontend (in the [app/client][client-code] folder). You will explore more of the project later; this exercise will focus solely on the Flask application.

> [!NOTE]
> As you begin making changes to the application, there is always a chance a breaking change could be created. If the page stops working, check the terminal window you used previously to start the application for any error messages. You can stop the app by using <kbd>Ctl</kbd>+<kbd>C</kbd>, and restart it by running the script appropriate for your operating system: `./scripts/start-app.sh` (macOS / Linux) or `./scripts/start-app.ps1` (Windows PowerShell).
> As you begin making changes to the application, there is always a chance a breaking change could be created. If the page stops working, check the terminal window you used previously to start the application for any error messages. You can stop the app by using <kbd>Ctrl</kbd>+<kbd>C</kbd>, and restart it by running the script appropriate for your operating system: `./app/scripts/start-app.sh` (macOS / Linux) or `./app/scripts/start-app.ps1` (Windows PowerShell).

## Flask routes

Expand All @@ -34,7 +34,7 @@ Let's build our new route in our Flask backend with the help of code completion.

1. Return to your IDE with the project open.
2. Open **app/server/app.py**.
3. Locate the comment which reads `## HERE`, which should be at line 69.
3. Locate the comment which reads `## HERE`, which should be at line 80.
4. Delete the comment to ensure there isn't any confusion for Copilot, and leave your cursor there.
5. Begin adding the code to create the route to return all breeds from an endpoint of **api/breeds** by typing the following:

Expand Down Expand Up @@ -68,7 +68,7 @@ Let's build our new route in our Flask backend with the help of code completion.
> [!IMPORTANT]
> Because LLMs are probabilistic, not deterministic, the exact code generated can vary. The above is a representative example. If your code is different, that's just fine as long as it works!

8. Add a comment to the newly created function. To do this, place your cursor inside the function (anywhere between the lines `def get_breeds...` and `return jsonify...`). Then, press <kbd>Ctl</kbd>+<kbd>I</kbd> (or <kbd>cmd</kbd>+<kbd>I</kbd> on a Mac) to open the editor inline chat. In the input box, type `/doc`. (You can optionally provide additional details, but it's not required). This will prompt GitHub Copilot to generate a documentation comment for the function. The suggested comment will appear inline in the code (highlighted in green). Click **Accept** to apply the comment to your code, or click **Close** to discard the suggestion. You just used a slash command, a shortcut to streamline a task, these commands eliminate the need for verbose prompts.
8. Add a comment to the newly created function. To do this, place your cursor inside the function (anywhere between the lines `def get_breeds...` and `return jsonify...`). Then, press <kbd>Ctrl</kbd>+<kbd>I</kbd> (or <kbd>cmd</kbd>+<kbd>I</kbd> on a Mac) to open the editor inline chat. In the input box, type `/doc`. (You can optionally provide additional details, but it's not required). This will prompt GitHub Copilot to generate a documentation comment for the function. The suggested comment will appear inline in the code (highlighted in green). Click **Accept** to apply the comment to your code, or click **Close** to discard the suggestion. You just used a slash command, a shortcut to streamline a task, these commands eliminate the need for verbose prompts.

9. **Save** the file.

Expand All @@ -94,13 +94,13 @@ You've added a new endpoint with the help of GitHub Copilot! You saw how Copilot
|:-----------------------------------|------------------------------------------:|

[breeds-endpoint]: http://localhost:5100/api/breeds
[client-code]: /app/client/
[client-code]: ../../app/client/
[copilot-suggestions]: https://docs.github.com/en/copilot/using-github-copilot/getting-code-suggestions-in-your-ide-with-github-copilot
[flask-routing]: https://flask.palletsprojects.com/en/stable/quickstart/#routing
[http-methods]: https://www.w3schools.com/tags/ref_httpmethods.asp
[prompt-crafting]: https://code.visualstudio.com/docs/copilot/prompt-crafting
[inline-chat]: https://code.visualstudio.com/docs/copilot/chat/inline-chat
[server-code]: /app/server/
[server-code]: ../../app/server/
[vscode-copilot]: https://code.visualstudio.com/docs/copilot/ai-powered-suggestions
[walkthrough-previous]: ./0-setup.md
[walkthrough-next]: ./2-explore-project.md
2 changes: 1 addition & 1 deletion content/1-hour/4-add-feature.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ And

1. Review the code suggestions to ensure they behave the way you expect them to, making any necessary changes. Once you're satisfied, you can select **Keep** on the files individually or in Copilot Chat to accept all changes.
2. Open the page at [http://localhost:4321][tailspin-shelter-website] to see the updates!
3. Run the Python tests by using `python -m unittest` in the terminal as you did previously.
3. Run the Python tests by running `python -m unittest` from the `app/server` directory in the terminal.
4. If any changes are needed, explain the required updates to GitHub Copilot and allow it to generate the new code.

> [!IMPORTANT]
Expand Down
Loading