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
  • Kết nối với một dự án Firebase
  • 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.

  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. (Không bắt buộc) Lấy mã

Nếu bạn gặp khó khăn, hãy sử dụng các tệp mẫu để theo dõi chặt chẽ hơn ứng dụng mẫu từ thời điểm này trở đi.

  1. Tải các tệp trong thư mục xuống.
  2. Trong Firebase Studio, hãy nhấp vào biểu tượng chế độ xem mã Switch to Code (Chuyển sang chế độ xem mã) để mở chế độ xem Mã.
  3. Kéo các tệp bạn đã tải xuống vào ngăn Explorer của Firebase Studio. Cho phép các tệp này thay thế mọi tệp hiện có.
  4. Trong cửa sổ dòng lệnh (Shift+Ctrl+C), hãy chạy lệnh sau để cài đặt các gói.
    npm install
  5. Mở ngăn Source Control (Kiểm soát nguồn) của Firebase Studio, nhập một thông báo để mô tả thay đổi về mã, ví dụ: "imported code from GitHub" (nhập mã từ GitHub), rồi nhấn vào Commit (Xác nhận).
  6. Nhấp vào Chuyển sang Prototyper để tiếp tục lớp học lập trình này bằng phiên bản mẫu của ứng dụng.

4. Kết nối với một dự án Firebase

Xin chúc mừng! Ứng dụng của bạn đang hoạt động trên thiết bị. Để cung cấp cho ứng dụng một phần phụ trợ, bạn sẽ kết nối ứng dụng đó với một dự án Firebase.

  1. Yêu cầu tác nhân Tạo mẫu ứng dụng kết nối với một dự án Firebase.
    Connect to a Firebase project.
    Mong đợi tác nhân tạo một dự án mới hoặc kết nối với một dự án hiện có (nếu bạn đã sử dụng lựa chọn tự động tạo để lấy Khoá API Gemini trước đó, thì dự án của bạ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), sau đó tạo cấu hình Firebase cần thiết và tích hợp cấu hình đó vào ứng dụng của bạn thông qua src/lib/firebase.ts (như minh hoạ).
    import { initializeApp, getApp, getApps } from 'firebase/app';

const firebaseConfig = {
  "projectId": "foo-bar-baz",
  "appId": "1:630673270654:web:3eda41879acd38fa96ce14",
  "storageBucket": "foo-bar-baz.firebasestorage.app",
  "apiKey": "AIzaSyDGoMZQia334izw8JedslMTUD0fNpmFca0",
  "authDomain": "foo-bar-baz.firebaseapp.com",
  "measurementId": "",
  "messagingSenderId": "630673270654"
};

// Initialize Firebase
const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();

export default app;
    Bạn có thể hỏi lại trợ lý nếu câu lệnh trên không hoàn thành được nhiệm vụ ngay lập tức. Hãy chia nhỏ các bước nếu cần.
    Create a new Firebase project.

5. 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. Nhấp vào biểu tượng chế độ xem mã của StudioChuyể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 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

6. Thêm Firestore bằng Firebase MCP

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

  1. Chuyển sang Prototyper. 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.
    Nhân viên hỗ trợ cần:
    • khởi chạy Firestore bằng cách gọi công cụ Firebase MCP firebase_init, công cụ này sẽ tạo các quy tắc Firestore (như minh hoạ) và lập chỉ mục các tệp trong số những thay đổi khác về cấu hình
    • cập nhật mã ứng dụng để sử dụng Firestore thay vì bộ nhớ cục bộ
    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. Chuyển sang chế độ Mã. Trong thiết bị đầu cuối (Shift+Ctrl+C), hãy khởi chạy Firestore nếu bạn chưa bao giờ bật API Firestore trong dự án Firebase hiện tại.
    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 2: Dùng thử

  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

  1. Bạn cũng có thể trò chuyện với Firestore để truy vấn cơ sở dữ liệu của mình.
    List my Firestore collections.
    Gemini dự kiến sẽ gọi công cụ MCP của Firebase firestore_list_collections.

Trò chuyện với Firestore

7. 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