Setting up your basic online IDE

Makers
4 min readDec 12, 2017

At Makers Academy, we like to stay as close to the machine as we can. That means working from the ‘command line’ and not relying on ‘GUI’ tools.

However, setting up your machine for web development can be tricky — especially on Windows — and can stop you before you really get started.

Fortunately, there are a number of cloud-based development environments available that provide an almost identical experience, but without the hassle of setting up your local machine. For this project, we recommend you use Cloud9.

1. Create a free account on Cloud9
2. Choose ‘Create a new workspace’
3. Call your workspace “motivational-posters”
4. Choose a Hosted workspace and make it public
5. Choose ‘Custom’ as a template
6. Create the workspace (this will take Cloud9 a few moments)

Cloud9: Create a workspace

When your workspace has been created, you should see it open in your browser. It will look something like this:

Cloud9: Intro

This is what is known in the business as an **Integrated Development Environment** (**IDE**). IDEs are highly complex applications and take a bit of getting used to. Think Microsoft Word, on steroids, exposed to radiation in a secret nuclear incident and having gained super powers. Something like that. Anyway, the important thing is, Cloud9 gives us the four critical components of our development environment:

* A **file system** to store our source files (code, images, HTML, CSS and so on),
* an **editor** to edit our source files,
* an **operating system** to run our programs
* and a **command line** — or **terminal** — to send instructions to the operating system.

## Step 0.1: Update the README
You’ll notice that a single file has been created for you already —

 README.md

It’s a convention of all good projects to have a README file that explains what the project is for and provides information about how to install and run the program.

If you double click the file in the tree view, it will open for editing in the main pane. The file has a “.md” extension, which means it is intended to be written in Markdown, a popular syntax for lightly styling text files. Markdown is ubiquitous on GitHub and here is a useful guide.

For now though, let’s just create a basic placeholder for information. Delete the contents of the file and replace with the following:

# Motivational PostersBuilt by [your name here]

Make sure you save the file. Switch to the preview tab: has it been updated with your new content?

## Step 0.2: Hello Ruby
Ruby is a programming language. It comes pre-installed on your Cloud9 workspace. To test this, go to the command line and type (don’t include the `$`):

$ ruby -v

(…then hit return to enter it.) You should see something like this:


ruby 2.2.1p85 (2015–02–26 revision 49769) [x86_64-linux]

We’ll use the `$` sign to represent the command line prompt and to differentiate commands you should enter from output you should see.

This tells us the currently installed version of Ruby (which we requested by passing `-v` to the `ruby` command).

Writing a Ruby program

Create a file in your workspace called

hello.rb

By convention, Ruby files have the extension `.rb`. The benefit of this convention is that Cloud9 will provide Ruby syntax highlighting for all files with the `.rb` extension.

Open the file in the editor and add the following content:

puts ‘Hello Ruby’

See how syntax highlighting works? The IDE recognizes the Ruby language and uses colours to differentiate elements of the ‘grammar’. You may see different colours depending on your chosen theme.

Save the file. Now go to the command line and enter the following:

$ ruby hello.rb

This tells the Ruby engine to run the code in `hello.rb`. You should see the following output:

Hello Ruby

You’ve just written a command-line program: you run it from the command line and it outputs to the command line!

This post was written by Nikesh Ashar, who you might meet in your onboarding process. Interested in joining our next cohort? Apply here.

--

--

Makers

Creating a new generation of tech talent who are ready to build the change in society and thrive in the new world of work.