10 GitHub Features - DrAlzahraniProjects/csusb_fall2024_cse6550_team4 GitHub Wiki

Introduction

GitHub is a web-based platform that provides tools for version control and collaborative software development. It allows developers to host their projects, track changes, collaborate with others, and manage code efficiently.

GitHub is built around Git, a distributed version control system created by Linus Torvalds, the founder of Linux.

https://github.com/

Features

  1. Codespace

1.1. Installation

1.2. Configuration

1.3. Implementation

1.4. Usage

1.5. Troubleshooting

  1. Pages

2.1. Installation

2.2. Configuration

2.3. Implementation

2.4. Usage

2.5. Troubleshooting

  1. Wiki

3.1. Installation

3.2. Configuration

3.3. Implementation

3.4. Usage

3.5. Troubleshooting

  1. Copilot chat

4.1. Installation

4.2. Configuration

4.3. Implementation

4.4. Usage

4.5. Troubleshooting

  1. Copilot X

5.1. Installation

5.2. Configuration

5.3. Implementation

5.4. Usage

5.5. Troubleshooting

  1. Actions

6.1. Installation

6.2. Configuration

6.3. Implementation

6.4. Usage

6.5. Troubleshooting

  1. Projects

7.1. Installation

7.2. Configuration

7.3. Implementation

7.4. Usage

7.5. Troubleshooting

  1. Discussions

8.1. Installation

8.2. Configuration

8.3. Implementation

8.4. Usage

8.5. Troubleshooting

  1. Issue tracking

9.1. Installation

9.2. Configuration

9.3. Implementation

9.4. Usage

9.5. Troubleshooting

  1. Pull requests

10.1. Installation

10.2. Configuration

10.3. Implementation

10.4. Usage

10.5. Troubleshooting

Features

1.Codespace

1.1 Installation

Role: Cloud-based development environment

Details:

  • GitHub Codespaces provide a fully-configured development environment directly in your browser, eliminating the need to set up your local environment
  • It supports Visual Studio Code extensions and includes a terminal, allowing you to clone repositories, code, debug, and push changes
  • Ideal for onboarding new team members quickly or for working from any device

Setting up Codespace:

  • Click on the “Code” button (the green button near the top of your repository’s file view)
  • In the dropdown menu, select the Codespaces tab
  • You will see an option to "Create codespace on main" (or the default branch). If you want to create a Codespace for a specific branch, select the appropriate branch from the dropdown
  • Click “Create codespace on [branch]” to start creating your Codespace
  • GitHub will then spin up the cloud development environment. This may take a few seconds or minutes depending on your environment configuration

image

1.2 Configuration

Once your Codespace is created, you will be taken to a browser-based VS Code editor. From here, you can:

  • Write and edit code.
  • Open terminal windows.
  • Install dependencies.
  • Run tests and applications.
  • Use all features you normally get in a local VS Code environment.
  • The Codespace environment will come with your repository cloned and ready to work on.

1.3 Implementation

  • Codespaces simplifies development by offering immediate setup and ensuring consistent environments across team members. Key benefits include:

  • Instant Setup: Developers can start working without manual environment setup.

  • Consistent Configuration: Ensures uniformity across team environments, making onboarding smoother.

1.4 Usage

  • Running Applications

  • Once the application starts, Codespaces sets up specific ports to make testing and previewing seamless.

  • Accessing Codespaces

  • Codespaces can be accessed directly from the repository page on GitHub or through the VS Code desktop app with the Codespaces extension, allowing for flexibility between browser and desktop environments.

1.5 Troubleshooting

image

2.Pages

Role: Host project website

2.1 Installation

Follow these steps carefully to set up GitHub Pages

Go to Settings

Navigate to the Settings tab of your GitHub repository and scroll down to GitHub Pages. Access GitHub Pages Configuration

Click on the "check it out here" link to access the GitHub Pages settings. Select a Branch

In the dropdown menu (currently showing “None”), select your branch (e.g., master or main). Save and Retrieve URL

Click Save. A URL will appear at the top in the format https://.github.io/. This is the URL for your hosted webpage. Completion

Congratulations! You have successfully hosted your first web page for free on GitHub Pages

Details:

  • GitHub Pages allows you to create websites for your projects directly from the repository
  • You can use Markdown files or static site generators like Jekyll to build and deploy the site
  • This is typically used for documentation, blogs, or even fully-featured project landing pages, and it’s hosted for free by GitHub

2.2 Configuration

Steps:

  • Create a new GitHub repository
  • Clone it locally (optional) and add your website files (e.g., index.html)
  • Commit and push your changes
  • Enable GitHub Pages in the repository settings
  • Access your site at https://username.github.io/repository-name/

2.3 Implementation

GitHub Pages is useful for showcasing projects, documentation, or personal websites

Example: Host a documentation site for your project using GitHub Pages

2.4 Usage

Here is a screenshot of pages created

image

2.5 Trobuleshooting

Page Not Displaying? Ensure the selected branch has a valid index.html file. URL Errors: Confirm the repository name matches the one in the URL. https://github.com/DrAlzahraniProjects/csusb_fall2024_cse6550_team3.wiki.git

3.Wiki

Role: Project documentation (SRS, overall architecture design, low-fidelity prototype)

3.1 Installation

Details:

  • The GitHub Wiki is a space within the repository for writing comprehensive documentation
  • It's ideal for sharing information like Software Requirements Specifications (SRS), design documents, and architecture overviews
  • Teams use it for capturing the project’s evolving documentation (e.g., technical decisions, guides, how-tos)
https://github.com/DrAlzahraniProjects/csusb_fall2024_cse6550_team4/wiki

3.2 Configuration

  • Set up the home page, organizing topics with text, links, and images

3.3 Implementation

  • Central Hub: Document Software Requirements Specifications (SRS), architecture, and prototypes

3.4 Usage

steps:

  • Navigate to the Repository
  • Open GitHub in your browser
  • Go to the repository where you want to create or view a Wiki

image

  • In the Wiki tab, you will see an option to create your first page if you haven’t created any yet. Click on "Create the first page"

  • Enter a title for your Wiki page in the title field. The title will be the page's URL, so name it appropriately (e.g., "Getting-Started" for a tutorial page)

  • Write your content in the body section. The GitHub Wiki supports Markdown formatting, which allows you to use headers, lists, links, images, tables, code blocks, etc

image

3.5 Trobuleshooting

  • Missing Wiki Option? Check if the Wiki feature is enabled in repository settings
  • Formatting Issues: Use Markdown syntax for correct formatting

4.Github Copilot

Role: Real-time coding assistance

4.1 Installation

A GitHub account. One of the supported IDEs: Visual Studio Code, Neovim, or JetBrains IDEs. Basic familiarity with using plugins/extensions in your preferred IDE. Installing GitHub Copilot

Open Visual Studio Code. Open the Extensions View. Use the shortcut Ctrl+Shift+X. Search for “GitHub Copilot." Install GitHub Copilot Click "Install" to add GitHub Copilot to your IDE

Enabling GitHub Copilot in Your IDE Sign In

After installation, sign in to your GitHub account through the IDE when prompted Authorize Access

Authorize GitHub Copilot to access your GitHub account and repositories Enable Copilot

Follow the setup prompts within the IDE to enable GitHub Copilot

4.2 Configuration

Adjust GitHub Copilot settings in your IDE as desire

4.3 Implementation

