Vibe Coding với AI: Làm Chủ Firebase Studio

Ở bài viết trước, chúng ta đã cùng nhau khám phá khái niệm "Vibe Coding" và hành trình mình đã xây dựng ba website hiện đại mà không cần kiến thức sâu về lập trình website với nền tảng NextJS. Trong bài viết này, chúng ta sẽ đi sâu hơn vào những chia sẻ kinh nghiệm thực chiến, những kiến trúc, công cụ và kỹ năng cốt lõi đã giúp mình làm chủ Google Firebase Studio và biến những ý tưởng mông lung thành sản phẩm thực tế.

1. Lựa Chọn Kiến Trúc và Bộ Công Cụ (Tech Stack)

Khi bắt đầu xây dựng một website, việc chọn đúng công cụ và cách tổ chức chúng (hay còn gọi là kiến trúc¹) giống như chọn vật liệu để xây một ngôi nhà. Nếu chọn đúng, bạn sẽ tiết kiệm được thời gian, công sức và tạo ra một sản phẩm bền vững. Với vibe coding, bạn không cần phải là chuyên gia, nhưng hiểu được vai trò của từng công cụ sẽ giúp bạn làm việc hiệu quả hơn với AI. Dưới đây là những lựa chọn đã giúp mình biến các dự án như Thinh Vu Blog, Learn Anything LMS, và Vnstock thành hiện thực.

Công nghệ nền tảng

Firebase Studio sử dụng bộ ba Next.js, Shadcn UI và Tailwind CSS. Bạn không cần hiểu sâu về chúng ngay từ đầu – chỉ cần biết rằng chúng giúp bạn tạo ra giao diện đẹp và dễ chỉnh sửa theo ý muốn.

• Next.js²: Một công cụ giúp xây dựng website nhanh, hiện đại và dễ tối ưu cho công cụ tìm kiếm.
• Shadcn UI³: Bộ giao diện với các thành phần (nút bấm, biểu mẫu) đẹp mắt, dễ tùy chỉnh.
• Tailwind CSS⁴: Một cách thiết kế giao diện nhanh bằng các lớp định sẵn, không cần viết nhiều mã CSS.

Backend và Cơ sở dữ liệu

• Firebase Firestore & Google Authentication⁵: Mình chọn bộ đôi này từ Google để quản lý dữ liệu động (như bình luận, thông tin người dùng) và xác thực (đăng nhập, đăng ký). Google Authentication cho phép đăng nhập bằng các tài khoản mạng xã hội phổ biến tuy nhiên mình giới hạn đăng nhập bằng tài khoản Google cho đồng nhất nhận dạng người dùng. Gói miễn phí của Firebase rất hào phóng, phù hợp cho các dự án nhỏ hoặc vừa với lượng truy cập ổn định. Ví dụ, trong Learn Anything LMS, mình dùng Firestore để lưu thông tin khóa học, bình luận, ghi chú từ học viên và Authentication để quản lý tài khoản người dùng.

• Quản lý nội dung bằng Markdown⁶: Thay vì dùng các hệ thống phức tạp như WordPress, mình sử dụng Obsidian⁷ để viết nội dung dưới dạng file .md (Markdown) ngay trên máy tính. Các file này được đẩy lên Github⁸, và website tự động cập nhật nội dung mới. Cách này đơn giản, miễn phí và cực kỳ hiệu quả cho blog như Thinh Vu Blog, các nội dung tài liệu kỹ thuật cho sản phẩm và dự án.

Nền tảng triển khai (Deployment)

• Trang tĩnh (Static Site): Với các website đơn giản như blog cá nhân (Thinh Vu Blog), mình triển khai trên Netlify⁹ thông qua Github Actions¹⁰. Mỗi khi mình thêm bài viết mới vào Github, Netlify sẽ tự động xây dựng lại website. Ví dụ, một bài blog mới chỉ cần soạn thảo bằng Obsidian sau đó đồng bộ với Github để đẩy (push) file Markdown lên là website tự cập nhật trong khoảng 1-2 phút.
• Trang động (Dynamic Site): Với các dự án phức tạp như Learn Anything LMS hay Vnstock, mình chọn VPS Linux¹¹ để tối ưu chi phí khi cần chạy cả giao diện (front end) lẫn phần logic hệ thống (backend) thay vì triển khai đơn giản bằng Google Cloud với giá đắt đỏ. Dù cần một chút kiến thức về quản trị máy chủ (như cài đặt môi trường), VPS cho phép chạy nhiều website, API¹² và các dịch vụ nhỏ (microservices) trên cùng một máy chủ, tiết kiệm chi phí mà vẫn đảm bảo hiệu năng cao.

Mẹo: Lựa chọn đúng công cụ và kiến trúc giúp bạn tiết kiệm thời gian, tiền bạc và tập trung vào việc tạo ra giá trị thực sự – như giao diện đẹp hoặc tính năng hữu ích – thay vì bị sa lầy vào các vấn đề kỹ thuật.

