matbalez-zz / your-integrated-development-environment

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Using the Integrated Development Environment

We set you up with an Integrated Development Environment (IDE) that you will be using to write code and submit your labs on Learn. Let's take a closer look at what this is.

It's really easy to open your IDE from a lesson on Learn; just click on the Open button on the toolbar at the top of a lab. The Learn application will open (you might get a pop-up window that will prompt your to launch the application) and your lesson will be cloned into the IDE.

In previous lessons, we discussed the shell and how you can easily access and edit the files and folders in your computer. The IDE mimics the behavior of the shell, but you cannot use it to access the existing files and folders on your computer, and anything that you do in the IDE will not affect those files and folders in your computer. You can only use the IDE to load and access lessons you loaded from Learn. However, all the commands that you would typically use in a regular shell or console you will also be able to use with the IDE.

What are the Components of the IDE?

Let's spend a minute studying the IDE user interface. You'll notice that it's composed of three sections: (1) a file browser (2) a text editor and (3) the console which you'll see in the image below.

IDE

IDE File Browser

The left side of your IDE application houses a simple file browser. It works just like a file browser on any computer: you can navigate a tree of folders and files to find the file you're looking for. Opening a file will open its contents in the text editor on the right.

IDE Text Editoor

The text editor is the heart of the IDE. It's where you'll write code, and where you'll be spending most of your time. We built the IDE over Atom, a free open-source text editor. One of the nifty things about text editors that have been optimized for programming is that your code will highlight as you type in ways that make it easier to discern the structure of your program. You'll notice this when you start writing your own code.

When you click on a file in your file browser, it will open up in the text editor portion of the IDE and you can go ahead and edit right there.

IDE Terminal

While the upper part of the screen is where you write code, the lower part of the screen is the terminal where you'll be typing in commands to navigate files and folders. Remember that this terminal won't give you access to the files and folders in your computer, but instead only to those that exist in the IDE (look at your file browser to see what's there).

We'll soon cover how to enter commands into the console that will allow you open, test and submit code.

Other Important Info About the IDE

You can use the IDE to open, test, save, and submit code only when you have an internet connection. You can edit code in your text editor when you're offline, but you will only be able to save it when you're connected back to the internet.

At the bottom of the IDE application, you'll see the word "Learn" in green letters. That means you're all set.

IDE Connected

If, however, you see Learn[DISCONNECTED], that means (pretty obviously) that you do not have an internet connection. So, make sure you're connected when you're ready to submit labs.

IDE Disconnected

When you are back on an internet connection and you still see the Learn[DISCONNECTED] icon, then in the IDE toolbar menu, go to Packages and within that menu, select Learn.co, and click "Reconnect."

On that note, you can't open Readmes on the IDE but only labs where you will need to write and submit code.

Use the IDE on one machine. For now, we're not supporting syncing across various machines. What that means is that if you downloaded a lesson from Learn on your computer, you won't see that lesson on another computer where you also might have this IDE installed.

View Your Integrated Development Environment on Learn.co and start learning to code for free.

About

License:Other