Mastering GitHub Copilot: Installation, Usage, and Advanced Coding Techniques

Okay, so let's start at the beginning. What is GitHub Copilot? GitHub Copilot is an AI pair programmer that helps you

write code faster. It is designed to help with programming tasks and serves as your assistant while you're working

in your editor and on github.com. Don't forget that part. But it's more than just code completion. It's a complete

coding companion that can help you write code from natural language, understand shell commands, remember things you

forgot, describe changes in your pull requests, and even help you with debugging, plus so much more. It is

available in Visual Studio Code, Visual Studio, Jet Brains, Neoim, Xcode, on GitHub mobile, and in your terminals,

and on github.com. You can use it with a variety of programming languages in your editor of

choice. Now, how do you gain access to GitHub Copilot? To use GitHub Copilot, you must have a GitHub account and a

GitHub Copilot license. There are four license options available to you. You can sign up for GitHub Copilot for free

or Copilot Pro for individuals or you can get access from your job through a Copilot business or an enterprise

license. If you're a student or an educator, you can get access to Copilot Pro for free through GitHub education.

You can also get free access if you are a popular open-source project maintainer. To see a list of all the

features available for each tier or each license, click the link that pops up on the screen. If you've never used GitHub

Copilot before, I encourage you to sign up for Copilot for free to give it a go. It's really good. Once you sign up for

GitHub Copilot, you are ready to install and use it in your editor. Installing GitHub Copilot differs depending on

where you're using it. If you're using VS Code, navigate to the extensions marketplace and search for GitHub

Copilot. Click on the extension that pops up and click install. This will install two

extensions. GitHub Copilot, which provides inline coding suggestions and its companion, GitHub Copilot Chat, a

conversational AI assistant that helps you with coding specific tasks. Once installed, you'll need to sign into VS

Code with your GitHub account that has access to GitHub Copilot. If you didn't previously authorize VS Code in your

GitHub account, you're prompted to sign in to GitHub in VS Code. Alternatively, you can sign into GitHub

and VS Code by selecting the accounts menu in the activity bar and then sign in with GitHub to use GitHub Copilot.

Once you do that, you're navigated to your browser where you can grant GitHub the necessary permissions needed for

GitHub Copilot. Click continue to authorize Visual Studio Code to approve and you're all set. Return to your

editor and you'll notice a Copilot icon at the top next to the command center. You'll also notice a Copilot icon at the

bottom of the editor where if you click it, it may ask you to select the account you want to use. Then we'll show you the

menu options where the status should say ready. If you see these icons in your VS Code, you've successfully installed

GitHub Copilot and you're ready to use it. Now, if you're using Jetrains IDE, let me show you how you can install

GitHub Copilot. I'll be using PyCharm today, but these instructions are the same across Jetrains editors. Open your

editor of choice and navigate to the plugins marketplace. Search for GitHub Copilot and click install and restart

your IDE. Open up a project and you'll notice a Copilot icon on the right hand side of your editor. You'll also notice

two icons on the left hand side, one with GitHub Copilot with a question mark and the other with a chat icon. Select

the first Copilot with the question mark icon to get a brief overview of what GitHub Copilot is and a welcome message.

Click on the copilot with the chat icon to open up Copilot chat where you can get help with programming related

queries. If you see these icons in your Jetrains IDE, you've successfully installed

GitHub Copilot. If you didn't previously authorize Jet Brains in your GitHub account, you're

prompted to sign in to GitHub in your editor. Alternatively, you can click on the Copilot icon at the bottom and

select login to GitHub. Click copy and open and click continue in your browser to approve the permissions needed. Press

commandV or controlV to paste the code. Click continue and finally select authorize GitHub Copilot plugin.

Return to your editor and you will see a message that GitHub Copilot has been successfully installed. Now we can

authorize GitHub Copilot chat. Click on the chat icon and click the authorize button. Select copy and open and paste

the code in your browser. Click authorize GitHub Copilot for Jet Brains IDE. Return to your editor and you

should see a greeting from GitHub Copilot chat. Once you've done that, you're now ready to use GitHub Copilot

in Jet Brains. Okay, now that we have Copilot installed in our editors, let's take a look at how

to use it. For today's example, I'll be using Python in VS Code. Create a new file called validate_email.py.

Once you start typing, GitHub copilot will generate suggestions based on what it believes you want to do. For example,

I can import the re module and when I click enter, copilot will give me suggested code based on what it believes

I want to do. Because the file is named validate email, it provides code for validating an email. I can click the tab

key on my keyboard to accept a suggestion. When I click the return key, it keeps the fun going by providing the

main function to run the code. If I hover over the suggested code, I can see the multiple options available to me. I

can also open the completions panel to see even more suggestions that's been generated and accept suggestions from

there. This is inline code complete in action where that gray text represents ghost texts that have copilot's

suggestions. If you try this on your machine and you got a different response, that is okay.

One thing to keep in mind when you're working with GitHub Copilot or any LLM is that responses are nondeterministic.

This means that we're likely to get a different result each time we use GitHub Copilot. and the result I get may differ

from the one that you get. We can take this a step further by using GitHub copilot chat. Let's say we want to

understand what this code means. I'm seeing it for the first time and I want to get up to speed very quickly. I can

open up Copilot Chat and type slashexplain and get a detailed explanation of what's happening in the

code. You'll notice that Copilot chat has a view of the currently open files as indicated by the icon right here.

When I click enter, I get a nicely formatted explanation of the code. Now, let's say I wanted to improve the

reax and allow users to enter multiple email addresses. I can make that query right here in Copilot Chat. I can say

allow users to enter multiple email addresses for validation and also improve the reax to be more robust.

