Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions .devcontainer/devcontainer.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@
// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
{
"name": "Node.js",
"image": "mcr.microsoft.com/devcontainers/javascript-node:0-18",
"image": "mcr.microsoft.com/devcontainers/javascript-node:1-22-bookworm",
"features": {
"ghcr.io/devcontainers/features/github-cli:1": {},
"ghcr.io/devcontainers/features/docker-in-docker:2": {}
},
"customizations": {
"vscode": {
"extensions": [
"GitHub.copilot@1.226.0",
"GitHub.copilot-chat@0.20.2024090302"
"GitHub.copilot",
"GitHub.copilot-chat"
]
}
},
Expand Down
8 changes: 6 additions & 2 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,18 @@ module.exports = {
"browser": true,
"es2021": true,
"mocha": true,
"request": true
"node": true
},
"extends": "eslint:recommended",
"overrides": [
],
"globals": {
"request": "readonly",
"expect": "readonly"
},
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
"sourceType": "script"
},
"rules": {
}
Expand Down
18 changes: 10 additions & 8 deletions .github/workflows/node.js.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,28 @@ name: Node.js CI

on:
workflow_dispatch:
# push:
push:
branches: [main]
pull_request:
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [16.x, 18.x]
node-version: [20.x, 22.x]
steps:
- uses: actions/checkout@v3
- uses: actions/checkout@v4
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
- name: Install dependancies
run: npm install
cache: npm
- name: Install dependencies
run: npm ci
- name: Run tests
run: npm test
- name: Archive test results to GitHub Packages
uses: actions/upload-artifact@v3
- name: Archive test results
uses: actions/upload-artifact@v4
with:
name: ${{ github.ref_name }}-${{ github.run_id }}-${{ matrix.node-version }}-test-results
path: ./out/test-results.xml
14 changes: 8 additions & 6 deletions .instructions/1. setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ To complete the exercises, you will need an environment with GitHub Copilot, and
### 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
- an active Copilot Free plan
- an active Copilot Pro subscription
- an active Copilot Business or Enterprise license

