Sebastian Petrus

Posted on Jun 23 • Originally published at apidog.com

Cách Google Gemini và Vibe Coding Thay Đổi Phát Triển API

Google Gemini đang định hình lại cách nhà phát triển xây dựng ứng dụng bằng “vibe coding”: mô tả yêu cầu bằng ngôn ngữ tự nhiên, để Gemini tạo mã, kết nối API và dựng luồng ứng dụng ban đầu. Với developer backend, API engineer hoặc tech lead, cách làm này hữu ích nhất khi bạn dùng Gemini để tạo prototype nhanh, sau đó kiểm tra, chỉnh sửa và xác thực từng phần trước khi đưa vào môi trường thật.

Dùng thử Apidog hôm nay

Nếu ứng dụng được “vibe code” có gọi API, bạn cần kiểm soát kỹ hợp đồng API, tham số, lỗi trả về và hành vi runtime. Các công cụ như Apidog phù hợp với quy trình này vì giúp bạn kiểm thử, mock và debug các API mà Gemini tạo hoặc tích hợp.

Vibe Coding Là Gì? Cách Google Gemini Biến Phát Triển Ứng Dụng Thành Đàm Thoại

Vibe coding là cách xây dựng phần mềm bằng prompt thay vì bắt đầu từ boilerplate code. Bạn mô tả tính năng, hành vi UI, API cần gọi và dữ liệu đầu vào/đầu ra. Gemini sẽ diễn giải yêu cầu đó để tạo mã, dựng giao diện, đề xuất cấu trúc ứng dụng và kết nối các API liên quan.

Khi nào nên dùng vibe coding?

Vibe coding hữu ích nhất trong các tình huống:

Tạo prototype nhanh để kiểm tra ý tưởng sản phẩm.
Sinh scaffold cho frontend/backend.
Tạo demo có tích hợp API.
Khám phá cách triển khai một tính năng trước khi tối ưu thủ công.
Sinh đoạn mã mẫu cho JavaScript, Python hoặc các stack phổ biến.

Không nên xem mã do Gemini sinh ra là production-ready ngay lập tức. Bạn vẫn cần review bảo mật, hiệu năng, xử lý lỗi và kiểm thử API.

Các tính năng chính của vibe coding với Gemini

Phát triển dạng đàm thoại: mô tả tính năng bằng prompt thay vì viết toàn bộ mã từ đầu.
Tích hợp đa phương thức: Gemini có thể xử lý văn bản, hình ảnh và video để hỗ trợ ứng dụng tương tác.
Tạo mẫu nhanh: chỉnh prompt, xem kết quả, lặp lại.
Tích hợp API tự động: Gemini có thể chọn và kết nối API phù hợp dựa trên mô tả, ví dụ API tạo hình ảnh hoặc video.

Ví dụ prompt:

Tạo một ứng dụng chỉnh sửa ảnh cho phép người dùng tải ảnh lên,
áp dụng bộ lọc, xem trước kết quả và lưu ảnh đã xử lý.
Dùng JavaScript cho frontend và tạo endpoint backend để xử lý upload.

Sau khi Gemini tạo mã, bạn nên kiểm tra tối thiểu các phần sau:

- API upload nhận đúng định dạng file chưa?
- Có giới hạn dung lượng file không?
- Có validate MIME type không?
- Có xử lý lỗi khi API xử lý ảnh thất bại không?
- Response trả về có schema ổn định không?

Quy trình nên là: prompt → sinh mã → chạy thử → kiểm tra API → sửa prompt hoặc sửa mã thủ công → kiểm thử lại.

Bên Trong Google Gemini: Kiến Trúc Kỹ Thuật Cho Vibe Coding

Gemini hoạt động theo một luồng nhiều bước để chuyển prompt thành mã hoặc cấu trúc ứng dụng:

Xử lý đầu vào: prompt được token hóa và chuyển thành biểu diễn ngữ nghĩa.
Lý luận yêu cầu: Gemini phân tích mục tiêu, tính năng, dữ liệu, UI và API cần thiết.
Tạo đầu ra: sinh mã, cấu hình API, logic giao diện và các phần kết nối.

