ใช้ Flutter SDK ที่สร้างขึ้น

Firebase Data Connect SDK ไคลเอ็นต์ช่วยให้คุณเรียกใช้การค้นหาและการเปลี่ยนแปลงฝั่งเซิร์ฟเวอร์ได้โดยตรงจากแอป Firebase คุณสร้าง SDK ไคลเอ็นต์ที่กำหนดเองแบบคู่ขนานไปกับการออกแบบสคีมา การค้นหา และการเปลี่ยนแปลงที่คุณนําไปใช้งานในData Connectบริการ จากนั้นผสานรวมเมธอดจาก SDK นี้เข้ากับตรรกะไคลเอ็นต์

ดังที่เราได้กล่าวไว้ในที่อื่นๆ สิ่งสำคัญที่ควรทราบคือData Connect โค้ดฝั่งไคลเอ็นต์ไม่ได้ส่งการค้นหาและการเปลี่ยนแปลง และไม่ได้ดำเนินการบนเซิร์ฟเวอร์ แต่เมื่อมีการติดตั้งใช้งาน ระบบจะจัดเก็บการดำเนินการ Data Connect ไว้ในเซิร์ฟเวอร์ เช่น Cloud Functions ซึ่งหมายความว่าคุณต้องติดตั้งใช้งานการเปลี่ยนแปลงฝั่งไคลเอ็นต์ที่เกี่ยวข้องเพื่อหลีกเลี่ยงไม่ให้ผู้ใช้เดิมใช้งานไม่ได้ (เช่น ในแอปเวอร์ชันเก่า)

ด้วยเหตุนี้ Data Connect จึงมีสภาพแวดล้อมสำหรับนักพัฒนาแอปและเครื่องมือที่ช่วยให้คุณสร้างต้นแบบของสคีมา คำค้นหา และการเปลี่ยนแปลงที่ใช้งานในเซิร์ฟเวอร์ได้ นอกจากนี้ยังสร้าง SDK ฝั่งไคลเอ็นต์โดยอัตโนมัติขณะที่คุณสร้างต้นแบบ

เมื่ออัปเดตบริการและแอปไคลเอ็นต์ซ้ำแล้ว การอัปเดตทั้งฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์ก็พร้อมใช้งาน

เวิร์กโฟลว์การพัฒนาลูกค้าคืออะไร

หากทำตามเริ่มต้นใช้งาน คุณจะได้รับ ข้อมูลเกี่ยวกับขั้นตอนการพัฒนาโดยรวมสำหรับ Data Connect ในคำแนะนำนี้ คุณจะเห็นข้อมูลโดยละเอียดเพิ่มเติมเกี่ยวกับการสร้าง Flutter SDK จากสคีมาของคุณ รวมถึงการทำงานกับคําค้นหาและการเปลี่ยนแปลงของไคลเอ็นต์

โดยสรุป หากต้องการใช้ Flutter SDK ที่สร้างขึ้นในแอปไคลเอ็นต์ คุณจะต้องทำตามขั้นตอนเบื้องต้นต่อไปนี้

1. เพิ่ม Firebase ไปยังแอป Flutter
2. ติดตั้ง FlutterFire CLI dart pub global activate flutterfire_cli
3. เรียกใช้ flutterfire configure

จากนั้นให้ทำดังนี้

1. พัฒนาสคีมาแอป

2. ตั้งค่าการสร้าง SDK โดยทำดังนี้

   • ด้วยปุ่มเพิ่ม SDK ลงในแอปในส่วนขยาย Data Connect VS Code
   • โดยอัปเดต connector.yaml

3. เริ่มต้นโค้ดฝั่งไคลเอ็นต์และนำเข้าไลบรารี

4. ใช้การเรียกไปยังการค้นหาและการเปลี่ยนแปลง

5. ตั้งค่าและใช้Data Connectโปรแกรมจำลองและ ทำซ้ำ

สร้าง Flutter SDK

เช่นเดียวกับโปรเจ็กต์ Firebase ส่วนใหญ่ การทำงานกับFirebase Data Connectโค้ดฝั่งไคลเอ็นต์ จะเกิดขึ้นในไดเรกทอรีโปรเจ็กต์ในเครื่อง ทั้งส่วนขยาย Data Connect VS Code และ Firebase CLI เป็นเครื่องมือในเครื่องที่สำคัญสำหรับการสร้างและจัดการโค้ดฝั่งไคลเอ็นต์

ตัวเลือกการสร้าง SDK จะเชื่อมโยงกับรายการต่างๆ ในdataconnect.yaml ไฟล์ที่สร้างขึ้นเมื่อคุณเริ่มต้นโปรเจ็กต์

