WK5: Introduction to Git with VS Code (Session 2)

• Programming
• Higher Education (degree)

Welcome to Week 5

Introduction to Git with VS Code

Module Lecturer: Dr Raghav Kovvuri

Email: [e-mail]

What is Git? (1) 

Version control system for tracking changes in code

• Like a time machine for your project

Integrated into VS Code for easy use

• No need to leave your coding environment

Allows collaboration and managing different versions

• Multiple people can work on the same project without conflicts

Why use Git?

• Track changes over time
• Experiment with new features safely
• Collaborate with others effectively

Key concepts:

• Repository: Project folder tracked by Git
• Commit: Snapshot of your project at a specific point in time
• Branch: Independent line of development

What is Git? (2) 

VS Code: Integrated Development Environment (IDE) with built-in Git 

GitHub: Web-based platform for hosting Git repositories and collaboration

Today's goal: Create a simple Python calculator operation with version control

GitHub

Create GitHub account:

• Go to https://github.com/
• Click "Sign up" and follow the registration process
• Choose a professional username as it will be visible in your projects

Verifying Git installation in VS Code:

1. Open VS Code
2. View > Command Palette (Ctrl+Shift+P or Cmd+Shift+P on macOS)
3. Type "Git: Show Git Output"
4. You should see Git version information

Creating a Project in VS Code

1. Launch VS Code
2. File > New Window (Ctrl+Shift+N or Cmd+Shift+N on macOS)
3. File > Open Folder
4. Create a new folder named "calculator_project"
5. Select the folder and click "Select Folder"

Creating our Python file:

1. In VS Code explorer (left sidebar), click "New File" icon
2. Name the file "calculator.py"
3. Add the following code:

Initializing Git in VS Code

1. Open Command Palette: View > Command Palette
2. Type "Git: Initialize Repository"
3. Select the project folder "calculator_project"

What happens when you initialize a Git repository:

• Creates a hidden .git folder to store repository data
• Begins tracking changes in your project files

Observing Git integration in VS Code:

1. Notice the Source Control icon in the left sidebar (branch-like icon)
2. Click on the Source Control icon
3. You should see "calculator.py" under "Changes"

Three states of Git:

Modified: Changes made but not yet staged

Staged: Changes marked for inclusion in the next commit

Committed: Changes safely stored in the local repository

Making Your First Commit in VS Code (1)

Staging changes:

• In the Source Control view, notice "calculator.py" under "Changes"
• Hover over the file and click the "+" icon to stage changes

            > This moves the file to the "Staged Changes" section

Writing a commit message:

• In the text box at the top of the Source Control view, enter a descriptive message:
• "Initial commit: Add calculator with add and subtract functions"

Best practices for commit messages:

• Be concise but descriptive, 
• Use present tense: "Add feature" instead of "Added feature"
• Limit the first line to 50 characters

Committing changes:

1. Click the checkmark icon (✓) above the commit message box, or
2. Use the keyboard shortcut: Ctrl+Enter (Cmd+Enter on macOS)

After committing:

• The "Changes" section should be empty
• You've created your first Git commit!

Viewing commit history:

1. In Source Control view, click on the "..." menu
2. Select "View History" to see your commit

Making Your First Commit in VS Code (2)

Branching in VS Code (1)

What is a branch?

• A separate line of development
• Allows you to work on features or experiments without affecting the main codebase

Creating a new branch:

1. Click on the branch name in the bottom left corner of VS Code (should say "main")
2. Select "Create new branch" from the dropdown
3. Name the new branch "multiply-feature"
4. VS Code will automatically switch to the new branch

Adding a new feature in the branch:

1. Open calculator.py
2. Add the following code at the end of the file:

3. Save the file

Committing changes in the new branch:

1. Stage the changes (click "+" next to calculator.py in Source Control view)
2. Enter commit message: "Add multiplication function"
3. Click the checkmark to commit

Branching in VS Code (2)

Merging Branches in VS Code

What is merging?

• Combining changes from one branch into another
• Typically used to integrate completed features into the main codebase

Merging our "multiply-feature" branch:

1. Switch back to the main branch:

• Click branch name in bottom left
• Select "main" from the dropdown

2. Open Command Palette (View > Command Palette)

