Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon การใช้ Laravel Filament ในส่วนหน้า


การใช้ Laravel Filament ในส่วนหน้า


Filament ได้รับการออกแบบมาเป็นชุดเครื่องมือแผงผู้ดูแลระบบสำหรับ Laravel เป็นหลัก แต่ยังสามารถใช้เพื่อสร้างส่วนหน้าที่ผู้ใช้เผชิญได้ในบางกรณี นี่คือประเด็นสำคัญ:

- Filament มีชุดเครื่องมือและส่วนประกอบที่ทำให้ง่ายต่อการสร้างแผงผู้ดูแลระบบและอินเทอร์เฟซ CRUD สำหรับแอป Laravel[1][2] มันอยู่ด้านบนของ Laravel และ Livewire

- รูปแบบสถาปัตยกรรม "แบ็คเอนด์เป็นส่วนหน้า" เกี่ยวข้องกับการใช้แดชบอร์ดของผู้ดูแลระบบเป็นอินเทอร์เฟซผู้ใช้หลักสำหรับแอปทั้งหมด โดยผสมผสานพื้นที่ของผู้ดูแลระบบและผู้ใช้เข้าด้วยกัน[2] สิ่งนี้สามารถทำงานได้ดีสำหรับแอปที่ขั้นตอนของผู้ดูแลระบบและผู้ใช้คล้ายกันมาก

- นักพัฒนาบางรายใช้ Filament เพื่อสร้างทั้งแบ็กเอนด์ของผู้ดูแลระบบและส่วนหน้าของแอป Laravel โดยตั้งค่าเส้นทางแยกต่างหากสำหรับพื้นที่ผู้ดูแลระบบ (เช่น /admin) และอินเทอร์เฟซผู้ใช้หลัก (เช่น /)[3] ซึ่งช่วยให้สามารถใช้ประโยชน์จากคุณสมบัติของ Filament สำหรับทั้งสองส่วนได้

- ปลั๊กอินการนำทางของ Filament สามารถใช้เพื่อสร้างเมนูการนำทางส่วนหน้าส่วนกลางที่สามารถแชร์ในมุมมอง Blade[4] สิ่งนี้แสดงให้เห็นว่าส่วนประกอบ Filament สามารถใช้กับส่วนหน้าได้อย่างไร

- อย่างไรก็ตาม Filament ไม่สามารถทดแทน Frontend Framework เต็มรูปแบบได้ในทุกกรณี ใช้งานได้ดีที่สุดสำหรับแอปที่ประสบการณ์ผู้ดูแลระบบและผู้ใช้สอดคล้องกันอย่างใกล้ชิด สำหรับแอปที่ต้องเผชิญกับผู้ใช้ที่ซับซ้อนมากขึ้น ส่วนหน้าแยกต่างหากที่สร้างด้วยเฟรมเวิร์ก เช่น Vue.js อาจยังดีกว่า[2]

โดยสรุป แม้ว่า Filament จะเป็นชุดเครื่องมือแผงการดูแลระบบเป็นหลัก แต่ก็สามารถใช้เพื่อสร้างส่วนหน้าของผู้ใช้ได้ในบางสถานการณ์ที่ขั้นตอนการดูแลระบบและผู้ใช้มีความคล้ายคลึงกันมาก แต่ก็มีข้อจำกัดเมื่อเทียบกับเฟรมเวิร์กส่วนหน้าเฉพาะสำหรับแอปที่ต้องเผชิญกับผู้ใช้ที่ซับซ้อนกว่า

การอ้างอิง:
[1] https://www.reddit.com/r/laravel/comments/185rwo1/how_many_of_you_are_using_filament/
[2] https://dev.to/voltra/back-end-as-a-front-end-or-how-admin-dashboards-can-drive-your-apps-57
[3] https://github.com/filamentphp/filament/discussions/9620
[4] https://v2.filamentphp.com/tricks/build-a-global-frontend-navigation-with-the-navigation-plugin
[5] https://filamentexamples.com/project/cms-blog-front-theme