เริ่มต้นใช้งาน Firebase Data Connect

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

ในการเริ่มต้นใช้งานอย่างรวดเร็วนี้ คุณจะได้เรียนรู้วิธีสร้าง Firebase Data Connect ในแอปพลิเคชันด้วยอินสแตนซ์ SQL เวอร์ชันที่ใช้งานจริง

ในคอนโซล Firebase คุณจะทำสิ่งต่อไปนี้ได้

• เพิ่ม Firebase Data Connect ลงในโปรเจ็กต์ Firebase
• สร้างสคีมาสําหรับแอปในคอนโซล Firebase โดยใช้ Schema Assist แล้วทําให้ใช้งานได้
• จัดสรรอินสแตนซ์ Cloud SQL สําหรับแอป
• เมื่อใช้ Gemini Code Assist ให้ป้อนข้อมูลตัวอย่างลงในฐานข้อมูล

จากนั้นคุณจะทําสิ่งต่อไปนี้ในสภาพแวดล้อมการพัฒนาซอฟต์แวร์ในเครื่อง

• ตั้งค่าเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ ซึ่งรวมถึงส่วนขยาย Visual Studio Code เพื่อทํางานกับอินสแตนซ์เวอร์ชันที่ใช้งานจริง
• ซิงค์สภาพแวดล้อมในเครื่องกับชิ้นงานที่สร้างขึ้นในคอนโซล
• ใช้เครื่องมือส่วนขยายเพื่อช่วยในการติดตั้งใช้งานคําค้นหาที่จะใช้ในแอป
• สร้าง SDK แบบประเภทที่แน่นอน และใช้ในแอป
• ทำให้ใช้งานได้สคีมา ข้อความค้นหา และข้อมูลขั้นสุดท้ายในระบบคลาวด์

ขั้นตอนในคอนโซล: ออกแบบสคีมาและทำให้ใช้งานได้ในฐานข้อมูล

1. สร้างโปรเจ็กต์ Firebase หากยังไม่ได้สร้าง
   1. ในFirebaseคอนโซล ให้คลิกเพิ่มโปรเจ็กต์ แล้วทำตามวิธีการบนหน้าจอ
2. ไปที่ส่วน Data Connect ของคอนโซล Firebase
3. คลิกปุ่มเริ่มต้นใช้งาน Gemini
4. ในแผงเวิร์กโฟลว์ของ Schema Generator ที่ปรากฏขึ้น ให้อธิบายแอปเพื่อให้ Gemini ช่วยสร้างสคีมา GraphQL กับคุณ
5. ตรวจสอบสคีมา GraphQL แล้วคลิกอัปเกรดและทำให้ใช้งานได้

6. อัปเกรดโปรเจ็กต์เป็นแพ็กเกจ Blaze ซึ่งจะช่วยให้คุณสร้างอินสแตนซ์ Cloud SQL สำหรับ PostgreSQL ได้

7. เลือกสร้างอินสแตนซ์ Cloud SQL ใหม่ ในกล่องโต้ตอบที่ปรากฏขึ้น ให้เลือกตำแหน่งและการตั้งชื่อฐานข้อมูล Cloud SQL สำหรับ PostgreSQL

   ระบบจะติดตั้งใช้งานสคีมาแอปของคุณพร้อมกับฐานข้อมูล PostgreSQL ที่สอดคล้องกัน

ขั้นตอนในคอนโซล: ใช้ Gemini ใน Firebase เพื่อสร้างการดัดแปลงและป้อนข้อมูลในฐานข้อมูล

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

หากต้องการป้อนข้อมูลฐานข้อมูล คุณสามารถใช้ Gemini ใน Firebase เพื่อช่วยในการป้อนข้อมูลเป็นภาษาที่เป็นธรรมชาติเพื่อกำหนด Mutation ของ GraphQL เพื่ออัปเดตตารางรายการใดรายการหนึ่งและ Query เพื่อยืนยันการอัปเดต

1. เปิดแท็บข้อมูล

2. คลิกไอคอนช่วยฉันเขียน GraphQL pen_spark แล้วพิมพ์ข้อมูลในช่องที่ปรากฏขึ้น

   เช่น

   Add data for three sample products to my app.
   

3. คลิกสร้าง ระบบจะแสดงการกลายพันธุ์

4. ตรวจสอบเอาต์พุต หากจำเป็น ให้คลิกแก้ไขเพื่อปรับแต่งพรอมต์ แล้วคลิกสร้างใหม่

