2 : Ruby on Rails 的基礎

上章:什麼是網路?

Header2

0 : 這個章的目的

 理解用 Ruby on Rails 作網路的方法、作 Ruby on Rails 的動作環境。


1 : Ruby on Rails

從這個章,我們解釋作網站的方法。
在這裡,我們使用叫做 Ruby on Rails 的軟件作網站。

在上章解釋了「網路在作資料的顯示跟保存」
Ruby on Rails 是會先做好簡單的網站。然後在這個做好的網站上自己設定「資料的顯示跟保存」,作自己的網站。

 在 Ruby on Rails是,自己設定「資料的顯示跟保存」作網站的軟件。
 Ruby on Rails 是要設定什麼呢?

自己設定的內容有兩個。
第一個是網頁,第二個是資料

 ① : Ruby on Rails的網頁


為了作網站,Ruby on Rails上必須要自己設定這麼樣顯示網頁。

可是網站不只是在顯示網頁,還必須要保存資料。在 Ruby on Rails 上,隨着資料顯示跟保存的方法,有幾個作網頁的方法。
用 Ruby on Rails 作網站的時候要用這個資料的顯示跟保存的方法,自己設定網頁。

我們用Twitter的例子,解釋 Ruby on Rails 上的資料的顯示跟保存的方法跟設定的網頁吧。
 資料的顯示
Tweet index and show 在這個網頁,顯示在資料庫裡保存的資料。
顯示的方法有兩個。一個是顯示資料庫裡全部的資料的方法,另一個是選擇資料庫裡的資料的方法。

有兩種的是,可以說是推特的主頁推特的差別。
 作資料
Tweet new 在這個網頁,保存利用者打入的資料。
這裡有打入內容的網頁跟保存資料的網頁。
 編輯資料
Tweet edit 在這個網頁,隨着打入的內容,更新利用者選這的資料
這裡也有打入內容的網頁跟隨着打入的資料更新資料的網頁。
 刪除資料
Tweet destroy 在這個網頁,從資料庫裡刪除選擇的資料。
 Ruby on Rails上,自己設定這麼樣顯示資料的顯示,新增,編輯,刪除的四種網頁。


 ② : Ruby on Rails的資料


我們解釋了,Ruby on Rails是隨着資料的顯示跟保存的方法自己設定要這麼樣作網站的軟件。
我們解釋好了資料的顯示,那麽資料的保存是這麼樣做呢?
在上章說明了,利用者發信的資料會保存在動網站的機器(服務器)裡的資料庫裡。這個保存資料的資料庫在做「資料的保存」。
Fb save data
用Facebook的例子的話,

利用者的投稿
  • 投稿的人的名字是「山田太郎」
  • 投稿的內容是「Hello world」
  • 地方是「東京都新宿」
  • 圖像是「沒有」
  • 等等...

這樣子的資料會保存在動網站的機器(服務器)裡的資料庫(Excel軟件 的表)

在Ruby on Rails上保存下來的資料也是一樣,利用者發信的資料會保存在動網站的機器(服務器)裡的資料庫裡,然後這個資料會顯示在網頁上面。
所以在 Ruby on Rails上,先為了要保存資料作資料庫
之後自己設定資料的新增,編輯,刪除

  • 作資料庫
  • 用Facebook的例子說的話,作可以保存名字,內容,地方 等等的資料庫(Excel軟件的表)。

  • 資料庫上保存利用者的資料
  • 新增,編輯,刪除在網頁上打入的資料。

 ⑴ : 作資料庫


為了資料庫裡保存資料、先決定好要打入這麼樣的資料。
用 Excel 軟件的時候打入資料之前,也先決定好最上面的一行吧?

跟這個一樣,作資料庫的時候要先作好最上面的一行
使用這個一行,保存利用者打入的資料。
Ruby on Rails上保存資料的時候,必須要決定好最上面的一行

我們用 amazon 的商品解釋。 Amazon expensive amazon的商品上有「商品的名字・價錢・圖畫・消費者評鑑」等等的資料,這些資料會保存在資料庫裡。
基本的簡單的資料庫會是下面的樣子吧。 Amazon database
 在Ruby on Rails,要自己設定這樣子資料庫的最上面的一行。
 想想看 Twitter 的第一行是這麼樣子設定吧。


 ⑵ : 資料的保存


網站上按着打入的資料,新的資料會保存在資料庫裡。
用Facebook投稿的例子說的話,利用者投稿後,資料庫會有新投稿的資料。 Fb database 雖然Ruby on Rails的網頁是随着資料保存的方法,指定各個資料保存的網頁,但是資料的保存要跟資料的顯示另外設定。

所以除了網頁的顯示以外,各個網頁上要設定
  • 顯示什麼資料」
  • 新增什麼資料」
  • 編輯什麼資料」
  • 刪除什麼資料」
等等要這麼樣操作資料(資料的顯示,新增,編輯,刪除)的設定。
 Ruby on Rails上的資料的保存是、先作資料庫之後,自己設定要這麼操作資料。


 ③ : 總結


Ruby on Rails是先做好的簡單的網站之後,在這裡設定網頁的顯示跟資料的操作。