Then I get a plan, an updated code block and a list of changes that were made. I can click the apply in editor button to

accept the changes and GitHub Copilot will go in and make the updates on my behalf.

Now before we wrap up here, let me take some time to address the elephant in the room. There are so many co-pilots out

there. So what makes GitHub Copilot different and what's the difference between GitHub Copilot and other

copilots? Well, GitHub Copilot is specifically designed for programming. And because it works and exists where

you work in your editor and on github.com, there is no need to go back and forth between your browser or

another application and your code. You're able to truly stay focused and no longer context switch. So when you hear

the words GitHub copilot, know that it is referring to your personal AI payer programmer. So, we covered quite a bit

today, but you now know what GitHub Copilot is, how to get access to it, how to install it, authenticate, and start

using it. You also know the difference between GitHub Copilot and other Copilot tools. I'm going to teach you what you

need to know about large language models or LLMs and how to interact with them with prompt engineering. Prompts are

what power LLMs to make us more productive in our work. When you understand the power of prompting and

its limitations, you can do even more faster. Before we get into prompt engineering,

we should understand more of what LLMs are under the hood. Large language models are a type of AI that are trained

on large, hence the name, amounts of text data to understand and generate humanlike language. They work by

predicting the next word in a sentence based on the context of the words that came before it, making their responses

relevant and coherent to humans that use them. You can think of it as an ultra smart autocomplete. There are three

things you really need to know to understand LLMs. Context, tokens, and limitations.

Think of context as the surrounding information that helps an LLM understand what you're talking about. Just like in

a conversation with a friend, the more context you have, the more the conversation will make sense. In the

world of LLMs, text is broken down into units of tokens. A token can be a word, a part of a word, or even a single

letter. The AI model processes tokens to generate responses. The number of tokens you use with an LLM can impact its

response. Too few tokens and it may lack context, but too many and it might get overwhelmed.

While LLMs are powerful, they aren't all powerful. They don't truly understand language like humans do. They rely on

patterns and probabilities that were in the data they trained on. We won't get into the training side of things in this

episode, but hopefully this quickly explains why we need a diverse and broad training set for the best responses.

Models are never perfect, so they sometimes provide incorrect or nonsensical answers, sometimes called

hallucinations. You can work with LM's power and limitations by combining everything into a prompt. A prompt gives

the model context via tokens and works around the model's potential limitations so that the model can give you a

response. For example, if you prompt an LLM with write a JavaScript function to calculate the factorial of a number, it

will use its training to give you a function that accomplishes that task. Depending on how the model was trained,

it may understand your prompt differently and output different code. This is why you may see different

outputs from various models out in the world like OpenAI's GPT, Anthropics Claude, Google's Gemini, and so on and

so forth. These are all trained differently and understand an output differently as a result.

So now we know what a prompt is, but what is prompt engineering? Honestly, it's just a term for crafting prompts.

Just like how clear instructions can help a friend complete a task exactly how you want, a well-crafted prompt can

help an LLM understand and deliver what you're looking for, good prompt engineering can drastically improve the

quality and relevance of the outputs you get from an LLM. Now, let's talk about some key components of effective

prompting. An effective prompt is clear and precise. Ambiguity can confuse the model, so don't forget that an effective

prompt also gives enough context. You want to provide enough background information to get the job done without

overwhelming the model with unnecessary detail. And don't forget, you can always iterate and refine your prompts. If you

ask for something and you don't get what you expect, tweak your language. Now, imagine you're using GitHub Copilot and

you say, "Write a function that will square numbers in a list." At first glance, this sentence isn't too bad. But

let me ask you, what language should the function be written in? Do you want to include negative numbers? Will the input

ever have non-numbers? Should it affect the given list or return a new list? Let's refine our prompt a bit. So we can

say write a Python function that takes a list of integers and returns a new list where each number is squared excluding

any negative numbers. Do you see the difference? This prompt is clear and specific about the language we want to

use, what the function should do, what constraints there are, and the expected input type. By giving GitHub Copilot

more context, the output will be more relevant to exactly what we want from it. In summary, prompt engineering is

really about being a good communicator with the computer. Very similar to coding. By crafting your prompts

thoughtfully, you can harness the full power of tools like GitHub Copilot to make your experience smoother and more

efficient. Now, as you're working with GitHub Copilot and other LLM tools, you may run into times where you're not

getting the output you hoped for. The problem isn't always because you're not specific enough. Here are some things

you might be running into and how you can improve them. Prompt confusion. Sometimes we mix multiple requests or

aren't clear enough which can lead to confusing outputs. For example, we might highlight something in VS Code and say

fix the errors in this code and optimize it. Is the AI supposed to fix the errors or optimize it first? What should it

optimize for? Speed, memory, readability? To solve this, break it down. Separate

your asks in the prompt. First, fix the errors in the code snippet. Then, optimize the fixed code for better

performance. Building out a prompt iteratively will make it more likely that you get the final result that you

want because each step of the way has been thought through. We've discussed that tokens are units of words or

partial words that a model can handle. It's important to remember that there's a limit to how many tokens a given model

can handle at once. If your prompt is too long or the expected output is very extensive, the LLM might start

hallucinating, cut itself off, and only give you a partial response or just fail entirely. You want to keep your prompts

concise. Similarly to before, you will want to iterate on smaller parts, but also only provide necessary context.

Does the LLM need your entire code file to work? Or can it just use a few lines of code in a certain function? Instead

of asking for it to generate an entire application, could you ask it to make each component step by step? And

finally, we often assume that the LLM knows more than it does. If you say, "Add authentication to my app," does it

know what your app even does? Does it know which technologies you might want to use? When doing a prompt like this,

you need to explicitly state your requirements, outline your specific needs, mention best practices if needed,