Cách Gemini xử lý ứng dụng dựa trên API

Với ứng dụng có API, Gemini thường cần xác định:

Endpoint nào cần được gọi.
Request method là GET, POST, PUT, DELETE hay method khác.
Headers cần thiết, ví dụ Authorization hoặc Content-Type.
Request body và response schema.
Cách xử lý lỗi, timeout và trạng thái loading trên UI.

Ví dụ một prompt tốt hơn cho ứng dụng có API:

Tạo một ứng dụng React gọi API /api/products.

Yêu cầu:
- GET /api/products để lấy danh sách sản phẩm.
- Hiển thị loading state trong lúc gọi API.
- Nếu API trả lỗi, hiển thị thông báo lỗi.
- Response mẫu:
  {
    "items": [
      { "id": "p1", "name": "Keyboard", "price": 99 }
    ]
  }
- Viết component tách biệt: ProductList, ProductCard.

Prompt càng rõ schema và hành vi lỗi, mã sinh ra càng dễ kiểm thử.

Gemini cũng có thể hỗ trợ tích hợp các dịch vụ như Veo, Google Search hoặc các API đa phương thức khác, nhưng với API tùy chỉnh hoặc hệ thống nội bộ, bạn nên dùng công cụ ngoài để xác thực. Apidog có thể giúp kiểm tra endpoint, mock response và xác nhận API contract trước khi deploy.

Bắt Đầu: Vibe Coding Trong Google AI Studio

Bạn có thể thử vibe coding trong Google AI Studio theo quy trình sau:

Đăng nhập Google AI Studio và mở tab Build.
Chọn mô hình phù hợp:
- Gemini 2.5 Flash cho vòng lặp nhanh.
- Gemini Pro cho tác vụ cần lý luận phức tạp hơn.
Bật các tính năng bổ sung nếu cần, ví dụ Nano Banana cho chỉnh sửa ảnh hoặc Veo cho video.
Viết prompt có cấu trúc, nêu rõ:
- Stack mong muốn.
- Tính năng chính.
- API cần gọi.
- Dữ liệu đầu vào/đầu ra.
- Hành vi lỗi.
Chạy thử ứng dụng trong editor.
Review mã được tạo.
Kiểm thử API bằng công cụ chuyên dụng trước khi xem kết quả là ổn định.

Ví dụ prompt có cấu trúc:

Tạo một chatbot thiết kế vườn.

Stack:
- Frontend: React
- Backend: Node.js/Express

Tính năng:
- Người dùng nhập mô tả khu vườn.
- Backend gọi API tạo gợi ý thiết kế.
- Frontend hiển thị danh sách đề xuất.
- Nếu API lỗi, hiển thị thông báo và cho phép thử lại.

Yêu cầu kỹ thuật:
- Tách service gọi API thành file riêng.
- Không hardcode API key trong frontend.
- Thêm loading state và error state.

Với ứng dụng dựa vào API bên ngoài, Apidog có thể mock endpoint trước khi backend thật hoàn chỉnh. Điều này giúp frontend do Gemini tạo vẫn có dữ liệu để chạy thử.

Thư viện tích hợp sẵn trong Google AI Studio cũng giúp bạn xem, học và phối lại các dự án có sẵn. Đây là điểm khởi đầu tốt nếu bạn chưa biết nên mô tả prompt như thế nào.

Từng Bước: Xây Dựng Ứng Dụng Đầu Tiên Với Vibe Coding và Gemini

Ví dụ: xây dựng một công cụ thiết kế cảnh tương tác cho ý tưởng nội thất.

Bước 1: Mô tả ứng dụng

Prompt mẫu:

Tạo một ứng dụng sử dụng Nano Banana.

Người dùng có thể:
- Tải lên hình ảnh của một đối tượng.
- Kéo đối tượng vào một cảnh.
- Tạo lại đối tượng đó trong cảnh để thử nghiệm ý tưởng nội thất.

