Firebase 9 — มีอะไรใหม่

และวิธีเริ่มต้นภายในไม่กี่นาที

ล่าสุด Firebase เวอร์ชัน 9 เปิดตัวแล้ว และวิธีที่เราใช้นำเข้าและใช้ฟีเจอร์นี้ได้รับการแก้ไขแล้ว นี่เป็นเพราะการใช้คุณสมบัติการเขย่าต้นไม้ ต้นไม้สั่นตามเอกสาร MDN หมายถึงการลบโค้ดที่ไม่ทำงานออกจากไฟล์ JavaScript ที่รวมมาของคุณ

หากต้องการใช้ Firebase 9 ตรวจสอบให้แน่ใจว่าคุณได้ตั้งค่าโมดูลบันเดิลในแอปพลิเคชันของคุณแล้ว หากคุณสร้างแอปพลิเคชันของคุณโดยใช้เครื่องมือ cli เช่น

create react app OR vue-create

คุณไม่จำเป็นต้องถูกรบกวนจากตัวรวมโมดูล หากไม่ใช่ คุณจำเป็นต้องสร้างไฟล์กำหนดค่า webpack หนึ่งไฟล์หรือไฟล์บันเดิลอื่นๆ ที่คุณต้องการ หากคุณไม่ทราบวิธีเริ่มต้นใช้งาน Module Bundler นี่คือโพสต์สั้นๆ เพื่อให้คุณเริ่มต้นได้

ก่อนเริ่มต้น นี่คือลิงก์ไปยังโค้ดทั้งหมดที่อาจเป็นประโยชน์สำหรับคุณ นี่คือโครงกระดูกที่คุณสามารถคัดลอกและวางในโปรเจ็กต์ถัดไปของคุณ และเริ่มใช้ firebase 9 ได้โดยตรงภายในไม่กี่นาที เพียงเพิ่มการกำหนดค่า firebase ของคุณในไฟล์ .env แล้วทุกอย่างจะทำงานได้ดี

ตอนนี้เรามาเริ่มด้วยการตั้งค่า Firebase 9 กันดีกว่า

ตอนนี้ ฉันสันนิษฐานว่าคุณเคยใช้ Firebase มาก่อน และนั่นคือสาเหตุที่ทำให้คุณสนใจ Firebase 9ดังนั้น ฉันจะเริ่มต้นใช้งานและใช้ฟีเจอร์ต่างๆ ของ Firebase อย่างรวดเร็ว

ขั้นตอนที่ 1: ตั้งค่าไฟล์การกำหนดค่า Firebase

ไฟล์การกำหนดค่าไม่ใช่ไฟล์บังคับจริงๆ ที่คุณต้องมี แต่มันทำให้โครงสร้างโค้ดของคุณสวยงามและใช้งานง่าย ดังนั้นฉันจะสร้างไฟล์กำหนดค่าโดยที่แอป firebase ได้รับการเริ่มต้นก่อน

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

const app = initializeApp(firebaseConfig);
const auth = app.auth().createUserWith.......
const firestore = app.firestore() ..
and so on.

แต่ตอนนี้ด้วย Firebase 9 เราเพิ่งเริ่มต้นแอปหนึ่งครั้งและใช้อ็อบเจ็กต์นี้ในฟังก์ชัน firebase ต่างๆ ออบเจ็กต์ db (firestore), storgae (ที่เก็บข้อมูลบนคลาวด์), การรับรองความถูกต้อง (บริการตรวจสอบสิทธิ์) จะถูกใช้ในไฟล์อื่น ๆ

บริการตรวจสอบสิทธิ์

ด้วย firebase 9 ฟังก์ชั่นเช่น

createUserWithEmailAndPassword 
signInWithEmailAndPassword
onAuthStateChanged
updatePassword 
sendPasswordResetEmail
signOut

ถูกใช้เป็นฟังก์ชันเดี่ยวซึ่งเราสามารถส่งผ่านพารามิเตอร์ที่กำหนดเองได้

ใน firebase 8 การสร้างผู้ใช้ใหม่จะมีลักษณะดังนี้ -

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => { 
    return userCredential.user; 
  })
  .catch((error) => { 
    return error;
  });

โดยที่ firebase.auth คือออบเจ็กต์แอปที่เตรียมใช้งาน

ตอนนี้ใน Firebase 9 คุณต้องทำ

createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    return userCredential.user;
  })
  .catch((error) => {
    return error;
  });

โดยที่ auth คือออบเจ็กต์แอปที่เริ่มต้น

ความเป็นโมดูลเดียวกันนี้ได้ถูกนำไปใช้กับฟังก์ชัน firebase ที่มีอยู่ทั้งหมด ซึ่งรวมถึงฟังก์ชันจาก firestore ที่เก็บข้อมูล และการตรวจสอบสิทธิ์ด้วย

ตัวอย่างอื่นๆ ของบริการตรวจสอบสิทธิ์สไตล์ firebase-9 ได้แก่

การเปลี่ยนแปลงที่สำคัญที่ firebase 9 ซื้อคือไวยากรณ์ที่เราใช้ก่อนหน้านี้ ฉันรู้สึกว่านี่เป็นการปรับปรุงที่เหนือกว่าความยืดหยุ่น ตัวอย่างอื่นๆ (มีอยู่ใน Repository ด้านบนด้วย ฉันจะอัปเดตฟังก์ชันที่พร้อมใช้งานมากขึ้น) ของบริการอื่นๆ ได้แก่

บริการร้านดับเพลิง

บริการจัดเก็บข้อมูล

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