Nút "Call me" vào thẳng danh sách Topic-based Talk
Bỏ màn chọn chế độ "BINGO - AI TUTOR" nằm giữa trang chủ và danh sách chủ đề: bấm "Call me" là thấy ngay các chủ đề để gọi Bingo. Cùng đợt, dải pet trên trang chủ được chỉnh: chào theo kiểu Bingo, nhìn chính diện, to bằng Bingo, mở 3D tức thì. Đã chạy thử trên bản dựng local từ mã nguồn production 2.3.1; bản demo bấm được ở tab Demo. Bản web của Pet 3D đang chạy trên phongthiao.com được ghi ở cùng tài liệu để so sánh hai nền tảng; từ 03/11/2026 thêm chế độ gia sư AI (Learn) của các pet trên web, học theo chủ đề Topic Talk.
Xuất xứ / Prompt / Giới hạn
Prompt. Ba yêu cầu của anh Tùng trong cùng một phiên làm việc: ngày 31/10/2026 "chạy FLYER App ở local cho anh nhé, anh muốn update 1 số thứ"; ngày 01/11/2026, kèm ảnh chụp màn "BINGO - AI TUTOR": "anh muốn bỏ qua màn này, và vào màn list topic luôn"; ngày 02/11/2026: "đẩy lên Roadmap.flyer.vn demo cho anh tính năng FLYER App này nha, vẫn theo mẫu PRD này https://roadmap.flyer.vn/sprint-112/bingo-auto-assign"; cùng ngày, về dải pet: "Dùng style chào của Bingo, cho các bạn Pet khác nữa nhé. Các bạn Pet cần Faceup nhìn theo chiều chính diện, mắt users nhìn vào màn hình nha", "Size của các bạn Pet khác sẽ cần to ngang với Bingo", "Bạn Mochi đang bị mất Tai", "loading your pet khi bấm vào Mochi, tốc độ đang chậm quá trên App. Bản Demo ở PRD cũng cần click & Playable như vậy, và tốc độ nhanh hơn"; và "Bản Pet3D trên web phongthiao.com cũng bổ sung vào PRD này nhé"; tối 02/11/2026, kèm hai ảnh chụp: "click vào nhân vật, thì ra màn hình list topic luôn. 2. Và nâng cấp UI của Bingo để giống hiệu ứng trò chuyện với real Teacher/ AI Tutor"; tiếp theo, kèm ảnh màn gọi: "any way to open camera for students" và "Mascot cần mấp máy môi đượccc"; kèm ảnh danh sách chủ đề: "anh muốn chuyển màn này thành progress map, level từ Pre-A1 đến C2. màn nào chưa được học thì sẽ màu xám, và có progress note"; sau bản đầu tiên: "một màn hình nhiều chặng quá, nhìn hơi ngợp"; sau bản thứ hai, kèm ảnh bản đầu tiên: "style như vừa rồi là đẹp nè, mà một màn hình hiển thị tầm 4 chặng thôi"; ngày 03/11/2026, về tab Demo: "okie, update vào PRD này nhé: https://roadmap.flyer.vn/sprint-115/call-me#demo"; cùng ngày, về gia sư AI trên web: "update https://phongthiao.com/pet-3d/lumi/learn?level=starters&topic=d2513o8a83dihci2eivg vào PRD nhé".
Ai soạn. Trợ lý AI soạn trong một phiên, sau khi đọc mã nguồn ứng dụng học sinh (kho flyer/mobile-student, Expo 57, nhánh dev tại commit 8f29414 = bản App Store 2.3.1). Đây là bản đề xuất kèm bản chạy thử, chưa qua thảo luận với đội phát triển.
Nguồn (gia sư AI trên web, mục 13). Ảnh chụp ngày 03/11/2026 từ phongthiao.com bằng Chromium có GPU, khung 390×844 và 1440×900, chế độ khách (không đăng nhập), tên nhập thử "An". Câu trả lời của học sinh được đưa vào bằng lệnh kiểm thử __pet3d.tutor().answer() thay cho micro; câu hỏi và câu đáp của AI là kết quả thật của /pet-3d/api/chat. Lời gửi sổ tay lên /pet-3d/api/pron-notes bị chặn trong lần chạy thử để không ghi dữ liệu giả. Mã nguồn đọc tại flyer-pets-3d/src/tutor.js (bản app.js?v=14).
Nguồn. Ảnh và video trong trang chụp từ iOS Simulator (iPhone 17 Pro) chạy bản dựng Release local, tài khoản thật, API production. Màn "trước" chụp cùng bản dựng khi tạm trả lại đường dẫn cũ.
Giới hạn.
- Thay đổi mới nằm trong worktree local, chưa commit, chưa đẩy lên Gitea, chưa có bản TestFlight.
- Bản dựng local có thêm dải pet 3D trên trang chủ (một thử nghiệm khác, cùng worktree); production hiện chưa có dải này. Không liên quan tới thay đổi trong tài liệu.
- Chưa có số liệu sử dụng của màn chọn chế độ (tỷ lệ chọn Topic-based Talk so với Free Talk); mục chỉ số nêu cách đo, chưa có kết quả.
- Chưa kiểm trên Android và trên máy thật.
- Gia sư AI trên web (mục 13) chưa được chạy với micro thật trên điện thoại trong lần ghi này; mức chấm phát âm dựa trên chữ mà Whisper nghe được, chưa đối chiếu với giáo viên.
- Khung 3D được nạp sẵn và giữ ẩn phía sau thanh tab để mở tức thì; trang 3D vẫn chạy khi ẩn, chưa đo thêm pin/CPU trên máy thật.
- Bản demo ở tab Demo là bản dựng web của trang chủ (HTML) dùng đúng ảnh, chữ và nhịp chào của ứng dụng; màn danh sách chủ đề là ảnh chụp thật, các nút khác chỉ hiện ghi chú. Phần 3D là trang roadmap.flyer.vn/pet-3d thật.
Hiện tại nút Call me ở trang chủ mở màn "BINGO - AI TUTOR / Fun talk, real progress" với hai lựa chọn: Topic-based Talk và Free Talk. Đề xuất: bấm Call me là vào thẳng danh sách chủ đề. Màn chọn chế độ không còn lối vào từ trang chủ.
Bản mobile (ứng dụng học sinh) — trước và sauCập nhật 02/11/2026
02/11/2026 — ảnh chụp lại từ bản dựng Release local sau khi đổi điều hướng; thêm video demo. 01/11/2026 — đổi đích của nút Call me trong view/HomeView/index.tsx, chạy thử trên Simulator.
Trang chủ
Nút Call me ở góc dưới trái, cạnh Bingo. Không đổi gì ở màn này.
Trước · màn bị bỏ qua
"BINGO - AI TUTOR": một bước chạm chỉ để chọn giữa hai chế độ. Màn vẫn còn trong mã nguồn (/bingo-talk-mode), chỉ không còn lối vào từ Call me.
Sau · đích mới của Call me
Danh sách Topic-based Talk: lọc theo trình độ và chủ đề, tìm bài, lịch sử ở góc phải. Nút quay lại về trang chủ.
Dải pet trên trang chủ — bốn chỉnh sửaCập nhật 02/11/2026
02/11/2026 — (1) bong bóng chào của Bingo dùng chung cho mọi pet, kèm nút "Play with … in 3D"; (2) bảy pet dựng lại nhìn chính diện, mắt hướng về người xem, khung tự ôm trọn thân (Mochi hết mất tai); (3) pet cao bằng Bingo (≈41% chiều cao màn hình); (4) khung 3D nạp sẵn phía sau thanh tab nên bấm là mở ngay. 15/10/2026 — dải pet đầu tiên, góc nhìn 3/4, bong bóng riêng nhỏ.
Bingo · bong bóng gốc
Bong bóng chào của production (chữ gõ dần, lặp lại). Đây là kiểu được dùng chung.
Mochi · cùng kiểu chào
Nhìn thẳng, mắt hướng ra, cao bằng Bingo, tai còn nguyên. Lời chào ba dòng cùng nhịp gõ; nút 3D nằm trong bong bóng.
Play in 3D · 0,5 giây
Ảnh chụp 0,5 giây sau khi bấm nút: trang 3D đã sẵn sàng vì được nạp ngầm từ lúc vào ứng dụng. Nút ✕ về trang chủ.
Bấm Bingo vào thẳng chủ đề · cuộc gọi kiểu video với gia sư AICập nhật 02/11/2026
02/11/2026 (tối) — (1) bấm Bingo ở giữa trang chủ mở thẳng danh sách Topic-based Talk, như nút Call me; các pet khác giữ hành vi cũ. (2) Màn gọi Bingo chuyển sang bố cục cuộc gọi video: Bingo nói khẩu hình trong khung "camera", phụ đề trực tiếp, khung tự quay của học sinh, thanh điều khiển kiểu gọi điện. Màn chat cũ vẫn mở bằng nút Hội thoại.
Trang chủ · bấm Bingo
Chạm vào Bingo: Bingo nhún một nhịp rồi mở danh sách chủ đề (0,16 giây sau chạm).
Đang gọi · 1,6 giây đầu
Cuộc gọi mới mở bằng "Đang gọi Bingo…" có vòng sóng; tắt sớm nếu lời chào của Bingo bắt đầu phát.
Đến lượt bạn
Bingo trong khung video, phụ đề câu vừa nói, thẻ tên "Bingo · AI Tutor", khung "Bạn" góc phải, LIVE + thời gian còn lại.
Bingo đang nói
Viền xanh nhấp nháy quanh khung người đang nói (như Zoom/Meet) và thanh âm lượng nhảy trong thẻ tên; miệng Bingo chạy theo viseme của câu trả lời.
Học sinh đang nói
"Bingo đang nghe…", khung "Bạn" viền xanh có thanh âm lượng.
Bingo đang nghĩ
Sau khi học sinh nói xong, trước khi tiếng Bingo phát: chip vàng có ba chấm.
Thanh dưới: Hội thoại (mở màn chat cũ) · Mục tiêu · nút mic như cũ · Gợi ý (bật/tắt câu gợi ý) · Kết thúc đỏ (thay nút ✓ ở góc phải; vẫn hỏi lại nếu chưa đạt hết mục tiêu). Ảnh chụp từ Simulator iPhone 17 Pro, tài khoản thật, chủ đề Hobbies đang làm dở; ba trạng thái "đang gọi / đang nghe / đang nghĩ" được bật tạm trong bản dev để chụp, không dùng micro thật.
Bản web — Phòng thi ảo trên phongthiao.comĐang chạy từ 31/10/2026
02/11/2026 — ghi vào tài liệu này theo yêu cầu. 31/10/2026 — lên phongthiao.com (bản dựng Cloudflare của exam.flyer.us): thẻ "FLYER PETS 3D" ở vị trí đầu dải thẻ trang chủ và chip "Chơi với thú cưng 3D" trong Bingo trợ giảng; /pet-3d/ được Worker chuyển tiếp nguyên vẹn từ roadmap.flyer.vn nên luôn là bản mới nhất, nút Home trong trang 3D đưa về /home.
Trang chủ web · thẻ vào Pet 3D
Thẻ đầu tiên của dải thẻ (tự chạy 5 giây một thẻ), nhãn NEW. Bấm thẻ mở thẳng trang 3D; không có bước chọn pet trước.
Trang 3D trên web · Mochi
Cùng bản dựng với tab Demo: Feed · Play · Dress up · Sleep, mũi tên đổi pet, nút chat Bingo góc phải, nút Home về trang chủ web.
Trang chủ web · toàn cảnh
Trang chủ Phòng thi ảo (khổ máy tính). Bingo trợ giảng ở góc trên phải có thể mở Pet 3D bằng lệnh nói hoặc chip.
Gia sư AI trên web — mỗi pet dạy một bài theo chủ đề Topic TalkCập nhật 03/11/2026
03/11/2026 — trang Pet 3D trên phongthiao.com có nút Learn: pet đang chọn đội mũ tốt nghiệp và dạy một bài khoảng 4 phút gồm chào hỏi, 3 từ có hình, 2 câu, một câu hỏi của AI và phần thưởng. Chủ đề lấy từ Topic Talk (cùng mã chủ đề với bản đồ ở mục 12), trình độ Starters · Movers · Flyers. Mỗi màn có đường dẫn riêng; ví dụ dưới đây là Lumi dạy chủ đề At the beach, trình độ Starters. Quy tắc ở mục 13 của tab PRD.
Mở từ đường dẫn
Chủ đề hôm nay, nút Đổi, chọn trình độ, ô tên cho khách. Bấm bắt đầu thì pet gọi tên và hỏi thăm bằng giọng vui; học sinh trả lời bằng giọng nói.
Đổi chủ đề
Mọi chủ đề Topic Talk của trình độ, ảnh thật; ♥ chủ đề pet thích, ✓ chủ đề đã học.
Từ mới · đọc gần đúng
Mỗi từ hai lượt. Đọc sai thì pet nói nghe thành gì và mẹo phát âm, rồi đọc chậm mẫu.
Nói câu · chấm từng từ
Câu hỏi của pet, câu mẫu có nghĩa tiếng Việt; từ đọc sai tô đỏ, điểm phần trăm. Đạt từ 80% là qua.
Trò chuyện với AI
AI hỏi một câu đúng chủ đề, đáp lại câu trả lời, có nghĩa tiếng Việt và gợi ý sửa câu nếu cần.
Phần thưởng
Sao, điểm phát âm, đổi trình độ cho bài sau, sổ tay từ cần luyện; "Học bài tiếp" hoặc "Xong".
Máy tính · thẻ bắt đầu
Màn rộng có bảng phấn 3D bên cạnh pet. Ảnh chủ đề trên bảng chưa hiện (lỗi CORS, mục 13).
Máy tính · từ mới
Bảng phấn đổi theo từng bước: từ mới, câu cần nói, trò chuyện, phần thưởng.
Bản đồ tiến độ Topic-based Talk · Pre A1 → C2Cập nhật 03/11/2026
02–03/11/2026 — Danh sách chủ đề dạng lưới thẻ được thay bằng bản đồ tiến độ: mọi chủ đề nằm trên một đường uốn lượn từ Pre A1 đến C2, mỗi màn hình khoảng 4 chặng; chủ đề đã học có màu và dấu tích, chủ đề chưa học màu xám, mỗi chặng có ghi chú tiến độ. Qua ba bản: bản 1 cùng kiểu đường đi nhưng chặng nhỏ, nhiều chặng mỗi màn ("nhìn hơi ngợp"); bản 2 rút còn 7 chặng trình độ; bản 3 (hiện tại) giữ kiểu đường đi của bản 1 theo phản hồi, phóng to để vừa khoảng 4 chặng. Cùng đợt: khung "Bạn" trong cuộc gọi bật được camera trước, khẩu hình Bingo được sửa (mục 11 và 12 của tab PRD). Ngày 03/11/2026, tab Demo bấm được chuyển sang bản đồ bản 3 với dữ liệu thật của tài khoản thử.
Mở màn · tự cuộn tới chủ đề gợi ý
Khoảng 4 chặng một màn. Chủ đề gợi ý nằm ở khoảng 40% chiều cao, có vòng sáng nhấp nháy và nút BẮT ĐẦU; chủ đề chưa học (Weather) mờ trên nền xám, đường nối chấm.
Đầu bản đồ · thẻ tổng và thẻ trình độ
Thẻ tổng 38/86 (44%) với chip từng trình độ để nhảy tới; thẻ Pre A1 13/13 "Đã học hết chủ đề". Đường nối nét liền giữa hai chủ đề đã học.
ModalChooseBingoTalkMode), còn nút Let's chat ở trang chủ vẫn là trò chuyện bằng chữ như cũ. Đề xuất bổ sung ở mục 2 của PRD: một nút Free Talk nhỏ trên thanh tiêu đề của danh sách chủ đề, để không mất lối vào từ trang chủ.DBấm thử trang chủ mới và bản đồ chủ đề
Khung 390×844 bên dưới là bản dựng web của trang chủ sau thay đổi. Thao tác được: vuốt hoặc bấm pet hai bên để đổi pet, bấm chấm tròn, bấm pet để nghe chào, nút Play with … in 3D mở trang 3D thật (nạp sẵn nên gần như tức thì), nút Call me mở bản đồ tiến độ Topic-based Talk, mũi tên quay lại về trang chủ. Các nút khác chỉ hiện ghi chú vì thuộc production. Bật âm thanh để nghe giọng chào.
Bản đồ tiến độ (cập nhật 03/11/2026). Màn sau nút Call me là bản 3 của mục 12, dựng lại bằng HTML theo đúng kích thước và quy tắc trong mã ứng dụng (ProgressMap/*): khoảng 4 chặng một màn, chủ đề đã học có vòng xanh và dấu tích, chủ đề chưa học màu xám, mỗi trình độ có thẻ ghi chú tiến độ. Thao tác được: màn tự cuộn tới chủ đề gợi ý Places in a town (nút START); chip trình độ trên thẻ tổng nhảy tới trình độ đó; bấm chủ đề bất kỳ mở màn gọi kiểu video mang tên chủ đề đó, chạm khung video để xem các trạng thái, nút X quay về đúng chỗ trên bản đồ; nút đồng hồ cát (lịch sử) chỉ hiện ghi chú.
imgproxy.flyer.vn như ứng dụng. Các màn gọi là ảnh chụp cuộc gọi chủ đề Hobbies trên bản dựng ứng dụng; tên chủ đề ở đầu màn được thay bằng chủ đề vừa bấm.1Vấn đề & mục tiêu
Nút Call me là lối vào chính để học sinh gọi Bingo luyện nói. Hiện bấm vào không gọi ngay mà mở một màn trung gian giới thiệu "BINGO - AI TUTOR" rồi bắt chọn một trong hai chế độ. Với học sinh đã biết tính năng, màn này chỉ là một bước chạm thừa trước khi tới nội dung; với học sinh mới, hai nút cùng cỡ không nói rõ nên bắt đầu từ đâu.
Mục tiêu: từ trang chủ tới danh sách chủ đề trong một chạm; giữ nguyên mọi thứ phía sau (bộ lọc, lịch sử, màn gọi, khung đồng ý quyền riêng tư).
2Giải pháp
- Call me → Topic-based Talk. Nút Call me điều hướng thẳng tới
/topic-talk/list. Màn chọn chế độ không còn được mở từ trang chủ. - Giữ màn cũ trong mã nguồn. Route
/bingo-talk-modevà giao diện của nó không xoá trong đợt này, để có thể bật lại nếu số liệu cho thấy cần. - Đề xuất kèm theo (chưa làm): thêm nút Free Talk trên thanh tiêu đề danh sách chủ đề, cạnh biểu tượng lịch sử, mở
/real-time-conversationqua khung đồng ý quyền riêng tư như hiện nay. Khi đó Free Talk vẫn cách trang chủ hai chạm, bằng số chạm hiện tại.
3Thay đổi kỹ thuật
| Tệp | Trước | Sau |
|---|---|---|
view/HomeView/index.tsx | onPressCall → ROUTES.BINGO_TALK_MODE | onPressCall → ROUTES.TOPIC_TALK_LIST |
view/BingoTalkModeScreenView/, app/bingo-talk-mode/ | Lối vào duy nhất là Call me | Giữ nguyên tệp, không còn lối vào từ trang chủ |
components/ModalChooseBingoTalkMode/ (tab Planet) | Có cả Topic-based Talk và Free Talk | Không đổi — vẫn là lối vào Free Talk |
i18n, API, config/routes.ts | — | Không đổi |
useAiPrivacyConsentGate) cho nhánh Free Talk. Nhánh Topic-based Talk có khung riêng ngay trước khi bắt đầu cuộc gọi, trong TopicTalkCallView. Đi tắt qua màn chọn chế độ không làm mất bước đồng ý.Kích thước thay đổi: một dòng mã. Không đổi phụ thuộc, không cần build native lại; chỉ cần bản OTA/JS mới hoặc bản phát hành kế tiếp.
4Phạm vi
- Trong phạm vi: đích của nút Call me trên trang chủ, iOS và Android (cùng mã React Native).
- Ngoài phạm vi: nội dung danh sách chủ đề, màn gọi, chấm điểm, nút Let's chat, hộp chọn chế độ ở tab Planet, các đường dẫn sâu từ thông báo.
5Kiểm thử & nghiệm thu
| # | Kịch bản | Kết quả mong đợi | Local 02/11 |
|---|---|---|---|
| 1 | Trang chủ → bấm Call me | Mở ngay danh sách Topic-based Talk | Đạt |
| 2 | Danh sách chủ đề → nút quay lại | Về trang chủ, không lọt màn trung gian | Đạt |
| 3 | Chọn một chủ đề lần đầu | Khung đồng ý quyền riêng tư vẫn hiện trước khi gọi | Chưa kiểm |
| 4 | Tab Planet → hộp chọn chế độ → Free Talk | Vào được Free Talk như cũ | Chưa kiểm |
| 5 | Android, máy thật | Cùng hành vi | Chưa kiểm |
| 6 | Vuốt sang Mochi | Bong bóng kiểu Bingo với câu của Mochi và nút 3D; Mochi nhìn thẳng, cao bằng Bingo, đủ tai | Đạt |
| 7 | Bấm "Play with Mochi in 3D" | Màn 3D hiện trong dưới 1 giây sau khi ứng dụng đã mở được vài giây | Đạt · 0,5 s |
6Lộ trình
- 01–02/11/2026 — đổi điều hướng, chạy thử trên Simulator, chụp ảnh và video (trang này).
- Chờ duyệt — đội sản phẩm quyết định có kèm nút Free Talk trên danh sách chủ đề hay không (mục 8).
- Sau duyệt — commit lên nhánh riêng từ
dev, pull request, đưa vào bản phát hành kế tiếp sau 2.3.1.
7Chỉ số theo dõi
- Tỷ lệ Call me → bắt đầu một cuộc gọi theo chủ đề trong cùng phiên, so trước và sau phát hành. Kỳ vọng tăng vì bớt một bước rơi.
- Thời gian từ trang chủ tới lúc bắt đầu gọi (trung vị).
- Số cuộc Free Talk mỗi ngày — theo dõi để biết việc mất lối vào từ trang chủ có làm Free Talk giảm hay không; nếu giảm rõ thì làm nút Free Talk ở mục 2.
8Câu hỏi mở
- Có cần nút Free Talk trên danh sách chủ đề ngay trong đợt này, hay chờ số liệu?
- Có xoá hẳn màn chọn chế độ và các tệp liên quan ở đợt sau không?
- Thông báo đẩy hiện có cái nào trỏ tới
/bingo-talk-modekhông? Nếu có thì đổi đích cùng lúc.
9Dải pet trên trang chủ — cùng đợt02/11/2026
Dải pet AI Teacher (bản thử 15/10/2026, cùng worktree) được chỉnh theo bốn yêu cầu cùng ngày. Tất cả nằm trong mã ứng dụng, không đổi API.
| Yêu cầu | Thay đổi | Tệp |
|---|---|---|
| Chào kiểu Bingo | Bong bóng chào của production (chữ gõ dần 50 ms/ký tự, nghỉ 2 giây, lặp) hiển thị cho pet đang ở giữa; Bingo giữ câu gốc, pet khác có câu ba dòng riêng và nút "Play with … in 3D" trong bong bóng. Bong bóng nhỏ riêng của dải pet được bỏ. | view/HomeView/index.tsx, styles.ts, PetCarousel/pets.ts |
| Nhìn chính diện | Bảy ảnh dựng lại từ mô hình 3D: xoay 0°, máy quay đặt ngang tầm giữa thân, góc nhìn hẹp 18° để mắt hướng thẳng ra; khung tự tính từ hộp bao của mô hình nên tai Mochi không còn bị cắt. Ảnh cắt sát thân, cao 1000 px. | assets/images/pets/*.png |
| To bằng Bingo | Chiều cao pet = 41% chiều cao màn hình (bằng Bingo Lottie trên iPhone 17 Pro), giới hạn 95% chiều rộng; chân đứng cùng mặt đất. | PetCarousel/index.tsx (PET_H) |
| Mở 3D nhanh | Khung web /pet-3d không còn là một màn riêng mở khi bấm. Nó được gắn cố định trong layout tab, nạp ngầm 1,5 giây sau khi vào ứng dụng và giữ ẩn (opacity 0, không nhận chạm). Bấm nút là hiện ngay và gọi __pet3d.setPet; đóng thì ẩn lại, không nạp lại. Trạng thái qua atom petPlayAtom. | view/HomeView/components/PetPlayOverlay.tsx, store/pet.ts, app/(tabs)/_layout.tsx |
10Bản web phongthiao.com — so với ứng dụng
Pet 3D đã có mặt trên web học sinh (phongthiao.com, bản Cloudflare của exam.flyer.us) từ 31/10/2026. Hai nền tảng dùng chung một trang 3D tại roadmap.flyer.vn/pet-3d; khác nhau ở lối vào và cách chọn pet.
| Hạng mục | Ứng dụng FLYER (bản thử này) | Web phongthiao.com (đang chạy) |
|---|---|---|
| Lối vào | Dải pet ngay giữa trang chủ: vuốt để gặp từng pet, bong bóng chào kiểu Bingo, nút "Play with … in 3D". | Thẻ "FLYER PETS 3D" đầu dải thẻ trang chủ (tự chạy 5 giây/thẻ) và chip "Chơi với thú cưng 3D" trong Bingo trợ giảng. |
| Chọn pet | Chọn trước trên trang chủ; trang 3D mở đúng pet đó (__pet3d.setPet). | Luôn mở pet mặc định (Bingo); đổi pet bằng mũi tên hoặc lưới trong trang 3D. |
| Mở trang 3D | Khung web nạp sẵn phía sau thanh tab, hiện trong ~0,5 giây; đóng bằng ✕, không nạp lại. | Điều hướng cả trang sang /pet-3d/ (khoảng 2 giây lần đầu đo từ máy đo); nút Home về /home. |
| Giọng và chat | Dùng API của roadmap trực tiếp. | API đi qua Worker của phongthiao với origin exam.flyer.us; hạn mức chat 80 lượt/IP/ngày và STT 120 lượt/IP/ngày dùng chung cho mọi người truy cập phongthiao (vì mọi lời gọi đều đến từ Worker). |
| Trạng thái | Chưa commit, chạy trên Simulator. | Đang chạy trên phongthiao.com (bản dựng 334614a3, 31/10/2026); chưa có trên exam.flyer.us production. |
Đề xuất để hai nền tảng cùng một trải nghiệm
- Chọn pet từ trang chủ web: thẻ "FLYER PETS 3D" mở một hàng 8 pet (ảnh chính diện đã dựng cho ứng dụng) rồi mới vào 3D, hoặc nhận tham số
/pet-3d/?pet=mochiđể mở đúng pet. Việc thứ hai chỉ cần vài dòng trong trang 3D và dùng được cho cả hai nền tảng. - Bong bóng chào trên web: khi rê chuột hoặc chạm thẻ, hiện câu chào ba dòng của pet đang xoay vòng, cùng chữ và giọng với ứng dụng (tệp
hi-*.mp3đã có). - Hạn mức riêng cho web: cho roadmap API nhận origin phongthiao.com (hoặc exam.flyer.us) và đếm theo người dùng thay vì theo IP của Worker, trước khi mở rộng cho nhiều học sinh.
- Nạp sẵn trên web: tải trước bundle
/pet-3d/app.jsbằng<link rel=prefetch>từ trang chủ để lần mở đầu nhanh như ứng dụng.
/pet-3d/; trang 3D sẵn sàng (__pet3d) và đổi được sang Mochi; nút Home trỏ về /home. Chưa đo trên điện thoại trong phiên này.11Cuộc gọi kiểu video với Bingo02/11/2026
Mục tiêu: học sinh cảm thấy đang gọi video với một giáo viên thật, không phải đang chat với một khung chữ. Trước thay đổi, màn gọi mặc định là danh sách tin nhắn với Bingo nhỏ ở trên; bản lớn của Bingo là Lottie không có khẩu hình.
Hành vi
| Thành phần | Hành vi |
|---|---|
| Bấm Bingo ở trang chủ | Chỉ khi Bingo đang ở giữa dải pet: nhún một nhịp, mở /topic-talk/list (cùng đích với Call me). Bấm Bingo khi đang ở pet khác thì trượt về Bingo như cũ. Bấm pet khác vẫn nghe lời chào. |
| Khung video gia sư | Bingo Rive (artboard Main, có khẩu hình theo viseme) đặt nửa người trên nền phòng của Bingo; trôi nhẹ như camera cầm tay và "thở" (6,2 giây một chu kỳ), tự chớp mắt. |
| Trạng thái cuộc gọi | Đang gọi (1,6 giây đầu cuộc gọi mới) → Đến lượt bạn → Bingo đang nghe (đang ghi âm) → Bingo đang nghĩ (đã gửi, chưa có tiếng) → Bingo đang nói (máy phát đang chạy; giữ 0,9 giây sau tick cuối để không nhấp nháy) → Cuộc gọi đã kết thúc. |
| Phụ đề | Câu Bingo đang nói (văn bản stream trước), nếu không thì câu cuối cùng; nhãn BINGO hoặc BẠN; bỏ ký hiệu markdown; tối đa 3 dòng, giữ phần cuối câu. |
| Khung "Bạn" | Ảnh đại diện và khung của học sinh (AvatarFrame); viền xanh + thanh âm lượng khi đang ghi âm. Camera: chạm vào khung để bật hoặc tắt camera trước, mặc định tắt. Hình chỉ hiện trên máy, không ghi lại và không gửi đi; lần bật đầu tiên hiện thông báo "Chỉ bạn nhìn thấy camera của mình". Bị từ chối quyền thì hiện hộp có nút mở Cài đặt; camera không khởi động được thì tự tắt kèm thông báo. Camera tắt khi cuộc gọi kết thúc. |
| Khẩu hình | Máy phát âm thanh chỉ báo tiến độ khoảng 2 lần mỗi giây, nên trước đây miệng Bingo chỉ đổi hình 2 lần mỗi giây và trông như há đứng yên; lời chào và câu gợi ý không có viseme nên miệng không cử động. Nay miệng chạy theo đồng hồ riêng 70 ms một nhịp, nội suy thời gian phát giữa hai lần báo: có viseme (câu trả lời AI) thì theo viseme, không có thì dùng chuỗi khẩu hình nói tự nhiên. Ngậm miệng khoảng 0,7 giây sau tiếng cuối. |
| Thanh trên | ✕ rời màn (phiên vẫn mở lại được) · tên chủ đề · chấm đỏ LIVE + thời gian nói còn lại (quy tắc 5 phút cũ, đếm theo thời lượng ghi âm) · biểu tượng tín hiệu HD. |
| Thanh dưới | Hội thoại · Mục tiêu · Mic · Gợi ý · Kết thúc. Nút Kết thúc gọi đúng luồng của nút ✓ cũ (cảnh báo khi còn mục tiêu, rồi màn kết thúc). |
| Màn chat | Giữ nguyên, mở bằng Hội thoại; dùng chung thanh trên và thanh dưới mới. Mặc định của màn gọi đổi từ chat sang video. |
Thay đổi kỹ thuật
| Tệp | Thay đổi |
|---|---|
view/HomeView/components/PetCarousel/index.tsx, view/HomeView/index.tsx | Prop onPressBingo = onPressCall. |
components/TutorVideoCall/TutorVideoTile.tsx (mới) | Khung video, chip trạng thái, phụ đề, thẻ tên, khung tự quay, lớp "Đang gọi"; hoạt ảnh Reanimated. |
components/TutorVideoCall/CallControlButton.tsx, icons.tsx (mới) | Nút tròn kiểu thanh gọi; biểu tượng SVG (Material) cho kết thúc, hội thoại, mục tiêu, gợi ý, mic, tín hiệu. |
components/TopicTalkCallStep/index.tsx, styles.ts | Thanh trên và thanh dưới mới; khung video thay Lottie khi ẩn chat; phát hiện "đang nói" từ sự kiện audioProgress; tính phụ đề. Ghi âm, stream, khẩu hình và các hộp thoại giữ nguyên; nút ghi âm vẫn nằm cố định trong cây giao diện (tránh lỗi NativeSharedObjectNotFound khi đổi chế độ). |
TopicTalkCallView/index.tsx | showFullConversation mặc định false (mở bằng video). |
components/TutorVideoCall/TutorVideoTile.tsx, icons.tsx | Khung "Bạn" bấm được; SelfCamera dùng expo-camera (đã có sẵn trong ứng dụng cho quét QR Bingo, không cần build native): camera trước, chế độ ảnh, mute nên không giữ micro của bộ ghi âm; ẩn hình đến khi camera sẵn sàng. Biểu tượng camera bật/tắt. |
components/TopicTalkCallStep/index.tsx | Trạng thái camera, xin quyền, thông báo. Đồng hồ khẩu hình: MOUTH_FRAME_MS 70, MOUTH_STALE_MS 650, visemeAt, talkingViseme; chỉ gửi lệnh sang Rive khi hình miệng đổi. |
app.config.js, ios/FLYER/Info.plist | Câu xin quyền camera nêu đủ ba mục đích (quét QR Bingo, game cử chỉ, khung tự quay trong cuộc gọi) và cam kết không ghi, không gửi. Chỉ có hiệu lực ở bản build native kế tiếp. |
i18n/locales/{en,vi}.json | 13 chuỗi topic_talk.call_* + 7 chuỗi camera. |
Kiểm thử (Simulator, 02/11/2026)
| # | Kịch bản | Kết quả |
|---|---|---|
| 1 | Trang chủ → bấm Bingo | Đạt mở danh sách chủ đề |
| 2 | Vào chủ đề → Start: khung video, phụ đề, thẻ tên, khung "Bạn", thanh dưới | Đạt |
| 3 | Bingo đọc câu gợi ý → viền xanh + thanh âm lượng; tắt khi dừng | Đạt |
| 4 | Hội thoại ↔ video; Kết thúc → hộp "chưa đạt hết mục tiêu" → Tiếp tục luyện | Đạt |
| 5 | Đang gọi → Đã kết nối → Đến lượt bạn; đang nghe; đang nghĩ | Đạt khi ép trạng thái |
| 6 | Khẩu hình: mô phỏng đúng logic với nhịp báo 500 ms. Không viseme: 9,7 lần đổi hình mỗi giây; có viseme: 12,3 lần mỗi giây; trước đây tối đa 2 lần mỗi giây | Đạt mô phỏng |
| 6b | Khẩu hình theo câu trả lời AI thật, nhìn trên Simulator | Chưa kiểm cần nói vào micro |
| 6c | Camera: chạm khung "Bạn" → xin quyền → thông báo riêng tư | Đạt trên Simulator; hình camera cần máy thật (Simulator không có camera) |
| 7 | iPad, Android, máy thật | Chưa kiểm |
12Bản đồ tiến độ chủ đề03/11/2026
Mục tiêu: học sinh thấy mình đang ở đâu trên lộ trình Pre A1 → C2 và biết nên học chủ đề nào tiếp theo, thay cho lưới thẻ chủ đề không cho biết tiến độ.
Ba bản và phản hồi
| Bản | Thiết kế | Phản hồi |
|---|---|---|
| 1 | Mọi chủ đề trên một đường uốn lượn, chặng nhỏ (hàng cao khoảng 112 điểm), khoảng 6–7 chặng một màn. | "một màn hình nhiều chặng quá, nhìn hơi ngợp" |
| 2 | Đường chỉ gồm 7 chặng trình độ; mở một trình độ thành lưới 3 cột; thẻ Học tiếp ở đầu. | "style như vừa rồi là đẹp nè, mà một màn hình hiển thị tầm 4 chặng thôi" (chỉ vào bản 1) |
| 3 | Kiểu đường đi của bản 1, chặng lớn hơn, chiều cao mỗi chặng = một phần tư vùng bản đồ. | Bản hiện tại |
Hành vi (bản 3)
| Thành phần | Hành vi |
|---|---|
| Mật độ | Chiều cao mỗi chặng = (chiều cao màn − vùng an toàn − thanh tiêu đề) ÷ 4, giới hạn 140–230 điểm, nên mọi máy đều thấy khoảng 4 chặng. Tính từ kích thước màn, không đo bố cục, để vị trí không xê dịch sau khi tự cuộn. |
| Thẻ tổng | "Hành trình luyện nói": phần trăm, "Đã học 38/86 chủ đề · từ Pre A1 đến C2" (số của tài khoản thử), chip từng trình độ (màu khi đã bắt đầu, xám khi chưa) bấm để nhảy tới trình độ đó. |
| Thẻ trình độ | Đặt đầu mỗi đoạn đường: huy hiệu, "Trình độ A1", ghi chú phần còn lại ("1 đang học · 9 chưa học", "Đã học hết chủ đề", "Chủ đề sắp ra mắt"), số đã học/tổng và thanh tiến độ. Trình độ chưa bắt đầu có màu xám; C1, C2 hiện chưa có chủ đề. |
| Chặng chủ đề | Ảnh tròn 92 điểm với vòng tiến độ và nhãn bên cạnh (tên + ghi chú). Đã học: vòng xanh, dấu tích, "Đã học". Đang học: vòng màu trình độ theo mục tiêu đạt, "2/4 mục tiêu". Chưa học: ảnh mờ trên nền xám, chữ xám, "Chưa học"; vẫn bấm được, không khoá. Đường nối nét liền giữa hai chủ đề đã bắt đầu, nét chấm khi chưa. |
| Chủ đề gợi ý | Cuộc gọi đang dở đầu tiên theo thứ tự trình độ; không có thì chủ đề chưa học đầu tiên của trình độ thấp nhất chưa xong. Chặng này nhấp nhô, có vòng sáng và nút BẮT ĐẦU hoặc HỌC TIẾP. Mở màn tự cuộn để chặng này ở khoảng 40% chiều cao, sau khi có dữ liệu mới từ máy chủ (bản lưu đệm có thể gợi ý chủ đề đã học xong). |
| Bấm chủ đề | Như trước: tiếp tục phiên chưa xong nếu có, nếu không thì tạo phiên mới rồi mở cuộc gọi. Quay lại từ cuộc gọi thì số liệu tải lại. |
| Bỏ khỏi màn | Bộ lọc trình độ, bộ lọc chủ đề và ô tìm kiếm của màn cũ; chip trình độ thay cho bộ lọc trình độ. Nút lịch sử giữ nguyên. |
Dữ liệu
Không đổi backend. Query mới ViewerBingoSubjectsProgress lấy mọi chủ đề appTypes: EXAM, mỗi chủ đề kèm viewerCompleted, phiên chưa xong đầu tiên cùng conversationSessionSubjectDone, và số phiên đã xong. Đã học = viewerCompleted hoặc có ít nhất một phiên đã xong. Tải hết các trang (100 chủ đề mỗi trang) vì bản đồ cần toàn bộ lộ trình.
Thay đổi kỹ thuật
| Tệp | Thay đổi |
|---|---|
TopicTalkListView/index.tsx | Viết lại: thẻ tổng, thẻ trình độ, đường chủ đề, chiều cao chặng theo màn, tự cuộn tới chủ đề gợi ý. |
components/ProgressMap/ (mới) | useTopicProgress.ts (query, tải hết trang, gom theo trình độ, chọn chủ đề gợi ý), TopicNode.tsx, LevelHeader.tsx, MapSummary.tsx, ProgressRing.tsx, progressNotes.ts. |
graphql/query.ts | Query ViewerBingoSubjectsProgress; sinh lại kiểu bằng yarn gqlgen:prod. |
i18n/locales/{en,vi}.json | Chuỗi topic_talk.map_*. |
Kiểm thử (Simulator, 03/11/2026)
| # | Kịch bản | Kết quả |
|---|---|---|
| 1 | Số liệu tài khoản thử: tổng 38/86; Pre A1 13/13, A1 7/17, A2 3/14, B1 6/24, B2 9/18; C1, C2 sắp ra mắt | Đạt |
| 2 | Khoảng 4 chặng một màn trên iPhone 17 Pro (chặng cao 175,5 điểm, vùng bản đồ 702 điểm) | Đạt |
| 3 | Mở màn tự cuộn tới chủ đề gợi ý (Places in a town); vị trí không xê dịch sau 3 giây | Đạt |
| 4 | Chủ đề chưa học và trình độ chưa bắt đầu có màu xám | Đạt |
| 5 | Mở cuộc gọi từ bản đồ với chủ đề có phiên dở, không tạo phiên mới | Đạt |
| 6 | Chip trình độ nhảy tới đúng đoạn; quay lại từ cuộc gọi thì số liệu cập nhật | Chưa kiểm cần bấm tay |
| 7 | iPad, Android, máy thật, máy màn nhỏ (iPhone SE) | Chưa kiểm |
| 8 | Tab Demo (Chromium, khung 390×844): đủ 86 chủ đề, chặng cao 169 px nên khoảng 4 chặng một màn; tự cuộn tới Places in a town ở khoảng 37% vùng bản đồ; chip B1, C1 nhảy đúng; bấm chủ đề mở màn gọi mang đúng tên; X quay về giữ vị trí; không lỗi console | Đạt |
13Gia sư AI trên web (Pet 3D · Learn)03/11/2026
Trên phongthiao.com, mỗi pet của trang 3D dạy được một bài nói ngắn theo một chủ đề Topic Talk. Mã chủ đề trùng với bản đồ ở mục 12, nên ứng dụng và web dẫn sang nhau được theo từng chủ đề. Ảnh ở khối "Gia sư AI trên web" của tab Thiết kế.
Đường dẫn
| Phần đường dẫn | Ý nghĩa |
|---|---|
/pet-3d/<pet>/ | Chọn pet: bingo, mochi, pip, bao, lumi, kiko, draco, bolt. |
/pet-3d/<pet>/learn | Mở bài học với pet đó. Nút Back của điện thoại đóng bài học. |
…/learn/hello · words · sentences · chat | Bắt đầu từ bước đó; địa chỉ đổi theo từng bước nên tải lại trang vẫn tiếp tục đúng bước. /done mở bài mới. |
?level=starters · movers · flyers | Trình độ. Không có thì lấy theo hồ sơ phongthiao (Pre A1 → Starters, A1 → Movers, A2 trở lên → Flyers), không có hồ sơ thì học sinh chọn. |
?topic=<mã chủ đề> | Mã chủ đề Topic Talk (bingoSubjectId). Không có hoặc sai mã thì chọn chủ đề hôm nay: đúng trình độ, chủ đề pet thích trước, chủ đề học ít lần trước. |
Ví dụ đang dùng: Lumi · At the beach · Starters.
Bài học (khoảng 4 phút)
| Bước | Nội dung | Chấm và phản hồi |
|---|---|---|
| 👋 Chào bạn | Pet gọi tên, hỏi "How are you today?" bằng giọng vui. | Trả lời bất kỳ được 1 sao; câu có ý buồn hoặc mệt thì pet động viên trước khi vào bài. |
| 📚 Từ mới | 3 trong 5 từ có hình của chủ đề; từ lần trước đọc sai đứng đầu. | Đúng khi nghe ra từ (cho lệch 1 chữ cái với từ ngắn, 2 chữ cái với từ từ 6 chữ; số nhiều vẫn tính). Hai lượt; sai thì báo nghe thành gì, mẹo phát âm, rồi đọc chậm mẫu. |
| 🗣️ Nói câu | 2 mẫu câu của chủ đề: câu hỏi của pet, câu trả lời của học sinh, có nghĩa tiếng Việt; đổi cặp câu sau mỗi bài. | Chấm từng từ theo cùng quy tắc của Topic Talk. Từ 80% là qua, 2 sao; dưới 80% thì tô đỏ từ sai, pet đọc lại từ đó, cho lượt thứ hai. |
| 💬 Trò chuyện | Một câu hỏi của AI, giữ trong từ và mẫu câu của chủ đề (/pet-3d/api/chat, chế độ tutor). | AI đáp lại câu trả lời, kèm nghĩa tiếng Việt và "Bạn có thể nói: …" khi câu chưa đúng; 2 sao. |
| 🏆 Phần thưởng | Pháo giấy, pet nhảy, +3 sao. | Điểm phát âm = trung bình các lượt chấm. Từ 88% thì bài sau lên trình độ, dưới 50% thì bài sau luyện ở trình độ thấp hơn; chỉ xét khi bài có ít nhất 3 lượt chấm. Sổ tay liệt kê từ cần luyện; từ sai rồi sửa đúng tính là đã sửa. |
Dữ liệu
- Chủ đề: 44 chủ đề Topic Talk trình độ Pre A1, A1, A2, chụp từ
viewerBingoSubjectsngày 03/11/2026. Mỗi chủ đề 5 từ có hình và 3 mẫu câu, chọn từ phần "Targeted Vocabulary" và "Targeted Structures" trong prompt AI của chủ đề, có nghĩa tiếng Việt. Dữ liệu cố định trong bundle; chủ đề mới trên Topic Talk chưa tự có mặt. - Hồ sơ: học sinh đã đăng nhập phongthiao.com được đọc tên và trình độ qua GraphQL cùng domain; khách tự chọn trình độ và nhập tên (không bắt buộc).
- Tiến độ: số bài, trình độ và từ yếu theo từng pet và từng chủ đề, lưu trong trình duyệt.
- Sổ tay phát âm: cuối bài gửi lên
/pet-3d/api/pron-notes(mã học sinh hoặc mã khách, trình độ, pet, chủ đề, điểm, từng từ nghe thành gì). Đây là nguồn của khối "Lỗi phát âm khi luyện nói" trong tab Ôn từ đã sai của giáo viên; khi học sinh đã đăng nhập, màn phần thưởng ghi "Sổ tay đã được gửi cho thầy cô". - Giọng và AI: câu chào dùng ElevenLabs v3; các câu khác dùng ElevenLabs trong hạn ký tự mỗi ngày (mặc định 1.500, biến
PET_TTS_DAILY_CHARS), quá hạn chuyển sang Workers AI Aura; câu đã đọc được lưu đệm. Nhận giọng nói qua Whisper (/pet-3d/api/stt, 120 lượt mỗi IP mỗi ngày); chat 80 lượt mỗi IP mỗi ngày.
Kiểm thử (phongthiao.com, 03/11/2026)
| # | Kịch bản | Kết quả |
|---|---|---|
| 1 | Mở link Lumi · At the beach · Starters: đúng pet, chủ đề, trình độ; thẻ bắt đầu hiện sau 3–4 giây từ máy đo ở xa Việt Nam | Đạt |
| 2 | Cả bài từ chào hỏi tới phần thưởng chạy liền mạch, 60–70 giây khi trả lời ngay; không có lỗi JavaScript | Đạt |
| 3 | Địa chỉ đổi theo bước: /learn/words, /sentences, /chat, /done | Đạt |
| 4 | Từ đọc gần đúng ("boad") báo nghe thành gì và mẹo âm cuối; lượt hai đúng thì qua | Đạt |
| 5 | Câu đọc lệch ("I am swimmy.") được 67%, tô đỏ đúng từ swimming; đọc lại đúng được 100% | Đạt |
| 6 | AI hỏi đúng chủ đề ("What can you see at the beach?") và đáp lại có nghĩa tiếng Việt | Đạt |
| 7 | Phần thưởng: 13 sao, bài sau lên Movers; từ sai rồi sửa đúng không vào sổ tay | Đạt |
| 8 | Bảng phấn 3D trên máy tính hiện ảnh chủ đề | Lỗi ảnh bị chặn CORS |
| 9 | Micro thật trên iPhone và Android; trang mở trong khung web của ứng dụng FLYER | Chưa kiểm |
statics.flyer.us/image/<mã> không có header Access-Control-Allow-Origin, còn bản chưa lưu đệm thì có. Hướng sửa: trang 3D thêm một tham số riêng cho lần tải ảnh cần CORS (ví dụ ?cors=1) để luôn lấy bản có header, hoặc máy chủ ảnh trả thêm Vary: Origin. Ảnh trên thẻ HTML vẫn hiện vì không cần CORS.2.
/favicon.svg?v=2 trả 404 trên phongthiao.com vì Worker chỉ chuyển tiếp /pet-3d/*.3. Hạn mức chat, nhận giọng nói và giọng đọc vẫn tính chung cho mọi học sinh qua IP của Worker phongthiao (mục 10). Một bài học dùng khoảng 2 lượt chat, 7–12 lượt nhận giọng nói và khoảng 20 câu đọc, nên cần hạn mức theo người dùng trước khi mở rộng.
Đề xuất nối với ứng dụng
- Học trước với pet: trên bản đồ chủ đề (mục 12), chủ đề có bài gia sư hiện thêm nút mở
/pet-3d/<pet>/learn?topic=<mã>&level=…trong khung web đã nạp sẵn (mục 9). Học sinh nhỏ làm quen 5 từ và 3 mẫu câu trước khi gọi Bingo. - Từ yếu từ cuộc gọi: sau cuộc gọi Topic Talk, từ đọc sai trong cuộc gọi được đưa vào danh sách từ yếu của bài gia sư cùng chủ đề.
- Chủ đề từ máy chủ: lấy danh sách chủ đề từ API thay vì cố định trong bundle, để chủ đề mới và dữ liệu đã sửa tự cập nhật. Ba chủ đề Topic Talk đang có dữ liệu lệch cần đội Học thuật sửa: "Jobs" mang mẫu câu của Daily routine, "Ouch, accidents!" mang mẫu câu của Taste Test!, "Daily Objects" mang từ vựng của My Dream House.
VVideo demo · bản dựng local
Quay từ iOS Simulator (iPhone 17 Pro) chạy bản Release dựng từ mã nguồn production 2.3.1 cộng thay đổi trong tài liệu này. Thao tác: bấm Call me → danh sách chủ đề → quay lại → bấm Call me lần nữa.