firebase 作為後端的運用

文 / 西打藍 Siddharam

前言

firebase 可以說是造福前端工程師的好工具。

它讓你可以匯入 json 格式的資料，並透過 get API 拿取，甚至能在 javascript 進行 query 的動作，firebase 也提供封裝好的程式讓工程師使用。

另外它也和 GitHub Page 一樣，提供定量的免費 hosting 服務，也跟 AWS S3 一樣提供靜態資源的儲存空間；其他還有帳號的權限管理、機械學習的嵌入應用、後端程式碼執行空間等，為後端服務提供相對容易的接口。

建立

首先進入到 firebase 頁面，點選「新增專案」，在進入畫面後，在選擇「新增應用程式」。它目前提供 iOS、Android、Web 三種應用程式的服務，點選後會看到一段 javascript 程式碼，將它複製貼在你的程式碼中，接著就可以使用它們的服務了。

firebase console

功能

從最容易使用的 storage 開始，點選「上傳檔案」完成後，就能看見檔案資料。storage 也提供網址使用，只需點選圖片，在點擊「檔案位置」，就能看到下載網址。

接著是 hosting，它共有兩步操作說明：安裝、佈署。

安裝：npm install -g firebase-tools
佈署－
　　　登入：firebase login
　　　啟動專案：firebase init
　　　佈署網站：firebase deploy

完成以後，就能看見你的程式碼已經上傳到「發布紀錄」中，當你上傳新的程式碼時，會看見不同時期上傳的不同版本紀錄，你可以手動將歷史紀錄刪除。

接著是 Database ，一開始以測試模式啟動，接著要手動更改使用 Realtime Database。完成後，你可以在資料中任意新增資料，如下圖：

Realtime Database

然後點選進「article」，複製上方網址如「https://xxx.firebaseio.com/article」，最後面再加上「.json」，就可以在瀏覽器上讀到檔案。如果發現讀不到檔案，就要去「規則」裡，將「read」改成「true」，就可以了。

這些規則都是可以自由設定，並以 json 格式撰寫。在「write」部分，可以透過 javascript 的方式在前端寫入。下方有 auth.uid 的設置，那是下一段要說明 authentication，它可以限制只有某些帳號才能進行讀寫動作。


{
  /* Visit https://firebase.google.com/docs/database/security to learn more about security rules. */
  "rules": {
     "member": {
        ".read": true,
        ".write": true
      },
     "feedback": {
        ".read": true,
        ".write": true
      },
     "counter": {
        ".read": true,
        ".write": true
      },
     "list": {
        ".read": true,
        ".write": true
      },
     "article": {
        ".read": true,
        ".write": "auth.uid == 'hl2J8rF6WRhNF3R73gVoWfJwgQe2' || auth.uid == '8KZPB9hnGXf9FW5Dk97Ac4EY1jB2'",
      }

  }
}

authentication，讓你的網站可以進行會員註冊、登入。

首先進入到登入方式，將常用的登入選項啟用，如電子郵件/密碼、Google、Facebook，如果正確啟用後，它會顯示為綠色的「已啟用」。

接著點選「使用者」，你除了可以手動新增使用者外，也能透過內建 function 建立新帳戶，新增後，你就能看見新使用者的登入方式，以及 UID 等資料。UID 就是上述規則中限制讀寫的 auth.uid。

另外，在範本中，也有電子郵件驗證、密碼重設、電子郵件變更、簡訊驗證可以使用，這是我製作的範例網站，當中使用了 database、authentication、storage 的服務，有興趣可以參考。

應用方法

database:


// query

database.ref('article').orderByChild('skill').on('child_added', (snapshot) => {
    console.log(snapshot.val().rectangleUrl);
    // 取出 article 中，有 skill 的資料，並回傳 rectangleUrl 資料。
});


// query

  database.ref('article').orderByChild('city').equalTo('台北').on('child_added', (snapshot) => {
      console.log(snapshot.val());
      // 抓取 aticle 中，city value 為「台北」的全部資料。
  });


// 資料寫入

firebase.database().ref('member/'+ uid).set({
    name: app.get('#inputName').value,
    mail : userLogin.email,
    phone : app.get('#inputPhone').value,
    photoUrl : userLogin.photoURL,
    creatTime: new Date().getTime(),
    uid : uid
});

authentication:


//建立帳戶

firebase.auth().createUserWithEmailAndPassword(userMail, userCode).then(detectLogin()).catch(function(error) {
    let errorCode = error.code; 
    let errorMsg = error.message; 
    // 錯訊
  });


//登入帳戶

firebase.auth().signInWithEmailAndPassword(userLoginMail, userLoginCode).catch(function(error) {
    let errorCode = error.code;
    let errorMessage = error.message;
     // 錯訊
})


// 檢測用戶狀態

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // 有此用戶

    if(userLogin.emailVerified == true){
      // 用戶已經收到信件並確認

    }else{

        user.sendEmailVerification().then(function() {
          // 寄送確認信件
        })

        firebase.auth().signOut().then(function() {
          // 將用戶登出

        })
    }
  } else {
  }
});


// 更改密碼

firebase.auth().sendPasswordResetEmail(userLoginMail).then(function() {
    // 更改密碼確認信已寄送

  }, function(error) {
    // 錯訊

  });


// Google 登入

let provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().languageCode = 'pt';
app.log.letGmailLogin = function(){
    firebase.auth().signInWithPopup(provider).then(function(result) {
        // This gives you a Google Access Token. You can use it to access the Google API.
        var token = result.credential.accessToken;
        // The signed-in user info.
        var user = result.user;
        // ...

    }).catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // The email of the user's account used.
        var email = error.email;
        // The firebase.auth.AuthCredential type that was used.
        var credential = error.credential;
        // ...
    });
}

storage:


// 上傳圖片至 storage，並取得 URL

    app.get('#mainUploadPic').addEventListener('change', function(){
        // 圖片儲存
        let getFile = this.files[0]
    },false);

    // 上傳圖片
    let storageRef = firebase.storage().ref();
    let uploadTask = storageRef.child('images/'+getFile.name).put(getFile);

    uploadTask.on('state_changed', (snapshot) => {
        // observe status：progress, pause, and resume
        // get upload status and display by number
        let progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        switch (snapshot.state) {
          case firebase.storage.TaskState.PAUSED: // or 'paused'
            break;
          case firebase.storage.TaskState.RUNNING: // or 'running'
            break;
        }
    }, function(error) {
    // 錯訊

    }, function() {
        // 上傳圖片到 storage 成功
        // 取得 URL: https://firebasestorage.googleapis.com/...

        let downloadURL = uploadTask.snapshot.downloadURL;
        let pathReference = storageRef.child('images/'+getFile.name);
        pathReference.getDownloadURL().then(function(url) {
          // 取得圖片 URL
          squareUrl = url;
        })
    });

閱讀量次

聯絡與合作

訂閱電子報，領「我當前 10+ 以上收入源有哪些」一文。

有文字採訪、網站開發，或是諮詢需求，皆可至個人網站參考作品，並聯繫 IG。

或是想分享心情、聊聊天、交朋友，可以來秘密通道找我唷。

Email: frank@siddharam.com