ติดตั้ง สร้างโปรเจคและรันแอพ Ruby On Rails บน Windows 10

ขั้นตอนในการสร้างโปรเจคใหม่หรือแอพของ rails นั้นไม่ยาก เอาจริงๆ ก็ใช้แค่คำสั่ง rails new [ชื่อแอพ] แค่นั้น แต่ที่มันเยอะจะเป็นเรื่องของการติดตั้ง เตรียมระบบให้เราสามารถรัน rails ได้มากกว่า ในโพสนี้ เราจะมาลองสร้าง rails แอพบน windows โดยเริ่มตั้งแต่ลง Ruby และโปรแกรมที่เกี่ยวข้องสำหรับสร้างแอพครั้งแรกอย่าง git, sqlite และในตอนท้ายมีแถมนิดนึงคือ ลงโปรแกรมที่เกี่ยวข้องกับการเขียนโค้ดที่ผมใช้อยู่

Install Ruby

แน่นอนว่าอันดับแรกที่เราจะทำก่อนคือลง Ruby สำหรับ windows เราจะต้องลงโดยใช้ Ruby and DevKit จาก RubyInstaller โดยให้เข้าไปดาวโหลดตัว install โดยให้เลือก ruby installer with Devkit ที่หน้าดาวโหลดของเว็บ ซึ่งความหมายของ Devkit ในที่นี้ก็คือตัว Ruby ที่โหลดมาจะถูกติดตั้งภายใต้สภาพแวดล้อม (development kit) ที่ทำมาสำหรับ windows โดยเฉพาะ เพื่อให้สามารถคอมซอร์สไฟล์ของ ruby และไฟล์ extensions อื่นๆ ที่เป็นเขียนมาจากภาษา C ได้ โดยตัว development kit ที่ว่านี้ก็พัฒนาอยู่บน MSYS2 อีกที

เมื่อดาวโหลดมาได้แล้วให้ดับเบิ้ลคลิ๊กตัว installer เพื่อเริ่มการลง Ruby ได้เลย ขั้นตอนก็ไม่ยากเพราะเหมือนลงโปรแกรมบน windows ทั่วไป เราสามารถคลิ๊ก Next ไปเรื่อยๆ ได้เลย โดยตัว installer จะลง Ruby เอาไว้ที่ C:\Ruby25-x64 และลง MSYS2 ไว้ที่ C:\Ruby25-x64\msys64

เมื่อติดตั้งเสร็จแล้วหน้าจอจะขึ้น checkbox มาถามว่าจะให้รันคำสั่ง ridk install หรือไม่ ให้เรากด next เพื่อให้โปรแกรมรัน ridk install ต่อเลยเพื่อทำการ initialize ตัว MSYS2 ต่อไป

พอกดไปแล้วก็จะมีหน้าจอขึ้นมาถามว่าเราจะ initialize ด้วย option ไหน ตรงนี้ไม่ต้องเลือก ให้กด enter ไปได้เลยมันจะทำการเลือก option ที่เหมาะสมให้เราเอง ขั้นตอนการ initialize MSYS2 หลังจาก initialize เสร็จ จะเห็นข้อความ success ก็กด enter อีกครั้ง เป็นอันเสร็จขั้นตอนการติดตั้ง ให้ลองเปิด command windows ขึ้นมา (พิมพ์ cmd ตรง windows search) แล้วพิมพ์ ruby -v เราจะเห็นเวอร์ชั่นของ ruby ที่เราเพิ่งลงไป ก็แสดงว่าติดตั้งเรียบร้อยแล้ว

$ ruby -v
ruby 2.5.5p157 (2019-03-15 revision 67260) [x64-mingw32]

เซต Path variable เพื่อให้สามารถใช้คำสั่งของ linux จาก MSYS2 ได้

ในการใช้งาน Ruby หรือ Ruby on Rails เอง เราจะพบว่า มีโปรแกรมหรือคำสั่งหลายๆ คำสั่งของ Linux ที่จำเป็นกับการพัฒนาแอพของเราเช่น ssh, ssh-keygen, scp หรือแม้กระทั่งคำสั่งที่ใช้กำหนดสิทธิในการเข้าถึงของไฟล์อย่าง chmod, chown เป็นต้น MSYS2 ที่เราลงไปในขั้นตอนที่แล้วเป็นตัวที่จะทำให้เราใช้คำสั่งของ Linux ที่ว่าได้ แต่เราต้องระบุ path ของ MSYS2 ให้ windows รู้ก่อนว่าจะเรียกคำสั่งเหล่านั้นมาจากไหน สำหรับ Windows 10 ทำได้โดย คลิ๊กที่ All Setting แล้วเข้าไปที่ System > About > system info จากนั้นคลิ๊กที่ Advanced system settings แล้วเลือก Environment variables ที่ section user variables ให้เลือกไปที่ Path แล้วกดปุ่ม New เพื่อเพิ่มค่าของ path ให้เราใส่ค่า C:\Ruby25-x64\msys64\usr\bin ลงไป

