[Part I] เขียนเว็บง่าย ๆ จากศูนย์ด้วย Ruby On Rails ? — Let’s be on Rails

How to

เนื่องจากได้มีโอกาสไปฝึกงานที่บริษัท Data Wow Co., Ltd. บริษัทที่ CEO โคตรจะป๋าและเปย์หนักมากที่สุดเท่าที่เคยเจอมา(ก็เคยทำบริษัทเดียว) เลยได้เริ่มต้นลองเขียนเว็บด้วย Ruby On Rails (ROR) เป็นครั้งแรก แล้วก็พบว่ามันเป็นอะไรที่เจ๋งมาก! เจ๋งยังไง? อะยกตัวอย่างเช่น ชื่อคราสจะตั้งชื่อมั่วซั่วไม่ได้ เติม s, es ผิดที เจ้านี่ก็จะ งง! (ห๊าาาา) ใช่แล้ว ฟังไม่ผิด ROR จะใส่ใจกับการเติม s, es มาก เพราะถ้าเราเขียนถูกแล้วล่ะก็ Rails จะสามารถลิ้งค์ความสัมพันธ์ระหว่างคลาสให้เราได้แบบออโต้ อย่างกับเวทมนต์ยังไงอย่างงั้น

Ruby คืออะไร?

แน่นอนว่าก่อนที่เราจะเริ่มต้นกับ Ruby On Rails แน่นอนว่าเราต้องรู้จักกับแกนหลักของมันซะก่อน

Ruby เป็นภาษาคอมพิวเตอร์ประเภทหนึ่ง ซึ่งมีลักษณะการแปล source code แบบ interpreter (อ่านทีละบรรทัด) คล้ายกับ Python หรือ Perl เป็นภาษาที่มีการเขียนแบบ script object oriented ซึ่งสนับสนุนการเขียน OOP แบบเต็มขั้น!

Ruby จะพยายามทำให้ syntax ของตัวเองสั้น กระชับและซับซ้อนน้อยที่สุด โดยมักจะมีคนบอกว่า Ruby จะรวมข้อดีของ Perl และ Python เอาไว้ สิ่งไหนที่มีใน Perl แต่ไม่มีใน Python หรือสิ่งไหนที่มีใน Python แต่ไม่มีใน Perl มักจะพบอยู่ในภาษา Ruby นั่นเอง

Ruby ถูกคิดค้นและพัฒนาโดยชาวญี่ปุ่นชื่อว่า Yukihiro Matsumoto และปล่อยเวอร์ชั่น 1.0 ในช่วงปลายปี ค.ศ. 1996 (22 ปีมาแล้ว)

Ruby On Rails คืออะไร?

Ruby On Rails หรือ ROR (ต่อไปจะเรียกสั้น ๆ ว่า Rails แล้วกัน) นั้นเป็น open source web application framework ที่ถูกพัฒนาด้วยภาษา Ruby โดยที่ Rails นั้นจะมีโครงสร้างการจัดการแบบ Model View Controller ซึ่งมีข้อดีคือ

  1. มีการออกแบบที่ชัดเจน มองภาพรวมได้ง่าย
  2. ปรับปรุง/แก้ไข ระบบได้โดยง่าย เพราะแต่ละส่วนแยกกันอย่างชัดเจน
  3. maintain ระบบได้ง่าย เพราะมีโครงสร้างชัดเจน จึงทำให้ยืดหยุ่นต่อการเพิ่มเติม รวมไปถึงการนำส่วนต่าง ๆ ไปใช้ซ้ำได้ด้วย

อีกทั้ง Rails ยังถูกพัฒนาขึ้นมาเพื่อให้แอพพลิเคชั่นถูกพัฒนาด้วยโค้ดที่น้อยกว่า framework อื่นอย่างมาก และมี configuration ที่น้อยที่สุด เพื่อให้ง่ายต่อการนำไปประยุกต์ใช้

Rails ยึดกับหลักการ DRY(Don’t Repeat Yourself) ก็คือ สิ่งไหนที่เคยทำแล้ว จะไม่ทำซ้ำ จะเขียนแต่ละองค์ประกอบให้เล็กที่สุดเพื่อการนำไปใช้ต่อ ทำให้เราไม่ต้องมานั่ง Ctrl-C Ctrl-V กันรัว ๆ นั่นเอง

เพื่อไม่ให้เป็นการเสียเวลา เรามาลอง setup rails server ครั้งแรกกันเลยดีกว่า

1. Installing Ruby with RBENV

