สร้าง Web App ด้วย Elixir ❤ Phoenix กันเถอะ (บทที่ 1 — Setup)

Pongsatorn Paewsoongnern

Published in

fastwork

2 min readJul 14, 2018

บทความนี้เหมาะสำหรับคนที่อยากลองเขียนเว็บแอพขึ้นมาสักตัวหนึ่ง โดยใช้ภาษา Elixir และ Phoenix

ตัวอย่างในบทความนี้ อ้างอิงจากคอร์ส The Complete Elixir and Phoenix Bootcamp ของ Stephen Grider

Elixir และ Phoenix คืออะไร ?

Elixir เป็นภาษา Dynamic และ Functional ออกแบบมาเพื่อสร้างแอพลิเคชั่นที่ Scalable และ Maintainable

Phoenix เป็น Web Framework ที่จะทำให้เพื่อนๆทุกคนเขียนเว็บได้สนุกอย่างที่ไม่เคยเป็นมาก่อน ตามสโลแกนที่ว่า

Productive. Reliable. Fast.
A productive web framework that
does not compromise speed and maintainability.

ตัว Phoenix เองเป็น Framework ที่เรียกได้ว่าครบถ้วนสมบูรณ์มาก มีทุกอย่างที่เราต้องการอยู่ในนั้นหมด นอกจากจะสร้าง Multi-page web application ได้อย่างดีเยี่ยม ยังสามารถใช้ทำ API Server (JSON-based), WebSocket รวมถึึง Integrate กับ GraphQL ได้อย่างมีประสิทธิ์ภาพสุดๆ

ผมจึงคิดว่านี่เป็นโอกาสดีที่จะแนะนำ Elixir และ Phoenix ให้กับทุกคนได้รู้จัก และได้ลองเพลินเพลินไปกับมันด้วยการเขียนโปรเจคเล็กๆขึ้นมาเอง เพื่อให้เห็นภาพมากที่สุด

แน่นอนว่าไม่สามารถแนะนำทุกส่วนของตัว Framework ให้ได้อยู่แล้ว มันเยอะมาก ในขั้นแรกนี้เลยอยากจะพาทุกคนไปลองเขียน Web App (Multi-page) แบบ Basic กันดูสักหน่อย ถ้าชอบจะได้พาไปทัวร์ส่วนที่เหลือต่อไป เย้!

Elixir ถูกนำไปใช้เป็นส่วนหนึ่งบน Production ที่ไหนบ้าง ?

Discord
Square Enix
Pinterest
Whatsapp
Toyota
และอื่นๆอีกมากมาย เดี๋ยวรายละเอียดเพิ่มเติมจะกลับมาใส่ให้

Elixir ลงยังไง?

สามารถดูตาม Official installation guide ได้เลย หรือถ้าขี้เกียจอ่าน ดูตามข้างล่างได้เลย

macOS

brew install elixir
เสร็จ!

Windows

ดาวน์โหลด Installer
กด next จนเสร็จ!

Ubuntu

wget https://packages.erlang-solutions.com/erlang-solutions_1.0_all.deb && sudo dpkg -i erlang-solutions_1.0_all.deb
sudo apt-get update
sudo apt-get install esl-erlang
sudo apt-get install elixir
เสร็จ!

Phoenix ลงยังไง?

ในการใช้งาน Phoenix Framework นั้นต้องเตรียมพร้อมดังนี้

Prerequisite

Elixir เวอร์ชั่น 1.4 ขึ้นไป (ทำตามข้างบนแล้วข้ามได้)
Erlang เวอร์ชั่น 18 ขั้นไป (ทำตามข้างบนแล้วข้ามได้)
NodeJS เวอร์ชั่น 5.0.0 ขึ้นไป (วิธีการติดตั้ง)
เนื่องจากส่วนของ frontend ตัว Phoenix ใช้ brunch package management ในการ compile พวก asset ต่างๆเช่น (CSS, JavaScript) ซึ่งต้องใช้คำสั่ง npm ที่มาพร้อมกับ node นั่นเอง
PostgreSQL เวอร์ชั่นไหนก็ได้ (วิธีการติดตั้ง)
เนื่องจากว่าเว็บแอพเราต้องมี Datasbase ไว้เก็บข้อมูล และ Phoenix เองทำงานกับ Postgres ได้อย่างยอดเยี่ยม เราเลยแนะนำให้มี PostgreSQL ติดเครื่องไว้
*ถ้าใครสะดวกแนะนำว่าลองศึกษาการใช้งานบน Docker ดูนะ ในอนาคตการทำงานจะสะดวกกว่ามาก

เตรียมพร้อม Phoenix (ทุกแพลตฟอร์ม)

mix archive.install https://github.com/phoenixframework/archives/raw/master/phx_new.ez
พร้อมใช้งานแล้ว!

เริ่มสร้างโปรเจคกันดีกว่า

เมื่อทุกคนได้เตรียมพร้อมทุกอย่างแล้ว ก็มาลองสร้างโปรเจคเล็กๆกันดูหน่อยแล้วกัน

สร้างโปรเจค Phoenix

mix phx.new discuss

ระบบจะถามว่าต้องการให้โหลด dependencies ที่เกี่ยวข้องทั้งหมดเลยไหม แน่นอนเราก็ต้องตอบว่า Y ไปตามระเบียบ

รอระบบจัดการอะไรให้ จนได้หน้าตาดังรูปก็ถือว่าโอเค

ตั้งค่า Config

เปิดไฟล์ config/dev.exs ขึ้นมาแล้วตั้งค่า Database ของเราไปให้ถูกต้องการตามที่ได้ setup ไว้ของใครของมัน

รัน `mix ecto.create`

เพื่อให้ตัว ecto สร้าง storage สำหรับ repository ของเรา

ถ้าไม่มี error อะไรและได้ผลลัพท์ดังภาพ แสดงว่าเราได้ config database ถูก

สุดท้ายแล้ว! รัน web server

ด้วยคำสั่ง mix phx.server

[info] Running DiscussWeb.Endpoint with Cowboy using http://0.0.0.0:4000

ถ้า terminal ขั้นข้อความประมาณนี่แสดงว่ารันได้ไม่มีปัญหา ลองเข้าดูได้ที่ localhost:4000 ได้เลย

บทสรุปบทที่ 1 — Setup

มาถึงตรงนี้ เพื่อนๆคงจะสามารถติดตั้ง Elixir, Phoenix และสิ่งจำเป็นอื่นๆได้เป็นที่เรียบร้อยแล้ว อีกทั้งยังสามารถสร้างโปรเจค Phoenix ขึ้นมาได้อีกด้วย อื้อหือ! ผมนี่ลุกขึ้นปรบมือให้เลย

แค่เนี่ยหรอ?

แค่นี้ก็บ้าสิ! อันนี้บทแรกเอาแค่ Setup ก็พอแล้วแหม่~ เดี๋ยวสำหรับบทต่อไปจะเป็นเรื่องราวของการใช้ CLI สร้าง Context, Schema และ Controller รวมถึง Database Migration ที่จะมีการปรับเปลี่ยนเล็กน้อยจาก Default ทีมีอยู่ ยังไงก็อดใจรอกันสักนิด ถ้าเขียนเสร็จเมื่อไหร่จะรีบ Publish ให้เลย :)

ขอบคุณมากครับ