จากนั้นทดลองรันคำสั่ง Linux ทั่วไปโดยเปิด command windows ขึ้นมาแล้วพิมพ์ $ ipconfig /all | grep ‘v4’ จะได้ผลลัพธ์เป็น output ในบรรทัดที่มี v4 ประกอบอยู่เท่านั้น ซึ่งแสดงว่าเราสามารถใช้คำสั่ง grep ของ linux ได้แล้ว

$ ipconfig /all | grep ‘v4’
   IPv4 Address. . . . . . . . . . . : 192.168.1.62(Preferred)

Install Git for Windows

ดาวโหลด git สำหรับ windows จาก https://git-scm.com/downloads แล้วทำการติดตั้ง ซึ่งขั้นตอนการติดตั้งก็เหมือนลงโปรแกรมทั่วไป ไม่มีอะไรซับซ้อน ไม่จำเป็นต้องเปลี่ยนค่าตั้งต้นต่างๆ ระหว่างลงโปรแกรม สามารถคลิ๊ก next ไปจนจบการติดตั้งได้เลย พอติดตั้งเสร็จลองรันคำสั่ง $ git –version ถ้าขึ้นข้อความเป็นเลขเวอร์ชั่นก็แสดงว่าติดตั้งเรียบร้อย

$ git --version
git version 2.21.0.windows.1

Install Sqlite3 สำหรับ windows

เข้าไปที่ หน้าดาวโหลดของ sqlite3 แล้วดาวโหลดไฟล์สำหรับ windows ที่หัวข้อ Precompiled Binaries for Windows เราต้องดาวโหลดมาสองไฟล์ได้แก่ sqlite-dll-win64-x64-3280000.zip และ sqlite-tools-win32-x86-3280000.zip

ให้แตกไฟล์ที่ดาวโหลดมา จะมีทั้งหมด 5 ไฟล์ได้แก่ sqlite3.def, sqlite3.dll, sqlite3.exe, sqldiff.exe และ sqlite3_analyzer.exe แล้ว copy ไฟล์ทั้งหมดไปยัง ไดเรกทอรี่ที่มีการเพิ่มอยู่ในตัวแปล PATH ของ windows แล้ว ในตัวอย่างนี้ผมจะ copy ไปไว้ใน C:\Ruby25-x64\bin ซึ่งเป็นไดเรกทอรี่ที่เราเพิ่มเข้าไปใน PATH ก่อนหน้านี้ จากนั้นทดลองรัน sqlite3 โดยเปิด command line window ขึ้นมาแล้วพิมพ์ $ sqlite3 –version ก็จะได้ผลลัพธ์เป็นเลขเวอร์ชั่นของ sqlite ซึ่งแสดงว่าใช้ได้

$ sqlite3 --version
3.28.0

สร้างโปรเจคแรกบน Ruby on Rails

Ruby On Rails เป็น gem ตัวนึงของ ruby ดังนั้นการติดตั้งก็เหมือนกับเราลงแพกเกจ gem ทั่วไปซึ่งทำได้โดยใช้คำสั่ง

$ gem install rails

หลังจากติดตั้ง rails และ gems อื่นๆ ที่ผูกมากับ rails แล้ว เราจะสามารถใช้คำสั่ง rails ได้ ก่อนอื่นเราเช็คเวอร์ชั่นของ rails ที่ลงกันก่อนโดยใช้คำสั่ง $ rails -v ซึ่งก็จะได้ผลลัพธ์เป็นเลขเวฮร์ชั่นออกมา

$rails -v
Rails 5.2.3

ตอนนี้เราพร้อมที่จะสร้าง rails แอพ กันแล้ว งั้นก็เริ่มกันเลยโดยผมจะลองสร้างแอพชื่อ hellorails ให้พิมพ์คำสั่ง

$ rails new hellorails

ซึ่ง rails จะทำการสร้างโฟลเดอร์ hellorails และสร้างไฟล์ที่เกี่ยวข้องสำหรับโปรเจคใหม่ รวมทั้งดาวโหลด gem ที่ rails เรียกใช้ทั้งหมดด้วย ขั้นตอนนี้ใช้เวลานิดหน่อยครับ ทำใจร่มๆ ดื่มกาแฟรอก่อนได้

หลังจากที่เตรียมไฟล์และติดตั้ง gem เสร็จแล้ว ให้เรา cd เข้าไปในโฟลเดอร์ hellorails แล้วลอง ls ดูก็จะเห็นโฟลเดอร์และไฟล์ที่เกี่ยวข้องของ rails แอพ ซึ่งผมจะหาโอกาสมาไล่ดูกันทีละรายการในโพสต่อๆ ไป สำหรับเป้าหมายในวันนี้เราอยากจะรันแอพ rail ขึ้นมาให้ได้ก่อน ให้เราพิมพ์คำสั่งด้านล่างใน command windows เพื่อรัน rails server ซึ่งทำหน้าที่เป็น application server