2. Kỹ Năng "Vibe Coding" Cốt Lõi với Firebase Studio

Dưới đây là những kỹ năng và thao tác mình sử dụng hàng ngày để biến ý tưởng thành hiện thực.

Bắt đầu với Prompt

Prompt¹³ là cách bạn "trò chuyện" với AI để yêu cầu nó tạo ra giao diện hoặc chức năng. Bí quyết là mô tả ý tưởng càng chi tiết càng tốt. Ví dụ:

• Thay vì viết: “Tạo trang đăng nhập”, hãy thử: “Tạo trang đăng nhập tối giản với nút Google Sign-In, nền trắng, chữ đen, và một liên kết nhỏ đến trang chính sách bảo mật ở góc dưới.”
• Mẹo thực tế: Nếu kết quả không như ý, hãy thử diễn đạt lại hoặc chia nhỏ yêu cầu, ví dụ: “Thêm nút Google Sign-In”, sau đó “Thêm liên kết chính sách bảo mật”.

Dù prompt rất mạnh, bạn vẫn cần chỉnh sửa thủ công qua các công cụ của Firebase Studio để có kết quả hoàn hảo.

Làm việc trong App Prototype

App Prototype là nơi bạn tương tác trực quan với AI trong Google Firebase Studio, như một sân chơi sáng tạo. Dưới đây là quy trình cơ bản:

Initializing...

• Select Element: Công cụ mạnh nhất trong Firebase Studio. Bạn chọn một phần tử trên giao diện (như nút, tiêu đề) và ra lệnh. Ví dụ: “Làm nút này to hơn và đổi màu thành xanh dương”. Điều này giúp bạn chỉnh sửa trực quan mà không cần viết code.
• Annotate với Excalidraw¹⁴: Khi lời mô tả không đủ, bạn có thể vẽ phác thảo giao diện mong muốn. Mình thường dùng Excalidraw để vẽ lại bố cục (layout) hoặc di chuyển các phần tử, ví dụ: “Đặt thanh điều hướng ở trên cùng và logo ở góc trái”.
• Public Preview: Cho phép bạn chia sẻ bản xem trước của website với bạn bè để nhận phản hồi mà không cần triển khai chính thức. Ví dụ, mình đã chia sẻ bản xem trước của Thinh Vu Blog để kiểm tra giao diện trên điện thoại và laptop.
• Fix Bug & Investigate: Khi gặp lỗi (như nút không hoạt động), Fix Bug tự động tìm và đề xuất cách sửa. Khi cập nhật mới làm bản xem thử website không thể khởi động, Investigate cung cấp nhật ký lỗi (log) để tự thực hiện khắc phục giúp bạn.

Làm quen với Code Editor và Terminal

• Git/Github⁸: Bạn cần biết các lệnh cơ bản:
  • git commit: Lưu thay đổi của dự án.
  • git push: Đẩy mã nguồn lên Github.
  • git checkout: Chuyển đổi giữa các phiên bản để sửa lỗi.
  • git reset --hard commit_id_bất_kỳ: Quay ngược thời gian về 1 phiên bản chưa gặp lỗi để tiếp tục. Những lệnh này giúp quản lý dự án và quay lại nếu có sai sót. Ví dụ, mình từng khôi phục một phiên bản cũ của Vnstock khi thêm tính năng mới làm hỏng giao diện.
• Terminal¹⁵: Chỉ cần nắm vài lệnh cơ bản:
  • npm install: Cài đặt thư viện mới.
  • npm run dev: Chạy website trên máy tính để kiểm tra.
    Những lệnh này giống như công tắc bật/tắt, không cần phải là chuyên gia để sử dụng.

3. Debug Như Một "Pro" (Dù Bạn Không Hẳn Là Thế)

Lỗi là điều không thể tránh khỏi, nhưng Firebase Studio giúp bạn xử lý chúng dễ dàng hơn. Dưới đây là chiến lược của mình:

