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