ลอง Firebase Data Connect

Firebase Data Connect คืออะไร

https://firebase.google.com/docs/data-connect

Firebase Data Connect เป็นบริการ Relational Database ที่ช่วยให้เราสร้างและขยายระบบได้ด้วยฐานข้อมูล PostgreSQL ที่มีการจัดการเต็มรูปแบบโดยใช้ Cloud SQL โดยบริการนี้มีการจัดการตั้งแต่ การจัดการ schema การ query และการจัดการ mutation อย่างปลอดภัยผ่าน GraphQL ซึ่งทำงานร่วมกับ Firebase Authentication ได้เป็นอย่างดี

รวมถึงเราสามารถรวม Data Connect นี้เข้าได้กับ SDK ในทุกๆ Platform ตั้งแต่ Kotlin Android, iOS, Flutter และ web (ซึ่งในบทความนี้ เราจะแสดงตัวอย่างผ่าน platform web กัน)

รวมถึง Data Connect ช่วยให้เราสามารถกำหนด Model ข้อมูลของ application และระบุ query ที่ application ของเราได้อย่างชัดเจน ผ่านการใช้ Data Model template ที่ Firebase ได้กำหนดมาให้ โดยระบบจะ

• สร้าง schema ของฐานข้อมูล PostgreSQL ให้สอดคล้องกับ Model ของเราโดยอัตโนมัติ
• สร้าง server endpoint ที่ปลอดภัยสำหรับติดต่อกับฐานข้อมูล
• สร้าง SDK ที่รองรับการตรวจสอบประเภทข้อมูลสำหรับ application ในฝั่ง client เพื่อสื่อสารกับ server endpoint ราวกับเป็น “self-driving app server” ที่สร้างขึ้นโดยเฉพาะสำหรับ application นี้

ถ้าพูดให้เข้าใจง่ายๆคือ “มันคือบริการแบบ Full service ที่ support ทั้ง database, authentication, interface data model ผ่าน GraphQL และ บริการ server แบบครบวงจร“

ในหัวข้อนี้ เราจะพาทุกคนมาลองเล่น Data Connect กัน โดยจะเป็นการพาทำความเข้าใจ concept หลักของ Data Connect และให้ดูผ่านตัวอย่างผ่านการ setup Data Connect ใน Firebase เพื่อให้ทุกคนสามารถไปต่อยอดต่อและประยุกต์ใช้ต่อกันได้นะครับ

โดยตัวที่เราจะเล่นผ่าน Node.js ต่อเข้าไปยัง Data Connect กันซึ่งเป็นท่าที่ง่ายสำหรับเรา โดยทุกคนสามารถดูตัวอย่างได้ผ่าน Github นี้ได้เลย

https://github.com/mikelopster/template-firebase-data-connect

ขอแชร์ไว้หนึ่งอย่างก่อนว่า เพื่อให้หัวข้อนี้กระชับ หลายๆเรื่องของ GraphQL เราจะไม่ได้ลงรายละเอียดไว้มาก เนื่องจากให้หัวข้อมา focus กันที่หลักการของ Data Connect แต่ทั้งนี้ หลักการ GraphQL ที่ Data Connect ใช้นั้น ก็ใช้ตามพื้นฐานของ GraphQL ทั่วไป ทุกคนสามารถไปอ่านเพิ่มเติมกันได้เลยนะครับ (ไว้มีโอกาสเราจะทำหัวข้อเจาะลึก GraphQL กันนะครับ 😆)

ส่วนสำหรับใครที่สนใจว่า “ทำไม Firebase ตัดสินใจใช้ GraphQL” สามารถอ่านเพิ่มเติมได้จากบทความนี้เช่นกันนะครับ

https://firebase.blog/posts/2024/10/dataconnect-graphql

Concept หลักของการใช้ Firebase Data Connect

https://firebase.blog/posts/2024/10/data-connect-public-preview

อย่างที่เราทราบว่า บริการ Firebase Data Connect นั้นเป็นบริการที่ไม่ได้ให้เราต่อ Database โดยตรง แต่เป็นบริการที่จะมาเป็นเสมือนตัวแทนที่เป็นคนไปคุยกับ Database Cloud SQL ให้ ดังนั้น ทุกอย่างจะ ถูกควบคุมผ่าน GraphQL ที่อยู่ใน Firebase Data Connect ทั้งหมดไม่ว่าจะเป็น

• การจัดการ Schema
• query Database
• update Database (ผ่าน mutation)
• role และ authentication

ดังนั้น หากเรามีการ update ใดๆ ก็ตามเกิดขึ้น ทุกครั้งจะต้องเป็นการ deploy service Firebase Data Connect เสมอ ก่อนที่จะสามารถใช้งาน Database Cloud SQL ได้

ดังนั้น Step ของการใช้งาน Data Connect เพื่อใช้งาน SQL Database ได้ สิ่งที่จะต้องทำคือ

1. สร้าง project Firebase และเปิดใช้งาน Data Connect พร้อมกับ Cloud SQL (ซึ่งสามารถเปิดได้ผ่าน Firebase ได้เลย)
2. เริ่มต้น code Firebase ผ่าน firebase init พร้อมเลือกใช้งาน service data connect = จะได้ template สำหรับการเริ่มต้นใน Data Connect ออกมา
3. ทำการ update Schema ผ่าน code gql ใน Data Connect
4. ทำการ Deploy Schema ขึ้น Data Connect ใน Firebase เพื่อทำการ migrate database เข้า Cloud SQL (step นี้เราแค่ทำผ่าน GraphQL อย่างเดียว ที่เหลือ Firebase จะ migration หลังบ้านให้)
5. เมื่อเรียบร้อย ให้ลองยิง Test add ข้อมูลดู หากสามารถเพิ่มข้อมูลและ query ข้อมูลได้ (ซึ่งสามารถทำได้ผ่านหน้าจอ Firebase) ก็เท่ากับว่า เราสามารถใช้งาน Database Cloud SQL ผ่าน Data Connect ได้แล้วเรียบร้อย

เราจะลองมาเริ่มต้นจาก 5 Step นี้ก่อน เพื่อเริ่มต้นใช้งาน Data connect ใน Firebase กัน

Start Project Firebase

Step แรกสุดให้สร้าง project Firebase ขึ้นมา และไปยัง Service Data connect

ตอนที่กด Get start ครั้งแรกสุดที่หน้า Data connect จะให้เลือกก่อนว่าจะใข้ CloudSQL ที่มีอยู่แล้ว หรือเป็น CloudSQL ตัวใหม่ เนื่องจากเราพึ่งสร้าง project + ช่วงนี้สำหรับ project ใหม่ยังมี free tier ให้ใช้งานได้ 3 เดือน เราจะเลือกสร้างเป็นเครื่องใหม่เพื่อใช้สิทธิประโยชน์นี้กัน

โดยตอนกดสร้าง จะต้องกด Upgrade Plan เพื่อ update billing ให้เรียบร้อยก่อน

ทำการตั้งชื่อ instance ให้กับ Cloud SQL และเลือก zone ของ database (ในที่นี้เราจะเลือกโซนใกล้ไทยที่สุดนั่นคือ Singapore)

เสร็จแล้วตั้งชื่อ Service ID ให้กับ Data Connect (เป็น service id ที่ใช้ภายในของ Firebase Data Connect เอง)

เมื่อสร้างเรียบร้อย หน้าจอก็จะขึ้นคำแนะนำให้อ่านตัว setup guide ผ่าน vs code ขึ้นมา ซึ่งตัว VS Code จะมี Extension สำหรับจัดการ Firebase Data Connect อยู่ (เดี๋ยวจะมีอธิบายเพิ่มเติมในบทความนี้)

แต่เพียงเท่านี้ เท่ากับว่า เราได้ทำการสร้าง project Firebase, Cloud SQL และ Data Connect ที่เชื่อมกับ Cloud SQL เป็นที่เรียบร้อย

Step ต่อไป เราจะเริ่มมา update ส่วน schema กับ data ผ่าน Firebase Data Connect ด้วย VS Code กัน

Start Code Project

เรามาเริ่มต้น project ที่ส่วนของ code กันบ้าง เริ่มต้นเราสามารถเริ่มสร้าง project จาก Firebase init ขึ้นมาได้

firebase init

เมื่อตอน init project ขึ้นมา ก็จะเหมือนการใช้คำสั่ง Firebase init ทั่วไปที่สามารถเลือกใช้งาน Service Firebase ได้ สังเกตว่า จะมีตัว Data Connect โผล่ขึ้นมาให้เลือก สามารถกดเลือก service ได้เลย

เลือก project เดียวกันกับ project Firebase ที่ได้เปิด Data Connect ไว้

เมื่อเสร็จเรียบร้อย ให้เปิด project ขึ้นมา

เมื่อเปิด project ขึ้นมา เราจะเจอ structure เริ่มต้น พร้อมกับ folder dataconnect

โดยใน folder นี้จะมี 3 จุดหลักๆที่เราสนใจคือ

• dataconnect.yaml (ตามภาพ) คือ config connection ที่ทำให้ code project Firebase ต่อเข้ากับ data connect ได้
• schema สำหรับเก็บ schema ข้อมูลของ Database SQL ใน format graphql (เดี๋ยวเราจะเล่นกันในหัวข้อการ migration data กัน)
• connector สำหรับเก็บตำแหน่ง generate package สำหรับใช้เชื่อมต่อกับ Data Connect ใน platform ต่างๆ (ซึ่งเราจะอธิบายเพิ่มเติมกันในหัวข้อที่จะนำ web app ต่อผ่าน Data Connect)

โดยไฟล์แรกสุดที่เราจะสนใจคือ dataconnect.yml ก่อนว่า ได้เชื่อมต่อไปยัง Service ID, instance, database ถูกตัวแล้วหรือไม่

โดยไฟล์นี้จะ generate มา auto จาก firebase init เช่นกัน หากมี database ใน Data Connect มีแค่ตัวเดียว มันก็จะทำการหยิบตัวนั้นให้อัตโนมัติเลย

เมื่อ config ถูกต้องเรียบร้อย เราจะเริ่มมาสร้าง schema database และลองต่อเข้า database กัน

เริ่มต้น Migrate Database เข้า Data Connect

Ref: https://firebase.google.com/docs/data-connect/quickstart

ก่อนที่เราจะลุยกัน เราจะแบ่ง Step ทำออกเป็น 2 ขั้นตอนคือ

1. สร้าง schema โดยทำการ deploy ผ่าน GraphQL schema template
2. ทำการลองเพิ่ม data และ อ่าน data ผ่าน schema นั้น

โดยเครื่องมือและวิธีทั้งหมด สามารถ follow ตามเอกสารของ Firebase ได้เช่นเดียวกัน โดยก่อนจะเริ่ม ขอแนะนำให้ทุกคนติดตั้ง Extension VS Code สำหรับการจัดการ Data Connect (ตามคำแนะนำของ document) ตัวนี้ก่อนเลยนะครับ

https://firebase.google.com/docs/data-connect/quickstart

เริ่มสร้าง Schema

ใน Firebase data connect จะใช้ file schema/schema.gql ในการควบคุม schema ของ database

โดย concept หลักของไฟล์นี้คือ จะทำการควบคุมผ่าน query ชื่อ type ตามด้วยชื่อ table และระบุประเภท query เป็น @table เพื่อบอกว่า GrqphQL query นี้ใช้สำหรับการจัดการ table โดยเฉพาะ

หลังจากนั้น ก็จะสามารถประกาศขื่อ field และประเภทของ field ใน table นั้นออกมาได้

ซึ่งแน่นอน Firebase ก็กลัวเราสับสนกับเรื่องนี้ ในตัวที่ Firebase ได้ generate code comment template มาให้แล้วคือ table Movie

เพื่อให้ทุกคนเห็นภาพการใช้งานด้วย table ที่ง่ายที่สุด เราจะขอใช้ table Movie ตาม template เลย ทุกคนสามารถลองโดยการปลด comment table Movie เพื่อทำการใช้งาน code ประกาศ schema Movie

(แต่ถ้าสังเกต มันไม่ได้มีตัวอย่างแค่แบบเดียวนะ มีตัวอย่าง table หลายแบบรวมถึง relation ให้แล้วเรียบร้อย เราสามารถนำเป็น template ไปใช้ต่อได้เช่นเดียวกัน)

ตัวอย่าง code schema.gql

