เริ่มต้นใช้งานโปรเจ็กต์ IDX

อ่านต่อสำหรับข้อมูลพื้นฐานที่คุณจำเป็นต้องทราบสำหรับการเริ่มใช้ Project IDX

ก่อนเริ่มต้น

ก่อนเริ่มต้น คุณอาจต้องเปิดใช้คุกกี้ของบุคคลที่สาม เบราว์เซอร์ Project IDX ต้องใช้คุกกี้ของบุคคลที่สามในเบราว์เซอร์ส่วนใหญ่ เพื่อตรวจสอบสิทธิ์พื้นที่ทำงาน

Chrome
  1. เปิดการตั้งค่า
  2. เปิดแท็บความเป็นส่วนตัวและความปลอดภัย
  3. ตรวจสอบว่าเปิดใช้อนุญาตคุกกี้ทั้งหมดแล้ว
  4. เปิด idx.google.com
  5. คลิกไอคอนการแสดงผลในแถบที่อยู่ visibility_off เพื่อเปิด แผงการป้องกันการติดตาม เปิด การตั้งค่าคุกกี้ของบุคคลที่สามเพื่ออนุญาตชั่วคราว คุกกี้ของบุคคลที่สาม การดำเนินการนี้จะเปิดใช้คุกกี้บน IDX เป็นเวลา 90 วัน
Safari
  1. เปิด Safari > การตั้งค่า...
  2. ปิดการตั้งค่าต่อไปนี้
    • ขั้นสูง > บล็อกคุกกี้ทั้งหมด
    • ความเป็นส่วนตัว > ป้องกันการติดตามข้ามเว็บไซต์
  3. เปิด idx.google.com
Firefox

คุณไม่จำเป็นต้องเปิดใช้คุกกี้ของบุคคลที่สามใน Firefox ไปที่ idx.google.com
โอเปร่า
  1. เปิด idx.google.com
  2. เปิดเมนูและคลิกการตั้งค่า
  3. ไปที่ความเป็นส่วนตัวและ ความปลอดภัยและขยายส่วน คุกกี้ของบุคคลที่สาม
  4. เลือกบล็อกคุกกี้ของบุคคลที่สามในโหมดไม่ระบุตัวตน หรือ อนุญาตคุกกี้ของบุคคลที่สาม
  5. เปิด idx.google.com
Arc
  1. ไปที่ arc://settings
  2. ไปที่ส่วนความเป็นส่วนตัวและความปลอดภัย และขยายส่วน คุกกี้ของบุคคลที่สาม
  3. เลือกบล็อกคุกกี้ของบุคคลที่สามในโหมดไม่ระบุตัวตน หรือ อนุญาตคุกกี้ของบุคคลที่สาม
  4. เปิด idx.google.com
Brave

คุณไม่จำเป็นต้องเปิดใช้คุกกี้ของบุคคลที่สามให้กับ Brave ไปที่ idx.google.com

สร้างพื้นที่ทำงาน

พื้นที่ทำงานใน IDX เป็นสภาพแวดล้อมในการพัฒนาซอฟต์แวร์ที่มีทุกอย่าง ที่จำเป็นต่อการพัฒนาแอปพลิเคชัน โดยจะมีโค้ด ซึ่งเป็นตัวแก้ไขโค้ด (มีปลั๊กอินที่เกี่ยวข้องกับโปรเจ็กต์ของคุณ) และ Toolchain ที่รองรับแอป ที่กำลังพัฒนา ซึ่งคล้ายกับ สร้างโปรเจ็กต์ใหม่ในสภาพแวดล้อมการพัฒนาเดสก์ท็อปในเครื่องของคุณ ยกเว้นเฉพาะ มีคอมพิวเตอร์และระบบปฏิบัติการที่กำหนดค่าไว้ล่วงหน้า และเฉพาะสำหรับ ในการสร้างแอปพลิเคชัน

พื้นที่ทำงานของ Project IDX ได้รับการเพิ่มประสิทธิภาพให้มีฐานของโค้ดทีละ 1 ฐานแล้ว เพื่อให้คุณสามารถเก็บสภาพแวดล้อมและทรัพยากร Dependency ระดับระบบของ แอปพลิเคชันจะแยกออกจากกัน

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

