Initial commit

.devcontainer/devcontainer.json

@@ -1,22 +1,33 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
 {
-  "name": "AWS playground",
-  "build": {
-    "dockerfile": "Dockerfile"
-  },
-  "features": {
-    "ghcr.io/devcontainers/features/github-cli:1": {},
-    "ghcr.io/devcontainers/features/sshd:1": {
-      "version": "latest"
-    },
-    "ghcr.io/devcontainers/features/aws-cli:1": {}
-  },
-  "settings": {
-    "extensions.ignoreRecommendations": true,
-    "workbench.startupEditor": "none",
-    "workbench.colorTheme": "Visual Studio Dark",
-    "workbench.colorCustomizations": {},
-    "workbench.welcomePage.walkthroughs.openOnInstall": false,
-    "workbench.welcomePage.experimental.videoTutorials": "off",
-    "github.codespaces.defaultExtensions": []
-  }
+	"name": "Node.js",
+	"image": "mcr.microsoft.com/devcontainers/javascript-node:0-18",
+	"features": {
+		"ghcr.io/devcontainers/features/github-cli:1": {},
+		"ghcr.io/devcontainers/features/docker-in-docker:2": {}
+	},
+	"customizations": {
+		"vscode": {
+			"extensions": [
+				"GitHub.copilot",
+				"GitHub.copilot-labs"
+			]
+		}
+	},
+
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	"forwardPorts": [3000],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	"postCreateCommand": "npm install"
+
+	// Configure tool-specific properties.
+	// "customizations": {},
+
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
 }

.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "mocha": true,
+        "request": true
+    },
+    "extends": "eslint:recommended",
+    "overrides": [
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "rules": {
+    }
+}

.gitignore

@@ -1 +1,5 @@
-/.idea
+.npm
+node_modules/
+out/
+.nyc_output
+coverage/

.instructions/1. setup.md