ก่อนที่เราจะทำการติดตั้ง Rails แน่นอนว่าเราต้องทำการติดตั้ง Ruby ก่อน ซึ่งวิธีที่ง่ายที่สุดก็คือการใช้ตัว ruby version manager อย่าง RBENV หรือ RVM นั่นเอง

ทั้งสองตัวจะเป็นตัวที่ใช้ในการจัดการ ruby version ในเครื่องของเรา เพราะในชีวิตจริง แต่ละโปรเจคก็จำเป็นต้องใช้ ruby คนละเวอร์ชั่นกัน จะลบลงใหม่ไป ๆ มา ๆ ก็ใช่เรื่อง เลยเกิดเป็น ruby version manager ขึ้นมา

ในที่นี้จะขอเลือกใช้ rbenv ส่วนใครที่ใช้ rvm อยู่แล้วหรืออยากจะใช้ rvm ก็กดลิ้งค์ไปดูวิธีติดตั้งจากลิ้งค์ได้เลย

1.1 Installing RBENV on macOS

1. ติดตั้ง rbenv ผ่าน brew ใน Terminal (สำหรับใครที่ยังไม่มี brew ก็เข้าไปโหลดที่นี่เลย)

$ brew install rbenv

2. เริ่มต้น rbenv โดย

$ rbenv init

3. คัดลอกให้ rbenv รันทุกครั้งที่เปิด command line

$ eval "$(rbenv init -)" >> ~/.bashrc

ถ้าใช้ zsh ให้เปลี่ยน .bashrc เป็น .zshrc แทน

4. โหลดไฟล์ใหม่

$ source $HOME/.bash_profile

5. เช็คว่า rbenv ใช้งานได้แล้วโดย ใช้ rbenv-doctor

$ curl -fsSL https://github.com/rbenv/rbenv-installer/raw/master/bin/rbenv-doctor | bash

ถ้าขึ้นว่า

Checking for `rbenv' in PATH: /usr/local/bin/rbenv
Checking for rbenv shims in PATH: OK
Checking `rbenv install' support: /usr/local/bin/rbenv-install (ruby-build 20170523)
Counting installed Ruby versions: none
  There aren't any Ruby versions installed under `~/.rbenv/versions'.
  You can install Ruby versions like so: rbenv install 2.2.4
Checking RubyGems settings: OK
Auditing installed plugins: OK

ก็แสดงว่าเป็นอันเสร็จเรียบร้อย

1.2 Installing RBENV on Linux

ดูได้ที่นี่

1.3 Installing RBENV&RVM on Windows

ดูได้ที่นี่

1.4 Installing Ruby with RBENV

1. ติดตั้ง ruby เวอร์ชั่น 2.6.5 โดย รันคำสั่ง

$ rbenv install 2.6.5

ใช้เวลานานซักนิด ผลลัพธ์ที่ได้ก็จะออกมาเป็นประมาณนี้

ruby-build: use openssl from homebrew
Downloading ruby-2.6.5.tar.bz2...
-> https://cache.ruby-lang.org/pub/ruby/2.6/ruby-2.6.5.tar.bz2
Installing ruby-2.5.1...
ruby-build: use readline from homebrew
Installed ruby-2.6.5 to /Users/abc/.rbenv/versions/2.6.5

เท่านี้เราก็จะมี ruby version 2.6.5 บนเครื่องแล้ว ง๊ายง่ายใช่มั้ยล่ะ

เอาล่ะ ถึงเวลาได้ทำแอพจริง ๆ สักที ต่อไปเราจะทำการเซ็ทอัพ Rails server บนเครื่องของเรา ไว้ใช้ทดสอบเวลาที่เราเขียนเว็บนั่นเอง

2. Setup Our First Rails Application

2.1 Installing Rails

1. เปิด Terminal ขึ้นมาแล้วพิมพ์

$ cd ~/Desktop
$ mkdir my_rails_app
$ cd my_rails_app

Note: cd = change directory, mkdir = make directory ถ้าหากใครยังไม่คล่องกับคำสั่งพื้นฐานใน Terminal แนะนำให้ไปฝึกมาก่อน เพราะในการพัฒนาด้วย Rails เราจะใช้ Terminal กันเยอะมากครับ

2. ตั้งค่าให้เฉพาะ directory นี้ใช้ ruby เวอร์ชั่น 2.6.5 โดย

$ rbenv local 2.6.5

หรือถ้าอยากจะเปลี่ยนเวอร์ชั่นก็แค่เปลี่ยนเลขของเวอร์ชั่น rbenv ก็จะจัดการให้เอง

