Using Github Activity

Activity Overview: Mastering GitHub Setup and Collaboration

Moodle

Objective:

Equip student teams with the necessary skills to:

  1. Set Up GitHub Accounts and SSH Keys on their local machines (Mac and Windows 11).
  2. Create and Manage Shared Project Repositories for team collaboration.
  3. Understand and Utilize Basic Git Commands to maintain and update their projects.
  4. Demonstrate Effective Team Collaboration through a series of practical tasks.

Duration:

This activity is designed to be completed within 2-3 hours, allowing ample time for setup, practice, and completion of deliverables.

Prerequisites:

  • GitHub Account: Each student must have an active GitHub account. If not, sign up at GitHub Sign Up.
  • Local Development Environment:
    • Mac: Terminal access.
    • Windows 11: Git Bash or Command Prompt access.
  • Basic Computer Skills: Familiarity with navigating the operating system and installing software.

Table of Contents

  1. Introduction
  2. Prerequisites and Tools
  3. Step 1: Installing Git
  4. Step 2: Setting Up SSH Keys
  5. Step 3: Creating a Shared Project Repository
  6. Step 4: Inviting Team Members to the Repository
  7. Step 5: Cloning the Repository to Local Machines
  8. Step 6: Basic Git Workflow
  9. Step 7: Collaborative Activity
  10. Deliverables
  11. Evaluation Criteria
  12. Additional Resources
  13. Conclusion

1. Introduction

Welcome to the GitHub Setup and Collaboration Activity! This hands-on exercise is designed to help you and your team members establish a robust workflow using GitHub, enabling efficient collaboration on your semester-long projects. By the end of this activity, you will have a shared GitHub repository, understand how to securely connect your local machines to GitHub using SSH keys, and be comfortable performing basic Git operations essential for team-based software development.

2. Prerequisites and Tools

Before diving into the setup, ensure you have the following:

  • Git Installed: Git is a version control system that tracks changes in your code.
  • GitHub Account: Your personal GitHub account to access repositories.
  • Local Development Environment: Access to a Terminal (Mac) or Git Bash/Command Prompt (Windows 11).

Tools Needed:

3. Step 1: Installing Git

If you haven’t installed Git on your local machine, follow the instructions below based on your operating system.

Mac Installation (It should be on your system already, so ignore this step if so)

  1. Using Homebrew (Recommended):
    • Install Homebrew: If you don’t have Homebrew installed, open Terminal and run:
      /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
    • Install Git:
      brew install git
    • Verify Installation:
      git --version Expected Output: git version 2.xx.x
  2. Using Installer:
    • Download Git: Visit Git Downloads and download the latest installer.
    • Run Installer: Follow the on-screen instructions to complete the installation.
    • Verify Installation:git --version

Windows 11 Installation

  1. Download Git for Windows:
  2. Run Installer:
    • Execute the downloaded .exe file.
    • Installation Options:
      • Adjusting your PATH environment: Select “Git from the command line and also from 3rd-party software”.
      • Choosing HTTPS transport backend: Select “Use the OpenSSL library”.
      • Configuring the line ending conversions: Choose “Checkout Windows-style, commit Unix-style line endings”.
      • Terminal emulator: Select “Use Git Bash only”.
      • Other Settings: Proceed with default settings unless specific configurations are needed.
  3. Complete Installation:
    • Finish the installation process.
  4. Verify Installation:
    • Open Git Bash from the Start menu.
    • Run:
      git --version Expected Output: git version 2.xx.x

4. Step 2: Setting Up SSH Keys

Setting up SSH keys allows you to securely connect to GitHub without repeatedly entering your username and password.

