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

หลังจากเราได้ทำการ Setup โปรเจคในบทแรกกันมาแล้ว คราวนี้เราจะมาเริ่ม Implement โปรเจคคร่าวๆกันสักที และขอเน้นอีกรอบว่า

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

สิ่งที่เราจะทำใน Tutorial นี้คือทำระบบ “Discussion” แบบคร่าวๆ มีองค์ประกอบหลักดังนี้

• Topic
• Comment
• User

แน่นอนว่าเราจะทำ Authentication & Authorization กันด้วย OAuth โดยให้ Login ผ่าน GitHub หรือ Facebook แทนที่จะมาทำระบบ Member เอง

มาเริ่มจากสิ่งที่ง่ายที่สุดเลยดีกว่า คือการทำ CRUD ให้กับ Topic Model

พร้อมแล้วก็เปิด Terminal ขึ้นมา กระโดดไปยังโปรเจค discuss ที่เราสร้างไว้ แล้วมาทำตามกันไปทีละขั้นตอนกัน จัดไป!

ว่าแล้วก็ลองพิมพ์คำสั่งต่อไปนี้กันเลยคนับ!

mix phx.gen.html Discussions Topic topics title:string

ตามด้วย
mix ecto.migrate

แล้วคำสั่ง mix phx.gen.html คืออัลลัย?~

https://hexdocs.pm/phoenix/Mix.Tasks.Phx.Gen.Html.html

Generates controller, views, and context for an HTML resource.

หน้าที่ของมันก็คือสร้าง Controller, View และ Context สำหรับเรานั่นเอง จะได้ไม่ต้องเสียเวลาไปนั่งเขียนเองเยอะแยะเต็มไปหมด มีคนช่วยทำให้ดีกว่าเป็นไหนๆ

Parameters ที่ใส่เข้าไปในคำสั่ง mix phx.gen.html

• Discussions คือ Context Module
• Topic คือ Schema Module
• topics คือ Table Name
• title:string คือ Fields ที่เราต้องการให้มี อาจจะเพิ่ม content:string ไปอีกก็ได้

แล้ว Context คืออะไร?

Context คือ Module ที่จะทำหน้าที่เป็น API Boundary สำหรับสิ่งที่เกี่ยวข้องกัน ดังนั้น 1 Context Module อาจจะมีได้หลาย Schema อยู่ด้วยกันได้

เช่น Discussions เป็น Context มี Topic และ Comment อยู่ข้างใน (เพราะมันเกี่ยวข้องกัน ถือว่าเป็น Boundary เดียวกัน)

หลายๆคงอาจจะยังไม่เข้าใจมาก แต่ตัว Phoenix Framework พยายามให้เราออกแบบโปรเจคให้เป็น Context Based เนื่องจากจะทำให้เราบริหารจัดการโปรเจคได้ง่ายขึ้นมาก

ปล1. ผมจะข้ามเรื่องรายละเอียด Context ไปก่อนนะครับ ไว้เล่าลงรายละเอียดใน Session อื่น

ปล2. อย่าลืมรันคำสั่งmix ecto.migrate ใช้เพื่อสั่งรัน migration ไปจัดการ table ใน database ของเรา

เพิ่มเพิ่ม Topic Routes

แก้ไขไฟล์ Router
lib/discuss_web/router.ex

เพิ่มบรรทัดนี้เข้าไป
resources “/topics”, TopicController

resources เป็น Helper สำหรับ Generate routes ให้อิงตาม Restful Convention ครับ

*ตัวอย่างมีแปะรูปให้ดูด้านล่าง

เช็ค Routes ใน Web Application กัน

หลังจากที่เราเพิ่ม resources เข้าไปใน router แล้ว เราก็จะสามาร access เข้าตาม route ใหม่ได้ดังนี้เลย โดยเช็คได้จากคำสั่ง
mix phx.routes

ยินดีต้อนรับสู่ Topic!

รันเซิฟเวอร์ด้วยคำสั่ง
mix phx.server

ลองเข้าไปเยี่ยมชมผลงานที่
http://localhost:4000/topics

แค่นี้เราก็มี CRUD สำหรับ Topic เป็นที่เรียบร้อยแล้ว ง่ายมากเลยใช่ไหมละ!

สรุปบทที่ 2 — CRUD

ในบทนี้ก็ไม่มีอะไรมาก เป็นการแนะนำการทำ CRUD แบบง่ายๆ โดยใช้ Command Line เข้ามาช่วย และอธิบายรายละเอียดเกี่ยวกับ Boundary Context ของตัว Phoenix Framework เล็กน้อย ถือว่ายังเป็นน้ำจิ้มสำหรับคนที่สนใจ

สำหรับบทถัดไป เราจะเริ่มทำระบบ Authentication ให้ล๊อกอินผ่าน GitHub กันนะครับ โดยเราจะใช้ Library ueberauth เข้ามาช่วยในส่วนนี้ :) ใครสนใจก็เข้าไปอ่านรายละเอียดของตัว lib ก่อนได้ครับ

แล้วพบกันใหม่เร็วๆนี้กับ บทที่ 3 — OAuth