เริ่มต้นการสร้าง SDK

connectorId: movies
generate:
  dartSdk:
    outputDir: ../../lib/generated # Feel free to change this to a different path
    package: movies

outputDir ระบุตำแหน่งที่ควรส่งออก SDK ที่สร้างขึ้น เส้นทางนี้จะสัมพันธ์กับไดเรกทอรีที่มีไฟล์ connector.yaml คุณระบุเส้นทางแบบเต็มไปยัง outputDir ได้ (ไม่บังคับ)

package ระบุชื่อแพ็กเกจ

อัปเดต SDK ขณะสร้างต้นแบบ

หากคุณกำลังสร้างต้นแบบแบบอินเทอร์แอกทีฟด้วยส่วนขยาย Data Connect VS Code และData Connectโปรแกรมจำลอง SDK ไฟล์ต้นฉบับของ SDK จะได้รับการสร้างและอัปเดตโดยอัตโนมัติขณะที่คุณแก้ไขไฟล์ .gql ที่กำหนดสคีมา การค้นหา และการเปลี่ยนแปลง ซึ่งเป็นฟีเจอร์ที่มีประโยชน์ในเวิร์กโฟลว์การโหลดซ้ำด่วน

หรือจะใช้ CLI เพื่อสร้าง SDK ใหม่ทุกครั้งที่มีการเปลี่ยนแปลงไฟล์ .gql ก็ได้

firebase dataconnect:sdk:generate --watch

สร้าง SDK สำหรับการผสานรวมและสำหรับรุ่นที่ใช้งานจริง

ในบางกรณี เช่น การเตรียมแหล่งที่มาของโปรเจ็กต์เพื่อส่งสำหรับการทดสอบ CI คุณ สามารถเรียกใช้ Firebase CLI เพื่ออัปเดตแบบเป็นกลุ่มได้

ในกรณีเหล่านี้ ให้ใช้ firebase dataconnect:sdk:generate

ตั้งค่ารหัสลูกค้า

เริ่มต้นแอป Data Connect

ก่อนอื่น ให้เริ่มต้นแอปโดยใช้วิธีการตั้งค่า Firebase มาตรฐาน

จากนั้นติดตั้งปลั๊กอิน Data Connect โดยทำดังนี้

flutter pub add firebase_data_connect

เริ่มต้น Data Connect Flutter SDK

เริ่มต้นอินสแตนซ์ Data Connect โดยใช้ข้อมูลที่คุณใช้ตั้งค่า Data Connect (ทั้งหมดอยู่ในแท็บ Data Connect ของคอนโซล Firebase)

นำเข้าไลบรารี

คุณต้องนำเข้า 2 ชุดเพื่อเริ่มต้นใช้งานโค้ดฝั่งไคลเอ็นต์ ได้แก่ การนำเข้าทั่วไป Data Connectและการนำเข้า SDK ที่เฉพาะเจาะจงซึ่งสร้างขึ้น

// general imports
import 'package:firebase_data_connect/firebase_data_connect.dart';

// generated queries and mutations from SDK
import 'generated/movies.dart';

ใช้การค้นหาฝั่งไคลเอ็นต์

โค้ดที่สร้างขึ้นจะมี Query Ref ที่กำหนดไว้ล่วงหน้าอยู่แล้ว สิ่งที่คุณต้องทำ ก็คือนำเข้าและเรียกใช้ execute ในรายการเหล่านั้น

import 'generated/movies.dart';

await MoviesConnector.instance.listMovies().execute();

เรียกใช้เมธอดการค้นหา SDK

ตัวอย่างการใช้ฟังก์ชันแป้นพิมพ์ลัดการดำเนินการเหล่านี้มีดังนี้

import 'generated/movies.dart';

function onBtnClick() {
  // This will call the generated Dart from the CLI and then make an HTTP request to the server.
  MoviesConnector.instance.listMovies().execute().then(data => showInUI(data)); // == MoviesConnector.instance.listMovies().ref().execute();
}

ช่องที่ไม่บังคับ

การค้นหาบางรายการอาจมีช่องที่ไม่บังคับ ในกรณีเหล่านี้ Flutter SDK จะแสดงเมธอด Builder และจะต้องตั้งค่าแยกกัน

เช่น ฟิลด์ rating ไม่บังคับเมื่อเรียกใช้ createMovie ดังนั้นคุณ ต้องระบุในฟังก์ชัน Builder

await MoviesConnector.instance.createMovie({ title: 'Empire Strikes Back', releaseYear: 1980, genre: "Sci-Fi"}).rating(5).execute();

