ทดลองเขียน Web App ด้วย Elixir + Phoenix Framework

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

elixir-lang.github.com

Website for Elixir

elixir-lang.github.com

Phoenix Framework

Phoenix is a web framework for the Elixir programming language that gives you peace of mind from development to production

ติดตั้ง 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

Installing Elixir

Website for Elixir

elixir-lang.github.com

ติดตั้ง Phoenix Framework

ติดตั้ง mix (ถ้ามีอยู่แล้ว มันจะทำการอัพเดทเป็นเวอร์ชั่นล่าสุด)

mix local.hex

ติดตั้งตัว Phoenix Generator

mix archive.install hex phx_new

เมื่อเราติดตั้งเสร็จ เราจะสามารถใช้คำสั่งของ phx.new ได้ เช่น สร้างโปรเจ็คใหม่ , start server, gen file ต่างๆ เป็นต้น

อ่านเพิ่มเติม การติดตั้ง Phoenix Framework

Installation — Phoenix v1.7.2

เริ่มต้น 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 /

1. 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 ❤️

อ่านเพิ่มเติม

Up and Running — Phoenix v1.7.2

Directory structure — Phoenix v1.7.2

Request life-cycle — Phoenix v1.7.2

Routing — Phoenix v1.7.2

Controllers — Phoenix v1.7.2