Lab 0: The Basics

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

Your first lab in SPIS

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.

Before you get started, you should be connected to Discord and visit the dedicated channel for you and your pair-partner. In SPIS, we want you to work on these labs together with your partner. We recommend you use audio and video (if possible) so you can actively collaborate. This mode of working is not only good practice for Fall but also a lot more fun.

While in some labs you will be doing pair programming (writing code together with your partner), for this lab, the assignments are individual. This means that everyone should go through all the steps themselves. However, you should work at the same time as your partner, at the same speed as your partner, while being in constant communication and helping each other out. Do not leave your partner in the dust!

Administrative Tasks for Lab 0

During this lab you will achieve the following administrative one-time steps:

• Create an account on Repl.it using your UCSD email address

• Create an account on GitHub using your UCSD email address

• Fill out a Google Form so that we know your GitHub username

• Accept an invitation to the SPIS GitHub organization

Learning Goals

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 1: Create a GitHub Account

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, open a web browser, and navigate to github.com. 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, log in and add your UCSD email address to the list of email addresses associated with the account.

Then, fill out the following form to let us know what your GitHub username is: https://forms.gle/KvNiGomB7xzdmuib7. 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.

Optional: Set up GitHub education: In addition to its many great features for regular free accounts, GitHub has special features for students and academics. You can request your account to be given “GitHub Education” student benefits via the following link: https://education.github.com/discount_requests/new. Requesting GitHub Education student benefits is completely optional, but it is something we strongly suggest as it’s quite nice and is completely free.

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. This will be super useful when you start pair-programming with someone in the subsequent labs.

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

Login via Google Login by clicking on the G icon above 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.)

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. The icon right next to the three horizontal bars (either a whirlpool-like icon or an icon with your name next to it, depending on whether the main menu is visible or not) 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, click on the blue “+ new repl” button in the top right corner. In the popup that appears, make sure the left tab is selected (“Create New Repl”). In the left box, select “Python” as the language.

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. However, if you want like to use a different name, just let us know and we'll update the spreadsheet). So if your name is Alex Triton, the name of your repl should be practice-Alex-T

You can leave the access as “public”. Click on the green “Create Repl” button. 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).

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 in the dust!

Log out of Repl.it for now.

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-2020

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

Log back into Repl.it and go back to the repl you created in step 3.

You can find your repls under the main menu under “My Repls”. If you don’t see this menu, you can make it appear by clicking the main menu icon (the three horizontal bars in the top left corner). 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 “Multiplayer repls”.

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.

Go to your repl and click on the second icon from the top (called “Version control”). In the new pane, click on “Connect to …” on the top. It will ask to “Connect Repl.it to your Github Account” and then to sign into GitHub. Once you are signed in, select “ucsd-cse-spis-2020”. Select “All repositories” and click on “Install and Authorize”.

Step 6: Push from Repl.it to GitHub for the First Time

After you have established a connection between Repl.it and GitHub (step 5 above), you can send a version of your code to GitHub (we refer to this as “pushing a repo”, where repo stands for repository in git parlance). We encourage you to do this frequently since each push creates a snapshot of your code you can revert back to if you want. We call this version control.

In our workflow, you start by creating a repl on Repl.it (as you already did in step 3). The first time you push the repl to GitHub, it will create a corresponding repo on GitHub. The procedure is explained below.

Go to your repl and click on the second icon from the top (called “Version control”). Click on “Connect to …”, and you will see “Create a new GitHub repository”. In the new window, select “ucsd-cse-spis-2020” (this is likely the only option you see) and keep the lab title (it should be the same as what you entered earlier). Select “Private” (this is important since you need to create a private repo on GitHub!) and then press “Create GitHub repository”. To make a commit to GitHub, write a message in “What did you change” (if you forget this, a red box will appear around it and no commit will be made) and press “commit & push ->”. You should see that a new commit has now appeared under “Previous Commits” (at the bottom).

Now go to your GitHub account. There should now be a repo there corresponding to your repl. On the github.com landing page, you should see it in the pane on the left. Alternatively, click on the icon at the top right and then on “Your repositories” in the menu that appears. Go to your repo and it will list the main.py file you pushed from Repl.it. You can click on the file to see its content.

How is your partner doing?

Step 7: Making Additional Commits

Go back to your repl. On the first line, 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 CSE SPIS 2020

print('Hello, World!')

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). Try executing 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). Just go to the “Version control” icon again (second one from the top). If you hadn't made any changes since the last time you pushed, you would see the message “up to date with master”. If there are changes, you will have the option to “commit & push”. Don’t forget to enter a short description of the changes in the text box first. This description is what the system will tell you if you look at previous commits (under “Previous Commits”). It is there to help you figure out which past commit you want if you are reverting to an earlier version. As such, make sure your description is informative.

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.

Go to your GitHub account on github.com and to the repo you created there earlier. When you click on main,py, you should see now that it indeed matches the latest version you pushed from Repl.it in step 7.

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, 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.

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.