Transcript for:
Using GitHub Copilot in Daily Development

he everyone today I'm going to walk you through a typical use case for using GitHub copilot on a daily basis so imagine you're a developer and you've just started a new job or maybe you're starting a new project you get handed the project file and there might not be other developers around to ask you might be unfamiliar with the actual programming language itself or even how the project is structured you're asked to make some changes and you're sitting there wondering who to ask luckily for us we can use our AI pair programmer GitHub copilot to help let's take a look so here's my pet spot of repo so this repository is a project creating an app that is a simple find and help locate my lost pet so imagine if I've lost a pet I can snap a photo using my phone I can upload that photo and say hey I've lost this pet has anyone seen it imagine if you're someone who's found a pet you can snap a photo and it uses AI image matching to match up with some of the lost pets that have been submitted while we're here on our repository we can also use GitHub co-pilot from the do comic experience if I click the co-pilot icon next to my username a little co-pilot pane will come up now if I want to ask questions specifically about this repository I'd need to index it but before we do that we can ask some generic questions from GitHub copilot such as how do I shorten a URL geub Crile has a think and it generates the answer for me so are several ways shorten and it's even giving me links to websites I can go and short my URL so that was something little bit more General but if we want to ask specific questions about our repository we need to index it so I can click GitHub Crile and Index this repository now this may take several minutes while that's indexing we can actually ask it up copilot other questions so if we have a look at our immersive view we can have a look at all the topics that we could ask about and GitHub copilot is even showing us some of the popular repositories that we've been working on I can also have a new conversation with GitHub copilot we can ask something very specific let's ask about GitHub Advanced security so how to create a token for my API call and it is creating a response to me and even giving me some of the code Snippets as well so if we head back to our pet spot of repository we can check to see if this has already been index so if we click the GitHub co-pilot icon again we can see that repository has now been indexed so we can now ask questions specifically about this repository such as how does the pet SP at work so it's telling me where it's getting the information from so it's taking the information from the read me here and giving some information about some of the files and where these things located it's even giving me the references here so I can see where it's actually taking the information from so this is a really good way we can now ask questions specifically about our own code base let's pop it onto our local machine and go from there so for me I like to use the could have C to use this so if I open up a terminal I run it as administrator and make sure it's always working we can go GH just to double check that we've got GitHub installed and working I can CD into my location where all our repos are stored and now we can clone the repository we want to so for this it's just GH repo clone and the owner of the repository and the name of the repository so in this case it workshops SL pet spotter and that we'll clone it onto our local machine now once that is cloned I can go to the location of where that's cloned and we can open it up in our editor of choice for me that's vs code so I can open up visual studio and we can grab the one we just open our pet Spotter and we can open up here in vs code so for me I already have GitHub copilot installed here we can tell it's installed by looking down the bottom you can see that I got our little GitHub crop pilot icon down here and we we can see that we've also got the extensions install uh chat we need to ensure that chat is installed so we can double check that these are installed by heading over to Marketplace or to our extensions and ensuring that we've got GitHub co-pilot so we need both uh GitHub co-pilot and GitHub co-pilot chat installed so say here this one's installed once we've Ure we've got GitHub copilot installed we can start browsing through the files so let's have a look at some of the files that we've got here so this is our back end and this is our front end for our pet spotter repo now if we had to look at this for the first time we might have no idea how this is actually working so what I can do is I can go uh this is running in razor so I could go to say my index folder this is the homepage I can have a look at the Lost Pet and I can say I have no idea how this is working I can open up GitHub C pallet chat on the side here I can type explain and it will explain the code that is on screen for me so it's seeing here it's got the reference for the file and it's saying this is part of a blaze component specifically a form for reporting a loss PL here's a break down the code so it's starting to explain to me how the code is working how it's running and how I might need to make um some changes so even tell me the conditional runnery is done and this is active now if we had to look here and say okay well how do we actually change some of these things so this is a form for inputting our loss pet say somebody has told me the form is doing really well at the moment but if we have a look at it we can see that there's currently no way to add the location of where you found the pet so if I need to add that in and maybe we've got a few more options here we might just have not have dog and cat we might have other things that have been lost get up copile it's going to start working there and might even give me some options so so we've also lost a bird there we go get up copile it's me a bird we might also have lost other so we can leave that there now if we wanted to create a um input here for location I could possibly copy and paste some of this code I can also just ask it h c chat how do I add a location input for the form and get up copal chat we'll again double check that this is the uh file reference we're using and can tell us about how to do this now what I like about get up Copa is it doesn't just spit out the code it actually gives me an explanation of what it's doing rather than just saying here's the code so it says to Lo to add a location input you can add another div block inside this block you input the parameters you need and even like once it's given me the code it said this code creates an input field for the location and then binds it to a two-way data and we'll need to add the location property to our pet class model if it doesn't already exist so what we can do is we can say this looks really good so say we wanted to add this in put a new line here and if we wanted this code we can literally just it's GitHub code Cal inline is also giving it to me but we can just click the the button on GitHub copal chat and it will insert the code that it is asked me for so we can see here now this might look good but this is just an input value at the moment so maybe we could ask them how do I create this as a dropdown location selector because if we have it as a input a lot of people might come in they might give us suburbs some people might give us towns so if we have a drop down then we get what we actually might want so what we can do is we highlight the bit that we just did we can insert the new code over the top here you can see now it's created a label form for us and it's given us an input selector so it says here add more options as needed now I could grab these options here so New York Los Angeles and Chicago I'm in Australia so maybe I could even use the inline text and let's say add suburbs to the drop down and give the options for suburbs located in Melbourne Australia let's see how good GI up co-pilot is so it's giving me Melbourne as an option jalong is an option Bendigo so these are all suburbs in Victoria this is actually pretty good I could go through all I'm doing to select these is selecting tab which allows me to accept the suggestion that get of Cy is giving me so I create a new line these are all suburbs here in not just melbour to give me the whole of Victoria but the fact that it does this is pretty good so I think this is looking really great and we can get rid of these New York ones if we want or we could leave them in now the next thing we need to do is it says over here under GitHub co-pilot chat it's giving you some information to say you need to add a location property to the pet model class if it doesn't already exist so maybe we could say something like uh it's even giv me options for this as well so how can I add validation let's say where do I add the location property to my pet model class now you can see I do need some experience and knowledge of what I'm doing as a developer but by using it up co-pilot this is a project that I may not have worked on it might be things that I'm unfamiliar with I don't really know Blazer that well so by using copile it can help me understand how to actually do these things so it says the pet is likely to find a separate CS file and you need to open that file out of property so what we can do is we can leave this open so because that will give context to get up Copart so GitHub calet takes into account any context of files that already open so it said of we need to find the other CS model so there's probably a page called pet model so we might even be able to search this as well if we wanted to but let's have a quick look it's in under data there we go it's over under data so you can see here we've got public class model we can see we've got all these names all these models and classes for the different form inputs now it said we needed one the pet model class is likely to find a separate CS file so found it pep model Cs and you need to open that file and add a new property location so it's telling me how to do that existing properties are already here now get up copart's relatively smart it now has the context of this file cuz it's open so if I add a new line here get up coparts should hopefully maybe already give it to me but I can also start typing public string and it's telling me image location so there's images there but let's put location here so set and get so that's really good and we also need to add it under here as well to our Constructors so if I click here it's already adding me um location as well so I can save all these things now and I can commit those files if I need to so using GitHub Coop pil I'm able to um unblock and unstick myself I can make some changes to code and get started almost straight away gone are the days where we have to wait hours weeks days to get the computer we need to get all the credentials we need and then to sit down with the senior developer and actually understand our code and we need to make sure we always test our code so let's pretend we've tested our code and this all works fine we now want to commit it so let's go and save all our files make sure we saved all the ones we've worked on and now let's Commit This I like to use GitHub d so if we hop over here to GitHub desktop we can see there's a couple of files changed so let's check out and let's create a new branch called Mish manners changes and we'll create this Branch we can bring my changes over to my Branch we can switch to Branch over here now we can commit all these changes so let's say add in location to form let's be really specific and descriptive about the types of comments and uh commit messages we make this means that when we go back to have a look through our history we know exactly what our commit is for so we can commit these changes to M manners now this Branch hasn't been published to remote yet we can publish it to GitHub and then open a pool request so let's go ahead and publish this Branch now once that branch is published we can go over to GitHub and we can create a poll request I want to do this on the web cuz I want to show you a cool new feature that we've released a PO requests as well so in the past some people will click this and say yep it's done create a pull request and just leave it as it is with the power of GitHub Crile we can create really descriptive and really informative pull requests so if I click this little GitHub co-pilot button here I can create a summary of all the changes in the pull request so I click that button GitHub co-pilot thinks for a little bit it's looking at the changes that have happened between the the two files in this case that I've got what's actually been changed what's being added what's maybe been deleted and how do those changes potentially affect so this comes up with a little uh description said it primarily focuses enhancing the pet class model and the page in the application most significant change is adding a location property and extending the Raz B to include more pet types because we did have those extra pet types in so in addition to the class model we can see here if we preview this this actually gives us some nice little cloes inits and gives us links and callbacks to where actually things are located so I can click here now to create this pull request this is much more descriptive than it's ever been before and this looks really good so if we have a look at this we can see that it is much more descriptive than it was the links to the files as well and where the things have been changed so you can see merging is blocked because I do need a reviewer but this gives my reviewer now a lot more information about why I'm creating this pull request the changes that I've made and more importantly why those changes have been made so I hope this has given you some insight into GitHub co- pil and how to use it and I hope you enjoy using GitHub Co pilot to unblock yourself and use it as an AI pair programmer don't forget you are always the developer in charge you are the pilot GitHub is your co-pilot you are still responsible for the code your ship at the end of the day so make sure you're always checking the work and if in doubt do ask a senior developer happy coding