GitHub Copilot - First Look

[Music] this video is sponsored by hostinger if you're looking for a reliable and affordable web host hostinger has everything from shared hosting to vps's to cloud hosting and more their most popular shared plan includes 100 gigabytes of ssd storage free email hosting an ssl certificate git and ssh access and much more perfect for our portfolio or small business website you can choose to pay monthly or you can pay up to four years in advance click the link in the description below and enter the code traversie media to get 10 off today hey what's going on guys today we're going to look at github copilot and i'm sure that you've seen a bunch of videos on this probably some click baity videos talking about it stealing your jobs and all that this is more of just an objective look at it i signed up for the wait list a little while ago and got approved and i've been messing with it over the past week or so and it's something that i think is going to be really helpful and something that i like i mean we talk a lot about we joke a lot about having to go to stack overflow and copy and paste this is essentially like having that right in your editor only better um so i like it i don't think it's gonna steal anybody's job i think it's gonna help us do our job um so we're gonna take a look at it but first let's talk about how it actually works so copilot is built on the codex ai system from open openai i'm sure a lot of you have heard of openai's gpt-3 codex is basically a special version of gpt-3 built for programming tasks and since we're using ai it needs training data so it's actually been trained on source code from publicly available sources including public github repos and this may cause you to ask if the code is just copied i guess only 0.1 percent of the time the suggestions that it makes contains some snippets that are verbatim from the actual training set only 0.1 percent and you can read more how it works on the website so it tells you gives you some examples and then down at the bottom here you get some frequently asked questions but i really want to focus on actually using it and kind of giving you a demonstration if you want to use it you have to sign up for the wait list so you can just come here and click sign up and you know you can just add yourself to the wait list so let's jump into vs code and i already have it installed as you can see over here my extensions right here so we have github copilot all right and i just have an index.js file and i want to just start off with some simple examples some simple functions that do specific things so let's start off with something really simple let's say we want a function to generate a random number so i might call it ran randomnum and you'll see that we get this gray code that just pops in here and this is this is a solution that copilot is suggesting just based on the function name so it's a function that takes in a minimum maximum and returns a random number in between that now if i want to accept this i can either click here on accept or i can hit tab which is probably what you're going to do most of the time and it'll put that code in the editor okay another thing i want to show you is if we do that again and i hover over this and i click on open copilot or control enter it'll open in the side some of these so different solutions that you can look over all right so let's say we want this one we can go ahead and click accept now what's even cooler than that is we can go ahead and just put a comment in here so if we want to do the same thing create a function to create a random number let's say create function that generates a random and it'll even try to continue your comment for you so we'll just say random number we'll hit enter and then it'll give me the first line of the function so if i want to accept that i'll hit tab i'll hit enter again it puts in the function body i'll accept that and we can just create the function purely by just a comment telling it what we want and this is this is obviously something pretty simple but some people may have to go to stack overflow to create a function like this and that's one of the great things about this is you can just do it right from your editor and you can get multiple solutions let's say we want a function to get yesterday's date we'll say create function to get yesterday's date and i'll accept that with tab and there we go let's say we want to create a function to convert fahrenheit to celsius tab there we go so just functions like this just to do a specific task this is really good for and we can also use it to generate data so let's say we want we'll say create array of numbers and we'll click tab we'll accept that i'd probably change this to const but yes we get a an array of numbers one through ten let's say we want to create uh an array of names or we'll say an array of five names and there we go so we get and now it uses cons because it saw that i already used const now let's say we want to do some objects we'll say create an array of we'll say an array of five objects with id name and age okay so kant's people there's one two 3 4 5 and then it ends okay so you can actually just specify you know what what these you want these objects to look like what fields they should have now let's say we want to do something with this data so i'll put a comment and let's say order people by age and it gives us this function here so just people.sort and if we want to check that out let's say ordered people and now you can see we have them ordered by age we could go you know further into this and let's say get only people whose name starts with jay so we have john and james in order by age ascending oops ascending okay so hit tab save and let's console.log filtered people and clear this up and run it and now you can see that we get just james and john and they're ordered by age ascending so copilot's great for for doing this sorted sorting filtering all that stuff but i just want to mention it's really important that you understand things like filter and sort and map and for each these are really important high order array methods that you need to know when you're a javascript developer so one of the fallbacks i can kind of see with this with copilot is people not learning as much because they can just type in what to do and it's important that you understand your code all right so i'm going to clear all this up and we'll go ahead and clear this up and what i want to do now is start to work with a third-party api so i'm going to use jsonplaceholder.typeycode.com which is a fake rest api for testing and prototyping and you can use different resources like posts comments i'm going to use to do's so you see if we hit this url we get a list of 100 to do's with user id id title and completed all right now as far as the url i was going to just paste it in but i decided to just try a comment and just say get the url for jason placeholder to do's and it did it so i'll hit tab it does put slash one in here so we'll just get rid of that and we'll just get rid of var and use const okay and we don't need the comment i just wanted to generate the the url now another thing we're going to have to install node fetch since i'm not in the browser environment i don't have access to the fetch api so let's just npm init dash y and then npm install node fetch all right so then we'll just go ahead and bring that in let's say const fetch and that'll auto-complete for me and we're going to go ahead and just have a comment that says create function to get to do's okay that's it and we'll hit tab so get to dues and then it looks like it's going to make a request with fetch turn to jason and then get the data and use slice to get the first 10. so we could do that let's click on previous and see what else we got so this one will get the data and return an object with all the fields and the values and it knows that this api uses an id title completed and user id fields so i'm going to click accept okay so now we have a function to get to dues and i didn't have to write any code all i did was put this comment in and then we could use this just to make sure it works by calling actually let's console.log get to do's and oops get to do's now this returns a promise so we're going to do dot then and let's say for our to do's and i'm not going to use the autocomplete here because all i want to do no pun intended is console log the to do's yeah console log to do's all right so let's try it we'll run the file and there we go so let's just map it getting the data mapping through and then we're console logging it and i haven't used the dot then syntax in a long time and i'll show you how we can do this with a sync await as well but let's say we want to post a to-do let's get rid of this and let's put a comment and we'll say create a function to post a to-do all right so we'll go through this let's see what it gives us okay so gives us all everything we need as far as the the headers the content type and then the body is going to be whatever is passed in here all right good so that looks good to me let's try it out so we want to run post to do and it takes in a to do object which will give a title and it even will give me some sample values we'll just do that title test completed false and then that's going to return a promise so we want to do dot then response and res.json and then dot then oops dot then and then we get the the data and we'll just console log it all right so let's try it out we'll run the file and there we go so we get our response back with our our data are title and completed and it also gives you the id which is 201 in this case all right so very very cool as far as a sync of weight goes let's get rid of this and all i'm going to do is start to create a function i'll call it get to dues and you'll see it'll automatically put async in here i'll click tab and then that looks good it's just going to return the data and then if we want to use that remember this returns a promise so we have in if we're using a sync away we have to use this inside of an asynchronous function so what we'll do is create an iffy a function that runs automatically and then here we'll call this a sync and we'll create a function in here and yeah we'll just use that so tab that's just going to get the to-do's put it in this variable and then console log it so i'm going to save that and let's run this and now we're able to get all the to do's using a sync away so this is just an example of using copilot with uh you know when you're dealing with a third party api so let's clear everything up here and let's say that we're working with express to create an api so we could just take the basic parts of creating express server and do them separately for instance we could say you know require express or you could say require anything and that'll bring it in and then we could say init express okay so that will set app to express we could say start server and that would listen on a port but you can also go a little more higher level and just say create a basic express server we could even add a port we'll say on port 5000 okay and then we're just going to go through this so i'll tab that and hit enter okay so we're initializing express setting the port to what either the environment variable or 5000 and since this is such a long big block of code there's spaces as well so we'll just hit enter until we see a new suggestion so that's to include the static folder now we have listen on the port console log listening on the port and that's it so just this one comment gave me a basic server that i can run so if i install express and i run node index listening on 5000 so very very powerful stuff and then of course if we wanted to let's say we wanted to add um middleware we'll say add express body parser middleware and there we go if we want to create a row let's go down under here and let's say create index row okay next line it's going to just send the index html from public but obviously you know you would go in and change this stuff i think it's going to just save us a ton of time honestly i i'm really excited about this and i'm sure that there's so much more that i could do that i don't know about i'm i'm brand new to this just like most people are now as far as um as far as react goes i didn't get too much of a chance to play with it with react but if we create a react component and let's just call it to do right and then i go up here and i want it let's say i want to import use state because i want to add some state so import use state from react and then what i thought was really cool is if i go where i would normally put my state so right here it'll automatically create a piece of state called text now text relates to to-do's right so if i click tab and accept that go on to the next line we have editing completed so notice that they all relate to what it to what it to do would have now of course it might not be exactly what you want you're probably going to go in and change these but i thought it was pretty interesting that it chooses fields or you know state based on the component so for example if i were to create one called login all right and then i go down here where i would put my state and look at that username next one password next one error loading logged in and it's just going to keep guessing um state that would relate to a login component all right so i don't know about you guys but i think this is great i find it really helpful and i think it's going to speed up productivity and and and it's just what it says it's a it's a pair programmer it's a co-pilot it's not going to take your job so ignore the the click baity videos and in tweets that are talking about that if that ever happens it's not going to be for a very very long time there's plenty of jobs that are going to get automated out before programmers so um so just pay no attention to that but i would suggest getting on the wait list if you're not already on it and just start to mess with it and you know like i said i just started using it so i'm sure there's there's a lot that uh that you can do that i don't know about but that's it guys i hope you enjoyed this video i'm losing my voice now but i will see you next time

Channel: Traversy Media

Views: 92,809

Rating: 4.9605856 out of 5

Keywords: github copilot, copilot, github copilot tutorial

Id: DeO7xLXORpY

Length: 17min 43sec (1063 seconds)

Published: Thu Jul 29 2021