Rails Girls App 教學

Created by Vesa Vänskä, @vesan

Translated by JuanitoFatas, @JuanitoFatas

確定妳已安裝好 Rails，尚未安裝請參考安裝指南。

認識工具

 

編輯器

Sublime Text、Komodo Edit、Vim、Emacs 以及 Gedit 都是妳可以用來寫程式及編輯檔案的編輯器。

 

終端 (Windows 叫命令提示字元)

是妳可以啟動 Rails 伺服器與執行命令的地方。

 

網路瀏覽器

(火狐, Safari, Chrome) 用來檢視妳的 APP。

重要

針對妳的作業系統選對的步驟很重要 —— 在 Windows 執行的命令跟 Mac 與 Linux 上的不太一樣。如果妳遇到任何問題，命令最下方可切換作業系統。

1. 建立 APP

我們即將建立一個嶄新的 Rails APP，叫做 railsgirls。

首先，打開終端：

接著，輸入下面的命令到終端：

mkdir projects
可以用 ls 命令來檢查叫做 projects 的目錄有沒有產生。應該會在輸出裡看到 projects 目錄。現在你想從當下目錄進入 projects 目錄，可以執行： 
cd projects
妳可以再次使用 ls 命令來檢查妳現在正在一個空目錄裡。現在妳可以用下面這個命令，來建立一個新的 APP，叫做 railsgirls： 
rails new railsgirls
這會在 railsgirls 目錄下建立出一個新的 APP，所以我們可以再次使用 cd 命令切換到 Rails APP 目錄： 
cd railsgirls
如果妳在這個目錄下執行 ls 命令，妳會看到像是 app 以及 config 這樣的目錄。可以用下面這個命令來啟動 Rails 伺服器： 
rails server

mkdir projects
可以用 dir 命令來檢查叫做 projects 的目錄有沒有產生。應該會在輸出裡看到 projects 目錄。現在你想從目前的目錄進入 projects 目錄，可以執行： 
cd projects
妳可以再次使用 ls 命令來檢查妳現在正在一個空目錄裡。現在妳可以用下面這個命令，來建立一個新的 APP，叫做 railsgirls： 
rails new railsgirls
這會在 railsgirls 目錄下建立出一個新的 APP，所以我們可以再次使用 cd 命令切換到 Rails APP 目錄： 
cd railsgirls
如果妳在這個目錄下執行 dir 命令，妳會看到像是 app 以及 config 這樣的目錄。可以用下面這個命令來啟動 Rails 伺服器： 
ruby bin\rails server

Windows 使用者注意： 可能需要將 bin\rails 換成 script\rails，這取決於妳安裝的 Rails 版本。

在瀏覽器打開 http://localhost:3000。應該會看到 “Welcome aboard” 的頁面，代表妳的 APP 產生成功了！

注意！在這個視窗裡看不到命令提示符號，是因為妳正在 Rails 伺服器裡。命令提示符號看起來像是：

＄

>

當看不到命令提示符號的時候，妳不能執行新的命令。如果妳試著執行 cd 或其它命令都是沒有效的。要回到正常的命令提示符號：

在終端按 CTRL-C 來離開伺服器。

教練： 解釋每個命令用來在做什麼。產生了什麼檔案？伺服器的功用？

2. 建立 Idea 鷹架

我們即將使用 Rails 內建的鷹架功能來起步。讓我們可以： 列出、新增、移除、編輯、檢視想法。

教練： Rails 鷹架是什麼？（解釋鷹架命令、Model 名稱以及相關的資料庫表格、命名慣例、屬性以及型別…等等。）什麼是資料庫遷移（Migrations）？為什麼需要遷移？

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

rails generate scaffold idea name:string description:text picture:string
rake db:migrate
ruby bin\rails server

到瀏覽器打開 http://localhost:3000/ideas。四處把玩看看，妳僅用幾行命令就產生出來的 APP。

玩了一陣子之後，按 CTRL-C 來再次離開伺服器。

3. 設計

教練： 講講 Rails 與 HTML 之間的關係。Views 裡面哪個部分是 HTML？哪個部分是嵌入 Ruby (ERB)？MVC 是什麼？與它們有什麼關係？（模型與控制器負責產生 HTML Views）

妳的 APP 現在看起來不太漂亮。讓我們來給她打扮打扮。我們會使用 Twitter Bootstrap 專案來非常簡單的幫 APP 變漂亮。

在編輯器裡打開 app/views/layouts/application.html.erb，找到這行

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

在這行上面加入

<link rel="stylesheet" href="http://railsgirls.com/assets/bootstrap.css">

並將這行換成

<%= yield %>

這個

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

讓我們也加入導覽條與 footer 到頁面吧。在同一個檔案裡，<body> 標籤下面，加入

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="brand" href="/">The Idea app</a>
      <ul class="nav">
        <li class="active"><a href="/ideas">Ideas</a></li>
      </ul>
    </div>
  </div>
</div>

以及在 </body> 之前，加入

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

現在讓我們也來變一下 ideas 表格的風格。打開 app/assets/stylesheets/application.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; }

現在確保妳已存檔，並將瀏覽器重新整理，來看看什麼被改變了。妳也可以繼續調整 HTML 與 CSS。

教練： 稍微講講 CSS 與 layout。

Step 4: 加入圖片上傳

我們需要安裝一點軟體，讓我們可以在 Rails 裡上傳檔案。

在專案目錄下，用編輯器打開 Gemfile，找到這行，在這行下面：

gem 'sqlite3'

加入

gem 'carrierwave'

教練： 解釋什麼是函式庫，為什麼函式庫很有用。描述一下什麼是開源軟體。

在終端裡，執行：

bundle

現在我們可以來產生處理上傳的程式碼。在終端裡，執行：

rails generate uploader Picture

現在妳需要在終端裡 重新啟動 Rails 伺服器的進程。

在終端裡按下 CTRL-C 來離開伺服器。一旦伺服器停止，妳可以按上，來獲得上個輸入的命令，接著按 enter 來重新啟動伺服器。

為什麼需要重新啟動伺服器呢？因為 APP 需要載入剛剛加入的函式庫。

打開 app/models/idea.rb 並在這行下面

class Idea < ActiveRecord::Base

加入

  mount_uploader :picture, PictureUploader

打開 app/views/ideas/_form.html.erb 並將這行

<%= f.text_field :picture %>

改成

<%= f.file_field :picture %>

在妳的瀏覽器裡，新增一個想法吧，順便貼張圖片。當你上傳一張圖片，它看起來不像圖片，因為它顯示的是圖片的路徑，所以讓我們讓圖片顯示吧。

打開 app/views/ideas/show.html.erb 並將這行

<%= @idea.picture %>

改成

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

現在重新整理妳的瀏覽器，看看發生了什麼？

教練： 稍微講講 HTML。

Step 5: 調整路由

如果妳試著開啟 http://localhost:3000，它仍顯示 “Welcome aboard” 頁面。讓我們來把這頁導到 ideas 頁面。

打開 config/routes.rb 在第一行後面，加入

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

將 public/ 目錄下的 index.html 刪除。

用瀏覽器打開網站的根目錄 (root path，也就是 http://localhost:3000/)，看看有沒有改變。

教練： 講解路由，包含路由順序以及路由與靜態檔案的關係。

下一步？

其它指南