ดูตัวอย่างแอป

Firebase Studio มีวิธีต่างๆ ในการแสดงตัวอย่างและทดสอบ แอปพลิเคชันระหว่างการพัฒนา ซึ่งรวมถึงการใช้ App Prototyping agent และการใช้ประโยชน์จากโปรแกรมแสดงตัวอย่างเว็บในตัว รวมถึงโปรแกรมแสดงตัวอย่างเว็บและ Android ที่มีอยู่ในพื้นที่ทำงานของ Firebase Studio

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

หากคุณใช้เทมเพลตหรือสร้างแอป โดยใช้App Prototyping agent ระบบมักจะกำหนดค่าการแสดงตัวอย่างไว้ให้คุณแล้ว หากยังไม่ได้ตั้งค่าการแสดงตัวอย่างในเทมเพลต คุณสามารถกำหนดค่าได้ในไฟล์การกำหนดค่า 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: Hard restart
    • จากการแจ้งเตือนอัปเดตการกำหนดค่าสภาพแวดล้อมแล้ว ให้คลิกสร้างสภาพแวดล้อมใหม่

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

ใช้การแสดงตัวอย่างแอป

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

กำหนดค่าการบันทึกอัตโนมัติและการรีโหลดแบบด่วน

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

กำหนดค่าการบันทึกอัตโนมัติ

  1. เปิด Firebase Studio
  2. คลิกไอคอนการตั้งค่า
  3. ค้นหา Files: Auto Save และตรวจสอบว่าช่องตั้งค่าเป็น `afterDelay`
  4. ค้นหา Files: Auto Save Delay.
  5. ป้อนช่วงเวลาหน่วงการบันทึกอัตโนมัติใหม่ เป็นมิลลิวินาที ตอนนี้ระบบจะบันทึกการเปลี่ยนแปลงงานของคุณ โดยอัตโนมัติตามการตั้งค่าการหน่วงการบันทึกอัตโนมัติใหม่

ปิดการบันทึกอัตโนมัติ

  1. เปิด Firebase Studio
  2. คลิกไอคอนการตั้งค่า
  3. ค้นหา Files: Auto Save
  4. คลิกเมนูแบบเลื่อนลง แล้วเลือก ปิด

แบ็กเอนด์การแสดงตัวอย่างถูกตัดการเชื่อมต่อ

คุณไม่จำเป็นต้องสนใจข้อความ "แบ็กเอนด์การแสดงตัวอย่างถูกตัดการเชื่อมต่อ"

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