diff --git a/.github/workflows/azure-deploy.yml b/.github/workflows/azure-deploy.yml new file mode 100644 index 0000000..2af2e27 --- /dev/null +++ b/.github/workflows/azure-deploy.yml @@ -0,0 +1,189 @@ +name: Deploy Pets Workshop to Azure + +on: + push: + branches: [ main, msignite-25 ] + paths: + - 'terraform/**' + - 'server/**' + - 'client/**' + - '.github/workflows/azure-deploy.yml' + pull_request: + branches: [ main ] + paths: + - 'terraform/**' + - 'server/**' + - 'client/**' + workflow_dispatch: + inputs: + terraform_action: + description: 'Terraform action to perform' + required: true + default: 'plan' + type: choice + options: + - plan + - apply + - destroy + +env: + ARM_CLIENT_ID: ${{ secrets.AZURE_CLIENT_ID }} + ARM_CLIENT_SECRET: ${{ secrets.AZURE_CLIENT_SECRET }} + ARM_SUBSCRIPTION_ID: ${{ secrets.AZURE_SUBSCRIPTION_ID }} + ARM_TENANT_ID: ${{ secrets.AZURE_TENANT_ID }} + TF_VAR_sql_admin_password: ${{ secrets.SQL_ADMIN_PASSWORD }} + +jobs: + terraform: + name: 'Terraform Infrastructure' + runs-on: ubuntu-latest + environment: production + + defaults: + run: + shell: bash + working-directory: ./terraform + + outputs: + backend_app_name: ${{ steps.terraform_output.outputs.backend_app_name }} + frontend_deployment_token: ${{ steps.terraform_output.outputs.frontend_deployment_token }} + resource_group_name: ${{ steps.terraform_output.outputs.resource_group_name }} + static_web_app_name: ${{ steps.terraform_output.outputs.static_web_app_name }} + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Setup Terraform + uses: hashicorp/setup-terraform@v3 + with: + terraform_version: 1.6.0 + terraform_wrapper: false + + - name: Terraform Init + run: terraform init + + - name: Terraform Format Check + run: terraform fmt -check + + - name: Terraform Validate + run: terraform validate + + - name: Terraform Plan + if: github.event_name == 'pull_request' || (github.event_name == 'workflow_dispatch' && inputs.terraform_action == 'plan') + run: terraform plan -no-color + continue-on-error: true + + - name: Terraform Plan Status + if: github.event_name == 'pull_request' && steps.plan.outcome == 'failure' + run: exit 1 + + - name: Terraform Apply + if: (github.ref == 'refs/heads/main' && github.event_name == 'push') || (github.event_name == 'workflow_dispatch' && inputs.terraform_action == 'apply') + run: terraform apply -auto-approve + + - name: Terraform Destroy + if: github.event_name == 'workflow_dispatch' && inputs.terraform_action == 'destroy' + run: terraform destroy -auto-approve + + - name: Terraform Output + if: (github.ref == 'refs/heads/main' && github.event_name == 'push') || (github.event_name == 'workflow_dispatch' && inputs.terraform_action == 'apply') + id: terraform_output + run: | + echo "backend_app_name=$(terraform output -raw backend_app_service_name)" >> $GITHUB_OUTPUT + echo "frontend_deployment_token=$(terraform output -raw frontend_deployment_token)" >> $GITHUB_OUTPUT + echo "resource_group_name=$(terraform output -raw resource_group_name)" >> $GITHUB_OUTPUT + echo "static_web_app_name=$(terraform output -raw frontend_static_web_app_name)" >> $GITHUB_OUTPUT + + deploy_backend: + name: 'Deploy Flask Backend' + runs-on: ubuntu-latest + needs: terraform + if: (github.ref == 'refs/heads/main' && github.event_name == 'push') || (github.event_name == 'workflow_dispatch' && inputs.terraform_action == 'apply') + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Set up Python + uses: actions/setup-python@v4 + with: + python-version: '3.11' + + - name: Install dependencies + working-directory: ./server + run: | + python -m pip install --upgrade pip + pip install -r requirements.txt + + - name: Login to Azure + uses: azure/login@v1 + with: + creds: ${{ secrets.AZURE_CREDENTIALS }} + + - name: Deploy to Azure Web App + uses: azure/webapps-deploy@v2 + with: + app-name: ${{ needs.terraform.outputs.backend_app_name }} + package: ./server + startup-command: 'gunicorn --bind=0.0.0.0 --timeout 600 app:app' + + deploy_frontend: + name: 'Deploy Astro Frontend' + runs-on: ubuntu-latest + needs: terraform + if: (github.ref == 'refs/heads/main' && github.event_name == 'push') || (github.event_name == 'workflow_dispatch' && inputs.terraform_action == 'apply') + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: '18' + cache: 'npm' + cache-dependency-path: './client/package-lock.json' + + - name: Install dependencies + working-directory: ./client + run: npm ci + + - name: Build Astro app + working-directory: ./client + run: npm run build + env: + # Update API endpoint to point to Azure App Service + VITE_API_URL: https://${{ needs.terraform.outputs.backend_app_name }}.azurewebsites.net + + - name: Deploy to Static Web App + uses: Azure/static-web-apps-deploy@v1 + with: + azure_static_web_apps_api_token: ${{ needs.terraform.outputs.frontend_deployment_token }} + repo_token: ${{ secrets.GITHUB_TOKEN }} + action: 'upload' + app_location: '/client' + api_location: '' + output_location: 'dist' + + database_setup: + name: 'Setup Database' + runs-on: ubuntu-latest + needs: terraform + if: (github.ref == 'refs/heads/main' && github.event_name == 'push') || (github.event_name == 'workflow_dispatch' && inputs.terraform_action == 'apply') + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Login to Azure + uses: azure/login@v1 + with: + creds: ${{ secrets.AZURE_CREDENTIALS }} + + - name: Setup Database Schema + run: | + # Note: Add your database migration/setup commands here + echo "Database setup would go here" + echo "You may want to run SQL scripts to create tables and seed data" + # Example: sqlcmd -S $SQL_SERVER -d $SQL_DATABASE -U $SQL_USER -P $SQL_PASSWORD -i ./database/schema.sql \ No newline at end of file diff --git a/content/ignite/0-setup.md b/content/ignite/0-setup.md new file mode 100644 index 0000000..671c102 --- /dev/null +++ b/content/ignite/0-setup.md @@ -0,0 +1,77 @@ +# Workshop setup + +To complete this workshop you will need to clone a repository with a copy of the contents of this repository + +> [!Hint] +> Under regular conditions you would need to ensure all prerequisites are installed, but don't worry. We have ensured this environment has all you need. + + +> [!NOTE] +> GitHub Copilot uses Large Language Models (LLMs), which generate responses probabilistically rather than deterministically. This means that the exact suggestions, code, and interactions you see may differ from what's shown in these instructions. This is normal and expected behavior! Use your best judgment to adapt the suggestions to your needs, and don't hesitate to iterate with Copilot if the first suggestion isn't quite right. + +## Configure GitHub Copilot + +> [!NOTE] +> For your convenience we have the username and password on the instructions, but you can also see their values in the **Resources** tab + + +1. [] Open Visual Studio Code +2. [] Click on Copilot icon on top bar (left side next to the search input box) + +![Copilot icon](./images/0-copilot-icon.png) + +3. [] Click on **Open Chat** option (if you clicked on the dropdown arrow, otherwise the window is now open) +4. [] If there is a login button on the chat window, click it, otherwise type something and press enter in the chat input box to force the login window +5. [] Click on **Continue with GitHub** blue button on the modal window +6. [] A browser will automatically open, enter on the login input `user_events` (the password input will be greyed out once you enter the username) click on green **Sign in with your identity provider** button +7. [] Click **Continue** button on the **Single sign-on** page +8. [] Enter +++@lab.CloudPortalCredential(User1).Username+++ on the **Email, phone, or Skype** input box and click on **Next** +9. [] Enter +++@lab.CloudPortalCredential(User1).AccessToken+++ on the **Temporary Access Pass** field and click on **Sign in with your entity provider** button +10. [] Click on **yes** in the **Stay signed in?** modal dialog +11. [] Authorize the user by clicking continue and authorize VS Code access to user email by clicking on **Authorize Visual-Studio-Code*** button +12. [] Click **open** when browser asks for the confirmation (**This site is trying to open Visual Studio Code.**) +13. [] After Copilot is setup you should now have a GitHub Copilot **Welcome** open tab in Visual Studio Code + +We are now ready to start working on our code with the help of Copilot. + +## Clone lab repository + +Let's clone the repository you'll use for the lab. + +1. [] Click on the Source Control icon on the left sidebar + +![Source control icon](./images/0-source-control-icon.png) + +2. [] Click on **Clone Repository** button +3. [] Type `https://github.com/github-samples/pets-workshop` and press enter. +4. [] Select the repository destination folder (suggestion: use the one is automatically shown. The user home folder) by clicking in **Select as Repository Destination** button. + - Note: The repository will be cloned to **SELECTED FOLDER/pets-workshop** +5. [] Click **Open** button when asked if you **Would like to open the cloned repository?** +6. [] Click the **Yes, I trust the authors** button when asked. + +The code is now open in Visual Studio Code, feel free to take a look at it or skip to the next section to start the app. + +## Start the app + +1. [] On the menu bar at the top, Click on **...** (three dots, or **Terminal** if already visible) and then select **Terminal -> New Terminal** +2. [] Start the application by running the following command on the terminal: + +```pwsh +.\scripts\start-app.ps1 +``` + +The startup script will install dependencies (the first time will take a while) and start two applications: + +> [!NOTE] +> The first time you start the application, it may take several minutes to become available. This is because all required dependencies need to be installed before the app can launch. If you prefer, you can move on to the next section and explore GitHub Copilot while you wait. +> When the server is ready, you'll see the message **┃ Local http://localhost:4321/** in the terminal, indicating that the frontend is running and accessible. + + +- The backend Flask app on **http://localhost:5100**. You can see a list of dogs by opening the url +++http://localhost:5100/api/dogs+++ +- The frontend Astro/Svelte app on +++http://localhost:4321+++. You can see app the by opening that URL. + +- [] Try it now, open a browser and navigate to the links provided above. + +## Summary and next steps + +You've now cloned the repository you'll use for this workshop and have GitHub Copilot setup! Next let's **add a new endpoint to the server** diff --git a/content/ignite/1-add-endpoint.md b/content/ignite/1-add-endpoint.md new file mode 100644 index 0000000..1708461 --- /dev/null +++ b/content/ignite/1-add-endpoint.md @@ -0,0 +1,109 @@ +# Coding with GitHub Copilot + +With code completions, GitHub Copilot provides suggestions in your code editor while you're coding. This can turn comments into code, generate the next line of code, and generate an entire function just from a signature. Code completion helps reduce the amount of boilerplate code and ceremony you need to type, allowing you to focus on the important aspects of what you're creating. + +## Scenario + +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 with Svelte 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. + +> [!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 Control+C, and restart it by running `./scripts/start-app.ps1`. + +## Flask routes + +While we won't be able to provide a full overview of [routing in Flask][flask-routing], they are defined by using the Python decorator **@app.route**. There are a couple of parameters you can provide to **@app.route**, including the path (or URL) one would use to access the route (such as **api/breeds**), and the [HTTP method(s)][http-methods] which can be used. + +## Code completion + +Code completion predicts the next block of code you're about to type based on the context Copilot has. For code completion, this includes the file you're currently working on and any tabs open in your IDE. + +Code completion is best for situations where you know what you want to do, and are more than happy to just start writing code with a bit of a helping hand along the way. Suggestions will be generated based both on the code you write (say a function definition) and comments you add to your code. + +## Create the breeds endpoint + +Let's build our new route in our Flask backend with the help of code completion. + +> [!IMPORTANT] +> For this exercise, **DO NOT** copy and paste the code snippet provided, but rather type it manually. This will allow you to experience code completion as you would if you were coding back at your desk. You'll likely see you only have to type a few characters before GitHub Copilot begins suggesting the rest. + +1. [] Return to Visual Studio Code. +2. [] Open **server/app.py** file. +3. [] Locate the comment which reads **## HERE**, which should be at line 68. +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: + + ```python-nocopy + @app.route('/api/breeds', methods=['GET']) + ``` + +6. [] Once you see the full function signature, select Tab to accept the code suggestion. + +> [!Hint] +> You can also use control+Right Arrow to accept a single word at a time. + +7. [] If it didn't already, code completion should then suggest the remainder of the function signature; just as before select Tab to accept the code suggestion. + + The code generated should look a little like this: + + ```python-nocopy + @app.route('/api/breeds', methods=['GET']) + def get_breeds(): + # Query all breeds + breeds_query = db.session.query(Breed.id, Breed.name).all() + + # Convert the result to a list of dictionaries + breeds_list = [ + { + 'id': breed.id, + 'name': breed.name + } + for breed in breeds_query + ] + + return jsonify(breeds_list) + ``` + +> [!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. [] Let's 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 Control+I 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. + +> [!TIP] +> You just used a slash command, a shortcut to streamline a task, these commands eliminate the need for verbose prompts. +> ![doc slash command](images/1-doc-slash-command-suggestion.png) + +9. [] **Save** the file. + +## Validate the endpoint + +With the code created and saved, let's quickly validate the endpoint to ensure it works. + +1. [] Navigate to +++http://localhost:5100/api/breeds+++ on the browser to validate the new route. You should see JSON displayed which contains the list of breeds! +2. [] Switch back to Visual Studio Code. +3. [] Let's commit the changes locally, click on the Source control icon on the left sidebar +4. [] Click on the **+** icon to stage **server/app.py** +5. [] On the commit message box click on the icon with two stars, Copilot is going to create the commit message for you +6. [] Click on the **Commit** blue button to commit locally if you are happy with the commit message, otherwise adjust the message before committing. + - Don't try to push the changes (by pushing or synching), you do not have write permissions on the repository. + +## Summary and next steps + +You've added a new endpoint with the help of GitHub Copilot! You saw how Copilot predicted the next block of code you were likely looking for and provided the suggestion inline, helping save you the effort of typing it out manually. Let's start down the path of performing more complex operations by exploring our project. + +## Resources + +- [Code suggestions in your IDE with GitHub Copilot][copilot-suggestions] +- [Code completions with GitHub Copilot in VS Code][vscode-copilot] +- [Prompt crafting][prompt-crafting] + + +[client-code]: /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 +[server-code]: /server/ +[vscode-copilot]: https://code.visualstudio.com/docs/copilot/ai-powered-suggestions diff --git a/content/ignite/2-explore-project.md b/content/ignite/2-explore-project.md new file mode 100644 index 0000000..5a26620 --- /dev/null +++ b/content/ignite/2-explore-project.md @@ -0,0 +1,51 @@ +# Helping GitHub Copilot understand context + +The key to success when coding (and much of life) is context. Before we add code to a codebase, we want to understand the rules and structures already in place. When working with an AI coding assistant such as GitHub Copilot the same concept applies - the quality of suggestion is directly proportional to the context Copilot has. Let's use this opportunity to both explore the project we've been given and how to interact with Copilot to ensure it has the context it needs to do its best work. + +## Scenario + +Before adding new functionality to the website, you want to explore the existing structure to determine where the updates need to be made. + +## Chat participants and extensions + +GitHub Copilot Chat has a set of available [chat participants][chat-participants] and [extensions][copilot-extensions] available to you to both provide instructions to GitHub Copilot and access external services. Chat participants are helpers which work inside your IDE and have access to your project, while extensions can call external services and provide information to you without having to open separate tools. We're going to focus on one core chat participant - **@workspace**. + +**@workspace** creates an index of your project and allows you to ask questions about what you're currently working on, to find resources inside the project, or add it to the context. It's best to use this when the entirety of your project should be considered or you're not entirely sure where you should start looking. In our current scenario, since we want to ask questions about our project, **@workspace** is the perfect tool for the job. + +> [!NOTE] +> This exercise doesn't provide specific prompts to type, as part of the learning experience is to discover how to interact with Copilot. Feel free to talk in natural language, describing what you're looking for or need to accomplish. + +1. [] Return Visual Studio Code with the project open. +2. [] Close any tabs you may have open to ensure the context for Copilot chat is empty. +3. [] Open GitHub Copilot Chat. + +> [!Hint] +> You can open Chat by clicking on GitHub Copilot icon at the top bar and then choose **Open Chat** or use Control+Alt+I + +4. [] Select the **+** icon towards the top of Copilot chat to begin a new chat. +5. [] Type **@workspace** in the chat prompt window and hit tab to select or activate it, then continue by asking Copilot about your project. You can ask what technologies are in use, what the project does, where functionality resides, etc. + +> [!NOTE] +> You may be asked to authenticate again, if that happens follow the process you have followed before (this time you won't need to enter the credentials). + +6. [] Spend a few minutes exploring to find the answers to the following questions (don't forget the **@workspace**): + - Where's the database the project uses? + - What files are involved in listing dogs? + +> [!Knowledge] Did you notice that when files are referenced, there's an icon in front of the name? If you click on it, it will open the file in the editor. Those files are part of the prompt Context. + +## Summary and next steps + +You've explored context in GitHub Copilot, which is key to generating quality suggestions. You saw how you can use chat participants to help guide GitHub Copilot, and how with natural language you can explore the project. Let's see how we can provide even more context to Copilot chat through the use of **Copilot instructions**. + +## Resources + +- [Copilot Chat cookbook][copilot-cookbook] +- [Use Copilot Chat in VS Code][copilot-chat-vscode] +- [Copilot extensions marketplace][copilot-marketplace] + +[chat-participants]: https://code.visualstudio.com/docs/copilot/copilot-chat#_chat-participants +[copilot-chat-vscode]: https://code.visualstudio.com/docs/copilot/copilot-chat +[copilot-cookbook]: https://docs.github.com/en/copilot/copilot-chat-cookbook +[copilot-extensions]: https://docs.github.com/en/copilot/using-github-copilot/using-extensions-to-integrate-external-tools-with-copilot-chat +[copilot-marketplace]: https://github.com/marketplace?type=apps&copilot_app=true diff --git a/content/ignite/3-cloudify-backend.md b/content/ignite/3-cloudify-backend.md new file mode 100644 index 0000000..304ab69 --- /dev/null +++ b/content/ignite/3-cloudify-backend.md @@ -0,0 +1,189 @@ +# Modernizing Your Backend with GitHub Copilot Agent Mode + + +GitHub Copilot can help you modernize and adapt your applications for cloud deployment. One of the most powerful features is Agent mode, which allows Copilot to work autonomously across multiple files to implement complex changes. Let's use this capability to enhance our application's database support. + +## Scenario + +The shelter's application currently uses SQLite, which works great for development and small deployments. However, as the shelter grows and considers cloud deployment options, they want the flexibility to use enterprise database systems like Microsoft SQL Server or PostgreSQL. You'll use GitHub Copilot's Agent mode to add support for these databases while maintaining backward compatibility with SQLite. + +## Overview of Copilot Agent mode + +Agent mode is an advanced feature of GitHub Copilot that allows it to work more autonomously on your behalf. Unlike regular chat or edits mode, Agent mode can: + +- Autonomously decide which files need to be modified +- Create new files as needed +- Install dependencies and make configuration changes +- Work iteratively to solve complex problems +- Run tests and validate changes + +When you activate Agent mode, Copilot becomes your coding partner that can handle end-to-end implementation of features, giving you time to focus on reviewing and validating the changes. + +![How agent mode works](./images/copilot-agent-mode-how-it-works.png) + +## Adding Copilot Instructions + +Copilot instructions is a markdown file is placed in your **.github** folder. It becomes part of your project, and in turn is available to all contributors to your codebase. You can use this file to indicate various coding standards you wish to follow, the technologies your project uses, or anything else important for Copilot Chat to understand when generating suggestions. + +> [!IMPORTANT] +> The *copilot-instructions.md* file is included in **every** call to GitHub Copilot Chat, and will be part of the context sent to Copilot. Because there is always a limited set of tokens an LLM can operate on, a large Copilot instructions file can obscure relevant information. As such, you should limit your Copilot instructions file to project-wide information, providing an overview of what you're building and how you're building it. If you need to provide more specific information for particular tasks, you can create [prompt files](https://docs.github.com/en/copilot/customizing-copilot/adding-repository-custom-instructions-for-github-copilot?tool=vscode#about-prompt-files). + +Here are some guidelines to consider when creating a Copilot instructions file: + +- The Copilot instructions file becomes part of the project, meaning it will apply to every developer; anything indicated in the file should be globally applicable. +- The file is markdown, so you can take advantage of that fact by grouping content together to improve readability. +- Provide an overview of **what** you are building and **how** you are building it, including: + - languages, frameworks and libraries in use. + - required assets to be generated (such as unit tests) and where they should be placed. + - any language specific rules such as: + - utilize [type hints][type-hints] in Python. + - use [arrow functions][arrow-functions] rather than the **function** keyword in TypeScript. +- If you notice GitHub Copilot consistently provides an unexpected suggestion (e.g. using class components for React), add those notes to the instructions file. + +Let's make Copilot do all the hard work for us by having it create the instructions file. + +1. [] Open Copilot Chat. +2. [] Select the **+** icon towards the top of Copilot chat to begin a new chat. +3. [] Click on the **Cog** icon at the top of the Chat window and select **Generate Instructions** from the menu. +4. [] Copilot will analyze the repository and generate a comprehensive instructions file based on the project structure, technologies, and patterns. +5. [] While copilot is generating the instructions, examine the chat window (scroll as necessary), look at the prompt being used, also that Copilot is reading the project files to gather context and write an effective prompt. +6. [] Review the generated instructions. In a real-world scenario, you would customize them with items specific to your enterprise or team requirements (such as internal coding standards, security policies, or organizational best practices). For this lab, you can use the generated instructions as-is. +7. [] Accept the suggested changes by clicking **Keep** on the list of files changed at the bottom of the Copilot Chat window. + +Now that we have an instruction file, the Copilot will be more effective when writing code. + +## Using Agent mode to add database support + +Let's use Agent mode to modify our backend to support multiple database systems. + +> [!NOTE] +> While we recommend using Claude Sonnet 4.5 for this exercise, you're free to experiment with other models if you'd like to see how different models approach the same task. + +1. [] Close any tabs you may have open in your VS Code to ensure Copilot has a clean context. +1. [] Open or switch to GitHub Copilot Chat. +1. [] Switch to Agent mode by clicking on the chat mode dropdown at the bottom of the Chat view and selecting **Agent**. + - If asked **Changing the chat mode will end your current session. Would you like to continue?** click **Yes** + - If you were already in Agent mode, press **+** to start a new session. +1. [] Select **Claude Sonnet 4.5** from the list of available models. +1. [] Send the following prompt to the agent (feel free to make changes to the wording if you'd like to experiment): + +> [!IMPORTANT] +> **Do NOT use the "type" button** that appears when hovering over the code block. Instead, **copy and paste** the prompt directly into the chat. Using the type button will cause Copilot to interpret each newline as pressing Enter, executing the prompt immediately after the first line before you can complete the full multi-line prompt. + +```text +Add support for Microsoft SQL Server and PostgreSQL in the backend. +If there is an env variable called MS_SQL_CONN_STRING or PGSQL_CONN_STRING use that connection string to connect to the server. +Otherwise keep using SQLite like currently. Install additional dependencies and or drivers as needed. +``` + +> [!NOTE] +> Because LLMs are probabilistic, not deterministic, the exact changes made can vary. The steps below describe a typical experience, but your experience may differ slightly. Also note that we are a little ambiguous in the prompt on purpose to see how the agent interprets it. + +## Monitoring the Agent's progress + +As the agent works, you'll see it taking various actions. Watch the terminal window and the VS Code interface to observe: + +- The prompt we just added being used by the agent +- The agent analyzing the codebase to understand the current database implementation +- The agent will most likely ask for your permission to execute code - carefully examine the request(s) and authorize them if appropriate +- Installation of new Python packages (like `psycopg2` for PostgreSQL or `pyodbc` for SQL Server) +- Code changes being made across multiple files (X files changes list at the bottom of the chat window) + - If you expand the list and click on file changed, you can see the changes being suggested with a visual diff. +- The agent's reasoning about each step it is taking +- On top of the chat window there may be a **Todos** list, which is the list of things the agent is performing, the list has a **(x/y)** format indicating the number of completed tasks versus the total tasks. You can expand the list and see it being updated in real time. It is a great way to observe how the agent is approaching the task at hand and its progress. + +![Todos list in chat window](./images/copilot-todos-list.png) + +> [!TIP] +> The terminal window will show you the commands the agent is running, including any package installations. The editor will highlight changes as they're made, similar to the diff view you saw with Copilot Edits. + +## Expected changes + +Copilot should make modifications to at least two key files: + +- **server/app.py** - Updates to the database initialization to support multiple database types +- **server/utils/seed_database.py** - Changes to the seeding logic to work with different database systems + +Copilot will typically: + +1. Add logic to check for environment variables (**MS_SQL_CONN_STRING** or **PGSQL_CONN_STRING**) +2. Configure SQLAlchemy to use the appropriate database connection based on available environment variables +3. Install required database drivers (like **pyodbc**, **psycopg2-binary**) +4. Update the **requirements.txt** file with new dependencies +5. Ensure backward compatibility with SQLite as the default + +## Handling (potential) incomplete changes + +> [!IMPORTANT] +> Sometimes the agent might not modify all necessary files on the first attempt. This can happen if the prompt isn't explicit enough or if the agent prioritizes certain changes over others. This is a normal part of working with AI agents, and you can guide them with follow-up prompts. + +**If you notice** that the changes to **server/seed_database.py** were not made because it is not on the **changed files** list at the bottom of Copilot Chat window, you can prompt the agent with a more specific prompt. + +![List of changed files](images/4-changed-files-agent-mode.png) + +If the changes were made skip to the next section, otherwise continue. This is the cost we pay for being ambiguous on our prompt. + +Use the following prompt: + +```text +Make sure to update the server/seed_database.py file to support Microsoft SQL Server and PostgreSQL as well. +``` + +The agent will then focus on making the necessary updates to that specific file. + +## Review and validate the changes + +Once the agent completes its work: + +1. [] Review the code changes made by the agent across the different files (click on the file names in the **changed files** list at the bottom of the Copilot Chat window to see diffs). +1. [] Check that the **requirements.txt** file has been updated with the new database drivers. +1. [] (Optionally) Ensure the application still works with SQLite by opening it: + - Navigate to +++http://localhost:5100/api/dogs+++ to verify the API still works + - Check the frontend at +++http://localhost:4321+++ to ensure the website loads correctly + - If the agent stopped the server you might need to start it again by running in the terminal ` .\scripts\start-app.ps1` +1. [] (Optionally) Run the Python tests to validate nothing broke (in case the agent wasn't executed the tests already): + + ```ps1 + ./venv/Scripts/Activate.ps1 + cd server + python -m unittest test_app.py + ``` + Here is an example of the agent running the tests without any specific instructions: + ![agent running the tests](./images/agent-running-the-tests.png) + +5. [] If all tests pass and the application works correctly, select **Keep** to keep the changes. + +> [!TIP] +> If you need to revert changes and take a different direction, you can click **Undo** to roll back the most recent set of changes. If you've used multiple prompts, you can also revert to earlier states by restoring a snapshot from the chat history. +> ![alt text](./images/restore-snapshot.png) + +> [!NOTE] +> While we're not actually connecting to SQL Server or PostgreSQL in this exercise, the code is now ready to support them when those environment variables are provided in a cloud deployment. + +## Summary and next steps + +You've successfully used GitHub Copilot's Agent mode to add enterprise database support to your application! You saw how the agent can autonomously: + +- Analyze existing code structure +- Make changes across multiple files +- Install required dependencies +- Work iteratively to complete complex tasks + +This makes your application more flexible and ready for cloud deployment. + +## What's next? + +Now that you've enhanced your application with multi-database support, it's time to explore how GitHub Copilot can help you manage your Azure cloud resources. In the next lab, you'll learn how to: + +- Use GitHub Copilot's Agent mode with the Azure extension +- Query your Azure subscriptions and resources using natural language +- Explore your Azure environment without leaving VS Code +- Understand how tool-calling enables Copilot to interact with external services + +## Resources + +- [Copilot Agent mode][copilot-agent] +- [SQLAlchemy documentation][sqlalchemy-docs] + +[copilot-agent]: https://code.visualstudio.com/docs/copilot/chat/chat-agent-mode +[sqlalchemy-docs]: https://docs.sqlalchemy.org/ diff --git a/content/ignite/4-interating-with-azure-using-natural-language.md b/content/ignite/4-interating-with-azure-using-natural-language.md new file mode 100644 index 0000000..633563e --- /dev/null +++ b/content/ignite/4-interating-with-azure-using-natural-language.md @@ -0,0 +1,113 @@ +# Interacting with Azure Using GitHub Copilot + +GitHub Copilot can help you manage and interact with your Azure resources directly from Visual Studio Code. Through the GitHub Copilot for Azure extension, you can query your Azure subscriptions, resource groups, and deployed resources using natural language - no need to switch between windows or memorize Azure CLI commands. + +## Scenario + +As the shelter's application grows, you may need to deploy it to Azure. Before doing so, it's helpful to understand what Azure resources you already have available. You'll use GitHub Copilot in Agent mode with the [GitHub Copilot for Azure][gh-copilot-for-azure] extension to explore your Azure environment using simple natural language queries. + +## Overview of GitHub Copilot for Azure + +The GitHub Copilot for Azure extension brings Azure management capabilities directly into your development workflow. With this extension, Copilot can: + +- List your Azure subscriptions and resources +- Query resource properties and configurations +- Provide information about Azure services +- Help you understand your Azure environment + +This integration allows you to stay in your coding flow while gathering information about your cloud infrastructure. + +## Prerequisites + +Good news! We've already set up everything you need for this exercise: + +- The **[GitHub Copilot for Azure][gh-copilot-for-azure]** extension is installed in VS Code +- Azure credentials are ready for authentication +- An Azure subscription with resources is available + +You're ready to start exploring your Azure environment! + +## Explore your Azure resources + +Let's use GitHub Copilot's Agent mode to discover what Azure resources are available in your subscription. + +1. [] Close any tabs you may have open in your VS Code to ensure Copilot has a clean context. +2. [] Open or switch to GitHub Copilot Chat if it's not already open. +3. [] Switch to Agent mode by clicking on the chat mode dropdown at the bottom of the Chat view and selecting **Agent**. + - If asked **Changing the chat mode will end your current session. Would you like to continue?** click **Yes** + - If you were already in Agent mode, press **+** to start a new session. +4. [] Select **Claude Sonnet 4.5** from the list of available models. +5. [] Send the following prompt to the agent: + + ```text + show me the list of my azure resources + ``` + +6. Since we never logged in on Azure, the extension will guide us through the login process interactively. +7. [] The **GitHub Copilot for Azure** extension will prompt you to log in. Click **Allow** to proceed. (after Copilot attempted to run **@azure query azure resource graph**) +8. [] When prompted authenticate on popup, use the following credentials: + - +++@lab.CloudPortalCredential(User1).Username+++ on the **Email, phone, or Skype** input box and click on **Next** + - +++@lab.CloudPortalCredential(User1).AccessToken+++ on the **Temporary Access Pass** field and click on **Sign in** button +9. [] Says **Yes, all apps** when asked to **Automatically sign in to all desktop apps and websites on this device?** +10. [] Click **Allow** if prompt (**The extension 'GitHub Copilot for Azure' wants to sign in sign in GitHub**) +11. [] Select the user to login (**User1-.....**) when prompt at the top of VS Code screen (**Select an account for 'GitHub Copilot for Azure' to use or Esc to cancel**) +12. [] With authentication in place, Copilot retrieves your resources, displaying a comprehensive list including: + - Resource names + - Resource types (You should have access to at least two resources: A managed identity, and a storage account) + - Resource groups + - Locations + +> [!Tip] +> Notice how you can ask questions in natural language without needing to know specific Azure CLI commands or navigate the Azure Portal. Copilot translates your intent into the appropriate Azure queries. + +> [!Tip] +> We recommend that you continue to the next lab, but we have a hidden Easter Egg in the Azure resources if you want to use Copilot to find it. + +## Understanding tool execution + +When you run the prompt, observe how the agent works: + +- The agent identifies that it needs to interact with Azure +- It requests permission to use the Azure resource query tool +- After authentication, it executes the query and formats the results +- You receive a readable summary of your Azure resources + +This demonstrates how Copilot's tool-calling capability allows it to interact with external services like Azure on your behalf, Copilot knows nothing about Azure, but the GitHub Copilot for Azure extension provides him with the tools necessary to interact with an Azure subscription and Copilot will call the necessary tools. If you click on the **Wrench** icon at the bottom of Copilot Chat, you can see the list of tools available to Copilot. The tools are made available to Copilot either by VS Code extensions or by installing an MCP server. + +> [!NOTE] +> The GitHub Copilot for Azure extension provides many more capabilities beyond listing resources. You can ask questions about specific resources, query logs, get cost information, and much more - all using natural language within Copilot Chat. + +> [!TIP] +> The GitHub Copilot for Azure includes the `@azure` chat participant, which allows you to specify Azure-related tasks directly without relying so much on Copilot understanding your intent. For example, you can use prompts like `@azure show me the details of my storage account` to get specific information. + +## Summary and next steps + +You've successfully used GitHub Copilot's Agent mode with the Azure extension to explore your Azure environment! You saw how: + +- Natural language queries can retrieve Azure resource information +- Tool-calling enables Copilot to interact with external services +- You can stay in your development environment while managing cloud resources + +This integration makes it easier to understand your Azure infrastructure without context switching, keeping you focused on your development tasks. + +## What's next? + +Now that you understand how to interact with Azure through Copilot, you can explore additional capabilities: + +- **Using the MSSQL extension for Visual Studio Code** - Learn how to use Copilot to interact with SQL Server databases directly from VS Code +- **Using GitHub Copilot for Azure** - Discover how to interact with Azure resources using Copilot's Azure integration + +**Choose the path** that interests you most, or explore both to get the full cloud development experience! + +> [!TIP] +> In the interest of time we recommend you choose just one. + +## Resources + +- [GitHub MCP registry][gh-mcp-registry] +- [GitHub Copilot for Azure VS Code extension][gh-copilot-for-azure] +- [What is the Model Context Protocol (MCP)?][what-is-mcp] + +[gh-copilot-for-azure]: https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azure-github-copilot +[gh-mcp-registry]: https://github.com/mcp +[what-is-mcp]: https://modelcontextprotocol.io/docs/getting-started/intro diff --git a/content/ignite/5-working-with-sqlserver.md b/content/ignite/5-working-with-sqlserver.md new file mode 100644 index 0000000..0fd8904 --- /dev/null +++ b/content/ignite/5-working-with-sqlserver.md @@ -0,0 +1,256 @@ +# Working with SQL Server Using GitHub Copilot + +GitHub Copilot for the MSSQL extension brings AI-powered assistance directly into your SQL development workflow within Visual Studio Code. This integration enables developers to work more efficiently with SQL Server, Azure SQL, and Microsoft Fabric databases by: + +- **Writing and optimizing queries** - Generate SQL queries from natural language descriptions and receive AI-recommended improvements for performance +- **Exploring and designing schemas** - Understand, design, and evolve database schemas using intelligent, code-first guidance with contextual suggestions for relationships and constraints +- **Understanding existing code** - Get natural language explanations of stored procedures, views, and functions to help you understand business logic quickly +- **Generating test data** - Create realistic, schema-aware sample data to support testing and development environments +- **Analyzing security** - Receive recommendations to avoid SQL injection, excessive permissions, and other security vulnerabilities +- **Accelerating development** - Scaffold backend components and data access layers based on your database context + +This powerful combination allows you to focus on solving problems rather than memorizing SQL syntax, making database development more intuitive and productive. + +## Scenario + +Now that your application supports multiple database systems including SQL Server, you want to explore how GitHub Copilot can help you interact with your SQL Server database directly from VS Code. You'll use the GitHub Copilot for MSSQL extension to generate queries and explore your data using natural language. + +## Prerequisites + +Good news! We've already set up everything you need for this exercise: + +- SQL Server Express is installed and running locally + - With pets database populated with data +- The **[GitHub Copilot for MSSQL][mssql-extension]** extension is installed in VS Code +- A SQL Server connection has been pre-registered in your environment + +You're ready to connect and start querying right away! + +## Understanding GitHub Copilot for MSSQL + +The GitHub Copilot for MSSQL extension brings AI-powered assistance to your database work. It can: + +- Generate SQL queries from natural language descriptions +- Explain existing queries in plain English +- Suggest query optimizations and best practices +- Help explore database schemas and relationships +- Convert natural language questions into executable SQL + +This integration makes working with databases more intuitive, especially when you're exploring unfamiliar schemas or need to write complex queries quickly. + +## Connect to SQL Server + +First, let's establish a connection to your SQL Server instance. + +1. [] Open the **SQL Server** view by clicking on the SQL Server icon in the Activity Bar (left sidebar). + - ![MSSQL server extension](images/5-mssql-extension.png) +2. [] For your convenience we have already registered **LocalServer** for you. +3. [] Expand **LocalServer** and you should see **Databases**, **Security** and **Server Objects** nodes as a tree. Expand the **Databases** node to see the **PetsDB** database. + +## Optional: Create database + +> [!NOTE] +> We've already provided a pre-seeded **PetsDB** database for you. This section is optional if you want to practice creating a database from scratch using Copilot's inline mode. + +If you want to create your own database: + +1. [] In the SQL Server view, right-click on your server connection and select **New Query**. +2. [] Press Control+I to open Copilot inline chat in the query editor. +3. [] Type the following prompt: + + ```text + Create a SQL Server database called Pets with recovery mode set to simple + ``` + +4. [] Review the generated SQL and click **Accept** the suggestion if it feels right. It should be very similar to this: + + ```sql-nocopy + CREATE DATABASE Pets; + ALTER DATABASE Pets SET RECOVERY SIMPLE; + ``` + +5. [] Execute the query by on the **Green arrow** or pressing Control+Shift+E. +6. [] Refresh the SQL Server view to see your new **Pets** database. + +Typically we would now seed the just created database by calling the **seed-database.ps1** (or **seed-database.sh** on Linux/Mac), but let's skip this so we are not distracted by non-Copilot activities. + +## Query the database using natural language using agent mode + +Now let's use GitHub Copilot to query our database using natural language. This is where the power of AI-assisted SQL really shines! + +1. [] Open GitHub Copilot Chat if it's not already open and start a new chat by clicking the **+** button and make sure you are in **Agent** mode. +2. [] Select **GPT-4.1** from the list of available models. +3. [] Click on the tools icon on the bottom left corner of the chat window, this will open the **Configure Tools** window. +4. [] Scroll down and expand the **Extension: SQL Server (mssql)** + ![List of tools provided by SQL extension](images/5-sql-tools-list.png) +5. [] Review the tool descriptions. These tools are external services or functions that Copilot can interact with to perform specific tasks, such as retrieving data, running code, or managing resources. By calling these tools, Copilot can provide more accurate, up-to-date, and context-aware assistance, going beyond its built-in knowledge to deliver tailored solutions for your needs. +6. [] Dismiss the window by clicking **OK**. +7. [] Let's execute our first prompt in the chat window: + + ```text + connect to the PetsDB database using my LocalServer profile name + ``` +8. [] Copilot is going to ask our permission to execute **mssql: List Connections tool**. Every time Copilot needs to execute something, it will ask your permission. In this case let's click on the dropdown selector and pick **Always allow**. This will add this tool to the auto-approve list; in the future if Copilot wants to run this tool, you will not be asked for confirmation. + ![always allow list connection tool execution](images/5-always-allow-tool-execution.png) +9. [] Now it will ask to connect to the server, select **Always Allow** as well. +10. [] We are now connected to the database. Let's see what tables the database has by running the prompt (click allow on tool execution confirmation): + ```text + show me the list of tables + ``` + You should see two tables: **dogs** and **breeds**. + +11. [] Now we know our database has two tables, so let's understand the schema by running the prompt: + ```text + show me the schema + ``` + The schema designer will open, showing the structure of the database, including tables, columns, and relationships. This is possible because tool calling allows interaction with the extension itself. + +12. [] Great, we are now ready to run a query on our **PetsDB** database. Use the prompt in the chat window: + + ```text + How many "Golden Retrievers" do we have available for adoption in the Database? + ``` +13. [] When asked permission to run **mssql: Run query**, before allowing it, click on the **show more** to preview the SQL statement Copilot wants to execute to see that it was able to join tables and set the right predicates to count the number of Golden Retrievers, if you click again on the show more you can see the inputs that will be passed to the tool (**connectionId** and **query**). When a tool is executed you can always see the inputs and if you choose to execute it the output as well. The query should be similar to: + + ```sql-nocopy + SELECT COUNT(*) as available_golden_retrievers + FROM dogs d + JOIN breeds b ON d.breed_id = b.id + WHERE b.name = 'Golden Retriever' + AND d.available = 'Available'; + ``` + +14. [] Click Allow to execute the query. Copilot will tell how many golden retrievers are available for adoption. + +> [!TIP] +> Notice how Copilot understands the context of your database and generates a SQL query that: +> - Joins the necessary tables (dogs and breeds) +> - Filters by breed name +> - Filters by availability status +> - Counts the results + +> [!TIP] +> To avoid repeated approval prompts, you can configure auto-approval for tools and commands. Use the `chat.tools.autoApprove` setting to enable automatic approval per workspace, or set it globally for all workspaces. Be aware of the [security implications][copilot-tools-auto-approve] before enabling this feature, but you have control which tools you want to auto-approve. + +> [!IMPORTANT] +> Because LLMs are probabilistic, not deterministic, the exact SQL generated can vary. The query should accomplish the same goal even if the syntax differs slightly. + +## Exercise: Explore more queries (optional) + +If you want to get some ideas about some more complex queries that Copilot can generate, try asking Copilot these questions: + +1. [] **Find all available dogs with their breed names**: Ask Copilot to generate a query that shows dog names, ages, and breed names for all dogs that are available for adoption. + + > [!Hint] + > Try a prompt like: "Show me all available dogs with their names, ages, and breed names" + +2. [] **Group dogs by breed**: Ask Copilot to count how many dogs of each breed are in the database. + + > [!Hint] + > Try: "Count the number of dogs for each breed and show the breed name" + +3. [] **Find the oldest dog**: Ask Copilot to find the name and age of the oldest dog in the shelter. + + > [!Hint] + > Try: "Find the oldest dog in the database" + +4. [] **Complex filtering**: Ask Copilot to find all available dogs that are younger than 5 years old, grouped by breed. + + > [!Hint] + > Try: "Show me available dogs younger than 5 years old, grouped by breed with counts" + +## Understanding query explanations + +Copilot can also help you understand existing SQL queries. This is incredibly useful when working with complex queries or legacy code. + +1. [] Copy a complex query from your previous exercises into the query editor. + +2. [] Select the entire query. (or you can use this one): + +```sql +SELECT b.name AS BreedName, COUNT(d.id) AS DogCount +FROM dbo.dogs d + JOIN dbo.breeds b ON d.breed_id = b.id +WHERE d.status = 'available' AND d.age < 5 +GROUP BY b.name +ORDER BY DogCount DESC; +``` + +3. [] In Copilot inline Chat, type `/explain` and press Enter. +4. [] Read through Copilot's explanation of what the query does, including details about joins, filters, and aggregations. + +> [!TIP] +> If the text is too big and hard to read because of the scrolling, click on **View Chat** to see the explanation in the chat panel. + +> [!NOTE] +> This feature is particularly helpful when inheriting code from other developers or when returning to queries you wrote months ago. + +## Exercise: Generate test data with the @mssql chat participant + +GitHub Copilot can help you generate realistic test and mock data for your database. This is especially useful when you need to test your application with meaningful data, create demos, or simulate edge cases. Let's use the **@mssql** chat participant to generate test data. + +> [!NOTE] +> The **@mssql** chat participant is specifically designed for SQL Server operations and requires an active database connection to understand your schema context. + +Before starting, type in the chat window `@mssql /` to see the available slash commands the **@mssql** chat participant offers. + +### Generate edge case test data (feature in Preview) + +Testing edge cases is crucial for building robust applications. Let's generate data to test boundary conditions or uncover other issues our code might have with odd data shapes. + +1. [] Open GitHub Copilot Chat and start a new chat by clicking the **+** button. +2. [] Make sure you have an open query window on Visual Studio Code connected to the **PetsDB** database, his connection allows the **@mssql** chat participant to understand the context of your database environment, enabling accurate and context-aware suggestions. +3. [] Ask Copilot to generate edge case data using the chat participant by typing the following prompt: + +> [!IMPORTANT] +> **Do NOT use the "type" button** that appears when hovering over the code block. Instead, **copy and paste** the prompt directly into the chat. Using the type button will cause Copilot to interpret each newline as pressing Enter, executing the prompt immediately after the first line before you can complete the full multi-line prompt. + +```text +@mssql Generate insert statements for the dogs table to test edge cases. Include: +- A dog with age 0 (newborn puppy) +- A dog with age 20 (very old) +- Dogs with very short names (1-2 characters) +- Dogs with longer names (15+ characters) +- Other edge case variations you can think of +All should reference valid breed IDs. +``` + +4. [] Review the generated SQL to see how Copilot handles these edge cases. +5. [] Execute the statements. + +> [!IMPORTANT] +> Edge case testing helps you discover potential issues before they affect real users. Pay attention to how your UI displays very long names, ages at boundaries, etc. + +## Summary and next steps + +You've successfully used GitHub Copilot with the MSSQL extension to interact with SQL Server using natural language! You learned how to: + +- Connect to SQL Server from VS Code +- Generate SQL queries from natural language questions +- Execute and validate query results +- Use Copilot to explore and understand database queries + +This integration dramatically reduces the friction of working with databases, allowing you to focus on the questions you want to answer rather than the syntax required to answer them. + +## What's next? + +Continue exploring more advanced Copilot capabilities: + +- Using GitHub Copilot for Azure - Learn how to interact with Azure resources directly from VS Code + +## Resources + +- [GitHub Copilot for MSSQL documentation][copilot-mssql] +- [SQL Server extension for VS Code][mssql-extension] +- [Quickstart: Use GitHub Copilot Agent Mode (Preview)][mssql-extension-agent-mode-quickstart] +- [Quickstart: Generate data for testing and mocking (Preview)][mssql-extension-data-testing-mocking-quickstart] +- [Writing queries with GitHub Copilot][copilot-sql-guide] +- [SQL Server T-SQL reference][tsql-reference] + +[copilot-mssql]: https://learn.microsoft.com/en-us/sql/tools/visual-studio-code-extensions/github-copilot/overview?view=sql-server-ver17 +[mssql-extension]: https://marketplace.visualstudio.com/items?itemName=ms-mssql.mssql +[mssql-extension-agent-mode-quickstart]: https://learn.microsoft.com/en-us/sql/tools/visual-studio-code-extensions/github-copilot/agent-mode?view=sql-server-ver17 +[mssql-extension-data-testing-mocking-quickstart]: https://learn.microsoft.com/en-us/sql/tools/visual-studio-code-extensions/github-copilot/test-and-mocking-data-generator?view=sql-server-ver17 +[copilot-sql-guide]: https://code.visualstudio.com/docs/copilot/copilot-chat +[tsql-reference]: https://docs.microsoft.com/en-us/sql/t-sql/language-reference +[copilot-tools-auto-approve]: https://code.visualstudio.com/docs/copilot/chat/chat-agent-mode#_autoapprove-all-tools-and-commands diff --git a/content/ignite/6-infra-as-code.md b/content/ignite/6-infra-as-code.md new file mode 100644 index 0000000..60be14b --- /dev/null +++ b/content/ignite/6-infra-as-code.md @@ -0,0 +1,176 @@ +# Accelerating Infrastructure as Code (IaC) with GitHub Copilot + +Infrastructure as Code (IaC) lets teams define, provision, and manage cloud infrastructure using code. This brings the benefits of version control, automation, and repeatability to infrastructure management. + +Tools like [Terraform][terraform-docs] and [Bicep][bicep-docs] make it easier to describe and deploy cloud resources declaratively. However, writing and maintaining IaC files can still take time and may be prone to errors. + +This is where GitHub Copilot excels. + +## Why Use GitHub Copilot for IaC? + +GitHub Copilot helps you write, refactor, and understand IaC templates quickly. Using natural language prompts and contextual awareness, Copilot can: + +- **Generate infrastructure templates from plain language descriptions** — For example, describe a resource you need, such as “create an Azure storage account with a private endpoint,” and Copilot will suggest the Terraform or Bicep code to do it. +- **Reduce syntax errors and boilerplate code** — Copilot understands the structure and schema of Terraform and Bicep resources, minimizing typos and repetitive declarations. +- **Speed up resource creation** — Copilot quickly scaffolds configurations, including providers, variables, modules, and outputs. +- **Improve readability and maintainability** — Copilot can add comments, generate variable documentation, and suggest consistent naming conventions. +- **Support learning and experimentation** — You can explore and refine configurations interactively instead of memorizing every resource property. + +GitHub Copilot doesn’t replace your understanding of Terraform or Bicep. Instead, it enhances your workflow—reducing friction and helping you focus on design and intent, not just syntax. + +## Scenario + +The Tailspin Shelter application includes a database, a website, and an API backend. Though everything is currently hosted locally in your repository, you want to deploy to Azure using an automated process for Infrastructure as Code(IaC). This reduces human error in deployments and introduces continuous integration and continuous deployment (CI/CD) practices. + +In this workshop, you will learn how to work with GitHub Copilot to write, modify and test scripts in either Terraform or Bicep, it's your choice! If you're feeling brave, you can complete both sections! + +> [!NOTE] +> The same workflow can be applied to other cloud providers. Copilot can also suggest Terraform code for AWS, GCP, and more. + +## Prerequisites + +Everything you need for this exercise is already set up: + +- GitHub Copilot +- [HashiCorp Terraform extension for VSCode](https://marketplace.visualstudio.com/items?itemName=HashiCorp.terraform) (**.tf** files) +- [Bicep extension for VSCode](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-bicep) (**.bicep** files) +- GitHub Copilot instruction files for Terraform Azure instructions and Bicep code best practices + +> [!IMPORTANT] +> Large Language Models (LLMs) are probabilistic, not deterministic. This means that each time you run this lab, you may see different results: +> - The exact code structure and implementation details may vary +> - The agent may take different approaches to solve the same problem +> - File organization and naming conventions might differ +> - The sequence of steps and tool usage could change +> +> This is normal and expected behavior. Different models (like Claude Sonnet 4.5 vs. GPT-4) may also produce different outputs. What matters is that the generated code achieves the intended functionality. Review all generated code carefully and iterate as needed to match your requirements. + +Start below to follow the Terraform learning path. To follow the Bicep learning path, scroll down to the **Prompting Bicep with Copilot** section. + +> [!NOTE] +> Terraform and Bicep exercises are the same, they just use different IaC tools. Choose the one you prefer, or complete both if you have time! + +## Prompting Terraform with Copilot + +Once your environment is ready, let’s use GitHub Copilot to create your first Terraform configuration file. + +Terraform lets you define infrastructure declaratively—specifying what you want, not how to build it. Copilot enhances this by suggesting Terraform code right in your editor, driven by your descriptions. + +In this scenario, you will create a Terraform configuration file with Copilot, and then generate a deployment workflow. + +1. [] Close any tabs you may have open in your VS Code to ensure Copilot has a clean context. +2. [] Open or switch to GitHub Copilot Chat if it's not already open. +3. [] Switch to Agent mode by clicking on the chat mode dropdown at the bottom of the Chat view and selecting **Agent**. + - If asked **Changing the chat mode will end your current session. Would you like to continue?** click **Yes** + - If you were already in Agent mode, press **+** to start a new session. +4. [] Select **Claude Sonnet 4.5** from the list of available models. +5. [] Send the following prompt to the agent: + `Create a simple Terraform configuration for an Azure Static webapp with an Azure SQL Database` +6. Copilot may decide to execute tools to do a better job. If it does, examine the request being made and **Allow** it. For example it may ask to run **azureterraformbestpractices** from **Azure MCP server** +7. [] It will also read the instructions file specific for Terraform, which you can see the chat results as **Read terraform-azure.instructions.md**, click on the file or open it from the **.github/instructions** folder and take a look at it while Copilot is working. + ![reading instruction file](./images/6-reading-instruction-image.png) +9. [] Copilot might try validate the created **.tf** file with **terraform** CLI. The tool is not installed (intentionally) so not only you can observe that the Agent may decide to use tools (**Allow** the execution) to validate it's own code and in this case ask permission to install it after it tries to run **terraform** and realized the execution failed because it is not installed. Click on **Skip**, the agent will adapt on the absence of the tool. + + ![terraform execution failure](images/6-tf-execution-failure.png) + +9. When the execution has finished, see the list of files changes. You should see a **main.tf**, along with corresponding variables and outputs files. Be sure to review the generated code carefully — iteration and refinement are essential when working with Copilot’s output and then click on **keep** +10. []**Create Reusable Infrastructure** + Next, make your infrastructure reusable and scalable for Azure by asking Copilot: + `Generate a Terraform module for the static site and storage account so it can be used in multiple environments` +11. If Copilot tries to execute tools, review the ask and **Allow** them. + Copilot will often generate several files and environment setups. Take time to review them and refine the output — iterative improvement is an essential part of the process. +12. []**Generate a Deployment Workflow** + Since Copilot has suggested multiple environments, create a deployment pipeline in GitHub by asking: + `Create a GitHub deployment YAML workflow to deploy to Azure.` + Copilot will generate a multi-step YAML workflow you can use. + +13. **Next Steps** + - Iterate on the output to match your environment. + - Add tests to your Terraform code (recommended). + - Ask Copilot to review your code for security. + +By combining GitHub Copilot with Terraform, you’ve seen how AI can accelerate infrastructure-as-code development while maintaining flexibility and control. You now have a foundation for deploying and managing scalable, repeatable environments all powered by intelligent code generation. Continue refining your prompts, expanding your instruction files, and iterating on Copilot’s output to make it a true extension of your team’s DevOps workflow. With these practices in place, your cloud deployments will become faster, more consistent, and easier to manage over time. + +Scroll below to complete the Working with Bicep Module, or proceed to the next lab + + +## Prompting Bicep with Copilot + +Bicep is a domain-specific language (DSL) for deploying Azure resources declaratively. It makes Infrastructure as Code easier to write, read, and maintain by simplifying the syntax used in traditional ARM templates. With Bicep, you can define your infrastructure using clean, modular code that integrates seamlessly with Azure. + +When used with GitHub Copilot, Bicep authoring becomes faster and smarter—Copilot can generate, explain, and refine your Bicep templates from simple natural-language prompts, helping you focus on architecture and best practices instead of syntax. + +In this scenario, you will create an initial Bicep file with Copilot and then generate a deployment workflow. + +### Steps + +1. [] Close any tabs you may have open in your VS Code to ensure Copilot has a clean context. +2. [] Open or switch to GitHub Copilot Chat if it's not already open. +3. [] Switch to Agent mode by clicking on the chat mode dropdown at the bottom of the Chat view and selecting **Agent**. + - If asked **Changing the chat mode will end your current session. Would you like to continue?** click **Yes** + - If you were already in Agent mode, press **+** to start a new session. +4. [] Select **Claude Sonnet 4.5** from the list of available models. +5. [] Send the following prompt to the agent: + `Create a simple Bicep configuration for an Azure Static webapp with an Azure SQL Database` +6. [] Copilot may decide to execute tools to do a better job. If it does, examine the request being made and **Allow** it. For example it may ask to run **get_bestpractices** from **Azure MCP server**. +7. [] If asked to **Allow MCP tools from "Azure MCP" to make LLM requests?" click on **Always** + + Observe the process. Copilot output, the actions it is taking and the files it is reading,etc. When it is finished it will generate a **main.bicep** file, along with corresponding variables and outputs files. + + ![Chat output](./images/6-output-bicep-simple.jpg) + + You can view the files in your IDE by expanding the **X files changed** and choose to keep them, undo the changes, or modify. Be sure to review the generated code carefully — iteration and refinement are essential when working with Copilot’s output. + - Add additional security features + - Optimize the configuration for cost + - Add more environment-specific configurations +8. [] Click on **Keep** + +9. []**Create Reusable Infrastructure** + Next, make your infrastructure reusable and scalable for Azure by asking Copilot: + `Generate a Bicep module for the static site and storage account so it can be used in multiple environments.` + + Copilot will often generate several files and environment setups. Take time to review them and refine the output — iterative improvement is an essential part of the process. + +10. []**Generate a Deployment Workflow** + Since Copilot has suggested multiple environments, create a deployment pipeline in GitHub by asking: + `Create a GitHub Actions deployment YAML workflow to deploy to Azure.` + Copilot will generate a multi-step YAML workflow you can use, if asked to allow execution of tools, **allow** it. + +11. **Next Steps** + - Iterate on the output to match your environment. + - Add tests to your Bicep code (recommended). + - Ask Copilot to review your code for security. + +By combining GitHub Copilot with Bicep, you've experienced how AI can accelerate Azure-native infrastructure development while preserving clarity, modularity, and control. You now have a foundation for deploying and managing a complete environment — including a web app, API, and database — using clean, reusable Bicep templates. Continue refining your prompts and expanding your Copilot instruction files to reflect your team's standards and architecture patterns. As you iterate, Copilot becomes an even more capable assistant, helping you build consistent, secure, and scalable Azure deployments with less effort and greater confidence. + +## Resources + +### Infrastructure as Code Documentation + +- [Terraform Documentation][terraform-docs] +- [Terraform Azure Provider][terraform-azure-provider] +- [Azure Bicep Documentation][bicep-docs] +- [Bicep Best Practices][bicep-best-practices] + +### GitHub Copilot Resources + +- [Copilot Instruction Files][copilot-instructions] +- [Awesome Copilot - Curated list of resources, tools, and best practices][awesome-copilot] + +### CI/CD and GitHub Actions + +- [GitHub Actions Documentation][github-actions-docs] +- [GitHub Actions for Azure][github-actions-azure] +- [Terraform GitHub Actions][terraform-github-actions] +- [Deploy Bicep with GitHub Actions][bicep-github-actions] + +[terraform-docs]: https://www.terraform.io/docs +[terraform-azure-provider]: https://registry.terraform.io/providers/hashicorp/azurerm/latest/docs +[bicep-docs]: https://learn.microsoft.com/azure/azure-resource-manager/bicep/ +[bicep-best-practices]: https://learn.microsoft.com/azure/azure-resource-manager/bicep/best-practices +[copilot-instructions]: https://docs.github.com/en/copilot/customizing-copilot/adding-repository-custom-instructions-for-github-copilot +[awesome-copilot]: https://github.com/github/awesome-copilot +[github-actions-docs]: https://docs.github.com/actions +[github-actions-azure]: https://github.com/Azure/actions +[terraform-github-actions]: https://github.com/hashicorp/setup-terraform +[bicep-github-actions]: https://learn.microsoft.com/azure/azure-resource-manager/bicep/deploy-github-actions \ No newline at end of file diff --git a/content/ignite/b1-add-feature-bonus.md b/content/ignite/b1-add-feature-bonus.md new file mode 100644 index 0000000..d3b95d9 --- /dev/null +++ b/content/ignite/b1-add-feature-bonus.md @@ -0,0 +1,110 @@ +# Bonus content + +## Add the filter feature + +We've explored how we can use GitHub Copilot to explore our project and to provide context to ensure the suggestions we receive are to the quality we expect. Now let's turn our attention to putting all this prep work into action by generating new code! We'll use GitHub Copilot to aid us in adding functionality to our website. + +### Scenario + +The website currently lists all dogs in the database. While this was appropriate when the shelter only had a few dogs, as time has gone on the number has grown and it's difficult for people to sift through who's available to adopt. + +The shelter has asked you to add filters to the website to allow a user to select a breed of dog and only display dogs which are available for adoption. + +### Copilot Edits + +Previously we utilized Copilot chat, which is great for working with an individual file or asking questions about our code. However, many updates necessitate changes to multiple files throughout a codebase. Even a seemingly basic change to a webpage likely requires updating HTML, CSS and JavaScript files. Copilot Edits allows you to modify multiple files at once. + +With Copilot Edits, you will add the files which need to be updated to the context. Once you provide the prompt, Copilot Edits will begin the updates across all files in the context. It also has the ability to create new files or add files to the context as it deems appropriate. + +### Add the filters to the dog list page + +Adding the filters to the page will require updating a minimum of two files - the Flask backend and the Svelte frontend. Fortunately, Copilot Edits can update multiple files! Let's get our page updated with the help of Copilot Edits. + +> [!NOTE] +> Because Copilot Edits works best with auto-save enabled, we'll activate it. As we'll explore a little later in this exercise, Copilot Edits provides powerful tools to undo any changes you might not wish to keep. + +1. [] Return to Visual Studio Code. +2. [] Close any tabs you may have open in your VS Code to ensure Copilot chat has an empty context. +3. [] Enable Auto Save by selecting **File** > **Auto Save**. (top left menu) +4. [] Open or switch to GitHub Copilot Chat. +5. [] Switch to edit mode by selecting **Edit** in the chat mode dropdown at the bottom of Chat view (should be currently **Ask**) + - If asked **Changing the chat mode mode will end your current session. Would you like to continue?** click **Yes** + - If you were already on Copilot Edit mode, press **+** to start a new chat. +6. [] Select **Claude 4.5 Sonnet** from the list of available models +7. [] Click **Add Context...** in the chat window. +8. [] Select **server/app.py** and **client/src/components/DogList.svelte** files (you need to select **Add context** for each file) + +> [!TIP] +> If you type the file names after clicking **Add context**, they will show up in the filter. You can also drag the files or right click file in explorer and select **Copilot -> Add File to Chat**) + +9. [] Ask Copilot to generate the update you want to the page, which is to add filters for both dog breed and if dogs are available for adoption. Use your own phrasing, ensuring the following requirements are met: + - A dropdown list should be provided with all breeds + - A checkbox should be available to only show available dogs + - The page should automatically refresh whenever a change is made + +> [!NOTE] +> You should use your own phrasing when generating the prompt. As highlighted previously, part of the exercise is to become comfortable creating prompts for GitHub Copilot. One key tip is it's always good to provide more guidance to ensure you get the code you are looking for. + +Copilot begins generating the suggestions! + +### Reviewing the suggestions + +Unlike our prior examples where we worked with an individual file, we're now working with changes across multiple files - and maybe multiple sections of multiple files. Fortunately, Copilot Edits has functionality to help streamline this process. + +GitHub Copilot will propose the following changes: + +- Update the endpoint to list all dogs to accept parameters for breed and availability. +- Update the webpage to include the dropdown list and checkbox. + +As the code is generated, you will notice the files are displayed using an experience similar to diff files, with the new code highlighted in green and old code highlighted in red (by default). + +If you open an individual file, you can keep or undo changes by using the buttons provided. + +![Screenshot of keep/undo interface for an individual file](./images/copilot-edits-keep-undo-file.png) + +You can also keep or undo all changes made. + +![Screenshot of keep/discard interface on the chat window](./images/copilot-edits-keep-undo-global.png) + +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+++ to see the updates! +3. [] Run the Python tests by running the following commands (you might want to open a new terminal) + - `./venv/Scripts/Activate.ps1` + - `python -m unittest discover -s server` ensure all tests pass (3 tests should pass) +4. [] If any changes are needed, explain the required updates to GitHub Copilot and allow it to generate the new code. + +> [!IMPORTANT] +> Working iteratively a normal aspect of coding with an AI pair programmer. You can always provide more context to ensure Copilot understands, make additional requests, or rephrase your original prompts. To aid you in working iteratively, you will notice undo and redo buttons towards the top of the Copilot Edits interface, which allow you to move back and forth across prompts. +> +> ![Screenshot of the undo/redo buttons](./images/copilot-edits-history.png) + +5. [] Confirm the functionality works as expected, then select **Keep** to accept all the changes. +6. Optional: Disable Auto Save by unselecting **File** > **Auto Save**. + +> [!HINT] +> If you are stuck or just want to see alternatives way of prompting we have provided two prompts +> A [simple one](https://github.com/github-samples/pets-workshop/tree/msbuild-25/content/prompts/add-feature-simple.md), that is simple, with some ambiguity that leaves some space for interpretation but it gets the job done. Another one which is more [verbose](https://github.com/github-samples/pets-workshop/tree/msbuild-25/content/prompts/add-feature-verbose.md) and leaves not a lot of space for interpretation. +> Take a look at the differences and see which one you like better. + +### Summary + +You've worked with GitHub Copilot to add new features to the website - the ability to filter the list of dogs. With the help of Copilot Edits, you updated multiple files across the project, and iteratively built the desired functionality. + +## Resources + +- [Asking GitHub Copilot questions in your IDE][copilot-ask] +- [Copilot Chat cookbook][copilot-cookbook] +- [Copilot Edits][copilot-edits] +- [Copilot Agent][copilot-agent] + +[copilot-ask]: https://docs.github.com/en/copilot/using-github-copilot/copilot-chat/asking-github-copilot-questions-in-your-ide +[copilot-cookbook]: https://docs.github.com/en/copilot/copilot-chat-cookbook +[copilot-edits]: https://code.visualstudio.com/docs/copilot/copilot-edits +[copilot-agent]: https://code.visualstudio.com/docs/copilot/chat/chat-agent-mode +[MCP-server]: https://code.visualstudio.com/docs/copilot/chat/mcp-servers +[Extensibility-VS-Code]: https://code.visualstudio.com/docs/copilot/copilot-extensibility-overview +[code-review]: https://docs.github.com/en/copilot/using-github-copilot/code-review/using-copilot-code-review?tool=webui +[copilot-extensions]: https://github.com/features/copilot/extensions +[asking-github-copilot-questions]: https://docs.github.com/en/enterprise-cloud@latest/copilot/using-github-copilot/copilot-chat/asking-github-copilot-questions-in-github diff --git a/content/ignite/b2-add-filter-bonus.md b/content/ignite/b2-add-filter-bonus.md new file mode 100644 index 0000000..97e8cde --- /dev/null +++ b/content/ignite/b2-add-filter-bonus.md @@ -0,0 +1,81 @@ +# Bonus content + +## Overview of Copilot Agent Mode + +With chat agent mode in Visual Studio Code, you can use natural language to define a high-level task and to start an agentic code editing session to accomplish that task. In agent mode, Copilot **autonomously** plans the work needed and determines the relevant files and context. It then makes edits to your codebase and invokes tools to accomplish the request you made. Agent mode monitors the outcome of edits and tools and iterates to resolve any issues that arise. + +> [!IMPORTANT] +> While Copilot autonomously determines the operations necessary to complete the requested task, as the developer you are always in charge. You will work with Copilot to ensure everything is completely correctly, reading and reviewing the code. You will also want to continue to follow proper DevOps practices, including code reviews, testing, security scans, etc. + +Why would you use agent mode instead of edit mode? + +- **Edit scope**: agent mode autonomously determines the relevant context and files to edit. In edit mode, you need to specify the context yourself. +- **Task complexity**: agent mode is better suited for complex tasks that require not only code edits but also the invocation of tools and terminal commands. +- **Duration**: agent mode involves multiple steps to process a request, so it might take longer to get a response. For example, to determine the relevant context and files to edit, determine the plan of action, and more. +- **Self-healing**: agent mode evaluates the outcome of the generated edits and might iterate multiple times to resolve intermediate issues. +- **Request quota**: in agent mode, depending on the complexity of the task, one prompt might result in many requests to the backend. + +### How it works + +![How agent mode works](./images/copilot-agent-mode-how-it-works.png) + +## Add themes to the Tailspin Shelter website + +In this section, you will use Copilot's agent mode to add themes to the Tailspin Shelter website. You will be able to select a theme and apply it to the website. + +1. [] Return to Visual Studio Code. +2. [] Close any tabs you may have open in your VS Code to ensure Copilot chat has an empty context. +3. [] Select the **+** icon towards the top of Copilot chat to begin a new chat. +4. [] Select agent mode, by selecting **Agent** (just like you did **Edit** before) in the model selector dropdown at the bottom of the chat window. +5. [] Select one of models (some may not be available) **Claude Sonnet 4.5**, **Claude Sonnet 4**, **GPT-5-Codex** or **GPT-5** +6. [] Open the `content/prompts/fun-add-themes.md` file +7. [] Copy the content of the prompt +8. [] Paste the content in the copilot prompt input +9. The agent mode will take it's time, since it searches by itself the relevant files to modify, and then does multiple passes including talking with himself to refine the task at hand +10. [] While Agent is doing it's thing, take the opportunity to examine the content of prompt that was used. +11. [] When the agent is done (you no longer see any spinners and the thumb up/down icons will be visible), examine the prompt response + open a browser to see the results + - Open the page at ++http://localhost:4321++ to see the updates! + - Examine the changes made to the files if you like + - Was it good? If you are not happy with the results, you can refine the prompt by crafting extra prompts in the chat to improve the end results. Don't start a new session, it's an interactive process. + +You _may_ have gotten something like this for the Terminal Theme (generated with **Claude 3.7**) + +![Tailspin Shelter Terminal Classic theme](images/tail-spin-shelter-terminal-theme.png) + +> [!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! + + +## Play a bit with Copilot + +You've made it to the end of the one hour workshop. Congratulations! You've explored the core skills to help you get the most out of GitHub Copilot. From here you can explore various challenges on your own, and see how GitHub Copilot can support you as you continue developing. + +The suggestions listed here are exactly that - suggestions. You're free to come up with your own scenarios or features you think the application should have. + +You'll also notice there aren't step-by-step instructions here. You've already seen how you can use Copilot to aid you in development. Part of the challenge put forth with these extra suggestions is to apply what you've learned to create code! + +## Potential next steps + +Here's some ideas of how you could continue to grow and build upon what you've done: + +- Return to the API endpoints you updated previously in Flask and add unit tests. + +> [!Knowledge] +> The **/tests** slash command can give you a little hand or you can also do it edit mode. + +- Add paging support to the full list of dogs or any results page with more than 5 results. +- Add a form to allow a user to apply to adopt a dog if the dog is available. +- Add a form to allow users to register a dog they found. + +We have provided you some prompts in [prompts][github-prompts-path] folder, which you can use directly as inspiration for your explorations. + +> [!TIP] +> These prompts are meant to be used as one shot, but if have prompts that can be are generic, reusable prompt are a great way to share prompts with the team members. They can be placed in a well know folder and be invoked directly in the Copilot Chat by referencing them. +> Learn more about [reusable prompts in Visual Studio Code][vscode-prompts] +> [!Knowledge] To use a prompt, select **Add Context..** in the chat and then select **Prompt** +> Learn more about [prompts in Visual Studio Code][vscode-prompts] + + +[vscode-prompts]: https://aka.ms/vscode-ghcp-prompt-snippets +[github-prompts-path]: https://github.com/github-samples/pets-workshop/tree/main/content/prompts/ \ No newline at end of file diff --git a/content/ignite/images/0-copilot-icon.png b/content/ignite/images/0-copilot-icon.png new file mode 100644 index 0000000..9ff3fa8 Binary files /dev/null and b/content/ignite/images/0-copilot-icon.png differ diff --git a/content/ignite/images/0-setup-configure.png b/content/ignite/images/0-setup-configure.png new file mode 100644 index 0000000..e6810be Binary files /dev/null and b/content/ignite/images/0-setup-configure.png differ diff --git a/content/ignite/images/0-setup-template.png b/content/ignite/images/0-setup-template.png new file mode 100644 index 0000000..98b6918 Binary files /dev/null and b/content/ignite/images/0-setup-template.png differ diff --git a/content/ignite/images/0-source-control-icon.png b/content/ignite/images/0-source-control-icon.png new file mode 100644 index 0000000..3729dfd Binary files /dev/null and b/content/ignite/images/0-source-control-icon.png differ diff --git a/content/ignite/images/1-doc-slash-command-suggestion.png b/content/ignite/images/1-doc-slash-command-suggestion.png new file mode 100644 index 0000000..bd7df4b Binary files /dev/null and b/content/ignite/images/1-doc-slash-command-suggestion.png differ diff --git a/content/ignite/images/4-changed-files-agent-mode.png b/content/ignite/images/4-changed-files-agent-mode.png new file mode 100644 index 0000000..6d80b98 Binary files /dev/null and b/content/ignite/images/4-changed-files-agent-mode.png differ diff --git a/content/ignite/images/5-always-allow-tool-execution.png b/content/ignite/images/5-always-allow-tool-execution.png new file mode 100644 index 0000000..83391aa Binary files /dev/null and b/content/ignite/images/5-always-allow-tool-execution.png differ diff --git a/content/ignite/images/5-mssql-extension.png b/content/ignite/images/5-mssql-extension.png new file mode 100644 index 0000000..3c4943f Binary files /dev/null and b/content/ignite/images/5-mssql-extension.png differ diff --git a/content/ignite/images/5-sql-tools-list.png b/content/ignite/images/5-sql-tools-list.png new file mode 100644 index 0000000..8b0ae0f Binary files /dev/null and b/content/ignite/images/5-sql-tools-list.png differ diff --git a/content/ignite/images/6-bicep-output.jpg b/content/ignite/images/6-bicep-output.jpg new file mode 100644 index 0000000..d7b184f Binary files /dev/null and b/content/ignite/images/6-bicep-output.jpg differ diff --git a/content/ignite/images/6-chat.jpg b/content/ignite/images/6-chat.jpg new file mode 100644 index 0000000..9553597 Binary files /dev/null and b/content/ignite/images/6-chat.jpg differ diff --git a/content/ignite/images/6-explain-bicep.jpg b/content/ignite/images/6-explain-bicep.jpg new file mode 100644 index 0000000..0d5e313 Binary files /dev/null and b/content/ignite/images/6-explain-bicep.jpg differ diff --git a/content/ignite/images/6-explain.jpg b/content/ignite/images/6-explain.jpg new file mode 100644 index 0000000..2f013ce Binary files /dev/null and b/content/ignite/images/6-explain.jpg differ diff --git a/content/ignite/images/6-output-bicep-simple.jpg b/content/ignite/images/6-output-bicep-simple.jpg new file mode 100644 index 0000000..af728bb Binary files /dev/null and b/content/ignite/images/6-output-bicep-simple.jpg differ diff --git a/content/ignite/images/6-output-tf-simple.jpg b/content/ignite/images/6-output-tf-simple.jpg new file mode 100644 index 0000000..1f0657c Binary files /dev/null and b/content/ignite/images/6-output-tf-simple.jpg differ diff --git a/content/ignite/images/6-reading-instruction-image.png b/content/ignite/images/6-reading-instruction-image.png new file mode 100644 index 0000000..68d238b Binary files /dev/null and b/content/ignite/images/6-reading-instruction-image.png differ diff --git a/content/ignite/images/6-tf-execution-failure.png b/content/ignite/images/6-tf-execution-failure.png new file mode 100644 index 0000000..3f1fd06 Binary files /dev/null and b/content/ignite/images/6-tf-execution-failure.png differ diff --git a/content/ignite/images/6-tfoutput-storage.jpg b/content/ignite/images/6-tfoutput-storage.jpg new file mode 100644 index 0000000..17f1bb3 Binary files /dev/null and b/content/ignite/images/6-tfoutput-storage.jpg differ diff --git a/content/ignite/images/agent-running-the-tests.png b/content/ignite/images/agent-running-the-tests.png new file mode 100644 index 0000000..0108058 Binary files /dev/null and b/content/ignite/images/agent-running-the-tests.png differ diff --git a/content/ignite/images/copilot-agent-mode-how-it-works.png b/content/ignite/images/copilot-agent-mode-how-it-works.png new file mode 100644 index 0000000..7992c7a Binary files /dev/null and b/content/ignite/images/copilot-agent-mode-how-it-works.png differ diff --git a/content/ignite/images/copilot-chat-references.png b/content/ignite/images/copilot-chat-references.png new file mode 100644 index 0000000..a96d877 Binary files /dev/null and b/content/ignite/images/copilot-chat-references.png differ diff --git a/content/ignite/images/copilot-edits-history.png b/content/ignite/images/copilot-edits-history.png new file mode 100644 index 0000000..fdc2b8c Binary files /dev/null and b/content/ignite/images/copilot-edits-history.png differ diff --git a/content/ignite/images/copilot-edits-keep-undo-file.png b/content/ignite/images/copilot-edits-keep-undo-file.png new file mode 100644 index 0000000..3f52bcc Binary files /dev/null and b/content/ignite/images/copilot-edits-keep-undo-file.png differ diff --git a/content/ignite/images/copilot-edits-keep-undo-global.png b/content/ignite/images/copilot-edits-keep-undo-global.png new file mode 100644 index 0000000..a722a28 Binary files /dev/null and b/content/ignite/images/copilot-edits-keep-undo-global.png differ diff --git a/content/ignite/images/copilot-todos-list.png b/content/ignite/images/copilot-todos-list.png new file mode 100644 index 0000000..f0c2c2b Binary files /dev/null and b/content/ignite/images/copilot-todos-list.png differ diff --git a/content/ignite/images/restore-snapshot.png b/content/ignite/images/restore-snapshot.png new file mode 100644 index 0000000..4810d2b Binary files /dev/null and b/content/ignite/images/restore-snapshot.png differ diff --git a/content/ignite/images/tail-spin-shelter-terminal-theme.png b/content/ignite/images/tail-spin-shelter-terminal-theme.png new file mode 100644 index 0000000..dc7e5ff Binary files /dev/null and b/content/ignite/images/tail-spin-shelter-terminal-theme.png differ diff --git a/content/ignite/review.md b/content/ignite/review.md new file mode 100644 index 0000000..f6b0273 --- /dev/null +++ b/content/ignite/review.md @@ -0,0 +1,34 @@ +# Lab review + +Over the course of the lab you explored the core functionality of GitHub Copilot. You saw how to use code completion to get inline suggestions, chat participants to explore your project, Copilot instructions to add context, and Copilot Agent to make updates autonomously. You also worked with SQL Server using the GitHub Copilot for MSSQL extension to query databases using natural language, and explored how Copilot can interact with Azure resources and help you create infrastructure as code. + +But there is a lot more in GitHub Copilot (just to name a few): + +- [Copilot Edits][copilot-edits] - Multi-file editing with a working set +- [Slash commands][slash-commands] - Shortcuts for common tasks +- [MCP Servers support][MCP-server] +- [Extend Copilot][Extensibility-VS-Code] +- [Test with AI][test-with-ai] +- [Debug with AI][debug-with-ai] +- Copilot features available in GitHub + - [Copilot coding agent][gh-coding-agent] + - [GitHub Copilot code review][code-review] + - [Extensions][copilot-extensions] + - [Answers about issues, PRs, discussions, files, commits, etc][asking-github-copilot-questions] +- [Awesome Copilot][awesome-copilot] - Curated list of resources and best practices. Has example of [instructions](https://github.com/github/awesome-copilot/tree/main/instructions), [prompts](https://github.com/github/awesome-copilot/tree/main/prompts), and more +- [GitHub Copilot Chat Cookbook][copilot-cookbook] Examples of prompts to use with GitHub Copilot Chat. + +There is no one right way to use GitHub Copilot. Continue to explore and try different prompts to discover what works best for your workflow and how GitHub Copilot can aid your productivity. + +[asking-github-copilot-questions]: https://docs.github.com/en/enterprise-cloud@latest/copilot/using-github-copilot/copilot-chat/asking-github-copilot-questions-in-github +[awesome-copilot]: https://github.com/github/awesome-copilot +[code-review]: https://docs.github.com/en/copilot/using-github-copilot/code-review/using-copilot-code-review?tool=webui +[copilot-edits]: https://code.visualstudio.com/docs/copilot/copilot-edits +[copilot-extensions]: https://github.com/features/copilot/extensions +[debug-with-ai]: https://code.visualstudio.com/docs/copilot/guides/debug-with-copilot +[Extensibility-VS-Code]: https://code.visualstudio.com/docs/copilot/copilot-extensibility-overview +[gh-coding-agent]: https://docs.github.com/en/copilot/concepts/agents/coding-agent/about-coding-agent +[MCP-server]: https://code.visualstudio.com/docs/copilot/chat/mcp-servers +[slash-commands]: https://code.visualstudio.com/docs/copilot/copilot-chat#_slash-commands +[test-with-ai]: https://code.visualstudio.com/docs/copilot/guides/test-with-copilot +[copilot-cookbook]: https://docs.github.com/copilot/tutorials/copilot-chat-cookbook \ No newline at end of file diff --git a/content/ignite/running-the-lab.md b/content/ignite/running-the-lab.md new file mode 100644 index 0000000..b29315f --- /dev/null +++ b/content/ignite/running-the-lab.md @@ -0,0 +1,121 @@ +# Running the Lab Outside the Ignite Virtual Machine Environment + +Thank you for your interest in revisiting this GitHub Copilot workshop! Whether you attended Microsoft Ignite and want to practice what you learned, or someone who attended shared this lab with you, this guide will help you set up and run the workshop on your own machine. + +During the Ignite conference, the lab was delivered in a pre-configured virtual machine environment with all the necessary tools, credentials, and Azure resources already set up for you. To repeat this lab on your own machine, you'll need to set up your local development environment and meet certain prerequisites. + +This guide explains everything you need to know to recreate the workshop experience outside of the provided Microsoft Ignite virtual machine environment during the lab execution. + +## Prerequisites + +### General Prerequisites (All Modules) + +- **GitHub Copilot** subscription (free, individual, business, or enterprise) +- **Visual Studio Code** (latest version recommended) +- **GitHub Copilot extensions** for VS Code: + - GitHub Copilot + - GitHub Copilot Chat +- **Git** installed on your machine +- **Node.js** (v18 or later) +- **Python** (v3.8 or later) +- **PowerShell** (for Windows) or **Bash** (for Linux/Mac) + +### Module-Specific Prerequisites + +#### Module 3: Modernizing Your Backend +- Python package manager (**pip**) +- Virtual environment support (**venv**) + +#### Module 4: Interacting with Azure +- **[GitHub Copilot for Azure][gh-copilot-for-azure]** extension for VS Code +- Azure account with an active subscription +- Azure CLI (optional, but recommended) + +#### Module 5: Working with SQL Server +- **[GitHub Copilot for MSSQL][mssql-extension]** (or any SQL Server edition) +- **GitHub Copilot for MSSQL** extension for VS Code +- SQL Server running locally (Docker or native installation) or accessible remotely + +#### Module 6: Infrastructure as Code +- **Terraform** (for Terraform path) + - [HashiCorp Terraform extension for VS Code](https://marketplace.visualstudio.com/items?itemName=HashiCorp.terraform) (nice to have) +- **Bicep** (for Bicep path) + - [Bicep extension for VS Code](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-bicep) (nice to have) +- Azure account with permissions to deploy resources +- Terraform CLI (for Terraform path) or Bicep CLI (for Bicep path) is a nice to have. During the lab they were missing intentionally + +## Getting Started + +### 1. Clone the Repository + +Clone the workshop repository from the `msignite-25` branch: + +```bash +git clone -b msignite-25 https://github.com/github-samples/pets-workshop.git +cd pets-workshop +``` + +Login into Copilot in VS Code if you haven't already. + +### 2. Follow the Instructions + +Navigate to the **content/ignite** folder to find the workshop modules. + +### 3. Complete Modules in Order + +The modules are numbered and should be completed sequentially: + +1. **[Module 1: Add Endpoint](./1-add-endpoint.md)** - Learn code completion with GitHub Copilot +2. **[Module 2: Explore Project](./2-explore-project.md)** - Use chat participants and context to understand your codebase +3. **[Module 3: Modernizing Your Backend](./3-cloudify-backend.md)** - Use Agent mode and Copilot instructions to add database support +4. **[Module 4: Interacting with Azure](./4-interating-with-azure-using-natural-language.md)** - Query Azure resources using natural language +5. **[Module 5: Working with SQL Server](./5-working-with-sqlserver.md)** - Generate and execute SQL queries with natural language +6. **[Module 6: Infrastructure as Code](./6-infra-as-code.md)** - Create Terraform or Bicep templates with Copilot + +#### Bonus Modules (Optional) + +If you want to explore other scenarios: + +- **[Bonus 1: Add Filter Feature](./b1-add-feature-bonus.md)** - Use Copilot Edits mode to implement multi-file updates for filtering dogs by breed and availability +- **[Bonus 2: Add Themes](./b2-add-filter-bonus.md)** - Use Agent mode to add theme support to the website + +### 4. Setup the Application + +Before starting the modules, set up and start the application: + +#### For Windows (PowerShell): +```powershell +.\scripts\start-app.ps1 +``` + +#### For Linux/Mac (Bash): +```bash +./scripts/start-app.sh +``` + +The startup script will: +- Install all necessary dependencies +- Start the Flask backend on **http://localhost:5100** +- Start the Astro/Svelte frontend on **http://localhost:4321** + +### 5. Verify Installation + +Test that everything is working: +- Backend API: http://localhost:5100/api/dogs +- Frontend app: http://localhost:4321 + +## Additional Notes + +- Some modules (like Module 4 and Module 6) require Azure resources. You may need to provision these separately or skip those sections if you don't have Azure access. +- For Module 5, ensure SQL Server is properly configured and accessible before starting, you will be also missing the pre configured database so you will need to pre seeded as explained in the module. +- The workshop is designed to be flexible - you can choose which modules to complete based on your interests and available resources. + +## Resources + +- [GitHub Copilot Documentation](https://docs.github.com/en/copilot) +- [Workshop Repository](https://github.com/github-samples/pets-workshop) +- Module-specific resources are listed at the end of each module + + +[mssql-extension]: https://marketplace.visualstudio.com/items?itemName=ms-mssql.mssql +[gh-copilot-for-azure]: https://marketplace.visualstudio.com/items? \ No newline at end of file