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

โปรเจ็กต์ 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. สร้างสภาพแวดล้อมอีกครั้งโดยทำดังนี้

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

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

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

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

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

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

IDX เชื่อมต่อกับฟังก์ชันการโหลดซ้ำแบบ Hot ของเฟรมเวิร์กที่สำคัญ (เช่น 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 Reload หรือ Hard Restart

   

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

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

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

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

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

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