CS 151: Lab 1

Title image Project 1
Spring 2019

Lab Exercise 1: Equipping yourself for the projects

The purpose of this lab time is to give you an introduction to the basic tools we will be using this semester. These tools include a terminal, a text editor, and the Python interpreter.

Labs and projects are tightly coupled. Each project is initiated with a set of lab exercises. In the projects, you will write code that expands on the code written in lab. For each project, you will be writing Python code and running it. The programs typically create images. You will be posting some of these images, along with a description of the project, on a Google Doc. You will then turn in your code by putting it in a special directory on one of the campus computer servers. Today's lab will allow you to practice each of these tasks.


Tasks

  1. Introduction to the Terminal

    Open up the Terminal application, which is a text-based method of using your computer.

    A terminal is simply a text-based interface to the computer. In a terminal, you can type commands, manipulate files, execute programs, and open documents. Anything you can do in the Finder, you can do in a terminal (the reverse is not true).

    When working in a terminal, the current directory is called your working directory. A terminal will usually start in the home directory of your account.

    In a terminal we often need to specify a file or directory on the hard drive. The complete description of where a directory or file on a computer is located is called its path.

    Directories in a path are separated by a forward slash /. The topmost directory on the filesystem is indicated by a single slash. The directory tree for your computer is all relative to the top level directory. In other words, starting with a /, you can type the complete path to any file on your computer. For example, the following is the path to my home directory.

    /Users/bmaxwell

    Most of the time, however, you will be specifying paths relative to your current directory. Any path that starts without a slash is relative to your current working directory. Note that paths are case-sensitive, so be sure to use proper capitalization.

    You will use paths, and filenames to change directories, list the contents of directories, and run Python programs.

    Some important terminal commands are the following. We'll walk through how to use them together in lab.

    • ls - with no argument, ls lists the files in the current directory. If you put a path after the ls command, it will list the contents of the specified path.
    • cd <directory> - change directory. If you use the command with no arguments, it changes the directory back to your top-level home directory. The current directory is specified as . and the parent directory of the current working directory is specified using ..

      cd Set the current directory to your home directory
      cd ~ Set the current directory to your home directory. (The ~ character is shorthand for your home directory.)
      cd .. Move up to the parent directory of the current directory
      cd blah     Move into the sub-directory blah
      cd - Move to your last working directory

    • mv <from> <to> - move a file, including just renaming it in the current directory. The mv command will remove the file in the old location after copying it to the new location.
    • cp <from> <to> - copy a file to a new location or name
    • rm <filename> - remove the file (will not remove a directory). Not that this is not the same as dragging a file to the trash. Once the filed as been removed, it is gone for good.
    • rm -r <directory> - remove the directory and all the files and subdirectories in it

    Some useful terminal properties are the following.

    • Wildcard characters: the star character * is a wildcard character. If you want to see all the files in a directory that start with A, you can type:

      ls A*

      A possibly bad thing to do is to type rm *

    • Tab completion: when you have typed part of the name of a file or program, pressing the tab key will complete the filename as far as possible while the choice is unique. For example, if you have only one file that starts with the letter b, then typing b and then the tab key will complete the filename.

      If you have two or more files that start with b, tab completion will beep at you. If you press tab again, then the terminal will show you the options (all the files that start with b).

    • Hitting return - you don't have to be at the end of the line to press return. If you go back and edit something in a terminal command, you can press return and execute the whole line no matter where the cursor is located. Try it.

    Some useful (but not as common) terminal commands are the following.

    • pwd - tells you the complete pathname of the current directory
    • less <filename> - scroll through a file
    • cat <filename> - send the file to standard output
    • echo "a string" write the text within the string to standard output
    • touch <filename> touch either updates the modification date on a file or creates an empty file if the named file does not exist. This can be useful in various situations, like when you are learning to create, rename, and delete files using a terminal.

  2. Introduction to the file servers

    A fileserver is a central file system you can access from any computer. It's like having a virtual USB key you can plug into a computer to store your files. Colby maintains two different fileservers we use in this course. One (the Personal server) is for you to store the code you are working on. The other (Courses) is for you to turn in code. We will talk about the Courses directory late in the lab. For now, let's focus on where you should keep code that is work in progress.

    There are two ways to mount the file server.

    • Option 1: Load the root server directory and navigate to your directory.

      You can mount the Colby fileserver root directory by going to the Finder and typing cmd-K, or selecting 'Connect To Server...' from the Go menu. It will bring up a dialog box, into which you want to enter the following.

        Macs (CS Computer Lab):   smb://filer.colby.edu
        Windows: \\filer.colby.edu

      and, if necessary, click on the appropriate sub-directories until you find your personal directory.

    This system is backed up up regularly, and you can access it from any computer on the Colby network. We strongly suggest you store all of your work for this course into your personal directory. You can, in fact, work directly from your personal directory. Let's practice doing that for the first project.

    Project Prep:

    1. Mount your personal directory (Cmd-K, then smb://filer.colby.edu/Personal/srtaylor for Stephanie).
    2. In the terminal, navigate to it. Type cd followed by the path to the directory. E.g. for Stephanie, it may look like this:

      cd /Volumes/srtaylor

      Or, use a shortcut. If you type cd in the terminal, then drag the icon for your directory onto the terminal, then the path to it will automatically be pasted.

    3. Now make a directory (in your personal folder) named Project0. You can do this using the Finder, or you can type mkdir Project0 into the terminal.


  3. Introduction to text editing

    Text editors are the workhorse programs for writing code. You don't want fancy fonts or WYSIWYG layouts, you just want to see lines of text, preferably with syntax highlighting, which means that special words in a language are highlighted to make it easer to read the code. There are many editors to choose from.

    In lab, I will be using Microsoft Visual Studio Code. It is a free text editor for the Mac and Windows and it has all the features I need for writing programs. If you would like to install it on your personal computer, go to the Visual Studio Code web site and follow their instructions.

    If you're interested in programming on your personal computer, we recommend following this guide to install Python 3 on macOS and Windows.

    Project Prep:

    1. Open Visual Studio Code
    2. Create a new file (Cmd-N).
    3. Put in the line:
    4. print('You are smart')

    5. Then save the file (Cmd-S).
    6. Save it as smart.py in your Project0 directory
    7. Visual Studio Code may prompt you on the bottom-right corner to install the Python extension ("The Python extension is recommended for this file type.") Click Install.
    8. After the installation finishes, click the "Reload" button that appears on the top left.
    9. Click the top icon on the left side of the VS Code window (looks like 2 stacked sheets of paper, above the magnifying glass) to hide the left panel.
    10. You may see another message on the bottom right corner "Linter pylint is not installed." Click the button "Do not show again."
    11. You should see the text "Python 3.6.8" on the bottom left of the Visual Studio Code window.
    12. Now, you can instruct Python to run the program. In the terminal type

      python3 smart.py

      Congratulations, you just ran your first Python program. (Python humor)

      Note that it works only if the current working directory is the one that contains the file smart.py. So, one thing you need to do when working on a project is to ensure that your Terminal is in the right directory. Think of it as making sure your editor and Terminal agree about where the programs are. Note that, in general, you run Python programs by typing

      python3 <filename>

    Tip:

    You can open the Terminal inside Visual Studio Code so that you don't have to switch applications when running your code. Within Visual Studio Code, press Control+` (Note this is the Control key on macOS, not Cmd). You may navigate to the working directory just like in the Terminal (type cd , then drag in the icon.)

    For your information

    Here are some other text editors you should know about:

    • nano/pico - nano (or pico on some systems) is a very simple text editor that works in a terminal. All of the commands use the control key and are listed at the bottom of the screen. To open up a file, just type the name of the editor followed by the name of the file. If the file does not exist nano creates the file.
    • BBEdit - BBEdit is an upscale version of TextWrangler designed for writing code and html (web pages). Colby has a set of licenses for it, and it is installed on the lab computers and the computers on Mudd 4th. It has a few more features than TextWrangler, but will only work on the lab computers.
    • emacs - emacs is a text editor that has been used heavily by computer scientists for almost 40 years. It has many powerful capabilities, and the key commands in emacs are used in many other places (like TextWrangler). emacs is the battery-powered swiss-army knife with optional nuclear reactor of the editor world (emacs humor).

      If you open emacs, the opening screen tells you how to access a tutorial. The most important thing to know is how to save and get out. To save, hold the control key down and type x then s (C-x C-s). It will ask you for a filename (and give you a default if you opened a file) and then save it. To exit, hold down the control key and type x then c (C-x C-c).

    • JEdit - JEdit is very simlar to TextWrangler, and you can download it for free and run it on any operating system. Many students use it since it runs on Windows. It is slightly more complex than TextWrangler.
    • XCode - XCode is a powerful integrated development environment for Mac OSX, but you can also use it just for its editor, which is pretty decent.

  4. Introduction to the Python turtle

    Python is a simple yet powerful interpreted language for making computers do stuff. Many people have written modules for Python that do some sophisticated things. One of those modules is called turtle and implements turtle graphics (e.g. forward, left, right, pen down, and pen up).

    We can make the turtle move forwards, backwards, turn left, turn right, and pick up or put down the pen using the following commands.

    • forward(x) - move forward x pixels
    • backward(x) - move backward x pixels
    • left(a) - turn left a degrees
    • right(a) - turn right a degrees
    • up() - pick up the pen (don't draw when the turtle moves)
    • down() - put the pen down (draw when the turtle moves)

    More complete documentation is available on the Python documentation site. Let's write our first turtle program.

    Project Prep

    1. In Visual Studio Code, create a new file
    2. On the first line, put the instruction:

      from turtle import *

      That will import all of the turtle commands (i.e. it will give you the ability to direct the turtle to draw for you.)

    3. On the last line, put the instruction:

      input('Press Enter to continue')

      That will keep the turtle window open until you press return in the terminal. When you are finished, save a copy of your Python file to your directory on the Personal server.

    4. Save the file in your Project0 directory. Call it simple_turtle.py because it is your first turtle program. Notice that the filename ends in with the .py extension - that is meant to indicate the file contains Python code.
    5. Now, let's make the program do something. Using the right and forward turtle functions (commands), let's draw a hexagon. We place one command on each line, and put them in between our import and input commands. I don't want to ruin the fun of figuring out how to drawn a hexagon, so let me give you an example of how to draw a square:
      forward(100)
      right(90)
      forward(100)
      right(90)
      forward(100)
      right(90)
      forward(100)
      right(90)
      
    6. Run the program from the terminal.


  5. Introduction to the Google Classroom

    For each project, you will write a report in Google Docs and submit it on Google Classroom.

    Log onto Google Classroom, then navigate to our CS151 class webpage.

    Project Prep:

    1. At the top of the Google Classroom webpage, click "Classwork" and click on the currently assigned project (e.g. Project 1).
    2. In each assignment, you will see a rubric file. Click to open it.
    3. The rubric presents you with the criteria with which we grade your projects. Take a look through it, but you should not change anything. This ungraded rubric will get turned in along with your report when you are ready to submit your project. When your project is graded, the rubric will be returned to you with comments.
    4. Go back to Google Classroom.
    5. Read the instructions and then click "Create" to start writing your report and select Google Doc.
    6. This should open a new Google Doc. Give your report a meaningful title like "Otto's CS151 Project 1" so that the page content is clear from the title.
    7. In all of you project reports, you will need to include pictures of the images you created with your program. Since this project is an introduction to writing Python turtle code, the first required picture is of the tools you need to write and run the code. And since you have already drawn a hexagon, let's include it. Get your screen set up: Run your
      simple_turtle.py
      program and leave the image up. Then make sure the terminal, the hexagon, and Visual Studio Code are all visible (and make sure Visual Studio Code has simple_turtle.py displayed). Take a picture of these three things by pressing Shift-Command-4. A cursor will pop up. Draw a box around the hexagon, Visual Studio Code, and the Terminal. The computer will take a picture of it and place that picture on your desktop. I have found that it is a good idea to make your picture as narrow as possible. Otherwise, it can be hard to view it on the Google Doc page.
    8. Now edit the content of your Google Doc report. Write a stub for your write-up saying "These are the tools we use." and place the image in the page (drag in the image from your Desktop).
    9. Notice the "TURN IN" button on the top-right corner of the Google Doc. When you are finished writing your report and ready to submit, click this button.
    10. A dialog box will appear, asking if you are sure that you want to turn it in. Click TURN IN and your project writeup will be submitted to be graded!
    11. Save it, sit back and think about how much you have already accomplished.


  6. How to turn in code

    You will turn in your code by putting it in a directory in the Courses server. On the Courses server, you should have access to a directory called CS151, and within that, a directory with your user name. Files that you put into that directory you can edit, read, and write, and the professor can edit, read, and write, but no one else. To hand in your code and other materials, you will create a new directory, such as Project0, and then copy your code into the project directory for that week.

    As with the Personal server, there are two ways to mount the appropriate directory.

    • Option 1: Load the root server directory and navigate to your directory.

      You can mount the Colby fileserver root directory by going to the Finder and typing cmd-K, or selecting 'Connect To Server...' from the Go menu. It will bring up a dialog box, into which you want to enter the following.

        Macs (CS Computer Lab):   smb://filer.colby.edu
        Windows: \\filer.colby.edu

      Then click on the CS151 directory, and then your hand-in directory (it will have your username as its name).

    • Option 2: Mount your directory directly.

      You can mount your personal directory explicitly using the the following path in the 'Connect To Server...' dialog.

      smb://filer.colby.edu/Courses/CS151/<username>

    Project Prep

    Practice turning in your code by copying Project0 from your Personal server to the Courses server. The easiest way to do this is to drag and drop the folder from one Finder (one open to Personal) to another (one open to Courses).


When you are done with the lab exercises, you may start on the rest of the project.