hrms-exam/cms

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

การพัฒนาแบบที่เป็นอยู่ 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
• Daisy UI
• PWA ทำให้ Web App เหมือนแอปมือถือ
• Playwright เขียนโค้ดทำการทดสอบเวปแอปบน Browser
• Vitest ทำ Unit test สำหรับ Vite
• GitHub Actions ทำ CI/CD ในระบบทดสอบ
• nektos/act ใช้ GitHub Actions บนเครื่องของเราเอง
• Argo CD deploy ขึ้นระบบ Production (K8s)
• Keycloak ใช้สำหรับทำระบบ Login

Install

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

# เลือก 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
# 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

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

ให้ดูโค้ดที่ ../.github/workflow

• ตัวอย่างการใช้งานในบริษัท

CD Argo CD

TODO

Note

PWA

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

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

Keycloak

ยังไม่แน่ใจว่าการ Authen จำเป็นสำหรับ CMS หรือเปล่า เพราะใช้แค่แสดงข้อมูล อาจจะใช้หน้า Frontend ของ eHR ในการใส่ข้อมูลทั้งหมดก็น่าจะดีกว่า ตอนนี้ใช้ Repository pattern ไปก่อน

• Frontend ใช้ Keycloak JS
• API จะไม่ใช้ keycloak-connect เพราะมันรองรับเฉพาะ Express จะใช้ keycloak-backend หรือตัวอื่นๆแทน
• ควรใช้การก็อปปี้ public key มาเก็บไว้ แทนการ verify token แบบ online จะเร็วกว่า How to verify a JWT token in JavaScript and Node.js?