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

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

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

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

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

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

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

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

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

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

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

• ดูวิธีใช้ไฟล์ 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}
  '';
}

หมายเหตุ: นอกเหนือจาก $out แล้ว คุณยังรับรหัสพื้นที่ทำงานใหม่ได้โดยใช้ตัวแปร $WS_NAME ได้อีกด้วย

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

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

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

• เทมเพลตอย่างเป็นทางการ: เป็น เทมเพลตที่คุณเลือกโดยตรงจากFirebase Studio แดชบอร์ดเมื่อสร้างแอปใหม่

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

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

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

1. ตัดสินใจว่าจะใช้เทมเพลตใดเป็นพื้นฐานสำหรับเทมเพลตที่กำหนดเอง จากนั้นโคลนโปรเจ็กต์

2. ปรับแต่ง idx-template.json, idx-template.nix และ .idx/dev.nix ตามต้องการ โดยเริ่มจาก ปรับแต่งเทมเพลต

3. ตรวจสอบการเปลี่ยนแปลงในที่เก็บ

4. ทำตามขั้นตอนในสร้างพื้นที่ทำงานใหม่สำหรับเทมเพลตเพื่อ เผยแพร่และทดสอบเทมเพลต หากใช้ที่เก็บที่ซ้อนกัน ให้ลิงก์ไปยังที่เก็บนั้นโดยตรงใน 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

หมายเหตุ: idx-template.nix จะใช้ช่อง stable-23.11 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"
  ''
}

สำคัญ: สคริปต์ Bootstrap ต้องไม่โต้ตอบ หากสคริปต์รอให้ผู้ใช้ป้อนข้อมูล เทมเพลตจะสร้างอินสแตนซ์ไม่ถูกต้อง

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

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

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

1. อธิบายพารามิเตอร์ในออบเจ็กต์ params ของไฟล์ข้อมูลเมตา idx-template.json Firebase Studio ใช้ข้อมูล ในไฟล์นี้เพื่อเตรียม UI (เช่น ช่องทำเครื่องหมาย เมนูแบบเลื่อนลง และ ช่องข้อความ) ที่แสดงต่อผู้ใช้เทมเพลต
2. อัปเดต 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

หมายเหตุ: ไฟล์ idx-template.json ยังมีพร็อพเพอร์ตี้ icon ที่ไม่บังคับ ซึ่งควรชี้ไปยัง URL สาธารณะของ PNG หรือ SVG หากมี ระบบจะไม่ใช้ฟิลด์นี้ใน Firebase Studio

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

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

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

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

• 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 ของที่เก็บเพื่อให้ผู้ใช้ค้นหาเทมเพลตของคุณได้ง่ายยิ่งขึ้น