and be ready to iterate again with edge cases and restraints. By stating all your requirements, you help ensure that

the LLM doesn't overlook critical aspects of your request when it generates the output. We've gone over a

lot in this section. Prompt engineering is an art and a science and you'll get better with practice. As a quick

overview, when you're working with GitHub Copilot or any other LLM tool, you use tokens to give the model context

given any limitations it might have. Your prompts should be clear, concise, and precise for the best results,

providing as much context as the model might need. You should break down your prompts into smaller chunks. if there

are multiple tasks to be completed and iterate from there. You should be specific about your requirements and

needs so that the model understands the constraints of what it should provide for you. I don't want to be the reason

my app gets hacked and neither do you. If we want to be good developers, we have to be secure developers.

Most security teams through no fault of their own don't have sufficient time and resources to properly secure their

company's code. So as developers, we are the first line of defense, which is tough because half of us don't get

enough formal security training to do this properly and end up having to learn these skills on the job. Fortunately for

you, GitHub is here to help. Both with Copilot, which can help you securely build and fix code, and with a bunch of

security tools that are available for free if you're building open-source code. Today, I have a super special

guest here with me to help us get up and running with all things security. Hey, April.

>> Hey, Cadia. >> How are you? >> Good. How are you doing?

>> Nice. Welcome to the show. >> Thank you for having me. >> And she's going to take it away. All

right, Cadesha, let's dig right in to some security best practices. Copilot doesn't just know how to write

code. It also understands how to make code more secure, but it isn't perfect and really are any of us. So, you really

have to know what to ask and you shouldn't rely on it as your only security tool. But we're going to get to

that in a little bit. Let's start with a simple example. I'm putting some information into a SQL database using an

insert statement. I may have heard of a problem called SQL injection. And that's where someone puts a malicious

instruction like drop table which would delete my existing data into an unprivileged text entry like a comment

box or a name field. But I might not know how to defend against this problem. So one technique I can use is to simply

ask Copilot to regenerate my code. I can delete the function where I write to the database. Make sure my comment explains

what I want to do. Then let co-pilot come up with a solution. And then now this part is really important. Actually

read what it wrote. I don't want to just blindly accept any co-pilot suggestion. I want to check its work and I want to

learn from it. Now here I can see that it is sanitizing the input making sure it doesn't contain any malicious text

before adding it to my insert statement. If I don't want to delete and recreate code or if I have a large amount of code

that I want to check. Another option is I can simply ask Copilot to look through and fix it. I can do this by selecting a

block of code and then asking copilot a question like are there any vulnerabilities in this function or I

can work more broadly by selecting the whole file or even using at workspace which lets copilot take into account

other files in the project as well. So let's try asking at workspace what's the attack surface. That's just a fancy way

of saying how might someone try to attack this project and I can see that copilot makes a bunch of recommendations

here. These include specific changes to my code as well as certain packages I might want to consider adding to the

project to make it more secure. Oh, and by the way, if you want even broader recommendations, including general code

quality or efficiency, you can use the slash command fix. And whatever recommendation it makes, I can always

follow up with more detailed questions asking C-Pilot to explain what a specific security problem is or even to

propose alternate ways to fix the problem. Now, even though Copilot can help with finding vulnerabilities and

suggesting ways to fix them, it isn't an end-to-end replacement for all security tools. This is partly because Copilot is

a generalist and not a specialist. And because C-Pilot can't always see the full context of your production

environment, build purpose security tools can consider things like which compiler you're using, what environment

variables are set, and how you are deploying your application. Fortunately, GitHub has a number of security

offerings, all of which are free to open source maintainers, so you can use them at no cost on your public repositories.

Let's take a look at a few of these. If you've been working on code in a public GitHub repository, you may have already

noticed a pull request come in from someone called Dependabot. That's GitHub's tool for checking that your

dependencies are vulnerability free and up to date. You can turn this on or off in your repository settings. Just scroll

down to security and click on code security. Here I've enabled dependabot alerts. These tell me which dependencies

have known vulnerabilities. And here I've enabled dependabot security updates which automatically create a pull

request that updates those dependencies to safe versions. Below this is a section called code scanning. If you

don't see this section, you're probably working in a private repository. But if you do have it, I recommend clicking the

setup button next to CodeQL analysis. This will make it possible for GitHub to look for pattern-based vulnerabilities

in our code. Things like SQL injection problems that I mentioned earlier. This happens automatically as you commit new

code to your repository. When you make new pull requests and also as a periodic scan, if a new problem is found, you'll

get a notification from GitHub. and then you'll want to fix it probably by doing something like opening up your code and

asking Copilot to help you repair the vulnerability that was pointed out in the notification. In some cases though,

you might not even need to do that. You might have noticed already right under that button to turn on CodeQL, there's

another setting called C-Ilot autofix. GitHub will use the Copilot engine behind the scenes for you, automatically

suggesting a fix for that problem. Then all you have to do is accept to fix the PR and no need to run GitHub Copilot

manually. There are a bunch of other security features we don't have time to explore, but there's one more you should

definitely turn on in your public repositories. Secret scanning. Secret scanning makes it possible for GitHub to

warn you about exposed secrets like passwords or security tokens. You never want these to be directly embedded in

your code. So secret scanning lets you know if it finds any and tells you where to remove them. And with push protection

turned on, it'll help proactively block any new secrets from being committed into your GitHub codebase. Thank you so

much, April, for giving us such a thorough understanding of security best practices on GitHub and with GitHub

Copilot. So security is an incredibly deep topic, and we don't expect you to be an expert, but for now, just remember

these three things. Whenever you're coding, ask C-Pilot to help you find and fix vulnerabilities in your code. This

