ดูตัวอย่างแอปของคุณ

Firebase Studio มีเครื่องมือแสดงตัวอย่างที่แสดงผลมุมมองแบบเรียลไทม์ของแอปพลิเคชันควบคู่ไปกับเครื่องมือแก้ไขโค้ด

เปิดใช้และกําหนดค่าสภาพแวดล้อมการนําเสนอตัวอย่าง

หากใช้เทมเพลต ระบบมักจะกําหนดค่าตัวอย่างให้คุณแล้ว หากยังไม่ได้ตั้งค่าตัวอย่างในเทมเพลต คุณจะกำหนดค่าตัวอย่างได้ในไฟล์การกำหนดค่า Nix ของโปรเจ็กต์

1. เปิด .idx/dev.nix จากพื้นที่ทำงาน

   Firebase Studio จะสร้างไฟล์นี้โดยอัตโนมัติเมื่อคุณสร้างพื้นที่ทํางานใหม่ และรวมสภาพแวดล้อมการนําดูที่เกี่ยวข้องตามเทมเพลตที่คุณเลือก หากไฟล์ไม่ได้อยู่ในFirebase Studio ที่เก็บโค้ด ให้สร้างไฟล์นั้น จากนั้นตั้งค่าแอตทริบิวต์ idx.previews เป็น true จากนั้นเพิ่มแอตทริบิวต์การกําหนดค่า ดังตัวอย่างต่อไปนี้

   { pkgs, ... }: {
   
     # NOTE: This is an excerpt of a complete Nix configuration example.
     # For more information about the dev.nix file in Firebase Studio, see
     # https://firebase.google.com/docs/studio/customize-workspace
   
     # Enable previews and customize configuration
     idx.previews = {
       enable = true;
       previews = {
         # The following object sets web previews
         web = {
           command = [
             "npm"
             "run"
             "start"
             "--"
             "--port"
             "$PORT"
             "--host"
             "0.0.0.0"
             "--disable-host-check"
           ];
           manager = "web";
           # Optionally, specify a directory that contains your web app
           # cwd = "app/client";
         };
         # The following object sets Android previews
         # Note that this is supported only on Flutter workspaces
         android = {
           manager = "flutter";
         };
       };
     };
   }
   

   ดูรายการแอตทริบิวต์ Nix ทั้งหมดใน Firebase Studio ได้ที่ Nix + Firebase Studio

2. สร้างสภาพแวดล้อมอีกครั้งโดยทำดังนี้

   • จากพาเล็ตคำสั่ง (Cmd+Shift+P/Ctrl+Shift+P) ให้เรียกใช้คำสั่ง Firebase Studio: รีบูตเครื่องอย่างหนัก
   • จากการแจ้งเตือนการกําหนดค่าสภาพแวดล้อมอัปเดตแล้ว ให้คลิกสร้างสภาพแวดล้อมอีกครั้ง

   เมื่อคุณสร้างสภาพแวดล้อมอีกครั้งหลังจากแก้ไขไฟล์ dev.nix แล้ว แผงตัวอย่างจะปรากฏในพื้นที่ทํางานโดยแสดงแท็บ Android และเว็บอย่างใดอย่างหนึ่งหรือทั้ง 2 แท็บ ทั้งนี้ขึ้นอยู่กับสิ่งที่คุณเปิดใช้

ใช้ตัวอย่างแอป

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

รีเฟรชตัวอย่างสำหรับเว็บและ Android

Firebase Studio เชื่อมต่อกับฟังก์ชันการโหลดซ้ำขณะทำงานของเฟรมเวิร์กพื้นฐาน (เช่น npm run start และ flutter hot-reload) เพื่อให้คุณมีขั้นตอนการทํางานภายในที่มีประสิทธิภาพมากขึ้น Firebase Studio มีประเภทการโหลดซ้ำต่อไปนี้

• การโหลดซ้ำแบบ Hot Reload โดยอัตโนมัติ: ระบบจะทำการโหลดซ้ำแบบ Hot Reload โดยอัตโนมัติเมื่อคุณบันทึกไฟล์ การโหลดซ้ำขณะทำงาน (บางครั้งเรียกว่า Hot Module Replacement หรือ HMR) จะอัปเดตแอปโดยไม่ต้องโหลดหน้าเว็บซ้ำ (สำหรับเว็บแอป) หรือไม่ต้องรีสตาร์ทหรือติดตั้งแอปอีกครั้ง (สำหรับโปรแกรมจำลอง) วิธีนี้มีประโยชน์ในการเก็บรักษาสถานะปัจจุบันของแอป แต่อาจไม่ทำงานตามที่ตั้งใจไว้เสมอไป

