-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
19 changed files
with
3,980 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,163 @@ | ||
# Copilot Calculator Demo | ||
|
||
A small demo project to exercise the basic capabilities of Copilot in ***Visual Studio Code***. In this demo you should create a Node based calculator Module that you can access from the command-line via an `index.js` entry-point. We use copilot/chat to help us with the content creation of the `calculator.js`, `index,js` and some Node packaging settings. Enjoy ! | ||
|
||
>Note: The demo/workshop uses **Copilot** & **Copilot Chat** features to complete the solution. | ||
## Pre-Requisits | ||
|
||
- Make sure to have... | ||
|
||
<img width="50%" src="images/copilot-and-chat.png"> | ||
|
||
...correctly installed in Visual Studio Code | ||
|
||
---- | ||
|
||
- create a project folder (eg.: `myCalulator/`) | ||
- initialize the npm project (create package.json) | ||
- create an `index.js` file | ||
- create a `calculator.js` file | ||
|
||
``` | ||
mkdir myCalculator | ||
cd myCalculator | ||
npm init | ||
touch index.js | ||
touch calculator.js | ||
mkdir test | ||
touch test/calculator.test.js | ||
``` | ||
|
||
--- | ||
|
||
## 1. Write the `calculator.js` file | ||
|
||
### 1.1 Open the `calculator.js` file and add this description. | ||
|
||
```node | ||
/** | ||
* @desciption: A claculator module that can add, subtract, multiply, modulo, | ||
* exponent and divide by taking in two numbers and an operator. | ||
* It throws an error if the operator is invalid or if the second | ||
* number is zero and the operator is division. | ||
* | ||
* @param {number} num1 | ||
* @param {number} num2 | ||
* @param {string} operator | ||
* | ||
* @returns {number} result of the operation | ||
*/ | ||
``` | ||
|
||
--- | ||
|
||
### 1.2 Open the Copilot code suggestion tab | ||
|
||
<img width="48px" src="images/copilot.png"> | ||
|
||
 | ||
 | ||
