Update structure and clean data
This commit is contained in:
parent
466ecf5981
commit
3edde43c25
7 changed files with 33 additions and 20 deletions
|
|
@ -1,7 +1,9 @@
|
|||
# เวปประกาศข่าว (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](https://www.youtube.com/watch?v=uEJ-Rnm2yOE) Meta JS Framework รองรับ SSR เขียนง่าย
|
||||
- [TailWindCSS]() ติดตั้งด้วย [svelte-add](https://github.com/svelte-add/tailwindcss)
|
||||
- [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
|
||||
- [PWA](https://web.dev/progressive-web-apps/) ทำให้ Web App เหมือนแอปมือถือ
|
||||
- [Playwright](https://playwright.dev/) เขียนโค้ดทำการทดสอบเวปแอปบน Browser
|
||||
|
|
@ -9,7 +11,7 @@
|
|||
- [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
|
||||
- [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.)
|
||||
|
||||
## วีดีโอแสดงการทำงานทั้งหมด
|
||||
[](https://youtu.be/7CER67WVWec "Automate Development")
|
||||
|
|
@ -23,6 +25,8 @@
|
|||
npm create svelte@latest cms-recruit
|
||||
cd cms-recruit
|
||||
npm install
|
||||
# ติดตั้ง Mdsvex
|
||||
npm i --save-dev mdsvex
|
||||
# ติดตั้ง Tailwindcss พร้อมเซ็ตค่าให้เรียบร้อย
|
||||
npx svelte-add@latest tailwindcss
|
||||
# เมื่อติดตั้ง daisyui ให้ดูวิธีการตั้งค่าเพิ่มจากในเวป
|
||||
|
|
@ -83,21 +87,13 @@ winget install nektos.act
|
|||
# Install act (macOS/Linux)
|
||||
brew install act
|
||||
```
|
||||
|
||||
- [ตัวอย่างการใช้งานกับ .NET](https://youtu.be/k1w_cCzCd0o)
|
||||
|
||||
# CD Argo CD
|
||||
TODO ยังไม่ได้ทำสำหรับโปรเจ็กนี้ แต่ก็ดูวิธีทำจาก
|
||||
[ตัวอย่างการทำ CD ด้วย Argo CD](https://youtu.be/c7sSQLuhht0) ก่อนได้ครับ
|
||||
|
||||
|
||||
## 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)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue