diff --git a/cms/README.md b/cms/README.md index 4314ce4..82ac946 100644 --- a/cms/README.md +++ b/cms/README.md @@ -1,9 +1,7 @@ # เวปประกาศข่าว (CMS TOR 6.6.4) การพัฒนาแบบที่เป็นอยู่ Vue(SPA)+dotnet(Web API) ของบริษัทไม่ได้รองรับ SEO เท่าใดนัก จำเป็นต้องใช้ Meta Framework ที่รองรับ SSR เช่น Nuxt.js เนื่องจากไม่ขึ้นกับส่วนอื่นมากนัก จะทดลองใช้เทคโนโลยีแบบใหม่ๆในการพัฒนา ที่ง่ายในการพัฒนากว่าเดิมจะ SvelteKit เป็นฐาน Daisy UI และ Daisy UI สำหรับการทำ Frontend และจะนำเครื่องมือในการ Automate ต่างๆมาร่วมด้วย -- [Sveltekit](https://www.youtube.com/watch?v=uEJ-Rnm2yOE) Meta JS Framework รองรับ SSR เขียนง่าย +- [Sveltekit](https://www.youtube.com/watch?v=uEJ-Rnm2yOE) Meta JS Framework รองรับ SSR เขียนง่าย ทำ Frontend และ Backend (API) ได้ในตัวเดียว - [TailWindCSS](https://tailwindcss.com/) ติดตั้งด้วย [svelte-add](https://github.com/svelte-add/tailwindcss) -- [marked](https://marked.js.org/) รองรับ Markdown สำหรับเนื้อหาที่ซับซ้อน -- - [Daisy UI ](https://daisyui.com/) UI Component ที่ใช้ TailWindCSS ใช้ได้ไม่จำกัด Framework มีวิธีการใช้ดูใน[ลิงค์นี้](https://github.com/schooltechx/youtube/blob/main/svelte/component/DaisyUI.md) - [PWA](https://web.dev/progressive-web-apps/) ทำให้ Web App เหมือนแอปมือถือ - [Playwright](https://playwright.dev/) เขียนโค้ดทำการทดสอบเวปแอปบน Browser @@ -11,7 +9,8 @@ - [GitHub Actions](https://github.com/features/actions) ทำ CI/CD ในระบบทดสอบ - [nektos/act](https://github.com/nektos/act) ใช้ GitHub Actions บนเครื่องของเราเอง - [Argo CD](https://argo-cd.readthedocs.io/en/stable/) deploy ขึ้นระบบ Production (K8s) -- [FullCalendar](https://github.com/schooltechx/youtube/blob/main/svelte/component/FullCalendar.md) รองรับพ.ศ. ใช้แค่ฟีเจอร์[ฟรีก็น่าจะพอ](https://fullcalendar.io/license#:~:text=or%20FullCalendar%20Premium.-,FullCalendar%20Standard,all%20copyright%20headers%20are%20preserved.) +- [FullCalendar](https://github.com/schooltechx/youtube/blob/main/svelte/component/FullCalendar.md) รองรับพ.ศ. ใช้แค่ฟีเจอร์[ฟรีก็น่าจะพอ](https://fullcalendar.io/license#:~:text=or%20FullCalendar%20Premium.-,FullCalendar%20Standard,all%20copyright%20headers%20are%20preserved.) +- [Day.js](https://day.js.org/) ในฟอร์แม็ตวันในรูปแบบ local ไทยรองรับ พ.ศ. ## วีดีโอแสดงการทำงานทั้งหมด [](https://youtu.be/7CER67WVWec "Automate Development") @@ -21,26 +20,27 @@ ## Install คำสั่งสำหรับเริ่มต้นสร้างโปรเจ็กเปล่าๆ จนใช้งาน ``` bash -# เลือก Skeleton project,Typescript แล้ว ติดตั้งทั้งหมด +# สร้างโปรเจ็ก SvelteKit เลือก Skeleton project,Typescript แล้ว ติดตั้งทั้งหมด npm create svelte@latest cms-recruit cd cms-recruit npm install -# ติดตั้ง Mdsvex -npm i --save-dev mdsvex # ติดตั้ง Tailwindcss พร้อมเซ็ตค่าให้เรียบร้อย npx svelte-add@latest tailwindcss # เมื่อติดตั้ง daisyui ให้ดูวิธีการตั้งค่าเพิ่มจากในเวป npm i daisyui # ใช้สำหรับทำเป็น Node.js ทำ Docker Image npm i -D @sveltejs/adapter-node -# Keycloak สำหรับ frontend และ backend -npm i -D keycloak-js keycloak-backend +# Day.js +npm i dayjs +# FullCalendar +npm i @fullcalendar/core +npm i @fullcalendar/daygrid +npm i @fullcalendar/interaction # ช่วยทำ seo ให้ง่ายขึ้น npm install -D svelte-seo ``` - ## Sveltekit -คำสั่งที่ใช้ +คำสั่งที่ใช้รันโปรเจ็ก ``` bash npm run dev -- --port=4000 --host=0.0.0.0 npm run build @@ -53,9 +53,25 @@ npx vite preview --port=4000 --host=0.0.0.0 โครงสร้างโค้ด - หน้าเวปอยู่ใน [src/routes/](src/routes/) โครงหน้าหลัก +layout.svelte,หน้าต่างๆ +page.svelte - library/component ที่ใช้ร่วมกัน [src/lib/](src/lib/) -ตัวอย่างการใช้ API โค้ดอยู่ใน [src/routes/api/users](./src/routes/api/users/) -- http://localhost:4000/api/users -- http://localhost:4000/api/users/1 +สร้าง Mockup API โค้ดอยู่ใน [src/routes/api/](./src/routes/api/) +เพื่อความเรียบง่ายสไตล์ CMS การดึงค่าจะเรียงจากใหม่ไปเก่าเสมอ มี limit เพื่อลดปริมาณข้อมูล ถ้าไม่มี limit ดึงข้อมูลล่าสุดไปจนถึง Today+12month + +ตัวอย่าง endpoint มีดังนี้ +- http://localhost:4000/api/dev +- http://localhost:4000/api/info +- http://localhost:4000/api/content?page=home +- http://localhost:4000/api/content?page=about +- http://localhost:4000/api/competitive +- http://localhost:4000/api/competitive?limit=3 +- http://localhost:4000/api/competitive/19 +- http://localhost:4000/api/qualifying +- http://localhost:4000/api/qualifying?limit=3 +- http://localhost:4000/api/qualifying/21 + +ถ้าไม่ build เอง ตอนนี้มี demo อยู่ที่ [https://bma-qualifying.frappet.synology.me/](https://bma-qualifying.frappet.synology.me/) ให้เปลี่ยน base url ให้เหมาะสม + +Data Type ที่ใช้ดูในไฟล์ [CMSDataType.ts](./src/lib/data/CMSDataType.ts) + ## Browser Testing ใช้ Playwright มีคอนฟิกไฟล์ [playwright.config.ts](./playwright.config.ts) โค้ดสำหรับการทดสอบจะอยู่ใน โฟลเดอร์ [tests](./tests/) ใน VS Code จะติดตั้ง Playwright Extension รูปเป็นเหมือนโหลรูปชมพู่สำหรับทดลองวิทยาศาสตร์ ให้กดปุ่มเล่นเพื่อทำการทดสอบ diff --git a/cms/src/lib/data/CMSDataType.ts b/cms/src/lib/data/CMSDataType.ts index 2ae720b..e52861f 100644 --- a/cms/src/lib/data/CMSDataType.ts +++ b/cms/src/lib/data/CMSDataType.ts @@ -1,14 +1,18 @@ export interface Exam { id:string; title:string; - date:string; - start?:Date|string; - end?:Date|string; - exam_date?:Date|string; - announcement_date?:Date|string; + detail?:string; + date?:string; + start?:string; + end?:string; + exam_date?:string; + announcement_date?:string; category_id?:string category?:string - img?:string; + image?:string; + images?:{title:string,url:string}[]; + files?:{title:string,url:string}[]; + } export interface CalendarEvent { id:string; diff --git a/cms/src/lib/data/competitive-exam.json b/cms/src/lib/data/competitive-exam.json index bea42db..ec15d74 100644 --- a/cms/src/lib/data/competitive-exam.json +++ b/cms/src/lib/data/competitive-exam.json @@ -1,15 +1,13 @@ [ { "id":"20", - "date":"24 เม.ย. 2566 ", "start":"2023-04-24", "detail":"
ประกาศรายชื่อผู้ผ่านภาค ข. และมีสิทธิสอบภาค ค. ในการคัดเลือกคนพิการ ครั้งที่ 1/2565
