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

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

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

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

หากต้องการใช้การเริ่มต้นอย่างรวดเร็วนี้ในสภาพแวดล้อมในเครื่องของคุณ คุณจะต้องมีสิ่งต่อไปนี้

• Linux, macOS หรือ Windows
• โค้ด Visual Studio

เชื่อมต่อกับโปรเจ็กต์ Firebase

1. สร้างโปรเจ็กต์ Firebase หากยังไม่ได้สร้าง
   1. ในคอนโซลของ Firebase ให้คลิก เพิ่มโปรเจ็กต์ แล้วทำตามวิธีการบนหน้าจอ
2. ไปยังส่วน Data Connect ของคอนโซล Firebase และปฏิบัติตามเวิร์กโฟลว์การตั้งค่าผลิตภัณฑ์

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

4. เลือกตำแหน่งที่ตั้งของฐานข้อมูล CloudSQL สำหรับ PostgreSQL

5. จดชื่อและรหัสโปรเจ็กต์ บริการ และฐานข้อมูลไว้เพื่อใช้ยืนยันในภายหลัง

6. ทําตามขั้นตอนการตั้งค่าที่เหลือ แล้วคลิกเสร็จสิ้น

เลือกและตั้งค่าสภาพแวดล้อมการพัฒนาซอฟต์แวร์

Data Connect รองรับประสบการณ์การพัฒนา 2 แบบดังนี้

• หากคุณเป็นนักพัฒนาซอฟต์แวร์ Kotlin Android, iOS, Flutter หรือเว็บ คุณสามารถใช้การพัฒนาด้วย VS Code เพื่อออกแบบและทดสอบสคีมาและการดำเนินการในเครื่องขณะเชื่อมต่อกับอินสแตนซ์ Cloud SQL for PostgreSQL
• หากคุณเป็นนักพัฒนาเว็บ ก็สามารถใช้ IDX Development เพื่อสร้างต้นแบบได้ ในพื้นที่ทำงาน IDX โดยใช้เทมเพลต IDX ที่กำหนดค่าล่วงหน้าด้วย PostgreSQL ส่วนขยาย VS Code ที่มีโปรแกรมจำลอง Data Connect และไคลเอ็นต์การเริ่มต้นอย่างรวดเร็ว โค้ดให้กับคุณ คุณสามารถดูข้อมูลเพิ่มเติมได้ที่ เว็บไซต์ Project IDX

การเริ่มต้นใช้งานนี้จะเน้นที่ขั้นตอนการพัฒนาส่วนขยาย VS Code วิธีดำเนินการต่อ

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

3. ติดตั้งส่วนขยาย Firebase Data Connect จาก Visual Studio Code Marketplace

ตั้งค่าโปรเจ็กต์ที่อยู่ในเครื่อง

ติดตั้ง CLI โดยทําตามวิธีการทั่วไป หากคุณมี npm ติดตั้งแล้ว ให้เรียกใช้คำสั่งต่อไปนี้

npm install -g firebase-tools

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

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

ในแผงด้านซ้ายมือของ VS Code ให้คลิกไอคอน Firebase เพื่อเปิด UI ส่วนขยาย Firebase VS Code

1. คลิกปุ่มลงชื่อเข้าใช้ด้วย Google
2. คลิกปุ่มเชื่อมต่อโปรเจ็กต์ Firebase แล้วเลือกโปรเจ็กต์ที่คุณ ที่สร้างขึ้นก่อนหน้านี้ในคอนโซล
3. คลิกปุ่ม Run firebase init
4. หากโปรเจ็กต์อยู่ในแพ็กเกจ Blaze เมื่อได้รับข้อความแจ้ง "ต้องการกำหนดค่าทรัพยากรแบ็กเอนด์เลยไหม" ให้ตอบว่า "ใช่"

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

สร้างสคีมา

ในไดเรกทอรีโปรเจ็กต์ Firebase ใน /dataconnect/schema/schema.gql เริ่มกำหนดสคีมา GraphQL ที่มีภาพยนตร์

ภาพยนตร์

ใน 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
}

ข้อมูลเมตาของภาพยนตร์

เมื่อคุณมีภาพยนตร์แล้ว คุณสามารถสร้างรูปแบบข้อมูลเมตาของภาพยนตร์ได้

คัดลอกข้อมูลโค้ดต่อไปนี้หรือยกเลิกการคอมเมนต์บรรทัดที่เกี่ยวข้องในไฟล์

# 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 ในเอกสารประกอบ

ติดตั้งใช้งานสคีมาในเวอร์ชันที่ใช้งานจริง

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

1. คุณสามารถใช้ส่วนขยาย Data Connect ใน VS Code เพื่อทำให้ใช้งานได้
   • ใน UI ส่วนขยาย ใต้แผง Firebase Data Connect ให้คลิก ทำให้ใช้งานได้เป็นเวอร์ชันที่ใช้งานจริง
2. คุณอาจต้องตรวจสอบการเปลี่ยนแปลงสคีมาและอนุมัติสิ่งที่อาจเป็นอันตราย การเปลี่ยนแปลง ระบบจะแจ้งให้คุณดำเนินการดังนี้
   • ตรวจสอบการเปลี่ยนแปลงสคีมาโดยใช้ firebase dataconnect:sql:diff
   • เมื่อคุณพอใจกับการเปลี่ยนแปลงแล้ว ให้นำการเปลี่ยนแปลงไปใช้โดยใช้ขั้นตอนที่เริ่มโดย firebase dataconnect:sql:migrate

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

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

วิธีเพิ่มระเบียนลงในตาราง Movie

1. ใน schema.gql ให้คลิกปุ่มเพิ่มข้อมูลเหนือประกาศประเภท Movie
   
2. ในไฟล์ Movie_insert.gql ที่สร้างขึ้น ให้ฮาร์ดโค้ดข้อมูลสำหรับช่องทั้ง 4 ช่อง
3. คลิกปุ่มเรียกใช้ (เวอร์ชันที่ใช้งานจริง)
   

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

1. กลับไปที่ schema.gql แล้วคลิกปุ่มอ่านข้อมูล
2. ในไฟล์ Movie_read.gql ที่ได้ ให้คลิกเรียกใช้ (เวอร์ชันที่ใช้งานจริง) เพื่อเรียกใช้การค้นหา

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

กำหนดคำค้นหา

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

เริ่มแก้ไขไฟล์ /dataconnect/connector/queries.gql หากคุณต้องการดูภาพยนตร์ทั้งหมด ให้ใช้คำค้นหาดังนี้

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

# @auth() directives control who can call each operation.
# Anyone should be able to list all movies, so the auth level
# is set to PUBLIC
query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

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

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

สร้าง SDK และใช้ SDK นั้นในแอป

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

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

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

ดูวิธีใช้ SDK ที่สร้างขึ้นเพื่อเรียกใช้การค้นหาและการดัดแปลงจากแอปไคลเอ็นต์ (เว็บ, Android, iOS, Flutter)

ทำให้สคีมาและการค้นหาใช้งานได้จริง

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

หากคุณใช้ส่วนขยาย Firebase VS Code เพื่อทำให้ใช้งานได้ ให้คลิกปุ่มทำให้ใช้งานได้ในเวอร์ชันที่ใช้งานจริง

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

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

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

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

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

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

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