• Đọc thông báo lỗi: Firebase Studio thường hiển thị lỗi rõ ràng. Tất cả những thứ bạn làm là copy thông báo này và hỏi AI bằng câu prompt để hiểu nguyên nhân và sửa chúng.
• Chia để trị: Nếu một tính năng lớn gặp lỗi (như form đăng nhập không hoạt động), hãy yêu cầu AI tạo lại từng phần nhỏ, ví dụ: “Tạo một form chỉ có trường email”, rồi thêm dần các phần khác.
• Lệnh /clear: Khi cuộc trò chuyện với AI trở nên rối rắm (quá nhiều prompt chồng chéo), dùng /clear để làm mới ngữ cảnh. Mình từng dùng lệnh này khi AI hiểu sai ý định sau 20 prompt liên tiếp.
• Mượn Trí Tuệ Tập Thể của AI: Bạn không nên giới hạn mình trong 1 công cụ duy nhất, khi gặp khó khăn hãy tập hợp tất cả "hội đồng giáo sư AI" mà bạn có thể sử dụng để sửa lỗi. Mình thường đồng bộ dự án lên Github và chuyển đổi qua lại với môi trường Desktop để dùng Cursor hoặc Windsurf để tinh chỉnh và sửa lỗi khi cần. Mình không dùng các công cụ này từ đầu vì khả năng thiết kế giao diện của chúng khi thử nghiệm không khiến mình hài lòng nhưng tiếp nối ý tưởng và sửa lỗi thì không tệ.
• Chỉ áp dụng cơ chế xác thực khi hoàn thiện tính năng: Đây là một kinh nghiệm điển hình khi xây dựng website có yếu tố quản lý người dùng. Firebase Studio không thể kết nối với Firebase Admin SDK và các cơ chế dịch vụ quản trị thông qua biến môi trường dù mình đã cố. Do đó mình luôn thực hiện xây hoàn chỉnh tính năng, logic và giao diện trước khi kích hoạt cơ chế xác thực để đảm bảo chúng hoạt động tốt và dễ kiểm tra từng phần.

Mẹo: Đừng sợ lỗi! Mỗi lỗi là một cơ hội để học hỏi. Với sự hỗ trợ của AI, bạn sẽ nhanh chóng vượt qua chúng.

4. Bí Quyết Thành Công: Tư Duy Hệ Thống và Kiên Trì

Vibe coding không chỉ là việc sử dụng công cụ, mà còn là cách bạn tư duy và làm việc với AI:

• Tư duy hệ thống: Hiểu website của bạn như một ngôi nhà – từ nền móng (backend), khung (giao diện), đến nội thất (nội dung). Khi bạn chia nhỏ dự án thành các phần (giao diện, tính năng, triển khai), mọi thứ trở nên dễ quản lý hơn.
• Kiên trì và thử nghiệm: Mình đã thử hàng chục cách viết prompt khác nhau để tạo giao diện hoàn hảo cho Vnstock. Đôi khi, chỉ cần thay đổi một từ trong prompt đã tạo ra sự khác biệt lớn.

Ví dụ, khi xây dựng Learn Anything LMS, mình gặp lỗi khi tích hợp đăng nhập Google. Thay vì bỏ cuộc, mình chia nhỏ vấn đề: kiểm tra cấu hình Firebase Authentication, yêu cầu AI kiểm tra lại code, và cuối cùng tìm ra lỗi là do thiếu một dòng cấu hình đơn giản. Quá trình này dạy mình rằng kiên nhẫn và sự hỗ trợ của AI là chìa khóa để đi qua hố sâu của tuyệt vọng. Thành côgn lần 1 sẽ dẫn bạn đến thành công lần thứ n từng chút một.

Lời Kết: Sẵn Sàng Làm Chủ Firebase Studio

Bằng cách kết hợp tư duy hệ thống, kỹ năng sử dụng prompt, và các công cụ của Firebase Studio, bạn có thể biến ý tưởng thành sản phẩm mà không cần là chuyên gia lập trình. Hành trình vibe coding là sự kết hợp giữa sáng tạo, thử nghiệm và sự hỗ trợ mạnh mẽ từ AI.

Trong bài viết tiếp theo, mình sẽ chia sẻ một lộ trình học tập chi tiết trong 7 ngày để bạn bắt đầu hành trình vibe coding của riêng mình.

Bài 3 - Lộ trình 7 ngày làm chủ Firebase Studio

---

Footnotes

1. Kiến trúc (Architecture): Cách tổ chức các thành phần của website (giao diện, dữ liệu, triển khai) để chúng hoạt động hài hòa. ↩

2. Next.js: Framework JavaScript để xây dựng website nhanh, hiện đại, thân thiện với SEO. ↩

3. Shadcn UI: Bộ công cụ giao diện với các thành phần (component) đẹp, dễ tùy chỉnh. ↩

4. Tailwind CSS: Thư viện CSS giúp thiết kế giao diện nhanh bằng các lớp (class) có sẵn. ↩

5. Firebase Firestore & Authentication: Dịch vụ của Google để lưu trữ dữ liệu (Firestore) và quản lý đăng nhập/đăng ký (Authentication). ↩

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

7. Obsidian: Ứng dụng để viết và quản lý ghi chú dưới dạng Markdown. ↩

8. Github: Nền tảng lưu trữ và quản lý mã nguồn, hỗ trợ làm việc nhóm và triển khai. ↩ ↩²

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

10. Github Actions: Công cụ tự động hóa quy trình, như tự động xây dựng website khi có thay đổi mã nguồn. ↩

11. VPS Linux: Máy chủ ảo chạy hệ điều hành Linux, linh hoạt để triển khai các website động hoặc API. ↩

12. API: Giao diện lập trình ứng dụng, cho phép các hệ thống giao tiếp và trao đổi dữ liệu. ↩

13. Prompt: Câu lệnh hoặc mô tả bạn nhập để yêu cầu AI thực hiện một tác vụ. ↩

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

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