Vibe Coding với Google Firebase Studio: Biến ý tưởng thành website cho người không chuyên với AI

Mình luôn tin rằng AI đang mở ra một kỷ nguyên mới, nơi bất kỳ ai có ý tưởng, dám thử nghiệm và kiên trì đều có thể tạo ra những sản phẩm tuyệt vời. Với Google Firebase Studio, mình đã trải qua hành trình xây dựng ba website khác nhau mà không cần phải là chuyên gia về Next.js, Shadcn UI hay Tailwind CSS. Thay vào đó, mình gọi đó là vibe coding – một cách tiếp cận thiết kế website dựa trên cảm hứng, tương tác với AI và một chút kinh nghiệm cơ bản từ những lần làm web trước đây. Dưới đây là câu chuyện của mình, cùng với những bài học về cách tận dụng Firebase Studio để biến ý tưởng thành hiện thực, ngay cả khi bạn không rành về code.

Một chút nền tảng: Không phải lập trình viên, nhưng không hẳn là người mới

Trước khi bắt tay vào Firebase Studio, mình đã có chút kinh nghiệm làm web, dù chỉ ở mức cơ bản. Mình từng xây dựng blog và trang khóa học với WordPress, sử dụng Docusaurus và React để làm blog hoặc trang tài liệu. Mình cũng quen với việc sử dụng Node.js, làm việc trên terminal, và lập trình Python. Những kỹ năng này, cộng với tư duy hệ thống và khả năng debug trên nhiều môi trường, giúp mình dễ dàng thích nghi với cách làm việc hoàn toàn mới của Firebase Studio. Dù không biết gì về Next.js, Shadcn UI hay Tailwind CSS, mình vẫn tự tin bắt đầu nhờ khả năng tương tác với mã nguồn và sự hỗ trợ mạnh mẽ từ AI.

Vibe Coding: Thiết kế website bằng cảm hứng và prompt

Vibe coding là cách mình mô tả trải nghiệm làm việc với Firebase Studio. Bạn không cần phải là một lập trình viên chuyên nghiệp, chỉ cần có ý tưởng, biết cách diễn đạt qua prompt và sẵn sàng học hỏi từ những lần thử sai. Firebase Studio giúp mình tập trung vào việc hiện thực hóa ý tưởng thay vì lo lắng về cú pháp code hay cấu trúc phức tạp. Dưới đây là hành trình của mình qua ba dự án:

1. Learn Anything LMS: Nền tảng học tập trực tuyến đầy thử thách

Dự án đầu tiên là Learn Anything LMS, một hệ thống quản lý học tập trực tuyến với các tính năng phức tạp như quản lý người dùng, phân quyền và kiểm soát truy cập nội dung. Là dự án đầu tay với Firebase Studio, mình gần như bắt đầu từ số 0 về Next.js hay Tailwind CSS. Tuy nhiên, mình đã tận dụng kinh nghiệm cơ bản từ WordPress và Docusaurus để định hình ý tưởng.

Mình bắt đầu bằng cách sử dụng prompt để tạo prototype. Ví dụ, mình mô tả: “Tạo một giao diện dashboard cho quản lý khóa học, có sidebar, bảng danh sách học viên và nút thêm khóa học mới”. Firebase Studio tự động sinh ra giao diện dựa trên Shadcn UI và Tailwind CSS, dù mình không hiểu rõ cách chúng hoạt động. Khi gặp lỗi, mình sử dụng tính năng Fix bug để AI tự động phát hiện và đề xuất cách sửa. Tổng cộng, mình thực hiện 321 commit để hoàn thiện dự án này, triển khai trên máy chủ VPS Linux. Dù thiếu kinh nghiệm thiết kế ban đầu, mình vẫn ngạc nhiên với tốc độ hiện thực hóa ý tưởng nhờ Firebase Studio.

2. Thinh Vu Blog: Tinh tế, tối giản và miễn phí

Dự án thứ hai là Thinh Vu Blog – trang blog bạn đang đọc. Mình muốn một nền tảng tối giản, hỗ trợ viết bài bằng Markdown, tối ưu SEO và tự động cập nhật khi đẩy bài lên Github. Nhờ kinh nghiệm từ Docusaurus và React, mình dễ dàng làm quen với cách Firebase Studio tổ chức mã nguồn. Mình chỉ cần prompt: “Tạo một trang blog với giao diện tối giản, có nút tìm kiếm và hỗ trợ Markdown”, sau đó chỉnh sửa thêm qua giao diện App Prototype.

Tính năng Public preview giúp mình chia sẻ bản xem thử với bạn bè để nhận phản hồi. Mỗi khi cần điều chỉnh giao diện, mình sử dụng Select element để chọn phần tử và yêu cầu AI thay đổi, ví dụ: “Thêm hiệu ứng hover cho tiêu đề bài viết”. Kết quả là một trang blog đẹp mắt, triển khai miễn phí qua Netlify và Github Actions, với 358 commit để đạt trải nghiệm hiện tại. Quá trình này cho mình cảm giác như đang vẽ tranh trên canvas, chỉ cần mô tả ý tưởng và AI sẽ lo phần còn lại.

3. Vnstock: Hệ sinh thái tài chính thông minh

Dự án thứ ba là Vnstock, một hệ sinh thái phân tích thị trường chứng khoán Việt Nam, tích hợp thư viện Python, tài liệu hướng dẫn và nội dung học tập. Mình tái sử dụng giao diện từ Thinh Vu Blog, sau đó mở rộng với các tính năng như phân quyền thành viên, thanh toán và khóa học. Nhờ kinh nghiệm từ hai dự án trước, mình chỉ cần 662 commit để hoàn thiện, tiết kiệm thời gian đáng kể.

Mình sử dụng Annotate với Excalidraw để phác thảo giao diện mới, ví dụ: “Thêm một section hiển thị biểu đồ chứng khoán”. Khi gặp lỗi, tính năng Investigate giúp mình xem log và sửa lỗi nhanh chóng. Dự án được triển khai trên VPS Linux, minh chứng cho khả năng mở rộng của Firebase Studio khi kết hợp với tư duy hệ thống.

Làm thế nào để vibe coding với Firebase Studio?

Dù không biết nhiều về code, bạn vẫn có thể sử dụng Firebase Studio hiệu quả nếu nắm được một số kỹ năng cơ bản và cách tương tác với AI. Dưới đây là những gì mình đã học được, bao gồm cả kiến thức về kiến trúc và bộ công cụ (tech stack) mà mình sử dụng:

1. Công cụ và kiến trúc

Firebase Studio sử dụng bộ ba Next.js, Shadcn UI và Tailwind CSS làm nền tảng chính. Mình không cần hiểu sâu về chúng, chỉ cần biết rằng chúng giúp tạo giao diện đẹp, hiện đại và dễ tùy chỉnh. Nếu bạn từng làm việc với WordPress hay Docusaurus, việc chuyển đổi sang bộ công cụ này sẽ rất tự nhiên. Dưới đây là cách mình lựa chọn và kết hợp các công cụ để tối ưu hóa dự án:

• Quản lý người dùng và cơ sở dữ liệu:
  Mình sử dụng Google Authenticator kết hợp với Firebase Firestore và Firebase Admin SDK để quản lý người dùng một cách đơn giản. Bộ công cụ này rất phù hợp cho các website không có lưu lượng truy cập lớn (non-mega traffic) nhưng vẫn duy trì cộng đồng ổn định, ví dụ như hàng trăm học viên trên Learn Anything LMS. Bậc miễn phí của Firebase rất hào phóng, giúp tiết kiệm chi phí trong giai đoạn đầu của dự án. Ví dụ, mình thiết lập phân quyền người dùng qua Firebase Authentication và lưu trữ dữ liệu khóa học trên Firestore mà không cần viết code phức tạp.