might just be running SLFix in Copilot chat or it could be something more detailed like selecting a suspicious or

brand new piece of code and asking Copilot to check it for vulnerabilities. >> Number two, when Copilot or another tool

does find a problem, ask Copilot for more details so you can learn about that type of problem and how you might

prevent it from happening again in the future. The third and final tip is go into the code security settings on each

of your repositories and make sure dependabot code scanning and secret scanning are all turned on. And if they

send you alerts, remember that GitHub helps you fix them. Together, these steps will help you keep vulnerabilities

out of your applications and will allow you to keep learning so you can be a better, more secure developer.

[Music] Just to refresh your memory, GitHub Copilot is an AI pair programmer that

helps you write code faster. To use GitHub Copilot, you must have a license. You can sign up for GitHub Copilot

license by visiting gh.io/copilot. Once you have access, you can install the extension in your editor.

Authenticate and you'll be good to go. To learn how to install the extension, check out the first episode in this

series. Now, let's say you want to create a rock paper scissors game in Python. We can start by creating a new

file and adding a comment in our code that says, "Create a rock paper scissors game where the player inputs their

choice and plays against a computer that randomly selects its move with the game showing who won each round. add a score

counter that tracks player and computer wins and allow the game to continue until the player types quit. Once I

press the return or enter key on my keyboard, you'll notice the text in gray that's being provided by GitHub Copilot.

This is called ghost text, and you can hit the tab key on your keyboard to accept the suggestion. Now, let's create

the main function for the game. Again, we'll see ghost text being generated by GitHub Copilot. If you hover over the

text, you'll get this menu option that allows you to see other suggestions. Accept a single word, accept the current

suggestion, and even open up the completions panel. So, you can see even more suggestions that were provided.

Let's take a look at what we have. You'll see a list of all the suggestions for varying ways this code could be

implemented. I'm going to go ahead and accept the first suggestion. I can either hit tab to accept or I can select

the suggestion from the completions panel that we have open right here. Let's invoke the function, run it in our

terminals and play the game. [Music] Okay, now that we have the MVP of the

game, let's update the game a bit. This time I'm going to use inline chat to allow a more flexible input handling. I

can highlight the portion of the code to update, press command or control I on my keyboard and write my prompt. So I can

say allow the user to enter R for rock, P for paper, and S for scissors. I can choose the model I want to use, hit

enter, and watch the updates roll in. [Music] Let's test the changes. And amazing,

they're working. The inline chat feature is really good at helping you apply quick fixes to your code. But if you

want to work more deeply, you can use Copilot Chat for that. GitHub Copilot Chat can help you with code

explanations, building out full MVPs, writing tests, fixing terminal errors, and much, much more. Let's use copilot

chat to create a graphical user interface or guey for our rock paper scissors game. Click the chat icon to

open up the chat panel. Then enter your prompt. Create a simple guey using a library like tkinter for the game.

You'll notice I have my file opened on the right hand side and it is displayed here in the chat panel as context. If

you don't want Copilot chat to use the currently open files for context, click the disable file icon and it will be

removed. However, best practice is to allow Copilot to see your currently open file so it can generate relevant code

for you. Let's reenable the context of the file. Choose our model. We'll be using cloud 3.5 sonnet today and send

the request. You'll notice a few things once the suggestion is complete. we have here

where it tells us that it's using the one file as reference. Then it provides us with the plan of action and the

actual code block that we're going to be using. We're also provided with the code citations that we can see right here in

the chat panel. You have a few options available to you. You can have the code read aloud to you. You can also retry

sending the request if you didn't like the response. and you can up and downvote the provided code. Let's take a

closer look at the code block that we were provided with. If you hover over the code block, you'll notice three

icons appear. The first is the apply in editor button. This allows you to quickly apply code changes in your file

with a single click. No need for copying and pasting. The next icon is the insert at cursor button which allows you to

insert the code block at the current position of the cursor in your file. Then we have the copy button that allows

you to copy the generated code. If you click the more actions button, those three dots that you see here, you'll see

a drop- down menu that allows you to run the code directly in your terminal or add the code to a new file. Let's use

the apply editor button to update the code. Great. You'll see here that the entire

file was changed. We can now accept, discard, or show or hide the changes that were made with the options right

here. Let's accept these changes and see what we have. It looks like Copilot Chat has

refactored the entire code to be a gooey based rock paper scissors game that has two main methods within a class. The

play method handles the core game logic and the run method starts the event loop of the guey window. When we run the

code, we see that we can now play the game more interactively. Okay, so let's take a look at some other

amazing things you can do with GitHub Copilot Chat. We've added slash commands to help you get explanations of code,

fix code, create a new notebook, write tests, and much more. There are shortcuts to common prompts that we

found to be particularly helpful in day-to-day development from our own internal usage. Open up Capella chat and

press the slash key on your keyboard. You will see a list of slashcomands that pop up that you can use. For example, I

can select the /explain command and get a full explanation of the code in my current file.

I can also use the /help command to get an overview of how GitHub Copilot can help me and a list of available

slashcomands and what they do. So if you're ever stuck, just remember slashhelp.

You can give Copilot additional context and help it to understand your questions by using variables in the chat

interface. You can attach a file with the hash file variable or search through your codebase with the hash codebase

variable. We have a list of variables available to you at the link in the description. Chat participants are like

experts who have a specialty that they can help you with. You can invoke a chat participant by typing at in the chat

input field followed by the participant name. Some of these include at workspace which has context about your entire

workspace, at terminal which has context about the integrated terminal in VS code and at GitHub which has knowledge about

your GitHub repository issues pull requests and can also search the web. So for example, if I invoke the at