2 : Ruby on Rails的準備

我們解釋了,用 Ruby on Rails 這麼樣作網站。
但是用 Ruby on Rails 作網站的時候,Ruby on Rails以外還有需要的軟件。

在這裡,我們安裝 Ruby on Rails跟其他軟件。做可以用 Ruby on Rails 作網站的環境。





 用 Windows 的電腦的話、請看這裡的說明








先解釋安裝的時候要用的「terminal」的應用程序吧。


 ① : terminal


先打開「terminal」的應用程序。參考下面的圖像打開看看吧。 Terminal open Terminal open done 「terminal」有打開了嗎?
這個「terminal」是在做什麼呢?
 「terminal」是什麼樣的應用程序呢?

「terminal」是,給電腦命令的應用程序。
Ruby on Rails 的網站是用「terminal」的命令作。
 在這裡用terminal,移動桌面(Desktop)裡吧!

用半母字母數字打入「cd Desktop」之後,點擊「Enter」吧。
有沒有顯示,像下面一樣的新的一行嗎?
下面圖像的紅線在表現現在的位置。現在在DesktopTerminal cd desktop after 用「cd」、可以移動到指定的文件夾Finder desktop  用「cd」,移動到「Desktop」裡的自己喜歡的文件夾吧。
  打入「open 文件的名字」,可以開指定的文件。

※ 打入「cd ..」可以移動到前面的文件夾、打入「cd ~/Desktop」可以移動到「Desktop」。
※ 使用半母字母數字打入。


 ② : Ruby on Rails 的安裝


那麽,咱們安裝 Ruby on Rails 吧!
這個有一點長,加油!

安裝的環境是
  • Ruby 2.1.3
  • Ruby on Rails 4.2.6

如果已經安裝好的話、不用再安裝環境。看下一個安裝吧!

 我們先安裝叫做「Command Line Tools」的軟件。

 請準備好AppleID,用AppleID從這裡登錄。
※ 註冊AppleID請從這裡做

有下面一樣的畫面嗎? Chrome apple developer 從這裡安裝Command Line Tools
 安裝之前,先確認Mac的環境。
※ 隨着Mac的環境,安裝的東西也不同。請注意。

跟下面一樣子,點擊 ,之後點擊裡面的About This MacSettiing about this mac 會顯示下面的畫面,請確認紅線的地方。 About this mac overview About this mac overview detail 確認您 Mac 的環境之後,參考下面表下載「Command Line Tools」。
Mac的環境 Command Line Tools
10.11.x Command Line Tools(OS X 10.11)for Xcode x.x.x
10.10.x Command Line Tools(OS X 10.10)for Xcode x.x.x
10.9.x Command Line Tools(OS X 10.9)for Xcode x.x.x
10.8.x Command Line Tools(OS X Mountain Lion)for Xcode x.x.x
10.7.x Command Line Tools(OS X Lion)for Xcode x.x.x
如果有幾個的話,選最新的東西吧!

下載之後,開download」文件夾,點擊剛剛下載的文件, Finder downloads command line tools 之後開安裝的文件就OK了。 Finder command line tools
 咱們安裝「Ruby on Rails」。
在terminal上,打入下面的命令吧。


  這裡我們使用terminal。
   那麼,打開看terminal吧。

※ 開terminal的方法請參考這裡 Terminal open 打開之後打入,

 terminal(用半角字母數字打入)
1 cd

