Xây dựng website miễn phí, không cần biết code - bằng Stitch và Google AI Studio

Bạn sẽ làm ra gì?

Một trang web nhỏ, mở lên là thấy nền trời xanh với từng quả bóng bay, mỗi quả mang tên một học sinh trong lớp. Có một nút to ở giữa ghi “Bốc thăm”. Giáo viên chiếu trang này lên tivi/máy chiếu, bấm nút, các quả bóng bay lượn lờ, xáo trộn vài giây rồi một quả bóng phóng to lên giữa màn hình kèm hiệu ứng confetti, lộ ra tên học sinh được gọi lên trả bài. Quả bóng đó sau đó mờ đi/gạch tên - để lượt bốc thăm tiếp theo trong buổi học không gọi trúng lại em đó, cho đến khi giáo viên bấm “Bốc lại từ đầu”.

Đây chính là ví dụ xuyên suốt bài viết. Toàn bộ được dựng bằng cách mô tả bằng lời (tiếng Việt, không cần thuật ngữ kỹ thuật), qua hai công cụ miễn phí của Google:

• Stitch - vẽ ra giao diện (bầu trời, bong bóng, nút bấm, màu sắc, hiệu ứng) từ mô tả bằng lời.
• Google AI Studio (chế độ Build) - biến giao diện tĩnh đó thành một trang web hoạt động thật: bấm nút thật sự chọn ngẫu nhiên, nhớ được ai đã bị gọi, và giáo viên tự thêm/sửa danh sách học sinh mà không cần đụng vào code.

Bạn sẽ đi qua 5 bước: thiết kế → lập trình bằng lời → kiểm thử → triển khai (deploy) để có link thật → dùng trên lớp và cập nhật sau này. Cả hai công cụ đều miễn phí, chỉ cần tài khoản Google, không cần thẻ tín dụng.

Bạn cần chuẩn bị gì?

• Một tài khoản Gmail cá nhân. Nếu trường bạn cấp email dạng “Google Workspace for Education”, đừng dùng email đó để deploy - lý do giải thích ở Bước 4.
• Một trình duyệt web (Chrome, Edge… đều được), máy tính hoặc máy tính bảng.
• Danh sách tên học sinh của một lớp (chỉ cần tên/biệt danh, không cần thông tin gì khác).
• Khoảng 40-60 phút cho lần làm đầu tiên.

Không cần cài đặt phần mềm gì thêm.

Bước 1: Vẽ giao diện bong bóng bằng Stitch

Stitch là công cụ của Google, cho phép bạn gõ mô tả bằng lời và nó vẽ ra giao diện web tương ứng - giống như việc kể ý tưởng cho một hoạ sĩ thiết kế nghe.

1. Vào stitch.withgoogle.com, đăng nhập bằng tài khoản Google.

2. Bấm New project (Dự án mới), chọn kiểu Web (không chọn Mobile app - vì mình cần một trang web mở được trên trình duyệt bất kỳ, kể cả tivi thông minh hay máy chiếu kết nối laptop).

3. Ở ô mô tả, gõ một prompt càng cụ thể càng tốt. Bạn có thể copy gần như nguyên văn mẫu dưới đây, chỉ đổi tên lớp:

   Thiết kế một trang web tên “Bốc thăm trả bài - Lớp 4A”. Nền là bầu trời xanh nhạt có vài đám mây. Ở giữa màn hình là khoảng 15 quả bóng bay nhiều màu (đỏ, vàng, xanh lá, xanh dương, tím), mỗi quả có một cái tên học sinh viết trên đó, các quả bóng trôi nhẹ nhàng lên xuống như đang bay. Phía dưới có một nút bấm to, tròn, màu cam, chữ “Bốc thăm ngay”. Phong cách vui tươi, dễ thương, phù hợp học sinh tiểu học, chữ đủ to để nhìn từ xa khi chiếu lên tivi lớp học.

4. Stitch sẽ vẽ ra một màn hình giao diện tĩnh. Nhìn vào kết quả, bạn sẽ thấy đúng bố cục mình mô tả nhưng bằng tên học sinh mẫu (giả) - đừng lo, tên thật sẽ nhập ở Bước 2. Đây là kết quả thật khi mình thử dùng đúng prompt trên với Stitch:

   

5. Chưa ưng gì thì cứ chỉnh tiếp bằng lời, gõ thẳng vào ô chat bên dưới màn hình vừa tạo, ví dụ:

   • “Đổi màu nút bấm sang màu cam đậm hơn, chữ trắng, in đậm.”
   • “Bóng bay to hơn một chút và có dây buộc lòng thòng phía dưới cho giống bóng bay thật.”
   • “Thêm một dòng chữ nhỏ phía trên nút bấm: ‘Còn lại: 15 bạn chưa được gọi’.”

6. Khi đã ưng bố cục, màu sắc, tạo thêm màn hình thứ hai mô tả lúc bốc thăm xong, để Stitch giữ đúng phong cách:

   Vẽ tiếp màn hình thứ hai cùng phong cách: một quả bóng bay phóng to ở giữa màn hình, xung quanh có hiệu ứng giấy màu confetti rơi, tên học sinh hiện to rõ trên quả bóng đó, các quả bóng còn lại lùi ra mép màn hình và hơi mờ đi.

   Kết quả trông sẽ như thế này:

   

7. Ưng cả hai màn hình rồi, tìm nút Export/Code (thường ở góc trên) để lấy mã nguồn (Stitch xuất được HTML/CSS). Giữ nguyên tab này, bạn sẽ cần copy đoạn mã ở bước sau.

Mẹo cho người mới

Đừng cố mô tả mọi thứ trong một câu dài. Làm xong màn hình chính trước, ưng ý rồi mới yêu cầu vẽ tiếp màn hình “lúc bốc thăm xong” - dễ kiểm soát và sửa lỗi hơn nhiều so với việc nhồi tất cả vào một prompt.

Đến đây bạn đã có giao diện đẹp - nhưng nút “Bốc thăm ngay” mới chỉ là hình vẽ, bấm vào chưa có chuyện gì xảy ra cả. Bước tiếp theo sẽ “thổi hồn” cho nó.

Bước 2: Biến nút bấm thành app thật bằng Google AI Studio

Google AI Studio có chế độ Build - nơi bạn mô tả bằng lời và Gemini (mô hình AI của Google) tự viết code phía sau, hiển thị bản xem thử chạy được ngay, và bạn tiếp tục trò chuyện để chỉnh sửa.

1. Vào aistudio.google.com/apps, đăng nhập bằng tài khoản Google (dùng luôn tài khoản vừa đăng nhập ở Stitch cho tiện).

2. Bấm New app hoặc dấu + để tạo dự án mới trong chế độ Build.

3. Dán đoạn mã HTML/CSS đã export từ Stitch vào ô chat, kèm theo yêu cầu mô tả rõ app cần làm được gì. Đây là phần quan trọng nhất bài - prompt càng rõ, app càng đúng ý. Ví dụ bạn có thể dùng gần như nguyên văn:

   Đây là giao diện tôi đã thiết kế cho một trang “bốc thăm gọi tên học sinh trả bài”. Hãy biến nó thành một trang web hoạt động thật với các yêu cầu sau:

   1. Có một danh sách tên học sinh mà tôi có thể xem, thêm, xoá, sửa ngay trên trang (không cần vào code) - ví dụ qua một khung nhập ở góc trang, mỗi dòng một tên.
   2. Mỗi tên học sinh hiển thị thành một quả bóng bay, đúng phong cách trong giao diện tôi gửi.
   3. Khi tôi bấm nút “Bốc thăm ngay”: chọn ngẫu nhiên một bạn trong số những bạn CHƯA được gọi, phóng to quả bóng đó kèm hiệu ứng confetti giống màn hình thứ hai tôi gửi, rồi làm quả bóng đó mờ đi và không được chọn lại nữa cho tới khi tôi bấm nút khác.
   4. Thêm một nút “Bốc lại từ đầu” để làm mới toàn bộ, tất cả các bạn lại có thể được gọi.
   5. Ghi nhớ danh sách và trạng thái ai đã được gọi kể cả khi tôi lỡ tắt/mở lại trình duyệt (lưu ngay trên máy, không cần tài khoản hay đăng nhập gì thêm).
   6. Không hiển thị số điện thoại, ngày sinh hay bất kỳ thông tin nào khác ngoài tên - đây là trang dùng công khai trên máy chiếu lớp học.

4. Gemini sẽ sinh ra ứng dụng và hiển thị 3 phần cùng lúc trên màn hình, đại khái như sơ đồ dưới đây:

   

   • Code - toàn bộ mã nguồn phía sau (bạn không cần đọc hay hiểu, chỉ cần biết nó nằm ở đây).
   • Preview - bản xem thử chạy được ngay, y hệt trang web thật, bấm thử được luôn trong khung này.
   • Ô chat - nơi bạn tiếp tục ra yêu cầu chỉnh sửa bằng lời thường.

5. Thử bấm “Bốc thăm ngay” vài lần trong khung Preview. Có gì chưa ưng, cứ mô tả lại cho Gemini sửa, ví dụ:

   • “Hiệu ứng phóng to quả bóng đang hơi nhanh, làm chậm lại khoảng 1.5 giây cho hồi hộp hơn.”
   • “Thêm âm thanh ‘tang tang’ ngắn khi bốc thăm xong.” (nếu app hỗ trợ âm thanh)
   • “Thêm dòng chữ ‘Còn lại: X bạn chưa được gọi’ cập nhật tự động sau mỗi lần bốc thăm.”
   • “Khung nhập danh sách học sinh đang hơi nhỏ, làm to hơn và thêm nút ‘Lưu danh sách’.”

   Không giới hạn số lần chỉnh sửa trong một phiên - cứ mô tả cho tới khi ưng ý.

Bước 3: Kiểm thử kỹ trước khi dùng thật trên lớp

Trước khi chiếu lên tivi lớp học, hãy tự kiểm tra như một học sinh tinh nghịch sẽ làm:

• Nhập thử danh sách 20-30 tên, bấm “Bốc thăm ngay” liên tục cho tới khi hết sạch - kiểm tra không bạn nào bị gọi 2 lần, và không bị lỗi khi bốc tới bạn cuối cùng.
• Bấm “Bốc lại từ đầu”, kiểm tra danh sách được làm mới đúng, không còn ai bị mờ/gạch tên.
• Tắt trình duyệt, mở lại - kiểm tra danh sách học sinh và trạng thái ai đã được gọi vẫn còn nguyên (đây là yêu cầu ở mục 5 của prompt Bước 2).
• Thử xoá một tên, thêm một tên mới, lưu lại - kiểm tra quả bóng cập nhật đúng.
• Mở trang trên chính chiếc máy/tivi sẽ dùng thật trên lớp, kiểm tra chữ đủ to để đọc từ cuối lớp.

Phát hiện lỗi gì, quay lại ô chat trong AI Studio, mô tả đúng hiện tượng (ví dụ: “khi bốc thăm tới bạn cuối cùng trong danh sách, nút Bốc thăm bị đứng im không phản ứng, hãy sửa lại”) và để Gemini sửa tiếp.

Bước 4: Triển khai (deploy) để có link thật

Bản xem thử (Preview) chỉ bạn thấy được. Để chia sẻ cho đồng nghiệp, hoặc mở trên máy khác, bạn cần deploy để có một địa chỉ web (URL) thật.

1. Trong AI Studio, bấm nút Deploy. Ứng dụng sẽ được đưa lên Google Cloud Run - hạ tầng chạy web của Google.

2. Google có gói Starter Tier: cho phép deploy miễn phí tới 2 ứng dụng mà không cần tạo dự án Google Cloud hay khai báo thẻ thanh toán. Mức này thoải mái đủ dùng cho một trang bốc thăm nhỏ như thế này.

   

Lưu ý quan trọng về tài khoản

Gói Starter Tier miễn phí không áp dụng nếu tài khoản Google của bạn:

