Inizia a utilizzare il progetto IDX

Continua a leggere per le nozioni di base necessarie per iniziare a utilizzare Project IDX.

Prima di iniziare

Prima di iniziare, potrebbe essere necessario attivare i cookie di terze parti per il tuo browser. Il progetto IDX richiede cookie di terze parti nella maggior parte dei browser per autenticare le aree di lavoro.

Chrome
  1. Apri Impostazioni.
  2. Apri la scheda Privacy e sicurezza.
  3. Assicurati che l'opzione Consenti tutti i cookie sia attiva.
  4. Apri idx.google.com.
  5. Fai clic sull'icona di visibilità nella barra degli indirizzi visibility_off per aprire il riquadro Protezione antitracciamento. Attiva l'impostazione Cookie di terze parti per consentire temporaneamente i cookie di terze parti. Questa opzione abilita i cookie su IDX per 90 giorni.
Safari
  1. Apri Safari > Impostazioni....
  2. Disattiva le seguenti impostazioni:
    • Avanzate > Blocca tutti i cookie
    • Privacy > Impedisci il monitoraggio tra siti
  3. Apri idx.google.com.
Firefox

Non è necessario abilitare i cookie di terze parti per Firefox. Vai su idx.google.com.

Opera
  1. Apri idx.google.com.
  2. Apri il menu e fai clic su Impostazioni.
  3. Vai alla sezione Privacy e sicurezza ed espandi l'opzione Cookie di terze parti.
  4. Seleziona Blocca cookie di terze parti in modalità di navigazione in incognito o Consenti cookie di terze parti.
  5. Apri idx.google.com.
Arco
  1. Vai ad arc://settings.
  2. Vai alla sezione Privacy e sicurezza ed espandi l'opzione Cookie di terze parti.
  3. Seleziona Blocca cookie di terze parti in modalità di navigazione in incognito o Consenti cookie di terze parti.
  4. Apri idx.google.com.
Brave

Non è necessario abilitare i cookie di terze parti per Brave. Vai su idx.google.com.

Crea un'area di lavoro

Un'area di lavoro in IDX è un ambiente di sviluppo che contiene tutto quello necessario per sviluppare un'applicazione. Contiene il tuo codice, un editor di codice (con plug-in pertinenti per il tuo progetto) e strumentichain che supportano lo sviluppo di app. È come creare un nuovo progetto nell'ambiente di sviluppo desktop locale, con la differenza che hai un intero computer e sistema operativo preconfigurati e dedicati esclusivamente alla creazione di un'applicazione.

Le aree di lavoro del progetto IDX sono ottimizzate per contenere un codebase alla volta, in modo da poter mantenere isolati gli ambienti e le dipendenze a livello di sistema di diverse applicazioni.

Se stai creando una nuova app, utilizza i modelli dell'area di lavoro gestita in IDX per iniziare rapidamente. In alternativa, puoi importare i codebase delle applicazioni esistenti in IDX.

Per creare una nuova area di lavoro:

  • Uno screenshot del flusso di onboarding di IDX che accetta i termini.
  • Uno screenshot del flusso di onboarding di IDX che abilita le funzionalità di IA.
  • Uno screenshot del flusso di onboarding di IDX che mostra una nota su IA e privacy
  • Uno screenshot della dashboard IDX che mostra i modelli in primo piano e l'importazione di GitHub
  1. Apri Progetto IDX

  2. La prima volta che apri IDX, ti viene chiesto di leggere e accettare i termini di servizio per i prodotti Google, l'IA generativa e l'SDK Android. Puoi anche attivare le comunicazioni relative ad aggiornamenti e annunci sui prodotti o a studi sugli utenti per migliorare il prodotto. Seleziona le opzioni che fanno al caso tuo. Fai clic sui link forniti per leggere i Termini di servizio, quindi seleziona l'opzione per accettarli e fai clic su Continua. Successivamente, puoi decidere di abilitare le funzionalità IA dal primo utilizzo di IDX o lasciarle disattivate facendo clic su Non ora (puoi sempre attivarle in un secondo momento). Se decidi di farlo in questa schermata, leggi la nota sull'IA e la privacy e poi fai clic su Continua per mantenere le impostazioni o su Indietro per disattivare le funzionalità IA.

  3. Seleziona il tipo di area di lavoro che vuoi creare:

    • Modelli: crea un'area di lavoro precaricata con i file e i pacchetti di base di cui potresti aver bisogno. Seleziona uno dei modelli in primo piano o fai clic su Visualizza tutti i modelli per un elenco completo dei framework, delle API e delle lingue disponibili. Puoi anche trovare il modello Area di lavoro vuota nella raccolta dei modelli.
    • Repository GitHub: seleziona Importa un repository per clonare un repository GitHub nella tua area di lavoro.