Generating SSH Keys on Mac

  1. Open Terminal.
  2. Check for Existing SSH Keys:
    ls -al ~/.ssh
    • Look for existing key pairs (id_rsa and id_rsa.pub). If they exist and you wish to use them, you can skip generating new keys.
  3. Generate a New SSH Key:
    ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
  4. Follow the Prompts:
    • Enter File to Save Key: Press Enter to accept the default location.
    • Enter Passphrase: (Optional) For added security, enter a passphrase or press Enter to skip.
  5. Start the SSH Agent:
    eval "$(ssh-agent -s)"
    • Expected Output: Agent pid 59566
  6. Add Your SSH Key to the SSH Agent:
    ssh-add ~/.ssh/id_ed25519
    • Note: Replace id_ed25519 with your key filename if different.
  7. Copy the SSH Public Key to Clipboard:
    pbcopy < ~/.ssh/id_ed25519.pub
  8. Alternative Method: Open the file in a text editor and copy its contents.

Generating SSH Keys on Windows 11

  1. Open Git Bash:
    • Search for Git Bash in the Start menu and open it.
  2. Check for Existing SSH Keys:
    ls -al ~/.ssh
    • Look for existing key pairs (id_rsa and id_rsa.pub). If they exist and you wish to use them, you can skip generating new keys.
  3. Generate a New SSH Key:
    ssh-keygen -t ed25519 -C "your_email@example.com"
    • Note: If you receive an error about the ed25519 algorithm, use rsa instead:
      ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
  4. Follow the Prompts:
    • Enter File to Save Key: Press Enter to accept the default location.
    • Enter Passphrase: (Optional) For added security, enter a passphrase or press Enter to skip.
  5. Start the SSH Agent:
    eval "$(ssh-agent -s)"
    • Expected Output: Agent pid 59566
  6. Add Your SSH Key to the SSH Agent:
    ssh-add ~/.ssh/id_ed25519
    • Note: Replace id_ed25519 with your key filename if different.
  7. Copy the SSH Public Key to Clipboard:
    clip < ~/.ssh/id_ed25519.pub
    • Alternative Method: Open the file in a text editor and copy its contents.

Adding SSH Keys to GitHub

  1. Log in to GitHub.
  2. Navigate to Settings:
    • Click on your profile picture in the top-right corner.
    • Select “Settings” from the dropdown menu.
  3. Access SSH and GPG Keys:
    • In the sidebar, click “SSH and GPG keys”.
  4. Add a New SSH Key:
    • Click “New SSH key” or “Add SSH key”.
  5. Enter Key Details:
    • Title: Provide a descriptive name (e.g., MacBook Pro or Windows Laptop).
    • Key: Paste the SSH public key copied earlier.
  6. Save the SSH Key:
    • Click “Add SSH key”.
    • If prompted, confirm your GitHub password.
  7. Test the SSH Connection:
    • On Mac:
      ssh -T git@github.com
    • On Windows (Git Bash):
      ssh -T git@github.com
    • Expected Output:
      Hi username! You've successfully authenticated, but GitHub does not provide shell access.
    • If you encounter a warning about authenticity, type “yes” to continue.

5. Step 3: Creating a Shared Project Repository

  1. Navigate to GitHub and Log In.
  2. Create a New Repository:
    • Click the “+” icon in the top-right corner and select “New repository”.
  3. Repository Details:
    • Repository Name: Use a meaningful name (e.g., team-project).
    • Description: Briefly describe the project (e.g., “Semester Project for Community Organization”).
    • Privacy: Set to “Private” to restrict access to team members.
    • Initialize Repository:
      • Check “Add a README file”.
      • (Optional) Add a .gitignore file appropriate for your technology stack.
      • (Optional) Choose a license (e.g., MIT License).
  4. Create Repository:
    • Click “Create repository”.

6. Step 4: Inviting Team Members to the Repository

  1. Access Repository Settings:
    • Navigate to your newly created repository.
    • Click on “Settings” in the repository menu.
  2. Manage Access:
    • In the sidebar, click “Manage access”.
  3. Invite Collaborators:
    • Click “Invite a collaborator”.
    • Enter the GitHub usernames of your team members.
    • Click “Add [username] to this repository”.
    • Important: Ensure all team members accept the invitation.
  4. Add Professor Skon as a Collaborator:
    • Repeat the above steps to invite Professor Skon (jimskon) to the repository.
    • Note: Ensure Professor Skon has a GitHub account. If not, inform them to create one.

