Your First IDE Lab

Now that you've learned about the Learn IDE, it's time to solve your first lab. Watch the video below to see how to solve this lab.

<iframe width="560" height="315" src="https://www.youtube.com/embed/T7PVTSkleAk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

First IDE Lab

Instructions

Open this lab in the Learn IDE, edit the file edit-me.txt in this lab using the Learn IDE, run the tests with learn and submit the lab with learn submit.

If you feel comfortable with that, go ahead and try it now by clicking the "Open IDE" button. Otherwise continue reading for a more detailed explanation.

If you are new to programming, please read the entire lab before beginning.

The context of reading everything you're going to do before you start will help. Then you can follow along with the lab and it will be easier.

1. Opening a Lab with the Learn IDE

Whenever you're on a lab in Learn that requires the Learn IDE, you'll see an "Open IDE" button on the Lab's header.

When you click the Open button for the first time, the IDE will take over your browser window and a tour of the IDE features will begin. When the tour is finished, the IDE and this lesson text will be side by side so you can continue reading while looking at the IDE. Go ahead and click the Open IDE button to take the tour. If clicking on the Open IDE button did not do anything, or gave you an error message, use Ask a Question to get support in real time.

Now that you've taken a tour of the IDE, you have an idea of the different components. Let's review what you learned, and then take a closer look at how to work on a lab in the IDE.

You can click on Full Screen to have the IDE take over your browser window.

To view the IDE at Split Screen (the default when you open a lab in the IDE) you click Split Screen.

You can open or hide the file tree when you are in Split Screen, so you have more room to work in the text editor and terminal.

2. Navigate Folders with the File Tree

The File Tree in the IDE is a way to browse the file and folders in the lab. It works a lot like a file browser on your computer, showing you the top level folder on top, generally the lab name, and then all the files and folders inside the folder.

A folder (called a directory), is represented in the file tree with a Folder icon and a > showing that it is currently folded or closed, hiding the files inside it. If you click on the folder you can expand it or open it, revealing the files inside the directory.

You can "Right Click" on any directory in the File Tree and a context menu will appear, giving you options to create a new file or directory, or rename, move, duplicate, or delete the selected directory. When creating a new file or new directory via the context menu, it will be created within the directory you right clicked on, so in the image below, the right click occurred within the spec directory, so any new file created would appear there. If you "Right Click" on a file you will see options to rename, move, duplicate, or delete the selected file.

You can also add a file or directory by clicking the "Create New +" button at the bottom of the file tree.

When you create a file or directory from this button, you can define the path of the file or directory.

3. Open a File from the File Tree

When you want to actually edit a file, you can click or double click on it in the File Tree. The file will then open in a new tab in the text editor.

After opening this lab with the "Open IDE" button, use the File Tree and click on the file edit-me.txt to open it.

4. Edit a File with the Text Editor

Once you've opened a file, the tab you see is the Text Editor that allows you to edit the contents of the file. This is where we do our programming and write our code. You open the files you want to edit in a tab in the text editor and can write code and save the file. Each tab gets the name of the file you are editing.

If you've clicked on edit-me.txt as described in "Open a File from the File Tree, you should see a tab now with the title edit-me.txt. The file is totally empty. Go ahead and write anything in the file, Hello World!, your name, anything. To pass this lab all you need to do is not have a blank edit-me.txt file.

5. Saving a File

After you edit a file, you must save it. The file tab in the text editor will indicate if the file has been changed and not saved by putting a dot on the right corner of the tab. Once you're done editing a file, save it by pressing ⌘+S (Command and S at the same time) on a Mac, or Ctrl+S (Control and S at the same time) on Windows.

Notice how after saving the file, the yellow dot disappears on the tab.

At the bottom right of the IDE you will see a timestamp of when your work was last saved. Your work is being saved to the GitHub account that you connected to Learn. If at any point you want to access your work outside of Learn, go to your GitHub account.

If you save the file yourself, this will update to reflect the time at which you saved. The IDE is also auto saving (to your GitHub account) in the background. When the auto save occurs, the yellow dot on the text editor tab will disappear (even if you didn't manually save), and the timestamp at the bottom right will update. You should stay in the habit of manually saving your work, as having this habit will prepare you for working on a local environment, which will not auto save like the IDE does.

6. Running a Command with Your Terminal

On the bottom of the IDE is a Terminal. This is your access point to your development environment that the Learn IDE provides. As a programmer, we use the terminal for a lot of tasks including actually running our code and programs and executing commands. You're going to learn a lot about how to use a Terminal, but for now, know that you can type certain commands into it. Let's try one, ls (the letter L, but lowercase, and the letter S, but lowercase). Click into the terminal, then type ls and press enter to execute the command.

ls stands for list and it will list all the files in the directory, similar to the file tree. After you press enter you will see output from the terminal responding to the command you typed.

Try another one, from your terminal, type pwd, which stands for print working directory, which is the current directory the terminal is in.

As you can see, the terminal is in the first-ide-lab directory which is the folder that contains this lab.

7. Running Your Tests from Your Terminal

Now that you know how to run commands from your Terminal, the next step is to run the learn command. Each lab comes with a challenge or problem you need to solve by writing code, demonstrating that you understand the concepts and can implement them in your programs. Labs are "test driven", which means we include code in the lab that checks to see if the code you write correctly solves the challenge. To check your lab and run the tests, you type in learn in your terminal.

The challenge of this lab is to edit the file edit-me.txt. When that file is empty, if you run learn from your terminal, you would see:

This is a failing test, which is totally normal, all labs are failing until you make them pass. You can see that a test is failing from the output in the terminal, and the red light to the right of the IDE. When the test passes, the output in the terminal will show that the test passed, and the test light will turn green.

You can see from the output in your terminal some information about why the lab is currently failing. You don't need to understand all of the test output but there will always be hints as to what you're suppose to do to solve the lab. For example:

First Lab:
  you made
  an edit to edit-me.txt (FAILED - 1)

That's a pretty helpful message, the tests are telling you that you should have made an edit to edit-me.txt

Once you edit edit-me.txt to contain any text and not be empty, if you re-run learn from your terminal, you would see:

Notice that the edit-me.txt file has text in it and is saved. The tests now report in the terminal that everything is passing and there are no failures. The light to the right has turned green to reflect the passing test.

To review: make sure you've edited edit-me.txt and added any text, saved the file, and then run learn from your terminal to see if your tests are passing.

8. Submitting a Lab with learn submit

The last step to completing a lab with the Learn IDE is to submit it. You can do this at anytime by typing learn submit in your terminal.

If the tests are passing and the lab is submitted, all lights will turn green and you can move on to the next lesson.

Congratulations, you've passed your first lab!!!

Summary

For every lab, the workflow you will use to solve it is:

Summary

For every lab, the workflow you will use to solve it is:

1. Open the lab by clicking the "Open" button.

2. Read the README of the lab and get a sense of what the lab wants you to do.

3. Run the tests with learn from your terminal.

4. Open any files you need to edit using the File Tree.

5. Write code in the Text Editor that will satisfy the lab requirements.

6. Run the learn command in your Terminal as many times as you need to get feedback.

7. Once the tests are passing or even if you're just done for the day, submit the lab with learn submit.

8. If you ever get stuck, use "Ask a Question" to get help, don't be shy!

KWK-L1 Your First IDE Lab