Headless CMS + Flask

Make CRUD API in easy way (ขึ้น production อย่างรวดเร็ว)

ใน 2 สัปดาห์แรกของค่าย SuperAi Engineer ทำให้เราได้เห็นช่องว่างบางอย่างเกิดขึ้นในค่าย AI ทุกคนที่มาค่ายล้วนเป็นผู้ที่มีประสบการณ์ด้าน AI ทั้งสิ้น บ้างก็อยู่ในด้าน Data Science บ้างก็อยู่ในสาย Deep Learning ในหลากหลายแวดวง ธุรกิจและการศึกษา แต่ผมเป็นส่วนน้อยที่มีความรู้ด้าน AI น้อยมากเพราะเพิ่งเริ่มต้นสนใจและทำอยู่ในสาย Fullstack Wep Application และได้ผ่านเข้ามาในค่ายนี้

ช่องว่างที่ว่าคือ การที่ทุกคนโฟกัสกับการ การทำ data cleansing, data analysis features extraction , deep leaning , machine learning ซึ่เป็นจุดประสงค์ของค่ายนี้ แต่ผมจะรู้สึกไม่สบายใจถ้ามันเป็นแค่การวัด accuracy score ใน matric ต่างๆ มันต้อง POC ได้และมีแนวโน้มว่าจะทำเป็น Product ได้จริงๆ

งานที่ผมถนัดคือ Wep app ดังนั้นกาวที่จะเชื่อมระหว่าง นักพัฒนาด้าน ML กับ Front-End App คือ มี Back-End ดีๆสักตัวที่ใช้งานง่ายแบบ code less กด กด กด แล้วก็ กด ได้ API มาใช้งานบันทึกข้อมูลลง Database แบบไหนก็ได้ สิ่งนั้นก็คือ Headless CMS

Headless CMS เป็น trends ในการทำเว็บ content สมัยใหม่ ที่ทุกอย่างล้วนเป็น API ถ้าให้เทียบวิวัฒนาการง่ายๆ ให้นึกถึง Wordpress (view หน้าเว็บ + หน้า Admin จัดการ + Database) มันทำงานได้ดีแต่ไม่ยืดหยุ่นหากเรา อยากจะใช้ front-end เป็นอย่างอื่นเช่น เว็บ (Vuejs, Reactjs, Angularjs) แอพ (android ,ios) วินโดว์แอพ เป็นต้น Headless CMS คือ ตัดส่วนหัวออกที่เป็น front-end ในปัจจุบันมีหลากหลายโปรเจ็คที่ทั้งมีค่าใช้จ่าย และ ฟรี โอเพ่นซอส แต่อาจจะมีข้อจำกัดบ้าง เช่น Contentful, Storyblok, Sanity, Forestry, DatoCMS, Prismic, NetlifyCMS, Strapi, Headless WordPress, TinaCMS, Final Words

Headless CMS — Top Content Management Systems | Jamstack

หนึ่งในตัวที่น่าสนใจคือ Strapi ที่ผมจะเลือกมาใช้งานด้วยเป็น Opensource และมีหน้าจัดการ content ที่ง่ายและต่อกับ database ได้หลากหลายไม่ว่าจะเป็น Nosql หรือ RDBS

ดูได้จาก คลิปนี้

วิธีการติดตั้งไม่ยาก เพียงแค่ใช้ Docker Compose ในการติดตั้งใช้งานตามนี้

tech stack and flow

pang_stack/docker-compose.yml at main · NattakornS/pang_stack (github.com)

และเมื่อขึ้น compose ได้ทุกอย่างจะถูก generate เป็น code ตาม collection ที่เรากดสร้างเพื่อเก็บข้อมูล โดยเราสามารถออกแบบชนิดของข้อมูลที่จะเก็บได้ เพียงกดสร้าง strapi จะไปสร้าง DB table ให้อัตโนมัติเลย

ตัวอย่างการสร้าง collection

ชนิดของ fields ที่สามารถเพิ่มได้

การเพิ่มข้อมูลลง collection

หน้าตารางข้อมูล

ยกตัวอย่างเมื่อสร้าง collections ชื่อ demographic ระบบจะสร้าง api endpoint ชื่อ /demographic มาให้พร้อม folder ให้เราไป override code ได้

api/demographic/
├── config
│ └── routes.json
├── controllers
│ └── demographic.js
├── models
│ ├── demographic.js
│ └── demographic.settings.json
└── services
 └── demographic.js

จาก structure ด้านบน สามารถเข้าไปเพิ่ม endpoint และชี้มายัง function ใน controllers ได้

จากนั้น เราสามารถจัดการให้สิทธิ์การเข้าถึง API ผ่านหน้า admin ได้เลยโดยเข้าไปยัง setting → user persmission

การกำหนดสิทธิ์ API จะผูกับ Roles ซึ่งเริ่มต้นจะมี Authenticate และ public โดยเราสามารถสร้างได้ไม่จำกัด

การกำหนดสิทธิ์การใช้งานสำหรับการเข้าถึง API แต่ละ End-Point

เมื่อเราต้องการนำ strapi ไปใช้ในงาน

ใน code ที่เขียนด้วย python สามารถเรียกใช้งาน ajax call ผ่าน library requests ได้เลยไปที่ Strapi เพื่อบันทึกข้อมูล หรือเรียกใช้ข้อมูล ตาม collection ที่เราสร้าง

requests.post(url, params=None, data=json.dumps(data), headers=headers)

ในโฟลเดอร์ ml-api ผมได้เขียนเป็น flask api เพื่อใช้หากมีการเรียกโดยตรงมายัง code python ที่เราเขียนเพื่อเรียกใช้ model ที่เทรนมาแล้ว หรือทำการ preprocess data เพราะ python library ในด้าน data science, image processing มีเยอะมาก

Github link: NattakornS/pang_stack: easy cms stack use python flask and strapi (github.com)