StreamSparkAI

speaker 1: Coding has changed in fascinating ways. Githucopilot.
speaker 2: GitHub Copilot, GitHub Copilot.
speaker 1: GitHub Copilot, GitHub Copilot, GitHub Copilot, Copilot, Copilot, Copilot, Copilot, Copilot, Copilot AI has arrived, and Copilot is all about it. One way to describe it is right from its documentation. GitHub Copilot is an AI coding assistant that helps you write code faster and with less effort, which ultimately freees up your time to focus more energy on problem solving. And this is whether you're a new developer or season, but to get a sense of what I mean, you really got to see it. So let's take a look before we even get started to even have access to a GitHub Copilot. If you're just starting out, all you need to do is at the top of the vs code screen, click on the Copilot logo, and this will bring up the sidebar where you can now click to sign in to use Copilot. On the bottom right hand side, you'll see that it's attempting to sign into GitHub, and then choose the GitHub account that you want to use with Copilot. And I'm gonna to choose the first one that's currently not being used, and I'll choose to open up this code. And here I am ready to go. No subscription needed, no credit card information. I could just get started with the default free tier of GitHub Copilot since we are using the free version of Copilot for this demonstration, there's a couple of things I wanna mention. The first is that it includes 2000 completion. What exactly is a completion? So let's say in this form here, I just, you know want to add a little text right under the word login, such as enter, and right there, your user name and password to log. And that's the completion. So when I tab it now, I've used one completion and there you go. Nice. So I have 1999 left. Now if for any reason you don't want to use some of these completions, you want to optimize your control over it, all you need to do is scoot on over down to the Copilot icon at the bottom right hand corner of the screen. Itgive you an option to disable completions. Now if you actually have focus on your page when you click on this option, like for example, right here, index html, there's focus on this page versus if I clicked over here. Now there's focus on this preview. So let's go back, focus on index dot html. If I were to go back, you'll see that there's an option for disable completions for html. And I mentioned this because this option will change depending on what you have focus on. So if I had a markdown file, itsay disable completions for markdown, which is pretty cool, because now you have control over what type of page you don't want completions to go. So then this way you use it when you really do need to. Now the other thing that the free tier of Copilot comes with is 50 chat requests per month. So just by clicking on open chat on the upper right hand corner here, I can ask it a question like, how can I make this form more secure and itgive me a solution for this login form that I can consider? And that was one chat request. So those are two main characteristics of the free tier of Copilot. I should mention that within your text editor here, if you hit command, I you can ask questions right over here. But if I don't want to, I can hit escape and just continue working with chat on my right hand side. Now, when we examine the interface here, something great that we have available is the ability to pick a model. Right now, the default is GPT -4 zero. But if we hit the drop down, we have an option for cloud 3.5. So as time goes on, we're gonna na have more models most likely. So make sure to check back here. That is three other icons here that I want na point out. The first here is to start a voice chat so you can literally dictate your questions if you don't feel like typing it in context is very important when you're asking questions to Copilot. And here, if we hit the attach button, there's different options to add context. We won't review all these right now, but one of the most popular is to just Attach File es. So for example, I have a csd file here of top 25 popular musical artists and a number of albums that they've sold. So I can go ahead and drag and drop this right over here and use voice chat to ask a question. Tell me the top five artists from the csv file.
speaker 2: The top five artists from the csv file based on copies sold. R. Michael Jackson thriller, 70 million copies sold. Acdc back in black, 50 million copies sold.
speaker 1: And I just stopped it right there from reading it, but that's pretty cool. The last icon here are for participants, which we could talk about next. So now let's talk about participants. Participants can be invoked to see the list of them by using the at symbol, and here they are. Now we won't cover all of them since that's out of scope for this video, but we'll cover a few. The first will be for vcode. But before even using it, let's see if I just asked Copilot, what's the shortcut command for inline? Now without using participants, Copilot goes online and pretty much searches all the Internet to do its magic before it returns an answer. And what happens is it tends to be less accurate because there's too much context for it to review. And in this case, it does its best to give this suggestion here. But this is not exactly what I was looking for. What I'm really looking for is the shortcut to invoke Copilot chat inline. So if I say this question applies to within vs code and try again now, it gives me an answer closer to what I want. Because if I actually choose show and command palette, you see that says command I. So if I'm within one of these files and I hit command I, this is exactly the shortcut that I wanted. Now I'll hit escape to get out of that. And let's experiment with another participant, let's say, for terminal. So now this again narrows the scope down to questions related to the terminal within vcode. So basically anything that you would want to run here. So I could ask it, just as it mentions here, ask how to do something in the terminal, what are the top ten popular git commands? And boom, that returns me content that I'd want to put right into the terminal. So now let's try another participant specifically at workspace, which is an important one because sometimes you want to ask questions that's relevant to your workspace, that is your project files. You don't need Copilot to go look throughout all the Internet and return your just general answers. For example, I may want to know where is this object axials being referenced? Now I'm gonna to close this file here just so that it doesn't think. I just wanna look only into that file. And when I hit enter, it returns me all the files where axios was referenced. To learn more about app workspace and participants in general, definitely check out this video here because there's a lot to it, so you could really get a good understanding of what's going on behind the scenes. And also this page to look a little bit more into participants. Now let's talk about slash commands, which are shortcuts for commands that you don't need to have to type in the word each time. So for example, if I highlighted my code and went to my inline chat and typed in just the slash, you can see a few commands there pop up. A common one is explain that we can use so that it could explain the code that we've highlighted. And once it starts writing and finishes, we can go ahead and just look at this horizontal bar, grab it, move it down, and then scroll up to see the full explanation of everything that our code is doing with each function and hyperlinks. That brings you right to it. Now I'll close that and let's observe another. If I highlight my code and bring in the inline chat, sometimes it's important to detail some documentation about our code. So there is the doc add documentation to our code. So if I hit that, it gives a general summary that we could go ahead and accept if we want to keep that at the top, at which point we could just modify if we want. But it's a nice quick start to adding some documentation. I'll get rid of that for now. Another common command is the slash command to fix issues. So let's say we had a typo here and we weren't really sure what the correct spelling is. We could highlight our code and there is a bubble here that could give us an option if we want to have Copilot troubleshoot this. But these aren't really the options that I want because I know I need to have axios in here, but it's asking if I want to remove it or modify. Let's try to just highlight the line and hit command I and fix and boom, it knows exactly what the issue is. It says, Hey, look, this is correctly imported and it should be axios, so I could accept that. And that fixed the issue. So slash commands are great for that. And while within inline chat, we have currently six types of commands available, if you actually went to the chat window and hit slash, there's even a lot more to experiment with. So turn around with it and to see all the different ways that it can help you out to be a little bit more efficient. The next thing I'd like to show you is how you can use coilot as an amazing tool to learn new forms of software development. So for example, I have this react program here, but let's say I'm not really that familiar with react. I can ask Copilot, can you give me some exercises to learn react skills relevant to this project, maybe a curriculum? And let's change that to four react skills. So it's a little bit more specific. And this is amazing here. So now, rather than just giving me like a curriculum, that's just how to learn react. It looks at my workspace, it sees the skills I'm going to need to practice and suggests some exercises that's relevant to it. So it covers basics such as components, and then states and props, forms and events, crud operations, routing, testing, and then there's some more advanced topics along with deployment towards the end. And it gives me the option to get information regarding prioritizing it. And you don't need to stop there, whichever topics that it mentions, if there's one that you want to dive deep into, you could say explain more regarding deployment on. Week eight and itdo. So so this saves a lot of time having to go out and Google to find additional information regarding depplummet and allows you to just stay within vs code to get all your questions answered. And if you do need to leave here to set up an account like it does here for a step one, it provides a link such as two vercell, which you can then open and go to. Now I'd like to continue a little bit more regarding how you can use Copilot for learning, because before you can get any type of software engineering job, you need to interview. And technical interviews is a key component to that. Let's say your job is going to involve a lot of react using Copilot. You could ask it to give yourself 15 react interview questions and answers. And we're just saying 15 for now just to get a sense of it. But this is an excellent way to, again, save time from researching this on your own. And I'll come up with very common questions. And I always recommend the junior developers to always cross reference. Even though copiit's a great start, I would definitely get into the habit of cross referencing different sources for questions and answers, and then you could form your own way to answer them. And of course, you could ask it general engineering questions such as what does solid stand for? And I'm not even gonna to mention that it's in the context of programming, but it does pick it up. And sure enough, it explains that it is an acronym for five design principles. Now let's turn our attention to some coding efforts, which often give some people a headache, especially for me, which is Rex. So let's say I want regex to match a phone number in the format just like this. I hit enter, and Copilot immediately gives me a solution, which I can come over here. And at the second icon, click insert at cursor, and boom, it's right there in our text editor. So now I want to go ahead and test this. So I'll do the console log. And I like the completion that it's offering me. And it says that this example should return. So let's go ahead and now execute this in our terminal and see if it returns through and it does. So why don't we go ahead and mess this up here and add in like a letter? And when we run it again, ideally it should not be anymore. And that is certainly the case. And now we see redgex life is effectively easier with Copilot. Let's turn our attention now to testing. Now this will be a short little demo here, but I wanna show you how Copilot could easily simplify your life when it comes to testing. Let's say that we highlighted this and then we went straight into the inline chat and we chose the slash command for test, generate unit test for the selective code. Let's go ahead and choose that. Views the code and and has gone ahead and created some tests. I'll go ahead and accept that. So imagine if you have a really large project, this saves you a lot of time from having to create all these asserts manually yourself, which is a great thing. The next thing I'd like to show you is a pretty important feature that's gonna to be continuing to evolve, which is called Copilot edits, which you go and click on the second icon here towards the top of the chat window. And what Copilot edits allows you to do is to propose code changes across multiple files in your workspace. So on my left hand side, you'll notice I have four files here. Three of them are blank. The index, the contact and the about html files are blank. And then the last file is the csv file that we referenced earlier. Let's go ahead and highlight them all and drag them into edwith copiles window and start indicating what welike the changes to be. So the first will be, and I'll be kind and say, please do the following, update the home page to list the artist from our previous csv five. Next will be to add a link to the about and contact page. Next is to add generic info to the about page. And last but not least, to complete the contact form to accept name, phone and email. So let's go ahead and execute that and see, Copilot at work, step by step, is telling us what it's doing. First to the index page, it updated the home page, it listed the artists, then it added some generic information. The contact. Let's take a look. There's our index page. Let's take a look at the preview. All pretty cool. And it added links to the about and contact page as we asked our about page. If we look at the preview there, it does have some generic info. Welcome to our website dedicated to the top 25 musical artists of all time. And let's look at the contact page. And there's our generic form. All that's a good start. Now I like what it has. What's great with this is it doesn't automatically assume that it did everything perfect. If you don't like it, you can come over here on the bottom right hand side to discard it or just accept it. So I'm going to go ahead and accept all the edits. And now I'm going to ask it to style it because it did look a little bit boring. Can you add styling to all the pages, please? Never hurts to be kind. And now it's going to add some styling for each of them. So let's take a look once it's completed. All right. Our home page looks a little bit better. So does the about and our contact form, so we can go ahead and accept all these. And this is just a quick example of how you can have like a good start using Copilot. While I appreciate the styling, I do want it to be a little bit more colorful. So let's go ahead and ask it verbally to make it a little bit more colorful. Thanks for what you've done so far, but can you go ahead and update all the pages so that they could have a little bit more color to the styling? And also for the home page right now, the table ables taking up the entire page. Can you adjust the table so it's centered into page index dot hdm?
speaker 2: Update the styling to add more color, and center the table on the home type hhtml n let me go ahead and mute .
speaker 1: the voice so you don't have to hear her speak everything out. Give different colors to each page. I don't like them all being Green. And there you go. That looks a little bit nicer. Great job so far. Can you update the home page to include all the data from the csv file index .
speaker 2: hdm update? One last thing I'd like .
speaker 1: to mention is that for a lot of changes that are being made, if you want, you can navigate through and choose what you want to accept and what you want to discard. But things are looking pretty good here. So I'm going to go ahead and accept all the changes. And there you go to learn more about Copilot ego ahead and visit this section of the documentation that gives a little bit more detail regarding all the different ways that you can use it. Now to learn more about all the different tiers available for GitHub Copilot, you can come to this page here and click on see plans and pricing. And you'll see the first option is the free tier, which we've been working on. And it comes automatically with vs code, which includes up to 2000 completions and 50 chat requests. But if you do find this limiting because you are coding a lot, the the pro might be better for you where developers have unlimited access to GitHub Copilot for ten bucks a month. Now, something that's cool that I should mention is that if you are a student or teacher at the fine print here, you can see that there is an option where it would be free for you all, but you would need to sign up and indicate that you're a student or educator. If you're a part of a team, then the business plan would make more sense for you where it's 19 bucks per user, but if it's for your whole company, then it would be the enterprise to you can click on get started or contact sales to get more information. And the last thing I'd like to mention is a reminder that Copilot is not just used for vs code, but you can use it on code spaces, Visual Studio, x code, jkbrain, ide neovim, and of course, azure Data Studio. Before we wrap up, there's a couple of resources I'd like to point you to. One is a video for best practices to really get the most out of co ilot. You not only want to know how to use its features, but the best way to use it, that is to follow some best practices. So we have this video here that you can check out. In addition to another video that has to do with prompt engineering, which is what it' S Referred to, there's this other video here. The focus is just on that. Now there's a lot to prompt engineering, but there are a couple of key strategies that you can follow to really strengthen your skill set to leverage Copilot to its fullest potential. And the last resource I'd like to point you to is actual GitHub Copilot documentation, which is really well written. So go ahead and bookmark this and check it out from time to time. So we cover quite a lot. And with the new free tier of Copilot, you can get started right now, even if you're new to coding, because Copilot can help you take those first few steps. And if you're a seasondeveloper, go ahead and pull in some of your advanced projects and see how Copilot can assist with everything in your workspace. If you found this video helpful, don't forget to like subscribe and hit the notification bell so you don't miss any future Copilot updates. And you definitely know that there will be. So I will see you in the next one.