十年前，Web 應用框架 Rails 創(chuàng)始人 David Heinemeier Hansson 曾錄制視頻，向我們演示如何使用 Ruby on Rails 在 15 分鐘內創(chuàng)作一個 blog 引擎。這個視頻通過 Rails 優(yōu)秀的 MVC 、習慣優(yōu)于配置（Convention over Configuration）等設計，以及強大的代碼生成、scaffold 等功能，成功展示了 Ruby on Rails 編寫 Web 應用核心功能的高效簡潔。Ruby on Rails 這門技術也在 Web 2.0 時代大放異彩，成為了 Web 應用開發(fā)最佳的技術方案選擇之一。

經過十年的發(fā)展，軟件行業(yè)早已邁入云計算時代。為了應對大規(guī)模的訪問量，同時控制研發(fā)和運營成本，作為云計算基石的云存儲，已經成為了 Web 開發(fā)必不可少的基礎設施。今天，就讓我們一起來看看如何使用 Rails 和七牛云存儲，在 15 分鐘內打造一個圖片分享社交應用原型。

七牛云存儲 是一個公有云服務，提供海量對象存儲功能，以及云端文件處理和分發(fā)服務。開始之前，我們需要創(chuàng)建一個七牛云存儲 試用帳戶，并且了解一些基礎知識：

七牛云存儲是一個 Key-Value 形式的對象存儲系統，一個 key 對應一個資源（文件）。
資源必須存儲在某個空間（Bucket）中，不可單獨存在。一個帳戶可以創(chuàng)建多個空間。

創(chuàng)建基本 Rails 項目

你應該可以使用 Ruby 1.9 以上，Rails 3.0 以上的任意版本，本例中我們使用的是 Ruby 2.2.3 和 Rails 4.2.5。

安裝好 Ruby 和 Rails 之后，使用 rails 命令創(chuàng)建應用程序 konata 的目錄結構和基本文件：

使用 Rails Scaffold 實現 CRUD

我們將使用 Rails 的 scaffold 功能，生成用于處理圖片發(fā)表的 model、controller、view，以及 database migration 等源代碼文件。

使用七牛 API 實現圖片上傳

修改 Gemfile，在其中加入對七牛 Ruby SDK 的引用：

執(zhí)行以下命令安裝七牛 Ruby SDK。這里原本應該執(zhí)行 bundle 進行安裝，但由于七牛 Ruby SDK 依賴的 mime-types 版本設定比較保守，需要使用 bundle update 命令降級 mime-types，解決依賴沖突。

編輯 config/secrets.yml，在其中加入七牛云存儲帳戶的密鑰：

創(chuàng)建 config/initializers/qiniu.rb，使用剛才加入的密鑰與七牛云存儲服務器建立連接。內容如下：

require 'qiniu'

Qiniu.establish_connection!(
 access_key: Rails.application.secrets.qiniu_access_key,
 secret_key: Rails.application.secrets.qiniu_secret_key
)

注意：

AccessKey 和 SecretKey 必須絕對保密，不可出現在用戶可以查看的 Web 前端源代碼里，或是編譯進客戶端二進制代碼中。

七牛 API 提供了多種上傳方式 以滿足不同的業(yè)務場景需求。這里我們選擇使用最有代表性，也最簡單的 HTML 表單上傳＋HTTP 303 重定向返回的方式實現客戶端文件直接上傳七牛云存儲。這種方法的好處是客戶端文件無需通過業(yè)務服務器（app server）中轉，既可以利用七牛強大的 CDN 優(yōu)化上傳速度及提高可靠性，也可以節(jié)省業(yè)務服務器帶寬。

編輯 app/views/posts/_form.html.erb，根據七牛云存儲 SDK 構造上傳表單。注意其中的上傳憑證字段，我們將在 PostsController 里創(chuàng)建它：

<%= form_tag 'http://upload.qiniu.com', multipart: true do %>
 <%= hidden_field_tag :token, @qiniu_upload_token %>

 <div class="field">
 <%= label_tag :title %><br>
 <%= text_field_tag 'x:title' %>
 </div>
 <div class="field">
 <%= label_tag :image %><br>
 <%= file_field_tag :file %>
 </div>
 <div class="actions">
 <%= submit_tag 'Create' %>
 </div>