• đã từng liên kết với một tài khoản thanh toán (billing account) của Google Cloud, hoặc
• là tài khoản Google Workspace for Education (loại email do nhiều trường học cấp cho giáo viên).

Nếu email trường bạn thuộc dạng này, hãy dùng một tài khoản Gmail cá nhân bình thường để đăng nhập AI Studio và deploy, tránh bị yêu cầu khai báo thanh toán.

3. Sau khi deploy xong, AI Studio đưa cho bạn một đường link công khai (chạy trên Cloud Run). Đây là link bạn sẽ mở trên tivi/máy chiếu lớp học, hoặc gửi cho đồng nghiệp cùng khối dùng.

Bước 5: Dùng trên lớp và cập nhật mỗi học kỳ

• Lưu link vào trình duyệt (bookmark) trên máy tính lớp học hoặc máy chiếu, để đầu giờ chỉ cần bấm mở, không phải gõ lại địa chỉ.
• Đầu mỗi học kỳ hoặc khi lớp đổi sĩ số, mở lại đúng dự án trong AI Studio, dùng ô chat yêu cầu cập nhật danh sách (hoặc chỉnh trực tiếp trong khung nhập trên trang nếu app đã hỗ trợ), rồi bấm Deploy lại - link cũ không đổi.
• Muốn đổi giao diện (màu sắc, hình nền theo mùa, theo môn học…), quay lại Stitch chỉnh thiết kế, xuất code mới, rồi lặp lại Bước 2.

Mở rộng ý tưởng

Khi đã quen quy trình, bạn có thể áp dụng đúng 5 bước trên cho nhiều ý tưởng khác chỉ bằng cách đổi prompt:

• Bốc thăm chia nhóm ngẫu nhiên: nhập sĩ số cả lớp, chia thành các nhóm 4-5 bạn ngẫu nhiên, hiển thị từng nhóm trong một khung riêng.
• Vòng quay phần thưởng: thay bong bóng bằng một vòng quay may mắn (voucher, sticker, được cô khen…) cho học sinh ngoan trong tuần.
• Điểm danh nhanh: mỗi bong bóng có thêm nút “Vắng/Có mặt”, cuối giờ xuất ra danh sách vắng mặt.

Những giới hạn cần biết trước khi bắt đầu

• Stitch có giới hạn số lượt tạo/chỉnh sửa miễn phí mỗi ngày. Với một dự án nhỏ như trang bốc thăm này, mức miễn phí thường là đủ; nếu dùng hết trong ngày, quay lại vào hôm sau.
• Starter Tier chỉ cho deploy tối đa 2 ứng dụng miễn phí trên một tài khoản. Cần nhiều hơn, hoặc lượng truy cập tăng cao bất thường, Google sẽ yêu cầu chuyển sang dự án Cloud Run tiêu chuẩn (vẫn có tầng miễn phí khá rộng cho lượng truy cập nhỏ như một lớp học).
• Chỉ nhập tên/biệt danh học sinh, không nhập số điện thoại, địa chỉ, kết quả học tập hay bất kỳ thông tin nhạy cảm nào vào trang - vì đây là trang công khai, không phải nơi lưu trữ dữ liệu quan trọng lâu dài.
• Dữ liệu “ghi nhớ trên máy” (mục 5 ở prompt Bước 2) chỉ lưu trên trình duyệt/máy đang dùng - mở trang trên máy khác sẽ không thấy danh sách cũ, cần nhập lại hoặc cập nhật qua AI Studio rồi deploy lại.

Kết luận

Chỉ với hai công cụ miễn phí và không một dòng code nào, một giáo viên hoàn toàn có thể tự tay dựng một trang web nhỏ nhưng dùng thật được trên lớp - việc trước đây thường phải nhờ người biết lập trình. Bí quyết không nằm ở việc gõ đúng “cú pháp” nào cả, mà ở việc mô tả rõ ràng, cụ thể, từng bước một - giống hệt cách bạn dặn dò một người mới vào nghề. Cứ mạnh dạn thử với ý tưởng bong bóng gọi tên ở trên, rồi biến tấu theo đúng nhu cầu lớp học của mình.