diff --git a/.github/workflows/deploy-mkdocs.yml b/.github/workflows/deploy-mkdocs.yml index 7061d63..d3ba05a 100644 --- a/.github/workflows/deploy-mkdocs.yml +++ b/.github/workflows/deploy-mkdocs.yml @@ -9,8 +9,8 @@ jobs: deploy: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 - - uses: actions/setup-python@v4 + - uses: actions/checkout@v4 + - uses: actions/setup-python@v5 with: python-version: 3.x - run: pip install mkdocs-material diff --git a/CHANGELOG.md b/CHANGELOG.md index 9824752..5d54a00 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,13 +1,5 @@ -## [project-title] Changelog +# Changelog - -# x.y.z (yyyy-mm-dd) +This repository is maintained as workshop content rather than a versioned package. Use pull request descriptions and commit history to understand changes. -*Features* -* ... - -*Bug Fixes* -* ... - -*Breaking Changes* -* ... +For notable workshop refreshes, add dated entries here with a short summary of updated labs, documentation, or tooling. diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index a9115cf..219b846 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,4 +1,4 @@ -# Contributing to [project-title] +# Contributing to GitHub Copilot Hands-on Labs This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us @@ -51,15 +51,15 @@ chances of your issue being dealt with quickly: * **Suggest a Fix** - if you can't fix the bug yourself, perhaps you can point to what might be causing the problem (line of code or commit) -You can file new issues by providing the above information at the corresponding repository's issues link: https://github.com/[organization-name]/[repository-name]/issues/new]. +You can file new issues by providing the above information at the repository's issues page: https://github.com/Azure-Samples/github-copilot-hands-on/issues/new. ### Submitting a Pull Request (PR) Before you submit your Pull Request (PR) consider the following guidelines: -* Search the repository (https://github.com/[organization-name]/[repository-name]/pulls) for an open or closed PR +* Search the repository (https://github.com/Azure-Samples/github-copilot-hands-on/pulls) for an open or closed PR that relates to your submission. You don't want to duplicate effort. -* Make your changes in a new git fork: +* Make your changes in your fork: * Commit your changes using a descriptive commit message * Push your fork to GitHub: diff --git a/README.md b/README.md index 3ce69bc..d43876b 100644 --- a/README.md +++ b/README.md @@ -1,96 +1,79 @@ # GitHub Copilot Hands-on Labs -Welcome to the GitHub Copilot Hands-on Labs repository. This repository provides a collaborative environment for experimenting with GitHub Copilot across various languages and frameworks through hands-on demos. +This repository contains a GitHub Copilot workshop created by Microsoft Germany Cloud Solution Architects. It helps customers get hands-on experience with Copilot across everyday coding, test generation, API clients, agentic workflows, and Model Context Protocol (MCP) scenarios. -## Purpose +## What is in this repo? -This repository is designed to: +| Path | Purpose | +| --- | --- | +| `docs/` | Published MkDocs workshop content. Start here when delivering or previewing the workshop. | +| `labs/` | Starter code, sample projects, and supporting lab instructions. | +| `mkdocs.yml` | MkDocs Material site configuration and navigation. | +| `.github/workflows/deploy-mkdocs.yml` | GitHub Pages deployment workflow for the docs site. | -- Provide a practical learning environment to explore GitHub Copilot. -- Showcase demos that span different programming languages, deployment scenarios, and integrations. -- Serve as a community-driven resource where developers can contribute their own demos and enhancements. +## Workshop content -## What's Included +The workshop is designed to be flexible. Trainers can run a short introduction with one or two fundamentals labs, or a longer session that includes agentic and MCP scenarios. -- [GitHub Copilot Hackathon](#github-copilot-hands-on) - - [Pre-requisites](#pre-requisites) -- [Labs](#labs) - - [Python](#python) - - [Java](#java) - - [JavaScript & HTML](#html) - - ... +| Area | Labs | +| --- | --- | +| Fundamentals | HTML Image Gallery, Rock Paper Scissors | +| API clients | Star Wars API in Python, Star Wars API in Java | +| Agentic workflows and MCP | HTML Image Gallery with MCP, Build Your Own MCP Server, Four in a Row MCP Game | +| Extended resources | External labs linked from the "Other Labs" page | -## Getting Started +## Prerequisites -- x +Participants need: -## Pre-requisites +- A GitHub account with GitHub Copilot access. +- [Visual Studio Code](https://code.visualstudio.com/) with the GitHub Copilot extension enabled. +- Git installed locally, or access to GitHub Codespaces. +- Runtime dependencies for the selected lab, for example Python, Java and Maven, Node.js, Docker, or .NET. -**GitHub Copilot access** +Some MCP labs also require a GitHub personal access token and explicit tool approval in Copilot Chat. -Users should hve access to copilot licenses. If you still do not have an active Copilot license, request your copilot admin to assign you a copilot seat. +## Preview the workshop locally +Install MkDocs Material and start the local preview server: -### IDE Extensions - -Install the Copilot Extension for you IDE: - -- [Visual Studio Code Copilot Extension](https://docs.github.com/en/copilot/using-github-copilot/getting-code-suggestions-in-your-ide-with-github-copilot?tool=vscode) -- [Visual Studio 2022 Copilot Extension](https://learn.microsoft.com/en-us/visualstudio/ide/visual-studio-github-copilot-extension?view=vs-2022) -- [Visual Studio 2022 Copilot Chat Extension](https://learn.microsoft.com/en-us/visualstudio/ide/visual-studio-github-copilot-chat?view=vs-2022) -- [JetBrains Copilot Extension](https://docs.github.com/en/copilot/using-github-copilot/getting-code-suggestions-in-your-ide-with-github-copilot?tool=jetbrains) - -### Work locally - -**VisualStudio Code** - -https://code.visualstudio.com/ - -**Install Docker (Optional)** - -https://docs.docker.com/engine/install/ - -**For Nodejs** - -- [Install Node and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) -- Install mocha: - -Run: - -``` bash - npm install --global mocha - npm install axios +```bash +python -m pip install mkdocs-material +mkdocs serve ``` -**For .NET** +Then open the local URL printed by MkDocs. Before publishing documentation changes, run: -[Install .Net](https://dotnet.microsoft.com/download) - -**For Java** +```bash +mkdocs build --strict +``` -- [Install Java](https://learn.microsoft.com/en-us/java/openjdk/install) -- [Install Maven](https://maven.apache.org/install.html) +## Working from a fork -**For Python** -- [Install Python](https://www.python.org/downloads/) +Use your fork for changes and target the Azure-Samples repository when opening a pull request. -**For C++** -- [Install cmake](https://cmake.org/download/) +```bash +git remote add upstream https://github.com/Azure-Samples/github-copilot-hands-on.git +git fetch upstream +git checkout -b upstream/main +# make changes +git push origin +``` -### Quickstart -(Add steps to get up and running quickly) +Open the pull request with: -1. git clone [repository clone url] -2. cd [repository name] -3. ... +- **Base repository**: `Azure-Samples/github-copilot-hands-on` +- **Base branch**: `main` +- **Head repository**: your fork +- **Compare branch**: your feature branch -## Resources +## Keeping the workshop current -(Any additional resources or related projects) +GitHub Copilot changes quickly. Keep volatile topics link-first: explain how to choose a model, mode, or tool at a high level, then link to the official documentation for the latest details. -- Link to supporting information -- Link to similar sample -- ... ---- +Useful references: -Happy coding and exploring GitHub Copilot! \ No newline at end of file +- [GitHub Copilot documentation](https://docs.github.com/en/copilot) +- [AI model comparison for GitHub Copilot](https://docs.github.com/en/copilot/reference/ai-models/model-comparison) +- [GitHub Changelog](https://github.blog/changelog/) +- [VS Code AI documentation](https://code.visualstudio.com/docs/ai/overview) \ No newline at end of file diff --git a/docs/assets/images/customer-stories/add_tools.png b/docs/assets/images/customer-stories/add_tools.png new file mode 100644 index 0000000..ce5941a Binary files /dev/null and b/docs/assets/images/customer-stories/add_tools.png differ diff --git a/docs/assets/images/customer-stories/agent_finished_poc_1.png b/docs/assets/images/customer-stories/agent_finished_poc_1.png new file mode 100644 index 0000000..19f59ae Binary files /dev/null and b/docs/assets/images/customer-stories/agent_finished_poc_1.png differ diff --git a/docs/assets/images/customer-stories/configure_tools.png b/docs/assets/images/customer-stories/configure_tools.png new file mode 100644 index 0000000..2a3ec51 Binary files /dev/null and b/docs/assets/images/customer-stories/configure_tools.png differ diff --git a/docs/assets/images/customer-stories/custom_agent.png b/docs/assets/images/customer-stories/custom_agent.png new file mode 100644 index 0000000..234145d Binary files /dev/null and b/docs/assets/images/customer-stories/custom_agent.png differ diff --git a/docs/assets/images/customer-stories/custom_instruction.png b/docs/assets/images/customer-stories/custom_instruction.png new file mode 100644 index 0000000..c6038c2 Binary files /dev/null and b/docs/assets/images/customer-stories/custom_instruction.png differ diff --git a/docs/assets/images/customer-stories/implementation_window.png b/docs/assets/images/customer-stories/implementation_window.png new file mode 100644 index 0000000..cd7f735 Binary files /dev/null and b/docs/assets/images/customer-stories/implementation_window.png differ diff --git a/docs/assets/images/customer-stories/session_stickiness.png b/docs/assets/images/customer-stories/session_stickiness.png new file mode 100644 index 0000000..b076dd9 Binary files /dev/null and b/docs/assets/images/customer-stories/session_stickiness.png differ diff --git a/docs/assets/images/mcp-fiar/octo_vs_duke.png b/docs/assets/images/mcp-fiar/octo_vs_duke.png new file mode 100644 index 0000000..16dd041 Binary files /dev/null and b/docs/assets/images/mcp-fiar/octo_vs_duke.png differ diff --git a/docs/customer-stories/customer-story-1.md b/docs/customer-stories/customer-story-1.md new file mode 100644 index 0000000..8a97f13 --- /dev/null +++ b/docs/customer-stories/customer-story-1.md @@ -0,0 +1,421 @@ +# Spring Boot Session Management Customer Case + +This customer case showcases how we leveraged GitHub Copilot end-to-end to solve session management challenges in a monolithic Spring Boot application. We demonstrate how GitHub Copilot can accelerate development of prototypes from concept to deployment. + +## Lab Overview + +**Duration**: 2-3 hours +**Difficulty**: Advanced +**Prerequisites**: + +- Java LTS 21 knowledge +- Spring Boot 3.x experience +- Docker fundamentals +- Azure Container Apps understanding +- Maven build tool familiarity + +## Customer Challenge + +The customer wanted to understand how to achieve session management within their monolithic application without refactoring their entire codebase to a microservices architecture. + +### Key Requirements + +- Monolithic Spring Boot application built on Java LTS 21 +- Session management across multiple instances +- Horizontal scaling capabilities +- Minimal codebase refactoring + +### Business Goals + +The customer needed to: + +- Horizontally scale their applications across multiple instances while maintaining session state +- Explore different approaches to session management +- Compare solutions with minimal architectural changes + +## Solution Approach + +We built two different prototypes to showcase different approaches for solving the session management challenges. Both solutions leverage Azure Container Apps as the hosting platform. + +### Prototype 1: Session Affinity +**Building a Spring Boot application with neither sticky sessions nor externalized session management**. This prototype showcases the challenges faced when scaling a monolithic application without proper session management. + +### Prototype 2: Sticky Sessions +**Using Azure Container Apps with sticky sessions enabled** + +- [Azure Container Apps Sticky Sessions Documentation](https://learn.microsoft.com/en-us/azure/container-apps/sticky-sessions?pivots=azure-portal) + +### Prototype 3: Externalized Session Management +**Using Spring Session with Redis to externalize session management** + +- [Spring Session with Redis Documentation](https://learn.microsoft.com/en-us/azure/developer/java/spring-framework/configure-spring-boot-initializer-java-app-with-redis-cache?tabs=entraid&pivots=azure-managed-redis) + +## Getting Started + +### Step 1: Create a Custom Agent + +Before starting implementation, it's recommended to create a custom agent specific to your needs. In GitHub Copilot and VS Code, this can be done with chat modes and custom instructions. + +!!! info "Custom Agent Setup" + Learn more about creating custom agents: [VS Code Custom Agents Documentation](https://code.visualstudio.com/docs/copilot/customization/custom-agents#_create-a-custom-agent) + +![Custom Agent Setup](../assets/images/customer-stories/custom_agent.png) + +#### Custom Instructions + +Use the following custom instructions for your agent tailored to Spring Boot development: + +??? abstract "Spring Boot Java Implementer - Custom Instructions" + ```markdown + --- + description: 'Expert Java Spring Boot developer specializing in enterprise applications with Java LTS 21 and Maven' + tools: [] + --- + + # Spring Boot Java Implementer + + This custom agent specializes in developing and maintaining Spring Boot applications using Java LTS 21 and Maven. It focuses on implementing enterprise-grade solutions following Spring Framework best practices. + + ## When to Use This Agent + + - Building or extending Spring Boot applications + - Implementing RESTful APIs and web services + - Configuring Spring Security, Data, or other Spring modules + - Setting up Maven build configurations and dependency management + - Developing session management solutions (in-memory, Redis, database-backed) + - Implementing service layers, repositories, and controllers + - Writing unit and integration tests with JUnit 5 and Spring Test + - Troubleshooting Spring Boot application issues + + ## Technical Scope + + **Primary Technologies:** + - Java LTS 21 (Long-Term Support version) + - Spring Boot 3.x + - Maven for build and dependency management + - Spring Framework ecosystem (Spring Data, Spring Security, Spring Session, etc.) + - Docker for containerization + - Azure Container Apps for deployment and hosting + + **Core Capabilities:** + - Generate idiomatic Java code following modern Java 21 features (records, pattern matching, sealed classes) + - Configure Spring Boot applications using application.properties or application.yml + - Implement dependency injection and IoC container patterns + - Set up Maven POMs with appropriate dependencies and plugins + - Create optimized Dockerfiles for Spring Boot applications + - Configure applications for Azure Container Apps environment + - Implement health checks and readiness probes for container orchestration + - Follow Spring Boot conventions and best practices + - Write comprehensive tests using Spring Boot Test framework + + ## Boundaries + + This agent will NOT: + - Implement solutions using outdated Java versions (< Java 21 LTS) + - Use Gradle instead of Maven (unless explicitly requested to migrate) + - Implement non-Spring frameworks without clear justification + - Make breaking changes without explanation + - Handle Azure infrastructure provisioning (focuses on application code and containerization) + + ## Ideal Inputs + + - Feature requirements with specific Spring Boot modules needed + - API specifications or endpoint descriptions + - Database schema or data model requirements + - Configuration requirements (security, caching, session management, etc.) + - Existing codebase context for modifications + + ## Expected Outputs + + - Clean, well-structured Java code following Spring Boot conventions + - Properly configured Maven `pom.xml` with necessary dependencies + - Spring configuration files (application.properties/yml) + - Controller, Service, and Repository layer implementations + - Dockerfiles optimized for Spring Boot applications + - Container configuration for Azure Container Apps + - Health check and readiness probe implementations + - Unit and integration tests + - Documentation comments and implementation notes + + ## Progress Reporting + + The agent will: + - Confirm understanding of requirements before implementation + - Explain architectural decisions and Spring module choices + - Highlight any potential issues or trade-offs + - Request clarification when requirements are ambiguous + - Provide context about Spring Boot configuration choices + - Alert when additional dependencies or configuration is needed + ``` + +!!! tip "Copilot Tip" + Read these custom instructions carefully before starting implementation. These instructions were generated with a reasoning model based on the initial project description. You can further customize them to your needs. + +### Step 2: Add MCP Servers + +Right now our agent is limited to the model's knowledge. We need additional function calling capabilities (e.g., interacting with Azure CLI or external tools). + +We'll add MCP servers to our custom agent. You can leverage either: + +- The internal marketplace of VS Code: [MCP Servers Documentation](https://code.visualstudio.com/docs/copilot/customization/mcp-servers) +- The GitHub MCP Registry with one-click integration: [GitHub MCP](https://github.com/mcp) + +#### Recommended MCP Servers + +- **Azure MCP**: Provides knowledge about Azure services and can interact with Azure CLI to provision resources or fetch configurations: [Azure MCP](https://github.com/mcp/com.microsoft/azure) + +- **Context7**: Pulls up-to-date, version-specific documentation and code examples straight from the source: [Context7 MCP](https://github.com/mcp/io.github.upstash/context7) + +- **Microsoft Learn MCP**: Provides access to Microsoft Learn documentation and tutorials: [Microsoft Learn MCP](https://github.com/mcp/microsoftdocs/mcp) + +After adding the MCP servers to VS Code, enable them in your custom agent by adding them to the `tools` section: + +![Add Tools to your agent](../assets/images/customer-stories/add_tools.png) + +!!! warning "Important" + Be sure to enable the built-in tools completely as well to leverage the full power of GitHub Copilot. + +#### Adjusting the Prompt to Leverage MCP Servers + +Add this note to the beginning of your custom agent prompt: + +```markdown +Before starting the implementation, please leverage the available MCP servers to gather the latest information and best practices regarding Spring Boot, Java LTS 21, Maven, Docker, and Azure Container Apps. Use the knowledge from these MCP servers to inform your implementation decisions and ensure that the solution is up-to-date with current standards and practices. +``` + +## Implementation + +With the custom agent and MCP servers in place, we can now start implementing our prototypes. + +### Prototype 1: No Session Management + +#### Initial Setup + +In the first prototype, we'll build a simple Spring Boot application without any session management. This demonstrates the challenges when scaling a monolithic application without proper session management. + +**Objectives:** +- Show that when scaling to multiple instances, session state is lost +- Demonstrate users getting logged out or losing session data +- Establish the baseline problem + +!!! tip "Copilot Tip" + Start a new chat with your custom agent. **Ensure you've selected your custom agent from the dropdown in the chat window.** + +Use the following prompt to build the first prototype: + +!!! abstract "" + ``` + We want to build a simple Spring Boot application that does not implement any session management at all. The application should have the following features: + - A login endpoint that accepts username and password and creates a session + - A protected endpoint that returns user-specific data only if the user is logged in + - A logout endpoint that invalidates the session + - Use in-memory session management (default behavior of Spring Boot) + + Please generate the complete codebase including: + - Maven `pom.xml` + - Application configuration + - Controllers, services, and any other necessary components + - A Dockerfile to containerize the application for deployment to Azure Container Apps + - A simple UI using Thymeleaf to demonstrate login, protected content access, and logout functionality + + Store the app in folder `prototype-1-no-session-management` + Use Java LTS 21 and Spring Boot 3.x + ``` + +The build process will take a moment. Once completed, you should have a complete codebase for the first prototype in the `prototype-1-no-session-management` folder. + +Check the chat window to see what has been built: + +![agent_finished_poc_1](../assets/images/customer-stories/agent_finished_poc_1.png) + +You should start the prototype to verify that everything is working as expected. If you have problems to start the prototype then ask the agent for help to troubleshoot the issues! + +### Deploying to Azure Container Apps and testing session loss + +Once the application is working locally we can proceed to containerize it and deploy it to Azure Container Apps. +We will leverage the agent to help us here with the deployment. + +Let's see if it will interact appropriately with the Azure MCP server to provision the necessary resources and deploy the application with a replica count of 2 and NO session stickiness enabled. + +Use the following prompt in the chat window of your custom agent: + +!!! abstract "" + ``` + We have a Spring Boot application in the folder `prototype-1-no-session-management` that we want to deploy to Azure Container Apps and use the built in docker builder of Azure Container Apps. Please help us with the following tasks: + - Provision the necessary Azure resources including a Resource Group and Azure Container App Environment. + - We like to leverage the built in source with dockerfile deployment of azure container apps + - Deploy the Container App with a replica count of 2 and NO session stickiness enabled. + - Explain to us how we can test the application to verify that session loss occurs when scaling across multiple instances. + ``` + +The result should be a complete deployment script that provisions the resources, builds and pushes the Docker image, and deploys the Container App with the specified configuration that helps you show session loss. + +Leverage the agent again if you have problems to get the deployment working. In my case I had a `deploy.sh` script generated that I could run directly from the terminal to deploy the application. + +```bash +# Navigate to the project directory +cd prototype-1-no-session-management +# Make deployment script executable (if not already) +chmod +x deploy.sh +# Run the deployment +./deploy.sh +``` + +Let's be realistic: There might be errors during deployment. If that is the case leverage the agent to help you troubleshoot the issues. We suggest to nudge the agent with the error messages you get during deployment to get help on how to fix them. + +One of the issues that might occur: + +- The agent might try to use docker to build and push the image. **Remember: Docker is NOT required for this deployment method!** You can simply use `az containerapp up` with source code or JAR file and it will leverage buildpacks to build the container image for you automatically without any Docker files or manual Docker builds! Tell the agent to use that method instead. + +- Java 21 support: Make sure that the agent is aware that we want to use Java LTS 21. The buildpacks need to know that as well. You can pass the build environment variable `BP_JVM_VERSION=21` to `az containerapp up` to make sure the right Java version is used. Or ask it to look this info up from the Azure MCP server and/or MS Docs. + +- When testing the app you cannot login. The CSRF protection might an issue here. Ask the agent to analyze the problem + +**The goal should be ONE deploy.sh file that is doing the infrastructure provisioning and deployment of the Container App and an URL that you can visit in your browser!** + +You will see that when you access the application URL that in most cases you are not able to login. To prove that session loss is the problem **you should scale the container app down to 1 replica and try to login again. This time it should work!** + +Leverage the agent to scale it down to 1 replica: + +!!! abstract "" + ``` + Please help us to scale down the Container App to 1 replica! + ``` + +Once you have verified that scaling down to 1 replica makes the login work you have proven that session loss is the problem when scaling to multiple instances without session management. + +### Enabling Session Affinity to solve the problem + +To solve the session loss problem we can enable session affinity (sticky sessions) in Azure Container Apps. This will ensure that requests from the same user are always routed to the same instance, preserving session state. + +First of all ask the agent to help you enable sticky sessions for the Container App: + +!!! abstract "" + ``` + Please help us to enable sticky sessions for the Container App to solve the session loss problem! + Create a deployment script `enable_sticky_sessions.sh` that we can run from the terminal to enable sticky sessions. + ``` + +Afterwards ask the agent to give you the link to the portal so that you can verify that sticky sessions are enabled: + +!!! abstract "" + ``` + Please provide us with the direct link to the Azure Portal page of the Container App so that we can verify that sticky sessions are enabled! + ``` + +Here you can see the sticky sessions enabled in the portal: + +![sticky_sessions_enabled](../assets/images/customer-stories/session_stickiness.png) + +## Prototype 2: Externalized Session Management with Azure Managed Redis + +In the second prototype we will build a Spring Boot application that uses externalized session management with Azure Managed Redis. This will help us showcase how to properly manage sessions in a scalable way across multiple instances and not using sticky sessions. + +We will leverage our custom agent to help us with the implementation. Start a **new chat** with your custom agent and provide the following input to it. **Be sure to have selected your custom agent from the dropdown in the chat window.** + +### Implementation + +!!! abstract "" + ``` + We want to build a simple Spring Boot application that uses externalized session management with Azure Managed Redis. Please copy our existing prototype from `prototype-1-no-session-management` and modify it to use Spring Session with Redis for session management. The application should have the same features as before - including the infra folder with a bicep script: + - A login endpoint that accepts username and password and creates a session + - A protected endpoint that returns user-specific data only if the user is logged in + - A logout endpoint that invalidates the session + - Use Azure Managed Redis for session storage + Please generate the complete codebase including the Maven `pom.xml`, application configuration, controllers, services, and any other necessary components. Also, provide a Dockerfile to containerize the application for deployment to Azure Container Apps. + - Build a simple UI using Thymeleaf to demonstrate login, protected content access, and logout functionality. + - Store that app in folder `prototype-2-redis-session-management` + - Use Java LTS 21 and Spring Boot 3.x + - Keep as much as possible from the existing codebase + ``` + +The agent will take its time to build the new codebase. Once it is done you should have a complete codebase for the second prototype in the folder `prototype-2-redis-session-management`. + +**Let the agent deploy the solution to Azure Container Apps with a prompt!** + +There still might be some issues during deployment. If that is the case leverage the agent to help you troubleshoot the issues. We suggest to nudge the agent with the error messages you get during deployment to get help on how to fix them. + +One of the issues that might occur: + +- The agent might try to create an ACR in the bicep script. This is NOT required for this deployment method! You can simply use `az containerapp up` with JAR and dockerfile and it will leverage buildpacks to build the container image for you automatically. Furthermore the `az containerapp up` command will automatically create a temporary ACR for you behind the scenes. Tell the agent to remove the ACR creation from the bicep script! + +- Check if you have multiple replicas enabled for the Container App. This is required to prove that session management is working across multiple instances. + +- Disable session stickiness for the Container App to prove that session management is working without sticky sessions. + +- Always tell the agent to make the adjustments in your `deploy.sh` script so that you have ONE script that does everything for you! + +### Verifying session management with Redis + +Once the application is deployed you can access the application URL in your browser. You should be able to login successfully even with multiple replicas and no sticky sessions enabled. This proves that externalized session management with Azure Managed Redis is working as expected. Ask the agent to get the portal url and check if multiple instances are there, session stickiness is disabled and Redis is connected properly. + +# Creating a summary of the prototype demo flow + +## Instructions to showcase the prototypes + +Let the agent build a small readme for you that helps you showcase both prototypes to your customers. Use the following prompt in a new chat window of your custom agent: + +!!! abstract "" + ``` + Please help us to build a small readme that helps us to showcase both prototypes to our customers. The readme should include instructions on how to deploy and test both prototypes, highlighting the differences between session affinity and externalized session management with Redis. + + - It is also important to have a small table that summarizes the key differences between both approaches including pros and cons. + + - It should have a nice step-by-step structure with clear instructions. + + - Save this readme in the root folder of the repository as `CUSTOMER_README.md`. + ``` + +You should have a lovely readme in the root folder of your repository now that you can share with your customers to showcase both prototypes and the differences between session affinity and externalized session management with Redis. + +# Clean up + +## Of Resources + +Remember to clean up the Azure resources you have created to avoid unnecessary costs. You can do this by deleting the resource group that contains all the resources for the prototypes. + +Let the agent help you with a prompt: + +!!! abstract "" + ``` + Please help us to build a deployment script `cleanup.sh` that deletes all the resource groups containing all the resources for the prototypes within this repository to avoid unnecessary costs. + ``` + +Another solution would be to tell the agent to leverage Azure MCP server to interact with Azure CLI to delete the resources directly from the chat window. + +!!! abstract "" + ``` + Please leverage the Azure MCP server to delete all resource groups that were created for the prototypes to avoid unnecessary costs. + ``` + +## Code Repository + +The complete code for all three prototypes is available in this repository: + +**[GitHub Repository: ghcp_session_stickiness_customer_case](https://github.com/jeffreygroneberg/ghcp_session_stickiness_customer_case)** + +## Conclusion + +This customer case demonstrates how GitHub Copilot can: + +- Accelerate prototype development +- Generate production-ready code following best practices +- Provide multiple solution approaches for comparison +- Integrate with cloud platforms like Azure +- Help teams make informed architectural decisions + +### Key Takeaways + +1. **No Session Management**: Simplest but fails under horizontal scaling +2. **Sticky Sessions**: Quick fix with limitations (instance failures cause session loss) +3. **Externalized Sessions**: Most robust solution for distributed applications + +### Next Steps + +- Compare performance metrics across all three prototypes +- Evaluate operational complexity and costs +- Choose the solution that best fits your requirements +- Plan migration strategy for production implementation + +!!! success "Workshop Complete" + You've successfully explored three different approaches to session management in Spring Boot applications using GitHub Copilot! diff --git a/docs/customer-stories/customer-story-2.md b/docs/customer-stories/customer-story-2.md new file mode 100644 index 0000000..9234e7b --- /dev/null +++ b/docs/customer-stories/customer-story-2.md @@ -0,0 +1,192 @@ +# Building Multi-Agent Systems with MCP and External APIs + +This customer case showcases how we leveraged GitHub Copilot end-to-end to build a proof-of-concept multi-agent application using the Agent Framework and Model Context Protocol (MCP). We demonstrate how GitHub Copilot can help developers rapidly explore new frameworks and build working prototypes without deep prior knowledge. + +## Lab Overview + +**Duration**: 1-2 hours +**Difficulty**: Advanced +**Prerequisites**: + +- Python programming knowledge +- Basic understanding of AI agents and LLMs +- Familiarity with REST APIs +- GitHub Copilot with MCP server support + +## Customer Challenge + +The customer was interested in building a PoC app with multi-agent architecture using a new agentic orchestration framework, the Agent Framework. They also wanted to explore Model Context Protocol (MCP) to connect to their API endpoint. They did not know where to start. + +### Key Requirements + +- Multi-agent architecture with agent-to-agent communication +- Integration with external APIs via custom MCP servers +- Use of Microsoft's Agent Framework (newly introduced) +- Rapid prototyping without deep framework knowledge + +### Challenges + +- **Newly introduced framework**: The Agent Framework was recently released +- **Limited LLM knowledge**: Base models have no knowledge of this framework +- **Understanding MCP integration**: How to integrate MCP with the framework +- **Multiple technology integration**: Agent Framework, MCP servers, external APIs, and orchestration patterns + +## Solution Approach + +This showcase demonstrates how to try out new libraries/frameworks while leveraging GitHub Copilot to build a working proof-of-concept quickly: + +- **Leverage MCP Servers inside GitHub Copilot**: + - Microsoft Docs MCP server to provide Agent Framework documentation from Microsoft + - Context7 MCP to leverage code examples and patterns +- **Start with a clear plan/requirements** using Copilot's planner mode +- **Create custom instructions** focused on the desired implementation + +## Getting Started + +### Step 1: Custom Instructions + +Before starting implementation, it's recommended to create custom instructions, agents, or prompts specific to your needs. In GitHub Copilot and VS Code, this can be done with chat modes and custom instructions: + +- [Custom instructions](https://code.visualstudio.com/docs/copilot/customization/custom-instructions) +- [Create a custom agent](https://code.visualstudio.com/docs/copilot/customization/custom-agents#_create-a-custom-agent) + +#### Adding Custom MCP Instruction File + +Take a look at this repository, which consists of various example instructions, prompts, and custom agents: [Awesome GitHub Copilot Customizations](https://github.com/github/awesome-copilot). + +We will use a custom instruction file from the [Awesome GitHub Copilot Customizations](https://github.com/github/awesome-copilot) repository. [This example instruction file](https://github.com/github/awesome-copilot/blob/main/instructions/python-mcp-server.instructions.md) focuses on building MCP servers using Python. The file contains instructions, best practices, common patterns, and example code snippets. + +![Customization](../assets/images/customer-stories/custom_instruction.png) + +Now, every time GitHub Copilot is editing/reading a `*.py` file, it will include our MCP instruction file in the context. + +### Step 2: Custom Agents - Planner + +We will leverage the Plan Mode from GitHub Copilot as seen in the screenshot. Plan mode helps create, refine, and execute step-by-step implementation plans. Before starting to code, the plan mode analyzes your codebase, generates detailed execution plans, and validates that requirements are covered. + +![Custom Agents](../assets/images/customer-stories/custom_agent.png) + +!!! tip "Copilot Tip" + You can also create your own custom agent, tailored to your own requirements and ideas. + +### Step 3: Add MCP Servers + +Right now our agent is limited to the model's knowledge. We need additional function calling capabilities (e.g., interacting with external tools and accessing up-to-date documentation). + +We'll add MCP servers to our custom agent. You can leverage either: + +- The internal marketplace of VS Code: [MCP Servers Documentation](https://code.visualstudio.com/docs/copilot/customization/mcp-servers) +- The GitHub MCP Registry with one-click integration: [GitHub MCP](https://github.com/mcp) + +#### Recommended MCP Servers + +- **Context7**: Pulls up-to-date, version-specific documentation and code examples straight from the source + - [Context7 MCP](https://github.com/mcp/io.github.upstash/context7) + +- **Microsoft Learn MCP**: Provides access to Microsoft Learn documentation and tutorials, necessary when working with Microsoft libraries like Agent Framework + - [Microsoft Learn MCP](https://github.com/mcp/microsoftdocs/mcp) + +After adding the MCP servers to VS Code, enable them by selecting `Configure Tools` and ticking the boxes: + +![Configure Tools](../assets/images/customer-stories/configure_tools.png) + +## Implementation + +With the custom instruction and MCP servers in place, we can now start implementing our prototype. + +### Step 1: Planning with GitHub Copilot + +We will first leverage the planner agent to help us with the implementation. Start a new chat with the planner agent and provide the following input. **Be sure to have selected your custom agent from the dropdown in the chat window.** + +!!! abstract "" + ``` + I need to build a multi-agent PoC using Microsoft's Agent Framework in Python. The requirements are: + + **Architecture:** + - Two agents that communicate to complete a collaborative task + - Agent 1, the Poet: Accesses a custom MCP server to retrieve Lord of the Rings quotes from an API (https://the-one-api.dev/v2/quote), then writes a brief LOTR-themed poem + - Agent 2, the Critic: Reviews the poem for content accuracy, length, and LOTR lore compliance + + **MCP Server Requirements:** + - Implement a custom MCP server that connects to The One API + - Handle Bearer token authentication: `Authorization: Bearer your-api-key-123` + - Expose tools for quote retrieval + + **Workflow:** + - Agents should iterate in a "ping-pong" pattern with visible interaction logging + - Implement a configurable limit on iteration rounds (e.g., max 5 exchanges) + - User should see the full conversation flow + + Please create a detailed implementation plan. I have access to #Microsoft Docs and #upstash/context7 MCP servers for up-to-date Agent Framework documentation and examples. + ``` + +The planning should take a moment. After the plan is ready, you'll have a structured approach to building the multi-agent system. + +### Step 2: Implementation + +Let's either change to `Agent` Mode or your custom implementer agent and provide the following input referencing the MCP servers we have: + +!!! abstract "" + ``` + Looking at the previous plan, please start implementing this project considering your #Microsoft Docs and #upstash/context7 tools. + ``` + +Check the chat window to see what has been built: + +![Implementation Window](../assets/images/customer-stories/implementation_window.png) + +GitHub Copilot should complete the implementation. You should start the prototype to verify that everything is working as expected. If you have problems starting the prototype, ask the agent for help to troubleshoot the issues! + +Let's be realistic: There might be errors during implementation. If that is the case, leverage the agent to help you troubleshoot the issues. We suggest nudging the agent with the error messages you get to get help on how to fix them. + +### Step 3: Testing and Iteration + +Once the implementation is complete: + +1. **Verify the MCP server**: Ensure it can connect to the external API and retrieve data +2. **Test agent communication**: Verify the agents can communicate in the ping-pong pattern +3. **Check iteration limits**: Confirm the conversation respects the maximum round configuration +4. **Review output quality**: Ensure the poet creates relevant content and the critic provides meaningful feedback + +## Key Takeaways + +This customer case demonstrates how GitHub Copilot with MCP servers can: + +- **Accelerate learning**: Quickly understand new frameworks without deep documentation diving +- **Provide up-to-date information**: Access the latest framework documentation via MCP servers +- **Generate working prototypes**: Create functional multi-agent systems rapidly +- **Integrate multiple technologies**: Combine frameworks, APIs, and orchestration patterns seamlessly +- **Enable experimentation**: Try new approaches without extensive setup time + +### Architecture Benefits + +1. **Custom MCP Servers**: Extend agent capabilities with external data sources +2. **Multi-Agent Collaboration**: Enable specialized agents to work together on complex tasks +3. **Flexible Orchestration**: Control agent interactions with configurable patterns +4. **Visible Communication Flow**: Track and debug agent-to-agent conversations + +### Next Steps + +- Extend the pattern to more complex multi-agent scenarios +- Add additional MCP servers for different data sources +- Implement more sophisticated orchestration patterns +- Deploy the system to production environments +- Add monitoring and logging for agent interactions + +## Code Repository + +The complete code for all three prototypes is available in this repository: + +**[GitHub Repository: ghcp_session_stickiness_customer_case](https://github.com/EfeSenerr/demo_mcp_learn)** + + +## Conclusion + +This customer case shows that with GitHub Copilot and the right MCP servers, developers can: + +- Rapidly prototype with unfamiliar frameworks +- Build complex multi-agent systems without extensive research +- Integrate external APIs seamlessly via custom MCP servers +- Create working solutions in hours instead of days + +The combination of GitHub Copilot's code generation, MCP servers for up-to-date documentation, and the planner mode for structured implementation creates a powerful workflow for exploring new technologies. diff --git a/docs/future-roadmap.md b/docs/future-roadmap.md index bbf5c5d..6e270e6 100644 --- a/docs/future-roadmap.md +++ b/docs/future-roadmap.md @@ -1,118 +1,43 @@ -# Future Roadmap of GitHub Copilot ๐Ÿš€ +# Keeping the Workshop Current -GitHub Copilot is continuously evolving, with new features and capabilities being added regularly. This chapter explores the exciting future roadmap of GitHub Copilot and what developers can expect in the coming months and years. +GitHub Copilot changes too quickly for a static workshop to maintain a reliable product roadmap. Instead of predicting future features, this page gives trainers and maintainers a repeatable way to keep the workshop aligned with the current Copilot experience. -## Current State of GitHub Copilot ๐Ÿ“Š +## What to review before each delivery -Before diving into the future, let's briefly recap where GitHub Copilot stands today: +| Area | What to check | +| --- | --- | +| Copilot UI | Mode names, chat controls, tool approval prompts, and screenshot accuracy. | +| Models | Current model names, Auto behavior, visual-input support, and organization policy. | +| MCP | VS Code MCP configuration, server startup UX, and tool enablement screens. | +| Lab code | Dependencies, APIs, build commands, tests, and runtime versions. | +| External labs | Repository availability, instructions, QR codes, and prerequisites. | +| Security guidance | Token handling, generated-code review, dependency review, and customer data boundaries. | -- **Code Completion**: Suggests code as you type, completing lines or entire functions -- **Natural Language Understanding**: Converts comments into functional code -- **Multi-Language Support**: Works across numerous programming languages -- **IDE Integration**: Available in popular editors like VS Code, Visual Studio, JetBrains IDEs, and more -- **GitHub Copilot Chat**: Provides conversational AI assistance for coding questions -- **Context Awareness**: Understands your project's context to provide relevant suggestions +## Current capability areas to watch -## Near-Term Roadmap (6-12 Months) ๐Ÿ”ฎ +- **Agentic coding workflows**: multi-file changes, terminal commands, tests, and tool use with review. +- **MCP servers**: bringing external tools and data sources into Copilot Chat. +- **Model selection**: Auto model selection, specialized reasoning models, and visual input support. +- **Enterprise controls**: policy, auditability, content exclusion, and organization-level model availability. +- **Repository context**: how Copilot uses open files, selections, workspace search, issues, pull requests, and docs. -### Enhanced Context Understanding ๐Ÿง  +## Recommended maintenance workflow -- **Improved Repository-Wide Context**: Better understanding of your entire codebase, not just the current file -- **Semantic Code Analysis**: Deeper understanding of code meaning and intent -- **Cross-File Refactoring**: Suggest changes across multiple files to improve code quality +1. Review the official Copilot docs and changelog. +2. Run the selected labs from a clean clone. +3. Update prompts and screenshots when the product UX changes. +4. Replace hard-coded model names with task-based guidance unless a lab requires a specific model. +5. Build the MkDocs site and fix broken links or assets. +6. Commit changes in the fork and open a pull request to the Azure-Samples repository. -### Advanced Collaboration Features ๐Ÿ‘ฅ +## Official sources -- **Team-Based Learning**: Copilot will learn from your team's coding patterns and preferences -- **Code Review Assistance**: Automated suggestions for code reviews -- **Collaborative Coding**: Real-time AI assistance during pair programming sessions +- [GitHub Copilot documentation](https://docs.github.com/en/copilot) +- [AI model comparison for GitHub Copilot](https://docs.github.com/en/copilot/reference/ai-models/model-comparison) +- [GitHub Changelog](https://github.blog/changelog/) +- [VS Code AI documentation](https://code.visualstudio.com/docs/ai/overview) +- [Model Context Protocol documentation](https://modelcontextprotocol.io/) -### Expanded Language and Framework Support ๐ŸŒ +## Guidance for trainers -- **Specialized Framework Knowledge**: Deeper understanding of popular frameworks -- **Domain-Specific Suggestions**: Tailored recommendations for specific industries or domains -- **New Language Support**: Expanding to cover more programming languages and technologies - -## Medium-Term Roadmap (1-2 Years) ๐ŸŒฑ - -### AI-Driven Architecture Assistance ๐Ÿ—๏ธ - -- **System Design Suggestions**: Help with designing software architecture -- **Pattern Recognition**: Identify and suggest architectural patterns -- **Performance Optimization**: Recommendations for improving code efficiency - -### Advanced Testing Capabilities ๐Ÿงช - -- **Test Generation**: Automatically generate comprehensive test suites -- **Edge Case Detection**: Identify potential edge cases in your code -- **Test Coverage Analysis**: Suggest tests to improve coverage - -### Security and Compliance ๐Ÿ”’ - -- **Security Vulnerability Detection**: Identify potential security issues in real-time -- **Compliance Checking**: Ensure code meets industry standards and regulations -- **Best Practice Enforcement**: Suggestions to align with security best practices - -## Long-Term Vision (2+ Years) ๐Ÿ”ญ - -### Autonomous Code Generation ๐Ÿค– - -- **Full Feature Implementation**: Generate entire features from high-level descriptions -- **Self-Improving Code**: Suggestions that evolve based on runtime performance -- **Autonomous Debugging**: Identify and fix bugs with minimal human intervention - -### Natural Language Programming ๐Ÿ’ฌ - -- **Conversational Development**: Build software through natural conversations -- **Requirements to Code**: Transform business requirements directly into working code -- **Documentation Generation**: Create comprehensive documentation from code - -### Cross-Platform Intelligence ๐Ÿ“ฑ - -- **Multi-Platform Optimization**: Suggestions optimized for various platforms and devices -- **Adaptive UI Generation**: Create user interfaces that adapt to different devices -- **Cross-Platform Testing**: Ensure code works consistently across platforms - -## Ethical Considerations and Challenges ๐Ÿค” - -As GitHub Copilot evolves, several important considerations will shape its development: - -### Ethical AI Development ๐ŸŒŸ - -- **Bias Mitigation**: Ongoing efforts to reduce bias in code suggestions -- **Transparency**: Clear communication about how suggestions are generated -- **User Control**: Ensuring developers maintain control over their code - -### Technical Challenges ๐Ÿงฉ - -- **Computational Efficiency**: Balancing suggestion quality with performance -- **Context Window Limitations**: Expanding the amount of code Copilot can consider -- **Integration Complexity**: Seamless integration with diverse development environments - -### Industry Impact ๐ŸŒ - -- **Developer Productivity**: Measuring and maximizing productivity gains -- **Skill Development**: Ensuring Copilot enhances rather than replaces developer skills -- **Economic Effects**: Understanding the broader impact on the software industry - -## How to Stay Updated ๐Ÿ“ก - -To keep up with GitHub Copilot's evolving capabilities: - -1. **GitHub Blog**: Follow the [GitHub Blog](https://github.blog/) for official announcements -2. **Release Notes**: Check Copilot's release notes in your IDE -3. **GitHub Changelog**: Review the [GitHub Changelog](https://github.blog/changelog/) for updates -4. **GitHub Next**: Explore [GitHub Next](https://githubnext.com/) for experimental features -5. **Community Forums**: Participate in GitHub Copilot discussions - -## Preparing for the Future ๐ŸŒˆ - -As GitHub Copilot continues to evolve, developers can prepare by: - -- **Embracing AI Collaboration**: View AI as a collaborative partner rather than a replacement -- **Focusing on High-Level Skills**: Develop skills in architecture, design, and problem-solving -- **Providing Quality Feedback**: Help improve Copilot by providing feedback on suggestions -- **Staying Adaptable**: Be ready to incorporate new AI capabilities into your workflow -- **Ethical Consideration**: Think critically about how and when to use AI-generated code - -The future of GitHub Copilot promises to transform how we write code, making development more accessible, efficient, and creative. By understanding the roadmap and preparing for these changes, developers can make the most of this powerful AI assistant! ๐Ÿš€ +When a participant sees a slightly different UI, treat it as normal. Copilot capabilities can vary by plan, organization policy, extension version, IDE, and rollout status. Focus on durable practices: provide context, ask for small iterations, inspect diffs, run tests, and keep humans in control of accepted changes. diff --git a/docs/hands-on/gh-gallery-mcp.md b/docs/hands-on/gh-gallery-mcp.md index 4c529b3..5231f5a 100644 --- a/docs/hands-on/gh-gallery-mcp.md +++ b/docs/hands-on/gh-gallery-mcp.md @@ -2,21 +2,21 @@ Happy you find your way to this exercise. This exercise demonstrates how to leverage an agent to interpret a designer mockup, use the GitHub Copilot MCP server to generate issues, read repository information, and more. Furthermore we will use the Playwright MCP server to generate tests for the Polaroid image gallery. -The main purpose of this demo is to provide a hands-on experience with GitHub Copilot, the new agent mode and its integration with MCP servers. +The main purpose of this demo is to provide a hands-on experience with GitHub Copilot agents and their integration with MCP servers. ## Lab Overview ๐Ÿ“‹ -**Duration**: 45-60 minutes -**Difficulty**: Intermediate +**Duration**: 45-60 minutes +**Difficulty**: Intermediate ## Good to know -This exercise is a successor of the Polaroid image gallery exercise we use for our fundamentals course. You find that exercise [here](./html-gallery.md). It does make sense to let your participants do the fundamentals course first and then this exercise to also show how much more powerful the GitHub Copilot agent mode is. +This exercise is a successor of the Polaroid image gallery exercise we use for our fundamentals course. You find that exercise [here](./html-gallery.md). It makes sense to let participants do the fundamentals course first, then use this exercise to show how much more powerful Copilot becomes when an agent can use tools. !!! info "The results are non-deterministic!" **Even though you are using the same prompt, the agent might generate different code each time. This is normal and expected!** - It is NOT possible to write a deterministic training and exercise for GitHub Copilot and the experience will be different for each participant. You need to deal with this. Safeguarding your code is a necessity and you should always use version control and automated testing to keep track of your changes when using GitHub Copilot. + It is NOT possible to write a deterministic training and exercise for GitHub Copilot and the experience will be different for each participant. You need to deal with this. Safeguarding your code is a necessity and you should always use version control and automated testing to keep track of your changes when using GitHub Copilot. ## Prerequisites @@ -36,7 +36,7 @@ Always make sure that you need to start the right GitHub MCP server based on how ![MCP Servers Setup](../assets/images/mcp/mcp_servers_setup.png){ width=750px } -When starting the GitHub MCP server, you will be prompted to enter your **GitHub Personal Access Token (PAT)**. This is required to authenticate with the GitHub API and allows the MCP server to access your repositories and other information. +When starting the GitHub MCP server, you will be prompted to enter your **GitHub Personal Access Token (PAT)**. This is required to authenticate with the GitHub API and allows the MCP server to access your repositories and other information. You can create a PAT by following the instructions in the [GitHub documentation](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens?wt.mc_id=DT-MVP-5004771). @@ -44,7 +44,7 @@ You can create a PAT by following the instructions in the [GitHub documentation] We are using the following MCP servers in this demo: -- [GitHub Copilot MCP](https://github.com/github/github-mcp-server) +- [GitHub MCP](https://github.com/github/github-mcp-server) - This is the MCP server that gives GitHub Copilot access to the GitHub API and allows you to generate issues, read repository information, and more. - [Playwright MCP](https://github.com/microsoft/playwright-mcp) - This is the MCP server that gives GitHub Copilot access to the Playwright API and allows you to generate tests, read browser information, and more. @@ -63,7 +63,7 @@ After clicking on the tools button, you should see the following: We will leverage the GitHub Copilot MCP server to create an issue in your repository. This issue will contain the requirements for the Polaroid image gallery based on the designer mockup. -Switch over to the GitHub Copilot Chat and drag the [crazy_mockup.png](https://github.com/jeffreygroneberg/ghcp-mcp/tree/main/html/mockup) (ghcp-mcp/html/mockup) file into the chat input panel. This will upload the image to the chat and allow the agent to analyze it. Be sure to use `Claude 3.7 Sonnet` or another reasoning model for this task (that is capable of dealing with images). A reasoning model is recommended to analyze the image and create an issue with the requirements. +Switch over to GitHub Copilot Chat and drag the [crazy_mockup.png](https://github.com/jeffreygroneberg/ghcp-mcp/tree/main/html/mockup) (`ghcp-mcp/html/mockup`) file into the chat input panel. This uploads the image to the chat and allows the agent to analyze it. Use Auto if available, or choose a current reasoning model that supports image input in your Copilot surface. Open the basic `index.html` file in an active tab, and use the following prompt to create the issue: @@ -71,7 +71,7 @@ Open the basic `index.html` file in an active tab, and use the following prompt ``` Create an issue in my repository to implement a Polaroid image gallery based on the designer mockup I just uploaded. The issue should contain the requirements for the Polaroid image gallery and a list of tasks to complete. The issue should emphasize the need for a 3x3 grid layout and the minimal use of javascript. - Create the issue in the upstream repository of this repository on github.com. I am the owner of this repository and have access to the upstream repository. + Create the issue in the upstream repository of this repository on GitHub.com. I am the owner of this repository and have access to the upstream repository. ``` When the agent is running, there **will** come additional questions or clarifications. This is normal and expected. The agent will ask you to clarify the requirements and it will also ask you to press a button. Do that. @@ -86,7 +86,7 @@ When the agent is done, you should see an issue created in your repository. !!! note "Note" **Follow the link to the issue and check if the requirements are correct. If not, you can always ask the agent to update the issue!** -Congratulations! You have successfully created an issue in your repository using the GitHub Copilot MCP server and the agent mode. +Congratulations! You have successfully created an issue in your repository using the GitHub Copilot MCP server and an agentic workflow. Now we will use the GitHub Copilot MCP server to create the Polaroid image gallery based on the requirements in the issue we just created. @@ -104,7 +104,7 @@ In order to create the Polaroid image gallery, we need to read the issue we just !!! abstract "" ``` - Read all issues in the upstream repository of this repository on github.com. I am the owner of this repository and have access to the upstream repository. + Read all issues in the upstream repository of this repository on GitHub.com. I am the owner of this repository and have access to the upstream repository. ``` The agent will leverage the GitHub Copilot MCP server to read all issues in the repository. This will allow the agent to access the issue we just created and use it as a reference for creating the Polaroid image gallery. @@ -115,7 +115,7 @@ A result should look like this: ### Let the agent create the Polaroid image gallery for us -Now we can let the agent create the Polaroid image gallery for us. Be sure to select `Claude Sonnet 4` for this task. +Now we can let the agent create the Polaroid image gallery for us. Use Auto if available, or choose a current model recommended for agentic coding in the official GitHub model comparison. Use the following prompt to create the Polaroid image gallery - **adjust the prompt to target your own issue number**: !!! abstract "" @@ -125,7 +125,7 @@ Use the following prompt to create the Polaroid image gallery - **adjust the pro It will take some time for the agent to create the gallery. When the agent is done, you should see the Polaroid image gallery created in your repository. You need to press the `keep` button to keep the code. -Right click the `index.html` file and open it with `Live Server`: +Right click the `index.html` file and open it with `Live Server`: ![Open with Live Server](../assets/images/mcp/live_server.png){ width=400px } @@ -146,12 +146,12 @@ The Nyan Cat might now fly in the Polaroid image gallery. Please use the followi !!! abstract "" ``` - There is no nyan cat flying in the Polaroid image gallery. Please fix this issue and make the nyan cat fly in the Polaroid image gallery in the footer from left to right. Use the following image as a src: https://media.tenor.com/E3MLgDP1qoQAAAAi/nyan-cat-transparent.gif + There is no nyan cat flying in the Polaroid image gallery. Please fix this issue and make the nyan cat fly in the Polaroid image gallery in the footer from left to right. Use the following image as a src: https://media.tenor.com/E3MLgDP1qoQAAAAi/nyan-cat-transparent.gif ``` #### Fixing other bugs -Interact with the agent and ask it to fix other bugs. You can also ask the agent to improve the code and make it more readable. Give the agent clear instructions and it will do its best to help you. +Interact with the agent and ask it to fix other bugs. You can also ask the agent to improve the code and make it more readable. Give the agent clear instructions and it will do its best to help you. You can also reference old tasks and refine them by giving the agent clear feedback. @@ -180,7 +180,7 @@ Afterwards use the following prompt to create a test that checks if the rick rol !!! abstract "" ``` - Can you create an automated test out of this? + Can you create an automated test out of this? ``` Last one is complex and might take some time. The agent will create a test for you that checks if the rick roll sound is playing when clicking on an image. @@ -193,7 +193,7 @@ Now we can close the issue we created in the first step. Use the following promp !!! abstract "" ``` - Close the issue #44 in the upstream repository of this repository on github.com. I am the owner of this repository and have access to the upstream repository. + Close the issue #44 in the upstream repository of this repository on GitHub.com. I am the owner of this repository and have access to the upstream repository. ``` Confirm the update and the issue will be closed. Check the issue in your repository and make sure it is closed. @@ -202,8 +202,8 @@ Confirm the update and the issue will be closed. Check the issue in your reposit In this lab, you've learned how to: -- Use GitHub's Model Context Protocol (MCP) servers to interact with GitHub repositories using Github Copilot, and create issues programmatically -- Leverage the GitHub Copilot agent mode with reasoning models to analyze designer mockups and translate them into technical requirements +- Use GitHub's Model Context Protocol (MCP) servers to interact with GitHub repositories using GitHub Copilot, and create issues programmatically +- Leverage GitHub Copilot agents with reasoning and visual input to analyze designer mockups and translate them into technical requirements - Create a Polaroid image gallery implementation based on GitHub issue requirements using minimal JavaScript - Use the Playwright MCP server to generate automated tests for web applications - Debug and fix issues in generated code through iterative prompting with the agent diff --git a/docs/hands-on/html-gallery.md b/docs/hands-on/html-gallery.md index 181f733..050c35c 100644 --- a/docs/hands-on/html-gallery.md +++ b/docs/hands-on/html-gallery.md @@ -4,9 +4,9 @@ In this hands-on lab, you'll build an interactive image gallery with animations ## Lab Overview ๐Ÿ“‹ -**Duration**: 45 minutes -**Difficulty**: Beginner-Intermediate -**Prerequisites**: Basic knowledge of HTML, CSS, and JavaScript +**Duration**: 45 minutes +**Difficulty**: Beginner-Intermediate +**Prerequisites**: Basic knowledge of HTML, CSS, and JavaScript ## What You'll Build ๐Ÿ—๏ธ @@ -123,9 +123,9 @@ Optionally, ask Copilot Chat if it is possible to make the images different from Let's add some CSS to style our gallery. We'll create a 3 by 3 grid layout and add some basic styling to the images. We want the images to have a polaroid effect. !!! tip "Copilot Tip" - Add a style tag in the head section and add a comment describing the styling you want to create. Or you can use Copilot Ask or Edit Mode to generate the styling for the polaroid effect. + Add a style tag in the head section and add a comment describing the styling you want to create. You can use the Ask-style chat for guidance, or an agentic coding workflow to propose the CSS changes directly in the file. -You can use the following prompt in Github Copilot chat to generate the CSS code for the polaroid effect: ``I want images in the gallery to have a 3 by 3 grid layout and look like a polaroid photo. What do I need to add?`` +You can use the following prompt in GitHub Copilot chat to generate the CSS code for the polaroid effect: ``I want images in the gallery to have a 3 by 3 grid layout and look like a polaroid photo. What do I need to add?`` ???+ "Add this to your head section:" ```html @@ -158,7 +158,7 @@ You can use the following prompt in Github Copilot chat to generate the CSS code Now, let's add some hover effects to make our gallery more interactive. The images should wobble when you hover over them in an infinite loop. We also want to reduce the opacity of the non-hovered images. !!! tip "Copilot Tip" - Ask Github Copilot Ask/Edit Mode to generate the styling code for hovering effects. Remember to have the index.html file open in the editor. + Ask GitHub Copilot to generate the styling code for hovering effects. Keep the `index.html` file open so Copilot has the right context, then review the proposed changes before accepting them. Inspect the result and accept the changes made under `` @@ -349,7 +349,7 @@ Refresh your browser to see the wobble effect on the images in the gallery. Hove In this step, you will reduce the opacity of the non-hovered images. > [!Important] -> - Use either Github Copilot chat or a comment in the style tag to generate the CSS code for the opacity effect. Remember to have the index.html file open in the editor. +> - Use either GitHub Copilot chat or a comment in the style tag to generate the CSS code for the opacity effect. Remember to have the index.html file open in the editor. > - We recommend rather using Copilot chat for this step. > - Try to explain exactly what you want to achieve in the chat. @@ -419,7 +419,7 @@ In this step, you will reduce the opacity of the non-hovered images. } } - + @@ -451,7 +451,7 @@ Refresh your browser to see the opacity effect on the non-hovered images in the In this step, you will remove one image from the gallery when you click on it. Be careful with the events of the DOM elements. Some elements might not be available when the page is loaded. > [!Important] -> Use Github Copilot chat to generate the JavaScript code for removing an image from the gallery when you click on it. Remember to have the index.html file open in the editor, or add the file as context. +> Use GitHub Copilot chat to generate the JavaScript code for removing an image from the gallery when you click on it. Remember to have the index.html file open in the editor, or add the file as context. > [!Tip] > - You can use the following prompt in the chat: ``I would like to remove an element from the image gallery when clicking on it. Can you return the whole html page with the new added javascript?`` @@ -554,18 +554,18 @@ In this step, you will remove one image from the gallery when you click on it. B -## ๐Ÿ–ผ๏ธ Using Agent Mode & Vision Input to create the gallery +## ๐Ÿ–ผ๏ธ Using an agent and vision input to create the gallery -In this step, we'll leverage GitHub Copilotโ€™s Agent Mode and Vision Input to transform a mockup image into a fully functional HTML page with embedded CSS. +In this step, we'll use a Copilot agent with visual input to transform a mockup image into a fully functional HTML page with embedded CSS. -> **Mockup file:** `gallery/images/img_gallery_prompt.jpg` -> **Prompt for Copilot Chat:** +> **Mockup file:** `gallery/images/img_gallery_prompt.jpg` +> **Prompt for Copilot Chat:** > Can you create an HTML page for me with the given mockup? Please take a close look at the designer's remarks marked with arrows! Render one HTML page with embedded CSS. Photos should have a white background. -1. Open GitHub Copilot Chat and switch to **Agent Mode** (optional). -2. Upload `img_gallery_prompt.jpg` via dragging the image to the chat or by clicking `Add Context` button. -3. Paste the prompt above and submit. -4. Copy Copilotโ€™s generated HTML+CSS into a new file (e.g., `index-agent.html`). +1. Open GitHub Copilot Chat and use an agentic coding workflow. +2. Upload `img_gallery_prompt.jpg` via dragging the image to the chat or by clicking `Add Context` button. +3. Paste the prompt above and submit. +4. Copy Copilotโ€™s generated HTML+CSS into a new file (e.g., `index-agent.html`). 5. Preview with Live Server. --- diff --git a/labs/java/starwarsapi/instructions.md b/labs/java/starwarsapi/instructions.md index 43ded90..9a5f4bb 100644 --- a/labs/java/starwarsapi/instructions.md +++ b/labs/java/starwarsapi/instructions.md @@ -2,13 +2,13 @@ -This repository includes a Github Copilot training intended to show off a very practical example using the tool. +This repository includes a GitHub Copilot training intended to show off a very practical example using the tool. We will leverage the Java programming language to query the Star Wars API at https://swapi.info and retrieve information about the Star Wars characters. Within this training we will try to cover the whole lifecycle of a Java application. Starting from creating a Maven based Java project, writing tests, implementing the application, and running the tests. Even a small refactoring will be covered. ## ๐ŸŽฏ Goal -We will step by step implement a Java application to see how we can leverage Github Copilot to help us write the code: +We will step by step implement a Java application to see how we can leverage GitHub Copilot to help us write the code: - **Generating a DTO class for the Star Wars Person** - **Creating an interface to query the Star Wars API** @@ -75,7 +75,7 @@ We will step by step implement a Java application to see how we can leverage Git * OpenJDK: [OpenJDK JDK 21.0.2 GA Release (java.net)](https://jdk.java.net/21/) * Maven: [Maven โ€“ Installing Apache Maven](https://maven.apache.org/install.html) * VSCode: [https://code.visualstudio.com/](https://code.visualstudio.com/) -* Github Copilot: [GitHub Copilot - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) +* GitHub Copilot: [GitHub Copilot - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) * Java Extensions Pack: [Extension Pack for Java - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-pack) ## ๐Ÿ—’๏ธ Guide @@ -83,7 +83,7 @@ We will step by step implement a Java application to see how we can leverage Git Within the next steps we will create a Java application that will query the Star Wars API and retrieve information about the Star Wars characters. -We will leverage Github Copilot to help us write the code and get started. +We will leverage GitHub Copilot to help us write the code and get started. ### Create the project @@ -93,10 +93,10 @@ First of all it is necessary to have a folder created in which you will create t code . ``` -We need to create a Maven based Java project. For this we will have to ask Github Copilot to give us a good overview of how to do it. +We need to create a Maven based Java project. For this we will have to ask GitHub Copilot to give us a good overview of how to do it. > [!IMPORTANT] -> Ask Github Copilot Chat to provide you with the steps to create a Maven based Java project. +> Ask GitHub Copilot Chat to provide you with the steps to create a Maven based Java project. > [!TIP] > An example prompt could be: ``How can I create via terminal a Java based project that already has some unit tests?`` @@ -116,7 +116,7 @@ mvn archetype:generate -DgroupId=com.mycompany.app -DartifactId=my-app -Darchety ### Check if the tests compile > [!IMPORTANT] -> Ask Github Copilot to provide you with the command to compile the tests. +> Ask GitHub Copilot to provide you with the command to compile the tests. > [!TIP] > Another prompt: ``How can I use maven to run the tests?`` @@ -143,7 +143,7 @@ You should see the following output: ### Upgrade JUnit to Junit4 in your pom.xml > [!IMPORTANT] -> Ask Github Copilot how you can leverage Junit 4 instead of Junit 3. Open your `pom.xml` in an editor. Use the command pop up to interact with Copilot Chat here. +> Ask GitHub Copilot how you can leverage Junit 4 instead of Junit 3. Open your `pom.xml` in an editor. Use the command pop up to interact with Copilot Chat here. > After you have altered the `pom.xml` file, run the tests again to make sure everything is working as expected. > [!TIP] @@ -167,7 +167,7 @@ Your `pom.xml` dependencies should look like this: ### Refactor the tests to use Junit 4 > [!IMPORTANT] -> Ask Github Copilot to provide you with the necessary imports to use Junit 4 in your tests. Open your `AppTest.java` file in an editor and use Copilot Chat with an appropriate prompt to refactor the class. +> Ask GitHub Copilot to provide you with the necessary imports to use Junit 4 in your tests. Open your `AppTest.java` file in an editor and use Copilot Chat with an appropriate prompt to refactor the class. > [!TIP] > Prompt: ``I would like to refactor the tests to use Junit 4 and one basic test. The test should leverage the @Test annotation. Can you help me with the imports and the overall class structure?`` @@ -186,9 +186,9 @@ import static org.junit.Assert.*; /** * Unit test for simple App. */ -public class AppTest +public class AppTest { - + @Test public void testApp() { @@ -206,7 +206,7 @@ Let's start by using Luke Skywalker as an example: https://swapi.info/people/1 You can see the example payload directly at the page. Please copy the JSON in your clipboard. ```json -{ +{ "name": "Luke Skywalker", "height": "172", "mass": "77", @@ -238,16 +238,16 @@ You can see the example payload directly at the page. Please copy the JSON in yo ``` > [!IMPORTANT] -> Use Github Copilot chat to create a DTO class for the Star Wars Person. You can use the JSON payload above as an example payload within the prompt. +> Use GitHub Copilot chat to create a DTO class for the Star Wars Person. You can use the JSON payload above as an example payload within the prompt. > [!TIP] > Prompt: > > ```plaintext > -> Can you help me create a DTO class that is returned by the public Star Wars API. One example looks like this: +> Can you help me create a DTO class that is returned by the public Star Wars API. One example looks like this: > -> --- JSON PAYLOAD --- +> --- JSON PAYLOAD --- > > { "name": "Luke Skywalker", "height": "172", "mass": "77", "hair_color": "blond", "skin_color": "fair", "eye_color": "blue", "birth_year": "19BBY", "gender": "male", "homeworld": "https://swapi.info/api/planets/1", "films": [ "https://swapi.info/api/films/1", "https://swapi.info/api/films/2", "https://swapi.info/api/films/3", "https://swapi.info/api/films/6" ], "species": [], "vehicles": [ "https://swapi.info/api/vehicles/14", "https://swapi.info/api/vehicles/30" ], "starships": [ "https://swapi.info/api/starships/12", "https://swapi.info/api/starships/22" ], "created": "2014-12-09T13:50:51.644000Z", "edited": "2014-12-20T21:17:56.891000Z", "url": "https://swapi.info/api/people/1" } > --- @@ -290,16 +290,16 @@ Remember that this file needs to be stored in the same folder like your `App.jav ### Fixing error in the StarWarsCharacterDTO class -Your DTO class seems to have an error as something is underlined in red. Please ask Github Copilot to help you fix the error. +Your DTO class seems to have an error as something is underlined in red. Please ask GitHub Copilot to help you fix the error. > [!IMPORTANT] -> Press ``CMD + .`` to open the quick fix menu and use the Github Copilot to fix the error. +> Press ``CMD + .`` to open the quick fix menu and use the GitHub Copilot to fix the error. > [!TIP] > The fix can be found here: > ![image](./images/3.png) > -> Accept the suggestion of Github Copilot. +> Accept the suggestion of GitHub Copilot. #### Solution @@ -470,7 +470,7 @@ public class StarWarsCharacterDTO { We will create an interface that will be used to query the Star Wars API. The interface will have a method that will return a `StarWarsCharacterDTO` object. As we need to have a start we will use the Luke Skywalker example and also use a method to query specificly for Luke Skywalker. > [!IMPORTANT] -> Create a new file called `StarWarsAPI.java` in the same folder as your `App.java` file. If you have problems creating this file then use the Github Copilot chat to help you create the file. We need to have a method that returns Luke Skywalker as an `StarWarsCharacterDTO` object. +> Create a new file called `StarWarsAPI.java` in the same folder as your `App.java` file. If you have problems creating this file then use the GitHub Copilot chat to help you create the file. We need to have a method that returns Luke Skywalker as an `StarWarsCharacterDTO` object. > [!TIP] > Prompt: ``Can you help me create a plain java interface that queries the Star Wars API and returns a StarWarsCharacterDTO object? I would like to start with just one method for querying Luke Skywalker. The interface should be called StarWarsAPI.`` @@ -494,11 +494,11 @@ public interface StarWarsAPI { We will now create a test for the `StarWarsAPI` interface. The test will be used to verify that the interface is working as expected. We will use Junit 4 to create the test. > [!IMPORTANT] -> Use the Github Copilot chat to create a test for the `StarWarsAPI` interface. The test should verify that the `getLukeSkywalker` method is working as expected. The test should be stored in the same folder like your `AppTest.java` file. +> Use the GitHub Copilot chat to create a test for the `StarWarsAPI` interface. The test should verify that the `getLukeSkywalker` method is working as expected. The test should be stored in the same folder like your `AppTest.java` file. > [!TIP] -> Use the Github Copilot popup to create the test. Leverage the ``/tests`` command to let Copilot generate the test for you. An example prompt could be: ``/tests Create a test that is checking if the retrieved object from the Star Wars API is fine.`` Accept the suggestion of Copilot and store the file next to your `AppTest.java` file as ``StarWarsAPITest.java`` file. -> Careful: Most likely you will have to adjust the package name in the generated test file and import the IOException. You can use the quick fix menu to do so with Github Copilot. +> Ask GitHub Copilot to create the test. An example prompt could be: ``Create a JUnit 4 test that checks whether the retrieved object from the Star Wars API is valid.`` Accept the suggestion and store the file next to your `AppTest.java` file as ``StarWarsAPITest.java``. +> Careful: Most likely you will have to adjust the package name in the generated test file and import the IOException. You can use the quick fix menu to do so with GitHub Copilot. #### Solution @@ -570,8 +570,8 @@ public class StarWarsAPIImpl implements StarWarsAPI{ public StarWarsCharacterDTO getLukeSkywalker() throws IOException { // TODO Auto-generated method stub throw new UnsupportedOperationException("Unimplemented method 'getLukeSkywalker'"); - } - + } + } ``` @@ -616,7 +616,7 @@ public class StarWarsAPIImpl implements StarWarsAPI{ @Override public StarWarsCharacterDTO getLukeSkywalker() throws IOException { - + // Use Java HttpClient to make a GET request to the Star Wars API // The URL to get Luke Skywalker is https://swapi.info/api/people/1 // Create a new instance of HttpClient @@ -635,10 +635,10 @@ public class StarWarsAPIImpl implements StarWarsAPI{ StarWarsCharacterDTO lukeSkywalker = mapper.readValue(response.body(), StarWarsCharacterDTO.class); return lukeSkywalker; - - } - + + } + } ``` @@ -646,17 +646,17 @@ You will see that there is an **error** with the `ObjectMapper` class. We will f ### Fixing the ObjectMapper error -The `ObjectMapper` class is not yet imported. But even then we need to add the `jackson-databind` dependency to the `pom.xml` file. Use the Github Copilot to help with this. +The `ObjectMapper` class is not yet imported. But even then we need to add the `jackson-databind` dependency to the `pom.xml` file. Use the GitHub Copilot to help with this. > [!IMPORTANT] > -> - Use Github Copilot to generate the import in your `StarWarsAPIImpl.java` file to ``import com.fasterxml.jackson.databind.ObjectMapper;`` -> - Use Github Copilot to generate the dependency in your `pom.xml` file to ``com.fasterxml.jackson.core:jackson-databind:2.13.0`` +> - Use GitHub Copilot to generate the import in your `StarWarsAPIImpl.java` file to ``import com.fasterxml.jackson.databind.ObjectMapper;`` +> - Use GitHub Copilot to generate the dependency in your `pom.xml` file to ``com.fasterxml.jackson.core:jackson-databind:2.13.0`` > [!TIP] > -> - Use Github Copilot ``/fix`` command to fix the error in the `StarWarsAPIImpl.java` file. You can also use the right click menu to fix the error. -> - Ask Github Copilot Chat to provide you with the necessary dependency for the `pom.xml` file. A prompt could be: ``I need to add the jackson-databind dependency to the pom.xml file. Can you help me with this?`` +> - Use GitHub Copilot ``/fix`` command to fix the error in the `StarWarsAPIImpl.java` file. You can also use the right click menu to fix the error. +> - Ask GitHub Copilot Chat to provide you with the necessary dependency for the `pom.xml` file. A prompt could be: ``I need to add the jackson-databind dependency to the pom.xml file. Can you help me with this?`` > A popup from the Java Extension Pack will appear. Accept the suggestion to rebuild the Java Class Path. #### Solution @@ -677,7 +677,7 @@ public class StarWarsAPIImpl implements StarWarsAPI{ @Override public StarWarsCharacterDTO getLukeSkywalker() throws IOException { - + // Use Java HttpClient to make a GET request to the Star Wars API // The URL to get Luke Skywalker is https://swapi.info/api/people/1 @@ -697,10 +697,10 @@ public class StarWarsAPIImpl implements StarWarsAPI{ StarWarsCharacterDTO lukeSkywalker = mapper.readValue(response.body(), StarWarsCharacterDTO.class); return lukeSkywalker; - - } - + + } + } ``` @@ -766,7 +766,7 @@ public class StarWarsAPIImpl implements StarWarsAPI{ @Override public StarWarsCharacterDTO getLukeSkywalker() throws IOException, InterruptedException { - + // Use Java HttpClient to make a GET request to the Star Wars API // The URL to get Luke Skywalker is https://swapi.info/api/people/1 @@ -786,10 +786,10 @@ public class StarWarsAPIImpl implements StarWarsAPI{ StarWarsCharacterDTO lukeSkywalker = mapper.readValue(response.body(), StarWarsCharacterDTO.class); return lukeSkywalker; - - } - + + } + } ``` @@ -839,19 +839,19 @@ public class StarWarsAPITest { Run the tests again to make sure everything is working as expected. **The tests will now fail** with ```plaintext -[ERROR] Failures: +[ERROR] Failures: [ERROR] StarWarsAPITest.testGetLukeSkywalker:20 IOException occurred: No content to map due to end-of-input at [Source: (String)""; line: 1, column: 0] ``` > [!IMPORTANT] > -> - Ask Github Copilot to provide you with the necessary code to fix the error. The hint might be not enough. +> - Ask GitHub Copilot to provide you with the necessary code to fix the error. The hint might be not enough. > - Go in your browser. Open the network tab in the developer tools. And visit the url `https://swapi.info/api/people/1`. Look at the network and use this info to fix the error. > [!TIP] > -> - Open the `StarWarsAPIImpl.java` file. Go in Github Copilot chat and ask for help to fix the error: ``When visiting the url https://swapi.info/api/people/1 I see in my network tab of the dev consoles in my browser a 308. Does this lead to an error in my test?`` +> - Open the `StarWarsAPIImpl.java` file. Go in GitHub Copilot chat and ask for help to fix the error: ``When visiting the url https://swapi.info/api/people/1 I see in my network tab of the dev consoles in my browser a 308. Does this lead to an error in my test?`` > - Replace the instance of the `HttpClient` with the following code: ``HttpClient client = HttpClient.newBuilder().followRedirects(HttpClient.Redirect.ALWAYS).build();`` > - Rerun the tests to make sure everything is working as expected: ``mvn test`` @@ -873,7 +873,7 @@ public class StarWarsAPIImpl implements StarWarsAPI{ @Override public StarWarsCharacterDTO getLukeSkywalker() throws IOException, InterruptedException { - + // Use Java HttpClient to make a GET request to the Star Wars API // The URL to get Luke Skywalker is https://swapi.info/api/people/1 @@ -895,10 +895,10 @@ public class StarWarsAPIImpl implements StarWarsAPI{ StarWarsCharacterDTO lukeSkywalker = mapper.readValue(response.body(), StarWarsCharacterDTO.class); return lukeSkywalker; - - } - + + } + } ``` @@ -909,11 +909,11 @@ We need to add a little more asserts to the test to check if the information abo > [!IMPORTANT] > > - Open the `StarWarsAPITest.java` file. -> - Use comments as prompts after the `assertNotNull` line to ask Github Copilot to provide you with the necessary code to check if the name of Luke Skywalker is correct and if the height is correct. +> - Use comments as prompts after the `assertNotNull` line to ask GitHub Copilot to provide you with the necessary code to check if the name of Luke Skywalker is correct and if the height is correct. > [!TIP] > -> - Use the following prompts as comments to ask Github Copilot to provide you with the necessary code. Press enter after the comment and Tab to accept the suggestion. +> - Use the following prompts as comments to ask GitHub Copilot to provide you with the necessary code. Press enter after the comment and Tab to accept the suggestion. > - - ``// Check if the name of Luke Skywalker is correct`` > - - ``// Check if the height of Luke Skywalker is correct`` @@ -960,7 +960,7 @@ Now that we have implemented the `getLukeSkywalker` method we will add additiona > Add a new method to the `StarWarsAPI` interface that will return a `StarWarsCharacterDTO` object for Darth Vader. Use a comment as a prompt to do so > [!TIP] -> Use the following prompt as a comment to ask Github Copilot to provide you with the necessary code. Press enter after the comment and Tab to accept the suggestion: ``// Get Darth Vader`` +> Use the following prompt as a comment to ask GitHub Copilot to provide you with the necessary code. Press enter after the comment and Tab to accept the suggestion: ``// Get Darth Vader`` #### Solution @@ -987,10 +987,10 @@ This will lead to a compile error in the StarWarsAPIImpl class. We will fix this We will now implement the `getDarthVader` method in the `StarWarsAPIImpl` class. We will use the Java `HttpClient` to query the Star Wars API and retrieve the information about Darth Vader from the url: https://swapi.info/api/people/4 > [!IMPORTANT] -> Navigate to the `StarWarsAPIImpl.java` file. Use a comment as a prompt after the `getLukeSkywalker` method to ask Github Copilot to provide you with the necessary code to implement the `getDarthVader` method. +> Navigate to the `StarWarsAPIImpl.java` file. Use a comment as a prompt after the `getLukeSkywalker` method to ask GitHub Copilot to provide you with the necessary code to implement the `getDarthVader` method. > [!TIP] -> Use the following prompt as a comment to ask Github Copilot to provide you with the necessary code. Press enter after the comment and Tab to accept the suggestion: ``// Implement the getDarthVader method`` +> Use the following prompt as a comment to ask GitHub Copilot to provide you with the necessary code. Press enter after the comment and Tab to accept the suggestion: ``// Implement the getDarthVader method`` > You might need multiple tabs to accept all suggestions. #### Solution @@ -1011,7 +1011,7 @@ public class StarWarsAPIImpl implements StarWarsAPI{ @Override public StarWarsCharacterDTO getLukeSkywalker() throws IOException, InterruptedException { - + // Use Java HttpClient to make a GET request to the Star Wars API // The URL to get Luke Skywalker is https://swapi.info/api/people/1 @@ -1033,14 +1033,14 @@ public class StarWarsAPIImpl implements StarWarsAPI{ StarWarsCharacterDTO lukeSkywalker = mapper.readValue(response.body(), StarWarsCharacterDTO.class); return lukeSkywalker; - + } - + // Implement the getDarthVader method @Override public StarWarsCharacterDTO getDarthVader() throws IOException, InterruptedException { - + // Use Java HttpClient to make a GET request to the Star Wars API // The URL to get Darth Vader is https://swapi.info/api/people/4 @@ -1061,9 +1061,9 @@ public class StarWarsAPIImpl implements StarWarsAPI{ ObjectMapper mapper = new ObjectMapper(); StarWarsCharacterDTO darthVader = mapper.readValue(response.body(), StarWarsCharacterDTO.class); - return darthVader; + return darthVader; - } + } } ``` @@ -1078,7 +1078,7 @@ We will now add a test for the `getDarthVader` method in the `StarWarsAPITest` c > [!TIP] > -> - Open the `StarWarsAPITest.java` file. Use a comment as a prompt after the `testGetLukeSkywalker` method to ask Github Copilot to provide you with the necessary code to implement the `testGetDarthVader` method: ``// Test the getDarthVader method`` +> - Open the `StarWarsAPITest.java` file. Use a comment as a prompt after the `testGetLukeSkywalker` method to ask GitHub Copilot to provide you with the necessary code to implement the `testGetDarthVader` method: ``// Test the getDarthVader method`` > - Use multiple tabs to accept all suggestions. > - Rerun the tests to make sure everything is working as expected: ``mvn test`` @@ -1141,15 +1141,15 @@ public class StarWarsAPITest { ### Refactor the StarWarsAPI implementation -There is a lot of duplicated code in the `getLukeSkywalker` and `getDarthVader` methods. We will refactor the code to extract the common code into a new private method called `getStarWarsCharacter` and leverage Github Copilot to help us with this. +There is a lot of duplicated code in the `getLukeSkywalker` and `getDarthVader` methods. We will refactor the code to extract the common code into a new private method called `getStarWarsCharacter` and leverage GitHub Copilot to help us with this. > [!IMPORTANT] -> Use the Github Copilot chat to help you refactor the `getLukeSkywalker` and `getDarthVader` methods in the `StarWarsAPIImpl` class. The common code should be extracted into a new private method called `getStarWarsCharacter`. The method should only receive an id as a parameter and return a `StarWarsCharacterDTO` object. +> Use the GitHub Copilot chat to help you refactor the `getLukeSkywalker` and `getDarthVader` methods in the `StarWarsAPIImpl` class. The common code should be extracted into a new private method called `getStarWarsCharacter`. The method should only receive an id as a parameter and return a `StarWarsCharacterDTO` object. > [!TIP] > > - Open your `StarWarsAPIImpl.java` file. -> - Use Github Copilot chat to help you refactor the `getLukeSkywalker` and `getDarthVader` methods. Use the following prompt: ``Can you help me refactoring this class to use a private method getStarWarsCharacter to retrieve the payloads and avoid duplicated code in the different methods. I want to provide an Id to the private method. I need the whole refactored class as a result including the getLukeSkywalker and getDarthVaeder methods.`` +> - Use GitHub Copilot chat to help you refactor the `getLukeSkywalker` and `getDarthVader` methods. Use the following prompt: ``Can you help me refactoring this class to use a private method getStarWarsCharacter to retrieve the payloads and avoid duplicated code in the different methods. I want to provide an Id to the private method. I need the whole refactored class as a result including the getLukeSkywalker and getDarthVaeder methods.`` > - Careful. The retrieved class is missing the package declaration. **Add the package declaration to the class** #### Solution diff --git a/labs/python/README.md b/labs/python/README.md index e69de29..b902e92 100644 --- a/labs/python/README.md +++ b/labs/python/README.md @@ -0,0 +1,8 @@ +# Python labs + +This folder contains Python starter code used by the published workshop pages. + +| Lab | Published instructions | +| --- | --- | +| Rock Paper Scissors | [`docs/hands-on/rock_paper_scissors.md`](../../docs/hands-on/rock_paper_scissors.md) | +| Star Wars API client | [`docs/hands-on/starwars-api-python.md`](../../docs/hands-on/starwars-api-python.md) | \ No newline at end of file diff --git a/labs/python/rock_paper_scissors/README copy.md b/labs/python/rock_paper_scissors/README copy.md deleted file mode 100644 index 21ae34a..0000000 --- a/labs/python/rock_paper_scissors/README copy.md +++ /dev/null @@ -1,27 +0,0 @@ -# x - - - - -## ๐ŸŽฏ Goal - - - - - - -## โœ๏ธ Programming Languages - -- JavaScript -- HTML -- CSS - -## ๐Ÿ’ป IDE and tools - -- Visual Studio Code - - -## ๐Ÿ—’๏ธ Guide - - -https://github.com/microsoft/CopilotAdventures/blob/main/Adventures/2-Intermediate/The-Legendary-Duel-of-Stonevale.md diff --git a/labs/python/rock_paper_scissors/README.md b/labs/python/rock_paper_scissors/README.md index 21ae34a..4e3c291 100644 --- a/labs/python/rock_paper_scissors/README.md +++ b/labs/python/rock_paper_scissors/README.md @@ -1,27 +1,5 @@ -# x - +# Rock Paper Scissors Python lab - +This folder contains the starter code and tests for the Rock Paper Scissors lab. -## ๐ŸŽฏ Goal - - - - - - -## โœ๏ธ Programming Languages - -- JavaScript -- HTML -- CSS - -## ๐Ÿ’ป IDE and tools - -- Visual Studio Code - - -## ๐Ÿ—’๏ธ Guide - - -https://github.com/microsoft/CopilotAdventures/blob/main/Adventures/2-Intermediate/The-Legendary-Duel-of-Stonevale.md +Use the published workshop instructions here: [`docs/hands-on/rock_paper_scissors.md`](../../../docs/hands-on/rock_paper_scissors.md). diff --git a/labs/python/rock_paper_scissors/tests/test_game.py b/labs/python/rock_paper_scissors/tests/test_game.py index 38f21b1..2145d82 100644 --- a/labs/python/rock_paper_scissors/tests/test_game.py +++ b/labs/python/rock_paper_scissors/tests/test_game.py @@ -18,7 +18,7 @@ def test_determine_winner(self): self.assertEqual(determine_winner("scissors", "scissors"), "tie") # used inline GHCP chat with the following prompt: - # /tests Write test cases for the Scorer class to verify point calculation and score updates + # Generated with Copilot: Write test cases for the Scorer class to verify point calculation and score updates. def test_calculate_points(self): scorer = Scorer() self.assertEqual(scorer.calculate_points("rock"), 1) diff --git a/labs/python/starwarsapi/README.md b/labs/python/starwarsapi/README.md index e69de29..3f466d3 100644 --- a/labs/python/starwarsapi/README.md +++ b/labs/python/starwarsapi/README.md @@ -0,0 +1,5 @@ +# Star Wars API Python lab + +This folder contains the Python starter code and tests for the Star Wars API client lab. + +Use the published workshop instructions here: [`docs/hands-on/starwars-api-python.md`](../../../docs/hands-on/starwars-api-python.md). \ No newline at end of file diff --git a/mkdocs.yml b/mkdocs.yml index 74e273e..352bd35 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -1,6 +1,6 @@ site_name: GitHub Copilot Hands-on Labs -site_description: A comprehensive workshop for learning GitHub Copilot capabilities -site_author: GitHub Copilot Workshop Team +site_description: Hands-on workshop for learning GitHub Copilot with labs, agents, and MCP +site_author: Microsoft Germany CSA Team repo_url: https://github.com/Azure-Samples/github-copilot-hands-on/ repo_name: Azure-Samples/github-copilot-hands-on @@ -90,9 +90,13 @@ nav: - APIs: - Star Wars API in Java: hands-on/starwars-api.md - Star Wars API in Python: hands-on/starwars-api-python.md - - MCP: + - MCP: - Image Gallery with MCP: hands-on/gh-gallery-mcp.md - Build Your Own MCP Server: hands-on/mcp-server-starter.md + - MCP Fiar Game: hands-on/mcp-fiar.md - Other Labs: hands-on/other-labs.md - - Future Roadmap: future-roadmap.md - - RAG Extension Lab: rag-extension-lab.md + - Customer Stories: + - Spring Boot Session Management Customer Case: customer-stories/customer-story-1.md + - Multi-Agent Systems with MCP and External APIs: customer-stories/customer-story-2.md + - Keeping Current: future-roadmap.md + - Optional RAG Extension Lab: rag-extension-lab.md