init

.devcontainer/devcontainer.json

@@ -0,0 +1,19 @@
+{
+  "image": "mcr.microsoft.com/devcontainers/universal:2",
+  "hostRequirements": {
+    "cpus": 4
+  },
+  "name": "Copilot Demo",
+  "postCreateCommand": "sudo cp --force ./.devcontainer/welcome-message.txt /usr/local/etc/vscode-dev-containers/first-run-notice.txt",
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "GitHub.copilot",
+        "GitHub.copilot-chat",
+        "GitHub.copilot-labs",
+        "vsls-contrib.codetour",
+        "Phu1237.vs-browser"
+      ]
+    }
+  }
+}

.devcontainer/welcome-message.txt

@@ -0,0 +1,2 @@
+👋 Welcome to the Copilot & Copilot Chat, Codespaces Demo Experience!
+🔍 To start a demo, click "CODETOUR" in the bottom left corner, hover over an option, and press the arrow to start!

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.tours/copilot-chat-operations.tour

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://aka.ms/codetour-schema",
+  "title": "Copilot Chat",
+  "description": "A tour to create a calculator app with defined features and edge cases",
+  "steps": [
+    {
+      "file": "src/App.js",
+      "title": "'Talk' to Copilot",
+      "description": "## Demonstrate some Copilot Chat interaction\n\n### 1. Open [Copilot Chat](command:workbench.panel.chatSidebar.copilot) (`Control` + `Command` + `I`)\n\n- Type: ***'give me a NodeJS web server'***\n  - Explore the options to handle the code suggestions (`Copy`, `Insert at Cursor`, `Insert into new file`)...\n\n- Type: ***'What's the weather in New York City ?'***\n  - Copilot will let you know it's purpose...\n\n- Type: ***'What's the latest version of Python ?'***\n  - Copilot's knowledge has it's limits...\n  - Check for yourself - [Python releases](https://www.python.org/downloads/)\n  \n- Type: ***'/'***\n  - Copilot can help you with some topics...\n\n\n",
+      "line": 7,
+      "content": "..."
+    }
+  ]
+}

.tours/copilot-operations.tour

@@ -0,0 +1,81 @@
+{
+  "$schema": "https://aka.ms/codetour-schema",
+  "title": "Copilot",
+  "description": "A tour to create a calculator app with defined features and edge cases",
+  "steps": [
+    {
+      "file": "src/App.js",
+      "title": "Inline help",
+      "description": "## Situation: The React App does not use the `calculator` component! \n\n- Remember to start the App\n\n>> npm install\n\n>> npm start\n \n- [Open Browser](command:vs-browser.start) (use port 3000)\n\n### 1. Test Copilots Inline Suggestion\n\n- After the App is started, you probably do not see the `calculator` compoment, let's try to add it.\n- Based on the file context, file references to `calculator`, Copilot might already suggest the right thing.\n- Click `Tab` to accept the suggestion.\n\n### 2. Go to the end of the comment line and press 'Enter'\n\n- Give Copilot a bit time to present you with a suggestion\n\n- **Optional:** If Copilot does not produce satisfying results, try using [Copilot Chat](command:workbench.panel.chatSidebar.copilot) \n\n### 4. Accept a Suggestion and Save the File\n\n- With the correct suggestion `(<Calculator />)` you should now see the calculator in the App.\n",
+      "line": 13,
+      "content": "...",
+      "selection": {
+        "start": {
+          "line": 19,
+          "character": 1
+        },
+        "end": {
+          "line": 20,
+          "character": 135
+        }
+      }
+    },
+    {
+      "file": "src/components/Calculator.js",
+      "title": "Completions Panel",
+      "description": "## Situation: The calculator does not calculate.\n\n### 1. Test the use of the *Copilot Completions Panel*\n\n### 2. Go to the end of the comment line and press 'Enter', to trigger Copilot\n\n### 3. Open the [Copilot Completions Panel](command:github.copilot.generate) (**`Control^`** + **`Enter`**). \n#### Note: Try not to use the 'Inline suggestions' (as they are still showing up)\n\n- Give Copilot a bit time to present you with suggestions\n- Choose one of the suggestions by clicking the `'Accept Solution'` link\n- **Optional:** If Copilot does not produce satisfying results, try using [Copilot Chat](command:workbench.panel.chatSidebar.copilot) \n\n### 4. Save the file and continue\n\n- Test the calculator in the browser (http://localhost:3000)\n",
+      "line": 56,
+      "content": "...",
+      "selection": {
+        "start": {
+          "line": 11,
+          "character": 1
+        },
+        "end": {
+          "line": 12,
+          "character": 1
+        }
+      }
+    },
+    {
+      "file": "src/components/GitHubHeader.js",
+      "title": "Fix using Copilot - 1",
+      "description": "## Try to add an 'About' link to the header\n\n### 1. Insert this code...\n\n```javascript\n        <a href=\"#\" className=\"Header-link\">\n          About\n        <a>\n        &nbsp; &nbsp; &nbsp;\n```\n>Note: this code is broken, we will use Copilot to fix it\n\n- You should see the IDE giving you an Error.\n\n### 2. Click Next ",
+      "line": 27,
+      "content": "..."
+    },
+    {
+      "file": "src/components/GitHubHeader.js",
+      "title": "Fix using Copilot - 2",
+      "description": "## Use Copilot to fix the Error\n\n### 1. We highlight the section of the code that we want Copilot to focus on...\n\n- line 24-26 (the previously inserted code)\n\n### 2. You should see a lightbulb, click that and select the`Fix using Copilot` option. Copilot should suggest a code fix for you!\n\n- **Optional:** If Copilot does not produce satisfying results, try using [Copilot Chat](command:workbench.panel.chatSidebar.copilot) and use the command `/fix` (using the highlighted code). The fix that Copilt chat suggests can be added by clicking \"Insert at Cursor\", which will replace the existing (bad) code.\n\n### 3. Save the file and continue...\n",
+      "line": 27,
+      "content": "...",
+      "selection": {
+        "start": {
+          "line": 24,
+          "character": 1
+        },
+        "end": {
+          "line": 26,
+          "character": 128
+        }
+      }
+    },
+    {
+      "file": "src/components/Calculator.js",
+      "title": "Explain using Copilot",
+      "description": "## Try using Copilot to `Explain the Code`\n\n### 1. we already highlighted a code section as an example (24-31)\n\n- you should see a little lightbulb, click that and select `Explain using Copilot`.\n- **Optional:** If Copilot does not produce satisfying results, try using [Copilot Chat](command:workbench.panel.chatSidebar.copilot) and use the command `/explain` (using the highlighted code). Copilot Chat will give a detailed description of the highlighted code.\n\n### This concludes the GitHub Copilot operations demo !",
+      "line": 33,
+      "selection": {
+        "start": {
+          "line": 24,
+          "character": 1
+        },
+        "end": {
+          "line": 31,
+          "character": 80
+        }
+      }
+    }
+  ]
+}

CODEOWNERS

