進度條

我們在找人喔!進度條徵兼職「WordPress與PHP開發者」

有興趣參加進度條的新專案嗎?進度條誠徵「初階 - 遠端兼職」WordPress與PHP開發者。詳情可參考這個連結(請點我)。

[Ruby on Rails] 05. [Windows] 安裝程式編輯器與變更網站首頁

本文將教大家如何在Windows底下安裝程式編輯器與網站首頁設定

作者: 進度條編輯群 更新日期:

上一篇 [Ruby on Rails][Windows] 04. 如何在Windows底下安裝Ruby On Rails 開發環境


本文將教大家如何在Windows底下安裝程式編輯器與簡單的Ruby on rails 首頁設定,接下來將以Brackets程式編輯器做示範。(如果你有自己習慣的編輯器用習慣的就好,Brackets對於寫Ruby on rails 並沒有特別的幫助,只是作者本人習慣而已。)

 

一、(可略過)安裝程式編輯器-Brackets

進入Brackets官網,按Download Brackets(目前版本為1.13)

 

 

下載完成後接下來就是安裝,安裝步驟跟一般程式差不多,按Next、Install,然後按「是」允許變更裝置,接著按Finish。

 

 

在左角下搜尋應用程式,找到安裝好的Brackets,將其釘選到工作列上(比較方便)。

 

 

打開Brackets後,Windows系統會先跳出安全性警訊,勾選允許私人網路及公用網路後按「允許存取」。(如果需要下載外掛或是sftp上傳程式會需要開啟網路功能。)

 

 

二、Ruby On Rails網站首頁設定

在Brackets裡打開上一堂課在C槽底下的Sites資料夾內建立好的專案『projcet』。

 


打開專案後,在projcet底下的「config」裡面點選「routes.rb」這個檔案

 

 

跟上一堂課一樣,打開Command Prompt,在C:\Sites>底下輸入指令「ls」,找到專案位置,再輸入「cd project」進入專案裡,在C:\Sites\projcet>底下輸入「ls」,確定看到專案裡面所有的資料。

 

 

以下步驟先驗證自己的Windows是可以開發rails的,輸入「rails server」,打開瀏覽器,連線「127.0.0.1:3000」連進 server。

(也可以縮寫為 rails s,這個動作會啟動web service,Rails 5 以後使用的是 Puma 這隻程式)

 

 

接著更換成自己的首頁,首先要先建立一個controller。

在projcet底下輸入「rails g controller home」指令,然後enter執行,之後可以看到系統create出一堆東西,包含.rb、.coffee、.scss檔。

 


回到Brackets的rutes.rb檔裡,將根目錄連到root裡面去,輸入剛建立的controller名稱加上#後面輸入action(各個不同的頁面),輸入 root "home#index",輸入完成後按儲存。

 


接著繼續在Brackets裡,projcet底下的controllers底下的concerns裡找到剛建立好的home_controller.rb加上action,輸入

 

   def index 
   end

 

接著按儲存。

 

註:這邊的action 指的就是 index,寫程式很容易會用情境或框架來給出不同的暱稱。一般來說,Controller就是一個Class,所以index 應該是一個方法(method)。但是Ruby on rails 的設計邏輯用了很多REST架構的邏輯。

“index”可以翻譯成”目錄“,所以如果使用者想要看”目錄“,他就會去做”翻目錄“這個動作(action),所以抽象來講進入這個頁面就是執行index action。因此在Ruby on rails裡面就把controller裡面的方法稱作action,並且在很多地方都會使用這個字,算是需要習慣的一個字眼。

 


接下來在views底下的home裡面要再加一個view專用的ruby檔,檔名為「index.html.erb」,然後在建立內容 Hello World! 然後儲存。

 

 

之後回到Command Prompt畫面,先把之前的系統終止掉(同時按 「ctrl + c 」可以終結程式,當然你也可以直接關掉)。

 

 

然後在projcet底下再跑一次「rails server」,之後重新執行瀏覽器。

 

 

這時你會看到Command Prompt的畫面出現ActionView::Template::Error的訊息,首頁亦出現ExecJS::ProgramError in Home#index的訊息。

 

 

因為coffeescript的gem檔本身裡面發生了一點錯誤,這個問題只會出現在Windows上面,在Mac和Linux上面不會有這個問題發生。主要的解決方案是把『coffee-script-source』這個gem的版本改成1.8版。

 

首先在Brackets裡,進入projcet底下的vendor底下的Gemfile.lock檔,找到coffee-script-source,這裡可以看到目前使用的版本為1.12.2。

 

將『coffee-script-source』這串字複製起來,貼在Gemfile裡面的
#Use CoffeeScript for .coffee assets and views底下,然後後面加上「,'1.8.0'」,強迫使用1.8的版本,接著按儲存。

 

 

之後回到Command Prompt,要做一次bundle update,輸入「bundle update coffee-script-source」,接著按enter執行。

 

 

修改完成後,重新啟動「rails server」,之後再回到瀏覽器重新整理頁面後就會看到首頁已更換成我們自己建立的Hello World!首頁了。

 

 

環境設定上面因為我們比較少使用Windows來開發,所以如果發現跟我們內容不一樣的錯誤的話,歡迎跟我們講喔(記得要截圖...通靈是很困難的一件事情)。

 

 


最後,如果你喜歡我們的文章,別忘了到我們的FB粉絲團按讚喔!!

Small logo

進度條編輯群

進度條編輯團隊