Bài 03: Lần đầu nói chuyện với AI để nó làm app cho bạn
Giai đoạn 1: LÀM QUEN 👋 Thời lượng: 45-90 phút (đọc + thực hành + bài tập) Công cụ: Google AI Studio — aistudio.google.com
🎯 Mục Tiêu Bài Học
- Sau bài này, bạn sẽ tự tay gõ prompt (câu mô tả yêu cầu) đầu tiên và thấy AI tạo ra sản phẩm
- Sau bài này, bạn sẽ biết cách chat để chỉnh sửa sản phẩm (đổi màu, đổi chữ, thêm phần)
- Sau bài này, bạn sẽ hiểu vòng lặp: mô tả → AI tạo → xem → yêu cầu chỉnh → AI sửa → xem lại
💡 Ví Dụ Thực Tế
Anh Minh bán cà phê online. Anh muốn có một trang “Giới thiệu bản thân” đơn giản — gồm tên, ảnh, mô tả ngắn, và link đặt hàng. Anh gõ vào Google AI Studio: “Tạo cho tôi trang giới thiệu bản thân, nền tối, chữ trắng, có tên Minh Coffee, mô tả ‘Cà phê rang xay thủ công từ Đà Lạt’, có nút ‘Đặt hàng ngay’ màu cam.” 30 giây sau, trang web xuất hiện trên màn hình. Anh nhìn thấy nhưng muốn font chữ to hơn, nên gõ tiếp: “Tăng kích thước chữ tiêu đề lên gấp đôi.” AI chỉnh ngay. Anh hài lòng — tổng cộng mất 3 phút.
📚 Kiến Thức Cần Biết
Prompt (đọc là “prôm-pt”) là câu mô tả mà bạn gõ vào để “ra lệnh” cho AI. Giống như khi bạn gọi món ở nhà hàng — bạn nói càng rõ thì đầu bếp làm càng đúng ý. Nếu bạn nói “cho tôi món gì đó ngon” thì đầu bếp sẽ tự chọn, có thể không đúng ý bạn. Nhưng nếu nói “cho tôi phở bò tái, thêm nhiều hành, ít giá, nước dùng thật nóng” thì gần như chắc chắn đúng ý.
Vòng lặp phản hồi (feedback loop) là quy trình: bạn mô tả → AI tạo → bạn xem → bạn yêu cầu chỉnh → AI sửa → bạn xem lại. Vòng lặp này lặp đi lặp lại cho đến khi bạn hài lòng. Đây là kỹ năng quan trọng nhất trong Vibe Coding — không ai làm đúng từ lần đầu tiên, kể cả lập trình viên chuyên nghiệp.
Khi chat chỉnh sửa, bạn không cần phải nhắc lại toàn bộ mô tả ban đầu. AI “nhớ” những gì bạn đã nói trước đó (gọi là context awareness — khả năng ghi nhớ ngữ cảnh). Bạn chỉ cần nói điều cần thay đổi, ví dụ: “Đổi màu nền sang xanh dương” hay “Thêm một phần số điện thoại liên hệ ở cuối trang.”
🧪 Thực Hành Từng Bước
- Mở trình duyệt Chrome, truy cập https://aistudio.google.com/apps
- Đăng nhập nếu chưa đăng nhập
- Bạn sẽ thấy ô nhập mô tả. Hãy gõ (hoặc copy-paste) prompt sau:
Tạo cho tôi một trang giới thiệu cá nhân đơn giản với các thông tin sau:
- Tên: [GÕ TÊN BẠN]
- Nghề nghiệp: [GÕ NGHỀ CỦA BẠN]
- Mô tả ngắn: [GÕ 1-2 CÂU VỀ BẠN]
- Email liên hệ: [GÕ EMAIL]
- Phong cách: hiện đại, sạch sẽ, chuyên nghiệp
- Màu chủ đạo: xanh dương đậm và trắng
- Có ảnh avatar hình tròn ở trên cùng (dùng ảnh placeholder)
- Có nút "Liên hệ ngay" nổi bật- Nhấn nút Run (hoặc Cmd+Enter trên Mac, Ctrl+Enter trên Windows)
- Chờ khoảng 15-30 giây — bạn sẽ thấy code được tạo ra bên trái, và khung kết quả chat hiện ra bên phải
- Nhìn vào khung kết quả chat — đó là “trang web” đầu tiên bạn tạo ra!
- Giờ hãy thử chỉnh sửa. Gõ vào ô chat (cùng chỗ bạn vừa gõ prompt):
Đổi màu nền sang gradient từ tím đậm sang đen. Đổi màu chữ sang trắng. Thêm hiệu ứng đổ bóng cho ảnh avatar.- Nhấn Send/Build — quan sát khung kết quả chat thay đổi
- Thử thêm một yêu cầu nữa:
Thêm phần "Kỹ năng" gồm 4 kỹ năng chính của tôi: [gõ 4 kỹ năng]. Mỗi kỹ năng có icon nhỏ bên cạnh.- Nhấn Send/Build và xem kết quả
- Nếu có điều chưa ưng ý, cứ gõ tiếp vào chat yêu cầu chỉnh sửa — bạn có thể chỉnh bao nhiêu lần tùy thích
✅ Kết Quả Đầu Ra
Bạn sẽ có một trang “Giới thiệu cá nhân” chạy được trên khung kết quả chat, đã được chỉnh sửa ít nhất 2-3 lần theo ý bạn. Đây là sản phẩm số đầu tiên bạn tạo ra bằng Vibe Coding!
💡 Mẹo & Lưu Ý
- Prompt tiếng Việt hoạt động rất tốt, nhưng nếu AI hiểu sai, thử viết lại bằng tiếng Anh đơn giản — ví dụ: “Change background color to purple gradient”
- Mỗi lần yêu cầu chỉnh sửa, nên chỉ yêu cầu 1-3 thay đổi. Nếu yêu cầu quá nhiều thứ cùng lúc (10 thay đổi một lần), AI dễ bỏ sót
- ⚠️ Lỗi thường gặp: Đôi khi khung kết quả chat bị trắng hoặc hiển thị lỗi. Hãy gõ vào chat: “Trang bị lỗi, hãy sửa lại cho chạy được” — AI sẽ tự phát hiện và sửa lỗi
📝 Bài Tập Về Nhà
Tạo một trang giới thiệu cá nhân hoặc giới thiệu doanh nghiệp/dịch vụ của bạn (dùng thông tin thật). Chỉnh sửa ít nhất 5 lần qua chat để nó trông đúng ý bạn. Chụp ảnh màn hình (screenshot) kết quả cuối cùng để so sánh với phiên bản đầu tiên.
🏆 Achievement Bài 03
- [ ] Hoàn thành đọc phần kiến thức
- [ ] Làm xong các bước thực hành
- [ ] Nộp bài tập về nhà
- [ ] Ghi chú những điều học được
Bài tiếp theo: Card visit online — sản phẩm đầu tay 🚀