เริ่มต้นใช้งาน Firebase Data Connect โดยใช้ Flutter

ในการเริ่มต้นอย่างรวดเร็วนี้ คุณจะได้สร้างและติดตั้งใช้งานฐานข้อมูลตัวอย่างขนาดเล็ก รวมถึงเข้าถึงฐานข้อมูลดังกล่าวจากส่วนหน้าของ Flutter

ข้อกำหนดเบื้องต้น

คุณจะต้องมีสิ่งต่อไปนี้เพื่อทําการเริ่มต้นอย่างรวดเร็วนี้ให้เสร็จสมบูรณ์

• สภาพแวดล้อมที่มีการติดตั้งเครื่องมือต่อไปนี้
  • Node.js พร้อมด้วยเครื่องมือจัดการแพ็กเกจที่คุณเลือก บทแนะนำนี้ถือว่าคุณมี npm
  • Firebase CLI:

    npm i -g firebase-tools@latest

  • เครื่องมือบรรทัดคำสั่ง Flutter
  • FlutterFire CLI

    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 เป็นเครื่องมือ AI ที่สร้างData Connectสคีมาจากคำอธิบายภาษาธรรมชาติของแอปได้ เครื่องมือนี้ช่วยให้คุณเริ่มต้นใช้งานได้อย่างรวดเร็ว โดยเฉพาะอย่างยิ่งหากคุณไม่เคยทำงานกับ ฐานข้อมูลเชิงสัมพันธ์มาก่อน
• หรือจะเขียนสคีมาฐานข้อมูล การค้นหา และการเปลี่ยนแปลงโดยตรงโดยใช้ GraphQL ก็ได้ เริ่มต้นที่หน้าสคีมาData Connectการออกแบบ แล้วไปที่หน้าติดตามผลเพื่อดูวิธีเขียนการดำเนินการ