Lab 0: The Basics

If you find typos or problems with the lab instructions, please let us know.

Your first lab in SPIS

For the SPIS lab assignments, you’ll be working in rooms B230 and B240, which are in the basement of the CSE building. These lab rooms are equipped with computer work stations that run the Linux operating system. For Lab 0, we ask that you do most of your work from a workstation. We do this to introduce you to some of the facilities that you will encounter in your years at UCSD, as similar workstations are used in several courses at the university. For future labs, you can also use your own laptop instead of the workstation but we will always ask you to work in the physical lab space.

For most future SPIS labs you will be doing pair programming (i.e., writing code together with your partner). However, for Lab 0, the assignments are individual. This means that everyone should go through all the steps themselves. Nevertheless, you should work next to your partner, at the same speed as your partner, and helping each other out. Do not leave your partner in the dust.

Learning Goals

In this first lab, you’ll get introduced to Repl.it, an online interactive programming environment, and to GitHub, which you will use to share your code with each other and the instructional staff. After completing this lab, you should be able to do the following:

• Login to Repl.it

• Create a Python program and run it

• Push code from Repl.it to GitHub

• Access GitHub, view files there and upload additional files

Lab 0, Step-by-Step

Step 0: Log into a Lab Workstation

Please sit down at a workstation next to where your partner is sitting. 

Before you can begin using a workstation, you need to know your SPIS account username and password. Your mentor will have emailed you this information; please check your UCSD email account (you can use your phone or laptop). If you cannot locate this email, just ask any mentor in the lab to help you.

With this username and password, log into the workstation.  Note that these SPIS credentials will also give you access to the UCSD Protected Wifi network, e.g., for your phone or laptop.

Now open a web browser on your lab workstation. You can find a web browser under "Applications" (top left).  Navigate to the SPIS Dashboard website and go to Lab 0 there. From this point forward, we recommend following along this lab from the workstation web browser.

Note: For your SPIS account, it is fine to keep the default password if you want. However, if you want to change it, you can find the instructions here. 

Step 1: Create a GitHub Account and Join the SPIS GitHub Organization

In SPIS, we will be using GitHub, an online hosting tool associated with the version control software "git". It is very popular in all kinds of software design projects. Don't worry if these terms don't make sense yet. Basically, version control is when you want to easily work with different versions of your work. For example, you made some changes that unfortunately don't work and now you would like to revert back to some earlier version that did work. You can do this with a tool called "git". In addition, you can also store a copy online, on what is called "GitHub". In addition to storing earlier versions of your work, because it is online, it also allows you to easily share your code with other people. You will be asked to send your code to GitHub ("push" your code) so that the mentors can provide feedback.

To get to GitHub, navigate to github.com. You can find a web browser under "Applications" (top left). If you don't already have a GitHub account, create a new one on the "free plan", using your UCSD email address. If you already have a GitHub account (or want to create a private one first and then link your UCSD email to it), log in and add your UCSD email address to the list of email addresses associated with the account (To do this, go top right corner profile circle > Settings > Emails > Add email address).

Then, fill out the following form to let us know what your GitHub username is: https://forms.gle/E29NVdimxrhv3RbW7. We need this info to invite you to the SPIS GitHub organization (step 4 below), so do this as soon as you have created your account.

Step 2: Create an Account on Repl.it

To write code, we will be using a browser-based programming environment, called Repl.it. The advantage is that you don't have to install anything special on your computer. You just go to the website and you can write and test all your code right there. In addition, it allows you to develop code collaboratively. People can all have access to the same code document together, much like a shared google doc. 

Go to a web browser and type in the URL: Repl.it

Then click on the blue "Sign up" botton in the top right corner. 

Login via Google Login by clicking on the "Continue with Google" icon below the text boxes (do not fill in the text boxes).  It will ask you to choose an account. Make sure you use your UCSD email account. If you don't see this option, open a new tab, go to gmail and log into your UCSD email account. Then try again. If you are still having issues, ask the mentors. 