workspace chat participant, I'll give copilot access to my entire repository. This may be helpful if I want to quickly

know where our function is defined or if I want to create a detailed readme of my project. One of the most recent and most

exciting features of GitHub Copilot is GitHub Copilot edits. With Copilot edits, you can start a coding session

quickly to iterate on code changes using natural language. It allows you to edit multiple files at the same time and

brings the conversational flow of copilot chat and fast feedback from inline chat together in one experience.

Let's use copilot edits to add a more detailed scoreboard to the game that we have. Since I have the VS Code speech

extension installed, I can use it to talk to Copilot edits. So I can say add a detailed scoreboard to track and

display the number of ties, player wins, and computer wins after each round. You can choose your model, attach relevant

files, and send the prompt. Once you do, you'll be able to see the responses being streamed in.

Let's click accept and run the game. We can see that the additional game stats were added on the guey for the

game. Copilot edits become even more powerful when you use it to edit multiple files at the same time. We'll

take a look at this in another episode. For now, I want you to remember everything you learned in this video

about GitHub Copilot. As you can see, it is much more than just code completion. It is a beautiful AI pair programmer

that can help you get your work done so much faster while staying in the dev flow. Look at this for example. Now that

we finished the game, let's push this for review in VS Code. Click the source control button. Stage your changes and

then click this sparkly icon in the comment message box. You'll see a commit message generated by GitHub Copilot. We

can take it a step further by getting code reviews in our editors. I can highlight a portion of the code. Click

the sparkle icon that pops up and select review using copilot. Now I can get an initial review of my

code before pushing it for final review from my team. You can also get this initial review by copilot done on

github.com if that's your preference. If you're using Jetrains IDE, you have access to Copilot Code Complete and you

also have access to Copilot chat. To see a full list of features available in Jet Brains, check out the link in the

description below. We're building the backend API for Plan Venture, a travel itinerary builder that

helps users plan their trips. A full description of what we're building today is included in the starter repository

that you can clone at this link. To build along with me, you'll need access to a code editor. I'm using VS Code,

have Python installed on your machine, and have access to an API client like Bruno to test our routes. You'll also

need access to GitHub Copilot. So, make sure you sign up for free if you haven't already done so. We'll be using the

Flask framework with SQL Alchemy for the database and we'll add authentication and full CRUD functionality for managing

trips. Each trip will include a destination, start and end dates and a basic itinerary structure with location

coordinates for mapping. We'll focus primarily on the MVP or the basic features needed to support the front end

that we'll build in the next episode. Our goal today is to create a working API that handles user authentication and

basic trip management. I would love for you to follow along and use GitHub Copilot to build with me. Now, let's go

to the codes. Okay, so on GitHub, navigate to this repository, gh.io/plan venture. Clone the repo and cd into the

plan venture API directory. Now, let's create a virtual environment. Open your terminal and type python-m

venv space venv. Click enter or the return key on your keyboard. Now type source venv/bin/activate

to activate and use the virtual environment. You'll know the environment is active when your terminal indicates

venv right here. Now let's install our dependencies. Type pip install-r requirements.txt txt. And finally, let's

start the basic server that we have. So, in your terminal, run flask run-debug. Your server should now be on port 5000.

Open up your API client to test that it's running. I'm using Bruno today, so in Bruno, I can create a new get

request, add the URL, and click run. I should get a message that says, "Welcome to Plan Venture API." And it looks like

we're ready to start building. So the next thing we want to do is to set up our database. So open up the

app.py file and open up copilot chat and type at workspace. Update the flask app with SQL alchemy and basic

configurations. Choose the claude 3.5 sonnet model and press enter to send the prompt. You'll get an output of a plan,

a code block, and a summary of the changes made from GitHub copilot. Let's take a look at what it just generated

for us. Let's accept these changes. So to update the app.py file, click this apply in

editor button and Copilot will make this update for us. Now let's save this code change in a new

file. Click the three dots here and select insert in a new file. Save the file and do the same thing below for the

other changes. Finally, let's install our dependencies. Return to Copilot chat and type at

workspace update requirements.txt with the necessary packages for flask API with SQL alchemy and JWT.

accept the changes by clicking the apply and editor button and save the file. Now let's create our user and trip

models based on the GitHub copilot issue that we were assigned. The user needs an email, a password, and we must include

password hashing and timestamps. The trip needs to have a destination, start and end dates, coordinates, and an

itinerary with a user relationship. That's a lot to get through. So, let's bring April in to help us get these

things done. >> Hey, Kadesha, are you ready to build these models?

>> Absolutely. >> All right, let's get started. Open up your IDE. We're going to navigate to

GitHub Copilot and then drop down to C-Pilot edits. Once we've navigated to Copilot edits, we want to attach the

files. Then, we want to choose the Claude 3.5 sonnet model and type create SQL Alchemy user model with email

password hash and timestamps. Add code in new files. Now, let's watch Copilot Edits get to work. It's going to give us

a plan. Then, you'll see that it's created some new folders, files, and it's going to give us the full code that

we need for our user model. Let's go ahead and accept these changes, save the files, and take a look at the code.

[Music] Hey, [Music]

hey, hey. [Music] Now, we're going to create a Python

script to create the database tables. We're going to go ahead and return to CopilotEdits and type in update code to

be able to create the DB tables with a Python shell script. [Music]

Accept the code and initialize the database. Open your terminal and run python init_db.py.

You'll see a new plan venture. DB file generated. Let's install an extension so we can see the tables. Navigate to the

extensions tab and search for SQLite viewer. Click install and then you should be

able to click on the DB instance and have a better look at the tables. Let's go ahead and create the trip model.

We're going to navigate back to copilot edits and type create SQL alchemy trip model with user relationship,

