Lộ Trình 7 Ngày Vibe Coding với AI Trong Firebase Studio

Trong hai bài viết trước, chúng ta đã khám phá cách tiếp cận "Vibe Coding" – ậxây dựng website dựa trên cảm hứng và sự hỗ trợ của AI – cùng các kỹ năng cốt lõi để làm việc với Google Firebase Studio¹. Bây giờ, đã đến lúc biến lý thuyết thành hành động!

Dựa trên kinh nghiệm thực chiến, mình đã thiết kế một lộ trình 7 ngày theo phương pháp "learning by doing" (học qua thực hành). Lộ trình này ngắn gọn, dễ theo dõi, giúp bạn từ chỗ chưa biết gì đến việc tự tin triển khai website đầu tiên – dù bạn là người mới hoàn toàn hay đã có chút kinh nghiệm. Mỗi ngày là một bước nhỏ, dẫn bạn đến gần hơn với mục tiêu: một website thực sự hoạt động, đẹp mắt và mang dấu ấn cá nhân.

Lộ Trình 7 Ngày Chinh Phục Vibe Coding với Firebase Studio

Ngày 1: Khám phá và Làm quen Giao diện

Mục tiêu

Hiểu cách hoạt động của Firebase Studio và lên ý tưởng cho dự án của bạn.

Hoạt động

• Đăng ký và khám phá: Truy cập Firebase Studio (miễn phí) và làm quen với hai khu vực chính:
  • App Prototype²: Nơi bạn tương tác trực quan với AI, bao gồm các phương thức cho phép bạn mô tả ý tưởng của mình dù là nhập prompt, hình ảnh, file đính kèm hay bản vẽ phác thảo.
  • Code Editor³: Nơi bạn quản lý mã nguồn do AI tạo ra, kiểm soát hoàn toàn quy trình code và cài đặt nâng cao.
• Thử nghiệm tính năng: Không cần đọc tài liệu dài dòng, hãy thử ngay các công cụ:
  • Select Element: Chọn một phần tử (như nút hoặc tiêu đề) và ra lệnh chỉnh sửa.
  • Annotate: Vẽ phác thảo giao diện bằng Excalidraw⁴.
• Lên ý tưởng: Nghĩ về một dự án nhỏ (ví dụ: blog cá nhân, portfolio, hoặc trang giới thiệu sản phẩm). Sử dụng AI để tưởng tượng giao diện bạn muốn dựa trên mô tả sơ khai, tinh chỉnh lại để có prompt mở đầu. Hãy nghĩ về phong cách giao diện, màu sắc, bố cục, font chữ và những yếu tố chính của bản phác thảo website bạn muốn bởi đây sẽ là những yêu cầu đầu tiên mà AI sử dụng để phác thảo.

Mẹo

Dành 1-2 giờ khám phá mà không áp lực. Hãy thử sai và xem AI phản hồi thế nào – đây là cách nhanh nhất để làm quen.

Kết quả

Bạn hiểu cách ra lệnh cho AI và có ý tưởng rõ ràng cho dự án của mình.

Ngày 2: Tạo Bản Nháp Đầu Tiên (Prototype)

Mục tiêu

Xây dựng giao diện thô cho các trang chính của website.

Hoạt động

• Viết prompt chi tiết: Tạo một trang cụ thể, ví dụ: “Tạo trang blog với danh sách 3 bài viết, mỗi bài có ảnh bìa, tiêu đề, và đoạn trích ngắn. Sử dụng bố cục dạng lưới (grid) trên máy tính và dạng danh sách trên điện thoại.”
• Tinh chỉnh với Select Element: Chọn các phần tử để chỉnh sửa, ví dụ: “Đổi font chữ tiêu đề thành 'Inter' và tăng kích thước lên 24px.”
• Dùng Annotate: Nếu muốn thay đổi bố cục, vẽ phác thảo trong Excalidraw, ví dụ: “Đặt thanh menu ở trên cùng, logo ở góc trái, và nút đăng nhập ở góc phải.”
• Kiểm tra giao diện: Xem trước giao diện trên App Prototype để đảm bảo mọi thứ hiển thị đúng.

Mẹo

• Lưu ý cách bạn diễn đạt prompt – càng chi tiết, AI càng hiểu đúng ý. Nếu kết quả chưa ưng, thử chia nhỏ yêu cầu.
• Hãy làm quen và học các khái niệm về thành phần bố cục của website để diễn đạt một cách tự nhiên thứ mà bạn muốn AI chỉnh sửa: Header, Footer, Navbar, Hamberger Menu, Search Bar, Hero Banner, vv
• Yêu cầu AI lưu trữ các cấu hình và thiết lập website vào tài liệu dự án, nằm trong thư mục /docs, ban đầu thư mục này chỉ có 1 file markdown duy nhất tên là blueprint, bạn có thể mô tả chi tiết hơn cấu trúc file và thư mục tài liệu nếu muốn.

