จากบทความก่อนหน้าที่ทำให้พวกเราได้รู้จักกันกับ Headless CMS และ JAM Stack กันไปแล้ว วันนี้ผมจะมาแชร์ในสิ่งที่เราได้ทดลองทำกันในช่วงที่ผ่านมาครับ โดยวันนี้พวกเราจะมาทำความรู้จักกันกับ Strapi ให้มากยิ่งขึ้นกว่าเดิม

Strapi คืออะไรกัน?

มันคือเครื่องมือในการสร้าง API นั่นเอง ใช่แล้วครับ มันคือการที่เราสามารถสร้าง API ขึ้นมาโดยไม่ต้องเขียนโค๊ดซักบรรทัด ย้ำ! ซักบรรทัด ผ่านการจัดการในหน้าของ Dashboard ที่สวยงามนั่นเองครับ

จุดเด่นที่ขายได้

https://strapi.io/

• 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

1. ติดตั้ง 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 ครับ)

localhost:1337/projects

ที่เหลือก็ขอให้สนุกกับมันดูครับ ~

มันมีหลายอย่างที่น่าเล่นมาก ทั้งการที่เราสามารถผูก Relation ในแต่ละ Content Type ได้อีกด้วย รวมทั้ง API ที่เราได้ออกมานั้นมันไม่ใช่โง่ ๆ น่ะครับ เราสามารถส่ง Filter, Order, Size, Limit และ อีกมากมาย โดยไม่ต้องเสียเหงื่อ ออกแรงเหนื่อยเขียนเองด้วย

สรุป

ถ้าคุณ….

1. ไม่อยากเสียเวลาในการต้องมาเขียน API เอง …จัดเลย
2. ไม่อยากเขียนระบบจัดการ Content เอง เน้นเร็ว และ ทำงานได้ …จัดเลย
3. อยากโฟกัสในการสร้างแค่ส่วนการแสดงผล (Web / Mobile) …จัดเลย

แต่ก็นั้นละครับ มันไม่ได้เกิดมาให้ทำอะไรได้ซับซ้อน ดังนั้นผมแนะนำให้คุณลองมาเล่นดูก่อนว่าถ้าหยิบเอามาใช้มันจะตอบโจทย์ของเราแค่ไหน