📱
Thiết bị Đầu cuối / Client Layer
Client / Device Layer
클라이언트 / 기기 레이어
Enact + .IPK
Kiosk App × 2
1080×1920px · Portrait
LG webOS · Enact Framework
K-01 Màn hình Thực đơnMenu Screen메뉴 화면
K-02 Màn hình Bình chọnVoting Screen투표 화면
K-03 Xếp hạng LIVELive Ranking실시간 순위
K-04 Hoàn tất Bình chọnThank You투표 완료
K-05 Màn hình ChờIdle Screen대기 화면
Spotlight — Điều hướng cảm ứngTouch navigation터치 내비게이션
60s idle tự reset · Touch 80×80px60s idle reset · Touch 80×80px60초 자동 초기화 · 터치 80×80px
Cache thực đơn offlineOffline menu cache오프라인 메뉴 캐시
LG webOS · Enact Framework
K-01 Màn hình Thực đơnMenu Screen메뉴 화면
K-02 Màn hình Bình chọnVoting Screen투표 화면
K-03 Xếp hạng LIVELive Ranking실시간 순위
K-04 Hoàn tất Bình chọnThank You투표 완료
K-05 Màn hình ChờIdle Screen대기 화면
Spotlight — Điều hướng cảm ứngTouch navigation터치 내비게이션
60s idle tự reset · Touch 80×80px60s idle reset · Touch 80×80px60초 자동 초기화 · 터치 80×80px
Cache thực đơn offlineOffline menu cache오프라인 메뉴 캐시
Enact + .IPK
LG TV Signage 55"
1920×1080px · Landscape
LG webOS 4.x / 6.x · Enact Framework
S-01 Left 45% — Danh sách Thực đơnMenu List메뉴 목록
S-01 Right 55% — Xếp hạng LIVELive Ranking실시간 순위
Spotlight — D-pad / Remote Control
Tự động focus theo hướng D-padAuto-focus by D-pad directionD-pad 방향 자동 포커스
Sandstone UI — Component TV-readyTV-ready componentsTV 최적화 컴포넌트
Tối ưu băng thông thấp · Lazy loadLow-bandwidth · Lazy load저대역폭 최적화 · 레이지 로드
.IPK cài ngầm · WS auto-reconnect.IPK silent install · WS auto-reconnect.IPK 자동 설치 · WS 자동 재연결
LG webOS 4.x / 6.x · Enact Framework
S-01 Left 45% — Danh sách Thực đơnMenu List메뉴 목록
S-01 Right 55% — Xếp hạng LIVELive Ranking실시간 순위
Spotlight — D-pad / Remote Control
Tự động focus theo hướng D-padAuto-focus by D-pad directionD-pad 방향 자동 포커스
Sandstone UI — Component TV-readyTV-ready componentsTV 최적화 컴포넌트
Tối ưu băng thông thấp · Lazy loadLow-bandwidth · Lazy load저대역폭 최적화 · 레이지 로드
.IPK cài ngầm · WS auto-reconnect.IPK silent install · WS auto-reconnect.IPK 자동 설치 · WS 자동 재연결
React + Vite
Web Quản trị
Admin Web
관리자 웹
1920×1080px · Browser · Chrome 100+
A-01 Dashboard
A-02 Quản lý Thực đơnMenu Management메뉴 관리
A-03 Quản lý Ảnh Món ănFood Image Upload음식 이미지 관리
A-04 Thống kê & Biểu đồStatistics & Charts통계 및 차트
A-05 Cài đặt Đồng bộ APIAPI Sync SettingsAPI 동기화 설정
A-06 Log & Cảnh báoLogs & Alerts로그 및 알림
JWT Auth · Recharts · CSV / Excel Export
A-01 Dashboard
A-02 Quản lý Thực đơnMenu Management메뉴 관리
A-03 Quản lý Ảnh Món ănFood Image Upload음식 이미지 관리
A-04 Thống kê & Biểu đồStatistics & Charts통계 및 차트
A-05 Cài đặt Đồng bộ APIAPI Sync SettingsAPI 동기화 설정
A-06 Log & Cảnh báoLogs & Alerts로그 및 알림
JWT Auth · Recharts · CSV / Excel Export
REST API / HTTPS
WebSocket (WSS)
SSE / Push Event
🔀
API Gateway / Reverse Proxy
API Gateway / Reverse Proxy Layer
API 게이트웨이 / 리버스 프록시
Nginx / Traefik
Reverse Proxy · SSL/TLS Termination
Load Balancing · Rate Limiting
CORS Whitelist
Load Balancing · Rate Limiting
CORS Whitelist
Socket.io
WebSocket Gateway
Kênh thời gian thựcReal-time channel실시간 채널
Broadcast kết quả bình chọnVote event broadcast투표 이벤트 브로드캐스트
Ranking push <5s · Auto-reconnect
Broadcast kết quả bình chọnVote event broadcast투표 이벤트 브로드캐스트
Ranking push <5s · Auto-reconnect
CDN
CDN / Static Assets
Cache ảnh món ăn · Cloudflare / S3Food image cache · Cloudflare / S3음식 이미지 캐시 · Cloudflare / S3
Nén ảnh · Thân thiện băng thông thấpCompressed · Low-bandwidth friendly압축 전송 · 저대역폭 최적화
Nén ảnh · Thân thiện băng thông thấpCompressed · Low-bandwidth friendly압축 전송 · 저대역폭 최적화
Internal HTTP
Socket.io / WS
⚙️
Tầng Ứng dụng / API — NestJS
Application / API Layer — NestJS
애플리케이션 / API 레이어 — NestJS
NestJS
NestJS API Server
TypeScript · Node.js
REST + WebSocket (Socket.io)
POST /api/vote
GET /api/ranking
CRUD /api/menu
GET /api/stats
POST /api/sync
/api/admin (JWT Guard)
REST + WebSocket (Socket.io)
POST /api/vote
GET /api/ranking
CRUD /api/menu
GET /api/stats
POST /api/sync
/api/admin (JWT Guard)
Socket.io
Realtime Service
Realtime Service
실시간 서비스
Phát sóng kết quả vote ngay lập tứcInstant vote result broadcast즉시 투표 결과 브로드캐스트
Đồng bộ Kiosk ↔ LG TV <5sKiosk ↔ LG TV sync <5s키오스크 ↔ LG TV 동기화 <5초
Redis Pub/Sub bridge
LIVE badge trigger
Đồng bộ Kiosk ↔ LG TV <5sKiosk ↔ LG TV sync <5s키오스크 ↔ LG TV 동기화 <5초
Redis Pub/Sub bridge
LIVE badge trigger
Cron / @nestjs/schedule
Scheduler Service
Scheduler Service
스케줄러 서비스
Đồng bộ thực đơn tự động 00:00Auto menu sync at 00:00매일 00:00 메뉴 자동 동기화
Tự chuyển bữa Sáng / Trưa / TốiAuto meal-time switch S/L/D아침/점심/저녁 자동 전환
Kích hoạt màn hình chờ ngoài giờOff-hours idle screen trigger비식사 시간 대기 화면 트리거
Session / cookie cleanup
Tự chuyển bữa Sáng / Trưa / TốiAuto meal-time switch S/L/D아침/점심/저녁 자동 전환
Kích hoạt màn hình chờ ngoài giờOff-hours idle screen trigger비식사 시간 대기 화면 트리거
Session / cookie cleanup
NestJS Module
Statistics Module
Statistics Module
통계 모듈
Tổng hợp điểm TB theo món / ngàyAvg score by dish / date메뉴별/날짜별 평균 점수 집계
Xu hướng 7 ngày gần đây7-day vote trend7일 투표 트렌드
CSV / Excel export
Lọc theo khoảng ngàyDate range filter날짜 범위 필터
Xu hướng 7 ngày gần đây7-day vote trend7일 투표 트렌드
CSV / Excel export
Lọc theo khoảng ngàyDate range filter날짜 범위 필터
TypeORM / PostgreSQL
Redis Cache / PubSub
S3 Object Store
🗄️
Tầng Dữ liệu / Lưu trữ
Data / Storage Layer
데이터 / 스토리지 레이어
PostgreSQL
menus · votes · rankings
sync_logs · admin_users · sessions
sync_logs · admin_users · sessions
Redis
Cache xếp hạng thời gian thựcRealtime ranking cache실시간 순위 캐시
Chống bình chọn trùng (TTL/session)Vote dedup (TTL/session)중복 투표 방지 (TTL/세션)
Pub/Sub · Latency <1ms
Chống bình chọn trùng (TTL/session)Vote dedup (TTL/session)중복 투표 방지 (TTL/세션)
Pub/Sub · Latency <1ms
Object Storage
MinIO / AWS S3
Ảnh món ăn · Tạo thumbnail tự độngFood images · Auto thumbnail음식 이미지 · 자동 썸네일 생성
CDN origin source
Ảnh món ăn · Tạo thumbnail tự độngFood images · Auto thumbnail음식 이미지 · 자동 썸네일 생성
CDN origin source
External API — Tự động đồng bộ 00:00 hàng ngày
External API — Auto Sync at 00:00 Daily
외부 API — 매일 00:00 자동 동기화
🌍
Hệ thống Ngoài
External System
외부 시스템
API Quản lý Suất ăn
Meal Management API
식수 관리 API
Back-office ERP system
Nguồn dữ liệu thực đơn hàng ngàyDaily menu data source일별 메뉴 데이터 소스
Đồng bộ tự động 00:00 · Đồng bộ thủ công qua AdminAuto sync 00:00 · Manual sync via Admin00:00 자동 동기화 · 관리자 수동 동기화
※ Hệ thống ngoài — Không thiết kế UIExternal system — No UI design외부 시스템 — UI 설계 없음
Nguồn dữ liệu thực đơn hàng ngàyDaily menu data source일별 메뉴 데이터 소스
Đồng bộ tự động 00:00 · Đồng bộ thủ công qua AdminAuto sync 00:00 · Manual sync via Admin00:00 자동 동기화 · 관리자 수동 동기화
※ Hệ thống ngoài — Không thiết kế UIExternal system — No UI design외부 시스템 — UI 설계 없음
🔄
Luồng Dữ liệu Chính
Key Data Flows
주요 데이터 흐름
🗳️ Vote Flow:Vote Flow:투표 흐름:
Kiosk K-02→
POST /vote→
Nginx→
NestJS→
Redis +1→
PostgreSQL→
WS Broadcast→
K-03+
LG TV
🔁 Sync Flow:Sync Flow:동기화 흐름:
Cron 00:00→
External API→
NestJS Parser→
PostgreSQL→
WS Push→
K-01 Refresh
📊 Ranking Flow:Ranking Flow:순위 흐름:
Redis PubSub→
<5s interval→
WS Gateway→
K-03 Kiosk+
S-01 LG TV
📶 Low-BW Mode:Low-BW Mode:저대역폭 모드:
Kiosk/TV offline→
Local cacheLocal cache로컬 캐시→
Hiển thị thực đơn cacheShow cached menu캐시 메뉴 표시→
Retry kết nốiRetry connect재연결 시도→
WS resume sync
🏠
Hạ tầng Triển khai
Infrastructure / Deployment
인프라 / 배포 구성
🖥️ Server (Docker)
NestJS API container
PostgreSQL container
Redis container
Nginx reverse proxy
MinIO image storage
🖥️ Kiosk — Enact / webOS
Enact Framework app
.IPK package deploy
Spotlight touch nav
Chế độ kiosk toàn màn hìnhFullscreen kiosk mode전체화면 키오스크 모드
Cache thực đơn offlineOffline menu cache오프라인 메뉴 캐시
📺 LG TV — Enact / webOS
Enact Framework app
.IPK package deploy
Spotlight D-pad nav
Sandstone UI components
Tối ưu băng thông thấpLow-bandwidth optimized저대역폭 최적화
📶 Low-BandwidthLow-Bandwidth저대역폭 전략
Cache thực đơn cục bộLocal menu cache로컬 메뉴 캐시
Ảnh nén qua CDNCDN compressed imagesCDN 압축 이미지
WS delta updates only
Enact lazy loading
Retry tự động khi mất mạngAuto-retry on disconnect연결 끊김 시 자동 재시도
🔒 Security
Admin: JWT + refresh token
Chống vote trùng: Redis TTLVote dedup: Redis TTL중복 투표 방지: Redis TTL
HTTPS / WSS only
Rate limiting (Nginx)
CORS whitelist
⚖️
So sánh: Enact Framework vs PWA ReactJS
Comparison: Enact Framework vs PWA ReactJS
비교: Enact Framework vs PWA ReactJS
🎯 Enact Framework
LG webOS WINNER
- Framework chính thức của LG Electronics cho webOSOfficial LG Electronics framework for webOSLG전자 공식 webOS 프레임워크
- Spotlight System: điều hướng D-pad / remote tự động focus element theo hướng bấm — không cần code thêmD-pad / remote auto-focus by direction — zero extra codeD-pad / 리모컨 방향 자동 포커스 — 추가 코드 불필요
- Build ra file .IPK — cài trực tiếp lên LG TVBuilds .IPK — installs directly on LG TV.IPK 빌드 — LG TV에 직접 설치
- Sandstone UI: component library tối ưu cho màn hình TV lớncomponent library optimized for large TV screens대형 TV 화면 최적화 컴포넌트 라이브러리
- Tối ưu render cho Chromium engine của LGOptimized rendering for LG's Chromium forkLG Chromium 엔진 최적화 렌더링
- Lazy loading — tiết kiệm RAM TV (1–2GB)Lazy loading — saves TV RAM (1–2GB)레이지 로딩 — TV RAM 절약 (1–2GB)
- Tối ưu băng thông thấp: prefetch, cache, delta updateLow-bandwidth: prefetch, cache, delta update저대역폭 최적화: 프리페치, 캐시, 델타 업데이트
- LG Developer Portal hỗ trợ chính thứcOfficial LG Developer Portal supportLG 개발자 포털 공식 지원
⚛️ PWA ReactJS
ADMIN WEB WINNER
- Ecosystem lớn, dễ tuyển developerLarge ecosystem, easy to hire developers대규모 생태계, 개발자 채용 용이
- Lý tưởng cho Admin Web: dashboard, charts, uploadIdeal for Admin Web: dashboard, charts, upload관리자 웹에 이상적: 대시보드, 차트, 업로드
- Không có Spotlight — phải tự implement focus management cho TV, rất phức tạpNo Spotlight — must implement TV focus manually, very complexSpotlight 없음 — TV 포커스 직접 구현 필요, 매우 복잡
- Trên LG TV: chạy được qua browser nhưng không có .IPK nativeOn LG TV: runs via browser but no native .IPKLG TV에서: 브라우저로 실행 가능하나 네이티브 .IPK 없음
- Service Worker cho offline supportService Worker for offline support오프라인 지원을 위한 Service Worker
- Mouse / keyboard UI tốt, remote control UI kém hơn nhiềuGood mouse/keyboard UI, poor remote control UI마우스/키보드 UI 우수, 리모컨 UI 열악
| Tiêu chíCriteria기준 | Enact Framework | PWA ReactJS | Winner |
|---|---|---|---|
| 🎮 Spotlight / Remote | ✅ Built-in Spotlight D-pad, remote, auto-focus, focus trapD-pad, remote, auto-focus, focus trapD-pad, 리모컨, 자동 포커스 |
❌ Không cóNone없음 Phải tự implement, rất phức tạpMust implement manually직접 구현 필요, 매우 복잡 |
Enact |
| 📦 .IPK Deploy | ✅ Native .IPK build npm run build → .ipk → LG TV |
❌ Không nativeNot native네이티브 아님 Chỉ chạy qua browser URLBrowser URL only브라우저 URL로만 실행 |
Enact |
| 📶 Low-Bandwidth | ✅ Tối ưu caoHighly optimized고도 최적화 Lazy load, prefetch, delta sync, local cache |
🟡 Service Worker Cần config kỹNeeds careful config세밀한 설정 필요 |
Enact |
| 🖥️ webOS Performance | ✅ Native engineNative engine네이티브 엔진
Tối ưu cho Chromium LGOptimized for LG ChromiumLG Chromium 최적화 |
🟡 Phụ thuộc browserBrowser dependent브라우저 의존 | Enact |
| 🌐 Admin Web | 🟡 Dùng được nhưng không tối ưuUsable but not optimal사용 가능하나 최적화 미흡 | ✅ Lý tưởng cho AdminIdeal for Admin관리자용 최적 | React |
| 👥 Ecosystem | 🟡 Nhỏ hơn, LG-specificSmaller, LG-specific소규모, LG 전용 | ✅ Rất lớn, nhiều libraryLarge ecosystem대규모 생태계 | React |
✅ Kết luậnVerdict결론
🖥️ Kiosk + LG TV:
Enact Framework — framework chính thức LG, Spotlight built-in, .IPK native, tối ưu webOS
Enact Framework — official LG framework, built-in Spotlight, native .IPK, webOS optimized
Enact Framework — LG 공식 프레임워크, Spotlight 내장, 네이티브 .IPK, webOS 최적화
💻 Admin Web:
PWA ReactJS — ecosystem lớn, lý tưởng cho dashboard, charts, upload, JWT auth
PWA ReactJS — large ecosystem, ideal for dashboard, charts, upload, JWT auth
PWA ReactJS — 대규모 생태계, 대시보드, 차트, 업로드, JWT 인증에 이상적
Enact LG webOS NativeLG webOS NativeLG webOS 네이티브
React Admin Web / BrowserAdmin Web / Browser관리자 웹 / 브라우저
NestJS Backend APIBackend API백엔드 API
Infra Docker / PostgreSQL / RedisDocker / PostgreSQL / RedisDocker / PostgreSQL / Redis