@@ -0,0 +1,95 @@
+## Environment setup
+
+To complete the exercises, you will need an environment with GitHub Copilot, and a supported IDE such as VS Code. You can use your local computer and install these tools, or you may choose to use Codespaces.
+
+
+**OPTION A - I want to setup my local machine for the exercises**
+<details>
+
+<summary>1. Ensuring you have access to GitHub Copilot</summary>
+
+### Accessing GitHub Copilot
+
+If you __DO NOT__ have one of the following:
+- an active Copilot for Individuals trial
+- an active Copilot for Individuals subscription
+- an active Copilot for Business licence
+
+you can sign up for a trial [here](https://github.com/github-copilot/signup).
+
+</details>
+
+<details>
+
+<summary>2. Installing a supported IDE on your local machine</summary>
+
+### Installing a supported IDE on your machine
+
+If you __DO NOT__ have one of the following:
+- VSCode
+- Visual Studio
+- NeoVIM
+- JetBrains IDE
+
+on your local machine, you will need to install one of these IDEs to use GitHub Copilot and complete the exercises.
+
+If you have no preference, we suggest you install VSCode. You can download it [here](https://code.visualstudio.com/download).
+
+</details>
+
+<details>
+
+<summary>3. Installing the GitHub Copilot extension</summary>
+
+### Installing the GitHub Copilot extension
+
+GitHub Copilot is a client-side extension you install into your supported developer IDE. The extension is available for VSCode, Visual Studio, NeoVIM and JetBrains IDEs.
+
+Click the appropriate IDE link below for instructions to install the extension. As part of this you will need to log in using your GitHub account to ensure you are a licensed user of GitHub Copilot.
+- [VSCode](https://docs.github.com/en/copilot/getting-started-with-github-copilot?tool=vscode#installing-the-visual-studio-code-extension)
+- [Visual Studio](https://docs.github.com/en/copilot/getting-started-with-github-copilot?tool=visualstudio#installing-the-visual-studio-extension)
+- [NeoVIM](https://docs.github.com/en/copilot/getting-started-with-github-copilot?tool=neovim#installing-the-neovim-extension-on-macos)
+- [JetBrains IDE](https://docs.github.com/en/copilot/getting-started-with-github-copilot?tool=jetbrains#installing-the-github-copilot-extension-in-your-jetbrains-ide)
+
+You should now have the GitHub Copilot extension installed in your IDE of choice.
+
+</details>
+
+<details>
+
+<summary>4. Cloning the exercise repo</summary>
+
+### Cloning the exercise repo
+
+1. Navigate to the [Copilot-node-calculator repo](https://github.com/copilot-workshops/copilot-node-calculator) 
+2. Clone this repo to your local machine using your preferred method. You can find options by clicking the Code drop down and clicking on the local tab.
+
+<img alt="URL for cloning is https://github.com/copilot-workshops/copilot-node-calculator.git" width="400" src="../assets/Cloning the repo.png" />
+
+</details>
+
+#### What's next?
+You're now ready to start the [core exercises](<./2. core exercises.md>)
+
+
+or
+
+**OPTION B - I want to use GitHub Codespaces**
+
+>**NOTE**: GitHub Codespaces provides a cloud hosted development environment. This is not a free service but all GitHub accounts are entitled to up to 60 hours (2-core machine) per month of free usage. You can find out more about GitHub Codespaces [here](https://github.com/features/codespaces). You can also check your remaining balance [here](https://github.com/settings/billing). Choosing this option means you won't need to install anything on your local machine.
+
+<details>
+
+<summary>1. Launching Codespaces for the exercises</summary>
+
+### Launching Codespaces for the exercises
+
+1. For our exercises, you'll get started by navigating to the appropriate repo and choosing '**Use this template**', and '**Open in a codespace**'
+
+<img width="601" alt="Open in a Codespace" src="../assets/Open in a Codespace.png">
+
+</details>
+
+#### What's next?
+
+You're now ready to start the [core exercises](<./2. core exercises.md>)

.instructions/2. core exercises.md

@@ -0,0 +1,104 @@
+## Workshop exercises
+
+### Core exercise
+
+The following exercises will help you get started with GitHub Copilot. You must have completed the [setup instructions](<./1. setup.md>) before starting these steps.
+
+
+### Step by step instructions
+
+<details>
+<summary>1. Getting the application running</summary>
+
+**Starting Point**: You should have the repo open in VSCode (or your supported IDE)
+
+1. Press ```CTRL + ` ``` to open the terminal window in VS Code if it is not already open.
+
+2. Enter ```npm install``` in the terminal window and press **ENTER** to install the required dependencies. TIP: Ignore any issues displayed after you run this command.
+
+Let's start by running the application to learn what it does.
+
+3. Enter ```npm start``` in the terminal window and press **ENTER** to run the application.
+
+4. In the pop-up window that appears in the bottom right corner of the Codespace window, click the **Open in Browser** button. This will securely map port 3000 from the Codespace environment (if you're using Codespaces) to your local browser so you can see the running calculator application.
+
+<img width="460" alt="Open in Browser" src="../assets/open%20in%20browser.png">
+
+5. Do some simple calculations to show that the calculator is working as expected.
+
+<img width="460" alt="The Node Calculator" src="../assets/calculator.png">
+
+6. Close the browser window for now and return to the Codespace window.
+
+7. Ensure your focus is in the terminal window and press ``` CTRL + C ``` to stop the application.
+
+</details>
+
+<details>
+<summary>2. Adding features using GitHub Copilot</summary>
+
+**TO DO** -  You've been asked to add a new feature to the calculator application.
+
+### Adding the buttons to the calculator UI
+
+1. Open the ```public/index.html``` file in the editor window.
+
+2. Scroll down to where you see the ```<!-- TODO: Buttons -->``` comment
+
+3. Add a new line below this comment and type the following two lines. You should see GitHub Copilot start to autocomplete the second line as you type. When you see this, just press ```TAB``` to accept the completion.
+
+``` <!-- add a button for a power (or exponential) function --> ```
+``` <button class="btn" onClick="operationPressed('^')">^</button> ```
+
+Your finished snippet should match the following.
+
+<img width="538" alt="GitHub Copilot suggestions" src="../assets/index-html.png">
+
+### Adding the logic for the new features
+
+5. Open the ```api/controller.js``` file in the editor window.
+
+6. Scroll down to where you see the ```// TODO: Add operator``` comment
+
+7. Press **ENTER** at the end of the line that defines the divide function.
+
+8. Start typing the following line and notice that GitHub Copilot should start to offer code completion half way through the word "power" as you're typing. Press **TAB** to accept the suggestion.
+
+```'power':    function(a, b) { return Math.pow(a, b) },```
+
+9. Open the ```public/client.js``` file in the editor window.
+
+10. Scroll down to where you see the ```// TODO: Add operator``` comment (Line 22)
+
+11. Move your cursor to the end of the line 35 (to the right of ```break;``` and press **ENTER**.
+
+GitHub Copilot should display ghost text suggesting the code shown in the following screenshot. Press **TAB** to accept the suggestion.
+
+<img width="353" alt="GitHub Copilot suggestions" src="../assets/case-suggestion.png">
+
+12. Press **ENTER** at the end of the line, then accept the next two lines Copilot suggests.
+
+Your completed addition should match the following.
+
+<img width="376" alt="GitHub Copilot suggestions" src="../assets/Add-operator-completed.png">
+
+13. Press ```CTRL + ` ``` to open the terminal window in VS Code.
+
+14. Enter ```npm start``` in the terminal window and press **ENTER** to run the application.
+
+15. You should test the new button by clicking 3, then the "^" (power) button, then click 2. Click "=" and the result should be 9.
+
+16. Close the browser window, return to the Terminal window in Codespaces and press ```CTRL+C``` to terminate the application.
+
+**Success**, you have enhanced the calculator application using GitHub Copilot!
+
+</details>
+
+
+---
+
+>Hopefully your calculator is working! Remember, GitHub Copilot is probabilistic so you may not get the exact same code suggestions as we did. If you're not happy with the suggestions, you can always press **CTRL + Z** to undo the changes and try again.
+
+
+#### What's next?
+You're now ready to start the [challenge exercises](<./3. challenge exercises.md>) to see how you can leverage the power of GitHub Copilot to solve a number of challenges yourself.

.instructions/3. challenge exercises.md

@@ -0,0 +1,56 @@
+# Challenge Exercises
+
+Now you've had an opportunity to get started using GitHub Copilot, we have a number of challenges for you to attempt. Remember the goal here is not to test your programming abilities but rather, see how you can use GitHub Copilot to help you complete these tasks. Even if you're not a developer, you may be surprised how Copilot can help you be successful with these challenge.
+
+
+<details>
+<summary>Challenge #1 - Adding Unit Tests</summary>
+
+### Adding Unit Tests
+
+1. Press ```CTRL + ` ``` to open the terminal window in VS Code if it is not already open.
+
+2. Enter ```npm test``` in the terminal window and press **ENTER** to execute the existing unit tests for the Calculator application.
+
+3. Scroll up in the terminal window to see what tests have been executed. You should see tests for Arithmetic validation, Addition, Multiplication and Division. There are no tests for the subtraction function!
+
+4. Open the ```/test/arithmetic.test.js``` file.
+
+5. Scroll down to the line with the comment ```TODO: Challenge #1``` (Around line 96)
+
+6. On the line following the comment, add a new comment to provide context to GitHub Copilot on what you want assistance to do. Try adding this comment ```// add tests for subtraction``` and press ```ENTER``` to generate a suggestion.
+
+7. Accept the suggested line if it looks right by pressing ```TAB``` then ```ENTER```.
+
+8. Continue accepting suggestions line by line to see how many unit tests you can have Copiloit assist you in writing.
+
+9. Once you're happy with a few unit tests, save the file and return to the terminal window. Enter ```npm test``` and press **ENTER** to execute the unit tests again.
+
+**NOTE:** The advanced features currently available in GitHub CopilotX Chat, provide far more sophisticated assistance in writing unit tests, including the ability to write complete test suites for you. At the time of creating this exercise, Copilot Chat was only available as a pre-release experiment.
+
+</details>
+
+<details>
+<summary>Challenge #2 - Adding Unit Tests for the power/exponential function</summary>
+
+### Adding Unit Tests for the power/exponential function
+
+1. See if you can now add additional unit tests for the power/exponential function you created in the core exercise.
+
+</details>
+
+<details>
+<summary>Challenge #3 - Adding a new function</summary>
+
+### Adding a new function
+
+1. See if you can now add an entirely new function to the calculator using GitHub Copilot to assist you. The previous exercises will help you locate where you want to add code. 
+
+2. Once your function is working, consider adding the necessary unit tests to confirm it's functionality.
+
+</details>
+
+
+#### What's next?
+
+Once you've completed the challenges, you may like to review the [additional resources](<./4. additional resources.md>)

.instructions/4. additional resources.md

@@ -0,0 +1,14 @@
+# Additional resources
+
+To learn more about GitHub Copilot, here are a few resources you might be interested in reviewing.
+
+- [Setup GitHub Copilot for Business](https://www.youtube.com/watch?v=MOM0Fj5V0f0) (YouTube)
+- [Benefits of Copilot for Business](https://www.youtube.com/watch?v=iWutvppVwjw) (YouTube)
+- [GitHub Copilot tips and tricks](https://www.youtube.com/watch?v=1qs6QKk0DVc) (YouTube)
+
+**Copilot X videos** (GitHub's vision for what Copilot might evolve to in the future.)
+
+- [The Download: Everything You Need to Know About GitHub Copilot X, Generative AI Roundup and more!](https://www.youtube.com/watch?v=wNwa4GKryXI0) (YouTube)
+- [Getting started with Chat](https://www.youtube.com/watch?v=3surPGP7_4o) (YouTube) 
+- [GitHub Copilot: Using Voice to Code](https://www.youtube.com/watch?v=Bk7UdqoZUDk) (YouTube)
+

.instructions/workshop organisers.md

@@ -0,0 +1,18 @@
+# Workshop Organisers
+
+You can reuse this content to deliver your own GitHub Copilot workshops for your colleagues, partners or customers. This page contains information to help you deliver this as a workshop.
+
+
+Duration | Activity | Notes
+--- | --- | ---
+15 mins | Copilot presentation | Deliver a presentation on the benefits of Copilot and how it works
+30 mins | Open Q&A | In delivering many workshops to date, we've found attendees always have many questions about Copilot including how it works, what languages are supported, how it can be used in their day-to-day work, etc. We recommend you allow time for this. Make sure you're familiar with the [differences](https://github.com/features/copilot#pricing) between Copilot for Business and Copilot for Individuals. You should also review and familiarise yourself with the Copilot FAQ section at the bottom of [this page](https://github.com/features/copilot).
+60 mins | Workshop | 15 minute instructor walkthrough of [core exercise](<./2. core exercises.md>), followed by 45 minutes for the [challenge exercises](<./3. challenge exercises.md>). You may even have time to allow some of the participants to share how they solved the challenge exercises.
+15 mins | A look at Copilot X | Finish off the workshop by demonstrating [Copilot X](https://gh.io/copilotx) - GitHub's vision for the future of Copilot. This is a great way to end the workshop and leave attendees excited about the future of Copilot.
+
+#### Post event survey
+You should also provide a short survey at the end of the workshop to help assess the impact of the workshop and allow you to iterate and learn for future workshop deliveries. If you wish, you could copy and edit this [sample survey](https://forms.gle/gq95Y18S4K7M9Jst8) using Google Forms.
+
+#### Need help running a workshop?
+
+GitHub has experienced solutions engineers that may be able to help you deliver a workshop. To learn more, please email [email protected]

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+    "editor.fontSize": 14,
+    "terminal.integrated.fontSize": 14
+}