1 of 53

Intro to Source Control

via GitHub

Alex Higuera - Senior Software Engineer @ Cengage

February 27, 2021

2 of 53

Intro to Source Control

Via GitHub

3 of 53

Please refer to:

https://github.com/alexfigtree/cincyhacks/blob/master/README.md

Directions are there ^^ for installing the following:

  1. Git: https://git-scm.com/download
  2. GitHub Desktop: https://desktop.github.com/
  3. Text Editor: https://www.sublimetext.com/3

Before we begin:

4 of 53

What we’ll do in this workshop:

  • PART 1: Introduction:
    • Go over the whys and hows of source control
    • Review Git basics
    • Create and account and take a look at the Github landscape
    • Review GitHub best practices
  • PART 2: Workshop
    • Section 2A: Creating your first repo - Modifying code on GitHub.com
    • Section 2B: Contributing to a shared repo - Modifying code on your local computer

5 of 53

Why do we need Git for this hackathon?

From WIKI:

Git is a version-control system for tracking changes in computer files and coordinating work on those files among multiple people.

It is primarily used for source-code management in software development, but it can be used to keep track of changes in any set of files.

TL;DR: If you’re working on a team and want to contribute, a git repository shared between team members is a great way of keeping track of who did what.

EX: Google Docs

6 of 53

Why do we need GitHUB for this hackathon?

GIT versus GitHUB:

Git: version control system/process. �(Free, open source)

GitHub: best known social web-based hosting service for Git, plus bug tracking, wikis, social code review, etc.

7 of 53

Part 1. Introduction:

Why Source Control?

Source control (or version control) is the practice of tracking and managing changes to code.

  • Backup/Restore/Undo
  • Code History
  • Collaboration (in parallel)
  • Sandboxing (try things, discard them)

8 of 53

Version Control - Single Document

You’re already familiar with tracking changes within a single document.

9 of 53

Version Control - Whole Project

Git allows you to track changes to a repository (repo), which is an entire directory containing things like:

  • Code
  • Docs (=Documents)
  • Config (=Configuration)
  • Images
  • Large files (via LFS)

10 of 53

Git Terminology

  1. Commit
  2. Diff
  3. Branches
  4. Checkout
  5. Clone/copy

11 of 53

  1. Commits

a Commit ��A set of changes to one or more files, given a title and description.

$ git status

On branch master

Changes to be committed:

modified: index.html� modified: README.md

all of these changes will be included in the commit

12 of 53

Commit Messages

Commit messages describe each set of changes:

Changes to be committed:

modified: index.html� modified: README.md

$ git commit --all --message “Fix spelling on front page”

13 of 53

2. Diff

Diff:

a way to view changes (differences) between files

$ git diff

<<Changes to your code shown here>>

14 of 53

3. Branches

Branch �A named chain of commits.

Provides sandboxes, ways to safely edit the project by several people.��Examples: �master or fix-shopping-cart

individual commit

15 of 53

4. Checkout

checkout �A way to switch between branches.

$ git status�On branch master

$ git checkout fix-shopping-cart�Switched to branch ‘fix-shopping-cart’

16 of 53

5. Clone/Copy - Getting a Copy of a repo

Official repo�github.com/facebook/react

Your copy�github.com/alice/react

fork

clone

Local copy on your machine��~/Documents/react

17 of 53

Making Changes: Add & Commit

Make Changes

Add changes to �Staging Area

Commit staged changes

git add *

git commit -m “...”

18 of 53

Making Changes: Add & Commit - GitHub Desktop

`git add`

`git commit -m ‘Update form.html’ `

`git diff`

19 of 53

Contributing Back

Official repo�github.com/facebook/react

Your copy�github.com/alice/react

Pull Request

pull

Local copy on your machine��~/Documents/react

push

Pull: downloads the latest changes from repo (refresh)

Push: sends changes you made to remote repo. (After you made some commits)

20 of 53

Git Advice and Best Practices

Git is Intimidating at First (It’s Not Just You)!

But it’s worth learning

Git makes it easy to recover from mistakes

Small and frequent commits are better than giant ones

Sync up with others frequently (Pull early and often!)

Learn the workflow and etiquette of your team

21 of 53

The GitHub.com Landscape: www.github.com

22 of 53

The GitHub.com Landscape: www.github.com

23 of 53

The GitHub.com Landscape: www.github.com

24 of 53

Creating a new repository on GitHub.com

We’ll review this in detail in the next section:

25 of 53

