Git GitHub and GUI

Goals

By the end of this lab, you will be able to:

Use Git and GitHub
Create a new repository
Clone to a local computer
Add files to your repository
Make changes
Commit and push changes

Introduction to Git and GitHub

By far, the most widely used modern version control system in the world is Git. Git is an actively maintained open source project originally developed in 2005 by Linus Torvalds, the creator of the Linux operating system kernel.

Git is responsible for keeping track of changes to content (usually source code files), and it provides mechanisms for sharing that content with others. GitHub is a company that provides Git repository hosting. GitHub should not be confused with Git itself.

Our lab machines are pre-installed with Git (https://git-scm.com/). However, if you want to use Git on your own computer, feel free to check this tutorial on how to install Git.

Also, Feel free to watch this video to get a quick idea on the mechanism of GitHub.

Basic Git Commands

git clone GIT_URL - Download a copy of a repository
git pull - Update your repository with latest changes from remote
git add - Add file(s) to your staging area
git commit - Record your snapshot into your history; "bless" your work
git push - Upload your changes to the remote repository (e.g., GitHub)
git log - Show commit logs

Part 1: Set up a GitHub account

If you don't already have a GitHub account go to the GitHub sign-up page (https://github.com/join) and create one.

Part 2: Create a new repository

Within your GitHub account, click on the “New” button to create a new repository
Name the repository whatever you would like. For today’s lab, I recommend you to name this “JavaGUI”.
Click on the “Initialize this repository with README”
Select "Add .gitignore Java". (This will prevent git from including .class files in your repository.)
You have created a new repository!
No click on the README.md file and write “Github/GUI Intro Lab”

Part 3: Clone the repository

Before you work on your repository, first clone the directory to your local computer. For cloning, you need to know the URL of your repository in GitHub.
To copy the URL, click on the clipboard-like icon next to the web address for this repository. (This is the same web address you can use to share this repository with colleagues. You can also just copy the url from the web address in your browser.)
Open your terminal, navigate to a directory where you would like to put the new repository. Type this command to “clone” the repository:

git clone URL

You should see “Cloning into ___” in your terminal. Use the ‘ls’ command to list the contents of the current working directory to make sure it’s there.

Part 4: Make changes to the git directory

Now, we can make changes to this directory and they will be tracked. First, using your terminal, navigate to the directory you just created:

cd JavaGUI

Copy GUIDemo.java file into this directory

Part 5: Commit and push changes

Now that you have made a change to this directory, you want to make sure they are saved to GitHub. The following commands are standard for staging and push changes to GitHub repository:

git status

git add --all

git commit -m "added GUIDemo.java into my first project"

git push

Type in your GitHub user name and password. The letters you type in might not show up on the screen, but they are getting typed in, don’t worry!
Now, you can go to the GitHub site and see your changes.
Now open GUIDemo.java using a text editor (don't use Eclipse).
Add the following code within the constructor:

        setTitle("Bigger/Smaller");
        setSize(200, 100);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        panel = new JPanel();
        biggerButton = new JButton("BIGGER");
        smallerButton = new JButton("SMALLER");
        biggerButton.addActionListener(new ButtonHandler());
        smallerButton.addActionListener(new ButtonHandler());
        add(panel);
        panel.add(biggerButton);
        panel.add(smallerButton);
        setVisible(true);

Compile and test GUIDemo.java.
Now use the add, commit and push commands again to push your changes to the GitHub repository. Make sure to provide a meaningful commit message.
Go to the GitHub and make sure your latest changes to the GUIDemo.java show up in the repository.

Part 6: Modifying the GUI

Add at least one more button to GUIDemo.java. This button can do whatever you want, but it should have a visible effect that is different from the two existing buttons. The button could:
- Teleport the window to a new position on the screen
- Change the text in the application title bar
- Something else

Once you have tested your change, commit it and push it to GitHub.

Grading

Read the Grading Criteria below carefully to get an idea of what deliverables will be used for grading.

Grading Criteria

Successfully added, committed, and pushed the README.md file into your “JavaGUI” GitHub repository
Successfully added, committed, and pushed the changes to the GUIDemo.java into your GitHub repository