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

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

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

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

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

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

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

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

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

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

• ดูวิธีใช้ไฟล์ idx/dev.nix เพื่อปรับแต่งสภาพแวดล้อม

• ทำความคุ้นเคยกับข้อมูลเบื้องต้นเกี่ยวกับภาษา Nix และเก็บข้อมูลอ้างอิงไว้ใกล้มือ

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

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

• idx-template.json มีข้อมูลเมตาของเทมเพลต ซึ่งรวมถึงชื่อ คำอธิบาย และพารามิเตอร์ที่ผู้ใช้มองเห็นได้เพื่อให้ผู้ใช้กำหนดค่าเทมเพลต เช่น คุณสามารถอนุญาตให้ผู้ใช้เลือกจากภาษาโปรแกรมหรือกรณีการใช้งานตัวอย่างได้ Firebase Studio ใช้ข้อมูลนี้เพื่อเตรียม UI ที่แสดงต่อผู้ใช้เมื่อเลือกสร้างพื้นที่ทํางานใหม่จากเทมเพลตของคุณ

• idx-template.nix เป็นไฟล์ที่เขียนด้วยภาษา Nix ซึ่งมีสคริปต์เชลล์ Bash (รวมอยู่ในฟังก์ชัน 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 คุณควรดูตัวอย่างเทมเพลตพื้นฐานที่มีลักษณะดังนี้

• ไม่มีพารามิเตอร์ที่ผู้ใช้กําหนดค่าได้
• คัดลอกไฟล์ทั้งหมดในที่เก็บเทมเพลต (ยกเว้นไฟล์ 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 ดูแลรักษาที่เก็บเทมเพลต Firebase Studio 2 แห่ง ได้แก่

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

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

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

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/project-idx/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)

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

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

อธิบายพารามิเตอร์ใน 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

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

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

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

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

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

คุณควรปรับแต่งไฟล์ที่ควรเปิดเพื่อแก้ไขเมื่อสร้าง Workspace ใหม่ด้วยเทมเพลต เช่น หากเทมเพลตมีไว้สําหรับเว็บไซต์พื้นฐาน คุณอาจต้องเปิดไฟล์ 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 ของเว็บไซต์หรือที่เก็บข้อมูล