Firebase是Alphabet(google)的子公司，提供了一些很好用的服務，例如，身分驗證、Firestore(NoSQL database)。Firebase現在提供新的Web modular API，跟過去的Web namespaced API語法不太一樣，參考網路文件時要注意。本課程以Web modular API為主。

<aside> 🚧 尚未修改

</aside>

• Authentication

  • 用 Firebase Authentication 做一套簡易會員系統 – 電子郵件 密碼 (Javascript)
  • 以下簡單的整理一些常用的功能
  • 如果是採用email及密碼的帳號管理方式，註冊時，可使用createUserWithEmailAndPassword()。

  const auth = getAuth();
  const res = await createUserWithEmailAndPassword(auth, account.email, account.password);
  

  • 註冊時可會有一些錯誤，可利用try catch去處理，利用state變數(message)顯示錯誤訊息在畫面上。

      try {
        const res = await createUserWithEmailAndPassword(
          auth,
          account.email,
          account.password
        );
        setMessage("帳號已產生");
        console.log({ res });
      } catch (error) {
        let message = "";
        switch (error.code) {
          case "auth/email-already-in-use":
            message = "電子信箱已註冊";
            break;
          case "auth/weak-password":
            message = "密碼強度不足";
            break;
          case "auth/invalid-email":
            message = "電子郵件格式錯誤";
            break;
          default:
            message = "系統錯誤:" + error.code;
        }
        setMessage(message);
      }
  

  • 登入時，採用signInWithEmailAndPassword()

        const auth = getAuth();
        const res = await signInWithEmailAndPassword(
          auth,
          account.email,
          account.password
        );
  

  • 登入後，可以利用回傳的物件變數(如:res)取得登入的資訊。
  • firebase也提供onAuthStateChanged()來設定一個observer，當登入時，observer會被呼叫，並且取得目前登入者的資料(user)，再將登入者的資料儲存在state變數(currentUser)中。
  • unsub是用來停止監看，也就是當這個元件不再需要顯示時，會去呼叫onAuthStateChanged()回傳回來的unsub函數。
  • 再將這個部分放在useEffect()裡，例如:

    **useEffect(() => {
      const unsub = onAuthStateChanged(auth,** (user)=>{
        setCurrentUser(user);
        console.log(user);
      }**);
  
      return () => {
        unsub();
      }
    }, []);**
  

  在介面中，可以判斷state變數currentUser是否為null，就知道現在是否已登入，透過這樣的方式來改變介面的呈現內容。

              {**!currentUser** ? (
                  <Button>LOGIN</Button>
              ) : (
                  <Button>LOGOUT</Button>
              )}
  

  登出可使用signOut()。

    const handleLogout = async function () {
      await signOut(auth);
      alert("已登出");
    };
  

• Firestore基本概念與資料讀取

  • 讀取一個collection (如:English)裡，所有的文件，讀取之後，將所有文件放到state變數exams裡。

    useEffect(() => {
      async function fetchData() {
        const querySnapshot = await getDocs(collection(db, **"English"**));
        const temp = [];
        querySnapshot.forEach((doc) => {
          temp.push(doc.data());
          console.log(`${doc.id} => ${doc.data().question}`);
        });
        setExams(() => [...temp]);
      }
      fetchData();
      // eslint-disable-next-line
    }, []);
  

  • 讀取文件，可以利用doc()，指定collection (如:English)及doc id(如:1)。如果collection裡的文件是利用系統產生的id，那就要利用前一個範例裡的doc.id做為這裡的doc id。

  import { doc, getDoc } from "firebase/firestore";
  
  const docRef = doc(db, **"English"**, **"1"**);
  const docSnap = await getDoc(docRef);
  
  if (docSnap.exists()) {
    console.log("Document data:", docSnap.data());
  } else {
    // doc.data() will be undefined in this case
    console.log("No such document!");
  }
  

• 排序與篩選

  • 排序可以利用orderBy:

  useEffect(() => {
      async function fetchData() {
        const examCollection = collection(db, "English");
        const queryExam = query(examCollection, **orderBy("unit"));**
        const querySnapshot = await getDocs(queryExam);
        const temp = [];
        querySnapshot.forEach((doc) => {
          temp.push(doc.data());
          console.log(`${doc.id} => ${doc.data().question}`);
        });
        setExams(() => [...temp]);
        //set the first question and clean result here
        setQuestion(temp[0].question);
        setResult("");
      }
      fetchData();
      // eslint-disable-next-line
    }, []);
  

  • 篩選可以利用where:

  useEffect(() => {
      async function fetchData() {
        const examCollection = collection(db, "English");
        const queryExam = query(examCollection, **where("unit", "==", 1)**);
        const querySnapshot = await getDocs(queryExam);
        const temp = [];
        querySnapshot.forEach((doc) => {
          temp.push(doc.data());
          console.log(`${doc.id} => ${doc.data().question}`);
        });
        setExams(() => [...temp]);
        //set the first question and clean result here
        setQuestion(temp[0].question);
        setResult("");
      }
      fetchData();
      // eslint-disable-next-line
    }, []);
  

• 新增資料

  • 新增資料可以利用addDoc()，在collection裡(如:user)更新文件內容，會產生一個新的文件以及doc id

        **await addDoc(collection(db, "user"), {
          school: account.school
        });**
  

  • 新增資料也可以利用setDoc()，在collection裡(如:user)更新文件內容，當id (如:uid)不存在時，會利用uid為doc id產生一個新的文件

        **await setDoc(doc(db, "user", uid), {
          school: account.school
        });**
  

• 更新資料

  • 更新資料也可以利用setDoc()，在collection裡(如:user)更新文件內容，當id (如:uid)不存在時，會利用uid為doc id產生一個新的文件

        **await setDoc(doc(db, "user", uid), {
          school: account.school
        });**
  

  • 然而，如果只更新部分內容，setDoc會讓school以外其他欄位變成空白，而updateDoc就只是更動school，保留文件中其他內容。

        await **updateDoc**(doc(db, "user", uid), {
          school: account.school
        });
  

  • 如果要加一，可以利用內建的increment，例如:將count內容加一。

    const ref = doc(db, "text", props.article.docId);
    updateDoc(ref,{**count: increment(1)**});
  

  • 如果要更動陣列，新增collect陣列裡的內容

  await updateDoc(ref, {
      collect: arrayUnion(uid)
  });
  

  • 如果要更動陣列，刪除collect陣列裡的內容

  await updateDoc(ref, {
      collect: arrayRemove(uid)
  });
  

• 更新與刪除資料

  • 刪除資料就可利用deleteDoc()

  await **deleteDoc**(doc(db, "user", uid);
  

  • 如果是刪除文件中的collection (如:English)中的文件:

  **deleteDoc(doc(db, "user", user.uid, "English", counterDoc.id));**
  

• Timestamp

  • Firestore裡日期、時間的資料型態是Timestamp，timestamp跟javascript的Date是需要轉換的
  • 取得firebase的timestamp之後，可以利用timestamp的toDate()，將資料轉換成javascript的date，也可以再利用toLocaleDateString()轉成想要的呈現模式。也可以利用timestamp的fromDate()，將javascript的date轉換成timestamp。

  {time.toDate().toLocaleDateString("zh-TW")}
  

• 安全規則

  • Firebase 教學 - Firestore Rules 安全規則
  • Firebase Database Security Rules

Firebase環境設定

Add Data and Sort/Filter

Delete and Update Data

Authentication

Context (with Firebase Authentication)

Advanced Topics