• Linux VPS:
  Thay vì sử dụng Google Cloud Run hay các dịch vụ đắt đỏ của Firebase Studio (mình từng thử và thấy chi phí dự kiến lên tới hàng triệu đồng mỗi tháng chỉ sau 7 ngày sử dụng), mình chọn Linux VPS. Với chi phí vừa phải, VPS cho phép triển khai nhiều website trên cùng một server, đảm bảo bảo mật và hiệu năng mạnh mẽ. Mình học cách tự triển khai VPS và thấy không quá khó. Ngoài website, mình còn xây dựng API và các microservices cho hệ sinh thái Vnstock trên cùng máy chủ, mở ra khả năng ứng dụng không giới hạn.

• Netlify + Github Repository + Github Actions:
  Đối với Thinh Vu Blog, mình chọn bộ ba này để triển khai hoàn toàn miễn phí. Mỗi khi viết bài bằng Markdown và đẩy lên Github, Github Actions tự động trigger để cập nhật website trên Netlify. Mình soạn thảo nội dung offline bằng Obsidian, khai báo các thuộc tính bài viết và tối ưu SEO qua YAML frontmatter trong file Markdown. Bộ công cụ này lý tưởng cho blog cá nhân vì không cần backend phức tạp, nhưng vẫn cho phép tích hợp backend trên VPS khi cần.

• Obsidian thay cho CMS phức tạp:
  Thay vì sử dụng các hệ thống CMS cồng kềnh như WordPress, mình chọn Obsidian để soạn thảo nội dung bằng Markdown. Điều này giúp mình tập trung vào nội dung thay vì phải quản lý một hệ thống phức tạp. Chỉ cần đẩy file lên Github, website tự động cập nhật – đơn giản và hiệu quả.

• Static site hay Dynamic site:
  Mình nhận ra rằng các static site như Thinh Vu Blog phù hợp với nhu cầu đơn giản, tập trung vào trải nghiệm người đọc. Với Markdown và Netlify, mình không cần xây dựng backend phức tạp hay cơ chế admin cho người viết. Ngược lại, dynamic site như Learn Anything LMS cần cơ chế quản lý phức tạp hơn (tạo bài học, cấu hình khóa học, phân quyền, quản lý media). Mình chọn static site cho blog và tài liệu để giảm độ phức tạp, trong khi dynamic site được áp dụng cho các hệ thống cần tương tác cao.

2. Bắt đầu với prompt

• Tạo prototype bằng prompt: Mô tả ý tưởng của bạn một cách chi tiết, ví dụ: “Tạo một trang đăng nhập với nút Google Sign-In và giao diện tối giản”. Firebase Studio sẽ sinh ra giao diện và mã nguồn tương ứng.
• Không phụ thuộc hoàn toàn vào prompt: Mình nhận ra rằng để có kết quả tốt, cần kết hợp prompt với chỉnh sửa thủ công qua App Prototype hoặc Code Editor.

3. Các thao tác vibe coding

Firebase Studio cung cấp nhiều tính năng giúp bạn làm việc như một lập trình viên, mà không cần viết code từ đầu:

• App Prototype:

  • Reload/Restart preview: Xem trước giao diện ngay lập tức.
  • Select element: Chọn một phần tử (như nút hoặc tiêu đề) và yêu cầu AI chỉnh sửa.
  • Annotate với Excalidraw: Vẽ phác thảo để truyền đạt ý tưởng, rất hữu ích khi bạn không biết cách mô tả bằng từ ngữ.
  • Public preview: Chia sẻ bản xem thử để kiểm tra trên nhiều thiết bị.
  • Restore: Quay lại phiên bản trước nếu kết quả không ưng ý.
  • Lệnh /clear: Xóa hội thoại để làm mới ngữ cảnh khi prompt quá dài.
  • Attachment: Đính kèm hình ảnh hoặc file để AI hiểu rõ ý tưởng.
  • Fix bug: Tự động phát hiện lỗi và đề xuất cách sửa.
  • Investigate: Xem log để tìm nguyên nhân lỗi, đặc biệt hữu ích khi debug.

• Code Editor:

  • Trải nghiệm giống VS Code, rất thân thiện nếu bạn đã quen với terminal.
  • Git/Github: Mình sử dụng các lệnh như git commit, git push hoặc git checkout để quản lý mã nguồn. Nếu bạn từng làm việc với Github, việc này không quá khó.
  • Triển khai: Mình chọn VPS Linux để tiết kiệm chi phí thay vì dùng Google Cloud, vốn khá đắt đỏ.

4. Debug như một pro

Dù không rành về code, mình vẫn debug hiệu quả nhờ kinh nghiệm từ Python và React. Khi gặp lỗi như "app prototype is working with reduced project context because your project is getting large. see files", mình chia nhỏ dự án hoặc dùng lệnh /clear để tối ưu ngữ cảnh. Tính năng Investigate và Fix bug giúp mình xử lý lỗi nhanh chóng, ngay cả khi không hiểu rõ nguyên nhân.

Lộ trình 7 ngày làm chủ Vibe Coding với AI và Firebase Studio

Trong chuỗi bài viết về hành trình xây dựng website với Google Firebase Studio, tôi đã chia sẻ về vibe coding – cách tiếp cận sáng tạo để biến ý tưởng thành website mà không cần thành thạo lập trình. Dựa trên kinh nghiệm xây dựng ba dự án (Learn Anything LMS, Thinh Vu Blog, Vnstock) chỉ trong 7 ngày quên ăn quên ngủ, tôi đã thiết kế một lộ trình learning by doing để bạn có thể tự tin tạo website hiện đại, thông minh và đẹp mắt. Lộ trình 7 ngày này ngắn gọn nhưng đủ để kiểm nghiệm ý tưởng, triển khai và tinh chỉnh, giúp bạn quyết định liệu có nên đầu tư thêm thời gian và công sức.

Dưới đây là lộ trình chi tiết, được xây dựng từ kinh nghiệm thực chiến của tôi:

Ngày 1: Khám phá và làm quen với Firebase Studio

• Mục tiêu: Hiểu cách hoạt động của Firebase Studio và chuẩn bị ý tưởng.

• Hoạt động:

  • Đăng ký tài khoản Firebase Studio và khám phá giao diện: App Prototype, Code Editor.

  • Mày mò trải nghiệm các tính năng như Select element, Annotate, và Fix bug mà không cần đọc tài liệu.

  • Thử prompt đơn giản: “Tại trang /blog hãy bổ sung tính năng lọc bài viết với giao diện thanh lịch, sử dụng icon minh họa từ lucide react.”.

  • Xác định ý tưởng website: Ví dụ, một blog cá nhân, trang khóa học, hoặc portfolio.

• Mẹo từ kinh nghiệm: Khi mới bắt đầu với Learn Anything LMS, tôi dành vài giờ để thử nghiệm giao diện và nhận ra rằng việc làm quen với cách viết prompt giúp tiết kiệm thời gian sau này.

• Kết quả: Biết cách sử dụng giao diện và có ý tưởng rõ ràng cho dự án.

Ngày 2: Tạo bản nháp đầu tiên bằng prompt

• Mục tiêu: Xây dựng giao diện prototype cơ bản cho website.

• Hoạt động:

  • Viết prompt chi tiết: “Tạo trang blog với danh sách bài viết, hỗ trợ Markdown và giao diện tối giản” hoặc “Tạo dashboard quản lý khóa học với sidebar và bảng dữ liệu”.

  • Sử dụng App Prototype để xem trước và tinh chỉnh giao diện bằng Select element (chọn phần tử để chỉnh sửa, ví dụ: “Thay đổi màu nút thành xanh”).

  • Dùng Annotate với Excalidraw để phác thảo ý tưởng nếu cần.