$ rails server 

จากนั้นเปิดเบราเซอร์อะไรก็ได้ขึ้นมาแล้วพิมพ์ localhost:3000 ลงไปในช่อง url แล้วกด enter ก็จะเห็นหน้า welcome ของ Rails ดังรูป แสดงให้เห็นว่าแอพ hellorails ของเรารันอยู่ในโหมด development ได้อย่างที่ต้องการแล้ว Rails welcome screen รันบน windows 10

เครื่องไม้เครื่องมือที่ใช้ในการเขียนโค้ดกับโปรเจค Ruby On Rails

แถมนิดนึงเกี่ยวกับเครื่องมือหรือ tool ที่ผมใช้ในการเขียนโค้ด และการเซตค่าเบื้องต้น ซึ่งน่าจะเป็นประโยชน์บ้างสำหรับผู้ที่เพิ่งเริ่มต้นการเขียนโค้ดกับ Ruby On Rails บน Windows

สิ่งที่ต้องใช้หลักๆ แบบขาดไม่ได้เลย code editor โดยส่วนตัวผมใช้ vim เพราะถนัดและคุ้นเคยกว่า แต่สำหรับโพสนี้ผมแนะนำให้ใช้ VS Code ซึ่งคิดว่าหลายๆ ท่านก็น่าจะใช้กันอยู่ เพราะว่าดีงามน่าใช้มากจริงๆ และอยากแนะนำโปรแกรม SourceTree เป็นโปรแกรมเสริมสำหรับ Git ซึ่งช่วยให้เราเห็นภาพการทำงานของ Git ในแบบกราฟิก อันนี้ของเขาก็ดีจริงๆ สุดท้านคือโปรแกรมที่เอาไว้เปิด terminal หรือ command windows หลายๆ หน้าจอพร้อมๆ กัน จริงๆแล้วมีอยู่หลายตัวแต่ผมขอเลือก consolez เพราะถนัดที่สุด

เนื้อจากการลง VS Code และ SourceTree นั้นทำได้ไม่ยาก เหมือนกับการลงโปรแกรมทั่วไป ไม่ต้องมีการเซตค่าก็ใช้งานได้เลย แต่จะขอพูดถึง consolez นิดนึงเพราะว่ามีขั้นตอนในการลงและเซตค่าที่ดูจะวุ่นวายเหมือนกัน

Install Chocolatey and ConsoleZ

วิธีการติดตั้ง ConsoleZ ที่ดูที่สุดในตอนนี้จะต้องทำผ่านทาง Chocolatey ซึ่งเป็น package manager สำหรับ windows นั่นหมายความว่าเราจะต้องลง Chocolatey กันก่อน วิธีติดตั้ง Chocolatey อ้างอิงจากหน้าวิธีติดตั้งของเว็บอย่างเป็นทางการ มีขึ้นตอนดังนี้

เปิด command windows (cmd.exe) ขึ้นมา แล้วพิมพ์คำสั่งด้านล่างนี้ลงไป

