Bắt đầu sử dụng Firebase SQL 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ừ mộ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 nhanh này, bạn cần có những điều sau:

  • Một môi trường đã cài đặt các công cụ sau:
    • Node.js có trình quản lý gói mà bạn chọn. Hướng dẫn này giả định 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 tool.
    • FlutterFire CLI
      dart pub global activate flutterfire_cli
  • Tài khoản Google.

Hướng dẫn

Hướng dẫn

1. Chạy dự án của bạn

Tạo một thư mục mới và chạy dự án Firebase trong thư mục đó. Khi được nhắc, hãy chọn các lựa chọn sau:

  • Tạo một dự án Firebase mới.
  • Không tạo giản đồ bằng Gemini (trong hướng dẫn này, bạn sẽ sử dụng một giản đồ mẫu dựng sẵn ).
  • Tạo một phiên bản Cloud SQL mới.
  • Tạo một mẫu Flutter.
mkdir myproj ; cd myproj
firebase login --reauth
firebase init dataconnect

2. Xem lại các định nghĩa GraphQL mẫu

Trong SQL Connect, bạn xác định tất cả các giản đồ và thao tác cơ sở dữ liệu bằng GraphQL. Khi bạn chạy dự án, Firebase CLI sẽ tạo một số định nghĩa mẫu để giúp bạn bắt đầu.

dataconnect/schema/schema.gql (excerpt)
type Movie @table {
  title: String!
  imageUrl: String!
  genre: String
}

type MovieMetadata @table {
  movie: Movie! @unique
  rating: Float
  releaseYear: Int
  description: String
}
dataconnect/example/queries.gql (excerpt)
query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

3. Triển khai giản đồ và thao tác

Bất cứ khi nào bạn thay đổi giản đồ, truy vấn hoặc đột biến cơ sở dữ liệu, bạn phải triển khai các thay đổi đó để có hiệu lực trên cơ sở dữ liệu.

firebase deploy --only dataconnect

4. Gieo dữ liệu mẫu vào cơ sở dữ liệu

Dữ liệu gieo này sẽ cung cấp cho bạn một số thông tin để xem khi bạn kiểm thử ứng dụng mẫu. Xin lưu ý rằng trong bước này, bạn đang thực thi GraphQL tuỳ ý, được phép thực hiện các tác vụ quản trị.

firebase dataconnect:execute dataconnect/seed_data.gql

5. Tạo SDK máy khách Dart

Lệnh này sử dụng các định nghĩa GraphQL để tạo một thư viện Dart dành riêng cho cơ sở dữ liệu của bạn. Bạn sử dụng thư viện này trong ứng dụng máy khách để thực hiện tất cả các thao tác cơ sở dữ liệu.

Bạn có thể tạo thư viện cho nhiều nền tảng, bao gồm Kotlin cho Android, Swift cho iOS và JavaScript cho web, bằng cách thêm các định nghĩa vào connector.yaml.

firebase dataconnect:sdk:generate
Auto-generated Dart SDK (excerpt)
class ExampleConnector {
  ListMoviesVariablesBuilder listMovies() {
    return ListMoviesVariablesBuilder(dataConnect);
  }

  // ...
}

6. Thiết lập ứng dụng Flutter

Chạy các lệnh này để thiết lập ứng dụng Flutter nhằm sử dụng dự án Firebase của bạn.

Khi được lệnh flutterfire nhắc, hãy chọn dự án Firebase mà bạn đã tạo trước đó và chọn các nền tảng mà bạn muốn nhắm đến.

cd flutter_app
flutter pub add firebase_core firebase_data_connect
flutterfire configure

7. Viết một máy khách Flutter mẫu

Thay thế nội dung của flutter_app/lib/main.dart bằng ứng dụng Flutter đơn giản này.

Xin lưu ý rằng ứng dụng này hoàn tất quá trình truy cập cơ sở dữ liệu cần thiết bằng một hàm từ SDK đã tạo.

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());
}

8. Dùng thử ứng dụng

Khởi động máy chủ phát triển để xem ứng dụng mẫu đang hoạt động.

flutter run

Các bước tiếp theo

Dùng thử tiện ích SQL Connect VS Code

Khi phát triển bằng SQL Connect, bạn nên sử dụng tiện ích SQL Connect VS 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 phát triển giản đồ và thao tác 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à các cụm từ gợi ý tự động hoàn thành dành riêng cho SQL Connect
  • Các nút CodeLens 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 giản đồ và 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 các định nghĩa GraphQL.
  • Thiết lập trình mô phỏng cục bộ đơn giản.
  • Triển khai đơn giản vào thực tế.

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

Mặc dù hướng dẫn này đã chỉ cho bạn cách triển khai trực tiếp các SQL Connect giản đồ và thao tác vào thực tế, nhưng có thể bạn sẽ không muốn thay đổi cơ sở dữ liệu thực tế khi đang tích cực phát triển ứng dụng. Thay vào đó, hãy thiết lập SQL Connect trình mô phỏng và thực hiện công việc phát triển trên trình mô phỏng này thay vì thực tế. 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 trực tiếp trên CloudSQL.

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

Khi phát triển ứng dụng bằng SQL Connect, việc thiết kế giản đồ 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 giản đồ SQL 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 là 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 đồ, truy vấn và đột biến cơ sở dữ liệu bằng GraphQL. Bắt đầu với trang Thiết kế SQL Connect giản đồ và tiếp tục đến các trang tiếp theo để tìm hiểu cách viết thao tác.