MCP của Firebase trong Firebase Studio

1. Tổng quan

Trong lớp học lập trình này, bạn sẽ thực hành sử dụng tác nhân Tạo mẫu ứng dụng cùng với máy chủ Firebase MCP trong Firebase Studio để tạo một ứng dụng web full-stack sử dụng Firestore.

Ảnh GIF động của ứng dụng cuối cùng

Kiến thức bạn sẽ học được

  • Tạo một ứng dụng web tĩnh bằng tác nhân Tạo mẫu ứng dụng
  • Thiết lập máy chủ MCP của Firebase
  • Thêm Firestore bằng Firebase MCP

Bạn cần có

  • Một trình duyệt mà bạn chọn, chẳng hạn như Google Chrome
  • Một Tài khoản Google để tạo và quản lý dự án Firebase

2. Tạo ứng dụng bằng tác nhân Tạo mẫu ứng dụng

Tác nhân Tạo mẫu ứng dụng sử dụng Gemini trong Firebase để tạo ứng dụng của bạn. Ngay cả khi bạn sử dụng các câu lệnh giống hệt nhau, kết quả có thể khác nhau. Nếu gặp khó khăn, bạn có thể thêm một bộ tệp vào không gian làm việc để tiếp tục thực hiện lớp học lập trình này tại một số điểm kiểm tra.

  1. Đăng nhập vào Tài khoản Google của bạn, tham gia Chương trình Nhà phát triển của Google và mở Firebase Studio.
  2. Trong trường Tạo mẫu ứng dụng bằng AI, hãy nhập nội dung mô tả về ứng dụng:
    An app for a picker wheel that allows custom input.
  3. Nhấp vào Cải thiện câu lệnh. Xem lại câu lệnh đã được cải thiện.
  4. Nhấp vào Tạo nguyên mẫu bằng AI.
  5. Xem xét Bản thiết kế ứng dụng được đề xuất. Nhấp vào tuỳ chỉnh biểu tượng cho thao tác chỉnh sửa codiconTuỳ chỉnh để chỉnh sửa.
  6. Nhấp vào Lưu.
  7. Khi bản thiết kế hoàn tất việc kết hợp các nội dung cập nhật của bạn, hãy nhấp vào Tạo mẫu cho ứng dụng này.Bản thiết kế cho ứng dụng
  8. Nếu bản thiết kế của bạn có các phần tử AI, thì tác nhân sẽ nhắc bạn nhập khoá Gemini. Thêm khoá Gemini API của riêng bạn hoặc nhấp vào Tạo tự động để tạo khoá Gemini API. Nếu bạn nhấp vào Tự động tạo, Firebase Studio sẽ tạo một dự án Firebase và tạo khoá Gemini API cho bạn.
  9. Tác nhân Tạo mẫu ứng dụng sử dụng bản thiết kế để tạo phiên bản đầu tiên của ứng dụng. Khi hoàn tất, bản xem trước ứng dụng sẽ xuất hiện cùng với giao diện trò chuyện của Gemini. Dành chút thời gian để xem xét và kiểm thử ứng dụng của bạn. Nếu bạn gặp lỗi, hãy nhấp vào Khắc phục lỗi trong cuộc trò chuyện để cho phép trợ lý khắc phục lỗi của chính mình.

3. Thiết lập MCP Firebase trong Firebase Studio

Máy chủ MCP của Firebase mở rộng các chức năng của tác nhân Tạo mẫu ứng dụng bằng cách cung cấp các công cụ mà tác nhân có thể gọi để thiết lập, quản lý và kéo dữ liệu từ các dịch vụ của Firebase, bao gồm cả Xác thực Firebase, Cloud Firestore và Firebase Data Connect. Sau đây là cách thiết lập.

  1. Trong Firebase Studio, hãy nhấp vào biểu tượng chế độ xem mã của StudioSwitch to Code (Chuyển sang chế độ xem mã) để mở chế độ xem Mã.
  2. Trong thiết bị đầu cuối (Shift+Ctrl+C), hãy chạy lệnh sau để đăng nhập vào tài khoản Firebase của bạn, làm theo hướng dẫn trên màn hình và giữ nguyên tất cả các lựa chọn mặc định:
    firebase login --no-localhost
  3. Trong Explorer (Ctrl+Shift+E), hãy nhấp chuột phải vào thư mục .idx rồi chọn New file (Tệp mới). Đặt tên cho tệp là mcp.json rồi nhấn phím Enter.
  4. Thêm cấu hình máy chủ vào .idx/mcp.json.
    {
    "mcpServers": {
        "firebase": {
            "command": "npx",
            "args": [
                "-y",
                "firebase-tools@latest",
                "experimental:mcp"
            ]
        }
    }
}
    Xác minh rằng bạn đã kết nối với Máy chủ MCP của Firebase. Bạn sẽ thấy các mục nhật ký tương tự trong bảng điều khiển Đầu ra, trong đó "Gemini" được chọn làm kênh phù hợp.Nhật ký MCPManager của Gemini

