Inizia a utilizzare Firebase Data Connect localmente

Nota: Firebase Data Connect è in anteprima pubblica. Data Connect sarà soggetto ai "Termini delle offerte pre-GA" nella sezione Termini specifici dei servizi dei Termini di servizio della piattaforma Google Cloud. Funzionalità pre-GA disponibili "così com'è" e potrebbero avere un supporto limitato. Per ulteriori informazioni, consulta descrizioni della fase di lancio.

In questa guida rapida imparerai a creare Firebase Data Connect in della tua applicazione in locale senza configurare un'istanza SQL di produzione.

Nota: segui questa guida rapida locale se vuoi provare Data Connect con un progetto di piano Spark. In questa guida, scoprirai prototipazione locale con un emulatore e un database locale. Se invece vuoi aggiungere Data Connect a un progetto Blaze Plan e configurare un servizio e un database Cloud SQL, prova la guida introduttiva alla produzione.

• Aggiungi Firebase Data Connect al tuo progetto Firebase.
• Configura un ambiente di sviluppo che includa Visual Studio Estensione di codice per funzionare con un'istanza locale.
• Ti mostreremo come:
  • Creare uno schema di un'app di film
  • Definisci query e mutazioni che verranno utilizzate nella tua app
  • Testa le query e le mutazioni con dati di esempio rispetto a un emulatore locale
  • Genera SDK fortemente tipizzati e utilizzali nella tua app
  • Esegui il deployment dello schema, delle query e dei dati finali nel cloud (facoltativo, è necessario un piano Blaze).

Prerequisiti

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

• Linux, macOS o Windows
• Visual Studio Code
• Installa Node.js utilizzando nvm-windows per Windows o nvm per macOS o Linux.
• Se non l'hai già fatto, crea un progetto Firebase nella Console Firebase.

Configura l'ambiente di sviluppo

Per gestire lo schema e definire le query che verranno utilizzate nella tua applicazione, avrai bisogno di Visual Studio Code. Verrà generato automaticamente un SDK fortemente tipizzato:

1. Crea una nuova directory per il tuo progetto locale.
2. Apri VS Code nella nuova directory.
3. Installa l'estensione Firebase Data Connect dal Visual Studio Marketplace.

Configura la directory del progetto

Per configurare il progetto locale, inizializza la directory del progetto. Nel riquadro a sinistra di VS Code, fai clic sull'icona di Firebase per aprire l'interfaccia utente dell'estensione Data Connect di VS Code:

1. Fai clic sul pulsante Accedi con Google.
2. Fai clic sul pulsante Collega un progetto Firebase e seleziona il progetto che hai creato in precedenza nella console.
3. Fai clic sul pulsante Esegui Firebase init.

4. Fai clic sul pulsante Avvia emulatori.

   Nota: nel terminale integrato, verifica che gli emulatori configurati si avviino. Una volta eseguite, l'interfaccia utente delle estensioni dovrebbe essere aggiornata con dettagli dell'emulatore.

Crea uno schema

Nella directory del progetto Firebase, nel file /dataconnect/schema/schema.gql , inizia a definire uno schema GraphQL per i film.

Film

In Data Connect, i campi GraphQL sono mappati alle colonne. Il film ha id, title, imageUrl e genre. Data Connect riconosce i tipi di dati primitivi: String e UUID.

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

