Что такое cs50 ide
CS50 IDE's Docker configuration for Cloud9
Since Docker containers are built incrementally, building an offline container requires first creating an underlying workspace image, then building an ide50 image on top of that, and then finally creating the ide50-offline image on top. There are some make commands to simplify this process.
Making changes to offline:
Testing offline changes:
First build an offline workspace from scratch using the "To build all from scratch" steps below.
Next, make changes to the ide50 Debian package, build it, and follow the directions on that repo to locally install the deb on the offline workspace (also be sure to test it on an online workspace!) you generated above.
If all goes well, publish the deb to the mirror and build the offline workspace from scratch, once there has been sufficient time for all mirrors to receive the new deb.
To build all from scratch:
- Install Docker Engine.
- Open a terminal window.
- Execute cd /path/to/ide50-docker .
- Execute make build and wait. This builds all images sequentially.
- Start the built offline container with make run .
- (Mac OS X only) Execute make open to automatically open a tab in your favorite browser that loads the offline IDE.
Rebuild after making changes
- Stop the running offline container with make stop
- Delete offline image with make clean
- Re-build offline (only) with make offline
Rebuilding from an earlier version (say, if you need to build a new ide50 container with a new version of the ide50 deb) will require rebuilding from that container. It's probably easiest to delete all images and then run make build .
Deploying a new offline image
We generally deploy a new offline version when a new version of the ide50 deb is released. This way, people that download the offline version are sure to have the very latest.
- Clean all existing images and containers. Building from scratch is generally preferred since it ensures the latest version of Ubuntu and other packages. Use docker ps -a to see a full list of docker containers, stopping any relevant ones if necessary, and remove them with docker rm . Use docker images to see a list of images, and use docker rmi to delete those images. I usually delete all images that are associated with the offline IDE to be sure to build from scratch.
- Run make build to build from scratch.
- Run the offline with make run to ensure the latest deb was installed and all changes are as they appear.
If all looks good after a successful complete build, begin the actual deployment steps:
- Run make squash to squash the docker image into as small of a size as possible. Note: docker squash tools tend to change rapidly, so you may need to update the squash rule in the Makefile periodically, or update the copy of the docker-squash.
- Once that's done, apply both "beta" and "latest" tags to the build version. "Beta" builds are at least as new as the "latest", but sometimes its useful to release just a "beta" build with features that others test:
There are a variety of commands in make to help re-build an image.
- make build Builds the wkspc image, then the ide image, then the offline image.
- Build individual images with make wkspc , make ide , and make offline , respectively.
- make run runs an already-built offline container
- make stop then stops that running container
- make open (Mac OS X only, probably) opens the offline IDE in your browser.
- make shell to open a shell in the running container
- make clean removes the offline image and container only
To install for cloud9:
- Change line 1 of ide50/Dockerfile to FROM cloud9/workspace
- Zip ide50 (zip -r ide50 ide50).
- Email to Nikolai Onken, nikolai@c9.io
After making changes to CSS (e.g., in /var/c9sdk/plugins/* ) or config files (e.g., /var/c9sdk/configs/ide/workspace-cs50.js ):
Error checking TLS connection: Error checking and/or regenerating the certs
If something still seems awry with Docker, odds are the below will help. The below will delete and recreate the virtual machine used by Docker.
- To start writing our code quickly, we’ll use a tool for the course, CS50 IDE, an integrated development environment which includes programs and features for writing code. CS50 IDE is built atop a popular cloud-based IDE used by general programmers, but with additional educational features and customization.
- We’ll open the IDE, and after logging in we’ll see a screen like this:
- The top panel, blank, will contain text files within which we can write our code.
- The bottom panel, a terminal window, will allow us to type in various commands and run them, including programs from our code above.
How to Submit
Execute the below, logging in with your GitHub username and password when prompted. For security, you’ll see asterisks ( * ) instead of the actual characters in your password.
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Open with Desktop
- View raw
- Copy raw contents Copy raw contents
Copy raw contents
Copy raw contents
CS50 IDE is a cloud-based Integrated Development Environment powered by AWS Cloud9 that features a cloud-based Ubuntu environment, a browser-based editor that supports syntax highlighting and word completion, a GUI-based GDB debugging, themes, customizable layouts, keyboard shortcuts, and many more features. Since it's cloud-based, you can continue working on your problem sets even if you use a different computer!
- If you don't already have one, create a GitHub account here.
- Visit ide.cs50.io.
- Click Sign in with GitHub then login into your GitHub account and authorize the CS50 IDE GitHub app if prompted.
- Once you log in, you will automatically be forwarded to CS50 IDE! Hereafter, you may simply return to ide.cs50.io to log in and return to CS50 IDE, where all your files and settings are preserved.
Working with Files
There are multiple ways to create a new file in CS50 IDE:
- Click File > New File.
- Click on the little button atop any of the open panes and choose New File to open a blank file in that particular pane.
- From the file browser on the left, right-click or control-click on a directory and choose New File from the menu to create a blank file inside that directory, then double-click that file to open it.
- Press Alt + N (on a PC) or ⌘ + N (on a Mac).
When a file is open in a tab and you have some unsaved changes, CS50 IDE will show a red dot atop that tab, until you save your changes. Probably the easiest way to save a file is to press Ctrl + S (on a PC) or ⌘ + S (on a Mac), but you can also achieve the same by clicking File > Save (or File > Save As. if you want to save that as a new file), while you're working on that file.
To download a file from your workspace to your local computer, simply navigate to the location of that file, in the file browser on the left, right-click on that file's name, and choose Download.
To download all files in your home folder (i.e., ~/ ), click File > Download Project.
To upload a file from your local computer to your workspace:
- Select a directory where you want your files to get uploaded into, by clicking on that directory in the file browser on the left. By default, this is going to be your ~/ directory.
- Click File > Upload Local Files. , then choose either Select files or Select folder, depending on what you want to upload.
File Revision History
While working on a file, you can easily undo changes by clicking Edit > Undo or by pressing Ctrl + Z (on a PC) or ⌘ + Z on your keyboard. Similarly, you can redo changes by clicking Edit > Redo or by pressing Ctrl + Shift + Z .
The CS50 IDE also keeps track of file revisions, in case you want to toggle between file revisions, without having to undo or redo many times. You can show the whole file revision history by clicking File > Show File Revision History, which will show a timeline similar to the following, on which you can click to jump to a particular version.
Working with Terminals
Terminals allow you to interact with the underlying Ubuntu environment of CS50 IDE, using textual commands, to do all sorts of things, such as creating, copying, or moving files, compiling and running your programs, and more.
Opening New Terminals
When CS50 IDE first starts, there should be a terminal tab open at the bottom by default. You can also open a new terminal tab in that or any other pane of your choice by clicking the button atop that pane, and choosing New Terminal. Alternatively, you may just hit Alt + T (on a PC) or Option + T (on a Mac).
By default, the current working directory (CWD) in a new terminal is your ~/ directory. You can always navigate to your desired directory using cd path/to/directory . To open a terminal in a different directory, navigate to that directory in your file browser, right-click (on a PC) or Ctrl-click (on a Mac) on the directory's name, and choose Open Terminal Here.
Copying and Pasting
You will probably need to copy and paste commands into terminal tabs to run them. By default, copying and pasting via menus will work inside CS50 IDE, but you may have to grant the IDE permission to see the contents of your clipboard first. You can either choose to grant the IDE that permission or use your keyboard to copy and paste instead by pressing Ctrl + C and Ctrl + V > (on a PC) or ⌘ + C and ⌘ + V (on a Mac).
You will be often using the same commands over and over. Whether you don't remember a particular command, or too lazy to type it again, you can leverage the command history that is kept by your terminals. You can scroll up and down through the list of commands by pressing your keyboard's up or down arrow.
Additionally, you can search for a particular command by pressing Ctrl + R (on a PC) or ⌘ + R (on a Mac), then pressing the same key combination again to scroll through the matches, and finally Tab to select a particular match to modify it before running or Enter if you want to run it directly.
From time to time you will need to clear your terminal so that it's easier to see what you're doing. There are two main ways to do that
- Press Ctrl + L (on a PC) or ⌘ + L (on a Mac). This doesn't actually clear the terminal, but rather just scrolls down, so you can always scroll back up and see what got cleared if you want to.
- Press Ctrl + K (on a PC) or ⌘ + K (on a Mac). This actually clears the terminal; you won't be able to scroll back up and see what got cleared.
If you want to force a program to quit, for example because it's stuck in an infinite loop, press Ctrl + C (on a PC) or ⌘ + C (on a Mac). It may take several seconds for the program to respond.
As a last resort, in case the program won't stop, you might need to forcibly kill it. Perhaps the easiest way to do that is to just close the terminal tab, clicking Close when prompted, and opening a new one.
Layouts and Themes
The CS50 IDE is very customizable when it comes to laying out panes and tabs. You could very easily split a pane horizontally or vertically, by right-clicking (on a PC) or Ctrl-clicking (on a Mac) somewhere next to the button atop the pane you want to split and choosing Split Pane in Two Rows or Split Pane in Two Columns.
You could also move tabs between different panes by dragging and dropping a tab to the targeted pane or even to somewhere you want a new pane with that tab to be created.
By default a theme called Cloud9 Day is selected, but if you prefer a dark theme, you can select it via View > Dark Mode.
CS50 IDE also provides Presentation Mode in which the user interface is even more simplified and font sizes are larger. You can toggle that mode via View > Presentation Mode.
Sharing Your Workspace
Adding a Member to Your Workspace
Head to your IDE and click Share on the top-right corner.
Under Invite members, type in the GitHub username of the user you'd like to share your IDE with and click Invite.
Copy your IDE's link and share it with that user. They should now have access to your IDE.
Removing a Member to Your Workspace
Head to your IDE and click Share on the top-right corner.
Under Who has access find the GitHub username of the user you'd like to remove from your IDE.
Click the x button to the right of that username. They should no longer have access to your IDE.
If having any problems with CS50 IDE, please contact sysadmins@cs50.harvard.edu with all the necessary information about the problem, and how to replicate it, attaching screenshot(s) if need be!
main, header files
- The “when green flag clicked” block in Scratch starts what we would consider to be the main program. In C, the first line for the same is int main(void) , which we’ll learn more about over the coming weeks, followed by an open curly brace < , and a closed curly brace >, wrapping everything that should be in our program.
- We’ll learn more about ways we can modify this line in the coming weeks, but for now we’ll simply use this to start our program.
Walkthrough
Logging In
Head to ide.cs50.io and click “Log in” to access your CS50 IDE. Once your IDE loads, you should see that (by default) it’s divided into three parts. Toward the top of CS50 IDE is your “text editor”, where you’ll write all of your programs. Toward the bottom of is a “terminal window” (light blue, by default), a command-line interface (CLI) that allows you to explore your workspace’s files and directories, compile code, run programs, and even install new software. And on the left is your “file browser”, which shows you all of the files and folders currently in your IDE.
Start by clicking inside your terminal window. You should find that its “prompt” resembles the below.
Click inside of that terminal window and then type
followed by Enter in order to make a directory (i.e., folder) called pset1 inside of your home directory. Take care not to overlook the space between mkdir and ~/pset1 or any other character for that matter! Keep in mind that ~ always denotes your home directory and ~/pset1 denotes a directory called pset1 , which is inside of ~ .
Here on out, to execute (i.e., run) a command means to type it into a terminal window and then hit Enter. Commands are “case-sensitive,” so be sure not to type in uppercase when you mean lowercase or vice versa.
to move yourself into (i.e., open) that directory. Your prompt should now resemble the below.
If not, retrace your steps and see if you can determine where you went wrong.
to create a new directory called hello inside of your pset1 directory. Then execute
to move yourself into that directory.
Shall we have you write your first program? From the File menu, click New File, and save it (as via the Save option in the File menu) as hello.c inside of your ~/pset1/hello directory. Proceed to write your first program by typing precisely these lines into the file:
Notice how CS50 IDE adds “syntax highlighting” (i.e., color) as you type, though CS50 IDE’s choice of colors might differ from this problem set’s. Those colors aren’t actually saved inside of the file itself; they’re just added by CS50 IDE to make certain syntax stand out. Had you not saved the file as hello.c from the start, CS50 IDE wouldn’t know (per the filename’s extension) that you’re writing C code, in which case those colors would be absent.
Compiling
- In the terminal in the bottom pane of our IDE, we’ll compile our code before we can run it. Computers only understand binary, which is also used to represent instructions like printing something to the screen. Our source code has been written in characters we can read, but it needs to be compiled: converted to machine code, patterns of zeros and ones that our computer can directly understand.
- A program called a compiler will take source code as input and produce machine code as output. In the CS50 IDE, we have access to a compiler already, through a command called make. In our terminal, we’ll type in make hello , which will automatically find our hello.c file with our source code, and compile it into a program called hello . There will be some output, but no error messages in yellow or red, so our program compiled successfully.
- To run our program, we’ll type in another command, ./hello , which looks in the current folder, . , for a program called hello , and runs it.
- The $ in the terminal is an indicator of where the prompt is, or where we can type in more commands.
Compiling
- In the terminal in the bottom pane of our IDE, we’ll compile our code before we can run it. Computers only understand binary, which is also used to represent instructions like printing something to the screen. Our source code has been written in characters we can read, but it needs to be compiled: converted to machine code, patterns of zeros and ones that our computer can directly understand.
- A program called a compiler will take source code as input and produce machine code as output. In the CS50 IDE, we have access to a compiler already, through a command called make. In our terminal, we’ll type in make hello , which will automatically find our hello.c file with our source code, and compile it into a program called hello . There will be some output, but no error messages in yellow or red, so our program compiled successfully.
- To run our program, we’ll type in another command, ./hello , which looks in the current folder, . , for a program called hello , and runs it.
- The $ in the terminal is an indicator of where the prompt is, or where we can type in more commands.
Compiling Programs
Now, before we can execute the hello.c program, recall that we must compile it with a compiler (e.g., clang ), translating it from source code into machine code (i.e., zeroes and ones). Execute the command below to do just that:
And then execute this one again:
This time, you should see not only hello.c but a.out listed as well? (You can see the same graphically if you click that folder icon again.) That’s because clang has translated the source code in hello.c into machine code in a.out , which happens to stand for “assembler output,” but more on that another time.
Now run the program by executing the below.
Hello, world, indeed!
Getting User Input
Suffice it to say, no matter how you compile or execute this program, it only ever prints hello, world . Let’s personalize it a bit, just as we did in class.
Modify this program in such a way that it first prompts the user for their name and then prints hello, so-and-so , where so-and-so is their actual name.
As before, be sure to compile your program with:
And be sure to execute your program, testing it a few times with different inputs, with:
Functions and arguments
- We’ll use the same ideas we’ve explored in Scratch.
- Functions are small actions or verbs that we can use in our program to do something, and the inputs to functions are called arguments.
- For example, the “say” block in Scratch might have taken something like “hello, world” as an argument. In C, the function to print something to the screen is called printf (with the f standing for “formatted” text, which we’ll soon see). And in C, we pass in arguments within parentheses, as in printf("hello, world"); . The double quotes indicate that we want to print out the letters hello, world literally, and the semicolon at the end indicates the end of our line of code.
- side effects, such as something printed to the screen,
- and return values, a value that is passed back to our program that we can use or store for later.
- The “ask” block in Scratch, for example, created an “answer” block.
- In C, the single = indicates assignment, or setting the value on the right to the variable on the left. And C will call the get_string function in order to get its output first.
- And we also need to indicate that our variable named answer has a type of string, so our program knows to interpret the zeros and ones as text.
- Finally, we need to remember to add a semicolon to end our line of code.
- The %s is called a format code, which just means that we want the printf function to substitute a variable where the %s placeholder is. And the variable we want to use is answer , which we give to printf as another argument, separated from the first one with a comma. ( printf("hello, answer") would literally print out hello, answer every time.)
- \n is an example of an escape sequence, or some text that represents some other text.
Hints
Don’t recall how to prompt the user for their name?
Recall that you can use get_string as follows, storing its return value in a variable called name of type string .
Don’t recall how to format a string?
Don’t recall how to join (i.e., concatenate) the user’s name with a greeting? Recall that you can use printf not only to print but to format a string (hence, the f in printf ), a la the below, wherein name is a string .
Use of undeclared identifier?
Seeing the below, perhaps atop other errors?
Recall that, to use get_string , you need to include cs50.h (in which get_string is declared) atop a file, as with:
Tools
- With all of the new syntax, it’s easy for us to make mistakes or forget something. We have a few tools written by the staff to help us.
- We might forget to include a line of code, and when we try to compile our program, see a lot of lines of error messages that are hard to understand, since the compiler might have been designed for a more technical audience. help50 is a command we can run to explain problems in our code in a more user-friendly way. We can run it by adding help50 to the front of a command we’re trying, like help50 make hello , to get advice that might be more understandable.
- It turns out that, in C, new lines and indentation generally don’t affect how our code runs. For example, we can change our main function to be one line, int main(void)
, but it’s much harder to read, so we would consider it to have bad style. We can run style50 , as with style50 hello.c , with the name of the file of our source code, to see suggestions for new lines and indentation. - Additionally, we can add comments, notes in our source code for ourselves or other humans that don’t affect how our code runs. For example, we might add a line like // Greet user , with two slashes // to indicate that the line is a comment, and then write the purpose of our code or program to help us remember later on.
- check50 will check the correctness of our code with some automated tests. The staff writes tests specifically for some of the programs we’ll be writing in the course, and instructions for using check50 will be included in each problem set or lab as needed. After we run check50 , we’ll see some output telling us whether our code passed relevant tests.
- The CS50 IDE also gives us the equivalent of our own computer in the cloud, somewhere on the internet, with our own files and folders. If we click the folder icon in the top left, we’ll see a file tree, a GUI of the files in our IDE:
- To open a file, we can just double-click it. hello.c is the source code that we just wrote, and hello itself will have lots of red dots, each of which are unprintable characters since they represent binary instructions for our computers.
- To start writing our code quickly, we’ll use a tool for the course, CS50 IDE, an integrated development environment which includes programs and features for writing code. CS50 IDE is built atop a popular cloud-based IDE used by general programmers, but with additional educational features and customization.
- We’ll open the IDE, and after logging in we’ll see a screen like this:
- The top panel, blank, will contain text files within which we can write our code.
- The bottom panel, a terminal window, will allow us to type in various commands and run them, including programs from our code above.
Tools
- With all of the new syntax, it’s easy for us to make mistakes or forget something. We have a few tools written by the staff to help us.
- We might forget to include a line of code, and when we try to compile our program, see a lot of lines of error messages that are hard to understand, since the compiler might have been designed for a more technical audience. help50 is a command we can run to explain problems in our code in a more user-friendly way. We can run it by adding help50 to the front of a command we’re trying, like help50 make hello , to get advice that might be more understandable.
- It turns out that, in C, new lines and indentation generally don’t affect how our code runs. For example, we can change our main function to be one line, int main(void)
, but it’s much harder to read, so we would consider it to have bad style. We can run style50 , as with style50 hello.c , with the name of the file of our source code, to see suggestions for new lines and indentation. - Additionally, we can add comments, notes in our source code for ourselves or other humans that don’t affect how our code runs. For example, we might add a line like // Greet user , with two slashes // to indicate that the line is a comment, and then write the purpose of our code or program to help us remember later on.
- check50 will check the correctness of our code with some automated tests. The staff writes tests specifically for some of the programs we’ll be writing in the course, and instructions for using check50 will be included in each problem set or lab as needed. After we run check50 , we’ll see some output telling us whether our code passed relevant tests.
- The CS50 IDE also gives us the equivalent of our own computer in the cloud, somewhere on the internet, with our own files and folders. If we click the folder icon in the top left, we’ll see a file tree, a GUI of the files in our IDE:
- To open a file, we can just double-click it. hello.c is the source code that we just wrote, and hello itself will have lots of red dots, each of which are unprintable characters since they represent binary instructions for our computers.
CS50 IDE is a web-based “integrated development environment” that allows you to program “in the cloud,” without installing any software locally. Indeed, CS50 IDE provides you with your very own “workspace” (i.e., storage space) in which you can save your own files and folders (aka directories).
Naming Programs
Now, a.out isn’t the most user-friendly name for a program. Let’s compile hello.c again, this time saving the machine code in a file called, more aptly, hello . Execute the below.
Take care not to overlook any of those spaces therein! Then execute this one again:
You should now see not only hello.c (and a.out from before) but also hello listed as well? That’s because -o is a command-line argument, sometimes known as a flag or a switch, that tells clang to output (hence the o ) a file called hello . Execute the below to try out the newly named program.
Hello there again!
How to Test Your Code
Execute the below to evaluate the correctness of your code using check50 . But be sure to compile and test it yourself as well!
Execute the below to evaluate the style of your code using style50 .
Listing Files
Next, in your terminal window, immediately to the right of the prompt ( ~/pset1/hello/ $ ), execute
You should see just hello.c ? That’s because you’ve just listed the files in your hello folder. In particular, you executed (i.e., ran) a command called ls , which is shorthand for “list.” (It’s such a frequently used command that its authors called it just ls to save keystrokes.) Make sense?
Making Things Easier
Recall that we can automate the process of executing clang , letting make figure out how to do so for us, thereby saving us some keystrokes. Execute the below to compile this program one last time.
You should see that make executes clang with even more command-line arguments for you? More on those, too, another time!
Now execute the program itself one last time by executing the below.
main, header files
- The “when green flag clicked” block in Scratch starts what we would consider to be the main program. In C, the first line for the same is int main(void) , which we’ll learn more about over the coming weeks, followed by an open curly brace < , and a closed curly brace >, wrapping everything that should be in our program.
- We’ll learn more about ways we can modify this line in the coming weeks, but for now we’ll simply use this to start our program.
Functions and arguments
- We’ll use the same ideas we’ve explored in Scratch.
- Functions are small actions or verbs that we can use in our program to do something, and the inputs to functions are called arguments.
- For example, the “say” block in Scratch might have taken something like “hello, world” as an argument. In C, the function to print something to the screen is called printf (with the f standing for “formatted” text, which we’ll soon see). And in C, we pass in arguments within parentheses, as in printf("hello, world"); . The double quotes indicate that we want to print out the letters hello, world literally, and the semicolon at the end indicates the end of our line of code.
- side effects, such as something printed to the screen,
- and return values, a value that is passed back to our program that we can use or store for later.
- The “ask” block in Scratch, for example, created an “answer” block.
- In C, the single = indicates assignment, or setting the value on the right to the variable on the left. And C will call the get_string function in order to get its output first.
- And we also need to indicate that our variable named answer has a type of string, so our program knows to interpret the zeros and ones as text.
- Finally, we need to remember to add a semicolon to end our line of code.
- The %s is called a format code, which just means that we want the printf function to substitute a variable where the %s placeholder is. And the variable we want to use is answer , which we give to printf as another argument, separated from the first one with a comma. ( printf("hello, answer") would literally print out hello, answer every time.)
- \n is an example of an escape sequence, or some text that represents some other text.
Читайте также: