Mục tiêu: Sau bài này, bạn tự tay tạo được 3 loại app (vòng quay may mắn, flashcard, quiz), biết quy trình 5 bước, có prompt mẫu, hiểu cách chỉnh sửa – nâng cấp – chia sẻ. Viết thẳng, rõ, không vòng vo.

Gemini Canvas là không gian làm việc trực quan của Gemini: bạn mô tả ý tưởng bằng tiếng Việt/Anh → Gemini tự sinh mã (HTML/CSS/JS) → xem trước và chạyngay trên trình duyệt.
Bạn có thể:

Bắt đầu từ ý tưởng bằng chữ, không cần kiến thức lập trình.

Chỉnh sửa mã trực tiếp khi muốn tinh chỉnh giao diện/chức năng.

Lưu – xuất – chia sẻ link/fiIe để dùng trong lớp học, sự kiện, nhóm bạn.

Cần prototyping nhanh một công cụ nhỏ: game mini, flashcard, quiz, mô phỏng.

Giáo viên cần bài tập tương tác, kiểm tra nhanh, hoạt động khởi động/ôn tập.

Học viên tự học: tạo bộ bài tập cá nhân hóa, học mỗi ngày.

Khung mô tả (Prompt): Nơi bạn viết yêu cầu “con người” – càng cụ thể càng tốt (chức năng, số lượng, màu sắc, dữ liệu, ràng buộc).

Khung mã (Code): Gemini tạo HTML/CSS/JS. Bạn có thể sửa chữ, thay ảnh, đổi màu, thêm logic.

Khung xem trước (Preview): Bấm Run/Play để chạy thử. Thấy lỗi → sửa prompt hoặc sửa mã.

Nguyên tắc vàng: Ý tưởng rõ ràng → mã sạch → chạy mượt. Đừng nhảy thẳng vào tính năng phức tạp ngay từ đầu.

Xác định mục tiêu: Giải trí / Học tập / Giảng dạy.

Viết yêu cầu rõ ràng: Tính năng cụ thể, số lượng câu hỏi/thẻ, màu sắc, font, dữ liệu, thiết bị (mobile-first).

Để Gemini sinh ứng dụng và chạy thử.

Chỉnh sửa – hoàn thiện: đổi nội dung, thêm/giảm tính năng, tinh giao diện.

Lưu/Chia sẻ/ Xuất: dùng ngay trong lớp, nhóm, sự kiện.

Mẹo viết prompt “chuẩn”:
“Tạo [loại ứng dụng] cho [đối tượng] với [danh sách tính năng]. Dùng [màu sắc/phong cách], có [số lượng nội dung], chạy tốt trên di động, mã HTML/CSS/JS trong cùng file. Có [nút/bộ điều khiển], có [âm thanh/ảnh], hiện [kết quả/thông báo] rõ ràng.”

Kịch bản dùng: sinh nhật lớp, cuối giờ học, minigame mở đầu workshop, bốc thăm trúng quà.

Prompt mẫu (dán thẳng vào Canvas):
“Tạo ứng dụng web Vòng Quay May Mắn:

Giao diện tươi sáng, tối ưu di động.

Có vòng quay chia 6 phần thưởng: Kẹo, Bút, Vở, Sticker, Bánh, Quà Bí Ẩn.

Nút Quay Ngay ở giữa. Khi bấm, vòng quay xoay ngẫu nhiên 3–5 giây rồi dừng ở một ô.

Phát âm thanh vui khi quay và khi dừng.

Hiện kết quả trúng dưới nút quay.

Viết HTML, CSS, jаvascript trong cùng một file.”

Cho phép nhập danh sách phần thưởng ngay trong giao diện (input + thêm/xóa).

Thêm xác suất (ví dụ Quà Bí Ẩn chỉ 5%).

Lưu lịch sử trúng thưởng (mảng/LocalStorage) để không trùng người.

Nút Reset vòng chơi.

Kịch bản dùng: tự học mỗi ngày, ôn từ vựng cho HS tiểu học, bài tập về nhà.

Prompt mẫu (dán thẳng vào Canvas):
“Tạo ứng dụng web Flashcard Từ Vựng Tiếng Anh:

Danh sách 10 từ: apple, book, car, dog, flower, sun, moon, chair, school, water.