這樣,terminal回到剛開始開的時候的地方。

 那麽,開始吧!

  • Homebrew的安裝

  • 先打入下面的命令。這個是安裝叫做Homebrew的工具。
    選這文字之後點擊Command」跟「c可以複製文字,點擊Command」跟「v可以黏贴複製的文字。

     terminal(用半角字母數字打入)
    1 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

    途中會有要求打入密碼,那個時候打入自己電腦Mac的密碼吧。

    安裝完了之後,打入

     terminal
    1 brew -v

    之後,顯示Homebrew的環境的話OK。
  • rbenv跟ruby-build的安裝

  • 這兩個工具在管理,動「Ruby on Rails」的叫做「Ruby」的程序語言的版本
    那麽,開始安裝吧!在terminal上,打入下面兩個命令。

    ※ 選這文字之後點擊Command」跟「c可以複製文字,點擊Command」跟「v可以黏贴複製的文字。

     terminal(用半角字母數字打入)

     有時候,不能複製與黏貼。那個時候,請直接打入。
    1 brew install ruby-­build

     terminal(用半角字母數字打入)
    1 brew install rbenv

    這樣,安裝好了!

     可是現在的狀態還不能用,請打入下面的命令。

    ※ 選這文字之後點擊Command」跟「c可以複製文字,點擊Command」跟「v可以黏贴複製的文字。

     terminal(用半母字母數字打入)
    1 echo 'eval "$(rbenv init -)"' >> ~/.bash_profile

    之後,打入

     terminal(用半母字母數字打入)
    1 source ~/.bash_profile

    這樣,設定好了。
  • readline的安裝

  • 為了避免漢語的亂碼,安裝叫做readline的工具。

    打入下面的命令,安裝「readline」吧!

    ※ 選這文字之後點擊Command」跟「c可以複製文字,點擊Command」跟「v可以黏贴複製的文字。

     terminal(用半母字母數字打入)
    1 brew install readline

     下次設定為了使用「readline的命令。

    ※ 選這文字之後點擊Command」跟「c可以複製文字,點擊Command」跟「v可以黏贴複製的文字。

     terminal(用半母字母數字打入)
    1 brew link readline --force

     terminal(用半母字母數字打入)
    1 RUBY_CONFIGURE_OPTS="--with-readline-dir=$(brew --prefix readline) --with-openssl-dir=$(brew --prefix openssl)"

  • Ruby 的安裝

  • 用剛才安裝的「rbenv」,安裝在動「Ruby on Rails」的叫「Ruby」的程序語言

    在這裡安裝環境是「2.1.3」的「Ruby

     terminal(用半母字母數字打入)
    1 rbenv install 2.1.3

    這樣安裝好了!咱們打入準備起動「Ruby」的命令。

     terminal(用半母字母數字打入)
    1 rbenv rehash

    這樣安裝跟準備好了、咱們設定Ruby」的環境。打入下面的命令。

     terminal(用半母字母數字打入)
    1 rbenv global 2.1.3

    這樣設定好了。打入下面的命令。

     terminal(用半母字母數字打入)
    1 ruby -v

    這樣確認Ruby」的版本
    顯示2.1.3的話OK。
  • rails 的安裝

  • 最後,安裝Ruby on Rails
    先、安裝為了使用Ruby on Rails」的工具

     terminal(用半母字母數字打入)
    1 gem install bundler

    下次安裝「Ruby on Rails

     terminal(用半母字母數字打入)
    1 gem install rails

    下次在打入

     terminal(用半母字母數字打入)
    1 rbenv rehash

    打入完後,確認Ruby on Rails」的版本。

     terminal(用半母字母數字打入)
    1 rails -v

     這樣安裝好了「Ruby on Rails」!


 ③ : Sublime Text的安裝


咱們安裝,編輯設定文件的文件編輯軟件Sublime Text
首先,移動到Sublime Text的主頁、下載文件。

請打開這裡

顯示下面一樣的畫面嗎? Chrome sublime text 之後,點擊Download for OS X,開始下載。
下載完了之後,開download」文件夾找有沒有下載的文件。 Finder downloads sublime text 點擊之後, Finder after download sublime text 會這樣顯示。

邊按「Shift」點擊這裡面的「Sublime Text」的圖標,之後移動圖標到「Applications」文件夾。 Finder move sublime text to applications 這樣Sublime Text的安裝好了。
 為了確認,在開一次吧。

點擊右上邊的放大鏡標記、打入看看「Sublime Text」
Spotlight find sublime text 打入完後,點擊Enter按鍵就可以開「Sublime Text」。 Window sublime text 有沒有出現這樣子的畫面嗎?
我們會用這個Sublime Text


 ④ : MySQL的安裝


在這裡我們會用叫做MySQL的資料庫。咱們安裝MySQL吧!
先開termial、之後打入「brew install mysql」。

 terminal  
※ 用半母字母數字打入
1 brew install mysql

打入之後,顯示下面一樣的話OK!
==> Downloading https://downloads.sf.net/project/machomebrew/Bottles/mysql-5.6.22.yosemite.bottle.tar.gz
######################################################################## 100.0%
==> Pouring mysql-5.6.22.yosemite.bottle.tar.gz
==> Caveats
A "/etc/my.cnf" from another install may interfere with a Homebrew-built
server starting up correctly.

To connect:
    mysql -uroot

To have launchd start mysql at login:
    ln -sfv /usr/local/opt/mysql/*.plist ~/Library/LaunchAgents
Then to load mysql now:
    launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mysql.plist
Or, if you don't want/need launchctl, you can just run:
    mysql.server start
==> /usr/local/Cellar/mysql/5.6.22/bin/mysql_install_db --verbose --user=tasukujp --basedir=/usr/local/Cellar/mysql/5.6.22 --datadir=/usr/local/var/my
==> Summary
🍺  /usr/local/Cellar/mysql/5.6.22: 9666 files, 339M

然後,打入下面的命令吧。
※ 一個一個複製與黏貼之後、請在terminal打入

 terminal  
※ 用半母字母數字打入
1 ln -sfv /usr/local/opt/mysql/*.plist ~/Library/LaunchAgents

 terminal  
※ 用半母字母數字打入
1 launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mysql.plist

 這樣,Mysql的安裝完成了。


 ⑤ : Sequel Pro的安裝


在這裡咱們安裝,簡單的顯示資料庫裡面的表的軟件Sequel Pro

 下載Sequel Pro(點擊之後下載會開始)

下載完了之後,請打開下載的文件(普通的話,文件在download文件夾裡)。 Sequel pro open 打開之後像下面一樣的畫面會出現、參考下面的圖像點擊「Connect」。 Sequel pro 顯示下面的圖畫的話OK! Sequel pro main page


 恭喜你!這樣作網站的環境作好了!
從下一章,用 Ruby on Rails 開始作網站吧。