Rails Girls App 教學

Created by Vesa Vänskä, @vesan

Translation by JuanitoFatas, @JuanitoFatas

請先確認電腦是不是已經安裝了 Rails,還沒有安裝的話,請參考安裝指南

認識工具

 

編輯器

Sublime TextKomodo 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

看看妳新增的作者頁面。

下一步?

其它指南