Coding with AI: Using GitHub Copilot + Angular in Visual Studio Code

hey everyone it's The Eclectic Dev today we're going to put on our AI hats and have a first look at GitHub co-pilot using angular inside of vs code let's check it out all right so I'm inside one of my open-source applications that's built using modern angular and I want to test out what it's like using GitHub co-pilot now GitHub co-pilot is this next evolution in US as developers being able to have an assistant there that's going to be right in line with us working as opposed to maybe having to jump out to the internet and search or read different articles we can get that quick on the spot help from our AI assistant now GitHub co-pilot breaks down into kind of two larger pieces of functionality you have the GitHub co-pilot chat component and you also have the inline capabilities with within your code directly in VSS code here we're going to need two extensions in order to enable that this also is with the precursor that you have a license already identified with your GitHub login I already do have a license that I can use so I just need to get the extensions installed log into GitHub and we'll be on our way so if I go to extensions here it will probably already be under recommended you can see GitHub co-pilot so we're going to go ahead and install that one the other one that I want to get at is co-pilot chat and so if we take a look at that we will see that as well and both are being installed so now if I go back over to my extensions I should be able to see that both are available all right after both extensions have been installed it'll say right here to sign in to GitHub we can do that and it will allow me to do that it'll pop me out to the browser and then we can continue on looking at the functionality all right so once authorized I'm redirected back to my application and we can do that once again reopens Visual Studio code and okay so now we are authenticated with GitHub and the way that we can tell that co-pilot is ready for us is down here in the bottom right show co-pilot status menu so if I click that status ready so we know that GitHub co-pilot is ready for us to use now it's time to start using it within our code one other note about co-pilot inside of vs code it does have some configurability if you go to file preferences and then settings under the extensions menu you will have some options for co-pilot you can actually enable and disable particular parts of the uh features or the different languages and you can take a look at those if you want for additional uh modifications but for today we'll be using the default settings all right so I have this dashboard component and I first want to highlight how does the inline sort of super intellisense really because that's what we're looking at here work so the autocomplete the the co-pilot the the pair programmer that's going to help me out so in this particular file I have an observable that's leveraging a subscription that has been defined however this subscription uh as we know an angular we need to uh clean it up after it's been used in a component in this particular instance maybe I don't remember the exact syntax or I don't remember you know which method it goes into or event so what I I can do is begin typing a comment it already actually gives me intellisense so do you want a call back for when cabin data is loaded technically I already have that one below but I want to say create a function to clean up now look at that after just putting in most of the sentence it's already starting to understand what I'm after and in this case it says clean up the subscription I can tab on that and then hit enter now it's going to recommend the function that it thinks that I want I can tab to accept or I can hit controll enter and it will give me the suggestions over here so there are multiple suggestions after I hit all enter this is known as the completions pane in GitHub co-pilot so over here it shows me a couple of different different suggestions and in this case it looks like just about all of them are identical uh let's see oh and this one has checking to see if you know if it exists so you could pick which one of these if you needed uh additional suggestions or I could go back and again I can just Tab and get the method that I want so in line I've just made a comment had co-pilot recommend the method the function that I needed and I was able to accept it in just very few characters you can see how rapidly we could leverage this functionality all right let's look at some of the additional functionality that co-pilot offers here inside this method maybe I need additional Logic on on cabins loaded so this particular method provides me with a collection of cabin data so what I can do is I could say maybe I only want the cabins with an occupancy that's one of the properties on it that is greater than four so I need to do something with that so I can just say get cabins with an occupancy now it already has recommended something of the sort it says with an occupancy of four or less now my case I want four or more so I'm just going to modify that hit enter and then it's offering me a method or an additional uh call here using data. filter which is just plain JavaScript which you can pair down only the cabins that have an occupancy greater than or equal to four now in addition to that if you continue it already knows do you want to sort that now so maybe I want to sort that I could tab on that and then it will tell me using data. sort it's going to sort by the occupancy so now that data has been paired down for occupancy greater than or equal to four and been sorted so that maybe if I was binding in my view or something of that nature so you can see how you can prompt it and even just your initial prompt sometimes it'll it's almost like it's finishing your sentences like it's it knows you so well it knows the application and the context of of this file of what you may be needing to do and if it's off a little bit you can make some modifications and then get the code that you need to all right now that we've seen the inline functionality and a few examples it's time to look at GitHub co-pilot chat so if you don't see it already over on the left hand side you will see that there is a chat option so here is the chat option and we can ask it anything that we want to to assist us and there are lots of prompts that you can help it out like fix or test or explain and it'll guide you through that now in this case what I want to take a look at are if I go back to this dashboard component if I look at the spec in the unit test it's pretty anemic I have the default scaffolded that it just should create the component but in reality I want to make sure that some of this code has been tested directly in NG on a nit with the observable and on the callback for on cabins Lo it all right so within the GitHub co-pilot chat window here there's several ways we can prompt it for unit test for a given file so right now I have the dashboard component file open and I could simply do one of the slash commands like slash test or I could be more specific as I have here so I said write additional unit test for dashboard component so let's take a look at exactly what it provided to me in this this instance so this is the key part about when you're using GitHub co-pilot that you're not necessarily going to take everything verbatim so we know we have somewhat of an anemic test over on the right because all we have is it should create now let's take a look at what it's done all right so right here we can see we've got the typical setup and before each it's creating some mock cabins it's using Jasmine to create a spy on the git cabin and get cabins changed it is providing that mock cabin service using used value in the test bed and then we have a series of unit tests here it's good it's basically repeated the original one then there are two new ones should call get cabins on NG andit so here it's looking that it's on that mock cabin service calling get cabins and should return a value and after the fixture dete changes it wants to make sure that it's called so that ensures that get cabins has been called which we want it so that's okay and then here it should update cabins when on cabins loaded is called which that refers to the call back from the observable expecting cabins to equal so one of the iterations that I want to make while I don't mind this right here I prefer to use mock classes so the very next statement that I have right here is refactor the above to use a mock class instead of a Jasmine spy for cabin service and GitHub co-pilot knows what I'm asking sure here's how you can refactor the test to use a mock class instead this is the typical pattern I use in this application but and many of my applications but maybe you would have been all right with the original setup so it takes that same setup but now we have class mock cabin service so it has the mock up of these different values from the real cabin service including some mock data now I can already sense that there's a problem here because the cabin model which is over here has several more properties so we're probably going to get an issue on that but again this is why it's an iterative process so going back over let's take a look but so far so good overall and so we go down into to the tested provider and now this is what I want to see instead of used value use class with mck cabin service and then we have the unit test now one thing that did change over here is now on cabins loaded is using uh some of that mock data directly rather than uh from what was uh up here checking on it to be identical and then subscribing and making sure that that is equal all right so so in order to use this there's several ways you can just cut and paste uh pieces in there but since my test over here really didn't have a lot of Merit what I can do is Select everything right here and then I like this step right here so I'm going to hover over and insert at cursor all right so that has now overwritten and added to that file the unit test that we wanted right here all right a couple of errors that I need to fix so I don't think we have the correct references so I'll just take care of that right now go over here to cabin and we'll just use the little light bulb here and say add import that we need and that'll take care of that and we also need cabin service so we can add the input that we needed for that all right and also it's going to tell us down here we've got a couple of different problems with that data as we had expected so this is pretty cool because instead of iterating over in the GitHub copilot chat at this point what we can do I can give me uh myself some more real estate here if I hover over this you'll notice now it'll say fix using co-pilot or explain using co-pilot I also could take the error and put it over in the co-pilot window over here and say what is this error it would explain it and then I can continue to refactor the test so at this point you might be saying isn't it faster just to hand roll this obviously I'm explaining as I go along but there's a EB and flow quickly and depending on what type of test you're trying to create it may be good as gold the first time and might be able to push it into the file and and you can proceed but in this case we needed a a few changes so let's go ahead and say fix using co-pilot and it knows that there are additional properties that are going to be needed to fix it I would like up I would update the object lur include the missing properties so we'll accept that and then we'll come down here and we should be able to do the exact same thing using co-pilot and we will get the same response and we can accept that on both of those now at least visually we don't have any errors in our unit test so I want to go ahead and run my unit tests and I'll just run on Chrome headless and we will see what kind of output that we get so angular has built the application serving it up on Chrome headless and we will get our results here on the new unit tests that we've added to our application and there we go we have 18 successful unit tests ran in the application and we know the new ones added have worked as well and if needed we could use the code coverage report from Karma to go ahead back and check our code and make sure that we're getting the code coverage that we need using our unit test so that's a way a lot of focus on GitHub co-pilot creating unit tests and helping us especially when it comes to observables and some of the async code that we want to test this can greatly help us along and once you get that pattern down you can wash rint repeat and some of the others so now we know that cabins observable will be um updated after the call back and we have that proper code coverage rather than just the anemic on create that we had originally one of the other things I wanted to mention about GitHub copilot are the different models that they use behind the scenes so the endline function I have shown uses GPT 35 whereas GitHub co-pilot uses GPT 4 but sometimes you'll still notice that the uh the data that they've been trained on isn't necessarily bleeding Edge so for example in this file right here dashboard component what if I wanted to use the newer angular signals to convert that observable over to an angular signal so if I prompt it and say update cabins the cabin's observable to use angular signals instead of an observable and prompt get up co-pilot for it let's see what it ends up responding with and it says here an angular observables are used to handle a sync h HTP and other user events and as soon as it comes back in it'll say angular doesn't have a built-in alternative to observables for handling these types of operations and then it talks about the different types of observables that could be used while this is not technically valid at this very moment because we do have an alternative in the way of using signals as of the newest version of angular so that's just one thing to know that you're you're not necessarily working on uh bleeding edge data learning that uh for Behind These models so you'll just want to work with it and may still have to handroll some of your Solutions another feature to highlight of GitHub co-pilot and this is even Beyond angular it really doesn't matter what language that you're using but specific to vs code is just how many Avenues into the functionality of GitHub copilot there are between the chat inline prompts and I wanted to show one more thing here with explaining code because obviously how many people get into new code and they're like what is this code doing sometimes there's comments sometimes there's docs most of the time there's not now you can make your way through The Code by reading it and figuring out what it's doing and debugging but it sure is nice if you can very quickly get a definition of what something's doing for example this admin cabin component that I have open uses angular material it opens up a dialogue and then when you click it there's a call back and some information gets returned to the component that's hosting it but I may not understand what this open dialogue function is doing and I can see here that we've got this dialogue ref with a reference after it's been open with some properties on it and then the subscription but I'm not exactly sure what's going on so I can highlight the entire method rightclick say co-pilot and then explain this over in my chat it's going to begin working shows which references are being used and it will begin to explain out block by block what exactly is going on so as soon as it finishes here we're going to take a look and see how well it did at explaining what it's actually doing all right so it wrote almost a blog post on my one method right here which is pretty interesting so it gives the name and is used to open the dialogue for editing the details takes a cabin object as a parameter and we can see that right here represents the cabin the user wants to edit that's pretty neat to have that context uh you may have not known what what that was for dialogue open method open the dialogue part of angular materials Matt dialog service it is the um component that should be used that's this one right here it's explaining what the parameters are and it continues to go on call back function checks if the result was returned continues on ALS Al talks about selecting or deselect so it deselects the row finds the index U moves along and finally refreshes the grid by creating a new mat table data source with the updated grid data array this is really really spectacular to me I mean over 20 years of doing coding and a lot of times you're coming in behind a mad scientist of sorts that you you don't know and is written code and you see a bunch of wires and everybody proclaims that code should be self-describing but in reality it's not all the always the case so GitHub co-pilot here has in my opinion exceptionally done a good job of providing context now it's not going to be everything that doesn't mean that you know how to make changes on the code especially if you're a junior developer or something but if especially if you're a season developer you'd be able to look at that and understand exactly what it's doing and again you could do that on anything you could even just go to uh a particular row and you could say co-pilot explain this you could start an inline chat right there and say I want to modify this we showed I showed that at the beginning so it's pretty handy if you've got that GitHub co-pilot chat over here and I could see this being uh open indefinitely in my application to for the EB and flow to go back and forth I may not need to explain my own code but if I'm hopping through and especially if you're still doing like a method where maybe you're going out to stack Overflow and you're taking some code and you're you're pasting in your application you want that uh additional clarification on what it's actually doing before you use it this is a way that you could uh get further insight into it so anyway I've shown from multiple angles kind of getting you started with an angular application on how we can enhance it add code add unit tests explanations uh the different functionality and this is just really scraping the surface try it out for yourself get it into vs code you can also use it in visual studio so if you're doing angular over there web client development or it Blazer or whatever you're doing this functionality is not limited to vs code hopefully you found this useful there's a lot of learning ahead to be done on this and try it out see how it works for you until next time this is The Eclectic Dev we'll see you later

Channel: The Eclectic Dev

Views: 2,006

Keywords: ai, artificial intelligence, LLM, gpt, 3.5, gpt 4, openai, vscode, visual studio code, programming, tutorial, license, github, git, ng, angular, how to, unit tests, gpt 3.5, gpt 35, language models, learning, assisted, extensions, visual studio

Id: Z93zu6uzTnw

Length: 22min 0sec (1320 seconds)

Published: Tue Dec 19 2023