5. จากนั้นคลิกแทรกเพื่อแทรกการกลายพันธุ์ลงในเครื่องมือแก้ไขข้อมูล

6. คลิกเรียกใช้

เมื่อเรียกใช้การดัดแปลง ระบบจะเขียนข้อมูลลงในตารางที่เกี่ยวข้องในฐานข้อมูล PostgreSQL คุณสร้างการค้นหาในคอนโซลเพื่อดูข้อมูลที่จัดเก็บไว้ได้ ดังนี้

1. ทำตามขั้นตอนก่อนหน้าซ้ำโดยใช้ ช่วยฉันเขียน GraphQL pen_sparkเพื่อสร้างการค้นหา

2. พิมพ์ข้อมูลในช่องที่ปรากฏขึ้น

   เช่น

   Query data for all sample products in my app.
   

3. คลิกสร้าง แล้วคลิกเรียกใช้

ขั้นตอนในเครื่อง: เลือกเครื่องมือสำหรับการพัฒนา

เมื่อคุณมีข้อมูลในฐานข้อมูลที่ติดตั้งใช้งานแล้ว คุณจะพัฒนาสคีมาและตัวเชื่อมต่อในสภาพแวดล้อมการพัฒนาในเครื่องต่อได้

ก่อนอื่น คุณต้องตั้งค่าสภาพแวดล้อมในเครื่อง Data Connect มีวิธีติดตั้งเครื่องมือสำหรับการพัฒนา 2 วิธี

ขั้นตอนในเครื่อง: ตั้งค่าสภาพแวดล้อมการพัฒนา

1. สร้างไดเรกทอรีใหม่สำหรับโปรเจ็กต์ในเครื่อง

2. เรียกใช้คำสั่งต่อไปนี้ในไดเรกทอรีใหม่ที่สร้างขึ้น

     curl -sL https://firebase.tools/dataconnect | bash

   สคริปต์นี้จะพยายามตั้งค่าสภาพแวดล้อมการพัฒนาให้คุณและเปิด IDE บนเบราว์เซอร์ IDE นี้มีเครื่องมือต่างๆ รวมถึงส่วนขยาย VS Code ที่รวมไว้ล่วงหน้า เพื่อช่วยคุณจัดการสคีมา รวมถึงกำหนดการค้นหาและการดัดแปลงที่จะใช้ในแอปพลิเคชัน และสร้าง SDK แบบประเภทที่แน่นอน

alias dataconnect='curl -sL https://firebase.tools/dataconnect | bash'

ขั้นตอนในเครื่อง: ตั้งค่าไดเรกทอรีโปรเจ็กต์

หากต้องการตั้งค่าโปรเจ็กต์ในเครื่อง ให้เริ่มต้นไดเรกทอรีโปรเจ็กต์ ในหน้าต่าง IDE ให้คลิกไอคอน Firebase ในแผงด้านซ้ายเพื่อเปิด UI ของส่วนขยาย Data Connect ใน VS Code

1. คลิกปุ่มลงชื่อเข้าใช้ด้วย Google
2. คลิกปุ่มเชื่อมต่อโปรเจ็กต์ Firebase แล้วเลือกโปรเจ็กต์ที่คุณสร้างขึ้นก่อนหน้านี้ในคอนโซล

3. คลิกปุ่ม Run firebase init แล้วทําตามขั้นตอนให้เสร็จสมบูรณ์

4. คลิกปุ่มเริ่มโปรแกรมจำลอง

ขั้นตอนในเครื่อง: ค้นหาสคีมาในสภาพแวดล้อมในเครื่อง

ขั้นตอนที่ firebase init ในส่วนก่อนหน้าจะซิงค์สคีมาที่คุณติดตั้งใช้งานจากคอนโซลไปยังสภาพแวดล้อมการพัฒนาในเครื่อง

ค้นหาสคีมา: สคีมาอยู่ในไดเรกทอรีโปรเจ็กต์ Firebase ในไฟล์ /dataconnect/schema/schema.gql

ขั้นตอนในเครื่อง: ทำงานกับสคีมา

ตัวอย่างสคีมา: ภาพยนตร์

ใน Data Connect ระบบจะแมปฟิลด์ GraphQL กับคอลัมน์ Movie ประเภทหนึ่งๆ อาจมี id, title, imageUrl และ genre Data Connect รู้จักประเภทข้อมูลพื้นฐาน String และ UUID

