Inizia a utilizzare Firebase Data Connect

In questa guida rapida imparerai a:

  • Aggiungi Firebase Data Connect al tuo progetto Firebase.
  • Configura un ambiente di sviluppo che includa Visual Studio Estensione di codice che funziona con un'istanza di produzione.
  • Poi ti mostreremo come:
    • Crea uno schema per un'app email ed esegui il deployment in produzione.
    • Definisci query e mutazioni per lo schema.
    • Esegui il deployment dello schema, della query e dei dati finali in produzione.

Prerequisiti

Per utilizzare questa guida rapida, devi disporre di quanto segue.

Eseguire la connessione al progetto Firebase

  1. Se non l'hai già fatto, crea un progetto Firebase.
    1. Nella console Firebase, fai clic su Aggiungi progetto, quindi segui le istruzioni sullo schermo.
  2. Esegui l'upgrade del tuo progetto al piano Blaze. In questo modo puoi creare un cluster Cloud SQL per PostgreSQL.

  3. Vai alla sezione Data Connect della console Firebase e segui il flusso di lavoro di configurazione del prodotto.

  4. Seleziona una località per il database Cloud SQL per PostgreSQL.

  5. Prendi nota dei nomi e degli ID di progetto, servizio e database per la conferma in un secondo momento.

  6. Segui il flusso di configurazione rimanente, quindi fai clic su Fine.

Scegliere e configurare un ambiente di sviluppo

Data Connect supporta due esperienze di sviluppo per la prototipazione:

  • Se sei uno sviluppatore Kotlin Android, iOS o web, puoi utilizzare Sviluppo di VS Code per progettare e testare schemi e operazioni localmente, mentre e la connessione all'istanza Cloud SQL per PostgreSQL.
  • Se sei uno sviluppatore web, puoi utilizzare Sviluppo IDX per sviluppare in un'area di lavoro IDX utilizzando un modello IDX preconfigurato con PostgreSQL Estensione VS Code con emulatore Data Connect e codice di avvio rapido configurarli per te. Troverai ulteriori informazioni nel Sito IDX del progetto.

Questa guida rapida si concentra sul flusso di sviluppo delle estensioni di VS Code. Per continuare:

  1. Crea una nuova directory per il progetto locale.
  2. Apri VS Code nella nuova directory.
  3. Scarica l'estensione, inclusa in un pacchetto VSIX, da Firebase Storage.

  4. In VS Code, seleziona Estensioni dal menu Visualizza.

  5. Nella barra del titolo del riquadro Estensioni, fai clic sull'icona del menu more_horiz e poi segui Installa da VSIX….

Se vuoi, puoi installare un database PostgreSQL locale per lo sviluppo locale con l'emulatore Data Connect. Questa configurazione è descritta alla fine di questa guida rapida.

Configura il progetto locale

Installa l'interfaccia a riga di comando seguendo le istruzioni normali. Se hai npm già installata, esegui questo comando:

npm install -g firebase-tools

Configura la directory del progetto

Per configurare il progetto locale, inizializza la directory del progetto.

Nel riquadro di sinistra di VS Code, fai clic sull'icona di Firebase per aprire lo strumento Firebase VS. UI dell'estensione di codice.

Nell'interfaccia utente dell'estensione Firebase:

  1. Assicurati di aver eseguito l'accesso.
  2. Fai clic sul pulsante Esegui Firebase init.
  3. Controlla la scheda Terminale nel riquadro inferiore di VS Code per verificare la presenza di prompt.
  4. Seleziona Data Connect come funzionalità da utilizzare in questa directory.
  5. Quando richiesto, fornisci gli ID progetto, servizio e database del Data Connect progetto che hai creato in precedenza nella console.

Crea uno schema

Nella directory del progetto Firebase, nel file /dataconnect/schema/schema.gql, inizia a definire uno schema GraphQL che includa utenti ed email.

Utente

In Data Connect, i campi GraphQL vengono mappati alle colonne. Gli utenti hanno un uid, un name e un'email address. Data Connect riconosce diversi tipi di dati primitivi: String e Date.

Copia il seguente snippet o rimuovi il commento dalle righe corrispondenti nel file.

# File `/dataconnect/schema/schema.gql`

type User @table(key: "uid") {
   uid: String!
   name: String!
   address: String!
}

Per impostazione predefinita, Firebase Data Connect aggiungerà una chiave UUID id se non viene fornita. In questo caso, però, vuoi che uid sia la chiave primaria, che che puoi eseguire con l'istruzione @table(key: "uid").

Email

Ora che hai utenti, puoi creare un modello di email. Qui puoi aggiungere i campi (o le colonne) tipici per i dati email. Questa volta, ometteremo l'aggiunta di una chiave primaria perché puoi fare affidamento su Data Connect per gestirla.

# File `/dataconnect/schema/schema.gql`

type Email @table {
   subject: String!
   sent: Date!
   text: String!
   from: User!
}

Nota che il campo from è mappato a un tipo di User. Data Connect è consapevole che si tratta di un rapporto tra Email e User e gestirà questo rapporto per te.

Esegui il deployment dello schema in produzione

