หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ไม่มีพารามิเตอร์ที่ผู้ใช้กำหนดค่าได้
คัดลอกไฟล์ทั้งหมดในที่เก็บเทมเพลต (ยกเว้นไฟล์ 2 ไฟล์) ไปยังพื้นที่ทำงานของผู้ใช้idx-template ควรมีโฟลเดอร์ย่อย .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 หรืออื่นๆ

คุณสามารถทำให้แพ็กเกจระบบเพิ่มเติมพร้อมใช้งานในสคริปต์การเริ่มต้นระบบได้ โดยการระบุ 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 (เช่น ช่องทําเครื่องหมาย เมนูแบบเลื่อนลง และ ช่องข้อความ) ที่แสดงต่อผู้ใช้เทมเพลต
อัปเดต 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`	ชื่อที่แสดงของพารามิเตอร์นี้
ประเภท	`string`	ระบุคอมโพเนนต์ UI ที่จะใช้สำหรับพารามิเตอร์นี้ และประเภทข้อมูลที่จะส่งไปยังสคริปต์การเริ่มต้น ค่าที่ใช้ได้มีดังนี้ `"enum"` - แสดงกลุ่มปุ่มเมนูแบบเลื่อนลงหรือปุ่มตัวเลือก และส่ง `string` ไปยัง Bootstrap `"boolean"` - แสดงช่องทำเครื่องหมายและส่ง `true` หรือ `false` `"text"` - แสดงช่องข้อความและส่ง `string`
ตัวเลือก	`object`	สำหรับพารามิเตอร์ `enum` จะแสดงตัวเลือกที่จะแสดงต่อผู้ใช้ เช่น หากตัวเลือกคือ `{"js": "JavaScript", ...}` ระบบจะแสดง "JavaScript" เป็นตัวเลือก และเมื่อเลือก ค่าของพารามิเตอร์นี้จะเป็น `js`
ค่าเริ่มต้น	`string` หรือ `boolean`	กำหนดค่าเริ่มต้นใน UI สำหรับ`enum` พารามิเตอร์ ค่านี้ต้องเป็นคีย์ใดคีย์หนึ่งใน `options` สำหรับพารามิเตอร์ `boolean` ค่านี้ควรเป็น `true` หรือ `false`
ต้องระบุ	`boolean`	ระบุว่าต้องระบุพารามิเตอร์นี้

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

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

จากตัวอย่างในส่วนก่อนหน้า หากคุณมีพารามิเตอร์เดียว ที่มีรหัส 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" }

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

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

หากต้องการปรับแต่งไฟล์ที่จะเปิดโดยค่าเริ่มต้น ให้อัปเดตไฟล์ .idx/dev.nix (ไม่ใช่ไฟล์ idx-template.nix!) เพื่อรวมonCreate Hook ของพื้นที่ทำงาน ที่มีแอตทริบิวต์ 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 ที่คุณจะลิงก์จากปุ่ม"เปิดใน Firebase Studio"

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

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