Firebase Studio จะหยุดให้บริการในวันที่ 22 มีนาคม 2027 และตั้งแต่วันที่ 22 มิถุนายน 2026 เป็นต้นไป ระบบจะปิดใช้การสร้างเวิร์กสเปซใหม่และการลงชื่อสมัครใช้ของผู้ใช้ คุณยังคงทำงานในเวิร์กสเปซที่มีอยู่และย้ายข้อมูลเวิร์กสเปซดังกล่าวไปยัง Google AI Studio หรือ Google Antigravity ได้ ดูวิธีย้ายข้อมูล

แอปที่ได้ติดตั้งใช้งานใน Firebase แล้วจะยังคงทำงานต่อไปแม้หลังจากวันที่หยุดให้บริการ นอกจากนี้ ผลิตภัณฑ์หลักของ Firebase ทั้งหมด (เช่น Firestore, Authentication, App Hosting ฯลฯ) จะ ไม่ได้รับผลกระทบจากการหยุดให้บริการ Firebase Studio

Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

สร้างเทมเพลตที่กำหนดเอง

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

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

ผู้ใช้ส่วนใหญ่จะใช้เทมเพลตในตัวหรือนำเข้าโปรเจ็กต์จาก Git แต่สำหรับ Use Case ที่ซับซ้อนมากขึ้น คุณสามารถสร้างเทมเพลตของคุณเองได้ดังนี้

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

หลังจากสร้างและทดสอบเทมเพลตที่กำหนดเองแล้ว คุณสามารถ สร้างลิงก์สำหรับ เทมเพลตเพื่อวางในเว็บไซต์ ที่เก็บ Git README ไฟล์, หน้าข้อมูลแพ็กเกจ (เช่น ใน NPM) หรือ ที่อื่นๆ ที่คุณคาดว่าผู้ใช้จะเริ่มใช้เทคโนโลยีของคุณ

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

ก่อนเริ่มต้นใช้งาน

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

โครงสร้างไฟล์เทมเพลต

เทมเพลต Firebase Studio คือที่เก็บ Git สาธารณะ (หรือโฟลเดอร์หรือ สาขาในที่เก็บ) ที่มีไฟล์อย่างน้อย 2 ไฟล์ดังนี้

idx-template.json มีข้อมูลเมตาสำหรับเทมเพลต ซึ่งรวมถึงชื่อที่ผู้ใช้มองเห็น คำอธิบาย และพารามิเตอร์ที่ผู้ใช้กำหนดค่าเทมเพลตได้ ตัวอย่างเช่น คุณสามารถอนุญาตให้ผู้ใช้เลือกภาษาโปรแกรมหรือ Use Case ตัวอย่างได้ Firebase Studio ใช้ข้อมูลนี้เพื่อเตรียม UI ที่แสดงต่อผู้ใช้เมื่อเลือกสร้างพื้นที่ทำงานใหม่จาก เทมเพลตของคุณ
idx-template.nix คือไฟล์ที่เขียนด้วยภาษา Nix ซึ่งมี สคริปต์ Bash Shell (ห่อหุ้มด้วยฟังก์ชัน Nix) ที่ทำสิ่งต่อไปนี้
1. สร้างไดเรกทอรีการทำงานสำหรับพื้นที่ทำงานใหม่
2. ตั้งค่าสภาพแวดล้อมโดยการสร้างไฟล์ .idx/dev.nix โปรดทราบ ว่าคุณยังสามารถเรียกใช้เครื่องมือ Scaffolding ของโปรเจ็กต์ เช่น flutter create หรือ npm init ในสคริปต์นี้ หรือเรียกใช้สคริปต์ที่กำหนดเอง ซึ่งเขียนด้วย Go, Python, Node.js หรือภาษาอื่นๆ
  
  ระบบจะเรียกใช้ไฟล์นี้ด้วยพารามิเตอร์ที่ผู้ใช้ระบุ เมื่อ Firebase Studio โหลดเทมเพลต

