In this video we're going to talk about get and GitHub and source control.
Now, you might remember GitHub from our previous section where we used it to put the website online,
but I'll show you that it is so much more than that.
More importantly, get in.
GitHub is used by most professional companies and it is a skill that is expected to be known by all
developers now.
So this is an important section.
One of the first things most developers have to do on their first day of the job is to get something
called a pull request, which uses Git and GitHub.
We'll get through that in this section.
Don't worry, you're going to learn all of this and it's going to make sense.
Let's first start with source control.
Up until now, we have only worked on small files.
No team members, just ourselves.
Just a couple of files.
But in real life, you're most likely not the only developer on a team.
Most likely the projects are huge.
There's many, many files.
Source control allows us to make sure that multiple people can work on the same file from different
locations.
Think of it as Google Docs that allows people to collaborate on one document.
But enough talk.
Let's actually check it out.
I have over here set up two folders.
One is for myself Andre who just started a new job but X company and I have Marci here who has been
working at the company for a while and she has project files over here.
I'm actually using the files from our background generator video.
Now, without Git or GitHub, what I can do is just copy and paste these files.
So I have whatever Marci has and we can start working on these files.
I can have my developer environment here with my terminal and my sublime text, and I can work on whatever
changes that need to be made on the app.
And Marci.
Over here also has her own version where she can work on it.
And we're both working on the same project.
But let's say that both Marcy and I are working on this project and she decides to change the project
name from gradient background to super background.
And at the same time in my project, I decide to call this cool background.
Well, now you'll have to set up a meeting between myself and Marcy and decide how we should change
the code.
And this is a small example, but you can imagine that as different programmers work together, there's
always going to be this issue of one person changing one thing and another person changing another thing.
This is where source control came in, and social control is a way to control this, where we have one
place instead of our own computers.
In this case, it's just represented by the folder that I have in here, instead of each of us having
a copy of the project with Source Control.
We have a copy of the project, but there is a centralized location up somewhere, maybe owned by the
company or somewhere on the internet that has the ultimate version that we each talk to to make sure
that we each have the same version.
Getting GitHub is a way to do this, to be able to use source control.
And as a matter of fact, it's the de facto way of doing this.
So like I said before, this is most likely the tool you'll be using every single day at your workplace.
So if I go to the GitHub website here, what it allows us to do is it's a place, a central place that
both Andre and Marci can talk to.
So even though we work on the same files, the same project.
I can ask this central location such as GitHub.
Hey, has Marcy made any changes?
And Marcy can ask.
Hey, has Andre made any changes?
And every once in a while you'll get something like this where we have cool background and super background,
where we have something called a merge conflict.
What GitHub allows us to do is say, Hey, I notice there is a merge conflict.
I see that you guys have both changed your background.
I don't know who's right, but here's the information.
Andrei Marcy, can you guys talk amongst yourself and figure it out?
That's pretty much the workflow.
So let's actually see what this looks like.
The first thing we want to do is set up a GitHub account.
If you haven't done it in the previous exercises, you absolutely should start a GitHub account.
It's free.
And like I said before, if you're a developer, you just need to have it.
It's where everybody puts their projects, it's where you work.
You'll be spending a lot of time on this website.
You might remember that when we had the GitHub project, I also told you to get GitHub for desktop.
Although we use that to make things simpler during the video, this is actually not the recommended
way of doing it.
It allows you to visually see and interact with GitHub, but it's kind of looked down upon by employers
and most people use the terminal or the command prompt to actually do this.
So I won't be teaching you this way just because I think it's bad practice and getting used to the terminal
is important.
I'm going to close that and we're going to get this started.
The very first thing we're going to do is we're going to click on Start a Project.
And here we're going to call it whatever we want.
We'll call it background generator.
And you also want to leave it as public, and we want to click on initialize this with a read me and
we'll click Create Repository.
And what that does well, we've created a new project on GitHub.
And here the read me, which is just a file that describes your project.
You can see that it's here.
We can type into the read me whatever we want and it'll describe our project.
But let's go back.
If Marcy let's say Marcy has been working at this company for a long time, I'm actually going to remove
my files here.
Marcy has been working at this company for a long time and the employer finally decided, Hey, we need
to use GitHub, we're going to hire this new guy.
Andre.
We want to make sure that you both can work on it, on the project together without any issues.
Can you put the project up on GitHub?
So what Marcy will do is she will go to GitHub, create background generator, and then she's going
to click right over here to clone or download and she's going to make sure it says Use HTTPS.
And from here you just click on this button which copies this link to your keyboard, then Marcy.
Goes to her terminal.
And right now, we're in documents.
We want to have the project in the Marcy folder, so I'll seed into Marcy if I click LRS, I see that
I have my files now.
The first command that we're going to learn is called Get.
Clone.
And then copy and paste what we copy from the website.
We're just saying hey clone this project from GitHub dot com.
So I press enter and there you go.
Everything is downloaded.
If I go back to the folder now, I see that I have background generator.
If I double click this, you'll see that I have a dot git folder here that's actually hidden.
You might not even see it on your laptop if you don't have this feature on your computer enabled.
But this dog get now allows me to communicate with GitHub.
So what we can do now, Marcy can copy and paste these files and put it into background generator.
Now let me show you the next get command, Marcy.
Right now, if we see she's in her folder, but now we need to go into background generator because
if we do any git commands here, well, it won't work because it's not a git project.
We need to actually go inside of the project that was created on GitHub.
So I'm going to seed into that directory.
Notice here I have my terminal set so that it actually shows me what GitHub location I'm in and I'll
explain what master means later.
Now that we're here, we can look at all our files.
Yep, I see that.
Now I have my read me, which I created on GitHub plus the files that I copy and paste it.
We need to think this so that if I go into my background generator instead of the read me files, Marci
can put up her files on GitHub.
The way we do that is our second command get status.
It tells us that we have on tract files.
That is, we have indexed HTML, script, JS and style that are on tract and it says use get add file
to include what you what will be committed.
So now that we see our status of what we have in our folder, we can say get, add and the file name
so I can do index dot HTML, get add script JS and get add style dot CSS.
Let's clear this so we can see it.
And now I can do get status again just to see what our status is.
And now I have your branch is up to date changes to be committed.
You see that now with ADD we've said, hey, we want to add these changes.
We have new files that we've added and says to be committed.
So the second step is to do something called get commit and get commit says, Hey, I'm committing that.
These are the changes that I want to make to GitHub and it allows you to pass a message so that on GitHub
it'll show the message.
When Andre comes back in, he can say, Oh, Marcy added these files and this is the message.
And we do that by doing this.
And within here, within the double codes, I can say adding starting project close the bracket, press
enter.
I'm going to clear this now there's one last step we've added.
We get add to add our changes, then get commit to commit and say, Yeah, we're locking in those changes.
And then finally we need to let GitHub dotcom know that these are the changes.
So we do get push.
And there you go.
It has now been pushed to this repository.
So if I go back.
And I refresh.
Look at that.
It's the same thing that we did when we put up our first website online.
But instead of using the desktop version of GitHub, we use the command line and now we have our project,
which is very good.
Now let's go back to our example.
So Marsha has been working on this project.
There's a good repository and I just joined the company and now I need to start working on this.
What do I do now?
I need to access GitHub and get the copy of Background Generator.
The way I do that.
Well, I go into my folder.
And I do the same thing.
I do get clone and then I copy and paste the repository just like before.
Get clone and clone the repo.
And there you go.
If I go back to my folder, look at that.
I have background generator.
So we're both working now on background generator, but not off of each other's files.
We're working with whatever version is on GitHub.
All right.
So now more realistic, we go back to working.
And the first day of my job, I say I'm going to change the gradient background title, actually the
H1 tag to cool generator.
If I save this and I do get status.
Oh, well, I'm not in a repository right now.
If you remember, I have to go into background generator.
Let me open that up a bit so we can see.
There you go again.
These commands won't work if you're not in a folder that has a docket folder.
So let me do that CD into background generator.
I'm going to clear this and I'm going to say get status and look at that.
It tells me that I've modified indexed HTML file and if we remember I will say get add.
I only have one file I can do indexed HTML.
But if I wanted, if I had multiple files and I want to just commit all of them at once, I can just
do the period.
So I'll do that and then get commit and I'll add a message changing title.
I press enter.
I'm going to clear this.
And again, I do get push.
And it looks like everything went through.
So let's open that up and check it out.
I Now refresh your.
And well, we haven't seen any changes, but we now see that we have three commits.
We have the initial commit, the adding background project that Marci did, and it shows you all the
files that were added.
And if I go back, I have the changing title commit and now I see that.
Yeah.
Andre just change the background generator, which is in red to cool generator.
So as you can see, we have a history of all the changes and we can always go back if there's any mistakes.
But there's one issue right now.
If I go back to the code and I go to Marcy's computer, I see that.
Well, she still has background generator here.
Why is that?
Well, because her computer doesn't know that GitHub has been updated.
The next command I'm going to show you this is the last one I'm going to show you in this video is get
pull.
So remember, get push to push the changes to get ABC.com and get pull to pull whatever is the latest.
So I do get pull.
And there you go.
You see over here that it shows me that indexed HTML file was was changed.
Now you see that my.
Title has been changed to Cool Generator.
Let's just say that Marci saw my first change and she really, really likes how I've added cool generator,
but I think she wants to make it capitalized again.
She's going to save that.
She's going to say get status.
All right, I have my indexed HTML file, get add, then get commit and I'll add the message copy to
lies title.
And then get push.
There you go again.
I go back.
I refresh and now there's four commits and we see that capitalized title.
Is.
The new changes.
The first day of work is done.
I come into the next day of work and well, I want to start with whatever the latest project is of background
generator.
And let's say Marcy worked all night to change that title to Cool Capitalized.
I want to make sure that I have the most updated version.
So what I do is when I get into work in the morning, I'll say, Well, I want to make sure that if
there's any changes that Marcy made, I know about them.
So I'm going to say get pull and notice here how the title's going to change after I do the pull.
And now I click to Sublime text and there you go.
Cool generator.
All right.
And the next video, we're going to expand on this and show you what happens if both Marcy and Andre
make the same changes.
What does GitHub do?
I'll see you in that one.
Bye bye.