Kết quả

Bạn có một giao diện thô (prototype) cho website, sẵn sàng để phát triển thêm.

Ngày 3: Phát triển, Tinh chỉnh và Debug

Mục tiêu

Tinh chỉnh giao diện và học cách xử lý lỗi cơ bản.

Hoạt động

• Thêm trang phụ: Tạo các trang như “Giới thiệu” hoặc “Liên hệ”. Ví dụ prompt: “Tạo trang Giới thiệu với một đoạn văn ngắn, ảnh đại diện, và nút liên hệ màu cam.”
• Kiểm tra trên nhiều thiết bị: Trước tiên có thể thay đổi kích thước màn hình xem trước sau đó chia sẻ công khai - Make Preview Public⁵ để xem giao diện trên điện thoại, tablet và laptop thật sự, đảm bảo không bị lệch hoặc vỡ bố cục (responsive design⁶).
• Xử lý lỗi với Fix Bug: Bạn sẽ nhận được thông báo lỗi khi website gặp các lỗi nghiêm trọng như xung đột thư viện phụ thuộc, thành phần giao diện website dẫn đến không thể hiển thị. AI có thể "bắt" được lỗi ngay trong giao diện làm việc và tự động sửa giúp bạn.
• Làm mới ngữ cảnh: Sau khoảng vài chục prompt đầu tiên định hình phong cách và trình bày của website, AI sẽ bắt đầu tạo code hết sức chậm chạp sau mỗi prompt, đây là lúc bạn dùng lệnh /clear trong cửa sổ chat với Gemini để làm mới ngữ cảnh.

Mẹo

Nên có một sự hình dung về cấu trúc file và thư mục của dự án được hình thành, đọc và làm quen với các đoạn code được thêm mới, xoá bỏ hoặc file/thư mục được sinh ra mỗi lần bổ sung tính năng và tinh chỉnh giao diện. Đây là lúc bạn làm quen với tính năng diff để so sánh các thay đổi trong code.

Kết quả

Giao diện website bắt đầu hoàn chỉnh, và bạn tự tin hơn trong việc xử lý lỗi nhỏ.

Ngày 4: Tích hợp Tính năng Động

Mục tiêu

Thêm các tính năng tương tác (như đăng nhập, lưu dữ liệu) và làm quen với mã nguồn.

Hoạt động

• Tích hợp Firebase Authentication⁷: Yêu cầu AI: “Thêm chức năng đăng nhập bằng Google, hiển thị tên người dùng sau khi đăng nhập.” Kiểm tra xem nút đăng nhập hoạt động đúng.
• Tích hợp Firestore⁸: Tạo một tính năng lưu dữ liệu, ví dụ: “Tạo form liên hệ với các trường tên, email, tin nhắn, và lưu dữ liệu vào bộ sưu tập 'contacts' trên Firestore.”
• Khám phá Code Editor: Mở Code Editor để xem AI đã thêm code gì. Không cần hiểu hết, chỉ cần làm quen với các thư mục như /src/app (chứa các thiết lập giao diện và tính năng website) và /components (chứa các phần tử giao diện).
• Thử lệnh terminal⁹: Đồng bộ mã nguồn qua Github, cài đặt Nodejs, Windsurf hoặc Cursor để soạn thảo và kiểm thử xem website trên môi trường máy tính cục bộ. Sử dụng lệnh npm install để cài đặt các thư viện phụ thuộc cho website, npm run build để tạo trang và xem trước với npm start hoặc npm run dev.

Mẹo

Nếu gặp lỗi khi khởi động website trên giao diện App Prototyper, dùng Investigate để xem nhật ký lỗi và yêu cầu AI xử lý tự động.

Kết quả

Website của bạn có các tính năng tương tác cơ bản, và bạn bắt đầu hiểu cách mã nguồn được tổ chức.

Ngày 5 & 6: Soạn thảo Nội dung và Triển khai

Mục tiêu

Lấy ví dụ với trang blog, bạn sẽ bắt đầu thêm nội dung thực tế lên website để chia sẻ tới đối tượng mục tiêu. Hiểu 1 chút về các lựa chọn công nghệ và công cụ để quản lý nội dung website sẽ giúp bạn mô tả để AI hiểu bạn muốn tạo nội dung dạng tĩnh (file markdown .md hoặc .js) hay động (thông qua cơ sở dữ liệu) và quản lý chúng như thế nào.

Hoạt động