คุณสามารถรวมไฟล์อื่นๆ ไว้ข้างไฟล์ 2 ไฟล์นี้เพื่อใช้ใน idx-template.nix ในการสร้างอินสแตนซ์ของเทมเพลต ตัวอย่างเช่น คุณสามารถรวมไฟล์ .idx/dev.nix สุดท้าย หรือแม้แต่รวมไฟล์ Scaffolding ทั้งหมดไว้ในที่เก็บได้

สร้างเทมเพลตเริ่มต้น

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

เปลี่ยนที่เก็บ GitHub สาธารณะให้เป็นเทมเพลต
ใช้เทมเพลตอย่างเป็นทางการหรือเทมเพลตชุมชนเป็นพื้นฐานสำหรับเทมเพลตของคุณ

ตัวอย่างพื้นฐาน: เปลี่ยนที่เก็บ GitHub สาธารณะให้เป็นเทมเพลต

ก่อนที่จะลงรายละเอียดเกี่ยวกับวิธีกำหนด idx-template.json และ idx-template.nix คุณควรดูตัวอย่างเทมเพลตพื้นฐานที่ทำสิ่งต่อไปนี้

ไม่มีพารามิเตอร์ที่ผู้ใช้กำหนดค่าได้
คัดลอกไฟล์ทั้งหมดในที่เก็บเทมเพลต (ยกเว้นไฟล์ idx-template 2 ไฟล์) ลงในพื้นที่ทำงานของผู้ใช้ ควรมีโฟลเดอร์ย่อย .idx ที่มีไฟล์ dev.nix ซึ่งกำหนดสภาพแวดล้อมอยู่แล้ว

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

`idx-template.json`

{
  "name": "Hello world",
  "description": "A template for a CLI program that prints 'hello world'",
  "icon": "https://www.gstatic.com/images/branding/productlogos/studio/v1/192px.svg",
  "params": []
}

`idx-template.nix`

# No user-configurable parameters
{ pkgs, ... }: {
  # Shell script that produces the final environment
  bootstrap = ''
    # Copy the folder containing the `idx-template` files to the final
    # project folder for the new workspace. ${./.} inserts the directory
    # of the checked-out Git folder containing this template.
    cp -rf ${./.} "$out"

    # Set some permissions
    chmod -R +w "$out"

    # Remove the template files themselves and any connection to the template's
    # Git repository
    rm -rf "$out/.git" "$out/idx-template".{nix,json}
  '';
}

ไปที่ปรับแต่งเทมเพลตเพื่อดูข้อมูลเกี่ยวกับ การเปลี่ยนแปลงเพิ่มเติมที่คุณทำได้เพื่อปรับแต่งเทมเพลต

สร้างเทมเพลตที่กำหนดเองโดยใช้เทมเพลตอย่างเป็นทางการหรือเทมเพลตชุมชน

ทีม Firebase Studio ดูแลรักษาที่เก็บ 2 รายการสำหรับ Firebase Studio เทมเพลตดังนี้

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

**เคล็ดลับ:** หากต้องการมีส่วนร่วมกับชุมชนโดยการเพิ่มเทมเพลตใหม่หรืออัปเดต เทมเพลตที่มีอยู่ ให้ส่งคำขอรับการผสาน

วิธีสร้างเทมเพลตที่กำหนดเองโดยใช้เทมเพลตที่มีอยู่เป็นพื้นฐาน

ตัดสินใจว่าจะใช้เทมเพลตใดเป็นพื้นฐานสำหรับเทมเพลตที่กำหนดเอง จากนั้นโคลนโปรเจ็กต์
ปรับแต่ง idx-template.json, idx-template.nix และ .idx/dev.nix ตามต้องการ โดยเริ่มจาก ปรับแต่งเทมเพลต
ตรวจสอบการเปลี่ยนแปลงในที่เก็บ
ทำตามขั้นตอนในสร้างพื้นที่ทำงานใหม่สำหรับเทมเพลตเพื่อ เผยแพร่และทดสอบเทมเพลต หากใช้ที่เก็บที่ซ้อนกัน ให้ลิงก์ไปยังที่เก็บนั้นโดยตรงใน URL ตัวอย่างเช่น หากคุณใช้เทมเพลต "Vanilla Vite" ของชุมชน คุณจะต้องจัดเตรียมและทดสอบพื้นที่ทำงานใหม่โดยใช้ URL ต่อไปนี้
```
https://studio.firebase.google.com/new?template=https://github.com/firebase-studio/community-templates/tree/main/vite-vanilla
```