3. gem คือ Ruby Package Manager ที่จะช่วยเราจัดการกับ libraries ต่างๆ คล้ายๆกับ npm ของ javascript ซึ่งเวลาติดตั้งต่างๆ gem จะสร้าง local document ไว้ด้วยทำให้ช้า เราสามารถปิดการทำงานของมันได้

$ echo "gem: --no-document" > ~/.gemrc

4. ติดตั้ง Bundler ผ่าน gem ซึ่งเป็นตัวช่วยจัดการ dependencies ต่างๆของ rails

$ gem install bundler

5. ติดตั้ง rails พระเอกของเรา ซึ่งเราจะเลือกเป็นเวอร์ชั่น 6.0.0

$ gem install rails -v 6.0.0

6. ทุกๆครั้งที่เราติดตั้ง gem ที่มี command ติดมาด้วยเช่น rails เป็นต้น เราจะต้องทำการ rehash เสมอเพื่อให้สามารถเรียก command ใหม่ที่ติดตั้งมาได้

$ rbenv rehash

ถ้าติดตั้งเสร็จเรียบร้อยแล้ว หากพิมพ์ $ rails --version ก็จะขึ้นประมาณว่า Rails 6.0.0 แบบนี้ถือว่าสำเร็จ

2.2 Installing Database

1. ติดตั้ง Database ผ่าน brew โดยในที่นี่จะเลือกใช้ Postgresql

$ brew install postgresql

2. ใส่ postgresql ลงใน PATH เพื่อให้สามารถเรียกใช้คำสั่งได้ อย่าลืมเปลี่ยนเลข 11 เป็นเลขเวอร์ชั่นของ postgresql ที่เราติดตั้งไป

$ echo 'export PATH="/usr/local/opt/postgresql@11/bin:$PATH"' >> ~/.bash_profile

ถ้าใช้ zsh ให้เปลี่ยน .bash_profile เป็น .zshrc เช่นเคย

3. โหลดไฟล์ .bash_profile ใหม่

$ source ~/.bash_profile

4. ตั้งให้ postgresql เริ่มต้นทุกครั้งที่ login

brew services start postgresql@11

5. เชคเวอร์ชั่นของ postgresql ว่าติดตั้งถูกต้อง

postgres -V

จะได้ output เป็น ประมาณนี้postgres (PostgreSQL) 11.5

6. โดยปกติแล้วหากติดตั้ง postgres ผ่าน homebrew จะสร้าง superuser role ให้เราโดยใช้ชื่อเดียวกับ username ของ macOS เรา แต่เราจะสร้าง user ใหม่เพื่อให้ สิทธิของ superuser ไม่ไปปะปนเวลาเราทำงานบน rails เปลี่ยน appname เป็นชื่อที่เราต้องการ

$ createuser -P -d appname

-d หมายความว่าเราจะให้สิทธิในการสร้าง database กับ user นี้

-P จะใส่เราใส่ password ทันทีหลังรันคำสั่ง อย่าลืมจำพาสเวิร์ดที่เราใส่ไว้ด้วย เพราะเราจะต้องใช้อีกทีตอนติดตั้ง rails

2.3 Create the Blog Application

Rails นั้นจะมาพร้อมกับ script และ generator จำนวนนับไม่ถ้วน ที่ถูกออกแบบมาเพื่อให้ชีวิตของนักพัฒนาง่ายขึ้น โดย Rails จะทำการ generate โค้ดส่วนที่สำคัญ ๆ มาให้เราแล้วหลายอย่างซึ่งต่างจากภาษาโปรแกรมมิ่งอื่น ๆ ที่เราต้องเขียนเองแทบจะทั้งหมด เพราะฉะนั้นก็อย่าตกใจไปกับจำนวนไฟล์มหาศาลที่ Rails สร้างขึ้นมาให้ แล้วทำใจให้ชินซะเพราะเราจะได้ generate กันอีกเยอะแน่นอน

ซึ่ง Rails ก็ต้อนรับเราอย่างดีด้วยการจัดตัวช่วยสร้างแอพพลิเคชั่นมาให้เลยง่าย ๆ เปิด Terminal แล้วเข้าไปที่โฟลเดอร์ที่เราจะสร้างโปรเจค (ซึ่งเราสร้างไปแล้วใน section 2.1.1 ชื่อว่า myrailsapp) แล้วพิมพ์:

$ rails new blog --database=postgresql

