rails-on-nitrous.md

Web Development with Ruby on Rails and Nitrous.IO.

Introduction

We will create a simple "Wish List" Web application using Ruby on Rails (Rails) and Nitrous.IO (Nitrous).

Rails is a Web application development framework written in the Ruby programming language. It follows a "convention over configuration" philosophy that allows developers to quickly create valuable products if they choose to follow convention. However, Rails is powerful enough to to create applications like Twitter and Groupon.

Nitrous is a Web-based application development service. It permits software developers to focus on writing code and less on the intricacies of their development environment. Their tagline is, "making coding in the cloud a reality." Using Nitrous, you are literally programming a server running in "The Cloud."

Ready? Let's get started!

Create your Nitrous.IO account.

Nitrous is still in private beta. So you will need an invite in order to create your account on Nitrous. Please email Chris if you would like an invite.

Create a skeleton Rails app.

1. Click the "New Box" button once you have logged into Nitrous.

2. Click "Ruby/Rails" from the options and give your box a unique name. You'll be warned if the name is already taken.

3. Choose the "Region" from the select box that's closest to you before clicking the "Create Box" button.

4. Wait patiently while your new box is being provisioned. (This is a great time for questions!)

5. Once your box has been provisioned click on it and then click in the "Console" section at the bottom of the screen.

6. Enter the following commands at the prompt:

    rails new wish-list
    cd wish-list
    rails server
   

7. Congratulations! You have just started your new Rails app. The last line of console output should look something like this:

    [2013-06-15 17:23:46] INFO WEBrick::HTTPServer#start: pid=555 port=3000
   

8. Make note of the "port" number, 3000 in this case.

9. At the top of the Nitrous interface, select "Preview" from the menu and then the port on which your app is running. In the example above we would select "Port 3000."

10. You're Rails app should appear in a new browser tab and look like the image below:

Lost? You can always watch this YouTube video to see a quick tutorial on setting up a very simple Rails app on Nirtous. NOTE: Nitrous used to be called "Action.io" and the user interface has changed a bit from that which you'll see in the video linked above.

Adding the Wish scaffolding.

Now comes the magic! With a single command Rails will generate all the code needed to create, read, update and delete items for the wish list. Applications like this are called CRUD apps. The facility within Rails that enables this is called scaffolding.

1. Click back in the console at the bottom of the Nitrous user interface and enter this command:

    rails generate scaffold Wish name description:text url:text granted:boolean
   

2. Once the command above has finished executing we will need to setup the database that will store the items of our wish list, remove the index page which Rails displays by default and tell Rails to load the index view of our Wish List. First, we'll setup the database with this rather cryptic command, using Ruby's built-in rake command:

    rake db:migrate
   

3. Next, we'll remove the default index page with the command below:

    rm -f public/index.html
   

In Rails 4, there is no longer a public/index.html so you won't need to do this command.

4. In order to display our Wish List by default we will need to tell Rails that the "root" of our site should point to the "index" action of our "wishes" controller. We'll need to use Nitrous' built-in editor in order to achieve this. Using Nitrous' built-in file browser, on the left side of the user interface, expand the "wish-list" folder, and beneath it expand the "config" folder. Within the "config" folder you will find a file named "routes.rb." Double click on the file to open it in the text editor, on the right side of Nitrous' user interface.

5. Search for the line toward the bottom of the file that looks like this:

    # root :to => 'welcome#index'
   

6. Change that line to look like this:

    root :to => 'wishes#index'
   

Note: Don't forget to delete the leading '#' character. 7. Click the "Save" button at the top of the text editor. 8. Start the app again. This and all subsequent times we need only run this command in the console:

    rails server

9. Make note of the port number again and then preview your app.

More congratulations are in order! You're app is now ready to use. Go ahead! Create some entries. Change them and delete them too.

Let's make some tweaks!

So what did you notice as you played with your new app? "Listing wishes" seems like a silly page header, doesn't it? Also, it would be nice to be able to just click on the URL to see your item. Finally, wouldn't be great to hide wishes that have already been granted?

1. Let's tackle the page header first. We've already peeked into the "config" folder to tweak the default page. The "logic" of your Rails app will live in the "app" folder. Much of what Rails sends to be rendered in the browser window is specified in the "app/views" directory, and for our wishes in the "app/views/wishes" directory. Keeping with the "convention over confirguration" theme, the index view is specified in "app/views/wishes/index.html.erb." Open this file in the text editor by expanding the necessary folders in the file browser window and then double-clicking on the filename.
2. Change the very first line from this: <h1>Listing wishes</h1> to this: <h1>My wishes</h1>.
3. Now refresh the preview if it is still open in another browser tab or repeat the steps to start your app and preview it.
4. Fixing the URL will take a bit more work since it appears in two places. First if you don't have "app/views/wishes/index.html.erb" open still, open it again in the text editor and look for the line that reads: <td><%= wish.url %></td> and change it to this: <td><%= link_to "Link", wish.url %></td>. This change tells Rails to change the text it was rendering in the index (or list) view to a link.
5. The URL is also displayed on the "show" page. Make the same change there. HINT: Just add link_to "Link", immediately in front of @wish.url in "app/views/wishes/show.html.erb." Don't forget the trailing comma (',')!
6. Hiding granted wishes is a bit more interesting. This is an example of how "business logic" is turned into code. Most of the business logic for your typical Rails app is implemented in the controllers that live in "app/controllers" and "app/controllers/wishes_controller.rb" in our case. "Methods" in Rails controllers are associated with the views that share their name. Since we're interested in hiding wishes on the index view we'll need to modify the code in the WishesController's "index" method. Open "app/controllers/wishes_controller.rb" in the text editor and find this method:

def index
  @wishes = Wish.all

  respond_to do |format|
    format.html # index.html.erb
    format.json { render json: @wishes }
  end
end

Change that method to read:

def index
  @wishes = Wish.where(:granted != true)

  respond_to do |format|
    format.html # index.html.erb
    format.json { render json: @wishes }
  end
end

Notice that in the second line of the method we have instrusted Rails to return only the wishes whose granted status is not true. In logic, negation is typically depicted by an exclamation point ('!').

Wrap up

We hope you've enjoyed working with Rails on Nitrous. The demand for talented software developers, designers and IT professionals is increasing steadily with much of our day-to-day activity moving online and more-and-more frequently into our palms in the form of Web-enabled smart phones and tablet PCs.

Thank you to our friends at Nitrous.IO for providing beta access to the Web development platform.

If you're interested in learning more about Web Development with Ruby on Rails here are some links we're recommend you investigate this summer:

• Try Ruby
• Rails for Zombies
• Ruby on Rails Tutorial

Thanks for your time. If you have any further questions about this session please do not hesitate to contact Bill (bill@gaslight.co) or Chris (chris@gaslight.co) via email.

Have a great summer!