destination, start date, end date, coordinates, and itinerary. Every time I see co-pilot creating files

and generating folders, and updating code, my mind is absolutely blown. Let's accept these changes and see what we

have. [Music] [Music]

Cool. Now let's run python init_db.py to add the trips to the database. Awesome. We just completed those

database models in record time. Let's commit our changes and work on the authentication next. And this actually

brings me to a great hidden gem in VS Code. Navigate to the source control button here and stage your changes. Now

this sparkly icon here, click it and you will see copilot generate a commit message. How cool is that?

If you notice, I always make sure that I'm reviewing the suggestions that Copilot provides. This ensures that I

catch any errors right away and I can adjust the code as needed. So far though, it's doing a pretty swell job.

So, I was just taking a look at this GitHub issue to build the author plan venture. For our authenticated user

route, I wanted to make sure that we include password hashing and salt for extra security. So, we're going to go

ahead and go back and open up copilot edits again. create password hashing and salt utility functions for the user

model. Let's take a look at what's been generated. We can click the file links

here that were changed by copilot edits. So, let's click on each file and see what it's outputed.

Let's accept these changes. Now, let's set up the JWT token and validation. Continuing on in our GitHub Copilot chat

window, we're going to go ahead and type setup JWT token generation and validation functions. We can see changes

are being generated. And let's have a look at that. Hey,

[Music] hey, hey. Hey,

hey, hey. [Music]

[Music] Hey, Let's save these changes and install the

JWT package. Let's create the actual route so we can register a new user. We'll continue to type in the chat

window with GitHub Copilot. Create all roots for user registration with email validation.

Let's accept these changes and have a look at GitHub Copilot's output. [Music]

[Music] I don't [Music]

Really cool. That was so nice to watch. I guess it's time to test our registration route. It is absolutely.

We're going to go ahead and use Bruno today. So, let's head over to Bruno. We're going to add our own URL. So, it's

going to be the base URL/register. We're going to make it a post request and we're going to add our JSON body.

So, I'm going to say email [email protected] and password test1234. Super secure. very secure.

>> Now, of course, that password is just for this demo. Make sure to use a much more stronger password for your login.

>> Yes. And we don't need to set any off token yet because we're going to get that access token from the server when

we register. >> Exactly. So, let's set up our headers. So, I'm adding content- type

application/json. This looks really good. So, let's run this and hope for a 200 response.

>> Sweet. It's working. Amazing. If we go to our Plan Venture DB, we should see the user now showing up once we refresh

the file. Perfect. We have test at.com in our database. >> It looks like everything is working

really nicely. >> Absolutely. Let's add the login route. >> Nice. We're going to keep using copilot

edits because it's just so fun and honestly easy to use. Create login route with JWT token generation. This should

give us the full route that we can accept and test right away in Bruno. Okay, now it's time to test the route in

Bruno. So, I'm going to add a JSON body with the user email and password that we've already previously registered. I'm

also going to add the content type header with application/json. Again, let's make it a post request and

hit send. Nice. So it looks like our login route is working and our user is able to register and login successfully

and we built these routes pretty seamlessly using natural language and the power of GitHub copilot edits. That

was so much fun. >> The next thing that we need to do is an off middleware to protect our routes.

Ah, of course. Let's head back into GitHub copilot edits to get this done. Type in create off middleware to protect

routes. Now, here's a bit of an Easter egg for you. If you're using Visual Studio Code locally, you can speak to

Visual Studio Code using your natural voice. >> Oh, and that's because of the VS Code

voice extension, right? >> Absolutely. >> It is so much easier and more convenient

to speak instead of typing sometimes. So, let's take a look at the changes. >> Let's accept these changes and test the

roots again to definitely make sure that they're working. Oh wow, it looks like everything is

working perfectly. >> Yep. And that means authentication is complete. So let me go ahead commit

these changes and push them in for review. >> Wow, that was so much that we got done

in such a short time. There's one more route that we need to do, but thanks so much, April, for all that work that you

did. Let's take a look at the GitHub issue for the next route and keep working. Okay, so it looks like the trip

route needs full cred operations with a default itinerary template. Let's continue using copilot edits to get this

done. So I'm going to pop open copilot edits and type create trip routes blueprint with CRUD operations. So I'm

expecting to get the create, read, update, and delete routes with this prompt. So let's take a look at what was

generated. [Music] [Music]

Hey, hey, hey. Hey, hey, hey, hey, hey, hey, hey, hey, hey, hey,

[Music] [Music] hey.

Okay, let's accept these changes, save our files, and test the routes. [Music]

The first route to test is the create route. Let's add the URL /trips. Now we can add our JSON body with the

destination, start date and end date like so. Make it a post request. Add our headers content- type application/json

and authorization which is going to be our bearer token. Let's log in a user. Grab the access token. Return to the

create trip request in Bruno and add the bearer token. If you're using another API client, add your token in the

appropriate area and let's send the request. [Music]

[Music] [Music] [Music]

Give me the heat. Amazing.

[Music] Now, let's add the default itinerary template. Open up edits and type create

a function to generate the default itinerary template. Let's take a look at the changes, accept them, and save the

files. But first, let's make sure that we review the code that we just got from Copilot.

[Music] Hey, hey, hey.

[Music] [Music] [Music]

[Music] Hey, hey,

Hey, [Music] hey,

[Music] Hey, [Music]

Hey. [Music] Okay. Now when we run the get trip by ID

route, we should get an itinerary attached to it like so. Amazing.

Everything is looking really good. There's so much more that we can add to this API, but this is looking good for

this project. Let's set up cores and add a basic health check endpoint and be done with the MVP.

[Music] [Music] Great. So, let's accept these changes.

