Skip to content

Commit c300fef

Browse files
committed
Initial commit
1 parent 640eeb7 commit c300fef

35 files changed

+8738
-2
lines changed

.devcontainer/devcontainer.json

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
2+
// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
3+
{
4+
"name": "Node.js",
5+
"image": "mcr.microsoft.com/devcontainers/javascript-node:0-18",
6+
"features": {
7+
"ghcr.io/devcontainers/features/github-cli:1": {},
8+
"ghcr.io/devcontainers/features/docker-in-docker:2": {}
9+
},
10+
"customizations": {
11+
"vscode": {
12+
"extensions": [
13+
"GitHub.copilot",
14+
"GitHub.copilot-labs"
15+
]
16+
}
17+
},
18+
19+
// Features to add to the dev container. More info: https://containers.dev/features.
20+
// "features": {},
21+
22+
// Use 'forwardPorts' to make a list of ports inside the container available locally.
23+
"forwardPorts": [3000],
24+
25+
// Use 'postCreateCommand' to run commands after the container is created.
26+
"postCreateCommand": "npm install"
27+
28+
// Configure tool-specific properties.
29+
// "customizations": {},
30+
31+
// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
32+
// "remoteUser": "root"
33+
}

.eslintrc.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
module.exports = {
2+
"env": {
3+
"browser": true,
4+
"es2021": true,
5+
"mocha": true,
6+
"request": true
7+
},
8+
"extends": "eslint:recommended",
9+
"overrides": [
10+
],
11+
"parserOptions": {
12+
"ecmaVersion": "latest",
13+
"sourceType": "module"
14+
},
15+
"rules": {
16+
}
17+
}

.github/workflows/node.js.yml

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
name: Node.js CI
2+
3+
on:
4+
workflow_dispatch:
5+
# push:
6+
pull_request:
7+
jobs:
8+
build:
9+
runs-on: ubuntu-latest
10+
strategy:
11+
matrix:
12+
node-version: [16.x, 18.x]
13+
steps:
14+
- uses: actions/checkout@v3
15+
- name: Use Node.js ${{ matrix.node-version }}
16+
uses: actions/setup-node@v3
17+
with:
18+
node-version: ${{ matrix.node-version }}
19+
- name: Install dependancies
20+
run: npm install
21+
- name: Run tests
22+
run: npm test
23+
- name: Archive test results to GitHub Packages
24+
uses: actions/upload-artifact@v3
25+
with:
26+
name: ${{ github.ref_name }}-${{ github.run_id }}-${{ matrix.node-version }}-test-results
27+
path: ./out/test-results.xml

.gitignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.npm
2+
node_modules/
3+
out/
4+
.nyc_output
5+
coverage/

