Rails Girls Tutorial

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

• 任意文本编辑器(例如Komodo Edit，Ultraedit甚至记事本，保存时编码请选择UTF-8而不是GBK/GB2132) ，用来编辑代码和文件
Texteditor (Komodo Edit) is for writing code and editing files
• 终端或者又称命令行、控制台甚至命令提示符（这里翻译将用“控制台”），用来启动Rails服务器和运行指令 Terminal / Command Prompt is for starting the rails server and running commands
• 浏览器，用来预览你的app Web browser is for viewing your application

1: 创建一个app Creating the application

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

打开控制台Open Terminal/Command Prompt:

• OS X: 打开Spotlight，键入Terminal并选择显示出来的命令行图标 OS X: Open Spotlight, type Terminal and click appearing Terminal options.
• Windows: 点击开始菜单并搜索Command Prompt ，点击Command Prompt with Ruby on Rails.(注意！此处为直译，不太清楚中文版Windows的情况，如不可行请使用以下方法：Alt-R也就是按住Alt的同时键入R，然后键入cmd后回车) Windows: Click Start-menu and search for Command Prompt, click Command Prompt with Ruby on Rails. .

键入指令： 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="https://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'

bundle
      rails generate uploader Picture

mount_uploader :picture, PictureUploader

class Idea < ActiveRecord::Base

把<%= f.text_field :picture %>

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

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

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

<%= @idea.picture %>

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

rm public/index.html

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