Crea un pulsante per importare il codice in Firebase Studio

Aggiungi un pulsante "Apri in Firebase Studio" al tuo sito web per offrire agli utenti un modo semplice per importare il codice dal tuo sito direttamente in uno spazio di lavoro Firebase Studio, consentendo loro di continuare a lavorare in un ambiente di sviluppo basato sul cloud.

Questa funzionalità è progettata per:

• Sandbox di codice, in cui gli utenti possono passare da un editor di base a un ambiente di sviluppo completo.

• Strumenti di prototipazione di app, in cui il tuo sito genera il codice e il prototipo visivo e l'utente lo itera in Firebase Studio.

Utilizzare l'SDK Apri in Firebase Studio

Il pulsante "Apri in Firebase Studio" è basato sull'SDK Apri in Firebase Studio, una libreria JavaScript che genera i link appropriati per creare e compilare un nuovo spazio di lavoro. Offre diverse opzioni per l'importazione del codice.

Metodi di importazione

Puoi configurare il pulsante per importare il codice utilizzando i seguenti metodi:

• Da un repository Git o un modello: link a un repository Git o a un modello Firebase Studio. Questa opzione è ideale per progetti completi o modelli predefiniti. Per saperne di più su questi casi d'uso, consulta Creare una scorciatoia a uno spazio di lavoro predefinito in Firebase Studio.

• Da un insieme di file di progetto: crea dinamicamente uno spazio di lavoro da un insieme di file e snippet di codice direttamente dalla tua applicazione web. Questa è l'opzione più potente per i playground di codice e i prototipatori di app, in quanto esporta il lavoro corrente dell'utente, anche se non è salvato altrove.

Aggiungere il pulsante "Apri in Firebase Studio" al tuo sito

L'SDK Open in Firebase Studio: fornisce tutto il necessario, incluse le funzioni di assistenza per generare immagini dei pulsanti, creare link diretti e inviare contenuti dei file per creare workspace Firebase Studio.

Per aggiungere il pulsante "Apri in Firebase Studio" al tuo sito web:

1. Installa il pacchetto nella directory del progetto:

   npm install @firebase-studio/open-sdk
   

2. Aggiungi quanto segue al tuo codice per importare la libreria:

   import * as FirebaseStudio from '@firebase-studio/open-sdk';
   

Per istruzioni dettagliate, esempi di codice e il riferimento completo all'API, consulta la documentazione ufficiale dell'SDK.

Informazioni sugli ambienti di workspace

Quando un utente crea uno spazio di lavoro dal tuo sito, Firebase Studio configura l'ambiente di sviluppo per lui. Il livello di automazione dipende dal tipo di progetto.

Ambiente ottimizzato

Per i progetti React, Angular e HTML semplici, Firebase Studio fornisce un ambiente ottimizzato e preconfigurato, a condizione che il chiamante imposti correttamente la proprietà baselineEnvironment all'interno dell'oggetto settings. Ciò significa che quando un utente apre il link in Firebase Studio, Firebase Studio crea lo spazio di lavoro e automaticamente:

• Installa tutte le dipendenze necessarie.
• Configura e avvia il server di sviluppo corretto.
• Configura l'ambiente con gli strumenti e le estensioni corretti.

Si apre un ambiente in cui gli utenti possono visualizzare un'anteprima live della tua applicazione e interagire direttamente con il codice.

Ambiente generico

Per tutti gli altri tipi di progetti, Firebase Studio utilizza un importatore generico. Carica i file nello spazio di lavoro, ma l'utente deve eseguire la configurazione iniziale manualmente. Potrebbe essere necessario:

• Installa i runtime e le dipendenze dei linguaggi.
• Configura il file dev.nix.

Per questi progetti, Firebase Studio crea un ambiente non personalizzato, che consente all'utente di controllare completamente la procedura di configurazione.

Esperienza utente

Per entrambi i tipi di spazi di lavoro, dopo che un utente fa clic sul pulsante "Apri in Firebase Studio", gli viene chiesto di assegnare un nome al proprio spazio di lavoro e di rivedere l'elenco dei file da importare.

Quando l'utente fa clic su Importa, si apre un nuovo spazio di lavoro Firebase Studio. Contiene i file di progetto, un'anteprima dell'app e un file README con i passaggi successivi.

Progettare un pulsante "Apri in Firebase Studio"

Puoi progettare il pulsante utilizzando l'SDK Apri in Firebase Studio o utilizzare lo strumento seguente per generare il codice HTML per un pulsante Firebase Studio:

Se utilizzi l'SDK, puoi includere proprietà di configurazione facoltative per il pulsante:

• label: imposta l'etichetta di testo mostrata sul pulsante.
  • Valori consentiti: open, try, export o continue.
• color: definisce la combinazione di colori del pulsante.
  • Valori consentiti: dark, light, blue o bright.
• size: specifica l'altezza del pulsante in pixel.
  • Valori consentiti: 20 o 32.
• imageFormat: determina il formato del file dell'immagine generata.
  • Valori consentiti: svg o png.

Ad esempio:

img.src = FirebaseStudio.getButtonImageUrl({
  label: 'export',
  color: 'dark',
  size: 32,
  imageFormat: 'svg'
});

Passaggi successivi

• Installa l'SDK Apri in Firebase Studio
• Scopri come personalizzare uno spazio di lavoro Firebase Studio