Inizia a utilizzare Firebase Data Connect con Flutter

In questa guida rapida, creerai e implementerai un piccolo database di esempio e vi accederai da un frontend Flutter.

Prerequisiti

Per completare questa guida rapida, avrai bisogno di:

• Un ambiente con i seguenti strumenti installati:
  • Node.js con un gestore di pacchetti a tua scelta. Questo tutorial presuppone npm.
  • L'interfaccia a riga di comando di Firebase:

    npm i -g firebase-tools@latest

  • Lo strumento a riga di comando Flutter.
  • L'interfaccia a riga di comando FlutterFire

    dart pub global activate flutterfire_cli

• Un Account Google.

Tutorial

mkdir myproj ; cd myproj
firebase login --reauth
firebase init dataconnect

type Movie @table {
  title: String!
  imageUrl: String!
  genre: String
}

type MovieMetadata @table {
  movie: Movie! @unique
  rating: Float
  releaseYear: Int
  description: String
}

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

firebase deploy --only dataconnect

firebase dataconnect:execute dataconnect/seed_data.gql

firebase dataconnect:sdk:generate

class ExampleConnector {
  ListMoviesVariablesBuilder listMovies() {
    return ListMoviesVariablesBuilder(dataConnect);
  }

  // ...
}

cd flutter_app
flutter pub add firebase_core firebase_data_connect
flutterfire configure

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_data_connect/firebase_data_connect.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/dataconnect_generated/generated.dart';
import 'package:flutter_app/firebase_options.dart';

class MyApp extends StatelessWidget {
  late final Future<QueryResult<ListMoviesData, void>>
  _movieListFuture;

  MyApp({super.key}) {
    _movieListFuture = ExampleConnector.instance
        .listMovies()
        .execute();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FutureBuilder(
        future: _movieListFuture,
        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 ?? 0,
            );
          }
          return const CircularProgressIndicator();
        },
      ),
    );
  }
}

Future<void> main() async {
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(MyApp());
}

flutter run

Passaggi successivi

Prova l'estensione Visual Studio Code

Quando sviluppi con Data Connect, ti consigliamo vivamente di utilizzare l'estensione Visual Studio Code. Anche se non utilizzi Visual Studio Code come ambiente di sviluppo principale, l'estensione fornisce diverse funzionalità che rendono più comodo lo sviluppo di schemi e operazioni:

• Un server di linguaggio GraphQL che fornisce il controllo della sintassi e suggerimenti di completamento automatico specifici per Data Connect
• Pulsanti CodeLens in linea con il codice che ti consentono di leggere e scrivere dati dai file di definizione dello schema ed eseguire query e mutazioni dalle definizioni delle operazioni.
• Mantieni sincronizzati automaticamente gli SDK generati con le definizioni GraphQL.
• Configurazione semplificata dell'emulatore locale.
• Deployment semplificato in produzione.

Utilizza l'emulatore Data Connect per lo sviluppo locale

Anche se questo tutorial ti ha mostrato come eseguire il deployment di schemi e operazioni Data Connect direttamente in produzione, probabilmente non vorrai apportare modifiche al database di produzione mentre sviluppi attivamente la tua app. Configura invece l'emulatore Data Connect e svolgi il lavoro di sviluppo su questo emulatore anziché sulla produzione. L'emulatore configura un'istanza PGlite locale che si comporta in modo simile a un'istanza Postgres live su CloudSQL.

Scopri come scrivere schemi e operazioni per la tua app

Quando sviluppi app con Data Connect, la progettazione degli schemi e delle operazioni è una delle prime e più importanti attività di sviluppo che completerai.

• Gemini nella console Firebase è uno strumento di AI che può generare schemi Data Connect da una descrizione in linguaggio naturale della tua app. Questo strumento può aiutarti a iniziare molto rapidamente, soprattutto se non hai mai lavorato con database relazionali.
• In alternativa, puoi scrivere schemi di database, query e mutazioni direttamente utilizzando GraphQL. Inizia dalla pagina Schemi Data Connect di progettazione e continua con le pagine successive per scoprire come scrivere le operazioni.