# By default, a UUID id key will be created by default as primary key.
# If you want to specify a primary key, say title, which you can do through
# the @table(key: "title") directive
type Movie @table {
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

MovieMetadata

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

# Movie - MovieMetadata is a one-to-one relationship
type MovieMetadata @table {
  # This time, we omit adding a primary key because
  # you can rely on Data Connect to manage it.

  # @unique indicates a 1-1 relationship
  movie: Movie! @unique
  # movieId: UUID <- this is created by the above reference
  rating: Float
  releaseYear: Int
  description: String
}

Nota che il campo movie è mappato a un tipo di Movie. Data Connect comprende che si tratta di una relazione tra Movie e MovieMetadata e gestirà questa relazione per te.

Scopri di più sugli schemi Data Connect nella documentazione

Aggiungere dati alle tabelle

Nel pannello dell'editor di VS Code, vedrai i pulsanti CodeLens apparire sopra Tipi di GraphQL in /dataconnect/schema/schema.gql. Puoi utilizzare i pulsanti Aggiungi dati e Esegui (locale) per aggiungere dati al database locale.

Per aggiungere record alle tabelle Movie e MovieMetadata:

1. In schema.gql, fai clic sul pulsante Aggiungi dati sopra la dichiarazione del tipo Movie.
   
2. Nel file Movie_insert.gql generato, inserisci i dati hardcoded per i tre campi.
3. Fai clic sul pulsante Esegui (locale).
   
4. Ripeti i passaggi precedenti per aggiungere un record alla tabella MovieMetadata, inserendo il uid del tuo filmato nel campo movie, come richiesto in ha generato la mutazione MovieMetadata_insert.

Per verificare rapidamente che i dati siano stati aggiunti:

1. Torna in schema.gql e fai clic sul pulsante Leggi dati.
2. Nel file Movie_read.gql risultante, fai clic sul pulsante Esegui (locale) per eseguire la query.

Scopri di più sulle mutazioni di Data Connect nella documentazione

Definisci la query

Ora la parte divertente: definiamo le query di cui avrai bisogno nell'applicazione. In qualità di sviluppatore, sei abituato a scrivere query SQL anziché GraphQL query, quindi all'inizio può sembrare un po' diverso. Tuttavia, GraphQL è molto più conciso e sicuro per 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 recuperare tutti i film, utilizza una query come questa.

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

# @auth() directives control who can call each operation.
# Anyone should be able to list all movies, so the auth level is set to PUBLIC
query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

Esegui la query utilizzando il pulsante CodeLens nelle vicinanze.

Una funzionalità davvero entusiasmante qui è la possibilità di trattare relazioni come un grafico. Poiché MovieMetadata ha un campo movie che riferimento a un film, puoi nidificare nel campo e ottenere informazioni informazioni sul film. Prova ad aggiungere il tipo movieMetadata_on_movie generato alla query ListMovies.

query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
    movieMetadata_on_movie {
        rating
    }
  }
}

Scopri di più sulle query Data Connect nella documentazione

Genera SDK e utilizzali nella tua app

Nel riquadro a sinistra di VS Code, fai clic sull'icona di Firebase per aprire l'UI dell'estensione Data Connect di VS Code:

1. Fai clic sul pulsante Aggiungi SDK all'app.

2. Nella finestra di dialogo visualizzata, seleziona una directory contenente il codice per la tua app. Data Connect. verrà generato il codice SDK salvato in quest'ultima.

   Nota: se non hai ancora una directory per le app, per il momento puoi creare e selezionare una nuova directory per il codice SDK e collegarla alla tua app in un secondo momento.

3. Seleziona la piattaforma della tua app, quindi tieni presente che il codice SDK viene generato immediatamente nella directory selezionata.

Scopri come utilizzare l'SDK generato per chiamare query e mutazioni dal client di app (web, Android, iOS, Flutter).

Esegui il deployment dello schema e della query in produzione

Una volta completata la configurazione locale nell'app, puoi eseguire il deployment di schema, dati e query nel cloud. Per configurare un'istanza Cloud SQL, devi disporre del piano Blaze.

1. Vai alla sezione Data Connect della console Firebase e crea un'istanza Cloud SQL di prova gratuita.

   Nota: il provisioning dell'istanza Cloud SQL per PostgreSQL può richiedere fino a 15 minuti. Non potrai eseguire il deployment finché l'istanza non sarà pronta.

2. Nel Terminal integrato di VS Code, esegui firebase init dataconnect e seleziona l'ID regione/servizio che hai appena creato nella console.

3. Seleziona "Y" quando viene visualizzato il messaggio "Il file dataconnect/dataconnect.yaml esiste già. Vuoi sovrascriverlo?".

4. Nell'interfaccia utente dell'estensione VS Code di Data Connect, fai clic sul pulsante Esegui il deployment in produzione.

5. Una volta eseguito il deployment, vai alla console Firebase per verificare che schema, operazioni e dati siano stati caricati nel cloud. Dovresti essere in grado di visualizzare lo schema ed eseguire le operazioni anche nella console. L'istanza Cloud SQL per PostgreSQL verrà aggiornata con la sua versione di cui è stato eseguito il deployment dello schema e dei dati generati.

Passaggi successivi

Esamina il progetto di cui è stato eseguito il deployment e scopri altri strumenti:

• Aggiungi dati al tuo database, ispeziona e modifica gli schemi e monitora Servizio Data Connect nella console Firebase.

Accedi a ulteriori informazioni nella documentazione. Ad esempio, poiché hai completato la guida rapida:

• Scopri di più sullo sviluppo di schemi, query e mutazioni
• Scopri come generare SDK client e chiamare query e mutazioni da codice client per web, Android e iOS e Flutter.