Khóa học Vibe Coding: Tạo Website với Google Firebase Studio
Chúng ta đã cùng nhau đi qua một hành trình đầy cảm hứng, từ việc hành trình các nhân đến những kinh nghiệm "Vibe Coding" thực chiến, khám phá các kỹ năng cốt lõi để làm việc với Google Firebase Studio, cho đến một lộ trình 7 ngày thực chiến để bạn có thể tự tin bắt đầu.
Nếu những chia sẻ vừa rồi đã khơi dậy trong bạn niềm đam mê kiến tạo và bạn mong muốn được đồng hành một cách bài bản hơn, thì đây chính là bước tiếp theo dành cho bạn.
Giới thiệu Khóa học: "Vibe Coding với Google Firebase Studio"
Mình rất hào hứng chia sẻ ý tưởng về một khóa học đầu tiên hỗ trợ phương pháp xây dựng website hiện đại bằng phương pháp "Vibe Coding" với Firebase Studio.
Khóa học này dành cho ai?
- Người làm sản phẩm, marketing, thiết kế: Những ai có ý tưởng nhưng thiếu kỹ năng lập trình để hiện thực hóa.
- Freelancer và Blogger: Những người muốn tự tay xây dựng website cho riêng mình một cách nhanh chóng và tiết kiệm cùng khả năng cá nhân hoá trải nghiệm mà không website template nào đáp ứng hết được.
- Bất kỳ ai tò mò về sức mạnh của AI: Và muốn ứng dụng công nghệ để tạo ra sản phẩm thực tế.
Bạn sẽ học được gì?
Khóa học được thiết kế theo phương pháp "learning by doing", tập trung vào dự án thực tế. Bạn sẽ được hướng dẫn từng bước để xây dựng một website hoàn chỉnh từ A-Z.
Nền tảng & Xây dựng Giao diện Thô
Mục tiêu: Hiểu triết lý vibe coding, làm quen với giao diện Firebase Studio, và phác thảo giao diện website đầu tiên.
Hoạt động:
- Hiểu rõ triết lý "Vibe Coding": Nắm cách xây dựng website dựa trên cảm hứng và AI.
- Khám phá: Truy cập Firebase Studio (miễn phí), làm quen với App Prototype[^2] và Code Editor[^3].
- Mô tả ý tưởng: Mô tả dự án mục tiêu (blog, portfolio, phân tích chứng khoán)
- Tùy chỉnh giao diện: Mô tả các điều chỉnh đối với giao diện và thành phần trên web với prompt
- 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.
Kết quả: Hiểu cách ra lệnh cho AI và có giao diện thô cho dự án.
Tinh chỉnh Giao diện & Thiết kế Responsive
Mục tiêu: Hoàn thiện giao diện, đảm bảo hiển thị tốt trên nhiều thiết bị.
Hoạt động:
- Thêm trang phụ: Tạo các trang (landing page) “Giới thiệu” hoặc “Liên hệ"
- Thiết kế responsive: Kiểm tra hành vi hiển thị với giao diện trên App Prototype và thiết bị thực tế.
- Xử lý lỗi: Sử dụng Fix Bug để sửa lỗi như xung đột thư viện hoặc bố cục vỡ.
- Làm mới ngữ cảnh: Làm mới cửa sổ ngữ cảnh của App Prototyper.
- Tùy chỉnh bố cục, hiển thị, nội dung và trải nghiệm người dùng
Kết quả: Giao diện website hoàn chỉnh, responsive, và bạn tự tin xử lý lỗi nhỏ.
Tích hợp Backend & Quản lý Dữ liệu
Mục tiêu: Thêm tính năng tương tác (đăng nhập, lưu dữ liệu) và quản lý nội dung động/tĩnh.
Hoạt động:
- Tích hợp Firebase Authentication[^7] để người dùng đăng nhập với Google và các tài khoản mạng xã hội
- Tích hợp Firestore[^8]: Tạo cấu trúc dữ liệu dự án
- Quản lý nội dung bằng Markdown: Soạn thảo bài viết mẫu hướng dẫn phong cách & định dạng nội dung có thể tiếp tục trên Obsidian)
- Khám phá Code Editor: Làm quen với mã nguồn dự án: `/src/app` (giao diện, tính năng) và `/components` (phần tử giao diện).
- Git và lệnh terminal[^9]: Làm quen cách lưu trữ và quản lý phiên bản với Git và cách chạy các lệnh thường gặp trong Terminal.
Kết quả: Website có tính năng tương tác cơ bản và nội dung động/tĩnh, bạn hiểu cách tổ chức mã nguồn.
Triển khai & Tối ưu Hiệu suất
Mục tiêu: Triển khai website lên máy chủ dịch vụ, tối ưu SEO và hiệu suất, tài liệu và bảo trì.
Hoạt động:
- Chọn nền tảng triển khai:
- Netlify[^11] (trang tĩnh): Kết nối dự án với Github, thiết lập biến môi trường, cấu hình triển khai.
- VPS Linux[^12] (trang động) cần hệ thống backend.
- Tối ưu SEO và hiệu suất: Tối ưu SEO cơ bản và kiểm tra tốc độ bằng Google PageSpeed Insights[^13]
- Tự động hóa với Github Actions: Thiết lập quy trình tự động triển khai.
- 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.
- Thu thập phản hồi: Chia sẻ URL qua Public Preview hoặc link triển khai để lấy ý kiến.
Kết quả: Website được triển khai, tối ưu SEO và hiệu suất, sẵn sàng ra mắt hoặc bảo trì.
Dự án Thực tế
Mục tiêu: Áp dụng kiến thức để xây dựng các dự án thực tế, củng cố kỹ năng vibe coding.
Hoạt động:
- Xây dựng một Blog cá nhân hoàn chỉnh: Tích hợp nội dung Markdown, giao diện responsive, đăng nhập, tìm kiếm.
- Xây dựng một trang Portfolio/Landing Page: Tạo trang giới thiệu bản thân hoặc sản phẩm với Shadcn UI và Tailwind CSS.
- Tạo website phân tích chứng khoán: Tích hợp bảng dữ liệu động qua Firestore, ví dụ: _“Tạo bảng với cột mã cổ phiếu, giá, nút xem chi tiết.”_
- (Nâng cao) Xây dựng hệ thống LMS cơ bản: Tích hợp quản lý người dùng, khóa học, và nội dung học tập.
Kết quả: Hoàn thành ít nhất một dự án thực tế (blog, portfolio, hoặc website chứng khoán, trang giới thiệu sản phẩm), sẵn sàng mở rộng hoặc ra mắt.
Tại sao nên tham gia khóa học này?
- Tiếp cận độc đáo: Đây không phải là một khóa học lập trình truyền thống. Chúng ta sẽ học cách "ra lệnh" và "hợp tác" với AI.
- Thực chiến 100%: Toàn bộ khóa học xoay quanh việc xây dựng các dự án thực tế mà bạn có thể tự hào cho vào portfolio của mình.
- Hỗ trợ trực tiếp từ mình: Mình sẽ đồng hành, giải đáp thắc mắc và chia sẻ kinh nghiệm "xương máu" trong suốt quá trình học.
- Tiết kiệm thời gian và công sức: Thay vì mất hàng tháng trời tự mày mò, bạn sẽ có một lộ trình rõ ràng và hiệu quả để đạt được kết quả. Nếu bạn cảm thấy choáng ngợp với nhiều khái niệm, công cụ và vẫn còn mông lung khi đọc lộ trình học 7 ngày nhưng vẫn muốn bắt đầu thì khoá học này dành cho bạn.
Sẵn sàng để bắt đầu?
Lộ trình này được thiết kế để bạn có thể bắt đầu từ con số 0 và đạt được kết quả thực tế chỉ gói gọn trong 4 buổi với 8 giờ học. Dù bạn muốn xây dựng một blog cá nhân, một portfolio, hay một hệ thống phức tạp hơn, Firebase Studio và vibe coding sẽ giúp bạn biến ý tưởng thành hiện thực.
Hành trình kiến tạo của bạn chỉ cách một quyết định. Nếu bạn đã sẵn sàng để biến những ý tưởng trong đầu thành những website ấn tượng, hãy tham gia cùng mình. Học phí dự kiến là 2 triệu đồng/khoá. Ưu đãi 50% học phí cho học viên cũ. Mình thực sự muốn lan toả trải nghiệm tích cực này tới những người xung quanh. Khoá học sẽ bắt đầu khi có ít nhất 30 học viên.
Cảm ơn bạn đã theo dõi chuỗi bài viết này. Mình rất vui khi ngồi đây ghi lại hành trình học tập, trải nghiệm và xây dựng các sản phẩm thực tế từ nhu cầu bản thân và tuyệt vời hơn khi giúp bạn cũng có thể biến ý tưởng của mình thành website thực tế. Hy vọng rằng, dù bạn quyết định tham gia khóa học hay tự mình khám phá, hành trình "Vibe Coding" sẽ mở ra cho bạn những cánh cửa mới đầy sáng tạo và thú vị.
Bình luận