Mỗi thẻ hiển thị từ tiếng Anh, ảnh minh họa (link ảnh miễn phí), và nút Nghephát âm (dùng SpeechSynthesis API).

Có nút Tiếp theo để chuyển thẻ; có Chọn ngẫu nhiên.

Giao diện dễ nhìn, phù hợp HS tiểu học, tối ưu di động.

HTML/CSS/JS trong cùng một file.”

Mỗi ngày học 10–15 phút, bấm “Nghe” và nhắc lại.

Đổi bộ từ theo chủ đề (đồ vật lớp học, động vật, nghề nghiệp…).

Sau 3 ngày, chuyển sang chế độ ẩn nghĩa để tự kiểm tra.

Thêm đánh dấu đã nhớ/chưa nhớ → hệ thống ôn lặp lại cách quãng(spaced repetition).

Lưu tiến độ bằng LocalStorage (không cần server).

Nút Đổi chủ đề (tải file JSON đơn giản chứa danh sách từ + link ảnh).

Kịch bản dùng: kiểm tra nhanh 5–10 phút cuối giờ, khởi động đầu tiết, ôn tập trước kiểm tra.

Prompt mẫu (dán thẳng vào Canvas):
“Tạo ứng dụng web Quiz Lịch Sử Việt Nam:

Có 5 câu trắc nghiệm, mỗi câu 4 đáp án (phù hợp HS THCS/THPT, mốc lịch sử tiêu biểu).

Khi chọn đáp án → báo đúng/sai ngay; nếu sai, hiển thị đáp án đúng.

Cuối cùng hiển thị số câu đúng / 5 và có nút Làm lại.

Giao diện rõ ràng, màu sắc thân thiện, chạy tốt trên di động.

Toàn bộ HTML/CSS/JS trong cùng một file.”

Giáo viên chạy app trên màn hình lớn để cả lớp chơi chung, hoặc gửi link để HS làm trên điện thoại.

Với lớp đông, chia nhóm 3–5 HS để tăng tương tác.

Cách không cần server: chèn Google Form link ở cuối quiz → HS nhập điểm + tên rồi gửi.

(Nâng cao) Lưu điểm LocalStorage trên máy người học, hoặc dùng Apps Script/Web App để ghi vào Google Sheets.

Bộ ngân hàng câu hỏi theo chủ đề; chế độ ngẫu nhiên.

Đếm thời gian mỗi câu; bảng xếp hạng ở cuối.

Xuất file CSV kết quả để giáo viên phân tích nhanh.

Bắt đầu đơn giản → chạy mượt → rồi thêm tính năng.

Prompt phải định lượng: “10 từ vựng”, “5 câu hỏi”, “xoay 3–5 giây”, “màu chủ đạo xanh dương”.

Luôn yêu cầu: “HTML/CSS/JS trong cùng file, tối ưu di động” để tránh phân mảnh.

Chữ to – tương phản rõ – nút dễ bấm (đặc biệt trên di động).

Ảnh minh họa: dùng ảnh nhỏ – tải nhanh (nếu ảnh online chậm, thay link khác).

Đặt trạng thái/feedback rõ ràng: khi bấm nút → phải có thay đổi (đổi màu, rung nhẹ, hiện thông báo).

Tái sử dụng: tạo template riêng (khung HTML/CSS ưa thích) → dán nội dung mới là xong.

Prompt (copy-dán):
“Tạo ứng dụng web "Vòng Quay May Mắn" với các yêu cầu:

Giao diện đơn giản, màu sắc tươi sáng.

Có 6 ô phần thưởng: "Kẹo", "Bút", "Vở", "Sticker", "Bánh", "Quà Bí Ẩn".

Nút "Quay Ngay" ở giữa.

Khi quay, vòng tròn xoay ngẫu nhiên 3–5 giây rồi dừng lại ở một phần thưởng.

Có hiệu ứng âm thanh vui nhộn khi quay và khi dừng.

Viết bằng HTML, CSS, jаvascript trong cùng một file.

Hiển thị ngay kết quả trúng thưởng dưới nút quay.”

Nâng cấp: thêm nhập phần thưởng tùy biến, xác suất, anti-trùng.

Prompt (copy-dán):
“Tạo ứng dụng web "Flashcard Từ Vựng Tiếng Anh" với yêu cầu:

Danh sách 10 từ vựng: apple, book, car, dog, flower, sun, moon, chair, school, water.

Mỗi thẻ flashcard hiển thị:

Từ tiếng Anh.

Ảnh minh họa (lấy từ link ảnh online miễn phí).

Nút "Nghe" để phát âm tiếng Anh (dùng SpeechSynthesis API).

Có nút "Tiếp theo" để chuyển sang thẻ tiếp theo.

Giao diện dễ nhìn, phù hợp học sinh tiểu học.

Code HTML, CSS, jаvascript trong cùng file.”

Nâng cấp: thêm đánh dấu đã nhớ, thứ tự ngẫu nhiên, đổi chủ đề bằng JSON.

Prompt (copy-dán):
“Tạo ứng dụng web "Quiz Lịch Sử Việt Nam" với yêu cầu:

5 câu hỏi trắc nghiệm về lịch sử Việt Nam, mỗi câu có 4 đáp án.

Nội dung câu hỏi phù hợp học sinh cấp 2–3, bao gồm các mốc lịch sử tiêu biểu.

Khi chọn đáp án → báo đúng/sai ngay lập tức và hiển thị đáp án đúng nếu sai.

Hiển thị số câu đúng/tổng số câu khi hoàn thành.

Có nút "Làm lại" để chơi lại từ đầu.

Giao diện rõ ràng, màu sắc thân thiện với học sinh.

Viết toàn bộ bằng HTML, CSS, jаvascript trong cùng một file.”

Nâng cấp: đếm thời gian, bảng xếp hạng, Google Form thu điểm.

Thử trên điện thoại: chữ đủ lớn, nút dễ bấm, không tràn màn hình.

Kiểm tra không cần Internet mạnh (ảnh nhẹ, không phụ thuộc server ngoài).

Đặt tiêu đề rõ, mô tả ngắn gọn cách chơi/cách học ngay trong app.

Có nút Reset/Làm lại.

Nếu chia sẻ cho HS: kèm hướng dẫn 3 dòng trong tin nhắn/zalo/lms để các em không lúng túng.

Nếu thu điểm: gắn Google Form ở cuối app.

Không thấy ảnh → Link ảnh hỏng hoặc chặn CORS → đổi sang ảnh khác/nguồn khác.

Âm thanh không phát trên mobile → một số trình duyệt yêu cầu tương tác người dùng (bấm nút) mới cho phát; đảm bảo nút “Nghe” rõ ràng.

UI bị vỡ trên điện thoại → thêm meta viewport, dùng đơn vị %/vw/vh, hạn chế kích thước cố định px.

Tiếng Việt lỗi font → dùng font phổ biến (VD: system fonts) hoặc nhúng Google Fonts.

Hiệu năng chậm → giảm ảnh, bỏ hiệu ứng nặng, tránh vòng lặp không cần thiết.

Logic sai → yêu cầu Gemini “giải thích mã”, hỏi “tại sao kết quả…”, “viết lại hàm …”.

Ngày 1: Làm xong Vòng quay cơ bản + chỉnh màu.

Ngày 2: Thêm xác suất + anti-trùng.

Ngày 3: Làm Flashcard 10 từ + nút Nghe.

Ngày 4: Thêm đánh dấu đã nhớ + ngẫu nhiên.

Ngày 5: Làm Quiz 5 câu + báo đúng/sai.

Ngày 6: Thêm đếm thời gian + Google Form thu điểm.

Ngày 7: Tổng hợp thành “Bộ công cụ lớp học mini” (menu trang chủ liên kết 3 app).

3 app chạy mượt trên di động, < 3 thao tác để bắt đầu.

Mỗi app có Reset và Hướng dẫn dùng.

Quiz có ≥80% học sinh tham gia trong 5 phút đầu khi chia sẻ link.

Gemini Canvas giúp bạn biến ý tưởng thành ứng dụng mà không cần biết code.

Dùng cho giải trí (kéo tương tác), học tập (cá nhân hóa), giảng dạy (nhanh – gọn – hiệu quả).

Cứ bắt đầu đơn giản, chạy được → nâng cấp có định hướng: dữ liệu tùy biến, lưu tiến độ, thu điểm.