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

ในการเริ่มต้นอย่างรวดเร็วนี้ คุณจะได้ศึกษาวิธีทำสิ่งต่อไปนี้

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

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

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

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

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

  3. ไปยังส่วน Data Connect ของคอนโซล Firebase และปฏิบัติตามเวิร์กโฟลว์การตั้งค่าผลิตภัณฑ์

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

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

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

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

Data Connect รองรับประสบการณ์การพัฒนา 2 แบบสําหรับการสร้างต้นแบบ ได้แก่

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

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

  1. สร้างไดเรกทอรีใหม่สำหรับโปรเจ็กต์ในเครื่อง
  2. เปิด VS Code ในไดเรกทอรีใหม่
  3. ดาวน์โหลดส่วนขยายที่รวมอยู่ในแพ็กเกจ VSIX จาก Firebase Storage

  4. ใน VS Code ให้เลือกส่วนขยายจากเมนูดู

  5. ในแถบชื่อแผงส่วนขยาย ให้คลิกไอคอนเมนู more_horiz จากนั้นติดตาม ติดตั้งจาก VSIX...

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

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

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

npm install -g firebase-tools

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

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

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

ใน UI ของส่วนขยาย Firebase ให้ทำดังนี้

  1. ตรวจสอบว่าคุณได้ลงชื่อเข้าใช้แล้ว
  2. คลิกปุ่มเรียกใช้ firebase init
  3. ตรวจสอบพรอมต์ในแท็บ Terminal ของแผงด้านล่างใน VS Code
  4. เลือก Data Connect เป็นฟีเจอร์ที่จะใช้ในไดเรกทอรีนี้
  5. เมื่อได้รับข้อความแจ้ง ให้ป้อนรหัสโปรเจ็กต์ บริการ และฐานข้อมูลของโปรเจ็กต์ Data Connect ที่คุณสร้างไว้ก่อนหน้านี้ในคอนโซล

สร้างสคีมา

ในไดเรกทอรีโปรเจ็กต์ Firebase ให้เริ่มกำหนดสคีมา GraphQL ในไฟล์ /dataconnect/schema/schema.gql ที่มีผู้ใช้และอีเมล

ผู้ใช้

ใน Data Connect ระบบจะแมปฟิลด์ GraphQL กับคอลัมน์ ผู้ใช้มี uid, name และอีเมล address Data Connect จดจําประเภทข้อมูลพื้นฐานได้หลายประเภท ได้แก่ String และ Date

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

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

type User @table(key: "uid") {
   uid: String!
   name: String!
   address: String!
}

โดยค่าเริ่มต้น Firebase Data Connect จะเพิ่มคีย์ UUID id หากไม่มีคีย์ใดคือ ที่มีให้ อย่างไรก็ตาม ในกรณีนี้คุณต้องการให้ uid ของฉันเป็นคีย์หลัก ซึ่งคุณทําได้ผ่านคําสั่ง @table(key: "uid")

อีเมล

เมื่อมีผู้ใช้แล้ว คุณก็สร้างแบบจำลองอีเมลได้ ตรงนี้คุณสามารถเพิ่มฟังก์ชัน ฟิลด์ (หรือคอลัมน์) สำหรับข้อมูลอีเมล ในครั้งนี้ เราจะไม่เพิ่มคีย์หลักเนื่องจากคุณใช้ Data Connect ในการจัดการได้

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

type Email @table {
   subject: String!
   sent: Date!
   text: String!
   from: User!
}

โปรดสังเกตว่าฟิลด์ from แมปกับประเภท User แล้ว Data Connect เข้าใจว่านี่คือความสัมพันธ์ระหว่าง Email และ User และจะจัดการความสัมพันธ์นี้ให้คุณ

ทำให้สคีมาใช้งานได้เป็นเวอร์ชันที่ใช้งานจริง

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

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

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

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

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

  1. ใน schema.gql ให้คลิกปุ่มเพิ่มข้อมูลด้านบนประเภท User ประกาศ
    ปุ่มเพิ่มข้อมูลของ Code Lens สําหรับ Firebase Data Connect
  2. ในไฟล์ User_insert.gql ที่สร้างขึ้น ข้อมูลฮาร์ดโค้ดสำหรับ 3 ฟิลด์
  3. คลิกปุ่มเรียกใช้ (เวอร์ชันที่ใช้งานจริง)
    ปุ่มเรียกใช้เลนส์โค้ดสําหรับ Firebase Data Connect
  4. ทำขั้นตอนก่อนหน้าซ้ำเพื่อเพิ่มระเบียนลงในตาราง Email โดยมี uid ของผู้ใช้ในช่อง fromUid ตามที่แจ้งไว้ในช่อง การเปลี่ยนแปลง Email_insert

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

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

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

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

query ListEmails @auth(level: NO_ACCESS) {
  emails {
    id, subject, text, sent
    from {
      name
    }
  }
}

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

คุณลักษณะที่น่าสนใจอย่างยิ่งตรงนี้คือความสามารถในการดำเนินการกับฐานข้อมูล ความสัมพันธ์เหมือนกราฟ เนื่องจากอีเมลมีฟิลด์ from ที่อ้างอิง ผู้ใช้ คุณสามารถฝังลงในช่องและรับข้อมูลเกี่ยวกับผู้ใช้กลับคืนได้

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

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

หากใช้ส่วนขยาย Firebase VS Code เพื่อติดตั้งใช้งาน ให้คลิกปุ่มติดตั้งใช้งาน

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

(ไม่บังคับ) ติดตั้ง PostgreSQL ในเครื่อง

การติดตั้ง PostgreSQL ในเครื่องและการผสานรวมกับโปรแกรมจำลองจะช่วยให้คุณ ต้นแบบในสภาพแวดล้อมการพัฒนาภายในท้องถิ่นอย่างสมบูรณ์

คุณจะติดตั้งอินสแตนซ์ใหม่ของ PostgreSQL หรือใช้อินสแตนซ์ที่มีอยู่ก็ได้

ติดตั้ง PostgreSQL

ติดตั้ง PostgreSQL เวอร์ชัน 15.x โดยทําตามวิธีการสําหรับแพลตฟอร์มของคุณ

จดชื่อโฮสต์ พอร์ต ชื่อผู้ใช้และรหัสผ่าน รวมถึงเอาต์พุตพารามิเตอร์ที่เกี่ยวข้องระหว่างลำดับการติดตั้ง

หากต้องการเชื่อมต่อกับอินสแตนซ์ PostgreSQL โปรแกรมจำลองจะต้องมีสิ่งต่อไปนี้

  • พารามิเตอร์การกําหนดค่าการตั้งค่าเหล่านี้
  • ชื่อฐานข้อมูลจาก dataconnect.yaml และชื่อที่สอดคล้องกัน เริ่มต้นฐานข้อมูลในอินสแตนซ์ในเครื่องแล้ว

ใช้อินสแตนซ์ PostgreSQL ในเครื่อง

คุณสามารถใช้อินสแตนซ์ PostgreSQL ที่มีอยู่ในพื้นที่ได้โดยอัปเดตการตั้งค่าData Connectโปรแกรมจำลอง

firebase setup:emulators:dataconnect

เมื่อได้รับข้อความแจ้ง ให้ป้อนสตริงการเชื่อมต่อ PostgreSQL ในรูปแบบนี้ postgresql://postgresusername:postgrespassword@localhost:5432/postgresdatabase?sslmode=disable

ดูข้อมูลเพิ่มเติมเกี่ยวกับสตริงการเชื่อมต่อได้ที่เอกสารประกอบ PostgreSQL

เชื่อมต่อกับอินสแตนซ์ PostgreSQL ในเครื่อง

เมื่อกําหนดค่าเสร็จแล้ว ให้เชื่อมต่อกับฐานข้อมูลในเครื่องโดยทำดังนี้

  1. ใน VS Code ให้คลิกไอคอน Firebase ในแผงด้านซ้ายเพื่อเปิด UI ของส่วนขยาย Firebase VS Code
  2. คลิกปุ่มเชื่อมต่อกับ PostgreSQL ในเครื่อง

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