Pierwsze kroki z Firebase Data Connect w Flutterze

W tym krótkim wprowadzeniu utworzysz i wdrożysz małą przykładową bazę danych oraz uzyskasz do niej dostęp z poziomu interfejsu Flutter.

Wymagania wstępne

Aby ukończyć ten samouczek, potrzebujesz:

• Środowisko z zainstalowanymi tymi narzędziami:
  • Node.js z wybranym menedżerem pakietów. W tym samouczku zakładamy, że npm.
  • Wiersz poleceń Firebase:

    npm i -g firebase-tools@latest

  • Narzędzie wiersza poleceń Flutter.
  • interfejs wiersza poleceń FlutterFire,

    dart pub global activate flutterfire_cli

• konto Google,

Samouczek

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

Dalsze kroki

Wypróbuj rozszerzenie Visual Studio Code

Podczas tworzenia aplikacji za pomocą Data Connect zdecydowanie zalecamy korzystanie z rozszerzenia Visual Studio Code. Nawet jeśli nie używasz Visual Studio Code jako głównego środowiska programistycznego, to rozszerzenie udostępnia kilka funkcji, które ułatwiają tworzenie schematów i operacji:

• Serwer języka GraphQL, który zapewnia sprawdzanie składni i sugestie autouzupełniania specyficzne dla Data Connect.
• Przyciski CodeLens w linii kodu, które umożliwiają odczytywanie i zapisywanie danych z plików definicji schematu oraz wykonywanie zapytań i mutacji z definicji operacji.
• Automatycznie synchronizuj wygenerowane pakiety SDK z definicjami GraphQL.
• Uproszczona konfiguracja lokalnego emulatora.
• Uproszczone wdrażanie w środowisku produkcyjnym.

Korzystanie z Data Connect emulatora na potrzeby lokalnego programowania

W tym samouczku pokazaliśmy, jak wdrażać schematy i operacje Data Connect bezpośrednio w środowisku produkcyjnym, ale prawdopodobnie nie będziesz chcieć wprowadzać zmian w bazie danych produkcyjnej podczas aktywnego tworzenia aplikacji. Zamiast tego skonfiguruj Data Connect emulator i pracuj nad nim, a nie nad środowiskiem produkcyjnym. Emulator konfiguruje lokalną instancję PGlite, która działa podobnie do aktywnej instancji Postgres w Cloud SQL.

Dowiedz się, jak pisać schematy i operacje dla aplikacji

Podczas tworzenia aplikacji za pomocą Data Connect projektowanie schematów i operacji jest jednym z pierwszych i najważniejszych zadań programistycznych.

• Gemini w konsoli Firebase to narzędzie AI, które może generować Data Connect schematy na podstawie opisu aplikacji w języku naturalnym. To narzędzie może pomóc Ci szybko zacząć, zwłaszcza jeśli nigdy wcześniej nie pracowałeś(-aś) z relacyjnymi bazami danych.
• Możesz też pisać schematy baz danych, zapytania i mutacje bezpośrednio za pomocą GraphQL. Zacznij od strony Projektowanie schematów Data Connect i przejdź do kolejnych stron, aby dowiedzieć się, jak pisać operacje.