Setting up your basic online IDE

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)

Image for post
Image for post
Cloud9: Create a workspace

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

Image for post
Image for post
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 —

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:

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 `$`):

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

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

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:

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:

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

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

Image for post
Image for post

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

Written by

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store