จากบทความก่อนหน้าที่ทำให้พวกเราได้รู้จักกันกับ Headless CMS และ JAM Stack กันไปแล้ว วันนี้ผมจะมาแชร์ในสิ่งที่เราได้ทดลองทำกันในช่วงที่ผ่านมาครับ โดยวันนี้พวกเราจะมาทำความรู้จักกันกับ Strapi ให้มากยิ่งขึ้นกว่าเดิม
Strapi คืออะไรกัน?
มันคือเครื่องมือในการสร้าง API นั่นเอง ใช่แล้วครับ มันคือการที่เราสามารถสร้าง API ขึ้นมาโดยไม่ต้องเขียนโค๊ดซักบรรทัด ย้ำ! ซักบรรทัด ผ่านการจัดการในหน้าของ Dashboard ที่สวยงามนั่นเองครับ
จุดเด่นที่ขายได้
- Opensource — ก่อนอื่นเลยคือมันใช้งานได้ฟรีครับ เราสามารถร่วม contribute กับคนอื่น ๆ ได้ในโปรเจกต์นี้
- Customizable — มีระบบในการจัดการ spec ของ API ได้ผ่านหน้า admin dashboard
- 100% JS — โค๊ดที่เราได้คือ JavaScript, Node.js (เราสามารถแก้ไขได้ด้วย ถ้าไม่พอใจ อยากปรับแต่ง API เองมากขึ้น)
- Self-hosted — ติดตั้งบนเครื่องของเราเอง ไม่ต้องเสียค่าใช้จ่ายในการใช้บริการแบบเจ้าอื่น ๆ
- RESTFul or GraphQL — เราสามารถสร้างให้ API ของเราพ้นข้อมูลออกมาได้หลากหลายรูปแบบ เพื่อให้การเขียน Client มาเชื่อมต่อข้อมูลง่ายที่สุด
- Plugins — ถ้าเราอยากให้รูปที่อัพโหลดผ่าน API ของเราไปฝากไว้ที่ Cloudinary ล่ะ ต้องทำอย่างไร? ถ้าเมื่อก่อนเราก็ต้องเขียนเอง แต่นี่แค่ติดตั้ง Plugin แก้ไขค่าต่าง ๆ เช่น API Key และ Secret key ก็สามารถใช้งานได้แล้ว
สรุปมันเป็นตัวช่วยให้เราสามารถสร้าง API ได้อย่างรวดเร็วนั่นเองครับ
ตัวอย่างการนำไปใช้งาน
I GEAR GEEK - HOME
เราคือกลุ่มคนที่มีความหลงใหลในการเขียนโปรแกรม และ มีประสบการณ์ จากการทำงานจากทั้งในและนอกประเทศอย่างโชกโชนigeargeek.com
เว็บไซต์ของเราใช้ Nuxt.js เชื่อมต่อกับ API ของ Strapi ครับ ซึ่งถ้าเข้าไปดูจะเห็นว่ามันมีเนื้อหาที่ Dynamic อยู่ นั่นก็คือ ส่วนของ รูปกิจกรรมต่าง ๆ, โปรเจกต์ที่เราทำมา และ กิจกรรม / blog แน่นอนว่าถ้าเราต้องทำระบบหลังบ้านเองต้องใช้เวลาแน่นอน พวกเราเลยทดลองใช้งาน Strapi เป็นส่วนการจัดการเนื้อหาที่ Dynamic เหล่านี้
ระบบหลังบ้านของเราที่ใข้ strapi สร้างขึ้นมา
การติดตั้ง
ผมแนะนำอ่านที่นี่เลย มีขั้นตอนที่ค่อนข้างครบถ้วนนแล้วครับ >> https://strapi.io/documentation/3.x.x/getting-started/quick-start.html
- ติดตั้ง strapi ผ่าน npm
npm install strapi@alpha -g
2. สร้างระบบขึ้นมาใหม่ด้วย command นี้
strapi new cms --quickstart
เมื่อเราสั่งคำสั่งนี้เราจะได้ code ออกมาชุดนึง มันคือระบบหลังบ้านของ strapi นั่นเอง โดย code ที่ถูกสร้างขึ้นเป็น Node.js ครับ
โดยทั่วไปพอร์ตของ strapi จะเปิดไว้ที่ 1337 ครับ เราสามารถปรับเปลี่ยนได้ภายหลังให้เข้าไปที่ http://localhost:1337/admin เพื่อเริ่มใช้งาน
3. ทดลองสร้าง Content Type ใหม่ (ให้นึกภาพเหมือน Table ใน Relational database ครับ)
เลือก Content Type Builder > เลือก “+ Add Content Type”
เราจะเห็นหน้าต่างเด้งขึ้นมาประมาณนี้ เราก็กรอก Name หรือชื่อของประเภทข้อมูลนี้ ส่วน Connection เราสามารถแยกได้ด้วยครับว่าจะให้เก็บข้อมูลประเภทนี้ลงฐานข้อมูลอะไร นึกภาพว่าเราสามารถเลือกบางก้อนลง Mongo ส่วนอีกก้อนไปลงเป็น MySQL / MariaDB ผ่านการตั้งค่าตรงนี้ได้ด้วย ซึ่งนับว่าง่าย และ สะดวกมากเลยครับผม
ให้ทำการทดลองสร้าง และ เพิ่มข้อมูลดูครับ
อ้าวแล้วเราจะเรียกใช้งาน API ยังไงกันล่ะ?
เราต้องทำการเปิด Public ให้กับ API ที่เราสร้างก่อนครับ ถึงจะสามารถเรียกการใช้งานได้ครับ ไปที่ Roles & Permissions > Public
เลื่อนมาตรง Permissions
ให้ทำการเลือก find เพื่อให้สามารถแสดงข้อมูล และ findone เพื่อเรียกดูข้อมูลเฉพาะตัวที่เราอยากดู
5. ทดลองเรียกใช้งาน API ผ่าน url ประมาณนี้ (projects คือชื่อที่ผมใส่ไว้ตอนสร้าง Content Type ครับ)
ที่เหลือก็ขอให้สนุกกับมันดูครับ ~
มันมีหลายอย่างที่น่าเล่นมาก ทั้งการที่เราสามารถผูก Relation ในแต่ละ Content Type ได้อีกด้วย รวมทั้ง API ที่เราได้ออกมานั้นมันไม่ใช่โง่ ๆ น่ะครับ เราสามารถส่ง Filter, Order, Size, Limit และ อีกมากมาย โดยไม่ต้องเสียเหงื่อ ออกแรงเหนื่อยเขียนเองด้วย
สรุป
ถ้าคุณ….
- ไม่อยากเสียเวลาในการต้องมาเขียน API เอง …จัดเลย
- ไม่อยากเขียนระบบจัดการ Content เอง เน้นเร็ว และ ทำงานได้ …จัดเลย
- อยากโฟกัสในการสร้างแค่ส่วนการแสดงผล (Web / Mobile) …จัดเลย
แต่ก็นั้นละครับ มันไม่ได้เกิดมาให้ทำอะไรได้ซับซ้อน ดังนั้นผมแนะนำให้คุณลองมาเล่นดูก่อนว่าถ้าหยิบเอามาใช้มันจะตอบโจทย์ของเราแค่ไหน