ปรับแต่งเทมเพลต

ตอนนี้คุณสร้างเทมเพลตพื้นฐานเพื่อใช้เป็นพื้นฐานได้แล้ว คุณสามารถแก้ไขไฟล์ idx-template.json, idx-template.nix และ .idx/dev.nix ให้ตรงกับข้อกำหนดได้ คุณอาจต้องการปรับแต่งการกำหนดค่าเพิ่มเติมดังนี้

เพิ่มแพ็กเกจระบบลงในสคริปต์ bootstrap
เพิ่มพารามิเตอร์ที่ผู้ใช้กำหนดค่าได้
เลือกไฟล์ที่จะเปิดโดยค่าเริ่มต้น
เลือกไอคอนพื้นที่ทำงานเริ่มต้น

ใช้แพ็กเกจระบบเพิ่มเติมในสคริปต์ `bootstrap`

ตัวอย่างพื้นฐานใช้เพียงคำสั่ง POSIX พื้นฐานในการคัดลอก ไฟล์ไปยังตำแหน่งที่ถูกต้อง สคริปต์ bootstrap ของเทมเพลตอาจต้องติดตั้งไบนารีเพิ่มเติม เช่น git, node, python3 หรืออื่นๆ

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

ตัวอย่างการเพิ่ม pkgs.nodejs ซึ่งรวมถึงไบนารี เช่น node, npx และ npm

# idx-template.nix
{pkgs}: {
  packages = [
    # Enable "node", "npm" and "npx" in the bootstrap script below.
    # Note, this is NOT the list of packages available to the workspace once
    # it's created. Those go in .idx/dev.nix
    pkgs.nodejs
  ];

  bootstrap = ''
    mkdir "$out"
    # We can now use "npm"
    npm init --yes my-boot-strap@latest "$out"
  ''
}

เพิ่มพารามิเตอร์ที่ผู้ใช้กำหนดค่าได้

หากต้องการอนุญาตให้ผู้ใช้ปรับแต่งจุดเริ่มต้นสำหรับโปรเจ็กต์ใหม่ คุณสามารถสร้างเทมเพลตหลายรายการ หรือสร้างเทมเพลตรายการเดียวที่มีพารามิเตอร์ ตัวเลือกนี้เหมาะอย่างยิ่งหากจุดเริ่มต้นต่างๆ เป็นเพียงค่าที่แตกต่างกันที่ส่งไปยังเครื่องมือ CLI (เช่น --language=js กับ --language=ts)

หากต้องการเพิ่มพารามิเตอร์ ให้ทำดังนี้

อธิบายพารามิเตอร์ในออบเจ็กต์ params ของไฟล์ข้อมูลเมตา idx-template.json Firebase Studio ใช้ข้อมูล ในไฟล์นี้เพื่อเตรียม UI (เช่น ช่องทำเครื่องหมาย เมนูแบบเลื่อนลง และ ช่องข้อความ) ที่แสดงต่อผู้ใช้เทมเพลต
อัปเดต Bootstrap idx-template.nix เพื่อใช้ค่าที่ผู้ใช้เลือกขณะสร้างอินสแตนซ์ของเทมเพลต

อธิบายพารามิเตอร์ใน `idx-template.json`

ตัวอย่างการเพิ่มพารามิเตอร์ enum ซึ่ง Firebase Studio จะแสดงเป็นเมนูแบบเลื่อนลงหรือกลุ่มปุ่มตัวเลือก ทั้งนี้ขึ้นอยู่กับ จำนวนตัวเลือก