Se utilizzi l'estensione Firebase VS Code per lavorare con il database di produzione, devi eseguire il deployment dello schema prima di continuare. Dopo aver eseguito il deployment dello schema nel database di produzione, dovresti essere in grado di visualizzarlo nella console.

  1. Per il deployment, puoi utilizzare l'estensione Firebase VS Code.
    • Nell'interfaccia utente dell'estensione, fai clic su Esegui il deployment nel riquadro Firebase Data Connect.
  2. Potresti dover esaminare le modifiche allo schema e approvare le modifiche potenzialmente distruttive modifiche. Ti verrà chiesto di:
    • Esamina le modifiche allo schema utilizzando firebase dataconnect:sql:diff
    • Quando le modifiche ti soddisfano, applicale utilizzando il flusso avviato da firebase dataconnect:sql:migrate.

Aggiungere dati alle tabelle

Nel riquadro dell'editor di VS Code, puoi vedere i pulsanti CodeLens sopra i tipi GraphQL in /dataconnect/schema/schema.gql. Poiché hai eseguito il deployment lo schema in produzione, puoi utilizzare le opzioni Aggiungi dati ed Esegui (produzione) consentono di aggiungere dati al database nel backend.

Per aggiungere record alle tabelle User e Email:

  1. In schema.gql, fai clic sul pulsante Aggiungi dati sopra il tipo User dichiarazione.
    Pulsante Aggiungi dati di Code Lens per Firebase Data Connect
  2. Nel file User_insert.gql generato, inserisci i dati hardcoded per i tre campi.
  3. Fai clic sul pulsante Esegui (produzione).
    Pulsante Esegui di Code Lens per Firebase Data Connect
  4. Ripeti i passaggi precedenti per aggiungere un record alla tabella Email, fornendo il uid dell'utente nel campo fromUid, come richiesto nella Mutazione Email_insert.

Definisci la query

E ora la parte divertente: le query. In qualità di sviluppatore, sei abituato a scrivere codice SQL anziché GraphQL, quindi all'inizio può sembrare un po' diverso. Tuttavia, GraphQL è molto più conciso e sicuro dal punto di vista del tipo rispetto a SQL non elaborato. La nostra estensione VS Code semplifica l'esperienza di sviluppo.

Inizia a modificare il file /dataconnect/connector/queries.gql. Se vuoi per ricevere tutte le email, usa una query come questa.

# File `/dataconnect/connector/queries.gql`

query ListEmails @auth(level: NO_ACCESS) {
  emails {
    id, subject, text, sent
    from {
      name
    }
  }
}

Esegui la query utilizzando il pulsante CodeLens nelle vicinanze.

Una funzionalità davvero entusiasmante qui è la possibilità di trattare relazioni come un grafico. Poiché un'email ha un campo from che fa riferimento a un Utenti, puoi nidificare il campo e recuperare le informazioni sull'utente.

Esegui il deployment dello schema e della query in produzione

Hai elaborato un'iterazione di sviluppo. Ora puoi eseguire il deployment schema, dati e query al server con Firebase l'interfaccia utente dell'estensione o l'interfaccia a riga di comando Firebase, proprio come hai fatto con lo schema (#schema-deployment).

Se utilizzi l'estensione Firebase VS Code per il deployment, fai clic sul pulsante Esegui il deployment .

Una volta eseguito il deployment, dovresti essere in grado di visualizzare ed eseguire le operazioni anche nella console. Il tuo servizio Data Connect sarà pronto per elaborare le operazioni da parte dei clienti. L'istanza Cloud SQL per PostgreSQL verrà aggiornata con lo schema e i dati generati di cui è stato eseguito il deployment finale.

(Facoltativo) Installa PostgreSQL in locale

L'installazione di PostgreSQL localmente e l'integrazione con l'emulatore ti consente di creare un prototipo in un ambiente di sviluppo completamente locale.

Puoi installare una nuova istanza di PostgreSQL o utilizzare un'istanza esistente.

Installa PostgreSQL

Installa PostgreSQL versione 15.x seguendo le istruzioni per la tua piattaforma.

Prendi nota del nome host, della porta, del nome utente e della password e dei parametri correlati visualizzati durante la sequenza di installazione.

Per connettersi alla tua istanza PostgreSQL, l'emulatore ha bisogno di:

  • Questi parametri di configurazione
  • Il nome del database da dataconnect.yaml e un nome inizializzato nell'istanza locale.

Utilizzare l'istanza PostgreSQL locale

Puoi utilizzare un'istanza PostgreSQL locale esistente aggiornando le impostazioni dell'emulatore Data Connect.

firebase setup:emulators:dataconnect

Quando richiesto, inserisci la stringa di connessione PostgreSQL in questo formato: postgresql://postgresusername:postgrespassword@localhost:5432/postgresdatabase?sslmode=disable.

Per ulteriori informazioni sulla stringa di connessione, consulta Documentazione di PostgreSQL.

Connettiti all'istanza PostgreSQL locale

Una volta completata questa configurazione, per connetterti al database locale:

  1. In VS Code, nel riquadro di sinistra, fai clic sull'icona di Firebase per aprire la UI dell'estensione Firebase VS Code.
  2. Fai clic sul pulsante Connetti a PostgreSQL locale.

Passaggi successivi