115 lines
8.4 KiB
Markdown
115 lines
8.4 KiB
Markdown
# เวปประกาศข่าว (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 เขียนง่าย ทำ Frontend และ Backend (API) ได้ในตัวเดียว
|
|
- [TailWindCSS](https://tailwindcss.com/) ติดตั้งด้วย [svelte-add](https://github.com/svelte-add/tailwindcss)
|
|
- [Daisy UI ](https://daisyui.com/) UI Component ที่ใช้ TailWindCSS ใช้ได้ไม่จำกัด Framework มีวิธีการใช้ดูใน[ลิงค์นี้](https://github.com/schooltechx/youtube/blob/main/svelte/component/DaisyUI.md)
|
|
- [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)
|
|
- [FullCalendar](https://github.com/schooltechx/youtube/blob/main/svelte/component/Calendar/FullCalendar.md) รองรับพ.ศ. ใช้แค่ฟีเจอร์[ฟรีก็น่าจะพอ](https://fullcalendar.io/license#:~:text=or%20FullCalendar%20Premium.-,FullCalendar%20Standard,all%20copyright%20headers%20are%20preserved.)
|
|
- [Day.js](https://day.js.org/) ในฟอร์แม็ตวันในรูปแบบ local ไทยรองรับ พ.ศ.
|
|
- ตรวจสอบเวอร์ชั่นตาม docker tag https://bma-qualifying.frappet.synology.me/api/dev
|
|
## วีดีโอแสดงการทำงานทั้งหมด
|
|
[](https://youtu.be/7CER67WVWec "Automate Development")
|
|
|
|
ในวีดีโอลืมแสดงตัวอย่างการใช้ API
|
|
|
|
## Install
|
|
คำสั่งสำหรับเริ่มต้นสร้างโปรเจ็กเปล่าๆ จนใช้งาน
|
|
``` bash
|
|
# สร้างโปรเจ็ก 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
|
|
คำสั่งที่ใช้รันโปรเจ็ก
|
|
``` 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/)
|
|
สร้าง Mockup API โค้ดอยู่ใน [src/routes/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/](https://bma-qualifying.frappet.synology.me/) ให้เปลี่ยน base url ให้เหมาะสม
|
|
|
|
การกำหนด path ของ API และ Data Type ที่ใช้ดูในไฟล์ [CMSDataType.ts](./src/lib/data/CMSDataType.ts)
|
|
|
|
|
|
## 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 จะแสดงการ
|
|
- เอาโค้ดมาจาก github
|
|
- สร้าง Docker Image แล้ว Push ขึ้น Registry (docker.frappet.com)
|
|
- ssh ไปที่ (192.168.1.9) เพื่อ pull image ตัวใหม่มาใช้
|
|
ถ้าจะรันบนเครื่องของเราเอง(local) ให้ติดตั้ง act
|
|
|
|
``` bash
|
|
# Install act (Windows)
|
|
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)
|