Example: Use Copilot to auto-generate functions based on comments (e.g., typing // calculate sum)

4.4 Usage

Details:

  • GitHub Copilot Chat is an AI-powered tool that integrates directly into your IDE (such as VS Code)
  • It helps you in real-time by suggesting code snippets, providing explanations for existing code, and assisting with debugging
  • Think of it as a collaborative coding partner that can answer specific coding questions, generate code based on descriptions, and streamline your workflow

Steps

  • Sign up for GitHub Copilot on GitHub
  • Install the GitHub Copilot extension in your IDE (e.g., Visual Studio Code)
  • Authenticate your GitHub account in the IDE
  • Start a new project or open an existing one
  • Use GitHub Copilot by typing code and accepting suggestions
  • Write comments for context-aware suggestions
  • Explore GitHub Copilot Labs for additional features (if available)
  • Configure settings as needed

image

4.5 Troubleshooting

No Suggestions? Check if Copilot is enabled and signed in Lagging? Disable other extensions to improve performance

5.Copilot-X

Role: Code completion

5.1 Installation

A GitHub account. One of the supported IDEs: Visual Studio Code, Neovim, or JetBrains IDEs. Basic familiarity with using plugins/extensions in your preferred IDE. Installing GitHub Copilot

Open Visual Studio Code. Open the Extensions View. Use the shortcut Ctrl+Shift+X. Search for “GitHub Copilot." Install GitHub Copilot Click "Install" to add GitHub Copilot to your IDE

Enabling GitHub Copilot in Your IDE Sign In

After installation, sign in to your GitHub account through the IDE when prompted Authorize Access

Authorize GitHub Copilot to access your GitHub account and repositories Enable Copilot

Follow the setup prompts within the IDE to enable GitHub Copilot

5.2 Configuration

  • Adjust GitHub Copilot settings in your IDE as desired

5.3 Implementation

Example: Use Copilot to auto-generate functions based on comments (e.g., typing // calculate sum)

Details:

  • GitHub Copilot X is a more advanced version of GitHub Copilot, offering AI-powered code completions as you type
  • It understands context from your comments and code, suggesting entire functions or blocks of code
  • This feature helps improve productivity by reducing the amount of repetitive code you need to write and ensuring that the code is contextually accurate

5.4 Usage

Steps

  • Sign up for GitHub Copilot X on GitHub
  • Install the GitHub Copilot X extension in your IDE (e.g., Visual Studio Code)
  • Authenticate your GitHub account in the IDE
  • Open a project or file in your IDE
  • Use the GitHub Copilot X chat interface to ask questions and get code suggestions
  • Receive inline suggestions while coding
  • Use contextual understanding by writing comments
  • Explore advanced features like test generation and documentation
  • Provide feedback for improvements
  • Configure settings as needed

5.5 Troubleshooting

No Suggestions? Check if Copilot is enabled and signed in Lagging? Disable other extensions to improve performance

6.Actions

Role: Workflow automation

6.1 Installation

Before you can use GitHub Copilot X, ensure that you have

A GitHub Account Copilot Subscription: Ensure you have access to GitHub Copilot X. VS Code or Codespaces Setup: Copilot X is available within Visual Studio Code or GitHub Codespaces. Installing GitHub Copilot X in Visual Studio Code

Install VS Code.

Enable GitHub Copilot X Extension

In VS Code, open the Extensions panel (Ctrl + Shift + X). Search for GitHub Copilot and install it. The latest version should include Copilot X features if you have access. Sign In to GitHub

After installing the extension, click the GitHub icon in the bottom-left corner of VS Code. Log in to your GitHub account to authenticate Copilot X. Enable Copilot X

Once logged in, you may need to enable Copilot X from the GitHub Copilot settings or join the beta program if it’s still in limited release. Using GitHub Copilot X in Codespaces

Navigate to Your Repository

Open your repository in GitHub Create a Codespace

Click the Code button and choose Create codespace on main This will open your repository in GitHub Codespaces with VS Code-like functionality **Enable Copilot X

Log in to GitHub within the Codespace to start using Copilot X

6.2 Configuration

Customize workflows, triggers, and permissions using .yml files in .github/workflows

6.3 Implementation

Example: Automate code testing upon each pull request using Actions workflows

6.4 Usage

Details:

  • GitHub Actions allow you to automate tasks like testing, building, and deploying your code
  • You define custom workflows using YAML files that trigger based on events like pushing code, making pull requests, or releasing software
  • Common use cases include CI/CD pipelines, automatic testing, deployment to cloud services, and running scheduled maintenance scripts

Steps:

  • Go to the repository and click the "Actions" tab. image

  • Choose a workflow template or create a custom workflow file

  • Define the workflow in a YAML file (.github/workflows)

  • Commit the workflow file to activate the workflow

image

  • Trigger and monitor the workflow automatically on events like push or pull requests
  • Use prebuilt actions and secrets for automating tasks securely

6.5 Troubleshooting

Here the workflow in actions

image

7.Projects

Role: Task organization

7.1 Installation

Go to your repository on GitHub. Open projects

Click on Projects.

Create or link a project

Type your project name and click to link your project

View Linked Project

Click on your linked project to view its current status

Table View of Project Status

The project status will be displayed in a table view

7.2 Configuration

  • Table View of Project Status: Organize tasks in a board or table format for clarity
  • Customize Columns: Set up columns (e.g., To Do, In Progress, Done) to visualize task status

7.3 Implementation

Details:

  • GitHub Projects offers Kanban-style boards for tracking tasks and managing project work
  • It allows teams to create, organize, and prioritize tasks, making it easier to manage workflows
  • You can link issues and pull requests to specific tasks to track progress, assign team members, and view overall project timelines

7.4 Usage

Steps:

  • Go to the repository and click the "Projects" tab
  • Click "New Project" and choose a template
  • Name the project and create columns.
  • Add issues, pull requests, or notes as cards to the project
  • Track progress by moving cards across columns
  • Use automation, collaborate, and filter tasks to manage the project effectively

image

7.5 Troubleshooting

Project Not Visible? Confirm the project is linked correctly to the repository. Task Not Updating? Refresh the board or check for updates in linked issues or pull requests. Learn More about projects: Projects

https://github.com/DrAlzahraniProjects/csusb_fall2024_cse6550_team3/projects

8.Discussions

Role: Use for 5 tabs (General, Q&A, announcements, ideas, and polls)

8.1 Installation

Navigate to the discussions tab

Go to the Discussions tab in your repository. Start a new discussion

Click on New Discussion. Choose a category

Select a category and provide a clear title and description for your discussion. Submit the discussion

Click Submit to start the conversation

8.2 Configuration

Set Up Categories: Define categories like General, Q&A, Ideas, and Announcements Manage Moderation Settings: Configure permissions for creating, responding to, and moderating discussions

8.3 Implementation

Details:

  • GitHub Discussions is a space for open-ended conversations within a repository
  • It provides five tabs:
    • General for ongoing conversations
    • Q&A for questions and answers
    • Announcements for project updates
    • Ideas for brainstorming and suggesting new features
    • Polls to gather feedback from the community
  • It helps facilitate collaboration and communication within the team and the broader community of contributors

8.4 Usage

Steps

  • Go to the Repository and click the "Discussions" tab
  • Click "New Discussion" to start a conversation
  • Choose a Category (e.g., Q&A, Ideas, General)
  • Add a Title and Description for your discussion
  • Submit the Discussion by clicking "Start Discussion"
  • Engage by replying, reacting, and marking answers if needed
https://github.com/DrAlzahraniProjects/csusb_fall2024_cse6550_team4/discussions

image

8.5 Troubleshooting

Discussion Categories Not Available? Check repository settings for Discussions permissions. Missing Responses? Refresh the page or check notifications. 9 Issues Role: Assign tasks, track progress, and communicate

GitHub Issues provides powerful capabilities for assigning tasks, tracking progress, and facilitating communication within software development projects

9.Issue tracking

Role: Assign tasks, track progress, and communicate

9.1 Installation

Click on New Issue Fill in Issue details

Enter a title and provide a detailed description of the issue Optionally, add labels, assign team members, or set a milestone Submit the Issue

Click Submit to create the issue

9.2 Configuration

Labels: Use labels to categorize and prioritize issues Assignees: Assign issues to specific team members for ownership

9.3 Implementation

Issues help track bugs, feature requests, and documentation updates Example: Use issues to list and manage tasks required for a new feature rollout

9.4 Usage

Details:

  • GitHub Issues allow teams to track bugs, enhancements, and other tasks
  • You can assign tasks to team members, set labels, milestones, and priorities
  • Each issue has its own comment thread, which is ideal for discussing progress, providing updates, and closing out tasks when completed

Steps

  • Go to the repository
  • Click on the "Issues" tab
  • Click "New Issue"
  • Add a title and description, and fill out the issue template if there’s one
  • Add labels, assign team members, or milestones
  • Submit the issue
  • Participate in discussions and track the issue’s progress
https://github.com/DrAlzahraniProjects/csusb_fall2024_cse6550_team4/issues

image

9.5 Troubleshooting

Issue Not Visible? Check repository permissions and visibility settings Notifications Not Received? Ensure notifications for assigned or watched issues are enabled https://github.com/DrAlzahraniProjects/csusb_fall2024_cse6550_team3/issues 10 Pull Requests Role: Review and merge changes

GitHub pull requests play a crucial role in reviewing and merging code changes

10.Pull requests

Role: Review and merge changes

10.1 Installation

Go to your repository on GitHub Open pull requests

Click on Pull Requests

Create a new pull request

Click on New to create a pull reques

10.2 Configuration

Set Up Reviewers: Assign reviewers for pull requests to manage feedback. Customize Merge Options: Configure merge settings (merge commit, squash, rebase) to control merging behavior

10.3 Implementation

Details:

  • Pull requests (PRs) are a critical part of the GitHub workflow for team-based development

  • It has 5 stages which includes:

    • Create branch
    • Create a pull request
    • Discuss changes
    • Merge changes
  • They allow developers to propose changes, request reviews, and discuss the code before merging it into the main branch

  • PRs support code reviews, inline comments, and approval processes, ensuring that only thoroughly-reviewed code gets merged

  • GitHub also provides CI/CD integration within pull requests to automatically run tests and checks on the proposed changes

https://github.com/DrAlzahraniProjects/csusb_fall2024_cse6550_team4/pulls

10.4 Usage

Thorough Code Review

Pull requests facilitate a thorough code review by allowing reviewers to examine proposed changes line by line. Collaboration and Feedback

Contributors can leave comments, suggest specific code modifications, and engage in discussions about the changes. Multiple reviewers can collaborate on the review process, including commenting, approval, and requests for modifications. Quality Control

Pull requests go beyond code merges—they foster collaboration and enforce code quality checks. Reviewers leave comments on specific lines, suggest changes, or ask questions as part of the review. Approval and Merging

Once the code is satisfactory, reviewers approve the pull request. After review, approval, and conflict resolution, the pull request is ready for merging. Select the merge option that best suits your project’s workflow.

image

10.5 Troubleshooting

Conflicts When Merging? Resolve conflicts in GitHub or locally before completing the merge Reviewer Notifications Missing? Ensure reviewers are assigned and have notifications enabled

⚠️ **GitHub.com Fallback** ⚠️