Comienza a usar Firebase SQL Connect con Flutter

En esta guía de inicio rápido, crearás y, luego, implementarás una pequeña base de datos de muestra y accederás a ella desde un frontend de Flutter.

Requisitos previos

Para completar esta guía de inicio rápido, necesitarás lo siguiente:

• Un entorno con las siguientes herramientas instaladas:
  • Node.js con un administrador de paquetes de tu elección. En este instructivo, se supone que usas npm.
  • Firebase CLI:

    npm i -g firebase-tools@latest

  • La herramienta de línea de comandos de Flutter.
  • La CLI de FlutterFire

    dart pub global activate flutterfire_cli

• Una Cuenta de Google

Instructivo

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

Próximos pasos

Prueba la extensión de SQL Connect para VS Code

Cuando desarrolles con SQL Connect, te recomendamos que uses la extensión de SQL Connect para VS Code. Incluso si no usas Visual Studio Code como tu entorno de desarrollo principal, la extensión proporciona varias funciones que hacen que el desarrollo de esquemas y operaciones sea más conveniente:

• Un servidor de lenguaje GraphQL que proporciona verificación de sintaxis y sugerencias de autocompletar específicas a SQL Connect
• Botones de CodeLens en línea con tu código que te permiten leer y escribir datos desde tus archivos de definición de esquema y ejecutar consultas y mutaciones desde tus definiciones de operación
• Mantén automáticamente tus SDK generados sincronizados con tus definiciones de GraphQL.
• Configuración simplificada del emulador local
• Implementación simplificada en producción

Usa el SQL Connect emulador para el desarrollo local

Si bien en este instructivo se mostró cómo implementar SQL Connect esquemas y operaciones directamente en producción, es probable que no desees realizar cambios en tu base de datos de producción mientras desarrollas tu app de forma activa. En su lugar, configura el SQL Connect emulador y realiza tu trabajo de desarrollo en él en lugar de en la producción. El emulador configura una instancia local de PGlite que se comporta de manera similar a una instancia activa de Postgres en CloudSQL.

Aprende a escribir esquemas y operaciones para tu app

Cuando desarrolles apps con SQL Connect, el diseño de tus esquemas y operaciones es una de las primeras y más importantes tareas de desarrollo que completarás.

• Gemini en Firebase console es una herramienta de IA que puede generar esquemas SQL Connect a partir de una descripción en lenguaje natural de tu app. Esta herramienta puede ayudarte a comenzar muy rápido, en especial si nunca trabajaste con bases de datos relacionales.
• Como alternativa, puedes escribir esquemas, consultas y mutaciones de bases de datos directamente con GraphQL. Comienza con la página Diseño SQL Connect esquemas y continúa con las páginas de seguimiento para aprender a escribir operaciones.