And it looks like we just completed the MVP of the API, which means you just built an API with GitHub Copilot.

>> Cadia, before we wrap up this MVP, we probably need to add some documentation in the readme.

>> Uh, that's a really good point. And we should also add some tests. >> Absolutely. So, I like to use GitHub

Copilot Chat to quickly and efficiently write readmes for me. So, I'm going to go ahead and open up GitHub copilot chat

and type in at workspace create a detailed readme about the plan venture API. I can click and get the full readme

file that I can just now pop into the API readme documentation and we're done. Ah, that is so lovely. Now, there's

truly no reason for us to have empty readme files. I want to show you how to build a

front-end project with GitHub Copilot. And what better way to do that than to build a React client. Now, let's take a

look at what we'll be building. So, we're building the front-end client for Plan Venture, a travel itinerary

builder that helps users plan their trips. This project builds on top of the previous episode where we built the

backend API with Flask and GitHub Copilot. To build along with me, you'll need access to a code editor. I'm using

VS Code, the most recent version of Node.js, and a package manager such as npm installed on your machine. Or you

can open up a code space to build in the cloud. You'll also need to be familiar with building clientside applications

with React as that's the library we'll be using today. We'll be using React with VIT for the client and material UI

as the component library for ease of styling. We'll add protected routes, allow users to add their trips and

itinerary information with the ability to make updates as needed. Our goal today is to create a working front-end

app that handles user authentication and basic trip management. A full description of what we're building today

is included in the starter repository that you can clone at this link. I'd love for you to follow along and use

GitHub copilot to build with me. Now, let's go to the codes on GitHub. Navigate to this repository gh.io/plan

venture. Clone the repo and cd into the plan venture client directory. You'll notice that we have a pretty barebones

React app with vit already set up for us. Let's install our dependencies and start the dev server. Open your

terminals and run npm install. Your server should now start on localhost 5173 and you should see this UI in your

browser when you click the link. Amazing. Now let's take a look at the code and see what we have. We have

protected routes already configured with React Router DOM. We also have material UI configured for styling and a basic

navbar and footer in the homepage. We have our off contacts and the main layout component already configured and

actually I can come in here and open up copilot chat and ask at workspace tell me about the configuration setup in the

react app. It will give me a detailed description of all the code that's already in our directory. This way we

can get up to speed much faster. Awesome. Now that we know what we have, let's take a look at the GitHub issue

that has the details of what we need to build. So it looks like the first thing we need is to set up authentication. So

we'll need to build a login and a registration form. Let's first create an off layout component that we can use for

all authenticated routes. Open up copilot chat and type at workspace create off layout component with

navigation and centered content. Click the three dots and insert the code into a new file. Now let's take a look at

what was generated. Great. Let's save the code. And now let's create a login form to implement

the off layout component. Open up copilot chat and type at workspace. Build a login form component with the

email and password fields and validation. Let's now create a new folder named off

in the components folder. Return to Copilot Chat and click the three dots again. Select insert into new file. Save

the file in the off folder. [Music] [Music]

Now, let's update the home component to route us to the login page. Open up copilot edits and type update the navbar

to use the new login page and add a get started button to the homepage that routes us to the login page.

[Music] [Music] Let's review the code, accept the

changes, and refresh your browser page. Now that that's resolved, let's commit our

changes and take a look at what we have so far. Great. You will see the new get started

button on the UI and the login page. Now let's create a signup page so new users can register. Open Copilot chat and type

at workspace. Create a signup form component matching the login form style and a new signup page. Be sure to update

routing. Select insert into a new file to save the signup form into the off folder. Go

back to copilot chat once again and click the three dots. Select insert into a new file to save the signup page. Save

that file in the pages folder. Open your routes.gsx file and click the apply in editor button from the updated code

block that we were given from GitHub copilot. [Music]

refresh your browser and test out the new pages. Let's commit our changes and then update

the off context file. Open up offcontext.jsx JSX file and also open up copilot chat. Then type setup

authentication context and token management. Type hash file and attach the protected routes.jsx file. Click the

apply and editor button to accept the changes in the offontext.jsx file. And let's review the changes.

Open up the protected routes.jsx file and click apply in editor and accept these changes.

If any errors come up, we're going to resolve them with GitHub copilot. Now, let's move on to making a request

to the backend server so we can register and login. For that, I'm going to bring in Christopher to help us build faster

>> to create the login and the signup forms. We are going to wind up working across three files. Fortunately, GitHub

copilot chat has an ability to allow us to edit multiple files at one time. We're going to add those files into chat

and then instruct Copilot to create both the login and the signup forms. We can explore all the code that has been

generated, ensure that everything works and apply that in editor. Hey,

hey, hey. Hey, hey, hey.

Once we've applied those changes, now we can return to the site and actually test everything. And we can see that we can

register a brand new user and that we can log in as that brand new user. Whenever we're creating a website, we

want to make sure that it's easy for people to do some of the most common tasks, we want to make sure that they

are able to very quickly log in. So, we want to add that to the navbar on the left side. Returning back into Copilot

Chat, we're going to do that same thing of working across multiple files. We'll instruct Copilot Chat to add in that

functionality to the navbar. Explore the changes again that it's made. And let's go back to the browser and make sure

that everything looks good. We can now see that login link inside of our nav section. Let's test that and make sure

that we can still log in as that user that we created previously. Continuing down this path of making sure

that our users have easy access to the information that they're going to be most frequently interested in. Let's

update that dashboard to add in information about their trips. We'll then tell Copilot to build out that

dashboard layout with the sidebar navigation. Copilot will generate the code and just like always, we'll want to

review the code and make sure that it looks good. Now that we have that layout, let's