• การโหลดซ้ำทั้งหมดด้วยตนเอง: ตัวเลือกนี้เทียบเท่ากับการรีเฟรชหน้าเว็บ (สําหรับเว็บแอป) หรือการรีสตาร์ทแอป (สําหรับโปรแกรมจําลอง) เราขอแนะนําให้ใช้การโหลดซ้ำทั้งหมดเพื่อบันทึกการเปลี่ยนแปลงที่สําคัญในซอร์สโค้ด เช่น เมื่อปรับโครงสร้างโค้ดส่วนขนาดใหญ่

• การรีสตาร์ทระบบอย่างสมบูรณ์ด้วยตนเอง: ตัวเลือกนี้จะทำการรีสตาร์ทระบบของFirebase Studioอย่างสมบูรณ์ ซึ่งรวมถึงการหยุดและรีสตาร์ทเว็บเซิร์ฟเวอร์ของแอป

ตัวเลือกการโหลดซ้ำทั้งหมดจะใช้ได้โดยใช้แถบเครื่องมือแสดงตัวอย่างหรือแผงคำสั่ง (Cmd+Shift+P ใน Mac หรือ Ctrl+Shift+P ใน ChromeOS, Windows หรือ Linux) ในส่วนFirebase Studio

หากต้องการใช้แถบเครื่องมือแสดงตัวอย่าง ให้ทำตามขั้นตอนต่อไปนี้

1. คลิกไอคอนโหลดซ้ำเพื่อรีเฟรชหน้าเว็บ ซึ่งจะบังคับให้โหลดซ้ำทั้งหมด หากต้องการรีเฟรชประเภทอื่น ให้คลิกลูกศรข้างไอคอนโหลดซ้ำเพื่อขยายเมนู

2. เลือกตัวเลือกการรีเฟรชที่ต้องการจากเมนู ได้แก่ การโหลดซ้ำขณะทำงาน การโหลดซ้ำทั้งหมด หรือการรีสตาร์ทอย่างสมบูรณ์

แชร์ตัวอย่างหน้าเว็บกับผู้อื่น

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

1. ในแถบเครื่องมือแสดงตัวอย่างเว็บ ให้คลิกไอคอน แชร์ลิงก์ตัวอย่างทางด้านขวาของแถบที่อยู่เพื่อเปิดเมนูการแชร์

2. อนุญาตให้ผู้อื่นเข้าถึงพื้นที่ทำงานของคุณโดยใช้ตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้

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

   • จัดการสิทธิ์เข้าถึง Workspace แชร์พื้นที่ทำงานกับเฉพาะบุคคลที่คุณต้องการให้สิทธิ์เข้าถึง

3. เลือกคัดลอก URL ของตัวอย่างเพื่อคัดลอกลิงก์โดยตรงไปยังตัวอย่างพื้นที่ทํางาน จากนั้นส่งลิงก์ดังกล่าวให้บุคคลที่ต้องการรับความคิดเห็น คุณยังใช้คิวอาร์โค้ดที่ปรากฏขึ้นเพื่อเปิดตัวอย่างในอุปกรณ์เคลื่อนที่ได้ด้วย

กำหนดค่าการบันทึกอัตโนมัติและการโหลดซ้ำขณะทำงาน

โดยค่าเริ่มต้น Firebase Studio จะบันทึกงานโดยอัตโนมัติ 1 วินาทีหลังจากที่คุณหยุดพิมพ์ ซึ่งจะทริกเกอร์การโหลดซ้ำแบบ Hot Reload โดยอัตโนมัติ หากต้องการFirebase Studioบันทึกงานเป็นช่วงๆ ที่แตกต่างกัน ให้เปลี่ยนการตั้งค่าการบันทึกอัตโนมัติ นอกจากนี้ คุณยังปิดการบันทึกอัตโนมัติได้ด้วย

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

• เผยแพร่ด้วย Firebase
• ตรวจสอบแอป