• Soạn nội dung bằng Markdown¹⁰: Viết 1-2 bài viết mẫu (dùng Obsidian). Ví dụ, tạo file post1.md với tiêu đề, đoạn văn, và ảnh bìa.
• Hiển thị nội dung: Yêu cầu AI: “Làm thế nào để hiển thị các bài viết từ thư mục 'content/posts' trên trang blog?” AI sẽ tạo code để Next.js đọc file Markdown.
• Chọn nền tảng triển khai:
  • Netlify¹¹ (miễn phí, lý tưởng cho trang tĩnh): Kết nối dự án với Github và làm theo hướng dẫn triển khai trên Netlify.
  • VPS Linux¹² (cho trang động yêu cầu backend): Nếu chọn VPS, yêu cầu AI: “Hướng dẫn triển khai dự án Next.js trên VPS Linux.”
• Kiểm tra triển khai: Truy cập website qua URL do Netlify hoặc VPS cung cấp.

Mẹo

Lưu file Markdown vào thư mục content/posts trong dự án. Nếu gặp lỗi hiển thị, kiểm tra lại đường dẫn thư mục qua Code Editor.

Kết quả

Website của bạn đã “lên sóng” và có thể truy cập từ bất kỳ đâu!

Ngày 7: Trau chuốt và Tối ưu

Mục tiêu

Hoàn thiện website và đảm bảo trải nghiệm người dùng tốt nhất.

Hoạt động

• Thêm nội dung chính thức: Tải lên hình ảnh chất lượng cao, chỉnh sửa bài viết Markdown cho chuyên nghiệp.
• Tinh chỉnh giao diện: Dùng Select Element để điều chỉnh chi tiết, ví dụ: “Đổi màu nền header thành xanh lá nhạt.”
• Tối ưu hiệu suất: Kiểm tra tốc độ tải trang bằng Google PageSpeed Insights¹³ và yêu cầu AI: “Tối ưu hình ảnh để website tải nhanh hơn.”
• Thu thập phản hồi: Chia sẻ URL website với bạn bè qua Public Preview hoặc link triển khai, hỏi ý kiến về giao diện và tính năng.

Mẹo

Tạo một checklist (giao diện, tốc độ, tính năng) để đảm bảo không bỏ sót bước nào.

Kết quả

Bạn có một website hoàn chỉnh, sẵn sàng ra mắt hoặc phát triển thêm.

“Hành trình vạn dặm bắt đầu từ một bước chân.” Lộ trình 7 ngày này là bước chân đầu tiên của bạn. Đừng ngại thử và sai – AI luôn sẵn sàng hỗ trợ, và mỗi lỗi là một bài học quý giá.

Trong bài viết cuối cùng của chuỗi bài này, mình sẽ chia sẻ về ý tưởng cho 1 khóa học sắp tới, nơi mình sẽ đồng hành và hướng dẫn bạn chi tiết hơn trong hành trình chinh phục Firebase Studio nếu bạn vẫn gặp nhiều khó khăn trong việc tự khám phá.

Đọc tiếp: Bài 4 - Khóa học Vibe Coding với Firebase Studio

---

Footnotes

1. Google Firebase Studio: Nền tảng phát triển ứng dụng web, tích hợp AI để hỗ trợ tạo giao diện và chức năng mà không cần viết nhiều code. ↩

2. App Prototype: Giao diện trực quan trong Firebase Studio, nơi bạn ra lệnh và chỉnh sửa giao diện bằng cách chọn hoặc vẽ. ↩

3. Code Editor: Công cụ trong Firebase Studio để xem và chỉnh sửa mã nguồn mà AI tạo ra. ↩

4. Excalidraw: Công cụ vẽ phác thảo tích hợp trong Firebase Studio để mô tả giao diện. ↩

5. Make Preview Public: Tính năng cho phép chia sẻ bản xem trước website để kiểm tra hoặc nhận phản hồi. ↩

6. Responsive Design: Thiết kế website tự động điều chỉnh để hiển thị đẹp trên mọi thiết bị (điện thoại, máy tính). ↩

7. Firebase Authentication: Dịch vụ của Google để quản lý đăng nhập/đăng ký người dùng. ↩

8. Firestore: Cơ sở dữ liệu của Google để lưu trữ và quản lý dữ liệu động, như bình luận hoặc thông tin người dùng. ↩

9. Terminal: Giao diện dòng lệnh để chạy các lệnh lập trình hoặc quản lý dự án. ↩

10. Markdown: Định dạng văn bản đơn giản, dễ viết, dùng cho blog hoặc tài liệu. ↩

11. Netlify: Nền tảng miễn phí để triển khai và quản lý website tĩnh. ↩

12. VPS Linux: Máy chủ ảo chạy hệ điều hành Linux, linh hoạt cho website động. ↩

13. Google PageSpeed Insights: Công cụ miễn phí để kiểm tra và tối ưu tốc độ tải website. ↩