Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

257 lines (168 sloc) 6.684 kB
layout title permalink
default
Rails Girls App Tutorial
app

Rails Girls App Tutorial

Created by Vesa Vänskä, @vesan

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

Step 0: Get to know the tools

  • Text editor: Sublime Text, Komodo Edit, Vim, Emacs, and Gedit 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.

Step 1: Creating the application

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

First, let's open a terminal:

  • Mac OS X: Open Spotlight, type Terminal and click the Terminal application.
  • Windows: Click Start and look for Command Prompt, then click Command Prompt with Ruby on Rails.
  • Linux (Ubuntu): Search for Terminal on the dash and click Terminal.

Next, type these commands in the terminal:

{% highlight sh %} mkdir projects cd projects rails new railsgirls cd railsgirls rails server {% endhighlight %}

Open http://localhost:3000 in your browser.

Hit CTRL-C in the terminal to quit the server.

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

Step 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?

{% highlight sh %} rails generate scaffold idea name:string description:text picture:string rake db:migrate rails server {% endhighlight %}

Open http://localhost:3000/ideas in your browser.

Hit CTRL-C to quit the server again when you've clicked around a little.

Step 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

{% highlight erb %} <%= stylesheet_link_tag "application" %> {% endhighlight %}

add

{% highlight erb %} {% endhighlight %}

and replace

{% highlight erb %} <%= yield %> {% endhighlight %}

with

{% highlight erb %}

<%= yield %>

{% endhighlight %}

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

{% highlight html %}

{% endhighlight %}

and before </body> add

{% highlight html %}

Rails Girls 2013
{% endhighlight %}

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

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

Coach: Talk a little about CSS and layouts.

Step 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 and under the line

{% highlight ruby %} gem 'sqlite3' {% endhighlight %}

add

{% highlight ruby %} gem 'carrierwave' {% endhighlight %}

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

In the terminal run:

{% highlight sh %} bundle {% endhighlight %}

At this point you need to restart the Rails server process in the terminal. This is needed for the app to load the added library.

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

{% highlight sh %} rails generate uploader Picture {% endhighlight %}

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

{% highlight ruby %} class Idea < ActiveRecord::Base {% endhighlight %}

add

{% highlight ruby %} mount_uploader :picture, PictureUploader {% endhighlight %}

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

{% highlight erb %} <%= f.text_field :picture %> {% endhighlight %}

to

{% highlight erb %} <%= f.file_field :picture %> {% endhighlight %}

and

{% highlight erb %} <%= form_for(@idea) do |f| %> {% endhighlight %}

to

{% highlight erb %} <%= form_for(@idea, :html => { :multipart => true }) do |f| %> {% endhighlight %}

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

{% highlight erb %} <%= @idea.picture %> {% endhighlight %}

to

{% highlight erb %} <%= image_tag(@idea.picture_url, :width => 600) if @idea.picture.present? %> {% endhighlight %}

Coach: Talk a little about HTML.

Step 5: Finetune the routes

If you try to open http://localhost:3000 it still shows the default page. Let's make it redirect to the ideas page.

On Mac OS X and Linux, in the terminal run:

{% highlight sh %} rm public/index.html {% endhighlight %}

On Windows, in the command prompt run:

{% highlight bat %} del public\index.html {% endhighlight %}

Then open config/routes.rb and after the first line add

{% highlight ruby %} root :to => redirect('/ideas') {% endhighlight %}

Coach: Talk about routes.

What next?

  • Add design using HTML & CSS
  • Add ratings
  • Use CoffeeScript (or JavaScript) to add interaction
  • Add picture resizing to make loading the pictures faster

Additional Guides

Jump to Line
Something went wrong with that request. Please try again.