Начните работу с Firebase Data Connect с помощью Flutter

В этом кратком руководстве вы создадите и развернете небольшой пример базы данных и получите к ней доступ из интерфейса Flutter.

Предпосылки

Для выполнения этого краткого руководства вам понадобится следующее:

• Среда со следующими установленными инструментами:
  • Node.js с менеджером пакетов на ваш выбор. В этом руководстве предполагается использование npm .
  • Firebase CLI :

    npm i -g firebase-tools@latest

  • Инструмент командной строки Flutter .
  • Интерфейс командной строки FlutterFire

    dart pub global activate flutterfire_cli

• Аккаунт Google.

Учебное пособие

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

Следующие шаги

Попробуйте расширение Visual Studio Code

При разработке с помощью Data Connect мы настоятельно рекомендуем использовать расширение Visual Studio Code . Даже если вы не используете Visual Studio Code в качестве основной среды разработки, это расширение предоставляет ряд функций, которые делают разработку схем и операций более удобной:

• Сервер языка GraphQL, обеспечивающий проверку синтаксиса и предложения автодополнения, специфичные для Data Connect
• Кнопки CodeLens в соответствии с вашим кодом, которые позволяют вам считывать и записывать данные из файлов определения схемы, а также выполнять запросы и мутации из определений ваших операций.
• Автоматически синхронизируйте сгенерированные вами SDK с определениями GraphQL.
• Упрощенная настройка локального эмулятора.
• Упрощенное развертывание в производстве.

Используйте эмулятор Data Connect для локальной разработки

Хотя в этом руководстве показано, как развернуть схемы и операции Data Connect непосредственно в рабочей среде, вам, вероятно, не захочется вносить изменения в рабочую базу данных во время активной разработки приложения. Вместо этого настройте эмулятор Data Connect и выполняйте разработку на нём, а не в рабочей среде. Эмулятор создаёт локальный экземпляр PGlite, который ведёт себя аналогично работающему экземпляру Postgres в CloudSQL.

Узнайте, как писать схемы и операции для вашего приложения.

При разработке приложений с использованием Data Connect проектирование схем и операций является одной из первых и наиболее важных задач разработки, которые вам предстоит выполнить.

• Gemini в консоли Firebase — это инструмент искусственного интеллекта, который может генерировать схемы Data Connect на основе описания вашего приложения на естественном языке. Этот инструмент поможет вам быстро начать работу, особенно если вы никогда раньше не работали с реляционными базами данных.
• Кроме того, вы можете писать схемы баз данных, запросы и мутации непосредственно с помощью GraphQL. Начните со страницы «Проектирование схем Data Connect и перейдите на следующие страницы, чтобы узнать, как писать операции.