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

Project IDX ให้คุณดูตัวอย่างงานโดยแสดงผลภาพสดของ แอปพลิเคชันของคุณควบคู่กับตัวแก้ไขโค้ด ตัวอย่างเว็บ IDX แสดงผล เฟรมแบบอินไลน์ (iframe) ของเว็บเซิร์ฟเวอร์ของแอปและ Android ในระบบคลาวด์ โปรแกรมจำลอง

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

หากต้องการแสดงตัวอย่างแอปในพื้นที่ทำงาน คุณต้องกำหนดค่าการแสดงตัวอย่าง ของคุณ

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

   { pkgs, ... }: {
   
     # NOTE: This is an excerpt of a complete Nix configuration example.
     # For more information about the dev.nix file in IDX, see
     # https://developers.google.com/idx/guides/customize-idx-env
   
     # 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";
         };
         # The following object sets Android previews
         # Note that this is supported only on FLutter workspaces
         android = {
           manager = "flutter";
         };
       };
     };
   }
   

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

2. สร้างสภาพแวดล้อมใหม่

   • เรียกใช้คำสั่ง Project IDX: Hard start จากแผงคำสั่ง (Cmd+Shift+P/Ctrl+Shift+P)
   • คลิกสร้างสภาพแวดล้อมใหม่จากอัปเดตการกำหนดค่าสภาพแวดล้อมแล้ว การแจ้งเตือน

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

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

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

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

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

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

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

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

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

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

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

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

2. เลือกตัวเลือกการรีเฟรชที่คุณต้องการจากเมนู Hot Reload, Full โหลดซ้ำ หรือรีสตาร์ทด้วยตนเอง

   

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

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

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

1. เปิด Project IDX
2. คลิกไอคอนการตั้งค่า หน้าต่างการตั้งค่าจะปรากฏขึ้น
3. ค้นหาไฟล์: บันทึกอัตโนมัติ และตรวจสอบว่าได้ตั้งค่าช่องดังกล่าวเป็น "afterDelay"
4. ค้นหาไฟล์: ความล่าช้าในการบันทึกอัตโนมัติ ช่องการหน่วงเวลาการบันทึกอัตโนมัติ จะปรากฏขึ้น
5. ป้อนช่วงเวลาการหน่วงเวลาการบันทึกอัตโนมัติใหม่ หน่วยเป็นมิลลิวินาที ตอนนี้ระบบจะบันทึกการเปลี่ยนแปลงงานโดยอัตโนมัติตามการบันทึกอัตโนมัติใหม่ การตั้งค่าการหน่วงเวลา

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

1. เปิด Project IDX
2. คลิกไอคอนการตั้งค่า หน้าต่างการตั้งค่าจะปรากฏขึ้น
3. ค้นหาไฟล์: บันทึกอัตโนมัติ
4. คลิกเมนูแบบเลื่อนลงและเลือกปิด ตอนนี้การบันทึกอัตโนมัติเปลี่ยนเป็น ปิดใช้อยู่