you can sign up for a trial [here](https://github.com/github-copilot/signup).

Expand All @@ -26,7 +26,7 @@ you can sign up for a trial [here](https://github.com/github-copilot/signup).
### Installing a supported IDE on your machine

If you __DO NOT__ have one of the following:
- VSCode
- VS Code
- Visual Studio
- NeoVIM
- JetBrains IDE
Expand Down Expand Up @@ -61,7 +61,7 @@ You should now have the GitHub Copilot extension installed in your IDE of choice

### Cloning the exercise repo

1. Navigate to the [Copilot-node-calculator repo](https://github.com/copilot-workshops/copilot-node-calculator)
1. Navigate to your workshop copy of this repository.
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" />
Expand All @@ -84,7 +84,9 @@ or

### 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**'
1. Open the repository in GitHub.
2. Select **Code** > **Codespaces**.
3. Choose **Create codespace on main**.

<img width="601" alt="Open in a Codespace" src="../assets/Open in a Codespace.png">

Expand Down
34 changes: 17 additions & 17 deletions .instructions/2. core exercises.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,21 +14,21 @@ The following exercises will help you get started with GitHub Copilot. You must

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.
2. Enter ```npm install``` in the terminal window and press **ENTER** to install the required dependencies.

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.
3. Enter ```npm run dev``` 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.
4. In Codespaces, open the forwarded port for `3000` when prompted. If you are running locally, open `http://localhost:3000` in your browser.

<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.
6. Close the browser tab for now and return to VS Code.

7. Ensure your focus is in the terminal window and press ``` CTRL + C ``` to stop the application.

Expand All @@ -37,38 +37,38 @@ Let's start by running the application to learn what it does.
<details>
<summary>2. Adding features using GitHub Copilot</summary>

**TO DO** - You've been asked to add a new feature to the calculator application.
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
2. Scroll to the keypad button list inside `<div class="calculator-buttons">`.

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.
3. Add a new line after the `=` button and type the following two lines. You should see GitHub Copilot start to autocomplete the second line as you type. Press ```TAB``` to accept the completion.

``` <!-- add a button for a power (or exponential) function --> ```
``` <button class="btn" onClick="operationPressed('^')">^</button> ```
``` <!-- add a button for a percentage function --> ```
``` <button class="btn" onClick="operationPressed('%')">%</button> ```

Your finished snippet should match the following.
Your finished snippet should match the following. If not, ask Copilot Chat to revise the line by specifying the function name `operationPressed`.

<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
6. Locate the `operations` object.

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.
8. Start typing the following line and notice that GitHub Copilot should start to offer code completion half way through the word "percentage" as you're typing. Press **TAB** to accept the suggestion.

```'power': function(a, b) { return Math.pow(a, b) },```
```'percentage': function(a, b) { return (Number(a) / 100) * Number(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)
10. Locate the `switch (operation)` block in `calculate`.

11. Move your cursor to the end of the line 35 (to the right of ```break;``` and press **ENTER**.

Expand All @@ -84,9 +84,9 @@ Your completed addition should match the following.

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.
14. Enter ```npm run dev``` 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.
15. Test the new button by clicking 5, then `%`, then 10, and finally `=`. The expected result is `0.5`.

16. Close the browser window, return to the Terminal window in Codespaces and press ```CTRL+C``` to terminate the application.

Expand All @@ -97,7 +97,7 @@ Your completed addition should match the following.

---

>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.
> Copilot suggestions are probabilistic, so your generated code may differ from screenshots. If needed, ask Copilot Chat to explain or revise the generated snippet before accepting it.


#### What's next?
Expand Down
21 changes: 10 additions & 11 deletions .instructions/3. challenge exercises.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,21 +25,21 @@ Now you've had an opportunity to get started using GitHub Copilot, we have a num

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!
3. Scroll up in the terminal window to see what tests have been executed. Identify at least one behavior that is not yet covered enough (for example, invalid second operand formats, very small numbers, or keyboard input interactions).

4. Open the ```/test/arithmetic.test.js``` file.

5. Scroll down to the line with the comment ```TODO: Challenge #1``` (Around line 96)
5. Pick a test section where additional coverage would improve confidence.

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.
6. Add a comment to provide context to GitHub Copilot on what assistance you want. For example: ```// add tests for invalid operand2 formats``` 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.
8. Continue accepting suggestions line by line to see how many unit tests Copilot can help you write.

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.
**NOTE:** Copilot Chat can generate multi-line edits and larger test updates. Always review generated tests for correctness and readability before committing.

</details>

Expand Down Expand Up @@ -67,8 +67,9 @@ Now you've had an opportunity to get started using GitHub Copilot, we have a num
<summary>Challenge #5 - Fix errors</summary>

### Fix errors
1. Go to the `controller.js` file on line 19, and and a single comma. This will generate a compiler error.
2. Ask Copilot to help you fix the error
1. Intentionally introduce a small syntax error in `controller.js` (for example, a missing bracket).
2. Use Copilot Chat to diagnose and fix the error.
3. Re-run `npm run typecheck` and `npm test` to confirm the fix.
</details>

<details>
Expand Down Expand Up @@ -134,11 +135,9 @@ Now you've had an opportunity to get started using GitHub Copilot, we have a num

### Asking questions about the workspace

1. Open the GitHub Copilot chat window in the side bar.
1. Open the GitHub Copilot Chat view in VS Code.

2. In the chat window, type `@workspace` to mention the @workspace chat participant.

3. Ask the @workspace participant about this code project. For example, ask "what are the main routes in this application"
2. Ask a workspace-aware question about this project, for example: "What are the main routes in this application?"

</details>

Expand Down
14 changes: 7 additions & 7 deletions .instructions/4. additional resources.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@

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)
- [GitHub Copilot Documentation](https://docs.github.com/en/copilot) (Docs)
- [Getting started with GitHub Copilot in VS Code](https://docs.github.com/en/copilot/getting-started-with-github-copilot?tool=vscode) (Docs)
- [Prompting guide for GitHub Copilot](https://docs.github.com/en/copilot/using-github-copilot/prompt-engineering-for-github-copilot) (Docs)
- [GitHub Skills: Introduction to GitHub Copilot](https://skills.github.com/) (Interactive)

**Copilot X videos** (GitHub's vision for what Copilot might evolve to in the future.)
**Practice resources**

- [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)
- [Visual Studio Code Copilot overview](https://code.visualstudio.com/docs/copilot/overview) (Docs)
- [GitHub Copilot Trust Center](https://resources.github.com/copilot-trust-center/) (Reference)

4 changes: 2 additions & 2 deletions .instructions/workshop organisers.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ You can reuse this content to deliver your own GitHub Copilot workshops for your
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).
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, and how it can be used in day-to-day work. We recommend allowing time for this. Make sure you're familiar with current Copilot plans and licensing options in the [Copilot docs](https://docs.github.com/en/copilot/about-github-copilot/subscription-plans-for-github-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.
15 mins | Advanced Copilot workflows | Finish by demonstrating multi-file edits, test generation, and explanation/refactoring workflows in Copilot Chat.

#### 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.
Expand Down
Loading