Bắt đầu sử dụng Firebase Data Connect bằng Flutter

Trong hướng dẫn nhanh này, bạn sẽ tạo và triển khai một cơ sở dữ liệu mẫu nhỏ, đồng thời truy cập vào cơ sở dữ liệu đó từ giao diện người dùng Flutter.

Điều kiện tiên quyết

Để hoàn tất hướng dẫn bắt đầu nhanh này, bạn cần có những thứ sau:

• Một môi trường đã cài đặt các công cụ sau:
  • Node.js với một trình quản lý gói mà bạn chọn. Hướng dẫn này giả định rằng bạn đã có npm.
  • Giao diện dòng lệnh (CLI) của Firebase:

    npm i -g firebase-tools@latest

  • Công cụ dòng lệnh Flutter.
  • FlutterFire CLI

    dart pub global activate flutterfire_cli

• Tài khoản Google.

Hướng dẫn

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

Các bước tiếp theo

Dùng thử tiện ích Visual Studio Code

Khi phát triển bằng Data Connect, bạn nên dùng tiện ích Visual Studio Code. Ngay cả khi bạn không sử dụng Visual Studio Code làm môi trường phát triển chính, tiện ích này vẫn cung cấp một số tính năng giúp việc phát triển lược đồ và thao tác trở nên thuận tiện hơn:

• Một máy chủ ngôn ngữ GraphQL, cung cấp tính năng kiểm tra cú pháp và đề xuất tự động hoàn thành dành riêng cho Data Connect
• Các nút CodeLens nằm cùng dòng với mã của bạn, cho phép bạn đọc và ghi dữ liệu từ các tệp định nghĩa lược đồ, đồng thời thực thi các truy vấn và đột biến từ các định nghĩa thao tác.
• Tự động đồng bộ hoá các SDK đã tạo với định nghĩa GraphQL.
• Đơn giản hoá quá trình thiết lập trình mô phỏng cục bộ.
• Đơn giản hoá việc triển khai cho kênh phát hành công khai.

Sử dụng trình mô phỏng Data Connect để phát triển cục bộ

Mặc dù hướng dẫn này cho bạn biết cách triển khai trực tiếp các lược đồ và thao tác Data Connect vào bản phát hành chính thức, nhưng có thể bạn sẽ không muốn thay đổi cơ sở dữ liệu phát hành chính thức trong khi đang tích cực phát triển ứng dụng. Thay vào đó, hãy thiết lập trình mô phỏng Data Connect và thực hiện công việc phát triển dựa trên trình mô phỏng này thay vì bản phát hành chính thức. Trình mô phỏng thiết lập một phiên bản PGlite cục bộ hoạt động tương tự như một phiên bản Postgres đang hoạt động trên CloudSQL.

Tìm hiểu cách viết giản đồ và các thao tác cho ứng dụng của bạn

Khi phát triển ứng dụng bằng Data Connect, việc thiết kế các lược đồ và thao tác là một trong những nhiệm vụ phát triển đầu tiên và quan trọng nhất mà bạn sẽ hoàn thành.

• Gemini trong bảng điều khiển Firebase là một công cụ AI có thể tạo lược đồ Data Connect từ nội dung mô tả bằng ngôn ngữ tự nhiên về ứng dụng của bạn. Công cụ này có thể giúp bạn bắt đầu rất nhanh, đặc biệt nếu bạn chưa từng làm việc với cơ sở dữ liệu quan hệ.
• Ngoài ra, bạn có thể viết trực tiếp các giản đồ cơ sở dữ liệu, truy vấn và đột biến bằng GraphQL. Bắt đầu với trang Thiết kế Data Connect các lược đồ và tiếp tục xem các trang tiếp theo để tìm hiểu cách viết các thao tác.