Trang này được dịch bởi Cloud Translation API.

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 Cơ sở dữ liệu theo thời gian thực của Firebase.

Ả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 Cơ sở dữ liệu theo thời gian thực của Firebase 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.

Đă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.
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.
```
Nhấp vào Cải thiện câu lệnh. Xem lại câu lệnh đã được cải thiện.
Nhấp vào Tạo nguyên mẫu bằng AI.
Xem xét Bản thiết kế ứng dụng được đề xuất. Nhấp vào Tuỳ chỉnh để chỉnh sửa.
Nhấp vào Lưu.
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.
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.
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.

Trong Firebase Studio, hãy nhấp vào Switch to Code (Chuyển sang chế độ xem mã) để mở chế độ xem Mã.
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
```
Trong Trình khám phá (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 Enter.

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 Cơ sở dữ liệu theo thời gian thực của Firebase bằng Firebase MCP

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

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.
```
Create a Firebase project for my app.
```
Đại lý dự kiến sẽ gọi công cụ MCP của Firebase firebase_create_project.Bỏ qua bước này nếu bạn đã tạo một dự án Firebase trong 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. Ngoài ra, hãy 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.
Yêu cầu nhân viên hỗ trợ kết nối với dự án này.
```
Connect my app to my project `spinsync-3y3c6`.
```
Đảm bảo bạn thấy một tệp .firebaserc thiết lập dự án đang hoạt động của bạn. Nếu không, hãy yêu cầu nhân viên hỗ trợ cập nhật môi trường Firebase của bạn.
```
Update my Firebase environment to use this project.
```
Yêu cầu nhân viên hỗ trợ gọi công cụ MCP của Firebase firebase_update_environment . Tuy nhiên, có thể tác nhân hoàn thành việc này mà không cần gọi công cụ.Cuối cùng, hãy kiểm tra để đảm bảo môi trường Firebase của bạn có dự án đang hoạt động chính xác và bạn là người dùng đã xác thực.
```
Show me my current Firebase environment.
```
Yêu cầu nhân viên hỗ trợ gọi công cụ MCP của Firebase firebase_get_environment.
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 active Firebase project.
```
Mong đợi tác nhân gọi công cụ firebase_create_app và trả về Mã ứng dụng. Nếu tác nhân không làm được, hãy thử lại bằng cách nhấp vào , hoặc làm theo hướng dẫn này để hoàn tất bước trong Bảng điều khiển Firebase.
```
Use the App ID to get the SDK configuration and add to my app.
```
Mong đợi tác nhân gọi công cụ firebase_get_sdk_config và cập nhật mã của bạn bằng Cấu hình Firebase.Nếu khoá API và các cấu hình khác xuất hiện trong src/lib/firebase.ts sau khi tác nhân khai báo hoàn thành nhiệm vụ, hãy yêu cầu tác nhân di chuyển chúng ra ngoài để giữ an toàn cho ứng dụng của bạn.
```
Secure my code by moving my Firebase config to the `.env` file.
```

Mục tiêu 2: Thêm Cơ sở dữ liệu theo thời gian thực của Firebase

Tiếp tục sử dụng hoặc Chuyển sang Prototyper. Trong giao diện trò chuyện, hãy yêu cầu tác nhân thiết lập Cơ sở dữ liệu thời gian thực Firebase trong dự án của bạn.
```
Set up Firebase Realtime Database in my active project. Give anyone
read and write access.
```
Dự kiến tác nhân sẽ gọi công cụ Firebase MCP firebase_init và tạo các quy tắc bảo mật trong database.rules.json trong quá trình thay đổi tệp ở cuối lượt trò chuyện này.
```
{
    "rules": {
        ".read": true,
        ".write": 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 CodeLab 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.
Chuyển sang chế độ Mã. Trong thiết bị đầu cuối (Shift+Ctrl+C), hãy khởi động Cơ sở dữ liệu theo thời gian thực của Firebase.
```
firebase init database
```
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.Sau đó, 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 database
```
Chuyển sang Prototyper. Yêu cầu tác nhân sử dụng phiên bản cơ sở dữ liệu mặc định của bạn cho các mục nhập của người dùng.
```
Use my default Realtime Database instance for user entries.
```
Hãy chờ đợi để tác nhân cập nhật phần còn lại của mã nguồn nhằm kết nối ứng dụng với phiên bản cơ sở dữ liệu của bạn.

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

Tạo một vài mục mới cho bánh xe chọn và xem các mục đó xuất hiện trong trang Cơ sở dữ liệu theo thời gian thực của Firebase trong Bảng điều khiển của Firebase.

Cơ sở dữ liệu theo thời gian thực của Firebase trong Bảng điều khiển của Firebase

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.