ทดลองเขียน Web App ด้วย Elixir + Phoenix Framework
สวัสดีครับ วันนี้ผมได้ลองหัดเขียน Elixir + Phoenix Framework แบบง่ายๆ ก็เลยนำมาเขียนเป็นบล็อกสรุปสั้นๆ ไว้ ซึ่งบทความนี้ เป็นบันทึกสั้นๆนะครับ ไม่ได้เป็น Tutorial ไม่ได้อธิบาย ที่ไปที่มา หากใครสนใจ รายละเอียด Elixir หรือ Phoenix สามารถอ่านจาก Docs ได้เลยครับ


ติดตั้ง Elixir
ถ้าใช้ Mac OS ติดตั้งผ่าน Homebrew ส่วน Windows มีตัว Installer ให้ติดตั้ง
brew install exlir
ส่วนผม ผมติดตั้ง Elixir ผ่าน asdf ครับ ซึ่งผมจะลง Elixir 1.14.3 และใช้ OTP 25 ก็เลยต้องติดตั้ง Erlang 25 ก่อน
asdf install erlang 25.3.2
asdf global erlang 25.3.2
ติดตั้ง Elixir (OTP 25)
asdf install elixir 1.14.3-otp-25
asdf global elixir 1.14.3-otp25
ทำการ verify ว่า Elixir ตรงตามที่เราติดตั้งมั้ย
elixir --version
จะได้ผลลัพธ์ประมาณนี้
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:10:10] [ds:10:10:10] [async-threads:1] [jit]
Elixir 1.14.3 (compiled with Erlang/OTP 25)
อ่านเพิ่มเติม การติดตั้ง Elixir

ติดตั้ง Phoenix Framework
ติดตั้ง mix (ถ้ามีอยู่แล้ว มันจะทำการอัพเดทเป็นเวอร์ชั่นล่าสุด)
mix local.hex
ติดตั้งตัว Phoenix Generator
mix archive.install hex phx_new
เมื่อเราติดตั้งเสร็จ เราจะสามารถใช้คำสั่งของ phx.new
ได้ เช่น สร้างโปรเจ็คใหม่ , start server, gen file ต่างๆ เป็นต้น
อ่านเพิ่มเติม การติดตั้ง Phoenix Framework

เริ่มต้น Hello World Project
เริ่มสร้างโปรเจ็ค ด้วยการใช้ Generator (ตัวโปรเจ็คชื่อว่า hello)
mix phx.new hello --no-ecto
ทำการกด Y เพื่อติดตั้ง dependencies
* creating hello/assets/vendor/heroicons/LICENSE.md
* creating hello/assets/vendor/heroicons/UPGRADE.md
* extracting hello/assets/vendor/heroicons/optimized
Fetch and install dependencies? [Yn]
สาเหตุที่ใส่ --no-ecto
เพราะ ไม่ต้องการเชื่อมต่อ database (postgres) ถ้าใครไม่มี postgres บนเครื่อง ก็จะไม่สามารถ start server ได้ เลยตัดขั้นตอนนี้ไปก่อน เพราะ Hello World ยังไม่ได้ใช้
เมื่อติดตั้งเสร็จเรียบร้อย เข้าไปที่โฟลเดอร์ hello และ start server ด้วยคำสั่ง
mix phx.server
จะได้เว็บที่ port 4000 http://localhost:4000

การทำงานคร่าวๆ ของ Phoenix เมื่อเราเปิดหน้าเว็บ เช่น root path /
router.ex
- จะเป็นตัวกำหนด routes ของเว็บของเรา
ถ้าเราดูไฟล์ lib/hello_web/router.ex
จะเห็นว่ามีการกำหนด ไว้อยู่
get "/", PageController, :home
2. เรียก function home
ที่ไฟล์ PageController
ถ้าเราดูไฟล์ lib/hello_web/controllers/page_controller.ex
จะเห็นแบบนี้
defmodule HelloWeb.PageController do
use HelloWeb, :controller
def home(conn, _params) do
# The home page is often custom made,
# so skip the default app layout.
render(conn, :home, layout: false)
end
end
def home
เป็น function ที่รับ arguments 2 ตัว คือ conn
และ params
conn
เป็น connection request ต่างๆ ทั้งหมด ที่ client ส่งมา ลอง inspect ดูได้IO.inspect(conn)
params
- คือ request parameters
ฟังค์ชั่นนี้ ทำการ render :home
ก็คือ มันจะไปดูไฟล์ template ที่ชื่อ home นั่นเอง
3. Phoenix View (presentation layer)
คือไฟล์ lib/hello_web/controllers/page_html.ex
จะเห็นว่ามันมี templates ไปที่ page_html/*
defmodule HelloWeb.PageHTML do
use HelloWeb, :html
embed_templates "page_html/*"
end
4. HTML Template
ตัว HTML Template จะเป็นไฟล์ชื่อ .heex คือ HTML + Elixir Embedded อยู่ที่ lib/hello_web/controllers/page_html/home.html.heex
การทำงานคร่าวๆ ก็มีประมาณนี้ นอกจากนี้ตัว default มันก็จะมีพวก mailbox, dashboard มาให้ด้วย ถ้าเรารัน dev mode ก็จะสามารถเข้าไปดูได้ http://localhost:4000/dev/dashboard/home

หากตอนเริ่มต้น generate project เราไม่ต้องการ สามารถ disable พวกนี้ออกไปได้เช่นกัน เช่น
mix phx.new chat --no-mailer --no-dashboard --no-gettext --no-ecto
ลองเปิดโปรเจ็ค และดูพวก files & folder structure และก็ลองศึกษาเพิ่มเติมกันดูนะครับ หรือลองอ่าน Guide เรื่อง New View ดูครับ
Happy Coding ❤️
อ่านเพิ่มเติม




