In questa guida rapida, imparerai a creare Firebase Data Connect nella tua applicazione con un'istanza SQL di produzione. Imparerai a:
- Aggiungi Firebase Data Connect al tuo progetto Firebase.
- Esegui il provisioning di un'istanza Cloud SQL per la tua app.
- Configura un ambiente di sviluppo che includa un'estensione di Visual Studio Code per lavorare con un'istanza di produzione.
- Ti mostreremo come:
- Creare uno schema per un'app di film
- Definisci le query e le mutazioni che verranno utilizzate nella tua app
- Prova le query e le mutazioni con dati di esempio
- Genera SDK fortemente tipizzati e utilizzali nella tua app
- Esegui il deployment dello schema, delle query e dei dati finali nel cloud.
Crea un progetto Firebase e un database Cloud SQL
- Se non l'hai ancora fatto, crea un progetto Firebase.
- Nella console Firebase, fai clic su Aggiungi progetto, quindi segui le istruzioni sullo schermo.
- Vai alla sezione Data Connect della console Firebase e segui il flusso di lavoro di configurazione del prodotto.
Esegui l'upgrade del progetto al piano Blaze. In questo modo puoi creare un'istanza Cloud SQL per PostgreSQL.
Seleziona una posizione per il tuo database Cloud SQL per PostgreSQL.
Prendi nota dei nomi e degli ID di progetto, servizio e database per la conferma in un secondo momento.
Segui la procedura di configurazione rimanente e poi fai clic su Fine.
Scegli un flusso di sviluppo
Data Connect offre due modi per installare gli strumenti di sviluppo.
Configura l'ambiente di sviluppo
- Crea una nuova directory per il progetto locale.
Esegui il seguente comando nella nuova directory creata.
curl -sL https://firebase.tools/dataconnect | bash
Questo script tenta di configurare l'ambiente di sviluppo e di avviare un IDE basato su browser. Questo IDE fornisce strumenti, inclusa un'estensione VS Code precompilata, per aiutarti a gestire lo schema e a definire query e mutazioni da utilizzare nella tua applicazione, nonché a generare SDK fortemente tipizzati.
alias dataconnect='curl -sL https://firebase.tools/dataconnect | bash'
Configura la directory del progetto
Per configurare il progetto locale, inizializza la directory del progetto. Nella finestra IDE, nel riquadro a sinistra, fai clic sull'icona di Firebase per aprire l'interfaccia utente dell'estensione VS Code di Data Connect:
- Fai clic sul pulsante Accedi con Google.
- Fai clic sul pulsante Collega un progetto Firebase e seleziona il progetto che hai creato in precedenza nella console.
- Fai clic sul pulsante Esegui firebase init e completa il flusso.
Fai clic sul pulsante Avvia emulatori.
Crea uno schema
Nella directory del progetto Firebase, nel file /dataconnect/schema/schema.gql
, inizia a definire uno schema GraphQL che includa i film.
Film
In Data Connect, i campi GraphQL vengono mappati alle colonne. Il tipo Movie
contiene id
, title
, imageUrl
e genre
. Data Connect
riconosce i tipi di dati primitivi String
e UUID
.
Copia lo snippet seguente o rimuovi il commento dalle righe corrispondenti nel file.
# File `/dataconnect/schema/schema.gql`
# By default, a UUID id key will be created by default as primary key.
type Movie @table {
id: UUID! @default(expr: "uuidV4()")
title: String!
imageUrl: String!
genre: String
}
MovieMetadata
Ora che hai i film, puoi modellare i metadati dei film.
Copia lo snippet seguente 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
}
Tieni presente che il campo movie
è mappato a un tipo di Movie
.
Data Connect è consapevole che si tratta di un rapporto tra Movie
e MovieMetadata
e gestirà questo rapporto per te.
Scopri di più sugli schemi di Data Connect nella documentazione
Esegui il deployment dello schema in produzione
Devi eseguire il deployment dello schema prima di continuare.
Nell'interfaccia utente dell'estensione, fai clic su Esegui il deployment in produzione nel riquadro Firebase Data Connect.
Dopo aver eseguito il deployment dello schema nel database di produzione, dovresti essere in grado di visualizzarlo nella console Firebase.
Aggiungere dati alle tabelle
Nel riquadro dell'editor IDE, puoi vedere i pulsanti CodeLens sopra i tipi GraphQL in /dataconnect/schema/schema.gql
. Poiché hai eseguito il deployment
del tuo schema in produzione, puoi utilizzare i pulsanti Aggiungi dati e
Esegui (produzione) per aggiungere dati al database sul backend.
Per aggiungere record alla tabella Movie
:
- In
schema.gql
, fai clic sul pulsante Aggiungi dati sopra la dichiarazione del tipoMovie
.
- Nel file
Movie_insert.gql
generato, inserisci i dati hardcoded per i quattro campi. - Fai clic sul pulsante Esegui (produzione).
- Ripeti i passaggi precedenti per aggiungere un record alla tabella
MovieMetadata
, fornendo ilid
del film nel campomovieId
, come richiesto nella mutazioneMovieMetadata_insert
generata.
Per verificare rapidamente che i dati siano stati aggiunti:
- Torna in
schema.gql
e fai clic sul pulsante Leggi dati sopra la dichiarazione di tipoMovie
. - Nel file
Movie_read.gql
risultante, fai clic sul pulsante Esegui (produzione) per eseguire la query.
Scopri di più sulle mutazioni di Data Connect nella documentazione
Definire la query
Ora passiamo alla parte divertente, le query. In qualità di sviluppatore, sei abituato a scrivere query SQL anziché query 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 ottenere 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.
Scopri di più sulle query di Data Connect nella documentazione
Genera SDK
- Fai clic sul pulsante Aggiungi SDK all'app.
Nella finestra di dialogo visualizzata, seleziona una directory contenente il codice per la tua app. Il codice dell'SDK Data Connect verrà generato e salvato lì.
Seleziona la piattaforma della tua app, quindi tieni presente che il codice SDK viene generato immediatamente nella directory selezionata.
Esegui il deployment dello schema e della query in produzione
Hai completato un'iterazione di sviluppo. Ora puoi eseguire il deployment di schema, dati e query sul server con l'interfaccia utente dell'estensione Firebase o con l'interfaccia a riga di comando Firebase, proprio come hai fatto con lo schema.
Nella finestra dell'IDE, nell'interfaccia utente dell'estensione VS Code, fai clic sul pulsante Esegui il deployment in produzione.
Una volta eseguito il deployment, vai alla console Firebase per verificare che lo schema, le operazioni e i dati siano stati caricati sul cloud. Dovresti essere in grado di visualizzare lo schema ed eseguire le operazioni anche sulla console. L'istanza Cloud SQL per PostgreSQL verrà aggiornata con lo schema e i dati generati di cui è stato eseguito il deployment finale.
Scopri di più sull'utilizzo dell'emulatore Data Connect nella documentazione
Utilizzare gli SDK per chiamare la query da un'app
Ora che lo schema e la query sono stati di cui è stato eseguito il deployment in produzione, puoi utilizzare lo SDK generato da Data Connect per implementare una chiamata alla query ListMovies
.
- Aggiungi Firebase alla tua app web.
Nel file principale dell'app React:
- Importa l'SDK generato
- chiama i metodi Data Connect.
Puoi copiare il seguente snippet ed eseguirlo come app autonoma.
import React from 'react'; import ReactDOM from 'react-dom/client'; // Generated queries. // Update as needed with the path to your generated SDK. import { listMovies, ListMoviesData } from '@movie-app/movies'; function App() { const [movies, setMovies] = useState<ListMoviesData['movies']>([]); useEffect(() => { listMovies.then(res => setMovies(res.data)); }, []); return ( movies.map(movie => <h1>{movie.title}</h1>); ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />);
- Aggiungi Firebase alla tua app per iOS.
Per utilizzare l'SDK generato, configuralo come dipendenza in Xcode.
Nella barra di navigazione superiore di Xcode, seleziona File > Aggiungi dipendenze del pacchetto > Aggiungi locale e scegli la cartella contenente il file
Package.swift
generato.Nel delegato principale dell'app:
- Importa l'SDK generato
- chiama i metodi Data Connect.
Puoi copiare il seguente snippet ed eseguirlo come app autonoma.
import SwiftUI import FirebaseDataConnect // Generated queries. // Update as needed with the package name of your generated SDK. import <CONNECTOR-PACKAGE-NAME> let connector = DataConnect.moviesConnector struct ListMovieView: View { @StateObject private var queryRef = connector.listMovies.ref() var body: some View { VStack { Button { Task { do { try await refresh() } catch { print("Failed to refresh: \(error)") } } } label: { Text("Refresh") } // use the query results in a view ForEach(queryRef.data?.movies ?? [], id: \.self.id) { movie in Text(movie.title) } } } @MainActor func refresh() async throws { _ = try await queryRef.execute() } struct ContentView_Previews: PreviewProvider { static var previews: some View { ListMovieView() } }
- Aggiungi Firebase alla tua app Android.
Per utilizzare l'SDK generato, configura Data Connect come dipendenza in Gradle.
Aggiorna
plugins
edependencies
inapp/build.gradle.kts
.plugins { // Use whichever versions of these dependencies suit your application. // The versions shown here were the latest as of December 03, 2024. // Note, however, that the version of kotlin("plugin.serialization") must, // in general, match the version of kotlin("android"). id("com.android.application") version "8.7.3" id("com.google.gms.google-services") version "4.4.2" val kotlinVersion = "2.1.0" kotlin("android") version kotlinVersion kotlin("plugin.serialization") version kotlinVersion } dependencies { // Use whichever versions of these dependencies suit your application. // The versions shown here were the latest versions as of December 03, 2024. implementation("com.google.firebase:firebase-dataconnect:16.0.0-beta03") implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.9.0") implementation("org.jetbrains.kotlinx:kotlinx-serialization-core:1.7.3") // These dependencies are not strictly required, but will very likely be used // when writing modern Android applications. implementation("org.jetbrains.kotlinx:kotlinx-coroutines-android:1.9.0") implementation("androidx.appcompat:appcompat:1.7.0") implementation("androidx.activity:activity-ktx:1.9.3") implementation("androidx.lifecycle:lifecycle-viewmodel-ktx:2.8.7") implementation("com.google.android.material:material:1.12.0") }
Nell'attività principale dell'app:
- Importa l'SDK generato
- chiama i metodi Data Connect.
Puoi copiare il seguente snippet ed eseguirlo come app autonoma.
import android.os.Bundle import android.widget.TextView import androidx.appcompat.app.AppCompatActivity import androidx.lifecycle.Lifecycle import androidx.lifecycle.lifecycleScope import androidx.lifecycle.repeatOnLifecycle import kotlinx.coroutines.launch private val connector = com.myapplication.MoviesConnector.instance class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val textView: TextView = findViewById(R.id.text_view) lifecycleScope.launch { lifecycle.repeatOnLifecycle(Lifecycle.State.STARTED) { val result = connector.listMovies.runCatching { execute { } } val newTextViewText = result.fold( onSuccess = { val titles = it.data.movies.map { it.title } "${titles.size} movies: " + titles.joinToString(", ") }, onFailure = { "ERROR: ${it.message}" } ) textView.text = newTextViewText } } } }
- Aggiungi Firebase alla tua app Flutter.
- Installa l'interfaccia a riga di comando flutterfire
dart pub global activate flutterfire_cli
. - Esegui
flutterfire configure
. Nella funzione principale dell'app:
- Importa l'SDK generato
- chiama i metodi Data Connect.
Puoi copiare il seguente snippet ed eseguirlo come app autonoma.
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'firebase_options.dart';
// Generated queries.
// Update as needed with the path to your generated SDK
import 'movies_connector/movies.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(children: [
ConstrainedBox(
constraints: const BoxConstraints(maxHeight: 200),
child: FutureBuilder(
future: MoviesConnector.instance.listMovies().execute(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return ListView.builder(
scrollDirection: Axis.vertical,
itemBuilder: (context, index) => Card(
child: Text(
snapshot.data!.data.movies[index].title,
)),
itemCount: snapshot.data!.data.movies.length,
);
}
return const CircularProgressIndicator();
}),
)
])));
}
}
Passaggi successivi
Esamina il progetto di cui è stato eseguito il deployment e scopri altri strumenti:
Aggiungi dati al database, controlla e modifica gli schemi e monitora il servizio Data Connect nella console Firebase. Per ulteriori informazioni, consulta la 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 dal codice client per web, Android, iOS e Flutter.