Part 1: Questions?

26 of 53

Part 2: Workshop

Section 2A: Creating your first repo:

  • Create a GitHub account and repository
  • Modify code on GitHub.com - your first README

Section 2B: Contributing to a shared repo:

  • Clone a shared repo locally on your computer
  • Modify, commit, and push code using a terminal (Git Bash, Terminal, or Command Prompt) or GitHub Desktop
  • Create a pull request

Great reference: https://guides.github.com/activities/hello-world/

27 of 53

Part 2A: Creating your first repo

In this guide, we will learn to:

  • Create an account and repository
  • Start and manage a new branch: `readme-edits`
  • Make changes to a file and push them to GitHub as commits

28 of 53

2A: Creating a new account on GitHub.com

29 of 53

2A: Next steps

  • Take note of your account’s username

  • Post your username to zoom chat so I can add you as a collaborator to our workshop’s GH repo (for Section 2B)

  • Proceed to create a new repo (next slide)

30 of 53

2A: Creating a new repo with your account

31 of 53

Configure your new repo - include README:

32 of 53

Modify the README file in your new repo

33 of 53

Make updates to README

34 of 53

Preview changes before committing

35 of 53

End result: Changes made to your README:

36 of 53

Finished with 2A? Let’s continue with 2B:

37 of 53

Section 2B: Making local changes

In this guide, we will learn to:

  • Use terminal commands or their equivalent functions in GitHub Desktop
  • Clone a repository locally to your computer:
    • https://github.com/alexfigtree/cincyhacks
  • Create your own local branch
  • Commit modified changes - add your name to `hello.txt`
  • Push changes (But Pull first!)

38 of 53

Section 2B: Making local changes

Reference/detailed instructions: https://github.com/alexfigtree/cincyhacks

Before we begin, make sure you’ve:

  1. Installed git. See detailed instructions in CincyHacks repo:
    1. Download git here: https://git-scm.com/download
  2. Installed GitHub Desktop (if not using Terminal)
  3. Installed a text editor of your choice (I recommend Sublime Text 3)
  4. Accepted the invitation to collaborate on the ‘alexfigtree/cincyhacks’ repository (check your email)

39 of 53

Installing Git

40 of 53

Using Terminal or GUI

41 of 53

Text editor for code:

42 of 53

Section 2B: Find the repo

Git Bash or terminal:

Copy the web URL for use in terminal:

GitHub Desktop:

Open in GitHub Desktop:

https://github.com/alexfigtree/cincyhacks

43 of 53

Section 2B: Clone the repo

Git Bash or terminal:

GitHub Desktop:

Open in GitHub Desktop:

$ git clone https://github.com/alexfigtree/cincyhacks.git

OR

Your team’s repo?

44 of 53

Section 2B: Make a local branch

Git Bash or terminal:

GitHub Desktop (yes, publish branch):

Git Bash or terminal:

$ git checkout add-myself-to-list

45 of 53

Section 2B: Making modifications

  1. Navigate to your ‘cincyhacks’ repository, now saved locally on your computer
  2. Make sure you’re on your new local branch, ‘add-myself-to-list’ or whatever you’d like to call it
  3. Open ‘hello.txt’ using the text editor and add your name to the list
  4. Save file
  5. Get ready to commit!

46 of 53

Section 2B: Committing your changes

GitHub Desktop: Changes should automatically show

Git Bash or terminal:

$ git diff

<<See changes here>>

$ git add .

$ git commit -m “personal-commit-message-here”

$ git pull

$ git push

→ 2. Write your commit message here

→ 3. Press this button

1. Pull the latest changes (will show as ‘Publish Branch’ if branch is new)

47 of 53

Section 2B: Confirming your commit

Go to the repo’s github url to see your commit - click on `main` dropdown and look for your branch name:

48 of 53

Submitting a Pull Request to add your changes to the Main branch

On your branch view, click on Compare & Pull Request:

49 of 53

Submitting a Pull Request to add your changes to the Main branch

Opening a PR:

50 of 53

Submitting a Pull Request to add your changes to the Main branch

PR Created!

51 of 53

Submitting a Pull Request to add your changes to the Main branch

  1. Watch out for Merge Conflicts
  2. Keep checking the GitHub web page for ‘cincyhacks’ to see your changes merged into Main!
  3. Done!

52 of 53

Questions?

DONE!

Feel free to contact me via email:

  • alex.higuera.cengage@gmail.com

53 of 53

THANK YOU AND GOOD LUCK!