---
title: Setting up Git (for Project)
tags: COMP1010
---
<style>
.reveal {
font-size: 20px;
}
.reveal div.para {
text-align: left;
}
.reveal ul {
display: block;
}
.reveal ol {
display: block;
}
img[alt=drawing] { width: 200px; }
</style>
# COMP1010
## Git - What is it and why do we use it
* It is a distributed version control system.
* It saves each change to a folder (or select files and folders within it) online.
* For each change made to the project, it allows us to see:
* exactly **what changes were made** (which lines were added, removed, altered)
* the **date and time** that the changes were committed to the system
* **who** made the changes
* We use it in COMP1010 because:
* it is an extremely useful tool for projects outside this course, and we want you to learn how to use it
* it allows users to retrieve code which they may have previously deleted
* it allows tutors to see the evolution of a project over time, and thereby take into consideration the amount of work a student is doing, even if they don't get a feature working in the end (for example, spending time on different approaches and then deleting them to try a different approach)
* it allows tutors to keep an eye on students who may be falling be falling behind what we expect you to have completed in your project
* probably at least a couple other reasons
## Terminology
* Repository: TODO
* Commit:
* Push:
* Pull:
* Sync Changes:
## Setting up your project in Git
1. Go to [Gitlab Website](https://gitlab.cse.unsw.edu.au)
2. Sign in using your UNSW zid and zpass.
3. Close the browser and come back the next day.
4. Repeat steps 1 and 2.
5. Once you're logged in, you should see a link to your `project-repo`. Click on it.
6. Open a new tab/window and go to this url: https://gitlab.cse.unsw.edu.au/-/profile/personal_access_tokens
7. Tick all the boxes and create the token. Copy the token now - it is never displayed again.
8. In VSCode, select the `extensions` tab on the left, and search for `gitlab workflow`. Install the GitLab Workflow extension by clicking the blue `Install` button.

9. Open the Visual Studio Code command palette by pressing `Command`+`Shift`+`P`.
10. In the commnand palette, search for GitLab: Add Account. Press `Enter`.
11. In the URL to GitLab Instance, enter `https://gitlab.cse.unsw.edu.au`. Press `Enter`.

12. Paste in your GitLab personal access token and press`Enter`. The token is not displayed, nor is it accessible to others.
9. In your browser, navigate to your project. This project, `project-repo` is a basic starting point for your project which all students have been provided with the same.
![Uploading file..._68nb11nas]()
10. Click on project-repo. You will see that there are 3 files.
* .gitignore: You can ignore this file. (But don't delete it.) It helps gitlab know which files to save and keep an eye on, and which files it can ignore.
* README.md: This file is a template to fill out as you implement features in your application, to help your tutor with marking.
* main.py: The code in this file should look familiar to you. You may add more files to your application as you write it, but this one should be where you start.

11. Click on `Clone` and then click on `Visual Studio Code (HTTPS)`.

12. Click `Open Visual Studio Code`.

13. Your computer should ask you where you want to save your project. If it doesn't, follow the instructions on this website to install Git: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git. (TODO insert screenshots.) Then restart Visual Studio Code. Then go back to the previous step (Clone: Visual Studio Code (HTTPS)) and see if it asks you where to save the project.
10. Create a new folder on your computer inside the folder containing your COMP1010 work.

11. Select the folder you've just created and click `Select Repository Location`

12. You should see this inside Visual Studio Code. Allow it to run.

15. You will then open your project in Visual Studio Code. (I personally select `Open in New Window` but any option is fine.)

16. This is what you should see:

22. Open the README.md file, look around it. Make sure you understand the kinds of things which will go in here.
23. Open main.py.
## Making changes to your project
25. In main.py, change the html returned from the homepage (line 8) to say something like: `Hello <tutor's name>. This is my project about <insert project topic here>.` (You don't have to make this exact change, any change(s) to show you know how to change your project and sync those changes to GitLab is fine.)

26. Make sure you save your changes (any files you changed, need to be saved) before moving on to the next step.
26. Click on the 3rd icon down the left-hand side with the number 1 on it. Here you will see all the changes you've made to each of your files.

28. Write a message in the `Message` box. Then click `Commit`.
Your message should clearly and concisely describe what changes you've made which you're now adding to your repository.
Some examples of a meaningful message would include:
* Set up Flask template
* Added function to display homepage html
* Started implementing the homepage code, but I can't get the button to work
* Fixed the bug - the button now works and loads the next page
* Deleted the csv code as we are now going to use json

29. Select `Yes`. This will make all the changes you've made to your files, get committed.

30. Click `Sync Changes`. This will cause your changes to be uploaded to GitLab where your tutor will be able to view your work (and your partner, if you are working in a pair, be able to click `Sync Changes` and get all the changes you've made updated on their computer.)

31. **Error message:** "Make sure you configure your `user.name` and `user.email` in git."
**Solution:**
In the Terminal, (replacing `FIRST_NAME` and `LAST_NAME` with your name, and replacing `MY_NAME@example.com` with your e-mail address) type:
`git config --global user.name "FIRST_NAME LAST_NAME"`
`git config --global user.email "MY_NAME@example.com"`
This completes the work you need to do to keep your code in a repository.
... More coming here soon...
The next step is if you'd like to see the history of changes to a file. Right-click that file and select `Open Timeline`.
### Extra content if you are working in a pair
If you are working in a pair, make sure you click the `Sync Changes` often to avoid complications. This includes whenever you start working, and whenever you stop working.
If this causes a problem, contact Sim asap. (More tutorial to come...)