<% end %>

編輯 app/controllers/posts_controller.rb，添加代碼生成上傳憑證，以及根據七牛云存儲自定義響應內容創(chuàng)建 post 實例：

def new
 @qiniu_upload_token = generate_qiniu_upload_token
 @post = Post.new
 end

 def create
 upload_ret = JSON.parse(Base64.urlsafe_decode64(params[:upload_ret]))
 @post = Post.new(
 title: upload_ret['title'],
 filename: upload_ret['fname'],
 qiniu_hash: upload_ret['hash']
 )
 # ...
 end

 private

 def generate_qiniu_upload_token
 put_policy = Qiniu::Auth::PutPolicy.new('konata')
 put_policy.return_body = {
 fname: '$(fname)',
 hash: '$(etag)',
 title: '$(x:title)'
 }.to_json
 put_policy.return_url = create_posts_url
 Qiniu::Auth.generate_uptoken(put_policy)
 end

編輯 config/routes.rb，將 create action 定義為使用 get 方法亦可訪問:

 resources :posts do
 collection do
 get 'create', as: :create
 end
 end

重新啟動 rails server，訪問 http://localhost:3000/posts/new，現在我們已經可以在發(fā)表新 post 的時候上傳圖片至七牛云存儲。

提示：

文件將會上傳到名為 konata 的公開空間（bucket）。
我們沒有在代碼中指定 key，七牛云存儲默認會使用根據文件內容計算的 hash (etag) 值做為 key。這種做法可以非常簡單地避免內容相同的文件存儲多份浪費空間。
由于上傳表單將會直接提交到七牛云存儲服務器，我們的應用程序后端無法獲得 title 等業(yè)務對象字段，我們使用七牛云存儲 API 的 自定義變量 和 自定義響應內容 功能，通過七牛云存儲上傳 API 中轉獲得這些字段。
展示用戶上傳的圖片

修改 app/helpers/application_helper.rb，添加 qiniu_image_url 方便生成圖片 URL。為了保持簡單我們直接硬編碼了空間的域名：

def qiniu_image_url(post, format = :raw)
 url = "http://7xokus.com2.z0.glb.qiniucdn.com/#{post.qiniu_hash}"

 case format
 when :square
 url << '?imageView2/1/w/300/h/300/q/90'
 when :preview
 url << '?imageView2/2/w/1000/h/1000/q/90'
 when :raw
 url << "?attname=#{post.filename}"
 else
 url
 end
 end

修改 app/views/posts/index.html.erb 和 app/views/posts/show.html.erb，調用剛才創(chuàng)建的 URL helper 展示圖片：

<tr>
 <td><%= post.title %></td>
 <td><%= link_to image_tag(qiniu_image_url(post, :square), size: '300'), post %></td>
 <td><%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %></td>
 </tr>

<p>
 <%= link_to image_tag(qiniu_image_url(@post, :preview)), qiniu_image_url(@post), class: 'image' %>
</p>

<%= link_to 'Back', posts_path %>

修改 config/routes.rb，將網站根目錄設置為 posts 列表頁面：

root 'posts#index'
訪問 http://localhost:3000，現在我們可以看到剛才上傳的圖片。

提示：

每個空間（bucket）內的資源都可以通過該空間的默認或自定義域名，加上文件 key 構造的 HTTP URL 進行訪問。
可以在 URL 后增加特定查詢參數，調用七牛云存儲強大的 數據處理（Fop） API，實時生成自定義格式的縮略圖。
可以通過查詢參數 attname 指定 URL 下載時使用的文件名。
簡單的 UI 美化

修改 app/views/posts/index.html.erb，將原有的 table 布局改為 flexbox 布局：

<div class="posts">
 <% @posts.each do |post| %>
 <p>
 <%= link_to image_tag(qiniu_image_url(post, :square), size: '300'), post, class: 'image' %>
 <br>
 <%= post.title %>
 <br>
 <%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %>
 </p>
 <% end %>
</div>

修改 app/assets/stylesheets/application.css，加入對應的 CSS：

body {
 padding: 20px;
}

a.image:hover {
 background-color: transparent;
}

