เริ่มต้นใช้งาน Firebase Data Connect ในพื้นที่

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

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

เลือกขั้นตอนการพัฒนาในเครื่อง

Data Connect มี 2 วิธีในการติดตั้งเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์และทำงานแบบออฟไลน์

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

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

  • Visual Studio Code
  • การติดตั้ง Node.js โดยจะใช้ nvm-windows สำหรับ Windows หรือ nvm สำหรับ macOS หรือ Linux
  • โปรเจ็กต์ Firebase หากยังไม่ได้สร้าง ให้สร้างในคอนโซล Firebase

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

  1. สร้างไดเรกทอรีใหม่สำหรับโปรเจ็กต์ในเครื่อง
  2. เปิด VS Code ในไดเรกทอรีใหม่
  3. ติดตั้งส่วนขยาย Firebase Data Connect จาก Visual Studio Code Marketplace

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

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

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

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

สร้างสคีมา

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

ภาพยนตร์

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

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

# By default, a UUID id key will be created by default as primary key.
# If you want to specify a primary key, say title, which you can do through
# the @table(key: "title") directive
type Movie @table {
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

MovieMetadata

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

# 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 คุณสามารถใช้ปุ่มเพิ่มข้อมูลและเรียกใช้ (ในเครื่อง) เพื่อเพิ่มข้อมูลลงในฐานข้อมูลในเครื่อง

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

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

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

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

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

กำหนดข้อความค้นหา

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

อย่างไรก็ตาม GraphQL สั้นกระชับกว่ามากและปลอดภัยจากประเภทข้อมูลมากกว่า SQL ดิบ ส่วนส่วนขยาย VS Code ของเราช่วยให้การพัฒนาเป็นไปอย่างง่ายดาย

เริ่มแก้ไขไฟล์ /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 ที่อยู่ใกล้เคียง

ฟีเจอร์ที่น่าตื่นเต้นมากคือความสามารถในการจัดการความสัมพันธ์ของฐานข้อมูลเหมือนกราฟ เนื่องจากระเบียน MovieMetadata มีฟิลด์ movie ที่อ้างอิงถึงภาพยนตร์ คุณจึงฝังลงในฟิลด์นั้นและรับข้อมูลเกี่ยวกับภาพยนตร์กลับมาได้ ลองเพิ่มประเภท movieMetadata_on_movie ที่สร้างขึ้นลงในข้อความค้นหา ListMovies

query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
    movieMetadata_on_movie {
        rating
    }
  }
}

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

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

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

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

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

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

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

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

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

  1. ไปที่ส่วนเชื่อมต่อข้อมูลของคอนโซล Firebase และสร้างอินสแตนซ์ Cloud SQL ช่วงทดลองใช้ฟรี

  2. ในเทอร์มินัลที่ผสานรวมกับ IDE ให้เรียกใช้ firebase init dataconnect และเลือกรหัสภูมิภาค/บริการที่คุณเพิ่งสร้างในคอนโซล

  3. เลือก "Y" เมื่อได้รับข้อความแจ้งว่า "ไฟล์ dataconnect/dataconnect.yaml มีอยู่แล้ว ต้องการเขียนทับไหม"

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

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

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

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

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

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