create that trips card and the trips list component to showcase all of those trips. Going back to Copilot, we're

going to have it create the trip card and the trip list component for displaying all those trips. And we'll

tell it to also add a message for the various loading states. We'll also tell Copilot to generate the dashboard

component to display the trips that users are routed to on login. If a user has no login, then we want to show them

a welcome message on that dashboard. I also want to make sure if there's an error when the user runs the site that

we display a fun little error message. I'm going to tell Copilot to add that in and to add in the assets into the

appropriate folders. [Music] [Music]

Let's save all those files, review all the changes, and make sure that everything looks good.

One thing I want to highlight here is the fact that we were working interactively here. And this is one real

big thing whenever you're working with Copilot is that you can take a look at what it's done and provide additional

suggestions. So, you don't need to bundle everything up into one huge prompt. And now let's return back to the

site and see how all of this works. We've got the login, the logout, and all of the error code all working properly.

If you notice, I always make sure that I'm reviewing the code changes that Copilot provides. This ensures that I

catch any errors right away and then I can ask the AI to make updates or I can adjust the code manually as needed. So

far though, it looks like we're doing pretty well. >> Wow, we're making such great progress

here. Thanks so much, Christopher, for all your help. Now, let's move on to the actual trip management side of things.

We need to create a new form that allows users to add their trips and save them to the dashboard. We'll need to make a

post request to the /trip/new route. And for the date picker, we'll use the dayjs library. Let's open up copilot and get

started. Type create a new trip form with destination and date inputs. Use dayjs library. Open up your terminals

and install these dependencies. We need dayjs for the date picker and we also need mux date picker to work along with

it. Let's review our changes. Accept these changes. And now let's test

out our UI. Let's go back to copilot edits and type create an itinerary day and time slot

components for managing daily activities with editing capabilities. Let's review our changes, accept these

changes, and save our files. Okay, so open up copilot edits and type. If the user doesn't have an itinerary

for their trip, prompt them to add an itinerary. Also include a default itinerary template.

Let's review the changes, accept the changes, and save our file. [Music]

Wow, we just built a fully functional MVP of the application in a short time with GitHub Copilot. This is truly the

power of building alongside an AI tool that just works. Probably the most basic question when

writing code is this, does it work? And the way we find this out is by running the application. But as our codebase

grows and becomes more complex, this act becomes tedious and honorous. Fortunately, we can automate this by

creating tests. Let's talk about testing, unit test, and this thing called testdriven development.

Before we get started, I want to highlight that our goal today isn't to dig deep into the nuances of testing.

That could be its own series. Instead, we want to highlight the core concepts and how we can get started testing our

code. Today, I have a very special guest, Christopher, to help us get up and running with all things testing with

GitHub Copilot. >> Thanks for the intro, Cadia. Now, let's get started with some definitions. What

is testing and why is it important? Testing is sort of as the name implies ensuring our code does what we expect it

to do. This can take many forms. We can have acceptance tests where we make sure our app meets a certain set of defined

functionality or integration tests where we ensure that our app is able to talk across the various systems like

databases and the APIs. And we have unit tests which is what we're going to focus on here where we test small units of

code. Unit tests are focused on the code itself and are broken down into small well units. These are small atomic

isolated actions that our code performs. It could be things like ensuring a number is within a range or an error is

being thrown at a correct time or that a value is returned. But why are unit tests important? Well, it allows us to

ensure our code is performing the way we expect it to. As Cadia highlighted at the beginning, if we don't actually run

our code, how do we know it works? And we're doing that at a very low level in an automated fashion with unit tests.

And that's what's great about that process. You can literally have thousands of tests which run at a

command and quickly give you the status of your application. Additionally, they can let you know if any changes you made

to your code have broken something you weren't expecting, which is something I think we've all experienced. Now, let's

ask Copilot to create some unit tests and explore them. I'm going to start by opening up the validators pi file and

highlighting the validate email format function which will focus copilot's attention on that function. I open up

copilot chat and you'll notice that it will actually suggest utilizing the slash command tests as you might expect.

That will actually help us quickly create our tests. When I run this for the first time, Copilot will ask whether

or not I want to configure a testing framework for our project. I'm going to dismiss this. I'm going to just stick

strictly to setting up unit tests. It will give me a little bit of an overview of what it wants to do and then generate

the code for me. What I'm going to notice is it's testing the function both on it succeeding. So, in other words, it

is a valid email address. And if it's failing, I can now add this into a brand new file called test validators. I now

have my collection of tests for that function. And if I run these tests, what I'm going to notice is it will come back

and tell me that everything succeeds. Now, let's shift our focus to TDD or test-driven development. This is one of

those times where breaking down the English words actually gives us a really good explanation of what the terminology

means. We've already covered tests making sure that something works. Driven in English is something which leads or

guides us and development is of course writing code. So in a nutshell, TDD is allowing the tests to drive how and what

we develop as we are writing our code. Specifically with TDD, we actually write our tests first and then the actual

implementation. This gives us a lot of great advantages. And the way that you'll typically walk

through this is in a pattern known as red green refactor. Now, it does take a little bit of time to adjust one's brain

to this approach, but as I highlighted, there are a lot of advantages. It gives you the opportunity to see how your code

will actually behave before you've written it and ensure that the tests you write are testing what you expect them

to test. So, you'll write those tests first. They'll fail because you haven't actually created the code. It might not

even build because of that fact. You then create just enough code for the test to pass. So if I'm testing that an

error is thrown if a number is less than zero, then that's all that I'm going to write for the code to do. Then when you

rerun the test, it works. That's the green part. This gives you the assurance that you've actively made a change to

the codebase to implement the desired functionality. Finally, you implement any refactoring to make your code look