Começar a usar o Firebase SQL Connect com o Flutter

Neste guia de início rápido, você vai criar e implantar um pequeno banco de dados de amostra e acessá-lo em um front-end do Flutter.

Pré-requisitos

Para concluir este guia de início rápido, você vai precisar do seguinte:

• Um ambiente com as seguintes ferramentas instaladas:
  • Node.js com um gerenciador de pacotes de sua escolha. Este tutorial pressupõe o uso do npm.
  • A CLI do Firebase:

    npm i -g firebase-tools@latest

  • A ferramenta de linha de comando do Flutter tool.
  • A CLI do FlutterFire

    dart pub global activate flutterfire_cli

• Uma Conta do 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

Próximas etapas

Testar a extensão do SQL Connect para VS Code

Ao desenvolver com SQL Connect, recomendamos o uso da extensão do SQL Connect para VS Code. Mesmo que você não use o Visual Studio Code como ambiente de desenvolvimento principal, a extensão oferece vários recursos que tornam o desenvolvimento de esquemas e operações mais conveniente:

• Um servidor de linguagem GraphQL, que oferece verificação de sintaxe e sugestões de preenchimento automático específicas do SQL Connect
• Botões do CodeLens em linha com o código que permitem ler e gravar dados dos arquivos de definição de esquema e executar consultas e mutações das definições de operação.
• Mantenha os SDKs gerados sincronizados automaticamente com as definições do GraphQL.
• Configuração simplificada do emulador local.
• Implantação simplificada na produção.

Usar o SQL Connect emulador para desenvolvimento local

Embora este tutorial tenha mostrado como implantar SQL Connect esquemas e operações diretamente na produção, provavelmente você não vai querer fazer mudanças no banco de dados de produção enquanto estiver desenvolvendo o app. Em vez disso, configure o SQL Connect emulador e faça o trabalho de desenvolvimento nele em vez da produção. O emulador configura uma instância local do PGlite que se comporta de maneira semelhante a uma instância ativa do Postgres no CloudSQL.

Aprender a escrever esquemas e operações para seu app

Ao desenvolver apps com SQL Connect, o design dos esquemas e operações é uma das primeiras e mais importantes tarefas de desenvolvimento que você vai concluir.

• O Gemini no console do Firebase é uma ferramenta de IA que pode gerar SQL Connect esquemas a partir de uma descrição em linguagem natural do seu app. Essa ferramenta pode ajudar você a começar rapidamente, principalmente se você nunca trabalhou com bancos de dados relacionais.
• Como alternativa, você pode escrever esquemas, consultas e mutações de banco de dados diretamente usando o GraphQL. Comece com a página Criar SQL Connect esquemas e continue nas páginas de acompanhamento para aprender a escrever operações.