3. Type "Git: Merge Branch" and select it

4. Choose "multiply-feature" from the branch list

You should now see the multiply function in the main branch

Observing the merge: You should now see the multiply function in the main branch

Connecting to GitHub (1)

What is GitHub?

• Web-based platform for hosting Git repositories
• Provides collaboration features like pull requests and issue tracking
• Offers visibility for your projects and contributions

Creating a new repository on GitHub:

1. Go to https://github.com/ and log in
2. Click the "+" icon in the top right, select "New repository"
3. Name it "calculator_project"
4. Choose "Public" or "Private" (Public allows anyone to see your code)
5. Do not initialize with README, .gitignore, or license
6. Click "Create repository"

Connecting your local repository to GitHub in VS Code:

1. On GitHub, copy the repository URL
2. In VS Code, open Command Palette
3. Type "Git: Add Remote" and select it
4. Paste the GitHub repository URL
5. Name the remote "origin" (this is the conventional name for the primary remote)

Understanding remotes:

• A remote is a version of your repository hosted on the internet
• You can have multiple remotes, but "origin" typically refers to the main GitHub repository
• Remotes allow you to backup your code and collaborate with others

Connecting to GitHub (2)

Pushing to GitHub (1)

What is pushing?

• Uploading your local commits to a remote repository (like GitHub)
• Allows you to backup your work and share it with others

Pushing your code to GitHub:

1. In VS Code's Source Control view, click on the "..." menu
2. Select "Push" or "Publish Branch" if it's your first push

If it's your first time pushing to GitHub from VS Code:

• You may be prompted to sign in to GitHub
• Follow the prompts to authorize VS Code

Pushing to GitHub (2)

After pushing:

1. Visit your GitHub repository in a web browser
2. You should see your calculator.py file and commit history

Best practices for pushing:

• Push regularly to keep your remote repository up-to-date
• Always pull before you push to avoid conflicts
• Be cautious about pushing sensitive information (use .gitignore for this)

Making Changes on GitHub

Why edit on GitHub?

• Quick fixes or small changes
• Editing documentation (like README files)
• Collaborating with others who might not have local access

Adding a division function on GitHub:

1. On your GitHub repository page, click on calculator.py
2. Click the pencil icon to edit the file
3. Add the following code at the end of the file:

4. Scroll down to "Commit changes"

5. Enter a commit message: "Add division function with error handling"

6. Click "Commit changes"

Understanding GitHub's web interface:

• Editing files directly on GitHub creates commits
• These commits are now ahead of your local repository
• You'll need to pull these changes to update your local code

Pulling Changes in VS Code

What is pulling?

• Downloading changes from a remote repository to your local repository
• Keeps your local repository up-to-date with changes made by you or others on GitHub

Pulling the new changes:

1. In VS Code, click the Sync button in the status bar (two circular arrows), or
2. Open Command Palette and type "Git: Pull"

What happens during a pull:

1. Git fetches the changes from the remote repository
2. It then merges these changes into your current branch

After pulling:

1. Open calculator.py in VS Code
2. You should now see the division function you added on GitHub

Creating a README on GitHub

What is a README?

• A file that introduces and explains a project
• Usually in Markdown format (.md)

Key elements to include:

• Project title and description
• Installation and usage instructions
• Contributing guidelines
• License information

How to create:

1. In your GitHub repository, click "Add file" > "Create new file"
2. Name it "README.md"
3. Write content using Markdown
4. Commit the new file

Discussion - Forking and Cloning

Task: Watch "Forking and Cloning in Git and GitHub" 

Discussion Points:

• What is forking? When would you use it?
• What is cloning? How is it different from forking?
• How do you contribute to an open-source project using fork and clone?

Submit to 

Conclusion and Next Steps

Key Takeaways:

• Git tracks code changes and facilitates collaboration
• GitHub provides a platform for sharing and collaborating on Git repositories
• VS Code integrates with Git and GitHub for a streamlined workflow

Next Steps:

1. Practice Git in your personal projects
2. Explore advanced Git features
3. Contribute to open-source projects

Resources:

• Pro Git book: https://git-scm.com/book/en/v2
• GitHub Learning Lab: https://skills.github.com/