# Movies
type Movie @table {
  # The below parameter values are generated by default with @table, and can be edited manually.
  # implies directive `@col(name: "movie_id")`, generating a column name
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

ตัวอย่าง

เมื่อปลด comment เรียบร้อย เราจะสามารถตรวจสอบก่อนได้ว่า Schema ที่ deploy จริงอยู่บน Data Connect กับ Schema ที่อยู่ใน schema file (schema.gql) นั้นมี Schema ที่แตกต่างกันอย่างไรบ้าง ก่อนที่จะ deploy ขึ้น Cloud SQL ผ่าน Data Connect ได้ผ่าน command นี้

firebase dataconnect:sql:diff

เราก็จะเจอว่า ตัว Firebase Data Connect จะทำการนำ GraphQL schema ไปทำการเช็ค diff (ความแตกต่างระหว่าง schema บน local และ server) และได้ผลลัพธ์เป็น script SQL สำหรับการทำ migration database ขึ้นมา ก็จะเป็นการ confirm ว่านี่คือ SQL query migration ที่จะเกิดขึ้นหลังจากที่ deploy schema GraphQL ตัวนี้ขึ้นไป

หลังจากนั้น run คำสั่ง migration เพื่อสร้าง SQL query migration ของจริงขึ้นมา

# run migrate
firebase dataconnect:sql:migrate

เมื่อ run migration เรียบร้อย service data connect ก็จะระบุว่า ตอนนี้ script migration พร้อมแล้ว สามารถนำ deploy ขึ้น Firebase ได้เลย

จากนั้น ก็สามารถ deploy ด้วยท่ามาตรฐานของ Firebase ด้วยคำสั่งนี้ได้เลย

firebase deploy

เมื่อทำการ Deploy เรียบร้อย console ก็จะแจ้งว่า deploy เรียบร้อย

เมื่อเรากลับมาที่ Firebase console ผ่านเว็บตัว setrvice data connect ก็จะเจอ table Movie โผล่ออกมาพร้อม field ที่ทำการกำหนดผ่าน GraphQL ออกมาได้

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

เท่านี้ step การสร้าง table ตาม schema ใน cloud sql ก็ถือว่าเสร็จเรียบร้อย และหากต้องการเพิ่ม table หรือ update table อะไรเข้าไป ก็สามารถ update ผ่าน schema และใช้วิธีการเดิมในการ deploy ได้เลย

ทดลองสร้างข้อมูลและ Query

Step ต่อมา เราจะมาลองทดสอบเพิ่มข้อมูลและอ่านข้อมูลเข้า table ที่เราได้สร้างไว้ โดยตัว Extension ของ Data Connect นั้น สามารถสร้างคำสั่ง GraphQL ผ่าน Extension ออกมาได้

หากเรากลับไปที่ schema.gql เราจะเจอ 2 คำอยู่ด้านบน นั่นคือ Add Data, Read Data

หากเราลองกด Add Data ดู ตัว Extension ก็จะทำการสร้าง mutation (ออกมาเป็นไฟล์ใหม่) สำหรับ insert ขึ้นมาตาม schema ที่กำหนดไว้ พร้อมกับ field ตัวอย่างใน mutation ที่เราสามารถมาลองใส่ Data เพิ่มได้

โดยก่อนจะทำการส่งคำสั่ง mutation เพื่อเพิ่ม data ใน database เพื่อความแน่ใจว่าตัว Firebase นั้น connect อยู่ถูก project แล้วเรียบร้อย สามารถตรวจสอบผ่าน Extension ใน VS Code ได้โดยกดไปตรงตัว Extension Firebase Data Connect

และกดตรงตัว project หรือดูชื่อ project เพื่อตรวจสอบได้ว่าอยู่ถูก project แล้วหรือไม่ (อย่างในภาพนี้คืออยู่ project mikelopster-test-connect ถูกต้องแล้วเรียบร้อย)

โดยเราสามารถทดสอบได้จากการกด run ใน Extension ได้เลย เมื่อ run เรียบร้อย เราจะเห็นผลลัพธ์ออกทาง Firebase Data Connect ตรง Console ด้านล่างว่าดำเนินการแล้วเรียบร้อย

สามารถ recheck ได้โดยการมา query ผ่าน Firebase Console ที่หน้าเว็บส่วน Data Connect โดยการกด “Run movies” เพื่อ run query สำหรับดึงข้อมูลของ Movie ออกมา

ถ้าสามารถแสดงข้อมูล movie ตัวเดียวกับที่เรา insert เข้าไป เท่ากับการ insert ข้อมูลทำได้ถูกต้องแล้วนั่นเอง

เพิ่มเติมเรื่อง mutation ของ GraphQL นิดนึง mutation movie_insert ที่ใช้สำหรับการเพิ่มข้อมูลเข้าไปนั้น เป็น mutation ที่ Firebase Data Connect ได้ทำการ generate เริ่มต้นมาให้ เพื่อใช้สำหรับ operation ทั่วไป CRUD ภายใน table ของ Cloud SQL

โดยทุกคนสามารถอ่านเพิ่มเติมผ่านเอกสาร https://firebase.google.com/docs/data-connect/schemas-queries-mutations ของ Firebase ได้ โดยชื่อด้านล่างนี้จะเป็น mutation default ที่ Data Connect เป็นสร้างมา ที่เรา “ไม่สามารถใช้ชื่อซ้ำ” ในการสร้าง mutation ของตัวเองออกมาได้ (เดี๋ยวเรามีอธิบายการสร้าง mutation เพิ่มเติมอีกที)

type Movie @table { ... }

extend type Mutation {
  # Insert a row into the movie table.
  movie_insert(...): Movie_Key!
  # Upsert a row into movie."
  movie_upsert(...): Movie_Key!
  # Update a row in Movie. Returns null if a row with the specified id/key does not exist
  movie_update(...): Movie_Key
  # Update rows based on a filter in Movie.
  movie_updateMany(...): Int!
  # Delete a single row in Movie. Returns null if a row with the specified id/key does not exist
  movie_delete(...): Movie_Key
  # Delete rows based on a filter in Movie.
  movie_deleteMany(...): Int!
}

Step ต่อมา เราจะลองสร้าง custom query สำหรับดึงข้อมูลออกมา โดยในโครงสร้างของ Data Connect นั้นมี folder ชื่อ connector ที่จะรวมข้อมูล 3 อย่างเอาไว้คือ

• connector.yaml config สำหรับ export query และ mutation ไปให้ฝั่ง application ใช้
• queries.gql query ของ GraphQL ใช้ภายใน service Data Connect นี้
• mutations.gql mutation ของ GraphQL ใช้ภายใน service Data Connect นี้

เราจะเริ่มต้น query โดยการสร้าง query อันนึงขึ้นมาก่อนชื่อ ListMovies (จริงๆมันคือ query ที่ Firebase เตรียมไว้ให้ตอน init project นั่นแหละ สามารถปลด comment ลองได้เลย) โดย องค์ประกอบหลักๆของ query นั้นจะประกอบด้วย 3 อย่าง

1. query GraphQL ที่จะระบุ query พร้อมชื่อ query (ซึ่งก็จะเป็นตาม pattern ของ GraphQL)
2. table และ field ที่จะดึงออกมาผ่าน query
3. ระบุ authorization query (ว่าสามารถ access ได้ทุกคน หรือเฉพาะ user ที่ต้อง login) ซึ่งจะกำหนดผ่าน level ตรง @auth ของ GraphQL query

code

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

ผลลัพธ์

เมื่อสร้าง query เรียบร้อย สามารถลอง query ผ่าน Extension ก่อนได้

ต้องได้ผลลัพธ์มาถูกต้องตามที่เขียนไว้ (เช่นเคสนี้ สามารถดึงข้อมูลมาได้จากที่เคย insert ข้อมูลเข้าไปได้)

Step ต่อมา นำ query ที่สร้าง deploy ขึ้น Data Connect (แบบเดียวกับเวลา deploy schema)

firebase deploy

เมื่อ Firebase deploy เรียบร้อย (จะขึ้น success ทรงๆเดิมกับที่เคยทำกับ schema) สามารถมาตรวจสอบผ่าน Operations ในหน้า Data Connect ของ Firebase ได้ หากขึ้นชื่อ query เดียวกันเรียบร้อยในหน้า Firebase ก็เท่ากับว่าสามารถใช้งาน query นี้ได้แล้ว

Step ต่อมา เราจะมาเริ่ม generate SDK เพื่อให้ web application สามารถเข้าถึง GraphQL ที่เราสร้างไว้กันได้

ต่อ Web SDK

https://firebase.google.com/docs/data-connect/web-sdk

ในขั้นตอนนี้ สิ่งที่เราจะต้องทำมีด้วยกัน 2 อย่างคือ

1. ทำการ generate sdk ที่ทำให้ web รู้จัก query ที่เราสร้างไป
2. ลองทดสอบ query ผ่าน node.js กัน เพื่อดูผลลัพธ์

เราจะมาเริ่มทำไปทีละขั้นตอนกัน

generate SDK

ตัว Firebase Data Connect ได้เตรียมขั้นตอนไว้ให้แล้วตั้งแต่ตอน firebase init แล้วเช่นกัน โดยสามารถแก้ไข config ได้ที่ connector/connector.yaml

โดยในไฟล์นี้จะเป็นการระบุ path ที่จะทำการ generate sdk ออกมา โดยในตัวไฟล์ yaml นี้ ถ้าเราเข้ามาดูจะเจอว่ามี code อยู่แล้วเช่นกัน โดยจะมี sdk ของทุก platform กำหนดเป็น template เอาไว้ให้ โดยในเคสนี้ เราจะใช้งานร่วมกับ web ซึ่งเป็นส่วนของ javascript ดังนั้น เราจะทำการ generate sdk ของ javascript ออกมา

ให้ทำการปลด comment ส่วน javascriptSdk ออก และทำการแก้ไข path โดย

• outputDir จะเป็น path folder ที่ sdk generate ออกมา ซึ่งในที่นี้ เราจะให้ path ที่ generate ออกมา อยู่ระกับเดียวกับ folder dataconnect เราจึงทำการระบุ path เป็น ../../movies-generated โดยตำแหน่งสุดท้ายคือชื่อ folder ที่จะทำการ generate ออกมา (แต่อันนี้ขึ้นอยู่กับ project จริงที่เราจะวางด้วยนะครับ ไม่ fix ว่าต้องเป็นตำแหน่งนี้นะครับ)
• package คือชื่อของ package ที่ใช้สำหรับ import ใช้งานภายใน web ซึ่งจะสามารถนำไปกำหนดไว้ผ่าน package.json เพิ่มเติมได้ เพื่อให้ import ใช้งาน library ได้สะดวกขึ้น

โดยหากใครที่ลง extension ของ Firebase Data Connect ไว้ หลังจากที่แก้ connector.yaml เสร็จ มันจะทำการสร้าง folder Sdk ขึ้นมาอัตโนมัติตามตำแหน่งที่ระบุตรง output เลย (คือแก้ปุ๊บ ขึ้นปั๊บเลย)

โดยหากใครไม่ได้ผลลัพธ์ folder output ออกมาสามารถ run ผ่าน command นี้ได้เช่นกัน

firebase dataconnect:sdk:generate

โดยเมื่อ run command เสร็จ ก็จะมีแจ้งผลลัพธ์ออกมาว่า แสดงผลผ่าน output ออกมาแล้ว เรียบร้อยนั่นเอง

เมื่อทำการสร้าง SDK เรียบร้อย เราจะลองมา start project node.js กันโดยใช้คำสั่ง npm init และทำการลง package ของ Firebase ลงไป โดยทำที่ตำแหน่งเดียวกันกับที่ใช้ Firebase data connect เลย (ตรง root project) เสร็จแล้วจะได้ package.json ออกมา

npm init
npm install firebase

ทำการเพิ่มใน package.json เพื่อเรียกใช้งาน SDK ที่เพิ่ม generate เข้ามา โดยทำการอ้างอิงตาม path ที่ทำการ reference ไปยัง movies-generated เพื่อทำการ map sdk เข้ากับ project node.js ที่ทำการสร้างขึ้นมา โดยชื่อ package เราก็ทำการตั้งชื่อเดียวกันกับที่ generate ขึ้นมา เช่นตาม code ด้านล่างนี้

{
  "name": "mikelopster-test-connect",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "@movie-app/movies": "file:movies-generated", // เพิ่ม mapping sdk เข้ามา
    "firebase": "^10.14.1"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

ตัวอย่าง

Step ต่อมาทำการเพิ่ม config Firebase เข้า project เพื่อให้ project node.js สามารถ connect เข้า service ของ Firebase ได้ (ถ้าใครที่เคยทำ Firebase มาก่อน มันคือ step ที่จะทำการ import firebaseConfig เข้ามานั่นแหละ เป็นวิธีเดียวกันเลย)

ทำการเลือก platform ที่จะทำการเชื่อมต่อ (ซึ่งในทีนี้คือ node.js ซึ่งเราใช้ javascript ที่เป็น technology เดียวกับฝั่ง web sdk)

ทำการกดไล่ ตาม step มาจนถึงจุดที่ลง package ของ firebase ให้นำ config ของ Firebase มาทำการ install เข้า project

โดย Structure project ที่ทั้งหมดที่เราจะวาง เราจะวางลักษณะประมาณนี้

.
├── app.js <-- เพิ่มตัว config หลัก (ตัวที่เราจะวาง Firebase Config เอาไว้เพื่อเรียกใช้งาน)
├── dataconnect <-- ตัว dataconnect ที่ firebase สร้างมา
├── firebase.json
├── main.js <-- ตัวหลักสำหรับการใช้งาน Firebase Data Connect
├── movies-generated <-- sdk ที่ generate มาจาก Data Connect
├── package-lock.json
└── package.json

ทำการสร้าง app.js ขึ้นมาแล้วใส่ Firebase config ตามที่ได้จาก Firebase เข้าไป

• โดยนอกเหนือจากการ init Firebase app แล้วให้ทำการ init instance ของ dataConnect ขึ้นมาด้วย
• โดยวิธีการ init นั้น ถ้าใครที่เคยใช้ Firestore หรือ service อื่นๆของ Firebase มา ท่าจะเหมือนๆกันนั่นคือ import คำสั่งเข้ามา และทำการนำตัวแปร app ที่ init เอาไว้มาใช้งานร่วมกัน
• โดย Firebase Data Connect ได้เตรียม function สำหรับการสร้าง instance เอาไว้ชื่อ getDataConnect โดยจะต้องใส่ parameters 2 ตัวคือ app (ที่มาจาก Firebase Config) และ connectorConfig (ที่มาจาก sdk ที่ generate มา)
• โดย connectorConfig นั้นจะเป็น config สำหรับ Firebase Data Connect ที่จะทำการระบุตำแหน่งของ service data connect ว่าจะต้องต่อไปยังที่ไหน (จุดที่เราเคยทำการกำหนดชื่อไว้ 3 จุดตอนแรกใน dataconnect/dataconnect.yaml)
• ดังนั้น เราจึงสามารถ instance init data connect ได้จากการใส่ 2 ค่าตามที่กล่าวมาตาม code ด้านล่างนี้ได้เลย

import { initializeApp } from 'firebase/app'
import { getDataConnect } from 'firebase/data-connect'
import { connectorConfig } from '@movie-app/movies'

// Your web app's Firebase configuration
const firebaseConfig = {
  /* firebase config */
}

// Initialize Firebase
const app = initializeApp(firebaseConfig)

// Initialize Data Connect และนำตัว dataConnect ส่งออกไปใช้งาน
export const dataConnect = getDataConnect(app, connectorConfig)

ตัวอย่าง

เพียงเท่านี้ที่ main.js ก็จะสามารถเรียกใช้งาน Firebase Data Connect ได้แล้วผ่าน instance dataConnect เป็นที่เรียบร้อย โดยเราสามารถทดสอบได้จากการ import

1. dataConnect ที่เป็น instance ของ Firebase Data Connect
2. listMovies ที่ import function จาก sdk เข้ามา โดย function นี้จะเป็น function สำหรับการ query ข้อมูล table movies ออกมาผ่าน GraphQL

ถ้าทุกคนรู้สึก funtion listMovies คุ้นๆ ใช่ครับ มันคือ query ที่เราได้ทำการสร้างผ่านการ generate SDK เข้ามา โดย function นี้จะเป็น query ที่ทำการสร้างชื่อเดียวกันกับที่สร้างใน GraphQL โดยเราจะได้ function ที่ชื่อเหมือนกันนี้มาเพื่อใช้จุดประสงค์เดียวกันกับ query ออกมาได้

import { dataConnect } from './app.js'
import { listMovies } from '@movie-app/movies'

try {
  const result = await listMovies(dataConnect)
  console.log(result.data.movies)
} catch (error) {
  console.error(error)
}

/*
GraphQL ที่เราได้สร้างไว้ที่ connector/queries.gql

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

ซึ่งถ้า map ดูกับ query ก็จะค้นพบว่าชื่อเหมือนกันเลย (แค่เปลี่ยนเป็น camel case ตอนออกมาเป็น sdk function javascript)

เมื่อเราลอง run ดู ก็จะได้ผลลัพธ์ที่เหมือนกันกับตอนยิง query GraphQL ออกมาได้

และนี่ก็คือ ท่าที่ใช้สำหรับการ Query GraphQL และการนำ Query เดียวกันมาใช้งานใน application จะเห็นว่า ตัว Firebase Data Connect นั้น ได้อำนวยความสะดวกในการ convert GraphQL ให้กลายมาเป็น function ที่สามารถใช้งานใน SDK ได้เลย

ซึ่งจุดนี้สำหรับเรา เรามองว่าเป็นจุดที่ดีมากนะ ส่งผลทำให้ code สำหรับการจัดการ logic เรื่อง query สามารถรวมอยู่ที่ GraphQL จุดเดียวได้ และไม่ต้องกังวลเรื่อง code ว่า code จะผิดหรือไม่ ขอแค่เรียกใช้ให้ถูกต้อง ก็จะได้ผลลัพธ์ที่เหมือนกันออกมาได้แล้วเรียบร้อย

เพิ่ม Mutation

ลองกันอีกสักเคสคือ Mutation ใน GraphQL กัน โดย Mutation ใน GraphQL คือคำสั่งที่ใช้สำหรับการเปลี่ยนแปลงข้อมูล เช่น การเพิ่ม แก้ไข หรือลบข้อมูล ซึ่งต่างจาก Query ที่ใช้สำหรับการดึงข้อมูลเท่านั้น

ซึ่งอย่างที่เราอธิบายไปตอนแรก Firebase Data Connect จริงๆได้เตรียม mutation พื้นฐานสำหรับทำ CRUD ไว้อยู่แล้ว ดังนั้นเป้าหมายของการทำ Custom Mutation ใน Data Connect ก็จะมี use case อื่นๆที่ไม่ได้มีการ insert ทั่วไป ตั้งแต่

• ส่งไปใช้งานใน platform คู่กับ SDK
• เพิ่มเฉพาะบาง field เข้าไป
• กำหนดค่า default ตอนที่มีการเพิ่มข้อมูล
• เพิ่ม Authorization ก่อนที่จะเขียนข้อมูล (เหมือน @auth ว่าจะต้อง login ก่อนถึงจะใช้งานได้)

โดย Firebase Data Connect เองก็ได้สร้าง template ไว้ให้แล้วตอน init command เป็นที่เรียบร้อยที่ folder เดียวกันกับ query นั่นคือ dataconnect/connector/mutations.gql เราจะลองมาใช้งาน Mutation จากตัวอย่างกัน

ที่ mutations.gql นั้น ได้มี comment ที่เป็น template ของ Data Connect อยู่ โดย mutation ที่เราจะลองมาใช้งานนั่นคือ mutation CreateMovie ที่ใช้สำหรับการเพิ่ม movie เข้าไป

• โดยถ้าเราดูจาก code มันคือการรับ ค่าทั้งหมด 3 ค่าเข้าไปคือ title (ชื่อ movie), genre (ประเภท movie) และ imageUrl (url ของ movie)
• โดยตัว mutation จะทำการยิงเข้า movie_insert (ตัว mutation default ที่ Data Connect เป็นสร้างขึ้นมา) เพื่อทำการเพิ่มข้อมูลเข้า database เข้าไป

code

# # Create a movie based on user input
mutation CreateMovie(
  $title: String!
  $genre: String!
  $imageUrl: String!
) @auth(level: PUBLIC) {
  movie_insert(
    data: {
      title: $title
      genre: $genre
      imageUrl: $imageUrl
    }
  )
}

ตัวอย่าง

เมื่อทำการสร้างเสร็จเรียบร้อยแล้ว สามารถใช้ท่าเดิมในการ deploy mutation ขึ้นไปได้

firebase deploy

เมื่อมาดูที่หน้า Firebase Data Connect แล้วเจอชื่อ mutation เดียวกัน แปลว่า deploy ได้ถูกต้องและเสร็จสิ้นเรียบร้อย

กลับมาที่ main.js เนื่องจากเรา setup Firebase Config ไปแล้วไปที่เรียบร้อย เราก็สามารถ import mutation ด้วยชื่อ function เดียวกัน (แบบเดียวกับตอน import query) เข้ามาใช้งานได้เลย โดย parameters ที่จะใส่ใน function ก็จะเป็นค่าเดียวกันกับที่ประกาศใน mutation ไว้

ตัวอย่างตาม code ด้านล่างนี้

import { dataConnect } from './app.js'
import { createMovie } from '@movie-app/movies'

try {
  const result = await createMovie(dataConnect, {
    title: 'New Records',
    genre: 'Action',
    imageUrl:
      'https://fastly.picsum.photos/id/534/200/200.jpg?hmac=fFEUULhOfD3o0WvBKAcTIKeSps59JC49BsTEBu5Z3eI',
  })
  console.log(result.data)
} catch (error) {
  console.error(error)
}

เมื่อลอง run ดูก็จะได้ผลลัพธ์แจ้งมาว่า insert ข้อมูลเข้าเรียบร้อย

ลองตรวจสอบข้อมูลที่ Firebase Console ตรง Data Connect ดู หากสามารถ query ข้อมูลชุดเดียวกันมาได้ = insert ข้อมูลถูกต้องเรียบร้อย

จะเห็นว่า เมื่อเรา setup project ไว้ถูกต้องแล้วเรียบร้อย step ในการเพิ่ม query, mutation จะทำเพียงแค่เพิ่ม GraphQL และ deploy เท่านั้นก็จะสามารถใช้งานได้แล้ว

เพิ่มเติมที่ Cloud SQL

นอกเหนือจากเรา สามารถดูการใช้งานผ่าน GraphQL ได้แล้ว เราสามารถเข้า Cloud console เพื่อเข้าถึง database ตัวจริงได้ รวมถึงดู log query และ monitor การใช้งานจริงได้ โดยเราสามารถเข้าผ่าน console.cloud.google.com และเลือกเข้า service SQL มาดูได้เลย (เลือก ชื่อ project ให้ตรงกันด้วยนะ)

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

โดยที่ตัว Cloud SQL นั้นก็สามารถดู raw query โดยตรงได้ รวมถึงจำนวน query ที่เกิดขึ้นบน Cloud SQL ได้ด้วย

หากใครสนใจ สามารถเจาะลึกในตัว Cloud SQL เพิ่มเติมได้ (ไว้มีโอกาสเราจะหยิบตัวนี้มาเล่ากันนะครับ 😆)

สรุปทั้งหมดทั้งมวล

และนี่ก็คือ Firebase Data Connect ฉบับผู้เริ่มต้น จริงๆยังมีอีกหลาย feature ที่เรายังไม่ได้พาเล่น ตั้งแต่

• การทำ Authentication กั้นสิทธิ์ต่างๆ
• Database Relation ระหว่าง table (ตัวอย่างนี้มีอยู่ใน video ตอนเปิดตัว product Data Connect ของ Google ทุกคนสามารถไปส่องดูได้)
• การใช้ Data Connect Emulator เพื่อให้นักพัฒนาสามารถพัฒนา service นี้บน local ได้ https://firebase.google.com/docs/data-connect/data-connect-emulator-suite

ทุกคนสามารถไปลองเล่นกันเพิ่มเติมได้

ส่วนตัว เรามองว่า มันแค่จะงงๆนิดหน่อยตอนเริ่ม โดยเฉพาะถ้าใครที่ไม่เคยใช้ GraphQL หรือไม่เคยใช้ Schema กำกับข้อมูลมา (เช่น คนที่เคยใช้ Firebase Cloud Firestore มา 😂) ซึ่งจากที่ลองมา ถ้าลองทำแล้วรอบนึง และ follow setup step อย่างถูกต้อง connection เข้าได้ไม่มีปัญหาอะไร ที่เหลือมันจะไปต่อตาม Document ได้ไม่ยากและ มันจะยากแค่ตอน setup แรกสุดแค่นั้น

ณ ตอนที่ publish บทความนี้ ยังมี free trial 3 เดือนให้สำหรับผู้เริ่มต้นใช้งานได้ทดลองใช้กันก่อน ทุกคนสามารถไปลองเล่นกันดูได้ และหลังจากนั้นจะมี Cost เกิดขึ้น ซึ่งสิ่งนี้มีเขียนไว้ใน document ชัดเจนแล้วเช่นเดียวกัน ว่า Cost ขั้นต่ำเป็นเท่าไหร่ และสามารถดูเรื่อง Cost นี้ได้จากที่ไหน

After General Availability, new customers can sign up for a 3 month no cost trial for the default Cloud SQL instance created using Firebase Data Connect. Existing customers participating in the Public Preview trials will automatically roll into the 3 month no cost trials when General Availability starts. After 3 months, pricing starts as low as $9.37 / month (pricing varies based on regions and configurations; see Cloud SQL pricing.

ส่วนตัวเราชอบความชัดเจนใน Document จุดนี้ เพราะเอาจริงมันก็ไม่ใช่ Technology ที่ราคาถูกเท่าไหร่หากนำไปใช้งานจริง ดังนั้นหากจะ Production อย่าลืมคำนวณ Cost กันก่อนขึ้นด้วยนะครับ

หวังว่าทุกคนจะได้รับความรู้และลองใข้งาน Data Connect กันนะครับ ตัวนี้เป็น Technology ตัวใหม่ อาจจะมีหลายจุดที่เราหลุดไป ใครใช้จริงเป็นอย่างไรหรือมีจุดไหนอยากเสริม หยิบมาแชร์กันได้เลยนะครับ 😁