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 highly recommend you use audio and video (if possible) so you can actively collaborate. This mode of working is not only good practice for when you will be working with someone in person in the future 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 GitHub using your UCSD email address

• Join the SPIS GitHub organization

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

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

In order to use GitHub in SPIS, you must follow the instructions as described in the SPIS 2022 GitHub instructions document. This will tell you how to

1. Create a new GitHub account if you do not already have one, or link your UCSD email address to your existing GitHub account

2. Join the SPIS 2022 GitHub organization

Only proceed after you have completed those two tasks as described in the instructions document.

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

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

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

The animation below illustrates the process. Note that you can skip some of the steps that ask you a bunch of questions (by scrolling down to the skip button at the bottom of the page.)

Here's what it looks like once you've gotten to the main page 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. When the main menu is visible, right next to the three horizontal bars will be an icon with your name next to it (if you don't see this, but see a black whirlpool-like icon instead, you first need to toggle the main menu on as shown in the animation below).
   Clicking the down caret next to your name 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 (as illustrated in the animation below)

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

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. 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; of course you can return to the animation below if you want to see the explanations.)

7. The animation continues with typing in a "Hello World" program and running it; for the explanation of that, see the next text box.

Step 4: Write your first Hello World program.

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!')

When you do this, you will see the number 1 in front of the code that you just pasted. This number is a line number and 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. You can do this by clicking on the three horizontal bars in the top left corner and then clicking on the down caret next to your username and selecting "Log out".

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

There is a step we need to do one time to connect our repl.it account to our GitHub account. Here's what that looks like.

Log back into Repl.it and go back to the repl that you created in step 3. 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.

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). This is all on the left side. 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”.

Now, that you are starting from the page with your repl—the one where you put in the print('Hello, World!') program called practice-First-L —you are ready to connect your repl.it account to GitHub.

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.

These are the steps; you'll also see these in the animation below.

1. Go to your repl and on the left click on the second icon from the top (it looks like a fork and when you hover over it, it should show the words “Version control”). It may take some time to load.

2. In the new pane, click on the blue “Create a Git Repo" button. It may be grayed out initially because it is loading, but we will become available eventually.

3. When the new pane is done loading, click on "Connect to Github". In the new window click on “Connect Repl.it to your Github Account”. It will then ask you to sign into GitHub.

4. Once you are signed in, select your personal account to connect to (NOT"spis2022").
   Make sure “All repositories” is marked and click "Install and Authorize".

5. You will be redirected back to the repl.it, and it may appear as if nothing has happened, because you see the "Connect to GitHub" button again. But, as we'll see in the next step, we can now create a new GitHub repository that corresponds to our repl.

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

After you have established a connection between Repl.it and GitHub (step 4 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.

1. Make an edit to your repl (The GitHub update interface from Repl.it only allows you to push again if your code actually changed, so to try out the next step, any simple change will do).
   
   For example, you could change print('Hello, World!') to print("Hello, World!"), changing the 'single quotes' to "double quotes".

2. Go to your repl and click on the second icon from the top (called “Version control”).

3. Click on “Connect to GitHub", and you will see a new window with “Create a new GitHub repository” at the top. In the new window, select “spis2022” (not your personal GitHub account name) and in the field on the right keep the lab title (it should be the same as what you entered earlier).

4. Select “Private” (this is very 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 All & push ->”. You should see that a new commit has now appeared under “Previous Commits” (at the bottom).

5. 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 circle user icon at the top right and then on “Your organizations” in the menu that appears. Select spis2022 and then find your repo. 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.

Now is a good time to check in on your partner—how are they doing? Find out where they are in the process, and see if you can offer any help, or learn anything from them.

Step 7: Making Additional Commits

One of the words you'll hear used in connection with GitHub is the word "commit". It means a "set of changes to a piece of software".

For example, if you changed the single quotes to double quotes, that might be a "commit". In this step, we'll add a comment to the top of the file and make yet another "commit".

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 SPIS 2022

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

Here's how to make another commit (also illustrated in the animation below)

1. 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 main”. If there are changes, you will have the option to “Commit All & push”.

2. Enter a short description of the changes in the text box first. You should describe what you did, e.g. "Added a comment" or "Added code to determine if number is prime". You want a description that is informative; it will help you find this version of the code later.

3. Click "Commit All and Push"

The next step is not required, but if you want to see the effect, you can now click on the blue name of your repo under the Version Control tab, and it will take you to the repo on GitHub. There you can click on the main.py file to see that the change has been made. You can also click History at the upper right as shown in the animation to all of the different versions of the code; this is where you'll see the description that you entered. As you can see, each version is labelled with the description—this is why entering good descriptions is so important.

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.

• Hint: you may need to go under github.com/spis2022 to see the repo show up.

Go back to your repo on GitHub and you should see a button "Add file" (to the left of a green button that says "Code").

Choose "Upload files". In the window that appears, upload your picture and then scroll down to find the green button "Commit changes" to click. Add a message that describes the change (in this case, adding a photo of yourself).

You will be brought back to your repo, where you will now see the file with your picture listed as well.

The animation below shows this step, along with the next step, in which you add a README.md file to your repo.

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, 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, as shown in the animation below. For example, in the animation above, I didn't yet add in my text description. The animation below shows how I can do that.

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.