7. Step 5: Cloning the Repository to Local Machines

  1. Obtain Repository SSH URL:
    • Navigate to the repository on GitHub.
    • Click the “Code” button.
    • Select “SSH” and copy the URL (e.g., git@github.com:your-username/team-project.git).
  2. Clone the Repository:
    • On Mac:
      git clone git@github.com:your-username/team-project.git
    • On Windows (Git Bash):
      git clone git@github.com:your-username/team-project.git
    • Note: Replace your-username and team-project with your actual GitHub username and repository name.
  3. Navigate to Repository Folder:
    cd team-project
  4. Verify Remote URL:
    git remote -v
    • Expected Output:
      origin git@github.com:your-username/team-project.git (fetch) origin git@github.com:your-username/team-project.git (push)

8. Step 6: Basic Git Workflow

Understanding and utilizing basic Git commands is essential for effective collaboration.

8.1 Common Git Commands

  • Check Git Configuration:
    git config --global user.name "Your Name" git config --global user.email "your_email@example.com"
  • Check Status:
    git status
  • Add Changes:
    git add . Note: Adds all changed files. To add specific files, replace . with the file path.
  • Commit Changes:
    git commit -m "Your descriptive commit message"
  • Push Changes to Remote:
    git push origin main Note: Replace main with your branch name if different.
  • Pull Latest Changes:bash
    git pull origin main

8.2 Branching Strategy

Using branches helps manage different features or tasks without affecting the main codebase.

  1. Create a New Branch:
    git checkout -b feature/feature-name
  2. Switch to an Existing Branch:
    git checkout branch-name
  3. Merge Branch into Main:
    git checkout main git merge feature/feature-name
  4. Delete a Branch (After Merging):
    git branch -d feature/feature-name

8.3 Pull Requests

  1. Push Branch to GitHub:
    git push origin feature/feature-name
  2. Create a Pull Request:
    • Navigate to the repository on GitHub.
    • Click “Compare & pull request” next to your pushed branch.
    • Provide a descriptive title and detailed description.
    • Assign team members for review.
    • Click “Create pull request”.
  3. Review and Merge:
    • Team members review the pull request.
    • Once approved, click “Merge pull request”.
    • Delete the branch if no longer needed.

9. Step 7: Collaborative Activity

To solidify your understanding, engage in the following collaborative activity with your team.

Activity: Build a Simple “Hello World” Web Application

<!DOCTYPE html> 
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Hello World App</title>
   </head>
   <body>
      <h1>Hello World</h1>
   </body>
</html>

Objective: Create a basic web application that displays “Hello World” to practice GitHub Projects setup and collaboration.

Steps:

  1. Create an Issue:
    • Title: Create “Hello World” Web Application
    • Description: Develop a simple web application using HTML, CSS, and JavaScript that displays “Hello World” on the homepage.
    • Labels: feature, frontend
    • Assignee: Assign to a team member.
  2. Move Issue to “In Progress”:
    • Drag the issue from “To Do” to “In Progress” on the GitHub Project board.
  3. Develop the Feature:
    • Navigate to the cloned repository on your local machine.
    • Create a new branch:
      git checkout -b feature/hello-world
    • Create Files:
      • index.html – use the html code from above.
      • Add and Commit Changes:
        git add index.html git commit -m "Add Hello World homepage"
      • Push Branch to GitHub:
        git push origin feature/hello-world
  4. Create a Pull Request:
    • Go to GitHub repository.
    • Click “Compare & pull request” for feature/hello-world.
    • Title: Add Hello World Homepage
    • Description: This pull request adds a simple homepage displaying “Hello World”.
    • Assign Reviewers: Assign a team member for code review.
    • Click “Create pull request”.
  5. Review and Merge:
    • The assigned reviewer checks the code.
    • If approved, click “Merge pull request”.
    • Delete the branch if desired.
  6. Move Issue to “Done”:
    • Drag the issue from “In Progress” to “Done” on the GitHub Project board.
  7. Verify Deployment (Optional):
    • Host the index.html using GitHub Pages or a simple local server to view the “Hello World” message.

