สร้างปุ่มเพื่อนำเข้าโค้ดไปยัง Firebase Studio

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

ฟีเจอร์นี้ออกแบบมาเพื่อกรณีต่อไปนี้

• Code Playground ซึ่งผู้ใช้สามารถย้ายจากโปรแกรมแก้ไขพื้นฐานไปยังสภาพแวดล้อมในการพัฒนาซอฟต์แวร์ที่สมบูรณ์

• เครื่องมือสร้างต้นแบบแอป ซึ่งเว็บไซต์จะสร้างโค้ดและต้นแบบภาพ และผู้ใช้จะทำการวนซ้ำใน Firebase Studio

ใช้ SDK ของ "เปิดใน Firebase Studio"

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

วิธีการนำเข้า

คุณกำหนดค่าปุ่มให้นำเข้าโค้ดได้โดยใช้วิธีต่อไปนี้

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

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

เพิ่มปุ่ม "เปิดใน Firebase Studio" ลงในเว็บไซต์

SDK ของ "เปิดใน Firebase Studio": มีทุกสิ่งที่คุณต้องการ รวมถึงฟังก์ชัน Helper สำหรับ สร้างรูปภาพปุ่ม สร้าง Deep Link และส่งเนื้อหาไฟล์เพื่อสร้าง Firebase Studioพื้นที่ทำงาน

วิธีเพิ่มปุ่ม "เปิดใน Firebase Studio" ลงในเว็บไซต์

1. ติดตั้งแพ็กเกจในไดเรกทอรีโปรเจ็กต์โดยใช้คำสั่งต่อไปนี้

   npm install @firebase-studio/open-sdk
   

2. เพิ่มโค้ดต่อไปนี้ลงในโค้ดเพื่อนำเข้าไลบรารี

   import * as FirebaseStudio from '@firebase-studio/open-sdk';
   

ดูวิธีการโดยละเอียด ตัวอย่างโค้ด และเอกสารอ้างอิง API ฉบับเต็มได้ใน เอกสารประกอบ SDK อย่างเป็นทางการ

ทำความเข้าใจสภาพแวดล้อมของพื้นที่ทำงาน

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

สภาพแวดล้อมที่เพิ่มประสิทธิภาพแล้ว

สำหรับโปรเจ็กต์ React, Angular และ HTML อย่างง่าย Firebase Studio จะมีสภาพแวดล้อมที่เพิ่มประสิทธิภาพและกำหนดค่าไว้ล่วงหน้า โดยผู้เรียกจะต้องตั้งค่า baselineEnvironment ภายใน settings อย่างถูกต้อง ซึ่งหมายความว่า เมื่อผู้ใช้เปิดลิงก์ใน Firebase Studio, Firebase Studio จะสร้างพื้นที่ทำงานและ ดำเนินการต่อไปนี้โดยอัตโนมัติ

• ติดตั้งการอ้างอิงที่จำเป็นทั้งหมด
• กำหนดค่าและเริ่มเซิร์ฟเวอร์การพัฒนาที่ถูกต้อง
• ตั้งค่าสภาพแวดล้อมด้วยเครื่องมือและส่วนขยายที่ถูกต้อง

ซึ่งจะเปิดสภาพแวดล้อมที่ผู้ใช้สามารถดูตัวอย่างแอปพลิเคชันแบบเรียลไทม์และโต้ตอบกับโค้ดได้โดยตรง

สภาพแวดล้อมทั่วไป

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

• ติดตั้งรันไทม์และส่วนประกอบของภาษา
• กำหนดค่าไฟล์ dev.nix

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

ประสบการณ์ของผู้ใช้

สำหรับพื้นที่ทำงานทั้ง 2 ประเภท หลังจากที่ผู้ใช้คลิกปุ่ม "เปิดใน Firebase Studio" ระบบจะแจ้งให้ผู้ใช้ตั้งชื่อพื้นที่ทำงานและตรวจสอบ รายการไฟล์ที่จะนำเข้า

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

ออกแบบปุ่ม "เปิดใน Firebase Studio"

คุณสามารถออกแบบปุ่มโดยใช้ เปิดใน Firebase Studio SDK หรือ ใช้เครื่องมือต่อไปนี้เพื่อสร้าง HTML สำหรับปุ่ม Firebase Studio

หากใช้ SDK คุณจะรวมพร็อพเพอร์ตี้การกำหนดค่าที่ไม่บังคับสำหรับปุ่มได้ดังนี้

• label: ตั้งค่าป้ายกำกับข้อความที่จะแสดงบนปุ่ม
  • ค่าที่อนุญาต: open, try, export หรือ continue
• color: กำหนดรูปแบบสีของปุ่ม
  • ค่าที่อนุญาต: dark, light, blue หรือ bright
• size: ระบุความสูงของปุ่มในหน่วยพิกเซล
  • ค่าที่อนุญาต: 20 หรือ 32
• imageFormat: กำหนดรูปแบบไฟล์ของรูปภาพที่สร้างขึ้น
  • ค่าที่อนุญาต: svg หรือ png

ตัวอย่าง

img.src = FirebaseStudio.getButtonImageUrl({
  label: 'export',
  color: 'dark',
  size: 32,
  imageFormat: 'svg'
});

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

• ติดตั้ง SDK ของ "เปิดใน Firebase Studio"
• ทำความเข้าใจวิธีปรับแต่งFirebase Studio พื้นที่ทำงาน