Crea un pulsante per importare il codice in Firebase Studio

Aggiungi un pulsante "Apri in Firebase Studio" al tuo sito web per consentire agli utenti di importare il codice dal tuo sito direttamente in un workspace di Firebase Studio, in modo che possano continuare a lavorare in un ambiente di sviluppo basato sul cloud.

Questa funzionalità è progettata per:

• Playground 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 sito genera il codice e il prototipo visivo e l'utente può iterare su di esso 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 popolare un nuovo workspace. Fornisce 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 da un modello: link a un repository Git o a un Firebase Studio modello. È ideale per progetti completi o modelli predefiniti. Per ulteriori informazioni su questi casi d'uso, consulta Creare una scorciatoia a un workspace predefinito in Firebase Studio.

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

Aggiungere il pulsante "Apri in Firebase Studio" al sito

L'SDK Apri 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 Firebase Studio workspace.

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 codice per importare la libreria:

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

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

Informazioni sugli ambienti dei workspace

Quando un utente crea un workspace 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 baselineEnvironment proprietà all'interno dell'oggetto settings. Ciò significa che quando un utente apre il link in Firebase Studio, Firebase Studio crea il workspace 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 dell'applicazione e interagire direttamente con il codice.

Ambiente generico

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

• Installare i runtime e le dipendenze della lingua.
• Configurare il dev.nix file.

Per questi progetti, Firebase Studio crea un ambiente non personalizzato, dando all'utente il controllo completo sulla procedura di configurazione.

Esperienza utente

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

Quando l'utente fa clic su Importa, si apre un nuovo Firebase Studio workspace. 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 il seguente strumento 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 visualizzata 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
• Informazioni su come personalizzare un Firebase Studio workspace