Skip to content

Commit

Permalink
added markdown for prompt-crafting
Browse files Browse the repository at this point in the history
  • Loading branch information
jefeish committed Feb 27, 2024
1 parent 0e89175 commit 8b39609
Show file tree
Hide file tree
Showing 19 changed files with 3,980 additions and 1 deletion.
163 changes: 163 additions & 0 deletions demos/Node-calculator/README.md
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">

![control](images/control-key.png)
![return](images/return-key.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)
Binary file added demos/Node-calculator/images/control-key.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demos/Node-calculator/images/copilot copy.png
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.
Binary file added demos/Node-calculator/images/copilot-chat.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demos/Node-calculator/images/copilot.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demos/Node-calculator/images/return-key.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
130 changes: 130 additions & 0 deletions demos/Node-calculator/solution/.gitignore
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.*
42 changes: 42 additions & 0 deletions demos/Node-calculator/solution/README.md
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
```
36 changes: 36 additions & 0 deletions demos/Node-calculator/solution/calculator.js
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;
Loading

0 comments on commit 8b39609

Please sign in to comment.