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 เขียนง่าย
• TailWindCSS ติดตั้งด้วย svelte-add
• marked รองรับ Markdown สำหรับเนื้อหาที่ซับซ้อน
• 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 รองรับพ.ศ. ใช้แค่ฟีเจอร์ฟรีก็น่าจะพอ

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

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

Install

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

# เลือก 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
# ช่วยทำ 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/ ตัวอย่างการใช้ API โค้ดอยู่ใน src/routes/api/users
• http://localhost:4000/api/users
• http://localhost:4000/api/users/1

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 ให้

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