div.posts {
 display: flex;
 flex-flow: row wrap;
 justify-content: space-between;
}

訪問 http://localhost:3000，圖片列表看起來像一個正常的相冊了。

添加用戶賬戶功能

我們的應用程序還有兩個明顯的問題：沒有記錄圖片是由誰分享的；任何人都可以刪除 post。這對于一個社交應用來說顯然是不能接受的問題。這對于一個社交應用來說顯然是不可接受的，所以接下來我們將使用 Rails 社區(qū)流行的 Devise 組件直接獲得用戶注冊、登錄、驗證子系統，實現圖片發(fā)表者信息記錄等功能。

修改 Gemfile，加入對 Devise 的依賴：

執(zhí)行以下命令安裝 Devise，生成 User model，以及我們所需的 data migration：

修改 app/controllers/posts_controller.rb，對查看以外的操作要求登錄，并在發(fā)表 post 時記錄發(fā)表者身份：

 before_action :authenticate_user!, except: [:index, :show]

 def create
 # ...
 @post = Post.new(
 title: upload_ret['title'],
 filename: upload_ret['fname'],
 qiniu_hash: upload_ret['hash'],
 creator: current_user
 )
 # ...
 end

修改 app/models/post.rb，添加與 User model 的從屬關聯：

 <header>
 <% if user_signed_in? %>
 <p>
 Hello <%= current_user.email %>
 <%= link_to 'Logout', destroy_user_session_path, method: :delete %>
 </p>
 <% end %>
 </header>

修改 app/views/posts/index.html.erb，限制僅 post 發(fā)表者可以刪除該 post：

<% if user_signed_in? and post.creator == current_user %>
 <br>
 <%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %>
 <% end %>

重啟 rails server 后，訪問 http://localhost:3000，現在用戶需要注冊登錄才能發(fā)表圖片了。

實現點贊功能

最后，做為一個社交應用，沒有點贊功能怎么能讓點贊狂魔們滿足呢？！我們將添加一個 like scaffold 用來處理點贊和存儲點贊信息。

執(zhí)行以下命令生成 scaffold，Like model 將做為一個 join model 同時從屬于 Post 和 User：

修改 app/models/post.rb，建立 Post 與 Like model 的“擁有／嵌套”關系：

<%= post.title %>
 <br>
 <%= content_tag(:span, "#{post.likes.count} likes", id: "post_#{post.id}_likes") %>

 <% if user_signed_in? %>
 <br>
 <%= link_to 'Like', post_likes_path(post), method: :post, remote: true %>

 <% if post.creator == current_user %>
 <%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %>
 <% end %>
 <% end %>

修改 app/controllers/likes_controller.rb，真正將 likes 資源實現為 posts 的嵌套資源，并在點贊時記錄點贊狂魔的身份：

before_action :set_post

 def create
 @like = @post.likes.new(user: current_user)

 respond_to do |format|
 if @like.save
 format.js { }
 else
 format.js { }
 end
 end
 end

 private

 def set_post
 @post = Post.find(params[:post_id])
 end

創(chuàng)建 app/views/likes/create.js.erb，使用 Server-generated JavaScript 更新點贊信息：

小結

雖然這只是一個簡單的原型，但是因為使用了七牛云存儲作為圖片存儲后端，我們的社交應用產品在一開始的原型階段就擁有了能為大規(guī)模用戶提供高速、可靠服務的潛能。

簡單回顧一下我們剛才學習到的內容吧。使用 Rails 的代碼生成功能， 基于 CRUD 結構的 scaffold 實現業(yè)務對象維護，以及業(yè)務操作非常高效；使用七牛云存儲則可以輕松處理業(yè)務系統中的文件存儲，獲得圖片視頻等多媒體文件的云端處理能力，減少，甚至避免了部分研發(fā)和運維工作。希望這個視頻可以幫助大家認識這兩個優(yōu)秀的開發(fā)工具，直觀感受到它們的高效強大和簡單易用。

參考資料

Ruby on Rails Guides
七牛開發(fā)者中心

示例代碼

https://github.com/rainux/konata-sample

比起直接試用示例代碼，你應該按照教程自己編寫這些代碼，親自編寫代碼有助于加深理解和記憶。

最新評論