Rails Girls App Tutorial

Created by Vesa Vänskä, @vesan

Make sure you have Rails installed. Follow the installation guide to get set up.

Get to know the tools

 

Text Editor

  • Atom, Sublime Text, Vim and Emacs are examples of text editors your can use for writing code and editing files.

 

Terminal (known as Command Prompt on Windows)

  • Where you start the rails server and run commands.

 

Web browser

  • (Firefox, Safari, Chrome) for viewing your application.

Important

It is important that you select the instructions specific to your operating system - the commands you need to run on a Windows computer are slightly different to Mac or Linux. If you’re having trouble check the Operating System switcher at the bottom of the commands. In case you’re using a cloud service (e.g. nitrous), you need to run the Linux commands even if you are on a Windows computer.

1.Creating the application

We’re going to create a new Rails app called railsgirls.

First, let’s open a terminal:

Next, type these commands in the terminal:

mkdir projects

You can verify that a directory named projects was created by running the list command: ls. You should see the projects directory in the output. Now you want to change the directory you are currently in to the projects folder by running:

cd projects

You can verify you are now in an empty directory or folder by again running the ls command. Now you want to create a new app called railsgirls by running:

rails new railsgirls

This will create a new app in the folder railsgirls, so we again want to change the directory to be inside of our rails app by running:

cd railsgirls

If you run ls inside of the directory you should see folders such as app and config. You can then start the rails server by running:

rails server
mkdir projects

You can verify that a directory named projects was created by running the list command: dir. You should see the projects directory in the output. Now you want to change the directory you are currently in to the projects folder by running:

cd projects

You can verify you are now in an empty directory or folder by again running the dir command. Now you want to create a new app called railsgirls by running:

rails new railsgirls

This will create a new app in the folder railsgirls, so we again want to change the directory to be inside of our rails app by running:

cd railsgirls

If you run dir inside of the directory you should see folders such as app and config. You can then start the rails server by running:

rails server

Open http://localhost:3000 in your browser. If you are using a cloud service (e.g. nitrous), use its preview functionality instead (see installation guide for details).

You should see “Welcome aboard” page, which means that the generation of your new app worked correctly.

Notice in this window the command prompt is not visible because you are now in the Rails server, the command prompt looks like this:

$
>

When the command prompt is not visible you cannot execute new commands. If you try running cd or another command it will not work. To return to the normal command prompt:

Hit Ctrl+C in the terminal to quit the server.

Coach: Explain what each command does. What was generated? What does the server do?

2.Create Idea scaffold

We’re going to use Rails’ scaffold functionality to generate a starting point that allows us to list, add, remove, edit, and view things; in our case ideas.

Coach: What is Rails scaffolding? (Explain the command, the model name and related database table, naming conventions, attributes and types, etc.) What are migrations and why do you need them?

rails generate scaffold idea name:string description:text picture:string

The scaffold creates new files in your project directory, but to get it to work properly we need to run a couple of other commands to update our database and restart the server.

bin/rake db:migrate
rails server
ruby bin/rake db:migrate
rails server

Open http://localhost:3000/ideas in your browser. Cloud service (e.g. nitrous) users need to append ‘/ideas’ to their preview url instead (see installation guide).

Click around and test what you got by running these few command-line commands.

Hit Ctrl+C to quit the server again when you’ve clicked around a little.

3.Design

Coach: Talk about the relationship between HTML and Rails. What part of views is HTML and what is Embedded Ruby (ERB)? What is MVC and how does this relate to it? (Models and controllers are responsible for generating the HTML views.)

The app doesn’t look very nice yet. Let’s do something about that. We’ll use the Twitter Bootstrap project to give us nicer styling really easily.

Open app/views/layouts/application.html.erb in your text editor and above the line

<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>

add

<link rel="stylesheet" href="//railsgirls.com/assets/bootstrap.css">
<link rel="stylesheet" href="//railsgirls.com/assets/bootstrap-theme.css">

and replace

<%= yield %>

with

<div class="container">
  <%= yield %>
</div>

Let’s also add a navigation bar and footer to the layout. In the same file, under <body> add

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">The Idea app</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/ideas">Ideas</a></li>
      </ul>
    </div>
  </div>
</nav>

and before </body> add

<footer>
  <div class="container">
    Rails Girls 2015
  </div>
</footer>
<script src="//railsgirls.com/assets/bootstrap.js"></script>

Now let’s also change the styling of the ideas table. Open app/assets/stylesheets/application.css and at the bottom add

body { padding-top: 100px; }
footer { margin-top: 100px; }
table, td, th { vertical-align: middle; border: none; }
th { border-bottom: 1px solid #DDD; }

Now make sure you saved your files and refresh the browser to see what was changed. You can also change the HTML & CSS further.

In case your Terminal shows you an error message that sort of implies there is something wrong with your JavaScript or CoffeeScript, install nodejs. This issue should not appear when you’ve used the RailsInstaller (but when you’ve installed Rails via gem install rails).

Coach: Talk a little about CSS and layouts.

4.Adding picture uploads

We need to install a piece of software to let us upload files in Rails.

Open Gemfile in the project directory using your text editor and under the line

gem 'sqlite3'

add

gem 'carrierwave'

Coach: Explain what libraries are and why they are useful. Describe what open source software is.

Hit Ctrl+C in the terminal to quit the server.

In the terminal run:

bundle

Now we can generate the code for handling uploads. In the terminal run:

rails generate uploader Picture

Please start the rails server now.

Note: Some people might be using a second terminal to run the rails server continuously. If so you need to restart the Rails server process now. This is needed for the app to load the added library.

Open app/models/idea.rb and under the line

class Idea < ActiveRecord::Base

add

mount_uploader :picture, PictureUploader

Open app/views/ideas/_form.html.erb and change

<%= f.text_field :picture %>

to

<%= f.file_field :picture %>

Sometimes, you might get an TypeError: can’t cast ActionDispatch::Http::UploadedFile to string.

If this happens, in file app/views/ideas/_form.html.erb change the line

<%= form_for(@idea) do |f| %>

to

<%= form_for @idea, :html => {:multipart => true} do |f| %>

In your browser, add new idea with a picture. When you upload a picture it doesn’t look nice because it only shows a path to the file, so let’s fix that.

Open app/views/ideas/show.html.erb and change

<%= @idea.picture %>

to

<%= image_tag(@idea.picture_url, :width => 600) if @idea.picture.present? %>

Now refresh your browser to see what changed.

Coach: Talk a little about HTML.

5.Finetune the routes

Open http://localhost:3000 (or your preview url, if you are using a cloud service). It still shows the “Welcome aboard” page. Let’s make it redirect to the ideas page.

Open config/routes.rb and after the first line add

root :to => redirect('/ideas')

Test the change by opening the root path (that is, http://localhost:3000/ or your preview url) in your browser.

Coach: Talk about routes, and include details on the order of routes and their relation to static files.

Rails 3 users: You will need to delete the index.html from the /public/ folder for this to work.

Create static page in your app

Lets add a static page to our app that will hold information about the author of this application — you!

rails generate controller pages info

This command will create you a new folder under app/views called /pages and under that a file called info.html.erb which will be your info page.

It also adds a new simple route to your routes.rb.

get "pages/info"

Now you can open the file app/views/pages/info.html.erb and add information about you in HTML. To see your new info page, take your browser to http://localhost:3000/pages/info or, if you are a cloud service user, append ‘/pages/info’ to your preview url.

6+.What next?

Additional Guides