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 if you haven't already done so.

Basic Git Commands

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

Part 1: Set up a GitHub account

If you don't already have a GitHub account with your jmu id, go to the GitHub sign-up page (https://github.com/join) and create one for school work.

Note:

• You do not need private repositories for the labs in this course, so you can go ahead and create a regular account and then turn it into an education account later. ( Student Developer Pack)
• An education account (aka Student Pack) will give you free repositories and other benefits.
• You can change a regular account to an education account by uploading a picture of your JAC card to verify you are a student.
• You should use private repositories if you want to back up programming assignments in order to comply with the JMU Honor Code.

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!
• Now click on the README.md file and type "GitHub/GUI Intro Lab" 

Part 3: Clone the repository

• Before you work on your repository, 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 the following 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 pushing changes to a 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 on your local computer 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 on the command line again to push your changes to the GitHub repository. Make sure to provide a meaningful commit message.
• Go to 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. Make sure you have used the appropriate names for the repository and files.

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 with appropriate commit messages.