GitHub Copilot X Chat: How To Get Started

hey Bobby here with coder Foundry and one thing I want to bring your attention today is a new capability in GitHub co-pilot now if you've been on the beta for a while or the preview you may already have this but a wider audience including me received a new update which is allowing you to chat right inside of Visual Studio code or Visual Studio and so this has been more generally rolled out so I thought I'd take the time to show you kind of how that works now if you don't know what GitHub copilot is it's an AI tool from openai that allows you to generate code within your app now if you've been using chat GPT to generate code you'll know that it does have some workflow problems so one of those problems is you're cutting and pasting between the web page and your editor this solves that problem by bringing the chat right inside the editor so that your workflow is improved and it's faster now you may be asking yourself is this free well it's not unfortunately but we can look here that it's basically ten dollars a month or eight dollars a year if you pay a year in advance 100 bucks you also could hit up your boss and maybe he can pay the 19 a month per user and to get it for you just tell them to make you faster make you better and that you'll like you more and maybe he'll get it for you all right so now I want you to say to be frank with you I don't want you to see this in word that your your jobs can be replaced because this is just going to make coders better and faster I think the way that you can think about this is if you're coding something and you need a little help chat should be there to help you or if it's going to give you some bullet code that you don't have to type in that's fantastic or you maybe you know what you want but you just don't know the exact syntax that you need all of these scenarios is where GitHub co-pilot really shines so let's check it out here in BS code to see what we can do with it and show you how it works all right so I'm in vs code here and I've got a project already set up and there's nothing in here just a blank page and some jsmcs folders nothing in here at all um so if you go over here in BS code we can look at the extensions and for you to get this to work you need to install GitHub copod extension and the GitHub copilot chat extension all right and then obviously you got to sign up and have a paid account or be on a trial mine still says preview and pre-release here so it may not be out for everyone but I have signed up to preview and I just got it this morning so it's been rolled out more as we speak so if you're not you go sign up for the preview or it may be already in your environment you should know about it all right so um let's get to work here so what I want to do let's imagine a scenario a common scenario where you have a a third-party API that you don't know a whole lot about but you need to call it all right and uh let's just imagine that's the movie DP API now normally what we would do is we would go out to their docs and read about the docs and figure out what is the Json that's going to come back and what properties can I be how do I authenticate to it the whole nine yards and it could set you back or we could just ask chat to be now check it out here inside here I can hit the chat icon and now GitHub copilot comes up and I can ask it questions and so what I can do is ask it hey write me a function called get movies that cause the movie DB API using fetch so what happens and boom right away it wrote it right off the bat and this is actually the actual URL is is kind of correct okay now there's a lot more to this endpoint than you could do but you can see right away hey you know what I could get started right away but what if you're doing it for real and you're like you know API Keys being passed up in a query string kind of not my flavor I would rather if it was done with a barrow token and so let's show you how it could correct code now so I'm going to say rewrite and get movies using a bearer token for Authentication let's do it and see what it does now you can see it wrote a function called get movies here and it's got my bear token coming back and it returns it right here the fetch the result of my Fetch and so I could just go ahead and add this right to my my code here so I'm going to click on my movie API JS and watch this this is really slick here I can click over here and I can say insert it cursor and now I've copied and pasted from the chat over into here with one click and it was really easy to do and you can get really this workflow can get really quick all right so I like that a lot but we're not done yet so while this does return some movies for us it doesn't actually display them all right so maybe we could write a function to display the results from get movies and so I'm going to ask it another question here and notice that it's keeping in the context here that what we want and so it wrote it as a separate function here okay that's interesting okay all right so let's just take it as a word here and so we'll replace this with the new one here I'm going to just say insert here it's got a brand new function here and it returns them as An Li element with the text movie title all right and it's also talking about some kind of movie list element by ID here but it probably is going to work for me what if I wanted to display the images with the movie maybe the title and the description and so I could ask it another question here and it keeps up in contact here and so I can say can you display the results with images title and a description and boom okay not bad it's using the LI here and it's got the different elements and then it's pulling in the different properties from the API here poster path overview and title pretty slick okay I'm going to say um one of what if we do this I like the LI but what I want really is maybe if I use the div and a card and maybe I could do something like that so I'm going to say instead of An Li can we use a div tag and CSS to display them like cards and let's see if it how it does our function okay all right so now it's added a movie card here to our function so let's let's call this complete here at this point get rid of this and then I'm going to come here and insert display movies in here so now I've got display movies in here I've got a movie card and but I don't have any CSS yet so um it's it's prompting me right here to tell me what my next question has been this is pretty cool how can I add CSS styles to the movie cards themselves so I'm just going to click that and this is where it's making suggestions for me to help me out and this is very powerful feature that's added in all right so tell me what to do here I said I need a style CSS so I'm going to copy this at this point or I can come over here to my style CSS and theirs is called Styles we'll just call our style won't really matter and then we'll insert that right there at the cursor there okay so now we have the CSS in here pretty cool but we don't have a front end yet so what we can do is let's build out our front end so I can ask it one more final question here and what I did is said hey man make me an HTML template with bot bootstrap 5 called the display movies function assume external JS files and that's what it did um went through there and now we have a template here so I can insert that right here on my index page here and so now I have bootstrap 5 pulled in I have my movie list here and this is my ID in a class equals row and then a script here okay that's not right so let's let's change it up here change it and JS and we'll call it movie API boom all right and so now we have a complete solution here let's look at it and see if it works we'll go back over here and right click and I'm going to say add to open Live server so it happens boom got some pretty cool Styles here but my style didn't come through because I didn't listen to chat or my co-pilot here and I didn't Link in my style sheet so I can go back over here and I can just copy right out of here so link here and say hey man make a link to your style sheet and I can come here you know and I can paste that in here or if I didn't want to paste it look it's already telling me what to do see now right here it's telling me to add it so I'm going to hit tab here and this is part of copilot where it's making suggestions for you and it's telling me to add it and it's the right one because we called our style all right so now when we run our code here we've got some cards pretty neat not the best but maybe we can work on that all right so let's see kind of what we can do here to make it a little bit better so um let's go look at our style here okay let's just make some changes here instead of this let's make this a little smaller we'll use rims for this and here we just made this one room here a little smaller Maybe take that off so maybe that'll be a little bit better and then um let's take our height off here we'll just let flexbox take care of it slow this down a little bit and then let's run it here let's see we got here much better okay so you can see how I used GitHub copilot to get it to where I wanted and then real quickly with a few modifications I got it to where it's it's looking pretty nice here now we do have some other issues that we could address and maybe the the image isn't where we want it but we can come back in and change it but you can see real quickly this built out a really cool thing and the only thing I can say is like dude Oppenheimer way down here on this list it should be at the top okay it's definitely better than Flash and Transformers but each to his own anyway I hope that helps good luck and keep Cody

Channel: Coder Foundry

Views: 16,052

Keywords: coding bootcamp, learn to code, dotnet, .net, c#, programming, software developer, coder foundry, coding bootcamp in north carolina

Id: xm_FlN7xKDs

Length: 12min 1sec (721 seconds)

Published: Tue Jul 25 2023