ปรับแต่งพื้นที่ทํางาน Firebase Studio

Firebase Studio ช่วยให้คุณปรับแต่งพื้นที่ทำงานให้ตรงกับความต้องการเฉพาะของโปรเจ็กต์ได้โดยการกำหนดไฟล์การกำหนดค่า .idx/dev.nix ไฟล์เดียวที่อธิบายสิ่งต่อไปนี้

  • เครื่องมือระบบที่คุณต้องใช้เพื่อเรียกใช้ (เช่น จากเทอร์มินัล) เช่น คอมไพเลอร์หรือไบนารีอื่นๆ
  • ส่วนขยายที่คุณต้องติดตั้ง (เช่น การรองรับภาษาโปรแกรม )
  • ลักษณะที่ตัวอย่างแอปควรปรากฏ (เช่น คำสั่งในการเรียกใช้เว็บเซิร์ฟเวอร์)
  • ตัวแปรสภาพแวดล้อมส่วนกลางที่พร้อมใช้งานสำหรับเซิร์ฟเวอร์ในเครื่องที่ทำงานใน พื้นที่ทํางานของคุณ

ดูคำอธิบายทั้งหมดของฟีเจอร์ที่พร้อมใช้งานได้ในdev.nixข้อมูลอ้างอิง

การเพิ่มไฟล์ .idx/mcp.json (สำหรับ Gemini ใน Firebase) หรือ .gemini/settings.json (สำหรับ Gemini CLI) ลงในโปรเจ็กต์ยังช่วยให้คุณ เชื่อมต่อกับเซิร์ฟเวอร์ Model Context Protocol (MCP) ได้ด้วย ซึ่งรวมถึงเซิร์ฟเวอร์ Firebase MCP

Nix และ Firebase Studio

Firebase Studio ใช้ Nix เพื่อกำหนด การกำหนดค่าสภาพแวดล้อมสำหรับแต่ละเวิร์กสเปซ กล่าวอย่างเจาะจงคือ Firebase Studio ใช้สิ่งต่อไปนี้

  • ภาษาโปรแกรม Nix เพื่ออธิบายสภาพแวดล้อมของพื้นที่ทำงาน Nix เป็นภาษาการเขียนโปรแกรมเชิงฟังก์ชัน แอตทริบิวต์และไลบรารีแพ็กเกจที่คุณกำหนดในไฟล์ dev.nix จะเป็นไปตามไวยากรณ์ชุดแอตทริบิวต์ Nix

  • Nix Package Manager เพื่อจัดการเครื่องมือของระบบที่พร้อมใช้งานในพื้นที่ทำงาน ซึ่งคล้ายกับ เครื่องมือจัดการแพ็กเกจเฉพาะระบบปฏิบัติการ เช่น APT (apt และ apt-get), Homebrew (brew) และ dpkg

เนื่องจากสภาพแวดล้อมของ Nix สามารถทำซ้ำและประกาศได้ ในบริบทของ Firebase Studio ซึ่งหมายความว่าคุณสามารถแชร์ไฟล์การกำหนดค่า Nix เป็นส่วนหนึ่งของที่เก็บ Git เพื่อให้มั่นใจว่าทุกคนที่ทำงานในโปรเจ็กต์ มีการกำหนดค่าสภาพแวดล้อมเดียวกัน

ตัวอย่างพื้นฐาน

ตัวอย่างต่อไปนี้แสดงการกำหนดค่าสภาพแวดล้อมพื้นฐานที่เปิดใช้ตัวอย่าง

{ pkgs, ... }: {

  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
  ];

  # Sets environment variables in the workspace
  env = {
    SOME_ENV_VAR = "hello";
  };

  # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
  idx.extensions = [
    "angular.ng-template"
  ];

  # Enable previews and customize configuration
  idx.previews = {
    enable = true;
    previews = {
      web = {
        command = [
          "npm"
          "run"
          "start"
          "--"
          "--port"
          "$PORT"
          "--host"
          "0.0.0.0"
          "--disable-host-check"
        ];
        manager = "web";
        # Optionally, specify a directory that contains your web app
        # cwd = "app/client";
      };
    };
  };
}

เพิ่มเครื่องมือของระบบ