หากต้องการสร้างพื้นที่ทำงานใหม่ ให้ทำตามขั้นตอนต่อไปนี้

  • ภาพหน้าจอของขั้นตอนการเริ่มต้นใช้งาน IDX ที่ยอมรับข้อกําหนด
  • ภาพหน้าจอของขั้นตอนการเริ่มต้นใช้งาน IDX ที่เปิดใช้ฟีเจอร์ AI
  • ภาพหน้าจอของขั้นตอนการเริ่มต้นใช้งาน IDX ที่แสดงหมายเหตุเกี่ยวกับ AI และความเป็นส่วนตัว
  • ภาพหน้าจอของแดชบอร์ด IDX ที่แสดงเทมเพลตเด่นและการนำเข้า GitHub

  1. เปิด Project IDX

  2. เมื่อคุณเปิด IDX เป็นครั้งแรก คุณจะได้รับแจ้งให้อ่านและยอมรับ ข้อกำหนดในการให้บริการสำหรับผลิตภัณฑ์ของ Google, Generative AI และ Android SDK นอกจากนี้ คุณยังสามารถเลือกรับข่าวสารเกี่ยวกับการอัปเดตผลิตภัณฑ์และ ประกาศหรือการศึกษาผู้ใช้เพื่อปรับปรุงผลิตภัณฑ์ของเรา เลือกตัวเลือกที่ ที่เหมาะสมกับคุณ คลิกลิงก์ที่ให้ไว้เพื่ออ่านข้อกำหนดในการให้บริการ จากนั้นเลือกตัวเลือก เพื่อยอมรับและคลิกดำเนินการต่อ ต่อไป คุณสามารถเลือก เปิดใช้ฟีเจอร์ AI จากการใช้งาน IDX ครั้งแรก หรือยกเลิกฟีเจอร์โดย คลิกไม่ใช่ตอนนี้ (คุณสามารถ เปิดใช้งานในภายหลัง) หากคุณเปิดใช้ในหน้าจอนี้ โปรดอ่าน เกี่ยวกับ AI และความเป็นส่วนตัว แล้วคลิกต่อไปเพื่อเก็บการตั้งค่าหรือ ย้อนกลับเพื่อปิดฟีเจอร์ AI

  3. เลือกประเภทพื้นที่ทำงานที่ต้องการสร้างดังนี้

    • เทมเพลต: สร้างพื้นที่ทำงานที่โหลดไว้ล่วงหน้าด้วยไฟล์พื้นฐานและ ที่คุณอาจต้องใช้ เลือกเทมเพลตแนะนำรายการใดรายการหนึ่งหรือคลิก ดูเทมเพลตทั้งหมดเพื่อดูรายการเฟรมเวิร์ก, API, และภาษา นอกจากนี้คุณยังค้นหาเทมเพลตพื้นที่ทำงานเปล่าได้ใน ไลบรารีเทมเพลต
    • Git Repository: เลือกนำเข้าที่เก็บเพื่อโคลนที่เก็บลงในพื้นที่ทำงาน

เทมเพลต

หน้าคลังเทมเพลต IDX ที่แสดงเทมเพลตเว็บที่พร้อมใช้งาน

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

  2. ตั้งชื่อพื้นที่ทำงานและตั้งค่าตัวเลือกเพิ่มเติม

  3. คลิกสร้าง IDX สร้างพื้นที่ทำงานใหม่โดยอิงจาก ทั้งหมด

เราเพิ่มเทมเพลตใหม่ๆ อยู่เสมอ อย่าลืมกลับมาดูอีกนะ หรือบอกเราว่าคุณอยากเห็นอะไร

การนำเข้าที่เก็บ Git

  1. ป้อน URL ของที่เก็บ ซึ่งโฮสต์บน GitHub, GitLab หรือ Bitbucket ได้

  2. คลิกสร้าง IDX สร้างพื้นที่ทำงานใหม่โดยอิงจาก ทั้งหมด

  3. สำหรับที่เก็บส่วนตัว ระบบจะขอให้คุณตรวจสอบสิทธิ์กับผู้ให้บริการที่เกี่ยวข้อง

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

  4. เรียกใช้ npm install (หรือ flutter pub get) ในเทอร์มินัล IDX หลังจาก กำลังนำเข้าโปรเจ็กต์ โดยค่าเริ่มต้น IDX จะไม่ติดตั้ง NPM ทรัพยากร Dependency เมื่อคุณนำเข้าโปรเจ็กต์

กำหนดค่าพื้นที่ทำงาน

IDX ใช้ Nix เพื่อกำหนดการกำหนดค่าสภาพแวดล้อมสำหรับพื้นที่ทำงานแต่ละแห่ง Nix เป็น เครื่องมือจัดการแพ็กเกจฟังก์ชัน และกำหนดตัวระบุที่ไม่ซ้ำกันให้กับทรัพยากร Dependency แต่ละรายการ ซึ่งหมายความว่าสภาพแวดล้อมของคุณจะสามารถ ทรัพยากร Dependency เดียวกันหลายเวอร์ชันได้อย่างราบรื่น และยัง สามารถทำซ้ำได้และเป็นแบบประกาศได้ ในบริบทของ IDX คุณจะ แชร์ไฟล์การกำหนดค่า Nix ในพื้นที่ทำงานต่างๆ เพื่อโหลดไฟล์เดียวกัน การกำหนดค่าสภาพแวดล้อม ดูข้อมูลเพิ่มเติมเกี่ยวกับ Nix + IDX

สร้างหรือแก้ไขไฟล์ .idx/dev.nix

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

ดูตัวอย่างไฟล์ .idx/dev.nix ต่อไปนี้สําหรับสภาพแวดล้อมพื้นที่ทำงานพื้นฐาน การกำหนดค่าที่เปิดใช้การแสดงตัวอย่างแอปใน IDX

{ pkgs, ... }: {

  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_18
  ];

  # Sets environment variables in the workspace
  env = {
    SOME_ENV_VAR = "hello";
  };

  # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
  idx.extensions = [
    "angular.ng-template"
  ];

  # Enable previews and customize configuration
  idx.previews = {
    enable = true;
    previews = {
      web = {
        command = [
          "npm"
          "run"
          "start"
          "--"
          "--port"
          "$PORT"
          "--host"
          "0.0.0.0"
          "--disable-host-check"
        ];
        manager = "web";
      };
    };
  };
}

ใช้การกำหนดค่าใหม่

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

แก้ไขข้อบกพร่องของบิลด์สภาพแวดล้อม

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

ในที่สุด IDX จะแสดงข้อผิดพลาดของบิลด์สภาพแวดล้อม ในตอนนี้ คุณ ต้องแก้ปัญหาด้วยตนเอง

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