Yêu cầu:
- Có khu vực upload.
- Có canvas hoặc vùng preview.
- Có nút generate.
- Hiển thị trạng thái loading.
- Hiển thị lỗi nếu quá trình tạo ảnh thất bại.

Bước 2: Để Gemini phân tích yêu cầu

Gemini có thể xác định các phần cần thiết như:

Upload ảnh.
Preview ảnh.
Thao tác kéo thả.
API xử lý ảnh.
UI hiển thị kết quả.

Bước 3: Kiểm tra mã sinh ra

Sau khi Gemini tạo ứng dụng, hãy kiểm tra các phần sau:

- File upload có validate định dạng không?
- API key có bị lộ ở frontend không?
- Có xử lý trạng thái loading không?
- Có retry hoặc thông báo lỗi không?
- Response từ API có được parse an toàn không?

Bước 4: Tinh chỉnh bằng prompt tiếp theo

Ví dụ:

Thêm validation:
- Chỉ cho phép PNG và JPG.
- Giới hạn dung lượng file 5MB.
- Nếu file không hợp lệ, hiển thị lỗi ngay dưới input upload.

Hoặc:

Tách logic gọi API ra file services/imageGeneration.ts.
Thêm try/catch và trả về error message rõ ràng cho UI.

Bước 5: Dùng Annotation Mode để sửa UI

Bạn có thể chọn một thành phần UI và yêu cầu Gemini chỉnh sửa trực tiếp, ví dụ:

Đổi nút Generate sang màu xanh, thêm trạng thái disabled khi đang loading,
và thêm animation nhẹ khi hover.

Các Kỹ Thuật Nâng Cao: Chế Độ Chú Thích, Thư Viện Ứng Dụng và Xử Lý API

Chế độ chú thích để tinh chỉnh giao diện người dùng

Annotation Mode hữu ích khi bạn muốn sửa một phần cụ thể của UI mà không cần mô tả lại toàn bộ ứng dụng.

Ví dụ prompt:

Tạo hiệu ứng cho hình ảnh trượt vào từ bên trái khi kết quả được tạo xong.
Không thay đổi logic gọi API.

Thư viện ứng dụng để học hỏi và phối lại

Thay vì bắt đầu từ màn hình trống, bạn có thể:

Mở một project mẫu.
Xem cấu trúc prompt và mã.
Remix tính năng phù hợp.
Thay API hoặc schema theo nhu cầu của bạn.

Cách làm này đặc biệt hữu ích khi bạn muốn học cách Gemini tổ chức component, service API hoặc flow dữ liệu.

Hạn mức API và tích hợp

Gemini có thể theo dõi hạn mức API và yêu cầu bạn thêm API key riêng khi cần. Với ứng dụng thật, bạn nên quản lý API key theo nguyên tắc:

- Không đưa API key vào frontend.
- Lưu key trong biến môi trường.
- Gọi API bên thứ ba thông qua backend/proxy nếu cần.
- Log lỗi nhưng không log secret.
- Theo dõi quota và rate limit.

Ví dụ .env:

GEMINI_API_KEY=your_api_key_here

Ví dụ Node.js đọc biến môi trường:

const apiKey = process.env.GEMINI_API_KEY;

if (!apiKey) {
  throw new Error("Missing GEMINI_API_KEY");
}

Với API tùy chỉnh, bạn có thể dùng Apidog để thiết kế, kiểm thử và xác thực endpoint trước khi đưa vào production.

Apidog + Google Gemini: Hợp Lý Hóa Kiểm Thử API Cho Ứng Dụng Vibe-Coded

Apidog hỗ trợ thiết kế, mock, debug và kiểm thử API. Trong quy trình vibe coding, vai trò thực tế của Apidog là giúp bạn kiểm tra phần mà AI thường dễ bỏ sót: hợp đồng API và hành vi lỗi.

Quy trình đề xuất