ติดตามการเปลี่ยนแปลง

คุณสามารถติดตามการเปลี่ยนแปลง (ซึ่งจะอัปเดตทุกครั้งที่คุณเรียกใช้คําค้นหา)

QueryRef<ListMoviesData, void> listRef = MoviesConnector.instance.listMovies().ref();

// subscribe will immediately invoke the query if no execute was called on it previously.
listRef.subscribe().listen((data) {
  updateUIWithMovies(data.movies);
});

await MoviesConnector.instance.createMovie({ title: 'Empire Strikes Back', releaseYear: 1980, genre: "Sci-Fi" }).rating(5).execute();
await listRef.execute(); // will update the subscription above`

จัดการการเปลี่ยนแปลงฟิลด์การแจงนับ

สคีมาของแอปสามารถมีการแจงนับ ซึ่งการค้นหา GraphQL จะเข้าถึงได้

เมื่อการออกแบบแอปมีการเปลี่ยนแปลง คุณอาจเพิ่มค่าใหม่ที่รองรับการแจงนับ ตัวอย่างเช่น สมมติว่าในภายหลังวงจรแอปพลิเคชัน คุณตัดสินใจที่จะเพิ่มค่า FULLSCREEN ลงใน AspectRatio enum

ในเวิร์กโฟลว์ Data Connect คุณสามารถใช้เครื่องมือพัฒนาในเครื่องเพื่อ อัปเดตการค้นหาและ SDK ได้

อย่างไรก็ตาม ก่อนที่จะเผยแพร่ไคลเอ็นต์เวอร์ชันที่อัปเดตแล้ว ไคลเอ็นต์เวอร์ชันเก่าที่ติดตั้งใช้งาน อาจใช้งานไม่ได้

ตัวอย่างการใช้งานที่ยืดหยุ่น

SDK ที่สร้างขึ้นจะบังคับให้จัดการค่าที่ไม่รู้จัก กล่าวคือ โค้ดฝั่งไคลเอ็นต์ต้อง แกะออบเจ็กต์ EnumValue เป็น Known หรือ Unknown

final result = await MoviesConnector.instance.listMovies().execute();

if (result.data != null && result.data!.isNotEmpty) {
  handleEnumValue(result.data![0].aspectratio);
}

void handleEnumValue(EnumValue<AspectRatio> aspectValue) {
  if (aspectValue.value != null) {
    switch(aspectValue.value!) {
      case AspectRatio.ACADEMY:
        print("This movie is in Academy aspect");
        break;
      case AspectRatio.WIDESCREEN:
        print("This movie is in Widescreen aspect");
        break;
      case AspectRatio.ANAMORPHIC:
        print("This movie is in Anamorphic aspect");
        break;
      case AspectRatio.IMAX:
        print("This movie is in IMAX aspect");
    }
  } else {
    print("Unknown aspect ratio detected: ${aspectValue.stringValue}");
  }
}

ใช้การเปลี่ยนแปลงฝั่งไคลเอ็นต์

คุณเข้าถึงการเปลี่ยนแปลงได้ในลักษณะเดียวกับการค้นหา

await MoviesConnector.instance.createMovie({ title: 'Empire Strikes Back', releaseYear: 1980, genre: "Sci-Fi" }).rating(5).execute();

สร้างต้นแบบและทดสอบแอป Flutter

กำหนดค่าไคลเอ็นต์ให้ใช้โปรแกรมจำลองในเครื่อง

คุณสามารถใช้Data Connectโปรแกรมจำลองได้ ไม่ว่าจะจาก ส่วนขยาย Data Connect VS Code หรือจาก CLI

การวัดประสิทธิภาพแอปเพื่อเชื่อมต่อกับโปรแกรมจำลองจะเหมือนกันสำหรับทั้ง 2 สถานการณ์

import 'package:firebase_data_connect/firebase_data_connect.dart';
import 'generated/movies.dart';

MoviesConnector.instance.dataConnect
          .useDataConnectEmulator('127.0.0.1', 9399);

// Make calls from your app
QueryRef<ListMoviesData, void> ref = MoviesConnector.instance.listMovies.ref();

หากต้องการเปลี่ยนไปใช้ทรัพยากรการใช้งานจริง ให้แสดงความคิดเห็นในบรรทัดสำหรับการเชื่อมต่อกับ โปรแกรมจำลอง

ประเภทข้อมูลใน Dart SDK

เซิร์ฟเวอร์ Data Connect แสดงประเภทข้อมูล GraphQL ทั่วไป โดยจะแสดงใน SDK ดังนี้