# File `/dataconnect/schema/schema.gql`

# By default, a UUID id key will be created by default as primary key.
type Movie @table {
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

ตารางตัวอย่างสคีมา 1:1: MovieMetadata

สำหรับภาพยนตร์ คุณจะจําลองข้อมูลเมตาของภาพยนตร์ได้

ตัวอย่างเช่น ใน schema.gql คุณอาจเพิ่มข้อมูลโค้ดต่อไปนี้หรือโค้ดการตรวจสอบที่ Gemini สร้างขึ้น

# Movie - MovieMetadata is a one-to-one relationship
type MovieMetadata @table {
  # This time, we omit adding a primary key because
  # you can rely on Data Connect to manage it.

  # @unique indicates a 1-1 relationship
  movie: Movie! @unique
  # movieId: UUID <- this is created by the above reference
  rating: Float
  releaseYear: Int
  description: String
}

โปรดทราบว่าช่อง movie แมปกับประเภท Movie Data Connect เข้าใจว่านี่เป็นความสัมพันธ์ระหว่าง Movie กับ MovieMetadata และจะจัดการความสัมพันธ์นี้ให้คุณ

ดูข้อมูลเพิ่มเติมเกี่ยวกับสคีมา Data Connect ในเอกสารประกอบ

ขั้นตอนในร้าน: เพิ่มข้อมูลลงในตาราง

ในแผงเครื่องมือแก้ไข IDE คุณจะเห็นปุ่ม CodeLens ปรากฏเหนือประเภท GraphQL ใน /dataconnect/schema/schema.gql คุณสามารถสร้างการดัดแปลงเพื่อเพิ่มข้อมูลลงในฐานข้อมูลเวอร์ชันที่ใช้งานจริงได้เช่นเดียวกับในคอนโซล

วิธีเพิ่มข้อมูลลงในตารางเมื่อทำงานในเครื่อง

1. ใน schema.gql ให้คลิกปุ่มเพิ่มข้อมูลเหนือประกาศสำหรับประเภทใดประเภทหนึ่ง (เช่น Movie, Product, Account โดยขึ้นอยู่กับลักษณะของแอป)
   
2. ระบบจะเพิ่มไฟล์ใหม่ชื่อ <type>_insert.qgl ลงในไดเรกทอรีการทำงาน เช่น Movie_insert.gql หรือ Product_insert.gql เขียนข้อมูลลงในช่องสำหรับประเภทนั้น
3. คลิกปุ่มเรียกใช้ (เวอร์ชันที่ใช้งานจริง)
   
4. ทำขั้นตอนก่อนหน้าซ้ำเพื่อเพิ่มระเบียนลงในตารางอื่นๆ

วิธีตรวจสอบอย่างรวดเร็วว่าเพิ่มข้อมูลแล้ว

1. กลับไปที่ schema.gql แล้วคลิกปุ่มอ่านข้อมูลเหนือประกาศประเภท
2. ในไฟล์ <type>_read.gql ที่สร้างขึ้น เช่น Product_read.gql ให้คลิกปุ่มเรียกใช้ (เวอร์ชันที่ใช้งานจริง) เพื่อเรียกใช้การค้นหา

ดูข้อมูลเพิ่มเติมเกี่ยวกับการกลายพันธุ์ของ Data Connect ในเอกสารประกอบ

ขั้นตอนที่ดำเนินการในร้าน: กําหนดคําค้นหา

มาถึงช่วงสนุกๆ กันแล้ว นั่นก็คือการค้นหา ในฐานะนักพัฒนาซอฟต์แวร์ คุณคุ้นเคยกับการเขียนการค้นหา SQL มากกว่าการค้นหา GraphQL ดังนั้นในตอนแรกอาจรู้สึกแตกต่างออกไปเล็กน้อย อย่างไรก็ตาม GraphQL สั้นกระชับกว่าและปลอดภัยต่อประเภทข้อมูลมากกว่า SQL ดิบ ส่วนส่วนขยาย VS Code ของเราช่วยให้การพัฒนาเป็นไปอย่างง่ายดาย

หากต้องการใช้การค้นหา คุณสามารถปรับแต่งการค้นหาที่สร้างขึ้นด้วย CodeLens ดังนี้

1. ใน /dataconnect/schema/schema.gql ให้คลิกปุ่ม CodeLens Read data เหนือประเภท (Movie, Product, Account ฯลฯ)
2. ในไฟล์ <type>_read.gql ที่สร้างขึ้น ให้ทดสอบการค้นหาโดยคลิกปุ่มเรียกใช้ (เวอร์ชันที่ใช้งานจริง)
3. คัดลอกการค้นหาที่ใช้งานได้ไปยัง /dataconnect/connector/queries.gql

4. หากต้องการให้ใช้การค้นหานี้ได้ ให้ประกาศชื่อที่ไม่ซ้ำกัน

   เช่น ในตัวอย่างทั่วไปต่อไปนี้ query_name อาจได้แก่ ListMovies หรือ ListProducts หรือ ListAccounts

# File `/dataconnect/connector/queries.gql`

# @auth() directives control who can call each operation.
query <query_name> @auth(level: PUBLIC) {
   <table_name> {
     <field_1>
     <field_2>
     <field_3>
  }
}

เรียกใช้การค้นหาโดยใช้ปุ่ม CodeLens ที่อยู่ใกล้เคียง

ดูข้อมูลเพิ่มเติมเกี่ยวกับการค้นหาใน Data Connect ในเอกสารประกอบ

ขั้นตอนในเครื่อง: สร้าง SDK

1. คลิกปุ่มเพิ่ม SDK ลงในแอป

2. ในกล่องโต้ตอบที่ปรากฏขึ้น ให้เลือกไดเรกทอรีที่มีโค้ดสําหรับแอปของคุณ ระบบจะสร้างและบันทึกโค้ด Data Connect SDK ไว้ที่นั่น

3. เลือกแพลตฟอร์มแอป แล้วโปรดทราบว่าระบบจะสร้างโค้ด SDK ในไดเรกทอรีที่คุณเลือกทันที

ขั้นตอนในเครื่อง: ติดตั้งสคีมาและการค้นหาในเวอร์ชันที่ใช้งานจริง

คุณได้ทําการพัฒนาซ้ำแล้วซ้ำเล่า ตอนนี้คุณจึงสามารถทําให้สคีมาและการค้นหาใช้งานได้บนเซิร์ฟเวอร์ด้วย UI ของส่วนขยาย Firebase หรือ Firebase CLI เช่นเดียวกับสคีมา

ในหน้าต่าง IDE ให้คลิกปุ่มทำให้ใช้งานได้จริงใน UI ของส่วนขยาย VS Code

เมื่อติดตั้งใช้งานแล้ว ให้ไปที่คอนโซล Firebase เพื่อตรวจสอบการอัปเดตสคีมา (หากมี) และอัปโหลดการดำเนินการไปยังระบบคลาวด์ คุณควรดูสคีมาและดําเนินการในคอนโซลได้เช่นกัน ระบบจะอัปเดตอินสแตนซ์ Cloud SQL สำหรับ PostgreSQL ด้วยสคีมาและข้อมูลที่สร้างขึ้นซึ่งนำไปใช้งานแล้ว

ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้โปรแกรมจำลอง Data Connect ในเอกสารประกอบ

ขั้นตอนในเครื่อง: ใช้ SDK เพื่อเรียกคําค้นหาจากแอป

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

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'firebase_options.dart';

// Generated queries.
// Update as needed with the path to your generated SDK

import 'movies_connector/movies.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  
  
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Column(children: [
      ConstrainedBox(
        constraints: const BoxConstraints(maxHeight: 200),
        child: FutureBuilder(
            future: MoviesConnector.instance.listMovies().execute(),
            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,
                );
              }
              return const CircularProgressIndicator();
            }),
      )
    ])));
  }
}

ขั้นตอนถัดไป

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

• เพิ่มข้อมูลลงในฐานข้อมูล ตรวจสอบและแก้ไขสคีมา รวมถึงตรวจสอบบริการData Connectในคอนโซล Firebase

ดูข้อมูลเพิ่มเติมในเอกสารประกอบ ตัวอย่างเช่น เมื่อคุณทําตามการเริ่มต้นใช้งานอย่างรวดเร็วเสร็จแล้ว

• ดูข้อมูลเพิ่มเติมเกี่ยวกับการพัฒนาสคีมา การค้นหา และการเปลี่ยนรูปแบบ
• ดูข้อมูลเกี่ยวกับการสร้าง SDK ของไคลเอ็นต์และการเรียกใช้การค้นหาและการดัดแปลงจากโค้ดไคลเอ็นต์สําหรับเว็บ, Android, iOS และ Flutter