• Mẹo từ kinh nghiệm: Với Thinh Vu Blog, tôi nhận ra prompt càng cụ thể (mô tả màu sắc, bố cục, tính năng), kết quả càng gần với mong muốn. Nếu không ưng ý, dùng Restore để quay lại bước trước.

• Kết quả: Có một prototype giao diện cơ bản, sẵn sàng để phát triển thêm.

Ngày 3: Phát triển ý tưởng, tinh chỉnh và debug

• Mục tiêu: Hoàn thiện giao diện và bắt đầu xử lý lỗi.

• Hoạt động:

  • Thêm các trang phụ: Ví dụ, trang đăng nhập, trang bài viết chi tiết, hoặc trang quản lý người dùng.

  • Dùng Public preview để kiểm tra giao diện trên nhiều thiết bị (điện thoại, laptop) để đảm bảo bố cục hiển thị hài hòa, tinh tế.

  • Sử dụng Fix bug khi gặp lỗi trong chế độ preview (AI sẽ tự động đề xuất cách sửa).

  • Thử tính năng Investigate để xem log và hiểu nguyên nhân lỗi nếu cần một khi không thể khởi động App Prototyper.

• Mẹo từ kinh nghiệm: Khi làm Vnstock, tôi gặp lỗi “app prototype is working with reduced project context”. Có thể xóa bớt các trang nội dung chưa cần thiết để tập trung hoàn thiện tính năng, xóa bớt các tài liệu mô tả dự án không cần thiết tại thư mục /docs để giảm tải context windows.

• Dùng lệnh /clear để làm mới ngữ cảnh và chia nhỏ dự án giúp giải quyết nhanh.

• Kết quả: Giao diện hoàn chỉnh hơn, các lỗi cơ bản được xử lý.

Ngày 4: Tích hợp tính năng nâng cao, chuyển đổi môi trường lập trình

• Mục tiêu: Thêm logic và làm quen với môi trường lập trình.

• Hoạt động:

  • Tích hợp Firebase Authentication (ví dụ: đăng nhập bằng Google) và Firestore để quản lý dữ liệu (danh sách bài viết, thông tin người dùng). Hãy phác thảo đầy đủ các logic và giao diện một cách hoàn chỉnh trước khi áp đặt cơ chế đăng nhập để xem nội dung bởi App Prototyper sẽ không hỗ trợ đăng nhập để xem trước. Cơ chế đăng nhập nên được hoàn thiện và tinh chỉnh trước khi triển khai dự án thực tế và kết hợp xem trước cũng như gỡ lỗi trên môi trường cục bộ cùng các trình soạn thảo AI như Cursor và Windsurf.

  • Chuyển sang Code Editor, hiểu cách dùng lệnh trong terminal như npm install để cài đặt thư viện hoặc các câu lệnh build, start, dev hoặc git commit để quản lý mã nguồn.

  • Làm quen với Git/Github: Tạo repository, đẩy code lên và khôi phục checkpoint nếu cần.

• Mẹo từ kinh nghiệm: Với Learn Anything LMS, tôi tích hợp phân quyền người dùng qua Firebase Authentication mà không cần viết code phức tạp. Việc làm quen với terminal giống như khi tôi làm việc với Python, nên không quá khó.

• Kết quả: Website có tính năng cơ bản (đăng nhập, lưu trữ dữ liệu) và bạn bắt đầu hiểu cách quản lý mã nguồn.

Ngày 5: Soạn thảo nội dung mẫu, trải nghiệm quản lý nội dung bằng Markdown

• Mục tiêu: Tạo nội dung và tối ưu quy trình quản lý.

• Hoạt động:

  • Sử dụng Obsidian để soạn thảo nội dung bằng Markdown, thêm YAML frontmatter để tối ưu SEO (ví dụ: tiêu đề, mô tả, từ khóa).

  • Tích hợp nội dung vào website: Đẩy file Markdown lên Github để tự động cập nhật trên Netlify (nếu là static site).

  • Kiểm tra hiển thị nội dung trên website qua Public preview.

