Init project

cms/README.md

@@ -0,0 +1,85 @@
+# เวปประกาศข่าว (CMS)
+การพัฒนาแบบที่เป็นอยู่ 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 เขียนง่าย 
+- [TailWindCSS]() ติดตั้งด้วย [svelte-add](https://github.com/svelte-add/tailwindcss)
+- [Daisy UI ](https://daisyui.com/)
+- [PWA](https://web.dev/progressive-web-apps/) ทำให้ Web App เหมือนแอปมือถือ
+- [Playwright](https://playwright.dev/) เขียนโค้ดทำการทดสอบเวปแอปบน Browser 
+- [Vitest](https://vitest.dev/) ทำ Unit test สำหรับ Vite 
+- [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)
+- [Keycloak](https://www.keycloak.org/) ใช้สำหรับทำระบบ Login
+
+## Install 
+คำสั่งสำหรับเริ่มต้นสร้างโปรเจ็กเปล่าๆ จนใช้งาน
+``` bash
+# เลือก 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
+คำสั่งที่ใช้
+```  bash
+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/](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
+
+## Browser Testing 
+ใช้ Playwright มีคอนฟิกไฟล์ [playwright.config.ts](./playwright.config.ts) โค้ดสำหรับการทดสอบจะอยู่ใน โฟลเดอร์ [tests](./tests/) ใน VS Code จะติดตั้ง Playwright Extension รูปเป็นเหมือนโหลรูปชมพู่สำหรับทดลองวิทยาศาสตร์ ให้กดปุ่มเล่นเพื่อทำการทดสอบ
+```bash
+# ติดตั้ง embeded broser ของ playwright
+npx playwright install chromium
+# รันเทสที่อยู่ในโฟลเดอร์ tests
+npm run test
+```
+### ดูเพิ่มเติมได้ที่
+- [การทำ Browser Automation ด้วย Playwright](https://www.youtube.com/watch?v=Bc6dz4hs_r0)
+
+## Unit Testing 
+ใช้ Vitest ทำ [Unit test](https://www.youtube.com/watch?v=5bQD3dCoyHA) คอนฟิกจะอยู่ที่ [vite.config.ts](./vite.config.ts) แนะนำให้ใส่ไว้ใน lib ในรูปแบบ src/lib/*.test.ts
+แนะนำให้เขียนโค้ดใน 
+``` bash
+npm run test:unit
+```
+# CI Github Action
+ให้ดูโค้ดที่ ../.github/workflow
+- [ตัวอย่างการใช้งานในบริษัท](https://youtu.be/k1w_cCzCd0o)
+
+# CD Argo CD
+TODO
+
+# Note
+## PWA
+ใน [app.html](./src/app.html) จะเรียกใช้ [manifest.json](./src/static/manifest.json) 
+ไฟล์ [service-worker.ts](./src/service-worker.ts) จะถูก SvelteKit นำไปทำเป็น Service Worker ให้
+- [ตอนนี้ใช้แบบง่ายตามนี้](https://thecodingchannel.hashnode.dev/turn-your-sveltekit-app-into-a-pwa-in-3-simple-steps)
+
+# Keycloak
+ยังไม่แน่ใจว่าการ Authen จำเป็นสำหรับ CMS หรือเปล่า เพราะใช้แค่แสดงข้อมูล อาจจะใช้หน้า Frontend ของ eHR ในการใส่ข้อมูลทั้งหมดก็น่าจะดีกว่า ตอนนี้ใช้ Repository pattern ไปก่อน
+- Frontend ใช้ [Keycloak JS](https://www.npmjs.com/package/keycloak-js)
+- API จะไม่ใช้ keycloak-connect เพราะมันรองรับเฉพาะ Express จะใช้ [keycloak-backend](https://www.npmjs.com/package/keycloak-backend) หรือตัวอื่นๆแทน
+- ควรใช้การก็อปปี้ public key มาเก็บไว้ แทนการ verify token แบบ online จะเร็วกว่า [How to verify a JWT token in JavaScript and Node.js?](https://www.youtube.com/watch?v=gm2PBHyjQmM)