ด้วยคำสั่งนี้ Rails จะทำการสร้าง directory ชื่อว่า blog (คือชื่อเว็บของเราเอง) แล้วสร้างไฟล์สำคัญ ๆ มาให้มากมาย รวมทั้งติดตั้ง GEM อื่น ๆ ที่จำเป็นกับโปรเจคของเรา (gem dependencies) ให้เราแบบอัตโนมัติด้วย

เข้าไปที่โฟลเดอร์ blog ด้วย $ cd blog ก็จะพบกับไฟล์ต่าง ๆ โดยแต่ละไฟล์ก็จะทำหน้าที่ต่าง ๆ กันไป โดยหลังจากนี้เราจะทำงานกันในโฟลเดอร์ app/ ส่วนโฟลเดอร์อื่น ๆ มีดังนี้:

2.4 Database Configuration

1. rails จะสร้าง development และ test database ให้เรา โดยจะใช้ user role ที่เราสร้างขึ้นมาใน 2.2 แต่ก่อนอื่นเราต้องหาที่เก็บพาสเวิร์ดของเราไว้ก่อน เปลี่ยน APPNAME เป็นชื่อเดียวกับที่เราตั้งไว้และ PostgreSQLRolePassword เป็นพาสเวิร์ดของเรา

$ echo 'export APPNAME_DATABASE_PASSWORD="PostgreSQL_Role_Password"' >> ~/.bash_profile

2. โหลดไฟล์ .bash_profile ใหม่

$ source ~/.bash_profile

3. เปิดไฟล์ blog/config/database.yml ด้วย editor ที่ชื่นชอบ แล้วไปที่เซคชั่น defaultหาบรรทัดที่เขียนว่า pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } % แล้วเพิ่มบรรทัด username กับ password ลงไป อย่าลืมเปลี่ยน username ให้ตรงกับที่เราสร้างไว้ก่อนหน้านี้

...
default: &default
  adapter: postgresql
  encoding: unicode
  # For details on connection pooling, see Rails configuration guide
  # http://guides.rubyonrails.org/configuring.html#database-pooling
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
 ** username: appname**
  **password: <%= ENV['APPNAME_DATABASE_PASSWORD'] %>**

development:
  <<: *default
database: blog_development
...

4. หลังจากตั้งค่าไปหมดเรียบร้อยแล้ว ให้สร้าง database ผ่านคำสั่ง

$ rails db:create

จะได้ output ออกมาประมาณนี้ ถือว่าเสร็จเรียบร้อย

Created database 'appname_development'
Created database 'appname_test'

3. Hello, Rails!

เมื่อทำทุกอย่างเสร็จสรรพเรียบร้อยแล้ว เวลาที่เราทำงานกับ Rails เราก็จะต้องมีตัวอย่างแสดงผลว่าทำอะไรไปแล้วบ้าง หน้าตาเป็นยังไง ใช่ไหม? แน่นอนว่า Rails ก็จัดให้ โดย Rails นั้นมี tools ที่ช่วยให้เราสามารถเปิดเซิร์ฟเวอร์บนเครื่องของเราเองได้ (localhost) พิมพ์

$ rails server

Note: สำหรับ Windows จะต้องเรียกไฟล์ rails มาจากโฟล์เดอร์ bin ของ Ruby เองโดยพิมพ์ $ ruby bin/rails server

คำสั่งนี้จะทำการรัน Puma ซึ่งเป็นเว็บเซิร์ฟเวอร์ที่ติดตั้งมาพร้อมกับ Rails แต่แรก จากนั้นเปิดเบราว์เซอร์ (chrome, safari, etc.) แล้วเข้าไปที่ url

http://localhost:3000

ถ้าพบกับหน้าตาแบบนี้ก็แสดงว่าทุกอย่าง setup ถูกต้องเรียบร้อยดี พร้อมสำหรับเขียนเว็บของเราแล้วล่ะ!

สำหรับพาร์ทต่อไปเราจะมาดูกันเรื่อง MVC และ routing ของ Rails รอติดตามกันได้เลย

[Part II] เขียนเว็บง่าย ๆ จากศูนย์ด้วย Ruby On Rails ? — MVC is easy!

​Note: หรือถ้าหากใครที่ไม่ต้องการเปิดบนเครื่องของตัวเอง ลองเข้าไปอ่านในนี้ได้ เล่มนี้จะสอนวิธี ​setup บน cloud ของ AWS (Amazon Web Service) ทำทุกอย่างบนคลาวด์ก็สะดวกไปอีกแบบครับ

Contact us

Drop us a line and we will get back to you