เพิ่มปุ่ม "เปิดใน Firebase Studio" ลงในเว็บไซต์เพื่อให้ผู้ใช้มีวิธีนำเข้าโค้ดจากเว็บไซต์ของคุณไปยังพื้นที่ทำงาน Firebase Studio ได้โดยตรงอย่างราบรื่น ซึ่งจะช่วยให้ผู้ใช้ทำงานต่อในสภาพแวดล้อมการพัฒนาบนระบบคลาวด์แบบเอเจนต์ได้
ฟีเจอร์นี้ออกแบบมาเพื่อ
สนามเด็กเล่นของโค้ด ซึ่งผู้ใช้สามารถย้ายจากโปรแกรมแก้ไขพื้นฐาน ไปยังสภาพแวดล้อมในการพัฒนาซอฟต์แวร์ที่สมบูรณ์ได้
เครื่องมือสร้างต้นแบบแอป ซึ่งเว็บไซต์จะสร้างโค้ดและต้นแบบภาพ และผู้ใช้จะทำซ้ำใน Firebase Studio
ใช้ SDK ของฟีเจอร์เปิดใน Firebase Studio
ปุ่ม "เปิดใน Firebase Studio" ขับเคลื่อนโดย SDK เปิดใน Firebase Studio ซึ่งเป็นไลบรารี JavaScript ที่สร้าง ลิงก์ที่เหมาะสมเพื่อสร้างและป้อนข้อมูลในพื้นที่ทํางานใหม่ โดยมีตัวเลือกหลายอย่าง สำหรับวิธีนำเข้าโค้ด
วิธีการนำเข้า
คุณกำหนดค่าปุ่มเพื่อนำเข้าโค้ดได้โดยใช้วิธีต่อไปนี้
จากที่เก็บ Git หรือเทมเพลต: ลิงก์ไปยังที่เก็บ Git หรือ Firebase Studio เทมเพลต ซึ่งเหมาะสำหรับโปรเจ็กต์ที่เสร็จสมบูรณ์หรือเทมเพลตที่กำหนดไว้ล่วงหน้า ดูข้อมูลเพิ่มเติมเกี่ยวกับกรณีการใช้งานเหล่านี้ได้ที่ สร้างทางลัดไปยังพื้นที่ทำงานที่กำหนดไว้ล่วงหน้าใน Firebase Studio
จากชุดไฟล์โปรเจ็กต์: สร้างพื้นที่ทำงานแบบไดนามิกจากชุดไฟล์และโค้ดที่ตัดตอนมาจากเว็บแอปพลิเคชันโดยตรง ตัวเลือกนี้เป็นตัวเลือกที่ มีประสิทธิภาพมากที่สุดสำหรับสนามเด็กเล่นของโค้ดและเครื่องมือสร้างต้นแบบแอป เนื่องจากจะส่งออกงานปัจจุบันของผู้ใช้ แม้ว่าจะไม่ได้บันทึกไว้ที่อื่นก็ตาม
เพิ่มปุ่ม "เปิดใน Firebase Studio" ไปยังเว็บไซต์
Open in Firebase Studio SDK: มีทุกอย่างที่คุณต้องการ รวมถึงฟังก์ชันช่วยในการ สร้างรูปภาพปุ่ม สร้าง Deep Link และส่งเนื้อหาไฟล์เพื่อสร้าง Firebase Studioพื้นที่ทํางาน
วิธีเพิ่มปุ่ม "เปิดใน Firebase Studio" ลงในเว็บไซต์
ติดตั้งแพ็กเกจในไดเรกทอรีโปรเจ็กต์
npm install @firebase-studio/open-sdkเพิ่มข้อมูลต่อไปนี้ลงในโค้ดเพื่อนำเข้าไลบรารี
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 จะใช้โปรแกรมนำเข้าทั่วไป โดยจะอัปโหลดไฟล์ไปยังพื้นที่ทำงาน แต่ผู้ใช้ต้อง ตั้งค่าเริ่มต้นด้วยตนเอง โดยอาจต้องดำเนินการต่อไปนี้
- ติดตั้งรันไทม์และทรัพยากร Dependency ของภาษา
- กำหนดค่าไฟล์
dev.nix
สำหรับโปรเจ็กต์เหล่านี้ Firebase Studio จะสร้างสภาพแวดล้อมที่ไม่ได้ปรับแต่ง เพื่อให้ผู้ใช้ควบคุมกระบวนการตั้งค่าได้อย่างเต็มที่
ประสบการณ์ของผู้ใช้
สำหรับพื้นที่ทำงานทั้ง 2 ประเภท หลังจากที่ผู้ใช้คลิกปุ่ม "เปิดใน Firebase Studio" ระบบจะแจ้งให้ผู้ใช้ตั้งชื่อพื้นที่ทำงานและตรวจสอบ รายการไฟล์ที่จะนำเข้า
เมื่อผู้ใช้คลิกนำเข้า ระบบจะเปิดพื้นที่ทำงาน Firebase Studio ใหม่ โดยมีไฟล์โปรเจ็กต์ ตัวอย่างแอป และไฟล์ README ที่มีขั้นตอนถัดไป
ออกแบบปุ่ม "เปิดใน Firebase Studio"
คุณสามารถออกแบบปุ่มโดยใช้ Open in 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'
});