4. Thêm Firestore bằng Firebase MCP

Mục tiêu 1: Thêm Firebase vào ứng dụng của bạn

  1. Chuyển sang Prototyper. Trong giao diện trò chuyện, hãy yêu cầu tác nhân tạo một dự án Firebase.
    Create a Firebase project.
    Bỏ qua bước này nếu bạn đã tạo một dự án Firebase khi sử dụng lựa chọn tự động tạo để lấy Khoá Gemini API. Mã dự án sẽ xuất hiện bên cạnh tên không gian làm việc ở góc trên cùng bên trái màn hình. Hoặc yêu cầu trợ lý liệt kê các dự án của bạn và ghi lại dự án mà bạn muốn sử dụng.
    List my Firebase projects.
    Yêu cầu nhân viên hỗ trợ gọi công cụ MCP của Firebase firebase_list_projects.
  2. Yêu cầu tác nhân sử dụng dự án Firebase của bạn cho quá trình phát triển cục bộ.
    Use `spinsync-3y3c6` as my Firebase project in my local environment.
    Đảm bảo bạn thấy một tệp .firebaserc đặt dự án Firebase mặc định. Tệp này cho Firebase CLI biết dự án Firebase nào cần sử dụng. Nếu bạn không thấy tệp này, hãy yêu cầu lại cho riêng tệp này.
  3. Yêu cầu tác nhân tạo một ứng dụng web trong dự án Firebase của bạn.
    Create a web app in my Firebase project.
    Dự kiến tác nhân sẽ gọi công cụ firebase_create_app. Nếu không, hãy thử lại hoặc làm theo hướng dẫn này để hoàn tất bước này trong Bảng điều khiển Firebase.Tác nhân có thể tiếp tục gọi công cụ firebase_get_sdk_config và tạo các tệp cần thiết để kết nối dự án của bạn với ứng dụng web Firebase. Nếu không, hãy nhắc tác nhân làm như vậy.
    Add my Firebase SDK configuration to my app.
    Tác nhân thường đặt khoá API và các cấu hình khác của bạn trực tiếp trong src/lib/firebase.ts. Yêu cầu công cụ này di chuyển các khoá đó ra khỏi mã ứng dụng để giữ an toàn cho ứng dụng của bạn.
    Secure my code by moving my Firebase config to my `.env` file.

Mục tiêu 2: Thêm Firestore

  1. Chuyển sang chế độ Mã. Trong giao diện trò chuyện, hãy yêu cầu tác nhân sử dụng Firestore trong ứng dụng của bạn.
    Use Firestore for user entries. Give anyone read and write access.
    Mong đợi tác nhân cập nhật mã nguồn của bạn để sử dụng Firestore thay vì bộ nhớ cục bộ cho các mục nhập của người dùng và tạo các quy tắc bảo mật Firestore. Xin lưu ý rằng lệnh này có thể gọi công cụ MCP của Firebase firebase_init hoặc nhắc bạn chạy lệnh firebase init trong thiết bị đầu cuối để khởi động Firestore. Dù sao đi nữa, hãy đảm bảo bạn thấy tệp firestore.rules có nội dung sau đây trước khi tiếp tục.
    rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}
    Tại đây, bạn cấp cho mọi người quyền đọc và ghi vào cơ sở dữ liệu của mình. Ngoài lớp học lập trình này, bạn phải luôn bảo mật cơ sở dữ liệu của mình. Tìm hiểu thêm về chủ đề này trong tài liệu của chúng tôi.
  2. Trong thiết bị đầu cuối (Shift+Ctrl+C), hãy khởi động Firestore nếu trước đó nhân viên hỗ trợ chưa nhắc bạn làm việc này.
    firebase init firestore
    Làm theo hướng dẫn trên màn hình và giữ nguyên các lựa chọn mặc định. Không ghi đè các quy tắc bảo mật ở bước trước.Sau đó, hãy triển khai các quy tắc bảo mật cho phiên bản cơ sở dữ liệu của bạn.
    firebase deploy --only firestore
    Thao tác này sẽ cung cấp một phiên bản cơ sở dữ liệu Firestore cho bạn.

Mục tiêu 3: Thử nghiệm

  1. Tải lại ứng dụng, tạo và xoá các mục trên bánh xe chọn, đồng thời xem những nội dung cập nhật này trên trang Firestore trong Bảng điều khiển Firebase.

Ứng dụng trong Studio và Console

5. Kết luận

Xin chúc mừng! Bạn đã tạo thành công một ứng dụng web toàn diện bằng cách sử dụng tác nhân Tạo mẫu ứng dụng với Firebase MCP. Bạn có thể dùng thử các công cụ khác do máy chủ MCP của Firebase cung cấp và mở rộng những việc mà ứng dụng của bạn có thể làm.

Tìm hiểu thêm