Expected Outcome:

  • A functional index.html file displaying “Hello World”.
  • Proper use of GitHub Projects for task management.
  • Demonstrated collaboration through issue creation, assignment, branching, pull requests, and code reviews.

10. Deliverables

Upon completion of this activity, each team should submit the following to demonstrate their mastery of GitHub setup and collaboration:

  1. Screenshots:
    • SSH Key Setup:
      • Screenshot of SSH key added to GitHub (visible under Settings > SSH and GPG keys).
    • Project Board:
      • Screenshot of the Development Board showing To Do, In Progress, and Done columns with the “Hello World” issue moved to Done.
    • Pull Request:
      • Screenshot of the created pull request, including comments from code review.
  2. Repository Link:
    • Provide the URL to the shared project repository (ensure it is accessible by the instructor and team members).
  3. Commit History:
    • Show a clean commit history with descriptive commit messages for the “Hello World” feature.
  4. README.md Update:
    • Update the README.md with details about the “Hello World” application and the collaborative workflow.
  5. Documentation (Optional):
    • Brief write-up on the team’s workflow, challenges faced, and how they utilized GitHub Projects for collaboration.

Submission Instructions:

  • Repository Access: Ensure that Professor Skon (https://github.com/jimskon) has been added as a collaborator to your repository.
  • Collect Screenshots: Take clear screenshots as specified and compile them into a PDF or include them in a designated folder within the repository.
  • Provide Repository Link: Submit the repository link along with the screenshots and any additional documentation as per the instructor’s guidelines.
  • Turn in on Moodle.

11. Evaluation Criteria

Your submission will be evaluated based on the following criteria:

  1. SSH Key Setup:
    • Successful generation and addition of SSH keys to GitHub.
    • Clear screenshots demonstrating SSH key integration.
  2. Repository and Project Board Configuration:
    • Correct creation of a shared private repository.
    • Effective setup and customization of GitHub Projects (Development Board).
  3. Task Management:
    • Proper creation, labeling, and assignment of issues.
    • Demonstrated movement of issues through To Do, In Progress, and Done columns.
  4. Collaboration:
    • Use of branches and pull requests for feature development.
    • Evidence of code reviews and constructive feedback in pull requests.
  5. Documentation:
    • Clear and informative README.md.
    • Additional documentation outlining workflow and collaboration practices.
  6. Deliverables Completion:
    • All required screenshots and repository links provided.
    • Successful completion of the “Hello World” web application feature.
  7. Adherence to Best Practices:
    • Clean commit history with descriptive messages.
    • Organized and maintainable project structure.

12. Additional Resources

To further assist you in mastering GitHub and its project management tools, here are some valuable resources:

13. Conclusion

This GitHub Setup and Collaboration Activity is a foundational exercise aimed at empowering student teams with the essential skills required for effective version control and project management using GitHub. By completing this activity, you will have:

  • Established a secure and efficient workflow through SSH key integration.
  • Created and managed a shared repository tailored for team collaboration.
  • Utilized GitHub Projects to organize, track, and execute project tasks seamlessly.
  • Demonstrated the ability to collaborate through branching, pull requests, and code reviews.

Key Takeaways:

  • Security: SSH keys provide a secure method for authenticating with GitHub, eliminating the need for repetitive password entry.
  • Organization: GitHub Projects offers a versatile platform for managing tasks, ensuring that your team stays aligned and productive.
  • Collaboration: Effective use of Git branches and pull requests fosters a collaborative environment, promoting code quality and collective ownership.

Final Tips:

  • Stay Consistent: Regularly update your project board and keep all team members informed about progress and changes.
  • Communicate Effectively: Utilize communication tools to discuss tasks, resolve issues, and share feedback promptly.
  • Document Your Workflow: Maintain clear documentation within your repository to facilitate smooth collaboration and future maintenance.

By embracing these practices, you and your team will be well-equipped to tackle the complexities of semester-long projects, delivering high-quality, maintainable web applications that meet the needs of your community organization partners.

Happy Coding and Successful Collaborations!

If you have any questions or need further assistance, feel free to reach out to Professor Skon at GitHub Profile or via email.

Scroll to Top