After selecting your UCSD email account, follow any prompts shown accordingly such as inputting skill level and purpose of account. Finally, continue to the homepage of Repl.it.

Now that you are inside of Repl.it, let's have a quick look around:

1. Click on the three horizontal bars in the top left corner. This will toggle the main menu. 

2. On the top left next to your username is an icon with a down caret that  gives you access to the settings. This is also where you find the link to log out. 

Step 3: Write your First Program

Log into Repl.it (see step 2) . A project in Repl.it is called a "repl". For each lab, you will be creating a new repl. 

To create a repl, follow these steps:

1. Click on the blue “+ Create Repl"  on the left or the "+" in the top right. 

2. A popup will appear. In the left box (labeled "Template"), select “Python” as the language. 

3. In the right box, replace the random repl name with practice-<firstname>-<lastname initial>, but with <firstname> and <lastname initial> replaced by your own first name and the first initial of your last name respectively (To make it easy on us, please use the name as listed in the pair partner spreadsheet, which you find under Home.  This should correspond to your preferred name you told us.). So if your name is Alex Triton, the name of your repl should be practice-Alex-T

4. You can leave the access as “public”. Click on the blue “+ Create Repl” button. 

5. This will generate a new file main.py for you to start from. The file extension .py denotes that we are creating Python code. Note that, in this course, we will be using Python 3 (there are different versions of the Python language, with Python 3 being slightly different from the older Python 2).

