Premiers pas avec Firebase SQL Connect à l'aide de Flutter

Dans ce guide de démarrage rapide, vous allez créer et déployer un petit exemple de base de données, puis y accéder à partir d'une interface Flutter.

Prérequis

Pour suivre ce guide de démarrage rapide, vous avez besoin des éléments suivants :

• Un environnement dans lequel les outils suivants sont installés :
  • Node.js avec le gestionnaire de paquets de votre choix. Ce tutoriel suppose que vous utilisez npm.
  • La CLI Firebase :

    npm i -g firebase-tools@latest

  • L'outil de ligne de commande Flutter tool.
  • La CLI FlutterFire

    dart pub global activate flutterfire_cli

• Un compte Google.

Tutoriel

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

Étapes suivantes

Essayer l'extension SQL Connect VS Code

Lorsque vous développez avec SQL Connect, nous vous recommandons vivement d'utiliser l' extension SQL Connect VS Code. Même si vous n'utilisez pas Visual Studio Code comme environnement de développement principal, l'extension offre plusieurs fonctionnalités qui facilitent le développement de schémas et d'opérations :

• Un serveur de langage GraphQL, qui fournit une vérification de la syntaxe et des suggestions de saisie semi-automatique spécifiques à SQL Connect
• Des boutons CodeLens alignés sur votre code qui vous permettent de lire et d'écrire des données à partir de vos fichiers de définition de schéma et d'exécuter des requêtes et des mutations à partir de vos définitions d'opération.
• La synchronisation automatique de vos SDK générés avec vos définitions GraphQL.
• Une configuration simplifiée de l'émulateur local.
• Un déploiement simplifié en production.

Utiliser l'émulateur SQL Connect pour le développement local

Bien que ce tutoriel vous ait montré comment déployer des schémas et des opérations SQL Connect directement en production, vous ne souhaiterez probablement pas apporter de modifications à votre base de données de production pendant que vous développez activement votre application. Configurez plutôt l'SQL Connect émulateur et effectuez votre travail de développement sur celui-ci plutôt qu'en production. L'émulateur configure une instance PGlite locale qui se comporte de la même manière qu'une instance Postgres en direct sur CloudSQL.

Découvrez comment écrire des schémas et des opérations pour votre application

Lorsque vous développez des applications avec SQL Connect, la conception de vos schémas et opérations est l'une des premières et des plus importantes tâches de développement que vous effectuerez.

• Gemini dans la console Firebase est un outil d'IA qui peut générer des schémas SQL Connect à partir d'une description en langage naturel de votre application. Cet outil peut vous aider à démarrer très rapidement, en particulier si vous n'avez jamais travaillé avec des bases de données relationnelles.
• Vous pouvez également écrire directement des schémas, des requêtes et des mutations de base de données à l'aide de GraphQL. Commencez par la page Concevoir des SQL Connect schémas, puis passez aux pages suivantes pour découvrir comment écrire des opérations.