Dùng Gemini để tạo ứng dụng hoặc endpoint ban đầu.
Trích xuất API contract từ mã hoặc yêu cầu Gemini tạo OpenAPI spec.
Nhập OpenAPI spec vào Apidog.
Tạo mock server để frontend có thể gọi API ngay cả khi backend chưa xong.
Kiểm thử request/response với nhiều trường hợp:
- Request hợp lệ.
- Thiếu tham số.
- Sai kiểu dữ liệu.
- Unauthorized.
- Rate limit.
- Lỗi server.
Cập nhật prompt hoặc mã dựa trên lỗi tìm được.
Chạy lại kiểm thử trước khi deploy.

Ví dụ yêu cầu Gemini tạo OpenAPI spec:

Từ mã Express vừa tạo, hãy sinh OpenAPI 3.0 spec cho các endpoint.
Bao gồm:
- request body
- response schema
- status code 200, 400, 401, 500
- ví dụ request và response

Ví dụ endpoint đơn giản:

paths:
  /api/products:
    get:
      summary: Get product list
      responses:
        "200":
          description: Product list
        "500":
          description: Internal server error

Sau đó bạn có thể nhập spec này vào Apidog để kiểm tra và mock.

Các điểm nên kiểm thử trong Apidog

Header xác thực có đúng không.
Query params có validate không.
Body có đúng schema không.
API có trả status code nhất quán không.
Response lỗi có đủ thông tin cho frontend không.
Các lệnh gọi API có chạy đúng thứ tự không.

Ví dụ checklist cho một API tạo ảnh:

POST /api/generate-image

Kiểm thử:
- 200: prompt hợp lệ, trả về imageUrl.
- 400: thiếu prompt.
- 401: thiếu hoặc sai API key.
- 413: payload quá lớn.
- 429: vượt rate limit.
- 500: provider xử lý ảnh lỗi.

Bằng cách đưa Apidog vào quy trình Gemini, bạn giảm rủi ro deploy một ứng dụng có UI chạy được nhưng API thiếu ổn định.

Các Thực Tiễn Tốt Nhất Khi Vibe Coding Với Google Gemini

Viết prompt cụ thể: nêu stack, tính năng, schema, trạng thái lỗi và tiêu chí hoàn thành.
Chia nhỏ yêu cầu: tạo từng feature nhỏ thay vì yêu cầu toàn bộ ứng dụng phức tạp trong một prompt.
Yêu cầu Gemini giải thích mã: giúp bạn review nhanh hơn.
Không bỏ qua code review: kiểm tra bảo mật, hiệu năng, dependency và xử lý lỗi.
Kiểm thử tăng dần: test từng endpoint và từng component trước khi ghép toàn bộ flow.
Quản lý API key an toàn: không hardcode secret trong frontend.
Theo dõi quota API: xử lý rate limit và fallback nếu cần.
Lưu prompt quan trọng: giúp tái tạo quyết định kỹ thuật.
Dùng Apidog để xác thực API: mock, debug và kiểm thử contract trước production.
Giữ quyền kiểm soát kỹ thuật: AI hỗ trợ sinh mã, nhưng bạn vẫn chịu trách nhiệm về kiến trúc và chất lượng.

Nhìn Về Phía Trước: Tương Lai Của Vibe Coding và Phát Triển API

Google Gemini đang làm cho việc tạo prototype và xây dựng ứng dụng dựa trên prompt trở nên nhanh hơn. Tuy nhiên, với ứng dụng thực tế, phần quan trọng vẫn là kiểm soát chất lượng: review mã, kiểm thử API, bảo mật secret và xác thực hành vi lỗi.

Với các nhóm xây dựng sản phẩm dựa trên API, quy trình hiệu quả là kết hợp Gemini để tăng tốc tạo mã với Apidog để kiểm thử và xác thực lớp API. Cách tiếp cận này giúp bạn tận dụng tốc độ của vibe coding mà vẫn giữ được độ tin cậy cần thiết khi triển khai.

DEV Community