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

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: รีสตาร์ทแบบฮาร์ด
    • จากการแจ้งเตือนอัปเดตการกำหนดค่าสภาพแวดล้อมแล้ว ให้คลิก สร้างสภาพแวดล้อมใหม่

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

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

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

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

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

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

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

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

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

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

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

  2. เลือกตัวเลือกการรีเฟรชที่ต้องการจากเมนู ได้แก่ Hot Reload, Full Reload หรือHard Restart

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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