|
||
Choose any of the suggested code samples and press `Accept Solution`, this will copy the code to the file. | ||
|
||
--- | ||
|
||
### 1.3 Last step, have a look at the generated code. | ||
|
||
--- | ||
|
||
|
||
## 2. Write the `index.js` file | ||
|
||
### 2.1 Open the `index.js` file and add the description | ||
|
||
```node | ||
/** | ||
* @description This is a simple calculator that takes in two numbers and an operator | ||
* and returns the result of the calculation. | ||
* Usage: | ||
* node index2.js 1 + 2 | ||
* node index2.js 1 - 2 | ||
* node index2.js 1 * 2 | ||
* node index2.js 1 / 2 | ||
* | ||
* Note: The * and ^ operators need to be escaped with a backslash, to prevent the shell from interpreting them. | ||
* Example: node index2.js 1 \* 2 | ||
* | ||
*/ | ||
``` | ||
|
||
### 2.2 Ask Copilot Chat for help | ||
<img width="48px" src="images/copilot-chat.png"> | ||
|
||
``` | ||
give me an example of an index file that reads the input from the commandline and uses the calculator module. | ||
``` | ||
|
||
Copy the suggested solution into the `index.js` file. | ||
|
||
--- | ||
|
||
## 3. Run the program | ||
|
||
```node | ||
node index.js | ||
``` | ||
or | ||
```node | ||
node index.js 2 + 3 | ||
``` | ||
|
||
### 3.1 Fix any errors that come up | ||
|
||
Type any error in to Copilot-Chat and ask for a fix. | ||
|
||
<img width="48px" src="images/copilot-chat.png"> | ||
|
||
``` | ||
... | ||
``` | ||
|
||
--- | ||
|
||
## 4. Test the solution | ||
|
||
| This section is open to your imagination, try to "challange" the code | ||
|
||
... | ||
|
||
--- | ||
|
||
## 5. Create unit tests | ||
|
||
### 5.1 Open the `test/calculator.test.js` file | ||
|
||
### 5.2 Ask Copilot Chat for help | ||
|
||
<img width="48px" src="images/copilot-chat.png"> | ||
|
||
``` | ||
give me a sample unit test for the calculator module. | ||
``` | ||
|
||
### 5.3 Copy the suggested code to the file | ||
|
||
### 5.4 Ask Copilot Chat for help | ||
|
||
<img width="48px" src="images/copilot-chat.png"> | ||
|
||
``` | ||
how can I invoke the unit test ? | ||
``` | ||
|
||
|
||
<img width="48px" src="images/copilot-chat.png"> | ||
|
||
``` | ||
how can I create jest json output ? | ||
``` | ||
|
||
## "Extra Credit" | ||
|
||
- Use the Unit test results to create a README [Badge](https://shields.io) |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,130 @@ | ||
# Logs | ||
logs | ||
*.log | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
lerna-debug.log* | ||
.pnpm-debug.log* | ||
|
||
# Diagnostic reports (https://nodejs.org/api/report.html) | ||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json | ||
|
||
# Runtime data | ||
pids | ||
*.pid | ||
*.seed | ||
*.pid.lock | ||
|
||
# Directory for instrumented libs generated by jscoverage/JSCover | ||
lib-cov | ||
|
||
# Coverage directory used by tools like istanbul | ||
coverage | ||
*.lcov | ||
|
||
# nyc test coverage | ||
.nyc_output | ||
|
||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) | ||
.grunt | ||
|
||
# Bower dependency directory (https://bower.io/) | ||
bower_components | ||
|
||
# node-waf configuration | ||
.lock-wscript | ||
|
||
# Compiled binary addons (https://nodejs.org/api/addons.html) | ||
build/Release | ||
|
||
# Dependency directories | ||
node_modules/ | ||
jspm_packages/ | ||
|
||
# Snowpack dependency directory (https://snowpack.dev/) | ||
web_modules/ | ||
|
||
# TypeScript cache | ||
*.tsbuildinfo | ||
|
||
# Optional npm cache directory | ||
.npm | ||
|
||
# Optional eslint cache | ||
.eslintcache | ||
|
||
# Optional stylelint cache | ||
.stylelintcache | ||
|
||
# Microbundle cache | ||
.rpt2_cache/ | ||
.rts2_cache_cjs/ | ||
.rts2_cache_es/ | ||
.rts2_cache_umd/ | ||
|
||
# Optional REPL history | ||
.node_repl_history | ||
|
||
# Output of 'npm pack' | ||
*.tgz | ||
|
||
# Yarn Integrity file | ||
.yarn-integrity | ||
|
||
# dotenv environment variable files | ||
.env | ||
.env.development.local | ||
.env.test.local | ||
.env.production.local | ||
.env.local | ||
|
||
# parcel-bundler cache (https://parceljs.org/) | ||
.cache | ||
.parcel-cache | ||
|
||
# Next.js build output | ||
.next | ||
out | ||
|
||
# Nuxt.js build / generate output | ||
.nuxt | ||
dist | ||
|
||
# Gatsby files | ||
.cache/ | ||
# Comment in the public line in if your project uses Gatsby and not Next.js | ||
# https://nextjs.org/blog/next-9-1#public-directory-support | ||
# public | ||
|
||
# vuepress build output | ||
.vuepress/dist | ||
|
||
# vuepress v2.x temp and cache directory | ||
.temp | ||
.cache | ||
|
||
# Docusaurus cache and generated files | ||
.docusaurus | ||
|
||
# Serverless directories | ||
.serverless/ | ||
|
||
# FuseBox cache | ||
.fusebox/ | ||
|
||
# DynamoDB Local files | ||
.dynamodb/ | ||
|
||
# TernJS port file | ||
.tern-port | ||
|
||
# Stores VSCode versions used for testing VSCode extensions | ||
.vscode-test | ||
|
||
# yarn v2 | ||
.yarn/cache | ||
.yarn/unplugged | ||
.yarn/build-state.yml | ||
.yarn/install-state.gz | ||
.pnp.* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
# A possible solution to the `calculator` demo | ||
|
||
## Steps to test this solution | ||
|
||
Run | ||
|
||
``` | ||
npm install | ||
``` | ||
|
||
``` | ||
npm start 2 + 4 | ||
``` | ||
|
||
### or | ||
|
||
Create an executable | ||
|
||
add this to `packages.json` | ||
|
||
``` | ||
"bin": { | ||
"calculator": "./index.js" | ||
} | ||
``` | ||
|
||
add this line to the top of the `index.js` | ||
|
||
``` | ||
#!/usr/bin/env node | ||
``` | ||
|
||
|
||
``` | ||
npm install -g calculator | ||
``` | ||
|
||
Run | ||
|
||
``` | ||
calculator 3 + 4 | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
/** | ||
* @desciption: A claculator module that can add, subtract, multiply, modulo, | ||
* exponent and divide by taking in two numbers and an operator. | ||
* It throws an error if the operator is invalid or if the second | ||
* number is zero and the operator is division. | ||
* | ||
* @param {number} num1 | ||
* @param {number} num2 | ||
* @param {string} operator | ||
* | ||
* @returns {number} result of the operation | ||
*/ | ||
|
||
// the calculator function | ||
const calculator = (num1, num2, operator) => { | ||
if (operator === '+') { | ||
return num1 + num2; | ||
} else if (operator === '-') { | ||
return num1 - num2; | ||
} else if (operator === '*') { | ||
return num1 * num2; | ||
} else if (operator === '%') { | ||
return num1 % num2; | ||
} else if (operator === '^') { | ||
return num1 ** num2; | ||
} else if (operator === '/' && num2 !== 0) { | ||
return num1 / num2; | ||
} else if (num2 === 0 && operator === '/'){ | ||
throw new Error('Division by zero'); | ||
} else { | ||
throw new Error('Invalid operator'); | ||
} | ||
} | ||
|
||
// export the calculator function | ||
module.exports = calculator; |
Oops, something went wrong.