Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

256 lines (169 sloc) 5.729 kb
layout title permalink
default
Rails Girls App Tutorial
app

Rails Girls App Tutorial

Created by Vesa Vänskä, @vesan

Install Rails

0: Get to know the tools

  • Texteditor (Komodo Edit) is for writing code and editing files
  • Terminal / Command Prompt is for starting the rails server and running commands
  • Web browser is for viewing your application

1: Creating the application

We are going to create app called railsgirls.

Open Terminal/Command Prompt:

  • OS X: Open Spotlight, type Terminal and click appearing Terminal options.
  • Windows: Click Start-menu and search for Command Prompt click Command Prompt with Ruby on Rails.

Type commands:

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

Open http://localhost:3000 in browser.

CTRL-C to exit the server in Terminal/Command Prompt.

Coach: Quick explanation about what each command does. What was generated? What does the server do. Talk about MVC.

2: Create Idea scaffold

We are using Rails’ scaffolds to generate a starting point that allows us to list, add, remove, edit, and view things; in our case ideas.

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

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

CTRL-C exits the server when you have clicked around for a little.

Coach: What is a scaffold. What are migrations.

3: Design

Design doesn’t look nice. Let’s do something about it. We’ll use Twitter’s Bootstrap project give us nicer default styles really easily.

Open app/views/layouts/application.html.erb and add on top of

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

the line

{% highlight erb %} {% endhighlight %}

and swap

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

for

{% highlight erb %}

{% endhighlight %}

Let’s also add topbar and footer to the layout and style those and the ideas table.

To the application.html.erb under <body> add:

{% highlight html %}

{% endhighlight %}

and before </body> add:

{% highlight html %}

Rails Girls 2012
{% endhighlight %}

Open app/assets/stylesheets/application.css and add to the bottom:

{% highlight css %}

logo {

font-size: 20px;
font-family: &quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif;
float: left;
padding: 10px;

} 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; } td.picture { width: 140px; } td.picture img { width: 140px; } {% endhighlight %}

Coach: Talk a little about CSS and layouts.

4: Adding picture uploads

We need to install additional library to add image processing.

Open Gemfile in the project and add

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

under the line

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

Coach: Tell what libraries are and why they are used. Maybe few words about Open Source?

Now we generate the needed code for picture handling. In the Terminal/Command Prompt run:

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

Open app/models/idea.rb and add

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

under the line

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

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

{% 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 %}

The view doesn’t look nice, it only shows a path to the file, so let’s fix it

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.

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 OS X and Linux, in the Terminal run:

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

In Windows, in the Command Prompt run:

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

Then open config/routes.rb and add to the second line of the file

{% 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 proper picture resizing to make loading the pictures faster

Additional Guides

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