.instructions/1. setup.md

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
## Environment setup
2+
3+
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.
4+
5+
6+
**OPTION A - I want to setup my local machine for the exercises**
7+
<details>
8+
9+
<summary>1. Ensuring you have access to GitHub Copilot</summary>
10+
11+
### Accessing GitHub Copilot
12+
13+
If you __DO NOT__ have one of the following:
14+
- an active Copilot for Individuals trial
15+
- an active Copilot for Individuals subscription
16+
- an active Copilot for Business licence
17+
18+
you can sign up for a trial [here](https://github.com/github-copilot/signup).
19+
20+
</details>
21+
22+
<details>
23+
24+
<summary>2. Installing a supported IDE on your local machine</summary>
25+
26+
### Installing a supported IDE on your machine
27+
28+
If you __DO NOT__ have one of the following:
29+
- VSCode
30+
- Visual Studio
31+
- NeoVIM
32+
- JetBrains IDE
33+
34+
on your local machine, you will need to install one of these IDEs to use GitHub Copilot and complete the exercises.
35+
36+
If you have no preference, we suggest you install VSCode. You can download it [here](https://code.visualstudio.com/download).
37+
38+
</details>
39+
40+
<details>
41+
42+
<summary>3. Installing the GitHub Copilot extension</summary>
43+
44+
### Installing the GitHub Copilot extension
45+
46+
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.
47+
48+
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.
49+
- [VSCode](https://docs.github.com/en/copilot/getting-started-with-github-copilot?tool=vscode#installing-the-visual-studio-code-extension)
50+
- [Visual Studio](https://docs.github.com/en/copilot/getting-started-with-github-copilot?tool=visualstudio#installing-the-visual-studio-extension)
51+
- [NeoVIM](https://docs.github.com/en/copilot/getting-started-with-github-copilot?tool=neovim#installing-the-neovim-extension-on-macos)
52+
- [JetBrains IDE](https://docs.github.com/en/copilot/getting-started-with-github-copilot?tool=jetbrains#installing-the-github-copilot-extension-in-your-jetbrains-ide)
53+
54+
You should now have the GitHub Copilot extension installed in your IDE of choice.
55+
56+
</details>
57+
58+
<details>
59+
60+
<summary>4. Cloning the exercise repo</summary>
61+
62+
### Cloning the exercise repo
63+
64+
1. Navigate to the [Copilot-node-calculator repo](https://github.com/copilot-workshops/copilot-node-calculator)
65+
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.
66+
67+
<img alt="URL for cloning is https://github.com/copilot-workshops/copilot-node-calculator.git" width="400" src="../assets/Cloning the repo.png" />
68+
69+
</details>
70+
71+
#### What's next?
72+
You're now ready to start the [core exercises](<./2. core exercises.md>)
73+
74+
75+
or
76+
77+
**OPTION B - I want to use GitHub Codespaces**
78+
79+
>**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.
80+
81+
<details>
82+
83+
<summary>1. Launching Codespaces for the exercises</summary>
84+
85+
### Launching Codespaces for the exercises
86+
87+
1. For our exercises, you'll get started by navigating to the appropriate repo and choosing '**Use this template**', and '**Open in a codespace**'
88+
89+
<img width="601" alt="Open in a Codespace" src="../assets/Open in a Codespace.png">
90+
91+
</details>
92+
93+
#### What's next?
94+
95+
You're now ready to start the [core exercises](<./2. core exercises.md>)

.instructions/2. core exercises.md

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
## Workshop exercises
2+
3+
### Core exercise
4+
5+
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.
6+
7+
8+
### Step by step instructions
9+
10+
<details>
11+
<summary>1. Getting the application running</summary>
12+
13+
**Starting Point**: You should have the repo open in VSCode (or your supported IDE)
14+
15+
1. Press ```CTRL + ` ``` to open the terminal window in VS Code if it is not already open.
16+
17+
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.
18+
19+
Let's start by running the application to learn what it does.
20+
21+
3. Enter ```npm start``` in the terminal window and press **ENTER** to run the application.
22+
23+
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.
24+
25+
<img width="460" alt="Open in Browser" src="../assets/open%20in%20browser.png">
26+
27+
5. Do some simple calculations to show that the calculator is working as expected.
28+
29+
<img width="460" alt="The Node Calculator" src="../assets/calculator.png">
30+
31+
6. Close the browser window for now and return to the Codespace window.
32+
33+
7. Ensure your focus is in the terminal window and press ``` CTRL + C ``` to stop the application.
34+
35+
</details>
36+
37+
<details>
38+
<summary>2. Adding features using GitHub Copilot</summary>
39+
40+
**TO DO** - You've been asked to add a new feature to the calculator application.
41+
42+
### Adding the buttons to the calculator UI
43+
44+
1. Open the ```public/index.html``` file in the editor window.
45+
46+
2. Scroll down to where you see the ```<!-- TODO: Buttons -->``` comment
47+
48+
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.
49+
50+
``` <!-- add a button for a power (or exponential) function --> ```
51+
``` <button class="btn" onClick="operationPressed('^')">^</button> ```
52+
53+
Your finished snippet should match the following.
54+
55+
<img width="538" alt="GitHub Copilot suggestions" src="../assets/index-html.png">
56+
57+
### Adding the logic for the new features
58+
59+
5. Open the ```api/controller.js``` file in the editor window.
60+
61+
6. Scroll down to where you see the ```<!-- TODO: Add operator -->``` comment
62+
63+
7. Press **ENTER** at the end of the line that defines the divide function.
64+
65+
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.
66+
67+
```'power': function(a, b) { return Math.pow(a, b) },```
68+
69+
9. Open the ```public/client.js``` file in the editor window.
70+
71+
10. Scroll down to where you see the ```// TODO: Add operator -->``` comment (Line 22)
72+
73+
11. Move your cursor to the end of the line 35 (to the right of ```break;``` and press **ENTER**.
74+
75+
GitHub Copilot should display ghost text suggesting the code shown in the following screenshot. Press **TAB** to accept the suggestion.
76+
77+
<img width="353" alt="GitHub Copilot suggestions" src="../assets/case-suggestion.png">
78+
79+
12. Press **ENTER** at the end of the line, then accept the next two lines Copilot suggests.
80+
81+
Your completed addition should match the following.
82+
83+
<img width="376" alt="GitHub Copilot suggestions" src="../assets/Add-operator-completed.png">
84+
85+
13. Press ```CTRL + ` ``` to open the terminal window in VS Code.
86+
87+
14. Enter ```npm start``` in the terminal window and press **ENTER** to run the application.
88+
89+
15. You should test the new button by clicking 3, then the "^" (power) button, then click 2. Click "=" and the result should be 9.
90+
91+
16. Close the browser window, return to the Terminal window in Codespaces and press ```CTRL+C``` to terminate the application.
92+
93+
**Success**, you have enhanced the calculator application using GitHub Copilot!
94+
95+
</details>
96+
97+
98+
---
99+
100+
>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.
101+
102+
103+
#### What's next?
104+
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.
Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
# Challenge Exercises
2+
3+
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.
4+
5+
6+
<details>
7+
<summary>Challenge #1 - Adding Unit Tests</summary>
8+
9+
### Adding Unit Tests
10+
11+
1. Press ```CTRL + ` ``` to open the terminal window in VS Code if it is not already open.
12+
13+
2. Enter ```npm test``` in the terminal window and press **ENTER** to execute the existing unit tests for the Calculator application.
14+
15+
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!
16+
17+
4. Open the ```/test/arithmetic.test.js``` file.
18+
19+
5. Scroll down to the line with the comment ```TODO: Challenge #1``` (Around line 96)
20+
21+
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.
22+
23+
7. Accept the suggested line if it looks right by pressing ```TAB``` then ```ENTER```.
24+
25+
8. Continue accepting suggestions line by line to see how many unit tests you can have Copiloit assist you in writing.
26+
27+
9. Onc eyou'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.
28+
29+
**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.
30+
31+
</details>
32+
33+
<details>
34+
<summary>Challenge #2 - Adding Unit Tests for the power/exponential function</summary>
35+
36+
### Adding Unit Tests for the power/exponential function
37+
38+
1. See if you can now add additional unit tests for the power/exponential function you created in the core exercise.
39+
40+
</details>
41+
42+
<details>
43+
<summary>Challenge #3 - Adding a new function</summary>
44+
45+
### Adding a new function
46+
47+
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.
48+
49+
2. Once your function is working, consider adding the necessary unit tests to confirm it's functionality.
50+
51+
</details>
52+
53+
54+
#### What's next?
55+
56+
Once you've completed the challenges, you may like to review the [additional resources](<./4. additional resources.md>)
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Additional resources
2+
3+
To learn more about GitHub Copilot, here are a few resources you might be interested in reviewing.
4+
5+
- [Setup GitHub Copilot for Business](https://www.youtube.com/watch?v=MOM0Fj5V0f0) (YouTube)
6+
- [Benefits of Copilot for Business](https://www.youtube.com/watch?v=iWutvppVwjw) (YouTube)
7+
- [GitHub Copilot tips and tricks](https://www.youtube.com/watch?v=1qs6QKk0DVc) (YouTube)
8+
9+
**Copilot X videos** (GitHub's vision for what Copilot might evolve to in the future.)
10+
11+
- [The Download: Everything You Need to Know About GitHub Copilot X, Generative AI Roundup and more!](https://www.youtube.com/watch?v=wNwa4GKryXI0) (YouTube)
12+
- [Getting started with Chat](https://www.youtube.com/watch?v=3surPGP7_4o) (YouTube)
13+
- [GitHub Copilot: Using Voice to Code](https://www.youtube.com/watch?v=Bk7UdqoZUDk) (YouTube)
14+
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# Workshop Organisers
2+
3+
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.
4+
5+
6+
Duration | Activity | Notes
7+
--- | --- | ---
8+
15 mins | Copilot presentation | Deliver a presentation on the benefits of Copilot and how it works
9+
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).
10+
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.
11+
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.
12+
13+
#### Post event survey
14+
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.
15+
16+
#### Need help running a workshop?
17+
18+
GitHub has experienced solutions engineers that may be able to help you deliver a workshop. To learn more, please email info@copilot-workshops.com

.vscode/settings.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"editor.fontSize": 14,
3+
"terminal.integrated.fontSize": 14
4+
}

0 commit comments

Comments
 (0)