(first 5) Manisha intros Mashrur and how to think through a problem flow
Feature - GitHub Copilot, what is it? - GitHub Copilot is an AI based pair programmer. It comes as an extension in Visual Studio code, Visual Studio, Neovim, JetBrains IDEs.
Advantage - what does Copilot do? Help us think through problems with side by side suggestions. Perhaps talk about how people would look through a problem on Stack Overall. The user has to start writing code or write comments describing what they want the code to do to engage Copilot.
Benefit- How AI Copilot can help facilitate writing cleaner code faster. Since it draws context from comments and code, it can "learn" the users ways and suggest anything from individual lines to whole functions instantly.
How to onboard to a project with codespaces and copilot via Amplify (@manishapriya94)
How to use it for a function @maxmash1
How to use it for a workflow like autolabel @maxmash1
Demo with vue issue @manishapriya94
// function to generate a random number
// start typing
function randomNum() // to see copilot jump into action
// You can hover over the suggested code to accept the solution or seek more solutions if available.
// That's one way, you can also start typing comments directly
// write a function to multiply 2 numbers
function multi // and it should come up with auto suggestions
// Let's say we want to accept the suggestion and also write the output to console:
console.log // And it'll auto complete it for me, you can run it from the terminal node index
// We can switch to something a little more fun. There is always a need to work with dates:
// create a function to get current date
function getData() { // accept and wait a bit after hitting return
// it gets a nice output format for us too with additional information
// let's log it by starting to type 'console.log' or comment write output to console
// Now let’s say we wanted to get yesterday’s date, start writing the comment // output
// the current date
// The completed sequence would look like below:
// create a function to get the current date
function getDate() {
var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
return day + "/" + month + "/" + year;
}
// output the current date
console.log(getDate());
// run it from the terminal by typing node index
// Let's improve on this. Now we want a function to get yesterday's date
// type: //create a function to get yesterday's date
// Accept 'tab' through each line
// Now after output of current date just start the comment with // and it'll automatically
// write out the comment to get yesterday's date. This is an example of Copilot
// learning the context and synthesizing the suggestions based on context
// Now let's try updating the format of the output for current date
// output the current date
console.log("Today's date: " + getDate());
// output the yesterday's date
console.log("Yesterday's date: " + getYesterday());
// Notice the only code I have written so far is this, rest were all generated by Copilot
// Including format of the dates
// Ok so what if we wanted to update the format, but I don't want to look up
// JavaScript syntax?
// Start typing: // print the date in format or just // after console.log to see the magic
// Then perhaps output yesterday's date in different format, just type //. What happens?
// Magic, it seems like Copilot knows what I want as soon as I start thinking about it
// Completed sequence looks like below:
// output the current date
console.log("Today's date: " + getDate());
// output the yesterday's date
console.log("Yesterday's date: " + getYesterday());
// output the current date in a different format
console.log("Today's date: " + getDate().split("/").reverse().join("-"));
// output the yesterday's date in a different format
console.log("Yesterday's date: " + getYesterday().split("/").reverse().join("-"));
// Ok let's try something different
// Story: I returned from a trip to Europe recently and the temperatures there were
// all in degrees celsius. So I'd hear 34 degrees today, or 36 degrees today
// but to me all it meant was hot, I didn't know exactly how hot. I could use a temperature
// converter to convert celsius to Fahrenheit and then I'd know.
// So let's build it, start typing the comment below:
// convert celcius to fahrenheit
// Accept the suggestions, then write another comment to output the result
// Accept the suggestion and run it to see it in action
// Wow 34 degrees is 93.2 and it was humid, no wonder I was melting
// Let's try 37 which was the max I faced.
// Yup, pretty hot.
// Let's try something different. Let's say I wanted to generate some data, but I didn't
// know what to start with, and I don't want to think. I want to be guided
// just to get it going, let's try, write the comment below:
// Generate some random data
// Accept the way through
// Write a comment to output the data
// Aah, I see I have an array of 100 random numbers. Interesting
// So this gives me an idea
// What if I wanted to create an array of names? Maybe I want to work with strings
// Let's try create an array of names, accept the change
// Great!
// output a random name from the array? Try it
// run node index from the terminal to see results
// Ok, that's just 4 names, ok I'm running out of ideas, so if I want to remain
// in this coding mode, maybe a function?
// Let's see what Copilot thinks I would want to do next?
// Start typing // create a function in the next line
// Wow nice, it's formalizing the process for me. It seems the next logical
// step given I'd want this process to be repeatable to package this
// in a function, let's try, nice!
// Now let's create an array of numbers
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// create an array of colors
// Ok now what's interesting here, is notice it's choosing var by default for me.
// Let's say I want to use const instead of var. Let me go ahead and make that
// change. Now let's create another array of words.
// Notice what happened, Copilot changed it's suggestion and came up with
// const, instead of var. It's learning my style on the fly, based on the context
//Let's try again with numbers, the suggested response should
// be as below:
// create an array of numbers
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// You can extend this to classes as well. For simplicity let's create a calculator
// class, accept through a few methods, when you want to stop, start typing class
// create a calculator class
// add a method to add two numbers
// add a method to subtract two numbers
// add a method to multiply two numbers
// add a method to divide two numbers
// Now you see the suggestion has the 4 methods that my comment specified
// You can use it
// The completed sequence looks like below:
// create a calculator class
// add a method to add two numbers
// add a method to subtract two numbers
// add a method to multiply two numbers
// add a method to divide two numbers
class Calculator {
constructor() {
this.value = 0;
}
add(num) {
this.value += num;
}
subtract(num) {
this.value -= num;
}
multiply(num) {
this.value *= num;
}
divide(num) {
this.value /= num;
}
}
// create a new instance of the calculator class
const calc = new Calculator();
// add two to the calculator
calc.add(2);
// output the result
console.log(calc.value);
// subtract 5 from the result
calc.subtract(5);
// output the result
console.log(calc.value);
// checkout action from marketplace autolabel
// build workflow and fill in auth pieces
So that concludes our first look at GitHub Copilot. Any questions?
Overview
[Presentation Content ]
Slide link: https://docs.google.com/presentation/d/1tuZfMqUDvzSqVvcfws-2pODoQJXwWIA2lMiuDDkanmU/edit?usp=sharing
Demo Steps
References:
Copilot docs - includes getting started Copilot feature page Copilot GA post
Are we workshop ready?