1. Giới thiệu
Vào ngày 25 tháng 3 năm 2025, Google ra mắt Gemini 2.5. Một trong những khía cạnh đáng nhớ nhất của lần ra mắt này là việc cho phép mọi người dùng thử tính năng "Lập trình nâng cao" [ video]:
Gemini 2.5: Tạo trò chơi khủng long của riêng bạn chỉ bằng một câu lệnh
Trong lớp học lập trình này, bạn sẽ tìm hiểu về "vibe coding" (lập trình theo cảm hứng) cho một ứng dụng đơn giản dành cho trẻ em, bắt đầu từ một câu lệnh chung rồi tuỳ chỉnh theo ý thích của riêng bạn. Chúng tôi sẽ kiểm thử ứng dụng trên p5.js. Cuối cùng, chúng ta sẽ đẩy những thay đổi này lên Lưu trữ Firebase.Điều tuyệt vời nhất là toàn bộ ngăn xếp này hiện miễn phí!
Kiến thức bạn sẽ học được
- Sử dụng Gemini 2.5 để tạo mã rung cho một ứng dụng trò chơi.
- Kiểm thử mã trên p5js.org
- Cách lặp lại và tinh chỉnh câu lệnh / ứng dụng.
- Cách lưu trữ một ứng dụng tĩnh trên Firebase
Lưu ý rằng lớp học lập trình này sử dụng mã do AI tạo; đây là mã không xác định, vì vậy, lớp học lập trình này chứa các nguyên tắc vì tác giả không biết đầu ra của bạn. Ngoài ra, vui lòng KHÔNG sử dụng mã này trong phiên bản phát hành!
2. Điều kiện tiên quyết
Lớp học lập trình này có 2 giai đoạn:
- Chỉ phát triển cho web. Đây là nơi bạn sẽ có nhiều niềm vui nhất và không cần có khả năng lập trình. Đối với hoạt động này, chúng ta sẽ sử dụng giao diện người dùng Gemini ( gemini.google.com) và p5.js.
- Môi trường lập trình cục bộ. Đây là nơi bạn cần một chút kỹ năng viết mã / tạo tập lệnh, cộng với việc cài đặt và sử dụng
npm/npxvà một trình chỉnh sửa cục bộ, chẳng hạn nhưvscodehoặc IntelliJ hoặc bất kỳ trình chỉnh sửa nào. Phần thứ hai này là không bắt buộc và chỉ cần thiết nếu bạn muốn duy trì ứng dụng để bạn bè và gia đình có thể chơi ứng dụng đó trên thiết bị di động hoặc máy tính của họ.
Điều kiện tiên quyết duy nhất cho giai đoạn 1 là Trình duyệt và máy tính (màn hình lớn sẽ giúp ích). Để biết thông tin về giai đoạn 2, hãy đọc tiếp.
Giao diện người dùng của Gemini
gemini.google.com là một nền tảng tuyệt vời để bạn dùng thử tất cả các mô hình Gemini mới nhất, đồng thời tạo hình ảnh và video của riêng mình! Ứng dụng này được tích hợp với các sản phẩm của Google như Google Maps và Khách sạn/Chuyến bay/Bài đánh giá, nhờ đó trở thành người bạn đồng hành lý tưởng để lên kế hoạch cho kỳ nghỉ tiếp theo của bạn!
Lưu ý: Nếu bạn thích lập trình, hãy cân nhắc sử dụng AI Studio, một giao diện tương tự nơi bạn có thể tạo mẫu cho một hoạt động tương tác với LLM (ví dụ: tạo hình ảnh) và lấy mã Python ngay từ trang!
p5.js
p5.js là một thư viện JavaScript mã nguồn mở, miễn phí, giúp các nghệ sĩ, nhà thiết kế, nhà giáo dục và những người khác có thể tiếp cận và tham gia vào hoạt động lập trình sáng tạo. P5.js dựa trên ngôn ngữ Processing và đơn giản hoá quy trình tạo nội dung trực quan và nội dung tương tác bằng mã trong trình duyệt web.
Mã hoá cục bộ [không bắt buộc]
Nếu muốn duy trì ứng dụng, bạn cần thiết lập thêm:
- Trình soạn thảo mã cục bộ ( Visual Studio Code, IntelliJ, ..)
- Một tài khoản git ( github / gitlab / bitbucket) để lưu trữ mã của bạn.
npmđược cài đặt cục bộ, tốt hơn nếu ở không gian người dùng (thông quanpxhoặc công nghệ tương đương).
Ngoài ra, chúng ta sẽ thiết lập một tài khoản Firebase sau.
Bạn cũng cần có một số kỹ năng lập trình, chẳng hạn như:
- Có thể cài đặt gói
npm - Có thể tương tác với hệ thống tệp (tạo thư mục và tệp)
- Có thể tương tác với
git(git add,git commit,git push).
Nếu có bất kỳ nội dung nào khiến bạn cảm thấy khó khăn, hãy nhớ rằng: Các LLM có thể giúp bạn rất nhiều. Bạn có thể sử dụng "Gemini 2.0 flash" hoặc mô hình tương đương, chẳng hạn như để nhận đề xuất. Nếu vẫn quá khó, bạn có thể bỏ qua hoàn toàn giai đoạn 2. Giai đoạn 1 phải đủ hấp dẫn.
3. Hãy tạo trò chơi đầu tiên của chúng ta!
Mở gemini.google.com rồi chọn một mô hình có khả năng tạo mã, chẳng hạn như 2.5. Lựa chọn này có thể khác nhau tuỳ thuộc vào tình trạng còn hàng, chi phí và ngày. Tại thời điểm viết bài này, lựa chọn tốt nhất là:
- Gemini 2.5 Flash (lặp lại nhanh hơn)
- Gemini 2.5 Pro (kết quả tốt hơn).
Bạn có thể xem thêm thông tin về các mô hình Gemini của chúng tôi tại đây.
Câu lệnh đầu tiên của chúng tôi về trò chơi
Như bạn có thể thấy trong video này, câu lệnh ban đầu có thể đơn giản như sau:
Make me a captivating endless runner game. Key instructions on the screen. p5js scene, no HTML. I like pixelated dinosaurs and interesting backgrounds.
Bạn có thể tuỳ chỉnh một chút:
- Bối cảnh thời trung cổ / tương lai / viễn tưởng công nghệ cao
- Có nhiều biểu tượng cảm xúc hay chỉ có một biểu tượng cảm xúc cụ thể?
- Bạn yêu thích màu vàng hoặc nhiều sắc độ của màu tím.
- Có thể trẻ yêu thích kỳ lân, khủng long hoặc pokemon.
Sau khi dán câu lệnh vào trình duyệt, bạn sẽ thấy Gemini đang tư duy.Đúng vậy, Gemini 2.5 là một mô hình tư duy, vì vậy, mô hình này sẽ bắt đầu một số tác vụ mà bạn có thể thấy thay đổi theo thời gian. Bạn có thể nhấp vào trình đơn thả xuống đang thay đổi để xem điều gì đang xảy ra hoặc bạn có thể đợi kết quả:
Cuối cùng, bạn sẽ có một javascript hoạt động.
Giờ đây, bạn có thể nhấp vào nút sao chép ở trên cùng:
Kiểm thử trò chơi trên p5.js
Giờ là lúc bạn có thể kiểm thử trò chơi!
- Mở trình chỉnh sửa p5.js tại đây: https://editor.p5js.org/
- Chọn và xoá mã sketch.js hiện có.
- Dán mã của bạn
Trang của bạn sẽ có dạng như sau:
Cuối cùng, bạn có thể nhấn nút PHÁT.
Giờ đây, có thể xảy ra hai trường hợp: mã của bạn hoạt động hoặc không hoạt động. Hãy làm theo hướng dẫn tuỳ thuộc vào cả hai trường hợp:
- Mã của bạn không hoạt động
- Mã của bạn hoạt động ngay từ lần thử đầu tiên!
Hãy xem cách quản lý cả hai điều kiện này trong hai đoạn tiếp theo.
(trường hợp 1) Mã của tôi không hoạt động!
Nếu gặp phải lỗi như thế này, bạn chỉ cần sao chép và dán lỗi đó vào Gemini. Hãy để anh ấy sửa mã cho bạn!
(trường hợp 2) Mã của tôi hoạt động!
Nếu mã của bạn hoạt động, bạn sẽ thấy một trò chơi trực quan ở cuối bên phải của trang.
👏 Xin chúc mừng, bạn đang chạy trò chơi AI đầu tiên của mình!
Lưu ý: Khi bạn có mã, ứng dụng sẽ chỉ hoạt động trong trình duyệt của bạn. Nếu muốn cho gia đình và bạn bè xem ứng dụng, bạn cần có một giải pháp lưu trữ. Thật may là chúng tôi có một lựa chọn tuyệt vời dành cho bạn! Tiếp tục đọc.
Bây giờ, bạn đã sẵn sàng cho chương tiếp theo.
Các lần lặp lại tiếp theo
Bây giờ là lúc bạn lưu mã ở đâu đó để phòng trường hợp mã bị hỏng. Nếu muốn, bạn có thể lặp lại một lần. Ví dụ: tác giả rất thích cú nhảy đôi của Super Mario, vì vậy, bạn có thể thêm nội dung như sau:
The game is great, thanks! Please allow for my character to double jump.
Bạn có thể điều chỉnh mọi thứ theo ý muốn! Có thể bạn muốn lưu tên nhân vật để đạt điểm số cao hơn hoặc tăng tốc độ theo thời gian để làm cho trò chơi khó hơn, v.v. Tiếng Anh là ngôn ngữ duy nhất bạn có thể dùng để viết câu lệnh!
Lưu ý: Gemini thường chỉ cung cấp cho bạn thay đổi mà bạn cần áp dụng (ví dụ: đây là thay đổi cho hàm XYZ). Bạn có thể đặt câu lệnh để câu lệnh cung cấp cho bạn toàn bộ mã đã cập nhật, chẳng hạn như
"Please give me the entire updated code, not just the changed function"
. Điều này sẽ giúp bạn dễ dàng cắt và dán hơn.
Chú ý
Bạn nên đánh dấu trang cho cuộc trò chuyện với Gemini. Có thể bạn muốn đổi tên thành "p5js my first game" hoặc viết đường liên kết cố định đến Gemini, chẳng hạn như " https://gemini.google.com/app/abcdef123456789" để dùng sau.
4. Hãy chạy mã này cục bộ
Đến thời điểm này, bạn phải có:
- Một cửa sổ trình duyệt Gemini đang mở với một số mã hoạt động.
- Một cửa sổ trình duyệt p5.js đang mở có một trò chơi đang hoạt động
- Môi trường lập trình cục bộ đã cài đặt
npm.
Đây là phần khó hơn của lớp học lập trình. Bạn phải có một số kinh nghiệm lập trình cơ bản.
Cài đặt các phần phụ thuộc
Nếu bạn thiếu npm và node, thì cách tốt nhất là cài đặt npm thông qua một số trình quản lý phiên bản, chẳng hạn như nvm . Làm theo hướng dẫn cài đặt dành cho hệ điều hành của bạn.
Chúng tôi cũng giả định rằng bạn đang sử dụng một IDE mã hoá. Chúng ta sẽ sử dụng mã Visual Studio trong ảnh chụp màn hình và ví dụ, nhưng bạn có thể dùng bất kỳ mã nào.
Thiết lập môi trường cục bộ
Đây là thời điểm bạn có thể tạo cấu trúc tệp của riêng mình.
Một tập lệnh thiết lập được đưa ra chỉ nhằm mục đích minh hoạ. Bạn có thể thực hiện việc này theo cách thủ công bằng cách tạo thư mục và tệp:
# This works for Mac and Linux. For Windows, please use other tools. mkdir my-first-vibecoding-project/ cd my-first-vibecoding-project/ git init touch README.md PROMPT.md mkdir public/ cd public/ touch index.html sketch.js style.css git add . # Skipping quotes which can be tricky git commit -a -m committing_empty_skeleton
Cấu trúc thư mục cuối cùng sẽ có dạng như sau:
my-first-vibecoding-project/
├── PROMPT.md
├── README.md
└── public
├── index.html
├── sketch.js
└── style.css
Bạn cũng có thể tìm thấy thông tin này tại đây.
Bây giờ, hãy mở trình soạn thảo mã mà bạn yêu thích (ví dụ: code my-first-vibecoding-project/) rồi bắt đầu dán nội dung của editor.p5js.org vào 3 tệp trong public/:
README.md← Tại đây, bạn có thể đặt đường liên kết cố định đến cuộc trò chuyện với Gemini và đây là nơi bạn đặt trang đích cho ứng dụng khi ứng dụng ra mắt.PROMPT.md← Tại đây, bạn có thể muốn thêm tất cả câu lệnh của mình, được phân tách bằng một đoạn văn H2. Nếu muốn giải thích lý do bạn đưa ra một câu lệnh nào đó, bạn có thể đặt câu lệnh đó trong 3 dấu nháy ngược ( ví dụ).- **
public/index.html** ← sao chép mã HTML của bạn vào đây - **
public/sketch.js** ← sao chép mã JS của bạn vào đây - **
public/style.css** ← sao chép mã CSS của bạn vào đây
Thư mục công khai có thể lưu trữ các thành phần bổ sung, chẳng hạn như một tệp PNG tuỳ chỉnh.
5. Thiết lập và triển khai lên Firebase
Thiết lập Firebase (chỉ lần đầu)
Đảm bảo bạn đã cài đặt npm trong máy.
Trong một cửa sổ dòng lệnh, hãy nhập một trong các lệnh sau (cả hai đều hoạt động):
# to install on the machine (requires privilege) npm install -g firebase-tools # to install locally (low privilege needed but might need to repeat a few times) npm install firebase-tools
Giờ đây, bạn có thể gọi lệnh firebase. Nếu bạn gặp vấn đề, hãy tham khảo tài liệu công khai.
Khởi chạy Firebase
Trong phần này, chúng ta sẽ thiết lập dịch vụ lưu trữ Firebase. Đây là một quy trình rất đơn giản, nhưng có thể bạn sẽ mất một chút thời gian để làm quen với quy trình này trong lần đầu tiên.
Đảm bảo bạn đang ở trong thư mục ngay phía trên thư mục public/ chứa các tệp của bạn. Danh sách (ls -al hoặc dir) sẽ có dạng như sau:
$ ls PROMPT.md README.md public/
- [bước 1] Trên bảng điều khiển, hãy nhập:
firebase init
- Di chuyển con trỏ xuống "Hosting: .." (Lưu trữ: ..) rồi nhấn PHÍM CÁCH, sau đó nhấn ENTER. (Tại sao? Vì đây là câu hỏi trắc nghiệm, nên bạn cần chọn và chuyển sang trang tiếp theo)
- [bước 2] Giờ đây, bạn có thể chọn một dự án hiện có (lựa chọn 1) hoặc tạo một dự án mới (lựa chọn 2):
- Lưu ý: Nếu bạn có một Dự án trên đám mây hiện có, thì dự án đó có thể không phải là dự án Firebase. Dự án Firebase là một nhóm nhỏ của dự án GCP. Bạn cần làm thêm để biến chúng thành dự án Firebase. Đây là mục đích của (lựa chọn 3).
- Nếu chưa quyết định, hãy sử dụng "Create a new project" (Tạo dự án mới) và thêm một số tên như "p5js-YOURNAME-YOURAPP" (ví dụ: "p5js-riccardo-tetris").
- [bước 3]
What would you like to call your project? (defaults to your project ID) (p5js-riccardo-tetris) - Nhấn phím ENTER.
- [bước 4]
? What do you want to use as your public directory? (public) - Nhấn ENTER (chúng tôi thiết lập
public/có mục đích)
- [bước 5]
? Configure as a single-page app (rewrite all urls to /index.html)? No - nhấn ENTER (không)
- [bước 6]
? Set up automatic builds and deploys with GitHub? No - Nhấn ENTER – KHÔNG
- [bước 7]
? File public/index.html already exists. Overwrite? (y/N) - Nhấn ENTER (không).
- CẢNH BÁO Điều này có thể dẫn đến lỗi; nếu bạn ghi đè, index.html mới sẽ không tương thích với p5js!
Nếu mọi thứ hoạt động bình thường, bạn sẽ thấy như sau:
Các thao tác này sẽ tạo ra một số tệp:
.firebaserc .gitignore firebase.json public/404.html
Cụ thể, .firebaserc phải có mã dự án của bạn mà bạn có thể kéo theo cách lập trình bằng mã này: cat .firebaserc | jq .projects.default -r
Cảnh báo: Kiểm tra index.html. Nếu dài hơn 16 dòng và/hoặc có từ firebase trong đó, thì có nghĩa là bạn đã vô tình ghi đè các tệp p5js. Không sao cả, bạn chỉ cần nhớ lấy lại tệp index.html cũ từ git hoặc từ trình chỉnh sửa p5js.
Thử nghiệm cục bộ
Để giảm độ trễ của vòng hồi tiếp, trước tiên, bạn nên thử các thao tác cục bộ.
Để làm như vậy, bạn có thể dùng bộ CLI mạnh mẽ của nhóm Firebase. Ví dụ:
$ firebase emulators:start
sẽ khởi động một máy chủ web trên cổng 5000 ( http://127.0.0.1:5000/ ) để bạn có thể kiểm thử cục bộ trước khi đẩy.
Triển khai cho Firebase
Bây giờ là lúc thực hiện lệnh cuối cùng:
$ firebase deploy
Thao tác này sẽ kích hoạt một số hành động. Một vài dòng cuối cùng sẽ có nội dung như sau:
$ firebase deploy [...] ✔ hosting[YOUR_PROJECT]: release complete ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/YOUR_PROJECT/overview Hosting URL: https://YOUR_PROJECT.web.app
Thao tác này sẽ cung cấp cho bạn URL lưu trữ. Hãy dùng thử ngay!
Nếu quá trình triển khai thành công nhưng bạn thấy một số trang trống hoặc quá trình triển khai bị lỗi, bạn có thể làm một số việc sau:
- Mở "Công cụ dành cho nhà phát triển" của trình duyệt, tìm lỗi và yêu cầu Gemini giúp bạn khắc phục lỗi đó bằng một câu lệnh như sau:
I've deployed the script correctly with Firebase, but I now see a blank page with this error: [ paste detailed JS console error ]
♾️ Lặp lại!
Bạn có thể lặp lại các bước này bao nhiêu lần tuỳ thích. Bạn có thể tiếp tục đưa ra câu lệnh cho đến khi hài lòng với kết quả.
Bạn cần lưu ý một số điều sau:
- Vòng lặp lặp lại nhanh hơn nhiều trong Gemini > p5.js > vòng lặp Gemini so với trong Gemini > máy chủ lưu trữ cục bộ > triển khai vào Cloud Run > ứng dụng kiểm thử trên trình duyệt (nhấn làm mới).
- Sử dụng git để tạo phiên bản cho cả câu lệnh và mã. Bạn có thể muốn quay lại lời nhắc N và mã N. Đặc biệt, bạn nên git commit mọi
sketch.jsmà bạn đẩy lên, vì lỗi có thể ẩn nấp mà không bị phát hiện ở đó.
Xin lưu ý rằng một số trò chơi hoạt động tốt với bàn phím nhưng không hoạt động tốt với chuột hoặc thao tác nhấn trên điện thoại di động. Đây là thời điểm thích hợp để cải thiện mã.
6. Mẹo tạo câu lệnh
Một số mẹo từ việc tạo khá nhiều trò chơi.
Lập phiên bản cho câu lệnh
Có thể bạn sẽ thấy lỗi trong câu lệnh ban đầu. Có phiên bản git của ứng dụng. Có một số đường dẫn mã ở đây:
- Nếu bạn thích những gì mình thấy và muốn lặp lại với Gemini bằng các câu lệnh phụ tiếp theo, thì bạn có thể theo dõi tất cả những câu lệnh đó ở một nơi nào đó (câu lệnh 1,2,3 – ví dụ 1 gồm 3 câu lệnh – example2).
- Nếu không quá coi trọng ứng dụng do câu lệnh 1 tạo ra, bạn có thể muốn hoàn thiện câu lệnh, loại bỏ mã và khởi động lại bằng mã đã sửa đổi (câu lệnh 1 phiên bản 1, câu lệnh 1 phiên bản 2, câu lệnh 1 phiên bản 3,...)
Tất nhiên, bạn có thể kết hợp 2 phương pháp này.
Chức năng trên thiết bị di động
Tuỳ thuộc vào trò chơi bạn tạo, bạn có thể cần tương tác với người dùng. Cuộc tương tác này có cần bàn phím không? Hoặc có thể sử dụng bằng cách chỉ cần nhấn vào màn hình (ví dụ: bằng thiết bị di động)? Hãy nêu rõ điều này trong lời nhắc. Bạn có thể phải tạo một số nút trên bàn phím (xem ví dụ về Tetris 3D của tôi). Xem thêm dungemoji rắc rối về khả năng tương thích với thiết bị di động.
Gửi ý kiến phản hồi về lỗi JavaScript / ảnh chụp màn hình trực tiếp cho Gemini
Vì Gemini không thể xem hoạt động tương tác của bạn với p5js, hãy nhớ dán mọi lỗi Javascript vào Gemini. Xin lưu ý rằng Gemini là mô hình đa phương thức, vì vậy, nếu có thay đổi về giao diện người dùng (chẳng hạn như giảm kích thước tiêu đề hoặc giảm điểm số), bạn cũng có thể đính kèm ảnh chụp màn hình của trò chơi! Việc nhận phản hồi về mã chưa bao giờ thú vị đến thế!
7. Xin chúc mừng!
🎉 Chúc mừng bạn đã hoàn thành lớp học lập trình này.
Chúng ta đã thấy việc tạo một trò chơi bằng Gemini dễ dàng như thế nào và Firebase cung cấp một giải pháp lưu trữ dễ dàng để duy trì và chia sẻ trò chơi của bạn với những người khác.
Nội dung đã đề cập
- Tạo trò chơi thông qua Gemini 2.5.
- Triển khai lên Firebase
Giờ là lúc 👥 khoe thành tích này! Bạn có thể chia sẻ trò chơi mới nhất của mình (your-project.web.app) trên LinkedIn hoặc Twitter kèm theo thẻ bắt đầu bằng # #VibeCodeAGameWithGemini (và có thể gắn thẻ tác giả trên LinkedIn)? Điều này sẽ giúp chúng tôi biết mức độ hấp dẫn của lớp học lập trình này và có thể viết thêm những lớp học lập trình tương tự!
Tôi muốn có thêm!
Nếu bạn muốn tham khảo thêm tài nguyên, hãy xem các trò chơi và câu lệnh sau:
- Lập trình 5 trò chơi cho trẻ em bằng Gemini 2.5 và p5.js trong một ngày cuối tuần! Bài viết này sẽ hướng dẫn bạn quy trình tư duy để lập trình theo cảm hứng cho một trò chơi bằng 6 ví dụ.
- palladius/genai-googlecloud-scripts (kho lưu trữ github có khoảng 10 ứng dụng – mã và câu lệnh): Tetris, Pacman, Nối 4 và thậm chí cả một Rogue clone cho những người hoài cổ! Tệp này chứa câu lệnh của tất cả các trò chơi này. Chọn một câu lệnh bạn thích, điều chỉnh câu lệnh đó và tận hưởng!
Một số trò chơi mẫu mà bạn có thể tạo:
Trò chơi hoàn chỉnh có thể trông như sau:
- Một trò chơi Tetris 3D
- Trò chơi ngôn ngữ
- Bản sao giả mạo
- Một bản sao của Pac-Man.
Một lần nữa, tiếng Anh là giới hạn!
|
|
|
|
|
|
🎉 Chúc bạn lập trình vui vẻ!