Rails Girls App 教學

Created by Vesa Vänskä, @vesan

Translation 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 Scaffold

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

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

rails generate scaffold idea name:string description:text picture:string
rails generate scaffold idea name:string description:text picture:string

Scaffold 在專案資料夾下建立了一些新檔案，要讓這些檔案生效，需要執行一些指令，來更新資料庫、並重新啟動伺服器。

rake db:migrate
rails server
rake db:migrate
ruby bin\rails server

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

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

3.設計

教練： 講講 Rails 與 HTML 之間的關係。Views 裡面哪個部分是 HTML？哪個部分是 ERB？MVC 是什麼？與它們有什麼關係？（Model 與 Controller 負責產生 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="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

並將這行

<%= yield %>

換成這個

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

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

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">The Idea app</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</nav>

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

<footer>
  <div class="container">
    Rails Girls Taipei 2015
  </div>
</footer>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

現在讓我們也來變一下 ideas 表格的風格。打開 app/assets/stylesheets/application.css 到最下面加入

footer { margin-top: 100px; }
td { text-align: center; padding-left: 10px; }
th { border-bottom: 1px solid #DDD; padding-left: 20px; }

修改過後記得要存檔，並重新整理瀏覽器，看看什麼變得不一樣了。妳也可以繼續調整 HTML 與 CSS。

教練： 稍微講講 CSS 與 layout。

4.加入圖片上傳

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

在專案資料夾下，用編輯器打開 Gemfile，找到這行，在這行下面：

gem 'sqlite3'

加入

gem 'carrierwave'

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

在終端裡，執行：

bundle

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

rails generate uploader Picture

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

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

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

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

class Idea < ApplicationRecord

加入

  mount_uploader :picture, PictureUploader

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

<%= f.text_field :picture %>

改成

<%= f.file_field :picture %>

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

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

<strong>Picture:</strong>
<%= @idea.picture %>

改成

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

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

教練： 稍微講講 HTML。

5.調整路由

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

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

root to: redirect('/ideas')

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

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

建立靜態頁面

讓我們來添加一頁靜態頁面吧，列出這個 app 的作者是誰──也就是妳！：）

rails generate controller pages info

這個指令會在 app/views 資料夾下，新建一個新資料夾叫做 /pages，並有一個檔案叫做 info.html.erb，這頁便是妳的作者頁面摟。

剛剛的指令也幫妳加入了一條路由到 config/routes.rb：

get "pages/info"

現在打開 app/views/pages/info.html.erb，並填入一些 HTML，接著打開這頁：

http://localhost:3000/pages/info

看看妳新增的作者頁面。

下一步？

其它指南