{
  "name": "Hello world",
  "description": "A hello world app",
  "params": [
    {
      "id": "language",
      "name": "Programming Language",
      "type": "enum",
      "default": "ts",
      "options": {
        "js": "JavaScript",
        "ts": "TypeScript"
      },
      "required": true
    }
  ]
}

เนื่องจากมี 2 ค่า (JavaScript และ TypeScript) UI จะแสดงกลุ่มปุ่มตัวเลือกสำหรับ 2 ตัวเลือกและส่งค่า ts หรือ js ไปยังสคริปต์ idx-template.nix

ออบเจ็กต์พารามิเตอร์แต่ละรายการมีพร็อพเพอร์ตี้ต่อไปนี้

พร็อพเพอร์ตี้	ประเภท	คำอธิบาย
id	`string`	รหัสที่ไม่ซ้ำกันของพารามิเตอร์ ซึ่งคล้ายกับชื่อตัวแปร
name	`string`	ชื่อที่แสดงสำหรับพารามิเตอร์นี้
type	`string`	ระบุคอมโพเนนต์ UI ที่จะใช้สำหรับพารามิเตอร์นี้ และประเภทข้อมูลที่จะส่งไปยังสคริปต์ Bootstrap ค่าที่ใช้ได้มีดังนี้ `"enum"` - แสดงเมนูแบบเลื่อนลงหรือกลุ่มปุ่มตัวเลือก และส่ง `string` ไปยัง Bootstrap `"boolean"` - แสดงช่องทำเครื่องหมายและส่ง `true` หรือ `false` `"text"` - แสดงช่องข้อความและส่ง `string`
options	`object`	สำหรับพารามิเตอร์ `enum` ตัวเลือกนี้จะแสดงตัวเลือกที่จะแสดงต่อผู้ใช้ ตัวอย่างเช่น หากตัวเลือกคือ `{"js": "JavaScript", ...}` ระบบจะแสดง "JavaScript" เป็นตัวเลือก และเมื่อเลือก ค่าของพารามิเตอร์นี้จะเป็น `js`
default	`string` หรือ `boolean`	ตั้งค่าเริ่มต้นใน UI สำหรับพารามิเตอร์ `enum` ค่านี้ต้องเป็นคีย์รายการใดรายการหนึ่งใน `options` สำหรับพารามิเตอร์ `boolean` ค่านี้ควรเป็น `true` หรือ `false`
required	`boolean`	ระบุว่าต้องระบุพารามิเตอร์นี้

ใช้ค่าพารามิเตอร์ใน `idx-template.nix`

หลังจากกำหนดออบเจ็กต์ params ในไฟล์ idx-template.json แล้ว คุณจะเริ่มปรับแต่งสคริปต์ Bootstrap ตามค่าพารามิเตอร์ที่ผู้ใช้เลือกได้

จากตัวอย่างในส่วนก่อนหน้า หากคุณมีพารามิเตอร์เดียวที่มีรหัส language ซึ่งเป็น enum ที่มีค่าที่เป็นไปได้คือ ts หรือ js คุณจะใช้พารามิเตอร์ดังกล่าวได้ดังนี้

# idx-template.nix
# Accept additional arguments to this template corresponding to template
# parameter IDs, including default values (language=ts by default in this example).
{ pkgs, language ? "ts", ... }: {
  packages = [
    pkgs.nodejs
  ];

  bootstrap = ''
    # We use Nix string interpolation to pass the user's chosen programming
    # language to our script.
    npm init --yes my-boot-strap@latest "$out" -- --lang=${language}
  ''
}

อีกรูปแบบที่พบบ่อยคือการรวมเนื้อหาแบบมีเงื่อนไขโดยขึ้นอยู่กับค่าของสตริง อีกวิธีในการเขียนตัวอย่างก่อนหน้าคือ

npm init --yes my-boot-strap@latest "$out" -- \
    ${if language == "ts" then "--lang=ts" else "--lang=js" }

