24  Collaborating with GitHub Desktop and VS Code

24.1 Objective

This assignment is divided into three exercises to help you practice using GitHub for version control. You will:

  1. Add a JSON file with your details.
  2. Modify an existing Python script.
  3. Add your information to a shared CSV file.
  4. Commit and push each set of changes separately to the repository using GitHub Desktop and VS Code.

24.2 Preliminary Setup: Install Required Tools

Before you start, ensure the following tools are installed on your computer:

  • GitHub Desktop: Download and install from GitHub Desktop.
  • VS Code (Visual Studio Code): Download and install from VS Code.
  • Python: Make sure Python is installed. If not, download it from Python.org.

24.3 Step 1: Adding Your JSON File

  1. Clone the Repository Using GitHub Desktop:
    • Open GitHub Desktop.
    • Go to File > Clone Repository.
    • Select the shared repository (you will find it in the list after being added as a collaborator) or paste its URL in the URL tab.
    • Choose a folder on your computer to store the repository and click Clone.
  2. Open the Repository in VS Code:
    • In GitHub Desktop, go to the Repository menu and click Open in Visual Studio Code.
    • VS Code will open with the repository folder loaded.
  3. Create Your JSON File:
    • In VS Code, navigate to the data/raw folder.

    • Right-click the raw folder in the file explorer and select New File.

    • Name the file student_<student_id>.json, replacing <student_id> with your unique student ID (e.g., student_12345.json).

    • Add the following content to the file:

      {
          "name": "Your Name",
          "surname": "Your Surname",
          "bsc_course": "Your Bachelor's Course",
          "email": "Your Email"
      }
    • Save the file by pressing Ctrl+S (Windows) or Cmd+S (Mac).

  4. Commit and Push Your JSON File:
    • Switch back to GitHub Desktop.
    • You will see your new JSON file listed as a change.
    • In the Summary field, write a clear commit message, e.g., Added student JSON file for <student_id>.
    • Click Commit to main.
    • Push your changes by clicking Push origin in GitHub Desktop.

24.4 Step 2: Modifying the Python Script

  1. Open the Python File in VS Code:
    • In VS Code, navigate to the hello.py file in the root directory.
    • Double-click the file to open it in the editor.
  2. Edit the Python File:
    • Locate the placeholder code in the file. Replace it with the following:

      print("<Your Name>")
    • Replace <Your Name> with your actual first name (e.g., print("Alice")).

    • Save the file by pressing Ctrl+S (Windows) or Cmd+S (Mac).

  3. Check Your Changes Locally (Optional):
    • Open a terminal in VS Code by pressing Ctrl+** (Windows) or **Cmd+ (Mac).

    • Run the script to ensure it works as expected:

      python hello.py
  4. Commit and Push the Python File:
    • Switch to GitHub Desktop.
    • You will see the modified hello.py file listed as a change.
    • Write a commit message, e.g., Modified hello.py to print my name.
    • Click Commit to main.
    • Push your changes by clicking Push origin.

24.5 Step 3: Updating the Shared CSV File

  1. Open the CSV File in VS Code:
    • In VS Code, navigate to the data/raw folder.
    • Open the file students.csv.
  2. Add Your Information:
    • Add a new row with your details in the following format:

      Student_ID,Image_URL,Latitude,Longitude

      Replace:

      • Student_ID with your unique student ID.
      • Image_URL with a URL of an image that represents your home place. Find this image online (e.g., use Google Images or Wikimedia Commons) and copy its direct URL.
      • Latitude and Longitude with the coordinates of your home place:
        • Open Google Maps and search for your home location.
        • Right-click on your home location and select β€œWhat’s here?”
        • Copy the latitude and longitude from the information panel.
    • Example row:

      12345,https://example.com/image.jpg,-23.550520,-46.633308
    • Save the file by pressing Ctrl+S (Windows) or Cmd+S (Mac).

  3. Commit and Push the CSV File:
    • Switch back to GitHub Desktop.
    • You will see the modified students.csv file listed as a change.
    • Write a commit message, e.g., Added my details to students.csv.
    • Click Commit to main (button at the bottom).
    • Push your changes by clicking Push origin (button at the top).
    • Alternatively, you can commit and push all in VS Code by using the Source Control tab.

24.6 Final Steps

  1. Verify your contributions in the GitHub repository by checking the Commits section on GitHub.
  2. Confirm that your JSON file, Python script modification, and CSV update are all visible.

24.7 Submission Checklist

  • JSON file (student_<student_id>.json) added and committed.
  • Python script (hello.py) modified and committed.
  • CSV file (students.csv) updated and committed.
  • Each step has a separate, descriptive commit message.
  • All changes are pushed to the shared GitHub repository.

24.8 Notes

This detailed workflow ensures that students gain experience in both local file management and Git/GitHub operations using professional tools like VS Code.