hrms-exam/cms

เวปประกาศข่าว (CMS TOR 6.6.4)

การพัฒนาแบบที่เป็นอยู่ Vue(SPA)+dotnet(Web API) ของบริษัทไม่ได้รองรับ SEO เท่าใดนัก จำเป็นต้องใช้ Meta Framework ที่รองรับ SSR เช่น Nuxt.js เนื่องจากไม่ขึ้นกับส่วนอื่นมากนัก จะทดลองใช้เทคโนโลยีแบบใหม่ๆในการพัฒนา ที่ง่ายในการพัฒนากว่าเดิมจะ SvelteKit เป็นฐาน Daisy UI และ Daisy UI สำหรับการทำ Frontend และจะนำเครื่องมือในการ Automate ต่างๆมาร่วมด้วย

• Sveltekit Meta JS Framework รองรับ SSR เขียนง่าย ทำ Frontend และ Backend (API) ได้ในตัวเดียว
• TailWindCSS ติดตั้งด้วย svelte-add
• Daisy UI UI Component ที่ใช้ TailWindCSS ใช้ได้ไม่จำกัด Framework มีวิธีการใช้ดูในลิงค์นี้
• PWA ทำให้ Web App เหมือนแอปมือถือ
• Playwright เขียนโค้ดทำการทดสอบเวปแอปบน Browser
• Vitest ทำ Unit test สำหรับ Vite
• GitHub Actions ทำ CI/CD ในระบบทดสอบ
• nektos/act ใช้ GitHub Actions บนเครื่องของเราเอง
• Argo CD deploy ขึ้นระบบ Production (K8s)
• FullCalendar รองรับพ.ศ. ใช้แค่ฟีเจอร์ฟรีก็น่าจะพอ
• Day.js ในฟอร์แม็ตวันในรูปแบบ local ไทยรองรับ พ.ศ.
• ตรวจสอบเวอร์ชั่นตาม docker tag https://bma-qualifying.frappet.synology.me/api/dev

วีดีโอแสดงการทำงานทั้งหมด

ในวีดีโอลืมแสดงตัวอย่างการใช้ API

Install

คำสั่งสำหรับเริ่มต้นสร้างโปรเจ็กเปล่าๆ จนใช้งาน

# สร้างโปรเจ็ก SvelteKit เลือก Skeleton project,Typescript แล้ว ติดตั้งทั้งหมด
npm create svelte@latest cms-recruit
cd cms-recruit
npm install
# ติดตั้ง Tailwindcss พร้อมเซ็ตค่าให้เรียบร้อย
npx svelte-add@latest tailwindcss
# เมื่อติดตั้ง daisyui ให้ดูวิธีการตั้งค่าเพิ่มจากในเวป 
npm i daisyui
# ใช้สำหรับทำเป็น Node.js ทำ Docker Image
npm i -D @sveltejs/adapter-node
# 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

คำสั่งที่ใช้รันโปรเจ็ก

npm run dev -- --port=4000 --host=0.0.0.0
npm run build
npm run preview -- --port=4000 --host=0.0.0.0
# หรือ
npx vite --port=4000 --host=0.0.0.0
npm vite build
npx vite preview  --port=4000 --host=0.0.0.0 

โครงสร้างโค้ด

• หน้าเวปอยู่ใน src/routes/ โครงหน้าหลัก +layout.svelte,หน้าต่างๆ +page.svelte
• library/component ที่ใช้ร่วมกัน src/lib/ สร้าง Mockup 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/ ให้เปลี่ยน base url ให้เหมาะสม

การกำหนด path ของ API และ Data Type ที่ใช้ดูในไฟล์ CMSDataType.ts

Browser Testing

ใช้ Playwright มีคอนฟิกไฟล์ playwright.config.ts โค้ดสำหรับการทดสอบจะอยู่ใน โฟลเดอร์ tests ใน VS Code จะติดตั้ง Playwright Extension รูปเป็นเหมือนโหลรูปชมพู่สำหรับทดลองวิทยาศาสตร์ ให้กดปุ่มเล่นเพื่อทำการทดสอบ

# ติดตั้ง embeded broser ของ playwright
npx playwright install chromium
# รันเทสที่อยู่ในโฟลเดอร์ tests
npm run test

ดูเพิ่มเติมได้ที่

• การทำ Browser Automation ด้วย Playwright

Unit Testing

ใช้ Vitest ทำ Unit test คอนฟิกจะอยู่ที่ vite.config.ts แนะนำให้ใส่ไว้ใน lib ในรูปแบบ src/lib/*.test.ts แนะนำให้เขียนโค้ดใน

npm run test:unit

CI Github Action

ให้ดูโค้ดที่ ../.github/workflow จะแสดงการ

• เอาโค้ดมาจาก github
• สร้าง Docker Image แล้ว Push ขึ้น Registry (docker.frappet.com)
• ssh ไปที่ (192.168.1.9) เพื่อ pull image ตัวใหม่มาใช้ ถ้าจะรันบนเครื่องของเราเอง(local) ให้ติดตั้ง act

# Install act (Windows)
winget install nektos.act
# Install act (macOS/Linux)
brew install act

• ตัวอย่างการใช้งานกับ .NET

CD Argo CD

TODO ยังไม่ได้ทำสำหรับโปรเจ็กนี้ แต่ก็ดูวิธีทำจาก ตัวอย่างการทำ CD ด้วย Argo CD ก่อนได้ครับ

PWA

ใน app.html จะเรียกใช้ manifest.json ไฟล์ service-worker.ts จะถูก SvelteKit นำไปทำเป็น Service Worker ให้

• ตอนนี้ใช้แบบง่ายตามนี้