• Mẹo từ kinh nghiệm: Với Thinh Vu Blog, tôi soạn bài offline bằng Obsidian và đẩy lên Github. Quy trình này nhanh hơn nhiều so với CMS phức tạp như WordPress, đặc biệt khi tôi là người quản lý duy nhất.

• Kết quả: Website có nội dung mẫu và quy trình soạn thảo mượt mà.

Ngày 6: Triển khai website lên nền tảng máy chủ, debug và xem kết quả

• Mục tiêu: Đưa website lên môi trường thực tế.

• Hoạt động:

  • Chọn nền tảng triển khai:

    • Netlify + Github: Dành cho static site như blog, miễn phí và tự động.

    • VPS Linux: Dành cho dynamic site hoặc API, cần cấu hình server cơ bản.

  • Cấu hình domain, SSL (nếu có), và kiểm tra website trên trình duyệt.

  • Debug lần cuối bằng Investigate nếu gặp lỗi khi triển khai.

• Mẹo từ kinh nghiệm: Khi triển khai Vnstock trên VPS Linux, tôi chọn VPS thay vì Google Cloud để tiết kiệm chi phí (Google Cloud tốn hàng triệu đồng/tháng). Học cách cấu hình server cơ bản chỉ mất vài giờ.

• Kết quả: Website hoạt động trên môi trường thực tế, sẵn sàng cho người dùng.

Ngày 7: Trau chuốt nội dung, tinh chỉnh trải nghiệm người dùng

• Mục tiêu: Hoàn thiện website và tối ưu trải nghiệm.

• Hoạt động:

  • Thêm nội dung chính thức: Bài viết, hình ảnh, hoặc dữ liệu thực tế.

  • Tinh chỉnh giao diện: Điều chỉnh màu sắc, font chữ, hoặc hiệu ứng (dùng Select element).

  • Kiểm tra SEO và tốc độ tải trang qua công cụ như Google Lighthouse.

  • Thu thập phản hồi từ bạn bè qua Public preview và cải thiện.

• Mẹo từ kinh nghiệm: Với Thinh Vu Blog, tôi dành ngày cuối để tối ưu SEO bằng YAML frontmatter và kiểm tra tốc độ tải. Những thay đổi nhỏ như thêm hiệu ứng hover giúp trải nghiệm người dùng tốt hơn.

• Kết quả: Website hoàn thiện, sẵn sàng ra mắt hoặc mở rộng.

Lộ trình này được xây dựng từ kinh nghiệm thực chiến của tôi khi xây dựng ba dự án trong 7 ngày mỗi dự án. Dù không biết sâu về Next.js hay Tailwind CSS, tôi đã tận dụng AI để biến ý tưởng thành hiện thực. Vibe coding không chỉ là công cụ, mà là tư duy: dám thử, dám sai, và học từ thực hành. Firebase Studio giúp bạn làm được điều đó mà không cần là lập trình viên chuyên nghiệp.

Bài học và cảm hứng từ vibe coding

Firebase Studio đã thay đổi cách mình nhìn nhận về việc xây dựng website. Từ một người chỉ biết chỉnh sửa cơ bản trên WordPress và Docusaurus, mình đã tạo ra ba website phức tạp mà không cần thành thạo Next.js hay Tailwind CSS. Vibe coding là sự kết hợp giữa cảm hứng, tương tác với AI và một chút tư duy hệ thống. Mỗi prompt, mỗi lần debug, mỗi commit là một bước tiến để biến ý tưởng thành hiện thực.

Mình tin rằng, với Firebase Studio, bất kỳ ai có ý tưởng và sẵn sàng thử sai đều có thể tạo ra những sản phẩm tuyệt vời. Bạn không cần phải là lập trình viên, chỉ cần dám mơ lớn và để AI đồng hành cùng bạn. Hãy thử vibe coding với Firebase Studio và chia sẻ câu chuyện của bạn với mình nhé!