Mulai menggunakan Project IDX

Lanjutkan membaca dasar-dasar yang diperlukan untuk mulai menggunakan Project IDX.

Sebelum memulai

Sebelum memulai, Anda mungkin perlu mengaktifkan cookie pihak ketiga untuk browser. Project IDX memerlukan cookie pihak ketiga di sebagian besar browser untuk mengautentikasi ruang kerja.

Chrome

1. Buka Setelan.
2. Buka tab Privasi dan Keamanan.
3. Pastikan Izinkan semua cookie diaktifkan.
4. Buka idx.google.com.
5. Klik ikon visibilitas di kolom URL visibility_off untuk membuka panel Tracking Protection. Aktifkan setelan Cookie pihak ketiga untuk mengizinkan cookie pihak ketiga sementara waktu. Tindakan ini akan mengaktifkan cookie di IDX selama 90 hari.

Safari

1. Buka Safari > Settings....
2. Nonaktifkan setelan berikut:
   • Lanjutan > Blokir semua cookie
   • Privasi > Cegah pelacakan lintas situs
3. Buka idx.google.com.

Firefox

Anda tidak perlu mengaktifkan cookie pihak ketiga untuk Firefox. Buka idx.google.com.

Opera

1. Buka idx.google.com.
2. Buka menu dan klik Setelan.
3. Buka bagian Privasi & Keamanan, lalu luaskan opsi Cookie pihak ketiga.
4. Pilih Blokir cookie pihak ketiga dalam mode Samaran atau Izinkan cookie pihak ketiga.
5. Buka idx.google.com.

Busur

1. Buka arc://settings.
2. Buka bagian Privasi dan keamanan, lalu luaskan opsi Cookie pihak ketiga.
3. Pilih Blokir cookie pihak ketiga dalam mode Samaran atau Izinkan cookie pihak ketiga.
4. Buka idx.google.com.

Brave

Anda tidak perlu mengaktifkan cookie pihak ketiga untuk Brave. Buka idx.google.com.

Membuat ruang kerja

Ruang kerja di IDX adalah lingkungan pengembangan yang berisi semua yang Anda perlukan untuk mengembangkan aplikasi. Library ini berisi kode, editor kode (dengan plugin yang relevan dengan project Anda), dan toolchain yang mendukung pengembangan aplikasi. Mirip dengan membuat project baru di lingkungan pengembangan Desktop lokal, tetapi Anda memiliki seluruh komputer dan OS yang telah dikonfigurasi sebelumnya dan dikhususkan secara eksklusif untuk mem-build aplikasi.

Ruang kerja Project IDX dioptimalkan untuk menampung satu codebase dalam satu waktu, sehingga Anda dapat menjaga lingkungan dan dependensi tingkat sistem dari berbagai aplikasi yang terpisah satu sama lain.

Jika Anda membuat aplikasi baru, gunakan template ruang kerja terkelola di IDX untuk memulai dengan cepat. Atau, Anda dapat mengimpor codebase aplikasi yang sudah ada ke IDX.

Poin Penting: Ada batas jumlah ruang kerja yang dapat Anda buat. Jika memiliki Profil Developer Google, Anda dapat membuat hingga 5 ruang kerja. Untuk membuat Profil Developer Google langsung dari IDX setelah Anda mencapai batas ruang kerja, klik Complete Setup dari notifikasi di dasbor template.

Untuk membuat ruang kerja baru, ikuti langkah-langkah berikut:

• 
• 
• 
• 

1. Buka Project IDX

2. Saat pertama kali membuka IDX, Anda akan diminta untuk membaca dan menyetujui persyaratan layanan untuk produk Google, AI Generatif, dan Android SDK. Anda juga dapat memilih untuk menerima komunikasi tentang pembaruan dan pengumuman produk, atau studi pengguna untuk meningkatkan kualitas produk kami. Pilih opsi yang sesuai untuk Anda. Klik link yang diberikan untuk membaca persyaratan layanan, lalu pilih opsi untuk menyetujuinya dan klik Lanjutkan. Selanjutnya, Anda dapat memutuskan untuk Mengaktifkan Fitur AI dari penggunaan IDX pertama Anda, atau membiarkannya dengan mengklik Not Right Now (Anda selalu dapat mengaktifkannya nanti). Jika Anda mengaktifkannya di layar ini, baca catatan tentang AI dan privasi, lalu klik Continue untuk mempertahankan setelan Anda atau Go Back untuk menonaktifkan fitur AI.

3. Pilih jenis ruang kerja yang ingin dibuat:

   • Template: Membuat ruang kerja yang telah dilengkapi dengan file dan paket dasar yang mungkin Anda perlukan. Pilih salah satu template unggulan atau klik See all templates untuk melihat daftar lengkap framework, API, dan bahasa yang tersedia. Anda juga dapat menemukan template Ruang kerja kosong di library template.
   • Repositori GitHub: Pilih Import a repo untuk meng-clone repositori GitHub ke ruang kerja Anda.

Template

1. Cari template menurut jenis aplikasi atau gunakan kotak penelusuran di kanan atas untuk memfilter library template lengkap menurut kata kunci. Template Ruang kerja kosong tersedia di kategori Misc.

2. Masukkan nama untuk ruang kerja Anda dan tetapkan opsi tambahan.

3. Klik Create. IDX membuat ruang kerja baru berdasarkan pilihan Anda.

Kami selalu menambahkan template baru, jadi terus periksa kembali atau beri tahu kami apa yang ingin Anda lihat.

Impor GitHub

1. Masukkan URL Repo.

2. Klik Create. IDX membuat ruang kerja baru berdasarkan pilihan Anda.

3. Lakukan autentikasi ke GitHub setelah ruang kerja dimuat.

4. Jalankan npm install (atau flutter pub get) di terminal IDX setelah mengimpor project Anda. Secara default, IDX tidak menginstal dependensi npm saat Anda mengimpor project.

Mengonfigurasi ruang kerja Anda

IDX menggunakan Nix untuk menentukan konfigurasi lingkungan untuk setiap ruang kerja. Nix adalah pengelola paket yang sepenuhnya berfungsi dan menetapkan ID unik ke setiap dependensi, yang pada akhirnya berarti lingkungan Anda dapat berisi beberapa versi dependensi yang sama secara lancar. Model ini juga dapat direproduksi dan deklaratif. Dalam konteks IDX, ini berarti Anda dapat membagikan file konfigurasi Nix ke seluruh ruang kerja untuk memuat konfigurasi lingkungan yang sama. Pelajari Nix + IDX lebih lanjut.

Buat atau edit file .idx/dev.nix

Konfigurasi lingkungan ditetapkan dalam file .idx/dev.nix di repositori kode Anda. File ini memungkinkan Anda menentukan paket yang diinstal, variabel lingkungan, dan ekstensi Code OSS.

Lihat contoh file .idx/dev.nix berikut untuk konfigurasi lingkungan ruang kerja dasar yang mengaktifkan pratinjau aplikasi di 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";
      };
    };
  };
}

Terapkan konfigurasi baru

Setiap kali Anda menambahkan atau memperbarui file konfigurasi dev.nix, IDX akan menampilkan perintah Rebuild the environment di pojok kanan bawah. Waktu yang diperlukan untuk membangun ulang lingkungan bergantung pada jumlah paket yang dibutuhkan konfigurasi Anda.

Men-debug kegagalan build lingkungan

Mengingat bahwa file konfigurasi adalah kode yang dapat dibaca mesin, file tersebut dapat mengalami error. Jika hal ini terjadi, lingkungan mungkin gagal dibangun dan tidak dapat dimulai. IDX menampilkan opsi untuk memulai lingkungan Recovery. Ruang kerja ini tidak menyertakan konfigurasi apa pun yang telah Anda tentukan dan hanya menjalankan Code OSS dasar. Hal ini memberi Anda kesempatan untuk memperbaiki error di file konfigurasi dev.nix dan membangun ulang lingkungan.

IDX pada akhirnya akan menampilkan error build lingkungan. Untuk saat ini, Anda harus memecahkan masalah sendiri.

Langkah berikutnya

• Lihat pratinjau aplikasi Anda.

• Bagikan ruang kerja Anda.