สำคัญ: อย่าลืมสร้างไฟล์ .idx/dev.nix ในไดเรกทอรี $out ซึ่งเป็นส่วนหนึ่งของสคริปต์ bootstrap หากสภาพแวดล้อมของพื้นที่ทำงานที่สร้างขึ้นต้องแตกต่างกันไปตามพารามิเตอร์ที่ผู้ใช้กำหนดค่า (เช่น การรวมแพ็กเกจระบบต่างๆ หรือการปรับแต่งฮุก onCreate) คุณสามารถใช้การจัดการสตริงใน Nix หรือเรียกใช้เครื่องมือสร้างเทมเพลต เช่น jinja2

เลือกไฟล์ที่จะเปิดโดยค่าเริ่มต้น

คุณควรปรับแต่งไฟล์ที่จะเปิดเพื่อแก้ไขเมื่อสร้างพื้นที่ทำงานใหม่ด้วยเทมเพลต ตัวอย่างเช่น หากเทมเพลตเป็นสำหรับเว็บไซต์พื้นฐาน คุณอาจต้องการเปิดไฟล์ HTML, JavaScript และ CSS หลัก

หากต้องการปรับแต่งไฟล์ที่จะเปิดโดยค่าเริ่มต้น ให้อัปเดตไฟล์ .idx/dev.nix (ไม่ใช่ ไฟล์ idx-template.nix!) ให้รวมฮุกพื้นที่ทำงาน onCreate ที่มีแอตทริบิวต์ openFiles ดังนี้

# .idx/dev.nix
{pkgs}: {
  ...
  idx = {
    # Workspace lifecycle hooks
    workspace = {
      # Runs when a workspace is first created with this `dev.nix` file
      onCreate = {
        # Open editors for the following files by default, if they exist.
        # The last file in the list will be focused.
        default.openFiles = [
          "src/index.css"
          "src/index.js"
          "src/index.html"
        ];
        # Include other scripts here, as needed, for example:
        # installDependencies = "npm install";
      };
      # To run something each time the workspace is (re)started, use the `onStart` hook
    };
    # Enable previews and customize configuration
    previews = { ... };
  };
}

เลือกไอคอนพื้นที่ทำงานเริ่มต้น

คุณสามารถเลือกไอคอนเริ่มต้นสำหรับพื้นที่ทำงานที่สร้างด้วยเทมเพลตได้โดยวางไฟล์ PNG ชื่อ icon.png ไว้ข้างไฟล์ dev.nix ภายในไดเรกทอรี .idx

ทดสอบเทมเพลตในพื้นที่ทำงานใหม่

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

https://idx.google.com/new?template=https://github.com/my-org/my-repo

คุณเลือกที่จะรวมสาขาและโฟลเดอร์ย่อยได้ รายการต่อไปนี้ทั้งหมดใช้ได้ตราบใดที่เข้าถึงได้แบบสาธารณะ

https://github.com/my-org/my-repo/
https://github.com/my-org/my-repo/tree/main/path/to/myidxtemplate
https://github.com/my-org/my-repo/tree/branch
https://github.com/my-org/my-repo/tree/branch/path/to/myidxtemplate

นอกจากนี้ URL นี้ยังเป็น URL ที่คุณจะแชร์กับผู้อื่นเพื่อให้ผู้อื่นใช้เทมเพลตใหม่ได้ หรือเป็น URL ที่คุณจะลิงก์จากปุ่ม "เปิดใน Firebase Studio" ปุ่ม

หลังจากยืนยันว่าเทมเพลตทำงานตามที่คาดไว้แล้ว ให้เผยแพร่เทมเพลตไปยังที่เก็บ GitHub และแชร์ลิงก์เดียวกันกับที่ใช้เมื่อ สร้างพื้นที่ทำงาน สำหรับการทดสอบ

และเพิ่มปุ่ม "เปิดใน Firebase Studio" ลงใน เว็บไซต์หรือ README ของที่เก็บเพื่อให้ผู้ใช้ค้นหาเทมเพลตได้ง่ายยิ่งขึ้น