Rails Girls Tutorial

0: 基本工具软件 Get to know the tools

1: 创建一个app Creating the application

我们来创建一个名为railsgirls的app We are going to create app called railsgirls.

打开控制台Open Terminal/Command Prompt:

键入指令: Type commands:

mkdir projects
cd projects
rails new railsgirls
cd railsgirls
rails s

>在浏览器中打开 http://localhost:3000. Open http://localhost:3000 in a browser

在控制台中键入CTRL-C 可以退出服务 CTRL-C to exit the server in Terminal/Command Prompt.

Coach:教练:请解释每一步指令的含义,以及我们刚刚生成了什么(哪些文件)?Rails服务是做什么用的?并介绍MVC Quick explanation about what each command does. What was generated? What does the server do. Talk about MVC.

创建一个名为idea的Scaffold Create Idea scaffold

我们使用Rails的scaffold来创建一个模板,在此基础上我们可以对数据进行list(?)、加入、删除、修改和预览等操作,这里的数据指的是我们的ideas。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.

rails generate scaffold idea name:string description:text picture:string
rake db:migrate
rails s

在浏览器中打开 http://localhost:3000/ideas

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

探索一下你的网页然后CTRL-C 退出服务CTRL-C exits the server when you have clicked around for a little.

Coach: 教练:什么是scaffold,什么是migration. What is a scaffold. What are migrations.

3: 设计 Design

现在我们动手改进一下网页的设计。我们用Twitter的Bootstrap项目可以轻松的生成网页的stylesheet. 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.

打开app/views/layouts/application.html.erb 找到这一行. Open app/views/layouts/application.html.erb and add on top of

<%= stylesheet_link_tag    "application" %>

并在它上面加入以下代码

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">

然后把

<%= yield %>

换成

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

现在我们对ideas表格添加页眉、页脚和格式

找到这个文件 application.html.erb,在下添加:

<div class="topbar">
        <div class="fill">
          <div class="container">
            <a id="logo" href="/">The Idea App</a>
            <ul class="nav">
              <li><a href="/ideas">Ideas</a></li>
            </ul>
          </div>
        </div>
      </div>

并在>之上添加:

<footer>
        <div class="container">
          Rails Girls 2011
        </div>
      </footer>

打开文件 app/assets/stylesheets/application.css 并在最底端添加

#logo { font-size: 20px; font-family: "Helvetica Neue",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; }

教练:请解释CSS和layouts

添加图片上传功能 Adding picture uploads

为了实现图片上传功能我们需要安装额外的库 We need to install additional library to add image processing.

打开文件Gemfile并找到这一行

gem 'carrierwave'

在它下面添加

gem 'sqlite3'
>教练:请解释什么是库(libraries)以及为什么需要使用它们。要不也聊聊开源?

现在我们来生成主管图片上传的代码,打开控制台并键入. Now we generate the needed code for picture handling. In the Terminal/Command Prompt run:

bundle
      rails generate uploader Picture

打开 app/models/idea.rb 找到这一行

并在下方添加

mount_uploader :picture, PictureUploader
class Idea < ActiveRecord::Base

打开 app/views/ideas/_form.html.erb

<%= f.text_field :picture %>
并把<%= f.file_field :picture %>

改成

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

改为

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

我们的view还是不太好看,因为它只显示文件路径。我们可以这么改进:The view doesn’t look nice, it only shows a path to the file, so let’s fix it

打开 app/views/ideas/show.html.erb 并将

<%= @idea.picture %>

改为

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

教练:聊聊HTML

5: 微调)routes Finetune the routes

如果你试图打开 http://localhost:3000 看到的还是默认的页面,我们需要把它改为ideas页面 If you try to open http://localhost:3000 it still shows the default page. Let’s make it redirect to the ideas page.

运行控制台指令. Run in the Terminal/Command Prompt:

rm public/index.html

然后打开文件 config/routes.rb 并在文件中添加以下内容为第二行

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

教练:请谈谈routes

What next?

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