ใช้ 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 โดยทำดังนี้

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

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

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

สร้าง Flutter SDK

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

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

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

ใน connector.yaml ให้เพิ่ม outputDir, package และ (สำหรับ SDK เว็บ) packageJsonDir 
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 ที่กำหนดสคีมา การค้นหา และการเปลี่ยนแปลง ซึ่งเป็นฟีเจอร์ที่มีประโยชน์ในเวิร์กโฟลว์การโหลดซ้ำด่วน

ในสถานการณ์อื่นๆ หากคุณใช้Data Connectโปรแกรมจำลองจาก CLI ของ Firebase คุณจะตั้งค่าการตรวจสอบการอัปเดต .gql และยังให้ระบบอัปเดตแหล่งที่มาของ SDK โดยอัตโนมัติได้ด้วย

หรือจะใช้ 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`

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

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

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 ดังนี้

ประเภทการเชื่อมต่อข้อมูล Dart
การประทับเวลา firebase_data_connect.Timestamp
Int (32 บิต) int
วันที่ DateTime
UUID สตริง
Int64 int
ทศนิยม double
บูลีน bool
เวลาใดก็ได้ firebase_data_connect.AnyValue