Modelli

La pagina della libreria di modelli IDX che mostra i modelli web disponibili

  1. Sfoglia i modelli per tipo di applicazione o utilizza la casella di ricerca in alto a destra per filtrare l'intera libreria di modelli per parola chiave. Il modello Area di lavoro vuota è disponibile nella categoria Varie.

  2. Inserisci un nome per lo spazio di lavoro e imposta eventuali opzioni aggiuntive.

  3. Fai clic su Crea. IDX crea una nuova area di lavoro in base alle selezioni.

Aggiungiamo sempre nuovi modelli, quindi continua a controllare o comunicaci cosa vuoi vedere.

Importazione GitHub

  1. Inserisci l'URL repository.

  2. Fai clic su Crea. IDX crea una nuova area di lavoro in base alle selezioni.

  3. Esegui l'autenticazione in GitHub dopo il caricamento dell'area di lavoro.

  4. Esegui npm install (o flutter pub get) nel terminale IDX dopo l'importazione del progetto. Per impostazione predefinita, IDX non installa le dipendenze npm quando importi un progetto.

Configura la tua area di lavoro

IDX utilizza Nix per definire la configurazione dell'ambiente per ogni area di lavoro. Nix è un gestore di pacchetti puramente funzionale e assegna identificatori univoci a ciascuna dipendenza, il che significa che il tuo ambiente può contenere più versioni della stessa dipendenza senza problemi. È riproducibile e dichiarativa. Nel contesto di IDX, questo significa che puoi condividere il file di configurazione Nix tra le aree di lavoro per caricare la stessa configurazione dell'ambiente. Scopri di più su Nix + IDX.

Crea o modifica il file .idx/dev.nix

La configurazione dell'ambiente è definita nel file .idx/dev.nix del tuo repository di codice. Questo file consente di specificare i pacchetti installati, le variabili di ambiente e le estensioni Code OSS.

Vedi il file .idx/dev.nix di esempio che segue per la configurazione di un ambiente di lavoro di base che consente le anteprime delle app in 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";
      };
    };
  };
}

Applica nuova configurazione

Ogni volta che aggiungi o aggiorni il file di configurazione dev.nix, IDX mostra un prompt nell'angolo in basso a destra per Ricreare l'ambiente. Il tempo necessario per ricreare l'ambiente dipende dal numero di pacchetti richiesti dalla configurazione.

Debug degli errori di build dell'ambiente

Poiché i file di configurazione sono codici leggibili dalle macchine, possono presentare errori. In questo caso, l'ambiente potrebbe non riuscire a creare e non avviarsi. IDX mostra un'opzione per avviare un ambiente di recupero. Quest'area di lavoro non include nessuna delle configurazioni che hai definito e esegue solo il programma Code OSS di base. Questo ti offre la possibilità di correggere gli errori nel file di configurazione dev.nix e ricreare l'ambiente.

IDX alla fine rileverà errori di build dell'ambiente. Per il momento, devi risolvere i problemi in autonomia.

Passaggi successivi