Mulai menggunakan Firebase Data Connect menggunakan Flutter

Dalam panduan memulai ini, Anda akan membuat dan men-deploy contoh database kecil serta mengaksesnya dari frontend Flutter.

Prasyarat

Untuk menyelesaikan panduan memulai ini, Anda memerlukan hal berikut:

• Lingkungan dengan alat berikut yang terinstal:
  • Node.js dengan pengelola paket pilihan Anda. Tutorial ini mengasumsikan npm.
  • Firebase CLI:

    npm i -g firebase-tools@latest

  • Alat command line Flutter.
  • FlutterFire CLI

    dart pub global activate flutterfire_cli

• Akun 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

Langkah berikutnya

Mencoba ekstensi Visual Studio Code

Saat mengembangkan dengan Data Connect, sebaiknya gunakan ekstensi Visual Studio Code. Meskipun Anda tidak menggunakan Visual Studio Code sebagai lingkungan pengembangan utama, ekstensi ini menyediakan beberapa fitur yang membuat pengembangan skema dan operasi menjadi lebih mudah:

• Server bahasa GraphQL, yang menyediakan pemeriksaan sintaksis dan saran pelengkapan otomatis khusus untuk Data Connect
• Tombol CodeLens sebaris dengan kode yang memungkinkan Anda membaca dan menulis data dari file definisi skema serta menjalankan kueri dan mutasi dari definisi operasi.
• Secara otomatis menjaga SDK yang dihasilkan tetap disinkronkan dengan definisi GraphQL Anda.
• Penyiapan emulator lokal yang disederhanakan.
• Deployment yang disederhanakan ke produksi.

Menggunakan emulator Data Connect untuk pengembangan lokal

Meskipun tutorial ini menunjukkan cara men-deploy skema dan operasi Data Connect langsung ke produksi, Anda mungkin tidak ingin membuat perubahan pada database produksi saat Anda sedang mengembangkan aplikasi secara aktif. Sebagai gantinya, siapkan emulator Data Connect dan lakukan pekerjaan pengembangan Anda di emulator tersebut, bukan di produksi. Emulator menyiapkan instance PGlite lokal yang berperilaku serupa dengan instance Postgres aktif di CloudSQL.

Pelajari cara menulis skema dan operasi untuk aplikasi Anda

Saat mengembangkan aplikasi dengan Data Connect, desain skema dan operasi adalah salah satu tugas pengembangan pertama dan terpenting yang akan Anda selesaikan.

• Gemini di Firebase console adalah alat AI yang dapat membuat skema Data Connect dari deskripsi bahasa alami aplikasi Anda. Alat ini dapat membantu Anda memulai dengan sangat cepat, terutama jika Anda belum pernah menggunakan database relasional sebelumnya.
• Atau, Anda dapat menulis skema database, kueri, dan mutasi secara langsung menggunakan GraphQL. Mulai dengan halaman Skema Data Connect Desain dan lanjutkan ke halaman lanjutan untuk mempelajari cara menulis operasi.