หากต้องการเพิ่มเครื่องมือของระบบลงในพื้นที่ทำงาน เช่น คอมไพเลอร์หรือโปรแกรม CLI สำหรับ บริการระบบคลาวด์ ให้ค้นหารหัสแพ็กเกจที่ไม่ซ้ำกันในรีจิสทรีแพ็กเกจ Nix แล้วเพิ่มลงในออบเจ็กต์ packages ของไฟล์ dev.nix โดยมีคำนำหน้าเป็น `pkgs.:

{ pkgs, ... }: {
  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
  ];
  ...
}

ซึ่งแตกต่างจากวิธีที่คุณอาจติดตั้งแพ็กเกจระบบโดยทั่วไปโดยใช้ตัวจัดการแพ็กเกจเฉพาะระบบปฏิบัติการ เช่น APT (apt และ apt-get), Homebrew (brew) และ dpkg การอธิบายอย่างชัดเจนว่าต้องใช้แพ็กเกจระบบใดบ้าง หมายความว่าแอป Firebase Studio Workspace จะแชร์และทำซ้ำได้ง่ายขึ้น

ใช้ไบนารีของโหนดในเครื่อง

เช่นเดียวกับในเครื่องของคุณ ไบนารีที่เกี่ยวข้องกับแพ็กเกจ Node ที่ติดตั้งในเครื่อง (เช่น แพ็กเกจที่กำหนดไว้ใน package.json) สามารถเรียกใช้ในแผงเทอร์มินัลได้โดยการเรียกใช้ด้วยnpx คำสั่ง

เพื่อความสะดวกยิ่งขึ้น หากคุณอยู่ในไดเรกทอรีที่มีโฟลเดอร์ node_modules (เช่น ไดเรกทอรีรูทของโปรเจ็กต์เว็บ) คุณจะเรียกใช้ไบนารีที่ติดตั้งในเครื่องได้โดยตรงโดยไม่ต้องมีคำนำหน้า npx

เพิ่มคอมโพเนนต์ gcloud

การกำหนดค่าเริ่มต้นของ gcloud CLI สำหรับ Google Cloud พร้อมใช้งานในพื้นที่ทำงาน Firebase Studio ทั้งหมด

หากต้องการคอมโพเนนต์เพิ่มเติม คุณสามารถเพิ่มลงในไฟล์ dev.nix ได้โดยทำดังนี้

{ pkgs }: {
  packages = [
    ...
    (pkgs.google-cloud-sdk.withExtraComponents [
      pkgs.google-cloud-sdk.components.cloud-datastore-emulator
    ])
    ...
  ];
}

เพิ่มส่วนขยาย IDE

คุณติดตั้งส่วนขยายใน Firebase Studio โดยใช้รีจิสทรีส่วนขยาย OpenVSX ได้ 2 วิธี ดังนี้

  • ใช้แผงส่วนขยายใน Firebase Studio เพื่อค้นหา และติดตั้งส่วนขยาย แนวทางนี้เหมาะที่สุดสำหรับส่วนขยายที่เฉพาะเจาะจงสำหรับผู้ใช้ เช่น

    • ธีมสีแบบกำหนดเอง
    • การจำลองโปรแกรมแก้ไข เช่น VSCodeVim

  • เพิ่มส่วนขยายลงในไฟล์ dev.nix ระบบจะติดตั้งส่วนขยายเหล่านี้โดยอัตโนมัติเมื่อคุณแชร์การกำหนดค่าพื้นที่ทำงาน วิธีนี้เหมาะที่สุดสำหรับส่วนขยายเฉพาะโปรเจ็กต์ เช่น

    • ส่วนขยายภาษาการเขียนโปรแกรม รวมถึงดีบักเกอร์เฉพาะภาษา
    • ส่วนขยายอย่างเป็นทางการสำหรับบริการระบบคลาวด์ที่ใช้ในโปรเจ็กต์
    • ตัวจัดรูปแบบโค้ด

สำหรับแนวทางหลัง คุณสามารถรวมส่วนขยาย IDE ไว้ในไฟล์ dev.nix ได้โดยค้นหารหัสส่วนขยายที่สมบูรณ์ (ในรูปแบบ <publisher>.<id>) แล้วเพิ่มลงในออบเจ็กต์ idx.extensions ดังนี้

{ pkgs, ... }: {
  ...
  # Search for the extensions you want on https://open-vsx.org/ and use the format
  # "<publisher>.<id>"
  idx.extensions = [
    "angular.ng-template"
  ];
  ...
}

เพิ่มบริการทั่วไป

Firebase Studio ยังมีการตั้งค่าและการกำหนดค่าที่ง่ายขึ้นสำหรับ บริการทั่วไปที่คุณอาจต้องใช้ในระหว่างการพัฒนา ซึ่งรวมถึง

  • คอนเทนเนอร์
    • Docker (services.docker.*)
  • การรับส่งข้อความ
    • โปรแกรมจำลอง Pub/Sub (services.pubsub.*)
  • ฐานข้อมูล
    • MySQL (services.mysql.*)
    • Postgres (services.postgres.*)
    • Redis (services.redis.*)
    • Spanner (services.spanner.*)

ดูรายละเอียดเกี่ยวกับการเปิดใช้บริการเหล่านี้ในพื้นที่ทํางานได้ที่ส่วน services.* ของข้อมูลอ้างอิงdev.nix

ปรับแต่งตัวอย่าง

ดูรายละเอียดเกี่ยวกับวิธีปรับแต่งตัวอย่างแอปได้ที่แสดงตัวอย่างแอป

ตั้งค่าไอคอนพื้นที่ทำงาน

คุณเลือกไอคอนที่กำหนดเองสำหรับพื้นที่ทำงานได้โดยวางไฟล์ PNG ที่ชื่อ icon.png ไว้ในไดเรกทอรี .idx ที่ระดับเดียวกับไฟล์ dev.nix Firebase Studio จะใช้ไอคอนนี้เพื่อแสดงพื้นที่ทำงานในแดชบอร์ด

เนื่องจากตรวจสอบไฟล์นี้ได้ในการควบคุมแหล่งที่มา (เช่น Git) จึงเป็นวิธีที่ดีในการช่วยให้ทุกคนที่ทำงานในโปรเจ็กต์เห็นไอคอนเดียวกันสำหรับโปรเจ็กต์เมื่อใช้ Firebase Studio และเนื่องจากไฟล์อาจแตกต่างกันในสาขา Git คุณจึงใช้ไอคอนนี้เพื่อแยกความแตกต่างด้วยภาพระหว่างพื้นที่ทำงานของแอปเวอร์ชันเบต้าและเวอร์ชันที่ใช้งานจริง รวมถึงเพื่อวัตถุประสงค์อื่นๆ ได้

เปลี่ยนการปรับแต่งให้เป็นเทมเพลต

หากต้องการเปลี่ยนการกำหนดค่าสภาพแวดล้อมให้เป็น "สภาพแวดล้อมเริ่มต้น" ที่ทุกคน ใช้สร้างโปรเจ็กต์ใหม่ได้ โปรดดูเอกสารสำหรับสร้างเทมเพลตที่กำหนดเอง

ดูตัวเลือกการปรับแต่งทั้งหมด

ดูdev.nixข้อมูลอ้างอิงเพื่อดูคำอธิบายโดยละเอียดของสคีมาการกำหนดค่าสภาพแวดล้อม

ดาวน์โหลดไฟล์

วิธีดาวน์โหลดไฟล์เป็นไฟล์ ZIP

  • คลิกขวาที่ไดเรกทอรีใดก็ได้ในบานหน้าต่าง Explorer แล้วเลือกซิปและดาวน์โหลด

วิธีดาวน์โหลดทุกอย่างในไดเรกทอรีโปรเจ็กต์

  1. เลือกไฟล์ > เปิดโฟลเดอร์

  2. ยอมรับไดเรกทอรี /home/user เริ่มต้น

  3. หลังจากโหลดไฟล์แล้ว ให้คลิกขวาที่ไดเรกทอรีการทำงาน แล้วเลือกZip และดาวน์โหลด หากใช้App Prototyping agent ไดเรกทอรีที่ใช้งานอยู่จะเป็น studio หาก ใช้เทมเพลตหรือโปรเจ็กต์ที่อัปโหลด นี่จะเป็นชื่อโปรเจ็กต์ของคุณ

  4. เมื่อได้รับข้อความแจ้งให้สร้างสภาพแวดล้อมใหม่ ให้คลิกยกเลิก

  5. หลังจากดาวน์โหลดเสร็จแล้ว ให้เปิดไดเรกทอรีการทำงานอีกครั้งจากเมนูไฟล์เพื่อกลับไปยังพื้นที่ทำงาน

ใช้เซิร์ฟเวอร์ MCP

เซิร์ฟเวอร์ MCP มีเครื่องมือและแหล่งข้อมูลเพิ่มเติมให้ Gemini ใช้ เช่น คุณสามารถเพิ่มเซิร์ฟเวอร์ MCP ของ Firebase เพื่อสํารวจข้อมูลใน Cloud Firestore โดยใช้ภาษาธรรมชาติขณะสร้างหรือแก้ไขข้อบกพร่อง ของแอปพลิเคชัน

ข้อกำหนดเบื้องต้น

  • หากเซิร์ฟเวอร์ MCP ต้องการ ให้ตรวจสอบว่าคุณได้ติดตั้ง Node.js และ npm ที่ใช้งานได้

เลือกเซิร์ฟเวอร์ MCP ที่เข้ากันได้

Firebase Studio รองรับเซิร์ฟเวอร์ MCP ในระดับพื้นฐาน ซึ่งหมายความว่า เซิร์ฟเวอร์ MCP บางรายการอาจไม่รองรับ เมื่อเลือกเซิร์ฟเวอร์ MCP เพื่อเพิ่มลงในพื้นที่ทำงาน Firebase Studio โปรดคำนึงถึงสิ่งต่อไปนี้

  • รองรับ:
    • อินพุต/เอาต์พุตมาตรฐาน (stdio) หรือเหตุการณ์ที่เซิร์ฟเวอร์ส่ง (SSE)/เซิร์ฟเวอร์การรับส่งข้อมูล HTTP ที่สตรีมได้ ซึ่งไม่จำเป็นต้องมีการตรวจสอบสิทธิ์รูปแบบพิเศษ
    • เครื่องมือที่เซิร์ฟเวอร์ MCP จัดหาให้
  • ยังไม่รองรับในขณะนี้
    • เซิร์ฟเวอร์ที่ต้องใช้ส่วนติดต่อผู้ใช้แบบกราฟิกหรือเซสชันเดสก์ท็อป
    • พรอมต์ ตัวอย่าง หรือทรัพยากรอื่นๆ ที่เซิร์ฟเวอร์ MCP จัดหาให้

เพิ่มเซิร์ฟเวอร์ MCP

  1. จาก Explorer (Ctrl+Shift+E) ให้แก้ไขหรือสร้างไฟล์การกำหนดค่า MCP

    • Gemini ในFirebaseแชทใช้ .idx/mcp.json

    • Gemini CLI ใช้ .gemini/settings.json

    หากยังไม่มีไฟล์ ให้สร้างโดยคลิกขวาที่ไดเรกทอรีหลัก แล้วเลือกไฟล์ใหม่ สร้างหรือแก้ไขทั้ง 2 ไฟล์เพื่อใช้เซิร์ฟเวอร์ MCP ใน Gemini ใน Firebase และ Gemini CLI

  2. เพิ่มการกำหนดค่าเซิร์ฟเวอร์ลงในเนื้อหาของไฟล์ เช่น หากต้องการเพิ่มเซิร์ฟเวอร์ Firebase MCP ให้ป้อนข้อมูลต่อไปนี้

    {
  "mcpServers": {
   "firebase": {
     "command": "npx",
     "args": [
       "-y",
       "firebase-tools@latest",
       "experimental:mcp"
      ]
    }
  }
}

    ไฟล์การกำหนดค่านี้จะสั่งให้ Gemini ใช้เซิร์ฟเวอร์ MCP ใด ในตัวอย่างนี้ เราได้เพิ่มเซิร์ฟเวอร์ 1 เครื่องชื่อ firebase ซึ่งจะใช้คำสั่ง npx เพื่อติดตั้งและเรียกใช้ firebase-tools@latest เซิร์ฟเวอร์ MCP อื่นๆ ต้องมีการกำหนดค่าที่แตกต่างกัน แต่เป็นไปตามรูปแบบทั่วไปเดียวกัน

  3. ในเทอร์มินัล (Shift+Ctrl+C) ให้เรียกใช้คำสั่งที่จำเป็นเพื่อทำการติดตั้งให้เสร็จสมบูรณ์ เช่น หากต้องการใช้เซิร์ฟเวอร์ MCP ของ Firebase ให้ป้อนคำสั่งต่อไปนี้เพื่อลงชื่อเข้าใช้บัญชี

    firebase login --no-localhost

    ทำตามวิธีการในเทอร์มินัลเพื่อให้สิทธิ์เซสชัน เครื่องมือบางอย่าง ต้องใช้โปรเจ็กต์ Firebase ที่เชื่อมต่อ คุณใช้เซิร์ฟเวอร์ MCP ของ Firebase เพื่อสร้างโปรเจ็กต์ หรือ เรียกใช้คำสั่งต่อไปนี้เพื่อเริ่มต้นโปรเจ็กต์ Firebase ได้

    firebase init

    ซึ่งจะสร้างไฟล์ firebase.json ในไดเรกทอรีราก

  4. สร้างพื้นที่ทำงานใหม่เพื่อตั้งค่าให้เสร็จสมบูรณ์

    1. เปิด Command Palette (Shift+Ctrl+P)

    2. ป้อน Firebase Studio: สร้างสภาพแวดล้อมใหม่

ใช้เครื่องมือ MCP

หลังจากติดตั้งเซิร์ฟเวอร์ MCP ที่ต้องการใช้แล้ว เครื่องมือหรือข้อมูลที่เซิร์ฟเวอร์นั้นมีให้จะพร้อมใช้งานในตำแหน่งต่อไปนี้

  • Gemini CLI
  • Gemini ในแชท Firebase เมื่อใช้โหมดตัวแทนและโหมดตัวแทน (เรียกใช้โดยอัตโนมัติ)
  • App Prototyping agent

เช่น หากเพิ่มเซิร์ฟเวอร์ Firebase MCP คุณสามารถขอให้ Geminiดึงข้อมูลการกำหนดค่า SDK สำหรับโปรเจ็กต์ปัจจุบัน เรียกข้อมูลที่จัดเก็บไว้ใน Cloud Firestore และ Realtime Database ช่วยคุณตั้งค่า บริการ Firebase และอื่นๆ

แก้ปัญหาเซิร์ฟเวอร์ MCP

หากเซิร์ฟเวอร์ MCP ไม่ทำงานตามที่คาดไว้ ให้เปิดGemini บันทึกเพื่อตรวจสอบข้อผิดพลาด

  1. ในส่วนเอาต์พุต (Shift+Ctrl+U) ให้คลิกเมนูแบบเลื่อนลง แล้วเลือก Gemini

  2. มองหาข้อความที่ขึ้นต้นด้วยแท็ก [MCPManager] บันทึกเหล่านี้มี ข้อมูลเกี่ยวกับเซิร์ฟเวอร์ MCP ที่ตั้งค่าไว้ รวมถึงข้อความแสดงข้อผิดพลาด ใช้ข้อมูลนี้เพื่อแก้ปัญหาการกำหนดค่า เมื่อเซิร์ฟเวอร์ MCP เชื่อมต่อสำเร็จ คุณจะเห็นรายการเครื่องมือที่เซิร์ฟเวอร์เพิ่ม

ลองสร้างพื้นที่ทำงานใหม่หากติดตั้งหรือเชื่อมต่อเซิร์ฟเวอร์ MCP ไม่สำเร็จ โดยทำดังนี้

  1. เปิด Command Palette (Shift+Ctrl+P)

  2. ป้อน Firebase Studio: สร้างสภาพแวดล้อมใหม่

  3. รอให้พื้นที่ทำงานสร้างใหม่ แล้วลองใช้เซิร์ฟเวอร์ MCP ที่เลือกอีกครั้ง

หากเซิร์ฟเวอร์ MCP เชื่อมต่อ แต่ Gemini ไม่ได้ใช้เครื่องมือที่เซิร์ฟเวอร์มีให้ ให้ทำดังนี้

ขั้นตอนถัดไป