$ @”%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe” -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command “iex ((New-Object System.Net.WebClient).DownloadString(‘https://chocolatey.org/install.ps1’))” && SET “PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin”

Note: ต้องเปิด command windows ภายใต้สิทธิ administrator นะครับ

ทำการตรวจสอบว่าลง chocolatey เรียบร้อยหรือไม่ โดยพิมพ์คำสั่งด้านล่าง $ choco -v ถ้าเรียบร้อยดี เราจะเห็นเลขเวอร์ชั่นของ Chocolatey โชว์ขึ้นมา

ตอนนี้เราพร้อมที่จะทำการติดตั้ง ConsoleZ ผ่านทาง chocolatey แล้ว โดยพิมพ์คำสั่ง

$ choco install consolez

แล้วตอบ yes เพื่อทำการดาวโหลดและติดตั้ง โดย consolez จะถูกติดตั้งอยู่ที่ C:\ProgramData\chocolatey\lib\ConsoleZ\tools ให้ทำการสร้าง shortcut เอาไว้บนหน้าเดสท็อป

ปรับแต่งธีมของ console

ผมจะปรับแต่งธีมของ consolez อีกเล็กน้อยโดยจะเปลี่ยนไปใช้ธีม solarize ที่ดูสบายตา และง่ายเวลาอ่านล็อก โดยทำตามขั้นตอนต่อไปนี้ เปิด consolez แล้วเข้าไปที่ Edit > Settings ไปที่เมนูด้านซ้าย เลือกหัวข้อ Console จากนั้น กำหนดไดเรกทอรี่ที่เราต้องการให้เปิดมาเป็นค่า default เวลาเปิดโปรแกรม consolez โดยเลือกไดเรกทอรี่ที่ช่อง Startup dir ที่เมนูด้านซ้ายมือเลือก Apperance > Font แล้วเลือก font name เป็น Consolas โดยตั้งขนาดเป็น 12 ที่เมนูด้านซ้าย เลือกหัวข้อ Tabs ทางด้านซ้ายมือ จากนั้นคลิ๊กไปที่หัวข้อ Color & Cursor แล้วกดปุ่ม Import เพื่อ import ค่าธีมสีเข้ามาใช้ ซึ่งผมใช้ไฟล์ธีมสีชื่อ solarize.xml ซึ่งมีเนื้อหาในไฟล์ดังนี้

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<settings lang="auto" icon_size="0">    
  <tabs>
        <tab title="ConsoleZ" use_default_icon="0">
            <console shell="" init_dir="" priority="2" run_as_user="0" user="" net_only="0" run_as_admin="0"/>
            <cursor style="4" r="255" g="255" b="255"/>
            <background type="0" r="0" g="43" b="54">
                <image file="" relative="0" extend="0" position="0">
                    <tint opacity="0" r="0" g="0" b="0"/>
                </image>
            </background>
            <colors background_text_opacity="255">
                <color id="0" r="7" g="54" b="66"/>
                <color id="1" r="38" g="139" b="210"/>
                <color id="2" r="133" g="153" b="0"/>
                <color id="3" r="42" g="161" b="152"/>
                <color id="4" r="220" g="50" b="47"/>
                <color id="5" r="211" g="54" b="130"/>
                <color id="6" r="181" g="137" b="0"/>
                <color id="7" r="238" g="232" b="213"/>
                <color id="8" r="42" g="161" b="152"/>
                <color id="9" r="131" g="148" b="150"/>
                <color id="10" r="88" g="110" b="117"/>
                <color id="11" r="147" g="161" b="161"/>
                <color id="12" r="203" g="75" b="22"/>
                <color id="13" r="108" g="113" b="196"/>
                <color id="14" r="101" g="123" b="131"/>
                <color id="15" r="253" g="246" b="227"/>
        </colors>
        </tab>
    </tabs></settings>

ที่เมนูด้านซ้ายเลือก Hotkeys แล้วหา command ทางด้านขวาที่ชื่อ ‘Clone view in new tab’ ซึ่งการสร้าง tab ใหม่จากหน้า tab ปัจจุบัน ส่วนตัวผมจะใช้ hotkey เป็น Ctrl+Shift+C ซึ่งสามารถกำหนดได้โดยพิมพ์ Ctrl+Shift+C ตรงช่อง Hotkey แล้วกดปุ่ม assign ได้เลย

จากนั้นปิดแล้วเปิด consolez เพื่อให้เกิดการเปลี่ยนแปลงตามที่เราตั้งค่าไว้ เราสามารถแบ่งหน้าต่างภายใน consolez ตามแนวตั้งหรือแนวนอนก็ได้ ถ้าต้องการแบ่งแนวตั้งให้กด Ctrl+Shirft+E ส่วนแนวนอนให้กด Ctrl+Shift+O ถ้าต้องการเอาหน้าต่างที่ใช้อยู่ออกไปให้กด Ctrl+Shift+W เราสามารถ move ไปมาระหว่างหน้าต่างได้โดยกด Ctrl แล้วตามด้วยปุ่ม page up หรือ page down เราสามารถเพิ่ม tab ใน consolez ได้โดยกด Ctrl+Shift+C เวลาจะสลับแท็บไปมาระหว่างกันก็แค่กด Ctrl แล้วตามด้วยตัวเลขลำดับของแท็บ เช่น Ctrl+1 เพื่อไปที่แท็บที่หนึ่ง หรือกด Ctrl+2 เพื่อสลับไปยังแท็บที่สองเป็นต้น

สรุป

จะเห็นว่าเราสามารถติดตั้ง สร้างโปรเจคและรันแอพ Ruby on Rails บน Windows ได้ โดยสามารถใช้คำว่าไม่ยากเย็นนักก็ได้อยู่ ส่วนสำคัญอยู่ที่เราจะต้องลง Ruby ที่สามารถรันบน windows ได้อย่างไม่มีปัญหา ซึ่งก็คือตัว RubyInstaller ซึ่งประกอบด้วย Ruby ที่มาพร้อมกับ MSYS2 development kit นั้นเอง เมื่อลง Ruby ได้แล้ว เราก็แค่ติดตั้ง rails เหมือนเป็นการติดตั้ง gem ตัวหนึ่งได้ไม่ยาก

แชร์โพสได้จากลิ้งด้านล่าง ขอบคุณครับ