@@ -0,0 +1 @@
+* @jefeish

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Jürgen Efeish
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,2 +1,105 @@
-# copilot-operations-demo
-training material
+![Static Badge](https://img.shields.io/badge/NodeJS-v19.7.0-blue) ![Static Badge](https://img.shields.io/badge/npm-v9.5.0-yellow) ![Static Badge](https://img.shields.io/badge/IDE-VS_Code-green) ![Static Badge](https://img.shields.io/badge/Extension-CodeTour-lightgrey) ![Static Badge](https://img.shields.io/badge/Extension-Copilot-lightgrey) ![Static Badge](https://img.shields.io/badge/Extension-Copilot_Chat-lightgrey)
+
+<img width="256px" src="docs/images/copilot-flavors.png">
+
+# Copilot Operations Demo
+
+A demonstration for utilizing GitHub Copilot within Visual Studio Code. This demo serves as a ***'train the trainer'*** guide, highlighting essential features of the Copilot extension for the benefit of class attendees.
+We employ the [CodeTour](https://marketplace.visualstudio.com/items?itemName=vsls-contrib.codetour) extension to guide you through an example of a React Calculator App. 
+
+## Prerequisites & Options
+
+Here are some options and requirements on how to run this demo.
+> **Note:** we are using VS-Code
+
+### Option 1: [GitHub Codespaces](https://github.com/features/codespaces)
+
+We recommend to run this via [GitHub Codespaces](https://github.com/features/codespaces). We provide a [Devcontainer](https://code.visualstudio.com/docs/devcontainers/containers) configuration that provides all the required IDE components (VS Code).
+
+### Option 2: VS Code + [Devcontainers](https://code.visualstudio.com/docs/devcontainers/containers)
+
+If you don't want to use Codespaces, just clone this Repo and use a local [Devcontainer](https://code.visualstudio.com/docs/devcontainers/containers) in your VS-Code IDE.
+
+### Option 3: VS Code + CodeTour extension (Local)
+
+If you want to run this Demo on your local platform (no Codespaces, no Devcontainers), please have look a at the required tools.
+
+**Here are some requirements you'll need:**
+- NodeJS: v19.7.0
+- NPM: v9.5.0
+- VSCode Extensions:
+  - [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
+  - [Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat)
+  - [CodeTour](https://marketplace.visualstudio.com/items?itemName=vsls-contrib.codetour)
+
+---
+
+## Introduction
+
+### :warning: Note: The primary objective of this demo is not to complete the calculator app; that aspect serves as a guide for walking you through the exercise steps. If you don't achieve the exact results by the end, that's perfectly fine! What matters most is that users gain insight into how to use Copilot and Copilot Chat effectively.
+
+### Overview
+
+Our goal is to **acquaint you with Copilot's functionalities** and demonstrate diverse ways to interact effectively with Copilot.
+
+Copilot and Copilot Chat, while built on the same backend technology, serve distinct roles within your integrated development environment (IDE). To put it simply, **Copilot functions as a coding assistant**, responding to your in-code context, while **Copilot Chat operates as your research assistant**, enabling chat-based communication for more interactive collaboration with Copilot.
+
+As this exercise leverages Copilot for code suggestions, please note that Copilot's responses may vary depending on the context. We welcome this variability, as it showcases the dynamic capabilities of Copilot.
+
+For effective interaction with Copilot, it's essential to keep in mind that **Copilot benefits from your guidance and supervision!**
+
+ To use copilot's own words,
+
+![copilot](docs/images/copilot32.png) 
+***"I’m powered by AI, so surprises and mistakes are possible. Make sure to verify any generated code or suggestions, and share feedback so that we can learn and improve."***
+
+---
+
+## Before you Start the Tour
+
+We provide you with several **Code Tour** exercises, to practice Copilot interactions. The first step is to setup/start the `calculator` app.
+
+---
+
+### Start the `Calculator` App
+
+```bash
+npm install
+npm start
+``` 
+
+- Open a browser window (http://localhost:3000), to see the App.
+
+> **Note:** At the start of the CodeTour your browser should not show the calculator, yet, adding this is part of the Demo. This is what you should see...
+
+![calculator](docs/images/calculator2.png)
+
+> **Note:** By the time the Demo is completed, the App should look like this...
+
+ ![calculator](docs/images/calculator1.png)
+
+---
+
+## Start the tour ...
+
+Here is a screenshot of what the CodeTour extension looks like in the IDE (VS-Code).
+
+![codetour](docs/images/codetour.png)
+
+By **clicking the 'play' button**, CodeTour will open a code Tab (App.js) showing the first CodeTour steps...
+
+![codetour-start](docs/images/codetour-start.png)
+---
+
+### Note: These are exercise items that should be addressed in the Demo
+
+|Copilot|Copilot Chat|
+|---|---|
+|Inline help|Say Hello|
+|Open the Completions Panel|Check its limits|
+|Fix using Copilot|Test its knowledge|
+|Explain using Copilot|Topics ‘/’|
+
+
+
+

docs/README.md

@@ -0,0 +1 @@
+# Documentation