6. The very first time you do this, Repl.it will show you a lot of help boxes; you can click Next to go through these. (It may be helpful to read them, since you won't see them again.)

Now let's write your first program here, one that prints Hello, World! as its output. In this sense, we are following a long tradition: for more than 40 years people have made printing Hello, World! the first thing you do when learning a new programming language.

Type or copy/paste the code for the Hello World program, shown below, into main.py:

print('Hello, World!')

That’s it! Notice that different words and symbols of our code were automatically highlighted different colors. This is a feature called “syntax highlighting”: if you specify that you’re programming in a specific language, the text editor will highlight your code based on that programming language’s syntax to make your code easier to read. Also, the number 1 you see is a line number. It is not part of the code itself. It shows up in the editor to make it easier for you to work with the code. 

Note that Repl.it saves your code automatically. There is no separate save functionality (much like google docs).

To execute your program (i.e, run the code) click on the green "Run" button you see at the top-center. The output will appear in the window on the right. In this case, it should show the words: Hello, World!

Once both you and your partner have run your “Hello World!” programs, you are ready to move on to the next step. Check in with your partner to make sure they are ready to move on as well. Do not leave your partner behind.

Log out of Repl.it for now. Remember, you can do this by clicking on the down caret in the top right corner.

Step 4: Accept the Invitation to the SPIS GitHub Organization

The mentors/instructors should have invited you to the SPIS GitHub organization (if they haven’t, the invitation will come soon). 

You should find a place where you can accept this invitation if you click on this link and look near the top of the page: https://github.com/ucsd-cse-spis-2023

You can also look in your UCSD email inbox for this invitation.  

Click on the invitation so that you are part of the SPIS GitHub organization. You can only progress to the next steps once you are done with this step.

Step 5: Connect Repl.it and Github (one time step)

Repl.it has a git-based version control system that you can connect directly to your GitHub account. It allows you to store earlier versions of your code that you can go back to if you want. To enable this, you first need to set up a connection between your Repl.it account and your GitHub account. This needs to be done only once; i.e., after you do it for this lab, you don’t need to do this again.

Follow these are the steps:

1. Log back into Repl.it. Note that we had you log out in the previous step so you could get a feel for what Repl.it looks like when you log in fresh. 

2. Click on the down caret in the top right corner (the same one you click on to log out). There, select "Account". Scroll all the way to the bottom to where you see "Connected Services".  Next to "GitHub", click on "Connect". 

3. A new tab will appear. If you are not currently logged into GitHub, it will ask you to log in. Once you are logged in (or if you were already), click on "Authorize Replit". Once you have done this, this tab will disappear.

4. Go back to your tab in Repl.it and refresh the page. You should now see the word "Disconnect" next to "GitHub".  Do not click on this! This just means that you are currently connected, which we wanted to happen (and therefore that disconnecting is the only option left -- which we don't want to do).

As mentioned before, you only need to do this one time here. For future Labs, you do not need to repeat this step.

Step 6: Push Your Code to GitHub

First, we are going to create an empty repository on GitHub. Do this in a separate tab.

1. If you already have the SPIS GitHub organization page open (https://github.com/ucsd-cse-spis-2023), you can go there. Otherwise, you can go to https://github.com/, click on the icon on the top right corner and select "Your organizations" and then ucsd-cse-spis-2023 from the list that appears. Either approach should get you to a page that shows "UCSD CSE SPIS 2023" as a title.

2. Click on "Repositories" in the menu bar on top ad then on the green "New Repository" button.  As owner, it should say "ucsd-cse-spis-2023". As repository name, you should type the same name you used before for your repl: practice-<firstname>-<lastname initial>, but with <firstname> and <lastname initial> replaced by your own first name and the first initial of your last name respectively. Make sure "Private" is checked (this is very important) and then click on the green "Create repository" button at the bottom.

3. This should get you to a new page where you see the words "Quick setup -- if you've done this kind of thing before" in a light blue box. That box also has a weblink that starts with "https" and ends in ".git". We will ask you to copy this weblink later, so keep this tab open.

Next, in a separate tab (keep the GitHub tab open), go to Repl.it, go to the repl you recreated in step 3. You can do this by clicking "My Repls" in the left menu bar. If you do not see this menu bar, click on the icon in the top left corner (typically three horizontal lines). For later labs, if your pair-partner is the one who originally created the repl and then shared it with you, you can find those repls under “Shared with me” once you have clicked on "My Repls".

1. When you are back in the repl you created earlier, in the left hand menu (you may need to click on the icon in the top left for the menu to appear), look for "Tools". Under Tools, click on "Git".

2.  A new pane will appear on the right. Click on the blue button that says "Initialize Git Repository". This may take some time and you may notice that the CPU allocation on the left goes a bit haywire (which you may ignore). You may also ignore any requests for upgrading your account.

3. After a while, the pane will refresh and it will now show "Initial commit". This basically means that your local git is initialized. 

4. Next, click on the gear icon in this pane on the right. It make take some time to load. It will eventually show a field that says "Enter Remote URL". This is where you paste the weblink you got from GitHub before (the one that starts with "https" and ends in ".git"). You can go back to that tab to copy it and then paste it here. Click on the blue "Save" button when it appears (you may need to do this twice).

5. Click on the left arrow next to "Settings" in the left pane. A new window may appear asking you to "Pass GitHub Credentials". Click on "Confirm for this session". 

Now let's make a change to our code and then commit to GitHub. In the code window, under

print('Hello, World!')

type 

print('Hello, you!')

and run the code (i.e., press the green "Run" button). By making a change to your code, you can now record that change with git.

On the right, where you see the output of your program printed, you should have the option to select a new subtab "Git". Do this. It will show a number 1 next to "Review Changes". Under Commit Message, you can write a message that describes the change you made. This is useful if you want to revert back later (remember, git is version control). E.g, as a message, you can write "added second print statement".  Now click on the button "Stage and commit all changes". 

The page will refresh. You now need to click on "Publish branch as origin/main".  This will have pushed your commit to GitHub.  A new window may appear asking you to "Pass GitHub Credentials". Click on "Confirm for this session".

Now go back to your GitHub tab and click on the name of your repo there. This will get you to into the repo itself. There, you should see your "main.py" and your commit message next to it. You may also see other files there. They are part of Repl.it and you can ignore them.

Step 7: Making Additional Commits

One of the words that appeared earlier in connection with GitHub is the word "commit".  It means a "set of changes to a piece of software".  In this step, we'll add a comment to the top of the file and make yet another "commit".

On the first line of your code, add a comment with your name and the reason you wrote the program (replace ‘Alex Triton’ with your own name). Your code should now look like this:

# Alex Triton for SPIS 2023

print('Hello, World!')

print('Hello, you!')

You are encouraged to write this comment, because it helps someone looking at your code to know that you wrote it. But, comments do not affect the functionality of the program. In general, in computer programming, a comment is something that is intended only for human readers of the code, and is otherwise “ignored by the system”. Nearly every programming language has some way to express comments, though the exact rules for formatting of comments – that is, the syntax of comments – differs from one language to another. In Python, a # starts a comment. Everything from the # to the end of that line is part of the comment (and is thus ignored when the program is run). Execute your program again, and you will see the output is the same as before.

Now that you have made this change to your code, you can make a new commit to GitHub. It is good practice to make occasional commits as you are developing code (probably not with every new line you write but frequently enough to be able to revert back to if you need). 

Here's how to make another commit:

1. Go back to the "Git" subtab on the right. You should again enter a message and then "Stage and commit all changes". 

2. The page should again change, and now say "Push 1 commit" somewhere near the middle. Press there. This will commit the change and push it to GitHub.

3. Go to your GitHub tab and verify that the change also appears there.

Step 8: Add a Message and a Photo to your Repo

We have used Repl.it to push things to GitHub. However, you can use other programs to do this (such as executing git commands themselves) or modify your repo on GitHub directly, which we will do here.

For this part, it is easiest if you go to your laptop and log into github there. However, you can also do it from your workstation (but you should need to be able to transfer, e.g., via email, a picture to the computer there). Go to your GitHub account on github.com and to the same repo you created there earlier. 

Step 9: Add README.md file with a link to your photo

Finally, we are going to create a README file for your repo. This file is used to describe the content of the repo.  Below the list of files in your repo on GitHub, you will see a green button "Add a README". Click it and this should take you to a page where you can create/edit this README file (you can add stuff below where it says "Edit new file"). 

Add a few lines of text that introduces yourself to the SPIS instructional staff. Tell us where you are from, some of things you are hoping to learn during SPIS, and perhaps some outside interests and activities you might like to participate in during our non-academic sessions (e.g. board games, etc.).   

Then, add the following, on a line by itself, with a blank line before it and after it. Copying it exactly, except for changing the alex-t.jpg part to whatever the name (and extension) of your image file is:


Save it (click the “Commit new file” button at the bottom), and take a look at your README.md file. You should see your photo embedded in the README.md at the bottom. If you want to edit the file, you can click on README.md and the find the pencil icon.   

When you are done using the lab computer, make sure you always log out! Otherwise, the screen will lock automatically after some time, which means nobody else can use this computer. To log out, click on the icon on the top right of your screen. In the window that appears, click on the icon on the bottom right (looks like a door with a < next to it).

Congratulations! Just read the note below and you are done with Lab 0!

A Note About Assignment Deadlines

SPIS will use a series of deadlines to help you stay on track with your work as well as to allow us to keep track of your progress. Those deadlines are listed on the Home page. Before each of these deadlines, please submit whatever you have completed on that assignment following the instructions given. This may mean simply having your latest changes pushed to the appropriate repo on GitHub, or this may mean following an alternative set of instructions to submit your assignment. You can also submit earlier if you like.

However, please know that while we want to encourage you to try to complete assignments by the given deadlines, if you find that you are working at a slower pace, just keep working. Because SPIS is not graded, it’s OK if you don’t get everything done, but we’d like you to do as much as you can. If you aren’t finished, submit what you have, but then keep working on the assignment as long as it is helping you learn the material.

Periodically, you’ll get feedback from your mentors and instructors about your progress on the assignments. Trying to stay ahead of the deadlines is good practice for the regular quarter, and it will help you get the most out of SPIS. But the most important thing is to work at the pace at which you will learn the material best.