Ảnh chụp chat làm testimonial
SRC-1169, chỉ đạo chủ dự án 30.09.2026.
Học viên hay khoe kết quả, kể tiến bộ, cảm ơn mentor ngay trong nhóm Zalo hoặc buổi Zoom. Những tin nhắn ấy là bằng chứng đáng tin nhất Nemo12 có, vì chúng được viết TRƯỚC khi ai nghĩ tới việc đem đi đăng. Tính năng này cho mentor chụp lại, đăng lên, và cho chúng hiện thành lưới ảnh trên các trang học sinh của nemo12.com.
Ai làm gì
| Bước | Ở đâu | Ai |
|---|---|---|
| Chụp màn hình đoạn chat, che tên/avatar/số điện thoại của NGƯỜI KHÁC | máy của mentor | mentor |
| Tải ảnh lên, điền thông tin, gắn tag, bấm Publish | dolphin.nemo12.com/chat-screenshots | mentor (vai mentor, staff hoặc admin) |
| Xem lưới, bấm vào ảnh để xem đầy đủ | nemo12.com/students/<tag> | người xem, không cần đăng nhập |
Mentor tự đăng, không có bước người khác duyệt (câu 4). Thay cho bước duyệt là hai cam kết bắt buộc ở dưới.
Một testimonial gồm gì
| Trường | Bắt buộc | Ghi chú |
|---|---|---|
| Ảnh | 1 tới 6 ảnh | Ảnh đầu là ảnh bìa trên lưới; đổi thứ tự bằng mũi tên |
| Caption | có | Một dòng dưới ảnh trên lưới, tối đa 200 ký tự |
| Description | không | Đoạn dài hơn, chỉ hiện trong lightbox |
| Tên học viên | có | Viết tắt được: "Minh A." |
| Thông tin học viên | không | "Lớp 11 · IELTS 5.5 → 7.0" |
| Ngày | không | Ngày của đoạn chat; trang hiện DD.MM.YYYY |
| Nguồn | có | Nhóm Zalo · Buổi Zoom · Tin nhắn khác |
| Tag | ít nhất 1 để đăng | Danh sách cố định, xem dưới |
| Cam kết đã xin phép | để đăng | Học viên (hoặc phụ huynh) đồng ý cho hiện công khai |
| Cam kết đã che | để đăng | Tên, avatar, số điện thoại của người khác đã che trong MỌI ảnh |
| Ghim | không | Lên đầu lưới |
Ảnh không quá 200KB
Mỗi ảnh lưu trên server không quá 200KB (chỉ đạo 30.09.2026). Hai lớp giữ điều đó:
- Dolphin tự nén trước khi tải lên. Ảnh được chuyển sang WebP, cạnh dài bắt đầu ở 1600px, hạ chất lượng rồi hạ kích thước (1600 → 1280 → 1024 → 800px) tới khi vừa 200KB. Ảnh chụp chat chủ yếu là chữ, 1600px vẫn đọc rõ. Tới 800px mà vẫn chưa vừa thì dolphin báo lỗi và bảo mentor cắt ảnh nhỏ lại, thay vì đăng một ảnh chữ nhoè không đọc được.
- API từ chối gắn vào testimonial bất kỳ ảnh nào có
byte_size> 204 800 byte, và mọi ảnh nội bộ (visibility='internal', ví dụ ảnh gia đình). Đây là chốt cuối, phòng khi ai đó gọi API thẳng.
Tag và trang
Tag là danh sách cố định, không gõ tự do: một tag gõ sai là một trang không ai vào.
Lưới ảnh nhúng vào trang chương trình có sẵn, thành khối "Học viên nói gì" ngay dưới phần các bước của trang, chứ không dựng trang mới: /students/ielts, /students/sat, /students/grammar đã là trang chương trình, còn NEMO SPEAK nằm ở /students/speaking. Trang bố mẹ cùng môn (/parents/ielts, ...) dùng chung khối ấy.
| Tag | Trang có khối lưới |
|---|---|
ielts | nemo12.com/students/ielts |
speak | nemo12.com/students/speaking |
grammar | nemo12.com/students/grammar |
sat | nemo12.com/students/sat |
| (tất cả) | nemo12.com/students/testimonials, trang riêng có chip lọc theo tag |
- Trang chương trình hiện tối đa 8 ô; nhiều hơn thì có nút "Xem tất cả" sang trang tổng.
- Chưa có ảnh nào thì khối không hiện gì: một khối "chưa có ảnh" trên trang bán hàng nói điều ngược với thứ nó muốn nói.
- Một testimonial nhiều tag thì hiện ở mọi trang tương ứng.
Thêm tag mới là sửa trong cùng một commit: CHAT_TESTIMONIAL_TAGS trong workers/api/src/modules/showcase/chatTestimonials.ts, CHAT_TAGS trong apps/web/src/site/chatTestimonials.ts (kèm trang đích), TAGS trong apps/mentors/src/ChatTestimonials.tsx, và nhúng ChatTestimonialSection vào trang đích nếu trang ấy không phải trang môn dựng bằng SubjectPage.
Hiển thị
- Lưới: 2 cột trên điện thoại, 3 trên máy tính bảng, 4 trên máy tính. Mỗi ô là ảnh bìa tỉ lệ 3:4 cắt từ đỉnh (phần đầu đoạn chat), caption, tên học viên, ngày. Có nhãn "N ảnh" khi nhiều ảnh.
- Thứ tự: bản được ghim trước, sau đó ngày mới nhất trước; bản không có ngày xếp cuối.
- Bấm vào ảnh: lightbox trên cùng trang. Ảnh gốc bên trái, bên phải là caption, tên + thông tin học viên, description, nguồn, ngày, tag. Mũi tên trái/phải (bàn phím hoặc nút) đi qua từng ảnh của testimonial rồi sang testimonial kế; Esc hoặc nút Đóng để thoát.
- Trang công khai chỉ trả bản đã đăng và còn đủ điều kiện đăng (có ảnh, có tag, đủ hai cam kết). Hai cờ cam kết không bao giờ ra API công khai.
Kỹ thuật
| Phần | Chỗ |
|---|---|
| Bảng D1 | chat_testimonials - migration 0320 |
| API quản lý | GET/POST /v1/showcase/chat-testimonials, PUT/DELETE /v1/showcase/chat-testimonials/{id} (vai mentor/staff/admin) |
| API công khai | GET /v1/public/chat-testimonials?tag=<tag> |
| Tải ảnh | dùng lại POST /v1/showcase/media (ảnh public, R2) |
| Màn dolphin | apps/mentors/src/ChatTestimonials.tsx, mục "Chat screenshots" |
| Trang web | apps/web/src/site/ChatTestimonialsPage.tsx |
Vì sao là bảng riêng chứ không thêm kind vào testimonials: bảng kia là lời trích có người biên tập bật verified, mỗi dòng một ảnh chân dung và chọn trang bằng placements. Loại này có tới sáu ảnh, chọn trang bằng tag, và mentor tự đăng với cổng là hai cam kết của chính mình. Gộp chung thì cổng đăng của một trong hai loại phải có ngoại lệ, và ngoại lệ trong cổng pháp lý là chỗ dễ sai nhất.
Mười câu đã chốt (30.09.2026)
| # | Câu hỏi | Trả lời |
|---|---|---|
| 1 | Một testimonial mấy ảnh? | Nhiều ảnh, tối đa 6 |
| 2 | Ảnh vượt 200KB? | Tự nén trên trình duyệt; server vẫn chặn > 200KB |
| 3 | Tag lấy từ đâu? | Danh sách cố định |
| 4 | Ai được đăng công khai? | Mentor tự đăng luôn |
| 5 | Quyền riêng tư của người khác trong ảnh? | Mentor tự che trước + tích cam kết |
| 6 | Thông tin đi kèm? | Caption, description, tên học viên (viết tắt được), thông tin học viên, ngày, nguồn |
| 7 | Bấm vào ảnh? | Lightbox trên cùng trang |
| 8 | Tag ban đầu? | ielts, speak, grammar, sat (nhúng vào trang chương trình có sẵn, xem trên) |
| 9 | Trang tổng? | Có, /students/testimonials với chip lọc |
| 10 | Thứ tự? | Ghim trước, mới nhất trước |