Github For Teams

Leon Noel

#100Devs

Sponsored by Microsoft Azure!  

Agenda

• Let's Talk -  #100Devs & Thank You Microsoft Azure

• Learn - GIT / Github Basics 

• Learn - Projects / Repos / Copilot

• Learn - Issues / Pull Requests 

• Learn - Code Review

• Learn - Merging

• Learn - Dev vs Prod

• Learn - GitHub Projects

• Homework - Intro. to Git & Github

Questions

About last class or life

Checking In

Like and Retweet the Tweet

!checkin

https://aka.ms/TeamGitHub

Who is this for?

*Played around with git and maybe Github

Community Rules

Github Code of Conduct
https://github.com/microsoft/virtual-events

!githubcoc

You Are Not Alone!

!100Devs

leonnoel.com/100devs

THANK YOU

Microsoft Azure you a real one

SECRET !NEWSLETTER RAFFLE

Let's GIT IT ON

First, The Terminal

Terminal, Bash, Git Bash, Unix, Shell, CLI, cmd 

A place where you can type commands that cause actions

CLI > GUI

Command Line Interface vs. Graphical User Interface

Let's Look

The Terminal

Common Commands

pwd

(print working directory) shows where you are

mkdir

(make directory) create a folder

cd

(change directory) move to a different folder

cd ..

goes up a folder

cd ~

go back to home folder

touch

create a file

ls

shows you all the files in a folder

ls -l

shows you all the files in a folder with more info

ls -la

shows you all the files in a folder including hidden

rm

removes a file

rm -r <folder>

removes a folder

rm -rf <folder>

removes everything even protected files - be careful!

clear

clears what is currently being displayed

code filename

Opens file in VS Code

In VS Code:

view -> Command Palette ->

Shell Command: Install 'code' command in PATH

Access The Terminal?

Mac & GNU/Linux

Applications -> Terminal

Windows

Git Bash

https://gitforwindows.org

(for today)

WSL

Let's Code

Normal Folder Setup

!raffle

WHAT IS GIT?

While working on a really important Word Doc what did you do?

What if you wanted to work with someone else?

Git solves this problem when working with code

(save points)

Git is a version control system

A really fancy way of tracking changes

Git enables you to take "snapshots"

This has a deeper meaning, but similar to save points

Git enables you to take "snapshots" by making a commit

Just the term for creating that save point

Git enables you to roll back to previous "snapshots" (commits)

No more file -> save as -> folder132

Install Git

Windows

Git Bash

https://gitforwindows.org

(for today)

WSL

(for life)

MacOS

Install Homebrew:

GNU / Linux

Debian / Ubuntu

Once Installed 

Setup User Name and Email

Let's Install

Try Installing Git

*If you get stuck, leonnoel.com/discord

!raffle

Basic Git Commands

git init

Creates a special folder to hold all of your snapshots (commits)

git add <file>

Adds file to staging area (not yet in that special folder)

git add *.html

Adds all html files to staging area (not yet in that special folder)

git add .

Adds everything to staging area (not yet in that special folder)

git status

Shows everything in staging area (not yet in that special folder)

git rm --cached index.html

Removes index.html from staging area 

git commit

 Adds everything in staging to the special folder as a snapshot

git commit -m "text"

 Adds everything in staging to the special folder as a snapshot

git branch -M main

Changes name of staging area to main 

Let's Code

Make A Commit

!raffle

Want to try something without borking all your code

BRANCHES

git status

Find out if you are on main first

git branch <name>

Creates a new branch for you to make changes on without affecting the rest of your code!

git checkout <name>

Moves you to new branch where you can make changes without affecting the rest of your code!

Make Your Changes

Add your changes to staging

Commit Your Changes

git checkout main

Moves you back to main branch

git merge <branch>

Adds changes from other branch to main

Let's Code

Use A Branch

!raffle

What is Github?

Local Vs. Remote

Not only backups,

but a whole suite of tools to work with other developers

Let's Make

A Github Account

!raffle

Let's Create A Freelancer Listing

Github Copilot To Help

Create A Github Repo

Instructions with each new repo

PUSH IT

Now Let's Work Together

Create Repo and Invite Bob

Create A File

We'll Code In The Cloud

Just press .

GITHUB CODESPACES

60 hours of free compute time

What are Github Issues?

Create An Issue

Assign The Issue

Let's Create

Our First Issue

Freelancer Repo We Just Created

Let's Talk Workflow

Repeat With Me

Every Team Is Different

This Is For Beginners

I Will Not Workflow Shame

GitHub Flow

"GitHub flow is a lightweight, branch-based workflow. The GitHub flow is useful for everyone, not just developers. For example, here at GitHub, we use GitHub flow for our site policy, documentation, and roadmap."

https://aka.ms/TeamGitHub

https://docs.github.com/en/get-started/quickstart/github-flow

GitHub Flow

• Create A Branch
• Make Changes
• Create A Pull Request
• Address Review Comments
• Merge Your Pull Request
• Delete Your Branch

Creater Flow

• Create Issue
• Review PR
• Request Changes
• Approve Changes 
• Close Issue

Dev Flow

• Pick Issue
• Comment Working On
• Assign To Themself
• Make Changes / Commit
• Make Pull Request
• Complete Requested Changes
• Merge Pull Request
• Delete Branch

Create A Branch

Get The Code

git pull git checkout or just .

Make Changes

Push The Repo

Commit has issue number

Ex: Added company name #1

Create A Pull Request

Let's Review

Some Code!

Start A Review

Resolve Conversation

Request Changes

Make The New Changes

Approve The New Changes

Merge The Changes

STRAIGHT TO MAIN

Delete The Branch

Close The Issue

Questions?

!raffle

Let's Create A Dev Branch

Both Make Changes On Dev

Manage Conflicts

How To Prevent Merge Conflicts

• git checkout development
• git pull
• git checkout your-branch
• git merge development
• MAKE YOUR CHANGES
• git add .
• git commit -m "Added changes #issue-num"
• git push

!raffle

GitHub Projects

Let's Submit

A Real Pull Request

JOB-ULY

Laptop !raffle

https://aka.ms/TeamGitHub

Homework

Due (Tues. 7/5):

Do: Intro to Github

 https://aka.ms/TeamGitHub